/* ============================================================
   Stonefold — the one stylesheet
   Palette, base typography, header, footer, shared components,
   and the per-page sections (home, use cases, essay). All pages
   link only this file; the header and footer markup itself is
   rendered by /js/site.js.
   ============================================================ */

:root{
  /* ---- bone & basalt: warm off-white ground, near-black ink, bronze accent ---- */
  --bg:#f6f2e9;
  --surface:#fdfbf5;
  --ink:#1b1712;
  --muted:#5d5445;
  --line:#e4dccb;
  --line-soft:#ece5d6;
  --accent:#7a5715;        /* darkened bronze, AA on --bg */
  --accent-ink:#1b1712;    /* headings stay ink in this theme */
  --band:#efe9db;          /* quiet band fill */
  --band-ink:#1b1712;

  /* ---- dark exhibit surfaces (traces, code, screenshots) ---- */
  --exhibit:#16130f;
  --exhibit-line:#37312a;
  --exhibit-ink:#ece6d9;
  --exhibit-muted:#a89c8c;
  --exhibit-bronze:#d59a45;

  /* verdict colours — bright pair for dark exhibits, ink pair for the bone ground */
  --allow:#8fbe76;     --hold:#dcae4f;     --deny:#d0685a;
  --allow-ink:#4d7a34; --hold-ink:#8a6412; --deny-ink:#a8402f;

  --measure:52rem;

  /* ---- aliases kept so the engineering page's original names still resolve ---- */
  --seam:var(--line);
  --dust:var(--muted);
  --limewash:var(--ink);
  --bronze:var(--accent);
  --panel:var(--surface);
  --panel-2:var(--band);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 1.0625rem/1.7 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
img{max-width:100%; height:auto; display:block}
code,pre{font-family:"IBM Plex Mono",ui-monospace,monospace}
:not(pre) > code{
  font-size:.92em; background:var(--band); border:1px solid var(--line-soft);
  border-radius:3px; padding:.06em .34em;
}
figure{margin:0}

/* ---------- layout ---------- */
site-header,site-footer{display:contents}
.wrap{max-width:72rem; margin:0 auto; padding:0 1.5rem}
section{padding:5.25rem 0}
.prose{max-width:var(--measure)}
h1,h2,h3{text-wrap:balance; margin:0}
h2{font-size:clamp(1.55rem,3vw,2.05rem); font-weight:700; line-height:1.22; letter-spacing:-.015em}
h3{font-size:1.0625rem; font-weight:600}
p{margin:0}
.muted{color:var(--muted)}
.rule{border:0; border-top:1px solid var(--line); margin:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* section chrome — .kicker and .eyebrow are the same mark under two names */
.kicker,.eyebrow{
  font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0;
}
.section-head{display:flex; flex-direction:column; gap:.75rem; margin-bottom:2.5rem}
.stack,.stack-l{display:flex; flex-direction:column; gap:1.2rem}
.keyline{
  margin:1rem 0; padding:1.25rem 1.5rem; background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:0 4px 4px 0;
  font-size:1.0625rem; color:var(--ink);
}
.keyline em{font-style:italic}
.fineprint{font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--muted); letter-spacing:.02em}

/* ---------- header (identical on every page) ---------- */
header{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0}
.wordmark{
  font-family:Cinzel,serif; font-weight:600; font-size:1.12rem;
  letter-spacing:.22em; color:var(--ink); display:flex; align-items:center; gap:.6rem;
}
.wordmark:hover{text-decoration:none; color:var(--accent)}
.wordmark svg{flex:none}
.nav-links{display:flex; align-items:center; gap:1.5rem; font-size:.9rem}
.nav-links a{color:var(--ink)}
.nav-links a:hover{color:var(--accent)}
.nav-links a[aria-current="page"]{color:var(--accent); font-weight:600}
.nav-cta{
  padding:.42rem .95rem; border:1px solid var(--accent); border-radius:4px;
  font-weight:600; font-size:.85rem; color:var(--accent);
}
.nav-cta:hover{background:color-mix(in srgb, var(--accent) 8%, transparent); text-decoration:none}
.nav-toggle{display:none}
/* On narrow screens the links move into a panel under the header, opened
   by the menu button. The panel is opaque (content scrolls beneath the
   sticky header) and every link is a full-width tap target. */
@media (max-width:46rem){
  .nav{padding:.7rem 0}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.75rem; height:2.75rem; margin-right:-.65rem;
    background:none; border:0; color:var(--ink); cursor:pointer;
  }
  .nav-toggle span{display:inline-flex}
  .nav-toggle .ic-close{display:none}
  header.nav-open .nav-toggle .ic-bars{display:none}
  header.nav-open .nav-toggle .ic-close{display:inline-flex}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px -20px rgba(27,23,18,.4);
    font-size:1rem; padding:.3rem 0 .5rem;
  }
  header.nav-open .nav-links{display:flex}
  .nav-links a{padding:.8rem 1.5rem; border-top:1px solid var(--line-soft)}
  .nav-links a:first-child{border-top:0}
  .nav-links a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
  .nav-cta{
    border:0; border-top:1px solid var(--line-soft); border-radius:0;
    font-size:1rem; text-align:left; color:var(--accent);
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:.72rem 1.4rem; border-radius:4px;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  border:1px solid var(--accent); transition:background .15s;
}
.btn-solid{background:var(--accent); color:var(--surface)}
.btn-solid:hover{filter:brightness(1.08); text-decoration:none}
.btn-ghost{color:var(--accent)}
.btn-ghost:hover{background:color-mix(in srgb, var(--accent) 8%, transparent); text-decoration:none}
.cta-row{display:flex; flex-wrap:wrap; gap:.875rem; align-items:center}

/* ---------- dark exhibit: the decision trace ---------- */
.term{
  position:relative;
  background:var(--exhibit); border:1px solid var(--exhibit-line); border-radius:10px;
  box-shadow:0 18px 44px rgba(27,23,18,.16);
  overflow:hidden;
}
.term-cap{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.6rem 1rem; border-bottom:1px solid var(--exhibit-line);
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em;
  color:var(--exhibit-muted); text-transform:uppercase;
}
.dot{
  display:inline-block; width:.5rem; height:.5rem; border-radius:99px; background:var(--allow);
  box-shadow:0 0 8px var(--allow); margin-right:.5rem; vertical-align:1px;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.35}}
.trace{list-style:none; margin:0; padding:.35rem 0 .5rem; font-family:"IBM Plex Mono",monospace; font-size:.8rem}
.trace li{
  display:flex; align-items:center; gap:.9rem; padding:.62rem 1rem;
  border-bottom:1px solid rgba(55,49,42,.55); color:var(--exhibit-ink);
  opacity:0; transform:translateY(6px); animation:landed .45s ease-out forwards;
}
.trace li:nth-child(1){animation-delay:.2s}
.trace li:nth-child(2){animation-delay:.9s}
.trace li:nth-child(3){animation-delay:1.6s}
.trace li:nth-child(4){animation-delay:2.3s}
.trace li:nth-child(5){animation-delay:3s}
.trace li:nth-child(6){animation-delay:3.7s}
.trace li:nth-child(7){animation-delay:4.4s}
.trace li:last-child{border-bottom:0}
@keyframes landed{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .trace li{opacity:1; transform:none} }
.trace .intent{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--exhibit-ink)}
.trace .intent .kind{color:var(--exhibit-muted)}
.trace .why{color:var(--exhibit-muted); font-size:.72rem; white-space:nowrap}
@media (max-width:40rem){ .trace .why{display:none} }
.pill{
  flex:none; font-size:.66rem; font-weight:500; letter-spacing:.12em;
  padding:.18rem .6rem; border-radius:3px; border:1px solid;
}
.pill-allow{color:var(--allow); border-color:var(--allow); background:rgba(143,190,118,.08)}
.pill-hold {color:var(--hold);  border-color:var(--hold);  background:rgba(220,174,79,.08)}
.pill-deny {color:var(--deny);  border-color:var(--deny);  background:rgba(208,104,90,.08)}
.exhibit-note{font-size:.85rem; color:var(--muted); margin-top:.8rem}

/* ---------- dark exhibit: code ---------- */
pre.stele{
  margin:0; padding:1.15rem 1.3rem; overflow-x:auto;
  background:var(--exhibit); border:1px solid var(--exhibit-line); border-radius:10px;
  box-shadow:0 14px 36px rgba(27,23,18,.13);
  font-size:.8rem; line-height:1.75; color:var(--exhibit-ink);
}
pre.stele code{background:none; border:0; padding:0; font-size:inherit}
pre.stele .k{color:var(--exhibit-bronze)}
pre.stele .c{color:var(--exhibit-muted)}

/* ---------- screenshots / figures ---------- */
.shot{
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--exhibit);
  box-shadow:0 14px 36px rgba(27,23,18,.14);
}
.shot > a{display:block; cursor:zoom-in}
.shot figcaption{
  padding:1rem 1.2rem; font-size:.9rem; color:var(--muted);
  background:var(--surface); border-top:1px solid var(--line);
}
.shot figcaption strong{color:var(--ink); font-weight:600}

/* ---------- diagram frame ---------- */
.diagram{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:1.5rem 1rem}
.diagram svg{display:block; width:100%; height:auto}

/* ---------- stat band ---------- */
.stats{
  margin-top:3.25rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--band); color:var(--band-ink);
}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.5rem 0}
@media (max-width:56rem){ .stats-row{grid-template-columns:repeat(2,1fr); row-gap:1.5rem} }
.stat{
  display:flex; flex-direction:column; gap:.2rem; padding:0 1rem;
  border-left:1px solid color-mix(in srgb, var(--band-ink) 22%, transparent);
}
.stat b{font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.stat span{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; opacity:.75}

/* ---------- footer (identical on every page) ---------- */
footer{border-top:1px solid var(--line); padding:2.5rem 0 3.5rem; background:var(--band); color:var(--band-ink)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; font-size:.875rem}
.foot nav{display:flex; flex-wrap:wrap; gap:1.5rem}
.foot a{color:inherit}
.foot .cin{font-family:Cinzel,serif; letter-spacing:.1em}

/* ============================================================
   Home
   ============================================================ */
.hero{padding:5.5rem 0 4.5rem; border-bottom:1px solid var(--line)}
.hero-inner{display:grid; grid-template-columns:1.08fr .92fr; gap:3.5rem; align-items:center}
@media (max-width:62rem){ .hero-inner{grid-template-columns:1fr} }
.hero-copy{display:flex; flex-direction:column; gap:1.6rem}
.hero h1{
  font-size:clamp(2.15rem,4.6vw,3.3rem); font-weight:700; line-height:1.1;
  letter-spacing:-.022em; color:var(--accent-ink);
}
.hero-sub{font-size:1.13rem; color:var(--muted); max-width:38rem}
.hero-sub strong{color:var(--ink); font-weight:600}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
@media (max-width:56rem){ .cards{grid-template-columns:1fr} }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.7rem;
}
.card h3{color:var(--accent-ink)}
.card p{color:var(--muted); font-size:.96rem}
.card p strong{color:var(--ink); font-weight:600}
.card a{font-size:.9rem; margin-top:auto}

.diagram-svg .d-lbl{font:600 12px "IBM Plex Sans",sans-serif; letter-spacing:.1em; fill:var(--ink)}
.diagram-svg .d-sub{font:400 10px "IBM Plex Mono",monospace; fill:var(--muted)}
.diagram-svg .d-box{fill:var(--bg); stroke:var(--line); stroke-width:1.2}
.diagram-svg .d-gate{fill:var(--surface); stroke:var(--accent); stroke-width:1.6}
.diagram-svg .d-gatelbl{font:700 13px "IBM Plex Sans",sans-serif; letter-spacing:.12em; fill:var(--accent)}
.diagram-svg .d-flow{stroke:var(--muted); stroke-width:1.2; fill:none}
.diagram-svg .d-arrow{fill:var(--muted)}
.how-notes{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem}
@media (max-width:56rem){ .how-notes{grid-template-columns:1fr} }
.how-note{display:flex; gap:.9rem; align-items:flex-start; font-size:.95rem; color:var(--muted)}
.how-note b{color:var(--ink)}
.how-num{
  flex:none; width:1.7rem; height:1.7rem; border-radius:99px; border:1px solid var(--accent);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  font:600 .8rem "IBM Plex Mono",monospace; margin-top:.15rem;
}

.status-box{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:1.7rem 1.6rem;
}

/* ============================================================
   Use-case pages
   ============================================================ */
.uc-hero{
  padding:4.5rem 0 3rem;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.uc-hero h1{
  font-size:clamp(1.9rem,3.8vw,2.7rem); font-weight:700; line-height:1.14;
  letter-spacing:-.02em; color:var(--accent-ink); margin:.6rem 0 1.2rem;
  max-width:44rem;
}
.uc-lede{font-size:1.1rem; color:var(--muted); max-width:44rem}
.uc-lede strong{color:var(--ink); font-weight:600}
.uc-hero .kicker a{color:inherit}

.uc-body{padding:3.2rem 0 4.5rem}
.uc-body h2{
  font-size:1.32rem; font-weight:600; letter-spacing:-.01em;
  color:var(--accent-ink); margin:2.6rem 0 .8rem;
}
.uc-body h2:first-child{margin-top:0}
.uc-body p{margin:0 0 1rem}

.uc-arrow{
  align-self:center; color:var(--muted); font-size:1.1rem; flex:0 0 auto;
}

/* a decision ledger: a few requests and what the checkpoint decided */
.uc-ledger{
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  margin:1.6rem 0 1.8rem; overflow:hidden;
}
.uc-ledger-row{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.9rem; row-gap:.1rem;
  padding:.72rem 1.1rem; border-top:1px solid var(--line-soft);
  font-size:.9rem; line-height:1.5;
}
.uc-ledger-row:first-child{border-top:0}
.uc-verdict{
  flex:0 0 5.2rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}
.uc-verdict.allow{color:var(--allow-ink)}
.uc-verdict.hold{color:var(--hold-ink)}
.uc-verdict.deny{color:var(--deny-ink)}
.uc-ledger-row .act{font-weight:500; flex:1 1 14rem}
.uc-ledger-row .act span{display:block; font-weight:400; font-size:.8rem; color:var(--muted)}
.uc-ledger-note{
  padding:.6rem 1.1rem; font-size:.8rem; color:var(--muted);
  background:var(--band); border-top:1px solid var(--line-soft);
}

/* two setups side by side (stacked on narrow screens) */
.uc-compare{display:grid; grid-template-columns:1fr; gap:1.1rem; margin:1.6rem 0 1.8rem}
@media (min-width:56rem){ .uc-compare{grid-template-columns:1fr 1fr} }
.uc-compare-panel{
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:1.05rem 1.15rem;
}
.uc-compare-title{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .8rem;
}
.uc-path{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:.85rem; margin:0 0 .55rem;
}
.uc-path:last-child{margin-bottom:0}
.uc-chip{
  border:1px solid var(--line); border-radius:6px; background:var(--bg);
  padding:.28rem .6rem; line-height:1.35;
}
.uc-chip span{display:block; font-size:.72rem; color:var(--muted)}
.uc-chip.agent{border-style:dashed}
.uc-chip.gate{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.uc-mark{font-size:.78rem; font-weight:500}
.uc-mark.bad{color:var(--deny-ink)}

/* a policy excerpt, quoted rather than syntax-highlighted */
.uc-policy{
  background:var(--exhibit); border-radius:8px;
  padding:1.1rem 1.2rem; margin:1.4rem 0 1.6rem; overflow-x:auto;
}
.uc-policy pre{margin:0}
.uc-policy code{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.84rem; line-height:1.6; color:#e9e1d0; white-space:pre;
}

/* what it buys / what it does not */
.uc-buys, .uc-limits{margin:0 0 1rem; padding-left:1.15rem}
.uc-buys li, .uc-limits li{margin:0 0 .7rem; line-height:1.62}
.uc-limits{
  border-left:2px solid var(--line); padding:.2rem 0 .2rem 1.4rem;
  margin-left:0; list-style-position:outside; list-style-type:none;
}
.uc-limits li{position:relative; padding-left:1rem}
.uc-limits li::before{
  content:"—"; position:absolute; left:0; color:var(--muted);
}

.uc-next{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.uc-next h2{margin-top:0}

/* the index of use cases */
.uc-index{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:.5rem}
@media (max-width:60rem){ .uc-index{grid-template-columns:1fr} }
.uc-card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.65rem;
}
.uc-card h3{font-size:1.05rem; font-weight:600; color:var(--accent-ink); line-height:1.3}
.uc-card p{font-size:.92rem; color:var(--muted); margin:0; line-height:1.6}
.uc-card .uc-tag{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.uc-card a{margin-top:auto; font-weight:500}

/* ============================================================
   Essay pages
   ============================================================ */
article{padding:4rem 0 5rem; font-size:1.125rem}
article .wrap{max-width:var(--measure)}
article .eyebrow{margin:0 0 1.1rem}
article h1{
  font-size:clamp(1.9rem,5vw,2.6rem); font-weight:700; line-height:1.15;
  letter-spacing:-.02em; margin:0 0 1.4rem; text-wrap:balance; color:var(--accent-ink);
}
article .standfirst{font-size:1.25rem; color:var(--muted); margin:0 0 1rem; line-height:1.55}
article .byline{
  font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--muted);
  letter-spacing:.04em; margin:0 0 2.75rem; padding-bottom:2rem;
  border-bottom:1px solid var(--line);
}
article h2{
  font-size:1.45rem; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  margin:3rem 0 1.1rem; text-wrap:balance;
}
article p{margin:0 0 1.35rem}
article blockquote{
  margin:2rem 0; padding:1.25rem 1.5rem; background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:0 4px 4px 0;
}
article blockquote p{margin:0; font-size:1.0625rem}
article .note{color:var(--muted); font-size:1rem}
article strong{color:var(--ink); font-weight:600}
article hr{border:0; border-top:1px solid var(--line); margin:3.5rem 0 2.5rem}
article .refs{font-size:.95rem; color:var(--muted)}
article .refs p{margin:0 0 .7rem}