:root{
  --ink-bg: #12151c;
  --ink-bg-2: #191d26;
  --ink-bg-3: #1f2431;
  --paper: #f1e8d3;
  --paper-2: #e8dcbc;
  --paper-line: rgba(32,26,18,0.14);
  --brass: #b6924f;
  --brass-bright: #dcb876;
  --brass-dim: #7d6738;
  --rattler: #a8462c;
  --rattler-bright: #c8623f;
  --ink-text: #221b12;
  --bone: #ece4d2;
  --bone-dim: #b9beca;
  --navy-dim: #838ba1;
  --radius: 18px;
  --max: 1120px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -8%, #202636 0%, transparent 60%),
    radial-gradient(900px 700px at 108% 8%, #1c2130 0%, transparent 55%),
    var(--ink-bg);
  color: var(--bone);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }
img{ max-width:100%; display:block; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--bone);
}
.on-paper h1, .on-paper h2, .on-paper h3{ color: var(--ink-text); }

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-bright);
  display: inline-flex;
  align-items:center;
  gap: .55em;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--brass-bright);
  display:inline-block;
}
.on-paper .eyebrow{ color: var(--rattler); }
.on-paper .eyebrow::before{ background: var(--rattler); }

.mono{ font-family:'Space Mono', monospace; }

/* ---------- NAV ---------- */
header.site{
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,21,28,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(182,146,79,0.22);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.brandmark{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size: 1.05rem;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.brandmark .chip{
  width: 34px; height: 34px; border-radius: 7px;
  background: linear-gradient(155deg, var(--paper), var(--paper-2));
  border: 1.5px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace;
  font-weight:700; font-size:.62rem; color: var(--ink-text);
  flex: none;
}
nav.primary{
  display:flex; gap: 30px;
  font-family:'Space Mono', monospace;
  font-size: .78rem;
  letter-spacing:.04em;
  text-transform: uppercase;
}
nav.primary a{
  text-decoration:none; color: var(--navy-dim);
  position:relative; padding: 6px 0;
  transition: color .2s ease;
}
nav.primary a:hover, nav.primary a:focus-visible{ color: var(--brass-bright); }
nav.primary a.active{ color: var(--bone); }
nav.primary a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--rattler-bright);
}
.nav-cta{
  font-family:'Space Mono', monospace;
  font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink-text); background: var(--brass-bright);
  padding: 10px 16px; border-radius: 999px; text-decoration:none;
  border: 1px solid var(--brass-bright);
  white-space:nowrap;
  transition: transform .15s ease, background .2s ease;
}
.nav-cta:hover{ background: var(--paper); transform: translateY(-1px); }

.burger{
  display:none; background:none; border:1px solid var(--brass-dim); border-radius:8px;
  width:42px; height:38px; cursor:pointer; position:relative;
}
.burger span, .burger span::before, .burger span::after{
  content:""; position:absolute; left:9px; right:9px; height:2px; background: var(--bone);
  transition: transform .2s ease, opacity .2s ease;
}
.burger span{ top:18px; }
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px){
  nav.primary{
    position:absolute; top:72px; left:0; right:0;
    background: var(--ink-bg-2);
    flex-direction:column; gap:0;
    border-bottom: 1px solid rgba(182,146,79,0.22);
    max-height:0; overflow:hidden;
    transition: max-height .28s ease;
  }
  nav.primary.open{ max-height: 420px; }
  nav.primary a{ padding: 16px 28px; border-top:1px solid rgba(182,146,79,0.12); }
  nav.primary a.active::after{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
}

/* ---------- SECTIONS shared ---------- */
section{ padding: 96px 0; position:relative; }
section.alt{ background: linear-gradient(180deg, transparent, rgba(182,146,79,0.045) 12%, rgba(182,146,79,0.045) 88%, transparent); }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head p{ color: var(--bone-dim); font-size: 1.02rem; }

.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- HERO ---------- */
.hero{ padding: 76px 0 40px; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center;
}
.hero h1{ font-size: clamp(2.5rem, 5vw, 3.6rem); line-height:1.04; margin: .3em 0 .38em; }
.hero-lede{ font-size: 1.14rem; color: var(--bone-dim); max-width: 46ch; margin-bottom: 2em; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:'Space Mono', monospace; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  padding: 14px 22px; border-radius: 999px; text-decoration:none; display:inline-flex; align-items:center; gap:.6em;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--rattler); color: var(--bone); border:1px solid var(--rattler-bright); }
.btn-primary:hover{ box-shadow: 0 10px 26px -8px rgba(168,70,44,0.55); }
.btn-ghost{ background: transparent; color: var(--bone); border: 1px solid rgba(236,228,210,0.32); }
.btn-ghost:hover{ border-color: var(--brass-bright); color: var(--brass-bright); }

/* signature slab card */
.slab{
  background:
    radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,0.5), transparent 45%),
    linear-gradient(160deg, var(--paper), var(--paper-2));
  border-radius: var(--radius);
  border: 1px solid rgba(32,26,18,0.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 60px -22px rgba(0,0,0,0.55),
    0 0 0 6px rgba(18,21,28,0.35);
  color: var(--ink-text);
  overflow:hidden;
  position:relative;
}
.slab::after{
  content:""; position:absolute; inset:8px; border:1px solid rgba(182,146,79,0.55); border-radius: calc(var(--radius) - 8px);
  pointer-events:none;
}
.slab-label{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px; border-bottom: 1px dashed rgba(32,26,18,0.28);
  font-family:'Space Mono', monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--brass-dim);
}
.slab-label .status{ color: var(--rattler); font-weight:700; }
.slab-body{ padding: 40px 32px 34px; text-align:center; }
.slab-body img{ max-width: 260px; margin: 0 auto 18px; }
.slab-tagline{ font-family:'Fraunces', serif; font-style:italic; font-size:1.06rem; color:#3a3120; max-width: 30ch; margin: 0 auto; }
.slab-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 22px; border-top: 1px dashed rgba(32,26,18,0.28);
  font-family:'Space Mono', monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--brass-dim);
}
.seal{
  width:30px; height:30px; border-radius:50%;
  border: 1.5px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace; font-size:.55rem; color:var(--brass-dim);
  flex:none;
}

/* meeting banner */
.banner{
  margin-top: 46px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background: var(--ink-bg-3);
  border: 1px solid rgba(200,98,63,0.4);
  border-left: 4px solid var(--rattler-bright);
  border-radius: 14px;
  padding: 20px 24px;
}
.banner .pulse{
  width:10px; height:10px; border-radius:50%; background: var(--rattler-bright); flex:none;
  box-shadow: 0 0 0 0 rgba(200,98,63,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(200,98,63,0.55); }
  70%{ box-shadow: 0 0 0 12px rgba(200,98,63,0); }
  100%{ box-shadow: 0 0 0 0 rgba(200,98,63,0); }
}
.banner strong{ color: var(--bone); }
.banner .details{ color: var(--bone-dim); font-size:.94rem; }
.banner .details b{ color: var(--brass-bright); font-weight:600; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
.about-copy p{ color: var(--bone-dim); }
.about-copy p + p{ margin-top:1em; }

.feature-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.feature{
  border:1px solid rgba(182,146,79,0.25);
  background: rgba(182,146,79,0.05);
  border-radius: 14px; padding: 20px 20px 18px;
}
.feature .num{ font-family:'Space Mono', monospace; font-size:.68rem; color: var(--brass-bright); letter-spacing:.1em; }
.feature h3{ font-size:1.04rem; margin: .5em 0 .35em; }
.feature p{ margin:0; color: var(--bone-dim); font-size:.92rem; }

@media (max-width: 860px){ .about-grid{ grid-template-columns:1fr; } .feature-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .feature-grid{ grid-template-columns: 1fr; } }

/* ---------- BUILDING (ask cards) ---------- */
.ask-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.ask-card{
  background: linear-gradient(160deg, var(--paper), var(--paper-2));
  border-radius: 14px; padding: 22px 20px; color: var(--ink-text);
  border: 1px solid rgba(32,26,18,0.12);
  display:flex; flex-direction:column; gap:10px; min-height: 190px;
}
.ask-card .tag{
  font-family:'Space Mono', monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--rattler); font-weight:700;
}
.ask-card h3{ font-size: 1.0rem; margin:0; }
.ask-card p{ margin:0; font-size:.88rem; color:#4a4028; flex:1; }
.ask-card a{ font-size:.8rem; text-decoration:underline; color:#5b3e22; font-weight:600; }
.ask-card.open{
  background: transparent; border: 1.5px dashed rgba(236,228,210,0.4); color: var(--bone);
  align-items:flex-start; justify-content:center;
}
.ask-card.open .tag{ color: var(--brass-bright); }
.ask-card.open p{ color: var(--bone-dim); }

@media (max-width: 1000px){ .ask-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .ask-grid{ grid-template-columns: 1fr; } }

/* ---------- TIMELINE ---------- */
.timeline{ position:relative; max-width: 804px; }
.timeline::before{
  content:""; position:absolute; left: 108px; top:6px; bottom:6px; width:1px;
  background: linear-gradient(var(--brass-dim), transparent);
}
.t-item{ display:grid; grid-template-columns: 108px 1fr; gap: 26px; padding: 0 0 34px; position:relative; }
.t-item:last-child{ padding-bottom:0; }
.t-cert{ font-family:'Space Mono', monospace; font-size:.7rem; color: var(--brass-bright); text-align:right; padding-top:3px; white-space:nowrap; }
.t-dot{
  position:absolute; left: 104px; top: 5px; width:9px; height:9px; border-radius:50%;
  background: var(--rattler-bright); border: 2px solid var(--ink-bg);
}
.t-body{ padding-left: 8px; }
.t-body h3{ font-size: 1.02rem; margin: 0 0 .35em; }
.t-body p{ margin:0; color: var(--bone-dim); font-size:.94rem; }

@media (max-width: 560px){
  .timeline::before{ left: 74px; }
  .t-item{ grid-template-columns: 74px 1fr; gap: 16px; }
  .t-dot{ left: 70px; }
  .t-cert{ font-size:.62rem; }
}

/* ---------- RESOURCES ---------- */
.res-group{ margin-bottom: 40px; }
.res-group:last-child{ margin-bottom:0; }
.res-group h3{
  font-family:'Space Mono', monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--brass-bright); font-weight:400; margin-bottom: 16px;
}
.res-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.res-link{
  display:block; text-decoration:none; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(182,146,79,0.22); background: rgba(255,255,255,0.02);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.res-link:hover{ border-color: var(--brass-bright); background: rgba(182,146,79,0.08); transform: translateY(-2px); }
.res-link .rk-title{ color: var(--bone); font-weight:600; font-size:.94rem; display:block; margin-bottom:4px; }
.res-link .rk-desc{ color: var(--navy-dim); font-size:.82rem; }
.res-link .rk-arrow{ font-family:'Space Mono', monospace; font-size:.72rem; color: var(--rattler-bright); }

@media (max-width: 900px){ .res-list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .res-list{ grid-template-columns: 1fr; } }

/* ---------- JOIN ---------- */
.join-panel{
  background: linear-gradient(160deg, var(--paper), var(--paper-2));
  border-radius: 22px; color: var(--ink-text);
  padding: 52px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center;
  border: 1px solid rgba(32,26,18,0.12);
}
.join-panel h2{ color: var(--ink-text); font-size: 2rem; }
.join-panel p{ color: #4a4028; }
.join-list{ list-style:none; margin: 20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.join-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; color:#3a3120; }
.join-list li::before{ content:"—"; color: var(--rattler); flex:none; }
.join-cta{ display:flex; flex-direction:column; gap:14px; }
.join-cta .btn-primary{ justify-content:center; }
.join-note{ font-size:.8rem; color:#6b5c3a; }

@media (max-width: 860px){ .join-panel{ grid-template-columns:1fr; padding: 36px 26px; } }

/* ---------- CONTACT / FOOTER ---------- */
.contact-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card{
  border: 1px solid rgba(182,146,79,0.22); border-radius:14px; padding: 24px;
  background: rgba(182,146,79,0.04);
}
.contact-card .role{ font-family:'Space Mono', monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--brass-bright); }
.contact-card .who{ font-family:'Fraunces', serif; font-size:1.2rem; margin: .35em 0; }
.contact-card a{ color: var(--rattler-bright); text-decoration:none; font-size:.92rem; word-break:break-word; }
.contact-card a:hover{ text-decoration:underline; }

@media (max-width: 760px){ .contact-grid{ grid-template-columns:1fr; } }

footer{
  border-top: 1px solid rgba(182,146,79,0.18);
  padding: 34px 0 44px;
  color: var(--navy-dim); font-size:.82rem;
}
.foot-row{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.foot-row .mono{ font-size:.74rem; }
