/* ============================================================
   SOUTH AFRICAN MARKETERS' CIRCLE
   "The Hallway Press" — design system v1
   Every text/ground pairing in this file clears WCAG AA.
   ============================================================ */

/* ---------- 1. FONTS (self-hosted) ---------- */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-600-italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'Spline Sans Mono';src:url('fonts/spline-sans-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Spline Sans Mono';src:url('fonts/spline-sans-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

/* ---------- 2. TOKENS ---------- */
:root{
  /* palette */
  --paper:#F4EFE3;
  --paper-deep:#EAE2CF;
  --ink:#1E1A47;
  --ink-2:#26215C;
  --ink-soft:#3B366A;
  --rooibos:#C34F22;        /* brand accent — fills, rules, display type */
  --rooibos-deep:#A64118;   /* accent ground beneath paper/white text */
  --rooibos-ink:#A64118;    /* accent as SMALL text on paper */
  --rooibos-darker:#8E370F;
  --lavender:#A9A3E0;
  --lavender-soft:#C6C1E4;
  --muted:#635E86;

  /* contextual foreground — flipped by ground classes, no specificity wars */
  --fg:#1E1A47;
  --fg-body:#3B366A;
  --fg-muted:#635E86;
  --fg-accent:#A64118;
  --hairline:rgba(30,26,71,.16);
  --hair:rgba(30,26,71,.16);
  --hair-inv:rgba(244,239,227,.18);

  /* type */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* space */
  --gutter:64px;
  --shell:1440px;
  --rhythm:112px;
  --rhythm-tight:84px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.22s;

  /* elevation */
  --lift:0 22px 60px rgba(30,26,71,.13);
  --lift-deep:0 34px 80px rgba(30,26,71,.28);

  /* z */
  --z-nav:100;
  --z-float:120;
  --z-skip:200;
}
@media (max-width:900px){
  :root{--gutter:24px;--rhythm:72px;--rhythm-tight:56px;}
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
body{
  font-family:var(--body);font-size:18px;line-height:1.75;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;}
::selection{background:var(--rooibos-deep);color:var(--paper);}
:focus-visible{outline:2px solid var(--rooibos);outline-offset:3px;}
.on-ink :focus-visible,.masthead :focus-visible{outline-color:var(--lavender);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;text-decoration:none;
}
.skip-link:focus{left:12px;top:12px;}

/* ---------- 4. GROUNDS (token flips) ---------- */
.ground-paper{background:var(--paper);color:var(--ink);}
.ground-paper-deep{background:var(--paper-deep);color:var(--ink);--fg-muted:#5D5880;}
.ground-ink{background:var(--ink);color:var(--paper);}
.ground-ink-2{background:var(--ink-2);color:var(--paper);}
.ground-rooibos{background:var(--rooibos-deep);color:var(--paper);}

.on-ink,.ground-ink,.ground-ink-2{
  --fg:#F4EFE3;--fg-body:#C6C1E4;--fg-muted:#A9A3E0;--fg-accent:#E4794A;
  --hairline:rgba(244,239,227,.18);
}
.ground-rooibos{
  --fg:#F4EFE3;--fg-body:rgba(244,239,227,.94);--fg-muted:rgba(244,239,227,.88);
  --fg-accent:#FFFFFF;--hairline:rgba(244,239,227,.3);
}
.on-ink p strong,.ground-rooibos p strong{color:var(--fg);font-weight:500;}

/* paper grain — one fixed overlay, never per-section */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:2;}

/* grid/flex children must be free to shrink below intrinsic width */
.article>*,.ledger__row>*,.index-row>*,.post-row>*,.manifesto>*,
.pricing>*,.pricing__tiers>*,.media-grid>*,.split>*,.diptych>*,
.magnet>*,.waypoints>*,.themes__group>*,.readnext__list>*{min-width:0;}
.article__body,.article__body p,.policy p,.close-strip a,.colophon a{overflow-wrap:anywhere;}
.embed-audio iframe,.article__body iframe{max-width:100%;}

/* ---------- 5. PRIMITIVES ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.measure{max-width:68ch;}
.label{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-accent);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.display em,.h2 em,h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--fg-accent);}
.h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,56px);line-height:1.1;letter-spacing:-.022em;text-wrap:balance;color:var(--fg);}
.h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.015em;color:var(--fg);}
.lede{font-size:clamp(19px,2vw,23px);line-height:1.6;color:var(--fg-muted);}
.lede strong{color:var(--fg);font-weight:500;}
.rule{border:none;border-top:1px solid var(--hairline);}
.rule--accent{width:56px;border:none;border-top:3px solid var(--rooibos);}

/* ---------- 6. MASTHEAD + FOLIO ---------- */
.masthead{
  position:sticky;top:0;z-index:var(--z-nav);background:var(--paper);
  border-bottom:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--gutter);
}
.masthead__mark{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.012em;color:var(--ink);text-decoration:none;white-space:nowrap;}
.masthead__mark em{font-style:italic;color:var(--rooibos-ink);}
.masthead__mark .mark-short{display:none;}
.masthead__nav{display:flex;align-items:center;gap:30px;}
.masthead__nav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;color:var(--ink);text-decoration:none;
  padding-bottom:3px;border-bottom:1.5px solid transparent;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.masthead__nav a:hover{border-bottom-color:var(--rooibos);color:var(--rooibos-ink);}
.masthead__nav a[aria-current="page"]{border-bottom-color:var(--ink);}
.masthead__nav .nav-join{
  /* "Apply to join →" is long enough to wrap inside the box at mid widths,
     which reads as three stacked words in a frame. The box holds one line. */
  border:1.5px solid var(--ink);padding:11px 22px;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.masthead__nav .nav-join:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.masthead__nav .nav-join:active{transform:translateY(1px);}

.nav-drop{position:relative;}
.nav-drop__toggle{display:inline-flex;align-items:center;gap:6px;}
.nav-drop__toggle::after{content:'/';font-size:11px;opacity:.5;}
.nav-drop__menu{
  position:absolute;top:100%;left:-14px;padding-top:18px;min-width:290px;
  opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.nav-drop:hover .nav-drop__menu,.nav-drop:focus-within .nav-drop__menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.nav-drop__panel{background:var(--ink);padding:10px;box-shadow:var(--lift-deep);}
.nav-drop__panel a{display:block;padding:11px 14px;color:var(--paper);border-bottom:none;white-space:nowrap;}
.nav-drop__panel a:hover{background:rgba(244,239,227,.08);border-bottom:none;color:var(--paper);}
.nav-drop__panel .menu-rule{border-top:1px solid var(--hair-inv);margin:7px 6px;}

.folio{
  display:flex;justify-content:space-between;gap:24px;padding:16px var(--gutter);
  border-bottom:1px solid var(--hairline);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
}
.folio span:nth-child(2){text-align:center;}
.folio span:last-child{text-align:right;}

@media (max-width:1080px){
  .masthead__nav{gap:20px;}
  .masthead__nav .nav-hide-md{display:none;}
}
/* the one-line "Apply to join" box needs room the old "Join" box did not.
   Between the md cut and the two-row switch, take it out of the gaps first,
   then out of the wordmark — never out of the box, which must not wrap. */
@media (max-width:1010px) and (min-width:761px){
  .masthead__nav{gap:15px;}
  .masthead__nav .nav-join{padding:11px 14px;}
  .masthead__mark .mark-full{display:none;}
  .masthead__mark .mark-short{display:inline;}
}
@media (max-width:760px){
  /* two-row masthead: wordmark + Join, then a rule of section links.
     No JS, no hidden navigation, nothing to tap twice. */
  .masthead{padding:14px var(--gutter) 0;flex-wrap:wrap;align-items:center;gap:0;}
  .masthead::after{content:'';order:1;width:100%;height:0;}
  .masthead__mark{order:0;}
  .masthead__mark .mark-full{display:none;}
  .masthead__mark .mark-short{display:inline;}
  .masthead__nav{display:contents;}
  .masthead__nav .nav-join{order:0;margin-left:auto;padding:9px 15px;font-size:11.5px;}
  .masthead__nav a:not(.nav-join),.masthead__nav .nav-drop{order:2;margin:12px 18px 12px 0;}
  .masthead__nav .nav-hide-sm{display:none;}
  .nav-drop__menu{display:none;}
  .folio{font-size:9.5px;letter-spacing:.12em;padding:11px var(--gutter);}
  .folio span:nth-child(2){display:none;}
}

/* ---------- 7. HERO ---------- */
.hero{display:grid;grid-template-columns:120px 1fr;min-height:min(80vh,860px);}
.hero__rail{border-right:1px solid var(--hairline);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:44px 0;}
.hero__rail span{font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;writing-mode:vertical-rl;color:var(--fg-muted);}
.hero__rail span:last-child{color:var(--fg-accent);}
.hero__main{padding:88px 72px 76px;display:flex;flex-direction:column;justify-content:flex-end;}
.hero__kicker{margin-bottom:32px;}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(46px,8.4vw,124px);line-height:.97;letter-spacing:-.032em;color:var(--ink);text-wrap:balance;}
.hero h1 .accent{display:block;font-style:italic;font-weight:400;color:var(--rooibos);}
.hero__foot{margin-top:clamp(40px,5vw,64px);display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.hero__sub{max-width:30ch;}
.hero__meta{margin-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);}
.hero__actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero__rail{display:none;}
  .hero__main{padding:64px var(--gutter) 56px;}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:36px;}
}

/* ---------- 8. BUTTONS + LINKS ---------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:19px 38px;border:1.5px solid transparent;border-radius:0;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn--ink:hover{background:var(--rooibos-deep);border-color:var(--rooibos-deep);color:var(--paper);}
.btn--rooibos{background:var(--rooibos-deep);color:var(--paper);border-color:var(--rooibos-deep);}
.btn--rooibos:hover{background:var(--rooibos-darker);border-color:var(--rooibos-darker);}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn--outline:hover{background:var(--ink);color:var(--paper);}
.btn--paper{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn--paper:hover{background:var(--rooibos-deep);color:var(--paper);border-color:var(--rooibos-deep);}
.btn--ghost-inv{background:transparent;color:var(--paper);border-color:var(--hair-inv);}
.btn--ghost-inv:hover{border-color:var(--paper);background:rgba(244,239,227,.1);}
.btn--block{display:block;width:100%;text-align:center;}

.link-arrow{
  font-family:var(--mono);font-size:13px;letter-spacing:.07em;color:var(--fg);text-decoration:none;
  border-bottom:1.5px solid var(--rooibos);padding-bottom:5px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.link-arrow:hover{color:var(--fg-accent);}
.link-inline{color:var(--rooibos-ink);text-decoration:none;border-bottom:1px solid rgba(166,65,24,.42);transition:border-color var(--dur) var(--ease);}
.link-inline:hover{border-bottom-color:var(--rooibos-ink);}
.on-ink .link-inline,.ground-rooibos .link-inline{color:var(--fg-accent);border-bottom-color:currentColor;}

/* ---------- 9. SECTION SHELL ---------- */
.section{padding:var(--rhythm) var(--gutter);}
.section--tight{padding:var(--rhythm-tight) var(--gutter);}
.section__inner{max-width:calc(var(--shell) - var(--gutter) * 2);margin:0 auto;}
.section__head{margin-bottom:clamp(44px,5vw,72px);}
.section__head .label{display:block;margin-bottom:20px;}
.section__head .lede,.section__head>h2+p{margin-top:20px;}
.section__head--split{display:grid;grid-template-columns:1fr minmax(280px,440px);gap:clamp(32px,5vw,80px);align-items:end;}
.section__head--split p{font-size:19px;line-height:1.65;color:var(--fg-muted);margin-top:0;}
@media (max-width:900px){.section__head--split{grid-template-columns:1fr;gap:24px;align-items:start;}}

/* ---------- 10. MANIFESTO ---------- */
.manifesto{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:clamp(32px,5vw,80px);}
.manifesto__aside{border-right:1px solid var(--hairline);padding-right:clamp(24px,3vw,56px);display:flex;flex-direction:column;gap:24px;align-self:start;}
.manifesto__aside .idx{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;color:var(--fg-muted);}
.manifesto__body h2{margin-bottom:clamp(32px,4vw,52px);max-width:18ch;}
.manifesto__cols{columns:2;column-gap:clamp(32px,4vw,64px);max-width:1000px;font-size:19.5px;line-height:1.75;color:var(--fg-body);}
.manifesto__cols p{margin-bottom:22px;break-inside:avoid-column;}
.manifesto__cols p:first-child::first-letter{font-family:var(--display);font-weight:600;font-size:74px;line-height:.78;float:left;padding:9px 13px 0 0;color:var(--rooibos-ink);}
.manifesto__sign{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);}
@media (max-width:900px){
  .manifesto{grid-template-columns:1fr;}
  .manifesto__aside{border-right:none;border-top:1.5px solid var(--ink);padding-right:0;padding-top:20px;}
  .manifesto__cols{columns:1;font-size:18px;}
}

/* ---------- 11. LEDGER ---------- */
/* The ledger appears both full-bleed and nested inside .manifesto__body, which
   is roughly half the width. A viewport media query can't tell those apart —
   at 1024px the nested one collapsed its third column to 0 and spilled the
   paragraph off-screen. Size it against its container, not the window. */
.ledger{border-top:1px solid var(--hairline);container-type:inline-size;}
.ledger__row{
  display:grid;grid-template-columns:150px minmax(220px,440px) 1fr;gap:clamp(24px,4vw,60px);
  padding:clamp(32px,4vw,52px) 0;border-bottom:1px solid var(--hairline);align-items:start;
}
.ledger__row:last-child{border-bottom:none;}
.ledger__n{font-family:var(--mono);font-size:14px;letter-spacing:.2em;color:var(--fg-accent);padding-top:.5em;}
.ledger__row h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.8vw,38px);line-height:1.12;letter-spacing:-.016em;color:var(--fg);}
.ledger__row p{font-size:19px;line-height:1.7;color:var(--fg-body);max-width:60ch;}
.ledger--compact .ledger__row{grid-template-columns:110px 300px 1fr;}
@container (max-width:640px){
  .ledger__row,.ledger--compact .ledger__row{grid-template-columns:1fr;gap:14px;}
  .ledger__n{padding-top:0;}
}
@media (max-width:900px){
  .ledger__row{grid-template-columns:1fr !important;gap:14px;}
  .ledger__n{padding-top:0;}
}

/* ---------- 12. DIPTYCH ---------- */
.diptych{display:grid;grid-template-columns:1fr 1fr;}
.diptych__panel{padding:clamp(56px,7vw,100px) clamp(28px,5vw,80px);display:flex;flex-direction:column;justify-content:space-between;gap:44px;}
.diptych__quote{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.6vw,56px);line-height:1.14;letter-spacing:-.022em;text-wrap:balance;color:var(--fg);}
.diptych__quote em{font-style:italic;color:inherit;}
.diptych__attr{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);}
.diptych__prose{display:flex;flex-direction:column;justify-content:center;gap:22px;font-size:20px;line-height:1.75;color:var(--fg-body);}
.diptych__prose .first{font-size:23px;color:var(--fg);font-weight:500;}
@media (max-width:900px){.diptych{grid-template-columns:1fr;}.diptych__prose{font-size:18px;}}

/* ---------- 13. INDEX ROWS ---------- */
.index-list{border-top:1px solid var(--hairline);}
.index-row{
  display:grid;grid-template-columns:100px 1fr auto auto;gap:clamp(16px,3vw,40px);align-items:center;
  padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--hairline);
}
.index-row__n{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;color:var(--fg-muted);}
.index-row h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,29px);line-height:1.2;letter-spacing:-.012em;color:var(--fg);}
.index-row__desc{font-size:16.5px;line-height:1.55;color:var(--fg-muted);margin-top:6px;max-width:62ch;}
.index-row__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap;}
.index-row__thumb{width:96px;aspect-ratio:4/3;object-fit:cover;object-position:top;border:1px solid var(--hairline);}
.index-row--vault{grid-template-columns:96px 84px 1fr auto auto;}
/* Hallway Sessions. The guides' thumbnail is 96px at 4:3, which suits a book
   cover; a session's still is a 16:9 title card with words on it, so it needs
   the width and the shape to stay readable. */
.index-row--session{grid-template-columns:200px 84px 1fr auto auto;}
.index-row--session .index-row__thumb{width:200px;aspect-ratio:16/9;object-position:center;}

/* team-seat row: spans the pricing grid; mono for the lead-in label only —
   a full sentence in uppercase mono is unreadable, so the body sets in var(--body) */
.tier__alt{grid-column:1/-1;margin-top:22px;border-top:1px solid var(--hairline);
  padding-top:16px;font-family:var(--body);font-size:16.5px;line-height:1.62;
  color:var(--fg-muted);max-width:74ch;}
.tier__alt strong{display:block;margin-bottom:7px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-accent);}
.tier__alt a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--hairline);
  transition:border-color var(--dur) var(--ease);}
.tier__alt a:hover{border-bottom-color:var(--fg);}
  border-bottom:1px solid currentColor;}

/* the nine: name + one line, no meta column and no action */
.index-row--simple{grid-template-columns:100px 1fr auto;align-items:start;}
/* quiet status note on a component that has not started yet */
.index-row__soon{align-self:start;padding-top:4px;font-size:10.5px;letter-spacing:.16em;opacity:.85;}
@media (max-width:640px){.index-row--simple{grid-template-columns:100px 1fr;}
  .index-row__soon{grid-column:2;padding-top:8px;}}

.index-list--nine{margin-bottom:8px;}
.index-foot--nine{margin:18px 0 40px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.index-foot--nine a{color:var(--fg-accent);text-decoration:none;border-bottom:1px solid currentColor;}
.label--sub{display:block;margin-bottom:14px;}

.index-row__go{
  justify-self:end;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:12px 24px;border:1px solid var(--hairline);color:var(--fg);white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.index-row__go:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.on-ink .index-row__go:hover{background:var(--rooibos-deep);border-color:var(--rooibos-deep);color:var(--paper);}
.index-row__go--plain{border-color:transparent;padding:12px 0;color:var(--fg-muted);}
.index-row__go--plain:hover{background:transparent;border-color:transparent;color:var(--fg);}
.on-ink .index-row__go--plain:hover{background:transparent;border-color:transparent;color:var(--fg-accent);}
.index-row--feature{background:rgba(195,79,34,.11);padding-left:24px;padding-right:24px;margin-left:-24px;margin-right:-24px;}
.index-row--feature .index-row__go{background:var(--rooibos-deep);border-color:var(--rooibos-deep);color:var(--paper);}
.index-row--feature .index-row__go:hover{background:var(--rooibos-darker);border-color:var(--rooibos-darker);}
.index-foot{
  margin-top:40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
}
.index-foot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;}
.index-foot p{margin:0;}
@media (max-width:900px){
  .index-row,.index-row--vault{grid-template-columns:1fr;gap:10px;align-items:start;}
  .index-row--session{grid-template-columns:1fr;}
  .index-row--session .index-row__thumb{width:100%;max-width:320px;}
  .index-row__go{justify-self:start;margin-top:8px;}
  .index-row__thumb{width:120px;}
  .index-row--feature{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter);}
}

/* ---------- 14. WAYPOINTS ---------- */
.waypoints{display:grid;grid-template-columns:repeat(3,1fr);position:relative;}
.waypoints::before{content:'';position:absolute;top:6px;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 33%,var(--muted) 33%,var(--muted) 100%);opacity:.5;}
.waypoint{padding:48px clamp(24px,4vw,72px) 0 0;position:relative;}
.waypoint::before{content:'';position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--rooibos);}
.waypoint--future::before{background:var(--paper);border:1.5px solid var(--muted);}
.waypoint__m{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:14px;}
.waypoint h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.015em;margin-bottom:14px;line-height:1.15;color:var(--fg);}
.waypoint p{font-size:18px;line-height:1.65;color:var(--fg-body);max-width:42ch;}
@media (max-width:900px){
  .waypoints{grid-template-columns:1fr;}
  .waypoints::before{left:6px;right:auto;top:6px;bottom:6px;width:1.5px;height:auto;background:var(--muted);opacity:.4;}
  .waypoint{padding:0 0 34px 34px;}
  .waypoint::before{top:8px;}
}

/* ---------- 15. MAGNET LEDGER ---------- */
.magnets{border-top:1.5px solid var(--ink);}
.magnet{display:grid;grid-template-columns:96px 1fr minmax(280px,430px);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(28px,3.4vw,42px) 0;border-bottom:1px solid var(--hairline);}
.magnet:last-child{border-bottom:1.5px solid var(--ink);}
.magnets__note{margin-top:26px;font-size:16.5px;line-height:1.6;color:var(--fg-muted);max-width:78ch;}
.magnets__note a{color:var(--rooibos-ink);text-decoration:none;border-bottom:1px solid rgba(166,65,24,.42);}
.magnet__tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-accent);writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center;}
.magnet h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.015em;margin-bottom:8px;line-height:1.16;color:var(--fg);}
.magnet__pitch{font-size:18px;line-height:1.6;color:var(--fg-body);max-width:56ch;}
.magnet__form{display:flex;border:1.5px solid var(--ink);background:var(--paper);}
.magnet__form input[type=email]{flex:1;min-width:0;border:none;background:transparent;outline:none;padding:19px 20px;font-family:var(--mono);font-size:14px;color:var(--ink);}
.magnet__form input::placeholder{color:var(--muted);opacity:1;}
.magnet__form input:focus{background:rgba(195,79,34,.06);}
.magnet__form button{border:none;background:var(--ink);color:var(--paper);cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;padding:19px 26px;white-space:nowrap;transition:background var(--dur) var(--ease);}
.magnet__form button:hover{background:var(--rooibos-deep);}
.magnet__form button:active{transform:translateY(1px);}
.hp{display:none;}
@media (max-width:900px){
  .magnet{grid-template-columns:1fr;gap:16px;}
  .magnet__tag{writing-mode:horizontal-tb;transform:none;justify-self:start;}
}

/* ---------- 16. PRICING ---------- */
.pricing{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(36px,6vw,88px);}
.pricing__intro h2{margin-bottom:28px;}
.pricing__intro .label{display:block;margin-bottom:20px;}
.pricing__intro p{font-size:19px;line-height:1.7;color:var(--fg-body);max-width:38ch;}
.pricing__tiers{display:grid;grid-template-columns:1fr 1fr;}
.tier{padding:8px clamp(24px,3.5vw,64px) 8px 0;display:flex;flex-direction:column;gap:22px;}
.tier+.tier{border-left:1px solid var(--hairline);padding-left:clamp(24px,3.5vw,64px);}
.tier__label{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);}
.tier__amount{font-family:var(--display);font-weight:600;font-size:clamp(64px,9vw,128px);line-height:.95;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;}
.tier--early .tier__amount{color:var(--rooibos-deep);}
.tier__per{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-top:-14px;}
.tier__desc{font-size:17.5px;line-height:1.65;color:var(--fg-body);max-width:36ch;}
.tier__act{margin-top:auto;padding-top:16px;}
/* the standard tier has no button until 1 October; the note sits
   in the button's slot, so the amount's negative pull is cancelled */
.tier__act .tier__per{margin-top:0;}
@media (max-width:900px){
  .pricing{grid-template-columns:1fr;}
  .pricing__tiers{grid-template-columns:1fr;gap:40px;}
  .tier+.tier{border-left:none;border-top:1px solid var(--hairline);padding-left:0;padding-top:36px;}
}

/* ---------- 17. FAQ ---------- */
.faq{max-width:900px;}
.faq__item{border-top:1px solid var(--hairline);}
.faq__item:last-child{border-bottom:1px solid var(--hairline);}
.faq__q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:28px;padding:26px 0;text-align:left;}
.faq__q-text{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.9vw,23px);line-height:1.3;letter-spacing:-.012em;color:var(--fg);}
.faq__q:hover .faq__q-text{color:var(--rooibos-ink);}
.faq__sign{font-family:var(--mono);font-size:15px;color:var(--rooibos-ink);flex-shrink:0;transition:transform var(--dur) var(--ease);}
.faq__item.open .faq__sign{transform:rotate(45deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .34s var(--ease);}
.faq__item.open .faq__a{max-height:640px;}
.faq__a-inner{font-size:18px;line-height:1.8;color:var(--fg-body);padding-bottom:28px;max-width:64ch;}

/* ---------- 18. CLOSE STRIP ---------- */
.close-strip{padding:clamp(40px,5vw,60px) var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;}
.close-strip__line{font-family:var(--display);font-weight:500;font-size:clamp(22px,3vw,36px);letter-spacing:-.018em;color:var(--fg);}
.close-strip__line em{font-style:italic;color:var(--fg-accent);}
.close-strip a{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;word-break:break-word;}
.close-strip a:hover{color:var(--fg);}

/* ---------- 19. COLOPHON ---------- */
.colophon{background:var(--ink);color:var(--lavender);padding:44px var(--gutter);--fg:#F4EFE3;--fg-muted:#A9A3E0;}
.colophon__inner{max-width:calc(var(--shell) - var(--gutter) * 2);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;}
.colophon__mark{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em;text-transform:none;color:var(--paper);}
.colophon__mark em{font-style:italic;color:#E4794A;}
.colophon__links{display:flex;gap:26px;flex-wrap:wrap;}
.colophon a{color:var(--lavender);text-decoration:none;transition:color var(--dur) var(--ease);}
.colophon a:hover{color:#E4794A;}
.colophon__note{width:100%;color:#A9A3E0;letter-spacing:.1em;}

/* ---------- 20. ARTICLE ---------- */
.article{max-width:1080px;margin:0 auto;padding:clamp(48px,6vw,88px) var(--gutter) clamp(56px,6vw,80px);display:grid;grid-template-columns:190px 1fr;gap:clamp(28px,4vw,64px);}
.article__rail{
  border-right:1px solid var(--hairline);padding-right:clamp(16px,2vw,36px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted);
  display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:100px;
}
.article__rail .cat{color:var(--fg-accent);}
.article__main h1{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.6vw,58px);line-height:1.05;letter-spacing:-.026em;color:var(--fg);margin-bottom:26px;text-wrap:balance;}
.article__standfirst{font-family:var(--body);font-style:italic;font-size:clamp(19px,2.1vw,24px);line-height:1.6;color:var(--fg-muted);margin-bottom:40px;max-width:42ch;}
.article__body{font-size:19.5px;line-height:1.8;color:var(--fg-body);max-width:66ch;}
.article__body>p{margin-bottom:22px;}
.article__body>p:first-of-type::first-letter{font-family:var(--display);font-weight:600;font-size:70px;line-height:.78;float:left;padding:8px 12px 0 0;color:var(--ink);}
.article__body h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.016em;color:var(--fg);margin:44px 0 16px;}
.article__body h3{font-family:var(--display);font-weight:600;font-size:21px;color:var(--fg);margin:32px 0 12px;}
.article__body strong{color:var(--fg);font-weight:500;}
.article__body a{color:var(--rooibos-ink);text-decoration:none;border-bottom:1px solid rgba(166,65,24,.42);}
.article__body a:hover{border-bottom-color:var(--rooibos-ink);}
.article__body ul,.article__body ol{margin:0 0 22px 0;padding-left:0;list-style:none;}
.article__body ul li{position:relative;padding-left:26px;margin-bottom:11px;}
.article__body ul li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;border:1.4px solid var(--rooibos);}
.article__body ol{counter-reset:n;}
.article__body ol li{position:relative;padding-left:34px;margin-bottom:11px;counter-increment:n;}
.article__body ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--mono);font-size:12.5px;color:var(--fg-accent);letter-spacing:.1em;}
.article__body blockquote{border:none;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--hairline);padding:26px 0;margin:34px 0;background:none;}
.article__body blockquote p{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(20px,2.3vw,27px);line-height:1.4;color:var(--fg);margin:0;}
.article__body blockquote cite{display:block;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin-top:12px;}
.article__more{margin-top:34px;padding-top:22px;border-top:1px solid var(--hairline);font-size:17px;color:var(--fg-muted);}
/* onward link: one contextual sentence into a cornerstone, closing the body */
.article__onward{font-family:var(--body);font-size:18px;line-height:1.62;color:var(--fg-muted);
  border-left:2px solid var(--rooibos);padding-left:20px;margin:30px 0 0;max-width:60ch;}
/* ---------- 20b. READ NEXT (topic cluster) ---------- */
.readnext{margin-top:44px;padding-top:26px;border-top:1.5px solid var(--ink);}
.readnext .label{display:block;color:var(--fg-accent);margin-bottom:20px;}
.article__body .readnext__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border-top:1px solid var(--hairline);}
.article__body .readnext__list li{position:relative;padding:18px 24px 20px 0;margin:0;
  border-bottom:1px solid var(--hairline);}
.article__body .readnext__list li::before{display:none;}
.readnext__cat{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:9px;}
.article__body a.readnext__link{display:block;font-family:var(--display);font-weight:600;
  font-size:19.5px;line-height:1.24;letter-spacing:-.012em;color:var(--fg);
  border-bottom:none;text-wrap:balance;transition:color var(--dur) var(--ease);}
.article__body a.readnext__link:hover{color:var(--rooibos-ink);}
.readnext__all{margin:20px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);}
@media (max-width:640px){
  .article__body .readnext__list{grid-template-columns:1fr;}
  .article__body .readnext__list li{padding-right:0;}
}
.listen-strip{font-size:17px;color:var(--fg-muted);margin-bottom:26px;}
.listen-strip a{color:var(--rooibos-ink);text-decoration:none;border-bottom:1px solid rgba(166,65,24,.42);}
.embed{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ink);margin-bottom:16px;}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.embed-audio{margin-bottom:22px;}
@media (max-width:900px){
  .article{grid-template-columns:1fr;gap:20px;}
  .article__rail{border-right:none;border-top:1.5px solid var(--ink);padding-right:0;padding-top:16px;position:static;flex-direction:row;flex-wrap:wrap;gap:18px;}
  .article__body{font-size:18px;}
  .article__body>p:first-of-type::first-letter{font-size:56px;}
}

/* ---------- 21. CTA PANEL ---------- */
.cta-panel{background:var(--ink);color:var(--paper);padding:clamp(32px,4vw,48px);margin:clamp(40px,5vw,60px) 0;--fg:#F4EFE3;--fg-body:#C6C1E4;--fg-muted:#A9A3E0;--fg-accent:#E4794A;--hairline:rgba(244,239,227,.18);}
.cta-panel .label{color:var(--fg-accent);display:block;margin-bottom:16px;}
.cta-panel h3,.cta-panel h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.018em;color:var(--fg);margin-bottom:12px;}
.cta-panel h3 em,.cta-panel h2 em{font-style:italic;color:var(--fg-accent);}
.cta-panel p{color:var(--fg-body);font-size:17.5px;line-height:1.65;margin-bottom:22px;max-width:56ch;}
.cta-panel a.btn{border-color:var(--rooibos-deep);}
/* buttons inside prose must not inherit the inline-link treatment */
.article__body a.btn,.policy a.btn,.split__note a.btn{border-bottom-style:solid;}
.article__body a.btn--rooibos,.article__body a.btn--ink,.article__body a.btn--paper,
.policy a.btn--rooibos,.policy a.btn--ink{color:var(--paper);}
.article__body a.btn--paper{color:var(--ink);}
.article__body a.btn--outline{color:var(--fg);}
.cta-panel__fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--fg-muted);margin-top:14px;margin-bottom:0;text-transform:none;}
.capture-panel .magnet__form{border-color:var(--paper);background:transparent;}
.capture-panel .magnet__form input[type=email]{color:var(--paper);}
.capture-panel .magnet__form input::placeholder{color:var(--fg-muted);}
.capture-panel .magnet__form input:focus{background:rgba(244,239,227,.07);}
.capture-panel .magnet__form button{background:var(--paper);color:var(--ink);}
.capture-panel .magnet__form button:hover{background:var(--rooibos-deep);color:var(--paper);}

/* ---------- 22. PAGE HEAD ---------- */
.page-head{padding:clamp(56px,7vw,92px) var(--gutter) clamp(44px,5vw,68px);}
.page-head__inner{max-width:calc(var(--shell) - var(--gutter) * 2);margin:0 auto;}
.page-head .label{display:block;margin-bottom:22px;}
.page-head h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5.6vw,76px);line-height:1.02;letter-spacing:-.032em;text-wrap:balance;max-width:18ch;color:var(--fg);}
.page-head__sub{margin-top:26px;font-size:clamp(18px,2vw,22px);line-height:1.6;max-width:52ch;color:var(--fg-muted);}
.page-head__actions{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;}
.badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:7px 13px;border:1px solid var(--fg-accent);color:var(--fg-accent);background:rgba(166,65,24,.1);margin-bottom:22px;}

/* ---------- 23. SPLIT CAPTURE ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;min-height:100dvh;}
.split__pitch{padding:clamp(48px,6vw,88px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;}
.split__pitch .label{margin-bottom:28px;}
.split__pitch h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5vw,66px);line-height:1.02;letter-spacing:-.03em;color:var(--fg);text-wrap:balance;}
.split__pitch h1 .accent{font-style:italic;font-weight:400;color:var(--fg-accent);}
.split__sub{font-family:var(--body);font-style:italic;font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--fg-muted);max-width:36ch;margin-top:8px;}
.split__points{list-style:none;margin:34px 0 0;max-width:46ch;}
.split__points li{position:relative;padding-left:28px;margin-bottom:14px;font-size:17px;line-height:1.55;color:var(--fg-body);}
.split__points li::before{content:'';position:absolute;left:0;top:.55em;width:10px;height:10px;border:1.4px solid var(--rooibos);}
.split__points strong{color:var(--fg);font-weight:500;}
.split__note{margin-top:26px;font-size:16px;line-height:1.6;color:var(--fg-body);max-width:46ch;}
.split__note a{color:var(--fg-accent);text-decoration:none;border-bottom:1px solid currentColor;}
.split__form{background:var(--paper);padding:clamp(48px,6vw,88px) clamp(28px,4vw,64px);display:flex;align-items:center;}
.capture-card{width:100%;max-width:440px;margin:0 auto;}
.capture-card .label{display:block;margin-bottom:16px;}
.capture-card h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.8vw,32px);line-height:1.15;letter-spacing:-.02em;margin-bottom:12px;color:var(--fg);}
.capture-card__intro{font-size:17px;line-height:1.6;color:var(--fg-muted);margin-bottom:30px;}
.field{display:block;margin-bottom:20px;}
.field span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:9px;}
.field input{width:100%;padding:16px 18px;border:1.5px solid var(--hairline);border-radius:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:17px;outline:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.field input::placeholder{color:var(--muted);opacity:.8;}
.field textarea{width:100%;padding:16px 18px;border:1.5px solid var(--hairline);border-radius:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;outline:none;resize:vertical;min-height:120px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.field textarea::placeholder{color:var(--muted);opacity:.8;}
.field textarea:focus{border-color:var(--rooibos);background:rgba(195,79,34,.05);}

.field input:focus{border-color:var(--rooibos);background:rgba(195,79,34,.05);}
.field input:user-invalid{border-color:var(--rooibos-deep);}
.field .err{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--rooibos-deep);margin-top:7px;text-transform:none;}
.field input:user-invalid~.err{display:block;}
.capture-card__reassure{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--fg-muted);text-align:center;}
.capture-card__privacy{margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);font-size:14.5px;line-height:1.55;color:var(--fg-muted);}
.capture-card__privacy a{color:var(--rooibos-ink);text-decoration:none;border-bottom:1px solid rgba(166,65,24,.4);}
.capture-card__privacy+.capture-card__privacy{margin-top:14px;padding-top:14px;border-top:none;}
@media (max-width:900px){.split{grid-template-columns:1fr;min-height:0;}}

/* ---------- 24. CONFIRMATION ---------- */
.confirm{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:clamp(40px,6vw,80px) var(--gutter);}
.confirm__card{max-width:640px;width:100%;}
.confirm .label{display:block;margin-bottom:24px;}
.confirm h1{font-family:var(--display);font-weight:600;font-size:clamp(32px,5vw,58px);line-height:1.04;letter-spacing:-.03em;color:var(--fg);margin-bottom:22px;text-wrap:balance;}
.confirm h1 em{font-style:italic;font-weight:400;color:var(--fg-accent);}
.confirm p{font-size:19px;line-height:1.7;color:var(--fg-body);margin-bottom:34px;max-width:54ch;}
.confirm__next{margin-top:44px;padding-top:28px;border-top:1px solid var(--hairline);}
.confirm__next .h3{margin-bottom:12px;}
.confirm__next p{font-size:17px;margin-bottom:22px;}

/* ---------- 25. MEDIA + LISTS ---------- */
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);margin-bottom:20px;}
.media-grid h3{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:14px;color:var(--fg);}
@media (max-width:860px){.media-grid{grid-template-columns:1fr;}}
.takeaways{list-style:none;margin:0 0 26px;}
.takeaways li{position:relative;padding-left:28px;margin-bottom:13px;font-size:18.5px;line-height:1.65;color:var(--fg-body);}
.takeaways li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:10px;border:1.4px solid var(--rooibos);}

/* ---------- 25b. FILTER BAR ---------- */
.filterbar{margin-bottom:34px;}
.filterbar__search{position:relative;margin-bottom:20px;}
.filterbar__search input{width:100%;background:transparent;border:none;
  border-bottom:1.5px solid var(--ink);padding:14px 0 14px 30px;
  font-family:var(--display);font-size:clamp(19px,2.2vw,24px);font-weight:400;
  color:var(--fg);letter-spacing:-.012em;-webkit-appearance:none;appearance:none;}
.filterbar__search input::placeholder{color:var(--fg-muted);opacity:1;}
.filterbar__search input:focus{outline:none;border-bottom-color:var(--rooibos);}
.filterbar__search::before{content:'';position:absolute;left:2px;top:50%;
  width:13px;height:13px;margin-top:-9px;border:1.6px solid var(--fg-muted);border-radius:50%;}
.filterbar__search::after{content:'';position:absolute;left:13px;top:50%;
  width:7px;height:1.6px;margin-top:3px;background:var(--fg-muted);transform:rotate(45deg);}
.filterbar__chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-muted);background:transparent;border:1px solid var(--hairline);
  padding:8px 14px;cursor:pointer;transition:color var(--dur) var(--ease),
  border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.chip:hover{color:var(--fg);border-color:var(--ink);}
.chip--on{color:var(--paper);background:var(--ink);border-color:var(--ink);}
.chip:focus-visible{outline:2px solid var(--rooibos);outline-offset:2px;}
.filterbar__empty{margin-top:26px;font-family:var(--body);font-size:18px;color:var(--fg-muted);}
.post-row[hidden]{display:none;}

/* ---------- 26. POST LIST ---------- */
.post-list{border-top:1.5px solid var(--ink);}
.post-row{
  display:grid;grid-template-columns:110px 1fr 170px;gap:clamp(18px,3vw,44px);align-items:baseline;
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--hairline);
  text-decoration:none;color:inherit;transition:background var(--dur) var(--ease);
}
.post-row:hover{background:rgba(195,79,34,.07);}
.post-row__n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--fg-muted);}
.post-row h2,.post-row h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.1vw,26px);line-height:1.22;letter-spacing:-.014em;color:var(--fg);margin-bottom:7px;}
.post-row:hover h2,.post-row:hover h3{color:var(--rooibos-ink);}
.post-row p{font-size:17px;line-height:1.55;color:var(--fg-muted);max-width:64ch;margin:0;}
.post-row__cat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-accent);text-align:right;display:flex;flex-direction:column;gap:8px;}
.post-row__date{color:var(--fg-muted);}
@media (max-width:900px){
  .post-row{grid-template-columns:1fr;gap:8px;}
  .post-row__cat{text-align:left;flex-direction:row;gap:16px;}
}

/* ---------- 27. LEGAL ---------- */
.policy-nav{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--hairline);display:flex;padding:0 var(--gutter);overflow-x:auto;}
.policy-nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);text-decoration:none;padding:18px 26px 16px;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.policy-nav a:first-child{padding-left:0;}
.policy-nav a:hover{color:var(--fg);}
.policy-nav a.active{color:var(--fg);border-bottom-color:var(--rooibos);}
.policy{max-width:860px;margin:0 auto;padding:clamp(44px,5vw,72px) var(--gutter);}
.policy-section+.policy-section{margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--hairline);}
.policy h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.02em;line-height:1.12;margin-bottom:20px;color:var(--fg);}
.policy h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.012em;margin:34px 0 12px;color:var(--fg);}
.policy p{font-size:17.5px;line-height:1.75;color:var(--fg-body);margin-bottom:16px;max-width:68ch;}
.policy ul,.policy ol{list-style:none;margin:0 0 18px;padding:0;}
.policy li{position:relative;padding-left:26px;margin-bottom:10px;font-size:17.5px;line-height:1.65;color:var(--fg-body);}
.policy li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;border:1.4px solid var(--rooibos);}
.policy a{color:var(--rooibos-ink);text-decoration:none;border-bottom:1px solid rgba(166,65,24,.42);}
.policy strong{color:var(--fg);font-weight:500;}
.policy .updated,.policy .policy-updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:26px;}

/* ---------- 28. FLOATING JOIN ---------- */
.float-join{
  position:fixed;bottom:28px;right:28px;z-index:var(--z-float);
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;padding:16px 26px;box-shadow:var(--lift);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),background var(--dur) var(--ease);
}
.float-join.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.float-join:hover{background:var(--rooibos-deep);}
@media (max-width:700px){.float-join{bottom:16px;right:16px;left:16px;text-align:center;padding:15px 20px;}}

/* ---------- 29. ENTRANCE ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.rise{opacity:0;animation:rise .7s var(--ease) forwards;}
.rise-1{animation-delay:.05s;}
.rise-2{animation-delay:.15s;}
.rise-3{animation-delay:.25s;}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;animation:none;}}

/* ---------- 30. UTILITIES ---------- */
.center{text-align:center;}
.center .section__head,.center .page-head__inner{margin-left:auto;margin-right:auto;}
.center h1,.center h2{margin-left:auto;margin-right:auto;}
.center .page-head__actions,.center .index-foot{justify-content:center;}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- 33. THEME INDEX (topic clusters) ---------- */
.themes{margin-top:clamp(64px,8vw,104px);padding-top:clamp(34px,4vw,48px);
  border-top:1.5px solid var(--ink);}
.themes__h{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,40px);
  line-height:1.06;letter-spacing:-.026em;color:var(--fg);margin-bottom:clamp(30px,4vw,46px);}
.themes__group{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  grid-template-rows:auto 1fr;gap:0 clamp(24px,4vw,56px);
  padding:30px 0;border-top:1px solid var(--hairline);}
.themes__group:first-of-type{border-top:none;padding-top:0;}
.themes__group h3{grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-accent);margin-bottom:10px;}
.themes__blurb{grid-column:1;grid-row:2;align-self:start;
  font-size:16.5px;line-height:1.6;color:var(--fg-muted);margin:0;max-width:38ch;}
.themes__list{grid-column:2;grid-row:1/span 2;}
.themes__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px 32px;align-content:start;}
.themes__list li{margin:0;padding:0;}
.themes__list a{font-family:var(--body);font-size:17.5px;line-height:1.4;color:var(--fg-body);
  text-decoration:none;border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.themes__list a:hover{color:var(--rooibos-ink);border-bottom-color:rgba(166,65,24,.42);}
@media (max-width:760px){
  .themes__group{grid-template-columns:1fr;grid-template-rows:none;gap:14px;}
  .themes__group h3,.themes__blurb,.themes__list{grid-column:1;grid-row:auto;}
  .themes__list{grid-template-columns:1fr;gap:11px;}
}

/* ---------- 34. AUTHOR PAGE ---------- */
.author__body{font-size:19px;line-height:1.75;color:var(--fg-body);margin-bottom:22px;}
.author__body:last-child{margin-bottom:0;}
.author__body strong{color:var(--fg);font-weight:500;}
.author__all{margin-top:30px;}
/* a whole-row link must not drag the underline onto its heading and blurb */
a.index-row{text-decoration:none;color:inherit;}
a.index-row h3{transition:color var(--dur) var(--ease);}
a.index-row:hover h3{color:var(--rooibos-ink);}
.on-ink a.index-row:hover h3{color:var(--fg-accent);}

/* ---------- 35. EXTRACTABILITY: ANSWER BLOCK, TABLE, ARTICLE FAQ ---------- */
/* A standalone answer to the headline question, before the essay begins.
   Written to survive being lifted out of the page whole. */
.article__body .answer{background:var(--paper-deep);border-left:3px solid var(--rooibos);
  padding:26px 30px 28px;margin:0 0 36px;}
.article__body .answer .label{display:block;margin-bottom:12px;}
.article__body .answer__text{font-family:var(--body);font-size:19.5px;line-height:1.66;
  color:var(--fg);margin:0;max-width:62ch;}
.article__body .answer__text::first-letter{font-size:inherit;float:none;padding:0;
  font-family:inherit;color:inherit;line-height:inherit;}

.table-wrap{margin:32px 0 34px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.spec-table{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.5;
  min-width:520px;}
.spec-table caption{font-family:var(--mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-muted);text-align:left;padding-bottom:14px;}
.spec-table thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-accent);text-align:left;font-weight:500;
  padding:0 20px 12px 0;border-bottom:1.5px solid var(--ink);vertical-align:bottom;}
.spec-table tbody th{font-family:var(--display);font-weight:600;font-size:17.5px;
  letter-spacing:-.01em;color:var(--fg);text-align:left;padding:16px 20px 16px 0;
  border-bottom:1px solid var(--hairline);vertical-align:top;white-space:normal;}
.spec-table td{color:var(--fg-body);padding:16px 20px 16px 0;
  border-bottom:1px solid var(--hairline);vertical-align:top;}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:none;}
.spec-table th:last-child,.spec-table td:last-child{padding-right:0;}

.article-faq{margin-top:44px;padding-top:30px;border-top:1.5px solid var(--ink);}
.article__body .article-faq>h2{margin-bottom:8px;}
.article-faq .faq{max-width:none;}
@media (max-width:640px){
  .article__body .answer{padding:22px 20px 24px;}
  .spec-table{font-size:15.5px;}
}
/* provenance footnote — the sourcing method, stated where a footnote belongs */
.article__body .provenance{font-family:var(--mono);font-size:12px;line-height:1.75;
  letter-spacing:.03em;color:var(--fg-muted);border-top:1px solid var(--hairline);
  padding-top:18px;margin:34px 0 0;max-width:68ch;text-transform:none;}

/* ── component bento (homepage § 04) ─────────────────────────────────
   Nine components used to be nine identical hairline rows, directly above
   six more and then three more. Same texture five sections running.
   A ruled grid instead of a card set: 1px gaps over a hairline ground do
   the dividing, so radius stays 0 and nothing becomes a box. Every row
   sums to 6 columns, so a cell is never left empty. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--hairline);border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);margin-top:clamp(28px,3.5vw,48px);}
.bento__cell{background:var(--paper);grid-column:span var(--span,2);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:8px;
  min-height:150px;transition:background var(--dur) var(--ease);}
.bento__cell h3{font-family:var(--display);font-weight:600;
  font-size:clamp(19px,1.6vw,23px);line-height:1.22;letter-spacing:-.014em;
  color:var(--fg);margin:0;}
.bento__cell p{font-size:15.5px;line-height:1.55;color:var(--fg-muted);
  margin:0;max-width:46ch;}
.bento__n{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  color:var(--fg-muted);margin-bottom:2px;}
/* The cell paints its own background so the 1px gaps read as rules. That
   background must match the section's ground, because --fg and --fg-muted are
   contextual: on a paper section they are ink, and an ink cell would then be
   dark text on a dark tile. perks.html runs this bento on paper, index.html
   on ink-2, so both grounds are declared. */
.ground-paper .bento__cell{background:var(--paper);}
.ground-paper-deep .bento__cell{background:var(--paper-deep);}
.ground-ink .bento__cell{background:var(--ink);}
.ground-ink-2 .bento__cell{background:var(--ink-2);}
.bento__cell--accent,
.ground-paper .bento__cell--accent,
.ground-paper-deep .bento__cell--accent,
.ground-ink .bento__cell--accent,
.ground-ink-2 .bento__cell--accent{background:var(--rooibos-deep);}
.bento__cell--accent h3,.bento__cell--accent p,.bento__cell--accent .bento__n{color:var(--paper);}
.bento__cell--accent p{opacity:.92;}
@media (hover:hover){
  .ground-ink-2 .bento__cell:not(.bento__cell--accent):hover{background:#2A2568;}
  .ground-ink .bento__cell:not(.bento__cell--accent):hover{background:#262156;}
  .ground-paper .bento__cell:not(.bento__cell--accent):hover{background:var(--paper-deep);}
  .ground-paper-deep .bento__cell:not(.bento__cell--accent):hover{background:#E2D9C2;}
}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento__cell{grid-column:span 1;min-height:0;}
}
@media (max-width:560px){.bento{grid-template-columns:1fr;}}

/* stacked section head, replacing the left-headline / right-paragraph split */
.section__head--stacked{display:block;max-width:64ch;}
.section__head--stacked p{margin:18px 0 0;font-size:17.5px;line-height:1.62;
  color:var(--fg-muted);max-width:60ch;}

/* the step's verb is the label; the number column collapses */
.ledger--steps .ledger__row{grid-template-columns:1fr 1.15fr;}
.ledger--steps .ledger__n{display:none;}
@media (max-width:760px){.ledger--steps .ledger__row{grid-template-columns:1fr;}}

/* ── entry reveal ────────────────────────────────────────────────────
   CSS scroll-driven animation, not JavaScript. A JS version needs
   .reveal{opacity:0} in the stylesheet, which means every hooked element on
   every page disappears if the script ever fails to load. Here a browser
   without support simply skips the @supports block and renders the page
   static and fully visible. Reduced motion skips it too. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes samc-reveal{
      from{opacity:0;transform:translateY(14px);}
      to{opacity:1;transform:none;}
    }
    .reveal{
      animation:samc-reveal linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 20%;
    }
  }
}