/* ═══════════════════════════════════════════════════════════
   Nook Inc. Deserted Island Getaway Package
   1. Tokens   2. Base   3. Stages
   4. Check-in 5. Flight Information 6. The Island (site)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root{
  /* Animal Crossing palette */
  --sand:      #F6EBCF;
  --sand-2:    #FBF4E2;
  --paper:     #FCF6E4;
  --cream:     #F4EAD0;
  --bark:      #6B5842;
  --bark-2:    #8C7758;
  --bark-3:    #B7A183;
  --grass:     #7EC13F;
  --grass-d:   #5FA02B;
  --grass-dd:  #3E7A1E;
  --leaf:      #3F7C2E;
  --sky:       #8CD8F5;
  --sky-2:     #BCEBFA;
  --sea:       #3FA9E8;
  --sunny:     #FFD84D;
  --tag:       #C98A3C;
  --tag-d:     #A96E27;
  --coral:     #F2846B;

  /* Flight Information screen */
  --fi-bg:     #3D3D3D;
  --fi-box:    #2C2C2C;
  --fi-edge:   #4E4E4E;
  --fi-label:  #8E8E8E;
  --fi-dal:    #1FA0E8;
  --fi-water:  #2E8FD4;
  --fi-water2: #2477B4;
  --fi-node:   #6A4A17;
  --fi-plane:  #A8873F;
  --fi-goal:   #0F4F32;
  --fi-goaltx: #2C7A55;

  --round: "M PLUS Rounded 1c", "Baloo 2", ui-rounded, "Nunito", system-ui, sans-serif;
  --chunk: "Baloo 2", "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --pop: cubic-bezier(.34,1.56,.64,1);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── 2. Base ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--fi-bg);
  color:var(--bark);
  font-family:var(--round);
  font-size:16px; line-height:1.6; font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                    /* stages manage their own scrolling */
}
body.is-locked{ overscroll-behavior:none; }

a{ color:inherit; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }   /* beats class-level display rules */
::selection{ background:var(--grass); color:#fff; }

/* ── 3. Stage machinery ────────────────────────────────── */
.stage{
  position:fixed; inset:0;
  opacity:0; transition:opacity .55s var(--ease);
}
.stage.is-active{ opacity:1; }
.stage[hidden]{ display:none !important; }

/* ═══════════════════════════════════════════════════════
   4. CHECK-IN COUNTER
   ═══════════════════════════════════════════════════════ */
.stage--checkin{ overflow:hidden; background:#D9D2C6; }

/* The clip carries its own sign and dialogue box. Overscaling it vertically
   crops those away (the stage clips the overflow) so only the counter and the
   brothers remain behind our own UI. */
.checkin__video{
  position:absolute; left:0; top:-10%;
  width:100%; height:178%; object-fit:cover;
  filter:blur(1.5px) saturate(1.12) brightness(.92);
}
.checkin__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 75% at 50% 26%, rgba(255,246,225,.10) 0%, rgba(55,42,22,.34) 70%, rgba(45,34,16,.55) 100%),
    linear-gradient(to bottom, rgba(60,46,24,.30) 0%, rgba(60,46,24,.06) 26%, rgba(45,34,16,.48) 100%);
}

/* Narrow screens have no room to spare, so they stay tight on the brothers
   (above). Desktop pulls the zoom back to show the whole counter — the wider
   frame brings the game's own dialogue box back into view, so the scrim fades
   the bottom out hard enough to bury its top edge. */
@media (min-width:820px){
  .checkin__video{ top:-6%; height:120%; }

  .checkin__scrim{
    background:
      radial-gradient(105% 72% at 50% 24%, rgba(255,246,225,.12) 0%, rgba(55,42,22,.30) 62%, rgba(45,34,16,.52) 100%),
      linear-gradient(to bottom,
        rgba(60,46,24,.34) 0%,
        rgba(60,46,24,.05) 26%,
        rgba(52,39,20,.32) 46%,
        rgba(44,33,15,.84) 62%,
        rgba(32,24,10,.98) 76%,
        rgba(28,21,9,1)    100%);
  }
}

/* ── Nook Inc. sign ── */
.nook-sign{
  position:absolute; top:clamp(.75rem,2.5vh,1.75rem); left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:clamp(.5rem,1.4vw,1rem);
  background:linear-gradient(#FDFDFB,#EFEFEA);
  border:4px solid #9AA0A0; border-radius:10px;
  box-shadow:0 10px 26px rgba(40,30,15,.3);
  padding:clamp(.5rem,1.2vw,.85rem) clamp(.9rem,2.2vw,1.6rem);
  max-width:calc(100% - 2rem);
  animation:signDrop .8s var(--pop) both;
}
@keyframes signDrop{ from{ transform:translate(-50%,-140%);} to{ transform:translate(-50%,0);} }

.nook-sign__leaf{ width:clamp(1.5rem,3vw,2.3rem); height:auto; fill:#4CC22B; flex:none; }
.nook-sign__word{
  font-family:var(--chunk); font-weight:800;
  font-size:clamp(1.15rem,2.6vw,2rem); color:#4CC22B; letter-spacing:-.01em;
}
.nook-sign__rule{ width:2px; align-self:stretch; background:#D4D4CE; margin-inline:.2rem; }
.nook-sign__pkg{ display:flex; flex-direction:column; line-height:1.25; color:#3A3A38; }
.nook-sign__pkg b{
  font-weight:700; font-size:clamp(.65rem,1.35vw,1rem);
  border-bottom:2px solid #3A3A38; padding-bottom:.15em;
}
.nook-sign__pkg i{ font-style:normal; font-size:clamp(.55rem,1.05vw,.8rem); color:#6E6E6A; padding-top:.15em; }
@media (max-width:560px){ .nook-sign__pkg i{ display:none; } }

/* ── Dialogue box ── */
.dialogue{
  position:absolute; left:50%; bottom:clamp(1rem,3.5vh,2.5rem);
  transform:translateX(-50%);
  width:min(46rem, calc(100% - 2rem));
  animation:boxRise .7s .25s var(--pop) both;
}
@keyframes boxRise{ from{ transform:translate(-50%,40%); opacity:0 } to{ transform:translate(-50%,0); opacity:1 } }

.dialogue__tag{
  display:inline-block; position:relative; z-index:2;
  margin-left:1.4rem; margin-bottom:-.7rem;
  background:var(--tag); color:#FFF8E9;
  font-family:var(--chunk); font-weight:700; font-size:1.05rem;
  padding:.15rem 1.1rem .25rem; border-radius:999px;
  box-shadow:0 3px 0 var(--tag-d), 0 6px 14px rgba(50,35,10,.25);
}
.dialogue__box{
  position:relative;
  background:var(--cream);
  border-radius:2.4rem 2.4rem 2.4rem 2.4rem / 3rem 3rem 3rem 3rem;
  box-shadow:0 10px 30px rgba(50,35,10,.32), inset 0 0 0 3px rgba(255,255,255,.5);
  padding:clamp(1.3rem,3vw,2rem) clamp(1.4rem,3.5vw,2.4rem) clamp(1.6rem,3.5vw,2.2rem);
}
.dialogue__text{
  margin:0;
  font-family:var(--chunk); font-weight:600;
  font-size:clamp(1.05rem,2.4vw,1.65rem); line-height:1.45;
  color:#6D6152; min-height:2.6em;
}
.dialogue__text .caret{
  display:inline-block; width:.5ch; background:#B9AC97;
  animation:blink .9s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

.dialogue__next{
  position:absolute; left:50%; bottom:.55rem; transform:translateX(-50%);
  width:0; height:0; border:.55rem solid transparent; border-top-color:var(--sunny);
  opacity:0; transition:opacity .25s;
  animation:bob 1s infinite var(--ease);
}
.dialogue__next.is-on{ opacity:1; }
@keyframes bob{ 0%,100%{ margin-bottom:0 } 50%{ margin-bottom:-.35rem } }

/* ── Form ── */
.fields{
  display:grid; gap:.9rem;
  margin-top:1.1rem; padding-top:1.1rem;
  border-top:3px dashed rgba(160,145,120,.4);
  animation:fadeUp .45s var(--ease) both;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.field{ display:grid; gap:.3rem; }
.field__label{
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  color:var(--bark-2); padding-left:.9rem;
}
.field input{
  font:inherit; font-weight:700; font-size:1.05rem; color:var(--bark);
  background:#FFFCF2;
  border:3px solid #E0D2B2; border-radius:999px;
  padding:.55rem 1.1rem;
  outline:none; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#C6B99E; font-weight:500; }
.field input:focus{ border-color:var(--grass); box-shadow:0 0 0 4px rgba(126,193,63,.25); }
.field input:hover{ border-color:#CFBE99; }

.fields__error{
  margin:0; padding-left:.9rem;
  color:#D2563F; font-weight:700; font-size:.85rem;
}

/* ── Nook button ── */
.btn-nook{
  --btn:var(--grass); --btn-d:var(--grass-d);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--btn); color:#fff;
  font-family:var(--chunk); font-weight:800; font-size:1.1rem;
  letter-spacing:.01em; text-decoration:none;
  padding:.65rem 1.6rem .7rem;
  border:none; border-radius:999px;
  box-shadow:0 4px 0 var(--btn-d), 0 8px 18px rgba(50,60,20,.22);
  cursor:pointer;
  transition:transform .14s var(--pop), box-shadow .14s var(--ease), filter .2s;
}
.btn-nook svg{ width:1.7em; height:auto; fill:currentColor; }
.btn-nook:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 6px 0 var(--btn-d), 0 12px 22px rgba(50,60,20,.26); }
.btn-nook:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--btn-d); }
.btn-nook--sm{ font-size:.95rem; padding:.5rem 1.25rem .55rem; }
.btn-nook--ghost{
  background:#FFFCF2; color:var(--bark);
  box-shadow:0 4px 0 #DCCDAA, 0 8px 18px rgba(80,60,25,.14);
}
.btn-nook--ghost:hover{ box-shadow:0 6px 0 #DCCDAA, 0 12px 22px rgba(80,60,25,.18); }

.skip{
  position:absolute; right:1rem; bottom:1rem; z-index:3;
  background:rgba(30,22,10,.42); color:#FFF6E2;
  border:none; border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  padding:.4rem 1rem; cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .2s, transform .2s;
}
.skip:hover{ background:rgba(30,22,10,.68); transform:translateY(-1px); }

/* ═══════════════════════════════════════════════════════
   5. FLIGHT INFORMATION
   ═══════════════════════════════════════════════════════ */
.stage--flight{
  background:var(--fi-bg); color:#fff;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(2rem,9vh,5rem) var(--gutter) 0;
  overflow:hidden;
}

.flight__title{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 clamp(1.5rem,5vh,3rem);
  font-family:var(--round); font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.9rem); letter-spacing:.01em;
}
.flight__title svg{ width:1.5em; height:auto; fill:#fff; }

.flight__row{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,1.2fr);
  gap:clamp(.4rem,1.2vw,1rem);
  width:100%; max-width:72rem;
}
.flight__pip{
  position:absolute; left:-1.9rem; top:50%; transform:translateY(-50%);
  width:1rem; height:1rem; border-radius:50%;
  background:var(--fi-dal);
  box-shadow:0 0 14px rgba(31,160,232,.7);
}
@media (max-width:820px){ .flight__pip{ display:none; } }

.fcol{ min-width:0; }
.fcol__label{
  display:block; margin:0 0 .5rem .35rem;
  color:var(--fi-label); font-weight:500;
  font-size:clamp(.8rem,1.4vw,1.2rem);
}
.fbox{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:clamp(4.6rem,9.5vh,6.6rem);
  background:var(--fi-box); border:1px solid var(--fi-edge);
  padding:.4rem .9rem; overflow:hidden;
}
/* the little tick marks on the inner edges */
.fbox__tick{ position:absolute; top:50%; width:1px; height:1.6rem; background:#6E6E6E; transform:translateY(-50%); }
.fbox__tick--l{ left:.5rem; box-shadow:4px 0 0 -.5px #6E6E6E; }
.fbox__tick--r{ right:.5rem; box-shadow:-4px 0 0 -.5px #6E6E6E; }

.fbox__sub{
  font-size:clamp(.72rem,1.35vw,1.15rem); font-weight:400; color:#EDEDED;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fbox__main{
  font-size:clamp(1.05rem,2.2vw,1.85rem); font-weight:700; color:#fff;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fbox__main--solo{ font-size:clamp(1.15rem,2.4vw,2rem); }

.fbox--dal{
  background:var(--fi-dal); border-color:var(--fi-dal);
  flex-direction:row; gap:.15rem; color:#fff;
}
.dal__mark{ width:clamp(2rem,3.6vw,3.1rem); height:auto; color:#fff; flex:none; }
.dal__word{
  font-family:var(--chunk); font-weight:800;
  font-size:clamp(1.6rem,3.8vw,3.2rem); line-height:1;
  transform:skewX(-9deg); letter-spacing:.02em;
}

/* ── the scene below ── */
.flight__scene{
  position:absolute; left:0; right:0; bottom:0;
  height:clamp(12rem,46%,32rem);
}
.island-silhouette{ position:absolute; inset:auto 0 0 0; height:70%; z-index:1; }
.island-silhouette svg{ width:100%; height:100%; display:block; fill:var(--fi-water); }

.palm{
  position:absolute; bottom:0; z-index:2;
  height:clamp(11rem,40vh,22rem); width:auto;
  fill:var(--fi-water);
}
.palm--l{ left:-2.5rem; }
.palm--r{ right:-2.5rem; transform:scaleX(-1); }

.clouds{ position:absolute; inset:0; z-index:0; }
.cloud{ position:absolute; background:var(--fi-water2); border-radius:999px; opacity:.85; }
.cloud.c1{ left:5%;  top:26%; width:7rem;  height:2.1rem; }
.cloud.c2{ left:1%;  top:50%; width:4.5rem;height:1.6rem; }
.cloud.c3{ right:6%; top:20%; width:8rem;  height:2.3rem; }
.cloud.c4{ right:2%; top:46%; width:5rem;  height:1.7rem; }
@media (max-width:700px){ .clouds{ display:none; } }

.track{
  position:absolute; left:50%; top:30%; transform:translate(-50%,-50%);
  z-index:3;
  display:flex; align-items:center; gap:clamp(.3rem,1vw,.8rem);
  list-style:none; margin:0; padding:0;
}
.node{
  display:grid; place-items:center;
  width:clamp(3.2rem,7vw,5.6rem); aspect-ratio:1; border-radius:50%;
  flex:none;
}
.node--hop{ background:var(--fi-node); }
.node--hop svg{ width:64%; height:auto; fill:var(--fi-plane); transition:fill .35s; }
.node--goal{
  background:var(--fi-goal); color:var(--fi-goaltx);
  font-weight:700; font-size:clamp(.6rem,1.15vw,.95rem); line-height:1.15; text-align:center;
  transition:background .4s, color .4s, box-shadow .4s;
}
.arrow{
  width:0; height:0; flex:none;
  border:clamp(.3rem,.7vw,.55rem) solid transparent;
  border-right-color:#8A8A8A;
  margin-right:.1rem;
}

/* the glowing plane */
.node--hop.is-lit{
  background:var(--sunny);
  box-shadow:0 0 clamp(1rem,3vw,2.4rem) clamp(.2rem,.8vw,.7rem) rgba(255,216,77,.55);
  animation:pulse 1.1s var(--ease) infinite;
}
.node--hop.is-lit svg{ fill:#FFFBE6; }
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }

.node--goal.is-lit{
  background:#2FBF6B; color:#06301A;
  box-shadow:0 0 2rem .6rem rgba(47,191,107,.5);
}

.flight__hint{
  margin:1.1rem 0 0; text-align:center;
  color:rgba(255,255,255,.45); font-size:.82rem; letter-spacing:.14em; font-weight:500;
}

@media (max-width:820px){
  .flight__row{ grid-template-columns:1fr; gap:.9rem; max-width:26rem; }
  .fbox--dal{ height:5rem; }
}

/* ═══════════════════════════════════════════════════════
   6. THE ISLAND (the site itself)
   ═══════════════════════════════════════════════════════ */
.stage--site{ background:var(--sand); color:var(--bark); }

.scroller{
  height:100%; overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{ width:0; }

/* ── masthead ── */
.masthead{
  position:absolute; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(.7rem,2vh,1.1rem) var(--gutter);
}
.brand{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--chunk); font-weight:800; font-size:1.15rem; color:var(--leaf);
}
.brand svg{ width:1.5em; height:auto; fill:var(--grass); }

.nav ul{
  display:flex; gap:.35rem; list-style:none; margin:0; padding:.3rem;
  background:rgba(255,252,242,.86); border-radius:999px;
  box-shadow:0 3px 0 rgba(190,170,130,.5), 0 8px 20px rgba(90,70,35,.14);
  backdrop-filter:blur(6px);
}
.nav a{
  display:block; text-decoration:none; white-space:nowrap;
  font-family:var(--chunk); font-weight:700; font-size:.88rem;
  color:var(--bark-2); padding:.4rem 1rem .45rem; border-radius:999px;
  transition:background .25s, color .25s, transform .25s var(--pop);
}
.nav a:hover{ color:var(--bark); background:rgba(126,193,63,.16); }
.nav a.is-active{ background:var(--grass); color:#fff; box-shadow:0 3px 0 var(--grass-d); transform:translateY(-1px); }

.passport-chip{
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.15;
  background:#FFFCF2; border:3px solid #E7D9B8; border-radius:1rem;
  padding:.3rem .8rem; cursor:pointer;
  box-shadow:0 3px 0 rgba(190,170,130,.5);
  transition:transform .2s var(--pop), border-color .2s;
}
.passport-chip:hover{ transform:translateY(-2px); border-color:var(--grass); }
.passport-chip__name{ font-family:var(--chunk); font-weight:800; font-size:.9rem; color:var(--bark); }
.passport-chip__isle{ font-size:.68rem; font-weight:700; color:var(--bark-3); }
@media (max-width:900px){ .passport-chip, .brand span{ display:none; } }
@media (max-width:620px){ .nav a{ font-size:.78rem; padding:.35rem .7rem .4rem; } }

/* ── dot rail ── */
.dots{ position:absolute; right:calc(var(--gutter) / 2); top:50%; transform:translateY(-50%); z-index:30; }
.dots ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.dots a{ display:grid; place-items:center; width:1.3rem; height:1.3rem; }
.dots a span{
  width:.6rem; height:.6rem; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px rgba(140,120,80,.35);
  transition:all .3s var(--pop);
}
.dots a:hover span{ transform:scale(1.25); }
.dots a.is-active span{ background:var(--grass); box-shadow:0 0 0 3px rgba(126,193,63,.35); transform:scale(1.35); }
@media (max-width:900px){ .dots{ display:none; } }

/* ── panels ── */
.panel{
  position:relative;
  min-height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center;
  padding:clamp(5rem,12vh,7rem) var(--gutter) clamp(3rem,8vh,5rem);
  overflow:hidden;
}
.panel__inner{ width:100%; max-width:64rem; margin-inline:auto; }

.panel--hello{ background:linear-gradient(#9FE0F7 0%, #CFF0FB 55%, #EAF7D8 100%); }
.panel--about{ background:var(--sand); }
.panel--resume{ background:var(--sand-2); }
.panel--projects{ background:linear-gradient(var(--sand) 0%, #EDE0BE 100%); }

.panel__title{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin:0 0 1.75rem;
  font-family:var(--chunk); font-weight:800;
  font-size:clamp(1.8rem,4.5vw,3rem); color:var(--leaf);
}
.panel__num{
  display:grid; place-items:center;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--grass); color:#fff;
  font-size:.9rem; box-shadow:0 3px 0 var(--grass-d);
}
.panel__title-btn{ margin-left:auto; }
.panel__lede{ margin:-1rem 0 2rem; color:var(--bark-2); font-weight:600; }
.kicker{
  margin:0 0 .6rem;
  font-weight:800; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grass-dd);
}

/* ── hello ── */
.hello__inner{ position:relative; z-index:2; text-align:center; }
.hello__hi{
  margin:0 0 1rem;
  font-family:var(--chunk); font-weight:800;
  font-size:clamp(2.6rem,9vw,5.5rem); line-height:1.05; color:#3E7A1E;
  text-shadow:0 3px 0 rgba(255,255,255,.65);
}
.hello__hi span{ color:var(--coral); }
.hello__sub{
  max-width:34rem; margin:0 auto 2rem;
  font-size:clamp(1rem,1.9vw,1.2rem); font-weight:600; color:#4C6B3A;
}
.hello__sub b{ color:var(--leaf); }
.hello__cta{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

.sky{ position:absolute; inset:0; z-index:0; }
.cloud-sky{
  position:absolute; background:rgba(255,255,255,.92); border-radius:999px;
  animation:drift 34s linear infinite;
}
.cloud-sky::before, .cloud-sky::after{
  content:""; position:absolute; background:inherit; border-radius:50%;
}
.cloud-sky::before{ width:58%; aspect-ratio:1; left:10%;  bottom:45%; }
.cloud-sky::after { width:40%; aspect-ratio:1; right:12%; bottom:38%; }
.cloud-sky.s1{ top:14%; left:-12%; width:8rem; height:2.6rem; }
.cloud-sky.s2{ top:26%; left:-25%; width:5.5rem; height:2rem; animation-duration:46s; animation-delay:-8s; }
.cloud-sky.s3{ top:8%;  left:-40%; width:10rem; height:3rem; animation-duration:58s; animation-delay:-20s; }
@keyframes drift{ to{ transform:translateX(150vw) } }

.ground{ position:absolute; inset:auto 0 0 0; height:34%; z-index:1; }
.ground::before{
  content:""; position:absolute; inset:auto 0 0 0; height:62%;
  background:var(--grass);
  border-radius:50% 50% 0 0 / 22% 22% 0 0;
  box-shadow:inset 0 6px 0 rgba(255,255,255,.22);
}
.palm--hello-l, .palm--hello-r{ fill:var(--grass-dd); opacity:.55; bottom:8%; width:clamp(5rem,11vw,9rem); }
.palm--hello-l{ left:3%; }
.palm--hello-r{ right:3%; transform:scaleX(-1); }

.scroll-cue{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  text-decoration:none; color:#2F5E18;
  font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .4s;
}
.scroll-cue i{
  width:0; height:0; border:.5rem solid transparent; border-top-color:#2F5E18;
  animation:bob 1.2s infinite var(--ease);
}
.scroll-cue.is-hidden{ opacity:0; pointer-events:none; }

/* ── about ── */
.about__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:820px){ .about__grid{ grid-template-columns:1fr; } }

.passport{
  background:#FFFCF2; border:4px solid #E7D9B8; border-radius:1.5rem;
  box-shadow:0 6px 0 rgba(190,170,130,.55), 0 14px 30px rgba(90,70,35,.14);
  overflow:hidden;
}
.passport__head{
  display:flex; align-items:center; gap:.5rem;
  background:var(--grass); color:#fff;
  font-family:var(--chunk); font-weight:800; font-size:1.1rem;
  padding:.5rem 1rem .55rem;
}
.passport__head svg{ width:1.3em; height:auto; fill:#fff; }
.passport__body{ display:flex; gap:1rem; padding:1rem; }
.passport__photo{
  flex:none; width:clamp(5.5rem,30%,9rem); aspect-ratio:1; border-radius:.9rem;
  background:repeating-linear-gradient(45deg,#EFE4C6,#EFE4C6 8px,#E8DBB8 8px,#E8DBB8 16px);
  border:3px solid #E0D0AA;
  display:grid; place-items:center;
  font-family:var(--chunk); font-weight:800; font-size:1.4rem; color:var(--bark-3);
}
.passport__data{ margin:0; display:grid; gap:.3rem; align-content:start; min-width:0; }
.passport__data > div{ display:grid; grid-template-columns:5.2rem 1fr; gap:.4rem; }
.passport__data dt{ font-size:.72rem; font-weight:700; color:var(--bark-3); padding-top:.15rem; }
.passport__data dd{ margin:0; font-size:.9rem; font-weight:700; color:var(--bark); }
.passport__foot{
  border-top:3px dashed #E7D9B8; padding:.7rem 1rem;
  font-size:.85rem; font-weight:600; font-style:italic; color:var(--bark-2);
}

.about__copy p{ margin:0 0 1rem; font-weight:500; color:#61513C; max-width:36rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; margin:1.25rem 0 0; padding:0; }
.chips li{
  background:#FFFCF2; border:3px solid #E7D9B8; border-radius:999px;
  padding:.25rem .85rem; font-size:.8rem; font-weight:700; color:var(--bark-2);
  box-shadow:0 3px 0 rgba(190,170,130,.4);
}

/* ── resume ── */
.achievements{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.ach{
  display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; align-items:start;
  background:#FFFCF2; border:4px solid #E7D9B8; border-radius:1.25rem;
  padding:.9rem 1.2rem;
  box-shadow:0 5px 0 rgba(190,170,130,.5);
  transition:transform .25s var(--pop), box-shadow .25s;
}
.ach:hover{ transform:translateY(-3px); box-shadow:0 8px 0 rgba(190,170,130,.5); }
.ach__miles{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--leaf); color:#fff; border-radius:999px;
  padding:.25rem .8rem; font-size:.8rem; font-weight:800; white-space:nowrap;
}
.ach__miles svg{ width:1em; height:auto; fill:#B7E77E; }
.ach__body h3{ margin:0 0 .2rem; font-family:var(--chunk); font-weight:800; font-size:1.05rem; color:var(--bark); }
.ach__body h3 em{ font-style:normal; font-weight:700; color:var(--bark-3); }
.ach__body p{ margin:0; font-size:.9rem; font-weight:500; color:#6B5B44; }
@media (max-width:700px){ .ach{ grid-template-columns:1fr; gap:.5rem; } }

/* ── projects ── */
.recipes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:760px){ .recipes{ grid-template-columns:1fr; } }

.recipe{
  position:relative; display:flex; flex-direction:column; height:100%; text-decoration:none;
  background:#FFFCF2; border:4px solid #E7D9B8; border-radius:1.25rem;
  padding:1.1rem 1.25rem 1.2rem;
  box-shadow:0 5px 0 rgba(190,170,130,.5);
  transition:transform .25s var(--pop), box-shadow .25s, border-color .25s;
}
/* only cards with a link lift on hover */
.recipe:has(.recipe__link):hover,
.recipe:has(.recipe__link:focus-visible){ transform:translateY(-4px) rotate(-.5deg); border-color:var(--grass); box-shadow:0 9px 0 var(--grass-d); }
/* the title link stretches over the whole card, so clicking anywhere opens it */
.recipe__link{ color:inherit; text-decoration:none; outline:none; }
.recipe__link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.recipe__foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
/* code link sits above the stretched link so it gets its own clicks */
.recipe__code{
  position:relative; z-index:1; flex:none;
  font-size:.75rem; font-weight:800; color:var(--leaf); text-decoration:none;
  padding:.2rem .55rem; border-radius:.6rem; background:#F1E6C6;
}
.recipe__code:hover, .recipe__code:focus-visible{ background:var(--grass); color:#fff; }
.recipe__icon{
  display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:.8rem;
  background:#F1E6C6; font-size:1.3rem; margin-bottom:.6rem;
}
.recipe h3{ margin:0 0 .3rem; font-family:var(--chunk); font-weight:800; font-size:1.25rem; color:var(--leaf); }
.recipe p{ margin:0 0 .7rem; font-size:.9rem; font-weight:500; color:#6B5B44; }
.recipe__mats{ font-size:.75rem; font-weight:800; letter-spacing:.04em; color:var(--bark-3); }

.colophon{
  margin-top:1.75rem; padding-top:1.1rem; border-top:3px dashed #DCC99F;
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem;
  font-size:.88rem; font-weight:600; color:var(--bark-2);
}
.colophon p{ margin:0; }
.colophon a{ color:var(--leaf); font-weight:800; }
.colophon__meta{ font-size:.75rem; color:var(--bark-3); }

/* ── reveal ── */
[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--pop);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ── short screens ── */
@media (max-height:620px){
  .panel{ min-height:auto; padding-block:5.5rem 3rem; }
  .scroller{ scroll-snap-type:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .scroller{ scroll-behavior:auto; scroll-snap-type:none; }
  [data-reveal]{ opacity:1; transform:none; }
}