/* FOMO Sessions — site demo v3 (multi-page). Brand kit v2.0 "Groovy stripes":
   Gloock for the name and headlines · Righteous for everything small · four stripes in the colourway's
   order · the winking sun on its own · one stamp per page, at an angle · grain on groovy pages ·
   one colourway per page (set on <body data-cw>), small bands may switch. */
@font-face { font-family: 'Gloock'; src: url('assets/fonts/Gloock-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Righteous'; src: url('assets/fonts/Righteous-Regular.ttf') format('truetype'); font-display: swap; }
@view-transition { navigation: auto; }

:root {
  --night: #120B09; --linen: #EFE4D2; --ember: #B03D18; --sundown: #DE6F1C; --glow: #F0B566;
  --teal: #1E4B4A; --plum: #4A1C35; --rose: #D99A86; --denim: #2D3E66; --avocado: #6F7034;
  --serif: 'Gloock', Georgia, serif;
  --label: 'Righteous', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1200px;
}
/* Colourways: ground, text, stripes 1–4, stamp, accent, line. Same table as the brand kit. */
[data-cw="teal"]    { --bg: var(--teal);    --fg: var(--linen); --s1: var(--ember); --s2: var(--sundown); --s3: var(--glow); --s4: var(--linen); --st: var(--glow);    --acc: var(--glow);  --line: rgba(239,228,210,.2); --card: rgba(0,0,0,.18); }
[data-cw="plum"]    { --bg: var(--plum);    --fg: var(--linen); --s1: var(--rose);  --s2: var(--sundown); --s3: var(--glow); --s4: var(--linen); --st: var(--glow);    --acc: var(--glow);  --line: rgba(239,228,210,.2); --card: rgba(0,0,0,.2); }
[data-cw="night"]   { --bg: var(--night);   --fg: var(--linen); --s1: var(--ember); --s2: var(--sundown); --s3: var(--glow); --s4: var(--linen); --st: var(--sundown); --acc: var(--glow);  --line: rgba(239,228,210,.18); --card: rgba(255,255,255,.05); }
[data-cw="denim"]   { --bg: var(--denim);   --fg: var(--linen); --s1: var(--rose);  --s2: var(--ember);   --s3: var(--glow); --s4: var(--linen); --st: var(--glow);    --acc: var(--glow);  --line: rgba(239,228,210,.22); --card: rgba(0,0,0,.18); }
[data-cw="avocado"] { --bg: var(--avocado); --fg: var(--linen); --s1: var(--plum);  --s2: var(--ember);   --s3: var(--glow); --s4: var(--linen); --st: var(--glow);    --acc: var(--glow);  --line: rgba(239,228,210,.22); --card: rgba(0,0,0,.16); }
[data-cw="linen"]   { --bg: var(--linen);   --fg: var(--night); --s1: var(--teal);  --s2: var(--ember);   --s3: var(--sundown); --s4: var(--glow); --st: var(--ember); --acc: var(--ember); --line: rgba(18,11,9,.16); --card: #E5D7C1; }
[data-cw="ember"]   { --bg: var(--ember);   --fg: var(--linen); --s1: var(--plum);  --s2: var(--glow);    --s3: var(--rose); --s4: var(--linen); --st: var(--linen);   --acc: var(--glow);  --line: rgba(239,228,210,.25); --card: rgba(0,0,0,.15); }
[data-cw="rose"]    { --bg: var(--rose);    --fg: var(--night); --s1: var(--plum);  --s2: var(--ember);   --s3: var(--sundown); --s4: var(--glow); --st: var(--plum); --acc: var(--plum);  --line: rgba(18,11,9,.18); --card: rgba(255,255,255,.18); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.8rem, min(6.6vw, 11vh), 6.2rem); line-height: .95; margin-bottom: .4em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02; margin-bottom: .5em; }
.h-sm { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.45rem; line-height: 1.15; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.label { font: 400 .76rem/1.25 var(--label); letter-spacing: .26em; text-transform: uppercase; margin-bottom: 1.1em; display: block; color: var(--acc); }
.lead { font-size: 1.15rem; max-width: 600px; opacity: .94; }
.lead b, .hero-sub b { font-weight: 600; color: var(--acc); }
.small { font-size: .84rem; opacity: .75; }
.center { text-align: center; }
section, footer { position: relative; background: var(--bg); color: var(--fg); overflow: hidden; }
section { padding: 100px 0; }
section.tight { padding: 64px 0; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* Stripes — drawn by app.js with the kit's own geometry */
.stripes { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(80px, 14vw, 230px); z-index: 1; display: block; pointer-events: none; }
.stripes-thin { height: 54px; }
.sticker { position: absolute; z-index: 3; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); pointer-events: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 15px 24px; border-radius: 999px; background: var(--sundown); color: var(--night); font: 400 .95rem/1 var(--label); letter-spacing: .05em; text-decoration: none; border: 0; cursor: pointer; transition: transform .18s, background .18s; box-shadow: 0 4px 0 rgba(0,0,0,.22); }
.btn:hover { transform: translateY(-2px); background: var(--glow); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.btn-line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; }
.btn-line:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.btn-sm { padding: 10px 16px; font-size: .82rem; box-shadow: none; }
.btn-wide { width: 100%; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Demo bar + placeholders */
.demo-bar { position: fixed; z-index: 70; bottom: 12px; right: 12px; display: flex; gap: 12px; align-items: center; padding: 7px 12px; border-radius: 999px; background: #FFE45C; color: #1b1300; font: 600 11.5px/1 var(--body); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.demo-bar label { display: flex; gap: 5px; align-items: center; cursor: pointer; font-weight: 500; }
body.show-todo .todo { background: #FFE45C; color: #1b1300; padding: .05em .4em; border-radius: 4px; font: 500 .8em/1.4 var(--body); }
body.show-todo .todo::before { content: "TO FILL · "; font-weight: 700; }
body:not(.show-todo) .todo { display: none; }

/* Header */
.nav { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; padding: 16px 28px; transition: background .25s, padding .25s; view-transition-name: site-header; }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); padding: 10px 28px; box-shadow: 0 1px 0 var(--line); }
.nav-logo { display: block; margin-right: auto; }
.nav-logo img { height: 40px; width: auto; }
.theme-dark .logo-light, .theme-light .logo-dark { display: none; }
.nav-links { display: flex; gap: 26px; font: 400 .86rem var(--label); letter-spacing: .06em; }
.nav-links a { text-decoration: none; opacity: .82; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { opacity: 1; }
.nav-links a[aria-current="page"] { opacity: 1; border-color: var(--acc); }
.nav-book-mobile { display: none; }
.nav-toggle { display: none; }

/* HOME hero */
.hero { min-height: 100svh; padding: 110px 0 clamp(120px, 16vw, 230px); display: flex; align-items: center; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; width: 100%; }
.hero-sub { font-size: 1.17rem; max-width: 540px; opacity: .95; }
.hero-media { position: relative; justify-self: center; width: min(340px, 100%); }
.story { margin: 0; position: relative; aspect-ratio: 9 / 16; max-height: 70vh; border-radius: 26px; overflow: hidden; background: var(--night); box-shadow: 0 0 0 8px var(--linen), 0 30px 70px rgba(0,0,0,.45); transform: rotate(3deg); }
.story video { width: 100%; height: 100%; object-fit: cover; }
.story-bars { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 2; }
.story-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(239,228,210,.35); overflow: hidden; position: relative; }
.story-bars i::after { content: ""; position: absolute; inset: 0; background: var(--linen); transform: scaleX(var(--p, 0)); transform-origin: left; }
.story figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 18px 16px; background: linear-gradient(transparent, rgba(18,11,9,.88)); color: var(--linen); }
.story figcaption span { display: block; font: 400 .68rem var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--glow); }
.story figcaption b { display: block; font: 400 1.25rem/1.15 var(--serif); margin-top: 4px; }
.hero-stamp { width: 150px; left: -84px; top: 8%; transform: rotate(-10deg); }

/* HOME doors */
.doors-h { text-align: center; margin-bottom: 40px; }
.door-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.door { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; padding: 30px 28px; border-radius: 12px; overflow: hidden; text-decoration: none; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 6px var(--linen); transition: transform .25s; }
.door:nth-child(1) { transform: rotate(-1.5deg); } .door:nth-child(2) { transform: rotate(1deg); } .door:nth-child(3) { transform: rotate(-.5deg); }
.door:hover { transform: rotate(0) translateY(-6px); }
.door .stripes { height: 52%; }
.door > .label, .door > b, .door > .door-go { position: relative; z-index: 2; }
.door b { font: 400 1.8rem/1.08 var(--serif); }
.door-go { margin-top: auto; align-self: flex-start; font: 400 .85rem var(--label); letter-spacing: .08em; padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); }
.door-poster { position: absolute; right: -10%; bottom: -6%; width: 70%; transform: rotate(-8deg); box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 1; }
.door-note { text-align: center; margin-top: 40px; font: 400 1.2rem var(--serif); }
.door-note a { color: var(--glow); }

/* Inner page head */
.page-head { padding: 140px 0 80px; }
.head-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.head-photo { margin: 0; position: relative; }
.head-photo img:first-child { border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: 0 0 0 7px #fff8ee, 0 22px 50px rgba(18,11,9,.22); transform: rotate(1.5deg); }
.head-photo figcaption { margin-top: 16px; font: 400 .72rem var(--label); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.head-stamp { width: 130px; right: -30px; top: -46px; transform: rotate(11deg); }

/* Spaces */
.spaces { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.spaces li { padding: 26px 22px 6px 0; display: grid; gap: 4px; }
.spaces li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.spaces svg { width: 44px; height: 44px; fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.spaces b { font: 400 1.55rem var(--serif); }
.spaces span { font-size: .92rem; opacity: .72; }

/* Included + setlist */
.inc-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: start; }
.deal-cols { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; }
.deal-cols h3 { margin-bottom: 12px; }
.ticks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ember) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%23EFE4D2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat; }
.ticks-light li::before { background-color: var(--glow); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%23120B09' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.aside { font: 400 1.3rem/1.3 var(--serif); }
.setlist { position: relative; background: #FBF6EC; color: var(--night); padding: 26px 28px; transform: rotate(2deg); box-shadow: 0 18px 40px rgba(18,11,9,.18); font-family: var(--label); }
.setlist::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(240,181,102,.85); }
.setlist-head { display: flex; justify-content: space-between; border-bottom: 2px solid var(--night); padding-bottom: 10px; margin-bottom: 6px; letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; }
.setlist ol { list-style: none; padding: 0; margin: 0; }
.setlist li { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed rgba(18,11,9,.25); }
.setlist time { font: 400 1.35rem var(--serif); width: 56px; flex: none; }
.setlist li.hot { color: var(--ember); }
.setlist p { margin: 12px 0 0; font: 400 .88rem var(--body); opacity: .75; }

/* Price band */
.price-band { padding: 80px 0; }
.price-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.price-band h2 { margin-bottom: .2em; }
.price-band .big { font-size: 1.6em; color: var(--glow); }
.pkgs { display: grid; gap: 10px; }
.pkg { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 24px; border-radius: 16px; background: var(--card); }
.pkg b { font: 400 1.4rem var(--serif); }
.pkg span { font: 400 .85rem var(--label); letter-spacing: .04em; text-align: right; opacity: .9; }
.price-head { max-width: 640px; margin-bottom: 40px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { display: flex; flex-direction: column; padding: 30px 28px; border-radius: 20px; background: var(--card); }
.tier h3 { font: 400 1.6rem var(--serif); margin: 0 0 6px; }
.tier-price { font: 400 .9rem var(--label); letter-spacing: .04em; margin: 0 0 4px; }
.tier-price span { font: 400 3rem/1 var(--serif); color: var(--glow); letter-spacing: 0; margin-right: 6px; }
.tier-size { font-size: .95rem; opacity: .85; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tier-plus { font: 400 .78rem var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin: 0 0 12px; }
.tier .ticks { flex: 1; align-content: start; margin-bottom: 26px; }
.tier-main { background: var(--linen); color: var(--night); transform: rotate(-1deg); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.tier-main .tier-price span { color: var(--ember); }
.tier-main .tier-size { border-color: rgba(18,11,9,.18); }
.tier-main .ticks li::before { background-color: var(--ember); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%23EFE4D2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.price-foot { margin: 34px 0 0; opacity: .9; }

/* Math */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 34px; border-top: 2px solid var(--line); }
.stats div { padding: 26px 26px 0 0; }
.stats div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.stats b { display: block; font: 400 clamp(2.2rem, 4.4vw, 3.4rem)/1 var(--serif); color: var(--glow); margin-bottom: 12px; }
.stats span { font-size: .98rem; opacity: .86; }
.promise { font: 400 1.45rem/1.35 var(--serif); max-width: 800px; }
.sources { font-size: .76rem; opacity: .6; padding-left: 18px; margin: 22px 0 0; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; }
.faqs details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faqs summary { cursor: pointer; list-style: none; font: 400 1.3rem var(--serif); display: flex; justify-content: space-between; gap: 20px; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; font-family: var(--label); color: var(--acc); transition: transform .2s; }
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs details p { margin: 10px 0 0; max-width: 620px; }

/* Next band */
.next-band { padding: 90px 0 clamp(120px, 14vw, 200px); }
.next-grid { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.next-grid h2 { margin: 0; }

/* NO. 01 */
.case-top { display: flex; justify-content: space-between; gap: 30px; align-items: start; }
.case-stamp { position: relative; width: 150px; flex: none; transform: rotate(9deg); }
.case-film { margin-top: 34px; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 8px var(--linen); aspect-ratio: 16 / 9; }
.case-film video { width: 100%; height: 100%; object-fit: cover; }
.case-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 54px; align-items: start; }
.case-poster { margin: 0; }
.case-poster img { transform: rotate(-3deg); box-shadow: 0 0 0 6px var(--linen), 0 22px 50px rgba(0,0,0,.45); }
.case-poster figcaption { margin-top: 18px; font: 400 .72rem var(--label); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 400 .72rem/2 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.facts dd { margin: 0; font: 400 1.3rem/1.25 var(--serif); }
.quote { margin: 30px 0 0; font: 400 1.4rem/1.3 var(--serif); padding-left: 20px; border-left: 4px solid var(--acc); }
.ba { display: grid; grid-template-columns: .78fr 1.22fr; gap: 16px; }
.ba figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; }
.ba img { width: 100%; height: 420px; object-fit: cover; }
.ba figure:first-child img { filter: saturate(.45) brightness(.78); }
.ba figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; background: linear-gradient(transparent, rgba(18,11,9,.86)); font: 400 1.5rem var(--serif); color: var(--linen); }
.ba figcaption .label { color: var(--glow); margin-bottom: 4px; font-size: .68rem; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; margin-bottom: 14px; }
.strip > * { width: 230px; height: 380px; object-fit: cover; border-radius: 16px; scroll-snap-align: start; }
.series-band { padding: 70px 0 clamp(120px, 14vw, 200px); }
.series { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.series li { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; align-items: center; padding: 18px 22px; border-radius: 16px; background: var(--card); }
.series .no { font: 400 .8rem var(--label); letter-spacing: .2em; color: var(--acc); }
.series b { font: 400 1.5rem var(--serif); }
.series li.open { background: transparent; box-shadow: inset 0 0 0 2px dashed; border: 2px dashed var(--line); }
.series li span:last-child { font-size: .9rem; opacity: .8; }

/* YOUR SERIES */
.maker { min-height: 100svh; padding: 130px 0 80px; transition: background .35s, color .35s; }
.maker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > span { font: 400 .72rem var(--label); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.field em { font-style: normal; opacity: .6; letter-spacing: .1em; }
.field input, .field select, .field textarea { font: 400 1.05rem var(--body); padding: 14px 16px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); background: color-mix(in srgb, var(--bg) 78%, #000 22%); color: var(--fg); outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acc); }
.maker .field input { font: 400 1.7rem var(--serif); background: color-mix(in srgb, var(--bg) 85%, #fff 15%); }
.cw-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.cw-picker button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); cursor: pointer; padding: 0; overflow: hidden; background: var(--a); position: relative; }
.cw-picker button::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(90deg, var(--b1) 25%, var(--b2) 25% 50%, var(--b3) 50% 75%, var(--b4) 75%); }
.cw-picker button[aria-pressed="true"] { outline: 3px solid var(--fg); outline-offset: 2px; }
.maker-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.maker-stage { display: grid; place-items: center; gap: 16px; }
.post { position: relative; width: min(460px, 100%); aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 8px var(--linen), 0 30px 60px rgba(0,0,0,.3); transform: rotate(-2deg); padding: 7%; transition: background .35s, color .35s; }
.post .post-stripes { height: 52%; }
.post-top { position: relative; z-index: 2; display: flex; justify-content: space-between; font: 400 .72rem var(--label); letter-spacing: .26em; text-transform: uppercase; }
.post-name { position: relative; z-index: 2; margin-top: 12%; text-align: center; font-family: var(--serif); line-height: .9; }
.post-name span { display: block; font-size: var(--n-size, 2.6rem); text-transform: lowercase; overflow-wrap: break-word; }
.post-name b { display: block; font-weight: 400; font-size: 4.4rem; }
.post-meta { position: relative; z-index: 2; text-align: center; margin-top: 16px; font: 400 .72rem var(--label); letter-spacing: .2em; text-transform: uppercase; }
.post-stamp { position: absolute; z-index: 3; right: 6%; bottom: 7%; width: 32%; color: var(--st); transform: rotate(10deg); }
.post-stamp text { fill: currentColor; font: 400 14px var(--label); letter-spacing: .16em; }

/* SPONSORS */
.presented { position: relative; justify-self: center; width: min(420px, 100%); }
.presented-post { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg); color: var(--fg); padding: 9%; box-shadow: 0 0 0 8px var(--linen), 0 30px 60px rgba(0,0,0,.3); transform: rotate(2deg); }
.presented-post .stripes { height: 100%; }
.presented-post > p, .presented-post > div { position: relative; z-index: 2; }
.pp-name { font: 400 2.1rem/.95 var(--serif); margin: 22px 0 0; }
.pp-name b { font-weight: 400; font-size: 3.4rem; }
.pp-by { font: 400 .72rem var(--label); letter-spacing: .3em; text-transform: uppercase; margin: 20px 0 10px; opacity: .8; }
.pp-slot { display: inline-block; padding: 12px 18px; border: 2px dashed var(--glow); border-radius: 10px; font: 400 .95rem var(--label); letter-spacing: .25em; color: var(--glow); }
.presented-stamp { width: 130px; right: -40px; top: -44px; transform: rotate(12deg); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vcard { padding: 26px 26px; border-radius: 18px; background: var(--card); }
.vcard b { font: 400 1.45rem var(--serif); display: block; margin-bottom: 8px; }
.vcard p { margin: 0; opacity: .9; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.chips span { font: 400 .8rem var(--label); letter-spacing: .12em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
section.tight:has(> .stripes) { padding-bottom: clamp(120px, 14vw, 210px); }

/* BOOK */
.book { padding-bottom: 100px; }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.next-steps { list-style: none; counter-reset: n; padding: 0; margin: 10px 0 34px; display: grid; gap: 12px; }
.next-steps li { counter-increment: n; position: relative; padding-left: 50px; font-size: 1.02rem; }
.next-steps li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: -3px; font: 400 1.4rem var(--serif); color: var(--acc); }
.next-steps b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
.card { position: relative; width: min(420px, 100%); aspect-ratio: 3.5 / 2; background: var(--linen); color: var(--night); padding: 7% 8%; transform: rotate(-3deg); box-shadow: 0 22px 50px rgba(0,0,0,.35); overflow: hidden; }
.card-name { font: 400 1.9rem/1 var(--serif); margin: 0 0 6px; }
.card-title { font: 400 .7rem var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); margin: 0 0 18px; }
.card-lines { font: 400 .9rem/1.6 var(--label); margin: 0; }
.card-lines a { text-decoration: none; }
.card-mark { position: absolute; top: 9%; right: 8%; width: 13%; }
.card .card-stripes { height: 13%; }
.form { background: color-mix(in srgb, var(--bg) 75%, #000 25%); border-radius: 26px; padding: 28px; }
.seg { display: flex; gap: 8px; margin-bottom: 18px; }
.seg label { flex: 1; text-align: center; padding: 12px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font: 400 .9rem var(--label); letter-spacing: .05em; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--linen); color: var(--night); box-shadow: none; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--acc); outline-offset: 2px; }
.form-done { margin: 14px 0 0; font-size: .9rem; color: var(--acc); }

/* Footer */
.foot { padding: 64px 0 110px; }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1fr .9fr 1fr; gap: 30px; align-items: start; }
.foot-lockup { width: 260px; }
.foot p { margin: 0; opacity: .8; font-size: .95rem; }
.foot-links { display: grid; gap: 6px; font: 400 .85rem var(--label); letter-spacing: .05em; }
.foot-links a { text-decoration: none; opacity: .82; }
.foot-links a:hover { opacity: 1; color: var(--glow); }

/* Reveal */
/* Uses `translate`, not `transform`, so tilted pieces (cards, setlist, doors) keep their rotation. */
.reveal { opacity: 0; translate: 0 20px; transition: opacity .6s ease, translate .6s ease; }
.reveal.in { opacity: 1; translate: 0 0; }

/* Page transition */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@media (max-width: 960px) {
  .tiers { grid-template-columns: 1fr; }
  .tier-main { transform: none; }
  section { padding: 76px 0; }
  .wrap { padding: 0 18px; }
  .nav { padding: 12px 16px; gap: 12px; }
  .nav-logo img { height: 34px; }
  .nav-book { display: none; }
  .nav-toggle { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; border: 0; background: transparent; cursor: pointer; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform .2s; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav-links { position: fixed; inset: 60px 0 auto 0; flex-direction: column; gap: 0; padding: 10px 18px 24px; background: var(--bg); box-shadow: 0 20px 40px rgba(0,0,0,.25); transform: translateY(-120%); transition: transform .25s; font-size: 1.05rem; }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-book-mobile { display: block; color: var(--acc); }
  .hero { padding-top: 96px; }
  .hero-grid, .head-grid, .inc-grid, .deal-cols, .price-grid, .faq-grid, .case-grid, .maker-grid, .book-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero-media { width: min(290px, 78%); }
  .hero-stamp { left: -46px; width: 104px; }
  .door-grid, .cards3 { grid-template-columns: 1fr; }
  .door { aspect-ratio: auto; min-height: 340px; }
  .door-poster { width: 46%; right: -6%; bottom: -12%; }
  .door:has(.door-poster) b { max-width: 62%; }
  .spaces { grid-template-columns: 1fr 1fr; }
  .spaces li:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats { grid-template-columns: 1fr; }
  .stats div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pkg { flex-direction: column; gap: 4px; }
  .pkg span { text-align: left; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .ba { grid-template-columns: 1fr; }
  .ba img { height: 300px; }
  .case-stamp { width: 96px; }
  .head-stamp, .presented-stamp { width: 96px; right: -6px; }
  .series li { grid-template-columns: 1fr; gap: 6px; }
  .page-head { padding-top: 110px; }
  .maker { padding-top: 100px; }
  .demo-bar { position: fixed; top: auto; left: 50%; right: auto; bottom: 6px; transform: translateX(-50%); font-size: 10px; padding: 5px 10px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  @view-transition { navigation: none; }
}

/* HOME v4: full-bleed film hero with sound + pause, night strip */
.film-hero { position: relative; min-height: 100svh; padding: 96px 0 0; display: flex; align-items: flex-end; background: var(--night); color: var(--linen); }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,11,9,.55) 0%, rgba(18,11,9,.05) 32%, rgba(18,11,9,.35) 60%, rgba(30,75,74,.92) 100%), linear-gradient(90deg, rgba(18,11,9,.55), transparent 62%); }
.film-inner { padding-bottom: clamp(130px, min(19vw, 30vh), 270px); width: 100%; }
.film-inner h1 { font-size: clamp(2.6rem, min(6.6vw, 10vh), 6.2rem); }
.film-inner .hero-ctas { margin-top: clamp(14px, 3vh, 26px); }
.film-inner .label { color: var(--glow); }
.film-inner h1 { max-width: 11ch; }
.film-hero .hero-sub b { color: var(--glow); }
.film-controls { position: absolute; z-index: 4; right: 28px; top: 50%; display: grid; gap: 10px; }
.film-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(239,228,210,.9); color: var(--night); font: 400 .82rem var(--label); letter-spacing: .08em; box-shadow: 0 6px 20px rgba(0,0,0,.3); justify-self: end; }
.film-btn .ico { font-size: 1.05rem; }
.film-btn[aria-pressed="true"] { background: var(--sundown); }
#pauseBtn { width: 46px; padding: 0; justify-content: center; font-size: .7rem; }
.film-credit { position: absolute; z-index: 4; right: 28px; bottom: clamp(110px, 15vw, 220px); margin: 0; font: 400 .66rem var(--label); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.strip-stamp { width: 130px; right: 10px; top: -96px; transform: rotate(10deg); z-index: 5; }
.night-strip { overflow: visible; z-index: 3; }
.film-hero .stripes { z-index: 2; }
.night-strip { padding: 10px 0 70px; }
.night-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.night-steps li { display: grid; gap: 4px; padding: 26px 22px 0 0; }
.night-steps li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.night-steps .no { font: 400 .74rem var(--label); letter-spacing: .22em; color: var(--glow); }
.night-steps b { font: 400 1.45rem/1.15 var(--serif); }
.night-steps li > span:last-child { font-size: .93rem; opacity: .8; }
@media (max-width: 960px) {
  .film-inner { padding-bottom: 130px; }
  .film-controls { top: 76px; right: 16px; grid-auto-flow: column; }
  .film-credit { display: none; }
  .strip-stamp { width: 86px; top: -60px; right: 6px; }
  .night-steps { grid-template-columns: 1fr 1fr; }
  .night-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ===== Preview your night ===== */
.pv-head { padding: 140px 0 30px; }
.pv-head h1 { max-width: 14ch; }
.pv-app { padding: 20px 0 90px; overflow: visible; }
.pv-grid { display: grid; grid-template-columns: 340px 1fr; gap: 50px; align-items: start; }
.pv-steps { position: sticky; top: 96px; display: grid; gap: 18px; }
.pv-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.pv-no { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--night); color: var(--linen); font: 400 .9rem var(--label); margin-top: 22px; }
.pv-step .field { margin: 0; }
.pv-step input#pvName { font: 400 1.35rem var(--serif); background: #fff8ee; color: var(--night); }
.pv-spaces { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-spaces label { text-align: center; padding: 11px 8px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font: 400 .86rem var(--label); letter-spacing: .04em; }
.pv-spaces input { position: absolute; opacity: 0; pointer-events: none; }
.pv-spaces label:has(input:checked) { background: var(--night); color: var(--linen); box-shadow: none; }
.pv-spaces label:has(input:focus-visible) { outline: 3px solid var(--ember); outline-offset: 2px; }
.pv-colour summary { cursor: pointer; font: 400 .9rem var(--label); letter-spacing: .04em; color: var(--ember); margin-top: 4px; }
.pv-colour .cw-picker { margin-top: 12px; }
.pv-numbering { margin: 6px 0 0; padding: 16px 18px; border-radius: 14px; background: #E5D7C1; font-size: .92rem; }
.pv-numbering b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; display: block; margin-bottom: 4px; }
.pv-kit-head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.pv-kit-head .label { margin: 0; color: var(--ember); }
.pv-kit-head .small { margin: 0; max-width: 46ch; }
.kit { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: "flyer post" "flyer invite" "sign sticker"; gap: 22px 26px; margin-bottom: 14px; }
.kp { margin: 0; }
.kp figcaption { margin-top: 10px; font-size: .85rem; opacity: .8; }
.kp figcaption b { font: 400 1.05rem var(--serif); margin-right: 6px; opacity: 1; }
.kp-art { position: relative; container-type: inline-size; overflow: hidden; background: var(--bg); color: var(--fg); }
.kp .stripes { height: 46%; }
.kp-flyer { grid-area: flyer; }
.kp-flyer .kp-art { aspect-ratio: 8.5 / 11; padding: 9% 9%; box-shadow: 0 16px 40px rgba(18,11,9,.22); transform: rotate(-1.2deg); }
.kf-top { position: relative; z-index: 2; display: flex; justify-content: space-between; font: 400 3.2cqw var(--label); letter-spacing: .26em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: 3cqw; }
.kf-main { position: relative; z-index: 2; margin-top: 9cqw; }
.kf-series { display: block; font: 400 3.6cqw var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--st); margin-bottom: 3cqw; }
.kf-main b { display: block; font: 400 12.5cqw/.92 var(--serif); }
.kf-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8cqw; font: 400 3.4cqw var(--label); letter-spacing: .1em; text-transform: uppercase; }
.kf-facts i { display: block; font-style: normal; color: var(--st); font-size: 2.8cqw; letter-spacing: .2em; margin-bottom: 1cqw; }
.k-sun { position: absolute; z-index: 3; width: 22cqw; right: 8cqw; bottom: 36%; transform: rotate(8deg); filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.kp-post { grid-area: post; }
.kp-post .kp-art { aspect-ratio: 4 / 5; padding: 8%; box-shadow: 0 16px 40px rgba(18,11,9,.2); transform: rotate(1.4deg); }
.kp-post .stripes { height: 52%; }
.kpost-top { position: relative; z-index: 2; display: flex; justify-content: space-between; font: 400 3.4cqw var(--label); letter-spacing: .24em; text-transform: uppercase; }
.kpost-name { position: relative; z-index: 2; text-align: center; margin-top: 11cqw; font-family: var(--serif); line-height: .9; }
.kpost-name span { display: block; font-size: 8.5cqw; overflow-wrap: break-word; }
.kpost-name b { display: block; font-weight: 400; font-size: 15cqw; }
.kpost-meta { position: relative; z-index: 2; text-align: center; margin-top: 3cqw; font: 400 3.2cqw var(--label); letter-spacing: .2em; text-transform: uppercase; }
.kp-post .k-stamp { position: absolute; z-index: 3; width: 30%; right: 6%; bottom: 6%; color: var(--st); transform: rotate(10deg); }
.kp-invite { grid-area: invite; }
.kp-invite .kp-art { background: transparent; }
.phone { background: #fff8ee; color: var(--night); border-radius: 22px; padding: 14px 14px 16px; box-shadow: 0 0 0 6px var(--night), 0 16px 40px rgba(18,11,9,.2); }
.ph-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(18,11,9,.12); padding-bottom: 8px; margin-bottom: 12px; font: 400 .9rem var(--serif); }
.bubble { max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #E5D7C1; font-size: .9rem; line-height: 1.4; margin-bottom: 8px; }
.bubble b { font-weight: 600; }
.bubble-me { margin-left: auto; border-radius: 16px 16px 4px 16px; background: var(--teal); color: var(--linen); width: max-content; }
.kp-sign { grid-area: sign; }
.kp-sign .kp-art { aspect-ratio: 2 / 1; padding: 7% 8%; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 16px 40px rgba(18,11,9,.2); }
.kp-sign .stripes { height: 18%; }
.ks-label { position: relative; z-index: 2; font: 400 3.2cqw var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--st); }
.kp-sign b { position: relative; z-index: 2; font: 400 9cqw/1 var(--serif); margin: 2cqw 0; }
.ks-meta { position: relative; z-index: 2; font: 400 3cqw var(--label); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.kp-sticker { grid-area: sticker; display: grid; justify-items: center; }
.kp-sticker .kp-art { width: 72%; aspect-ratio: 1; border-radius: 50%; padding: 6%; box-shadow: 0 0 0 6px #fff, 0 14px 30px rgba(18,11,9,.22); transform: rotate(-8deg); color: var(--st); }
.kp-sticker .k-stamp { width: 100%; }
.pv-callout { display: grid; gap: 6px; justify-items: start; margin-top: 22px; padding: 22px 24px; border-radius: 18px; background: var(--night); color: var(--linen); text-decoration: none; }
.pv-callout .label { color: var(--glow); margin: 0; }
.pv-callout b { font: 400 1.5rem/1.15 var(--serif); }
.pv-callout .door-go { background: var(--linen); color: var(--night); }
.pv-send { padding: 90px 0 110px; }
.send-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.send-done { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: rgba(239,228,210,.1); }
.send-done p { margin: 0 0 8px; }

/* ===== Proposal ===== */
.prop { padding: 110px 0 70px; }
.prop-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; border-radius: 14px; background: #E5D7C1; margin-bottom: 34px; }
.prop-bar .hero-ctas { margin: 0; }
.prop-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 50px; align-items: center; padding-bottom: 34px; border-bottom: 2px solid var(--night); }
.prop-head .label { color: var(--ember); }
.prop-head h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.prop-flyer .kp figcaption { display: none; }
.prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 50px; padding: 34px 0; }
.prop-block .h-sm { font-size: 1.7rem; }
.prop-tiers { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prop-tiers th { text-align: left; font: 400 1.1rem var(--serif); padding: 10px 12px 10px 0; white-space: nowrap; vertical-align: top; }
.prop-tiers td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.prop-tiers th { border-top: 1px solid var(--line); }
.prop-tiers .p { font: 400 1.4rem var(--serif); text-align: right; color: var(--ember); }
.prop-tiers tr.main th, .prop-tiers tr.main .p { color: var(--teal); }
.prop-run { list-style: none; padding: 0; margin: 0 0 12px; }
.prop-run li { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.prop-run time { font: 400 1.15rem var(--serif); width: 48px; }
.prop-proof img { border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; margin-bottom: 10px; }
.prop-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 26px; border-top: 2px solid var(--night); }
.prop-lockup { width: 220px; }
.prop-foot p { margin: 0; font-size: .92rem; }
body[data-page="proposal"] .demo-bar { display: none; }
@media print {
  @page { size: letter; margin: .45in; }
  body { font-size: 11px; background: #fff !important; }
  .nav, .foot, .demo-bar, .no-print { display: none !important; }
  .prop { padding: 0; }
  .prop-head { grid-template-columns: 1.4fr .6fr; gap: 24px; }
  .prop-head h1 { font-size: 34px; }
  .prop-grid { gap: 14px 28px; padding: 16px 0; }
  .prop-proof img { max-height: 1.6in; }
  .reveal { opacity: 1 !important; translate: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 960px) {
  .pv-grid, .send-grid, .prop-head, .prop-grid { grid-template-columns: 1fr; }
  .pv-steps { position: static; }
  .kit { grid-template-columns: 1fr; grid-template-areas: "flyer" "post" "invite" "sign" "sticker"; }
  .pv-head { padding-top: 110px; }
}
/* The proposal is a document: no entrance animation, no site footer */
.prop .reveal { opacity: 1; translate: 0 0; transition: none; }
body[data-page="proposal"] .foot { display: none; }
@media print {
  .prop-flyer { max-width: 2.4in; justify-self: end; }
  .prop-tiers td, .prop-tiers th { padding: 6px 6px 6px 0; }
  .prop-block .h-sm { font-size: 18px; margin-bottom: 6px; }
  .prop-run li { padding: 3px 0; }
  .prop-grid { break-inside: avoid; }
}
@media print {
  .prop-head { display: grid !important; grid-template-columns: 1.5fr .5fr !important; gap: 20px !important; padding-bottom: 14px; }
  .prop-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px 24px !important; }
  .prop-flyer { width: 1.9in; max-width: none; }
  .prop-flyer .kp-art { transform: none; box-shadow: none; }
  .prop-head h1 { font-size: 30px; margin-bottom: 6px; }
  .prop-head .lead { font-size: 12px; }
  .prop-proof img { max-height: 1.3in; }
  .prop-foot { padding-top: 10px; }
}
@media print {
  body { font-size: 10px; }
  .prop-grid { grid-template-columns: 1fr 1fr 1fr !important; break-inside: auto; }
  .prop-grid > .prop-block:first-child { grid-column: 1 / -1; }
  .prop-tiers { font-size: 10px; }
  .prop-block p, .prop-run li { font-size: 10px; }
  .prop-proof img { max-height: 1.1in; aspect-ratio: auto; }
}
.prop .prop-block { padding: 0; overflow: visible; background: transparent; }

/* ===== Preview your night (simple) ===== */
.sp { min-height: 100svh; padding: 130px 0 80px; display: flex; align-items: center; }
.sp-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; width: 100%; }
.sp-copy h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
.sp-input { width: 100%; font: 400 clamp(1.6rem, 3vw, 2.3rem) var(--serif); color: var(--night); background: transparent; border: 0; border-bottom: 3px solid var(--night); padding: 8px 0 10px; outline: none; }
.sp-input::placeholder { color: rgba(18,11,9,.3); }
.sp-input:focus { border-color: var(--ember); }
.sp-note { margin: 18px 0 6px; max-width: 46ch; opacity: .8; }
.sp-flyer { justify-self: center; width: min(420px, 100%); }
.sp-flyer .kp figcaption { display: none; }
.sp-flyer .kp-art { transform: rotate(2deg); }
@media (max-width: 960px) { .sp { padding-top: 100px; } .sp-grid { grid-template-columns: 1fr; gap: 36px; } .sp-flyer { width: min(320px, 86%); } }

/* ===== Get a call ===== */
.sp-narrow { max-width: 640px; }
.qc-form { display: grid; gap: 22px; margin: 30px 0 26px; }
.qc-field { display: grid; gap: 4px; }
.qc-field span { font: 400 .72rem var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); }
.qc-field input { width: 100%; font: 400 clamp(1.4rem, 2.6vw, 1.9rem) var(--serif); color: var(--night); background: transparent; border: 0; border-bottom: 3px solid var(--night); padding: 6px 0 10px; outline: none; }
.qc-field input::placeholder { color: rgba(18,11,9,.28); }
.qc-field input:focus { border-color: var(--ember); }
.qc-form .btn { justify-self: start; }
.qc-form .btn:disabled { opacity: .5; cursor: default; transform: none; }
.qc-error { margin: 0; color: var(--ember); font-weight: 600; }
.qc-done { margin: 0; padding: 14px 16px; border-radius: 14px; background: #E5D7C1; }

/* ===== Get a call v2: colourful ticket ===== */
.qc { min-height: 100svh; padding: 130px 0 clamp(150px, 17vw, 250px); display: flex; align-items: center; }
.qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: 100%; }
.qc-copy h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); }
.qc-hl { color: var(--glow); }
.qc-photos { position: relative; height: 230px; margin-top: 34px; }
.qc-ph { position: absolute; width: 58%; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid var(--linen); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.qc-ph1 { left: 0; top: 0; transform: rotate(-5deg); }
.qc-ph2 { left: 38%; top: 34px; transform: rotate(4deg); }
.qc-ph::before { content: ""; }
.qc-sun { width: 90px; left: 30%; top: -28px; transform: rotate(-10deg); z-index: 4; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr 190px; background: var(--linen); color: var(--night); border-radius: 18px; box-shadow: 0 26px 60px rgba(0,0,0,.4); transform: rotate(2deg); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: calc(100% - 190px - 14px); width: 28px; height: 28px; border-radius: 50%; background: var(--plum); }
.ticket::before { top: -14px; } .ticket::after { bottom: -14px; }
.ticket-main { padding: 28px 30px 30px; display: grid; gap: 18px; }
.ticket-top { display: flex; justify-content: space-between; gap: 10px; font: 400 .72rem var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--ember); border-bottom: 2px solid var(--night); padding-bottom: 10px; }
.ticket-title { margin: 4px 0 0; font: 400 1.6rem/.95 var(--serif); }
.ticket-title b { font-weight: 400; font-size: 3.6rem; color: var(--plum); }
.ticket-stub { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px 18px; border-left: 3px dashed rgba(18,11,9,.35); background: repeating-linear-gradient(-45deg, rgba(222,111,28,.12) 0 10px, transparent 10px 20px); border-radius: 0 18px 18px 0; text-align: center; }
.ticket-stub .btn { width: 100%; padding: 18px 10px; font-size: 1.05rem; }
.stub-small { font-size: .78rem; opacity: .75; }
.stub-small a { color: var(--ember); }
.ticket-stamp { width: 120px; right: -40px; top: -50px; transform: rotate(12deg); }
.ticket .qc-field span { color: var(--ember); }
.ticket .qc-field input { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.ticket .btn:disabled { opacity: .5; cursor: default; transform: none; }
@media (max-width: 960px) {
  .qc { padding-top: 100px; }
  .qc-grid { grid-template-columns: 1fr; gap: 40px; }
  .qc-photos { display: none; }
  .ticket { grid-template-columns: 1fr; transform: rotate(1deg); }
  .ticket::before, .ticket::after { display: none; }
  .ticket-stub { border-left: 0; border-top: 3px dashed rgba(18,11,9,.35); border-radius: 0 0 18px 18px; }
  .ticket-stamp { width: 90px; right: -8px; top: -40px; }
}
.ticket-top span { white-space: nowrap; }
.ticket { grid-template-columns: 1fr 160px; }
.ticket::before, .ticket::after { left: calc(100% - 160px - 14px); }
@media (max-width: 960px) { .ticket { grid-template-columns: 1fr; } }
/* Get a call, toned down: no photos, calmer ticket */
.ticket { transform: rotate(1deg); }
.ticket-stub { background: none; }
.ticket-stamp { width: 96px; right: -26px; top: -38px; }
.qc .grain::after, .qc.grain::after { opacity: .08; }

/* ===== Oct 27 pass: apartments proof, flat price cards, comparison, promise, one-pager ===== */
.proof-band { padding: 46px 0; }
.proof-grid { display: grid; grid-template-columns: auto 1fr; gap: 50px; align-items: center; }
.proof-num { margin: 0; display: grid; gap: 4px; }
.proof-num b { font: 400 clamp(3.4rem, 7vw, 5.4rem)/.9 var(--serif); color: var(--glow); }
.proof-num span { font: 400 .78rem var(--label); letter-spacing: .18em; text-transform: uppercase; max-width: 22ch; }
.proof-quote { margin: 0; padding-left: 26px; border-left: 4px solid var(--glow); }
.proof-quote p { margin: 0 0 10px; font: 400 clamp(1.25rem, 2.2vw, 1.65rem)/1.3 var(--serif); }
.proof-quote footer { font: 400 .8rem var(--label); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
/* Price cards stay flat: business facts live in the quiet register */
.tier-main { transform: none; }
.tier-tag { align-self: flex-start; margin-bottom: 12px; padding: 5px 10px; border-radius: 999px; background: var(--ember); color: var(--linen); font: 400 .72rem var(--label); letter-spacing: .14em; text-transform: uppercase; }
.tier-blurb { flex: 1; margin: 0 0 14px; }
.tier-fit { font: 400 .8rem var(--label); letter-spacing: .06em; opacity: .85; margin: 0 0 18px; }
.compare-wrap { margin-top: 34px; border-radius: 22px; background: rgba(0,0,0,.2); padding: 8px 8px 14px; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 1rem; }
.compare col.c-label { width: 38%; }
.compare caption { text-align: left; padding: 18px 18px 10px; font: 400 .76rem var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--glow); }
.compare caption span { vertical-align: middle; }
.compare-sun { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-left: 10px; animation: sun-spin 14s linear infinite; }
@keyframes sun-spin { to { transform: rotate(360deg); } }
.compare th, .compare td { padding: 16px 18px; border-top: 1px dashed var(--line); vertical-align: middle; }
.compare td { text-align: center; }
.compare thead th { border-top: 0; padding-top: 22px; padding-bottom: 18px; vertical-align: bottom; }
.compare thead b { display: block; font: 400 1.55rem/1.1 var(--serif); margin-bottom: 8px; }
.compare .pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--glow); color: var(--night); font: 400 .9rem var(--label); letter-spacing: .04em; }
.compare thead .c-main .pill { background: var(--ember); color: var(--linen); }
.compare .c-tag { display: block; margin: 0 auto 10px; font: 400 .66rem var(--label); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }
.compare tbody th { text-align: left; font: 500 .98rem/1.35 var(--body); }
.compare .v { display: block; font: 400 1.9rem/1 var(--serif); }
.compare td small { display: block; font-size: .88rem; line-height: 1.35; opacity: .9; margin-top: 6px; }
.compare td > small:only-child { margin-top: 0; font-size: .95rem; opacity: 1; }
/* the Session column is a linen ticket running down the table */
.compare .c-main { background: var(--linen); color: var(--night); border-top-color: rgba(18,11,9,.18); }
.compare thead .c-main { border-radius: 18px 18px 0 0; }
.compare tbody tr:last-child .c-main { border-radius: 0 0 18px 18px; }
.compare tbody tr:first-child th, .compare tbody tr:first-child td { border-top-style: solid; }
/* included = the winking sun; not included = an empty ring */
.compare .yes, .compare .no { display: inline-block; width: 30px; height: 30px; vertical-align: middle; }
.compare .yes { background: url("assets/brand/mark-sun.svg") center/contain no-repeat; transform: rotate(-8deg); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.compare tr:nth-child(even) .yes { transform: rotate(7deg); }
.compare tr:hover .yes { transform: rotate(0) scale(1.18); }
.compare .no { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); position: relative; }
.compare .no::after { content: ""; position: absolute; left: 9px; right: 9px; top: 14px; height: 2px; border-radius: 2px; background: var(--line); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .compare-sun { animation: none; } .compare .yes { transition: none; } }
@media (max-width: 640px) {
  .compare-wrap { padding: 4px 4px 10px; }
  .compare col.c-label { width: 34%; }
  .compare th, .compare td { padding: 13px 8px; }
  .compare tbody th { font-size: .84rem; }
  .compare thead b { font-size: 1.15rem; }
  .compare .v { font-size: 1.45rem; }
  .compare td small { font-size: .78rem; }
  .compare .c-tag { font-size: .56rem; letter-spacing: .1em; }
  .compare .yes, .compare .no { width: 26px; height: 26px; }
  .compare .no::after { top: 12px; left: 8px; right: 8px; }
}
.promise-row { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
.guarantee { padding: 22px 24px; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--glow); }
.guarantee .label { color: var(--glow); margin-bottom: 8px; }
.guarantee p { margin: 0; }
.guarantee b { font: 400 1.35rem/1.25 var(--serif); display: block; margin-bottom: 6px; }
.onepager { display: grid; gap: 4px; padding: 22px 24px; border-radius: 18px; background: var(--linen); color: var(--night); text-decoration: none; transition: transform .18s; }
.onepager:hover { transform: translateY(-3px); }
.onepager .label { color: var(--ember); margin: 0; }
.onepager b { font: 400 1.5rem var(--serif); }
@media (max-width: 960px) {
  .proof-grid, .promise-row { grid-template-columns: 1fr; gap: 20px; }
  .tiers { display: flex; flex-direction: column; }
  .tier-main { order: -1; }
}
/* Sponsors: reel mock + founding tiers */
.sp-get { display: grid; grid-template-columns: 1.3fr .7fr; gap: 56px; align-items: start; }
.sp-fits-h { margin-top: 34px; }
.reel-mock { margin: 0; justify-self: center; width: min(280px, 100%); }
.reel-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 7px var(--linen), 0 24px 50px rgba(0,0,0,.35); transform: rotate(-2deg); }
.reel-frame img { width: 100%; height: 100%; object-fit: cover; }
.reel-ui { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; font: 400 .72rem var(--label); letter-spacing: .08em; color: var(--linen); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.reel-slate { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px; text-align: center; background: var(--night); color: var(--linen); }
.reel-slate .label { color: var(--glow); margin: 0 0 6px; }
.reel-slate b { font: 400 1.6rem var(--serif); letter-spacing: .08em; }
.reel-mock figcaption { margin-top: 18px; text-align: center; font-size: .88rem; opacity: .85; }
.founding { padding: 80px 0 clamp(130px, 14vw, 210px); }
.sp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 26px; }
.sp-tier { padding: 24px; border-radius: 18px; background: var(--card); display: grid; align-content: start; gap: 2px; }
.sp-tier b { font: 400 2.8rem/1 var(--serif); color: var(--glow); margin-top: 6px; }
.sp-tier > span:not(.label) { font: 400 .82rem var(--label); letter-spacing: .06em; opacity: .85; }
.sp-tier p { margin: 12px 0 0; }
.sp-tier-main { box-shadow: inset 0 0 0 2px var(--glow); }
@media (max-width: 960px) { .sp-get, .sp-tiers { grid-template-columns: 1fr; } }

/* Field errors + helper text */
.field .err, .qc-field .err { min-height: 0; font: 600 .82rem var(--body); color: #FFB59A; }
.theme-light .err, .ticket .err { color: var(--ember) !important; }
.field .err:empty, .qc-field .err:empty { display: none; }
.field input[aria-invalid="true"], .qc-field input[aria-invalid="true"] { border-color: #E2725B; }
.field .hint { font-size: .82rem; opacity: .75; }
.qc-field em { font-style: normal; opacity: .6; letter-spacing: .1em; }
/* Tap targets (44px) and a small-label floor on phones */
@media (max-width: 960px) {
  .foot-links a, .foot p a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-links { gap: 0; }
  .faqs summary { min-height: 44px; align-items: center; }
  .btn-sm { min-height: 44px; }
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .label, .film-credit, .chips span, .story figcaption span, .tier-fit { font-size: max(.78rem, 12.5px); }
  .home-proof { padding-top: 30px; }
}
.seg label { min-height: 46px; display: grid; place-items: center; }

/* ===== Sponsors v3: opt-in ===== */
.sp-hero .head-grid { align-items: start; }
.sp-chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips li { font: 400 .8rem var(--label); letter-spacing: .12em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; background: rgba(239,228,210,.12); }
.optin { position: relative; background: var(--linen); color: var(--night); border-radius: 20px; padding: 26px 26px 22px; display: grid; gap: 16px; box-shadow: 0 26px 60px rgba(0,0,0,.35); }
.optin .label { color: var(--ember); margin: 0; }
.optin-sub { margin: -8px 0 0; font-size: .95rem; opacity: .8; }
.optin .qc-field input { font-size: 1.35rem; }
.optin-alt { margin: 0; font-size: .88rem; text-align: center; }
.optin-alt a { color: var(--ember); }
.optin-done p { margin: 0 0 12px; }
.sp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.sp-steps li { display: grid; gap: 6px; padding: 24px 24px 0 0; }
.sp-steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.sp-steps .no { font: 400 .76rem var(--label); letter-spacing: .22em; color: var(--glow); }
.sp-steps b { font: 400 1.45rem/1.15 var(--serif); }
.sp-steps li > span:last-child { opacity: .85; }
.sp-tier .btn { margin-top: 16px; }
.faqs-light details { border-color: rgba(239,228,210,.2); }
.faqs-light summary::after { color: var(--glow); }
.sp-final { padding: 80px 0 clamp(130px, 14vw, 210px); }
.sp-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.optin-inline { grid-template-columns: 1fr auto; align-items: end; padding: 20px 22px; }
.optin-inline .optin-done { grid-column: 1 / -1; }
.sp-sticky { display: none; }
@media (max-width: 960px) {
  .sp-steps { grid-template-columns: 1fr; }
  .sp-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
  .sp-final-grid { grid-template-columns: 1fr; gap: 20px; }
  .optin-inline { grid-template-columns: 1fr; }
  .sp-sticky { display: flex; position: fixed; z-index: 65; left: 12px; right: 12px; bottom: 12px; min-height: 52px; align-items: center; justify-content: center; border-radius: 999px; background: var(--sundown); color: var(--night); font: 400 1rem var(--label); letter-spacing: .05em; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .25s, opacity .25s; }
  .sp-sticky.hide { transform: translateY(120%); opacity: 0; pointer-events: none; }
  body[data-page="sponsors"] .demo-bar { bottom: 72px; }
}
.sp-hero h1 { font-size: clamp(2.4rem, min(4.6vw, 8vh), 4.3rem); }
.tier-custom .tier-price span { font-size: 2.2rem; }
/* See a Session hub: one card per night */
.night-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 40px; }
.night-card { position: relative; display: flex; flex-direction: column; min-height: 460px; padding: 28px; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--linen); background: var(--bg); box-shadow: 0 0 0 6px var(--linen); transition: transform .25s; isolation: isolate; }
.night-card:nth-child(1) { transform: rotate(-1deg); } .night-card:nth-child(2) { transform: rotate(.8deg); }
.night-card:hover { transform: rotate(0) translateY(-6px); }
.night-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.night-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,11,9,.15) 0%, rgba(18,11,9,.35) 45%, rgba(18,11,9,.88) 100%); }
.night-poster { position: absolute; top: 22px; right: 22px; width: 24%; max-width: 125px; transform: rotate(6deg); box-shadow: 0 0 0 4px var(--linen), 0 12px 30px rgba(0,0,0,.45); }
.night-card .label { margin-top: auto; color: var(--glow); }
.night-card b { font: 400 2.1rem/1.05 var(--serif); margin: 6px 0 6px; max-width: 72%; }
.night-sub { opacity: .9; margin-bottom: 20px; }
.night-card .door-go { background: var(--linen); color: var(--night); }
@media (max-width: 760px) { .night-grid { grid-template-columns: 1fr; } .night-card { min-height: 380px; transform: none !important; } }
.door-poster-back { right: 14%; bottom: -2%; width: 58%; transform: rotate(-16deg); opacity: .95; }
body:not(.show-todo) .todo-row { display: none; }
.facts .plus { font-family: var(--body); font-weight: 600; margin-left: 1px; }
/* Apartments: two nights, two managers */
.proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.proof-card { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 28px 30px; border-radius: 18px; background: rgba(255,255,255,.05); }
.proof-card .proof-num { grid-template-columns: auto 1fr; align-items: end; gap: 14px; }
.proof-card .proof-num b { font-size: clamp(2.8rem, 5vw, 4rem); }
.proof-card .proof-num span { padding-bottom: 6px; }
.proof-card .proof-quote { flex: none; }
.proof-card figcaption { margin-top: auto; }
.proof-card .proof-quote p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.proof-card figcaption { font: 400 .76rem var(--label); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.plus { font-family: var(--body); font-weight: 600; }
.proof-num .plus { font-size: .7em; vertical-align: .25em; margin-left: 2px; }
@media (max-width: 860px) { .proof-pair { grid-template-columns: 1fr; } }
.ba-plain figure:first-child img { filter: none; }
/* FAQ page + the one-line pointers left on Apartments and Sponsors */
.faq-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.faq-jump a { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--acc); color: inherit; text-decoration: none; font: 400 .85rem var(--label); letter-spacing: .06em; }
.faq-jump a:hover { background: var(--acc); color: var(--bg); }
.faq-sponsors { background: var(--bg); color: var(--fg); }
#communities, #sponsors { scroll-margin-top: 80px; }
.faq-link { margin: 0; font: 400 1.35rem var(--serif); }
.faq-link a { color: var(--acc); }
a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }