:root{--body-canvas:#090b18;--body-surface:#11152a;--body-elevated:#181d37;--body-ink:#f7f2eb;--body-ink-muted:#bfc0d2;--body-border:#666f9e;--body-accent:#ffc95b;--body-accent-ink:#17131d;--body-focus:#ffc95b;--grid-content:90rem;--grid-gutter:clamp(1.25rem,7vw,8rem);--grid-gap:1rem;--measure-reading:44rem;--rhythm-breath:8rem;--rhythm-pause:3rem;--leading-display:1.05;--leading-title:1.1;--leading-lead:1.75;--leading-reading:1.65;--leading-quote:1.65;--leading-ui:1.2;--tracking-display:-.05em;--tracking-title:-.04em;--motion-duration-instant:.01ms;--motion-duration-short:.3s;--motion-duration-long:.7s;--motion-ease-arrive:ease;--motion-ease-settle:cubic-bezier(.22,1,.36,1);--motion-distance-small:8px;--motion-distance-medium:34px;--motion-stagger:80ms;--bg:var(--body-canvas);--surface:var(--body-surface);--surface2:var(--body-elevated);--text:var(--body-ink);--muted:var(--body-ink-muted);--line:var(--body-border);--gold:var(--body-accent);--peach:#ff8b78;--metric:#a9bcff;--shadow:0 24px 70px rgba(0,0,0,.35);--ink-on-peach:#211324;--dark-overlay:rgba(9,11,24,.55);--record-a:#101222;--record-b:#222849;font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif;color-scheme:dark}
:root[data-theme="light"]{--body-canvas:#fff8ef;--body-surface:#ffffff;--body-elevated:#f7edff;--body-ink:#17172a;--body-ink-muted:#56566d;--body-border:#746b7b;--body-accent:#8a5600;--body-accent-ink:#ffffff;--body-focus:#7046a3;--bg:var(--body-canvas);--surface:var(--body-surface);--surface2:var(--body-elevated);--text:var(--body-ink);--muted:var(--body-ink-muted);--line:var(--body-border);--gold:var(--body-accent);--shadow:0 24px 60px rgba(76,49,101,.14);color-scheme:light}
*{box-sizing:border-box}h1,h2,h3{text-wrap:balance}html{scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden;transition:background var(--motion-duration-short),color var(--motion-duration-short);text-wrap:pretty;word-break:keep-all}button,a{font:inherit}button{color:inherit}a{color:inherit}.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--gold);color:var(--body-accent-ink);padding:.8rem 1rem;border-radius:.7rem}.skip:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.topbar{position:fixed;z-index:50;inset:0 0 auto;height:70px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}.brand{font-weight:900;text-decoration:none;letter-spacing:var(--tracking-title)}.brand span,.kicker,.eyebrow{color:var(--gold)}.desktop-nav{display:flex;gap:2rem}.desktop-nav a{text-decoration:none;font-size:.92rem;color:var(--muted)}.desktop-nav a:hover,.desktop-nav a:focus-visible{color:var(--text)}.header-actions{display:flex;gap:.5rem}.icon-button,.menu-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer}.menu-button{display:none}.drawer{display:none}.hero{min-height:100svh;position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(380px,1.15fr);align-items:center;gap:4vw;padding:110px clamp(1.25rem,6vw,7rem) 70px;overflow:hidden}.hero:before{content:"";position:absolute;width:600px;height:600px;left:-280px;top:-200px;border-radius:50%;background:radial-gradient(circle,var(--peach),transparent 66%);opacity:.12}.hero-copy{z-index:2}.eyebrow,.kicker{font-size:.75rem;font-weight:900;letter-spacing:var(--tracking-title)}.hero h1{font-size:clamp(4.2rem,10vw,9rem);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:.3em 0}.hero h1 em{font-style:normal;color:var(--peach)}.lede{max-width:660px;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:var(--leading-lead);color:var(--muted)}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}.primary,.secondary{border-radius:999px;padding:.95rem 1.35rem;font-weight:900;cursor:pointer}.primary{border:0;background:var(--gold);color:var(--body-accent-ink)}.secondary{border:1px solid var(--line);background:transparent}.hero-art{position:relative;border-radius:50% 50% 42% 42%;overflow:hidden;aspect-ratio:4/5;max-height:78svh;box-shadow:var(--shadow);transform:rotate(2deg)}.hero-art img{width:100%;height:100%;object-fit:cover}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,var(--dark-overlay))}.orbit{position:absolute;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.55rem .8rem;font-size:.72rem;font-weight:900;box-shadow:var(--shadow)}.orbit-a{left:5%;top:14%}.orbit-b{right:4%;bottom:15%}.scroll-cue{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);font-size:.65rem;letter-spacing:var(--tracking-title);color:var(--muted)}.scroll-cue span{color:var(--gold)}.section{padding:clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,8rem)}.section-head{max-width:780px;margin-bottom:3rem}.section-head h2{font-size:clamp(2.5rem,6vw,5.5rem);line-height:var(--leading-title);letter-spacing:var(--tracking-display);margin:.2em 0}.section-head>p:last-child{color:var(--muted);font-size:1.08rem}.listen{background:var(--surface)}.player{display:grid;grid-template-columns:minmax(230px,380px) 1fr;align-items:center;gap:clamp(2rem,6vw,6rem);max-width:1100px;margin:auto;background:var(--bg);padding:clamp(1.2rem,4vw,3rem);border:1px solid var(--line);border-radius:2.5rem;box-shadow:var(--shadow)}.record{aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,var(--record-a) 0 5px,var(--record-b) 6px 8px);display:grid;place-items:center;box-shadow:0 0 0 7px var(--peach),var(--shadow);transition:transform var(--motion-duration-short)}.record.playing{animation:spin calc(var(--motion-duration-long) * 10) linear infinite}.record span{width:34%;aspect-ratio:1;border-radius:50%;background:var(--gold);color:var(--body-accent-ink);display:grid;place-items:center;text-align:center;font-weight:900;font-size:.74rem}.player h3{font-size:clamp(2.2rem,5vw,4.2rem);margin:.1em 0;letter-spacing:var(--tracking-title)}.player-copy>p{color:var(--muted)}.controls{display:flex;align-items:center;gap:1rem;margin-top:2rem}.play{flex:0 0 58px;width:58px;height:58px;border:0;border-radius:50%;background:var(--peach);color:var(--ink-on-peach);cursor:pointer;font-size:1.2rem}.mute{border:1px solid var(--line);background:var(--surface);border-radius:50%;width:42px;height:42px;cursor:pointer}.timeline{flex:1}.timeline input{width:100%;accent-color:var(--peach)}.timeline div{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}.audio-status{font-size:.78rem}.toon-strip{display:grid;gap:8rem;max-width:900px;margin:auto}.toon-card{margin:0;position:relative}.toon-card:nth-child(even){transform:translateX(6vw)}.toon-card img{display:block;width:100%;height:auto;border-radius:2rem;border:1px solid var(--line);box-shadow:var(--shadow)}.episode{display:inline-block;margin-bottom:.8rem;color:var(--gold);font-size:.72rem;font-weight:900;letter-spacing:var(--tracking-title)}.toon-card figcaption{font-size:1.1rem;font-weight:800;margin-top:1rem}.facts{background:var(--surface)}.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.fact{background:var(--bg);border:1px solid var(--line);border-radius:1.6rem;padding:2rem}.fact strong{display:block;font-size:clamp(2.5rem,5vw,5rem);letter-spacing:var(--tracking-display);color:var(--metric)}.fact.accent strong{color:var(--peach)}.fact p,.caution p{color:var(--muted);line-height:var(--leading-reading)}.caution{display:flex;gap:1rem;align-items:flex-start;margin-top:1rem;padding:1.5rem;border-radius:1.4rem;background:color-mix(in srgb,var(--gold) 10%,var(--bg));border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line))}.caution>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--gold);color:var(--body-accent-ink);font-weight:900}.caution h3,.caution p{margin:.15rem}.sources{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}.sources a{padding:.8rem 1rem;border:1px solid var(--line);border-radius:999px;text-decoration:none}.lyrics{background:linear-gradient(145deg,var(--bg),color-mix(in srgb,var(--surface2) 70%,var(--bg)))}.lyric-sheet{display:grid;grid-template-columns:1fr 1fr;gap:1px;max-width:1000px;background:var(--line);border:1px solid var(--line);border-radius:2rem;overflow:hidden}.lyric-sheet>div{background:var(--surface);padding:clamp(2rem,5vw,4rem)}.label{font-size:.7rem;letter-spacing:var(--tracking-title);color:var(--gold);font-weight:900}.lyric-sheet blockquote{margin:0;font-size:clamp(1.35rem,3vw,2.35rem);line-height:var(--leading-reading);font-weight:800;letter-spacing:var(--tracking-title)}.closing{text-align:center;min-height:75vh;display:grid;place-content:center;justify-items:center}.closing h2{font-size:clamp(2.7rem,7vw,6.5rem);line-height:var(--leading-title);letter-spacing:var(--tracking-display);max-width:1100px}footer{padding:2rem clamp(1.25rem,6vw,7rem);border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem}.reveal{opacity:0;transform:translateY(34px);transition:opacity var(--motion-duration-long) var(--motion-ease-arrive),transform var(--motion-duration-long) var(--motion-ease-arrive)}.reveal.visible{opacity:1;transform:none}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.desktop-nav{display:none}.menu-button{display:block}.drawer{display:block;position:fixed;z-index:45;top:70px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);transform:translateY(-120%);opacity:0;transition:transform var(--motion-duration-short) var(--motion-ease-settle),opacity var(--motion-duration-short);pointer-events:none}.drawer.open{transform:none;opacity:1;pointer-events:auto}.drawer nav{display:grid;padding:1rem}.drawer a{font-size:1.35rem;font-weight:900;text-decoration:none;padding:1rem;border-bottom:1px solid var(--line)}.hero{grid-template-columns:1fr;padding-top:110px}.hero-art{grid-row:1;max-height:48svh}.hero h1{font-size:clamp(4rem,22vw,7rem)}.scroll-cue{display:none}.player{grid-template-columns:1fr}.record{max-width:280px;margin:auto}.fact-grid{grid-template-columns:1fr}.toon-card:nth-child(even){transform:none}.lyric-sheet{grid-template-columns:1fr}footer{display:block}.section{padding-inline:1.25rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

@media(max-width:1100px){.hero{gap:2vw}.section{padding-inline:clamp(1.25rem,5vw,5rem)}}
@media(hover:hover){.desktop-nav a:hover{color:var(--text)}}
@media(hover:none),(pointer:coarse){.desktop-nav a{padding:.5rem}}
:focus-visible{outline:3px solid var(--body-focus);outline-offset:3px}.sources a{overflow-wrap:anywhere}

/* v2: preserve the approved artwork and bind the record to the player */
:root{--record-size:9rem;--record-size-compact:5.5rem;--player-radius:2rem;--hero-radius:1.75rem;--player-space:2rem}
.hero-art{justify-self:end;width:min(100%,40rem);aspect-ratio:auto;max-height:none;border-radius:0;overflow:visible;transform:none;box-shadow:none}
.hero-art img{display:block;width:100%;height:auto;max-height:calc(100svh - 9rem);object-fit:contain;border:1px solid var(--line);border-radius:var(--hero-radius);box-shadow:var(--shadow)}
.hero-art:after{display:none}
.orbit-a{left:var(--motion-distance-small);top:var(--motion-distance-small)}
.orbit-b{right:var(--motion-distance-small);bottom:var(--motion-distance-small)}
.player{display:block;max-width:60rem;padding:var(--player-space);border-radius:var(--player-radius)}
.track-head{display:grid;grid-template-columns:var(--record-size) minmax(0,1fr);align-items:center;gap:var(--player-space)}
.record{width:var(--record-size);max-width:none;margin:0}
.record span{font-size:.65rem}
.player h3{font-size:clamp(2rem,4vw,3.25rem)}
.player-copy>p{margin-block:.35rem}
.controls{margin-top:var(--player-space)}
.audio-status{margin:1rem 0 0 calc(var(--record-size) + var(--player-space))}

@media(max-width:800px){
  .hero-art{width:100%;max-height:none}
  .hero-art img{width:100%;max-height:none}
  .player{padding:1.25rem}
  .track-head{grid-template-columns:var(--record-size-compact) minmax(0,1fr);gap:1rem}
  .record{width:var(--record-size-compact);max-width:none;margin:0}
  .record span{font-size:.52rem}
  .player h3{font-size:clamp(1.65rem,8vw,2.25rem)}
  .player-copy .eyebrow{font-size:.62rem}
  .player-copy>p:last-child{font-size:.82rem}
  .controls{gap:.65rem;margin-top:1.35rem}
  .play{flex-basis:3rem;width:3rem;height:3rem}
  .mute{flex:0 0 2.5rem}
  .audio-status{margin:.85rem 0 0;font-size:.72rem}
}