/* ═══════════════════════════════════════════════════════════════════════════
   VELARI Tipo 12 — Lot 12
   Design system: an auction catalogue entry.

   Why it looks like this, so it can be defended:

   · PAPER, NOT BLACK. Every generated "premium" site is dark; the houses that
     actually sell cars for two million euros — Sotheby's, Gooding, Bonhams —
     print on paper. Bone stock also happens to be the best possible backdrop
     for a black car, because the silhouette does the work instead of the glow.

   · THE SERIF IS THE VOICE. Newsreader sets the prose, the figures and the lot
     title. A catalogue is a document, not a landing page, so the type behaves
     like body text with a display size, not like a poster.

   · NO MONOSPACE, ANYWHERE. Wide-tracked uppercase mono on every label is the
     single loudest tic in machine-made interfaces. Data is set in Archivo with
     tabular figures, which is what actually makes a table readable.

   · NO SECTION NUMBERING IN THE NAVIGATION. "01 Overture / 02 Silhouette" is a
     tell, not a wayfinding device. Folios sit at the foot of each section
     instead, where a printed page would put them.

   · RULES, NOT CARDS. Catalogues divide with hairlines and white space. There
     is not a single rounded rectangle with a background colour on this page.

   · ONE SPOT COLOUR (#a6371b), used the way a second plate is used in
     letterpress: lot number, active state, the rule under a live control.
     Never as a gradient, never as a fill for its own sake.

   · NIGHT IS THE PLATE SECTION. The lighting toggle does not switch on "dark
     mode" — it moves you into the glossy black plate signature bound into the
     middle of a printed catalogue, and the page follows the car.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens: daylight (paper) ───────────────────────────────────────────── */
:root {
  --paper:      #e9e4da;
  --paper-2:    #e3ddd1;
  --paper-3:    #dbd4c6;
  --ink:        #16130f;
  --ink-2:      #4a443c;
  --ink-3:      #7d766b;
  --rule:       rgba(22, 19, 15, 0.16);
  --rule-soft:  rgba(22, 19, 15, 0.09);
  --spot:       #a6371b;

  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw: 82rem;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --swap: 0.9s var(--ease); /* paper ⇄ plate */
}

/* ── Tokens: night (plate stock) ────────────────────────────────────────── */
/* Not an inverted palette. Plate paper is a warm near-black with a slightly
   cooler ink, because that is what a gloss signature looks like against the
   matte body of a catalogue. */
body[data-mode="night"] {
  --paper:      #14120f;
  --paper-2:    #1a1713;
  --paper-3:    #221e19;
  --ink:        #ece7dd;
  --ink-2:      #a49c90;
  --ink-3:      #746d63;
  --rule:       rgba(236, 231, 221, 0.18);
  --rule-soft:  rgba(236, 231, 221, 0.10);
  --spot:       #d1552c;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--serif);
  font-optical-sizing: auto;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1rem, 0.55vw + 0.88rem, 1.15rem);
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--swap), color var(--swap);
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--spot); color: var(--paper); }

:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }

/* ── Type primitives ────────────────────────────────────────────────────── */

/* Display sizes stay in the serif and keep a book-like line-height. Catalogues
   do not set headlines at 0.84 leading; they set them like large paragraphs. */
.h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  font-weight: 380;
  line-height: 1.14;
  letter-spacing: -0.012em;
  max-width: 21ch;
  text-wrap: pretty;
}
.h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(1.08rem, 0.7vw + 0.95rem, 1.35rem);
  line-height: 1.55;
  max-width: 46ch;
  color: var(--ink);
}
.body { max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
.body--tight { max-width: 38ch; }

/* The one place small uppercase is allowed: table and field headers, in the
   sans, at a restrained 0.06em — not the 0.2em that reads as machine-made. */
.label,
.panel__label > span,
.field label,
.colophon h4,
.desc__notes h3 {
  font-family: var(--sans);
  font-variation-settings: "wdth" 100;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Folio: the page number at the foot of a printed section. */
.folio {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-align: center;
  padding-block: clamp(2rem, 5vh, 3.5rem) 0;
}
.sec--lot .folio { text-align: left; }

/* ── WebGL layer ────────────────────────────────────────────────────────── */
#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
body.is-ready #scene-canvas { opacity: 1; }
html.no-webgl #scene-canvas { display: none; }

/* Paper grain. On bone stock this reads as tooth in the sheet; it is the same
   overlay as before at a third of the strength, because paper is not film. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
body[data-mode="night"] .grain { mix-blend-mode: screen; opacity: 0.05; }

/* ── Loader ─────────────────────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--pad);
}
.loader.is-gone { pointer-events: none; }
.loader__inner {
  align-self: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}
.loader__house {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.loader__lot {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spot);
  margin-top: 0.35rem;
}
.loader__figure {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: clamp(2rem, 8vh, 5rem);
}
.loader__pct {
  font-size: clamp(4.5rem, 16vw, 12rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.loader__pctsym {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.loader__track {
  height: 1px;
  background: var(--rule);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  overflow: hidden;
}
.loader__bar { height: 100%; width: 0%; background: var(--spot); }
.loader__status {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 0.9rem;
}
.loader__enter {
  justify-self: start;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ink);
  transition: gap 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.loader__enter[hidden] { display: none; }
.loader__enter:hover { gap: 1.4rem; color: var(--spot); border-color: var(--spot); }
.loader__enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ── WebGL fallback ─────────────────────────────────────────────────────── */
.fallback { position: fixed; inset: 0; z-index: 0; }
.fallback[hidden] { display: none; }
.fallback img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.9) brightness(1.55); opacity: 0.16; }
.fallback__note {
  position: absolute;
  right: var(--pad);
  bottom: calc(var(--pad) + 2rem);
  max-width: 30ch;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-2);
  border-right: 2px solid var(--spot);
  padding-right: 1rem;
}

/* ── Cursor ─────────────────────────────────────────────────────────────── */
.cursor { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); }
.cursor.is-live { opacity: 1; }
.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__dot { width: 5px; height: 5px; background: var(--ink); }
.cursor__ring {
  width: 34px; height: 34px;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  transition: width 0.45s var(--ease), height 0.45s var(--ease),
              border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}
.cursor__label {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  white-space: nowrap;
}
.cursor.is-active .cursor__ring { width: 78px; height: 78px; background: var(--spot); border-color: var(--spot); }
.cursor.is-active .cursor__dot { opacity: 0; }
.cursor.is-active .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 2vw, 1.5rem) var(--pad);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem 0;
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 52%, transparent 100%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
body.is-scrolled .nav::before { opacity: 1; }

.nav__house {
  position: relative; z-index: 1;
  font-size: 1.15rem;
  font-weight: 450;
  letter-spacing: 0.01em;
}
.nav__index { display: flex; gap: 1.5rem; position: relative; z-index: 1; }
.nav__index a {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.4s var(--ease);
}
.nav__index a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--spot);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__index a:hover { color: var(--ink); }
.nav__index a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__index a.is-current { color: var(--ink); }
.nav__index a.is-current::after { transform: scaleX(1); transform-origin: left; }

.nav__mode {
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  transition: color 0.4s var(--ease);
}
.nav__mode:hover { color: var(--ink); }
.nav__mode-track {
  width: 30px; height: 14px;
  border: 1px solid var(--rule);
  position: relative;
  transition: border-color 0.5s var(--ease);
}
.nav__mode-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 8px; height: 8px;
  background: var(--ink-3);
  transition: transform 0.55s var(--ease-io), background-color 0.55s var(--ease);
}
.nav__mode[aria-pressed="true"] .nav__mode-track { border-color: var(--spot); }
.nav__mode[aria-pressed="true"] .nav__mode-thumb { transform: translateX(14px); background: var(--spot); }

@media (max-width: 900px) { .nav__index { display: none; } }

/* ── Section scaffolding ────────────────────────────────────────────────── */
.sec { position: relative; z-index: 2; padding-inline: var(--pad); }
.sec > * { max-width: var(--maxw); margin-inline: auto; }

.has-js [data-reveal],
.has-js [data-reveal-stagger] > *,
.has-js [data-reveal-rows] tr,
.has-js .spec { opacity: 0; }
.has-js .ov { display: block; overflow: hidden; }
.has-js .ov > span { display: block; }
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.wi { display: inline-block; will-change: transform; }

/* ── The lot ────────────────────────────────────────────────────────────── */
.sec--lot {
  min-height: 100svh;
  display: grid;
  align-content: space-between;
  padding-block: clamp(6rem, 15vh, 10rem) clamp(1.5rem, 4vh, 2.5rem);
}
/* margin-inline is reset explicitly. The generic `.sec > *` rule centres block
   children, which is right for full-width wrappers and wrong for a narrow
   column: with auto margins this lands in the middle of the frame, on top of
   the car it is meant to sit beside. */
.lot { width: min(40ch, 100%); margin-inline: 0 auto; }
.lot__number {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spot);
  margin-bottom: 0.9rem;
}

/* The lot title is large but still a serif at a normal weight: the scale does
   the work, not the ink. */
.lot__title {
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  font-weight: 330;
  line-height: 0.98;
  letter-spacing: -0.028em;
}
.lot__sub {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 0.6vw + 0.92rem, 1.25rem);
  color: var(--ink-2);
  font-style: italic;
}

.lot__estimate {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.lot__estimate-k,
.lot__estimate-n {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lot__estimate-v {
  display: block;
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  font-variant-numeric: lining-nums tabular-nums;
  margin-block: 0.3rem 0.45rem;
}
.lot__estimate-n { font-style: normal; }

.lot__figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.lot__figures { list-style: none; }
.lot__cap {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}
.lot__fig {
  display: block;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 350;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.lot__fig i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-left: 0.25em;
}

/* ── Description ────────────────────────────────────────────────────────── */
/* Two unequal columns with a wide gutter: the prose measure stays at ~46
   characters no matter the viewport, and the marginal notes behave like a
   condition report set in the margin of a printed page. */
.sec--description {
  min-height: 190svh;
  padding-block: 16vh;
  display: grid;
  align-content: center;
}
/* Fixed character measures rather than fractions: the prose stays at ~40ch and
   the margin notes at ~21ch no matter how wide the viewport gets, so the pair
   never grows past half the frame and the car keeps the other half. Sized in
   fr units this collided with the car on every desktop width. */
.desc {
  display: grid;
  grid-template-columns: minmax(0, 40ch) minmax(0, 21ch);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-inline: 0 auto;
  align-items: start;
}
.desc__body { display: grid; gap: 1.35rem; }
.desc__body .h2 { margin-bottom: 0.6rem; }

.desc__notes {
  display: grid;
  gap: 1.4rem;
  padding-top: 0.5rem;
}
.desc__notes > div { border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.desc__notes h3 { margin-bottom: 0.35rem; }
.desc__notes p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 1100px) {
  .desc { grid-template-columns: minmax(0, 36ch) minmax(0, 19ch); }
}
@media (max-width: 900px) {
  .sec--description { min-height: 150svh; }
  .desc { grid-template-columns: 1fr; }
  .desc__notes { max-width: 46ch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .desc__notes { grid-template-columns: 1fr; } }

/* ── Specification (configurator) ───────────────────────────────────────── */
.sec--specification { min-height: 200svh; padding-block: 16vh; }
.spec-lay { display: grid; gap: clamp(1.75rem, 4vh, 2.75rem); align-content: start; }
.spec-lay__head { display: grid; gap: 0.75rem; max-width: 40ch; }

/* An inset ruled block, not a card: hairline border, paper ground, no radius,
   no shadow, no blur. */
.panel {
  width: min(24rem, 100%);
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: background-color var(--swap), border-color var(--swap);
}
.panel__row { padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--rule-soft); }
.panel__row:last-of-type { border-bottom: 0; }
.panel__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.panel__value {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--ink);
  text-align: right;
}

/* Paint chips are squares with a hairline, the way a colour is shown on a
   spec sheet — not glossy circles. */
.swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.swatch {
  --sw: #888;
  position: relative;
  width: 30px; height: 30px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  transition: transform 0.4s var(--ease);
}
.swatch::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--spot);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-checked="true"]::after { opacity: 1; }

/* Options read as a list of choices, underlined when live. */
.opts { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.opt {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.35s var(--ease);
}
.opt::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--spot);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.opt:hover { color: var(--ink); }
.opt:hover::after { transform: scaleX(1); transform-origin: left; }
.opt[aria-checked="true"] { color: var(--ink); }
.opt[aria-checked="true"]::after { transform: scaleX(1); transform-origin: left; }

.panel__hint {
  padding: 0.9rem 1.25rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-soft);
}

@media (max-width: 760px) {
  .sec--specification { min-height: 165svh; }
  .panel { width: 100%; }
  .panel__row { padding: 1rem 1.05rem; }
}

/* ── Data ───────────────────────────────────────────────────────────────── */
.sec--data { min-height: 230svh; padding-block: 16vh; display: block; }
.data {
  position: sticky;
  top: clamp(4.5rem, 11vh, 7rem);
  display: grid;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
  width: min(46rem, 100%);
  margin-inline: 0 auto;
}

.data__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  padding-block: 1.1rem;
  border-block: 1px solid var(--rule);
}
.spec__v { display: flex; align-items: baseline; gap: 0.3rem; }
.spec__v b {
  font-weight: 340;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.spec__v i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-3);
}
.spec__k {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--ink-3);
  margin-top: 0.35rem;
}

/* A real specification table: figures right-aligned, rules between rows, and
   nothing else. */
.table { font-size: 0.95rem; }
.table tr { border-bottom: 1px solid var(--rule-soft); }
.table tr:last-child { border-bottom: 0; }
.table th {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.62rem 1.5rem 0.62rem 0;
  width: 11rem;
  vertical-align: baseline;
  white-space: nowrap;
}
.table td {
  padding: 0.62rem 0;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  vertical-align: baseline;
}

@media (max-width: 760px) {
  .sec--data { min-height: auto; padding-block: 12vh; }
  .data { position: static; }
  .data__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .table th { width: auto; display: block; padding: 0.7rem 0 0.1rem; white-space: normal; }
  .table td { display: block; padding: 0 0 0.7rem; }
}

/* ── Plates ─────────────────────────────────────────────────────────────── */
/* Opaque from here: the WebGL layer is switched off behind these sections. */
.sec--plates {
  background: var(--paper);
  padding-block: 0 clamp(4rem, 10vh, 7rem);
  transition: background-color var(--swap);
}
.sec--plates::before {
  content: "";
  display: block;
  height: 20vh;
  background: linear-gradient(to bottom, transparent, var(--paper) 92%);
  margin-bottom: -1px;
}
.plates { max-width: var(--maxw); margin-inline: auto; }
.plates__head {
  display: grid;
  gap: 0.85rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  padding-top: clamp(1.5rem, 4vh, 3rem);
  border-top: 1px solid var(--rule);
}

.plates__grid { columns: 3; column-gap: clamp(1rem, 2vw, 1.75rem); }
.plate {
  break-inside: avoid;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.plate img {
  width: 100%;
  filter: grayscale(1) contrast(1.02);
  transition: filter 1s var(--ease);
}
.plate:hover img { filter: grayscale(0) contrast(1); }
/* The caption sits under the plate, as a printed caption does — not floating
   over the image on a gradient. */
.plate figcaption {
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-3);
  display: flex;
  gap: 0.6rem;
}
.plate figcaption span { color: var(--spot); min-width: 2.2em; }

@media (max-width: 900px) { .plates__grid { columns: 2; } }
@media (max-width: 560px) { .plates__grid { columns: 1; } }

/* ── Enquire ────────────────────────────────────────────────────────────── */
.sec--enquire {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 10vh, 7rem) clamp(1.5rem, 4vh, 2.5rem);
  transition: background-color var(--swap), border-color var(--swap);
}
.enq {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
}
.enq__lead { display: grid; gap: 1.1rem; align-content: start; }
.h2--enq { max-width: 16ch; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; align-content: start; }
.field { display: grid; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea, .select select {
  width: 100%;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 3.2rem; }
.field input:focus, .field textarea:focus, .select select:focus { outline: none; border-color: var(--spot); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--spot); }
.field__err {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--spot);
  min-height: 1em;
}
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2rem; }
.select select option { background: var(--paper); color: var(--ink); }
.select svg {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: none; stroke: var(--ink-3); stroke-width: 1.5;
  pointer-events: none;
}
.form__foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* A rule that fills, not a rectangle that fills. */
.btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-bottom: 5px;
  position: relative;
}
.btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transition: background-color 0.4s var(--ease), height 0.35s var(--ease);
}
.btn:hover { color: var(--spot); }
.btn:hover::after { background: var(--spot); height: 2px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.form__status { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-3); }
.form__status.is-ok { color: var(--spot); }

.colophon {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.colophon h4 { margin-bottom: 0.35rem; }
.colophon p { font-size: 0.92rem; color: var(--ink-2); }
.imprint {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-3);
  max-width: 60ch;
}
.imprint code { font-family: var(--sans); font-style: normal; font-size: 0.85em; }

@media (max-width: 900px) {
  .enq { grid-template-columns: 1fr; }
  .colophon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .form { grid-template-columns: 1fr; }
  .colophon { grid-template-columns: 1fr; }
}

/* ── Perf readout (backtick) ────────────────────────────────────────────── */
.perf {
  position: fixed;
  left: var(--pad);
  bottom: 0.6rem;
  z-index: 50;
  font-family: var(--sans);
  font-size: 0.66rem;
  color: var(--ink-3);
  pointer-events: none;
}
.perf[hidden] { display: none; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; }
  .cursor { display: none; }
  .has-js [data-reveal],
  .has-js [data-reveal-stagger] > *,
  .has-js [data-reveal-rows] tr,
  .has-js .spec { opacity: 1; }
}