/* Söhne (Klim Type Foundry) needs a Klim *web* license. Drop the woff2 files in /fonts
   to try it in the type explorer; everything else below falls back gracefully. */
@font-face { font-family: "Soehne"; src: url("fonts/soehne-buch.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Soehne"; src: url("fonts/soehne-kraftig.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Soehne Schmal"; src: url("fonts/soehne-schmal-fett.woff2") format("woff2"); font-weight: 900; font-display: swap; }
/* Berkeley Mono (U.S. Graphics Company), web-licensed, for the Terminal vibe. Only downloads when Terminal is on. */
@font-face { font-family: "Berkeley Mono"; src: url("fonts/BerkeleyMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Berkeley Mono"; src: url("fonts/BerkeleyMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Berkeley Mono"; src: url("fonts/BerkeleyMono-Oblique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Berkeley Mono"; src: url("fonts/BerkeleyMono-Bold-Oblique.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- Type tokens (Garden theme; the explorer overwrites these) ---------- */
:root[data-textsize="small"] { --body-size: 1.0625rem; --intro-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); --meta-size: 0.9375rem; }
:root[data-textsize="large"] { --body-size: 1.25rem; --intro-size: clamp(1.3125rem, 1.15rem + 0.55vw, 1.625rem); --meta-size: 1.125rem; }
:root {
  --text-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --text-weight: 400;
  --text-strong: 650;
  --text-stretch: 100%;

  --display-family: "Fraunces", Georgia, "Times New Roman", serif;
  --display-weight: 800;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.03em;
  --display-leading: 0.92;
  --display-fvs: "SOFT" 100, "WONK" 1;
  --display-style: normal;

  /* Text scale (data-textsize: small | default | large). */
  --body-size: 1.125rem;                                   /* 18px */
  --intro-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);  /* 19–22px */
  --meta-size: 1rem;

  --measure: 34rem;
  --space: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}

/* ---------- Color themes ----------
   A palette supplies a light set (--l-*) and a dark set (--d-*), set inline by the
   type explorer for now. The defaults below are the "Moss" palette (Garden theme).
   data-theme: light | dark (absent = follow the system)
   data-contrast: more (absent = follow prefers-contrast), which overrides any palette.
   Every palette is checked to WCAG AA; high contrast meets AAA. */
:root,
:root[data-theme="light"] {
  color-scheme: var(--l-scheme, light);
  --wash: var(--l-wash, var(--bg));
  --error: var(--l-error, #b3261e);
  --bg: var(--l-bg, #eef0e6);  --text: var(--l-text, #172010);  --muted: var(--l-muted, #4e5a45);
  --accent: var(--l-accent, #356119);  --rule: var(--l-rule, #d3d9c6);  --focus: var(--l-focus, #1f4fd1);
  --photo-dark: var(--l-photo-dark, #122008);  --photo-light: var(--l-photo-light, #d4ebc4);
  --rule-width: 1px;  --underline: 0.08em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: var(--d-scheme, dark);
    --wash: var(--d-wash, var(--bg));
    --error: var(--d-error, #ffb4a8);
    --bg: var(--d-bg, #11160e);  --text: var(--d-text, #e7eedd);  --muted: var(--d-muted, #aab79e);
    --accent: var(--d-accent, #a9d681);  --rule: var(--d-rule, #2c3626);  --focus: var(--d-focus, #ffd60a);
    --photo-dark: var(--d-photo-dark, #141f0a);  --photo-light: var(--d-photo-light, #b4da91);
  }
}
:root[data-theme="dark"] {
  color-scheme: var(--d-scheme, dark);
  --wash: var(--d-wash, var(--bg));
  --error: var(--d-error, #ffb4a8);
  --bg: var(--d-bg, #11160e);  --text: var(--d-text, #e7eedd);  --muted: var(--d-muted, #aab79e);
  --accent: var(--d-accent, #a9d681);  --rule: var(--d-rule, #2c3626);  --focus: var(--d-focus, #ffd60a);
  --photo-dark: var(--d-photo-dark, #141f0a);  --photo-light: var(--d-photo-light, #b4da91);
}

/* High contrast: light. Ignores the palette and shows the photo untinted. */
:root[data-contrast="more"] {
  --wash: var(--bg); color-scheme: light; --error: #b3261e;
  --bg: #ffffff;  --text: #000000;  --muted: #1f1f1f;
  --accent: #8c1206;  --rule: #000000;  --focus: #0033cc;
  --rule-width: 2px;  --underline: 0.12em;
}
/* High contrast: dark */
:root[data-contrast="more"][data-theme="dark"] {
  color-scheme: dark; --error: #ffb4a8;
  --bg: #000000;  --text: #ffffff;  --muted: #ededed;
  --accent: #ffc2b8;  --rule: #ffffff;  --focus: #ffd60a;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="more"]:not([data-theme="light"]) {
    --error: #ffb4a8;
    --bg: #000000;  --text: #ffffff;  --muted: #ededed;
    --accent: #ffc2b8;  --rule: #ffffff;  --focus: #ffd60a;
  }
}

/* VIBES:START — generated from themes.js by vibes.js; edit there and regenerate. */
/* Breton: Editorial: serif headline, clean sans text + Breton: blue stripe and white */
:root:not([data-vibe]),
:root[data-vibe="breton"] {
  --display-family: "Instrument Serif", Georgia, serif;
  --display-weight: 400;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.02em;
  --display-leading: 0.92;
  --display-fvs: normal;
  --text-family: "Instrument Sans", sans-serif;
  --text-weight: 400;
  --text-strong: 600;
  --l-bg: #f3f5fa;
  --l-text: #101a33;
  --l-muted: #4c5670;
  --l-accent: #1d46c4;
  --l-rule: #d5dbe8;
  --l-focus: #b3261e;
  --l-photo-dark: #0f1a3d;
  --l-photo-light: #dfe4f4;
  --d-bg: #0d1324;
  --d-text: #e9eef9;
  --d-muted: #a9b4cc;
  --d-accent: #9db8ff;
  --d-rule: #2a3350;
  --d-focus: #ffd60a;
  --d-photo-dark: #0f1b3a;
  --d-photo-light: #c4cfeb;
  --l-focus: #1d46c4;
  --d-focus: #9db8ff;
}
/* Garden: Warm: soft serif + Public Sans + Moss: quiet green */
:root[data-vibe="garden"] {
  --display-family: "Fraunces", Georgia, serif;
  --display-weight: 800;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.03em;
  --display-leading: 0.92;
  --display-fvs: "SOFT" 100, "WONK" 1;
  --text-family: "Public Sans", sans-serif;
  --text-weight: 400;
  --text-strong: 650;
  --l-bg: #eef0e6;
  --l-text: #172010;
  --l-muted: #4e5a45;
  --l-accent: #356119;
  --l-rule: #d3d9c6;
  --l-focus: #1f4fd1;
  --l-photo-dark: #122008;
  --l-photo-light: #d4ebc4;
  --d-bg: #11160e;
  --d-text: #e7eedd;
  --d-muted: #aab79e;
  --d-accent: #a9d681;
  --d-rule: #2c3626;
  --d-focus: #ffd60a;
  --d-photo-dark: #141f0a;
  --d-photo-light: #b4da91;
  --l-focus: #356119;
  --d-focus: #a9d681;
}
/* Asawa: Sculptural: organic grotesque + serif text + Asawa green: deep green wash, sky-blue links */
:root[data-vibe="asawa"] {
  --display-family: "Bricolage Grotesque", sans-serif;
  --display-weight: 700;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-fvs: normal;
  --text-family: "Newsreader", Georgia, serif;
  --text-weight: 400;
  --text-strong: 600;
  --l-bg: #004b2b;
  --l-text: #f3f8f1;
  --l-muted: #c3dccb;
  --l-accent: #a6dcf2;
  --l-rule: #447b62;
  --l-focus: #ffd60a;
  --l-photo-dark: #062116;
  --l-photo-light: #bce5d4;
  --l-wash: #0a5d3a;
  --l-scheme: dark;
  --d-bg: #00301c;
  --d-text: #e8f3ec;
  --d-muted: #a9c8b6;
  --d-accent: #94cfe8;
  --d-rule: #416756;
  --d-focus: #ffd60a;
  --d-photo-dark: #062116;
  --d-photo-light: #99d8be;
  --d-wash: #00462a;
  --d-scheme: dark;
  --l-focus: #a6dcf2;
  --d-focus: #94cfe8;
  --l-error: #ffb4a8;
}
/* Lavender: Hyperlegible: built for low-vision readers + Lavender: from your glasses */
:root[data-vibe="lavender"] {
  --display-family: "Atkinson Hyperlegible Next", sans-serif;
  --display-weight: 800;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-fvs: normal;
  --text-family: "Atkinson Hyperlegible Next", sans-serif;
  --text-weight: 400;
  --text-strong: 700;
  --l-bg: #f4f0fa;
  --l-text: #211a30;
  --l-muted: #5a5068;
  --l-accent: #5b3aa6;
  --l-rule: #ddd3ec;
  --l-focus: #0b6b5a;
  --l-photo-dark: #22153d;
  --l-photo-light: #e7e2f5;
  --d-bg: #19141f;
  --d-text: #efe9f8;
  --d-muted: #b9adc9;
  --d-accent: #c9b6ff;
  --d-rule: #3a3147;
  --d-focus: #ffd60a;
  --d-photo-dark: #201247;
  --d-photo-light: #d3c9ed;
  --l-focus: #5b3aa6;
  --d-focus: #c9b6ff;
}
/* Terminal: Berkeley Mono + Phosphor: green on black, like an old CRT */
:root[data-vibe="terminal"] {
  --display-family: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.02em;
  --display-leading: 1.02;
  --display-fvs: normal;
  --text-family: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-weight: 400;
  --text-strong: 700;
  --l-bg: #0a0f0a;
  --l-text: #9cff9c;
  --l-muted: #5fc46a;
  --l-accent: #33ff66;
  --l-rule: #245c2c;
  --l-focus: #ffb000;
  --l-photo-dark: #031a08;
  --l-photo-light: #9cff9c;
  --l-wash: #0d160e;
  --l-scheme: dark;
  --l-error: #ff8a7a;
  --d-bg: #000000;
  --d-text: #8fef97;
  --d-muted: #5fc46a;
  --d-accent: #33ff66;
  --d-rule: #1f4d26;
  --d-focus: #ffb000;
  --d-photo-dark: #021305;
  --d-photo-light: #8fef97;
  --d-wash: #061008;
  --d-scheme: dark;
}
/* VIBES:END */

/* Checkmark: two straight strokes, drawn (not a font glyph), in the current text colour. */
.vibes input:checked + .vibe::after,
.chips input:checked + .chip strong::before {
  display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.05em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.25 12 13.5 4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.25 12 13.5 4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) {
  .vibes input:checked + .vibe::after,
  .chips input:checked + .chip strong::before { background: CanvasText; forced-color-adjust: none; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(130% 90% at 78% 0%, var(--wash) 0%, var(--bg) 70%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--text-family);
  font-weight: var(--text-weight);
  font-stretch: var(--text-stretch);
  font-size: var(--body-size);  /* rem only, so zoom and user font settings both work */
  line-height: 1.6;
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* long URLs and emails reflow at 400% zoom */
}
strong, b { font-weight: var(--text-strong); }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 0.18em; }
/* Focus ring: the vibe's accent, 3px, with a gap of page color so it reads on any element. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 1rem; top: -100rem; z-index: 10;
  background: var(--text); color: var(--bg);
  padding: 0.5rem 1rem;
}
.skip:focus { top: 1rem; }

.wrap {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--space);
}

.display {
  font-family: var(--display-family);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-style: var(--display-style);
  font-variation-settings: var(--display-fvs);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
}

/* Easter egg: the "11" in A11y / A11ykit wears the vibe's accent colour in headings. */
h1 .num, h2 .num, h3 .num, .standfirst .num { color: var(--accent); }   /* headings only; body text stays plain */
@media (forced-colors: active) { .num { color: inherit; } }

/* The accent colour alone marks the "11" in most vibes. Breton's Instrument Serif draws "1" like "l",
   so only there it borrows the text font's numerals, or "A11ykit" reads as "Allykit". */
.display .num, .hero h1 .num, .standfirst .num { display: inline; }
:is(html:not([data-vibe]), [data-vibe="breton"]) :is(.display, .hero h1, .standfirst:not(.standfirst--quote)) .num {
  display: inline;                                   /* not a line of its own like other hero h1 spans */
  font-family: var(--text-family); font-weight: var(--display-weight);
  font-size: 0.86em; letter-spacing: -0.02em; font-variant-numeric: lining-nums;
}

/* ---------- Site bar (logo + display settings) ---------- */
.sitebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
  font-size: 0.9375rem;
}
/* Logo: the d-in-@ mark plus "ott" spells "dott", in the theme's accent color. */
.logo {
  color: var(--accent);
  text-decoration: none;
  font-size: 2.25rem;
  line-height: 1;
  white-space: nowrap;
}
.logo-mark {
  width: 1.55em; height: 1.55em;
  vertical-align: -0.49em;      /* puts the d's baseline on the text baseline */
  margin-right: -0.04em;
}
.logo:hover .logo-word { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
/* Hand-drawn logo (traced from Dott's sketch); fills with the accent color. */
.logo-sketch { display: block; height: 4.25rem; width: auto; max-width: 100%; fill: currentColor; }
.logo-geo { display: none; }
:root[data-logo="geometric"] .logo-sketch { display: none; }
:root[data-logo="geometric"] .logo-geo { display: inline; }
/* Secret logo: @ott in Berkeley Mono, whose @ reads as Dott's d. Typing "dott" toggles it (site.js). */
.logo-mono { display: none; font-family: "Berkeley Mono", ui-monospace, Menlo, monospace; font-weight: 700; font-size: 3.25rem; letter-spacing: -0.04em; line-height: 4.25rem; }
:root[data-logo="mono"] .logo-sketch { display: none; }
:root[data-logo="mono"] .logo-mono { display: block; }
.logo:hover .logo-mono { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.logo { display: inline-block; max-width: 70%; }

/* ---------- Display settings ----------
   One stroke width everywhere (--stroke, same as the badge border).
   data-prefs:  icon | labeled | inline | inline-icons   (explorer switches these)
   data-frame:  clean | sketch (hand-drawn outlines in the accent color, like the logo) */
:root { --stroke: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Icons always take the theme accent (like the logo), and flip to the background color on filled states. */
.icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent); --drawn-weight: 1px; stroke-width: var(--drawn-weight); }
.prefs-toggle[aria-expanded="true"] .icon,
.segmented input:checked + .seg .icon,
:root[data-prefs="inline-icons"] .switch[aria-checked="true"] .icon { color: inherit; }
/* Dott's drawn icons: a little larger, to match the logo's marker weight and scale. */
:root[data-icons="drawn"] .prefs-toggle .icon { width: 1.9rem; height: 1.9rem; }
:root[data-icons="drawn"] .seg .icon { width: 1.45rem; height: 1.45rem; }
:root[data-icons="drawn"] .switch .icon { width: 1.6rem; height: 1.6rem; }

.prefs-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 3rem; height: 3rem; padding: 0;
  border: var(--stroke) solid currentColor; border-radius: 999px;
  background: none; color: var(--text);
  font: inherit; font-weight: var(--text-strong);
  cursor: pointer;
}
.prefs-toggle[aria-expanded="true"] { background: var(--text); color: var(--bg); }
.toggle-label {                     /* hidden in the icon-only layout, but still the button's name */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:root[data-prefs="labeled"] .prefs-toggle { padding: 0 1.15rem 0 0.9rem; }
:root[data-prefs="labeled"] .toggle-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

.icon-moon { display: none; }
:root[data-theme="dark"] .prefs-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .prefs-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prefs-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .prefs-toggle .icon-moon { display: block; }
}

.prefs {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.75rem 1.5rem;
  padding: 1rem 0;
  border-block: var(--rule-width) solid var(--rule);
}
.prefs[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .prefs:not([hidden]) { animation: prefs-in 220ms ease-out; }
  @keyframes prefs-in { from { opacity: 0; transform: translateY(-0.75rem); } }
}

/* Theme: segmented radio group */
.segmented { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.segmented legend { float: left; padding: 0; color: var(--muted); }
.segmented .options {
  position: relative; display: inline-flex;
  border: var(--stroke) solid var(--text); border-radius: 999px;
}
.segmented label { position: relative; display: block; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; border-radius: 999px; }
.seg .icon { width: 1.2rem; height: 1.2rem; }
.segmented input:checked + .seg { background: var(--text); color: var(--bg); font-weight: var(--text-strong); }
.segmented input:focus-visible + .seg { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Vibe: radio group of four looks, each with a two-color swatch. */
.vibes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.vibes legend { float: left; padding: 0; color: var(--muted); }
.vibe-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vibes label { position: relative; cursor: pointer; }
.vibes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vibe {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.85rem 0.3rem 0.4rem;
  border: var(--stroke) solid var(--rule); border-radius: 999px;
}
.swatch {
  width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent);
}
.vibes input:checked + .vibe { border-color: var(--text); font-weight: var(--text-strong); }
.vibes input:checked + .vibe::after { content: ""; }   /* selection shown by shape, not color alone */
.vibes input:focus-visible + .vibe { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (forced-colors: active) { .swatch { forced-color-adjust: none; } }

/* High contrast: switch */
.switch {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: inherit; color: var(--text);
  background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
}
.switch .icon { width: 1.3rem; height: 1.3rem; }
.switch .track {
  width: 2.75rem; height: 1.5rem; flex: none;
  border: var(--stroke) solid currentColor; border-radius: 999px;
  position: relative;
}
.switch .track::after {
  content: ""; position: absolute; top: 50%; left: 0.2rem;
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: currentColor; transform: translateY(-50%);
}
.switch[aria-checked="true"] .track { background: currentColor; }
.switch[aria-checked="true"] .track::after { left: auto; right: 0.2rem; background: var(--bg); }
.switch .state { color: var(--muted); }

/* Always-visible layouts: no toggle, the controls sit in the header. */
:root[data-prefs^="inline"] .prefs-toggle { display: none; }
:root[data-prefs^="inline"] .prefs,
:root[data-prefs^="inline"] .prefs[hidden] {
  display: flex; flex-basis: auto; border: 0; padding: 0; animation: none;
}
:root[data-prefs^="inline"] .segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Icons only: text stays for screen readers and voice control, hidden visually. */
:root[data-prefs="inline-icons"] .seg-text,
:root[data-prefs="inline-icons"] .switch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-prefs="inline-icons"] .seg { padding: 0.55rem 0.7rem; }
:root[data-prefs="inline-icons"] .switch .track,
:root[data-prefs="inline-icons"] .switch .state { display: none; }
:root[data-prefs="inline-icons"] .switch {
  justify-content: center; width: 2.9rem; height: 2.9rem; padding: 0;
  border: var(--stroke) solid currentColor; border-radius: 50%;
}
:root[data-prefs="inline-icons"] .switch[aria-checked="true"] { background: var(--text); color: var(--bg); }

/* Hand-drawn frames: wobbly outlines replace the perfect borders, in the accent color. */
.frame {
  display: none; position: absolute;
  inset: calc(var(--stroke) * -1);
  width: calc(100% + var(--stroke) * 2); height: calc(100% + var(--stroke) * 2);
  overflow: visible; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: var(--stroke);
}
:root[data-frame="sketch"] .prefs-toggle { border-color: transparent; color: var(--accent); }
/* Hand-drawn style gets more room, so the outline never crowds the icon or label. */
:root[data-frame="sketch"] .prefs-toggle { min-width: 3.5rem; height: 3.5rem; }
:root[data-frame="sketch"][data-prefs="labeled"] .prefs-toggle { padding: 0 1.6rem 0 1.25rem; }
:root[data-frame="sketch"][data-prefs="inline-icons"] .switch { width: 3.4rem; height: 3.4rem; }
:root[data-frame="sketch"] .prefs-toggle .frame-ring { display: block; }
:root[data-frame="sketch"][data-prefs="labeled"] .prefs-toggle .frame-ring { display: none; }
:root[data-frame="sketch"][data-prefs="labeled"] .prefs-toggle .frame-pill { display: block; }
:root[data-frame="sketch"] .prefs-toggle[aria-expanded="true"] { background: none; }
:root[data-frame="sketch"] .prefs-toggle[aria-expanded="true"] .frame { fill: var(--accent); }
:root[data-frame="sketch"] .prefs-toggle[aria-expanded="true"] .icon,
:root[data-frame="sketch"] .prefs-toggle[aria-expanded="true"] .toggle-label { position: relative; color: var(--bg); }

:root[data-frame="sketch"] .switch .track,
:root[data-frame="sketch"] .switch .icon { color: var(--accent); }
:root[data-frame="sketch"][data-prefs="inline-icons"] .switch { border-color: transparent; color: var(--accent); }
:root[data-frame="sketch"][data-prefs="inline-icons"] .switch .frame-ring { display: block; }
:root[data-frame="sketch"][data-prefs="inline-icons"] .switch[aria-checked="true"] { background: none; }
:root[data-frame="sketch"][data-prefs="inline-icons"] .switch[aria-checked="true"] .frame { fill: var(--accent); }
:root[data-frame="sketch"][data-prefs="inline-icons"] .switch[aria-checked="true"] .icon { position: relative; color: var(--bg); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  gap: calc(var(--space) * 1.25) calc(var(--space) * 1.5);
  align-items: start;
  padding-block: calc(var(--space) * 1.5) calc(var(--space) * 2);
}
/* The photo gets a real share of the width: ~45% on wide screens, up to 34rem. */
@media (min-width: 52rem) {      /* rem breakpoints respond to zoom */
  .hero:has(.portrait) {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr);
    grid-template-areas: "head photo" "intro photo";
    grid-template-rows: auto 1fr;
  }
  .hero-head { grid-area: head; }
  .hero .portrait { grid-area: photo; }
  .hero .intro { grid-area: intro; }
}
.hero-head h1.headline { margin-bottom: 0; }
.hero h1 {
  font-size: clamp(3.75rem, 2rem + 8.5vw, 10rem);
  margin: 0 0 0.35em;
}
.hero h1 span { display: block; }

/* Wilson Miner-style headline: the name opens a sentence. */
.hero h1.headline {
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5.25rem);
  line-height: calc(var(--display-leading) + 0.1);
  margin: 0 0 0.5em;
  max-width: 14ch;
  text-wrap: balance;
}
/* Wide fonts (Terminal's monospace) cap the size so "accessibility", the longest word, always fits its column. */
.hero-head { container-type: inline-size; }
:root[data-vibe="terminal"] .hero h1.headline { font-size: min(clamp(2.5rem, 1.4rem + 4vw, 5.25rem), 12.5cqi); }
:root[data-vibe="terminal"] .section h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); }   /* fits the 18rem side column */
:root[data-vibe="terminal"] .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }   /* one per row before a label would split */
@media (max-width: 26rem) {   /* room for "Alternative" in the narrow chart card */
  :root[data-vibe="terminal"] .bar-chart th { font-size: 0.9375rem; padding-right: 0.6rem; }
}
@media (max-width: 26rem) {   /* phones and 400% zoom: the thumbnail sits above the title, so titles get the full width */
  :root[data-vibe="terminal"] .more-work .list .item { grid-template-columns: minmax(0, 1fr); }
}
.intro p {
  font-size: var(--intro-size);
  line-height: 1.5;
  max-width: 32rem;
  margin: 0 0 1em;
}
.intro p:last-child { margin-bottom: 0; }

.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem; font-weight: var(--text-strong);
  letter-spacing: 0.02em;
}
.status::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--accent);
}
.lede {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.375rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0;
}
.lede strong { font-weight: var(--text-strong); }
.portrait { margin: 0; width: 100%; max-width: 34rem; }
.portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
}
/* Duotone, like wilsonminer.com: the grey photo is multiplied onto the light color,
   then its shadows are lifted to the dark color. */
.portrait {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--photo-light);
  border: var(--rule-width) solid var(--rule);
  border-radius: 1.25rem;
}
/* Photo tone (data-phototone): lift mid-tones before tinting so faces stay readable. */
:root { --photo-brightness: 1.12; --photo-contrast: 1.05; }
:root[data-phototone="soft"]   { --photo-brightness: 1.2;  --photo-contrast: 0.95; }
:root[data-phototone="punchy"] { --photo-brightness: 1.06; --photo-contrast: 1.2; }
:root[data-phototone="original"] { --photo-brightness: 1; --photo-contrast: 1.15; }
.portrait img {
  filter: grayscale(1) brightness(var(--photo-brightness)) contrast(var(--photo-contrast));
  mix-blend-mode: multiply;
}
.portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--photo-dark); mix-blend-mode: lighten;
}
/* Natural photo: by choice, in high contrast, and in Windows contrast themes. */
:root[data-photo="natural"] .portrait img,
:root[data-contrast="more"] .portrait img { filter: none; mix-blend-mode: normal; }
:root[data-photo="natural"] .portrait::after,
:root[data-contrast="more"] .portrait::after { display: none; }
@media (forced-colors: active) {
  .portrait img { filter: none; mix-blend-mode: normal; }
  .portrait::after { display: none; }
}

/* Availability badge: the word "Open" carries the meaning; shape and icon reinforce it,
   and everything takes the theme accent, like the logo. */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem 0.6rem;   /* icon stays beside the text; only the text wraps */
  margin: 0 0 1.5rem;
  padding: 0.5rem 1.1rem 0.5rem 0.75rem;
  border: var(--stroke) solid var(--accent);
  border-radius: 1.6em;             /* a pill on one line, a soft rounded box when it wraps at high zoom */
  font-size: 1.1875rem; font-weight: var(--text-strong); line-height: 1.2;
}
.badge svg { width: 1.6em; height: 1.6em; flex: none; color: var(--accent); }
.badge strong { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.badge .sep { color: var(--muted); }
.badge .emoji { font-size: 1.4em; line-height: 1; }

/* Shop sign: a solid OPEN plaque hanging from a little cord. */
.badge--sign, .badge--noun-sign { padding-left: 0.6rem; padding-top: 0.85rem; }
.badge .sign {
  position: relative;
  padding: 0.2em 0.6em;
  border-radius: 0.3em;
  background: var(--accent); color: var(--bg);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; font-size: 0.9em;
}
.badge .sign::before {             /* the hanging cord */
  content: ""; position: absolute; left: 50%; top: -0.6em;
  width: 1.4em; height: 0.75em; translate: -50% 0;
  border: 2px solid var(--accent); border-bottom: 0;
  border-radius: 0.7em 0.7em 0 0;
}

/* Icon inside the OPEN sign. */
.badge .sign { display: inline-flex; align-items: center; gap: 0.35em; }
.badge .sign svg { width: 1.25em; height: 1.25em; color: inherit; }

/* Icon in a solid accent circle. */
.badge .chip {
  display: inline-grid; place-items: center; flex: none;
  width: 2em; height: 2em; border-radius: 50%;
  background: var(--accent); color: var(--bg);
}
.badge .chip svg { width: 1.3em; height: 1.3em; color: inherit; }
@media (forced-colors: active) { .badge .chip { forced-color-adjust: none; background: CanvasText; color: Canvas; } }

/* Split tag: solid OPEN segment, outlined details. */
.badge--split { padding: 0; gap: 0; overflow: hidden; }
.badge .seg {
  align-self: stretch; display: flex; align-items: center;
  padding: 0.5rem 0.9rem;
  background: var(--accent); color: var(--bg);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800;
}
.badge .rest { padding: 0.5rem 1.1rem 0.5rem 0.8rem; }

@media (forced-colors: active) {
  .badge .sign, .badge .seg { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .badge .sign::before { border-color: CanvasText; }
}

/* The badge is a real button now: it opens the contact dialog. */
button.badge {
  font: inherit; font-size: 1.1875rem; font-weight: var(--text-strong);
  color: var(--text); background: transparent; cursor: pointer; text-align: left;
}
button.badge:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.badge-arrow { width: 1.1em !important; height: 1.1em !important; color: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .badge-arrow { transition: transform 150ms ease; }
  button.badge:hover .badge-arrow { transform: translateX(3px); }
  /* One small wave on hover or keyboard focus: right, left, back to rest. Pivots at the wrist.
     Plays once per hover/focus; no motion at all when reduce motion is on. */
  .wave-hand { transform-origin: 70% 85%; }
  button.badge:hover .wave-hand,
  button.badge:focus-visible .wave-hand { animation: hand-wave 700ms ease-in-out 1; }
  @keyframes hand-wave {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(14deg); }
    65%      { transform: rotate(-10deg); }
  }
}

/* LinkedIn link with its logo; the logo takes the vibe's link colour. */
.social-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: var(--text-strong); min-height: 2.75rem; }
.social-icon { width: 1.35em; height: 1.35em; flex: none; color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: var(--text-strong); line-height: 1.2;
  min-height: 2.9rem; padding: 0.7rem 1.35rem; border-radius: 999px; cursor: pointer;
  border: var(--stroke) solid var(--text); background: transparent; color: var(--text);
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); }
.btn--quiet:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
/* Asawa's Newsreader reserves less room above its letters than the other text faces, so one-line
   button labels sit about 0.1em above center. Shift them down by that much. */
:root[data-vibe="asawa"] .btn { padding-top: calc(0.7rem + 0.1em); padding-bottom: calc(0.7rem - 0.1em); }
:root[data-vibe="asawa"] :is(.toggle-label, .feedback-label) { position: relative; top: 0.1em; }

/* ---------- Contact dialog ---------- */
.contact {
  width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  padding: 0; overflow: auto;
  border: var(--stroke) solid var(--accent); border-radius: 1.25rem;
  color: var(--text); background-color: var(--bg);
  background-image: radial-gradient(130% 90% at 80% 0%, var(--wash) 0%, var(--bg) 70%);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.35);
}
dialog.contact:not([open]) { display: none; }
.contact.is-fallback {
  position: fixed; inset: 0; margin: auto; z-index: 1000; height: fit-content;
  box-shadow: 0 0 0 100vmax rgb(10 10 20 / 0.55), 0 1.5rem 4rem rgb(0 0 0 / 0.35);   /* stands in for ::backdrop */
}
.contact::backdrop { background: rgb(10 10 20 / 0.55); }
.contact-form { position: relative; padding: clamp(1.25rem, 4vw, 2.25rem); padding-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.contact-actions { margin-bottom: 0; }
.contact h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin: 0 3rem 0.5rem 0; }
.contact-intro { margin: 0 0 1.5rem; max-width: 32rem; }
.contact-x {
  position: absolute; top: 1rem; right: 1rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: var(--stroke) solid var(--muted); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
}
.contact-x svg { width: 1.2rem; height: 1.2rem; }

.reasons { border: 0; margin: 0 0 1.25rem; padding: 0; }
.reasons legend, .field label { display: block; font-weight: var(--text-strong); margin-bottom: 0.5rem; padding: 0; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@container (max-width: 15rem) { .chips { grid-template-columns: minmax(0, 1fr); } }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip {
  display: block; height: 100%; padding: 0.6rem 0.9rem; border-radius: 0.9rem;
  border: var(--stroke) solid var(--muted);              /* 4.5:1+ border so the shape is visible */
}
.chip-hint { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.3; }
.chips input:checked + .chip { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.chips input:checked + .chip .chip-hint { color: inherit; }
.chips input:checked + .chip strong::before { content: ""; margin-right: 0.35em; }   /* selected shown by shape, not colour alone */
.chips input:focus-visible + .chip { outline: 3px solid var(--focus); outline-offset: 3px; }

.field { margin: 0 0 1.1rem; }
.field input, .field textarea {
  display: block; width: 100%; font: inherit; color: var(--text);
  padding: 0.7rem 0.85rem; border-radius: 0.75rem;
  border: var(--stroke) solid var(--muted); background: color-mix(in srgb, var(--bg) 85%, var(--text) 4%);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field [aria-invalid="true"], .reasons:has([aria-invalid="true"]) .chip { border-color: var(--error); }
.field-error { margin: 0.4rem 0 0; color: var(--error); font-weight: var(--text-strong); font-size: var(--meta-size); }
.field-error::before { content: "⚠ "; }                       /* icon + words, not colour alone */

.contact-head { display: flex; align-items: center; gap: 0.9rem; margin: 0 3rem 1.25rem 0; }
.contact h2#contact-title { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.15rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.hands { display: inline-flex; flex: none; gap: 0; color: var(--accent); }
.hand { width: clamp(2.2rem, 1.7rem + 1.6vw, 2.8rem); height: auto; position: relative; }
.hand--right { margin-left: -0.55rem; top: -0.5rem; }   /* close together, one a little higher */
.hands { padding-top: 0.5rem; }
.hand--left { transform: scaleX(-1); }                     /* mirrored: the two hands wave at each other */
@media (prefers-reduced-motion: no-preference) {
  .contact[open] .hand--left, .contact-sent:not([hidden]) .hand--left { animation: wave-l 900ms ease-in-out 250ms 1; transform-origin: 30% 85%; }
  .contact[open] .hand--right, .contact-sent:not([hidden]) .hand--right { animation: wave-r 900ms ease-in-out 350ms 1; transform-origin: 70% 85%; }
  @keyframes wave-l { 0%,100% { transform: scaleX(-1) rotate(0); } 30% { transform: scaleX(-1) rotate(12deg); } 65% { transform: scaleX(-1) rotate(-8deg); } }
  @keyframes wave-r { 0%,100% { transform: rotate(0); } 30% { transform: rotate(12deg); } 65% { transform: rotate(-8deg); } }
}
@container (max-width: 24rem) { .contact-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; } }
.topic-note {
  margin: 0; padding: 0.9rem 1.1rem;
  border-left: 0.3rem solid var(--accent); border-radius: 0 0.75rem 0.75rem 0;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.label-hint { display: block; font-weight: var(--text-weight); color: var(--muted); font-size: var(--meta-size); }
.contact-alt { margin: 0.5rem 0 1.25rem; }
.signoff { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; color: var(--accent); font-style: italic; }
.signoff span:first-child { color: var(--muted); }
.signature-mark { height: 3rem; width: auto; fill: currentColor; }
.contact-status:empty { display: none; }
.contact-status { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; border: var(--stroke) solid var(--accent); }

.start-over { margin: -0.35rem 0 1rem; text-align: right; }
.btn--link {
  font: inherit; font-size: var(--meta-size); color: var(--accent); background: none; border: 0; padding: 0.35rem 0;
  min-height: 2.75rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;   /* 44px tall target */
}
/* Narrow screens and high zoom: full-width stacked buttons in reading/tab order,
   so "Send a message" ends up at the bottom, nearest the thumb. */
.contact-form, .contact-next { container-type: inline-size; }
@container (max-width: 30rem) {
  /* Whenever the buttons can't sit side by side, they stack edge to edge with centered text. */
  .contact-actions { flex-direction: column; flex-wrap: nowrap; }
  .contact-actions .btn, .send-options .btn { width: 100%; justify-content: center; text-align: center; }
  .send-options { flex-direction: column; }
}
.contact-next, .contact-sent { padding: clamp(1.25rem, 4vw, 2.25rem); }
.contact-sent h2 { overflow-wrap: anywhere; }
.contact-sent .contact-intro strong { overflow-wrap: anywhere; }
.contact-next h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem); margin: 0 0 0.5rem; }
.contact-next h2:focus, .contact-sent h2:focus { outline: none; }
.send-options { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }
.send-options .btn { text-decoration: none; display: inline-flex; align-items: center; }
a.btn.btn--primary { color: var(--bg); }
.send-fallback { color: var(--muted); }
.contact-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0.75rem; padding-top: 1rem; border-top: var(--rule-width) solid var(--rule); }

@media (prefers-reduced-motion: no-preference) {
  .contact[open] { animation: contact-in 220ms ease-out; }
  .contact[open]::backdrop { animation: backdrop-in 220ms ease-out; }
  @keyframes contact-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } }
  @keyframes backdrop-in { from { opacity: 0; } }
}
@media (forced-colors: active) {
  .contact { border-color: CanvasText; }
  .chips input:checked + .chip { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ---------- Sections ---------- */
.section {
  display: grid;
  gap: 0.75rem var(--space);
  padding-block: calc(var(--space) * 1.25);
  border-top: var(--rule-width) solid var(--text);
}
@media (min-width: 52rem) {
  .section { grid-template-columns: minmax(10rem, 18rem) minmax(0, var(--measure)); }
}
.section h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  margin: 0;
}
.section p { margin: 0 0 1em; max-width: var(--measure); }
.section p:last-child { margin-bottom: 0; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding-block: 0.85rem; }
.list li:first-child { padding-top: 0.15rem; }
.list li + li { border-top: var(--rule-width) solid var(--rule); }
.list .title { display: block; font-weight: var(--text-strong); font-size: 1.25rem; line-height: 1.3; }
.list .meta { display: block; color: var(--muted); font-size: var(--meta-size); margin-top: 0.25rem; }
.list .kicker { display: block; color: var(--muted); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.15rem; }

.more { display: inline-block; margin-top: 1rem; font-weight: var(--text-strong); }

.site-footer {
  border-top: var(--rule-width) solid var(--text);
  padding-block: var(--space);
  color: var(--muted);
  font-size: 1rem;
}
.site-footer p { margin: 0; }

/* Shortest bio: three short lines. */
.intro .lines span { display: block; }

/* ---------- Thumbnails (Selected work, Talks, Projects) ----------
   Decorative: titles sit right beside them, so images will get alt="". 4:3, ~1200×900 source. */
.list .item { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: 0.4rem 1.1rem; align-items: start; }
.thumb {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; overflow: hidden;
  border: var(--rule-width) solid var(--rule); border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--muted); font-size: 0.75rem; text-align: center; padding: 0.25rem;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:has(img) { padding: 0; }      /* real images fill the frame edge to edge */
/* Whole-item link: the title is the only real link (one tab stop, one announcement);
   its click area stretches over the item, so the decorative thumbnail is clickable too. */
.list .item { position: relative; border-radius: 0.75rem; }
.list .item a.title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.list .item:has(a.title):hover { cursor: pointer; }
.list .item:hover a.title { text-decoration-thickness: 0.18em; }
@supports selector(:has(*)) {
  /* Show focus around the whole item instead of just the title. */
  .list .item a.title:focus-visible { outline: none; }
  .list .item:has(a.title:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
}

:root[data-thumbs="hide"] .thumb { display: none; }
:root[data-thumbs="hide"] .list .item { display: block; }
@media (max-width: 30rem) {        /* small screens and high zoom: image above the text */
  .list .item { grid-template-columns: minmax(0, 1fr); }
  .thumb { max-width: 20rem; }
}

/* ---------- Selected work: card grid on very large screens ----------
   Below 75rem (and at zoom) it stays the thumbnail + text list. */
@media (min-width: 75rem) {
  .section--work { grid-template-columns: minmax(0, 1fr); }
  .section--work > div { max-width: none; }
  .section--work .list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.75rem;
  }
  .section--work .list li + li { border-top: 0; }
  .section--work .list .item {
    display: flex; flex-direction: column; padding: 0;
    border: var(--rule-width) solid var(--rule); border-radius: 1rem; overflow: hidden;
    background: color-mix(in srgb, var(--bg) 92%, var(--text) 3%);
  }
  .section--work .list .item:first-child { grid-column: span 2; }        /* A11ykit leads */
  .section--work .thumb {
    width: 100%; max-width: none; aspect-ratio: 4 / 3;   /* thumbnails are 4:3: nothing gets cropped */
    border: 0; border-bottom: var(--rule-width) solid var(--rule); border-radius: 0;
  }
  /* Wide lead card: same thumbnail height as its neighbour; whole arch shown on its own navy. */
  .section--work .item:first-child .thumb { aspect-ratio: auto; height: auto; }
  .section--work .item:first-child .thumb img { aspect-ratio: 2.78 / 1; object-fit: contain; background: #190b73; }
  .section--work .item-body { display: block; padding: 1.1rem 1.35rem 1.4rem; }
  .section--work .item .title { font-size: 1.35rem; }
  .section--work .list .item:has(a.title:focus-visible) { outline-offset: 3px; border-radius: 1rem; }
  @media (prefers-reduced-motion: no-preference) {
    .section--work .thumb img { transition: transform 300ms ease; }
    .section--work .item:hover .thumb img { transform: scale(1.03); }
  }
  .section--work .more { margin-top: 1.75rem; }
}

/* ---------- Where I've worked: monotone logos ----------
   Every logo has its company name as real text. On small screens and at high zoom the logos
   give way to a plain bulleted list, which is clearer than tiny marks.
   data-brands: section (heading + grid) | strip (one quiet row) | none */
.brand-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  align-items: center; gap: 2rem 2.25rem;
  color: var(--muted);
}
.brand-list li { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
@media (min-width: 52rem) {
  .section.brands { grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); }   /* wider than the text measure */
  .brand-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }                 /* 9 logos: a balanced 3 × 3 */
}
.brand-list svg { height: var(--logo-h); width: auto; max-width: 100%; flex: none; }
.brand-name { font-weight: var(--text-strong); font-size: 1.35rem; letter-spacing: -0.01em; color: var(--muted); }
.brand-name--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:root[data-brands="strip"] .brands { display: block; padding-block: 1.5rem; }
:root[data-brands="strip"] .brands h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:root[data-brands="strip"] .brand-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 2rem; }
:root[data-brands="strip"] .brand-list svg { height: calc(var(--logo-h) * 0.85); }
:root[data-brands="none"] .brands { display: none; }

@media (max-width: 40rem) {        /* phones and ~200%+ zoom: text list instead of logos */
  .brand-list, :root[data-brands="strip"] .brand-list {
    display: block; list-style: disc; padding-left: 1.25rem; color: var(--text);
  }
  .brand-list li { display: list-item; padding-block: 0.2rem; }
  .brand-list svg { display: none; }
  .brand-name, .brand-name--hidden {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    font-size: var(--body-size); font-weight: var(--text-weight); color: var(--text);
  }
  :root[data-brands="strip"] .brands h2 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-bottom: 0.75rem; }
}
@media (forced-colors: active) { .brand-list, .brand-name { color: CanvasText; } }

/* ---------- Work pages ---------- */
/* Work-page header with an image beside the title (like the home page photo). */
@media (min-width: 52rem) {
  .hero--work { grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 1fr); align-items: center; }
}
.hero-art { margin: 0; max-width: 22rem; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: 1rem; border: var(--rule-width) solid var(--rule); }

/* Full-width banner at the top of a page (Docusign overview). */
.page-banner { margin: calc(var(--space) * 0.5) 0 0; }
.page-banner img {
  display: block; width: 100%; height: auto; border-radius: 1rem;
  max-height: clamp(9rem, 24vw, 17rem); object-fit: cover;   /* trims only plain blue; logo stays centred */
}

.crumb { padding-top: calc(var(--space) * 0.75); font-weight: var(--text-strong); }
.crumb a { text-decoration-thickness: var(--underline); }

/* Role / team / timeline summary */
.case-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 2rem; margin: 0 0 calc(var(--space) * 1.5); padding: 1.25rem 0 0;
  border-top: var(--rule-width) solid var(--rule);   /* the next section's own top line closes it */
}
.case-meta dt { font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.case-meta dd { margin: 0.2rem 0 0; }

.work-body > p, .work-body > ul { max-width: var(--measure); }
.work-body > * + * { margin-top: 1.25rem; }
.bullets { padding-left: 1.25rem; margin: 0; }
.work-subhead { font-size: 1.3rem; line-height: 1.3; margin: 2rem 0 0; font-weight: var(--text-strong); }
.work-subhead + p { margin-top: 0.4rem; }
.bullets li + li { margin-top: 0.6rem; }

/* Figures: images keep their own proportions; wide ones span the whole content column. */
.work-figure, .work-video { margin: 1.75rem 0 0; }
.work-figure img, .work-video video {
  display: block; width: 100%; height: auto;
  border: var(--rule-width) solid var(--rule); border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.work-figure:not(.work-figure--wide) img { max-width: 34rem; }
.work-figure figcaption, .work-video figcaption {
  margin-top: 0.6rem; max-width: var(--measure);
  color: var(--muted); font-size: var(--meta-size);
}
@media (min-width: 52rem) {
  /* Wide figures and the video break out of the text measure to the full content width. */
  .work-body { min-width: 0; }
  .section:has(.work-figure--wide, .work-video, .kit-timeline) { grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); }
}
.work-video video { aspect-ratio: 1280 / 804; }
.work-video figcaption strong { color: var(--text); }

/* Hero with stat tiles beside the title (A11ykit): 2×2 on the right on wide screens, below on narrow. */
@media (min-width: 60rem) {
  .hero--stats { grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 1fr); align-items: end; }
}
.stats.stats--hero { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 20rem) { .stats.stats--hero { grid-template-columns: minmax(0, 1fr); } }   /* single column only at extreme zoom */
.stats--hero .stat-num { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); white-space: nowrap; }
.stats--hero li { padding: 0.9rem 1rem; min-width: 0; }
.stats-note { grid-column: 2; margin: calc(var(--space) * -1.05) 0 0; color: var(--muted); font-size: var(--meta-size); }
@media (max-width: 59.99rem) { .stats-note { grid-column: auto; } }
.stat-icon { display: block; width: 1.9rem; height: 1.9rem; color: var(--accent); margin-bottom: 0.6rem; }
@media (forced-colors: active) { .stat-icon { color: CanvasText; } }

/* Quote card beside a case-study title (Annotation Wizard). */
.quote-card {
  position: relative; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 1.25rem;
  border: var(--rule-width) solid var(--rule);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.quote-mark { width: 3rem; height: auto; color: var(--accent); display: block; margin-bottom: 0.5rem; }
.quote-card blockquote { margin: 0; }
.quote-card blockquote p {
  margin: 0; font-family: var(--display-family); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.1; letter-spacing: var(--display-tracking);
}
.quote-by { margin: 0.6rem 0 0; color: var(--muted); font-size: var(--meta-size); }
.quote-by::before { content: "— "; }
.stats.stats--quote { margin: 1.25rem 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--quote li { background: var(--bg); padding: 0.85rem 1rem; }
.stats--quote .stat-num { font-size: 1.8rem; }
@media (max-width: 20rem) { .stats.stats--quote { grid-template-columns: minmax(0, 1fr); } }

/* Stat tiles */
.work-body { min-width: 0; }
.stats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
.stats li { padding: 1rem 1.1rem; border: var(--rule-width) solid var(--rule); border-radius: 0.9rem; }
.stat-num { display: block; font-family: var(--display-family); font-weight: var(--display-weight); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1.05; color: var(--text); }
.stat-label { display: block; margin-top: 0.35rem; color: var(--muted); font-size: var(--meta-size); line-height: 1.35; }

/* Bar chart, built as a real table: one series, one colour (the vibe accent), values in text colour. */
.bar-chart { margin: 1.75rem 0 1.75rem; max-width: 40rem; }
.bar-chart figcaption { margin-bottom: 0.75rem; }
.bar-chart figcaption span { display: block; color: var(--muted); font-size: var(--meta-size); }
.bar-chart table { width: 100%; border-collapse: collapse; }
.bar-chart table { table-layout: fixed; }
.bar-chart th { text-align: left; font-weight: var(--text-weight); padding: 0.3rem 1rem 0.3rem 0; width: clamp(6.5rem, 30%, 8.5rem); font-size: var(--meta-size); line-height: 1.25; overflow-wrap: anywhere; }
.bar-chart td { padding: 0.3rem 0; display: flex; align-items: center; gap: 0.5rem; }
.bar { display: block; height: 0.75rem; width: calc(var(--v) * 0.7); min-width: 2px; flex: none; background: var(--accent); border-radius: 0 4px 4px 0; }
.bar-value { font-variant-numeric: tabular-nums; font-size: var(--meta-size); color: var(--text); white-space: nowrap; }
.bar-chart tr:hover th, .bar-chart tr:hover .bar-value { font-weight: var(--text-strong); }
.bar-chart tr:hover .bar { background: color-mix(in srgb, var(--accent) 80%, var(--text)); }
@media (forced-colors: active) { .bar { background: CanvasText; forced-color-adjust: none; } }

.pull-quote {
  margin: 1.5rem 0 0; padding: 0.25rem 0 0.25rem 1.25rem; max-width: var(--measure);
  border-left: 0.3rem solid var(--accent);
}
.pull-quote p { margin: 0; font-family: var(--display-family); font-weight: var(--display-weight); font-size: 1.6rem; line-height: 1.2; }
.pull-quote footer { margin-top: 0.5rem; color: var(--muted); font-size: var(--meta-size); }

/* ---------- A11ykit version timeline (A11ykit 1.5 palette, same in every vibe) ----------
   navy #12056f · indigo #282177 · coral #ea5143 · lavender #cfc6eb · electric #1a13e7
   Text: white 16.5:1, lavender 10.1:1 on navy; coral 4.5:1 used for the selected point and large type. */
.kit-timeline {
  --kt-navy: #12056f; --kt-indigo: #282177; --kt-coral: #ea5143; --kt-lav: #cfc6eb; --kt-blue: #1a13e7;
  container-type: inline-size;
  margin: 0.5rem 0 0; padding: clamp(1rem, 3vw, 1.75rem); border-radius: 1.25rem;
  background: var(--kt-navy); color: #fff;
}
.kt-list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; }
.kt-list::before {                                   /* the timeline track */
  content: ""; position: absolute; left: 8%; right: 8%; top: 1.05rem; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--kt-blue), var(--kt-lav)); opacity: 0.55;
}
.kt-list [role="tab"] {
  position: relative; display: grid; justify-items: center; gap: 0.35rem; padding: 0.35rem 0.25rem 0.6rem;
  font: inherit; color: var(--kt-lav); background: none; border: 0; border-radius: 0.75rem; cursor: pointer; text-align: center;
}
.kt-dot {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--kt-navy); border: 3px solid var(--kt-lav);
}
.kt-ver { font-weight: var(--text-strong); font-size: var(--meta-size); line-height: 1.2; }
.kt-date { font-size: 0.875rem; line-height: 1.2; }
.kt-list [role="tab"]:hover .kt-dot { background: var(--kt-indigo); }
.kt-list [role="tab"][aria-selected="true"] { color: #fff; }
.kt-list [role="tab"][aria-selected="true"] .kt-dot {          /* selected: filled coral + larger, not colour alone */
  background: var(--kt-coral); border-color: #fff; transform: scale(1.2);
}
.kt-list [role="tab"][aria-selected="true"] .kt-ver { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.kt-list [role="tab"]:focus-visible { outline: 3px solid var(--kt-coral); outline-offset: 2px; }
.kt-panel { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-radius: 0.9rem; background: var(--kt-indigo); }
.kt-panel:focus-visible { outline: 3px solid var(--kt-coral); outline-offset: 2px; }
.kt-panel h3 { margin: 0 0 0.4rem; font-size: 1.3rem; color: #fff; }
.kt-panel h3 .num { color: var(--kt-coral); }
.kt-panel-date { font-weight: var(--text-weight); font-size: var(--meta-size); color: var(--kt-lav); margin-left: 0.4rem; }
.kt-panel p { margin: 0; color: #fff; max-width: var(--measure); }
.kt-panel a { color: var(--kt-lav); }
.kit-timeline .todo { color: #1d1a17; }
.kt-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem); gap: 1rem 1.5rem; align-items: start; }
.kt-figure { margin: 0; }
.kt-figure img { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.kt-figure--empty > span {
  display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 0.6rem;
  border: 2px dashed color-mix(in srgb, var(--kt-lav) 60%, transparent); font-size: var(--meta-size);
}
@container (max-width: 48rem) { .kt-panel-grid { grid-template-columns: minmax(0, 1fr); } }
.kt-panel { padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); }
@media (prefers-reduced-motion: no-preference) { .kt-dot { transition: transform 150ms ease, background 150ms ease; } }
/* Narrow: a vertical timeline. */
@container (max-width: 34rem) {
  .kt-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kt-list::before { left: 1.15rem; right: auto; top: 1rem; bottom: 1rem; width: 4px; height: auto; background: linear-gradient(180deg, var(--kt-blue), var(--kt-lav)); }
  .kt-list [role="tab"] { grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; column-gap: 0.75rem; text-align: left; padding: 0.45rem 0.45rem; }
  .kt-date { justify-self: end; }
}
@media (forced-colors: active) {
  .kit-timeline, .kt-panel { border: 1px solid CanvasText; }
  .kt-list [role="tab"][aria-selected="true"] .kt-dot { background: Highlight; forced-color-adjust: none; }
}

/* ---------- Editorial spread (Annotation Wizard overview) ---------- */
.section.section--spread { grid-template-columns: minmax(0, 1fr); }   /* heading on top; spread uses full width */
.my-part .work-subhead { margin-top: 1.5rem; }
.my-part p { margin: 0.4rem 0 0; }
.spread { display: grid; gap: 2rem; }
@media (min-width: 75rem) {
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 2.5rem; }
}
.spread-text > * { max-width: var(--measure); }
.standfirst {
  margin: 0 0 1.25rem; font-family: var(--display-family); font-weight: var(--display-weight);
  font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15;
}
.dropcap::first-letter {
  float: left; margin: 0.08em 0.12em 0 0; font-family: var(--display-family); font-weight: var(--display-weight);
  font-size: 3.4em; line-height: 0.8; color: var(--accent);
}
.facts { width: 100%; margin: 1.75rem 0 1.25rem; border-collapse: collapse; border-top: var(--stroke) solid var(--text); }
.facts caption { caption-side: top; text-align: left; padding: 0 0 0.5rem; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts th, .facts td { padding: 0.65rem 0; border-bottom: var(--rule-width) solid var(--rule); vertical-align: top; text-align: left; font-size: var(--meta-size); }
.facts th { width: 7.5rem; padding-right: 1rem; font-weight: var(--text-strong); }
.facts.facts--wide { margin-top: 2.5rem; }
.facts--wide th { width: 10rem; }
/* At a glance: four tiles, each with an icon, a label, and the fact. */
.glance { margin-top: 2.5rem; }
.glance-title { margin: 0 0 0.75rem; font-family: var(--text-family); font-size: 0.875rem; font-weight: var(--text-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; margin: 0; }
.glance-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem 1.2rem; border: var(--rule-width) solid var(--rule); border-radius: 0.9rem; background: var(--wash, transparent); }
.glance-icon { width: 1.75rem; height: 1.75rem; color: var(--accent); margin-bottom: 0.35rem; }
.glance-item dt { font-size: 0.8125rem; font-weight: var(--text-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.glance-item dd { margin: 0; font-size: var(--meta-size); line-height: 1.45; }
@media (forced-colors: active) { .glance-item { border-color: CanvasText; } }
/* The credit: two waving hands, one in the text colour and one in the accent. */
.spread-credit:has(.credit-hands) { max-width: none; display: flex; align-items: center; gap: 1rem; margin-top: 2rem; font-size: var(--intro-size); line-height: 1.4; }
.credit-hands { padding-top: 0.4rem; }
.credit-hands .hand { width: clamp(2.8rem, 2.4rem + 1.2vw, 3.4rem); }
.credit-hands .hand--left { color: var(--text); }
.credit-hands .hand--right { color: var(--accent); margin-left: -0.35rem; top: -0.6rem; }
.spread-credit { color: var(--muted); font-style: italic; margin: 0; }
.spread-figure { margin: 0; }
.work-figure.spread-figure img { width: 100%; max-width: none; }
/* Problem / goal framing (A11ykit overview). Badges carry an icon + words, not colour alone. */
.frame-block { margin-top: 1.5rem; }
.frame-block p:not(.frame-badge) { margin: 0.5rem 0 0; }
.frame-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0;
  padding: 0.3rem 0.8rem 0.3rem 0.55rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: var(--text-strong); letter-spacing: 0.06em; text-transform: uppercase;
}
.frame-badge svg { width: 1.1rem; height: 1.1rem; flex: none; }
.frame-badge--problem { border: var(--stroke) solid var(--text); color: var(--text); }
.frame-badge--goal { background: var(--accent); color: var(--bg); border: var(--stroke) solid var(--accent); }
.spread-side { display: grid; gap: 1.25rem; align-content: start; }
.since { padding: 1.1rem 1.25rem; border-radius: 1rem; border: var(--rule-width) solid var(--rule); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.since-title { margin: 0 0 0.6rem; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: var(--text-strong); }
.since-stats { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.since-stats li { font-size: var(--meta-size); line-height: 1.3; color: var(--muted); }
.since-num { display: block; font-family: var(--display-family); font-weight: var(--display-weight); font-size: 2.2rem; line-height: 1; color: var(--text); }
.since p { margin: 0; font-size: var(--meta-size); }
@media (forced-colors: active) { .frame-badge--goal { forced-color-adjust: none; background: CanvasText; color: Canvas; } }
/* Two-step story beside the overview text: the idea (puzzle) → in practice (screenshot). */
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.story-step { position: relative; }
.story-step p { margin: 0.6rem 0 0; color: var(--muted); font-size: var(--meta-size); max-width: var(--measure); }
.story-num {
  display: block; margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: var(--text-strong);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.story-step--idea { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); align-items: center; gap: 0.5rem 1.25rem; }
.story-step--idea p { margin: 0; }
.story-puzzle {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0 0.75px var(--text)) drop-shadow(0 0 0.75px var(--text)) drop-shadow(0 0.5rem 1rem rgb(0 0 0 / 0.15));
}
.story-step--practice { margin-top: 3.25rem; }
.story-step--practice::before {               /* dotted connector from the idea to the practice */
  content: ""; position: absolute; left: clamp(4rem, 3rem + 3vw, 6.5rem); top: -2.9rem; height: 2.4rem;
  border-left: 3px dotted var(--accent);
}
.story-step--practice img {
  display: block; width: 100%; height: auto;
  border: var(--rule-width) solid var(--rule); border-radius: 0.75rem;
}
@media (max-width: 30rem) { .story-step--idea { grid-template-columns: minmax(0, 1fr); } .story-puzzle { max-width: 14rem; } }
@media (forced-colors: active) { .story-puzzle { filter: none; } .story-step--practice::before { border-color: CanvasText; } }
@media (max-width: 24rem) { .facts th { width: 5.5rem; } }

.more-work .list .item { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); }

/* Draft-only: copy that still needs Dott's input. Delete before publishing. */
.todo { background: #fff2a8; color: #1d1a17; padding-inline: 0.2em; }
@media (forced-colors: active) { .todo { forced-color-adjust: none; } }

@media (prefers-reduced-motion: no-preference) {
  a { transition: text-decoration-thickness 120ms ease; }
}

/* ---------- Temporary type explorer ---------- */
.explorer {
  background: #1d1a17; color: #faf7f2;
  font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.4;
  font-stretch: 100%;
}
.explorer summary { cursor: pointer; padding: 0.75rem var(--space); font-weight: 600; }
.explorer summary .tag { font-weight: 400; opacity: 0.8; margin-left: 0.5rem; }
.explorer .controls {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1.25rem;
  padding: 0 var(--space) 1rem;
}
.explorer label { display: grid; gap: 0.25rem; font-size: 0.875rem; }
.explorer select, .explorer button {
  font: inherit; font-size: 1rem;
  padding: 0.35rem 0.5rem; border-radius: 0.25rem;
  border: 1px solid #faf7f2; background: #faf7f2; color: #1d1a17;
  max-width: 100%;
}
.explorer output { flex-basis: 100%; font-size: 0.875rem; opacity: 0.9; }
.explorer :focus-visible { outline: 3px solid #ffd60a; outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Longer headlines (e.g. the Docusign page) need a smaller ceiling and floor
   so a single long word never overflows at 400% zoom. */
.hero h1.long { font-size: clamp(2.25rem, 1.25rem + 5.5vw, 7rem); hyphens: auto; }
/* Titles that sit beside a side panel: smaller, and never split words with hyphens. */
.hero--stats h1.long { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 5rem); hyphens: manual; overflow-wrap: normal; text-wrap: balance; }
.explorer label.primary { font-weight: 600; }
.explorer label.primary select { border: 2px solid #ffd60a; }
.explorer label { min-width: 0; max-width: 100%; }
.explorer select { width: 100%; }
.statement ul { margin: 0 0 1em; padding-left: 1.25em; max-width: var(--measure); }
.statement li + li { margin-top: 0.6em; }
.statement li::marker { color: var(--accent); }
.statement-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 1rem; }
.statement-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.statement-actions .btn svg { width: 1.2em; height: 1.2em; flex: none; }
.statement-note { color: var(--muted); font-size: var(--meta-size); }
@media (max-width: 30rem) { .statement-actions .btn { width: 100%; justify-content: center; } }
.site-footer .credits { margin-top: 0.5rem; font-size: 0.9375rem; }

/* Partner logos in a stat tile, in the theme color (decorative; the label names them). */
.stat-logos { display: flex; align-items: center; gap: 0.6rem; height: 1.9rem; margin-bottom: 0.6rem; color: var(--accent); }
.stat-logo { display: block; height: 1.7rem; width: auto; }
.stat-logo--samsung { height: 0.95rem; }
@media (forced-colors: active) { .stat-logos { color: CanvasText; } }
.stat-plus { font-size: 1.5rem; line-height: 1; font-weight: var(--text-strong); }

/* "My part" card: sits under a spread's side figure, with its own badge. */
.part-card { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-radius: 1rem; border: var(--rule-width) solid var(--rule); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.frame-badge--part { border: var(--stroke) solid var(--accent); color: var(--accent); }
.part-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.part-list li { position: relative; padding-left: 1.1rem; }
.part-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); }
@media (forced-colors: active) { .part-list li::before { background: CanvasText; } }

/* Two lists side by side on large screens (Android: larger screens + accessibility). */
.duo { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 60rem) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-card { padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); border: var(--stroke) solid var(--rule); border-radius: 1rem; }
.duo-card .frame-badge { font-family: var(--text-family); }
.duo-card .bullets { margin-top: 1rem; }

/* Section heading with a theme-colored icon in front. */
h2.has-icon { display: flex; align-items: flex-start; gap: 0.6rem; align-self: start; }
.h2-icon { flex: none; width: 0.85em; height: 0.85em; color: var(--accent); margin-top: 0.12em; margin-top: calc((1lh - 0.85em) / 2); }   /* centred on the first line */
@media (forced-colors: active) { .h2-icon { color: CanvasText; } }

/* Standfirst as a pull quote: text face, accent bar, so it doesn't read as a second heading. */
.standfirst.standfirst--quote {
  margin: 0.5rem 0 1.5rem; padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 0.3rem solid var(--accent);
  font-family: var(--text-family); font-weight: var(--text-strong); font-stretch: normal; letter-spacing: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.4;
}
@media (forced-colors: active) { .standfirst.standfirst--quote { border-left-color: CanvasText; } }
.duo-card .bullets { margin-bottom: 0; }
.duo-card .bullets li:last-child { margin-bottom: 0; }

/* ---------- Enlarge an image: a button on the figure opens a full-size dialog ---------- */
.zoom-wrap { position: relative; display: block; }
.zoomable img { cursor: zoom-in; }
.zoom-btn {
  position: absolute; right: 0.6rem; top: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border: var(--stroke) solid var(--accent); border-radius: 999px;
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--meta-size); font-weight: var(--text-strong);
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.25); cursor: pointer;
}
.zoom-btn svg { width: 1.2rem; height: 1.2rem; color: var(--accent); flex: none; }
.zoom-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
@media (max-width: 30rem) { .zoom-btn { position: static; margin-top: 0.75rem; } }   /* below the image on small screens */

.zoom-dialog {
  width: calc(100vw - 2rem); max-width: 112rem; max-height: calc(100dvh - 2rem);
  padding: 0; overflow: auto; border: var(--stroke) solid var(--accent); border-radius: 1rem;
  color: var(--text); background: var(--bg); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.35);
}
.zoom-dialog::backdrop { background: rgb(10 10 20 / 0.7); }
.zoom-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; background: var(--bg); border-bottom: var(--rule-width) solid var(--rule); }
.zoom-bar h2 { margin: 0; font-family: var(--text-family); font-size: var(--meta-size); font-weight: var(--text-strong); letter-spacing: 0; }
.zoom-close {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.4rem 0.9rem;
  border: var(--stroke) solid var(--muted); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: var(--text-strong); cursor: pointer;
}
.zoom-close svg { width: 1rem; height: 1rem; }
.zoom-dialog img { display: block; width: 100%; min-width: 50rem; height: auto; }   /* scrolls sideways rather than shrinking past readable */
@media (forced-colors: active) { .zoom-btn, .zoom-close { border-color: ButtonText; } }
.stat-wordmark { font-family: var(--text-family); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: -0.01em; margin-left: -0.25rem; }
.stat-logo--fable { height: 2rem; }

/* ---------- Impact: magazine call-outs and a chart card ---------- */
.callouts { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.25rem; }
.callouts li { padding-top: 0.9rem; border-top: 0.3rem solid var(--accent); font-size: var(--meta-size); line-height: 1.4; color: var(--muted); }
.callout-num { display: block; margin-bottom: 0.3rem; font-family: var(--display-family); font-weight: var(--display-weight); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; color: var(--text); font-variant-numeric: lining-nums; }
@media (forced-colors: active) { .callouts li { border-top-color: CanvasText; } }

.chart-card { margin: 0; max-width: none; padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); border: var(--stroke) solid var(--rule); border-radius: 1rem; }
.chart-title { margin: 0 0 1rem; font-weight: var(--text-strong); font-size: 1.15rem; }
.chart-card table { margin: 0; }
.chart-card th { padding: 0.45rem 1rem 0.45rem 0; }
.chart-card td { padding: 0.45rem 0; display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem; align-items: center; gap: 0.6rem; }
.bar-track { display: block; height: 0.8rem; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--text) 7%, transparent); }
.chart-card .bar { width: var(--v); height: 100%; }
.chart-card .bar-value { text-align: right; }
.chart-card tbody tr + tr { border-top: var(--rule-width) solid color-mix(in srgb, var(--rule) 60%, transparent); }
.chart-card figcaption { margin: 1rem 0 0; padding-top: 0.75rem; border-top: var(--rule-width) solid var(--rule); color: var(--muted); font-size: 0.875rem; }

/* ---------- What's inside: icon card + image carousel ---------- */
.inside-grid { list-style: none; margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); max-width: none; }
@media (min-width: 40rem) { .inside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inside-grid li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); border: var(--stroke) solid var(--rule); border-radius: 1rem; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.inside-icon { width: 2.1rem; height: 2.1rem; color: var(--accent); margin-top: 0.2rem; }
.inside-title { margin: 0; font-family: var(--text-family); font-size: 1.15rem; font-weight: var(--text-strong); letter-spacing: 0; line-height: 1.3; }
.inside-num { font-family: var(--display-family); font-weight: var(--display-weight); font-size: 1.6em; line-height: 1; color: var(--accent); margin-right: 0.15rem; }
.inside-grid p { margin: 0.35rem 0 0; font-size: var(--meta-size); color: var(--muted); }
@media (forced-colors: active) { .inside-icon, .inside-num { color: CanvasText; } }



/* Long video description, tucked under a disclosure so the caption can stay short. */
.video-desc { margin-top: 0.75rem; max-width: var(--measure); font-size: var(--meta-size); }
.video-desc summary { cursor: pointer; font-weight: var(--text-strong); color: var(--accent); width: fit-content; min-height: 1.5rem; }
.video-desc p { margin: 0.5rem 0 0; color: var(--muted); }
.work-video figcaption { color: var(--muted); font-size: var(--meta-size); }

/* Heading-to-content space for every full-width section: headings never touch the card below. */
.section.section--spread { row-gap: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); }

/* ---------- Carousel: a sliding track with peeking neighbours ---------- */
.carousel { --peek: 6%; --gap: 1rem; margin: 0; }
.carousel-viewport { position: relative; overflow: hidden; border-radius: 0.9rem; }
.carousel-track { display: flex; gap: var(--gap); }
.carousel.is-ready .carousel-track { transition: transform 0.45s cubic-bezier(.25,.8,.25,1); will-change: transform; touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }
.carousel-slide { flex: 0 0 calc(100% - 2 * var(--peek)); margin: 0; transition: opacity 0.3s; }
.carousel-slide[aria-hidden="true"] { opacity: 0.45; }
.carousel-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border: var(--rule-width) solid var(--rule); border-radius: 0.75rem; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.carousel-slide figcaption { margin-top: 0.6rem; color: var(--muted); font-size: var(--meta-size); }
.carousel-btn {
  position: absolute; top: calc((100% - 2.5rem) / 2); translate: 0 -50%;
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border: var(--stroke) solid var(--accent); border-radius: 50%; background: var(--bg); color: var(--text);
  box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 0.3); cursor: pointer;
}
.carousel-btn--prev { left: 0.5rem; }
.carousel-btn--next { right: 0.5rem; }
.carousel-btn svg { width: 1.3rem; height: 1.3rem; }
.carousel-btn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.carousel-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.carousel-dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.5rem; }
.carousel-dot { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }   /* 44px target, small dot */
.carousel-dot::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 999px; border: var(--stroke) solid var(--accent); transition: width 0.25s; }
.carousel-dot[aria-current="true"]::before { width: 1.6rem; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .carousel-dot::before, .carousel-slide { transition: none; } }
@media (max-width: 30rem) { .carousel { --peek: 0%; } .carousel-btn { width: 2.75rem; height: 2.75rem; } }
@media (forced-colors: active) { .carousel-btn, .carousel-dot::before { border-color: ButtonText; } .carousel-dot[aria-current="true"]::before { background: ButtonText; } }
.work-body > ul.inside-grid { max-width: none; }
.work-video figcaption, .carousel-slide figcaption { max-width: none; }

/* ---------- Accessibility across XD: screenshot cards, feature cards, study list ---------- */
.work-body > ul.xd-grid { max-width: none; }
.xd-grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44rem) { .xd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .xd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-body > :is(.xd-grid, .xd-feature):first-child { margin-top: 0; }   /* the section's row-gap already spaces the heading */
.xd-card { display: flex; flex-direction: column; min-width: 0; border: var(--stroke) solid var(--rule); border-radius: 1rem; overflow: hidden; }
.xd-card > img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: var(--ratio, 16 / 10); object-fit: cover; object-position: var(--pos, center); border-bottom: var(--rule-width) solid var(--rule); background: #fff; }
.xd-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); }
.xd-card h3 { margin: 0; font-family: var(--text-family); font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem); font-weight: var(--text-strong); font-stretch: normal; letter-spacing: 0; line-height: 1.3; }
.xd-card p { margin: 0; }
.xd-card-body > p:not(.xd-tag) { margin-bottom: 0.5rem; }
.xd-tag { font-size: 0.8125rem; font-weight: var(--text-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.xd-card .zoom-btn, .xd-feature .zoom-btn { position: static; margin-top: auto; box-shadow: none; }
.xd-feature .zoom-btn { margin-top: 0.6rem; }
.part-card.xd-also { margin-top: 1.25rem; }
.part-card h3.frame-badge { font-family: var(--text-family); }
.xd-feature { margin-top: 1.25rem; }
.xd-feature .xd-lead { margin: 1.4rem 0 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: var(--text-strong); line-height: 1.45; }
.xd-feature .spread-text p:not(.xd-lead) { margin: 0.75rem 0 0; }
.xd-pair { display: grid; gap: 1.25rem; margin-top: 1.75rem; align-items: start; }
@media (min-width: 44rem) { .xd-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xd-pair figcaption { max-width: none; }
.xd-studies { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; counter-reset: study; }
@media (max-width: 26rem) { .xd-studies { grid-template-columns: minmax(0, 1fr); } }
.xd-studies li { counter-increment: study; display: grid; gap: 0.3rem; align-content: start; min-width: 0; padding: 1rem 1.1rem; border-radius: 0.9rem; border: var(--rule-width) solid var(--rule); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.xd-studies li::before { content: counter(study, decimal-leading-zero); content: counter(study, decimal-leading-zero) / ""; font-family: var(--display-family); font-weight: var(--display-weight); font-size: 1.6rem; line-height: 1; color: var(--accent); }
.xd-study-name { font-weight: var(--text-strong); }
.xd-study-meta { font-size: var(--meta-size); color: var(--muted); }

/* ---------- Contact dialog: compact layout ---------- */
.contact h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: 0; text-wrap: balance; }
.contact-head { margin-bottom: 1rem; }
.reasons { margin-bottom: 0.9rem; }
.field { margin-bottom: 0.9rem; }
.field-row { display: grid; gap: 0 1rem; }
@container (min-width: 32rem) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.field-head label { margin-bottom: 0; }
.field-head .start-over { margin: 0; text-align: right; }
.field textarea { min-height: 5.5rem; }

.contact-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1rem; border-top: var(--rule-width) solid var(--rule); }
.contact-footer .signoff { margin: 0; }
.contact-footer .contact-actions { padding-top: 0; border-top: 0; margin-left: auto; }
@container (max-width: 30rem) { .contact-footer .contact-actions { margin-left: 0; width: 100%; } }
/* On larger, shorter screens the actions stay in reach while the form scrolls. */
@media (min-width: 40rem) and (min-height: 26rem) {
  .contact-footer { position: sticky; bottom: 0; z-index: 1; margin: 0 calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) calc(-1 * clamp(1.5rem, 4vw, 2.25rem)); padding: 1rem clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem); background: var(--bg); }
}
.contact { width: min(48rem, calc(100vw - 2rem)); }
.field-head .label-hint { display: inline; margin-left: 0.4rem; }
.contact-footer .signature-mark { height: 2.4rem; width: auto; }
.hand--right { margin-left: -1.15rem; top: -0.55rem; }

/* Topic notes: all four share one grid cell, so the box is always as tall as the longest.
   The chosen one fades and drifts in; the others fade out. */
.topic-notes { display: grid; margin: -0.1rem 0 1.25rem; }
.topic-notes .topic-note { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.topic-notes .topic-note[data-on] { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .topic-notes .topic-note { transition: opacity 0.22s ease, transform 0.32s cubic-bezier(.2,.8,.2,1), visibility 0s 0.22s; transform: translateY(0.35rem); }
  .topic-notes .topic-note[data-on] { transform: none; transition: opacity 0.32s ease 0.06s, transform 0.4s cubic-bezier(.2,.8,.2,1) 0.06s, visibility 0s; }
  .chip { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
  .chips label:active .chip { transform: scale(0.97); }
  .chips input:checked + .chip strong::before { animation: check-pop 0.32s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes check-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .label-hint.is-new { animation: hint-in 0.35s ease both; }
  @keyframes hint-in { from { opacity: 0; transform: translateY(0.2rem); } to { opacity: 1; transform: none; } }
}
/* "Start over" never changes the layout: it shares the label row and that row's height is reserved. */
.field-head { flex-wrap: nowrap; align-items: flex-end; min-height: 2.75rem; }
.field-head label { flex: 1 1 auto; min-width: 0; }
.field-head .start-over { flex: none; }
.field-head .start-over[hidden] { display: block; visibility: hidden; }
/* The checkmark lives in a fixed slot at the chip's left, so selecting never re-wraps a title. */
.chips .chip { position: relative; padding-left: 2.1rem; }
.chips input:checked + .chip strong::before { position: absolute; left: 0.8rem; top: 1.05rem; margin: 0; }
/* "Start over" floats at the right of the label row; the label and hint keep the full width. */
.field-head { position: relative; display: block; min-height: 0; padding-right: 6.5rem; }
.field-head .start-over { position: absolute; right: 0; bottom: 0; }
@container (max-width: 30rem) {
  .field-head { padding-right: 0; }
  .field-head label { padding-right: 6.5rem; }   /* only "Message" shares the row with Start over */
  .field-head .label-hint { display: block; margin: 0.15rem 0 0; min-height: 3em; }   /* room for a 2-line hint, always */
  .field-head .start-over { top: 0; bottom: auto; }
}
@container (max-width: 21rem) { .chips { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 30rem) { .field-head .label-hint { margin-right: -6.5rem; } }
/* Bigger, warmer heading; the topic legend is now visible. */
.contact h2#contact-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.02; }
.reasons-legend { display: block; margin: 0 0 0.5rem; padding: 0; font-weight: var(--text-strong); font-size: var(--meta-size); color: var(--muted); }
/* Quote flourishes: real characters, decorative (hidden from screen readers), in the text colour. */
.flourish { display: inline-block; width: 0; vertical-align: top; overflow: hidden; white-space: nowrap; letter-spacing: 0.04em; font-weight: var(--text-strong); }
.flourish .alt { color: var(--accent); }   /* accent meets 4.5:1+ on the note background in every vibe */
@media (forced-colors: active) { .flourish .alt { color: CanvasText; } }
/* Keep the dialog's inner width fixed whether or not it scrolls, so nothing reflows in a loop. */
.contact { scrollbar-gutter: stable; overscroll-behavior: contain; }
/* The quotes never size themselves from their pattern: the column is fixed to the form's width. */
.topic-notes { grid-template-columns: minmax(0, 1fr); }
.topic-notes .topic-note { min-width: 0; }
.flourish { max-width: 100%; }

/* ---------- "Who am I?": the asterisk in the headline opens a personal bio ---------- */
.asterisk {
  display: inline-block; position: relative; padding: 0; margin: 0 0.02em 0 0.04em; border: 0; background: none;
  font: inherit; line-height: 1; color: var(--accent); cursor: pointer; vertical-align: 0.1em;
  font-size: 0.8em; border-radius: 0.2em;
}
.asterisk::after { content: ""; position: absolute; inset: -0.2em -0.15em; }   /* comfortable tap target */
.asterisk span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .asterisk span { transition: transform 0.4s cubic-bezier(.3,1.5,.5,1); }
  .asterisk:hover span, .asterisk:focus-visible span { transform: rotate(72deg) scale(1.15); }
}
.asterisk:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (forced-colors: active) { .asterisk { color: LinkText; } }

.about-body { position: relative; padding: clamp(1.25rem, 4vw, 2.25rem); container-type: inline-size; }
.about h2#about-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.02; margin: 0 3.5rem 1.25rem 0; }
.doodle-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1.1rem; }
.doodle-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.doodle { width: 2.2rem; height: 2.2rem; color: var(--accent); }
.doodle-list li:nth-child(even) .doodle { transform: rotate(-6deg); }
.doodle-list li:nth-child(odd) .doodle { transform: rotate(4deg); }
.doodle-list p { margin: 0.25rem 0 0; }
.doodle-list strong { display: block; }
.about-sign { margin: 0; color: var(--muted); font-style: italic; }
@media (forced-colors: active) { .doodle { color: CanvasText; } }
/* Breton: Instrument Serif's asterisk sits high and off-centre, so spinning swung it into "in" and the
   focus ring missed it. There, the button is a small square with a drawn asterisk centred inside. */
.ast-svg { display: none; }
:is(html:not([data-vibe]), [data-vibe="breton"]) .asterisk {
  width: 0.5em; height: 0.5em; margin: 0 0.1em 0 0.05em; vertical-align: 0.28em; font-size: 1em; border-radius: 0.12em;
}
:is(html:not([data-vibe]), [data-vibe="breton"]) .asterisk .ast-glyph { display: none; }
:is(html:not([data-vibe]), [data-vibe="breton"]) .asterisk .ast-svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .asterisk .ast-svg { transition: transform 0.4s cubic-bezier(.3,1.5,.5,1); }
  .asterisk:hover .ast-svg, .asterisk:focus-visible .ast-svg { transform: rotate(60deg) scale(1.15); }
}
:is(html:not([data-vibe]), [data-vibe="breton"]) .asterisk:focus-visible { outline-offset: 0.12em; }
/* Tighter box around the glyph asterisk too, so its focus ring hugs the star rather than the whole line. */
.asterisk { line-height: 0.72; padding: 0.04em 0.04em 0; }
/* Who am I: abstract two-colour marks (theme colour + text colour), not literal pictures. */
.about-lead { margin: 0 0 1.5rem; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.45; max-width: 40rem; }
.glyph { width: 2.6rem; height: 2.6rem; margin-top: 0.05rem; }
.glyph .a { fill: var(--accent); }
.glyph .b { fill: var(--text); }
.glyph .b-line { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }
.doodle-list p { max-width: 40rem; }
@media (forced-colors: active) { .glyph .a, .glyph .b { fill: CanvasText; } .glyph .b-line { stroke: CanvasText; } }
.about .doodle-list li { grid-template-columns: 2.8rem minmax(0, 1fr); gap: 1rem; }
/* Who am I: three characters at the points of a triangle, in the text and theme colours.
   Each sits centred in its own cell, so any mix of characters makes an even triangle. */
.glyph-chars { position: relative; display: block; width: 2.6rem; height: 2.5rem; font-family: var(--text-family); font-weight: 700; line-height: 1; }
.glyph-chars .gc { position: absolute; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; font-size: 1.3rem; color: var(--text); }
.glyph-chars .gc1 { top: 0; left: calc(50% - 0.625rem); color: var(--accent); }
.glyph-chars .gc2 { bottom: 0; left: 0; }
.glyph-chars .gc3 { bottom: 0; right: 0; color: var(--accent); }
@media (forced-colors: active) { .glyph-chars .gc { color: CanvasText; } }

/* Who am I: a display-font lead, then five accordions (closed at first) that ease open. */
.about .about-lead {
  margin: 0 0 1.5rem; max-width: 34rem;
  font-family: var(--display-family); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-variation-settings: var(--display-fvs); letter-spacing: var(--display-tracking);
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem); line-height: 1.2;
}
.acc-list { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: var(--rule-width) solid var(--rule); }
.acc-list > li { border-bottom: var(--rule-width) solid var(--rule); }
.acc summary {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem;
  min-height: 3.5rem; padding: 0.6rem 0.25rem; cursor: pointer; list-style: none; border-radius: 0.5rem;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acc summary:hover .acc-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.acc-title { font-weight: var(--text-strong); font-size: 1.1rem; }
.acc-chev { width: 1.3rem; height: 1.3rem; color: var(--accent); justify-self: end; }
.acc[open] .acc-chev { rotate: 180deg; }
.acc-body p { margin: 0 0 1.1rem; padding-left: 3.6rem; max-width: 40rem; }
@media (max-width: 30rem) { .acc-body p { padding-left: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .acc-chev { transition: rotate 0.3s ease; }
  .acc[open] .acc-body p { animation: acc-in 0.4s ease both; }
  @keyframes acc-in { from { opacity: 0; transform: translateY(-0.35rem); } to { opacity: 1; transform: none; } }
  .acc .glyph-chars .gc { transition: translate 0.35s cubic-bezier(.3,1.4,.5,1); }
  .acc[open] .glyph-chars .gc1 { translate: 0 -0.12rem; }
  .acc[open] .glyph-chars .gc2 { translate: -0.12rem 0.05rem; }
  .acc[open] .glyph-chars .gc3 { translate: 0.12rem 0.05rem; }
}
@media (forced-colors: active) { .acc-chev { color: CanvasText; } }
/* The lead reads as a personal statement: an italic serif voice (never the vibe's heading or body face),
   with the roles set in the body face, bold, so two voices mix in one sentence. */
.about .about-lead {
  max-width: none; font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400;
  font-stretch: normal; font-variation-settings: normal; letter-spacing: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); line-height: 1.4; text-wrap: pretty;
}
[data-vibe="asawa"] .about .about-lead { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem); line-height: 1.3; }
.about-lead .roles { font-family: var(--text-family); font-style: normal; font-weight: var(--text-strong); font-size: 0.86em; color: var(--accent); }
@media (forced-colors: active) { .about-lead .roles { color: CanvasText; } }

/* Identity easter egg: "disabled" cycles to "queer" and "non-binary". Findable, not hidden:
   a dotted underline and a pointer say "you can press this", like a quiet invitation. */
.identity {
  display: inline; padding: 0 0.05em; margin: 0; border: 0; background: none; border-radius: 0.2em;
  font: inherit; color: inherit; cursor: pointer;
}
.identity-word {
  display: inline-block; white-space: nowrap;
  text-decoration: underline dotted; text-decoration-thickness: 0.1em; text-underline-offset: 0.24em;
}
.identity:hover .identity-word { text-decoration-style: solid; }
.identity:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .identity-word.is-out { animation: id-out 0.16s ease-in forwards; }
  .identity-word.is-in { animation: id-in 0.34s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes id-out { to { transform: translateY(-0.35em) rotateX(80deg); opacity: 0; } }
  @keyframes id-in { from { transform: translateY(0.35em) rotateX(-80deg); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (forced-colors: active) { .identity { color: LinkText; } }


/* Company logo above the page status (Docusign page). Decorative; the h1 names the company. */
.company-logo { display: block; height: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); width: auto; max-width: 100%; margin: 0 0 1.25rem; color: var(--text); }
@media (forced-colors: active) { .company-logo { color: CanvasText; } }

/* "Who am I?" sub-views: an inline button that reads as a link, a back button, and a 16:9 video. */
.link-btn {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration-line: underline; text-decoration-thickness: var(--underline); text-underline-offset: 0.18em;
}
.link-btn:hover { text-decoration-thickness: 0.18em; }
.about-back {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin: 0 3.5rem 1.25rem 0; padding: 0.45rem 1.1rem 0.45rem 0.8rem;
  font: inherit; font-weight: var(--text-strong); color: var(--text); background: transparent;
  border: var(--stroke) solid var(--muted); border-radius: 999px; cursor: pointer;
}
.about-back:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.about-back svg { width: 1.25rem; height: 1.25rem; flex: none; }
.about #turtle-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.02; margin: 0 0 1.25rem; }
.about #turtle-title:focus { outline: none; }
.about-video { aspect-ratio: 16 / 9; border-radius: 0.75rem; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, var(--bg)); }
.about-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.about-video-link { margin: 1rem 0 0; }
@media (forced-colors: active) { .link-btn { color: LinkText; } .about-back { border-color: ButtonText; } }

/* Docusign overview: a vertical timeline with an accent icon per moment. */
.ds-tl-lead { margin: 0 0 1.5rem; }
.ds-timeline { list-style: none; margin: 0; padding: 0; }
.ds-timeline li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.75rem; }
.ds-timeline li:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.25rem; bottom: 0.25rem; width: 2px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.ds-tl-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: var(--stroke) solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
}
.ds-tl-icon svg { width: 1.45rem; height: 1.45rem; }
.ds-tl-body { padding-top: 0.2rem; }
.ds-tl-body h3 { margin: 0 0 0.35rem; font-family: var(--text-family); font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.25rem); font-weight: var(--text-strong); font-stretch: normal; letter-spacing: 0; line-height: 1.3; }
.ds-tl-year { display: block; margin-bottom: 0.15rem; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--accent); }
.ds-tl-body p { margin: 0; }
.ds-proud {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 0.5rem;
  padding: 1.1rem 1.25rem; border-radius: 1rem; border: var(--stroke) solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.ds-proud p { margin: 0.2rem 0 0; }
@media (forced-colors: active) {
  .ds-tl-icon, .ds-proud { border-color: CanvasText; color: CanvasText; }
  .ds-timeline li:not(:last-child)::before { background: CanvasText; }
  .ds-tl-year { color: CanvasText; }
}
.ds-tl-icon { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--accent) 18%, var(--bg)); }
.ds-timeline li:not(:last-child)::before { width: 3px; left: calc(1.5rem - 1.5px); top: 3.6rem; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.ds-tl-year { font-weight: var(--text-strong); font-size: 0.875rem; }
@media (max-width: 30rem) {
  .ds-proud { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}
@media (forced-colors: active) { .ds-tl-icon { background: Canvas; color: CanvasText; box-shadow: none; } }
.about-video:has(.about-video-note) { aspect-ratio: auto; display: grid; place-items: center; padding: 1.5rem; }
.about-video-note { margin: 0; color: var(--muted); text-align: center; }

/* Home: callout to the Docusign overview, after Selected work. The title link stretches over the card. */
.work-callout {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem 1.25rem; align-items: center;
  margin-top: 1.75rem; padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  border: var(--stroke) solid var(--accent); border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.work-callout-logo { grid-column: 1 / -1; display: block; height: 1.6rem; width: auto; max-width: 100%; color: var(--text); }
.work-callout-body p { margin: 0.35rem 0 0; color: var(--muted); }
.work-callout-title { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: var(--text-strong); color: var(--text); text-decoration: none; }
.work-callout-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.work-callout-title:focus-visible { outline: none; }
.work-callout:has(.work-callout-title:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.work-callout-arrow {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--accent); color: var(--bg); transition: transform 160ms ease;
}
.work-callout-arrow svg { width: 1.3rem; height: 1.3rem; }
.work-callout:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.work-callout:hover .work-callout-title { text-decoration: underline; text-decoration-thickness: var(--underline); text-underline-offset: 0.18em; }
.work-callout:hover .work-callout-arrow { transform: translateX(0.2rem); }
@media (prefers-reduced-motion: reduce) { .work-callout-arrow { transition: none; } .work-callout:hover .work-callout-arrow { transform: none; } }
@media (forced-colors: active) {
  .work-callout { border-color: LinkText; }
  .work-callout-title { color: LinkText; }
  .work-callout-arrow { background: Canvas; color: LinkText; border: 2px solid LinkText; }
  .work-callout:has(.work-callout-title:focus-visible) { outline-color: Highlight; }
}
.work-callout-body p { color: var(--text); }
@media (max-width: 30rem) { .work-callout { grid-template-columns: minmax(0, 1fr); } }

/* A11ykit releases: text-only panels and short release-note lists. */
.kt-panel-grid--text { grid-template-columns: minmax(0, 1fr); }
.kt-panel-text > p + p, .kt-panel-text > ul + p { margin-top: 0.75rem; }
.kt-points { margin: 0.75rem 0 0; padding-left: 1.2rem; color: #fff; max-width: var(--measure); }
.kt-points li + li { margin-top: 0.4rem; }
.kt-points li::marker { color: var(--kt-coral); }
.kt-panel .kt-headline { font-size: 1.08em; font-weight: var(--text-strong); line-height: 1.45; }
.about-lead .pronouns { white-space: nowrap; }

/* Hidden comic flip on the home portrait. The button fills the frame; the duotone still applies. */
.portrait-flip { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.portrait-flip:focus-visible { outline: none; }
.portrait:has(.portrait-flip:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.portrait.is-comic img { object-fit: contain; background: #fff; }
.portrait.is-comic { --photo-brightness: 1; --photo-contrast: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  .portrait { perspective: 1200px; }
  .portrait.is-flipping-out { animation: portrait-out 180ms ease-in forwards; }
  .portrait.is-flipping-in { animation: portrait-in 220ms ease-out; }
  @keyframes portrait-out { to { transform: rotateY(90deg); } }
  @keyframes portrait-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }
}
@media (forced-colors: active) { .portrait:has(.portrait-flip:focus-visible) { outline-color: Highlight; } }

/* ---------- FEEDBACK (temporary, for testers; delete with feedback.js before launch) ---------- */
.feedback-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 3rem; padding: 0 1.15rem 0 0.9rem;
  border: var(--stroke) solid currentColor; border-radius: 999px;
  background: none; color: var(--text); font: inherit; font-weight: var(--text-strong); cursor: pointer;
}
.feedback-toggle .fb-icon { width: 1.6rem; height: 1.6rem; flex: none; }
:root[data-frame="sketch"] .feedback-toggle { border-color: transparent; color: var(--accent); height: 3.5rem; padding: 0 1.6rem 0 1.25rem; }
:root[data-frame="sketch"] .feedback-toggle .frame-pill { display: block; }
.sitebar-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
/* Phones: Feedback is icon only (the word stays as its name) and the logo a bit smaller,
   so the logo, Feedback, and Display share one row. */
@media (max-width: 30rem) {
  .sitebar:has(.sitebar-actions) { column-gap: 0.75rem; }
  .sitebar:has(.sitebar-actions) .logo-sketch { height: 3.25rem; }
  .sitebar-actions { gap: 0.4rem; }
  .feedback-toggle { width: 3rem; padding: 0; }
  :root[data-frame="sketch"] .feedback-toggle { width: 3.5rem; padding: 0; }
  :root[data-frame="sketch"] .feedback-toggle .frame-pill { display: none; }
  :root[data-frame="sketch"] .feedback-toggle .frame-ring { display: block; }
  .feedback-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.fb-optional { font-weight: var(--text-weight); color: var(--muted); }
/* Compact, so the whole form fits a laptop screen without scrolling at the default large text size. */
.feedback .contact-intro { font-size: var(--body-size); }
.feedback .contact-head { margin-bottom: 0.5rem; }
.feedback .reasons { margin-bottom: 0.75rem; }
.feedback .chips { gap: 0.5rem; }
.feedback .chip { padding: 0.45rem 0.8rem 0.45rem 2.1rem; }   /* keeps the checkmark slot at the left */
.feedback .chips input:checked + .chip strong::before { top: 0.9rem; }
.feedback .chip-hint { font-size: 0.875rem; }
.feedback .field { margin-bottom: 0.6rem; }
.feedback .field > label .label-hint { display: inline; margin-left: 0.35rem; }
.feedback .fb-details { margin: 0.25rem 0 0.6rem; font-size: 0.9375rem; }
.feedback .fb-details span { min-width: 0; }
/* Bottom left of the button row: same size and weight as the buttons so the text lines up, with a keyboard icon. */
.feedback .contact-footer .fb-keys-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: inherit; font-weight: var(--text-strong); color: var(--accent); text-decoration: none;
}
.fb-keys-link svg { width: 1.35em; height: 1.35em; flex: none; }
.fb-keys-link span { text-decoration: underline; text-decoration-thickness: var(--underline); text-underline-offset: 0.18em; }
.fb-keys-link:hover span { text-decoration-thickness: 0.18em; }
.feedback textarea { min-height: 0; resize: none; overflow-y: auto; }
.feedback .contact-footer { transition: box-shadow 0.2s ease; }
.feedback .contact-footer.has-more { box-shadow: 0 -1rem 1.25rem -1rem rgb(0 0 0 / 0.35); }
/* The tip about highlighting looks highlighted itself: a 25% accent tint keeps text at 5.5:1 or more in every vibe. */
.feedback .contact-intro { margin-bottom: 0.25rem; }
.fb-tip { margin: 0 0 0.6rem; }
.fb-fake-select {
  padding: 0.05em 0.15em; margin: 0 -0.15em; border-radius: 0.2em;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* The tip is also a link to the keyboard shortcuts, styled like every other link (accent, same underline).
   With accent text, the highlight drops to 15% so contrast stays 5:1+ in every vibe. */
/* The button itself is plain; the highlight sits on the words so it hugs each line when they wrap. */
.fb-tip-link { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-size: var(--body-size); text-align: left; cursor: pointer; }
.fb-tip-link .fb-fake-select {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent);
  text-decoration-line: underline; text-decoration-thickness: var(--underline); text-underline-offset: 0.18em;
}
.fb-tip-link:hover .fb-fake-select { text-decoration-thickness: 0.18em; }
@media (forced-colors: active) { .fb-fake-select { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
.feedback .contact-next:not([hidden]) { display: flex; flex-direction: column; min-height: 100%; }
.feedback .contact-next > .contact-actions { margin-top: auto; justify-content: flex-end; }
.fbk-head { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; }
.fbk-head h2 { margin: 0; }
.fbk-back {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
  border: var(--stroke) solid var(--muted); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
}
.fbk-back svg { width: 1.2rem; height: 1.2rem; }
.fbk-note { margin: 0.5rem 0 0; color: var(--muted); font-size: var(--meta-size); line-height: 1.6; }
/* Keys: big, roomy keycaps with a spaced plus between them. */
.fb-keys .keys { display: inline-flex; align-items: center; gap: 0.4rem; vertical-align: middle; }
.fb-keys .keys-plus { color: var(--muted); font-weight: var(--text-strong); }
.fb-keys kbd {
  display: inline-grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; padding: 0 0.7rem;
  font: inherit; font-size: 1rem; font-weight: var(--text-strong); line-height: 1; white-space: nowrap;
  border: var(--rule-width) solid var(--muted); border-bottom-width: 3px; border-radius: 0.5rem;
  background: color-mix(in srgb, var(--bg) 85%, var(--text) 6%);
}
.fbk-note .keys { gap: 0.25rem; }
.fbk-note kbd { min-width: 1.9rem; min-height: 1.9rem; padding: 0 0.45rem; font-size: 0.875rem; border-bottom-width: 2px; }
.fbk-keys { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.os-keys { display: inline-flex; flex-direction: column; gap: 0.35rem; }
.os { font-size: 0.8125rem; font-weight: var(--text-strong); color: var(--muted); }
.fbk-steps { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.5rem; }
.fbk-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0 0.9rem; align-items: start; }
.fbk-steps h3 { margin: 0.1rem 0 0; font-family: var(--text-family); font-size: 1.0625rem; font-weight: var(--text-strong); }

/* The annotated example: an artboard in A11ykit's annotation colors, the same in every vibe. */
.fbk-mark {
  display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: #2b50d2; color: #fff; font: 700 0.875rem/1 system-ui, sans-serif;
}
.fbk-mark--plain { background: transparent; color: var(--muted); border: 2px solid var(--muted); font-size: 0.75rem; }
.fbk-art { margin: 0 0 1.75rem; }
.fbk-art-frame {
  position: relative; padding: 4.75rem 1.5rem 2.75rem; border-radius: 0.75rem;
  background: #fff; color: #1b1f2a; box-shadow: inset 0 0 0 1px #d5d9e2;
  font-family: system-ui, sans-serif;
}
.fbk-art-label { position: absolute; top: 0.75rem; left: 1rem; font-size: 0.75rem; font-weight: 600; color: #5b6170; letter-spacing: 0.02em; }
.fbk-art-text { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.fbk-art { container-type: inline-size; }
@container (max-width: 22rem) { .fbk-art-frame { padding-inline: 1rem; } .fbk-art-text { font-size: 1rem; } }
.fbk-art-text .num { color: inherit; }
.fbk-art-sel {
  position: relative; display: inline-block; margin: 0 0.3em; padding: 0 0.15em; white-space: nowrap;
  border-radius: 3px; outline: 2px solid #2b50d2; outline-offset: 3px;
  background: linear-gradient(#b9cdff, #b9cdff) no-repeat 0 0 / 100% 100%;
}
.fbk-art-caret { position: absolute; left: 0; top: 0.1em; bottom: 0.1em; width: 2px; background: #1b1f2a; }
.fbk-art-caret .fbk-mark { position: absolute; top: calc(100% + 0.65rem); left: 50%; translate: -50% 0; }
.fbk-mark--sel { position: absolute; right: -1.1rem; top: calc(100% - 0.3rem); }
.fbk-art-menu {
  position: absolute; bottom: calc(100% + 0.8rem); left: 50%; translate: -50% 0;
  display: flex; gap: 0.15rem; padding: 0.3rem; border-radius: 999px; white-space: nowrap;
  background: #1b1f2a; color: #fff; font-size: 0.8rem; font-weight: 600; line-height: 1;
}
.fbk-art-menu > span:not(.fbk-mark) { padding: 0.5rem 0.75rem; }
.fbk-art-menu::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 6px solid transparent; border-top-color: #1b1f2a; }
.fbk-art-menu .fbk-mark { position: absolute; top: -0.85rem; right: -0.85rem; }
/* Played as a short loop: the caret blinks, the highlight grows like Shift + arrow keys, the menu appears. */
@media (prefers-reduced-motion: no-preference) {
  .fbk-art-sel { animation: art-select 4.5s ease-in-out infinite; }
  .fbk-art-caret { animation: art-blink 0.9s steps(1) infinite; }
  .fbk-art-menu { animation: art-menu 4.5s ease-out infinite; }
  @keyframes art-select { 0%, 18% { background-size: 0% 100%; outline-color: transparent; } 55%, 100% { background-size: 100% 100%; outline-color: #2b50d2; } }
  @keyframes art-blink { 50% { opacity: 0; } }
  @keyframes art-menu { 0%, 58% { opacity: 0; transform: translateY(4px); } 68%, 100% { opacity: 1; transform: none; } }
}
/* Spam trap: off screen and hidden from assistive tech; people never fill it in, bots do. */
.fb-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-result { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 0.5rem; }
.fb-result h2 { margin: 0; }
.fb-result-icon {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--accent); color: var(--bg);
}
.fb-result-icon svg { width: 1.5rem; height: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .fb-sent:not([hidden]) .fb-result-icon { animation: fb-pop 480ms cubic-bezier(.3,1.6,.5,1) both; }
}
.fb-hero { flex: none; color: var(--accent); }
.fb-hero .fb-icon { width: clamp(2.6rem, 2rem + 1.8vw, 3.2rem); height: auto; display: block; }
.feedback .fb-select { position: relative; display: block; }
.feedback .fb-select::after {     /* our own chevron, inset from the rounded corner and in the vibe's text color */
  content: ""; position: absolute; right: 1.2rem; top: 50%; width: 0.55rem; height: 0.55rem; pointer-events: none;
  border: solid var(--text); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg);
}
.feedback .field select {
  display: block; width: 100%; font: inherit; color: var(--text); min-height: 2.9rem;
  appearance: none; padding: 0.6rem 3rem 0.6rem 0.85rem; border-radius: 0.75rem;
  border: var(--stroke) solid var(--muted); background: color-mix(in srgb, var(--bg) 85%, var(--text) 4%);
}
.feedback .chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.fb-details { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1.5rem; color: var(--muted); font-size: var(--meta-size); cursor: pointer; }
.fb-details input { width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--accent); }
/* The speech bubble pops in when the dialog opens, then its three dots hop like someone typing.
   Hovering or focusing the Feedback button gives the dots one small hop. */
@media (prefers-reduced-motion: no-preference) {
  .fb-icon .fb-bubble, .fb-icon .fb-dot { transform-box: fill-box; }
  .fb-icon .fb-bubble { transform-origin: 20% 100%; }
  .fb-icon .fb-dot { transform-origin: center; }
  .feedback[open] .fb-hero .fb-icon { animation: fb-pop 520ms cubic-bezier(.3,1.6,.5,1) 120ms both; transform-origin: 15% 90%; }
  .feedback[open] .fb-hero .fb-dot { animation: fb-hop 520ms ease-in-out 620ms 2; }
  .feedback[open] .fb-hero .fb-dot:nth-of-type(2) { animation-delay: 740ms; }
  .feedback[open] .fb-hero .fb-dot:nth-of-type(3) { animation-delay: 860ms; }
  .feedback-toggle:is(:hover, :focus-visible) .fb-dot { animation: fb-hop 480ms ease-in-out 1; }
  .feedback-toggle:is(:hover, :focus-visible) .fb-dot:nth-of-type(2) { animation-delay: 90ms; }
  .feedback-toggle:is(:hover, :focus-visible) .fb-dot:nth-of-type(3) { animation-delay: 180ms; }
  @keyframes fb-pop { from { transform: scale(0.4) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes fb-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.5px); } }
}
/* Highlight menu: a small dark pill with an arrow pointing at the selected text. */
.select-tip {
  position: fixed; z-index: 50; display: flex; gap: 0.15rem; padding: 0.3rem;
  border-radius: 999px; background: var(--text); color: var(--bg);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
  font-family: var(--text-family); font-size: 0.9375rem; font-weight: var(--text-strong); line-height: 1;
}
.select-tip[hidden] { display: none; }
.select-tip button {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 0.95rem;
  border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer;
}
.select-tip button:hover { background: color-mix(in srgb, var(--bg) 20%, transparent); }
.select-tip button:focus-visible { outline: 2px solid var(--bg); outline-offset: -4px; }
.select-tip svg { width: 1.2rem; height: 1.2rem; flex: none; }
.select-tip::after {
  content: ""; position: absolute; top: 100%; left: clamp(1.25rem, var(--arrow-x), calc(100% - 1.25rem)); translate: -50% 0;
  border: 7px solid transparent; border-top-color: var(--text);
}
.select-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .select-tip { animation: tip-in 160ms ease-out; }
  @keyframes tip-in { from { opacity: 0; transform: translateY(4px) scale(0.96); } }
}
@media (forced-colors: active) {
  .select-tip { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .select-tip::after { display: none; }
  .feedback .fb-select::after { border-color: CanvasText; }
}

/* ---------- Dialogs: one spacing value for every edge ----------
   "I’d love to hear from you" and "What do you think?" share it: the space above the heading, at the sides,
   between the divider and the buttons, and below the buttons are all the same. Headings and icons match too. */
.contact { --dlg-pad: clamp(1.25rem, 3.5vw, 2rem); }
@media (max-height: 52rem) { .contact { --dlg-pad: clamp(1.25rem, 3.5vw, 1.5rem); } }   /* laptop screens: still even, a little tighter */
.contact-form, .contact-next, .contact-sent { padding: var(--dlg-pad); }
.contact .contact-footer { padding-top: var(--dlg-pad); }
@media (min-width: 40rem) and (min-height: 26rem) {
  .contact .contact-footer { margin: 0 calc(-1 * var(--dlg-pad)) calc(-1 * var(--dlg-pad)); padding: var(--dlg-pad); }
}
.contact-x { top: calc(var(--dlg-pad) - 0.5rem); right: calc(var(--dlg-pad) - 0.5rem); }
/* Same heading size in both, sized to the dialog so "I’d love to hear from you." stays on one line on wider screens. */
.contact h2#contact-title, .contact h2#fb-title { font-size: clamp(1.6rem, 5.2cqi, 2.3rem); line-height: 1.05; }
.contact-head { gap: 1rem; }
/* The two hands fill the same space as the Feedback icon, with room to wave. */
.contact-head .hands { padding: 0.35rem 0 0 0.2rem; }
.contact-head .hand { width: clamp(1.8rem, 1.4rem + 1.1vw, 2.2rem); }
.contact-head .hand--right { margin-left: -0.7rem; top: -0.4rem; }
.fb-hero .fb-icon { width: clamp(2.4rem, 1.9rem + 1.4vw, 2.9rem); }
.feedback .fb-tip { margin-bottom: 0.45rem; }
.feedback .reasons { margin-bottom: 0.6rem; }
.feedback .field { margin-bottom: 0.5rem; }