/* LATVERA lux homepage tail (lane B, WP2: BUILD-BRIEFS B2–B7; GRAMMAR §2–§9), rebalanced 2026-09-25 (owner review:
 * too much text and too many sliding bands below CONTOUR): no text marquee remains below CONTOUR, the envelope slides and
 * the "Start a project—" band are gone, and the one brand thesis now stands directly beneath HORIZON ([data-lux="thesis"]).
 * Every selector starts at a homepage root ([data-lux="thesis|systems|work|partners|closing|contact"]), so nothing here
 * reaches the protected zone. Roles, pills, chips, links and focus come from lux/primitives.css (weight 0,1,0); the rules
 * below only place them. Flow is the default of the work track and the marquee: the pinned / live layouts apply only under
 * the [data-lux-live] their primitives set, and the enquiry steps hide only under the form's own [data-lux-armed].
 * `!important` is used only against the named legacy rules it has to beat (recompose.css, systems-gateway.css, style.css). */

/* ── The thesis beneath HORIZON ([data-lux="thesis"]) ─────────────────────────────────────────────────────────────────
 * The one brand statement, moved from the partners slot: a quiet type beat between the hero film and the "More sky."
 * intro, filled word by word with the scroll (lux/fx.js [data-fx-fill]; static and whole under reduced motion). */
[data-lux="thesis"] {
  position:relative; box-sizing:border-box; padding:max(120px, calc(220 * var(--lux-unit))) var(--lux-edge) max(110px, calc(200 * var(--lux-unit)));
  /* the swell: the hero's ground at the top, the intro's ink (the collection stage behind #vision) at the foot, so the
   * hand-off to "More sky." has no hard edge */
  background:linear-gradient(var(--lux-ground) 30%, var(--lux-panel)); color:var(--lux-cream);
}
[data-lux="thesis"] .lux-thesis-statement {
  margin:0; max-width:16.5em; font-size:clamp(34px, calc(100 * var(--lux-unit)), 104px); line-height:1.02; letter-spacing:-.035em;
  font-weight:400; text-wrap:balance;
}

/* ── B2 Systems index (#systems) ─────────────────────────────────────────────────────────────────────────────────────
 * The type breath after CONTOUR: "Find your system." at mega, 120u, then the four count rows at lead (subordinate to the
 * menu's list) with "All systems ↗" starting at exactly 50 %. The id, class and data-systems-gateway stay (AT-01, AT-03);
 * this box beats recompose.css:22 and journey-motion.css:16,40. The swell starts here: ground → ink. */
html #systems.systems-gateway[data-lux="systems"] {
  height:auto !important; margin:0 !important; padding:var(--lux-break) var(--lux-edge) var(--lux-close) !important;
  border-top:0 !important; background:linear-gradient(var(--lux-ground), var(--lux-panel));
}
[data-lux="systems"] > .lux-mega { margin:0 0 calc(120 * var(--lux-unit)); }
/* "All systems ↗" starts at exactly 50 % and sits on the first index row's baseline, as the right-column counterpart of the
 * index rather than a stray link at the foot of the empty half (WP2-A9; ref:journey/desktop/frames/053_y11288.jpg). */
[data-lux="systems"] .lux-systems-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:baseline; }
[data-lux="systems"] .lux-index { display:flex; flex-direction:column; align-items:flex-start; }
[data-lux="systems"] .lux-index-row {
  display:flex; align-items:baseline; gap:12px; min-height:44px; padding:0; box-sizing:border-box;
  font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-taupe);
  text-decoration:none; transition:color .3s var(--lux-ease-ui);
}
[data-lux="systems"] .lux-index-row .lux-paren { flex:none; }
[data-lux="systems"] .lux-index-row:focus-visible { color:var(--lux-cream); }
[data-lux="systems"] .lux-systems-row > .lux-link { justify-self:start; color:var(--lux-cream); }
@media (hover:hover) and (pointer:fine) {
  [data-lux="systems"] .lux-index-row:hover { color:var(--lux-cream); }
}

/* ── B3 Selected work (#work) ────────────────────────────────────────────────────────────────────────────────────────
 * The opener continues the swell (ink → ground), then three activity cards. The shim .work-track stays [hidden] and
 * measures 0 (AT-02, AT-04); .work-list is never styled (AT-07). */
[data-lux="work"] { position:relative; }
[data-lux="work"] .lux-opener {
  padding:var(--lux-break) var(--lux-edge) var(--lux-close);
  background:linear-gradient(var(--lux-panel), var(--lux-ground));
}
[data-lux="work"] .lux-opener > .lux-mega { margin:0; }
[data-lux="work"] .lux-opener > .lux-lead { margin:calc(60 * var(--lux-unit)) 0 0 50%; }

/* Flow — the default: a native vertical list (touch, phone, reduced motion, no JS, a failed build, short landscape).
 * The gap is B3's 50 px (phone: 160 px, below). The image is capped so that it, the title, the "Visualization" line and the
 * scope fit one viewport together (WP2-A8: at full width a 1.4 image is 1424 × 1017 at 1440, taller than the screen);
 * 176 px = the text block under it (24 + 37 + 10 + 20 + 12 + 39 at 1440) + the 8 px frame + a 26 px breath. */
[data-lux="work"] .lux-track { position:relative; }
[data-lux="work"] .lux-track-stage { position:relative; }
[data-lux="work"] .lux-track-row { display:flex; flex-direction:column; gap:50px; padding:0 8px; }
[data-lux="work"] .lux-activity {
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr); align-content:start;
  color:var(--lux-cream); text-decoration:none;
}
[data-lux="work"] .lux-activity-media {
  grid-area:1 / 1; position:relative; display:block; width:100%; aspect-ratio:1.4; max-height:calc(100svh - 176px); overflow:hidden;
  border-radius:var(--radius); background:var(--lux-panel);
}
[data-lux="work"] .lux-activity-img { position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; object-fit:cover; }
/* Functional scrims (GRAMMAR §2): only under text or chips that sit on the photograph. */
[data-lux="work"] .lux-activity-media::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--lux-scrim-bottom);
}
[data-lux="work"] .lux-activity > .lux-chips {
  grid-area:1 / 1; align-self:end; justify-self:start; z-index:2;
  margin:0 0 calc(var(--lux-edge) - 8px) calc(var(--lux-edge) - 8px);
}
[data-lux="work"] .lux-activity-top {
  grid-area:2 / 1; display:flex; flex-direction:column; gap:10px; padding:24px calc(var(--lux-edge) - 8px) 0;
}
[data-lux="work"] .lux-activity-top > .lux-small { color:var(--lux-taupe); }
[data-lux="work"] .lux-activity-caption {
  grid-area:3 / 1; padding:12px calc(var(--lux-edge) - 8px) 0; max-width:calc(640px + 2 * (var(--lux-edge) - 8px));
  color:var(--lux-taupe); text-wrap:pretty;
}
[data-lux="work"] .lux-work-more { padding:calc(60 * var(--lux-unit)) var(--lux-edge) 0; }
[data-lux="work"] .lux-work-more > .lux-link { font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream); }

/* Pinned — desktop fine pointer, only under .lux-track[data-lux-live] (set by LatveraLux.track once its trigger exists).
 * The travel is CSS, never a JS write (V3-11): three cards + gaps + padding − the page width. */
[data-lux="work"] .lux-track[data-lux-live] {
  --lux-card-w:min(calc(1558 * var(--lux-unit)), calc((100svh - 16px) * 1.32));
  --lux-travel:calc(3 * (var(--lux-card-w) + 8px) + 8px - var(--lux-w, 100vw));
  height:calc(100svh + var(--lux-travel));
}
[data-lux="work"] .lux-track[data-lux-live] .lux-track-stage { position:sticky; top:0; height:100svh; overflow:clip; }
[data-lux="work"] .lux-track[data-lux-live] .lux-track-row {
  flex-direction:row; gap:8px; width:max-content; height:100%; padding:8px; box-sizing:border-box;
}
[data-lux="work"] .lux-track[data-lux-live] .lux-activity {
  display:block; flex:0 0 var(--lux-card-w); width:var(--lux-card-w); height:calc(100svh - 16px);
  border-radius:var(--radius); overflow:hidden; background:var(--lux-panel);
}
[data-lux="work"] .lux-track[data-lux-live] .lux-activity-media { position:absolute; inset:0; width:auto; aspect-ratio:auto; max-height:none; border-radius:0; }
[data-lux="work"] .lux-track[data-lux-live] .lux-activity-img { width:112%; }
/* Card 1 moves right (xPercent 0 → +10), cards 2–3 move left: each image always covers its card (V3-21). */
[data-lux="work"] .lux-track[data-lux-live] .lux-activity:first-child .lux-activity-img { left:-12%; }
[data-lux="work"] .lux-track[data-lux-live] .lux-activity-media::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--lux-scrim-top);
}
[data-lux="work"] .lux-track[data-lux-live] .lux-activity-top {
  position:absolute; top:0; left:0; right:0; z-index:2; gap:4px;
  padding:calc(50 * var(--lux-unit)) calc(var(--lux-edge) - 8px);
}
[data-lux="work"] .lux-track[data-lux-live] .lux-activity-top > .lux-title { max-width:calc(900 * var(--lux-unit)); }
[data-lux="work"] .lux-track[data-lux-live] .lux-activity-top > .lux-small { color:var(--lux-cream); }
[data-lux="work"] .lux-track[data-lux-live] .lux-activity-caption {
  position:absolute; left:calc(var(--lux-edge) - 8px); bottom:calc(50 * var(--lux-unit)); z-index:2; padding:0;
  max-width:calc(640 * var(--lux-unit)); color:var(--lux-cream); text-wrap:balance;
}
[data-lux="work"] .lux-track[data-lux-live] .lux-activity > .lux-chips {
  position:absolute; right:calc(var(--lux-edge) - 8px); bottom:calc(50 * var(--lux-unit)); margin:0;
}

/* B4 partners: original marks and cinematic ribbon live in capsules/partners.css. */

/* ── B5 Closing card (section.closing-image) ─────────────────────────────────────────────────────────────────────────
 * One full-bleed in-band photograph and the tagline bottom-left at mega. The three class names and data-parallax stay on
 * purpose: the app's scale / radius / parallax tweens (app.js:444-448) drive the card. The headline sits above the Menu
 * pill lane (bottom 24 + 48 px), so the persistent pill never lands on it (B5 check 6, MC-02). */
html [data-lux="closing"] { position:relative; z-index:1; }
html [data-lux="closing"] .closing-frame { height:calc(100svh - 16px); min-height:0; }
/* inset −1px (fix round 2, WP2-R2-07): under the app's scale / radius transforms the frame's clip and a 0-inset scrim can
 * part by a device pixel, and a bright 1 px seam of the photograph showed along the phone card's bottom edge; the frame's
 * own overflow clip trims the extra pixel. */
html [data-lux="closing"] .closing-frame::after {
  content:""; position:absolute; inset:-1px; z-index:1; pointer-events:none; background:var(--lux-scrim-bottom), var(--lux-scrim-left) !important;
}
html [data-lux="closing"] .closing-copy {
  top:auto; left:calc(var(--lux-edge) - 8px); right:calc(var(--lux-edge) - 8px); bottom:max(calc(40 * var(--lux-unit)), 72px);
  z-index:2; display:flex; justify-content:flex-start; align-items:flex-end; text-shadow:none;
}
html [data-lux="closing"] .closing-copy::before { content:none; }
html [data-lux="closing"] .closing-copy h2 {
  margin:0; font-size:var(--lux-fs-mega); line-height:.94; letter-spacing:-.06em; font-weight:400; color:var(--lux-cream);
}

/* ── B7 Enquiry (#contact) in Reserve anatomy ────────────────────────────────────────────────────────────────────────
 * The ink panel is framed on the ground: 8 px inset, var(--radius) corners (ref:journey/extra/desktop/04-reserve-header/
 * 02-settled.jpg: #2a2725 panel on the darker page). A panel-coloured section would hide the frame and end in a hard
 * horizontal edge (WP2-A4). Every js/contact.js and app.js contract stays in place: ids, names, labels wrapping their
 * inputs, error spans, the honeypot. Steps (2)–(4) hide only under [data-lux-armed]. */
/* The top padding is the breath after the closing card (the "Start a project—" band that used to sit here is gone: it
 * introduced this same form a second time). Floor 60 px for the phone and mid widths. */
[data-lux="contact"] { position:relative; padding:max(60px, calc(120 * var(--lux-unit))) 8px 8px; background:var(--lux-ground); }
[data-lux="contact"] .lux-contact-panel {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start;
  padding:calc(100 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(30 * var(--lux-unit));
  border-radius:var(--radius); background:var(--lux-panel);
}
[data-lux="contact"] .lux-contact-copy { display:flex; flex-direction:column; align-items:flex-start; padding-right:calc(120 * var(--lux-unit)); }
[data-lux="contact"] .lux-contact-copy > .lux-name { margin:0 0 calc(40 * var(--lux-unit)); }
[data-lux="contact"] .lux-contact-copy > .lux-link {
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
[data-lux="contact"] #catalogProcess { align-self:stretch; margin:0 0 calc(20 * var(--lux-unit)); }

/* The process disclosure (catalog-experience.js processMarkup): restyled only here, never bare .lv-product (AT-17). */
[data-lux="contact"] .lv-process { margin:0; color:var(--lux-cream); }
/* A closed disclosure's content is not rendered, but Chromium still lays it out under ::details-content; keep it out of
 * layout until the disclosure opens, so nothing unseen overflows the panel or reaches hit-testing. */
[data-lux="contact"] :is(.lv-process, .lux-form) details:not([open]) > :not(summary) { display:none; }
[data-lux="contact"] .lv-process .lv-disclosure { border-top:1px solid var(--lux-hair); border-bottom:1px solid var(--lux-hair); }
[data-lux="contact"] .lv-process .lv-disclosure summary {
  display:flex; align-items:center; gap:12px; min-height:72px; padding:14px 0; cursor:pointer; list-style:none;
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
[data-lux="contact"] .lv-process summary > .lv-line-icon { display:none; }
[data-lux="contact"] .lv-process summary > .lv-summary-meta {
  display:inline; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
[data-lux="contact"] .lv-process summary > .lv-summary-toggle {
  display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  background:var(--lux-cream); color:var(--ink); transition:background-color .2s var(--ease);
}
[data-lux="contact"] .lv-process summary > .lv-summary-toggle svg { width:18px; height:18px; stroke-width:1.6; }
[data-lux="contact"] .lv-process summary:focus-visible { outline:2px solid var(--cream); outline-offset:3px; box-shadow:0 0 0 5px var(--ground); border-radius:0; }
[data-lux="contact"] .lv-process .lv-disclosure-copy,
[data-lux="contact"] .lv-process .lv-process-steps p {
  max-width:none; margin:0; padding:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
[data-lux="contact"] .lv-process .lv-disclosure-copy { padding:0 0 calc(20 * var(--lux-unit)); }
[data-lux="contact"] .lv-process .lv-process-steps { display:block; margin:0; padding:0; list-style:none; }
[data-lux="contact"] .lv-process .lv-process-steps li {
  display:grid; grid-template-columns:36px minmax(0, 1fr); gap:12px; padding:14px 0; border-top:1px solid var(--lux-hair);
}
[data-lux="contact"] .lv-process .lv-process-steps li > span,
[data-lux="contact"] .lv-process .lv-process-steps h4 {
  margin:0; padding:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; font-weight:400;
}
[data-lux="contact"] .lv-process .lv-process-steps li > span { color:var(--lux-taupe); }
[data-lux="contact"] .lv-process .lv-process-steps h4 { color:var(--lux-cream); }
[data-lux="contact"] .lv-process .lv-source-link {
  display:inline-block; margin:6px 0 16px; padding:12px 0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small);
  color:var(--lux-cream); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em;
}

/* The form: text-only fields, parenthetical step labels, a 1 px taupe underline with a cream line that grows on focus. */
[data-lux="contact"] .lux-form { display:flex; flex-direction:column; padding:0; }
[data-lux="contact"] .lux-form label {
  display:block; margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
[data-lux="contact"] .lux-form .lux-steps > * + * { margin-top:calc(40 * var(--lux-unit)); }
[data-lux="contact"] .lux-form .lux-steps { padding-top:calc(40 * var(--lux-unit)); }
[data-lux="contact"] .lux-form .form-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:calc(40 * var(--lux-unit)); }
[data-lux="contact"] .lux-form :is(input:not([type="file"]):not([type="hidden"]), textarea) {
  display:block; width:100%; min-height:0; margin:10px 0 0; padding:10px 0 12px; box-sizing:border-box;
  border:0; border-bottom:1px solid var(--lux-taupe); border-radius:0; background:transparent;
  background-image:linear-gradient(var(--lux-cream), var(--lux-cream)); background-repeat:no-repeat;
  background-origin:border-box; background-position:0 100%; background-size:0% 1px;
  color:var(--lux-cream); font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; font-weight:400;
  transition:background-size .3s var(--lux-ease-fill);
}
[data-lux="contact"] .lux-form textarea { height:auto; resize:none; field-sizing:content; min-height:calc(3lh + 22px); }
[data-lux="contact"] .lux-form :is(input, textarea)::placeholder { color:var(--lux-taupe); opacity:1; }
[data-lux="contact"] .lux-form :is(input:not([type="file"]):not([type="hidden"]), textarea):focus { background-size:100% 1px; }
[data-lux="contact"] .lux-form small { margin-left:6px; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe); }
[data-lux="contact"] .lux-form .cform__err { margin-top:8px; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); }
[data-lux="contact"] .lux-form .form-note { margin:10px 0 0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); color:var(--lux-taupe); }
[data-lux="contact"] .lux-form .form-note:empty { display:none; }
[data-lux="contact"] .lux-form input[type="file"] { margin-top:10px; font-size:var(--lux-fs-small); color:var(--lux-taupe); }
[data-lux="contact"] .lux-form input[type="file"]::file-selector-button {
  min-height:44px; margin-right:12px; padding:0 18px; border:1px solid var(--lux-chip-dim); border-radius:999px;
  background:transparent; color:var(--lux-cream); font:inherit;
}

/* (4) Add drawings or more details: the summary in small cream, the line icon hidden, "+" drawn in a 44 px disc. */
[data-lux="contact"] .lux-form .optional-fields { margin:0; }
[data-lux="contact"] .lux-form .optional-fields summary {
  display:flex; align-items:center; gap:12px; min-height:44px; margin:0; cursor:pointer; list-style:none;
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
[data-lux="contact"] .lux-form .optional-fields svg { display:none; }
[data-lux="contact"] .lux-form .optional-fields[open] summary { margin-bottom:calc(20 * var(--lux-unit)); }
[data-lux="contact"] .lux-form .optional-fields > * + * { margin-top:calc(30 * var(--lux-unit)); }
/* The kept "+" text node is hidden (font-size 0); the two bars are drawn out of flow, centred on the disc by inset + auto
 * margins, so no anonymous box can shift them (WP2-A3: as grid items they centred in an implicit first row only). */
[data-lux="contact"] .lux-form .optional-fields-toggle {
  position:relative; display:block; flex:0 0 44px; width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--lux-cream); color:transparent; font-size:0; line-height:0; transition:transform .5s var(--lux-ease-ui);
}
[data-lux="contact"] .lux-form .optional-fields-toggle::before,
[data-lux="contact"] .lux-form .optional-fields-toggle::after {
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:2px; background:var(--ink);
}
[data-lux="contact"] .lux-form .optional-fields-toggle::after { transform:rotate(90deg); }
[data-lux="contact"] .lux-form .optional-fields[open] .optional-fields-toggle { transform:rotate(135deg); }
[data-lux="contact"] .lux-form .optional-fields summary:focus-visible { outline:2px solid var(--cream); outline-offset:3px; box-shadow:0 0 0 5px var(--ground); border-radius:0; }

/* Status above the bar; the bar is Reserve's black summary stadium: the selection left, Send right. */
[data-lux="contact"] .lux-form .form-status { margin:calc(30 * var(--lux-unit)) 0 0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); color:var(--lux-taupe); }
[data-lux="contact"] .lux-form .form-status:empty { margin:0; }
[data-lux="contact"] .lux-bar {
  display:flex; align-items:center; justify-content:space-between; gap:16px; box-sizing:border-box;
  min-height:max(72px, calc(100 * var(--lux-unit))); margin-top:calc(40 * var(--lux-unit));
  padding:0 calc(20 * var(--lux-unit)) 0 calc(40 * var(--lux-unit)); border-radius:999px; background:var(--lux-ground);
}
/* Reserve's bar carries content (ref:journey/extra/desktop/04-reserve-header/02-settled.jpg: Stay · Cost · Next). Until the
 * selection line has text (enquireAbout() writes it, app.js:548), there is nothing to summarise: the stadium is not drawn
 * and Send stands alone at the right, instead of an empty black capsule that reads as a second field (WP2-A4). */
[data-lux="contact"] .lux-bar:not(:has(> .catalog-enquiry-selection:not([hidden]))) { min-height:0; padding:0; background:none; }
[data-lux="contact"] .lux-bar > .catalog-enquiry-selection {
  margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
[data-lux="contact"] .lux-bar > .lux-pill { margin:0 0 0 auto; justify-content:center; border:0; }
[data-lux="contact"] .lux-bar > .lux-pill .arrow {
  display:inline; flex:none; width:auto; height:auto; border-radius:0; background:none; color:var(--ink);
  font-size:19px; line-height:1; transform:none; transition:transform .2s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  [data-lux="contact"] .lux-bar > .lux-pill:hover { background:var(--lux-pill-hover); color:var(--ink); }
  [data-lux="contact"] .lux-bar > .lux-pill:hover .arrow { transform:translate(2px, -2px); }
  [data-lux="contact"] .lv-process summary:hover > .lv-summary-toggle,
  [data-lux="contact"] .lux-form .optional-fields summary:hover .optional-fields-toggle { background:var(--lux-pill-hover); }
}
/* Reserve's progression: the one hidden state, set by lux/home.js (never under reduced motion or without JS). */
[data-lux="contact"] #contactForm[data-lux-armed]:not([data-lux-open]) .lux-steps { display:none; }

/* ── Density step (GRAMMAR §1.2: ≤ 1000 px the enquiry stacks) ─────────────────────────────────────────────────────── */
@media (max-width:1000px) {
  [data-lux="contact"] .lux-contact-panel { grid-template-columns:minmax(0, 1fr); row-gap:calc(60 * var(--lux-unit)); }
  [data-lux="contact"] .lux-contact-copy { padding-right:0; }
}

/* ── Short landscape (GRAMMAR §1.2): no pinned stage ──────────────────────────────────────────────────────────────── */
@media (max-height:540px) and (orientation:landscape) {
  [data-lux="work"] .lux-activity-media { aspect-ratio:2; }
}

/* ── Portrait viewports: the closing card is near-square, as on the reference phone (ref:journey/phone/frames/041_y8779.jpg,
 * ≈ 1.06 : 1). A 16:9 render covering a full-height portrait card would be upscaled 2–4× and read soft. ─────────────────── */
@media (orientation:portrait) {
  html [data-lux="closing"] .closing-frame { height:min(calc(100svh - 16px), calc((100vw - 16px) * 1.06)); }
}

/* ── Phone tree (≤ 700 px: fixed px, mega = 17vw; GRAMMAR §1.2) ─────────────────────────────────────────────────────── */
@media (max-width:700px) {
  html #systems.systems-gateway[data-lux="systems"] { padding:140px 24px 80px !important; }
  [data-lux="systems"] > .lux-mega { margin-bottom:60px; }
  [data-lux="systems"] .lux-systems-row { grid-template-columns:minmax(0, 1fr); row-gap:20px; }

  [data-lux="work"] .lux-opener { padding:140px 24px 80px; }
  [data-lux="work"] .lux-opener > .lux-lead { margin:20px 0 0; }
  /* each project its own moment: never more than two photographs in one phone viewport (GRAMMAR §6). A stated deviation
   * from B3's 50 px: at 50 px the 460 px card pitch shows three images in one 844 px viewport; at 160 px the gap from one
   * image's end to the image after next (873 px) exceeds the viewport */
  [data-lux="work"] .lux-track-row { gap:160px; }
  [data-lux="work"] .lux-activity-top { gap:8px; padding-top:20px; }
  [data-lux="work"] .lux-work-more { padding:40px 24px 0; }

  [data-lux="thesis"] { padding:96px 24px 48px; }

  html [data-lux="closing"] .closing-copy { left:16px; right:16px; bottom:30px; }

  [data-lux="contact"] .lux-contact-panel { row-gap:60px; padding:60px 16px 96px; border-radius:28px; }
  [data-lux="contact"] .lux-contact-copy > .lux-name { margin-bottom:30px; }
  [data-lux="contact"] .lux-form .form-row { grid-template-columns:minmax(0, 1fr); gap:30px; }
  [data-lux="contact"] .lux-form .lux-steps > * + * { margin-top:30px; }
  [data-lux="contact"] .lux-form .lux-steps { padding-top:30px; }
  [data-lux="contact"] .lux-bar { width:100%; min-height:72px; margin-top:30px; padding:0 12px 0 20px; border-radius:24px; }
}