@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/fraunces-soft.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(fonts/fraunces-italic.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/karla-400.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/karla-500.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/karla-700.woff2) format("woff2")}

:root{
  /* surfaces */
  --paper:#FBF5EA; --sand-2:#F5EBDA; --surface:#FFFDF8; --line:#E6D7BF;
  /* ink */
  --ink:#0B3441; --ink-2:#3F6873; --ink-3:#7B9CA4;
  --cream:#FFF7E9; --muted:#A6C6CD;
  /* the sea */
  --ocean-9:#052631; --ocean-8:#083545; --ocean-7:#0C4556;
  /* people, and the accents they lend the page */
  --marissa:#FF5D73; --colleen:#FFA92E; --chris:#7FB2D9; --andrew:#1FA9D6;
  --nicole:#A77BE0; --kim:#2FC9A0; --steven:#F2C94C; --sarah:#FF8360;
  --zach:#35C4C4; --mikejan:#8FBF6A;
  --scrim:8,42,52;
  /* motion + depth */
  --ease:cubic-bezier(.22,.9,.28,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 2px rgba(11,52,65,.06),0 8px 22px rgba(11,52,65,.08);
  --sh-2:0 2px 6px rgba(11,52,65,.08),0 22px 50px rgba(11,52,65,.16);
  --r-md:14px; --r-lg:20px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Karla","Helvetica Neue",Arial,sans-serif;
  --signimg:url("img/sign-photo.jpg");
  --yesimg:url("img/parents.jpg");
  --signcover:url("img/build-6.jpg");
  --bottleimg:url("img/bottle-1.jpg");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ocean-9)}
body{background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{font-optical-sizing:auto}
::selection{background:rgba(255,93,115,.22)}
img{max-width:100%}

/* ------------------------------------------------------------------ loader */
#loader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;color:var(--cream);
  background:radial-gradient(90% 70% at 50% 40%,#0C4556 0%,#052631 70%);
  transition:opacity .7s var(--ease-out),visibility 0s linear .7s}
#loader.out{opacity:0;visibility:hidden}
.ld-mark{width:64px;height:72px}
.ld-mark svg{width:100%;height:100%;overflow:visible}
.ld-mark .band{stroke-dasharray:190;stroke-dashoffset:190;animation:ldband 1.3s var(--ease-out) forwards}
.ld-mark .gem{opacity:0;transform-box:fill-box;transform-origin:50% 100%;
  animation:ldgem .7s var(--ease-out) .55s forwards}
@keyframes ldband{to{stroke-dashoffset:0}}
@keyframes ldgem{from{opacity:0;transform:translateY(6px) scale(.8)}to{opacity:1;transform:none}}
.ld-word{font-family:var(--display);font-variation-settings:"SOFT" 80;font-weight:500;
  font-size:19px;letter-spacing:.02em;opacity:0;animation:fadein .6s ease .35s forwards}
.ld-bar{width:120px;height:2px;border-radius:2px;background:rgba(255,247,233,.16);overflow:hidden}
.ld-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--kim),var(--colleen),var(--marissa));
  transition:transform .35s var(--ease)}
@keyframes fadein{to{opacity:1}}

/* ------------------------------------------------------------------- intro */
.intro{position:relative;height:340vh;background:var(--ocean-8)}
.intro-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#F2C9A6}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.intro-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 38%,transparent 42%,rgba(5,38,49,.34) 100%)}
.intro-fall{position:absolute;inset:0;display:none;
  background:linear-gradient(180deg,#5E8FB4 0%,#F4B593 46%,#FFD9A6 58%,#2E93A8 58.4%,#1B6E85 100%)}
.beats{position:absolute;inset:0;pointer-events:none}
.beat{position:absolute;left:0;right:0;bottom:15vh;padding:0 24px;text-align:center;
  opacity:0;will-change:opacity,transform}
@media (min-width:900px){
  .beat{left:7vw;right:auto;bottom:15vh;text-align:left;padding:0}
  .beat p{margin:0;max-width:15ch}
}
.beat .eb{display:block;font:700 11.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,247,233,.86);margin-bottom:16px}
.beat p{margin:0 auto;max-width:17ch;font-family:var(--display);font-variation-settings:"SOFT" 60;
  font-weight:540;font-size:clamp(1.65rem,4.4vw,2.9rem);line-height:1.08;letter-spacing:-.02em;
  color:#FFF9EF;text-shadow:0 2px 28px rgba(5,38,49,.55),0 1px 2px rgba(5,38,49,.35)}
.titleblock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 22px 7vh;opacity:0;pointer-events:none;
  will-change:opacity,transform}
.titleblock.shown{pointer-events:auto}
.titleblock::before{content:"";position:absolute;left:50%;top:46%;width:min(760px,120vw);
  height:min(620px,95vh);transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(5,38,49,.52),rgba(5,38,49,0))}
.titleblock h1{margin:0 auto;max-width:14ch;font-family:var(--display);
  font-variation-settings:"SOFT" 70;font-weight:620;letter-spacing:-.028em;
  font-size:clamp(2.1rem,6.4vw,4.4rem);line-height:.98;color:#FFF9EF;
  text-shadow:0 2px 30px rgba(5,38,49,.5)}
.count{margin:clamp(18px,3vh,30px) auto 0}
.count .clabel{display:block;font:700 11px/1 var(--text);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,247,233,.82)}
.titleblock .tape{position:absolute;left:0;right:0;bottom:calc(74px + 3vh);margin:0}
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:10px;color:#FFF9EF;pointer-events:none;
  font:700 11px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(5,38,49,.5);transition:opacity .4s ease}
.cue i{display:block;width:1.5px;height:38px;background:rgba(255,249,239,.35);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:#FFF9EF;animation:cuedrop 1.8s var(--ease) infinite}
@keyframes cuedrop{to{top:100%}}

.intro.static,.intro.no3d{height:100vh;height:100svh}
.intro.no3d .intro-fall{display:block}
.intro.no3d #scene{display:none}
.intro.static .beats,.intro.no3d .beats,.intro.static .cue,.intro.no3d .cue{display:none}

/* --------------------------------------------------------- the shoreline */
.pinshore{position:absolute;left:0;right:0;bottom:-1px;height:74px;pointer-events:none;
  transform:translateY(100%);will-change:transform}
.pinshore svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro.static .pinshore,.intro.no3d .pinshore{transform:none}
main{position:relative;background:var(--paper)}

/* ------------------------------------------------------------- chapters */
.ch{position:relative;padding:clamp(70px,10vw,138px) 0}
.ch.alt{background:var(--sand-2)}
.ch.alt::before,.ch.alt::after{content:"";position:absolute;left:0;right:0;height:28px;
  background-repeat:repeat-x;background-size:220px 28px;pointer-events:none}
.ch.alt::before{top:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 28'%3E%3Cpath d='M0 0h220v10c-28 10-55 12-82 6S83 3 55 8 27 20 0 12z' fill='%23FBF5EA'/%3E%3C/svg%3E")}
.ch.alt::after{bottom:-1px;transform:scaleY(-1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 28'%3E%3Cpath d='M0 0h220v10c-28 10-55 12-82 6S83 3 55 8 27 20 0 12z' fill='%23FBF5EA'/%3E%3C/svg%3E")}
.chin{position:relative;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4.5vw,44px)}
.split{display:grid;gap:clamp(30px,5vw,84px)}
@media (min-width:980px){
  .split{grid-template-columns:minmax(290px,390px) minmax(0,1fr)}
  .split > .chead{position:sticky;top:104px;align-self:start}
}
.chead .eb{display:flex;align-items:center;gap:14px;margin:0;
  font:700 11.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#E2465E}
.chead .eb b{font-weight:700;color:var(--ink-3);letter-spacing:.12em}
.chead .eb::after{content:"";flex:0 0 36px;height:1.5px;background:currentColor;opacity:.45}
.chead h2{margin:16px 0 16px;font-family:var(--display);font-variation-settings:"SOFT" 70;
  font-weight:600;font-size:clamp(2.05rem,5vw,3.35rem);line-height:1.01;letter-spacing:-.028em}
.chead .lede{margin:0;max-width:40ch;color:var(--ink-2);font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.6}
.mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mask > span{display:block}

/* cards share one surface */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  border:1px solid rgba(230,215,191,.7)}

/* ------------------------------------------------------- 01 the cover story */
.setlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.setlist li{position:relative;padding:18px 20px 18px 58px;font-size:16px;line-height:1.55;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.setlist li .n{position:absolute;left:18px;top:17px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--text);
  color:var(--ocean-8);background:linear-gradient(135deg,#DDF6EE,#FFE9C9)}
@media (hover:hover){ .setlist li:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} }
.pull{margin:34px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--marissa);
  font-family:var(--display);font-style:italic;font-weight:420;
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.3;color:var(--ink);max-width:30ch}

/* ------------------------------------------------------ 03 people */
.whos{padding:20px 22px;margin-bottom:26px}
.whos h3{margin:0 0 12px;font:700 11px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.castmini{list-style:none;display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:0}
.castmini li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.castmini i{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3px rgba(11,52,65,.12)}
.jobbox{padding:clamp(20px,3vw,30px)}

/* ------------------------------------------------------ 04 the plan (dark) */
.ch.dark{background:linear-gradient(180deg,var(--ocean-8),var(--ocean-9));color:var(--cream)}
.ch.dark .chead .eb{color:#FF8FA0}
.ch.dark .chead .eb b{color:#8FB6BF}
.ch.dark .chead h2{color:#FFF9EF}
.ch.dark .chead .lede{color:#B9D4D9}
.stagewrap{margin-top:clamp(28px,4vw,44px)}
.stagewrap .player{height:84vh;height:84svh;min-height:540px;max-height:860px}
@media (min-width:760px){
  .stagewrap{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 clamp(20px,4.5vw,44px)}
  .stagewrap .player{border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
}

/* ------------------------------------------------------ 05 the hill */
.hillcard{overflow:hidden;padding:0}
.hillcard .hill{max-width:none;margin:0;border-radius:0;box-shadow:none}
.hillcard .hillctl{max-width:none;padding:16px 22px 0}
.hillcard .hillsay{max-width:none;margin:14px 22px 22px}

/* ------------------------------------------------------ 06 the sign */
.signgrid{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media (min-width:980px){ .signgrid{grid-template-columns:minmax(0,470px) minmax(0,1fr)} }
.signgrid .postwrap{margin:0 auto;width:100%;border-radius:var(--r-md);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.signgrid .postwrap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(60% 50% at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.22),transparent 70%);
  opacity:var(--go,0);transition:opacity .4s ease}
.signgrid .hint{margin-top:28px}
/* on one column the heading leads, then the poster, then the hidden-ring note */
@media (max-width:979px){
  .signtext{display:contents}
  .signgrid .chead{order:1} .signgrid .postwrap{order:2} .signgrid .hint{order:3;margin-top:0}
}

/* ------------------------------------------------------ 07 the day */
.dayband{position:relative;height:78vh;height:78svh;min-height:460px;max-height:820px;overflow:hidden;background:var(--ocean-9)}
.dayband img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;
  object-position:50% 46%;will-change:transform}
.dayband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,38,49,.05) 30%,rgba(5,38,49,.78) 100%)}
.daycap{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#FFF9EF;
  padding:0 clamp(20px,4.5vw,44px) clamp(34px,6vw,64px);max-width:1200px;margin:0 auto}
.daycap .eb{font:700 11.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#FFB3BF;margin:0}
.daycap h2{margin:14px 0 10px;font-family:var(--display);font-variation-settings:"SOFT" 70;font-weight:600;
  letter-spacing:-.03em;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.98}
.daycap p{margin:0;font-size:clamp(1rem,1.4vw,1.1rem);color:rgba(255,249,239,.86);max-width:44ch}
.metarow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.metarow span{padding:8px 13px;border-radius:30px;background:var(--surface);box-shadow:var(--sh-1);
  font-size:13.5px;font-weight:700;color:var(--ink-2)}
.metarow b{color:var(--ink)}
.steps{margin-top:0}

/* ------------------------------------------------------ chapter nav */
.chnav{position:fixed;right:22px;top:50%;z-index:60;transform:translateY(-50%) translateX(14px);
  display:none;flex-direction:column;gap:6px;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.chnav.on{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.chnav a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  height:22px;text-decoration:none;color:var(--ink-3)}
.chnav a i{display:block;width:8px;height:8px;border-radius:5px;background:currentColor;opacity:.45;
  transition:height .35s var(--ease),opacity .35s var(--ease),background .35s var(--ease)}
.chnav a span{font:700 10.5px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);
  opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s var(--ease);white-space:nowrap}
.chnav a:hover span,.chnav a:focus-visible span{opacity:1;transform:none}
.chnav a.on i{height:22px;opacity:1;background:var(--marissa)}
.chnav.ondark a{color:#8FB6BF}
@media (min-width:1100px){ .chnav{display:flex} }

/* ------------------------------------------------------ footer */
footer{background:var(--ocean-9);color:#8FB6BF;text-align:center;
  padding:56px 22px calc(56px + env(safe-area-inset-bottom));font-size:13px}
footer .fmark{display:block;margin:0 auto 14px;width:34px;height:38px;opacity:.9}
footer p{margin:4px 0}

/* ------------------------------------------------------ progress + cursor */
#sprog{position:fixed;top:0;left:0;width:100%;height:3px;z-index:150;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--kim),var(--colleen) 50%,var(--marissa));
  box-shadow:0 0 12px rgba(255,93,115,.45);pointer-events:none}
html.cur-on,html.cur-on *{cursor:none!important}
#cur,#curring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;
  transform:translate3d(-100px,-100px,0)}
#cur{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--marissa)}
#curring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(11,52,65,.42);
  display:flex;align-items:center;justify-content:center;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
             background .3s ease,border-color .3s ease,opacity .3s ease}
#curring b{font:700 9.5px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  opacity:0;transition:opacity .2s ease}
#curring.big{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,253,248,.72);
  border-color:rgba(11,52,65,.18);backdrop-filter:blur(2px)}
#curring.big b{opacity:1}
#curring.link{width:46px;height:46px;margin:-23px 0 0 -23px;border-color:rgba(255,93,115,.6)}
#curring.dark{border-color:rgba(255,247,233,.6)}
#curring.dark.big{background:rgba(255,249,239,.9)}
#curring.hide,#cur.hide{opacity:0}

/* ------------------------------------------------------ reveals */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-h > span{transform:translateY(104%);transition:transform .75s var(--ease-out)}
.rv-h.in > span{transform:none}
.rv-img{opacity:0;transform:scale(1.035);transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out)}
.rv-img.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-h > span,.rv-img{opacity:1!important;transform:none!important;transition:none!important}
  .cue i::after{animation:none}
  #loader{transition:none}
}

.ringwrap{position:relative;width:clamp(178px,50vw,224px);margin:6px auto 2px;
  animation:ringfloat 5s ease-in-out infinite}
.ringwrap svg{display:block;width:100%;height:auto;overflow:visible}
#ringband{stroke-dasharray:365;stroke-dashoffset:365;animation:ringdraw 1.6s cubic-bezier(.3,.9,.3,1) .25s forwards}
#ringshine{transform-box:view-box;transform-origin:100px 152px;
  animation:ringspin 5.2s linear infinite}
.spark{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:sparkle 3.1s ease-in-out infinite}
.spark.b{animation-duration:4.3s;animation-delay:1.3s}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@keyframes ringspin{to{transform:rotate(360deg)}}
@keyframes ringfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sparkle{
  0%,72%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  80%{opacity:1;transform:scale(1.25) rotate(35deg)}
  88%{opacity:.25;transform:scale(.7) rotate(60deg)}}
.ringnum{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);
  text-align:center;width:100%;pointer-events:none}
.ringnum b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;
  color:var(--cream);font-size:clamp(2.4rem,12.5vw,3.3rem);line-height:.95}
.ringnum b.small{font-size:clamp(1.5rem,7vw,2rem)}
.ringnum i{display:block;font-style:normal;font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--muted);margin-top:5px}
.count .cdate{display:block;font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:15.5px;color:#A6C6CD;margin-top:4px}
@media (prefers-reduced-motion:reduce){
  .ringwrap,#ringshine,.spark{animation:none}
  #ringband{stroke-dashoffset:0;animation:none}
  .spark{opacity:.9}
}
.tape{position:relative;height:54px;margin:28px -20px -8px;overflow:hidden}
.tapewrap{position:absolute;left:-6%;width:112%;top:6px;transform:rotate(-2deg);
  background:repeating-linear-gradient(45deg,#0C3440 0 10px,#F2C230 10px 20px);
  padding:5px 0;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.tapewrap b{display:block;background:#F2C230;color:#0C3440;text-align:center;
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:3.4px;text-transform:uppercase;padding:8px 6px}
@media (min-width:700px){ .tapewrap b{font-size:14.5px;letter-spacing:4.6px} }

.player{position:relative;width:100%;height:86vh;height:86svh;
  min-height:540px;max-height:900px;background:#072C36;overflow:hidden;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.player svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}

.pin{position:absolute;top:0;left:0;width:0;height:0;transition:opacity .3s ease}
.pin .dot{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 7px rgba(0,0,0,.75)}
.pin .tag{position:absolute;left:0;top:0;font-size:11px;font-weight:700;letter-spacing:.25px;
  color:#fff;background:rgba(8,42,52,.88);padding:2px 7px;border-radius:9px;
  white-space:nowrap;transform:translate(11px,-50%)}
.pin.dim{opacity:.45}
.pin.mute{opacity:.42}
.pin.mute .tag{display:none}
.pin.gone{opacity:0}
.pin.hot .dot{width:18px;height:18px;margin:-9px 0 0 -9px;
  box-shadow:0 0 0 7px rgba(255,93,115,.3),0 1px 9px rgba(0,0,0,.75)}

/* Nicole's camera: just the glyph, riding the shoulder of her dot */
.pin .cam,.pin .flash{position:absolute;left:0;top:0;width:16px;height:16px;
  margin:-21px 0 0 2px;display:none}
.pin .cam svg{width:16px;height:16px;display:block;fill:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.6))}
.pin.shooting .cam{display:block}
.pin .flash{border-radius:50%;opacity:0;transform:scale(.5);
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.85) 32%,rgba(255,255,255,0) 70%)}
.pin.shooting .flash{display:block;animation:shutter 3.4s ease-out infinite}
@keyframes shutter{
  0%{opacity:0;transform:scale(.5)}
  2%{opacity:1;transform:scale(2.7)}
  7%{opacity:0;transform:scale(1)}
  10%{opacity:.95;transform:scale(2.2)}
  15%{opacity:0;transform:scale(1)}
  18%{opacity:.9;transform:scale(2.5)}
  24%{opacity:0;transform:scale(1)}
  56%{opacity:0;transform:scale(.5)}
  59%{opacity:1;transform:scale(2.6)}
  64%{opacity:0;transform:scale(1)}
  67%{opacity:.85;transform:scale(2.1)}
  73%{opacity:0;transform:scale(1)}
  100%{opacity:0;transform:scale(.5)}
}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* the Owala sign at the mouth of the path */
.sign{position:absolute;left:0;top:0;display:none}
.sign.on{display:block}
.spost{position:absolute;width:2px;height:13px;margin:-13px 0 0 -1px;
  background:var(--cream);box-shadow:0 1px 4px rgba(0,0,0,.6)}
.sbody{position:absolute;width:27px;height:19px;margin:-31px 0 0 -13.5px;border-radius:3px;
  background:var(--cream);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.55);transform-origin:50% 100%}
.sign.pop .sbody{animation:signdrop .7s cubic-bezier(.2,1.5,.4,1) 1}
@keyframes signdrop{0%{transform:scale(.2) rotate(-14deg)}60%{transform:scale(1.06) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
.sbody svg{width:11px;height:11px;fill:#0C3440;display:block}
.stag{position:absolute;left:0;top:0;white-space:nowrap;font-size:10.5px;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;color:#0C3440;background:var(--cream);
  padding:2px 7px;border-radius:9px;transform:translate(-50%,-52px);
  box-shadow:0 2px 8px rgba(0,0,0,.5);display:none}
.sign.tagged .stag{display:block;transform:translate(-50%,-118px)}
.sposter{position:absolute;width:58px;height:87px;margin:-100px 0 0 -29px;display:none;
  background-image:var(--signimg);background-size:cover;background-position:center top;
  border:2px solid var(--cream);border-radius:3px;transform-origin:50% 100%;
  box-shadow:0 5px 16px rgba(0,0,0,.65)}
.sign.tagged .sbody{display:none}
.sign.tagged .sposter{display:block;animation:signdrop .6s cubic-bezier(.2,1.4,.4,1) 1}

/* the poster, full size, with the hidden ring */
.postwrap{position:relative;max-width:520px;margin:20px auto 0;overflow:hidden;
  border-radius:4px;aspect-ratio:1024/1536;background:#CDEAF5;cursor:zoom-in;
  box-shadow:0 12px 36px rgba(12,52,64,.3)}
.postwrap.on{cursor:zoom-out}
.posterimg{position:absolute;inset:0;background-image:var(--signimg);
  background-size:cover;background-position:center;
  transform-origin:82.6% 91.5%;
  transition:transform .8s cubic-bezier(.45,.05,.2,1)}
.postwrap.on .posterimg{transform:translate(-32.6%,-27.5%) scale(4.2)}
.ringspot{position:absolute;left:82.6%;top:91.5%;width:13%;aspect-ratio:1;
  border-radius:50%;border:3px solid var(--marissa);pointer-events:none;
  opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 0 0 9999px rgba(8,42,52,.55);
  transition:opacity .4s ease,left .8s cubic-bezier(.45,.05,.2,1),
             top .8s cubic-bezier(.45,.05,.2,1),width .8s cubic-bezier(.45,.05,.2,1)}
.postwrap.on .ringspot{opacity:1;left:50%;top:64%;width:19%;
  border-width:4px;animation:ringbeat 1.7s ease-in-out infinite}
@keyframes ringbeat{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.13)}}
.hint{margin-top:18px;border-left:3px solid var(--marissa);padding:2px 0 2px 15px}
.hint p{margin:0;font-size:15px}
.btn-reveal{background:var(--ink);color:var(--cream);min-height:44px;
  font-size:14px;margin-top:13px;padding:0 20px}

/* text-message beats */
.phone{position:absolute;left:0;top:0;display:none}
.phone.on{display:block}
.pbody{position:absolute;width:19px;height:19px;margin:-29px 0 0 -9.5px;
  transform-origin:50% 100%;animation:wig .46s ease-in-out infinite}
.pbody svg{width:19px;height:19px;display:block;fill:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.95)) drop-shadow(0 0 1px rgba(0,0,0,.7))}
.phone .ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:2px solid var(--cream);opacity:0}
.phone.landed .ring{animation:ringpulse .66s ease-out 2}
@keyframes wig{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes ringpulse{0%{opacity:.9;transform:scale(.62)}100%{opacity:0;transform:scale(1.45)}}

.msg{position:absolute;left:0;top:0}
.mbody{position:absolute;display:flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--cream);color:var(--ink);border-radius:20px;padding:6px 13px 6px 10px;
  font-size:13.5px;font-weight:700;letter-spacing:.1px;
  box-shadow:0 8px 22px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
.mbody svg{width:14px;height:14px;fill:var(--ink);opacity:.62;display:block}
@media (prefers-reduced-motion:reduce){ .pbody{animation:none} }
@media (prefers-reduced-motion:reduce){
  .pin.shooting .flash{animation:none;opacity:.85;transform:scale(1.6)}
}

.bubble{position:absolute;top:0;left:0;width:max-content;max-width:min(250px,68vw);
  background:var(--cream);color:var(--ink);border-radius:14px;padding:9px 13px 10px;
  font-size:14.5px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s ease;will-change:transform}
.bubble.on{opacity:1}
.bubble.action b{display:none}
.bubble.action span{font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:16.5px;line-height:1.35}
.bubble b{display:block;font-size:10px;letter-spacing:.9px;text-transform:uppercase;
  color:#6E939C;margin-bottom:3px}
.bubble .tail{position:absolute;bottom:-8px;width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-top:8px solid var(--cream)}
.bubble.flip .tail{bottom:auto;top:-8px;border-top:none;border-bottom:8px solid var(--cream)}

.hud-top{position:absolute;left:0;right:0;top:0;padding:13px 0 52px;
  background:linear-gradient(to bottom,rgba(var(--scrim),.97) 50%,rgba(var(--scrim),.86) 74%,rgba(var(--scrim),0))}
.hud{position:absolute;left:0;right:0;bottom:0;
  padding:44px 0 max(12px,env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(var(--scrim),.95) 46%,rgba(var(--scrim),.8) 72%,rgba(var(--scrim),0))}
.ticks{display:flex;gap:3px;padding:0 16px 12px}
.ticks i{flex:1;height:3px;border-radius:2px;background:rgba(244,235,215,.22)}
.ticks i.done{background:rgba(244,235,215,.5)}
.ticks i.now{background:var(--marissa)}
.caption{padding:0 16px;color:var(--cream)}
.caption .eyebrow{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.caption h2{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:clamp(1.2rem,5.2vw,1.55rem);margin:4px 0 7px;line-height:1.18}
.caption p{margin:0;font-size:14px;color:#CFE5E9;line-height:1.48}
.controls{display:flex;gap:10px;align-items:center;padding:0 16px}
.btn{font:inherit;font-weight:700;font-size:15px;border:none;border-radius:26px;
  min-height:48px;padding:0 22px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:transform .12s ease,opacity .2s}
.btn:active{transform:scale(.975)}
.btn-next{flex:1;background:var(--cream);color:var(--ink)}
.btn-back{background:rgba(244,235,215,.08);color:var(--cream);
  border:1.5px solid rgba(244,235,215,.35);padding:0 18px}
.btn-back[disabled]{opacity:.28;pointer-events:none}
.btn:focus-visible,.step:focus-visible{outline:3px solid var(--marissa);outline-offset:3px}

/* ---- the run-up timeline ---- */
.prog{display:flex;align-items:center;gap:12px;margin-top:16px}
.progbar{flex:1;height:5px;border-radius:3px;background:rgba(12,52,64,.12);overflow:hidden}
.progbar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--kim),var(--marissa));transition:width .5s cubic-bezier(.3,1,.4,1)}
.progtxt{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:#6E939C;white-space:nowrap}

.tl{list-style:none;margin:22px 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:14px;top:12px;bottom:18px;width:2px;
  background:linear-gradient(to bottom,var(--line),rgba(228,212,188,.2))}
.tli{position:relative;display:grid;grid-template-columns:30px 1fr;gap:15px;
  padding:0 2px 24px 0}
.tli .box{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease}
.tli .box svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;
  transition:stroke-dashoffset .35s ease .06s}
.tli.done .box{background:var(--kim);border-color:var(--kim)}
.tli.done .box svg{stroke-dashoffset:0}
.tli .when{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:#6E939C;border:1px solid var(--line);
  border-radius:20px;padding:2px 9px;margin-bottom:7px}
.tli.done .when{color:#1E8A66;border-color:rgba(95,208,160,.75);background:rgba(95,208,160,.16)}
.tli h4{margin:0 0 4px;font-size:16.5px;line-height:1.3;font-weight:700}
.tli.done h4{color:#7EA2AB}
.tli p{margin:0;font-size:14.5px;color:#3E6A74;line-height:1.5}
.tli .owner{display:block;margin-top:7px;font-size:11.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:#8FB2BA}
.tlshot{display:block;width:138px;margin:15px 0 4px;padding:8px 8px 26px;
  background:#fff;border-radius:3px;position:relative;cursor:zoom-in;
  box-shadow:0 7px 20px rgba(12,52,64,.3);transform:rotate(-2.4deg);
  transition:transform .22s ease,box-shadow .22s ease}
.tlshot:hover,.tlshot:focus-visible{transform:rotate(-.6deg) scale(1.05);
  box-shadow:0 12px 28px rgba(12,52,64,.36)}
.tlshot .ph{display:block;width:100%;aspect-ratio:3/4;border-radius:1px;
  background-image:var(--yesimg);background-size:cover;background-position:center}
.tlshot .ph-sign{background-image:var(--signcover);background-position:50% 45%}
.tlshot .ph-bottle{background-image:var(--bottleimg);background-position:50% 42%}
.galslide .bgimg.bottle{background-image:var(--bottleimg)}
.tlshot .cap{position:absolute;left:0;right:0;bottom:7px;text-align:center;
  font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:12.5px;color:#5C8791}

/* ---- "they said yes" lightbox ---- */
/* ---- jobs and responsibilities ---- */
.jobchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.jobchip{display:inline-flex;align-items:center;gap:8px;background:none;color:var(--ink);
  border:1.5px solid var(--line);border-radius:22px;padding:0 15px;min-height:44px;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .14s ease}
.jobchip i{width:11px;height:11px;border-radius:50%;flex:none;
  border:1.5px solid rgba(12,52,64,.28);transition:transform .2s ease}
.jobchip:active{transform:scale(.97)}
.jobchip[aria-selected="true"]{border-color:var(--c);border-width:2px;
  background:#FBF0DE;padding:0 14px}
.jobchip[aria-selected="true"] i{transform:scale(1.35)}
.jobchip:focus-visible{outline:3px solid var(--marissa);outline-offset:3px}

.jobpanel{margin-top:18px;border-left:3px solid var(--line);padding:2px 0 2px 16px;
  transition:border-color .3s ease}
.jobpanel.set{border-left-color:var(--c)}
.jobpanel h3{margin:0 0 3px;font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:1.35rem;line-height:1.15}
.jobpanel .role{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:#7EA2AB;font-weight:700;margin-bottom:11px}
.jobpanel .hintline{margin:0;color:#5C8791;font-size:15px}
.joblist{list-style:none;margin:0;padding:0}
.joblist li{position:relative;padding:0 0 12px 26px;font-size:15.5px;line-height:1.5}
.joblist li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--c);opacity:.65}
.joblist li.key{padding:11px 12px 11px 26px;margin:2px 0 12px -12px;border-radius:6px;
  background:rgba(255,93,115,.1);font-weight:700}
.joblist li.key::before{left:12px;top:19px;border-color:var(--marissa);opacity:1;
  background:var(--marissa)}
.joblist li.key b{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:#D83A55;margin-bottom:3px;font-weight:700}
.jobfade{animation:jobin .34s ease}
@keyframes jobin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- side view of the hill ---- */
.hill{max-width:620px;margin:18px auto 0;background:linear-gradient(#CDEAF5,#F7EEDA);
  border-radius:6px;overflow:hidden;box-shadow:0 8px 24px rgba(12,52,64,.18)}
.hill svg{display:block;width:100%;height:auto}
.fig circle{stroke:#fff;stroke-width:2}
.fig path{fill:none;stroke-width:2.6;stroke-linecap:round}
.fig text{font-family:Karla,sans-serif;font-size:12px;font-weight:700;text-anchor:middle}
.hillctl{max-width:620px;margin:0 auto;padding:16px 18px 0}
.hillslider{width:100%;height:42px;accent-color:var(--marissa);cursor:pointer}
.hillends{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:#7EA2AB;margin-top:-6px}
.hillsay{margin:14px auto 0;max-width:620px;padding:0 18px;font-size:15.5px;
  font-family:"Fraunces",Georgia,serif;font-style:italic;line-height:1.45;
  color:var(--ink);border-left:3px solid var(--andrew);padding-left:15px;
  transition:border-color .3s ease}
.hillsay.seen{border-left-color:var(--marissa)}

#hcam{transition:opacity .35s ease}
#hcamflash{transform-box:fill-box;transform-origin:center;opacity:0}
#hcam.on #hcamflash{animation:hshutter 3.1s ease-out infinite}
@keyframes hshutter{
  0%{opacity:0;transform:scale(.4)}
  3%{opacity:1;transform:scale(2.1)}
  9%{opacity:0;transform:scale(.9)}
  13%{opacity:.9;transform:scale(1.8)}
  19%{opacity:0;transform:scale(.8)}
  56%{opacity:0;transform:scale(.4)}
  60%{opacity:1;transform:scale(2)}
  66%{opacity:0;transform:scale(.9)}
  70%{opacity:.85;transform:scale(1.7)}
  76%{opacity:0;transform:scale(.8)}
  100%{opacity:0;transform:scale(.4)}}
@media (prefers-reduced-motion:reduce){ #hcam.on #hcamflash{animation:none;opacity:.8} }

/* ---- build gallery ---- */
.gal{position:fixed;inset:0;z-index:95;display:none;background:rgba(6,32,40,.96);
  flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom))}
.gal.on{display:flex}
.galhead{display:flex;align-items:center;justify-content:space-between;
  padding:0 18px 12px;color:var(--cream);flex:none}
.galhead h3{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.25rem}
.galcount{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#A6C6CD}
.galclose{background:rgba(244,235,215,.1);border:1.5px solid rgba(244,235,215,.35);
  color:var(--cream);border-radius:50%;width:38px;height:38px;font-size:19px;
  line-height:1;cursor:pointer;flex:none;margin-left:12px}
.galtrack{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.galtrack::-webkit-scrollbar{display:none}
.galslide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 18px;gap:14px}
.galslide img,.galslide .bgimg{max-width:100%;max-height:62vh;border-radius:8px;
  object-fit:contain;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.galslide .bgimg{display:block;width:100%;height:62vh;background-image:var(--signcover);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  box-shadow:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.galslide .cap{color:var(--cream);text-align:center;max-width:34ch;font-size:15px;line-height:1.45}
.galslide .cap b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:1.15rem;margin-bottom:4px}
.galnav{display:flex;gap:10px;justify-content:center;padding:14px 18px 0;flex:none}
.galnav button{background:rgba(244,235,215,.1);border:1.5px solid rgba(244,235,215,.35);
  color:var(--cream);border-radius:24px;min-height:42px;padding:0 20px;font:inherit;
  font-weight:700;font-size:14px;cursor:pointer}
.galnav button:disabled{opacity:.3;pointer-events:none}
.galdots{display:flex;gap:6px;align-items:center;justify-content:center;padding:12px 0 0;flex:none}
.galdots i{width:7px;height:7px;border-radius:50%;background:rgba(244,235,215,.28)}
.galdots i.now{background:var(--marissa);transform:scale(1.25)}

.lb{position:fixed;inset:0;z-index:90;display:none;cursor:zoom-out;
  background:rgba(6,32,40,.95);align-items:center;justify-content:center;
  flex-direction:column;padding:22px}
.lb.on{display:flex}
.lb canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lbimg{position:relative;width:min(78vw,380px);aspect-ratio:3/4;border-radius:10px;
  background-image:var(--yesimg);background-size:cover;background-position:center;
  box-shadow:0 26px 70px rgba(0,0,0,.7);animation:lbpop .5s cubic-bezier(.2,1.35,.4,1)}
.lbyes{position:relative;margin-top:26px;text-align:center;color:#fff;
  font-family:"Fraunces",Georgia,serif;font-size:clamp(2rem,11vw,3.6rem);
  line-height:1;animation:glowpulse 2.3s ease-in-out infinite;
  text-shadow:0 0 12px rgba(255,93,115,.95),0 0 34px rgba(255,93,115,.75),
              0 0 66px rgba(255,93,115,.5),0 0 110px rgba(255,93,115,.3)}
.lbhint{position:relative;margin-top:16px;font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(244,235,215,.5)}
@keyframes lbpop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes glowpulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

.steps{list-style:none;margin:12px 0 0;padding:0}
.step{display:grid;grid-template-columns:24px 1fr;gap:12px;width:100%;
  padding:14px 6px 14px 0;border:none;border-top:1px solid var(--line);
  background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.step:last-child{border-bottom:1px solid var(--line)}
.step .mark{font-family:"Fraunces",Georgia,serif;font-size:1.15rem;
  color:#7EA2AB;line-height:1.35}
.step h3{margin:0 0 3px;font-size:15.5px;font-weight:700;line-height:1.32}
.step p{margin:0;color:#3E6A74;font-size:14.5px}
.step .say{margin-top:8px;font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:15.5px;color:var(--ink);border-left:2px solid var(--colleen);padding-left:10px}
.step .say.action{border-left-color:var(--andrew)}/* ---------------------------------------------- the ring, now in the intro */
#ringband{animation:none;stroke-dashoffset:365}
.titleblock.shown #ringband{animation:ringdraw 1.7s cubic-bezier(.3,.9,.3,1) .1s forwards}
.ringwrap{width:clamp(150px,22vh,212px);margin:10px auto 2px}
.ringnum b{color:#FFF9EF;font-variation-settings:"SOFT" 60;font-weight:500}
.ringnum i{color:rgba(255,247,233,.72)}
.count .cdate{display:block;font-family:var(--display);font-style:italic;font-size:16px;
  color:rgba(255,247,233,.86);margin-top:2px}
@media (max-height:640px){ .ringwrap{width:130px} .titleblock h1{font-size:clamp(1.8rem,5.6vw,2.6rem)} }

/* ---------------------------------------------- run-up timeline */
.prog{margin-top:26px;max-width:340px}
.tl{margin-top:4px}
.tl::before{left:14px;top:22px}
.tli{padding-bottom:18px}
.tli .box{margin-top:16px;background:var(--sand-2)}
.tli > span:last-child{display:block;padding:18px 20px 16px;border-radius:var(--r-md);
  background:var(--surface);box-shadow:var(--sh-1);border:1px solid rgba(230,215,191,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
@media (hover:hover){ .tli:hover > span:last-child{transform:translateY(-3px);box-shadow:var(--sh-2)} }
.tli h4{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600;
  font-size:1.14rem;letter-spacing:-.01em;margin:2px 0 6px}
.tli.done h4{color:var(--ink)}
.tli.done > span:last-child{background:linear-gradient(180deg,#F1FBF6,#FFFDF8 60%)}
.tli p{font-size:15px;color:var(--ink-2)}
.tlshot{transform:rotate(-2.4deg) perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tlshot:hover,.tlshot:focus-visible{transform:rotate(-.6deg) scale(1.05) perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ---------------------------------------------- jobs */
.jobchips{margin-top:0}
.jobchip{background:var(--paper);border-color:rgba(230,215,191,.9);
  transition:border-color .25s ease,background .25s ease,transform .3s var(--ease),box-shadow .25s ease}
@media (hover:hover){ .jobchip:hover{box-shadow:var(--sh-1);background:var(--surface)} }
.jobchip[aria-selected="true"]{background:var(--surface);box-shadow:var(--sh-1)}
.jobpanel{margin-top:22px}
.jobpanel h3{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600;font-size:1.5rem}

/* ---------------------------------------------- the plan player */
.player{border-radius:0}
.caption h2{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600;letter-spacing:-.015em}
.btn{transition:transform .3s var(--ease),background .25s ease,box-shadow .25s ease,opacity .2s}
@media (hover:hover){ .btn-next:hover{box-shadow:0 8px 24px rgba(0,0,0,.28)} }

/* ---------------------------------------------- hill */
.hillsay{font-family:var(--display);font-style:italic}

/* ---------------------------------------------- sign */
.postwrap{box-shadow:var(--sh-2)}
.hint{border-left:3px solid var(--marissa);padding:4px 0 4px 18px}
.hint p{font-size:16px;color:var(--ink-2)}
.hint p strong{color:var(--ink)}
.btn-reveal{background:var(--ink);color:var(--cream);box-shadow:0 8px 22px rgba(11,52,65,.25)}
@media (hover:hover){ .btn-reveal:hover{background:#114a5a} }

/* ---------------------------------------------- step list */
.step{border-top-color:var(--line);transition:background .25s ease}
.step:last-child{border-bottom-color:var(--line)}
.step h3{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600;font-size:1.06rem;letter-spacing:-.01em}
.step[aria-current="true"]{background:rgba(255,93,115,.07)}
@media (hover:hover){ .step:hover{background:rgba(47,201,160,.06)} }

/* ---------------------------------------------- galleries + lightbox */
.galhead h3,.lbyes{font-family:var(--display);font-variation-settings:"SOFT" 70}
.galslide .cap b{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600}
/* ============================================================ 3D mode */
html{background:#1B2B3C}
html.mode3d,html.mode3d body{height:100%;overflow:hidden;overscroll-behavior:none}
html.mode3d body{background:#1B2B3C}
#world{display:none}
html.mode3d #world{display:block;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:0;touch-action:none}
.css3d-root{position:fixed;inset:0;z-index:1;pointer-events:none}
.css3d-root .css3d{position:absolute!important;inset:0;overflow:hidden!important;pointer-events:none}
html.mode3d main,html.mode3d footer,html.mode3d .hero2d{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------ the boards */
.board.in3d{pointer-events:auto;box-sizing:border-box;margin:0;padding:44px 48px;overflow:auto;
  background:#FBF6EC;border-radius:4px;color:var(--ink);
  background-image:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.7),transparent 60%);
  scrollbar-width:thin;scrollbar-color:rgba(11,52,65,.25) transparent;overscroll-behavior:contain;
  transition:opacity .35s ease}
.board.in3d.dark{background:#083545;color:var(--cream);background-image:none}
.board.in3d .chin{padding:0;max-width:none}
.board.in3d .split{gap:44px}
.board.in3d .split > .chead{position:sticky;top:0}
.board.in3d .chead h2{margin-top:12px}
.board.in3d .stagewrap{margin-top:24px;padding:0}
.board.in3d .stagewrap .player{height:560px;min-height:0;max-height:none;border-radius:10px;box-shadow:none}
.board.in3d .card{box-shadow:0 1px 2px rgba(11,52,65,.08),0 10px 26px rgba(11,52,65,.1)}
.board.in3d .signgrid{gap:40px}
.board.in3d .postwrap{max-width:420px}
.board.in3d .dayphoto{margin:0 0 22px;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.board.in3d .dayphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
.board.in3d .dayphoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 12px;color:#FFF9EF;
  font-family:var(--display);font-style:italic;font-size:15px;background:linear-gradient(180deg,transparent,rgba(5,38,49,.7))}
.board.in3d .dayphoto{position:relative}
.board.in3d .steps.glass{padding:0;background:none;border:0;box-shadow:none}
@media (max-width:759px){
  .board.in3d{padding:24px 22px 30px;border-radius:4px}
  .board.in3d .stagewrap .player{height:520px}
  .board.in3d .split{gap:24px}
  .board.in3d .split > .chead{position:static}
}

/* ------------------------------------------------------------ controls */
.hud3{display:none}
html.mode3d .hud3{display:block;position:fixed;inset:0;z-index:5;pointer-events:none}
.navbar{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:8px;border-radius:40px;pointer-events:auto;
  background:rgba(8,30,40,.58);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.navbtn{font:700 14.5px/1 var(--text);letter-spacing:.02em;border:0;border-radius:30px;min-height:46px;padding:0 24px;
  background:#FFF7E9;color:var(--ink);cursor:pointer;transition:transform .25s var(--ease),background .2s,opacity .2s;white-space:nowrap}
.navbtn:hover{background:#fff}
.navbtn:active{transform:scale(.96)}
.navbtn.ghost{background:transparent;color:#FFF7E9;border:1.5px solid rgba(255,247,233,.35)}
.navbtn.ghost:hover{background:rgba(255,247,233,.1)}
.navbtn:disabled{opacity:.3;pointer-events:none}
.navbtn:focus-visible,.dot:focus-visible{outline:3px solid var(--marissa);outline-offset:3px}
.dots{display:flex;align-items:center;gap:7px;padding:0 4px}
.dot{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:4px;cursor:pointer;
  background:rgba(255,247,233,.32);transition:width .35s var(--ease),background .3s}
.dot.ch{width:9px;height:9px;border-radius:5px}
.dot.past{background:rgba(255,247,233,.6)}
.dot.on{width:26px;background:var(--marissa)}
.dot[data-label]::after{content:attr(data-label);position:absolute;left:50%;bottom:22px;transform:translateX(-50%) translateY(4px);
  white-space:nowrap;font:700 11px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:#FFF7E9;padding:6px 9px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.dot[data-label]:hover::after{opacity:1;transform:translateX(-50%)}
@media (max-width:520px){
  .navbar{gap:8px;padding:6px;left:12px;right:12px;transform:none;justify-content:space-between}
  .navbtn{padding:0 16px;min-height:44px;font-size:14px}
  .dots{gap:5px;flex-wrap:nowrap;overflow:hidden}
  .dot{width:5px;height:5px}.dot.ch{width:6px;height:6px}.dot.on{width:16px}
}
.caption3{position:absolute;left:0;right:0;bottom:calc(112px + env(safe-area-inset-bottom));padding:0 24px;text-align:center;
  opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .8s var(--ease-out)}
.caption3.on{opacity:1;transform:none}
.caption3 .eb{display:block;font:700 11.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,247,233,.88);margin-bottom:14px;min-height:1px}
.caption3 p{margin:0 auto;max-width:18ch;font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:540;
  font-size:clamp(1.6rem,4.2vw,2.8rem);line-height:1.08;letter-spacing:-.02em;color:#FFF9EF;
  text-shadow:0 2px 28px rgba(5,38,49,.6),0 1px 2px rgba(5,38,49,.35)}
@media (min-width:900px){ .caption3{left:auto;right:7vw;text-align:right;padding:0} .caption3 p{margin:0 0 0 auto;max-width:15ch} }
.tape3d{position:absolute;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));height:54px;overflow:hidden;opacity:0;transition:opacity .6s ease}
.tape3d.on{opacity:1}

/* ------------------------------------------------------------ no WebGL: the page version */
.hero2d{display:none}
body.no3d .hero2d{display:flex;position:relative;min-height:100vh;min-height:100svh;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:40px 22px 120px;
  background:linear-gradient(180deg,#5E8FB4 0%,#F4B593 46%,#FFD9A6 58%,#2E93A8 58.4%,#1B6E85 100%)}
body.no3d .hero2d .tape{position:absolute;left:0;right:0;bottom:8vh}
body.no3d main{background:var(--paper)}
#loader{z-index:200}

/* ============================================================ floating cards */
.board.in3d{border-radius:26px;background:#FCF7EE;
  box-shadow:0 2px 4px rgba(40,30,70,.08),0 30px 70px rgba(40,30,70,.28),inset 0 0 0 1px rgba(255,255,255,.7);
  transition:opacity .45s ease,filter .45s ease}
.board.in3d.dark{background:#0B3A4B;box-shadow:0 30px 70px rgba(10,20,50,.4),inset 0 0 0 1px rgba(255,255,255,.08)}
.board.in3d:not(.live){pointer-events:none!important;filter:saturate(.8)}
.board.in3d > .chin{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.board.in3d:not(.live) > .chin{transform:scale(.985)}
@keyframes cardRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.board.in3d.live .chead > *,
.board.in3d.live .setlist > li,
.board.in3d.live .tl > li,
.board.in3d.live .whos,.board.in3d.live .jobbox,
.board.in3d.live .hillcard,.board.in3d.live .hint,.board.in3d.live .postwrap,
.board.in3d.live .dayphoto,.board.in3d.live .steps > li,.board.in3d.live .stagewrap,.board.in3d.live .prog{
  animation:cardRise .7s cubic-bezier(.2,.8,.2,1) both}
.board.in3d.live .chead > *:nth-child(2),.board.in3d.live .setlist > li:nth-child(2),.board.in3d.live .tl > li:nth-child(2),.board.in3d.live .steps > li:nth-child(2){animation-delay:.05s}
.board.in3d.live .chead > *:nth-child(3),.board.in3d.live .setlist > li:nth-child(3),.board.in3d.live .tl > li:nth-child(3),.board.in3d.live .steps > li:nth-child(3){animation-delay:.1s}
.board.in3d.live .chead > *:nth-child(4),.board.in3d.live .setlist > li:nth-child(4),.board.in3d.live .tl > li:nth-child(4),.board.in3d.live .steps > li:nth-child(4){animation-delay:.15s}
.board.in3d.live .setlist > li:nth-child(n+5),.board.in3d.live .tl > li:nth-child(n+5),.board.in3d.live .steps > li:nth-child(n+5){animation-delay:.2s}
.board.in3d.live .jobbox,.board.in3d.live .hint,.board.in3d.live .dayphoto{animation-delay:.12s}
@media (hover:hover){
  .board.in3d .setlist > li,.board.in3d .tli .box,.board.in3d .steps > li{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
  .board.in3d .setlist > li:hover,.board.in3d .tli .box:hover{transform:translateY(-2px)}
}

/* ============================================================ controls, refined */
.navbtn{display:inline-flex;align-items:center;gap:10px}
.navbtn .arr{width:14px;height:10px;position:relative;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.navbtn .arr::before{content:"";position:absolute;left:0;right:1px;top:50%;height:1.8px;margin-top:-.9px;background:currentColor;border-radius:1px}
.navbtn .arr::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border:solid currentColor;border-width:1.8px 1.8px 0 0;transform:rotate(45deg)}
.navbtn .arr.l{transform:scaleX(-1)}
@media (hover:hover){ .navbtn:hover .arr{transform:translateX(3px)} .navbtn:hover .arr.l{transform:scaleX(-1) translateX(3px)} }
.navbtn.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,247,233,.55)}50%{box-shadow:0 0 0 10px rgba(255,247,233,0)}}
.dot:hover{transform:scale(1.35)}
.dot.on:hover{transform:none}
.dot{transition:width .45s cubic-bezier(.2,.8,.2,1),background .3s,transform .25s}
.caption3 p span{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(4px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .6s ease;transition-delay:calc(var(--w) * 45ms)}
.caption3.on p span{opacity:1;transform:none;filter:none}
.caption3{transition:opacity .45s ease,transform .8s cubic-bezier(.2,.8,.2,1)}

/* hamburger */
.menubtn{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;width:48px;height:48px;border-radius:24px;border:1px solid rgba(255,255,255,.18);
  background:rgba(8,30,40,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto;cursor:pointer;z-index:3;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s}
.menubtn:hover{background:rgba(8,30,40,.7);transform:scale(1.05)}
.menubtn i{position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:#FFF7E9;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .25s}
.menubtn i:nth-child(1){top:17px}.menubtn i:nth-child(2){top:23px}.menubtn i:nth-child(3){top:29px}
.menubtn.open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menubtn.open i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menubtn.open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{position:absolute;inset:0;pointer-events:none;z-index:2;background:rgba(6,18,30,0);transition:background .4s ease}
.menu.open{pointer-events:auto;background:rgba(6,18,30,.35)}
.menu-card{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 58px);right:16px;width:min(320px,calc(100vw - 32px));
  padding:18px 10px 12px;border-radius:24px;background:rgba(252,247,238,.96);box-shadow:0 30px 70px rgba(10,20,50,.35);
  transform-origin:top right;transform:translateY(-8px) scale(.94);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.menu.open .menu-card{transform:none;opacity:1}
.menu-eb{margin:0 14px 8px;font:700 11px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.menu ol{list-style:none;margin:0;padding:0;max-height:min(70vh,560px);overflow:auto}
.menu li{opacity:0;transform:translateX(10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.menu.open li{opacity:1;transform:none;transition-delay:calc(var(--i) * 30ms + 60ms)}
.menu li button{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border:0;border-radius:14px;background:none;cursor:pointer;
  font:600 16px/1.2 var(--display);color:var(--ink);text-align:left;transition:background .2s,transform .25s}
.menu li button:hover{background:rgba(11,52,65,.06);transform:translateX(2px)}
.menu li button.on{background:rgba(255,93,115,.1)}
.menu li button.on .mn{background:var(--marissa);color:#fff}
.menu .mn{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:15px;background:rgba(11,52,65,.07);
  font:700 11.5px/1 var(--text);letter-spacing:.04em;color:var(--muted);transition:background .25s,color .25s}
@media (prefers-reduced-motion:reduce){ .navbtn.pulse{animation:none} .caption3 p span{transition:none} }

/* ============================================================ v3: ring of cards + overlay handoff */
.panel-overlay{position:fixed;inset:0;z-index:3;pointer-events:none}
.panel-overlay > .board{position:absolute;pointer-events:auto}
.panel3d{pointer-events:none}
.panel3d > .board{width:100%;height:100%;pointer-events:none!important}
.board.in3d{box-sizing:border-box;overflow-y:auto;overflow-x:hidden;margin:0;
  padding:clamp(28px,4vw,56px) clamp(22px,4.4vw,64px);border-radius:22px;
  background:#FBF8F2;background-image:linear-gradient(180deg,#FFFDF9 0%,#F8F2E8 100%);
  box-shadow:0 1px 1px rgba(30,24,60,.05),0 24px 60px -12px rgba(30,24,60,.32),inset 0 0 0 1px rgba(255,255,255,.8);
  filter:none;transition:none;scrollbar-width:thin;scrollbar-color:rgba(20,40,60,.22) transparent;-webkit-overflow-scrolling:touch}
.board.in3d.dark{background:#0C3645;background-image:linear-gradient(180deg,#0E3E50 0%,#0A3140 100%)}
.board.in3d::-webkit-scrollbar{width:10px}
.board.in3d::-webkit-scrollbar-thumb{background:rgba(20,40,60,.18);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
.board.in3d:not(.live) > .chin{transform:none}
.board.in3d .chin{max-width:1100px;margin:0 auto}
.board.in3d .split{grid-template-columns:minmax(260px,340px) 1fr}
.board.in3d .split > .chead{top:0}
.board.in3d .stagewrap .player{height:min(560px,calc(100vh - 360px));min-height:420px}
@media (max-width:979px){ .board.in3d .split{grid-template-columns:1fr} }
@media (max-width:759px){ .board.in3d{border-radius:18px} }

/* top bar */
.wordmark{position:absolute;top:max(22px,calc(env(safe-area-inset-top) + 8px));left:clamp(18px,3vw,40px);margin:0;
  font:700 11px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,250,240,.92);
  text-shadow:0 1px 10px rgba(20,20,50,.35);pointer-events:none}
.wordmark span{opacity:.6;margin:0 .3em}
.menubtn{top:max(12px,env(safe-area-inset-top));right:clamp(12px,3vw,32px);width:44px;height:44px;border-radius:22px;
  background:rgba(255,250,240,.16);border:1px solid rgba(255,255,255,.28)}
.menubtn i{left:14px;right:14px}
.menubtn i:nth-child(1){top:16px}.menubtn i:nth-child(2){top:21px}.menubtn i:nth-child(3){top:26px}
.menubtn.open i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menubtn.open i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.menu-card{top:calc(max(12px,env(safe-area-inset-top)) + 54px);right:clamp(12px,3vw,32px)}

/* bottom bar */
.navbar{gap:6px;padding:6px;border-radius:999px;background:rgba(20,26,48,.42);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px -12px rgba(10,10,40,.45)}
.navbtn{min-height:44px;padding:0 20px;font-size:14px;font-weight:700;letter-spacing:.01em}
.navbtn.ghost{border:0;color:rgba(255,250,240,.9)}
.navbtn.ghost:hover{background:rgba(255,255,255,.1)}
.navmid{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px;padding:0 10px;gap:5px}
.navnum{font:700 10.5px/1 var(--text);letter-spacing:.2em;color:rgba(255,250,240,.6)}
.navname{font:600 15px/1 var(--display);color:#FFFAF0;letter-spacing:-.005em;white-space:nowrap}
.navmid .dots{display:none}
@media (max-width:520px){
  .navbar{left:10px;right:10px;transform:none;justify-content:space-between}
  .navmid{min-width:0;flex:1}
  .navbtn{padding:0 14px}
  .navbtn.ghost span{display:none}
}
.caption3{bottom:calc(118px + env(safe-area-inset-bottom))}
.tape3d{bottom:calc(92px + env(safe-area-inset-bottom))}

/* ============================================================ free look */
.free-ui{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,20px);display:flex;align-items:center;gap:14px;
  padding:6px 6px 6px 20px;border-radius:999px;background:rgba(20,26,48,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1);max-width:calc(100vw - 20px)}
.free-ui.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.free-hint{margin:0;font:600 12.5px/1.3 var(--text);letter-spacing:.02em;color:rgba(255,250,240,.9)}
.fh-touch{display:none}
@media (pointer:coarse){ .fh-desk{display:none} .fh-touch{display:inline} }
body.freecam .navbar,body.freecam .caption3,body.freecam .tape3d{opacity:0;pointer-events:none}
.navbar{transition:opacity .35s ease}
.menu li button.free{border-top:1px solid rgba(11,52,65,.08);margin-top:6px;border-radius:0 0 14px 14px}
.free-ui{gap:10px;padding:6px 6px 6px 16px}
.free-hint{white-space:nowrap;font-size:12px}
@media (max-width:520px){
  .free-ui{flex-direction:column;align-items:stretch;gap:6px;padding:10px 8px 8px;border-radius:24px;width:calc(100vw - 28px)}
  .free-hint{text-align:center;font-size:11.5px;white-space:normal}
}

/* the finished sign photo: the hidden ring sits at 68.9% / 62.8% of the board */
.posterimg{transform-origin:68.9% 62.8%}
.ringspot{left:68.9%;top:62.8%;width:9%}
.postwrap.on .posterimg{transform:translate(-18.9%,1.2%) scale(4.2)}

/* ============================================================ the day in 3D */
body.storymode .navbar,body.storymode .caption3,body.storymode .tape3d,body.storymode .wordmark{opacity:0;pointer-events:none}
.story-ui{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;z-index:2}
.story-ui.on{opacity:1}
.story-ui.on .st-bottom,.story-ui.on .st-top,.story-ui.on .st-mapwrap{pointer-events:auto}
/* where we are */
.st-top{position:absolute;top:max(16px,env(safe-area-inset-top));left:clamp(12px,3vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(62vw,420px);
  transform:translateY(-10px);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.story-ui.on .st-top{transform:none}
.st-where{margin:0;display:flex;align-items:center;gap:11px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(12,20,34,.62);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px -16px rgba(0,0,0,.6)}
.st-pin{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--marissa);box-shadow:0 0 0 4px rgba(255,93,115,.22)}
.st-pin svg{width:16px;height:16px;fill:#fff}
.st-where-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.st-where-tx b{font:700 14.5px/1.15 var(--text);color:#FFF8EE;letter-spacing:.005em}
.st-where-tx em{font:400 12px/1.2 var(--text);font-style:normal;color:rgba(255,248,238,.72)}
.st-where.swap{animation:stSwap .6s cubic-bezier(.2,.8,.2,1)}
@keyframes stSwap{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.st-lapse{margin:0;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(255,248,238,.92);color:var(--ink);
  font:700 11px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(-4px) scale(.96);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.st-lapse.on{opacity:1;transform:none}
.st-clock{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);position:relative;flex:none}
.st-clock::before,.st-clock::after{content:"";position:absolute;left:50%;top:50%;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px;transform-origin:50% 100%}
.st-clock::before{height:5px;margin-top:-5px;animation:hand 1s linear infinite}
.st-clock::after{height:4px;margin-top:-4px;animation:hand 6s linear infinite}
@keyframes hand{to{transform:rotate(360deg)}}
/* the map */
.st-mapwrap{position:absolute;margin:0;top:calc(max(16px,env(safe-area-inset-top)) + 58px);right:clamp(12px,3vw,32px);width:212px;height:150px;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.35);background:#B0C496;transform:translateY(-8px);opacity:.0;transition:opacity .6s ease .15s,transform .7s cubic-bezier(.2,.8,.2,1) .15s}
.story-ui.on .st-mapwrap{opacity:1;transform:none}
.st-map{display:block;width:100%;height:100%}
.st-mapwrap figcaption{position:absolute;top:6px;left:50%;transform:translateX(-50%);font:700 9px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:rgba(11,52,65,.55)}
/* the step card and controls */
.st-bottom{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));width:min(660px,calc(100vw - 20px));transform:translate(-50%,24px);
  display:flex;flex-direction:column;gap:8px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.story-ui.on .st-bottom{transform:translate(-50%,0)}
.st-card{padding:14px 18px 14px 20px;border-radius:22px;background:rgba(252,247,238,.95);box-shadow:0 22px 50px -16px rgba(10,10,40,.5);max-height:36vh;overflow:auto;overscroll-behavior:contain}
.st-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.st-no{margin:0;font:700 10.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--marissa)}
.st-fold{flex:none;width:30px;height:30px;border-radius:15px;border:0;background:rgba(11,52,65,.07);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.st-fold:hover{background:rgba(11,52,65,.14)}
.st-fold i{width:9px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.st-card.folded .st-fold i{transform:translateY(2px) rotate(-135deg)}
.st-title{margin:0;font:600 clamp(17px,2.3vw,21px)/1.22 var(--display);color:var(--ink)}
.st-more{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.st-more>div{overflow:hidden;min-height:0}
.st-card.folded .st-more{grid-template-rows:0fr;opacity:0}
.st-body{margin:7px 0 0;font:400 14px/1.52 var(--text);color:#40525B}
.st-who{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.st-who:empty{display:none}
.st-who span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;background:rgba(11,52,65,.06);font:700 12px/1 var(--text);color:var(--ink)}
.st-who i{width:9px;height:9px;border-radius:50%}
.st-who span.star{background:rgba(255,93,115,.12)}
.st-nav{display:flex;align-items:center;gap:8px;padding:6px;border-radius:999px;background:rgba(14,22,40,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.15)}
.st-prog{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:0 6px}
.st-count{font:700 11px/1 var(--text);letter-spacing:.16em;color:rgba(255,250,240,.85);text-align:center}
.st-segs{display:flex;gap:3px;height:5px}
.st-segs button{flex:1;min-width:0;height:5px;padding:0;border:0;border-radius:3px;background:rgba(255,248,238,.18);cursor:pointer;position:relative;overflow:hidden;transition:transform .2s}
.st-segs button::after{content:"";position:absolute;inset:0;background:#FFF8EE;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.st-segs button.done::after{transform:none;opacity:.85}
.st-segs button.cur::after{background:var(--marissa)}
.st-segs button:hover{transform:scaleY(1.6)}
.st-auto{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:22px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#FFF7E9;font:700 13px/1 var(--text);cursor:pointer;transition:background .2s,border-color .2s}
.st-auto i{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;transition:all .2s}
.st-auto[aria-pressed="true"]{background:rgba(255,93,115,.9);border-color:transparent}
.st-auto[aria-pressed="true"] i{width:9px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.st-auto:hover{background:rgba(255,255,255,.1)}
.st-auto[aria-pressed="true"]:hover{background:var(--marissa)}
.st-exit{flex:none;width:44px;height:44px;border-radius:22px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#FFF7E9;font-size:22px;line-height:1;cursor:pointer}
.st-exit:hover{background:rgba(255,255,255,.12)}
@media (max-width:640px){
  .st-mapwrap{width:128px;height:92px;border-radius:12px;top:calc(max(12px,env(safe-area-inset-top)) + 54px)}
  .st-mapwrap figcaption{display:none}
  .st-top{max-width:calc(100vw - 180px)}
  .st-where{padding:6px 12px 6px 6px;gap:9px}.st-pin{width:26px;height:26px}.st-pin svg{width:13px;height:13px}
  .st-where-tx b{font-size:13px}.st-where-tx em{font-size:11px}
  .st-card{padding:12px 14px 12px 16px;max-height:31vh}.st-body{font-size:13px}
  .st-nav .navbtn.ghost span,.st-auto span{display:none}.st-auto{padding:0 14px}
  .st-nav .navbtn{padding:0 16px}
}
/* the HTML layer over the 3D story */
.sx-host{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.sx{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.sx.live{opacity:1}
.sx-tag{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s ease;will-change:transform}
.sx-tag.on{opacity:1}
.sx-pill{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 11px 5px 8px;border-radius:999px;
  background:rgba(14,20,34,.8);color:#FFF8EE;font:700 12.5px/1 var(--text);letter-spacing:.01em;box-shadow:0 8px 18px -8px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translateX(-50%) scale(.9);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sx-tag.on .sx-pill{transform:translateX(-50%) scale(1)}
.sx-pill i{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.sx-tag.star .sx-pill{background:linear-gradient(135deg,#FF5D73,#FF8A9B);box-shadow:0 0 0 3px rgba(255,93,115,.28),0 10px 22px -8px rgba(255,60,100,.7)}
.sx-tag.star .sx-pill i{box-shadow:0 0 0 1.5px #fff}
.sx-tag.grp .sx-pill{gap:10px;padding:5px 12px 5px 9px}
.sx-nm{display:inline-flex;align-items:center;gap:5px}
.sx-stack{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 11px 6px 9px;border-radius:12px}
.sx-row{display:inline-flex;align-items:center;gap:6px;line-height:14px}
.sx-pile{gap:8px}
.sx-pile b{font-weight:700;opacity:.7}
.sx-dots{display:inline-flex}
.sx-dots i{margin-left:-3px;width:10px;height:10px;box-shadow:0 0 0 1.5px rgba(14,20,34,.9)}
.sx-dots i:first-child{margin-left:0}
.sx-tag.star .sx-dots i{box-shadow:0 0 0 1.5px #FF6F84}
.sx-car{display:inline-flex;width:15px;height:15px;opacity:.85}.sx-car svg{width:15px;height:15px;fill:currentColor}
.sx-stem{position:absolute;left:-.5px;top:0;width:1px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.35))}
.sx-stem::after{content:"";position:absolute;left:-2px;bottom:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.4)}
.sx-bub{position:absolute;left:0;top:0;will-change:transform}
.sx-bub-in{position:absolute;left:0;bottom:12px;transform:translateX(-50%) translateY(6px) scale(.94);opacity:0;transform-origin:50% 100%;
  width:max-content;max-width:270px;padding:9px 14px 11px;border-radius:16px;background:#FFFDF8;box-shadow:0 16px 34px -14px rgba(10,14,40,.55);
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.3,.3,1)}
.sx-bub-in::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;background:inherit;transform:rotate(45deg);border-radius:0 0 3px 0}
.sx-bub.on .sx-bub-in{opacity:1;transform:translateX(-50%)}
.sx-who{margin:0 0 3px;display:flex;align-items:center;gap:6px;font:700 10.5px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#5A6C73}
.sx-who i{width:8px;height:8px;border-radius:50%}
.sx-who em{font-style:normal;padding:2px 6px;border-radius:5px;background:var(--colleen);color:#fff;letter-spacing:.14em;margin-right:2px}
.sx-say{margin:0;font:italic 560 16px/1.32 var(--display);color:var(--ink)}
.sx-bub.star .sx-bub-in{background:#FFF1F3}
.sx-bub.alt .sx-bub-in{background:rgba(255,253,248,.94);box-shadow:0 0 0 1.5px rgba(11,52,65,.28) inset,0 16px 34px -14px rgba(10,14,40,.5)}
.sx-bub.alt .sx-say{font-size:14.5px}
.sx-emo{position:absolute;left:0;top:0;font-size:calc(30px * var(--s,1));line-height:1;transform:translate(-50%,-50%);opacity:0;animation:emo 2.6s cubic-bezier(.2,.7,.3,1) forwards;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
@keyframes emo{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:1;transform:translate(calc(-50% + var(--dx) * .2),-90%) scale(1.15) rotate(var(--rot))}
  70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-520%) scale(.95) rotate(calc(var(--rot) * -1))}}
.sx-place{position:absolute;left:0;top:0;opacity:0;transition:opacity .45s ease;will-change:transform}
.sx-place.on{opacity:1}
.sx-place-in{position:absolute;left:0;bottom:calc(30px + var(--lift,0px));transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 11px 6px 8px;border-radius:999px;
  background:rgba(255,250,240,.93);color:var(--ink);font:700 10.5px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.sx-place-in svg{width:13px;height:13px;fill:var(--andrew)}
.sx-place-line{position:absolute;left:-.5px;bottom:0;height:calc(30px + var(--lift,0px));width:1px;background:repeating-linear-gradient(rgba(255,255,255,.95) 0 3px,transparent 3px 6px)}
.sx-place-line::after{content:"";position:absolute;left:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:#fff}
.sx-place.hero .sx-place-in{font-size:11.5px;padding:8px 14px 8px 10px;background:#FFFDF8}
.sx-place.hero .sx-place-in svg{fill:var(--marissa);width:15px;height:15px}
.sx-place.hero .sx-place-line::before{content:"";position:absolute;left:-12px;bottom:-12px;width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.9);animation:ping 1.8s ease-out infinite}
@keyframes ping{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.sx-note{position:absolute;left:50%;top:max(14px,env(safe-area-inset-top));width:min(380px,calc(100vw - 24px));display:flex;gap:12px;align-items:center;padding:11px 14px 12px 12px;border-radius:20px;
  background:rgba(250,248,244,.96);box-shadow:0 20px 44px -16px rgba(0,0,0,.55);transform:translate(-50%,-140%);opacity:0;transition:transform .6s cubic-bezier(.2,1.2,.3,1),opacity .3s ease;z-index:3}
.sx-note.on{transform:translate(-50%,0);opacity:1}
.sx-note-ic{flex:none;width:38px;height:38px;border-radius:10px;background:linear-gradient(160deg,#6BE07E,#1FB24A);position:relative}
.sx-note-ic::before{content:"";position:absolute;left:8px;top:9px;width:22px;height:17px;border-radius:50%;background:#fff}
.sx-note-ic::after{content:"";position:absolute;left:9px;top:22px;width:7px;height:7px;background:#fff;clip-path:polygon(0 100%,100% 0,60% 0)}
.sx-note-tx{flex:1;min-width:0}
.sx-note-hd{margin:0 0 3px;display:flex;justify-content:space-between;gap:10px;font:700 12px/1.2 var(--text);color:#56646A}
.sx-note-hd b{display:inline-flex;align-items:center;gap:6px;color:var(--ink);min-width:0}
.sx-note-hd b i{width:8px;height:8px;border-radius:50%}
.sx-note-hd .arr{color:#8A979C;font-weight:400}
.sx-note-hd>span{font-weight:400;flex:none}
.sx-note-msg{margin:0;font:600 15.5px/1.3 var(--text);color:var(--ink)}
.sx-card{position:absolute;inset:0;display:grid;place-content:center;text-align:center;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(ellipse at center,rgba(8,12,26,.62),rgba(8,12,26,.25) 70%)}
.sx-card.on{opacity:1}
.sx-card-eb{margin:0 0 10px;font:700 12px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,248,238,.8);transform:translateY(10px);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sx-card-t{margin:0;font:italic 600 clamp(44px,8vw,86px)/1 var(--display);color:#FFF8EE;text-shadow:0 10px 40px rgba(0,0,0,.4);transform:scale(1.18);filter:blur(10px);transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.sx-card.on .sx-card-t{transform:none;filter:none}
.sx-card.on .sx-card-eb{transform:none}
.sx-lb{position:absolute;left:0;right:0;height:8.5vh;background:#06080F;transform:scaleY(0);transition:transform 1s cubic-bezier(.7,0,.2,1)}
.sx-lb-t{top:0;transform-origin:50% 0}.sx-lb-b{bottom:0;transform-origin:50% 100%}
.sx.cine .sx-lb{transform:scaleY(1)}
body.cine .story-ui .st-top,body.cine .story-ui .st-mapwrap{opacity:0;pointer-events:none;transition:opacity .6s ease}
body.cine .st-card .st-more{grid-template-rows:0fr;opacity:0}
body.cine .st-card{background:rgba(252,247,238,.9)}
.sx-dip{position:absolute;inset:0;background:#05070D;opacity:0;pointer-events:none}
@media (max-width:640px){ .sx-say{font-size:14.5px} .sx-bub-in{max-width:220px} .sx-pill{font-size:11.5px} .sx-lb{height:6vh} }
@media (prefers-reduced-motion:reduce){ .sx-emo{animation-duration:1.4s} .st-clock::before,.st-clock::after{animation:none} }
/* the launcher that replaced the 2D map */
.launch{margin:26px 0 6px;padding:26px 24px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);text-align:center}
.launch-cast{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-bottom:22px}
.launch-cast span{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1 var(--text);color:#E8F1F3}
.launch-cast i{width:11px;height:11px;border-radius:6px;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.launch-btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px;border:0;border-radius:30px;background:#FFF7E9;color:var(--ink);
  font:700 16px/1 var(--text);cursor:pointer;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.launch-btn:hover{transform:translateY(-2px)}
.lb-play{width:0;height:0;border-left:12px solid var(--marissa);border-top:8px solid transparent;border-bottom:8px solid transparent}
.launch-note{margin:16px auto 0;max-width:46ch;font:400 13.5px/1.55 var(--text);color:#AFC6CC}
.steps .step{cursor:pointer}
.steps .step em{display:block;font:700 10.5px/1.4 var(--text);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2px 0 4px}

/* ============================================================ v5: no hamburger; the step counter opens a bottom sheet */
.navmid{border:0;background:none;cursor:pointer;color:inherit;border-radius:16px;padding:4px 12px;transition:background .2s}
.navmid:hover{background:rgba(255,255,255,.08)}
.navmid .navnum::after,.st-count::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 2px 7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-135deg);opacity:.8}
.st-count{border:0;background:none;cursor:pointer;padding:4px 10px;border-radius:10px;align-self:center;transition:background .2s}
.st-count:hover{background:rgba(255,255,255,.1)}
.menu-card{top:auto!important;right:auto!important;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 76px);width:min(440px,calc(100vw - 20px));
  transform-origin:50% 100%;transform:translate(-50%,14px) scale(.97)}
.menu.open .menu-card{transform:translate(-50%,0)}
.menu-scroll{max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain;padding:2px 0}
.menu ol{max-height:none;overflow:visible}
.menu-eb{margin:10px 14px 8px}
.menu-day,.menu-steps{display:none}
body.storymode .menu-day,body.storymode .menu-steps{display:block}
.menu-steps li button{padding:9px 12px;font-size:15px}
.menu-steps .mt small{display:block;margin-top:3px;font:500 11.5px/1.2 var(--text);color:var(--muted);letter-spacing:.01em}
.menu-steps .mn{min-width:28px;height:28px}
/* the map sits top-left, with where-we-are beside it */
.st-mapwrap{top:max(14px,env(safe-area-inset-top));left:clamp(12px,3vw,28px);right:auto;width:200px;height:142px}
.st-top{top:max(14px,env(safe-area-inset-top));left:calc(clamp(12px,3vw,28px) + 212px);max-width:calc(100vw - clamp(12px,3vw,28px) - 228px)}
@media (max-width:640px){
  .st-mapwrap{width:130px;height:94px;top:max(12px,env(safe-area-inset-top));left:12px;border-radius:12px}
  .st-top{top:max(12px,env(safe-area-inset-top));left:152px;max-width:calc(100vw - 164px);gap:6px}
  .st-where{padding:6px 12px 6px 6px;border-radius:18px}
  .st-where-tx b{font-size:12.5px;line-height:1.2}.st-where-tx em{font-size:10.5px}
  .st-lapse{font-size:9.5px;letter-spacing:.1em;padding:5px 10px 5px 6px}
  .st-clock{width:13px;height:13px}
}

/* v6: plain floating names over each head */
.sx-nm{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s ease;will-change:transform;pointer-events:none}
.sx-nm.on{opacity:1}
.sx-nm>span{position:absolute;left:0;top:0;display:block;white-space:nowrap;transform-origin:50% 100%;
  font:700 14px/1 Karla,"Helvetica Neue",Arial,sans-serif;letter-spacing:.01em;color:#fff;
  text-shadow:0 1px 2px rgba(10,14,24,.75),0 0 10px rgba(10,14,24,.35)}
.sx-nm.star>span{color:#FFF1F4;font-weight:800;text-shadow:0 1px 2px rgba(120,10,40,.8),0 0 12px rgba(255,80,120,.75)}

/* v6: section buttons under the title, so any part is one tap away */
.intronav{position:absolute;left:50%;transform:translate(-50%,10px);top:52%;width:min(560px,calc(100% - 32px));
  display:flex;flex-direction:column;gap:10px;opacity:0;pointer-events:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);z-index:6}
.intronav.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.intronav button{appearance:none;border:1px solid rgba(255,255,255,.28);background:rgba(18,24,44,.34);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  color:#FFF7E9;font:700 13.5px/1 var(--text);letter-spacing:.01em;height:42px;border-radius:21px;cursor:pointer;padding:0 12px;white-space:nowrap;
  transition:background .2s,transform .15s,border-color .2s;box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.intronav button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
.intronav button:active{transform:scale(.97)}
.intronav .in-go{height:50px;border-radius:25px;font-size:15.5px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#FF5D73,#FF8A6B);box-shadow:0 12px 28px -12px rgba(255,70,100,.8)}
.intronav .in-go:hover{background:linear-gradient(135deg,#FF4A64,#FF7A5A)}
.in-play{width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.in-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.intronav.on .in-grid button{animation:inpop .5s cubic-bezier(.2,.8,.2,1) both}
.intronav.on .in-grid button:nth-child(2){animation-delay:.04s}.intronav.on .in-grid button:nth-child(3){animation-delay:.08s}.intronav.on .in-grid button:nth-child(4){animation-delay:.12s}
.intronav.on .in-grid button:nth-child(5){animation-delay:.16s}.intronav.on .in-grid button:nth-child(6){animation-delay:.2s}.intronav.on .in-grid button:nth-child(7){animation-delay:.24s}.intronav.on .in-grid button:nth-child(8){animation-delay:.28s}
@keyframes inpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:640px){.in-grid{grid-template-columns:repeat(2,1fr)}.intronav button{height:40px;font-size:13px}.intronav .in-go{height:48px}}
body.storymode .intronav,body.freecam .intronav{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.intronav,.intronav.on .in-grid button{transition:none;animation:none}}
@media (max-height:700px) and (max-width:640px){.intronav{gap:8px}.in-grid{gap:6px}.intronav button{height:35px;font-size:12.5px}.intronav .in-go{height:44px;font-size:14.5px}}

/* v7: the phone insert (a fade to the screen itself) */
.sx-phone{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;justify-content:center;padding-top:max(92px,11vh);
  background:radial-gradient(120% 90% at 50% 40%,rgba(12,16,28,.35),rgba(8,10,20,.82));-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.sx-phone.on{opacity:1;visibility:visible;transition:opacity .28s ease}
.sx-ph-frame{position:relative;height:min(62vh,640px);aspect-ratio:360/760;border-radius:clamp(30px,5.4vh,52px);padding:clamp(7px,1.1vh,11px);
  background:linear-gradient(145deg,#3A3D46,#15161B 40%,#2B2E36);box-shadow:0 30px 70px -20px rgba(0,0,0,.7),inset 0 0 0 1.5px rgba(255,255,255,.14);
  transform:translateY(14px) scale(.96);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.sx-phone.on .sx-ph-frame{transform:none}
.sx-ph-frame canvas{display:block;width:100%;height:100%;border-radius:clamp(24px,4.4vh,42px);background:#000}
.sx-ph-btn{position:absolute;right:-3px;top:22%;width:3px;height:9%;border-radius:2px;background:#2A2C33}
body.cine .sx-phone{padding-top:max(80px,10vh)}

/* v7: the title is the home hub. No sequencing: sections slide in, Back returns here */
html.mode3d .navbar{display:none}
.intronav .in-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.intronav .in-grid button{height:auto;min-height:52px;padding:8px 12px;white-space:normal;line-height:1.18;font-size:14px}
.intronav .in-explore{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;background:rgba(255,247,233,.16)}
.in-pin svg{width:16px;height:16px;display:block;fill:#FFD27A}
@media (min-width:900px){.intronav{width:min(640px,calc(100% - 32px))}.intronav .in-grid button{min-height:48px;font-size:14.5px}}
@media (max-width:640px){.intronav .in-grid button{font-size:13.5px;min-height:50px}}
@media (max-height:700px) and (max-width:640px){.intronav .in-grid button{min-height:44px;font-size:12.5px}.intronav .in-explore{height:38px}}
.hubwatch{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));width:min(560px,calc(100% - 32px));transform:translate(-50%,14px);z-index:6;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;border:0;border-radius:27px;cursor:pointer;
  background:linear-gradient(135deg,#FF5D73,#FF8A6B);color:#fff;font:800 16px/1 var(--text);letter-spacing:.01em;box-shadow:0 14px 32px -12px rgba(255,70,100,.85);
  opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hubwatch.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.hubwatch:active{transform:translate(-50%,0) scale(.98)}
body.storymode .hubwatch,body.freecam .hubwatch,body.sectmode .hubwatch,body.sectmode .intronav{opacity:0;pointer-events:none}

/* section sheet */
.sect{position:fixed;inset:0;z-index:30;visibility:hidden;pointer-events:none;transition:visibility 0s linear .5s}
.sect.open{visibility:visible;pointer-events:auto;transition:none}
.sect::before{content:"";position:absolute;inset:0;background:rgba(10,18,32,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .45s ease}
.sect.open::before{opacity:1}
.sect-card{position:absolute;top:max(10px,env(safe-area-inset-top));bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:10px;margin:0 auto;max-width:1180px;
  display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#FCF7EE;box-shadow:0 30px 80px -20px rgba(8,16,40,.55);
  transform:translateX(var(--from,110%));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sect[data-side="left"] .sect-card{--from:calc(-100% - 40px)}
.sect[data-side="right"] .sect-card{--from:calc(100% + 40px)}
.sect.open .sect-card{transform:none}
.sect-bar{flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(11,52,65,.09);background:#FCF7EE}
.sect-back{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:20px;border:1px solid rgba(11,52,65,.18);background:#fff;color:var(--ink);font:700 14px/1 var(--text);cursor:pointer}
.sect-back .arr{border-color:var(--ink)}
.sect-back:active{transform:scale(.97)}
.sect-name{margin:0;font:600 17px/1.2 var(--display);font-variation-settings:"SOFT" 60;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sect-slot{position:relative;flex:1;min-height:0}
.sect-slot > .board.in3d{position:absolute;inset:0;width:auto;height:auto;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border-radius:0;box-shadow:none;margin:0;pointer-events:auto!important;filter:none!important}
.sect-slot > .board.in3d > .chin{transform:none}
/* no decorative dune edges inside the sheet: they sat on top of photos */
.sect-slot .ch::before,.sect-slot .ch::after,.board.in3d::before,.board.in3d::after{display:none!important;content:none!important}
@media (max-width:759px){.sect-card{left:6px;right:6px;border-radius:20px}.sect-slot > .board.in3d{padding:20px 18px 40px}}
@media (prefers-reduced-motion:reduce){.sect-card{transition:none}}

/* the plan overview */
.ov .chin + .chin,.ov .stagewrap + .chin,.ov .signgrid{margin-top:34px}
.ov-h{font:600 clamp(1.25rem,4.6vw,1.6rem)/1.2 var(--display);font-variation-settings:"SOFT" 60;color:var(--ink);margin:34px 0 8px}
.ov-p{margin:0 0 16px;color:var(--ink-2,#3E5A63);font-size:15px;line-height:1.55;max-width:62ch}
.ov-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 6px}
.ov-stat{background:#fff;border-radius:16px;padding:14px 12px;box-shadow:0 1px 2px rgba(11,52,65,.06),0 8px 20px -10px rgba(11,52,65,.18)}
.ov-stat b{display:block;font:700 1.25rem/1.1 var(--display);color:var(--marissa)}
.ov-stat span{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:#5B6F75}
@media (max-width:520px){.ov-glance{grid-template-columns:1fr}.ov-stat{display:flex;align-items:baseline;gap:10px}.ov-stat span{margin:0}}
.ov .stagewrap{margin-top:14px}
.board.in3d.ov .stagewrap .player{height:min(78vh,620px);border-radius:16px}
.ov .signgrid{padding-top:8px}

/* look around Scusset */
.explore-ui{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease}
.explore-ui.on{opacity:1}
.ex-top{position:absolute;left:12px;right:12px;top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:10px}
.explore-ui.on .ex-top,.explore-ui.on .ex-map{pointer-events:auto}
.ex-back{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:21px;border:1px solid rgba(255,255,255,.3);
  background:rgba(18,24,44,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#FFF7E9;font:700 14px/1 var(--text);cursor:pointer}
.ex-name{margin:0;min-width:0;padding:7px 14px;border-radius:16px;background:rgba(18,24,44,.46);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#FFF7E9}
.ex-name b{display:block;font:700 14px/1.2 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-name span{display:block;font:500 12px/1.3 var(--text);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-map{position:absolute;left:12px;right:12px;bottom:max(14px,env(safe-area-inset-bottom));margin:0 auto;max-width:560px;aspect-ratio:500/350;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.35)}
.ex-map canvas{display:block;width:100%;height:100%}
.ex-map figcaption{position:absolute;right:10px;top:8px;font:700 10px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ex-pins{position:absolute;inset:0}
.ex-pin{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;cursor:pointer}
.ex-pin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#FF5D73;box-shadow:0 0 0 2.5px #fff,0 2px 6px rgba(0,0,0,.4);transition:transform .2s}
.ex-pin::before{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px}
.ex-pin span{position:absolute;left:10px;top:-9px;white-space:nowrap;font:700 10.5px/1 var(--text);color:#1B2B3C;background:rgba(255,255,255,.92);padding:4px 6px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}
.ex-pin.on i{transform:scale(1.35);background:#FFD27A}
.ex-pin.on span{background:#FF5D73;color:#fff}
.ex-hint{position:absolute;left:0;right:0;bottom:calc(max(14px,env(safe-area-inset-bottom)) + min(calc((100vw - 24px) * .7),392px) + 10px);margin:0;text-align:center;font:600 12px/1 var(--text);color:rgba(255,250,240,.92);text-shadow:0 1px 4px rgba(0,0,0,.5)}
@media (max-width:640px){.ex-pin span{font-size:9.5px;padding:3px 5px}}
.ex-pin.l span{left:auto;right:10px}
.ex-pin{width:30px;height:30px;margin:-15px 0 0 -15px}
.ex-pin i{left:8px;top:8px}
.ex-pin::before{display:none}
.ex-pin span{left:25px;top:6px}
.ex-pin.l span{left:auto;right:25px}
.ex-pin.b span{top:26px;left:auto;right:4px}

/* v8 */
.intronav.quick{transition-duration:.22s}
.intronav.quick .in-grid button{animation-duration:.28s;animation-delay:0s!important}
.hubwatch{transition-duration:.35s}
/* the plan, in order */
.opl{list-style:none;margin:18px 0 8px;padding:0;counter-reset:op;position:relative}
.opl::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--marissa),#FFB36B 55%,#2FC9A0);opacity:.35;border-radius:2px}
.opl li{position:relative;counter-increment:op;display:grid;grid-template-columns:32px 1fr;column-gap:14px;padding:10px 0}
.opl li::before{content:counter(op);grid-row:1 / span 2;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--marissa);display:flex;align-items:center;justify-content:center;
  font:800 13px/1 var(--text);box-shadow:0 0 0 2px rgba(255,93,115,.35),0 4px 10px -4px rgba(11,52,65,.25);position:relative;z-index:1}
.opl .op-when{font:800 11px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--marissa);padding-top:2px}
.opl .op-what{font-size:15.5px;line-height:1.5;color:var(--ink);margin-top:3px}
.board.in3d.live .opl > li{animation:oplin .55s cubic-bezier(.2,.8,.2,1) both}
.board.in3d.live .opl > li:nth-child(n){animation-delay:calc(min(var(--k,0),12) * 40ms)}
@keyframes oplin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* checklist photos */
.tlpics{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.tlpic{appearance:none;border:0;padding:6px 6px 22px;background:#fff;border-radius:3px;cursor:zoom-in;position:relative;width:118px;
  box-shadow:0 2px 4px rgba(11,52,65,.12),0 12px 24px -10px rgba(11,52,65,.35);transform:rotate(-2.2deg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tlpic + .tlpic{transform:rotate(2deg)}
.tlpic.wide{width:190px}
.tlpic:hover,.tlpic:focus-visible{transform:rotate(0) translateY(-3px) scale(1.03)}
.tlpic img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:1px}
.tlpic.wide img{aspect-ratio:3/2}
.tlpic .cap{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:italic 500 13px/1 var(--display);color:#51697A}
.tlshot .ph-sign{background-image:url("img/sign-photo.jpg");background-position:50% 30%}
.lbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,12,22,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.lbox.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.lbox figure{margin:0;max-width:min(92vw,900px);transform:scale(.94);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lbox.on figure{transform:none}
.lbox img{display:block;max-width:100%;max-height:78vh;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.5);cursor:zoom-out}
.lbox figcaption{margin-top:12px;text-align:center;color:#FFF7E9;font:italic 500 16px/1.4 var(--display)}
.lbox-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer}
/* itinerary */
.itin-dl{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;margin:4px 0 18px;border-radius:24px;text-decoration:none;
  background:linear-gradient(135deg,#FF5D73,#FF8A6B);color:#fff;font:800 15px/1 var(--text);box-shadow:0 12px 26px -12px rgba(255,70,100,.8)}
.itin-dl svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.itin-dl:active{transform:scale(.98)}
.itin-fig{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 2px 6px rgba(11,52,65,.1),0 20px 44px -18px rgba(11,52,65,.45)}
.itin-fig img{display:block;width:100%;height:auto}
.board.in3d.itin .chin{max-width:760px;margin:0 auto}
.ex-places{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px 0 12px;border-radius:21px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,93,115,.88);color:#fff;font:700 14px/1 var(--text);cursor:pointer;box-shadow:0 8px 20px -10px rgba(255,70,100,.8)}
.ex-places svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.explore-ui:not(.mapoff) .ex-places{background:rgba(18,24,44,.5)}
.ex-map{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.explore-ui.mapoff .ex-map{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none!important}
.ex-hint{bottom:max(18px,env(safe-area-inset-bottom));opacity:0;transition:opacity .4s ease .6s}
.explore-ui.mapoff .ex-hint{opacity:1}
.ex-name{flex:1 1 auto}
/* a slow glint across the main button, and a soft breathing glow */
.hubwatch{overflow:hidden}
.hubwatch::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:glint 4.2s ease-in-out 1.2s infinite}
.hubwatch.on{animation:breathe 3.2s ease-in-out infinite}
@keyframes glint{0%,62%{left:-60%}100%{left:130%}}
@keyframes breathe{0%,100%{box-shadow:0 14px 32px -12px rgba(255,70,100,.85)}50%{box-shadow:0 14px 40px -8px rgba(255,70,100,1)}}
.intronav.on .in-grid button,.intronav.on .in-explore{animation:inpop .55s cubic-bezier(.2,.8,.2,1) both}
.intronav.on .in-explore{animation-delay:.3s}
@media (prefers-reduced-motion:reduce){.hubwatch::after,.hubwatch.on{animation:none}}
.intronav.quick.on .in-grid button,.intronav.quick.on .in-explore{animation-duration:.28s;animation-delay:0s!important}
/* v9: look around, easier to read */
.ex-name{padding:8px 14px}
.ex-name b{font-size:16px}
.ex-name span{font-size:13px;opacity:.9}
.ex-back,.ex-places{height:44px;font-size:15px}
.ex-pin span{font-size:12px;padding:5px 8px;border-radius:9px;background:#fff;color:#12202E;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.ex-pin i{width:16px;height:16px;left:7px;top:7px}
@media (max-width:640px){.ex-pin span{font-size:11px;padding:4px 7px}}
.ex-hint{display:none}
.ex-card{position:absolute;left:12px;right:12px;bottom:max(14px,env(safe-area-inset-bottom));margin:0 auto;max-width:560px;padding:16px 18px 14px;border-radius:20px;
  background:rgba(252,247,238,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
  opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.explore-ui.mapoff.hasdesc .ex-card{opacity:1;transform:none;transition-delay:.35s}
.ex-card-eb{margin:0 0 4px;font:800 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--marissa)}
.ex-card h3{margin:0 0 6px;font:600 20px/1.2 var(--display);font-variation-settings:"SOFT" 60}
.ex-card p#exCardD{margin:0;font-size:15.5px;line-height:1.5;color:#2F4A55}
.ex-card-hint{margin:10px 0 0;font:600 12px/1 var(--text);color:#7A8B92}
/* v9: subtitles for each step */
.st-cap{position:absolute;left:0;right:0;bottom:calc(var(--stcard-h,150px) + 18px);display:flex;justify-content:center;padding:0 14px;pointer-events:none;z-index:3}
.st-cap p{margin:0;max-width:min(560px,100%);padding:10px 16px 11px;border-radius:14px;text-align:center;
  font:500 17px/1.42 var(--display);font-variation-settings:"SOFT" 60;color:#FFF9EF;letter-spacing:.005em;
  background:linear-gradient(rgba(10,16,30,.52),rgba(10,16,30,.62));-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.st-cap.on p{opacity:1;transform:none}
.st-cap p span{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(3px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease;transition-delay:calc(var(--w) * 55ms)}
.st-cap.on p span{opacity:1;transform:none;filter:none}
@media (max-width:640px){.st-cap p{font-size:15.5px;padding:9px 13px 10px}}
body.cine .st-cap{bottom:calc(var(--stcard-h,150px) + 10px)}
/* v9: credits, movie style */
.sx-card.credit{inset:auto 0 auto 0;top:auto;bottom:calc(var(--stcard-h,150px) + 26px);display:block;text-align:left;padding:0 22px;background:none}
.sx-card.credit .sx-card-t{font:italic 600 clamp(38px,11vw,64px)/1 var(--display);transform:translateX(-18px);filter:blur(6px);opacity:.001;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .45s ease,opacity .35s ease;
  text-shadow:0 6px 30px rgba(0,0,0,.55)}
.sx-card.credit .sx-card-eb{margin:8px 0 0;font:800 12px/1 var(--text);letter-spacing:.24em;color:#FFD27A;transform:translateX(-10px);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1) .08s,opacity .4s ease .08s;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.sx-card.credit{display:flex;flex-direction:column-reverse;align-items:flex-start}
.sx-card.credit.on .sx-card-t,.sx-card.credit.on .sx-card-eb{transform:none;filter:none;opacity:1}
.sx-card.credit::before{content:"";position:absolute;left:0;right:0;bottom:-40px;height:200px;background:linear-gradient(transparent,rgba(8,10,20,.45));z-index:-1;pointer-events:none}
.sx-card.credit{top:max(128px,17vh);bottom:auto}
.sx-card.credit::before{top:-60px;bottom:auto;height:190px;background:linear-gradient(rgba(8,10,20,.42),transparent)}
/* ============================================================ v10: one step panel
   The story card and the controls are a single panel: the step's full text on top,
   the counter and buttons along its foot. No subtitles. */
.st-cap{display:none!important}
.st-bottom{gap:0;border-radius:24px;background:rgba(252,247,238,.96);box-shadow:0 24px 54px -18px rgba(10,10,40,.55),0 0 0 1px rgba(11,52,65,.05);overflow:hidden;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.st-bottom .st-card{background:none;box-shadow:none;border-radius:0;padding:13px 16px 4px 18px;max-height:none;overflow:visible}
.st-bottom .st-title{font-size:clamp(17px,4.6vw,21px)}
.st-bottom .st-more>div{max-height:min(19vh,168px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.st-bottom .st-body{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#3C4E57}
.st-bottom .st-who{flex-wrap:nowrap;overflow-x:auto;gap:5px;margin:9px -16px 2px -18px;padding:0 16px 2px 18px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent)}
.st-bottom .st-who::-webkit-scrollbar{display:none}
.st-bottom .st-who span{flex:none;padding:3px 9px 3px 6px;font-size:11px;gap:5px}
.st-bottom .st-who i{width:8px;height:8px}
.st-card .st-more,.st-bottom:not(.folded) .st-card .st-more,body.cine .st-bottom:not(.folded) .st-card .st-more{grid-template-rows:1fr;opacity:1}
.st-bottom.folded .st-card .st-more{grid-template-rows:0fr;opacity:0}
.st-bottom .st-fold i{transform:translateY(-2px) rotate(45deg)}
.st-bottom.folded .st-fold i{transform:translateY(2px) rotate(-135deg)}
body.cine .st-bottom .st-card{background:none}
.st-bottom .st-nav{margin:6px 0 0;padding:7px 8px 8px;border:0;border-top:1px solid rgba(11,52,65,.09);border-radius:0;background:rgba(11,52,65,.035);-webkit-backdrop-filter:none;backdrop-filter:none}
.st-bottom .st-nav .navbtn.ghost{color:var(--ink);background:transparent}
.st-bottom .st-nav .navbtn.ghost:hover{background:rgba(11,52,65,.08)}
.st-bottom .st-nav .navbtn:not(.ghost){background:var(--ink);color:#FFF7E9;min-height:42px}
.st-bottom .st-nav .navbtn:not(.ghost):hover{background:#123F4E}
.st-bottom .st-count{color:rgba(11,52,65,.75)}
.st-bottom .st-count:hover{background:rgba(11,52,65,.07)}
.st-bottom .st-segs button{background:rgba(11,52,65,.13)}
.st-bottom .st-segs button::after{background:var(--ink)}
.st-bottom .st-segs button.done::after{opacity:.55}
.st-bottom .st-segs button.cur::after{background:var(--marissa)}
.st-bottom .st-exit{width:42px;height:42px;border-color:rgba(11,52,65,.2);color:var(--ink)}
.st-bottom .st-exit:hover{background:rgba(11,52,65,.08)}
@media (max-width:640px){.st-bottom{width:calc(100vw - 16px);border-radius:22px;bottom:max(8px,env(safe-area-inset-bottom))}
  .st-bottom .st-card{padding:12px 14px 3px 16px}.st-bottom .st-body{font-size:13px}}
/* ============================================================ v11: the smallest possible step panel */
.st-bottom .st-card{padding:10px 16px 2px;display:block}
.st-bottom .st-title{margin:0;font:600 16px/1.2 var(--display);color:var(--ink)}
.st-bottom .st-body{margin:3px 0 0;font:400 12.5px/1.4 var(--text);color:#4A5C64}
.st-bottom .st-body:empty{display:none}
.st-bottom .st-nav{margin-top:6px;padding:5px 6px 6px}
.st-bottom .st-nav .navbtn:not(.ghost){min-height:38px;padding:0 15px}
.st-bottom .st-nav .navbtn.ghost{min-height:38px;padding:0 10px}
.st-bottom .st-exit{width:38px;height:38px;font-size:20px}
.st-bottom .st-prog{gap:5px}
.st-bottom .st-count{font:600 10.5px/1 var(--text);letter-spacing:.08em;padding:3px 8px;white-space:nowrap}
.st-bottom .st-count b{font-weight:800;color:var(--marissa);letter-spacing:.12em;text-transform:uppercase}
.st-bottom .st-segs,.st-bottom .st-segs button{height:4px}
@media (max-width:640px){.st-bottom .st-card{padding:9px 14px 1px}.st-bottom .st-title{font-size:15.5px}.st-bottom .st-body{font-size:12px}}
/* v12: bubbles placed around the speaker, tail toward the mouth */
.sx-bub-in{left:0;top:0;bottom:auto;transform:scale(.94);transform-origin:var(--tx,50%) var(--ty,100%)}
.sx-bub.on .sx-bub-in{transform:none}
.sx-bub.td .sx-bub-in::after{left:var(--tx,50%);bottom:-7px;top:auto;right:auto;margin:0 0 0 -7px;transform:rotate(45deg)}
.sx-bub.tu .sx-bub-in::after{left:var(--tx,50%);top:-7px;bottom:auto;right:auto;margin:0 0 0 -7px;transform:rotate(225deg)}
.sx-bub.tl .sx-bub-in::after{left:-7px;top:var(--ty,50%);bottom:auto;right:auto;margin:-7px 0 0 0;transform:rotate(135deg)}
.sx-bub.tr .sx-bub-in::after{left:auto;right:-7px;top:var(--ty,50%);bottom:auto;margin:-7px 0 0 0;transform:rotate(-45deg)}
/* v13: looking through Kim's binoculars: dark everywhere outside the two overlapping circles */
.sx-binoc{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;z-index:1;background:rgba(4,6,10,.97);
  --r:min(33vw,200px);--o:min(22vw,135px);
  -webkit-mask-image:radial-gradient(circle at calc(50% - var(--o)) 40%,transparent var(--r),#000 calc(var(--r) + 3px)),radial-gradient(circle at calc(50% + var(--o)) 40%,transparent var(--r),#000 calc(var(--r) + 3px));
  mask-image:radial-gradient(circle at calc(50% - var(--o)) 40%,transparent var(--r),#000 calc(var(--r) + 3px)),radial-gradient(circle at calc(50% + var(--o)) 40%,transparent var(--r),#000 calc(var(--r) + 3px));
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sx-binoc.on{opacity:1}
/* v14: the place pill says only where */
@media (max-width:640px){.st-where-tx em{display:none}.st-where{padding:6px 14px 6px 6px;gap:8px}.st-where-tx b{font-size:13px}}
/* v15: a job that links out (the ranger lot on Google Maps) */
.joblist a.joblink{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--c,var(--marissa));text-decoration-thickness:2px;text-underline-offset:3px}
.joblist a.joblink::after{content:"\2197";display:inline-block;margin-left:5px;font-size:.85em;color:var(--c,var(--marissa))}
.joblist a.joblink:hover{text-decoration-thickness:3px}