/* ============================================================
   HADI AHMADI — PERSONAL SITE
   base.css — tokens, type presets, reset, primitives, patterns.

   The stylesheet is split by concern and concatenated in
   partials/head.html, in this order:
     base.css    tokens, type, reset, buttons/chips/eyebrows, patterns
     layout.css  nav, sections + crosshairs, page headers, footer
     home.css    homepage sections (hero, services, numbers, timeline…)
     cards.css   talk / workshop / library cards
     detail.css  talk & training pages: header, specs, prose, gallery
     pages.css   contact, about, 404, lab, filters
     blog.css    blog index, posts, article elements (step 07)

   Rules of the system (unchanged from step 05):
   - Yellow (#F7FF62) is a FILL, never body text on white. Text that
     wants emphasis uses --accent-ink (dark) or --eyebrow (gray).
     Yellow returns as text only inside .on-dark.
   - Dark is spent, not spread: footer, CTA/contact panels, small
     devices. Add .on-dark to opt a block in.
   - Radius 0 everywhere. Crosshair markers are the signature.

   Several components ship in more than one design ("looks"). They
   carry data-vgroup + data-look; the CSS for each look is keyed on
   [data-look="…"]. Defaults: [params.ui] in hugo.toml. Catalog:
   data/lab.yaml. Preview: the Design Lab panel and /lab/.
   ============================================================ */

/* ========================================
   TOKENS
   ======================================== */
:root {
  /* Palette — shared with the academy site */
  --c-white:  #FFFFFF;
  --c-50:     #F7F7F5;
  --c-100:    #EBEBEB;
  --c-200:    #D4D4D4;
  --c-400:    #9A9A9A;
  --c-600:    #5C5C5C;
  --c-dark:   #1A1908;
  --c-dark-2: #2A2914;
  --c-yellow: #F7FF62;

  /* Surfaces */
  --bg-primary:    var(--c-white);
  --bg-secondary:  var(--c-50);
  --bg-card:       var(--c-white);
  --bg-card-hover: var(--c-50);

  /* Ink */
  --text-primary:   var(--c-dark);
  --text-secondary: #3B3A28;
  --text-muted:     var(--c-600);
  --text-faint:     var(--c-400);

  /* Accent roles */
  --accent:       var(--c-yellow);  /* fills, marks, bars */
  --accent-ink:   var(--c-dark);    /* text that wants weight */
  --eyebrow:      var(--c-600);     /* uppercase micro-labels */
  --marker:       var(--c-dark);    /* crosshair markers */

  /* Lines */
  --border:        var(--c-200);
  --border-strong: var(--c-dark);
  --border-hover:  var(--c-dark);

  /* Pattern inks — redefined inside .on-dark */
  --grid-line: rgba(26, 25, 8, 0.065);
  --dot:       rgba(26, 25, 8, 0.2);
  --hatch:     rgba(26, 25, 8, 0.13);

  /* The pressed-button shadow */
  --btn-shadow: var(--c-dark);

  /* Layout */
  --max-width:    1240px;
  --side-padding: 48px;
  --frame-x:      calc(var(--side-padding) / 2);  /* where the page frame lines run */
  --nav-h:        68px;
  --section-y:    clamp(72px, 9vw, 120px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t:    0.25s;
}

/* ========================================
   TYPE PRESETS

   Four roles, each a token:
     --font-display  hero name, page titles, section headings, big numbers
     --font-head     card titles, prose headings, spec values
     --font-body     running text and UI
     --font-mono     eyebrows, chips, labels, metadata
     --font-accent   the italic word inside a display line (<em>)

   The preset is chosen on <html data-typeset="…">, from [params.ui]
   typeset in hugo.toml. :root carries the default (editorial) so the
   site renders even without the attribute. Every face except Clash
   comes from a CDN while the lab is on — the chosen one must be
   self-hosted before publishing (see the step 06 report).
   ======================================== */
:root,
[data-typeset="editorial"] {
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --display-w:  400;
  --display-ls: -0.01em;
  --display-lh: 0.98;
  --font-head: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --head-w:  600;
  --head-ls: -0.02em;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body-size: 16px;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --mono-ls: 0.08em;
  --font-accent: 'Instrument Serif', 'Times New Roman', serif;
  --accent-w: 400;
}

[data-typeset="studio"] {
  --font-display: 'ClashDisplay-Variable', 'ClashDisplay-Medium', -apple-system, sans-serif;
  --display-w:  500;
  --display-ls: -0.035em;
  --display-lh: 0.95;
  --font-head: 'General Sans', -apple-system, 'Segoe UI', sans-serif;
  --head-w:  600;
  --head-ls: -0.015em;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --body-size: 16px;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --mono-ls: 0.08em;
  --font-accent: 'Instrument Serif', 'Times New Roman', serif;
  --accent-w: 400;
}

[data-typeset="swiss"] {
  --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --display-w:  700;
  --display-ls: -0.055em;
  --display-lh: 0.92;
  --font-head: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --head-w:  600;
  --head-ls: -0.025em;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --body-size: 16px;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --mono-ls: 0.06em;
  --font-accent: 'Inter Tight', 'Inter', sans-serif;
  --accent-w: 500;
}

[data-typeset="geist"] {
  --font-display: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --display-w:  600;
  --display-ls: -0.05em;
  --display-lh: 0.95;
  --font-head: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --head-w:  600;
  --head-ls: -0.03em;
  --font-body: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --body-size: 16px;
  --font-mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --mono-ls: 0.06em;
  --font-accent: 'Instrument Serif', 'Times New Roman', serif;
  --accent-w: 400;
}

[data-typeset="grotesk"] {
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --display-w:  600;
  --display-ls: -0.045em;
  --display-lh: 0.95;
  --font-head: 'Space Grotesk', -apple-system, sans-serif;
  --head-w:  600;
  --head-ls: -0.02em;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --body-size: 16px;
  --font-mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --mono-ls: 0.04em;
  --font-accent: 'Fraunces', Georgia, serif;
  --accent-w: 400;
}

[data-typeset="cabinet"] {
  --font-display: 'Cabinet Grotesk', -apple-system, sans-serif;
  --display-w:  800;
  --display-ls: -0.035em;
  --display-lh: 0.92;
  --font-head: 'Cabinet Grotesk', -apple-system, sans-serif;
  --head-w:  700;
  --head-ls: -0.01em;
  --font-body: 'Satoshi', -apple-system, 'Segoe UI', sans-serif;
  --body-size: 16.5px;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --mono-ls: 0.08em;
  --font-accent: 'Instrument Serif', 'Times New Roman', serif;
  --accent-w: 400;
}

[data-typeset="bricolage"] {
  --font-display: 'Bricolage Grotesque', -apple-system, sans-serif;
  --display-w:  700;
  --display-ls: -0.045em;
  --display-lh: 0.93;
  --font-head: 'Bricolage Grotesque', -apple-system, sans-serif;
  --head-w:  600;
  --head-ls: -0.02em;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --body-size: 16px;
  --font-mono: 'DM Mono', ui-monospace, Consolas, monospace;
  --mono-ls: 0.06em;
  --font-accent: 'Instrument Serif', 'Times New Roman', serif;
  --accent-w: 400;
}

[data-typeset="literary"] {
  --font-display: 'Fraunces', Georgia, serif;
  --display-w:  400;
  --display-ls: -0.025em;
  --display-lh: 0.98;
  --font-head: 'Fraunces', Georgia, serif;
  --head-w:  600;
  --head-ls: -0.01em;
  --font-body: 'Newsreader', Georgia, serif;
  --body-size: 18px;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --mono-ls: 0.06em;
  --font-accent: 'Fraunces', Georgia, serif;
  --accent-w: 300;
}

/* Role helpers — any element can take a role directly */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: var(--display-lh);
}

.t-head {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
}

.t-mono {
  font-family: var(--font-mono);
  letter-spacing: var(--mono-ls);
}

/* The accent word inside any display line */
.t-display em,
.hero__name em,
.hero__statement em,
.shead__title em,
.page-hero__title em,
.cta-panel__title em,
.footer__pitch em,
.tagline-strip__text em,
.type-card__display em,
.about-teaser__title em,
.detail-head__title em,
.wip__title em,
.notfound__title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--accent-w);
  letter-spacing: -0.01em;
}

/* Persian runs — the lab loads Vazirmatn; system fonts cover it otherwise */
:lang(fa) {
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  letter-spacing: 0;
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.65;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4 {
  font-weight: inherit;
  font-size: inherit;
}

::selection {
  background: var(--accent);
  color: var(--c-dark);
}

/* Yellow marker — the one way yellow carries text on white */
mark {
  background: var(--accent);
  color: var(--c-dark);
  font-style: normal;
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

:focus-visible {
  outline: 2px solid var(--c-dark);
  outline-offset: 3px;
}

.on-dark :focus-visible {
  outline-color: var(--c-yellow);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--c-yellow);
  color: var(--c-dark);
  border: 1px solid var(--c-dark);
  font-weight: 600;
  font-size: 14px;
}

.skip-link:focus {
  top: 12px;
}

/* [hidden] has to beat components that set their own display */
.btn[hidden],
.tcard[hidden],
.wcard[hidden],
.lightbox__thumbs[hidden] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* Inline SVG icons — sized to the text unless a component says otherwise */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.2em;
}

/* ========================================
   DARK SURFACES

   Dark is spent, not spread. Blocks that go dark carry .on-dark and
   redefine the semantic tokens in their own scope, so anything placed
   inside picks up the dark variant with no rules of its own. On dark,
   yellow is legible again and takes back the accent roles.
   ======================================== */
.on-dark,
.services[data-look="feature"] .svc:first-child {
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-muted:     rgba(255, 255, 255, 0.5);
  --text-faint:     rgba(255, 255, 255, 0.32);

  --border:         rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.3);
  --border-hover:   rgba(255, 255, 255, 0.5);

  --accent-ink: var(--c-yellow);
  --eyebrow:    var(--c-yellow);
  --marker:     var(--c-yellow);

  --bg-primary:    var(--c-dark);
  --bg-card:       rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --bg-secondary:  rgba(255, 255, 255, 0.05);

  --grid-line: rgba(247, 255, 98, 0.07);
  --dot:       rgba(247, 255, 98, 0.26);
  --hatch:     rgba(247, 255, 98, 0.14);

  background: var(--c-dark);
  color: var(--text-secondary);
}

/* ========================================
   EYEBROW — the mono micro-label
   ======================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--eyebrow);
}

/* A small crosshair in front of the label */
.eyebrow--mark::before {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  background:
    linear-gradient(var(--marker), var(--marker)) center / 1px 100% no-repeat,
    linear-gradient(var(--marker), var(--marker)) center / 100% 1px no-repeat;
}

.eyebrow__num {
  color: var(--text-primary);
  font-weight: 600;
}

.eyebrow__num::after {
  content: '/';
  margin-left: 10px;
  color: var(--text-faint);
  font-weight: 400;
}

/* ========================================
   CHIPS
   ======================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--bg-card);
  white-space: nowrap;
}

.chip .icon {
  width: 12px;
  height: 12px;
}

/* The dark + yellow chip — both colors in one small object */
.chip-dark,
.chip--dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-dark);
  color: var(--c-yellow);
  border-color: var(--c-dark);
  padding: 5px 10px;
}

.chip--yellow {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-dark);
}

.chip--ink {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Topic tags — quieter, sentence case */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color var(--t) ease, background var(--t) ease;
}

.tag::before {
  content: '#';
  margin-right: 2px;
  font-family: var(--font-mono);
  color: var(--text-faint);
}

a.tag:hover {
  border-color: var(--border-strong);
  background: var(--accent);
  color: var(--c-dark);
}

/* ========================================
   BUTTONS

   Primary is a yellow block with a hard dark shadow that presses
   flat on hover. On dark ground the shadow would vanish, so there
   it empties out to a yellow outline instead.
   ======================================== */
.btn {
  --btn-bg:   transparent;
  --btn-ink:  var(--text-primary);
  --btn-line: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t) ease,
    color var(--t) ease,
    border-color var(--t) ease;
}

.btn .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--t) var(--ease);
}

.btn:hover .icon {
  transform: translateX(3px);
}

.btn--primary {
  --btn-bg:   var(--c-yellow);
  --btn-ink:  var(--c-dark);
  --btn-line: var(--c-dark);
  box-shadow: 3px 3px 0 0 var(--btn-shadow);
}

.btn--primary:hover {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--btn-shadow);
}

.btn--primary:active {
  transform: translate(3px, 3px);
}

.btn--ghost:hover {
  --btn-bg:   var(--c-yellow);
  --btn-ink:  var(--c-dark);
  --btn-line: var(--c-dark);
}

.btn--dark {
  --btn-bg:   var(--c-dark);
  --btn-ink:  var(--c-white);
  --btn-line: var(--c-dark);
}

.btn--dark:hover {
  --btn-ink: var(--c-yellow);
  box-shadow: 3px 3px 0 0 var(--c-yellow);
  transform: translate(-2px, -2px);
}

.btn--sm {
  padding: 10px 14px;
  font-size: 13px;
}

.btn--sm .icon {
  width: 14px;
  height: 14px;
}

.on-dark .btn--primary {
  box-shadow: none;
}

.on-dark .btn--primary:hover {
  --btn-bg:   transparent;
  --btn-ink:  var(--c-yellow);
  --btn-line: var(--c-yellow);
  transform: none;
}

.on-dark .btn--ghost {
  --btn-line: rgba(255, 255, 255, 0.4);
}

/* Text link with an arrow — underline that fills yellow on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 3px;
  transition: background var(--t) ease, color var(--t) ease;
}

.link-arrow .icon {
  width: 15px;
  height: 15px;
  transition: transform var(--t) var(--ease);
}

.link-arrow:hover {
  background: var(--accent);
  color: var(--c-dark);
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* ========================================
   ICON TILE — a square frame around an icon
   ======================================== */
.itile {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}

.itile .icon {
  width: 20px;
  height: 20px;
}

.itile--sm {
  width: 34px;
  height: 34px;
}

.itile--sm .icon {
  width: 16px;
  height: 16px;
}

.itile--yellow {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-dark);
}

.itile--dark {
  background: var(--c-dark);
  color: var(--c-yellow);
  border-color: var(--c-dark);
}

/* ========================================
   PATTERNS

   Three textures, all drawn from the drafting table: a grid, a dot
   field and a hatch. They sit on their own layer (.pat) under the
   content, and most of them fade out with a mask so they read as
   atmosphere, never as a surface. Use at most one per view.
   ======================================== */
.pat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pat--grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* A major line every fourth cell, like real drafting paper */
.pat--grid-major {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
  background-position: -1px -1px;
}

.pat--dots {
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 18px 18px;
}

.pat--hatch,
.hatch {
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
}

/* Fades */
.pat--fade-right {
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 10%, #000 75%);
}

.pat--fade-radial {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 42%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 72% 42%, #000 15%, transparent 72%);
}

.pat--fade-bottom {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

/* ========================================
   CROSSHAIRS

   The signature mark. Everything that draws one shares this
   background, so it follows --marker into dark scopes.
   .xh4 puts one on each corner of any positioned box:
     <span class="xh4" aria-hidden="true"><span></span></span>
   ======================================== */
.xh4,
.xh4 > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.xh4::before,
.xh4::after,
.xh4 > span::before,
.xh4 > span::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--marker), var(--marker)) center / 1px 100% no-repeat,
    linear-gradient(var(--marker), var(--marker)) center / 100% 1px no-repeat;
}

.xh4::before        { top: 0;    left: 0;  transform: translate(-50%, -50%); }
.xh4::after         { top: 0;    right: 0; transform: translate(50%, -50%); }
.xh4 > span::before { bottom: 0; left: 0;  transform: translate(-50%, 50%); }
.xh4 > span::after  { bottom: 0; right: 0; transform: translate(50%, 50%); }

/* Pulled inside the box — for blocks that clip, or dark blocks on white */
.xh4--in::before        { transform: translate(6px, 6px); }
.xh4--in::after         { transform: translate(-6px, 6px); }
.xh4--in > span::before { transform: translate(6px, -6px); }
.xh4--in > span::after  { transform: translate(-6px, -6px); }

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

@media (max-width: 900px) {
  :root {
    --side-padding: 24px;
    --nav-h: 60px;
  }
}

@media (max-width: 600px) {
  :root {
    --side-padding: 20px;
  }
}
/* ============================================================
   layout.css — nav, sections and their frame, section heads,
   page headers, footer.
   ============================================================ */

/* ========================================
   NAVIGATION
   ======================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--c-dark);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  height: var(--nav-h);
  transition: height 0.3s var(--ease);
}

.nav--scrolled .nav__inner {
  height: calc(var(--nav-h) - 10px);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--text-primary);
}

/* The monogram tile — dark with yellow letters, flips on hover */
.nav__mark {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--c-dark);
  color: var(--c-yellow);
  border: 1px solid var(--c-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--t) ease, color var(--t) ease;
}

.nav__mark::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  transition: transform var(--t) var(--ease);
}

.nav__logo:hover .nav__mark {
  background: var(--c-yellow);
  color: var(--c-dark);
}

.nav__logo:hover .nav__mark::after {
  transform: translate(3px, 3px);
}

.nav__name {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 16px;
  line-height: 1;
}

.nav__links ul {
  display: flex;
  gap: 30px;
}

.nav__links a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--t) ease;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--c-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--text-primary);
}

.nav__links a:hover::after,
.nav__links a.active::after {
  transform: scaleX(1);
}

/* Burger — two bars that cross */
.nav__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-dark);
  background: var(--bg-primary);
}

.nav__burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--c-dark);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}

.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 23px; }

.nav--open .nav__burger {
  background: var(--c-yellow);
}

.nav--open .nav__burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* Mobile sheet */
.nav__panel {
  position: fixed;
  z-index: 99;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}

.nav__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
}

.nav__panel.is-compact {
  top: calc(var(--nav-h) - 10px);
}

.nav__panel[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.nav__panel.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.nav__panel-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
}

.nav__panel-links li {
  border-bottom: 1px solid var(--border);
}

.nav__panel-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1.05;
  color: var(--text-primary);
}

.nav__panel-links a.active {
  text-decoration: underline;
  text-decoration-color: var(--c-yellow);
  text-decoration-thickness: 6px;
  text-underline-offset: 4px;
}

.nav__panel-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.nav__panel-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav__panel-social {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

body.nav-locked {
  overflow: hidden;
}

/* ========================================
   SECTIONS + THE PAGE FRAME

   Every section carries a .section-frame: two vertical lines at the
   page margins, with a crosshair at each top corner; the section itself
   adds crosshairs at its bottom corners. Stacked, they draw one
   continuous drafting frame down the page.
   ======================================== */
.section {
  position: relative;
  padding: var(--section-y) 0;
  border-top: 1px solid var(--border);
}

.section--tight {
  padding: clamp(48px, 6vw, 72px) 0;
}

.section--gray {
  background: var(--bg-secondary);
}

.section > .container,
.page-hero > .container,
.detail-head > .container,
.detail-body > .container {
  position: relative;
  z-index: 1;
}

.section-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--frame-x);
  right: var(--frame-x);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  pointer-events: none;
  z-index: 0;
}

/* All the crosshairs that belong to the frame share one drawing */
.section::before,
.section::after,
.section-frame::before,
.section-frame::after,
.page-hero::before,
.page-hero::after,
.detail-head::before,
.detail-head::after,
.hero::before,
.hero::after,
.tagline-strip::before,
.tagline-strip::after,
.footer::before,
.footer::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--marker), var(--marker)) center / 1px 100% no-repeat,
    linear-gradient(var(--marker), var(--marker)) center / 100% 1px no-repeat;
  pointer-events: none;
  z-index: 2;
}

.section::before,
.page-hero::before,
.detail-head::before,
.hero::before,
.tagline-strip::before { bottom: 0; left: var(--frame-x);  transform: translate(-50%, 50%); }

.section::after,
.page-hero::after,
.detail-head::after,
.hero::after,
.tagline-strip::after  { bottom: 0; right: var(--frame-x); transform: translate(50%, 50%); }

.section-frame::before { top: 0; left: 0;  transform: translate(-50%, -50%); }
.section-frame::after  { top: 0; right: 0; transform: translate(50%, -50%); }

/* The footer is dark; its markers sit inside the block so the yellow
   half never lands on white. */
.footer::before { top: 0; left: var(--frame-x);  transform: translate(-50%, 0); }
.footer::after  { top: 0; right: var(--frame-x); transform: translate(50%, 0); }

/* ========================================
   SECTION HEAD
   Eyebrow on top; big title on the left; lead and link on the right.
   ======================================== */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: end;
  gap: 20px 64px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.shead__eyebrow {
  grid-column: 1 / -1;
}

.shead__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: 1;
  font-size: clamp(36px, 4.8vw, 64px);
  color: var(--text-primary);
  text-wrap: balance;
}

.shead__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 6px;
}

.shead__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* The small quiet title (legacy — still used by internal pages) */
.section__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mono-ls);
  color: var(--eyebrow);
  margin-bottom: 32px;
}

.section__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.section__header .section__title {
  margin-bottom: 0;
}

.section__header .section__title::after {
  display: none;
}

/* A group label inside a section — mono, with a count and a rule */
.group-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--text-primary);
}

.group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.group-label__count {
  color: var(--text-muted);
}

* + .group-label {
  margin-top: clamp(48px, 6vw, 72px);
}

/* ========================================
   PAGE HERO (list pages)
   ======================================== */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(56px, 7vw, 96px)) 0 clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--border);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.page-hero__crumbs a:hover {
  color: var(--text-primary);
  background: var(--accent);
}

.page-hero__crumbs span[aria-hidden] {
  color: var(--text-faint);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 64px;
}

.page-hero__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mono-ls);
  margin-bottom: 22px;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: var(--display-lh);
  font-size: clamp(48px, 8vw, 112px);
  color: var(--text-primary);
  margin-bottom: 24px;
}

.page-hero__desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 560px;
}

/* Live counts next to the title */
.page-hero__stats {
  display: flex;
  border: 1px solid var(--border-strong);
  background: var(--bg-primary);
}

.page-hero__stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  min-width: 118px;
  padding: 18px 22px 16px;
  border-right: 1px solid var(--border);
}

.page-hero__stat:last-child {
  border-right: none;
}

.page-hero__stat:first-child {
  background: var(--accent);
}

.page-hero__stat dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-hero__stat:first-child dt {
  color: var(--c-dark);
}

.page-hero__stat dd {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: 44px;
  line-height: 1;
  color: var(--text-primary);
}

/* Photo backdrop (kept from step 05 — opt in with hero_image) */
.page-hero--photo {
  overflow: hidden;
}

.page-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.06) blur(2px);
  transform: scale(1.06);
}

.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.15) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.1) 55%, rgba(255,255,255,0.75) 100%);
}

.page-hero--photo::before,
.page-hero--photo .section-frame::before { transform: translate(-50%, 0); }
.page-hero--photo::after,
.page-hero--photo .section-frame::after  { transform: translate(50%, 0); }

/* ========================================
   BACK LINK
   ======================================== */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: clamp(28px, 4vw, 44px);
  transition: color var(--t) ease;
}

.page-back .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--t) var(--ease);
}

.page-back:hover {
  color: var(--text-primary);
}

.page-back:hover .icon {
  transform: translateX(-3px);
}

/* ========================================
   FOOTER — the page closes on dark
   ======================================== */
.footer {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 104px) 0 28px;
}

.footer__pattern {
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 85% 20%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 70% at 85% 20%, #000 10%, transparent 70%);
}

.footer__inner {
  position: relative;
  z-index: 1;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.7fr));
  gap: 48px;
  padding-bottom: clamp(48px, 6vw, 72px);
}

.footer__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer__pitch {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  color: var(--text-primary);
  max-width: 17em;
  margin-bottom: 8px;
}

.footer__head {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--c-yellow);
  margin-bottom: 18px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--text-secondary);
  transition: color var(--t) ease;
}

.footer__col a .icon {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

.footer__col a:hover {
  color: var(--c-yellow);
}

.footer__lang {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.footer__now li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
}

.footer__now .icon {
  width: 15px;
  height: 15px;
  color: var(--c-yellow);
}

/* The giant name — yellow on dark is the one place yellow is type at scale */
.footer__wordmark {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(64px, 15.5vw, 228px);
  line-height: 0.82;
  color: var(--c-yellow);
  white-space: nowrap;
  margin: 0 0 clamp(20px, 3vw, 36px) -0.04em;
  user-select: none;
}

.footer__wordmark-dot {
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.06em;
  background: var(--c-white);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.footer__top-link .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--t) var(--ease);
}

.footer__top-link:hover {
  color: var(--c-yellow);
}

.footer__top-link:hover .icon {
  transform: translateY(-3px);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1080px) {
  .nav__inner {
    gap: 24px;
  }

  .nav__links ul {
    gap: 22px;
  }

  .footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__intro {
    grid-column: 1 / -1;
  }
}

@media (min-width: 901px) {
  .nav__panel {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__burger {
    display: block;
  }

  .shead {
    grid-template-columns: 1fr;
  }

  .page-hero__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-hero__stats {
    width: 100%;
  }

  .page-hero__stat {
    flex: 1;
    min-width: 0;
    padding: 14px 14px 12px;
  }

  .page-hero__stat dd {
    font-size: 34px;
  }

  .footer__coords {
    display: none;
  }
}

@media (max-width: 600px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }

  .footer__bottom {
    flex-wrap: wrap;
  }
}
/* ============================================================
   home.css — the homepage, top to bottom.
   ============================================================ */

/* ========================================
   HERO — shared structure

   One markup, three looks (data-look on .hero):
     split      name + tagline left, portrait right
     blueprint  the portrait as an annotated drawing
     statement  one big sentence with the portrait inline
   Every element is always in the DOM; each look shows what it needs.
   ======================================== */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 112px)) 0 clamp(64px, 8vw, 112px);
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg .pat {
  opacity: 0.8;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.hero__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.hero__name {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: var(--display-lh);
  font-size: clamp(64px, 10.5vw, 156px);
  color: var(--text-primary);
}

.hero__name > span {
  display: block;
}

/* The second line steps in, like a set line of type */
.hero__name > span + span {
  padding-left: 0.5em;
}

.hero__statement {
  display: none;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: 1.02;
  color: var(--text-primary);
  text-wrap: balance;
}

.hero__inline-photo {
  display: none;
}

.hero__lead {
  max-width: 44ch;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 36px;
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border-strong);
}

.hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 0 0;
}

.hero__facts li + li {
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.hero__fact-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__fact-v {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}

/* Portrait */
.hero__portrait {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 440px;
  justify-self: end;
}

.hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--c-dark);
  background: var(--bg-secondary);
}

/* The yellow block the photo sits on */
.hero__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(18px, 18px);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  z-index: -1;
  transition: transform 0.5s var(--ease);
}

.hero__portrait:hover .hero__frame::before {
  transform: translate(10px, 10px);
}

.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.6s ease;
}

.hero__portrait:hover .hero__frame img {
  filter: grayscale(0);
}

/* The caption pinned to the photo's lower edge */
.hero__tag {
  position: absolute;
  left: -1px;
  bottom: 0;
  transform: translateY(50%);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.hero__notes,
.hero__dim {
  display: none;
}

/* ---- Look: split (the default structure above) ---- */

/* ---- Look: blueprint ---------------------------------------------------- */
.hero[data-look="blueprint"] .hero__bg .pat {
  opacity: 1;
}

.hero[data-look="blueprint"] .hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hero[data-look="blueprint"] .hero__name {
  font-size: clamp(60px, 8.6vw, 132px);
}

.hero[data-look="blueprint"] .hero__facts {
  display: none;
}

.hero[data-look="blueprint"] .hero__portrait {
  max-width: 340px;
  justify-self: center;
  margin-bottom: 44px;
}

.hero[data-look="blueprint"] .hero__frame::before {
  transform: none;
  background: transparent;
  border-style: dashed;
  inset: -14px;
}

.hero[data-look="blueprint"] .hero__notes {
  display: block;
}

.hero__note {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--c-dark);
}

.hero__note-num {
  color: var(--text-muted);
}

/* Leader line + the dot where it lands on the drawing */
.hero__note::before,
.hero__note::after {
  content: '';
  position: absolute;
  top: 50%;
}

.hero__note::before {
  height: 1px;
  width: var(--lead, 56px);
  background: var(--c-dark);
}

.hero__note::after {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
}

/* Notes on the left of the photo point right, and vice versa */
.hero__note--l::before { left: 100%; }
.hero__note--l::after  { left: calc(100% + var(--lead, 56px) - 3px); }
.hero__note--r::before { right: 100%; }
.hero__note--r::after  { right: calc(100% + var(--lead, 56px) - 3px); }

.hero__note:nth-child(1) { top: 8%;     right: calc(100% - 40px); --lead: 70px; }
.hero__note:nth-child(2) { top: 30%;    left: calc(100% - 70px);  --lead: 56px; }
.hero__note:nth-child(3) { top: 58%;    right: calc(100% - 56px); --lead: 80px; }
.hero__note:nth-child(4) { bottom: 12%; left: calc(100% - 84px);  --lead: 64px; }

/* Dimension line under the drawing */
.hero[data-look="blueprint"] .hero__dim {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -44px;
  height: 1px;
  background: var(--c-dark);
}

.hero__dim::before,
.hero__dim::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 1px;
  height: 13px;
  background: var(--c-dark);
}

.hero__dim::before { left: 0; }
.hero__dim::after  { right: 0; }

.hero__dim span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 8px;
  background: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}

.hero[data-look="blueprint"] .hero__tag {
  display: none;
}

/* ---- Look: statement ---------------------------------------------------- */
.hero[data-look="statement"] .hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

.hero[data-look="statement"] .hero__portrait {
  display: none;
}

.hero[data-look="statement"] .hero__name {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 17px;
  line-height: 1.3;
  display: flex;
  gap: 0.3em;
}

.hero[data-look="statement"] .hero__name > span + span {
  padding-left: 0;
}

.hero[data-look="statement"] .hero__eyebrow {
  margin-bottom: 20px;
}

.hero[data-look="statement"] .hero__statement {
  display: block;
  margin-top: 22px;
  font-size: clamp(44px, 7.4vw, 112px);
  max-width: 14.5em;
}

.hero[data-look="statement"] .hero__inline-photo {
  display: inline-block;
  position: relative;
  width: 1.5em;
  height: 0.82em;
  margin: 0 0.12em;
  vertical-align: -0.04em;
  border: 1px solid var(--c-dark);
  background: var(--c-yellow);
  overflow: hidden;
}

.hero__inline-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: grayscale(1);
  transition: filter 0.5s ease, transform 0.6s var(--ease);
}

.hero__statement:hover .hero__inline-photo img {
  filter: grayscale(0);
  transform: scale(1.06);
}

.hero[data-look="statement"] .hero__lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 64px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--border-strong);
}

.hero[data-look="statement"] .hero__lead {
  margin-top: 0;
}

.hero[data-look="statement"] .hero__actions {
  margin-top: 0;
}

.hero[data-look="statement"] .hero__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  margin-top: 36px;
}

/* ========================================
   TICKER — topics, sliding
   ======================================== */
.ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--c-dark);
  border-bottom: 1px solid var(--c-dark);
  background: var(--bg-primary);
}

.ticker__label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 18px 0 var(--side-padding);
  background: var(--c-dark);
  color: var(--c-yellow);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticker__label::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 64px;
  background: linear-gradient(90deg, var(--bg-primary), transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 70s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__run {
  display: flex;
  align-items: center;
}

.ticker__run li {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 16px 30px 16px 0;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-primary);
}

.ticker__run li::after {
  content: '';
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--c-dark), var(--c-dark)) center / 1px 100% no-repeat,
    linear-gradient(var(--c-dark), var(--c-dark)) center / 100% 1px no-repeat;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ========================================
   PHILOSOPHY STRIP — the one full-width yellow band
   ======================================== */
.tagline-strip {
  position: relative;
  background: var(--accent);
  border-top: 1px solid var(--c-dark);
  border-bottom: 1px solid var(--c-dark);
  --border: rgba(26, 25, 8, 0.22);
  --grid-line: rgba(26, 25, 8, 0.08);
}

.tagline-strip + .section {
  border-top: none;
}

.tagline-strip .pat {
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
}

.tagline-strip__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 32px;
  padding: clamp(48px, 7vw, 88px) 0;
}

.tagline-strip__mark {
  width: clamp(44px, 5vw, 64px);
  height: clamp(44px, 5vw, 64px);
  color: var(--c-dark);
}

.tagline-strip__mark .icon {
  width: 100%;
  height: 100%;
  stroke-width: 1.2;
}

.tagline-strip__text {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(26px, 3.3vw, 46px);
  line-height: 1.14;
  color: var(--c-dark);
  max-width: 24em;
  text-wrap: balance;
}

.tagline-strip__by {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: rgba(26, 25, 8, 0.7);
  margin-top: 12px;
}

/* ========================================
   SERVICES — "What I do"

   Looks: grid | rows | feature. The whole card is a link via a
   stretched ::after on .svc__link.
   ======================================== */
.services {
  display: grid;
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-card);
  transition: background var(--t) ease;
}

.svc__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.svc__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: background var(--t) ease, color var(--t) ease;
}

.svc__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
  color: var(--text-primary);
}

.svc__desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.svc__points {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.svc__points li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}

.svc__points li::before {
  content: '+';
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.svc__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
}

.svc__link .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--t) var(--ease);
}

.svc__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.svc:hover .svc__link .icon {
  transform: translateX(4px);
}

.svc__link span {
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
  transition: background var(--t) ease;
}

/* ---- Look: grid ---- */
.services[data-look="grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.services[data-look="grid"] .svc {
  padding: clamp(28px, 3.5vw, 44px);
}

.services[data-look="grid"] .svc:hover {
  background: var(--bg-card-hover);
}

.services[data-look="grid"] .svc:hover .itile {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-dark);
}

.services[data-look="grid"] .svc:hover .svc__link span {
  background: var(--accent);
}

/* ---- Look: rows ---- */
.services[data-look="rows"] {
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--c-dark);
}

.services[data-look="rows"] .svc {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.25fr) 56px;
  align-items: center;
  gap: 16px 32px;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--c-dark);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
}

.services[data-look="rows"] .svc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.services[data-look="rows"] .svc:hover::before {
  transform: scaleX(1);
}

.services[data-look="rows"] .svc__top {
  display: contents;
}

.services[data-look="rows"] .svc__top .itile,
.services[data-look="rows"] .svc__points {
  display: none;
}

.services[data-look="rows"] .svc__num {
  font-size: 13px;
  padding-left: 4px;
}

.services[data-look="rows"] .svc__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.02;
}

.services[data-look="rows"] .svc__link {
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  justify-content: center;
  border: 1px solid var(--c-dark);
  background: var(--bg-primary);
}

.services[data-look="rows"] .svc__link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.services[data-look="rows"] .svc:hover .svc__link {
  background: var(--c-dark);
  color: var(--c-yellow);
}

.services[data-look="rows"] .svc__link .icon {
  transform: rotate(-45deg);
}

.services[data-look="rows"] .svc:hover .svc__link .icon {
  transform: rotate(0deg);
}

/* ---- Look: feature ---- */
.services[data-look="feature"] {
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.services[data-look="feature"] .svc {
  padding: clamp(26px, 3vw, 38px);
}

.services[data-look="feature"] .svc:hover {
  background: var(--bg-card-hover);
}

.services[data-look="feature"] .svc:first-child {
  grid-row: span 2;
  padding: clamp(32px, 4vw, 52px);
  overflow: hidden;
  isolation: isolate;
}

.services[data-look="feature"] .svc:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 100% 0%, #000 10%, transparent 70%);
}

.services[data-look="feature"] .svc:first-child:hover {
  background: var(--c-dark-2);
}

.services[data-look="feature"] .svc:first-child .svc__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.02;
  margin-top: auto;
}

.services[data-look="feature"] .svc:first-child .itile {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-yellow);
  width: 56px;
  height: 56px;
}

.services[data-look="feature"] .svc:not(:first-child) .svc__points {
  display: none;
}

.services[data-look="feature"] .svc:last-child {
  grid-column: span 2;
}

/* ========================================
   NUMBERS — stats band
   ======================================== */
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--c-dark);
  background: var(--bg-primary);
}

.numbers__item {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 14px;
  padding: clamp(22px, 3vw, 34px);
  border-right: 1px solid var(--border);
}

.numbers__item:last-child {
  border-right: none;
}

.numbers__item:first-child {
  background: var(--accent);
  border-right-color: var(--c-dark);
}

.numbers__item dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.numbers__item:first-child dt {
  color: var(--c-dark);
}

.numbers__item dd {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(52px, 6.4vw, 92px);
  line-height: 0.9;
  color: var(--c-dark);
}

.numbers__item dd sup {
  font-size: 0.45em;
  vertical-align: 0.9em;
  margin-left: 0.04em;
}

.numbers__venues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin-top: 22px;
  font-size: 15px;
  color: var(--text-secondary);
}

.numbers__venues .eyebrow {
  margin-right: 18px;
}

.numbers__venues span.numbers__venue {
  font-weight: 600;
  color: var(--text-primary);
}

.numbers__venues span.numbers__venue + span.numbers__venue::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 14px;
  vertical-align: 0.2em;
  background: var(--c-dark);
}

/* ========================================
   ACADEMY STRIP — the Persian academy, one line
   ======================================== */
.academy-strip {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--c-dark);
  background: var(--bg-card);
  transition: background var(--t) ease;
}

.academy-strip__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.academy-strip__text b {
  font-weight: 600;
  color: var(--text-primary);
}

.academy-strip__fa {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.academy-strip > .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease);
}

.academy-strip:hover {
  background: var(--c-yellow);
}

.academy-strip:hover .academy-strip__text {
  color: var(--c-dark);
}

.academy-strip:hover > .icon {
  transform: translate(3px, -3px);
}

/* ========================================
   TIMELINE — every talk and workshop by year
   ======================================== */
.timeline__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tl-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tl-key::before,
.tl-item__mark {
  content: '';
  width: 11px;
  height: 11px;
  flex: none;
  border: 1px solid var(--c-dark);
  background: var(--c-dark);
}

.tl-key--workshop::before,
.tl-item--workshop .tl-item__mark {
  background: var(--c-yellow);
}

.tl-key--panel::before,
.tl-item--panel .tl-item__mark {
  background: var(--bg-primary);
}

.timeline__scroll {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--c-dark) transparent;
  padding-bottom: 12px;
}

.timeline__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  min-width: 100%;
}

.tl-year {
  scroll-snap-align: start;
  position: relative;
  padding-right: 24px;
}

.tl-year__label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  color: var(--text-primary);
  padding-bottom: 18px;
}

.tl-year__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-left: 8px;
  vertical-align: 0.6em;
}

/* The axis, with a crosshair tick where each year begins */
.tl-year__axis {
  position: relative;
  height: 1px;
  background: var(--c-dark);
  margin: 0 -24px 22px 0;
}

.tl-year__axis::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--c-dark), var(--c-dark)) center / 1px 100% no-repeat,
    linear-gradient(var(--c-dark), var(--c-dark)) center / 100% 1px no-repeat;
}

.tl-year:last-child .tl-year__axis {
  margin-right: 0;
}

.tl-year__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-item {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px 14px 13px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color var(--t) ease, box-shadow var(--t) ease, transform var(--t) var(--ease);
}

.tl-item__mark {
  margin-top: 5px;
}

.tl-item__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tl-item__meta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.tl-item:hover {
  border-color: var(--c-dark);
  box-shadow: 4px 4px 0 0 var(--c-yellow);
  transform: translate(-2px, -2px);
}

/* ========================================
   ABOUT TEASER
   ======================================== */
.about-teaser {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.about-teaser__photo {
  position: relative;
  margin: 0;
}

.about-teaser__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--c-dark);
  background: var(--bg-secondary);
}

.about-teaser__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.6s ease, transform 0.8s var(--ease);
}

.about-teaser__photo:hover img {
  filter: grayscale(0);
  transform: scale(1.03);
}

.about-teaser__photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.about-teaser__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  color: var(--text-primary);
  margin: 18px 0 28px;
}

.about-teaser__text p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 60ch;
}

.about-teaser__text p:first-child {
  font-size: 19px;
  color: var(--text-primary);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 32px 0 36px;
  border-top: 1px solid var(--c-dark);
}

.facts__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--border);
}

.facts__row:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.facts__row dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.facts__row dt .icon {
  width: 13px;
  height: 13px;
}

.facts__row dd {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.about-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

/* ========================================
   COMMUNITY — writing & channels
   ======================================== */
.community {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.ccard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 1px var(--c-dark);
}

.ccard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ccard:hover .itile {
  background: var(--c-dark);
  color: var(--c-yellow);
}

.ccard__platform {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ccard__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 20px;
  line-height: 1.2;
  color: var(--text-primary);
}

.ccard__title[lang="fa"] {
  font-size: 19px;
  font-weight: 700;
}

.ccard__desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
}

.ccard__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.ccard__foot .icon {
  width: 16px;
  height: 16px;
  color: var(--text-primary);
  transition: transform var(--t) var(--ease);
}

.ccard:hover .ccard__foot .icon {
  transform: translate(2px, -2px);
}

/* ========================================
   CTA PANEL — a dark object inside a white section
   ======================================== */
.cta-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: 40px 64px;
  padding: clamp(40px, 6vw, 80px);
  border: 1px solid var(--c-dark);
}

.cta-panel .pat {
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 100% 100%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 90% at 100% 100%, #000 10%, transparent 70%);
}

.cta-panel > *:not(.pat):not(.xh4) {
  position: relative;
  z-index: 1;
}

.cta-panel__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  color: var(--text-primary);
  margin-top: 18px;
  text-wrap: balance;
}

.cta-panel__text {
  margin-top: 20px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.cta-panel__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.cta-panel__actions .btn {
  justify-content: space-between;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1080px) {
  .community {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero[data-look="blueprint"] .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .hero__note:nth-child(1),
  .hero__note:nth-child(3) { right: calc(100% - 72px); }
  .hero__note:nth-child(2),
  .hero__note:nth-child(4) { left: calc(100% - 120px); }
}

@media (max-width: 900px) {
  .hero__inner,
  .hero[data-look="blueprint"] .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__portrait,
  .hero[data-look="blueprint"] .hero__portrait {
    order: -1;
    max-width: 300px;
    justify-self: start;
  }

  .hero__facts {
    grid-template-columns: 1fr;
  }

  .hero__facts li + li {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .hero__facts li {
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
  }

  /* Notes leave the drawing and become a list of labels */
  .hero[data-look="blueprint"] .hero__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 44px;
  }

  .hero[data-look="blueprint"] .hero__note {
    position: static;
  }

  .hero[data-look="blueprint"] .hero__portrait {
    margin-bottom: 0;
  }

  .hero__note::before,
  .hero__note::after,
  .hero[data-look="blueprint"] .hero__dim {
    display: none;
  }

  .hero[data-look="blueprint"] .hero__tag {
    display: block;
  }

  .hero[data-look="statement"] .hero__lower {
    grid-template-columns: 1fr;
  }

  .services[data-look="grid"],
  .services[data-look="feature"] {
    grid-template-columns: 1fr;
  }

  .services[data-look="feature"] .svc:first-child {
    grid-row: auto;
  }

  .services[data-look="feature"] .svc:last-child {
    grid-column: auto;
  }

  .services[data-look="rows"] .svc {
    grid-template-columns: 44px minmax(0, 1fr) 48px;
  }

  .services[data-look="rows"] .svc__desc {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .services[data-look="rows"] .svc__link {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .numbers__item:nth-child(2) {
    border-right: none;
  }

  .numbers__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .about-teaser {
    grid-template-columns: 1fr;
  }

  .about-teaser__photo {
    max-width: 420px;
  }

  .cta-panel {
    grid-template-columns: 1fr;
  }

  .tagline-strip__inner {
    grid-template-columns: 1fr;
  }

  .tagline-strip__by {
    grid-column: 1;
  }
}

@media (max-width: 600px) {
  .hero__name {
    font-size: clamp(56px, 17vw, 80px);
  }

  .hero__frame::before {
    transform: translate(10px, 10px);
  }

  .community {
    grid-template-columns: 1fr;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .facts__row:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }

  .ticker__label {
    display: none;
  }

  .academy-strip {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .academy-strip__fa,
  .academy-strip > .icon {
    display: none;
  }
}
/* ============================================================
   cards.css — talk cards, workshop cards, library cards.

   Talk and workshop cards are one markup each (partials/cards/)
   rendered inside a list wrapper that carries the look:
     .talks[data-look]      ledger | poster | index | ticket
     .workshops[data-look]  photo | syllabus | split
   ============================================================ */

/* ========================================
   SHARED CARD PARTS
   ======================================== */
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
}

.card-media__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Images sit absolutely so a photo never decides a card's height */
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  transition: filter 0.5s ease, transform 0.7s var(--ease);
}

a:hover .card-media img {
  filter: grayscale(0);
  transform: scale(1.035);
}

/* No photo yet — a hatched plate with the section's icon */
.card-media__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  background-color: var(--bg-secondary);
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
}

.card-media__empty .icon {
  width: 28px;
  height: 28px;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.card-cta .icon {
  width: 15px;
  height: 15px;
  transition: transform var(--t) var(--ease);
}

a:hover .card-cta .icon {
  transform: translateX(4px);
}

/* The asset icons on a talk card — "has video / has slides" at a glance */
.tcard__assets {
  display: inline-flex;
  gap: 6px;
  color: var(--text-muted);
}

.tcard__assets .icon {
  width: 15px;
  height: 15px;
}

/* ========================================
   TALK CARD — base
   ======================================== */
.talks {
  display: grid;
}

.tcard {
  position: relative;
  display: grid;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background var(--t) ease, box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.tcard[hidden] {
  display: none;
}

.tcard__date {
  display: flex;
  flex-direction: column;
}

.tcard__month {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tcard__year {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: 1;
}

.tcard__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.tcard__conf {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.tcard__type {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 7px;
  border: 1px solid var(--border);
}

.tcard__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.25;
  color: var(--text-primary);
  text-wrap: balance;
}

.tcard__desc {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tcard__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
}

.tcard__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.tcard__loc .icon {
  width: 14px;
  height: 14px;
}

.tcard__stub {
  display: none;
}

/* ---- Look: ledger -------------------------------------------------------- */
.talks[data-look="ledger"] {
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.talks[data-look="ledger"] .tcard {
  grid-template-columns: 168px minmax(0, 1fr) minmax(200px, 280px);
}

.talks[data-look="ledger"] .tcard__date {
  order: 0;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 26px;
  background: var(--c-dark);
  color: var(--c-white);
}

.talks[data-look="ledger"] .tcard__month {
  color: var(--c-yellow);
}

.talks[data-look="ledger"] .tcard__year {
  font-size: 52px;
  transition: color var(--t) ease;
}

.talks[data-look="ledger"] .tcard__body {
  order: 1;
  padding: 30px 34px;
}

.talks[data-look="ledger"] .card-media {
  order: 2;
  min-height: 200px;
  border-left: 1px solid var(--c-dark);
}

.talks[data-look="ledger"] .tcard:hover {
  background: var(--bg-card-hover);
}

.talks[data-look="ledger"] .tcard:hover .tcard__year {
  color: var(--c-yellow);
}

/* ---- Look: poster -------------------------------------------------------- */
.talks[data-look="poster"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.talks[data-look="poster"] .tcard {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  border: 1px solid var(--c-dark);
}

.talks[data-look="poster"] .card-media {
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--c-dark);
}

.talks[data-look="poster"] .tcard__date {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  background: var(--c-dark);
  color: var(--c-white);
}

.talks[data-look="poster"] .tcard__month {
  color: var(--c-yellow);
}

.talks[data-look="poster"] .tcard__year {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.talks[data-look="poster"] .tcard__body {
  padding: 22px 22px 20px;
}

.talks[data-look="poster"] .tcard__desc {
  margin-bottom: 20px;
}

.talks[data-look="poster"] .tcard__foot {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.talks[data-look="poster"] .tcard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 1px var(--c-dark);
}

/* ---- Look: index --------------------------------------------------------- */
.talks[data-look="index"] {
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-dark);
}

.talks[data-look="index"] .tcard {
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 220px) 84px 40px;
  grid-template-areas: "date title conf type cta";
  align-items: center;
  gap: 8px 28px;
  padding: 24px 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.talks[data-look="index"] .tcard__body,
.talks[data-look="index"] .tcard__meta,
.talks[data-look="index"] .tcard__foot {
  display: contents;
}

.talks[data-look="index"] .tcard__date  { grid-area: date; }
.talks[data-look="index"] .tcard__title { grid-area: title; }
.talks[data-look="index"] .tcard__conf  { grid-area: conf; }
.talks[data-look="index"] .tcard__type  { grid-area: type; justify-self: start; }
.talks[data-look="index"] .card-cta     { grid-area: cta; justify-self: end; }

.talks[data-look="index"] .tcard__month,
.talks[data-look="index"] .tcard__desc,
.talks[data-look="index"] .tcard__loc,
.talks[data-look="index"] .tcard__assets,
.talks[data-look="index"] .card-cta span {
  display: none;
}

.talks[data-look="index"] .tcard__year {
  font-size: 30px;
  color: var(--text-muted);
  transition: color var(--t) ease;
}

.talks[data-look="index"] .tcard__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.12;
  transition: transform 0.35s var(--ease);
}

.talks[data-look="index"] .tcard__conf {
  color: var(--text-secondary);
}

.talks[data-look="index"] .card-cta {
  width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--c-dark);
  transition: background var(--t) ease, color var(--t) ease;
}

/* The photo floats in beside the row on hover */
.talks[data-look="index"] .card-media {
  position: absolute;
  top: 50%;
  right: 22%;
  z-index: 5;
  width: 230px;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--c-dark);
  box-shadow: 8px 8px 0 0 var(--c-yellow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) rotate(-3deg) scale(0.92);
  transition: opacity 0.3s ease, transform 0.45s var(--ease);
}

.talks[data-look="index"] .card-media img {
  filter: none;
  transform: none;
}

.talks[data-look="index"] .tcard:hover {
  background: var(--bg-secondary);
  z-index: 4;
}

.talks[data-look="index"] .tcard:hover .card-media {
  opacity: 1;
  transform: translateY(-50%) rotate(-3deg) scale(1);
}

.talks[data-look="index"] .tcard:hover .tcard__title {
  transform: translateX(8px);
}

.talks[data-look="index"] .tcard:hover .tcard__year {
  color: var(--text-primary);
}

.talks[data-look="index"] .tcard:hover .card-cta {
  background: var(--c-yellow);
}

/* ---- Look: ticket -------------------------------------------------------- */
.talks[data-look="ticket"] {
  --notch-bg: var(--bg-primary);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.section--gray .talks[data-look="ticket"] {
  --notch-bg: var(--c-50);
}

.talks[data-look="ticket"] .tcard {
  grid-template-columns: 112px minmax(0, 1fr) 58px;
  border: 1px solid var(--c-dark);
}

.talks[data-look="ticket"] .card-media {
  display: none;
}

.talks[data-look="ticket"] .tcard__date {
  justify-content: space-between;
  padding: 20px 16px 18px;
  background: var(--c-yellow);
  color: var(--c-dark);
  border-right: 2px dashed var(--c-dark);
}

.talks[data-look="ticket"] .tcard__year {
  font-size: 40px;
}

/* Square notches where the perforation meets the edges */
.talks[data-look="ticket"] .tcard::before,
.talks[data-look="ticket"] .tcard::after {
  content: '';
  position: absolute;
  left: 112px;
  width: 16px;
  height: 9px;
  transform: translateX(-50%);
  background: var(--notch-bg);
  border: 1px solid var(--c-dark);
  z-index: 2;
}

.talks[data-look="ticket"] .tcard::before {
  top: -1px;
  border-top-color: var(--notch-bg);
}

.talks[data-look="ticket"] .tcard::after {
  bottom: -1px;
  border-bottom-color: var(--notch-bg);
}

.talks[data-look="ticket"] .tcard__body {
  padding: 20px 22px 18px;
}

.talks[data-look="ticket"] .tcard__desc {
  -webkit-line-clamp: 2;
  font-size: 14px;
}

.talks[data-look="ticket"] .tcard__assets,
.talks[data-look="ticket"] .card-cta span {
  display: none;
}

.talks[data-look="ticket"] .tcard__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-left: 1px dashed var(--border);
}

.tcard__barcode {
  width: 26px;
  flex: 1;
  background: repeating-linear-gradient(180deg,
    var(--c-dark) 0 2px, transparent 2px 4px,
    var(--c-dark) 4px 5px, transparent 5px 8px,
    var(--c-dark) 8px 11px, transparent 11px 12px,
    var(--c-dark) 12px 13px, transparent 13px 16px);
}

.tcard__code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.talks[data-look="ticket"] .tcard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--c-dark);
}

/* ========================================
   WORKSHOP CARD — base
   ======================================== */
.workshops {
  display: grid;
}

.wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background var(--t) ease, box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.wcard__sticker {
  position: absolute;
  left: 16px;
  bottom: 0;
  z-index: 2;
  transform: translateY(50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--c-yellow);
  color: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.wcard__sticker .icon {
  width: 14px;
  height: 14px;
}

.wcard__big {
  display: none;
}

.wcard__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wcard__spec-i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.wcard__spec-i .icon {
  width: 13px;
  height: 13px;
}

.wcard__spec-i:first-child {
  background: var(--c-dark);
  color: var(--c-yellow);
  border-color: var(--c-dark);
}

.wcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.wcard__host {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.wcard__host .icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.wcard__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.25;
  color: var(--text-primary);
  text-wrap: balance;
}

.wcard__desc {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.wcard__where {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* ---- Look: photo --------------------------------------------------------- */
.workshops[data-look="photo"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.workshops[data-look="photo"] .wcard {
  border: 1px solid var(--c-dark);
}

.workshops[data-look="photo"] .card-media {
  aspect-ratio: 4 / 3;
  overflow: visible;
  border-bottom: 1px solid var(--c-dark);
}

.workshops[data-look="photo"] .wcard__spec {
  display: none;
}

.workshops[data-look="photo"] .wcard__body {
  padding: 34px 22px 20px;
}

.workshops[data-look="photo"] .wcard__desc {
  margin-bottom: 20px;
}

.workshops[data-look="photo"] .wcard__foot {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.workshops[data-look="photo"] .wcard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 1px var(--c-dark);
}

/* ---- Look: syllabus ------------------------------------------------------ */
.workshops[data-look="syllabus"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.workshops[data-look="syllabus"] .card-media,
.workshops[data-look="syllabus"] .wcard__sticker {
  display: none;
}

.workshops[data-look="syllabus"] .wcard {
  padding: 28px 26px 24px;
  overflow: hidden;
}

.workshops[data-look="syllabus"] .wcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-yellow);
  box-shadow: 1px 0 0 var(--c-dark);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}

.workshops[data-look="syllabus"] .wcard__spec {
  order: -1;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.workshops[data-look="syllabus"] .wcard:hover {
  background: var(--bg-card-hover);
}

.workshops[data-look="syllabus"] .wcard:hover::before {
  transform: scaleY(1);
}

/* ---- Look: split --------------------------------------------------------- */
.workshops[data-look="split"] {
  grid-template-columns: 1fr;
  gap: 18px;
}

.workshops[data-look="split"] .wcard {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(200px, 300px);
  grid-template-areas: "big body media";
  border: 1px solid var(--c-dark);
}

.workshops[data-look="split"] .card-media {
  grid-area: media;
  border-left: 1px solid var(--c-dark);
  min-height: 100%;
}

.workshops[data-look="split"] .wcard__sticker {
  display: none;
}

.workshops[data-look="split"] .wcard__big {
  grid-area: big;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border-right: 1px solid var(--c-dark);
  background-color: var(--bg-secondary);
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
  transition: background-color var(--t) ease;
}

.wcard__big-n {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: 96px;
  line-height: 0.85;
  color: var(--c-dark);
}

.wcard__big-u {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-dark);
}

.workshops[data-look="split"] .wcard__body {
  grid-area: body;
  padding: 26px 30px 22px;
}

.workshops[data-look="split"] .wcard__spec {
  order: 3;
  margin-top: 18px;
}

.workshops[data-look="split"] .wcard__spec-i:first-child {
  display: none;
}

.workshops[data-look="split"] .wcard__body > .wcard__foot {
  order: 4;
}

.workshops[data-look="split"] .wcard:hover .wcard__big {
  background-color: var(--c-yellow);
}

.workshops[data-look="split"] .wcard:hover {
  box-shadow: 6px 6px 0 0 var(--c-dark);
  transform: translate(-3px, -3px);
}

/* ========================================
   FILTERS — a row of toggle buttons
   ======================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.filters__label {
  margin-right: 8px;
}

.filters__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color var(--t) ease, color var(--t) ease, background var(--t) ease;
}

.filters__btn span {
  color: var(--text-faint);
}

.filters__btn:hover {
  border-color: var(--c-dark);
  color: var(--text-primary);
}

.filters__btn.is-active {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-yellow);
}

.filters__btn.is-active span {
  color: rgba(247, 255, 98, 0.6);
}

/* ========================================
   LIBRARY CARD — with a generated cover when there is no image
   ======================================== */
.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.lcard {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.lcard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 1px var(--c-dark);
}

.lcard__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-bottom: 1px solid var(--c-dark);
}

.lcard__cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The generated cover: a spine, a category, the title set large */
.lcard__gen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 24px 24px 40px;
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
}

.lcard__gen::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  border-right: 1px solid currentColor;
  opacity: 0.35;
}

.lcard__gen-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lcard__gen-cat .icon {
  width: 16px;
  height: 16px;
}

.lcard__gen-title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  text-wrap: balance;
  transition: transform 0.5s var(--ease);
}

.lcard:hover .lcard__gen-title {
  transform: translateY(-4px);
}

.lcard__gen-author {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.lcard__cover--t0 { background: var(--c-dark); color: var(--c-white); --hatch: rgba(247, 255, 98, 0.12); }
.lcard__cover--t0 .lcard__gen-cat { color: var(--c-yellow); }
.lcard__cover--t1 { background: var(--c-yellow); color: var(--c-dark); --hatch: rgba(26, 25, 8, 0.1); }
.lcard__cover--t2 { background: var(--c-50); color: var(--c-dark); }

.lcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 24px;
}

.lcard__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lcard__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 19px;
  line-height: 1.3;
  color: var(--text-primary);
}

.lcard__author {
  font-size: 14px;
  color: var(--text-secondary);
}

.lcard__excerpt {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination */
.library-pagination {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

.library-pagination--top {
  margin-top: 0;
  margin-bottom: 40px;
}

.lib-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lib-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color var(--t), border-color var(--t), background var(--t);
}

a.lib-pagination__item:hover {
  color: var(--text-primary);
  border-color: var(--c-dark);
}

.lib-pagination__item--current {
  background: var(--accent);
  color: var(--c-dark);
  border-color: var(--c-dark);
  font-weight: 600;
}

.lib-pagination__item--disabled {
  opacity: 0.35;
  cursor: default;
}

.library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

/* ========================================
   LIST ROWS — the default list template
   ======================================== */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  transition: background var(--t) ease, padding var(--t) var(--ease);
}

.list-row:last-child {
  border-bottom: 1px solid var(--border);
}

.list-row:hover {
  background: var(--bg-card-hover);
  padding-left: 12px;
}

.list-row__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 19px;
  color: var(--text-primary);
}

.list-row__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ========================================
   ACTIVITY CARD — saved component, shown only at /components/
   (kept as-is from step 05; see guides/activity-card-styles.md)
   ======================================== */
.component-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.activity-card {
  display: grid;
  grid-template-columns: 45% 1fr;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  overflow: hidden;
}

.activity-card__image {
  overflow: hidden;
  background: var(--bg-secondary);
}

.activity-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.activity-card:hover .activity-card__image img {
  filter: grayscale(0);
  transform: scale(1.03);
}

.activity-card__body {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.activity-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--eyebrow);
  margin-bottom: 20px;
}

.activity-card__desc {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 28px;
}

.activity-card__cta {
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  width: fit-content;
}

.activity-card--image-right { grid-template-columns: 1fr 45%; }
.activity-card--image-right .activity-card__image { order: 2; }
.activity-card--stacked { grid-template-columns: 1fr; }
.activity-card--stacked .activity-card__image { aspect-ratio: 16 / 9; }
.activity-card--framed { grid-template-columns: 42% 1fr; gap: 40px; padding: 32px; background: var(--bg-secondary); align-items: center; }
.activity-card--framed .activity-card__body { padding: 0; }
.activity-card--scrim,
.activity-card--overlay { display: block; position: relative; min-height: 460px; }
.activity-card--scrim .activity-card__image,
.activity-card--overlay .activity-card__image { position: absolute; inset: 0; }
.activity-card--scrim .activity-card__body { position: relative; width: 58%; min-height: 460px; background: linear-gradient(to right, rgba(255,255,255,0.96) 55%, rgba(255,255,255,0) 100%); }
.activity-card--overlay .activity-card__body { position: relative; min-height: 460px; align-items: center; text-align: center; background: rgba(26, 25, 8, 0.72); color: #fff; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1080px) {
  .talks[data-look="poster"],
  .workshops[data-look="photo"],
  .workshops[data-look="syllabus"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .talks[data-look="ticket"] {
    grid-template-columns: 1fr;
  }

  .talks[data-look="index"] .tcard {
    grid-template-columns: 80px minmax(0, 1fr) 40px;
    grid-template-areas:
      "date title cta"
      "date conf  cta";
  }

  .talks[data-look="index"] .tcard__type {
    display: none;
  }

  .talks[data-look="index"] .card-media {
    right: 12%;
  }
}

@media (max-width: 900px) {
  .talks[data-look="ledger"] .tcard {
    grid-template-columns: 1fr;
  }

  .talks[data-look="ledger"] .tcard__date {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 22px;
  }

  .talks[data-look="ledger"] .tcard__year {
    font-size: 32px;
  }

  .talks[data-look="ledger"] .card-media {
    order: 1;
    aspect-ratio: 16 / 9;
    border-left: none;
    border-bottom: 1px solid var(--c-dark);
  }

  .talks[data-look="ledger"] .tcard__body {
    order: 2;
    padding: 22px;
  }

  .workshops[data-look="split"] .wcard {
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-areas: "big body";
  }

  .workshops[data-look="split"] .card-media {
    display: none;
  }

  .wcard__big-n {
    font-size: 64px;
  }

  .talks[data-look="index"] .card-media {
    display: none;
  }

  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-card,
  .activity-card--image-right,
  .activity-card--framed {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .talks[data-look="poster"],
  .workshops[data-look="photo"],
  .workshops[data-look="syllabus"],
  .library-grid {
    grid-template-columns: 1fr;
  }

  .talks[data-look="ticket"] .tcard {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .talks[data-look="ticket"] .tcard::before,
  .talks[data-look="ticket"] .tcard::after {
    left: 88px;
  }

  .talks[data-look="ticket"] .tcard__stub {
    display: none;
  }

  .talks[data-look="ticket"] .tcard__year {
    font-size: 30px;
  }

  .workshops[data-look="split"] .wcard {
    grid-template-columns: 1fr;
    grid-template-areas: "big" "body";
  }

  .workshops[data-look="split"] .wcard__big {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 20px;
    border-right: none;
    border-bottom: 1px solid var(--c-dark);
  }

  .wcard__big-n {
    font-size: 44px;
  }
}
/* ============================================================
   detail.css — talk, training and library pages.
     .detail-head   back link, chips, title, spec panel
     .specs         the facts, four looks
     .detail-body   cover, prose + aside, gallery
     .gallery       five looks + the lightbox
     .pager         previous / all / next
   ============================================================ */

/* ========================================
   DETAIL HEAD
   ======================================== */
.detail-head {
  position: relative;
  padding: calc(var(--nav-h) + clamp(40px, 5vw, 72px)) 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
}

.detail-head__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.detail-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 22px;
}

.detail-head__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-left: 4px;
}

.detail-head__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: 1.02;
  font-size: clamp(38px, 5.6vw, 80px);
  color: var(--text-primary);
  max-width: 17em;
  text-wrap: balance;
}

.detail-head__sub {
  margin-top: 16px;
  font-size: 19px;
  color: var(--text-secondary);
}

.detail-head .specs {
  margin-top: clamp(32px, 4vw, 52px);
}

/* ========================================
   SPEC PANEL — shared parts

   Markup: .specs > .specs__stub + dl.specs__list > .spec (dt + dd)
           + .specs__code. The stub repeats one fact (date for talks,
   duration for training) as a big number; looks that show the stub
   hide the list item it duplicates ([data-stub]).
   ======================================== */
.specs {
  position: relative;
  background: var(--bg-primary);
}

.specs__stub,
.specs__code {
  display: none;
}

.specs__list {
  display: grid;
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.spec__k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.spec__k .icon {
  width: 14px;
  height: 14px;
}

.spec__v {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--text-primary);
}

.specs__stub-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.specs__stub-big {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: 0.9;
}

.specs__stub-small {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Look: strip — one row of ruled cells, the first on yellow ---------- */
.specs[data-look="strip"] .specs__list {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--c-dark);
}

.specs[data-look="strip"] .spec {
  padding: 16px 18px 18px;
  border-right: 1px solid var(--border);
}

.specs[data-look="strip"] .spec:last-child {
  border-right: none;
}

.specs[data-look="strip"] .spec:first-child {
  background: var(--c-yellow);
  border-right-color: var(--c-dark);
}

.specs[data-look="strip"] .spec:first-child .spec__k {
  color: var(--c-dark);
}

/* ---- Look: tiles — big-number tiles, the key one dark ------------------- */
.specs[data-look="tiles"] {
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) minmax(0, 3fr);
  gap: 12px;
  background: transparent;
}

.specs[data-look="tiles"] .specs__stub {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: var(--c-dark);
  color: var(--c-white);
  border: 1px solid var(--c-dark);
}

.specs[data-look="tiles"] .specs__stub-k,
.specs[data-look="tiles"] .specs__stub-small {
  color: var(--c-yellow);
}

.specs[data-look="tiles"] .specs__stub-big {
  font-size: clamp(64px, 7vw, 96px);
}

.specs[data-look="tiles"] .specs__list {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.specs[data-look="tiles"] .spec {
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color var(--t) ease;
}

.specs[data-look="tiles"] .spec:hover {
  border-color: var(--c-dark);
}

.specs[data-look="tiles"] .spec__v {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: 26px;
  line-height: 1.08;
}

/* ---- Look: ticket — stub, perforation, fields, barcode ----------------- */
.specs[data-look="ticket"] {
  --notch-bg: var(--bg-primary);
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 78px;
  border: 1px solid var(--c-dark);
}

.specs[data-look="ticket"]::before,
.specs[data-look="ticket"]::after {
  content: '';
  position: absolute;
  left: 170px;
  width: 18px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--notch-bg);
  border: 1px solid var(--c-dark);
  z-index: 2;
}

.specs[data-look="ticket"]::before { top: -1px;    border-top-color: var(--notch-bg); }
.specs[data-look="ticket"]::after  { bottom: -1px; border-bottom-color: var(--notch-bg); }

.specs[data-look="ticket"] .specs__stub {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px;
  background: var(--c-yellow);
  color: var(--c-dark);
  border-right: 2px dashed var(--c-dark);
}

.specs[data-look="ticket"] .specs__stub-big {
  font-size: 64px;
}

.specs[data-look="ticket"] .specs__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 18px 24px;
  padding: 22px 26px;
}

.specs[data-look="ticket"] .spec {
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--c-400);
}

.specs[data-look="ticket"] .specs__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  border-left: 1px dashed var(--border);
}

.specs__barcode {
  width: 34px;
  flex: 1;
  min-height: 60px;
  background: repeating-linear-gradient(180deg,
    var(--c-dark) 0 2px, transparent 2px 4px,
    var(--c-dark) 4px 5px, transparent 5px 8px,
    var(--c-dark) 8px 11px, transparent 11px 12px,
    var(--c-dark) 12px 13px, transparent 13px 16px);
}

.specs__codetext {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.specs__sheet,
.specs__drawn {
  display: none;
}

/* ---- Look: titleblock — the corner block of a technical drawing -------- */
.specs[data-look="titleblock"] {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 190px;
  border: 2px solid var(--c-dark);
  background:
    linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box;
}

.specs[data-look="titleblock"] .specs__stub {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 16px;
  border-right: 1px solid var(--c-dark);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
}

.specs[data-look="titleblock"] .specs__stub-big {
  font-size: 58px;
}

.specs[data-look="titleblock"] .specs__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.specs[data-look="titleblock"] .spec {
  gap: 8px;
  padding: 8px 14px 12px;
  border-right: 1px solid var(--c-dark);
  border-bottom: 1px solid var(--c-dark);
}

.specs[data-look="titleblock"] .spec:nth-child(3n) {
  border-right: none;
}

.specs[data-look="titleblock"] .spec__k,
.specs[data-look="titleblock"] .specs__stub-k {
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.specs[data-look="titleblock"] .spec__k .icon {
  display: none;
}

.specs[data-look="titleblock"] .specs__code {
  display: grid;
  grid-template-rows: 1fr auto auto;
  border-left: 1px solid var(--c-dark);
}

.specs[data-look="titleblock"] .specs__barcode,
.specs[data-look="titleblock"] .specs__codetext {
  display: none;
}

.specs[data-look="titleblock"] .specs__sheet,
.specs[data-look="titleblock"] .specs__drawn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 12px;
}

.specs[data-look="titleblock"] .specs__sheet {
  justify-content: space-between;
  background: var(--c-yellow);
  border-bottom: 1px solid var(--c-dark);
}

.specs__sheet b {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: 40px;
  line-height: 1;
  color: var(--c-dark);
}

.specs__sheet b small {
  font-size: 0.5em;
  color: rgba(26, 25, 8, 0.6);
}

.specs__drawn b {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  font-size: 15px;
}

/* A north arrow, because it is a drawing */
.specs__north {
  display: none;
}

.specs[data-look="titleblock"] .specs__north {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-bottom: 1px solid var(--c-dark);
}

.specs__north svg {
  width: 30px;
  height: 30px;
}

/* Stacked — a single column, used in the library sidebar */
.specs--stack .specs__list {
  grid-template-columns: 1fr;
}

.specs--stack .spec {
  border-right: none;
  border-bottom: 1px solid var(--border);
}

.specs--stack .spec:last-child {
  border-bottom: none;
}

/* In the looks that show the stub, the fact it repeats leaves the list */
.specs[data-look="tiles"] .spec[data-stub],
.specs[data-look="ticket"] .spec[data-stub],
.specs[data-look="titleblock"] .spec[data-stub] {
  display: none;
}

/* ========================================
   DETAIL BODY
   ======================================== */
.detail-body {
  position: relative;
  padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 8vw, 112px);
  border-top: 1px solid var(--border);
}

.detail-cover {
  position: relative;
  margin: 0 0 clamp(48px, 6vw, 72px);
}

.detail-cover__img {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border: 1px solid var(--c-dark);
  background: var(--bg-secondary);
}

.detail-cover__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.8s ease;
}

.detail-cover:hover img {
  filter: grayscale(0);
}

.detail-cover figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.detail-aside {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.aside-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* Resources — each one a real button */
.res-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.res {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color var(--t) ease, box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.res .itile {
  width: 38px;
  height: 38px;
  border-color: var(--border);
}

.res .itile .icon {
  width: 18px;
  height: 18px;
}

.res__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.res__host {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res > .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--t) var(--ease), color var(--t) ease;
}

.res:hover {
  border-color: var(--c-dark);
  box-shadow: 4px 4px 0 0 var(--c-yellow);
  transform: translate(-2px, -2px);
}

.res:hover > .icon {
  color: var(--text-primary);
  transform: translate(2px, -2px);
}

/* The first resource leads — a recording or deck, usually */
.res:first-child {
  border-color: var(--c-dark);
}

.res:first-child .itile {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-dark);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The invitation — this talk / workshop, for your event / team */
.invite {
  position: relative;
  padding: 22px 22px 24px;
  border: 1px solid var(--c-dark);
  background-color: var(--bg-secondary);
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
}

.invite__title {
  margin: 12px 0 8px;
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 19px;
  line-height: 1.25;
  color: var(--text-primary);
}

.invite__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.invite .btn {
  width: 100%;
  justify-content: space-between;
  background-color: var(--c-yellow);
}

/* ========================================
   PROSE — long-form body copy
   ======================================== */
.prose {
  max-width: 720px;
}

.prose > * + * {
  margin-top: 22px;
}

.prose p,
.prose li {
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.prose > p:first-child {
  font-size: 20.5px;
  line-height: 1.65;
  color: var(--text-primary);
}

.prose strong {
  font-weight: 600;
  color: var(--text-primary);
}

/* A paragraph that is one italic line reads as a question or a note */
.prose p > em:only-child {
  display: block;
  padding-left: 16px;
  border-left: 3px solid var(--c-yellow);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--text-primary);
}

.prose h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 56px;
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--text-primary);
}

.prose h2::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  transform: translateY(-2px);
}

.prose h3 {
  margin-top: 40px;
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 21px;
  line-height: 1.3;
  color: var(--text-primary);
}

.prose h4 {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 14px;
}

.prose a {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom: 1px solid var(--c-400);
  transition: background var(--t) ease, border-color var(--t) ease;
}

.prose a:hover {
  background: var(--accent);
  border-color: var(--c-dark);
}

.prose hr {
  border: none;
  height: 15px;
  margin: 48px 0;
  background:
    linear-gradient(var(--c-dark), var(--c-dark)) center / 1px 100% no-repeat,
    linear-gradient(var(--c-dark), var(--c-dark)) center / 15px 1px no-repeat,
    linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat;
}

/* Lists */
.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prose li {
  position: relative;
  padding-left: 28px;
}

.prose ul > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.8em;
  width: 12px;
  height: 1px;
  background: var(--c-dark);
}

.prose ol {
  counter-reset: prose-ol;
}

.prose ol > li {
  counter-increment: prose-ol;
}

.prose ol > li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.35em;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Quotes: > is a side quote, >> (nested) is a pull quote */
.prose blockquote {
  margin: 36px 0;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--c-yellow);
  box-shadow: -1px 0 0 0 var(--c-dark);
}

.prose blockquote p {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-primary);
}

.prose blockquote p + p {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prose blockquote blockquote {
  margin: 48px 0;
  padding: 0;
  border: none;
  box-shadow: none;
  text-align: center;
}

.prose blockquote blockquote p {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
}

/* Figures (render-image hook) */
.prose figure {
  margin: 36px 0;
}

.prose figure img {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.prose figcaption {
  position: relative;
  margin-top: 10px;
  padding-left: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.prose figcaption::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(var(--marker), var(--marker)) center / 1px 100% no-repeat,
    linear-gradient(var(--marker), var(--marker)) center / 100% 1px no-repeat;
}

.prose figure.float-right {
  float: right;
  width: 44%;
  margin: 6px 0 24px 36px;
}

.prose figure.float-left {
  float: left;
  width: 44%;
  margin: 6px 36px 24px 0;
}

.prose figure.figure-framed {
  padding: 12px;
  border: 1px solid var(--c-dark);
  background: var(--bg-secondary);
}

.prose figure.figure-framed img {
  border: none;
}

.prose-clear {
  clear: both;
}

/* Curriculum rail (training pages): every h2 is a numbered module and a
   line runs down the page through them. */
.prose--curriculum {
  counter-reset: module;
}

.prose--curriculum h2 {
  position: relative;
  display: block;
  counter-increment: module;
  margin-top: 0;
  padding: 40px 0 0 64px;
  min-height: 84px;
}

.prose--curriculum > h2:first-of-type {
  margin-top: 40px;
  padding-top: 0;
  min-height: 44px;
}

.prose--curriculum h2::before {
  content: counter(module, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 32px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  transform: none;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
  color: var(--c-yellow);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.prose--curriculum > h2:first-of-type::before {
  top: -8px;
}

/* The rail: joins the previous module to this one */
.prose--curriculum h2::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  height: 32px;
  width: 1px;
  background: var(--c-dark);
}

.prose--curriculum > h2:first-of-type::after {
  display: none;
}

.prose--curriculum h2 ~ *:not(h2):not(.prose-clear) {
  margin-top: 0;
  margin-left: 22px;
  padding: 14px 0 0 41px;
  border-left: 1px solid var(--c-dark);
}

.prose--curriculum h2 + *:not(h2):not(.prose-clear) {
  padding-top: 16px;
}

/* ========================================
   GALLERY — five looks

   Markup: .gallery > .gallery__head + .gallery__grid > figure.gallery__item
   Each item holds a button (opens the lightbox), a frame number and an
   optional caption. Thumbnails keep their natural shape; looks that
   want a crop use object-fit.
   ======================================== */
.gallery {
  position: relative;
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: 40px;
  border-top: 1px solid var(--c-dark);
}

.gallery__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.gallery__count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.gallery__nav {
  display: none;
  gap: 6px;
  margin-left: auto;
}

.gallery__nav button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-dark);
  background: var(--bg-primary);
  transition: background var(--t) ease;
}

.gallery__nav button:hover {
  background: var(--c-yellow);
}

.gallery__nav .icon {
  width: 18px;
  height: 18px;
}

.gallery__item {
  position: relative;
  margin: 0;
}

.gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-secondary);
  cursor: zoom-in;
}

.gallery__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  transition: filter 0.5s ease, transform 0.7s var(--ease);
}

.gallery__btn:hover img,
.gallery__btn:focus-visible img {
  filter: grayscale(0);
  transform: scale(1.04);
}

.gallery__num {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  background: var(--c-dark);
  color: var(--c-yellow);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t) ease, transform var(--t) var(--ease);
  pointer-events: none;
}

.gallery__item:hover .gallery__num {
  opacity: 1;
  transform: none;
}

.gallery__cap {
  display: none;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Look: mosaic — one big frame, the rest around it ------------------- */
.gallery[data-look="mosaic"] .gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gallery[data-look="mosaic"] .gallery__item {
  aspect-ratio: 4 / 3;
}

.gallery[data-look="mosaic"] .gallery__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery[data-look="mosaic"] .gallery__item[data-mspan="2"] {
  grid-column: span 2;
  aspect-ratio: auto;
}

.gallery[data-look="mosaic"] .gallery__item[data-mspan="3"] {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 8;
}

.gallery[data-look="mosaic"][data-count="1"] .gallery__item:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.gallery[data-look="mosaic"][data-count="2"] .gallery__item:first-child {
  aspect-ratio: 4 / 3;
}

.gallery[data-look="mosaic"][data-count="2"] .gallery__item:nth-child(2) {
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery[data-look="mosaic"] .gallery__item:first-child .gallery__num {
  opacity: 1;
  transform: none;
}

/* ---- Look: grid — calm and uniform -------------------------------------- */
.gallery[data-look="grid"] .gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gallery[data-look="grid"] .gallery__item {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
}

/* ---- Look: masonry — natural shapes, captions below --------------------- */
.gallery[data-look="masonry"] .gallery__grid {
  columns: 3;
  column-gap: 14px;
}

.gallery[data-look="masonry"] .gallery__item {
  break-inside: avoid;
  margin-bottom: 18px;
}

.gallery[data-look="masonry"] .gallery__btn {
  height: auto;
  border: 1px solid var(--border);
}

.gallery[data-look="masonry"] .gallery__btn img {
  height: auto;
}

.gallery[data-look="masonry"] .gallery__num {
  bottom: auto;
  top: 10px;
}

.gallery[data-look="masonry"] .gallery__cap {
  display: block;
}

/* ---- Look: strip — one row that scrolls --------------------------------- */
.gallery[data-look="strip"] .gallery__nav {
  display: flex;
}

.gallery[data-look="strip"] .gallery__grid {
  display: flex;
  gap: 10px;
  height: clamp(260px, 38vw, 440px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}

.gallery[data-look="strip"] .gallery__grid::-webkit-scrollbar {
  display: none;
}

.gallery[data-look="strip"] .gallery__item {
  flex: none;
  height: 100%;
  scroll-snap-align: start;
}

.gallery[data-look="strip"] .gallery__btn {
  width: auto;
  border: 1px solid var(--border);
}

.gallery[data-look="strip"] .gallery__btn img {
  width: auto;
  height: 100%;
}

.gallery[data-look="strip"] .gallery__num {
  opacity: 1;
  transform: none;
}

.gallery__progress {
  display: none;
  height: 3px;
  margin-top: 14px;
  background: var(--c-100);
}

.gallery__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-dark);
  transition: width 0.2s linear;
}

.gallery[data-look="strip"] .gallery__progress {
  display: block;
}

/* ---- Look: contact — a strip of film ------------------------------------ */
.gallery[data-look="contact"] .gallery__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 10px;
  padding: 34px 16px 30px;
  background: var(--c-dark);
}

/* Sprocket holes along both edges */
.gallery[data-look="contact"] .gallery__grid::before,
.gallery[data-look="contact"] .gallery__grid::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 9px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.82) 0 9px, transparent 9px 22px);
}

.gallery[data-look="contact"] .gallery__grid::before { top: 11px; }
.gallery[data-look="contact"] .gallery__grid::after  { bottom: 11px; }

.gallery[data-look="contact"] .gallery__item {
  aspect-ratio: 3 / 2;
  padding-bottom: 0;
}

.gallery[data-look="contact"] .gallery__btn {
  outline: 1px solid rgba(255, 255, 255, 0.18);
  background: #0E0D04;
  transition: outline-color var(--t) ease;
}

.gallery[data-look="contact"] .gallery__btn img {
  filter: grayscale(1) contrast(1.12) brightness(0.92);
}

.gallery[data-look="contact"] .gallery__btn:hover {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
}

.gallery[data-look="contact"] .gallery__btn:hover img {
  transform: none;
}

.gallery[data-look="contact"] .gallery__num {
  left: 0;
  bottom: -24px;
  padding: 0;
  background: none;
  color: var(--c-yellow);
  opacity: 1;
  transform: none;
}

.gallery[data-look="contact"] .gallery__num::after {
  content: 'A';
  margin-left: 1px;
}

/* ========================================
   LIGHTBOX — dark on purpose; its colors are literal
   ======================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(20, 19, 6, 0.97);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.lightbox--open {
  opacity: 1;
  visibility: visible;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.lightbox__count {
  color: #F7FF62;
  white-space: nowrap;
}

.lightbox__caption {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox__close,
.lightbox__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lightbox__close:hover,
.lightbox__arrow:hover {
  background: #F7FF62;
  border-color: #F7FF62;
  color: #1A1908;
}

.lightbox__close .icon,
.lightbox__arrow .icon {
  width: 20px;
  height: 20px;
}

.lightbox__stage {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 12px;
  padding: 20px;
  min-height: 0;
}

.lightbox__frame {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: opacity 0.2s ease;
}

.lightbox__img.is-loading {
  opacity: 0.25;
}

.lightbox__thumbs {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox__thumbs button {
  flex: none;
  width: 64px;
  height: 44px;
  overflow: hidden;
  opacity: 0.4;
  outline: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s ease, outline-color 0.2s ease;
}

.lightbox__thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox__thumbs button:hover {
  opacity: 0.8;
}

.lightbox__thumbs button[aria-current="true"] {
  opacity: 1;
  outline: 2px solid #F7FF62;
}

/* ========================================
   PAGER — previous / all / next
   ======================================== */
.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.pager__link,
.pager__all,
.pager__empty {
  background: var(--bg-primary);
}

.pager__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px;
  transition: background var(--t) ease;
}

.pager__link--next {
  text-align: right;
  align-items: flex-end;
}

.pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pager__dir .icon {
  width: 15px;
  height: 15px;
  transition: transform var(--t) var(--ease);
}

.pager__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 19px;
  line-height: 1.3;
  color: var(--text-primary);
  text-wrap: balance;
}

.pager__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.pager__link:hover {
  background: var(--c-yellow);
}

.pager__link:hover .pager__dir {
  color: var(--c-dark);
}

.pager__link--prev:hover .pager__dir .icon { transform: translateX(-4px); }
.pager__link--next:hover .pager__dir .icon { transform: translateX(4px); }

.pager__all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  transition: background var(--t) ease, color var(--t) ease;
}

.pager__all .icon {
  width: 22px;
  height: 22px;
}

.pager__all:hover {
  background: var(--c-dark);
  color: var(--c-yellow);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1080px) {
  .specs[data-look="ticket"] .specs__list,
  .specs[data-look="titleblock"] .specs__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specs[data-look="titleblock"] .spec:nth-child(3n) {
    border-right: 1px solid var(--c-dark);
  }

  .specs[data-look="titleblock"] .spec:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-aside {
    position: static;
    padding-top: 40px;
    border-top: 1px solid var(--c-dark);
  }

  .detail-cover__img {
    aspect-ratio: 16 / 9;
  }

  .specs[data-look="tiles"] {
    grid-template-columns: 1fr;
  }

  .specs[data-look="ticket"] {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .specs[data-look="ticket"]::before,
  .specs[data-look="ticket"]::after {
    left: 120px;
  }

  .specs[data-look="ticket"] .specs__stub-big {
    font-size: 44px;
  }

  .specs[data-look="ticket"] .specs__code {
    display: none;
  }

  .specs[data-look="titleblock"] {
    grid-template-columns: 1fr;
  }

  .specs[data-look="titleblock"] .specs__stub {
    flex-direction: row;
    align-items: baseline;
    border-right: none;
    border-bottom: 1px solid var(--c-dark);
  }

  .specs[data-look="titleblock"] .specs__code {
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto;
    border-left: none;
  }

  .specs[data-look="titleblock"] .specs__north,
  .specs[data-look="titleblock"] .specs__sheet {
    border-bottom: none;
    border-right: 1px solid var(--c-dark);
  }

  .prose figure.float-right,
  .prose figure.float-left {
    float: none;
    width: 100%;
    margin: 28px 0;
  }

  .gallery[data-look="mosaic"] .gallery__grid,
  .gallery[data-look="grid"] .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery[data-look="mosaic"] .gallery__item[data-mspan] {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }

  .gallery[data-look="masonry"] .gallery__grid {
    columns: 2;
  }

  .gallery[data-look="contact"] .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pager {
    grid-template-columns: 1fr 1fr;
  }

  .pager__all {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
  }

  .lightbox__stage {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .lightbox__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    background: rgba(20, 19, 6, 0.6);
  }

  .lightbox__arrow--prev { left: 16px; }
  .lightbox__arrow--next { right: 16px; }
}

@media (max-width: 600px) {
  .specs[data-look="strip"] .specs__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specs[data-look="strip"] .spec {
    border-bottom: 1px solid var(--border);
  }

  .specs[data-look="ticket"] {
    grid-template-columns: 1fr;
  }

  .specs[data-look="ticket"]::before,
  .specs[data-look="ticket"]::after {
    display: none;
  }

  .specs[data-look="ticket"] .specs__stub {
    flex-direction: row;
    align-items: baseline;
    border-right: none;
    border-bottom: 2px dashed var(--c-dark);
  }

  .specs[data-look="ticket"] .specs__list,
  .specs[data-look="titleblock"] .specs__list {
    grid-template-columns: 1fr;
  }

  .specs[data-look="titleblock"] .spec {
    border-right: none !important;
  }

  .gallery[data-look="mosaic"] .gallery__grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery[data-look="masonry"] .gallery__grid {
    columns: 1;
  }

  .pager {
    grid-template-columns: 1fr;
  }

  .pager__link--next {
    text-align: left;
    align-items: flex-start;
  }

  .lightbox__thumbs {
    justify-content: flex-start;
  }
}
/* ============================================================
   pages.css — contact, about (placeholder), 404, the /lab/ page.
   ============================================================ */

/* ========================================
   CONTACT
   ======================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: stretch;
}

/* The email panel — dark, contained */
.mail-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--c-dark);
}

.mail-panel .pat {
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 10%, transparent 70%);
}

.mail-panel > *:not(.pat):not(.xh4) {
  position: relative;
  z-index: 1;
}

.mail-panel__address {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  color: var(--text-primary);
  word-break: break-word;
  margin-top: 8px;
}

.mail-panel__address a {
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease), color var(--t) ease;
}

.mail-panel__address a:hover {
  background-size: 100% 100%;
  color: var(--c-dark);
}

.mail-panel__note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 46ch;
}

.mail-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.copy-btn[data-copied="true"] {
  --btn-bg: var(--c-yellow);
  --btn-ink: var(--c-dark);
  --btn-line: var(--c-yellow);
}

/* Request types — each opens an email with the subject filled in */
.requests {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.request {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 18px;
  flex: 1;
  padding: 22px 24px;
  background: var(--bg-card);
  transition: background var(--t) ease;
}

.request__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-primary);
}

.request__text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.request > .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease);
}

.request:hover {
  background: var(--c-yellow);
}

.request:hover .itile {
  background: var(--c-dark);
  color: var(--c-yellow);
  border-color: var(--c-dark);
}

.request:hover > .icon {
  transform: translate(3px, -3px);
}

.request:hover .request__text {
  color: var(--c-dark);
}

/* Channel cards reuse .ccard; the Persian line sits under a rule */
.channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ccard__fa {
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-secondary);
}

.ccard__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ========================================
   ABOUT — placeholder while the page is written
   ======================================== */
.about-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: end;
}

.about-hero__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--c-dark);
  background: var(--bg-secondary);
}

.about-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.6s ease;
}

.about-hero__portrait:hover img {
  filter: grayscale(0);
}

.wip {
  border: 1px solid var(--c-dark);
  background: var(--bg-card);
}

/* Hazard tape — the panel's roof */
.wip__tape {
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--c-dark) 0 14px, var(--c-yellow) 14px 28px);
  border-bottom: 1px solid var(--c-dark);
}

.wip__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 48px;
  padding: clamp(32px, 4vw, 52px);
}

.wip__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  color: var(--text-primary);
  margin: 16px 0 14px;
}

.wip__text {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.wip__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}

.wip__links .btn {
  justify-content: space-between;
}

/* ========================================
   404
   ======================================== */
.notfound {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 72px;
  overflow: hidden;
}

.notfound__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px 64px;
}

.notfound__code {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(96px, 16vw, 220px);
  line-height: 0.85;
  color: var(--text-primary);
}

.notfound__code span {
  display: inline-block;
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  padding: 0 0.08em;
  line-height: 0.9;
}

.notfound__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  margin: 28px 0 16px;
  color: var(--text-primary);
}

.notfound__text {
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* A little context map with one box missing */
.ctxmap {
  width: 100%;
  max-width: 480px;
  justify-self: center;
}

.ctxmap text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ========================================
   LAB PAGE — every look, side by side
   ======================================== */
.lab-intro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.lab-intro__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--bg-card);
}

.lab-intro__step b {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  font-size: 18px;
  color: var(--text-primary);
}

.lab-intro__step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

code,
.code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  background: var(--c-50);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.lab-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.lab-variant {
  position: relative;
  margin-top: 56px;
}

.lab-variant:first-of-type {
  margin-top: 0;
}

.lab-variant .group-label {
  margin: 28px 0 14px;
}

.lab-variant .group-label:first-of-type {
  margin-top: 0;
}

.lab-variant__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px dashed var(--c-400);
}

.lab-variant__letter {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--c-dark);
  color: var(--c-yellow);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  transform: translateY(-3px);
}

.lab-variant__name {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 22px;
  color: var(--text-primary);
}

.lab-variant__note {
  flex: 1 1 320px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.lab-variant__default {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  color: var(--c-dark);
}

/* A full-width hero inside the lab keeps its own frame */
.lab-stage {
  position: relative;
  border: 1px solid var(--c-dark);
  overflow: hidden;
}

.lab-stage .hero {
  padding-top: clamp(48px, 6vw, 80px);
}

/* Type specimens */
.lab-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 26px 24px;
  border: 1px solid var(--c-dark);
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: var(--body-size);
}

.type-card.is-current {
  box-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 1px var(--c-dark);
}

.type-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.type-card__name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.type-card__display {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: var(--display-lh);
  font-size: 64px;
  color: var(--text-primary);
}

.type-card__head {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-primary);
}

.type-card__body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.type-card__note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.type-card__try {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--c-dark);
  background: var(--bg-card);
  transition: background var(--t) ease;
}

.type-card__try:hover {
  background: var(--c-yellow);
}

/* Icon and pattern specimens */
.lab-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.lab-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 8px 14px;
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

.lab-icon .icon {
  width: 26px;
  height: 26px;
  color: var(--text-primary);
}

.lab-icon:hover {
  background: var(--c-yellow);
  color: var(--c-dark);
}

.lab-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.lab-swatch {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-dark);
  overflow: hidden;
}

.lab-swatch span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--c-dark);
  color: var(--c-yellow);
}

.lab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1080px) {
  .channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .contact-grid,
  .about-hero__layout,
  .notfound__grid,
  .lab-type,
  .lab-intro {
    grid-template-columns: 1fr;
  }

  .about-hero__portrait {
    max-width: 240px;
  }

  .wip__body {
    grid-template-columns: 1fr;
  }

  .lab-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .channels {
    grid-template-columns: 1fr;
  }

  .request {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 18px;
  }

  .request > .icon {
    display: none;
  }

  .type-card__display {
    font-size: 48px;
  }
}
/* ============================================================
   blog.css — the blog index and blog posts (step 07).

     INDEX       lead story, filter + search, post cards (three looks:
                 journal | magazine | index), topics, subscribe band
     POST        header + byline, covers, the reading layout (three
                 looks: rail | aside | column), table of contents, share
     POST BODY   .post-prose on top of .prose (detail.css): numbered
                 sections, figures, pull quotes, callouts, code, tables,
                 terms, charts, stats, video, cards for other pages
     AFTER       author, subscribe box, comments, related
     NOTE        the short format — one index card
     LAB         the reading-layout drawings on /lab/

   Built from base.css primitives. Same rules as the rest of the site:
   yellow is a fill, dark is kept for small devices, radius 0.
   ============================================================ */

/* The accent word inside display lines on blog pages */
.post-head__title em,
.post-lead__title em,
.note-card__title em,
.subscribe__title em,
.blog-topics__title em,
.author-card__name em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--accent-w);
  letter-spacing: -0.01em;
}

/* Links under a list-page description (page-hero.html → links) */
.page-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
}

/* ========================================
   INDEX — lead story
   ======================================== */
.post-lead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  margin-bottom: clamp(48px, 6vw, 72px);
  border: 1px solid var(--c-dark);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.post-lead:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 1px var(--c-dark);
}

.post-lead__media {
  min-height: clamp(300px, 34vw, 460px);
  border-right: 1px solid var(--c-dark);
}

.post-lead__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(26px, 3.6vw, 48px);
}

.post-lead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.post-lead__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.post-lead__title {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.02;
  color: var(--text-primary);
  text-wrap: balance;
}

.post-lead__dek {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-lead__facts {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.post-lead__facts > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 18px 10px 0;
  margin-right: 18px;
  border-right: 1px solid var(--border);
}

.post-lead__facts > div:last-child {
  border-right: none;
  margin-right: 0;
}

.post-lead__facts dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-lead__facts dd {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 15px;
  color: var(--text-primary);
}

.post-lead:hover .post-lead__cta {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--btn-shadow);
}

.post-lead:hover .post-lead__cta .icon {
  transform: translateX(3px);
}

/* A drawn plate for posts without a photo — lead story and cards */
.pcard__gen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.pcard__gen .pat {
  -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 85%);
  mask-image: linear-gradient(135deg, #000 10%, transparent 85%);
}

.pcard__gen-kind {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.pcard__gen-kind .icon {
  width: 14px;
  height: 14px;
}

.pcard__gen-no {
  position: relative;
  align-self: flex-end;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(64px, 7vw, 112px);
  line-height: 0.8;
  color: var(--text-primary);
}

.pcard__gen-no::before {
  content: 'Nº';
  margin-right: 0.08em;
  font-size: 0.28em;
  vertical-align: top;
  letter-spacing: 0;
}

.post-lead .pcard__gen-no {
  font-size: clamp(120px, 15vw, 220px);
}

/* ========================================
   INDEX — filter + search
   ======================================== */
.blog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 28px;
}

.blog-tools .filters {
  margin-bottom: 0;
}

.blog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 320px);
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-dark);
  background: var(--bg-card);
  transition: box-shadow var(--t) var(--ease);
}

.blog-search:focus-within {
  box-shadow: 3px 3px 0 0 var(--c-yellow), 3px 3px 0 1px var(--c-dark);
}

.blog-search > .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.blog-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.blog-search input::placeholder {
  color: var(--text-faint);
}

.blog-search kbd {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.blog-search:focus-within kbd {
  display: none;
}

.blog-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 15px;
  color: var(--text-secondary);
}

.blog-empty[hidden] {
  display: none;
}

.blog-empty b {
  color: var(--text-primary);
}

.blog-empty__reset {
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--c-dark);
}

.blog-empty__reset:hover {
  background: var(--c-yellow);
}

/* While filtering, the lead story steps aside and its card rejoins the list;
   otherwise the looks that show it above don't repeat it. */
.blog-index.is-filtering .post-lead,
.blog-index:not(.is-filtering) .posts[data-look="journal"] .pcard[data-lead],
.blog-index:not(.is-filtering) .posts[data-look="magazine"] .pcard[data-lead] {
  display: none;
}

/* ========================================
   POST CARDS — shared parts

   Markup (cards/post.html): .pcard > .pcard__media + .pcard__date
   + .pcard__body (meta, title, dek, foot). One markup, three looks,
   keyed on .posts[data-look].
   ======================================== */
.posts {
  display: grid;
}

.pcard {
  position: relative;
  display: grid;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) ease;
}

.pcard[hidden],
.posts__year[hidden] {
  display: none;
}

.posts__year {
  display: none;
}

.pcard__date {
  display: flex;
  flex-direction: column;
}

.pcard__day {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: 0.9;
}

.pcard__mon {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pcard__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.pcard__format {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.pcard__format .icon {
  width: 13px;
  height: 13px;
}

.pcard__topic {
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.pcard__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.25;
  color: var(--text-primary);
  text-wrap: balance;
}

/* The title takes a yellow marker stroke on hover, line by line */
.pcard__title span {
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-size: 0 42%;
  background-position: 0 88%;
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 0.45s var(--ease);
}

.pcard:hover .pcard__title span {
  background-size: 100% 42%;
}

.pcard__dek {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.pcard__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pcard__read .icon {
  width: 13px;
  height: 13px;
}

.pcard__foot .card-cta {
  margin-left: auto;
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* ---- Look: journal — editorial rows ------------------------------------- */
.posts[data-look="journal"] {
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-dark);
}

.posts[data-look="journal"] .pcard {
  grid-template-columns: 112px minmax(0, 1fr) minmax(180px, 260px);
  gap: 0 clamp(20px, 3vw, 44px);
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}

.posts[data-look="journal"] .pcard__date {
  order: 0;
  gap: 10px;
  padding-top: 2px;
}

.posts[data-look="journal"] .pcard__day {
  font-size: 58px;
}

.posts[data-look="journal"] .pcard__body {
  order: 1;
}

.posts[data-look="journal"] .pcard__media {
  order: 2;
  align-self: start;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-dark);
}

.posts[data-look="journal"] .pcard:not(.has-cover) .pcard__media {
  display: none;
}

.posts[data-look="journal"] .pcard:not(.has-cover) .pcard__body {
  grid-column: 2 / -1;
  max-width: 760px;
}

.posts[data-look="journal"] .pcard__title {
  font-size: clamp(21px, 2vw, 27px);
}

.posts[data-look="journal"] .pcard[data-format="note"] .pcard__dek {
  -webkit-line-clamp: 2;
}

/* ---- Look: magazine — a grid of covers ---------------------------------- */
.posts[data-look="magazine"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.posts[data-look="magazine"] .pcard {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--c-dark);
}

.posts[data-look="magazine"] .pcard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 1px var(--c-dark);
}

.posts[data-look="magazine"] .pcard__media {
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--c-dark);
}

/* The date rides on the photo as a small dark tab */
.posts[data-look="magazine"] .pcard__date {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  background: var(--c-dark);
}

.posts[data-look="magazine"] .pcard__day {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--c-yellow);
}

.posts[data-look="magazine"] .pcard__mon {
  line-height: 1.4;
  color: var(--c-white);
}

.posts[data-look="magazine"] .pcard__body {
  padding: 20px 22px 18px;
}

.posts[data-look="magazine"] .pcard__no {
  display: none;
}

/* Notes run as text cards — no plate, the note itself shows */
.posts[data-look="magazine"] .pcard[data-format="note"] {
  background: var(--bg-secondary);
}

.posts[data-look="magazine"] .pcard[data-format="note"] .pcard__media {
  display: none;
}

.posts[data-look="magazine"] .pcard[data-format="note"] .pcard__date {
  position: static;
  align-self: start;
  justify-self: start;
  margin: 20px 22px 0;
}

.posts[data-look="magazine"] .pcard[data-format="note"] .pcard__dek {
  font-size: 15.5px;
  -webkit-line-clamp: 7;
}

/* ---- Look: index — a dense archive, by year ----------------------------- */
.posts[data-look="index"] {
  grid-template-columns: 1fr;
}

.posts[data-look="index"] .posts__year {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 36px 0 12px;
  border-bottom: 1px solid var(--c-dark);
}

.posts[data-look="index"] .posts__year:first-child {
  padding-top: 0;
}

.posts__year-n {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--text-primary);
}

.posts__year-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.posts__year-count::before {
  content: '/ ';
  color: var(--text-faint);
}

.posts[data-look="index"] .pcard {
  grid-template-columns: 76px 52px minmax(0, 1fr) 96px 150px 64px 24px;
  align-items: baseline;
  gap: 16px;
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
}

/* Flatten the card so its parts line up as table columns */
.posts[data-look="index"] .pcard__body,
.posts[data-look="index"] .pcard__meta,
.posts[data-look="index"] .pcard__foot {
  display: contents;
}

.posts[data-look="index"] .pcard__media,
.posts[data-look="index"] .pcard__dek,
.posts[data-look="index"] .pcard__yr,
.posts[data-look="index"] .card-cta > span {
  display: none;
}

.posts[data-look="index"] .pcard > * ,
.posts[data-look="index"] .pcard__body > *,
.posts[data-look="index"] .pcard__meta > *,
.posts[data-look="index"] .pcard__foot > * {
  grid-row: 1;
}

.posts[data-look="index"] .pcard__date  { grid-column: 1; flex-direction: row; align-items: baseline; gap: 5px; }
.posts[data-look="index"] .pcard__no    { grid-column: 2; }
.posts[data-look="index"] .pcard__title { grid-column: 3; font-size: 17px; line-height: 1.35; }
.posts[data-look="index"] .pcard__format { grid-column: 4; font-weight: 400; color: var(--text-muted); }
.posts[data-look="index"] .pcard__topic { grid-column: 5; justify-self: start; border: none; padding: 0; }
.posts[data-look="index"] .pcard__read  { grid-column: 6; }
.posts[data-look="index"] .card-cta     { grid-column: 7; margin: 0; }

.posts[data-look="index"] .pcard__day {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
}

.posts[data-look="index"] .pcard__format .icon {
  display: none;
}

.posts[data-look="index"] .pcard__no,
.posts[data-look="index"] .pcard__read {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.posts[data-look="index"] .pcard:hover {
  background: var(--c-yellow);
}

.posts[data-look="index"] .pcard:hover .pcard__title span {
  background-size: 0 42%;
}

.posts[data-look="index"] .pcard:hover * {
  color: var(--c-dark);
}

/* ========================================
   INDEX — topics, and the subscribe band
   ======================================== */
.blog-topics__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px 64px;
  align-items: start;
}

.blog-topics__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  color: var(--text-primary);
}

.tag__n {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

a.tag:hover .tag__n {
  color: var(--c-dark);
}

.subscribe-band {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--c-yellow);
  border-top: 1px solid var(--c-dark);
}

.subscribe-band > .pat {
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000 10%, transparent 75%);
}

.subscribe-band > .container {
  position: relative;
  z-index: 1;
}

/* ========================================
   SUBSCRIBE — box (in a post) and band (index)
   ======================================== */
.subscribe {
  position: relative;
  display: grid;
  gap: 22px;
  color: var(--c-dark);
}

.subscribe > *:not(.pat) {
  position: relative;
  z-index: 1;
}

.subscribe--box {
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  box-shadow: 6px 6px 0 0 var(--c-dark);
}

.subscribe--box > .pat {
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 90% at 100% 0%, #000 10%, transparent 70%);
}

.subscribe--band {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 32px 64px;
}

.subscribe .eyebrow {
  color: var(--c-dark);
}

.subscribe__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  color: var(--c-dark);
  text-wrap: balance;
}

.subscribe--band .subscribe__title {
  font-size: clamp(36px, 4.6vw, 64px);
}

.subscribe__lead {
  margin-top: 12px;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.subscribe__form {
  display: flex;
  border: 1px solid var(--c-dark);
  background: var(--c-white);
}

.subscribe__form:focus-within {
  outline: 2px solid var(--c-dark);
  outline-offset: 3px;
}

.subscribe__input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--c-dark);
  outline: none;
}

.subscribe__input::placeholder {
  color: var(--c-400);
}

.subscribe__form .btn {
  border: 0;
  border-left: 1px solid var(--c-dark);
}

.subscribe__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.subscribe__alt a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-dark);
  border-bottom: 1px solid var(--c-dark);
}

.subscribe__alt a:hover {
  background: var(--c-white);
}

.subscribe__alt .icon {
  width: 13px;
  height: 13px;
}

/* ========================================
   POST — reading progress
   ======================================== */
.read-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 98;
  height: 3px;
  pointer-events: none;
  transition: top 0.3s var(--ease);
}

body:has(.nav--scrolled) .read-progress {
  top: calc(var(--nav-h) - 10px);
}

.read-progress span {
  display: block;
  height: 100%;
  background: var(--c-yellow);
  box-shadow: 0 1px 0 0 var(--c-dark);
  transform: scaleX(0);
  transform-origin: left;
}

/* ========================================
   POST — header
   (.detail-head gives the padding, the frame and its crosshairs)
   ======================================== */
.post-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

a.chip--ink:hover {
  background: var(--c-yellow);
  color: var(--c-dark);
}

.post-head__title {
  max-width: 16em;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  color: var(--text-primary);
  text-wrap: balance;
}

.post-head__dek {
  max-width: 40em;
  margin-top: 22px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Feature: a bigger title, and the cover runs edge to edge beneath */
.post-head--feature {
  padding-bottom: 0;
}

.post-head--feature::before,
.post-head--feature::after {
  display: none;
}

.post-head--feature .post-head__title {
  max-width: 13em;
  font-size: clamp(46px, 8.2vw, 124px);
  line-height: 0.96;
}

.post-head--feature .post-head__dek {
  font-size: clamp(19px, 1.8vw, 24px);
}

/* Byline — one ruled strip */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--c-dark);
  border-bottom: 1px solid var(--border);
}

.byline > * {
  padding: 14px 24px 14px 0;
  margin-right: 24px;
  border-right: 1px solid var(--border);
}

.byline > *:last-child {
  border-right: none;
  margin-right: 0;
}

.byline__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.byline__author > .byline__cell {
  padding: 0;
  margin: 0;
  border: 0;
}

.byline__avatar {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--c-dark);
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--t) ease;
}

.byline__author:hover .byline__avatar {
  filter: none;
}

.byline__author:hover .byline__v {
  background: var(--c-yellow);
}

.byline__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.byline__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.byline__v {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-primary);
}

.byline__words {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Covers — essays reuse .detail-cover (detail.css); a feature's runs full width */
.post-cover--full {
  margin-top: clamp(40px, 5vw, 64px);
}

.post-cover--full .post-cover__img {
  position: relative;
  z-index: 1;
  height: clamp(320px, 64vh, 780px);
  overflow: hidden;
  border-top: 1px solid var(--c-dark);
  border-bottom: 1px solid var(--c-dark);
  background: var(--bg-secondary);
}

.post-cover--full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.8s ease;
}

.post-cover--full:hover img {
  filter: grayscale(0);
}

.post-cover__cap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ========================================
   POST — the reading layout (three looks)

   .reader > .reader__side (contents + share, sticky) + .reader__main
   (the text, then the post's footer). The same grid is repeated in
   .reader--after so the author, subscribe and comments blocks line up
   with the text.

   Figures may reach past the text column. --to-edge is the distance
   from the text column to the edge of the page's content box; the %
   inside resolves against the figure's own column where it is used.
   ======================================== */
.reader {
  --to-edge: max(0px, calc((min(100vw, var(--max-width)) - 2 * var(--side-padding) - 100%) / 2));
  display: grid;
  align-items: start;
  column-gap: clamp(32px, 4vw, 56px);
}

.reader__side,
.reader__main {
  min-width: 0;
}

/* The side runs the full height of the text, so its contents can stick */
.reader__side {
  align-self: stretch;
}

.reader__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-height: calc(100vh - var(--nav-h) - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.reader__share .eyebrow {
  margin-bottom: 10px;
}

/* ---- Look: rail — contents in a left rail, the right margin free -------- */
.reader[data-look="rail"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
}

.reader[data-look="rail"] .reader__side { grid-column: 1; grid-row: 1; }
.reader[data-look="rail"] .reader__main { grid-column: 2; grid-row: 1; }

.reader[data-look="rail"] .post-prose > .fig--wide {
  margin-right: calc(-1 * var(--to-edge));
}

.reader[data-look="rail"] .post-prose > .fig--right {
  margin-right: calc(-1 * min(var(--to-edge), 160px));
}

/* ---- Look: aside — text left, a sticky sidebar right -------------------- */
.reader[data-look="aside"] {
  grid-template-columns: minmax(0, 1fr) 260px;
  column-gap: clamp(40px, 6vw, 88px);
}

.reader[data-look="aside"] .reader__main { grid-column: 1; grid-row: 1; }
.reader[data-look="aside"] .reader__side { grid-column: 2; grid-row: 1; }

.reader[data-look="aside"] .reader__side {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.reader--after[data-look="aside"] .reader__side {
  border-left: none;
}

/* The text isn't centred here, so full width is measured from the page edge */
.reader[data-look="aside"] .post-prose > .fig--full {
  width: 100vw;
  margin-left: calc(-1 * (max(0px, (100vw - var(--max-width)) / 2) + var(--side-padding)));
  margin-right: 0;
}

/* ---- Look: column — one centred column ---------------------------------- */
.reader[data-look="column"] {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}

.reader[data-look="column"] .reader__sticky {
  position: static;
  max-height: none;
  overflow: visible;
}

.reader[data-look="column"] .reader__share,
.reader--after[data-look="column"] .reader__side {
  display: none;
}

.reader[data-look="column"] .toc {
  margin-bottom: 44px;
  padding: 18px 22px;
  border: 1px solid var(--c-dark);
  background: var(--bg-secondary);
}

.reader[data-look="column"] .post-prose > .fig--wide {
  margin-left: calc(-1 * min(var(--to-edge), 140px));
  margin-right: calc(-1 * min(var(--to-edge), 140px));
}

/* Full width, wherever the text column is centred */
.post-prose > .fig--full {
  position: relative;
  z-index: 2;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* After the article: author, subscribe, comments — in the text column */
.post-after .reader__main {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

/* ========================================
   POST — table of contents
   ======================================== */
.toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  list-style: none;
}

.toc__head::-webkit-details-marker {
  display: none;
}

.toc__left {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
}

.toc:not([open]) .toc__head {
  margin-bottom: 0;
}

.toc:not([open]) .toc__head::after {
  content: '+';
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.toc__bar {
  height: 2px;
  margin-bottom: 12px;
  background: var(--c-100);
}

.toc__bar span {
  display: block;
  height: 100%;
  background: var(--c-dark);
  transform: scaleX(0);
  transform-origin: left;
}

.toc #TableOfContents > ul {
  counter-reset: toc;
}

.toc ul {
  display: flex;
  flex-direction: column;
}

.toc #TableOfContents > ul > li {
  counter-increment: toc;
}

.toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color var(--t) ease;
}

.toc #TableOfContents > ul > li > a::before {
  content: counter(toc, decimal-leading-zero);
  align-self: start;
  justify-self: start;
  padding: 1px 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

.toc ul ul a {
  padding-left: 30px;
  grid-template-columns: minmax(0, 1fr);
  font-size: 12.5px;
}

.toc a:hover {
  color: var(--text-primary);
}

.toc a.is-active {
  color: var(--text-primary);
  font-weight: 600;
}

.toc #TableOfContents > ul > li > a.is-active::before {
  background: var(--c-yellow);
  color: var(--c-dark);
  box-shadow: 0 0 0 1px var(--c-dark);
}

/* ========================================
   POST — share buttons
   ======================================== */
.share {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: background var(--t) ease, border-color var(--t) ease, color var(--t) ease;
}

.share__btn[hidden] {
  display: none;
}

.share__btn .icon {
  width: 15px;
  height: 15px;
}

.share__btn:hover {
  background: var(--c-yellow);
  border-color: var(--c-dark);
  color: var(--c-dark);
}

.share__btn[data-copied] {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-yellow);
}

.share--compact {
  gap: 4px;
}

.share--compact .share__btn {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}

.share--compact .share__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ========================================
   POST BODY — .post-prose, on top of .prose (detail.css)
   ======================================== */
.post-prose {
  counter-reset: sec fig tab;
}

/* Sections: every ## is numbered, like the contents */
.post-prose h2 {
  display: block;
  margin-top: 64px;
  counter-increment: sec;
}

.post-prose h2::before {
  content: '§ ' counter(sec, decimal-leading-zero);
  display: table;
  width: auto;
  height: auto;
  margin-bottom: 14px;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  transform: none;
}

.post-prose .hanchor {
  margin-left: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 400;
  color: var(--text-faint);
  border-bottom: none;
  opacity: 0;
  transition: opacity var(--t) ease, color var(--t) ease;
}

.post-prose :is(h2, h3, h4):hover .hanchor,
.post-prose .hanchor:focus-visible {
  opacity: 1;
}

.post-prose .hanchor:hover {
  color: var(--c-dark);
  background: var(--c-yellow);
}

.post-prose .hanchor.is-copied {
  opacity: 1;
}

.post-prose .hanchor.is-copied::after {
  content: ' link copied';
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Links that leave the site carry a small arrow */
.post-prose a.ext::after {
  content: '\2197';
  margin-left: 2px;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--text-muted);
}

/* Feature: the first paragraph opens with a drop cap on a yellow block */
.post-prose--dropcap > p:first-of-type::first-letter {
  float: left;
  margin: 0.1em 0.16em 0 0;
  padding: 0.06em 0.14em 0;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  font-size: 3.4em;
  line-height: 0.95;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
}

/* Inline code, keys */
.post-prose :not(pre) > code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.84em;
  color: var(--text-primary);
  background: var(--c-50);
  border: 1px solid var(--border);
}

.post-prose kbd {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--c-dark);
  background: var(--c-white);
  border: 1px solid var(--c-dark);
  box-shadow: 0 2px 0 0 var(--c-dark);
}

/* Quotes: in a post, a lone paragraph stays a quote; the last of
   several is the attribution (same convention as talk pages) */
.post-prose blockquote p + p {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.post-prose blockquote p:last-child:not(:first-child) {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Figures inside a post: no crosshair before captions — they're numbered */
.post-prose figcaption {
  padding-left: 0;
}

.post-prose figcaption::before {
  content: none;
}

/* Footnotes (Markdown [^1]) */
.post-prose sup {
  line-height: 0;
}

.post-prose .footnote-ref {
  margin-left: 1px;
  padding: 1px 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
}

.post-prose .footnote-ref:hover {
  background: var(--c-dark);
  color: var(--c-yellow);
}

.post-prose .footnotes {
  margin-top: 64px;
}

.post-prose .footnotes > hr {
  margin: 0 0 12px;
}

.post-prose .footnotes::before {
  content: 'Notes';
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-prose .footnotes li,
.post-prose .footnotes p {
  font-size: 14.5px;
  line-height: 1.65;
}

.post-prose .footnote-backref {
  margin-left: 6px;
  border-bottom: none;
  color: var(--text-muted);
}

/* Collapsible blocks — Hugo's {{< details >}} */
.post-prose > details {
  margin: 28px 0;
  border: 1px solid var(--c-dark);
  background: var(--bg-card);
}

.post-prose > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--text-primary);
}

.post-prose > details > summary::-webkit-details-marker {
  display: none;
}

.post-prose > details > summary::after {
  content: '+';
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  border: 1px solid var(--c-dark);
  transition: background var(--t) ease;
}

.post-prose > details[open] > summary {
  border-bottom: 1px solid var(--border);
}

.post-prose > details[open] > summary::after {
  content: '\2212';
  background: var(--c-yellow);
}

.post-prose > details > summary:hover::after {
  background: var(--c-yellow);
}

.post-prose > details > :not(summary) {
  margin: 16px 18px;
}

/* ========================================
   POST BODY — figures
   ======================================== */
.post-prose .fig,
.post-prose .figs {
  margin: 36px 0;
}

.post-prose .fig__media {
  position: relative;
}

.post-prose .fig img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-dark);
  background: var(--bg-secondary);
  filter: grayscale(1) contrast(1.03);
  transition: filter 0.6s ease;
}

.post-prose .fig:hover img,
.post-prose .fig--color img {
  filter: none;
}

.fig__zoom {
  position: relative;
  display: block;
  width: 100%;
  cursor: zoom-in;
}

.fig__zoom-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t) ease, transform var(--t) var(--ease);
}

.fig__zoom-mark .icon {
  width: 16px;
  height: 16px;
}

.fig__zoom:hover .fig__zoom-mark,
.fig__zoom:focus-visible .fig__zoom-mark {
  opacity: 1;
  transform: none;
}

/* Framed — screenshots and diagrams sit on a gray plate */
.post-prose .fig--framed .fig__media {
  padding: clamp(12px, 2.2vw, 24px);
  background-color: var(--bg-secondary);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid var(--c-dark);
}

.post-prose .fig--framed img {
  border-color: var(--border);
  filter: none;
}

/* Captions — "Fig. 03 — …", with the credit set off to the right */
.post-prose .fig__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.post-prose .fig__text {
  flex: 1 1 60%;
}

.post-prose .fig__credit {
  color: var(--text-faint);
}

.post-prose .fig--captioned,
.post-prose .figs.fig--captioned {
  counter-increment: fig;
}

.post-prose .fig--captioned > .fig__cap .fig__text::before {
  content: 'Fig. ' counter(fig, decimal-leading-zero) ' \2014 ';
  font-weight: 600;
  color: var(--text-primary);
}

/* Floats */
.post-prose > .fig--right {
  float: right;
  width: 46%;
  margin: 8px 0 20px 32px;
}

.post-prose > .fig--left {
  float: left;
  width: 46%;
  margin: 8px 32px 20px 0;
}

/* Full width: no side borders, a height limit, the caption back in the column */
.post-prose > .fig--full img {
  max-height: 88vh;
  object-fit: cover;
  border-left: 0;
  border-right: 0;
}

.post-prose > .fig--full > .fig__cap {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--side-padding);
  box-sizing: content-box;
}

/* Groups — {{< figures >}}: same crop for every frame */
.figs__grid {
  display: grid;
  grid-template-columns: repeat(var(--figs-cols, 2), minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.post-prose .figs .fig {
  margin: 0;
}

.post-prose .figs .fig img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.post-prose .figs .fig__cap {
  margin-top: 6px;
  font-size: 11px;
}

/* ========================================
   POST BODY — pull quote
   ======================================== */
.post-prose .pullquote {
  position: relative;
  margin: 60px 0 52px;
  padding: 34px 0 26px;
  border-top: 2px solid var(--c-dark);
  border-bottom: 1px solid var(--c-dark);
}

.pullquote__mark {
  position: absolute;
  top: -1px;
  left: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  transform: translateY(-50%);
}

.pullquote__mark .icon {
  width: 20px;
  height: 20px;
}

.post-prose .pullquote__text {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

.post-prose .pullquote__text p {
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.14;
  color: var(--text-primary);
  text-wrap: balance;
}

.post-prose .pullquote__cite {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-prose .pullquote__cite::before {
  content: '\2014  ';
}

/* ========================================
   POST BODY — callouts  > [!NOTE] …
   ======================================== */
.post-prose .callout {
  position: relative;
  margin: 32px 0;
  padding: 18px 22px 20px;
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
}

.post-prose .callout__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--mono-ls);
  text-transform: uppercase;
  color: var(--text-primary);
}

.callout__icon {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
}

.callout__icon .icon {
  width: 16px;
  height: 16px;
}

.callout__body > * + * {
  margin-top: 10px;
}

.post-prose .callout__body p,
.post-prose .callout__body li {
  font-size: 16px;
  line-height: 1.7;
}

/* note — quiet, on gray */
.post-prose .callout--note {
  background: var(--bg-secondary);
  border-color: var(--border);
  box-shadow: inset 3px 0 0 0 var(--c-dark);
}

/* tip — a yellow card */
.post-prose .callout--tip {
  background: var(--c-yellow);
}

.post-prose .callout--tip .callout__body p,
.post-prose .callout--tip .callout__body li {
  color: var(--c-dark);
}

.post-prose .callout--tip .callout__icon {
  background: var(--c-white);
}

/* important — the one that stands up off the page */
.post-prose .callout--important {
  box-shadow: 5px 5px 0 0 var(--c-dark);
}

.post-prose .callout--important .callout__icon {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-dark);
}

/* warning — hatched, like a drawing's no-go zone */
.post-prose .callout--warning {
  background-color: var(--bg-secondary);
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
}

.post-prose .callout--warning .callout__icon {
  background: var(--c-dark);
  color: var(--c-yellow);
  border-color: var(--c-dark);
}

/* caution — dark (.on-dark flips the tokens) */
.post-prose .callout--caution .callout__icon {
  background: var(--c-yellow);
  color: var(--c-dark);
  border-color: var(--c-yellow);
}

/* ========================================
   POST BODY — code
   Chroma output (noClasses = false in hugo.toml), coloured with the
   palette: definitions get a yellow marker, keywords weight, strings
   and comments shades of gray; highlighted lines are yellow.
   ======================================== */
.post-prose .code {
  margin: 32px 0;
  background: var(--c-50);
  border: 1px solid var(--c-dark);
}

.post-prose .code__bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-card);
  border-bottom: 1px solid var(--c-dark);
}

.code__lang {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-yellow);
  background: var(--c-dark);
}

.code__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}

.code__file .icon {
  width: 13px;
  height: 13px;
}

.code__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 12px;
  font: inherit;
  text-transform: uppercase;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  transition: background var(--t) ease, color var(--t) ease;
}

.code__copy .icon {
  width: 13px;
  height: 13px;
}

.code__copy:hover,
.code__copy[data-copied] {
  color: var(--c-dark);
  background: var(--c-yellow);
}

.post-prose .code .highlight {
  overflow-x: auto;
}

.post-prose .code pre {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0;
  tab-size: 2;
  color: var(--c-dark);
  background: transparent;
}

.post-prose .code code {
  font: inherit;
}

.chroma .line { display: flex; }
.chroma .hl {
  margin: 0 -20px;
  padding: 0 20px;
  background: rgba(247, 255, 98, 0.6);
  box-shadow: inset 3px 0 0 0 var(--c-dark);
}
.chroma .lntable { width: 100%; border-spacing: 0; border: 0; }
.chroma .lntd { padding: 0; vertical-align: top; border: 0; }
.chroma .lntd:first-child pre { padding-right: 0; }
.chroma .ln,
.chroma .lnt { margin-right: 14px; color: var(--c-400); user-select: none; }

/* comments */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs,
.chroma .cp, .chroma .cpf { color: var(--c-400); font-style: italic; }
/* keywords */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp,
.chroma .kr, .chroma .kt, .chroma .ow { font-weight: 700; color: var(--c-dark); }
/* definitions — the names being declared */
.chroma .nf, .chroma .nc, .chroma .ne, .chroma .fm {
  background: rgba(247, 255, 98, 0.75);
  box-shadow: 0 1px 0 0 rgba(26, 25, 8, 0.25);
}
.chroma .nd, .chroma .nn, .chroma .nt { color: var(--c-dark); font-weight: 500; }
/* strings and numbers */
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd,
.chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr,
.chroma .s1, .chroma .ss { color: var(--c-600); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il,
.chroma .mo { color: var(--c-dark); }
/* diffs */
.chroma .gi { background: rgba(247, 255, 98, 0.6); }
.chroma .gd { color: var(--c-400); text-decoration: line-through; }
.chroma .gh, .chroma .gu { font-weight: 700; }
.chroma .err { text-decoration: underline wavy var(--c-dark); }

/* ========================================
   POST BODY — tables
   ======================================== */
.post-prose .table {
  margin: 32px 0;
}

.post-prose .table--captioned {
  counter-increment: tab;
}

.post-prose .table--captioned > .fig__cap .fig__text::before {
  content: 'Table ' counter(tab, decimal-leading-zero) ' \2014 ';
  font-weight: 600;
  color: var(--text-primary);
}

.table__scroll {
  overflow-x: auto;
  border: 1px solid var(--c-dark);
}

.table__scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table__scroll th {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--c-dark);
}

.table__scroll td {
  padding: 12px 16px;
  line-height: 1.55;
  vertical-align: top;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.table__scroll td:first-child {
  font-weight: 500;
  color: var(--text-primary);
}

.table__scroll tbody tr:last-child td {
  border-bottom: none;
}

.table__scroll tbody tr:hover td {
  background: rgba(247, 255, 98, 0.35);
}

/* ========================================
   POST BODY — a term of the language  {{< term >}}
   ======================================== */
.post-prose .term {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
  margin: 40px 0 32px;
  padding: 24px 24px 20px;
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
}

.post-prose .term::before {
  content: 'Glossary';
  position: absolute;
  top: 0;
  left: 20px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  transform: translateY(-50%);
}

.term__word {
  grid-column: 1;
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 23px;
  line-height: 1.2;
  color: var(--text-primary);
}

.term__ctx {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.term__ctx .icon {
  width: 12px;
  height: 12px;
}

.term__def {
  grid-column: 1 / -1;
}

.post-prose .term__def,
.post-prose .term__def p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.term__see {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.term__see span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.term__see em {
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--c-400);
}

/* ========================================
   POST BODY — charts  {{< chart >}}

   One series, drawn in HTML. Bars are thin (<= 24px) and grow from one
   baseline; every value is labelled at the bar's end, so there is no
   value axis. Emphasis keeps one bar dark and grays the rest. Hover or
   focus shows a tooltip; the same numbers are always in the table.
   ======================================== */
.post-prose .chart {
  margin: 40px 0;
  padding: 22px 24px 18px;
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
}

.post-prose .chart__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--text-primary);
}

.chart__title .icon {
  width: 18px;
  height: 18px;
}

.chart__plot {
  position: relative;
}

.chart__item {
  position: relative;
  outline-offset: -2px;
  transition: background var(--t) ease;
}

.chart__item:hover,
.chart__item:focus-visible {
  background: rgba(247, 255, 98, 0.5);
}

.chart__bar {
  position: absolute;
  background: var(--c-dark);
  transition: background var(--t) ease;
}

.chart__val {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-primary);
}

.chart__label {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Emphasis: the story is one bar */
.chart--emph .chart__bar { background: var(--c-400); }
.chart--emph .chart__val { color: var(--text-muted); }
.chart--emph .is-hl .chart__bar { background: var(--c-dark); }
.chart--emph .is-hl .chart__val { font-weight: 700; color: var(--text-primary); }
.chart--emph .is-hl .chart__label { font-weight: 600; color: var(--text-primary); }

/* Tooltip — a small dark device: the value leads */
.chart__tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  padding: 6px 10px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  background: var(--c-dark);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 6px));
  transition: opacity 0.15s ease;
}

.chart__tip b {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-yellow);
}

.chart__tip span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
}

.chart__item:hover .chart__tip,
.chart__item:focus-visible .chart__tip {
  opacity: 1;
}

/* ---- columns: one series over time ------------------------------------- */
.chart--columns .chart__plot {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}

.chart--columns .chart__item {
  display: flex;
  flex-direction: column-reverse;
}

.chart--columns .chart__track {
  position: relative;
  height: 200px;
  border-bottom: 1px solid var(--c-dark);
}

.chart--columns .chart__bar {
  left: 50%;
  bottom: 0;
  width: min(24px, 56%);
  height: calc(var(--v) * 0.84);
  transform: translateX(-50%);
}

.chart--columns .chart__val {
  left: 0;
  right: 0;
  bottom: calc(var(--v) * 0.84 + 7px);
  text-align: center;
}

.chart--columns .chart__label {
  padding: 8px 2px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

/* ---- bars: one series across categories -------------------------------- */
.chart--bars .chart__plot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart--bars .chart__item {
  display: grid;
  grid-template-columns: minmax(96px, 32%) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 5px 0;
}

.chart--bars .chart__label {
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-secondary);
}

.chart--bars .chart__track {
  position: relative;
  height: 20px;
  border-left: 1px solid var(--c-dark);
}

.chart--bars .chart__bar {
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--v) * 0.86);
}

.chart--bars .chart__val {
  top: 50%;
  left: calc(var(--v) * 0.86 + 8px);
  transform: translateY(-50%);
}

.chart--bars .chart__tip {
  left: calc(32% + 14px);
  transform: translate(0, calc(-100% + 2px));
}

/* The table view */
.chart__table {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.chart__table summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chart__table summary::-webkit-details-marker {
  display: none;
}

.chart__table summary .icon {
  width: 14px;
  height: 14px;
}

.chart__table summary:hover {
  color: var(--text-primary);
}

.chart__table[open] summary span::after {
  content: ' \2014  hide';
}

.chart__table table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 14px;
}

.chart__table th,
.chart__table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.chart__table thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chart__table tbody th {
  font-weight: 500;
  color: var(--text-primary);
}

.chart__table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-primary);
}

.post-prose .chart > .fig__cap {
  margin-top: 14px;
}

.post-prose .chart.fig--captioned,
.post-prose .video.fig--captioned {
  counter-increment: fig;
}

/* ========================================
   POST BODY — headline numbers  {{< stats >}}
   ======================================== */
.post-prose .stat-row {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 3), minmax(0, 1fr));
  margin: 36px 0;
  border: 1px solid var(--c-dark);
}

.stat-tile {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 20px 16px;
  border-right: 1px solid var(--border);
}

.stat-tile:last-child {
  border-right: none;
}

.stat-tile:first-child {
  background: var(--c-yellow);
  border-right-color: var(--c-dark);
}

/* Numbers in the heading sans, proportional figures */
.stat-tile__v {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1;
  color: var(--text-primary);
}

.stat-tile__k {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.stat-tile:first-child .stat-tile__k {
  color: var(--c-dark);
}

/* ========================================
   POST BODY — video  {{< video >}}
   ======================================== */
.post-prose .video {
  margin: 36px 0;
}

.video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
}

.post-prose a.video__frame {
  border-bottom: 1px solid var(--c-dark);
}

.post-prose a.video__frame:hover {
  background: var(--c-dark);
}

.post-prose .video__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  filter: grayscale(1) brightness(0.78);
  transition: filter 0.6s ease, transform 0.8s var(--ease);
}

.video__frame:hover img,
.video__frame:focus-visible img {
  filter: grayscale(0) brightness(0.88);
  transform: scale(1.02);
}

.video__blank {
  position: absolute;
  inset: 0;
  --hatch: rgba(247, 255, 98, 0.14);
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
  box-shadow: 4px 4px 0 0 var(--c-dark);
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.video__play .icon {
  width: 30px;
  height: 30px;
}

.video__frame:hover .video__play {
  box-shadow: 0 0 0 0 var(--c-dark);
  transform: translate(calc(-50% + 4px), calc(-50% + 4px));
}

.video__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 14px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  background: linear-gradient(transparent, rgba(26, 25, 8, 0.88));
}

.video__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video__dur {
  padding: 2px 6px;
  color: var(--c-yellow);
  background: var(--c-dark);
}

.video__host {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-yellow);
}

.video__host .icon {
  width: 13px;
  height: 13px;
}

.video__frame--live {
  height: auto;
  cursor: auto;
}

/* ========================================
   POST BODY — a card for another page  {{< card >}}
   ======================================== */
.post-prose .xcard {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 46px;
  margin: 28px 0;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.post-prose .xcard:hover {
  background: var(--bg-card);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 var(--c-yellow), 4px 4px 0 1px var(--c-dark);
}

.xcard__media {
  position: relative;
  min-height: 92px;
  overflow: hidden;
  background: var(--bg-secondary);
  border-right: 1px solid var(--c-dark);
}

.xcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s ease;
}

.xcard:hover .xcard__media img {
  filter: none;
}

.xcard__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 9px);
}

.xcard__icon .icon {
  width: 24px;
  height: 24px;
}

.xcard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px;
}

.xcard__kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.xcard__kind .icon {
  width: 12px;
  height: 12px;
}

.xcard__note {
  letter-spacing: 0.02em;
  text-transform: none;
}

.xcard__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-primary);
}

.xcard__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.xcard__go {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--border);
  transition: background var(--t) ease;
}

.xcard__go .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease);
}

.xcard:hover .xcard__go {
  background: var(--c-yellow);
}

.xcard:hover .xcard__go .icon {
  transform: translateX(3px);
}

/* ========================================
   POST — end of the article: topics + share
   ======================================== */
.post-end {
  margin-top: 64px;
  border-top: 1px solid var(--c-dark);
}

.post-end__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.post-end__row > .eyebrow {
  min-width: 150px;
}

/* ========================================
   AFTER — author card
   ======================================== */
.author-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: clamp(22px, 3vw, 30px);
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
}

.author-card__photo {
  position: relative;
  aspect-ratio: 1;
}

.author-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--c-dark);
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s ease;
}

.author-card:hover .author-card__photo img {
  filter: none;
}

.author-card__name {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  font-size: 34px;
  line-height: 1;
  color: var(--text-primary);
}

.author-card__role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.author-card__bio {
  margin-top: 14px;
}

.author-card__bio p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.author-card__bio p + p {
  margin-top: 10px;
}

.author-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px;
}

/* ========================================
   AFTER — comments
   ======================================== */
.comments {
  padding: clamp(22px, 3vw, 30px);
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
}

.comments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-dark);
}

.comments__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-primary);
}

.comments__head .eyebrow {
  order: 2;
}

.comments__list {
  display: flex;
  flex-direction: column;
}

.comment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.comment__avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--c-dark);
}

.comment--author > .comment__avatar {
  color: var(--c-yellow);
  background: var(--c-dark);
}

.comment__main {
  min-width: 0;
}

.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 14px;
  line-height: 1.4;
}

.comment__meta .chip {
  padding: 2px 7px;
  font-size: 10px;
}

.comment__name {
  font-weight: 600;
  color: var(--text-primary);
}

.comment__role {
  font-size: 13px;
  color: var(--text-muted);
}

.comment__date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.comment__text {
  margin-top: 8px;
}

.comment__text p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.comment__text p + p {
  margin-top: 10px;
}

.comment__actions {
  margin-top: 8px;
}

.comment__reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.comment__reply .icon {
  width: 13px;
  height: 13px;
}

.comment__reply:hover {
  color: var(--c-dark);
  background: var(--c-yellow);
}

/* Replies hang off a thread line */
.comment__replies {
  margin-top: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--c-dark);
}

.comment__replies .comment {
  padding: 14px 0 4px;
  border-bottom: none;
}

.comments__empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.comments__empty b {
  color: var(--text-primary);
}

.comments__giscus {
  margin-top: 20px;
}

/* The comment box */
.composer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}

.composer__title {
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: 17px;
  color: var(--text-primary);
}

.composer__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__k i {
  font-style: normal;
  text-transform: none;
  color: var(--text-faint);
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--c-400);
  border-radius: 0;
  resize: vertical;
  transition: border-color var(--t) ease, box-shadow var(--t) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-dark);
  box-shadow: 3px 3px 0 0 var(--c-yellow), 3px 3px 0 1px var(--c-dark);
}

.composer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.composer__note {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 44ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.composer__note .icon {
  width: 15px;
  height: 15px;
}

.composer__status:empty {
  display: none;
}

.composer__status {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-dark);
  background: var(--c-yellow);
  border: 1px solid var(--c-dark);
}

/* ========================================
   NOTE — the short format, one index card
   (.detail-head gives the padding and the frame)
   ======================================== */
.note-page {
  padding-bottom: clamp(64px, 8vw, 104px);
}

.note-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
}

/* A second card underneath, offset — a small stack of index cards */
.note-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-secondary);
  border: 1px solid var(--c-dark);
  transform: translate(10px, 10px);
}

.note-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 11px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-dark);
  background: var(--c-yellow);
  border-bottom: 1px solid var(--c-dark);
}

.note-card__top > :last-child {
  margin-left: auto;
}

.note-card__kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

.note-card__kind .icon {
  width: 14px;
  height: 14px;
}

.note-card__main {
  padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 64px) clamp(28px, 4vw, 48px);
}

.note-card__title {
  margin-bottom: 26px;
  font-family: var(--font-head);
  font-weight: var(--head-w);
  letter-spacing: var(--head-ls);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  color: var(--text-primary);
  text-wrap: balance;
}

.note-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

/* ========================================
   LAB — the reading layouts, drawn
   ======================================== */
.reader-map {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.reader-map__sheet {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 18px;
  padding: 22px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--c-dark);
}

.reader-map__sheet i,
.reader-map__sheet em,
.reader-map__sheet u {
  display: block;
  height: 5px;
  background: var(--c-200);
}

.reader-map__head {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.reader-map__head i:first-child {
  width: 58%;
  height: 12px;
  background: var(--c-dark);
}

.reader-map__head i + i {
  width: 36%;
}

.reader-map__side,
.reader-map__main {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.reader-map__side b {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.reader-map__side .is-on {
  background: var(--c-dark);
}

.reader-map__side em {
  width: 70%;
  height: 12px;
  background: none;
  border: 1px solid var(--c-400);
}

.reader-map__main .short {
  width: 62%;
}

.reader-map__sheet .reader-map__wide {
  height: 42px;
  margin: 6px 0;
  background: var(--c-400);
}

.reader-map__sheet .reader-map__full {
  height: 34px;
  margin: 6px 0;
  background: var(--c-dark);
}

.reader-map[data-look="rail"] .reader-map__sheet {
  grid-template-columns: 20% 52% 20%;
  column-gap: 4%;
}

.reader-map[data-look="rail"] .reader-map__side { grid-column: 1; }
.reader-map[data-look="rail"] .reader-map__main { grid-column: 2; }
.reader-map[data-look="rail"] .reader-map__wide { margin-right: -46.15%; }
.reader-map[data-look="rail"] .reader-map__full { margin-left: calc(-46.15% - 22px); margin-right: calc(-46.15% - 22px); }

.reader-map[data-look="aside"] .reader-map__sheet {
  grid-template-columns: 68% 28%;
  column-gap: 4%;
}

.reader-map[data-look="aside"] .reader-map__main { grid-column: 1; grid-row: 2; }
.reader-map[data-look="aside"] .reader-map__side { grid-column: 2; grid-row: 2; }
.reader-map[data-look="aside"] .reader-map__full { margin-left: -22px; margin-right: calc(-47.06% - 22px); }

.reader-map[data-look="column"] .reader-map__sheet {
  grid-template-columns: 20% 60% 20%;
  column-gap: 0;
}

.reader-map[data-look="column"] .reader-map__side {
  grid-column: 2;
  padding: 8px;
  border: 1px solid var(--c-400);
}

.reader-map[data-look="column"] .reader-map__side b:nth-of-type(2),
.reader-map[data-look="column"] .reader-map__side em {
  display: none;
}

.reader-map[data-look="column"] .reader-map__main { grid-column: 2; }
.reader-map[data-look="column"] .reader-map__wide { margin-left: -16.67%; margin-right: -16.67%; }
.reader-map[data-look="column"] .reader-map__full { margin-left: calc(-33.33% - 22px); margin-right: calc(-33.33% - 22px); }

.reader-map__notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.reader-map__notes p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.reader-map__notes b {
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.reader-map__notes .link-arrow {
  margin-top: 8px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Below this the rail is too narrow for the contents: rail reads as column */
@media (max-width: 1180px) {
  .reader[data-look="rail"] {
    grid-template-columns: minmax(0, 680px);
    justify-content: center;
  }

  .reader[data-look="rail"] .reader__side,
  .reader[data-look="rail"] .reader__main {
    grid-column: 1;
    grid-row: auto;
  }

  .reader[data-look="rail"] .reader__sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .reader[data-look="rail"] .reader__share,
  .reader--after[data-look="rail"] .reader__side {
    display: none;
  }

  .reader[data-look="rail"] .toc {
    margin-bottom: 44px;
    padding: 18px 22px;
    border: 1px solid var(--c-dark);
    background: var(--bg-secondary);
  }

  .reader[data-look="rail"] .post-prose > .fig--wide {
    margin-left: calc(-1 * min(var(--to-edge), 140px));
    margin-right: calc(-1 * min(var(--to-edge), 140px));
  }

  .reader[data-look="rail"] .post-prose > .fig--right {
    margin-right: 0;
  }

  .posts[data-look="index"] .pcard {
    grid-template-columns: 70px 44px minmax(0, 1fr) 90px 56px 20px;
  }

  .posts[data-look="index"] .pcard__topic {
    display: none;
  }

  .posts[data-look="index"] .pcard__read  { grid-column: 5; }
  .posts[data-look="index"] .card-cta     { grid-column: 6; }
}

@media (max-width: 1080px) {
  .posts[data-look="magazine"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* Every reading layout becomes one column */
  .reader[data-look="aside"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .reader[data-look="aside"] .reader__side,
  .reader[data-look="aside"] .reader__main {
    grid-column: 1;
    grid-row: auto;
  }

  .reader[data-look="aside"] .reader__side {
    padding-left: 0;
    border-left: none;
  }

  .reader[data-look="aside"] .reader__sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .reader[data-look="aside"] .reader__share,
  .reader--after[data-look="aside"] .reader__side {
    display: none;
  }

  .reader[data-look="aside"] .toc {
    margin-bottom: 40px;
    padding: 16px 18px;
    border: 1px solid var(--c-dark);
    background: var(--bg-secondary);
  }

  .reader[data-look="aside"] .post-prose > .fig--full {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .reader .toc {
    margin-bottom: 36px;
  }

  .post-lead {
    grid-template-columns: 1fr;
  }

  .post-lead__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-right: none;
    border-bottom: 1px solid var(--c-dark);
  }

  .posts[data-look="journal"] .pcard {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .posts[data-look="journal"] .pcard__day {
    font-size: 42px;
  }

  .posts[data-look="journal"] .pcard__media {
    grid-column: 2;
    order: 0;
    margin-bottom: 18px;
    aspect-ratio: 16 / 9;
  }

  .posts[data-look="journal"] .pcard__date {
    grid-row: 1 / span 2;
  }

  .posts[data-look="journal"] .pcard:not(.has-cover) .pcard__body {
    grid-column: 2;
  }

  .posts[data-look="index"] .pcard {
    grid-template-columns: 62px minmax(0, 1fr) 48px;
    gap: 12px;
    padding: 14px 4px;
  }

  .posts[data-look="index"] .pcard__no,
  .posts[data-look="index"] .pcard__format,
  .posts[data-look="index"] .card-cta {
    display: none;
  }

  .posts[data-look="index"] .pcard__title { grid-column: 2; font-size: 16px; }
  .posts[data-look="index"] .pcard__read  { grid-column: 3; justify-self: end; }

  .blog-topics__grid,
  .subscribe--band,
  .reader-map {
    grid-template-columns: 1fr;
  }

  .byline > * {
    padding-right: 18px;
    margin-right: 18px;
  }

  .post-prose > .fig--right,
  .post-prose > .fig--left {
    float: none;
    width: 100%;
    margin: 32px 0;
  }
}

@media (max-width: 600px) {
  .posts[data-look="magazine"] {
    grid-template-columns: 1fr;
  }

  .blog-search {
    width: 100%;
  }

  .byline__author {
    flex-basis: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .byline > *:not(.byline__author) {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .figs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-prose .stat-row {
    grid-template-columns: 1fr;
  }

  .stat-tile {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .stat-tile:first-child {
    border-bottom-color: var(--c-dark);
  }

  .stat-tile:last-child {
    border-bottom: none;
  }

  .chart--columns .chart__track {
    height: 160px;
  }

  .chart--bars .chart__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .chart--bars .chart__tip {
    left: 0;
  }

  .post-prose .xcard {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .xcard__go {
    display: none;
  }

  .author-card {
    grid-template-columns: 1fr;
  }

  .author-card__photo {
    width: 96px;
  }

  .composer__row {
    grid-template-columns: 1fr;
  }

  .post-end__row > .eyebrow {
    min-width: 0;
    flex-basis: 100%;
  }

  .note-card__top > :last-child {
    margin-left: 0;
  }

  .note-card::after {
    transform: translate(6px, 6px);
  }
}
/* ============================================================
   soon.css — the coming-soon page (layouts/partials/coming-soon.html).
   Loaded only while params.comingSoon is on. Leans on the homepage hero
   (home.css) for the name, lead and portrait; adds the frame around it.
   ============================================================ */

.soon {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

.soon__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.soon__bg .pat {
  opacity: 0.8;
}

/* ---- Top bar: monogram + status ---- */
.soon__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.soon__status {
  gap: 8px;
}

/* A slow blink: the work is live */
.soon__pulse {
  width: 7px;
  height: 7px;
  background: var(--c-dark);
  animation: soon-blink 1.6s steps(1, end) infinite;
}

@keyframes soon-blink {
  50% { opacity: 0; }
}

/* ---- Main: the hero, centered in the remaining height ---- */
.soon__main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(48px, 7vw, 96px) 0;
}

.soon__inner {
  width: 100%;
}

.soon .hero__name {
  font-size: clamp(64px, 9.5vw, 140px);
}

.soon__title {
  margin-top: clamp(20px, 2.5vw, 32px);
  font-family: var(--font-display);
  font-weight: var(--display-w);
  letter-spacing: var(--display-ls);
  line-height: 1.05;
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--text-primary);
}

.soon__title em {
  font-family: var(--font-accent);
  font-style: italic;
  background: linear-gradient(transparent 62%, var(--c-yellow) 62%, var(--c-yellow) 92%, transparent 92%);
  padding: 0 0.08em;
}

.soon .hero__lead {
  margin-top: 16px;
}

.soon .btn--primary .icon {
  order: -1;
}

.soon .btn--primary:hover .icon {
  transform: none;
}

.soon__lang {
  padding: 1px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-strong);
}

/* ---- Foot: build meter + where/when ---- */
.soon__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.soon__build {
  display: flex;
  align-items: center;
  gap: 12px;
}

.soon__build-k {
  color: var(--text-primary);
  font-weight: 600;
}

/* Twelve cells: the done ones yellow, the one being worked on blinks */
.soon__meter {
  display: inline-flex;
  gap: 3px;
}

.soon__meter i {
  width: 10px;
  height: 14px;
  border: 1px solid var(--c-dark);
  background: var(--bg-primary);
}

.soon__meter i.is-done {
  background: var(--c-yellow);
}

.soon__meter i.is-now {
  background: var(--c-dark);
  animation: soon-blink 1.6s steps(1, end) infinite;
}

.soon__now {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.soon__now li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.soon__now .icon {
  width: 14px;
  height: 14px;
}

/* Desktop: exactly one screen, no scroll. The name, title and portrait are
   sized from the window height as well as its width, so a short laptop
   screen shrinks them instead of overflowing. */
@media (min-width: 901px) {
  .soon {
    height: 100vh;
    height: 100svh;
    min-height: 560px;
  }

  .soon__bar {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .soon__main {
    min-height: 0;
    padding: clamp(16px, 3vh, 48px) 0;
  }

  .soon .hero__eyebrow {
    margin-bottom: clamp(14px, 2.5vh, 32px);
  }

  .soon .hero__name {
    font-size: min(9.5vw, 15vh, 140px);
  }

  .soon__title {
    margin-top: clamp(12px, 2vh, 28px);
    font-size: min(3.2vw, 5vh, 44px);
  }

  .soon .hero__actions {
    margin-top: clamp(18px, 3.5vh, 36px);
  }

  .soon .hero__portrait {
    max-width: min(440px, calc((100svh - 240px) * 0.8));
  }

  .soon__foot {
    padding-top: 14px;
    padding-bottom: 18px;
  }
}

@media (max-width: 600px) {
  .soon .hero__name {
    font-size: clamp(56px, 17vw, 80px);
  }
  .soon__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soon__pulse,
  .soon__meter i.is-now {
    animation: none;
  }
}