html{-webkit-text-size-adjust:100%}img{max-width:100%}[hidden]{display:none!important}
/* Layout: the page is one flight. A dashed route weaves from takeoff (hero) through each stop
   to a runway footer, and the nav is a preflight checklist that ticks itself off as you go. */
:root{
  color-scheme:light;
  --ink:#1b2250; --ink-soft:#3f4a85;
  --sky-top:#4fc0ea; --sky-bot:#c9eef6;
  --paper:#fffaf0; --paper-line:#ecd5b2;
  --sun:#ffd43b; --sun-band:#ffe27a;
  --red:#e5432d; --grass:#6fbf3b; --indigo:#2f3a8c; --pink:#d93a9b;
  --board:#141833; --board-fg:#ffe9a8; --board-dim:#8f96c4;
  --on-dark:#fffaf0; --on-accent:#ffffff;
  --card:#ffffff; --route:rgba(27,34,80,.3); --cloud:#ffffff;
  --note:#fffdf2; --note-ink:#1b2250; --note-rule:#bfe0ee;
  --note-a:#fff3a6; --note-b:#ffc9e3; --note-c:#c8f0c0; --note-d:#bfe6fb;
  --shade:rgba(27,34,80,.22);
  --f-display:"Shantell Sans","Comic Sans MS","Trebuchet MS",sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-stamp:"Special Elite","Courier New",monospace;
  --f-hand:"Patrick Hand","Shantell Sans","Comic Sans MS",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.2vw,5.2rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:800}
h3{font-size:1.3rem;font-weight:700}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}
.wrap{position:relative;z-index:2;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.stamp{font-family:var(--f-stamp);text-transform:uppercase;letter-spacing:.09em;font-size:.82rem}
.lede{font-size:1.2rem;max-width:34em}
.stack{display:flex;flex-direction:column;gap:1rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font:700 1.05rem var(--f-display);text-decoration:none;border:3px solid var(--note-ink);border-radius:999px;padding:.7em 1.3em;background:var(--red);color:var(--on-accent);box-shadow:0 5px 0 var(--note-ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--note-ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--note-ink)}
.btn.sun{background:var(--sun);color:var(--note-ink)}
.btn.plain{background:var(--note);color:var(--note-ink)}
.btn.small{font-size:.9rem;padding:.45em 1em;box-shadow:0 4px 0 var(--note-ink)}

/* nav: the preflight checklist */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:3px solid var(--ink)}
.nav-in{display:flex;align-items:center;gap:1rem;max-width:1120px;margin-inline:auto;padding:.55rem clamp(16px,4vw,40px)}
.logo{font:800 1.25rem var(--f-display);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.logo i{display:block;width:34px;height:20px;border-radius:3px;background:var(--board);background-image:linear-gradient(90deg,var(--on-dark) 0 5px,transparent 5px 9px,var(--on-dark) 9px 13px,transparent 13px 100%),repeating-linear-gradient(90deg,transparent 0 17px,var(--sun) 17px 22px,transparent 22px 25px);background-size:100% 100%,100% 3px;background-position:0 0,0 50%;background-repeat:no-repeat}
.nav-list{display:flex;gap:1.1rem;margin:0 0 0 auto;padding:.2rem 0;list-style:none;overflow-x:auto;min-width:0;scrollbar-width:none}
.nav-list::-webkit-scrollbar{display:none}
.nav-list a{display:flex;align-items:center;gap:.4rem;text-decoration:none;font:600 .95rem var(--f-body);white-space:nowrap}
.nav-list a:hover{text-decoration:underline;text-decoration-thickness:2px}
.tick{flex:none;display:inline-grid;place-items:center;width:1em;height:1em;border:2px solid currentColor;border-radius:3px;font-size:.95em}
.tick::after{content:"";width:.34em;height:.62em;border:solid var(--red);border-width:0 .17em .17em 0;transform:translateY(-.06em) rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.seen .tick::after,.tick.on::after{transform:translateY(-.06em) rotate(45deg) scale(1)}

/* route */
main{position:relative;overflow-x:clip}
#route{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none}
#route path{fill:none;stroke:var(--route);stroke-width:3;stroke-dasharray:2 12;stroke-linecap:round}
#routePlane{position:absolute;left:0;top:0;width:34px;height:34px;z-index:1;pointer-events:none;will-change:transform}
#routePlane svg,#cursorPlane svg,.flyby svg{display:block;width:100%;height:100%}

/* bands */
.band{position:relative;background:var(--band);padding-block:clamp(3.5rem,8vw,6.5rem);scroll-margin-top:3.4rem}
.band::before{content:"";position:absolute;left:0;right:0;top:-19px;height:20px;background:radial-gradient(circle at 20px 20px,var(--band) 19.5px,transparent 20px) repeat-x;background-size:40px 20px}
.b-paper{--band:var(--paper)}
.b-indigo{--band:var(--indigo);color:var(--on-dark)}
.b-sun{--band:var(--sun-band)}
.b-sky{--band:var(--sky-bot)}
.b-grass{--band:var(--grass);color:var(--note-ink)}
.head{display:flex;flex-direction:column;gap:.8rem;margin-bottom:clamp(1.8rem,4vw,3rem);max-width:44rem}
.head .stamp{display:flex;align-items:center;gap:.6rem}

/* hero */
.hero{position:relative;background:linear-gradient(var(--sky-top),var(--sky-bot));padding-block:clamp(2.5rem,7vw,5.5rem) clamp(7rem,13vw,10rem);overflow:hidden}
#sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sun-disc{position:absolute;left:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:var(--sun);opacity:.9;box-shadow:0 0 0 26px rgba(255,212,59,.28),0 0 0 60px rgba(255,212,59,.14)}
.hero .wrap{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.hero-copy{max-width:36rem;display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}
.hero h1 span{display:inline-block;transform:rotate(-2deg);background:var(--sun);color:var(--note-ink);padding:0 .18em;border-radius:.12em;box-shadow:4px 5px 0 var(--note-ink)}
.cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hill{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(60px,9vw,120px);z-index:1;display:block}
.hill path{fill:var(--grass)}
.hill .fence path{fill:var(--on-dark);opacity:.92}
@media (max-width:760px){.hero{padding-bottom:24rem}}

/* book */
.b-grass::before{display:none}
.book-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.book3d{perspective:1500px;display:grid;place-items:center;padding-block:1rem}
.book{position:relative;width:min(360px,74vw);aspect-ratio:900/913;transform-style:preserve-3d;transform:rotateY(var(--ry,-28deg)) rotateX(var(--rx,7deg));transition:transform .25s ease-out}
.book>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px 5px 5px 2px;transform:translateZ(15px);backface-visibility:hidden}
.book .back{position:absolute;inset:0;background:var(--note-ink);border-radius:2px 5px 5px 2px;transform:translateZ(-15px);box-shadow:-18px 26px 40px var(--shade)}
.book .edge{position:absolute;top:4px;bottom:4px;left:100%;width:30px;margin-left:-18px;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#fff 0 2px,#e7dcc6 2px 3px)}
.book .spine{position:absolute;top:0;bottom:0;left:0;width:30px;margin-left:-15px;transform:rotateY(90deg);background:#63c4e6}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.facts li{border:2px solid var(--note-ink);border-radius:999px;padding:.2em .85em;font-weight:600;font-size:.92rem;background:var(--note);color:var(--note-ink)}
.blurb{font-size:1.12rem;max-width:34em}
.blurb strong{font-family:var(--f-display);font-size:1.3rem}
.peek{margin-top:clamp(2.5rem,6vw,4rem);display:flex;flex-direction:column;gap:1rem}
.reel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.6rem;padding:.4rem 8px 1rem 2px}
.reel figure{min-width:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.reel img{display:block;width:100%;height:auto;aspect-ratio:1500/761;border:3px solid var(--note-ink);border-radius:10px;background:var(--note);box-shadow:6px 7px 0 var(--note-ink)}
.reel figcaption{font:500 1rem var(--f-display)}

/* departures board */
.board-scroll{overflow-x:auto;border-radius:16px;border:4px solid var(--on-dark);background:var(--board);box-shadow:0 14px 0 rgba(0,0,0,.25)}
.board{width:100%;border-collapse:collapse;font-family:var(--f-stamp);color:var(--board-fg);font-size:clamp(.9rem,1.9vw,1.15rem);font-variant-numeric:tabular-nums}
.board th{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--board-dim);text-align:left;font-weight:400;padding:1rem 1rem .5rem}
.board td{padding:.85rem 1rem;border-top:1px solid rgba(255,233,168,.16);white-space:nowrap}
.board td.dest{font-size:1.25em}
.board .go{color:#8df58a}
.board .wait{color:var(--board-dim)}
.board .blink{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#8df58a;margin-right:.5em;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.flap{display:inline-block;min-width:11ch}
.flap.turn{animation:flap .35s ease-in}
@keyframes flap{0%{transform:rotateX(0)}50%{transform:rotateX(90deg);opacity:.3}100%{transform:rotateX(0)}}
.board-note{margin-top:1.4rem;max-width:40em}
@media (max-width:620px){.board .fl{display:none}}

/* activities: notes on the fridge */
.act-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.paper{position:relative;background:var(--note);color:var(--note-ink);padding:2.4rem 1.6rem 1.8rem;box-shadow:8px 10px 0 var(--shade);transform:rotate(-1.4deg);background-image:repeating-linear-gradient(transparent 0 2.55rem,var(--note-rule) 2.55rem calc(2.55rem + 2px));background-position:0 3.6rem;
  clip-path:polygon(0 12px,4% 12px,4% 0,9% 0,9% 12px,15% 12px,15% 0,20% 0,20% 12px,26% 12px,26% 0,31% 0,31% 12px,37% 12px,37% 0,42% 0,42% 12px,48% 12px,48% 0,53% 0,53% 12px,59% 12px,59% 0,64% 0,64% 12px,70% 12px,70% 0,75% 0,75% 12px,81% 12px,81% 0,86% 0,86% 12px,92% 12px,92% 0,97% 0,97% 12px,100% 12px,100% 100%,0 100%)}
.paper.mine{transform:rotate(1.2deg)}
.paper h3{font:700 1.5rem/2.55rem var(--f-display);color:#8a2a1c}
.paper ol{list-style:none;margin:0;padding:0;counter-reset:n}
.paper li{counter-increment:n;display:flex;align-items:center;gap:.7rem;height:2.55rem;font:700 1.35rem var(--f-display)}
.paper li::before{content:counter(n);width:1.1em;color:#8a2a1c;font-weight:500}
.paper label{display:flex;align-items:center;gap:.7rem;cursor:pointer;flex:1;min-width:0}
.paper input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:1.5rem;height:1.5rem;margin:0;border:3px solid var(--note-ink);border-radius:5px;background:#fff;display:grid;place-items:center;cursor:pointer}
.paper input[type=checkbox]::after{content:"";width:.45rem;height:.85rem;border:solid var(--red);border-width:0 .28rem .28rem 0;transform:translateY(-.1rem) rotate(45deg) scale(0);transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.paper input[type=checkbox]:checked::after{transform:translateY(-.1rem) rotate(45deg) scale(1)}
.paper input:checked+span{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.paper input[type=text]{flex:1;min-width:0;border:0;background:transparent;font:500 1.25rem var(--f-display);color:var(--note-ink);height:2.3rem;padding:0}
.paper input[type=text]::placeholder{color:#8c93b8}
.paper .sign{font:700 1.5rem/2.55rem var(--f-display);color:#8a2a1c;padding-left:1.8rem}
.name-row{display:flex;align-items:baseline;gap:.4rem;height:2.55rem;font:700 1.4rem var(--f-display);color:#8a2a1c}
.name-row input[type=text]{color:#8a2a1c;font-weight:700;font-size:1.4rem;flex:0 1 9ch}
.magnet{position:absolute;top:18px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8f7d,var(--red) 60%);box-shadow:2px 3px 0 var(--shade)}
.cleared{font:400 1.25rem var(--f-stamp);letter-spacing:.08em;text-transform:uppercase;color:var(--red);border:4px double var(--red);padding:.5rem .8rem .3rem;display:inline-block;transform:rotate(-5deg);margin-top:1.2rem;background:var(--note);animation:thunk .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes thunk{from{transform:rotate(-5deg) scale(2.2);opacity:0}}
.col{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;margin-top:clamp(2.5rem,6vw,4rem)}
.note{position:relative;padding:2.3rem 1.2rem 1.3rem;color:var(--note-ink);box-shadow:5px 6px 0 var(--shade);display:flex;flex-direction:column;gap:.5rem}
.note:nth-child(1){background:var(--note-a);transform:rotate(-1.5deg)}
.note:nth-child(2){background:var(--note-b);transform:rotate(1deg)}
.note:nth-child(3){background:var(--note-c);transform:rotate(1.3deg)}
.note:nth-child(4){background:var(--note-d);transform:rotate(-.8deg)}
.note:nth-child(2) .magnet{background:radial-gradient(circle at 35% 30%,#9ee88a,#3d9a2a 60%)}
.note:nth-child(3) .magnet{background:radial-gradient(circle at 35% 30%,#ffe98a,#e0a800 60%)}
.note:nth-child(4) .magnet{background:radial-gradient(circle at 35% 30%,#b9a4ff,#5b3fd0 60%)}
.note .stamp{font-size:.72rem;color:#8a2a1c}
.note p{font-size:.98rem;line-height:1.45}
@media (min-width:900px){.notes{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* grown-ups */
.dedication{font:500 clamp(1.3rem,3vw,1.9rem)/1.5 var(--f-display);border-left:6px solid var(--sun);padding-left:1.2rem;margin:0 0 clamp(2rem,5vw,3.5rem)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem)}
.trio div{display:flex;flex-direction:column;gap:.6rem}
.trio h3{padding-bottom:.4rem;border-bottom:4px solid var(--c)}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.polaroid{background:var(--note);padding:12px 12px 14px;box-shadow:8px 10px 0 var(--shade);transform:rotate(-3deg);max-width:400px;justify-self:center}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:1}
.polaroid figcaption{font:500 1rem var(--f-display);color:var(--note-ink);text-align:center;padding-top:.6rem}
figure{margin:0}
.about-text{display:flex;flex-direction:column;gap:2rem}
.about-text p{max-width:34em;font-size:1.12rem}

/* sign-up */
.signup{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.signup input{flex:1 1 16rem;min-width:0;font:500 1.05rem var(--f-body);padding:.8em 1.1em;border:3px solid var(--note-ink);border-radius:999px;background:var(--note);color:var(--note-ink)}
.form-msg{font-weight:700;min-height:1.6em}
.socials{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:3px solid var(--note-ink);border-radius:999px;background:var(--note);color:var(--note-ink);box-shadow:0 4px 0 var(--note-ink);transition:transform .12s,box-shadow .12s}
.socials a:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--note-ink)}
.socials a:active{transform:translateY(3px);box-shadow:0 1px 0 var(--note-ink)}
.socials svg{width:22px;height:22px;fill:currentColor}

/* runway footer */
.runway{position:relative;background:var(--board);color:var(--on-dark);padding:3.2rem clamp(16px,4vw,40px) calc(2.4rem + env(safe-area-inset-bottom,0px));text-align:center;overflow:hidden}
.runway::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,var(--on-dark) 0 26px,transparent 26px 40px)}
.runway::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,var(--sun) 0 60px,transparent 60px 110px)}
.runway .big{font:800 clamp(1.6rem,5vw,2.8rem) var(--f-display)}
.runway small{display:block;margin-top:1rem;color:var(--board-dim);font-size:.9rem}

/* airplane cursor */
#cursorPlane{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;z-index:999;pointer-events:none;will-change:transform;filter:drop-shadow(2px 3px 0 var(--shade))}
html.plane-cursor,html.plane-cursor *{cursor:none!important}
.puff{position:fixed;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cloud);border:1.5px solid var(--ink-soft);z-index:998;pointer-events:none;animation:puff .7s ease-out forwards}
@keyframes puff{to{transform:scale(2.4);opacity:0}}
.flyby{position:fixed;left:0;top:38%;width:110px;height:110px;z-index:997;pointer-events:none;animation:flyby 2.2s cubic-bezier(.5,0,.6,1) forwards}
@keyframes flyby{0%{transform:translate(-140px,30vh) rotate(-18deg)}55%{transform:translate(55vw,-6vh) rotate(-24deg)}100%{transform:translate(115vw,-55vh) rotate(-34deg)}}

/* handwriting on the checklists and captions */
.paper h3,.paper li,.paper .sign,.name-row,.paper input[type=text],.name-row input[type=text],.reel figcaption,.polaroid figcaption{font-family:var(--f-hand);font-weight:400}
.paper li{font-size:1.6rem}
.paper input[type=text]{font-size:1.5rem}
.paper h3,.paper .sign,.name-row,.name-row input[type=text]{font-size:1.75rem}
.reel figcaption,.polaroid figcaption{font-size:1.3rem;line-height:1.25}
/* sticker rule: one outline, one hard shadow */
.note,.polaroid{border:3px solid var(--note-ink);box-shadow:6px 6px 0 var(--note-ink)}
/* cursor manners */
html.plane-cursor input[type=text],html.plane-cursor input[type=email]{cursor:text!important}
#cursorPlane{transition:opacity .12s}
#cursorPlane.hot path{fill:var(--sun)}
/* QR arrivals, phones only */
.qr-banner{display:none;background:var(--sun);color:var(--note-ink);font:700 1rem var(--f-display);text-align:center;padding:.65rem 16px;border-bottom:3px solid var(--note-ink);text-decoration:none}
.qr-banner u{text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:760px){.qr-banner{display:block}}
/* buy options */
.nav-buy{flex:none}
.buy{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;scroll-margin-top:5rem;width:100%}
.buy-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;width:100%;max-width:31rem}
.buy-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .8rem;background:var(--note);color:var(--note-ink);border:3px solid var(--note-ink);border-radius:14px;padding:.65rem 1rem;box-shadow:4px 4px 0 var(--note-ink)}
.buy-list b{font:700 1.12rem var(--f-display)}
.buy-list span{flex:1 1 11rem;min-width:0;font-size:.96rem}
.buy-list em{font:400 .72rem var(--f-stamp);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:#8a2a1c}
.tally{font:700 1.15rem var(--f-display)}

/* windsock button, planted on the hill below the plane */
.windsock{position:absolute;z-index:3;left:75%;bottom:clamp(18px,3.2vw,44px);width:clamp(170px,19vw,236px);transform:translateX(-38%);background:none;border:0;padding:0;cursor:pointer;color:var(--note-ink)}
.windsock svg{display:block;width:100%;height:auto;overflow:visible}
.ws-pole{stroke:var(--note-ink);stroke-width:6;stroke-linecap:round}
.ws-cap{fill:var(--sun);stroke:var(--note-ink);stroke-width:3}
.ws-mound{fill:var(--note-ink);opacity:.18}
.ws-cream{fill:var(--note)}
.ws-red{fill:var(--red)}
.ws-line{fill:none;stroke:var(--note-ink);stroke-width:3;stroke-linejoin:round}
.ws-text{font:800 19px var(--f-display);fill:var(--note-ink)}
.ws-sock{transform-origin:24px 59px;transform-box:view-box;animation:sway 3.6s ease-in-out infinite}
.windsock:hover .ws-sock{animation:gust .7s ease-in-out infinite}
.windsock.go .ws-sock{animation:gust .32s ease-in-out 4}
@keyframes sway{0%,100%{transform:rotate(2.5deg) skewY(1deg)}50%{transform:rotate(-2deg) skewY(-1deg)}}
@keyframes gust{0%,100%{transform:rotate(-5deg) skewY(-2deg)}50%{transform:rotate(-9deg) skewY(2deg)}}
@media (max-width:760px){.windsock{left:50%;bottom:10px;width:176px;transform:translateX(-40%)}}
/* coming soon */
.hero.soon{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero.soon .signup{width:100%;max-width:34rem}
.hero.soon .wrap{width:100%}
.note{padding-top:3.1rem}
.hero.soon small{position:relative;z-index:2;font-size:.9rem}
/* preview-only page switcher */
.pv{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:center;justify-content:center;background:var(--board);color:var(--on-dark);font:600 .85rem var(--f-body);padding:.45rem 16px}
.pv b{font:400 .72rem var(--f-stamp);letter-spacing:.1em;text-transform:uppercase;color:var(--board-fg)}
/* unlock page + teaser */
.hero.mini{padding-block:clamp(2rem,5vw,3.5rem) clamp(6rem,12vw,9rem)}
.hero.mini .wrap{flex-direction:row;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,5vw,4rem)}
.hero.mini .hero-copy{flex:1 1 20rem;min-width:0}
.mini-cover{flex:0 1 240px;min-width:0;border:3px solid var(--note-ink);border-radius:3px 10px 10px 3px;box-shadow:8px 8px 0 var(--note-ink);transform:rotate(3deg);display:block;height:auto}
.nav-back{margin-left:auto;font-weight:700;white-space:nowrap}
.unlock{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:clamp(2rem,5vw,3rem);background:var(--note);color:var(--note-ink);border:3px solid var(--note-ink);border-radius:18px;box-shadow:6px 6px 0 var(--note-ink);padding:1.2rem 1.4rem}
.unlock p{flex:1 1 18rem;min-width:0;font:700 1.25rem/1.3 var(--f-display)}
.pack{margin-top:clamp(2rem,5vw,3rem);max-width:40rem;display:flex;flex-direction:column;gap:.8rem}
.pack small{font-size:.92rem;color:var(--ink-soft)}
.pack-files{margin-top:clamp(2rem,5vw,3rem);display:flex;flex-direction:column;gap:1rem;scroll-margin-top:6rem}
.pack-files ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem}
.pack-files small{font-size:.92rem;color:var(--ink-soft)}
.act-grid+.head,.notes+.pack{margin-top:clamp(2.5rem,6vw,4rem)}

@media (max-width:820px){
  .book-grid,.act-grid,.about-grid,.trio{grid-template-columns:minmax(0,1fr)}
  .logo span{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}