/* LATVERA lux global chrome (lane B, WP3: BUILD-BRIEFS B8 footer, B9 menu + Menu pill; GRAMMAR §7.3, §8.14, §8.15, §9).
 * Roots: footer[data-lux="footer"], #menuDialog[data-lux="menu"] and html.lux-tail #menuToggle (never
 * html:not(.in-monument): inside #vision and #collection the app hides and docks the pill, and those pixels are protected).
 * Roles, pills, links, the text roll and focus come from lux/primitives.css (weight 0,1,0); the rules below place them.
 * Nothing here hides content: the wordmark letters hide only under the [data-lux-armed] lux/chrome.js sets once their
 * trigger exists, and the menu's opening from-state is written by GSAP, never by CSS. `!important` appears only against the
 * two named legacy rules it has to beat: style.css:951 [data-dock="top"] and style.css:61 [hidden] (AT-10). */

/* ── B9 Menu pill: from #facades on it never moves and never hides ───────────────────────────────────────────────────
 * html.lux-tail is on while #facades' top is above the viewport bottom (lux/chrome.js). The app's placeMenu() keeps
 * computing (app.js:54-72); from here on its dock / hide result is simply drawn at the bottom centre. Geometry, colour,
 * label, shadow and the hero skin stay the app's (O1 T17). */
html.lux-tail #menuToggle[data-dock="top"] { top:auto !important; bottom:24px; }
html.lux-tail #menuToggle[hidden] { display:inline-flex !important; }
/* The pill's ring keeps its own 99px radius (engine.css:123-127 squares every focused control to 6px, MC-09); the
 * resting shadow stays under the halo. */
html.lux-tail #menuToggle:focus-visible {
  outline:2px solid var(--cream); outline-offset:3px; border-radius:99px;
  box-shadow:0 0 0 5px var(--ground), 0 4px 28px rgba(0, 0, 0, .11);
}
@media (max-width:700px) {
  html.lux-tail #menuToggle[data-dock="top"] { bottom:max(18px, env(safe-area-inset-bottom)); }
}

/* ── B8 Footer (GRAMMAR §8.15; ref:journey/desktop/frames/080_y17345.jpg, 082_y17718.jpg) ─────────────────────────────
 * The swell continues from the enquiry's ground: ground at the top (no hard edge under the framed panel, R4 L2) rising to
 * the ink panel colour at the page end, the reference footer's direction (#181717 → #332e2b, R3 §2.13). Overrides the
 * legacy .site-footer / .footer-word / .footer-bottom rules (style.css:257-260, 456-460). */
footer[data-lux="footer"] {
  margin:0; padding:0 0 88px; border-top:0; color:var(--lux-cream);
  background:linear-gradient(var(--lux-ground), var(--lux-panel));
  /* The fitted letters' content area (line-height .85 at 380–620 px) reaches past the 88 px bottom padding; Chromium counts
   * it as scrollable overflow, so from ≈1600 px the page would end in a strip of body ground under the footer (21 px at
   * 1920×1080; WP3-A1-01). The footer is the page's last box: nothing of it is drawn past its own bottom. */
  overflow-y:clip;
}
/* Top block (redesigned 2026-09-25; owner review: the moving slogan band, the slogan repeated under it and a ≈ 250 px void
 * above the rule are gone). Two columns of the same height: the sign-off — the site's one statement of the line, said
 * once — at the top of the text edge with the real contact details at its foot, the nav right-aligned opposite. The
 * last contact line and the last nav link share one baseline, so the rule follows the content, not an empty band. */
[data-lux="footer"] .lux-footer-top {
  display:flex; justify-content:space-between; align-items:stretch; gap:calc(60 * var(--lux-unit));
  padding:calc(160 * var(--lux-unit)) var(--lux-edge) calc(100 * var(--lux-unit));
}
[data-lux="footer"] .lux-footer-copy {
  display:flex; flex-direction:column; justify-content:space-between; gap:calc(60 * var(--lux-unit));
  flex:0 1 max(400px, calc(640 * var(--lux-unit))); min-width:0;
}
[data-lux="footer"] .lux-footer-copy > .lux-sub { margin:0; color:var(--lux-taupe); }
[data-lux="footer"] .lux-footer-disclosure { margin:calc(30 * var(--lux-unit)) 0 0; color:var(--lux-taupe); text-wrap:pretty; }
[data-lux="footer"] .lux-footer-contact { display:flex; flex-direction:column; align-items:flex-start; }
[data-lux="footer"] .lux-footer-contact a {
  display:block; font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; font-weight:400;
  color:var(--lux-cream); text-decoration:none; transition:color .5s var(--lux-ease-roll);
}
[data-lux="footer"] .lux-footer-nav { display:flex; flex:none; flex-direction:column; align-items:flex-end; }
/* sub role, cream; the text roll recolours the link itself to taupe (GRAMMAR §8.3, R3 L2). */
[data-lux="footer"] .lux-footer-nav a {
  display:block; font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; font-weight:400;
  color:var(--lux-cream); text-decoration:none; transition:color .5s var(--lux-ease-roll);
}
@media (hover:hover) and (pointer:fine) {
  [data-lux="footer"] .lux-footer-nav a:hover,
  [data-lux="footer"] .lux-footer-contact a:hover { color:var(--lux-taupe); }
  [data-lux="footer"] .footer-bottom :is(a, button):hover { color:var(--lux-taupe); }
}
/* Touch targets: 44 px on coarse pointers (MASTER §3.7); the desktop pitch stays the type's own 1.12 line (R3 §2.13). */
@media (pointer:coarse) {
  [data-lux="footer"] :is(.lux-footer-nav, .lux-footer-contact) a { display:flex; align-items:center; min-height:44px; }
}

/* The one full-opacity rule on the site, then the meta row: three equal columns — the address, the catalog, the year —
 * small taupe with cream keywords (the links and the year). The class string .footer-bottom stays exact (AT-09). */
[data-lux="footer"] .footer-bottom {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:center; gap:0 24px;
  margin:0; padding:calc(80 * var(--lux-unit)) var(--lux-edge); border-top:1px solid var(--lux-taupe);
  color:var(--lux-taupe); font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
}
[data-lux="footer"] .footer-bottom > div { display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; min-width:0; }
[data-lux="footer"] .footer-bottom > div:nth-child(2) { justify-content:center; }
[data-lux="footer"] .footer-bottom > div:nth-child(3) { justify-content:flex-end; }
[data-lux="footer"] .footer-bottom :is(a, button) {
  display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; gap:0; border:0; background:none;
  color:var(--lux-cream); font:inherit; letter-spacing:inherit; text-decoration:none; transition:color .3s var(--lux-ease-ui);
}
[data-lux="footer"] .footer-bottom #year { color:var(--lux-cream); }
/* Text links ring at their own square corners (engine.css:123-127 would round every focused control to 6px, MC-09). */
[data-lux="footer"] :is(a, button):focus-visible { border-radius:0; }

/* The wordmark: live text fitted by lux/chrome.js (font-size only; GRAMMAR §3.1 wordmark), 7 letters that each carry the
 * taupe → cream gradient, so their clip and slide carry it too. At −.04em tracking a glyph's ink overhangs its own box
 * (both A feet), and background-clip:text paints only inside the box, so the gradient text is drawn by a pseudo that
 * reaches .15em past the box; the letter's own glyph (the layout, the accessible text) stays transparent. The page ends in
 * the Menu pill's lane (88 px below it), so the pill never sits on the letters and a focused wordmark is never under it
 * (GRAMMAR §9 scroll clearance). */
[data-lux="footer"] .footer-word {
  display:block; margin:0 var(--lux-edge); padding:0; text-align:left; white-space:nowrap;
  font-size:var(--lux-wordmark, 21.5vw); line-height:.85; letter-spacing:-.04em; font-weight:400;
  color:var(--lux-cream); text-decoration:none;
  /* the letters slide in from the right inside the word's own box, never past the viewport edge (the fit puts the ink
   * exactly on the box, so the clip removes only empty side bearing) */
  overflow-x:clip; overflow-clip-margin:4px;
}
/* the first letter's side bearing moves out past the edge, so the stem of the L sits on it (written by lux/chrome.js) */
[data-lux="footer"] .footer-word .lux-letter:first-child { margin-left:var(--lux-wordmark-shift, 0px); }
[data-lux="footer"] .footer-word .lux-letter {
  position:relative; display:inline-block; color:transparent; -webkit-text-fill-color:transparent;
  transition:clip-path .9s var(--lux-ease-roll) calc(var(--i) * 10ms), transform .9s var(--lux-ease-roll) calc(var(--i) * 10ms);
}
[data-lux="footer"] .footer-word .lux-letter::before {
  content:attr(data-l); position:absolute; top:0; bottom:0; left:0; padding-right:.15em;
  background:linear-gradient(#b1a696, #f4efe7); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; pointer-events:none;
}
/* The one hidden state: only while the wordmark carries the [data-lux-armed] its own trigger's builder set (V3-13).
 * inset(0 0 0 100%) → inset(0 -.15em 0 0): the right inset opens to the pseudo's overhang, so the settled letter is whole. */
[data-lux="footer"] .footer-word[data-lux-armed] .lux-letter { clip-path:inset(0 -.15em 0 0); }
[data-lux="footer"] .footer-word[data-lux-armed]:not(.is-in) .lux-letter {
  clip-path:inset(0 0 0 100%); transform:translateX(var(--lux-letter-x, .6em));
}

/* Publication: the build injects its own collection nav before .footer-bottom (build-publication.mjs:75) and the lux
 * collection links step aside for it. The injected list joins the right-hand nav as ONE stack, directly under Contact, at
 * the nav's own size, colour, pitch, alignment and text roll (review 2026-09-26: it used to read as a second, small
 * taupe row above the rule, so the published footer had two navs). Only here the footer is a two-column grid: the top
 * block's box steps aside (display:contents on a plain div, no role), the sign-off spans the nav rows plus a slack row, so
 * its last contact line still shares the nav's last baseline (and a taller sign-off never opens a gap inside the nav),
 * and the rule, the meta row and the wordmark span the full width exactly as before. DOM order is reading and focus
 * order: Home, Selected work, Contact, then the four collections. The .footer-bottom literal is untouched. */
html[data-publication="true"] .lux-footer [data-lux-collection] { display:none; }
[data-lux="footer"] .publication-footer-nav {
  display:flex; flex-wrap:wrap; align-items:center; gap:0 30px; margin:0; padding:0 var(--lux-edge) calc(30 * var(--lux-unit));
  color:var(--lux-taupe); font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
}
[data-lux="footer"] .publication-footer-nav a { color:var(--lux-taupe); }
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto 1fr auto auto;
  column-gap:calc(60 * var(--lux-unit)); padding-top:calc(160 * var(--lux-unit));
}
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .lux-footer-top { display:contents; }
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .lux-footer-top > .lux-footer-copy {
  grid-column:1; grid-row:1 / 4; max-width:max(400px, calc(640 * var(--lux-unit)));
  margin:0 0 calc(100 * var(--lux-unit)) var(--lux-edge);
}
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .lux-footer-top > .lux-footer-nav { grid-column:2; grid-row:1; margin:0 var(--lux-edge) 0 0; }
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .publication-footer-nav {
  grid-column:2; grid-row:2; flex-direction:column; flex-wrap:nowrap; align-items:flex-end; gap:0;
  margin:0 var(--lux-edge) calc(100 * var(--lux-unit)) 0; padding:0;
  font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; font-weight:400; color:var(--lux-cream);
}
/* the link rule of .lux-footer-nav a; beats publication.css .publication-footer-nav a (inline-flex, min-height 44 px) */
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .publication-footer-nav a {
  display:block; min-height:0; font:inherit; letter-spacing:inherit; color:var(--lux-cream); text-decoration:none;
  transition:color .5s var(--lux-ease-roll);
}
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .footer-bottom { grid-column:1 / -1; grid-row:4; }
html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .footer-word { grid-column:1 / -1; grid-row:5; }
@media (hover:hover) and (pointer:fine) {
  html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .publication-footer-nav a:hover { color:var(--lux-taupe); }
}
@media (pointer:coarse) {
  html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .publication-footer-nav a { display:flex; align-items:center; min-height:44px; }
}

/* The footer nav's mask-jump layer (GRAMMAR §7.3): created by lux/chrome.js on the first jump, faded by GSAP. */
body > .lux-jump-mask { position:fixed; inset:0; z-index:90; background:var(--ground); opacity:0; visibility:hidden; pointer-events:none; }
/* After a footer jump, focus moves to the section's heading (lux/chrome.js, WCAG 2.4.3; WP3-A1-03) so the next Tab continues
 * from there. The heading is a reading position made focusable for that one focus, not a control: it draws no ring. The
 * attribute exists only while it holds that focus. */
[data-lux-jump-focus]:focus { outline:none; box-shadow:none; }

/* ── B9 Menu sheet (GRAMMAR §8.14; ref:journey/extra/desktop/00-menu/02-settled.jpg) ─────────────────────────────────
 * The dialog is the viewport box and never scrolls; the ink sheet sits in the 8 px frame and scrolls itself; the close pill
 * is the dialog's own child at the Menu pill's geometry, so it never scrolls with the sheet (V3-30, AT-31). Overrides
 * style.css:265-276, 462-470, 843, 950, 960, 966. */
#menuDialog[data-lux="menu"] { overflow:hidden; padding:0; background:transparent; }
/* The sheet blooms from the pill at once, as the reference's does (0.6 s from the press, R2 §2.9). The menu opens inside
 * the app's view transition, and its timeline plays once data-page-transition is removed (V3-14); with the route's root
 * crossfade (page-transition.css:3-11, 560–680 ms) that left ≈0.8 s of a dimmed page and a bare Close pill first
 * (WP3-A1-02). When the menu is what opens, the crossfade takes no time, so the play starts after the ≤ 240 ms decode
 * phase; the from-state is still what the transition ends on. Every other route, and closing the menu, keep the app's own
 * transition (the menu is closed in their new state). */
html:has(#menuDialog[data-lux="menu"][open])::view-transition-group(root),
html:has(#menuDialog[data-lux="menu"][open])::view-transition-old(root),
html:has(#menuDialog[data-lux="menu"][open])::view-transition-new(root) { animation-duration:0s; }
#menuDialog[data-lux="menu"]::backdrop { background:var(--lux-backdrop, rgba(24, 23, 23, .9)); -webkit-backdrop-filter:none; backdrop-filter:none; }
#menuDialog[data-lux="menu"] .lux-menu-sheet {
  position:absolute; inset:8px; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  border-radius:var(--radius); background:var(--lux-panel); color:var(--lux-cream);
  scrollbar-width:none;
}
#menuDialog[data-lux="menu"] .lux-menu-sheet::-webkit-scrollbar { display:none; }
#menuDialog[data-lux="menu"] .menu-top {
  position:absolute; top:0; left:0; display:block; width:0; height:0; min-height:0; margin:0; padding:0; overflow:visible;
  border:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* The text column: links from the top, the aside row at the bottom, the text at the page's 32 px edge (frame 8 +
 * card padding edge − 8, GRAMMAR §4 card content inset); the image card keeps the right 30vw of the sheet. */
#menuDialog[data-lux="menu"] .menu-layout {
  display:flex; flex-direction:column; justify-content:space-between; gap:calc(60 * var(--lux-unit));
  box-sizing:border-box; min-height:100%; margin:0;
  padding:calc(50 * var(--lux-unit)) calc(30vw + 16px + var(--lux-edge)) calc(var(--lux-edge) - 8px) calc(var(--lux-edge) - 8px);
}
#menuDialog[data-lux="menu"] .menu-links { display:flex; flex-direction:column; align-items:flex-start; }
/* menu role: taupe at rest → cream on hover, focus and aria-current (R3 §2.3). */
#menuDialog[data-lux="menu"] .menu-links a {
  display:block; width:fit-content; min-height:44px; margin:0; padding:0;
  font-size:var(--lux-fs-menu); line-height:1.05; letter-spacing:-.055em; font-weight:400;
  color:var(--lux-taupe); text-decoration:none; transition:color .3s var(--lux-ease-ui);
}
#menuDialog[data-lux="menu"] .menu-links a:is(:focus-visible, [aria-current]) { color:var(--lux-cream); }
#menuDialog[data-lux="menu"] .menu-links a:focus-visible { border-radius:0; }
@media (hover:hover) and (pointer:fine) {
  #menuDialog[data-lux="menu"] .menu-links a:hover { color:var(--lux-cream); }
}
#menuDialog[data-lux="menu"] .menu-aside { display:block; padding:0; } /* style.css:467 makes it a 2-column grid on phones */
/* The image card: 30vw × the sheet's height − 16 px at the right, image only, cover (GRAMMAR §6). */
#menuDialog[data-lux="menu"] .lux-menu-card {
  position:absolute; top:8px; right:8px; bottom:8px; width:30vw; margin:0; overflow:hidden;
  border-radius:var(--radius); background:var(--lux-ground);
}
#menuDialog[data-lux="menu"] .lux-menu-card > img {
  display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:58% 50%; border-radius:0;
}
/* The aside row at the bottom-left, small taupe: the note (its only place on the site), then the four L1 links in two
 * columns, the whole row clear of the close pill's centre lane (GRAMMAR §8.14; V1 m-16, V2 m6). */
#menuDialog[data-lux="menu"] .lux-menu-aside-row {
  display:grid; grid-template-columns:max-content max-content max-content; grid-template-rows:auto auto;
  align-items:center; column-gap:calc(50 * var(--lux-unit)); width:fit-content;
}
#menuDialog[data-lux="menu"] .lux-menu-note { grid-row:1 / span 2; grid-column:1; margin:0 calc(10 * var(--lux-unit)) 0 0; color:var(--lux-taupe); }
#menuDialog[data-lux="menu"] .menu-aside .lux-link {
  --lux-link-pad:max(0px, calc((44px - 1lh) / 2));
  display:inline-block; width:fit-content; min-height:0; margin:0; padding:var(--lux-link-pad) 0; gap:0;
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
  text-align:left; white-space:nowrap;
}
@media (hover:hover) and (pointer:fine) {
  #menuDialog[data-lux="menu"] .menu-aside .lux-link:hover { color:var(--lux-cream); }
}
/* The close pill: the Menu pill's exact box at the bottom centre (121.3 × 48, 24 px up; phone 114.8 × 46), "Close" where
 * "Menu" reads and × where the burger sits. One × per overlay (GRAMMAR §8.2, §8.14). */
#menuDialog[data-lux="menu"] > .lux-menu-close {
  --lux-focus-r:999px;
  position:absolute; left:50%; bottom:24px; z-index:2; transform:translateX(-50%);
  display:inline-flex; align-items:center; justify-content:space-between; gap:24px; box-sizing:border-box;
  width:121.3px; height:48px; min-height:0; margin:0; padding:0 22px; flex:none;
  border:1px solid var(--lux-cream); border-radius:999px; background:var(--lux-cream); color:var(--ink);
  font-size:19px; line-height:1; font-weight:400; box-shadow:none;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
#menuDialog[data-lux="menu"] > .lux-menu-close > span:first-child { font-size:14px; line-height:1.25; letter-spacing:0; }
#menuDialog[data-lux="menu"] > .lux-menu-close:focus-visible { box-shadow:0 0 0 5px var(--ground); }
@media (hover:hover) and (pointer:fine) {
  #menuDialog[data-lux="menu"] > .lux-menu-close:hover { border-color:var(--lux-pill-hover); background:var(--lux-pill-hover); color:var(--ink); }
}

/* Density step (GRAMMAR §1.2): below 1100 px the aside row would reach the close pill's lane, so the text column ends
 * above that lane instead. */
@media (max-width:1100px) {
  #menuDialog[data-lux="menu"] .menu-layout { padding-bottom:96px; }
  /* the meta row's columns stack their items and share one top line instead of wrapping unevenly */
  [data-lux="footer"] .footer-bottom { align-items:start; }
  [data-lux="footer"] .footer-bottom > div { flex-direction:column; align-items:flex-start; gap:0; }
  [data-lux="footer"] .footer-bottom > div:nth-child(2) { align-items:center; }
  [data-lux="footer"] .footer-bottom > div:nth-child(3) { align-items:flex-end; }
  [data-lux="footer"] .footer-bottom > div > span { display:block; padding-block:calc((44px - 1lh) / 2); }
}
/* Tablet widths: the address keeps its line (a lone "08505" under it read as a break, WP3-A1-06); the left column takes
 * the address's own width and the other two share the rest. */
@media (min-width:701px) and (max-width:1100px) {
  [data-lux="footer"] .footer-bottom { grid-template-columns:minmax(max-content, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  [data-lux="footer"] .footer-bottom > div:first-child > span { white-space:nowrap; }
}
/* Portrait tablets and phones (the phone tree below): the aside row follows the links on the 60 px step instead of sitting
 * on the sheet's bottom edge, so the sheet reads as one composed column, not links above a void above a note (the
 * reference phone menu keeps its note directly under the links; ref:journey/extra/phone/00-menu/02-settled.jpg;
 * WP3-A1-05). The padding-bottom that clears the Close pill's lane stays. */
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait) {
  #menuDialog[data-lux="menu"] .menu-layout { justify-content:flex-start; gap:60px; }
}

/* ── Phone tree (≤ 700 px: fixed px; GRAMMAR §1.2) ─────────────────────────────────────────────────────────────────── */
@media (max-width:700px) {
  /* Footer: the sign-off and the contact details, then the nav left-aligned in one column (ref:journey/phone/frames/
   * 044_y9423.jpg); the meta stacked; the wordmark fitted to 390 − 48. */
  [data-lux="footer"] .lux-footer-top { flex-direction:column; align-items:stretch; gap:48px; padding:96px 24px 48px; }
  [data-lux="footer"] .lux-footer-nav { align-items:flex-start; }
  [data-lux="footer"] .lux-footer-copy { flex:none; gap:32px; }
  [data-lux="footer"] .lux-footer-disclosure { margin-top:20px; }
  [data-lux="footer"] .footer-bottom { grid-template-columns:minmax(0, 1fr); gap:0; padding:30px 24px 40px; }
  [data-lux="footer"] .footer-bottom > div { flex-direction:column; align-items:flex-start; gap:0; }
  [data-lux="footer"] .footer-bottom > div:nth-child(2),
  [data-lux="footer"] .footer-bottom > div:nth-child(3) { justify-content:flex-start; align-items:flex-start; }
  [data-lux="footer"] .footer-bottom > div > span { padding:4px 0 10px; }
  [data-lux="footer"] .footer-word { margin:0 24px; }
  /* Publication (see the B8 publication block): one column — the sign-off and contact, then Home / Selected work /
   * Contact and the four collections as one left-aligned list, then the rule. */
  html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) {
    grid-template-columns:minmax(0, 1fr); grid-template-rows:none; column-gap:0; padding-top:96px;
  }
  html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .lux-footer-top > .lux-footer-copy { grid-column:1; grid-row:1; max-width:none; margin:0 24px 48px; }
  html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .lux-footer-top > .lux-footer-nav { grid-column:1; grid-row:2; margin:0 24px; }
  html[data-publication="true"] footer[data-lux="footer"]:has(> .publication-footer-nav) > .publication-footer-nav { grid-column:1; grid-row:3; align-items:flex-start; margin:0 24px 48px; }

  /* Menu: links 35 px, the card never shown (lazy, never fetched), the aside row in two rows, and the column ends above
   * the close pill's lane so its last link scrolls clear of it. */
  #menuDialog[data-lux="menu"] .menu-layout { justify-content:flex-start; gap:60px; padding:40px 16px calc(max(18px, env(safe-area-inset-bottom)) + 46px + 32px); }
  #menuDialog[data-lux="menu"] .lux-menu-card { display:none; }
  #menuDialog[data-lux="menu"] .lux-menu-aside-row { display:flex; flex-wrap:wrap; width:auto; gap:0 30px; }
  #menuDialog[data-lux="menu"] .lux-menu-note { flex:0 0 100%; margin:0 0 10px; }
  #menuDialog[data-lux="menu"] > .lux-menu-close { bottom:max(18px, env(safe-area-inset-bottom)); width:114.8px; height:46px; padding:0 20px; }
  #menuDialog[data-lux="menu"] > .lux-menu-close > span:first-child { font-size:13px; }
  #menuDialog[data-lux="menu"] .lux-menu-sheet { border-radius:28px; }
}
/* the narrowest phones: one link per line instead of a ragged wrap */
@media (max-width:360px) {
  #menuDialog[data-lux="menu"] .lux-menu-aside-row { flex-direction:column; align-items:flex-start; }
}