/* liminal — scroll story.
   Structure, timings and measurements follow the reference stylesheet directly:
   a 340svh journey with the hero sticky inside it, beats absolutely placed and
   translated by real scroll distance, and the section scale below. Content,
   palette and wordmark are ours. */

/* The single-screen stylesheet positions `main` and `footer` absolutely, which
   is right for one viewport and wrong for a scrolling page: it lifts the real
   page footer out of flow and pins it inside the hero. Undo both here, then
   re-apply the absolute placement to the hero's own chrome only. */
main{position:static; inset:auto}
footer{position:static; left:auto; right:auto; bottom:auto}

.scene-sticky .copy,
.scene-sticky .hero-footer,
.scene-sticky header{position:absolute}
.hero-footer{
  bottom:35px; left:var(--pad); right:var(--pad);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:15px; z-index:5;
}
.bottom{position:static}

/* The still. If WebGL is unavailable or the GPU is software, the sculpture
   refuses to run - so something has to be there. This is the Cycles render, and
   it is what a phone or a locked-down browser sees. */
.stage .poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; z-index:0;
}
body.ready .stage .poster{visibility:hidden}

/* ------------------------------------------------------------------ journey */
.journey{position:relative}
.scene-sticky{
  position:relative; isolation:isolate; height:100svh; min-height:700px;
  overflow:hidden; margin:14px; border-radius:18px;
  border:1px solid rgba(64,117,117,.28);
  background:radial-gradient(ellipse at 74% 56%,
    #0b3a3f 0%, #04242b 26%, #011a20 54%, #000a10 84%, var(--void) 100%);
}
.story-mode .journey{height:340svh}
.story-mode .scene-sticky{position:sticky; top:14px}

/* ------------------------------------------------------------------- beats */
.story-beat{
  position:absolute; left:var(--pad); top:48%;
  transform:translateY(-43%); z-index:3; max-width:44%;
  opacity:0; visibility:hidden; pointer-events:none;
}
.story-beat a{pointer-events:auto}
.story-beat h2{
  margin:0; font-weight:500; font-size:clamp(55px,5.1vw,96px);
  letter-spacing:-.055em; line-height:1.06; color:#f2fbf8;
}
.story-beat>p:not(.chapter){
  font-size:18px; line-height:1.6; color:var(--muted); margin:28px 0 0;
}
.story-beat .cta{margin-top:35px}
.connected{left:59%; max-width:38%}
.connected h2{font-size:clamp(50px,4.7vw,85px)}

.chapter{
  display:flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.2em; color:#c2d6d2; margin:0 0 34px;
}
.chapter:before{content:''; width:6px; height:6px; background:var(--acid); border-radius:50%}

.story-progress{
  position:absolute; right:2.3%; top:23%; height:50%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; z-index:3; font-size:10px; color:#8fa9a5;
}
.story-progress i{display:block; width:1px; background:#4a6b6877; flex:1; position:relative}
.story-progress b{
  display:block; position:absolute; top:0; left:-3px; width:7px; height:7px;
  background:var(--acid); border-radius:50%; transform:translateY(var(--progress-px,0px));
}
.scroll-cue{font-size:10px; text-align:center; color:#9fb5b1}
.scroll-cue span{
  display:block; width:1px; height:37px; margin:12px auto 0;
  background:#6d8b88; position:relative;
}
.scroll-cue span:after{
  content:''; position:absolute; bottom:0; left:-2px; width:5px; height:5px;
  background:var(--light); border-radius:50%;
}
.story-mode .hero-copy[aria-hidden=true]{pointer-events:none}

/* ------------------------------------------------------------- the notebook */
.product{position:relative; padding:110px var(--pad) 120px; overflow:hidden; background:#000a10}
.product-heading{
  position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; margin:0 0 46px; z-index:1;
}
.product h2{
  margin:0; font-size:clamp(56px,5.65vw,106px); font-weight:500;
  line-height:1.03; letter-spacing:-.06em; color:#f2fbf8;
}
.product-heading>p{max-width:245px; color:#a9c0bc; font-size:15px; line-height:1.6; margin:0 0 7px}
.accent{color:var(--acid)}

.notebook{
  position:relative; display:grid; grid-template-columns:27% 73%;
  border:1px solid #3f5f5d80; border-radius:16px; overflow:hidden;
  background:#02141a; z-index:1;
}
.context{padding:28px 25px; border-right:1px solid var(--line)}
.context-title{font-size:11px; letter-spacing:.2em; color:#b9cfcb; margin:4px 0 28px}
.source-button{
  display:flex; width:100%; align-items:center; text-align:left; gap:16px;
  padding:17px 0; border:0; border-bottom:1px solid var(--line);
  background:none; color:var(--light);
}
.source-button:last-child{border-bottom:0}
.source-button:hover strong{color:var(--acid)}
.source-button[data-linked=true] .paper-sheet{border-color:var(--acid)}
.paper-sheet{
  display:block; width:64px; height:86px; flex:none;
  background:#dfe8e5; border:1px solid transparent; padding:13px 8px;
}
.paper-sheet i{height:2px; background:#7d938f59; display:block; margin:4px 0}
.paper-sheet i:nth-child(3){background:#c7c92d; height:7px}
.paper-sheet i:last-child{width:60%}
.source-button strong{display:block; font-size:14px; font-weight:400; margin-bottom:8px}
.source-button small{display:block; font-size:11px; line-height:1.6; color:#94aca8}
.source-button .file-kind{font-size:9px; letter-spacing:.12em; margin-top:10px; color:#7d938f}

.answer-area{padding:0 30px 22px; min-width:0}
.questions{
  display:flex; gap:25px; border-bottom:1px solid var(--line);
  padding-top:15px; min-height:72px; align-items:stretch;
}
.questions button{
  background:none; border:0; border-bottom:3px solid transparent;
  padding:10px 0 18px; color:#9cb4b0; font-size:12px; text-align:left; flex:1;
}
.questions button[aria-selected=true]{color:var(--light); border-bottom-color:var(--acid)}
.questions button:hover{color:var(--light)}
.answer{padding:40px 20px 25px 11%; min-height:350px}
.answer-label{font-size:9px; letter-spacing:.2em; color:#9cb4b0; margin-bottom:16px}
.answer h3{
  margin:0 0 20px; font-size:clamp(27px,2.8vw,48px); font-weight:500;
  letter-spacing:-.045em; color:#f2fbf8;
}
.answer>.answer-text{font-size:clamp(15px,1.4vw,22px); line-height:1.55; color:#c3d8d4; max-width:65ch; margin:0}
.citations{margin-top:30px; display:grid; gap:24px}
.citation{
  display:grid; grid-template-columns:28px 1fr; column-gap:15px;
  text-align:left; align-items:start; border:0; background:none;
  color:#adc4c0; padding:0; position:relative;
}
.citation>span{background:var(--acid); color:#11150c; font-size:10px; padding:7px 0; text-align:center; border-radius:3px}
.citation strong{display:block; color:var(--light); font-size:13px; font-weight:400; margin-bottom:7px}
.citation p{font-size:12px; line-height:1.6; margin:0}
.citation small{display:block; font-size:10px; margin-top:7px; color:#8fa9a5}
.citation:hover strong{text-decoration:underline; text-underline-offset:4px}
.answer-footer{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid var(--line); padding-top:18px; color:#8fa9a5;
  font-size:10px; letter-spacing:.06em;
}
.copy-answer{border:1px solid #4a6b6880; color:var(--light); background:none; border-radius:99px; padding:9px 14px; font-size:11px}

a.source-button,a.citation{text-decoration:none}
a.source-button:focus-visible,a.citation:focus-visible{outline:1px solid var(--acid); outline-offset:4px}
.source-list:empty:before{content:'Pages appear here as they are cited.'; font-size:11px; line-height:1.6; color:#7d938f}
.answer[aria-busy=true] h3,.answer[aria-busy=true] .answer-text,.answer[aria-busy=true] .citations{opacity:.35; transition:opacity .2s}
.answer[aria-busy=true] .answer-label{color:var(--acid)}
.ask{
  display:flex; align-items:center; gap:12px; margin:0 0 12px 11%;
  border:1px solid #4a6b6880; border-radius:99px; padding:6px 6px 6px 20px; background:#000a10;
}
.ask:focus-within{border-color:#f5f40099}
.ask input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:var(--light);
  font:inherit; font-size:14px; padding:9px 0;
}
.ask input::placeholder{color:#7d938f}
.ask button{
  flex:none; border:0; border-radius:99px; background:var(--acid); color:#11150c;
  font:inherit; font-size:12px; letter-spacing:.04em; padding:10px 18px; cursor:pointer;
}
.ask button:disabled{opacity:.45; cursor:default}
.ask-status{min-height:18px; margin:0 0 14px 11%; font-size:11px; line-height:1.6; color:#9cb4b0}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.source-connections{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible}
.source-connections path{fill:none; stroke:#f5f40070; stroke-width:1}
.source-connections circle{fill:var(--acid)}

/* ---------------------------------------------------------------- the detail */
.detail{position:relative; min-height:740px; height:85svh; background:#00171e; isolation:isolate; overflow:hidden}
.detail>img{position:absolute; width:140%; height:140%; left:-20%; top:0; object-fit:cover; object-position:center top; z-index:-2}
.detail:after{content:''; position:absolute; inset:0; background:linear-gradient(120deg,#000a10ed,transparent 70%); z-index:-1}
.detail-copy{padding:75px var(--pad)}
.detail h2{margin:0; font-size:clamp(65px,7.6vw,130px); font-weight:500; letter-spacing:-.06em; line-height:1.04; color:#f2fbf8}

/* ---------------------------------------------------------------- the finale */
.finale{text-align:center; padding:45px 20px 100px; background:#000a10}
.finale h2{margin:0 0 34px; font-size:clamp(42px,4.8vw,84px); font-weight:500; letter-spacing:-.055em; color:#f2fbf8}
.finale>p{font-size:13px; color:#a2bab6; line-height:1.6; margin:0 0 25px}

.bottom{
  margin:0 var(--pad); padding:32px 0; display:flex; align-items:center;
  justify-content:space-between; gap:25px; border-top:1px solid var(--line);
  font-size:11px; color:#8fa9a5; flex-wrap:wrap;
}
.bottom .wordmark{font-size:17px}
.bottom a:hover{color:var(--light)}
.legal{font-size:10px; color:#6d8b88}

@media (max-width:1000px){
  .source-connections,.scroll-cue,.story-progress{display:none}
  .story-beat{top:130px; transform:none; max-width:86%; left:var(--pad)}
  .story-beat h2,.connected h2{font-size:58px}
  .connected{left:var(--pad); max-width:86%}
  .story-beat>p:not(.chapter){font-size:15px; margin-top:20px}
  .chapter{margin-bottom:22px}
  .product{padding:80px var(--pad)}
  .product-heading{display:block}
  .product h2{font-size:58px}
  .product-heading>p{max-width:none; margin-top:25px}
  .notebook{grid-template-columns:28% 72%}
  .context{padding:24px 16px}
  .paper-sheet{display:none}
  .answer{padding:30px 0 30px 5%; min-height:370px}
  .answer h3{font-size:28px}
  .ask,.ask-status{margin-left:5%}
  .detail{min-height:600px; height:75svh}
}
@media (max-width:600px){
  .notebook{display:block; border-radius:12px}
  .context{border-right:0; border-bottom:1px solid var(--line); padding:19px 18px}
  .source-list{display:flex; gap:15px}
  .source-button{padding:0; border:0; flex:1; align-items:flex-start}
  .source-button small{display:none}
  .source-button .file-kind{display:block; margin-top:6px}
  .answer-area{padding:0 16px 18px}
  .questions{gap:12px}
  .questions button{font-size:10px; line-height:1.5}
  .answer{padding:27px 0}
  .ask,.ask-status{margin-left:0}
  .ask{padding-left:16px}
  .ask input{font-size:16px}
  .detail h2{font-size:56px}
  .finale h2{font-size:44px}
  .product h2{font-size:44px}
}