/* ================================================================
   PHOTOGRAPHIC PLATE
   The background is a GRADED DERIVATIVE of the source photograph, not the
   photograph itself (pipeline: crop → soften → highlight roll-off → WebP).
   What matters here:

     · specular vein glints are pulled down at BUILD TIME so none can rise
       into the type's contrast band. The roll-off is authored to a ceiling of
       L 0.098, but WebP overshoots it — so these figures are measured on the
       DECODED files, not on the pre-encode canvas: across the four shipped
       plates, mean L 0.047 and max L 0.131 (the 760px portrait overshoots
       most; quantisation bites hardest at the smallest size). Re-measure the
       same way after any re-encode — canvas statistics do not describe the
       artifact.
     · the model evaluates BOTH ends of the plate, because which end binds
       flips with the scene: light text at night is bounded by the plate's
       brightest pixel, dark text by day by its DARKEST. Only the bright end
       was modelled at first, which hid a 4.10:1 failure in C daylight.
       Day figures below are taken at an absolute black plate pixel (L 0) —
       strictly more conservative than any pixel the type actually covers.
     · REGRADED DARKER by owner ruling (2026-08-13): the leaf leads in both
       scenes. Veils re-solved per direction against the same model — each
       daylight veil sits at its own measured floor + working margin (A's
       ivory binds first and sets the base). Small-text tier, worst end:
       daylight A 4.77 / B 5.09 / C 4.76 / D 5.09; nightfall A 5.69 /
       B 7.02 / C 5.66 / D 7.11. Headings 7.40:1 up. AA needs 4.50.
       "Any text" is literal: the colophon, contact link and scene switch
       once used each direction's muted tier and measured 2.77:1 — they now
       take --plate-ink (see the small-text tier below), so every string on
       the plate carries a body-weight colour and this one table describes
       the whole page. The cap lives on the PLATE rather than in a heavier
       scrim, so the photograph keeps its depth.
     · the plate is FIXED, so it never scrolls out from under the type.
     · it is a CSS background, not an <img>: a decorative full-bleed plate
       needs no wrapper geometry, no object-fit and no intrinsic-size attrs,
       and art direction reads more clearly as a media query than as
       <source media>. (It is also the only form that paints reliably behind
       the lab's asset proxy, which does not serve srcset candidates.)
     · the scrim uses var(--bg) — the token all four directions alias to their
       own page colour — so ONE rule tints correctly in every direction and
       follows the scene without a second declaration.

   The scene inverts the plate's role rather than fighting it: at night the
   scrim barely darkens an already-dark photograph and the leaf reads in full
   depth; by day the same scrim becomes a paper veil and the leaf drops back
   to a pale watermark — which is what lets DARK type sit on a DARK photograph
   without destroying either.
   ================================================================ */
.plate {
  position: fixed; inset: 0; z-index: 0;
  background-color: #2e402f;      /* the plate's own average — no white flash */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* WebP only: Baseline in every current engine. image-set() picks by device
     pixel ratio; engines that somehow have neither fall back to the average
     colour above, which is the plate's own tone, so the page still reads. */
  background-image: image-set(url("background/leaf-landscape-1200.webp") 1x,
                              url("background/leaf-landscape-1920.webp") 2x);
}
/* ART DIRECTION, not merely resolution: a tall viewport gets a different crop
   of the same leaf, composed for its proportions. */
@media (orientation: portrait) {
  .plate {
    background-image: image-set(url("background/leaf-portrait-760.webp") 1x,
                                url("background/leaf-portrait-1080.webp") 2x);
  }
}
.plate::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bg);
  /* daylight base = direction A's veil: its ivory scrim + lightest ink bind
     first (measured floor 0.727 at AA+margin), so A defines the palest the
     day veil may go. B/C/D take their own deeper values below. */
  opacity: 0.74;
}
/* nightfall: deepened from 0.28 by owner ruling — the leaf leads, and a
   heavier ink veil RAISES light-text contrast (5.66:1 worst, was 4.76) */
html[data-scene="night"] .plate::after { opacity: 0.42; }
/* PER-DIRECTION DAYLIGHT VEILS — each direction's dark-text-on-dark-pixel
   bound is solved separately (veil colour and ink both differ), and each
   veil sits at its own floor + working margin (≥4.6 target on the 4.5 AA
   minimum, measured at an absolute black plate pixel):
     B/D (white veil, #3A3A3A ink)  floor 0.646 → 0.68 ships (5.09:1)
     C   (paper veil, #47543F ink)  floor 0.806 → 0.82 ships (4.76:1)
   A shadow floor in the ASSET stays arithmetically impossible: clearing
   4.5:1 needs linear L ≈ 0.07 against the plate's 0.098 ceiling — a flat
   grey card with no leaf left. The veil is the correct knob.
   :not() rather than [data-scene="day"] so these hold before scene.js
   writes the attribute, and never out-rank the night rule above. */
html[data-theme="b"]:not([data-scene="night"]) .plate::after,
html[data-theme="d"]:not([data-scene="night"]) .plate::after { opacity: 0.68; }
html[data-theme="c"]:not([data-scene="night"]) .plate::after { opacity: 0.82; }
@media print { .plate { display: none; } }

/* ---- teaser layout (theme-neutral) ----
   VERTICAL RHYTHM, VIEWPORT SIZING and SAFE AREA now live once, on .stage in
   assets/flow.css — including the guarantee that the colophon never falls
   below the fold. Only this page's own grid proportions belong here. */
.stage {
  position: relative; z-index: 1;
  /* 1.15fr above vs 1fr below: the composition sits a little high, leaving
     the lower third to the steam */
  display: grid; grid-template-rows: 1.15fr auto 1fr;
}
.teaser { grid-row: 2; max-width: 640px; justify-self: center; }
/* the hookline leads; the mark answers underneath at well under half its
/* The mark opens the composition, the hairline closes it, and --flow-xl of
   air separates that pair from the hookline — the wordmark is deliberately
   subordinate in size to the headline it introduces. */
.teaser h1 { margin-block-end: var(--flow-loose); }
.logotype { display: block; margin-block-end: var(--flow); --wordmark-size: clamp(16px, 2.6vw, 24px); --wordmark-tracking: 0.34em; }
.teaser-rule { border: 0; border-block-start: 1px solid currentColor; inline-size: 56px; margin-inline: auto; margin-block-end: var(--flow-xl); }
.whisper { margin-inline: auto; margin-block-end: var(--flow-loose); max-width: 44ch; }
.when { display: inline-block; margin: 0; white-space: nowrap; }
.when .sep { padding-inline: 0.6em; }

/* ---- contact: one quiet line, well below the promise ---- */
.contact { margin: 0; margin-block-start: var(--flow-loose); }
.contact a {
  color: inherit; text-decoration: none;
  border-block-end: 1px solid currentColor; padding-block-end: 3px;
  transition: opacity 0.2s ease;
}
.contact a:hover, .contact a:focus-visible { opacity: 0.6; }

/* ---- colophon row: centred line, scene switch at the right ----
   Three flex children — spacer, colophon, switch — with the outer two sharing
   the leftover space equally. That centres the colophon against the PAGE
   while keeping the switch in normal flow, so the two can never occupy the
   same pixels at any width. Below 560px the switch moves above the line. */
.colophon-row {
  grid-row: 3; align-self: end; inline-size: 100%;
  display: flex; align-items: flex-end; gap: 16px;
  padding-block-start: var(--flow-section);
}
.colophon-spacer, .colophon-end { flex: 1 1 0; min-width: 0; }
.colophon-end { display: flex; justify-content: flex-end; }
.colophon { flex: 0 1 auto; }
/* federal-spec flag (assets/img/swiss-flag.svg, Wappenschutzgesetz Annex 2).
   Crispness is owned by the ASSET (shape-rendering="crispEdges"), not by this
   size — a centred, tracked line can never guarantee an integral origin.
   16px is a type decision: it matches the 32-unit grid 1:1 at DPR 2 and reads
   as a mark beside 11px type. display:inline-block is REQUIRED — every theme
   sets a global img{display:block}. Spacing comes from .dot-sep alone
   (assets/flow.css), never a margin here. */
.swiss { display: inline-block; inline-size: 16px; block-size: 16px; vertical-align: -0.3em; }
.nowrap { white-space: nowrap; }

/* the scene switch itself is defined once, in assets/flow.css (shared with
   the site footer); only its placement is this page's business */
.scene-toggle { align-self: flex-end; }

/* ---- the small-text tier, on photography ----
   Everything below the date plate sits DIRECTLY on the leaf: the colophon,
   the contact link and the scene switch. Each direction's own sheet gives
   this tier its tertiary/muted token, which is correct over a flat page but
   NOT over a photograph — measured on the shipped plate it lands at 2.77:1
   (D daylight), well under the 4.5:1 AA needs at 11px.
   So the plate re-points the tier at --plate-ink, declared per direction
   below as that direction's BODY colour: the same value the whisper copy
   already uses over this exact plate at 6.3:1 upward. The tier stays
   subordinate through size, tracking and caps rather than through dimming.
   NB: this is deliberately NOT --on-photo. That token means "text on D's
   always-dark editorial band" (white); this plate follows the scene, so its
   ink has to invert with it. Two different problems, two tokens. */
.colophon, .contact, .scene-toggle { color: var(--plate-ink); }

@media (max-width: 560px) {
  .colophon-row { flex-wrap: wrap; justify-content: center; }
  .colophon-spacer { display: none; }
  .colophon-end { flex: 0 0 auto; order: -1; }
  .colophon { flex: 1 0 100%; text-align: center; }
}
/* dir:d */
/* ---- direction D · la maison: gold micro-accents, ink plate ---- */
html[data-theme="d"] .teaser-rule { color: var(--gold); }
html[data-theme="d"] .logotype { color: var(--ink); }
html[data-theme="d"] .when {
  font-family: var(--body); font-weight: 500; font-size: 11.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink);
  padding: 15px 34px; padding-inline-start: calc(34px + 0.24em);
}
html[data-theme="d"] .when .sep { color: var(--gold); }
html[data-theme="d"] { --plate-ink: var(--body-c); }
html[data-theme="d"] .contact { font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
/* /dir:d */