:root { color-scheme: light; --ink:#25231f; --paper:#f2ede2; --muted:#625c52; --line:#c7bead; --accent:#925028; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans CJK JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; line-height:1.8; }
a { color:inherit; text-underline-offset:5px; }
button { font:inherit; cursor:pointer; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
[hidden] { display:none !important; }
.skip { position:absolute; top:-100px; left:20px; z-index:5; padding:10px; background:white; }
.skip:focus { top:8px; }
.masthead { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 4vw; border-bottom:1px solid var(--line); }
.masthead a { font-family:"Noto Serif CJK JP","Yu Mincho",serif; font-size:21px; letter-spacing:.09em; text-decoration:none; }
.masthead span { font-size:12px; color:var(--muted); }
.room { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:1600px; margin:auto; }
.place { margin:0; position:sticky; top:0; align-self:start; height:calc(100svh - 20px); min-height:650px; max-height:1000px; color:#fff; background:#161819; }
.place img { width:100%; height:100%; object-fit:cover; object-position:52% center; display:block; }
.place::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.53),transparent 43%,rgba(0,0,0,.78)); pointer-events:none; }
.place-title { position:absolute; z-index:1; top:40px; left:40px; display:grid; }
.place-title span { font-size:13px; letter-spacing:.14em; }
.place-title strong { font-family:"Noto Serif CJK JP","Yu Mincho",serif; font-size:68px; line-height:1.65; font-weight:400; letter-spacing:.15em; }
figcaption { position:absolute; z-index:1; left:32px; right:32px; bottom:26px; font-size:11px; line-height:1.8; }
.listening { padding:46px clamp(24px,4vw,66px) 40px; min-width:0; }
.eyebrow { margin:0 0 12px; font-size:12px; letter-spacing:.07em; color:var(--muted); }
h1,h2 { font-family:"Noto Serif CJK JP","Yu Mincho",serif; font-weight:400; }
h1 { font-size:clamp(32px,3.2vw,50px); line-height:1.55; letter-spacing:.045em; margin:14px 0 18px; }
.intro { font-size:15px; margin:0 0 27px; max-width:33em; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choices button { display:flex; gap:12px; align-items:center; text-align:left; padding:16px 13px; border:1px solid var(--line); color:var(--ink); background:transparent; line-height:1.5; min-height:84px; }
.choices button[aria-pressed="true"] { border:2px solid var(--ink); padding:15px 12px; background:var(--ink); color:var(--paper); }
.letter { font-family:Georgia,serif; font-size:27px; }
.choices strong { display:block; font-size:14px; font-weight:500; }
.choices small { display:block; font-size:11px; margin-top:6px; }
.selection { padding:24px 0; border-bottom:1px solid var(--line); }
.selection h2 { font-size:22px; line-height:1.65; margin:8px 0; }
.selection h2 span { display:block; font-size:15px; font-family:inherit; }
#artist { margin:0; font-size:15px; }
.note { font-size:13px; color:var(--muted); margin:8px 0 20px; }
.primary { border:0; width:100%; color:var(--paper); background:var(--ink); padding:16px 20px; min-height:54px; text-align:left; font-size:15px; display:flex; justify-content:space-between; gap:12px; }
.primary:hover { background:#454139; }
.privacy { font-size:11px; line-height:1.8; color:var(--muted); margin:12px 0 18px; }
#player iframe { display:block; width:100%; height:42px; border:0; background:white; }
.quiet { border:0; border-bottom:1px solid var(--ink); background:transparent; color:var(--ink); min-height:44px; padding:8px 0; margin-top:10px; font-size:13px; }
.status { font-size:12px; color:var(--muted); margin:8px 0; }
.status:empty { display:none; }
.external { display:inline-block; min-height:44px; padding:8px 0; font-size:13px; }
.fallback { color:var(--muted); font-size:11px; margin:0; }
.listening-question { font-family:"Noto Serif CJK JP","Yu Mincho",serif; font-size:17px; margin:24px 0; }
details { border-top:1px solid var(--line); font-size:13px; }
summary { cursor:pointer; min-height:58px; padding:16px 0; }
summary span { color:var(--muted); font-size:11px; margin-left:8px; }
details p { margin:16px 0; }
details ul { padding-left:20px; }
details li { padding:8px 0; }
.return { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:48px max(28px,7vw); background:#202a2a; color:var(--paper); }
.return .eyebrow { color:#c6c9c0; }
.return h2 { margin:0 0 10px; font-size:28px; }
.return p { font-size:13px; margin-bottom:0; }
.exit { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:16px 24px; border:1px solid #a2aaa1; text-decoration:none; white-space:nowrap; font-size:14px; }
footer { display:flex; justify-content:space-between; align-items:center; padding:24px max(28px,7vw); gap:20px; font-size:12px; color:var(--muted); }
footer a { padding:10px 0; }
@media(max-width:760px) {
 .masthead { min-height:64px; padding:14px 20px; }
 .masthead a { font-size:17px; letter-spacing:.02em; }
 .masthead span { font-size:10px; }
 .room { grid-template-columns:1fr; }
 .place { position:relative; height:260px; min-height:0; }
 .place img { object-position:center 51%; }
 .place-title { top:18px; left:22px; }
 .place-title strong { font-size:40px; }
 .place-title span { font-size:10px; }
 figcaption { left:22px; right:22px; bottom:12px; font-size:9px; }
 .listening { padding:28px 22px; }
 h1 { font-size:36px; margin:8px 0 14px; line-height:1.5; }
 .eyebrow { font-size:11px; }
 .intro { font-size:14px; margin-bottom:22px; }
 .choices { gap:8px; }
 .choices button { gap:8px; padding:12px 9px; }
 .choices button[aria-pressed="true"] { padding:11px 8px; }
 .choices strong { font-size:12px; }
 .choices small { font-size:10px; }
 .letter { font-size:24px; }
 .return { display:block; padding:32px 22px; }
 .return h2 { font-size:24px; }
 .exit { margin-top:24px; white-space:normal; }
 footer { display:block; padding:22px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }

/* Work-first mobile order; retain the desktop venue beside the controls. */
@media(min-width:761px){.listening{grid-column:2;grid-row:1}.place{grid-column:1;grid-row:1}}
.intro{font-size:16px}.choices small,.privacy,.fallback,.status,.external,.note,details{font-size:14px}
@media(max-width:760px){.choices strong,.choices small,.eyebrow{font-size:14px}.listening{padding:22px}.intro{font-size:16px}}

.masthead{flex-wrap:wrap}
.masthead .choose-work{font-family:inherit;font-size:14px;letter-spacing:0;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
.play-guide{font-size:14px;line-height:1.7;margin:12px 0;color:var(--muted)}