/* Somnusora's Lake / original interface layer for the persistent shoreline. */
.perspective-switch { position:absolute; z-index:6; top:91px; right:clamp(24px,4vw,58px); display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.perspective-switch[hidden],.passage-status[hidden] { display:none!important; }
.perspective-kicker { font-size:8px; font-weight:700; letter-spacing:2.2px; color:#e0e8df; text-shadow:0 1px 12px #11242a; }
.perspective-buttons { display:flex; padding:4px; gap:3px; border:1px solid rgba(218,234,227,.27); background:rgba(9,28,37,.45); backdrop-filter:blur(18px); border-radius:5px; }
.perspective-buttons button { border:1px solid transparent; padding:10px 14px; background:transparent; color:rgba(234,244,235,.85); border-radius:3px; font-size:11px; letter-spacing:.3px; transition:background .25s,color .25s; }
.perspective-buttons button:hover { background:rgba(232,239,228,.16); }
.perspective-buttons button[aria-pressed=true] { background:#d6e1d5; color:#18323a; }
.passage-status { display:flex; align-items:center; gap:26px; padding:19px 25px; margin-top:13px; border:1px solid rgba(190,216,207,.22); background:linear-gradient(110deg,rgba(30,57,61,.9),rgba(17,40,47,.94)); color:#e8eee7; }
.passage-status>span { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.passage-status strong { font-size:10px; font-weight:650; letter-spacing:1.5px; }
.passage-status small { color:#b5cec4; letter-spacing:1.4px; font-size:9px; }
.passage-status-dot { width:7px; height:7px; border-radius:100%; background:#c6dbca; box-shadow:0 0 0 4px rgba(194,226,214,.1); }
.passage-progress-track { height:2px; background:rgba(212,230,221,.18); flex:1; max-width:480px; overflow:hidden; }
.passage-progress-track>span { display:block; width:0%; height:100%; background:linear-gradient(90deg,#8babac,#e0e5cc); transition:width .9s linear; }
.passage-status button { margin-left:auto; flex:0 0 auto; font-size:10px; color:#afc9c0; background:transparent; border:0; padding:7px 0; text-decoration:underline; text-underline-offset:4px; }
.passage-status button:hover { color:#f6f3ea; }

.passage-section { display:grid; grid-template-columns:1fr 1fr; gap:clamp(64px,9vw,160px); align-items:center; padding:155px clamp(14px,3vw,50px) 135px; border-bottom:1px solid rgba(208,230,220,.12); }
.passage-intro h2,.quiet-hours h2 { font:400 clamp(55px,5.9vw,88px)/1.08 var(--serif); letter-spacing:-3.4px; margin:27px 0 27px; }
.passage-intro h2 em,.quiet-hours h2 em { color:#bad3c9; font-weight:400; }
.passage-intro h2 em { color:#d7c2bf; }
.quiet-hours h2 em { color:#c9c6da; }
.passage-intro>p,.quiet-hours-copy>p { max-width:430px; color:#a3b8b7; font-size:14px; line-height:2; margin:0 0 28px; }
.passage-footnote { color:#789d97; font-size:9px; font-weight:600; letter-spacing:1.9px; }
.passage-choices { display:flex; flex-direction:column; border-top:1px solid rgba(202,225,217,.17); }
.passage-option { width:100%; color:#e8eee8; text-align:left; display:flex; align-items:center; gap:21px; padding:27px 3px 28px; background:transparent; border:0; border-bottom:1px solid rgba(202,225,217,.17); transition:padding-left .25s,background .25s; }
.passage-option:hover,.passage-option:focus-visible { padding-left:14px; background:rgba(151,195,180,.06); }
.passage-num { align-self:flex-start; color:#8facaa; font-size:10px; letter-spacing:1px; margin-top:6px; }
.passage-option-copy { flex:1; display:flex; flex-direction:column; gap:7px; }
.passage-option-copy strong { font:400 30px/1.1 var(--serif); letter-spacing:-.3px; }
.passage-option-copy small { color:#99b2af; font-size:11px; }
.passage-arrow { font-size:20px; color:#bad3c9; border:1px solid rgba(177,214,203,.35); width:37px; height:37px; border-radius:50%; display:grid; place-items:center; }
.passage-option:hover .passage-arrow { background:#ccddd1; color:#1d3739; }

.quiet-hours { display:grid; grid-template-columns:1fr .85fr; gap:clamp(55px,9vw,160px); align-items:center; padding:103px clamp(20px,4vw,60px) 115px; border-top:1px solid rgba(207,228,222,.16); border-bottom:1px solid rgba(207,228,222,.16); background:radial-gradient(ellipse 60% 80% at 70% 60%,rgba(57,94,95,.12),transparent); }
.quiet-hours h2 { font-size:clamp(49px,5vw,73px); }
.quiet-hours-cta { background:transparent; color:#d5e5dc; border:1px solid rgba(204,226,218,.42); padding:15px 20px; margin-top:8px; font-size:11px; letter-spacing:.2px; transition:background .2s; }
.quiet-hours-cta:hover { background:rgba(182,216,202,.13); }
.quiet-hours-cta span { margin-left:40px; }
.weather-postcard { min-height:405px; background:linear-gradient(180deg,rgba(7,26,38,.19) 0%,rgba(10,31,39,.15) 25%,rgba(7,28,37,.77) 100%),url('assets/shore-atmosphere-v13.webp') 61% center/cover; border:1px solid rgba(204,224,213,.16); position:relative; overflow:hidden; padding:32px 34px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; }
.weather-postcard::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(11,32,42,.40) 57%,rgba(7,25,35,.71) 100%); z-index:-1; }
.weather-postcard::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 100% 72% at 50% 44%,transparent 45%,rgba(5,20,29,.38)); opacity:.55; z-index:-1; }
.weather-postcard-kicker { position:absolute; top:32px; left:34px; color:#c5d9d2; font-size:9px; font-weight:650; letter-spacing:2.2px; }
.weather-postcard-moon { position:absolute; top:23%; left:65%; width:43px; height:43px; border-radius:50%; background:radial-gradient(circle at 30% 23%,#e9e6d6 0,#d5dbce 61%,#afc0ba 100%); box-shadow:0 0 48px rgba(217,215,195,.25); transform:translateX(-50%); z-index:-2; }
.weather-postcard h3 { position:relative; font:400 38px/1.1 var(--serif); margin:0 0 11px; letter-spacing:-1px; }
.weather-postcard p { color:#c5d5d3; font-size:13px; line-height:1.75; margin:0 0 23px; max-width:310px; }
.weather-postcard-note { color:#9db7b3; font-size:8px; letter-spacing:1.6px; }

body.focused .passage-section,body.focused .quiet-hours { display:none; }
body.focused .perspective-switch { top:100px; right:clamp(22px,4vw,64px); }
body.focused .passage-status { position:absolute; z-index:13; left:50%; top:30px; bottom:auto; transform:translateX(-50%); margin:0; width:335px; padding:10px 15px; background:rgba(7,26,33,.54); backdrop-filter:blur(10px); border-color:rgba(221,239,226,.18); }
body.focused .passage-status>span { gap:9px; }
body.focused .passage-status strong { font-size:9px; }
body.focused .passage-status small { display:none; }
body.focused .passage-progress-track { width:68px; }
body.focused .passage-status button { font-size:9px; }
body.focused .world-topline .world-label { display:none; }

@media (max-width:1000px) {
  .passage-section { gap:65px; padding:120px 15px; }
  .passage-intro h2 { font-size:67px; }
  .quiet-hours { gap:65px; }
  .perspective-switch { top:82px; }
}
@media (max-width:800px) {
  .passage-section,.quiet-hours { grid-template-columns:1fr; gap:45px; }
  .passage-section { padding:110px 5px; }
  .passage-intro h2 { font-size:66px; }
  .passage-intro>p { max-width:600px; }
  .quiet-hours { padding:85px 20px; }
  .weather-postcard { min-height:355px; }
  .perspective-buttons button { padding:8px 10px; }
  .passage-status { gap:12px; padding:16px; }
}
@media (max-width:600px) {
  .world { height:580px; }
  .world-center { top:48%; }
  .perspective-switch { right:14px; top:74px; left:14px; align-items:stretch; gap:8px; }
  .perspective-kicker { display:none; }
  .perspective-buttons { align-self:flex-end; gap:0; }
  .perspective-buttons button { font-size:10px; padding:8px 10px; }
  .world-bottomline { bottom:26px; }
  .world-bottomline h2 { font-size:39px; }
  .passage-status { flex-wrap:wrap; justify-content:space-between; gap:13px; }
  .passage-status>span { gap:8px; }
  .passage-status strong { font-size:9px; }
  .passage-status small { font-size:8px; }
  .passage-progress-track { order:3; flex-basis:100%; max-width:none; }
  .passage-status button { margin-left:auto; }
  .passage-section { padding:96px 0; gap:32px; }
  .passage-intro h2,.quiet-hours h2 { font-size:55px; letter-spacing:-2.5px; }
  .passage-option { padding:23px 0; gap:15px; }
  .passage-option-copy strong { font-size:26px; }
  .passage-arrow { width:32px; height:32px; font-size:18px; }
  .passage-footnote { font-size:8px; }
  .quiet-hours { padding:80px 0; }
  .weather-postcard { min-height:370px; padding:27px; }
  .weather-postcard-kicker { top:27px; left:27px; }
  body.focused .perspective-switch { top:84px; left:10px; right:10px; }
  body.focused .passage-status { left:50%; top:22px; width:calc(100% - 190px); min-width:190px; padding:10px; }
  body.focused .passage-status strong { font-size:8px; letter-spacing:.8px; }
  body.focused .passage-progress-track { display:none; }
  body.focused .passage-status button { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .perspective-buttons button,.passage-progress-track>span { transition:none; }
}