*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Kill horizontal scroll site-wide. The full-bleed PDP pairings band
   and footer use width:100vw + calc(50% - 50vw) margins, which on
   some mobile browsers can sneak a 1-2px overflow on the right when
   scrollbars are accounted for. overflow-x:hidden on root + body
   guarantees the user can never swipe the layout sideways by accident. */
html, body { overflow-x: hidden; max-width: 100%; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

:root {
  --paper: #efe9d8;
  --paper-warm: #f6f1e6;
  --paper-soft: #e6e0cd;
  --ink: #1a1814;
  --ink-mid: #3a3530;
  --ink-soft: #6a6560;
  --rule: #d2cab5;
  --rule-soft: #e5dec9;
  --yellow: #efc11a;
  --sienna: #8c3300;
  --klein: #14256a;
  --red: #b51e1e;
  --wood:        #c9a87a;   /* warm plywood — shelf frame */
  --wood-dark:   #8a6d4a;   /* shelf shadow / edge */
  --wood-deep:   #6e5536;   /* darkest wood vein */
  --gold:        #c8a45e;   /* muted gold leaf — hero ornament + accents */
  --gutter: clamp(20px, 5vw, 64px);
  /* Manrope is the universal type: headings, body, captions all reach for the same family.
     Mono is preserved for tracked-out eyebrow labels; hand stays for the rare handwritten accent. */
  --display: 'Manrope', system-ui, sans-serif;
  --serif:   'Manrope', system-ui, sans-serif;
  --sans:    'Manrope', system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'SF Mono', monospace;
  --hand:    'Caveat', 'Kalam', cursive;
  --hand-2:  'Kalam', 'Caveat', cursive;

  /* WP admin bar offset — overridden when body.admin-bar is present.
     Single source of truth used by every fixed/sticky element. */
  --wp-bar-h: 0px;
}

/* When WP shows the admin bar (logged-in admins), it lives at the top
   of the viewport with z-index 99999 — well above our .topbar (z:100).
   Shifting any fixed/sticky chrome down by --wp-bar-h keeps the page
   layout looking identical to a logged-out visitor. */
body.admin-bar { --wp-bar-h: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --wp-bar-h: 46px; }
}

::selection { background: var(--yellow); color: var(--ink); }


/* Skip-to-content link — visible only when keyboard-focused (Tab from page load) */
.skip-link {
  position: absolute;
  top: -64px; left: 12px;
  background: var(--ink); color: var(--paper-warm);
  padding: 12px 20px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 99999;
  transition: top 0.2s ease;
  border-bottom: 2px solid var(--yellow);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--yellow); outline-offset: 2px; }
#main-content { display: block; height: 0; overflow: hidden; }
#main-content:focus { outline: none; }

/* ─── Header / topbar ─────────────────────────────────────── */
.topbar {
  position: fixed; top: var(--wp-bar-h); left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  padding: 18px var(--gutter);
  background: linear-gradient(180deg, rgba(239,233,216,0.96) 78%, rgba(239,233,216,0.7) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar .l, .topbar .r { display: flex; align-items: center; gap: 22px; font: 500 11px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.topbar .r { justify-content: flex-end; }
.topbar .topbar-nav { display: inline-flex; align-items: center; gap: 22px; }
.topbar a { transition: color 0.2s; }
.topbar a:hover { color: var(--ink); }
.topbar .brand {
  font: 500 22px/1 var(--display);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
}
.topbar .brand b { font-weight: 600; color: var(--ink); }
.topbar .pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(26,24,20,0.06);
  font: 500 10px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mid);
}
.topbar .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--yellow); box-shadow: 0 0 0 2px var(--paper); }

/* ─── Site search overlay — full-viewport dim + centered paper card ─── */
.search-panel {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(20, 16, 8, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding-top: calc(var(--wp-bar-h, 0px) + 12vh);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: flex; justify-content: center; align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.36s ease;
}
.search-panel[hidden] { display: flex !important; }
body.search-open .search-panel { opacity: 1; pointer-events: auto; }
body.search-open { overflow: hidden; }

.search-panel-form {
  position: relative;
  width: min(720px, 100%);
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: clamp(36px, 6vw, 64px) clamp(28px, 5vw, 56px) clamp(28px, 4vw, 36px);
  box-shadow: 0 40px 80px -20px rgba(20, 16, 8, 0.45);
  transform: translateY(-12px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
body.search-open .search-panel-form {
  transform: translateY(0) scale(1);
}
.search-panel-eyebrow {
  display: block; text-align: center;
  font: 500 10px/1 var(--mono); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 28px;
}
.search-panel-row {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.search-panel-icon {
  width: 22px; height: 22px;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.search-panel input[type="search"] {
  flex: 1;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.1;
  color: var(--ink);
  background: transparent;
  border: 0; outline: 0;
  padding: 6px 0;
  caret-color: var(--sienna);
  -webkit-appearance: none;
}
.search-panel input[type="search"]::placeholder {
  color: var(--ink-soft); opacity: 0.45;
  font-style: italic;
}
.search-panel input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-panel-submit {
  flex: 0 0 auto;
  font: 500 10px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.search-panel-submit:hover { background: var(--ink); color: var(--paper); }
.search-panel-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 22px; line-height: 1;
  border-radius: 50%;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.search-panel-close:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.search-panel-hint {
  margin-top: 18px; text-align: center;
  font: 500 9px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .search-panel { padding-top: calc(var(--wp-bar-h, 0px) + 8vh); }
  .search-panel-form { padding: 48px 24px 28px; }
  .search-panel-submit { padding: 10px 12px; font-size: 9px; }
  .search-panel input[type="search"] { font-size: clamp(20px, 5vw, 28px); }
  .search-panel-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 18px; }
}


/* ─── Language switcher (next to Griffintown MTL on desktop, in drawer footer on mobile) ─── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lang-switch a {
  color: var(--ink-soft);
  padding: 2px 1px;
  transition: color 0.2s;
}
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--ink); outline: none; }
.lang-switch a.active {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.lang-switch .div { color: var(--rule); }
/* Drawer-footer variant — slightly more presence (paired with the icon row) */
.drawer-lang {
  display: inline-flex;
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.22em;
}
.topbar .r .div {
  width: 1px; height: 18px;
  background: var(--rule);
  margin: 0 4px;
}
.topbar .r .ic-row { display: inline-flex; align-items: center; gap: 20px; }
.topbar .r .ic-row a { color: var(--ink-soft); position: relative; display: inline-flex; }
.topbar .r .ic-row a:hover { color: var(--sienna); }
.topbar .r .ic-row .ic { width: 21px; height: 21px; display: block; }
.topbar .r .ic-row .cart-num {
  position: absolute; top: -5px; right: -9px;
  font: 600 9px/1 var(--mono);
  color: var(--paper); background: var(--sienna);
  padding: 2px 5px; border-radius: 999px;
  letter-spacing: 0;
}
/* ─── Burger button (hidden on desktop) ───────────────────────── */
.burger {
  display: none;                              /* hidden ≥ 801px */
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--ink); cursor: pointer;
  position: relative; z-index: 1100;          /* above drawer when open */
  transition: color 0.25s ease;
}
.burger:hover, .burger:focus-visible { color: var(--sienna); outline: none; }

.burger-icon { display: block; overflow: visible; }
.burger-icon .b {
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none;
  /* slight overshoot easing — feels hand-drawn rather than mechanical */
  transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity   0.30s ease;
}
/* Per-line transform-origin in viewBox coordinates (the SVG is 32×24 with
   lines at y=6, y=12, y=18). transform-box: fill-box does NOT work on
   <line> elements — they have no fill, so the box collapses. Pinning each
   origin to its line's geometric centre fixes the rotation pivot. */
.burger-icon .b1 { transform-origin: 16px 6px;  transition-delay: 0ms;   }
.burger-icon .b2 { transform-origin: 16px 12px; transition-delay: 60ms;  }
.burger-icon .b3 { transform-origin: 16px 18px; transition-delay: 120ms; }

/* Burger → X — top + bottom rotate ±42° (italic angle, not straight 45°),
   middle wipes to a zero-width crisp out. Reverse delay on close so the
   bottom retracts first (gives a "tucking back" feel). */
body.menu-open .burger-icon .b1 {
  transform: translateY(6px)  rotate(42deg);
  transition-delay: 120ms;
}
body.menu-open .burger-icon .b2 {
  transform: scaleX(0);
  opacity: 0;
  transition-delay: 60ms;
}
body.menu-open .burger-icon .b3 {
  transform: translateY(-6px) rotate(-42deg);
  transition-delay: 0ms;
}

/* ─── Drawer + backdrop (hidden on desktop) ───────────────────── */
.drawer-backdrop {
  display: none;                              /* swapped in at ≤800px */
  position: fixed; inset: 0;
  background: rgba(26, 24, 20, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.42s ease;
  z-index: 950;
}
.drawer {
  display: none;
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(88vw, 420px);
  background: var(--paper-warm);
  border-right: 1px solid var(--ink);
  transform: translateX(-101%);
  transition: transform 0.48s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle gallery shadow on the spine when peeking */
  box-shadow: 18px 0 60px -20px rgba(26, 24, 20, 0.35);
}

/* Mobile-only chrome: show burger, hide desktop nav, show drawer. */
@media (max-width: 800px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 14px; padding: 12px var(--gutter);
  }
  .topbar .l       { display: flex; align-items: center; gap: 10px; }
  .topbar .l .desktop-l { display: none; }
  .burger          { display: inline-flex; }

  .topbar .r       { font-size: 10px; gap: 0; }
  .topbar .r .desktop-l { display: none; }
  .topbar .r .div { display: none; }
  .topbar .r .ic-row { gap: 18px; }
  /* Search lives only inside the drawer on mobile;
     account + cart stay visible in the header. */
  .topbar .r .ic-search { display: none; }

  .drawer-backdrop, .drawer { display: block; }
}

body.menu-open                  { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }
body.menu-open .drawer          { transform: translateX(0); }
body.menu-open .drawer-backdrop { opacity: 1; pointer-events: all; }

/* When the drawer is open, lift the topbar above it (z:1100 > drawer 1000)
   so the burger-morphed-into-X stays visible and clickable as the close
   control. The topbar's paper-warm background + border are dropped so the
   bar reads as transparent over the drawer. The brand wordmark and right
   icon row fade out — the drawer is now telling the page's identity story,
   not the topbar. */
.topbar .brand, .topbar .r {
  transition: opacity 0.3s ease;
}
body.menu-open .topbar {
  z-index: 1100;
  background: var(--paper-warm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.menu-open .topbar .brand,
body.menu-open .topbar .r {
  opacity: 0;
  pointer-events: none;
}

/* ─── Drawer interior — museum brochure typography ─────────────── */
.drawer-inner {
  display: flex; flex-direction: column;
  min-height: 100%;
  /* Clear the topbar height (~52px) + WP admin bar so the eyebrow line
     doesn't sit directly under the X close button. */
  padding: calc(var(--wp-bar-h) + 72px) 32px 32px;
}
.drawer-pre {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 22px;
}
.drawer-title {
  font: italic 300 clamp(48px, 14vw, 68px)/0.92 var(--display);
  color: var(--ink);
  margin: 0 0 14px;
}
.drawer-title em { font-style: italic; color: var(--sienna); }
.drawer-top-lang {
  display: inline-flex;
  align-items: center;
  margin: 0 0 36px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  gap: 8px;
}
.drawer-top-lang a { color: var(--ink-soft); padding: 4px 0; transition: color 0.2s ease; }
.drawer-top-lang a.active { color: var(--ink); }
.drawer-top-lang a:hover { color: var(--ink); }
.drawer-top-lang .div { color: var(--rule); }

/* Vertical ledger of nav items */
.drawer-nav {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.drawer-nav a {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: baseline;
  gap: 0 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  /* Stagger entrance — each row delayed sequentially when drawer opens */
  opacity: 0; transform: translateX(-12px);
  transition: opacity 0.5s ease,
              transform 0.55s cubic-bezier(0.32, 0.72, 0, 1),
              padding-left 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              color 0.25s ease,
              border-color 0.25s ease;
}
body.menu-open .drawer-nav a {
  opacity: 1; transform: translateX(0);
}
body.menu-open .drawer-nav a:nth-child(1) { transition-delay: 0.18s, 0.18s, 0s, 0s, 0s; }
body.menu-open .drawer-nav a:nth-child(2) { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; }
body.menu-open .drawer-nav a:nth-child(3) { transition-delay: 0.30s, 0.30s, 0s, 0s, 0s; }
body.menu-open .drawer-nav a:nth-child(4) { transition-delay: 0.36s, 0.36s, 0s, 0s, 0s; }
body.menu-open .drawer-nav a:nth-child(5) { transition-delay: 0.42s, 0.42s, 0s, 0s, 0s; }

.drawer-nav a:hover,
.drawer-nav a:focus-visible {
  padding-left: 8px;                          /* page-turn slide */
  outline: none;
  border-bottom-color: var(--sienna);
}
.drawer-nav a:hover .num,
.drawer-nav a:focus-visible .num { color: var(--ink); }
.drawer-nav a:hover .title,
.drawer-nav a:focus-visible .title { color: var(--sienna); }

.drawer-nav .num {
  grid-row: 1; grid-column: 1;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--sienna);
  padding-top: 10px;                          /* baseline-tweak vs italic title */
  transition: color 0.25s ease;
}
.drawer-nav .title {
  grid-row: 1; grid-column: 2;
  display: block;
  font: italic 300 32px/1 var(--display);
  color: var(--ink);
  transition: color 0.25s ease;
}
.drawer-nav .caption {
  grid-row: 2; grid-column: 2;
  display: block;
  font: 400 10px/1.4 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* Footer — appointment pill, address, icon row */
.drawer-foot {
  margin-top: 0;
  padding-top: 0;
}
.drawer-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(26, 24, 20, 0.06);
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 14px;
}
.drawer-pill .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0 0 2px var(--paper-warm);
}
.drawer-addr {
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin: 20px 0;
}
.drawer-addr .sep { color: var(--rule); margin: 0 4px; }

.drawer-icrow {
  display: flex; gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.drawer-icrow a {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.drawer-icrow a:hover, .drawer-icrow a:focus-visible {
  color: var(--paper-warm);
  background: var(--ink);
  border-color: var(--ink);
  outline: none;
}
.drawer-icrow svg { width: 16px; height: 16px; display: block; }
.drawer-icrow .num {
  position: absolute; top: -4px; right: -4px;
  font: 600 8px/1 var(--mono);
  color: var(--paper); background: var(--sienna);
  padding: 2px 4px; border-radius: 999px;
  letter-spacing: 0;
}

/* Reduced-motion: keep the toggle but skip transitions */
@media (prefers-reduced-motion: reduce) {
  .burger-icon .b,
  .drawer, .drawer-backdrop,
  .drawer-nav a {
    transition: none !important;
  }
  body.menu-open .drawer-nav a { transform: none; }
}

/* ─── Hero · Folio · full-bleed photo at natural aspect ────────────
   100vw wide, photo rendered at its 3:2 native ratio (3840×2560), no
   crop. On typical viewports that puts the bottom 200–400px of the
   photo below the fold — scrolling down naturally reveals it. The
   brand/tagline block overlays the brick-wall zone between the
   center painting and the right window. On narrow viewports that
   zone is cropped out so the block falls back to a safe bottom-band.
─────────────────────────────────────────────────────────────────── */
.photo-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
@media (max-width: 800px) {
  /* On mobile, topbar (69px tall) would clip the photo; push the hero below it.
     Desktop intentionally lets the topbar overlay the top of the photo. */
  .photo-hero {
    margin-top: 69px;
  }
}
.photo-hero-figure {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 5 / 3;          /* crops ~10% off natural 3:2 → just the very bottom of the couch */
  overflow: hidden;
  display: block;
}
.photo-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;  /* anchor top → only bottom edge is trimmed */
}
/* ─── Hero wordmark — Audio / Autobahn + Visual Sound Art, smaller scale ─── */
.photo-hero-tag {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 800px) {
  .photo-hero-tag {
    left: clamp(16px, 6vw, 40px);
    bottom: clamp(20px, 8vw, 40px);
    text-align: left;
  }
}
@media (min-width: 801px) {
  .photo-hero-tag {
    right: clamp(120px, 16vw, 260px);
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
  }
}
.photo-hero-brand {
  font: 300 clamp(26px, 4.4vw, 68px)/0.95 var(--display);
  color: var(--paper-warm);
  letter-spacing: -0.012em;
  text-shadow:
    0 2px 12px rgba(8,7,5,0.95),
    0 0 22px rgba(8,7,5,0.75),
    0 4px 6px rgba(8,7,5,0.8);
  margin: 0 0 10px;
}
.photo-hero-sub {
  font: 400 clamp(10px, 1.05vw, 14px)/1 var(--mono);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow:
    0 2px 8px rgba(8,7,5,0.95),
    0 0 14px rgba(8,7,5,0.6);
}

/* Legacy hero rules — kept for any other template still using V05-style centered tag */
.photo-hero-tag.is-centered {
  left: 50%; top: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 84%;
  max-width: 1200px;
}
.photo-hero-brand.is-outline {
  font: 800 clamp(56px, 9vw, 140px)/0.9 var(--display);
  color: transparent;
  -webkit-text-stroke: 2px var(--paper-warm);
  text-stroke: 2px var(--paper-warm);
  letter-spacing: -0.024em;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  margin: 0 0 18px;
  white-space: nowrap;
}
.photo-hero-sub.is-mono {
  font: 500 clamp(11px, 1.2vw, 16px)/1 var(--mono);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--paper-warm);
  text-shadow: 0 0 12px rgba(8,7,5,0.9);
}

/* ─── Spotlight — 2 featured AN-UK pieces under the Peter section ─── */
.spotlight-section {
  background: var(--paper-warm);
  padding: clamp(64px, 8vw, 110px) var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}
.spotlight-head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.spotlight-head .l {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 18px;
}
.spotlight-head h2 {
  font: 300 clamp(36px, 4.6vw, 64px)/1 var(--display);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.spotlight-head h2 b { font-weight: 500; }
.spotlight-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}
.spotlight-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.spotlight-card figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px;
  box-shadow: 0 24px 48px -28px rgba(0,0,0,0.35);
  border: 1px solid var(--rule-soft);
}
.spotlight-card figure img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.8s ease;
}
.spotlight-card:hover figure img { transform: scale(1.04); }
.spotlight-card .placard {
  text-align: center;
}
.spotlight-card .series {
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sienna);
}
.spotlight-card h3 {
  font: 400 clamp(22px, 2.2vw, 30px)/1.2 var(--display);
  margin: 8px 0 6px;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.spotlight-card .meta {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 800px) {
  .spotlight-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ─── About — gray section under the hero ─────────────────────────
   Two-column: prose on the left, a staggered pair of photos on the
   right. The two photos lean into the Audio Note UK tie-in mentioned
   in the copy. On phones the columns stack, text first.
─────────────────────────────────────────────────────────────────── */
/* Var 09 — Deep Ink: near-black bg, painting as the only colour, ultra-thin body */
.about-section {
  background: #0f1011;
  color: var(--paper-warm);
  padding: clamp(80px, 10vw, 140px) clamp(28px, 5vw, 80px);
  position: relative;
}
.about-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.about-text {
  max-width: 58ch;
}
.about-kicker {
  display: inline-block;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(140, 51, 0, 0.6);
}
.about-text p {
  font: 300 15px/1.75 var(--sans);
  color: rgba(247, 239, 213, 0.7);
  margin: 0 0 14px;
}
/* Lede must be parent-scoped to beat `.about-text p` specificity (0,1,1) —
   matches Var09's `.v09-text .lede` (0,2,0) so the Manrope-200 + 38px wins. */
.about-text .about-lede {
  font: 200 clamp(24px, 2.8vw, 38px)/1.36 var(--display);
  color: var(--paper);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.about-text p:last-child {
  margin-bottom: 0;
}
.about-text p em {
  font-style: normal;
  font-weight: 500;
  color: var(--paper);
}
.about-images {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}
.about-img {
  margin: 0;
  overflow: hidden;
  position: relative;
}
.about-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s ease;
}
.about-img:hover img {
  transform: scale(1.02);
}
/* Var 09 painting cell — fills the column at natural 4:5 aspect, deep shadow */
.about-images {
  width: 100%;
}
.about-img--painting {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.9);
}
.about-img--painting img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-img--painting {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ─── Peter Qvortrup — full-width charcoal banner + tube-glow on hover ───
   The sketch already reads as a paper-on-cream charcoal — no grayscale
   filter needed. The .peter-tube is a positioned hotspot over the
   triode tube in the image; on hover/focus a warm radial gradient
   becomes visible, mix-blend-mode: screen so it reads as light layered
   onto the charcoal rather than a pasted-on colour.
─────────────────────────────────────────────────────────────────────── */
.peter-section {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: 0 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.peter-photo {
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;          /* Lock all founder banners to Peter's natural 3:1 height */
  overflow: hidden;
  background: var(--paper-warm);
  line-height: 0;
}
.peter-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Per-photo object-position tuning so important content stays in frame after the 3:1 crop */
#founder-burmester .peter-photo > img { object-position: center 35%; }   /* Dieter's face + Grieg sheet music */
#founder-acapella  .peter-photo > img { object-position: center 30%; }   /* Both men's faces + horn loudspeaker */

/* (AN-UK logo is now baked into peter-qvortrup-with-logo.png — no overlay CSS needed) */

/* (Tube glow / hotspot removed by user request — photo is fully static.) */

/* Bio block — centered below the banner */
.peter-inner {
  max-width: 1280px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: 0 var(--gutter);
}
.peter-text {
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
}
.peter-kicker {
  display: inline-block;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.peter-name {
  font: 400 clamp(36px, 4.2vw, 60px)/1 var(--display);
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  color: var(--ink);
}
.peter-bio {
  font: 300 16px/1.7 var(--sans);
  color: var(--ink-mid);
  margin: 0 auto 26px;
  max-width: 52ch;
}
.peter-cta {
  display: inline-block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: color 0.25s, border-color 0.25s, letter-spacing 0.25s;
}
.peter-cta:hover {
  color: var(--sienna);
  border-color: var(--sienna);
  letter-spacing: 0.4em;
}

/* ─── Founder spotlight — inline grid under each founder bio ─────────
   2 small cards centered, paper background, picks up the founder
   section's paper-warm. Image cards have a figure; text-only cards
   are taller text blocks (when a founder has no WC product photos). */
.founder-spotlight {
  max-width: 920px;
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding: 0 var(--gutter);
}
.founder-spotlight-label {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sienna);
  text-align: center;
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  display: block;
}
/* ─── Carousel: track + prev/next arrows ─── */
.founder-spotlight-carousel { position: relative; }
.founder-spotlight-track {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 10px;
  scroll-padding: 0 4px;
}
.founder-spotlight-track::-webkit-scrollbar { display: none; }
.founder-spotlight-track .founder-spotlight-card {
  flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 24px)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 800px) {
  .founder-spotlight-track .founder-spotlight-card { flex: 0 0 78%; }
}
.carousel-arrow {
  position: absolute;
  top: 38%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 400 22px/1 var(--display);
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}
.carousel-arrow:hover { background: var(--ink); color: var(--paper); transform: scale(1.05); }
.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }
@media (max-width: 800px) {
  .carousel-arrow { display: none; } /* mobile = swipe */
}
.founder-spotlight-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
a.founder-spotlight-card:hover { transform: translateY(-3px); }
.founder-spotlight-card figure {
  margin: 0;
  aspect-ratio: 4/3;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  overflow: hidden;
  box-shadow: 0 16px 32px -20px rgba(0,0,0,0.3);
}
.founder-spotlight-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* lifestyle photos (Acapella) fill the card; cutouts crop */
  display: block;
}
@media (max-width: 700px) {
  .founder-spotlight-card figure { aspect-ratio: 3/2; }
}
.founder-spotlight-card--text {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 36px 24px;
  box-shadow: 0 8px 20px -16px rgba(0,0,0,0.2);
}
.founder-spotlight-card h3 {
  font: 400 clamp(16px, 1.6vw, 22px)/1.2 var(--display);
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.founder-spotlight-card .meta {
  font: 500 9px/1.4 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 6px 0 0;
}
@media (max-width: 700px) {
  .founder-spotlight-grid { grid-template-columns: 1fr; }
}

/* ─── Rooms + Visit (combined section) ───────────────────────────────
   The Plate XIV plan and the Visit info live in one section now. The
   visit block sits beneath the plan inside the same container. */
.rooms-visit-section {
  padding: clamp(48px, 7vw, 80px) var(--gutter) clamp(72px, 9vw, 110px);
  max-width: 1480px;
  margin: 0 auto;
}
.rooms-visit-section .visit-inner {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.rooms-visit-section .visit-h3 {
  font: 300 clamp(28px, 3.6vw, 48px)/1.05 var(--display);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.rooms-visit-section .visit-h3 b { font-weight: 500; color: var(--sienna); }
.rooms-visit-section .visit-inner > div > p {
  font: 300 16px/1.7 var(--sans);
  color: var(--ink-mid);
  margin: 0 0 20px;
  max-width: 50ch;
}
.rooms-visit-section .visit-inner .cta {
  display: inline-block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;           /* reset the global .cta dark-button bg */
  padding: 0 0 4px;                  /* reset the global .cta 14/26 padding */
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  transition: color 0.25s, border-color 0.25s, letter-spacing 0.25s;
}
.rooms-visit-section .visit-inner .cta:hover {
  color: var(--sienna);
  border-color: var(--sienna);
  letter-spacing: 0.4em;
}
.rooms-visit-section .ledger dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 24px;
  align-items: center;
}
.rooms-visit-section .ledger dt {
  font: 500 9px/1.4 var(--mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sienna);
}
.rooms-visit-section .ledger dd {
  font: 400 14px/1.5 var(--sans);
  color: var(--ink);
  margin: 0;
}
@media (max-width: 800px) {
  .rooms-visit-section .visit-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Specs strip (4 small mini-stats) ─── */
.specs {
  padding: 36px var(--gutter);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper-warm);
}
.specs__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.specs .item {
  text-align: center;
  border-right: 1px solid var(--rule);
  padding: 6px 12px;
}
.specs .item:last-child { border-right: 0; }
.specs .item .n {
  font: italic 200 clamp(36px, 4.5vw, 64px)/0.86 var(--display);
  color: var(--sienna);
}
.specs .item h3 {
  font: 600 10px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-mid);
  margin: 10px 0 6px;
}
.specs .item p {
  font: italic 400 14px/1.35 var(--display); color: var(--ink-soft);
}
@media (max-width: 700px) {
  .specs__inner { grid-template-columns: 1fr 1fr; gap: 18px; }
  .specs .item { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
  .specs .item:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ─── Floor plan section (interactive — preserved from live) ─── */
.plan-section {
  padding: 56px var(--gutter);
  max-width: 1480px; margin: 0 auto;
}
.plan-section .head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--ink);
  margin-bottom: 36px; gap: 24px;
}
/* Simple-head variant: centered eyebrow + h2 (no 3-col grid, no border).
   Used on cartoon-section so the floor plan reads with a rooms-style
   header rather than the original Plate-014.A 3-col chrome. */
.plan-section .head.simple-head {
  display: block;
  grid-template-columns: none;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 28px;
  gap: 0;
}
.plan-section .head.simple-head .l {
  display: block;
  font: 500 12px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 14px; text-align: center;
}
.plan-section .head.simple-head h2 {
  font: italic 300 clamp(40px, 5.5vw, 76px)/1 var(--display);
  margin: 0; text-align: center;
}
.plan-section .head.simple-head h2 b {
  font-weight: 500; font-style: italic; color: var(--sienna);
}
.plan-section .head .l { font: 500 11px/1.4 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sienna); }
.plan-section .head .c {
  font: italic 300 clamp(36px, 5vw, 72px)/1 var(--display); text-align: center;
}
.plan-section .head .c b { font-weight: 500; font-style: italic; color: var(--sienna); }
.plan-section .head .r { font: 500 11px/1.4 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.plan-pair {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 36px; align-items: stretch;
}
.plan-svg-wrap {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 16px;
}
.floor-plan { display: block; width: 100%; height: auto; }
.floor-plan .room-area { cursor: pointer; pointer-events: all; transition: opacity 0.35s; outline: none; }
.floor-plan .room-area path:first-of-type { transition: fill 0.35s; }
.floor-plan .room-area:hover path:first-of-type { fill: rgba(140, 51, 0, 0.10); }
.floor-plan .room-area[data-room="reference"]:hover path:first-of-type { fill: rgba(20, 37, 106, 0.08); }
.floor-plan .room-area[data-room="red"]:hover path:first-of-type { fill: rgba(181, 30, 30, 0.08); }
.plan-pair[data-active="main"] .floor-plan .room-area:not([data-room="main"]),
.plan-pair[data-active="reference"] .floor-plan .room-area:not([data-room="reference"]),
.plan-pair[data-active="red"] .floor-plan .room-area:not([data-room="red"]) { opacity: 0.42; }
.plan-pair[data-active="main"] .floor-plan .room-area[data-room="main"] path:first-of-type { fill: rgba(140, 51, 0, 0.14); }
.plan-pair[data-active="reference"] .floor-plan .room-area[data-room="reference"] path:first-of-type { fill: rgba(20, 37, 106, 0.10); }
.plan-pair[data-active="red"] .floor-plan .room-area[data-room="red"] path:first-of-type { fill: rgba(181, 30, 30, 0.10); }
.plan-preview {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  overflow: hidden;
  /* No aspect-ratio on desktop — grid align-items: stretch makes the preview
     match the floor-plan SVG's height automatically. Mobile sets a 4/3
     aspect when stacked (see media query below). */
}
.plan-preview-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0; transition: opacity 0.6s ease;
}
/* Blue-frame — zoom in on the blue Morradi painting (shifted ~10% further left) */
.plan-preview-img[data-room="klein"] {
  object-position: 22% 50%;
  transform: scale(1.45);
  transform-origin: 22% 50%;
}
/* Red-frame — shift focus 10% to the right of center */
.plan-preview-img[data-room="reds"] {
  object-position: 60% 50%;
}
.plan-preview[data-active="main"] .plan-preview-img[data-room="main"],
.plan-preview[data-active="reference"] .plan-preview-img[data-room="reference"],
.plan-preview[data-active="red"] .plan-preview-img[data-room="red"] { opacity: 1; }
.plan-preview-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(26,24,20,0) 0%, rgba(26,24,20,0.72) 100%);
  color: var(--paper);
  display: flex; justify-content: space-between; align-items: end;
  gap: 14px;
}
.plan-preview-meta .meta-state { flex-direction: column; gap: 4px; min-width: 0; padding-right: 84px; }
.plan-preview-meta .meta-name { font: italic 400 22px/1.05 var(--display); }
.plan-preview-meta .meta-brand { font: 500 11px/1.25 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.94; }
.plan-preview-meta .meta-city { display: none; }
/* legacy single-line detail (still used by city plan) */
.plan-preview-meta .meta-detail { font: 500 10px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.84; }
.plan-section .hint {
  margin-top: 22px;
  font: italic 400 14px/1.4 var(--display); color: var(--ink-soft);
  text-align: center;
}
@media (max-width: 800px) {
  /* Tighter section spacing on mobile (was 96px each side) */
  .plan-section,
  .door-section,
  .rooms-section,
  .houses-section,
  .visit-section { padding: 48px var(--gutter); }

  /* Plan headers stack to one column on mobile */
  .plan-section .head { grid-template-columns: 1fr; }
  .plan-section .head .l, .plan-section .head .r { text-align: center; }
  .plan-pair { grid-template-columns: 1fr; }
  .plan-preview { aspect-ratio: 4/3; }

  /* Plate XIV (cartoon-section) — bigger on mobile via edge-to-edge.
     Section side-padding drops to zero so the SVG fills the viewport
     width; the preview pane and hint keep the gutter back. The SVG
     itself uses its native 16:9 aspect-ratio rule from .plate-svg —
     forcing a 1:1 wrapper here causes the inner SVG layout box to
     collapse in some engines, which is why the plan went invisible. */
  #cartoon-section.plan-section { padding: 24px 0; max-width: 100vw; }
  #cartoon-section .plan-pair { gap: 18px; padding: 0; }
  #cartoon-section .plan-preview {
    aspect-ratio: 4/3;
    margin: 0 var(--gutter);
  }
  #cartoon-section .hint { padding: 0 var(--gutter); margin-top: 14px; }

  /* Active-zone highlight while the auto-cycle runs.
     CSS-only — fires whenever data-active matches the zone class. */
  #cartoon-pair[data-active="dieter"] .zone-dieter,
  #cartoon-pair[data-active="peter"]  .zone-peter,
  #cartoon-pair[data-active="klein"]  .art-klein,
  #cartoon-pair[data-active="reds"]   .art-reds {
    animation: zone-active-pulse 1.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}
@keyframes zone-active-pulse {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}

/* ─── Rooms gallery ─── */
.rooms-section {
  padding: 56px var(--gutter);
  max-width: 1480px; margin: 0 auto;
}
.rooms-section .head { text-align: center; margin-bottom: 36px; }
.rooms-section .head .l { font: 500 11px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sienna); margin-bottom: 16px; }
.rooms-section .head h2 { font: italic 300 clamp(40px, 5.5vw, 76px)/1 var(--display); }
.rooms-section .head h2 b { font-weight: 500; font-style: italic; color: var(--sienna); }
.rooms-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.room-tile { display: flex; flex-direction: column; gap: 14px; }
.room-tile figure {
  aspect-ratio: 4/5; overflow: hidden;
  background: var(--paper-soft);
}
.room-tile figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.room-tile:hover figure img { transform: scale(1.025); }
.room-tile .placard { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 14px; }
.room-tile .placard h3 { font: italic 400 clamp(22px, 2vw, 28px)/1 var(--display); }
.room-tile .placard h3 b { font-weight: 500; font-style: italic; color: var(--sienna); }
.room-tile .placard .meta { font: 500 9px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sienna); }
.room-tile .placard p { grid-column: 1/-1; font: italic 400 14px/1.5 var(--display); color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 800px) { .rooms-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ─── Door section (lower on page) ─── */
.door-section {
  padding: 56px var(--gutter);
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--ink);
}
.door-section .inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 80px; align-items: center;
}
.door-section .l .label { font: 500 10px/1 var(--sans); letter-spacing: 0.5em; text-transform: uppercase; color: var(--yellow); margin-bottom: 26px; }
.door-section .l h2 {
  font: italic 300 clamp(40px, 6.5vw, 96px)/0.96 var(--display);
  color: var(--paper);
  max-width: 14ch;
  margin-bottom: 26px;
}
.door-section .l h2 .y { color: var(--yellow); font-weight: 500; }
.door-section .l p {
  font: italic 300 18px/1.65 var(--display);
  color: rgba(239,233,216,0.78);
  max-width: 44ch;
  margin-bottom: 20px;
}
.door-section .l p em { color: var(--paper); font-style: italic; }
.door-section .door-img-wrap {
  aspect-ratio: 1024/1400;
  max-width: 320px; margin-left: auto;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.42));
  transform: rotate(-1.2deg);
}
.door-section .door-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 800px) { .door-section .inner { grid-template-columns: 1fr; gap: 40px; } .door-section .door-img-wrap { margin: 0 auto; } }

/* ─── Houses ─── */
.houses-section {
  padding: 56px var(--gutter);
  max-width: 1480px; margin: 0 auto;
}
.houses-section .head { text-align: center; margin-bottom: 64px; padding-bottom: 22px; border-bottom: 1px solid var(--ink); }
.houses-section .head .l { font: 500 11px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sienna); margin-bottom: 16px; }
.houses-section .head h2 { font: italic 300 clamp(40px, 5.5vw, 76px)/1 var(--display); max-width: 22ch; margin: 0 auto; }
.houses-section .head h2 b { font-weight: 500; font-style: italic; color: var(--sienna); }
.houses-pair {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  max-width: 1100px; margin: 0 auto;
}
.houses-pair .div { background: var(--rule); }
.house {
  padding: 48px 56px;
  display: flex; flex-direction: column; gap: 18px;
}
.house .country { font: 500 10px/1 var(--sans); letter-spacing: 0.42em; text-transform: uppercase; color: var(--sienna); }
.house h3 { font: italic 300 clamp(40px, 5.5vw, 72px)/1 var(--display); }
.house h3 b { font-weight: 500; font-style: italic; color: var(--sienna); }
.house p { font: italic 300 17px/1.6 var(--display); color: var(--ink-mid); max-width: 32ch; }
.house p em { color: var(--ink); font-style: italic; }
.house.h2 .country { color: var(--klein); }
.house.h2 h3 b { color: var(--klein); }
@media (max-width: 800px) { .houses-pair { grid-template-columns: 1fr; } .houses-pair .div { display: none; } .house { padding: 36px 0; border-bottom: 1px solid var(--rule); } .house:last-child { border-bottom: 0; } }

/* ─── Boutique preview · published flagship products on the homepage ─── */
.products-section {
  padding: 56px var(--gutter);
  max-width: 1480px; margin: 0 auto;
}
.products-section .head { text-align: center; margin-bottom: 36px; }
.products-section .head .l {
  font: 500 11px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 16px;
}
.products-section .head h2 {
  font: italic 300 clamp(40px, 5.5vw, 76px)/1 var(--display);
}
.products-section .head h2 b { font-weight: 500; font-style: italic; color: var(--sienna); }
/* Brand rail: one horizontally-scrollable row of cards per brand,
   with a labelled header showing the brand name + piece count. */
.brand-rail { margin-bottom: 44px; }
.brand-rail:last-of-type { margin-bottom: 0; }
.brand-rail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.brand-rail-label {
  font: italic 400 clamp(22px, 2.4vw, 30px)/1 var(--display);
  color: var(--ink);
}
.brand-rail-count {
  font: 500 10px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-soft);
}

.products-rail {
  display: flex; gap: 24px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.products-rail::-webkit-scrollbar { height: 6px; }
.products-rail::-webkit-scrollbar-track { background: transparent; }
.products-rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.products-rail::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
.products-rail .product-card {
  flex: 0 0 auto;
  width: clamp(220px, 22%, 260px);
  scroll-snap-align: start;
}

/* Legacy products-grid (kept for any future grid variants — currently unused) */
.products-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px;
}
.product-card {
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit;
}
.product-card figure {
  aspect-ratio: 1 / 1;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  margin: 0;
  padding: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-card figure img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform 0.6s ease;
}
.product-card:hover figure img { transform: scale(1.04); }
.product-card .placard {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 12px 14px;
}
.product-card .brand {
  grid-column: 1 / -1;
  font: 500 9px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sienna);
}
.product-card h3 {
  grid-column: 1;
  font: italic 400 clamp(20px, 1.8vw, 26px)/1.1 var(--display);
  color: var(--ink); margin: 0;
}
.product-card .price {
  grid-column: 2;
  font: 500 12px/1.2 var(--mono); letter-spacing: 0.04em;
  color: var(--ink); white-space: nowrap;
  text-align: right;
}
.product-card .price del { color: var(--ink-soft); margin-right: 6px; }

.products-section .more,
.art-preview-section .more {
  text-align: center; margin-top: 36px;
}
.products-section .more a,
.art-preview-section .more a {
  font: 500 11px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px;
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s;
}
.products-section .more a:hover,
.art-preview-section .more a:hover {
  color: var(--sienna); border-color: var(--sienna);
}

@media (max-width: 800px) {
  .products-section { padding: 48px var(--gutter); }
  .products-section .head { margin-bottom: 32px; }
  .brand-rail { margin-bottom: 32px; }
  .products-rail { gap: 16px; }
  .products-rail .product-card { width: clamp(180px, 60vw, 220px); }
  .product-card h3 { font-size: 17px; }
  .product-card figure { padding: 12px; }
  .brand-rail-head { padding-bottom: 8px; margin-bottom: 16px; }
}

/* ─── Art preview · five-series sampler on the homepage ─── */
.art-preview-section {
  padding: 56px var(--gutter);
  max-width: 1480px; margin: 0 auto;
}
.art-preview-section .head { text-align: center; margin-bottom: 36px; }
.art-preview-section .head .l {
  font: 500 11px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 16px;
}
.art-preview-section .head h2 {
  font: italic 300 clamp(40px, 5.5vw, 76px)/1 var(--display);
}
.art-preview-section .head h2 b { font-weight: 500; font-style: italic; color: var(--sienna); }
.art-preview-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 18px;
}
.art-card {
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
}
.art-card figure {
  aspect-ratio: 1/1; overflow: hidden;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  margin: 0;
}
.art-card figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.art-card:hover figure img { transform: scale(1.03); }
.art-card .placard { padding: 0 2px; }
.art-card .series {
  display: block;
  font: 500 9px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 6px;
}
.art-card h4 {
  font: italic 400 clamp(17px, 1.5vw, 22px)/1.15 var(--display);
  color: var(--ink); margin: 0 0 4px;
}
.art-card .size {
  display: block;
  font: 400 11px/1 var(--mono); color: var(--ink-soft); letter-spacing: 0.04em;
}

@media (max-width: 1100px) { .art-preview-grid { grid-template-columns: repeat(3, 1fr); }
  .art-preview-grid .art-card:nth-child(n+4) { display: none; } }
@media (max-width: 800px) {
  .art-preview-section { padding: 48px var(--gutter); }
  .art-preview-section .head { margin-bottom: 32px; }
  .art-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .art-preview-grid .art-card:nth-child(n+5) { display: none; }
}
@media (max-width: 460px) {
  .art-preview-grid { grid-template-columns: 1fr; gap: 24px; }
  .art-preview-grid .art-card:nth-child(n+4) { display: none; }
}

/* ─── Visit ─── */
.visit-section {
  padding: 56px var(--gutter);
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}
.visit-section .inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 56px; align-items: center;
}
.visit-section h2 { font: italic 300 clamp(40px, 6vw, 88px)/0.95 var(--display); margin-bottom: 22px; }
.visit-section h2 b { font-weight: 500; font-style: italic; color: var(--sienna); }
.visit-section p { font: italic 300 18px/1.55 var(--display); color: var(--ink-mid); max-width: 38ch; margin-bottom: 28px; }
.cta {
  display: inline-block;
  padding: 14px 26px; background: var(--ink); color: var(--paper);
  font: 500 11px/1 var(--sans); letter-spacing: 0.42em; text-transform: uppercase;
  transition: all 0.2s;
}
.cta:hover { background: var(--sienna); }
.visit-section .ledger {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 28px 32px;
  font: 500 12px/1.85 var(--mono);
}
.visit-section .ledger dl { display: grid; grid-template-columns: 88px 1fr; gap: 8px 22px; margin: 0; }
.visit-section .ledger dt { font: 600 9px/1.5 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sienna); padding-top: 2px; }
.visit-section .ledger dd { color: var(--ink); }
@media (max-width: 800px) { .visit-section .inner { grid-template-columns: 1fr; } }

/* ─── Footer ────────────────────────────────────────────────────────
   Deep-ink bar with gold-leaf accents — same palette as the PDP
   pairings band. 4-col grid (brand | navigate | houses | visit) on
   desktop, collapses to 2 then 1 on mobile. Closes with a copyright /
   tagline / EN-FR strip. */
.site-foot {
  background: #14110d;          /* deep ink, slightly warmer than --ink */
  color: #f0e6d2;               /* paper-warm on dark */
  padding: 72px var(--gutter) 32px;
  margin-top: clamp(56px, 7vw, 96px);
  /* Force edge-to-edge: any parent that limits to .wc-content
     max-width:1480px or similar must be broken out of so the dark
     band stretches the full viewport on mobile and desktop alike. */
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
.site-foot .foot-inner { max-width: 1480px; margin: 0 auto; width: 100%; }

.site-foot .foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr;
  gap: 56px 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(239, 233, 216, 0.16);
}
.site-foot .foot-h {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #c8a45e;               /* muted gold leaf */
  margin: 0 0 18px;
}
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot ul li {
  font: 400 14px/1.5 var(--serif);
  color: #d6cdb8;
  margin: 0 0 9px;
}
.site-foot a {
  color: #d6cdb8; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-foot a:hover { color: #f0e6d2; border-color: #c8a45e; }

/* Brand column */
.foot-col--brand .foot-brand {
  display: inline-block;
  font: 500 38px/1 var(--display);
  color: #f0e6d2;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
  text-decoration: none;
  border-bottom: none;
}
.foot-col--brand .foot-brand b { font-weight: 600; }
.foot-col--brand .foot-tag {
  font: italic 300 17px/1.5 var(--display);
  color: rgba(214, 205, 184, 0.86);
  max-width: 36ch;
  margin: 0 0 22px;
}
.foot-col--brand .foot-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(239, 233, 216, 0.08);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #f0e6d2;
}
.foot-col--brand .foot-pill .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--yellow);
}

/* Visit column */
.site-foot address {
  font: 400 14px/1.55 var(--serif);
  color: #d6cdb8;
  font-style: normal;
  margin: 0 0 12px;
}
.site-foot .foot-line {
  font: 400 13px/1.5 var(--serif);
  color: rgba(214, 205, 184, 0.78);
  margin: 0 0 6px;
}
.site-foot .foot-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 14px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.04em;
}
.site-foot .foot-hours dt { color: rgba(214, 205, 184, 0.62); text-transform: uppercase; letter-spacing: 0.18em; }
.site-foot .foot-hours dd { color: #d6cdb8; margin: 0; }

/* Closing strip */
.site-foot .foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding-top: 24px;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(214, 205, 184, 0.62);
}
.site-foot .foot-bottom em {
  font: italic 300 14px/1.4 var(--display);
  color: #c8a45e;
  letter-spacing: 0.01em;
  text-transform: none;
}
.site-foot .lang-switch.foot-lang {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(214, 205, 184, 0.62);
}
.site-foot .lang-switch a { color: rgba(214, 205, 184, 0.62); border-bottom: 0; }
.site-foot .lang-switch a.active { color: #f0e6d2; border-bottom: 1px solid #c8a45e; }
.site-foot .lang-switch a:hover { color: #f0e6d2; }
.site-foot .lang-switch .div { color: rgba(214, 205, 184, 0.4); }

@media (max-width: 800px) {
  .site-foot { padding: 56px var(--gutter) 28px; }
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .site-foot .foot-col--brand { grid-column: 1 / -1; }
  .foot-col--brand .foot-brand { font-size: 32px; }
  .site-foot .foot-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 480px) {
  .site-foot .foot-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ─── Reveal on scroll ─── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ─── The Boutique · animated industrial-concrete plan (IX·a) ─── */
.city-section .plan-pair {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 36px; align-items: stretch;
}
.city-section .plan-stage {
  position: relative; width: 100%;
  aspect-ratio: 1400 / 900;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  overflow: hidden;
}
/* Hover preview state */
.city-section .city-preview-meta .meta-state { display: none; }
.city-section .plan-pair[data-active="default"] .meta-state-default,
.city-section .plan-pair[data-active="dieter"] .meta-state-dieter,
.city-section .plan-pair[data-active="peter"] .meta-state-peter,
.city-section .plan-pair[data-active="door"] .meta-state-door { display: block; }
.city-section .plan-pair[data-active="default"] .plan-preview-img[data-room="default"],
.city-section .plan-pair[data-active="dieter"]  .plan-preview-img[data-room="dieter"],
.city-section .plan-pair[data-active="peter"]   .plan-preview-img[data-room="peter"],
.city-section .plan-pair[data-active="door"]    .plan-preview-img[data-room="door"] { opacity: 1; }
@media (max-width: 800px) { .city-section .plan-pair { grid-template-columns: 1fr; } }
.city-section .plan-stage svg { width: 100%; height: 100%; display: block; }
/* The Sketch — cartoon line drawing of the same plan */
.cartoon-section .plan-stage {
  position: relative; width: 100%;
  aspect-ratio: 1400 / 900;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  margin-top: 40px;
  overflow: hidden;
}
.cartoon-section .plan-stage svg { width: 100%; height: 100%; display: block; }
.city-section .plan-stage svg .zone { cursor: pointer; transition: filter 0.3s ease; }
.city-section .plan-stage svg .zone-dieter:hover { filter: brightness(1.22) drop-shadow(0 0 18px rgba(90, 138, 212, 0.62)); }
.city-section .plan-stage svg .zone-peter:hover  { filter: brightness(1.22) drop-shadow(0 0 18px rgba(224, 64, 80, 0.62)); }
.city-section .plan-stage svg .door-slab { pointer-events: none; cursor: default; }
.city-section .plan-stage svg .zone:focus { outline: none; }

/* Animations */
.animated-stage svg { animation: cam-drift 18s ease-in-out infinite; transform-origin: center; }
.animated-stage svg .zone-peter  { animation: zone-pulse-p 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.animated-stage svg .zone-dieter { animation: zone-pulse-d 3.4s ease-in-out infinite -1.7s; transform-box: fill-box; transform-origin: center; }
.animated-stage svg .zone-ring-peter  { animation: ring-pulse-p 3.4s ease-in-out infinite; }
.animated-stage svg .zone-ring-dieter { animation: ring-pulse-d 3.4s ease-in-out infinite -1.7s; }
.animated-stage svg .tube-bulb { animation: tube-flicker 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.animated-stage svg .tube-bulb:nth-of-type(2) { animation-delay: -0.6s; }
.animated-stage svg .tube-bulb:nth-of-type(3) { animation-delay: -1.2s; }
.animated-stage svg .tube-bulb:nth-of-type(4) { animation-delay: -1.8s; }
.animated-stage svg .display-window { animation: display-flicker 5s ease-in-out infinite; }
.animated-stage svg .door-slab { animation: door-shimmer 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.animated-stage svg .floor-spot { animation: floor-spot-drift 22s linear infinite; }

@keyframes cam-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-4px, 2px) scale(1.005); }
  50%      { transform: translate(-2px, 4px) scale(1.01); }
  75%      { transform: translate(3px, 1px) scale(1.005); }
}
@keyframes zone-pulse-p {
  0%, 100% { fill-opacity: 0.22; filter: none; }
  50%      { fill-opacity: 0.40; filter: drop-shadow(0 0 14px rgba(224, 64, 80, 0.9)); }
}
@keyframes zone-pulse-d {
  0%, 100% { fill-opacity: 0.22; filter: none; }
  50%      { fill-opacity: 0.40; filter: drop-shadow(0 0 14px rgba(110, 158, 224, 0.9)); }
}
@keyframes ring-pulse-p {
  0%, 100% { stroke-opacity: 0.32; stroke-width: 1.6; }
  50%      { stroke-opacity: 0.95; stroke-width: 3.4; filter: drop-shadow(0 0 8px rgba(224, 64, 80, 0.55)); }
}
@keyframes ring-pulse-d {
  0%, 100% { stroke-opacity: 0.32; stroke-width: 1.6; }
  50%      { stroke-opacity: 0.95; stroke-width: 3.4; filter: drop-shadow(0 0 8px rgba(110, 158, 224, 0.55)); }
}
@keyframes tube-flicker {
  0%, 100% { opacity: 0.88; filter: brightness(1); }
  45%, 55% { opacity: 1;    filter: brightness(1.4) drop-shadow(0 0 5px rgba(255, 200, 110, 0.7)); }
}
@keyframes display-flicker {
  0%, 88%, 100% { opacity: 0.7; }
  90%, 92%, 94% { opacity: 1; }
  91%, 93%      { opacity: 0.5; }
}
@keyframes door-shimmer {
  0%, 100% { filter: none; }
  50%      { filter: brightness(1.22) drop-shadow(0 0 10px rgba(239, 193, 26, 0.7)); }
}
@keyframes floor-spot-drift {
  0%   { transform: translateX(-300px) translateY(-60px); opacity: 0; }
  20%  { opacity: 0.32; }
  80%  { opacity: 0.32; }
  100% { transform: translateX(300px) translateY(60px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-stage svg, .animated-stage svg * { animation: none !important; }
}

/* ─── Plate XIV — Steinberg/Steig cartoon ─── */
.cartoon-section .plan-stage {
  aspect-ratio: 16 / 9;
  /* The SVG's #fbf6ec base is darkened by a paperGrain noise filter
     (opacity 0.55, slight ink tint) — visually lands near #f3ede0.
     Match the parent box to that post-filter shade so the seam
     between letterbox and SVG content is invisible. */
  background: #f3ede0;
  border: 1px solid var(--ink);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-top: 40px;
}
.cartoon-section .plan-stage svg.plate-svg {
  width: min(100%, calc(100% * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #F9F4EA;
  box-shadow: 0 30px 80px -20px rgba(40,28,8,.35), 0 6px 20px -10px rgba(40,28,8,.25);
  display: block;
}
.cartoon-section .plate-svg text { font-family: 'Caveat', cursive; }
.cartoon-section .plate-svg .ink   { fill: #1a1208; }
.cartoon-section .plate-svg .pencil{ fill: #8a8275; }
.cartoon-section .plate-svg .blue  { fill: #1f2e8a; }
.cartoon-section .plate-svg .red   { fill: #a4252b; }
.cartoon-section .plate-svg .yellow{ fill: #f1c328; }
.cartoon-section .plate-svg .cap        { font-style: italic; font-weight: 500; fill: #1a1208; }
.cartoon-section .plate-svg .cap-pencil { font-style: italic; font-weight: 500; fill: #8a8275; }
.cartoon-section .plate-svg .title-strip {
  font-family: 'Caveat', cursive; font-style: italic; font-weight: 500;
  fill: #b9b09c; letter-spacing: .25em;
}
.cartoon-section .plate-svg .signature  { font-family: 'Homemade Apple', cursive; fill: #1a1208; }
.cartoon-section .plate-svg .vert-label {
  font-family: 'Caveat', cursive; font-weight: 600; fill: #1a1208; letter-spacing: .12em;
}


/* ─── Plate XIV interactive — same plan-pair pattern as city-section ─── */
.cartoon-section .plan-pair {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 36px; align-items: stretch;
  margin-top: 40px;
}
.cartoon-section .plan-pair .plan-stage { margin-top: 0; }
@media (max-width: 800px) { .cartoon-section .plan-pair { grid-template-columns: 1fr; } }

.cartoon-section .cartoon-preview-meta .meta-state { display: none; }
.cartoon-section .plan-pair[data-active="default"] .meta-state-default,
.cartoon-section .plan-pair[data-active="dieter"] .meta-state-dieter,
.cartoon-section .plan-pair[data-active="peter"] .meta-state-peter,
.cartoon-section .plan-pair[data-active="acapella"] .meta-state-acapella,
.cartoon-section .plan-pair[data-active="door"] .meta-state-door,
.cartoon-section .plan-pair[data-active="klein"] .meta-state-klein,
.cartoon-section .plan-pair[data-active="reds"] .meta-state-reds { display: flex; }
.cartoon-section .plan-pair[data-active="default"]  .plan-preview-img[data-room="default"],
.cartoon-section .plan-pair[data-active="dieter"]   .plan-preview-img[data-room="dieter"],
.cartoon-section .plan-pair[data-active="peter"]    .plan-preview-img[data-room="peter"],
.cartoon-section .plan-pair[data-active="acapella"] .plan-preview-img[data-room="acapella"],
.cartoon-section .plan-pair[data-active="door"]     .plan-preview-img[data-room="door"],
.cartoon-section .plan-pair[data-active="klein"]    .plan-preview-img[data-room="klein"],
.cartoon-section .plan-pair[data-active="reds"]     .plan-preview-img[data-room="reds"] { opacity: 1; }

/* Invisible zone polygons overlaid on the hand-drawn plate for hover/click */
.cartoon-section .plate-svg .zone {
  cursor: pointer; pointer-events: all;
  fill: transparent; stroke: none;
  transition: filter 0.3s ease;
  outline: none;
}
/* Yellow door is decorative — keep it visually present (the painted plate
   underneath shows yellow through the transparent overlay polygon) but
   completely inert: no cursor change, no hover state, no preview trigger. */
.cartoon-section .plate-svg .door-slab {
  pointer-events: none;
  cursor: default;
  fill: transparent;
  stroke: none;
}
.cartoon-section .plate-svg .zone-dieter:hover,
.cartoon-section .plate-svg .zone-dieter:focus { filter: drop-shadow(0 0 14px rgba(31, 46, 138, 0.55)); }
.cartoon-section .plate-svg .zone-peter:hover,
.cartoon-section .plate-svg .zone-peter:focus  { filter: drop-shadow(0 0 14px rgba(164, 37, 43, 0.55)); }


/* Cartoon section — art hover overlays (Klein blue + twin reds) */
.cartoon-section .plate-svg .art {
  cursor: pointer; pointer-events: all;
  fill: transparent; stroke: none;
  transition: filter 0.3s ease;
  outline: none;
}
.cartoon-section .plate-svg .art-klein:hover,
.cartoon-section .plate-svg .art-klein:focus { filter: drop-shadow(0 0 14px rgba(31, 46, 138, 0.6)); }
.cartoon-section .plate-svg .art-reds:hover,
.cartoon-section .plate-svg .art-reds:focus  { filter: drop-shadow(0 0 14px rgba(164, 37, 43, 0.6)); }


/* Preview aside — clickable when active state has a destination */
.city-section .plan-preview,
.cartoon-section .plan-preview {
  cursor: pointer; outline: none;
  transition: filter 0.3s ease, transform 0.4s ease;
}
.city-section .plan-preview:hover .plan-preview-img,
.cartoon-section .plan-preview:hover .plan-preview-img {
  /* tiny zoom on the visible image when the preview itself is hovered */
  transform: scale(1.012);
}
.city-section .plan-preview:focus-visible,
.cartoon-section .plan-preview:focus-visible {
  outline: 2px solid var(--sienna); outline-offset: 4px;
}
.plan-preview-img { transition: opacity 0.6s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); }

/* Default state — preview isn't a real link target, soften the cursor */
.city-section .plan-pair[data-active="default"] .plan-preview,
.cartoon-section .plan-pair[data-active="default"] .plan-preview { cursor: default; }


/* Preview aside — show an "Enter →" label when an active state has a destination */
.city-section .plan-preview,
.cartoon-section .plan-preview { position: relative; }
.city-section .plan-preview::after,
.cartoon-section .plan-preview::after {
  content: "Enter →";
  position: absolute; right: 12px; bottom: 12px;
  font: 500 8px/1 var(--mono); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 6px 9px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.city-section .plan-pair[data-active="dieter"]  .plan-preview::after,
.city-section .plan-pair[data-active="peter"]   .plan-preview::after,
.cartoon-section .plan-pair[data-active="dieter"]  .plan-preview::after,
.cartoon-section .plan-pair[data-active="peter"]   .plan-preview::after,
.cartoon-section .plan-pair[data-active="klein"]   .plan-preview::after,
.cartoon-section .plan-pair[data-active="reds"]    .plan-preview::after,
.cartoon-section .plan-pair[data-active="door"]    .plan-preview::after {
  opacity: 0;
  transform: translateY(0);
}
.city-section .plan-pair[data-active="dieter"]  .plan-preview:hover::after,
.city-section .plan-pair[data-active="peter"]   .plan-preview:hover::after,
.cartoon-section .plan-pair[data-active="dieter"]  .plan-preview:hover::after,
.cartoon-section .plan-pair[data-active="peter"]   .plan-preview:hover::after,
.cartoon-section .plan-pair[data-active="klein"]   .plan-preview:hover::after,
.cartoon-section .plan-pair[data-active="reds"]    .plan-preview:hover::after,
.cartoon-section .plan-pair[data-active="door"]    .plan-preview:hover::after {
  opacity: 1; transform: translateY(0);
}

/* Touch / coarse-pointer two-tap UX:
   After the first tap on a zone, the JS adds .is-peeked + sets
   data-active. There is no hover on touch, so we surface the
   "Enter →" pill any time .is-peeked has a routable active state.
   A gentle pulse signals "tap again to enter". */
@media (hover: none), (pointer: coarse) {
  .cartoon-section .plan-pair.is-peeked[data-active="dieter"] .plan-preview::after,
  .cartoon-section .plan-pair.is-peeked[data-active="peter"]  .plan-preview::after,
  .cartoon-section .plan-pair.is-peeked[data-active="klein"]  .plan-preview::after,
  .cartoon-section .plan-pair.is-peeked[data-active="reds"]   .plan-preview::after,
  .cartoon-section .plan-pair.is-peeked[data-active="door"]   .plan-preview::after {
    content: "Tap to enter →";
    opacity: 1;
    transform: translateY(0);
    animation: enter-pulse 1.8s ease-in-out infinite;
  }
}
@keyframes enter-pulse {
  0%, 100% { transform: translateY(0) scale(1);    opacity: 0.94; }
  50%      { transform: translateY(0) scale(1.05); opacity: 1;    }
}

/* Peek-flash: brief sienna ring around the preview pane each time
   a zone is tapped on mobile. Re-triggers per tap. */
@keyframes peek-flash {
  0%   { box-shadow: 0 0 0 0   var(--sienna); }
  60%  { box-shadow: 0 0 0 6px rgba(140, 51, 0, 0.55); }
  100% { box-shadow: 0 0 0 0   transparent; }
}
.plan-preview.peek-flash { animation: peek-flash 0.7s ease-out; }

/* Mobile peek overlay — when a zone is tapped (.is-peeked is set),
   the preview pane lifts out of normal flow and renders as a
   centered fixed overlay so the user actually sees the room photo,
   not a flash on something below the fold. Backdrop dims the page;
   tapping it (or the × close) restores normal flow. Tapping the
   preview itself still navigates via the existing click handler. */
.plan-preview-close { display: none; }
@media (hover: none), (pointer: coarse) {
  .cartoon-section .plan-pair.is-peeked .plan-preview {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 460px);
    aspect-ratio: 4/3;
    margin: 0 !important;
    z-index: 1100;
    border: 2px solid var(--ink);
    box-shadow: 0 30px 80px rgba(20, 16, 8, 0.5);
  }
  .cartoon-section .plan-pair.is-peeked::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(20, 16, 8, 0.55);
    z-index: 1099;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
  }
  .cartoon-section .plan-pair.is-peeked .plan-preview-close {
    display: inline-flex;
    position: absolute;
    top: 10px; right: 10px;
    width: 38px; height: 38px;
    background: rgba(251, 246, 236, 0.95);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 50%;
    align-items: center; justify-content: center;
    font: 400 22px/1 sans-serif;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .cartoon-section .plan-pair.is-peeked .plan-preview-close:hover,
  .cartoon-section .plan-pair.is-peeked .plan-preview-close:focus-visible {
    background: var(--ink);
    color: var(--paper);
    outline: none;
  }
}
body.plan-peeking { overflow: hidden; }

/* Default state — keep the preview cursor neutral; no Enter pill */
.city-section .plan-pair[data-active="default"] .plan-preview::after,
.cartoon-section .plan-pair[data-active="default"] .plan-preview::after { display: none; }


/* ─── Listening Room — single-room.php hero + photo + hotspots ───
   Scoped to main.single-room (NOT .single-room) because WP's body_class()
   adds `single-room` to <body>, which would otherwise constrain body to
   1480px and break the footer's 100vw breakout trick. */
main.single-room {
  padding: 24px var(--gutter) 7vh; max-width: 1480px; margin: 0 auto;
}
.room-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 36px;
  align-items: end; margin-bottom: 36px;
  padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
@media (max-width: 800px) { .room-hero { grid-template-columns: 1fr; align-items: start; } }
.room-hero .room-pre {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 22px;
}
.room-hero .room-pre .swatch { width: 22px; height: 1.5px; }
.room-hero .room-title {
  font: italic 300 clamp(48px, 7vw, 110px)/0.94 var(--display);
  color: var(--ink); letter-spacing: -0.022em; margin: 0;
}
.room-hero .room-brand {
  margin-top: 18px;
  font: 500 11px/1.85 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}
.room-ledger { font: 500 10px/1.6 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.room-ledger dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.room-ledger dt { color: var(--ink-soft); }
.room-ledger dd { margin: 0; color: var(--ink); font-weight: 600; }

.room-content {
  font: 300 17px/1.75 var(--serif); color: var(--ink-mid);
  max-width: 1120px; margin: 56px auto 0;
}
.room-content .lede { font: 300 22px/1.5 var(--display); font-style: italic; color: var(--ink); margin: 0 0 28px; }
.room-content h3 {
  font: italic 300 28px/1 var(--display); color: var(--ink);
  margin: 36px 0 14px; padding-top: 24px; border-top: 1px solid var(--rule-soft);
}
.room-content p { margin: 0 0 16px; }
.room-content ul { padding-left: 1.2em; margin: 0 0 24px; }
.room-content ul li { padding: 4px 0; }
.room-content a { color: var(--sienna); text-decoration: none; border-bottom: 1px solid var(--rule); }
.room-content a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ─── Photo with hover-revealed hotspots ─── */
.room-photo-host {
  position: relative; margin: 0 0 56px;
  border: 1px solid var(--ink); background: var(--paper-soft);
  overflow: visible;
}
.room-photo-host img { width: 100%; height: auto; display: block; }
.room-photo-host .hotspot {
  position: absolute; transform: translate(-50%, -50%);
  outline: none; cursor: pointer;
}
.room-photo-host .hotspot .dot {
  display: block; width: 14px; height: 14px;
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255, 248, 220, 0.45), 0 2px 8px rgba(26, 24, 20, 0.25);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.room-photo-host .hotspot:hover .dot,
.room-photo-host .hotspot:focus-visible .dot {
  transform: scale(1.3);
  background: var(--sienna); border-color: var(--paper);
}
.room-photo-host .hotspot::after {
  /* pulse ring */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; transform: translate(-50%, -50%);
  border: 1.5px solid var(--ink); border-radius: 50%;
  animation: dotpulse 2.4s ease-out infinite;
  pointer-events: none; opacity: 0.4;
}
@keyframes dotpulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0;    }
}
.room-photo-host .hotspot .card {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 18px);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 20px; width: 240px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  box-shadow: 0 12px 32px -8px rgba(26, 24, 20, 0.28);
}
.room-photo-host .hotspot:hover .card,
.room-photo-host .hotspot:focus-within .card {
  opacity: 1; transform: translate(-50%, 14px); pointer-events: all;
}
.room-photo-host .hotspot .card h4 {
  font: italic 400 18px/1.2 var(--display);
  color: var(--ink); margin: 0 0 6px;
}
.room-photo-host .hotspot .card p {
  font: 500 9px/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}
.room-photo-host .hotspot .card a {
  display: inline-block;
  font: 500 10px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none;
  padding-bottom: 2px;
}
.room-photo-host .hotspot .card a:hover { color: var(--sienna); border-color: var(--sienna); }

/* If hotspot is near right edge, flip the card to the left */
.room-photo-host .hotspot.flip-left .card { left: auto; right: 50%; transform: translate(50%, 18px); }
.room-photo-host .hotspot.flip-left:hover .card { transform: translate(50%, 14px); }

/* ─── Product hotspot — same dot, richer card with price ─────────────
   When a hotspot has product_id set, the dot turns sienna so it reads
   as a "shop the piece" marker, and the card carries an eyebrow tag,
   price ledger, snippet, and a "View the piece →" CTA. */
.room-photo-host .hotspot.product .dot {
  background: var(--sienna); border-color: var(--paper);
  box-shadow: 0 0 0 6px rgba(140, 51, 0, 0.18), 0 2px 8px rgba(26, 24, 20, 0.32);
}
.room-photo-host .hotspot.product::after { border-color: var(--sienna); }
.room-photo-host .hotspot.product:hover .dot,
.room-photo-host .hotspot.product:focus-visible .dot {
  background: var(--ink); border-color: var(--paper);
}
.room-photo-host .hotspot.product .card { width: 270px; padding: 18px 22px; }
.room-photo-host .hotspot.product .card .kicker {
  display: block;
  font: 500 9px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sienna); margin: 0 0 10px;
}
.room-photo-host .hotspot.product .card h4 {
  font: italic 400 22px/1.15 var(--display);
  color: var(--ink); margin: 0 0 6px;
}
.room-photo-host .hotspot.product .card .price {
  font: 500 13px/1 var(--mono); letter-spacing: 0.06em;
  color: var(--ink); margin: 0 0 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.room-photo-host .hotspot.product .card .price .woocommerce-Price-currencySymbol { margin-right: 1px; }
.room-photo-host .hotspot.product .card .price del { color: var(--ink-soft); margin-right: 6px; opacity: 0.7; }
.room-photo-host .hotspot.product .card .snip {
  /* override inherited mono uppercase paragraph; serif body copy here */
  font: 300 13px/1.45 var(--serif); color: var(--ink-mid);
  letter-spacing: normal; text-transform: none;
  margin: 0 0 12px;
}

/* ─── Art page — series gallery ─── */
.art-page {
  padding: 7vh var(--gutter); max-width: 1480px; margin: 0 auto;
}
.art-page .art-hero {
  text-align: center; padding-bottom: 56px;
  border-bottom: 1px solid var(--rule); margin-bottom: 64px;
}
.art-page .art-hero .pre {
  display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: 0.5em;
  text-transform: uppercase; color: var(--sienna); margin-bottom: 20px;
}
.art-page .art-hero h1 {
  font: italic 300 clamp(56px, 9vw, 140px)/0.92 var(--display);
  color: var(--ink); margin: 0; letter-spacing: -0.022em;
}
.art-page .art-hero .lede {
  margin: 24px auto 0; max-width: 56ch;
  font: 300 18px/1.6 var(--serif); color: var(--ink-mid);
}
.art-series { margin: 0 0 96px; }
.art-series-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: 36px; padding-bottom: 18px; margin-bottom: 32px;
  border-bottom: 1px solid var(--rule-soft);
}
.art-series-head h2 {
  font: italic 300 clamp(36px, 5vw, 64px)/1 var(--display);
  color: var(--ink); margin: 0;
}
.art-series-head .meta {
  font: 500 10px/1.6 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); text-align: right;
}
.art-series-head + p {
  font: 300 16px/1.7 var(--serif); color: var(--ink-mid);
  max-width: 60ch; margin: 0 0 32px;
}
.art-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px;
}
@media (max-width: 900px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .art-grid { grid-template-columns: 1fr; } }
.art-grid figure {
  margin: 0; border: 1px solid var(--rule); background: var(--paper-soft);
  overflow: hidden; aspect-ratio: 1/1;
}
.art-grid figure img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.art-grid figure:hover img { transform: scale(1.04); }
.art-grid figcaption {
  display: block; padding: 10px 4px;
  font: 500 9px/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}


/* ─── Top padding fix — clear the sticky topbar (~64px tall) ─── */
html { scroll-padding-top: 96px; }
.art-page    { padding-top: 120px !important; }
main.single-room { padding-top: 88px !important; }
@media (max-width: 800px) {
  main.single-room { padding-top: 56px !important; }
}
.wc-content  { padding-top: 120px !important; }

/* ─── Refined art-page card with caption-below + hover ─── */
.art-page .art-grid figure.art-card {
  margin: 0; cursor: zoom-in; outline: none;
  display: flex; flex-direction: column; gap: 10px;
}
.art-page .art-card-img {
  border: 1px solid var(--rule); background: var(--paper-soft);
  aspect-ratio: 1/1; overflow: hidden;
}
.art-page .art-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.art-page .art-card:hover img,
.art-page .art-card:focus-visible img { transform: scale(1.04); }
.art-page .art-card:focus-visible .art-card-img { border-color: var(--ink); }
.art-page .art-card figcaption {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono);
}
.art-page .art-card figcaption .t {
  font: italic 400 16px/1.2 var(--display); color: var(--ink); letter-spacing: 0;
  text-transform: none;
}
.art-page .art-card figcaption .m {
  font: 500 9px/1.3 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}
.art-foot {
  text-align: center; max-width: 60ch; margin: 64px auto 0;
  padding-top: 36px; border-top: 1px solid var(--rule);
  font: 300 14px/1.6 var(--serif); color: var(--ink-soft);
}
.art-foot a { color: var(--sienna); text-decoration: none; border-bottom: 1px solid var(--rule); }

/* ─── Lightbox ─── */
.art-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(26, 24, 20, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 6vw;
  cursor: zoom-out;
}
.art-lightbox[hidden] { display: none; }
.art-lightbox-close,
.art-lightbox-prev,
.art-lightbox-next {
  position: absolute; background: transparent;
  border: 1px solid var(--paper); color: var(--paper);
  width: 44px; height: 44px;
  font-size: 22px; line-height: 1; cursor: pointer; z-index: 2001;
  transition: background 0.2s, color 0.2s;
  font-family: var(--mono);
}
.art-lightbox-close { top: 24px; right: 24px; }
.art-lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.art-lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.art-lightbox-close:hover,
.art-lightbox-prev:hover,
.art-lightbox-next:hover { background: var(--paper); color: var(--ink); }
.art-lightbox-frame {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: 1280px; width: 100%; cursor: default;
}
.art-lightbox-frame img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  background: var(--paper); border: 1px solid var(--rule); display: block;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,0.5);
}
.art-lightbox-caption { text-align: center; max-width: 60ch; }
.art-lightbox-caption h3 {
  font: italic 400 26px/1.2 var(--display); color: var(--paper-warm);
  margin: 0 0 6px; letter-spacing: -0.005em;
}
.art-lightbox-caption .meta {
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(246,241,230,0.7); margin: 0 0 4px;
}
.art-lightbox-caption .medium {
  font: italic 400 13px/1.4 var(--serif);
  color: rgba(246,241,230,0.55); margin: 0;
}
@media (max-width: 700px) {
  .art-lightbox-prev, .art-lightbox-next { width: 36px; height: 36px; }
  .art-lightbox-prev { left: 12px; }
  .art-lightbox-next { right: 12px; }
  .art-lightbox-close { top: 12px; right: 12px; }
}


/* ────────────────────────────────────────────────────────────────────
   DEFAULT PAGE TEMPLATE (page.php)
   ──────────────────────────────────────────────────────────────────── */
.page-default {
  padding: 96px var(--gutter) 64px;
  max-width: 920px; margin: 0 auto;
}
.page-default-head { margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.page-default-kicker {
  display: inline-block;
  font: 500 10px/1 var(--mono); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 18px;
}
.page-default-title {
  font: italic 300 clamp(40px, 6vw, 84px)/1 var(--display); color: var(--ink); margin: 0 0 12px;
}
.page-default-dek {
  font: italic 300 clamp(18px, 1.7vw, 24px)/1.4 var(--display); color: var(--ink-mid); max-width: 50ch;
}
.page-default-hero {
  margin: 0 0 40px; aspect-ratio: 16/9; overflow: hidden;
  background: var(--paper-soft); border: 1px solid var(--rule);
}
.page-default-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-default-prose {
  font: 300 18px/1.7 var(--serif); color: var(--ink-mid); max-width: 64ch;
}
.page-default-prose p { margin: 0 0 18px; }
.page-default-prose h2 { font: italic 300 clamp(28px, 3vw, 40px)/1.1 var(--display); color: var(--ink); margin: 36px 0 16px; }
.page-default-prose h3 { font: italic 400 clamp(22px, 2.4vw, 28px)/1.2 var(--display); color: var(--ink); margin: 28px 0 12px; }
.page-default-prose a  { color: var(--sienna); border-bottom: 1px solid var(--sienna); text-decoration: none; }
.page-default-prose a:hover { color: var(--ink); border-color: var(--ink); }
.page-default-prose blockquote {
  font: italic 300 clamp(22px, 2.4vw, 30px)/1.4 var(--display);
  color: var(--ink); border-left: 3px solid var(--sienna);
  padding: 8px 0 8px 28px; margin: 28px 0;
}
.page-default-prose ul, .page-default-prose ol { padding-left: 1.4em; margin: 0 0 18px; }
.page-default-pages {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule);
  font: 500 10px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft);
}
@media (max-width: 800px) { .page-default { padding: 64px var(--gutter) 48px; } }


/* ────────────────────────────────────────────────────────────────────
   ARTICLE TEMPLATE (single.php)
   ──────────────────────────────────────────────────────────────────── */
.article {
  padding: 80px var(--gutter) 64px;
  max-width: 760px; margin: 0 auto;
}
.article-head { margin-bottom: 40px; }
.article-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 22px;
}
.article-kicker a { color: var(--sienna); text-decoration: none; border-bottom: 1px solid transparent; }
.article-kicker a:hover { border-color: var(--sienna); }
.article-kicker .dot { color: var(--rule); }
.article-kicker time { color: var(--ink-soft); letter-spacing: 0.22em; }
.article-title {
  font: italic 300 clamp(40px, 6vw, 84px)/1.05 var(--display); color: var(--ink);
  margin: 0 0 18px; letter-spacing: -0.012em;
}
.article-dek {
  font: italic 300 clamp(18px, 1.8vw, 26px)/1.45 var(--display); color: var(--ink-mid);
  margin: 0 0 28px; max-width: 50ch;
}
.article-byline {
  display: flex; gap: 18px; align-items: baseline;
  padding-top: 18px; border-top: 1px solid var(--rule);
  font: 500 11px/1 var(--mono); letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.article-byline .byline-name { text-transform: uppercase; color: var(--ink); }
.article-byline .byline-time { color: var(--ink-soft); }
.article-hero {
  margin: 0 0 40px; aspect-ratio: 16/9; overflow: hidden;
  background: var(--paper-soft); border: 1px solid var(--rule);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-hero figcaption {
  font: 400 12px/1.4 var(--mono); color: var(--ink-soft); margin-top: 10px; padding: 0 4px;
}
.article-prose {
  font: 300 19px/1.78 var(--serif); color: var(--ink-mid);
}
.article-prose > * { margin: 0 0 22px; }
.article-prose p { max-width: 68ch; }
.article-prose h2 { font: italic 300 clamp(30px, 3.4vw, 44px)/1.1 var(--display); color: var(--ink); margin: 40px 0 14px; }
.article-prose h3 { font: italic 400 clamp(22px, 2.4vw, 28px)/1.2 var(--display); color: var(--ink); margin: 30px 0 10px; }
.article-prose a  { color: var(--sienna); border-bottom: 1px solid var(--sienna); text-decoration: none; }
.article-prose a:hover { color: var(--ink); border-color: var(--ink); }
.article-prose blockquote {
  font: italic 300 clamp(24px, 2.8vw, 36px)/1.4 var(--display);
  color: var(--ink); border-left: 3px solid var(--sienna);
  padding: 12px 0 12px 32px; margin: 36px 0;
}
.article-prose img { max-width: 100%; height: auto; border: 1px solid var(--rule); }
.article-prose ul, .article-prose ol { padding-left: 1.5em; }
.article-prose ul li, .article-prose ol li { margin: 0 0 6px; }
.article-prose code {
  font: 400 14px/1.5 var(--mono); background: var(--paper-soft);
  padding: 2px 5px; border: 1px solid var(--rule);
}
.article-tags {
  list-style: none; padding: 36px 0 0; margin: 36px 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 12px;
}
.article-tags a {
  font: 500 10px/1 var(--mono); letter-spacing: 0.18em;
  padding: 6px 10px; border: 1px solid var(--rule);
  color: var(--ink-soft); text-decoration: none;
}
.article-tags a:hover { color: var(--ink); border-color: var(--ink); }
.article-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule);
}
.article-pager a {
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--ink); padding: 18px;
  border: 1px solid var(--rule);
  transition: border-color 0.25s, background 0.25s;
}
.article-pager a:hover { border-color: var(--ink); background: var(--paper-soft); }
.article-pager .next { text-align: right; grid-column: 2; }
.article-pager .dir { font: 500 10px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sienna); }
.article-pager .ttl { font: italic 400 18px/1.3 var(--display); color: var(--ink); }
@media (max-width: 700px) {
  .article { padding: 56px var(--gutter) 48px; }
  .article-pager { grid-template-columns: 1fr; }
  .article-pager .next { grid-column: 1; text-align: left; }
}


/* ────────────────────────────────────────────────────────────────────
   SEARCH RESULTS PAGE (search.php)
   ──────────────────────────────────────────────────────────────────── */
.search-results {
  padding: 80px var(--gutter) 64px;
  max-width: 920px; margin: 0 auto;
}
.search-results-head { margin-bottom: 48px; }
.search-results-head .kicker {
  display: inline-block;
  font: 500 10px/1 var(--mono); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sienna); margin-bottom: 18px;
}
.search-results-head h1 {
  font: italic 300 clamp(36px, 5.5vw, 72px)/1.05 var(--display);
  color: var(--ink); margin: 0 0 18px; word-break: break-word;
}
.search-results-head h1 em { color: var(--sienna); font-style: italic; }
.search-results-head .meta {
  font: 500 11px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 32px;
}
.search-results-form {
  display: flex; gap: 12px; align-items: center;
  padding-bottom: 16px; border-bottom: 2px solid var(--ink);
}
.search-results-form input[type="search"] {
  flex: 1; background: transparent; border: 0; outline: 0;
  font: italic 300 clamp(22px, 3vw, 34px)/1 var(--display); color: var(--ink);
  padding: 8px 0;
}
.search-results-form input[type="search"]::placeholder { color: var(--ink-soft); opacity: 0.55; font-style: italic; }
.search-results-form button {
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--rule);
  font-size: 18px; cursor: pointer; color: var(--ink-soft);
  transition: all 0.25s ease;
}
.search-results-form button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.search-results-list { list-style: none; padding: 0; margin: 0; }
.search-result { border-bottom: 1px solid var(--rule); }
.search-result:first-child { border-top: 1px solid var(--rule); }
.search-result-link {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: 24px; align-items: center;
  padding: 22px 0; text-decoration: none; color: var(--ink);
  transition: padding-left 0.3s ease, background 0.25s ease;
}
.search-result-link:hover { padding-left: 18px; background: rgba(140, 51, 0, 0.03); }
.search-result-thumb {
  width: 100px; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--rule);
  background: var(--paper-warm);
}
.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result-text .search-result-type {
  display: block;
  font: 500 9px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sienna);
  margin-bottom: 8px;
}
.search-result-text h2 { font: italic 400 clamp(20px, 2.4vw, 28px)/1.2 var(--display); color: var(--ink); margin: 0 0 6px; }
.search-result-excerpt { font: 300 14px/1.55 var(--serif); color: var(--ink-mid); margin: 0; max-width: 60ch; }
.search-result-cta { font: 500 10px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); }
.search-result-link:hover .search-result-cta { color: var(--sienna); }

.search-results-pager { display: flex; gap: 8px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); justify-content: center; flex-wrap: wrap; }
.search-results-pager .page-numbers {
  font: 500 11px/1 var(--mono); letter-spacing: 0.18em;
  padding: 10px 14px; min-width: 40px; text-align: center;
  color: var(--ink-soft); text-decoration: none; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-results-pager .page-numbers.current,
.search-results-pager .page-numbers:hover { color: var(--ink); border-color: var(--ink); }

.search-results-empty {
  padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.search-results-empty .dek {
  font: italic 300 clamp(22px, 2.6vw, 32px)/1.4 var(--display); color: var(--ink); margin: 0 0 12px;
}
.search-results-empty .meta {
  font: 500 11px/1 var(--mono); letter-spacing: 0.22em; color: var(--ink-soft); margin: 0 0 32px;
}
.search-results-suggestions {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px;
}
.search-results-suggestions a {
  font: 500 10px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase;
  padding: 10px 14px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.search-results-suggestions a:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 700px) {
  .search-results { padding: 56px var(--gutter) 48px; }
  .search-result-link { grid-template-columns: 80px 1fr; }
  .search-result-cta { display: none; }
}


/* ─── Spotlight carousel (Acapella-inspired double-slider) ───────── */
.spotlight-carousel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.sp-viewport { overflow: hidden; }
.sp-track {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sp-slide {
  flex: 0 0 calc((100% - clamp(32px, 5vw, 72px)) / 2);
  min-width: 0;
}
@media (max-width: 800px) {
  .spotlight-carousel { padding: 0 36px; }
  .sp-slide { flex: 0 0 100%; }
}
.sp-nav {
  position: absolute;
  top: 0;
  height: clamp(220px, 28vw, 360px);
  width: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
  z-index: 2;
}
.sp-nav:hover { opacity: 1; color: var(--sienna); }
.sp-nav--prev { left: 0; }
.sp-nav--next { right: 0; }
.sp-nav:focus-visible { outline: 2px solid var(--sienna); outline-offset: 4px; }
.sp-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.sp-dots button {
  width: 26px; height: 2px;
  background: var(--rule-soft, rgba(0,0,0,0.15));
  border: 0; padding: 0; cursor: pointer;
  transition: background 0.3s, width 0.3s;
}
.sp-dots button[aria-current="true"] {
  background: var(--sienna, #b65020);
  width: 38px;
}
@media (prefers-reduced-motion: reduce) {
  .sp-track { transition: none; }
}

/* ─── Brand page template (page-brand.php) ─────────────────────────
   Used for /audio-note-uk/, /burmester/, /acapella/. Renders hero +
   the page narrative + an auto-built product showcase grid. */
.brand-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 32px 120px;
  color: var(--ink);
}
.brand-hero {
  text-align: center;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}
.brand-eyebrow {
  display: inline-block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 20px;
}
.brand-eyebrow .sep { margin: 0 8px; color: var(--rule); }
.brand-title {
  font: italic 300 clamp(48px, 8vw, 88px)/0.94 var(--display);
  color: var(--ink);
  margin: 0 0 14px;
}
.brand-title em { font-style: italic; }
.brand-founder {
  font: italic 400 18px/1.4 var(--display);
  color: var(--ink-soft);
  margin: 0;
}
.brand-narrative {
  max-width: 720px;
  margin: 0 auto 96px;
  font: 400 17px/1.7 var(--sans);
  color: var(--ink);
}
.brand-narrative .lede {
  font: italic 400 22px/1.5 var(--display);
  color: var(--ink);
  margin: 0 0 32px;
}
.brand-narrative p { margin: 0 0 22px; }
.brand-products {
  padding-top: 24px;
}
.brand-products-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.brand-products-head .l, .brand-products-head .r {
  height: 1px; background: var(--rule);
}
.brand-products-head h2 {
  font: italic 300 clamp(28px, 4vw, 40px)/1 var(--display);
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.brand-products-lede {
  text-align: center;
  font: italic 400 15px/1.5 var(--display);
  color: var(--ink-soft);
  margin: 0 auto 48px;
  max-width: 520px;
}
ul.brand-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-product { list-style: none; }
.brand-product-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand-product-figure {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--paper-warm);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand-product-figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.brand-product-title {
  font: italic 400 19px/1.25 var(--display);
  color: var(--ink);
  margin: 0;
}
.brand-product-price {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.2em;
  color: var(--sienna);
}
.brand-products-empty {
  text-align: center;
  font: italic 400 16px/1.5 var(--display);
  color: var(--ink-soft);
}
.brand-products-empty a { color: var(--sienna); text-decoration: underline; }
@media (max-width: 800px) {
  .brand-page { padding: 64px 20px 80px; }
  .brand-narrative { font-size: 16px; }
  ul.brand-products-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
}
@media (max-width: 480px) {
  ul.brand-products-grid { grid-template-columns: 1fr; }
}



/* ─── Topbar Brands dropdown (desktop) ───────────────────────────── */
.topbar .topbar-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.topbar .topbar-nav .nav-trigger {
  background: none;
  border: 0;
  padding: 0;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}
.topbar .topbar-nav .nav-trigger:hover,
.topbar .topbar-nav .nav-trigger[aria-expanded="true"] { color: var(--ink); }
.topbar .topbar-nav .nav-caret { font-size: 9px; opacity: 0.7; transform: translateY(-0.5px); transition: transform 0.2s ease; }
.nav-item--brands:hover .nav-caret,
.nav-item--brands:focus-within .nav-caret { transform: translateY(-0.5px) rotate(-180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-35%);
  display: none;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 10px 0;
  min-width: 220px;
  z-index: 200;
  box-shadow: 0 14px 36px -10px rgba(26,24,20,0.18);
  letter-spacing: normal;
}
.nav-dropdown::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nav-item--brands:hover .nav-dropdown,
.nav-item--brands:focus-within .nav-dropdown { display: flex; }
.nav-dropdown-link {
  padding: 10px 22px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible { background: var(--paper-warm); color: var(--ink); outline: none; }

@media (max-width: 800px) {
  .nav-item--brands { display: none; }
}

/* ─── Drawer Brands group (mobile <details>/<summary>) ───────────── */
.drawer-group { margin: 0; }
.drawer-group summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-group summary::after {
  content: "+";
  font: 400 22px/1 var(--display);
  color: var(--ink-soft);
  transition: transform 0.2s ease;
  grid-column: 3;
  align-self: center;
}
.drawer-group[open] summary::after { content: "−"; }
.drawer-group .num { font: 500 11px/1 var(--mono); letter-spacing: 0.32em; color: var(--sienna); }
.drawer-group .title { font: italic 400 28px/1.1 var(--display); color: var(--ink); }
.drawer-group .caption { grid-column: 2; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); margin-top: 4px; }
.drawer-subnav {
  display: flex;
  flex-direction: column;
  padding: 10px 0 14px 24px;
  gap: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-subnav a {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
}
.drawer-subnav a:hover { color: var(--sienna); }


/* ───────────────────────────────────────────────────────────────────────
   ROOM PAGE — "In this room" component showcase
   3-col grid of cards (image on top, brand/name/meta beneath).
   Loaded from main.css (not woocommerce.css) so it applies on the
   /rooms/* custom-post-type pages.
   ─────────────────────────────────────────────────────────────────────── */
.room-components {
  max-width: 1180px;
  margin: 72px auto 88px;
  padding: 0 24px;
}
.room-components-head {
  text-align: center;
  margin-bottom: 44px;
}
.room-components-head .kicker {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 14px;
}
.room-components-title {
  font: italic 300 clamp(30px, 4.5vw, 52px)/1.05 var(--display);
  color: var(--ink);
  margin: 0;
}
.room-components-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.component-card { list-style: none; margin: 0; }
.component-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
}
.component-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.3s ease;
}
.component-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.component-link:hover .component-thumb img { transform: scale(1.04); }
.component-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}
.component-brand {
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sienna);
}
.component-name {
  font: italic 400 19px/1.3 var(--display);
  color: var(--ink);
}
.component-meta {
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .room-components-list { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 540px) {
  .room-components-list { grid-template-columns: 1fr; gap: 28px; }
  .component-thumb { aspect-ratio: 4 / 3; }
}

/* Footer social icons (under brand-column pill) */
.foot-col--brand .foot-social {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.foot-col--brand .foot-social li { margin: 0; }
.foot-col--brand .foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(240, 230, 210, 0.22);
  border-radius: 50%;
  color: #d6cdb8;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.foot-col--brand .foot-social a:hover,
.foot-col--brand .foot-social a:focus {
  color: var(--yellow, #e0b54a);
  border-color: var(--yellow, #e0b54a);
  background: rgba(224, 181, 74, 0.08);
}
.foot-col--brand .foot-social svg { display: block; }

/* Founder card — corner logo overlay (Acapella card uses this) */
.peter-photo { position: relative; }
.peter-photo .peter-photo-logo {
  position: absolute;
  top: 3.5%;
  left: 0.5%;
  width: 37%;
  max-width: 300px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
@media (max-width: 720px) {
  .peter-photo .peter-photo-logo { width: 44%; max-width: 184px; top: 3%; left: 1%; }
}

/* Brand archive — Inquire pill (matches boutique pattern) */
.brand-product-price--inquire {
  font: italic 400 16px/1.4 var(--serif, "Cormorant Garamond", serif);
  color: var(--sienna, #c2622c);
  margin-top: 4px;
}
.brand-product-price--inquire span { font-style: normal; margin-left: 2px; }

/* Subcategory chooser — shown at top of parent-category archives (e.g. Digital → DACs/Streamers/Network) */
.boutique-subcats {
  margin: 0 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.boutique-subcats-label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}
.boutique-subcats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.boutique-subcat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--paper-warm, #f6efe0);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.boutique-subcat-card:hover,
.boutique-subcat-card:focus {
  background: #fff;
  border-color: var(--sienna, #c2622c);
  transform: translateY(-2px);
}
.boutique-subcat-name {
  font: 500 18px/1.2 var(--serif, "Cormorant Garamond", serif);
  letter-spacing: 0.01em;
}
.boutique-subcat-count {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
   Brand page — by-category sections (curated catalogue feel)
   ─────────────────────────────────────────────────────────────────────────
   Each category gets its own chapter: hanging mono number, large display
   serif title, mono meta line, then the product grid. Generous vertical
   rhythm separates sections so the page reads like a printed catalogue.
*/
.brand-category {
  margin: 0 auto;
  padding: 64px 0 16px;
  max-width: 1180px;
}
.brand-category:first-of-type {
  padding-top: 28px;
}

.brand-category-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0 0 28px;
  padding: 0 24px;
}
.brand-category-num {
  grid-column: 1;
  grid-row: 1;
  font-size: 12px;
  letter-spacing: 0.20em;
  color: var(--sienna, #c2622c);
  text-transform: uppercase;
  padding-top: 8px;
}
.brand-category-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font: 400 36px/1.1 var(--serif, "Cormorant Garamond", "Cormorant SC", serif);
  letter-spacing: 0.01em;
  font-style: italic;
  color: #1c1d1f;
}
.brand-category-meta {
  grid-column: 2;
  grid-row: 2;
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 29, 31, 0.55);
}
.brand-category-meta .sep {
  margin: 0 6px;
  opacity: 0.5;
}

/* Small twin arrows pinned to the top-right of the section header. Sit on
   row 1 next to the title so the eye reads:
     [num] [title]                                                  [‹][›]
     [   ] [meta line below]                                                */
.brand-rail-controls {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  display: inline-flex;
  gap: 6px;
  padding-bottom: 6px;
}

.brand-category .brand-products-grid {
  padding: 0 24px;
}

@media (max-width: 720px) {
  .brand-category { padding: 44px 0 8px; }
  .brand-category-head {
    grid-template-columns: 40px 1fr auto;
    gap: 4px 12px;
    padding: 0 16px;
    margin-bottom: 20px;
  }
  .brand-category-num { font-size: 11px; padding-top: 6px; }
  .brand-category-title { font-size: 28px; }
  .brand-category-meta { font-size: 10px; margin-top: 4px; }
  .brand-category .brand-products-grid { padding: 0 16px; }
  .brand-rail-controls { display: none; }   /* mobile = swipe */
}

/* ─────────────────────────────────────────────────────────────────────────
   Brand page — horizontal rail per category
   ─────────────────────────────────────────────────────────────────────────
   Each category renders as a scroll-snap rail (Apple Music / Netflix
   pattern). Fixed card width so 4-5 fit on wide desktops, 2 on tablets,
   1.5 on phones — always shows a peek of the next card to signal scroll.
*/
.brand-rail {
  position: relative;
  margin: 0 0 8px;
}
.brand-rail-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 24px 14px;
  margin: 0 -24px;
  list-style: none;
}
.brand-rail-track::-webkit-scrollbar { display: none; }
.brand-rail-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  list-style: none;
  margin: 0;
}

/* Card visuals (re-uses .brand-product-link / -figure / -title / -price) */
.brand-rail-card .brand-product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.brand-rail-card .brand-product-figure {
  aspect-ratio: 4 / 3;
  background: var(--paper-warm, #f6efe0);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-rail-card .brand-product-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.brand-rail-card:hover .brand-product-figure img { transform: scale(1.03); }
.brand-rail-card .brand-product-title {
  font: 400 17px/1.25 var(--serif, "Cormorant Garamond", serif);
  font-style: italic;
  margin: 12px 0 2px;
}

/* Prev/next arrows — small, minimal, lives in the section-header on the right */
.brand-rail-arrow {
  position: static;
  width: 30px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 0;
  font: 400 14px/1 var(--display, "Cormorant Garamond", serif);
  color: var(--ink, #1c1d1f);
  cursor: pointer;
  box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.brand-rail-arrow:hover,
.brand-rail-arrow:focus {
  background: var(--ink, #1c1d1f);
  color: var(--paper, #faf5e8);
  border-color: var(--ink, #1c1d1f);
  outline: none;
}

@media (max-width: 900px) {
  .brand-rail-card { flex: 0 0 240px; }
  .brand-rail-track {
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 -16px;
  }
}
@media (max-width: 520px) {
  .brand-rail-card { flex: 0 0 78%; }
}

/* ─── Acapella founder spotlight — portrait orientation
   Acapella speakers are tall horn loudspeakers, so portrait crops show
   them better than the default 1:1 / 4:3 square. */
#founder-acapella .founder-spotlight-card figure {
  aspect-ratio: 3 / 4 !important;
}
#founder-acapella .founder-spotlight-card figure img {
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────────────
   Burmester — background knockout via mix-blend-mode
   ─────────────────────────────────────────────────────────────────────────
   Burmester product photography is consistently shot on pure white. Rather
   than rembg every image (creates orphan attachments, breaks thumbnails),
   we blend the IMG with the page bg so:
     • white shoot bg → blends away to the cream paper
     • dark product pixels → stay dark
     • soft shadows under the product → render as gentle cream tints,
       grounding the piece on the page (looks more elegant than rembg's
       hard cutout). The figure background is set transparent so the
       knockout is uniform across spotlight, archive, and boutique grid.
*/
#founder-burmester .founder-spotlight-card figure,
body.brand-page-burmester .brand-rail-card .brand-product-figure,
.product.product_brand-burmester .autobahn-product-figure,
#founder-peter .founder-spotlight-card figure,
body.brand-page-audio-note-uk .brand-rail-card .brand-product-figure,
.product.product_brand-audio-note-uk .autobahn-product-figure {
  background: transparent !important;
}
#founder-burmester .founder-spotlight-card figure img,
body.brand-page-burmester .brand-rail-card .brand-product-figure img,
.product.product_brand-burmester .autobahn-product-figure img,
#founder-peter .founder-spotlight-card figure img,
body.brand-page-audio-note-uk .brand-rail-card .brand-product-figure img,
.product.product_brand-audio-note-uk .autobahn-product-figure img {
  mix-blend-mode: multiply;
}

/* Per-product opt-out — set postmeta `_autobahn_no_knockout` = "yes" on
   products with lifestyle images that shouldn't be background-stripped.
   The `post_class` filter in functions.php adds the matching class. */
.product.product-no-knockout .autobahn-product-figure img,
.product.product-no-knockout .autobahn-product-figure {
  mix-blend-mode: normal !important;
  background: var(--paper-warm) !important;
}

/* Floor plan SVG — every caption inside the plate-svg renders at exactly
   40 SVG units. Section header text lives OUTSIDE the SVG (in .head .l)
   so it's untouched. Title-strip text inside the SVG also stays untouched
   (.title-strip is the date-stamp banner — the only "header" element
   inside the SVG itself). The max-width:2560 cap keeps physical render
   size sensible on extra-wide viewports. */
.cartoon-section .plan-stage svg.plate-svg {
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}
.cartoon-section .plate-svg text:not(.title-strip):not(.signature) {
  font-size: 40px !important;
}


/* Spotlight section header — prev-arrow | SPOTLIGHT label | next-arrow,
   all centered as a single group. Label and arrows vertically aligned
   along the geometric middle of the header row (align-items: center on
   the flex row, line-height: 1 on the label to keep its line-box tight). */
.founder-spotlight-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.founder-spotlight-head .founder-spotlight-label {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1;
  align-self: center;
  text-align: center;
}
.founder-spotlight-controls {
  display: inline-flex;
  gap: 6px;
}
/* Phantom spacer matches controls width (30 + 6 + 30 = 66px) so the
   label is true-centered while the arrows trail off to the right. */
.founder-spotlight-spacer {
  display: inline-block;
  width: 66px;
  height: 1px;
  visibility: hidden;
}
@media (max-width: 720px) {
  .founder-spotlight-spacer,
  .founder-spotlight-controls { display: none; }   /* mobile = swipe */
}

/* ─────────────────────────────────────────────────────────────────────────
   Inquiry box — used on the PDP (product page) AND the homepage Visit
   section's "Request an appointment" CTA. Originally lived in
   woocommerce.css but that file is only enqueued on WC pages, so the
   homepage appointment form rendered unstyled. Mirroring the rules here
   makes them available everywhere main.css is loaded (every page).
*/
.pdp-inquiry {
  margin-bottom: 36px;
  padding: 26px 28px;
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--sienna);
}
.pdp-inquiry-eyebrow {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 14px;
}
.pdp-inquiry-lede {
  font: 300 17px/1.55 var(--serif);
  color: var(--ink-mid);
  margin: 0 0 22px;
  max-width: 50ch;
}
.pdp-inquiry-open {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
}
.pdp-inquiry-open:hover { background: var(--sienna); color: var(--paper); }
.pdp-inquiry-open span { font-size: 14px; transition: transform 0.2s ease; }
.pdp-inquiry-open:hover span { transform: translateX(3px); }

.pdp-inquiry-form { margin-top: 24px; }
.pdp-inquiry-form-title {
  font: italic 300 24px/1.15 var(--display);
  color: var(--ink);
  margin: 0 0 20px;
}
.pdp-inquiry-field { margin-bottom: 14px; }
.pdp-inquiry-field label {
  display: block;
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.pdp-inquiry-field input,
.pdp-inquiry-field textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font: 400 14px/1.4 var(--sans);
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s ease;
  box-sizing: border-box;
}
.pdp-inquiry-field input:focus,
.pdp-inquiry-field textarea:focus { border-color: var(--ink); }
.pdp-inquiry-field textarea { resize: vertical; min-height: 88px; font-family: var(--sans); }

.pdp-inquiry-pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pdp-inquiry-submit {
  margin-top: 8px;
  padding: 13px 24px;
  background: var(--sienna);
  color: var(--paper);
  border: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pdp-inquiry-submit:hover:not(:disabled) { background: var(--ink); }
.pdp-inquiry-submit:disabled { opacity: 0.55; cursor: progress; }

.pdp-inquiry-status {
  margin-top: 12px;
  font: 400 13px/1.4 var(--sans);
  color: var(--ink-soft);
  min-height: 1.4em;
}
.pdp-inquiry-status.is-error { color: #a4252b; }

.pdp-inquiry-thanks {
  padding: 18px 0;
  font: italic 300 20px/1.4 var(--display);
  color: var(--ink);
}

/* Homepage appointment box — tweak to fit the Visit column rhythm
   (narrower; cream-on-cream looks better unboxed there than a hard tile). */
.aa-appointment-inquiry {
  margin: 18px 0 0;
  max-width: 520px;
}