@font-face{font-family:"Garet";src:url("/assets/fonts/Garet-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Garet";src:url("/assets/fonts/Garet-Heavy.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Harlow Solid";src:url("/assets/fonts/HarlowSolid.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-MediumItalic.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-SemiBoldItalic.woff") format("woff");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-BoldItalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}
/* ==========================================================================
   Business Babe · "The Table" (v4)
   The site is the table you sit across. Every section is an object on it:
   photo prints with washi tape, sticky notes, an interview notebook, a contact
   sheet, a cafe bill, a menu, a postcard, a reserved table card.
   Brand: Pink + Black permanent, cream ground, yellow only for sticky notes/highlights.
   Type: Garet (caps + UI) · Playfair Display (story titles, quotes) · Georgia (reading)
         · Harlow Solid (handwritten notes, rare). Fallbacks: Outfit / Yellowtail.
   ========================================================================== */

:root {
  color-scheme: light;
  --ink: #0b0b0d;
  --ink-2: #2a282d;
  --paper: #fbfaf3;
  --paper-2: #f2eee0;
  --card: #fffdf7;
  --pink: #e6007e;
  --pink-text: #c9006d;
  --pink-soft: #fde3f0;
  --yellow: #f6d80e;
  --sticky: #fbe45a;
  --stone: #6c665b;
  --line: #e2ddcc;
  --rule: #d9d3bf;
  --line-dark: #2e2c31;

  --f-caps: "Garet", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --f-ui: "Garet", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body: Georgia, "Times New Roman", serif;
  --f-hand: "Harlow Solid", "Harlow Solid Italic", "Yellowtail", "Brush Script MT", cursive;

  --h1: clamp(2.5rem, 1rem + 4.8vw, 5.4rem);
  --h2: clamp(2rem, 1.2rem + 2.8vw, 3.6rem);

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1280px;
  --r: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 76px;
  --shadow: 0 1px 1px rgba(11,11,13,.06), 0 14px 30px -14px rgba(11,11,13,.38);
  --shadow-lift: 0 2px 2px rgba(11,11,13,.06), 0 30px 50px -20px rgba(11,11,13,.45);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html:not(.motion) { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font-family: var(--f-ui); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
  background-color: var(--paper);
  /* paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
::selection { background: var(--pink); color: #fff; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 200; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type roles ---------- */
.caps { font-family: var(--f-caps); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: .95; }
.caps .pk { color: var(--pink); }
h1.caps { font-size: var(--h1); }
h2.caps { font-size: var(--h2); }
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: 0; line-height: 1.05; }
.lede { font-family: var(--f-body); font-size: clamp(1.125rem, 1rem + .45vw, 1.35rem); line-height: 1.5; max-width: 40ch; }
.muted { color: var(--stone); }
.on-dark .muted { color: #aaa498; }
.label { font: 400 .75rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.marker { background: linear-gradient(100deg, transparent 2%, rgba(246,216,14,.9) 4%, rgba(246,216,14,.75) 96%, transparent 98%) 0 60% / 100% 70% no-repeat; padding: 0 .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Placeholder markers ---------- */
.ph { background: linear-gradient(transparent 58%, rgba(246,216,14,.6) 58%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-dark .ph { background: none; text-decoration: underline dotted var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
html.hide-ph .ph { background: none; text-decoration: none; }
.sample-banner { background: var(--ink); color: var(--paper); font-size: .8125rem; padding: 8px var(--gutter); text-align: center; }
.sample-banner b { color: var(--sticky); }
html.hide-ph .sample-banner { display: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); position: relative; }
.on-dark { background: var(--ink); color: var(--paper); }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.head h2 { max-width: 16ch; }
.head .note { max-width: 24ch; }
.note { font: 400 clamp(1.3rem, 1rem + .8vw, 1.75rem)/1.1 var(--f-hand); color: var(--pink-text); transform: rotate(-3deg); display: inline-block; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 14px 24px; border-radius: var(--r); border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 400 .9375rem/1.1 var(--f-ui); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .35s var(--spring), box-shadow .35s var(--ease); }
.btn:hover { transform: translate(-2px, -3px); box-shadow: 4px 5px 0 var(--pink); }
.btn:active { transform: none; box-shadow: none; }
.btn--pink { background: var(--pink); border-color: var(--ink); color: #fff; }
.btn--pink:hover { box-shadow: 4px 5px 0 var(--ink); }
.btn--line { background: var(--card); color: var(--ink); }
.btn--line:hover { box-shadow: 4px 5px 0 var(--ink); }
.on-dark .btn--line { background: transparent; color: var(--paper); border-color: var(--paper); }
.on-dark .btn--line:hover { box-shadow: 4px 5px 0 var(--pink); }
.on-dark .btn--pink { border-color: var(--pink); }
.on-dark .btn--pink:hover { box-shadow: 4px 5px 0 var(--paper); }
.btn--lg { min-height: 58px; padding: 16px 28px; font-size: 1rem; }
.btn svg { flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.more { font-weight: 400; text-decoration: none; border-bottom: 2px solid var(--pink); padding-bottom: 2px; white-space: nowrap; transition: color .2s; }
.more:hover { color: var(--pink-text); }
.more::after { content: " →"; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; font-size: .9375rem; font-weight: 400; }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; flex: none; }

/* ---------- Logo lockup ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--paper); flex: none; }
.logo__b { width: 48px; height: 48px; flex: none; position: relative; z-index: 1; transition: transform .6s var(--spring); }
.logo:hover .logo__b { transform: rotate(-16deg); }
.logo__bar { background: var(--ink); border-radius: 0 10px 10px 0; margin-left: -12px; padding: 6px 14px 6px 20px; display: grid; line-height: 1; }
.logo__word { font: 400 1rem/1 var(--f-caps); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; color: var(--paper); }
.logo__word b { color: var(--pink); font-weight: 400; }
.logo__tag { font: 400 .85rem/1 var(--f-hand); color: var(--paper); margin-top: 3px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px solid transparent; transition: transform .5s var(--ease), border-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--ink); }
.site-header.is-hidden { transform: translateY(calc(-100% - 2px)); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
.nav > a:not(.btn) { text-decoration: none; font-weight: 400; font-size: .9375rem; padding-block: 6px; position: relative; }
.nav > a:not(.btn)::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 2px; height: 8px; background: var(--sticky); z-index: -1; transform: scaleX(0) skewX(-12deg); transform-origin: left; transition: transform .35s var(--ease); }
.nav > a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1) skewX(-12deg); }
.nav .btn { min-height: 44px; padding: 10px 18px; font-size: .875rem; }
.nav__foot { display: none; }
.menu-btn { display: none; align-items: center; gap: 10px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r); padding: 9px 14px; font-weight: 400; font-size: .875rem; cursor: pointer; }
.menu-btn i { width: 16px; height: 8px; position: relative; display: block; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn i::before { top: 0; } .menu-btn i::after { top: 6px; }
body.menu-open .menu-btn i::before { top: 3px; transform: rotate(45deg); }
body.menu-open .menu-btn i::after { top: 3px; transform: rotate(-45deg); }
@media (max-width: 1060px) {
  .menu-btn { display: inline-flex; position: relative; z-index: 2; }
  .nav { position: fixed; inset: 0; z-index: 1; background: var(--paper); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: calc(var(--header-h) + 28px) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); gap: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; overflow-y: auto; }
  .nav > a:not(.btn) { font: 400 clamp(1.9rem, 8vw, 2.8rem)/1.05 var(--f-caps); text-transform: uppercase; padding-block: 12px; border-bottom: 2px dashed var(--rule); transform: translateY(10px); transition: transform .5s var(--ease), color .2s; }
  .nav > a:not(.btn)::after { display: none; }
  .nav > a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--pink); }
  .nav .btn { margin-top: 24px; min-height: 58px; font-size: 1rem; }
  .nav__foot { display: block; margin-top: 20px; font: 400 1.4rem/1.1 var(--f-hand); color: var(--pink-text); }
  body.menu-open .nav { opacity: 1; visibility: visible; transition: opacity .3s; }
  body.menu-open .nav > a { transform: none; }
  body.menu-open { overflow: hidden; }
  .logo__tag { display: none; }
}
@media (max-width: 420px) { .logo__word { font-size: .875rem; } .logo__b { width: 42px; height: 42px; } }

/* ======================================================================
   TABLE OBJECTS
   ====================================================================== */
.obj { position: relative; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); }

/* Washi tape (pink or yellow) */
.tape { position: relative; }
.tape::before { content: ""; position: absolute; z-index: 3; top: -14px; left: 50%; width: 96px; height: 28px; margin-left: -48px; background: rgba(230,0,126,.42); transform: rotate(var(--tape, -4deg)); box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.tape--y::before { background: rgba(246,216,14,.7); }
.tape--corner::before { top: -10px; left: -18px; margin-left: 0; width: 70px; --tape: -38deg; }

/* Photo print (polaroid) */
.print { background: #fff; padding: 10px 10px 46px; box-shadow: var(--shadow); margin: 0; }
.print img { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; background: var(--paper-2); pointer-events: none; }
.print figcaption, .print .cap { position: absolute; left: 14px; right: 14px; bottom: 10px; font: 400 1.35rem/1 var(--f-hand); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sticky note */
.sticky { background: var(--sticky); padding: 22px 20px 26px; box-shadow: var(--shadow); color: var(--ink); background-image: linear-gradient(180deg, rgba(0,0,0,.04), transparent 18%); clip-path: polygon(0 0, 100% 0, 100% 88%, 90% 100%, 0 100%); }
.sticky strong { display: block; font: 400 clamp(2.8rem, 1.8rem + 3vw, 4.6rem)/.9 var(--f-caps); font-variant-numeric: tabular-nums; }
.sticky span { display: block; margin-top: 8px; font: 400 1.35rem/1.05 var(--f-hand); }
.sticky--pink { background: #ffb3d9; }

/* Notebook page */
.notebook { background: var(--card); box-shadow: var(--shadow); padding: 34px 28px 30px 64px; position: relative;
  background-image: linear-gradient(90deg, transparent 46px, rgba(230,0,126,.45) 46px 48px, transparent 48px), repeating-linear-gradient(180deg, transparent 0 31px, #d7dde6 31px 32px);
  background-position: 0 0, 0 22px; }
.notebook::after { content: ""; position: absolute; top: 0; bottom: 0; left: 14px; width: 12px; background: radial-gradient(circle, var(--paper) 5px, transparent 6px) 0 12px / 12px 44px repeat-y; }

/* Coffee ring */
.ring { position: absolute; pointer-events: none; width: 180px; height: 180px; opacity: .5; z-index: 0; }

/* ======================================================================
   HOME HERO: the table
   ====================================================================== */
.hero { padding-block: clamp(28px, 4.5vw, 64px) clamp(56px, 7vw, 96px); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(36px, 4vw, 56px); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1fr 1fr; } }
.hero__slogan { font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem)/1 var(--f-hand); color: var(--pink); margin-bottom: 14px; display: inline-block; transform: rotate(-4deg); }
.hero h1 { max-width: 14ch; }
.hero .lede { margin-top: 24px; }
.hero .btn-row { margin-top: 30px; }
.hero__proof { margin-top: 22px; font-size: .9375rem; color: var(--stone); font-weight: 400; }
.hero__proof b { color: var(--ink); font-weight: 400; }
.table { position: relative; height: clamp(420px, 44vw, 600px); touch-action: pan-y; }
.table .obj { position: absolute; }
.table .print { width: clamp(170px, 19vw, 260px); }
[data-drag] { cursor: grab; user-select: none; -webkit-user-select: none; transition: box-shadow .3s; }
@media (pointer: fine) { [data-drag] { touch-action: none; } }
.print__link { color: inherit; text-decoration: none; }
.print__link::after { content: ""; position: absolute; inset: 0; z-index: 4; }
html.motion [data-drag].dragging, [data-drag].dragging { cursor: grabbing; box-shadow: var(--shadow-lift); transition: none !important; }
[data-drag]:hover { box-shadow: var(--shadow-lift); }
.table__hint { position: absolute; right: 2%; bottom: -8px; font: 400 1.35rem/1 var(--f-hand); color: var(--stone); transform: rotate(-4deg); display: flex; align-items: center; gap: 8px; }
.table__hint svg { width: 46px; color: var(--pink); }
@media (pointer: coarse) { .table__hint { display: none; } }
@media (max-width: 979px) { .table { height: clamp(380px, 100vw, 540px); } .table .print { width: clamp(150px, 46vw, 230px); } }
@media (max-width: 640px) { .table__note { display: none; } }

/* ======================================================================
   STICKY NOTE NUMBERS (purpose)
   ====================================================================== */
.purpose { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .purpose { grid-template-columns: 1.15fr .85fr; } }
.purpose .notebook p { font: 400 clamp(1.15rem, 1rem + .5vw, 1.5rem)/32px var(--f-body); }
.purpose .notebook p + p { margin-top: 32px; }
.purpose .notebook .sig { font: 400 1.7rem/32px var(--f-hand); color: var(--pink-text); display: block; margin-top: 32px; }

.stickies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.stickies .sticky:nth-child(1) { --rot: -4deg; }
.stickies .sticky:nth-child(2) { --rot: 3deg; margin-top: 30px; }
.stickies .sticky:nth-child(3) { --rot: -2deg; margin-top: 8px; }
@media (max-width: 520px) { .stickies { gap: 10px; } .sticky { padding: 16px 12px 20px; } .sticky span { font-size: 1.05rem; } }

/* ======================================================================
   FLOW: notebook → contact sheet → phone, joined by a drawn arrow
   ====================================================================== */
.flow { position: relative; display: grid; gap: clamp(48px, 6vw, 72px); }
@media (min-width: 960px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; } .flow > .step:nth-child(2) { margin-top: 90px; } .flow > .step:nth-child(3) { margin-top: 20px; } }
.flow__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; display: none; }
@media (min-width: 960px) { .flow__path { display: block; } }
.flow__path path { fill: none; stroke: var(--pink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 10; }
.step { position: relative; z-index: 1; display: grid; gap: 18px; }
.step__no { font: 400 2.4rem/1 var(--f-hand); color: var(--pink); }
.step h3 { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1 var(--f-caps); text-transform: uppercase; }
.step p { font-family: var(--f-body); font-size: 1.0625rem; max-width: 32ch; color: var(--ink-2); }
.step__obj { --rot: -2deg; }
.step:nth-child(2) .step__obj { --rot: 2deg; }
.step:nth-child(3) .step__obj { --rot: -1.5deg; }
/* 1: interview notes */
.qs { padding: 26px 22px 22px 60px; min-height: 240px; }
.qs li { font: 400 1.4rem/32px var(--f-hand); color: var(--ink); }
.qs li:nth-child(2) { color: var(--pink-text); }
.qs ol { margin: 0; padding: 0; list-style: none; }
.qs .stamp { position: absolute; right: 16px; bottom: 14px; font: 400 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
/* 2: contact sheet */
.contact { background: #151417; padding: 16px 14px 14px; box-shadow: var(--shadow); color: #cfc9bb; }
.contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.contact__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.9); }
.contact__grid .pick { position: relative; }
.contact__grid .pick::after { content: ""; position: absolute; inset: -6px; border: 3px solid var(--pink); border-radius: 50%; transform: rotate(-8deg); }
.contact__meta { display: flex; justify-content: space-between; margin-top: 10px; font: 400 .65rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.contact__meta span:last-child { color: var(--sticky); }
/* 3: phone */
.phone { width: min(250px, 100%); aspect-ratio: 9 / 18.5; background: var(--ink); border-radius: 34px; padding: 10px; box-shadow: var(--shadow-lift); margin-inline: auto; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: var(--ink-2); }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.phone__ui { position: absolute; inset: auto 0 0 0; padding: 50px 14px 16px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: .8rem; }
.phone__ui b { display: block; font: 400 .95rem/1.1 var(--f-caps); text-transform: uppercase; }
.phone__live { position: absolute; top: 14px; left: 14px; background: var(--pink); color: #fff; font: 400 .65rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; }
.phone__heart { position: absolute; right: 14px; bottom: 70px; width: 34px; height: 34px; color: var(--pink); }
html.motion .step.in .phone__heart { animation: heart 1.2s var(--spring) .6s both; }
@keyframes heart { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.flow__cta { margin-top: clamp(40px, 5vw, 64px); }
.step__arrow { position: absolute; z-index: 3; color: var(--pink); width: 90px; height: 70px; pointer-events: none; right: -62px; top: 34%; }
.step__arrow path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
html.motion .step:not(.in) .step__arrow path { stroke-dashoffset: 200; }
html.motion .step .step__arrow path { transition: stroke-dashoffset 1.2s var(--ease) .7s; }
@media (max-width: 959px) { .step__arrow { right: auto; left: 50%; top: auto; bottom: -62px; transform: translateX(-50%) rotate(90deg); width: 70px; height: 56px; } }

/* ======================================================================
   STORY PRINTS (cards)
   ====================================================================== */
.card { display: block; text-decoration: none; color: var(--ink); --rot: 0deg; }
.card .print { transition: transform .5s var(--spring), box-shadow .4s; transform: rotate(var(--rot)); }
.card:hover .print, .card:focus-visible .print { transform: rotate(0deg) translateY(-6px) scale(1.015); box-shadow: var(--shadow-lift); }
.card__body { padding: 16px 4px 0; display: grid; gap: 6px; }
.card__meta { display: flex; gap: 12px; align-items: center; font: 400 .72rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); flex-wrap: wrap; }
.card__meta .cat { color: var(--pink-text); }
.card h3 { font: 400 clamp(1.4rem, 1.1rem + .9vw, 1.85rem)/1.12 var(--f-serif); letter-spacing: -0.015em; }
.card__title { font-family: var(--f-body); font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.prints-grid { display: grid; gap: clamp(40px, 5vw, 64px) clamp(20px, 2.6vw, 36px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.prints-grid > *:nth-child(3n+1) { --rot: -2deg; }
.prints-grid > *:nth-child(3n+2) { --rot: 1.5deg; }
.prints-grid > *:nth-child(3n) { --rot: -.8deg; }
/* Home: lead print + four */
.spread { display: grid; gap: clamp(40px, 5vw, 64px) clamp(20px, 2.6vw, 36px); }
@media (min-width: 960px) {
  .spread { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .spread > .card { grid-column: span 3; }
  .spread > .card--lead { grid-column: 1 / span 6; grid-row: span 2; --rot: -1.5deg; }
  .spread > .card:nth-child(2) { --rot: 2deg; } .spread > .card:nth-child(3) { --rot: -2.5deg; margin-top: 40px; }
  .spread > .card:nth-child(4) { --rot: 1deg; } .spread > .card:nth-child(5) { --rot: -1deg; margin-top: 30px; }
  .card--lead .print img { aspect-ratio: 4 / 4.4; }
  .card--lead h3 { font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem); }
  .card--lead .print figcaption { font-size: 1.8rem; bottom: 12px; }
  .card--lead .print { padding-bottom: 56px; }
}

/* ======================================================================
   NAPKIN QUOTE
   ====================================================================== */
.napkin { position: relative; max-width: 900px; margin-inline: auto; background: var(--card); padding: clamp(36px, 6vw, 72px) clamp(28px, 6vw, 80px); box-shadow: var(--shadow); --rot: -1deg;
  -webkit-mask: radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) 0 0 / 20px 51% repeat-x, radial-gradient(circle at 10px 100%, transparent 7px, #000 7.5px) 0 100% / 20px 51% repeat-x;
  mask: radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) 0 0 / 20px 51% repeat-x, radial-gradient(circle at 10px 100%, transparent 7px, #000 7.5px) 0 100% / 20px 51% repeat-x; }
.napkin p { font: italic 400 clamp(1.8rem, 1.1rem + 2.8vw, 3.4rem)/1.15 var(--f-serif); text-wrap: balance; }
.napkin p::before { content: "“"; color: var(--pink); }
.napkin p::after { content: "”"; color: var(--pink); }
.napkin cite { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-style: normal; }
.napkin cite .hand { font-size: 1.7rem; color: var(--pink-text); }
.napkin cite small { font: 400 .75rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }

/* ======================================================================
   REELS as phones
   ====================================================================== */
.reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 230px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 4px 22px; scrollbar-width: thin; }
.reel { scroll-snap-align: start; position: relative; display: block; text-decoration: none; color: #fff; background: var(--ink); border-radius: 30px; padding: 8px; aspect-ratio: 9 / 18; box-shadow: var(--shadow); transition: transform .45s var(--spring); }
.reel:nth-child(odd) { transform: rotate(-1.5deg); } .reel:nth-child(even) { transform: rotate(1.5deg); }
.reel:hover { transform: rotate(0) translateY(-8px); }
.reel__screen { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden; background: var(--ink-2); }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel__play { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; transition: transform .4s var(--spring); }
.reel:hover .reel__play { transform: scale(1.15); }
.reel__cap { position: absolute; inset: auto 0 0 0; padding: 50px 14px 16px; background: linear-gradient(transparent, rgba(0,0,0,.78)); font-size: .8rem; }
.reel__cap b { display: block; font: 400 .95rem/1.15 var(--f-caps); text-transform: uppercase; }

/* ======================================================================
   PICK A SEAT: reserved table card + business card
   ====================================================================== */
.seats { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .seats { grid-template-columns: 1fr 1fr; } }
.tent { display: block; text-decoration: none; color: var(--ink); --rot: -2deg; transition: transform .5s var(--spring); }
.tent:hover { transform: rotate(0) translateY(-6px); }
.tent__face { background: var(--card); border: 2px solid var(--ink); border-radius: 6px; padding: clamp(26px, 4vw, 44px); text-align: center; box-shadow: var(--shadow); position: relative; }
.tent__face::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 14px; background: linear-gradient(var(--rule), var(--line)); clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); }
.tent__top { font: 400 .75rem/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--stone); }
.tent__big { font: 400 clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem)/.9 var(--f-caps); text-transform: uppercase; color: var(--pink); margin: 12px 0 6px; letter-spacing: .02em; }
.tent__for { font: 400 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.1 var(--f-hand); }
.tent__go { display: inline-flex; margin-top: 20px; font: 400 .9375rem/1 var(--f-ui); border-bottom: 2px solid var(--pink); padding-bottom: 3px; }
.bizcard { display: grid; gap: 22px; text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 14px; padding: clamp(26px, 3.5vw, 40px); box-shadow: var(--shadow-lift); --rot: 3deg; transition: transform .5s var(--spring); aspect-ratio: 1.75; max-width: 560px; justify-self: center; width: 100%; align-content: space-between; }
.bizcard:hover { transform: rotate(0) translateY(-6px); }
.bizcard .logo__bar { background: var(--paper); } .bizcard .logo__word { color: var(--ink); }
.bizcard h3 { font: 400 clamp(1.4rem, 1rem + 1.4vw, 2.1rem)/1 var(--f-caps); text-transform: uppercase; }
.bizcard h3 .pk { color: var(--pink); }
.bizcard small { font: 400 .8rem/1.4 var(--f-ui); color: #aaa498; }
@media (max-width: 520px) { .bizcard { aspect-ratio: auto; } }

/* ======================================================================
   POSTCARD newsletter
   ====================================================================== */
.post-wrap { background: var(--pink); }
.postcard { position: relative; display: grid; gap: 28px; background: var(--card); padding: clamp(24px, 4vw, 44px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); --rot: -1.2deg; max-width: 1040px; margin-inline: auto; }
@media (min-width: 860px) { .postcard { grid-template-columns: 1.1fr 1fr; gap: 0; } .postcard__left { padding-right: 40px; border-right: 2px solid var(--rule); } .postcard__right { padding-left: 40px; } }
.postcard h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.postcard__left .hand { font-size: 1.6rem; color: var(--pink-text); margin-top: 16px; display: block; transform: rotate(-2deg); }
.postcard__right { display: grid; gap: 18px; align-content: start; position: relative; }
.stamp { justify-self: end; width: 88px; height: 106px; background: var(--pink); color: #fff; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; font: 400 .62rem/1.1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; padding: 8px; outline: 3px dotted var(--card); outline-offset: -6px; transform: rotate(4deg); }
.stamp svg { width: 44px; height: 44px; }
.postmark { position: absolute; right: 60px; top: 30px; width: 120px; height: 120px; border: 2px solid rgba(11,11,13,.35); border-radius: 50%; display: grid; place-items: center; text-align: center; font: 400 .6rem/1.3 var(--f-ui); letter-spacing: .14em; color: rgba(11,11,13,.45); transform: rotate(-14deg); pointer-events: none; }
.addr { display: grid; gap: 8px; }
.addr label { font: 400 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.nl-form { display: grid; gap: 14px; }
.nl-form input[type="email"] { width: 100%; min-height: 54px; border: 0; border-bottom: 2px solid var(--ink); background: transparent; padding: 10px 2px; font: 400 1.6rem/1 var(--f-hand); }
.nl-form input[type="email"]::placeholder { color: #b1ab9c; }
.nl-form input[type="email"]:focus { outline: none; border-bottom-color: var(--pink); }
.nl-form .btn { justify-self: start; }
.form-note { font-size: .8125rem; color: var(--stone); }
.on-dark .form-note { color: #aaa498; }
.form-status { font-size: .9375rem; font-weight: 400; }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { color: #0b6b33; }
.on-dark .form-status[data-state="ok"] { color: #8fe0ae; }
.form-status[data-state="err"] { color: #b3261e; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 96px) calc(28px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--pink); }
.footer-top { display: grid; gap: 36px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 18px; align-content: start; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand .logo__bar { background: var(--paper); }
.footer-brand .logo__word { color: var(--ink); }
.footer-brand .logo__tag { color: var(--ink); display: block; }
.footer-brand p { max-width: 30ch; color: #aaa498; font-size: .9375rem; }
.footer-col h4 { font: 400 .75rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .16em; color: var(--pink); margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .9375rem; }
.footer-col .contact-line { display: grid; gap: 1px; }
.footer-col .contact-line small { color: #8f8a80; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; }
.footer-slogan { font: 400 clamp(3rem, 1.2rem + 8vw, 10rem)/1 var(--f-hand); color: var(--pink); margin-top: clamp(40px, 6vw, 72px); transform: rotate(-3deg); transform-origin: left; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: .75rem; color: #8f8a80; }
.ph-toggle { background: none; border: 1px solid #4a4640; color: #bdb8ad; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: .75rem; }
.ph-toggle:hover { border-color: var(--yellow); color: var(--yellow); }

/* ---------- Sticky CTA (phones only) ---------- */
.sticky-cta { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ink); transform: translateY(100%); transition: transform .5s var(--ease); }
.sticky-cta.in { transform: none; }
.sticky-cta .btn { flex: 1; min-height: 48px; padding: 10px 14px; }
.sticky-cta .btn:hover { box-shadow: none; transform: none; }
.sticky-cta .btn--wa { flex: 0 0 52px; padding: 0; background: #25d366; border-color: #25d366; color: #0b0b0d; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body.menu-open .sticky-cta { transform: translateY(100%); }

/* ---------- Newsletter slide-in (story pages, desktop only) ---------- */
.slidein { position: fixed; z-index: 56; right: 28px; bottom: 28px; width: 340px; background: var(--sticky); color: var(--ink); padding: 26px 22px 24px; box-shadow: var(--shadow-lift); transform: translateY(30px) rotate(3deg); opacity: 0; transition: transform .7s var(--spring), opacity .4s; clip-path: polygon(0 0, 100% 0, 100% 90%, 92% 100%, 0 100%); }
.slidein.in { transform: rotate(2deg); opacity: 1; }
.slidein h3 { font: 400 1.9rem/1 var(--f-hand); margin: 0 0 10px; padding-right: 30px; }
.slidein .nl-form input[type="email"] { font-size: 1.3rem; min-height: 46px; }
.slidein__x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; }
@media (max-width: 899px) { .slidein { display: none !important; } }

/* ---------- Page header ---------- */
.page-head { padding-block: clamp(40px, 6vw, 96px) clamp(32px, 4vw, 56px); position: relative; }
.page-head .lede { margin-top: 22px; }
.page-head .btn-row { margin-top: 28px; }
.page-head .ticks { margin-top: 20px; }
.page-head__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .page-head__grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* ---------- Filters (folder tabs) ---------- */
.filters { display: grid; gap: 12px; padding: 16px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); margin-bottom: 56px; position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 10px); z-index: 20; box-shadow: var(--shadow); transition: top .5s var(--ease); }
body.header-hidden .filters { top: calc(env(safe-area-inset-top, 0px) + 10px); }
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters__label { font: 400 .72rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); min-width: 60px; }
.chip { border: 2px solid var(--ink); background: transparent; border-radius: 999px; padding: 6px 14px; font-size: .875rem; font-weight: 400; cursor: pointer; transition: all .2s; }
.chip:hover { background: var(--sticky); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.select, .search { min-height: 46px; border: 2px solid var(--ink); border-radius: var(--r); padding: 8px 16px; background: #fff; }
.select:focus, .search:focus { outline: none; box-shadow: 0 0 0 4px var(--pink-soft); }
.search { flex: 1 1 240px; padding-left: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230b0b0d' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 16px center; }
.filters__count { font: 400 1.3rem/1 var(--f-hand); color: var(--pink-text); margin-left: auto; }
.empty { padding: 40px 0; font: 400 1.8rem/1.2 var(--f-hand); color: var(--stone); }
@media (max-width: 700px) {
  .filters { position: static; }
  .filters__row--chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .filters__row--chips .chip { flex: none; }
  .filters__label { min-width: 0; }
}

/* ---------- Story page ---------- */
.story-open { padding-block: clamp(36px, 5vw, 72px) 0; }
.story-open__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .story-open__grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tag { display: inline-block; font: 400 .72rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 2px solid var(--ink); text-decoration: none; transition: background-color .2s; }
.tag:hover { background: var(--sticky); }
.tag--pink { background: var(--pink); border-color: var(--pink); color: #fff; }
.tag--pink:hover { background: var(--ink); border-color: var(--ink); }
.story-open .biz { font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem)/1 var(--f-hand); color: var(--pink); display: inline-block; margin-bottom: 12px; transform: rotate(-3deg); }
.story-open h1 { font: 400 clamp(2.4rem, 1.2rem + 3.8vw, 4.6rem)/1.03 var(--f-serif); letter-spacing: -0.025em; }
.story-open .intro { font-family: var(--f-body); font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); line-height: 1.45; margin-top: 24px; max-width: 42ch; color: var(--ink-2); }
.byline { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 22px; font: 400 .72rem/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.story-print { --rot: 2.5deg; max-width: 560px; justify-self: center; width: 100%; }
.story-print .print img { aspect-ratio: 4 / 4.6; }
.story-layout { display: grid; gap: 56px; padding-block: clamp(56px, 7vw, 96px); }
@media (min-width: 1000px) { .story-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 88px; } }
.prose { font-family: var(--f-body); font-size: 1.1875rem; line-height: 1.75; max-width: 64ch; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font: 400 1.2rem/1.2 var(--f-caps); text-transform: uppercase; margin-top: 2.2em; letter-spacing: .02em; }
.prose h2::before { content: "✎ "; color: var(--pink); }
.prose > p:first-of-type::first-letter { font: 400 4.4em/.8 var(--f-caps); float: left; padding: .08em .12em 0 0; color: var(--pink); }
.pull { margin: 2.4em 0; position: relative; background: var(--sticky); padding: 30px 28px 34px; box-shadow: var(--shadow); --rot: -1.5deg; clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%); }
.pull:nth-of-type(even) { --rot: 1.2deg; background: #ffc6e3; }
.pull p { font: italic 400 clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem)/1.2 var(--f-serif); color: var(--ink); text-wrap: balance; }
.pull cite { display: block; margin-top: 12px; font: 400 1.5rem/1 var(--f-hand); font-style: normal; color: var(--pink-text); }
@media (min-width: 1000px) { .pull { margin-inline: -2.5rem 1rem; } }
/* Visit card = cafe business card */
.visit { align-self: start; position: sticky; top: calc(var(--header-h) + 28px); transition: top .5s var(--ease); }
body.header-hidden .visit { top: 28px; }
.visit__card { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 26px 24px; display: grid; gap: 16px; box-shadow: var(--shadow); --rot: -1.5deg; }
.visit__card h2 { font: 400 1.3rem/1.05 var(--f-caps); text-transform: uppercase; }
.visit__card h2 small { display: block; font: 400 1.4rem/1 var(--f-hand); text-transform: none; color: var(--pink-text); margin-bottom: 4px; }
.visit dl { margin: 0; display: grid; gap: 12px; border-top: 2px dashed var(--rule); padding-top: 14px; }
.visit dt { font: 400 .68rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .16em; color: var(--stone); margin-bottom: 4px; }
.visit dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
.visit .btn { width: 100%; }
@media (max-width: 999px) { .visit { position: static; } }
.gallery-table { position: relative; display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .gallery-table { grid-template-columns: repeat(3, 1fr); align-items: start; } .gallery-table > figure:nth-child(3n+2) { margin-top: 48px; } .gallery-table > figure:nth-child(3n) { margin-top: 16px; } }
.gallery-table > figure:nth-child(odd) { --rot: -1.8deg; } .gallery-table > figure:nth-child(even) { --rot: 2deg; }
.gallery-table .print figcaption { font-size: 1.05rem; }

.reel-embed { display: grid; gap: 36px; align-items: center; }
@media (min-width: 800px) { .reel-embed { grid-template-columns: 250px 1fr; gap: 72px; } }
.reel-embed .reel { max-width: 250px; }

/* ---------- Explore ---------- */
.view-toggle { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--r); padding: 3px; background: #fff; }
.view-toggle button { border: 0; background: none; border-radius: 8px; padding: 8px 16px; font-weight: 400; font-size: .875rem; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.dir-card { display: block; position: relative; --rot: 0deg; }
.dir-card .print { transition: transform .5s var(--spring), box-shadow .4s; transform: rotate(var(--rot)); }
.dir-card:hover .print { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-lift); }
.dir-card .print img { aspect-ratio: 3 / 2; }
.dir-card h3 { font: 400 1.5rem/1.15 var(--f-serif); margin-top: 14px; }
.dir-card h3 a { text-decoration: none; }
.dir-card p { margin-top: 4px; }
.dir-card .actions { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .875rem; margin-top: 10px; }
.badge { position: absolute; z-index: 4; top: -12px; right: -10px; background: var(--sticky); color: var(--ink); font: 400 1.25rem/1 var(--f-hand); padding: 10px 12px; transform: rotate(6deg); box-shadow: var(--shadow); max-width: 150px; }
.dir-card__thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.dir-card__thumbs img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border: 4px solid #fff; box-shadow: var(--shadow); }
.map-wrap { position: relative; background: #f4efdd; border: 2px solid var(--ink); overflow: hidden; border-radius: 6px; box-shadow: var(--shadow); --rot: -.5deg; }
.map-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, transparent 33%, rgba(0,0,0,.05) 33.3%, transparent 34%, transparent 66%, rgba(0,0,0,.05) 66.6%, transparent 67%), linear-gradient(180deg, transparent 49.7%, rgba(0,0,0,.06) 50%, transparent 50.5%); }
.map-wrap svg { width: 100%; height: auto; }
.map-pin { cursor: pointer; }
.map-pin:focus { outline: none; }
.map-pin:hover .head, .map-pin:focus .head { r: 12; }
.map-pop { position: absolute; z-index: 2; background: var(--sticky); color: var(--ink); padding: 14px 16px; font-size: .875rem; width: 220px; transform: translate(-50%, calc(-100% - 22px)) rotate(-2deg); box-shadow: var(--shadow-lift); }
.map-pop b { font: 400 1.15rem/1.2 var(--f-serif); display: block; }
.map-pop a { color: var(--pink-text); font-weight: 400; }
.map-note { position: relative; z-index: 2; font: 400 1.2rem/1.2 var(--f-hand); color: var(--stone); padding: 10px 14px; border-top: 2px solid var(--ink); background: var(--card); }
.upgrade { margin-top: 72px; }

/* ---------- For businesses ---------- */
.bill { position: relative; background: #fff; color: var(--ink); max-width: 400px; margin-inline: auto; width: 100%; padding: 30px 28px 40px; box-shadow: var(--shadow-lift); --rot: 2.5deg; font-variant-numeric: tabular-nums; }
.bill::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: radial-gradient(circle at 8px -2px, transparent 9px, #fff 10px) 0 0 / 16px 12px repeat-x; }
.bill__head { text-align: center; border-bottom: 2px dashed var(--line); padding-bottom: 16px; }
.bill__head .hand { font-size: 1.7rem; color: var(--pink); }
.bill__head .caps { font-size: 1.35rem; margin-top: 4px; }
.bill__head small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-top: 6px; }
.bill ul { list-style: none; margin: 0; padding: 16px 0; display: grid; gap: 10px; border-bottom: 2px dashed var(--line); }
.bill li { display: flex; gap: 8px; font-size: .9375rem; align-items: baseline; }
.bill li::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-4px); }
.bill li span:last-child { order: 2; font-weight: 400; white-space: nowrap; }
.bill__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; }
.bill__total b { font: 400 1rem/1 var(--f-caps); text-transform: uppercase; }
.bill__total strong { font: 400 2.6rem/1 var(--f-caps); color: var(--pink); }
.bill__stamp { position: absolute; left: 40%; bottom: 34px; font: 400 .85rem/1 var(--f-caps); text-transform: uppercase; color: var(--pink); border: 3px solid var(--pink); padding: 6px 10px; border-radius: 6px; transform: rotate(-12deg); opacity: .88; }
html.motion .bill__stamp { animation: stamp .55s var(--spring) 1.1s both; }
@keyframes stamp { from { opacity: 0; transform: scale(2.4) rotate(-12deg); } to { opacity: .88; transform: scale(1) rotate(-12deg); } }
.compare-print { --rot: -1.2deg; }
.case:nth-child(even) .compare-print { --rot: 1.4deg; }
.compare { position: relative; --pos: 50%; aspect-ratio: 4 / 3.2; overflow: hidden; user-select: none; background: var(--paper-2); }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.compare__knob { position: absolute; top: 50%; left: var(--pos); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--pink); color: #fff; border: 3px solid #fff; display: grid; place-items: center; font-weight: 400; pointer-events: none; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__tag { position: absolute; top: 12px; font: 400 .68rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; pointer-events: none; }
.compare__tag--b { left: 12px; background: #fff; color: var(--ink); }
.compare__tag--a { right: 12px; background: var(--pink); color: #fff; }
.compare input:focus-visible ~ .compare__knob { outline: 3px solid var(--ink); outline-offset: 3px; }
.cases { display: grid; gap: clamp(56px, 7vw, 96px); }
.case { display: grid; gap: 28px; }
@media (min-width: 900px) { .case { grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; } .case:nth-child(even) .compare-print { order: 2; } }
.case h3 { font: 400 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem)/1.1 var(--f-serif); }
.receipt { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 28px; border-top: 2px dashed var(--rule); padding-top: 14px; }
.receipt strong { display: block; font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1 var(--f-caps); }
.receipt span { font-size: .8125rem; color: var(--stone); display: block; margin-top: 4px; max-width: 14ch; }
/* Menu (packages) */
.menu { background: var(--ink); color: var(--paper); border-radius: 14px; padding: clamp(28px, 5vw, 64px); box-shadow: var(--shadow-lift); --rot: -.6deg; position: relative; }
.menu__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.menu__head .hand { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); color: var(--pink); }
.menu__head h2 { font-size: var(--h2); margin-top: 6px; }
.menu__head p { color: #aaa498; margin-top: 10px; }
.menu__items { display: grid; gap: 28px; }
@media (min-width: 960px) { .menu__items { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.dish { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 2px solid var(--line-dark); position: relative; }
.dish__row { display: flex; align-items: baseline; gap: 10px; }
.dish__row h3 { font: 400 1.4rem/1 var(--f-caps); text-transform: uppercase; white-space: nowrap; }
.dish__row::after { content: ""; flex: 1; border-bottom: 2px dotted #5b5750; order: 1; transform: translateY(-5px); }
.menu .ph { background: none; text-decoration: underline dotted var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dish__price { order: 2; font: 400 1.35rem/1 var(--f-caps); color: var(--pink); white-space: nowrap; }
.dish__price small { font: 400 .8rem/1 var(--f-ui); color: #aaa498; }
.dish__fit { font-family: var(--f-body); font-style: italic; color: #d4cfc2; }
.dish ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; color: #e9e5da; }
.dish li::before { content: "· "; color: var(--pink); font-weight: 400; }
.dish .btn-row { margin-top: 6px; }
.dish .btn { min-height: 46px; padding: 10px 18px; font-size: .875rem; }
.dish__flag { position: absolute; top: -18px; right: 0; background: var(--sticky); color: var(--ink); font: 400 1.2rem/1 var(--f-hand); padding: 8px 12px; transform: rotate(4deg); box-shadow: var(--shadow); }
.menu__foot { text-align: center; margin-top: 32px; font-size: .8125rem; color: #8f8a80; }
/* FAQ on index cards */
.faq { display: grid; gap: 14px; }
.faq details { background: var(--card); border: 2px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow); transition: transform .35s var(--spring); }
.faq details:nth-child(odd) { transform: rotate(-.5deg); } .faq details:nth-child(even) { transform: rotate(.5deg); }
.faq details[open] { transform: none; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 50px 18px 20px; font: 400 1.05rem/1.3 var(--f-ui); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.7rem; font-weight: 400; color: var(--pink); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 20px 20px; max-width: 60ch; color: var(--ink-2); font-family: var(--f-body); }
.two-col { display: grid; gap: 44px; }
@media (min-width: 900px) { .two-col { grid-template-columns: .9fr 1.1fr; gap: 80px; } }

/* ---------- Forms on notebook paper ---------- */
.form { display: grid; gap: 16px; position: relative; }
.form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.field { display: grid; gap: 2px; }
.field label { font: 400 .7rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.field label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; border: 0; border-bottom: 2px solid var(--ink); background: transparent; border-radius: 0; padding: 6px 2px; font: 400 1.45rem/1.2 var(--f-hand); color: var(--ink); transition: border-color .2s; }
.field select { font: 400 1rem/1.2 var(--f-ui); }
.field textarea { min-height: 96px; resize: vertical; line-height: 32px; background: repeating-linear-gradient(180deg, transparent 0 31px, #d7dde6 31px 32px); border-bottom: 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--pink); }
.field input::placeholder, .field textarea::placeholder { color: #b1ab9c; }
.hp { position: absolute; left: -5000px; }
.form-paper { padding: 36px 26px 30px 64px; }
.form-paper .form-title { font: 400 2rem/1 var(--f-hand); color: var(--pink-text); margin-bottom: 6px; }
.form-steps { display: grid; gap: 8px; }
.form-steps__top { display: flex; justify-content: space-between; font: 400 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.form-steps__bar { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.form-steps__bar span { display: block; height: 100%; background: var(--pink); transform-origin: left; transform: scaleX(.5); transition: transform .6s var(--ease); }
fieldset[data-step] { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; }
.step-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.btn-text { background: none; border: 0; padding: 8px 4px; cursor: pointer; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.form-done { display: grid; gap: 10px; padding-block: 12px; }
.form-done .hand { font-size: 2.6rem; color: var(--pink-text); }
html.motion .form-done:not([hidden]) { animation: pop .6s var(--spring); }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Partner ---------- */
.formats { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.format { background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 26px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); transition: transform .45s var(--spring); }
.formats > .format:nth-child(1) { --rot: -1.5deg; } .formats > .format:nth-child(2) { --rot: 1deg; } .formats > .format:nth-child(3) { --rot: -.8deg; }
.format:hover { transform: rotate(0) translateY(-6px); }
.format h3 { font: 400 1.35rem/1.05 var(--f-caps); text-transform: uppercase; }
.format strong { font-size: .9375rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; }
.slot { display: block; text-decoration: none; color: var(--stone); }
.slot .print { transition: transform .45s var(--spring); transform: rotate(var(--rot)); }
.slots > .slot:nth-child(odd) { --rot: -2deg; } .slots > .slot:nth-child(even) { --rot: 2deg; }
.slot:hover .print { transform: rotate(0) translateY(-6px); }
.slot__empty { aspect-ratio: 4 / 3; border: 2px dashed #c9c2ad; display: grid; place-items: center; font: 400 .8rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 8px; }
.slot:hover .slot__empty { border-color: var(--pink); color: var(--pink-text); }
.slot .print figcaption { color: var(--pink-text); }

/* ---------- Newsletter archive: envelopes ---------- */
.issues { display: grid; gap: 18px; }
.issue { display: grid; gap: 6px 28px; padding: 22px 24px; background: var(--card); border: 2px solid var(--ink); border-radius: 6px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .45s var(--spring); position: relative; }
.issue:nth-child(odd) { transform: rotate(-.4deg); } .issue:nth-child(even) { transform: rotate(.4deg); }
.issue:hover { transform: translateX(8px) rotate(0); }
@media (min-width: 800px) { .issue { grid-template-columns: 110px 1fr 150px; align-items: baseline; } }
.issue__no { font: 400 1.7rem/1 var(--f-hand); color: var(--pink); }
.issue h3 { font: 400 1.45rem/1.2 var(--f-serif); }
.issue time { font: 400 .72rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

/* ---------- About ---------- */
.lists { display: grid; gap: 36px; }
@media (min-width: 900px) { .lists { grid-template-columns: 1fr 1fr; gap: 48px; } }
.lists .notebook h3 { font: 400 2rem/32px var(--f-hand); color: var(--pink-text); margin-bottom: 0; }
.lists ul { list-style: none; padding: 0; margin: 0; }
.lists li { font: 400 italic 1.25rem/32px var(--f-serif); }
.lists .notebook:first-child { --rot: -1.2deg; } .lists .notebook:last-child { --rot: 1.4deg; }
.strike li { position: relative; width: fit-content; color: var(--stone); }
.strike li::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 4px; background: var(--pink); border-radius: 3px; transform-origin: left; transform: rotate(-2deg); transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 300ms); }
html.motion .strike:not(.in) li::after { transform: scaleX(0) rotate(-2deg); }
.cards4 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.index-card { background: var(--card); border: 2px solid var(--ink); border-radius: 6px; padding: 22px; box-shadow: var(--shadow); background-image: linear-gradient(180deg, transparent 58px, rgba(230,0,126,.45) 58px 60px, transparent 60px), repeating-linear-gradient(180deg, transparent 0 27px, #d7dde6 27px 28px); background-position: 0 0, 0 60px; }
.cards4 > .index-card:nth-child(odd) { --rot: -1.5deg; } .cards4 > .index-card:nth-child(even) { --rot: 1.5deg; }
.index-card b { display: inline-block; font: 400 2.6rem/1 var(--f-caps); color: var(--pink); margin-right: 8px; }
.index-card h3 { display: inline; font: 400 1.05rem/1.2 var(--f-caps); text-transform: uppercase; }
.index-card p { font: 400 1.3rem/28px var(--f-hand); margin-top: 22px; }
.team { display: grid; gap: 40px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.member { display: block; }
.team > .member:nth-child(odd) { --rot: -2.5deg; } .team > .member:nth-child(even) { --rot: 2deg; }
.member .print { transform: rotate(var(--rot)); transition: transform .45s var(--spring); }
.member:hover .print { transform: rotate(0) translateY(-6px); }
.member .role { font: 400 .72rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-text); margin-top: 16px; }
.member p { margin-top: 6px; }

/* ---------- Motion primitives ---------- */
html.motion [data-reveal] { transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.motion [data-reveal]:not(.in) { opacity: 0; transform: translateY(28px); }
/* objects "dropped" onto the table */
html.motion [data-drop] { transition: opacity .6s var(--ease), transform 1s var(--spring); transition-delay: calc(var(--i, 0) * 110ms); }
html.motion [data-drop]:not(.in) { opacity: 0; transform: translate(var(--dx, 0px), calc(var(--dy, 0px) - 60px)) rotate(calc(var(--rot, 0deg) * 3 + 6deg)) scale(1.06); }
html.motion [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
html.motion [data-split] .w > span { display: inline-block; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms + 80ms); }
html.motion [data-split]:not(.in) .w > span { transform: translateY(105%); }
[data-parallax] { will-change: transform; }
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 70; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--pink); transform-origin: left; transform: scaleX(0); }

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

/* ======================================================================
   v5: DYNAMIC LAYER
   ====================================================================== */

/* Studio spotlight on the table (follows pointer on desktop; drifts on its own elsewhere) */
body::before { content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(38vmax 38vmax at var(--mx, 70vw) var(--my, 20vh), rgba(230,0,126,.10), transparent 60%),
              radial-gradient(50vmax 40vmax at 10% 110%, rgba(246,216,14,.10), transparent 60%);
  transition: background-position .2s; }
@media (pointer: coarse) { html.motion body::before { animation: drift 18s ease-in-out infinite alternate; } }
@keyframes drift { from { transform: translate3d(-6vw, -4vh, 0); } to { transform: translate3d(6vw, 6vh, 0); } }

/* Stronger heading reveals */
html.motion [data-split] .w > span { transition: transform 1.15s var(--ease), opacity .9s var(--ease); transition-delay: calc(var(--i) * 55ms + 60ms + var(--intro-delay, 0s)); }
html.motion [data-split]:not(.in) .w > span { transform: translateY(115%) rotate(4deg); opacity: 0; }
html.intro-run { --intro-delay: 1.35s; }
html.motion .table [data-drop] { transition-delay: calc(var(--i, 0) * 140ms + var(--intro-delay, 0s)); }

/* Intro: black stage, the B drops, camera flash, curtain lifts */
.intro { display: none !important; }
html.intro-run .intro { display: grid; position: fixed; inset: 0; z-index: 400; place-items: center; background: var(--ink); color: var(--paper); animation: introOut .6s var(--ease) 1.15s forwards; pointer-events: none; }
.intro__in { display: grid; justify-items: center; gap: 12px; }
.intro svg { width: 96px; height: 96px; animation: introB .8s var(--spring) both; }
.intro p { font: 400 2.2rem/1 var(--f-hand); color: var(--pink); animation: introT .6s var(--ease) .35s both; }
.intro::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: flashA .5s ease-out .9s; }
@keyframes introB { from { transform: scale(0) rotate(-120deg); } to { transform: none; } }
@keyframes introT { from { opacity: 0; transform: translateY(12px) rotate(-4deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes introOut { to { clip-path: inset(0 0 100% 0); } }
@keyframes flashA { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }

/* Camera flash on CTA click */
html.flash body::after { content: ""; position: fixed; inset: 0; z-index: 350; background: #fff; pointer-events: none; animation: flashA .6s ease-out forwards; }

/* Prints develop like polaroids after they land */
html.motion [data-develop] img { filter: brightness(.18) sepia(.9) contrast(.85) blur(1px); transition: filter 2.6s cubic-bezier(.3,.1,.2,1); transition-delay: calc(var(--i, 0) * 180ms + .5s + var(--intro-delay, 0s)); }
html.motion [data-develop].in img { filter: none; }

/* Viewfinder on print hover */
.print::after { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; bottom: 54px; z-index: 2; pointer-events: none; opacity: 0; transform: scale(1.06); transition: opacity .3s, transform .45s var(--spring);
  background:
    linear-gradient(#fff,#fff) 0 0 / 22px 3px, linear-gradient(#fff,#fff) 0 0 / 3px 22px,
    linear-gradient(#fff,#fff) 100% 0 / 22px 3px, linear-gradient(#fff,#fff) 100% 0 / 3px 22px,
    linear-gradient(#fff,#fff) 0 100% / 22px 3px, linear-gradient(#fff,#fff) 0 100% / 3px 22px,
    linear-gradient(#fff,#fff) 100% 100% / 22px 3px, linear-gradient(#fff,#fff) 100% 100% / 3px 22px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }
.card:hover .print::after, .table .print:hover::after, .dir-card:hover .print::after { opacity: 1; transform: none; }

/* REC ticker */
.rec { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font: 400 .75rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 9px 14px 9px 12px; border-radius: 999px; margin-bottom: 22px; }
.rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff2e2e; box-shadow: 0 0 0 0 rgba(255,46,46,.6); animation: rec 1.4s ease-in-out infinite; }
.rec b { color: var(--sticky); font-weight: 400; }
@keyframes rec { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,46,46,.5); } 50% { opacity: .35; box-shadow: 0 0 0 6px rgba(255,46,46,0); } }

/* Crossed washi-tape marquees */
.tapes { position: relative; height: clamp(150px, 16vw, 230px); overflow: hidden; margin-block: clamp(10px, 2vw, 24px); }
.tapes__band { position: absolute; left: -10vw; right: -10vw; top: 50%; height: clamp(52px, 5.4vw, 76px); display: flex; align-items: center; overflow: hidden; box-shadow: var(--shadow); }
.tapes__band--a { background: var(--pink); color: #fff; transform: translateY(-50%) rotate(-3.5deg); z-index: 2; }
.tapes__band--b { background: var(--sticky); color: var(--ink); transform: translateY(-50%) rotate(3deg); }
.tapes__track { display: flex; white-space: nowrap; will-change: transform; }
.tapes__track span { font: 400 clamp(1.3rem, .9rem + 1.6vw, 2.3rem)/1 var(--f-caps); text-transform: uppercase; padding-inline: .6em; display: inline-flex; align-items: center; gap: .6em; }
.tapes__track span em { font: 400 1.25em/1 var(--f-hand); text-transform: none; font-style: normal; }
.tapes__track span::after { content: "✦"; font-size: .7em; }
html:not(.motion) .tapes__track { animation: none; }

/* Pinned scroll-reveal statement on a black stage */
.pin { position: relative; height: 260vh; background: var(--ink); color: var(--paper); }
.pin__inner { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; overflow: hidden; }
.pin__ghost { position: absolute; top: 50%; left: 0; white-space: nowrap; font: 400 clamp(10rem, 28vw, 30rem)/.8 var(--f-caps); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(251,250,243,.08); transform: translateY(-50%); pointer-events: none; }
.pin__text { position: relative; font: 400 clamp(2.2rem, 1rem + 4.6vw, 5.6rem)/1.02 var(--f-caps); text-transform: uppercase; letter-spacing: -0.015em; max-width: 17ch; }
.pin__text em { font: 400 1.05em/1 var(--f-hand); text-transform: none; color: var(--pink); letter-spacing: 0; }
.hl .w { transition: opacity .35s var(--ease), color .35s, transform .5s var(--ease); }
html.motion .hl .w:not(.lit) { opacity: .1; }
html.motion .pin .hl .w:not(.lit), html.motion .pin.hl .w:not(.lit) { transform: translateY(.08em); }
.pin__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px; height: 3px; background: var(--line-dark); }
.pin__bar span { display: block; height: 100%; background: var(--pink); transform-origin: left; transform: scaleX(0); }
.pin__foot { position: absolute; left: var(--gutter); bottom: 64px; font: 400 1.6rem/1 var(--f-hand); color: var(--sticky); transform: rotate(-3deg); }
@media (max-width: 700px) { .pin { height: 220vh; } }

/* Drifting outline type behind sections */
.ghost { position: absolute; z-index: 0; left: 0; white-space: nowrap; font: 400 clamp(6rem, 18vw, 18rem)/.8 var(--f-caps); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(11,11,13,.07); pointer-events: none; will-change: transform; }
.section > .wrap, .section--tight > .wrap { position: relative; z-index: 1; }

/* Hero upgrades */
.hero { position: relative; }
.hero .ghost { top: 58%; }
.hero h1 { font-size: clamp(2.7rem, 1rem + 5.3vw, 6rem); }

/* Finale: your table is ready */
.finale { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding-block: clamp(96px, 14vw, 200px); text-align: center; isolation: isolate; }
.finale::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(closest-side, rgba(230,0,126,.45), transparent 70%) 50% 60% / 70% 70% no-repeat; }
html.motion .finale::before { animation: breathe 5s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }
.finale .hand { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); color: var(--sticky); display: inline-block; transform: rotate(-4deg); }
.finale h2 { font: 400 clamp(3rem, 1rem + 9vw, 10rem)/.86 var(--f-caps); text-transform: uppercase; letter-spacing: -0.03em; margin: 14px auto 0; max-width: 11ch; }
.finale h2 .pk { color: var(--pink); }
.finale p { margin: 26px auto 0; max-width: 42ch; color: #cfc9bb; font-family: var(--f-body); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.finale .btn-row { justify-content: center; margin-top: 36px; }
.finale .btn--lg { min-height: 66px; padding-inline: 38px; font-size: 1.1rem; }
.finale .seats-left { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: none; align-items: center; gap: 10px; margin-top: 26px; font: 400 .8rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.seats-left .dots { display: inline-flex; gap: 6px; }
.seats-left .dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--pink); }
.seats-left .dots i.taken { background: transparent; border: 2px solid #5b5750; }
.finale__prints { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.finale__prints .print { position: absolute; width: clamp(110px, 12vw, 180px); opacity: .9; padding-bottom: 12px; }
@media (max-width: 800px) { .finale__prints { display: none; } }

/* Section intros with a hand-written kicker */
.kick { font: 400 clamp(1.5rem, 1.1rem + 1vw, 2.1rem)/1 var(--f-hand); color: var(--pink); display: inline-block; transform: rotate(-4deg); margin-bottom: 8px; }

@media (max-width: 480px) { .rec { font-size: .66rem; letter-spacing: .1em; padding: 8px 12px; } }

/* ======================================================================
   v5.1 layout fixes (from automated audit)
   ====================================================================== */
/* Captions: always below the photo, wrap instead of truncating */
.print { padding-bottom: 14px; }
.print figcaption, .print .cap { position: static; display: block; white-space: normal; overflow: visible; text-overflow: clip; padding: 10px 4px 0; line-height: 1.1; }
.card--lead .print { padding-bottom: 16px; }
.card--lead .print figcaption { font-size: 1.7rem; }
.gallery-table .print figcaption { font-size: 1.1rem; }
.table .print figcaption { font-size: 1.3rem; }
.compare-print { padding-bottom: 10px; }
.print::after { bottom: auto; height: calc(100% - 60px); }
@media (max-width: 600px) {
  .gallery-table { gap: 18px; }
  .gallery-table > figure { --rot: 0deg !important; margin-top: 0 !important; }
  .table .print figcaption { font-size: 1.1rem; }
}
/* REC pill wraps on small screens instead of widening the page */
.rec { white-space: normal; max-width: 100%; }
@media (max-width: 480px) { .rec { font-size: .64rem; line-height: 1.3; border-radius: 14px; } }
.pin__foot { right: var(--gutter); }
/* Menu (packages) never forces sideways scroll */
.dish__row { flex-wrap: wrap; row-gap: 6px; }
.dish__row h3 { white-space: normal; }
@media (max-width: 600px) {
  .menu { padding: 26px 18px; --rot: 0deg; }
  .dish__row::after { display: none; }
  .dish__price { width: 100%; }
}
/* Comfortable tap targets for filters on phones */
@media (max-width: 800px) {
  .chip { min-height: 44px; padding: 8px 16px; }
  .view-toggle button { min-height: 40px; }
}
/* phones: give the third hero print room so its photo isn't hidden */
@media (max-width: 979px) { .table { height: clamp(460px, 128vw, 640px); } }
.bizcard .h3like { font: 400 clamp(1.4rem, 1rem + 1.4vw, 2.1rem)/1 var(--f-caps); text-transform: uppercase; }
.bizcard .h3like .pk { color: var(--pink); }
@media (max-width: 420px) { .bill__stamp { left: 26%; font-size: .75rem; } }

/* ======================================================================
   v6: client feedback round
   ====================================================================== */
:root { --h1: clamp(2.2rem, 1rem + 3.4vw, 4.2rem); --h2: clamp(1.8rem, 1.1rem + 2vw, 2.9rem); }
.hero h1 { font-size: clamp(2.3rem, 1rem + 3.7vw, 4.5rem); line-height: .98; }
.page-head h1 { font-size: var(--h1); line-height: 1; max-width: 18ch; }
.finale h2 { font-size: clamp(2.6rem, 1rem + 5.6vw, 6.4rem); }
.hand, .kick, .note, .hero__slogan, .footer-slogan, .logo__tag { letter-spacing: .01em; }

/* Now booking: live ticker pill */
.rec { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 7px 8px 7px 14px; margin-bottom: 26px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 400 .72rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; isolation: isolate; box-shadow: 0 10px 24px -14px rgba(11,11,13,.6); max-width: 100%; }
.rec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(230,0,126,.45) 50%, transparent 70%) -100% 0 / 60% 100% no-repeat; }
html.motion .rec::before { animation: sheen 4.5s ease-in-out infinite 2s; }
@keyframes sheen { 0% { background-position: -100% 0; } 45%, 100% { background-position: 260% 0; } }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; flex: none; box-shadow: 0 0 0 0 rgba(255,59,59,.7); }
html.motion .rec i { animation: live 1.6s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255,59,59,.7); } 100% { box-shadow: 0 0 0 9px rgba(255,59,59,0); } }
.rec__label { color: var(--paper); }
.rec__roll { position: relative; display: inline-block; height: 26px; overflow: hidden; background: var(--pink); color: #fff; border-radius: 999px; padding: 0 12px; min-width: 0; }
.rec__roll span { display: block; line-height: 26px; height: 26px; }
html.motion .rec__roll > span:first-child { animation: roll 9s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes roll { 0%, 28% { margin-top: 0; } 33%, 61% { margin-top: -26px; } 66%, 94% { margin-top: -52px; } 100% { margin-top: -78px; } }
html:not(.motion) .rec__roll { height: 26px; }
@media (max-width: 480px) { .rec { font-size: .6rem; letter-spacing: .1em; gap: 8px; } .rec__roll { padding: 0 10px; } }

/* Pinned statement: rounded stage that slides over the page, one sentence per line */
.pin { height: 240vh; background: transparent; }
.pin__inner { background: var(--ink); color: var(--paper); border-radius: clamp(20px, 3vw, 44px); margin-inline: clamp(8px, 1.4vw, 20px); height: calc(100vh - 16px); top: 8px; }
.pin__ghost { display: none; }
.pin__text { font-size: clamp(1.9rem, .8rem + 3.6vw, 4.4rem); line-height: 1.06; max-width: none; }
.pin__line { display: block; }
.pin__text em { font-size: 1.1em; line-height: .8; }
.pin__foot { position: static; transform: none; margin-top: clamp(22px, 3vw, 36px); font: 400 clamp(1rem, .9rem + .4vw, 1.2rem)/1.5 var(--f-body); color: #bdb8ad; max-width: 44ch; }
.pin__bar { bottom: 28px; }
.ghost { display: none; }
.tapes { display: none; }

/* What we do */
.wwd { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .wwd { grid-template-columns: 1fr 1.05fr; } }
.wwd__intro { display: grid; gap: 18px; align-content: start; justify-items: start; }
.wwd__intro .muted { max-width: 46ch; }
.cards4--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Flow: aligned objects, straight arrows in the gaps */
@media (min-width: 960px) {
  .flow { gap: 88px; align-items: start; }
  .flow > .step:nth-child(2), .flow > .step:nth-child(3) { margin-top: 0; }
  .step__obj { min-height: 300px; display: grid; align-items: center; }
}
.step__obj { --rot: 0deg !important; }
.step__arrow { position: absolute; z-index: 3; width: 56px; height: 20px; right: -72px; top: 140px; left: auto; bottom: auto; transform: none; color: var(--pink); pointer-events: none; }
.step__arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 0; }
html.motion .step:not(.in) .step__arrow path { stroke-dashoffset: 90; }
@media (max-width: 959px) { .step__arrow { position: relative; right: auto; top: auto; left: 50%; margin: 8px 0 -20px -28px; transform: rotate(90deg); } }
.qs { min-height: 260px; }

/* Finale: seats left, highlighted and live */
.finale .seats-left { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 30px; padding: 12px 20px 12px 16px; background: var(--sticky); color: var(--ink); border-radius: 999px; font: 400 .82rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 0 6px rgba(246,216,14,.18), 0 18px 40px -18px rgba(246,216,14,.6); }
.finale .seats-left b { color: var(--pink-text); font-weight: 400; }
.seats-left__live { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); flex: none; }
html.motion .seats-left__live { animation: livePink 1.4s ease-out infinite; }
@keyframes livePink { 0% { box-shadow: 0 0 0 0 rgba(230,0,126,.7); } 100% { box-shadow: 0 0 0 10px rgba(230,0,126,0); } }
.finale .seats-left .dots { display: inline-flex; gap: 5px; }
.finale .seats-left .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--pink); border: 0; }
.finale .seats-left .dots i.taken { background: rgba(11,11,13,.18); border: 0; }
html.motion .finale .seats-left .dots i:not(.taken) { animation: seat 2.4s ease-in-out infinite; }
html.motion .finale .seats-left .dots i:not(.taken):nth-last-child(2) { animation-delay: .3s; }
html.motion .finale .seats-left .dots i:not(.taken):nth-last-child(1) { animation-delay: .6s; }
@keyframes seat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.finale .seats-left .ph { background: none; }

/* India Post inland letter card */
.inland-wrap { background: var(--paper-2); }
.inland { position: relative; max-width: 1040px; margin-inline: auto; background: #cfe1ea; color: #14304a; box-shadow: 0 30px 60px -30px rgba(20,48,74,.55); --rot: -.8deg;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 6px);
}
.inland__top { display: flex; align-items: center; gap: 14px; padding: 16px clamp(20px, 4vw, 40px); border-bottom: 2px dashed rgba(20,48,74,.35); font: 400 .7rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
.inland__top span:last-child { margin-left: auto; opacity: .7; }
.inland__dots { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(20,48,74,.35) 0 6px, transparent 6px 12px); }
@media (max-width: 640px) { .inland__top span:last-child, .inland__dots { display: none; } }
.inland__body { display: grid; gap: 28px; padding: clamp(24px, 4vw, 44px); }
@media (min-width: 860px) { .inland__body { grid-template-columns: 1.1fr 1fr; gap: 0; } .inland__left { padding-right: 40px; border-right: 2px dashed rgba(20,48,74,.3); } .inland__right { padding-left: 40px; } }
.inland h2, .inland h1 { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3rem); color: var(--ink); }
.inland__msg { margin-top: 18px; font: 400 1.1rem/1.6 var(--f-body); color: #1d3b56; max-width: 38ch; }
.inland__sign { margin-top: 18px; font: 400 1.6rem/1.1 var(--f-hand); color: var(--pink-text); }
.inland__right { position: relative; display: grid; gap: 16px; align-content: start; }
.inland__stamp { justify-self: end; display: grid; justify-items: center; gap: 2px; width: 92px; padding: 10px 6px 8px; background: var(--pink); color: #fff; outline: 3px dotted #cfe1ea; outline-offset: -6px; transform: rotate(3deg); box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.inland__stamp svg { width: 40px; height: 40px; }
.inland__stamp b { font: 400 1.1rem/1 var(--f-caps); }
.inland__stamp small { font: 400 .5rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.inland__postmark { position: absolute; right: 70px; top: 18px; width: 104px; height: 104px; border: 2px solid rgba(20,48,74,.45); border-radius: 50%; display: grid; place-items: center; text-align: center; font: 400 .6rem/1.35 var(--f-ui); letter-spacing: .14em; color: rgba(20,48,74,.6); transform: rotate(-12deg); pointer-events: none; }
.inland .nl-form input[type="email"] { border-bottom-color: #14304a; color: var(--ink); background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(20,48,74,.25) 34px 35px); }
.inland .addr label { color: #14304a; font: 400 1.4rem/1 var(--f-hand); text-transform: none; letter-spacing: 0; }
.inland .form-note { color: #3d5a73; }
.inland__fold { position: relative; height: 34px; border-top: 2px dashed rgba(20,48,74,.35); display: grid; place-items: center; font: 400 .6rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: rgba(20,48,74,.55); }

/* About / Beliefs */
.prose--short { font-size: 1.15rem; }
.prose--short > .more { display: inline-block; margin-top: 1.4em; font-family: var(--f-ui); font-size: 1rem; }
.feels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; text-align: center; }
.feels__row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); width: 100%; max-width: 960px; }
.feels__row .sticky span { margin: 0; font-size: 1.5rem; }
.tones { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 2px solid var(--ink); }
.tone { padding: 22px 18px 22px 0; }
.tone h3 { font: 400 1.05rem/1.2 var(--f-caps); text-transform: uppercase; margin-bottom: 6px; }
.tone p { font-family: var(--f-body); color: var(--ink-2); }
.avoid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-top: 36px; }
.avoid s { font: 400 1rem/1 var(--f-caps); text-transform: uppercase; color: var(--stone); text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
.ph-toggle { display: none; }
.hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 420px) { .rec__label { display: none; } .rec { padding-left: 12px; } }
.pin__text { font-size: clamp(1.7rem, .6rem + 3.1vw, 3.8rem); }
.inland h2 .pk, .inland h1 .pk { display: block; }
.wwd + * { padding-top: 0; }

/* ======================================================================
   v7: home audit fixes
   ====================================================================== */
.hero .btn-row { gap: 22px; }
.section--first { padding-top: clamp(24px, 3vw, 48px); }

/* Statement: shorter scroll, sentence rhythm on phones, beliefs link */
.pin { height: 150vh; }
@media (max-width: 700px) { .pin { height: 130vh; } .pin__line { margin-bottom: .32em; } }
.pin__foot a { color: var(--pink); font-family: var(--f-ui); font-weight: 400; text-decoration: none; border-bottom: 2px solid currentColor; white-space: nowrap; }

/* Stories: consistent card titles; two columns on phones */
.spread > .card:not(.card--lead) h3 { font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.18; }
@media (max-width: 959px) {
  .spread { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .spread > .card--lead { grid-column: 1 / -1; }
  .spread > .card:not(.card--lead) .print { padding: 6px 6px 10px; }
  .spread > .card:not(.card--lead) .print figcaption { font-size: 1rem; padding-top: 6px; }
  .spread > .card:not(.card--lead) .card__meta { font-size: .62rem; gap: 6px; }
  .spread > .card:not(.card--lead) .card__body { padding-top: 10px; }
}
@media (max-width: 600px) { .spread > .card:not(.card--lead) .print img { aspect-ratio: 4 / 4.4; } }

/* Reels: scroll affordance + hide the placeholder chip under the caption */
.reels-nav { display: flex; align-items: center; gap: 10px; }
.reels-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); font-size: 1.1rem; font-weight: 400; cursor: pointer; transition: background-color .2s, color .2s, transform .3s var(--spring); }
.reels-btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.reels-btn:disabled { opacity: .3; cursor: default; transform: none; background: var(--card); color: var(--ink); }
.reels-nav .more { margin-left: 8px; }
.reels-wrap { position: relative; }
.reels-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 14px; width: 90px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--paper)); transition: opacity .3s; }
.reels-wrap.at-end::after { opacity: 0; }
.reel__screen img { height: 122%; object-position: top; }
@media (max-width: 700px) { .reels-btn { display: none; } }

/* Newsletter now sits mid-page: less padding */
.inland-wrap { padding-block: clamp(56px, 7vw, 100px); }

/* Flow: compact on phones */
@media (max-width: 959px) {
  .flow { gap: 40px; }
  .step__obj { max-width: 340px; }
  .phone { width: 200px; }
  .qs { min-height: 0; }
}

/* Hero table shorter on phones */
@media (max-width: 979px) { .table { height: clamp(360px, 100vw, 520px); } .table .print { width: clamp(140px, 40vw, 220px); } }

/* Footer slogan: one line everywhere */
.footer-slogan { white-space: nowrap; font-size: min(10rem, 12.5vw); }

/* Napkin quote cite (used elsewhere) */
.napkin cite { flex-wrap: wrap; row-gap: 6px; }
.footer-slogan { font-size: min(9.5rem, 10.5vw); }
@media (max-width: 959px) { .step__obj.contact, .step__obj.notebook { max-width: 300px; } }
/* one sentence per line on wider screens; JS scales the font so the longest line fits */
.pin__text--fit .pin__line { white-space: nowrap; width: max-content; }
@media (min-width: 700px) { .pin__text { font-size: clamp(1.7rem, .6rem + 3.4vw, 4rem); } }

.pin__inner { grid-template-columns: minmax(0,1fr); }
.pin__inner > * { min-width: 0; }

/* ===== v8 Reels: full-bleed filmstrip ===== */
.reels-sec { overflow: hidden; }
.reels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.reels-head .kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 .75rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); opacity: .75; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: rec 1.6s ease-in-out infinite; }
.reels-head h2 { margin: 0; }
.reels-nav { gap: 12px; }
.reels-count { font: 400 .8125rem/1 var(--f-ui); letter-spacing: .12em; color: rgba(11,11,13,.45); margin-right: 8px; font-variant-numeric: tabular-nums; }
.reels-count b { color: var(--ink); }
.reels-btn { width: 52px; height: 52px; display: grid; place-items: center; }
.reels-btn:disabled { opacity: .25; }

.reels-wrap { position: relative; }
.reels-wrap::after { display: none; }
.reels { --pad: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  grid-auto-columns: clamp(228px, 19vw, 290px); gap: clamp(16px, 1.6vw, 24px);
  padding: 14px var(--pad) 28px; scroll-padding-inline: var(--pad); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gutter) * .9), #000 calc(100% - var(--gutter) * .9), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gutter) * .9), #000 calc(100% - var(--gutter) * .9), transparent 100%); }
.reels::-webkit-scrollbar { display: none; }

.reel, .reel:nth-child(odd), .reel:nth-child(even) { transform: none; }
.reel { aspect-ratio: 9 / 16; padding: 6px; border-radius: 28px; background: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 40px -18px rgba(11,11,13,.45); transition: transform .5s var(--spring), opacity .4s, box-shadow .5s; }
.reel__screen { display: block; border-radius: 22px; background: var(--ink); isolation: isolate; }
.reel__media { position: absolute; inset: 0 0 26% 0; overflow: hidden; }
.reel__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, var(--ink)); }
.reel__media img, .reel__screen .reel__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.02); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reel__bars { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; gap: 4px; z-index: 2; }
.reel__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.reel__bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.reel__bars i:first-child::after { transform: scaleX(1); }
.reel__top { position: absolute; top: 24px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.reel__no { font: 400 .75rem/1 var(--f-ui); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.reel__cat { font: 400 .625rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; background: rgba(11,11,13,.72); color: #fff; padding: 6px 9px; border-radius: 999px; backdrop-filter: blur(6px); }
.reel__play { top: 37%; width: 58px; height: 58px; margin: -29px 0 0 -29px; background: #fff; color: var(--pink); box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); z-index: 2; }
.reel__play svg { margin-left: 3px; }
.reel__cap { inset: auto 0 0 0; padding: 0 16px 18px; background: none; display: grid; gap: 3px; font: 400 .8125rem/1.3 var(--f-ui); color: rgba(255,255,255,.62); z-index: 2; }
.reel__cap b { color: #fff; font: 400 1rem/1.15 var(--f-caps); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.reel__watch { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 400 .6875rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }

@media (hover: hover) {
  .reel__play { opacity: 0; transform: scale(.7); transition: opacity .35s, transform .45s var(--spring); }
  .reel:hover .reel__play, .reel:focus-visible .reel__play { opacity: 1; transform: scale(1); }
  .reel:hover, .reel:focus-visible { transform: translateY(-10px); box-shadow: 0 30px 60px -22px rgba(230,0,126,.45); }
  .reel:hover .reel__media img { transform: scale(1.08); }
  .reel:hover .reel__bars i:nth-child(2)::after { transform: scaleX(1); transition: transform 2.4s linear; }
  .reel:hover .reel__bars i:nth-child(3)::after { transform: scaleX(1); transition: transform 2.4s linear 2.4s; }
  .reels:hover .reel:not(:hover) { opacity: .55; }
}

.reels-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 6px; }
.reels-track { flex: 1; max-width: 420px; height: 3px; border-radius: 3px; background: rgba(11,11,13,.12); position: relative; overflow: hidden; }
.reels-track i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 3px; background: var(--pink); will-change: transform; }

/* single reel on story pages keeps its compact size */
.reel-embed .reel { width: 100%; max-width: 260px; }

@media (max-width: 700px) {
  .reels { grid-auto-columns: 66vw; }
  .reels-count { display: none; }
  .reels-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .reels-track { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* placeholder art: crop off the "photo to come" pill inside reels (real photos unaffected) */
.reel__media img[src$=".svg"], .reel__media img[src^="data:image/svg"] { height: 134%; object-position: 50% 0; }
.reel__no { background: rgba(255,255,255,.9); color: var(--ink); text-shadow: none; padding: 6px 8px; border-radius: 999px; font-size: .625rem; letter-spacing: .12em; line-height: 1; }
@media (max-width: 700px) { .reels-nav { display: none; } .reels-head { margin-bottom: 20px; } }
/* v9: drag hint sits cleanly under the prints, arrow points up at them */
.table__hint { right: auto; left: 22%; bottom: -46px; transform: none; align-items: flex-end; gap: 6px; white-space: nowrap; z-index: 2; pointer-events: none; }
.table__hint svg { width: 30px; height: 30px; flex: none; margin-bottom: 6px; }
.table__hint span { transform: rotate(-2deg); }

/* v9: section labels — straight, aligned to the heading's left edge, one style site-wide */
.kick, .reels-head .kicker { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin: 0 0 16px; transform: none;
  font: 400 .75rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); opacity: 1; }
.kick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex: none; }
.on-dark .kick, .pin .kick { color: var(--paper); }
.avoid .kick { display: inline-flex; margin: 0 16px 0 0; vertical-align: middle; }
.note { transform: none; }
.head .note { align-self: flex-end; text-align: right; padding-bottom: .35em; }
@media (max-width: 700px) { .head .note { text-align: left; align-self: flex-start; padding-bottom: 0; } }
.pin-boxes { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.pin-boxes span { font: 400 .7rem/1 var(--f-ui); letter-spacing: .2em; color: rgba(20,48,74,.7); margin-right: 8px; }
.pin-boxes i { width: 30px; height: 36px; display: grid; place-items: center; border: 2px solid rgba(20,48,74,.4); border-radius: 4px; font: 400 1rem/1 var(--f-ui); font-style: normal; color: #14304a; background: rgba(255,255,255,.35); }
.step__no { display: block; line-height: 1.1; text-wrap: balance; }
/* v9: finale text straight and centred */
.finale .wrap { display: flex; flex-direction: column; align-items: center; }
.finale .hand { transform: none; display: block; text-align: center; line-height: 1.1; }
.finale h2 { text-align: center; }
.finale p { text-align: center; text-wrap: balance; }
.finale .hand { text-wrap: balance; }
@media (max-width: 560px) { .finale .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; } .finale .btn-row .btn { width: 100%; justify-content: center; } }
/* v9: footer slogan straight, centred, inside the grid */
.footer-slogan { transform: none; text-align: center; font-size: min(8.4rem, 9.2vw); line-height: 1.15; margin-inline: auto; padding-block: .1em .2em; overflow: visible; }
/* v10: hero headline set line by line, flush left, fitted to its column */
.hero h1 { max-width: none; }
.hero h1 .fit__line { display: block; width: max-content; white-space: nowrap; }
.hero .lede { max-width: 36ch; text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.hero .btn-row { margin-top: 32px; }
.hero .lede { text-wrap: balance; max-width: 34ch; }
/* Reel lightbox (Instagram embed) */
.reel-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(11,11,13,.82); backdrop-filter: blur(6px); }
.reel-modal__inner { position: relative; width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; }
.reel-modal iframe { width: 100%; height: min(78vh, 760px); border: 0; border-radius: 18px; background: #fff; }
.reel-modal .more { color: var(--paper); }
.reel-modal__close { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--paper); background: var(--ink); color: var(--paper); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 1; }

/* =====================================================================
   v11 · EDITORIAL PREMIUM LAYER (follows the brand guide)
   Playfair Display = headlines · Georgia = intros, sub-heads, quotes
   Garet = body, navigation, UI · Harlow = rare one-word emphasis
   Pink + black always · yellow only for special moments
   ===================================================================== */
:root {
  --f-display: "Playfair Display", Georgia, "Gelasio", "Times New Roman", serif;
  --f-caps: var(--f-display);
  --f-body: Georgia, "Gelasio", "Times New Roman", serif;
  --f-script: "Harlow Solid", "Yellowtail", "Brush Script MT", cursive;
  --f-hand: Georgia, "Gelasio", "Times New Roman", serif;
  --stone: #6f6a61;
  --h1: clamp(2.6rem, 1rem + 5vw, 5.6rem);
  --h2: clamp(2.1rem, 1.2rem + 2.9vw, 3.8rem);
}

/* Headlines: Playfair, sentence case, pink words set in italic */
.caps, h1.caps, h2.caps,
.step h3, .reel__cap b, .phone__ui b, .tent__big, .bizcard h3, .bizcard .h3like, .prose h2, .visit__card h2,
.dish__row h3, .format h3, .index-card h3, .finale h2, .pin__text, .tone h3, .sticky strong, .bill__total b {
  font-family: var(--f-display); font-weight: 400; text-transform: none; letter-spacing: -0.02em;
}
.caps { line-height: 1.02; }
h1.caps { line-height: .98; letter-spacing: -0.03em; }
.caps .pk, .finale h2 .pk, .pin__text .pk, h1 .pk, h2 .pk { font-style: italic; font-weight: 500; color: var(--pink); letter-spacing: -0.01em; padding-right: .04em; }
.finale h2 { font-weight: 400; line-height: .95; letter-spacing: -0.035em; max-width: 12ch; }
.pin__text { font-weight: 400; line-height: 1.06; letter-spacing: -0.025em; }
.pin__text em { font-family: var(--f-script); font-style: normal; font-weight: 400; }
.step h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.05; }
.reel__cap b { font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.15; }
.index-card h3, .tone h3, .format h3 { font-size: 1.3rem; line-height: 1.15; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); line-height: 1.2; letter-spacing: -0.015em; }
.prose > p:first-of-type::first-letter { font-family: var(--f-display); font-weight: 400; }
.index-card b { font-family: var(--f-display); font-style: italic; font-weight: 500; }
.logo__word { font-family: var(--f-ui); }          /* wordmark stays in Garet */
.nav > a:not(.btn) { text-transform: none; }

/* Georgia for intros, sub-heads and all former "handwritten" notes: calm, italic, never tilted */
.hand, .note, .step__no, .qs li, .print figcaption, .print .cap, .sticky span, .table__hint span, .tent__for, .slidein h3,
.filters__count, .empty, .story-open .biz, .pull cite, .visit__card h2 small, .badge, .map-note, .dish__flag, .form-paper .form-title,
.issue__no, .lists .notebook h3, .index-card p, .inland__sign, .inland .addr label, .purpose .notebook .sig, .nav__foot, .kick + h2 + .hand {
  font-family: var(--f-hand); font-style: italic; font-weight: 400; letter-spacing: 0; transform: none;
}
.note { font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); color: var(--stone); line-height: 1.35; }
.step__no { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); color: var(--pink-text); line-height: 1.3; margin-bottom: 6px; }
.qs li { font-size: 1.12rem; }
.print figcaption, .print .cap { font-size: 1.05rem; color: var(--ink-2); }
.card--lead .print figcaption { font-size: 1.2rem; }
.table .print figcaption { font-size: 1.05rem; }
.gallery-table .print figcaption, .spread > .card:not(.card--lead) .print figcaption { font-size: .95rem; }
.finale .hand { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: #d9d3c4; }
.story-open .biz { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); color: var(--pink-text); }
.pull cite { font-size: 1.05rem; color: var(--stone); }
.issue__no { font-size: 1.2rem; }
.index-card p { font-size: 1.05rem; line-height: 1.5; }
.inland__sign { font-size: 1.25rem; }
.inland .addr label { font-size: 1.1rem; }
.empty { font-size: 1.3rem; }
.filters__count { font-size: 1.05rem; }
.slidein h3 { font-size: 1.5rem; }
.lede { font-family: var(--f-body); color: var(--ink-2); line-height: 1.55; }
.card__title { font-family: var(--f-body); }
.card h3, .dir-card h3, .issue h3, .case h3, .map-pop b { font-family: var(--f-display); font-weight: 400; }
.pull p, .napkin p { font-family: var(--f-display); font-style: italic; font-weight: 500; }
/* Harlow survives only in the logo, the footer slogan and the single word "Why." */
.logo__tag, .footer-slogan, .intro p { font-family: var(--f-script); font-style: normal; }

/* Colour discipline ------------------------------------------------ */
/* no tape strips: prints sit on the page with a soft shadow */
.tape::before, .tape--y::before, .tape--corner::before { display: none; }
.print { box-shadow: 0 1px 2px rgba(11,11,13,.06), 0 18px 36px -20px rgba(11,11,13,.35); }
/* highlight = quiet pink underline instead of yellow marker */
.marker { background: none; padding: 0; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: .22em; color: var(--ink); }
/* notes are cream cards; the hero note is the one yellow "special moment" */
.sticky { background: var(--card); background-image: none; border: 1px solid var(--line); clip-path: none; border-radius: 4px; }
.sticky--pink { background: var(--pink-soft); border-color: #f6c6de; }
.table__note { background: var(--sticky); border-color: transparent; }
.badge, .dish__flag { background: var(--ink); color: var(--paper); }
/* buttons: calm pills, no hard offset shadows */
.btn { border-radius: 999px; border-width: 1.5px; letter-spacing: .01em; transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn:hover, .btn--pink:hover, .btn--line:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(11,11,13,.45); }
.btn--pink { border-color: var(--pink); }
.btn--pink:hover { background: #cc0070; border-color: #cc0070; box-shadow: 0 14px 28px -12px rgba(230,0,126,.55); }
.btn--line { background: transparent; border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.on-dark .btn--line, .finale .btn--line { color: var(--paper); border-color: rgba(251,250,243,.55); background: transparent; }
.on-dark .btn--line:hover, .finale .btn--line:hover { background: var(--paper); color: var(--ink); }
/* "now booking" ticker: black pill, pink text instead of a pink block */
.rec__roll { background: transparent; color: var(--pink); padding: 0 4px; }
.rec { box-shadow: none; }
/* finale: softer glow, slots pill in cream/ink instead of yellow */
.finale::before { opacity: .55; }
.finale .seats-left { background: transparent; color: var(--paper); border: 1px solid rgba(251,250,243,.28); }
.finale .seats-left b { color: var(--pink); }
.finale .seats-left .dots i.taken { background: rgba(251,250,243,.22); }
/* section labels: quieter dot + ink text */
.kick::before { width: 6px; height: 6px; }
/* hero headline: sized by its column even before the fonts finish loading */
.hero__grid > div:first-child { container-type: inline-size; }
.hero h1[data-fit] { font-size: min(96px, 13.6cqi); }
.hero h1[data-fit] { line-height: 1.04; }
/* body copy in Garet (brand: body & utility); Georgia kept for intros, ledes and quotes */
.step p, .faq details p, .tone p, .prose, .purpose .notebook p { font-family: var(--f-ui); }
.step p { font-size: 1rem; line-height: 1.65; }
.prose { font-size: 1.125rem; line-height: 1.8; }
.purpose .notebook p { font-weight: 400; }
.finale .seats-left { box-shadow: none; }
/* remaining yellow → pink / cream */
.nav > a:not(.btn)::after { height: 2px; bottom: -2px; left: 0; right: 0; background: var(--pink); }
.contact__meta span:last-child { color: var(--pink-soft); }
.slidein { background: var(--card); border: 1px solid var(--line); }
.chip:hover, .tag:hover { background: var(--pink-soft); }
.pull { background: transparent; box-shadow: none; clip-path: none; transform: none; border-left: 3px solid var(--pink); padding: 6px 0 6px 28px; }
.map-pop { background: var(--card); border: 1px solid var(--line); }
body::before { opacity: .6; }
.on-dark .lede, .on-dark p.lede { color: #cfc9bb; }
.pull, .pull:nth-of-type(even) { background: transparent; transform: none; --rot: 0deg; }
.prose h2::before { content: none; }
/* header navigation: all caps, medium weight (Garet Book with a hairline stroke ≈ medium) */
@media (min-width: 1061px) {
  .nav > a:not(.btn) { font-family: var(--f-ui); font-weight: 400; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; -webkit-text-stroke: .35px currentColor; }
  .nav .btn { text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; font-weight: 400; -webkit-text-stroke: .35px currentColor; }
}
/* header nav: semi-bold look (Book + heavier hairline) */
@media (min-width: 1061px) {
  .nav > a:not(.btn), .nav .btn { -webkit-text-stroke: .75px currentColor; letter-spacing: .13em; }
}
/* header CTA: smooth yellow sweep on hover */
.nav .btn--pink { background-color: var(--pink); background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%;
  transition: background-size .5s cubic-bezier(.65,0,.35,1), color .35s ease .08s, border-color .35s ease, box-shadow .4s var(--ease), transform .4s var(--ease); }
.nav .btn--pink:hover, .nav .btn--pink:focus-visible { background-color: var(--pink); background-size: 100% 100%; color: var(--ink); border-color: var(--yellow); -webkit-text-stroke-color: var(--ink); box-shadow: 0 12px 26px -12px rgba(246,216,14,.8); transform: translateY(-2px); }
/* "Now booking" badge: one clean pink pill */
.rec { background: var(--pink); color: #fff; padding: 10px 20px 10px 16px; gap: 12px; box-shadow: 0 12px 28px -16px rgba(230,0,126,.8);
  font: 400 .72rem/1 var(--f-ui); letter-spacing: .15em; -webkit-text-stroke: .6px currentColor; }
.rec::before { display: none; }
.rec i { width: 7px; height: 7px; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
.rec__label { color: #fff; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.45); }
.rec__roll { background: transparent; color: #fff; padding: 0; height: 18px; }
.rec__roll span { line-height: 18px; height: 18px; }
@keyframes roll { 0%, 28% { margin-top: 0; } 33%, 61% { margin-top: -18px; } 66%, 94% { margin-top: -36px; } 100% { margin-top: -54px; } }
html:not(.motion) .rec__roll { height: 18px; }
@media (max-width: 420px) { .rec { padding: 9px 16px 9px 14px; } }

/* =====================================================================
   v12 · single-page V1
   ===================================================================== */
/* hero: the bill sits on the right with the yellow note pinned to its corner */
.hero__bill { position: relative; display: grid; place-items: center; padding: 24px 0 40px; }
.hero__bill .bill { width: min(440px, 100%); --rot: 2deg; }
.hero__note { position: absolute; right: max(0px, calc(50% - 280px)); bottom: -6px; width: 168px; padding: 18px 18px 20px; text-decoration: none; transform: rotate(4deg); transition: transform .4s var(--ease); z-index: 3; }
.hero__note:hover { transform: rotate(1deg) translateY(-4px); }
.hero__note span { display: block; font: italic 400 1.12rem/1.25 var(--f-hand); }
@media (max-width: 979px) { .hero__bill { padding-top: 8px; } .hero__note { right: 0; bottom: -18px; width: 150px; } }
@media (max-width: 520px) { .hero__note { position: relative; right: auto; bottom: auto; margin: -18px 0 0 auto; } }

/* reel covers without a photo: a typographic title card */
.reel__cover { position: absolute; inset: 0 0 26% 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 46px 18px 0; text-align: center; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, rgba(230,0,126,.38), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(230,0,126,.14), transparent 70%), #121114; }
.reel__cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, var(--ink)); }
.reel__mono { font: italic 400 clamp(4.2rem, 7vw, 5.6rem)/.8 var(--f-display); color: var(--pink); letter-spacing: -0.02em; }
.reel__title { font: 400 clamp(1.25rem, 1.6vw, 1.55rem)/1.1 var(--f-display); color: var(--paper); letter-spacing: -0.015em; text-wrap: balance; max-width: 11ch; }
.reel--type .reel__cap b { display: none; }
.reel--type .reel__cap > span:first-of-type { color: rgba(251,250,243,.7); }
.reel--type:hover .reel__mono { transform: scale(1.06); }
.reel__mono { transition: transform .8s var(--ease); }
.phone__screen--type { position: relative; background: #121114; }
.phone__screen--type .reel__cover { inset: 0; padding-top: 30px; }
.phone__screen--type .reel__mono { font-size: 4.4rem; }
.phone__screen--type .reel__title { font-size: 1.2rem; }

/* booking form */
.form__row { display: grid; gap: 0 20px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field input[type="date"] { min-height: 46px; }
.on-dark .muted a { color: var(--paper); }
.footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
.footer-col a { overflow-wrap: anywhere; }
@media (max-width: 480px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.6fr 1fr 1.2fr; } .footer-brand { grid-column: auto; } }
.hero__note { top: 4px; bottom: auto; right: max(0px, calc(50% - 290px)); transform: rotate(5deg); }
.hero__note:hover { transform: rotate(2deg) translateY(-4px); }
.hero { padding-bottom: clamp(40px, 5vw, 72px); }
@media (max-width: 979px) { .hero__note { top: -6px; right: 0; bottom: auto; } }
@media (max-width: 520px) { .hero__note { position: absolute; top: -14px; right: -4px; width: 132px; padding: 14px 14px 16px; } .hero__note span { font-size: .98rem; } }
.rec__roll span span { display: inline; height: auto; line-height: inherit; }
.reel__mono, .reel__title { position: relative; z-index: 1; }
.reel__cover::after { height: 30%; }
@media (min-width: 980px) and (max-width: 1180px) { .hero__note { width: 140px; top: -30px; right: -8px; padding: 14px; } .hero__note span { font-size: .98rem; } }
.reels-sec { padding-top: clamp(48px, 6vw, 88px); }
.field select { font-family: var(--f-body); font-weight: 400; font-size: 1.1rem; }
.hero__note.table__note { display: block; }
@media (max-width: 520px) { .hero__note { top: -58px; right: 0; transform: rotate(4deg); } .hero__bill { margin-top: 44px; } }
/* typed details appear in Harlow Solid, like handwriting on the letter */
.field input, .field textarea, .field select, .nl-form input[type="email"] { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 1.5rem; line-height: 1.25; letter-spacing: .01em; color: var(--ink); }
.field input::placeholder, .field textarea::placeholder, .nl-form input[type="email"]::placeholder { font-family: var(--f-script); color: #bdb7a8; }
.field select { font-size: 1.35rem; }
.field select option { font-family: var(--f-ui); font-size: 1rem; }
.field input[type="date"] { font-size: 1.35rem; }
.field textarea { line-height: 32px; }
.slidein .nl-form input[type="email"] { font-size: 1.3rem; }

/* ---------- booking: calendar slot picker ---------- */
.slot-picker { border: 0; padding: 0; margin: 6px 0 18px; min-width: 0; }
.slot-picker legend { padding: 0; margin-bottom: 12px; font: 400 .72rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.slot-picker legend small { display: block; margin-top: 6px; font: italic 400 1rem/1.3 var(--f-hand); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.cal { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; box-shadow: 0 10px 24px -18px rgba(11,11,13,.4); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__head b { font: 400 1.15rem/1 var(--f-display); letter-spacing: -0.01em; }
.cal__nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink); transition: background-color .2s, border-color .2s; }
.cal__nav:hover:not([disabled]) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cal__nav[disabled] { opacity: .25; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { text-align: center; font: 400 .62rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #b1ab9c; padding: 6px 0 8px; }
.cal__dow i { font-style: normal; }
.cal__dow.is-open { color: var(--pink-text); }
@media (max-width: 420px) { .cal__dow i { display: none; } }
.cal__day { aspect-ratio: 1; min-height: 36px; border: 0; border-radius: 50%; background: transparent; font: 400 .95rem/1 var(--f-ui); color: #c9c3b4; cursor: default; }
.cal__day.is-open { color: var(--ink); background: var(--pink-soft); cursor: pointer; font-weight: 400; -webkit-text-stroke: .35px currentColor; transition: background-color .2s, color .2s, transform .25s var(--ease); }
.cal__day.is-open:hover { background: #fbc9e2; transform: scale(1.06); }
.cal__day.is-picked { background: var(--pink); color: #fff; }
.cal__day:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.slots { margin-top: 14px; }
.slots__label { font: italic 400 1.02rem/1.3 var(--f-hand); color: var(--ink-2); margin-bottom: 10px; }
.slots__label b { font-weight: 400; color: var(--ink); }
.slots__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 460px) { .slots__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot { min-height: 44px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 400 .82rem/1 var(--f-ui); letter-spacing: .06em; -webkit-text-stroke: .35px currentColor; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.slot:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
.slot.is-picked { background: var(--pink); border-color: var(--pink); color: #fff; }
.slot[disabled] { opacity: .35; text-decoration: line-through; cursor: default; }
.slot-picker__error, .field.is-invalid .field__hint { color: #c4002f; font: 400 .9rem/1.3 var(--f-ui); margin-top: 10px; }
.slot-picker.is-invalid .cal { border-color: #e7a3b5; }
.field__hint { margin-top: 6px; font: italic 400 .98rem/1.35 var(--f-hand); color: var(--stone); }
.field__hint a { color: var(--pink-text); }
/* Google Maps place search (web component) */
.place-search { display: block; width: 100%; color-scheme: light; background: transparent; border-bottom: 2px solid var(--ink); border-radius: 0; font-family: var(--f-ui); }
.field.is-invalid .place-search, .field.is-invalid input { border-bottom-color: #c4002f; }
.slots { display: block; }
.slots[hidden] { display: none; }
.slots__label { display: block; }
.slot { position: static; transform: none; padding: 0 10px; }
.cal__day { aspect-ratio: auto; height: 40px; width: 40px; justify-self: center; }
@media (max-width: 420px) { .cal__day { height: 36px; width: 36px; } }
.slot:hover:not([disabled]) { background: transparent; color: var(--ink); }
@media (hover: hover) { .slot:hover:not([disabled]):not(.is-picked) { background: var(--ink); color: var(--paper); } }
.slot.is-picked, .slot.is-picked:hover { background: var(--pink); border-color: var(--pink); color: #fff; }

/* ---------- Instagram reels embedded (video only: header and footer cropped away) ---------- */
.reels:has(.igreel) { grid-auto-columns: clamp(270px, 27vw, 372px); }
.igreel { margin: 0; scroll-snap-align: start; display: grid; gap: 14px; }
.igreel__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: #121114; box-shadow: 0 18px 40px -18px rgba(11,11,13,.45); isolation: isolate; }
.igreel__frame .reel__cover { inset: 0; padding: 0; z-index: 0; }
/* Instagram's embed = 54px profile header + 4:5 video + ~170px of likes/caption bar.
   Shift it up past the header and let the frame clip everything below the video. */
.igreel__frame iframe { position: absolute; z-index: 1; left: 0; top: -54px; width: 100%; height: calc(100% + 54px + 190px); border: 0; background: transparent; }
.igreel figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 0 4px; }
.igreel__no { grid-row: span 3; font: 400 .7rem/1 var(--f-ui); letter-spacing: .12em; color: var(--pink-text); padding-top: .35em; }
.igreel figcaption b { font: 400 1.2rem/1.15 var(--f-display); letter-spacing: -0.01em; }
.igreel figcaption span:not(.igreel__no) { font: 400 .82rem/1.3 var(--f-ui); color: var(--stone); }
.igreel figcaption a { font: 400 .7rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-text); text-decoration: none; margin-top: 8px; }
.igreel figcaption a:hover { text-decoration: underline; text-underline-offset: 4px; }
.preview-embeds-off .igreel__frame iframe { display: none; }
@media (max-width: 700px) { .reels:has(.igreel) { grid-auto-columns: 80vw; } }
/* Reels are 9:16 inside Instagram's 4:5 player: widen the iframe so the video fills the card edge to edge */
.reels:has(.igreel) { grid-auto-columns: clamp(240px, 22vw, 320px); }
.igreel__frame { aspect-ratio: 9 / 16; }
.igreel__frame iframe { width: 142.23%; left: -21.12%; height: calc(100% + 54px + 190px); }
@media (max-width: 700px) { .reels:has(.igreel) { grid-auto-columns: 72vw; } }

/* =====================================================================
   v13 · alive: header, live slots, interactive bill, humane beliefs,
   five-step flow, pink camera cursor, motion
   ===================================================================== */
/* header logo without the black bar */
.site-header .logo__bar { background: transparent; padding: 0 0 0 12px; margin-left: 0; }
.site-header .logo__word { color: var(--ink); }
.site-header .logo__tag { color: var(--pink-text); }

/* ---------- live "x of 4 interviews open" ---------- */
.slotlive { display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; row-gap: 6px; margin-bottom: 26px; padding: 12px 18px 12px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 34px -22px rgba(230,0,126,.55); max-width: 100%; position: relative; overflow: hidden; }
.slotlive::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(230,0,126,.08) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
html.motion .slotlive.is-ready::after { animation: slotsheen 3.6s ease-in-out 1s infinite; }
@keyframes slotsheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.slotlive__pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 rgba(230,0,126,.6); grid-row: span 2; align-self: center; }
html.motion .slotlive__pulse { animation: slotpulse 1.6s ease-out infinite; }
@keyframes slotpulse { 0% { box-shadow: 0 0 0 0 rgba(230,0,126,.55); } 100% { box-shadow: 0 0 0 12px rgba(230,0,126,0); } }
.slotlive__text { margin: 0; font: 400 .95rem/1.3 var(--f-ui); color: var(--ink-2); }
.slotlive__k { font: 400 .66rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--pink-text); margin-right: 6px; }
.slotlive__text b { font: 400 1.15rem/1 var(--f-display); color: var(--ink); letter-spacing: -0.01em; }
.slotlive__text b [data-sl-left] { display: inline-block; color: var(--pink); min-width: .6em; text-align: center; }
html.motion .slotlive.bump [data-sl-left] { animation: slotbump .38s var(--spring); }
@keyframes slotbump { 0% { transform: translateY(-60%) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.slotlive__seats { display: inline-flex; gap: 6px; grid-row: span 2; }
.slotlive__seats i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #fff; transition: background-color .4s, color .4s, transform .5s var(--spring); }
.slotlive__seats i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.slotlive__seats i.is-taken { background: var(--paper-2); color: #b9b2a4; }
html.motion .slotlive__seats i { animation: seatpop .6s var(--spring) both; animation-delay: calc(.5s + var(--i) * 110ms); }
html.motion .slotlive__seats i:not(.is-taken) { animation: seatpop .6s var(--spring) both calc(.5s + var(--i) * 110ms), seatbreathe 2.8s ease-in-out calc(1.6s + var(--i) * 300ms) infinite; }
@keyframes seatpop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@keyframes seatbreathe { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.slotlive__when { font: italic 400 .92rem/1.2 var(--f-hand); color: var(--stone); }
@media (max-width: 560px) { .slotlive { grid-template-columns: auto 1fr; } .slotlive__seats { grid-column: 1 / -1; grid-row: auto; order: 3; } .slotlive__seats i { width: 26px; height: 26px; } }

/* ---------- interactive receipt ---------- */
.hero__bill { perspective: 1200px; padding-top: 34px; }
.bill__slot { position: absolute; top: 18px; left: 50%; width: min(480px, 104%); height: 20px; transform: translateX(-50%); border-radius: 10px; background: linear-gradient(#1c1b1f, #0b0b0d); box-shadow: inset 0 -4px 0 rgba(255,255,255,.06), 0 10px 24px -10px rgba(11,11,13,.6); z-index: 4; }
.bill__slot::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 3px; margin-top: -1px; border-radius: 3px; background: #000; }
.hero__bill .bill { --tx: 0deg; --ty: 0deg; transform-origin: 50% 0; transform: rotateY(var(--tx)) rotateX(var(--ty)) rotate(1.5deg); transition: transform .5s var(--ease); z-index: 3;
  background-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.9), transparent 45%), linear-gradient(#fff, #fffdf8); }
html.motion .hero__bill .bill { clip-path: inset(0 0 100% 0); }
html.motion .hero__bill.is-printing .bill { animation: billprint 1.4s steps(14, end) forwards; }
@keyframes billprint { to { clip-path: inset(0 0 -40px 0); } }
html.motion .hero__bill.is-printed .bill { clip-path: none; animation: none; }
.hero__bill .bill li { position: relative; transition: background-color .25s; border-radius: 4px; padding: 2px 4px; margin: 0 -4px; }
.hero__bill .bill li:hover { background: var(--pink-soft); }
.hero__bill .bill li::before { content: "✓"; position: absolute; left: -22px; top: 2px; color: var(--pink); font-weight: 400; opacity: 0; transform: scale(0); transition: transform .4s var(--spring), opacity .3s; }
html.motion .hero__bill.is-printed .bill li::before, html:not(.motion) .hero__bill .bill li::before { opacity: 1; transform: none; transition-delay: calc(var(--i) * 140ms); }
.hero__bill .bill__stamp { cursor: pointer; background: transparent; font-family: var(--f-display); }
html.motion .hero__bill .bill__stamp { animation: none; opacity: 0; }
html.motion .hero__bill.is-printed .bill__stamp { animation: stamp .55s var(--spring) .7s both; }
html.motion .hero__bill .bill__stamp.slam { animation: stamp .45s var(--spring) both; }
.bill__tear { display: block; margin: 26px -28px -40px; padding: 14px 28px 16px; border-top: 2px dashed var(--line); text-align: center; text-decoration: none; font: 400 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-text); background: #fffaf5; transition: transform .45s var(--ease), opacity .45s; position: relative; z-index: 2; }
.bill__tear:hover { background: var(--pink-soft); }
.bill__tear.is-torn { transform: translateY(40px) rotate(-6deg); opacity: 0; }

/* ---------- beliefs: human voices drifting behind the statement ---------- */
.pin__voices { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pin__voice { position: absolute; font: 400 clamp(1.1rem, .8rem + 1.2vw, 2rem)/1.1 var(--f-script); color: rgba(251,250,243,.14); white-space: nowrap; transform: translate3d(0, calc((0.5 - var(--pt, 0)) * var(--sp) * 220px), 0) rotate(calc(-4deg + var(--i) * 1.5deg)); will-change: transform; }
.pin__voice:nth-child(2n) { color: rgba(230,0,126,.26); }
.pin__doodle { position: absolute; fill: none; stroke: rgba(251,250,243,.16); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: translate3d(0, calc((0.5 - var(--pt, 0)) * var(--sp) * 260px), 0); }
.pin__doodle--cup { width: 130px; right: 8%; top: 18%; }
.pin__doodle--hands { width: 210px; left: 10%; bottom: 16%; stroke: rgba(230,0,126,.3); }
.pin__doodle--face { width: 120px; right: 18%; bottom: 10%; }
.pin__doodle--cam { width: 110px; left: 38%; top: 6%; stroke: rgba(230,0,126,.26); }
html.motion .pin__doodle path, html.motion .pin__doodle circle { stroke-dasharray: 900; stroke-dashoffset: calc(900 - var(--pt, 0) * 1800); }
.pin__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40vmax 30vmax at calc(20% + var(--pt, 0) * 60%) 70%, rgba(230,0,126,.18), transparent 70%); z-index: 0; }
.pin .wrap { position: relative; z-index: 1; }
@media (max-width: 700px) { .pin__voice:nth-child(n+4) { display: none; } .pin__doodle--hands, .pin__doodle--face { display: none; } }

/* ---------- five-step flow ---------- */
.flow-sec { background: var(--paper-2); }
.flow5 { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px 22px; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: f; }
@media (max-width: 1180px) { .flow5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .flow5 { grid-template-columns: minmax(0, 1fr); } }
.flow5__step { position: relative; display: grid; align-content: start; gap: 8px; }
.flow5__visual { height: 300px; display: grid; place-items: center; margin-bottom: 14px; position: relative; }
.flow5__visual > * { max-width: 100%; }
.flow5__no { font: italic 400 2rem/1 var(--f-display); color: var(--pink); }
.flow5__step h3 { font: 400 1.3rem/1.15 var(--f-display); letter-spacing: -0.01em; }
.flow5__step p { font: 400 .95rem/1.6 var(--f-ui); color: var(--ink-2); max-width: 30ch; }
html.motion .flow5__step .flow5__visual { transition: transform .9s var(--ease); }
html.motion .flow5__step:not(.in) .flow5__visual { transform: translateY(40px) scale(.94); }
.flow5__step:hover .flow5__visual { transform: translateY(-6px); }
.flow5__line { height: 2px; background: rgba(11,11,13,.1); margin: 40px 0 0; border-radius: 2px; overflow: hidden; }
.flow5__line span { display: block; height: 100%; background: var(--pink); transform: scaleX(0); transform-origin: left; }
.flow__photo { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.flow__photo img { width: 100%; height: 100%; object-fit: cover; }
.flow__ui { width: 100%; max-width: 250px; }
.flow__ui--form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; box-shadow: var(--shadow); display: grid; gap: 12px; transform: rotate(-2deg); }
.flow__ui-title { font: italic 400 1.15rem/1 var(--f-hand); color: var(--pink-text); margin: 0; }
.flow__ui-cal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.flow__ui-cal span { display: grid; place-items: center; gap: 2px; padding: 8px 0; border-radius: 10px; background: var(--pink-soft); font: 400 .6rem/1 var(--f-ui); letter-spacing: .1em; color: var(--pink-text); }
.flow__ui-cal span b { font: 400 1.1rem/1 var(--f-display); color: var(--ink); }
.flow__ui-cal span.on { background: var(--pink); color: #fff; } .flow__ui-cal span.on b { color: #fff; }
.flow__ui-slots { display: flex; gap: 6px; } .flow__ui-slots span { flex: 1; text-align: center; padding: 7px 0; border: 1.5px solid var(--ink); border-radius: 99px; font: 400 .7rem/1 var(--f-ui); }
.flow__ui-slots span.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.flow__ui-btn { display: block; text-align: center; padding: 11px 0; border-radius: 99px; background: var(--pink); color: #fff; font: 400 .78rem/1 var(--f-ui); }
html.motion .flow5__step.in .flow__ui-btn { animation: btnpress 2.4s ease-in-out 1.2s infinite; }
@keyframes btnpress { 0%, 70%, 100% { transform: none; } 78% { transform: scale(.94); } 86% { transform: scale(1.03); } }
.flow5 .qs { transform: rotate(1.5deg); }
.flow5 .qs li { font-family: var(--f-script); font-style: normal; font-size: 1.25rem; }
.flow5 .contact { transform: rotate(-1.5deg); }
.flow5 .phone { width: min(170px, 100%); }
.flow__ui--blog { background: #fff; border-radius: 14px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 8px; transform: rotate(2deg); }
.flow__blog-top { font: 400 .6rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.flow__blog-img { height: 92px; border-radius: 8px; background: radial-gradient(80% 90% at 30% 20%, rgba(230,0,126,.35), transparent 60%), #121114; }
.flow__blog-tag { font: 400 .58rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-text); }
.flow__ui--blog b { font: 400 1.02rem/1.15 var(--f-display); }
.flow__ui--blog i { display: block; height: 6px; border-radius: 3px; background: var(--paper-2); } .flow__ui--blog i.short { width: 60%; }

/* ---------- pink camera cursor ---------- */
@media (pointer: fine) {
  html.has-bbcur, html.has-bbcur body, html.has-bbcur a, html.has-bbcur button, html.has-bbcur [role="button"], html.has-bbcur label, html.has-bbcur summary { cursor: none; }
  html.has-bbcur input, html.has-bbcur textarea, html.has-bbcur select { cursor: auto; }
}
.bbcur { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .3s; }
html.bbcur-on .bbcur { opacity: 1; }
.bbcur__dot, .bbcur__ring { position: fixed; left: 0; top: 0; will-change: transform; }
.bbcur__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--pink); }
.bbcur__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid rgba(230,0,126,.55); display: grid; place-items: center; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s, border-color .3s; }
.bbcur__ring svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--spring); }
.bbcur.is-cam .bbcur__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: var(--pink); border-color: var(--pink); box-shadow: 0 10px 24px -8px rgba(230,0,126,.6); }
.bbcur.is-cam .bbcur__ring svg { opacity: 1; transform: none; }
.bbcur.is-cam .bbcur__dot { opacity: 0; }
.bbcur.is-text { opacity: 0 !important; }
.bbcur.is-snap .bbcur__ring::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--pink); animation: snap .45s ease-out forwards; }
@keyframes snap { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.scrollbar-top { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--pink); transform-origin: left; transform: scaleX(0); z-index: 120; pointer-events: none; }

/* ---------- motion polish ---------- */
html.motion .reels .igreel { transition: opacity .8s var(--ease), transform .9s var(--ease); }
html.motion .reels-sec:not(.in-view) .igreel { opacity: 0; transform: translateY(50px) rotate(2deg); }
html.motion .reels-sec.in-view .igreel:nth-child(2) { transition-delay: .12s; } html.motion .reels-sec.in-view .igreel:nth-child(3) { transition-delay: .24s; }
.igreel__frame { transition: transform .5s var(--ease), box-shadow .5s; }
.igreel:hover .igreel__frame { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 30px 60px -24px rgba(230,0,126,.5); }
html.motion .btn--pink { position: relative; overflow: hidden; }
html.motion .btn--pink::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--ease); pointer-events: none; }
html.motion .btn--pink:hover::after { transform: translateX(120%); }
.slotlive { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; row-gap: 4px; padding: 14px 18px; }
.slotlive__pulse { grid-row: 1 / span 3; }
.slotlive__k { margin: 0; grid-column: 2; }
.slotlive__text { grid-column: 2; font-size: 1rem; }
.slotlive__text b { font-size: 1.45rem; }
.slotlive__when { grid-column: 2; }
.slotlive__seats { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
@media (max-width: 560px) { .slotlive__seats { grid-column: 2; grid-row: auto; margin-top: 6px; } }
.hero__note { top: auto; bottom: 10px; right: auto; left: max(-10px, calc(50% - 300px)); transform: rotate(-5deg); z-index: 5; }
.hero__note:hover { transform: rotate(-2deg) translateY(-4px); }
@media (max-width: 979px) { .hero__note { left: -6px; bottom: 6px; top: auto; right: auto; } }
@media (max-width: 520px) { .hero__note { position: relative; top: auto; left: auto; right: auto; bottom: auto; margin: -30px 0 0 auto; } .hero__bill { margin-top: 10px; } }
.hero__bill .bill__stamp { bottom: 96px; left: 34%; }
.hero__bill .bill li { padding-left: 22px; margin-left: -6px; }
.hero__bill .bill li::before { left: 2px; }
.reels-head .kicker { white-space: normal; flex-wrap: wrap; line-height: 1.4; }
.hero__note { top: auto; left: auto; bottom: -26px; right: -6px; transform: rotate(4deg); }
.hero__note:hover { transform: rotate(1deg) translateY(-4px); }
.hero__bill { padding-bottom: 64px; }
@media (max-width: 979px) { .hero__note { left: auto; right: 0; bottom: -10px; } }
@media (max-width: 520px) { .hero__note { position: relative; right: auto; bottom: auto; margin: -36px 0 0 auto; } }
.reels-head .kicker { display: block; }
.reels-head .kicker .live-dot { display: inline-block; margin-right: 10px; vertical-align: middle; }
.flow5 .qs li { font-size: 1.15rem; white-space: nowrap; }
.reels-head .kicker { white-space: normal; }
@media (max-width: 520px) { .hero__bill { padding-top: 96px; padding-bottom: 20px; } .bill__slot { top: 80px; } .hero__note { position: absolute; top: -6px; right: 4px; bottom: auto; margin: 0; width: 150px; transform: rotate(4deg); } }

/* ---------- logo, rebuilt from the Canva logo system ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; position: relative; }
.logo .logo__b { width: 58px; height: 58px; flex: none; position: relative; z-index: 2; filter: drop-shadow(0 4px 10px rgba(230,0,126,.18)); }
.logo .logo__bar { position: relative; z-index: 1; display: grid; gap: 3px; margin-left: -14px; padding: 7px 14px 7px 22px; border-radius: 0 8px 8px 0; line-height: 1; }
.logo .logo__word { font: 400 1.08rem/1 var(--f-ui); letter-spacing: .015em; text-transform: uppercase; white-space: nowrap; }
.logo .logo__word b { font-weight: 400; color: var(--pink); margin-left: .18em; font-size: 1.12em; }
.logo .logo__tag { display: block; font: 400 .82rem/1 var(--f-script); font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; letter-spacing: .01em; }
/* plain = black & white version (header, on cream) */
.logo--plain .logo__bar { background: transparent; }
.logo--plain .logo__word { color: var(--ink); }
.logo--plain .logo__tag { color: var(--ink); }
/* bar = primary logo exactly as designed (footer, on dark) */
.logo--bar .logo__bar { background: var(--ink); border: 1.5px solid rgba(251,250,243,.18); }
.logo--bar .logo__word, .logo--bar .logo__tag { color: #fff; }
.footer-brand .logo--bar .logo__bar { background: #000; }
.logo:hover .logo__b { transform: rotate(-12deg) scale(1.04); }
.site-header .logo .logo__bar, .site-header .logo__bar { background: transparent; padding-left: 22px; margin-left: -14px; }
.site-header .logo__word { color: var(--ink); }
.site-header .logo__tag { color: var(--ink); display: block; }
@media (max-width: 1060px) { .site-header .logo__tag { display: block; } }
@media (max-width: 420px) { .logo .logo__b { width: 48px; height: 48px; } .logo .logo__word { font-size: .92rem; } .logo .logo__tag { font-size: .72rem; } }

/* ---------- What Business Babe is ---------- */
.about-bb__grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 960px) { .about-bb__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.about-bb h2 { font-size: var(--h2); max-width: 18ch; margin-bottom: 22px; }
.about-bb .lede { max-width: 46ch; }
.about-bb__soft { margin-top: 18px; max-width: 52ch; font: italic 400 1.05rem/1.6 var(--f-body); color: var(--stone); }
.about-bb__lists { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 20px 44px -30px rgba(11,11,13,.4); }
@media (max-width: 520px) { .about-bb__lists { grid-template-columns: minmax(0, 1fr); } }
.isnot h3 { font: 400 .7rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.isnot--is h3 { color: var(--pink-text); }
.isnot--not h3 { color: var(--stone); }
.isnot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.isnot li { font: 400 1rem/1.35 var(--f-display); padding-left: 22px; position: relative; }
.isnot--is li::before { content: "✓"; position: absolute; left: 0; color: var(--pink); font: 400 .9rem/1.4 var(--f-ui); }
.isnot--not li { color: var(--stone); text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.isnot--not li::before { content: "×"; position: absolute; left: 2px; color: var(--stone); font: 400 1.1rem/1.2 var(--f-ui); }
html.motion .about-bb__lists:not(.in) .isnot--not li { text-decoration-color: transparent; }
html.motion .about-bb__lists .isnot--not li { transition: text-decoration-color .6s ease; transition-delay: calc(.6s + var(--n, 0) * 120ms); }
.about-bb__depth { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 16px; border-top: 1px dashed var(--line); font: 400 1.3rem/1.2 var(--f-script); color: var(--pink); }
.babe { margin-top: clamp(56px, 7vw, 96px); }
.babe__head { display: grid; gap: 10px; margin-bottom: 26px; }
@media (min-width: 900px) { .babe__head { grid-template-columns: auto 1fr; align-items: end; gap: 40px; } }
.babe__head h3 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
.babe__head p { max-width: 54ch; color: var(--ink-2); font: 400 1rem/1.6 var(--f-ui); margin: 0; }
.babe__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .babe__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .babe__cards { grid-template-columns: minmax(0, 1fr); } }
.babe__cards li { position: relative; background: var(--ink); color: var(--paper); border-radius: 18px; padding: 24px 22px 26px; overflow: hidden; transition: transform .5s var(--ease), background-color .4s; }
.babe__cards li:hover { transform: translateY(-8px) rotate(-.6deg); background: #17161a; }
.babe__cards b { display: block; font: 400 4.2rem/.8 var(--f-script); color: var(--pink); margin-bottom: 18px; transition: transform .6s var(--spring); }
.babe__cards li:hover b { transform: rotate(-8deg) scale(1.08); }
/* real logo artwork */
.logo--img { display: inline-flex; line-height: 0; }
.logo--img img { display: block; height: 52px; width: auto; transition: transform .5s var(--spring); transform-origin: 9% 50%; }
.logo--img:hover img { transform: rotate(-3deg) scale(1.03); }
.footer-brand .logo--img img { height: 64px; }
@media (max-width: 420px) { .site-header .logo--img img { height: 42px; } }
.intro__in img { width: 96px; height: 96px; }
.inland__stamp img { width: 40px; height: 40px; }
.babe__cards h4 { font: 400 1.25rem/1.1 var(--f-display); margin: 0 0 8px; }
.babe__cards p { margin: 0; font: 400 .92rem/1.55 var(--f-ui); color: #cfc9bb; }
html.motion .babe.in .babe__cards li { animation: babein .8s var(--ease) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes babein { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }


/* =====================================================================
   v14 · typography refinement: lighter, editorial, per the brand guide
   Playfair Regular for headlines (italic for emphasis), Garet Book for
   everything else; weight comes from size, spacing and colour, not heaviness.
   ===================================================================== */
body { font-weight: 400; }
h1.caps, h2.caps, .caps { font-weight: 400; letter-spacing: -0.025em; }
.caps .pk, h1 .pk, h2 .pk, .finale h2 .pk { font-weight: 400; }
h1.caps { letter-spacing: -0.035em; }
h3, h4 { font-weight: 400; }
b, strong { font-weight: 400; }
/* small caps labels: Garet Book, tracked out, a hairline of stroke for crispness */
.kick, .reels-head .kicker, .slotlive__k, .card__meta, .isnot h3, .footer-col h4, .bill__tear, .reel__watch, .igreel figcaption a,
.cal__dow, .slot-picker legend, .field label, .form-steps__top, .reel__cat, .reel__no, .igreel__no, .inland__top, .contact__meta, .flow__blog-top, .flow__blog-tag, .label, .reels-count, .pin-boxes span, .bill__head small {
  font-weight: 400; -webkit-text-stroke: .25px currentColor; letter-spacing: .16em; }
/* buttons and text links */
.btn { font-weight: 400; -webkit-text-stroke: .4px currentColor; letter-spacing: .03em; }
.more, .btn-text { font-weight: 400; -webkit-text-stroke: .35px currentColor; }
.ticks li { font-weight: 400; -webkit-text-stroke: .3px currentColor; }
/* the wordmark stays heavy: it's the logo */
.logo .logo__word, .logo .logo__word b { font-weight: 800; -webkit-text-stroke: 0; }
/* numbers and display details in Playfair Regular */
.slotlive__text b, .bill__total strong, .flow__ui-cal span b, .cal__head b { font-weight: 400; }
.bill__total b, .bill__stamp { font-weight: 400; }
.flow5__step h3, .babe__cards h4, .igreel figcaption b, .reel__title, .phone__ui b { font-weight: 400; }
.babe__head h3, .about-bb h2 { font-weight: 400; }
.pin__text { font-weight: 400; letter-spacing: -0.02em; }
.hero h1 .fit__line:first-child { font-weight: 400; }

/* =====================================================================
   v15 · quieter details
   ===================================================================== */
/* now-booking: one fine line, no card */
.slotlive { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0; margin-bottom: 28px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; font: 400 .74rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); -webkit-text-stroke: .2px currentColor; }
.slotlive::after { display: none; }
.slotlive__pulse { width: 6px; height: 6px; grid-row: auto; }
.slotlive__k { margin: 0; color: var(--pink-text); font: inherit; letter-spacing: inherit; }
.slotlive__seats { display: inline-flex; gap: 5px; grid-row: auto; grid-column: auto; margin: 0; }
.slotlive__seats i { width: 18px; height: 3px; border-radius: 3px; background: var(--pink); }
.slotlive__seats i.is-taken { background: rgba(11,11,13,.14); }
html.motion .slotlive__seats i, html.motion .slotlive__seats i:not(.is-taken) { animation: seatgrow .6s var(--ease) both calc(.4s + var(--i) * 100ms); }
@keyframes seatgrow { from { transform: scaleX(0); } to { transform: none; } }
.slotlive__text { font: inherit; color: inherit; letter-spacing: inherit; grid-column: auto; }
.slotlive__text [data-sl-left] { color: var(--pink-text); }
.slotlive__when { font: inherit; letter-spacing: inherit; color: var(--stone); grid-column: auto; padding-left: 12px; border-left: 1px solid var(--line); }
@media (max-width: 560px) { .slotlive { gap: 8px 10px; } .slotlive__when { border: 0; padding: 0; width: 100%; } }

/* beliefs: no floating texts or doodles, just a slow glow and grain */
.pin__voices { display: none; }
.pin__glow { background: radial-gradient(46vmax 34vmax at calc(15% + var(--pt, 0) * 70%) 75%, rgba(230,0,126,.14), transparent 70%); }

/* what business babe is: editorial, no boxed card */
.about-bb__lists { background: none; border: 0; box-shadow: none; padding: 6px 0 0 clamp(0px, 3vw, 40px); border-left: 1px solid var(--line); gap: 28px; }
@media (max-width: 959px) { .about-bb__lists { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; } }
.isnot h3 { margin-bottom: 16px; }
.isnot li { font: 400 1.05rem/1.35 var(--f-display); padding-left: 0; }
.isnot li::before { display: none; }
.isnot--is li { color: var(--ink); }
.isnot--not li { color: #a39d91; text-decoration: none; position: relative; width: max-content; max-width: 100%; }
.isnot--not li::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1px; background: var(--pink); transform-origin: left; transition: transform .7s var(--ease) calc(.4s + var(--n, 0) * 120ms); }
html.motion .about-bb__lists:not(.in) .isnot--not li::after { transform: scaleX(0); }
.about-bb__depth { font: italic 400 1.35rem/1.3 var(--f-display); color: var(--ink); border-top: 1px solid var(--line); }
.about-bb__depth em { color: var(--pink); }
/* B.A.B.E. as a quiet editorial row */
.babe__cards { gap: 0; border-top: 1px solid var(--line); }
.babe__cards li { background: none; color: var(--ink); border-radius: 0; padding: 28px 24px 8px 0; border-right: 1px solid var(--line); margin-right: 24px; }
.babe__cards li:last-child { border-right: 0; margin-right: 0; }
.babe__cards li:hover { transform: none; background: none; }
.babe__cards b { font: italic 400 3.4rem/1 var(--f-display); color: var(--pink); margin-bottom: 14px; }
.babe__cards li:hover b { transform: translateX(6px); }
.babe__cards h4 { font: 400 1.2rem/1.2 var(--f-display); }
.babe__cards p { color: var(--ink-2); }
@media (max-width: 1000px) { .babe__cards li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 22px; } }
/* logo image heights */
.logo--img img { height: 46px; }
.footer-brand .logo--img img { height: 58px; }
/* real logo everywhere */
.logo--img img { height: 44px; }
/* now-booking fits one line */
.slotlive { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 640px) { .slotlive { flex-wrap: wrap; white-space: normal; } }
/* how it works: calm numbered timeline, no illustrations (photos show when added) */
.flow5__visual:not(:has(.flow__photo)) { display: none; }
.flow5 { gap: 0; border-top: 1px solid rgba(11,11,13,.12); }
.flow5__step { padding: 30px 26px 10px 0; margin-right: 26px; border-right: 1px solid rgba(11,11,13,.1); position: relative; }
.flow5__step:last-child { border-right: 0; margin-right: 0; }
.flow5__step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.flow5__no { font: italic 400 3rem/1 var(--f-display); margin-bottom: 18px; }
.flow5__step h3 { font-size: 1.25rem; margin-bottom: 4px; }
.flow5__step p { font-size: .94rem; color: var(--stone); }
.flow5__line { display: none; }
.flow5__step .flow5__visual { height: 260px; margin-bottom: 20px; }
@media (max-width: 1180px) { .flow5__step:nth-child(3n) { border-right: 0; margin-right: 0; } }
@media (max-width: 760px) { .flow5__step { border-right: 0; margin-right: 0; border-bottom: 1px solid rgba(11,11,13,.1); padding-bottom: 22px; } }
html.motion .flow5__step:not(.in) { opacity: 0; transform: translateY(24px); }
.flow-sec .head { margin-bottom: 40px; }
/* booking: its own calm, centred section */
.book-solo { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.book-solo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50vmax 36vmax at 50% 0%, rgba(230,0,126,.16), transparent 70%); pointer-events: none; }
.book-solo__wrap { position: relative; display: grid; justify-items: center; gap: clamp(36px, 4vw, 56px); max-width: 860px; }
.book-solo__head { display: grid; gap: 16px; text-align: center; justify-items: center; }
.book-solo__head h2 { font-size: var(--h2) !important; }
.book-solo__head .lede { color: #cfc9bb; max-width: 44ch; margin: 0 auto; }
.book-solo__head .ticks { justify-content: center; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--paper); }
.book-solo__head .muted { color: #9d978c; font-size: .9rem; }
.book-solo__head .muted a { color: var(--paper); }
.book-solo form { width: 100%; max-width: 680px; transform: none; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); border-radius: 6px; }
.logo--img img { height: 50px; }
.about-bb__lists { border-radius: 0; }

/* =====================================================================
   v16 · mobile polish
   ===================================================================== */
.hero h1[data-fit] { font-size: min(96px, 12.4cqi); }
@media (max-width: 640px) {
  .slotlive { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px 10px; white-space: normal; margin-bottom: 22px; font-size: .68rem; }
  .slotlive__pulse { grid-column: 1; }
  .slotlive__k { grid-column: 2; }
  .slotlive__seats { grid-column: 3; justify-self: start; }
  .slotlive__text { grid-column: 1 / -1; }
  .slotlive__when { grid-column: 1 / -1; border: 0; padding: 0; width: auto; margin-top: -4px; }
  .hero { padding-top: 20px; }
  .hero .lede { font-size: 1.05rem; max-width: none; }
  .hero .btn-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  /* receipt: smaller and tidier on phones */
  .hero__bill { padding: 58px 6px 14px; margin-top: 8px; }
  .hero__bill .bill { max-width: 330px; padding: 22px 20px 32px; }
  .hero__bill .bill__head .caps { font-size: 1.15rem; }
  .hero__bill .bill li { font-size: .82rem; }
  .hero__bill .bill__total strong { font-size: 2rem; }
  .hero__bill .bill__stamp { bottom: 78px; font-size: .7rem; }
  .bill__slot { top: 46px; width: min(360px, 100%); height: 16px; }
  .bill__tear { margin: 20px -20px -32px; font-size: .62rem; }
  .hero__note { top: -8px; right: 0; width: 132px; padding: 12px 12px 14px; }
  .hero__note span { font-size: .92rem; }
  /* section rhythm */
  .section { padding-block: 64px; }
  h2.caps, .about-bb h2, .book-solo__head h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem) !important; }
  .reels-head { margin-bottom: 18px; }
  .reels:has(.igreel) { grid-auto-columns: 74vw; padding-inline: var(--gutter); }
  .igreel figcaption b { font-size: 1.05rem; }
  .pin__text { font-size: clamp(1.7rem, 7.6vw, 2.2rem) !important; }
  .pin__foot { font-size: .95rem; }
  .about-bb__lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .isnot li { font-size: .95rem; }
  .babe__cards li { padding: 22px 0 18px; }
  .babe__cards b { font-size: 2.6rem; margin-bottom: 8px; }
  .flow5__step { padding-top: 22px; }
  .flow5__no { font-size: 2.3rem; margin-bottom: 10px; }
  .book-solo__head .ticks { flex-direction: column; align-items: center; }
  .book-solo form { padding-inline: 18px 16px; }
  .finale h2 { font-size: clamp(2.4rem, 11vw, 3.2rem) !important; }
  .footer-top { gap: 28px; }
  .footer-slogan { font-size: 13vw; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}
@media (max-width: 380px) { .about-bb__lists { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .slotlive__pulse, .slotlive__k, .slotlive__seats { grid-row: 1; order: 0; }
  .slotlive__seats { grid-column: 3; margin: 0; }
  .slotlive__text { grid-row: 2; } .slotlive__when { grid-row: 3; }
  .footer-slogan { font-size: 10.6vw; white-space: nowrap; }
}

/* ==========================================================================
   v17 · "Call it what you want" scrapbook: kraft + pastel paper, typewriter,
   white brush highlights, red-pen notes, polaroids, torn notes, newsprint.
   Covers: What Business Babe is (.zine) · B.A.B.E. (.babe2) · How it works (.journey)
   ========================================================================== */
:root {
  --f-type: "Courier Prime", "Courier New", Courier, monospace;
  --f-strip: "Special Elite", "Courier Prime", "Courier New", monospace;
  --pen: #d9134f;
  --kraft: #d9c6a5; --kraft-2: #cdb690;
  --lav: #dfd9f0; --powder: #d6e4f0; --blush: #f8dde8; --butter: #f5edcc; --sage: #dde9d6; --news: #f5f0e3;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .2' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M6 15C40 7 90 11 140 8s110 0 154 5l-3 6c-8 0 4 3 2 8-60 5-120 3-170 7-40 3-80 0-122-2l2-6c-6-1-6-4-1-6z' fill='%23fff'/%3E%3Cpath d='M20 30c60-3 140-2 230-6' stroke='%23fff' stroke-width='2' opacity='.6'/%3E%3C/svg%3E");
}

/* shared bits */
.tw-label { font: 400 .78rem/1 var(--f-strip); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; }
.tw-label::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.brush { background: var(--brush) center 58% / 100% 78% no-repeat; padding: .02em .18em .06em; margin: 0 -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h2 .brush, h2 .brush .w > span { color: var(--ink); }
.pen { font: 400 clamp(1.15rem, 1rem + .5vw, 1.5rem)/1.1 var(--f-hand); color: var(--pen); margin: 0; display: inline-flex; align-items: center; gap: 8px; rotate: -3deg; }
.pen-arrow { width: 46px; height: 24px; flex: none; }
.pen-arrow.flip { transform: scale(-1, -1); }
.sbghost { position: absolute; z-index: 0; pointer-events: none; user-select: none; font: italic 400 clamp(9rem, 30vw, 26rem)/.8 var(--f-display); letter-spacing: -.04em; color: rgba(255,255,255,.42); white-space: nowrap; right: -2vw; top: clamp(20px, 6vw, 80px); }
@media (max-width: 760px) { .sbghost { font-size: clamp(4.5rem, 18vw, 7rem); } }
.sbghost--lav { color: rgba(255,255,255,.55); left: -3vw; right: auto; top: auto; bottom: -4vw; }

/* polaroid */
.polaroid { position: relative; margin: 0; background: #fffefa; padding: 10px 10px 0; width: var(--pw, 230px); rotate: var(--r, 0deg); box-shadow: 0 1px 1px rgba(40,30,10,.08), 0 18px 30px -18px rgba(40,30,10,.5); transition: rotate .6s var(--spring), translate .6s var(--spring), box-shadow .6s var(--ease); }
.polaroid__img { aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.polaroid__img > svg, .polaroid__img > img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { font: 400 1.15rem/1 var(--f-hand); color: var(--ink); text-align: center; padding: 14px 6px 16px; }
.polaroid:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 2px 2px rgba(40,30,10,.08), 0 30px 44px -22px rgba(40,30,10,.55); }
.sbtape { position: absolute; z-index: 3; top: -13px; left: 50%; width: 92px; height: 26px; margin-left: -46px; rotate: -5deg; background: rgba(255,250,235,.62); box-shadow: 0 1px 2px rgba(0,0,0,.06); backdrop-filter: blur(.5px);
  clip-path: polygon(0 8%, 6% 0, 10% 10%, 16% 2%, 22% 6%, 100% 0, 96% 20%, 100% 40%, 95% 60%, 100% 82%, 97% 100%, 0 100%, 4% 78%, 0 56%, 5% 34%); }
.sbtape--r { rotate: 7deg; left: auto; right: -18px; margin: 0; top: -10px; }

/* torn notes */
.sbnote { position: relative; rotate: var(--r, 0deg); filter: drop-shadow(0 12px 14px rgba(40,30,10,.18)) drop-shadow(0 1px 1px rgba(40,30,10,.1)); transition: rotate .6s var(--spring), translate .6s var(--spring); }
.sbnote__paper { background: var(--bg, var(--butter)) var(--grain); padding: 26px 24px 28px; }
.sbnote--lav { --bg: var(--lav); } .sbnote--blush { --bg: var(--blush); } .sbnote--powder { --bg: var(--powder); } .sbnote--butter { --bg: var(--butter); } .sbnote--sage { --bg: var(--sage); }
.sbnote:hover { rotate: 0deg; translate: 0 -6px; }

/* ---------- What Business Babe is ---------- */
.zine { background: var(--kraft) var(--grain); overflow: hidden; isolation: isolate; }
.zine::before { content: ""; position: absolute; inset: 0; background: var(--fibre); opacity: .7; pointer-events: none; z-index: 0; }
.zine > .wrap { position: relative; z-index: 1; }
.zine__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.zine__mast { display: flex; justify-content: space-between; gap: 12px; font: 400 .7rem/1 var(--f-strip); letter-spacing: .2em; text-transform: uppercase; color: rgba(11,11,13,.7); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 8px 0 7px; margin-bottom: clamp(26px, 4vw, 44px); }
.zine__mast span:nth-child(2) { font-family: var(--f-display); font-style: italic; letter-spacing: .04em; text-transform: none; font-size: .95rem; }
.zine__h { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem) !important; max-width: 17ch; line-height: 1.08 !important; }
.zine__pen { margin: 14px 0 0 clamp(0px, 8vw, 120px); }
.clip { rotate: var(--r, 0deg); margin-top: clamp(26px, 4vw, 40px); max-width: 560px; filter: drop-shadow(0 14px 16px rgba(40,30,10,.2)); }
.clip__paper { background: var(--news) var(--grain); padding: 28px clamp(20px, 3vw, 34px) 30px; columns: 2 220px; column-gap: 28px; column-rule: 1px solid rgba(11,11,13,.14); }
.clip__paper p { font: 400 .86rem/1.65 var(--f-type); color: #2a2620; margin: 0 0 12px; break-inside: avoid-column; hyphens: auto; }
.clip__paper p:first-child::first-letter { font: 400 3.1em/.8 var(--f-display); float: left; padding: 4px 6px 0 0; color: var(--ink); }
.clip__dl { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78em; }
.clip__paper p:first-child .clip__dl::first-letter { all: unset; }

.zine__board { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 26px 22px; align-items: start; padding-top: clamp(0px, 3vw, 30px); }
.zine__pol { --pw: clamp(190px, 18vw, 240px); grid-row: 1; grid-column: 1; z-index: 2; }
.zine__not { grid-row: 1; grid-column: 2; margin-top: clamp(30px, 5vw, 70px); max-width: 300px; }
.zine__not .tw-label { margin-bottom: 14px; }
.xout { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xout li { position: relative; width: fit-content; font: 400 .92rem/1.3 var(--f-type); color: #5a5468; }
.xout li::after { content: ""; position: absolute; left: -5px; right: -6px; top: 52%; height: 2px; background: var(--pen); border-radius: 2px; rotate: -2.5deg; transform-origin: left; transition: transform .7s var(--ease); transition-delay: calc(var(--n) * 130ms + 400ms); }
html.motion .zine__not:not(.in) .xout li::after { transform: scaleX(0); }
.strips { grid-column: 1 / -1; display: grid; justify-items: start; gap: 9px; margin-top: 6px; }
.strips__label { font: 400 1.5rem/1 var(--f-hand); color: var(--pen); margin: 0 0 4px 6px; rotate: -4deg; }
.strip { display: inline-block; background: #fffefa var(--grain); font: 400 clamp(.82rem, .78rem + .2vw, .95rem)/1 var(--f-strip); letter-spacing: .04em; color: var(--ink); padding: 10px 16px 9px; rotate: var(--r); box-shadow: 0 1px 1px rgba(40,30,10,.1), 0 8px 12px -10px rgba(40,30,10,.5); margin-left: calc(var(--n) * 14px); transition: translate .5s var(--spring), rotate .5s var(--spring); }
.strip:hover { rotate: 0deg; translate: 6px 0; }
html.motion .strips .strip { transition: opacity .6s var(--ease), translate .7s var(--ease), rotate .5s var(--spring); transition-delay: calc(var(--n) * 90ms); }
html.motion .strips:not(.in) .strip { opacity: 0; translate: -24px 0; }
html.motion .strips[data-reveal]:not(.in) { opacity: 1; transform: none; }
.zine__depth { position: absolute; right: 0; bottom: -10px; z-index: 3; }
.zine__depth .sbnote__paper { padding: 18px 20px 20px; }
.zine__depth p { margin: 0; font: 400 1.4rem/1.05 var(--f-hand); color: var(--ink); max-width: 9ch; }

/* ---------- B.A.B.E. ---------- */
.babe2 { background: var(--lav) var(--grain); overflow: hidden; isolation: isolate; }
.babe2 > .wrap { position: relative; z-index: 1; }
.babe2__head { display: grid; justify-items: center; text-align: center; gap: 4px; margin-bottom: clamp(44px, 6vw, 72px); }
.babe2__head h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem) !important; }
.babe2__head .pen { margin-top: 10px; }
.babe2__notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.babe2__notes > li:nth-child(even) { margin-top: 38px; }
.babe2__notes .sbnote__paper { padding: 30px 22px 32px; min-height: 250px; display: flex; flex-direction: column; }
.babe2__tag { font: 400 1.15rem/1 var(--f-hand); color: var(--pen); rotate: -3deg; display: inline-block; align-self: flex-start; }
.babe2__l { font: italic 400 clamp(4.2rem, 3rem + 3vw, 6rem)/.85 var(--f-display); color: var(--pink); margin: 14px 0 12px; }
.babe2__notes h3 { font: 400 .82rem/1.25 var(--f-strip); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.babe2__notes p { font: 400 .88rem/1.6 var(--f-type); color: #3a3530; margin: 0; }
.babe2__foot { text-align: center; margin: clamp(44px, 6vw, 70px) 0 0; font: italic 400 clamp(1.2rem, 1rem + .8vw, 1.7rem)/1.3 var(--f-display); }

/* ---------- How it works · the journey ---------- */
.journey { position: relative; background: var(--news) var(--grain); padding-block: clamp(72px, 9vw, 120px); }
.journey::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(11,11,13,.035) 31px 32px); }
.journey__head { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 12px 32px; position: relative; z-index: 2; }
.journey__head h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem) !important; }
.journey__count { font: 400 .8rem/1 var(--f-strip); letter-spacing: .14em; padding-bottom: .6em; }
.journey__count b { font: italic 400 2.2rem/1 var(--f-display); color: var(--pink); letter-spacing: 0; }
.journey__hint { padding-bottom: .5em; }
.journey__view { position: relative; z-index: 1; margin-top: clamp(30px, 4vw, 50px); }
.journey__track { position: relative; }
.journey__road { position: absolute; left: 0; width: 100%; height: 22px; overflow: visible; pointer-events: none; }
.journey__road path { fill: none; stroke-linecap: round; }
.journey__road-base { stroke: rgba(11,11,13,.28); stroke-width: 1.5; stroke-dasharray: 2 7; }
.journey__road-ink { stroke: var(--pen); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--jp, 0)); }
.journey__stops { list-style: none; margin: 0; padding: 0; }
.jstop { position: relative; }
.jstop__no { font: italic 400 2.6rem/1 var(--f-display); color: var(--pink); display: block; margin-bottom: 6px; }
.jstop__txt h3 { font: 400 clamp(1.25rem, 1.05rem + .6vw, 1.55rem)/1.15 var(--f-display); letter-spacing: -.01em; margin-bottom: 8px; }
.jstop__txt p { font: 400 .88rem/1.6 var(--f-type); color: #3a3530; margin: 0; max-width: 30ch; }
.jstop__mark { display: flex; align-items: center; gap: 12px; }
.jstop__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--news); border: 2px solid var(--ink); flex: none; transition: background .4s, transform .5s var(--spring); }
.jstop.is-on .jstop__dot { background: var(--pink); border-color: var(--pink); transform: scale(1.25); }
.jstop__when { font: 400 .72rem/1 var(--f-strip); letter-spacing: .14em; text-transform: uppercase; background: #fffefa; padding: 6px 9px 5px; box-shadow: 0 1px 1px rgba(40,30,10,.12); rotate: -2deg; }
.jstop .polaroid { --pw: clamp(170px, 26vh, 230px); }
.qcard { width: 100%; height: 100%; background: var(--blush) var(--grain); display: grid; align-content: center; gap: 8px; padding: 14px 16px; }
.qcard span { font: 400 clamp(.95rem, .8rem + .5vw, 1.15rem)/1 var(--f-hand); color: var(--ink); border-bottom: 1px solid rgba(217,19,79,.3); padding-bottom: 6px; }
.qcard span:nth-child(2) { color: var(--pen); }
.jstop__endcard { display: grid; gap: 18px; justify-items: start; }
.journey__bar { height: 2px; background: rgba(11,11,13,.1); margin-top: 28px; position: relative; z-index: 2; }
.journey__bar i { display: block; height: 100%; background: var(--pink); transform-origin: left; transform: scaleX(var(--jp, 0)); }

/* desktop: pinned + sideways */
@media (min-width: 900px) {
  .journey__view { overflow: visible; }
  .journey__track { display: inline-block; padding: 0 var(--gutter) 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); will-change: transform; }
  .journey__stops { display: flex; gap: clamp(40px, 5vw, 80px); height: clamp(500px, calc(100vh - 300px), 620px); }
  .jstop { flex: none; width: 300px; display: grid; grid-template-rows: 1fr auto 1fr; gap: 22px; }
  .jstop__pic, .jstop__txt { display: flex; }
  .jstop--up .jstop__pic { grid-row: 1; align-items: flex-end; }
  .jstop--up .jstop__mark { grid-row: 2; }
  .jstop--up .jstop__txt { grid-row: 3; flex-direction: column; justify-content: flex-start; }
  .jstop--down .jstop__txt { grid-row: 1; flex-direction: column; justify-content: flex-end; }
  .jstop--down .jstop__mark { grid-row: 2; }
  .jstop--down .jstop__pic { grid-row: 3; align-items: flex-start; }
  .jstop--end { width: 340px; display: flex; align-items: center; padding-left: 20px; }
  .journey__road { top: 50%; margin-top: -11px; }
  .journey.is-h { padding-block: 0; }
  .journey.is-h .journey__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h); }
  .journey:not(.is-h) .journey__view { overflow-x: auto; }
  html.motion .journey.is-h .jstop .polaroid, html.motion .journey.is-h .jstop__txt { transition: opacity .7s var(--ease), translate .8s var(--ease), rotate .6s var(--spring); }
  html.motion .journey.is-h .jstop:not(.is-on) .polaroid { opacity: .35; translate: 0 18px; }
  html.motion .journey.is-h .jstop:not(.is-on) .jstop__txt { opacity: .35; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .jstop .polaroid { --pw: 170px; }
  .journey__head h2 { font-size: 2.2rem !important; }
  .journey__view { margin-top: 18px; }
}
/* tablet + phone: vertical journey along a pen line */
@media (max-width: 899px) {
  .journey__head { grid-template-columns: 1fr auto; }
  .journey__hint { display: none; }
  .journey__road { display: none; }
  .journey__stops { position: relative; display: grid; gap: 54px; padding-left: 34px; }
  .journey__stops::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 40px; border-left: 2px dotted rgba(11,11,13,.3); }
  .journey__stops::after { content: ""; position: absolute; left: 6px; top: 8px; width: 4px; height: calc((100% - 48px) * var(--jp, 0)); background: var(--pen); border-radius: 2px; }
  .jstop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .jstop__mark { order: -1; margin-left: -34px; }
  .jstop__pic { order: 0; }
  .jstop__txt { order: 1; }
  .jstop .polaroid { --pw: min(220px, 62vw); }
  .jstop--down .jstop__pic { justify-self: end; margin-right: 8px; }
  .jstop--end { padding-top: 6px; }
  .journey__bar { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .jstop { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 34px; }
  .jstop__mark { grid-column: 1 / -1; }
  .jstop--down .jstop__pic { order: 2; justify-self: auto; }
}

/* responsive: about + B.A.B.E. */
@media (max-width: 1080px) {
  .babe2__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .zine__grid { grid-template-columns: minmax(0, 1fr); }
  .zine__board { max-width: 560px; }
}
@media (max-width: 640px) {
  .sbghost { font-size: 44vw; top: 10px; }
  .zine__mast span:first-child, .zine__mast span:last-child { font-size: .62rem; letter-spacing: .14em; }
  .zine__h { font-size: clamp(1.9rem, 8.4vw, 2.4rem) !important; }
  .clip__paper { columns: 1; }
  .zine__board { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .zine__pol { --pw: 210px; grid-column: 1; justify-self: start; margin-left: 10px; }
  .zine__not { grid-column: 1; grid-row: auto; margin-top: 0; justify-self: end; max-width: 270px; margin-right: 6px; }
  .strips .strip { margin-left: calc(var(--n) * 8px); white-space: normal; line-height: 1.3; }
  .zine__depth { position: absolute; top: 40px; bottom: auto; right: 6px; }
  .babe2__notes { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 0 10px; }
  .babe2__notes > li:nth-child(even) { margin-top: 0; margin-left: 18px; }
  .babe2__notes > li:nth-child(odd) { margin-right: 18px; }
  .babe2__notes .sbnote__paper { min-height: 0; }
  .babe2__l { font-size: 4rem; }
  .babe2__head h2, .journey__head h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid, .sbnote, .strip { transition: none; }
}
/* v17.1 · handwriting = Harlow (accent only) */
.pen, .polaroid figcaption, .qcard span, .babe2__tag, .strips__label, .zine__depth p { font-family: var(--f-script); }
.pen { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.65rem); }
.zine__board { padding-bottom: 60px; }
.zine__depth { bottom: -64px; right: 0; }
.babe2__foot { position: relative; z-index: 2; }
@media (max-width: 640px) { .zine__board { padding-bottom: 0; } .zine__depth { bottom: auto; } }
.journey__road--ink path { stroke: var(--pen); stroke-width: 2.4; }
.journey__road--ink { clip-path: inset(-10px calc((1 - var(--jink, var(--jp, 0))) * 100%) -10px 0); }
@media (min-width: 900px) { .journey__road { width: calc(100% - 380px); } }
@media (max-width: 899px) { .journey__view { padding-inline: var(--gutter); } .journey__stops { padding-left: 38px; } .jstop__mark { margin-left: -38px; } .journey__stops::before { left: 7px; } .journey__stops::after { left: 6px; } }
.xout li { white-space: nowrap; font-size: .88rem; }

/* ==========================================================================
   v18 · the whole site in the scrapbook / newsprint language
   Palette rhythm: hero powder · reels cream · beliefs blush · about kraft · B.A.B.E. lavender
   · journey newsprint · booking sage · letters kraft · finale butter · footer ink
   ========================================================================== */
body { background-color: var(--news); }

/* header: a newspaper rule, typewriter nav */
.site-header { background: color-mix(in srgb, var(--news) 92%, transparent); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--ink), 0 4px 0 -1px var(--news), 0 5px 0 -1px rgba(11,11,13,.5); }
.nav > a:not(.btn) { font: 400 .78rem/1 var(--f-strip); letter-spacing: .14em; text-transform: uppercase; }
.nav > a:not(.btn)::after { background: none; height: 2px; bottom: 0; background-color: var(--pen); transform: scaleX(0) rotate(-1.5deg); }
.nav > a:not(.btn):hover::after { transform: scaleX(1) rotate(-1.5deg); }
.menu-btn { background: #fffefa; font-family: var(--f-strip); letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; border-width: 1.5px; border-radius: 3px; }
.btn--pink { border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); }
.btn--pink:hover { box-shadow: 5px 5px 0 var(--ink); }
.btn--line { border-radius: 4px; }
.more { font-family: var(--f-strip); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1.5px solid var(--pen); }
.ticks li { font-family: var(--f-type); font-size: .9rem; -webkit-text-stroke: 0; }
.ticks li::before { width: 14px; height: 14px; border-radius: 2px; background: transparent; border: 1.5px solid currentColor; box-shadow: inset 0 0 0 0 var(--pen); }
.tw-label--live::before { display: none; }
.pen-arrow.down { transform: rotate(80deg); }

/* ---------- hero: the front page ---------- */
.hero { background: var(--powder) var(--grain); overflow: hidden; isolation: isolate; padding-top: clamp(18px, 2.4vw, 32px); }
.hero > .wrap { position: relative; z-index: 1; }
.hero__ghost { top: auto; bottom: -3vw; right: -3vw; color: rgba(255,255,255,.5); }
.hero__mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 8px 0 7px; margin-bottom: clamp(26px, 4vw, 52px); font: 400 .68rem/1 var(--f-strip); letter-spacing: .18em; text-transform: uppercase; color: rgba(11,11,13,.72); }
.hero__mast-t { font: italic 400 1.05rem/1 var(--f-display); letter-spacing: .02em; text-transform: none; color: var(--ink); }
.hero .lede { font-family: var(--f-type); font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 1.7; color: #26303a; }
.hero .lede .marker { background: none; border-bottom: 1.5px solid var(--pen); }
.hero h1 .brush { padding: 0 .12em .04em; }
.hero h1 .pk .brush .w > span, .hero h1 .pk .brush { color: var(--pink); }
.slotlive { background: #fffefa var(--grain); padding: 10px 16px 9px; rotate: -1deg; box-shadow: 0 1px 1px rgba(40,30,10,.1), 0 8px 12px -10px rgba(40,30,10,.5); font: 400 .74rem/1 var(--f-strip) !important; letter-spacing: .1em; text-transform: uppercase; }
.slotlive__seats i.is-taken { background: rgba(11,11,13,.18); }
.slotlive__when { border-left-color: rgba(11,11,13,.2); }
.hero__bill .bill { box-shadow: 0 1px 1px rgba(40,30,10,.1), 0 30px 40px -24px rgba(20,48,74,.55); }
.hero__pen { position: absolute; left: max(0px, calc(50% - 300px)); top: 2px; z-index: 4; rotate: -6deg; }
.hero__pen .pen-arrow { transform: rotate(40deg); }
.hero__note2 { position: absolute; right: max(-6px, calc(50% - 290px)); bottom: 6px; z-index: 5; width: 170px; text-decoration: none; color: var(--ink); }
.hero__note2 .sbnote__paper { display: block; padding: 22px 18px 24px; font: 400 1.3rem/1.1 var(--f-script); }
.hero__note.table__note { display: none !important; }

/* ---------- reels: polaroids on cream ---------- */
.reels-sec { background: var(--news) var(--grain); isolation: isolate; }
.reels__ghost { top: 30px; right: -2vw; color: rgba(11,11,13,.035); }
.reels-head .tw-label { margin-bottom: 14px; }
.reels { padding-top: 18px; }
.igreel { position: relative; background: #fffefa; padding: 10px 10px 16px; rotate: var(--rr, -1.2deg); box-shadow: 0 1px 1px rgba(40,30,10,.08), 0 22px 34px -22px rgba(40,30,10,.55); transition: rotate .6s var(--spring), translate .6s var(--spring); gap: 12px; }
.igreel:nth-child(2n) { --rr: 1.4deg; }
.igreel:nth-child(3n) { --rr: -.6deg; }
.igreel::before { content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 88px; height: 24px; margin-left: -44px; rotate: -4deg; background: rgba(255,250,235,.7); box-shadow: 0 1px 2px rgba(0,0,0,.06); clip-path: polygon(0 8%, 6% 0, 12% 8%, 100% 0, 96% 30%, 100% 60%, 97% 100%, 0 100%, 4% 70%, 0 40%); }
.igreel:hover { rotate: 0deg; translate: 0 -6px; }
.igreel__frame, .igreel:hover .igreel__frame { border-radius: 2px; box-shadow: none; transform: none; }
.igreel figcaption { padding: 0 2px; }
.igreel figcaption b { font: 400 1.35rem/1.05 var(--f-script); }
.igreel figcaption span:not(.igreel__no) { font-family: var(--f-type); font-size: .78rem; }
.igreel__no { font-family: var(--f-strip); }
.igreel figcaption a { font-family: var(--f-strip); letter-spacing: .1em; }
.reel__cover { background: var(--blush) var(--grain); }
.igreel:nth-child(4n+2) .reel__cover { background-color: var(--powder); }
.igreel:nth-child(4n+3) .reel__cover { background-color: var(--sage); }
.igreel:nth-child(4n) .reel__cover { background-color: var(--lav); }
.reel__cover::after { display: none; }
.reel__title { color: var(--ink); }
.reels-track { background: rgba(11,11,13,.1); }
.reels-btn { border-radius: 4px; }
.reels-foot { display: flex; align-items: center; gap: 24px; }
.reels__pen { margin-left: auto; }

/* ---------- beliefs: ink on blush paper ---------- */
.pin { background: var(--blush); }
.pin__inner { background: var(--blush) var(--grain); color: var(--ink); border-radius: 0; margin-inline: 0; height: 100vh; isolation: isolate; }
.pin__glow { display: none; }
.pin__ghost2 { display: block; top: auto; bottom: -2vw; right: -2vw; color: rgba(255,255,255,.6); }
.pin__label { position: relative; z-index: 1; margin-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); margin-bottom: clamp(20px, 3vw, 34px); }
.pin__text { color: var(--ink); }
html.motion .hl .w:not(.lit) { opacity: .16; }
.pin__text em { color: var(--pen); position: relative; display: inline-block; }
.pin__text em::after { content: ""; position: absolute; left: -16%; right: -12%; top: -14%; bottom: -10%; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M30 20C80 0 170 6 188 40s-40 56-110 52S6 70 14 44 70 8 120 12' fill='none' stroke='%23d9134f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pin__foot { color: #4a3a42 !important; font-family: var(--f-type) !important; font-size: clamp(.95rem, .9rem + .25vw, 1.08rem) !important; }
.pin__bar { background: rgba(11,11,13,.12); }
.pin__bar span { background: var(--pen); }

/* ---------- booking: sage desk ---------- */
.book-solo { background: var(--sage) var(--grain); color: var(--ink); isolation: isolate; }
.book-solo::before { display: none; }
.book-solo__head .lede { color: #34402f; font-family: var(--f-type); font-size: 1rem; line-height: 1.7; }
.book-solo__head .ticks { color: var(--ink); }
.book-solo__head .muted { color: #55604f; font-family: var(--f-type); font-size: .85rem; }
.book-solo__head .muted a { color: var(--ink); text-decoration-color: var(--pen); }
.book-solo__head .tw-label { margin-bottom: 0; }
.book-solo__desk { position: relative; width: 100%; max-width: 680px; display: grid; justify-items: center; }
.book-solo form { box-shadow: 0 1px 1px rgba(40,30,10,.1), 0 40px 60px -36px rgba(30,40,20,.55); border-radius: 2px; rotate: -.5deg; }
.book__pol { position: absolute; --pw: 190px; left: -230px; top: 60px; z-index: 0; }
.book__note { position: absolute; right: -210px; top: 220px; width: 180px; z-index: 0; }
.book__note p { margin: 0; font: 400 1.3rem/1.1 var(--f-script); }
.book__note .sbnote__paper { padding: 22px 18px 24px; }
.book__pen { justify-self: start; margin: 0 0 12px 10px; }
@media (max-width: 1180px) { .book__pol, .book__note { display: none; } }

/* ---------- letters: inland card on kraft ---------- */
.inland-wrap { background: var(--kraft) var(--grain); overflow: hidden; isolation: isolate; }
.inland-wrap > .wrap { position: relative; z-index: 1; display: grid; justify-items: center; }
.inland__ghost { top: 20px; left: -2vw; color: rgba(255,255,255,.45); }
.inland__pen { justify-self: start; margin: 0 0 10px max(0px, calc(50% - 500px)); }
.inland { width: 100%; }
.inland .sbtape { top: -12px; left: 8%; margin: 0; }
.inland .sbtape--r { left: auto; right: 8%; }
.inland__msg { font-family: var(--f-type); font-size: .95rem; line-height: 1.7; }
.inland__top { font-family: var(--f-strip); }

/* ---------- finale: butter paper, taped polaroids ---------- */
.finale { background: var(--butter) var(--grain); color: var(--ink); }
.finale::before { display: none; }
.finale__ghost { top: 50%; left: 50%; translate: -50% -50%; right: auto; color: rgba(255,255,255,.6); }
.finale .tw-label { margin-bottom: 6px; }
.finale h2 { color: var(--ink); }
.finale .pen { rotate: -3deg; margin-top: 14px; }
.finale p:not(.pen):not(.tw-label) { color: #4a4434; font-family: var(--f-type); font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); }
.finale .btn--line { color: var(--ink); border-color: var(--ink); }
.finale .btn--line:hover { background: var(--ink); color: var(--news); }
.finale__prints .print { background: #fffefa; padding: 9px 9px 34px; opacity: 1; overflow: visible; }
.finale__prints .print > svg { display: block; width: 100%; aspect-ratio: 1; }
.finale__prints .print .sbtape { width: 70px; margin-left: -35px; top: -11px; }

/* ---------- footer: ink, newspaper colophon ---------- */
.site-footer { border-top: 6px double var(--ink); }
.footer-col h4 { font-family: var(--f-strip); color: var(--pink); }
.footer-col .contact-line small, .footer-bottom { font-family: var(--f-strip); letter-spacing: .1em; }
.footer-brand p { font-family: var(--f-type); font-size: .88rem; line-height: 1.7; }

/* ---------- 404 ---------- */
.page-404 { background: var(--powder) var(--grain); overflow: hidden; isolation: isolate; min-height: 60vh; display: grid; align-items: center; }
.page-404 > .wrap { position: relative; z-index: 1; }
.page-404 .sbghost { color: rgba(255,255,255,.5); }
.page-404 .pen { margin-top: 10px; }
.page-404 .lede { font-family: var(--f-type); }

/* responsive */
@media (max-width: 900px) {
  .hero__mast span:first-child { display: none; }
  .hero__mast { justify-content: space-between; }
  .reels__pen { display: none; }
}
@media (max-width: 640px) {
  .hero__mast { font-size: .58rem; letter-spacing: .1em; }
  .hero__mast-t { font-size: .92rem; }
  .hero__pen { top: -4px; left: 0; font-size: 1.1rem; }
  .hero__note2 { width: 140px; bottom: 0; right: -4px; }
  .hero__note2 .sbnote__paper { font-size: 1.1rem; padding: 18px 14px 20px; }
  .slotlive { white-space: normal !important; flex-wrap: wrap !important; line-height: 1.5 !important; }
  .pin__label { margin-left: var(--gutter); }
  .finale__prints .print { width: 84px; }
  .inland__pen { margin-left: 0; }
  .book__pen { margin-left: 0; }
}
/* v18.1 fixes */
.finale > .wrap { position: relative; z-index: 1; }
.finale .pen { font: 400 clamp(1.25rem, 1.05rem + .6vw, 1.65rem)/1.1 var(--f-script) !important; color: var(--pen) !important; margin: 14px auto 0 !important; }
.finale .tw-label { font: 400 .78rem/1 var(--f-strip) !important; color: var(--ink) !important; letter-spacing: .22em !important; margin: 0 auto 6px !important; }
h2 .pk .brush, h2 .pk .brush .w > span, h1 .pk .brush .w > span { color: var(--pink); }
.ticks li::before { content: "✓"; display: grid; place-items: center; font: 700 .8rem/1 var(--f-type); color: var(--pen); background-image: none; }
.hero__pen { top: auto; bottom: -4px; left: max(0px, calc(50% - 250px)); rotate: -4deg; }
.hero__pen .pen-arrow { transform: rotate(-70deg); }
.hero__note2 { bottom: -34px; right: max(-10px, calc(50% - 300px)); }
.hero__bill { padding-bottom: 70px; }
@media (max-width: 640px) { .hero__pen { bottom: 0; left: 4px; } .hero__note2 { bottom: -20px; } }
@media (max-width: 640px) {
  .book-solo form.notebook { padding-left: 34px !important; background-image: linear-gradient(90deg, transparent 22px, rgba(230,0,126,.45) 22px 24px, transparent 24px), repeating-linear-gradient(180deg, transparent 0 31px, #d7dde6 31px 32px); }
  .book-solo form.notebook::after { display: none; }
  .book-solo form { rotate: 0deg; }
}
.menu-btn { min-height: 44px; }

/* ==========================================================================
   v19 · BRAND LOCK (from the Business Babe brand deck)
   Colours: Business Pink · Deep Black · Warm White/Cream · Bold Yellow (occasional)
   The pastel feel comes ONLY from tints of those four: blush (pink), cream, butter (yellow).
   Type: Playfair Display = headlines/titles · Georgia = sub-heads, quotes, intros
         · Garet = body, nav, UI, labels · Harlow Solid = one-word emphasis only
   ========================================================================== */
:root {
  --pink: #e6007e; --pink-text: #c9006d; --ink: #0b0b0d; --ink-2: #2a282d; --yellow: #f6d80e;
  --cream: #fbfaf3; --cream-2: #f4f0e4; --paper-card: #fffdf7;
  --blush: #fde8f2; --blush-2: #fad3e6; --butter: #fdf6cf;
  --pen: var(--pink);
  --kraft: var(--cream-2); --news: var(--cream); --lav: var(--blush-2); --powder: var(--cream-2); --sage: var(--blush);
  --body-ink: rgba(11,11,13,.78);
}

/* ---------- colours: sections ---------- */
body { background-color: var(--cream); }
.site-header { background: color-mix(in srgb, var(--cream) 94%, transparent); }
.hero { background-color: var(--cream); }
.reels-sec { background-color: var(--cream-2); }
.pin, .pin__inner { background-color: var(--blush); }
.zine { background-color: var(--cream-2); }
.zine::before { opacity: 0; }
.babe2 { background-color: var(--blush-2); }
.journey { background-color: var(--cream); }
.book-solo { background-color: var(--blush); }
.inland-wrap { background-color: var(--cream-2); }
.finale { background-color: var(--butter); }
.page-404 { background-color: var(--blush); }
/* ghost words: pink on cream, white on pink/butter */
.hero__ghost, .reels__ghost, .zine .sbghost, .inland__ghost { color: rgba(230,0,126,.06) !important; }
.pin__ghost2, .babe2 .sbghost, .finale__ghost, .page-404 .sbghost { color: rgba(255,255,255,.6) !important; }
/* paper objects */
.sbnote--lav { --bg: var(--blush-2); } .sbnote--blush { --bg: var(--blush); } .sbnote--powder { --bg: var(--paper-card); } .sbnote--butter { --bg: var(--butter); } .sbnote--sage { --bg: var(--cream-2); }
.babe2 .sbnote--blush { --bg: var(--blush); }
.zine__not { --bg: var(--blush); }
.book__note { --bg: var(--paper-card); }
.clip__paper { background-color: var(--paper-card); }
.reel__cover, .igreel:nth-child(4n+2) .reel__cover, .igreel:nth-child(4n+3) .reel__cover, .igreel:nth-child(4n) .reel__cover { background-color: var(--blush); }
.igreel:nth-child(2n) .reel__cover { background-color: var(--cream-2); }
.slotlive, .strip, .polaroid, .igreel, .jstop__when { background-color: var(--paper-card); }
.slotlive__text, .hero .lede, .ticks li { color: var(--ink-2); }
.xout li::after { background: var(--pink); }
.journey__road-ink path, .journey__road--ink path { stroke: var(--pink); }
.journey__stops::after { background: var(--pink); }
.pin__bar span { background: var(--pink); }
.pin__text em::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M30 20C80 0 170 6 188 40s-40 56-110 52S6 70 14 44 70 8 120 12' fill='none' stroke='%23e6007e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.nav > a:not(.btn)::after { background-color: var(--pink); }
/* booking section text (form itself untouched) */
.book-solo__head .muted { color: rgba(11,11,13,.62); }
/* newsletter: the inland card in Business Pink tints instead of blue */
.inland { background: var(--paper-card) var(--grain); color: var(--ink); box-shadow: 0 1px 1px rgba(11,11,13,.08), 0 30px 50px -30px rgba(11,11,13,.4); }
.inland__top { color: rgba(11,11,13,.6); border-color: rgba(230,0,126,.35); }
.inland__dots { border-color: rgba(230,0,126,.4) !important; }
.inland .addr label, .inland__postmark, .pin-boxes span { color: rgba(11,11,13,.62) !important; }
.inland__postmark { border-color: rgba(11,11,13,.35) !important; }
.pin-boxes i { border-color: rgba(11,11,13,.3) !important; color: var(--ink) !important; }
.inland .nl-form input[type="email"] { border-bottom-color: var(--ink); background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(11,11,13,.14) 34px 35px); }
.inland .form-note { color: rgba(11,11,13,.55); }
.inland__fold { color: rgba(11,11,13,.45); border-color: rgba(230,0,126,.35) !important; }
.inland__sign { color: var(--pink-text); }
.inland__right { border-color: rgba(230,0,126,.3) !important; }
/* footer stays Deep Black */
.footer-brand p { color: rgba(251,250,243,.62); }
.footer-col .contact-line small, .footer-bottom { color: rgba(251,250,243,.5); }
.clip__paper p:first-child::first-letter { font: inherit; float: none; padding: 0; color: inherit; }

/* ==========================================================================
   v22 · newspaper flow — nameplate, datelines, section flags, bylines
   Fonts back to the scrapbook set (Playfair · Courier Prime · Special Elite · Harlow · Garet UI)
   Colours: brand tints only (cream, blush, butter) — no black/yellow blocks
   ========================================================================== */
/* front-page nameplate */
.hero__mast { display: none; }
.np-head { position: relative; z-index: 2; margin-bottom: clamp(26px, 4vw, 48px); }
.np-ears { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 3vw, 40px); padding-bottom: clamp(10px, 1.6vw, 18px); }
.np-name { margin: 0; text-align: center; font: 400 clamp(2.1rem, .9rem + 5.4vw, 6.2rem)/.95 var(--f-display); letter-spacing: -.025em; color: var(--ink); white-space: nowrap; }
.np-name small { font-size: .42em; font-style: italic; vertical-align: .55em; letter-spacing: 0; margin-right: .1em; }
.np-name em { color: var(--pink); }
.np-ear { justify-self: start; max-width: 150px; border: 1px solid var(--ink); padding: 8px 10px; font: 400 .68rem/1.35 var(--f-strip); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.np-ear--r { justify-self: end; }
.np-dateline { display: flex; justify-content: space-between; gap: 14px; border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); padding: 8px 0 7px; font: 400 .7rem/1.2 var(--f-strip); letter-spacing: .16em; text-transform: uppercase; color: rgba(11,11,13,.78); }
.np-kicker { font: 400 .74rem/1 var(--f-strip); letter-spacing: .2em; text-transform: uppercase; color: var(--pink-text); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(11,11,13,.25); display: inline-block; }
.np-lead { position: relative; }
.hero__grid { column-gap: clamp(36px, 5vw, 72px); }
@media (min-width: 960px) { .hero__grid > .np-lead { padding-right: clamp(20px, 3vw, 44px); border-right: 1px solid rgba(11,11,13,.2); } }
.np-ad { font: 400 .7rem/1 var(--f-strip); letter-spacing: .22em; text-transform: uppercase; color: rgba(11,11,13,.6); text-align: center; margin: 0 0 12px; }

/* section flags: thick + thin rules, section / title / page */
.np-flag { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 9px 0 8px; margin-bottom: clamp(34px, 5vw, 60px); font: 400 .7rem/1 var(--f-strip); letter-spacing: .18em; text-transform: uppercase; color: rgba(11,11,13,.72); }
.np-flag::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; border-bottom: 1px solid var(--ink); }
.np-flag b { font: italic 400 clamp(1.05rem, .95rem + .45vw, 1.35rem)/1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.np-flag span:last-child { text-align: right; }
.pin .np-flag, .pin .np-flag b { color: var(--ink); }
.pin__flagwrap { position: relative; z-index: 1; width: 100%; }
.journey .np-flag { margin-bottom: 26px; }
.finale__flag { position: relative; z-index: 1; margin-bottom: 10px; }
.finale__flag .np-flag { margin-bottom: 30px; }
.book-solo > .wrap:first-child { position: relative; z-index: 1; }

/* bylines */
.np-byline { font: italic 400 .95rem/1.3 var(--f-body); color: rgba(11,11,13,.65); margin: 14px 0 0; }
.np-byline::before { content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; }

/* the clipping: dateline + drop cap on the lead */
.clip__dl { column-span: all; font: 400 .7rem/1.2 var(--f-strip) !important; letter-spacing: .18em !important; text-transform: uppercase; color: rgba(11,11,13,.6); border-bottom: 1px solid rgba(11,11,13,.18); padding-bottom: 10px; margin: 0 0 14px !important; }
.clip__paper .clip__lead::first-letter { font: 400 3.2em/.8 var(--f-display) !important; float: left !important; padding: 5px 7px 0 0 !important; color: var(--pink) !important; }

/* newspaper paper: every page on cream newsprint; pastel pages only where they carry meaning */
.hero, .journey { background-color: var(--cream); }
.reels-sec, .zine, .inland-wrap { background-color: var(--cream-2); }
.pin, .pin__inner, .book-solo, .page-404 { background-color: var(--blush); }
.babe2 { background-color: var(--blush-2); }
.finale { background-color: var(--butter); }
.hero::after, .reels-sec::after, .zine::after, .journey::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(11,11,13,.035) calc(25% - 1px) 25%); }
.journey::before { z-index: 0; }

@media (max-width: 760px) {
  .np-ears { grid-template-columns: 1fr; }
  .np-ear { display: none; }
  .np-name { font-size: clamp(1.7rem, 9vw, 2.6rem); white-space: normal; }
  .np-dateline { flex-wrap: wrap; justify-content: center; text-align: center; font-size: .6rem; letter-spacing: .1em; }
  .np-dateline span:first-child, .np-dateline span:last-child { display: none; }
  .np-flag { grid-template-columns: auto 1fr; font-size: .6rem; letter-spacing: .12em; }
  .np-flag b { grid-column: 1 / -1; grid-row: 1; text-align: left; font-size: 1.05rem; }
  .np-flag span:last-child { text-align: right; }
}
.inland-wrap .np-flag, .finale__flag .np-flag { width: 100%; justify-self: stretch; }
.finale__flag { width: 100%; }
.zine__mast, .finale .tw-label { display: none !important; }
@media (max-width: 1000px) { .np-ear { display: none; } .np-ears { grid-template-columns: 1fr; } .np-name { font-size: clamp(1.7rem, 7.6vw, 4.6rem); } }

/* v22.1 · slim header — the nameplate does the branding now */
:root { --header-h: 52px; }
.site-header .wrap { min-height: var(--header-h); }
.site-header .logo--img img { height: 30px !important; }
.nav { gap: clamp(10px, 1.6vw, 24px); }
.nav > a:not(.btn) { font-size: .66rem; letter-spacing: .14em; padding-block: 4px; }
.site-header .nav .btn { min-height: 32px; padding: 6px 14px; font-size: .72rem; letter-spacing: .06em; box-shadow: 2px 2px 0 var(--ink); }
.menu-btn { min-height: 36px; padding: 6px 12px; }
@media (max-width: 420px) { .site-header .logo--img img { height: 28px !important; } }

/* ==========================================================================
   v23 · QA fixes (responsive)
   ========================================================================== */
/* 1 · How it works on short laptop screens */
@media (min-width: 900px) and (max-height: 720px) {
  .journey .np-flag { margin-bottom: 12px; padding-block: 6px 5px; }
  .journey__head { gap: 6px 24px; }
  .journey__head h2 { font-size: 1.9rem !important; }
  .journey__hint { display: none; }
  .journey__view { margin-top: 10px; }
  .journey__stops { height: max(360px, calc(100vh - 220px)); }
  .jstop { gap: 12px; }
  .jstop .polaroid { --pw: clamp(118px, calc((100vh - 260px) / 2.1), 160px); }
  .jstop .polaroid figcaption { padding: 8px 4px 10px; font-size: 1rem; }
  .jstop__no { font-size: 1.8rem; margin-bottom: 2px; }
  .jstop__txt h3 { font-size: 1.15rem; margin-bottom: 4px; }
  .jstop__txt p { font-size: .8rem; line-height: 1.5; }
  .journey__bar { margin-top: 12px; }
}
/* 2 + 3 · phones held sideways: beliefs not pinned, all words shown; no bottom bar */
@media (max-height: 500px) and (max-width: 1000px) {
  .pin { height: auto !important; }
  .pin__inner { position: relative !important; height: auto !important; padding: 56px 0 64px; }
  html.motion .pin .hl .w:not(.lit) { opacity: 1; transform: none; }
  .pin__bar { display: none; }
  .pin__text { font-size: clamp(1.6rem, 4.6vw, 2.4rem) !important; }
  .sticky-cta { display: none !important; }
}
/* 4 · keep the hero button above the fold on laptop screens */
@media (min-width: 960px) and (max-height: 860px) {
  .hero { padding-top: 14px; }
  .np-head { margin-bottom: 22px; }
  .np-ears { padding-bottom: 8px; }
  .np-name { font-size: clamp(2.4rem, 1rem + 3.8vw, 4.4rem); }
  .np-ear { padding: 6px 9px; }
  .np-kicker { margin-bottom: 10px; padding-bottom: 7px; }
  .slotlive { margin-bottom: 16px !important; }
  .hero h1[data-fit] { --fit-max: 74; }
  .hero .lede { margin-top: 14px; line-height: 1.6; }
  .hero .btn-row { margin-top: 20px; }
  .hero__bill { padding-top: 0; }
  .hero__bill .bill { width: min(400px, 100%); }
}
@media (min-width: 960px) and (max-height: 680px) {
  .hero h1[data-fit] { --fit-max: 62; }
  .np-name { font-size: clamp(2.2rem, .8rem + 3.2vw, 3.6rem); }
  .hero .lede { font-size: .92rem; }
}
/* 5 + 6 · minimum readable sizes */
.np-dateline { font-size: max(.68rem, 11px) !important; }
.bill__tear { font-size: max(.7rem, 11px) !important; line-height: 1.35; }
.np-ear { font-size: .76rem; }
/* 7 · comfortable tap targets */
.hero .btn-row .more, .reels-foot .more { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; border-bottom: 0; background: linear-gradient(var(--pen), var(--pen)) left calc(50% + .85em) / 100% 1.5px no-repeat; }
.site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
/* 8 · no repeated labels under the section bars */
.journey__head .tw-label, .babe2__head .tw-label { display: none; }
/* 10 · small phones: one tidy line for the slots strip */
@media (max-width: 400px) {
  .slotlive { flex-wrap: nowrap !important; white-space: nowrap !important; gap: 8px !important; }
  .slotlive__seats { display: none !important; }
}

/* v24 · preloader: "hello" in nine languages, then the mark */
html.intro-run { --intro-delay: 3.3s; }
html.intro-run .intro { background: var(--cream) var(--grain); color: var(--ink); animation: introOut .55s var(--ease) 3.1s forwards; pointer-events: auto; cursor: pointer; }
.intro::after { animation-delay: 2.45s; background: var(--blush); }
.intro__hellos { position: absolute; inset: 0; display: grid; place-items: center; }
.intro__hellos span {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: 14px; opacity: 0;
  font: 400 clamp(2.6rem, 1.4rem + 6vw, 6rem)/1.15 "Playfair Display", "Noto Serif Kannada", "Noto Sans Kannada", "Tunga", "Noto Serif Tamil", "Noto Sans Tamil", "Latha", "Noto Serif Malayalam", "Noto Sans Malayalam", "Kartika", "Noto Serif Thai", "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif Devanagari", "Kohinoor Devanagari", "Nirmala UI", serif;
  color: var(--ink); letter-spacing: -.01em; text-align: center; padding: 0 16px;
  animation: hello .27s linear calc(var(--k) * .27s) both;
}
.intro__hellos span:first-child { color: var(--pink); }
.intro__hellos small { font: 400 .72rem/1 var(--f-strip); letter-spacing: .24em; text-transform: uppercase; color: rgba(11,11,13,.55); }
@keyframes hello { 0% { opacity: 0; transform: translateY(10px); } 18% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.intro__in { opacity: 0; animation: introMark .5s var(--ease) 2.45s forwards; }
.intro__in img { animation: introB .7s var(--spring) 2.45s both; }
.intro__in p { animation: introT .5s var(--ease) 2.7s both; }
@keyframes introMark { to { opacity: 1; } }
.intro__skip { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); font: 400 .66rem/1 var(--f-strip); letter-spacing: .22em; text-transform: uppercase; color: rgba(11,11,13,.4); }
/* v24.1 · give Kannada (first) a longer beat */
html.intro-run { --intro-delay: 3.7s; }
html.intro-run .intro { animation: introOut .55s var(--ease) 3.45s forwards; }
.intro__hellos span { animation: hello .3s linear calc(.62s + (var(--k) - 1) * .3s) both; }
.intro__hellos span:first-child { animation: hello .7s linear .05s both; }
.intro::after { animation-delay: 2.8s; }
.intro__in { animation-delay: 2.8s; }
.intro__in img { animation-delay: 2.8s; }
.intro__in p { animation-delay: 3.02s; }

/* v25 · hero bill: no printer slot — a receipt taped onto the page */
.bill__slot { display: none !important; }
.hero__bill { padding-top: 8px !important; }
.np-ad { display: table; margin: 0 auto 22px; background: var(--paper-card, #fffdf7) var(--grain); padding: 8px 14px 7px; rotate: -1.5deg; box-shadow: 0 1px 1px rgba(40,30,10,.1), 0 8px 12px -10px rgba(40,30,10,.45); color: var(--ink); font-size: .7rem; }
.hero__bill .bill { overflow: visible; }
.bill__tape { top: -12px; left: 12%; margin: 0; width: 84px; rotate: -8deg; z-index: 6; }
.bill__tape--r { left: auto; right: 12%; rotate: 7deg; }
html.motion .hero__bill.is-printing .bill { animation: billDrop 1s var(--spring) both; }
@keyframes billDrop { from { opacity: 0; translate: 0 -28px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 520px) { .hero__bill { padding-top: 8px !important; } }
.bill__tape { background: rgba(230,0,126,.2); }

/* ==========================================================================
   v26 · hamburger menu on every screen — a newspaper "Contents" sheet
   (lives outside the header so the header's blur can't trap it)
   ========================================================================== */
.site-header .nav { display: none !important; }
.hdr-actions { display: flex; align-items: center; gap: 12px; }
.hdr-book { min-height: 36px !important; padding: 7px 16px !important; font-size: .72rem !important; letter-spacing: .06em; box-shadow: 2px 2px 0 var(--ink) !important; }
.menu-btn { display: inline-flex !important; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px 6px 14px !important; background: var(--paper-card, #fffdf7); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 4px; font: 400 .7rem/1 var(--f-strip); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 2; transition: background .2s, color .2s; }
.menu-btn:hover { background: var(--ink); color: var(--cream); }
.menu-btn i { position: relative; width: 20px; height: 14px; display: block; }
.menu-btn i::before, .menu-btn i::after { display: none !important; }
.menu-btn i b { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), opacity .2s, top .35s var(--ease); }
.menu-btn i b:nth-child(1) { top: 0; } .menu-btn i b:nth-child(2) { top: 6px; right: 5px; } .menu-btn i b:nth-child(3) { top: 12px; }
body.menu-open .menu-btn i b:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.menu-open .menu-btn i b:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn i b:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.bbmenu { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; }
body.menu-open .bbmenu { visibility: visible; pointer-events: auto; }
body.menu-open { overflow: hidden; }
.menu__scrim { position: absolute; inset: 0; background: rgba(11,11,13,.38); opacity: 0; transition: opacity .35s var(--ease); }
body.menu-open .menu__scrim { opacity: 1; }
.menu__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--cream) var(--grain); box-shadow: -20px 0 50px -20px rgba(11,11,13,.4); display: flex; flex-direction: column; padding: 18px clamp(20px, 4vw, 40px) calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; transform: translateX(100%); transition: transform .5s var(--ease); }
body.menu-open .menu__sheet { transform: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px double var(--ink); padding-bottom: 12px; }
.menu__title { margin: 0; font: italic 400 2rem/1 var(--f-display); color: var(--ink); }
.menu__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; font: 300 1.7rem/1 var(--f-ui); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, transform .3s var(--ease); }
.menu__close:hover { background: var(--ink); color: var(--cream); transform: rotate(90deg); }
.menu__dateline { margin: 10px 0 18px; font: 400 .66rem/1.4 var(--f-strip); letter-spacing: .18em; text-transform: uppercase; color: rgba(11,11,13,.6); }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { border-bottom: 1px solid rgba(11,11,13,.14); opacity: 0; transform: translateX(24px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 50ms + 120ms); }
body.menu-open .menu__list li { opacity: 1; transform: none; }
.menu__list a { display: flex; align-items: baseline; gap: 12px; padding: 16px 2px; min-height: 56px; text-decoration: none; color: var(--ink); }
.menu__no { font: 400 .68rem/1 var(--f-strip); color: var(--pink-text); letter-spacing: .1em; width: 22px; flex: none; }
.menu__label { font: 400 clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.01em; transition: color .2s; }
.menu__dots { flex: 1; border-bottom: 1.5px dotted rgba(11,11,13,.3); transform: translateY(-4px); min-width: 16px; }
.menu__pg { font: italic 400 .95rem/1 var(--f-display); color: rgba(11,11,13,.6); }
.menu__list a:hover .menu__label, .menu__list a:focus-visible .menu__label { color: var(--pink); font-style: italic; }
.menu__cta { margin-top: 26px; align-self: stretch; justify-content: center; }
.menu__foot { margin-top: auto; padding-top: 26px; display: grid; gap: 8px; font: 400 .78rem/1.4 var(--f-type); }
.menu__foot a { color: var(--ink); text-decoration-color: var(--pink); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .hdr-book { display: none !important; }
  .menu__sheet { width: 100%; box-shadow: none; }
}
@media (max-width: 360px) { .menu-btn__label { display: none; } .menu-btn { padding: 6px 10px !important; } }
@media (prefers-reduced-motion: reduce) { .menu__sheet, .menu__list li, .menu__scrim { transition: none; } }
.finale__prints .print:nth-child(1), .finale__prints .print:nth-child(2) { top: 28% !important; } .finale__prints .print:nth-child(3), .finale__prints .print:nth-child(4) { bottom: 6% !important; }
.finale__prints .print:nth-child(1), .finale__prints .print:nth-child(2) { top: 250px !important; } @media (max-width: 760px) { .finale__prints .print:nth-child(1), .finale__prints .print:nth-child(2) { top: 170px !important; } }

/* ==========================================================================
   v27 · cleanup round
   ========================================================================== */
/* bill note: the live offer line under the total */
.bill__note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(11,11,13,.2); font: 400 .82rem/1.5 var(--f-type); color: rgba(11,11,13,.75); text-align: center; }
.bill__left { display: block; font: italic 400 1.02rem/1.35 var(--f-display); color: var(--pink-text); margin-top: 4px; }
.bill__full { display: block; font: 400 .7rem/1.3 var(--f-strip); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.bill__full[hidden] { display: none; }
/* hero: lead column starts with the headline now */
.np-lead h1 { margin-top: 0; }
/* ghost words on the left */
.reels__ghost { right: auto !important; left: -2vw; }
.zine .sbghost { right: auto !important; left: -3vw; }
/* no leading dashes on labels / bylines */
.tw-label::before, .tw-label--live::before, .zine__not .tw-label::before, .np-byline::before { content: none !important; display: none !important; }
.tw-label { gap: 8px; }
/* section C: consistent top spacing like the other pages */
.pin__inner { align-content: start !important; padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px)) !important; }
.pin .np-flag { margin-bottom: clamp(26px, 4vw, 48px); }
/* reels on phones: one video at a time, centred, with breathing room */
@media (max-width: 700px) {
  .reels { padding: 22px var(--gutter) 10px !important; gap: 18px !important; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
  .reels:has(.igreel) { grid-auto-columns: min(calc(100vw - 2 * var(--gutter) - 4px), 360px) !important; }
  .reels > .igreel { scroll-snap-align: center; }
  .reels-head { margin-bottom: 8px; }
  .reels-foot { margin-top: 18px; justify-content: space-between; }
}
.bill__total { position: relative; }
.hero__bill .bill__total .bill__stamp, .bill__total .bill__stamp { position: absolute; left: 50%; top: 50%; bottom: auto !important; translate: -50% -50%; margin: 0; }

/* ==========================================================================
   v28 · hero receipt — zig-zag till slip, pink tape, pixel type, barcode
   ========================================================================== */
.hero__bill .np-ad, .bill__slot { display: none !important; }
.rc { --z: 8px; position: relative; width: min(420px, 100%); margin: 26px auto 0; rotate: 3deg; filter: drop-shadow(0 18px 22px rgba(40,30,10,.22)) drop-shadow(0 2px 2px rgba(40,30,10,.12)); transform: perspective(1200px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); transition: transform .5s var(--ease); }
.rc__paper {
  position: relative; background: #fbfbf8; color: #111; padding: calc(var(--z) + 34px) clamp(22px, 5vw, 34px) calc(var(--z) + 26px);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x;
  background-image: var(--grain), linear-gradient(180deg, transparent 47%, rgba(0,0,0,.035) 48.5%, rgba(255,255,255,.6) 49.5%, transparent 51%);
}
.rc__tape { position: absolute; z-index: 3; top: -14px; left: 50%; width: 132px; height: 40px; margin-left: -58px; rotate: -2deg; background: rgba(240,120,170,.82); box-shadow: 0 1px 2px rgba(0,0,0,.08); clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 96%); }
.rc__tape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.35) 48%, transparent 56%); }
.rc__title { margin: 0 0 18px; text-align: center; font: 800 clamp(2.4rem, 1.8rem + 2vw, 3rem)/1 var(--f-ui); letter-spacing: -.045em; text-transform: lowercase; color: #111; }
.rc__sub { margin: 0 0 14px 20%; font: 700 .8rem/1.15 "Silkscreen", "Courier Prime", monospace; text-transform: uppercase; letter-spacing: .02em; color: #222; }
.rc__items { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1.5px dashed rgba(0,0,0,.55); display: grid; gap: 12px; }
.rc__items li { display: grid; grid-template-columns: 34px 1fr auto; align-items: end; column-gap: 8px; padding-bottom: 6px; border-bottom: 1px dotted rgba(0,0,0,.5); position: relative; }
.rc__no { align-self: start; font: 800 1.9rem/.9 var(--f-ui); letter-spacing: -.05em; color: #cfcfcf; }
.rc__items b { display: block; font: 700 .86rem/1.05 "Silkscreen", "Courier Prime", monospace; text-transform: uppercase; letter-spacing: .02em; color: #111; }
.rc__items small { display: block; margin-top: 3px; font: 400 .72rem/1.25 var(--f-ui); color: #333; }
.rc__price { white-space: nowrap; font: 800 1.35rem/1 var(--f-ui); letter-spacing: -.04em; color: #111; }
.rc__price i { font: 400 .72rem/1 var(--f-ui); font-style: normal; letter-spacing: 0; margin-right: 3px; color: #333; }
.rc__total, .rc__spots { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1.5px dashed rgba(0,0,0,.55); }
.rc__total { margin-top: 14px; border-top: 1.5px dashed rgba(0,0,0,.55); }
.rc__total b, .rc__spots b { font: 800 1.7rem/1 var(--f-ui); letter-spacing: -.04em; text-transform: lowercase; color: #111; }
.rc__total > span, .rc__spots > span { display: inline-flex; align-items: center; gap: 6px; }
.rc__total strong, .rc__spots strong { font: 800 2rem/1 var(--f-ui); letter-spacing: -.05em; color: #111; }
.rc__spots strong { color: var(--pink); min-width: .6em; text-align: center; }
.rc__total small, .rc__spots small { font: 400 .78rem/1.05 var(--f-ui); color: #222; }
.rc__spots { flex-wrap: wrap; }
.rc__full { flex-basis: 100%; text-align: right; font: 700 .62rem/1.3 "Silkscreen", monospace; text-transform: uppercase; color: var(--pink-text); margin-top: 6px; }
.rc__full[hidden] { display: none; }
.rc__barcode { margin: 18px auto 0; width: 62%; text-align: center; }
.rc__barcode svg { display: block; width: 100%; height: 52px; fill: #111; }
.rc__barcode span { display: block; margin-top: 2px; font: 700 .8rem/1 "Silkscreen", monospace; letter-spacing: .55em; text-transform: lowercase; color: #111; padding-left: .55em; }
.rc__tear { display: block; margin: 14px -4px 0; text-align: center; text-decoration: none; font: 700 .62rem/1.2 "Silkscreen", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-text); transition: transform .45s var(--ease), opacity .45s; }
.rc__tear:hover { text-decoration: underline; }
.rc__tear.is-torn { transform: translateY(30px) rotate(4deg); opacity: 0; }
html.motion .hero__bill.is-printing .rc { animation: billDrop 1s var(--spring) both; }
.hero__bill { padding-top: 0 !important; }
.hero__pen { bottom: -8px; }
@media (max-width: 520px) {
  .rc { rotate: 1.5deg; }
  .rc__no { font-size: 1.6rem; }
  .rc__items li { grid-template-columns: 28px 1fr auto; }
  .rc__items b { font-size: .76rem; }
  .rc__price { font-size: 1.15rem; }
}
.rc__paper {
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) var(--z) repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--z) + 2px) no-repeat;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) var(--z) repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--z) + 2px) no-repeat;
}
.rc { --z: 11px; width: min(420px, calc(100% - 20px)); }

/* v29 · sticker cursors: halftone pointing hand, camera on hover */
html.has-bbcur, html.has-bbcur a, html.has-bbcur button, html.has-bbcur label, html.has-bbcur summary, html.has-bbcur [role="button"] { cursor: none; }
html.has-bbcur input, html.has-bbcur textarea, html.has-bbcur select { cursor: auto; }
.bbcur__dot { width: 0; height: 0; margin: 0; border-radius: 0; background: none; transition: opacity .2s; }
.bbcur__hand { position: absolute; width: 56px; height: auto; max-width: none; left: -54px; top: -16px; filter: drop-shadow(0 4px 6px rgba(11,11,13,.28)); transform-origin: 100% 30%; transition: transform .25s var(--spring); }
.bbcur__ring { width: 0 !important; height: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.bbcur__ring svg { display: none; }
.bbcur__cam { position: absolute; width: 90px; height: auto; max-width: none; left: -45px; top: -36px; opacity: 0; transform: scale(.4) rotate(-14deg); filter: drop-shadow(0 8px 12px rgba(11,11,13,.3)); transition: opacity .2s, transform .35s var(--spring); }
.bbcur.is-cam .bbcur__cam { opacity: 1; transform: rotate(-6deg); }
.bbcur.is-cam .bbcur__dot { opacity: 0; }
.bbcur.is-snap .bbcur__ring::after { display: none; }
.bbcur.is-snap .bbcur__cam { animation: camSnap .35s ease-out; }
.bbcur.is-snap .bbcur__hand { transform: rotate(-10deg); }
@keyframes camSnap { 0% { filter: drop-shadow(0 8px 12px rgba(11,11,13,.3)) brightness(2.2); transform: rotate(-6deg) scale(.9); } 100% { filter: drop-shadow(0 8px 12px rgba(11,11,13,.3)); transform: rotate(-6deg); } }
/* v29.1 · receipt: brand fonts only, proper torn teeth */
.rc__paper { -webkit-mask: none !important; mask: none !important; padding-top: 44px; padding-bottom: 34px; }
.rc__title { font: italic 400 clamp(2.4rem, 1.8rem + 2vw, 3.1rem)/1 var(--f-display) !important; letter-spacing: -.02em !important; text-transform: none !important; }
.rc__sub, .rc__items b, .rc__barcode span, .rc__tear, .rc__full { font-family: var(--f-ui) !important; font-weight: 800 !important; }
.rc__sub { font-size: .74rem; letter-spacing: .14em; }
.rc__items b { font-size: .82rem; letter-spacing: .1em; }
.rc__items small { font-family: var(--f-body); font-style: italic; font-size: .8rem; }
.rc__no { font: italic 400 2rem/.9 var(--f-display) !important; color: #c9c9c9; }
.rc__total b, .rc__spots b { font: italic 400 1.9rem/1 var(--f-display) !important; text-transform: none !important; }
.rc__total strong, .rc__spots strong, .rc__price { font-family: var(--f-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important; }
.rc__price i, .rc__total small, .rc__spots small { font-family: var(--f-ui); }
.rc__tear { font-size: .66rem; letter-spacing: .14em; }
.rc__full { display: none !important; }
.rc__spots strong { font-family: var(--f-script) !important; }
/* v29.2 · hand rotates around the fingertip; camera same size as the hand */
.bbcur__hand { transition: none; transform-origin: 54px 16px; will-change: transform; }
.bbcur__cam { width: 58px; left: -29px; top: -23px; }

/* v29.3 · cursor rebuilt: one element, GPU transforms, mirrored hand, no system cursor underneath */
.bbcur__dot, .bbcur__ring { display: none !important; }
.bbcur__pos { position: fixed; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
html.has-bbcur, html.has-bbcur * { cursor: none !important; }
html.has-bbcur input, html.has-bbcur textarea, html.has-bbcur select, html.has-bbcur [contenteditable] { cursor: text !important; }
html.has-bbcur select, html.has-bbcur input[type="checkbox"], html.has-bbcur input[type="radio"] { cursor: pointer !important; }
.bbcur__hand { position: absolute; left: -54px; top: -16px; width: 56px; height: auto; max-width: none; transform-origin: 54px 16px; will-change: transform; transition: opacity .15s; filter: drop-shadow(0 3px 4px rgba(11,11,13,.25)); }
.bbcur__cam { position: absolute; left: -29px; top: -23px; width: 58px; height: auto; max-width: none; opacity: 0; transform: scale(.6) rotate(-12deg); transition: opacity .15s, transform .3s var(--spring); filter: drop-shadow(0 5px 8px rgba(11,11,13,.28)); }
.bbcur.is-cam .bbcur__hand { opacity: 0; }
.bbcur.is-cam .bbcur__cam { opacity: 1; transform: rotate(-6deg); }
.bbcur.is-snap .bbcur__cam { animation: camSnap .3s ease-out; }
.bbcur.is-snap .bbcur__hand { animation: none; }

/* v30 · hero note as an admit-one ticket (brand blush + pink) */
.hero__note2.tkt { --n: 13px; position: absolute; width: 250px; padding: 12px; rotate: 6deg; background: var(--blush-2, #fad3e6) var(--grain); color: var(--ink);
  -webkit-mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
          mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  display: grid; grid-template-columns: 30px 1fr 30px; filter: drop-shadow(0 10px 14px rgba(40,30,10,.2)); }
.tkt::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--pink-text); border-radius: 8px; pointer-events: none; }
.tkt__no { position: relative; display: grid; place-items: center; border-right: 1.5px solid var(--pink-text); font: 400 .95rem/1 var(--f-type); letter-spacing: .08em; color: var(--ink); }
.tkt__no::after { content: attr(aria-label); }
.tkt__no { writing-mode: vertical-rl; transform: rotate(180deg); border-right: 0; border-left: 1.5px solid var(--pink-text); padding: 0 4px; }
.tkt__no--r { transform: none; border-left: 1.5px solid var(--pink-text); }
.tkt__mid { text-align: center; padding: 12px 8px 10px; display: grid; gap: 4px; }
.tkt__mid small { font: 400 .62rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-text); }
.tkt__mid b { font: 400 1.32rem/1.05 var(--f-display); letter-spacing: -.01em; }
.tkt__mid b .hw { font-size: 1.15em; }
.tkt__mid i { font: italic 400 .88rem/1.2 var(--f-body); color: rgba(11,11,13,.7); }
@media (max-width: 520px) { .hero__note2.tkt { width: 210px; } .tkt__mid b { font-size: 1.12rem; } }
.hero__note2.tkt { --n: 16px; bottom: -70px !important; right: max(-30px, calc(50% - 320px)) !important; z-index: 6; }
.tkt__no::after { content: none; }
@media (max-width: 520px) { .hero__note2.tkt { bottom: -50px !important; right: -6px !important; } }
.hw { font-family: var(--f-script) !important; font-style: normal !important; color: var(--pink); }
.hero__note2.tkt { -webkit-mask: none !important; mask: none !important; background: none !important; padding: 0 !important; display: block !important; }
.tkt::before { content: none !important; }
.tkt__in { --n: 16px; position: relative; display: grid; grid-template-columns: 30px 1fr 30px; padding: 12px; background: var(--blush-2, #fad3e6) var(--grain);
  -webkit-mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
          mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat; }
.tkt__in::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--pink-text); border-radius: 8px; pointer-events: none; }

/* ==========================================================================
   v31 · Bengaluru postage stamp + vintage grain over the whole site
   ========================================================================== */
.stamp { justify-self: end; display: block; width: 132px; padding: 7px; background: #fbf6ea; rotate: 3deg;
  -webkit-mask: radial-gradient(circle 4px, #0000 96%, #000) -5px -5px / 10px 10px round, linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(circle 4px, #0000 96%, #000) -5px -5px / 10px 10px round, linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 4px 6px rgba(40,30,10,.18)); }
.stamp__in { display: grid; padding: 8px 8px 6px; background: #fbf6ea var(--grain); outline: 1px solid rgba(230,0,126,.12); outline-offset: -1px; }
.stamp__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.stamp__city { display: grid; gap: 1px; font: 400 .58rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-text); }
.stamp__city small { font: 400 .54rem/1.2 "Noto Sans Kannada", "Tunga", var(--f-ui); letter-spacing: 0; text-transform: none; }
.stamp__yr { font: 400 1.05rem/.9 var(--f-display); color: var(--pink-text); letter-spacing: .02em; }
.stamp__art { display: block; width: 100%; height: auto; margin-top: 14px; filter: saturate(.85); }
.stamp__ed { margin-top: 5px; font: 400 .44rem/1 var(--f-strip); letter-spacing: .22em; text-transform: uppercase; color: rgba(11,11,13,.5); text-align: right; }
.np-ears { align-items: center; }

/* vintage: paper grain + faint foxing + soft vignette across every page */
body::after { content: ""; position: fixed; inset: 0; z-index: 250; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(90,60,20,.10) 100%);
  mix-blend-mode: multiply; opacity: .55; }
body::before { content: ""; position: fixed; inset: 0; z-index: 249; pointer-events: none; background: rgba(235,215,170,.06); mix-blend-mode: multiply; }
@media print { body::after, body::before { display: none; } }
.stamp { width: 150px; padding: 10px; rotate: 4deg;
  -webkit-mask: radial-gradient(circle 4.5px, #0000 96%, #000) -6px -6px / 12px 12px round, linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(circle 4.5px, #0000 96%, #000) -6px -6px / 12px 12px round, linear-gradient(#000 0 0) content-box; }
.stamp__in { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 8px; min-height: 170px; align-content: space-between; }
.stamp__city { font-size: .62rem; }
.stamp__city small { font-size: .6rem; }
.stamp__yr { font-size: 1.25rem; }
.stamp__art { width: 100% !important; height: auto; margin-top: 26px; }
.stamp { display: grid !important; height: auto !important; max-width: none !important; border: 0 !important; box-sizing: border-box; }
.stamp__in { width: 100%; box-sizing: border-box; }
.stamp__in { min-height: 0; padding-bottom: 0; overflow: hidden; }
.stamp__art { width: calc(100% + 20px) !important; max-width: none !important; margin: 18px -10px 0; }
.stamp { width: 140px; }
.stamp__art { aspect-ratio: 200 / 140; height: auto !important; }
.stamp__top { min-width: 0; }
.stamp__yr { font-size: 1.05rem; }
.stamp__city { font-size: .56rem; letter-spacing: .1em; }

/* v32 · hanging pink handset in Section G */
.book-solo { overflow: hidden; }
.phone-hang { position: absolute; z-index: 3; top: -14px; left: clamp(12px, 5vw, 90px); width: 112px; transform-origin: 42% 0; touch-action: none; user-select: none; -webkit-user-drag: none; cursor: grab; will-change: transform; filter: drop-shadow(10px 16px 14px rgba(120,30,70,.22)); }
.phone-hang img { display: block; width: 100%; height: auto; pointer-events: none; }
.phone-hang.is-grab { cursor: grabbing; }
html.has-bbcur .phone-hang { cursor: none !important; }
@media (max-width: 1180px) { .phone-hang { width: 84px; left: 10px; } }
@media (max-width: 700px) { .phone-hang { width: 54px; left: auto; right: 12px; top: -20px; } }
/* v32.1 · phone: no pulling, blended + vintage */
.phone-hang { cursor: default !important; pointer-events: none; mix-blend-mode: multiply; filter: sepia(.12) contrast(.96) drop-shadow(8px 14px 12px rgba(120,30,70,.16)); opacity: .96; }
/* v33 · ticket pinned to the receipt's corner, same spot on every screen */
.rc__ticket.tkt { position: absolute !important; z-index: 7; width: 230px; right: -78px; bottom: -46px; left: auto; top: auto; rotate: 8deg; filter: drop-shadow(0 10px 14px rgba(40,30,10,.22)); }
.rc__ticket .tkt__in { --n: 16px; position: relative; display: grid; grid-template-columns: 30px 1fr 30px; padding: 12px; background: var(--blush-2, #fad3e6) var(--grain);
  -webkit-mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
          mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat; }
.hero__bill { padding-bottom: 90px !important; }
.hero__pen { bottom: 18px !important; left: max(0px, calc(50% - 250px)) !important; }
@media (max-width: 1200px) { .rc__ticket.tkt { right: -30px; } }
@media (max-width: 600px) { .rc__ticket.tkt { width: 196px; right: -6px; bottom: -64px; rotate: 6deg; } .rc__ticket .tkt__mid b { font-size: 1.08rem; } .hero__bill { padding-bottom: 110px !important; } .hero__pen { bottom: 30px !important; left: 0 !important; } }
/* v33.1 · smaller ticket, tucked on the receipt's right edge clear of the text */
.rc__ticket.tkt { width: 150px; right: -96px; bottom: 150px; rotate: 10deg; }
.rc__ticket .tkt__in { --n: 11px; grid-template-columns: 20px 1fr 20px; padding: 8px; }
.rc__ticket .tkt__in::before { inset: 7px; border-radius: 6px; border-width: 1.2px; }
.rc__ticket .tkt__no { font-size: .62rem; padding: 0 2px; }
.rc__ticket .tkt__mid { padding: 8px 4px 7px; gap: 2px; }
.rc__ticket .tkt__mid small { font-size: .46rem; letter-spacing: .1em; }
.rc__ticket .tkt__mid b { font-size: .9rem !important; }
.rc__ticket .tkt__mid i { font-size: .64rem; }
@media (max-width: 1200px) { .rc__ticket.tkt { right: -70px; } }
@media (max-width: 600px) { .rc__ticket.tkt { width: 140px; right: 2px; bottom: -66px; rotate: 6deg; } .rc__ticket .tkt__mid b { font-size: .84rem !important; } }
.rc__ticket.tkt { right: -132px; bottom: 118px; }
@media (max-width: 1200px) { .rc__ticket.tkt { right: -124px; } }
@media (max-width: 600px) { .rc__ticket.tkt { right: 2px; bottom: -66px; } }

/* ==========================================================================
   v34 · stronger vintage: sepia tone, heavier grain, aged edges, foxing
   ========================================================================== */
body::before { background: #9c7a4c !important; mix-blend-mode: color !important; opacity: .16 !important; }
body::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .4 0 0 0 0 .2 0 0 0 .55 -.24'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(110,75,30,.22) 100%) !important;
  opacity: .8 !important;
}
html::after { content: ""; position: fixed; inset: 0; z-index: 251; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background:
    radial-gradient(14px 10px at 12% 22%, rgba(150,100,40,.18), transparent 70%),
    radial-gradient(22px 18px at 86% 68%, rgba(150,100,40,.14), transparent 70%),
    radial-gradient(9px 9px at 63% 12%, rgba(150,100,40,.16), transparent 70%),
    radial-gradient(30px 22px at 30% 88%, rgba(150,100,40,.10), transparent 70%),
    radial-gradient(12px 8px at 92% 30%, rgba(150,100,40,.15), transparent 70%); }
img, svg.stamp__art, .igreel__frame { filter: sepia(.12) saturate(.92); }
.bbcur img, .logo img { filter: none; }
@media print { html::after { display: none; } }
/* v35 · stamp uses a real Vidhana Soudha photo, pink duotone */
.stamp__in { position: relative; }
.stamp__photo { aspect-ratio: 720 / 494; object-fit: cover; object-position: center bottom; filter: none !important; margin-top: 20px !important; }
.stamp__credit { position: absolute; right: 2px; top: 46px; writing-mode: vertical-rl; font: 400 .3rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(11,11,13,.38); }
/* v36 · cursor: hand rests pointing up-left (fingertip = click point), leans with movement */
.bbcur__hand { left: -54px; top: -18px; transform-origin: 54px 18px; }
.bbcur.is-snap .bbcur__hand { animation: none; }
.bbcur__hand { left: -55px; top: -18px; transform-origin: 55px 18px; }
/* v36 · "Four stories every month" as a worn rubber seal */
.seal { justify-self: start; display: block; width: 150px; color: rgba(201,0,109,.82); rotate: -10deg; mix-blend-mode: multiply; }
.seal svg { display: block; width: 100%; height: auto; overflow: visible; }
.seal__fill { font-family: var(--f-script); fill: var(--ink); opacity: .78; }
@media (max-width: 1000px) { .seal { display: none; } }

/* v37 · Section C: instant camera printing two film frames */
.pin__cam { position: absolute; z-index: 1; margin: 0; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top: calc(var(--header-h) + 90px); bottom: 24px; width: auto; display: flex; justify-content: flex-end; pointer-events: none; }
.pin__cam img { height: 100%; width: auto; max-width: none; rotate: 3deg; filter: sepia(.12) saturate(.9) drop-shadow(0 18px 24px rgba(11,11,13,.28)); }
.pin .wrap { padding-right: min(34vw, 420px); }
html.motion .pin__cam img { transition: transform 1.2s var(--ease), opacity .8s; }
html.motion .pin:not(.in-view) .pin__cam img { transform: translateY(-24px); opacity: 0; }
@media (max-width: 900px) {
  .pin__cam { top: auto; bottom: 18px; right: 10px; height: 42vh; }
  .pin .wrap { padding-right: var(--gutter); }
  .pin__text { position: relative; z-index: 2; }
  .pin__cam img { opacity: .95; }
}
@media (max-width: 900px) and (max-height: 500px) { .pin__cam { display: none; } }
@media (max-width: 900px) {
  .pin__inner { display: flex !important; flex-direction: column; }
  .pin__cam { position: relative; order: 9; top: auto; right: auto; bottom: auto; height: auto; justify-content: center; margin: 22px auto 0; }
  .pin__cam img { width: min(56vw, 230px); height: auto; }
  .pin { height: auto !important; }
  .pin__inner { position: relative !important; height: auto !important; padding-bottom: 56px !important; }
  .pin__bar { display: none; }
  html.motion .pin .hl .w:not(.lit) { opacity: 1; transform: none; }
}
/* v37.1 · camera sits in its own column beside the beliefs, sized to the text */
.pin .wrap.pin__grid { padding-right: var(--gutter) !important; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 300px); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.pin__grid .pin__text, .pin__grid .pin__foot { grid-column: 1; }
.pin__grid .pin__cam { position: relative !important; inset: auto !important; grid-column: 2; grid-row: 1 / span 2; align-self: center; height: auto !important; width: 100%; margin: 0 !important; display: block; }
.pin__grid .pin__cam img { width: 100%; height: auto !important; max-height: 62vh; object-fit: contain; rotate: 4deg; }
@media (max-width: 900px) {
  .pin .wrap.pin__grid { grid-template-columns: minmax(0, 1fr); }
  .pin__grid .pin__cam { grid-column: 1; grid-row: auto; width: min(52vw, 220px); justify-self: center; margin-top: 28px !important; }
  .pin__grid .pin__cam img { max-height: none; }
}
/* v37.2 · tidy Section C grid */
.pin .wrap { padding-right: var(--gutter) !important; }
.pin .wrap.pin__grid { align-content: center; row-gap: 0; }
.pin__grid .pin__text { align-self: end; }
.pin__grid .pin__foot { align-self: start; }
.pin__grid .pin__cam img { filter: drop-shadow(0 18px 24px rgba(11,11,13,.28)) !important; }

/* ==========================================================================
   v38 · vintage lives in the PAPER only — content stays crisp and vibrant
   (no overlay above the page; grain + stains + vignette baked into section backgrounds)
   ========================================================================== */
body::before, body::after, html::after { content: none !important; display: none !important; }
:root {
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-stain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .4 0 0 0 0 .2 0 0 0 .6 -.26'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper-edge: radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(110,75,30,.14) 100%);
}
main > section, .pin__inner, .site-footer, .page-404 { background-image: var(--paper-edge), var(--paper-stain), var(--paper-grain) !important; background-blend-mode: multiply, multiply, normal; }
.site-footer { background-image: var(--paper-grain) !important; }
/* content back to full colour */
img, .igreel__frame, svg.stamp__art { filter: none !important; }
.stamp__photo { filter: none !important; }
.polaroid, .igreel, .rc__paper, .sbnote__paper, .strip, .tkt__in, .clip__paper, .form, .notebook { filter: none; }
.polaroid, .igreel { box-shadow: 0 1px 1px rgba(40,30,10,.08), 0 18px 30px -18px rgba(40,30,10,.45); }
.phone-hang { filter: drop-shadow(8px 14px 12px rgba(120,30,70,.16)) !important; mix-blend-mode: normal !important; opacity: 1 !important; }
/* v39 · Section C back to single column; paper textures no longer tile */
.pin .wrap.pin__grid { display: block; }
main > section, .pin__inner, .page-404 {
  background-size: 100% 100%, 100% 100%, 240px 240px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center, center, 0 0 !important;
}
:root { --paper-stain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .0035' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .4 0 0 0 0 .2 0 0 0 .55 -.24'/%3E%3C/filter%3E%3Crect width='1600' height='1000' filter='url(%23f)'/%3E%3C/svg%3E"); }
.sbnote__paper, .clip__paper, .strip, .slotlive, .tkt__in, .stamp__in, .qcard, .inland { background-size: 180px 180px; }

/* v40 · full-width layout + compact nameplate */
:root { --maxw: 100vw; --gutter: clamp(18px, 4.2vw, 80px); }
.wrap { max-width: none; }
.np-name { font-size: clamp(1.8rem, .8rem + 3.2vw, 4rem) !important; }
.np-ears { padding-bottom: 6px !important; gap: clamp(12px, 2.4vw, 32px) !important; }
.np-head { margin-bottom: clamp(18px, 2.6vw, 34px) !important; }
.seal { width: 104px !important; }
.stamp { width: 102px !important; padding: 7px !important; }
.stamp__in { padding: 7px 7px 0 !important; }
.stamp__city { font-size: .44rem !important; }
.stamp__yr { font-size: .8rem !important; }
.stamp__art { margin-top: 10px !important; width: calc(100% + 14px) !important; margin-left: -7px !important; margin-right: -7px !important; }
.stamp__credit { top: 34px; font-size: .24rem; }
.np-dateline { padding: 6px 0 5px !important; }
@media (min-width: 1600px) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
/* v41 · Section C statue, anchored bottom-left; text sits to its right */
.pin__statue { position: absolute; z-index: 1; left: var(--gutter); bottom: 0; margin: 0; width: clamp(240px, 28vw, 460px); pointer-events: none; }
.pin__statue img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; object-position: left bottom; filter: drop-shadow(10px 0 24px rgba(120,30,70,.12)); }
@media (min-width: 901px) {
  .pin .wrap.pin__grid { padding-left: calc(var(--gutter) + clamp(240px, 28vw, 460px) + clamp(24px, 4vw, 64px)) !important; position: relative; z-index: 2; }
  .pin__flagwrap .np-flag { margin-left: 0; }
}
html.motion .pin__statue img { transition: transform 1.1s var(--ease), opacity .9s; }
html.motion .pin:not(.in-view) .pin__statue img { transform: translateY(30px); opacity: 0; }
@media (max-width: 900px) {
  .pin__statue { position: relative; order: 10; left: auto; bottom: auto; width: min(70vw, 300px); margin: 18px 0 -56px 0; align-self: flex-start; }
  .pin__statue img { max-height: none; }
}
.pin__statue { z-index: 3; }
.pin__statue img { max-height: 70vh; }
@media (min-width: 901px) { .pin__label { margin-left: calc(var(--gutter) + clamp(240px, 28vw, 460px) + clamp(24px, 4vw, 64px)) !important; } }
/* v42 · two boys in the hero's bottom-right corner, pointing up at the receipt */
.hero__boys { position: absolute; z-index: 2; right: var(--gutter); bottom: 0; margin: 0; width: clamp(120px, 11vw, 190px); pointer-events: none; }
.hero__boys img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(40,30,10,.18)); }
@media (max-width: 960px) { .hero__boys { width: 96px; right: 8px; } }
@media (max-width: 600px) { .hero__boys { width: 78px; right: 4px; } }

/* v43 · hero: tighter composition — receipt with balloon + clouds and pointing boys */
@media (min-width: 961px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: clamp(24px, 3vw, 56px) !important; align-items: center; }
  .hero__grid > .np-lead { border-right: 0 !important; padding-right: 0 !important; justify-self: end; width: min(100%, 640px); }
  .hero__bill { justify-self: start; width: min(100%, 660px); padding: 70px 220px 40px 0 !important; position: relative; }
  .hero__bill .rc { margin: 0 !important; rotate: 3deg; }
}
.hero__bill .rc { position: relative; z-index: 3; }
.hero__sky { position: absolute; z-index: 1; margin: 0; top: 0; right: 0; width: 300px; pointer-events: none; }
.hero__clouds { display: block; width: 100%; height: auto; opacity: .95; rotate: -3deg; filter: drop-shadow(0 6px 10px rgba(40,30,10,.12)); }
.hero__balloon { position: absolute; width: 120px; height: auto; left: 42%; top: 6%; filter: drop-shadow(0 10px 14px rgba(40,30,10,.25)); animation: bbFloat 6s ease-in-out infinite; }
@keyframes bbFloat { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(-6px,-14px) rotate(2deg); } }
.hero__bill .hero__boys { position: absolute; z-index: 4; right: 40px; left: auto; bottom: 0; width: 150px; }
.hero__bill .rc__ticket.tkt { right: -112px; bottom: 150px; }
@media (max-width: 960px) {
  .hero__bill { position: relative; padding: 110px 70px 30px 0 !important; }
  .hero__sky { width: 210px; right: -10px; top: 0; }
  .hero__balloon { width: 82px; }
  .hero__bill .hero__boys { width: 88px; right: -4px; }
  .hero__bill .rc__ticket.tkt { right: -60px; bottom: auto; top: 46%; }
}
@media (prefers-reduced-motion: reduce) { .hero__balloon { animation: none; } }
@media (max-width: 600px) { .hero__bill .rc__ticket.tkt { top: auto; bottom: -70px; right: 60px; } .hero__bill { padding-bottom: 110px !important; } }
/* v43.1 · boys stand on the hero floor; headline block back to the left edge */
.hero { padding-bottom: 0 !important; }
.hero__grid { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.hero__bill { align-self: end; }
@media (min-width: 961px) { .hero__grid > .np-lead { justify-self: start !important; align-self: center; } }
/* v44 · Section C: reader on the pink chair, bottom-left, text column beside it */
.pin__statue { width: clamp(200px, 20vw, 340px); left: calc(var(--gutter) + 10px); }
.pin__statue img { max-height: 74vh; filter: drop-shadow(8px 10px 18px rgba(120,30,70,.16)); }
@media (min-width: 901px) {
  .pin .wrap.pin__grid { padding-left: calc(var(--gutter) + clamp(200px, 20vw, 340px) + clamp(48px, 6vw, 110px)) !important; max-width: none; }
  .pin__label { margin-left: calc(var(--gutter) + clamp(200px, 20vw, 340px) + clamp(48px, 6vw, 110px)) !important; }
  .pin__inner { align-content: center !important; }
}
@media (max-width: 900px) { .pin__statue { width: min(52vw, 220px); margin: 22px 0 -56px 0; } }
/* v44.1 · Section C: normal section height, same padding as the others */
.pin { height: auto !important; }
.pin__inner { position: relative !important; height: auto !important; min-height: 0 !important; align-content: start !important; padding-top: clamp(56px, 6vw, 96px) !important; padding-bottom: clamp(64px, 7vw, 110px) !important; }
@media (min-width: 901px) { .pin__statue img { max-height: none; } .pin__inner { min-height: clamp(460px, 34vw, 640px) !important; } }
/* v44.2 · word-by-word reveal back (no pinning) + progress line at the section foot */
@media (min-width: 901px) { .pin__bar { display: block !important; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; } }
/* v45 · Section B: tidy, contained layout + megaphone cat bottom-left */
.reels-sec { position: relative; padding-bottom: 0 !important; }
.reels-sec .reels { --pad: var(--gutter); padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; scroll-padding-inline: var(--gutter); }
@media (min-width: 901px) {
  .reels:has(.igreel) { grid-auto-columns: clamp(230px, calc((100vw - 2 * var(--gutter) - 3 * 28px) / 4), 330px) !important; gap: 28px !important; }
  .reels-foot { padding-left: calc(var(--gutter) + clamp(220px, 22vw, 360px)) !important; padding-bottom: clamp(36px, 4vw, 64px); min-height: 120px; align-items: center; }
}
.reels__cat { position: absolute; z-index: 2; left: 0; bottom: 0; margin: 0; width: clamp(220px, 22vw, 360px); pointer-events: none; }
.reels__cat img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .reels__cat { position: relative; width: min(60vw, 240px); margin-top: 18px; }
  .reels-foot { padding-bottom: 0; }
}
@media (min-width: 901px) {
  .reels:has(.igreel) { grid-auto-columns: calc((100vw - 2 * var(--gutter) - 3 * 28px) / 4) !important; }
  .reels-foot { min-height: calc(clamp(220px, 22vw, 360px) * .76 + 20px); align-items: flex-end; padding-bottom: clamp(28px, 3vw, 48px); }
}
/* Section C: same vertical rhythm as other sections + larger type */
.pin__inner { padding-top: clamp(72px, 10vw, 140px) !important; padding-bottom: clamp(72px, 10vw, 140px) !important; }
.pin__text { font-size: clamp(2.2rem, 1rem + 3.6vw, 5rem) !important; line-height: 1.06 !important; }
.pin__foot { font-size: clamp(1rem, .9rem + .4vw, 1.25rem) !important; margin-top: clamp(24px, 3vw, 40px) !important; max-width: 48ch; }
.pin__label { margin-bottom: clamp(24px, 3vw, 40px) !important; }
@media (min-width: 901px) { .pin__statue { width: clamp(240px, 24vw, 400px); } .pin .wrap.pin__grid, .pin__label { padding-left: 0; } .pin .wrap.pin__grid { padding-left: calc(var(--gutter) + clamp(240px, 24vw, 400px) + clamp(48px, 6vw, 110px)) !important; } .pin__label { margin-left: calc(var(--gutter) + clamp(240px, 24vw, 400px) + clamp(48px, 6vw, 110px)) !important; } }
.pin__text { font-size: clamp(2rem, .4rem + 2.8vw, 4.6rem) !important; } .pin .wrap.pin__grid { padding-right: var(--gutter) !important; }
@media (min-width: 901px) {
  .pin__statue { width: clamp(200px, 17vw, 320px) !important; }
  .pin .wrap.pin__grid { padding-left: calc(var(--gutter) + clamp(200px, 17vw, 320px) + clamp(48px, 6vw, 110px)) !important; }
  .pin__label { margin-left: calc(var(--gutter) + clamp(200px, 17vw, 320px) + clamp(48px, 6vw, 110px)) !important; }
  .pin__inner { min-height: calc(clamp(200px, 17vw, 320px) * 1.83 + 150px) !important; }
}
/* v46 · Section B: torn newspaper in the bottom-right background */
.reels-sec { overflow: hidden; }
.reels__news { position: absolute; z-index: 0; right: 0; bottom: 0; width: clamp(260px, 30vw, 520px); height: auto; pointer-events: none; opacity: .9; }
.reels-sec > .wrap, .reels-wrap { position: relative; z-index: 1; }
/* Section C: full section height like its neighbours, content centred below the bar */
.pin__inner { display: flex !important; flex-direction: column; min-height: clamp(860px, 100vh, 1080px) !important; padding-top: clamp(72px, 9vw, 120px) !important; padding-bottom: clamp(72px, 9vw, 120px) !important; }
.pin__inner > .pin__flagwrap { flex: none; }
.pin__inner > .pin__label { margin-top: auto !important; }
.pin__inner > .pin__grid { margin-bottom: auto; }
@media (min-width: 901px) {
  .pin__statue { width: clamp(240px, 22vw, 400px) !important; }
  .pin .wrap.pin__grid { padding-left: calc(var(--gutter) + clamp(240px, 22vw, 400px) + clamp(48px, 6vw, 110px)) !important; }
  .pin__label { margin-left: calc(var(--gutter) + clamp(240px, 22vw, 400px) + clamp(48px, 6vw, 110px)) !important; }
  .pin__text { font-size: clamp(2.2rem, .4rem + 3vw, 5rem) !important; }
}
@media (max-width: 900px) { .pin__inner { min-height: 0 !important; } .reels__news { width: 46vw; opacity: .7; } }
@media (min-width: 901px) { .reels-foot { padding-right: calc(clamp(260px, 30vw, 520px) * .55) !important; } }
/* v47 · nameplate is the header on desktop; dateline carries the menu; cat removed */
@media (min-width: 901px) {
  .site-header { display: none !important; }
  :root { --header-h: 0px; }
  .hero { padding-top: clamp(18px, 2vw, 30px) !important; }
}
.np-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; }
.np-nav a { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; position: relative; padding: 2px 0; }
.np-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.np-nav a:hover { color: var(--pink-text); }
.np-nav a:hover::after { transform: scaleX(1); }
.np-nav i { font-style: normal; opacity: .5; }
@media (max-width: 900px) { .np-nav { display: none; } .np-dateline span:first-child, .np-dateline span:last-child { display: inline !important; } .np-dateline { justify-content: space-between !important; } }
@media (min-width: 901px) { .reels-foot { padding-left: var(--gutter) !important; min-height: 0 !important; } }
@media (max-width: 1000px) { .stamp, .seal { display: none !important; } }
/* v47.1 · hero fills the first screen; receipt + boys sit on its floor */
@media (min-width: 961px) {
  .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .hero > .hero__grid { flex: 1; align-items: stretch !important; }
  .hero__grid > .np-lead { align-self: center !important; }
  .hero__bill { align-self: end !important; }
}
/* v47.2 · Follow link readable over the newspaper corner */
.reels-foot { position: relative; z-index: 2; }
.reels-foot .more { background: var(--paper-card, #fffdf7); padding: 10px 16px !important; box-shadow: 0 1px 1px rgba(40,30,10,.12), 0 8px 14px -10px rgba(40,30,10,.5); rotate: -1deg; background-image: none !important; border-bottom: 2px solid var(--pink) !important; }
@media (min-width: 901px) { .reels-foot { padding-right: calc(clamp(260px, 30vw, 520px) * .8) !important; } }
/* v47.3 · lift the receipt so the handwritten note and boys have room below */
@media (min-width: 961px) {
  .hero__bill { padding-bottom: clamp(110px, 13vh, 160px) !important; }
  .hero__pen { bottom: clamp(40px, 5vh, 64px) !important; }
  .hero__bill .hero__boys { width: 160px; }
}

/* v47.4 · Section C word-by-word: smooth on every screen size */
.pin .hl .w { transition: opacity .45s var(--ease), color .45s, transform .55s var(--ease) !important; }
html.motion .pin .hl .w:not(.lit) { opacity: .14 !important; transform: translateY(.08em) !important; }
html.motion .pin .hl .w.lit { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { html.motion .pin .hl .w:not(.lit) { opacity: 1 !important; transform: none !important; } }

.pin .hl em { margin-left: .22em; }

/* v47.5 · Section D polaroid plays the storefront clip */
.zine__pol--vid .polaroid__img { aspect-ratio: 3 / 4; }
.zine__pol--vid .polaroid__img > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   v48 · Stories (Sanity): polaroid cards, /stories/ index, story article
   ========================================================================== */
.story > .section, .story > div.section { background-image: var(--paper-edge), var(--paper-stain), var(--paper-grain) !important; background-blend-mode: multiply, multiply, normal; }
.stories-sec { background-color: var(--cream); position: relative; overflow: hidden; isolation: isolate; }
.stories-sec__ghost { color: rgba(230,0,126,.06); right: -2vw; top: 40px; }
.stories-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin: clamp(24px, 3vw, 40px) 0 clamp(36px, 4vw, 56px); }
.stories-sec__head h2 { margin: 0; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1; }
.stories-sec__all, .strel__all { text-align: center; margin: clamp(36px, 4vw, 56px) 0 0; }
.stories-sec[hidden] { display: none !important; }

/* polaroid story card */
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 340px)); justify-content: start; gap: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 48px); align-items: start; }
.stgrid--home, .stgrid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 320px)); justify-content: start; }
.stcard { transition: translate .6s var(--spring, var(--ease)); }
.stcard:nth-child(even) { margin-top: clamp(0px, 3vw, 36px); }
.stcard__link { display: block; color: inherit; text-decoration: none; }
.stcard__pol { --pw: 100%; rotate: var(--r, 0deg) !important; }
.stcard__pol .polaroid__img img { transition: transform 1s var(--ease); }
.stcard:hover { translate: 0 -6px; }
.stcard:hover .stcard__pol { rotate: 0deg !important; }
.stcard:hover .polaroid__img img { transform: scale(1.04); }
.stcard__txt { padding: 16px 6px 0; }
.stcard__cat { font: 400 .7rem/1 var(--f-strip); letter-spacing: .2em; text-transform: uppercase; color: var(--pink-text); margin: 0 0 10px; }
.stcard__h { font: 600 clamp(1.25rem, 1rem + .7vw, 1.55rem)/1.15 var(--f-display); margin: 0 0 10px; text-wrap: balance; }
.stcard__link:hover .stcard__h { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.stcard__ex { font: 400 .98rem/1.55 var(--f-body); color: var(--ink-2); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stcard__meta { font: 400 .74rem/1.3 var(--f-strip); letter-spacing: .06em; color: #6b6660; margin: 0; }

/* /stories/ index */
.stindex { background-color: var(--cream-2); position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(28px, 4vw, 56px); }
.stindex__ghost { color: rgba(255,255,255,.5); }
.stindex__head { max-width: 860px; margin: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 36px); }
.stindex__h { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.2rem); line-height: .98; margin: 14px 0 18px; }
.stindex__lede { font: 400 clamp(1.02rem, .95rem + .3vw, 1.18rem)/1.6 var(--f-body); color: var(--ink-2); max-width: 640px; margin: 0 0 14px; }
.st-crumbs { font: 400 .72rem/1 var(--f-strip); letter-spacing: .14em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 8px; color: #6b6660; }
.st-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.st-crumbs a:hover { color: var(--pink-text); }
.stchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(40px, 5vw, 64px); }
.stchip { font: 400 .76rem/1 var(--f-strip); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 10px 14px; background: #fffdf7; border: 1px solid var(--ink); border-radius: 999px; transition: background .2s, color .2s; min-height: 40px; display: inline-flex; align-items: center; }
.stchip:hover { background: var(--pink-soft); }
.stchip.is-on { background: var(--ink); color: #fff; }
.st-none { font: 400 1.05rem/1.6 var(--f-body); }
.stindex__cta, .stcta { margin: clamp(56px, 6vw, 96px) auto 0; text-align: center; display: grid; justify-items: center; gap: 14px; }
.stindex__cta p { font: 400 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.1 var(--f-script); color: var(--pen); margin: 0; rotate: -2deg; }
.st-empty { background-color: var(--cream-2); min-height: 70vh; display: grid; align-items: center; }
.st-empty h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: 1; margin: 12px 0 18px; }

/* story · header */
.sthero { background-color: var(--cream); position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 80px); }
.sthero__ghost { color: rgba(230,0,126,.05); }
.sthero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(24px, 3vw, 44px); }
.sthero__h { font: 600 clamp(2.2rem, 1.1rem + 3.6vw, 4.4rem)/1.02 var(--f-display); letter-spacing: -.01em; margin: 18px 0 20px; text-wrap: balance; }
.sthero__dek { font: italic 400 clamp(1.1rem, 1rem + .45vw, 1.4rem)/1.5 var(--f-body); color: var(--ink-2); margin: 0 0 22px; max-width: 620px; }
.sthero__by { font: 400 .78rem/1.8 var(--f-strip); letter-spacing: .08em; text-transform: uppercase; color: #5f5a54; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); max-width: 620px; }
.sthero__by b { color: var(--ink); font-weight: 700; }
.sthero__media { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 0; min-height: 300px; }
.sthero__pol { --pw: min(100%, 400px); }
.sthero__pol .polaroid__img { aspect-ratio: 32 / 38; }
.stvid__wrap { margin: 0; position: relative; z-index: 2; width: min(46%, 230px); margin-left: -12%; margin-top: 18%; rotate: 3deg; background: #fffefa; padding: 8px 8px 0; box-shadow: 0 1px 1px rgba(40,30,10,.08), 0 18px 30px -18px rgba(40,30,10,.5); }
.sthero__media:not(:has(.sthero__pol)) .stvid__wrap { width: min(100%, 360px); margin: 0; }
.stvid { position: relative; background: #111; overflow: hidden; }
.stvid--ig { aspect-ratio: 9 / 16; }
.stvid--yt { aspect-ratio: 16 / 9; }
.sthero__media .stvid--yt { aspect-ratio: 9 / 12; }
.stvid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stvid--ig iframe { height: calc(100% + 120px); top: -54px; }
.stvid__wrap figcaption { font: 400 .72rem/1 var(--f-strip); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 10px 4px 12px; }
.stvid__wrap .hw { font: 400 1.05rem/1 var(--f-script); color: var(--pen); text-transform: none; letter-spacing: 0; }
.stvid__link { text-align: center; }

/* story · body */
.stbody { background-color: var(--cream-2); padding-top: clamp(48px, 6vw, 96px); }
.stbody__grid { display: grid; grid-template-columns: minmax(0, 740px) minmax(200px, 260px); justify-content: center; gap: clamp(32px, 7vw, 140px); align-items: start; }
.stbody__side { position: sticky; top: calc(var(--header-h, 0px) + 32px); display: grid; gap: 28px; }
.stprose { font: 400 clamp(1.06rem, 1rem + .25vw, 1.2rem)/1.75 var(--f-body); color: var(--ink); }
.stprose p { margin: 0 0 1.15em; }
.stprose--intro > p:first-child::first-letter { float: left; font: 700 4.6em/.82 var(--f-display); color: var(--pink); padding: .06em .1em 0 0; }
.stprose--intro p { font-size: 1.06em; }
.stprose h2 { font: 600 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.12 var(--f-display); margin: 1.9em 0 .6em; scroll-margin-top: 90px; text-wrap: balance; }
.stprose h2::before { content: ""; display: block; width: 56px; height: 3px; background: var(--pink); margin-bottom: 18px; }
.stprose h3 { font: 600 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.25 var(--f-display); margin: 1.6em 0 .5em; scroll-margin-top: 90px; }
.stprose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.stprose a:hover { color: var(--pink-text); }
.stprose ul, .stprose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.stprose li { margin: 0 0 .45em; }
.stprose li::marker { color: var(--pink); }
.stprose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--pink); font-style: italic; }
.stprose blockquote p { margin: 0; }
.st-pull { margin: 2em 0; padding: 26px 28px 22px; background: #fffdf7; rotate: -.8deg; box-shadow: 0 18px 30px -22px rgba(40,30,10,.45); position: relative; }
.st-pull::before { content: "“"; position: absolute; top: -26px; left: 14px; font: 700 5rem/1 var(--f-display); color: var(--pink); }
.st-pull blockquote { margin: 0; padding: 0; border: 0; font: italic 500 clamp(1.3rem, 1.05rem + .9vw, 1.75rem)/1.35 var(--f-display); }
.st-pull blockquote p { margin: 0; }
.st-pull figcaption { font: 400 .76rem/1 var(--f-strip); letter-spacing: .12em; text-transform: uppercase; margin-top: 14px; color: #5f5a54; }
.st-pull figcaption::before { content: "— "; }
.st-fig { margin: 2em 0; }
.st-fig img { width: auto; max-width: 100%; height: auto; max-height: min(78vh, 720px); display: block; margin: 0 auto; }
.st-fig figcaption { font: 400 .76rem/1.4 var(--f-strip); letter-spacing: .04em; color: #5f5a54; margin-top: 10px; }

/* business snapshot · a clipped newspaper box */
.stsnap { margin: 8px 0 clamp(36px, 4vw, 52px); background: #fffdf7; border: 1.5px solid var(--ink); padding: 22px 24px 8px; position: relative; box-shadow: 6px 6px 0 var(--pink-soft); }
.stsnap__h { font: 400 .74rem/1 var(--f-strip); letter-spacing: .24em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 3px double var(--ink); }
.stsnap dl { margin: 0; }
.stsnap dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.stsnap dl > div:last-child { border-bottom: 0; }
.stsnap dt { font: 400 .72rem/1.5 var(--f-strip); letter-spacing: .08em; text-transform: uppercase; color: #6b6660; }
.stsnap dd { margin: 0; font: 400 1rem/1.5 var(--f-body); }
.stsnap dd a { color: var(--ink); text-decoration-color: var(--pink); }

.stsec__h { font: 600 clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem)/1.15 var(--f-display); margin: clamp(48px, 5vw, 72px) 0 22px; }
.stgal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 30px 22px; }
.stgal__pol { --pw: 100%; }
.stgal__pol figcaption { font-size: 1rem; }
.stfaq__q { border-top: 1px solid var(--ink); padding: 4px 0; }
.stfaq__q:last-child { border-bottom: 1px solid var(--ink); }
.stfaq__q summary { cursor: pointer; list-style: none; font: 600 1.1rem/1.4 var(--f-display); padding: 16px 40px 16px 0; position: relative; }
.stfaq__q summary::-webkit-details-marker { display: none; }
.stfaq__q summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 1.6rem/1 var(--f-display); color: var(--pink); transition: rotate .3s var(--ease); }
.stfaq__q[open] summary::after { rotate: 45deg; }
.stfaq__q p { font: 400 1.02rem/1.65 var(--f-body); margin: 0 0 18px; color: var(--ink-2); }
.stsrc ul { list-style: none; padding: 0; margin: 0; font: 400 .98rem/1.6 var(--f-body); }
.stsrc li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.stsrc a { color: var(--ink); text-decoration-color: var(--pink); }
.stsrc span { color: #6b6660; }
.sttrans { margin: 32px 0 0; border: 1px solid var(--line); background: #fffdf7; }
.sttrans summary { cursor: pointer; font: 400 .78rem/1 var(--f-strip); letter-spacing: .12em; text-transform: uppercase; padding: 16px 18px; }
.sttrans div { padding: 0 18px 18px; font: 400 .95rem/1.7 var(--f-strip); max-height: 60vh; overflow: auto; }
.stwho { display: flex; align-items: center; gap: 26px; margin: clamp(48px, 5vw, 72px) 0 0; padding: 24px; background: var(--pink-soft); }
.stwho__pol { --pw: 130px; flex: none; }
.stwho__pol figcaption { font-size: 1rem; padding: 10px 4px 12px; }
.stwho .tw-label { margin-bottom: 8px; }
.stwho__name { font: 600 1.5rem/1.15 var(--f-display); margin: 0 0 4px; }
.stwho__role { font: italic 400 1rem/1.4 var(--f-body); margin: 0 0 8px; }
.stwho__links { font: 400 .78rem/1 var(--f-strip); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.stwho__links a { color: var(--ink); }
.stnote { font: italic 400 .92rem/1.6 var(--f-body); color: #6b6660; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.stcta { padding: clamp(36px, 4vw, 56px) 20px; border: 1.5px dashed var(--ink); background: #fffdf7; }
.stcta__k { font: 400 .76rem/1 var(--f-strip); letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.stcta__h { font: 400 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--f-script); color: var(--pen); margin: 0 0 6px; rotate: -2deg; }
.sttoc, .stshare { font: 400 .95rem/1.45 var(--f-body); }
.sttoc__h { font: 400 .72rem/1 var(--f-strip); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.sttoc ol { list-style: none; counter-reset: t; padding: 0; margin: 0; display: grid; gap: 10px; }
.sttoc li { counter-increment: t; display: grid; grid-template-columns: 26px 1fr; }
.sttoc li::before { content: counter(t, decimal-leading-zero); font: 400 .72rem/1.9 var(--f-strip); color: var(--pink-text); }
.sttoc a { color: var(--ink); text-decoration: none; }
.sttoc a:hover { text-decoration: underline; text-decoration-color: var(--pink); }
.stshare { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.stshare .sttoc__h { flex-basis: 100%; }
.stshare a, .stshare button { font: 400 .76rem/1 var(--f-strip); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: none; border: 0; border-bottom: 1.5px solid var(--pink); padding: 6px 0; cursor: pointer; text-decoration: none; }
.strel { background-color: var(--cream); }
.strel .stgrid { margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 960px) {
  .sthero__grid { grid-template-columns: minmax(0, 1fr); }
  .sthero__by { overflow-wrap: anywhere; letter-spacing: .04em; }
  .sthero__media { justify-content: center; padding: 10px 0 0; }
  .sthero__pol { --pw: min(72vw, 340px); }
  .stvid__wrap { width: min(44vw, 200px); margin-left: -18vw; margin-top: 22vw; }
  .stbody__grid { grid-template-columns: minmax(0, 1fr); }
  .stbody__side { position: static; order: -1; }
  .stbody__side .sttoc { display: none; }
  .stbody__side .stshare { order: 2; }
  .stcard:nth-child(even) { margin-top: 0; }
}
@media (max-width: 560px) {
  .stsnap { padding: 18px 16px 6px; }
  .stsnap dl > div { grid-template-columns: 1fr; gap: 2px; }
  .stwho { flex-direction: column; align-items: flex-start; }
  .stgrid { gap: 44px; }
  .stbody__side { display: none; }
}

.stcard__noimg { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; gap: 10px; padding: 18px; background: var(--pink-soft) var(--paper-grain); }
.stcard__noimg small { font: 400 .62rem/1 var(--f-strip); letter-spacing: .22em; text-transform: uppercase; }
.stcard__noimg b { font: 600 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.05 var(--f-display); }
.stcard__noimg i { font: 400 1.1rem/1 var(--f-script); color: var(--pen); }
/* v41 · Founder's Recommendation + location box (reuses .stgal/.polaroid tokens) */
.strec__lede { margin: -8px 0 28px; }
.strec__loc { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 22px 26px; box-shadow: 6px 6px 0 var(--pink-soft); }
.strec__loc-h { font: 600 1.15rem/1.2 var(--f-display); margin: 0 0 4px; }
.strec__loc-p { font: 400 .95rem/1.4 var(--f-body); color: var(--stone); margin: 0; }
@media (max-width: 480px) { .strec__loc { flex-direction: column; align-items: stretch; text-align: center; } .strec__loc .btn { width: 100%; justify-content: center; } }