:root{--serif:"Instrument Serif",Georgia,serif;--sans:"Inter",system-ui,sans-serif;
    --ink:#182634;--soft:#55677a;--faint:#93a2b2;--paper:#fbfcfd;--line:rgba(24,38,52,.10)}
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(22px,6vw,72px)}
  .kick{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);font-weight:500}
  .num{font-variant-numeric:tabular-nums}


  /* hero + parallax */
  #hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
  #hero .wrap{position:relative;z-index:2}
  #hero .kick{margin-bottom:26px}
  #hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,9vw,112px);line-height:.97;letter-spacing:-.01em;margin:0;max-width:15ch}
  #hero h1 em{font-style:italic}
  #hero .deck{margin:30px 0 0;max-width:52ch;color:var(--soft);font-size:clamp(15px,2.1vw,19px)}
  #hero .cue{margin-top:54px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:10px}
  #hero .cue .l{width:44px;height:1px;background:var(--faint)}

  /* pinned story stage */
  #story{position:relative;height:1600vh}
  #stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
  #c{position:absolute;inset:0;width:100%;height:100%;display:block}

  #readout{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:3}
  #yr{font-family:var(--serif);font-size:clamp(40px,7vw,72px);line-height:.9}
  #an{font-weight:600;font-size:clamp(15px,2.4vw,20px);margin-top:2px}
  #an .lbl{display:block;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:4px}

  #acts{position:absolute;left:0;right:0;top:0;padding:clamp(26px,5.5vh,58px) 24px clamp(100px,19vh,190px);text-align:center;pointer-events:none;z-index:5;
    background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 44%,rgba(251,252,253,.95) 74%,rgba(251,252,253,0) 100%)}
  .act{position:absolute;left:0;right:0;top:clamp(24px,5.5vh,58px);opacity:0;padding:0 24px}
  .act .t{font-family:var(--serif);font-style:italic;font-size:clamp(24px,4.4vw,42px);line-height:1.06;margin-bottom:8px}
  .act .d{font-size:clamp(13px,1.8vw,16px);line-height:1.55;color:var(--soft);max-width:48ch;margin:0 auto}


  footer{border-top:1px solid var(--line);padding:40px 0;background:var(--paper)}
  footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;font-size:12px;color:var(--faint)}
  footer .mark{font-family:var(--serif);font-size:17px;color:var(--ink)}
  footer a{color:#2f7a8c;text-decoration:none}

  .legend{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font-size:10.5px;color:var(--faint);z-index:3}
  .legend .bar{width:120px;height:6px;border-radius:4px;background:linear-gradient(90deg,#142448,#215080,#368c98,#5fb496,#e2b24e,#e27840,#c9463a,#962233)}

  #sealevel,#coda2{position:absolute;left:0;right:0;opacity:0;z-index:4;pointer-events:none}
  #sealevel{bottom:0;padding:clamp(26px,6vw,64px) clamp(22px,6vw,72px) clamp(34px,7vh,70px);
    background:linear-gradient(180deg,rgba(18,48,88,0) 0%,rgba(18,48,88,.14) 42%,rgba(13,38,72,.34) 100%)}
  #sealevel .in{max-width:640px}
  #sealevel .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#cfe0ee;margin-bottom:12px}
  #sealevel h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,5vw,50px);line-height:1.03;margin:0 0 16px;color:#fff}
  #sealevel p{margin:0 0 12px;font-size:clamp(14px,2.2vw,17px);line-height:1.62;color:#dce8f2}
  #sealevel b{color:#fff;font-weight:600}
  #sealevel .stat{display:flex;gap:36px;margin:16px 0 4px;flex-wrap:wrap}
  #sealevel .stat .big{font-family:var(--serif);font-size:clamp(28px,5vw,46px);line-height:1;color:#fff}
  #sealevel .stat .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a9c4d8;margin-top:5px}
  #sealevel .src{font-size:11px;color:#9fbccb;margin-top:14px}
  #coda2{top:0;bottom:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 26px;
    background:linear-gradient(180deg,rgba(13,38,72,.64),rgba(13,38,72,.84))}
  #coda2 .in{max-width:640px}
  #coda2 .k{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#bcd4e2;margin-bottom:18px}
  #coda2 h2{font-family:var(--serif);font-style:italic;font-weight:400;color:#fff;font-size:clamp(28px,6vw,58px);line-height:1.05;margin:0 0 18px}
  #coda2 h2 em{font-style:normal}
  #coda2 p{color:#dce8f2;font-size:clamp(15px,2.2vw,19px);line-height:1.62;margin:0}
  .storycard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,700px);max-height:88svh;overflow:auto;
    background:rgba(255,255,255,.9);backdrop-filter:blur(7px);border:1px solid rgba(24,38,52,.12);border-radius:16px;
    box-shadow:0 34px 80px -34px rgba(24,38,52,.55);padding:clamp(24px,4vw,42px);opacity:0;pointer-events:none;transition:opacity .25s ease}
  .storycard .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
  .storycard h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,4vw,40px);line-height:1.06;margin:0 0 14px;color:var(--ink)}
  .storycard p{margin:0;font-size:clamp(14px,2vw,17px);line-height:1.62;color:var(--soft)}
  .storycard b{color:var(--ink);font-weight:600}.storycard .hot{color:#c9463a}
  #coralcards{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}
  #sealevel{top:0;bottom:auto;height:100%;display:flex;align-items:center;justify-content:center;background:none;padding:24px}
  #sealevel .in{max-width:min(92vw,720px);max-height:88svh;overflow:auto;background:rgba(255,255,255,.93);backdrop-filter:blur(7px);
    border:1px solid rgba(24,38,52,.12);border-radius:16px;box-shadow:0 34px 80px -34px rgba(24,38,52,.6);padding:clamp(24px,4vw,42px)}
  #sealevel .k{color:var(--faint)}#sealevel h2{color:var(--ink)}#sealevel p{color:var(--soft)}#sealevel b{color:var(--ink)}
  #sealevel .stat .big{color:var(--ink)}#sealevel .stat .l{color:var(--faint)}#sealevel .src{color:var(--faint)}
  .topnar{position:absolute;left:0;right:0;top:0;z-index:5;text-align:left;pointer-events:none;opacity:0;
    padding:clamp(24px,5vh,52px) clamp(26px,6vw,90px) clamp(36px,7vh,72px);
    background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 50%,rgba(251,252,253,.55) 74%,rgba(251,252,253,0) 100%)}
  .topnar .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
  .topnar h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(27px,4.4vw,46px);line-height:1.05;margin:0 0 4px;max-width:36ch;color:var(--ink)}
  .topnar p{max-width:56ch;margin:14px auto 0;font-size:clamp(15px,2.1vw,18.5px);line-height:1.62;color:#2b3a49}
  .topnar .beats{position:relative;max-width:min(1500px,94vw);margin:8px 0 0;min-height:3.8em}
  .topnar .beat{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .35s ease;font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(16px,1.9vw,21px);line-height:1.45;color:#33465a}
  .storycard .src{font-size:11px;color:var(--faint);margin-top:14px}
  #turtlecards{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}
  @media (max-width:640px){
    .topnar .beat{font-size:clamp(14px,3.7vw,17px);line-height:1.42}
    .topnar .beats{min-height:7em}
    #hero h1{font-size:clamp(38px,12.5vw,60px)}
    #hero .deck{font-size:15px}
    #hero .kick{margin-bottom:18px}
    .storycard{width:90vw;top:50%;padding:20px 22px;border-radius:14px}
    .storycard h3{font-size:clamp(22px,7vw,30px);margin-bottom:10px}
    .storycard p{font-size:14px;line-height:1.55}
    #sealevel{padding:12px}
    #sealevel .in{padding:16px;max-height:94svh;overflow:visible}
    #sealevel h2{font-size:clamp(22px,6.5vw,28px);margin:0 0 8px}
    #sealevel p{font-size:12px;line-height:1.45;margin:0 0 6px}
    #sealevel .stat{gap:16px;margin:10px 0 2px}
    #sealevel .stat .big{font-size:clamp(24px,7vw,32px)}
    #sealevel .stat .l{font-size:9px;letter-spacing:.1em;margin-top:3px}
    #sealevel .src{font-size:10px;line-height:1.4;margin-top:8px}
    #coda2 h2{font-size:clamp(26px,8vw,42px)}
    #coda2 p{font-size:15px}
    #readout #yr{font-size:clamp(40px,14vw,58px)}
    #acts{max-width:78vw}
  }