/* Hallmark · shape: Marquee Hero · genre: editorial · theme: Atelier (deal 1/3, seed luxury-nail-salon-day-2886·13b03a02·2026-11-05·r0) · job: book · draw: 7183c5
 * hero: Settled (/), Banner (/menu, /gallery) · nav: banner over a sticky bar that stays on scroll (by request) · footer: index columns · imagery: photographs, 9 on home, Unsplash License stand-ins in slots · signature: the treatments as a pinned chapter, each with a three-photograph mosaic in square frames and its prices on gold leaders
 * axes: dark/roman-serif/warm · posture: committed (gold carries the heads and the reading text, by request) · modes: dark (default) + light, toggled in the header · mode: dark by request, the salon's own golds #D4AF37, #F4E5C3 and #C9A961 on near-black · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a Marquee head alone could be any spa; anchored it on the street name and made the treatment mosaics carry the real menu and prices */
/* Hallmark · swap: the draw's Counter hero became a Settled one by the owner's choice of layout variant 2: a centred head over a framed photograph */
/* Hallmark · waive 85 · the VIP list form is kept from the salon's current site · the owner already runs a VIP offers list; the page closes on hours, address and booking above it */
/* Hallmark · waive 83 · the gallery page is the salon's portfolio of nail work · its photographs are the content; the home page keeps pictures near a quarter of its length */
/* Hallmark · waive 39b · each photograph in the Gallery is a button that opens it full size · those frames are pictures, while the menu and Book online controls stay 44 to 52px */
/* Hallmark · dismissed 49 · gallery captions sit inside the photograph buttons and may wrap under the picture */
/* Hallmark · dismissed 77 · the gallery page is a sub-page of four sections: its head, the photographs, the booking band and the footer */
/* Hallmark · dismissed 58 · the 85-word window on the home page holds the price card's six service choices and four price rows, counted as words */
/* Hallmark · waive 23 · gold heads, gold rules and gold filled booking controls fill more than 8% of the menu and gallery screens · the owner asked for more gold, after the salon's own gold-on-black identity */
/* Hallmark · answered F4 · the gold Book now tab is the salon's persistent call-and-book rail kept from the live site; inside the page there is one filled primary */
/* Hallmark · dismissed 23 · the gold top banner is a colour field the owner asked for, not accent creep */
/* Hallmark · motion: GSAP, ScrollTrigger and Lenis at the user's request (one settle, one reveal batch; the treatments are a pinned chapter, scroll steps through the six and each mosaic opens); three.js draws the theme's air */
@import url("./tokens.css");
@import url("./base.css");

:root {
  /* polish shades, one per category: the hero air's tint */
  --polish-1: oklch(73% 0.085 15); --polish-2: oklch(52% 0.19 22); --polish-3: oklch(82% 0.075 82); --polish-4: oklch(40% 0.12 345); --polish-5: oklch(77% 0.095 48); --polish-6: oklch(67% 0.065 152);

  --air-1: oklch(16% 0.012 62); --air-2: oklch(21% 0.03 70); --air-3: oklch(28% 0.06 76); --air-4: oklch(20% 0.03 40);
  --scrim: oklch(10% 0.01 60 / 0.82);
  --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='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.12' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* the second colour: emerald, for the reviews band, the chosen tab, the drop cap, today and hover */
  --color-second: oklch(42% 0.08 172); --color-second-deep: oklch(27% 0.055 172); --color-second-light: oklch(76% 0.11 168); --color-second-ink: oklch(97% 0.012 85);
  /* inks on the emerald band, the same in both modes */
  --band-ink: oklch(78.5% 0.13 87); --band-ink-2: oklch(92.5% 0.045 85); --band-muted: oklch(74% 0.09 84); --band-edge: oklch(56% 0.1 85); --band-focus: oklch(88% 0.12 92);
  --color-accent-hover: oklch(84% 0.12 90);
  --banner-h: 40px; --bar-h: 72px;
  --shade-press: oklch(8% 0.01 60 / 0.55); --shade-strip: oklch(6% 0.01 60 / 0.5); --shade-strip-up: oklch(6% 0.01 60 / 0.7);
}
:root[data-theme="light"] {
  --air-1: oklch(96% 0.012 85); --air-2: oklch(91% 0.04 78); --air-3: oklch(87% 0.06 70); --air-4: oklch(93% 0.025 40);
  --color-second-light: oklch(45% 0.09 172);
  --color-accent-hover: oklch(70% 0.14 86);
  --scrim: oklch(25% 0.02 60 / 0.6);
  --shade-press: oklch(30% 0.03 60 / 0.14); --shade-strip: oklch(30% 0.03 60 / 0.18); --shade-strip-up: oklch(30% 0.03 60 / 0.24);
}

/* ---------- Base voice ---------- */
body { color: var(--color-ink-2); line-height: 1.6; }
h1, h2 { font-weight: var(--display-weight); color: var(--color-ink); }
h3 { font-weight: var(--serif-small); color: var(--color-ink); letter-spacing: -0.01em; }
.lead { color: var(--color-ink-2); }
.note { max-width: 56ch; font-size: var(--text-sm); color: var(--color-muted); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
main, .footer { position: relative; z-index: var(--z-raised); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--ink { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.btn--ink:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); color: var(--color-accent-ink); }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-ink); text-decoration-color: var(--color-second-light); text-decoration-thickness: 2px; }
.link:active { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Chrome: a banner over a sticky bar that stays on scroll ---------- */
.masthead { display: contents; }
.banner { position: relative; z-index: var(--z-sticky-nav); min-height: var(--banner-h); display: flex; align-items: center; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); }
.banner__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.banner a { color: var(--color-accent-ink); text-decoration-color: color-mix(in oklab, var(--color-accent-ink) 45%, transparent); }
.banner a:hover { text-decoration-color: var(--color-accent-ink); text-decoration-thickness: 2px; }
.banner a:focus-visible { outline-color: var(--color-accent-ink); }
.banner__where { display: flex; gap: var(--space-lg); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar__row { display: flex; align-items: center; min-height: var(--bar-h); gap: var(--space-lg); }
.wordmark { font: var(--serif-small) var(--text-title)/1 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.bar__links { display: flex; align-items: center; gap: var(--space-xl); }
.bar__links ul { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.bar__links ul a { color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.bar__links ul a:hover, .bar__links ul a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-second-light); }
.bar__links .btn { min-height: 44px; }
.theme-toggle { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: var(--rule-hair) solid var(--color-card-edge); border-radius: 50%; background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.theme-toggle:hover { background: var(--color-paper-3); border-color: var(--color-ink); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }
.wordmark { margin-right: auto; }
.bar__toggle { display: none; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; }
.bar__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- The air (three.js) ---------- */
.air { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.air.is-live { opacity: 1; }
[data-air-zone] { position: relative; isolation: isolate; }
[data-air-zone]::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); background-size: 180px; opacity: 0.22; mix-blend-mode: soft-light; pointer-events: none; }

/* ---------- Hero: a centred head over a tall framed photograph, the booking and today's door beside it ---------- */
.hero { display: grid; align-content: center; min-height: calc(100dvh - var(--banner-h) - var(--bar-h)); padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.hero__title { grid-column: 1 / -1; justify-self: center; max-width: none; text-align: center; font-size: clamp(3rem, 6.2vw, 6.25rem); line-height: 1; letter-spacing: -0.03em; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.word > span { display: inline-block; }
.hero__side { grid-column: 1 / span 3; display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--space-md); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.hero__side .hero__actions { display: grid; gap: var(--space-md); justify-items: start; }
.hero__portrait { grid-column: 5 / span 4; height: clamp(300px, calc(100dvh - 480px), 520px); margin: 0; outline: 1px solid var(--color-card-edge); outline-offset: 10px; }
.hero__visit { grid-column: 10 / span 3; justify-items: end; text-align: right; }
.hero__visit address { font: var(--display-weight) var(--text-xl)/1.2 var(--font-display); font-style: normal; color: var(--color-ink); }

/* Card stock (the drinks card) */
.stock { position: relative; border-radius: 2px; background: linear-gradient(160deg, var(--card-lit), var(--color-card) 60%); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); }
.stock::before { content: ""; position: absolute; inset: 0.875rem; border: var(--rule-hair) solid var(--color-card-edge); pointer-events: none; }
.card { position: relative; z-index: 2; display: grid; gap: var(--space-md); padding: var(--space-xl); }

/* ---------- Section rhythm ---------- */
.menu-strips, .work, .drinks, .visit { background: var(--color-paper); }
.menu-strips { padding-block: var(--section-gap) var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-ink); }
.head-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head-split h2 { grid-column: 1 / span 6; }
.head-split .lead { grid-column: 8 / -1; }

/* Treatments: tabs over a three-photograph mosaic and a gold-leader price list */
.strips { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.strips__rail { grid-column: 1 / -1; position: relative; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.tabx { min-height: 52px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--color-muted); font: var(--serif-small) var(--text-lead)/1 var(--font-display); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.tabx:hover { color: var(--color-ink-2); }
.tabx[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-second-light); }
.tabx:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.strips__panels { grid-column: 1 / -1; margin-top: var(--space-2xl); }
.panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.panel + .panel { margin-top: var(--space-3xl); }
.is-tabbed .panel + .panel { margin-top: 0; }
.strips:not(.is-tabbed) .strips__rail { display: none; }
.mosaic { --mosaic-h: 560px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-md); height: var(--mosaic-h); }
.mosaic figure { margin: 0; }
.mosaic__lead { grid-row: 1 / span 2; }
.mosaic__lead::after { content: ""; position: absolute; inset: var(--space-sm); z-index: 2; border: 1px solid color-mix(in oklab, var(--color-ink) 55%, transparent); pointer-events: none; }
.panel__body { display: grid; gap: var(--space-md); align-content: center; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-head) solid var(--color-ink); }
.panel__head h3 { font-size: var(--text-2xl); font-weight: var(--display-weight); }
.panel__intro { color: var(--color-ink-2); }
.ledger { margin: 0; padding: 0; list-style: none; }
.ledger li { display: flex; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-xs); }
.ledger__name { min-width: 0; color: var(--color-ink-2); }
.ledger__dots { flex: 1; min-width: var(--space-lg); border-bottom: 1px dotted var(--color-card-edge); transform: translateY(-4px); }
.price { flex-shrink: 0; font: var(--serif-small) var(--text-md)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { font: 400 var(--text-xs)/1 var(--font-body); color: var(--color-muted); }
.also { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); max-width: 90ch; }

/* The treatments as a pinned chapter: a tall track, the section stuck to the screen while scroll steps through the six */
.menu-strips.is-chapter { height: calc(100dvh + (var(--steps, 6) - 1) * 70dvh); padding-block: 0; }
.is-chapter .menu-strips__pin { position: sticky; top: var(--bar-h); display: grid; align-content: center; min-height: calc(100dvh - var(--bar-h)); padding-block: var(--space-lg) var(--space-xl); }
.is-chapter .head-split { margin-bottom: var(--space-xl); }
.is-chapter .mosaic { --mosaic-h: clamp(280px, calc(100dvh - 410px), 540px); }
.is-chapter .strips__panels { display: grid; margin-top: var(--space-xl); }
.is-chapter .strips__panels > .panel { grid-area: 1 / 1; transition: opacity 0.7s var(--ease-out), visibility 0s linear 0s; }
.is-chapter .strips__panels > .panel[hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease-in-out), visibility 0s linear 0.45s; }
.is-chapter .panel .mosaic figure, .is-chapter .panel .panel__body > * { transition: transform 0.9s var(--ease-out), opacity 0.7s var(--ease-out); }
.is-chapter .panel .mosaic__side:nth-child(2) { transition-delay: 0.06s; }
.is-chapter .panel .mosaic__side:nth-child(3) { transition-delay: 0.12s; }
.is-chapter .panel .panel__body > :nth-child(2) { transition-delay: 0.05s; }
.is-chapter .panel .panel__body > :nth-child(3) { transition-delay: 0.1s; }
.is-chapter .panel .panel__body > :nth-child(4) { transition-delay: 0.15s; }
.is-chapter .panel[hidden] .mosaic__lead { transform: translateY(var(--space-lg)) scale(0.985); }
.is-chapter .panel[hidden] .mosaic__side { transform: translateY(var(--space-xl)); opacity: 0; }
.is-chapter .panel[hidden] .panel__body > * { transform: translateY(var(--space-md)); opacity: 0; }
.treatments .head-split h2 { grid-column: 1 / span 8; }
.treatments .head-split .lead { grid-column: 9 / -1; }
.is-chapter .also { margin-top: var(--space-lg); }

/* Statement over the air */
.statement { padding-block: var(--section-gap-s); }
.statement__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: end; }
.statement__line { grid-column: 1 / span 7; max-width: 16ch; font-size: var(--text-display); line-height: 1.02; letter-spacing: var(--tracking-statement); }
.dropcap { grid-column: 8 / -1; max-width: 52ch; font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); }
.dropcap::first-letter { float: left; font: var(--serif-small) 3.3em/0.8 var(--font-display); padding: 0.1em 0.1em 0 0; color: var(--color-second-light); }

/* Work: a showcase, one wide over a pair */
.work { padding-block: var(--section-gap) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.work figure { margin: 0; }
.work figure > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.work__lead { aspect-ratio: 2 / 1; min-height: 360px; }
.work__pair { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); margin-top: var(--gap-columns); height: clamp(360px, 40vw, 560px); }
.work__wide, .work__tall { height: 100%; }

/* Drinks on a house card */
.drinks { padding-block: var(--section-gap-s); color: var(--color-ink-2); background: var(--color-paper-2); }
.drinks__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.drinks__head { grid-column: 1 / span 5; align-self: start; display: grid; gap: var(--space-md); padding-top: var(--space-2xl); }
.drinks__card { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); padding: var(--space-2xl) var(--space-xl); }
.drinks__card h3 { margin-bottom: var(--space-md); font-size: var(--text-xl); }
.plain { margin: 0; padding: 0; list-style: none; }
.plain li { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }

/* Visit: the timetable, the address, the booking again */
.visit { padding-block: var(--section-gap) var(--section-gap-l); }
.visit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: stretch; }
.visit__title { grid-column: 1 / -1; }
.visit__table { grid-column: 1 / span 6; }
.visit__map { grid-column: 7 / -1; position: relative; min-height: 420px; margin: 0; outline: 1px solid var(--color-card-edge); outline-offset: 10px; background: var(--color-paper-2); }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.25) invert(0.9) hue-rotate(180deg) contrast(0.92) brightness(0.95); }
[data-theme="light"] .visit__map iframe { filter: grayscale(0.2) contrast(0.98); }
[data-theme="light"] [data-air-zone]::after { mix-blend-mode: multiply; opacity: 0.14; }
.timetable { width: 100%; border-collapse: collapse; border-top: var(--rule-head) solid var(--color-ink); }
.timetable thead th { padding-block: var(--space-sm); font: 400 var(--text-sm) var(--font-body); color: var(--color-muted); text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.timetable tbody th, .timetable td { height: 60px; padding: 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; }
.timetable tbody th { font: var(--serif-small) var(--text-title)/1 var(--font-display); color: var(--color-ink); }
.timetable td { font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.timetable tr.is-today th { text-decoration: underline; text-decoration-color: var(--color-second-light); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.timetable tr.is-today td::after { content: "today"; margin-left: var(--space-sm); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-second-ink); background: var(--color-second); }
.visit__where { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.visit__address { font: var(--display-weight) var(--text-2xl)/1.15 var(--font-display); font-style: normal; color: var(--color-ink); }
.visit__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.visit__phone a { font-size: var(--text-lead); color: var(--color-ink); text-decoration: none; }
.visit__phone a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ---------- Footer: index columns ---------- */
.footer { padding-block: var(--space-3xl) var(--space-xl); color: var(--color-ink-2); background: var(--color-paper-2); border-top: var(--rule-head) solid var(--color-ink); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.footer__brand { grid-column: 1 / span 4; display: grid; gap: var(--space-sm); align-content: start; }
.wordmark--lg { font-size: var(--text-2xl); }
.footer__grid > div:not(.footer__brand) { grid-column: span 2; display: grid; gap: var(--space-xs); align-content: start; }
.footer__head { max-width: none; font: 400 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.footer address { font-style: normal; }
.footer a { color: var(--color-ink); text-decoration-color: var(--color-rule); }
.footer a:hover { text-decoration-color: var(--color-accent); }
.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.social { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.social a { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; text-decoration: none; }
.social__mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-card-edge); border-radius: 50%; color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.social__mark svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.social a:hover .social__mark { background: var(--color-second); border-color: var(--color-second); color: var(--color-second-ink); }
.social a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Reviews from Google, on the emerald band ---------- */
.reviews { --color-ink: var(--band-ink); --color-ink-2: var(--band-ink-2); --color-muted: var(--band-muted); --color-card-edge: var(--band-edge); --color-focus: var(--band-focus); padding-block: var(--section-gap-s); color: var(--color-ink-2); background: var(--color-second-deep); border-block: 1px solid var(--color-second); }
.reviews__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.reviews__head { grid-column: 1 / span 4; display: grid; gap: var(--space-lg); justify-items: start; }
.reviews--invite .reviews__head { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gap-columns); }
.reviews--invite .reviews__head h2 { grid-column: 1; }
.reviews--invite .reviews__head .lead { grid-column: 2; grid-row: 1; }
.reviews--invite .reviews__head .btn { grid-column: 2; }
.reviews__list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.review { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-xl); background: color-mix(in oklab, var(--color-second-deep) 70%, var(--color-paper)); box-shadow: inset 0 0 0 1px var(--color-second); }
.review__stars { display: flex; gap: var(--space-3xs); color: var(--color-accent); }
.review__stars svg { fill: currentColor; }
.review__text { margin: 0; font: var(--display-weight) var(--text-xl)/1.35 var(--font-display); color: var(--color-ink); }
.review__who { display: grid; color: var(--color-ink-2); }
.review__who span { font-size: var(--text-sm); color: var(--color-muted); }
.vip { grid-column: 1 / span 5; display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.vip label { color: var(--color-ink); }
.vip__row { display: flex; gap: var(--space-xs); }
.vip input { flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.vip input:focus-visible { outline-color: var(--color-focus); }
.vip input[aria-invalid] { border-color: var(--color-error); }
.vip__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer__legal p { display: flex; gap: var(--space-lg); }
.footer__legal p[data-credits] { display: block; }
.footer__legal a { color: var(--color-muted); }

/* ---------- The sticky booking bar ---------- */
/* ---------- Call and book, docked to the left edge (kept from the live site) ---------- */
.rail { position: fixed; z-index: var(--z-sticky); left: 0; top: 50%; display: grid; gap: var(--space-sm); justify-items: start; transform: translateY(-50%); }
.rail__btn { --tab: 52px; display: flex; align-items: center; gap: var(--space-sm); min-height: var(--tab); padding-left: var(--space-lg); border-radius: 0 999px 999px 0; text-decoration: none; white-space: nowrap; font: 400 var(--text-md)/1 var(--font-body); box-shadow: inset 0 0 0 1px var(--color-card-edge); transform: translateX(calc(-100% + var(--tab))); transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.rail__btn:hover, .rail__btn:focus-visible { transform: translateX(0); }
.rail__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rail__btn:active .rail__icon { transform: scale(0.94); }
.rail__icon { display: grid; place-items: center; width: var(--tab); height: var(--tab); flex-shrink: 0; transition: transform var(--dur-micro) var(--ease-out); }
.rail__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail__btn--call { background: var(--color-paper-3); color: var(--color-ink); }
.rail__btn--book { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
.rail__btn--book:hover { background: var(--color-accent-hover); }

/* ---------- Menu page ---------- */
.page-head { padding-block: var(--space-3xl) var(--section-gap-s); }
.page-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.page-head h1 { grid-column: 1 / span 7; max-width: none; font-size: var(--text-display); line-height: 1; }
.page-head__grid > div { grid-column: 8 / -1; display: grid; gap: var(--space-md); }
.close-band { padding-block: var(--section-gap-s); color: var(--color-ink-2); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.close-band__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; }
.close-band h2 { grid-column: 1 / span 6; }
.close-band .lead { grid-column: 7 / -1; }
.close-band__actions { grid-column: 7 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-md); }

/* ---------- Gallery page ---------- */
.gallery { padding-block: 0 var(--section-gap); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-head) solid var(--color-ink); }
.filter { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.filter:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.filter[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.filter:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filters__status { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.hang { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: var(--gap-columns); }
.hang li { break-inside: avoid; margin-bottom: var(--space-2xl); }
.hang__item { display: grid; gap: var(--space-sm); width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; }
.hang__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.hang__frame { display: block; width: 100%; }
.hang__frame > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.hang__cap { font-size: var(--text-sm); color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.hang__item:hover .hang__cap { text-decoration-color: var(--color-accent); }
.lightbox { width: fit-content; max-width: min(100% - var(--space-xl), 1200px); max-height: calc(100dvh - var(--space-xl)); padding: var(--space-lg); border: 0; border-radius: 2px; background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); }
.lightbox::backdrop { background: var(--scrim); }
.lightbox figure { margin: 0; display: grid; gap: var(--space-sm); }
.lightbox img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 12rem); object-fit: contain; }
.lightbox figcaption, .lightbox__controls { min-width: 22rem; }
.lightbox figcaption { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); }
.lightbox__count { color: var(--color-muted); }
.lightbox__controls { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-md); }

/* ---------- Motion: hidden only while GSAP is about to run ---------- */
.js.motion-pending [data-reveal], .js.motion-pending [data-hero-text], .js.motion-pending [data-hero-card] { opacity: 0; }
.js.motion-pending [data-hero-title] { opacity: 0; }

/* ---------- Narrow screens ---------- */
@media (max-width: 75rem) {
  .footer__grid > div:not(.footer__brand) { grid-column: span 4; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 60rem) {
  .treatments .head-split h2, .treatments .head-split .lead { grid-column: 1 / -1; }
  :root { --banner-h: 36px; --bar-h: 64px; }
  .banner__row { font-size: var(--text-sm); }
  .banner__where a:first-child { display: none; }
  .bar__toggle { display: inline-flex; align-items: center; }
  .bar__links { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: var(--space-lg); padding: var(--space-lg) var(--gutter) var(--space-xl); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .bar__links[data-open="true"] { display: flex; }
  .bar__links ul { flex-direction: column; gap: 0; }
  .bar__links ul a { display: flex; align-items: center; min-height: 48px; font-size: var(--text-lead); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero__title { justify-self: start; text-align: left; }
  .hero__side, .hero__portrait, .hero__visit { grid-column: 1 / -1; }
  .hero__portrait { height: 440px; margin-inline: var(--space-sm); }
  .hero__visit { justify-items: start; text-align: left; }
  .reviews__head, .reviews__list, .visit__map { grid-column: 1 / -1; }
  .reviews--invite .reviews__head { grid-template-columns: minmax(0, 1fr); }
  .reviews--invite .reviews__head .lead, .reviews--invite .reviews__head .btn { grid-column: 1; grid-row: auto; }
  .reviews__list { grid-template-columns: minmax(0, 1fr); }
  .visit__map { min-height: 340px; margin-inline: var(--space-sm); }
  .head-split h2, .head-split .lead, .statement__line, .dropcap, .drinks__head, .drinks__card, .visit__table, .visit__where, .page-head h1, .page-head__grid > div, .close-band h2, .close-band .lead, .close-band__actions { grid-column: 1 / -1; }
  .head-split { margin-bottom: var(--space-xl); }
  .strips__rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabx { white-space: nowrap; }
  .strips__panels { margin-top: var(--space-xl); }
  .panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .mosaic { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .mosaic__lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
  .mosaic__side { aspect-ratio: 1; }
  .work__pair { grid-template-columns: minmax(0, 1fr); height: auto; }
  .work__wide { aspect-ratio: 4 / 3; }
  .work__tall { aspect-ratio: 4 / 5; }
  .work__lead { aspect-ratio: 4 / 3; min-height: 0; }
  .hang { columns: 2; }
  /* on phones the rail is a two-button bar along the bottom */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .rail { left: 0; right: 0; top: auto; bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--color-paper-3); border-top: var(--rule-hair) solid var(--color-rule); transform: none; }
  .rail__btn { --tab: 40px; justify-content: center; width: 100%; min-height: 56px; padding: 0 var(--space-md); border-radius: 0; box-shadow: none; transform: none; }
  .rail__btn:hover, .rail__btn:focus-visible { transform: none; }
  .rail__btn--call { background: var(--color-paper-3); }
  .rail__icon { order: -1; width: auto; height: auto; }
}
@media (max-width: 40rem) {
  .banner__where { display: none; }
  .card { padding: var(--space-lg); }
  .drinks__card { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg); }
  .footer__grid > div:not(.footer__brand) { grid-column: span 6; }
  .vip { grid-column: 1 / -1; }
  .hang { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rail__btn, .rail__icon, .tabx, .air, .social__mark, .theme-toggle, .is-chapter .strips__panels > .panel, .is-chapter .panel .mosaic figure, .is-chapter .panel .panel__body > * { transition: none; }
  .js.motion-pending [data-reveal], .js.motion-pending [data-hero-text], .js.motion-pending [data-hero-card] { opacity: 1; }
  .js.motion-pending [data-hero-title] { opacity: 1; }
}