@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root { --night:#071115; --deep:#0b1c22; --blue:#206878; --teal:#8ed2cf; --rose:#ef789d; --violet:#9184d4; --paper:#edf3f1; --muted:#a8b9b8; --line:rgba(142,210,207,.24); --display:'Playfair Display', Georgia, serif; --body:'Manrope', Arial, sans-serif; --mono:'DM Mono', Consolas, monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--night); } body { margin:0; overflow-x:hidden; background:var(--night); color:var(--paper); font-family:var(--body); } img { display:block; max-width:100%; } a { color:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button:focus-visible,a:focus-visible { outline:2px solid var(--rose); outline-offset:5px; } body::selection { background:var(--rose); color:var(--night); }
.stage-light { position:fixed; inset:0; z-index:-3; background:radial-gradient(ellipse at 72% 18%,rgba(82,178,191,.27),transparent 34%),radial-gradient(ellipse at 18% 50%,rgba(171,47,104,.2),transparent 40%),linear-gradient(135deg,#071115,#0a1e25 58%,#130d1d); } .film-grain { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.025; background-image:linear-gradient(115deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:5px 5px; }
.site-header { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:0 clamp(18px,5vw,76px); background:linear-gradient(180deg,rgba(7,17,21,.96),rgba(7,17,21,.6),transparent); } .return-link,.haven-nav a,.eyebrow,figcaption,footer,.profile-list dt,.profile-card small,.scene-grid span,.gallery-card span,.gallery-card small,.media-card span,.media-card small,.edit-note { font-family:var(--mono); text-transform:uppercase; letter-spacing:.13em; } .return-link,footer a { color:var(--teal); text-decoration:none; font-size:.68rem; } .haven-nav { display:flex; gap:clamp(14px,2.5vw,34px); } .haven-nav a { color:var(--muted); text-decoration:none; font-size:.62rem; transition:color .25s ease; }.haven-nav a:hover { color:var(--rose); }.nav-toggle { display:none; padding:10px; border:0; background:none; color:var(--paper); }.nav-toggle span:not(.sr-only) { display:block; width:25px; height:1px; margin:5px 0; background:currentColor; }.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.haven-section { position:relative; padding:clamp(92px,12vw,180px) clamp(20px,9vw,150px); }.hero { min-height:100svh; display:grid; grid-template-columns:minmax(0,.85fr) minmax(300px,1fr); align-items:center; gap:clamp(28px,8vw,140px); padding-top:120px; overflow:hidden; }.hero-copy { z-index:2; max-width:650px; }.eyebrow { margin:0 0 22px; color:var(--teal); font-size:clamp(.6rem,1vw,.74rem); }.hero h1,h2,h3,p { margin-top:0; }.hero h1 { margin:0; font-family:var(--display); font-size:clamp(5rem,15vw,13rem); font-weight:600; letter-spacing:-.06em; line-height:.8; text-shadow:8px 12px 0 rgba(145,132,212,.13); }.hero-name { margin:36px 0 8px; color:var(--rose); font:600 clamp(.85rem,1.6vw,1.1rem) var(--mono); letter-spacing:.3em; }.hero-role { margin-bottom:42px; color:var(--muted); font: .72rem var(--mono); letter-spacing:.22em; }.hero-cta { display:inline-flex; align-items:center; gap:18px; padding:15px 20px; border:1px solid var(--line); color:var(--paper); font: .66rem var(--mono); letter-spacing:.14em; text-decoration:none; transition:background .25s ease,border-color .25s ease,transform .25s ease; }.hero-cta:hover { background:rgba(239,120,157,.14); border-color:var(--rose); transform:translateX(5px); }.hero-art { position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:620px; margin:0; }.hero-art img { position:relative; z-index:1; width:min(100%,600px); max-height:80vh; object-fit:contain; filter:drop-shadow(24px 32px 48px rgba(0,0,0,.7)) saturate(.9); }.spotlight { position:absolute; width:62%; aspect-ratio:1; border-radius:50%; background:rgba(64,173,189,.25); filter:blur(55px); }.frame-line { position:absolute; width:72%; aspect-ratio:4/5; border:1px solid rgba(239,120,157,.25); transform:rotate(4deg); }.hero-art figcaption { position:absolute; right:0; bottom:10%; color:var(--muted); font-size:.56rem; }.scene-counter { position:absolute; right:clamp(20px,4vw,60px); bottom:7%; color:var(--teal); font: .58rem/1.8 var(--mono); letter-spacing:.15em; text-align:center; }.scene-counter strong { color:var(--rose); font:600 2.3rem var(--display); }.scene-counter span { color:var(--muted); }
.dark-band { background:linear-gradient(120deg,rgba(8,29,36,.86),rgba(28,13,32,.72)); border-top:1px solid rgba(142,210,207,.12); border-bottom:1px solid rgba(142,210,207,.12); }.heading-block { max-width:830px; margin-bottom:62px; } h2 { max-width:900px; color:var(--paper); font:600 clamp(3rem,7vw,7.5rem) var(--display); letter-spacing:-.05em; line-height:.9; }.section-lead { max-width:560px; color:var(--muted); font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.5; }.profile-grid { display:grid; grid-template-columns:minmax(180px,.5fr) 1fr; gap:clamp(30px,8vw,130px); max-width:1100px; }.profile-card { display:flex; align-items:center; justify-content:center; aspect-ratio:1; width:min(100%,270px); max-width:270px; border:1px solid var(--line); border-radius:50%; background:rgba(30,103,120,.09); box-shadow:0 0 80px rgba(64,173,189,.12); overflow:hidden; }.profile-photo { width:100%; height:100%; border-radius:50%; overflow:hidden; background:rgba(30,103,120,.12); }.profile-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.profile-list { margin:0; border-top:1px solid var(--line); }.profile-list div { display:grid; grid-template-columns:180px 1fr; gap:22px; padding:21px 0; border-bottom:1px solid var(--line); }.profile-list dt { color:var(--teal); font-size:.65rem; }.profile-list dd { margin:0; color:var(--paper); font-size:1.25rem; }
.scenes { background:radial-gradient(circle at 75% 25%,rgba(145,132,212,.12),transparent 30%); }.scene-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1150px; background:var(--line); }.scene-grid article { min-height:260px; padding:28px; background:rgba(7,17,21,.72); }.scene-grid span { color:var(--rose); font-size:.62rem; }.scene-grid h3 { margin:48px 0 12px; color:var(--paper); font:600 1.55rem var(--display); }.scene-grid p { margin:0; color:var(--muted); line-height:1.5; }
.split-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }.gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:1120px; }.gallery-card { display:flex; flex-direction:column; align-items:flex-start; padding:0 0 20px; border:0; background:none; color:var(--paper); text-align:left; cursor:pointer; }.gallery-card img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:18px; filter:saturate(.75) contrast(1.05); transition:filter .3s ease,transform .3s ease; }.gallery-card:hover img { filter:saturate(1.15); transform:scale(.985); }.gallery-card span { margin-bottom:8px; color:var(--teal); font-size:.6rem; }.gallery-card strong { font:600 1.4rem var(--display); }.gallery-card small { margin-top:8px; color:var(--muted); font-size:.57rem; }.featured { grid-row:span 2; }.featured img { aspect-ratio:3/4; }.notes { background:linear-gradient(135deg,rgba(30,103,120,.12),transparent 50%); }.note-layout { display:grid; grid-template-columns:120px 1fr; gap:30px; max-width:980px; }.quote-line { color:var(--rose); font:8rem/ .5 var(--display); }.large-copy { max-width:800px; color:var(--paper); font-size:clamp(1.7rem,3.2vw,3.2rem); line-height:1.18; }.edit-note { color:var(--teal); font-size:.62rem; line-height:1.7; }.media-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:1100px; }.media-card { display:flex; flex-direction:column; gap:14px; min-height:200px; padding:18px; border:1px solid var(--line); background:rgba(7,17,21,.72); text-decoration:none; overflow:hidden; }.media-card span { color:var(--teal); font-size:.6rem; }.media-card strong { color:var(--paper); font:600 1.55rem var(--display); }.media-card iframe { width:100%; min-height:240px; border:0; border-radius:12px; background:#000; }.media-card small { color:var(--muted); font-size:.58rem; }
.lightbox { width:min(900px,calc(100% - 32px)); padding:18px; border:1px solid var(--line); background:var(--deep); color:var(--paper); }.lightbox::backdrop { background:rgba(0,0,0,.8); }.lightbox img { width:100%; max-height:75vh; object-fit:contain; }.lightbox p { margin:12px 0 0; color:var(--teal); font:.68rem var(--mono); }.lightbox-close { position:absolute; top:8px; right:10px; border:0; background:none; color:var(--paper); font-size:2rem; cursor:pointer; } footer { display:flex; justify-content:space-between; gap:20px; padding:24px clamp(20px,9vw,150px); color:var(--muted); font-size:.56rem; }
.haven-section,.scene-grid article,.gallery-card,.media-card { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.is-visible { opacity:1; transform:none; }
@media (max-width:800px) { .site-header { min-height:62px; }.nav-toggle { display:block; }.haven-nav { position:absolute; top:62px; left:12px; right:12px; display:none; flex-direction:column; gap:0; padding:8px; background:rgba(7,17,21,.98); border:1px solid var(--line); }.haven-nav.is-open { display:flex; }.haven-nav a { padding:15px 12px; }.hero { display:flex; flex-direction:column; align-items:stretch; min-height:auto; padding-top:122px; }.hero-copy { order:1; }.hero-art { order:2; min-height:54vh; }.hero-art img { max-height:54vh; }.scene-counter { right:18px; bottom:3%; }.profile-grid,.note-layout { grid-template-columns:1fr; }.profile-card { max-width:185px; margin:0 auto; }.profile-list div { grid-template-columns:1fr; gap:7px; }.split-heading { display:block; }.scene-grid,.media-grid { grid-template-columns:1fr; }.gallery-grid { grid-template-columns:1fr 1fr; }.featured { grid-column:span 2; grid-row:auto; }.featured img { aspect-ratio:4/3; } footer { flex-direction:column; } }
@media (max-width:430px) { .haven-section { padding:84px 18px; }.hero { padding-top:110px; }.return-link { max-width:190px; font-size:.55rem; }.hero-art { min-height:390px; }.hero-art img { max-height:390px; }.gallery-grid { grid-template-columns:1fr; }.featured { grid-column:auto; }.gallery-card img,.featured img { aspect-ratio:4/3; } h2 { font-size:clamp(3rem,15vw,4.5rem); }.large-copy { font-size:1.8rem; } }
@media (max-width:560px) { .hero h1 { font-size:clamp(3.2rem,23vw,6rem); } .hero-name { letter-spacing:.18em; font-size:.75rem; } .hero-role { letter-spacing:.12em; font-size:.62rem; } .hero-cta { width:100%; justify-content:center; } .soundtrack-panel { padding:20px 18px; } .track-selector { gap:6px; } .track-button,.play-button { min-width:38px; padding:10px 9px; } .site-header { padding:0 14px; } .return-link { max-width:170px; } }
@media (max-width:420px) { .haven-section { padding:84px 14px; } .hero { padding-top:108px; } .hero-copy { max-width:100%; } .hero-name { letter-spacing:.14em; margin-top:24px; } .hero-role { margin-bottom:26px; } .scene-counter { position:static; margin-top:18px; text-align:center; } .profile-list div { gap:6px; } .scene-entry summary strong { font-size:1.4rem; } .gallery-card strong { font-size:1.15rem; } .media-card strong { font-size:1.3rem; } .soundtrack h2 { font-size:clamp(2.3rem,13vw,4rem); } .soundtrack-cover--reel { width:150px; } }
@media (max-width:360px) { .site-header { min-height:58px; } .return-link { max-width:150px; font-size:.48rem; } .hero h1 { font-size:clamp(2.8rem,21vw,4.5rem); } .hero-name { letter-spacing:.12em; } .hero-role { letter-spacing:.1em; } .hero-cta { font-size:.58rem; gap:10px; } .scene-entry summary { grid-template-columns:36px 1fr; } .track-button,.play-button { min-width:34px; padding:9px 8px; } .soundtrack-panel { padding:18px 14px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }.haven-section,.scene-grid article,.gallery-card,.media-card { opacity:1; transform:none; } }

/* Akane archive systems */
:root { --rose:#86cdd1; --violet:#697ca9; --line:rgba(134,205,209,.25); }
.stage-light { background:radial-gradient(ellipse at 72% 18%,rgba(82,178,191,.3),transparent 34%),radial-gradient(ellipse at 18% 50%,rgba(47,91,126,.2),transparent 40%),linear-gradient(135deg,#071115,#0a1e25 58%,#0b1522); }
.scene-timeline { max-width:1150px; border-top:1px solid var(--line); }
.scene-entry { border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(7,17,21,.52),rgba(7,17,21,.18)); transition:background .25s ease,transform .25s ease; }
.scene-entry:hover { background:linear-gradient(180deg,rgba(7,17,21,.7),rgba(13,25,30,.38)); }
.scene-entry summary { display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:22px; padding:26px 28px; cursor:pointer; list-style:none; }
.scene-entry summary::-webkit-details-marker { display:none; }
.scene-entry summary span { color:var(--teal); font: .65rem var(--mono); letter-spacing:.13em; }
.scene-entry summary strong { color:var(--paper); font:600 clamp(1.5rem,3vw,2.6rem) var(--display); }
.scene-entry summary em { color:var(--muted); font:normal .58rem var(--mono); letter-spacing:.13em; }
.scene-entry summary em::after { content:' +'; color:var(--teal); font-size:1rem; }
.scene-entry[open] summary em::after { content:' -'; }
.scene-detail { display:grid; grid-template-columns:240px minmax(0,620px); align-items:center; gap:30px; padding:0 28px 30px 120px; animation:reveal .45s ease both; }
.scene-copy { display:grid; gap:14px; }
.scene-tag { color:var(--teal); font: .58rem var(--mono); letter-spacing:.18em; text-transform:uppercase; }
.scene-detail p { max-width:540px; margin:0; color:var(--muted); line-height:1.6; font-size:1.02rem; }
.scene-art { position:relative; display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden; border:1px solid rgba(142,210,207,.38); border-radius:14px; background:linear-gradient(135deg,rgba(32,104,120,.75),rgba(7,17,21,.18)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 22px 32px rgba(0,0,0,.18); }
.scene-art::before { content:''; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.scene-art::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 40%,rgba(255,255,255,.04)); }
.scene-art-label { position:relative; z-index:1; color:rgba(237,243,241,.82); font:600 clamp(1.8rem,3vw,2.6rem) var(--display); letter-spacing:-.06em; }
.scene-art-two { background:linear-gradient(135deg,rgba(30,81,107,.78),rgba(105,124,169,.3)); }
.scene-art-three { background:linear-gradient(135deg,rgba(24,103,119,.8),rgba(134,205,209,.16)); }
@media (max-width:800px) { .scene-entry summary { grid-template-columns:42px 1fr; gap:12px; padding:21px 16px; }.scene-entry summary em { grid-column:2; }.scene-detail { grid-template-columns:1fr; padding:0 16px 24px 16px; }.scene-copy { gap:10px; } }
.frames { background:linear-gradient(150deg,rgba(8,28,38,.8),rgba(7,17,21,.25)); }
.favorite-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:26px; max-width:1120px; }
.favorite-frame { display:flex; flex-direction:column; align-items:flex-start; padding:0 0 16px; border:0; background:none; color:var(--paper); text-align:left; cursor:pointer; }
.favorite-frame-main { grid-row:span 2; }
.favorite-frame img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:15px; filter:saturate(.75) contrast(1.08); transition:filter .3s ease,transform .3s ease; }
.favorite-frame-main img { aspect-ratio:4/5; }
.favorite-frame:hover img { filter:saturate(1.05); transform:translateY(-4px); }
.favorite-frame span,.player-label,.player-copy small,.audio-note,.observation-list span { color:var(--teal); font: .58rem var(--mono); letter-spacing:.13em; }
.favorite-frame strong { margin-top:8px; font:600 clamp(1.2rem,2vw,1.7rem) var(--display); }
.observation-list { max-width:800px; border-top:1px solid var(--line); }
.observation-list article { padding:22px 0; border-bottom:1px solid var(--line); }
.observation-list p { max-width:700px; margin:11px 0 0; color:var(--paper); font-size:clamp(1.2rem,2vw,1.7rem); line-height:1.35; }
.soundtrack { padding-top:clamp(80px,10vw,140px); padding-bottom:clamp(80px,10vw,140px); }
.soundtrack-panel { display:grid; grid-template-columns:minmax(0,.8fr) minmax(280px,1fr); gap:clamp(30px,8vw,130px); max-width:1100px; padding:32px; border:1px solid var(--line); background:rgba(8,27,35,.65); }
.soundtrack-heading { min-width:0; max-width:300px; margin-right:8px; }
.soundtrack h2 { margin:0; font-size:clamp(2.8rem,6vw,6rem); line-height:.9; overflow-wrap:anywhere; hyphens:auto; }
.player-copy { display:grid; align-self:end; gap:12px; padding-top:20px; width:100%; max-width:100%; min-width:0; }
.soundtrack-cover { position:relative; display:grid; place-items:center; width:86px; height:86px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,rgba(32,104,120,.85),rgba(7,17,21,.22)); color:var(--paper); overflow:hidden; box-shadow:0 20px 32px rgba(0,0,0,.16); }
.soundtrack-cover::before { content:''; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.soundtrack-cover--song { background:linear-gradient(135deg,rgba(24,103,119,.9),rgba(105,124,169,.42)); }
.soundtrack-cover span { position:relative; z-index:1; display:block; margin-bottom:4px; color:var(--teal); font: .52rem var(--mono); letter-spacing:.18em; text-transform:uppercase; }
.soundtrack-cover strong { position:relative; z-index:1; font:600 1.8rem var(--display); letter-spacing:-.06em; }
.player-copy strong { display:block; color:var(--paper); font:600 clamp(1.8rem,4vw,3.8rem) var(--display); }
.player-copy small { display:block; color:var(--muted); font-size:.58rem; }
.player-controls { display:flex; align-items:center; gap:10px; margin:8px 0 0; }
.track-button,.play-button { min-width:42px; padding:11px 13px; border:1px solid var(--line); background:transparent; color:var(--paper); font: .62rem var(--mono); cursor:pointer; }
.track-button.is-active,.play-button:hover,.play-button.is-playing { border-color:var(--teal); color:var(--teal); background:rgba(134,205,209,.08); }
.progress-track { height:2px; background:rgba(134,205,209,.2); }
.progress-track span { display:block; width:18%; height:100%; background:var(--teal); transition:width .3s ease; }
.soundtrack-embed { margin-top:18px; }
.soundtrack-embed iframe { display:block; width:100%; min-height:120px; border:0; border-radius:12px; background:#000; }
.soundtrack-embed-placeholder { display:grid; place-items:center; min-height:120px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font: .58rem var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.audio-note { margin-top:18px; color:var(--muted); font-size:.5rem; }
.observation-trigger { display:inline-block; color:var(--teal); text-decoration:none; border-bottom:1px solid var(--teal); }
.observation-dialog { width:min(620px,calc(100% - 32px)); padding:42px; border:1px solid var(--line); background:var(--deep); color:var(--paper); }
.observation-dialog::backdrop { background:rgba(0,0,0,.78); }
.observation-dialog h2 { margin:24px 0; font-size:clamp(2.7rem,8vw,5.5rem); }
.observation-dialog > p:last-child { max-width:380px; color:var(--muted); line-height:1.6; }
@keyframes reveal { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media (max-width:800px) { .scene-entry summary { grid-template-columns:42px 1fr; gap:12px; padding:21px 16px; }.scene-entry summary em { grid-column:2; }.scene-detail { grid-template-columns:1fr; padding:0 16px 24px 70px; }.favorite-grid,.soundtrack-panel { grid-template-columns:1fr; }.favorite-frame-main { grid-row:auto; }.favorite-frame-main img { aspect-ratio:4/3; }.soundtrack-panel { padding:24px; } .soundtrack-heading { max-width:none; margin-right:0; } }
@media (max-width:430px) { .scene-detail { padding-left:16px; }.scene-detail p { font-size:.95rem; }.observation-dialog { padding:30px 22px; } .soundtrack h2 { max-width:100%; } }
.gallery-card img,.favorite-frame img { border-radius:14px; overflow:hidden; }
.hero-art img { width:min(100%,560px); max-height:76vh; aspect-ratio:4/5; object-fit:cover; padding:10px; border:1px solid rgba(180,224,226,.72); border-radius:6px; background:linear-gradient(145deg,rgba(237,243,241,.2),rgba(32,104,120,.18)); box-shadow:0 0 0 5px rgba(7,17,21,.76),0 0 0 6px rgba(134,205,209,.25),24px 32px 48px rgba(0,0,0,.7); filter:saturate(.86) contrast(1.05); }

.soundtrack-panel { grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr); align-items:center; }
.soundtrack-heading,.player-copy { min-width:0; }
.soundtrack-cover--reel { position:relative; width:180px; aspect-ratio:1; margin-bottom:24px; overflow:hidden; border:1px solid rgba(120,180,190,.3); background:#071115; }
.soundtrack-cover--reel img { width:100%; height:100%; object-fit:cover; }
.soundtrack-cover-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:14px; background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 45%,rgba(0,0,0,.7)); }
.soundtrack-cover-overlay span { font-size:10px; letter-spacing:3px; }
.soundtrack-cover-overlay strong { font-size:38px; letter-spacing:2px; }
.player-copy { display:flex; flex-direction:column; align-items:flex-start; }
.player-copy > #track-title { max-width:100%; margin-top:4px; font-size:clamp(1.4rem,3vw,2.1rem); letter-spacing:2px; overflow-wrap:anywhere; }
.player-copy > #track-artist { max-width:100%; margin-top:5px; letter-spacing:1px; opacity:.65; overflow-wrap:anywhere; }
.track-selector { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.track-button { min-width:48px; min-height:40px; }
.track-button:hover,.track-button.active,.track-button.is-active { background:rgba(120,180,190,.14); border-color:rgba(120,180,190,.7); }
.play-button { margin-top:14px; }
.progress-track { width:100%; max-width:100%; margin-top:22px; overflow:hidden; }
.soundtrack-embed { width:100%; max-width:100%; }
.soundtrack-embed iframe { max-width:100%; }

@media (max-width:800px) {
	.soundtrack-panel { grid-template-columns:1fr; gap:32px; }
	.soundtrack-heading,.player-copy { width:100%; }
	.soundtrack-cover--reel { width:min(180px,100%); }
}

@media (max-width:430px) {
	.soundtrack-panel { padding:20px; }
	.soundtrack-cover--reel { width:150px; }
	.soundtrack-cover-overlay strong { font-size:32px; }
}

/* Final phone layout pass: keep the narrow-screen overrides in one place. */
@media (max-width:600px) {
	.site-header { padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); }
	.haven-section { padding-left:clamp(14px,5vw,24px); padding-right:clamp(14px,5vw,24px); }
	.hero { padding-top:calc(108px + env(safe-area-inset-top)); }
	.hero-art { min-height:min(500px, 72svh); }
	.hero-art img { max-height:min(500px, 68svh); }
	.hero-art figcaption { right:4px; bottom:2%; max-width:70%; text-align:right; line-height:1.5; }
	.heading-block { margin-bottom:42px; }
	.profile-list dd { overflow-wrap:anywhere; }
	.scene-entry summary { grid-template-columns:38px minmax(0,1fr); gap:10px; padding:20px 14px; }
	.scene-entry summary strong { min-width:0; overflow-wrap:anywhere; }
	.scene-entry summary em { grid-column:2; }
	.scene-detail { padding-right:14px; padding-left:14px; }
	.scene-art { min-width:0; }
	.gallery-grid { gap:18px; }
	.media-card { min-width:0; padding:18px; }
	.soundtrack-panel { gap:26px; padding:22px 18px; }
	.soundtrack-heading { max-width:100%; }
	.soundtrack-cover--reel { margin-bottom:18px; }
	.player-copy > #track-title,
	.player-copy > #track-artist { max-width:100%; overflow-wrap:anywhere; }
	.track-selector { width:100%; }
	.track-button,.play-button { min-height:42px; }
	.soundtrack-embed-placeholder { text-align:center; padding:18px; line-height:1.5; }
	footer { padding-left:clamp(14px,5vw,24px); padding-right:clamp(14px,5vw,24px); padding-bottom:max(24px, env(safe-area-inset-bottom)); }
}

@media (max-width:390px) {
	.site-header { min-height:58px; }
	.haven-nav { top:58px; }
	.return-link { max-width:145px; font-size:.5rem; line-height:1.35; }
	.hero { padding-top:102px; }
	.hero h1 { font-size:clamp(2.75rem,21vw,4.5rem); }
	.hero-name { letter-spacing:.1em; }
	.hero-role { margin-bottom:24px; letter-spacing:.08em; line-height:1.5; }
	.hero-cta { gap:10px; padding:13px 14px; font-size:.58rem; }
	h2 { font-size:clamp(2.7rem,14vw,4rem); }
	.large-copy { font-size:1.6rem; }
	.scene-entry summary { grid-template-columns:32px minmax(0,1fr); padding:18px 10px; }
	.scene-entry summary strong { font-size:1.25rem; }
	.scene-detail { padding-right:10px; padding-left:10px; }
	.soundtrack-panel { padding:18px 14px; }
	.soundtrack h2 { font-size:clamp(2.2rem,13vw,3.5rem); }
	.soundtrack-cover--reel { width:136px; }
	.track-button,.play-button { min-width:36px; padding:9px 8px; }
}

@media (max-width:340px) {
	.haven-section { padding-left:12px; padding-right:12px; }
	.hero h1 { font-size:clamp(2.5rem,20vw,4rem); }
	.hero-art { min-height:350px; }
	.hero-art img { max-height:350px; }
	.soundtrack-panel { padding-left:12px; padding-right:12px; }
}