/* ==========================================================================
   BeeNails — boutique nail atelier

   Order: tokens → base → a11y → layout primitives → components → sections
          → lightbox → motion → art-direction breakpoints → print.

   Layout is fluid by default: type and space are clamp()-driven and the
   multi-column sections use intrinsic `auto-fit` grids, so they reflow at
   every width rather than snapping at a handful of breakpoints. The few
   media queries left are art direction (nav mode, gallery mosaic), not
   general reflow.
   ========================================================================== */

:root {
  /* Both themes ship in one set of tokens via light-dark(). Each property is
     declared twice: the bare dark value first, then the light-dark() pair.
     Engines without light-dark() keep the first (dark) declaration and get a
     working dark site; everything else takes the second. That is also why the
     dark value is repeated inside light-dark() — the two lines are one unit,
     so edit them together.

     With no [data-theme] attribute (i.e. JavaScript off) `color-scheme:
     light dark` lets light-dark() follow the OS preference on its own. The
     head bootstrap in index.html pins an explicit attribute when JS is
     available so the toggle can override it. */
  color-scheme: light dark;

  /* ── Surfaces ── */
  --bn-bg:        #15110e;
  --bn-bg:        light-dark(#faf7f1, #15110e);
  --bn-bg-raised: #1b1511;
  --bn-bg-raised: light-dark(#f2ebe0, #1b1511);
  --bn-bg-strip:  #181310;
  --bn-bg-strip:  light-dark(#f5efe4, #181310);
  --bn-bg-deep:   #100d0b;
  --bn-bg-deep:   light-dark(#ebe2d4, #100d0b);
  --bn-slot:      #241d17;
  --bn-slot:      light-dark(#e6dccb, #241d17);

  /* ── Gold ──
     On dark, prominence rises with lightness; on light it rises with depth,
     so the light values run the scale the other way. --bn-gold and below are
     used as *ink* (service tags, roles, prices) and clear 4.5:1 in both
     themes. --bn-gold-surface is the button fill and stays an actual gold in
     both, which is why it is a separate token. */
  --bn-gold:            #c9a15c;
  --bn-gold:            light-dark(#7a5c22, #c9a15c);
  --bn-gold-soft:       #dcbb7d;
  --bn-gold-soft:       light-dark(#6b5019, #dcbb7d);
  --bn-gold-hi:         #efd6a2;
  --bn-gold-hi:         light-dark(#523c0f, #efd6a2);
  --bn-gold-surface:    #c9a15c;
  --bn-gold-surface:    light-dark(#bd9445, #c9a15c);
  --bn-gold-surface-hi: #e0bf7d;
  --bn-gold-surface-hi: light-dark(#a87f34, #e0bf7d);
  /* Ink on a gold fill — dark in both themes, never flips. */
  --bn-on-gold:   #15110e;

  /* Gold used as line and wash rather than as ink. */
  --bn-gold-line: rgba(201, 161, 92, .55);
  --bn-gold-line: light-dark(rgba(138, 106, 42, .5), rgba(201, 161, 92, .55));
  --bn-gold-wash: rgba(201, 161, 92, .12);
  --bn-gold-wash: light-dark(rgba(138, 106, 42, .1), rgba(201, 161, 92, .12));
  --bn-gold-dim:  rgba(201, 161, 92, .45);
  --bn-gold-dim:  light-dark(rgba(138, 106, 42, .5), rgba(201, 161, 92, .45));

  /* ── Text ──
     Every value below clears 4.5:1 against --bn-bg in its own theme; the old
     .45/.40 alphas did not, which is why they are gone. */
  --bn-white:      #fbf7ef;
  --bn-white:      light-dark(#1c1610, #fbf7ef);
  --bn-heading:    #f7f1e6;
  --bn-heading:    light-dark(#241c14, #f7f1e6);
  --bn-cream:      #e9e1d2;
  --bn-cream:      light-dark(#2b2219, #e9e1d2);
  --bn-text:       rgba(242, 237, 226, .84);
  --bn-text:       light-dark(rgba(28, 22, 16, .86), rgba(242, 237, 226, .84));
  --bn-text-mute:  rgba(242, 237, 226, .72);
  --bn-text-mute:  light-dark(rgba(28, 22, 16, .74), rgba(242, 237, 226, .72));
  --bn-text-faint: rgba(242, 237, 226, .60);
  --bn-text-faint: light-dark(rgba(28, 22, 16, .68), rgba(242, 237, 226, .60));
  --bn-slot-fg:    #9b8a70;
  --bn-slot-fg:    light-dark(#665a4a, #9b8a70);

  /* ── Lines, fills, shadows ── */
  --bn-rule:       rgba(201, 161, 92, .18);
  --bn-rule:       light-dark(rgba(138, 106, 42, .3), rgba(201, 161, 92, .18));
  --bn-rule-soft:  rgba(233, 225, 210, .12);
  --bn-rule-soft:  light-dark(rgba(28, 22, 16, .14), rgba(233, 225, 210, .12));
  --bn-sep:        rgba(233, 225, 210, .22);
  --bn-sep:        light-dark(rgba(28, 22, 16, .28), rgba(233, 225, 210, .22));
  --bn-field-line: rgba(233, 225, 210, .26);
  --bn-field-line: light-dark(rgba(28, 22, 16, .3), rgba(233, 225, 210, .26));
  --bn-invalid:    #e0846b;
  --bn-invalid:    light-dark(#b23c1d, #e0846b);
  --bn-option-bg:  #1e1813;
  --bn-option-bg:  light-dark(#fffdf9, #1e1813);

  /* The header is translucent over the (always dark) hero, then solid. */
  --bn-header-glass: rgba(21, 17, 14, .62);
  --bn-header-glass: light-dark(rgba(250, 247, 241, .72), rgba(21, 17, 14, .62));
  --bn-header-solid: rgba(18, 14, 12, .94);
  --bn-header-solid: light-dark(rgba(250, 247, 241, .95), rgba(18, 14, 12, .94));

  /* Dark themes can take a near-black shadow; on light it has to be a warm
     brown at low alpha or every card looks bruised. */
  --bn-shadow:     rgba(0, 0, 0, .7);
  --bn-shadow:     light-dark(rgba(96, 74, 40, .3), rgba(0, 0, 0, .7));
  --bn-shadow-bar: rgba(0, 0, 0, 1);
  --bn-shadow-bar: light-dark(rgba(96, 74, 40, .45), rgba(0, 0, 0, 1));

  /* ── Type families ── */
  --bn-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --bn-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* ── Fluid type scale (320px → 1440px viewport) ── */
  --t-xs:   clamp(.6875rem, .655rem + .16vw,  .75rem);
  --t-sm:   clamp(.8125rem, .781rem + .156vw, .875rem);
  --t-base: clamp(.9375rem, .893rem + .223vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1.006rem + .28vw, 1.1875rem);
  --t-lg:   clamp(1.25rem,  1.116rem + .67vw, 1.625rem);
  --t-xl:   clamp(1.5rem,   1.223rem + 1.39vw, 2.25rem);
  --t-2xl:  clamp(2.125rem, 1.567rem + 2.79vw, 3.75rem);
  --t-3xl:  clamp(2.75rem,  1.411rem + 6.70vw, 6.5rem);

  /* ── Fluid space scale ── */
  --s-1: clamp(.5rem,  .455rem + .22vw, .75rem);
  --s-2: clamp(.75rem, .661rem + .45vw, 1.25rem);
  --s-3: clamp(1rem,   .821rem + .89vw, 2rem);
  --s-4: clamp(1.5rem, 1.232rem + 1.34vw, 3rem);
  --s-5: clamp(2rem,   1.554rem + 2.23vw, 4.5rem);
  --s-6: clamp(2.5rem, 1.607rem + 4.46vw, 7rem);
  --s-section: clamp(4rem, 2.661rem + 6.70vw, 8.5rem);

  /* ── Layout ── */
  --bn-max:    1240px;
  --bn-gutter: clamp(1.25rem, .96rem + 1.45vw, 2.5rem);
  --bn-radius: 14px;
  --bn-ease:   cubic-bezier(.2, .7, .2, 1);

  /* Measured live by main.js so anchor offsets track the real header.
     The literal here is the no-JS fallback. */
  --bn-header-h: 78px;
}

/* An explicit choice pins the scheme; without the attribute the :root
   declaration above leaves it to the OS. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ── Base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

/* Any `display` declaration of ours would otherwise beat the UA's
   [hidden] { display: none } — which silently breaks toggling via .hidden. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Fixed header must not cover the section you jumped to. */
  scroll-padding-top: calc(var(--bn-header-h) + var(--s-2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bn-bg);
  color: var(--bn-text);
  font-family: var(--bn-body);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.7;
  /* `clip` rather than `hidden`: same overflow guard without silently
     killing position: sticky in ancestors. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Body scroll lock while the mobile nav sheet is open. */
body.has-nav-open { overflow: hidden; }

::selection { background: var(--bn-gold-surface); color: var(--bn-on-gold); }

a { color: var(--bn-gold-soft); text-decoration: none; }
a:hover { color: var(--bn-gold-hi); }

:focus-visible {
  outline: 2px solid var(--bn-gold-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--bn-display);
  font-weight: 500;
  color: var(--bn-white);
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* ── Accessibility helpers ────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--bn-gold-surface);
  color: var(--bn-on-gold);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Off-screen until focused — never hidden from the a11y tree. */
  transform: translateY(-200%);
  transition: transform .2s var(--bn-ease);
}
.skip-link:focus-visible {
  transform: none;
  color: var(--bn-on-gold);
}

/* ── Layout primitives ────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--bn-max);
  margin-inline: auto;
}

.section {
  padding-block: var(--s-section);
  padding-inline: var(--bn-gutter);
}

.section--raised {
  padding-block: var(--s-section);
  padding-inline: var(--bn-gutter);
  background: var(--bn-bg-raised);
  border-block: 1px solid var(--bn-rule);
}

/* Small gold-rule eyebrow above every section heading. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bn-gold-soft);
}
.eyebrow::before,
.eyebrow--center::after {
  content: "";
  width: clamp(24px, 3vw, 44px);
  height: 1px;
  background: var(--bn-gold);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.section-title { font-size: var(--t-2xl); line-height: 1.02; }

.section-lede {
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--bn-text-mute);
  margin: 0;
}

.centered-head { text-align: center; margin-bottom: var(--s-5); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px floor keeps every control a comfortable touch target. */
  min-height: 44px;
  padding: 14px clamp(1.25rem, 1rem + 1.2vw, 2.125rem);
  border-radius: 999px;
  font-family: var(--bn-body);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.btn--gold {
  background: var(--bn-gold-surface);
  color: var(--bn-on-gold);
  border: 1px solid transparent;
  transition: background .25s ease, transform .25s var(--bn-ease), box-shadow .25s ease;
}
.btn--gold:hover {
  background: var(--bn-gold-surface-hi);
  color: var(--bn-on-gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(201, 161, 92, .9);
}
.btn--gold:active { transform: translateY(0); }

.btn--ghost {
  border: 1px solid var(--bn-gold-line);
  color: var(--bn-cream);
  background: transparent;
  transition: border-color .25s ease, background .25s ease, transform .25s var(--bn-ease);
}
.btn--ghost:hover {
  border-color: var(--bn-gold);
  background: var(--bn-gold-wash);
  color: var(--bn-cream);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0); }

.btn--sm {
  min-height: 40px;
  padding: 10px 20px;
  font-size: var(--t-xs);
}

/* Nav link with a gold underline that wipes in on hover / for the section
   you are currently looking at (main.js sets aria-current). */
.navlink {
  position: relative;
  display: inline-block;
  padding-block: 4px;
  color: var(--bn-cream);
  transition: color .25s ease;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bn-gold);
  transition: width .3s var(--bn-ease);
}
.navlink:hover { color: var(--bn-white); }
.navlink:hover::after,
.navlink[aria-current="true"]::after { width: 100%; }
.navlink[aria-current="true"] { color: var(--bn-gold-soft); }

/* ── Image slots ──────────────────────────────────────────────────────────
   Every photo on the page is a slot. Until a real image is dropped into
   assets/, the slot renders its data-label as a placeholder. main.js removes
   any <img> that fails to load so the placeholder shows through instead of
   a broken-image icon.
   ────────────────────────────────────────────────────────────────────── */

.slot {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  background:
    linear-gradient(140deg, rgba(201, 161, 92, .07), transparent 60%),
    var(--bn-slot);
}

.slot::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-2);
  text-align: center;
  font-size: var(--t-sm);
  letter-spacing: .04em;
  color: var(--bn-slot-fg);
  pointer-events: none;
}

.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Sits above the ::after placeholder once it actually loads. */
  z-index: 1;
  transition: transform .8s var(--bn-ease);
}

/* Slow zoom on hover, for gallery-style slots. */
@media (hover: hover) {
  .slot--zoom:hover img { transform: scale(1.05); }
}

/* main.js promotes gallery slots that actually have a loaded image into
   lightbox triggers; only then do they advertise themselves as clickable. */
.slot--interactive { cursor: zoom-in; }
.slot--interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(16, 13, 11, .55), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
}
.slot--interactive:hover::before,
.slot--interactive:focus-visible::before { opacity: 1; }

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease, box-shadow .35s ease;
}

/* The frosted panel lives on a pseudo-element, not on .site-header itself.
   backdrop-filter makes an element the containing block for its
   position: fixed descendants — with it on the header, the mobile nav sheet
   gets clipped to the height of the bar instead of filling the viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Enough tint to keep the nav legible where a bright hero photo reaches
     the top edge; the scrolled state below goes fully opaque. */
  background: var(--bn-header-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .35s ease;
}

/* main.js adds .is-scrolled once the page leaves the hero: the bar goes
   from a whisper over the photo to a solid, legible surface. */
.site-header.is-scrolled {
  border-bottom-color: var(--bn-rule);
  box-shadow: 0 14px 34px -24px var(--bn-shadow-bar);
}
.site-header.is-scrolled::before { background: var(--bn-header-solid); }

.site-header__inner {
  max-width: var(--bn-max);
  margin-inline: auto;
  padding: var(--s-1) var(--bn-gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.125rem);
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--bn-white);
}
.brand:hover { color: var(--bn-white); }

.brand__mark {
  width: clamp(38px, 3.4vw, 50px);
  height: clamp(38px, 3.4vw, 50px);
  object-fit: contain;
  background: #f6efe2;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 2px 12px var(--bn-shadow);
  flex: none;
}

.brand__name {
  font-family: var(--bn-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5625rem);
  letter-spacing: .02em;
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.125rem, 2.2vw, 2rem);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Hamburger — swapped in for the inline nav below the nav breakpoint.
   z-index keeps it above the open sheet, so the bars-to-X control doubles
   as the close button rather than disappearing underneath. */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 101;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bn-gold-line);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 17px;
  height: 1px;
  background: var(--bn-cream);
  transition: transform .3s var(--bn-ease), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Locale switcher. Visible text is the neutral EN / HU code; the language
   names and the "switch to…" phrasing live in the dictionary. */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 44px;
  padding: 0 6px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--bn-text-faint);
  font-family: var(--bn-body);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .25s ease;
}
.lang__btn:hover { color: var(--bn-cream); }
.lang__btn[aria-pressed="true"] { color: var(--bn-gold-soft); }

.lang__sep { color: var(--bn-sep); }

/* Theme toggle. Hidden until the head bootstrap sets [data-theme] — without
   JS the toggle could not do anything, and light-dark() is already following
   the OS preference on its own. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bn-gold-line);
  border-radius: 50%;
  color: var(--bn-cream);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
:root[data-theme] .theme-toggle { display: inline-flex; }
.theme-toggle:hover {
  color: var(--bn-gold-hi);
  border-color: var(--bn-gold);
  background: var(--bn-gold-wash);
}

.theme-toggle__icon {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show the destination, not the current state: the moon offers dark. */
:root[data-theme="dark"]  .theme-toggle__icon--moon,
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 9, 8, .6);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on the way in and waits out the fade on the
     way back — transitioning it as a duration would flip it half-way
     through, which also makes the sheet unfocusable at open time. */
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* The hero is a full-bleed photograph under a dark scrim in BOTH themes — a
   light hero would need different photography, not different tokens. So it
   pins the dark palette locally instead of inheriting the page's, and every
   descendant (headline, eyebrow, ghost button, scroll cue) keeps working
   through the same token names. Overriding tokens on a container like this is
   the cheap way to island a section against the theme. */
.hero {
  --bn-white:      #fbf7ef;
  --bn-heading:    #f7f1e6;
  --bn-cream:      #e9e1d2;
  --bn-text:       rgba(242, 237, 226, .86);
  --bn-text-faint: rgba(242, 237, 226, .62);
  --bn-gold:       #c9a15c;
  --bn-gold-soft:  #dcbb7d;
  --bn-gold-hi:    #efd6a2;
  --bn-gold-line:  rgba(201, 161, 92, .55);
  --bn-gold-wash:  rgba(201, 161, 92, .12);
  --bn-gold-surface:    #c9a15c;
  --bn-gold-surface-hi: #e0bf7d;

  position: relative;
  display: grid;
  align-items: center;
  /* svh tracks the *small* viewport, so a mobile URL bar sliding away
     never leaves a scroll-jump gap under the hero. */
  min-height: 100vh;
  min-height: min(100svh, 58rem);
  padding-block: calc(var(--bn-header-h) + var(--s-5)) var(--s-6);
  padding-inline: var(--bn-gutter);
}

/* z-index: 0 is load-bearing, not decoration. `.slot img` sets z-index: 1 so
   the photo paints over its placeholder label; without a stacking context
   here that 1 escapes into the hero's context and the image paints OVER
   .hero__scrim, which silently disables the scrim entirely. Confining it
   keeps the scrim between photo and copy where it belongs. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .slot { width: 100%; height: 100%; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Tuned against real photography, not the empty placeholder: the radial
     anchors a dark pool under the headline (which sits left of centre) and
     the linear keeps the bar and the strip edge readable. Weaken these and
     a bright hero photo will wash the copy out. */
  background:
    /* Editorial scrim: a dark panel under the copy column on the reading
       side, falling away so the photograph still breathes on the other.
       Built to hold contrast against ANY hero image rather than being
       tuned to one — a bright photo behind a weak scrim was the failure
       mode this replaces. Below the nav breakpoint the copy spans the full
       width, so the vertical wash carries it (see art direction). */
    linear-gradient(100deg,
      rgba(15, 12, 10, .94) 0%,
      rgba(15, 12, 10, .82) 34%,
      rgba(15, 12, 10, .3) 66%,
      rgba(15, 12, 10, .08) 88%),
    linear-gradient(180deg,
      rgba(15, 12, 10, .72) 0%,
      rgba(15, 12, 10, .34) 42%,
      rgba(15, 12, 10, .88) 100%);
}

.hero__body { position: relative; z-index: 2; }

.hero__eyebrow { letter-spacing: .32em; }

.hero__title {
  font-size: var(--t-3xl);
  line-height: .98;
  max-width: 16ch;
  margin: 0;
}

.hero__lede {
  font-size: var(--t-md);
  line-height: 1.7;
  max-width: 46ch;
  color: var(--bn-text);
  margin: var(--s-3) 0 0;
}

.hero__actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: var(--s-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--bn-text-faint);
  font-size: .625rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.hero__scroll span {
  width: 1px;
  height: 32px;
  background: linear-gradient(var(--bn-gold), transparent);
}

/* ── Value strip ──────────────────────────────────────────────────────── */

.strip {
  border-block: 1px solid var(--bn-rule);
  background: var(--bn-bg-strip);
  padding: var(--s-2) var(--bn-gutter);
}

.strip__inner {
  max-width: var(--bn-max);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 2.5rem);
  flex-wrap: wrap;
  font-family: var(--bn-display);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.4;
  color: var(--bn-gold-soft);
  text-align: center;
}
.strip__sep { color: var(--bn-gold-dim); }

/* ── About ────────────────────────────────────────────────────────────── */

/* auto-fit: two columns while both fit comfortably, one below that — no
   breakpoint required. */
.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--s-6);
  align-items: center;
}

.about p {
  font-size: var(--t-base);
  line-height: 1.85;
  color: var(--bn-text-mute);
  margin: 0 0 var(--s-2);
  max-width: 62ch;
}
.about p:last-of-type { margin-bottom: var(--s-4); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--s-2) var(--s-4);
  max-width: 460px;
}
.stat { border-top: 1px solid var(--bn-rule); padding-top: var(--s-1); }
.stat__num {
  font-family: var(--bn-display);
  font-size: var(--t-xl);
  line-height: 1.1;
  color: var(--bn-gold-soft);
}
/* The serif face has no star, so the glyph falls back to a much heavier
   one — scale it down and lift it to sit with the digits. */
.stat__star {
  font-family: var(--bn-body);
  font-size: .5em;
  vertical-align: .45em;
  margin-left: .12em;
}
.stat__label {
  font-size: var(--t-sm);
  letter-spacing: .05em;
  color: var(--bn-text-faint);
}

.about__media { position: relative; }
.about__media .slot {
  border-radius: 200px 200px var(--bn-radius) var(--bn-radius);
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px -30px var(--bn-shadow);
}

/* Floating "Est. 2018" medallion. The clamped offset keeps it tucked
   against the photo at every width instead of hanging off-canvas. */
.medallion {
  position: absolute;
  bottom: clamp(-1.25rem, -1.4vw, 0rem);
  left: clamp(-1.5rem, -1.5vw, 0rem);
  width: clamp(84px, 8vw, 110px);
  aspect-ratio: 1;
  border: 1px solid var(--bn-gold-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bn-bg);
  font-family: var(--bn-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--bn-gold-soft);
  text-align: center;
  line-height: 1.2;
  animation: bn-float 7s ease-in-out infinite;
}

/* ── Services ─────────────────────────────────────────────────────────── */

.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.services__head .section-lede { max-width: 40ch; }

.services__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  column-gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--bn-rule-soft);
  transition: padding-inline-start .3s var(--bn-ease), border-color .3s ease;
}
.service:hover {
  padding-inline-start: 10px;
  border-bottom-color: var(--bn-rule);
}

.service__body { flex: 1 1 14rem; }

.service__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.service__name { font-size: var(--t-lg); color: var(--bn-heading); }

.service__tag {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bn-gold);
}

.service__desc {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--bn-text-faint);
  margin: 6px 0 0;
  max-width: 44ch;
}

.service__duration {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bn-text-faint);
  margin-top: 8px;
}

.service__price {
  font-family: var(--bn-display);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--bn-gold-soft);
  white-space: nowrap;
}

.services__note {
  margin: var(--s-4) 0 0;
  font-size: var(--t-sm);
  color: var(--bn-text-mute);
}

/* ── Gallery ──────────────────────────────────────────────────────────── */

/* Base: an intrinsic grid that fits as many ~13rem tiles as the width
   allows. The mosaic spans are layered on at ≥900px (see art direction). */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  grid-auto-rows: clamp(9rem, 15vw, 12.5rem);
  gap: clamp(.5rem, 1vw, 1rem);
}
.gallery .slot { border-radius: var(--bn-radius); }

/* ── The artist ───────────────────────────────────────────────────────────
   One person, so this is a portrait beside a bio rather than a grid of
   cards. The portrait sits first in the source and on the left at width,
   mirroring the About block above it (photo right) so the two alternate.
   ────────────────────────────────────────────────────────────────────── */

.artist__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--s-6);
  align-items: center;
}

.artist__media .slot {
  /* Same arch as .about__media — it reads as the brand's shape. */
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px var(--bn-radius) var(--bn-radius);
  box-shadow: 0 40px 80px -30px var(--bn-shadow);
}

.artist__body .section-title { margin-bottom: var(--s-3); }

.artist__name {
  font-family: var(--bn-display);
  font-size: var(--t-xl);
  line-height: 1.1;
  color: var(--bn-heading);
  margin: 0;
}

.artist__role {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bn-gold);
  margin: 6px 0 var(--s-3);
}

.artist__body p:not(.artist__name):not(.artist__role):not(.eyebrow) {
  font-size: var(--t-base);
  line-height: 1.85;
  color: var(--bn-text-mute);
  margin: 0 0 var(--s-2);
  max-width: 56ch;
}

.artist__body .btn { margin-top: var(--s-2); }

/* ── Testimonial ──────────────────────────────────────────────────────── */

.testimonial {
  padding-block: var(--s-section);
  padding-inline: var(--bn-gutter);
}
.testimonial__inner { max-width: 900px; margin-inline: auto; text-align: center; }

.testimonial__mark {
  font-family: var(--bn-display);
  font-size: 80px;
  color: var(--bn-gold-dim);
  line-height: .5;
  height: 40px;
}

.testimonial blockquote { margin: 0; }

.testimonial__quote {
  font-family: var(--bn-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.4;
  color: var(--bn-heading);
  margin: 0 0 var(--s-3);
}

.testimonial__cite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-style: normal;
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bn-gold-soft);
}
.testimonial__cite::before,
.testimonial__cite::after {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--bn-gold);
}

/* ── Visit ────────────────────────────────────────────────────────────── */

.visit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  border-top: 1px solid var(--bn-rule);
}

.visit__panel {
  padding: var(--s-6) var(--bn-gutter);
  background: var(--bn-bg-raised);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Keeps the copy from stretching to the full half-width on a big screen
     while still centring within the panel. */
  align-items: center;
}
.visit__inner { width: 100%; max-width: 30rem; }
.visit__inner .section-title { font-size: var(--t-xl); margin-bottom: var(--s-3); }

.hours {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-4);
}
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--bn-rule-soft);
}
.hours__row:last-child { border-bottom: none; }
.hours__row dt { font-weight: 300; }
.hours__row dd { margin: 0; color: var(--bn-gold-soft); }
.hours__row dd.is-closed { color: var(--bn-text-faint); }

.contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--t-base);
  font-style: normal;
}
.contact__item { display: flex; gap: 12px; }
.contact__icon { color: var(--bn-gold); flex: none; }
.contact__sub { color: var(--bn-text-faint); }

.visit__media .slot { width: 100%; height: 100%; min-height: clamp(16rem, 34vw, 22rem); }

/* ── Instagram ────────────────────────────────────────────────────────── */

.instagram {
  padding-block: var(--s-6);
  padding-inline: var(--bn-gutter);
}
.instagram__head { text-align: center; margin-bottom: var(--s-4); }
.instagram__head h2 { font-size: var(--t-xl); margin-bottom: 6px; }
.instagram__head p {
  font-size: var(--t-sm);
  letter-spacing: .04em;
  color: var(--bn-text-faint);
  margin: 0;
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 8rem), 1fr));
  gap: clamp(.5rem, .8vw, .75rem);
}
.instagram__grid .slot { aspect-ratio: 1 / 1; border-radius: 12px; }

/* ── Booking ──────────────────────────────────────────────────────────── */

.book {
  padding-block: var(--s-section);
  padding-inline: var(--bn-gutter);
  background: var(--bn-bg-raised);
  border-top: 1px solid var(--bn-rule);
}

.book__grid {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--s-5);
  align-items: start;
}

.book__intro .section-title { margin-bottom: var(--s-3); }
.book__intro p {
  font-size: var(--t-base);
  line-height: 1.8;
  color: var(--bn-text-mute);
  max-width: 42ch;
  margin: 0;
}

.perks {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-sm);
}
.perks li { display: flex; gap: 12px; align-items: flex-start; }
.perks li::before { content: "\2726"; color: var(--bn-gold); flex: none; }

.book__card {
  background: var(--bn-bg);
  border: 1px solid var(--bn-rule);
  border-radius: 20px;
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
}

.book__form { display: flex; flex-direction: column; gap: var(--s-3); }
.book__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-3);
}

/* Floating label: the label is a real, always-present <label> that rides
   above the input once it has content or focus. Placeholder-only forms
   leave screen-reader users and anyone mid-typing without a field name. */
.field { position: relative; }

.field__input {
  width: 100%;
  min-height: 46px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bn-field-line);
  color: var(--bn-white);
  font-family: var(--bn-body);
  font-size: var(--t-base);
  font-weight: 300;
  padding: 18px 2px 8px;
  border-radius: 0;
  transition: border-color .3s ease;
}
.field__input:focus { outline: none; border-bottom-color: var(--bn-gold); }
/* The placeholder is a single space — it exists only to drive
   :placeholder-shown, so the label never collides with real text. */
.field__input::placeholder { color: transparent; }

.field__label {
  position: absolute;
  left: 2px;
  top: 2px;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bn-gold-soft);
  pointer-events: none;
  transition: transform .25s var(--bn-ease), color .25s ease, font-size .25s ease;
}
/* Empty and unfocused → the label sits on the line, doing the placeholder's
   old job. `select` and `date` never report :placeholder-shown, so their
   wrappers carry .field--static and simply keep the label raised. */
.field:not(.field--static) .field__input:placeholder-shown:not(:focus) + .field__label {
  transform: translateY(16px);
  font-size: var(--t-base);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bn-text-faint);
}

select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bn-gold-soft) 50%),
                    linear-gradient(135deg, var(--bn-gold-soft) 50%, transparent 50%);
  background-position: right 10px top 26px, right 5px top 26px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
  cursor: pointer;
}
select.field__input option { background: var(--bn-option-bg); color: var(--bn-white); }

/* Only flag a field once the browser has actually validated it. */
.field__input:user-invalid { border-bottom-color: var(--bn-invalid); }

.book__fineprint {
  font-size: var(--t-xs);
  line-height: 1.6;
  text-align: center;
  color: var(--bn-text-faint);
  margin: 0;
}

.book__thanks { text-align: center; padding: var(--s-5) var(--s-1); }
.book__thanks-mark {
  font-family: var(--bn-display);
  font-size: 56px;
  color: var(--bn-gold);
  line-height: 1;
}
.book__thanks h3 { font-size: var(--t-xl); color: var(--bn-heading); margin: 14px 0 12px; }
.book__thanks p {
  font-size: var(--t-base);
  color: var(--bn-text-mute);
  margin: 0;
  line-height: 1.7;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  padding: var(--s-6) var(--bn-gutter) var(--s-3);
  background: var(--bn-bg-deep);
  border-top: 1px solid var(--bn-rule);
}

/* Pure auto-fit: an explicit leading track would add its own minimum on top
   of the repeat's, which overflows narrow phones. The brand column gets its
   extra weight back once four columns genuinely fit (see art direction). */
.site-footer__grid {
  max-width: var(--bn-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-4);
}

.site-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-2); }
.site-footer__brand .brand__mark { width: 54px; height: 54px; padding: 6px; box-shadow: none; }
.site-footer__tagline {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--bn-text-faint);
  max-width: 34ch;
  margin: 0;
}

.site-footer h4 {
  font-family: var(--bn-body);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bn-gold);
  margin: 0 0 var(--s-2);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--t-sm);
  color: var(--bn-text-faint);
}
.site-footer ul a { color: var(--bn-text-mute); }
.site-footer ul a:hover { color: var(--bn-gold-hi); }

.site-footer__base {
  max-width: var(--bn-max);
  margin: var(--s-5) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--bn-rule);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--bn-text-faint);
}

/* ── Lightbox ─────────────────────────────────────────────────────────────
   Built by main.js from a native <dialog>, which brings the focus trap,
   Escape-to-close and inert background for free. No JS → the gallery is
   just a grid of pictures, which is fine.
   ────────────────────────────────────────────────────────────────────── */

.lightbox {
  width: min(92vw, 1100px);
  max-width: none;
  max-height: 92svh;
  padding: 0;
  border: 1px solid var(--bn-rule);
  border-radius: var(--bn-radius);
  background: var(--bn-bg);
  color: var(--bn-cream);
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgba(12, 9, 8, .82);
  backdrop-filter: blur(4px);
}

.lightbox__figure {
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--bn-bg-deep);
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(92svh - 4rem);
  object-fit: contain;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--bn-rule);
  font-size: var(--t-sm);
  color: var(--bn-text-faint);
}
.lightbox__controls { display: flex; gap: var(--s-1); }

.lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--bn-rule);
  border-radius: 999px;
  color: var(--bn-cream);
  font-family: var(--bn-body);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.lightbox__btn:hover { border-color: var(--bn-gold); background: rgba(201, 161, 92, .12); }

/* ── Motion ───────────────────────────────────────────────────────────── */

@keyframes bn-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

@keyframes bn-fade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.bn-fade { animation: bn-fade 1.1s var(--bn-ease) both; }

/* Scroll-reveal: main.js adds .is-in when the element enters the viewport.
   Without JS the element stays visible, so content never depends on script. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--bn-ease), transform .9s var(--bn-ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .slot--zoom:hover img { transform: none; }
}

/* ── Art direction ────────────────────────────────────────────────────────
   Everything above reflows on its own. These two queries exist to change
   the *design*, not to rescue the layout: the nav mode, and the gallery
   mosaic (which needs an explicit 4-column track to place its spans).
   ────────────────────────────────────────────────────────────────────── */

/* Above the nav breakpoint the CTA lives in the header bar, so the sheet's
   copy of it would be a duplicate. */
@media (min-width: 60.0625em) {
  .nav-book { display: none; }
}

/* Gallery mosaic and the weighted footer — only once four columns
   genuinely fit. */
@media (min-width: 56.25em) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }

  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery__item--feature { grid-column: span 2; grid-row: span 2; }
  .gallery__item--wide    { grid-column: span 2; }
  .gallery__item--tall    { grid-row: span 2; }
}

/* Below the nav breakpoint the inline nav becomes a slide-in sheet. */
@media (max-width: 60em) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100;
    width: min(21rem, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--bn-header-h) + var(--s-3)) var(--s-4) var(--s-4);
    background: var(--bn-bg-raised);
    border-left: 1px solid var(--bn-rule);
    box-shadow: -30px 0 60px -30px var(--bn-shadow-bar);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    /* See the .nav-scrim note: visible immediately on open, hidden only
       once the slide-out has finished. */
    transition: transform .35s var(--bn-ease), visibility 0s linear .35s;
  }
  .site-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .35s var(--bn-ease), visibility 0s;
  }

  .site-nav .navlink {
    padding-block: var(--s-2);
    border-bottom: 1px solid var(--bn-rule-soft);
    font-size: var(--t-base);
  }
  .site-nav .navlink::after { bottom: -1px; }

  /* The bar is too tight on phones for brand + locale + theme + CTA +
     burger, so the CTA moves into the sheet and becomes the full-width
     action at the end of the list. */
  .site-header__inner > .btn--sm { display: none; }
  .nav-book { margin-top: var(--s-3); width: 100%; }

  /* The header CTA sits between brand and burger; keep it from squeezing. */
  .site-header__inner .btn--sm { white-space: nowrap; }
}

/* Very narrow phones: the header CTA is the first thing to go — the nav
   sheet carries a Book link of its own. */
@media (max-width: 26em) {
  .hero__actions .btn { flex: 1 1 100%; }

  /* brand + locale switcher + burger have to share ~280px of bar. */
  .site-header__inner { gap: .5rem; }
  .brand__name { font-size: 1.15rem; }
  .lang__btn { min-width: 30px; padding: 0 2px; }
  .lang__sep { display: none; }
}

/* Phones: the hero copy runs the full width, so the angled side panel has to
   become an even wash or the right-hand words lose their backing. */
@media (max-width: 48em) {
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(15, 12, 10, .8) 0%,
        rgba(15, 12, 10, .66) 45%,
        rgba(15, 12, 10, .92) 100%);
  }
}

/* Short viewports (landscape phones): the scroll cue just gets in the way. */
@media (max-height: 34em) {
  .hero__scroll { display: none; }
}

/* ── Print ────────────────────────────────────────────────────────────── */

@media print {
  .site-header,
  .nav-scrim,
  .hero__scroll,
  .lightbox,
  .instagram,
  .book__form { display: none !important; }

  body { background: #fff; color: #000; }
  .section, .section--raised, .book, .testimonial { padding-block: 1rem; }
  .slot::after { color: #666; }
  a { color: #000; }
  .reveal { opacity: 1; transform: none; }
}