/* =========================================================================
   AGENTIC ENTERPRISE — COLORS & TYPOGRAPHY
   Earthy. Paper. Hand-drawn warmth meets technical clarity.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── EARTH PALETTE (primary) ─────────────────────────────────────────── */
  --paper:          #F4ECE0;   /* warm cream paper - default surface       */
  --paper-light:    #FAF5EC;   /* lightest cream                           */
  --paper-mid:      #EBE0CE;   /* deeper cream / secondary surface         */
  --paper-deep:     #DDCEB5;   /* warm sand                                */

  --terracotta:     #C8623A;   /* primary accent - hand-thrown clay        */
  --terracotta-dk:  #A84E2A;   /* pressed / hover                          */
  --terracotta-lt:  #E08862;   /* light variant                            */

  --ochre:          #D9A55B;   /* secondary accent - sun / mustard         */
  --ochre-dk:       #B8843E;
  --ochre-lt:       #ECC68A;

  --moss:           #6B7F4A;   /* tertiary accent - olive / sage           */
  --moss-dk:        #4F6135;
  --moss-lt:        #97A871;

  --ink:            #2A2620;   /* primary text - rich coffee-black          */
  --ink-soft:       #4A4137;   /* secondary text                            */
  --ink-mute:       #7A6F62;   /* tertiary / captions                       */
  --ink-faint:      #A89D8C;   /* disabled / placeholders                   */

  /* ── INDIGO PIGMENT (alt dark surface) ───────────────────────────────
     Deep dyed-paper blue — a sibling to ink, not a replacement.
     Use ink for warm/grounded compositions, indigo for cool/nocturnal
     ones. Terracotta + ochre still pop against both. Pick ONE per
     composition; do not mix dark surfaces in the same view.            */
  --indigo:         #1F2A3D;   /* deep indigo - alt dark surface           */
  --indigo-soft:    #3D4960;   /* secondary text on indigo / lighter surf  */
  --indigo-mute:    #6A7388;   /* captions on indigo                       */
  --indigo-faint:   #9DA4B4;   /* disabled on indigo                       */

  --line:           #D9CDB6;   /* borders / dividers on paper               */
  --line-soft:      #E8DEC9;
  --line-strong:    #B8A98D;

  /* ── SEMANTIC TOKENS ─────────────────────────────────────────────────── */
  --bg:             var(--paper);
  --bg-alt:         var(--paper-light);
  --bg-deep:        var(--paper-mid);
  --bg-ink:         var(--ink);       /* dark surface - warm  (default)   */
  --bg-indigo:      var(--indigo);    /* dark surface - cool  (alternate) */

  --fg1:            var(--ink);        /* headings, primary copy          */
  --fg2:            var(--ink-soft);   /* body                            */
  --fg3:            var(--ink-mute);   /* meta                            */
  --fg-on-dark:     var(--paper-light);

  --accent:         var(--terracotta);
  --accent-hover:   var(--terracotta-dk);
  --accent-2:       var(--ochre);
  --accent-3:       var(--moss);

  --success:        #6B7F4A;
  --warning:        #D9A55B;
  --danger:         #B14A2C;

  /* ── ELEVATION & SHAPE ───────────────────────────────────────────────── */
  --r-sm:    8px;
  --r:       14px;
  --r-lg:    22px;
  --r-pill:  999px;

  --shadow-paper:  0 1px 0 rgba(42,38,32,0.04), 0 12px 28px -16px rgba(42,38,32,0.18);
  --shadow-card:   0 2px 0 rgba(42,38,32,0.05), 0 18px 40px -22px rgba(42,38,32,0.28);
  --shadow-lift:   0 4px 0 rgba(42,38,32,0.06), 0 28px 60px -28px rgba(42,38,32,0.36);
  --shadow-press:  0 1px 0 rgba(42,38,32,0.10) inset, 0 2px 6px -2px rgba(42,38,32,0.18);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-script:  'Caveat', 'Bradley Hand', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-display:  clamp(3rem,    6vw,   5.5rem);  /* hero                  */
  --fs-h1:       clamp(2.2rem,  4vw,   3.4rem);  /* page title            */
  --fs-h2:       clamp(1.7rem,  3vw,   2.4rem);  /* section title         */
  --fs-h3:       1.4rem;                          /* subsection            */
  --fs-h4:       1.15rem;
  --fs-body:     1.0625rem;                       /* 17px                  */
  --fs-meta:     0.875rem;                        /* 14px                  */
  --fs-eyebrow:  0.75rem;                         /* 12px ALL-CAPS         */

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-body:     1.7;

  --ls-tight:   -0.02em;
  --ls-eyebrow:  0.16em;

  /* ── SPACING (4-base) ────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  --maxw: 1200px;
}

/* ── BASE TYPE ROLES ───────────────────────────────────────────────────── */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg1); }
.t-h1      { font-family: var(--font-display); font-size: var(--fs-h1);      font-weight: 700; line-height: var(--lh-snug); color: var(--fg1); }
.t-h2      { font-family: var(--font-display); font-size: var(--fs-h2);      font-weight: 600; line-height: var(--lh-snug); color: var(--fg1); }
.t-h3      { font-family: var(--font-sans);    font-size: var(--fs-h3);      font-weight: 600; line-height: 1.35;          color: var(--fg1); }
.t-script  { font-family: var(--font-script);  font-size: 2.4rem; font-weight: 500; line-height: 1.15; color: var(--fg1); }
.t-body    { font-family: var(--font-sans);    font-size: var(--fs-body);    font-weight: 400; line-height: var(--lh-body); color: var(--fg2); }
.t-meta    { font-family: var(--font-sans);    font-size: var(--fs-meta);    font-weight: 500; color: var(--fg3); }
.t-eyebrow { font-family: var(--font-sans);    font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.t-mono    { font-family: var(--font-mono);    font-size: 0.92em; }

/* ── LISTS & BULLETS ───────────────────────────────────────────────────
   Four canonical list styles. Apply on a <ul> or <ol> as: class="l l-time" etc.
   ───────────────────────────────────────────────────────────────────── */
.l, ul.l, ol.l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.l li { font-size: 0.95rem; line-height: 1.55; color: var(--fg2); position: relative; }
.l li strong { color: var(--fg1); font-weight: 600; }

/* TIMELINE — process / chronology. Dotted vertical rail + ringed nodes. */
.l-time { position: relative; }
.l-time::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1.5px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px);
}
.l-time li { padding-left: 26px; }
.l-time li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--terracotta);
}

/* EYEBROW TAG — categorical / index. Numbered ochre tags inline with the line.
   Numbers auto-increment; supports up to 9 items, override data-n for custom. */
.l-tag li {
  padding-left: 0;
  display: flex; gap: 12px; align-items: baseline;
  counter-increment: l-tag;
}
.l-tag { counter-reset: l-tag; }
.l-tag li::before {
  content: "0" counter(l-tag);
  display: inline-block; flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ochre-dk);
  background: rgba(217, 165, 91, 0.15);
  padding: 3px 7px; border-radius: 3px;
  position: static;
}
.l-tag li[data-n]::before { content: attr(data-n); }

/* MOSS CHECK — benefits / "what's included". Hand-drawn check in moss. */
.l-check li { padding-left: 30px; }
.l-check li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--moss);
  border-bottom: 2px solid var(--moss);
  transform: rotate(-45deg);
}

/* CARET — forward-leaning, navigational, questions. */
.l-caret li { padding-left: 26px; }
.l-caret li::before {
  content: "›"; position: absolute; left: 4px; top: -0.2em;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  color: var(--moss-dk); line-height: 1;
}

/* BIG-STAT — numbers leading the line. Set the stat via data-n="20+" on each li. */
.l-stat { display: flex; flex-direction: column; gap: 14px; }
.l-stat li {
  padding-left: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
}
.l-stat li::before {
  content: attr(data-n); position: static; width: auto;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  color: var(--terracotta); line-height: 1; letter-spacing: -0.02em;
  min-width: 54px;
}

/* HIGHLIGHT — no glyph, typographic emphasis. Wraps <strong> with a hand-marker swipe. */
.l-highlight li { padding-left: 0; }
.l-highlight li strong {
  background-image: linear-gradient(
    transparent 65%,
    rgba(200, 98, 58, 0.32) 65%,
    rgba(200, 98, 58, 0.32) 95%,
    transparent 95%
  );
  padding: 0 2px;
}

/* ── PAPER TEXTURE BACKGROUND (reusable) ───────────────────────────────── */
.bg-paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 25% 20%, rgba(168,140,100,0.06) 0%, transparent 35%),
    radial-gradient(circle at 78% 65%, rgba(200,98,58,0.05)  0%, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(107,127,74,0.04) 0%, transparent 45%);
}
.bg-paper-grain {
  position: relative;
}
.bg-paper-grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* =========================================================================
   THEME · the site's own layer on top of the design system

   tokens.css is vendored verbatim from
   agentic_enterprise_design_system/colors_and_type.css and must never be
   edited. Updating the design system is a file copy; everything this
   particular site decides for itself lives in THIS file.

   The decision that matters: the system ships two dark surfaces, ink (warm)
   and indigo (cool), and says to pick one per composition and never mix
   them. This site runs INK, matching the Agentic Enterprise cover art. The AE badge
   stays indigo, which on an ink field reads as a deliberate accent rather
   than a second surface.
   ========================================================================= */

:root {
  /* The chosen dark surface, plus the shade below it that the footer sits
     on so it separates from the cover panel above. */
  --dark:      var(--ink);        /* #2A2620 */
  --dark-deep: #1F1C17;

  /* Foreground ramp on ink. Ratios measured against #2A2620:
       paper-light  #FAF5EC   16.9:1
       paper-deep   #DDCEB5    9.5:1
       sand         #B8AC99    6.5:1   <- quietest step that still clears AA
       terracotta-lt #E08862    5.5:1
       ochre-lt     #ECC68A    9.1:1
     Nothing below --on-dark-mute may carry copy. */
  --on-dark:      var(--paper-light);
  --on-dark-soft: var(--paper-deep);
  --on-dark-mute: #B8AC99;

  /* Motion. Relaxed, never bouncy. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.2s;

  /* Layout. The system ships --maxw; the rest is this site's chrome. */
  --nav-h: 76px;
  --gap:   var(--s-9);
  --max-w: var(--maxw);
}

@media (max-width: 720px) {
  :root { --gap: var(--s-8); --nav-h: 64px; }
}

/* Motion is decoration here, never information. Honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   BASE · reset, paper, and the primitives every page leans on
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background-color: var(--paper);
  /* Paper is never flat. Three pigments washed under the grain. */
  background-image:
    radial-gradient(circle at 25% 12%, rgba(168, 140, 100, 0.07) 0%, transparent 34%),
    radial-gradient(circle at 80% 48%, rgba(200,  98,  58, 0.055) 0%, transparent 38%),
    radial-gradient(circle at 45% 88%, rgba(107, 127,  74, 0.05) 0%, transparent 42%);
  background-repeat: no-repeat;
  /* Deliberately NOT background-attachment: fixed. Three radial gradients
     re-rasterising on every scroll frame janks the whole page. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Printed-paper grain. Fixed, tiny, and above everything except chrome. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* `height: auto` is not optional. Without it, a width/height attribute pair
   on an <img> keeps the attribute height while max-width caps the width,
   and the image stretches. */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Focus · 2px terracotta, offset 3px, keyboard only. Ochre on dark, where
   terracotta does not separate from the ground. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible,
.cover :focus-visible,
footer :focus-visible { outline-color: var(--ochre-lt); }

::selection { background: rgba(200, 98, 58, 0.22); color: var(--fg1); }

/* ── LAYOUT ────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

section { padding: var(--gap) 0; position: relative; z-index: 2; }
.section--alt  { background: var(--paper-mid); }
.section--dark { background: var(--dark); color: var(--on-dark); }

/* Screen-reader-only, for the skip link and icon-only control labels. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; top: 8px; left: 8px; z-index: 100;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--terracotta); color: #fff;
  font-size: var(--fs-meta); font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: translateY(0); }

/* ── SECTION HEADINGS ──────────────────────────────────────────────────
   Fraunces speaks inside the page. ALL-CAPS Inter is reserved for cover
   panels, so the two display faces never appear at the same scale. */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow { color: var(--ochre); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  max-width: 20ch;
}
.section-title em { font-style: italic; color: var(--terracotta); font-weight: 600; }
.section--dark .section-title { color: var(--on-dark); }
.section--dark .section-title em { color: var(--terracotta-lt); }

.section-sub {
  margin-top: var(--s-4);
  max-width: 62ch;
  color: var(--fg2);
}
.section--dark .section-sub { color: var(--on-dark-soft); }

.section-head { margin-bottom: var(--s-7); }

/* Running body copy. Anywhere more than two paragraphs sit together. */
.prose { margin-top: var(--s-5); max-width: 62ch; }
.prose p { color: var(--fg2); margin-bottom: var(--s-4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--fg1); font-weight: 600; }
.prose em { font-family: var(--font-display); font-style: italic; color: var(--fg1); }
.section--dark .prose p { color: var(--on-dark-soft); }
.section--dark .prose strong, .section--dark .prose em { color: var(--on-dark); }

/* =========================================================================
   MOTION · reveal, progress, and the on-dark list overrides
   ========================================================================= */

/* Fade plus an 8px rise. No parallax, no scroll-jacking. `.in` is set by
   reveal.js, which also has a timeout that forces every target visible if
   the observer never fires. Content is never left invisible. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Reading progress, pinned above the nav. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: var(--terracotta);
  transition: width 0.1s linear;
}

/* Hand-drawn underline. Draws itself once, on load. */
.draw-line path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 1.1s var(--ease) 0.3s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── LIST OVERRIDES ON DARK ────────────────────────────────────────────
   tokens.css ships the six canonical list styles against paper. On ink
   their glyphs and rails need the lighter end of each ramp. */
.section--dark .l li,
.on-dark .l li { color: var(--on-dark-soft); }
.section--dark .l li strong,
.on-dark .l li strong { color: var(--on-dark); }

.section--dark .l-check li::before,
.on-dark .l-check li::before { border-color: var(--moss-lt); }

.section--dark .l-caret li::before,
.on-dark .l-caret li::before { color: var(--moss-lt); }

.section--dark .l-tag li::before,
.on-dark .l-tag li::before {
  color: var(--ochre-lt);
  background: rgba(217, 165, 91, 0.18);
}

.section--dark .l-time li::before,
.on-dark .l-time li::before { background: var(--dark); border-color: var(--terracotta-lt); }

.section--dark .l-stat li::before,
.on-dark .l-stat li::before { color: var(--terracotta-lt); }

/* =========================================================================
   BUTTONS & TAGS · pills, per the system. Hover lifts 2px, press sits back.
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-press); }
.btn svg    { width: 15px; height: 15px; flex-shrink: 0; }

.btn--primary {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(200, 98, 58, 0.28);
}
.btn--primary:hover {
  background: var(--terracotta-dk);
  box-shadow: 0 8px 22px rgba(200, 98, 58, 0.34);
}

.btn--outline {
  background: transparent;
  color: var(--fg1);
  border: 1.5px solid var(--line-strong);
}
.btn--outline:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* On ink. A white-ish hairline is the only outline that holds on dark. */
.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border: 1.5px solid rgba(250, 245, 236, 0.3);
}
.btn--ghost:hover {
  border-color: var(--ochre-lt);
  color: var(--ochre-lt);
  background: rgba(250, 245, 236, 0.05);
}

/* Text link with a sliding rule. Used wherever a card is not warranted. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--terracotta);
}
.link svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.link:hover svg { transform: translateX(3px); }
.on-dark .link, .section--dark .link { color: var(--terracotta-lt); }

/* ── TAGS ──────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(200, 98, 58, 0.1);
  color: var(--terracotta-dk);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tag--mono {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(217, 165, 91, 0.16);
  color: var(--ochre-dk);
}
.section--dark .tag, .on-dark .tag {
  background: rgba(217, 165, 91, 0.16);
  color: var(--ochre-lt);
}

/* =========================================================================
   NAV · AE badge plus the name in Fraunces.

   Every page opens on a dark cover panel, so the bar starts transparent and
   sits on ink. Once scrolled past the cover it takes on paper and a border.
   ========================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav__inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* Scrolled state. Paper, blurred, hairline. Set from ui.js. */
.nav.is-stuck {
  background: rgba(244, 236, 224, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-paper);
}

/* ── LOCKUP ─────────────────────────────────────────────────────────────
   favicon-AE.png, not the SVG: an SVG loaded through <img> is sandboxed
   and cannot fetch Fraunces, so its "AE" would fall back to Times. The
   name beside it is live text, so it stays selectable and indexable. */
.nav__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__badge {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: var(--shadow-paper);
  transition: transform var(--dur) var(--ease);
}
.nav__logo:hover .nav__badge { transform: rotate(-3deg) scale(1.04); }
.nav__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--on-dark);
  transition: color var(--dur) var(--ease);
}
.nav.is-stuck .nav__name { color: var(--fg1); }

/* ── LINKS ─────────────────────────────────────────────────────────────── */
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a {
  position: relative;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--on-dark-soft);
  padding: 4px 0;
  transition: color var(--dur) var(--ease);
}
.nav.is-stuck .nav__links a { color: var(--fg2); }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--ochre-lt); }
.nav.is-stuck .nav__links a:hover { color: var(--terracotta); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ochre-lt); font-weight: 600; }
.nav.is-stuck .nav__links a[aria-current="page"] { color: var(--terracotta); }

.nav__cta { padding: 10px 20px; font-size: 0.82rem; }

/* ── SUBSCRIBE PANEL ────────────────────────────────────────────────────
   A channel picker, not a link. Paper on ink, so it reads as a sheet laid
   over the page rather than as more chrome. */
.subscribe { position: relative; }
.subscribe__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: 21rem;
  max-width: calc(100vw - 40px);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper-light);
  box-shadow: var(--shadow-lift);
}
.subscribe__panel[hidden] { display: none; }

.subscribe__head {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg3);
  padding: 0 10px var(--s-3);
}

.subscribe__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--r);
  color: var(--fg1);
  transition: background-color var(--dur) var(--ease);
}
.subscribe__item:hover { background: var(--paper-mid); }
.subscribe__state { margin-left: auto; flex-shrink: 0; opacity: 0.4; display: flex; }

/* Ticked once opened, so someone working down the list can see where they
   got to. Session only: this is a hint, not a claim about their account. */
.subscribe__item.is-opened .subscribe__state { opacity: 1; color: var(--moss); }
.subscribe__item.is-opened .subscribe__state svg { display: none; }
.subscribe__item.is-opened .subscribe__state::after {
  content: "";
  width: 13px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: -3px;
}

.subscribe__foot {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--fg3);
  padding: var(--s-3) 10px 2px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
}

.subscribe__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(200, 98, 58, 0.1);
  color: var(--terracotta-dk);
}
.subscribe__label { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.subscribe__note  { display: block; font-size: 0.78rem; color: var(--fg3); margin-top: 3px; line-height: 1.35; }

/* ── HAMBURGER + DRAWER ────────────────────────────────────────────────── */
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-dark);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav.is-stuck .nav__burger span { background: var(--fg1); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 49;
  display: none;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) 28px var(--s-7);
  background: var(--dark);
  border-bottom: 1px solid rgba(250, 245, 236, 0.1);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.drawer.is-open { display: flex; }
.drawer a { font-size: 1.05rem; font-weight: 500; color: var(--on-dark-soft); }
.drawer a[aria-current="page"] { color: var(--ochre-lt); font-weight: 600; }
.drawer .btn { width: fit-content; margin-top: var(--s-3); }

.drawer__head {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(250, 245, 236, 0.12);
}
.drawer__sub {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.95rem !important;
}
.drawer__sub .ico { opacity: 0.6; flex-shrink: 0; }

@media (max-width: 900px) {
  /* Hide the whole subscribe wrapper, not just the button inside it, or an
     empty positioned box stays in the flex row. The drawer lists the
     channels directly instead. */
  .nav__links, .subscribe { display: none; }
  .nav__burger { display: flex; margin-left: auto; }
}
@media (max-width: 420px) {
  .nav__name { display: none; }
}

/* =========================================================================
   COVER PANEL · the signature component

   Read off the Agentic Enterprise cover art. Every page opens with one, and everything
   below it returns to paper. That dark-head-into-warm-body contrast is what
   gives the site its rhythm.

   Three type registers, one axis:
     1  Caveat eyebrow, lowercase, ochre
     2  ALL-CAPS Inter title, one word in terracotta, ending in a period
     3  Caveat lede, two or three lines, never more
   Plus mono metadata top right, one oversized orbit, a dotted rule carrying
   a single ochre dot, and a cut-out figure bleeding off the right edge.
   ========================================================================= */

.cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
  padding: calc(var(--nav-h) + var(--s-8)) 0 var(--s-8);
}

/* The ground is never flat: a terracotta warmth rises on the figure side,
   and the bottom edge sinks so the panel sits down into the page. */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 90% at 78% 38%, rgba(200, 98, 58, 0.20) 0%, transparent 62%),
    radial-gradient(ellipse 60% 70% at 12% 8%,  rgba(217, 165, 91, 0.07) 0%, transparent 60%),
    linear-gradient(to bottom, transparent 55%, rgba(31, 28, 23, 0.55) 100%);
}

/* Grain, so the dark reads as printed rather than as a flat fill. */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.88  0 0 0 0.055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* The copy column is sized to its text, not to a fraction of the page, so
   the figure sits right beside it. A wide left column plus a right-aligned
   figure left a dead strip of ground down the middle. */
.cover__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: end;
  justify-content: start;
  min-height: 30rem;
}
.cover--text .cover__inner { grid-template-columns: minmax(0, 1fr); min-height: 20rem; }

/* A container, so the title can size off THIS column rather than off the
   viewport. Viewport units cannot know that "OPTIMIZATION." is thirteen
   characters of a face with no break opportunity, so a vw-based clamp
   overflowed into the figure on exactly the pages with the longest words. */
.cover__body {
  position: relative;
  z-index: 3;
  padding-bottom: var(--s-4);
  container-type: inline-size;
}

/* ── 1 · EYEBROW ───────────────────────────────────────────────────────── */
.cover__eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ochre-lt);
  margin-bottom: var(--s-3);
}

/* ── 2 · TITLE ─────────────────────────────────────────────────────────── */
.cover__title {
  font-family: var(--font-sans);
  /* 12.6cqi is the largest size at which the longest title on the site,
     "OPTIMIZATION.", still fits the column. cqi, not vw: see .cover__body. */
  font-size: clamp(2.6rem, 12.6cqi, 4.9rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--on-dark);
  text-wrap: balance;
}
.cover__title em { font-style: normal; color: var(--terracotta-lt); }

/* ── 3 · LEDE ──────────────────────────────────────────────────────────── */
.cover__lede {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.35;
  color: var(--on-dark-soft);
  max-width: 26ch;
  margin-top: var(--s-5);
}

.cover__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }


/* =========================================================================
   COVER FURNITURE · everything that dresses the panel but is not the
   panel itself: the mono metadata label, the oversized orbit, the dotted
   rule, the signature block, and the cut-out figure.

   Split from cover.css purely by responsibility: cover.css owns the ground
   and the three type registers, this file owns the objects placed on them.
   ========================================================================= */

/* ── METADATA · a capsule, pinned top right ────────────────────────────
   Bare mono type on the ink ground was too quiet to read at a glance, so
   the label sits on a paper capsule instead. Higher contrast, and it now
   reads as a badge rather than as stray text near the figure. */
.cover__label {
  position: absolute;
  top: 0;
  right: 28px;
  z-index: 4;
  padding: 11px 20px;
  border-radius: var(--r);
  background: var(--paper-light);
  box-shadow: var(--shadow-card);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.6;
  color: var(--terracotta-dk);
}

/* ── ORBIT · the one hand-drawn element, oversized and cropped ──────────
   Scaled far past its natural size so only an arc segment reads. Nothing
   else hand-drawn appears inside a cover. */
.cover__orbit {
  position: absolute;
  z-index: 0;
  width: min(54rem, 80vw);
  aspect-ratio: 1;
  left: -15rem;
  bottom: -24rem;
  opacity: 0.16;
  overflow: visible;
  pointer-events: none;
  color: var(--terracotta-lt);
}

/* ── RULE · dotted hairline carrying one solid ochre dot ────────────────
   Replaces every plain divider on the site. */
.cover__rule {
  position: relative;
  flex: 1 1 12rem;
  min-width: 8rem;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(221, 206, 181, 0.42) 0 3px,
    transparent 3px 8px
  );
  background-size: 8px 1px;
}
.cover__rule::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ochre);
  transform: translateY(-50%);
}

/* ── SIGNATURE · Fraunces italic name over a mono role ──────────────────
   This is the ONLY place the name and role appear on a cover. The label
   above used to repeat the role, which read as a stray duplicate sitting
   over the figure's head.                                               */
.cover__sign { text-align: right; }
.cover__sign-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.cover__sign-role {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-top: 8px;
}

/* ── FIGURE · cut out, full height, bleeding off the right edge ─────────
   Dissolved into the field with a mask rather than sat in a card. The
   left-edge fade is what stops it reading as a pasted-on photo. */
.cover__figure {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: end;
  margin-bottom: calc(var(--s-8) * -1);
  margin-right: calc(var(--s-7) * -1);
}
.cover__figure img {
  width: 100%;
  max-height: 40rem;
  object-fit: contain;
  object-position: bottom right;
  /* Cream edge. The cut outs were matted against a light background, so every
     anti-aliased hair pixel still carries a pale value. Against the dark cover
     that reads as a dirty grey fringe. Restating it in paper turns the
     accident into a deliberate paper cut out.

     drop-shadow follows the alpha channel, so the edge hugs the silhouette
     and keeps the wisps, which a border or an outline would square off.
     Three passes: two tight ones build a legible edge, one soft one catches
     the strands that are too fine to hold a hard line.

     Filter runs before mask in the rendering pipeline, so the edge fades out
     with the figure at the left and bottom rather than outlining the mask. */
  filter:
    drop-shadow(0 0 1.5px var(--paper))
    drop-shadow(0 0 1.5px var(--paper))
    drop-shadow(0 0 5px rgba(244, 236, 224, 0.45));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%),
                      linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%),
              linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Show art sits square and framed rather than cut out. Podcast only.
   The top margin clears the mono label, which a cut-out figure passes
   behind but framed art would collide with. */
.cover__figure--art {
  margin: var(--s-7) 0 0;
  align-self: center;
  justify-self: center;
}
.cover__figure--art img {
  max-height: 22rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  /* Show art is a rectangle with its own edge, so the cut out treatment does
     not apply. Left on, the cream would ring the artwork and the drop shadow
     would fight the box shadow below it. */
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

/* ── FOOT · the bottom band, rule then signature ────────────────────────── */
.cover__foot {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-top: var(--s-7);
}

@media (max-width: 860px) {
  .cover__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cover__figure { display: none; }
  .cover__label { position: static; text-align: left; margin-bottom: var(--s-5); }
  .cover__sign { text-align: left; }
  .cover__orbit { left: -12rem; bottom: -16rem; width: 32rem; }
}

/* =========================================================================
   CARDS · the shared anatomy, plus the grids that hold them

   Paper surface, sand hairline, 14px radius, soft layered shadow. On hover
   a terracotta rule wipes across the top edge and the card lifts 3px.
   ========================================================================= */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-light);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
a.card:hover::before { transform: scaleX(1); }

.card__source {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--s-4);
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg1);
  margin-bottom: var(--s-3);
}
.card__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--fg3);
  margin-bottom: var(--s-3);
}
.card__text { font-size: 0.94rem; line-height: 1.65; color: var(--fg2); }
.card__foot { margin-top: auto; padding-top: var(--s-5); }

/* Archive cards close a list, so they read as a destination not an item. */
.card--archive { background: var(--paper-mid); border-style: dashed; }

/* ── GRIDS ─────────────────────────────────────────────────────────────
   auto-fit rather than fixed columns, so a shelf with three items and a
   shelf with seven both stay balanced without per-section overrides. */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── SIGNPOSTS · the three big routes on the home page ─────────────────── */
.signpost {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--paper-light);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-paper);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.signpost:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.signpost__n {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ochre-dk);
}
.signpost__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.signpost__title em { font-style: italic; color: var(--terracotta); }
.signpost__text { font-size: 0.94rem; color: var(--fg2); }
.signpost .link { margin-top: auto; padding-top: var(--s-4); }

/* ── STAT CARDS ────────────────────────────────────────────────────────── */
.stat {
  padding: var(--s-5);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--paper-light);
}
.stat__n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--terracotta);
  margin-bottom: 6px;
}
.stat__label { font-size: 0.8rem; color: var(--fg3); line-height: 1.4; }
.section--dark .stat, .on-dark .stat {
  background: rgba(250, 245, 236, 0.05);
  border-color: rgba(250, 245, 236, 0.14);
}
.section--dark .stat__n, .on-dark .stat__n { color: var(--terracotta-lt); }
.section--dark .stat__label, .on-dark .stat__label { color: var(--on-dark-mute); }

/* ── GALLERY ───────────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.gallery__item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 10;
}
.gallery__item--wide { grid-column: 1 / -1; aspect-ratio: 32 / 9; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--paper-light);
  /* A gradient, never a solid bar. */
  background: linear-gradient(to top, rgba(31, 28, 23, 0.85), transparent);
}

@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item, .gallery__item--wide { grid-column: auto; aspect-ratio: 16 / 10; }
}

/* =========================================================================
   VIDEO · shelves rendered from the live YouTube feed
   ========================================================================= */

.shelf { margin-bottom: var(--s-8); }
.shelf:last-child { margin-bottom: 0; }
.shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.shelf__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.shelf__title em { font-style: italic; color: var(--terracotta); }
.section--dark .shelf__title em { color: var(--terracotta-lt); }

/* The live stamp. Only rendered once real items came back, so it can never
   describe fallback cards as live. feed.js sets the text. */
.shelf__stamp {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.section--dark .shelf__stamp { color: var(--on-dark-mute); }

.video-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-light);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-paper);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.video-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--paper-deep); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.video-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(200, 98, 58, 0.92);
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.video-card__play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.video-card:hover .video-card__play { opacity: 1; transform: scale(1); }

.video-card__body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.video-card__title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg1);
}
.video-card__excerpt {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--fg2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.video-card__badge {
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: rgba(200, 98, 58, 0.12);
  color: var(--terracotta-dk);
  font-weight: 700;
}

/* Skeletons hold the grid's height while the feed is in flight, so the
   page does not jump when cards land. feed.js removes them either way. */
.video-card--skeleton { pointer-events: none; }
.video-card--skeleton .video-card__thumb {
  background: linear-gradient(100deg, var(--paper-mid) 30%, var(--paper-deep) 50%, var(--paper-mid) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
.video-card--skeleton .video-card__title {
  height: 0.85em;
  border-radius: 4px;
  background: var(--paper-mid);
  color: transparent;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* A home-page slot: one card plus the link to the rest of that source.
   The card sits inside a wrapper div that the feed replaces wholesale, so
   the flex chain has to run through that wrapper. Targeting the card as a
   direct child silently did nothing and the three cards ended ragged. */
.latest { display: flex; flex-direction: column; gap: var(--s-4); }
.latest > div { flex: 1; display: flex; }
.latest .video-card { flex: 1; }
.latest > .link { align-self: flex-start; }

.feed-empty { grid-column: 1 / -1; color: var(--fg3); font-size: 0.94rem; }
.feed-empty a { color: var(--terracotta); font-weight: 600; }
.section--dark .feed-empty { color: var(--on-dark-mute); }
.section--dark .feed-empty a { color: var(--terracotta-lt); }

/* ── PLACEHOLDER THUMB ──────────────────────────────────────────────────
   Used by fallback chapter cards, which have no video id and therefore no
   real still. A tinted panel carrying the chapter number, so the card reads
   as deliberate rather than as an image that failed to load. */
.video-card__thumb--placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 80% 100% at 70% 20%, rgba(200, 98, 58, 0.16) 0%, transparent 60%),
    var(--paper-mid);
  border-bottom: 1px solid var(--line);
}
.video-card__chapter {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--terracotta);
  opacity: 0.42;
  transition: opacity var(--dur) var(--ease);
}
.video-card:hover .video-card__chapter { opacity: 0.24; }

/* =========================================================================
   ARTICLES & SHORTS · the Substack feed and the vertical video strip
   ========================================================================= */

.article-card { justify-content: flex-start; }
.article-card__excerpt {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--fg2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A live dot, only on cards that came from the feed rather than the markup. */
.article-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
  flex-shrink: 0;
}
.rss-live .article-card__dot { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.feed-status {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}


/* ── SHORTS · 9:16 portrait tiles, live from the channel's Shorts playlist
   Real stills, so there is nothing to draw and nothing to caption by hand.

   A row that scrolls, not a grid. The count is whatever has been posted:
   a grid stranded two tiles in a five-track row today, and would wrap
   awkwardly at seven. A scroller reads as deliberate at any count, and it
   is the pattern people already know from every short-form shelf. */
.shorts {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Room for the hover lift and its shadow, which the scroll container
     would otherwise clip. */
  padding: 6px 0 var(--s-4);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.shorts::-webkit-scrollbar { height: 6px; }
.shorts::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.shorts::-webkit-scrollbar-track { background: transparent; }

.short {
  position: relative;
  display: block;
  flex: 0 0 clamp(165px, 21vw, 235px);
  scroll-snap-align: start;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-mid);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.short:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.short img { width: 100%; height: 100%; object-fit: cover; }

.short__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 28, 23, 0.86) 0%, transparent 52%);
}

.short__play {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(244, 236, 224, 0.92);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
.short:hover .short__play { background: var(--terracotta); color: #fff; }
.short__play svg { width: 11px; height: 11px; margin-left: 2px; fill: currentColor; }

.short__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-4);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--paper-light);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================================
   BOOKS · the launch banner and the shelf below it
   ========================================================================= */

.launch { background: var(--paper-mid); border-block: 1px solid var(--line); }
.launch__inner {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}

.launch__cover-wrap { position: relative; }
.launch__cover {
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  transform: rotate(-2deg);
  transition: transform 0.35s var(--ease);
}
.launch__cover:hover { transform: rotate(0deg) translateY(-4px); }
.launch__cover img { width: 100%; }

/* The badge sits off the cover's corner so it reads as a sticker. */
.launch__ribbon {
  position: absolute;
  top: -12px;
  right: -14px;
  z-index: 2;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-card);
}

.launch__script {
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--fg3);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.launch__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}
.launch__title em { font-style: italic; color: var(--terracotta); }
.launch__sub {
  font-size: 1rem;
  font-style: italic;
  color: var(--fg3);
  margin: var(--s-3) 0 var(--s-4);
}
.launch__desc { max-width: 60ch; color: var(--fg2); margin-bottom: var(--s-5); }
.launch__list { max-width: 60ch; margin-bottom: var(--s-6); }
.launch__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.launch__credit { font-size: 0.85rem; color: var(--fg3); margin-top: var(--s-4); }

/* ── SHELF ─────────────────────────────────────────────────────────────── */
.book {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.book__cover { border-radius: 3px 8px 8px 3px; overflow: hidden; box-shadow: var(--shadow-card); }
.book__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--s-2);
}
.book__credit { font-size: 0.85rem; color: var(--fg3); margin: var(--s-3) 0 var(--s-4); }

@media (max-width: 780px) {
  .launch__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .launch__cover-wrap { max-width: 220px; }
  .book { grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-5); }
}

/* =========================================================================
   PODCAST · Build & Bet

   The show has its own palette (cream, coral, mustard, teal, olive) which
   is NOT imported into tokens.css. Agentic Enterprise chrome carries the
   page; the show's own artwork carries its colour. The one bridge is coral
   reading as a warmer terracotta, and it is scoped to this file so it can
   never leak into the rest of the site.

   The switch to warm ink helps: Build & Bet's own ink is #221F1B, within a
   hair of the AE #2A2620, so the two brands share a ground.
   ========================================================================= */

.podcast { --coral: #F0562E; }

.podcast__hosts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.host {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-light);
}
.host img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.host__side {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 5px;
}
.host__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.host__bio { font-size: 0.88rem; line-height: 1.55; color: var(--fg2); margin-top: 7px; }

/* ── EPISODE ───────────────────────────────────────────────────────────── */
.episode {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-light);
  box-shadow: var(--shadow-paper);
}
.episode__thumb { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-card); }
.episode__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.episode__n {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--coral);
  margin-bottom: var(--s-2);
}
.episode__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.episode__summary { color: var(--fg2); margin-bottom: var(--s-5); }
.episode__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); }

/* Chapters and the covers list would be a wall of text open by default. */
details.fold { border-top: 1px solid var(--line-soft); padding-top: var(--s-4); margin-top: var(--s-4); }
details.fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 0.8rem;
  line-height: 1;
}
details.fold[open] > summary::before { content: "\2212"; }
details.fold > summary:hover { color: var(--terracotta); }
.fold__body { padding-top: var(--s-4); }

.chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px 24px; }
.chapters li { display: flex; gap: 12px; font-size: 0.88rem; color: var(--fg2); }
.chapters time {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--coral);
  flex-shrink: 0;
  min-width: 3.4em;
}

/* ── THE FIVE QUESTIONS · the page's most quotable block ────────────────── */
.questions { background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg); padding: var(--s-8); }
.questions__lede { color: var(--on-dark-mute); font-size: 0.9rem; margin-bottom: var(--s-5); }
.questions .l li { font-size: 1.05rem; line-height: 1.5; }

/* Pull quotes, in the show's own voice. */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--fg1);
  padding-left: var(--s-5);
  border-left: 2px solid var(--coral);
}

@media (max-width: 760px) {
  .episode { grid-template-columns: 1fr; padding: var(--s-5); }
  .questions { padding: var(--s-6); }
}

/* =========================================================================
   FOOTER · one shade below the cover panels, so the page closes down
   ========================================================================= */

footer {
  position: relative;
  z-index: 2;
  background: var(--dark-deep);
  color: var(--on-dark-soft);
  padding: var(--s-8) 0 var(--s-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(250, 245, 236, 0.1);
}

.footer__lockup { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.footer__badge { width: 44px; height: 44px; border-radius: 12px; }
.footer__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.15;
}
.footer__script {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--ochre-lt);
  margin-top: var(--s-2);
}
.footer__blurb { font-size: 0.9rem; max-width: 34ch; margin-top: var(--s-4); }

.footer__head {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: var(--s-4);
}
.footer__list { display: flex; flex-direction: column; gap: 11px; }
.footer__list a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--on-dark-soft);
  width: fit-content;
  transition: color var(--dur) var(--ease);
}
.footer__list .ico { opacity: 0.6; flex-shrink: 0; }
.footer__list a:hover { color: var(--ochre-lt); }

.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

/* Scroll to top. Appears once the cover panel is behind you. */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 45;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}