/* ============================================================
   SEASON LAB · landing · style.css
   Tokens → base → components → sections → motion states → media
   ============================================================ */

:root {
  --paper: #F4F1EA;
  --ink: #0B0B0F;
  --blue: #1E2B8F;
  --red: #E2261F;
  --grass: #2F7A3D;
  --thermal: #EDEAE3;
  --thermal-ink: #8A8780;
  --white: #FFFFFF;
  --column: #152066;

  --disp: "Inter Tight", "IBM Plex Sans Thai", "Noto Sans Thai", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --thai: "IBM Plex Sans Thai", "Noto Sans Thai", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --hand: "Marker Felt", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --serif: Georgia, "Times New Roman", "Noto Serif Thai", serif;

  --fs-hero: clamp(3.5rem, 12vw, 12rem);
  --fs-title: clamp(2rem, 6vw, 5.5rem);
  --fs-body: 1rem;
  --fs-label: 0.72rem;

  --gutter: clamp(20px, 4vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--thai);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--blue); color: var(--paper); }

.disp {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.mono {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.label { margin-bottom: 1.25rem; opacity: .8; }
.title { font-size: var(--fs-title); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .9em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  border: 1.5px solid currentColor;
  transition: transform .5s var(--ease-out), background .3s, color .3s, border-color .3s;
  will-change: auto;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: var(--white); }
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(244,241,234,.5); }
.btn--ghost:hover { border-color: var(--paper); }
.btn--blue { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.btn--ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--paper); }
.btn--big { font-size: clamp(1rem, 1.6vw, 1.25rem); padding: 1.1em 2em; }

/* ============================================================
   0 · PRELOADER
   ============================================================ */
.pre {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  overflow: hidden;
}
.pre[hidden] { display: none; }
.pre__count {
  position: absolute; left: var(--gutter); bottom: var(--gutter);
  font-family: var(--disp); font-weight: 900; font-size: clamp(4rem, 14vw, 12rem); letter-spacing: -0.05em; line-height: .8;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.pre__label { position: absolute; top: var(--gutter); left: var(--gutter); opacity: .6; }
.pre__skip { position: absolute; right: var(--gutter); bottom: var(--gutter); opacity: .6; }
.pre__skip:hover { opacity: 1; }
.pre__booth { position: relative; width: 150px; }
.pre__mask { height: 260px; overflow: hidden; display: flex; align-items: flex-end; }
.pre__paper {
  width: 100%; background: var(--thermal); color: var(--ink);
  padding: 10px 10px 14px; transform: translateY(100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 96% 100%, 92% calc(100% - 6px), 88% 100%, 84% calc(100% - 6px), 80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 6px), 64% 100%, 60% calc(100% - 6px), 56% 100%, 52% calc(100% - 6px), 48% 100%, 44% calc(100% - 6px), 40% 100%, 36% calc(100% - 6px), 32% 100%, 28% calc(100% - 6px), 24% 100%, 20% calc(100% - 6px), 16% 100%, 12% calc(100% - 6px), 8% 100%, 4% calc(100% - 6px), 0 100%);
}
.pre__paper-head, .pre__paper-foot { font-size: .55rem; color: var(--thermal-ink); }
.pre__paper-img { width: 100%; margin: 8px 0; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.pre__slot { height: 6px; background: var(--paper); border-radius: 3px; margin-top: 2px; box-shadow: 0 0 0 4px var(--blue); }

/* ============================================================
   custom cursor
   ============================================================ */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 900;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
  display: none; opacity: 0;
  will-change: transform;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out);
}
.cursor__label { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); opacity: 0; font-size: .68rem; font-weight: 500; letter-spacing: .16em; transition: opacity .2s; }
.cursor.is-snap { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.cursor.is-snap .cursor__label { opacity: 1; }
.cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.cursor.is-down { transform: scale(.85) !important; }
@media (hover: hover) and (pointer: fine) {
  .js .cursor { display: block; }
  .js.has-cursor, .js.has-cursor a, .js.has-cursor button, .js.has-cursor [data-cursor] { cursor: none; }
}

/* ============================================================
   1 · NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter);
  mix-blend-mode: difference; color: var(--white);
}
.nav__brand { font-size: 1.05rem; letter-spacing: -0.02em; }
.nav__links { display: flex; gap: 1.8rem; font-weight: 600; font-size: .9rem; }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__pill {
  justify-self: end;
  border: 1.5px solid currentColor; border-radius: 999px;
  padding: .55em 1.1em; font-weight: 600; font-size: .85rem;
  transition: background .3s, color .3s;
}
.nav__pill:hover { background: var(--white); color: var(--ink); }
.nav__burger { display: none; justify-self: end; width: 44px; height: 44px; position: relative; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; top: 50%; transition: transform .4s var(--ease-io); }
.nav__burger span:first-child { transform: translateY(-4px); }
.nav__burger span:last-child { transform: translateY(4px); }
.nav__burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 700;
  background: var(--blue); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-io);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: .45rem; }
.menu__links a {
  font-family: var(--disp); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 11vw, 5rem); line-height: 1.15;
  display: flex; align-items: baseline; gap: .4em;
  transform: translateY(40px); opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s;
}
.menu__links a .mono { font-size: .7rem; opacity: .6; }
.menu__links .menu__cta { font-family: var(--thai); text-transform: none; font-size: 1.4rem; font-weight: 600; letter-spacing: 0; margin-top: 1.5rem; }
.menu.is-open .menu__links a { transform: none; opacity: 1; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .25s }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .31s }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .37s }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .43s }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: .49s }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: .58s }
.menu__foot { position: absolute; left: var(--gutter); bottom: var(--gutter); opacity: .6; }

/* ============================================================
   2 · HERO
   ============================================================ */
.hero {
  position: relative; background: var(--blue); color: var(--paper);
  min-height: 100svh; overflow: hidden;
}
.hero__inner { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 42%); }
.hero__text {
  position: relative; z-index: 2;
  padding: calc(var(--gutter) + 72px) var(--gutter) var(--gutter);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__eyebrow { margin-bottom: 2rem; opacity: .7; }
.hero__display { font-size: var(--fs-hero); margin-bottom: 1.25rem; width: calc(100vw - 2 * var(--gutter)); max-width: none; pointer-events: none; }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gutter); align-items: end; }
.hero__display .line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero__display .line__in { display: block; }
.js .hero__display .line__in { transform: translateY(110%); }
.hero__h1 { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.35; max-width: 22ch; margin-bottom: 1rem; }
.hero__lead { max-width: 52ch; opacity: .85; margin-bottom: 2rem; }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.js [data-intro] { opacity: 0; transform: translateY(24px); }

.hero__media {
  position: relative; z-index: 1;
  align-self: stretch;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__scroll { position: absolute; right: var(--gutter); bottom: var(--gutter); z-index: 3; display: flex; align-items: center; gap: .8em; mix-blend-mode: difference; }
.hero__scroll span { width: 40px; height: 1px; background: currentColor; display: block; transform-origin: left; animation: scrollLine 1.6s var(--ease-io) infinite; }
@keyframes scrollLine { 0% { transform: scaleX(0); transform-origin: left } 50% { transform: scaleX(1); transform-origin: left } 51% { transform-origin: right } 100% { transform: scaleX(0); transform-origin: right } }

/* mini booth illustration + receipt sliding out */
.hero__booth { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: start; width: max-content; }
.mini-booth { width: 96px; }
.mini-booth__frame {
  background: var(--blue); border: 1.5px solid var(--paper); outline: 1.5px solid var(--paper); outline-offset: 3px;
  padding: 10px 8px 8px; aspect-ratio: 5 / 6; display: flex; flex-direction: column; gap: 6px;
  box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 4.5px var(--blue), 0 0 0 6px var(--paper);
}
.mini-booth__screen { background: var(--paper); color: var(--blue); flex: 1; display: grid; place-items: center; border: 1px solid var(--paper); }
.mini-booth__screen span { font-family: var(--mono); font-size: .42rem; letter-spacing: .1em; background: var(--blue); color: var(--paper); padding: 2px 4px; }
.mini-booth__name { font-family: var(--disp); font-weight: 800; font-size: .4rem; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.mini-booth__slot { height: 3px; width: 60%; margin: 0 auto; background: var(--paper); border-radius: 2px; box-shadow: 0 0 0 2px var(--blue), 0 0 0 3px var(--paper); }
.mini-booth__out { grid-column: 1; width: 62px; margin: 4px auto 0; height: 130px; overflow: hidden; }
.mini-booth__paper {
  background: var(--thermal); color: var(--ink); padding: 6px 5px 8px; transform: translateY(-101%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), 90% 100%, 80% calc(100% - 4px), 70% 100%, 60% calc(100% - 4px), 50% 100%, 40% calc(100% - 4px), 30% 100%, 20% calc(100% - 4px), 10% 100%, 0 calc(100% - 4px));
}
.mini-booth__paper .mono { font-size: .38rem; letter-spacing: .06em; color: var(--thermal-ink); line-height: 1.3; }
.mini-booth__paper img { width: 100%; margin: 4px 0; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.mini-booth__paper .qr { color: var(--ink); margin-top: 2px; }
.mini-booth__cap { grid-column: 2; grid-row: 1; align-self: end; opacity: .7; }

/* ============================================================
   3 · MARQUEE
   ============================================================ */
.marquee { background: var(--paper); color: var(--ink); overflow: hidden; padding: clamp(18px, 2.5vw, 34px) 0; border-bottom: 1px solid rgba(11,11,15,.12); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; white-space: nowrap; font-size: clamp(2.2rem, 6.5vw, 6rem); padding-right: .4em; }
.marquee__group i { font-style: normal; color: var(--red); padding: 0 .35em; }

/* ============================================================
   4 · HOW IT WORKS
   ============================================================ */
.how { background: var(--blue); color: var(--paper); position: relative; overflow: hidden; }
.how__pin { position: relative; }
.how__track { display: flex; }
.how__intro { flex: 0 0 auto; width: min(46vw, 620px); padding: calc(var(--gutter) + 64px) var(--gutter) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.how__sub { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.4; margin: 1.5rem 0 .75rem; max-width: 24ch; }
.how__body { opacity: .8; max-width: 40ch; }
.how__hint { margin-top: 2.5rem; opacity: .6; }
.step { flex: 0 0 auto; width: min(64vw, 900px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; padding: var(--gutter); }
.step__media { aspect-ratio: 3 / 4; overflow: hidden; }
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__num { font-size: clamp(5rem, 12vw, 11rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--paper); margin-bottom: 1rem; }
.step__title { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; margin-bottom: .6rem; }
.step__body { opacity: .85; max-width: 32ch; }
.how__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; height: 1px; background: rgba(244,241,234,.25); display: none; }
.how__progress span { display: block; height: 100%; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }

@media (min-width: 1024px) {
  .how__pin { height: 100vh; }
  .how__track { height: 100vh; align-items: stretch; }
  .how__intro { padding-top: calc(var(--gutter) + 40px); }
  .step { height: 100vh; align-items: center; grid-template-columns: auto minmax(0, 1fr); width: auto; }
  .step__media { height: min(74vh, 800px); width: auto; }
  .how__progress { display: block; }
}

/* ============================================================
   5 · TEMPLATES · receipts
   ============================================================ */
.tpl { background: var(--thermal); color: var(--ink); padding: calc(var(--gutter) * 2) 0; position: relative; overflow: hidden; }
.tpl__head { padding: 0 var(--gutter); margin-bottom: clamp(24px, 3vw, 48px); }
.tpl__cols { display: grid; grid-template-columns: minmax(0, 60ch) 1fr; gap: var(--gutter); align-items: end; margin-top: 1.5rem; }
.tpl__sub { opacity: .85; }
.tpl__hint { justify-self: end; opacity: .6; }
.tpl__wrap { overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.tpl__wrap.is-dragging { cursor: grabbing; }
.tpl__row { display: flex; gap: clamp(20px, 3vw, 44px); padding: 24px var(--gutter) 40px; width: max-content; will-change: transform; }
.tpl__slot { overflow: hidden; padding: 0 12px; transform: rotate(var(--rot, 0deg)); }
.tpl__prop { position: absolute; right: -4vw; bottom: -6vw; width: clamp(220px, 26vw, 420px); aspect-ratio: 3 / 2; overflow: hidden; opacity: .9; pointer-events: none; display: none; }

.receipt {
  --r-ink: var(--ink);
  --r-fade: var(--thermal-ink);
  --r-w: 250px;
  width: var(--r-w); min-height: calc(var(--r-w) * 2.6);
  background: #F7F5F0; color: var(--r-ink);
  padding: 18px 16px 22px;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--mono);
  box-shadow: 0 30px 60px -20px rgba(11,11,15,.35), 0 2px 0 rgba(11,11,15,.06);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 96% 100%, 92% calc(100% - 7px), 88% 100%, 84% calc(100% - 7px), 80% 100%, 76% calc(100% - 7px), 72% 100%, 68% calc(100% - 7px), 64% 100%, 60% calc(100% - 7px), 56% 100%, 52% calc(100% - 7px), 48% 100%, 44% calc(100% - 7px), 40% 100%, 36% calc(100% - 7px), 32% 100%, 28% calc(100% - 7px), 24% 100%, 20% calc(100% - 7px), 16% 100%, 12% calc(100% - 7px), 8% 100%, 4% calc(100% - 7px), 0 100%);
  transition: color .4s, transform .6s var(--ease-out);
  outline: none;
}
.js .tpl__slot .receipt { transform: translateY(108%); }
.receipt::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.receipt__head { display: flex; flex-direction: column; gap: 2px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--r-fade); }
.receipt__head b { color: var(--r-ink); font-weight: 500; font-size: .74rem; }
.receipt__rule { border-top: 1.5px dashed var(--r-fade); }
.receipt__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #E8E5DE; }
.receipt__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.receipt__thermal { filter: grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode: multiply; }
.receipt__colour { opacity: 0; transition: opacity .35s; }
.receipt__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.receipt__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--r-fade); }
.receipt__meta span:nth-child(even) { text-align: right; color: var(--r-ink); }
.receipt__bar { height: 34px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 9px, currentColor 9px 12px, transparent 12px 14px, currentColor 14px 15px, transparent 15px 18px, currentColor 18px 21px, transparent 21px 22px); opacity: .85; }
.receipt__qr { display: flex; align-items: center; gap: 12px; }
.receipt__qr .qr { color: var(--r-ink); flex: 0 0 auto; border: 3px solid #F7F5F0; outline: 1px solid var(--r-fade); }
.receipt__qr .mono { font-size: .58rem; color: var(--r-fade); }

/* colour mode (hover / tap) */
.receipt.is-colour, .receipt:hover, .receipt:focus-visible { --r-ink: var(--blue); --r-fade: #6F79C4; }
.receipt.is-colour .receipt__colour, .receipt:hover .receipt__colour, .receipt:focus-visible .receipt__colour { opacity: 1; }
.receipt.is-colour .receipt__qr .mono::after, .receipt:hover .receipt__qr .mono::after, .receipt:focus-visible .receipt__qr .mono::after { content: " ✓"; }

/* ---------- the 10 real templates · .receipt[data-tpl] ---------- */
.receipt ol { margin: 0; padding: 0; list-style: none; }
.receipt__img img { object-position: var(--pos, 50% 50%); }
.receipt__cap { text-align: center; font-size: .56rem; color: var(--r-fade); }
.receipt__perf { height: 10px; background: radial-gradient(circle at 5px 5px, var(--thermal) 3.5px, transparent 4px) 0 0 / 14px 10px repeat-x; margin: 0 -16px; }
.receipt__ticket-top { text-align: center; font-size: 1.05rem; letter-spacing: .4em; font-weight: 500; border: 1.5px solid var(--r-ink); padding: 6px 0; }
.receipt__ticket-no { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; font-size: .6rem; align-items: baseline; }
.receipt__ticket-no b { font-weight: 500; font-size: .95rem; letter-spacing: .12em; }
.receipt__pola { background: var(--white); padding: 12px 12px 14px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); transform: rotate(-2deg); margin: 6px 0; }

/* NOON · polaroid + morning / noon / night blocks (colour blocks only in the digital file) */
.receipt__noon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; font-size: .46rem; letter-spacing: .08em; text-align: center; }
.receipt__noon span { position: relative; border: 1px solid var(--r-ink); padding: 16px 0 4px; color: var(--r-ink); transition: background .35s, color .35s; }
.receipt__noon span::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 8px; border: 1px solid var(--r-ink); background: var(--noon-c, transparent); transition: background .35s; }
.receipt__noon .is-on { background: var(--r-ink); color: #F7F5F0; }
.receipt__noon .is-on::before { border-color: #F7F5F0; }
.receipt[data-tpl="noon"]:is(.is-colour, :hover, :focus-visible) .receipt__noon [data-t="morning"] { --noon-c: #F2C14E; }
.receipt[data-tpl="noon"]:is(.is-colour, :hover, :focus-visible) .receipt__noon [data-t="noon"] { --noon-c: #F0742A; }
.receipt[data-tpl="noon"]:is(.is-colour, :hover, :focus-visible) .receipt__noon [data-t="night"] { --noon-c: #1E2B8F; }

/* DAILY · instax frame + handwritten marker caption */
.receipt__instax { background: var(--white); padding: 10px 10px 12px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); transform: rotate(1.5deg); margin: 4px 0; }
.receipt__instax .receipt__img { aspect-ratio: 4 / 5; }
.receipt__hand { font-family: var(--hand); font-size: 1.05rem; line-height: 1.1; color: var(--r-ink); margin-top: 12px; padding-bottom: 6px; transform: rotate(-2.5deg); text-transform: none; letter-spacing: 0; }
.receipt__daily { display: flex; justify-content: space-between; font-size: .56rem; color: var(--r-fade); }

/* STUDIO · behind-the-scenes editorial, contact sheet, big type */
.receipt__studio-h { font-size: 2.7rem; line-height: .85; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--r-ink); }
.receipt__sheet { background: var(--ink); padding: 10px; margin: 0 -4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transition: background .4s; }
.receipt__frame { display: flex; flex-direction: column; gap: 4px; }
.receipt__frame .mono { color: #F7F5F0; font-size: .46rem; letter-spacing: .18em; opacity: .8; }
.receipt__studio-cap { font-size: .5rem; color: var(--r-fade); }
.receipt__studio-big { font-size: 1.5rem; line-height: .9; text-align: right; letter-spacing: -.04em; }
.receipt[data-tpl="studio"]:is(.is-colour, :hover, :focus-visible) .receipt__sheet { background: var(--blue); }

/* PAUSED · slide film mount + serif gallery caption */
.receipt__mount { background: #DAD7CF; border-radius: 6px; padding: 14px 12px 10px; margin: 4px 0; }
.receipt__mount-in { border: 1.5px solid var(--r-ink); padding: 3px; background: #F7F5F0; }
.receipt__mount-in .receipt__img { aspect-ratio: 3 / 2; }
.receipt__mount-txt { display: flex; justify-content: space-between; font-size: .48rem; margin-top: 8px; color: var(--r-ink); letter-spacing: .16em; }
.receipt__serif { font-family: var(--serif); font-size: .74rem; line-height: 1.35; text-transform: none; letter-spacing: 0; color: var(--r-ink); }
.receipt__serif i { color: var(--r-fade); }

/* VIP · vintage ticket, one pass, perforation */
.receipt[data-tpl="vip"] { background: #F5F1E6; }
.receipt__vip { font-size: 3.4rem; line-height: .85; letter-spacing: -.05em; text-align: center; }
.receipt__vip-row { font-size: .46rem; text-align: center; color: var(--r-fade); letter-spacing: .14em; }

/* NOTE · minimal thank-you card */
.receipt[data-tpl="note"] { gap: 14px; }
.receipt__note-space { flex: 0 0 16px; }
.receipt__note-h { font-size: 2.3rem; line-height: .9; text-transform: none; font-style: italic; font-weight: 800; letter-spacing: -.04em; }
.receipt__img--small { width: 62%; margin: 0 auto; }
.receipt__note-sub { text-align: center; color: var(--r-fade); font-size: .56rem; }

/* RIPPED · torn top and bottom, 3 photos */
.receipt[data-tpl="ripped"] { padding-top: 28px; clip-path: polygon(0 6px, 3% 0, 7% 8px, 12% 2px, 16% 9px, 21% 3px, 26% 7px, 30% 0, 35% 8px, 40% 4px, 45% 10px, 50% 2px, 55% 7px, 60% 0, 64% 8px, 69% 3px, 74% 9px, 79% 1px, 84% 7px, 88% 2px, 93% 9px, 97% 3px, 100% 7px, 100% calc(100% - 9px), 96% 100%, 92% calc(100% - 5px), 88% calc(100% - 12px), 84% calc(100% - 2px), 79% calc(100% - 9px), 74% calc(100% - 4px), 69% calc(100% - 12px), 64% calc(100% - 2px), 60% calc(100% - 8px), 55% calc(100% - 3px), 50% calc(100% - 11px), 45% calc(100% - 1px), 40% calc(100% - 8px), 35% calc(100% - 4px), 30% calc(100% - 12px), 26% calc(100% - 2px), 21% calc(100% - 7px), 16% calc(100% - 3px), 12% calc(100% - 10px), 7% calc(100% - 1px), 3% calc(100% - 8px), 0 calc(100% - 4px)); }
.receipt__rip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.receipt__rip-h b { font-family: var(--disp); font-weight: 900; font-size: 1.5rem; letter-spacing: -.04em; text-transform: uppercase; line-height: 1; }
.receipt__rip-h .mono { font-size: .48rem; color: var(--r-fade); text-align: right; }
.receipt__stack { display: flex; flex-direction: column; gap: 6px; }
.receipt__stack .receipt__img { aspect-ratio: 2 / 1; }
.receipt__lines { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; font-size: .54rem; color: var(--r-ink); }
.receipt__lines span:nth-child(3n + 1) { color: var(--r-fade); }
.receipt__lines span:nth-child(3n) { text-align: right; }

/* BOARDING · train ticket + film slide */
.receipt__board-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .48rem; color: var(--r-fade); }
.receipt__board-h b { color: var(--r-ink); font-weight: 500; font-size: .62rem; }
.receipt__route { display: flex; align-items: center; justify-content: space-between; font-size: 2.3rem; line-height: .9; letter-spacing: -.05em; }
.receipt__route i { font-style: normal; font-size: 1.2rem; color: var(--r-fade); }
.receipt__board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.receipt__cell { display: flex; flex-direction: column; gap: 2px; font-size: .46rem; color: var(--r-fade); border-top: 1px solid var(--r-fade); padding-top: 4px; }
.receipt__cell b { color: var(--r-ink); font-weight: 500; font-size: .78rem; letter-spacing: .08em; }
.receipt__slide { background: #DAD7CF; border-radius: 5px; padding: 10px 10px 6px; margin: 2px 14px; }
.receipt__slide .receipt__img { aspect-ratio: 3 / 2; border: 1.5px solid var(--r-ink); }
.receipt__slide .mono { display: block; font-size: .44rem; text-align: center; margin-top: 5px; letter-spacing: .2em; color: var(--r-ink); }

/* TRACKLIST · debut single receipt */
.receipt__album { padding: 0 22px; }
.receipt__tl-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.receipt__tl-h b { font-size: 1.55rem; line-height: .9; letter-spacing: -.04em; }
.receipt__tl-h .mono { font-size: .46rem; color: var(--r-fade); text-align: right; }
.receipt__tracks { font-size: .56rem; border-top: 1.5px solid var(--r-ink); }
.receipt__tracks li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--r-fade); }
.receipt__tracks li span:first-child { color: var(--r-fade); }
.receipt__tracks-total { border-bottom: 1.5px solid var(--r-ink) !important; font-weight: 500; }

/* PHOTOSTRIP · B&W film strip, 4 frames (shares the film block) */
.receipt__film { background: var(--ink); padding: 14px 18px; margin: 0 -4px; position: relative; display: flex; flex-direction: column; gap: 10px; transition: background .4s; }
.receipt__film::before, .receipt__film::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9px; background: radial-gradient(circle at 50% 8px, #F7F5F0 3px, transparent 3.5px) 0 0 / 9px 16px repeat-y; }
.receipt__film::before { left: 4px; } .receipt__film::after { right: 4px; }
.receipt__film .receipt__img { aspect-ratio: 4 / 3; }
.receipt__film--4 { margin: 0 22px; padding: 10px 14px; gap: 5px; }
.receipt__film--4 .receipt__img { aspect-ratio: 3 / 2; }
.receipt__film-edge { color: #F7F5F0; font-size: .46rem; letter-spacing: .2em; text-align: center; opacity: .7; }
.receipt[data-tpl="photostrip"]:is(.is-colour, :hover, :focus-visible) .receipt__film { background: var(--blue); }

/* ============================================================
   6 · BOOTH LINEUP · sticky stack
   ============================================================ */
.booths { background: var(--paper); color: var(--ink); }
.booths__head { padding: calc(var(--gutter) * 2) var(--gutter) var(--gutter); }
.booths__stack { background: var(--bg, var(--blue)); transition: background .6s; }
.booth { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.booth__in {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gutter);
  padding: calc(var(--gutter) + 40px) var(--gutter) var(--gutter);
  color: var(--ink-c, var(--paper)); transform-origin: 50% 0%;
}
.booth__idx { opacity: .6; margin-bottom: 1rem; }
.booth__name { font-size: clamp(3rem, 9vw, 8rem); margin-bottom: 1.25rem; }
.booth__spec { max-width: 40ch; opacity: .9; margin-bottom: 1.5rem; }
.booth__custom { display: inline-block; border: 1px solid currentColor; padding: .6em 1em; border-radius: 999px; text-transform: none; letter-spacing: .04em; font-size: .78rem; }
.booth__media { background: var(--white); aspect-ratio: 2 / 3; max-height: calc(100svh - 2 * var(--gutter) - 40px); justify-self: end; width: 100%; max-width: 520px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.booth__media img { width: 100%; height: 100%; object-fit: cover; }
.booth__media--glow { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 80px rgba(120,150,255,.35), 0 40px 80px -30px rgba(0,0,0,.6); }
.booth__side { position: absolute; left: 40%; bottom: 8%; width: clamp(110px, 12vw, 190px); aspect-ratio: 2 / 3; overflow: hidden; transform: rotate(-6deg); box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); border: 6px solid var(--white); display: none; }
.booth__side img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .booth__side { display: block; } }

/* ============================================================
   7 · WHY
   ============================================================ */
.why { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }
.why__head { margin-bottom: clamp(32px, 5vw, 80px); }
.why__sub { margin-top: 1.25rem; font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 600; max-width: 32ch; }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); border-top: 1px solid rgba(11,11,15,.2); }
.why__col { padding-top: 1.5rem; position: relative; }
.why__col::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--blue); transition: width 1.2s var(--ease-out) .2s; }
.why__col.in::before { width: 100%; }
.why__num { color: var(--blue); margin-bottom: 2.5rem; }
.why__title { font-size: 1.35rem; font-weight: 600; line-height: 1.3; margin-bottom: .75rem; }
.why__col p { opacity: .8; max-width: 34ch; }

/* ============================================================
   8 · EDITORIAL SPREAD
   ============================================================ */
.edit { background: var(--grass); color: var(--paper); padding: calc(var(--gutter) * 2) var(--gutter) calc(var(--gutter) * 3); position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter) 1.5vw; }
.edit__cap { grid-column: 1 / -1; font-size: clamp(2.2rem, 7vw, 7rem); max-width: 12ch; margin-bottom: 4vw; }
.edit__cap em { font-style: italic; font-weight: 800; color: var(--paper); }
.edit__fig { overflow: hidden; }
.edit__fig img { width: 100%; height: 100%; object-fit: cover; }
.edit__fig--grass { grid-column: 1 / 8; aspect-ratio: 3 / 2; }
.edit__fig--street { grid-column: 9 / 13; aspect-ratio: 2 / 3; margin-top: 12vw; }
.edit__fig--gingham { grid-column: 4 / 8; aspect-ratio: 2 / 3; margin-top: -6vw; }
.edit__note { grid-column: 9 / -1; align-self: end; opacity: .7; }

/* ============================================================
   9 · PRICING + READ MORE
   ============================================================ */
.price { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }
.price__head { margin-bottom: clamp(24px, 4vw, 56px); }
.price__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.5vw, 24px); align-items: stretch; }
.plan {
  position: relative; background: var(--white); border: 1.5px solid rgba(11,11,15,.12);
  padding: clamp(22px, 2.4vw, 36px); display: flex; flex-direction: column; gap: .5rem;
  transition: transform .6s var(--ease-out), border-color .3s, box-shadow .6s var(--ease-out);
}
.plan:hover { transform: translateY(-10px); border-color: var(--blue); box-shadow: 0 30px 60px -30px rgba(30,43,143,.45), inset 0 0 0 1px var(--blue); }
.plan--hot { border-color: var(--blue); }
.plan__badge { position: absolute; top: -14px; left: clamp(22px, 2.4vw, 36px); background: var(--blue); color: var(--paper); font-weight: 600; font-size: .78rem; padding: .35em .9em; border-radius: 999px; }
.plan__name { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.plan__kind { opacity: .6; }
.plan__price { margin-top: 1.25rem; display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
.plan__price b { font-family: var(--disp); font-weight: 900; font-size: clamp(2.2rem, 3.6vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; }
.plan__price span { opacity: .6; }
.plan__from { font-size: .9rem; }
.plan__meta { opacity: .7; font-size: .92rem; }
.plan__list { margin: 1.25rem 0 1.75rem; border-top: 1px solid rgba(11,11,15,.12); }
.plan__list li { padding: .7rem 0; border-bottom: 1px solid rgba(11,11,15,.12); display: flex; gap: .7em; }
.plan__list li::before { content: "→"; color: var(--blue); font-family: var(--mono); }
.plan .btn { margin-top: auto; align-self: flex-start; }

.read { margin-top: clamp(48px, 8vw, 120px); }
.read__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.5vw, 24px); }
.read__card { display: grid; gap: .5rem; padding: clamp(22px, 2.4vw, 36px) 0; border-top: 1.5px solid var(--ink); position: relative; transition: padding-left .5s var(--ease-out); }
.read__card:hover { padding-left: 12px; }
.read__card::after { content: "→"; position: absolute; right: 0; top: clamp(22px, 2.4vw, 36px); font-family: var(--disp); font-size: 2rem; transition: transform .5s var(--ease-out); }
.read__card:hover::after { transform: translateX(8px); }
.read__tag { opacity: .6; }
.read__title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.read__body { opacity: .8; max-width: 44ch; }
.read__more { color: var(--blue); margin-top: .4rem; }

/* ============================================================
   10 · FAQ
   ============================================================ */
.faq { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gutter); border-top: 1px solid rgba(11,11,15,.12); }
.faq__head { position: relative; }
.faq__prop { width: clamp(200px, 22vw, 340px); aspect-ratio: 3 / 2; overflow: hidden; margin-top: 2rem; display: none; }
@media (min-width: 1024px) { .faq__prop { display: block; } }
.faq__item { border-top: 1px solid rgba(11,11,15,.2); }
.faq__item:last-child { border-bottom: 1px solid rgba(11,11,15,.2); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; text-align: left; font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.faq__plus { position: relative; width: 22px; height: 22px; flex: 0 0 auto; transition: transform .5s var(--ease-io); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: var(--ink); left: 50%; top: 50%; }
.faq__plus::before { width: 22px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__plus::after { width: 1.5px; height: 22px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__plus { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-io); }
.faq__a-in { overflow: hidden; }
.faq__a-in p { padding: 0 0 1.5rem; max-width: 56ch; opacity: .8; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ============================================================
   11 · CTA
   ============================================================ */
.cta { background: var(--red); color: var(--paper); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); min-height: 90vh; overflow: hidden; }
.cta__text { padding: calc(var(--gutter) * 2) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.cta__h { font-size: clamp(2.4rem, 6.5vw, 6.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.5rem; max-width: 12ch; }
.cta__sub { font-size: clamp(1rem, 1.4vw, 1.25rem); opacity: .9; margin-bottom: 2.5rem; }
.cta__media { overflow: hidden; align-self: stretch; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ============================================================
   12 · FOOTER
   ============================================================ */
.footer { background: var(--ink); color: var(--paper); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1fr auto auto; gap: var(--gutter); align-items: end; padding: calc(var(--gutter) * 1.5) var(--gutter) var(--gutter); }
.footer__label { opacity: .6; margin-bottom: .75rem; }
.footer__col a { text-decoration: underline; text-underline-offset: 4px; }
.footer__links { display: flex; gap: 1.8rem; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; }
.footer__links a { position: relative; }
.footer__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__copy { opacity: .6; }
.footer__giant-wrap { overflow: hidden; height: clamp(2.6rem, 11.6vw, 11.6rem); margin-top: var(--gutter); }
.footer__giant { font-size: clamp(3rem, 13.4vw, 13.4rem); line-height: .8; letter-spacing: -0.06em; white-space: nowrap; text-align: center; transform: translateY(35%); }

/* ============================================================
   motion states (JS-gated)
   ============================================================ */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.js .plan[data-reveal].in:hover { transform: translateY(-10px); transition: transform .6s var(--ease-out), border-color .3s, box-shadow .6s var(--ease-out); }
.js .btn[data-reveal].in:hover { transform: translateY(-2px); transition: transform .5s var(--ease-out), background .3s, color .3s; }
.js .mask { clip-path: inset(100% 0 0 0); }
.js .mask img { transform: scale(1.25); }
.js .mask.in { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.js .mask.in img { transform: none; transition: transform 1.5s var(--ease-io); }
.js .hero__media.mask { transition: none; }

/* ============================================================
   media queries
   ============================================================ */
@media (max-width: 1279px) {
  .hero__display { width: calc(100vw - 2 * var(--gutter)); }
  .step { width: min(72vw, 900px); }
  .edit__fig--grass { grid-column: 1 / 9; }
  .edit__fig--street { grid-column: 9 / 13; }
  .edit__fig--gingham { grid-column: 3 / 7; }
}

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__text { display: contents; }
  .hero__eyebrow { order: 1; padding: calc(var(--gutter) + 64px) var(--gutter) 0; margin-bottom: 1.25rem; }
  .hero__display { order: 2; width: 100%; padding: 0 var(--gutter); margin-bottom: 1.25rem; }
  .hero__media { order: 3; aspect-ratio: 4 / 5; }
  .hero__row { order: 4; padding: var(--gutter); }
  .hero__row { grid-template-columns: 1fr; }
  .hero__booth { margin-top: 2rem; }
  .hero__scroll { display: none; }
  .how__track { flex-direction: column; }
  .how__intro { width: 100%; padding: calc(var(--gutter) * 2) var(--gutter) var(--gutter); }
  .how__hint { display: none; }
  .step { width: 100%; grid-template-columns: 1fr 1fr; align-items: center; }
  .step__num { font-size: clamp(4rem, 12vw, 8rem); }
  .why__grid { grid-template-columns: 1fr; gap: 0; }
  .why__col { padding: 1.5rem 0; border-top: 1px solid rgba(11,11,15,.2); }
  .why__num { margin-bottom: 1rem; }
  .price__grid { grid-template-columns: 1fr; }
  .plan--hot { order: -1; }
  .read__grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; min-height: 0; }
  .cta__media { aspect-ratio: 4 / 5; }
  .booth__in { grid-template-columns: 1fr; align-content: center; gap: 1.5rem; }
  .booth__media { justify-self: start; max-width: min(60vw, 360px); max-height: 46svh; }
}

@media (max-width: 767px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .nav__pill { display: none; }
  .nav__burger { display: block; }
  .hero__h1 { max-width: none; }
  .hero__booth { grid-template-columns: 72px 1fr; column-gap: 12px; }
  .mini-booth { width: 72px; }
  .mini-booth__out { width: 48px; height: 100px; }
  .step { grid-template-columns: 1fr; padding: var(--gutter) var(--gutter) 0; }
  .step:last-child { padding-bottom: calc(var(--gutter) * 2); }
  .step__media { aspect-ratio: 3 / 4; }
  .tpl__cols { grid-template-columns: 1fr; }
  .tpl__hint { justify-self: start; }
  .receipt { --r-w: 210px; padding: 14px 12px 18px; }
  .receipt__studio-h { font-size: 2.3rem; } .receipt__vip { font-size: 2.9rem; } .receipt__route { font-size: 2rem; }
  .booth__name { font-size: clamp(3rem, 16vw, 5rem); }
  .booth__media { max-width: min(58vw, 300px); max-height: 40svh; }
  .edit { gap: 6vw 3vw; }
  .edit__cap { max-width: none; }
  .edit__fig--grass { grid-column: 1 / -1; }
  .edit__fig--street { grid-column: 7 / -1; margin-top: 0; }
  .edit__fig--gingham { grid-column: 1 / 7; margin-top: 0; }
  .edit__note { grid-column: 1 / -1; }
  .footer__top { grid-template-columns: 1fr; align-items: start; }
  .footer__links { flex-direction: column; gap: .8rem; }
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; }
  .js [data-reveal].in { transition: opacity .6s; }
  .js .mask { clip-path: none; }
  .js .mask img { transform: none; }
  .js .hero__display .line__in { transform: none; }
  .js [data-intro] { transform: none; }
  .js .tpl__slot .receipt { transform: none; }
  .hero__scroll span { animation: none; transform: none; }
  .cursor { display: none !important; }
  .plan, .btn, .read__card, .faq__plus, .faq__a, .menu, .menu__links a { transition-duration: .01s !important; }
  .booth { position: relative; height: auto; min-height: 100svh; }
  .tpl__prop, .faq__prop { transform: none !important; }
}

/* logo · season/lab wordmark (assets/logo.svg, symbol #logo, currentColor) */
.logo { display: inline-block; height: 1em; width: auto; aspect-ratio: 55 / 9; fill: currentColor; vertical-align: middle; }
.logo--nav { height: 1.05rem; }
.nav__brand { display: inline-flex; align-items: center; line-height: 1; }
.pre__label { display: flex; align-items: center; gap: .5em; }
.logo--pre { height: .95rem; }
.logo--mini { height: .42rem; }
.mini-booth__name { display: flex; justify-content: center; }
.logo--foot { height: 1.15rem; }
.footer__label { opacity: 1; }
.menu__brand { position: absolute; top: var(--gutter); left: var(--gutter); }
.logo--menu { height: 1.05rem; }