/* ============================================================
   AoC — design tokens (single source of truth)
   Dark only. There is no light theme and no switcher.
   Change a colour or a face HERE; never per page.
   ("AoC" is the brand. "The Architecture of Choice" is the title of part one — a different
   thing, and it belongs to the content, never to the chrome.)
   ============================================================ */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('/fonts/CormorantGaramond.ttf?v=1') format('truetype-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/fonts/CormorantGaramond-Italic.ttf?v=1') format('truetype-variations');
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/fonts/Inter.ttf?v=1') format('truetype-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* palette — near-black ground, one gold accent */
  --bg:#0a0a0a;
  --bg-2:#111;
  --card:#141414;

  /* NEVER dimmer than #999 on this ground. --ink-3 is the floor. */
  --ink:#c8c8c8;           /* primary text */
  --ink-2:#bbb;            /* secondary */
  --ink-3:#999;            /* muted — the dimmest colour allowed */
  --line:rgba(201,169,110,.18);

  --accent:#C9A96E;        /* gold — the one accent */
  --accent-soft:rgba(201,169,110,.14);
  --gold:#C9A96E;
  --gold-soft:rgba(201,169,110,.14);

  /* type */
  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:'Cormorant Garamond', Georgia, serif;
  --font-wordmark:'Cormorant Garamond', Georgia, serif;

  /* spacing scale */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-6:3rem; --s-8:4rem; --s-12:6rem;
  --radius:16px; --radius-lg:22px;
  --maxw:720px;
  --shadow:0 10px 40px rgba(0,0,0,.55);

  /* Aliases the browse and utility surfaces were written against (era · themes · search ·
     library · recommendations · statistics). They are the same four colours under a second
     set of names, declared HERE so those pages inherit the palette instead of hard-coding a
     near-black of their own and drifting one shade off everything else. */
  --text:var(--ink); --muted:var(--ink-3); --surface:var(--card); --read:var(--accent);
  --line-2:rgba(255,255,255,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg)}   /* fills the iOS safe-area top/bottom */
html{scrollbar-width:none}
::-webkit-scrollbar{display:none}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Cormorant Garamond defaults to OLD-STYLE figures, so "Episode 1" set a lowercase one that
     reads as a stray letter, and a stat tile showed "51" as "5I". Lining figures, everywhere:
     font-variant-numeric inherits, so declaring it once on body covers every surface. */
  font-variant-numeric:lining-nums;
  font-feature-settings:'lnum' 1;
}

/* wordmark — locked so it never drifts across pages.
   THE BRAND IS "AoC": capital A, lowercase o, capital C. So there is NO text-transform here.
   Sagora's wordmark rule upper-cased everything, which is right for a six-letter word and
   fatal for this one — it would render the brand as "AOC", which is a different name. */
.brand-wordmark,.brand-name,.splash-name,.brand__word,.id-name{
  font-family:var(--font-wordmark)!important;
  font-weight:500!important;
  /* NOT !important: the splash's wordmark reveal animates letter-spacing from .5em down,
     and an !important author declaration outranks an animation, which silently killed it. */
  letter-spacing:.14em;
  text-transform:none!important;
}

h1,h2,h3{font-family:var(--font-display); font-weight:500; line-height:1.2; letter-spacing:.01em; color:var(--ink)}
h1{font-size:clamp(2rem,7vw,3.4rem)}
h2{font-size:clamp(1.4rem,4.5vw,2rem)}
.accent-script{font-family:var(--font-accent); font-style:italic; color:var(--gold); font-weight:500; font-size:1.15em}
.eyebrow{font-family:var(--font-body); font-weight:600; letter-spacing:.22em; text-transform:uppercase; font-size:.7rem; color:var(--accent)}
a{color:inherit; text-decoration:none}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  padding:.8rem 1.6rem; border-radius:999px; border:1px solid var(--accent);
  background:var(--accent); color:#0a0a0a; cursor:pointer; transition:.3s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-3)}
.muted{color:var(--ink-3)}
.tag{display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:.28rem .7rem; border-radius:999px}

/* ── the interior page (overview / method / about / privacy / menu / library) ──
   One treatment, declared once. A page that hand-rolls its own reading column is a page that
   will drift from the others on the first edit. Every interior page pairs this with topbar.js
   (which owns the 56px fixed bar) and footer.js (which owns the close). */
.page{max-width:640px; margin:0 auto;
  padding:calc(84px + env(safe-area-inset-top,0px)) 1.4rem 2rem}
.page .eyebrow{display:block; margin-bottom:.7rem}
.page h1{font-size:clamp(1.9rem,6.4vw,2.7rem); margin-bottom:.6rem}
/* The hero dek is CENTRED and short. The top bar already renders the page title, so a hero must
   never repeat it as an eyebrow — show only the descriptive line. */
.page .dek{max-width:34ch; margin:0 auto 2.6rem; text-align:center; color:var(--ink-2);
  font-family:var(--font-display); font-style:italic; font-size:1.16rem; line-height:1.5}
.page .hd{text-align:center}
.page h2{font-size:1.36rem; margin:2.4rem 0 .7rem}
.page h3{font-size:1.02rem; font-family:var(--font-body); font-weight:600; letter-spacing:.02em;
  color:var(--ink); margin:1.6rem 0 .35rem}
.page p{margin:.9rem 0; color:var(--ink-2)}
.page p.lead{font-size:1.06rem; color:var(--ink)}
.page ul{margin:.9rem 0; padding-left:1.15rem; color:var(--ink-2)}
.page li{margin:.5rem 0}
.page a.inline{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.page hr{border:none; border-top:1px solid var(--line); margin:2.4rem 0}
.page .pull{font-family:var(--font-display); font-style:italic; font-size:1.3rem; line-height:1.45;
  color:var(--ink); border-left:2px solid var(--accent); padding:.2rem 0 .2rem 1rem; margin:2rem 0}
.page .cta{display:flex; justify-content:center; margin:2.6rem 0 1rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ── NO DOUBLE-TAP ZOOM ───────────────────────────────────────────────────────
   `user-scalable=no` in the viewport meta has been ignored by iOS Safari since
   iOS 10. `touch-action: manipulation` is what actually works: it keeps panning
   and pinch-zoom (the accessibility gesture survives) and drops only the
   double-tap-to-zoom gesture, along with the ~300ms click delay.
   Applied with `*` deliberately — touch-action is NOT inherited, and the gesture
   is decided by the element actually tapped.
   ------------------------------------------------------------------------- */
*{touch-action:manipulation}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}