/* The Set List: the home page as a stack of the band's paper.
   Each sheet is one screen that slides up and covers the one before.
   Marker = headlines, ballpoint = margin notes, Hanken = everything you read. */
:root{--ink:#17130e;--pen:#1d3784;--cream:#EEE5D1;--gold:#D4AF4F;--teal:#46B7C6;--hdr:60px}
html{scroll-behavior:smooth}
body.home{margin:0;background:#050507;color:#EDE7DC;font-family:'Hanken Grotesk',system-ui,sans-serif}
.marker{font-family:'Permanent Marker',cursive;font-weight:400}
.hand{font-family:'Mynerve',cursive;font-weight:400}
.eyebrow{margin:0;font:600 12px/1.2 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase}

/* ---------- header: name, text links, one CTA ---------- */
.site-hdr{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(7,7,9,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(237,231,220,.08);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.site-hdr__in{max-width:1200px;margin:0 auto;height:var(--hdr);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box}
.site-hdr__name{font:600 16px/1 'Bodoni Moda',serif;letter-spacing:.22em;color:#EDE7DC;text-decoration:none;white-space:nowrap}
.site-hdr__nav{display:flex;align-items:center;gap:28px}
.txt{font:500 15px/1 'Hanken Grotesk',system-ui,sans-serif;color:#CFC7BA;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.txt:hover,.txt:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.site-hdr .cut{font:700 14px/1 'Hanken Grotesk',system-ui,sans-serif;padding:11px 18px !important}
.site-hdr__menu{display:none}
html.is-gated .site-hdr{transform:translateY(-110%)}
html.is-gated,html.is-gated body{overflow:hidden}
@media (max-width:860px){
  .site-hdr__nav{display:none}
  .site-hdr__menu{display:block;position:relative}
  .site-hdr__menu summary{list-style:none;cursor:pointer;font:600 15px/1 'Hanken Grotesk';color:#EDE7DC;padding:10px 4px}
  .site-hdr__menu summary::-webkit-details-marker{display:none}
  .site-hdr__menu[open] .site-hdr__drop{display:flex}
  .site-hdr__drop{display:none;position:absolute;right:0;top:calc(100% + 10px);flex-direction:column;gap:18px;align-items:flex-end;padding:20px 22px;background:#0b0b0e;border:1px solid rgba(237,231,220,.12);border-radius:10px;min-width:220px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
}

/* ---------- the stack ---------- */
.stack{position:relative}
.sheet{position:sticky;top:var(--stick,0px);min-height:100vh;min-height:100svh;display:flex}
.sheet + .sheet::before{content:"";position:absolute;left:0;right:0;top:-38px;height:44px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none;z-index:1}
.paper{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:calc(var(--hdr) + 48px) 24px 64px;box-sizing:border-box;overflow:hidden;
  -webkit-mask:url(/assets/paper/torn-top.png) 0 0/1600px 28px repeat-x,linear-gradient(#000,#000) 0 26px/100% calc(100% - 26px) no-repeat;
          mask:url(/assets/paper/torn-top.png) 0 0/1600px 28px repeat-x,linear-gradient(#000,#000) 0 26px/100% calc(100% - 26px) no-repeat}
.sheet:first-child .paper{-webkit-mask:none;mask:none}
.paper__in{position:relative;z-index:1;width:100%;max-width:1040px}

/* paper stocks */
.paper--stage{background:#050507}
.paper--stage::before{content:"";position:absolute;inset:-10%;background:
  radial-gradient(38% 34% at 34% 34%,rgba(70,183,198,.18),transparent 70%),
  radial-gradient(40% 36% at 66% 38%,rgba(232,112,84,.14),transparent 70%),
  radial-gradient(46% 40% at 50% 28%,rgba(120,72,140,.2),transparent 72%);filter:blur(18px);pointer-events:none}
.paper--flyer{background:#121214 url(/assets/paper/flyer-black.webp) center/cover;color:#F1EBDD}
.paper--crumpled{background:#EEE5D1 url(/assets/paper/crumpled.webp) center/cover;color:var(--ink)}
.paper--lined{background:
  linear-gradient(90deg,transparent 0,transparent calc(8% - 1px),rgba(205,70,70,.45) calc(8% - 1px),rgba(205,70,70,.45) calc(8% + 1px),transparent calc(8% + 1px)),
  repeating-linear-gradient(180deg,transparent 0,transparent 43px,rgba(60,110,190,.22) 43px,rgba(60,110,190,.22) 44px),
  url(/assets/paper/crumpled.webp) center/cover,#EEE5D1;color:var(--ink)}
.paper--dawn{background:linear-gradient(180deg,#E9A07A 0%,#F3C9A4 45%,#F6ECDC 100%);color:#1A1012}
.paper--dawn::after{content:"";position:absolute;inset:0;background:url(/assets/paper/grain.webp);mix-blend-mode:multiply;opacity:.5;pointer-events:none}

/* props */
.coffee{position:absolute;width:clamp(170px,22vw,300px);aspect-ratio:1;background:url(/assets/paper/coffee-ring.webp) center/contain no-repeat;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.stripe{position:absolute;width:132px;height:34px;background:rgba(232,224,196,.62);box-shadow:0 1px 2px rgba(0,0,0,.18);z-index:2;pointer-events:none;
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 2%,88% 0,92% 9%,96% 1%,100% 10%,100% 92%,96% 100%,92% 90%,88% 98%,12% 100%,8% 91%,4% 99%,0 90%)}
.scrawl{display:inline-block;position:relative}
.scrawl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.18em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C40 3, 80 11, 120 6 S180 4, 198 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.85}
.paper--flyer .scrawl::after{filter:invert(1)}
.hand--pen{color:var(--pen)}
.hand--pen .scrawl::after{filter:invert(16%) sepia(60%) saturate(3000%) hue-rotate(215deg) brightness(70%)}

/* ---------- 0 · gate ---------- */
.gate .paper{flex-direction:column;justify-content:center;padding-top:28px;padding-bottom:40px}
.gate .hero__stage{width:min(86vw,780px,calc((100svh - 380px) * 2.21));padding:0 0 4px;animation:none}
.gate .mood{padding:0 16px}
.gate .mood__q{font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(28px,3.4vw,42px);letter-spacing:.01em;margin:4px 0 18px}
.gate .mood__q em{font-style:normal;color:var(--gold)}
.gate .mood__foot{flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.silent{font:400 21px/1.2 'Mynerve',cursive;color:#D9D1C4;background:none;border:0;cursor:pointer;padding:4px 2px;position:relative}
.silent:hover{color:#fff}
.silent::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;opacity:.4;transform:rotate(-.6deg)}
.cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:400 19px/1 'Mynerve',cursive;color:#BDB5A7;text-decoration:none;opacity:0;transition:opacity .6s ease .4s}
html:not(.is-gated) .cue{opacity:.85}
.cue span{display:inline-block;animation:cue-bob 1.8s ease-in-out infinite}
@keyframes cue-bob{50%{transform:translateY(5px)}}

/* ---------- 1 · hero flyer ---------- */
.flyer{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.flyer .eyebrow{color:var(--gold)}
.flyer h1{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;line-height:.98;letter-spacing:.005em;font-size:clamp(46px,7.6vw,112px);color:#F3EDE0;text-wrap:balance}
.flyer h1 span{display:block;font-size:.62em;color:var(--gold);margin-top:.22em;transform:rotate(-1.5deg)}
.flyer__sub{margin:0;font:400 clamp(26px,3vw,38px)/1.2 'Mynerve',cursive;color:#F1EBDD}
.ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px}

/* ---------- 2 · story (crumpled notebook page) ---------- */
.story{max-width:900px;display:flex;flex-direction:column;gap:26px}
.story h2{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(34px,4.6vw,62px);line-height:1.08;color:var(--ink);text-wrap:balance}
.story__note{margin:0;font:400 clamp(28px,3.2vw,40px)/1.2 'Mynerve',cursive;transform:rotate(-1.6deg);transform-origin:left}
.story__body{margin:0;max-width:680px;font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:#2B241B}
.story .coffee{right:-40px;top:-60px}

/* ---------- 3 · why we exist (photocopy) ---------- */
.why{max-width:940px;display:flex;flex-direction:column;gap:24px}
.why .eyebrow{color:var(--teal)}
.why h2{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(32px,4.4vw,58px);line-height:1.08;color:#F3EDE0;text-wrap:balance}
.why__body{margin:0;font-size:clamp(19px,2vw,25px);line-height:1.5;color:#D9D1C4;max-width:800px}
.sticker{align-self:flex-start;position:relative;margin-top:8px;padding:18px 26px 20px;background:#EEE5D1 url(/assets/paper/grain.webp);background-blend-mode:multiply;color:var(--pen);transform:rotate(-2deg);box-shadow:0 2px 2px rgba(0,0,0,.35),0 14px 24px rgba(0,0,0,.45);
  clip-path:polygon(0 3%,3% 0,97% 2%,100% 0,99% 96%,100% 100%,2% 98%,0 100%)}
.sticker p{margin:0;font:400 clamp(22px,2.4vw,30px)/1.25 'Mynerve',cursive}

/* ---------- 4 · set list ---------- */
.setlist{max-width:900px;display:grid;grid-template-columns:1fr;gap:18px}
.setlist__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.setlist__head h2{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(48px,6.4vw,88px);line-height:1;color:var(--ink);letter-spacing:.02em}
.setlist__head p{margin:0;font:400 clamp(22px,2.4vw,30px)/1.2 'Mynerve',cursive;color:var(--pen)}
.songs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:song}
.songs li{counter-increment:song;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.songs li::before{content:counter(song) ".";font-family:'Permanent Marker',cursive;font-size:clamp(22px,2.4vw,30px);color:#8a8173;width:1.6em}
.song{font-family:'Permanent Marker',cursive;font-size:clamp(26px,3.1vw,42px);line-height:1.1;color:var(--ink);text-transform:uppercase}
.song-note{font:400 clamp(19px,2vw,25px)/1.2 'Mynerve',cursive;color:var(--pen)}
.songs li.cut-song .song{position:relative;color:#8a8173}
.songs li.cut-song .song::after{content:"";position:absolute;left:-4px;right:-6px;top:52%;height:4px;background:var(--ink);transform:rotate(-1.5deg);border-radius:2px}
.songs li.encore::before{content:"★";color:#B5382F}
.songs li.encore .song{color:#B5382F}
.setlist__foot{margin:8px 0 0;font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:#3A3226;max-width:640px}
.setlist .stripe.one{top:-14px;left:8%;transform:rotate(-6deg)}
.setlist .stripe.two{top:-10px;right:10%;transform:rotate(5deg)}
.setlist .coffee{right:-30px;bottom:-80px;opacity:.75}

/* ---------- 5 · two ways in (ticket stubs) ---------- */
.ways{display:flex;flex-direction:column;gap:30px;align-items:center}
.ways__title{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(36px,4.6vw,60px);color:#F3EDE0;text-align:center}
.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;width:100%}
.ticket{position:relative;padding:26px 28px 28px;color:var(--ink);background:#EEE5D1 url(/assets/paper/grain.webp);background-blend-mode:multiply;
  box-shadow:0 2px 3px rgba(0,0,0,.35),0 20px 36px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px;
  -webkit-mask:radial-gradient(circle 14px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 14px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.ticket:nth-child(1){transform:rotate(-1.2deg)}
.ticket:nth-child(2){transform:rotate(1deg);background-color:#F3CDB0}
.ticket__top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px dashed rgba(23,19,14,.35);padding-bottom:10px}
.ticket__admit{font:700 11px/1 'Hanken Grotesk';letter-spacing:.3em;text-transform:uppercase;color:#6b6152}
.ticket h3{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1}
.ticket__tag{margin:0;font:400 22px/1.2 'Mynerve',cursive;color:var(--pen)}
.ticket__lead{margin:0;font-size:16px;line-height:1.5;color:#2B241B}
.ticket ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:15.5px}
.ticket li{display:flex;gap:8px;align-items:baseline}
.ticket li .dots{flex:1;border-bottom:2px dotted rgba(23,19,14,.3);transform:translateY(-4px)}
.ticket li b{font-weight:700;white-space:nowrap}
.ticket .cut{align-self:flex-start;margin-top:auto}
.stamp{position:absolute;right:18px;top:62px;width:108px;height:108px;border-radius:50%;border:3px solid rgba(181,56,47,.75);color:rgba(181,56,47,.85);display:flex;align-items:center;justify-content:center;text-align:center;font:800 11px/1.25 'Hanken Grotesk';letter-spacing:.06em;text-transform:uppercase;transform:rotate(-14deg);mix-blend-mode:multiply;padding:10px;box-sizing:border-box}
.stamp::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px solid rgba(181,56,47,.6)}

/* ---------- 6 · guest list ---------- */
.guest{max-width:860px;padding-left:4%}
.guest h2{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(46px,6vw,80px);line-height:1;color:var(--ink)}
.guest__sub{margin:6px 0 22px;font:400 clamp(22px,2.4vw,30px)/1.2 'Mynerve',cursive;color:var(--pen)}
.guests{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.guests li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-height:44px;padding-top:6px;box-sizing:border-box}
.guests .who{font:400 clamp(20px,2.3vw,28px)/1.3 'Mynerve',cursive;color:var(--pen)}
.guests .who::before{content:"✓";display:inline-block;margin-right:10px;color:#B5382F;transform:rotate(-8deg) scale(1.2)}
.guests .what{font-size:15px;color:#4A4134}

/* ---------- 7 · close ---------- */
.close{max-width:900px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.close h2{margin:0;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(42px,6vw,82px);line-height:1.02;color:#1A1012}
.close p{margin:0;font-size:19px;line-height:1.55;color:#3A2A26}
.foot{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px 24px 26px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;border-top:1px solid rgba(26,16,18,.18);font-size:14px;color:#3A2A26}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:#3A2A26;text-decoration:none;border-bottom:1px solid rgba(58,42,38,.3)}
.foot a:hover{color:#000;border-bottom-color:#000}
.foot__name{font:600 14px 'Bodoni Moda',serif;letter-spacing:.18em;color:#1A1012}
.close-sheet .paper{padding-bottom:140px}

@media (max-width:640px){
  .paper{padding:calc(var(--hdr) + 36px) 20px 56px}
  .gate .hero__stage{width:min(92vw,calc((100svh - 420px) * 2.21))}
  .story .coffee{right:-70px;top:-50px}
  .stamp{width:92px;height:92px;top:auto;bottom:24px;right:14px;font-size:9.5px}
  .foot{position:static;margin-top:48px}
  .close-sheet .paper{padding-bottom:24px;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sheet{position:relative;top:auto}
  .cue span{animation:none}
}

/* fixes after first render */
.home .ctas .cut,.home .ticket .cut,.home .close .cut{font:700 17px/1 'Hanken Grotesk',system-ui,sans-serif;padding:15px 26px !important}
.home .ticket .cut{font-size:15px;padding:13px 22px !important}
.songs li{display:block;position:relative;padding-left:2.1em}
.songs li::before{position:absolute;left:0;top:.18em;width:auto}
.songs .song-note{margin-left:14px;white-space:normal}
.stamp{top:auto;bottom:76px;right:22px}
.guests li{display:block;min-height:0;padding:4px 0 6px}
.guests .what{margin-left:12px;white-space:nowrap}

/* ===== licensed art pass (10/9): real paper, tickets and tape ===== */
#hero .paper{background:#1a1a1a url(/assets/paper/grunge-5.webp) center/cover}
#why .paper{background:#1a1a1a url(/assets/paper/grunge-4.webp) center/cover}
#story .paper{background:#EFE6D6 url(/assets/paper/paper-notebook.webp) center/cover}
#method .paper{background:#E9DCC2 url(/assets/paper/paper-lined-margin.webp) left center/cover}
#proof .paper{background:#EEE7D8 url(/assets/paper/paper-lined-torn.webp) center/cover}
#start .paper{background:#F1E6D2 url(/assets/paper/paper-aged-cream.webp) center/cover}
#start .paper::after{background:linear-gradient(180deg,rgba(233,160,122,.55),rgba(243,201,164,.35) 50%,rgba(246,236,220,0) 100%);mix-blend-mode:multiply;opacity:1}
#ways .paper{background:#7a2a22 url(/assets/paper/poster-wall.webp) center/cover}
#ways .paper::before{display:none}
#ways .paper::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,rgba(0,0,0,0),rgba(0,0,0,.35));pointer-events:none}
.guest{padding-left:0}

/* tape: primary calls to action are a strip of kraft tape with marker on it */
.tapebtn{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:62px;padding:0 70px 0 34px;
  font:400 20px/1 'Permanent Marker',cursive;letter-spacing:.01em;color:#1c140b !important;text-decoration:none;white-space:nowrap;
  border-style:solid;border-width:0;border-image:url(/assets/paper/tape-kraft.webp) 0 330 0 110 fill / 0 78px 0 26px stretch;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 7px 10px rgba(0,0,0,.28));transform:rotate(-1.2deg);transition:transform .16s ease,filter .16s ease}
.tapebtn:hover{transform:rotate(0) translateY(-2px);filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)) drop-shadow(0 11px 14px rgba(0,0,0,.3))}
.tapebtn:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.tapebtn--sm{height:42px;padding:0 50px 0 22px;font-size:15px;border-image-width:0 53px 0 18px}
.ctas .tapebtn:nth-child(1){transform:rotate(-2deg)}
.ctas .cut{align-self:center}

/* tape pieces holding paper down */
.tapepiece{position:absolute;z-index:3;width:190px;height:auto;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.setlist .tapepiece.one{top:-70px;left:-60px;transform:rotate(-24deg)}
.setlist .tapepiece.two{top:-64px;right:-40px;transform:rotate(18deg) scaleX(-1)}

/* the sticker is real graph paper with its own tape */
.sticker{background:url(/assets/paper/sticker-graph.webp) center/100% 100% no-repeat;aspect-ratio:1200/778;width:min(520px,100%);box-sizing:border-box;padding:15% 11% 9%;
  display:flex;align-items:center;justify-content:center;text-align:center;clip-path:none;box-shadow:none;filter:drop-shadow(0 14px 20px rgba(0,0,0,.55));transform:rotate(-2.5deg)}
.sticker p{font-size:clamp(22px,2.5vw,30px)}

/* ticket stubs: the real tickets, taped to the poster wall */
.ways__title{display:inline-flex;align-items:center;height:96px;padding:0 120px 0 54px;color:#1c140b;font-size:clamp(34px,4vw,54px);
  border-style:solid;border-width:0;border-image:url(/assets/paper/tape-kraft.webp) 0 330 0 110 fill / 0 118px 0 40px stretch;transform:rotate(-1.5deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.tickets{grid-template-columns:1fr;max-width:940px;gap:40px;margin:0 auto}
.ticket{-webkit-mask:none;mask:none;box-shadow:none;background:url(/assets/paper/ticket-admit.webp) center/100% 100% no-repeat;aspect-ratio:1400/609;
  display:grid;grid-template-columns:1.1fr 1fr;gap:10px 34px;align-items:center;padding:4.5% 7% 4.5% 22%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));box-sizing:border-box}
.ticket:nth-child(2){background-color:transparent;background-image:url(/assets/paper/ticket-worn.webp);padding-left:17%}
.ticket__main,.ticket__side{display:flex;flex-direction:column;gap:8px}
.ticket__side{gap:14px}
.ticket__kicker{margin:0;font:700 11px/1 'Hanken Grotesk';letter-spacing:.3em;text-transform:uppercase;color:#6b6152}
.ticket .tapebtn{align-self:flex-start;margin-top:4px}
.ticket .tapepiece.tick{top:-30px;left:44%;width:170px;transform:rotate(-4deg)}
.ticket:nth-child(2) .tapepiece.tick{left:auto;right:12%;transform:rotate(5deg) scaleX(-1)}
.ticket .stamp{right:6%;bottom:9%;top:auto}
@media (max-width:760px){
  .ways__title{height:72px;padding:0 90px 0 36px;border-image-width:0 88px 0 30px}
  .ticket{aspect-ratio:609/1400;background-image:url(/assets/paper/ticket-admit-tall.webp);grid-template-columns:1fr;align-content:start;padding:44% 10% 10%}
  .ticket:nth-child(2){background-image:url(/assets/paper/ticket-worn-tall.webp);padding:36% 10% 10%}
  .ticket .stamp{right:8%;bottom:6%}
  .setlist .tapepiece{width:130px}
  #method .paper{background-position:8% center}
  .tapebtn{height:56px;font-size:18px;padding:0 62px 0 28px;border-image-width:0 70px 0 23px}
}
/* set list: write to the right of the red margin, like a real page */
@media (min-width:761px){
  #method .paper{background-size:auto 100%;background-position:0 0;background-repeat:repeat-x;justify-content:flex-start;padding-left:calc(36.2vh + 48px)}
  #method .paper__in{max-width:900px}
}
@media (max-width:760px){ #method .paper{background-size:auto 100%;background-position:-340px 0} }
/* ticket stubs measured: admit stub ≈ 21% wide, worn stub ≈ 25% */
.ticket{padding-left:25%}
.ticket:nth-child(2){padding-left:30%}
.songs li.cut-song .song{text-decoration:line-through;text-decoration-thickness:5px;text-decoration-color:var(--ink)}
.songs li.cut-song .song::after{display:none}
@media (max-width:760px){
  .ticket{padding:52% 9% 9%;width:92%;justify-self:center}
  .ticket:nth-child(2){padding:62% 9% 9%}
  .ticket__lead{font-size:15px}
  .tickets{gap:30px}
}
.ticket .stamp{top:9%;right:4%;bottom:auto}
@media (max-width:760px){ .ticket .stamp{top:5%;right:7%;bottom:auto} }

/* ===== round-2 art pass (10/9): cassettes, pins, marker marks, stamp, clip ===== */
/* hero: black folded photocopy; "small business consulting" on a torn label, pinned through */
#hero .paper{background:#161616 url(/assets/paper/photocopy-black.webp) center/cover}
.flyer .eyebrow.label{position:relative;display:inline-block;padding:20px 46px 20px 58px;color:#1b1610;font-size:13px;letter-spacing:.3em;
  background:url(/assets/paper/label3.webp) center/100% 100% no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));transform:rotate(-1.5deg)}
.label__pin{position:absolute;left:-34px;top:50%;width:118px;transform:translateY(-58%) rotate(-6deg);pointer-events:none}

/* why: dot-matrix printout */
#why .paper{background:#121212 url(/assets/paper/dotmatrix.webp) center/cover}

/* set list: stapled, the cut song scribbled out in red marker, the encore circled */
.setlist .staple{position:absolute;z-index:3;top:-22px;left:-26px;width:96px;transform:rotate(-38deg);pointer-events:none}
.songs li.cut-song .song{text-decoration:none;color:#5a5246}
.songs li.cut-song .song::after{display:block;content:"";position:absolute;left:-3%;right:-4%;top:6%;bottom:-6%;height:auto;transform:rotate(-1deg);border-radius:0;
  background:url(/assets/paper/red-scribble.webp) center/100% 100% no-repeat;mix-blend-mode:multiply;opacity:.92}
.songs li.encore .song{position:relative;color:var(--ink)}
.songs li.encore::before{content:counter(song) ".";color:#8a8173}
.songs li.encore .song::after{content:"";position:absolute;left:-7%;right:-8%;top:-34%;bottom:-38%;background:url(/assets/paper/red-circle.webp) center/100% 100% no-repeat;mix-blend-mode:multiply;transform:rotate(-2deg);pointer-events:none}

/* two ways in: a real rubber stamp */
.ticket .stamp{width:118px;height:auto;aspect-ratio:1;border:0;padding:18px;color:#F7EEDD;font:800 11px/1.2 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.06em;
  background:url(/assets/paper/stamp-ring.webp) center/contain no-repeat;mix-blend-mode:normal;opacity:.93;transform:rotate(-14deg)}
.ticket .stamp::before{content:none}

/* guest list: clipped, checked off in red */
.guest{position:relative}
.guest .clip{position:absolute;z-index:3;top:-96px;right:2%;width:210px;transform:rotate(58deg);pointer-events:none;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.35))}
.guests .who::before{content:"";width:.9em;height:.95em;margin-right:12px;vertical-align:-.1em;transform:rotate(-4deg);background:url(/assets/paper/red-check1.webp) center/contain no-repeat;mix-blend-mode:multiply}
.guests li:nth-child(3n+2) .who::before{background-image:url(/assets/paper/red-check2.webp);transform:rotate(3deg)}
.guests li:nth-child(3n) .who::before{background-image:url(/assets/paper/red-check3.webp)}

/* close: black crayon under the question */
.close h2{position:relative}
.close h2::after{content:"";position:absolute;left:50%;bottom:-.32em;width:min(78%,560px);height:.42em;transform:translateX(-50%) rotate(-1deg);background:url(/assets/paper/crayon-under.webp) center/100% 100% no-repeat;mix-blend-mode:multiply;opacity:.85}

@media (max-width:640px){
  .label__pin{width:92px;left:-26px}
  .flyer .eyebrow.label{padding:16px 30px 16px 46px;font-size:11px;letter-spacing:.22em}
  .ticket .stamp{width:96px;padding:14px;font-size:9.5px}
  .guest .clip{width:150px;top:-70px}
  .setlist .staple{width:74px;left:-14px}
}
/* cross-out follows each wrapped line */
.songs li.cut-song .song::after{content:none}
.songs li.cut-song .song{background:url(/assets/paper/red-scribble.webp) 0 55%/100% 78% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 4px;color:#4d463b}
/* the clip holds the top edge of the page, not the middle of it */
.guest{position:static}
.guest .clip{top:calc(var(--hdr) - 18px);right:14%;width:200px;transform:rotate(84deg)}
@media (max-width:640px){ .guest .clip{width:140px;top:30px;right:8%} }

/* ===== gate v3 (10/9): one-of-a-kind cassettes, handwritten labels, the deck shows what's playing ===== */
.gate .paper{background:linear-gradient(180deg,rgba(5,5,7,.86),rgba(5,5,7,.78) 45%,rgba(5,5,7,.92)),#050507 url(/assets/paper/gate-mixtapes.webp) center/cover}
.gate .hero__stage{width:min(80vw,600px,calc((100svh - 520px) * 2.21))}
.gate .mood{max-width:1120px;padding:6px 16px 0}
.gate__grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,640px);gap:20px 44px;align-items:center;justify-content:center}
/* the deck: a real tape deck; your vibe is written on the cassette inside it */
.np{display:flex;flex-direction:column;align-items:center;gap:12px}
.np__deck{position:relative;width:100%;aspect-ratio:960/636;border-radius:6px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,.6),0 18px 34px rgba(0,0,0,.6);transform:rotate(-1.2deg);background:#2a2118}
.np__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.np__lbl{position:absolute;left:32.6%;width:36%;top:20.6%;height:9.4%;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;
  font:400 clamp(15px,1.75vw,24px)/1 'Permanent Marker',cursive;color:#1b1610;transform:rotate(-1.5deg);mix-blend-mode:multiply;opacity:.92}
.np__lbl.is-idle{font-family:'Mynerve',cursive;color:#1d3784;font-size:clamp(14px,1.5vw,20px)}
.np__lbl.hand-pen{font-family:'Mynerve',cursive;font-size:clamp(16px,1.85vw,25px)}
.np__lbl.hand-red{color:#b3221f}.np__lbl.hand-blue{color:#1d3784}
.np.is-loading .np__lbl{animation:np-blink .5s steps(2) infinite}
@keyframes np-blink{50%{opacity:.35}}
.gate .mood__bar{margin:0;min-height:0;gap:6px 16px}
.gate .mood__term{transform:rotate(1deg)}
.gate .mood__kill{font:400 18px/1 'Mynerve',cursive;color:#E9E1D3;background:none;border:0;padding:4px 2px;cursor:pointer;border-bottom:1px solid rgba(233,225,211,.4)}
.gate .mood__kill:hover{color:#fff}
/* the pick */
.gate__pick{position:relative;display:flex;flex-direction:column;align-items:center}
.gate .mood__q{font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.08;margin:0 0 18px;color:#F3EDE0}
.gate .mood__q em{display:block;font-style:normal;color:var(--gold);transform:rotate(-1.5deg)}
.doodle{position:absolute;pointer-events:none;user-select:none}
.gate .mood__tapes{--w:clamp(120px,10.6vw,148px);display:grid;grid-template-columns:repeat(8,calc(var(--w) / 2));justify-content:center;gap:16px 8px;max-width:none;padding:4px 0}
.gate .mood__tapes .tape.cas{grid-column:span 2;justify-self:center}
.gate .mood__tapes .tape.cas:nth-child(5){grid-column:2/span 2}
/* cassettes */
.gate .tape.cas{position:relative;width:var(--w);aspect-ratio:var(--ar,600/370);min-height:0;padding:0;display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.55));font:inherit;letter-spacing:0;text-transform:none;color:#15110c}
.gate .tape.cas::before{clip-path:none;background:var(--img) center/100% 100% no-repeat}
.gate .tape.cas::after{content:"";position:absolute;inset:-14% -10%;background:url(/assets/paper/red-circle.webp) center/100% 100% no-repeat;opacity:0;transform:rotate(-4deg) scale(.9);transition:opacity .2s ease,transform .25s ease;pointer-events:none}
.gate .tape.cas[aria-pressed="true"]::after{opacity:.95;transform:rotate(-4deg) scale(1)}
.gate .tape.cas:nth-child(1){--r:-3deg}.gate .tape.cas:nth-child(2){--r:2deg}.gate .tape.cas:nth-child(3){--r:-1.5deg}.gate .tape.cas:nth-child(4){--r:2.5deg}
.gate .tape.cas:nth-child(5){--r:-2deg}.gate .tape.cas:nth-child(6){--r:1.5deg}.gate .tape.cas:nth-child(7){--r:-2.5deg}
.gate .tape.cas:hover{transform:rotate(0) translateY(-4px) scale(1.05)}
.gate .tape.cas[aria-pressed="true"]{transform:rotate(0) translateY(-5px) scale(1.06);filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)) drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.cas__lbl{position:absolute;left:var(--lx);top:var(--ly);width:var(--lw);height:var(--lh);display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font:400 calc(var(--w) * .118)/1 'Permanent Marker',cursive;color:#16120c;transform:rotate(-2deg);pointer-events:none}
.cas[data-hand~="pen"] .cas__lbl{font-family:'Mynerve',cursive;font-size:calc(var(--w) * .135);color:#1d3784;transform:rotate(-1deg)}
.cas[data-hand~="ink"] .cas__lbl{color:#15110c}
.cas[data-hand~="red"] .cas__lbl{color:#b3221f}
.cas[data-hand~="blue"] .cas__lbl{color:#1d3784}
.cas--punk{--img:url(/assets/paper/cas-punk.webp);--ar:600/379;--lx:17%;--ly:10%;--lw:72%;--lh:19%}
.cas--retro{--img:url(/assets/paper/cas-retro.webp);--ar:600/376;--lx:12%;--ly:10%;--lw:78%;--lh:19%}
.cas--funky{--img:url(/assets/paper/cas-funky.webp);--ar:600/348;--lx:10%;--ly:9%;--lw:80%;--lh:20%}
.cas--business{--img:url(/assets/paper/cas-business.webp);--ar:600/377;--lx:19%;--ly:12%;--lw:74%;--lh:19%}
.cas--classy{--img:url(/assets/paper/cas-classy.webp);--ar:600/357;--lx:8%;--ly:7%;--lw:84%;--lh:20%}
.cas--chill{--img:url(/assets/paper/cas-chill.webp);--ar:600/380;--lx:10%;--ly:8%;--lw:62%;--lh:16%}
.cas--spacey{--img:url(/assets/paper/cas-spacey.webp);--ar:600/362;--lx:8%;--ly:7%;--lw:84%;--lh:19%}
.gate .mood__foot{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin-top:22px}
.gate .mood__hint,.gate .mood__phone{flex-basis:100%;text-align:center}
@media (max-width:900px){
  .gate__grid{grid-template-columns:minmax(0,420px);justify-items:center}
  .np{width:min(78vw,340px)}
  .gate .hero__stage{width:min(70vw,calc((100svh - 600px) * 2.21))}
}
@media (max-width:640px){
  .gate .paper{padding-top:18px;padding-bottom:20px}
  .gate__grid{gap:12px}
  .np{width:min(64vw,270px);gap:6px}
  .gate .mood__q{font-size:24px;margin-bottom:10px}
  .gate .mood__q em{display:inline}
  .gate .mood__tapes{--w:min(118px,calc((100vw - 84px) / 3));grid-template-columns:repeat(6,calc(var(--w) / 2));gap:10px 6px}
  .gate .mood__tapes .tape.cas:nth-child(5){grid-column:auto/span 2}
  .gate .mood__tapes .tape.cas:nth-child(7){grid-column:3/span 2}
  .gate .mood__kill{font-size:16px}
  .gate .mood__foot{margin-top:12px}
}
html.is-gated .cue{pointer-events:none}
@media (max-width:640px){
  .gate .hero__stage{width:min(78vw,calc((100svh - 590px) * 2.21))}
  .np{width:min(54vw,230px)}
  .np__lbl{font-size:13px}.np__lbl.is-idle{font-size:12px}.np__lbl.hand-pen{font-size:14px}
  .gate .mood__term{padding:6px 12px;font-size:12px}
  .gate .mood__q em{display:block}
}
@media (max-width:640px) and (max-height:700px){
  .np{width:min(46vw,190px)}
  .gate .mood__q{font-size:21px;margin-bottom:8px}
}
/* 10/9 rev: one line ask, handwriting that looks like a real hand, doodles on the tapes themselves */
:root{--hand:'Nothing You Could Do','Mynerve',cursive}
.gate .mood__q{font-size:clamp(22px,2.2vw,30px);margin:0 0 16px}
.cas--classy{--ly:10.5%}
.gate .silent{font:400 22px/1.2 var(--hand);letter-spacing:.01em}
.cue{font:400 19px/1 var(--hand)}
.gate .mood__kill{font-family:var(--hand);font-size:18px}
.np__lbl.is-idle,.np__lbl.hand-pen{font-family:var(--hand)}
.cas[data-hand~="pen"] .cas__lbl{font-family:var(--hand);font-size:calc(var(--w) * .125)}
.cas__doodle{position:absolute;pointer-events:none;mix-blend-mode:multiply;opacity:.9}
.cas__doodle--punk{width:11%;right:5%;top:31%;transform:rotate(14deg)}
.cas__doodle--retro{width:9%;right:3%;top:24%;transform:rotate(-10deg)}
.cas__doodle--spacey{width:8%;right:6%;top:8%;transform:rotate(6deg)}
@media (max-width:640px){
  .gate .mood__q{font-size:21px;margin-bottom:10px}
  .gate .silent{font-size:20px}
}
.gate .mood__q{color:var(--gold);transform:rotate(-1.5deg)}
/* the deck is the status now: red LED between STOP and TIMER, press STOP (or the note) to kill the music */
.gate .mood__term{display:none}
.np__led{position:absolute;left:87.7%;top:88.8%;width:1.5%;aspect-ratio:1;min-width:7px;border-radius:50%;transform:translate(-50%,-50%);background:#5a1a16;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.mood.is-playing .np__led{background:#ff3b30;box-shadow:0 0 4px #ff3b30,0 0 12px rgba(255,59,48,.8);animation:np-led 1.1s steps(2,jump-none) infinite}
@keyframes np-led{0%{opacity:1}50%{opacity:.25}}
.np__stop{display:none;position:absolute;left:69%;top:78%;width:18%;height:22%;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mood.is-playing .np__stop{display:block}
.np__stop:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:6px}
.gate .mood__bar{position:relative;width:100%;justify-content:flex-start;padding-left:30%;box-sizing:border-box;min-height:34px}
.gate .mood__kill{position:relative;font-size:20px;border-bottom:0;padding:6px 4px}
.mood__kill-arrow{position:absolute;left:calc(100% + 4px);top:30%;width:64px;transform:rotate(-28deg);transform-origin:0 50%;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .mood.is-playing .np__led{animation:none} }
@media (max-width:640px){ .gate .mood__kill{font-size:16px} .mood__kill-arrow{width:40px;transform:rotate(-30deg)} .gate .mood__bar{min-height:28px;padding-left:6%} .np__led{min-width:5px} }
/* slide 2 rev: label moved to "Why we exist", tape comes in more than one colour, real handwriting */
.eyebrow.label{position:relative;display:inline-block;padding:20px 46px 20px 58px;color:#1b1610;font-size:13px;letter-spacing:.3em;
  background:url(/assets/paper/label3.webp) center/100% 100% no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));transform:rotate(-1.5deg)}
.why .eyebrow.label{color:#1b1610;align-self:flex-start}
.tapebtn--cream{border-image-source:url(/assets/paper/tape-cream.webp)}
.tapebtn--green{border-image-source:url(/assets/paper/tape-green.webp)}
.tapebtn--red{border-image-source:url(/assets/paper/tape-red.webp)}
.ctas .tapebtn--cream{transform:rotate(1.6deg)}
.ctas .tapebtn--cream:hover{transform:rotate(0) translateY(-2px)}
.flyer__sub{font-family:var(--hand);font-size:clamp(28px,3.2vw,40px)}
@media (max-width:640px){ .eyebrow.label{padding:16px 30px 16px 46px;font-size:11px;letter-spacing:.22em} }
#hero .paper{background-size:auto 160%;background-position:center top}
#hero .paper{background-image:radial-gradient(60% 42% at 50% 50%,rgba(0,0,0,.38),rgba(0,0,0,0) 75%),url(/assets/paper/photocopy-black.webp);background-size:100% 100%,auto 160%;background-position:center,center top;background-repeat:no-repeat}
/* the pin goes through the label's left end on a diagonal, clear of the words */
.eyebrow.label{padding-left:66px}
.label__pin{left:-30px;top:50%;width:104px;transform:translate(0,-50%) rotate(-38deg);transform-origin:50% 50%}
@media (max-width:640px){ .eyebrow.label{padding-left:52px} .label__pin{width:84px;left:-24px} }
.sticker p{font-family:var(--hand);font-size:clamp(21px,2.2vw,28px);line-height:1.3}
@media (max-width:640px){ .sticker p{font-size:21px;line-height:1.22} }
/* set list rev: stapled in a hurry, intro under the lane line, notes in the real hand */

#method .paper > .staple{position:absolute;z-index:3;width:84px;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.staple--tl{left:26px;top:calc(var(--hdr) + 26px);transform:rotate(-33deg)}
.staple--tr{right:38px;top:calc(var(--hdr) + 18px);transform:rotate(21deg)}
.staple--bl{left:34px;bottom:30px;transform:rotate(-8deg);width:76px !important}
.setlist__head p,.song-note{font-family:var(--hand)}
.setlist__head p{font-size:clamp(24px,2.5vw,32px)}
.setlist__foot{margin:-6px 0 6px}
@media (max-width:760px){
  .staple--tl{left:16px;top:calc(var(--hdr) + 14px)}
  .staple--tr{right:14px;top:calc(var(--hdr) + 10px)}
  .staple--bl{left:14px;bottom:18px}
  #method .paper > .staple{width:64px}
}
.songs{gap:10px}
.song{font-size:clamp(24px,2.5vw,36px)}
.songs .song-note{display:block;margin:2px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.2}
.songs li.encore .song::after{top:-30%;bottom:-30%}
.songs li.encore .song-note{color:#b3221f;font-size:clamp(20px,1.8vw,25px)}
@media (max-width:640px){ .song{font-size:21px} .songs .song-note{font-size:17px} .songs{gap:8px} }
.songs li.encore .song::after{top:-26%;bottom:-18%}
.songs li.encore .song-note{color:var(--pen);font-size:clamp(21px,2vw,27px);margin-top:8px}
#method .song-note,#method .setlist__head p,#method .setlist__foot{text-shadow:0 0 2px #E6D8BC,0 0 4px #E6D8BC,0 0 6px #E6D8BC}
@media (min-width:761px){
  #method .songs.is-ruled{gap:0}
  #method .songs.is-ruled li{box-sizing:border-box;display:block}
  #method .songs.is-ruled li::before{top:calc(var(--pt,0px) + .2em)}
  #method .songs.is-ruled .song{line-height:1.05}
  #method .songs.is-ruled .song-note{line-height:1.1;margin-top:3px}
}
.songs li.encore .song::after{top:-16%;bottom:-16%;left:-5%;right:-6%}
@media (min-width:761px){
  #method .song{font-size:clamp(22px,min(2.5vw,3.6vh),36px)}
  #method .songs .song-note{font-size:clamp(16px,min(1.6vw,2.3vh),22px)}
  #method .songs li.encore .song-note{font-size:clamp(17px,min(2vw,2.6vh),27px)}
  #method .setlist__head h2{font-size:clamp(40px,min(6.4vw,8.5vh),88px)}
  #method .paper{padding-top:calc(var(--hdr) + 3vh);padding-bottom:4vh}
}
/* staples: messy, bent, doubled up, like it was stapled in a rush */
#method .paper > .stp{position:absolute;z-index:3;height:auto;pointer-events:none;mix-blend-mode:multiply;filter:contrast(1.15)}
.stp--a{width:96px;left:14px;top:calc(var(--hdr) + 8px);transform:rotate(-18deg)}
.stp--b{width:104px;right:22px;top:calc(var(--hdr) + 12px);transform:rotate(14deg) scaleX(-1)}
.stp--c{width:86px;left:10px;bottom:22px;transform:rotate(-24deg)}
.stp--d{width:78px;right:30px;bottom:26px;transform:rotate(9deg)}
.stp--e{width:80px;left:46px;top:calc(var(--hdr) + 40px);transform:rotate(31deg)}
.stp--f{width:96px;right:12px;top:52%;transform:rotate(-82deg)}
@media (max-width:760px){
  #method .paper > .stp{transform-origin:center;scale:.72}
  .stp--a{left:0}.stp--e{left:30px}.stp--b{right:4px}.stp--f{right:-14px}.stp--c{left:0}.stp--d{right:-6px;bottom:4px}
}

/* ===== slide 6 rev: two tickets on one screen, no tape but the buttons, a stamp that says what it covers ===== */
.tapebtn--teal{border-image-source:url(/assets/paper/tape-teal.webp)}
.tapebtn--gold{border-image-source:url(/assets/paper/tape-gold.webp)}
.ways{gap:clamp(14px,2.4vh,26px)}
.ways__title{height:auto;padding:0;border:0;border-image:none;filter:none;color:#F3EDE0;font-size:clamp(34px,min(4vw,6vh),56px);transform:rotate(-1.5deg);text-shadow:0 3px 14px rgba(0,0,0,.55)}
.tickets{gap:clamp(16px,2.6vh,30px)}
@media (min-width:761px){
  #ways .paper{padding-top:calc(var(--hdr) + 3vh);padding-bottom:3vh}
  .ticket{width:min(820px,calc((100svh - var(--hdr) - 6vh - 100px - 2.6vh) / 2 * 1400 / 609));justify-self:center;container-type:inline-size;gap:1.2cqw 4cqw}
  .ticket__main,.ticket__side{gap:1cqw}
  .ticket__side{gap:1.8cqw}
  .ticket__kicker{font-size:max(9px,1.35cqw)}
  .ticket h3{font-size:max(22px,5cqw)}
  .ticket__tag{font:400 max(15px,2.7cqw)/1.15 var(--hand)}
  .ticket__lead{font-size:max(12px,1.95cqw);line-height:1.45}
  .ticket ul{font-size:max(11.5px,1.85cqw);gap:.8cqw}
  .ticket .tapebtn{--th:max(40px,7cqw);height:var(--th);font-size:max(14px,2.25cqw);padding:0 calc(var(--th) * 1.1) 0 calc(var(--th) * .5);border-image-width:0 calc(var(--th) * 1.26) 0 calc(var(--th) * .42)}
  .ticket .stamp{width:max(104px,17cqw);top:6%;right:3%}
}
.ticket .stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:16%;font:800 10px/1.15 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#F8EFDF;text-align:center}
.ticket .stamp small{font-size:.8em;letter-spacing:.12em;opacity:.95;border-bottom:1px solid rgba(248,239,223,.6);padding-bottom:2px;margin-bottom:1px}
.ticket .stamp b{font:400 2.6em/1 'Permanent Marker',cursive;letter-spacing:0;text-transform:none}
@media (min-width:761px){ .ticket .stamp{font-size:max(8.5px,1.25cqw)} }
@media (max-width:760px){
  .ticket{aspect-ratio:auto;padding:46% 8% 12%;width:92%}
  .ticket:nth-child(2){padding:58% 8% 12%}
  .ticket ul{font-size:14px}
  .ticket li{flex-wrap:wrap}
  .ticket__tag{font-family:var(--hand);font-size:21px}
  .ticket .stamp{width:118px;top:4%;right:6%;font-size:9px}
}
.ticket .stamp{padding:1.6em 1.1em;box-sizing:border-box;height:auto}
@media (min-width:761px){
  .ticket{width:min(820px,calc((100svh - var(--hdr) - 6vh - 130px) / 2 * 1400 / 609))}
  .ticket .stamp{width:max(100px,15cqw);top:5%;right:2.5%}
  .ticket:nth-child(2) .ticket__side ul{gap:.5cqw}
  .ticket:nth-child(2) .ticket__side{padding-top:9cqw}
}
@media (min-width:761px){ .ticket .stamp{width:max(100px,16.5cqw)} }
@media (min-width:761px) and (max-height:820px){
  /* short laptop screens: keep the tickets readable and let the sheet run a little long */
  .ticket{width:min(720px,88vw)}
  .ways__title{font-size:clamp(28px,5vh,48px)}
}
@media (max-width:760px){
  .ticket li .dots{display:none}
  .ticket li{justify-content:space-between;gap:2px 10px}
  .ticket li span:first-child{flex:1 1 auto;min-width:0}
  .ticket .stamp small{font-size:.72em;letter-spacing:.06em}
  .ticket .stamp{padding:1.9em 1.2em}
}
@media (max-width:760px){ .ticket{padding-right:12%} .ticket:nth-child(2){padding-right:11%} }
@media (max-width:760px){ .ticket{padding-left:11%} }
/* slide 6: room freed up, so the copy goes back to full size */
@media (min-width:761px){
  .ticket{grid-template-columns:1fr 1fr;gap:1.4cqw 4cqw}
  .ticket__kicker{font-size:max(10px,1.5cqw)}
  .ticket h3{font-size:max(26px,5.4cqw)}
  .ticket__tag{font-size:max(17px,3.2cqw)}
  .ticket__lead{font-size:max(14px,2.3cqw);line-height:1.42}
  .ticket ul{font-size:max(13px,2.2cqw);gap:1cqw}
  .ticket .tapebtn{--th:max(44px,8cqw);font-size:max(15px,2.55cqw)}
  .ticket:nth-child(2) .ticket__side{padding-top:6cqw}
  .ticket .stamp{font-size:max(7.5px,1.08cqw);padding:2.1em 1.5em}
}
.ticket .stamp b{font-size:2.3em}
.ticket .stamp small{font-size:.78em}
@media (max-width:760px){ .ticket .stamp{font-size:8px;padding:2.2em 1.6em} }
/* cqw here is the ticket's content box (about two thirds of the ticket), so sizes are scaled to match the original 16-17px copy */
@media (min-width:761px){
  .ticket{gap:2cqw 5cqw}
  .ticket__main,.ticket__side{gap:1.4cqw}
  .ticket__kicker{font-size:max(10px,2.1cqw)}
  .ticket h3{font-size:max(26px,7.6cqw)}
  .ticket__tag{font-size:max(17px,4.6cqw)}
  .ticket__lead{font-size:max(14px,3.25cqw);line-height:1.42}
  .ticket ul{font-size:max(13px,3.05cqw);gap:1.3cqw}
  .ticket .tapebtn{--th:max(44px,11cqw);font-size:max(15px,3.6cqw)}
  .ticket__side{gap:2.6cqw}
  .ticket:nth-child(2) .ticket__side{padding-top:8cqw}
  .ticket .stamp{width:max(100px,23cqw);font-size:max(7.5px,1.55cqw)}
}
@media (min-width:761px){
  .tickets{--tw:min(820px,calc((100svh - var(--hdr) - 6vh - 130px) / 2 * 1400 / 609))}
  .ticket{width:var(--tw);grid-template-columns:1fr 1.1fr;padding:calc(var(--tw) * .055) calc(var(--tw) * .065) calc(var(--tw) * .055) calc(var(--tw) * .25)}
  .ticket:nth-child(2){padding-left:calc(var(--tw) * .29)}
  .ticket .tapebtn{padding:0 calc(var(--th) * .8) 0 calc(var(--th) * .42);font-size:max(14px,3.3cqw)}
  .ticket__main,.ticket__side{min-width:0}
}
@media (min-width:761px) and (max-height:820px){ .tickets{--tw:min(720px,88vw)} }
@media (min-width:761px){
  .ticket h3{font-size:max(24px,6.3cqw)}
  .ticket__tag{font-size:max(16px,4.1cqw)}
  .ticket:nth-child(2){padding-left:calc(var(--tw) * .315);grid-template-columns:1.1fr 1fr}
  .ticket .tapebtn{font-size:max(13px,2.95cqw)}
  .ticket:nth-child(2) .ticket__side{padding-top:6.5cqw}
}
@media (min-width:761px){ .ticket .stamp small{font-size:.68em;letter-spacing:.08em} .ticket .stamp{padding:2.4em 1.7em} }
/* house rule: two buttons = kraft (main ask) + cream (see the flash sheet) */
.ticket .tapebtn--cream{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 6px 9px rgba(0,0,0,.35)) brightness(.97)}

/* ===== slide 7 rev: guest list in the real hand, bigger, written on the ruled lines ===== */
.guest__sub,.guests .who{font-family:var(--hand)}
.guest .clip{top:calc(var(--hdr) + 4px);right:14%;width:180px;transform:rotate(80deg)}
@media (min-width:761px){
  .guest{max-width:1100px;width:100%}
  .guest h2{font-size:clamp(56px,min(7vw,10vh),104px)}
  .guest__sub{font-size:clamp(26px,min(2.8vw,4vh),38px);margin:4px 0 10px}
  .guests .who{font-size:clamp(24px,min(2.6vw,3.8vh),36px);line-height:1.1}
  .guests .what{font-size:clamp(14px,min(1.25vw,1.9vh),18px);margin-left:16px}
  .guests.is-ruled li{box-sizing:border-box;display:block;padding:0}
}
@media (max-width:760px){
  .guests li{padding:6px 0 8px}
  .guests .what{display:block;margin:2px 0 0 calc(.9em + 12px);white-space:normal;font-size:13.5px}
  .guests .who{font-size:23px;line-height:1.15}
  .guest .clip{width:130px;top:calc(var(--hdr) + 2px);right:8%}
}

/* ===== slide 8 rev: room to breathe between the question, the line and the button ===== */
.close{gap:0}
.close h2{text-wrap:balance;max-width:14ch;margin:0 0 .55em;line-height:1.05}
.close h2::after{bottom:-.3em}
.close p{max-width:34ch;font-size:clamp(18px,1.6vw,21px);line-height:1.55;margin:0 0 clamp(26px,4vh,40px)}
@media (max-width:640px){
  .close h2{font-size:clamp(38px,11vw,48px)}
  .close p{font-size:17px;margin-bottom:24px}
}
.close p{max-width:44ch;text-wrap:balance}
@media (max-width:640px){ .close h2{margin-bottom:.75em} .close p{margin-bottom:30px} .close-sheet .paper{padding-top:calc(var(--hdr) + 60px)} }
/* nudge: small black circle with a down arrow (like a floating app button) */
.nudge{position:fixed;left:50%;bottom:18px;z-index:60;width:44px;height:44px;margin:0;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#0b0b0d;color:#EDE7DC;border:1px solid rgba(237,231,220,.28);box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;
  transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;-webkit-tap-highlight-color:transparent}
.nudge.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.nudge:hover{background:#1a1a1e}
@media (max-width:640px){ .nudge{width:40px;height:40px;bottom:14px} }