/* ============================================================
   EchoDevStudio: shared design system (studio.css)
   One source for the whole site: tokens, chrome, components.
   Pages link this; page-specific CSS stays inline in each page.
   Change the look here once, it changes everywhere.
   ============================================================ */
  /* ============ DESIGN TOKENS: black / white / blue (+ Lupa's amber) ============ */
  :root {
    --ink:     #0D0F13; --panel: #14171D; --panel-2: #1B1F27; --line: #262B34;
    --paper:   #EDEFF3; --paper-dim: #C4CCD7; --muted: #8A93A3; --accent: #3DA8F5; --amber: #E8A33D;
    --ink-deep:#090A0E; --sky:#12151F; --snow:#DCE6F4; --moon:#8FA9CF;
    --echo-glow:rgba(61,168,245,0.16); --lupa-glow:rgba(232,163,61,0.15);
    --page-glow:rgba(61,168,245,0.09); --page-warm:rgba(232,163,61,0.045);
    --page-glow-x:50%; --page-warm-x:72%;
    --caption-glow:rgba(61,168,245,0.15);
    --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Trebuchet MS", system-ui, sans-serif;
    --font-body:    "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
    /* Shared motion rhythm: interface response, surface response, reveals, and ambient life.
       Local canvas scenes may keep renderer-specific timing, but the shared rooms use these values. */
    --motion-response: 180ms; --motion-surface: 200ms; --motion-reveal: 600ms;
    --motion-pulse: 2.6s; --motion-breath: 3.8s;
    --ease-standard: ease; --ease-out: ease-out; --ease-breath: ease-in-out;
    --target-min: 44px;
    /* Responsive density rhythm. Phone values stay compact without becoming cramped;
       desktop keeps the approved baseline; ultrawide gains measured breathing room. */
    --space-section: clamp(44px, 8vw, 92px);
    --space-section-head: clamp(22px, 2.6vw, 34px);
    --space-rule: clamp(36px, 6vw, 72px);
    /* Narrative type and heading rhythm are roles, not page-local guesses.
       Home gets one display exception; shared reading rooms use the same
       page-title and section-title steps everywhere. */
    --type-home-display: clamp(2.5rem, 7.4vw, 5rem);
    --type-page-title: clamp(2.25rem, 5vw, 3.75rem);
    --type-section-title: clamp(1.62rem, 3vw, 2.5rem);
    --space-label-title: 12px;
    --space-title-deck: 12px;
    --space-page-top: clamp(52px, 9vw, 104px);
    --space-page-bottom: clamp(24px, 4vw, 44px);
    --gap-grid: clamp(16px, 1vw, 20px);
    /* Three deliberate width roles. The site shell owns chrome, the feature rail
       owns diagrams/grids, and the reading rail owns narrative text. None of
       them chase ultrawide glass. */
    --width-site-shell: 1440px;
    --width-feature-rail: 1240px;
    --width-reading-rail: 880px;
    /* Home is a landing composition, not a reading room. Its two below-fold
       feature sections share a narrower visual field so cards and hierarchy
       answer each other without forcing prose wider. */
    --width-home-feature: 1100px;
    --maxw: var(--width-site-shell); --gutter: clamp(20px, 5vw, 48px);
  }

  /* ============ BASE ============ */
  * { box-sizing: border-box; }
  /* the whole type system rides the root: 100% below ~1450px, then a gentle
     rise to 110% at ultrawide (~3400px) so big glass isn't scrunched.
     Coefficient math: 1vw = W/16 percent of the 16px root: the earlier
     0.55vw (and the original 1vw) saturated by ~524px, which is why the
     site shouted everywhere. Backed out from 120% at Echo's call, 07-08. */
  html { scroll-behavior: smooth; font-size: clamp(100%, 92.8% + 0.08vw, 110%); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--ink); color: var(--paper);
    font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-synthesis: none; /* no faux bold/italic — variable fonts already cover the range */
    background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 26px 26px; overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  /* Cursor semantics are intentionally boring: a hand means action. Static
     surfaces may carry atmosphere at rest, but never borrow the action cursor. */
  a, button:not(:disabled), [role="button"] { cursor: pointer; }
  button, input, select, textarea { font: inherit; }
  a, button, input, select, textarea, summary, label, [role="button"], [tabindex] { touch-action: manipulation; }
  ::selection { background: var(--accent); color: #06121f; }

  /* Focus craft (2026-07-25q)
     Designed for this dark winter house, not the browser default.
     Mouse users never see it. Keyboard users get a clear, soft ring
     that matches the accent language without fighting card radii. */
  :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 88%, white);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  /* Interactive pieces already have strong hover borders. On keyboard
     focus we let the global ring speak and keep the border lift subtle
     so the two states feel continuous rather than competing. */
  a.card:focus-visible,
  a.btn:focus-visible,
  a.clink:focus-visible,
  a.finger:focus-visible,
  a.mini-node:focus-visible,
  .nav a:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  }
  a.mini-node.is-lupa:focus-visible,
  a.clink.amber:focus-visible {
    border-color: color-mix(in srgb, var(--amber) 70%, var(--line));
  }
  a.finger:focus-visible {
    border-color: color-mix(in srgb, var(--fc, var(--accent)) 70%, var(--line));
  }

  .skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--accent); color: var(--ink);
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
    padding: 8px 14px; border-radius: 8px;
    transition: top var(--motion-response) var(--ease-standard);
  }
  .skip:focus-visible { top: 12px; color: var(--ink); }
  .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
  /* Layout rails: .wrap is the outer site shell; .page-wrap bounds feature
     content; .reading-rail centers left-aligned narrative copy inside it. */
  .page-wrap { max-width: calc(var(--width-feature-rail) + (2 * var(--gutter))); }
  /* Interior rooms close with the same section-sized breathing room Home gets
     from its final .block. Home's page-wraps are nested inside sections, so
     the direct-child selector avoids doubling its already-approved close. */
  main > .page-wrap { padding-bottom: var(--space-section); }
  .reading-rail {
    width: min(100%, var(--width-reading-rail));
    margin-left: max(0px, calc((100% - var(--width-reading-rail)) / 2));
    margin-right: auto;
  }
  .home-contact-field { width: min(100%, var(--width-home-feature)); margin-inline: auto; }
  .home-feature-field { width: min(100%, var(--width-home-feature)); margin-inline: auto; }
  .theme-home .hero .home-hero-wrap { max-width: calc(var(--width-reading-rail) + (2 * var(--gutter))); }
  .tag { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .tag .slash { color: var(--accent); }

  /* embedded mascots, reused by class (one blob each) */
  .badge { border-radius: 50%; background-size: cover; background-position: center; display: inline-block; flex: none; }
  /* Modern formats first; PNG remains the fallback for older engines. */
  .badge-fox {
    background-image: image-set(
      url("fox-badge.avif") type("image/avif"),
      url("fox-badge.webp") type("image/webp"),
      url("fox-badge.png") type("image/png")
    );
  }
  .badge-wolf {
    background-image: image-set(
      url("wolf-badge.avif") type("image/avif"),
      url("wolf-badge.webp") type("image/webp"),
      url("wolf-badge.png") type("image/png")
    );
  }

  /* ============ STATUS PILLS ============ */
  .pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pill .pdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .pill--active { color: var(--paper); } .pill--active .pdot { background: var(--accent); }
  .pill--shipped .pdot { background: var(--paper); }
  .pill--archived .pdot { background: transparent; border: 1px solid var(--muted); }
  .pill--private .pdot { background: var(--muted); opacity: 0.55; }

  /* ============ HEADER ============ */
  .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--ink) 78%, transparent); border-bottom: 1px solid var(--line); }
  .header-row { display: flex; align-items: center; justify-content: space-between; height: 60px; }
  .wordmark { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 10px; }
  .wordmark .badge { width: 26px; height: 26px; }
  .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(61,168,245,0.55); animation: pulse var(--motion-pulse) var(--ease-out) infinite; flex: none; }
  /* The footer pulse keeps its 9px visual footprint, but its hidden three-knock
     shortcut has a humane pointer/touch target. No hover cue gives it away. */
  .footer-404-knock { position: relative; cursor: default; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
  .footer-404-knock::after { content:""; position:absolute; inset:-9px; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,168,245,0.5); } 70% { box-shadow: 0 0 0 7px rgba(61,168,245,0); } 100% { box-shadow: 0 0 0 0 rgba(61,168,245,0); } }
  .nav { display: flex; align-items: center; gap: 24px; }
  .nav a { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); transition: color var(--motion-response) var(--ease-standard); }
  .nav a:hover { color: var(--paper); }
  /* GitHub CTA: black/white, not studio accent.
     Honest to how GitHub presents itself (logo in black or white only).
     Near-black chip, slightly lighter than the page so it stays visible. */
  .nav .nav-cta {
    color: var(--paper);
    background: #161b22;
    border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
    padding: 7px 13px; border-radius: 8px; font-weight: 600;
  }
  .nav .nav-cta:hover {
    color: var(--paper);
    background: #21262d;
    border-color: color-mix(in srgb, var(--paper) 28%, transparent);
    filter: none;
  }
  @media (max-width: 660px) { .nav .nav-hide { display: none; } .nav { gap: 14px; } }

  /* ============ HERO ============ */
  .hero { position: relative; padding-top: clamp(70px, 13vw, 130px); padding-bottom: clamp(56px, 9vw, 104px); }
  .hero::before { content: ""; position: absolute; top: -14%; left: 50%; width: min(900px, 110vw); height: 460px; transform: translateX(-50%); background: radial-gradient(ellipse at 42% 48%, rgba(61,168,245,0.10), transparent 72%); pointer-events: none; z-index: 0; }
  .hero .wrap { position: relative; z-index: 1; }
  .eyebrow { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; margin: 0 0 22px; }
  .eyebrow b { color: var(--accent); font-weight: 500; }
  /* One studio signature, two deliberate roles. Home carries the expressive
     identity treatment; shared footers stay quiet so the page can close. */
  .studio-signature-full .studio-brand-echo { color: var(--accent); }
  .studio-signature-full .method-echo { color: var(--accent); font-weight: 500; }
  .studio-signature-full .method-lupa { color: var(--amber); font-weight: 500; }
  .studio-signature-full .sep { color: var(--muted); font-weight: 400; }
  .studio-signature-compact { color: var(--muted); font-weight: 400; }
  .eyebrow, .page-hero .tag {
    position: relative; display: table;
  }
  .hero h1 { text-wrap: balance; font-family: var(--font-display); font-weight: 700; font-size: var(--type-home-display); line-height: 1.02; letter-spacing: -0.025em; margin: 0; max-width: 18ch; }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .lede {
    margin: 26px 0 0; max-width: 56ch;
    font-size: clamp(1.05rem, 2.2vw, 1.22rem);
    line-height: 1.55;
    text-wrap: pretty;
    color: color-mix(in srgb, var(--paper) 88%, transparent);
  }
  .hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 34px; }
  .status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--paper); border: 1px solid var(--line); background: var(--panel); padding: 9px 14px; border-radius: 999px; }
  .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.85rem; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--line); transition: border-color var(--motion-response) var(--ease-standard), background var(--motion-response) var(--ease-standard), color var(--motion-response) var(--ease-standard), box-shadow var(--motion-response) var(--ease-standard), transform var(--motion-response) var(--ease-standard); }
  .btn:hover { transform: translateY(-1px); }
  /* Shared CTA law: identity is carried by outlined color, not a solid fill.
     Echo blue and Lupa gold are the expressive bookends; neutral branch and
     ghost buttons stay quiet until interaction. Internal CTA buttons are
     text-only — arrows belong to inline travel links, not the button skin. */
  .btn-echo {
    color: color-mix(in srgb, var(--accent) 88%, var(--paper));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent) 4%, var(--panel));
  }
  .btn-echo:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 24px rgba(61,168,245,0.10);
  }
  .btn-echo:focus-visible {
    outline-color: color-mix(in srgb, var(--accent) 88%, white);
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .btn-branch {
    background: color-mix(in srgb, var(--panel) 76%, transparent);
    color: var(--paper-dim);
    border-color: color-mix(in srgb, var(--paper-dim) 26%, var(--line));
  }
  .btn-branch:hover, .btn-ghost:hover {
    color: var(--paper);
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 22px rgba(61,168,245,0.08);
  }
  .btn-lupa {
    color: color-mix(in srgb, var(--amber) 88%, var(--paper));
    border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
    background: color-mix(in srgb, var(--amber) 4%, var(--panel));
  }
  .btn-lupa:hover {
    color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 70%, var(--line));
    box-shadow: 0 0 24px rgba(232,163,61,0.10);
  }
  .btn-lupa:focus-visible {
    outline-color: color-mix(in srgb, var(--amber) 88%, white);
    border-color: color-mix(in srgb, var(--amber) 70%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 18%, transparent);
  }

  /* ============ SECTION SCAFFOLD ============ */
  .block { padding-block: var(--space-section); border-top: 1px solid var(--line); }
  .block-head { margin-bottom: var(--space-section-head); }
  .block-head > .tag { margin: 0; }
  .block-head h2 { text-wrap: balance; font-family: var(--font-display); font-weight: 700; font-size: var(--type-section-title); letter-spacing: -0.02em; line-height: 1.08; margin: var(--space-label-title) 0 0; max-width: 22ch; }
  .block-head p:not(.tag) { text-wrap: pretty; color: var(--muted); margin: var(--space-title-deck) 0 0; max-width: 56ch; }

  /* ============ CAPABILITY CARDS ============ */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
  @media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 22px 22px 26px; transition: border-color var(--motion-surface) var(--ease-standard), transform var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard); }
  .card:hover { border-color: var(--accent); transform: translateY(-3px); background: var(--panel-2); }
  .card .kicker { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); letter-spacing: 0.04em; }
  .card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; margin: 14px 0 8px; letter-spacing: -0.01em; }
  .card p { margin: 0; color: var(--muted); font-size: 0.97rem; }

  /* ============ PROJECTS ============ */
  .work-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-grid); }
  @media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }
  .work-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
  @media (max-width: 760px) { .work-secondary-grid { grid-template-columns: 1fr; } }
  .work-card { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 24px; display: flex; flex-direction: column; min-height: 200px;
    transition: border-color var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard); }
  .work-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .work-card .kicker { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); letter-spacing: 0.04em; }
  .work-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; margin: 12px 0 8px; letter-spacing: -0.015em; }
  .work-card p { color: var(--muted); margin: 0 0 18px; font-size: 0.97rem; }
  .work-card .meta { margin-top: auto; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
  .record-link { color: inherit; border-bottom: 1px solid var(--line); transition: color var(--motion-response) var(--ease-standard), border-color var(--motion-response) var(--ease-standard); }
  .record-link:hover { color: var(--paper); border-color: var(--accent); }

  /* ============ BUILD LOG (the thread) ============ */
  .log { list-style: none; margin: 0; padding: 0; position: relative; }
  .log::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
  .log li { position: relative; padding: 16px 0 16px 30px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px; align-items: baseline; border-top: 1px solid var(--line); }
  .log .record-meta { display: grid; grid-template-columns: 86px max-content max-content; gap: 14px; align-items: baseline; min-width: 0; }
  .log li:first-child { border-top: none; }
  .log .node { position: absolute; left: 1px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  /* Record accent is one explicit entry-level source of truth. Blue is the
     Studio/project path; gold is Lupa. The same authored value owns the node,
     project label, mechanism phase, and accent-aware state dots so new entries
     never need hidden runtime exceptions. */
  .log li[data-record-accent="blue"] .node { background: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 42%, transparent); }
  .log li[data-record-accent="gold"] .node { background: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 55%, transparent); }
  .log li.now .node { animation: pulse var(--motion-pulse) var(--ease-out) infinite; }
  .log time { font-family: var(--font-mono); font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .log .ltag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.04em; white-space: nowrap; }
  .log li[data-record-accent="blue"] .ltag { color: var(--accent); }
  .log li[data-record-accent="gold"] .ltag { color: var(--amber); }
  .log .record-meta .pill { white-space: nowrap; }
  .log .pill--proven .pdot,
  .log .pill--milestone .pdot { background: var(--paper); }
  .log li[data-record-accent="blue"] .pill--proven .pdot,
  .log li[data-record-accent="blue"] .pill--milestone .pdot,
  .log li[data-record-accent="blue"] .pill--active .pdot { background: var(--accent); }
  .log li[data-record-accent="gold"] .pill--proven .pdot,
  .log li[data-record-accent="gold"] .pill--milestone .pdot,
  .log li[data-record-accent="gold"] .pill--active .pdot { background: var(--amber); }
  .log .pill--proven .pdot { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent); }
  .log .pill--milestone { color: color-mix(in srgb, var(--paper-dim) 88%, var(--muted)); }
  .log .note { font-family: var(--font-body); color: var(--paper); font-size: 0.98rem; line-height: 1.45; }
  .log .note b { color: var(--paper); font-weight: 600; }
  .log .lwhy { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin-top: 3px; }
  @media (max-width: 760px) {
    .log li { grid-template-columns: 1fr; gap: 8px; padding-left: 26px; }
    .log .record-meta { grid-template-columns: 82px minmax(0, 1fr); gap: 6px 12px; }
    .log .record-meta .pill { grid-column: 2; justify-self: start; }
  }

  /* ============ THE RECORD: a living vertical Rolodex ============
     The authored .log remains the no-JavaScript fallback. studio.js wraps it
     in a native vertical scroller and maps that scroll position onto one fixed
     card plane plus the real-neighbor edge peeks. The spindle is one quiet
     object: the axle sits behind the card, the endcaps show wheel position,
     and the surrounding room light phases with the active record. */
  .record-shell {
    --record-color: rgb(61 168 245);
    --record-glow-rgb: 61 168 245;
    --record-turn: 0deg;
    --record-axis: 43%;
    position: relative; height: clamp(300px, 30vw, 356px); margin-top: -16px;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch;
    border-radius: 20px; isolation: isolate;
  }
  .record-shell::-webkit-scrollbar { width: 0; height: 0; }
  .record-shell:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--record-color) 72%, var(--paper));
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgb(var(--record-glow-rgb) / .16), 0 0 28px rgb(var(--record-glow-rgb) / .11);
  }
  .record-stage {
    position: sticky; top: 0; height: 100%; overflow: hidden;
    perspective: 1120px; perspective-origin: 50% var(--record-axis);
    transform-style: preserve-3d; isolation: isolate;
  }
  /* No container around the Record: the mechanism only bends the existing
     room light. The field has no hard edge and phases with the selected entry. */
  .record-stage::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    /* The room field has no side lamps of its own. It is one broad, masked
       atmospheric depression behind the mechanism; the endcaps below are the
       only lateral light sources. The radial mask forces the field to die in
       open air before any scroll-stage edge can read as a rectangle. */
    inset: 3% 7% 1%;
    background:
      radial-gradient(ellipse 54% 62% at 50% var(--record-axis), rgb(var(--record-glow-rgb) / .070), transparent 72%),
      radial-gradient(ellipse 70% 72% at 50% var(--record-axis), rgba(0,0,0,.19), transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% var(--record-axis), #000 0 54%, rgba(0,0,0,.86) 68%, transparent 100%);
    mask-image: radial-gradient(ellipse 76% 72% at 50% var(--record-axis), #000 0 54%, rgba(0,0,0,.86) 68%, transparent 100%);
    filter: blur(11px);
    opacity: .86;
    transition: background var(--motion-surface) var(--ease-standard), opacity var(--motion-surface) var(--ease-standard);
  }

  /* One continuous spindle. The axle stays behind the cards; the endcaps sit
     in the narrow side gutters so the mechanism reads without framing the
     content in another box. */
  .record-axle {
    position: absolute; z-index: 1; pointer-events: none;
    inset: 0; top: var(--record-axis); height: 2px;
    transform: translateY(-50%);
  }
  .record-axle::before,
  .record-axle::after {
    content: ""; position: absolute; top: 0; height: 2px;
    width: calc(clamp(50px, 4.2vw, 64px) - 22px);
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--record-color) 64%, var(--line)),
      color-mix(in srgb, var(--record-color) 22%, var(--line)));
    box-shadow: 0 0 15px rgb(var(--record-glow-rgb) / .14);
    transition: background var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
  }
  .record-axle::before { left: 22px; }
  .record-axle::after { right: 22px; transform: scaleX(-1); }
  .record-endcaps {
    position: absolute; z-index: 5; inset: 0; pointer-events: none;
  }
  .record-endcap {
    position: absolute; top: var(--record-axis); width: 46px; height: 96px;
    transform: translateY(-50%);
    filter: drop-shadow(0 9px 15px rgba(0,0,0,.34));
    transition: filter var(--motion-surface) var(--ease-standard);
  }
  .record-endcap::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px;
    transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgb(var(--record-glow-rgb) / .155) 0 10%, rgb(var(--record-glow-rgb) / .072) 32%, rgb(var(--record-glow-rgb) / .025) 52%, transparent 74%);
    filter: blur(5px); opacity: .90;
    transition: background var(--motion-surface) var(--ease-standard), opacity var(--motion-surface) var(--ease-standard);
  }
  .record-endcap::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 70px; height: 34px;
    transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse, rgb(var(--record-glow-rgb) / .085) 0 12%, rgb(var(--record-glow-rgb) / .030) 42%, transparent 76%);
    filter: blur(8px); opacity: .68;
    transition: background var(--motion-surface) var(--ease-standard), opacity var(--motion-surface) var(--ease-standard);
  }
  /* Keep each actual light source far enough inside the clipping wall that its
     halo reaches full transparency naturally. The axle connection remains
     unchanged; only the decorative source moves inward a few pixels. */
  .record-endcap--left { left: 16px; }
  .record-endcap--right { right: 16px; }
  .record-endcap__spine {
    position: absolute; left: 50%; top: 13px; bottom: 13px; width: 10px;
    transform: translateX(-50%); border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--record-color) 34%, var(--line));
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--panel) 92%, black),
      color-mix(in srgb, var(--record-color) 21%, var(--panel-2)) 45%,
      color-mix(in srgb, var(--paper) 8%, var(--panel-2)) 58%,
      color-mix(in srgb, var(--panel) 92%, black));
    box-shadow: inset 0 0 0 1px rgba(237,239,243,.025), 0 0 12px rgb(var(--record-glow-rgb) / .11);
    transition: border-color var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
  }
  .record-endcap__spine::before,
  .record-endcap__spine::after {
    content: ""; position: absolute; left: 50%; width: 27px; height: 11px;
    transform: translateX(-50%); border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--record-color) 31%, var(--line));
    background: radial-gradient(ellipse at 50% 46%,
      color-mix(in srgb, var(--record-color) 19%, var(--panel-2)) 0 23%,
      color-mix(in srgb, var(--paper) 5%, var(--panel)) 27% 52%,
      color-mix(in srgb, var(--ink) 94%, black) 58% 100%);
    box-shadow: 0 0 9px rgb(var(--record-glow-rgb) / .09), inset 0 1px rgba(237,239,243,.035);
    transition: border-color var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
  }
  .record-endcap__spine::before { top: -6px; }
  .record-endcap__spine::after { bottom: -6px; }
  .record-endcap__hub {
    position: absolute; left: 50%; top: 50%; width: 29px; height: 29px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--record-color) 62%, var(--line));
    background:
      radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--paper) 82%, var(--record-color)) 0 1px,
        color-mix(in srgb, var(--record-color) 62%, var(--panel-2)) 2px 5px,
        color-mix(in srgb, var(--panel-2) 86%, var(--ink)) 6px 10px,
        color-mix(in srgb, var(--record-color) 22%, var(--panel)) 11px 100%);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 76%, transparent), 0 0 18px rgb(var(--record-glow-rgb) / .24);
    transform: translate(-50%,-50%) rotate(var(--record-turn));
    transition: border-color var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
  }
  .record-endcap__hub::before {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px solid rgb(var(--record-glow-rgb) / .12);
    box-shadow: 0 0 13px rgb(var(--record-glow-rgb) / .10);
  }
  .record-endcap__hub::after {
    content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 8px;
    transform: translateX(-50%); border-radius: 99px;
    background: color-mix(in srgb, var(--record-color) 86%, var(--paper));
    box-shadow: 0 0 7px rgb(var(--record-glow-rgb) / .42);
  }

  /* The 50-entry Record is a fixed visual window, not a 46-card 3D pile.
     The active authored card stays full-size at the axle. Two presentation
     edges represent the real immediate neighbors and disappear only when that
     neighbor does not exist. This keeps endpoint and interior geometry equal. */
  .record-stage::after { display: none; }
  .record-stage .log {
    position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0;
  }
  .record-stage .log::before { display: none; }

  .record-stage .log li {
    position: absolute; top: var(--record-axis); left: clamp(50px, 4.2vw, 64px); right: clamp(50px, 4.2vw, 64px);
    height: var(--record-card-height, auto); min-height: 156px; padding: 22px 28px 22px 44px; margin: 0;
    grid-template-columns: max-content minmax(0,1fr); gap: clamp(16px, 1.8vw, 26px); align-items: baseline;
    border: 1px solid color-mix(in srgb, var(--line) 88%, var(--moon));
    border-radius: 14px;
    background:
      linear-gradient(105deg, rgb(var(--record-glow-rgb) / .018), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 78%, var(--ink)), var(--panel));
    box-shadow: 0 24px 54px rgba(0,0,0,.34), inset 0 1px rgba(237,239,243,.025);
    overflow: hidden; contain: paint;
    transform: translate3d(0,-50%,0);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: border-color var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard);
  }
  .record-stage .record-meta {
    display: grid; grid-template-columns: 86px max-content max-content;
    gap: 14px; align-items: baseline; min-width: 0;
  }
  .record-stage .log .note { min-width: 0; }
  .record-stage .log li::before {
    content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent,
      color-mix(in srgb, var(--record-color) 42%, var(--line)) 20%,
      color-mix(in srgb, var(--record-color) 42%, var(--line)) 80%, transparent);
    opacity: 1;
    transition: background var(--motion-surface) var(--ease-standard);
  }
  .record-stage .log li.is-record-active {
    opacity: 1; visibility: visible; pointer-events: auto; z-index: 3;
    /* The selected card should catch the mechanism's light, not wear a neon
       rectangle. Keep the structural border nearly neutral and let color pool
       where the axle meets the card, then disappear into the face. */
    border-color: color-mix(in srgb, var(--record-color) 11%, var(--line));
    background:
      radial-gradient(ellipse 13% 30% at 1.5% 50%, rgb(var(--record-glow-rgb) / .070), transparent 80%),
      radial-gradient(ellipse 13% 30% at 98.5% 50%, rgb(var(--record-glow-rgb) / .070), transparent 80%),
      linear-gradient(105deg, rgb(var(--record-glow-rgb) / .018), transparent 30%),
      linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 80%, var(--ink)), var(--panel));
    box-shadow:
      0 30px 66px rgba(0,0,0,.42),
      0 0 20px rgb(var(--record-glow-rgb) / .030),
      inset 0 1px rgba(237,239,243,.050),
      inset 0 -18px 30px rgba(0,0,0,.055);
  }
  .record-stage .log li.is-record-active::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background:
      radial-gradient(ellipse 62% 16% at 50% 0%, rgb(var(--record-glow-rgb) / .095), transparent 74%),
      linear-gradient(180deg, rgba(237,239,243,.030), transparent 16%, transparent 74%, rgba(0,0,0,.080)),
      linear-gradient(105deg, rgb(var(--record-glow-rgb) / .032), transparent 30%);
    box-shadow: inset 0 1px 0 rgb(var(--record-glow-rgb) / .11);
  }
  .record-stage .log .node { left: 17px; top: 28px; z-index: 1; }
  .record-stage .log li:first-child { border-top: 1px solid color-mix(in srgb, var(--line) 88%, var(--moon)); }

  .record-peek {
    --record-peek-rgb: 61 168 245;
    position: absolute; z-index: 2;
    left: clamp(62px, 5.2vw, 78px); right: clamp(62px, 5.2vw, 78px);
    height: 34px; border-radius: 13px;
    border: 1px solid rgb(var(--record-peek-rgb) / .055);
    background:
      linear-gradient(180deg, rgb(var(--record-peek-rgb) / .016), transparent 62%),
      color-mix(in srgb, var(--panel) 72%, var(--ink));
    box-shadow:
      0 20px 42px rgba(0,0,0,.30),
      inset 0 1px rgba(237,239,243,.026),
      inset 0 -7px 13px rgba(0,0,0,.055),
      0 0 12px rgb(var(--record-peek-rgb) / .018);
    opacity: .78; pointer-events: none;
    transition: opacity var(--motion-response) var(--ease-standard), border-color var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard);
  }
  .record-peek--above {
    top: calc(var(--record-axis) - var(--record-card-half, 78px) - 46px);
  }
  .record-peek--below {
    top: calc(var(--record-axis) + var(--record-card-half, 78px) + 12px);
  }
  .record-peek.is-record-peek-hidden { opacity: 0; visibility: hidden; }

  /* A discrete slot change gets a small mechanical settle. There is no scale,
     perspective, or fractional-scroll transform, so a card's physical shape
     cannot change while a wheel gesture is in flight. */
  @keyframes record-rock-older {
    0% { transform: translate3d(0,calc(-50% + 4px),0); }
    55% { transform: translate3d(0,calc(-50% - 2px),0); }
    100% { transform: translate3d(0,-50%,0); }
  }
  @keyframes record-rock-newer {
    0% { transform: translate3d(0,calc(-50% - 4px),0); }
    55% { transform: translate3d(0,calc(-50% + 2px),0); }
    100% { transform: translate3d(0,-50%,0); }
  }
  @keyframes record-peek-rock-older {
    0% { transform: translateY(3px); }
    55% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
  }
  @keyframes record-peek-rock-newer {
    0% { transform: translateY(-3px); }
    55% { transform: translateY(1px); }
    100% { transform: translateY(0); }
  }
  .record-shell.record-rock-older .record-stage .log li.is-record-active { animation: record-rock-older 180ms var(--ease-standard); }
  .record-shell.record-rock-newer .record-stage .log li.is-record-active { animation: record-rock-newer 180ms var(--ease-standard); }
  .record-shell.record-rock-older .record-peek:not(.is-record-peek-hidden) { animation: record-peek-rock-older 180ms var(--ease-standard); }
  .record-shell.record-rock-newer .record-peek:not(.is-record-peek-hidden) { animation: record-peek-rock-newer 180ms var(--ease-standard); }
  .record-orientation {
    position: absolute; z-index: 6; left: 50%; bottom: 8px;
    transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
    pointer-events: none; white-space: nowrap;
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .062em;
    color: color-mix(in srgb, var(--muted) 92%, var(--paper-dim));
    text-shadow: 0 0 12px rgb(var(--record-glow-rgb) / .07);
  }
  .record-orientation__band {
    display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; font-weight: 600;
  }
  .record-orientation__band::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--record-color);
    box-shadow: 0 0 0 3px rgb(var(--record-glow-rgb) / .055), 0 0 12px rgb(var(--record-glow-rgb) / .34);
    transition: background var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
  }
  .record-orientation__period { color: color-mix(in srgb, var(--paper-dim) 88%, var(--muted)); }
  .record-spacer { position: relative; z-index: 0; width: 1px; pointer-events: none; }
  .record-shell.is-dragging .record-stage .log li { cursor: grabbing; }

  @media (max-width: 700px) {
    .record-shell { --record-axis: 48%; height: 390px; margin-top: -2px; }
    .record-axle::before,
    .record-axle::after { width: 14px; }
    .record-axle::before { left: 15px; }
    .record-axle::after { right: 15px; }
    .record-endcap { width: 30px; height: 82px; }
    .record-endcap--left { left: 12px; }
    .record-endcap--right { right: 12px; }
    .record-endcap::before { width: 54px; height: 54px; }
    .record-endcap__spine { width: 8px; }
    .record-endcap__spine::before,
    .record-endcap__spine::after { width: 21px; height: 9px; }
    .record-endcap__hub { width: 24px; height: 24px; }
    .record-stage .log li {
      left: 29px; right: 29px; min-height: 232px; padding: 24px 22px 24px 41px;
      grid-template-columns: 1fr; gap: 12px; align-content: center;
    }
    .record-peek { left: 38px; right: 38px; height: 30px; }
    .record-peek--above { top: calc(var(--record-axis) - var(--record-card-half, 116px) - 40px); }
    .record-peek--below { top: calc(var(--record-axis) + var(--record-card-half, 116px) + 10px); }
    .record-stage .record-meta {
      grid-template-columns: max-content minmax(0, 1fr); gap: 7px 12px;
    }
    .record-stage .record-meta .pill { grid-column: 2; justify-self: start; }
    .record-stage .log .node { left: 16px; top: 31px; }
    .record-stage .log li::before { left: 20px; }
    .record-stage .log .pill { justify-self: start; }
    .record-orientation { bottom: 7px; font-size: .67rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .record-stage { perspective: none; }
    .record-endcap__hub { transform: translate(-50%,-50%); }
  }

  @media (forced-colors: active) {
    .record-axle, .record-endcaps, .record-stage::before, .record-stage::after, .record-orientation { display: none; }
    .record-stage .log li { background: Canvas; border-color: CanvasText; box-shadow: none; }
  }

  /* ============ THE CREW: the studio's order ============ */
  .hier { display: flex; flex-direction: column; align-items: center; }
  .tier { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 580px; }
  .tier-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .connector { width: 1px; height: 26px; background: var(--line); }
  .rank-node { display: flex; align-items: center; gap: 16px; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 16px 20px; }
  .rank-node .badge { width: 56px; height: 56px; }
  .rank-text { display: flex; flex-direction: column; }
  .rank-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
  .rank-name.echo { color: var(--accent); } .rank-name.lupa { color: var(--amber); }
  .rank-role { color: var(--muted); font-size: 0.9rem; line-height: 1.4; margin-top: 2px; }
  .fingers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .finger { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.92rem; color: var(--fc, var(--paper));
          background: color-mix(in srgb, var(--fc, var(--accent)) 2.5%, var(--panel));
          border: 1px solid color-mix(in srgb, var(--fc, var(--accent)) 18%, var(--line));
          border-radius: 999px; padding: 9px 16px;
          box-shadow: 0 12px 30px rgba(0,0,0,.15), 0 0 22px color-mix(in srgb, var(--fc, var(--accent)) 7%, transparent);
          transition: border-color var(--motion-response) var(--ease-standard), transform var(--motion-response) var(--ease-standard), box-shadow var(--motion-response) var(--ease-standard), background var(--motion-response) var(--ease-standard); }
  .finger:hover { border-color: color-mix(in srgb, var(--fc, var(--accent)) 72%, var(--line)); transform: translateY(-2px);
          background: color-mix(in srgb, var(--fc, var(--accent)) 5%, var(--panel));
          box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 28px color-mix(in srgb, var(--fc, var(--accent)) 13%, transparent); }
  .finger .fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--fc, var(--accent)); flex: none; }
  /* member flags: each chip flies its model's color (dot, text, and hover border) */
  .m-claude     { --fc: #D97757; }  /* Anthropic clay  */
  .m-gpt        { --fc: #10A37F; }  /* OpenAI green    */
  .m-grok       { --fc: #ECECEC; }  /* xAI mono: light on dark */
  .m-perplexity { --fc: #1FB8CD; }  /* Perplexity teal */
  .m-gemini     { --fc: #8E7CFF; }  /* Gemini violet   */
  .m-gemini .fdot { background: linear-gradient(135deg, #4285F4, #9B6FE0); }  /* Gemini's true gradient */
  /* Shared agent-underlay pattern used by Home and Studio. The animated dots
     live in the hierarchy, not inside the text field; the copy field then
     shrink-wraps to its content up to the shared reading cap. */
  /* Canonical agent tier used unchanged on Home and Studio: label, animated
     dots, then the compact dotted explanation field. Page-specific variants
     are intentionally prohibited so the hierarchy cannot drift again. */
  .agents-underneath { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
  .agents-underneath > .tier-label { text-align:center; }
  .agents-band { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; width:auto; max-width:min(100%, 520px); margin-inline:auto; font-family:var(--font-mono); font-size:0.82rem; color:var(--muted); text-align:left; }
  .agents-band.field-chip {
    width:auto; max-width:min(100%, 520px); margin-inline:auto; padding:10px 16px;
    background:linear-gradient(90deg, rgba(61,168,245,.028), rgba(255,255,255,.013) 50%, rgba(232,163,61,.028));
    border-color:color-mix(in srgb, var(--paper) 8%, var(--line));
    box-shadow:0 15px 39px rgba(0,0,0,.12), -19px 0 44px rgba(61,168,245,.02), 19px 0 44px rgba(232,163,61,.02);
  }
  .agents-band.field-chip span:last-child { flex:0 1 auto; min-width:0; }
  .agent-dots { display:inline-flex; gap:5px; align-self:center; }
  .agent-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.5; display: inline-block; }
  @media (max-width: 520px) { .rank-node { flex-direction: column; align-items: flex-start; } }

  /* ============ THE TRUNK (round two, 2026-07-20) ============ */
  /* The tree vision: trunk page, ~175 visible words, branches are doors.
     Amber appears exactly THREE places on the trunk: the word "grew" in the
     H1, Lupa's crew chip, Lupa's contact link. Everything else accent-blue. */
  .hero h1 em.grew { color: var(--amber); }
  a.card { display: block; }
  /* the belt: the Rolodex reborn as the what-we-make rail (breadth as doors) */
  .belt { display: flex; align-items: stretch; gap: 12px; overflow-x: auto;
          padding: 4px 2px 14px; scroll-snap-type: x proximity;
          scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .belt::-webkit-scrollbar { height: 8px; }
  .belt::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .belt > a { scroll-snap-align: start; flex: 0 0 265px; }
  .belt .card h3 { margin: 12px 0 6px; }
  .belt .card p { font-size: 0.92rem; }
  @media (max-width: 520px) { .belt > a { flex-basis: 82vw; } }
  /* Home composition: the four project doors and the method hierarchy occupy
     one shared visual field. At desktop the doors distribute evenly instead of
     leaving a ragged remainder on the feature rail; the five auditor chips
     widen into the middle tier of the hierarchy. Narrow screens keep the
     established horizontal belt and natural chip wrapping. */
  @media (min-width: 901px) {
    .theme-home .belt.home-feature-field {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      overflow: visible; padding-inline: 0;
    }
    .theme-home #method .fingers {
      width: min(100%, 760px);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
    }
    .theme-home #method .finger { justify-self: center; }
  }
  .theme-home #method .finger { width:134px; justify-content:center; box-sizing:border-box; }
  /* the compact method flow: labels only, no role paragraphs */
  .mini-hier { display: flex; flex-direction: column; align-items: center; }
  .mini-node { display: inline-flex; align-items: center; gap: 12px; background: var(--panel);
          border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px;
          font-family: var(--font-mono); font-size: 0.95rem;
          box-shadow: 0 14px 34px rgba(0,0,0,.16);
          transition: border-color var(--motion-response) var(--ease-standard), transform var(--motion-response) var(--ease-standard), box-shadow var(--motion-response) var(--ease-standard), background var(--motion-response) var(--ease-standard); }
  .mini-node.is-echo { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); background: color-mix(in srgb, var(--accent) 2.5%, var(--panel)); box-shadow: 0 14px 34px rgba(0,0,0,.16), 0 0 28px rgba(61,168,245,.08); }
  .mini-node.is-lupa { border-color: color-mix(in srgb, var(--amber) 22%, var(--line)); background: color-mix(in srgb, var(--amber) 2.5%, var(--panel)); box-shadow: 0 14px 34px rgba(0,0,0,.16), 0 0 28px rgba(232,163,61,.08); }
  a.mini-node:hover { transform: translateY(-2px); }
  a.mini-node.is-echo:hover { border-color: color-mix(in srgb, var(--accent) 72%, var(--line)); box-shadow: 0 16px 38px rgba(0,0,0,.18), 0 0 34px rgba(61,168,245,.14); }
  a.mini-node.is-lupa:hover { border-color: color-mix(in srgb, var(--amber) 72%, var(--line)); box-shadow: 0 16px 38px rgba(0,0,0,.18), 0 0 34px rgba(232,163,61,.14); }
  .mini-node .badge { width: 30px; height: 30px; }
  .mini-node .mname { font-weight: 600; }
  .mini-node .mname.echo { color: var(--accent); }
  .mini-node .mname.lupa { color: var(--amber); }
  .mini-node .mrole { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
  .hier-hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
          letter-spacing: 0.04em; width: min(100%, 760px); margin: 18px auto 0; text-align: center; }
  /* one-line moving strip */

  /* ============ CONTACT ============ */
  .contact h2 em { font-style: normal; color: var(--accent); }
  .contact-links { display: flex; flex-wrap: wrap; gap: 12px; }
  .clink { font-family: var(--font-mono); font-size: 0.85rem; border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; transition: border-color var(--motion-response) var(--ease-standard), transform var(--motion-response) var(--ease-standard); }
  .clink:hover { border-color: var(--accent); transform: translateY(-1px); }
  .clink b { color: var(--accent); font-weight: 500; }
  .clink.amber b { color: var(--amber); } .clink.amber:hover { border-color: var(--amber); }
  /* GitHub: same chip as .nav-cta — near-black / white, not studio accent.
     One treatment for every GitHub button in the house. */
  .clink.github {
    color: var(--paper);
    background: #161b22;
    border-color: color-mix(in srgb, var(--paper) 16%, transparent);
  }
  .clink.github b { color: var(--paper); font-weight: 500; }
  .clink.github:hover {
    color: var(--paper);
    background: #21262d;
    border-color: color-mix(in srgb, var(--paper) 28%, transparent);
    transform: translateY(-1px);
  }

  /* ============ FOOTER ============ */
  .site-footer { position: relative; border-top: 1px solid var(--line); padding-block: 30px; }
  /* The hidden lantern now lives beside the studio signature instead of on
     the footer seam. At rest it reads as punctuation; hover/focus wakes it. */
  .footer-signature {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    max-width: 100%; flex-wrap: wrap;
  }
  /* Phone widths: nowrap used to push the lantern past the clipped viewport
     edge, severing the game's primary discovery path on mobile (fleet find,
     2026-07-28). The signature text may wrap; the lantern stays reachable. */
  @media (max-width: 480px) {
    .footer-signature { white-space: normal; }
  }
  button.lantern-knock {
    position: relative; z-index: 1; flex: 0 0 auto;
    width: 28px; height: 32px; padding: 0; display: grid; place-items: center;
    color: rgba(185, 197, 214, 0.25); opacity: .34;
    appearance: none; background: transparent; border: 0; border-radius: 50%; cursor: default;
    transition: color .24s ease, opacity .24s ease, transform .24s ease, filter .3s ease;
  }
  .lantern-knock svg { width: 14px; height: 19px; overflow: visible; }
  .lantern-handle, .lantern-frame {
    fill: none; stroke: currentColor; stroke-width: 1.35;
    stroke-linecap: square; stroke-linejoin: miter;
  }
  .lantern-light {
    fill: rgba(232, 163, 61, .62); stroke: rgba(255, 215, 142, .64); stroke-width: .7;
    transform-box: fill-box; transform-origin: center;
    animation: lanternBreath var(--motion-breath) var(--ease-breath) infinite;
  }
  .lantern-knock::after {
    content: ""; position: absolute; left: 50%; top: 54%; width: 8px; height: 8px;
    border-radius: 50%; transform: translate(-50%, -50%);
    background: rgba(232, 163, 61, .18); filter: blur(6px); opacity: .34;
    transition: width .3s ease, height .3s ease, opacity .3s ease, background .3s ease;
    pointer-events: none;
  }
  .lantern-knock:hover, .lantern-knock:focus-visible {
    color: rgba(232, 210, 174, .90); opacity: 1;
    transform: translateY(-1px) scale(1.04);
    filter: drop-shadow(0 0 7px rgba(232, 163, 61, .24));
  }
  .lantern-knock:hover::after, .lantern-knock:focus-visible::after {
    width: 18px; height: 18px; opacity: .78; background: rgba(232, 163, 61, .28);
  }
  @keyframes lanternBreath {
    0%, 100% { opacity: .55; transform: scale(.92); }
    48% { opacity: .96; transform: scale(1.05); }
    62% { opacity: .72; transform: scale(.98); }
  }
  /* The sticky header owns desktop navigation across the public site.
     Below 660px its section links hide, so the footer becomes the compact fallback map. */
  .footer-nav { display: none; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 16px; font-family: var(--font-mono); font-size: 0.8rem; }
  .footer-nav a { color: var(--muted); transition: color var(--motion-response) var(--ease-standard), text-shadow var(--motion-response) var(--ease-standard); }
  .footer-nav a:hover { color: var(--paper); }
  /* The footer becomes the internal room map below 660px, when the matching
     header links are hidden. Keep the current room visible and announced. */
  .footer-nav a[aria-current="page"] { color: var(--paper); position: relative; }
  .footer-nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
    background: var(--accent); box-shadow: 0 0 9px rgba(61,168,245,0.34);
  }
  .theme-lupa .footer-nav a[aria-current="page"]::after {
    background: var(--amber); box-shadow: 0 0 9px rgba(232,163,61,0.40);
  }
  @media (max-width: 660px) {
    .footer-nav { display: flex; }
  }
  .footer-row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
  .footer-row a:not(.lantern-knock) { color: var(--muted); transition: color var(--motion-response) var(--ease-standard); }
  .footer-row a:not(.lantern-knock):hover { color: var(--accent); }

  /* ============ RESPONSIVE DENSITY ============
     Repeated cards and controls compact slightly on phones. The hierarchy,
     reading measure, and 44px target contract remain unchanged. */
  @media (max-width: 560px) {
    .card { padding: 20px 20px 22px; }
    .work-card { min-height: 0; padding: 22px; }
    .hero-row { margin-top: 30px; }
  }

  /* ============ INPUT MODALITY ============
     Shared links and controls keep one semantic surface across mouse, keyboard,
     and touch. Coarse pointers receive a comfortable target without forcing
     larger artwork, while decorative hover travel is disabled where hover can
     stick after a tap. See docs/EXPERIENCE-STANDARDS.md. */
  @media (hover: none), (pointer: coarse) {
    .wordmark, .nav a, .footer-nav a, .btn, .finger, .clink, a.mini-node, .lantern-knock {
      min-height: var(--target-min);
    }
    .nav a, .footer-nav a { display: inline-flex; align-items: center; }
    .btn:hover, .card:hover, .finger:hover, a.mini-node:hover, .clink:hover,
    .lantern-knock:hover { transform: none; }
    .lantern-knock:hover { filter: none; }
  }

  /* ============ VISUALLY HIDDEN ============
     One definition for the whole site. Was previously declared twice,
     locally, in gate.html and lupa.html, with gate's copy missing the
     clip-path line. gate.html keeps a local copy because it does not
     load this file; lupa.html no longer needs one. */
  .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap; border: 0; }

  /* ============ SCROLL REVEAL ============ */
  .reveal { opacity: 1; transform: none; }
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--motion-reveal) var(--ease-standard), transform var(--motion-reveal) var(--ease-standard); }
  .js .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .dot, .log li.now .node { animation: none; } }

/* ===== sub-page chrome (breadcrumb, page hero, prose, dividers) ===== */
.crumb { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.82rem; color:var(--muted); margin-bottom:26px; flex-wrap:wrap; }
.crumb a { color:var(--muted); }
.crumb a:hover { color:var(--paper); }
.crumb .sep { opacity:0.5; }
.crumb .here { color:var(--paper); }

.page-hero { padding: var(--space-page-top) 0 var(--space-page-bottom); }
.page-hero > .tag { margin: 0; }
.page-hero h1 { text-wrap:balance; font-family:var(--font-display); font-weight:700; font-size:var(--type-page-title); line-height:1.04; letter-spacing:-0.02em; margin:var(--space-label-title) 0 0; max-width:22ch; }
.page-hero .lead { margin:var(--space-title-deck) 0 0; font-size:clamp(1.05rem, 2vw, 1.28rem); color:var(--paper-dim); max-width:60ch; line-height:1.6; text-wrap:pretty; }

.prose { max-width: 66ch; }
.prose p { color:var(--paper-dim); line-height:1.72; margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--paper); font-weight:600; }
.prose em { color:var(--paper); font-style:italic; }

.rule { height:1px; background:var(--line); border:0; margin: var(--space-rule) 0; }
.note-soft { font-family:var(--font-mono); font-size:0.84rem; color:var(--muted); border-left:2px solid var(--line); padding:4px 0 4px 16px; line-height:1.6; max-width:62ch; }

  /* Shared quiet field pieces: dotted text fields and supporting note blocks.
     These keep small secondary structures consistent across rooms without
     forcing every page to invent its own hover, spacing, and readability rules. */
  .field-chip {
    --field-accent: var(--accent);
    position:relative;
    display:inline-flex;
    flex-direction:column;
    gap:4px;
    border:1px dashed color-mix(in srgb, var(--line) 90%, rgba(255,255,255,0.05));
    border-radius:14px;
    padding:10px 16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
    box-shadow:0 14px 42px rgba(0,0,0,0.12);
    transition:border-color var(--motion-surface) var(--ease-standard), background var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
    outline:none;
  }
  .field-chip--row {
    flex-direction:row;
    align-items:center;
  }
  .field-chip::before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--field-accent, var(--accent)) 14%, transparent) 0%, transparent 72%);
    opacity:0;
    transition:opacity var(--motion-surface) var(--ease-standard);
  }
  .field-chip:hover,
  .field-chip:focus-visible,
  .field-chip.is-active {
    border-color:color-mix(in srgb, var(--field-accent, var(--accent)) 56%, var(--line));
    background:linear-gradient(180deg, color-mix(in srgb, var(--field-accent, var(--accent)) 4%, rgba(255,255,255,0.01)), rgba(255,255,255,0.006));
    box-shadow:0 18px 50px rgba(0,0,0,0.18), 0 0 26px color-mix(in srgb, var(--field-accent, var(--accent)) 20%, transparent);
  }
  .field-chip:hover::before,
  .field-chip:focus-visible::before,
  .field-chip.is-active::before { opacity:1; }
  .field-chip b,
  .field-chip strong { color:var(--field-accent, var(--paper)); }
  .field-chip span,
  .field-chip p { color:var(--muted); }
  .support-note {
    font-family:var(--font-mono);
    font-size:0.8rem;
    line-height:1.68;
    color:var(--muted);
    max-width:64ch;
    margin:0 auto;
    text-wrap:pretty;
  }
  .support-note b,
  .support-note strong { color:var(--paper-dim); font-weight:600; }
  .support-note--center { text-align:center; }
  .support-note--left { text-align:left; }
  .support-note--boundary { border-top:1px solid var(--line); padding-top:16px; margin-top:18px; }
  .support-note--lead { max-width:72ch; }



/* ============ THEME LAYER HOOKS ============
   Every rendered surface declares data-surface and data-season in markup.
   Future seasonal/event CSS must be additive and scoped through those hooks,
   for example body[data-season="winter"] or body[data-event="solstice"].
   The absence of data-event is the neutral state. Canvas scenes mirror the
   same contract locally instead of loading the shared stylesheet. See
   docs/EXPERIENCE-STANDARDS.md before adding seasonal art or character accessories. */

/* ============================================================
   LANTERN WINTER: shared atmospheric layer (2026-07-24)
   The gate stays the cinematic exterior. These rules carry its
   light, winter, and movement language into the rooms beyond it.
   ============================================================ */
body {
  position: relative;
  isolation: isolate;
  background-color: var(--ink);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 540px at var(--page-glow-x) 1%, var(--page-glow), transparent 72%),
    radial-gradient(760px 470px at var(--page-warm-x) 8%, var(--page-warm), transparent 76%),
    linear-gradient(180deg, rgba(18,21,31,0.48), transparent 38%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 38%, rgba(0,0,0,0.24) 100%);
}
main, .site-footer { position: relative; z-index: 2; }
.winter-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.82;
  transition: opacity 180ms linear;
}
.theme-home   { --page-glow:rgba(61,168,245,0.115); --page-warm:rgba(232,163,61,0.075); --page-glow-x:43%; --page-warm-x:72%; --caption-glow:rgba(61,168,245,0.15); }
.theme-studio { --page-glow:rgba(61,168,245,0.075); --page-warm:rgba(232,163,61,0.055); --page-glow-x:32%; --page-warm-x:70%; --caption-glow:rgba(61,168,245,0.14); }
.theme-lupa   { --page-glow:rgba(61,168,245,0.050); --page-warm:rgba(232,163,61,0.105); --page-glow-x:28%; --page-warm-x:62%; --caption-glow:rgba(232,163,61,0.17); }
.theme-atlas  { --page-glow:rgba(61,168,245,0.105); --page-warm:rgba(232,163,61,0.045); --page-glow-x:50%; --page-warm-x:80%; --caption-glow:rgba(61,168,245,0.15); }
.theme-work   { --page-glow:rgba(61,168,245,0.072); --page-warm:rgba(232,163,61,0.036); --page-glow-x:38%; --page-warm-x:76%; --caption-glow:rgba(61,168,245,0.13); }

/* Chrome: one cold line, one warm thread. */
.site-header {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--line) 82%, var(--moon));
  box-shadow: 0 12px 34px rgba(0,0,0,0.22), 0 1px 18px rgba(61,168,245,0.025);
}
.wordmark { position: relative; transition:color var(--motion-response) var(--ease-standard), text-shadow var(--motion-response) var(--ease-standard), filter var(--motion-response) var(--ease-standard); }
.wordmark .badge { box-shadow: 0 0 18px rgba(61,168,245,0.16); transition:box-shadow var(--motion-response) var(--ease-standard), filter var(--motion-response) var(--ease-standard); }
.wordmark:hover, .wordmark:focus-visible { color:var(--paper); text-shadow:0 0 14px rgba(242,244,248,.34), 0 0 28px rgba(61,168,245,.16); }
.wordmark:hover .badge, .wordmark:focus-visible .badge { box-shadow:0 0 18px rgba(242,244,248,.22), 0 0 32px rgba(61,168,245,.22); filter:brightness(1.08); }
/* Current-page wordmark no longer carries a trailing blue dot.
   The footer pulse and lantern already provide the intentional signature accents. */
.nav a:not(.nav-cta) { position: relative; }
.nav a[aria-current="page"] { color: var(--paper); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(61,168,245,0.38);
}
.theme-lupa .nav a[aria-current="page"]::after {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(232,163,61,0.44);
}
.nav .nav-cta { box-shadow: none; }

/* The first room after the gate: dual light and a quiet horizon. */
.theme-home .hero {
  overflow: hidden;
  min-height: min(720px, 78vh);
  display: flex;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, var(--moon));
}
.theme-home .hero::before {
  inset: auto;
  left: 43%; top: 43%;
  width: clamp(210px, 19vw, 320px);
  aspect-ratio: 1 / 1;
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(61,168,245,0.19);
  filter: blur(clamp(82px, 8vw, 128px));
  opacity: .76;
  -webkit-mask-image: none;
  mask-image: none;
}
.theme-home .hero .wrap { position: relative; isolation: isolate; }
.theme-home .hero .wrap::before {
  content: "";
  position: absolute;
  left: 64%; top: 47%;
  width: clamp(190px, 17vw, 290px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(232,163,61,0.16);
  filter: blur(clamp(78px, 7.5vw, 120px));
  opacity: .70;
  pointer-events: none;
  z-index: -1;
}
.theme-home .hero::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -1px;
  height: clamp(118px, 18vw, 206px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 210' preserveAspectRatio='none'%3E%3Cpath d='M0 147 L105 98 L215 73 L326 105 L430 116 L545 143 L675 151 L800 133 L938 152 L1078 119 L1194 85 L1320 101 L1438 130 L1600 144 V210 H0Z' fill='%23182031'/%3E%3Cpath d='M0 179 L154 151 L296 161 L422 146 L548 174 L697 166 L838 182 L1000 163 L1130 174 L1291 154 L1438 171 L1600 164 V210 H0Z' fill='%230B0E14'/%3E%3Cpath d='M0 146 L105 97 L215 72 L326 104 L430 115 L545 142 L675 150 L800 132 L938 151 L1078 118 L1194 84 L1320 100 L1438 129 L1600 143' fill='none' stroke='%232A394F' stroke-width='2' opacity='.52'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.theme-home .hero .wrap { z-index: 2; }
.theme-home .hero h1 { text-shadow: 0 16px 50px rgba(0,0,0,0.34); }

.theme-work .work-card {
  box-shadow: 0 18px 48px rgba(0,0,0,0.17);
}
.theme-work .work-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 1.6%, var(--panel));
  box-shadow: 0 20px 52px rgba(0,0,0,0.24), 0 0 30px rgba(61,168,245,0.075);
}
.theme-work a.work-card:hover {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--accent) 3.2%, var(--panel));
  box-shadow: 0 20px 52px rgba(0,0,0,0.26), 0 0 36px rgba(61,168,245,0.13);
}
@media (hover: none), (pointer: coarse) {
  .theme-work article.work-card:hover {
    border-color: var(--line);
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(0,0,0,0.17);
  }
}
/* Interior heroes: one true round aura, aligned the same way on every page. */
.page-hero { position: relative; isolation: isolate; }
.page-hero::before {
  content: "";
  position: absolute;
  left: clamp(36px, 11%, 132px);
  top: 43%;
  width: clamp(120px, 12vw, 190px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(61,168,245,0.18);
  filter: blur(clamp(58px, 6vw, 92px));
  opacity: 0.72;
  pointer-events: none;
  z-index: -1;
}
.theme-lupa .page-hero::before {
  background: rgba(232,163,61,0.18);
}

/* Cards catch light like objects near the lantern, not floating neon panels. */
.card, .rank-node, .agents-band, .stat {
  box-shadow: 0 18px 48px rgba(0,0,0,0.16);
}
.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,230,244,0.18), transparent);
  opacity: 0.55;
}
.card:hover {
  box-shadow: 0 20px 52px rgba(0,0,0,0.28), 0 0 34px var(--echo-glow);
}
.card[data-warm]:hover {
  border-color: var(--amber);
  box-shadow: 0 20px 52px rgba(0,0,0,0.28), 0 0 36px var(--lupa-glow);
}
.card[data-warm] .kicker { color: var(--amber); }


/* One full-width horizon belongs to the home hero. The two bands are kept intentionally separated so the front silhouette reads clearly even on ultrawide glass. Interior section rules stay contained. */
.block { position: relative; border-top: 0; }
.block::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1000px, calc(100% - (2 * var(--gutter)))); height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, rgba(61,168,245,0.16) 52%, var(--line) 88%, transparent);
}
.rule {
  width: min(100%, 1000px); margin-inline: auto; border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 12%, rgba(61,168,245,0.20) 52%, var(--line) 88%, transparent);
}
.theme-lupa .rule {
  background: linear-gradient(90deg, transparent, var(--line) 12%, rgba(61,168,245,0.10) 42%, rgba(232,163,61,0.18) 58%, var(--line) 88%, transparent);
}
.connector {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--line) 70%, var(--moon)), var(--line));
}
.connector::after {
  content: "";
  position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 6px; height: 2px; border-radius: 50%;
  background: rgba(220,230,244,0.20);
}

.rank-node.is-echo {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  box-shadow: 0 18px 48px rgba(0,0,0,0.20), 0 0 34px rgba(61,168,245,0.075), -22px 0 64px rgba(61,168,245,0.035);
}
.rank-node.is-lupa {
  border-color: color-mix(in srgb, var(--amber) 18%, var(--line));
  box-shadow: 0 18px 48px rgba(0,0,0,0.20), 0 0 36px rgba(232,163,61,0.08), 22px 0 64px rgba(232,163,61,0.04);
}

.agent-dots i { animation: winterNode 3.6s ease-in-out infinite; }
.agent-dots i:nth-child(2) { animation-delay: .35s; }
.agent-dots i:nth-child(3) { animation-delay: .7s; }
.agent-dots i:nth-child(4) { animation-delay: 1.05s; }
.agent-dots i:nth-child(5) { animation-delay: 1.4s; }
.agent-dots i:nth-child(6) { animation-delay: 1.75s; }
@keyframes winterNode { 0%,100% { opacity:.28; transform:translateY(0); } 50% { opacity:.8; transform:translateY(-2px); } }

.site-footer {
  background: linear-gradient(180deg, transparent, rgba(9,10,14,0.48));
  border-top-color: color-mix(in srgb, var(--line) 82%, var(--moon));
}
.footer-nav a:hover { text-shadow: 0 0 14px rgba(61,168,245,0.20); }

@media (max-width: 660px) {
  .nav a[aria-current="page"]::after { bottom: -8px; }
  .theme-home .hero { min-height: auto; }
  .theme-home .hero::after { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .winter-canvas { display: none; }
  .agent-dots i { animation: none; }
  .lantern-light { animation: none; }
}

/* ============================================================
   2026 refinements
   View transitions: 2026-07-25h
   content-visibility: 2026-07-25q
   ============================================================ */

/* Cross-document view transitions.
   Pages crossfade on navigation with no JavaScript and no SPA.
   Browsers without support ignore it. Honors prefers-reduced-motion.
   The moon keeps its identity across the fade so the house does not
   jump when you walk to another room. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
.site-moon { view-transition-name: lantern-moon; }

/* Below-fold render skipping.
   Lets the browser skip painting sections that are still far off-screen.
   Real win on the longer pages (Atlas, Lupa, Work). contain-intrinsic-size
   is a size hint so the scrollbar stays honest before the section paints.
   If the scrollbar jumps on real glass, raise or lower the 520px value
   or turn the rule off. */
.block {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
/* ============ FORCED COLORS ============
   In high-contrast environments the operating system owns the palette.
   Atmosphere yields; content, state, controls, and focus remain explicit. */
@media (forced-colors: active) {
  body { background: Canvas; color: CanvasText; background-image: none; }
  body::before, body::after, .winter-canvas, .site-moon,
  .hero::before, .theme-home .hero::after, .theme-home .hero .wrap::before {
    display: none !important;
  }
  :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
  .site-header, .card, .work-card, .rank-node, .finger, .agents-band,
  .mini-node, .clink, .status, .pill, .room, .rail, .pane, .viz-wrap,
  .stat, .aud .a, .q, .fic-opt {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
  }
  .btn-echo, .btn-branch, .btn-lupa, .btn-ghost, .nav .nav-cta {
    background: Canvas; color: LinkText; border-color: ButtonText; box-shadow: none;
  }
  .nav a, .footer-nav a, .crumb a,
  .footer-row a:not(.lantern-knock) { color: LinkText; }
  .nav a[aria-current="page"], .footer-nav a[aria-current="page"],
  .wordmark[aria-current="page"] { color: CanvasText; }
  .nav a[aria-current="page"]::after, .footer-nav a[aria-current="page"]::after { background: Highlight; box-shadow: none; }
  .dot, .pill .pdot, .finger .fdot {
    forced-color-adjust: none; background: Highlight; border-color: Highlight; box-shadow: none;
  }
  .badge { forced-color-adjust: none; }
}