/* ==========================================================================
   DUSK 2 DAWN TATTOOS — 418 Brock St N, Kingston ON
   Design pass 1. Front end only: nothing here books, quotes or takes payment.

   Built on the grammar of _TEMPLATES/website-templates/hirael-portfolio-v1:
   a counter loading screen, a floating pill nav over a full-bleed hero with a
   cycling role line, an asymmetric 7/5 work grid that blurs under a ring pill
   on hover, a pill-row list, a scroll-pinned parallax gallery with a lightbox,
   count-up figures and a full-bleed contact footer with a marquee.

   What is personalised to this shop:
   - Hirael's neutral grey scale is warmed to the black their photographs are
     actually shot in, and its cool blue ring gradient is replaced with the one
     colour in the brand — the orange out of the "2" in the logo, sampled at
     #D5803A.
   - Hirael's Instrument Serif / Inter pairing is replaced. The display face is
     Bodoni Moda italic, because every price this shop has ever posted is
     hand-lettered in a didone italic — it is already their handwriting. Body
     is Hanken Grotesk.
   - The circular badge in the nav pill is the real logo. It was already a
     circle, which is what set the radius language for the rest of the page.
   ========================================================================== */

:root {
  --bg:      #0A0908;
  --surface: #131110;
  --raised:  #1B1816;
  --stroke:  #241F1B;
  --text:    #F2EDE6;
  --muted:   #8A7F75;
  --dim:     #5C534C;

  --ember:      #D5803A;
  --ember-deep: #8F4A18;
  --ring: linear-gradient(90deg, #D5803A 0%, #8F4A18 100%);
  --ring-lit: linear-gradient(90deg, #E9A265 0%, #D5803A 50%, #E9A265 100%);

  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.15rem, 4vw, 4rem);
  --maxw: 1200px;
  --bay: clamp(4.5rem, 11vh, 8rem);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.03rem);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
figure, blockquote, ol, ul, p, h1, h2, h3 { margin: 0; padding: 0; }
li { list-style: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--ember); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: var(--bay); }

/* Bodoni does the display voice, and it is always italic — the way the shop
   letters its own prices. */
.display { font-family: var(--display); font-style: italic; font-weight: 400; }

.eyebrow {
  display: inline-block;
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--ember { color: var(--ember); }
.eyebrow--rule::before,
.eyebrow--rules::before,
.eyebrow--rules::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--stroke);
  vertical-align: middle;
  margin-inline-end: 0.75rem;
  margin-bottom: 0.15em;
}
.eyebrow--rules::after { margin-inline: 0.75rem 0; }

.h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h2 .display { font-weight: 400; }

.sub {
  margin-top: 1rem;
  max-width: 30rem;
  font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Ring pill — Hirael's signature control. A gradient sits 2px behind an
   opaque inner surface, so all that shows is a hairline gradient border, and
   only on hover.
   -------------------------------------------------------------------------- */

.ring { position: relative; display: inline-flex; flex-shrink: 0; }
.ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: var(--ring);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.ring:hover::before, .ring:focus-within::before { opacity: 1; }

.ring__in {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.62rem 1.15rem;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ring__in svg { width: 0.8em; height: 0.8em; }

.ring__in--ghost { background: var(--surface); color: var(--text); }
.ring__in--solid { background: var(--text); color: var(--bg); padding: 0.85rem 1.7rem; }
.ring:hover .ring__in--solid { background: var(--bg); color: var(--text); }
.ring__in--out {
  border: 1px solid var(--stroke);
  background: var(--bg);
  color: var(--text);
  padding: 0.85rem 1.7rem;
}
.ring:hover .ring__in--out { border-color: transparent; }
.ring__in--white { background: var(--text); color: var(--bg); }

/* --------------------------------------------------------------------------
   Loading screen
   -------------------------------------------------------------------------- */

.load { display: none; }
.js .load {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  overflow: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.load.is-done { opacity: 0; visibility: hidden; }

.load__eyebrow {
  position: absolute;
  top: clamp(1.5rem, 5vh, 2.5rem);
  left: clamp(1.5rem, 5vw, 2.5rem);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  animation: drop 0.6s var(--ease) both;
}
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }

.load__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 1.5rem;
  text-align: center;
}
.load__word span {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2.2rem, 8vw, 5rem);
  color: color-mix(in srgb, var(--text) 80%, transparent);
  animation: word 0.4s var(--ease) both;
}
@keyframes word { from { opacity: 0; transform: translateY(18px); } }

.load__count {
  position: absolute;
  right: clamp(1.2rem, 5vw, 2.5rem);
  bottom: clamp(1rem, 4vh, 2.2rem);
  font-size: clamp(3.4rem, 14vw, 9rem);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.load__bar { position: absolute; inset: auto 0 0; height: 3px; background: color-mix(in srgb, var(--stroke) 70%, transparent); }
.load__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ring);
  box-shadow: 0 0 10px rgb(213 128 58 / 0.4);
}

/* --------------------------------------------------------------------------
   Floating nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: clamp(0.9rem, 2vh, 1.5rem) var(--pad);
}
.nav__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  padding: 0.5rem;
  transition: box-shadow 0.3s var(--ease);
}
.nav.is-stuck .nav__pill { box-shadow: 0 10px 30px rgb(0 0 0 / 0.45); }

.nav__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.nav__badge::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  background: var(--ring);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.nav__badge:hover { transform: scale(1.08); }
.nav__badge:hover::before { opacity: 1; }
.nav__badge img { position: relative; width: 100%; border-radius: 999px; }

.nav__sep { width: 1px; height: 1.25rem; background: var(--stroke); margin-inline: 0.3rem; }
.nav__links { display: flex; align-items: center; gap: 0.1rem; }
.nav__link {
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-size: 0.845rem;
  color: var(--muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__link:hover { background: color-mix(in srgb, var(--stroke) 60%, transparent); color: var(--text); }
.nav__link.is-on { background: color-mix(in srgb, var(--stroke) 70%, transparent); color: var(--text); }

.nav__cta .ring__in {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text);
  backdrop-filter: blur(14px);
}

.nav__burger { display: none; position: relative; width: 2.6rem; height: 2.6rem; border: 1px solid var(--stroke); border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(14px); }
.nav__burger span { position: absolute; left: 0.75rem; right: 0.75rem; height: 1.5px; background: var(--text); transition: transform 0.35s var(--ease); }
.nav__burger span:nth-child(1) { top: 1rem; }
.nav__burger span:nth-child(2) { top: 1.45rem; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(0.22rem) rotate(40deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-0.22rem) rotate(-40deg); }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  align-content: center;
  gap: 0.2rem;
  padding: var(--pad);
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(18px);
  clip-path: circle(0% at 92% 5%);
  transition: clip-path 0.6s var(--ease);
}
.sheet.is-open { clip-path: circle(150% at 92% 5%); }
.sheet a {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2.2rem, 11vw, 3.6rem);
  line-height: 1.15;
  color: var(--text);
}
.sheet a:hover { color: var(--ember); }
.sheet .eyebrow { margin-top: 1.6rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 7rem var(--pad) 5rem;
  text-align: center;
}

/* The hero holds nothing but the name. No photograph, no mark, no texture —
   one flat neutral. The work arrives later, on the wall, and it lands harder
   for having been made to wait. */
.hero__bed { position: absolute; inset: 0; z-index: 0; background: var(--surface); }
.hero__fade {
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(to top, var(--bg), transparent);
}

.hero__stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0;
  max-width: 54rem;
}
.hero__stage > .eyebrow { margin-bottom: 1.8rem; }

.hero__name {
  font-size: clamp(2.9rem, 12.5vw, 9.5rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.hero__two {
  font-style: italic;
  color: var(--ember);
  padding-inline: 0.14em;
  font-size: 0.82em;
  vertical-align: 0.06em;
}

.hero__line {
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.45rem);
  color: var(--text);
  margin-bottom: 0.8rem;
}
.hero__cycle {
  display: inline-block;
  color: var(--ember);
  animation: word 0.4s var(--ease) both;
}

.hero__sub { max-width: 30rem; color: var(--muted); margin-bottom: 2.6rem; }
.hero__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.hero__acts .ring { transition: transform 0.3s var(--ease); }
.hero__acts .ring:hover { transform: scale(1.04); }

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}
.hero__cue .eyebrow { letter-spacing: 0.22em; font-size: 0.625rem; }
.hero__cue-rail { position: relative; display: block; width: 1px; height: 2.5rem; overflow: hidden; background: var(--stroke); }
.hero__cue-rail i { position: absolute; inset: 0 0 auto; display: block; height: 50%; background: var(--ring); animation: cue 1.5s ease-in-out infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(200%); } }

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.head { margin-bottom: clamp(2.2rem, 5vh, 3.5rem); }
.head .eyebrow { margin-bottom: 1.25rem; }
.head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.head__all { align-self: flex-end; }

/* --------------------------------------------------------------------------
   The four chairs — Hirael's 7/5 asymmetric grid. Four artists, four cards:
   the split is the roster, not a bento pattern.
   -------------------------------------------------------------------------- */

.chairs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.chair--7 { grid-column: span 7; }
.chair--5 { grid-column: span 5; }
.chair--12 { grid-column: span 12; }

.chair {
  position: relative;
  display: block;
  height: clamp(20rem, 34vw, 27rem);
  border: 1px solid var(--stroke);
  border-radius: 1.5rem;
  background: var(--surface);
  overflow: hidden;
}
/* The frame holds still and the photograph drifts inside it — --py comes off
   the scroll pass, the scale is the headroom that makes the drift possible. */
.chair > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.1);
  transition: transform 0.7s var(--ease), filter 0.6s var(--ease);
  will-change: transform;
}
.chair:hover > img { transform: translate3d(0, var(--py, 0px), 0) scale(1.16); }

/* The third artist takes the full width as a banner, so the row does not sit
   with five empty columns beside it. Declared after .chair so the shorter
   banner height wins — both are single-class selectors. */
.chair--12 { height: clamp(15rem, 25vw, 20rem); }
.chair--12 > img { object-position: 50% 30%; }

/* a halftone screen, the way a flash sheet is printed */
.chair__screen {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
}

.chair__id {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 0.15rem;
  padding: 4rem 1.4rem 1.3rem;
  background: linear-gradient(to top, rgb(10 9 8 / 0.9) 25%, transparent);
  transition: opacity 0.4s var(--ease);
}
.chair__id b { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; line-height: 1; }
.chair__id i {
  font-style: normal;
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--muted);
}
.chair:hover .chair__id { opacity: 0; }

.chair__veil {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.chair:hover .chair__veil, .chair:focus-visible .chair__veil { opacity: 1; }
.chair__veil .ring::before { opacity: 1; background: var(--ring-lit); background-size: 200% 100%; animation: shift 6s ease infinite; }
@keyframes shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.chair__veil .ring__in b { font-weight: 400; }
.chair__veil em {
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 22rem;
}

/* --------------------------------------------------------------------------
   The menu — Hirael's journal row, carrying the shop's real price list
   -------------------------------------------------------------------------- */

.menu { display: flex; flex-direction: column; gap: 0.85rem; }
.menu__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border: 1px solid var(--stroke);
  border-radius: 2.5rem;
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  padding: 0.85rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.menu__row:hover { background: var(--surface); border-color: color-mix(in srgb, var(--ember) 35%, transparent); }
.menu__row img { width: 4.25rem; height: 4.25rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.menu__id { display: grid; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.menu__id b { font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 500; }
.menu__id i { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.menu__fig { font-size: clamp(1.5rem, 3vw, 2.1rem); padding-inline-end: 1.1rem; white-space: nowrap; }
.menu__row--top { border-color: color-mix(in srgb, var(--ember) 45%, transparent); }
.menu__row--top .menu__fig { color: var(--ember); }

.terms {
  margin-top: 2rem;
  display: grid;
  gap: 0.7rem;
  max-width: 44rem;
  border: 1px solid var(--stroke);
  border-radius: 1.5rem;
  background: var(--surface);
  padding: clamp(1.2rem, 3vw, 1.9rem);
}
.terms p { color: var(--muted); }
.terms b { color: var(--text); font-weight: 600; }
.terms__note { font-size: 0.78rem; color: var(--dim); }

.quotes { margin-top: clamp(3rem, 8vh, 5rem); }
.quotes > .eyebrow { display: block; margin-bottom: 1.6rem; }
.quotes__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: end;
}
.quote img {
  width: 100%;
  max-height: 26rem;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.55));
}
.quote figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid var(--stroke);
  margin-top: 1.1rem;
  padding-top: 0.7rem;
}
.quote figcaption span { font-size: 0.688rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.quote figcaption b { font-size: 1.3rem; font-weight: 400; }
.quotes__foot { margin-top: 1.6rem; max-width: 34rem; color: var(--muted); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   The wall — Hirael's pinned parallax gallery. The copy holds still in the
   middle of the screen while two columns of work drift past it at different
   speeds. Tap a tile for the lightbox.
   -------------------------------------------------------------------------- */

.wall { position: relative; min-height: 300vh; overflow: clip; background: var(--bg); }

.wall__pin {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* the work drifts over the pinned copy, so the copy needs its own ground to
   stay readable — widest where the columns pass closest, on narrow screens */
.wall__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 34rem 26rem at 50% 50%,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 45%,
    transparent 72%
  );
}
.wall__copy { position: relative; }
.wall__copy { display: grid; justify-items: center; text-align: center; padding-inline: var(--pad); max-width: 26rem; }
.wall__copy .eyebrow { margin-bottom: 1.25rem; }
.wall__h { margin-bottom: 0.2rem; }
.wall__copy .sub { margin-inline: auto; }
.wall__ig { pointer-events: auto; margin-top: 1.6rem; }

.wall__cols {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 20vw, 30rem);
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--pad);
  pointer-events: none;
}
/* align-self: start keeps the column at its content height. Stretched, its
   height would be the section's, and the percentage translate below — which
   resolves against the element's own border box — would drift by an amount
   that changes every time the section is resized. */
.wall__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  gap: 22vh;
  will-change: transform;
}
.wall__col:nth-child(1) { padding-top: 30vh; }
.wall__col:nth-child(2) { padding-top: 56vh; }

.tile {
  position: relative;
  display: block;
  width: 100%;
  max-width: 19rem;
  padding: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--stroke);
  transform: rotate(var(--r, 0deg));
  pointer-events: auto;
  transition: transform 0.5s var(--ease);
}
.tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.6s var(--ease); }
.tile:hover { transform: rotate(0deg); }
.tile:hover img { transform: scale(1.04); }

/* arriving here from an artist's card: straighten up and ring in ember, so
   you can see which plate you were sent to */
.tile.is-found {
  transform: rotate(0deg) scale(1.03);
  border-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 30%, transparent),
              0 20px 50px rgb(0 0 0 / 0.6);
  transition: transform 0.6s var(--ease), border-color 0.4s var(--ease), box-shadow 0.6s var(--ease);
}

/* whose hand it was, kept on the plate rather than hidden behind a hover */
.tile__by {
  position: absolute;
  inset: auto 0.6rem 0.6rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(8px);
  text-align: start;
  transition: background 0.35s var(--ease);
}
.tile:hover .tile__by { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.tile__by b {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
}
.tile__by i {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Figures + what people say
   -------------------------------------------------------------------------- */

.figures__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.fig { display: grid; gap: 0.9rem; border-top: 1px solid var(--stroke); padding-top: 1.6rem; }
.fig__n { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.85; font-variant-numeric: tabular-nums; }
.fig__n sup { font-size: 0.42em; font-style: normal; vertical-align: super; margin-left: 0.06em; color: var(--ember); }

.says {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(3rem, 8vh, 5rem);
}
.says__q {
  border: 1px solid var(--stroke);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  display: grid;
  gap: 1rem;
  align-content: space-between;
}
.says__q p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.32; }
.says__q cite { font-style: normal; font-size: 0.688rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   Visit / footer
   -------------------------------------------------------------------------- */

.visit { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vh, 5rem) 2rem; }
.visit__bed { position: absolute; inset: 0; z-index: 0; }
.visit__bed img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.visit__scrim { position: absolute; inset: 0; background: rgb(10 9 8 / 0.78); }
.visit__fade { position: absolute; inset: 0 0 auto; height: 9rem; background: linear-gradient(to bottom, var(--bg), transparent); }

.marquee { position: relative; z-index: 2; display: flex; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: run 42s linear infinite; }
.marquee__track span {
  white-space: nowrap;
  padding-inline: 1.5rem;
  font-size: clamp(2rem, 5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.marquee__track i { font-style: normal; color: var(--ember); }
@keyframes run { to { transform: translateX(-50%); } }

.visit__body {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  padding-block: clamp(3rem, 9vh, 5.5rem) clamp(2rem, 6vh, 3.5rem);
}
.visit__body > .eyebrow { margin-bottom: 1.5rem; }
.visit__mail { transition: transform 0.3s var(--ease); }
.visit__mail:hover { transform: scale(1.03); }
.ring__in--mail {
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
  padding: 0.9rem 1.5rem;
  font-size: clamp(1.05rem, 3.4vw, 2.1rem);
  white-space: normal;
  word-break: break-word;
}
.visit__mail:hover .ring__in--mail { border-color: transparent; }

.visit__lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 1.4rem clamp(1.5rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 7vh, 4rem);
}
.visit__line { display: grid; gap: 0.35rem; justify-items: center; transition: color 0.3s var(--ease); }
a.visit__line:hover { color: var(--ember); }
.visit__line b { font-size: clamp(0.95rem, 1.6vw, 1.15rem); font-weight: 500; }

.visit__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  border-top: 1px solid var(--stroke);
  padding-top: 1.5rem;
}
.dot { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.dot i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--dim); }
.dot.is-open i { background: #59A96A; box-shadow: 0 0 0 4px rgb(89 169 106 / 0.18); }

.visit__socials { display: flex; gap: 0.5rem; }
.visit__socials a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.visit__socials a:hover { color: var(--text); background: var(--surface); border-color: color-mix(in srgb, var(--text) 15%, transparent); }
.visit__socials svg { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.visit__copy { font-size: 0.72rem; color: var(--dim); }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.box {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: rgb(6 5 5 / 0.9);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s;
}
.box.is-open { opacity: 1; visibility: visible; }
.box__x {
  position: absolute;
  top: clamp(1rem, 3vw, 1.6rem);
  right: clamp(1rem, 3vw, 1.6rem);
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--text) 80%, transparent);
}
.box__x:hover { color: var(--text); }
.box__x svg { width: 1rem; height: 1rem; }
.box__fig { display: grid; justify-items: center; gap: 1rem; }
.box__fig img { max-height: 78svh; max-width: 90vw; border-radius: 1rem; object-fit: contain; }
.box__fig figcaption { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.box__fig b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.2rem; }
.box__fig span { font-size: 0.688rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

.js .blur-in, .js .reveal, .js .rise { opacity: 0; }
.js .blur-in { transform: translateY(20px); filter: blur(10px); }
.js .reveal { transform: translateY(50px); }
.js .rise { transform: translateY(30px); }

/* headings wipe up a word at a time, each behind its own mask */
.h2 .wd {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.1em 0.06em 0.14em;
  margin: -0.1em -0.06em -0.14em;
}
.js .h2 .wd__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s var(--ease) var(--wd, 0s);
}
.h2.is-in .wd__i { transform: none; }

/* the hairline in front of a section label draws itself in */
.js .eyebrow--rule::before,
.js .eyebrow--rules::before,
.js .eyebrow--rules::after {
  width: 0;
  transition: width 0.7s var(--ease) 0.12s;
}
.eyebrow--rule.is-in::before,
.eyebrow--rules.is-in::before,
.eyebrow--rules.is-in::after { width: 2rem; }

/* hero lets go as you leave it — set from the scroll pass */
.hero__stage { will-change: transform, opacity; }

.is-in.blur-in, .is-in.reveal, .is-in.rise {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 0.9s var(--ease) var(--d, 0s),
    transform 0.9s var(--ease) var(--d, 0s),
    filter 0.9s var(--ease) var(--d, 0s);
}
.hero__stage .blur-in:nth-of-type(1) { --d: 0.3s; }
.hero__line { --d: 0.4s; }
.hero__sub { --d: 0.5s; }
.hero__acts { --d: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blur-in, .reveal, .rise { opacity: 1; transform: none; filter: none; transition: none; }
  .h2 .wd__i { transform: none; transition: none; }
  .eyebrow--rule::before, .eyebrow--rules::before, .eyebrow--rules::after { width: 2rem; transition: none; }
  .chair > img { transform: scale(1.1); }
  .chair:hover > img { transform: scale(1.1); }
  .marquee__track, .hero__cue-rail i, .chair__veil .ring::before { animation: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Between 900 and 1200 the drifting columns close in on the pinned copy, so
   both give ground to keep the channel open. */
@media (min-width: 901px) and (max-width: 1200px) {
  .wall__copy { max-width: 19rem; }
  .tile { max-width: 14rem; }
  .wall__h { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
}

@media (max-width: 900px) {
  .nav__links, .nav__sep, .nav__cta { display: none; }
  .nav { justify-content: space-between; }
  .nav__pill { padding: 0.35rem; }
  .nav__burger { display: block; }

  .chairs { gap: 1rem; }
  .chair--7, .chair--5, .chair--12 { grid-column: span 12; }
  .chair--12 { height: clamp(17rem, 58vw, 22rem); }
  .chair { height: clamp(17rem, 58vw, 22rem); }
  .chair__veil { opacity: 1; background: none; backdrop-filter: none; align-content: end; justify-items: start; text-align: start; padding: 1.4rem; }
  .chair__veil .ring { display: none; }
  .chair__veil em { display: none; }
  .chair:hover .chair__id { opacity: 1; }

  /* The wall keeps its pin and its drift on phones — the same composition as
     desktop, just smaller. There is no room for a clear channel at this width,
     so the plates hug the outer edges and the copy sits ABOVE them (desktop
     has it below), with its scrim tightened so it stays readable as plates
     pass behind it. */
  .wall__pin { z-index: 3; }
  .wall__pin::before {
    background: radial-gradient(
      ellipse 15rem 19rem at 50% 50%,
      color-mix(in srgb, var(--bg) 96%, transparent) 0%,
      color-mix(in srgb, var(--bg) 80%, transparent) 48%,
      transparent 74%
    );
  }
  .wall__copy { max-width: 16rem; padding-inline: 0; }
  .wall__copy .eyebrow { margin-bottom: 0.9rem; }
  .wall__h { font-size: clamp(1.5rem, 7.2vw, 1.9rem); }
  .wall__copy .sub { font-size: 0.84rem; margin-top: 0.7rem; }
  .wall__ig { margin-top: 1.1rem; }
  .wall__ig .ring__in { font-size: 0.78rem; padding: 0.5rem 0.9rem; }

  .wall__cols { gap: 0; padding-inline: 0.6rem; }
  .wall__col { gap: 16vh; }
  .wall__col:nth-child(1) { align-items: flex-start; padding-top: 24vh; }
  .wall__col:nth-child(2) { align-items: flex-end; padding-top: 48vh; }
  .tile { max-width: 8.25rem; border-radius: 0.75rem; }
  /* the credit stacks name-over-label so nothing overflows a 130px plate */
  .tile__by {
    inset: auto 0.35rem 0.35rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.3rem 0.6rem 0.35rem;
    border-radius: 0.6rem;
  }
  .tile__by b { font-size: 0.8rem; line-height: 1.1; }
  .tile__by i { font-size: 0.48rem; letter-spacing: 0.1em; }

  .figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .says { grid-template-columns: 1fr; }
  .visit__lines { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* minmax(0,…) rather than 1fr: the caption's min-content — a price that
     cannot wrap next to a label — would otherwise push the track wider than
     its share and overflow the page. */
  .quotes__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote:last-child { grid-column: 1 / -1; max-width: 14rem; margin-inline: auto; }
  .quote figcaption { flex-wrap: wrap; gap: 0.15rem 0.8rem; }
  .menu__row { border-radius: 1.5rem; }
  .menu__row img { width: 3.4rem; height: 3.4rem; }
  .menu__fig { padding-inline-end: 0.6rem; }
}

@media (max-width: 430px) {
  .menu__row { gap: 0.7rem; padding: 0.6rem; }
  .menu__row img { width: 2.8rem; height: 2.8rem; }
  .menu__id b { font-size: 0.95rem; line-height: 1.2; }
  .menu__id i { font-size: 0.72rem; }
  .menu__fig { font-size: 1.25rem; padding-inline-end: 0.35rem; }
  .visit__foot { justify-content: center; text-align: center; }
}