/* ═══════════════════════════════════════════════════════════════
   HOME — the landing page only.

   Its palette, reset, buttons and masthead atoms were removed on
   integration: tokens.css and forum.css already carry them, and a
   second copy of a colour is a second place to change it. What is
   left is the parts the forum has no equivalent of — the hero, the
   bands, the status strip, the FAQ.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   TOKENS
   Red is a signal, not a surface: large type,
   hairlines, status dots, one filled button.
   Never body copy — saturated red on near-black
   lands near 5:1 and fatigues at reading sizes.
   Structure comes from hairlines and space, not
   from boxes, shadows or rounded cards.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){  }

section[id]{ scroll-margin-top:calc(var(--bar) + 8px); }

.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ash); margin:0;
  display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:1.6em; height:1px; background:var(--signal); flex:none; }

/* ── header ─────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(11,11,12,.84);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.topbar.past{ border-bottom-color:var(--line-hot); }
.topbar__in{
  display:flex; align-items:center; gap:var(--s3);
  height:var(--bar);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}

/* reading progress, drawn on the header hairline */
.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--signal); transform:scaleX(0); transform-origin:0 50%;
}
@supports (animation-timeline: scroll()){
  .progress{ animation:prog linear both; animation-timeline:scroll(root block); }
  @keyframes prog{ to{ transform:scaleX(1); } }
}
@media (prefers-reduced-motion:reduce){ .progress{ display:none; } }

.topnav{ display:flex; gap:1.75rem; margin-left:auto; }
.topnav 
.topnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-.1rem; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.topnav a:hover{ color:var(--bone); }
.topnav a:hover::after, .topnav a[aria-current="true"]::after{ transform:scaleX(1); }
.topnav a[aria-current="true"]{ color:var(--bone); }

@media (prefers-reduced-motion:reduce){  }
@media (max-width:980px){ .topnav{ display:none; }  }

/* ── hero ───────────────────────────────────── */
.hero{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  border-bottom:1px solid var(--line);
}
.hero__left{
  padding-block:var(--s5) var(--s4);
  padding-right:clamp(1.25rem,4vw,4.5rem);
  padding-left:max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter)));
  display:flex;
}
.hero__inner{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(1.5rem,2.6vw,2.25rem);
  width:100%; max-width:46rem;
}

/* Both lines are measured and scaled to the same width in JS.
   The sizes below are only the pre-script fallback. */
.wordmark{ width:100%; margin:.1em 0 0; text-transform:uppercase; line-height:.92; }
.wm-line{ display:block; }
.wm-line i{
  display:inline-block; font-style:normal; white-space:nowrap;
  font-variation-settings:"wdth" 118, "wght" 850;
  letter-spacing:-.035em; font-size:clamp(2.75rem, 9vw, 6.75rem);
}
.wm-line--out i{
  color:transparent; -webkit-text-stroke:2px var(--signal);
  font-size:clamp(4.5rem, 16vw, 12rem); letter-spacing:-.045em;
}

.lede{
  max-width:32ch; margin:0; text-wrap:pretty;
  font-size:clamp(1.0625rem,.95rem + .5vw,1.375rem); line-height:1.5;
}
.lede em{ font-style:normal; color:var(--ash); }

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.btn svg{ flex:none; }

.btn code{ font-family:inherit; letter-spacing:.02em; text-transform:none; }

.copied{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--signal); text-transform:uppercase; opacity:0;
  transition:opacity .2s var(--ease);
}
.copied.on{ opacity:1; }

.hero__met
.hero__meta span:first-child{ color:var(--ash); }

/* ── signature: dispatch board ──────────────── */
.feed{
  position:relative; display:flex; flex-direction:column;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    var(--panel);
  border-left:1px solid var(--line);
  padding:1.1rem 1.4rem 0;
  min-height:clamp(430px, 62vh, 660px);
}
.feed__head, .feed__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash);
}
.feed__head{ padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.feed__foot{ padding-block:.85rem; margin-top:auto; border-top:1px solid var(--line); color:var(--dim); }
.feed__foot b{ color:var(--signal); font-weight:500; }
.feed__scroll{ position:relative; flex:1; overflow:hidden; padding-top:.9rem; }
.feed__scroll::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4.5rem;
  background:linear-gradient(to top, var(--panel), rgba(16,16,19,0)); pointer-events:none;
}
.feed__log{
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:.8125rem; line-height:1.35;
  display:flex; flex-direction:column; gap:.55rem;
}
.feed__log li{
  display:grid; grid-template-columns:auto auto 1fr; gap:.4rem .9rem;
  align-items:baseline; padding-bottom:.55rem;
  border-bottom:1px dotted var(--line);
  animation:push .5s var(--ease) both;
}
@keyframes push{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .feed__log li{ animation:none; } }

.feed__t{ color:var(--dim); font-variant-numeric:tabular-nums; }
.feed__c{ color:var(--ash); font-weight:500; white-space:nowrap; }
.feed__b{ color:var(--bone); grid-column:1/-1; }
.feed__b small{
  display:block; font-size:.75em; color:var(--dim);
  letter-spacing:.1em; text-transform:uppercase; margin-top:.25rem;
}
.feed__log li.pri .feed__c{ color:var(--signal); }
.feed__log li.pri{ border-bottom-color:var(--line-hot); }

@media (max-width:1060px){
  .hero{ grid-template-columns:1fr; }
  .hero__left{ padding-inline:var(--gutter); }
  .hero__inner{ max-width:38rem; }
  .feed{ border-left:0; border-top:1px solid var(--line); min-height:0; }
  .feed__scroll{ max-height:21rem; }
}

/* ── status strip ───────────────────────────── */
.status{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.status > div{ padding:var(--s3) var(--gutter); border-left:1px solid var(--line); }
.status > div:first-child{ border-left:0; }
.status dt{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); margin-bottom:.5rem;
}
.status dd{
  margin:0; font-size:clamp(1.25rem,1rem + 1vw,1.9rem);
  font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 104,"wght" 800;
}
.status dd i{ font-style:normal; color:var(--dim); font-weight:500; font-size:.55em; letter-spacing:0; }
@media (max-width:820px){
  .status{ grid-template-columns:repeat(2,1fr); }
  .status > div:nth-child(3){ border-left:0; }
  .status > div:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ── bands ──────────────────────────────────── */
.band{ padding-block:var(--s6); border-bottom:1px solid var(--line); }
.band--panel{ background:var(--panel); }

/* two-column editorial layout: the rail stays put, the column scrolls */
.cols{ display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:clamp(1.5rem,5vw,5rem); }
.rail{ position:sticky; top:calc(var(--bar) + var(--s4)); align-self:start; }
.rail h2{
  font-size:clamp(1.75rem,1.1rem + 2.2vw,2.75rem);
  font-variation-settings:"wdth" 106,"wght" 800;
  text-transform:uppercase; margin-top:var(--s2); text-wrap:balance;
}
.rail p{ color:var(--ash); font-size:.9375rem; margin:var(--s2) 0 0; max-width:26ch; }
@media (max-width:900px){
  .cols{ grid-template-columns:1fr; gap:var(--s4); }
  .rail{ position:static; }
}

/* ── manifesto ──────────────────────────────── */
.prose p{ max-width:58ch; margin:0 0 1.4rem; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:700; color:#fff; }
.pull{
  margin:var(--s4) 0; padding-left:1.5rem; border-left:2px solid var(--signal);
  font-size:clamp(1.35rem,1rem + 1.4vw,2.1rem);
  font-weight:700; line-height:1.18; letter-spacing:-.02em;
  max-width:22ch; text-wrap:balance;
}

.tenets{ margin:var(--s5) 0 0; border-top:1px solid var(--line); }
.tenets > div{
  display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:.5rem 2rem;
  padding-block:var(--s3); border-bottom:1px solid var(--line);
}
.tenets dt{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--signal); padding-top:.35em;
}
.tenets dd{ margin:0; color:var(--ash); font-size:.9375rem; max-width:52ch; text-wrap:pretty; }
.tenets dd b{ display:block; color:var(--bone); font-weight:700; font-size:1.0625rem; margin-bottom:.2rem; }
@media (max-width:640px){ .tenets > div{ grid-template-columns:1fr; } }

/* ── steps ──────────────────────────────────── */
.steps{
  counter-reset:s; display:grid; gap:1px; background:var(--line);
  border-block:1px solid var(--line);
}
.step{
  background:var(--ink); padding:var(--s4) var(--s3) var(--s4) 0;
  display:grid; grid-template-columns:3rem 1fr; gap:1.25rem; align-items:start;
  transition:background-color .22s var(--ease);
}
.band--panel .step{ background:var(--panel); }
.step:hover{ background:var(--panel-2); }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:.875rem; font-weight:600;
  color:var(--signal); letter-spacing:.08em; padding-top:.2em;
}
.step h3{ font-size:1.1875rem; margin-bottom:.5rem; letter-spacing:-.015em; }
.step p{ margin:0; color:var(--ash); font-size:.9375rem; max-width:52ch; }
.step code{
  font-family:var(--mono); font-size:.875rem; color:var(--bone);
  background:var(--panel-2); padding:.15em .45em; border-radius:2px;
  border:1px solid var(--line); white-space:nowrap;
}
@media (min-width:820px){
  .steps{ grid-template-columns:1fr 1fr; }
  .step{ padding-inline:var(--s3); }
  .step:nth-child(odd){ padding-left:0; }
}

/* ── rules + faq ────────────────────────────── */
.house{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.house li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  padding-block:var(--s3); border-bottom:1px solid var(--line); font-size:.9375rem;
}
.house li::before{
  content:"//"; font-family:var(--mono); color:var(--blood);
  font-weight:600; font-size:.8125rem; padding-top:.15em;
}
.house b{ display:block; font-weight:700; margin-bottom:.15rem; }
.house span{ color:var(--ash); }

.faq{ border-bottom:1px solid var(--line); }
.faq:first-of-type{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2rem 1.15rem 0;
  position:relative; font-weight:600; font-size:1rem;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:11px; height:11px; margin-top:-5px;
  background:
    linear-gradient(var(--signal),var(--signal)) center/11px 1.5px no-repeat,
    linear-gradient(var(--signal),var(--signal)) center/1.5px 11px no-repeat;
  transition:transform .3s var(--ease);
}
.faq[open] summary::after{ transform:rotate(90deg); background-size:11px 1.5px, 0 0; }
.faq summary:hover{ color:var(--signal); }
.faq__
.faq[open] .faq__
.faq__body > div{ overflow:hidden; }
.faq p{ margin:0 0 1.25rem; color:var(--ash); font-size:.9375rem; max-width:60ch; text-wrap:pretty; }
@media (prefers-reduced-motion:reduce){ .faq__ }

/* ── footer ─────────────────────────────────── */

footer{ padding-block:var(--s6) var(--s4); }
.foot{ padding-bottom:var(--s5); border-bottom:1px solid var(--line); }
.foot h2{
  font-size:clamp(1.9rem,1.2rem + 3vw,3.5rem);
  font-variation-settings:"wdth" 112,"wght" 800;
  text-transform:uppercase; max-width:16ch; margin-top:var(--s3); text-wrap:balance;
}
.foot p{ color:var(--ash); margin:1rem 0 var(--s3); max-width:44ch; }

.colophon 
.colophon a:hover{ color:var(--bone); }

/* ── motion ─────────────────────────────────── */
.rise{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.rise.in{ opacity:1; transform:none; }

.js .hero__inner > *, .js .feed{ opacity:0; transform:translateY(12px); }
.hero.ready .hero__inner > *, .hero.ready .feed{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero.ready .hero__inner > *:nth-child(1){ transition-delay:.04s; }
.hero.ready .hero__inner > *:nth-child(2){ transition-delay:.10s; }
.hero.ready .hero__inner > *:nth-child(3){ transition-delay:.20s; }
.hero.ready .hero__inner > *:nth-child(4){ transition-delay:.28s; }
.hero.ready .hero__inner > *:nth-child(5){ transition-delay:.34s; }
.hero.ready .feed{ transition-delay:.16s; }

@media (prefers-reduced-motion:reduce){
  .rise, .js .hero__inner > *, .js .feed{ opacity:1; transform:none; transition:none; }
}

/* ── join call to action ────────────────────────────────────────
   Added on integration. The landing page can see the session now,
   so the last step is the one the reader is actually on. */
.joincta{
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2);
}
.joincta__note{
  margin:0; color:var(--ash); font-size:.9375rem; line-height:1.5; max-width:52ch;
}