/* Layout: a riso-printed zine on grainy paper; one dark "photo wall" spread in the middle.
   Halftone cobalt photos, red marker scrawl, yellow sparkles. Single deliberate (light) look. */
:root{
  --paper:#ece5d8; --paper-2:#f8f3ea; --ink:#1c1b22; --cobalt:#2b3fd4; --marker:#e8323f;
  --pink:#ff8fb4; --sun:#ffd23a; --char:#19181c; --muted:#6c665c; --silver:#cfccc6;
  --display:'Bricolage Grotesque','Arial Black',system-ui,sans-serif;
  --serif:'Old Standard TT',Georgia,'Times New Roman',serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --scrawl:'Mansalva','Comic Sans MS',cursive;
  --black:'UnifrakturMaguntia','Old English Text MT',serif;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html.locked, html.locked body{overflow:hidden;height:100%}
body{background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--serif);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
:focus-visible{outline:3px dashed var(--cobalt);outline-offset:4px}
section{position:relative;padding-block:88px;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}

.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html{overflow-x:clip}
[hidden]{display:none!important}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
.flash{position:fixed;inset:0;background:var(--paper-2);opacity:0;pointer-events:none;z-index:95}

/* type */
.scrawl{font-family:var(--scrawl);font-weight:400;line-height:1.05}
.scrawl.red{color:var(--marker);font-size:30px}
.scrawl.yellow{color:var(--sun);font-size:32px}
.scrawl.big{font-size:clamp(54px,15vw,110px)}
h2{font:800 clamp(40px,12vw,92px)/.9 var(--display);font-stretch:80%;letter-spacing:-.035em;text-wrap:balance}
h2 em{font:italic 400 1em/1 var(--serif);letter-spacing:-.02em;color:var(--cobalt)}
h2.light{color:var(--paper-2)} h2.light em{color:var(--pink)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;max-width:640px;margin:0 auto 36px}
.sec-head .scrawl{transform:rotate(-3deg)}
.hint{font:400 13px/1.3 var(--mono);letter-spacing:.06em;color:var(--paper);opacity:.75;text-align:center}
.hint.dark{color:var(--muted);opacity:1}
.btn{background:var(--marker);color:var(--paper-2);border:2.5px solid var(--ink);border-radius:999px;padding:14px 26px;font:700 17px var(--display);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s, box-shadow .15s}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.linkbtn{background:none;border:0;font:13px var(--mono);color:var(--muted);text-decoration:underline;cursor:pointer}
.round{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper-2);font:700 20px var(--display);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.round:active{transform:translate(3px,3px);box-shadow:none}

/* doodles */
.doodle{position:absolute;pointer-events:none;overflow:visible}
.spark{fill:var(--sun);width:42px;height:42px;animation:twinkle 2.4s ease-in-out infinite}
.spark.s2{animation-delay:-.8s;width:30px;height:30px}.spark.s3{animation-delay:-1.6s;width:24px;height:24px}
@keyframes twinkle{50%{transform:scale(.7) rotate(25deg)}}
.draw path{fill:none;stroke:var(--marker);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ============ GATE ============ */
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--paper);overflow:auto;
  padding:calc(24px + env(safe-area-inset-top,0px)) var(--gutter-r) calc(24px + env(safe-area-inset-bottom,0px)) var(--gutter-l)}
.gate-inner{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.gate-kicker{color:var(--marker);font-size:28px;transform:rotate(-3deg)}
.gate-title{font:800 clamp(30px,8vw,46px)/1 var(--display);font-stretch:80%;letter-spacing:-.02em}
.env{position:relative;width:min(340px,86vw);aspect-ratio:1.6;border:11px solid transparent;border-radius:6px;
  background:linear-gradient(var(--paper-2) 0 0) padding-box,repeating-linear-gradient(-45deg,var(--marker) 0 14px,var(--paper-2) 14px 22px,var(--cobalt) 22px 36px,var(--paper-2) 36px 44px) border-box;
  box-shadow:0 18px 30px -12px #1c1b2255;animation:bob 3.2s ease-in-out infinite;text-align:left}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1.2deg)}}
.env-stamp{position:absolute;top:10px;right:10px;width:54px;height:64px;background:var(--pink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 3px,#0000 95%,#000) -4px -4px/8px 8px;mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 3px,#0000 95%,#000) -4px -4px/8px 8px;padding:5px}
.env-stamp svg{width:26px;height:26px;fill:var(--marker)}
.env-stamp span{font:500 9px var(--mono);color:var(--ink)}
.env-postmark{position:absolute;top:18px;right:46px;width:64px;height:64px;border:1.5px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:500 7px var(--mono);letter-spacing:.06em;opacity:.6;transform:rotate(-14deg)}
.env-postmark b{font-size:11px}
.env-to{position:absolute;left:18px;bottom:30px;display:flex;flex-direction:column;line-height:1.1}
.env-to .scrawl{color:var(--marker);font-size:22px}
.env-to b{font:800 32px/1 var(--display);font-stretch:80%}
.env-addr{font:italic 15px var(--serif);color:var(--muted)}
.env-par{position:absolute;left:18px;top:14px;font:500 9px var(--mono);letter-spacing:.14em;color:var(--cobalt)}
.seal{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#ff6b76,var(--marker) 55%,#a5141f);color:#ffd9dc;font:700 26px var(--black);box-shadow:0 6px 12px #0004, inset 0 -4px 8px #0003;animation:pulse 1.8s infinite}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.08)}}
.board{display:flex;gap:8px}
.board div{background:var(--ink);color:var(--sun);border-radius:8px;padding:8px 10px 6px;min-width:58px;position:relative}
.board div::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--paper);opacity:.2}
.board b{display:block;font:500 28px/1 var(--mono);font-variant-numeric:tabular-nums}
.board small{font:400 10px var(--mono);letter-spacing:.1em;color:var(--paper);opacity:.7;text-transform:uppercase}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding-block:72px 96px;overflow:hidden}
.ransom{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;max-width:560px;font-size:clamp(34px,10vw,66px)}
.ransom .word{display:flex;gap:3px;margin:0 8px}
.cut{display:inline-grid;place-items:center;min-width:.9em;padding:.06em .14em;line-height:1 !important;box-shadow:2px 3px 0 #1c1b2230}
.hero-photo{position:relative;width:min(380px,84vw);margin-top:34px}
.ht-frame{display:block;width:100%;border:0;cursor:pointer;position:relative;background:var(--paper-2);padding:10px;transform:rotate(-2deg);box-shadow:0 14px 26px -10px #1c1b2266}
.ht-count{position:absolute;left:16px;bottom:16px;font:500 11px var(--mono);background:var(--paper-2);color:var(--ink);padding:2px 6px}
.tap-me{position:absolute;left:4px;bottom:24%;text-shadow:0 0 4px var(--paper-2),0 0 8px var(--paper-2);color:var(--cobalt);font-size:24px;transform:rotate(-14deg);z-index:3;pointer-events:none;animation:nudge 1.3s infinite}
.wall-title{font:italic 400 clamp(18px,4.6vw,22px)/1.35 var(--serif);color:var(--paper-2);max-width:30ch}
.exh{position:absolute;top:6px;left:6px;z-index:2;font:500 9px var(--mono);letter-spacing:.1em;background:var(--marker);color:var(--paper-2);padding:2px 5px}
.ht{display:block;width:100%;height:auto}
.scrawl-arc{position:absolute;left:-14%;width:128%;top:-62px;overflow:visible;z-index:2}
.scrawl-arc text{font:30px var(--scrawl);fill:var(--marker)}
.hero-name{position:absolute;left:50%;bottom:-48px;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;color:var(--marker);font-size:clamp(56px,16vw,96px);z-index:2;text-shadow:3px 3px 0 var(--paper)}
.hero-photo .s1{top:-30px;right:-30px}.hero-photo .s2{left:-30px;top:44%}.hero-photo .s3{right:-18px;bottom:20%}
.hero-photo .swirl{left:-46px;top:-6px;width:52px;height:52px}
.hero-photo .zig{right:-36px;top:36%;width:56px;height:22px}
.eyes{position:absolute;right:-26px;top:16%;display:flex;gap:2px;z-index:3;transform:rotate(8deg)}
.eyes i{width:30px;height:38px;border-radius:50%;background:var(--paper-2);border:2.5px solid var(--ink);position:relative;display:block}
.eyes b{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--ink);left:50%;top:50%;margin:-6.5px 0 0 -6.5px}
.hero-line{font:italic 400 clamp(20px,5.4vw,28px)/1.3 var(--serif);text-align:center;max-width:22ch;margin-top:50px}
.scroll-cue{position:absolute;bottom:22px;font-size:22px;color:var(--muted)}
.scroll-cue span{display:inline-block;animation:nudge 1.3s infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

/* ============ NEWSPAPER ============ */
.news-sec{padding-block:64px;overflow:hidden}
.newspaper{max-width:620px;margin:0 auto;background:#f3efe6;color:#232220;padding:18px 18px 24px;box-shadow:0 22px 40px -16px #1c1b2280;transform:rotate(-1.5deg);transform-origin:50% 40%}
.np-top{display:flex;justify-content:space-between;gap:8px;font:400 10px var(--serif);border-bottom:1px solid #232220;padding-bottom:6px;align-items:center}
.np-break{font:400 18px var(--black)}
.np-mast{font:400 clamp(38px,11.5vw,74px)/1 var(--black);text-align:center;padding:10px 0 6px;letter-spacing:0;font-stretch:normal;border-bottom:3px double #232220}
.np-sub{display:flex;justify-content:space-between;font:italic 12px var(--serif);border-bottom:1px solid #232220;padding:5px 0;margin-bottom:14px}
.np-head{font:700 clamp(26px,7.4vw,44px)/1.02 var(--serif);text-transform:uppercase;text-align:center;letter-spacing:-.01em;text-wrap:balance}
.np-deck{font:italic 16px/1.4 var(--serif);text-align:center;margin:8px auto 16px;max-width:44ch;border-bottom:1px solid #2322204d;padding-bottom:14px}
.np-cols{display:grid;grid-template-columns:1fr;gap:16px}
.np-fig figcaption{font:italic 12px var(--serif);margin-top:6px;color:#55524c}
.np-fig img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid #232220}
.np-label{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
#facts{list-style:none;display:flex;flex-direction:column;gap:12px}
#facts li{font:700 19px/1.25 var(--serif);border-top:1px solid #23222040;padding-top:10px;position:relative}
#facts li .mark{background:linear-gradient(var(--sun),var(--sun)) no-repeat 0 85%/0% 40%;transition:background-size 1s ease}
#facts li.in .mark{background-size:100% 40%}
@media (min-width:640px){.np-cols{grid-template-columns:1fr 1.1fr}}

/* ============ DISTANCE ============ */
.distance{padding-block:0;overflow:hidden}
.dist-pin{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding-block:56px 40px}
.distance .sec-head{margin-bottom:0}
.distance h2{font-size:clamp(34px,9.5vw,68px)}
.distance .map{max-height:40svh}
.notes{display:flex;gap:18px;justify-content:center}
.sticky{width:128px;padding:12px 10px 10px;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 16px -8px #1c1b2266;position:relative}
.sticky::before{content:"";position:absolute;top:-10px;left:50%;width:54px;height:18px;background:#ffffff8c;transform:translateX(-50%) rotate(-4deg)}
.sticky.yellow{background:var(--sun);transform:rotate(-4deg)}.sticky.pink{background:var(--pink);transform:rotate(3deg)}
.sticky .scrawl{font-size:22px}
.sticky b{font:800 32px/1 var(--display);font-variant-numeric:tabular-nums}
.sticky small{font:400 11px var(--mono);letter-spacing:.06em}
.map{width:min(340px,82vw);height:auto;max-height:52svh;overflow:visible}
.route-ghost{stroke:var(--muted);stroke-width:2;opacity:.6}
.route{stroke:var(--marker);stroke-width:5}
.sketch .ln path{fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.charminar .ln{filter:drop-shadow(2px 1px 0 #2b3fd455)}
.bridge .ln path{stroke:var(--ink)}
.bridge .ln{filter:drop-shadow(2px 1px 0 #1c1b2240)}
.maplbl{font:500 10px var(--mono);letter-spacing:.08em;fill:var(--muted)}
.plane{fill:var(--ink)}
.km-wrap{position:relative;display:flex;align-items:baseline;gap:8px;padding:10px 26px}
.km-wrap b{font:800 clamp(46px,13vw,80px)/1 var(--display);font-stretch:80%;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.km-wrap span{font:500 14px var(--mono)}
.km-circle{position:absolute;inset:-6px -10px;width:calc(100% + 20px);height:calc(100% + 12px)}
.km-circle path{fill:none;stroke:var(--marker);stroke-width:3;stroke-linecap:round}
.dist-end{font-size:clamp(26px,7vw,38px);color:var(--cobalt);text-align:center;max-width:20ch;transform:rotate(-2deg)}

/* ============ PHOTO WALL ============ */
.wall{background:var(--char);color:var(--paper-2);padding-block:96px 120px;overflow:hidden}
.pile{position:relative;max-width:680px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:34px 18px}
.pol{background:var(--paper-2);padding:9px 9px 54px;position:relative;cursor:grab;touch-action:none;user-select:none;box-shadow:0 18px 28px -10px #000c}
.pol:nth-child(even){margin-top:46px}
.pol .media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.pol canvas,.pol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:opacity .6s}
.pol img{opacity:0}.pol.color img{opacity:1}
.pol .cap{position:absolute;left:6px;right:6px;bottom:6px;height:44px;display:grid;place-items:center;font:19px/1.05 var(--scrawl);color:var(--ink);text-align:center;text-wrap:balance;overflow:hidden}
.tape{position:absolute;top:-12px;left:50%;width:70px;height:22px;transform:translateX(-50%) rotate(var(--tr,-5deg));opacity:.85;mix-blend-mode:multiply}
@media (min-width:700px){.pile{grid-template-columns:repeat(3,1fr)}.pol:nth-child(even){margin-top:0}.pol:nth-child(3n+2){margin-top:60px}}

/* ============ CAMERA ============ */
.cam-sec{overflow:hidden}
/* Instax-style instant camera: the print ejects from the top slot and develops */
.instax-stage{--lilac:#c9b7ee;--lilac-d:#a993dc;position:relative;width:min(300px,84vw);margin:0 auto;padding-top:min(270px,72vw)}
.print{--pw:min(176px,50vw);position:absolute;left:50%;bottom:calc(100% - min(270px,72vw));width:var(--pw);margin-left:calc(var(--pw) / -2);background:#fbfaf6;padding:9px 9px 0;aspect-ratio:54/86;
  box-shadow:0 10px 18px -8px #1c1b2266;z-index:1;display:flex;flex-direction:column}
.print-img{position:relative;aspect-ratio:46/62;background:#2a2730;overflow:hidden}
/* landscape photos print on wide film so nobody gets cropped out */
.print.wide{--pw:min(280px,80vw);aspect-ratio:86/66}
.print.wide .print-img{aspect-ratio:62/40}
.print-img canvas{display:block;width:100%;height:100%;transition:filter 2.6s ease,opacity 2.6s ease}
.print.developing canvas{filter:brightness(2.4) contrast(.25) saturate(0) blur(1px);opacity:.25;transition:none}
.print-cap{flex:1;display:grid;place-items:center;font:22px/1 var(--scrawl);color:var(--marker)}
.instax{position:relative;z-index:2;aspect-ratio:.95;border-radius:30px;background:linear-gradient(170deg,#ddd0f7,var(--lilac) 40%,var(--lilac-d));
  box-shadow:inset 0 3px 0 #ffffff99,inset 0 -6px 12px #5a3fa033,0 26px 40px -18px #1c1b2290}
.ix-slot{position:absolute;top:0;left:50%;width:62%;height:7px;margin-left:-31%;background:#5a4a80;border-radius:0 0 6px 6px;opacity:.55}
.ix-flash{position:absolute;top:9%;left:7%;width:30%;height:17%;border-radius:8px;background:repeating-linear-gradient(90deg,#fff 0 3px,#e9e6f2 3px 6px);box-shadow:inset 0 0 0 2px #ffffffcc,0 1px 2px #0002}
.ix-view{position:absolute;top:9%;right:9%;width:13%;aspect-ratio:1;border-radius:7px;background:radial-gradient(circle at 35% 30%,#6c6a80,#15141c 70%);box-shadow:0 0 0 3px #ece6fb}
.ix-lens{position:absolute;left:50%;top:56%;width:52%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#f3eefc 0 58%,#d3c6f2 59% 64%,#efe9fb 65% 100%);box-shadow:0 6px 10px -4px #5a3fa055,inset 0 -3px 6px #5a3fa022;display:grid;place-items:center}
.ix-glass{width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 32%,#ffffffcc 0 6%,transparent 7%),radial-gradient(circle at 50% 50%,#3d3a58 0 30%,#16141f 31% 60%,#2b2840 61%);box-shadow:0 0 0 5px #24213a,0 0 0 7px #cfc3ef}
.ix-brand{position:absolute;left:7%;bottom:8%;font:600 13px var(--display);letter-spacing:.02em;color:#fff;text-shadow:0 1px 0 #5a3fa055}
.ix-brand b{font-weight:800;font-style:italic}
.ix-count{position:absolute;right:30%;bottom:9%;font:500 10px var(--mono);color:#4a3d70;opacity:.8}
.ix-shutter{position:absolute;right:6%;bottom:16%;width:15%;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 40% 35%,#fff,#e6dcfb 60%,#c2b1ea);box-shadow:0 0 0 4px #b7a2e8,0 4px 6px -2px #0004}
.ix-shutter:active{transform:scale(.9)}
.heart-sticker{width:38px;height:38px;fill:var(--pink);right:-12px;top:-14px;transform:rotate(14deg);filter:drop-shadow(1px 1px 0 var(--ink))}
.ix-spark{left:-16px;bottom:22%}
.ix-hint{margin-top:16px;text-align:right}

/* ============ LETTERS ============ */
.letters{background:var(--paper-2)}
.deck-wrap{position:relative;width:min(350px,100%);margin:150px auto 0}
.deck{position:relative;width:100%;height:440px}
.writer{position:absolute;top:-118px;right:-8px;z-index:30;width:132px;background:var(--paper-2);padding:7px 7px 30px;box-shadow:0 12px 20px -8px #1c1b2280;transform:rotate(6deg);pointer-events:none}
.writer .tape{top:-9px;width:48px;height:16px}
.w-pic{position:relative;aspect-ratio:1;overflow:hidden;background:var(--pink)}
.w-pic img{width:100%;height:100%;object-fit:cover;display:block}
.w-init{position:absolute;inset:0;display:grid;place-items:center;font:800 46px/1 var(--display);color:var(--ink)}
.w-name{position:absolute;left:4px;right:4px;bottom:5px;text-align:center;font:21px/1 var(--scrawl);color:var(--marker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note{position:absolute;inset:0;background:#fffdf7;border-radius:3px;padding:44px 22px 22px 46px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  background-image:linear-gradient(90deg,transparent 34px,#e8323f66 34px 36px,transparent 36px),repeating-linear-gradient(transparent 0 31px,#2b3fd422 31px 32px);
  box-shadow:0 14px 26px -12px #1c1b2266;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;touch-action:pan-y;user-select:none;cursor:grab}
.note .tape{top:-6px}
.note .dear{font:30px/1 var(--scrawl);color:var(--marker)}
.note .body{font:400 19px/1.65 var(--serif);flex:1;overflow:auto;min-height:0;white-space:pre-line}
.note.long .body{font-size:16.5px;line-height:1.55}
.note .who{font:28px/1 var(--scrawl);color:var(--cobalt);text-align:right}
.note .role{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.note audio,.note video{width:100%;border-radius:6px}
.deck-ctl{display:flex;justify-content:center;align-items:center;gap:20px;margin:30px 0 14px}
#lcount{font:500 15px var(--mono);font-variant-numeric:tabular-nums;min-width:56px;text-align:center}

/* ============ PASSES ============ */
/* horizontal boarding passes in a swipeable row; gift stub on the right */
.pass-list{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-left:calc(-1 * var(--gutter-l));margin-right:calc(-1 * var(--gutter-r));padding:8px var(--gutter-r) 20px var(--gutter-l)}
.pass-list::-webkit-scrollbar{display:none}
@media (min-width:900px){.pass-list{justify-content:center;flex-wrap:wrap;overflow:visible}}
.pass{flex:0 0 min(520px,90vw);scroll-snap-align:center;position:relative;display:grid;grid-template-columns:1fr auto 38%;background:var(--cobalt);color:var(--paper-2);border-radius:14px;overflow:hidden;
  -webkit-mask:radial-gradient(circle 12px at 62% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at 62% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 12px at 62% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at 62% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.pass:nth-child(2){background:var(--marker)}.pass:nth-child(3){background:var(--ink)}
.pass-top{padding:14px 12px 16px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pass-air{display:flex;justify-content:space-between;font:500 10px var(--mono);letter-spacing:.14em;opacity:.85}
.pass-route{display:flex;align-items:center;justify-content:space-between}
.pass-route b{font:800 clamp(30px,8vw,42px)/1 var(--display);font-stretch:80%}
.pass-route small{display:block;font:400 10px var(--mono);letter-spacing:.08em;opacity:.8}
.pass-route .line{flex:1;margin:0 6px;border-top:2px dashed currentColor;opacity:.6;position:relative}
.pass-fields{display:grid;grid-template-columns:repeat(2,auto);justify-content:space-between;gap:6px 10px}
@media (min-width:520px){.pass-fields{grid-template-columns:repeat(4,auto)}}
.pass-fields span{display:block;font:400 9px var(--mono);letter-spacing:.1em;opacity:.7}
.pass-fields b{font:500 13px var(--mono)}
.pass-perf{border-left:2px dashed #ffffff66;margin:16px 0}
.pass-gift{position:relative;min-height:150px;margin:12px;border-radius:8px;background:var(--paper-2);color:var(--ink);touch-action:none}
.pass-gift .under{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-align:center;padding:8px}
.pass-gift .under b{font:800 17px/1.1 var(--display);font-stretch:85%}
.pass-gift .under span{font:italic 12.5px/1.3 var(--serif);color:var(--muted)}
.pass-gift canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;transition:opacity .5s}

/* ============ FINALE ============ */
.finale{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-bottom:140px;overflow:hidden}
.finale .big{transform:rotate(-4deg)}
#cake{width:min(290px,76vw);margin-top:16px;cursor:pointer;overflow:visible}
.riso{transform:translate(5px,4px);mix-blend-mode:multiply}
.cake-ln path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.flame path{fill:var(--marker);stroke:var(--ink);stroke-width:2}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .45s infinite alternate}
.flame.out{opacity:0;transform:scale(.2) translateY(-20px);transition:all .4s;animation:none}
@keyframes flick{from{transform:rotate(-5deg)}to{transform:rotate(5deg) scaleY(1.1)}}
.final{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:22px;width:100%}
.final-card{background:var(--paper-2);max-width:440px;width:100%;padding:26px 24px;text-align:left;transform:rotate(-1deg);box-shadow:0 18px 30px -14px #1c1b2277;display:flex;flex-direction:column;gap:14px}
.final-card .scrawl{font-size:30px;color:var(--marker)}
.final-text{font:italic 400 20px/1.5 var(--serif);min-height:4.5em;white-space:pre-line}
.final-card .sign{text-align:right;color:var(--cobalt)}
.see-you{font-size:30px;display:flex;align-items:center;gap:10px}
.mini-plane{width:36px;height:30px;fill:var(--ink);animation:fly 2.6s ease-in-out infinite}
@keyframes fly{50%{transform:translate(10px,-8px) rotate(-8deg)}}

.music{position:fixed;z-index:70;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:var(--sun);font-size:20px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.music.on{background:var(--pink);animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.ht-count{display:none}