/* ==========================================================================
   LEMUEL LEDESMA — portfolio
   "System console × editorial catalog"
   Type: Cormorant Garamond (display) · Inter (text) · JetBrains Mono (data)
   Color: Ink #0B0F0D · Emerald #00A86B · Sage #8FB9A8 · Champagne #F1E9D2
   ========================================================================== */

/* ── metric-matched fallbacks ─────────────────────────────────────────────────
   With font-display:swap the page first paints in Georgia/Arial/Consolas and
   then reflows when the webfonts arrive. Cormorant sets 87.21% of Georgia's
   width, so the 90px hero title jumped and dragged the whole hero grid with it
   — measured CLS 0.105 at 1440, i.e. a failing Core Web Vital.

   These faces re-scale the local fallbacks to the webfonts' own metrics so the
   swap is invisible. Ratios measured from real rendered TextMetrics, not
   guessed. If a platform has none of the local() fonts the face simply does
   not load and the plain stack applies. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 87.21%;
  ascent-override: 105.49%;
  descent-override: 33.25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104.64%;
  ascent-override: 92.70%;
  descent-override: 22.94%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono");
  size-adjust: 109.13%;
  ascent-override: 93.47%;
  descent-override: 27.49%;
  line-gap-override: 0%;
}

:root {
  /* surfaces */
  --bg:        #0B0F0D;
  --bg-1:      #0E1311;
  --bg-2:      #121816;
  --bg-3:      #171E1B;

  /* Decorative hairlines — row rules, panel frames, dividers. These identify
     nothing, so WCAG 1.4.11 does not govern them and they stay faint. */
  --line:      rgba(255, 255, 255, 0.065);
  --line-2:    rgba(255, 255, 255, 0.115);

  /* Interactive component boundaries — inputs, buttons, toggles.
     WCAG 2.1 SC 1.4.11 requires 3:1 against the backdrop. At --line-2 every
     control on this page measured 1.34:1, i.e. an operations manager on a
     glare-lit factory monitor could not see where the fields were.
     axe-core has no rule for this; tests/contrast.mjs measures it. */
  --line-ui:    rgba(255, 255, 255, 0.36);
  --line-ui-hi: rgba(255, 255, 255, 0.58);

  /* text (all AA+ on --bg / --bg-1 / --bg-2) */
  --text:      #DCE5E0;
  --text-2:    #93A29B;
  --text-3:    #7A8A82;

  /* accents */
  --emerald:     #00A86B;
  --emerald-lit: #12C480;
  --emerald-ink: #06120C;
  --emerald-06:  rgba(0, 168, 107, 0.06);
  --emerald-14:  rgba(0, 168, 107, 0.14);
  --emerald-28:  rgba(0, 168, 107, 0.28);

  /* the charge that runs the hero line art: core, its halo, its trailing streak */
  --volt:      #F4FFFA;
  --volt-halo: #6EFFC0;
  --volt-mid:  #3FE9A0;

  --sage:        #8FB9A8;
  --champagne:   #F1E9D2;
  --champagne-2: rgba(241, 233, 210, 0.55);
  --danger:      #F2848F;

  /* type */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 11px floor.
     Buyers here are operations managers, not designers; nothing drops below
     11px, and tracking loosens as size drops so caps stay legible. */
  --fs-micro: 0.6875rem;  /* 11px — captions, counts, sub-marks   */
  --fs-label: 0.75rem;    /* 12px — controls, eyebrows, keys      */
  --fs-sm:    0.875rem;   /* 14px — secondary body, definitions   */
  --fs-body:  1rem;       /* 16px — body                          */

  /* tracking pairs with the sizes above */
  --tr-wide:  0.16em;
  --tr-mid:   0.12em;

  /* metrics */
  --container: 1200px;
  --header-h:  70px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);

  /* Work table column ruler (shared by header row + data rows).
     Col 2 is the system CODE, col 3 the CLIENT. The client is the wide,
     display-weight column: five of the nine codes (CSMSI, ACI, ACS, DCII,
     RACI) are just initialisms of the client beside them, so giving the code
     the visual lead spent the table's most prominent column on the same fact
     twice. It now reads as a record ID, which is what it is. */
  --wcols: 3.25rem 6rem minmax(0, 1.55fr) minmax(0, 1.05fr) 5.5rem 2.25rem;
  --wpad:  1.1rem;
}

/* ── reset / base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 3.25rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.017) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.017) 1px, transparent 1px);
  background-size: 72px 72px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--emerald); color: var(--emerald-ink); }

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  margin: 0;
}

p { margin: 0 0 1rem; }
a { color: var(--emerald-lit); }

/* Outline only — never touch border-radius here, or every focusable element
   silently changes geometry on focus. Modern engines already trace the
   element's own radius. */
:focus-visible {
  outline: 2px solid var(--emerald-lit);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.15rem, 5vw, 2.5rem);
}

.dot { color: var(--emerald); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 300;
  padding: 0.7rem 1.1rem;
  background: var(--emerald);
  color: var(--emerald-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* shared micro-label */
.section__meta,
.hero__ref,
.status,
.stat__label,
.frame__cap,
.tbl__cols,
.tbl__count,
.seg__btn,
.work__idx,
.work__name,
.work__domain,
.work__class,
.log__bar,
.log__tag,
.stack dt,
.about__fact dt,
.contact__fact dt,
.field__label,
.footer__build {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease),
              background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
  background: var(--emerald);
  color: var(--emerald-ink);
  border-color: var(--emerald);
}

.btn--primary:hover {
  background: var(--emerald-lit);
  border-color: var(--emerald-lit);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 168, 107, 0.22);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-ui);
}

.btn--ghost:hover {
  border-color: var(--emerald);
  color: var(--emerald-lit);
  transform: translateY(-2px);
}

.btn__arrow {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.24s var(--ease);
}

.btn--ghost:hover .btn__arrow { transform: translateX(4px); }

/* ── header ───────────────────────────────────────────────────────────────── */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  background: rgba(11, 15, 13, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: var(--header-h);
  padding: 0 clamp(1.15rem, 4vw, 3rem);
}

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--champagne);
  text-decoration: none;
}

.header__mark { flex-shrink: 0; }

.header__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--champagne);
}

.header__name-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.header__nav {
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.4rem);
  margin-left: auto;
  margin-right: 1.35rem;
}

.header__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.2s ease;
}

.header__link-idx {
  font-size: var(--fs-micro);
  color: var(--emerald);
}

.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--emerald);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.header__link:hover { color: var(--text); }
.header__link:hover::after { transform: scaleX(1); }

.header__right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.hire-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--emerald);
  color: var(--emerald-ink);
  border-radius: 2px;
  padding: 0.5rem 1.05rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease),
              background-color 0.2s ease;
}

.hire-pill:hover {
  background: var(--emerald-lit);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 168, 107, 0.22);
}

.hire-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}

.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-ui);
  border-radius: 3px;
  cursor: pointer;
}

.header__toggle span {
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s ease;
}

.header__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

.header__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.header__progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--sage));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* horizontal metrics mirror .container so the hero aligns with every section */
  padding: calc(var(--header-h) + 3.5rem) clamp(1.15rem, 5vw, 2.5rem) 5.5rem;
  background: radial-gradient(ellipse 900px 520px at 82% 30%, var(--emerald-06), transparent 68%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  max-width: calc(var(--container) - clamp(1.15rem, 5vw, 2.5rem) * 2);
  margin: 0 auto;
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.hero__ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.05rem;
}

.hero__ref-sep { color: var(--emerald); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 0.4rem 0.85rem;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--bg-1);
  margin-bottom: 1.5rem;
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-14);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--emerald-14); }
  50%      { box-shadow: 0 0 0 7px var(--emerald-06); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 7vw, 5.6rem);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--champagne);
  margin-bottom: 1.3rem;
}

/* 400, not 600 — that is the only italic face loaded. Requesting 600 here
   triggers synthetic bold on Cormorant, which smears its thin strokes. */
.hero__title em { font-style: italic; font-weight: 400; }

/* The H1 is "Hi, my name is Lemuel." — 90px of introduction that says nothing
   about the work. This paragraph carries the entire value proposition, so it
   is set at --text (not the recessive --text-2) and a step above body size.
   At 16px muted grey the only sentence that answers "what does he build?"
   lost the five-second scan to a name that is already in the header. */
.hero__sub {
  font-size: 1.1rem;
  color: var(--text);
  max-width: 32rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero__sub strong { color: var(--champagne); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* justify-self:end, not center — centred, the frame's right edge landed at
   1262px while the stats bar and the work table below both end at 1280px. */
.hero__figure { justify-self: end; width: min(100%, 460px); }

.avatar-bob { animation: bob 5.5s ease-in-out 1.2s infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.hero__rail {
  position: absolute;
  left: 0.9rem;
  bottom: 9rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.scroll-cue {
  position: absolute;
  bottom: 1.9rem;
  left: clamp(1.15rem, 5vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.scroll-cue__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.scroll-cue__line {
  position: relative;
  width: 56px;
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--emerald);
  transform: translateX(-100%);
  animation: slide 2.2s var(--ease) infinite;
}

@keyframes slide {
  40%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ── framed figure (hero art + about photo) ───────────────────────────────── */

.frame {
  position: relative;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
}

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--emerald);
  opacity: 0.65;
}

.frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.frame__img { width: 100%; height: auto; }

/* ── hero line art: a charge running the length of the stroke (see index.html)
   Dashes are per-mille of the route (pathLength="1000"): the core is one 14‰
   segment on an empty line, and 1000 -> 0 dash offset walks it end to end.
   --lag holds each copy further back, applied via animation-delay because a
   keyframe value that reads a custom property stops interpolating and the
   whole thing degrades to a jump at 50%; a negative delay is equivalent on a
   periodic loop. Only the unmoving bloom is filtered, so nothing re-blurs. */
.lineart { --volt-dur: 6.5s; }

.lineart__bloom { stroke: var(--emerald); stroke-width: 15; opacity: .18; filter: url(#lineart-bloom); }
.lineart__line  { stroke: var(--emerald); stroke-width: 5; }

.lineart__streak,
.lineart__tail,
.lineart__halo,
.lineart__core {
  animation: volt var(--volt-dur) linear infinite;
  animation-delay: calc((var(--lag) - 1000) / 1000 * var(--volt-dur));
}

.lineart__streak { --lag: 70; stroke: var(--emerald-lit); stroke-width: 5;   opacity: .28; stroke-dasharray: 150 850; }
.lineart__tail   { --lag: 22; stroke: var(--volt-mid);    stroke-width: 5;   opacity: .48; stroke-dasharray: 58 942; }
.lineart__halo   { --lag: 7;  stroke: var(--volt-halo);   stroke-width: 12;  opacity: .30; stroke-dasharray: 30 970; }
.lineart__core   { --lag: 0;  stroke: var(--volt);        stroke-width: 5.5;               stroke-dasharray: 14 986; }

@keyframes volt {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

.frame__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.7rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
}

.frame__cap span:first-child { color: var(--emerald); }

/* ── hero instrumentation ─────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: calc(var(--container) - clamp(1.15rem, 5vw, 2.5rem) * 2);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  border: 1px solid var(--line);
  background: var(--bg-1);
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.3rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-left: 1px solid var(--line);
}

.stat:first-child { border-left: 0; }

.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.2rem;
  width: 16px;
  height: 2px;
  background: var(--emerald);
}

.stat__label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
}

.stat__value { margin: 0; }

.stat__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--champagne);
}

.stat__num--code { color: var(--emerald); letter-spacing: 0.02em; }

/* ── sections ─────────────────────────────────────────────────────────────── */

.section { padding: clamp(4rem, 8vw, 7rem) 0; }

.section--work {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head {
  max-width: 660px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 0.7rem;
}

.section__eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--emerald);
  opacity: 0.6;
  flex-shrink: 0;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 300;
  color: var(--champagne);
  margin-bottom: 0.55rem;
  letter-spacing: -0.015em;
}

.section__meta {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

/* ── work: instrumented table ─────────────────────────────────────────────── */

.tbl {
  border: 1px solid var(--line);
  background: var(--bg);
}

.tbl__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding: 0.8rem var(--wpad);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

/* Visible group label — the aria-label alone left sighted non-technical
   visitors guessing what six unlabelled buttons did. */
.tbl__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: 1px solid var(--line-ui);
  border-radius: 2px;
  color: var(--text-2);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.seg__btn:hover { color: var(--text); border-color: var(--line-ui-hi); }

.seg__count {
  font-size: var(--fs-micro);
  color: var(--text-3);
  transition: color 0.18s ease;
}

.seg__btn.is-active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--emerald-ink);
}

.seg__btn.is-active .seg__count { color: rgba(6, 18, 12, 0.9); }

.tbl__count {
  margin: 0 0 0 auto;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
}

.tbl__cols {
  position: sticky;
  top: var(--header-h);
  z-index: 4;
  display: grid;
  grid-template-columns: var(--wcols);
  gap: 1.25rem;
  align-items: center;
  padding: 0.55rem var(--wpad);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
}

.work {
  list-style: none;
  margin: 0;
  padding: 0;
}

.work__row {
  position: relative;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}

.work__row:last-child { border-bottom: 0; }
.work__row[hidden]    { display: none; }

.work__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--emerald);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}

.work__row:hover,
.work__row:focus-within,
.work__row.is-open { background: var(--bg-2); }

.work__row:hover::before,
.work__row:focus-within::before,
.work__row.is-open::before { transform: scaleY(1); }

.work__h { margin: 0; font-family: inherit; font-weight: inherit; }

.work__head {
  display: grid;
  grid-template-columns: var(--wcols);
  gap: 1.25rem;
  align-items: center;
  width: 100%;
  padding: 1.05rem var(--wpad);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text);
}

.work__idx {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-3);
  transition: color 0.2s ease;
}

.work__row:hover .work__idx,
.work__row.is-open .work__idx { color: var(--emerald); }

/* system code — a record ID, not a headline */
.work__name {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--text-3);
  transition: color 0.2s ease;
}

.work__row:hover .work__name,
.work__row.is-open .work__name { color: var(--text-2); }

/* the client is what a buyer actually scans for */
.work__client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.24;
  letter-spacing: 0.005em;
  color: var(--champagne);
  transition: color 0.2s ease;
}

.work__row:hover .work__client,
.work__row.is-open .work__client { color: var(--emerald-lit); }

.work__domain {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.work__class {
  justify-self: start;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--emerald-28);
  border-radius: 2px;
  background: var(--emerald-06);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald-lit);
  white-space: nowrap;
}

.work__toggle {
  position: relative;
  justify-self: end;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-ui);
  border-radius: 2px;
  flex-shrink: 0;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

.work__toggle::before,
.work__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1px;
  background: var(--text-2);
  transform: translate(-50%, -50%);
  transition: transform 0.32s var(--ease), background-color 0.22s ease;
}

.work__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.work__row:hover .work__toggle { border-color: var(--line-ui-hi); }

.work__row.is-open .work__toggle {
  background: var(--emerald);
  border-color: var(--emerald);
}

.work__row.is-open .work__toggle::before,
.work__row.is-open .work__toggle::after { background: var(--emerald-ink); }
.work__row.is-open .work__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Panel.
   Default state is OPEN. Without JavaScript the accordion buttons do nothing,
   so collapsing by default would bury every description and all three live
   client links behind a control that cannot fire. The collapsed state is
   therefore scoped to .js, which is set by a blocking inline script in <head>
   — so when scripting is on, rows are collapsed before the first paint and
   there is no flash.

   `visibility` (not just 0fr) does the hiding, because overflow-clipped
   content stays focusable and stays in the accessibility tree. Doing it in
   CSS rather than relying on the `inert` that script.js applies means a
   failed/blocked script.js still cannot strand 9 invisible tab stops. */
.work__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.js .work__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.42s var(--ease), visibility 0s linear 0.42s;
}

.js .work__row.is-open .work__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.42s var(--ease), visibility 0s;
}

/* Record view: client mark · narrative.
   There used to be a third column here — a "spec sheet" listing Client,
   Scope and Domain. Checked field by field against the collapsed row, it
   restated Client and Domain verbatim in all nine records and contributed
   exactly one new word ("E-commerce") across the whole portfolio, so it was
   removed rather than restyled.

   The mark is 150px, not the 230px it was. These are client logo plates on
   flat brand colour, not product screenshots; at 230px the brightest, least
   informative asset in the section (a fluorescent-yellow plate at 375px) led
   the reveal and pushed the description — the only thing a buyer came for —
   below the fold on mobile. */
.work__panel-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: start;
  padding: 0.25rem var(--wpad) 2rem;
}

.work__panel-inner--solo {
  grid-template-columns: minmax(0, 1fr);
}

.js .work__panel-inner {
  padding: 0 var(--wpad);
  transition: padding 0.42s var(--ease);
}

.js .work__row.is-open .work__panel-inner { padding: 0.25rem var(--wpad) 2rem; }

.shot {
  margin: 0;
  padding: 0.35rem;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
}

.shot__img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 650;
  object-fit: cover;
  background: var(--bg-2);
}

/* capped measure — without the third column the description would otherwise
   run to ~120 characters a line at 1440 */
.work__detail { min-width: 0; max-width: 62ch; }

.work__desc {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.72;
  margin: 0 0 1.15rem;
}

.work__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--emerald-lit);
  text-decoration: none;
  border-bottom: 1px solid var(--emerald-28);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.work__link:hover { color: var(--champagne); border-color: var(--champagne-2); }

.tbl__empty {
  margin: 0;
  padding: 2.5rem var(--wpad);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text-3);
}

/* ── about: release log ───────────────────────────────────────────────────── */

.section--about {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.section--about::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--emerald-06), transparent 70%);
  pointer-events: none;
}

.about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}

.about__aside { position: sticky; top: calc(var(--header-h) + 2rem); }

.frame--photo .frame__img { background: var(--bg-2); }

.about__facts {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}

.about__fact {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.about__fact dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.15rem;
}

.about__fact dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.is-live { color: var(--emerald-lit) !important; }

.log {
  border: 1px solid var(--line);
  background: var(--bg-1);
}

.log__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--wpad);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
}

.log__title { color: var(--text-2); }
.log__meta  { color: var(--emerald); }

.log__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.log__item {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.4rem var(--wpad);
  border-bottom: 1px solid var(--line);
}

.log__item:last-child { border-bottom: 0; }

/* connector rail */
.log__item::before {
  content: "";
  position: absolute;
  left: calc(var(--wpad) + 5px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-2);
}

.log__item:first-child::before { top: 1.8rem; }
.log__item:last-child::before  { bottom: calc(100% - 1.8rem); }

.log__stamp {
  position: relative;
  margin: 0;
  padding-left: 1.35rem;
}

.log__stamp::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-14);
}

.log__tag {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--emerald);
}

.log__body { min-width: 0; }

.log__h {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--champagne);
  margin-bottom: 0.45rem;
}

.log__body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-2);
}

/* Pull-quote entry. Keyed to a class, not :nth-child(2) — reorder the log
   and positional styling silently lands on the wrong entry. */
.log__item--lead .log__body p {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--champagne);
}

.stack {
  margin: 0.85rem 0 0;
  border-top: 1px solid var(--line);
}

.stack__row {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.stack__row:last-child { border-bottom: 0; }

.stack dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--emerald);
  padding-top: 0.2rem;
}

.stack dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}

/* ── contact ──────────────────────────────────────────────────────────────── */

.section--contact {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact__info { min-width: 0; }

.contact__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  font-weight: 400;
  line-height: 1.32;
  color: var(--champagne);
  margin-bottom: 0.9rem;
}

.contact__text {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.72;
  margin-bottom: 1.75rem;
}

.contact__facts {
  margin: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--bg);
}

.contact__fact {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
}

.contact__fact dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.2rem;
}

.contact__fact dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-content: start;
}

/* Every field is required but nothing said so until the form rejected you. */
.contact__req {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
}

.field { grid-column: 1 / -1; }
.field--half { grid-column: span 1; }

.field__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.45rem;
}

.field__idx { color: var(--emerald); }

.field__input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-ui);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field__input::placeholder { color: var(--text-3); }

.field__input:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-14);
}

/* keyboard focus gets a real, high-contrast indicator */
.field__input:focus-visible {
  outline: 2px solid var(--emerald-lit);
  outline-offset: 1px;
  border-color: var(--emerald-lit);
}

.field__input--area { resize: vertical; min-height: 8.5rem; }

.field__input[aria-invalid="true"] { border-color: var(--danger); }

.contact__submit {
  grid-column: 1 / -1;
  justify-self: start;
}

.contact__submit-label { pointer-events: none; }

.contact__submit:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.contact__status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--emerald-lit);
}

.contact__status.is-error { color: var(--danger); }

/* ── footer ───────────────────────────────────────────────────────────────── */

.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 1.75rem 0;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
}

.footer__copy {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.footer__heart { color: var(--emerald); }

.footer__links { display: flex; gap: 1.5rem; }

.footer__links a {
  font-family: var(--font-mono);
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.footer__links a:hover { color: var(--emerald-lit); }

.footer__build {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mid);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── motion: entrance ─────────────────────────────────────────────────────── */

.js [data-rise] {
  opacity: 0;
  transform: translateY(20px);
  animation: rise 0.85s var(--ease) forwards;
  animation-delay: calc(0.08s + var(--d, 0) * 0.1s);
}

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.js [data-reveal].is-in { opacity: 1; transform: translateY(0); }

.js .tbl .work__row { opacity: 0; transform: translateY(8px); }

.js .tbl.is-in .work__row {
  animation: rowIn 0.45s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}

@keyframes rowIn { to { opacity: 1; transform: translateY(0); } }

/* Re-run on filter change. This wins over the stagger rule above on
   specificity (5 classes + an attribute vs 4 classes), not on source order. */
.js .work.is-filtered .work__row:not([hidden]) {
  animation: rowIn 0.3s var(--ease) both;
  animation-delay: 0s;
}

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
  :root { --wcols: 3rem 5.5rem minmax(0, 1.5fr) minmax(0, 0.95fr) 5rem 2rem; }
}

/* Tablet: drop the Industry column. It is the least load-bearing of the five
   — the description names the industry in every record — and dropping it
   keeps the client name on one line instead of wrapping to three. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --wcols: 2.9rem 5.75rem minmax(0, 1.6fr) 5rem 2rem; }
  .work__domain,
  .tbl__cols .c-domain { display: none; }
}

@media (max-width: 1023.98px) {
  .work__panel-inner { grid-template-columns: 130px minmax(0, 1fr); }

  /* tighter ruler gap so "Paylalo PM" keeps its own line in the code column */
  .tbl__cols,
  .work__head { gap: 1rem; }

  /* Below ~1024 the bar can no longer hold label + six pills + tally on one
     line; space-between then stranded the tally alone on a third line,
     right-aligned against nothing. Stack it: control first, result after. */
  .tbl__bar { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .tbl__count { margin-left: 0; }
  .seg { width: 100%; }
  .seg__btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 991.98px) {
  .hero { padding-bottom: 4.5rem; }

  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }

  .hero__copy { margin: 0 auto; }
  .hero__ref { justify-content: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }

  .hero__figure { justify-self: center; width: min(78%, 360px); margin: 0 auto; }

  .hero__rail,
  .scroll-cue { display: none; }

  .about { grid-template-columns: 1fr; }
  .about__aside { position: static; max-width: 320px; }

  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  :root { --wpad: 0.85rem; }

  html { scroll-padding-top: calc(var(--header-h) + 1rem); }

  .header__nav {
    position: fixed;
    top: calc(var(--header-h) - 4px);
    left: 0.75rem;
    right: 0.75rem;
    flex-direction: column;
    gap: 0;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 0.35rem 0;
    margin: 0;
    display: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }

  .header__nav.is-open { display: flex; }

  .header__link { padding: 0.85rem 1.15rem; }
  .header__link::after { display: none; }
  .header__toggle { display: flex; }
  .hire-pill { display: none; }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 2.75rem); }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(-n + 2) { border-top: 0; }

  .tbl__cols { display: none; }

  .work__head {
    grid-template-columns: 2.3rem minmax(0, auto) minmax(0, 1fr) 1.9rem;
    grid-template-areas:
      "idx client client tgl"
      "idx name   name   tgl"
      "idx class  domain tgl";
    align-items: start;
    row-gap: 0.3rem;
    column-gap: 0.7rem;
    padding: 0.95rem var(--wpad);
  }

  .work__idx    { grid-area: idx; padding-top: 0.3rem; }
  .work__client { grid-area: client; font-size: 1.18rem; }
  .work__name   { grid-area: name; }
  .work__class  { grid-area: class; align-self: center; }
  .work__domain { grid-area: domain; align-self: center; }
  .work__toggle { grid-area: tgl; align-self: start; margin-top: 0.15rem; }

  .work__panel-inner,
  .work__panel-inner--solo { grid-template-columns: minmax(0, 1fr); }
  .shot { max-width: 132px; }

  .log__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 1.25rem var(--wpad);
  }

  .log__item::before { display: none; }
  .log__stamp { padding-left: 1.1rem; }
  .log__stamp::before { top: 0.4rem; left: 0; }
  .log__h { font-size: 1.2rem; }
  .log__item--lead .log__body p { font-size: 1.15rem; }

  .stack__row,
  .about__fact,
  .contact__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .field--half { grid-column: 1 / -1; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 479.98px) {
  .hero__title { font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: 0 !important; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .frame__cap { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* ── reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* also zero the delay, or the panel's `visibility 0s linear 0.42s`
       keeps a just-closed panel in the tab order for 420ms */
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js [data-rise],
  .js [data-reveal],
  .js .tbl .work__row,
  .js .tbl.is-in .work__row,
  .js .work.is-filtered .work__row:not([hidden]) {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .avatar-bob,
  .scroll-cue__line::after,
  .hire-pill__dot,
  .status__dot { animation: none !important; }

  /* The pulse IS its animation — frozen it would just be a bright stub parked
     somewhere on the line — so it goes away entirely and the drawing stays. */
  .lineart__streak,
  .lineart__tail,
  .lineart__halo,
  .lineart__core { display: none; }

  .btn:hover,
  .hire-pill:hover { transform: none; }

  /* keep the accordion usable, just instant */
  .work__panel { transition: none; }
  .work__panel-inner { transition: none; }
  .header__progress i { transition: none; }
}

/* ── Windows High Contrast (forced-colors) ────────────────────────────────
   The stated buyer is an operations manager on a glare-lit factory monitor —
   precisely the population that runs High Contrast. forced-colors replaces
   author colours with a system palette, and three affordances on this page
   were carried by background-colour alone, so they disappeared:

     · the accordion +/- glyph. Its two bars ARE backgrounds, so they were
       remapped to the same colour as the button face: an empty box, in the
       collapsed AND the expanded state. The only indicator of row state.
     · the active filter pill. Its sole signal is a fill, so "All" became
       indistinguishable from the five inactive pills.
     · the "Hire me" pill, which has no border and degraded into plain text
       sitting among the nav links — the primary CTA lost its affordance.

   System colour keywords are the one thing forced-colors honours, so state is
   redrawn with them. Everything here is inside the media query and cannot
   affect normal rendering. Decorative marks (stat ticks, eyebrow rules, log
   dots) are deliberately left to disappear — they carry no information. */
@media (forced-colors: active) {
  .work__toggle { border-color: ButtonText; }

  .work__toggle::before,
  .work__toggle::after {
    background: ButtonText;
    forced-color-adjust: none;
  }

  .work__row.is-open .work__toggle {
    background: Highlight;
    border-color: Highlight;
  }

  .work__row.is-open .work__toggle::before,
  .work__row.is-open .work__toggle::after { background: HighlightText; }

  .work__row:hover::before,
  .work__row:focus-within::before,
  .work__row.is-open::before {
    background: Highlight;
    forced-color-adjust: none;
  }

  .seg__btn { border-color: ButtonText; }

  /* Deliberately NO `color` here. Chromium paints a Canvas-coloured backplate
     behind every text run in forced colors; pairing Highlight with an explicit
     HighlightText made the label white-on-white and the pill rendered as two
     solid blocks where "All 09" should be. Setting only the background lets
     the UA pair the text with its own backplate, which is legible by
     construction. Verified by render, not by assumption. */
  .seg__btn.is-active {
    background: Highlight;
    border-color: Highlight;
  }

  /* outline, not border — a border would resize the pill by 2px */
  .hire-pill {
    outline: 1px solid ButtonText;
    outline-offset: -1px;
  }

  .status__dot {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line:   rgba(255, 255, 255, 0.16);
    --line-2: rgba(255, 255, 255, 0.28);
    --line-ui:    rgba(255, 255, 255, 0.52);
    --line-ui-hi: rgba(255, 255, 255, 0.78);
    --text-2: #B7C3BD;
    --text-3: #9DAAA3;
  }
}