/* landing.css — the yfile.org front door (R318/§311, DESIGN-DECISION sections 1-3).
   R325/§318 design-language (2026-09-05): the :root below IS ysdk.org's token language (names + scale) in yfile's hue
   family; see the block's own note. Everything after :root is R318's, touched only where a literal became its token.
   r2 (2026-09-05): the face set is the shared one too (Atkinson 700 joins), and .h1 takes the shared hero step --t6.
   TOKENS: every colour on the goldenratiocolors ladder (channels 0 14 37 60 97 158 195 218 241 255), grc codes
   beside each; the app's phi spacing (--yf-s0..s3 from tokens.css, repeated here verbatim because tokens.css
   is the app's sheet and the landing does not load it), the app's radii. Alpha tints: ladder white at .056
   (the plate's top highlight, dark) and graphite #00000e at .09 (the plate's shadow, light) — both listed.
   TYPE: Archivo (variable) for display at 760, Atkinson Hyperlegible 400/700 for body, JetBrains Mono for the plate,
   the transcript gutter and the footer — the vendored fonts only, font-display swap.
   LAWS: no vh (dvh only, and only for the veil the wall owns); components size by @container (page / hero /
   plate / guide / wall); viewport media queries are PAGE-SHELL ONLY — height (the dock in flow under 480 px),
   viewport segments (the hinge), print — and never a width query; light and dark; every target 44 px; visible
   focus; safe-area insets; forced colours; motion only under prefers-reduced-motion: no-preference. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  color-scheme: dark light;
  /* THE SHARED DESIGN LANGUAGE (R325/§318 design-language, 2026-09-05). The same token NAMES and scale as ysdk.org's
     ysdk.css :root — surface chain, ink chain, brand trio + golden-angle accent, verdict trio, phi spacing, radius
     scale, type scale, tap floors, motion, focus ring — carrying yfile's OWN hue family (blue grc049/grc459 on the
     neutral grey rungs). Every colour is a goldenratiocolors.com ladder colour {0,14,37,60,97,158,195,218,241,255}
     fetched LIVE 2026-09-05 (transcript C:/Users/y/ysdk-work/gauntlet/fivego/evidence/design-language/), written as
     oklch (YSDK §5.2): each literal round-trips to its exact ladder hex (derive.py). Rungs the landing does not draw
     are collapsed onto a neighbour and say so. The legacy --l-* / --yf-* / --t* names further down are ALIASES of
     these tokens: wall.css and avatar.css consume them and are untouched. Cited in /.well-known/ysdk.app.json brand. */
  --ysdk-brand-h: 261.4;                 /* oklch hue of grc049 #0061ff, the mark's colour — the one number the palette hangs on */
  --brand: oklch(0.5542 0.2465 261.4); /* grc049 #0061ff — the mark, the ONE filled door (white text 5.1:1) */
  --brand-lit: oklch(0.7021 0.1565 259.3); /* grc459 #619eff — links, live values, focus, the accepted key */
  --brand-dim: oklch(0.4551 0.2426 263.5); /* grc037 #003cda — the door while the field is empty (white text 7.9:1) */
  --accent: oklch(0.7866 0.1389 51.6); /* grc954 #ff9e61 — golden angle 261.4 + 137.5078 = 38.9, nearest ladder colour at L .78 C .16 (dE_ok .037) — the visitor's own turns */
  --on-brand: oklch(1.0000 0 0); /* grc999 #ffffff — text on brand and brand-dim */
  --well: oklch(0.0000 0 0); /* grc000 #000000 — the wall's veil — the rung below the ground */
  --void: oklch(0.1638 0 0); /* grc111 #0e0e0e — the page ground (paper) */
  --sunk: oklch(0.1638 0 0); /* grc111 #0e0e0e — collapsed onto void (grc111): the landing draws no sunk panel */
  --surf: oklch(0.2645 0 0); /* grc222 #252525 — raised: the plate, the guide, the dock, the notice */
  --surf2: oklch(0.2645 0 0); /* grc222 #252525 — collapsed onto surf (grc222): one raised rung is all the landing draws */
  --edge: oklch(0.3562 0 0); /* grc333 #3c3c3c — hairlines */
  --edge2: oklch(0.4926 0 0); /* grc444 #616161 — the reading rule, the lamp dot */
  --ink: oklch(0.9581 0 0); /* grc888 #f1f1f1 */
  --ink2: oklch(0.8172 0 0); /* grc666 #c3c3c3 */
  --ink3: oklch(0.6993 0 0); /* grc555 #9e9e9e — dim (7.2:1 on the ground, 5.7:1 on raised) */
  --ok: oklch(0.7349 0.1643 143.7); /* grc464 #61c361 — verdict trio, shared vocabulary; the wall's accepted state keeps brand-lit by DESIGN-DECISION */
  --warn: oklch(0.8356 0.1527 89.0); /* grc863 #f1c33c — verdict trio, shared vocabulary; no landing surface draws it today */
  --bad: oklch(0.6976 0.1930 23.5); /* grc944 #ff6161 — deny: the refused key, aria-invalid */

  --display: "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --ui: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* phi spacing — the same seven steps ysdk.css declares (rem: 6.111 / 9.889 / 16 / 25.889 / 41.889 / 67.777 / 109.66 px at 16) */
  --phi: 1.6180339887;
  --s1: .382rem; --s2: .618rem; --s3: 1rem;
  --s4: 1.618rem; --s5: 2.618rem; --s6: 4.236rem; --s7: 6.854rem;
  /* radius scale (phi): control / frame / card — yfile's 9.889px and 16px were already --r2 and --r3 */
  --r1: .382rem; --r2: .618rem; --r3: 1rem;
  /* type scale: 0.8125 / 0.9375 / 1 / 1.125 / 1.375 / 1.75 */
  --t0: 0.8125rem; --t1: 0.9375rem; --t2: 1rem; --t3: 1.125rem; --t4: 1.375rem; --t5: 1.75rem;
  --t6: clamp(2.25rem, 1rem + 8cqi, 5.4rem); /* the hero step (r2): fluid, measured in the `hero` container each site declares around its headline — one clamp on both sites (ysdk's 586px copy column at 1440 -> 63px; yfile's full-width hero -> the 86.4px cap) */
  /* tap targets are FLOORED (min-block-size), never pinned — §5.6 */
  --tap: 44px; --tap-fine: 36px;
  --dur: 220ms; --ease: cubic-bezier(.2,0,0,1);
  /* the focus ring: one declaration on both sites */
  --ring: 3px solid var(--brand-lit); --ring-offset: 2px;

  /* ALIASES — the names wall.css, avatar.css and the rules below were written against (R318). Consumed, never redefined. */
  --l-paper: var(--void); --l-raised: var(--surf); --l-edge: var(--edge); --l-rule: var(--edge2);
  --l-ink: var(--ink); --l-ink2: var(--ink2); --l-dim: var(--ink3);
  --l-accent: var(--brand); --l-accent2: var(--brand-lit); --l-deny: var(--bad); --l-you: var(--accent);
  --l-veil: var(--well); --l-on-accent: var(--on-brand);
  --l-hi: oklch(1 0 0 / .056);   /* grc999 ladder white at .618^6: the plate's top highlight */
  --l-shade: oklch(0.0740 0.0513 264.1 / .09);   /* grc001 #00000e graphite at .618^5: the plate's shadow (light scheme) */
  --l-display: var(--display); --l-body: var(--ui); --l-mono: var(--mono);
  --yf-s0: var(--s1); --yf-s1: var(--s2); --yf-s2: var(--s3); --yf-s3: var(--s4); --yf-s4: var(--s5); --yf-s5: var(--s6);
  --yf-r1: var(--r2); --yf-r2: var(--r3);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --gutter: clamp(16px, 4cqi, 48px);
  --section: clamp(3rem, 7cqi, 6.5rem);
}
@media (prefers-color-scheme: light) {
  :root {
  --brand-lit: oklch(0.4551 0.2426 263.5); /* grc037 #003cda — accent text on light (7.1:1 on the ground) */
    --accent: oklch(0.4869 0.1409 41.2); /* grc531 #9e3c0e — the same golden-angle hue at L .50 — 6.0:1 on the light ground */
    --well: oklch(0.0740 0.0513 264.1); /* grc001 #00000e */
    --void: oklch(0.9622 0.0187 286.0); /* grc889 #f1f1ff — a tinted ground */
    --sunk: oklch(0.9622 0.0187 286.0); /* grc889 #f1f1ff — collapsed onto void */
    --surf: oklch(1.0000 0 0); /* grc999 #ffffff — a real card surface */
    --surf2: oklch(1.0000 0 0); /* grc999 #ffffff — collapsed onto surf */
    --edge: oklch(0.8884 0 0); /* grc777 #dadada */
    --edge2: oklch(0.6993 0 0); /* grc555 #9e9e9e */
    --ink: oklch(0.0740 0.0513 264.1); /* grc001 #00000e */
    --ink2: oklch(0.3562 0 0); /* grc333 #3c3c3c */
    --ink3: oklch(0.4926 0 0); /* grc444 #616161 — 5.5:1 on the ground */
    --ok: oklch(0.4268 0.1452 142.5); /* grc040 #006100 — 6.9:1 on the ground */
    --warn: oklch(0.3908 0.0842 70.8); /* grc430 #613c00 — 8.7:1 on the ground */
    --bad: oklch(0.5132 0.2106 29.2); /* grc600 #c30000 — 5.7:1 on the ground */
    --l-hi: oklch(1 0 0 / .382);
  }
}

/* ---- base ---------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--l-paper); color: var(--l-ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--l-paper);
  color: var(--l-ink);
  font: 400 var(--t2) / 1.6 var(--l-body);
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
  container-name: page;
  padding-inline: var(--sal) var(--sar);
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}
img { display: block; max-inline-size: 100%; block-size: auto; }
p { margin: 0; }
a { color: var(--l-accent2); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }

/* the skip link: parked above the page, lands in the corner with a thick ring */
.skip {
  position: absolute; z-index: 70;
  inset-block-start: calc(var(--yf-s1) + var(--sat)); inset-inline-start: calc(var(--yf-s1) + var(--sal));
  translate: 0 -300%;
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding: var(--yf-s1) var(--yf-s2);
  background: var(--l-accent); color: var(--l-on-accent); border-radius: var(--yf-r1);
  font-family: var(--l-mono); font-size: var(--t1); text-decoration: none;
}
.skip:focus-visible { translate: 0 0; outline: 4px solid var(--l-you); outline-offset: 3px; }

/* ---- header -------------------------------------------------------------------------------------------- */
.top { border-block-end: 1px solid var(--l-edge); padding-block-start: var(--sat); }
.top__row {
  inline-size: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--yf-s0) var(--yf-s2);
  min-block-size: 3.75rem;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--yf-s1); min-block-size: var(--tap);
  color: var(--l-ink); text-decoration: none;
  font: 760 var(--t3) / 1 var(--l-display); letter-spacing: -0.02em;
}
.brand__mark { inline-size: 1.1em; block-size: 1.1em; border-radius: 28%; background: var(--l-accent); flex: none; }
.nav { display: flex; gap: var(--yf-s0); flex-wrap: wrap; }
.nav__link {
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--yf-s2);
  border-radius: var(--yf-r1); color: var(--l-ink2); text-decoration: none; font-size: var(--t1);
}
.nav__link:hover { color: var(--l-ink); background: var(--l-raised); }
/* the nav's Open yfile is a pointer to the door, not the door: it reads like its siblings, so the plate's filled
   Open is the ONE blue control in the fold (landing-R318 r3: the fold had three doors) */
.nav__link--open { color: var(--l-ink); }

/* ---- the page and its sections ------------------------------------------------------------------------- */
.page {
  inline-size: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto;
  display: grid; row-gap: 0;
  padding-block: clamp(1.5rem, 4cqi, 2.5rem) calc(var(--yf-s4) + var(--sab));
  flex: 1 0 auto;
}
/* INSIDE lives in the hero grid (r3); the sections after it breathe */
.proof, .ask { padding-block-start: var(--section); }
.foot { margin-block-start: var(--section); }
.h2 { margin: 0 0 var(--yf-s3); font: 760 var(--t5) / 1.05 var(--l-display); letter-spacing: -0.02em; }
.eyebrow { font-family: var(--l-mono); font-size: var(--t0); letter-spacing: 0.14em; color: var(--l-accent2); }

/* ---- hero ---------------------------------------------------------------------------------------------- */
.hero { container-type: inline-size; container-name: hero; display: grid; row-gap: var(--yf-s3); }
.h1 {
  margin: 0;
  font: 760 var(--t6) / .98 var(--display); /* the hero step — the declaration ysdk.org's .hero h1 carries, measured in this .hero container (r2) */
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  max-inline-size: 30ch;
}
.hero__grid { display: grid; gap: var(--yf-s4); align-items: start; }
.hero__copy { display: grid; row-gap: var(--yf-s3); align-content: start; min-inline-size: 0; }
.deck { font-size: var(--t3); line-height: 1.55; color: var(--l-ink2); max-inline-size: 52ch; }
.hero__guide { min-inline-size: 0; }
/* the hero row carries the tile and the composer only (section 3's row); the script lives in the Ask transcript.
   Once the visitor has asked from here (data-live) the row shows the latest exchange under the field. */
.hero__guide .g--hero:not([data-live="1"]) .g-log { display: none; }
/* THE 1440 FOLD (landing-R318 r3): two columns, the plate spanning both rows on the right; the copy above and the
   capture beneath it on the left, so the product fills the quadrant the guide row used to leave dead (measured
   r2: about 260 px) and rises into the first screen the way linear's product shot does (about 40% of the fold).
   Row 1 is sized by the copy alone; the plate spans and never pushes the capture down. */
@container hero (min-width: 58rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
    grid-template-rows: auto auto;
    column-gap: var(--yf-s5); row-gap: var(--yf-s3);
  }
  .hero__copy { grid-column: 1; grid-row: 1; }
  .hero__grid > .plate { grid-column: 2; grid-row: 1 / span 2; }
  .hero__grid > .shot { grid-column: 1; grid-row: 2; }
}
/* a narrow page tightens the fold so the key sits in the first screen above the dock (measured at 390x844) */
@container page (max-width: 44rem) {
  .page { padding-block-start: var(--yf-s3); }
  .hero { row-gap: var(--yf-s2); }
  .hero__grid { gap: var(--yf-s3); }
  .deck { font-size: var(--t2); }
}

/* ---- THE PLATE: the signature (section 4) -------------------------------------------------------------- */
.plate {
  container: plate / inline-size;
  position: relative; min-inline-size: 0;
  display: grid; row-gap: var(--yf-s2);
  padding: var(--yf-s3);
  background: var(--l-raised);
  border: 1px solid var(--l-edge); border-radius: var(--yf-r2);
  box-shadow: inset 0 1px 0 var(--l-hi);
  font-family: var(--l-mono);
}
@media (prefers-color-scheme: light) { .plate { box-shadow: 0 1px 0 var(--l-shade), 0 var(--yf-s2) var(--yf-s3) calc(var(--yf-s1) * -1) var(--l-shade); } }
.plate__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--yf-s0) var(--yf-s2); }
.plate__title { margin: 0; font: 600 var(--t0) / 1.2 var(--l-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--l-ink); }
.lamp { display: inline-flex; align-items: center; gap: var(--yf-s0); font-size: var(--t0); letter-spacing: 0.06em; color: var(--l-dim); }
.lamp__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--l-rule); flex: none; }
.lamp[data-on="1"] { color: var(--l-accent2); }
.lamp[data-on="1"] .lamp__dot { background: var(--l-accent2); }
.readings { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--yf-s3); font-size: var(--t1); }
.reading {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--yf-s2);
  min-inline-size: 0; padding-block: var(--yf-s0); border-block-end: 1px solid var(--l-edge);
}
.plate .wall { padding-block-start: var(--yf-s2); border-block-start: 0; }   /* the page owns the plate's rhythm: the cut sits one step closer to the readings, and the ledger's last hairline IS the cut - the wall's own top rule doubled it (landing-R318 r2) */
.reading dt { color: var(--l-dim); font-size: var(--t0); letter-spacing: 0.06em; flex: 0 1 auto; min-inline-size: 0; }
.reading dd { margin: 0; min-inline-size: 0; text-align: end; overflow-wrap: anywhere; color: var(--l-accent2); font-variant-numeric: tabular-nums; }
.reading--thesis dd { color: var(--l-ink); }
.reading--thesis dd.is-deny { color: var(--l-deny); }
@container plate (min-width: 26rem) {
  .readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading--wide { grid-column: 1 / -1; }
}
@container plate (max-width: 26rem) {
  .plate { padding: var(--yf-s2); row-gap: var(--yf-s1); }
}

/* ---- INSIDE: the capture (a hero grid item, sized by the hero container) --------------------------------- */
.shot { margin: 0; display: grid; row-gap: var(--yf-s2); min-inline-size: 0; }
/* the capture is a window, not a second card: a hairline edge on the image itself (the padded raised frame was
   the accessory removed in r3 - beside the plate it made two cards of equal weight, and the product is the point) */
.shot picture { display: block; }
.shot__img { inline-size: 100%; border: 1px solid var(--l-edge); border-radius: var(--yf-r2); }
.shot__cap { font-family: var(--l-mono); font-size: var(--t0); line-height: 1.6; color: var(--l-dim); max-inline-size: 70ch; }
@container hero (max-width: 40rem) { .shot picture { max-inline-size: 24rem; margin-inline: auto; inline-size: 100%; } }

/* ---- PROOF --------------------------------------------------------------------------------------------- */
.proof { container-type: inline-size; }
.proof__grid { display: grid; gap: var(--yf-s4) var(--yf-s5); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 48rem) { .proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.point { max-inline-size: 38ch; }
.point__title { margin: 0 0 var(--yf-s1); font: 760 var(--t4) / 1.2 var(--l-display); letter-spacing: -0.015em; }
.point__text { color: var(--l-ink2); }

/* ---- ASK YFILE ----------------------------------------------------------------------------------------- */
.ask { container: ask / inline-size; }
.ask__lead { margin-block-end: var(--yf-s3); color: var(--l-ink2); max-inline-size: 60ch; }
.ask__guide { padding: var(--yf-s3); background: var(--l-raised); border: 1px solid var(--l-edge); border-radius: var(--yf-r2); box-shadow: inset 0 1px 0 var(--l-hi); }
/* a narrow Ask panel stacks the guide: the presence above, the transcript full width (the guide cannot
   query itself — avatar.css provides .g--stacked, the page decides when) */
@container ask (max-width: 34rem) {
  .ask__guide { padding: var(--yf-s2); }
  .ask__guide .g--ask { grid-template-columns: minmax(0, 1fr); }
  .ask__guide .g--ask .g-presence { grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--yf-s1) var(--yf-s2); inline-size: auto; }
  .ask__guide .g--ask .g-word { text-align: start; }
}

/* ---- footer -------------------------------------------------------------------------------------------- */
.foot { display: grid; row-gap: var(--yf-s0); justify-items: start; padding-block-start: var(--yf-s3); border-block-start: 1px solid var(--l-edge); }
.foot__line { font-family: var(--l-mono); font-size: var(--t0); line-height: 1.6; color: var(--l-dim); }
.foot__open { display: inline-flex; align-items: center; min-block-size: var(--tap); margin-block-start: var(--yf-s1); font-family: var(--l-mono); font-size: var(--t1); color: var(--l-accent2); }

/* ---- the phone dock: the guide's third presence, sticky at the bottom on narrow pages ------------------- */
.dock {
  display: none;
  position: sticky; inset-block-end: 0; z-index: 20;
  padding: var(--yf-s1) var(--gutter) calc(var(--yf-s1) + var(--sab));
  background: var(--l-raised); border-block-start: 1px solid var(--l-edge);
}
@container page (max-width: 44rem) {
  .dock { display: block; }
  .hero__guide { display: none; }
  .nav__link:not(.nav__link--open) { display: none; }
}
/* PAGE SHELL, viewport height: a short viewport (a landscape phone, the keyboard open) gets the dock in flow
   so nothing sticky eats the screen (Law 4 / Law 11; measured at 844x390 and 390x430) */
@media (max-height: 480px) {
  .dock { position: static; }
}
/* PAGE SHELL, viewport segments: on a spanned foldable the hero's two columns sit one per segment and every
   lower section keeps to the left segment, so no interactive box crosses the hinge */
@media (horizontal-viewport-segments: 2) {
  /* cqi here is the page container (body): 50cqi is the hinge's centre line; the gutter is the page's own inset */
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--gutter) + 12px); }
  .hero__guide, .h1, .deck { max-inline-size: calc(50cqi - var(--gutter) - 12px); }
  .proof, .ask, .foot { max-inline-size: calc(50cqi - var(--gutter) - 12px); }
  .top__row { padding-inline-end: calc(50cqi - var(--gutter) + 12px); }
}
@media print {
  .dock, .skip, .top { display: none; }
}

/* ---- the worker's notice box (sw-client.js creates #yfNotices; the landing dresses it in its tokens) ------ */
#yfNotices {
  position: fixed; z-index: 60;
  inset-block-end: calc(var(--yf-s2) + var(--sab)); inset-inline-end: calc(var(--yf-s2) + var(--sar));
  inline-size: min(30.889rem, calc(100% - var(--yf-s2) * 2));
  display: flex; flex-direction: column; gap: var(--yf-s0);
  pointer-events: none;
  font-family: var(--l-body);
}
#yfNotices .yf-note {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--yf-s1);
  padding: var(--yf-s1) var(--yf-s1) var(--yf-s1) var(--yf-s2);
  background: var(--l-raised); color: var(--l-ink);
  border: 1px solid var(--l-edge); border-inline-start: 3px solid var(--l-accent2); border-radius: var(--yf-r1);
}
#yfNotices .yf-note__t { margin: 0; flex: 1 1 auto; min-inline-size: 0; font-size: var(--t1); line-height: 1.45; overflow-wrap: anywhere; }
#yfNotices .yf-note__act {
  flex: none; min-block-size: var(--tap); padding-inline: var(--yf-s2);
  font: inherit; font-size: var(--t1); color: var(--l-on-accent); background: var(--l-accent);
  border: 1px solid var(--l-accent); border-radius: var(--yf-r1); cursor: pointer;
}
#yfNotices .yf-note__x {
  flex: none; inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  font: inherit; font-size: 1.25rem; line-height: 1; color: var(--l-dim); background: none;
  border: 1px solid transparent; border-radius: var(--yf-r1); cursor: pointer;
}
#yfNotices .yf-note__x:hover { color: var(--l-ink); border-color: var(--l-edge); }
@container page (max-width: 44rem) {
  #yfNotices { inset-block-end: auto; inset-block-start: calc(var(--yf-s2) + var(--sat)); inset-inline: var(--yf-s1); inline-size: auto; }
}

/* ---- motion: transitions only where the visitor allows them ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .nav__link, .foot__open, #yfNotices .yf-note__x { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
}

/* ---- forced colours ------------------------------------------------------------------------------------ */
@media (forced-colors: active) {
  .plate, .shot__img, .ask__guide, .dock, .top, .foot, #yfNotices .yf-note { border-color: CanvasText; }
  .brand__mark, .lamp__dot { background: CanvasText; }
  .reading { border-block-end-color: CanvasText; }
  /* the flex- and grid-item links are blockified (no longer inline), so they carry a border like any control */
  .brand, .nav__link, .foot__open { border: 1px solid LinkText; }
  .skip, #yfNotices .yf-note__act, #yfNotices .yf-note__x { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}