:root{
  --navy:#2e2f4f;
  --navy-deep:#070a1a;
  --sky:#a3d9ef;
  --sun:#fcd22f;
  --sand:#f4f1e8;
  --ink:#24253d;
  --muted:#6b6f86;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--sans);background:var(--sand);color:var(--ink)}
body{transition:background 1.2s,color 1.2s}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;font:inherit;border:1px solid currentColor;border-radius:40px;padding:13px 21px;background:transparent;color:inherit;transition:background .2s,color .2s,border-color .2s}
button:hover{background:var(--sun);color:var(--navy);border-color:var(--sun)}
button:focus-visible,a:focus-visible{outline:3px solid var(--sky);outline-offset:5px}

header{position:fixed;top:0;left:0;width:100%;padding:22px 4%;display:flex;justify-content:space-between;align-items:center;z-index:8}
header a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px}
header b{font-weight:700;font-style:italic;letter-spacing:2px;font-size:15px}
header .crumb{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;margin-left:12px;font-weight:400}
header .mark{width:30px;height:34px;background:url(assets/logo-main.png) no-repeat;background-size:30px auto;background-position:0 0;display:inline-block}
body.deep header .mark{filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(160deg)}
header button{font-size:11px;padding:9px 14px}

canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
main{position:relative}

/* Intro */
#intro{max-width:1000px;margin:auto;padding:130px 40px 60px}
.eyebrow,small,.message span,.answer span,aside span,footer{font-family:var(--mono);font-size:11px;letter-spacing:1.6px}
.eyebrow{color:#4e7f99}
.message{margin:42px 0 32px;border-left:2px solid var(--sky);padding-left:24px;max-width:720px}
.message span,.answer span{color:var(--muted);font-size:10px}
.message p{font-family:var(--serif);font-size:clamp(24px,3vw,36px);line-height:1.3;margin:12px 0}
.answer{display:flex;gap:35px;align-items:center}
.portrait{width:150px;height:190px;flex:none;border-radius:100px 100px 8px 8px;background:var(--sky);overflow:hidden;display:grid;place-items:center}
.portrait img{width:78%;height:auto}
.portrait img.photo{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
h1{font-size:clamp(56px,8vw,104px);font-weight:600;line-height:.94;letter-spacing:-3px;margin:12px 0 30px;color:var(--navy)}
em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-2px}
.primary{background:var(--navy);color:var(--sand);border:0;padding:18px 28px;margin-top:28px;font-weight:500}
.primary span{margin-left:65px}
small{display:block;font-size:9px;letter-spacing:.5px;margin-top:20px;color:#8a8c9c}

/* Deep end */
body.deep{background:var(--navy-deep);color:#eef3f7}
body.deep .primary{background:var(--sun);color:var(--navy)}
body.deep .primary:hover{background:var(--sky)}
body.deep header{background:linear-gradient(#070a1ad9,transparent)}
#journey{height:100svh;overflow:hidden}
#chapter{position:absolute;top:25%;left:8%;width:min(660px,62%);max-height:calc(75svh - 135px);overflow-y:auto;scrollbar-width:thin;padding:0 12px 20px 0;overscroll-behavior:contain;z-index:3;text-shadow:0 2px 35px #000;transition:opacity .35s,transform .8s;transform-origin:50% 50%}
#journey .eyebrow{color:var(--sky)}
h2{font-weight:600;line-height:1.03;margin:20px 0}
#headline{font-size:clamp(36px,4.3vw,60px);letter-spacing:-1.5px;line-height:1.05;text-wrap:balance;margin:18px 0;max-width:620px}
#sub{white-space:pre-line;font-family:var(--serif);font-size:clamp(16px,1.8vw,20px);line-height:1.45;color:#c2cad6;max-width:540px;margin:16px 0}
#next{margin-top:10px;font-size:15px;padding:16px 22px}
#next[hidden],#air[hidden]{display:none}

#sticky{position:absolute;right:5%;top:115px;background:var(--sun);color:var(--navy);padding:22px;transform:rotate(4deg);box-shadow:0 15px 50px #0006;width:240px;z-index:4;transition:transform .8s}
aside span{font-size:8px}
aside strong{display:block;font-size:20px;margin-top:16px;font-style:italic}
aside p{font-size:13px;margin:10px 0 0}
aside .scrawl{font-family:var(--serif);font-style:italic;font-size:14px;color:#8a3b12;min-height:1em}
aside .scrawl:empty{display:none}
aside .scrawl span{display:block;font-family:var(--serif);font-size:inherit;letter-spacing:0}

#snapshots{position:absolute;right:calc(5% + 120px);top:330px;width:250px;height:300px;z-index:4}
.snapshot{position:absolute;top:0;left:0;width:250px;margin:0;padding:10px 10px 12px;background:#fdfcf8;box-shadow:0 18px 50px #0008;transform:rotate(-5deg)}
.snapshot.second{left:150px;top:70px;width:210px;transform:rotate(6deg);z-index:-1}
.snapshot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.snapshot figcaption{font-family:var(--serif);font-style:italic;color:var(--navy);font-size:14px;margin-top:8px;text-align:center}
@media(max-height:760px){#snapshots{top:auto;bottom:110px;height:230px}.snapshot{width:210px}.snapshot.second{width:180px;top:40px}}
footer{position:absolute;bottom:35px;left:5%;right:5%;display:flex;gap:12px;justify-content:space-between;align-items:center;z-index:5;padding-top:25px;text-shadow:0 2px 8px #000}
footer b{display:block;margin-top:8px;font-weight:normal;color:#8fb3c6;font-size:10px}
footer button{font-size:10px;letter-spacing:0;background:#0a1030bb;backdrop-filter:blur(8px);font-family:var(--mono)}
#brake{white-space:nowrap}
#progress{position:absolute;bottom:0;left:0;height:3px;background:var(--sun);transition:width .6s}

body.plunging #chapter{opacity:.12;transform:scale(.83) translateY(-35px)}
body.plunging #sticky{transform:rotate(9deg) translateY(-12px)}

/* Ending */
#ending{min-height:100svh;display:flex;align-items:center;padding:120px 7% 60px;gap:7%}
#ending[hidden]{display:none}
.endart{width:32%;aspect-ratio:3/4;border-radius:180px 180px 0 0;background:var(--sky);display:grid;place-items:center;overflow:hidden}
.endart img{width:70%}
.endart img.photo{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.endcopy{flex:1}
.endcopy h2{font-size:clamp(35px,4vw,58px);color:var(--navy);margin-top:18px}
.endcopy p{line-height:1.55;color:var(--muted);font-size:18px;margin:20px 0}
.endcopy .sign{font-family:var(--serif);font-style:italic;color:var(--ink)}
.endcopy button{display:block;margin-top:20px}
.next-pages{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.next-pages .eyebrow{width:100%;margin-bottom:4px}
.next-pages a{color:var(--navy);text-decoration:none;border:1px solid #c9cbd6;border-radius:30px;padding:9px 15px;font-weight:500;font-size:14px}
.next-pages a:hover{border-color:var(--navy);background:#fff}
.next-pages i{font-style:normal;font-family:var(--mono);font-size:9px;color:#a07a00;margin-left:6px;letter-spacing:1px;text-transform:uppercase}

/* Dialog */
dialog{background:var(--sand);color:var(--ink);border:0;padding:35px;width:min(740px,92vw);max-height:85vh;border-radius:10px}
dialog::backdrop{background:#04061ad9;backdrop-filter:blur(10px)}
#close{float:right}
dialog h2{font-size:38px;clear:both;color:var(--navy)}
input{width:100%;padding:16px;background:white;border:1px solid #c3c6d3;font:inherit;margin:15px 0;border-radius:6px}
#termList{display:flex;gap:8px;flex-wrap:wrap;max-height:38vh;overflow:auto;padding:6px}
#termList button{font-size:13px;padding:9px 12px}

@media(max-width:650px){
  header{padding:18px 5%}
  header .crumb{display:none}
  header button{padding:8px 10px;font-size:10px}
  #sound{margin-right:6px}
  #intro{padding:110px 25px 35px}
  #intro>.eyebrow{font-size:9px;line-height:1.6}
  .answer{gap:18px}
  .portrait{width:90px;height:125px}
  .answer span{font-size:8px}
  h1{letter-spacing:-2px}
  #start{font-size:15px;padding:17px 20px}
  #start span{margin-left:15px}
  #sticky{top:78px;right:6%;padding:11px;width:180px}
  aside strong{font-size:15px;margin-top:8px}
  aside p{font-size:11px}
  aside .scrawl{font-size:12px}
  aside .scrawl span:not(:last-child){display:none}
  header .mark{height:30px}
  #snapshots{display:none}
  .endart{width:180px;height:230px;aspect-ratio:auto}
  #chapter{background:linear-gradient(90deg,rgba(7,10,26,.9),rgba(7,10,26,.6));border-radius:8px;padding:14px;top:205px;left:6%;width:88%;max-height:calc(100svh - 335px)}
  #headline{font-size:31px;letter-spacing:-1px}
  #sub{font-size:16px;line-height:1.4}
  footer{bottom:12px;flex-wrap:wrap;gap:8px}
  footer>div{width:100%}
  footer button{font-size:9px;padding:9px 11px}
  #ending{flex-direction:column;align-items:start;gap:20px;padding-top:100px}
  .endart{width:130px}
  .endcopy h2{font-size:37px}
  dialog{padding:24px}
}
@media(max-height:700px) and (min-width:651px){
  #chapter{top:100px;max-height:calc(100svh - 220px)}
  #headline{font-size:38px}
  #sub{font-size:16px}
  #sticky{top:95px}
}
#sound{margin-left:auto;margin-right:10px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}