/* ═══════════════════════════════════════════════════════════════════════════
   EAM MAISON — SITE STYLESHEET
   Art direction locked to the signed guidelines "Ethos Aurum_Brand Identity"
   (16pp, Fekry, 24 Aug 2026) — NOT to Brand Identity Vol. 01, which this file
   followed until 24 Aug 2026 and which is now dead. Palette, type and the gold
   hard-gate come from css/eam-tokens.css — that file mirrors the client's
   signed-off token set (v2.0) and is imported, never edited here.

   RE-EXPORTED TO TOKENS v2.0 ON 24 AUG 2026. Four hexes and the body typeface
   moved: bone, alabaster, aurum and espresso all shifted, and the body face went
   from Bricolage Grotesque to Source Serif 4. Every rgba() triplet in this file
   was re-derived at the same time — the v1.0 values had been hand-typed into
   about twenty gradients and borders and would otherwise have survived the swap.
   If you add another, use the --eam-*-rgb channels in the tokens file.

   THE GOLD HARD-GATE (from the tokens file, restated because it governs
   every decision below): --eam-aurum measures 2.46:1 on bone — worse under v2.0
   than it was under v1.0, because the ground got lighter as the gold got deeper.
   It is never a text colour on a light ground. It is used for hairlines, seals,
   rules and single accents only. Where gold *reads* as text — the department
   numerals — it sits on espresso (5.61:1) or oxblood (5.46:1) and passes AA at
   16px and above. It fails on bordeaux (3.96:1); do not put it there.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('eam-tokens.css');

/* Fonts are NOT imported here any more. A CSS @import is only discovered after
   this stylesheet has been fetched and parsed, which serialises the critical
   path: HTML → maison.css → fonts.googleapis.com → the font files. They now
   load from a <link> in index.html alongside a preconnect, so the font request
   starts in parallel with this file instead of waiting for it. Do not put the
   @import back. See BUILD_NOTES → "Deployment hardening". */

/* ── reset ─────────────────────────────────────────────────────────────── */

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

/* overflow-x MUST NOT be `hidden` here.
   `overflow-x: hidden` on html/body makes the body a scroll container, and
   every `position: sticky` descendant then sticks to a box that never scrolls
   — which silently disables the entire pinning mechanism the scrub depends on.
   `clip` suppresses the same horizontal overflow WITHOUT creating a
   scrollport, so the scenes still pin. This is the whole trick; don't
   "tidy" it back to hidden. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

/* Body weight went 300 -> 400 with the typeface change on 24 Aug 2026. Not a
   drift from the guidelines — they name the face, not the weight. Bricolage at
   300 was a grotesque holding a solid stem; Source Serif 4 at 300 is a seriffed
   face whose hairlines and serifs thin out to almost nothing at 16px, and it
   read as washed-out on bone in the first pass. 400 is what the face was drawn
   to be set at. If anyone asks for 300 back, show them a phone in daylight. */
body {
  margin: 0;
  background: var(--eam-espresso);
  color: var(--eam-text);
  font-family: var(--eam-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;          /* see the note on html — never `hidden` */
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--eam-font-display);
  font-weight: 300;
  margin: 0;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

/* Focus ring. The claim that a gold hairline is "visible on every ground" was
   never measured and is not true under v2.0: gold on bone is 2.46:1, well under
   the 3:1 that WCAG 2.2 SC 1.4.11 asks of a focus indicator. The maison is dark
   almost everywhere, so gold stays the default (5.46:1 on oxblood, 5.61:1 on
   espresso) and the two light worlds get oxblood instead. Also 2px, not 1px — a
   hairline focus ring is a hairline nobody sees. */
:focus-visible {
  outline: 2px solid var(--eam-aurum);
  outline-offset: 4px;
}
/* The two light worlds: editorial is bone, vitrine is alabaster. Gold measures
   2.46:1 and 2.22:1 on those. Vault is espresso and keeps the gold. */
[data-layout="editorial"] :focus-visible,
[data-layout="vitrine"] :focus-visible {
  outline-color: var(--eam-oxblood);
}

/* ── shared atoms ──────────────────────────────────────────────────────── */

.proof {
  font-family: var(--eam-font-proof);
  font-size: 10px;
  letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
}

/* A gold rule that wipes in from the left, rather than fading. */
.rule {
  height: 1px;
  background: var(--eam-aurum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(.16,.84,.32,1);
}
.is-in .rule, .rule.is-in { transform: scaleX(1); }

/* The house reveal: up 24px, no bounce, weighted ease. */
.rise {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.16,.84,.32,1),
              transform 1s cubic-bezier(.16,.84,.32,1);
}
.rise.is-in { opacity: 1; transform: none; }
.rise[data-delay="1"] { transition-delay: .12s; }
.rise[data-delay="2"] { transition-delay: .24s; }
.rise[data-delay="3"] { transition-delay: .36s; }

.btn {
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  padding: 14px 30px;
  border-radius: var(--eam-radius);
  cursor: pointer;
  font-family: var(--eam-font-proof);
  font-size: 10px;
  letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color .5s ease, border-color .5s ease;
}
.btn::after {                       /* the ground slides up behind the label */
  content: '';
  position: absolute; inset: 0;
  background: var(--eam-oxblood);
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.16,.84,.32,1);
  z-index: -1;
}
.btn:hover::after { transform: none; }
.btn:hover { color: var(--eam-bone); border-color: var(--eam-oxblood); }

/* Add to Bag confirmation — a gold shimmer crossing the button once. */
@keyframes shimmer {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
.btn.is-added::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%,
              rgba(183,154,92,.85) 50%, transparent 80%);
  animation: shimmer .9s cubic-bezier(.4,0,.2,1);
}

/* ═══ 1 · OVERTURE ═══════════════════════════════════════════════════════ */

/* Ground changed espresso -> oxblood on 24 Aug 2026. Not a taste call: the
   locked guidelines approve the mark on bone, alabaster and oxblood and nothing
   else, and the overture is the first place the mark appears. Oxblood is also
   the better curtain — espresso read as a loading screen, oxblood reads as a
   closed door. */
#overture {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--eam-oxblood);
  display: grid; place-items: center;
  transition: opacity 1.2s ease, visibility 1.2s;
}
#overture.is-done { opacity: 0; visibility: hidden; }

.overture-mark { width: min(300px, 56vw); text-align: center; }

/* The mark arrives, then the rule and the count follow.
   The old version stroke-dashed a hand-drawn letterform. The signed monogram is
   filled artwork with an oversized A against hairline curves — dash it and the
   thick diagonal snaps in while the hairlines crawl, which looks broken. So the
   reveal is a wipe up the mark instead, on the same 2.4s curve and the same
   left-to-bottom reading order. Nothing about the artwork is altered; it is only
   uncovered. */
.overture-reveal {
  --wipe: 0%;
  animation: reveal 2.4s cubic-bezier(.16,.84,.32,1) forwards;
  -webkit-mask-image: linear-gradient(to top, #000 0 var(--wipe), transparent var(--wipe));
          mask-image: linear-gradient(to top, #000 0 var(--wipe), transparent var(--wipe));
}
.overture-reveal img { width: 100%; height: auto; display: block; }
@keyframes reveal { to { --wipe: 118%; } }

/* Firefox and any engine that will not animate an unregistered custom property
   inside a mask gets a plain fade — same duration, same curve, no half-drawn
   mark. @property registers --wipe where it is supported so the wipe is smooth
   rather than stepping. */
@property --wipe {
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}
@supports not (background: linear-gradient(to top, #000 0 var(--wipe), transparent var(--wipe))) {
  .overture-reveal { -webkit-mask-image: none; mask-image: none;
                     opacity: 0; animation: reveal-fade 2.4s cubic-bezier(.16,.84,.32,1) forwards; }
}
@keyframes reveal-fade { to { opacity: 1; } }

/* A visitor who has asked for less motion gets the mark, not the performance. */
@media (prefers-reduced-motion: reduce) {
  .overture-reveal { animation: none; opacity: 1;
                     -webkit-mask-image: none; mask-image: none; }
}

.overture-bar {
  margin: 28px auto 0;
  width: 180px; height: 1px;
  background: rgba(183,154,92,.22);
  position: relative;
}
.overture-bar span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--eam-aurum);
  width: 0%;
  transition: width .4s ease;
}
.overture-pct {
  margin-top: 14px;
  color: var(--eam-aurum);          /* on espresso — 5.61:1, gate respected */
  opacity: .8;
}

/* ═══ 2 · TOP BAR ════════════════════════════════════════════════════════ */

/* The bar floats over white marble, over oxblood and over a near-black vault.
   mix-blend-mode was tried first and inverted the gold unpredictably, so it
   carries its own top scrim instead — predictable, and it reads as a proper
   maison header rather than a trick. */
/* Starts at zero. The façade is shown with nothing on it at all; the bar fades
   up between 12% and 26% of the arrival, once the camera has committed to
   going in. js/main.js drives the opacity — see arrival(). */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(18px, 4vw, 46px);
  color: var(--eam-bone);
  text-shadow: 0 1px 16px rgba(46,36,31,.85);
  opacity: 0;
}
.topbar::before {
  content: ''; position: absolute; inset: -1px 0 auto 0; height: 190%;
  background: linear-gradient(rgba(46,36,31,.62), rgba(46,36,31,0));
  pointer-events: none; z-index: -1;
}

/* Holds the locked monogram now, not the letters E A M. Sized off the cap
   height it replaced so the bar's rhythm is unchanged. currentColor keeps it a
   single flat bone over every ground the bar crosses — the mark is never
   two-tone and never tinted (guidelines p.7). */
.topbar-mark {
  display: inline-flex; align-items: center;
  text-decoration: none; color: inherit;
}
/* 26px first, raised to 30px after rendering it at size: the E crossbar and the
   M's outer curve are hairlines, and at 26px they start dropping out on a
   non-retina screen. 30px holds them and still sits inside the bar's 20px
   padding. Do not go below 30. */
.topbar-mark svg {
  height: 30px; width: auto; display: block;
  transition: opacity .3s ease;
}
.topbar-mark:hover svg { opacity: .78; }
.topbar-nav { display: flex; gap: clamp(14px, 2.4vw, 34px); }
/* The Register link sits in this nav as an <a> (it leaves the page, so it is
   not a scroll button). It takes the identical treatment — same selector list,
   no second rule to drift out of step. */
.topbar-nav button,
.topbar-nav a {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: inherit; text-decoration: none;
  font-family: var(--eam-font-proof);
  font-size: 10px; letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  position: relative; opacity: .78;
  transition: opacity .4s ease;
}
.topbar-nav button::after,
.topbar-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,.84,.32,1);
}
.topbar-nav button:hover,
.topbar-nav a:hover { opacity: 1; }
.topbar-nav button:hover::after,
.topbar-nav a:hover::after { transform: scaleX(1); }

.bag-btn {
  background: none; border: 0; cursor: pointer;
  font-family: var(--eam-font-proof);
  font-size: 10px; letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.bag-count {
  min-width: 19px; height: 19px; padding: 0 5px;
  border: 1px solid currentColor; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 9px; line-height: 1;
  transition: transform .45s cubic-bezier(.16,.84,.32,1);
}
.bag-count.is-bumped { transform: scale(1.5); }

/* ═══ 3 · THE FILM STAGE ═════════════════════════════════════════════════
   ONE canvas, fixed, behind the whole document. Every scene paints here, so
   there is never a second surface to slide past the first — which is what made
   the old per-section pins show a seam at every junction. */

.film-stage {
  position: fixed; inset: 0; z-index: 0;
  background: var(--eam-espresso);
  pointer-events: none;
}
.film-stage canvas { display: block; width: 100%; height: 100%; }

/* Chapters are transparent spacers. They carry no image — they only declare
   how much scroll a piece of film is given, via --h. Anything that has to sit
   still over the film goes in .pinned. */
.chapter {
  position: relative; z-index: 1;
  height: var(--h, 200vh);
}
.chapter .pinned {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  pointer-events: none;             /* the doorways re-enable it themselves */
}
.chapter .pinned > * { pointer-events: auto; }
/* ...but the title is decoration sitting over the doorways, so it must never
   swallow a click meant for one of them. Specificity has to beat the rule
   above, hence the full path. */
.chapter .pinned .hall-title,
.chapter .pinned .dept-plaque,
.chapter .pinned .arrival-scroll { pointer-events: none; }

main { position: relative; z-index: 1; }

/* ── THE FAÇADE CARRIES NOTHING ────────────────────────────────────────────
   No wordmark, no caption, no scrim, no plate. Earlier passes put a title card
   over the exterior and then spent effort making it legible against a sunlit
   white wall — the wrong problem. The building already has the maison's gold
   monogram cast into it above the glass, and that render is the single most
   expensive shot on the site. Anything laid over it competes with it.
   The heading below exists for document structure only and is never painted. */

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

/* The one permitted mark: a hairline at the foot of the frame, no words, so a
   first-time visitor knows the page moves. It clears the instant they scroll. */
.arrival-scroll {
  position: absolute; left: 50%; bottom: 42px; z-index: 5;
  transform: translateX(-50%);
  transition: opacity 1s ease;
}
.arrival-scroll i {
  display: block; width: 1px; height: 56px;
  background: linear-gradient(rgba(183,154,92,0), var(--eam-aurum) 45%, rgba(183,154,92,0));
  animation: cue 2.8s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { opacity: .3; transform: translateY(-7px); }
  50%      { opacity: 1;  transform: translateY(7px); }
}

/* ═══ 4 · THE MAISON — the branch point ══════════════════════════════════
   The hall image is painted on the shared canvas like every other scene; only
   the doorway hotspots and the title live in the DOM. #hall-doors is sized to
   the cover-fitted canvas by js/hall.js. */

#hall-doors { position: absolute; inset: 0; }

.door {
  position: absolute;
  background: transparent;
  border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.door::before {                     /* the warm light inside the doorway */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 62%,
              rgba(183,154,92,.30), rgba(183,154,92,.05) 70%, transparent 100%);
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,.84,.32,1);
}
.door::after {                      /* hairline threshold */
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(183,154,92,0);
  transition: border-color .7s ease;
}
.door:hover::before,
.door:focus-visible::before { opacity: 1; }
.door:hover::after,
.door:focus-visible::after { border-color: rgba(183,154,92,.75); }

/* The label carries its own espresso plate. Without it the gold numeral would
   sit on white marble at 2.05:1 — the exact thing the hard-gate forbids. On
   the plate it measures 6.88:1. */
.door-label {
  position: absolute; left: 50%; bottom: -14px;
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16,.84,.32,1),
              transform .6s cubic-bezier(.16,.84,.32,1);
  white-space: nowrap;
  text-align: center;
  color: var(--eam-bone);
  background: rgba(46,36,31,.88);
  padding: 10px 18px 11px;
  pointer-events: none;
}
.door-label b {
  display: block;
  font-family: var(--eam-font-display);
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 400;
  letter-spacing: .12em;
}
.door-label i {
  display: block;
  font-family: var(--eam-font-proof); font-style: normal;
  font-size: 9px; letter-spacing: var(--eam-track-proof);
  color: var(--eam-aurum);          /* on a dark shadowed ground */
  margin-bottom: 5px;
}
.door:hover .door-label,
.door:focus-visible .door-label { opacity: 1; transform: translate(-50%, 0); }

/* Sits over the lit dome — the brightest part of the hall. Same problem as the
   façade, same answer: give the type its own ground instead of trusting a
   text-shadow to carry it. */
.hall-title {
  position: absolute; left: 0; right: 0; top: 0;
  padding: clamp(84px, 12vh, 132px) 20px clamp(40px, 8vh, 90px);
  text-align: center; color: var(--eam-bone);
  pointer-events: none;
  background: linear-gradient(rgba(46,36,31,.62), rgba(46,36,31,.34) 62%, rgba(46,36,31,0));
}
.hall-title h2 {
  font-size: clamp(26px, 3.6vw, 50px);
  letter-spacing: .16em; padding-left: .16em;
}
.hall-title p { margin: 12px 0 0; opacity: .88; }

/* ═══ 5 · THE THREE ROOMS ════════════════════════════════════════════════
   Each room is: a scrub chapter (walk in) → an OPAQUE content block (the
   products, rising over the settled frame) → a reverse chapter (walk back
   out to the hall). The chapters are transparent spacers; only .dept-content
   is opaque, which is what hides and then reveals the film again. */

.dept-content {
  position: relative; z-index: 1;
}

.dept-plaque {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  color: var(--eam-bone); pointer-events: none;
}
/* Same reason as the door label: the roman numeral is aurum, and every
   department opens on bright marble. The scrim gives it a dark ground to
   sit on so the gate holds through the descent. */
.dept-plaque::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 44% at 50% 50%,
              rgba(46,36,31,.74), rgba(46,36,31,0) 74%);
}
.dept-plaque > div { position: relative; }
.dept-plaque i {
  display: block; font-style: normal;
  font-family: var(--eam-font-display);
  font-size: clamp(40px, 7vw, 96px);
  color: var(--eam-aurum);
  line-height: 1; margin-bottom: 14px;
}
.dept-plaque h2 {
  font-size: clamp(28px, 4.6vw, 66px);
  letter-spacing: .13em; padding-left: .13em;
}
.dept-plaque p { margin: 16px auto 0; max-width: 46ch; opacity: .9; }

/* A scroll target, not a route — it travels the page back to the branch
   point. Only exists once you are past the hall. */
.back-to-hall {
  position: fixed; bottom: 26px; left: clamp(18px, 4vw, 46px); z-index: 460;
  background: rgba(46,36,31,.86); border: 0; cursor: pointer;
  color: var(--eam-bone);
  padding: 12px 20px;
  font-family: var(--eam-font-proof);
  font-size: 10px; letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .6s ease, visibility .6s, transform .6s cubic-bezier(.16,.84,.32,1);
}
.back-to-hall.is-shown { opacity: .9; visibility: visible; transform: none; }
.back-to-hall:hover { opacity: 1; }
.back-to-hall span { display: block; width: 26px; height: 1px; background: var(--eam-aurum); }

/* Hairline gold rule across the top, showing progress through the journey. */
.journey {
  position: fixed; top: 0; left: 0; right: 0; z-index: 520;
  height: 1px; background: rgba(183,154,92,.14);
  pointer-events: none;
}
.journey span {
  display: block; height: 100%; background: var(--eam-aurum);
  transform: scaleX(0); transform-origin: left;
}

/* ── the three room presentations ──────────────────────────────────────── */

.dept-intro {
  padding: clamp(70px, 12vh, 140px) clamp(22px, 6vw, 90px);
  max-width: 760px;
}
.dept-intro .proof { color: var(--eam-aurum); }
.dept-intro h3 {
  font-size: clamp(22px, 2.7vw, 38px);
  margin: 16px 0 18px;
}
.dept-intro p { margin: 0; max-width: 54ch; opacity: .84; }
.dept-intro .rule { margin-top: 34px; width: 120px; }

/* — II · READY-TO-WEAR — editorial split, huge Didone numerals ————— */

[data-layout="editorial"] { background: var(--eam-bone); color: var(--eam-espresso); }
[data-layout="editorial"] .dept-intro .proof { color: var(--eam-oxblood); }

.editorial-piece {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
  border-top: 1px solid rgba(74,22,32,.16);
}
/* Alternate which side the plate falls on. Driven by an explicit attribute
   rather than :nth-child, because .dept-intro is the first sibling and would
   otherwise shift the parity. */
.editorial-piece[data-side="right"] > .piece-plate { order: 2; }

.piece-plate { position: relative; overflow: hidden; background: var(--eam-alabaster); }
.piece-plate img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s cubic-bezier(.16,.84,.32,1), opacity .9s ease;
}
.piece-plate .plate-detail { position: absolute; inset: 0; opacity: 0; }
.editorial-piece:hover .plate-detail,
.vitrine-piece:hover .plate-detail,
.vault-piece:hover .plate-detail { opacity: 1; }
.editorial-piece:hover .plate-main { transform: scale(1.03); }

.piece-body {
  padding: clamp(44px, 7vw, 96px);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.piece-num {
  position: absolute; top: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px);
  font-family: var(--eam-font-display);
  font-size: clamp(74px, 11vw, 190px);
  line-height: .8;
  color: var(--eam-oxblood);
  opacity: .1;
  pointer-events: none;
  font-style: italic;
}
.piece-name { font-size: clamp(28px, 3.4vw, 50px); margin-bottom: 10px; }
.piece-line {
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .62;
}
.piece-blurb { margin: 26px 0 0; max-width: 42ch; opacity: .86; }
.piece-hairline { height: 1px; background: var(--eam-aurum); width: 84px; margin: 28px 0; }

.piece-meta { display: grid; gap: 9px; margin-bottom: 30px; }
.piece-meta div { display: flex; gap: 12px; align-items: baseline; }
.piece-meta dt {
  font-family: var(--eam-font-proof); font-size: 9px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .5; min-width: 92px;
}
.piece-meta dd { margin: 0; font-size: 14px; }

.piece-price {
  font-family: var(--eam-font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  margin-bottom: 26px;
}
.piece-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* the hallmark chip — the one place gold is allowed to look like a stamp */
.hallmark {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(183,154,92,.55);
  padding: 6px 12px;
  font-family: var(--eam-font-proof); font-size: 9px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  align-self: flex-start; margin-bottom: 22px;
}
.hallmark::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--eam-aurum);
}

/* — IV · SHOES & ACCESSORIES — lit plinths, travelling spotlight ————— */

[data-layout="vitrine"] { background: var(--eam-alabaster); color: var(--eam-espresso); }
[data-layout="vitrine"] .dept-intro .proof { color: var(--eam-oxblood); }

.vitrine-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 70px);
  padding: 0 clamp(22px, 6vw, 90px) clamp(70px, 12vh, 140px);
}
.vitrine-piece { position: relative; }

.plinth {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--eam-espresso);
  transition: transform .9s cubic-bezier(.16,.84,.32,1);
}
.vitrine-piece:hover .plinth { transform: translateY(-12px); }
.plinth img { width: 100%; height: 100%; object-fit: cover; }

/* the spotlight travels slowly across the case, then settles */
@keyframes sweep {
  0%   { transform: translateX(-40%) rotate(8deg); opacity: 0; }
  22%  { opacity: .9; }
  100% { transform: translateX(140%) rotate(8deg); opacity: 0; }
}
.plinth::after {
  content: ''; position: absolute; top: -25%; bottom: -25%; width: 42%;
  background: linear-gradient(100deg, transparent,
              rgba(255,251,240,.30), transparent);
  pointer-events: none;
}
.vitrine-piece.is-in .plinth::after { animation: sweep 2.6s cubic-bezier(.4,0,.2,1) .3s; }

/* the plinth's own shadow, so the object sits on something */
.plinth-base {
  height: 22px;
  background: linear-gradient(rgba(46,36,31,.22), transparent);
  transition: opacity .9s ease;
}
.vitrine-piece:hover .plinth-base { opacity: .5; }

.vitrine-piece .piece-body { padding: 30px 0 0; }
.vitrine-piece .piece-num { display: none; }

/* — III · JEWELLERY & WATCHES — museum case, lights down ———————— */

[data-layout="vault"] { background: var(--eam-espresso); color: var(--eam-bone); }
[data-layout="vault"] .dept-intro .proof { color: var(--eam-aurum); }
[data-layout="vault"] .piece-line { opacity: .55; }
[data-layout="vault"] .piece-meta dt { opacity: .45; }

.vault-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 5vw, 90px);
  padding: 0 clamp(22px, 6vw, 90px) clamp(70px, 12vh, 140px);
}
.vault-case {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* the case glows from inside — that's the only light in this department */
  box-shadow: 0 0 0 1px rgba(183,154,92,.22),
              0 40px 90px -40px rgba(0,0,0,.9);
  transition: box-shadow 1s cubic-bezier(.16,.84,.32,1);
}
.vault-piece:hover .vault-case {
  box-shadow: 0 0 0 1px rgba(183,154,92,.55),
              0 0 70px -10px rgba(183,154,92,.18),
              0 40px 90px -40px rgba(0,0,0,.9);
}
.vault-case img { width: 100%; height: 100%; object-fit: cover; }
.vault-case::before {               /* glass */
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(150deg, rgba(255,255,255,.10) 0%,
              transparent 34%, transparent 66%, rgba(255,255,255,.05) 100%);
  pointer-events: none;
}
/* restrained sparkle — one point of light, only on hover */
.vault-case::after {
  content: ''; position: absolute; z-index: 3;
  top: 34%; left: 42%; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: 0;
  box-shadow: 0 0 12px 3px rgba(255,255,255,.85);
  transition: opacity .9s ease;
  pointer-events: none;
}
.vault-piece:hover .vault-case::after { opacity: 1; }
.vault-piece .piece-body { padding: 30px 0 0; }
.vault-piece .piece-num { display: none; }

/* ═══ 4b · THE SHOP — bar, panels, grid, piece ═══════════════════════════
   Added 24 Aug 2026. The client's complaint was exact: the film was the only
   way through the site, so someone who already knew they wanted the Loewe
   Puzzle had to walk the whole building to reach it. This layer is the answer.

   The bar sits ABOVE the film from the first frame and never leaves. It is a
   separate element from .topbar — that one belongs to the walkthrough and fades
   with it; this one is the shop's furniture and is always there. */

#shopbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  padding: 14px clamp(14px, 3vw, 34px);
  color: var(--eam-bone);
  background: linear-gradient(rgb(var(--eam-espresso-rgb) / .72),
                              rgb(var(--eam-espresso-rgb) / 0));
  backdrop-filter: saturate(1.1) blur(2px);
}
#shopbar .sb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  color: inherit; text-decoration: none;
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .82; transition: opacity .3s ease;
}
#shopbar .sb-btn:hover, #shopbar .sb-btn:focus-visible { opacity: 1; }
#shopbar .sb-right { margin-left: 0; }
#shopbar .sb-right:first-of-type { margin-left: auto; }

.sb-burger { display: inline-flex; flex-direction: column; gap: 3px; width: 15px; }
.sb-burger i { display: block; height: 1px; background: currentColor; }
.sb-glass {
  width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%;
  position: relative;
}
.sb-glass::after {
  content: ''; position: absolute; right: -4px; bottom: -3px;
  width: 5px; height: 1px; background: currentColor; transform: rotate(45deg);
}
/* The centred brand: the mark, and a hairline "Store Now" beneath it. The
   mark still links home; the tag is its own link to the full store, so the
   two are siblings rather than a link inside a link. */
.sb-brand {
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sb-mark { display: block; color: inherit; }
.sb-mark svg { height: 24px; width: auto; display: block; }
.sb-brand-cta {
  font-family: var(--eam-font-proof);
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .6;
  padding: 3px 2px 0;
  border-top: 1px solid currentColor;
  transition: opacity .3s ease;
}
.sb-brand-cta:hover, .sb-brand-cta:focus-visible { opacity: 1; }

/* On a phone the labels go and the icons carry it — five words across a
   375px bar is a bar nobody can read. The mark stays centred. */
@media (max-width: 620px) {
  #shopbar .sb-label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #shopbar #sb-bag .sb-label { position: static; width: auto; height: auto; clip: auto; }
  .sb-mark svg { height: 20px; }
}

/* ── panels ─────────────────────────────────────────────────────────────
   One mechanism for the menu, the search and the piece. They are siblings,
   never nested, so only one can ever be open and closing is a single sweep. */
.panel {
  position: fixed; inset: 0; z-index: 1200;
  background: var(--eam-oxblood); color: var(--eam-bone);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease, visibility .34s;
}
.panel[aria-hidden="false"] { opacity: 1; visibility: visible; }
html.panel-open, html.panel-open body { overflow: hidden; }

.panel-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(18px, 4vw, 46px);
  background: var(--eam-oxblood);
  border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .14);
}
.panel-close {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 0 4px; opacity: .7;
}
.panel-close:hover { opacity: 1; }
.panel-body { padding: clamp(26px, 5vh, 54px) clamp(18px, 4vw, 46px) 90px; }

.menu-lead {
  display: block; text-decoration: none; color: inherit;
  padding-bottom: 26px; margin-bottom: 30px;
  border-bottom: 1px solid var(--eam-aurum);
}
.menu-lead-name {
  display: block; font-family: var(--eam-font-display);
  font-size: clamp(34px, 6vw, 54px); font-weight: 300; line-height: 1.05;
}
.menu-lead-n {
  display: block; margin-top: 8px; opacity: .62;
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
}
.menu-block { margin-bottom: 34px; }
.menu-block h3 { opacity: .48; margin: 0 0 14px; font-weight: 400; }
.menu-block ul { list-style: none; margin: 0; padding: 0; }
.menu-block li + li { border-top: 1px solid rgb(var(--eam-bone-rgb) / .1); }
.menu-block a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; color: inherit; text-decoration: none;
  font-size: 16px; opacity: .9; transition: opacity .25s ease;
}
.menu-block a:hover { opacity: 1; }
.menu-strong { font-family: var(--eam-font-display); font-size: 24px !important; }
.menu-n {
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: .1em; opacity: .5;
}
.menu-houses { columns: 2; column-gap: 34px; }
.menu-houses li { break-inside: avoid; }
.menu-quiet a { font-size: 14px; opacity: .68; }
@media (max-width: 560px) { .menu-houses { columns: 1; } }

/* ── search ─────────────────────────────────────────────────────────── */
.search-field { padding: clamp(20px, 4vh, 40px) clamp(18px, 4vw, 46px) 0; }
#search-input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .28);
  color: var(--eam-bone); padding: 10px 0 14px;
  font-family: var(--eam-font-display); font-size: clamp(24px, 4.5vw, 40px);
  font-weight: 300;
}
#search-input:focus { outline: none; border-bottom-color: var(--eam-aurum); }
#search-input::placeholder { color: rgb(var(--eam-bone-rgb) / .38); }
.search-results { padding: 10px clamp(18px, 4vw, 46px) 90px; }
.search-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; color: inherit; text-decoration: none;
  border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .1);
}
.sr-house {
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .6; min-width: 12ch;
}
.sr-name { font-size: 16px; }
.sr-right {
  margin-left: auto; font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: .08em; opacity: .72; white-space: nowrap;
}
.search-empty { opacity: .8; }
.search-empty a { color: var(--eam-aurum); }   /* 5.46:1 on oxblood — passes */

/* ── the grid ───────────────────────────────────────────────────────── */
#shop {
  position: relative; z-index: 2;
  background: var(--eam-bone); color: var(--eam-espresso);
  padding: clamp(70px, 12vh, 140px) clamp(22px, 6vw, 90px);
}
.shop-head { max-width: 60ch; margin-bottom: clamp(30px, 5vh, 54px); }
.shop-head .proof { display: block; opacity: .5; margin-bottom: 12px; }
.shop-head h2 { font-size: clamp(30px, 5vw, 54px); }
.shop-count {
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .5; margin: 12px 0 0;
}
.shop-head .rule { margin-top: 26px; width: 120px; }
.shop-empty { max-width: 52ch; opacity: .82; }

.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.pcard { cursor: pointer; }
.pcard:focus-visible { outline: 2px solid var(--eam-oxblood); outline-offset: 6px; }
.pcard-plate {
  aspect-ratio: 3 / 4; background: var(--eam-alabaster);
  overflow: hidden; display: grid; place-items: center;
}
.pcard-plate img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16,.84,.32,1); }
.pcard:hover .pcard-plate img { transform: scale(1.03); }
/* No photograph yet. Rather than a broken frame or a stock picture we do not
   own, the plate carries the house's initial in the display face. It reads as
   a deliberate mark, not as a missing image. */
.pcard-plate.is-blank { background: var(--eam-alabaster); }
.pcard-initial {
  font-family: var(--eam-font-display); font-weight: 300;
  font-size: clamp(64px, 9vw, 104px); line-height: 1;
  color: var(--eam-oxblood); opacity: .16;
}
.pcard-body { padding-top: 14px; display: grid; gap: 5px; }
.pcard-house { opacity: .55; }
.pcard-name { font-family: var(--eam-font-display); font-weight: 400;
  font-size: 20px; margin: 0; line-height: 1.2; }
.pcard-mode, .pcard-price {
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: .08em;
}
.pcard-mode { opacity: .5; text-transform: uppercase; }
.pcard-price { opacity: .9; }

/* ── the piece ──────────────────────────────────────────────────────── */
.panel-wide .piece-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 70px);
  padding: clamp(24px, 4vh, 50px) clamp(18px, 4vw, 46px) 100px;
  max-width: 1180px; margin: 0 auto;
}
@media (max-width: 820px) { .panel-wide .piece-wrap { grid-template-columns: 1fr; } }
.piece-plate {
  aspect-ratio: 3 / 4; background: rgb(var(--eam-bone-rgb) / .07);
  display: grid; place-items: center; overflow: hidden;
}
.piece-plate img { width: 100%; height: 100%; object-fit: cover; }
.piece-plate .pcard-initial { color: var(--eam-bone); opacity: .14; }
.piece-detail h2 { font-size: clamp(30px, 4.6vw, 52px); margin: 0 0 10px; }
.piece-cat { display: block; opacity: .55; margin-bottom: 20px; }
.piece-note { opacity: .84; max-width: 46ch; }
.piece-figure {
  font-family: var(--eam-font-display); font-size: clamp(26px, 3.4vw, 38px);
  margin: 26px 0 6px;
}
.piece-lead { display: block; opacity: .55; margin-bottom: 28px; }

.piece-sizes { margin-bottom: 26px; }
.piece-sizes .proof { display: block; opacity: .55; margin-bottom: 10px; }
.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  background: none; border: 1px solid rgb(var(--eam-bone-rgb) / .3);
  color: inherit; cursor: pointer; padding: 10px 15px;
  font-family: var(--eam-font-proof); font-size: 11px; letter-spacing: .08em;
  transition: border-color .25s ease, background .25s ease;
}
.size:hover { border-color: var(--eam-bone); }
.size.is-on { background: var(--eam-bone); color: var(--eam-oxblood); border-color: var(--eam-bone); }
.size.is-out { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.size-note { display: block; margin-top: 10px; opacity: .45; font-size: 12px; }
.size-warn { color: var(--eam-aurum); font-size: 13px; margin: 0 0 10px; }

.piece-cta .btn-buy { width: 100%; justify-content: center; text-align: center;
  display: inline-block; text-decoration: none; }
.piece-cta .btn-buy:hover { color: var(--eam-oxblood); }
.panel .btn { border-color: rgb(var(--eam-bone-rgb) / .5); }
.panel .btn::after { background: var(--eam-bone); }
.panel .btn:hover { color: var(--eam-oxblood); border-color: var(--eam-bone); }
.piece-terms { font-size: 13px; opacity: .66; margin: 14px 0 0; max-width: 44ch; }
.piece-facts { margin: 26px 0 0; display: grid; gap: 12px; }
.piece-facts div { display: grid; grid-template-columns: 10ch 1fr; gap: 14px; }
.piece-facts dt {
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase; opacity: .45;
}
.piece-facts dd { margin: 0; font-size: 14px; opacity: .86; }

/* ═══ 5b · THE REGISTER INSIDE THE HALLS ═════════════════════════════════
   Added 24 Aug 2026, when the six invented pieces came out of the catalogue.
   Each department now lists the real houses and models it sources.

   Everything here is set in currentColor and inherited alpha rather than in
   named palette colours, because the three halls sit on three different
   grounds — editorial on bone, vitrine on alabaster, vault on espresso — and
   one rule set has to read correctly on all of them. The only fixed colour is
   the gold hairline, which is a rule, never text.

   Typographic on purpose. There is no product photography for any of these
   271 models, and inventing some is how we got into this. A list that admits
   it is a list is more convincing to a connoisseur than a stock photograph. */

.dept-register {
  padding: clamp(20px, 4vh, 46px) clamp(22px, 6vw, 90px) clamp(70px, 12vh, 140px);
}
.reg-head { max-width: 62ch; }
.reg-head .proof { display: block; margin-bottom: 14px; }
.reg-head p { margin: 0; opacity: .78; font-size: 15.5px; max-width: 56ch; }
.reg-head .rule { margin-top: 30px; width: 120px; }

.reg-group { margin-top: clamp(34px, 6vh, 64px); }
.reg-sub {
  font-family: var(--eam-font-proof);
  font-size: 10px; font-weight: 400;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .5; margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid currentColor;
}

/* Houses run in columns and the models flow under each. On a phone it
   collapses to one column, which is the right reading order anyway. */
.reg-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(26px, 3vw, 44px);
  align-items: start;
}
.reg-sub { grid-column: 1 / -1; }

.reg-house-name {
  font-family: var(--eam-font-display);
  font-weight: 400; font-size: 21px; line-height: 1.2;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--eam-aurum);   /* hairline — never text */
}
.reg-models { list-style: none; margin: 0; padding: 0; }
.reg-models li + li { border-top: 1px solid currentColor; }
.reg-models li { border-color: rgb(from currentColor r g b / .12); }

.reg-models a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0;
  color: inherit; text-decoration: none;
  transition: opacity .3s ease;
}
.reg-model { font-size: 14.5px; opacity: .88; }
.reg-flag {
  font-family: var(--eam-font-proof); font-size: 8.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--eam-aurum);
  opacity: .8; white-space: nowrap;
}
/* The call to action carries no colour of its own and only appears on hover
   or keyboard focus — 271 of these shouting at once would be a price list,
   which is precisely what this is not. */
.reg-cta {
  margin-left: auto;
  font-family: var(--eam-font-proof); font-size: 8.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
.reg-models a:hover .reg-cta,
.reg-models a:focus-visible .reg-cta { opacity: .62; transform: none; }
.reg-models a:hover .reg-model { opacity: 1; }

.reg-foot { margin-top: clamp(44px, 7vh, 80px); }

/* Fallback for engines without relative colour syntax: a flat hairline that
   is legible on both the light halls and the dark one. */
@supports not (color: rgb(from #000 r g b / .5)) {
  .reg-models li + li { border-top-color: rgba(46,36,31,.14); }
  [data-layout="vault"] .reg-models li + li { border-top-color: rgba(247,244,239,.16); }
}

@media (max-width: 640px) {
  .reg-group { grid-template-columns: 1fr; }
  .reg-cta { opacity: .45; transform: none; }   /* no hover on a phone */
}

/* ═══ 6 · THE HOUSE — footer world ═══════════════════════════════════════ */

#house {
  position: relative; z-index: 2;
  background: var(--eam-oxblood);
  color: var(--eam-bone);
  padding: clamp(70px, 12vh, 150px) clamp(22px, 6vw, 90px) 46px;
}
.maison-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  max-width: 1280px; margin: 0 auto;
}
.maison-grid h3 { font-size: clamp(24px, 2.6vw, 36px); margin-bottom: 20px; }
.maison-grid p { opacity: .84; max-width: 46ch; }
.maison-col .proof { color: var(--eam-aurum); margin-bottom: 18px; display: block; }
.maison-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* The policy links under The Salon. Set apart from the list above them by a
   gold hairline, and underlined on hover only — a footer that shouts is a
   footer nobody reads. */
.maison-col .maison-links {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(183,154,92,.35);
}
.maison-col .maison-links a {
  color: inherit; text-decoration: none; opacity: .78;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: opacity .3s ease, border-color .3s ease;
}
.maison-col .maison-links a:hover { opacity: 1; border-bottom-color: var(--eam-aurum); }

/* Footer legal line. Gold underline on hover, never gold text on this ground. */
.maison-foot .proof a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(247,244,239,.3); }
.maison-foot .proof a:hover { border-bottom-color: var(--eam-aurum); }
.maison-col li { opacity: .84; font-size: 14px; }

.signup { display: flex; gap: 0; margin-top: 24px; max-width: 380px; }
.signup input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 1px solid rgba(247,244,239,.34);
  border-right: 0;
  color: var(--eam-bone);
  padding: 13px 16px;
  font-family: var(--eam-font-body); font-size: 14px;
  border-radius: 0;
}
.signup input::placeholder { color: rgba(247,244,239,.5); }
.signup input:focus { outline: none; border-color: var(--eam-aurum); }
.signup button {
  background: var(--eam-bone); color: var(--eam-oxblood);
  border: 1px solid var(--eam-bone); cursor: pointer;
  padding: 0 22px;
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
}
.signup-note { font-size: 12px; opacity: .6; margin-top: 12px; }

.maison-foot {
  max-width: 1280px; margin: clamp(50px, 8vh, 90px) auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(247,244,239,.16);
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.maison-foot .proof { opacity: .6; }
/* 116px was set for the old 800x240 stand-in. The signed lockup is 940x190 —
   wider and shorter — so the width goes up to hold the same optical weight. */
.maison-foot img { width: 148px; height: auto; opacity: .9; }

/* ═══ 7 · BAG DRAWER ═════════════════════════════════════════════════════ */

.scrim {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(46,36,31,.62);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 800;
  width: min(440px, 100vw);
  background: var(--eam-bone);
  color: var(--eam-espresso);
  transform: translateX(101%);
  transition: transform .75s cubic-bezier(.16,.84,.32,1);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: none; }

.drawer-head {
  padding: 26px clamp(22px, 4vw, 34px);
  border-bottom: 1px solid rgba(74,22,32,.14);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-head h2 { font-size: 24px; letter-spacing: .1em; }
.icon-btn {
  background: none; border: 0; cursor: pointer; padding: 6px;
  font-size: 19px; line-height: 1; opacity: .6;
  transition: opacity .35s ease;
}
.icon-btn:hover { opacity: 1; }

.drawer-body { flex: 1; overflow-y: auto; padding: 0 clamp(22px, 4vw, 34px); }
.drawer-empty { padding: 60px 0; text-align: center; opacity: .55; }

.line {
  display: grid; grid-template-columns: 74px 1fr auto;
  gap: 16px; align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(74,22,32,.1);
}
.line img { width: 74px; aspect-ratio: 3/4; object-fit: cover; }
.line h4 { margin: 0 0 4px; font-family: var(--eam-font-display); font-size: 18px; font-weight: 400; }
.line .proof { opacity: .55; display: block; margin-bottom: 8px; }
.qty { display: flex; align-items: center; gap: 12px; }
.qty button {
  width: 24px; height: 24px; border: 1px solid rgba(74,22,32,.3);
  background: none; cursor: pointer; line-height: 1;
  display: grid; place-items: center; font-size: 13px;
}
.qty span { font-family: var(--eam-font-proof); font-size: 12px; min-width: 14px; text-align: center; }
.line-price { font-family: var(--eam-font-display); font-size: 17px; white-space: nowrap; }
.line-remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--eam-font-proof); font-size: 9px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .45; margin-top: 8px; text-decoration: underline;
  text-underline-offset: 3px;
}
.line-remove:hover { opacity: .85; }

.drawer-foot {
  padding: 24px clamp(22px, 4vw, 34px) 30px;
  border-top: 1px solid rgba(74,22,32,.14);
}
.subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.subtotal b { font-family: var(--eam-font-display); font-size: 25px; font-weight: 400; }
.drawer-note { font-size: 12px; opacity: .55; margin: 0 0 20px; }
.drawer-foot .btn { width: 100%; text-align: center; }

/* ═══ 8 · QUICK VIEW ═════════════════════════════════════════════════════ */

.modal {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  padding: clamp(14px, 4vw, 46px);
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal-card {
  position: relative;
  background: var(--eam-bone); color: var(--eam-espresso);
  width: min(940px, 100%); max-height: 90vh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(18px);
  transition: transform .7s cubic-bezier(.16,.84,.32,1);
}
.modal.is-open .modal-card { transform: none; }
.modal-card .piece-plate { aspect-ratio: 3/4; }
.modal-card .piece-body { padding: clamp(28px, 4vw, 52px); }
.modal-close { position: absolute; top: 12px; right: 14px; z-index: 3; }

.variants { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.variants button {
  border: 1px solid rgba(74,22,32,.3); background: none; cursor: pointer;
  padding: 9px 16px;
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  transition: border-color .4s ease, background .4s ease, color .4s ease;
}
.variants button[aria-pressed="true"] {
  background: var(--eam-oxblood); border-color: var(--eam-oxblood);
  color: var(--eam-bone);
}

/* ═══ 9 · CHECKOUT ═══════════════════════════════════════════════════════ */

.checkout {
  position: fixed; inset: 0; z-index: 850;
  background: var(--eam-bone); color: var(--eam-espresso);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.checkout.is-open { opacity: 1; visibility: visible; }
.checkout-inner {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(70px, 10vh, 120px) clamp(22px, 5vw, 60px) 90px;
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(34px, 6vw, 84px);
}
.checkout h2 { font-size: clamp(30px, 4vw, 52px); margin-bottom: 8px; }
.checkout fieldset { border: 0; padding: 0; margin: 0 0 34px; }
.checkout legend {
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .55; padding: 0 0 16px;
}
.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 6px;
  font-family: var(--eam-font-proof); font-size: 9px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase; opacity: .55;
}
.field input, .field select {
  width: 100%; padding: 13px 15px;
  border: 1px solid rgba(74,22,32,.24); border-radius: 0;
  background: transparent; color: inherit;
  font-family: var(--eam-font-body); font-size: 15px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--eam-aurum); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.summary {
  background: var(--eam-alabaster);
  padding: clamp(26px, 3vw, 40px);
  align-self: start; position: sticky; top: 40px;
}
.summary h3 { font-size: 22px; margin-bottom: 20px; }
.summary .line { grid-template-columns: 56px 1fr auto; }
.summary .line img { width: 56px; }
.summary .qty, .summary .line-remove { display: none; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 20px; margin-top: 8px;
  border-top: 1px solid rgba(74,22,32,.18);
}
.summary-total b { font-family: var(--eam-font-display); font-size: 27px; font-weight: 400; }
.checkout .btn { width: 100%; text-align: center; margin-top: 22px; }
.stub-note {
  margin-top: 20px; font-size: 12px; opacity: .55;
  border-left: 1px solid var(--eam-aurum); padding-left: 14px;
}

/* ═══ 10 · RESPONSIVE ════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .modal-card,
  .checkout-inner { grid-template-columns: 1fr; }
  .summary { position: static; }
  .editorial-piece { grid-template-columns: 1fr; min-height: 0; }
  .editorial-piece:nth-child(even) > .piece-plate { order: 0; }
  .piece-plate { aspect-ratio: 4/5; }
  .maison-grid { grid-template-columns: 1fr; }
  .vitrine-row, .vault-row { grid-template-columns: 1fr; }
  #ch-arrival { --h: 340vh; }
  #ch-maison  { --h: 150vh; }
  #ch-threshold { --h: 130vh; }
  .chapter[data-mode="scrub"]   { --h: 210vh; }
  .chapter[data-mode="reverse"] { --h: 170vh; }
  .topbar-nav button { display: none; } /* the hall is the navigation on mobile */
  /* ...but the Register has no door in the hall, so its link stays. */
  .topbar-nav a { display: inline; }
  .piece-num { font-size: 92px; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .door-label b { font-size: 12px; }
  .door-label i { display: none; }      /* the roman numeral is noise at this size */
}

/* ═══ 11 · REDUCED MOTION ════════════════════════════════════════════════
   No pinning, no scrubbing, no sweep. The films collapse to their poster
   frames and the page becomes an ordinary vertical document. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .topbar { opacity: 1; }            /* nothing drives it when the scrub is off */
  .arrival-scroll { display: none; }
  /* No scrubbing: the canvas holds the hall and every chapter collapses to a
     single screen, so the page becomes an ordinary vertical document. */
  .chapter { height: auto !important; }
  .chapter[data-mode="scrub"], .chapter[data-mode="reverse"],
  .chapter[data-mode="dissolve"] { display: none; }
  .chapter .pinned { position: relative; height: 78vh; }
  .rise { opacity: 1; transform: none; }
  .rule { transform: scaleX(1); }
  .overture-mark .stroke { stroke-dashoffset: 0; animation: none; }
}