/* Blur Lounge — concept v0.2
   Palette is taken from the shop itself: the black stucco facade and sign panel,
   the plaster walls, the pool-table felt and velvet couches, the oak floor and
   the brass mirrors. One typeface (Archivo, variable width) does three jobs:
   expanded for headlines (echoing LOUNGE on the sign), normal for body,
   condensed for labels. */

:root {
  --ink: #131313;
  --ink-2: #0d0d0d;
  --panel: #1c1c1c;
  --frame: #3b3b3b;
  --plaster: #ece6d8;
  --plaster-2: #e2dbcb;
  --cream: #f3eee3;
  --cream-muted: #d9d4c8;
  --muted: #5b6058;
  --felt: #1e6a47;
  --felt-hover: #23784f;
  --velvet: #1b4636;
  --oak: #c9a274;
  --brass: #d2ab57;
  --brass-deep: #7d5f16;
  --focus: var(--brass);
  --holo: linear-gradient(115deg, #ff6aa8 0%, #ffb36b 16%, #f5f27a 30%, #7dffbf 46%, #6fd0ff 62%, #a58bff 78%, #ff6aa8 100%);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: max(20px, calc((100vw - 1240px) / 2));
  --section-y: clamp(56px, 8vw, 112px);
  --radius: 3px;
  --header-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a, button { touch-action: manipulation; }
h1, h2, h3, p, ul, dl, figure, blockquote, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Plaster sections: brass is 1.7:1 there, brass-deep 4.8:1 (CTO-150 B1). Cards set their own --focus. */
.barbers, .faq { --focus: var(--brass-deep); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.3rem; }

.eyebrow {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 18px;
}
.eyebrow--dark { color: var(--brass); }

/* ---------- utility strips ---------- */
.skip {
  position: absolute; top: -100px; left: 16px; z-index: 100;
  padding: 10px 14px; background: var(--cream); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.concept-note {
  background: var(--ink-2); color: #9c9a92;
  font-stretch: 75%; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; padding: 8px var(--gutter);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 0.9rem; }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--cream:hover { background: #ffffff; }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(243, 238, 227, 0.38); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(255, 255, 255, 0.06); }
.btn--felt { background: var(--felt); color: var(--cream); }
.btn--felt:hover { background: var(--felt-hover); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h); padding: 0 var(--gutter);
  background: rgba(19, 19, 19, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #262626;
  color: var(--cream);
}
.top__brand { display: block; padding: 6px 0; }
.top__brand img { width: auto; height: 34px; }
.top__nav { display: flex; gap: clamp(16px, 2.4vw, 34px); margin-left: auto; }
.top__nav a {
  color: var(--cream-muted); text-decoration: none; font-weight: 500; font-size: 0.92rem;
  padding: 10px 0; transition: color 0.2s ease;
}
.top__nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- hero: the storefront ---------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--cream);
  padding: clamp(40px, 6vw, 84px) var(--gutter) clamp(28px, 4vw, 56px);
  overflow: hidden;
}
/* stucco grain, like the facade */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07;
  background-image: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.hero__facade {
  display: grid; grid-template-columns: minmax(300px, 680px) 1fr; align-items: center;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.hero__sign { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 30px); min-width: 0; }
.hero__mark { flex: 1 1 0%; min-width: 0; max-width: 560px; container-type: inline-size; }
.sign { position: relative; isolation: isolate; }
.sign img { width: 100%; transition: filter 0.5s ease, opacity 0.5s ease; will-change: opacity;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.32)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.16)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.07)); }
.sign::before { content: ""; position: absolute; inset: -30% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.06), transparent 62%); transition: opacity 0.6s ease; }
/* a lit sign is steady most of the time, with the odd short dip — never a strobe */
@keyframes neon-flicker {
  0%, 30.9%, 100% { opacity: 1; }
  31.4% { opacity: 0.8; } 31.9% { opacity: 1; } 32.6% { opacity: 0.9; } 33.1% { opacity: 1; }
  60.9% { opacity: 1; } 61.3% { opacity: 0.85; } 61.7% { opacity: 1; }
  83.9% { opacity: 1; } 84.3% { opacity: 0.74; } 84.8% { opacity: 0.96; } 85.3% { opacity: 0.82; } 85.9% { opacity: 1; }
}
.sign { animation: sign-flicker 15s linear infinite, speed-go 15s linear infinite; }
.lights-off .sign { animation: none; }
@keyframes ignite { 0% { opacity: 0.15; filter: none; } 12% { opacity: 1; } 22% { opacity: 0.3; filter: none; } 34% { opacity: 1; } 48% { opacity: 0.6; } 58% { opacity: 1; } 100% { opacity: 1; } }
.sign--igniting img { animation: ignite 0.85s linear both; }

/* the speed blur: once every 15s each sign eases into a sideways streak like it's flying past,
   holds it while it keeps drifting forward, then eases back — about 8s in all, starting 1s into
   the cycle. The streak is a pre-rendered copy of the sign (assets/*-speed.webp, made by
   extras/make-speed.py) cross-faded over the sharp one. Every step eases in and out (the fades on
   a sine curve), so nothing lurches. Off with the lights, and for reduced motion. */
.speed::after {
  content: ""; position: absolute; top: 0; bottom: 0; opacity: 0; pointer-events: none;
  background: 0 0 / 100% 100% no-repeat;
  animation: speed-streak 15s linear infinite;
}
/* each streak is padded for its tail; these line it up with the sharp sign (printed by the script) */
.sign::after { left: -19.461%; width: 122.392%; background-image: url("/assets/wordmark-speed.webp"); }
.deux__sign::after { left: -19.745%; width: 123.142%; background-image: url("/assets/deux-logo-speed.webp"); }
.deux__sign { animation: speed-go 15s linear infinite; }
.speed__still { animation: speed-still 15s linear infinite; }
.lights-off .speed, .lights-off .speed__still, .lights-off .speed::after { animation: none; }
/* 1s the streak starts building (2.5s) · 3.5s full streak, the sign still drifting forward ·
   5.9s the streak starts to fade (2.5s) while the sign eases back past centre (6.1–8.1s) · 9.3s settled */
@keyframes speed-go {
  0%, 6.67% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  40.67% { transform: translateX(3.4%) skewX(-10deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  54% { transform: translateX(-0.6%) skewX(1.5deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  62%, 100% { transform: none; }
}
@keyframes speed-still {
  0%, 6.67%, 56%, 100% { opacity: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  23.33% { opacity: 0.2; }
  39.33% { opacity: 0.15; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
}
@keyframes speed-streak {
  0%, 6.67%, 56%, 100% { opacity: 0; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  23.33%, 39.33% { opacity: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
}
/* the Lounge sign's flicker on the same 15s cycle: neon-flicker's three short dips, moved into the
   calm stretch after the streak (10s, 12.6s, 14.5s) so the two never overlap */
@keyframes sign-flicker {
  0%, 66.67%, 100% { opacity: 1; }
  67.03% { opacity: 0.8; } 67.4% { opacity: 1; } 67.91% { opacity: 0.9; } 68.28% { opacity: 1; }
  84% { opacity: 1; } 84.29% { opacity: 0.85; } 84.59% { opacity: 1; }
  96.67% { opacity: 1; } 96.96% { opacity: 0.74; } 97.33% { opacity: 0.96; } 97.69% { opacity: 0.82; } 98.13% { opacity: 1; }
}
/* the slogan, lettered under the sign between two brass rules. "Blur" joins the speed blur:
   it leans with the sign and trails a streak, on the same 15s cycle */
.slogan {
  display: flex; align-items: center; gap: 10px; gap: clamp(6px, 3cqi, 18px);
  margin-top: clamp(12px, 1.8vw, 22px);
  font-stretch: 125%; font-weight: 800; line-height: 1;
  /* sized to the sign's width (the words are ~12.7em wide), so it never runs into the pole */
  font-size: clamp(0.8rem, 1.75vw, 1.35rem); font-size: clamp(0.7rem, calc((100cqi - 30px) / 13.2), 1.35rem);
  letter-spacing: 0.28em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); text-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.slogan::before, .slogan::after {
  content: ""; flex: 1 1 0%; min-width: 8px; height: 1px;
  background: linear-gradient(90deg, rgba(210, 171, 87, 0), rgba(210, 171, 87, 0.8));
}
.slogan::after { transform: scaleX(-1); }
@container (max-width: 180px) { .slogan::before, .slogan::after { display: none; } }
/* letter-spacing trails the last letter; take it back so the words sit centred between the rules */
.slogan__text { margin-right: -0.28em; }
.slogan__blur { display: inline-block; animation: speed-go 15s linear infinite, slogan-streak 15s linear infinite; }
@keyframes slogan-streak {
  0%, 6.67%, 56%, 100% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.22), 0 0 0 rgba(243, 238, 227, 0), 0 0 0 rgba(243, 238, 227, 0), 0 0 0 rgba(243, 238, 227, 0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  23.33%, 39.33% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.22), -0.14em 0 0.05em rgba(243, 238, 227, 0.5), -0.34em 0 0.1em rgba(243, 238, 227, 0.26), -0.6em 0 0.16em rgba(243, 238, 227, 0.1);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
}
.lights-off .slogan { color: var(--cream-muted); text-shadow: none; }
.lights-off .slogan__blur { animation: none; }
.fixture { display: flex; align-items: flex-start; gap: 4px; flex: none; padding-top: 4px; }
.hero__copy .eyebrow { margin-bottom: 20px; }
.hero__copy h1 { max-width: 20ch; margin-bottom: 22px; }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--cream-muted); max-width: 46ch; margin-bottom: 30px; }

/* the windows: three panes in an aluminum frame */
.windows {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 10px; background: #262626; border: 1px solid var(--frame);
}
.pane { position: relative; margin: 0; background: #000; overflow: hidden; }
.pane img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pane figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 9px; background: rgba(13, 13, 13, 0.72); color: var(--cream);
  font-stretch: 75%; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pane { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pane:nth-child(2) { animation-delay: 0.09s; }
.pane:nth-child(3) { animation-delay: 0.18s; }

/* ---------- facts strip ---------- */
.facts { background: var(--felt); color: var(--cream); padding: 0 var(--gutter); }
.facts ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { padding: 22px 24px 22px 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid rgba(243, 238, 227, 0.18); }
.facts strong { display: block; font-stretch: 125%; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 4px; }
.facts span { display: block; font-size: 0.9rem; color: rgba(243, 238, 227, 0.86); line-height: 1.4; }

/* ---------- sections ---------- */
.section { padding: var(--section-y) var(--gutter); }
.section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.section__head h2 { margin-bottom: 18px; }
.section__lede { font-size: 1.08rem; color: #3d4139; }

/* ---------- barbers ---------- */
.roster {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
/* four across on desktop; a short last row centres instead of hugging the left */
.roster > .barber { flex: 0 1 calc((100% - 48px) / 4); min-width: 0; }
.barber {
  --focus: var(--brass);
  perspective: 1400px;
}
.barber__inner {
  display: grid; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.barber.is-flipped .barber__inner { transform: rotateY(180deg); }
.barber__face {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--ink); color: var(--cream);
  border: 1px solid #2a2a2a; border-radius: var(--radius);
  padding: 26px 24px 20px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: border-color 0.25s ease;
}
.barber__face:hover { border-color: var(--brass); }
.barber__back { transform: rotateY(180deg); background: #17211c; }
/* keep the hidden face out of the tab order even where `inert` is unsupported */
.barber:not(.is-flipped) .barber__back, .barber.is-flipped .barber__front { visibility: hidden; }
.barber__name h3, .barber__name h4, .barber__backname {
  font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 1.15rem; line-height: 1.1; color: var(--cream); margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.barber__meta { font-stretch: 75%; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); margin-top: 6px; }
.rating--none { font-size: 0.92rem; }
.barber__spec { font-stretch: 75%; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-muted); line-height: 1.5; }

/* ---------- the two shops ---------- */
.shop + .shop { margin-top: clamp(40px, 6vw, 72px); }
.shop__head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.shop__title h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 0 0 4px; }
.shop__title p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #3d4139; }
.shop__title p .i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.shop__mark { width: 92px; height: auto; flex: none; }
.shop__mark--deux { width: 112px; border-radius: 4px; box-shadow: 0 6px 16px rgba(22, 20, 44, 0.22); }

/* the holographic B, as a small icon (used on the jump-to-Deux button) */
.glyph-icon {
  display: inline-block; width: 18px; height: 20px; flex: none;
  background: var(--holo); background-size: 300% 300%;
  -webkit-mask: url("/assets/glyph.png") center / contain no-repeat;
          mask: url("/assets/glyph.png") center / contain no-repeat;
  animation: holo-shift 9s linear infinite;
}
.holo {
  background: var(--holo); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holo-shift 9s linear infinite;
}
@keyframes holo-shift { to { background-position: 200% 0; } }
/* Deux cards are purple, after the shop's mural wall, and carry the sheen on their top edge,
   so a card seen alone still says which door */
.barber__face { position: relative; }
.shop--deux .barber__face::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--holo); border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
}
.shop--deux .barber { --focus: var(--deux-soft); }
.shop--deux .barber__face { background: var(--deux-card); border-color: var(--deux-card-edge); }
.shop--deux .barber__back { background: var(--deux-card-back); }
.shop--deux .barber__face:hover { border-color: var(--deux-soft); }
.shop--deux .barber__meta, .shop--deux .flip, .shop--deux .tags span { color: var(--deux-soft); }
.shop--deux .flip { border-bottom-color: rgba(207, 201, 255, 0.3); }
.shop--deux .flip:hover { color: var(--cream); border-color: var(--deux-soft); }
.shop--deux .tags span { border-color: rgba(207, 201, 255, 0.45); }
.shop--deux .rating .i { fill: var(--deux-star); }
.shop--deux .btn--felt { background: var(--deux-violet); }
.shop--deux .btn--felt:hover { background: var(--deux-violet-hover); }
.barbers--deux .fineprint a { color: var(--deux-link); }

/* ---------- Blur Deux: the second storefront ---------- */
.deux, .gallery, .room {
  --deux-bg: #16142c; --deux-frame: #2c2852; --deux-soft: #cfc9ff;
  --deux-card: #2b2170; --deux-card-back: #211a57; --deux-card-edge: #3b3088;
  --deux-violet: #6a45e0; --deux-violet-hover: #7150e3; --deux-star: #f5d77a; --deux-link: #4a36a8;
}
.deux__stage {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deux-bg); color: var(--cream);
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(28px, 4vw, 56px);
}
/* same stucco grain as the Lounge hero, plus a holographic hairline across the top */
.deux__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07;
  background-image: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.deux__stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 0;
  background: var(--holo); background-size: 200% 100%; animation: holo-shift 9s linear infinite;
}
.deux__facade {
  display: grid; grid-template-columns: minmax(300px, 600px) 1fr; align-items: center;
  gap: clamp(32px, 5vw, 80px); margin-bottom: clamp(36px, 5vw, 64px);
}
/* the sign as it hangs over the door: chrome lettering on a tie-dye panel (assets/deux-sign-bg.webp
   is the panel with the lettering filled in, made by extras/make-deux-sign.py). The lettering is its
   own layer, placed where it sits on the real sign, so the speed blur streaks the letters across the
   colours while the panel stays put. The shop's chandelier floats above it like a halo. */
.deux__signage { position: relative; isolation: isolate; max-width: 600px; }
/* the panel's colours spill onto the wall around it */
.deux__signage::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1284 / 747; z-index: -1; pointer-events: none;
  background: url("/assets/deux-sign-bg.webp") center / cover;
  filter: blur(46px) saturate(1.2); opacity: 0.5; transform: scale(1.05);
  transition: opacity 0.6s ease;
}
.deux__panel {
  position: relative; aspect-ratio: 1284 / 747; overflow: hidden; border-radius: 6px;
  background: #7a5fc0 url("/assets/deux-sign-bg.webp") center / cover;
  box-shadow: 0 22px 48px rgba(6, 4, 22, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: filter 0.6s ease;
}
.deux__sign { position: absolute; left: 13.318%; top: 12.985%; width: 73.364%; }
.deux__sign img { width: 100%; height: auto; transition: opacity 0.6s ease; }
.deux__halo { position: relative; width: 50%; margin: 0 auto clamp(10px, 1.6vw, 18px); animation: halo-float 7s ease-in-out infinite; }
@keyframes halo-float { 50% { transform: translateY(-5px); } }
.deux__halo img { width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(255, 232, 196, 0.32)); transition: filter 0.6s ease; }
/* warm light around the crystals */
.deux__halo::before {
  content: ""; position: absolute; inset: -34% -22% -42%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(255, 226, 180, 0.3), rgba(255, 226, 180, 0) 64%);
  transition: opacity 0.6s ease;
}
.deux__copy h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); margin-bottom: 22px; max-width: 16ch; }
.deux__eyebrow { color: var(--deux-soft); margin-bottom: 20px; }
.deux__copy .lede { color: #d6d2e6; }
.deux__facts { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--deux-frame); }
.deux__facts dt { font-stretch: 75%; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deux-soft); margin-bottom: 4px; }
.deux__facts dd { margin: 0; font-size: 0.98rem; }
.deux__facts a { color: var(--cream); text-underline-offset: 4px; }
.windows--deux { background: #1f1c3a; border-color: var(--deux-frame); }
.barbers--deux { background: var(--plaster); }

/* the jump-to-Deux button: ink with a holographic edge */
.btn--deux {
  color: var(--cream); border: 1px solid transparent;
  background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--holo) border-box;
  background-size: 100% 100%, 200% 100%;
}
.btn--deux:hover { background: linear-gradient(#1e1e1e, #1e1e1e) padding-box, var(--holo) border-box; }

/* visit: two doors */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-bottom: 18px; }
.door__name { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.01em; margin: 0 0 6px; }
.door .visit__address { font-size: 1.15rem; margin: 0 0 8px; }
.door__meta { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--cream-muted); }
.door__meta a { color: var(--cream); font-weight: 600; text-underline-offset: 4px; display: inline-block; padding: 2px 0; }
.barber__name p { color: var(--cream-muted); font-size: 0.95rem; }
.barber__does { font-size: 1.02rem; line-height: 1.5; }
.barber__note { font-size: 0.95rem; color: var(--cream-muted); line-height: 1.5; }
.rating { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--cream-muted); }
.rating .i { width: 16px; height: 16px; fill: var(--brass); stroke: none; }
.rating strong { color: var(--cream); font-weight: 700; font-size: 1.05rem; }
.prices div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #2b2b2b; font-size: 0.95rem; }
.prices div:last-child { border-bottom: 1px solid #2b2b2b; }
.prices dt { color: var(--cream-muted); }
.prices dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span {
  font-stretch: 75%; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass); border: 1px solid rgba(210, 171, 87, 0.5); border-radius: 2px; padding: 4px 8px;
}
.barber__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 6px; }
.ig { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cream-muted); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
.ig .i { width: 16px; height: 16px; }
.ig:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.flip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin: 4px 0 0; padding: 4px 0;
  background: none; border: 0; border-bottom: 1px solid #3a3a3a;
  color: var(--brass); cursor: pointer;
  font: inherit; font-stretch: 75%; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.flip::after { content: "↻"; font-size: 0.95rem; letter-spacing: 0; }
.flip--back::after { content: "↺"; }
.flip:hover { color: var(--cream); border-color: var(--brass); }
.fineprint { max-width: 760px; margin-top: 28px; font-size: 0.85rem; color: var(--muted); }
.fineprint a { color: var(--felt); font-weight: 600; }

/* ---------- lounge + menu board ---------- */
.lounge {
  display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: "photo copy" "board board";
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px); align-items: center;
  background: var(--plaster-2);
}
.lounge__photo { grid-area: photo; }
.lounge__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.lounge__copy { grid-area: copy; max-width: 52ch; }
.lounge__copy h2 { margin-bottom: 20px; }
.lounge__copy p + p { margin-top: 14px; }

.board {
  grid-area: board;
  background: var(--felt); color: var(--cream);
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--radius);
}
.board__title { font-size: 1rem; letter-spacing: 0.04em; color: var(--brass); margin-bottom: 18px; }
.board__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.board__list li { padding: 12px 0; border-top: 1px solid rgba(243, 238, 227, 0.22); font-weight: 500; }
.board__note { margin-top: 20px; font-size: 0.9rem; color: var(--cream); opacity: 0.9; max-width: 60ch; }

/* ---------- photos & video: a gallery wall per shop ---------- */
/* Every picture hangs in a black 3:4 frame under its own ceiling light, and the wall slides one
   frame at a time. The open shop sets the colours: ink around a warm grey plaster wall for the
   Lounge, the mural's indigo for Deux (plus the holo hairline). The light over the frame in front
   is on full and the others are turned down. The same .gallery__body moves into .room (full
   screen) when "Take a look inside" under the slogan is clicked. */
.gallery {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--cream);
  padding: var(--section-y) 0 clamp(36px, 5vw, 64px);
  transition: background-color 0.4s ease;
}
.gallery[data-shop="deux"], .room[data-shop="deux"] { --focus: var(--deux-soft); background: var(--deux-bg); }
.gallery::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: var(--holo); background-size: 200% 100%; animation: holo-shift 9s linear infinite;
  opacity: 0; transition: opacity 0.4s ease;
}
.gallery[data-shop="deux"]::after { opacity: 1; }
.gallery__head { padding: 0 var(--gutter); margin-bottom: clamp(22px, 3vw, 32px); }
.gallery__head h2 { margin-bottom: 14px; }
.gallery__lede { font-size: 1.08rem; color: var(--cream-muted); max-width: 46ch; }
.gallery[data-shop="deux"] .gallery__eyebrow, .room[data-shop="deux"] .gallery__eyebrow { color: var(--deux-soft); }
.gallery[data-shop="deux"] .gallery__lede { color: #d6d2e6; }

.gallery__body {
  --frame-h: clamp(280px, 48vh, 440px);
  --frame-gap: clamp(44px, 6vw, 96px);
  --frame-edge: clamp(8px, 0.9vw, 12px);
  --lamp-room: 78px;   /* wall above the frames, where the lights hang */
  --wall-top: #79766f; --wall-mid: #9a968d; --wall-bot: #827e76;
  --wall-light: 255, 253, 247;
  --plaque: var(--ink); --plaque-soft: #1f1e1b;
}
.gallery__body[data-shop="deux"] {
  --wall-top: #1d1748; --wall-mid: #2a2170; --wall-bot: #18133d;
  --wall-light: 255, 226, 196;
  --plaque: var(--cream); --plaque-soft: var(--deux-soft);
}

.gallery__tabs { display: none; gap: 4px; padding: 4px; margin: 0 var(--gutter) clamp(18px, 2.4vw, 26px); border: 1px solid var(--frame); border-radius: 4px; }
.gallery[data-shop="deux"] .gallery__tabs, .room[data-shop="deux"] .gallery__tabs { border-color: var(--deux-frame); }
.gallery__tab {
  min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--radius);
  background: none; color: var(--cream-muted); cursor: pointer;
  font: inherit; font-stretch: 125%; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.01em; text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gallery__tab:hover { color: var(--cream); }
.gallery__tab[aria-selected="true"] { background: var(--felt); color: var(--cream); }
.gallery__tab[data-shop="deux"][aria-selected="true"] { background: var(--deux-violet); }
.gallery__shop { padding: 0 var(--gutter); margin-bottom: 16px; }
/* with JS: one shop at a time, picked by the tabs */
.js-gallery .gallery__tabs { display: inline-flex; }
.js-gallery .gallery__shop { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gallery:not(.js-gallery) .gallery__panel + .gallery__panel { margin-top: clamp(36px, 5vw, 56px); }

/* the wall. Without JS it's a plain sideways-scrolling row; with JS the track slides instead */
.wall {
  position: relative; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--lamp-room) 0 88px;
  background: linear-gradient(180deg, var(--wall-top), var(--wall-mid) 36%, var(--wall-mid) 70%, var(--wall-bot));
  box-shadow: inset 0 16px 22px -14px rgba(0, 0, 0, 0.45), inset 0 -10px 18px -12px rgba(0, 0, 0, 0.35);
}
.wall:focus-visible { outline-offset: -4px; }
/* the same plaster grain as the storefronts */
.wall::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.1; mix-blend-mode: multiply;
  background-image: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gallery__body[data-shop="deux"] .wall::before { mix-blend-mode: screen; opacity: 0.06; }
.gallery__body[data-shop="deux"] .frame::before { opacity: 0.22; }
.gallery__body[data-shop="deux"] .frame.is-active::before { opacity: 0.55; }
.wall__track { position: relative; display: flex; gap: var(--frame-gap); width: max-content; padding: 0 var(--gutter); }
.js-gallery .wall { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.js-gallery .wall__track {
  padding: 0; will-change: transform;
  transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.wall.is-dragging .wall__track { transition: none; }

.frame { position: relative; flex: none; height: var(--frame-h); aspect-ratio: 3 / 4; scroll-snap-align: center; }
/* the pool of light the lamp throws on the wall */
.frame::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -48%; right: -48%; top: calc(22px - var(--lamp-room)); bottom: -52px;
  background: radial-gradient(ellipse 44% 74% at 50% 0, rgba(var(--wall-light), 0.92), rgba(var(--wall-light), 0.62) 28%, rgba(var(--wall-light), 0.22) 56%, rgba(var(--wall-light), 0) 74%);
  opacity: 0.45; transition: opacity 0.6s ease, filter 0.6s ease;
}
/* the lamp */
.frame::after {
  content: ""; position: absolute; z-index: 2; left: 50%; top: calc(10px - var(--lamp-room));
  width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #fff 0 40%, #f3efe6 62%, #cfcabd 100%);
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.32);
  opacity: 0.72; transition: opacity 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease;
}
.frame.is-active::before, .gallery:not(.js-gallery) .frame::before { opacity: 1; }
.frame.is-active::after { opacity: 1; box-shadow: 0 0 22px 8px rgba(255, 255, 255, 0.6), 0 0 64px 20px rgba(255, 255, 255, 0.2); }
.frame__art {
  position: relative; z-index: 1; height: 100%; margin: 0; overflow: hidden;
  background: #050505; border: var(--frame-edge) solid #0d0d0d; border-radius: 1px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 34px -18px rgba(0, 0, 0, 0.65), 0 10px 18px -8px rgba(0, 0, 0, 0.35);
}
/* the bevel where the picture meets the frame */
.frame__art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.55); }
.frame__art img, .frame__art video { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: filter 0.6s ease; }
.js-gallery .frame:not(.is-active) { cursor: pointer; }
.js-gallery .frame:not(.is-active) img, .js-gallery .frame:not(.is-active) video { filter: brightness(0.78) saturate(0.88); }
/* the poster sits underneath; the video fades in over it once it has a frame to show */
.frame__art video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease, filter 0.6s ease; }
.frame.is-started video { opacity: 1; }
.frame__art figcaption {
  position: absolute; z-index: 2; left: 10px; bottom: 10px;
  padding: 5px 9px; background: rgba(13, 13, 13, 0.72); color: var(--cream);
  font-stretch: 75%; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px;
}
.js-gallery .frame__art figcaption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frame__kind { color: var(--brass); margin-right: 2px; }
.frame__play {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: rgba(13, 13, 13, 0.72); color: var(--cream);
  border: 1px solid rgba(243, 238, 227, 0.45); border-radius: 50%; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.frame__play[hidden] { display: none; }
.frame__play:hover { border-color: var(--cream); background: rgba(13, 13, 13, 0.9); }
.frame__play .i { width: 18px; height: 18px; }
.frame__play .i-play { fill: currentColor; stroke: none; }
.frame__play .i-pause { display: none; stroke-width: 3; }
.frame.is-playing .frame__play .i-play { display: none; }
.frame.is-playing .frame__play .i-pause { display: inline; }

.wall__arrow {
  position: absolute; z-index: 3; top: calc(var(--lamp-room) + var(--frame-h) / 2 - 26px);
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  background: rgba(19, 19, 19, 0.6); color: var(--cream);
  border: 1px solid rgba(243, 238, 227, 0.35); border-radius: 50%; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.wall__arrow[hidden] { display: none; }
.wall__arrow--prev { left: max(12px, calc(var(--gutter) - 8px)); }
.wall__arrow--next { right: max(12px, calc(var(--gutter) - 8px)); }
.wall__arrow:hover { background: rgba(19, 19, 19, 0.85); border-color: var(--cream); }
.wall__arrow:disabled { opacity: 0; pointer-events: none; }
.wall__arrow .i { width: 22px; height: 22px; }
/* the label under the frame in front, like the wall text in a gallery */
.wall__plaque {
  position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: none; align-items: baseline; gap: 12px; white-space: nowrap; color: var(--plaque);
}
.js-gallery .wall__plaque { display: flex; }
.wall__count {
  padding-right: 12px; border-right: 1px solid currentColor; color: var(--plaque-soft); font-variant-numeric: tabular-nums;
  font-stretch: 75%; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em;
}
.wall__cap { font-stretch: 125%; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; text-transform: uppercase; }
.wall__plaque.is-new { animation: plaque-in 0.5s ease both; }
@keyframes plaque-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* pulling the cord in the hero turns the gallery lights down too */
/* (a filter, so it stacks on whatever opacity the frame's state and shop give the light) */
.lights-off .frame::before { filter: opacity(0.2); }
.lights-off .frame::after { filter: brightness(0.5); box-shadow: none; }

/* ---------- the wall, full screen (opened from the hero) ---------- */
.room {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden auto; overscroll-behavior: contain;
  background: var(--ink); color: var(--cream);
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.15, 1), background-color 0.4s ease;
}
.room.is-in { transform: none; }
.room::backdrop { background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.5s ease; }
.room.is-in::backdrop { opacity: 1; }
.room__inner {
  display: flex; flex-direction: column; min-height: 100%;
  padding: max(18px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
}
.room__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); margin-bottom: clamp(14px, 2vw, 22px); }
.room__bar .eyebrow { margin-bottom: 8px; }
.room__bar h2 { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }
.room__close {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: none; color: var(--cream); border: 1px solid rgba(243, 238, 227, 0.38); border-radius: 50%; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.room__close:hover { border-color: var(--cream); background: rgba(255, 255, 255, 0.06); }
.room__close .i { width: 22px; height: 22px; }
.room__slot, .room .gallery__body, .room .gallery__panel:not([hidden]), .room .wall { display: flex; flex-direction: column; flex: 1; }
.room .gallery__tabs { align-self: flex-start; }
.room .gallery__body { --frame-h: clamp(240px, calc(100vh - 330px), 600px); --frame-h: clamp(240px, calc(100dvh - 330px), 600px); }
html.room-open { overflow: hidden; }
/* once the room has slid in, the frames walk in after it */
.room.is-in .frame { animation: frame-in 0.8s cubic-bezier(0.2, 0.75, 0.15, 1) 0.3s both; }
.room.is-in .frame:nth-child(2) { animation-delay: 0.38s; }
.room.is-in .frame:nth-child(3) { animation-delay: 0.46s; }
.room.is-in .frame:nth-child(4) { animation-delay: 0.54s; }
.room.is-in .frame:nth-child(n+5) { animation-delay: 0.62s; }
@keyframes frame-in { from { opacity: 0; transform: translateX(70px); } }

/* "Take a look inside", under the slogan */
.peek {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%;
  margin: clamp(14px, 1.8vw, 22px) auto 0; min-height: 44px; padding: 6px 16px 6px 10px;
  border: 1px solid rgba(243, 238, 227, 0.22); border-radius: 999px;
  color: var(--cream-muted); text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.peek:hover { color: var(--cream); border-color: rgba(243, 238, 227, 0.55); background: rgba(255, 255, 255, 0.04); }
.peek__icon { width: 28px; height: 28px; flex: none; overflow: visible; }
.peek__icon rect { fill: none; stroke: currentColor; stroke-width: 2.2; }
.peek__art { fill: currentColor; opacity: 0.65; }
.peek__lamp { fill: #fff; }
.peek__cone { fill: rgba(255, 255, 255, 0.18); transition: opacity 0.5s ease; }
.peek__label { font-stretch: 75%; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.peek__arrow { width: 16px; height: 16px; transition: transform 0.25s ease; }
.peek:hover .peek__arrow { transform: translateX(3px); }
.lights-off .peek__lamp { fill: var(--cream-muted); }
.lights-off .peek__cone { opacity: 0; }

/* ---------- one real review ---------- */
.quote { background: var(--oak); color: var(--ink); padding: var(--section-y) var(--gutter); }
.quote p { font-stretch: 125%; font-weight: 800; text-transform: uppercase; line-height: 1.08; font-size: clamp(1.45rem, 3.6vw, 2.9rem); max-width: 22ch; text-wrap: balance; }
.quote footer { margin-top: 20px; font-size: 0.9rem; color: #4a3a1e; }

/* ---------- faq ---------- */
.faq { background: var(--plaster); }
.faq h2 { margin-bottom: 26px; }
.faq__list { max-width: 760px; border-bottom: 1px solid var(--plaster-2); }
.faq details { border-top: 1px solid #cfc7b4; }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; padding: 14px 0;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--felt); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; max-width: 62ch; color: #3d4139; }
.faq details a { color: var(--felt); font-weight: 600; }

/* ---------- visit ---------- */
.visit {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: stretch;
  background: var(--ink); color: var(--cream);
}
.visit h2 { margin-bottom: 26px; }
.pole { width: 74px; height: auto; flex: none; transition: filter 0.6s ease;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.22)); }
.pole__stripes { animation: pole-spin 2.6s linear infinite; }
@keyframes pole-spin { to { transform: translateY(-96px); } }

/* the pull-cord */
.cord { --focus: var(--brass); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px;
  margin: 0; padding: 0 4px 6px; background: none; border: 0; color: var(--cream-muted); cursor: pointer; font: inherit; }
.cord svg { width: 30px; height: 96px; transform-origin: 50% 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cord:hover svg { transform: translateY(3px); }
.cord--pull svg { transform: translateY(14px); transition: transform 0.12s ease-in; }
.cord__label { font-stretch: 75%; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.cord:hover .cord__label { color: var(--cream); }

/* lights off: the sign, the pole and the windows go dark; the page copy stays readable */
.lights-off .sign img { filter: none; opacity: 0.34; }
.lights-off .sign::before { opacity: 0; }
.lights-off .pole { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)) brightness(0.42); }
.lights-off .pole__stripes { animation-play-state: paused; }
.pane img { transition: filter 0.7s ease; }
.lights-off .pane img { filter: brightness(0.38) saturate(0.7); }
.lights-off .deux__panel { filter: brightness(0.45); }
.lights-off .deux__signage::before, .lights-off .deux__halo::before { opacity: 0; }
.lights-off .deux__halo img { filter: brightness(0.32) saturate(0.6); }
.lights-off .deux__halo { animation-play-state: paused; }
.visit__address { font-stretch: 112%; font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin-bottom: 14px; }
.visit__detail { color: var(--cream-muted); max-width: 46ch; margin-bottom: 26px; }
.visit__facts { display: grid; gap: 14px; margin-bottom: 30px; max-width: 46ch; }
.visit__facts div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid #2b2b2b; }
.visit__facts dt { font-stretch: 75%; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); padding-top: 3px; }
.visit__facts dd { margin: 0; font-size: 0.98rem; }
.visit__facts a { color: var(--cream); font-weight: 600; text-underline-offset: 4px; }
.visit__facts a, .visit__maplink, .foot__line a, .fineprint a { display: inline-block; padding: 2px 0; }
.visit__map { display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.visit__map iframe { flex: 1; width: 100%; min-height: 360px; border: 1px solid var(--frame); border-radius: var(--radius); filter: grayscale(0.2) contrast(1.02); background: var(--panel); }
.visit__maplink { align-self: flex-start; color: var(--cream-muted); font-size: 0.9rem; text-underline-offset: 4px; }
.visit__maplink:hover { color: var(--cream); }

/* ---------- footer ---------- */
.foot { background: var(--ink-2); color: #9c9a92; padding: 48px var(--gutter) 40px; text-align: center; border-top: 1px solid #1f1f1f; }
.foot__mark { width: auto; height: 44px; margin: 0 auto 18px; opacity: 0.9; }
.foot__line { color: var(--cream-muted); font-size: 0.95rem; }
.foot__line a { color: inherit; text-underline-offset: 4px; }
.foot__social { margin: 10px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 22px; }
.foot__social a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--cream-muted); text-decoration: none; font-size: 0.92rem; }
.foot__social a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.foot__social .i { width: 17px; height: 17px; }
.foot__note { font-size: 0.8rem; max-width: 62ch; margin: 8px auto 0; }
.foot__note a { color: var(--cream-muted); text-underline-offset: 3px; }

/* ---------- coming soon (index) ---------- */
.soon-body { background: var(--ink); color: var(--cream); }
.soon {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(32px, 5vw, 56px);
}
/* stucco grain across the whole viewport, not just the column */
.soon-body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.07;
  background-image: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.soon-body > * { position: relative; z-index: 1; }
.soon__sign { margin-bottom: clamp(28px, 5vw, 48px); }
.soon__sign img {
  width: 100%; max-width: 480px; height: auto;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.3)) drop-shadow(0 0 14px rgba(255,255,255,0.15)) drop-shadow(0 0 40px rgba(255,255,255,0.07));
  animation: neon-flicker 11s linear infinite;
}
.soon__title { font-size: clamp(1.9rem, 5vw, 3.1rem); margin-bottom: 18px; }
.soon__lede { font-size: 1.12rem; line-height: 1.55; color: var(--cream-muted); max-width: 48ch; margin-bottom: 30px; }
.soon__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(32px, 5vw, 48px); }
.soon__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid #2b2b2b; padding-top: 24px; }
.soon__facts dt { font-stretch: 75%; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
.soon__facts dd { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--cream-muted); }
.soon__facts address { font-style: normal; color: var(--cream); margin-bottom: 6px; }
.soon__link { display: inline-block; min-height: 24px; padding: 2px 0; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.soon__link:hover { color: var(--brass); }
.soon__foot { padding: 0 var(--gutter) calc(32px + env(safe-area-inset-bottom)); text-align: center; color: #7c7a73; font-size: 0.82rem; }
.soon__foot p { margin: 0; }
@media (max-width: 640px) {
  .soon__facts { grid-template-columns: 1fr; gap: 18px; }
  .soon__actions .btn { flex: 1 1 100%; }
}

/* ---------- forms (barber + owner) ---------- */
.wf { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) var(--gutter) 80px; }
.wf__hero { margin-bottom: clamp(28px, 4vw, 44px); }
.wf__mark { width: 150px; height: auto; margin-bottom: 26px; }
.wf__hero h1 { margin-bottom: 14px; }
.wf__hero p { color: #3d4139; font-size: 1.08rem; max-width: 56ch; }
.wf__lede { margin-bottom: 22px; }
.wf__hero a:not(.btn) { color: var(--felt); font-weight: 600; text-underline-offset: 3px; }
.wf__tour { margin-bottom: clamp(32px, 5vw, 52px); }
.wf__tour h2, .wf__qtitle { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 20px; }
.tour { counter-reset: tour; display: grid; gap: 4px; padding: 0; list-style: none; }
.tour li { counter-increment: tour; position: relative; padding: 18px 0 18px 46px; border-top: 1px solid #d8d0bd; }
.tour li::before {
  content: counter(tour); position: absolute; left: 0; top: 18px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--felt); color: var(--cream); border-radius: 50%;
  font-stretch: 75%; font-weight: 700; font-size: 0.82rem;
}
.tour h3 { font-size: 1.08rem; margin-bottom: 6px; }
.tour p { font-size: 0.98rem; line-height: 1.55; color: #3d4139; }
.q { padding: 22px 0; border-top: 1px solid #d8d0bd; }
.q:last-of-type { border-bottom: 1px solid #d8d0bd; }
.q label { display: block; font-stretch: 112%; font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.q .hint { display: block; font-size: 0.92rem; color: var(--muted); margin-bottom: 12px; line-height: 1.45; }
.q input, .q textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: #fbf8f1; border: 1px solid #cfc7b3; border-radius: var(--radius);
}
.q textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.q input:focus-visible, .q textarea:focus-visible { outline: 3px solid var(--brass-deep); outline-offset: 2px; border-color: var(--brass-deep); }
.q--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wf__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.wf__actions .btn { flex: 1 1 240px; }
.wf__status { flex-basis: 100%; margin: 0; min-height: 1.3em; font-size: 0.95rem; font-weight: 600; color: var(--felt); }
.wf__status--warn { color: #9a3412; }
.wf__done { border: 1px solid #d8d0bd; border-radius: var(--radius); background: #f7f3ea; padding: 28px 26px; }
.wf__done:focus-visible { outline: 3px solid var(--brass-deep); outline-offset: 3px; }
.wf__done h2 { font-size: 1.5rem; margin-bottom: 10px; }
.wf__done p { color: #3d4139; margin-bottom: 18px; max-width: 52ch; }
.wf__note { margin-top: 24px; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.wf__note a { color: var(--felt); text-underline-offset: 3px; }

.wf__qlede { color: #3d4139; font-size: 1.02rem; max-width: 54ch; margin: -8px 0 4px; }
.choice { border: 0; padding: 22px 0; margin: 0; }
.choice legend { font-stretch: 112%; font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: 12px; }
label.choice__opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin-bottom: 10px; cursor: pointer;
  background: #fbf8f1; border: 1px solid #cfc7b3; border-radius: var(--radius); transition: border-color 0.2s ease, background-color 0.2s ease; }
label.choice__opt:hover { border-color: var(--felt); }
label.choice__opt input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--felt); flex: none; }
label.choice__opt:has(input:checked) { border-color: var(--felt); background: #f0f4ed; }
label.choice__opt input:focus-visible { outline: 3px solid var(--brass-deep); outline-offset: 2px; }
label.choice__opt span { display: block; }
label.choice__opt strong { display: block; font-size: 1.02rem; margin-bottom: 2px; }
label.choice__opt em { display: block; font-style: normal; font-size: 0.93rem; color: var(--muted); line-height: 1.45; }

/* preview banner */
.preview-note {
  background: var(--brass); color: var(--ink);
  font-stretch: 75%; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 9px var(--gutter); margin: 0;
}
.preview-note a { color: inherit; text-underline-offset: 3px; }

/* ---------- mobile dock ---------- */
.dock {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(13, 13, 13, 0.96); border-top: 1px solid #262626;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.3s;
}
.js-dock .dock { transform: translateY(110%); visibility: hidden; }
.js-dock .dock.dock--show { transform: none; visibility: visible; }
.dock .btn { flex: 1; }
.dock .btn--ghost { flex: 0 0 auto; min-width: 112px; }

/* ---------- scroll reveal (only with JS + motion allowed) ---------- */
.js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js-motion .reveal.in { opacity: 1; transform: none; }
.js-motion .roster .reveal:nth-child(4n+2) { transition-delay: 45ms; }
.js-motion .roster .reveal:nth-child(4n+3) { transition-delay: 90ms; }
.js-motion .roster .reveal:nth-child(4n+4) { transition-delay: 135ms; }

/* ---------- responsive ---------- */
@media (max-width: 1320px) and (min-width: 1101px) {
  .roster > .barber { flex-basis: calc((100% - 32px) / 3); }
}

@media (max-width: 1100px) {
  .hero__facade { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .deux__facade { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .deux__signage { max-width: 460px; }
  .hero__mark { max-width: 440px; }
  .roster > .barber { flex-basis: calc((100% - 16px) / 2); }
  .board__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .lounge { grid-template-columns: 1fr; grid-template-areas: "photo" "copy" "board"; align-items: start; }
  .lounge__copy { max-width: 60ch; }
  .visit { grid-template-columns: 1fr; }
  .visit__map { min-height: 320px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 76px; }
  :root { --header-h: 60px; }
  .top__nav, .top__cta { display: none; }
  .top__brand img { height: 30px; }
  .hero { padding-top: 36px; }
  .hero__mark { max-width: none; }
  .pole { width: 50px; }
  .cord svg { width: 26px; height: 78px; }
  .cord__label { font-size: 0.6rem; }
  .lede { font-size: 1.05rem; }
  .hero__copy h1 { max-width: none; }
  .windows { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
  .pane:first-child { grid-column: 1 / -1; }
  .pane:not(:first-child) figcaption { display: none; }
  .facts ul { grid-template-columns: 1fr 1fr; }
  .facts li { padding: 18px 16px 18px 0; }
  .facts li + li { padding-left: 16px; }
  .facts li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid rgba(243, 238, 227, 0.18); }
  .roster > .barber { flex-basis: 100%; }
  .barber { min-height: 0; }
  .barber__face { padding: 22px 20px 18px; }
  .dock { display: flex; }
  .concept-note { font-size: 0.68rem; }
  .gallery__body { --frame-h: min(clamp(260px, 52vh, 420px), calc(68vw * 4 / 3)); --frame-gap: 28px; --lamp-room: 64px; }
  .room .gallery__body { --frame-h: min(calc(100vh - 300px), calc(76vw * 4 / 3)); --frame-h: min(calc(100dvh - 300px), calc(76vw * 4 / 3)); }
  .wall { padding-bottom: 76px; }
  .wall__arrow { width: 44px; height: 44px; top: calc(var(--lamp-room) + var(--frame-h) / 2 - 22px); }
  .wall__arrow--prev { left: 8px; }
  .wall__arrow--next { right: 8px; }
  .wall__cap { font-size: 0.95rem; }
}

@media (max-width: 520px) {
  .doors { grid-template-columns: 1fr; }
  .gallery__tabs { width: calc(100% - 2 * var(--gutter)); }
  .gallery__tab { flex: 1; padding: 8px 10px; }
  .shop__mark { width: 72px; }
}

@media (max-width: 420px) {
  .actions .btn { flex: 1 1 100%; }
  .visit__facts div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pane, .pole__stripes, .sign--igniting img, .sign, .soon__sign img, .holo, .glyph-icon, .deux__stage::after,
  .deux__sign, .speed__still, .speed::after, .slogan__blur, .deux__halo, .gallery::after { animation: none; }
  .cord svg, .sign img, .pole, .pane img, .slogan, .deux__panel, .deux__halo img { transition: none; }
  .btn, .barber, .barber__face, .barber__inner, .top__nav a, .ig, .flip, .dock { transition: none; }
  .gallery, .gallery::after, .gallery__tab, .js-gallery .wall__track, .frame::before, .frame::after, .frame__art img,
  .frame__art video, .frame__play, .wall__arrow, .room, .room::backdrop, .room__close, .peek, .peek__arrow { transition: none; }
  .room.is-in .frame, .wall__plaque.is-new { animation: none; }
  .barber { perspective: none; }
  .barber__inner { transform: none !important; }
  .barber__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .barber__back { transform: none; }
  .barber:not(.is-flipped) .barber__back, .barber.is-flipped .barber__front { display: none; }
  .btn:active { transform: none; }
}

/* ---------- Thanksgiving leaves (CEO D124 / T58), take off after 11-30. ----------
   Six autumn leaves (maple, oak, one acorn; four on phones) drift slowly down and sideways behind
   the sign and the copy (z-index -1 in the hero's stacking context: over the stucco grain, under
   everything else), with a slow sway and turn on a different clock. Each has its own speed and a
   negative delay, so they never move together. Fall colours, nearly opaque (Uriel 2026-11-03); the
   right-hand leaves keep to the edge and the centre one to the column gap, clear of the headline. Remove: this block and the .harvest div in index.html. */
.hero__facade { position: relative; }
.harvest { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.harvest__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.harvest__l {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); color: var(--c); opacity: 0;
  animation: harvest-fall var(--t) linear var(--d) infinite;
  will-change: transform, opacity;
}
.harvest__leaf {
  display: block; width: 100%; height: auto; fill: currentColor;
  animation: harvest-sway var(--ts) ease-in-out var(--d) infinite alternate;
  will-change: transform;
}
.harvest__l:nth-of-type(1) { --x: 4%;  --y: -8%; --s: 30px; --dx: 12vw;  --dy: 300px; --t: 46s; --ts: 7s;   --d: -6s;  --o: 0.92; --c: #b5321e; }
.harvest__l:nth-of-type(2) { --x: 38%; --y: -12%; --s: 24px; --dx: -10vw; --dy: 340px; --t: 54s; --ts: 9s;   --d: -31s; --o: 0.88; --c: #d9621c; }
.harvest__l:nth-of-type(3) { --x: 92%; --y: -6%; --s: 36px; --dx: 4vw;   --dy: 280px; --t: 42s; --ts: 8s;   --d: -17s; --o: 0.95; --c: #e0a526; }
.harvest__l:nth-of-type(4) { --x: 22%; --y: 26%; --s: 16px; --dx: 7vw;   --dy: 220px; --t: 58s; --ts: 10s;  --d: -44s; --o: 0.85; --c: #8a4b22; }
.harvest__l:nth-of-type(5) { --x: 96%; --y: 6%;  --s: 26px; --dx: -6vw;  --dy: 310px; --t: 50s; --ts: 6.5s; --d: -12s; --o: 0.9;  --c: #c4421a; }
.harvest__l:nth-of-type(6) { --x: 49%; --y: 34%; --s: 22px; --dx: -4vw;  --dy: 240px; --t: 40s; --ts: 7.5s; --d: -25s; --o: 0.87; --c: #c98a1b; }
@keyframes harvest-fall {
  0% { transform: translate(0, 0); opacity: 0; }
  12%, 88% { opacity: var(--o); }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@keyframes harvest-sway {
  from { transform: translateX(-10px) rotate(-20deg); }
  to { transform: translateX(10px) rotate(25deg); }
}
@media (max-width: 760px) { .harvest__l:nth-of-type(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .harvest__l, .harvest__leaf { animation: none; }
  .harvest__l { opacity: 0.85; }
}