/* LATVERA lux — CONTOUR chrome (BUILD-BRIEFS B1; GRAMMAR §2, §3.1 name, §7.3 name gate, §8.1 pill, §9).
 * CONTOUR wears the collection card the visitor has just seen five times: one name size at VELOX's box, held; the
 * couplet and the collection pill bottom-left; no type inside a closed aperture. One film, no chapter chips: the
 * material study that used to be chapter 2 is lux/surface-study.css.
 * Chrome only: the films, canvases, players, the aperture clip and every inline style contour-scroll.js writes stay the
 * transport's. Every selector starts at #facades[data-lux="contour"], so nothing here reaches the protected zone. */

/* ── Seam ground: the collection stage is --ink; CONTOUR continues it and swells to the page ground over one screen, so
 * no bare strip of ground sits between the two stages (the old 20 px margin becomes padding). Motion journey only: in
 * reduced motion the collection ends on the page ground already, and its last protected frame must not change. ──────── */
html.is-motion #facades[data-lux="contour"] {
  margin-top:0; padding-top:20px;
  background:linear-gradient(var(--ink), var(--ground) 100svh);
}
/* The aperture's own ground during the entrance: the page ground. */
html.is-motion #facades[data-lux="contour"] .contour-journey.is-scrubbing:not(.is-static) .contour-aperture {
  background:var(--ground);
}

/* ── Scrims: functional only, under the type that sits on the films (T-1: the left-strong scrim for the names). ─────── */
#facades[data-lux="contour"] .contour-chapter .contour-shade {
  background:var(--lux-scrim-bottom), var(--lux-scrim-left-strong) !important;
}

/* ── Names: VELOX's box — x 32, centred on the card, the name role, held (the fade constants live in contour-scroll.js). */
#facades[data-lux="contour"] .contour-title {
  left:24px; right:auto; top:0; bottom:0;
  display:flex; flex-direction:column; justify-content:center;
  width:fit-content; text-shadow:none;
  pointer-events:auto; /* a name is text, selectable like VELOX's (facades.css made it click-through; nothing clickable lies under it) */
}
#facades[data-lux="contour"] .contour-title > :is(h2, h3) {
  margin:0; font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; font-weight:400;
  color:var(--cream); text-shadow:none;
  transition:opacity .5s var(--lux-ease-ui), transform .5s var(--lux-ease-ui);
}
/* Name gate (GRAMMAR §7.3): no type inside a closed aperture. The hidden state exists only while lux/contour.js has its
 * observer live (#facades[data-lux-gate-armed]); without it the name simply shows. */
#facades[data-lux="contour"][data-lux-gate-armed] .contour-aperture[data-lux-gate="closed"] .contour-title > * {
  opacity:0; transform:translateY(32px);
}
/* The end of the architecture's hold (lux/contour.js (e), progress ≥ nameOut ≈ .73): "CONTOUR" leaves as a .5 s ui
 * toggle, up and out, and comes back the same way on scroll-up — the reference's house title is toggled, never scrubbed
 * (R2 §2.4) — so no settled frame of the film's end shows a half-faded name over the building. The transport's own
 * wrapper fade (contour-scroll.js timeline.nameOut → nameGone) still runs underneath and is the fallback whenever the
 * gate is not armed. */
#facades[data-lux="contour"][data-lux-gate-armed][data-lux-name-out] [data-contour-chapter="architecture"] .contour-title > * {
  opacity:0; transform:translateY(-32px);
}
/* The card's bottom chrome follows the same gate, by opacity, as the collection card's chrome is revealed with its card
 * (journey-motion.css:35-38): no pill cut by the aperture edge. While hidden it takes no clicks (an invisible pill must
 * not open a route from what looks like bare film). The pill stays in the tab order and in the accessibility tree, and
 * when it holds keyboard focus it shows at once and takes clicks again (the last rule of this group). Every way into
 * CONTOUR lands past the aperture's end (lux/contour.js (c)), so the gate is open wherever a visitor arrives. */
#facades[data-lux="contour"] :is(.contour-caption > p, .contour-destination) {
  transition:opacity .5s var(--lux-ease-ui);
}
#facades[data-lux="contour"][data-lux-gate-armed] .contour-aperture[data-lux-gate="closed"] :is(.contour-caption > p, .contour-destination) {
  opacity:0; pointer-events:none;
}
/* A control that holds keyboard focus shows at once, in every state — gate closed or the gate's own fade-in after a
 * focus jump (Tab from the hero lands on the pill, the page jumps and the gate opens). Equal or higher specificity than
 * the hiding rule above, and later in the source. */
#facades[data-lux="contour"] .contour-destination:focus-within,
#facades[data-lux="contour"][data-lux-gate-armed] .contour-aperture[data-lux-gate="closed"] .contour-destination:focus-within {
  opacity:1; pointer-events:auto; transition:none;
}

/* ── Couplet: the collection couplet (14 / 1.4 / −.015em, cream). Without the journey it sits above the pill, which now
 * lives in this one card in every mode (the old in-flow rule that dropped it to the card's foot, because the pill used to
 * sit in chapter 2's card, is gone: it collided with the pill once chapter 2 left the pin). ─────────────────────────── */
#facades[data-lux="contour"] .contour-caption {
  left:24px; right:auto; bottom:84px; display:block; gap:0; text-shadow:none;
}
#facades[data-lux="contour"] .contour-caption p {
  max-width:350px; font-size:14px; line-height:1.4; letter-spacing:-.015em; font-weight:400;
  color:var(--cream); text-shadow:none;
}
/* In the journey it stands beside the pill, on the pill's axis, as VELOX's does (lux/contour.js measures the pill).
 * Only above the density step (GRAMMAR §1.2, 1000 px): below ~930 px the couplet beside the pill would reach the
 * bottom-centred Menu pill, which stays at the bottom from #facades on (B9), so there it keeps its place above the pill. */
@media (min-width:1001px) {
  #facades[data-lux="contour"][data-lux-cta] .contour-journey.is-scrubbing:not(.is-static) .contour-caption {
    left:calc(24px + var(--lux-cta-w, 0px) + 24px); bottom:24px; height:48px;
    display:flex; align-items:center;
  }
}

/* ── Pill: the collection pill (GRAMMAR §8.1), bottom-left at the VELOX pill's box; the disc arrow becomes the glyph. ─── */
#facades[data-lux="contour"] .contour-destination { left:24px; right:auto; bottom:24px; }
#facades[data-lux="contour"] .contour-destination .lux-pill {
  --lux-focus-r:999px;
  display:inline-flex; align-items:center; justify-content:flex-start; gap:12px; box-sizing:border-box;
  width:auto; height:48px; min-height:48px; padding:12px 18px;
  border:1px solid var(--cream); border-radius:999px; background:var(--cream); color:var(--ink);
  font-size:14px; line-height:1.25; letter-spacing:0; font-weight:400; white-space:nowrap;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
#facades[data-lux="contour"] .contour-destination .lux-pill .arrow {
  display:block; flex:0 0 auto; width:auto; height:auto; padding:0;
  background:none; border-radius:0; color:var(--ink); font-size:19px; line-height:1;
  transform:none; transition:transform .2s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  #facades[data-lux="contour"] .contour-destination .lux-pill:hover {
    border-color:var(--lux-pill-hover); background:var(--lux-pill-hover); color:var(--ink);
  }
  #facades[data-lux="contour"] .contour-destination .lux-pill:hover .arrow { transform:translate(2px, -2px); }
}

/* ── Focus (GRAMMAR §9): the lux ring with each control's own radius, 3 px out (facades.css sets 5 px). ──────────────── */
#facades[data-lux="contour"] :is(a, button):focus-visible {
  outline:2px solid var(--cream); outline-offset:3px; box-shadow:0 0 0 5px var(--ground);
}
#facades[data-lux="contour"] .lux-pill:focus-visible { border-radius:999px; }
/* The sticky stage is always in view and the pill never meets the Menu pill (measured clear at p320, p390, t768, d1024,
 * d1440, d1920), so the primitives' Menu-pill clearance (scroll-margin-bottom 96 / 84 px) is not needed here: with it
 * every Tab onto the pill scrolled the page ≈ 58 px and scrubbed the film forward. */
#facades[data-lux="contour"] .contour-stage .lux-pill { scroll-margin-bottom:0; }

/* ── The end anchor sits at the end of #facades (after the material study). ─────────────────────────────────────────── */
#facades[data-lux="contour"] .lux-anchor-end { top:auto; bottom:0; }

/* ── Phone tree: the seam follows facades.css's width switch (its 20 px margin is 0 at ≤ 700 px in any orientation). ── */
@media (max-width:700px) {
  html.is-motion #facades[data-lux="contour"] { padding-top:0; }
}
/* ── Phone portrait (≤700, portrait — the transport's own phone branch, contour-scroll.js mobile query): the VELOX phone
 * boxes — name 14.5vw at x 30 centred on 44 % of the card, couplet above the pill, pill clear of the Menu pill lane. ── */
@media (max-width:700px) and (orientation:portrait) {
  #facades[data-lux="contour"] .contour-title { left:24px; top:0; bottom:auto; height:88%; }
  #facades[data-lux="contour"] .contour-title > :is(h2, h3) { font-size:14.5vw; }
  #facades[data-lux="contour"] .contour-caption { left:24px; bottom:150px; }
  #facades[data-lux="contour"] .contour-caption p { max-width:290px; }
  #facades[data-lux="contour"] .contour-destination { left:24px; bottom:90px; }
}
/* ── Short landscape (≤ 540 px tall: a phone on its side, a short window): the collection card's landscape boxes. VELOX
 * there keeps its name above and puts its pill and couplet on ONE row 84 px above the card's foot, clear of the
 * bottom-centre Menu pill (systems-cta-v29.css:229-245; style.css:776, 794). CONTOUR does the same: the name is sized by
 * the height (15svh, 48–78 px; at ≥ 701 px never above VELOX's 7vw) and centred in the band above that row, and the
 * couplet stands beside the pill on its axis. A 375–390 px card is too short for the grammar's bottom scrim (.72 → 0 over
 * 34 % ≈ 125 px) to carry that row, so this tree's bottom scrim holds .72 over the lowest 15 % and fades out by 55 % —
 * the same functional scrim, the same maximum, deeper — which reads as the floor's own shadow (_lux/build/WP1/fix2). The
 * name size is a stated B1 exception to GRAMMAR §3.1, like the phone's 14.5vw. Without the scrubbing journey the couplet
 * stays above the pill. ────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-height:540px) and (orientation:landscape) {
  #facades[data-lux="contour"] .contour-chapter .contour-shade {
    background:linear-gradient(to top, rgba(24,23,23,.72), rgba(24,23,23,.72) 15%, rgba(24,23,23,0) 55%), var(--lux-scrim-left-strong) !important;
  }
  #facades[data-lux="contour"] .contour-title { top:0; bottom:100px; height:auto; }
  #facades[data-lux="contour"] .contour-title > :is(h2, h3) { font-size:clamp(48px, 15svh, 78px); }
  #facades[data-lux="contour"] .contour-journey.is-scrubbing:not(.is-static) .contour-destination { bottom:84px; }
  #facades[data-lux="contour"][data-lux-cta] .contour-journey.is-scrubbing:not(.is-static) .contour-caption {
    left:calc(24px + var(--lux-cta-w, 0px) + 24px); bottom:84px; height:48px;
    display:flex; align-items:center;
  }
}
@media (max-height:540px) and (orientation:landscape) and (min-width:701px) {
  #facades[data-lux="contour"] .contour-title > :is(h2, h3) { font-size:min(clamp(48px, 15svh, 78px), max(48px, 7vw)); }
}