/* ============================================================
   Centralux — "The Field Report"
   Design system. One stylesheet, six pages.
   Tokens → reset → layout → type → components → sections → responsive
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* ground */
  --ink:        #0b0d0f;
  --ink-2:      #101315;
  --ink-3:      #171b1f;
  --ink-4:      #1f242a;

  /* paper (inverted bands) */
  --bone:       #F2EEE6;
  --bone-2:     #E7E1D5;
  --bone-3:     #D9D2C3;

  /* marks */
  --gold:       #E3B23E;
  --gold-hi:    #F0C868;
  --gold-deep:  #B98F26;
  --gold-ink:   #6E5310;   /* gold-family text ON bone — AA safe */

  /* text */
  --on-ink:     #E4E8EB;
  --on-ink-mid: #A9B2BA;
  --on-ink-dim: #79838C;
  --on-bone:    #14171A;
  --on-bone-mid:#4E555C;
  --on-bone-dim:#6E767D;

  /* signal — used only to flag a real operational problem */
  --flag:       #C2604A;
  --flag-bone:  #9E4530;

  /* lines */
  --line:       rgba(255,255,255,.11);
  --line-2:     rgba(255,255,255,.18);
  --line-bone:  rgba(20,23,26,.14);
  --line-bone-2:rgba(20,23,26,.26);

  /* type */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm */
  --pad:      clamp(1.15rem, 5vw, 2.75rem);
  --band:     clamp(3.6rem, 9vw, 7.5rem);
  --maxw:     1180px;
  --maxw-txt: 68ch;

  --r:  3px;
  --r2: 5px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--sans);
  font-size:clamp(1.02rem,.98rem + .35vw,1.125rem);
  line-height:1.62;
  font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.08; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
hr{ border:0; height:1px; background:var(--line); margin:0; }

/* ---------- 3. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.wrap--tight{ max-width:920px; }
.band{ padding-block:var(--band); position:relative; }
.band--bone{ background:var(--bone); color:var(--on-bone); }
.band--ink2{ background:#12161a; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band--tight{ padding-block:clamp(2.6rem,6vw,4.6rem); }
.stack > * + *{ margin-top:1.05rem; }
.stack-lg > * + *{ margin-top:1.9rem; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#0b0d0f; padding:.85rem 1.2rem;
  font-family:var(--mono); font-size:.82rem; font-weight:600;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
.band--bone :focus-visible{ outline-color:var(--gold-ink); }

/* ---------- 4. TYPE ---------- */
.h1,.h2,.h3,.srow__moment{ text-wrap:balance; }
.brk{ display:none; }
.nb{ display:inline-block; }
.h1{ font-size:clamp(2.05rem,1.2rem + 5.1vw,4.05rem); font-weight:800; letter-spacing:-.032em; line-height:1.02; }
.h2{ font-size:clamp(1.6rem,1.15rem + 2.3vw,2.7rem); font-weight:700; letter-spacing:-.028em; line-height:1.08; }
.h3{ font-size:clamp(1.2rem,1.05rem + .85vw,1.55rem); font-weight:700; letter-spacing:-.018em; line-height:1.18; }
.h4{ font-size:clamp(1.02rem,.98rem + .3vw,1.14rem); font-weight:700; letter-spacing:-.01em; line-height:1.25; }

.lede{
  font-size:clamp(1.1rem,1.02rem + .55vw,1.35rem);
  line-height:1.55; color:var(--on-ink-mid); font-weight:400; max-width:var(--maxw-txt);
}
.band--bone .lede{ color:var(--on-bone-mid); }
.body{ max-width:var(--maxw-txt); color:var(--on-ink-mid); }
.band--bone .body{ color:var(--on-bone-mid); }
.tight{ max-width:60ch; }
.gold{ color:var(--gold); }
.band--bone .gold{ color:var(--gold-ink); }
strong,b{ font-weight:700; color:var(--on-ink); }
.band--bone strong,.band--bone b{ color:var(--on-bone); }

/* section index label: "01 / THE SPREAD" */
.eyebrow{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.735rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-dim);
  margin-bottom:1.15rem;
}
.band--bone .eyebrow{ color:var(--on-bone-dim); }
.eyebrow .num{ color:var(--gold); font-weight:600; }
.band--bone .eyebrow .num{ color:var(--gold-ink); }
.eyebrow::after{ content:""; flex:1 1 0; min-width:0; height:1px; background:var(--line-2); }
.band--bone .eyebrow::after{ background:var(--line-bone-2); }

.mono{ font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; }
.tag{
  display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:.3rem .55rem;
  border:1px solid var(--line-2); border-radius:2px; color:var(--on-ink-mid);
}
.band--bone .tag{ border-color:var(--line-bone-2); color:var(--on-bone-mid); }

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.85rem 1.55rem;
  font-weight:700; font-size:1rem; letter-spacing:-.01em; text-decoration:none;
  border-radius:var(--r2); border:1px solid transparent;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--gold); color:#0b0d0f; border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-hi); border-color:var(--gold-hi); }
.btn--line{ background:transparent; color:var(--on-ink); border-color:var(--line-2); }
.btn--line:hover{ border-color:var(--gold); color:var(--gold); }
.band--bone .btn--line{ color:var(--on-bone); border-color:var(--line-bone-2); }
.band--bone .btn--line:hover{ border-color:var(--gold-ink); color:var(--gold-ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.btn--full{ width:100%; }

.arrow-link{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  font-family:var(--mono); font-size:.79rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--gold);
  border-bottom:1px solid transparent; align-self:flex-start;
}
.arrow-link:hover{ border-bottom-color:currentColor; }
.band--bone .arrow-link{ color:var(--gold-ink); }
.arrow-link .chev{ transition:transform .2s var(--ease); }
.arrow-link:hover .chev{ transform:translateX(3px); }

/* ---------- 6. MARK + HEADER ---------- */
.mark{ display:block; width:1em; height:1em; color:var(--gold); flex:none; }
.mark svg{ display:block; width:100%; height:100%; }

.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--on-ink); min-height:48px;
}
.brand .mark{ font-size:29px; }
.brand__word{
  font-weight:700; font-size:1.02rem; letter-spacing:.19em; text-transform:uppercase;
  white-space:nowrap; padding-left:.05em;
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,15,.9);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:70px;
}
.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a:not(.btn){
  display:inline-flex; align-items:center; min-height:46px; padding:0 .85rem;
  text-decoration:none; color:var(--on-ink-mid);
  font-size:.95rem; font-weight:500; border-radius:var(--r);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--on-ink); background:rgba(255,255,255,.045); }
.nav a:not(.btn)[aria-current="page"]{ color:var(--gold); }
.nav .btn{ min-height:46px; padding:.6rem 1.15rem; font-size:.92rem; margin-left:.5rem; }

.navtoggle{
  display:none; align-items:center; gap:.5rem;
  min-height:46px; padding:0 .9rem; background:transparent;
  border:1px solid var(--line-2); border-radius:var(--r);
  font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-ink); cursor:pointer;
}
.navtoggle .bars{ display:grid; gap:3px; }
.navtoggle .bars i{ display:block; width:15px; height:1.5px; background:currentColor; }
.mobilenav{ display:none; border-top:1px solid var(--line); background:var(--ink-2); }
.mobilenav.is-open{ display:block; }
.mobilenav{ padding-bottom:1.5rem; }
.mobilenav ul{ padding:.5rem 0 1.1rem; }
.mobilenav a:not(.btn){
  display:flex; align-items:center; min-height:54px; padding:0 var(--pad);
  text-decoration:none; color:var(--on-ink); font-size:1.05rem; font-weight:600;
  border-bottom:1px solid var(--line);
}
.mobilenav a:not(.btn)[aria-current="page"]{ color:var(--gold); }
.mobilenav .btn{ margin:1rem var(--pad) 0; width:calc(100% - var(--pad)*2); }

/* ---------- 7. HERO ---------- */
.hero{ padding-block:clamp(2.9rem,7.5vw,6rem) clamp(3.2rem,8vw,6.5rem); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 12% 0%, rgba(227,178,62,.085), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 40%);
  pointer-events:none;
}
.hero .wrap{ position:relative; }
.hero__grid{ display:grid; gap:clamp(2.2rem,5vw,3.6rem); align-items:start; }
.hero__kicker{
  display:grid; justify-items:start; gap:.3rem;
  font-family:var(--mono); font-size:.735rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-ink-dim);
  margin-bottom:1.3rem;
}
.hero__kicker .k{ display:inline-flex; align-items:center; gap:.55rem; }
@media (min-width:620px){
  .hero__kicker{ display:flex; align-items:center; gap:.8rem; }
  .hero__kicker .k + .k::before{ content:"·"; margin-right:.8rem; color:var(--on-ink-dim); }
}
.hero__kicker .dot{ width:5px; height:5px; background:var(--gold); border-radius:50%; flex:none; }
.spread__lede{ margin-top:1.1rem; }
.grid--top{ margin-top:2.4rem; }
.btn-row--closer{ margin-top:1.9rem; }
.hero h1{ margin-bottom:1.35rem; }
.hero h1 .line2{ display:block; color:var(--gold); }
.hero__sub{ max-width:56ch; margin-bottom:2rem; }
.hero__note{
  margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.755rem; letter-spacing:.05em; line-height:1.7;
  color:var(--on-ink-dim); max-width:54ch;
}

/* the job-record diagram */
.record{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r2); overflow:hidden;
}
.record__head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1.15rem; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent);
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-mid);
}
.record__head .lamp{ color:var(--gold); }
.record ol{ padding:1.25rem 1.15rem 1.4rem; }
.record li{ position:relative; padding-left:2.15rem; padding-bottom:1.35rem; }
.record li:last-child{ padding-bottom:0; }
.record li::before{
  content:""; position:absolute; left:6px; top:1.35em; bottom:-.15rem;
  width:1px; background:var(--line-2);
}
.record li:last-child::before{ display:none; }
.record li::after{
  content:""; position:absolute; left:2px; top:.42em;
  width:9px; height:9px; border-radius:50%;
  background:var(--ink-2); border:1.5px solid var(--gold);
}
.record li.is-final::after{ background:var(--gold); }
.record .step{ display:block; font-weight:700; font-size:1rem; letter-spacing:-.012em; }
.record .meta{
  display:block; margin-top:.2rem; font-family:var(--mono);
  font-size:.735rem; letter-spacing:.03em; color:var(--on-ink-dim); line-height:1.55;
}
.record__foot{
  padding:.85rem 1.15rem; border-top:1px solid var(--line); background:rgba(255,255,255,.022);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--on-ink-dim);
}

/* ---------- 8. THE SPREAD (signature move) ---------- */
.spread{ margin-top:2.6rem; border-top:2px solid var(--on-bone); }
.spread__cols{
  display:none;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
}
.srow{ border-bottom:1px solid var(--line-bone); padding-block:1.5rem; }
.srow__moment{
  font-weight:700; font-size:1.08rem; letter-spacing:-.015em; line-height:1.3;
  color:var(--on-bone); margin-bottom:1rem;
  display:flex; gap:.7rem; align-items:baseline;
}
.srow__moment .n{
  font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.08em;
  color:var(--on-bone-dim); flex:none; padding-top:.15em;
}
.srow__pair{ display:grid; gap:.85rem; }
.cell{ padding:.95rem 1.05rem; border-radius:var(--r); }
.cell__label{
  display:block; font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:.4rem;
}
.cell p{ font-size:.97rem; line-height:1.58; }
.cell--now{ background:var(--bone-2); border-left:2px solid var(--bone-3); }
.cell--now .cell__label{ color:var(--flag-bone); }
.cell--now p{ color:var(--on-bone-mid); }
.cell--sys{ background:var(--on-bone); border-left:2px solid var(--gold); }
.cell--sys .cell__label{ color:var(--gold); }
.cell--sys p{ color:#DCE0E4; }
.cell--sys strong{ color:#fff; }

.spread__note{
  margin-top:2.4rem; padding:1.15rem 1.25rem;
  border:1px solid var(--line-bone-2); border-left:3px solid var(--gold-deep);
  border-radius:var(--r); background:rgba(255,255,255,.5);
  font-size:.99rem; line-height:1.6; color:var(--on-bone-mid); max-width:none;
}

/* ---------- 9. CARDS / GRIDS ---------- */
.grid{ display:grid; gap:1.05rem; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
.grid--4{ grid-template-columns:1fr; }

.card{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r2); padding:1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.75rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.card:hover{ border-color:var(--line-2); background:var(--ink-3); }
.card__n{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; color:var(--gold);
}
.card p{ color:var(--on-ink-mid); font-size:.99rem; }
.card ul.ticks{ margin-top:.15rem; }
.card .arrow-link{ margin-top:auto; padding-top:.4rem; }

.band--bone .card{ background:rgba(255,255,255,.58); border-color:var(--line-bone); }
.band--bone .card:hover{ background:#fff; border-color:var(--line-bone-2); }
.band--bone .card p{ color:var(--on-bone-mid); }
.band--bone .card__n{ color:var(--gold-ink); }

/* tick list */
.ticks li{
  position:relative; padding-left:1.35rem; margin-top:.55rem;
  font-size:.97rem; line-height:1.55; color:var(--on-ink-mid);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border:1px solid var(--gold); border-radius:1px;
  transform:rotate(45deg);
}
.band--bone .ticks li{ color:var(--on-bone-mid); }
.band--bone .ticks li::before{ border-color:var(--gold-ink); }

/* numbered phase rail */
.phases{ counter-reset:ph; display:grid; gap:0; margin-top:1.8rem; border-top:1px solid var(--line); }
.band--bone .phases{ border-color:var(--line-bone); }
.phase{
  counter-increment:ph; display:grid; gap:.35rem 1.35rem;
  padding-block:1.4rem; border-bottom:1px solid var(--line);
}
.band--bone .phase{ border-color:var(--line-bone); }
.phases .phase:last-child{ border-bottom:0; padding-bottom:0; }
.phase__n{
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  color:var(--gold); text-transform:uppercase;
}
.band--bone .phase__n{ color:var(--gold-ink); }
.phase h3{ margin-bottom:.35rem; }
.phase p{ color:var(--on-ink-mid); }
.band--bone .phase p{ color:var(--on-bone-mid); }

/* definition rows (contact / about facts) */
.facts{ border-top:1px solid var(--line); margin-top:1.7rem; }
.band--bone .facts{ border-color:var(--line-bone); }
.fact{
  display:grid; gap:.3rem 1.5rem; padding-block:1.05rem;
  border-bottom:1px solid var(--line);
}
.band--bone .fact{ border-color:var(--line-bone); }
.facts .fact:last-child{ border-bottom:0; }
.fact dt{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-ink-dim);
}
.band--bone .fact dt{ color:var(--on-bone-dim); }
.fact dd{ margin:0; font-size:1.02rem; line-height:1.55; overflow-wrap:anywhere; }
.fact dd a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(227,178,62,.4); }
.fact dd a:hover{ border-bottom-color:var(--gold); }
.band--bone .fact dd a{ color:var(--on-bone); border-bottom:1px solid var(--gold-deep); }
.band--bone .fact dd a:hover{ color:var(--gold-ink); }

/* callout */
.callout{
  border:1px solid var(--line-2); border-left:3px solid var(--gold);
  border-radius:var(--r); padding:1.3rem 1.35rem; background:var(--ink-2);
}
.band--bone .callout{ background:rgba(255,255,255,.55); border-color:var(--line-bone-2); border-left-color:var(--gold-deep); }

/* ---------- 10. LEGAL / LONG-FORM ---------- */
.doc{ max-width:74ch; }
.doc h2{ margin-top:2.9rem; margin-bottom:.75rem; font-size:clamp(1.24rem,1.1rem + .8vw,1.6rem); }
.doc h2:first-of-type{ margin-top:2rem; }
.doc h3{ margin-top:1.7rem; margin-bottom:.5rem; font-size:1.06rem; }
.doc p{ color:var(--on-ink-mid); margin-top:.85rem; }
.doc ul{ margin-top:.85rem; }
.doc ul li{
  position:relative; padding-left:1.25rem; margin-top:.5rem;
  color:var(--on-ink-mid); line-height:1.6;
}
.doc ul li::before{
  content:""; position:absolute; left:.1rem; top:.72em;
  width:5px; height:5px; background:var(--gold); border-radius:1px;
}
.doc a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(227,178,62,.4); overflow-wrap:anywhere; }
.doc a:hover{ border-bottom-color:var(--gold); }
.doc .updated{
  font-family:var(--mono); font-size:.715rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--on-ink-dim);
  padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.toc{
  margin-top:1.9rem; padding:1.15rem 1.25rem; background:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r2);
}
.toc p{
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-ink-dim); margin:0 0 .6rem;
}
.toc ol{ display:grid; gap:.1rem; counter-reset:t; }
.toc a{
  display:block; padding:.32rem 0; font-size:.94rem; color:var(--on-ink-mid);
  text-decoration:none; border:0; line-height:1.45;
}
.toc a:hover{ color:var(--gold); }

/* ---------- 11. CLOSING CTA ---------- */
.closer{ border-top:1px solid var(--line); background:var(--ink-2); }
.closer__inner{ display:grid; gap:1.9rem; align-items:center; }
.closer h2{ margin-bottom:.9rem; }
.closer .lede{ max-width:52ch; }
.closer__aside{
  border:1px solid var(--line); border-radius:var(--r2); padding:1.3rem 1.35rem;
  background:var(--ink);
}
.closer__aside .tag{ margin-bottom:.85rem; }
.closer__aside p{ color:var(--on-ink-mid); font-size:.97rem; }

/* ---------- 12. FOOTER ---------- */
.site-footer{ background:var(--ink); border-top:1px solid var(--line); padding-block:clamp(2.6rem,6vw,4rem) 2rem; }
.foot__grid{ display:grid; gap:2.2rem; }
.foot__brand .brand{ margin-bottom:.9rem; }
.foot__blurb{ color:var(--on-ink-dim); font-size:.95rem; max-width:38ch; line-height:1.6; }
.site-footer h4{
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-ink-dim); margin-bottom:.9rem;
}
.site-footer .foot__grid ul li{ margin-bottom:.15rem; }
.site-footer ul a{
  display:inline-block; padding:.4rem 0; color:var(--on-ink-mid);
  text-decoration:none; font-size:.96rem; overflow-wrap:anywhere;
}
.site-footer ul a:hover{ color:var(--gold); }
.site-footer .brand{ display:inline-flex; }
.site-footer address{ font-style:normal; color:var(--on-ink-mid); font-size:.96rem; line-height:1.7; }
.foot__legal{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:baseline;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--on-ink-dim);
}
.foot__legal .entity{ color:var(--on-ink-mid); }
.foot__legal ul{ display:flex; flex-wrap:wrap; gap:.4rem 1.15rem; }
.foot__legal a{ font-size:.72rem; font-family:var(--mono); letter-spacing:.06em; padding:.3rem 0; }

/* ---------- 12b. PAGE HEADS + JUMP LIST ---------- */
[id]{ scroll-margin-top:92px; }

.pagehead{ position:relative; overflow:hidden; }
.pagehead::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(110% 80% at 8% 0%, rgba(227,178,62,.075), transparent 60%);
  pointer-events:none;
}
.pagehead .wrap{ position:relative; }
.pagehead.band--tight{ padding-bottom:clamp(1.7rem,3.5vw,2.6rem); }

.jumplist{
  display:grid; gap:.4rem; margin-top:2.2rem;
  border-top:1px solid var(--line); padding-top:.5rem;
}
.jumplist a{
  display:flex; align-items:center; gap:.85rem; min-height:52px;
  padding:.35rem 0; text-decoration:none; color:var(--on-ink-mid);
  border-bottom:1px solid var(--line); font-weight:600; font-size:1.02rem;
  letter-spacing:-.012em;
}
.jumplist a:hover{ color:var(--gold); }
.jumplist .jn{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; color:var(--gold); flex:none;
}

/* stacked split spacing on small screens */
.split > * + *{ margin-top:clamp(1.9rem,5vw,2.7rem); }

/* ---------- 13. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width:859px){
  .nav{ display:none; }
  .navtoggle{ display:inline-flex; }
}
@media (min-width:560px){
  .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fact{ grid-template-columns:minmax(0,10.5rem) minmax(0,1fr); align-items:baseline; }
  .phase{ grid-template-columns:minmax(0,7rem) minmax(0,1fr); }
}
@media (min-width:820px){
  .srow{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:0 2rem; padding-block:1.75rem; }
  .srow__moment{ margin-bottom:0; padding-right:1rem; }
  .srow__pair{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .spread__cols{
    display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:0 2rem;
    padding-block:.85rem;
  }
  .spread__cols .pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .spread__cols .a{ color:var(--flag-bone); }
  .spread__cols .b{ color:var(--gold-ink); }
  .spread__cols .lbl{ color:var(--on-bone-dim); }
  .cell__label{ display:none; }
}
@media (min-width:900px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero__grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2.5rem,4vw,4rem); align-items:center; }
  .closer__inner{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:3rem; }
  .foot__grid{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:2.5rem; }
  .split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,3.5rem); align-items:start; }
  .split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split > * + *{ margin-top:0; }
  .jumplist{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem; }
}
@media (min-width:1040px){
  .grid--2{ gap:1.4rem; }
  .grid--3,.grid--4{ gap:1.2rem; }
}

/* ---------- 15. PASS-2 REFINEMENTS ---------- */
@media (min-width:560px){
  .toc ol{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.6rem; }
}
@media (min-width:760px){
  .brk{ display:inline; }
}
@media (min-width:900px){
  .split--sticky > :first-child{ position:sticky; top:104px; }
}

/* ---------- 16. SMALL-SCREEN ERGONOMICS ---------- */
@media (max-width:519px){
  .btn-row .btn{ width:100%; }
}

/* ---- mark-as-C lockup (2026-08-31) -------------------------------------
   The locked mark sits INSIDE the wordmark span AS the letter C, so it inherits font-size at
   every breakpoint and is positioned like a glyph. Only the viewBox is cropped — the mark's
   geometry is untouched.

   SIZE + ORIENTATION are set against the REAL Outfit 500 "C" it replaces. These metrics are read
   from the WEBFONT FILE (fontTools: OS/2 sCapHeight + glyf bounds), per 1000em: C ink 720 tall
   (yMin -10, yMax 710), advance 683; cap height 700. ⚠ Do NOT source these from a canvas
   measureText. The figures this block carried until 2026-09-01 (cap 656.3, C ink 687.5, descends
   15.6 — note they are all exact binary fractions, the tell) were FALLBACK-font values that
   survived the document.fonts.ready fix, and they put the centring offset .0218em out.
     height .8594em = 1.194x the C's ink height. Matching 1:1 reads too SMALL: the mark's thick
       ring and tight counter make it denser than an open letterform, so it needs more area for
       equal presence. Size chosen by eye at true header size and operator-approved; only the
       "1.25x" LABEL was wrong (it was arithmetic off the bad cap height).
     top .0797em centres it on the CAP BAND = mark_h/2 - cap/2 = .8594/2 - .700/2. The real C is
       itself cap-centred (overshoot -10/+10 about a 700 band), so cap-centred IS C-centred.
       Verified by pixel-scanning a 400px render: 32px above cap, 32px below baseline, 0.00px
       residual. position:relative is visual only, so no layout shift.
     viewBox 575.48 wide, not 707.56 — the terminals are a VERTICAL cut at x=799.74, so a square
       box carries ~19% dead space on the right.

   SPACING. Chrome does not apply letter-spacing after an atomic inline, so the mark sat one
   whole tracking unit too close to the E (measured .125em against an even .370em elsewhere).
   A zero-width space does not help. margin-right = tracking + .0169em makes the gap dead even;
   the offset is tracking-independent, so tracking rides in --wm-ls and the media queries update
   that property instead of the margin.

   The wordmark is Outfit 500 gold in EVERY candidate — brand-level, so it should not vary per
   site design. Outfit is geometric (circular bowls, uniform stroke), which matches a compass-
   drawn mark; 500 matches the mark's stroke weight. */
.cmark{display:inline-block;width:auto;height:.8594em;line-height:0;
  vertical-align:baseline;position:relative;top:.0797em;
  margin-left:.0313em;margin-right:calc(var(--wm-ls,.2em) + .0169em);color:var(--gold)}
.cmark svg{display:block;height:100%;width:auto}
.sr-c{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.brand__word{font-family:Outfit,"Helvetica Neue",Arial,sans-serif;font-weight:500;color:var(--gold);--wm-ls:.19em}