/* ===========================================================================
   Hawaii State Roleplay
   Spacing  : 8pt scale, 4pt for micro-adjustments
   Type     : Josefin Sans (display) / Work Sans (text)
   Radius   : 4 / 8 — squared off, one family
   =========================================================================== */
@font-face{font-family:'Josefin Sans';src:url('../fonts/josefin-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('../fonts/josefin-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('../fonts/josefin-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('../fonts/josefin-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Work Sans';src:url('../fonts/work-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Work Sans';src:url('../fonts/work-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Work Sans';src:url('../fonts/work-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --font-display:'Josefin Sans', ui-sans-serif, system-ui, sans-serif;
  --font-text:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  --fs-micro:12px; --fs-xs:13px; --fs-sm:15px; --fs-md:17px; --fs-lg:19px;
  --fs-h4:20px; --fs-h3:26px;
  --fs-h2:clamp(34px, 1.6rem + 3.2vw, 56px);
  --fs-num:clamp(40px, 2rem + 3vw, 64px);
  --lh-tight:1.04; --lh-snug:1.3; --lh-normal:1.7;
  --tr-wide:.04em; --tr-wider:.12em; --tr-widest:.24em;

  --deep:#04222c;
  --deep-2:#062b37;
  --line:#0e3d4d;
  --line-2:#155a70;
  --text:#f4f8f7;
  --text-muted:#accad0;
  --text-subtle:#87a9b3;
  --gold:#ffc02e;
  --gold-hi:#ffd061;
  --ink:#20180a;
  --sand:#ffe3ab;
  --palm:#062029;

  --r-sm:4px; --r-md:8px;
  --dur-fast:130ms; --dur:220ms; --dur-slow:420ms;
  --ease:cubic-bezier(.22,.68,.28,1);

  --container:1160px;
  --header-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-text);font-size:var(--fs-md);line-height:var(--lh-normal);
  color:var(--text);background:var(--deep);overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
:target{scroll-margin-top:calc(var(--header-h) + var(--s-6))}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2);letter-spacing:var(--tr-wider);text-transform:uppercase;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:479px){h2{font-size:clamp(26px,3px + 6vw,34px);letter-spacing:var(--tr-wide)}}
h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-wide);line-height:var(--lh-snug)}
p{text-wrap:pretty}
.lede{font-size:var(--fs-lg);color:var(--text-muted);max-width:56ch}
.prose p{color:var(--text-muted)}
.prose p + p{margin-block-start:var(--s-5)}
.prose strong{color:var(--text);font-weight:600}
.u-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-5)}
@media (min-width:768px){.container{padding-inline:var(--s-7)}}

.section{position:relative;z-index:1;padding-block:var(--s-9)}
@media (min-width:768px){.section{padding-block:var(--s-10)}}
.section--line{border-block-start:1px solid var(--line)}

.skip-link{position:absolute;inset-block-start:var(--s-3);inset-inline-start:var(--s-5);z-index:200;
  padding:var(--s-3) var(--s-5);background:var(--gold);color:var(--ink);font-weight:600;border-radius:var(--r-sm);
  transform:translateY(-250%);transition:transform var(--dur) var(--ease)}
.skip-link:focus{transform:none}

/* ----------------------------------------------------------------- buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:46px;padding:var(--s-3) var(--s-6);border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:var(--tr-wider);text-transform:uppercase;text-align:center;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn svg{inline-size:17px;block-size:17px;fill:currentColor;flex:none}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-hi)}
.btn--outline{border-color:var(--line-2);color:var(--text)}
.btn--outline:hover{background:var(--deep-2);border-color:var(--text-subtle)}
.btn--sm{min-height:38px;padding:var(--s-2) var(--s-4);font-size:var(--fs-xs)}
.btn--block{width:100%}
.btn__spin{display:none;inline-size:16px;block-size:16px;flex:none;border:2px solid currentColor;
  border-top-color:transparent;border-radius:50%;animation:spin 700ms linear infinite}
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"] .btn__ico{display:none}
.btn[aria-busy="true"] .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5)}
.intro > *,.story > *,.apply > *,.join__inner > *{min-inline-size:0}

.textlink{
  display:inline-flex;align-items:center;gap:var(--s-2);padding-block:var(--s-2);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--sand);
  border-block-end:1px solid rgba(255,227,171,.35);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.textlink:hover{color:var(--gold);border-block-end-color:var(--gold)}
.textlink svg{inline-size:15px;block-size:15px;fill:currentColor;transition:transform var(--dur) var(--ease)}
.textlink:hover svg{transform:translateX(3px)}

/* ------------------------------------------------------------------ header */
.header{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  border-block-end:1px solid transparent;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.header[data-solid="true"]{background:rgba(4,17,24,.86);border-block-end-color:var(--line)}
.header__inner{display:flex;align-items:center;gap:var(--s-5);block-size:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--s-3);margin-inline-end:auto}
.brand img{block-size:34px;inline-size:auto}
.brand span{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:var(--tr-widest);text-transform:uppercase}
.brand small{display:block;font-family:var(--font-text);font-size:11px;font-weight:400;
  letter-spacing:.02em;text-transform:none;color:var(--text-subtle)}
/* the primary nav is a single overlay for every width — the inline list washed
   out against the sunset, and one menu means one set of states to maintain */
.header .btn--top{display:none}
@media (min-width:560px){.header .btn--top{display:inline-flex}}

/* scrim keeps the brand and burger legible over the bright part of the scene */
.header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,26,34,.7) 0%,rgba(4,26,34,.34) 58%,rgba(4,26,34,0) 100%);
  transition:opacity var(--dur) var(--ease)}
.header[data-solid="true"]::before,.page .header::before{opacity:0}

.burger{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;
  margin-inline-end:-10px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.burger:hover{background:var(--deep-2);border-color:var(--text-subtle)}
.burger__box{display:block;inline-size:20px;block-size:14px;position:relative}
.burger i{position:absolute;inset-inline:0;block-size:2px;background:currentColor;border-radius:1px;
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease)}
.burger i:nth-child(1){inset-block-start:0}
.burger i:nth-child(2){inset-block-start:6px}
.burger i:nth-child(3){inset-block-start:12px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------- overlay */
.menu{position:fixed;inset:0;z-index:59;overflow:hidden;background:var(--deep);
  visibility:hidden;opacity:0;
  transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)}
.menu[data-open="true"]{visibility:visible;opacity:1;transition:opacity var(--dur) var(--ease),visibility 0s}
/* the same banded sunset as the rest of the site, dropped to a ground tone */
.menu::before{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:46%;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(17,58,85,0) 0%, rgba(24,62,92,.5) 24%, rgba(44,74,114,.58) 46%,
    rgba(79,74,125,.6) 66%, rgba(122,76,119,.56) 84%, rgba(150,82,106,.5) 100%)}
.menu__palm{position:absolute;z-index:1;inset-block-end:-8%;inset-inline-end:-6%;
  inline-size:min(40vw,380px);height:auto;opacity:.3;pointer-events:none;
  transform:translateY(24px);transition:transform var(--dur-slow) var(--ease) 60ms}
.menu[data-open="true"] .menu__palm{transform:none}
@media (max-width:767px){.menu__palm{inline-size:min(62vw,300px);opacity:.2}}
.menu__inner{position:relative;z-index:2;block-size:100%;display:flex;flex-direction:column;
  justify-content:center;gap:var(--s-6);
  padding-block:calc(var(--header-h) + var(--s-6)) var(--s-6);overflow-y:auto}

.menu__label,.menu__list li,.menu__foot{opacity:0;transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.menu[data-open="true"] .menu__label{opacity:1;transform:none;transition-delay:60ms}
.menu[data-open="true"] .menu__list li{opacity:1;transform:none;
  transition-delay:calc(110ms + var(--i) * 55ms)}
.menu[data-open="true"] .menu__foot{opacity:1;transform:none;transition-delay:400ms}

.menu__label{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle)}
.menu__list li{border-block-start:1px solid var(--line)}
.menu__list li:last-child{border-block-end:1px solid var(--line)}
.menu__list a{display:flex;align-items:baseline;gap:var(--s-5);
  padding-block:clamp(var(--s-3),1.4vh,var(--s-4));padding-inline-start:0;
  font-family:var(--font-display);font-size:clamp(28px,1.2rem + 3.4vw,54px);font-weight:700;
  line-height:1.12;letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--text-muted);
  transition:color var(--dur) var(--ease),padding-inline-start var(--dur) var(--ease)}
.menu__list a:hover,.menu__list a:focus-visible{color:var(--gold);padding-inline-start:var(--s-4)}
.menu__list a[aria-current]{color:var(--text)}
.menu__list a[aria-current] .menu__n{color:var(--gold)}
.menu__n{flex:none;inline-size:2.4ch;font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-wide);color:var(--text-subtle);transition:color var(--dur) var(--ease)}
.menu__list a:hover .menu__n{color:var(--gold)}
.menu__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5)}

/* -------------------------------------------------------------------- hero */
/* One scroll value (--p, 0 -> 1) drives every layer at a different rate, so the
   scene builds depth the way a multi-plane parallax rig does. */
.hero-track{position:relative;z-index:0;block-size:200svh}
@media (max-width:999px){.hero-track{block-size:180svh}}
.scene{position:sticky;inset-block-start:0;block-size:100svh;overflow:hidden;--p:0;
  /* dissolve into the fixed ground instead of covering it with a flat fill */
  opacity:calc(1 - max(0, var(--p) - .8) * 5)}

.scene__sky{position:absolute;inset:-3% 0 0;
  background:linear-gradient(180deg,
    #05202e 0%, #08293b 8%, #0d3852 17%, #17496b 26%,
    #2f527f 34%, #4e5285 41%, #6f4f80 48%, #8f4f79 55%,
    #b1566f 62%, #cf6663 68%, #e57d57 74%, #f2964c 80%,
    #fdb23c 86%, #ffcb56 91%, #ffe08c 95%, #ffeec0 98%, #fff3d2 100%);
  transform:translate3d(0,calc(var(--p) * 34px),0)}
/* retro scanlines tie the whole sky together and hide gradient banding */
.scene__scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(6,26,38,.1) 0 1px,transparent 1px 6px);
  opacity:.45}
.scene__glow{position:absolute;inset-inline-start:50%;inset-block-end:2%;
  inline-size:min(150vw,1500px);aspect-ratio:1.6;translate:-50% 0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,130,.5),rgba(255,175,110,.18) 55%,transparent 78%);
  transform:translate3d(0,calc(var(--p) * -5vh),0) scale(calc(1 + var(--p) * .18))}
.scene__sun{position:absolute;inset-inline-start:50%;inset-block-end:15%;
  inline-size:min(64vw,600px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#fff6dd 0%,#ffeab5 42%,#ffd67e 72%,#ffc65c 100%);
  transform:translate3d(-50%,calc(var(--p) * -6vh),0) scale(calc(1 + var(--p) * .2));
  transform-origin:bottom center}
.scene__sun::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(255,160,90,.34) 6px 9px);
  -webkit-mask-image:linear-gradient(180deg,transparent 26%,#000 46%);
  mask-image:linear-gradient(180deg,transparent 26%,#000 46%)}

.clouds{position:absolute;inset-block-start:8%;inset-inline:-30%;block-size:34%;pointer-events:none}
.cloud{position:absolute;inline-size:auto;opacity:.16;filter:blur(.2px)}
.cloud--a{inset-block-start:6%;inset-inline-start:6%;block-size:34%;
  transform:translate3d(calc(var(--p) * -46vw),calc(var(--p) * -2vh),0)}
.cloud--b{inset-block-start:44%;inset-inline-end:8%;block-size:26%;opacity:.12;
  transform:translate3d(calc(var(--p) * 52vw),calc(var(--p) * -1vh),0)}
.cloud--c{inset-block-start:74%;inset-inline-start:32%;block-size:20%;opacity:.1;
  transform:translate3d(calc(var(--p) * -30vw),0,0)}

.scene__sea{position:absolute;z-index:2;inset-inline:0;inset-block-end:0;block-size:13%;
  background:linear-gradient(180deg,#1a5a6e 0 14%,#12475a 14% 34%,#0c3648 34% 58%,#082c3a 58% 80%,var(--deep) 80% 100%)}
.scene__sea::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:4px;background:#ffd67e}
.scene__sea::after{content:"";position:absolute;inset-inline:0;inset-block-start:4px;block-size:46%;
  background:repeating-linear-gradient(180deg,rgba(255,205,110,.5) 0 2px,transparent 2px 9px);
  -webkit-mask-image:radial-gradient(52% 100% at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(52% 100% at 50% 0,#000,transparent 78%)}

/* two palm depths: the mid pair rises from below, the near pair sweeps in and closes the frame */
.palms{position:absolute;inset:0;z-index:1;pointer-events:none}
.palm{position:absolute;inset-block-end:-4%;inline-size:auto;max-inline-size:none;
  object-fit:contain;object-position:bottom center;will-change:transform}
.palm--mid-l{inset-inline-start:2%;block-size:min(70%,640px);
  transform:translate3d(calc(var(--p) * 14vw),calc(118% - var(--p) * 118%),0) scale(calc(.95 + var(--p) * .55))}
.palm--mid-r{inset-inline-end:1%;block-size:min(74%,680px);
  transform:translate3d(calc(var(--p) * -14vw),calc(120% - var(--p) * 120%),0) scale(calc(.95 + var(--p) * .55)) scaleX(-1)}
.palm--l{inset-inline-start:-15%;block-size:min(98%,880px);
  transform:translate3d(calc(var(--p) * 32vw),calc(var(--p) * 12vh),0) scale(calc(1 + var(--p) * 1.05)) rotate(calc(var(--p) * 2deg))}
.palm--r{inset-inline-end:-15%;block-size:min(102%,920px);
  transform:translate3d(calc(var(--p) * -32vw),calc(var(--p) * 12vh),0) scale(calc(1 + var(--p) * 1.05)) scaleX(-1) rotate(calc(var(--p) * 2deg))}
/* the canopy closes over the scene, which is also the handoff into the page */
.scene__close{display:none}

@media (max-width:767px){
  /* a bigger sun keeps the dark hero copy on a light field at phone widths */
  .scene__sun{inline-size:min(116vw,640px);inset-block-end:19%}
  .scene__glow{inline-size:min(210vw,1400px)}
  .palm{inset-block-end:-15%}
  .palm--mid-l{inset-inline-start:-16%;block-size:min(56%,430px);
    transform:translate3d(calc(var(--p) * 22vw),calc(120% - var(--p) * 120%),0) scale(calc(.95 + var(--p) * .6))}
  .palm--mid-r{inset-inline-end:-18%;block-size:min(60%,460px);
    transform:translate3d(calc(var(--p) * -22vw),calc(122% - var(--p) * 122%),0) scale(calc(.95 + var(--p) * .6)) scaleX(-1)}
  .palm--l{inset-inline-start:-56%;block-size:min(52%,400px);
    transform:translate3d(calc(var(--p) * 44vw),calc(var(--p) * 10vh),0) scale(calc(1 + var(--p) * 1.2)) rotate(calc(var(--p) * 2deg))}
  .palm--r{inset-inline-end:-56%;block-size:min(56%,430px);
    transform:translate3d(calc(var(--p) * -44vw),calc(var(--p) * 10vh),0) scale(calc(1 + var(--p) * 1.2)) scaleX(-1) rotate(calc(var(--p) * 2deg))}
}

.scene__content{position:relative;z-index:3;block-size:100%;display:grid;align-content:center;
  justify-items:center;text-align:center;gap:var(--s-6);
  padding-block:calc(var(--header-h) + var(--s-5)) var(--s-9);padding-inline:var(--s-5);
  transform:translate3d(0,calc(var(--p) * -70px),0);opacity:calc(1 - var(--p) * 2.4)}
.scene__content h1{display:contents}
.hero-mark{block-size:min(42svh,380px);inline-size:auto;max-inline-size:74vw;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(4,20,26,.38))}
.hero-line{max-width:36ch;font-size:var(--fs-md);font-weight:600;color:#3a2510}
.scene__content .textlink{color:#3a2510;border-block-end-color:rgba(58,37,16,.45)}
.scene__content .textlink:hover{color:#0b2b36;border-block-end-color:#0b2b36}
@media (max-width:640px){.hero-mark{block-size:min(33svh,260px)}}
.scroll-cue{position:absolute;inset-block-end:var(--s-5);inset-inline-start:50%;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:#bfdde3;
  opacity:calc(1 - var(--p) * 3.2)}
.scroll-cue span{display:block;inline-size:1px;block-size:32px;background:currentColor;
  animation:cue 2.4s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ------------------------------------------------------------------- intro */
.intro{display:grid;gap:var(--s-6)}
@media (min-width:900px){.intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-9);align-items:baseline}}
.intro h2{max-width:none}
.intro p{font-size:clamp(19px,1rem + .6vw,24px);line-height:1.55;color:var(--text);max-width:46ch;
  font-family:var(--font-display);font-weight:400;letter-spacing:.01em}

/* ------------------------------------------------------------------- story */
.story{display:grid;gap:var(--s-7);margin-block-start:var(--s-8)}
@media (min-width:900px){.story{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-9)}}
.story__aside{align-self:start}
.pull{font-family:var(--font-display);font-size:clamp(24px,1.2rem + 1.4vw,32px);font-weight:400;
  line-height:1.25;color:var(--sand);border-inline-start:2px solid var(--gold);padding-inline-start:var(--s-5)}
.sig{margin-block-start:var(--s-6);font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--text-subtle)}
.rail{display:grid;gap:var(--s-5);margin-block-start:var(--s-9);
  padding-block-start:var(--s-6);border-block-start:1px solid var(--line)}
@media (min-width:700px){.rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7)}
  .rail > div + div{border-inline-start:1px solid var(--line);padding-inline-start:var(--s-7)}}
.rail dt{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle)}
.rail dd{font-family:var(--font-display);font-size:var(--fs-num);font-weight:400;line-height:1.05;
  letter-spacing:.01em;color:var(--sand);margin-block:var(--s-2)}
.rail p{font-size:var(--fs-sm);color:var(--text-muted);max-width:34ch}

/* ----------------------------------------------------------------- careers */
.steps{margin-block-start:var(--s-8);counter-reset:s}
.steps li{display:grid;gap:var(--s-2) var(--s-6);padding-block:var(--s-6);border-block-start:1px solid var(--line)}
@media (min-width:768px){.steps li{grid-template-columns:2.5rem minmax(0,20ch) minmax(0,1fr);align-items:start;gap:var(--s-7)}}
.steps li::before{counter-increment:s;content:"0" counter(s);
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--tr-wider);
  color:var(--gold);line-height:1.25}
.steps h3{color:var(--text)}
.steps p{color:var(--text-muted);font-size:var(--fs-sm);max-width:52ch;padding-block-start:5px}
.apply{display:grid;gap:var(--s-7);margin-block-start:var(--s-9);
  padding-block-start:var(--s-7);border-block-start:1px solid var(--line)}
@media (min-width:900px){.apply{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-9)}}
.label{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle);margin-block-end:var(--s-5)}
.reqs li{display:flex;gap:var(--s-4);align-items:flex-start;padding-block:var(--s-4);
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:400;letter-spacing:.01em;line-height:1.4}
.reqs li + li{border-block-start:1px solid var(--line)}
.reqs svg{inline-size:20px;block-size:20px;flex:none;margin-block-start:4px;fill:var(--gold)}
.before p{color:var(--text-muted);font-size:var(--fs-sm)}
.before p + p{margin-block-start:var(--s-5)}
.before strong{color:var(--sand);font-weight:600}
.apply .btn{margin-block-start:var(--s-6)}

/* --------------------------------------------------------------------- faq */
.faq{margin-block-start:var(--s-8);max-width:900px;border-block-start:1px solid var(--line)}
.faq__item{border-block-end:1px solid var(--line)}
.faq__btn{inline-size:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding-block:var(--s-6);text-align:start;font-family:var(--font-display);
  font-size:clamp(19px,1rem + .5vw,24px);font-weight:600;letter-spacing:var(--tr-wide);
  transition:color var(--dur) var(--ease)}
.faq__btn:hover,.faq__btn[aria-expanded="true"]{color:var(--gold)}
.faq__ico{position:relative;inline-size:18px;block-size:18px;flex:none}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.faq__ico::before{inset-inline:0;inset-block-start:8px;block-size:2px}
.faq__ico::after{inset-block:0;inset-inline-start:8px;inline-size:2px}
.faq__btn[aria-expanded="true"] .faq__ico::after{transform:rotate(90deg);opacity:0}
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease)}
.faq__panel[data-open="true"]{grid-template-rows:1fr}
.faq__panel > div{overflow:hidden}
.faq__panel p{padding-block-end:var(--s-6);color:var(--text-muted);max-width:62ch}
.faq__panel strong{color:var(--sand);font-weight:600}

/* -------------------------------------------------------------------- join */
.join{position:relative;z-index:1;overflow:hidden;background:linear-gradient(180deg,
  #b56b6a 0%,#d97b5e 14%,#ee934f 30%,#f8ae44 50%,#ffc02e 74%,#ffd469 100%)}
.join__inner{position:relative;padding-block:var(--s-9);display:grid;gap:var(--s-6);justify-items:start}
@media (min-width:900px){.join__inner{padding-inline-end:min(26vw,300px)}}
.join h2{color:#22190a;max-width:16ch}
.join p{color:#3a2a12;max-width:48ch;margin-block-start:var(--s-4);font-weight:500}
.join .btn--gold{background:#20180a;color:var(--sand)}
.join .btn--gold:hover{background:#0d2a34}
.join .btn--outline{border-color:rgba(34,25,10,.5);color:#22190a}
.join .btn--outline:hover{background:rgba(34,25,10,.08);border-color:#22190a}
.join__palm{position:absolute;inset-block-end:-18%;inset-inline-end:-2%;inline-size:min(24vw,230px);
  height:auto;opacity:.92}
@media (max-width:899px){.join__palm{opacity:.22;inline-size:min(46vw,220px)}}

/* ------------------------------------------------------------------ footer */
.footer{position:relative;z-index:1;border-block-start:1px solid var(--line);padding-block:var(--s-8)}
.footer__grid{display:grid;gap:var(--s-7)}
@media (min-width:768px){.footer__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}}
.footer__about{margin-block-start:var(--s-4);max-width:42ch;font-size:var(--fs-sm);color:var(--text-muted)}
.footer h2{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle);margin-block-end:var(--s-4)}
.footer ul{display:grid;gap:var(--s-3)}
.footer ul a{font-size:var(--fs-sm);color:var(--text-muted);transition:color var(--dur) var(--ease)}
.footer ul a:hover{color:var(--gold)}
.footer__base{margin-block-start:var(--s-8);padding-block-start:var(--s-5);border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3) var(--s-6);
  font-size:var(--fs-xs);color:var(--text-subtle)}

/* -------------------------------------------------------------- page head */
/* interior pages get the top half of the sunset only — the full scene stays
   on the home page so it keeps its weight */
.page .header{background:rgba(4,17,24,.86);border-block-end-color:var(--line)}
.pagehead{position:relative;z-index:1;overflow:hidden;
  padding-block:calc(var(--header-h) + var(--s-8)) var(--s-9);
  background:linear-gradient(180deg,
    rgba(4,34,44,1) 0%, rgba(6,38,52,1) 12%, rgba(15,52,74,1) 27%,
    rgba(38,62,100,1) 42%, rgba(76,62,112,1) 56%, rgba(104,68,110,1) 66%,
    rgba(86,60,94,1) 76%, rgba(44,52,72,1) 88%, rgba(14,48,62,.5) 96%,
    rgba(8,46,60,0) 100%)}
@media (min-width:768px){.pagehead{padding-block:calc(var(--header-h) + var(--s-9)) var(--s-10)}}
/* washes the palms back into the sky and melts the banner into the page ground */
.pagehead__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(30,52,88,0) 26%, rgba(56,56,104,.42) 48%,
    rgba(96,66,112,.68) 64%, rgba(72,54,84,.5) 80%, rgba(20,40,54,0) 94%)}
.pagehead__palm{position:absolute;inset-block-end:-34%;inline-size:min(20vw,220px);height:auto;
  opacity:.2;filter:blur(3px);pointer-events:none}
.pagehead__palm--l{inset-inline-start:-3%}
.pagehead__palm--r{inset-inline-end:-3%;transform:scaleX(-1)}
@media (max-width:899px){.pagehead__palm{opacity:.14;inline-size:min(42vw,200px)}}
.pagehead .container{position:relative;z-index:2}
.pagehead + main .section:first-child{padding-block-start:var(--s-8)}
.pagehead h1{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;
  line-height:var(--lh-tight);letter-spacing:var(--tr-wider);text-transform:uppercase;max-width:16ch}
.pagehead .lede{margin-block-start:var(--s-5);color:#d7e6ea}
.crumb{display:inline-flex;align-items:center;gap:var(--s-2);margin-block-end:var(--s-5);
  font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle);
  transition:color var(--dur) var(--ease)}
.crumb:hover{color:var(--gold)}
.crumb svg{inline-size:13px;block-size:13px;fill:currentColor}

/* --------------------------------------------------------------- page list */
.pages{margin-block-start:var(--s-8);border-block-start:1px solid var(--line)}
.pages a{display:grid;gap:var(--s-1) var(--s-6);padding-block:var(--s-6);
  border-block-end:1px solid var(--line);transition:background-color var(--dur) var(--ease)}
@media (min-width:768px){.pages a{grid-template-columns:minmax(0,20ch) minmax(0,1fr) 2rem;
  align-items:baseline;gap:var(--s-7)}}
.pages a:hover{background:rgba(255,255,255,.035)}
.pages h3{color:var(--text);transition:color var(--dur) var(--ease)}
.pages a:hover h3{color:var(--gold)}
.pages p{color:var(--text-muted);font-size:var(--fs-sm);max-width:56ch}
.pages svg{inline-size:20px;block-size:20px;fill:var(--text-subtle);justify-self:start;
  transition:transform var(--dur) var(--ease),fill var(--dur) var(--ease)}
@media (min-width:768px){.pages svg{justify-self:end;align-self:center}}
.pages a:hover svg{fill:var(--gold);transform:translateX(4px)}

/* -------------------------------------------------------------------- shop */
.plus{display:grid;gap:var(--s-7);margin-block-start:var(--s-8)}
@media (min-width:900px){.plus{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-9)}}
.price{display:flex;align-items:baseline;gap:var(--s-3);margin-block-end:var(--s-5)}
.price b{font-family:var(--font-display);font-size:var(--fs-num);font-weight:400;line-height:1;
  letter-spacing:.01em;color:var(--sand)}
.price span{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle)}
.perks li{display:flex;gap:var(--s-4);align-items:flex-start;padding-block:var(--s-3);
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:400;letter-spacing:.01em;line-height:1.4}
.perks li + li{border-block-start:1px solid var(--line)}
.perks svg{inline-size:18px;block-size:18px;flex:none;margin-block-start:6px;fill:var(--gold)}

.amounts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-7)}
.amount{display:grid;gap:var(--s-1);justify-items:center;min-inline-size:118px;
  padding:var(--s-4) var(--s-5);border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.amount:hover{background:rgba(255,255,255,.05);border-color:var(--gold)}
.amount b{font-family:var(--font-display);font-size:30px;font-weight:400;line-height:1;color:var(--sand);
  transition:color var(--dur) var(--ease)}
.amount:hover b{color:var(--gold)}
.amount span{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle)}

.tiers{margin-block-start:var(--s-7);border-block-start:1px solid var(--line)}
.tiers li{display:grid;gap:var(--s-3) var(--s-6);padding-block:var(--s-5);border-block-end:1px solid var(--line)}
@media (min-width:768px){.tiers li{grid-template-columns:minmax(0,18ch) minmax(0,1fr) auto auto;
  align-items:center;gap:var(--s-7)}}
.tiers h3{font-size:var(--fs-h4)}
.tiers p{font-size:var(--fs-sm);color:var(--text-muted);max-width:46ch}
.tiers .cost{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;line-height:1;
  color:var(--sand);white-space:nowrap}
.claim{margin-block-start:var(--s-9);padding-block-start:var(--s-7);border-block-start:1px solid var(--line);
  display:grid;gap:var(--s-6)}
@media (min-width:900px){.claim{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-9)}}
.claim p{color:var(--text-muted);font-size:var(--fs-sm)}
.claim p + p{margin-block-start:var(--s-5)}
.claim strong{color:var(--sand);font-weight:600}

/* ------------------------------------------------------------- regulations */
.rules{margin-block-start:var(--s-8);counter-reset:r}
.rules li{display:grid;gap:var(--s-3) var(--s-6);padding-block:var(--s-6);
  border-block-start:1px solid var(--line)}
.rules li:last-child{border-block-end:1px solid var(--line)}
@media (min-width:768px){.rules li{grid-template-columns:3rem minmax(0,18ch) minmax(0,1fr);
  align-items:start;gap:var(--s-7)}}
.rules li::before{counter-increment:r;content:counter(r,decimal-leading-zero);
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;
  letter-spacing:var(--tr-wide);color:var(--gold);line-height:1.25}
.rules h3{color:var(--text)}
.rules h3 span{display:block;margin-block-start:var(--s-1);font-family:var(--font-text);
  font-size:var(--fs-xs);font-weight:400;letter-spacing:.02em;text-transform:none;
  line-height:1.4;color:var(--text-subtle)}
.rules p{color:var(--text-muted);font-size:var(--fs-sm);max-width:62ch}
.rules p + p{margin-block-start:var(--s-3)}
.plain li{padding-block:var(--s-3);font-family:var(--font-display);font-size:var(--fs-h4);
  font-weight:400;letter-spacing:.01em;line-height:1.4;color:var(--text)}
.plain li + li{border-block-start:1px solid var(--line)}
.rule__note{color:var(--text-subtle);font-size:var(--fs-xs);border-inline-start:1px solid var(--line-2);
  padding-inline-start:var(--s-4)}
.rule__pun{margin-block-start:var(--s-4)!important;font-family:var(--font-display);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--tr-wide);color:var(--sand)!important}
.rule__pun b{display:block;margin-block-end:var(--s-1);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--text-subtle)}

/* ------------------------------------------------------- scrolling ground */
/* one fixed scene behind the whole page: a cool night layer, a warm sunset
   layer that fades in as you go down, and a glow that rises from the footer.
   --s is page scroll progress 0 -> 1, written once per frame in site.js. */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--deep);--s:0}
.bg__a,.bg__b,.bg__glow{position:absolute;inset:-8% 0}
.bg__a{background:linear-gradient(180deg,#04222c 0%,#052836 34%,#072f3e 68%,#093243 100%)}
.bg__b{opacity:var(--s);background:linear-gradient(180deg,
  #072736 0%,#12293f 22%,#24274a 42%,#3b2650 60%,#55284a 80%,#6d2f3d 100%)}
.bg__a,.bg__b{transform:translate3d(0,calc(var(--s) * -3vh),0)}
.bg__glow{inset:auto 0 -34% 50%;inline-size:min(190vw,1900px);aspect-ratio:1.5;translate:-50% 0;
  background:radial-gradient(closest-side,
    rgba(255,186,96,calc(.05 + var(--s) * .17)),
    rgba(255,132,84,calc(.02 + var(--s) * .06)) 54%, transparent 78%);
  transform:translate3d(0,calc(var(--s) * -30vh),0)}

/* clouds and gulls ride the same --s at different rates, which is what makes
   the sky read as depth rather than as a gradient */
/* soft alpha falloff rather than a drawn cloud edge — these can drift past the
   viewport without ever showing a cut */
.haze{position:absolute;pointer-events:none;will-change:transform}
.haze--1{inset-block-start:4%;inset-inline-start:-10%;inline-size:64vw;block-size:26vh;
  background:radial-gradient(closest-side,rgba(206,232,241,.075),rgba(206,232,241,.028) 52%,rgba(206,232,241,0) 100%);
  transform:translate3d(calc(var(--s) * 30vw),calc(var(--s) * -6vh),0)}
.haze--2{inset-block-start:26%;inset-inline-end:-16%;inline-size:56vw;block-size:20vh;
  background:radial-gradient(closest-side,rgba(198,226,238,.055),rgba(198,226,238,.02) 52%,rgba(198,226,238,0) 100%);
  transform:translate3d(calc(var(--s) * -34vw),calc(var(--s) * -3vh),0)}
.haze--3{inset-block-start:54%;inset-inline-start:6%;inline-size:48vw;block-size:22vh;
  background:radial-gradient(closest-side,rgba(190,218,234,.042),rgba(190,218,234,.015) 52%,rgba(190,218,234,0) 100%);
  transform:translate3d(calc(var(--s) * -20vw),calc(var(--s) * -9vh),0)}
.haze--4{inset-block-end:-6%;inset-inline-end:4%;inline-size:70vw;block-size:30vh;
  background:radial-gradient(closest-side,rgba(255,196,132,.05),rgba(255,170,120,.018) 52%,rgba(255,170,120,0) 100%);
  transform:translate3d(calc(var(--s) * -16vw),calc(var(--s) * -16vh),0)}

.gull{position:absolute;display:block;pointer-events:none;will-change:transform}
.gull img{display:block;inline-size:100%;height:auto;transform-origin:50% 34%;
  animation:flap 2.8s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.7) translateY(3%)}}

.gull--1{inset-block-start:16%;inset-inline-start:-14%;inline-size:min(10vw,122px);opacity:.15;
  transform:translate3d(calc(var(--s) * 122vw),calc(var(--s) * -11vh),0)}
.gull--2{inset-block-start:25%;inset-inline-start:-9%;inline-size:min(6.5vw,80px);opacity:.12;
  transform:translate3d(calc(var(--s) * 104vw),calc(var(--s) * -6vh),0)}
.gull--2 img{animation-duration:3.6s}
.gull--3{inset-block-start:11%;inset-inline-end:-8%;inline-size:min(4vw,50px);opacity:.12;
  transform:translate3d(calc(var(--s) * -96vw),calc(var(--s) * 7vh),0)}
.gull--3 img{animation-duration:2.2s}
.gull--4{inset-block-start:47%;inset-inline-end:-12%;inline-size:min(8vw,98px);opacity:.11;
  transform:translate3d(calc(var(--s) * -118vw),calc(var(--s) * -9vh),0)}
.gull--4 img{animation-duration:4.1s}
.gull--5{inset-block-start:66%;inset-inline-start:-7%;inline-size:min(5vw,62px);opacity:.09;
  transform:translate3d(calc(var(--s) * 88vw),calc(var(--s) * -14vh),0)}
.gull--5 img{animation-duration:3.1s}
@media (max-width:767px){
  .gull--1{inline-size:88px}.gull--2{inline-size:58px}.gull--4{inline-size:70px}
}

/* ------------------------------------------------------------------- board */
.board{margin-block-start:var(--s-8);display:grid;gap:var(--s-7) var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (min-width:700px){.board{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:var(--s-8) var(--s-6)}}
.board--sm{grid-template-columns:repeat(auto-fit,minmax(150px,190px))}
.member__frame{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.member__frame[data-state="loading"]::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%);
  background-size:220% 100%;animation:sheen 1.5s linear infinite}
@keyframes sheen{from{background-position:140% 0}to{background-position:-40% 0}}
.member__frame[data-state="empty"]{background:rgba(255,255,255,.02)}
.member__mark{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;
  inline-size:44%;height:auto;opacity:.16;filter:grayscale(1)}
.member__frame[data-state="ok"] .member__mark{display:none}
.member__img{inline-size:100%;block-size:100%;object-fit:cover}
.member__name{margin-block-start:var(--s-4);min-block-size:1em;font-family:var(--font-display);font-size:var(--fs-h4);
  font-weight:600;letter-spacing:var(--tr-wide);line-height:1.25;color:var(--text);
  overflow-wrap:anywhere}
.member__name[hidden]{display:block;visibility:hidden}
.member__rank{margin-block-start:var(--s-1);font-family:var(--font-display);font-size:var(--fs-micro);
  font-weight:600;letter-spacing:var(--tr-widest);text-transform:uppercase;color:var(--gold)}
.board__note{margin-block-start:var(--s-7);font-size:var(--fs-sm);color:var(--text-subtle)}

/* ------------------------------------------------------------------ motion */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
[data-reveal].seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  [data-reveal]{opacity:1;transform:none}
  .member__frame[data-state="loading"]::after{animation:none}
  .menu__label,.menu__list li,.menu__foot{opacity:1;transform:none;transition-delay:0s!important}
  .menu__palm{transform:none}
  .hero-track{block-size:100svh}
  .scene__content{transform:none;opacity:1}
  .palm{transform:none!important}
  .bg > *{transform:none!important}
  .gull img{animation:none}
}