/* Drift Awhile — immersive soundscapes, 2026 visual identity */
:root {
  --bg:#0b151c;
  --bg2:#11212a;
  --ink:#f1eee7;
  --muted:#92a6aa;
  --soft:#c6d1d0;
  --line:rgba(211,230,228,.16);
  --accent:#bbd6cc;
  --serif:'Iowan Old Style','Baskerville','Palatino Linotype',Georgia,serif;
  --sans:'Avenir Next',Avenir,Inter,system-ui,-apple-system,sans-serif;
}
html { scroll-padding-top:30px; }
body { background:#0b151c; background-image:radial-gradient(ellipse 60% 33% at 88% -3%,rgba(104,98,140,.22),transparent 80%),radial-gradient(ellipse 47% 28% at 7% 47%,rgba(78,115,125,.10),transparent 82%),linear-gradient(180deg,#0c1620,#101f28 51%,#111b25 78%,#0c161d); }
body::before { z-index:0; pointer-events:none; height:1100px; background:radial-gradient(ellipse 48% 47% at 86% 18%,rgba(121,111,151,.09),transparent 75%); }
button:focus-visible,a:focus-visible,input:focus-visible { outline-color:#d7e1d0; }
.site-shell { position:relative; max-width:1660px; padding:0 clamp(22px,5vw,90px); }
.site-header { position:relative; z-index:5; height:100px; border-color:rgba(223,236,235,.13); }
.brand { gap:14px; }
.brand-mark { width:44px; height:44px; flex:0 0 44px; display:block; object-fit:contain; transform:none; }
.brand-wordmark { font-family:var(--serif); font-size:28px; font-weight:400; letter-spacing:-1.25px; line-height:1; white-space:nowrap; }
.brand-period { color:#b8d3cb; }
.top-nav { gap:clamp(23px,3vw,49px); }
.top-nav a { color:#b4c3c1; font-size:12px; font-weight:450; }
.nav-cta { font-size:11px; letter-spacing:.3px; color:#e5f0ea; border-color:rgba(180,211,205,.42); background:rgba(173,204,193,.07); padding:13px 18px; }
.nav-cta:hover { background:rgba(173,204,193,.17); }
.nav-cta span { padding-left:15px; }

.intro { min-height:635px; padding:75px 0 86px; display:flex; align-items:center; text-align:left; position:relative; isolation:isolate; overflow:hidden; }
.intro-copy { position:relative; z-index:2; width:min(750px,70%); }
.eyebrow { color:#cfb9b6; font-size:10px; letter-spacing:2.7px; justify-content:flex-start; gap:17px; }
.eyebrow-line { width:34px; background:#9dc1b5; opacity:.8; }
.intro h1 { font-weight:400; font-size:clamp(64px,7.2vw,106px); line-height:1.04; letter-spacing:-5.2px; margin:30px 0 27px; }
.intro h1 em { color:#d2c8d9; font-weight:400; }
.intro p { color:#a8bab9; max-width:540px; margin:0 0 34px; line-height:1.85; font-size:15px; }
.intro-scroll { gap:13px; justify-content:flex-start; color:#dceae5; letter-spacing:1.7px; font-size:10px; }
.scroll-icon { width:39px; height:39px; border-color:rgba(194,223,210,.46); font-size:20px; }
.intro-scroll:hover .scroll-icon { transform:translate(3px,3px); }
.intro-orbit { position:absolute; z-index:1; pointer-events:none; width:min(50vw,660px); height:min(50vw,660px); right:-4%; top:0%; border:1px solid rgba(172,171,199,.14); border-radius:50%; background:radial-gradient(circle at 51% 40%,rgba(151,137,166,.15),rgba(67,80,121,.10) 42%,transparent 74%); box-shadow:0 0 180px rgba(108,107,145,.12),inset 0 0 140px rgba(167,148,174,.04); }
.intro-orbit::before { content:''; position:absolute; inset:6%; border:1px solid rgba(160,205,195,.10); border-radius:50%; }
.intro-orbit::after { content:''; position:absolute; inset:15%; border:1px solid rgba(160,205,195,.08); border-radius:50%; }
.orbit-halo { position:absolute; width:42%; aspect-ratio:1; left:29%; top:17%; border-radius:50%; background:radial-gradient(circle,#eadcc9 0 36%,#d6d0cb 40%,#a7acb9 65%,transparent 69%); opacity:.89; filter:drop-shadow(0 0 80px rgba(195,179,204,.26)); }
.orbit-moon { position:absolute; left:31%; top:19%; width:38%; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#eee3d5 3%,#c9cbd0 71%,#859ba7); box-shadow:0 0 70px rgba(204,184,202,.18); }
.orbit-horizon { position:absolute; z-index:2; width:122%; height:40%; left:-11%; top:54%; background:linear-gradient(180deg,rgba(12,31,43,.95),rgba(10,27,37,.18) 65%,transparent); border-top:1px solid rgba(187,225,220,.3); border-radius:50% 50% 0 0 / 7% 7% 0 0; }
.orbit-reflection { position:absolute; z-index:3; left:19%; top:57%; width:62%; height:36%; background:repeating-linear-gradient(180deg,rgba(205,224,210,.30) 0 1px,transparent 2px 14px); clip-path:polygon(47% 0,53% 0,93% 100%,7% 100%); filter:blur(2px); opacity:.33; }
.intro-aside { position:absolute; right:0; bottom:45px; display:flex; align-items:center; gap:22px; font-size:9px; letter-spacing:1.7px; color:rgba(165,193,188,.54); }
.intro-aside span+span { padding-left:22px; border-left:1px solid rgba(171,202,196,.18); }

.experience { position:relative; z-index:2; }
.world { height:clamp(450px,48vw,660px); background:#203947; border-radius:4px; box-shadow:0 30px 90px rgba(0,0,0,.29); border:1px solid rgba(218,231,224,.13); }
.world::after { background:linear-gradient(180deg,rgba(4,16,22,.29),transparent 34%,transparent 43%,rgba(4,13,20,.66)); }
.world-grain { opacity:.10; }
.world-topline,.world-bottomline { left:clamp(24px,4vw,58px); right:clamp(24px,4vw,58px); }
.world-topline { top:34px; }
.world-label { letter-spacing:2px; color:#f1f4ef; }
.world-pulse { background:#d8e4d5; }
.world-focus { border-radius:2px; border:1px solid rgba(230,235,229,.38); background:rgba(9,24,29,.24); padding:12px 17px; }
.world-focus:hover { background:rgba(9,24,29,.59); }
.world-hint { font-size:9px; letter-spacing:3px; }
.hero-play { width:98px; height:98px; border-color:rgba(244,250,241,.60); background:rgba(238,245,237,.1); box-shadow:0 0 0 16px rgba(233,248,242,.035),0 0 0 32px rgba(233,248,242,.017); }
.world-index { color:#dcebe7; font-size:10px; letter-spacing:2.7px; }
.world-bottomline h2 { font-size:clamp(38px,5vw,71px); letter-spacing:-2px; margin:13px 0 3px; }
.world-bottomline p { color:#d6e0dc; font-size:18px; }
.world-weather { color:#dbe5e0; }
.player-dock { min-height:109px; margin-top:0; background:rgba(17,35,42,.95); border:1px solid rgba(206,227,222,.16); border-top:0; border-radius:0 0 4px 4px; padding:16px 28px; }
.dock-play { background:#c5d7ce; border-radius:50%; }
.dock-play:hover { background:#e2e8dd; }
#dock-play-icon { border-left-color:#1a3237; }
.is-playing #dock-play-icon { background:linear-gradient(to right,#1a3237 0 4px,transparent 4px 9px,#1a3237 9px 13px); }
.mini-label,.section-kicker { color:#94b5af; letter-spacing:2.3px; }
.now-playing strong { font-size:24px; }
.audio-visualizer i { background:#adcfc3; }
.volume-glyph,.volume-value { color:#adbfbd; }
input[type=range] { background:linear-gradient(90deg,#b7d3c7,#4a7779); }
input[type=range]::-webkit-slider-thumb { background:#e7eee6; border-color:#618c86; }
input[type=range]::-moz-range-thumb { background:#e7eee6; border-color:#618c86; }
.tool-button { border-radius:2px; border-color:rgba(206,226,219,.24); color:#d6e4df; }
.dim-button { color:#d9d8d1; border-color:rgba(215,205,198,.27); }
.dim-button .dim-icon { width:17px; height:17px; vertical-align:-3px; margin-right:8px; }
.dim-button:hover { background:rgba(198,182,171,.10); }
.utility-panel { border-radius:4px; background:#152832; border-color:rgba(206,227,222,.16); }
.stillness-setting { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:28px; padding-top:25px; border-top:1px solid rgba(206,227,222,.16); }
.stillness-setting>div { display:flex; flex-direction:column; gap:8px; }
.stillness-setting strong { font-size:13px; font-weight:550; }
.stillness-setting small { color:#98afae; font-size:11px; line-height:1.5; }
.stillness-setting button { flex:0 0 auto; border:1px solid rgba(206,227,222,.30); background:rgba(181,203,198,.04); color:#dbe8e2; padding:12px 17px; border-radius:2px; font-size:11px; }
.stillness-setting button[aria-pressed=true] { background:#c5d7ce; color:#152e35; border-color:#c5d7ce; }
.stillness-setting button:disabled { opacity:.63; cursor:default; }
.sleep-screen { position:fixed; inset:0; z-index:100; min-height:100dvh; background:#030609; color:#b3c2bc; display:grid; place-items:center; text-align:center; padding:25px; }
.sleep-screen[hidden] { display:none; }
.sleep-screen-inner { display:flex; flex-direction:column; align-items:center; gap:19px; }
.sleep-screen-symbol { color:#758b8d; font:400 42px var(--serif); opacity:.68; }
.sleep-screen p { margin:0; color:#a6b4b2; font:400 20px var(--serif); letter-spacing:.1px; }
.sleep-timer-status { color:#718786; font-size:11px; letter-spacing:.45px; font-variant-numeric:tabular-nums; }
.sleep-quick-timers { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:5px; }
.sleep-screen .sleep-quick-timers button { min-width:53px; padding:10px 14px; border:1px solid rgba(185,205,196,.19); background:transparent; color:#829693; border-radius:20px; font-size:11px; }
.sleep-screen .sleep-quick-timers button[aria-pressed=true] { border-color:rgba(197,220,206,.56); background:rgba(181,207,198,.09); color:#c8d8cf; }
.sleep-screen-actions { margin-top:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.sleep-screen button { padding:13px 20px; color:#dee5e0; background:transparent; border:1px solid rgba(195,216,208,.34); border-radius:2px; font-size:12px; }
.sleep-screen #sleep-play-toggle { color:#a6bab3; border-color:rgba(195,216,208,.19); }
.sleep-screen button:hover { background:rgba(204,220,212,.10); }
.sleep-screen button span { margin-left:17px; }
.sleep-screen small { margin-top:26px; color:#6f8181; font-size:9px; letter-spacing:1.9px; line-height:1.9; }
.sleep-screen-inner > * { transition:opacity 2.4s ease; }
.sleep-screen.is-resting .sleep-screen-inner > :not(.sleep-screen-symbol) { opacity:.16; }
.sleep-screen.is-resting .sleep-screen-inner > .sleep-screen-actions { opacity:.52; }
.sleep-screen.is-resting .sleep-screen-symbol { opacity:.16; }
.sleep-screen.is-resting:hover .sleep-screen-inner > *,
.sleep-screen.is-resting:focus-within .sleep-screen-inner > * { opacity:1; transition-duration:.35s; }
body.screen-dimmed { overflow:hidden; }
body.motion-quiet .audio-visualizer i,body.motion-quiet .difference-orbit span { animation:none!important; }
body.motion-quiet *,body.motion-quiet *::before,body.motion-quiet *::after { scroll-behavior:auto!important; transition-duration:0ms!important; }
.panel-heading h3 { font-size:32px; }
.panel-note,.mix-ranges small { color:#98afae; }
.timer-options button { border-radius:2px; border-color:rgba(206,226,219,.24); }
.timer-options button.selected { background:#c5d7ce; border-color:#c5d7ce; color:#142a30; }
.player-caption { color:#879f9d; letter-spacing:1.9px; margin-top:27px; }
.tiny-star { color:#b2ccc0; }

.places { padding:160px 0 180px; }
.section-heading { margin-bottom:46px; }
.section-heading h2,.ritual-left h2 { font-size:clamp(52px,5.9vw,86px); line-height:1.05; letter-spacing:-3px; }
.section-heading h2 em,.ritual-left h2 em { color:#bad3c9; }
.section-heading h2 em { color:#c8c8dc; }
.section-heading p { color:#a3b5b5; max-width:330px; font-size:14px; }
.scene-grid { gap:20px; }
.scene-card { position:relative; }
.scene-card-art { border-radius:3px; height:clamp(260px,29vw,422px); }
.scene-card.selected .scene-card-art { border-color:rgba(199,226,210,.85); box-shadow:0 0 0 4px rgba(187,214,201,.065); }
.scene-card-art-label { top:24px; left:25px; font-size:10px; }
.scene-card-art-label::after { content:' / DRIFT AWHILE'; opacity:.62; font-size:8px; letter-spacing:1.7px; margin-left:8px; }
.art-rain { background:radial-gradient(ellipse at 55% 53%,rgba(225,177,153,.32),transparent 28%),linear-gradient(180deg,#6c687d 0%,#46566b 57%,#1b303e); }
.art-shore { background:linear-gradient(180deg,#2b3655 0%,#6c738f 47%,#c1a7a1 57%,#3a6074 58%,#17374d 100%); }
.art-shore-sun { background:#e2d5bd; box-shadow:0 0 90px 35px rgba(174,206,195,.24); }
.art-forest { background:radial-gradient(ellipse at 52% 39%,#4f7670,transparent 64%),linear-gradient(180deg,#2d4957,#102e33); }
.card-copy { padding:24px 0 0; align-items:flex-start; }
.card-copy strong { font-size:30px; letter-spacing:-.7px; }
.card-copy small { color:#91a9aa; font-size:11px; letter-spacing:.15px; }
.card-arrow { width:39px; height:39px; border-color:#4b7776; color:#bfd7ca; }
.scene-card.selected .card-arrow,.scene-card:hover .card-arrow { background:#c5d7ce; color:#18343b; }

.difference { margin-bottom:170px; grid-template-columns:1fr 1fr; gap:clamp(60px,9vw,148px); }
.difference-art { height:clamp(425px,43vw,610px); border-radius:3px; background:radial-gradient(ellipse at 50% 46%,rgba(165,164,195,.24),transparent 32%),linear-gradient(155deg,#414766,#25394d 58%,#102a3a); }
.difference-art::before { opacity:.25; }
.difference-art::after { background:#0b2732; box-shadow:0 -35px 100px rgba(139,204,197,.08); }
.difference-orbit { width:320px; height:320px; border-color:rgba(196,230,217,.38); box-shadow:0 0 110px rgba(126,174,169,.10),inset 0 0 70px rgba(179,202,176,.07); }
.difference-orbit::before { border-color:rgba(204,236,225,.20); }
.difference-orbit::after { background:#d1ddd3; box-shadow:0 0 95px rgba(189,231,212,.38); }
.difference-orbit span { border-color:rgba(201,230,219,.25); }
.difference-art-label { letter-spacing:2.2px; }
.difference-copy h2 { font-size:clamp(47px,5.1vw,74px); letter-spacing:-2.5px; }
.difference-copy h2 em { color:#bad3c9; }
.difference-copy h2 em { color:#d5bfbb; }
.difference-copy>p { color:#a7baba; }
.difference-steps { border-color:var(--line); }
.difference-steps span { color:#87aaa3; }
.difference-steps strong { color:#eaf0e9; }
.difference-steps small { color:#91a9aa; }

.rituals { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(120deg,rgba(65,58,78,.30),rgba(26,52,63,.23) 58%,rgba(14,34,43,.06)); padding:100px clamp(15px,5vw,78px) 110px; gap:clamp(55px,8vw,130px); }
.ritual-left p { color:#a3b8b7; max-width:360px; }
.ritual-left h2 em { color:#d0c2b8; }
.ritual-ornament span { border-color:#729d9b; }
.ritual-number { color:#91b5ac; }
.ritual-option { border-color:rgba(214,230,226,.17); color:#edf0e9; }
.ritual-option:first-child { border-color:rgba(214,230,226,.17); }
.ritual-copy strong { font-size:30px; }
.ritual-copy small { color:#9db4b2; }
.ritual-arrow { color:#accdc2; }
.ending { padding:160px 0 172px; }
.ending-emblem { display:block; width:180px; height:180px; object-fit:contain; margin:0 auto 16px; opacity:.88; }
.ending-asterisk { color:#b4d0c6; font-size:40px; }
.ending p { font-size:clamp(44px,5.4vw,77px); font-style:normal; letter-spacing:-2.5px; line-height:1.13; color:#e9eee6; }
.ending p em { color:#bad3c9; font-weight:400; }
.ending a { color:#cbdfd4; border-color:#77a59e; letter-spacing:.5px; }
.site-footer { border-color:var(--line); color:#8da5a4; }
.footer-brand { color:#cbdcd2; font:400 25px var(--serif); letter-spacing:-1px; }

body.focused .experience { background:#081319; }
body.focused .difference { display:none; }
body.focused .world { border:0; }
body.focused .player-dock { border:1px solid rgba(224,235,226,.2); border-radius:5px; background:rgba(12,29,37,.72); }
body.focused .utility-panel { background:rgba(16,39,46,.95); }

@media (max-width:1100px) {
  .intro { min-height:575px; }
  .intro h1 { font-size:clamp(65px,8.6vw,100px); }
  .difference { gap:55px; }
}
@media (max-width:850px) {
  .intro { min-height:560px; padding:70px 0; }
  .intro-copy { width:85%; }
  .intro-orbit { width:510px; height:510px; right:-215px; top:15px; opacity:.60; }
  .intro h1 { font-size:clamp(58px,8.4vw,78px); }
  .intro-aside { display:none; }
  .section-heading h2,.ritual-left h2 { font-size:clamp(54px,8vw,76px); }
  .scene-card-art { height:255px; }
  .card-copy strong { font-size:24px; }
  .difference { grid-template-columns:1fr; gap:45px; margin-bottom:110px; }
  .difference-art { height:430px; }
  .rituals { padding:85px 25px; }
}
@media (max-width:600px) {
  .site-shell { padding:0 19px; }
  .site-header { height:82px; }
  .brand { gap:9px; }
  .brand-mark { transform:scale(.82); margin-right:-3px; }
  .brand-wordmark { font-size:24px; letter-spacing:-1.2px; }
  .nav-cta { border-radius:50%; width:39px; height:39px; display:grid; place-items:center; padding:0; }
  .nav-cta span { padding:0; }
  .intro { min-height:590px; padding:68px 0 80px; }
  .intro-copy { width:100%; }
  .intro-orbit { width:420px; height:420px; top:92px; right:-230px; opacity:.34; }
  .intro h1 { font-size:clamp(43px,10.4vw,63px); letter-spacing:-2.9px; line-height:1.08; margin:27px 0 25px; }
  .intro p { font-size:14px; max-width:345px; }
  .eyebrow { font-size:8px; letter-spacing:1.8px; }
  .eyebrow-line { width:22px; }
  .intro-scroll { letter-spacing:1.4px; font-size:9px; }
  .world { height:510px; border-radius:3px 3px 0 0; }
  .world-topline,.world-bottomline { left:22px; right:22px; }
  .world-topline { top:23px; }
  .world-focus { border-radius:2px; }
  .world-bottomline h2 { font-size:44px; }
  .world-bottomline p { font-size:16px; }
  .player-dock { border-radius:0 0 3px 3px; padding:15px; }
  .dock-tools { gap:7px; }
  .dock-tools .tool-button { padding:11px 9px; font-size:11px; }
  .stillness-setting { flex-direction:column; align-items:flex-start; gap:16px; }
  .stillness-setting button { padding:11px 14px; }
  .player-caption { font-size:8px; line-height:2.2; }
  .places { padding:108px 0 125px; }
  .section-heading h2,.ritual-left h2 { font-size:57px; letter-spacing:-2.5px; }
  .scene-grid { grid-template-columns:1fr; gap:37px; }
  .scene-card-art { height:300px; }
  .card-copy strong { font-size:29px; }
  .card-copy small { font-size:11px; }
  .difference { margin-bottom:110px; }
  .difference-art { height:360px; }
  .difference-copy h2 { font-size:55px; }
  .rituals { padding:78px 4px 91px; }
  .ritual-copy strong { font-size:25px; }
  .ritual-copy small { font-size:11px; }
  .ending { padding:128px 0; }
  .ending p { font-size:49px; }
  body.focused .world { border-radius:0; }
  body.focused .world-bottomline { bottom:235px; }
}
@media (prefers-reduced-motion:reduce) {
  .intro-orbit,.orbit-halo,.orbit-reflection { animation:none!important; }
  .sleep-screen-inner > * { transition:none!important; }
}

/* Keep every playback control inside the floating immersive dock. */
body.focused .player-dock {
  box-sizing:border-box;
  max-width:1120px;
  gap:clamp(10px,1.2vw,16px);
}
body.focused .now-playing { min-width:0; flex:0 1 190px; }
body.focused .dock-tools { min-width:0; gap:clamp(7px,1vw,12px); }

@media (max-width:1040px) {
  body.focused .audio-visualizer { display:none; }
}
@media (max-width:900px) {
  body.focused .player-dock { flex-wrap:wrap; justify-content:flex-start; }
  body.focused .dock-tools {
    flex:1 1 100%;
    width:100%;
    margin-left:0;
    justify-content:space-between;
    border-top:1px solid rgba(206,226,219,.18);
    padding-top:10px;
  }
}
@media (max-width:600px) {
  body.focused .player-dock { width:calc(100% - 20px); }
  body.focused .dock-tools { justify-content:flex-start; flex-wrap:wrap; }
  body.focused .volume-group { flex:1 1 100%; }
  body.focused .dock-tools .tool-button { flex:1 1 auto; }
}