/*
 * www.ehlers.tv. The AI Valley start page's tokens, dark only, and the system font stack with no web
 * font. Colour never carries a meaning alone: links are underlined, the current page has a border,
 * an open menu has a turned chevron and a visible panel, and facts are words. The picture moves only
 * for those who have not asked for less, stepped at 8 frames a second, and is at rest within 4 s
 * unless the script loops it, with a pause button.
 * Blocks marked "Fixed" hold values the design settles; the rest is open to the design pass.
 */

/* ── Fixed: tokens ─────────────────────────────────────────────────────────────────────────── */
:root {
  --night: #12130f; --loam: #1c1b15; --loam-2: #25231b;
  --line: rgba(239, 230, 207, 0.11); --line-strong: rgba(239, 230, 207, 0.22);
  --thatch: #efe6cf; --straw: #cbbf9d; --stone: #9a917b; --lamp: #f2a33a;
  --slate: #9fb0cf; --wood: #cfa46d; --wood-dark: #9c6b40; --ink: #3a3226;
  --gutter: 32px; --width: 76rem; --radius: 14px;
  --ring: 0 0 0 3px var(--lamp), 0 0 0 6px var(--night);
  color-scheme: dark;
}
@media (max-width: 560px) { :root { --gutter: 16px; } }

/* ── Fixed: base ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--thatch);
  font: 1rem/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--thatch); text-decoration: underline var(--lamp) 2px; text-underline-offset: 4px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.9em; }
.wrap { width: min(var(--width), 100% - 2 * var(--gutter)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Fixed: skip link (visible only when focused; absolute, so nothing moves) ─────────────────── */
.skip {
  position: absolute; top: 8px; left: var(--gutter); z-index: 30; padding: 8px 14px;
  background: var(--loam); border: 1px solid var(--line-strong); border-radius: 8px;
}
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Fixed: the menu (values shared with the AI Valley start page) ──────────────────────────── */
.site-nav { position: relative; z-index: 20; background: var(--night); border-bottom: 1px solid var(--line); }
.site-nav__inner {
  width: min(var(--width), 100% - 2 * var(--gutter)); margin-inline: auto; min-height: 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px;
}
.site-nav__home { color: var(--thatch); font-weight: 700; text-decoration: none; padding: 4px 0 6px; }
.site-nav__home[aria-current='page'] { padding-bottom: 4px; border-bottom: 2px solid var(--lamp); }
.site-nav__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.site-nav__item { position: relative; }
.site-nav__trigger, .site-nav__plain {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 0 6px;
  color: var(--straw); font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.site-nav__trigger { background: none; border: 0; cursor: pointer; }
.site-nav__trigger:hover, .site-nav__trigger[aria-expanded='true'], .site-nav__plain:hover { color: var(--thatch); }
.site-nav__trigger[aria-current='true'], .site-nav__plain[aria-current='true'] { padding-bottom: 4px; border-bottom: 2px solid var(--lamp); }
.site-nav__chevron { width: 10px; height: 10px; flex: none; }
.site-nav__trigger[aria-expanded='true'] .site-nav__chevron { transform: rotate(180deg); }
.site-nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 21; min-width: 15rem; max-width: 20rem;
  padding: 8px; background: var(--loam); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
}
.site-nav__item--end .site-nav__panel { left: auto; right: 0; }
/* A bar that wraps (between the phone layout and the width that holds it on one row, which the font
   decides) can start a row with one of the last two, whose panel, opened leftwards, would leave the
   window. site.js sees that as it opens the panel (its trigger ends nearer the left edge than the panel
   is wide) and flips it to open rightwards. A panel left open while the window narrows past that point
   keeps its side until it is opened again: rare, and left so (site.js is at its budget). */
.site-nav__item--end .site-nav__panel--flip { left: 0; right: auto; }
.site-nav__panel a, .site-nav__sheet a {
  display: flex; align-items: center; min-height: 24px; padding: 8px 10px; border-radius: 8px;
  color: var(--straw); text-decoration: none;
}
.site-nav__panel a:hover, .site-nav__sheet a:hover { color: var(--thatch); background: var(--loam-2); }
.site-nav__panel a[aria-current='page'], .site-nav__sheet a[aria-current='page'] { padding-left: 8px; border-left: 2px solid var(--lamp); color: var(--thatch); }
.site-nav__panel li:first-child, .site-nav__sheet li:first-child { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.site-nav__menu {
  display: none; margin-left: auto; align-items: center; min-height: 24px; padding: 5px 12px;
  color: var(--thatch); background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.site-nav__menu:hover { border-color: rgba(239, 230, 207, 0.5); }
.site-nav__menu[aria-expanded='true'] { background: var(--loam-2); }
.site-nav__sheet { display: none; }
.site-nav__group { padding: 14px 10px 4px; color: var(--stone); font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.js .site-nav__plain { display: none; }
.no-js .site-nav__trigger, .no-js .site-nav__panel, .no-js .site-nav__menu, .no-js .site-nav__sheet { display: none !important; }
@media (max-width: 640px) {
  .js .site-nav__bar { display: none; }
  .js .site-nav__menu { display: inline-flex; }
  .site-nav__sheet:not([hidden]) { display: block; width: min(var(--width), 100% - 2 * var(--gutter)); margin-inline: auto; padding: 4px 0 16px; }
  .site-nav__sheet a { min-height: 44px; }
}
@media (max-width: 560px) { .site-nav__inner { min-height: 52px; } }

/* ── Vertical rhythm: one step from a heading to its content, one between sections ──────────── */
body { --space-m: 32px; --space-xl: 96px; }
@media (max-width: 560px) { body { --space-m: 24px; --space-xl: 64px; } }

/* ── Hero: the text sits in the sky, the mast rises beside it, the valley fills the foot ──────── */
.hero { position: relative; isolation: isolate; background: linear-gradient(180deg, #12130f 0%, #151a1d 38%, #1d2428 64%, #2a2b29 100%); }
.hero__inner { position: relative; z-index: 1; padding-top: 64px; }
.hero__text { max-width: 44rem; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 20px; color: var(--straw); }
.eyebrow__lead { color: var(--lamp); font-weight: 750; letter-spacing: 0.01em; }
.eyebrow__rule { width: 28px; height: 2px; background: var(--line-strong); }
.hero__title { font-size: clamp(2.25rem, 1.15rem + 3.1vw, 3.9rem); line-height: 1.04; font-weight: 760; letter-spacing: -0.025em; text-wrap: balance; }
.lede { margin-top: 24px; max-width: 36rem; color: var(--straw); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); text-wrap: pretty; }
.contact { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; }
.contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-weight: 600; }
.icon { flex: none; width: 18px; height: 18px; }
/* The drawing is 1600 by 480. Its height follows its width, so nothing is cropped above or below;
   the floor keeps a phone looking at the middle 620 units, where the village and the mast are. */
.hero__scene { --scene-h: max(300px, calc(100vw * 480 / 1600)); position: relative; height: var(--scene-h); margin-top: calc(var(--scene-h) * -0.2); }
/* Two pixels taller than its box, so the foot of the picture always covers the hero's last row. */
.hero__scene > svg { display: block; width: 100%; height: calc(100% + 2px); }
/* AI Valley's pause pill, at the picture's foot. site.js shows it. */
.hero-pause {
  position: absolute; z-index: 2; right: max(var(--gutter), (100% - var(--width)) / 2); bottom: 16px;
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px;
  color: var(--thatch); background: rgba(18, 19, 15, 0.78); border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.hero-pause:hover { border-color: rgba(239, 230, 207, 0.5); }
.hero-pause svg { flex: none; width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .hero-pause { display: none; } }
@media (min-width: 900px) and (max-width: 1099px) { .hero__scene { margin-top: calc(var(--scene-h) * -0.1); } }
@media (min-width: 1100px) { .hero__scene { margin-top: calc(var(--scene-h) * -0.5); } }
@media (max-width: 899px) { .hero__inner { padding-top: 44px; } }
@media (max-width: 560px) {
  .hero__scene { --scene-h: clamp(240px, calc(100vw * 480 / 620), 300px); } /* the middle 620 units fill any phone */
  .hero__inner { padding-top: 28px; }
  .eyebrow { margin-bottom: 14px; font-size: 0.9375rem; }
  .lede { margin-top: 16px; }
}

/* ── Fixed: the picture's light, and its motion ────────────────────────────────────────────── */
/* Without the script: one play, at rest by 3.9 s (WCAG 2.2.2 needs no stop for under 5 s). With it,
   .hero-loop: the same frames, 5 s lit, then dark again, forever. A cycle is 69 frames of 125 ms
   (8.625 s): the single play's frames 0 to 28, then from frame 29, when the last arc lights, 40 frames
   at rest. Frame n is at n/69 (the first window, frame 5, at 7.246%). .hero-paused and .hero-still (out
   of sight) freeze it where it is; .hero-held, a pause kept from an earlier visit, is lit until Play. */
.hero-land { isolation: isolate; }
.hero-tint { mix-blend-mode: multiply; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .hero-light { animation: hero-on 125ms steps(1, end) both; }
  .hero-light--1 { animation-delay: 500ms; }
  .hero-light--2 { animation-delay: 1000ms; }
  .hero-light--3 { animation-delay: 1500ms; }
  .hero-light--4 { animation-delay: 2000ms; }
  .hero-beacon { animation: hero-blink 500ms steps(1, end) 2125ms 3 both; }
  .hero-arc { animation: hero-pulse 500ms steps(1, end) 2125ms 3 both; }
  .hero-arc--2 { animation-delay: 2250ms; }
  .hero-arc--3 { animation-delay: 2375ms; }
  .hero-loop :is(.hero-light, .hero-beacon, .hero-arc) { animation: 8625ms steps(1, end) infinite; }
  .hero-loop .hero-light--1 { animation-name: hero-loop-1; }
  .hero-loop .hero-light--2 { animation-name: hero-loop-2; }
  .hero-loop .hero-light--3 { animation-name: hero-loop-3; }
  .hero-loop .hero-light--4 { animation-name: hero-loop-4; }
  .hero-loop .hero-beacon { animation-name: hero-loop-beacon; }
  .hero-loop .hero-arc--1 { animation-name: hero-loop-arc-1; }
  .hero-loop .hero-arc--2 { animation-name: hero-loop-arc-2; }
  .hero-loop .hero-arc--3 { animation-name: hero-loop-arc-3; }
  .hero-held :is(.hero-light, .hero-beacon, .hero-arc) { animation: none; }
  :is(.hero-paused, .hero-still) :is(.hero-light, .hero-beacon, .hero-arc) { animation-play-state: paused; }
}
@keyframes hero-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-blink { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hero-pulse { 0% { opacity: 0.15; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hero-loop-1 { 0% { opacity: 0; } 7.246% { opacity: 1; } }
@keyframes hero-loop-2 { 0% { opacity: 0; } 13.043% { opacity: 1; } }
@keyframes hero-loop-3 { 0% { opacity: 0; } 18.841% { opacity: 1; } }
@keyframes hero-loop-4 { 0% { opacity: 0; } 24.638% { opacity: 1; } }
@keyframes hero-loop-beacon { 0%, 30.435%, 36.232% { opacity: 0.2; } 27.536%, 33.333%, 39.13% { opacity: 1; } }
@keyframes hero-loop-arc-1 { 0%, 30.435%, 36.232% { opacity: 0.15; } 27.536%, 33.333%, 39.13% { opacity: 1; } }
@keyframes hero-loop-arc-2 { 0%, 31.884%, 37.681% { opacity: 0.15; } 28.986%, 34.783%, 40.58% { opacity: 1; } }
@keyframes hero-loop-arc-3 { 0%, 33.333%, 39.13% { opacity: 0.15; } 30.435%, 36.232%, 42.029% { opacity: 1; } }

/* ── Sections and cards ────────────────────────────────────────────────────────────────────── */
.section { padding-top: var(--space-xl); }
.section__title { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); line-height: 1.15; font-weight: 720; letter-spacing: -0.02em; }
.section__intro { margin-top: 12px; max-width: 40rem; color: var(--straw); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: var(--space-m); }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--loam);
  border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 16px;
}
.card:focus { outline: none; }
.card:focus-visible { box-shadow: var(--ring); }
/* A short lamp bar on the card's top edge says which card you are in: under the pointer, with focus
   inside it, or arrived at by a link. It is a shape, so colour does not carry it alone. */
.card::before { content: ''; position: absolute; z-index: 1; top: 0; left: 28px; width: 56px; height: 3px; background: var(--lamp); opacity: 0; }
.card:hover::before, .card:focus-within::before, .card:target::before { opacity: 1; }
.card:hover { border-color: var(--line-strong); }
.card--wide { grid-column: 1 / -1; }
.card__still { width: 100%; height: clamp(180px, 22vw, 280px); object-fit: cover; object-position: 50% 100%; background: #2a2b29; border-bottom: 1px solid var(--line); }
.card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 28px 28px 26px; }
.card__label { order: 1; color: var(--stone); font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.card__title { order: 2; font-size: 1.375rem; line-height: 1.25; font-weight: 740; letter-spacing: -0.012em; }
.card__fact { order: 3; align-self: flex-start; padding: 3px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--thatch); font-size: 0.8125rem; font-weight: 600; }
.card__blurb { order: 4; margin: 4px 0 12px; max-width: 40rem; color: var(--straw); text-wrap: pretty; }
.card__blurb > p + p { margin-top: 12px; }
.card__note { order: 5; color: var(--stone); font-size: 0.875rem; }
.card__links { order: 6; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.card__links a { display: inline-flex; align-items: center; min-height: 24px; }
.card--wide .card__title { font-size: 2rem; letter-spacing: -0.02em; }
@media (hover: hover) {
  .card__title a:hover, .card__links a:hover, .contact a:hover { text-underline-offset: 6px; }
}
/* The feature card reads as a spread once the page is wide enough: the story on the left, the way
   in on the right. Below that it stacks like the others. */
@media (min-width: 960px) {
  .card--wide .card__body { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; align-content: start; gap: 12px 56px; padding: 36px 40px 40px; }
  .card--wide .card__label, .card--wide .card__title, .card--wide .card__blurb, .card--wide .card__note { grid-column: 1; }
  .card--wide .card__blurb { margin-bottom: 0; }
  .card--wide .card__fact { grid-column: 2; grid-row: 1 / span 2; justify-self: start; align-self: start; }
  .card--wide .card__links { grid-column: 2; grid-row: 3 / span 3; flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 6px; padding-top: 0; border-top: 0; }
  .card--wide .card__links li { border-top: 1px solid var(--line); }
  .card--wide .card__links li:last-child { border-bottom: 1px solid var(--line); }
  .card--wide .card__links a { width: 100%; min-height: 44px; }
}
/* Three across, the cards are about 310 to 330px wide just above the breakpoint, where two of the
   three labels wrap. Every label gets the height of two lines, so the titles still start level.
   The band is measured for this copy: a longer or shorter label needs it measured again. */
@media (min-width: 1040px) and (max-width: 1119px) { .card:not(.card--wide) .card__label { min-height: 2.6rem; } }
@media (max-width: 1039px) { .cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .card__body { padding: 24px 22px 22px; } }

/* ── Experience: when on the left, what and where on the right ─────────────────────────────── */
.jobs { margin-top: var(--space-m); border-top: 1px solid var(--line-strong); }
.job { display: grid; grid-template-areas: 'employer' 'years' 'role' 'place'; row-gap: 2px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.job__employer { grid-area: employer; font-size: 1.25rem; line-height: 1.3; font-weight: 740; letter-spacing: -0.01em; }
.job__role { grid-area: role; margin-top: 6px; max-width: 44rem; }
.job__place { grid-area: place; color: var(--stone); font-size: 0.9375rem; }
.job__years { grid-area: years; color: var(--stone); font-variant-numeric: tabular-nums; }
@media (min-width: 761px) {
  .job { grid-template-columns: 13rem minmax(0, 1fr); grid-template-areas: 'years employer' 'years role' 'years place'; column-gap: 32px; }
  .job__employer, .job__years { align-self: baseline; }
}
.before { margin-top: var(--space-m); max-width: 44rem; color: var(--straw); text-wrap: pretty; }
/* The lamp dot belongs to the item after it. In the skills list a line that wraps starts with its dot
   out of sight: the list is pulled 24px left and clipped back, so a dot never begins a line. A clip
   also cuts a focus ring, so it stays on the skills (plain text); the 404 page's list holds links
   and keeps a plain inline dot. */
.skills, .inline-list { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.skills { margin-left: -24px; clip-path: inset(0 0 0 24px); }
.skills li { position: relative; padding-left: 24px; }
.skills li + li::before {
  content: ''; position: absolute; left: 9.5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--lamp);
}
.inline-list li + li::before {
  content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 12px; border-radius: 50%;
  background: var(--lamp); vertical-align: middle;
}
.skills { margin-top: 20px; color: var(--straw); }
.closing { margin-top: 20px; color: var(--straw); }
@media (min-width: 761px) {
  .before, .closing { margin-left: calc(13rem + 32px); }
  .skills { margin-left: calc(13rem + 32px - 24px); }
}

/* ── Footer and the 404 page ───────────────────────────────────────────────────────────────── */
.site-footer { margin-top: var(--space-xl); padding: var(--space-m) 0 48px; border-top: 1px solid var(--line); color: var(--stone); font-size: 0.875rem; }
.site-footer .wrap { display: grid; gap: 4px; }
.site-footer a, .doc__toc a { display: inline-flex; align-items: center; min-height: 24px; }
.notfound { padding: var(--space-xl) 0 24px; }
.notfound h1, .doc h1 { font-size: clamp(2.25rem, 1.15rem + 3.1vw, 3.9rem); line-height: 1.04; font-weight: 760; letter-spacing: -0.025em; }
.notfound p { margin-top: 18px; max-width: 36rem; color: var(--straw); }
.notfound .inline-list { margin-top: 24px; }

/* ── Privacy and terms: prose at reading width; a wide table scrolls in its own box ──────────── */
.doc { padding-top: 64px; }
.doc .wrap > * { max-width: 46rem; }
.doc__date { margin-top: 14px; color: var(--stone); }
.doc__lede { margin-top: 20px; color: var(--straw); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.doc h2 { margin-top: 56px; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.2; font-weight: 720; letter-spacing: -0.015em; }
.doc [id] { scroll-margin-top: 16px; }
.doc h3 { margin-top: 28px; font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
.doc section p, .doc section ul { margin-top: 12px; }
.doc section ul { padding-left: 1.25rem; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--lamp); }
.doc p, .doc li, .table td { color: var(--straw); text-wrap: pretty; }
.doc strong { color: var(--thatch); font-weight: 650; }
.doc__toc { margin-top: 32px; padding: 18px 22px; background: var(--loam); border: 1px solid var(--line); border-radius: var(--radius); }
.doc__toc ul { margin-top: 8px; columns: 2 14rem; column-gap: 32px; }
.table { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.9375rem; }
.table--two table { min-width: 0; }
.table th, .table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table thead th { border-top: 0; color: var(--stone); font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.table tbody th { color: var(--thatch); font-weight: 650; }
.table th[scope='rowgroup'] { background: var(--loam); }
.table small { display: block; color: var(--stone); font-weight: 400; }

/* ── Fixed: touch targets, forced colours ──────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .site-nav__home, .site-nav__trigger, .site-nav__plain, .site-nav__menu, .site-nav__panel a,
  .contact a, .card__links a, .hero-pause { min-height: 44px; }
}
@media (forced-colors: active) {
  .site-nav__panel, .site-nav__sheet, .card, .card__fact { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
  .card:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .skills li + li::before, .inline-list li + li::before { forced-color-adjust: none; background: CanvasText; }
  /* The bar over the card you hover, focus or arrive at: a background colour is forced to Canvas, so keep it. */
  .card::before { forced-color-adjust: none; background: Highlight; }
}

/* ── Forced colours: the picture fades into whatever page colour the person has chosen ─────── */
@media (forced-colors: active) { .hero-fade { stop-color: Canvas; } }