/* --------------------------------------------------------------------------
   1. TOKENS — complete LIGHT palette on bare :root.
   Every colour is defined here first. The dark blocks below only REDEFINE.
   -------------------------------------------------------------------------- */
:root {
  /* type families */
  --font-display: "Chakra Petch", "Eras ITC", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* type scale — 1.25 ratio, fluid */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.91rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.14rem + 0.30vw, 1.38rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.50vw, 1.73rem);
  --step-3:  clamp(1.73rem, 1.56rem + 0.83vw, 2.18rem);
  --step-4:  clamp(2.07rem, 1.81rem + 1.32vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.06rem + 2.14vw, 3.47rem);
  --step-6:  clamp(2.99rem, 2.28rem + 3.53vw, 4.60rem);

  /* spacing scale — 4px base */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* measure + rhythm */
  --measure: 62ch;
  --radius: 4px;
  --radius-lg: 10px;
  --rule: 1px;
  --shell: 1180px;

  /* ---- LIGHT palette (the default, fully designed on its own terms) ---- */
  --bg:            #F4F5F1;
  --bg-tint:       #EAEDE4;
  --surface:       #FFFFFF;
  --surface-2:     #EDEFE8;
  --fg:            #0D0F0C;
  --fg-muted:      #474C45;
  --fg-faint:      #5A6158;

  /* =====================================================================
     THE BRAND GREEN, DELIBERATELY SPLIT IN TWO.

     --accent      #40F513 — the canonical brand green, sampled from the
                   business card artwork. It is very light (relative
                   luminance 0.664) and highly saturated, so it is used
                   only where it is a SURFACE, never where it is a
                   letterform: fills, blocks, the mark, rules and chips.

     --accent-text the same hue (108deg) and saturation (92%) pulled down
                   in lightness until it clears 4.5:1 against every light
                   surface on this site. ALL GREEN TEXT uses this token.
                   Measured: 5.84:1 on --surface, 5.34:1 on --bg,
                   5.04:1 on --surface-2, 5.18:1 on --accent-wash.
                   Using --accent for text on the light ground measures
                   1.34:1 and is illegible — hence the split.

     In DARK theme the split collapses on purpose: against a near-black
     ground the brand green itself measures 13.65:1, so --accent-text is
     redefined to #40F513 and green text is the true brand colour there.

     --accent-rule A DELIBERATE THIRD VALUE. Do not collapse it back into
                   --accent or into --accent-text.
                   Hairlines are neither fills nor letterforms. Drawn in
                   --accent they measure 1.34:1 on the light ground and
                   1.47:1 on white, so the SAME element read 1.34:1 in
                   light and 13.65:1 in dark — that is two designs, not two
                   themes. Drawn in --accent-text they read heavy, because
                   a text-weight green on a 1px line looks like ink.
                   #2B931A sits between: 3.97:1 on --surface, 3.62:1 on
                   --bg, 3.42:1 on --surface-2, 3.52:1 on --accent-wash —
                   above the 3:1 that WCAG 1.4.11 asks of non-text
                   indicators, without the weight. In dark it collapses to
                   the brand green, which already reads correctly there.
                   Scope: rules, card spines, panel underlines and the
                   clearance badge outline. NOT hover borders — a bright
                   --accent flash on interaction is deliberate there.

     --on-accent   is near-black in BOTH themes. White on #40F513 is
                   1.47:1, so text sitting on the brand fill must be dark.
     --accent-hover is a FILL hover (still takes dark text); it is not the
                   same thing as --accent-strong, which is a TEXT hover.
     --focus-ring  uses the dark green in light, never the brand green.
                   This is a correctness fix, not a brand exception:
                   WCAG 1.4.11 requires 3:1 for non-text UI indicators and
                   #40F513 on white is 1.47:1. A focus ring nobody can see
                   is not a focus ring.
     ===================================================================== */
  --accent:        #40F513;
  --accent-text:   #1B7505;
  --accent-rule:   #2B931A;
  --accent-strong: #155C04;
  --accent-hover:  #36D40D;
  --accent-wash:   #E3F7DE;
  --on-accent:     #06080A;

  --border:        #D2D6CC;
  --border-strong: #AFB6A9;
  --focus-ring:    #155C04;
  --shadow-1: 0 1px 2px rgba(13,15,12,.07), 0 2px 8px rgba(13,15,12,.05);
  --shadow-2: 0 2px 4px rgba(13,15,12,.08), 0 12px 28px rgba(13,15,12,.09);
  --mark-ink:      #0D0F0C;
  --hero-grid:     rgba(27,117,5,.10);
  --hero-fade:     rgba(244,245,241,0);
  --selection-bg:  #40F513;
  --selection-fg:  #06080A;
  /* per-theme DESIGN tokens — light and dark are drawn differently, not inverted.
     Every colour these resolve to is defined above on bare :root. */
  --num-bg:        var(--accent);      /* light: filled chip   */
  --num-fg:        var(--on-accent);
  --num-pad:       .2em .6em;
  --num-radius:    3px;
  --num-border:    0;
  --figure-glow:   none;               /* light: rule under the number */
  --figure-rule:   3px;
  --card-bar-w:    3px;                /* light: left spine    */
  --card-bar-h:    100%;
  --hero-aura:     none;
  --scheme: light;
}

/* ---- DARK, system preference, only when not explicitly set to light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #06080A;
    --bg-tint:       #0A0E12;
    --surface:       #0D1116;
    --surface-2:     #141A21;
    --fg:            #EDF1EA;
    --fg-muted:      #AEB6AC;
    --fg-faint:      #939C91;
    --accent:        #40F513;
    --accent-text:   #40F513;   /* 13.65:1 on --bg — the brand green reads as text here */
    --accent-rule:   #40F513;   /* already correct in dark — no third value needed */
    --accent-strong: #8CFF6B;
    --accent-hover:  #6DF84A;
    --accent-wash:   #0C2A06;
    --on-accent:     #06080A;
    --border:        #1D242B;
    --border-strong: #2E3841;
    --focus-ring:    #8CFF6B;
    --shadow-1: 0 1px 2px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.45);
    --shadow-2: 0 2px 6px rgba(0,0,0,.65), 0 16px 40px rgba(0,0,0,.55);
    --mark-ink:      #EDF1EA;
    --hero-grid:     rgba(64,245,19,.10);
    --hero-fade:     rgba(6,8,10,0);
    --selection-bg:  #40F513;
    --selection-fg:  #06080A;
    --num-bg:        transparent;      /* dark: rule, not a chip */
    --num-fg:        var(--accent-text);
    --num-pad:       0 0 0 .55em;
    --num-radius:    0;
    --num-border:    2px;
    --figure-glow:   0 0 22px rgba(64,245,19,.28);
    --figure-rule:   0;
    --card-bar-w:    100%;             /* dark: top bar */
    --card-bar-h:    2px;
    --hero-aura:     radial-gradient(58% 46% at 14% 6%, rgba(64,245,19,.12) 0%, transparent 68%);
    --scheme: dark;
  }
}

/* ---- DARK, explicitly stamped — wins in both directions ---- */
:root[data-theme="dark"] {
  --bg:            #06080A;
  --bg-tint:       #0A0E12;
  --surface:       #0D1116;
  --surface-2:     #141A21;
  --fg:            #EDF1EA;
  --fg-muted:      #AEB6AC;
  --fg-faint:      #939C91;
  --accent:        #40F513;
  --accent-text:   #40F513;
  --accent-rule:   #40F513;   /* already correct in dark — no third value needed */
  --accent-strong: #8CFF6B;
  --accent-hover:  #6DF84A;
  --accent-wash:   #0C2A06;
  --on-accent:     #06080A;
  --border:        #1D242B;
  --border-strong: #2E3841;
  --focus-ring:    #8CFF6B;
  --shadow-1: 0 1px 2px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.45);
  --shadow-2: 0 2px 6px rgba(0,0,0,.65), 0 16px 40px rgba(0,0,0,.55);
  --mark-ink:      #EDF1EA;
  --hero-grid:     rgba(64,245,19,.10);
  --hero-fade:     rgba(6,8,10,0);
  --selection-bg:  #40F513;
  --selection-fg:  #06080A;
  --num-bg:        transparent;
  --num-fg:        var(--accent-text);
  --num-pad:       0 0 0 .55em;
  --num-radius:    0;
  --num-border:    2px;
  --figure-glow:   0 0 22px rgba(64,245,19,.28);
  --figure-rule:   0;
  --card-bar-w:    100%;
  --card-bar-h:    2px;
  --hero-aura:     radial-gradient(58% 46% at 14% 6%, rgba(64,245,19,.12) 0%, transparent 68%);
  --scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* explicit, token-driven background — never inherit the host's ground */
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color-scheme: var(--scheme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-strong); }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Focus — one visible, high-contrast ring everywhere. Asserted by verify.mjs. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.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; left: var(--sp-4); top: -100vh; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700; text-decoration: none;
}
.skip-link:focus-visible { top: var(--sp-4); color: var(--on-accent); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--sp-5); }
@media (min-width: 768px) { .shell { padding-inline: var(--sp-6); } }

.section { padding-block: var(--sp-8); border-top: var(--rule) solid var(--border); }
@media (min-width: 768px) { .section { padding-block: var(--sp-9); } }

.section__head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.section__num {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .12em; font-weight: 600;
  background: var(--num-bg); color: var(--num-fg);
  padding: var(--num-pad); border-radius: var(--num-radius);
  border-left: var(--num-border) solid var(--accent-rule);
}
.section__title {
  font-size: var(--step-3); text-transform: uppercase; letter-spacing: .06em;
}
.section__lede { color: var(--fg-muted); max-width: var(--measure); font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   4. THE MARK — authentic G2 artwork, recoloured by currentColor via mask.
   -------------------------------------------------------------------------- */
.mark {
  display: block;
  aspect-ratio: 224 / 194;
  background-color: currentColor;
  -webkit-mask-image: url("assets/mark.png");
          mask-image: url("assets/mark.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  flex: none;
}

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--rule) solid var(--border);
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 60px; padding-block: var(--sp-2);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--fg); margin-right: auto; min-width: 0;
}
.brand .mark { width: 26px; color: var(--mark-ink); }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 419px) { .brand__name { letter-spacing: .1em; font-size: var(--step--2); } }

.navlinks { display: none; gap: var(--sp-5); }
@media (min-width: 900px) { .navlinks { display: flex; } }
.navlinks a {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none; padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
}
.navlinks a:hover { color: var(--fg); border-bottom-color: var(--accent); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--fg-muted);
  border: var(--rule) solid var(--border-strong);
  border-radius: 999px; padding: var(--sp-2) var(--sp-3);
  cursor: pointer; white-space: nowrap;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--accent); }
.theme-toggle svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--sp-8) var(--sp-8); }
@media (min-width: 768px) { .hero { padding-block: var(--sp-9) var(--sp-8); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hero-grid) var(--rule), transparent var(--rule)),
    linear-gradient(90deg, var(--hero-grid) var(--rule), transparent var(--rule));
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 18% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 18% 0%, #000 0%, transparent 72%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hero-aura);
}
.hero > * { position: relative; z-index: 1; }

.hero__eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: var(--sp-4);
}
/* The mark sits BESIDE the name, not above it. It scales with the viewport so it
   stays proportional to the display type at every width. */
.hero__namerow {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-4); min-width: 0;
}
.hero__mark { width: clamp(50px, 7.5vw, 88px); color: var(--mark-ink); flex: none; }
@media (min-width: 768px) { .hero__namerow { gap: var(--sp-5); } }

.hero__name {
  font-size: var(--step-6); letter-spacing: .012em; line-height: .96;
  text-transform: uppercase; margin-bottom: 0; min-width: 0;
}

/* rotating descriptor */
.rotator {
  position: relative; display: block; height: 1.4em; overflow: hidden;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-2); color: var(--accent-text);
  letter-spacing: .02em; margin-bottom: var(--sp-5);
}
.rotator__item {
  position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: rotate-descriptor 27s linear infinite;
}
.rotator__item:nth-child(1) { animation-delay: 0s; }
.rotator__item:nth-child(2) { animation-delay: 3s; }
.rotator__item:nth-child(3) { animation-delay: 6s; }
.rotator__item:nth-child(4) { animation-delay: 9s; }
.rotator__item:nth-child(5) { animation-delay: 12s; }
.rotator__item:nth-child(6) { animation-delay: 15s; }
.rotator__item:nth-child(7) { animation-delay: 18s; }
.rotator__item:nth-child(8) { animation-delay: 21s; }
.rotator__item:nth-child(9) { animation-delay: 24s; }
/* nine items on a 27s cycle: each holds for one ninth (11.1%), short cross-fade.
   3s a title keeps the whole list inside the ~30s a recruiter actually spends. */
@keyframes rotate-descriptor {
  0%     { opacity: 0; transform: translateY(0.45em); }
  1.3%   { opacity: 1; transform: translateY(0); }
  9.8%   { opacity: 1; transform: translateY(0); }
  11.1%  { opacity: 0; transform: translateY(-0.45em); }
  100%   { opacity: 0; transform: translateY(-0.45em); }
}

.hero__identities {
  font-size: var(--step-1); color: var(--fg); max-width: 42ch;
  margin-bottom: var(--sp-5); line-height: 1.5;
}
.hero__identities strong { font-weight: 600; }
.hero__identities .sep { color: var(--accent-text); padding-inline: .35em; font-weight: 700; }

.clearance {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  border: 2px solid var(--accent-rule); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-6);
  background: var(--accent-wash);
}
.clearance__label {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted);
}
.clearance__value {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  letter-spacing: .04em; color: var(--fg);
}
@media (max-width: 419px) { .clearance { flex-direction: column; align-items: flex-start; gap: var(--sp-1); } }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .08em; text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--ghost { color: var(--fg); border-color: var(--border-strong); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--fg); }

/* Email + copy: TWO SIBLING CONTROLS in one pill, never a <button> inside the
   <a>. Nesting interactive elements is invalid HTML and trips axe's
   nested-interactive rule, so the pill is a plain span and each half is its own
   control with its own hover and focus ring. */
.btn-pair { display: inline-flex; align-items: stretch; }
.btn-pair__main { border-start-end-radius: 0; border-end-end-radius: 0; }
.btn-pair__copy {
  border-start-start-radius: 0; border-end-start-radius: 0;
  padding-inline: var(--sp-4);
}
/* the divider has to read against whichever fill the pair is using */
.btn--primary.btn-pair__copy { border-left-color: color-mix(in srgb, var(--on-accent) 30%, var(--accent)); }
.btn--ghost.btn-pair__copy   { border-left-color: var(--border-strong); }
.btn-pair__copy svg { width: 17px; height: 17px; display: block; }
.btn-pair__copy .icon-check { display: none; }
.btn-pair__copy.is-copied .icon-copy { display: none; }
.btn-pair__copy.is-copied .icon-check { display: block; }
/* --accent-strong is a TEXT colour: dark green in light theme, so a near-black
   check mark on it would be almost invisible. --accent-hover is the fill that is
   designed to carry --on-accent (10.11:1 light, 14.50:1 dark). */
.btn-pair__copy.is-copied,
.btn-pair__copy.is-copied:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

/* --------------------------------------------------------------------------
   7. HEADLINE NUMBERS
   -------------------------------------------------------------------------- */
.figures {
  display: grid; gap: var(--rule);
  grid-template-columns: 1fr;
  background: var(--border); border: var(--rule) solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--sp-7);
}
@media (min-width: 560px) { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .figures { grid-template-columns: repeat(5, 1fr); } }
.figure { background: var(--surface); padding: var(--sp-5); }
.figure__value {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  color: var(--accent-text); line-height: 1.05; letter-spacing: .01em;
  display: inline-block; margin-bottom: var(--sp-2);
  text-shadow: var(--figure-glow);
  border-bottom: var(--figure-rule) solid var(--accent-rule);
  padding-bottom: .12em;
}
.figure__label { display: block; font-size: var(--step--1); color: var(--fg-muted); line-height: 1.4; }

/* --------------------------------------------------------------------------
   8. NOW
   -------------------------------------------------------------------------- */
.now-list { display: grid; gap: var(--sp-4); }
@media (min-width: 860px) { .now-list { grid-template-columns: repeat(3, 1fr); } }
.now-item {
  position: relative; overflow: hidden;
  background: var(--surface); border: var(--rule) solid var(--border);
  border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-1);
}
.now-item::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--card-bar-w); height: var(--card-bar-h);
  background: var(--accent-rule);
}
.now-item__kicker {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-2);
}
.now-item__body { font-size: var(--step-0); color: var(--fg); }
.now-item__body a { font-weight: 600; }

/* --------------------------------------------------------------------------
   9. CREDENTIALS
   -------------------------------------------------------------------------- */
.cred-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .cred-grid { grid-template-columns: 1fr 1fr; } }

.panel {
  background: var(--surface); border: var(--rule) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-1);
}
.panel__title {
  font-size: var(--step-1); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--accent-rule);
}
.deflist { display: grid; gap: var(--sp-4); }
.deflist dt {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint); margin-bottom: var(--sp-1);
}
.deflist dd { margin: 0; color: var(--fg); font-size: var(--step-0); }
.deflist dd .sub { display: block; color: var(--fg-muted); font-size: var(--step--1); }

/* the four things that must not be buried */
.notable { margin-top: var(--sp-6); }
.notable__title {
  font-size: var(--step-2); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: var(--sp-2);
}
.notable__lede { color: var(--fg-muted); margin-bottom: var(--sp-5); max-width: var(--measure); }
.notable__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .notable__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .notable__grid { grid-template-columns: repeat(3, 1fr); } }
.notable-card {
  background: var(--surface-2); border: var(--rule) solid var(--border);
  border-top: 3px solid var(--accent-rule);
  border-radius: var(--radius); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2);
}
.notable-card__idx {
  font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent-text);
  letter-spacing: .12em;
}
.notable-card__text { font-size: var(--step-0); color: var(--fg); line-height: 1.45; }
.notable-card__meta { font-size: var(--step--1); color: var(--fg-muted); margin-top: auto; }

/* --------------------------------------------------------------------------
   10. SELECTED WORK
   -------------------------------------------------------------------------- */
.work-list { display: grid; gap: var(--sp-5); counter-reset: work; }
.work-item {
  display: grid; gap: var(--sp-3) var(--sp-5); align-items: start;
  background: var(--surface); border: var(--rule) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-1);
}
@media (min-width: 780px) { .work-item { grid-template-columns: minmax(0,20rem) minmax(0,1fr); padding: var(--sp-6); } }
.work-item__head { min-width: 0; }
.work-item__name {
  font-size: var(--step-2); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--sp-2); overflow-wrap: anywhere;
}
.work-item__meta {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-text);
  letter-spacing: .08em;
}
.work-item__role { font-size: var(--step--1); color: var(--fg-muted); margin-top: var(--sp-1); }
.work-item__lines { display: grid; gap: var(--sp-2); min-width: 0; }
.work-item__line {
  position: relative; padding-left: var(--sp-5); color: var(--fg); font-size: var(--step-0);
  overflow-wrap: anywhere;
}
.work-item__line::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--accent-rule);
}

/* --------------------------------------------------------------------------
   11. LINKS
   -------------------------------------------------------------------------- */
.link-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
/* four cards since Email and Referrals came out — one clean row, no orphan */
@media (min-width: 1040px) { .link-grid { grid-template-columns: repeat(4, 1fr); } }
.link-card {
  display: flex; flex-direction: column; gap: var(--sp-1);
  background: var(--surface); border: var(--rule) solid var(--border);
  border-radius: var(--radius); padding: var(--sp-5);
  text-decoration: none; color: var(--fg); box-shadow: var(--shadow-1);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.link-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-2); color: var(--fg);
}
.link-card__label {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  text-transform: uppercase; letter-spacing: .05em;
}
.link-card__url {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-text);
  overflow-wrap: anywhere;
}
.link-card__note { font-size: var(--step--1); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   12. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.contact-lines { display: grid; gap: var(--sp-4); }
.contact-line { display: grid; gap: var(--sp-1); }
.contact-line dt {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint);
}
.contact-line dd { margin: 0; }
.contact-line a, .contact-line .plain {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  letter-spacing: .02em; overflow-wrap: anywhere;
}
.contact-line .plain { color: var(--fg); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { border-top: var(--rule) solid var(--border); padding-block: var(--sp-6); background: var(--bg-tint); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between;
}
.site-footer .mark { width: 20px; color: var(--mark-ink); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.footer-copy { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-links a { font-size: var(--step--1); color: var(--fg-muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent-text); text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. RESUME PAGE
   -------------------------------------------------------------------------- */
.doc { padding-block: var(--sp-7) var(--sp-8); }
.doc__head { margin-bottom: var(--sp-7); }
.doc__title { font-size: var(--step-5); text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--sp-3); }
.doc__sub { color: var(--fg-muted); font-size: var(--step-1); max-width: var(--measure); margin-bottom: var(--sp-5); }

.rsection { margin-bottom: var(--sp-7); }
.rsection__title {
  font-size: var(--step-2); text-transform: uppercase; letter-spacing: .07em;
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--accent-rule);
}
.job { margin-bottom: var(--sp-6); }
.job__head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; margin-bottom: var(--sp-1); }
.job__org { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: .02em; }
.job__when { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-text); letter-spacing: .06em; }
.job__role { color: var(--fg-muted); font-size: var(--step-0); margin-bottom: var(--sp-3); }
.bullets { display: grid; gap: var(--sp-2); max-width: 78ch; }
.bullets li { position: relative; padding-left: var(--sp-5); color: var(--fg); overflow-wrap: anywhere; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--accent-rule);
}
.short-roles { display: grid; gap: var(--sp-3); }
.short-role {
  display: grid; gap: var(--sp-1); padding: var(--sp-4);
  background: var(--surface); border: var(--rule) solid var(--border);
  border-left: 3px solid var(--accent-rule); border-radius: var(--radius);
}
.short-role__org { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); letter-spacing: .02em; }
.short-role__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-muted); overflow-wrap: anywhere; }
.skill-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .skill-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .skill-grid { grid-template-columns: repeat(4, 1fr); } }
.skill-group__name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-2); color: var(--fg);
}
.skill-group__items { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.7; }

/* --------------------------------------------------------------------------
   15. 404
   -------------------------------------------------------------------------- */
.nf { min-height: 62vh; display: grid; align-content: center; padding-block: var(--sp-8); }
.nf__mark { width: 84px; color: var(--mark-ink); margin-bottom: var(--sp-5); }
.nf__code {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-3);
}
.nf__title { font-size: var(--step-5); text-transform: uppercase; margin-bottom: var(--sp-4); }
.nf__body { color: var(--fg-muted); font-size: var(--step-1); max-width: 52ch; margin-bottom: var(--sp-6); }

/* --------------------------------------------------------------------------
   16. REDUCED MOTION — kills the hero rotator and all transitions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rotator { height: auto; overflow: visible; white-space: normal; }
  .rotator__item {
    position: static; opacity: 1; animation: none !important;
    display: inline; white-space: normal; width: auto;
  }
  .rotator__item + .rotator__item::before {
    content: " / "; color: var(--accent-text); font-weight: 700;
  }
  .link-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .theme-toggle, .skip-link, .cta-row, .hero::before { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .work-item, .now-item, .link-card, .short-role { box-shadow: none; border-color: #999; }
}