:root { --ink:#11140f; --ink-raised:#1a1d17; --paper:#f3eee3; --mist:#c5c1b8; --faint:#918f86; --line:rgba(243,238,227,.2); --serif: Georgia, "Times New Roman", serif; --sans: "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--paper); background:radial-gradient(circle at 80% 8%, #303326 0, transparent 27rem), radial-gradient(circle at 8% 35%, #252019 0, transparent 34rem), var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
button, a { font:inherit; }
.site-header { position:absolute; inset:0 0 auto; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:1.5rem clamp(1.25rem,4vw,4rem); letter-spacing:.08em; text-transform:uppercase; font-size:.66rem; }
.project-name { color:var(--paper); text-decoration:none; font-family:var(--serif); font-size:.9rem; letter-spacing:.04em; text-transform:none; }
.edition { margin:0; color:var(--mist); }
main { overflow:hidden; }
.hero { position:relative; min-height:100svh; display:grid; grid-template-rows:1fr auto auto; align-items:end; padding:clamp(7rem,14vh,10rem) clamp(1.25rem,4vw,4rem) clamp(2rem,4vw,4rem); isolation:isolate; }
.hero-art, .hero-shade { position:absolute; inset:0; z-index:-2; }
.hero-art { background:url("images/白色河流.png") 63% center / cover no-repeat; filter:saturate(.86) contrast(1.04); transform:scale(1.02); }
.hero-shade { z-index:-1; background:linear-gradient(90deg, rgba(11,13,11,.93) 0%, rgba(11,13,11,.58) 46%, rgba(11,13,11,.08) 100%), linear-gradient(0deg, rgba(11,13,11,.8), transparent 58%); }
.hero-copy { align-self:center; max-width:68rem; animation:rise-in 1s cubic-bezier(.22,.61,.36,1) both; }
.eyebrow { margin:0 0 1rem; color:var(--mist); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.045em; }
h1 { max-width:12ch; font-size:clamp(2.8rem,6.4vw,6.7rem); line-height:.95; text-wrap:balance; }
h2 { max-width:12ch; font-size:clamp(2.25rem,4.2vw,4.5rem); line-height:1; }
.hero-caption { display:flex; gap:clamp(1rem,4vw,4rem); margin:1.35rem 0 0; color:var(--paper); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.hero-caption div { display:grid; gap:.3rem; } .hero-caption dt { color:var(--mist); } .hero-caption dd { margin:0; }
.player-button { --progress:0%; display:inline-grid; grid-template-columns:auto auto minmax(4rem,1fr); align-items:center; gap:.75rem; width:min(25rem,100%); margin-top:2rem; padding:.85rem 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--paper); background:transparent; text-align:left; cursor:pointer; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; transition:color .2s ease, border-color .2s ease; }
.player-button:hover, .player-button:focus-visible { color:#fff; border-color:var(--paper); outline:0; }
.player-symbol { width:0; height:0; border-block:.34rem solid transparent; border-left:.52rem solid currentColor; }
.player-button[aria-pressed="true"] .player-symbol { width:.58rem; height:.7rem; border:0; border-left:.18rem solid currentColor; border-right:.18rem solid currentColor; }
.player-line { height:1px; background:rgba(243,238,227,.3); overflow:hidden; }.player-line span { display:block; width:var(--progress); height:100%; background:currentColor; }
.featured, .archive { padding:clamp(5rem,12vw,12rem) clamp(1.25rem,8vw,10rem); }.featured { background:var(--paper); color:var(--ink); }.section-intro { display:flex; justify-content:space-between; gap:2rem; align-items:start; margin-bottom:clamp(3rem,7vw,7rem); }.section-intro .eyebrow { color:#66655f; max-width:13ch; }.featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,3rem); align-items:start; }.featured-work--offset { margin-top:clamp(0rem,8vw,8rem); }.featured-work img,.song-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }.work-info { padding-top:1rem; }.work-info p,.song-card p { margin:0; font-family:var(--serif); font-size:clamp(1.2rem,1.75vw,1.9rem); letter-spacing:-.03em; }.work-info span,.song-card span { display:block; margin-top:.25rem; color:#67665f; font-size:.68rem; letter-spacing:.08em; }.featured .player-button { color:var(--ink); border-color:#b8b5ad; }.featured .player-button:hover,.featured .player-button:focus-visible { color:#000; border-color:var(--ink); }
.archive { background:linear-gradient(180deg, #1c2019, var(--ink) 62%); }.archive-intro .eyebrow { color:var(--mist); }.song-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2.8rem,6vw,7rem) clamp(1.2rem,3.2vw,3.5rem); }.song-card { position:relative; min-width:0; }.song-card img { transition:filter .35s ease, transform .35s ease; }.song-card:hover img { filter:brightness(1.1); transform:scale(1.015); }.song-card .player-button { width:100%; margin-top:.75rem; grid-template-columns:auto 1fr; }.song-card .player-line { display:none; }.song-card .player-button[aria-pressed="true"] .player-line { display:block; grid-column:1 / -1; }.closing { display:grid; grid-template-columns:minmax(0,32rem) auto; justify-content:space-between; gap:3rem; padding:clamp(5rem,10vw,10rem) clamp(1.25rem,8vw,10rem) 3rem; color:var(--mist); font-size:.74rem; letter-spacing:.06em; }.closing p { margin:0; }.closing a { color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line); align-self:start; }.closing a:hover { border-color:var(--paper); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@keyframes rise-in { from { opacity:0; transform:translateY(1.25rem); } to { opacity:1; transform:none; } }
@media (max-width:700px) { .edition { display:none; }.hero { align-items:stretch; padding-top:7.75rem; padding-bottom:2.5rem; }.hero-copy { align-self:center; }.hero-play { align-self:end; margin-top:1.5rem; }.hero-caption { flex-direction:column; gap:1rem; }.section-intro { display:block; }.section-intro .eyebrow { margin-bottom:2rem; }.featured-grid,.song-grid { grid-template-columns:repeat(2,1fr); }.featured-work--offset { margin-top:2rem; }.featured-work:last-child { grid-column:1 / -1; width:calc(50% - .6rem); }.closing { grid-template-columns:1fr; gap:2rem; } }
@media (max-width:440px) { h1 { font-size:clamp(2.65rem,14vw,4.1rem); }.featured,.archive { padding-inline:1.25rem; }.featured-grid,.song-grid { gap:2.5rem 1rem; }.work-info p,.song-card p { font-size:1.15rem; }.hero-art { background-position:68% center; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.hero-copy { animation:none; }.song-card img { transition:none; } }

/* Featured works are records; the archive below remains a quieter cover index. */
.disc-player > img { border-radius:50%; border:clamp(8px,1vw,14px) solid #25251f; box-shadow:0 0 0 1px #8a877d, 0 0 0 clamp(13px,1.5vw,20px) #e5dfd2, 0 0 0 calc(clamp(13px,1.5vw,20px) + 1px) #9e9b91; }
.disc-player:has(.player-button[aria-pressed="true"]) > img { animation:disc-spin 5.5s linear infinite; }
.disc-player .work-info { padding-top:1.8rem; }
.song-grid { grid-template-columns:repeat(4,1fr); gap:clamp(2.8rem,5vw,6rem) clamp(1rem,2.2vw,2.5rem); }
@keyframes disc-spin { to { transform:rotate(360deg); } }
@media (max-width:700px) { .song-grid { grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion:reduce) { .disc-player:has(.player-button[aria-pressed="true"]) > img { animation:none; } }

/* The three selected works are a level shelf of playable records. */
.featured-grid { align-items:start; }
.featured-work--offset { margin-top:0; }
.disc-button { position:relative; display:block; width:100%; margin:0; padding:clamp(1.25rem,2vw,2.2rem); border:0; color:var(--ink); background:transparent; cursor:pointer; }
.disc-button > img { width:100%; margin:0; border-radius:50%; border:clamp(8px,1vw,14px) solid #25251f; box-shadow:0 0 0 1px #8a877d, 0 0 0 clamp(13px,1.5vw,20px) #e5dfd2, 0 0 0 calc(clamp(13px,1.5vw,20px) + 1px) #9e9b91; }
.disc-button:focus-visible { outline:0; }
.disc-button:focus-visible > img { box-shadow:0 0 0 1px #8a877d, 0 0 0 clamp(13px,1.5vw,20px) #e5dfd2, 0 0 0 calc(clamp(13px,1.5vw,20px) + 1px) #9e9b91, 0 0 0 calc(clamp(13px,1.5vw,20px) + 5px) #b38a4b; }
.disc-center { position:absolute; inset:50% auto auto 50%; display:grid; place-items:center; gap:.3rem; width:clamp(3.6rem,6vw,5.4rem); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; color:#eee7d8; background:#171813; box-shadow:0 0 0 2px rgba(239,232,219,.35); font-size:.58rem; letter-spacing:.12em; }
.disc-center .player-symbol { border-left-color:currentColor; }
.disc-button[aria-pressed="true"] .disc-center { color:#f5e2b7; background:#8b6538; }
.disc-button[aria-pressed="true"] > img { animation:disc-spin 5.5s linear infinite; }
.disc-player > img, .disc-player:has(.player-button[aria-pressed="true"]) > img { animation:none; }
.disc-player .work-info { padding-top:1rem; }
.song-card .player-button { display:grid; place-items:center; width:2.35rem; height:2.35rem; margin-top:.7rem; padding:0; border:1px solid rgba(243,238,227,.42); border-radius:50%; color:var(--paper); }
.song-card .player-button:hover, .song-card .player-button:focus-visible { color:#f5e2b7; border-color:#b38a4b; }
.song-card .player-line, .song-card .player-button[aria-pressed="true"] .player-line { display:none; }
.song-card .player-button .player-symbol { border-left-color:currentColor; }
.atmosphere { position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; opacity:.52; }
@media (max-width:700px) { .featured-work--offset { margin-top:0; }.disc-button { padding:1rem; }.featured-work:last-child { width:auto; } }
@media (prefers-reduced-motion:reduce) { .atmosphere { display:none; }.disc-button[aria-pressed="true"] > img { animation:none; } }

/* The play mark stays small; playing reveals the physical cue instead. */
.disc-center { display:grid; place-items:center; width:2.45rem; color:#ede6d9; background:transparent; box-shadow:none; }
.disc-center .player-symbol { width:0; height:0; border-block:.48rem solid transparent; border-left:.72rem solid currentColor; }
.disc-button[aria-pressed="true"] .disc-center { opacity:0; background:transparent; }
.tonearm { position:absolute; top:12%; right:6%; width:39%; height:2px; opacity:0; background:#b38a4b; transform:rotate(-31deg) scaleX(.25); transform-origin:right center; transition:opacity .18s ease, transform .65s cubic-bezier(.22,.61,.36,1); }
.tonearm::before { content:""; position:absolute; left:-.5rem; top:50%; width:.82rem; aspect-ratio:1; border-radius:50%; background:#d7b675; transform:translateY(-50%); box-shadow:0 0 0 2px rgba(28,24,17,.58); }
.disc-button[aria-pressed="true"] .tonearm { opacity:1; transform:rotate(-31deg) scaleX(1); }
.song-card .player-button { position:absolute; top:.55rem; right:.55rem; width:2.2rem; height:2.2rem; margin:0; border:0; border-radius:0; color:#f3eee3; background:transparent; filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.song-card .player-button:hover, .song-card .player-button:focus-visible { color:#d7b675; border:0; outline:1px solid #d7b675; outline-offset:2px; }

/* Brand hierarchy and bilingual hero copy. */
.project-name .brand-zh-sub { display:block; margin-top:.12rem; color:var(--mist); font-family:var(--serif); font-size:.66rem; letter-spacing:.12em; }
.project-name .brand-en { display:block; margin-top:.22rem; color:var(--mist); font-family:var(--sans); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; }
.statement-en { display:block; max-width:23ch; margin-top:.5em; font-family:var(--sans); font-size:.22em; font-weight:400; line-height:1.25; letter-spacing:.03em; }
.hero-hook { max-width:38rem; margin:1.5rem 0 0; color:var(--paper); font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.75rem); line-height:1.25; }.hero-hook span { display:block; }.hero-hook span:last-child { margin-top:.45rem; color:var(--mist); font-family:var(--sans); font-size:.62em; letter-spacing:.03em; }
.closing { grid-template-columns:minmax(0,20rem) minmax(0,32rem) auto; }.closing-brand { color:var(--paper); font-family:var(--serif); font-size:1.15rem; letter-spacing:0; }.closing-brand p + p { margin-top:.35rem; color:var(--mist); font-family:var(--sans); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:700px) { .closing { grid-template-columns:1fr; } }

/* International reading path: English leads section entry, Chinese signs it. */
.section-intro { display:block; max-width:48rem; margin-left:auto; margin-right:auto; }
.section-intro h2 { max-width:17ch; font-size:clamp(2.6rem,4.6vw,5.2rem); line-height:.96; }
.section-copy-zh { max-width:25ch; margin:1.25rem 0 0; color:#6e6b63; font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.35rem); line-height:1.4; }
.archive .section-intro h2 { max-width:22ch; }
.work-info span, .song-card span { color:inherit; font-size:clamp(.78rem,1vw,.95rem); font-weight:500; letter-spacing:.04em; }
.song-card span { color:var(--mist); }
@media (max-width:700px) { .section-intro { margin-left:0; }.section-intro h2 { font-size:clamp(2.35rem,10vw,3.7rem); }.section-copy-zh { margin-top:1rem; } }

/* Archive controls are listening seals: circular, quiet, and never a square UI layer. */
.song-card .player-button { display:grid; place-items:center; width:2.5rem; height:2.5rem; margin:0; padding:0; border:1px solid rgba(243,238,227,.44); border-radius:50%; color:#f3eee3; background:rgba(17,20,15,.24); box-shadow:0 1px 8px rgba(0,0,0,.32), inset 0 0 0 1px rgba(243,238,227,.08); backdrop-filter:blur(3px); transition:color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.song-card .player-button::before { content:""; position:absolute; inset:-.32rem; border:1px solid rgba(215,182,117,0); border-radius:50%; transform:scale(.72); transition:opacity .25s ease, transform .65s cubic-bezier(.22,.61,.36,1), border-color .25s ease; opacity:0; }
.song-card .player-button:hover, .song-card .player-button:focus-visible { color:#f5dfb2; border-color:#d7b675; outline:0; box-shadow:0 0 0 .2rem rgba(215,182,117,.13), 0 1px 10px rgba(0,0,0,.45); }
.song-card .player-button[aria-pressed="true"] { border-radius:50%; color:#f5dfb2; border-color:rgba(215,182,117,.88); background:rgba(19,21,17,.72); box-shadow:0 0 0 .18rem rgba(215,182,117,.12), 0 0 1.2rem rgba(215,182,117,.18); animation:listening-breath 2.5s ease-in-out infinite; }
.song-card .player-button[aria-pressed="true"]::before { border-color:rgba(215,182,117,.56); transform:scale(1.12); opacity:1; }
.song-card .player-button[aria-pressed="true"] .player-symbol { width:.5rem; height:.7rem; border:0; border-left:.15rem solid currentColor; border-right:.15rem solid currentColor; }
@keyframes listening-breath { 0%,100% { box-shadow:0 0 0 .18rem rgba(215,182,117,.09), 0 0 .8rem rgba(215,182,117,.12); } 50% { box-shadow:0 0 0 .4rem rgba(215,182,117,.04), 0 0 1.45rem rgba(215,182,117,.24); } }

/* A low, moving film grain gives the archive the feeling of a darkroom rather than a static black panel. */
.archive { position:relative; isolation:isolate; overflow:hidden; }
.archive::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.28; mix-blend-mode:screen; background-image:radial-gradient(circle at 20% 30%, rgba(239,219,176,.34) 0 .45px, transparent .8px), radial-gradient(circle at 80% 70%, rgba(243,238,227,.22) 0 .4px, transparent .8px), radial-gradient(circle at 45% 55%, rgba(215,182,117,.18) 0 .55px, transparent 1px); background-size:5px 5px, 7px 7px, 11px 11px; animation:film-grain .72s steps(2,end) infinite; }
@keyframes film-grain { 0% { transform:translate3d(-1%, 1%, 0); } 25% { transform:translate3d(1%, -1%, 0); } 50% { transform:translate3d(1.5%, 1%, 0); } 75% { transform:translate3d(-1.5%, -1%, 0); } 100% { transform:translate3d(-1%, 1%, 0); } }
@media (prefers-reduced-motion:reduce) { .song-card .player-button[aria-pressed="true"], .archive::before { animation:none; } }

/* Archive cover controls are bare white glyphs: no circle, badge, or added copy. */
.song-card .player-button { width:2.35rem; height:2.35rem; border:0; border-radius:0; color:#f3eee3; background:transparent; box-shadow:none; backdrop-filter:none; }
.song-card .player-button::before { display:none; }
.song-card .player-button:hover, .song-card .player-button:focus-visible { color:#fff; border:0; outline:1px solid rgba(243,238,227,.72); outline-offset:2px; box-shadow:none; }
.song-card .player-button[aria-pressed="true"] { border-radius:0; color:#f3eee3; border:0; background:transparent; box-shadow:none; animation:none; }
.song-card .player-button[aria-pressed="true"] .player-symbol { width:.54rem; height:.68rem; border:0; border-left:.14rem solid currentColor; border-right:.14rem solid currentColor; }

/* New bilingual title: English carries the first read; Chinese remains the project signature. */
h1 > span[lang="zh"] { display:block; max-width:14ch; font-size:.44em; line-height:1.08; letter-spacing:-.06em; }
.statement-en { max-width:18ch; margin-top:.28em; font-family:var(--serif); font-size:.83em; font-weight:400; line-height:.91; letter-spacing:-.035em; }
.hero-hook { margin-top:1.7rem; }
.hero-hook span:first-child { font-size:.82em; line-height:1.32; }
.hero-hook span:last-child { margin-top:.72rem; color:var(--paper); font-size:.78em; font-weight:500; line-height:1.18; letter-spacing:.025em; }
.hero-caption { margin-top:clamp(2.4rem,6vh,4.25rem); text-transform:none; }
.hero-caption dt { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.hero-caption dd { color:var(--paper); font-family:var(--serif); font-size:clamp(.85rem,1.15vw,1rem); line-height:1.45; letter-spacing:.04em; }
@media (max-width:700px) { h1 > span[lang="zh"] { font-size:.48em; }.statement-en { font-size:.68em; }.hero-hook span:first-child { font-size:.86em; }.hero-hook span:last-child { font-size:.72em; } }

/* A song title and its artwork source have different jobs: let both be readable without competing. */
.work-info .translation, .song-card > div .translation { display:block; margin-top:.3rem; color:inherit; font-family:var(--sans); font-size:clamp(.82rem,1vw,.98rem); font-weight:500; letter-spacing:.035em; }
.work-info .source, .song-card > div .source { display:block; margin-top:.28rem; color:#77746c; font-size:clamp(.62rem,.78vw,.74rem); font-weight:400; letter-spacing:.045em; line-height:1.35; }
.archive .song-card > div .translation { color:var(--paper); }
.archive .song-card > div .source { color:var(--mist); }

/* The cover is the control itself: touch anywhere on the artwork to toggle playback. */
.song-card .player-button { inset:0; display:block; width:100%; height:auto; aspect-ratio:1; border:0; outline:0; background:transparent; }
.song-card .player-button .player-symbol { display:none; }
.song-card .player-button:hover, .song-card .player-button:focus-visible, .song-card .player-button[aria-pressed="true"] { border:0; outline:0; background:transparent; box-shadow:none; color:inherit; }