/* ===================================================================
     briam.studio — "The Study" build (v2)
     Same worlds, same voice — now candlelit, gilded, and alive.
     Design tokens from the Figma foundation. No dependencies.
     =================================================================== */
  /* ===== Self-hosted faces (Phase 1) - no third-party requests ===== */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-400-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-400-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-400-italic-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-400-italic-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  /* Metric-adjusted local fallbacks - hold layout steady during font swap */
  @font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia"); size-adjust: 76.7%; line-gap-override: 0%; }
  @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 98.5%; line-gap-override: 0%; }
  @font-face { font-family: "DM Sans Fallback"; src: local("Arial"); size-adjust: 91.3%; line-gap-override: 0%; }

  :root {
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;

    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px;

    /* Elevation — per-world shadow ink (warm in parchment worlds, cool in blueprint) */
    --shadow-ink: #2a2416;
    --elev-1: 0 2px 10px -4px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
    --elev-2: 0 8px 28px -10px color-mix(in srgb, var(--shadow-ink) 30%, transparent);
    --elev-3: 0 20px 55px -18px color-mix(in srgb, var(--shadow-ink) 45%, transparent);
    --shadow-card: var(--elev-1);
    --shadow-lift: var(--elev-3);

    --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
    --sans: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, sans-serif;
    --read: "Newsreader", "Newsreader Fallback", Georgia, serif;
    --mono: "Space Mono", ui-monospace, monospace;
    --display-music: "Anton", "Arial Narrow", sans-serif;

    /* Fluid type scale — experiment: bigger writing */
    --text-hero: clamp(58px, 9.5vw, 112px);
    --text-section: clamp(40px, 5vw, 56px);
    --text-title: 30px;
    --text-body: 22px;
    --text-label: 13px;

    --content: 1120px;

    /* Gold leaf */
    --gold: #e5ad35;
    --gold-deep: #b9832f;
    --gold-pale: #f3d27a;
    --gold-line: linear-gradient(90deg, transparent, rgba(229,173,53,.55), transparent);

    /* Default theme (light parchment) fallbacks */
    --color-bg-base: #f4f0e6;
    --color-bg-elevated: #fbfaf5;
    --color-text-primary: #171813;
    --color-text-secondary: #71736a;
    --color-accent-primary: #b94e32;
    --color-accent-secondary: #495848;
    --color-border-default: #e8e1d3;
    --glow-opacity: .05;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-press: 120ms;
    --dur-fast: 180ms;
    --dur-standard: 240ms;
  }

  /* One source of truth per world. data-theme / data-page-theme are the
     legacy attributes (kept as a compat shim); data-world is the target. */
  body[data-theme="dark"], body[data-page-theme="dark"], body[data-world="study"] {
    --color-bg-base: #0b0a12;
    --color-bg-elevated: #14131f;
    --color-text-primary: #fbfaf5;
    --color-text-secondary: #9092a1;
    --color-accent-primary: #e5ad35;
    --color-accent-secondary: #495848;
    --color-border-default: #252330;
    --glow-opacity: .12;
    --shadow-ink: #06050c;
  }
  body[data-theme="light"], body[data-page-theme="light"], body[data-world="desk"], body[data-world="radar"] {
    --color-bg-base: #f4f0e6;
    --color-bg-elevated: #fbfaf5;
    --color-text-primary: #171813;
    --color-text-secondary: #71736a;
    --color-accent-primary: #b94e32;
    --color-accent-secondary: #495848;
    --color-border-default: #e8e1d3;
    --glow-opacity: .05;
    --shadow-ink: #2a2416;
  }
  body[data-theme="blueprint"], body[data-page-theme="blueprint"], body[data-world="drafting"] {
    --color-bg-base: #0c1524;
    --color-bg-elevated: #111a2e;
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-accent-primary: #38bdf8;
    --color-accent-secondary: #34d399;
    --color-border-default: #1e293b;
    --glow-opacity: .09;
    --shadow-ink: #020a14;
  }
  body[data-theme="grunge"], body[data-page-theme="grunge"], body[data-world="amp"] {
    --color-bg-base: #120b0b;
    --color-bg-elevated: #1a1111;
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #a39c9c;
    --color-accent-primary: #c23b22;
    --color-accent-secondary: #8b8080;
    --color-border-default: #2d2222;
    --glow-opacity: .10;
    --shadow-ink: #000;
  }
  body[data-theme="cozy"], body[data-page-theme="cozy"], body[data-world="library"] {
    --color-bg-base: #f3ebd7;
    --color-bg-elevated: #fbf9f4;
    --color-text-primary: #2a1f15;
    --color-text-secondary: #7c7267;
    --color-accent-primary: #8f532a;
    --color-accent-secondary: #4a5d4c;
    --color-border-default: #e2d9cd;
    --glow-opacity: .06;
    --shadow-ink: #3e2a1a;
  }

  /* CJK pages: Latin faces cover Latin strings; give CJK a curated serif
     stack and the looser leading it wants. */
  :root:lang(zh) {
    --serif: "Instrument Serif", "Instrument Serif Fallback", "Noto Serif TC", "Songti TC", PMingLiU, serif;
    --read: "Newsreader", "Newsreader Fallback", "Noto Serif TC", "Songti TC", PMingLiU, serif;
  }
  body:lang(zh) { line-height: 1.8; }
  body:lang(zh) .display-hero, body:lang(zh) .display-section { letter-spacing: 0; line-height: 1.18; }
  body:lang(zh) .label { letter-spacing: .06em; }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: var(--sans);
    font-size: 17px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background-color .45s var(--ease-out), color .3s ease;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }

  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--color-bg-base); }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-text-secondary) 35%, transparent); border-radius: 8px; border: 2px solid var(--color-bg-base); }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

  .wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--space-6); }

  /* Typography */
  .label { font-family: var(--sans); font-weight: 500; font-size: var(--text-label); line-height: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-secondary); }
  .display-hero { font-family: var(--serif); font-weight: 400; font-size: var(--text-hero); line-height: 1.0; letter-spacing: -.025em; font-feature-settings: "ss01"; margin: 0; }
  .display-section { font-family: var(--serif); font-weight: 400; font-size: var(--text-section); line-height: 1.1; letter-spacing: -.015em; margin: 0; }
  .read { font-family: var(--read); font-size: var(--text-body); line-height: 1.65; text-wrap: pretty; }
  .muted { color: var(--color-text-secondary); }

  /* Focus — one visible ring everywhere, tinted by the room */
  :focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; border-radius: 2px; }
  .btn:focus-visible, .watch-link:focus-visible { outline-offset: 4px; border-radius: var(--radius-pill); }

  ::selection { background: color-mix(in srgb, var(--color-accent-primary) 24%, transparent); color: var(--color-text-primary); }

  /* ===== Atmosphere layers ===== */
  #motes { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
  #glow {
    position: fixed; z-index: 5; pointer-events: none;
    width: 900px; height: 900px; margin: -450px 0 0 -450px; left: 0; top: 0;
    background: radial-gradient(circle, rgba(255,196,110,.9) 0%, rgba(255,170,70,.28) 30%, transparent 62%);
    mix-blend-mode: screen; opacity: var(--glow-opacity);
    transition: opacity 1s ease;
    will-change: transform;
  }
  body.lumos #glow { opacity: .3; }
  .grain {
    position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    animation: grainShift 1.4s steps(4) infinite;
  }
  @keyframes grainShift {
    0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); }
    50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,2%); } 100% { transform: translate(0,0); }
  }

  /* Custom cursor — ember + halo */
  @media (pointer: fine) {
    body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  }
  .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; border-radius: 50%; will-change: transform; display: none; }
  body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { display: block; }
  .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); box-shadow: 0 0 10px rgba(229,173,53,.8); }
  .cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid color-mix(in srgb, var(--color-text-primary) 35%, transparent); transition: border-color var(--dur-fast) ease; }
  body.cursor-hot .cursor-ring { --cursor-scale: 1.73; border-color: var(--gold); }

  /* Scroll progress — gold thread */
  .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: transparent; }
  .progress b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale), var(--gold)); transform-origin: 0 50%; transform: scaleX(0);
    box-shadow: 0 0 10px rgba(229,173,53,.45); transition: box-shadow .3s ease; }

  /* ===== Header ===== */
  header.site {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(1.2) blur(14px);
    background: color-mix(in srgb, var(--color-bg-base) 78%, transparent);
    transition: background-color .32s var(--ease-out), color .24s ease;
    color: var(--color-text-primary);
  }
  header.site::after { content: ""; display: block; height: 1px; background: var(--gold-line); opacity: 0; transition: opacity var(--dur-standard) ease; }
  header.site.scrolled::after { opacity: 1; }
  .header-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .wordmark { font-family: var(--serif); font-size: 30px; letter-spacing: -.01em; font-weight: 400; color: var(--color-text-primary); transition: color .24s ease, transform var(--dur-press) var(--ease-out); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
  .wordmark::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); align-self: center; animation: candle 3.4s ease-in-out infinite; }
  @keyframes candle { 0%,100% { opacity: .95; transform: scale(1); } 42% { opacity: .55; transform: scale(.82); } 68% { opacity: .85; transform: scale(1.08); } }
  nav.primary { display: flex; gap: var(--space-4); align-items: center; }
  nav.primary a { font-size: 15px; font-weight: 500; color: var(--color-text-primary); position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 3px; transition: color .2s ease, transform var(--dur-press) var(--ease-out); }
  nav.primary a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 10px; height: 1.5px; background: var(--gold); transition: right .32s var(--ease-out); }
  nav.primary a:hover { color: var(--color-accent-primary); }
  nav.primary a:hover::after { right: 0; }
  .menu-btn { display: none; min-height: 44px; min-width: 44px; font-family: var(--sans); font-size: 15px; font-weight: 500; background: none; border: none; cursor: pointer; color: var(--color-text-primary); padding: 8px; transition: color .2s ease, transform var(--dur-press) var(--ease-out); }
  .mobile-nav {
    display: none; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0 var(--space-5); border-top: 1px solid var(--color-border-default);
    background: var(--color-bg-base); color: var(--color-text-primary);
    opacity: 1; transform: translateY(0) scale(1);
    transform-origin: top right;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-color .24s var(--ease-out), border-color .24s ease, color .2s ease;
  }
  .mobile-nav.open { display: flex; }
  @starting-style {
    .mobile-nav.open { opacity: 0; transform: translateY(-8px) scale(.985); }
  }
  .mobile-nav a { display: flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: 500; padding: 8px 0; transition: color .2s ease, transform var(--dur-press) var(--ease-out); }
  .lang-switch { display: flex; align-items: center; gap: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin-left: var(--space-4); }
  .lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 5px; transition: color .2s ease, transform var(--dur-press) var(--ease-out); }
  .lang-switch a:hover { color: var(--color-accent-primary); }
  .lang-switch a[aria-current="page"] { color: var(--color-text-primary); }
  .lang-switch .sep { opacity: 0.4; font-weight: 400; }
  .lang-switch.mobile { margin-left: 0; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-default); display: inline-flex; width: fit-content; }

  /* ===== Ornaments ===== */
  .ornament { display: flex; align-items: center; gap: 12px; margin-top: var(--space-2); }
  .ornament::before, .ornament::after { content: ""; height: 1px; width: 42px; background: var(--gold-line); }
  .ornament svg { flex: none; }

  /* ===== Hero — The Grand Orrery ===== */
  .hero {
    position: relative; display: grid; align-items: center;
    min-height: min(880px, 90vh);
    padding: calc(var(--space-9) + 24px) 0 var(--space-9); overflow: hidden;
    background:
      radial-gradient(1100px 760px at 72% 46%, rgba(229,173,53,.11), transparent 62%),
      radial-gradient(760px 620px at 70% 50%, rgba(120,182,214,.06), transparent 60%),
      radial-gradient(900px 600px at 12% 88%, rgba(73,88,72,.10), transparent 60%),
      #0b0a12;
    color: #fbfaf5;
    border-bottom: 1px solid #252330;
  }
  /* Cinematic vignette for depth */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 120% at 68% 50%, transparent 52%, rgba(6,5,12,.55) 100%);
  }
  .hero-motif { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .hero-motif canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero .wrap { position: relative; z-index: 2; }
  /* Cinematic hero entrance — soft blur + lift */
  .hero .reveal { transform: translateY(28px) scale(.98); filter: blur(8px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s ease; }
  .hero .reveal.in { filter: blur(0); transform: none; }
  .hero h1 { max-width: 16ch; }
  .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
  .hero h1 .w > span { display: inline-block; transform: translateY(110%); animation: rise 1.15s cubic-bezier(.19,1,.22,1) forwards; }
  @keyframes rise { to { transform: translateY(0); } }
  /* Verb cycling — hero headline word swap */
  .verb-cycle { display: inline-block; }
  .verb-cycle.vc-out { animation: vcOut .22s var(--ease-in-out) forwards; }
  .verb-cycle.vc-in  { animation: vcIn .3s var(--ease-out) forwards; }
  @keyframes vcOut { 0% { opacity:1; transform:translateY(0); filter: blur(0); } 100% { opacity:0; transform:translateY(-12px); filter: blur(4px); } }
  @keyframes vcIn  { 0% { opacity:0; transform:translateY(12px); filter: blur(4px); } 100% { opacity:1; transform:translateY(0); filter: blur(0); } }
  .hero .lede { margin-top: var(--space-6); max-width: 58ch; color: #e6e5eb; font-size: clamp(20px, 2.1vw, 24px); line-height: 1.6; }
  .hero .lede .muted { color: #8c8b99; }
  .hero-cta { margin-top: var(--space-7); display: flex; gap: var(--space-3); flex-wrap: wrap; }

  .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 16px; font-weight: 500; padding: 14px 26px; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid transparent; transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-standard) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; will-change: transform; }
  .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .42s var(--ease-out); }
  .btn:hover::after { left: 130%; }
  .btn-primary { background: linear-gradient(135deg, var(--gold-pale), var(--gold) 55%, var(--gold-deep)); color: #0b0a12; box-shadow: 0 6px 24px -8px rgba(229,173,53,.55); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(229,173,53,.65); }
  .btn-secondary { background: transparent; border-color: rgba(255,255,255,.22); color: #fbfaf5; }
  .btn-secondary:hover { border-color: var(--gold); color: var(--gold-pale); background: rgba(229,173,53,.06); }
  .btn:active { transform: scale(.97); transition-duration: var(--dur-press); }
  .btn.magnetic:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); }

  /* Orrery SVG animation classes */
  .ring { fill: none; stroke: url(#goldStroke); vector-effect: non-scaling-stroke; }
  .spin { animation: spin 140s linear infinite; transform-origin: 400px 400px; }
  .spin-r { animation: spin 200s linear infinite reverse; transform-origin: 400px 400px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .breathe { animation: breathe 5.5s ease-in-out infinite; }
  @keyframes breathe { 0%,100% { opacity: .85; } 50% { opacity: .35; } }
  .tw { animation: twinkle 4s ease-in-out infinite; }
  .tw:nth-of-type(2n) { animation-delay: 1.1s; } .tw:nth-of-type(3n) { animation-delay: 2.3s; } .tw:nth-of-type(5n) { animation-duration: 6s; }
  @keyframes twinkle { 0%,100% { opacity: .15; } 50% { opacity: .9; } }
  .constel { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn 2.6s ease .8s forwards; }
  @keyframes drawIn { to { stroke-dashoffset: 0; } }
  .core-halo { animation: halo 4.5s ease-in-out infinite; transform-origin: 400px 400px; }
  @keyframes halo { 0%,100% { opacity: .28; transform: scale(1); } 50% { opacity: .55; transform: scale(1.12); } }
  .ripple { opacity: 0; }
  .ripple.go { animation: ripple 1.2s ease-out forwards; transform-origin: 400px 400px; }
  @keyframes ripple { 0% { opacity: .6; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } }

  /* ===== About ===== */
  .about { background: linear-gradient(180deg, #0e0d18, #100f1a); color: #fbfaf5; padding: var(--space-9) 0; border-bottom: 1px solid #252330; }
  .about .label { color: #9092a1; }
  .about .wrap { max-width: 820px; }
  .about .read { color: #e6e5eb; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.55; }
  .about .read + .read { margin-top: var(--space-5); }
  .about .read.muted { color: #8c8b99; }
  .about .read:first-of-type::first-letter {
    font-family: var(--serif); float: left; font-size: 4.8em; line-height: .78;
    padding: 6px 14px 0 0; color: var(--gold);
  }
  .pull { position: relative; font-family: var(--read); font-style: italic; font-size: clamp(28px, 3.4vw, 36px); line-height: 1.35; letter-spacing: -.01em; color: #fbfaf5; border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); padding-top: var(--space-5); margin: var(--space-7) 0 0; hanging-punctuation: first; }
  .pull::before { content: "“"; position: absolute; left: -14px; top: -34px; font-family: var(--serif); font-size: 96px; color: rgba(229,173,53,.25); }

  /* ===== Sections base ===== */
  section { padding: var(--space-9) 0; scroll-margin-top: 88px; position: relative; }
  .section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 60ch; }
  .section-head .num { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: var(--gold-deep); }
  .grid { display: grid; gap: var(--space-6); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  /* Cards — gilded hairline, candle-sheen sweep */
  .card {
    position: relative; overflow: hidden;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-3);
    transition: transform var(--dur-standard) var(--ease-out), box-shadow var(--dur-standard) ease, border-color var(--dur-standard) ease, background-color .32s ease;
    height: 100%;
    will-change: transform;
  }
  .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gold-line); opacity: 0; transition: opacity var(--dur-standard) ease; }
  .card::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); transform: skewX(-16deg); transition: left .46s var(--ease-out); pointer-events: none; }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--gold) 45%, var(--color-border-default)); }
  .card:hover::before { opacity: 1; }
  .card:hover::after { left: 160%; }
  .card .card-title { font-family: var(--serif); font-size: var(--text-title); line-height: 1.1; letter-spacing: -.01em; }
  .card .card-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .card p { margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 1.55; transition: color .24s ease; }
  .card .card-foot { margin-top: auto; padding-top: var(--space-3); font-size: 15px; font-weight: 500; color: var(--color-accent-primary); display: inline-flex; align-items: center; gap: 6px; }
  .card .card-foot .arrow { transition: transform var(--dur-fast) var(--ease-out); }
  .card:hover .card-foot .arrow { transform: translateX(4px); }

  /* ===== Writing — parchment ===== */
  #writing { background-color: #fbf9f4; color: #171813; border-bottom: 1px solid #e8e1d3; }
  #writing .label { color: #71736a; }
  .notes { display: flex; flex-direction: column; }
  .note { display: grid; grid-template-columns: 180px 1fr auto; gap: var(--space-6); align-items: baseline; padding: var(--space-6) 0; border-top: 1px solid #e8e1d3; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease; }
  .note:last-child { border-bottom: 1px solid #e8e1d3; }
  .note:hover { transform: translateX(var(--space-4)); background: linear-gradient(90deg, rgba(229,173,53,.05), transparent 40%); }
  .note .note-title { font-family: var(--serif); font-size: 34px; line-height: 1.1; color: #171813; }
  .note .note-dek { color: #71736a; margin-top: 6px; max-width: 52ch; display: block; font-size: 17px; }
  .note .note-read { font-size: 15px; font-weight: 500; color: #b94e32; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
  .note:hover .note-read { opacity: 1; transform: translateX(0); }

  /* ===== Projects — blueprint ===== */
  #projects {
    background-color: #0c1524; color: #e2e8f0; border-bottom: 1px solid #1e293b;
    background-image: linear-gradient(rgba(56,189,248,.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(56,189,248,.03) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  #projects .label { font-family: var(--mono); color: #94a3b8; }
  #projects .display-section { font-family: var(--mono); font-size: clamp(32px, 4.5vw, 42px); letter-spacing: -.02em; }
  #projects .card { background: #111a2e; border-color: #1e293b; }
  #projects .card::before { background: linear-gradient(90deg, transparent, rgba(56,189,248,.6), transparent); }
  #projects .card:hover { border-color: #38bdf8; box-shadow: 0 14px 40px rgba(56,189,248,.12); }
  #projects .card-title { font-family: var(--mono); font-size: 26px; color: #e2e8f0; }
  #projects .card p { color: #94a3b8; }
  #projects .card .card-foot { color: #38bdf8; font-family: var(--mono); }
  #projects .num { color: #38bdf8; }

  /* ===== Music — grunge ===== */
  #music { background-color: #120b0b; color: #f5f5f5; border-bottom: 1px solid #2d2222; }
  #music .label { color: #a39c9c; }
  #music .display-section { font-family: var(--display-music); font-size: clamp(44px, 5.5vw, 60px); text-transform: uppercase; letter-spacing: .02em; }
  #music .card { background: #1a1111; border-color: #2d2222; border-radius: var(--radius-sm); }
  #music .card::before { background: linear-gradient(90deg, transparent, rgba(194,59,34,.7), transparent); }
  #music .card:hover { border-color: #c23b22; box-shadow: 0 14px 40px rgba(194,59,34,.16); }
  #music .card-title { font-family: var(--display-music); text-transform: uppercase; font-size: 28px; color: #f5f5f5; letter-spacing: .01em; }
  #music .card p { color: #a39c9c; }
  #music .card .card-foot { color: #c23b22; }
  #music .num { color: #c23b22; }

  /* ===== Shelf — cozy, gilded spines ===== */
  #shelf { background-color: #f3ebd7; color: #2a1f15; border-bottom: 1px solid #e2d9cd; }
  #shelf .label { color: #7c7267; }
  #shelf .card { background: #fbf9f4; border-color: #e2d9cd; border-radius: var(--radius-md); box-shadow: 4px 4px 0 rgba(42,31,21,.05); padding-left: calc(var(--space-6) + 6px); }
  #shelf .card::before { inset: 0 auto 0 0; width: 4px; height: auto; background: linear-gradient(180deg, var(--gold-pale), var(--gold-deep)); opacity: .55; }
  #shelf .card:hover { border-color: #8f532a; box-shadow: 8px 8px 0 rgba(143,83,42,.13); }
  #shelf .card:hover::before { opacity: 1; }
  #shelf .card-title { font-family: var(--serif); font-size: 28px; color: #2a1f15; }
  #shelf .card p { color: #63584c; }
  #shelf .num { color: #8f532a; }

  /* ===== Signal / Now ===== */
  #signal { background-color: #fcfaf5; color: #171813; border-bottom: 1px solid #e8e1d3; }
  #signal .label { color: #71736a; }
  .now-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: 60ch; }
  .now-list li { display: flex; gap: var(--space-4); align-items: baseline; font-family: var(--read); font-size: 23px; color: #242520; }
  .now-list li::before { content: "✦"; flex: none; font-size: 12px; color: #b94e32; transform: translateY(-2px); }
  .now-list li:nth-child(3n+2)::before { color: #495848; }
  .now-list li:nth-child(3n)::before { color: var(--gold-deep); }

  /* ===== Footer ===== */
  footer.site { background: radial-gradient(900px 400px at 50% 0%, rgba(229,173,53,.05), transparent 70%), #0b0a12; color: #fbfaf5; border-top: 1px solid #252330; padding: var(--space-8) 0 var(--space-6); }
  footer.site .label { color: #9092a1; }
  .footer-constel { display: flex; justify-content: center; margin-bottom: var(--space-7); opacity: .8; }
  .footer-top { display: flex; justify-content: space-between; gap: var(--space-8); align-items: flex-start; flex-wrap: wrap; }
  .footer-brand { max-width: 320px; display: flex; flex-direction: column; gap: var(--space-3); }
  .footer-brand .wordmark { font-size: 34px; color: #fbfaf5; }
  .footer-brand p { margin: 0; color: #8c8b99; font-size: 15px; }
  .footer-cols { display: flex; gap: var(--space-8); flex-wrap: wrap; }
  .footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
  .footer-col a { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: #e6e5eb; transition: color .2s ease; }
  .footer-col a:hover { color: var(--gold); }
  .footer-div { height: 1px; background: var(--gold-line); margin: var(--space-8) 0 var(--space-5); opacity: .5; }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: 15px; color: #8c8b99; }
  .footer-sig { display: inline-flex; align-items: center; gap: 8px; }
  .footer-sig .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: candle 3.4s ease-in-out infinite; }

  /* ===== Reveals — soft entrance only; hover physics stay separate ===== */
  .reveal { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(2px);
    transition: opacity .72s var(--ease-out), transform .72s var(--ease-out), filter .72s ease; }
  .reveal.in { opacity: 1; transform: none; filter: none; }
  .reveal.d1 { transition-delay: .08s; }
  .reveal.d2 { transition-delay: .16s; }
  .reveal.d3 { transition-delay: .24s; }
  .reveal.d4 { transition-delay: .32s; }
  .reveal.d5 { transition-delay: .4s; }
  /* Interactive reveals clear delay after entrance so hover is instant */
  .card.reveal.in,
  .room-link.reveal.in,
  .notes.reveal.in > .note { transition-delay: 0s; }

  /* Nested cascade: content-only (not hover targets). */
  .reveal .timeline li,
  .timeline.reveal li,
  .prose.reveal > p,
  .reveal .now-list li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  }
  .reveal.in .timeline li,
  .timeline.reveal.in li,
  .prose.reveal.in > p,
  .reveal.in .now-list li { opacity: 1; transform: none; }
  .reveal:not(.in) .timeline li:nth-child(1), .timeline.reveal:not(.in) li:nth-child(1),
  .prose.reveal:not(.in) > p:nth-child(1), .reveal:not(.in) .now-list li:nth-child(1) { transition-delay: .06s; }
  .reveal:not(.in) .timeline li:nth-child(2), .timeline.reveal:not(.in) li:nth-child(2),
  .prose.reveal:not(.in) > p:nth-child(2), .reveal:not(.in) .now-list li:nth-child(2) { transition-delay: .12s; }
  .reveal:not(.in) .timeline li:nth-child(3), .timeline.reveal:not(.in) li:nth-child(3),
  .prose.reveal:not(.in) > p:nth-child(3), .reveal:not(.in) .now-list li:nth-child(3) { transition-delay: .18s; }
  .reveal:not(.in) .timeline li:nth-child(4), .timeline.reveal:not(.in) li:nth-child(4),
  .prose.reveal:not(.in) > p:nth-child(4), .reveal:not(.in) .now-list li:nth-child(4) { transition-delay: .24s; }
  .reveal:not(.in) .timeline li:nth-child(5), .timeline.reveal:not(.in) li:nth-child(5),
  .prose.reveal:not(.in) > p:nth-child(5), .reveal:not(.in) .now-list li:nth-child(5) { transition-delay: .3s; }
  .reveal:not(.in) .timeline li:nth-child(n+6), .timeline.reveal:not(.in) li:nth-child(n+6),
  .prose.reveal:not(.in) > p:nth-child(n+6), .reveal:not(.in) .now-list li:nth-child(n+6) { transition-delay: .36s; }

  /* Writing notes: fade-in only — hover keeps the original springy slide (0.3s soft curve) */
  .notes.reveal > .note {
    opacity: 0;
    transition: opacity .45s var(--ease-out);
  }
  .notes.reveal:not(.in) > .note:nth-child(1) { transition-delay: .05s; }
  .notes.reveal:not(.in) > .note:nth-child(2) { transition-delay: .1s; }
  .notes.reveal:not(.in) > .note:nth-child(3) { transition-delay: .15s; }
  .notes.reveal:not(.in) > .note:nth-child(n+4) { transition-delay: .2s; }
  .notes.reveal.in > .note {
    opacity: 1;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
    transition-delay: 0s;
  }

  /*
   * Cards & room links carry .reveal themselves. Soft entrance is fine;
   * once .in, restore original snappy hover (Emil: ~240ms ease-out, no delay).
   */
  .card.reveal:not(.in) {
    transition:
      opacity .72s var(--ease-out),
      transform .72s var(--ease-out),
      filter .72s ease,
      box-shadow var(--dur-standard) ease,
      border-color var(--dur-standard) ease,
      background-color .32s ease;
  }
  .card.reveal.in {
    transition:
      transform var(--dur-standard) var(--ease-out),
      box-shadow var(--dur-standard) ease,
      border-color var(--dur-standard) ease,
      background-color .32s ease;
    transition-delay: 0s;
    filter: none;
  }
  .card.reveal.in:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: color-mix(in srgb, var(--gold) 45%, var(--color-border-default));
  }

  .room-link.reveal:not(.in) {
    transition:
      opacity .72s var(--ease-out),
      transform .72s var(--ease-out),
      filter .72s ease,
      border-color var(--dur-standard) ease,
      box-shadow var(--dur-standard) ease,
      background-color var(--dur-standard) ease;
  }
  .room-link.reveal.in {
    transition:
      transform var(--dur-standard) var(--ease-out),
      border-color var(--dur-standard) ease,
      box-shadow var(--dur-standard) ease,
      opacity var(--dur-standard) ease,
      background-color var(--dur-standard) ease;
    transition-delay: 0s;
    filter: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; filter: none; transition: none; }
    .reveal .timeline li, .timeline.reveal li, .prose.reveal > p, .reveal .now-list li,
    .notes.reveal > .note {
      opacity: 1; transform: none; filter: none; transition: none;
    }
    .card.reveal, .card.reveal.in, .room-link.reveal, .room-link.reveal.in {
      transition: none; filter: none;
    }
    * { animation: none !important; }
    #motes, #glow, .cursor-dot, .cursor-ring, .grain { display: none !important; }
    body, body a, body button { cursor: auto !important; }
    .hero h1 .w > span { transform: none; }
  }

  @media(max-width:900px) {
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .note { grid-template-columns: 1fr; gap: var(--space-2); }
    .note .note-read { display: none; }
    .hero-motif canvas { opacity: .5; }
  }
  @media(max-width:640px) {
    nav.primary { display: none; }
    .header-row > .lang-switch:not(.mobile) { display: none; }
    .menu-btn { display: block; }
    .grid-3 { grid-template-columns: 1fr; }
    .footer-top { flex-direction: column; gap: var(--space-5); }
    footer.site { padding: var(--space-6) 0 var(--space-4); }
    .footer-brand { max-width: 30ch; gap: var(--space-2); }
    .footer-brand .wordmark { font-size: 29px; }
    .footer-brand p { font-size: 14px; line-height: 1.45; }
    .footer-cols { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
    .footer-col { gap: 4px; min-width: 0; }
    .footer-col a { min-height: 44px; font-size: 14px; white-space: nowrap; }
    .footer-div { margin: var(--space-5) 0 var(--space-4); }
    .footer-bottom { font-size: 13px; gap: var(--space-2); align-items: flex-start; }
    .footer-sig { line-height: 1.4; }
    .wrap { padding: 0 var(--space-5); }
    section { padding: var(--space-8) 0; }
  }


/* ===== Multi-page architecture ===== */
.skip-link { position:fixed; left:24px; top:16px; z-index:1000; padding:10px 14px; background:var(--color-text-primary); color:var(--color-bg-base); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); transition: transform var(--dur-fast) var(--ease-out); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.primary a[aria-current="page"], .mobile-nav a[aria-current="page"] { color:var(--color-accent-primary); }
.primary a[aria-current="page"]::after { transform:scaleX(1); }
.page-hero {
  position:relative; z-index:10; min-height:58dvh; display:grid; align-items:center; padding:96px 0;
  border-bottom:1px solid var(--color-border-default); isolation:isolate;
  background:
    radial-gradient(900px 540px at 74% 34%, color-mix(in srgb, var(--color-accent-primary) 13%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 42%, transparent), transparent 72%);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}
.page-hero .wrap { display:grid; grid-template-columns:80px minmax(0,760px); gap:32px; align-items:start; }
.page-number { padding-top:12px; font:12px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-primary); }
.page-intro { max-width:640px; margin:24px 0 0; color:var(--color-text-secondary); font-size:clamp(18px, 1.8vw, 21px); line-height:1.6; }
.content-page { position:relative; z-index:10; min-height:46dvh; padding:96px 0 120px; }
.rooms { position:relative; z-index:10; padding:0 0 96px; }
.room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.room-link {
  position:relative; overflow:hidden; min-height:180px; padding:24px; border:1px solid var(--color-border-default);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--color-bg-elevated) 92%,transparent), color-mix(in srgb,var(--color-bg-elevated) 74%,transparent)),
    radial-gradient(360px 220px at 100% 0%, color-mix(in srgb,var(--color-accent-primary) 10%,transparent), transparent 70%);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-standard) var(--ease-out), border-color var(--dur-standard) ease, box-shadow var(--dur-standard) ease, opacity var(--dur-standard) ease, background-color var(--dur-standard) ease;
}
.room-grid:hover .room-link:not(:hover) { opacity:.82; }
.room-link::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--color-accent-primary) 14%,transparent),transparent 70%); transform:translateX(-110%); transition:transform .42s var(--ease-out); }
.room-link > * { position:relative; z-index:1; }
.room-link:hover { transform:translateY(-4px); border-color:var(--color-accent-primary); box-shadow:var(--elev-3),0 0 0 1px color-mix(in srgb,var(--color-accent-primary) 18%,transparent); }
.room-link:hover::before { transform:translateX(110%); }
.room-link:active { transform: translateY(-1px) scale(.985); transition-duration: var(--dur-press); }
.room-link .page-number { display:block; padding:0; }
.room-link strong { display:block; margin-top:32px; font:400 36px/1.05 var(--serif); letter-spacing:-.01em; }
.room-link span:last-child { display:block; margin-top:10px; color:var(--color-text-secondary); font-size:16px; line-height:1.45; }
.prose { max-width:66ch; }
.prose p { margin:0 0 28px; text-wrap:pretty; }
.prose .read { font-size:clamp(20px, 1.9vw, 23px); line-height:1.7; }
.pullquote { margin:64px 0; padding-left:24px; border-left:2px solid var(--color-accent-primary); font:italic clamp(34px,5.2vw,54px)/1.15 var(--serif); hanging-punctuation:first; }
.page-back { display:inline-flex; min-height:44px; align-items:center; margin-top:48px; color:var(--color-accent-primary); font-size:15px; font-weight:500; transition: color .2s ease, transform var(--dur-press) var(--ease-out); }
.page-back:active,
.wordmark:active,
nav.primary a:active,
.mobile-nav a:active,
.lang-switch a:active,
.menu-btn:active { transform: scale(.97); }
/* World variable definitions live in the single block at the top of the file. */
@media (max-width:900px) { .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px) { .page-hero{min-height:52dvh;padding:64px 0}.page-hero .wrap{grid-template-columns:1fr}.page-number{padding:0}.content-page{padding:64px 0 88px}.room-grid{grid-template-columns:1fr}.note{grid-template-columns:1fr;gap:12px} }
.primary a[aria-current="page"]::after { right: 0; }

/* ===================================================================
   AMBIENCE + DENSITY LAYER — per-world backdrops & richer components
   Added 2026-07-06. Everything below is theme-token aware, so a single
   component renders natively in every world. Reduced-motion safe.
   =================================================================== */

/* ---- Ambient backdrop (fixed, sits behind page content) ---- */
.ambience { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambience svg { position: absolute; }
.ambience .fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.ambience-tint { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(1100px 720px at 82% 8%, color-mix(in srgb, var(--color-accent-primary) 8%, transparent), transparent 62%),
              radial-gradient(900px 640px at 10% 96%, color-mix(in srgb, var(--color-accent-secondary) 10%, transparent), transparent 60%); }

/* keep real content above ambience */
.page-hero, .content-page, .rooms, footer.site, header.site { position: relative; z-index: 10; }

/* ---- Motion utilities (all paused under reduced-motion by the global rule) ---- */
.drift        { animation: drift 26s ease-in-out infinite; }
.drift-slow   { animation: drift 44s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(1.4%, -1.8%); } }
.sway         { animation: sway 9s ease-in-out infinite; transform-origin: top center; }
@keyframes sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.float-y      { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pulse-soft   { animation: pulseSoft 5.5s ease-in-out infinite; }
@keyframes pulseSoft { 0%,100% { opacity: .3; } 50% { opacity: .75; } }
.spin-slow    { animation: spin 90s linear infinite; transform-origin: center; }
.spin-rev     { animation: spin 120s linear infinite reverse; transform-origin: center; }
.dash-draw    { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: dashDraw 3.4s ease .3s forwards; }
@keyframes dashDraw { to { stroke-dashoffset: 0; } }
.scan-x       { animation: scanX 6.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scanX { 0% { transform: translateX(-14%); opacity: 0; } 12%,88% { opacity: 1; } 100% { transform: translateX(114%); opacity: 0; } }
.radar-sweep  { animation: spin 5.5s linear infinite; transform-origin: center; }
.blink        { animation: blink 3.6s steps(1) infinite; }
@keyframes blink { 0%,72% { opacity: 1; } 73%,100% { opacity: .12; } }
.reel-spin    { animation: spin 3.2s linear infinite; transform-origin: center; }

/* ---- Section rhythm helpers for sub-pages ---- */
.content-page .block { margin-top: var(--space-9); }
.content-page .block:first-child { margin-top: 0; }
.section-lead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6); }
.section-lead h2 { font: 400 clamp(34px,4.2vw,48px)/1.08 var(--serif); letter-spacing: -.015em; margin: 6px 0 0; }
.section-lead .label { color: var(--color-text-secondary); }
.section-lead .aside { font: 14px/1.5 var(--sans); color: var(--color-text-secondary); max-width: 34ch; }

/* Ornamental divider between blocks */
.rule { display: flex; align-items: center; gap: 14px; margin: var(--space-8) 0; color: var(--color-accent-primary); }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: var(--gold-line); opacity: .6; }
.rule span { font: 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }

/* ---- Featured spotlight block (2-col) ---- */
.feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-7); align-items: stretch;
  border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-bg-elevated); position: relative; }
.feature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gold-line); opacity: .8; }
.feature .feature-body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.feature .feature-kicker { font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-primary); }
.feature h3 { font: 400 clamp(34px,4.5vw,50px)/1.05 var(--serif); letter-spacing: -.02em; margin: 4px 0 0; }
.feature p { margin: 0; color: var(--color-text-secondary); max-width: 46ch; font-size: 17px; line-height: 1.55; }
.feature .feature-visual { position: relative; min-height: 240px; border-left: 1px solid var(--color-border-default); overflow: hidden;
  background: radial-gradient(120% 120% at 80% 20%, color-mix(in srgb, var(--color-accent-primary) 14%, transparent), transparent 60%); }
.feature .feature-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Timeline / log ---- */
.timeline { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-default)); }
.timeline li, .timeline > div { position: relative; padding: 0 0 var(--space-6) 0; }
.timeline li:last-child, .timeline > div:last-child { padding-bottom: 0; }
.timeline li::before, .timeline > div::before { content: ""; position: absolute; left: -25px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-primary) 16%, transparent); }
.timeline .tl-date { font: 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-secondary); }
.timeline .tl-title { display: inline-flex; align-items: center; min-height: 44px; font: 400 23px/1.25 var(--serif); margin-top: 4px; color: var(--color-text-primary); }
.timeline .tl-body { display: block; margin-top: 6px; color: var(--color-text-secondary); font-size: 17px; line-height: 1.5; max-width: 56ch; }

/* ---- Marginalia (handwritten aside) ---- */
.marginalia { font: italic 20px/1.4 var(--read); color: var(--color-accent-primary); opacity: .85;
  border-top: 1px solid color-mix(in srgb, var(--color-accent-primary) 50%, transparent); padding-top: 12px; transform: rotate(-.6deg); max-width: 34ch; }

/* ---- Quote card ---- */
.quote-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-bg-elevated) 80%, transparent); padding: var(--space-7); position: relative; }
.quote-card::before { content: "\201C"; position: absolute; left: 14px; top: -8px; font: 400 96px/1 var(--serif); color: color-mix(in srgb, var(--color-accent-primary) 32%, transparent); }
.quote-card blockquote, .quote-card > p { margin: 0; font: 400 clamp(26px,3vw,34px)/1.4 var(--read); color: var(--color-text-primary); }
.quote-card cite { display: block; margin-top: var(--space-4); font: 500 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); font-style: normal; }

/* ---- Tracklist (music) ---- */
.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-default); }
.tracklist li { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: var(--space-4); padding: 14px 8px; border-bottom: 1px solid var(--color-border-default); transition: background .2s ease, transform .25s ease; }
.tracklist li:hover { background: color-mix(in srgb, var(--color-accent-primary) 7%, transparent); transform: translateX(8px); }
.tracklist .t-num { font: 400 18px/1 var(--display-music, var(--mono)); color: var(--color-accent-primary); }
.tracklist .t-name { font-weight: 500; color: var(--color-text-primary); }
.tracklist .t-tag { font: 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
.tracklist .t-len { font: 13px/1 var(--mono); color: var(--color-text-secondary); }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 3px; background: var(--color-accent-primary); height: 40%; border-radius: 2px; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:.2s } .eq i:nth-child(3){ animation-delay:.45s } .eq i:nth-child(4){ animation-delay:.15s } .eq i:nth-child(5){ animation-delay:.35s }
@keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }

/* ---- Book spines (shelf) ---- */
.spines { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding: 0 4px; overflow: hidden; }
.spines .spine { position: relative; flex: 1 1 auto; border-radius: 3px 3px 0 0; border: 1px solid rgba(0,0,0,.18); box-shadow: inset 3px 0 6px rgba(255,255,255,.14), inset -3px 0 8px rgba(0,0,0,.22); transition: transform .3s cubic-bezier(.2,.8,.2,1); cursor: default; }
.spines .spine::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: var(--gold-pale); opacity: .5; box-shadow: 0 22px 0 var(--gold-pale); }
.spines .spine span { position: absolute; inset: 0; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; padding: 12px 0; font: 500 12px/1 var(--sans); letter-spacing: .04em; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; }
.spines .spine:hover { transform: translateY(-12px); }

/* ---- Definition/fact list (about) ---- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5) var(--space-7); margin: var(--space-6) 0 0; }
.facts div { border-top: 1px solid var(--color-border-default); padding-top: 12px; }
.facts dt { font: 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-secondary); }
.facts dd { margin: 6px 0 0; color: var(--color-text-primary); font: 400 22px/1.35 var(--read); }

/* ---- Extra card foot arrow niceties reused everywhere ---- */
.card-foot .arrow { transition: transform .25s ease; }
.card:hover .card-foot .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature .feature-visual { min-height: 180px; border-left: none; border-top: 1px solid var(--color-border-default); }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .tracklist li { grid-template-columns: 30px 1fr auto; }
  .tracklist .t-tag { display: none; }
  .section-lead { flex-direction: column; align-items: flex-start; gap: 8px; }
  .spines { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambience { opacity: .5; }
}
/* ---- Intentional empty states ---- */
.empty-state {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 300px;
  max-width: 760px;
  padding: clamp(32px, 7vw, 72px);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-elevated) 78%, transparent);
}
.empty-state::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--gold-line);
  opacity: .8;
}
.empty-state::after {
  content: "";
  position: absolute;
  right: clamp(24px, 8vw, 80px);
  top: 50%;
  width: clamp(90px, 18vw, 180px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 22%, transparent);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 24px color-mix(in srgb, var(--color-accent-primary) 4%, transparent), 0 0 0 48px color-mix(in srgb, var(--color-accent-primary) 3%, transparent);
  pointer-events: none;
}
.empty-state > * { position: relative; z-index: 1; }
.empty-state h2 { margin: 10px 0 12px; font: 400 clamp(44px, 6.5vw, 72px)/1 var(--serif); letter-spacing: -.02em; }
.empty-state .read { max-width: 34ch; margin: 0; color: var(--color-text-secondary); font-size: clamp(18px, 1.8vw, 21px); }
@media (max-width: 640px) {
  .empty-state { min-height: 260px; }
  .empty-state::after { right: -40px; opacity: .65; }
}
/* ---- Watching entries ---- */
.watch-entry {
  max-width: 960px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
  box-shadow: var(--shadow-card);
}
.watch-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-default);
  background: #171813;
}
.watch-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch-copy { padding: clamp(24px, 5vw, 48px); }
.watch-copy h3 { margin: 10px 0 24px; font: 400 clamp(36px, 5.5vw, 58px)/1.04 var(--serif); letter-spacing: -.02em; }
.watch-copy h3 span { display: block; margin-top: 8px; color: var(--color-text-secondary); font: italic 400 .56em/1.2 var(--read); letter-spacing: 0; }
.watch-note { max-width: 66ch; color: var(--color-text-primary); font: 400 22px/1.7 var(--read); text-wrap: pretty; }
.watch-note p { margin: 0; }
.watch-note p + p { margin-top: 20px; }
.watch-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.watch-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
  color: var(--color-bg-elevated);
  font-size: 15px;
  font-weight: 600;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.watch-link:hover { transform: translateY(-2px); }
.watch-link:active { transform: scale(.97); }
.watch-link-secondary { background: transparent; color: var(--color-accent-primary); }
.watch-link:focus-visible { outline: 3px solid var(--color-accent-primary); outline-offset: 3px; }
@media (max-width: 640px) {
  .watch-copy h3 { font-size: 40px; }
  .watch-note { font-size: 20px; }
  .watch-actions { flex-direction: column; }
  .watch-link { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .watch-link { transition: none; }
  .watch-link:hover { transform: none; }
}

/* ===================================================================
   THE HEADMASTER'S STUDY — homepage enchantments (2026-07-07)
   Star chart, ember bursts, tilting rooms, lumos.
   All decorative layers are JS-injected (aria-hidden hosts) and
   skipped entirely under prefers-reduced-motion.
   =================================================================== */

/* ---- Star-chart canvas (injected into .hero-motif) ---- */
.starchart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- Rooms: candlelit tilt + glowing numerals ---- */
.room-link { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0); }
.room-link:hover,
.room-link.reveal.in:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.room-link:active,
.room-link.reveal.in:active { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-1px) scale(.985); }
.room-link .page-number { transition: color var(--dur-fast) ease, text-shadow var(--dur-fast) ease; }
.room-link:hover .page-number { color: var(--gold-pale); text-shadow: 0 0 16px rgba(229,173,53,.65); }

/* ---- Feed timeline: dots flicker like distant candles ---- */
.timeline li::before { animation: candle 3.4s ease-in-out infinite; }
.timeline li:nth-child(2n)::before { animation-delay: 1.2s; }
.timeline li:nth-child(3n)::before { animation-delay: 2.1s; }

/* ---- Ornamental star between the feed and the rooms ---- */
.recent-updates + .rooms::before { content: "\2726"; position: absolute; left: 50%; top: -12px;
  transform: translateX(-50%); color: var(--gold); font-size: 16px; opacity: .55;
  text-shadow: 0 0 14px rgba(229,173,53,.6); pointer-events: none;
  animation: starPulse 4.2s ease-in-out infinite; }
@keyframes starPulse {
  0%, 100% { opacity: .4; text-shadow: 0 0 10px rgba(229,173,53,.4); transform: translateX(-50%) scale(1); }
  50% { opacity: .85; text-shadow: 0 0 22px rgba(229,173,53,.85); transform: translateX(-50%) scale(1.18); }
}

/* ---- Magnetic buttons (JS drives --mx/--my) ---- */
.magnetic { transform: translate(var(--mx, 0px), var(--my, 0px)); }

/* ---- Lumos / Nox ---- */
body.lumos .hero::before { opacity: .35; }
body.lumos .wordmark::after { box-shadow: 0 0 12px 3px rgba(229,173,53,.7); }

@media (prefers-reduced-motion: reduce) {
  .starchart { display: none !important; }
  .room-link, .room-link:hover, .magnetic { transform: none !important; }
}
.hero::before { transition: opacity .9s ease; }
.btn.magnetic:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }
.btn.magnetic:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn.magnetic:hover { transform: none !important; } }

/* ===================================================================
   PHASE 7 — NEW WINGS (2026-07-07)
   The Cabinet (room VII), the Graveyard, 404, owl post footer.
   =================================================================== */

/* ---- Cabinet world: dark viridian + brass ---- */
body[data-theme="cabinet"], body[data-page-theme="cabinet"], body[data-world="cabinet"] {
  --color-bg-base: #0d1210;
  --color-bg-elevated: #141b17;
  --color-text-primary: #f0efe4;
  --color-text-secondary: #93998d;
  --color-accent-primary: #c9a961;
  --color-accent-secondary: #4f7d6b;
  --color-border-default: #232d26;
  --glow-opacity: .10;
  --shadow-ink: #030705;
}

/* ---- Specimen cards (the cabinet drawers) ---- */
.specimen-dates { align-self: flex-start; font: 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); padding: 6px 10px; }
.specimen-plaque { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--color-accent-primary) 32%, transparent); font: 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent-primary); }
.card.specimen:hover .specimen-plaque { text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-primary) 60%, transparent); }
.specimen-ghost { border-style: dashed; background: transparent; box-shadow: none; display: grid; place-content: center; min-height: 180px; opacity: .55; }
.specimen-ghost span { font: italic 17px/1.4 var(--read); color: var(--color-text-secondary); text-align: center; }
.specimen-ghost:hover { transform: none; box-shadow: none; }

/* ---- Seventh doorway on the home room grid ---- */
.room-link--wide { grid-column: 1 / -1; min-height: 120px; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.room-link--wide strong { margin-top: 0; }
.room-link--wide span:last-child { margin-top: 0; }

/* ---- The graveyard (projects) ---- */
.graveyard { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); align-items: end; }
.headstone { position: relative; border: 1px solid var(--color-border-default); background: color-mix(in srgb, var(--color-bg-elevated) 88%, var(--color-text-primary) 3%); border-radius: 46% 46% 8px 8px / 24% 24% 8px 8px; padding: 44px 24px 24px; text-align: center; }
.headstone .hs-years { font: 11px/1 var(--mono); letter-spacing: .16em; color: var(--color-text-secondary); }
.headstone strong { display: block; margin: 10px 0 8px; font: 400 26px/1.15 var(--serif); color: var(--color-text-primary); }
.headstone p { margin: 0; font-size: 15px; color: var(--color-text-secondary); }
.headstone .hs-rip { display: inline-block; margin-top: 14px; font: 11px/1 var(--mono); letter-spacing: .3em; color: var(--color-accent-primary); opacity: .75; }
.headstone--ghost { border-style: dashed; background: transparent; opacity: .5; }
@media (max-width: 900px) { .graveyard { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .graveyard { grid-template-columns: 1fr; } }

/* ---- 404: the unbuilt wing ---- */
.lost { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--space-6); padding: var(--space-6); text-align: center; }
.lost .wordmark { font-size: 34px; }
.lost .empty-state { max-width: 620px; }
.lost .empty-state::after { display: none; }
.lost .read { margin: 12px auto 0; max-width: 44ch; }
.lost .btn { margin-top: var(--space-5); }

/* ---- Owl post + moon (footer, JS-injected) ---- */
.footer-owl { display: inline-flex; align-items: center; gap: 8px; }
.footer-owl svg { display: block; flex: none; }
.footer-owl a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); transition: color .2s ease; }
.footer-owl a:hover { color: var(--gold-pale); }

/* ===================================================================
   PHASE 2 — CHROME (2026-07-07)
   Constellation footer, Asunción clock, next-room doorways,
   active-room star, wordmark ember trail, page transitions.
   =================================================================== */

/* ---- Active room gets a star, not just a color ---- */
nav.primary a[aria-current="page"]::before,
.mobile-nav a[aria-current="page"]::before { content: "\2726\00a0"; font-size: .7em; color: var(--gold); vertical-align: 1px; }

/* ---- Wordmark candle leaves an ember trail once you scroll ---- */
header.site.scrolled .wordmark::after { box-shadow: -7px 2px 9px -2px rgba(229,173,53,.55), 0 0 10px 2px rgba(229,173,53,.4); }

/* ---- Footer constellation (JS-injected into .footer-constel) ---- */
.footer-constel svg { display: block; width: min(440px, 82vw); height: auto; overflow: visible; }
.footer-constel .fline { stroke: rgba(229,173,53,.22); stroke-width: 1; }
.footer-constel .fstar { fill: #8c8b99; opacity: .5; }
.footer-constel .fstar.on { fill: var(--gold); opacity: 1; animation: candle 3.4s ease-in-out infinite; }
.footer-constel .fhalo { fill: none; stroke: rgba(229,173,53,.45); animation: halo 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ---- The study clock (JS-injected into .footer-brand) ---- */
.footer-clock { font: 12px/1.6 var(--mono); letter-spacing: .08em; color: #8c8b99; }
.footer-clock b { font-weight: 400; color: var(--gold); }

/* ---- Next-room doorway at the end of each room ---- */
.next-room { margin-top: var(--space-8); max-width: 760px; }
.next-room > .label { display: block; margin-bottom: var(--space-3); }
.next-room .room-link { display: flex; }

/* ---- The ticket stub (JS-injected, localStorage only) ---- */
.ticket-stub { font: 12px/1.6 var(--mono); letter-spacing: .06em; color: #8c8b99; }

/* ---- Page transitions: fade through black ---- */
.page-fade { position: fixed; inset: 0; z-index: 200; background: #06050c; opacity: 0; pointer-events: none; transition: opacity .16s var(--ease-out); }
body.page-exit .page-fade { opacity: 1; pointer-events: auto; }
body.page-enter .page-fade { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .page-fade { display: none !important; } }

/* ===================================================================
   PHASE 8 — THE PROFESSIONAL LAYER (2026-07-07)
   Command palette, YouTube facades, view-transition morphs.
   =================================================================== */

/* ---- Cross-document view transitions: room card morphs into hero ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- Command palette (⌘K / Ctrl+K, JS-built) ---- */
.pal-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(6,5,12,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: none; }
.pal { position: fixed; left: 50%; top: 16vh; z-index: 301; transform: translateX(-50%) translateY(8px) scale(.98); width: min(560px, calc(100vw - 32px));
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
  box-shadow: var(--elev-3), 0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent);
  opacity: 0; pointer-events: none; transition: none; overflow: hidden; }
body.pal-open { overflow: hidden; }
body.pal-open .pal-backdrop { opacity: 1; pointer-events: auto; }
body.pal-open .pal { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.pal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gold-line); }
.pal-input { width: 100%; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--color-border-default); outline: none;
  background: transparent; color: var(--color-text-primary); font: 400 17px/1.4 var(--sans); }
.pal-input::placeholder { color: var(--color-text-secondary); font-style: italic; font-family: var(--read); }
.pal-list { list-style: none; margin: 0; padding: 8px; max-height: min(46vh, 420px); overflow-y: auto; }
.pal-group { padding: 12px 12px 4px; font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-secondary); }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer;
  font: 500 15px/1.3 var(--sans); color: var(--color-text-primary); transition: background-color var(--dur-fast) ease; }
.pal-item .pal-star { color: transparent; font-size: 11px; flex: none; transition: color .12s ease; }
.pal-item .pal-kind { margin-left: auto; font: 11px/1 var(--mono); letter-spacing: .08em; color: var(--color-text-secondary); opacity: .7; }
.pal-item[aria-selected="true"] { background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); }
.pal-item[aria-selected="true"] .pal-star { color: var(--gold); }
.pal-empty { padding: 24px 16px 28px; text-align: center; font: italic 15px/1.5 var(--read); color: var(--color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .pal, .pal-backdrop { transition: none; } }

/* footer whisper for the palette */
.kbd-hint { font: 11px/1.6 var(--mono); letter-spacing: .1em; color: #8c8b99; border: 1px solid #252330; border-radius: 5px; padding: 3px 7px; }
@media (pointer: coarse) { .kbd-hint { display: none; } }

/* ===================================================================
   PHASE 9 — THE AWWWARDS LAYER (2026-07-07)
   Ghost numerals, entrance, scroll choreography, cursor voice, sheen.
   Heavy interaction lives in enhance.js (desktop, fine-pointer,
   motion-allowed only); everything here degrades to today's site.
   =================================================================== */

/* ---- Type at museum scale ---- */
.display-section, .section-lead h2, .empty-state h2 { text-wrap: balance; }
.footer-clock, .tl-date, .tracklist .t-len, .specimen-dates { font-variant-numeric: tabular-nums; }

/* Ghost numeral painted on the room wall (data-numeral set by site.js) */
.page-hero { overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero::after {
  content: attr(data-numeral); position: absolute; right: -2vw; bottom: -10vh; z-index: 0;
  font: 400 min(46vh, 36vw)/1 var(--serif); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
  pointer-events: none; user-select: none;
}
body[data-page-theme="light"] .page-hero::after, body[data-page-theme="cozy"] .page-hero::after { -webkit-text-stroke-color: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); }

/* Word-mask reveals for section heads (wrapped by enhance.js) */
.lw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lw > span { display: inline-block; transform: translateY(115%); transition: transform .72s var(--ease-out); }
.lines-in .lw > span { transform: none; }

/* ---- The entrance: striking the match (homepages, once per session) ---- */
html.entering body::before {
  content: ""; position: fixed; inset: 0; z-index: 95; background: #06050c;
  pointer-events: none; animation: curtainLift .52s var(--ease-out) .32s forwards;
}
html.entering body::after {
  content: ""; position: fixed; left: 40%; top: 42%; width: 12px; height: 12px; z-index: 96;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff7d6, var(--gold-pale) 40%, transparent 72%);
  box-shadow: 0 0 24px 10px rgba(229,173,53,.5);
  animation: matchStrike .46s var(--ease-out) .1s;
}
@keyframes curtainLift { to { opacity: 0; } }
@keyframes matchStrike { 0% { opacity: 0; transform: scale(.2); } 45% { opacity: 1; transform: scale(1.7); } 100% { opacity: 0; transform: scale(3.4); } }
html.entering .hero-motif { opacity: 0; animation: motifUp .68s var(--ease-out) .36s forwards; }
@keyframes motifUp { to { opacity: 1; } }
html.entering .hero h1 .w > span { animation-delay: .6s; }
html.entering .hero .reveal { transition-delay: .7s; }
@media (prefers-reduced-motion: reduce) {
  html.entering body::before, html.entering body::after { display: none !important; }
  html.entering .hero-motif { opacity: 1; animation: none; }
}

/* ---- Scroll choreography (scroll-driven where supported; IO reveals stay the fallback) ---- */
@supports (animation-timeline: scroll()) {
  .page-hero::after { animation: ghostDrift linear both; animation-timeline: scroll(root); animation-range: 0px 90vh; }
  @keyframes ghostDrift { from { transform: translateY(4vh); } to { transform: translateY(-12vh); } }
  .footer-constel svg .fline { stroke-dasharray: 90; stroke-dashoffset: 90; animation: constelDraw linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
  @keyframes constelDraw { to { stroke-dashoffset: 0; } }
  .timeline::before { transform-origin: top; animation: ruleDraw linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes ruleDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  /* Soft parallax on home feature media */
  .feature-media { animation: featureLift linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes featureLift { from { opacity: .55; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::after, .footer-constel svg .fline, .timeline::before, .feature-media { animation: none !important; }
  .footer-constel svg .fline { stroke-dashoffset: 0; }
  .feature-media { opacity: 1; transform: none; }
}

/* ---- Room-specific hero signatures: one visual thought per world ---- */
body[data-page-theme="grunge"] .page-hero {
  background:
    radial-gradient(780px 420px at 78% 34%, color-mix(in srgb, #d0402a 18%, transparent), transparent 64%),
    repeating-linear-gradient(90deg, color-mix(in srgb, #fff 5%, transparent) 0 1px, transparent 1px 18px),
    #120b0b;
}
body[data-page-theme="grunge"] .page-hero .display-hero {
  font-family: var(--display-music);
  text-transform: uppercase;
  letter-spacing: .01em;
  text-shadow: 1px 0 0 #d0402a, -1px 0 0 rgba(255,255,255,.12);
}
body[data-page-theme="blueprint"] .page-hero {
  background:
    radial-gradient(860px 520px at 78% 42%, rgba(56,189,248,.13), transparent 66%),
    linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px),
    #0c1524;
  background-size: auto, 40px 40px, 40px 40px, auto;
}
body[data-page-theme="cozy"] .page-hero {
  background:
    linear-gradient(118deg, transparent 0 48%, color-mix(in srgb, #e5ad35 18%, transparent) 48% 64%, transparent 64%),
    radial-gradient(820px 520px at 82% 20%, color-mix(in srgb, #8f532a 12%, transparent), transparent 64%),
    #f3ebd7;
}
/* ---- Fallback page-transition sparks (View Transition browsers use the morph) ---- */
.exit-sparks { position: fixed; inset: 0; z-index: 201; pointer-events: none; overflow: hidden; }
.exit-spark {
  position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff7d6, var(--gold) 48%, transparent 72%);
  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--gold) 60%, transparent);
  transform: translate(-50%, -50%);
  animation: exitSpark .36s var(--ease-out) forwards;
}
@keyframes exitSpark {
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.18);
  }
}
@media (prefers-reduced-motion: reduce) { .exit-sparks { display: none !important; } }

/* ---- Cursor label (chip docked to the ring, enhance.js sets text) ---- */
.cursor-label {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%) scale(.82);
  opacity: 0; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); white-space: nowrap;
  font: 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: var(--radius-pill);
  padding: 5px 9px; background: rgba(6,5,12,.62); backdrop-filter: blur(4px);
}
body.cursor-labeled .cursor-label { opacity: 1; transform: translateY(-50%) scale(1); }

/* ---- Living light: the sheen you carry across cards (enhance.js drives --px/--py) ---- */
.sheen { background-image: radial-gradient(190px circle at var(--px, -300px) var(--py, -300px), color-mix(in srgb, var(--gold) 8%, transparent), transparent 72%); }


/* ---- YouTube facades: posters until asked ---- */
.yt-facade { position: absolute; inset: 0; display: block; overflow: hidden; }
.yt-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); }
.yt-facade::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(6,5,12,.45)),
              color-mix(in srgb, var(--color-accent-primary) 10%, transparent); }
.yt-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  display: grid; place-content: center; border-radius: 50%; padding-left: 3px;
  background: color-mix(in srgb, var(--color-accent-primary) 90%, #000); color: #fff; font-size: 20px;
  box-shadow: 0 12px 32px -8px rgba(6,5,12,.6); transition: transform var(--dur-standard) var(--ease-out), box-shadow var(--dur-standard) ease; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { transform: scale(1.09); box-shadow: 0 12px 36px -6px rgba(6,5,12,.7), 0 0 0 3px color-mix(in srgb, var(--gold) 65%, transparent); }
.yt-facade:active .yt-play { transform: scale(.96); transition-duration: var(--dur-press); }
.yt-facade:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .yt-play { transition: none; } }

/* ===================================================================
   EXPERIMENT — bigger type + more motion (branch only)
   Room-grid stagger, ink underline, ambient gold breath.
   =================================================================== */

/* Stagger each doorway on entrance only — never leave delay on .in (kills hover snap) */
.room-grid > .room-link.reveal:not(.in):nth-child(1) { transition-delay: .04s; }
.room-grid > .room-link.reveal:not(.in):nth-child(2) { transition-delay: .1s; }
.room-grid > .room-link.reveal:not(.in):nth-child(3) { transition-delay: .16s; }
.room-grid > .room-link.reveal:not(.in):nth-child(4) { transition-delay: .22s; }
.room-grid > .room-link.reveal:not(.in):nth-child(5) { transition-delay: .28s; }
.room-grid > .room-link.reveal:not(.in):nth-child(6) { transition-delay: .34s; }
.room-grid > .room-link.reveal:not(.in):nth-child(7) { transition-delay: .4s; }
.room-grid > .room-link.reveal.in { transition-delay: 0s; }

/* Gold hairline draws under page / section titles once revealed */
.display-section.reveal,
.display-hero.reveal {
  background-image: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 40%, transparent));
  background-repeat: no-repeat;
  background-position: left calc(100% + 2px);
  background-size: 0% 1.5px;
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out), filter .72s ease, background-size .9s var(--ease-out) .15s;
}
.display-section.reveal.in,
.display-hero.reveal.in { background-size: min(42%, 220px) 1.5px; }
/* Hero title keeps its own entrance; skip the underline there */
.hero .display-hero.reveal { background-image: none; background-size: 0; }

/* Soft ambient breath on accent labels */
.label.reveal.in { animation: labelGlow 5.5s ease-in-out infinite; }
@keyframes labelGlow {
  0%, 100% { color: var(--color-text-secondary); }
  50% { color: color-mix(in srgb, var(--color-accent-primary) 55%, var(--color-text-secondary)); }
}

/* Timeline titles gently brighten as the row settles */
.timeline.reveal.in .tl-title {
  transition: color .4s ease, letter-spacing .4s ease;
}
.timeline.reveal.in li:hover .tl-title {
  color: var(--color-accent-primary);
}

/* Page-back: underline draws on hover */
.page-back {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 1px;
  transition: color .2s ease, transform var(--dur-press) var(--ease-out), background-size .32s var(--ease-out);
}
.page-back:hover { background-size: 100% 1px; }

/* Quote block on home — soft ink settle (sizes live in desk-only block) */
.home-quote blockquote.reveal {
  transform: translateY(20px) scale(.98);
  filter: blur(3px);
}
.home-quote blockquote.reveal.in {
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .room-grid > .room-link.reveal { transition-delay: 0s !important; }
  .display-section.reveal, .display-hero.reveal {
    background-size: min(42%, 220px) 1.5px; transition: none;
  }
  .label.reveal.in { animation: none; }
  .starPulse, .recent-updates + .rooms::before { animation: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .room-grid:hover .room-link:not(:hover) { opacity: 1; }
  .btn:hover::after { left: -70%; transform: skewX(-18deg); }
  .card:hover::after { left: -80%; transform: skewX(-16deg); }
  .room-link:hover::before { transform: translateX(-110%); }
  .btn-primary:hover,
  .btn.magnetic:hover,
  .card:hover,
  .note:hover,
  .watch-link:hover { transform: none; }
  .room-link:hover {
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
    box-shadow: var(--elev-1);
  }
  .room-link:hover .page-number {
    color: var(--color-accent-primary);
    text-shadow: none;
  }
  .yt-facade:hover .yt-play {
    transform: none;
  }
  .btn:active,
  .btn.magnetic:active,
  .watch-link:active {
    transform: scale(.97);
  }
  .room-link:active {
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(-1px) scale(.985);
  }
  .yt-facade:active .yt-play {
    transform: scale(.96);
  }
}

/* ===================================================================
   DESKTOP ADDITIONS — homepage only (2026-07-10)
   Featured performance, pull-quote from the desk.
   Both moments stay present on mobile with a deliberately quieter treatment.
   =================================================================== */
/* The feature and quote are part of the doorway on every viewport.  The
   mobile treatment below keeps them compact without hiding the authored
   moments that make Home feel like Briam's room. */
.desk-only { display: block; }
.home-feature { padding: var(--space-8) 0 0; }
.home-feature .section-lead .aside { max-width: none; }
.feature-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid #252330; background: #06050c;
  box-shadow: 0 34px 90px -34px rgba(6,5,12,.85), 0 0 0 1px rgba(229,173,53,.06); }
.feature-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-quote { padding: var(--space-8) 0 var(--space-7); }
.home-quote blockquote { position: relative; margin: 0 auto; max-width: 46ch; text-align: center; }
.home-quote blockquote::before { content: "\201C"; display: block; font: 400 76px/0.6 var(--serif);
  color: var(--gold); opacity: .8; margin-bottom: 14px; }
.home-quote blockquote p { margin: 0; font: 400 clamp(26px, 5vw, 42px)/1.3 var(--serif);
  letter-spacing: -.012em; color: #fbfaf5; text-wrap: balance; }
.home-quote cite { display: block; margin-top: 22px; font: 400 15px/1.4 var(--sans); font-style: normal; }
.home-quote cite a { color: var(--gold-pale); text-decoration: none; border-bottom: 1px solid rgba(229,173,53,.35); padding-bottom: 2px; }
.home-quote cite a:hover { color: #fff4c2; border-bottom-color: var(--gold); }
@media (min-width: 901px) {
  .desk-only { display: block; }

  /* ---- Featured performance (music room) ---- */
  .home-feature { padding: var(--space-9) 0 0; }
  .home-feature .section-lead .aside { max-width: none; }
  .feature-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--radius-lg); border: 1px solid #252330; background: #06050c;
    box-shadow: 0 34px 90px -34px rgba(6,5,12,.85), 0 0 0 1px rgba(229,173,53,.06); }
  .feature-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* ---- Pull-quote from the writing desk ---- */
  .home-quote { padding: calc(var(--space-9) + 8px) 0 var(--space-8); }
  .home-quote blockquote { position: relative; margin: 0 auto; max-width: 46ch; text-align: center; }
  .home-quote blockquote::before { content: "\201C"; display: block; font: 400 96px/0.6 var(--serif);
    color: var(--gold); opacity: .8; margin-bottom: 18px;
    animation: candle 4s ease-in-out infinite; }
  .home-quote blockquote p { margin: 0; font: 400 clamp(30px, 3.2vw, 42px)/1.3 var(--serif);
    letter-spacing: -.012em; color: #fbfaf5; text-wrap: balance; }
  .home-quote cite { display: block; margin-top: 26px; font: 400 16px/1.4 var(--sans); font-style: normal; }
  .home-quote cite a { color: var(--gold-pale); text-decoration: none; border-bottom: 1px solid rgba(229,173,53,.35); padding-bottom: 2px; }
  .home-quote cite a:hover { color: #fff4c2; border-bottom-color: var(--gold); }
}

@media (max-width: 640px) {
  .home-feature { padding-top: var(--space-7); }
  .home-feature .section-lead { margin-bottom: var(--space-4); }
  .home-feature .section-lead h2 { font-size: clamp(30px, 9vw, 38px); }
  .home-feature .section-lead .aside { margin-top: 2px; }
  .home-feature .btn { min-height: 44px; }
  .feature-media { border-radius: var(--radius-md); }
  .home-quote { padding: var(--space-7) 0 var(--space-6); }
  .home-quote blockquote::before { font-size: 62px; margin-bottom: 10px; }
  .home-quote blockquote p { font-size: clamp(27px, 8vw, 34px); }
  .home-quote cite { margin-top: 18px; font-size: 14px; }
}

/* Music session: a live set, not a wall of embeds. */
.music-session { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.music-feature { border:1px solid color-mix(in srgb,var(--color-text-primary) 20%,transparent); background:color-mix(in srgb,var(--color-bg-elevated) 86%,var(--color-bg-base)); padding:clamp(1rem,2vw,1.5rem); }
.music-facade { aspect-ratio:16/9; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%,#c23b2240,transparent 52%),#171411; color:#f6efe4; position:relative; overflow:hidden; }
.music-facade::after { content:""; position:absolute; inset:12px; border:1px solid #f6efe426; pointer-events:none; }
.music-facade iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.music-play { width:64px; height:64px; border:1px solid #f6efe4; background:transparent; color:#f6efe4; border-radius:50%; font-size:1.25rem; cursor:pointer; display:grid; place-items:center; transition:transform .2s ease,background .2s ease; }
.music-play:hover,.music-play:focus-visible { background:#c23b22; transform:scale(1.05); }
.music-play:focus-visible,.track-row:focus-visible { outline:2px solid #c23b22; outline-offset:4px; }
.music-feature-copy { padding:1.25rem .25rem .25rem; }
.music-feature-copy h2 { font-family:var(--serif); font-size:clamp(2rem,4vw,3.5rem); font-weight:400; line-height:.98; margin:.35rem 0 .75rem; text-wrap:balance; }
.music-feature-copy p { max-width:48ch; }
.setlist { border-top:1px solid color-mix(in srgb,var(--color-text-primary) 20%,transparent); }
.setlist-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.setlist-heading h2 { font-family:var(--serif); font-size:2rem; font-weight:400; margin:0; }
.track-row { display:grid; grid-template-columns:2.5rem 1fr auto; gap:.75rem; align-items:center; width:100%; min-height:64px; padding:.7rem 0; border:0; border-bottom:1px solid color-mix(in srgb,var(--color-text-primary) 16%,transparent); background:transparent; color:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.track-row:hover .track-title,.track-row:focus-visible .track-title { text-decoration:underline; text-underline-offset:4px; }
.track-number { font-variant-numeric:tabular-nums; color:color-mix(in srgb,var(--color-text-primary) 50%,transparent); }
.track-title { font-size:1rem; }
.track-note { font-size:.75rem; color:color-mix(in srgb,var(--color-text-primary) 58%,transparent); }
.track-arrow { font-size:1.15rem; }
.music-note { margin-top:2.5rem; padding-top:1rem; border-top:1px solid color-mix(in srgb,var(--color-text-primary) 16%,transparent); font-size:.9rem; color:color-mix(in srgb,var(--color-text-primary) 68%,transparent); }
@media (max-width:760px) {
  .music-session { display:block; }
  .setlist { margin-top:2.5rem; }
  .music-facade { aspect-ratio:4/3; }
  .track-row { grid-template-columns:2rem 1fr auto; min-height:60px; }
  .track-note { display:block; margin-top:.15rem; }
}