:root{color-scheme:dark;--cream:#fbf0dc;--ivory:#fff8ee;--taupe:#6b5946;--line:rgba(255,249,232,.36)}
*{box-sizing:border-box}html{height:100%;background:#263849}
body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ivory)}
a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}
[hidden]{display:none!important}.backdrop{position:fixed;inset:0;overflow:hidden;background:#455e70;z-index:-1}
.gradient-bg{position:absolute;inset:0;background:#204b4e url("/assets/hadley-poster.jpg") center center / cover no-repeat;transform:scale(1.02)}
/* Keep video visible from first paint: WebKit may block autoplay on invisible video.
   If the OS forbids autoplay, switch to an animated WebP of the same footage. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none}
.hero-video.fallback-hidden{opacity:0}
.motion-fallback .gradient-bg{background-image:url("/assets/hadley-animated-fallback.webp")}
.scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,22,32,.35),rgba(8,12,24,.12) 34%,rgba(12,17,24,.23) 55%,rgba(11,17,20,.58) 100%)}
.scrim-heavy{background:linear-gradient(to bottom,rgba(20,25,34,.55),rgba(13,20,32,.52) 48%,rgba(10,15,25,.78) 100%)}
.grain{position:absolute;inset:0;opacity:.12;pointer-events:none;background-image:radial-gradient(#fff 0.6px,transparent .8px);background-size:7px 7px}
.page-shell{position:relative;min-height:100svh;min-height:100dvh;max-width:620px;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(38px,6vh,65px) 24px max(24px,env(safe-area-inset-bottom))}
.brand{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}.star{font-size:32px;color:var(--cream);font-weight:300;line-height:1}
.brand h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(43px,9.2vw,69px);font-weight:400;letter-spacing:.17em;margin:10px 0 0 0;line-height:1.07;text-transform:uppercase;overflow-wrap:anywhere}
.brand-sub{font-size:10px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em;opacity:.98}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f3e9d4;line-height:1.7}
.brand .eyebrow{margin-top:19px}
.bottom-section{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:21px;width:100%;padding-top:60px;padding-bottom:16px}
.hero-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,6.1vw,37px);font-weight:400;margin:0;text-shadow:0 2px 22px rgba(0,0,0,.22)}
.cream-button{display:flex;justify-content:center;align-items:center;background:linear-gradient(110deg,#fff9e9,#f3e3c6);color:#594a38;width:min(100%,430px);min-height:76px;padding:16px 28px;border:1px solid rgba(255,255,255,.65);border-radius:60px;text-decoration:none;font-size:17px;font-weight:700;box-shadow:0 10px 38px rgba(0,0,0,.12);cursor:pointer;transition:transform .15s,filter .15s}
.cream-button:hover{filter:brightness(1.045)}.cream-button:active{transform:scale(.985)}
.small-copy{font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin:0;color:rgba(255,250,240,.93);line-height:1.75}
.footer-poem{font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,5.7vw,32px);line-height:1.25;max-width:305px;margin:22px 0 0;text-wrap:balance}.bottom-mark{font-size:28px;margin:0}/* Keep browser-native video controls invisible: video is decorative only. */
.hero-video::-webkit-media-controls,.hero-video::-webkit-media-controls-panel,.hero-video::-webkit-media-controls-start-playback-button{display:none!important}
.handoff-fallback{background:rgba(13,23,33,.72);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.23);border-radius:16px;padding:17px 18px;font-size:13px;line-height:1.6;margin:2px 0 0;max-width:410px}.handoff-fallback a{text-decoration:underline;text-underline-offset:3px}
.choices-shell{justify-content:space-between;gap:46px}.choices-shell .brand h1{font-size:clamp(34px,8vw,57px)}
.choice-content{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:17px}
.choice-heading{font-family:Georgia,'Times New Roman',serif;font-size:clamp(35px,8vw,52px);line-height:1.08;font-weight:400;margin:0;text-wrap:balance}
.choice-intro{font-size:14px;color:#faeedb;margin:0 0 12px}/* V4.1: Compact destination cards with full, uncropped 4:5 photos. */
.destinations{display:flex;flex-direction:column;gap:13px;width:100%}
.destination-button{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(255,255,255,.40);border-radius:18px;background:rgba(13,31,35,.84);color:#fff8ed;text-decoration:none;text-align:left;display:flex;align-items:center;justify-content:flex-start;gap:15px;padding:9px 14px 9px 9px;box-shadow:0 8px 19px rgba(0,0,0,.18);transition:transform .15s,filter .15s}
.destination-button:hover{filter:brightness(1.06)}.destination-button:active{transform:scale(.985)}
/* Original photos are 4:5. Keep their full image visible in a thumbnail,
   instead of cropping them to cover an extra-wide horizontal card. */
.destination-photo{position:relative;inset:auto;display:block;flex:0 0 clamp(86px,24vw,106px);width:clamp(86px,24vw,106px);height:auto;aspect-ratio:4/5;object-fit:contain;object-position:center;border-radius:12px;background:rgba(0,0,0,.15);z-index:0}
.destination-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(22,38,40,.20),rgba(8,17,24,.46))}
.destination-copy{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;flex:1;text-shadow:0 1px 8px rgba(0,0,0,.30)}
.destination-kicker{font-size:10px;letter-spacing:.17em;line-height:1.3;font-weight:700}
.destination-label{font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,4.8vw,24px);line-height:1.19;font-weight:400;overflow-wrap:normal}
.destination-arrow{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid rgba(255,255,255,.65);border-radius:999px;font-size:20px;font-weight:400;line-height:1;background:rgba(7,22,28,.27)}
.destination-button:focus-visible{outline:3px solid #fff8ee;outline-offset:3px}
.destination-button.is-unconfigured{opacity:.58;cursor:not-allowed}
.setup-warning{font-size:12px;line-height:1.6;color:#fff1df;background:rgba(15,19,27,.8);border-radius:12px;padding:12px;margin:0}
.inapp-notice{width:100%;border-radius:18px;padding:18px;background:rgba(16,25,35,.81);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(9px)}
.inapp-notice p{line-height:1.65;font-size:13px;margin:0 0 18px}.inapp-notice .cream-button{font-size:15px;min-height:62px;padding:10px 15px}.inapp-notice .small-copy{margin:15px 0;text-transform:none;letter-spacing:0;font-size:12px}
.text-button{background:transparent;border:0;color:#fff5e6;text-decoration:underline;text-underline-offset:4px;padding:10px;cursor:pointer;font-size:12px}
.choices-footer{font-size:12px;letter-spacing:.03em;color:#fff0dd;padding-bottom:10px}.choices-footer a{text-underline-offset:4px}
@media (min-width:700px){.page-shell{max-width:700px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* V4: show more of the background video and ensure choices fit compact phones. */
body[data-page="links"] .scrim-heavy{background:linear-gradient(to bottom,rgba(13,32,33,.66),rgba(8,34,34,.40) 40%,rgba(8,27,31,.71) 100%)}
body[data-page="links"] .choices-shell{gap:24px}
body[data-page="links"] .choice-content{gap:13px}
body[data-page="links"] .choice-intro{margin:0 0 4px}
@media (max-height:730px){body[data-page="links"] .page-shell{padding-top:26px}body[data-page="links"] .brand{gap:7px}body[data-page="links"] .choice-heading{font-size:clamp(31px,7vw,42px)}body[data-page="links"] .destination-button{gap:11px;padding:7px 10px 7px 7px}body[data-page="links"] .destination-photo{flex-basis:86px;width:86px}body[data-page="links"] .destination-label{font-size:18px}}

/* V4.2: slow decorative falling stars on age gate only, never on link choices.
   CSS-only: no external requests, scripts, or effects on navigation/hand-off. */
body[data-page="gate"] .falling-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
body[data-page="gate"] .falling-star{position:absolute;left:var(--star-x);top:-28px;
  font-family:Georgia,serif;font-size:var(--star-size);line-height:1;color:#fff3d9;
  opacity:0;text-shadow:0 0 9px rgba(255,238,200,.45);pointer-events:none;
  animation:hadley-star-fall var(--star-duration) linear var(--star-delay) infinite;
  will-change:transform,opacity}
@keyframes hadley-star-fall{
  0%{transform:translate3d(0,-15px,0) rotate(-16deg);opacity:0}
  8%{opacity:.65}
  50%{opacity:.50}
  92%{opacity:.60}
  100%{transform:translate3d(var(--star-drift),calc(100dvh + 65px),0) rotate(25deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){body[data-page="gate"] .falling-stars{display:none}}


/* V4.5 — mobile-first readable hero and unobstructed model.
   Presentation only: do not alter browser handoff, destinations, Worker,
   animation mechanics, video source or autoplay code. */
@media (max-width:699px){
  /* Magnify toward the subject; poster/animated fallback keep exactly
     the same framing when video autoplay is unavailable. */
  body[data-page="gate"] .hero-video,
  body[data-page="links"] .hero-video{transform:scale(1.35);transform-origin:55% 66%;object-position:55% center}
  body[data-page="gate"] .gradient-bg,
  body[data-page="links"] .gradient-bg{transform:scale(1.35);transform-origin:55% 66%;background-position:55% center}

  /* Darker only where copy sits, not over the subject's face. */
  body[data-page="gate"] .scrim{background:linear-gradient(to bottom,
    rgba(5,12,21,.70) 0%,rgba(5,12,21,.44) 28%,rgba(5,12,21,.10) 41%,
    rgba(6,15,23,.10) 71%,rgba(5,12,20,.59) 100%)}
  body[data-page="links"] .scrim-heavy{background:linear-gradient(to bottom,
    rgba(5,12,21,.72) 0%,rgba(5,12,21,.38) 29%,rgba(5,12,21,.07) 47%,
    rgba(5,12,21,.09) 67%,rgba(5,12,21,.58) 100%)}
  body[data-page="gate"] .brand h1,
  body[data-page="links"] .brand h1,
  body[data-page="gate"] .hero-title,
  body[data-page="links"] .choice-heading{color:#fffdf6;font-weight:700;text-shadow:0 2px 3px rgba(0,0,0,.83),0 4px 17px rgba(0,0,0,.75)}
  body[data-page="gate"] .brand-sub,
  body[data-page="gate"] .eyebrow,
  body[data-page="gate"] .small-copy,
  body[data-page="links"] .brand-sub,
  body[data-page="links"] .eyebrow,
  body[data-page="links"] .choice-intro,
  body[data-page="links"] .choices-footer{color:#fffef7;font-weight:800;text-shadow:0 2px 3px rgba(0,0,0,.85),0 3px 12px rgba(0,0,0,.78)}

  /* Gate: title above the subject, clear central video, single CTA at bottom. */
  body[data-page="gate"] .page-shell{padding:clamp(28px,5dvh,43px) 22px max(23px,env(safe-area-inset-bottom))}
  body[data-page="gate"] .brand{gap:9px}
  body[data-page="gate"] .brand h1{font-size:clamp(40px,10vw,55px);letter-spacing:.14em;margin:3px 0 0}
  body[data-page="gate"] .brand .eyebrow{margin-top:12px;line-height:1.45}
  body[data-page="gate"] .bottom-section{margin-top:auto;gap:9px;padding:0 0 1px;width:100%}
  body[data-page="gate"] .hero-title{position:absolute;left:18px;right:18px;top:clamp(215px,31dvh,295px);font-size:clamp(25px,6.6vw,32px);line-height:1.13;margin:0}
  body[data-page="gate"] .cream-button{min-height:64px;width:min(100%,348px);padding:13px 16px;font-size:16px;box-shadow:0 6px 25px rgba(0,0,0,.36)}
  body[data-page="gate"] .small-copy{font-size:10px}
  /* This decorative copy took up 110px below the CTA and pushed it over the subject. */
  body[data-page="gate"] .footer-poem,
  body[data-page="gate"] .bottom-mark{display:none}

  /* Links: center the full-image cards on screen; covering the video is fine here. */
  body[data-page="links"] .page-shell{padding:clamp(25px,4dvh,36px) 19px max(16px,env(safe-area-inset-bottom))}
  body[data-page="links"] .choices-shell{gap:0;justify-content:initial}
  body[data-page="links"] .brand{gap:8px}
  body[data-page="links"] .brand h1{font-size:clamp(37px,9.4vw,51px);letter-spacing:.14em;margin:1px 0 0}
  body[data-page="links"] .choice-content{flex:1;gap:8px;width:100%;padding-top:0;justify-content:center}
  body[data-page="links"] .choice-content>.eyebrow{margin:0;font-size:10px}
  body[data-page="links"] .choice-heading{font-size:clamp(29px,7.5vw,40px);line-height:1.05}
  body[data-page="links"] .choice-intro{margin:0;font-size:13px;line-height:1.25}
  body[data-page="links"] .destinations{margin-top:12px;gap:10px}
  body[data-page="links"] .destination-button{min-height:109px;padding:7px 10px 7px 7px;gap:11px}
  body[data-page="links"] .destination-photo{flex:0 0 76px;width:76px;aspect-ratio:4/5;object-fit:contain}
  body[data-page="links"] .destination-label{font-size:clamp(17px,4.75vw,21px);font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.7)}
  body[data-page="links"] .destination-kicker{font-size:9px;font-weight:800}
  body[data-page="links"] .destination-arrow{width:28px;height:28px;font-size:17px}
  body[data-page="links"] .choices-footer{margin-top:13px;padding-bottom:0;font-size:11px}
}
@media (max-width:699px) and (max-height:740px){
  body[data-page="gate"] .page-shell{padding-top:22px;padding-bottom:max(13px,env(safe-area-inset-bottom))}
  body[data-page="gate"] .brand{gap:6px}
  body[data-page="gate"] .brand h1{font-size:40px}
  body[data-page="gate"] .brand .eyebrow{margin-top:7px}
  body[data-page="gate"] .hero-title{top:clamp(195px,30dvh,225px);font-size:25px}
  body[data-page="gate"] .cream-button{min-height:57px}
  body[data-page="links"] .page-shell{padding-top:20px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  body[data-page="links"] .choice-content{padding-top:8px;gap:5px}
  body[data-page="links"] .choice-heading{font-size:27px}
  body[data-page="links"] .destination-button{min-height:90px;padding:6px;gap:9px}
  body[data-page="links"] .destination-photo{flex-basis:64px;width:64px}
  body[data-page="links"] .destination-label{font-size:17px}
  body[data-page="links"] .choices-footer{margin-top:8px}
}