/* ==========================================================================
   LOESS — design tokens (P4, 2026-08-29). The single source of visual truth.
   No component declares a raw colour, size or duration; everything reads a token.

   THE PALETTE IS SAMPLED, NOT CHOSEN. The low-saturation pixels of all eight
   Casa Cuarzo renders plus the film's poster frame (n = 1.912 for the mean
   stone) give a black that is not #000 and a white that is not #FFF:
     darkest render neutrals  #0D130E · #110F0D   → --ink
     render highlights        #F4F2EE · #ECE5DB   → --bone
     mean light neutral       #C1BEB9             → --stone
   Everything else on the page is one of the first two at reduced opacity.
   There is no third colour, no accent, no semantic colour. Spec: docs/design-p4.md.
   ========================================================================== */
:root {
  /* --- the two values ------------------------------------------------- */
  --ink:   #0E0D0C;     /* the page ground — 71% of the page */
  --bone:  #F2EFE9;     /* type on ink; the ground of every Act III drawing */
  --stone: #C1BEB9;     /* rules, marks, emphasis */
  --ink-raise: #151413; /* the one raised surface: table headers, insets */

  /* --- the steps (100 / 74 / 54 / 14%) --------------------------------- */
  --on-ink:       var(--bone);
  --on-ink-2:     rgb(242 239 233 / 0.74);   /* secondary — lifted from .64 at P4 review */
  --on-ink-3:     rgb(242 239 233 / 0.54);   /* tertiary, labels */
  --on-ink-rule:  rgb(242 239 233 / 0.14);
  --on-bone:      var(--ink);
  --on-bone-2:    rgb(14 13 12 / 0.72);
  --on-bone-3:    rgb(14 13 12 / 0.52);
  --on-bone-rule: rgb(14 13 12 / 0.13);

  /* --- semantic, register-switchable (sections set these) --------------- */
  --bg: var(--ink);
  --fg: var(--on-ink);
  --fg-2: var(--on-ink-2);
  --fg-3: var(--on-ink-3);
  --line: var(--on-ink-rule);
  --focus: var(--stone);
  --selection: rgb(242 239 233 / 0.18);
  color-scheme: dark;                        /* ink is the default register */

  /* --- type ------------------------------------------------------------ */
  --font-display: "Miller Banner", Georgia, "Times New Roman", serif;
  --font-text: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Weights. The body was 300 and read thin on an ink ground: light weights
     lose stroke on dark, where they need more, not less. Body is 400.
     Display stays Light ONLY at the two largest sizes, where there is stroke
     to spare. (P4 review, 2026-08-29.) */
  --w-body: 400;
  --w-medium: 500;
  --w-display: 400;
  --w-display-lg: 300;

  --fs-hero:      clamp(2.4rem, 7.4vw, 6.2rem);   /* §1 only */
  --fs-statement: clamp(1.9rem, 5.2vw, 4.4rem);   /* §6 the hinge, §2 the lead */
  --fs-head:      clamp(1.5rem, 3.1vw, 2.6rem);
  --fs-lede:      clamp(1.0625rem, 1.5vw, 1.3125rem);
  --fs-body:      1.0625rem;
  --fs-cap:       0.9375rem;                       /* plate captions */
  --fs-small:     0.8125rem;                       /* legal, provenance */
  --fs-label:     0.6875rem;                       /* eyebrows, render disclosure */
  --fs-draw:      11px;                            /* type inside generated SVG */
  --fs-draw-caps: 10px;

  /* The hero is the only type on the page big enough to want negative-looking leading: at 99 px a
     1.06 advance opens a gap that reads as three separate lines rather than one sentence. Tightened
     ~19 % on Matheus's note (2026-08-30). The statements keep 1.06 — at 4,4 rem they need it. */
  --lh-hero: 0.86;
  --lh-display: 1.06;
  --lh-tight: 1.16;
  --lh-body: 1.62;
  --track-label: 0.18em;
  --track-display: 0;                              /* Miller Banner needs no tracking correction */
  --measure: 34em;                                 /* ≈ 62–66ch */
  --measure-wide: 46em;                            /* lists and two-column prose */
  --measure-narrow: 27ch;                          /* the epigraph — held narrower than the drawing */

  /* --- space ------------------------------------------------------------ */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --section-y: clamp(56px, 8vw, 118px);
  --gutter: clamp(18px, 3.4vw, 58px);
  --content-max: 76rem;
  --plate-max: 1400px;

  /* The concept croquis is deliberately small — about a fifth of a desktop
     viewport, in a large quiet field. (P4 review: "30% of current size".) */
  --croquis-w: min(330px, 66vw);

  /* The document bar and the chrome reserve space at the edges of every screen. */
  --bar-h: 3.25rem;

  /* --- shape ------------------------------------------------------------ */
  --radius: 0px;                                   /* LOESS is square-cornered */
  --radius-pill: 999px;                            /* the one exception: the sound control */
  --hair: 1px;

  /* --- motion (P5) ------------------------------------------------------ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 800ms;      /* §04 section reveals */
  --dur-reveal-reduced: 200ms;
  --stagger: 120ms;         /* §05 plate stagger */
  --dur-film-fade: 600ms;   /* §01 poster → video */
  --dur-chrome: 350ms;      /* §07 lockup cross-fade */
  --dur-bar: 400ms;         /* §07 document bar slide */
  --dur-ui: 200ms;
  --dur-magnet: 150ms;      /* §10 */
  --magnet-px: 4px;
  --magnet-radius: 80px;
  --parallax-px: 14px;      /* §05 offset plate drift */
  --mq-cycle: 44s;          /* §08 marquee */
  --ground-overlap: 10vh;   /* §06 the extra air a band gets where the ground turns — the turn itself is a clean edge, see components.css */
}

/* --------------------------------------------------------------------------
   Register switch. Ink is the default; a drawing section flips to bone.
   ONE definition, used by §8 la sección, §9 las plantas, §10 suelo y
   edificabilidad and §12 situación — and by nothing else. Every bone moment on
   this page is a drawing; that is what makes the inversion mean something.
   -------------------------------------------------------------------------- */
.register-bone {
  --bg: var(--bone);
  --fg: var(--on-bone);
  --fg-2: var(--on-bone-2);
  --fg-3: var(--on-bone-3);
  --line: var(--on-bone-rule);
  --focus: var(--ink);
  --selection: rgb(14 13 12 / 0.14);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Brand faces — self-hosted, subset to woff2 by scripts/build-fonts.sh.
   Licensed per site: the files live in assets/fonts/ and are never committed.
   ⚠ The OTFs currently on the Mac came from fonnts.com, which is not a licence
   source. Replace with the Type Network webfont kit — a desktop licence does
   not normally cover web embedding. Drop-in; no design change.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Miller Banner"; font-weight: 300; font-style: normal;
  font-display: swap; src: url("./fonts/web/MillerBanner-Light.woff2") format("woff2"); }
@font-face { font-family: "Miller Banner"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("./fonts/web/MillerBanner-Regular.woff2") format("woff2"); }
@font-face { font-family: "Miller Banner"; font-weight: 400; font-style: italic;
  font-display: swap; src: url("./fonts/web/MillerBanner-Regular_Italic.woff2") format("woff2"); }

/* ==========================================================================
   LOESS — component styles. One definition per UI concept; variants are declared
   classes, states are attributes. Every value reads a token from tokens.css;
   nothing here declares a colour, a size or a duration of its own.

   Inventory and contracts: docs/components.md · structure: docs/wireframe.md
   design system: docs/design-p4.md · behaviour: docs/motion-p5.md

   THE RULE THIS FILE ENCODES ABOVE ALL OTHERS — a section owns its ground.
   Learnt from the P5 prototype, where a fixed cross-fade layer bled past its
   section and lit up the block below it. Every band paints its own background;
   the ink ↔ bone turn happens inside the bone section's own top and bottom
   padding, so nothing can ever leak.
   ========================================================================== */

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--selection); color: var(--fg); }
:focus-visible { outline: var(--hair) solid var(--focus); outline-offset: 4px; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--hair);
    text-underline-offset: 0.2em; text-decoration-color: var(--fg-3); transition: text-decoration-color var(--dur-ui) var(--ease); }
a:hover { text-decoration-color: var(--fg); }
/* height:auto is load-bearing: the HTML width/height attributes are presentational hints,
   so a CSS width alone leaves the intrinsic pixel height in place and stretches the image. */
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, ol, ul, figure, figcaption, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
/* a class selector beats the UA's [hidden] rule, so every display: rule below would ignore it */
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--gutter); top: -4rem; z-index: 40; background: var(--bone); color: var(--ink);
        padding: var(--s-3) var(--s-5); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; }
.skip:focus { top: var(--s-4); }

/* ---- type roles ---------------------------------------------------------- */
.t-hero { font-family: var(--font-display); font-weight: var(--w-display-lg); font-size: var(--fs-hero);
          line-height: var(--lh-hero); letter-spacing: var(--track-display); text-wrap: balance; }
.t-statement { font-family: var(--font-display); font-weight: var(--w-display-lg); font-size: var(--fs-statement);
               line-height: var(--lh-display); max-width: 15ch; text-wrap: balance; }
.t-head { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-head);
          line-height: var(--lh-tight); text-wrap: balance; }
.t-lede { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-lede);
          line-height: 1.42; max-width: var(--measure); text-wrap: pretty; }
.t-body { max-width: var(--measure); text-wrap: pretty; }
.t-cap { font-size: var(--fs-cap); color: var(--fg-2); max-width: var(--measure); text-wrap: pretty; }
.t-small { font-size: var(--fs-small); color: var(--fg-2); max-width: var(--measure-wide); }
.t-label { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
           font-weight: var(--w-medium); color: var(--fg-3); }

/* ---- layout primitives --------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--plate-max)); }
.stack > * + * { margin-top: var(--s-5); }
.stack--wide > * + * { margin-top: var(--s-7); }
.split { display: grid; gap: var(--s-7) var(--s-8); }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  /* where the drawing leads the pair, the drawing gets the wide column — a diagram whose labels are
     set at 11 px cannot be squeezed into the narrow one and stay readable */
  .split--drawing-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

/* Every band paints its own ground. Nothing is transparent; nothing bleeds. */
.band {
  position: relative; z-index: 1;
  background: var(--bg); color: var(--fg);
  padding-block: var(--section-y);
}
.band__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
.band--centred .band__head { justify-items: center; text-align: center; }

/* THE GROUND TURN — a clean edge, not a dissolve. (Revised 2026-08-30; this reverses
   motion behaviour 06 as specified at P5.) A cross-fade over a 40 vh overlap was the
   plan, and it was wrong twice over: a long gradient between #0E0D0C and #F2EFE9 reads
   as a rendering artefact rather than a decision, and its padding cost a whole screen of
   empty smear at each of the four turns. The turn is now what it is in a monograph — the
   page changes. The template still DERIVES which band opens and closes a bone run, and
   those two get a touch more air so the edge lands on space, never mid-sentence. */
.band--enter { padding-top: calc(var(--section-y) + var(--ground-overlap)); }
.band--exit  { padding-bottom: calc(var(--section-y) + var(--ground-overlap)); }

/* ---- reveal (motion 04) --------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px);
                transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 0; transition: opacity var(--dur-reveal-reduced) linear; }
  .js .reveal.is-in { opacity: 1; }
}

/* ---- C1 brandmark --------------------------------------------------------- */
.brandmark { display: inline-block; line-height: 0; }
.brandmark img { width: auto; }
.brandmark--stacked img { height: 3.25rem; }
.brandmark--wordmark img { height: 0.72rem; }
.brandmark--cierre img { height: clamp(5rem, 15vw, 9.5rem); }
@media (max-width: 719px) { .brandmark--stacked img { height: 2.4rem; } }

/* ---- C4 chrome ------------------------------------------------------------ */
.chrome { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; justify-content: space-between;
          align-items: flex-start; padding: var(--s-5) var(--gutter); pointer-events: none;
          color: var(--on-ink); transition: color var(--dur-chrome) var(--ease); mix-blend-mode: normal; }
.chrome > * { pointer-events: auto; }
.chrome[data-register="bone"] { color: var(--on-bone); }
.chrome__marks { position: relative; display: grid; }
.chrome__marks > * { grid-area: 1 / 1; transition: opacity var(--dur-chrome) var(--ease); }
.chrome__marks .brandmark--wordmark { opacity: 0; align-self: center; }
.chrome[data-scrolled="true"] .brandmark--stacked { opacity: 0; pointer-events: none; }
.chrome[data-scrolled="true"] .brandmark--wordmark { opacity: 1; }
.chrome[data-register="bone"] .brandmark img { filter: invert(1); }

.lang { display: inline-flex; gap: var(--s-4); font-size: var(--fs-label);
        letter-spacing: var(--track-label); text-transform: uppercase; font-weight: var(--w-medium); }
.lang a, .lang span { text-decoration: none; opacity: 0.5; transition: opacity var(--dur-ui) var(--ease); }
.lang a:hover { opacity: 0.85; }
.lang [aria-current="true"] { opacity: 1; }

/* ---- C5 the document bar -------------------------------------------------- */
.docbar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; align-items: stretch; gap: var(--s-6);
  min-height: var(--bar-h);
  padding-inline: var(--gutter);
  background: rgb(14 13 12 / 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: var(--hair) solid var(--on-ink-rule);
  color: var(--on-ink);
  transform: translateY(101%); opacity: 0;
  transition: transform var(--dur-bar) var(--ease), opacity var(--dur-bar) var(--ease);
}
.docbar[data-shown="true"] { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .docbar { transform: none; } }
.docbar__name { display: flex; align-items: center; font-family: var(--font-display);
                font-weight: var(--w-display); font-size: var(--fs-cap); white-space: nowrap; }
.docbar__nav { display: flex; align-items: stretch; gap: var(--s-6); flex: 0 1 auto; min-width: 0;
                overflow: hidden; }   /* it may be trimmed; it may never run into the action */
.docbar__nav a { display: flex; align-items: center; text-decoration: none; white-space: nowrap;
                 font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
                 font-weight: var(--w-medium); color: var(--on-ink-3); transition: color var(--dur-ui) var(--ease); }
.docbar__nav a:hover, .docbar__nav a[aria-current="true"] { color: var(--on-ink); }
.docbar__cta { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; white-space: nowrap;
               text-decoration: none; font-size: var(--fs-label); letter-spacing: var(--track-label);
               text-transform: uppercase; font-weight: var(--w-medium); color: var(--on-ink); }
.docbar__cta::after { content: ""; width: 1.4rem; height: var(--hair); background: currentColor; }
/* Below this the four items cannot all fit in the longest language, and a half-visible nav reads
   worse than none: the bar becomes the name and the action, which is what it is for. */
@media (max-width: 1023px) {
  .docbar { gap: var(--s-4); }
  .docbar__nav { display: none; }
  .docbar__cta { margin-left: auto; }
}

/* ---- C2/C3 the film ------------------------------------------------------- */
.film { position: relative; min-height: 100svh; display: grid; align-items: end;
        background: var(--ink); color: var(--on-ink); overflow: hidden; isolation: isolate; }
.film__media { position: absolute; inset: 0; z-index: 0; }
.film__media img, .film__media video { width: 100%; height: 100%; object-fit: cover; }
.film__media video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-film-fade) var(--ease); }
.film__media video.is-playing { opacity: 1; }
/* With sound on, the film plays from 0 — including its own title card, which is the page's headline
   in the same typeface. So the page's headline steps aside and the scrim lifts: for those thirty
   seconds the film IS the first screen, which is the whole point of turning the sound on. */
.film__body, .film__scrim, .film__scroll { transition: opacity var(--dur-reveal) var(--ease); }
.film[data-film-state="sound"] .film__body,
.film[data-film-state="sound"] .film__scroll { opacity: 0; pointer-events: none; }
.film[data-film-state="sound"] .film__scrim { opacity: 0.3; }
.film__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(14 13 12 / 0.55) 0%, rgb(14 13 12 / 0.10) 32%,
                              rgb(14 13 12 / 0.18) 54%, rgb(14 13 12 / 0.88) 100%); }
/* The measure is 66rem of TEXT. The gutter is added on top of it rather than taken out of it —
   with max-width alone the content box shrank as the gutter grew, so the same sentence took two
   lines at 1440 and three at 1600. The English sentence is the longest of the three and this is the
   width at which it settles on three lines and the other two on two, each breaking on a full stop. */
.film__body { position: relative; z-index: 2; display: grid; gap: var(--s-5);
              padding-inline: var(--gutter); padding-bottom: clamp(2.5rem, 8vh, 5.5rem);
              max-width: calc(66rem + 2 * var(--gutter)); }
.film__place { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
               font-weight: var(--w-medium); color: var(--on-ink-2); }
.film__foot { position: absolute; z-index: 2; inset: auto var(--gutter) clamp(2.5rem, 8vh, 5.5rem) auto;
              display: grid; gap: var(--s-4); justify-items: end; }
.film__scroll { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
                font-weight: var(--w-medium); color: var(--on-ink-2); text-decoration: none;
                display: inline-flex; align-items: center; gap: var(--s-3); }
.film__scroll::after { content: ""; width: var(--hair); height: 2.2rem; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .film__scroll::after { animation: scroll-cue 2.6s var(--ease) infinite; transform-origin: 50% 0; }
  @keyframes scroll-cue { 0%, 100% { transform: scaleY(0.35); opacity: 0.4; } 45% { transform: scaleY(1); opacity: 1; } }
}
.sound { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer;
         font: inherit; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
         font-weight: var(--w-medium); color: var(--on-ink); background: rgb(242 239 233 / 0.06);
         border: var(--hair) solid rgb(242 239 233 / 0.3); border-radius: var(--radius-pill);
         padding: var(--s-3) var(--s-5); transition: background var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease); }
.sound:hover { background: rgb(242 239 233 / 0.12); border-color: var(--on-ink); }
.sound__glyph { display: inline-block; width: 0.75rem; height: 0.75rem; border: var(--hair) solid currentColor; border-radius: 50%; flex: none; }
.sound[data-playing="true"] .sound__glyph { background: currentColor; }
.sound [data-label-pause] { display: none; }
.sound[data-playing="true"] [data-label-play] { display: none; }
.sound[data-playing="true"] [data-label-pause] { display: inline; }
@media (max-width: 719px) {
  .film__foot { position: static; justify-items: stretch; padding: 0 var(--gutter) clamp(2rem, 6vh, 3rem); }
  .film { align-items: end; }
  .film__body { padding-bottom: var(--s-6); }
  .sound { justify-content: center; width: 100%; }
  .film__scroll { display: none; }
}

/* ---- C6 statement --------------------------------------------------------- */
.statement { min-height: 100svh; display: grid; align-content: center; }
.statement p { font-family: var(--font-display); font-weight: var(--w-display-lg);
               font-size: var(--fs-statement); line-height: var(--lh-display); max-width: 20ch; text-wrap: balance; }
.statement--wide p { max-width: 26ch; }
/* motion 09 — the hinge lights word by word as it crosses the viewport */
.statement .w { color: var(--fg-3); transition: color 260ms linear; }
.statement .w.is-lit { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .statement .w { color: var(--fg); } }

/* ---- C7/C8 plates --------------------------------------------------------- */
.plates { display: grid; gap: clamp(var(--s-8), 11vh, var(--s-9)); }
.plate { display: grid; gap: var(--s-4); }
.plate__frame { position: relative; overflow: hidden; background: var(--ink-raise); border-radius: var(--radius); }
.plate__frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0;
                    transition: opacity var(--dur-reveal) var(--ease); }
.plate__frame img.is-loaded, .no-js .plate__frame img { opacity: 1; }
.plate--16-10 .plate__frame { aspect-ratio: 16 / 10; }
.plate--1-1 .plate__frame { aspect-ratio: 1 / 1; }
.plate--3-2 .plate__frame { aspect-ratio: 3 / 2; }
.plate--4-5 .plate__frame { aspect-ratio: 4 / 5; }
.plate--16-9 .plate__frame { aspect-ratio: 16 / 9; }
.plate__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; }
.plate__disclosure { font-size: var(--fs-label); letter-spacing: var(--track-label);
                     text-transform: uppercase; color: var(--fg-3); }
.plate__credit { font-size: var(--fs-label); color: var(--fg-3); }

/* the editorial rhythm: full bleed, then held off the axis, then an unequal pair */
.plate--full { width: 100%; }
.plate--offset { width: min(100%, 62%); margin-left: auto; }
.plate-row { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 840px) {
  .plate-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
  .plate-row > :last-child { margin-top: clamp(var(--s-8), 14vh, 11rem); }   /* unequal baselines */
}
@media (max-width: 839px) {
  .plate--offset { width: 100%; margin-left: 0; }
  .plate-row > :last-child { width: 78%; margin-left: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .plate--offset .plate__frame img, .js .plate--parallax .plate__frame img { will-change: transform; }
}

/* ---- C9 figures ----------------------------------------------------------- */
.figures { border-top: var(--hair) solid var(--line); }
.figures > div { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: var(--s-4) var(--s-6);
                 padding: var(--s-4) 0; border-bottom: var(--hair) solid var(--line); align-items: baseline; }
.figures dt { color: var(--fg-2); font-size: var(--fs-cap); }
.figures dd { margin: 0; }
.figures dd.num { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-lede); }
.figures--totals { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); padding-top: var(--s-5); }
.figures--totals > div { display: grid; gap: var(--s-1); }
.figures--totals dt { color: var(--fg-3); font-size: var(--fs-label);
                      letter-spacing: var(--track-label); text-transform: uppercase; }
.figures--totals dd { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-head); }
@media (max-width: 639px) { .figures > div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---- C10 lists ------------------------------------------------------------ */
.list { border-top: var(--hair) solid var(--line); max-width: var(--measure-wide); }
.list > li { padding: var(--s-4) 0; border-bottom: var(--hair) solid var(--line); }
.list--two { max-width: none; }
@media (min-width: 780px) { .list--two { columns: 2; column-gap: var(--s-9); } .list--two > li { break-inside: avoid; } }
.list--index li { display: flex; justify-content: space-between; gap: var(--s-5); align-items: baseline; }
.list--index .ref { color: var(--fg-3); font-size: var(--fs-cap); text-align: right; }
.list--loose { border-top: 0; max-width: var(--measure); }
.list--loose > li { border-bottom: 0; padding: 0; }
.list--loose > li + li { margin-top: var(--s-5); }

/* ---- C11 marquee ---------------------------------------------------------- */
.marquee { overflow: hidden; padding-block: var(--s-7); border-block: var(--hair) solid var(--line);
           background: var(--bg); position: relative; z-index: 1; }
.marquee__track { display: flex; width: max-content; }
.marquee__track span { padding-inline: var(--s-5); font-family: var(--font-display);
                       font-weight: var(--w-display); font-size: var(--fs-head); color: var(--fg-2); white-space: nowrap; }
.marquee__track span::after { content: "·"; margin-left: var(--s-6); color: var(--fg-3); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee var(--mq-cycle) linear infinite; will-change: transform; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { flex-wrap: wrap; width: auto; }
  .marquee__track [data-clone] { display: none; }
}

/* ---- C12 croquis (the architects' hand) ------------------------------------ */
.croquis { display: grid; justify-items: center; gap: var(--s-8); text-align: center; }
.croquis__drawing { width: var(--croquis-w); }
.croquis__epigraph { max-width: var(--measure-narrow); font-family: var(--font-display);
                     font-weight: var(--w-display); font-style: italic; font-size: var(--fs-lede);
                     line-height: 1.5; text-wrap: pretty; }
.croquis__epigraph footer { margin-top: var(--s-4); font-family: var(--font-text); font-style: normal;
                            font-size: var(--fs-label); letter-spacing: var(--track-label);
                            text-transform: uppercase; color: var(--fg-3); }
.croquis__body { max-width: var(--measure); color: var(--fg-2); text-wrap: pretty; }
.croquis__caption { max-width: var(--measure); font-size: var(--fs-small); color: var(--fg-3); text-wrap: pretty; }

/* ---- C13 plan (one per viewport) ------------------------------------------- */
.plan { min-height: 100svh; display: grid; align-content: center; gap: var(--s-5); padding-block: var(--s-6); }
.plan__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); }
.plan__title { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-head); }
.plan__area { font-family: var(--font-display); font-weight: var(--w-display-lg); font-size: var(--fs-head); color: var(--fg-2); }
.plan__body { color: var(--fg-2); max-width: var(--measure); }
/* One plan per viewport means exactly that: the drawing is bound by the SCREEN's height as well as
   the column's width, so a plan never runs past the fold and never has to be scrolled in two goes.
   max-width + max-height on a replaced element with auto sizes keeps the ratio and fits inside both. */
.plan__drawing { max-width: 85%; max-height: calc(100svh - 15rem); width: auto; height: auto;
                 margin-inline: auto; }
@media (max-width: 839px) { .plan__drawing { max-width: 100%; max-height: none; width: 100%; } }
.plan__foot { font-size: var(--fs-small); color: var(--fg-3); }

/* ---- C14/C15 generated drawings -------------------------------------------- */
.drawing { width: 100%; height: auto; overflow: visible; }
.drawing--envelope { max-width: 34rem; }
.drawing--map { max-width: 46rem; }
.drawing text { font-family: var(--font-text); font-size: var(--fs-draw); fill: var(--fg-2); }
.drawing .d-caps { font-size: var(--fs-draw-caps); letter-spacing: 0.12em; text-transform: uppercase; }
.drawing .d-num { font-family: var(--font-display); fill: var(--fg); }
.drawing .d-line { stroke: var(--fg); fill: none; stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.drawing .d-line--2 { stroke: var(--fg-3); fill: none; stroke-width: 0.75; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.drawing .d-fill { fill: var(--fg); fill-opacity: 0.1; stroke: var(--fg); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.drawing .d-solid { fill: var(--fg); }
.drawing__caption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fg-3); }
.legend { display: grid; gap: var(--s-3); margin-top: var(--s-6); max-width: 34rem; }
.legend > div { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: var(--s-4); font-size: var(--fs-cap); }
.legend dt { color: var(--fg-3); } .legend dd { margin: 0; }
@media (max-width: 639px) { .legend > div { grid-template-columns: 1fr; gap: var(--s-1); } .drawing--map .d-label { display: none; } }

/* ---- C16 routes ------------------------------------------------------------ */
.routes { display: grid; gap: var(--s-8); border-top: var(--hair) solid var(--line); padding-top: var(--s-7); }
@media (min-width: 900px) {
  .routes { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .routes > * + * { border-left: var(--hair) solid var(--line); padding-left: var(--s-9); }
}
.route h3 { font-family: var(--font-display); font-weight: var(--w-display-lg);
            font-size: var(--fs-head); line-height: var(--lh-tight); text-wrap: balance; }
.route__body { margin-top: var(--s-5); display: grid; gap: var(--s-4); color: var(--fg-2); max-width: var(--measure); }

/* ---- C17 enquiry ----------------------------------------------------------- */
.enquiry { display: grid; gap: var(--s-8) var(--s-9); }
@media (min-width: 1000px) { .enquiry { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.form { display: grid; gap: var(--s-5); max-width: 34rem; }
.field { display: grid; gap: var(--s-2); }
.field label, .fieldset__legend { font-size: var(--fs-label); letter-spacing: var(--track-label);
                                  text-transform: uppercase; font-weight: var(--w-medium); color: var(--fg-3); }
.field input { font: inherit; color: var(--fg); background: transparent; border: 0;
               border-bottom: var(--hair) solid var(--line); border-radius: var(--radius);
               padding: var(--s-3) 0; width: 100%; caret-color: var(--fg); }
.field input:focus-visible { outline: none; border-bottom-color: var(--fg); box-shadow: 0 var(--hair) 0 0 var(--fg); }
.field[data-invalid="true"] input { border-bottom-color: var(--fg); border-bottom-width: 2px; }
.field__error { font-size: var(--fs-cap); color: var(--fg); display: none; }
.field[data-invalid="true"] .field__error { display: block; }
.fieldset { border: 0; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); }
.fieldset__legend { padding: 0; margin-bottom: var(--s-2); }
.choice { display: flex; gap: var(--s-3); align-items: baseline; cursor: pointer; }
.choice input { appearance: none; width: 0.8rem; height: 0.8rem; border: var(--hair) solid var(--fg-3);
                border-radius: 50%; margin: 0; position: relative; top: 0.12rem; flex: none; }
.choice input:checked { border-color: var(--fg); background: var(--fg); box-shadow: inset 0 0 0 3px var(--bg); }
.choice input:focus-visible { outline: var(--hair) solid var(--focus); outline-offset: 3px; }
.form__actions { margin-top: var(--s-6); }
.form__privacy { font-size: var(--fs-small); color: var(--fg-3); max-width: var(--measure); margin-top: var(--s-5); }
.form__status { display: none; padding: var(--s-6) 0; border-top: var(--hair) solid var(--line); }
.form[data-state="success"] .form__status--success, .form[data-state="error"] .form__status--error { display: block; }
.form[data-state="success"] .form__fields { display: none; }
.form__status h3 { font-family: var(--font-display); font-weight: var(--w-display);
                   font-size: var(--fs-head); margin-bottom: var(--s-3); }
.direct { display: grid; gap: var(--s-4); align-content: start; }
.direct__links { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.notice { font-family: var(--font-display); font-weight: var(--w-display-lg);
          font-size: var(--fs-head); line-height: var(--lh-tight); max-width: var(--measure); }

/* ---- action (the one button shape) ----------------------------------------- */
.action { display: inline-flex; align-items: center; gap: var(--s-3); font: inherit;
          font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
          font-weight: var(--w-medium); color: inherit; text-decoration: none; background: none;
          border: 0; border-bottom: var(--hair) solid currentColor; border-radius: var(--radius);
          padding: 0 0 var(--s-2); cursor: pointer; transition: gap var(--dur-ui) var(--ease); }
.action::after { content: ""; width: 1.4rem; height: var(--hair); background: currentColor; }
.action:hover { gap: var(--s-4); }
.action[aria-disabled="true"], .action:disabled { opacity: 0.45; pointer-events: none; }
.action [data-label-busy] { display: none; }
.form[data-state="submitting"] .action [data-label-idle] { display: none; }
.form[data-state="submitting"] .action [data-label-busy] { display: inline; }

/* ---- C18 cierre ------------------------------------------------------------ */
.cierre { display: grid; gap: var(--s-8); justify-items: center; text-align: center; }
.cierre__lines { display: grid; gap: var(--s-2); max-width: var(--measure); }
.cierre__lines p { font-size: var(--fs-small); color: var(--fg-3); text-wrap: pretty; }
.cierre__foot { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); justify-content: center;
                align-items: baseline; padding-top: var(--s-6); border-top: var(--hair) solid var(--line);
                width: min(100%, var(--measure-wide)); }

/* ---- pending slot (preview builds only) ------------------------------------- */
.pending { border: var(--hair) dashed var(--fg-3); color: var(--fg-3); padding: var(--s-6);
           display: grid; gap: var(--s-3); align-content: center; min-height: 14rem; }

/* ---- the page reserves room for the fixed bar ------------------------------- */
main { padding-bottom: var(--bar-h); }

/* A band that owns its own vertical rhythm (the hinge, whose statement is already a viewport tall). */
.band--flush { padding-block: 0; }
.band--flush.band--enter { padding-top: var(--ground-overlap); }
.band--flush.band--exit { padding-bottom: var(--ground-overlap); }

/* ---- motion 02 — the first screen enters: place, then the statement, then the control -------- */
@media (prefers-reduced-motion: no-preference) {
  .js .film__place, .js .film .t-hero, .js .film__foot > * {
    opacity: 0; transform: translateY(18px);
    transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  }
  .js .film.is-ready .film__place,
  .js .film.is-ready .t-hero,
  .js .film.is-ready .film__foot > * { opacity: 1; transform: none; }
  .js .film.is-ready .t-hero { transition-delay: var(--stagger); }
  .js .film.is-ready .film__foot > * { transition-delay: calc(var(--stagger) * 2); }
}
@media (prefers-reduced-motion: reduce) {
  .js .film__place, .js .film .t-hero, .js .film__foot > * {
    opacity: 0; transition: opacity var(--dur-reveal-reduced) linear;
  }
  .js .film.is-ready .film__place,
  .js .film.is-ready .t-hero,
  .js .film.is-ready .film__foot > * { opacity: 1; }
}