/* ============================================================
   SPLINTER SCION — website sample
   Palette law: the page is warm. Cold (#4A6FA5 / #B8C4CC / #E8EEF2 /
   #14171A) appears ONLY inside .cold intrusion modules. Never elsewhere.
   ============================================================ */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face{
  font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/oswald-500-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;
  src:url('../fonts/sourcesans3-latin.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plexmono-400-latin.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root{
  /* warm base — deliberately NOT void black */
  --bg:#191815;
  --surface:#232019;
  --surface-2:#2a2620;
  --text:#D8CFC0;
  --muted:#8F8E84;            /* text-safe secondary */
  --hairline:#6B6B63;         /* non-text hairlines only */
  --olive:#5C5A3E;
  --steel:#71797E;
  --rust:#8B4A2B;
  /* UI accent ramp (site-own, NOT the gear-tier ramp) */
  --ui-idle:#B4763A;
  --ui-hover:#D98F41;
  --ui-active:#E8A34A;
  --cta-fill:#C97F3D;
  --cta-label:#191815;
  /* cold — intrusion only */
  --cold-blue:#4A6FA5;
  --cold-chrome:#B8C4CC;
  --cold-white:#E8EEF2;
  --void:#14171A;
  --display:'Oswald', 'Arial Narrow', sans-serif;
  --body:'Source Sans 3', 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', Consolas, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:1.06rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ui-idle)}
a:hover,a:focus-visible{color:var(--ui-hover)}
a:active{color:var(--ui-active)}
:focus-visible{outline:2px solid var(--ui-hover);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:-999px;top:0;background:var(--cta-fill);color:var(--cta-label);
  padding:.6rem 1rem;z-index:100;font-weight:700}
.skip-link:focus{left:.5rem;top:.5rem}

/* ---------- type ---------- */
h1,h2,h3,.display{font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;line-height:1.15;color:var(--text)}
h1{font-size:clamp(2rem,6vw,4.2rem)}
h2{font-size:clamp(1.4rem,3.4vw,2.2rem)}
h3{font-size:clamp(1.05rem,2.4vw,1.35rem)}
@media(max-width:600px){h1,h2,h3{letter-spacing:.02em}}
.kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ui-idle);margin-bottom:.6rem}
.lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--text);max-width:46ch}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.85rem}

/* ---------- channel divider (the signature <hr>) ---------- */
.channel{border:0;height:2px;margin:0 auto;max-width:1100px;width:88%;
  background:linear-gradient(90deg,transparent,var(--olive) 18%,var(--olive) 82%,transparent);
  position:relative}
.channel::after{content:"";position:absolute;left:12%;top:0;height:2px;width:64px;
  background:var(--ui-idle);box-shadow:0 0 8px 1px rgba(217,143,65,.55)}

/* ---------- layout ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
section{padding:clamp(3rem,7vw,5.5rem) 0}
.grid-3{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ---------- nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(25,24,21,.92);
  border-bottom:1px solid rgba(107,107,99,.35);backdrop-filter:blur(6px)}
.site-nav .bar{display:flex;align-items:center;gap:1.2rem;max-width:1160px;margin:0 auto;
  padding:.65rem clamp(1rem,4vw,2.5rem)}
.wordmark{font-family:var(--display);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);text-decoration:none;white-space:nowrap}
.wordmark .splinter{color:var(--ui-idle)}
.nav-links{display:flex;gap:1.15rem;margin-left:auto;align-items:center;list-style:none}
.nav-links a{position:relative;text-decoration:none;color:var(--text);font-size:.98rem;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--ui-hover);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a:active::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ui-hover)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--hairline);
  color:var(--text);font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;
  padding:.45rem .8rem;cursor:pointer}
@media(max-width:980px){   /* raised from 820px when Forum + Help joined the nav */
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:flex-start;background:#1e1c18;border-bottom:1px solid rgba(107,107,99,.4);
    padding:1rem clamp(1rem,4vw,2.5rem);gap:.9rem;margin-left:0}
  .nav-links.open{display:flex}
}

/* ---------- CTA ---------- */
.cta{display:inline-block;background:var(--cta-fill);color:var(--cta-label);
  font-family:var(--body);font-weight:700;font-size:1.17rem;text-decoration:none;
  padding:.8rem 1.7rem;border:0;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px rgba(25,24,21,.35)}
.cta::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;
  background:var(--ui-hover);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.cta:hover,.cta:focus-visible{background:var(--ui-hover);color:var(--cta-label)}
.cta:hover::after,.cta:focus-visible::after,.cta:active::after{transform:scaleX(1)}
.cta:active{background:var(--ui-active)}
.cta.small{font-size:1rem;padding:.55rem 1.1rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden;padding:0}
.hero-art{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.96)}
.hero-art.parallax{will-change:transform}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(25,24,21,.42) 0%,rgba(25,24,21,.05) 38%,rgba(25,24,21,.55) 74%,var(--bg) 98%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 clamp(1rem,4vw,2.5rem) clamp(2.2rem,6vh,4rem);
  max-width:1160px;margin:0 auto}
.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.65)}
.hero .kicker{color:var(--ui-hover);text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.8)}
.hero .lede{margin:.8rem 0 1.4rem;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hero-embers{position:absolute;inset:0;z-index:1;pointer-events:none}

/* fact strip */
.fact-strip{background:var(--surface);border-top:1px solid rgba(107,107,99,.3);
  border-bottom:1px solid rgba(107,107,99,.3);padding:.9rem 0}
.fact-strip ul{display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;list-style:none;
  max-width:1160px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.fact-strip li{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.fact-strip li strong{color:var(--text);font-weight:400}

/* ---------- lamp line ---------- */
.lampline{display:block;margin:0 auto;max-width:1100px;width:92%;height:74px}
.lampline .flame{transition:opacity 1.2s ease}
.lamp-gone .flame-9{opacity:0}
.lamp-gone .cold-fleck{opacity:.85}
.cold-fleck{opacity:0;transition:opacity 2.5s ease}

/* ---------- riveted card (ratified treatment) ---------- */
.card{background:var(--surface);border:1px solid rgba(107,107,99,.5);position:relative;
  padding:1.25rem 1.35rem;
  background-image:radial-gradient(circle at 7px 7px,rgba(216,207,192,.28) 1.6px,transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) 7px,rgba(216,207,192,.28) 1.6px,transparent 2.2px),
    radial-gradient(circle at 7px calc(100% - 7px),rgba(216,207,192,.28) 1.6px,transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),rgba(216,207,192,.28) 1.6px,transparent 2.2px)}
.card h3{margin-bottom:.5rem}
.card .mono{color:var(--muted)}

/* ---------- peoples cards ---------- */
.people-card{display:block;text-decoration:none;color:var(--text);background:var(--surface);
  border:1px solid rgba(107,107,99,.5);overflow:hidden;position:relative}
.people-card img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;
  filter:saturate(.98);transition:transform .35s ease}
.people-card:hover img,.people-card:focus-visible img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.people-card:hover img{transform:none}}
.people-card figcaption{padding:.9rem 1rem 1.1rem;position:relative}
.people-card .name{font-family:var(--display);font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase;display:block}
.people-card .line{color:var(--muted);font-size:.95rem;margin-top:.2rem;display:block}
.people-card::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--ui-hover);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.people-card:hover::after,.people-card:focus-visible::after,.people-card:active::after{transform:scaleX(1)}

/* ---------- postcards ---------- */
.postcard{position:relative;overflow:hidden;border:1px solid rgba(107,107,99,.45);background:var(--surface)}
.postcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.postcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;
  background:linear-gradient(180deg,transparent,rgba(20,18,15,.88));font-size:.92rem}
.postcard .mono{color:var(--muted);display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

/* ============================================================
   THE COLD MODULE — the only place cold colour may exist
   ============================================================ */
.cold{background:var(--void);color:var(--cold-chrome);position:relative;overflow:hidden}
.cold .kicker{color:var(--cold-blue)}
.cold h2,.cold h3{color:var(--cold-white)}
.cold .seam{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--cold-blue);
  box-shadow:0 0 12px 1px rgba(74,111,165,.8);transform:scaleX(0);transform-origin:left}
.cold.seam-drawn .seam{transform:scaleX(1);transition:transform 2.4s cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){.cold.seam-drawn .seam{transition:none}}
.no-js .cold .seam{transform:scaleX(1)}
/* machine-printed card: too clean, no rivets, no texture */
.machine-card{background:#0f1215;border:1px solid rgba(184,196,204,.35);max-width:520px;
  padding:1.5rem 1.7rem;font-family:var(--mono);color:var(--cold-white);
  letter-spacing:.08em;font-size:.95rem;line-height:1.9}
.machine-card .tag{color:var(--cold-blue);font-size:.72rem;letter-spacing:.22em;display:block;margin-bottom:.6rem}
.cold a{color:var(--cold-chrome);text-decoration-color:var(--cold-blue)}
.cold a:hover,.cold a:focus-visible{color:var(--cold-white)}
.frag-grid{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.frag-grid{grid-template-columns:1fr 1fr}}
.cold .frag{border:1px solid rgba(184,196,204,.25);background:#0f1215}
.cold .frag img{width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.92}
.cold .frag figcaption{padding:.55rem .7rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cold-chrome)}

/* ledger (signal page) */
.ledger{display:grid;gap:1rem;max-width:640px}
.ledger .entry{border-left:2px solid var(--olive);padding:.2rem 0 .2rem 1.1rem}
.ledger .entry .mono{color:var(--muted);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.ledger .entry p{margin-top:.25rem}
.cold .ledger .entry{border-left-color:var(--cold-blue)}

/* ---------- world map ---------- */
.mapframe{position:relative;border:1px solid rgba(107,107,99,.5);overflow:hidden}
.mapframe>img{width:100%;display:block}
.pin{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  background:rgba(25,24,21,.72);border:2px solid var(--ui-idle);border-radius:50%;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.pin::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ui-hover);
  box-shadow:0 0 9px 2px rgba(217,143,65,.6)}
.pin:hover,.pin:focus-visible{border-color:var(--ui-active)}
.pin.is-active{border-color:var(--ui-active);background:rgba(25,24,21,.92)}
.pin.cold-pin{border-color:var(--cold-blue)}
.pin.cold-pin::before{background:var(--cold-blue);box-shadow:0 0 9px 2px rgba(74,111,165,.75)}
.map-caption{margin-top:1rem;min-height:5.4rem}
.map-caption .card{max-width:640px}
.map-legend{margin-top:2rem}
.map-legend dt{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;margin-top:1rem}
.map-legend dd{color:var(--muted);margin-left:0}
.js .map-legend{display:none}   /* JS builds the interactive caption; legend is the no-JS fallback */

/* ---------- peoples page ---------- */
.tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0}
.tab-btn{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:1rem;
  background:var(--surface);border:1px solid rgba(107,107,99,.5);color:var(--text);
  padding:.55rem 1.2rem;cursor:pointer;position:relative}
.tab-btn::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;
  background:var(--ui-hover);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.tab-btn:hover::after,.tab-btn:focus-visible::after,.tab-btn[aria-selected="true"]::after{transform:scaleX(1)}
.tab-btn[aria-selected="true"]{background:var(--surface-2);color:var(--ui-hover)}
.js .people-panel[hidden]{display:none}
.people-panel{padding-top:1rem}
.people-layout{display:grid;gap:2rem;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media(max-width:820px){.people-layout{grid-template-columns:1fr}}
.body-shot{background:var(--surface);border:1px solid rgba(107,107,99,.45);padding:.6rem;
  display:flex;justify-content:center}
.body-shot img{max-height:430px;width:auto}
.gender-toggle{display:flex;gap:.5rem;margin:.8rem 0}
.gender-toggle button{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  background:none;border:1px solid var(--hairline);color:var(--muted);padding:.35rem .9rem;cursor:pointer}
.gender-toggle button[aria-pressed="true"]{color:var(--cta-label);background:var(--ui-idle);border-color:var(--ui-idle)}
.no-js .gender-b{margin-top:.8rem}
.mark-banner{margin-top:1.2rem}
.mark-banner button{background:none;border:1px solid var(--ui-idle);color:var(--ui-idle);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;padding:.5rem 1rem;cursor:pointer}
.mark-banner button:hover,.mark-banner button:focus-visible{border-color:var(--ui-hover);color:var(--ui-hover)}
.mark-banner button[aria-pressed="true"]{background:var(--ui-idle);color:var(--cta-label)}
.no-js .mark-banner{display:none}

/* ---------- devlog ---------- */
.board{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.notice{border-top:3px solid var(--rust)}
.notice .mono{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.notice h3{margin:.35rem 0 .4rem}

/* ---------- media ---------- */
.media-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.media-grid a{display:block;border:1px solid rgba(107,107,99,.4);position:relative}
.media-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-grid .lab{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  background:linear-gradient(180deg,transparent,rgba(20,18,15,.9));padding:.9rem .6rem .4rem}
.lightbox{position:fixed;inset:0;background:rgba(15,14,12,.94);z-index:80;display:flex;
  align-items:center;justify-content:center;padding:2rem}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;width:auto;height:auto;
  border:1px solid rgba(107,107,99,.5)}
.lightbox .close{position:absolute;top:1rem;right:1.2rem;background:none;border:1px solid var(--hairline);
  color:var(--text);font-family:var(--mono);padding:.5rem .9rem;cursor:pointer;font-size:.9rem}
video{width:100%;max-width:900px;border:1px solid rgba(107,107,99,.5);background:#000}

/* ---------- footer funnel ---------- */
.funnel{background:var(--surface);border-top:1px solid rgba(107,107,99,.35);
  padding:clamp(2.5rem,6vw,4rem) 0 1.6rem}
.funnel .grid-2{align-items:start}
.email-row{display:flex;gap:.6rem;max-width:430px;margin-top:.8rem}
.email-row input{flex:1;background:var(--bg);border:1px solid var(--hairline);color:var(--text);
  padding:.7rem .9rem;font-family:var(--body);font-size:1rem;min-width:0}
.email-row input::placeholder{color:var(--muted)}
.form-note{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-top:.5rem}
.foot-bottom{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;
  font-size:.85rem;color:var(--muted)}
.banner-note{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--ui-idle)}

/* ---------- reveals ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.js .reveal.shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .lampline .flame,.cold-fleck,.hero-art.parallax{transition:none}
}

/* page hero (interior pages) */
.page-head{position:relative;padding:clamp(3rem,8vw,5rem) 0 clamp(1.6rem,4vw,2.6rem);
  border-bottom:1px solid rgba(107,107,99,.25);
  background:radial-gradient(1200px 340px at 50% -80px,rgba(139,74,43,.16),transparent 70%)}
.page-head .lede{margin-top:.7rem}

/* ---------- footer utility links (help / legal / forum) ---------- */
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.85rem}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover,.foot-links a:focus-visible{color:var(--ui-hover);text-decoration:underline}

/* ============================================================
   FORUM — "The Long Fire". A reading surface: body voice
   dominant, ambient motion none, warm throughout. All data is
   rendered by forum.js; these styles only dress it.
   ============================================================ */
.f-head{padding:clamp(2.2rem,6vw,3.6rem) 0 1.2rem}
.f-head h1{font-size:clamp(1.7rem,4.6vw,3rem)}
.f-head .lede{margin-top:.6rem}
.f-head .f-meta{margin-top:.6rem}
.f-meta{color:var(--muted);font-size:.78rem;letter-spacing:.05em}
.f-crumbs{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  padding-top:1.6rem;color:var(--muted);overflow-wrap:anywhere}
.f-crumbs .sep{margin:0 .5rem;color:var(--hairline)}
.f-crumbs .here{color:var(--text)}
.f-crumbs a{color:var(--ui-idle);text-decoration:none}
.f-crumbs a:hover,.f-crumbs a:focus-visible{color:var(--ui-hover);text-decoration:underline}

.f-boards{display:grid;gap:1.1rem;margin:1.4rem 0 3rem}
.f-board .f-board-name{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:clamp(1.1rem,2.6vw,1.45rem)}
.f-board .f-board-name a{color:var(--text);text-decoration:none;position:relative}
.f-board .f-board-name a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;
  background:var(--ui-hover);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.f-board .f-board-name a:hover::after,.f-board .f-board-name a:focus-visible::after{transform:scaleX(1)}
.f-board .f-board-desc{margin:.35rem 0 .55rem;max-width:62ch}
.f-board .f-meta{margin:0}

.f-badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;padding:.14rem .5rem;
  border:1px solid var(--hairline);color:var(--muted);white-space:nowrap;vertical-align:middle}
.f-badge.keeper{border-color:var(--rust);color:var(--ui-idle)}
.f-badge.pin{border-color:var(--olive);color:var(--ui-idle)}
.f-badge.lock,.f-badge.seed{border-color:rgba(107,107,99,.6);color:var(--muted)}
.f-badge.you{border-color:var(--ui-idle);color:var(--ui-idle)}

.f-threads{margin:1.2rem 0 2.4rem;border-top:1px solid rgba(107,107,99,.35)}
.f-thread-row{padding:1rem .2rem;border-bottom:1px solid rgba(107,107,99,.35)}
.f-thread-title{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:clamp(1rem,2.2vw,1.2rem);text-transform:none;letter-spacing:.02em;
  font-family:var(--body);font-weight:600}
.f-thread-title a{color:var(--text);text-decoration:none}
.f-thread-title a:hover,.f-thread-title a:focus-visible{color:var(--ui-hover);text-decoration:underline}
.f-thread-row .f-meta{margin-top:.3rem}

.f-posts{display:grid;gap:1rem;margin:1.4rem 0 2.2rem;max-width:820px}
.f-post{background:var(--surface);border:1px solid rgba(107,107,99,.45);
  border-left:3px solid var(--olive);padding:1rem 1.2rem}
.f-post.is-keeper{border-left-color:var(--rust)}
.f-post-top{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem}
.f-author{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.f-author strong{font-weight:700;color:var(--text)}
.f-post-body p{margin-bottom:.8rem;max-width:68ch}
.f-post-body p:last-child{margin-bottom:0}

.f-composer{max-width:820px;margin:0 0 3rem}
.f-composer h2{font-size:1.1rem;margin-bottom:.9rem}
.f-composer form{display:grid;gap:.45rem}
.f-composer label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.f-composer input[type=text],.f-composer textarea{background:var(--bg);
  border:1px solid var(--hairline);color:var(--text);padding:.65rem .8rem;
  font-family:var(--body);font-size:1rem;width:100%;resize:vertical}
.f-composer input::placeholder,.f-composer textarea::placeholder{color:var(--muted)}
.f-composer .cta{justify-self:start;margin-top:.7rem}
.f-identity{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.f-identity label{margin-top:0}
.f-identity input{max-width:240px}
.f-idnote{font-size:.68rem;letter-spacing:.1em;color:var(--muted)}
.f-locknote{color:var(--muted);font-size:.78rem;letter-spacing:.08em;margin:0 0 3rem}

/* forum errors: the sanctioned cold accent — Cold Chrome text,
   Sterile Blue border/glyph, never blue text (design direction §3) */
.f-error{margin-top:.8rem;padding:.6rem .9rem;font-family:var(--mono);font-size:.8rem;
  color:var(--cold-chrome);background:var(--void);border:1px solid var(--cold-blue)}
.f-error span{color:var(--cold-blue)}

/* ============================================================
   HELP — "The Waypost" + legal pages. Calm competence:
   body voice, generous measure, native accordions.
   ============================================================ */
.help-toc{margin:1.2rem 0 0;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none}
.help-toc a{color:var(--ui-idle);text-decoration:none}
.help-toc a:hover,.help-toc a:focus-visible{color:var(--ui-hover);text-decoration:underline}
.help-section{max-width:760px}
.help-section h2{margin-bottom:.9rem}
.help-section p,.help-section li{max-width:68ch}
.help-section ul,.help-section ol{padding-left:1.2rem;margin:.6rem 0}
.help-section li{margin:.35rem 0}
.faq details{border:1px solid rgba(107,107,99,.45);background:var(--surface);
  margin-bottom:.6rem}
.faq summary{cursor:pointer;padding:.85rem 1.1rem;font-weight:600;list-style:none;
  position:relative;padding-right:2.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);color:var(--ui-idle);font-size:1.05rem}
.faq details[open] summary::after{content:"–"}
.faq summary:hover,.faq summary:focus-visible{color:var(--ui-hover)}
.faq .a{padding:0 1.1rem .95rem;color:var(--text)}
.faq .a p{margin-bottom:.6rem;max-width:64ch}
.faq .a p:last-child{margin-bottom:0}

/* prototype-legal banner: site-meta honesty, warm (not a danger state) */
.proto-banner{border:1px dashed var(--rust);background:rgba(139,74,43,.08);
  padding:.8rem 1rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--text);max-width:760px;margin:1.2rem 0}
.legal-mark{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--rust);text-transform:uppercase}
.legal-doc h2{margin-top:2.6rem}
.legal-doc h3{margin:1.6rem 0 .5rem;font-family:var(--body);font-weight:700;
  text-transform:none;letter-spacing:0;font-size:1.05rem}
.legal-doc p,.legal-doc li{max-width:68ch}
.legal-doc ul{padding-left:1.2rem;margin:.6rem 0}

/* ============================================================
   THINGS FOUND — "Brought In". The shelf of found things.
   Warm throughout; the riveted .card treatment is the frame.
   Discipline (see IMAGE-MANIFEST.md ZONE:table + FOUND-QUEUE.md):
   no numbering, cross-reference by place, ≤1 cold thing per ten.
   ============================================================ */
.found-grid{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  margin-top:2rem}
.found-card h2,.found-card h3{margin:.9rem 0 .5rem;font-size:clamp(1.05rem,2.4vw,1.35rem)}
.found-figure{margin:0 -1.35rem;position:relative;
  border-bottom:1px solid rgba(107,107,99,.35)}
.found-card .found-figure{margin-top:-1.25rem}
.found-figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.niche .found-figure img{aspect-ratio:16/9}
.found-quote{border-left:2px solid var(--olive);padding:.2rem 0 .2rem 1.1rem;margin:.6rem 0}
.found-quote p{max-width:58ch;margin-bottom:.7rem}
.found-quote p:last-child{margin-bottom:0}
.found-meta{color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  margin-top:.9rem}
/* the lit niche: the newest thing, held slightly apart and warmer */
.niche{max-width:720px;border-color:rgba(217,143,65,.55);
  box-shadow:0 0 34px -8px rgba(217,143,65,.28)}
.niche-tag{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ui-hover);
  margin:-.2rem 0 .9rem}
/* a thing that was not photographed: an empty warm-dark frame, no cold pixels */
.no-picture{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:#141310;border-bottom:1px solid rgba(107,107,99,.35)}
.no-picture .mono{color:var(--muted);font-size:.72rem;letter-spacing:.2em;text-align:center;
  line-height:2}

/* ---------- faces of the fire (peoples page strips) ---------- */
.faces-strip{margin-top:2.2rem}
.faces-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:660px;margin-top:.9rem}
.face{border:1px solid rgba(107,107,99,.45);background:var(--surface);margin:0}
.face img{width:100%;aspect-ratio:1/1;object-fit:cover}
.face figcaption{padding:.6rem .8rem .75rem;font-size:.88rem;color:var(--muted)}
.face figcaption .mono{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ui-idle);margin-bottom:.15rem}
@media(max-width:430px){.faces-row{grid-template-columns:1fr}}