:root{
  /* sea → night */
  --deep:#03121D;
  --night:#061B2B;
  --sea:#0C3F63;
  --sea-soft:#16628F;

  /* sun → shore */
  --shell:#FFF3E2;
  --paper:#FFFBF4;
  --sand:#EFDDC4;
  --sol:#FFA524;
  --neon:#FF3F86;
  --foam:#37C2AE;

  --ink:#08161F;
  --ink-2:#3B5666;
  --mist:#8FA9BA;
  --line:rgba(8,22,31,.14);

  --r-s:8px; --r-m:14px; --r-l:22px;
  --rail:76px;
  --pad:clamp(16px,4vw,32px);

  --shadow-lift:0 10px 30px -18px rgba(3,18,29,.55);

  --font-d:"Bricolage Grotesque",system-ui,sans-serif;
  --font-b:"Instrument Sans",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.4rem,3.4vw,2rem)}
h3{font-size:1.12rem}
p{margin:0 0 .85em;max-width:66ch}
p:last-child{margin-bottom:0}
a{color:inherit}
small{font-size:.82rem}

button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--sol);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--night);color:var(--paper);padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}

.hide{display:none !important}
.mono-num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}