@layer reset, base, atmosphere, layout, components, utilities;

@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(html, body, h1, h2, p, figure) { margin: 0; }
  :where(button, input) { font: inherit; }
  :where(button) { border: 0; }
  :where(a, button, input, label, [role="button"]) { -webkit-tap-highlight-color: transparent; }
  :where(a, button) { touch-action: manipulation; }
  :where(img, svg) { display: block; max-inline-size: 100%; }
  :where(a) { color: inherit; }
}

@layer base {
  @font-face {
    font-family: "Cormorant Vera";
    src: url("assets/fonts/cormorant_cyr.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  @font-face {
    font-family: "Cormorant Vera";
    src: url("assets/fonts/cormorant_lat.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    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: "Marck Vera";
    src: url("assets/fonts/marck_cyr.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  @font-face {
    font-family: "Marck Vera";
    src: url("assets/fonts/marck_lat.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    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: "Forum Vera";
    src: url("assets/fonts/forum-cyr.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  @font-face {
    font-family: "Forum Vera";
    src: url("assets/fonts/forum-lat.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    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;
  }

  :root {
    color-scheme: dark;
    --night: #041316;
    --night-blue: #071d24;
    --forest: #0b2b2e;
    --forest-soft: #12383a;
    --dusk: #111829;
    --horizon: #9a482d;
    --horizon-soft: #d27a43;
    --night-deep: #020b0d;
    --ink-warm: #302216;
    --ink-soft: #2b2117;
    --parchment-ink: #855522;
    --parchment-sign: #774719;
    --parchment-accent: #8d5a24;
    --seal-light: #f6d58b;
    --seal-mid: #c58635;
    --seal-deep: #72431f;
    --seal-ink: #3c2415;
    --button-top: #f2cf7f;
    --button-bottom: #c8923c;
    --button-ink: #27180d;
    --paper-light: #eadbb8;
    --paper-deep: #d4bf90;
    --gold-deep: #be8230;
    --gold: #e8b95d;
    --gold-bright: #ffd982;
    --ember: #c96d32;
    --cream: #f3e6c9;
    --cream-soft: #d9c9a7;
    --parchment: #e7d5ad;
    --parchment-deep: #cbb480;
    --ink: #2b2117;
    --white: #fffaf0;
    --transparent: transparent;
    --night-36: rgb(4 19 22 / 36%);
    --night-58: rgb(4 19 22 / 58%);
    --night-78: rgb(4 19 22 / 78%);
    --night-90: rgb(4 19 22 / 90%);
    --night-96: rgb(4 19 22 / 96%);
    --gold-08: rgb(232 185 93 / 8%);
    --gold-16: rgb(232 185 93 / 16%);
    --gold-28: rgb(232 185 93 / 28%);
    --gold-48: rgb(232 185 93 / 48%);
    --cream-10: rgb(243 230 201 / 10%);
    --cream-24: rgb(243 230 201 / 24%);
    --cream-68: rgb(243 230 201 / 68%);
    --focus: #ffe29a;
    --font-display: "Cormorant Vera", Georgia, serif;
    --font-script: "Marck Vera", "Segoe Script", cursive;
    --font-caps: "Forum Vera", Georgia, serif;
    --step--1: clamp(.76rem, .73rem + .13vw, .85rem);
    --step-0: clamp(1rem, .94rem + .28vw, 1.16rem);
    --step-1: clamp(1.28rem, 1.08rem + .82vw, 1.8rem);
    --step-2: clamp(1.85rem, 1.38rem + 1.9vw, 3rem);
    --step-3: clamp(2.6rem, 1.75rem + 3.4vw, 5rem);
    --step-hero: clamp(5.8rem, 3.4rem + 11vw, 13rem);
    --space-2xs: .35rem;
    --space-xs: clamp(.55rem, .45rem + .42vw, .82rem);
    --space-s: clamp(.82rem, .66rem + .7vw, 1.25rem);
    --space-m: clamp(1.18rem, .9rem + 1.25vw, 1.95rem);
    --space-l: clamp(1.9rem, 1.25rem + 2.7vw, 3.9rem);
    --space-xl: clamp(3.4rem, 2rem + 5.4vw, 7.2rem);
    --space-2xl: clamp(5.4rem, 3rem + 8.6vw, 11.5rem);
    --page-pad: clamp(1rem, .45rem + 3vw, 4.5rem);
    --content: 82rem;
    --measure: 62ch;
    --radius-s: .5rem;
    --radius-m: .85rem;
    --radius-l: 1.5rem;
    --radius-round: 999rem;
    --line: .0625rem;
    --control: 2.75rem;
    --player-space: 9.5rem;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-wind: cubic-bezier(.45, .05, .55, .95);
    --micro: 180ms;
    --reveal: 320ms;
  }

  html { scroll-behavior: smooth; background: var(--night); }

  body {
    min-inline-size: 20rem;
    min-block-size: 100dvh;
    overflow-x: clip;
    background:
      radial-gradient(circle at 76% 2%, rgb(201 109 50 / 12%), transparent 28rem),
      radial-gradient(ellipse at 72% 18%, rgb(210 122 67 / 15%), transparent 34rem),
      linear-gradient(180deg, var(--dusk), var(--night-blue) 30%, var(--night) 64%, var(--night-deep));
    color: var(--cream);
    font-family: var(--font-display);
    font-size: var(--step-0);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  body.is-open { padding-block-end: var(--player-space); }
  .js body:not(.is-open) { overflow: hidden; }

  :focus-visible { outline: .18rem solid var(--focus); outline-offset: .22rem; }
  :focus:not(:focus-visible) { outline: none; }
  ::selection { background: var(--gold); color: var(--night); }
}

@layer atmosphere {
  .ambient-lights {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .28;
    transition: opacity var(--reveal) var(--ease-out);
  }

  .is-deep-evening .ambient-lights { opacity: 1; }

  .ambient-lights span {
    position: absolute;
    inline-size: .22rem;
    block-size: .22rem;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 .65rem .18rem rgb(255 201 93 / 42%);
    opacity: 0;
    animation: pollen 15s linear infinite;
  }

  .ambient-lights span:nth-child(1) { left: 7%; top: 84%; animation-delay: -3s; animation-duration: 18s; }
  .ambient-lights span:nth-child(2) { left: 15%; top: 56%; animation-delay: -11s; animation-duration: 21s; transform: scale(.7); }
  .ambient-lights span:nth-child(3) { left: 28%; top: 76%; animation-delay: -6s; animation-duration: 17s; }
  .ambient-lights span:nth-child(4) { left: 37%; top: 43%; animation-delay: -14s; animation-duration: 24s; transform: scale(.55); }
  .ambient-lights span:nth-child(5) { left: 48%; top: 89%; animation-delay: -8s; animation-duration: 19s; }
  .ambient-lights span:nth-child(6) { left: 57%; top: 64%; animation-delay: -2s; animation-duration: 23s; transform: scale(.65); }
  .ambient-lights span:nth-child(7) { left: 66%; top: 80%; animation-delay: -12s; animation-duration: 16s; }
  .ambient-lights span:nth-child(8) { left: 73%; top: 52%; animation-delay: -5s; animation-duration: 20s; transform: scale(.5); }
  .ambient-lights span:nth-child(9) { left: 81%; top: 72%; animation-delay: -9s; animation-duration: 22s; }
  .ambient-lights span:nth-child(10) { left: 90%; top: 91%; animation-delay: -15s; animation-duration: 18s; transform: scale(.75); }
  .ambient-lights span:nth-child(11) { left: 94%; top: 45%; animation-delay: -4s; animation-duration: 25s; transform: scale(.55); }
  .ambient-lights span:nth-child(12) { left: 21%; top: 96%; animation-delay: -1s; animation-duration: 20s; transform: scale(.65); }

  .scene-grass,
  .windborne {
    position: absolute;
    z-index: 1;
    max-inline-size: none;
    pointer-events: none;
    user-select: none;
  }

  .scene-grass {
    transform-origin: 50% 100%;
    animation: grassSway 12s var(--ease-wind) infinite;
  }

  .scene-grass-hero { inset-inline: -7%; inset-block-end: -4%; z-index: 2; inline-size: 114%; opacity: .72; }
  .scene-grass-album { inset-inline-start: -16%; inset-block-end: -8rem; z-index: -1; inline-size: min(64rem, 92vw); opacity: .18; }

  .windborne { overflow: visible; }
  .windborne-hero { inset: 4% 0 12%; z-index: 4; }
  .windborne-score { inset: 8% -4% 14%; z-index: 0; opacity: .52; }

  .wind-seed {
    --seed-x: 50%;
    --seed-y: 50%;
    --seed-dx: 4.5rem;
    --seed-dy: -3rem;
    --seed-scale: 1;
    --seed-tilt: 18deg;
    position: absolute;
    inset-inline-start: var(--seed-x);
    inset-block-start: var(--seed-y);
    inline-size: .32rem;
    block-size: 1.55rem;
    border-radius: 90% 8% 75% 12%;
    background: linear-gradient(160deg, rgb(255 232 170 / 92%), rgb(185 129 62 / 58%));
    box-shadow: 0 0 .7rem rgb(250 204 110 / 16%);
    opacity: 0;
    transform-origin: 50% 100%;
    animation: singleSeedFlight var(--seed-time, 13s) var(--ease-wind) var(--seed-delay, 0s) infinite;
  }

  .wind-seed::before {
    content: "";
    position: absolute;
    inset-inline-start: 48%;
    inset-block-end: 88%;
    inline-size: .06rem;
    block-size: 1.35rem;
    border-radius: 50%;
    background: linear-gradient(rgb(249 226 171 / 76%), transparent);
    transform: rotate(9deg);
    transform-origin: 50% 100%;
  }

  .wind-seed::after {
    content: "";
    position: absolute;
    inset-inline-start: 44%;
    inset-block-end: 175%;
    inline-size: .55rem;
    block-size: .22rem;
    border-block-start: 1px solid rgb(255 232 178 / 52%);
    border-radius: 50%;
    transform: rotate(-24deg);
  }

  .wind-seed:nth-child(1) { --seed-x: 7%; --seed-y: 73%; --seed-dx: 6rem; --seed-dy: -5rem; --seed-scale: .62; --seed-tilt: 12deg; --seed-time: 17s; --seed-delay: -11s; }
  .wind-seed:nth-child(2) { --seed-x: 19%; --seed-y: 32%; --seed-dx: -3rem; --seed-dy: -4rem; --seed-scale: .42; --seed-tilt: -28deg; --seed-time: 21s; --seed-delay: -3s; }
  .wind-seed:nth-child(3) { --seed-x: 34%; --seed-y: 81%; --seed-dx: 8rem; --seed-dy: -6rem; --seed-scale: .78; --seed-tilt: 37deg; --seed-time: 14s; --seed-delay: -8s; }
  .wind-seed:nth-child(4) { --seed-x: 48%; --seed-y: 19%; --seed-dx: 4rem; --seed-dy: -3rem; --seed-scale: .36; --seed-tilt: 8deg; --seed-time: 24s; --seed-delay: -15s; }
  .wind-seed:nth-child(5) { --seed-x: 59%; --seed-y: 67%; --seed-dx: -5rem; --seed-dy: -7rem; --seed-scale: .9; --seed-tilt: -17deg; --seed-time: 19s; --seed-delay: -5s; }
  .wind-seed:nth-child(6) { --seed-x: 71%; --seed-y: 38%; --seed-dx: 6rem; --seed-dy: -4rem; --seed-scale: .54; --seed-tilt: 24deg; --seed-time: 16s; --seed-delay: -13s; }
  .wind-seed:nth-child(7) { --seed-x: 82%; --seed-y: 78%; --seed-dx: -7rem; --seed-dy: -5rem; --seed-scale: .7; --seed-tilt: -35deg; --seed-time: 23s; --seed-delay: -7s; }
  .wind-seed:nth-child(8) { --seed-x: 91%; --seed-y: 26%; --seed-dx: -4rem; --seed-dy: -6rem; --seed-scale: .44; --seed-tilt: 31deg; --seed-time: 18s; --seed-delay: -1s; }
  .wind-seed:nth-child(9) { --seed-x: 66%; --seed-y: 89%; --seed-dx: 5rem; --seed-dy: -8rem; --seed-scale: .58; --seed-tilt: 4deg; --seed-time: 26s; --seed-delay: -19s; }

  @keyframes pollen {
    0% { opacity: 0; translate: 0 8vh; }
    12% { opacity: .66; }
    48% { opacity: .3; translate: 3.5vw -38vh; }
    75% { opacity: .72; }
    100% { opacity: 0; translate: -2vw -92vh; }
  }

  @keyframes grassSway {
    0%, 100% { transform: rotate(-.35deg) translate3d(-.25%, 0, 0); }
    50% { transform: rotate(.45deg) translate3d(.35%, -.2%, 0); }
  }

  @keyframes singleSeedFlight {
    0% { opacity: 0; transform: translate3d(0, 1.4rem, 0) rotate(calc(var(--seed-tilt) - 16deg)) scale(var(--seed-scale)); }
    14% { opacity: .74; }
    47% { opacity: .42; transform: translate3d(calc(var(--seed-dx) * .38), calc(var(--seed-dy) * .46), 0) rotate(calc(var(--seed-tilt) + 27deg)) scale(var(--seed-scale)); }
    78% { opacity: .68; }
    100% { opacity: 0; transform: translate3d(var(--seed-dx), var(--seed-dy), 0) rotate(calc(var(--seed-tilt) + 74deg)) scale(calc(var(--seed-scale) * .88)); }
  }

  @keyframes starGlow {
    0%, 100% { opacity: .58; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.08); }
  }

  @keyframes windBreath {
    0%, 100% { transform: scale(1.035) translate3d(-.35%, 0, 0); }
    50% { transform: scale(1.065) translate3d(.55%, -.35%, 0); }
  }

  @keyframes sunBreath {
    0%, 100% { opacity: .42; transform: scale(.92); }
    50% { opacity: .78; transform: scale(1.06); }
  }

  @keyframes sealFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-.28rem) rotate(1deg); }
  }

  @keyframes sectionReveal {
    from { opacity: .15; transform: translateY(2.2rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@layer layout {
  main, .site-footer { position: relative; z-index: 2; }

  .section-shell {
    inline-size: min(100%, var(--content));
    margin-inline: auto;
    padding-block: var(--space-2xl);
    padding-inline: var(--page-pad);
  }

  .hero {
    position: relative;
    display: grid;
    align-items: start;
    min-block-size: 100dvh;
    padding: max(4.5rem, 8dvh) var(--page-pad) max(8rem, 17dvh);
    isolation: isolate;
    overflow: clip;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    block-size: 30%;
    background: linear-gradient(transparent, var(--night));
    pointer-events: none;
  }

  .hero-copy {
    position: relative;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: var(--space-s);
    inline-size: min(100%, 42rem);
    margin-inline: auto;
    text-align: center;
    text-shadow: 0 .18rem 1.5rem var(--night-90);
  }

  .letter { position: relative; display: grid; align-items: center; gap: var(--space-l); min-block-size: 90dvh; }
  .letter-copy { position: relative; z-index: 1; display: grid; gap: var(--space-m); max-inline-size: var(--measure); }
  .score { display: grid; gap: var(--space-xl); overflow: clip; }
  .score-heading { display: grid; justify-items: center; gap: var(--space-s); max-inline-size: 48rem; margin-inline: auto; text-align: center; }
  .album { display: grid; gap: var(--space-xl); overflow: clip; }
  .album-heading { display: grid; gap: var(--space-m); }
  .album-heading > div { display: grid; gap: var(--space-s); }
  .track-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-s); }

  .finale {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: min(58rem, 100dvh);
    gap: var(--space-m);
    padding: var(--space-2xl) var(--page-pad);
    overflow: clip;
    text-align: center;
    isolation: isolate;
  }

  .author {
    position: relative;
    display: grid;
    align-items: center;
    gap: var(--space-xl);
    min-block-size: 88dvh;
    overflow: clip;
  }

  .site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-l) var(--page-pad);
    border-block-start: var(--line) solid var(--gold-16);
    background: var(--night-deep);
    color: var(--cream-68);
    font-family: var(--font-caps);
    font-size: var(--step--1);
    letter-spacing: .07em;
  }

  @media (min-width: 52rem) {
    .hero { align-items: center; padding-block: var(--space-xl); }
    .hero-copy { justify-items: start; margin-inline: 4vw auto; text-align: start; }
    .letter { grid-template-columns: minmax(10rem, .38fr) minmax(0, 1fr); }
    .letter-copy { padding: clamp(2.6rem, 4vw, 4.8rem); }
    .album-heading { grid-template-columns: minmax(0, 1fr) minmax(18rem, .62fr); align-items: end; }
    .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .author { grid-template-columns: minmax(18rem, .72fr) minmax(0, 1fr); }
  }
}

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    z-index: 200;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    background: var(--cream);
    color: var(--night);
    transform: translateY(-160%);
    transition: transform var(--micro) ease-out;
  }

  .skip-link:focus { transform: translateY(0); }

  .eyebrow {
    color: var(--gold);
    font-family: var(--font-caps);
    font-size: var(--step--1);
    letter-spacing: .28em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .section-title {
    color: var(--cream);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 400;
    line-height: .98;
    text-wrap: balance;
  }

  .section-lead { max-inline-size: var(--measure); color: var(--cream-68); font-size: var(--step-1); font-style: italic; line-height: 1.45; }

  .is-loading { overflow: hidden; }

  .loading-screen {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: max(var(--space-l), env(safe-area-inset-top)) var(--page-pad) max(var(--space-l), env(safe-area-inset-bottom));
    overflow: clip;
    background:
      radial-gradient(ellipse at 50% 84%, rgb(191 91 48 / 24%), transparent 36%),
      radial-gradient(circle at 50% 38%, rgb(60 112 98 / 26%), transparent 38%),
      linear-gradient(180deg, #03151a, #082526 58%, #06171a);
    color: var(--cream);
    opacity: 1;
    visibility: visible;
    transition: opacity 320ms ease-in, visibility 0s linear 0s;
  }

  .loading-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 15% 22%, rgb(255 221 150 / 10%) 0 .06rem, transparent .09rem),
      radial-gradient(circle at 76% 16%, rgb(255 221 150 / 9%) 0 .05rem, transparent .08rem);
    background-size: 9rem 8rem, 12rem 10rem;
    pointer-events: none;
  }

  .loading-screen.is-complete { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, 320ms; }
  .no-js .loading-screen { display: none; }

  .loader-stage {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    inline-size: min(100%, 38rem);
    text-align: center;
  }

  .ld-gift {
    inline-size: clamp(6.6rem, 24vw, 8rem);
    margin-block-end: clamp(1.25rem, 4dvh, 2rem);
    filter: drop-shadow(0 1rem 2.4rem rgb(226 169 75 / 42%));
    animation: loaderGiftFloat 3s ease-in-out infinite;
  }

  .ld-kicker {
    margin-block-end: var(--space-s);
    color: var(--gold);
    font-family: var(--font-caps);
    font-size: var(--step--1);
    letter-spacing: .28em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .ld-phrase {
    min-block-size: 2.7em;
    max-inline-size: 29rem;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem);
    font-style: italic;
    line-height: 1.35;
    text-wrap: balance;
  }

  .ld-barwrap {
    inline-size: min(100%, 20.5rem);
    block-size: .46rem;
    margin-block-start: var(--space-m);
    overflow: hidden;
    border: var(--line) solid var(--gold-28);
    border-radius: var(--radius-round);
    background: var(--gold-08);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
  }

  .ld-bar {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), #fff0bd);
    box-shadow: 0 0 1rem rgb(240 198 105 / 52%);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .ld-pct {
    margin-block-start: var(--space-xs);
    color: var(--cream-68);
    font-family: var(--font-caps);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .14em;
  }

  .ld-spark {
    position: absolute;
    inline-size: .22rem;
    block-size: .22rem;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 .75rem .12rem rgb(240 198 105 / 55%);
    opacity: 0;
    animation: loaderSpark 4.6s linear infinite;
    pointer-events: none;
  }

  .ld-spark:nth-child(1) { inset: 64% auto auto 8%; animation-delay: -.7s; animation-duration: 4.4s; }
  .ld-spark:nth-child(2) { inset: 72% auto auto 25%; animation-delay: -2.1s; animation-duration: 5.2s; }
  .ld-spark:nth-child(3) { inset: 78% auto auto 49%; animation-delay: -1.4s; animation-duration: 4s; }
  .ld-spark:nth-child(4) { inset: 70% 25% auto auto; animation-delay: -3.2s; animation-duration: 5.6s; }
  .ld-spark:nth-child(5) { inset: 66% 8% auto auto; animation-delay: -.3s; animation-duration: 4.7s; }
  .ld-spark:nth-child(6) { inset: 60% auto auto 41%; animation-delay: -4.1s; animation-duration: 6s; }

  @keyframes loaderGiftFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-.65rem) rotate(2deg); }
  }

  @keyframes loaderSpark {
    0% { opacity: 0; transform: translateY(.6rem) scale(1); }
    18% { opacity: .86; }
    100% { opacity: 0; transform: translateY(-7rem) scale(.3); }
  }

  .gift-gate { display: none; }

  .js .gift-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: max(var(--space-l), env(safe-area-inset-top)) var(--page-pad) max(var(--space-l), env(safe-area-inset-bottom));
    overflow: clip;
    background: var(--night);
    color: var(--cream);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--reveal) ease, visibility 0s linear 0s;
  }

  .gift-gate::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 42%, rgb(226 169 75 / 13%), transparent 34%),
      linear-gradient(180deg, transparent, rgb(2 13 17 / 62%));
    pointer-events: none;
  }

  .is-open .gift-gate { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, var(--reveal); }

  .gate-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 50% 108%, rgb(202 106 53 / 35%), transparent 38%),
      radial-gradient(ellipse at 50% 46%, rgb(31 88 83 / 26%), transparent 48%),
      radial-gradient(circle at 15% 22%, rgb(255 221 150 / 8%) 0 .07rem, transparent .1rem),
      radial-gradient(circle at 76% 16%, rgb(255 221 150 / 10%) 0 .06rem, transparent .09rem),
      linear-gradient(180deg, #06191e, #0a2728 54%, #07191d);
    background-size: auto, auto, 9rem 8rem, 12rem 10rem, auto;
  }

  .gate-sky span {
    position: absolute;
    inline-size: .22rem;
    block-size: .22rem;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 1.1rem .25rem rgb(255 201 93 / 30%);
    animation: starGlow 5s ease-in-out infinite;
  }

  .gate-sky span:nth-child(1) { inset: 13% auto auto 11%; animation-delay: -1.2s; }
  .gate-sky span:nth-child(2) { inset: 28% 13% auto auto; scale: .58; animation-delay: -3.7s; }
  .gate-sky span:nth-child(3) { inset: auto auto 17% 18%; scale: .72; animation-delay: -2.4s; }
  .gate-sky span:nth-child(4) { inset: 9% 28% auto auto; scale: .42; animation-delay: -4.6s; }
  .gate-sky span:nth-child(5) { inset: auto 9% 22% auto; scale: .65; animation-delay: -.5s; }

  .gate-content {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: clamp(.7rem, 1.6dvh, 1.25rem);
    inline-size: min(100%, 48rem);
    text-align: center;
    text-shadow: 0 .2rem 1.8rem var(--night);
    transition: opacity 180ms ease-in, transform 180ms ease-in;
  }

  .is-opening .gate-content { opacity: 0; transform: translateY(-.45rem) scale(.97); }

  .gate-seal {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: clamp(6.4rem, 16vw, 8.2rem);
    block-size: clamp(6.4rem, 16vw, 8.2rem);
    margin-block-end: clamp(.35rem, 1dvh, .8rem);
    border: .12rem solid rgb(255 226 154 / 42%);
    border-radius: 47% 53% 46% 54% / 52% 45% 55% 48%;
    background: radial-gradient(circle at 35% 28%, var(--seal-light), var(--seal-mid) 58%, var(--seal-deep));
    color: var(--seal-ink);
    font-family: var(--font-caps);
    font-size: clamp(2.8rem, 7vw, 4rem);
    box-shadow: 0 0 0 .28rem rgb(190 130 52 / 12%), 0 0 4.5rem rgb(232 185 93 / 28%), inset 0 -.55rem 1rem rgb(78 36 14 / 44%);
  }

  .gate-seal::after {
    content: "";
    position: absolute;
    inset: .55rem;
    border: 1px solid rgb(92 48 18 / 35%);
    border-radius: inherit;
  }

  .gate-eyebrow { max-inline-size: 30rem; color: var(--gold); letter-spacing: .34em; }

  .gate-title {
    color: var(--cream);
    font-family: var(--font-script);
    font-size: clamp(6.2rem, 19vw, 11rem);
    font-weight: 400;
    line-height: .72;
    text-shadow: 0 .08em .32em var(--night), 0 0 .55em rgb(232 185 93 / 28%);
  }

  .gate-line { max-inline-size: 34rem; color: var(--cream-soft); font-size: clamp(1.15rem, 3vw, 1.6rem); font-style: italic; line-height: 1.25; }

  .gate-hint { margin-block-start: var(--space-xs); color: var(--gold); font-family: var(--font-caps); font-size: clamp(.7rem, 1.7vw, .88rem); letter-spacing: .1em; opacity: .65; }

  .open-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-block-size: 3.25rem;
    inline-size: fit-content;
    margin-block-start: var(--space-s);
    padding: var(--space-xs) var(--space-l);
    border: var(--line) solid rgb(255 226 154 / 55%);
    border-radius: var(--radius-round);
    background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
    color: var(--button-ink);
    cursor: pointer;
    font-family: var(--font-caps);
    font-size: .9rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    box-shadow: 0 .8rem 2.7rem rgb(232 185 93 / 26%);
    transition: transform var(--micro) ease-out;
  }

  .open-button:hover { transform: translateY(-.16rem); }
  .open-button svg { inline-size: 1.05rem; fill: currentColor; }

  .hero-title {
    color: var(--white);
    font-family: var(--font-script);
    font-size: var(--step-hero);
    font-weight: 400;
    line-height: .72;
    text-shadow: 0 .08em .34em var(--night), 0 0 .5em rgb(232 185 93 / 25%);
  }

  .hero-lead { max-inline-size: 34rem; color: var(--cream); font-size: var(--step-1); font-style: italic; line-height: 1.32; }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--control);
    inline-size: fit-content;
    color: var(--gold-bright);
    font-family: var(--font-caps);
    font-size: .82rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-underline-offset: .35em;
  }

  .text-link span { transition: transform var(--micro) ease-out; }
  .text-link:hover span { transform: translateY(.2rem); }

  .light-dial { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; margin: 0; }
  .light-dial::before { content: ""; position: absolute; inset: 40% 5% auto auto; z-index: 2; inline-size: min(42vw, 30rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 203 97 / 19%), transparent 67%); filter: blur(1rem); animation: sunBreath 7s ease-in-out infinite; }
  .dial-picture { position: absolute; inset: 0; overflow: hidden; background: var(--night); }
  .dial-picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night-58), transparent 32%, transparent 62%, var(--night-78)), linear-gradient(90deg, var(--night-58), transparent 58%); }
  .dial-picture img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; animation: windBreath 17s var(--ease-wind) infinite reverse; }
  .letter::before {
    content: "";
    position: absolute;
    inset: 8% 0 0;
    z-index: -1;
    background: radial-gradient(circle at 20% 50%, rgb(201 109 50 / 19%), transparent 34rem);
    pointer-events: none;
  }

  .section-mark { color: var(--gold-08); font-family: var(--font-script); font-size: clamp(14rem, 6rem + 28vw, 30rem); line-height: .55; user-select: none; filter: drop-shadow(0 0 2rem var(--gold-16)); }

  .letter-copy {
    padding: clamp(1.45rem, 4vw, 3.4rem);
    border: var(--line) solid rgb(89 58 25 / 44%);
    border-radius: .25rem;
    background:
      linear-gradient(90deg, rgb(80 45 14 / 8%) 1px, transparent 1px),
      radial-gradient(circle at 12% 8%, rgb(255 250 220 / 42%), transparent 18rem),
      linear-gradient(145deg, var(--paper-light), var(--paper-deep));
    background-size: 3.4rem 100%, auto, auto;
    color: var(--ink);
    box-shadow: 0 2.2rem 6rem rgb(0 0 0 / 42%), inset 0 0 4rem rgb(101 58 19 / 11%);
  }

  .letter-copy .eyebrow { color: var(--parchment-ink); }
  .letter-copy .section-title { color: var(--ink-warm); }
  .prose { display: grid; gap: var(--space-s); color: rgb(43 33 23 / 78%); }
  .prose p:first-child::first-letter { float: left; padding: .08em .12em 0 0; color: var(--parchment-accent); font-family: var(--font-script); font-size: 4.8em; line-height: .65; }
  .prose p:first-child { font-size: var(--step-1); line-height: 1.48; }
  .signature { justify-self: end; color: var(--parchment-sign); font-family: var(--font-script); font-size: var(--step-2); line-height: 1; }

  .score { position: relative; isolation: isolate; }
  .score::before { content: ""; position: absolute; inset: 4% -10% auto; z-index: -1; block-size: 40rem; background: radial-gradient(ellipse, var(--gold-08), transparent 68%); pointer-events: none; }
  .score > :not(.windborne) { position: relative; z-index: 1; }

  .score-figure { display: grid; gap: var(--space-s); inline-size: min(100%, 68rem); margin-inline: auto; }
  .score-figure picture { position: relative; display: block; padding: clamp(.28rem, .8vw, .6rem); border: var(--line) solid var(--gold-28); border-radius: var(--radius-m); background: linear-gradient(145deg, var(--gold-16), transparent); box-shadow: 0 2rem 6rem rgb(0 0 0 / 48%); }
  .score-figure img { inline-size: 100%; block-size: auto; border-radius: calc(var(--radius-m) - .2rem); }
  .score-figure figcaption { color: var(--cream-68); font-size: var(--step--1); font-style: italic; text-align: center; }

  .name-code { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); inline-size: min(100%, 48rem); margin-inline: auto; perspective: 60rem; }
  .note-card { min-inline-size: 0; min-block-size: 7.2rem; padding: 0; background: transparent; color: inherit; cursor: pointer; perspective: 38rem; }
  .note-card-inner { position: relative; display: grid; inline-size: 100%; block-size: 100%; min-block-size: 7.2rem; transform-style: preserve-3d; transition: transform 320ms var(--ease-out); }
  .note-front,
  .note-back { grid-area: 1 / 1; display: grid; place-items: center; padding: var(--space-s); border: var(--line) solid var(--gold-28); border-radius: var(--radius-s); background: linear-gradient(145deg, var(--cream-10), transparent); box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 .8rem 2rem rgb(0 0 0 / 18%); backface-visibility: hidden; }
  .note-front { color: var(--cream); font-family: var(--font-script); font-size: var(--step-3); line-height: 1; }
  .note-back { align-content: center; gap: var(--space-2xs); background: linear-gradient(150deg, var(--gold-28), var(--cream-10)); transform: rotateY(180deg); }
  .note-back strong { color: var(--gold-bright); font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1; }
  .note-back small { color: var(--cream-68); font-family: var(--font-caps); font-size: var(--step--1); }
  .note-card.is-flipped .note-card-inner { transform: rotateY(180deg); }
  .note-card:hover .note-front { border-color: var(--gold-48); }

  .name-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
  .decode-button,
  .listen-name { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--control); padding: .7rem 1.15rem; border: var(--line) solid var(--gold-48); border-radius: var(--radius-round); background: var(--gold-08); color: var(--cream); font-family: var(--font-caps); cursor: pointer; transition: transform var(--micro) ease-out, background-color var(--micro) ease-out; }
  .decode-button[hidden],
  .listen-name[hidden] { display: none; }
  .listen-name { background: linear-gradient(145deg, var(--gold-bright), var(--horizon-soft)); color: var(--night); }
  .listen-name svg { inline-size: 1rem; fill: currentColor; }
  .decode-button:hover,
  .listen-name:hover { transform: translateY(-.12rem); }
  .listen-name:disabled { cursor: not-allowed; opacity: .42; transform: none; }

  .album { position: relative; }
  .album::before { content: ""; position: absolute; inset: 2% -20% auto; z-index: -1; block-size: 55rem; background: radial-gradient(circle at 75% 12%, rgb(10 60 61 / 55%), transparent 45%); }

  .ambient-card { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-s); padding: var(--space-m); border: var(--line) solid var(--gold-28); border-radius: var(--radius-m); background: linear-gradient(135deg, rgb(17 56 58 / 82%), var(--cream-10)); box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 1.2rem 3rem rgb(0 0 0 / 24%); transition: border-color var(--micro) ease-out, transform var(--micro) ease-out; }
  .ambient-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 10% 50%, var(--gold-16), transparent 34%); opacity: 0; transition: opacity var(--micro) ease-out; }
  .ambient-card.is-active { border-color: var(--gold-48); }
  .ambient-card.is-active::before { opacity: 1; }
  .ambient-toggle { display: grid; place-items: center; min-inline-size: 3.2rem; min-block-size: 3.2rem; border: var(--line) solid var(--gold-48); border-radius: 50%; background: var(--gold-08); color: var(--gold-bright); cursor: pointer; }
  .ambient-toggle svg { inline-size: 1.15rem; fill: currentColor; }
  .ambient-pause-icon { display: none; }
  .ambient-playing .ambient-play-icon { display: none; }
  .ambient-playing .ambient-pause-icon { display: block; }
  .ambient-copy { display: grid; gap: .18rem; min-inline-size: 0; }
  .ambient-copy strong { color: var(--cream); font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.1; }
  .ambient-copy small { color: var(--cream-68); font-size: var(--step--1); font-style: italic; line-height: 1.35; }
  .ambient-kicker { color: var(--gold); font-family: var(--font-caps); font-size: var(--step--1); letter-spacing: .06em; }
  .ambient-volume { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); color: var(--cream-68); font-family: var(--font-caps); font-size: var(--step--1); }
  .ambient-volume input { inline-size: 100%; min-block-size: var(--control); accent-color: var(--gold); cursor: pointer; }
  .ambient-volume output { min-inline-size: 2.6rem; color: var(--gold-bright); font-variant-numeric: tabular-nums; text-align: end; }

  .track-card {
    min-inline-size: 0;
    border: var(--line) solid var(--gold-16);
    border-radius: var(--radius-m);
    background: linear-gradient(140deg, rgb(18 56 58 / 66%), rgb(4 19 22 / 82%));
    box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 1.1rem 2.8rem rgb(0 0 0 / 18%);
    transition: transform var(--micro) ease-out, border-color var(--micro) ease-out, box-shadow var(--micro) ease-out;
  }

  .track-card:hover { transform: translateY(-.18rem); border-color: var(--gold-48); }
  .track-card.is-active { border-color: var(--gold); box-shadow: 0 0 2.6rem var(--gold-16), inset 0 1px rgb(255 255 255 / 9%); }

  .track-button { display: grid; grid-template-columns: 1.75rem 2.75rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: var(--space-xs); inline-size: 100%; min-block-size: 7.1rem; padding: var(--space-s); background: var(--transparent); color: inherit; text-align: start; cursor: pointer; }
  .track-number { grid-row: 1 / 3; color: var(--gold); font-family: var(--font-caps); font-size: var(--step--1); }
  .track-symbol { grid-row: 1 / 3; display: grid; place-items: center; inline-size: var(--control); block-size: var(--control); border: var(--line) solid var(--gold-28); border-radius: 50%; background: var(--gold-08); color: var(--gold-bright); }
  .track-symbol svg { inline-size: 1.05rem; fill: currentColor; }
  .track-pause-icon { display: none; }
  .is-playing .track-card.is-active .track-play-icon { display: none; }
  .is-playing .track-card.is-active .track-pause-icon { display: block; }
  .track-copy { display: grid; gap: .15rem; min-inline-size: 0; }
  .track-copy strong { color: var(--cream); font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.1; }
  .track-copy small { color: var(--cream-68); font-family: var(--font-display); font-size: var(--step--1); font-style: italic; line-height: 1.35; }
  .track-time { grid-column: 3; color: var(--gold); font-family: var(--font-caps); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
  .is-active .track-symbol { background: linear-gradient(145deg, var(--gold-bright), var(--gold-deep)); color: var(--night); box-shadow: 0 0 1.8rem var(--gold-28); }

  .finale::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/vera-sunset-1536.webp") center / cover no-repeat; animation: windBreath 19s var(--ease-wind) infinite; }
  .finale::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 62% 58%, transparent, var(--night-36) 38%, var(--night-90) 82%), linear-gradient(180deg, var(--night-96), transparent 33%, var(--night-78)); }
  .finale-title { max-inline-size: 15ch; color: var(--white); font-family: var(--font-script); font-size: var(--step-3); font-weight: 400; line-height: 1.1; text-wrap: balance; text-shadow: 0 .18rem 1.8rem var(--night); }
  .finale p { max-inline-size: 36rem; color: var(--cream); font-size: var(--step-1); font-style: italic; text-shadow: 0 .15rem 1rem var(--night); }
  .finale-mark { display: grid; place-items: center; inline-size: 5.5rem; block-size: 5.5rem; margin-block-start: var(--space-l); border: var(--line) solid var(--gold-48); border-radius: 50%; color: var(--gold-bright); font-family: var(--font-script); font-size: 3.5rem; box-shadow: 0 0 3rem var(--gold-28); }
  .first-star { position: absolute; inset-inline-end: 21%; inset-block-start: 19%; inline-size: .34rem; block-size: .34rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 .7rem .18rem var(--gold-bright), 0 0 2.2rem .55rem var(--gold-28); animation: starGlow 5s ease-in-out infinite; }

  .author::before { content: ""; position: absolute; inset: 10% -20%; z-index: -1; background: radial-gradient(circle at 28% 50%, rgb(209 126 56 / 18%), transparent 32rem); pointer-events: none; }
  .author-portrait { position: relative; inline-size: min(100%, 31rem); margin-inline: auto; padding: clamp(.35rem, 1vw, .65rem); border: var(--line) solid var(--gold-28); border-radius: clamp(.8rem, 2vw, 1.4rem); background: linear-gradient(145deg, var(--gold-16), transparent); box-shadow: 0 2rem 6rem rgb(0 0 0 / 46%); }
  .author-portrait::after { content: ""; position: absolute; inset: clamp(.35rem, 1vw, .65rem); border-radius: calc(clamp(.8rem, 2vw, 1.4rem) - .25rem); box-shadow: inset 0 0 0 1px rgb(255 232 177 / 18%), inset 0 -5rem 7rem rgb(4 19 22 / 24%); pointer-events: none; }
  .author-portrait img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; border-radius: calc(clamp(.8rem, 2vw, 1.4rem) - .25rem); object-fit: cover; object-position: 50% 18%; }
  .author-copy { display: grid; justify-items: center; gap: var(--space-s); max-inline-size: 38rem; margin-inline: auto; text-align: center; }
  .author-title { color: var(--cream); font-family: var(--font-script); font-size: clamp(4.8rem, 12vw, 8.5rem); font-weight: 400; line-height: .78; text-shadow: 0 .12em .55em var(--night); }
  .author-role { color: var(--gold); font-family: var(--font-caps); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; }
  .author-line { max-inline-size: 30rem; color: var(--cream-soft); font-size: var(--step-1); font-style: italic; line-height: 1.45; }
  .author-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--control); margin-block-start: var(--space-xs); padding: .8rem 1.35rem; border: var(--line) solid var(--gold-48); border-radius: var(--radius-round); background: linear-gradient(145deg, var(--gold-bright), var(--horizon-soft)); color: var(--night); font-family: var(--font-caps); font-size: .8rem; letter-spacing: .11em; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform var(--micro) ease-out; }
  .author-link:hover { transform: translateY(-.12rem); }
  .site-footer a { min-block-size: var(--control); text-underline-offset: .25em; }

  .js [data-reveal] { opacity: 0; transform: translateY(1.4rem); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
  .js [data-reveal].in { opacity: 1; transform: translateY(0); }

  .player {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 80;
    padding: var(--space-xs) var(--space-xs) max(var(--space-xs), env(safe-area-inset-bottom));
    border-block-start: var(--line) solid var(--gold-28);
    background: var(--night-90);
    color: var(--cream);
    box-shadow: 0 -1rem 3rem rgb(0 0 0 / 35%);
    backdrop-filter: blur(1rem);
    transform: translateY(110%);
    transition: transform var(--reveal) var(--ease-out);
  }

  .is-open .player { transform: translateY(0); }
  .player-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); inline-size: min(100%, var(--content)); margin-inline: auto; }
  .player-track { grid-column: 1 / 3; display: flex; align-items: center; gap: var(--space-xs); min-inline-size: 0; }
  .player-track > span:last-child { display: grid; min-inline-size: 0; }
  .player-track small { color: var(--cream-68); font-size: .68rem; line-height: 1.1; }
  .player-track strong { overflow: hidden; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .player-index { color: var(--gold); font-family: var(--font-caps); font-size: var(--step--1); }
  .player-controls { grid-column: 1; display: flex; align-items: center; gap: var(--space-2xs); }

  .icon-button, .main-play { display: grid; place-items: center; min-inline-size: var(--control); min-block-size: var(--control); border: var(--line) solid var(--cream-10); border-radius: 50%; background: var(--cream-10); color: var(--cream); cursor: pointer; transition: background-color var(--micro) ease-out, transform var(--micro) ease-out; }
  .icon-button:hover, .main-play:hover { background: var(--cream-24); transform: scale(1.04); }
  .icon-button svg, .main-play svg { inline-size: 1.15rem; fill: currentColor; }
  .main-play { border-color: var(--gold-bright); background: linear-gradient(145deg, var(--gold-bright), var(--button-bottom)); color: var(--night); box-shadow: 0 0 1.5rem var(--gold-28); }
  .pause-icon { display: none; }
  .is-playing .play-icon { display: none; }
  .is-playing .pause-icon { display: block; }
  .player-timeline { grid-column: 2 / 4; min-inline-size: 0; }
  .player-timeline input { inline-size: 100%; accent-color: var(--gold); cursor: pointer; }
  .player-time { display: flex; justify-content: space-between; color: var(--cream-68); font-family: var(--font-caps); font-size: .7rem; font-variant-numeric: tabular-nums; line-height: 1; }
  .player-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: var(--space-xs); }
  .volume-control { display: none; align-items: center; gap: var(--space-xs); }
  .volume-control svg { inline-size: 1.1rem; fill: currentColor; }
  .volume-control input { inline-size: 5.5rem; accent-color: var(--gold); }

  .audio-status { position: fixed; inset-inline-start: 50%; inset-block-end: calc(var(--player-space) + var(--space-s)); z-index: 90; max-inline-size: calc(100% - 2 * var(--page-pad)); padding: var(--space-xs) var(--space-s); border-radius: var(--radius-round); background: var(--gold); color: var(--night); font-family: var(--font-caps); opacity: 0; pointer-events: none; transform: translate(-50%, .5rem); transition: opacity var(--micro) ease-out, transform var(--micro) ease-out; }
  .audio-status.is-visible { opacity: 1; transform: translate(-50%, 0); }

  @media (min-width: 46rem) {
    .name-code { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .windborne-score { inset-inline: -6%; opacity: .58; }
    .ambient-card { grid-template-columns: auto minmax(0, 1fr) minmax(16rem, .7fr); }
    .ambient-volume { grid-column: auto; }
    .track-button { grid-template-columns: 2rem 3rem minmax(0, 1fr) auto; grid-template-rows: auto; }
    .track-number, .track-symbol { grid-row: 1; }
    .track-time { grid-column: 4; grid-row: 1; }
  }

  @media (min-width: 60rem) {
    :root { --player-space: 6.2rem; }
    html { scrollbar-gutter: stable; }
    .dial-picture img { object-position: center; }
    .player { padding-inline: var(--page-pad); }
    .player-inner { grid-template-columns: minmax(12rem, .75fr) auto minmax(13rem, 1fr) auto; gap: var(--space-s); }
    .player-track { grid-column: 1; grid-row: 1; }
    .player-controls { grid-column: 2; grid-row: 1; }
    .player-timeline { grid-column: 3; grid-row: 1; }
    .player-actions { grid-column: 4; grid-row: 1; }
    .volume-control { display: flex; }
  }
}

@layer utilities {
  .visually-hidden { position: absolute; inline-size: .0625rem; block-size: .0625rem; padding: 0; margin: -.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  @media (max-width: 51.99rem) {
    .letter { max-inline-size: 43rem; }
    .section-mark { position: absolute; inset: 5% auto auto -4%; z-index: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .ambient-lights { display: none; }
  }
}