/* Sorellina Clinic — homepage, "211 Shirland Road Fascia" world.
   The page is the real shopfront seen from the pavement: near-black fascia
   with shaded gilt lettering, painted charcoal timber, round brass mirrors,
   pale grey walls inside and the deep blue counter as the one cool accent. */

@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/gloock-400.woff2') format('woff2');
}

:root {
  --fascia: #141516;
  --fascia-2: #1d1f21;
  --charcoal: #3a3d40;
  --charcoal-2: #303336;
  --charcoal-line: #4a4e52;
  --gold: #c9a14a;
  --gold-light: #e3c886;
  --gold-shade: #6e5017;
  --brass: #cdb37c;
  --brass-2: #b99a5b;
  --wall: #ecebe7;
  --wall-2: #e1dfd9;
  --paper: #f7f6f3;
  --ink: #1b1c1e;
  --ink-2: #4b4e52;
  --blue: #2f5d86;
  --blue-2: #264d70;
  --on-blue: #f3f1ec;
  --on-dark: #ece6d8;
  --on-dark-2: #b9b2a2;
  --stone: #c9c6be;

  /* names read by ai-scanner.css and cookie-preferences.css */
  --cream: var(--paper);
  --line: rgba(27, 28, 30, .18);
  --serif: 'Gloock', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --focus: var(--blue);
  --fascia-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--fascia-h) + 12px); scrollbar-color: var(--charcoal) var(--wall); }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; font-weight: 500; transition: top 160ms var(--ease-out); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shaded signwriter's gilt: flat leaf with a darker shade line below. */
.gilt { color: var(--gold); text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .45); }

.dark { --focus: var(--gold); }

/* ---------------------------------------------------------------- fascia */
/* The fascia arrives at street scale: SORELLINA CLINIC in gilt across the
   whole board, the way the real sign reads from across Shirland Road. As the
   visitor scrolls, the board slides up and the name and roundel travel into
   the slim strip below it (js/shopfront.js measures and drives this), so the
   sign and the menu bar are one object rather than two. */
:root { --sign-h: clamp(250px, 36vh, 340px); }
.fascia { position: relative; z-index: 50; height: var(--sign-h); --focus: var(--gold); }
.fascia-board {
  position: absolute; top: 0; left: 0; right: 0; height: var(--sign-h);
  display: flex; flex-direction: column;
  background: var(--fascia); color: var(--on-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.js .fascia-board { position: fixed; will-change: transform; }
.sign { flex: 1; min-height: 0; display: flex; align-items: center; padding: 14px var(--gutter) 0; overflow: visible; }
.sign-brand { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); text-decoration: none; min-width: 0; }
.roundel { width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--fascia-2); box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--fascia-2), inset 0 0 0 6px rgba(201, 161, 74, .5); display: grid; place-items: center; }
.roundel img { width: 56%; height: auto; }
.sign-roundel {
  --r: clamp(84px, 16vh, 168px);
  width: var(--r); height: var(--r); transform-origin: 0 0;
  box-shadow: inset 0 0 0 calc(var(--r) * .037) var(--gold), inset 0 0 0 calc(var(--r) * .09) var(--fascia-2), inset 0 0 0 calc(var(--r) * .11) rgba(201, 161, 74, .5);
}
.sign-name {
  display: block; transform-origin: 0 0;
  font: 400 clamp(2.4rem, 6.2vw, 7.6rem)/1 var(--serif);
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  color: var(--gold);
  text-shadow: 0 .022em 0 var(--gold-shade), 0 .04em .025em rgba(0, 0, 0, .5);
}
.strip {
  position: relative; flex: none; height: var(--fascia-h);
  display: flex; align-items: center; gap: clamp(14px, 2vw, 32px);
  padding: 0 var(--gutter);
  box-shadow: inset 0 -1px 0 var(--gold-shade), inset 0 -5px 0 var(--fascia), inset 0 -6px 0 rgba(201, 161, 74, .35);
}
.strip::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background-color: rgba(201, 161, 74, .38); box-shadow: 0 3px 0 rgba(201, 161, 74, .14); }
.strip-ph { display: flex; align-items: center; gap: 14px; margin-right: auto; visibility: hidden; min-width: 0; }
.ph-name { font: 400 clamp(1.15rem, 1.6vw, 1.6rem)/1 var(--serif); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.strip-tag { position: absolute; left: var(--gutter); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); white-space: nowrap; pointer-events: none; }
.fascia-nav { display: flex; gap: clamp(12px, 1.4vw, 24px); }
.fascia-nav a { position: relative; font-size: .9rem; text-decoration: none; color: var(--gold-light); padding: 6px 0; transition: color 160ms ease; }
.fascia-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
.fascia-phone { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; text-decoration: none; color: var(--gold-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fascia-book { background: var(--gold); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .92rem; padding: 11px 18px; border-radius: 2px; white-space: nowrap; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.fascia-book:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .fascia-nav a:hover { color: #fff; }
  .fascia-nav a:hover::after { transform: scaleX(1); }
  .fascia-book:hover { background: var(--gold-light); }
}
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid rgba(201, 161, 74, .5); background: transparent; border-radius: 2px; cursor: pointer; place-content: center; gap: 6px; }
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--gold); transition: transform 200ms var(--ease-out); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - var(--fascia-h)); overflow-y: auto; background: var(--fascia); border-top: 1px solid rgba(201, 161, 74, .25); padding: 8px var(--gutter) 20px; display: grid; box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { color: var(--on-dark); text-decoration: none; padding: 13px 0; border-bottom: 1px solid rgba(236, 230, 216, .1); font-size: 1.05rem; }
.mobile-nav a:first-child { color: var(--gold); }

@media (max-width: 1240px) {
  .fascia-nav { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 640px) {
  :root { --fascia-h: 64px; --sign-h: 210px; }
  .strip-ph .roundel { width: 44px; height: 44px; }
  .ph-name { font-size: 1.05rem; }
  .fascia-phone { display: none; }
  .fascia-book { padding: 10px 12px; font-size: .85rem; }
  .sign-roundel { --r: 78px; }
  .strip-tag { font-size: .66rem; letter-spacing: .12em; }
  .strip-tag .tag-wide { display: none; }
}
@media (max-width: 440px) {
  .sign-name .wide, .ph-name .wide { display: none; }
}

/* The AI scanner button (built by js/ai-scanner.js) re-dressed in the shop's
   own vocabulary for this page: a brass-ringed roundel badge parked bottom
   right, still always visible for the first screens, without the pulse. */
body .scanner-fab {
  top: auto; bottom: 20px; right: 20px;
  padding: 13px 20px 13px 16px; gap: 10px;
  background: var(--fascia); color: var(--gold-light);
  border: 0; border-radius: 999px;
  font: 500 .92rem/1 var(--sans); letter-spacing: .01em; text-transform: none;
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--fascia), inset 0 0 0 5px rgba(201, 161, 74, .45), 0 10px 26px rgba(0, 0, 0, .35);
  animation: rise 500ms var(--ease-out) 1200ms backwards;
  transition: transform 160ms var(--ease-out), opacity 200ms ease, visibility 200ms;
}
body .scanner-fab .scanner-fab-spark { animation: none; font-size: 1rem; color: var(--gold); }
body .scanner-fab:hover { background: #000; transform: none; }
body .scanner-fab:active { transform: scale(.97); }
@media (max-width: 900px) { body .scanner-fab { bottom: 14px; right: 14px; padding: 11px 16px 11px 13px; font-size: .85rem; } }

/* ------------------------------------------------------------- shopfront */
.shopfront {
  position: relative;
  background: var(--charcoal);
  padding: clamp(14px, 1.6vw, 22px) var(--gutter) 0;
  --focus: var(--gold);
  /* painted timber: faint vertical grain of the boarding */
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 9px);
}
.front {
  display: grid;
  grid-template-columns: clamp(300px, 27vw, 400px) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  min-height: calc(100svh - var(--fascia-h) - 86px);
  max-height: 900px;
}

/* the window */
.window {
  grid-column: 2; grid-row: 1;
  position: relative; overflow: hidden;
  background: var(--fascia-2);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--charcoal-line), inset 0 0 0 1px rgba(0, 0, 0, .5);
  isolation: isolate;
}
.window-still, .window-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.window-film { z-index: 1; opacity: 0; transition: opacity 900ms ease; }
.window-film.is-playing { opacity: 1; }
.window-glass {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 44%, transparent 52%),
    linear-gradient(90deg, rgba(12, 13, 14, .62) 0%, rgba(12, 13, 14, .4) 30%, rgba(12, 13, 14, 0) 52%),
    linear-gradient(0deg, rgba(12, 13, 14, .55) 0%, rgba(12, 13, 14, 0) 34%);
}
.window-lettering { position: absolute; z-index: 3; left: clamp(22px, 4vw, 64px); top: clamp(28px, 6vh, 72px); max-width: 66%; color: var(--on-dark); }
.window-lettering h1 { font-size: clamp(2.6rem, 4.5vw, 4.9rem); line-height: 1; letter-spacing: -.015em; }
.window-lettering h1 { text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .9), 0 6px 22px rgba(0, 0, 0, .55); }
.window-lettering p { margin-top: clamp(16px, 2.4vh, 26px); font-size: clamp(1rem, 1.15vw, 1.15rem); max-width: 30rem; color: #f6f1e6; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .55); }

.window-mirrors { position: absolute; z-index: 3; right: clamp(18px, 3vw, 48px); bottom: clamp(18px, 3.4vh, 40px); display: flex; gap: clamp(14px, 1.8vw, 26px); margin: 0; padding: 0; list-style: none; }
.window-mirrors a { display: grid; justify-items: center; gap: 10px; text-decoration: none; }
.mirror {
  --size: clamp(92px, 9vw, 138px);
  width: var(--size); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--fascia-2);
  box-shadow: 0 0 0 4px var(--gold), 0 0 0 5px var(--gold-shade), 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.mirror img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.mirror-name { font: 400 1.15rem/1 var(--serif); color: var(--gold); text-shadow: 0 1px 0 var(--gold-shade), 0 2px 3px rgba(0, 0, 0, .7); text-align: center; }
.mirror-name small { display: block; margin-top: 5px; font: 400 .76rem/1.2 var(--sans); letter-spacing: .04em; color: #efe8d8; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
@media (hover: hover) and (pointer: fine) {
  .window-mirrors a:hover .mirror { transform: translateY(-3px); box-shadow: 0 0 0 4px var(--gold-light), 0 0 0 5px var(--gold-shade), 0 14px 28px rgba(0, 0, 0, .5); }
}

/* the blade sign hanging from the fascia */
.blade-sign { position: absolute; z-index: 6; top: 0; right: calc(var(--gutter) + 26px); display: grid; justify-items: center; text-decoration: none; transform-origin: 50% 0; }
.blade-bracket { width: 2px; height: clamp(14px, 2vh, 22px); background: var(--gold-shade); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.blade-disc {
  width: clamp(118px, 10vw, 148px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 2px;
  background: var(--fascia);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 7px var(--fascia), inset 0 0 0 8px rgba(201, 161, 74, .55), 0 10px 22px rgba(0, 0, 0, .4);
  transition: transform 220ms var(--ease-out);
}
.blade-disc strong { font: 400 clamp(1.5rem, 2vw, 1.9rem)/1 var(--serif); color: var(--gold); text-shadow: 0 1px 0 var(--gold-shade); }
.blade-disc span { font-size: .78rem; line-height: 1.15; padding: 0 14px; }
.blade-disc small { margin-top: 4px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
@media (hover: hover) and (pointer: fine) {
  .blade-sign:hover .blade-disc { transform: rotate(-4deg); }
}
.blade-sign:active .blade-disc { transform: scale(.97); }

/* the door */
.door {
  grid-column: 1; grid-row: 1;
  display: grid; grid-template-rows: minmax(150px, 1fr) auto auto; gap: 14px;
  padding: 14px;
  background: var(--charcoal-2);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--charcoal-line), inset 0 0 0 6px var(--charcoal-2), inset 0 0 0 7px rgba(0, 0, 0, .35), inset 0 0 0 8px rgba(255, 255, 255, .05);
}
.door-glass {
  position: relative; min-height: 150px;
  background-color: #191b1d;
  background-image: url("../assets/images/clinic-light-enhanced.webp");
  background-size: cover; background-position: 30% 50%;
  border: 9px solid var(--charcoal);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.door-glass::before { content: ""; position: absolute; inset: 0; background: rgba(16, 18, 20, .8); }
.glazing { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--charcoal), var(--charcoal)) 50% 0 / 7px 100% no-repeat,
    linear-gradient(var(--charcoal), var(--charcoal)) 0 33% / 100% 7px no-repeat; }
.door-glass > .door-number, .door-glass > .open-sign { z-index: 2; }
.letter-plate { display: block; position: relative; height: 22px; margin: 0 22%; border-radius: 2px; background: var(--brass); box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 4px var(--gold-shade), 0 2px 4px rgba(0, 0, 0, .4); }
.letter-plate::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 4px; translate: 0 -50%; background: #2a2418; border-radius: 1px; }
.door-number { position: absolute; left: 18px; bottom: 12px; font: 400 2.6rem/1 var(--serif); letter-spacing: .04em; }
.open-sign { position: absolute; top: 0; left: 50%; display: grid; justify-items: center; transform-origin: 50% 0; translate: -50% 0; }
.open-sign-cord { width: 80px; height: 34px; margin-top: 6px; stroke: #a59f93; stroke-width: 1.4; overflow: visible; }
.open-sign-cord circle { fill: var(--brass); stroke: var(--gold-shade); stroke-width: 1; }
.open-sign-card {
  display: grid; justify-items: center; gap: 3px;
  min-width: 158px; padding: 12px 18px 13px; margin-top: -2px;
  background: var(--paper); color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 10px 20px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(27, 28, 30, .12);
  text-align: center;
}
.open-sign-card strong { font: 400 1.85rem/1 var(--serif); color: #1f6b47; letter-spacing: .02em; }
.open-sign.is-closed .open-sign-card strong { color: #8e2b2b; }
.open-sign-card span { font-size: .78rem; line-height: 1.25; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.open-sign.swing { animation: sign-swing 1600ms cubic-bezier(.3, 0, .2, 1) both; }
@keyframes sign-swing {
  0% { rotate: 9deg; }
  22% { rotate: -6deg; }
  42% { rotate: 3.5deg; }
  62% { rotate: -1.8deg; }
  80% { rotate: .7deg; }
  100% { rotate: 0deg; }
}

/* the brass door plate: treatment chooser + booking */
.door-plate {
  margin: 0;
  padding: 20px;
  color: var(--ink);
  background-color: var(--brass);
  border-radius: 3px;
  box-shadow: inset 0 0 0 6px var(--brass), inset 0 0 0 7px rgba(110, 80, 23, .55), 0 2px 0 rgba(0, 0, 0, .25), 0 10px 22px rgba(0, 0, 0, .3);
  --focus: var(--ink);
}
.door-plate fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.door-plate legend { padding: 0; font: 400 1.4rem/1.1 var(--serif); margin-bottom: 12px; }
.plate-options { display: flex; flex-wrap: wrap; gap: 6px; }
.plate-options label { position: relative; }
.plate-options input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.plate-options span {
  display: block; padding: 7px 11px; font-size: .86rem; line-height: 1.2;
  border: 1px solid rgba(27, 28, 30, .4); border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.plate-options input:checked + span { background: var(--fascia); color: var(--gold-light); border-color: var(--fascia); }
.plate-options input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .plate-options input:not(:checked):hover + span { background: rgba(27, 28, 30, .1); }
}
.plate-readout { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(27, 28, 30, .28); min-height: 6.4em; transition: filter 200ms ease, opacity 200ms ease; }
.plate-readout.is-changing { filter: blur(2px); opacity: .4; }
.plate-price { font: 400 1.55rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.plate-note { margin-top: 6px; font-size: .9rem; line-height: 1.4; color: #2b2a26; }
.plate-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.plate-book {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 100%;
  padding: 14px 16px; background: var(--fascia); color: var(--gold-light);
  text-decoration: none; font-weight: 500; border-radius: 2px;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.plate-book svg { transition: transform 200ms var(--ease-out); }
.plate-book:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .plate-book:hover { background: #000; }
  .plate-book:hover svg { transform: translateX(3px); }
}
.plate-more { font-size: .9rem; font-weight: 500; }

/* stall riser and pavement */
.stallriser {
  display: flex; justify-content: center; gap: clamp(18px, 4vw, 64px);
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding: 18px 0;
  color: var(--gold);
  font: 400 .8rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .04);
  border-bottom: 14px solid var(--stone);
}

@media (max-width: 900px) {
  .front { grid-template-columns: 1fr; min-height: 0; max-height: none; }
  .window { grid-column: 1; grid-row: 1; min-height: 470px; }
  .door { grid-column: 1; grid-row: 2; grid-template-rows: auto auto; gap: 10px; padding: 10px; }
  .door-glass { min-height: 84px; }
  .door-number { font-size: 2.1rem; left: 16px; bottom: 50%; translate: 0 50%; }
  .open-sign { left: auto; right: 14px; translate: 0 0; }
  .open-sign-cord { width: 48px; height: 14px; margin-top: 4px; }
  .open-sign-card { min-width: 0; padding: 7px 14px 8px; grid-auto-flow: column; align-items: baseline; gap: 10px; }
  .open-sign-card strong { font-size: 1.4rem; }
  .window-glass { background: linear-gradient(180deg, rgba(12, 13, 14, .84) 0%, rgba(12, 13, 14, .5) 46%, rgba(12, 13, 14, .15) 62%, rgba(12, 13, 14, .72) 100%); }
  .window-lettering { max-width: none; right: 22px; top: 24px; }
  .window-mirrors { left: 0; right: 0; justify-content: center; }
  .blade-sign { right: calc(var(--gutter) + 6px); }
  .blade-disc { width: 92px; }
  .blade-disc strong { font-size: 1.2rem; }
  .blade-disc span { font-size: .72rem; padding: 0 8px; }
  .blade-long { display: none; }
  .blade-short { display: inline !important; }
  .blade-disc small { display: none; }
  .window-lettering h1 { padding-right: 92px; }
  .letter-plate { margin: 0 30%; }
  .stallriser { letter-spacing: .2em; font-size: .72rem; }
}
@media (max-width: 520px) {
  .window-lettering h1 { font-size: clamp(2.2rem, 10vw, 2.7rem); }
  .window-lettering p { font-size: .98rem; margin-top: 14px; }
  .mirror { --size: 76px; }
  .mirror-name { font-size: 1rem; }
  .stallriser { gap: 14px; letter-spacing: .14em; }
}

/* ------------------------------------------------------------ price wall */
.price-wall, .mirror-wall, .evidence, .counter, .films, .notices, .visit { padding: clamp(72px, 10vw, 140px) var(--gutter); }
.price-wall { background: var(--wall); }
.wall-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px clamp(24px, 6vw, 96px); align-items: end; max-width: 1360px; margin: 0 auto clamp(40px, 5vw, 64px); }
.wall-head h2, .mirror-wall h2, .evidence h2, .counter h2, .films h2, .notices h2, .visit h2 { font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: 1; }
.wall-head p { max-width: 34rem; color: var(--ink-2); }
/* The price list as a gilded-glass mirror: the old London barber's price
   mirror, gilt lettering on black glass inside a heavy gold frame. Categories
   are signwritten down the left; the chosen one lights up in full leaf and
   its prices are painted large on the right. */
.price-mirror {
  max-width: 1360px; margin: 0 auto;
  padding: clamp(12px, 1.4vw, 18px);
  background: var(--gold);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--gold-shade), inset 0 0 0 6px var(--gold), inset 0 0 0 7px rgba(110, 80, 23, .5), 0 26px 50px rgba(27, 28, 30, .25), 0 3px 6px rgba(27, 28, 30, .15);
}
.price-glass {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
  min-height: 540px;
  background-color: #121314;
  background-image:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .055) 34%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .03) 63%, rgba(255, 255, 255, 0) 66%);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 60px rgba(0, 0, 0, .6);
  --focus: var(--gold);
}
.price-tabs { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 64px); border-right: 1px solid rgba(201, 161, 74, .22); }
.price-tabs button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; padding: 12px 0; margin: 0;
  background: none; border: 0; border-bottom: 1px solid rgba(201, 161, 74, .14);
  color: rgba(227, 200, 134, .5); text-align: left; cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.tab-name { font: 400 clamp(1.5rem, 2.3vw, 2.3rem)/1.1 var(--serif); transition: text-shadow 200ms ease; }
.tab-from { font-size: .86rem; color: var(--on-dark-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-tabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: rgba(201, 161, 74, .7); }
.price-tabs button[aria-selected="true"] .tab-name { text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .55); }
.price-tabs button[aria-selected="true"] .tab-from { color: var(--gold-light); }
@media (hover: hover) and (pointer: fine) {
  .price-tabs button[aria-selected="false"]:hover { color: var(--gold-light); }
}
.price-panels { padding: clamp(28px, 4vw, 64px); display: grid; align-content: center; }
.price-panel[hidden] { display: none; }
.js .price-panel { animation: panel-in 280ms var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; filter: blur(3px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
.panel-who { display: flex; align-items: center; gap: 16px; }
.who-mirror { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--gold), 0 0 0 4px var(--gold-shade), 0 6px 14px rgba(0, 0, 0, .5); }
.who-mirror img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.panel-who p { font-size: .9rem; color: var(--on-dark-2); }
.panel-who strong { display: block; font: 400 1.4rem/1.15 var(--serif); color: var(--on-dark); }
.price-rows { margin: 28px 0 0; }
.price-rows div { display: flex; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(201, 161, 74, .16); }
.price-rows dt { display: flex; align-items: baseline; flex: 1; min-width: 0; font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: #f1ece1; }
.price-rows dt::after { content: ""; flex: 1; min-width: 18px; margin: 0 14px; border-bottom: 1.5px dotted rgba(201, 161, 74, .45); translate: 0 -.3em; }
.price-rows dd { margin: 0; display: grid; justify-items: end; }
.price-rows dd span { font: 400 clamp(1.5rem, 2.2vw, 2.1rem)/1 var(--serif); color: var(--gold); text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .5); font-variant-numeric: lining-nums; white-space: nowrap; }
.price-rows dd small { margin-top: 6px; font-size: .8rem; color: var(--on-dark-2); white-space: nowrap; }
.panel-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.panel-book { display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px; background: var(--gold); color: var(--ink); font-weight: 500; text-decoration: none; border-radius: 2px; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.panel-book:active { transform: scale(.97); }
.panel-more { color: var(--gold-light); font-weight: 500; text-underline-offset: .22em; text-decoration-color: rgba(227, 200, 134, .45); }
@media (hover: hover) and (pointer: fine) {
  .panel-book:hover { background: var(--gold-light); }
  .panel-more:hover { text-decoration-color: currentColor; }
}
@media (max-width: 860px) {
  .price-glass { grid-template-columns: 1fr; min-height: 0; }
  .price-tabs { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 22px 20px 20px; border-right: 0; border-bottom: 1px solid rgba(201, 161, 74, .22); }
  .price-tabs button { width: auto; padding: 8px 14px; border: 1px solid rgba(201, 161, 74, .35); border-radius: 999px; }
  .price-tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .price-tabs button[aria-selected="true"] .tab-name { text-shadow: none; }
  .tab-name { font: 500 .95rem/1.2 var(--sans); }
  .tab-from { display: none; }
  .price-panels { padding: 24px 20px 28px; }
  .price-rows div { padding: 14px 0; }
  .price-rows dt { font-size: 1rem; }
  .price-rows dt::after { margin: 0 8px; min-width: 10px; }
  .price-rows dd span { font-size: 1.35rem; }
}
.wall-link, .text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(27, 28, 30, .35); background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .wall-link:hover, .text-link:hover { text-decoration-color: currentColor; }
}

/* ----------------------------------------------------------- mirror wall */
.mirror-wall { background: var(--wall-2); }
.mirror-wall > h2, .mirror-lede { max-width: 1360px; margin-left: auto; margin-right: auto; }
.mirror-lede { margin-top: 20px; font-size: 1.15rem; max-width: min(1360px, 36rem); margin-left: max(0px, calc((100% - 1360px) / 2)); color: var(--ink-2); }
.mirrors { max-width: 1360px; margin: clamp(48px, 6vw, 88px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.hung:nth-child(2) { margin-top: clamp(40px, 7vw, 110px); }
.hung:nth-child(3) { margin-top: clamp(16px, 3vw, 44px); }
.big-mirror {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; max-width: 380px;
  box-shadow: 0 0 0 clamp(6px, .8vw, 10px) var(--gold), 0 0 0 calc(clamp(6px, .8vw, 10px) + 1px) var(--gold-shade), 0 22px 40px rgba(27, 28, 30, .22), 0 3px 6px rgba(27, 28, 30, .15);
  margin: clamp(6px, .8vw, 10px);
}
.big-mirror::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 30%); pointer-events: none; }
.big-mirror img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.hung h3 { margin-top: 30px; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; }
.hung .role { margin-top: 8px; font-size: .92rem; font-weight: 500; color: var(--blue); }
.hung p:last-child { margin-top: 12px; max-width: 30rem; color: var(--ink-2); }
.nima-film { max-width: 1100px; margin: clamp(64px, 8vw, 120px) auto 0; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.tall-mirror { margin: 0; padding: 12px; background: var(--gold); border-radius: 180px 180px 4px 4px; box-shadow: inset 0 0 0 1px var(--gold-shade), 0 22px 40px rgba(27, 28, 30, .22), 0 3px 6px rgba(27, 28, 30, .15); }
.tall-mirror video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--fascia); border-radius: 170px 170px 2px 2px; }
.nima-line { font: 400 clamp(1.9rem, 3.2vw, 3rem)/1.1 var(--serif); max-width: 18ch; }
.nima-cred { margin-top: 18px; max-width: 32rem; color: var(--ink-2); }
.nima-words .visit-book { margin-top: 28px; }
@media (max-width: 860px) {
  .mirrors { grid-template-columns: 1fr; max-width: 520px; }
  .hung:nth-child(n) { margin-top: 0; }
  .big-mirror { max-width: 300px; }
  .nima-film { grid-template-columns: 1fr; max-width: 520px; }
  .tall-mirror { max-width: 320px; }
}

/* -------------------------------------------------------------- evidence */
.evidence { background: var(--wall); }
.evidence > h2 { max-width: 1360px; margin: 0 auto; }
.evidence-grid { max-width: 1360px; margin: clamp(40px, 5vw, 64px) auto 0; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.compare { margin: 0; }
.compare-frame { position: relative; aspect-ratio: 380 / 740; max-height: 78vh; overflow: hidden; background: var(--fascia); border: 8px solid var(--charcoal); --pos: 50%; }
.compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--gold); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.compare-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; translate: -50% -50%; border-radius: 50%; background: var(--fascia); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 10px rgba(0, 0, 0, .4); }
.compare-label { position: absolute; top: 12px; padding: 4px 9px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(20, 21, 22, .82); color: var(--on-dark); pointer-events: none; }
.compare-label.is-before { left: 12px; }
.compare-label.is-after { right: 12px; }
.compare-control { display: block; margin-top: 14px; }
.compare-control input { width: 100%; height: 28px; margin: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare-control input::-webkit-slider-runnable-track { height: 2px; background: var(--charcoal); }
.compare-control input::-moz-range-track { height: 2px; background: var(--charcoal); }
.compare-control input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--fascia); box-shadow: inset 0 0 0 2px var(--gold); }
.compare-control input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--fascia); box-shadow: inset 0 0 0 2px var(--gold); }
.compare figcaption { margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.evidence-notes { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.evidence-text { padding-top: 8px; }
.certs { margin: 0; }
.certs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--charcoal); }
.certs figcaption { margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.evidence-text h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.05; }
.evidence-text p { margin-top: 16px; max-width: 34rem; color: var(--ink-2); }
.evidence-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
@media (max-width: 960px) {
  .evidence-grid { grid-template-columns: 1fr; }
  .compare { max-width: 380px; }
  .evidence-notes { grid-template-columns: 1fr; }
  .certs { max-width: 420px; }
}

/* --------------------------------------------------------------- counter */
.counter { background: var(--blue); color: var(--on-blue); --focus: var(--on-blue); }
.counter > h2 { max-width: 1360px; margin: 0 auto; }
.quotes { max-width: 1360px; margin: clamp(40px, 5vw, 72px) auto 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) clamp(24px, 3vw, 48px); }
.quote { margin: 0; grid-column: span 2; padding-top: 18px; border-top: 1px solid rgba(243, 241, 236, .3); }
.quote blockquote { margin: 0; }
.quote p { font: 400 1.3rem/1.35 var(--serif); }
.quote p::before { content: "\201C"; }
.quote p::after { content: "\201D"; }
.quote figcaption { margin-top: 14px; font-size: .88rem; color: #cbd8e4; }
.q-lead { grid-column: span 4; grid-row: span 2; }
.q-lead p { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.12; }
.q-small p { font-size: 2rem; }
.review-sources { max-width: 1360px; margin: 48px auto 0; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.text-link.on-blue { color: var(--on-blue); text-decoration-color: rgba(243, 241, 236, .45); }
@media (max-width: 960px) {
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote, .q-lead { grid-column: span 2; grid-row: auto; }
  .quote:not(.q-lead) { grid-column: span 1; }
}
@media (max-width: 600px) { .quote:not(.q-lead) { grid-column: span 2; } }

/* ----------------------------------------------------------------- films */
.films { background: var(--charcoal); color: var(--on-dark); --focus: var(--gold); }
.films > h2 { max-width: 1360px; margin: 0 auto; color: var(--gold); text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .45); }
.film-row { max-width: 1360px; margin: clamp(36px, 4vw, 56px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.film-row figure { margin: 0; }
.film { position: relative; }
.film .play { position: absolute; z-index: 2; left: 0; right: 0; top: 0; aspect-ratio: 9 / 16; display: grid; place-items: center; border: 0; padding: 0; background: linear-gradient(0deg, rgba(14, 15, 16, .35), rgba(14, 15, 16, 0) 45%); cursor: pointer; }
.tall-mirror.film .play { inset: 12px; aspect-ratio: auto; border-radius: 170px 170px 2px 2px; }
.film .play span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--fascia); color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--fascia), inset 0 0 0 6px rgba(201, 161, 74, .45), 0 8px 20px rgba(0, 0, 0, .4); transition: transform 160ms var(--ease-out); }
.film .play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; translate: 2px 0; }
.film .play:active span { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .film .play:hover span { transform: scale(1.05); } }
.film.is-playing .play { display: none; }
.film-row video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--fascia); box-shadow: 0 0 0 1px var(--charcoal-line); }
.film-row figcaption { margin-top: 12px; font-size: .92rem; color: var(--on-dark-2); }
@media (max-width: 860px) {
  .film-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); padding-bottom: 8px; scrollbar-color: var(--gold-shade) transparent; }
  .film-row figure { flex: 0 0 62vw; max-width: 280px; scroll-snap-align: start; }
}

/* --------------------------------------------------------------- notices */
.notices { background: var(--wall); }
.notices > h2 { max-width: 1360px; margin: 0 auto; }
.pane {
  max-width: 1360px; margin: clamp(40px, 5vw, 64px) auto 0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4vw, 64px);
  background-color: #1a1d1f;
  background-image: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, 0) 46%);
  border: 14px solid var(--charcoal);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 18px 40px rgba(27, 28, 30, .2);
  --focus: var(--gold);
}
.vinyl { display: grid; gap: 10px; text-decoration: none; color: var(--on-dark); }
.vinyl strong { font: 400 clamp(4.4rem, 10vw, 9rem)/.9 var(--serif); letter-spacing: -.02em; }
.vinyl-title { font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--serif); }
.vinyl-body { max-width: 30rem; color: var(--on-dark-2); }
.vinyl-go { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; color: var(--gold-light); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(227, 200, 134, .45); text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) { .vinyl:hover .vinyl-go { text-decoration-color: currentColor; } }
.slips { display: grid; gap: 18px; justify-items: start; }
.slip { display: grid; gap: 4px; padding: 18px 22px 20px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 10px 20px rgba(0, 0, 0, .35); transition: transform 220ms var(--ease-out); --focus: var(--blue); }
.slip-refer { rotate: -1.2deg; max-width: 25rem; }
.slip-member { rotate: .8deg; max-width: 21rem; margin-left: clamp(0px, 4vw, 56px); background: #f2efe6; }
.slip-derma { rotate: -.5deg; max-width: 23rem; }
.slip strong { font: 400 1.55rem/1.15 var(--serif); }
.slip-body { font-size: .92rem; color: var(--ink-2); }
.slip-go { margin-top: 6px; font-size: .92rem; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(27, 28, 30, .35); text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) { .slip:hover { transform: translateY(-3px); } }
.slip:active { transform: scale(.98); }
.affiliate-disclosure { max-width: 1360px; margin: 18px auto 0; font-size: .82rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .pane { grid-template-columns: 1fr; border-width: 10px; }
  .slip-member { margin-left: 0; }
}

/* ----------------------------------------------------------------- visit */
/* Every page ends back on the pavement after dark: the real shopfront photo
   dimmed to evening, the gilt sign glowing, and the OPEN/CLOSED card hanging
   in the window with the live state. Hours and contact sit beneath. */
.visit { background: var(--fascia); color: var(--on-dark); --focus: var(--gold); padding: 0 0 clamp(56px, 7vw, 96px); }
.night { position: relative; min-height: clamp(460px, 78vh, 760px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.night-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; filter: brightness(.42) saturate(.75) contrast(1.08); }
.night-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 22% at 50% 19%, rgba(227, 200, 134, .22), rgba(227, 200, 134, 0) 70%),
    linear-gradient(180deg, rgba(14, 16, 24, .55) 0%, rgba(14, 16, 24, .25) 35%, rgba(20, 21, 22, .78) 72%, var(--fascia) 100%);
}
.night-copy { padding: 0 var(--gutter) clamp(36px, 5vw, 64px); max-width: 1360px; width: 100%; margin: 0 auto; display: grid; justify-items: end; }
.night-copy > * { width: min(100%, 34rem); }
.night-copy .visit-book { width: auto; justify-self: start; margin-left: calc(100% - min(100%, 34rem)); }
.night-copy h2 { font-size: clamp(3rem, 6.4vw, 6.2rem); line-height: .95; letter-spacing: -.015em; text-shadow: 0 1px 0 var(--gold-shade), 0 2px 1px rgba(0, 0, 0, .55), 0 0 40px rgba(201, 161, 74, .25); }
.night-address { margin-top: 18px; max-width: 36rem; font-size: 1.1rem; color: #ece6d8; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.visit-book { margin-top: 28px; display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px; background: var(--gold); color: var(--ink); font-weight: 500; text-decoration: none; border-radius: 2px; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.visit-book:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .visit-book:hover { background: var(--gold-light); } }
.night-sign { position: absolute; top: 36%; left: 26%; right: auto; translate: -50% 0; transform-origin: 50% 0; }
.night-sign.is-placed { translate: -50% 0; }
.night-sign .open-sign-card { box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 14px 30px rgba(0, 0, 0, .55), 0 0 40px rgba(247, 246, 243, .12), inset 0 0 0 1px rgba(27, 28, 30, .12); }
.visit-grid { max-width: 1360px; margin: clamp(36px, 5vw, 64px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.visit address { font-style: normal; font-size: 1.25rem; line-height: 1.45; }
.visit-tube { margin-top: 8px; color: var(--on-dark-2); }
.visit-contact { margin-top: 22px; display: grid; gap: 6px; }
.visit-contact a { color: var(--gold-light); width: max-content; font-variant-numeric: tabular-nums; }
.hours { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 11px 0; border-bottom: 1px solid rgba(236, 230, 216, .12); text-align: left; font-weight: 400; }
.hours td { text-align: right; color: var(--on-dark-2); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--gold); }
.hours tr.is-today th::after { content: " · today"; font-size: .8rem; color: var(--gold-light); }
@media (max-width: 760px) {
  /* On phones the shopfront photo sits above the copy, so the sign on door 211 is never covered. */
  .night { min-height: 0; display: block; padding-top: 460px; }
  .night-photo, .night-veil { inset: 0 0 auto 0; height: 460px; }
  .night-photo { object-position: 18% 40%; }
  .night-veil { background: radial-gradient(ellipse 60% 22% at 50% 19%, rgba(227, 200, 134, .2), rgba(227, 200, 134, 0) 70%), linear-gradient(180deg, rgba(14, 16, 24, .45) 0%, rgba(14, 16, 24, .2) 45%, rgba(20, 21, 22, .7) 85%, var(--fascia) 100%); }
  .night-copy { padding-top: 8px; }
  .night-copy { justify-items: start; }
  .night-copy > * { width: 100%; }
  .night-copy .visit-book { margin-left: 0; }
  .night-sign .open-sign-card { min-width: 0; padding: 8px 14px 9px; }
  .night-sign .open-sign-card strong { font-size: 1.4rem; }
  .visit-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- footer */
.footer { background: #0e0f10; color: var(--on-dark-2); padding: 56px var(--gutter) 28px; --focus: var(--gold); }
.footer-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--gold); font: 400 1.4rem/1 var(--serif); text-transform: uppercase; letter-spacing: .1em; align-self: start; }
.footer-brand img { width: 34px; }
.footer nav { display: grid; gap: 8px; align-content: start; }
.footer nav a { text-decoration: none; color: var(--on-dark); width: max-content; }
@media (hover: hover) and (pointer: fine) { .footer nav a:hover { color: var(--gold-light); } }
.footer-bottom { max-width: 1360px; margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgba(236, 230, 216, .1); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: baseline; font-size: .86rem; }
.footer-bottom button { font: inherit; margin: 0; }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.footer-bottom a { color: var(--on-dark); }
@media (max-width: 680px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ------------------------------------------------------- entrance motion */
.js .window-lettering h1 { animation: gild 1100ms var(--ease-out) 150ms both; }
.js .window-lettering p { animation: rise 700ms var(--ease-out) 600ms both; }
.js .window-mirrors li { animation: rise 600ms var(--ease-out) both; }
.js .window-mirrors li:nth-child(1) { animation-delay: 700ms; }
.js .window-mirrors li:nth-child(2) { animation-delay: 770ms; }
.js .window-mirrors li:nth-child(3) { animation-delay: 840ms; }
@keyframes gild { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .window-lettering h1, .js .window-lettering p, .js .window-mirrors li { animation: fade 300ms ease both; }
  .open-sign.swing { animation: none; }
  .window-film { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .wall-head { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body.plate-in-view .scanner-fab { opacity: 0; visibility: hidden; pointer-events: none; }
}
body .scanner-fab svg { width: 1rem; height: 1rem; color: var(--gold); }

.blade-short { display: none; }
/* a darker breath of glass behind the window lettering, so the lede reads
   whatever the film or photo shows behind it */
.window-lettering { isolation: isolate; }
.window-lettering::before { content: ""; position: absolute; z-index: -1; inset: -90px -120px -90px -140px; background: radial-gradient(closest-side, rgba(12, 13, 14, .7) 0%, rgba(12, 13, 14, .55) 55%, rgba(12, 13, 14, 0) 100%); pointer-events: none; }