/* ============================================================
       THEME TOKENS — swap these to reskin the entire site.
       Each future "issue" of Abrev'd is essentially a new set of
       these values plus optional layout overrides.
       ============================================================ */
    :root {
      --bg:        #0E0E12;
      --bg-alt:    #14141A;
      --ink:       #F4EFE3;
      --ink-muted: rgba(244,239,227,0.78);
      --ink-soft:  rgba(244,239,227,0.55);
      --ink-faint: rgba(244,239,227,0.18);
      --accent:    #FF5A1F;
      --rule:      rgba(244,239,227,0.18);

      --display:   'Russo One', Impact, 'Helvetica Neue', sans-serif;
      --body:      'Jost', 'Helvetica Neue', Arial, sans-serif;
      --serif:     Georgia, 'Iowan Old Style', serif;
    }

    /* ---------- reset + base ---------- */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--body);
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
    img, video { display: block; max-width: 100%; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* ---------- skip link ---------- */
    .skip { position: absolute; top: -40px; left: 8px; background: var(--accent); color: var(--bg); padding: 8px 12px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; z-index: 1000; }
    .skip:focus { top: 8px; }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      background: var(--bg);
      overflow: hidden;
    }
    .hero__video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.55;
      z-index: 0;
    }
    .hero__chrome { position: absolute; top: 28px; left: 32px; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); z-index: 5; }
    .hero__chrome .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: live-pulse 1.6s ease-in-out infinite; }

    .hero__lockup {
      position: absolute;
      left: 0; right: 0;
      top: 50%;
      transform: translateY(-52%);
      padding: 0 6vw;
      z-index: 5;
      /* Shared font-size for the wordmark + the eyebrow's tucked-in offset math */
      --wm: clamp(96px, 22vw, 320px);
    }
    .wordmark {
      font-family: var(--display);
      font-weight: 400; /* Anton ships single-weight */
      font-size: var(--wm);
      line-height: 0.84;
      letter-spacing: -0.03em;
      color: var(--ink);
      white-space: nowrap;
      margin: 0;
    }
    /* Eyebrow lifts out of normal flow and tucks into the negative space at the
       top of the wordmark, sitting just past the b's ascender — above the lower
       x-height letters (r, e, v). The 0.85 multiplier ≈ A + b widths in Anton. */
    .eyebrow {
      position: absolute;
      top: calc(var(--wm) * 0.05);
      left: calc(6vw + var(--wm) * 1.0);
      font-kerning: auto;
      font-feature-settings: "kern" 1;]
      margin: 0;
      font-family: var(--body);
      font-weight: 500;
      font-size: clamp(11px, 1vw, 16px);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      white-space: nowrap;
      line-height: 1;
      z-index: 6;
    }
    .deck {
      margin-top: clamp(18px, 2vw, 28px);
      max-width: 42ch;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(14px, 1.1vw, 18px);
      line-height: 1.5;
      color: var(--ink-muted);
    }
    .scroll-cue { position: absolute; bottom: 28px; left: 32px; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); z-index: 5; }
    .scroll-cue .ti { font-size: 14px; animation: bob 2.2s ease-in-out infinite; }
    .hero__date { position: absolute; bottom: 28px; right: 32px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); z-index: 5; }

    /* ============================================================
       SECTIONS ("spreads")
       ============================================================ */
    section.spread {
      position: relative;
      padding: clamp(48px, 8vw, 120px) 6vw;
      border-top: 0.5px solid var(--rule);
    }
    .spread--alt { background: var(--bg-alt); }
    .spread__header {
      display: flex; align-items: baseline; gap: 24px;
      margin-bottom: clamp(28px, 4vw, 56px);
    }
    .spread__num {
      font-family: var(--display);
      font-size: clamp(48px, 6vw, 96px);
      line-height: 0.84;
      color: var(--ink-faint);
    }
    .spread__name {
      font-size: 13px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 500;
    }
    .spread__rule { flex: 1; height: 0.5px; background: var(--rule); }

    /* Article */
    .article { max-width: 640px; }
    .article__title {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(36px, 4.6vw, 72px);
      line-height: 0.96;
      letter-spacing: -0.02em;
      margin: 0 0 24px;
    }
    .article__title em { font-family: var(--serif); font-style: italic; color: var(--accent); }
    .article p { margin: 0 0 16px; color: var(--ink); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }
    .pull {
      border-left: 3px solid var(--accent);
      padding: 8px 0 8px 22px;
      margin: 32px 0;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(18px, 1.6vw, 24px);
      line-height: 1.4;
    }

    /* About / resume */
    .about { max-width: 900px; }
    .about__name {
      margin: 0;
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(34px, 4vw, 60px);
      line-height: 0.95;
      letter-spacing: -0.02em;
    }
    .about__title { margin: 10px 0 8px; font-size: clamp(15px, 1.3vw, 20px); color: var(--ink-muted); }
    .about__meta { margin: 0 0 26px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
    .about__meta a { color: var(--accent); }
    .about__block { margin-top: 30px; }
    .about__kicker {
      margin: 0 0 14px;
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 500;
    }
    .about__role { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.02em; }
    .about__tenure { color: var(--ink-muted); font-family: var(--body); font-size: 14px; }
    .about__org { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); }
    .about__list { margin: 0; padding-left: 20px; }
    .about__list li {
      margin-bottom: 10px;
      color: var(--ink);
      font-size: clamp(14px, 1.05vw, 16px);
      line-height: 1.65;
      transform-origin: left center;
      transition: transform 320ms cubic-bezier(.2,.8,.2,1);
    }
    /* Marker-pen swipe — the inner .li-mark span is added by JS at runtime so the
       highlight tracks the actual text width (not the full <li> row), and wraps
       cleanly on multi-line items via box-decoration-break. */
    .about__list li .li-mark {
      background-image: linear-gradient(var(--accent), var(--accent));
      background-size: 0% 100%;
      background-repeat: no-repeat;
      background-position: 0 50%;
      padding: 0.06em 0.12em;
      margin: 0 -0.12em;
      border-radius: 1px;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      /* on hover-OUT (returning to base): color snaps back to cream instantly so
         the un-swiping orange doesn't briefly reveal dark text on a dark page */
      transition: background-size 440ms cubic-bezier(.2,.8,.2,1), color 0ms 0ms;
    }
    .about__list li:hover { transform: scale(1.04); }
    .about__list li:hover .li-mark {
      background-size: 100% 100%;
      color: var(--bg);
      /* on hover-IN: color change is held until the swipe is nearly finished,
         then snaps to dark — so we never get dark-text-on-dark mid-animation */
      transition: background-size 440ms cubic-bezier(.2,.8,.2,1), color 0ms 400ms;
    }

    /* Tools */
    .tools__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
    .chip {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(244,239,227,0.06);
      border: 0.5px solid var(--rule);
      color: var(--ink-muted);
      transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    }
    .chip:hover { color: var(--ink); }
    .chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
    .tools__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
    .tile {
      background: rgba(244,239,227,0.04);
      border: 0.5px solid rgba(244,239,227,0.1);
      border-radius: 12px;
      padding: 22px 14px;
      text-align: center;
      transition: background 200ms ease, transform 200ms ease;
    }
    .tile:hover { background: rgba(244,239,227,0.08); transform: translateY(-2px); }
    .tile .ti { font-size: 36px; color: var(--ink); display: block; }
    .tile__icon {
      display: block;
      width: 36px;
      height: 36px;
      margin: 0 auto;
      object-fit: contain;
    }
    .tile__name { font-size: 12px; color: var(--ink-muted); margin-top: 10px; }
    .tools__count { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-top: 22px; text-align: right; }

    /* WIPs */
    .wips__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
    .wip {
      background: rgba(244,239,227,0.04);
      border: 0.5px solid rgba(244,239,227,0.12);
      line-height: 28px;
      border-radius: 16px;
      padding: 24px;
      transition: background 200ms ease, opacity 200ms ease;
    }
    .wip:hover { background: rgba(244,239,227,0.07); }
    /* Unfinished cards (Pending / Coming soon / Prototype) sit subdued so the
       live projects read as the heroes — they brighten to full on hover, a small
       "leaning in" reward that builds a little anticipation. */
    .wip:has(.badge--soon) { opacity: 0.6; }
    .wip:has(.badge--soon):hover { opacity: 1; }
    /* In-blurb asides borrow the site's serif-italic "aside" voice. */
    .wip__blurb em { font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
    /* head: badge never shrinks (flex-shrink:0 + nowrap); name takes the rest
       and wraps instead of crashing into the badge, at any title length. */
    .wip__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
    .wip__name { font-family: var(--display); font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -0.02em; min-width: 0; overflow-wrap: anywhere; }
    .badge { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; line-height: 13px; font-weight: 500; padding: 5px 11px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
    .badge--live { background: var(--accent); color: var(--bg); }
    .badge--soon { background: rgba(244,239,227,0.08); border: 0.5px solid rgba(244,239,227,0.22); color: var(--ink-muted); }
    .badge--case { background: transparent; border: 0.5px solid var(--accent); color: var(--accent); }
    .wip__blurb { font-size: 14px; color: var(--ink-muted); line-height: 1.55; margin-bottom: 14px; }
    .wip__link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 500; }

    /* Contact */
    .contact__email {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(28px, 4vw, 56px);
      line-height: 1;
      letter-spacing: -0.02em;
      border-bottom: 2px solid var(--accent);
      padding-bottom: 8px;
      display: inline-block;
    }
    .socials { display: flex; gap: 24px; margin-top: 22px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); }
    .socials a { display: flex; align-items: center; gap: 6px; }
    .socials .ti { font-size: 16px; }

    /* Footer line ("colophon") */
    .colophon {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 80px;
      padding-top: 22px;
      border-top: 0.5px solid var(--rule);
      font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint);
      flex-wrap: wrap; gap: 12px;
    }

    /* ============================================================
       FLOATING MENU + KILL TOGGLE
       ============================================================ */
    .menu-stack {
      position: fixed;
      top: 28px;
      right: 28px;
      z-index: 100;
      display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
    }
    .menu-pill {
      background: rgba(244,239,227,0.08);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 0.5px solid rgba(244,239,227,0.18);
      border-radius: 999px;
      width: 48px;
      display: flex; flex-direction: column; align-items: center;
      padding: 6px 0;
    }
    .menu-pill__toggle, .menu-pill__item {
      width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      color: var(--ink);
      border-radius: 999px;
      position: relative;
      transition: background 200ms ease, color 200ms ease;
    }
    .menu-pill__items { display: none; flex-direction: column; }
    .menu-stack[data-open="true"] .menu-pill__items { display: flex; }
    .menu-stack[data-open="true"] .menu-pill__toggle { color: var(--accent); }
    .menu-pill__item:hover { background: rgba(244,239,227,0.12); }

    .menu-pill__label {
      position: absolute;
      right: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
      background: rgba(244,239,227,0.1);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 0.5px solid rgba(244,239,227,0.2);
      border-radius: 999px;
      padding: 8px 16px;
      color: var(--ink);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
    }
    .menu-pill__item:hover .menu-pill__label { opacity: 1; }

    .kill-toggle {
      background: rgba(244,239,227,0.08);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 0.5px solid rgba(244,239,227,0.18);
      border-radius: 999px;
      width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      color: var(--ink-muted);
      transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
    }
    .kill-toggle:hover { color: var(--ink); }
    .kill-toggle[data-pulsing="true"] {
      border-color: var(--accent);
      color: var(--accent);
      animation: kill-pulse 1.6s ease-in-out infinite;
    }
    body.no-anim .kill-toggle { background: var(--accent); color: var(--bg); border-color: var(--accent); }

    /* ============================================================
       CUSTOM CURSOR + NUDGE BUBBLE (fine-pointer devices only)
       ============================================================ */
    .cursor-ring {
      position: fixed;
      top: 0; left: 0;
      width: 22px; height: 22px;
      margin-left: -11px; margin-top: -11px;
      border: 1.5px solid var(--accent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 200;
      mix-blend-mode: difference;
      will-change: transform;
    }
    .nudge {
      position: fixed;
      top: 0; left: 0;
      background: rgba(244,239,227,0.1);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 0.5px solid rgba(244,239,227,0.22);
      border-radius: 16px;
      padding: 9px 16px;
      color: var(--ink);
      font-family: var(--serif);
      font-style: italic;
      font-size: 13px;
      line-height: 1.3;
      pointer-events: none;
      opacity: 0;
      z-index: 199;
      max-width: 260px;
      transition: opacity 300ms ease;
      will-change: transform, opacity;
    }
    .nudge.is-on { opacity: 1; }
    .nudge__action {
      color: var(--accent);
      font-style: normal;
      font-family: var(--body);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-left: 6px;
    }

    /* ============================================================
       TOOL DETAIL CARD — opens on tile click. Backdrop dims the page,
       card sits centered with provider link, rating stars, and the
       editorial opinion as body copy.
       ============================================================ */
    .tool-card-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 149;
      opacity: 0;
      pointer-events: none;
      transition: opacity 240ms ease;
    }
    .tool-card-backdrop.is-on {
      opacity: 1;
      pointer-events: auto;
    }
    .tool-card {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.96);
      z-index: 150;
      width: 280px;
      max-width: calc(100vw - 32px);
      background: var(--bg-alt);
      border: 1px solid var(--rule);
      border-radius: 14px;
      padding: 22px 22px 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
      opacity: 0;
      pointer-events: none;
      transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
    }
    .tool-card.is-on {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
    }
    .tool-card__close {
      position: absolute;
      top: 8px; right: 8px;
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      color: var(--ink-soft);
      transition: color 180ms ease, background 180ms ease;
    }
    .tool-card__close:hover { color: var(--ink); background: rgba(244,239,227,0.08); }
    .tool-card__close .ti { font-size: 16px; }
    .tool-card__row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
    }
    .tool-card__row:last-of-type { margin-bottom: 0; }
    .tool-card__label {
      color: var(--accent);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 500;
      flex-shrink: 0;
      min-width: 68px;
    }
    .tool-card__value {
      color: var(--ink);
      font-size: 14px;
      font-weight: 500;
    }
    .tool-card__value--link {
      border-bottom: 1px solid var(--ink-faint);
      transition: color 180ms ease, border-color 180ms ease;
    }
    .tool-card__value--link:hover {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }
    .tool-card__stars {
      color: var(--accent);
      letter-spacing: 2px;
      font-size: 15px;
      line-height: 1;
    }
    .tool-card__stars-empty {
      color: var(--ink-faint);
    }
    .tool-card__body {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--rule);
      color: var(--ink-muted);
      font-family: var(--serif);
      font-style: italic;
      font-size: 13.5px;
      line-height: 1.55;
    }
    .tool-card__tags {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .tool-card__tag {
      display: inline-block;
      font-size: 10px;
      letter-spacing: 0.04em;
      padding: 3px 9px;
      border-radius: 999px;
      font-weight: 700;
      white-space: nowrap;
    }
    /* 10-color tag palette — backgrounds at -30L from original pastels, text at
       -15L from original companions to claw back contrast without going monochrome. */
    .tag-c1  { background: #6744eb; color: #2a2146; }
    .tag-c2  { background: #459ce2; color: #1d3449; }
    .tag-c3  { background: #4fcf82; color: #173522; }
    .tag-c4  { background: #da8448; color: #43271a; }
    .tag-c5  { background: #df5286; color: #441d2d; }
    .tag-c6  { background: #e1c13f; color: #3f361b; }
    .tag-c7  { background: #7e7ea3; color: #23232e; }
    .tag-c8  { background: #b65cca; color: #3d1e49; }
    .tag-c9  { background: #52b4ce; color: #1c333c; }
    .tag-c10 { background: #91c359; color: #273518; }

    /* ============================================================
       FREEZE-FRAME HINT — dim the page, dim the menu pill, glow the
       kill toggle, and draw a curved arrow from cursor to button.
       ============================================================ */
    .dim-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg);
      opacity: 0;
      pointer-events: none;
      z-index: 95;
      transition: opacity 320ms ease;
    }
    /* heavy dim — the page contrast is crisp by default, so a subtle dim doesn't
       register; this is meant to be felt, not glanced past */
    .dim-overlay.is-on {
      opacity: 0.8;
      pointer-events: auto; /* swallow body-area clicks during the freeze */
    }

    /* During the freeze beat, pause CSS animations everywhere so the page
       genuinely stops moving. The kill toggle keeps pulsing so it's the
       single thing alive on screen. */
    body.is-frozen *,
    body.is-frozen *::before,
    body.is-frozen *::after {
      animation-play-state: paused !important;
    }
    body.is-frozen .kill-toggle,
    body.is-frozen .kill-toggle::before,
    body.is-frozen .kill-toggle::after {
      animation-play-state: running !important;
    }
    /* During freeze: fill the cursor ring with the page bg to cap the arrow's
       tail cleanly, drop the difference-blend so the fill stays solid, and
       thicken the border to match the 2px arrow stroke. */
    body.is-frozen .cursor-ring {
      background: var(--bg);
      border-width: 2px;
      mix-blend-mode: normal;
    }

    .hint-arrow {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      pointer-events: none;
      z-index: 96;
      opacity: 0;
      transition: opacity 240ms ease;
    }
    .hint-arrow.is-on { opacity: 1; }
    .hint-arrow__line {
      fill: none;
      stroke: var(--accent);
      stroke-width: 2;
      stroke-linecap: round;
      filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.5));
    }
    .hint-arrow__head {
      fill: var(--accent);
      opacity: 0;
      transition: opacity 240ms ease;
      filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.5));
    }
    .hint-arrow.is-on .hint-arrow__head {
      opacity: 1;
      transition-delay: 600ms; /* fade in once line is mostly drawn */
    }

    /* Menu pill dims while the freeze-frame is up; kill toggle stays vibrant. */
    .menu-pill { transition: filter 320ms ease, opacity 320ms ease; }
    .menu-stack[data-freeze="true"] .menu-pill {
      filter: blur(2px) brightness(0.4);
      opacity: 0.5;
      pointer-events: none;
    }
    .menu-stack[data-freeze="true"] .kill-toggle {
      background: rgba(255, 90, 31, 0.18);
      box-shadow: 0 0 32px rgba(255, 90, 31, 0.45);
    }

    /* hide system cursor on fine-pointer devices once custom cursor is active */
    @media (pointer: fine) {
      body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on .chip, body.cursor-on .tile, body.cursor-on .wip { cursor: none; }
      /* in kill mode the custom cursor ring is hidden, so restore the system cursor
         instead of leaving the user with nothing to point with */
      body.no-anim.cursor-on, body.no-anim.cursor-on a, body.no-anim.cursor-on button, body.no-anim.cursor-on .chip, body.no-anim.cursor-on .tile, body.no-anim.cursor-on .wip { cursor: auto; }
    }
    @media (pointer: coarse) {
      .cursor-ring, .nudge { display: none !important; }
    }

    /* ============================================================
       KEYFRAMES
       ============================================================ */
    @keyframes live-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.55; transform: scale(0.85); }
    }
    @keyframes kill-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); transform: scale(1); }
      50%      { box-shadow: 0 0 0 14px rgba(255,90,31,0.18); transform: scale(1.08); }
    }
    @keyframes bob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(3px); }
    }

    /* respect reduced motion + manual kill mode */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      .cursor-ring, .nudge { display: none; }
    }
    body.no-anim *, body.no-anim *::before, body.no-anim *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    body.no-anim .nudge { display: none; }
    body.no-anim .cursor-ring { display: none; }

    /* mobile tweaks */
    @media (max-width: 640px) {
      .hero__chrome, .scroll-cue, .hero__date { font-size: 10px; }
      .hero__lockup { padding: 0 5vw; }
      .menu-stack { top: 16px; right: 16px; gap: 10px; }
      .menu-pill, .menu-pill__toggle, .menu-pill__item, .kill-toggle { width: 42px; }
      .menu-pill__toggle, .menu-pill__item, .kill-toggle { height: 42px; }
    }

    /* ============================================================
       CASE STUDY PAGES (/work/*)
       Descends from the home system — same tokens, type, accent,
       motion. Shared across every case study: edit here once and
       all /work/ pages update.
       ============================================================ */

    /* ---------- masthead ---------- */
    .cs-masthead {
      position: relative;
      padding: clamp(104px, 17vh, 208px) 6vw clamp(40px, 6vw, 72px);
      border-bottom: 0.5px solid var(--rule);
    }
    .cs-eyebrow {
      margin: 0 0 clamp(18px, 2.4vw, 28px);
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 500;
    }
    .cs-title {
      margin: 0;
      max-width: 16ch;
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(40px, 7vw, 104px);
      line-height: 0.92;
      letter-spacing: -0.03em;
      color: var(--ink);
    }
    .cs-title em { font-family: var(--serif); font-style: italic; color: var(--accent); }
    .cs-deck {
      margin: clamp(20px, 2.4vw, 30px) 0 0;
      max-width: 54ch;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(16px, 1.5vw, 22px);
      line-height: 1.5;
      color: var(--ink-muted);
    }

    /* ---------- meta block (Role / Timeline / Stack / Team / Outcome) ---------- */
    .cs-meta {
      margin: clamp(36px, 5vw, 64px) 0 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 1px;
      background: var(--rule);
      border: 0.5px solid var(--rule);
      border-radius: 14px;
      overflow: hidden;
    }
    .cs-meta__item { background: var(--bg); padding: 18px 20px; }
    .cs-meta__label {
      display: block;
      margin-bottom: 7px;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 500;
    }
    .cs-meta__value { font-size: 14px; color: var(--ink); line-height: 1.5; }

    /* ---------- body ---------- */
    .cs-body { padding: clamp(48px, 8vw, 96px) 6vw; }
    .cs-section { max-width: 640px; margin: 0 auto clamp(48px, 7vw, 88px); }
    .cs-section:last-child { margin-bottom: 0; }
    .cs-section__head {
      display: flex; align-items: center; gap: 18px;
      margin-bottom: clamp(14px, 1.8vw, 22px);
    }
    .cs-section__num {
      font-family: var(--display);
      font-size: 13px;
      letter-spacing: 0.1em;
      color: var(--accent);
    }
    .cs-section__rule { flex: 1; height: 0.5px; background: var(--rule); }
    .cs-h2 {
      margin: 0 0 18px;
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(26px, 3.2vw, 44px);
      line-height: 1.02;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .cs-h2 em { font-family: var(--serif); font-style: italic; color: var(--accent); }
    .cs-lead {
      margin: 0 0 18px;
      font-size: clamp(17px, 1.4vw, 21px);
      line-height: 1.5;
      color: var(--ink);
      font-weight: 500;
    }
    .cs-section p {
      margin: 0 0 16px;
      color: var(--ink-muted);
      font-size: clamp(15px, 1.1vw, 17px);
      line-height: 1.75;
    }
    .cs-section p a {
      color: var(--ink);
      border-bottom: 1px solid var(--accent);
      transition: color 180ms ease;
    }
    .cs-section p a:hover { color: var(--accent); }
    .cs-section strong { color: var(--ink); font-weight: 600; }
    .cs-section em { font-family: var(--serif); font-style: italic; }

    /* ---------- image placeholders (real images supplied later) ---------- */
    .cs-figure { margin: clamp(28px, 4vw, 44px) 0; }
    .cs-figure__ph {
      position: relative;
      aspect-ratio: 16 / 9;
      border: 1px dashed var(--ink-faint);
      border-radius: 14px;
      background: repeating-linear-gradient(45deg, rgba(244,239,227,0.02) 0 12px, rgba(244,239,227,0.045) 12px 24px);
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--ink-soft);
      padding: 24px;
    }
    .cs-figure__ph .ti { font-size: 30px; color: var(--ink-faint); display: block; margin-bottom: 10px; }
    .cs-figure__phlabel { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; }
    .cs-figure__cap {
      margin-top: 10px;
      font-family: var(--serif);
      font-style: italic;
      font-size: 13px;
      color: var(--ink-soft);
      line-height: 1.45;
    }
    .cs-figure--hero { max-width: 880px; margin: clamp(36px, 5vw, 56px) auto 0; }
    .cs-figure--hero .cs-figure__ph { aspect-ratio: 21 / 9; }
    /* real images (placeholders swapped out): responsive, rounded, faint edge */
    .cs-figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 0.5px solid var(--rule); }
    /* logo marks: small, no frame */
    .cs-figure--logo { max-width: 168px; }
    .cs-figure--logo img { border: none; border-radius: 0; }

    /* ---------- aside / sidebar note ---------- */
    .cs-aside {
      margin: clamp(28px, 4vw, 40px) 0;
      padding: 22px 24px;
      border: 0.5px solid var(--rule);
      border-left: 3px solid var(--accent);
      border-radius: 12px;
      background: var(--bg-alt);
    }
    .cs-aside__label {
      display: block;
      margin-bottom: 8px;
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 500;
    }
    .cs-aside p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }
    .cs-aside p + p { margin-top: 12px; }

    /* ---------- footer / back-link ---------- */
    .cs-foot {
      border-top: 0.5px solid var(--rule);
      padding: clamp(40px, 6vw, 72px) 6vw;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 20px;
    }
    .cs-back {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--accent); font-weight: 500;
    }
    .cs-back .ti { font-size: 16px; }
    .cs-back:hover { color: var(--ink); }
    .cs-masthead .cs-back { margin-bottom: clamp(22px, 3vw, 34px); }
    .cs-foot__meta { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }

    @media (max-width: 640px) {
      .cs-meta { grid-template-columns: 1fr; }
      .cs-section__head { gap: 12px; }
    }

    /* Polish: even headline line-breaks + fewer prose orphans (home + case studies) */
    .cs-title, .cs-h2, .article__title, .about__name { text-wrap: balance; }
    .cs-section p, .article p { text-wrap: pretty; }

    /* case-study bullet lists (e.g. a loose narrative arc) */
    .cs-section ul { margin: 0 0 16px; padding-left: 1.1em; }
    .cs-section li { margin: 0 0 9px; color: var(--ink-muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }
    .cs-section li::marker { color: var(--accent); }