/* Cormorant Garamond, served from this domain — no third-party request.
   One family across the house: its high stroke contrast and fine, sharp serifs
   are the closest free relative of the LIOR wordmark. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-600.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-300-italic.woff2) format("woff2")}

/* LIOR — shared across every room of the house */

:root {
  --ground: #040302;
  --ground-2: #070504;
  --gold-hot: #fff1d2;
  --gold: #e6c68a;
  --gold-deep: #a97f47;
  --gold-text: #d8bf8a;
  /* Two metals, used as accents against the gold: brass is the metal at rest —
     marks, rules, numerals, the edge of a mount. Champagne is the metal lit —
     the moment a line is drawn open, a tick reaches out, a name is spoken. */
  --brass: #b08d57;
  --brass-deep: #8a6d3f;
  --champagne: #f2e3c6;
  --champagne-dim: #dccdb0;
  --ink: #e9dfc9;
  --mist: #b0a693;
  --mist-dim: #857c68;   /* 4.83:1 on the ground — was 4.07, just short */
  --line: rgba(216, 191, 138, .3);
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --caps: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --gutter: clamp(24px, 7vw, 132px);
  --bar: clamp(62px, 8vh, 84px);
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: var(--bar); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--mist);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible {
  outline: 1px solid var(--champagne); outline-offset: 5px;
  border-radius: 1px;
}
/* iOS paints its own grey box on tap; the house has its own hover states */
a, button, select, input, label, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
::selection { background: rgba(176,141,87,.32); color: var(--gold-hot); }

/* one room dissolving into the next, where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .55s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .85s cubic-bezier(0,0,.2,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

h1.eyebrow, h2.eyebrow { font-size: clamp(12px, .98vw, 15px); }
.eyebrow {
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(12px, .98vw, 15px);
  letter-spacing: .4em; text-indent: .4em;
  text-transform: uppercase; color: var(--gold-text);
  margin: 0;
}
.rule { width: 1px; height: 54px; background: linear-gradient(180deg, var(--brass), rgba(176,141,87,.15) 70%, transparent); margin: 0 auto; }

/* ---------------- FLUTED BRASS ----------------
   The wall behind the house: vertical brass reeds, with light drifting slowly
   across them. The reeds themselves never move — only the light does, and it
   moves on the compositor (transform and opacity alone), so nothing is repainted
   as it travels. The reeds are a repeating gradient rather than an image, so the
   whole thing costs nothing to load. */
:root { --flute: clamp(11px, 1.15vw, 19px); }

.reeds {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background:
    /* the flutes at rest: a dark seam, a shadowed face, a half-lit crown */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.80) 0,
      rgba(0,0,0,.80) calc(var(--flute) * .05),
      rgba(104, 76, 46, .52) calc(var(--flute) * .20),
      rgba(206, 166, 114, .62) calc(var(--flute) * .46),
      rgba(120, 88, 52, .44) calc(var(--flute) * .78),
      rgba(0,0,0,.80) var(--flute)),
    var(--ground);
  opacity: .58;
}
/* On the entrance only, the fluted wall stands a shade brighter — the room the
   name is spoken in should read lit, not shadowed, without touching how any
   other room in the house is lit. */
body.is-entrance { background: #14100a; }
body.is-entrance .reeds {
  opacity: .92;
  background:
    repeating-linear-gradient(90deg,
      rgba(46, 34, 22, .70) 0,
      rgba(46, 34, 22, .70) calc(var(--flute) * .05),
      rgba(164, 126, 78, .66) calc(var(--flute) * .20),
      rgba(236, 202, 152, .82) calc(var(--flute) * .46),
      rgba(176, 138, 88, .60) calc(var(--flute) * .78),
      rgba(46, 34, 22, .70) var(--flute)),
    #14100a;
}
/* The room the reeds stand in: light floods from high on the left and falls away
   into deep brown at the foot of the page. It is what makes the wall read as a
   tall panel lit from above rather than a flat plane. */
.reeds::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(197deg,
      transparent 0%,
      transparent 34%,
      rgba(10, 7, 4, .42) 58%,
      rgba(5, 3, 2, .84) 80%,
      rgba(3, 2, 1, .96) 100%);
  pointer-events: none;
}
body.is-entrance .reeds::before {
  background:
    linear-gradient(197deg,
      transparent 0%,
      transparent 46%,
      rgba(24, 18, 11, .16) 66%,
      rgba(16, 12, 7, .36) 84%,
      rgba(12, 9, 5, .48) 100%);
}
/* The light that falls on them. It is not a blob over the wall — it is the wall
   again, in its lit state, shown only where the light pools. That is what makes
   the reeds flare rather than the whole plane brightening. */
.reed-light {
  position: absolute; top: -48%; left: -30%;
  width: 66%; height: 200%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc(var(--flute) * .08),
      rgba(120, 92, 52, .30) calc(var(--flute) * .22),
      rgba(255, 240, 206, 1) calc(var(--flute) * .46),
      rgba(176, 141, 87, .34) calc(var(--flute) * .74),
      rgba(0,0,0,0) var(--flute));
  -webkit-mask-image: radial-gradient(42% 46% at 48% 38%,
    #000 0, rgba(0,0,0,.62) 40%, transparent 76%);
  mask-image: radial-gradient(42% 46% at 48% 38%,
    #000 0, rgba(0,0,0,.62) 40%, transparent 76%);
  mix-blend-mode: screen;
  will-change: transform;
  animation: reed-drift 46s cubic-bezier(.45,0,.55,1) infinite alternate;
}
/* a second, cooler fall of light, out of step with the first */
.reed-light.b {
  top: -30%; left: 40%; width: 52%; height: 180%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc(var(--flute) * .08),
      rgba(104, 84, 56, .20) calc(var(--flute) * .22),
      rgba(242, 227, 198, .58) calc(var(--flute) * .46),
      rgba(150, 124, 84, .22) calc(var(--flute) * .74),
      rgba(0,0,0,0) var(--flute));
  -webkit-mask-image: radial-gradient(46% 44% at 50% 50%,
    #000 0, rgba(0,0,0,.45) 44%, transparent 74%);
  mask-image: radial-gradient(46% 44% at 50% 50%,
    #000 0, rgba(0,0,0,.45) 44%, transparent 74%);
  animation: reed-drift-b 62s cubic-bezier(.45,0,.55,1) infinite alternate;
}
/* the warmth the pooled light throws onto the air around it */
.reeds::after {
  content: ""; position: absolute; inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc(var(--flute) * .08),
      rgba(178, 138, 84, .52) calc(var(--flute) * .22),
      rgba(255, 242, 214, 1) calc(var(--flute) * .46),
      rgba(214, 172, 112, .52) calc(var(--flute) * .74),
      rgba(0,0,0,0) var(--flute)),
    radial-gradient(64% 56% at 26% 14%, rgba(214, 166, 96, .48), transparent 74%);
  -webkit-mask-image: radial-gradient(86% 72% at 22% 6%,
    #000 0, rgba(0,0,0,.72) 34%, rgba(0,0,0,.24) 62%, transparent 84%);
  mask-image: radial-gradient(86% 72% at 22% 6%,
    #000 0, rgba(0,0,0,.72) 34%, rgba(0,0,0,.24) 62%, transparent 84%);
  mix-blend-mode: screen; pointer-events: none;
}
/* The light travels sideways in whole flutes, so the reeds it carries stay in
   register with the reeds behind: the wall never appears to slide, only the
   pool of light crosses it. Vertical drift is free — the flutes run that way. */
@keyframes reed-drift {
  from { transform: translate3d(calc(var(--flute) * -4), -4%, 0); }
  to   { transform: translate3d(calc(var(--flute) * 46), 5%, 0); }
}
@keyframes reed-drift-b {
  from { transform: translate3d(calc(var(--flute) * 8), 6%, 0); }
  to   { transform: translate3d(calc(var(--flute) * -34), -6%, 0); }
}
/* the rooms are quieter than the entrance — the wall is only felt there, and
   the middle of the page, where the reading happens, is quieter still */
body:not(.is-entrance) .reeds { opacity: .22; }
body:not(.is-entrance) .reeds::after {
  background: radial-gradient(46% 40% at 50% 46%, rgba(4,3,2,.85), transparent 72%);
  -webkit-mask-image: none; mask-image: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .reed-light { animation: none; transform: translate3d(calc(var(--flute) * 18), 0, 0); }
  .reed-light.b { animation: none; transform: translate3d(calc(var(--flute) * -12), 0, 0); }
}

/* The fillet — the ruled brass frame — has been taken off the walls. The inset
   it defined is kept as a measure, because the rooms are still set in from the
   edge of the window by it. */
:root { --fillet: clamp(14px, 2.2vw, 32px); }

@media (max-height: 560px) { :root { --fillet: 10px; } }

/* ---------------- THE MASTHEAD ---------------- */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 40;
  height: var(--bar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  /* no backdrop-filter: on a sticky/overflow-hidden stage iOS and Chromium both
     leave a ghost copy of the filtered layer, and it also makes the bar the
     containing block for anything fixed inside it. A gradient alone reads the
     same over a page this dark. */
  background: linear-gradient(180deg, rgba(4,3,2,.96), rgba(4,3,2,.72) 52%, rgba(4,3,2,.28) 82%, transparent);
}
/* the way home: a comfortable target, not just the glyph */
.masthead .mark { display: flex; align-items: center; flex: none; height: 100%; padding: 0 18px 0 6px; margin-left: -6px; }
.masthead .mark svg { width: 26px; height: auto; opacity: .85; transition: opacity .6s ease; }
.masthead .mark:hover svg { opacity: 1; }
.rooms {
  position: fixed; top: 0; right: var(--gutter); z-index: 45;
  height: var(--bar);
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px);
}
.rooms a {
  font-family: var(--caps); font-weight: 500; font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--mist-dim);
  padding: 10px 0; position: relative; transition: color .6s ease;
}
.rooms a:hover { color: var(--gold-text); }
.rooms a[aria-current="page"] { color: var(--gold-text); }
.rooms a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--champagne), var(--brass) 78%, transparent);
}

/* ---------------- ROOM SHELL ---------------- */
main { padding-top: var(--bar); position: relative; z-index: 1; }
.room {
  min-height: calc(100svh - var(--bar));
  padding: clamp(88px, 16vh, 190px) calc(var(--gutter) + var(--fillet) * .5) clamp(64px, 11vh, 120px);
  display: grid; align-content: center; justify-items: center;
  text-align: center; gap: clamp(26px, 4vh, 44px);
}
/* a wider measure now that each sentence starts its own line: two lines per
   sentence reads as a pause, four reads as a paragraph again */
.passage-body { display: grid; gap: 1.7em; max-width: 42ch; }
/* Each sentence begins on its own line. A sentence that runs past the measure
   still wraps, but it never starts mid-line after a full stop — the pause after
   the stop is held by the line break rather than a space. */
.passage-body p span { display: block; }
.passage-body p span + span { margin-top: .42em; }
.passage-body p {
  /* Cormorant runs small and light for its size, so the reading sizes are set
     well above a normal serif's and the measure is kept short. */
  margin: 0; font-size: clamp(19px, 1.5vw, 25px); line-height: 1.64;
  color: #f2ead8; font-weight: 400; letter-spacing: .004em; text-wrap: pretty;
}
.passage-body p.soft { color: #d2c7ae; }
.passage-body p.closing { font-style: italic; color: var(--gold-text); margin-top: .7em; font-size: clamp(19px, 1.5vw, 25px); }

/* The passage onward. The rule runs out from the word and is closed by a small
   lozenge, which travels with it — a drawn gesture rather than an arrow. */
.onward {
  margin-top: clamp(40px, 7vh, 80px);
  position: relative;
  display: inline-flex; align-items: center; gap: clamp(16px, 1.8vw, 24px);
  font-family: var(--caps); font-weight: 500; font-size: clamp(12px, .95vw, 14.5px);
  letter-spacing: .36em; text-indent: .36em; text-transform: uppercase;
  color: var(--gold-text);
  padding: 14px 0;
  transition: color .7s ease, letter-spacing .7s cubic-bezier(.16,.7,.2,1);
}
.onward-rule {
  position: relative; display: block; width: clamp(48px, 6vw, 88px); height: 1px; flex: none;
  background: linear-gradient(90deg, var(--brass), rgba(176,141,87,.28));
  transition: width .8s cubic-bezier(.16,.7,.2,1), background .8s ease;
}
.onward-rule::after {
  content: ""; position: absolute; right: -3px; top: -2.5px;
  width: 6px; height: 6px; rotate: 45deg;
  background: var(--brass);
  transition: background .8s ease, right .8s cubic-bezier(.16,.7,.2,1);
}
.onward:hover, .onward:focus-visible { color: var(--gold-hot); letter-spacing: .42em; text-indent: .42em; }
.onward:hover .onward-rule, .onward:focus-visible .onward-rule {
  width: clamp(76px, 10vw, 140px);
  background: linear-gradient(90deg, var(--champagne), rgba(242,227,198,.45));
}
.onward:hover .onward-rule::after, .onward:focus-visible .onward-rule::after { background: var(--champagne); }

/* ---------------- THE ENTRANCE ---------------- */
body.is-entrance main { padding-top: 0; }
body.is-entrance .masthead { display: none; }
.entrance {
  min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: clamp(88px, 17vh, 180px) calc(var(--gutter) + var(--fillet) * .5) calc(clamp(88px, 17vh, 180px) + var(--fillet));
  position: relative; overflow: hidden;
  /* left partly open so the fluted wall reads through */
  background:
    radial-gradient(64% 50% at 50% 42%, rgba(126, 93, 45, .10), transparent 70%),
    /* ends open, not on a tone, so the entrance dissolves into the footer
       instead of stopping against it with a visible step — deeper and more
       even now, so the wall reads as dim rather than lit */
    linear-gradient(180deg, rgba(1,1,1,.93), rgba(2,1,1,.82) 46%, rgba(2,1,1,.68) 82%, rgba(1,1,1,.48));
}
.entrance-in { display: grid; justify-items: center; gap: clamp(22px, 3.2vh, 38px); }
/* The marks are sized against the screen, not against a fixed floor. The earlier
   clamps had desktop-sized minimums, so on a phone the minimum won and the
   wordmark took three fifths of the width. */
.entrance .monogram { width: clamp(42px, 10vw, 86px); filter: drop-shadow(0 0 22px rgba(230, 198, 138, .3)) contrast(1.12) saturate(1.08); }
.entrance .wordmark { width: clamp(102px, 23.5vw, 222px); filter: drop-shadow(0 0 26px rgba(230, 198, 138, .2)) contrast(1.12) saturate(1.08); }
.entrance .eyebrow { font-size: clamp(9.5px, 2.4vw, 16px); letter-spacing: .4em; text-indent: .4em; color: var(--gold); }
.descend {
  position: absolute; left: 50%; bottom: calc(var(--fillet) + clamp(20px, 3.2vh, 40px)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 14px; padding: 10px 20px;
  font-family: var(--caps); font-weight: 500; font-size: clamp(12.5px, 1vw, 15px);
  letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase; color: var(--mist); transition: color .7s ease;
}
.descend-rule { width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--line)); }
.descend-rule::after { content: ""; display: block; width: 1px; height: 14px; background: var(--champagne);
  animation: descend 3.4s ease-in-out infinite; }
@keyframes descend { 0%, 100% { transform: translateY(-44px); opacity: 0; } 40% { opacity: 1; } 75% { transform: translateY(0); opacity: 0; } }
.descend:hover { color: var(--gold-hot); }

/* ---------------- THE WORK ---------------- */
.pane {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.5) 0 1px, rgba(0,0,0,.22) 1px 3px,
      rgba(255,255,255,.02) 3px 6px, rgba(255,255,255,.05) 6px 8px,
      rgba(255,252,245,.42) 8px 9px, rgba(255,252,245,.1) 9px 10px,
      rgba(255,255,255,.02) 10px 12px),
    linear-gradient(180deg, rgba(255,240,214,.07), rgba(255,240,214,.02) 45%, rgba(255,236,205,.06));
  backdrop-filter: blur(7px) saturate(1.15) brightness(.92);
  -webkit-backdrop-filter: blur(7px) saturate(1.15) brightness(.92);
  transition: transform 4.8s cubic-bezier(.42,.02,.12,1);
  will-change: transform;
}
.pane.l { left: 0;  box-shadow: inset -1px 0 0 rgba(255,250,240,.28); }
.pane.r { right: 0; box-shadow: inset 1px 0 0 rgba(255,250,240,.28); transition-delay: .22s; }
.seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,246,220,.5), transparent);
  transition: opacity 1.8s ease .6s;
}
.shaft {
  position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,244,214,.16) 45%, rgba(255,250,232,.28) 50%, rgba(255,244,214,.16) 55%, transparent);
  transform: translate3d(-160%, 0, 0); opacity: 0;
  mix-blend-mode: screen; pointer-events: none;
}
@keyframes shaft {
  0%   { transform: translate3d(-160%, 0, 0); opacity: 0; }
  26%  { opacity: 1; }
  72%  { opacity: .75; }
  100% { transform: translate3d(320%, 0, 0); opacity: 0; }
}
.work-name {
  margin: 0 0 6px; font-weight: 500; font-family: var(--caps);
  font-size: clamp(30px, 3.2vw, 46px); letter-spacing: .1em; color: var(--ink);
}
.work-name .deva { font-family: var(--serif); letter-spacing: .02em; color: var(--gold-text); font-size: .78em; }
.work-archetype {
  margin: 0 0 clamp(40px, 7vh, 90px);
  font-family: var(--caps); font-weight: 500; font-size: clamp(12.5px, 1.1vw, 15px);
  letter-spacing: .36em; text-transform: uppercase; color: var(--gold-text);
}

/* ---------------- ENQUIRE ---------------- */
.enquiry-room {
  background:
    radial-gradient(50% 42% at 50% 100%, rgba(120, 88, 42, .14), transparent 72%),
    linear-gradient(180deg,
      rgba(4,3,2,0) 0, rgba(4,3,2,.72) clamp(70px, 9vh, 120px),
      rgba(7,5,4,.68) 55%, rgba(4,3,2,.86));
}
.enquiry-room h1 {
  margin: 0; font-weight: 300; font-style: italic;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.14; color: var(--ink); text-wrap: balance;
}
/* the house line, set here as it is at the entrance */
.welcome {
  margin: clamp(6px, 1.4vh, 16px) 0 0; max-width: min(100%, 34ch);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.8vw, 29px); line-height: 1.5;
  color: #f2ead8; letter-spacing: .01em; text-wrap: balance;
}
.lead { margin: 0; max-width: 40ch; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.66; color: #ece2cc; }

/* The enquiry itself. Each field is a ruled line, not a box — the form of a
   register rather than a checkout. The rule beneath is drawn twice: a faint one
   always, and a gold one that opens from the left as the field is entered. */
/* A display rule beats the browser's own [hidden] styling, so anything the page
   hides by setting .hidden must be told again in a rule of its own. Without
   this, the form stayed on screen after a successful send. */
[hidden] { display: none !important; }

form.enquiry {
  position: relative;
  width: min(100%, 560px);
  margin-top: clamp(28px, 4.5vh, 52px);
  display: grid; gap: clamp(22px, 3vh, 32px);
  padding: clamp(34px, 5vh, 56px) clamp(26px, 4vw, 52px) clamp(30px, 4.5vh, 48px);
  text-align: left;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(216,191,138,.07), transparent 70%),
    linear-gradient(180deg, rgba(216,191,138,.04), rgba(216,191,138,.012));
}
/* the form is drawn on a mount, marked at its corners like the plates elsewhere */
.enquiry-frame { position: absolute; inset: 0; pointer-events: none; }
.enquiry-frame::before, .enquiry-frame::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,191,138,.42) 18%, rgba(216,191,138,.42) 82%, transparent);
}
.enquiry-frame::before { top: 0; }
.enquiry-frame::after  { bottom: 0; }
.enquiry-frame .tick {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid rgba(216,191,138,.68);
  transition: border-color .9s ease;
}
.enquiry-frame .tick.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.enquiry-frame .tick.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.enquiry-frame .tick.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.enquiry-frame .tick.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
form.enquiry:focus-within .enquiry-frame .tick { border-color: var(--champagne); }
.field-row { display: grid; gap: clamp(20px, 2.8vh, 30px); }
@media (min-width: 720px) { .field-row { grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.6vw, 38px); } }

.field { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 11px; }
.field .line, .field .field-error { grid-column: 1 / -1; }
/* each field is an entry in a register, and its numeral lights once it is answered */
.field-no {
  font-family: var(--caps); font-style: normal; font-weight: 500;
  font-size: 11.5px; letter-spacing: .06em;
  color: var(--brass);
  min-width: 2.4ch;
  transition: color .7s ease;
}
.field:focus-within .field-no { color: var(--champagne); }
.field.done .field-no { color: var(--gold-text); }
.field label {
  font-family: var(--caps); font-weight: 500;
  font-size: 11.5px; letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase; color: #b8aa92;
  transition: color .55s ease;
}
.field:focus-within label { color: var(--gold-hot); }
.field.done label { color: #c4b79f; }

/* the line itself, carrying the drawn rule */
.field .line { position: relative; display: flex; align-items: baseline; gap: 10px; }
.field .line > input, .field .line > select { flex: 1 1 auto; min-width: 0; }
.field .line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(216,191,138,.42);
}
.field .line::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; z-index: 1;
  background: linear-gradient(90deg, var(--champagne), rgba(242,227,198,.4));
  transition: width .75s cubic-bezier(.16,.7,.2,1);
}
.field:focus-within .line::before { width: 100%; }

.field input, .field select {
  width: 100%; background: none; color: #fbf4e4;
  border: 0; outline: none;
  font-family: var(--serif); font-size: 21px; letter-spacing: .022em;
  padding: 9px 2px 12px;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: color .4s ease;
}
.field input::placeholder { color: var(--mist-dim); }

/* the list carries names as long as 'United Arab Emirates', so it is set a
   little smaller than the fields it sits beside and given room for the caret */
.field select { cursor: pointer; padding-right: 24px; font-size: clamp(18px, 1.34vw, 20.5px); }
.field select:invalid { color: var(--mist-dim); }
.field select option { background: #0a0806; color: #f2ead8; }
/* the caret, drawn rather than the platform's own */
.field .line.select::after { right: 0; }
.field .caret {
  position: absolute; right: 2px; bottom: 16px; width: 8px; height: 8px;
  border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass);
  rotate: 45deg; pointer-events: none;
  transition: border-color .55s ease, translate .55s ease;
}
.field:focus-within .caret { border-color: var(--champagne); translate: 0 2px; }

/* the mobile number wears its country's dial code */
.field .dial {
  flex: none; font-family: var(--serif); font-size: 21px; letter-spacing: .022em;
  color: var(--gold); padding-bottom: 12px; min-width: 2.6ch;
  transition: color .5s ease;
}

.field.bad .line::after { background: #8d5533; }
.field.bad .field-no { color: #b5714a; }
.field.bad input, .field.bad select { color: #e0a87f; }
.field.bad label { color: #b5714a; }
.field .field-error {
  margin: 3px 0 0; font-size: 15.5px; font-style: italic; color: #c99065; line-height: 1.5;
  animation: rise .5s ease both;
}

/* the submit, set as the same engraved plate the Collection uses */
button.enquiry-submit {
  position: relative; justify-self: center;
  margin-top: clamp(10px, 2vh, 22px);
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(18px, 2.3vh, 25px) clamp(36px, 4.6vw, 66px);
  background: none; border: 0; cursor: pointer;
  color: var(--gold-text); transition: color .9s ease;
}
button.enquiry-submit .toward-word { font-size: clamp(11.5px, .98vw, 14px); letter-spacing: .36em; text-indent: .36em; }
button.enquiry-submit:hover, button.enquiry-submit:focus-visible { color: var(--gold-hot); outline: none; }
button.enquiry-submit:hover .toward-word, button.enquiry-submit:focus-visible .toward-word { letter-spacing: .44em; text-indent: .44em; }
button.enquiry-submit:hover .tick, button.enquiry-submit:focus-visible .tick { inset: auto; width: 18px; height: 18px; border-color: var(--gold); }
button.enquiry-submit:hover .tick.tl, button.enquiry-submit:focus-visible .tick.tl { top: -7px; left: -7px; }
button.enquiry-submit:hover .tick.tr, button.enquiry-submit:focus-visible .tick.tr { top: -7px; right: -7px; }
button.enquiry-submit:hover .tick.bl, button.enquiry-submit:focus-visible .tick.bl { bottom: -7px; left: -7px; }
button.enquiry-submit:hover .tick.br, button.enquiry-submit:focus-visible .tick.br { bottom: -7px; right: -7px; }
button.enquiry-submit:hover .toward-plate::before, button.enquiry-submit:hover .toward-plate::after,
button.enquiry-submit:focus-visible .toward-plate::before, button.enquiry-submit:focus-visible .toward-plate::after {
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}
button.enquiry-submit[disabled] { color: var(--mist-dim); cursor: default; }
button.enquiry-submit[disabled] .tick { border-color: rgba(216,191,138,.2); }

.messages { width: min(100%, 560px); text-align: left; margin-top: 6px; }
.note { margin: 0; font-family: var(--caps); font-weight: 500; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; line-height: 2; color: var(--mist-dim); max-width: 56ch; }
.confirm { margin: 0; font-style: italic; color: var(--gold-text); font-size: 18px; line-height: 1.6; }
.confirm.error { color: #c08d63; }
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 640px) {
  .enquiry-room { text-align: center; }
  form.enquiry, .messages { text-align: left; }
  button.enquiry-submit { justify-self: stretch; }
  form.enquiry { padding: 28px 18px 26px; gap: 20px; }
  .field input, .field .dial { font-size: 19px; }
  .field select { font-size: 18px; }
  .field label { font-size: 10.5px; letter-spacing: .28em; text-indent: .28em; }
  .field-no { font-size: 11px; }
}

/* ---------------- FOOT ---------------- */
footer {
  position: relative; z-index: 1;
  display: grid; place-items: center; gap: 16px;
  padding: clamp(40px, 7vh, 70px) var(--gutter) clamp(44px, 8vh, 76px);
  /* no rule across the page: the wall carries on behind the footer, and the
     room above it dissolves into it rather than ending at a line */
}
.foot-mark { width: 36px; opacity: .7; transition: opacity 1s ease; }
footer:hover .foot-mark { opacity: 1; }
.foot-line { color: var(--champagne-dim); font-family: var(--caps); font-weight: 500; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--mist-dim); }

/* ---------------- RESPONSIVE ---------------- */
/* on any touch screen the whole bar height is the tap target */
@media (hover: none), (max-width: 1024px) {
  .rooms a { display: flex; align-items: center; height: 100%; padding: 0; }
  .rooms a[aria-current="page"]::after { bottom: 34%; }
}
@media (max-width: 720px) {
  /* three rooms fit the bar, so the menu is simply the bar */
  .masthead { padding: 0 var(--gutter); }
  .masthead .mark svg { width: 22px; }
  .rooms {
    gap: clamp(12px, 4.2vw, 22px);
    max-width: calc(100vw - var(--gutter) * 2 - 40px);
  }
  .rooms a {
    font-size: 10px; letter-spacing: .24em; text-indent: .24em;
    white-space: nowrap;
    display: flex; align-items: center; height: 100%; padding: 0;
  }
  .rooms a[aria-current="page"]::after { bottom: 34%; }
  .rooms a[aria-current="page"] { color: var(--gold-hot); }
}
@media (max-width: 360px) {
  .rooms { gap: 10px; }
  .rooms a { font-size: 9.5px; letter-spacing: .18em; text-indent: .18em; }
}
@media (max-width: 640px) {
  .work-name { font-size: 26px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .pane { transform: none !important; opacity: 0; }
  .seam { opacity: 0; }
  .shaft { display: none; }
  .descend-rule::after { animation: none; opacity: .6; transform: translateY(-22px); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   THE COLLECTION — built as a reel, not a page.
   A title card, then the work held full-frame while the words pass over it
   like titles. Nothing is beside anything; each thing has the screen alone.
   ========================================================================== */

/* --- the title card ------------------------------------------------------
   The name, the archetype, the question it asks — and then a line drawn down
   toward the work itself. Nothing else is on this screen. */
.title-card {
  min-height: calc(100svh - var(--bar));
  position: relative;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(12px, 2vh, 20px);
  padding: clamp(70px, 12vh, 130px) var(--gutter) clamp(64px, 11vh, 120px);
  text-align: center;
  background: radial-gradient(72% 52% at 50% 46%, rgba(92, 66, 30, .15), transparent 74%);
}
.title-card .work-name {
  margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 38px);
  font-family: var(--caps); font-weight: 400; color: var(--ink);
  font-size: clamp(38px, 7.2vw, 104px); line-height: 1;
  animation: title-in 3.2s cubic-bezier(.16,.7,.2,1) both;
}
/* the divider is the axis: each name is balanced against it, and the trailing
   letter-space of the Latin name is cancelled so the optical edge is the real one */
.title-card .latin { text-transform: uppercase; letter-spacing: .2em; margin-right: -.2em; }
.title-card .deva { font-family: var(--serif); letter-spacing: .02em; color: var(--gold-text); font-size: .82em; }
/* the divider between the two names — a drawn rule, not a typed pipe */
.title-card .divider {
  display: block; width: 1px; height: .82em; flex: none;
  background: linear-gradient(180deg, transparent, var(--brass) 20%, var(--champagne) 50%, var(--brass) 80%, transparent);
}
.title-card .work-archetype {
  margin: clamp(6px, 1.4vh, 14px) 0 0;
  font-family: var(--caps); color: var(--gold-text);
  font-size: clamp(10px, 1vw, 13px); letter-spacing: .56em; text-indent: .56em;
  text-transform: uppercase;
  animation: title-in 3s cubic-bezier(.16,.7,.2,1) .8s both;
}
/* the question the work asks, set as an inscription */
.title-question {
  position: relative;
  margin: clamp(32px, 6vh, 70px) 0 0; max-width: 30ch;
  font-style: italic; font-weight: 300; color: var(--gold-text);
  font-size: clamp(18px, 1.9vw, 30px); line-height: 1.62; letter-spacing: .012em;
  text-wrap: balance;
  animation: title-in 3.4s cubic-bezier(.16,.7,.2,1) 1.7s both;
}
.title-question::before {
  content: ""; position: absolute; left: 50%; top: clamp(-22px, -3.2vh, -14px);
  width: 46px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
@keyframes title-in { from { opacity: 0; letter-spacing: .34em; } to { opacity: 1; } }

/* The revelation is read here, on a clean screen, rather than laid over the
   work — the page says its piece first and then shows the thing. */
.title-revelation {
  display: grid; justify-items: center; gap: clamp(16px, 2.4vh, 28px);
  margin-top: clamp(34px, 6vh, 74px);
}
/* Only opacity and transform are animated. The earlier version eased
   letter-spacing on the whole block, which relays out the text on every frame —
   that is what made it arrive in steps instead of rising. */
.title-revelation > * {
  opacity: 0; transform: translate3d(0, 24px, 0);
  animation: rise 2s cubic-bezier(.16,.7,.2,1) both;
}
.title-revelation > :nth-child(1) { animation-delay: 1.1s; }
.title-revelation > :nth-child(2) { animation-delay: 1.65s; }
.title-revelation > :nth-child(3) { animation-delay: 2.25s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.title-revelation .cap { margin-bottom: clamp(2px, .8vh, 8px); }
.title-revelation .rev {
  margin: 0; color: #f2ead8; font-weight: 400;
  font-size: clamp(21px, 2.15vw, 36px); line-height: 1.5; max-width: 23ch;
  text-wrap: balance;
}
.title-revelation .rev.final { color: var(--gold-hot); font-style: italic; margin-top: .3em; }

/* The cue toward the work, drawn as an engraved plate: no box, only four corner
   marks — the registration ticks of a mount — with a hairline above and below
   that draws itself open, and a slow sheen crossing the word like light moving
   over metal. On hover the marks reach out and the plate lights. */
.toward {
  position: relative;
  margin-top: clamp(38px, 6.5vh, 80px);
  display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(19px, 2.4vh, 26px) clamp(40px, 5vw, 76px);
  color: var(--gold-text);
  transition: color .9s ease;
  animation: title-in 2.4s ease 3s both;
}
.toward-plate { position: absolute; inset: 0; pointer-events: none; }
/* the two hairlines, drawn from the centre outward */
.toward-plate::before, .toward-plate::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,141,87,.62) 22%, rgba(176,141,87,.62) 78%, transparent);
  transition: width 1.1s cubic-bezier(.16,.7,.2,1), background 1.1s ease;
}
.toward-plate::before { top: 0; }
.toward-plate::after  { bottom: 0; }

/* the corner marks */
.toward .tick {
  position: absolute; width: 11px; height: 11px;
  border: 0 solid var(--brass);
  transition: inset .85s cubic-bezier(.16,.7,.2,1), border-color .85s ease, width .85s ease, height .85s ease;
}
.toward .tick.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.toward .tick.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.toward .tick.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.toward .tick.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* light crossing the plate, on the compositor only */
.toward .sheen {
  position: absolute; inset: 0; overflow: hidden;
}
.toward .sheen::after {
  content: ""; position: absolute; top: -60%; left: -40%;
  width: 44%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,231,182,.055) 34%, rgba(255,231,182,.085) 50%, rgba(255,231,182,.055) 66%, transparent);
  transform: translate3d(-140%, 0, 0) rotate(14deg);
  animation: sheen 7.5s cubic-bezier(.5,0,.3,1) 5.5s infinite;
}
@keyframes sheen {
  0%   { transform: translate3d(-120%, 0, 0) rotate(14deg); }
  34%  { transform: translate3d(330%, 0, 0) rotate(14deg); }
  100% { transform: translate3d(330%, 0, 0) rotate(14deg); }
}

.toward-word {
  position: relative;
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(12.5px, 1.06vw, 15.5px);
  letter-spacing: .46em; text-indent: .46em; text-transform: uppercase;
  white-space: nowrap;
  transition: letter-spacing .9s cubic-bezier(.16,.7,.2,1), text-indent .9s cubic-bezier(.16,.7,.2,1);
}

.toward:hover, .toward:focus-visible { color: var(--gold-hot); }
.toward:hover .toward-word, .toward:focus-visible .toward-word { letter-spacing: .56em; text-indent: .56em; }
.toward:hover .tick, .toward:focus-visible .tick { inset: auto; width: 18px; height: 18px; border-color: var(--champagne); }
.toward:hover .tick.tl, .toward:focus-visible .tick.tl { top: -7px; left: -7px; }
.toward:hover .tick.tr, .toward:focus-visible .tick.tr { top: -7px; right: -7px; }
.toward:hover .tick.bl, .toward:focus-visible .tick.bl { bottom: -7px; left: -7px; }
.toward:hover .tick.br, .toward:focus-visible .tick.br { bottom: -7px; right: -7px; }
.toward:hover .toward-plate::before, .toward:hover .toward-plate::after,
.toward:focus-visible .toward-plate::before, .toward:focus-visible .toward-plate::after {
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}

/* --- the reel ---------------------------------------------------------- */
/* with nothing written over it the reel has no cards to give it height, so it
   is given its own: one screen of stillness on the work, then away. */
.reel { position: relative; min-height: 160svh; }
.stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0;
  background: #020101;
}
/* The whole photograph is kept, never cropped. What fills the screen beside it
   is a far-out-of-focus copy of itself, pushed back hard and masked away at the
   edges — so it reads as the light of the room the work hangs in, rather than a
   smeared second copy of the picture. */
/* the inlined stand-in sits on the figure itself until the photograph lands */
.frame { position: absolute; inset: 0; margin: 0; background: center/cover no-repeat; }
.frame .bed {
  position: absolute; inset: -12%;
  background: var(--bed) center/cover no-repeat;
  filter: blur(90px) brightness(.2) saturate(.55);
  transform: scale(1.18);
  -webkit-mask-image: radial-gradient(120% 78% at 50% 46%, #000 34%, rgba(0,0,0,.35) 76%, transparent 100%);
          mask-image: radial-gradient(120% 78% at 50% 46%, #000 34%, rgba(0,0,0,.35) 76%, transparent 100%);
}
/* a clean edge where the photograph meets the room, so the join is deliberate */
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(112% 76% at 50% 48%, transparent 52%, rgba(2,1,1,.62) 100%);
}
.frame img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: 100%;
  object-fit: contain;
  z-index: 1;
  transform: scale(1.05); filter: brightness(.55) saturate(.8) contrast(1.02);
  transition: transform 6.5s cubic-bezier(.16,.7,.2,1),
              filter 4.6s ease .4s,
              translate 2.8s cubic-bezier(.2,.6,.2,1);
}
.reel.open .frame img { transform: scale(1); filter: brightness(1.02) saturate(1.04) contrast(1.03); }
/* a very slow drift, so the frame is never quite still */
.reel.open .frame img { animation: drift 34s ease-in-out 6s infinite alternate; }
@keyframes drift { from { scale: 1; } to { scale: 1.045; } }

/* the glass, now across the whole frame */
.reel .pane {
  position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 3;
  transition: transform 5.6s cubic-bezier(.42,.02,.12,1);
}
.reel .pane.r { transition-delay: .3s; }
.reel.open .pane.l { transform: translate3d(-101%, 0, 0); }
.reel.open .pane.r { transform: translate3d(101%, 0, 0); }
.reel .seam { z-index: 4; transition: opacity 2.2s ease .8s; }
.reel.open .seam { opacity: 0; }
.reel .shaft { z-index: 5; }
.reel.open .shaft { animation: shaft 5.2s cubic-bezier(.3,.1,.2,1) 1.8s both; }

/* the veil — the frame sinks back whenever words are over it */
.veil {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    radial-gradient(130% 92% at 50% 44%, transparent 38%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(2,1,1,.5), transparent 18%, transparent 78%, rgba(2,1,1,.62));
  opacity: .5;
}


/* the letterbox closes as the work opens */
.bar {
  position: absolute; left: 0; right: 0; height: 0; z-index: 7; background: #010101;
  transition: height 4.2s cubic-bezier(.3,.1,.2,1) 1.2s;
  pointer-events: none;
}
.bar.top { top: 0; border-bottom: 1px solid rgba(176,141,87,.32); }
.bar.bottom { bottom: 0; border-top: 1px solid rgba(176,141,87,.32); }
.reel.open .bar { height: clamp(26px, 5.5vh, 62px); }

/* Beneath the work, the way on. Not a discreet mark at the edge — it is the one
   thing asked of anyone who has just looked at the piece, so it is set in the
   middle, plainly, and arrives once the glass has finished opening.

   The dark it stands in runs the full width and falls away upward, so it reads
   as the light leaving the foot of the wall rather than a panel laid on top. */
.stage-ask {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  min-height: clamp(180px, 34vh, 330px);
  display: grid; align-content: end; justify-items: center;
  gap: clamp(16px, 2.2vh, 26px);
  padding: 0 var(--gutter) clamp(52px, 9vh, 104px);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(2,1,1,.34) 26%,
    rgba(2,1,1,.72) 55%,
    rgba(2,1,1,.9) 78%,
    rgba(2,1,1,.94) 100%);
  opacity: 0; translate: 0 16px;
  transition: opacity 2s ease, translate 2s cubic-bezier(.16,.7,.2,1);
  pointer-events: none;
}
.reel.open .stage-ask {
  opacity: 1; translate: 0 0;
  transition-delay: 4.4s;
  pointer-events: auto;
}
.stage-ask > * { pointer-events: auto; }
/* it stands over a photograph, so it is lit a step brighter than the one on
   the title card, and its word stays centred when it spans the screen */
.stage-ask-plate { margin-top: 0; animation: none; justify-content: center; color: var(--gold-hot); }
.stage-ask-plate .tick { border-color: rgba(230,198,138,.8); }
.stage-ask-plate .toward-plate::before, .stage-ask-plate .toward-plate::after {
  background: linear-gradient(90deg, transparent, rgba(230,198,138,.68) 20%, rgba(230,198,138,.68) 80%, transparent);
}
.stage-ask-plate .toward-word { font-size: clamp(12px, 1vw, 14.5px); letter-spacing: .34em; text-indent: .34em; }
/* the chevron beneath keeps falling, so it is plainly further down the page */
.stage-ask-arrow {
  width: 9px; height: 9px;
  border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass);
  rotate: 45deg;
  animation: toward-fall 3.6s cubic-bezier(.4,0,.5,1) infinite;
}

@media (max-width: 640px) {
  .stage-ask { padding-bottom: clamp(44px, 8vh, 80px); gap: 14px; min-height: 40vh; }
  .stage-ask-plate { width: 100%; padding-left: 10px; padding-right: 10px; justify-content: center; }
  .stage-ask-plate .toward-word { font-size: 11.5px; letter-spacing: .24em; text-indent: .24em; }
}

/* film grain — one static layer, never animated */
.grain {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: var(--grain); background-size: 190px 190px;
}

/* Nothing is written over the work any more, so it is simply shown: no veil
   lift, no reframing, no recede.

   On a phone the photograph is portrait but the screen is more so, and letting
   it letterbox leaves a third of the screen empty. The wall either side of the
   niche carries nothing, so it is trimmed instead — the framed work, the arch
   and both vessels all stay in shot. */
@media (max-width: 640px) {
  .frame img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 38%;
  }
}

/* --- the small caps label, used on the title card and in the coda -------- */
.cap {
  position: relative; margin: 0; padding-bottom: 18px;
  font-family: var(--caps); font-weight: 500; font-size: clamp(11px, .92vw, 13px);
  letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase; color: var(--gold-text);
}
.cap::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: clamp(90px, 13vw, 190px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 25%, var(--champagne), var(--brass) 75%, transparent);
}

/* --- after the reel ----------------------------------------------------- */
/* The way on. It is the first thing under the work rather than a screen below
   it, and it is the largest thing on that screen — the reveal ends and the
   invitation is already there. */
.coda {
  align-content: start;
  padding-top: clamp(52px, 8vh, 96px);
  gap: clamp(16px, 2.4vh, 26px);
}
.coda-name {
  margin: 0; font-family: var(--caps); font-weight: 500;
  font-size: clamp(11px, .92vw, 13.5px); letter-spacing: .44em; text-indent: .44em;
  text-transform: uppercase; color: var(--gold-text);
}
/* The invitation. It was a text link between two hairlines and people read past
   it, so it is a door now: framed, lit, and the widest thing on the screen. */
.coda-lead {
  margin: 0 0 clamp(8px, 1.6vh, 18px); max-width: 32ch;
  font-size: clamp(19px, 1.55vw, 26px); line-height: 1.6;
  color: #ece3d0; font-weight: 400; font-style: italic;
}
.invitation {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(16px, 1.8vw, 26px);
  min-width: min(520px, 90vw);
  padding: clamp(24px, 3.1vh, 36px) clamp(36px, 4.4vw, 68px);
  border: 1px solid rgba(216,191,138,.42);
  background: linear-gradient(180deg, rgba(216,191,138,.07), rgba(216,191,138,.02));
  color: var(--gold-hot);
  transition: color .7s ease, border-color .7s ease, background .7s ease, box-shadow .7s ease;
  animation: invitation-breathe 6s ease-in-out 1.2s infinite;
}
@keyframes invitation-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(230,198,138,0); }
  50%      { box-shadow: 0 0 60px rgba(230,198,138,.15); }
}
.invitation-word {
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  white-space: nowrap;
}
.invitation-arrow {
  display: block; width: 10px; height: 10px; flex: none;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  rotate: 45deg; transition: translate .7s cubic-bezier(.2,.6,.2,1);
}
.invitation:hover, .invitation:focus-visible {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(230,198,138,.17), rgba(230,198,138,.05));
  box-shadow: 0 0 70px rgba(230,198,138,.2);
}
.invitation:hover .invitation-arrow { translate: 6px 0; }
.coda-note {
  margin: clamp(2px, .8vh, 8px) 0 0; font-family: var(--caps); font-weight: 500;
  font-size: clamp(10.5px, .82vw, 12.5px); letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase; color: var(--mist-dim);
}
/* the coda sits close behind the work, not a screen away from it */
.coda-rule {
  margin-top: clamp(46px, 8vh, 96px);
  width: 1px; height: clamp(40px, 7vh, 76px);
  background: linear-gradient(180deg, transparent, var(--line));
}

.held {
  margin: 0; font-family: var(--caps); font-weight: 500; font-size: clamp(12.5px, 1.2vw, 16px);
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  color: var(--gold-text); line-height: 2;
}
.held-soft {
  margin: 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.85; color: var(--mist); font-weight: 300; font-style: italic;
}

@media (max-width: 640px) {
  /* on a phone the axis has no room to breathe, so the pair centres as one group */
  .title-card .work-name {
    display: inline-flex; justify-content: center; align-items: center;
    font-size: clamp(32px, 10.2vw, 50px); gap: 14px;
  }
  .title-card .latin { letter-spacing: .14em; text-indent: .14em; margin-right: -.14em; }
  .title-card .deva { font-size: .86em; }
  .title-card .work-archetype { font-size: 11px; letter-spacing: .4em; text-indent: .4em; }
  .title-question { font-size: 17px; max-width: none; }
  .invitation { gap: 14px; min-width: 0; width: 100%; padding: 19px 20px; }
  .invitation-word { font-size: 13.5px; letter-spacing: .24em; text-indent: .24em; }
  .card p.line { font-size: 19px; max-width: none; }
  .card p.rev { font-size: 22px; max-width: none; }
}

/* the collection page on a phone: the frame goes behind, the words come forward,
   and the words are given a real measure instead of the desktop's half-screen */
@media (max-width: 899px) {
  .card p.rev { max-width: 22ch; margin-inline: auto; }
}
@media (max-width: 640px) {
  .title-card { padding-bottom: clamp(140px, 22vh, 200px); }
  .cap { font-size: 10px; letter-spacing: .36em; text-indent: .36em; }
  .coda { gap: clamp(18px, 3vh, 28px); padding-top: clamp(64px, 10vh, 100px); }
  .held { font-size: 11.5px; letter-spacing: .28em; text-indent: .28em; }
  .held-soft { font-size: 15px; max-width: 34ch; }
}

/* ---------------- A SHORT SCREEN ----------------
   A phone held sideways, or a small browser window, leaves barely 400px of height.
   Everything is set in viewport-relative type, so it is the vertical rhythm that
   has to give: the marks come down in size, the standing room closes up, and the
   cue at the foot of the entrance stops crossing the wordmark. */
@media (max-height: 560px) {
  :root { --bar: 54px; }

  .entrance { padding: 14px var(--gutter) 10px; }
  .entrance-in { gap: 10px; }
  .entrance .monogram { width: clamp(38px, 10.5vh, 56px); }
  .entrance .wordmark { width: clamp(112px, 29vh, 172px); }
  .entrance .eyebrow { font-size: 10px; letter-spacing: .34em; text-indent: .34em; }
  .descend { position: static; transform: none; gap: 6px; padding: 8px 20px 0; font-size: 11px; }
  .descend-rule { height: 20px; }

  .title-card { padding: 16px var(--gutter) 22px; gap: 6px; }
  .title-card .work-name { font-size: clamp(26px, 7.6vh, 44px); }
  .title-card .work-archetype { font-size: 9.5px; letter-spacing: .4em; text-indent: .4em; }
  .title-revelation { margin-top: clamp(12px, 3vh, 26px); gap: 9px; }
  .title-revelation .cap { font-size: 10px; padding-bottom: 12px; }
  .title-revelation .rev { font-size: clamp(16px, 4.6vh, 22px); line-height: 1.42; }
  .toward { margin-top: clamp(14px, 3.4vh, 30px); padding: 12px 30px; }

  .room { padding: 66px var(--gutter) 34px; gap: 14px; }
  .rule { height: 28px; }
  .passage-body { gap: .9em; }
  .passage-body p { font-size: 17px; line-height: 1.55; }
  .passage-body p span + span { margin-top: .3em; }
  .onward { margin-top: 26px; }

  .welcome { font-size: 18px; }
  form.enquiry { margin-top: 18px; gap: 16px; padding: 22px 20px 20px; }
  .field input, .field select, .field .dial { font-size: 17px; padding: 6px 2px 9px; }

  .stage-ask { min-height: 44vh; padding-bottom: 26px; gap: 10px; }
  .coda { padding-top: 46px; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .title-card .work-name, .title-card .work-archetype, .toward { animation: none; }
  .toward, .invitation { animation: title-in 0s both; }
  .reel.open .stage-ask { transition-delay: 0s; }
  .stage-ask-arrow { animation: none; }
  .title-revelation > * { animation: none; opacity: 1; transform: none; }
  .toward .sheen::after { animation: none; opacity: 0; }
  .reel .pane { transform: none !important; opacity: 0; }
  .reel .seam { opacity: 0; }
  .frame img { transform: none; filter: none; transition: none; animation: none; }
  .bar { height: clamp(26px, 5.5vh, 62px); transition: none; }
}

/* ---------------- THE LEGAL ROOMS ----------------
   Terms and notices are still the Maison speaking, so they are set in the house
   face — but at a reading size, ranged left, in a single narrow column. Nothing
   here is meant to be difficult to read. */
.room.legal { align-items: center; }
.legal-body {
  max-width: 62ch; margin-inline: auto; text-align: left;
  font-size: clamp(15px, 1.05vw, 17.5px); line-height: 1.85;
  color: var(--mist);
}
.legal-body > *:first-child { margin-top: 0; }
.legal-lede {
  font-style: italic; color: var(--gold-text);
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.7;
  margin: 0 0 2.6em; padding-bottom: 1.6em;
  border-bottom: 1px solid rgba(176,141,87,.22);
}
.legal-body h2 {
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(11px, .85vw, 12.5px); letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin: 3.1em 0 .9em;
}
.legal-body h3 {
  font-weight: 500; font-style: italic; font-size: clamp(16px, 1.1vw, 18.5px);
  letter-spacing: .01em; color: var(--champagne-dim); margin: 2.1em 0 .5em;
}
.legal-body p { margin: 0 0 1.15em; }
.legal-body ul, .legal-body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.legal-body li { margin: 0 0 .5em; padding-left: .3em; }
.legal-body ul { list-style: none; padding-left: 1.1em; }
.legal-body ul > li { position: relative; }
.legal-body ul > li::before {
  content: ""; position: absolute; left: -1.1em; top: .82em;
  width: 4px; height: 4px; rotate: 45deg; background: var(--brass);
}
.legal-body ol > li::marker { color: var(--brass); }
.legal-body strong { color: var(--champagne); font-weight: 500; }
.legal-body a { color: var(--gold-text); text-decoration: none; border-bottom: 1px solid rgba(176,141,87,.42); }
.legal-body a:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* a placeholder the Maison must still fill in */
.fill {
  color: var(--gold-hot); font-style: normal;
  background: rgba(176,141,87,.13); border-bottom: 1px dashed rgba(226,203,158,.5);
  padding: 0 .28em; border-radius: 1px;
}

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .95em; }
.legal-table th {
  text-align: left; font-family: var(--caps); font-weight: 500;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); padding: 0 1.2em .7em 0;
  border-bottom: 1px solid rgba(176,141,87,.3);
}
.legal-table td {
  vertical-align: top; padding: .85em 1.2em .85em 0;
  border-bottom: 1px solid rgba(176,141,87,.12);
}
.legal-table tr:last-child td { border-bottom: none; }
@media (max-width: 560px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table td { padding: .2em 0; border: none; }
  .legal-table td:last-child { color: var(--gold-text); font-style: italic; padding-bottom: 1.1em;
    border-bottom: 1px solid rgba(176,141,87,.12); margin-bottom: 1.1em; }
}

.legal-stamp {
  margin-top: 3em; padding-top: 1.4em;
  border-top: 1px solid rgba(176,141,87,.22);
  font-family: var(--caps); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--mist-dim);
}

/* the footer now carries the notices */
.foot-legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0 clamp(16px, 2.2vw, 30px); margin-top: .2em;
}
.foot-legal a {
  font-family: var(--caps); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--mist-dim); text-decoration: none;
  transition: color .5s ease;
  /* a comfortable target on a phone, without opening a gap on a desktop */
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.foot-legal a:hover { color: var(--gold-text); }

/* ---------------- CONSENT ----------------
   The one box on the form that must be ticked by hand. The native input is kept
   for the keyboard and the screen reader, and a drawn mark stands in its place. */
.field.consent { margin-top: .4em; }
.consent-line {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: 0 14px; cursor: pointer;
}
form.enquiry .consent-line input[type="checkbox"] {
  position: absolute; opacity: 0; margin: 0; padding: 0; border: 0;
  width: 1px; height: 1px; min-height: 0;
  clip-path: inset(50%); pointer-events: none; appearance: none;
}
.consent-box {
  width: 15px; height: 15px; margin-top: .35em; flex: none;
  border: 1px solid rgba(176,141,87,.5); position: relative;
  transition: border-color .4s ease, background .4s ease;
}
.consent-box::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--champagne); rotate: 45deg;
  opacity: 0; transform: scale(.4);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,.7,.2,1);
}
.consent-line input:checked + .consent-box { border-color: var(--champagne); }
.consent-line input:checked + .consent-box::after { opacity: 1; transform: scale(1); }
.consent-line input:focus-visible + .consent-box {
  border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(226,203,158,.22);
}
.consent-line:hover .consent-box { border-color: rgba(226,203,158,.8); }
.consent-text {
  font-size: clamp(12.5px, .95vw, 14.5px); line-height: 1.75;
  color: var(--mist-dim); letter-spacing: .015em;
  text-transform: none; font-variant: normal; font-family: var(--caps);
}
.consent-text a { color: var(--gold-text); text-decoration: none; border-bottom: 1px solid rgba(176,141,87,.45); }
.consent-text a:hover { color: var(--champagne); }
.field.consent.bad .consent-box { border-color: #c96a5a; }
.field.consent .field-error { margin-left: 29px; }

/* ---------------- THE RECEIVED CARD ----------------
   What stands where the form was. It answers in the same voice as the letter
   that is, by then, already on its way — and names the address it went to, so a
   mistyped one is caught here rather than never. */
.received {
  display: grid; justify-items: center;
  width: min(100%, 460px); margin: clamp(30px, 5vh, 56px) auto 0;
  text-align: center;
  animation: received-in 1.5s cubic-bezier(.16,.7,.2,1) both;
}
@keyframes received-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
.received-mark {
  width: 44px; height: auto; margin-bottom: clamp(20px, 3vh, 30px);
  filter: drop-shadow(0 0 22px rgba(230,198,138,.26));
}
.received-eyebrow {
  margin: 0; font-family: var(--caps); font-weight: 500;
  font-size: 10px; letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase; color: var(--gold);
}
.received-line {
  margin: clamp(14px, 2vh, 20px) 0 0;
  font-style: italic; font-weight: 300;
  font-size: clamp(23px, 2.35vw, 33px); line-height: 1.32;
  color: var(--champagne);
}
/* the salutation, standing alone as it does in the letter */
.received-named {
  margin: clamp(22px, 3.2vh, 34px) 0 clamp(12px, 1.6vh, 18px);
  font-style: italic; font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: .02em; color: var(--gold-text);
}
.received-rule {
  width: 44px; height: 1px; margin: clamp(26px, 3.6vh, 38px) auto clamp(22px, 3vh, 30px);
  background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--champagne) 50%, var(--brass) 70%, transparent);
}
.received-body {
  margin: 0; max-width: 34ch;
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.8;
  color: var(--mist);
}
.received-body.soft {
  margin-top: 0; font-size: clamp(13px, .95vw, 14.5px);
  line-height: 1.85; color: var(--mist-dim);
}
/* the address, set as the one fact on the card worth looking at twice */
.received-to {
  color: var(--gold-text); font-style: italic;
  border-bottom: 1px solid rgba(176,141,87,.32); padding-bottom: 1px;
  white-space: nowrap;
}
@media (max-width: 420px) { .received-to { white-space: normal; } }

/* the title sits beside the name, narrow, since an honorific is two letters */
.field-row.with-title { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .field-row.with-title { grid-template-columns: minmax(88px, .3fr) 1fr; }
}

/* a heading the page needs but the design does not show */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------- SMALL SMOOTHNESSES ----------------
   None of these change how the site looks standing still. They change how it
   feels while it is being used. */

/* a caret in the house metal, rather than the browser's blue */
:root { caret-color: var(--gold); accent-color: var(--brass); }

/* an anchored section should not arrive flush against the bar */
:target { scroll-margin-top: calc(var(--bar) + 24px); }

/* momentum scrolling inside the rooms on iOS, and no rubber-band flash of the
   white page behind */
html, body { overscroll-behavior-y: none; background-color: var(--ground); }

/* stop a long address or a long word from pushing a column sideways */
.legal-body, .received, .passage-body { overflow-wrap: break-word; }

/* the form fields settle rather than snap */
form.enquiry input, form.enquiry select {
  transition: color .4s ease, border-color .5s ease;
}

/* a printed copy of the notices should be readable, not a black rectangle */
@media print {
  .reeds, .masthead, .rooms, footer, .descend { display: none !important; }
  html, body { background: #fff !important; color: #111 !important; }
  .legal-body, .legal-body * { color: #111 !important; }
  .legal-body h2, .legal-body h3, h1.eyebrow { color: #000 !important; }
  .legal-body a { color: #000 !important; text-decoration: underline; }
  main { padding-top: 0 !important; }
  .room { padding: 0 !important; min-height: 0 !important; }
  .fill { background: none !important; border-bottom: 1px solid #999 !important; }
}

/* ---------------- THE WORK: the facts, beneath the name ---------------- */
.facts {
  margin: 0 auto clamp(10px, 2vh, 22px); padding: clamp(18px, 2.6vh, 28px) 0;
  width: min(100%, 560px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; gap: clamp(10px, 1.5vh, 15px);
}
.facts div {
  display: grid; grid-template-columns: minmax(118px, 38%) 1fr;
  column-gap: clamp(16px, 2.4vw, 32px); align-items: baseline; text-align: left;
}
.facts dt {
  font-family: var(--caps); font-weight: 500; text-transform: uppercase;
  font-size: clamp(10px, .78vw, 11.5px); letter-spacing: .3em; color: var(--brass);
  text-align: right;
}
.facts dd {
  margin: 0; font-family: var(--serif); font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.45; color: var(--ink);
}
.facts dd span { color: var(--mist); }
@media (max-width: 520px) {
  .facts { width: 100%; }
  .facts div { grid-template-columns: 1fr; row-gap: 3px; text-align: center; }
  .facts dt { text-align: center; }
}

/* ---------------- CHANNELS: WhatsApp and Instagram, quieter than the invitation ---------------- */
.channels {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(6px, 1.2vh, 14px);
}
.channel {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 190px; padding: 14px 26px;
  border: 1px solid var(--line); color: var(--champagne-dim); text-decoration: none;
  font-family: var(--caps); font-weight: 500; font-size: clamp(11px, .85vw, 12.5px);
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  transition: color .6s ease, border-color .6s ease, background .6s ease;
}
.channel svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: var(--brass);
  stroke-width: 1.1; stroke-linejoin: round; transition: stroke .6s ease;
}
.channel:hover, .channel:focus-visible {
  color: var(--gold-hot); border-color: var(--gold);
  background: rgba(230,198,138,.06);
}
.channel:hover svg, .channel:focus-visible svg { stroke: var(--gold); }
.note + .channels { margin-top: clamp(18px, 2.6vh, 28px); }
@media (max-width: 520px) {
  .channels { width: 100%; }
  .channel { flex: 1 1 140px; min-width: 0; padding: 14px 12px; letter-spacing: .24em; text-indent: .24em; }
}

/* ---------------- SCROLL SEAMS: the work hands over to the words without a hard edge ---------------- */
.coda { position: relative; isolation: isolate; }
.coda::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 16svh, 180px);
  pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, #020101, rgba(2,1,1,0));
}
.coda .coda-rule { margin-top: clamp(30px, 5vh, 60px); }
/* the lower letterbox edge drew a hard line exactly where the work hands over to the words */
.bar.bottom { border-top-color: transparent; }

/* ---------------- ANCHORED ARRIVALS: no strip of the previous room under the bar ----------------
   Reveal and "The work in detail" land each section flush at the top of the screen;
   the bar floats over it, so nothing of the section above shows through. */
#reel:target, #allocation:target, #reel, #allocation { scroll-margin-top: calc(-1 * var(--bar)); }
.coda { padding-top: calc(var(--bar) + clamp(28px, 5vh, 64px)); }
@media (max-width: 640px) { .coda { padding-top: calc(var(--bar) + clamp(24px, 4vh, 44px)); } }

/* ---------------- THE WALL, SLOWLY ALIVE ----------------
   A cinematic pace: the light crosses the reeds in under half a minute, a second
   fall moves against it, and the whole wall breathes — never fast enough to pull
   the eye from the words. */
.reed-light   { animation-duration: 28s; }
.reed-light.b { animation-duration: 38s; }
body:not(.is-entrance) .reeds { opacity: .34; }
/* a slow sweep of warm light across the whole wall, every page */
body:not(.is-entrance) .reeds .reed-light.b::after {
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(100deg, transparent 38%, rgba(255,226,170,.16) 50%, transparent 62%);
  animation: reed-sweep 22s ease-in-out infinite;
}
@keyframes reed-sweep {
  0%   { transform: translate3d(-40%, 0, 0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(40%, 0, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reeds, body:not(.is-entrance) .reeds, body:not(.is-entrance) .reeds .reed-light.b::after { animation: none; }
}

/* the entrance's dark veil carries on through the footer, so the page ends as one wall */
body.is-entrance footer {

  background: linear-gradient(180deg, rgba(1,1,1,.48), rgba(1,1,1,.56) 60%, rgba(1,1,1,.62));
}
/* the entrance wall is the heaviest layer on the site: give it its own compositing layer */
body.is-entrance .reeds { contain: strict; }

/* the asks arrive sooner: present, not withheld */
.toward { animation: title-in 1.4s ease 1.2s both; }
.stage-ask { transition: opacity 1.2s ease, translate 1.2s cubic-bezier(.16,.7,.2,1); }
.reel.open .stage-ask { transition-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .toward { animation: title-in 0s both; } }

/* ---------------- THE WORK: refinements ---------------- */
.facts { position: relative; gap: 0; padding: clamp(6px, 1vh, 10px) 0; }
.facts-cap {
  margin: clamp(6px, 1.4vh, 14px) 0 calc(-1 * clamp(6px, 1.2vh, 12px));
  font-family: var(--caps); font-weight: 500; text-transform: uppercase;
  font-size: clamp(9.5px, .74vw, 11px); letter-spacing: .44em; text-indent: .44em;
  color: var(--brass);
}
.facts div { padding: clamp(9px, 1.25vh, 13px) 0; border-top: 1px solid rgba(216,191,138,.08); }
.facts div:first-of-type { border-top: 0; }
.facts dt { padding-top: .2em; }
/* figures stand upright and in step: 43 × 27, 51, 15 */
.facts dd { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.facts dd span { color: var(--mist); }
.facts dd a {
  color: var(--champagne); text-decoration: none;
  border-bottom: 1px solid rgba(216,191,138,.4); transition: color .5s ease, border-color .5s ease;
}
.facts dd a:hover, .facts dd a:focus-visible { color: var(--gold-hot); border-color: var(--gold); }
@media (max-width: 520px) {
  .facts div { padding: 11px 0; }
}