/* =====================================================================
     CONCEPT — "the system design document"
     Not an ops console: a drafting surface. The hero runs a schematic of a
     partitioned dataflow — volume in, chunked, fanned across parallel lanes,
     merged, landed — and absorbs a lost lane without dropping work.
     Ink on bone paper, one vermilion accent, serif headings. The career is
     still a trace, because that is the honest shape of it.
     ===================================================================== */

  /* ============ TOKENS ============ */
  :root{
    --font-display:'Instrument Serif', Georgia, serif;
    --font-body:'IBM Plex Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;

    --sp-1:.4rem;  --sp-2:.8rem;  --sp-3:1.2rem; --sp-4:1.6rem;
    --sp-5:2.4rem; --sp-6:3.2rem; --sp-7:4.8rem; --sp-8:7rem;

    --max:1080px;
    --rail:calc((100vw - var(--max)) / 2);

    /* dark (default) — ink, drafting table at night */
    --bg:#0c0d10;
    --bg-1:#131418;
    --bg-2:#191b20;
    --fg:#ece8e1;          /* warm off-white, not blue-white */
    --muted:#8b867e;
    --dim:#5d5952;
    --line:#22242a;
    --line-2:#323439;
    --accent:#ff5b2e;      /* vermilion — annotation ink */
    --accent-ink:#0c0d10;
    --accent-soft:rgba(255,91,46,.11);
    --warn:#e0913c;
    --good:#6fbf8a;
    --glow:0 0 0 1px rgba(255,91,46,.16), 0 24px 60px -34px rgba(255,91,46,.4);
    --shadow:0 24px 60px -40px rgba(0,0,0,.9);
  }

  html[data-theme="light"]{
    --bg:#f2efe8;          /* bone paper */
    --bg-1:#fffdf9;
    --bg-2:#eae6dd;
    --fg:#17181c;
    --muted:#5f5c56;
    --dim:#918d85;
    --line:#e2ddd2;
    --line-2:#cdc7ba;
    --accent:#d8431a;
    --accent-ink:#fffdf9;
    --accent-soft:rgba(216,67,26,.09);
    --warn:#a86518;
    --good:#2e7d52;
    --glow:0 0 0 1px rgba(216,67,26,.18), 0 24px 60px -34px rgba(216,67,26,.3);
    --shadow:0 24px 60px -44px rgba(60,45,30,.3);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }

  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background .3s ease, color .3s ease;
  }

  a{color:inherit;}
  ul{margin:0; padding:0; list-style:none;}
  p{margin:0;}
  button{font-family:inherit; cursor:pointer;}

  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--sp-5);}
  @media (max-width:640px){ .wrap{padding:0 var(--sp-4);} }

  .mono{font-family:var(--font-mono);}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--dim);
    display:flex; align-items:center; gap:var(--sp-2);
  }
  .eyebrow::before{
    content:""; width:5px; height:5px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
    flex-shrink:0;
  }

  /* ============ TOP BAR ============ */
  .bar{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-5);
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
  }
  @media (max-width:640px){ .bar{ padding:var(--sp-3) var(--sp-4); } }

  .bar-left{
    display:flex; align-items:center; gap:var(--sp-2);
    font-family:var(--font-mono); font-size:.74rem; color:var(--muted);
    letter-spacing:.02em; min-width:0;
  }
  .bar-left .sep{ color:var(--line-2); }
  @media (max-width:520px){ .bar-left .sep, .bar-left .hide-xs{ display:none; } }

  .status-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--good);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent);
    flex-shrink:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .status-dot{animation:pulse 2.8s ease-in-out infinite;}
  }
  @keyframes pulse{
    0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent);}
    50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--good) 0%, transparent);}
  }

  .bar-right{display:flex; align-items:center; gap:var(--sp-3);}
  .bar-nav{display:flex; align-items:center; gap:var(--sp-4);}
  .bar-nav a{
    font-family:var(--font-mono); font-size:.76rem; text-decoration:none;
    color:var(--muted); transition:color .15s ease; position:relative; padding-bottom:2px;
  }
  .bar-nav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--accent); transition:right .22s ease;
  }
  /* Two entries carry the accent: what is being built, and the thing you can
     operate. Everything else in this bar is a record of finished work, so the
     pair reads as "what is live right now" rather than as decoration. */
  .bar-nav a.nav-hot{ color:var(--accent); }
  .bar-nav a.nav-hot:hover{ color:var(--accent); }
  /* the lab additionally leaves the page, which the dot marks */
  .bar-nav a.nav-lab{ display:inline-flex; align-items:center; gap:.4rem; }
  .bar-nav a.nav-lab i{
    width:5px; height:5px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
    flex:none;
  }

  .bar-nav a:hover{color:var(--fg);}
  .bar-nav a:hover::after{ right:0; }
  @media (max-width:820px){ .bar-nav{ display:none; } }

  .icon-btn{
    width:34px; height:34px;
    border:1px solid var(--line-2);
    background:var(--bg-1);
    display:flex; align-items:center; justify-content:center;
    color:var(--fg); border-radius:3px;
    transition:border-color .15s ease, color .15s ease, transform .15s ease;
    flex-shrink:0;
  }
  .icon-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px);}
  .icon-btn svg{width:16px; height:16px;}
  .theme-toggle .moon{display:none;}
  html[data-theme="light"] .theme-toggle .sun{display:none;}
  html[data-theme="light"] .theme-toggle .moon{display:block;}
  .menu-toggle{display:none;}
  .menu-toggle .icon-close{display:none;}
  .menu-toggle[aria-expanded="true"] .icon-burger{display:none;}
  .menu-toggle[aria-expanded="true"] .icon-close{display:block;}
  @media (max-width:820px){ .menu-toggle{display:flex;} }

  .mobile-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column;
    background:var(--bg-1);
    border-bottom:1px solid var(--line-2);
    box-shadow:var(--shadow);
  }
  .mobile-nav.open{ display:flex; }
  .mobile-nav a{
    font-family:var(--font-mono); font-size:.9rem; color:var(--fg);
    text-decoration:none; padding:var(--sp-3) var(--sp-5);
    border-top:1px solid var(--line);
    display:flex; align-items:center; gap:var(--sp-3);
  }
  .mobile-nav a:first-child{ border-top:none; }
  .mobile-nav a span{ color:var(--dim); font-size:.72rem; }
  .mobile-nav a:hover{ color:var(--accent); }
  .mobile-nav a.nav-hot{ color:var(--accent); }
  .mobile-nav a.nav-hot span{ color:var(--accent); opacity:.75; }
  @media (min-width:821px){ .mobile-nav{ display:none !important; } }

  /* ============ SIDE RAIL (scroll-spy) ============ */
  .siderail{
    position:fixed; left:max(var(--sp-4), calc(var(--rail) - 5.5rem));
    top:50%; transform:translateY(-50%);
    z-index:40; display:none; flex-direction:column; gap:var(--sp-3);
  }
  @media (min-width:1240px){ .siderail{ display:flex; } }
  .siderail::before{
    content:""; position:absolute; left:3px; top:-14px; bottom:-14px;
    width:1px; background:linear-gradient(to bottom, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent);
  }
  .siderail a{
    position:relative; display:flex; align-items:center; gap:.65rem;
    text-decoration:none; font-family:var(--font-mono); font-size:.66rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
    transition:color .2s ease;
  }
  .siderail .knob{
    width:7px; height:7px; border-radius:50%;
    background:var(--bg); border:1px solid var(--line-2);
    flex-shrink:0; transition:all .25s ease;
  }
  .siderail a:hover{ color:var(--muted); }
  .siderail a.active{ color:var(--accent); }
  .siderail a.active .knob{
    background:var(--accent); border-color:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft);
  }

  /* ============ HERO ============ */
  .hero{ padding:var(--sp-8) 0 var(--sp-6); }
  @media (max-width:640px){ .hero{ padding:var(--sp-7) 0 var(--sp-6); } }

  .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:var(--sp-6); align-items:center;
  }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); } }

  .hero-name{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(3.4rem, 10.5vw, 7rem);
    line-height:.9; letter-spacing:-.018em;
    margin:var(--sp-3) 0 0;
  }
  .hero-name .dot{ color:var(--accent); }
  .hero-thesis{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.35rem, 2.5vw, 1.85rem);
    line-height:1.3; max-width:30ch; margin-top:var(--sp-4);
    letter-spacing:-.005em;
  }
  .hero-thesis em{ font-style:italic; color:var(--accent); }

  /* the technical facts sit quietly under the statement, not beside it */
  .hero-meta{
    display:flex; flex-direction:column; gap:.4rem;
    margin-top:var(--sp-5);
    font-family:var(--font-mono); font-size:.75rem; color:var(--dim);
    letter-spacing:.01em;
  }
  .hero-meta-role{ color:var(--muted); }

  /* points at the in-progress work without spending the top of the page on it */
  /* A single max-content column: both pills take the width of the wider one,
     so they read as a pair rather than as two unrelated tags. The arrow is
     pushed to the trailing edge so the extra width looks deliberate. */
  .hero-cta{
    display:grid; grid-template-columns:minmax(0, max-content);
    gap:var(--sp-2); margin-top:var(--sp-4);
  }
  .hero-cta > a{ justify-content:flex-start; }
  .hero-cta > a .arrow{ margin-left:auto; padding-left:var(--sp-2); }
  .hero-wip{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em;
    color:var(--accent); text-decoration:none;
    border:1px dashed color-mix(in srgb, var(--accent) 42%, transparent);
    background:var(--accent-soft);
    border-radius:2px; padding:.45em .75em;
    transition:border-color .18s ease, transform .18s ease;
  }
  .hero-wip:hover{ border-color:var(--accent); transform:translateY(-1px); }
  .hero-wip .live{
    width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .hero-wip .live{ animation:pulse-wip 2.4s ease-in-out infinite; }
  }
  @keyframes pulse-wip{
    0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    60%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  .hero-wip .arrow{ transition:transform .18s ease; }
  .hero-wip:hover .arrow{ transform:translateY(2px); }

  /* Its neighbour is dashed and hollow because it points at work in progress.
     This one is filled: it is the only thing on the first screen that a
     visitor can actually operate, and the only place a solid accent block is
     worth spending on the whole page. */
  .hero-lab{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em;
    color:var(--accent-ink); text-decoration:none;
    background:var(--accent); border:1px solid var(--accent);
    border-radius:2px; padding:.45em .75em;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .hero-lab:hover{ transform:translateY(-1px); box-shadow:var(--glow); }
  .hero-lab .live{
    width:5px; height:5px; border-radius:50%;
    background:var(--accent-ink); opacity:.85; flex-shrink:0;
  }
  .hero-lab .arrow{ transition:transform .18s ease; }
  .hero-lab:hover .arrow{ transform:translate(2px,-2px); }

  /* --- the dataflow schematic: a drawn figure, not a status console --- */
  .flow{
    position:relative;
    border:1px solid var(--line-2);
    background:var(--bg-1);
    overflow:hidden;
  }
  .flow-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2);
    padding:.6rem .85rem;
    border-bottom:1px solid var(--line);
    font-family:var(--font-mono); font-size:.66rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
  .flow-scale{ color:var(--dim); letter-spacing:.16em; }
  .flow-canvas{ display:block; width:100%; height:310px; }
  @media (max-width:900px){ .flow-canvas{ height:265px; } }
  @media (max-width:480px){ .flow-canvas{ height:225px; } }
  .flow-foot{
    display:flex; align-items:center; gap:var(--sp-2);
    padding:.65rem .85rem;
    border-top:1px solid var(--line);
    font-family:var(--font-mono); font-size:.68rem; color:var(--muted);
    min-height:2.3rem;
  }
  /* The one way out of the figure: the same simulation with the controls
     unlocked. Pushed to the right so it never competes with the caption. */
  .flow-play{
    margin-left:auto; white-space:nowrap;
    color:var(--accent); text-decoration:none;
    border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    transition:border-color .15s ease;
  }
  .flow-play:hover{ border-color:var(--accent); }
  .flow-play .arrow{ display:inline-block; transition:transform .18s ease; }
  .flow-play:hover .arrow{ transform:translate(2px,-2px); }
  @media (max-width:420px){ .flow-play{ font-size:.64rem; } }

  .flow-foot .flow-mark{
    width:7px; height:7px; flex-shrink:0;
    border:1px solid var(--accent); background:var(--accent);
    transition:background .3s ease, transform .3s ease;
  }
  .flow-foot.rerouting .flow-mark{ background:transparent; transform:rotate(45deg); }
  .flow-foot.rerouting #flowMsg{ color:var(--accent); }

  /* ============ SECTION SHELL ============ */
  .section{ padding:var(--sp-7) 0; border-top:1px solid var(--line); position:relative; }
  .section-head{
    margin-bottom:var(--sp-5);
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:var(--sp-4); flex-wrap:wrap;
  }
  .section-title{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.8rem, 3.6vw, 2.6rem);
    letter-spacing:-.012em; margin:var(--sp-1) 0 0;
  }
  .section-note{
    font-family:var(--font-mono); font-size:.7rem; color:var(--dim);
    letter-spacing:.04em; text-align:right;
  }

  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
  .reveal.in-view{ opacity:1; transform:none; }

  /* ============ TRACE (work experience) ============ */
  .trace-axis{
    display:none;
    position:relative; height:1.5rem; margin-bottom:.4rem;
    border-bottom:1px solid var(--line);
    font-family:var(--font-mono); font-size:.62rem; color:var(--dim);
  }
  @media (min-width:820px){ .trace-axis{ display:block; } }
  .trace-axis i{
    position:absolute; bottom:0; transform:translateX(-50%);
    padding-bottom:.3rem; font-style:normal; white-space:nowrap;
  }
  .trace-axis i::after{
    content:""; position:absolute; left:50%; bottom:-1px; width:1px; height:5px;
    background:var(--line-2);
  }
  .trace-axis i.edge-start{ transform:none; }
  .trace-axis i.edge-start::after{ left:0; }
  .trace-axis i.edge-end{ transform:translateX(-100%); color:var(--accent); }
  .trace-axis i.edge-end::after{ left:auto; right:0; }

  .trace{ display:flex; flex-direction:column; }

  .span{
    border:1px solid var(--line);
    border-radius:3px;
    background:color-mix(in srgb, var(--bg-1) 70%, transparent);
    margin-top:.5rem;
    transition:border-color .2s ease, background .2s ease;
  }
  .span:first-child{ margin-top:0; }
  .span:hover{ border-color:var(--line-2); }
  .span[open]{ background:var(--bg-1); border-color:var(--line-2); }

  .span > summary{
    list-style:none; cursor:pointer;
    display:grid; align-items:center;
    grid-template-columns:8.5rem minmax(0,1fr) minmax(150px, 21rem) 4.2rem 1.2rem;
    gap:var(--sp-4);
    padding:var(--sp-3) var(--sp-4);
  }
  .span > summary::-webkit-details-marker{ display:none; }

  .span-time{
    font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
    letter-spacing:.04em; white-space:nowrap;
  }
  .span[open] .span-time{ color:var(--accent); }
  .span-title{ min-width:0; }
  .span-title b{ font-weight:600; font-size:1rem; letter-spacing:-.005em; }
  .span-title i{
    display:block; font-style:normal; font-size:.82rem; color:var(--muted);
    font-family:var(--font-mono); margin-top:.1rem;
  }
  .span-track{
    position:relative; height:6px; border-radius:3px;
    background:linear-gradient(to right, var(--line) 0 100%);
    overflow:hidden;
  }
  .span-bar{
    position:absolute; top:0; bottom:0; left:0; width:0;
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
    border-radius:3px;
    transition:transform .2s ease;
  }
  .span-bar.live::after{
    content:""; position:absolute; right:0; top:0; bottom:0; width:6px;
    background:var(--accent);
  }
  @media (prefers-reduced-motion: no-preference){
    .span-bar.live::after{ animation:blink 1.8s steps(1) infinite; }
  }
  @keyframes blink{ 0%,60%{opacity:1;} 61%,100%{opacity:.25;} }
  .span-dur{
    font-family:var(--font-mono); font-size:.72rem; color:var(--dim);
    text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .span-chev{
    font-family:var(--font-mono); font-size:.7rem; color:var(--dim);
    transition:transform .25s ease; justify-self:end;
  }
  .span[open] .span-chev{ transform:rotate(180deg); color:var(--accent); }

  @media (max-width:819px){
    .span > summary{
      grid-template-columns:1fr auto;
      grid-template-areas:
        "time chev"
        "title title"
        "track track";
      gap:.5rem var(--sp-3);
      padding:var(--sp-3);
    }
    .span-time{ grid-area:time; }
    .span-chev{ grid-area:chev; }
    .span-title{ grid-area:title; }
    .span-track{ grid-area:track; margin-top:.35rem; }
    .span-dur{ display:none; }
  }

  .span-body{
    padding:0 var(--sp-4) var(--sp-4);
    border-top:1px solid var(--line);
  }
  @media (max-width:819px){ .span-body{ padding:0 var(--sp-3) var(--sp-3); } }
  .span-note{
    font-size:.86rem; color:var(--muted);
    margin:var(--sp-3) 0 0;
    padding:var(--sp-2) var(--sp-3);
    border-left:2px solid var(--accent);
    background:var(--accent-soft);
    border-radius:0 3px 3px 0;
  }
  .span-note strong{ color:var(--fg); }
  .span-body ul{ display:flex; flex-direction:column; gap:var(--sp-3); padding-top:var(--sp-4); }
  .span-body li{
    font-size:.93rem; padding-left:1.5rem; position:relative; color:color-mix(in srgb, var(--fg) 88%, transparent);
  }
  .span-body li::before{
    content:""; position:absolute; left:0; top:.62em;
    width:.65rem; height:1px; background:var(--line-2);
  }
  .stat{
    font-family:var(--font-mono); font-weight:500; color:var(--accent);
    background:var(--accent-soft); padding:.05em .35em; border-radius:2px;
    white-space:nowrap;
  }

  /* --- CHAIN: two roles, one continuous run (the acquisition) --- */
  .chain{
    position:relative;
    border:1px solid var(--line-2);
    border-radius:3px;
    background:linear-gradient(to bottom, var(--accent-soft), transparent 150px), var(--bg-1);
    margin-bottom:.5rem;
    padding:0 0 var(--sp-2);
  }
  .chain-head{
    display:grid; align-items:center;
    grid-template-columns:8.5rem minmax(0,1fr) minmax(150px, 21rem) 4.2rem 1.2rem;
    gap:var(--sp-4);
    padding:var(--sp-3) var(--sp-4) var(--sp-3);
    border-bottom:1px solid var(--line);
  }
  .chain-time{
    font-family:var(--font-mono); font-size:.72rem; color:var(--accent);
    letter-spacing:.04em; white-space:nowrap;
  }
  .chain-label{ min-width:0; font-size:.94rem; font-weight:600; letter-spacing:-.005em; }
  .chain-label i{
    display:block; font-style:normal; font-family:var(--font-mono);
    font-size:.7rem; color:var(--muted); font-weight:400; margin-top:.1rem;
    letter-spacing:.02em;
  }
  .chain-label .arrow{ color:var(--accent); font-weight:400; }
  .chain-track{
    position:relative; height:8px; border-radius:4px; background:var(--line);
  }
  .chain-seg{
    position:absolute; top:0; bottom:0; border-radius:4px;
  }
  .chain-seg.pre{
    background:repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--accent) 42%, transparent) 0 3px,
      color-mix(in srgb, var(--accent) 18%, transparent) 3px 6px);
  }
  .chain-seg.post{ background:var(--accent); }
  .chain-marker{
    position:absolute; top:50%; width:11px; height:11px;
    transform:translate(-50%,-50%) rotate(45deg);
    background:var(--bg-1); border:1.5px solid var(--accent);
    box-shadow:0 0 0 3px var(--bg-1);
  }
  .chain-dur{
    font-family:var(--font-mono); font-size:.72rem; color:var(--accent);
    text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .chain-badge{
    font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent);
    border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius:2px; padding:.15em .45em; white-space:nowrap;
    background:var(--accent-soft); vertical-align:.12em; margin-left:.35rem;
  }
  @media (max-width:819px){
    .chain-head{
      grid-template-columns:1fr auto;
      grid-template-areas:"time dur" "label label" "track track";
      gap:.5rem var(--sp-3); padding:var(--sp-3);
    }
    .chain-time{ grid-area:time; }
    .chain-label{ grid-area:label; }
    .chain-track{ grid-area:track; margin-top:.35rem; }
    .chain-dur{ grid-area:dur; }
  }

  /* the continuity spine running through both roles */
  .chain-body{ position:relative; padding:var(--sp-2) var(--sp-3) 0 var(--sp-4); }
  @media (max-width:819px){ .chain-body{ padding:var(--sp-2) var(--sp-2) 0 var(--sp-3); } }
  .chain-body::before{
    content:""; position:absolute; left:calc(var(--sp-4) - 1px); top:0; bottom:var(--sp-2);
    width:1px;
    background:linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  }
  @media (max-width:819px){ .chain-body::before{ left:calc(var(--sp-3) - 3px); } }
  /* the chain's own bar is the timeline for both roles — child bars would be
     redundant, and indenting them would skew them against the axis */
  .chain-body .span-track{ visibility:hidden; }
  .chain-body > .span{ margin-left:var(--sp-4); border-color:var(--line); }
  @media (max-width:819px){ .chain-body > .span{ margin-left:var(--sp-3); } }
  .chain-body > .span:first-child{ margin-top:0; }

  .chain-event{
    position:relative;
    margin:.5rem 0 .5rem var(--sp-4);
    padding:var(--sp-3) var(--sp-4);
    border:1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius:3px;
    background:var(--bg-2);
    font-size:.86rem; color:var(--muted);
  }
  @media (max-width:819px){ .chain-event{ margin-left:var(--sp-3); padding:var(--sp-3); } }
  .chain-event::before{
    content:""; position:absolute; left:calc(var(--sp-4) * -1 - 1px); top:50%;
    width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg);
    background:var(--accent); box-shadow:0 0 0 3px var(--bg-1);
  }
  @media (max-width:819px){ .chain-event::before{ left:calc(var(--sp-3) * -1 + 2px); } }
  .chain-event b{
    display:block; font-family:var(--font-mono); font-size:.66rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
    margin-bottom:.3rem; font-weight:500;
  }
  .chain-event strong{ color:var(--fg); }

  .tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--sp-4); }
  .tags span{
    font-family:var(--font-mono); font-size:.68rem; color:var(--muted);
    border:1px solid var(--line); border-radius:2px;
    padding:.24em .55em; background:var(--bg-2);
    transition:border-color .15s ease, color .15s ease;
  }
  .tags span:hover{ border-color:var(--accent); color:var(--accent); }

  /* ============ FEATURE (my own product) ============
     The cards under this one are client systems: shipped, closed out, done.
     This one is mine and still moving, so it gets the full-width box, a solid
     border rather than the page's dashed "not in play yet" line, and the
     accent bar lit permanently instead of on hover. */
  .feature{
    position:relative; overflow:hidden;
    border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius:3px;
    background:linear-gradient(180deg, var(--accent-soft), transparent 60%), var(--bg-1);
    padding:var(--sp-4);
    margin-bottom:var(--sp-3);
    scroll-margin-top:5rem; /* clears the sticky nav when #intel is jumped to */
  }
  @media (max-width:720px){ .feature{ padding:var(--sp-3); } }
  .feature::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--accent);
  }
  .feature-head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
    font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); margin-bottom:var(--sp-4);
  }
  .feature-status{ display:flex; align-items:center; gap:.4rem; color:var(--accent); }
  .feature-status i{ width:5px; height:5px; border-radius:50%; background:var(--accent); display:block; }
  @media (prefers-reduced-motion:no-preference){
    .feature-status i{ animation:pulse-wip 2.4s ease-in-out infinite; }
  }
  .feature h3{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.6rem, 3vw, 2.15rem);
    margin:0; letter-spacing:-.01em; line-height:1.12;
  }
  .feature-tag{
    display:block; margin-top:.45rem;
    font-family:var(--font-mono); font-size:.68rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  }
  .feature-lead{ font-size:.98rem; margin-top:var(--sp-3); max-width:68ch; }
  .feature-sub{ font-size:.88rem; color:var(--muted); margin-top:var(--sp-2); max-width:64ch; }

  .feature-mods{
    margin-top:var(--sp-4); padding-top:var(--sp-4);
    border-top:1px solid var(--line);
  }
  .feature-k{
    display:flex; align-items:center; gap:.45rem;
    font-family:var(--font-mono); font-size:.62rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  }
  .feature-k i{ width:5px; height:5px; border-radius:50%; background:var(--line-2); display:block; }
  .feature-k.live{ color:var(--good); }
  .feature-k.live i{ background:var(--good); }
  .feature-mods ul{
    list-style:none; margin:var(--sp-2) 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:.4rem;
  }
  .feature-mods li{
    font-family:var(--font-mono); font-size:.7rem; color:var(--muted);
    border:1px solid var(--line); border-radius:2px;
    padding:.24em .55em; background:var(--bg-2);
  }
  .feature-more{ font-size:.85rem; color:var(--muted); margin-top:var(--sp-3); max-width:60ch; }

  .feature-foot{
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
    margin-top:var(--sp-4);
  }
  .feature-note{ font-family:var(--font-mono); font-size:.68rem; color:var(--dim); }

  /* ============ SERVICES (systems built) ============ */
  .services{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-3); }
  @media (max-width:720px){ .services{ grid-template-columns:1fr; } }
  .services .svc:last-child:nth-child(odd){ grid-column:1 / -1; }

  .svc{
    position:relative;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--bg-1);
    padding:var(--sp-4);
    overflow:hidden;
    transition:border-color .25s ease, transform .25s ease;
  }
  .svc::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--accent); opacity:0; transition:opacity .25s ease;
  }
  .svc:hover{ border-color:var(--line-2); transform:translateY(-2px); }
  .svc:hover::before{ opacity:1; }
  .svc-head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
    font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); margin-bottom:var(--sp-3);
  }
  .svc-health{ display:flex; align-items:center; gap:.4rem; color:var(--good); }
  .svc-health i{ width:5px; height:5px; border-radius:50%; background:var(--good); display:block; }
  .svc h3{
    font-family:var(--font-display); font-weight:400; font-size:1.32rem;
    margin:0 0 var(--sp-2); letter-spacing:-.005em; line-height:1.2;
  }
  .svc p{ font-size:.9rem; color:var(--muted); }
  .svc p strong{ color:var(--accent); font-family:var(--font-mono); font-weight:500; }
  .svc .tags{ margin-top:var(--sp-3); }

  /* ============ IN PROGRESS ============
     Dashed borders throughout: on this page dashed means "not in play yet",
     the same language the figure uses for a path that isn't carrying load. */
  .wip{
    display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-5);
    align-items:center;
    border:1px dashed var(--line-2); border-radius:3px;
    background:var(--bg-1); padding:var(--sp-5);
  }
  @media (max-width:820px){
    .wip{ grid-template-columns:1fr; gap:var(--sp-4); padding:var(--sp-4); }
  }
  .wip-chip{
    display:inline-block;
    font-family:var(--font-mono); font-size:.6rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
    border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background:var(--accent-soft);
    border-radius:2px; padding:.2em .5em; margin-bottom:var(--sp-3);
  }
  .wip-lead{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.2rem, 2.2vw, 1.6rem);
    line-height:1.28; letter-spacing:-.005em;
  }
  .wip-sub{ color:var(--muted); font-size:.9rem; margin-top:var(--sp-3); max-width:46ch; }
  .wip-sub strong{ color:var(--accent); font-weight:500; }
  .wip .actions{ margin-top:var(--sp-4); }

  .wip-slots{ display:flex; flex-direction:column; gap:var(--sp-3); }
  .slot{
    border:1px dashed var(--line-2); border-radius:3px;
    background:var(--bg-2); padding:var(--sp-3) var(--sp-4);
  }
  .slot-k{
    display:flex; justify-content:space-between; gap:var(--sp-2);
    font-family:var(--font-mono); font-size:.62rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  }
  .slot-k b{ color:var(--accent); font-weight:400; }
  /* Build progress for a slot whose name is still withheld. The track is the
     page's dashed "not in play yet" line; the fill is solid accent. Move the
     width on .slot-bar i as the build moves. */
  .slot-bar{
    display:block; height:6px; margin:.85rem 0 .1rem;
    border:1px dashed var(--line-2); border-radius:2px;
    background:var(--bg-1); overflow:hidden;
  }
  .slot-bar i{
    display:block; height:100%; width:90%;
    background:repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--accent) 75%, transparent) 0 4px,
      color-mix(in srgb, var(--accent) 45%, transparent) 4px 8px);
  }
  .slot h3{
    font-family:var(--font-display); font-weight:400; font-size:1.2rem;
    margin:.6rem 0 0; letter-spacing:-.005em; line-height:1.2;
  }
  .slot h3 a{
    color:inherit; text-decoration:none;
    border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    transition:color .15s ease, border-color .15s ease;
  }
  .slot h3 a:hover{ color:var(--accent); border-color:var(--accent); }
  .slot-note{ font-family:var(--font-mono); font-size:.68rem; color:var(--dim); margin-top:.55rem; }
  /* The only thing an unnamed product can offer: somewhere to hear about it. */
  .slot-more{
    display:inline-block; margin-top:.7rem;
    font-family:var(--font-mono); font-size:.68rem; color:var(--muted);
    text-decoration:none;
    border-bottom:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    transition:color .15s ease, border-color .15s ease;
  }
  .slot-more:hover{ color:var(--accent); border-color:var(--accent); }

  /* ============ RUNTIME (stack) ============ */
  .runtime{ border:1px solid var(--line); border-radius:3px; background:var(--bg-1); overflow:hidden; }
  .rt-row{
    display:grid; grid-template-columns:9rem 1fr;
    gap:var(--sp-4);
    padding:var(--sp-3) var(--sp-4);
    border-top:1px solid var(--line);
    align-items:baseline;
  }
  .rt-row:first-child{ border-top:none; }
  @media (max-width:640px){
    .rt-row{ grid-template-columns:1fr; gap:.5rem; padding:var(--sp-3); }
  }
  .rt-k{
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim);
  }
  .rt-v{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
  .rt-v span{ font-size:.92rem; position:relative; padding-left:.85rem; }
  .rt-v span::before{
    content:""; position:absolute; left:0; top:.62em;
    width:4px; height:4px; border-radius:50%;
    background:var(--line-2); transition:background .2s ease;
  }
  .rt-row:hover .rt-v span::before{ background:var(--accent); }

  /* ============ ORIGIN (education) ============ */
  .origin{
    border:1px solid var(--line); border-radius:3px; background:var(--bg-1);
    padding:var(--sp-5);
    display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  }
  @media (max-width:640px){ .origin{ padding:var(--sp-4); } }
  .origin h3{ font-family:var(--font-display); font-weight:400; font-size:1.55rem; margin:0 0 .3rem; letter-spacing:-.005em; }
  .origin-sub{ color:var(--muted); font-size:.9rem; max-width:36ch; }
  .origin-side{ min-width:200px; }
  .origin-side .rt-k{ display:block; }
  .origin-side .tags{ margin-top:var(--sp-2); }
  .origin-line{
    margin-top:var(--sp-3);
    font-family:var(--font-mono); font-size:.74rem; color:var(--dim);
    display:flex; align-items:center; gap:var(--sp-2);
  }
  .origin-line::before{ content:"└─"; color:var(--line-2); }

  /* ============ INGRESS (contact) ============ */
  .ingress-title{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(2.1rem, 5.4vw, 3.5rem);
    line-height:1.04; letter-spacing:-.015em; max-width:17ch;
  }
  .ingress-title em{ font-style:italic; color:var(--accent); }
  .ingress-sub{ color:var(--muted); margin-top:var(--sp-3); max-width:46ch; }

  /* Desktop puts the lede beside the mailbox so the right column carries
     weight; mobile collapses to one column in DOM order, which is already
     the reading order (lede → mailbox → details). */
  .ingress-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    grid-template-areas:
      "mail lede"
      "mail side";
    gap:var(--sp-4) var(--sp-5);
    align-items:start; margin-top:var(--sp-5);
  }
  .ingress-lede{ grid-area:lede; }
  .ingress-grid .mailbox{ grid-area:mail; }
  .ingress-side{ grid-area:side; }
  .ingress-lede .ingress-title{ margin-top:0; }

  @media (max-width:940px){
    .ingress-grid{
      grid-template-columns:1fr;
      grid-template-areas:"lede" "mail" "side";
      gap:var(--sp-4);
    }
  }

  /* --- the mailbox --- */
  .mailbox{
    border:1px solid var(--line-2); border-radius:4px;
    background:var(--bg-1); overflow:hidden; box-shadow:var(--shadow);
  }
  .mail-chrome{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
    padding:.55rem .8rem; border-bottom:1px solid var(--line);
    font-family:var(--font-mono); font-size:.64rem;
    letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  }
  .mail-chrome .lights{ display:flex; gap:5px; }
  .mail-chrome .lights i{ width:6px; height:6px; border-radius:50%; background:var(--line-2); display:block; }
  .mail-chrome .unread{ color:var(--accent); display:flex; align-items:center; gap:.4rem; }
  .mail-chrome .unread::before{
    content:""; width:5px; height:5px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .mail-head{
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line);
  }
  @media (max-width:520px){ .mail-head{ padding:var(--sp-3); } }
  .avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--accent-soft);
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color:var(--accent); font-family:var(--font-mono); font-size:.7rem;
    display:grid; place-items:center; letter-spacing:.02em;
  }
  .mail-who{ min-width:0; }
  .mail-from, .mail-to{ display:block; }
  .mail-from{ font-size:.86rem; font-weight:600; }
  .mail-from span{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); font-weight:400; }
  .mail-to{ font-family:var(--font-mono); font-size:.68rem; color:var(--dim); margin-top:.05rem; }
  .mail-time{ margin-left:auto; font-family:var(--font-mono); font-size:.66rem; color:var(--dim); white-space:nowrap; align-self:flex-start; }
  @media (max-width:400px){ .mail-from span{ display:none; } }

  .mail-subject{
    padding:var(--sp-4) var(--sp-4) 0;
    font-family:var(--font-display); font-weight:400; font-size:1.28rem;
    letter-spacing:-.005em;
  }
  @media (max-width:520px){ .mail-subject{ padding:var(--sp-3) var(--sp-3) 0; } }
  .mail-body{
    padding:var(--sp-3) var(--sp-4) var(--sp-4);
    font-size:.9rem; line-height:1.7;
    color:color-mix(in srgb, var(--fg) 88%, transparent);
    white-space:pre-wrap; min-height:10.5rem;
  }
  @media (max-width:520px){ .mail-body{ padding:var(--sp-3); min-height:12rem; } }
  .mail-caret{
    display:inline-block; width:.55em; height:1.05em; vertical-align:-.18em;
    background:var(--accent); margin-left:1px;
  }
  @media (prefers-reduced-motion: no-preference){
    .mail-caret{ animation:caret 1.05s steps(1) infinite; }
  }
  @keyframes caret{ 0%,50%{opacity:1;} 51%,100%{opacity:0;} }
  .mail-caret.done{ opacity:.55; }

  .mail-foot{
    display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
    padding:var(--sp-3) var(--sp-4);
    border-top:1px solid var(--line); background:var(--bg-2);
  }
  @media (max-width:520px){ .mail-foot{ padding:var(--sp-3); } }
  .mail-hint{ font-family:var(--font-mono); font-size:.66rem; color:var(--dim); }
  .btn-reply{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.6rem 1.1rem; border-radius:3px;
    border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
    font-family:var(--font-mono); font-size:.8rem; text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-reply:hover{ transform:translateY(-2px); box-shadow:var(--glow); }

  .actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); }
  .btn{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.75rem 1.3rem;
    border:1px solid var(--accent); border-radius:3px;
    font-family:var(--font-mono); font-size:.82rem;
    text-decoration:none; color:var(--accent-ink); background:var(--accent);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:var(--glow); }
  .btn.ghost{ background:transparent; color:var(--fg); border-color:var(--line-2); }
  .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
  /* Same weight as .btn without the solid fill. A filled vermilion block reads
     as an advert at the foot of an article; the outline keeps the hierarchy
     without shouting, and it behaves the same in both themes. */
  .btn.line{
    background:transparent; color:var(--accent);
    border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .btn.line:hover{ border-color:var(--accent); background:var(--accent-soft); box-shadow:none; }
  .btn .arrow{ transition:transform .18s ease; }
  .btn:hover .arrow{ transform:translate(2px,-2px); }

  .endpoints{
    border:1px solid var(--line); border-radius:3px; background:var(--bg-1);
    font-family:var(--font-mono); font-size:.76rem; overflow:hidden;
  }
  .ep{
    display:grid; grid-template-columns:6.5rem 1fr;
    gap:var(--sp-3);
    padding:.6rem var(--sp-4);
    border-top:1px solid var(--line);
    align-items:center;
  }
  .ep:first-child{ border-top:none; }
  @media (max-width:520px){
    .ep{ grid-template-columns:1fr; gap:.15rem; padding:.6rem var(--sp-3); }
  }
  .ep-k{ color:var(--dim); letter-spacing:.1em; text-transform:uppercase; font-size:.64rem; }
  .ep-v{ color:var(--fg); word-break:break-word; }
  .ep-v a{ text-decoration:none; border-bottom:1px solid var(--line-2); transition:color .15s ease, border-color .15s ease; }
  .ep-v a:hover{ color:var(--accent); border-color:var(--accent); }

  /* ============ FOOTER ============ */
  footer{
    border-top:1px solid var(--line);
    padding:var(--sp-5) 0 var(--sp-6);
    font-family:var(--font-mono); font-size:.72rem; color:var(--dim);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2);
  }
  footer a{ text-decoration:none; }
  footer a:hover{ color:var(--accent); }
  /* tabular figures matter here: the bar is sticky, so a proportional
     digit would twitch the whole header every second */
  .bar-session{ font-variant-numeric:tabular-nums; }
  .bar-session b{ font-weight:400; color:var(--fg); }

  /* ============ SCROLL PROGRESS ============ */
  .progress{
    position:fixed; top:0; left:0; height:2px; width:0;
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent));
    z-index:70; pointer-events:none;
  }

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

  /* ============ FIELD NOTES (index listing) ============
     A log, not a card grid. Each row is one entry, numbered, with the date
     carried in the margin — the same register as the work trace above it. */
  .notes{ border:1px solid var(--line); border-radius:3px; background:var(--bg-1); overflow:hidden; }

  .note-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    gap:var(--sp-2) var(--sp-4);
    padding:var(--sp-4);
    border-top:1px solid var(--line);
    text-decoration:none;
    position:relative;
    transition:background .16s ease;
  }
  .note-row:first-child{ border-top:none; }
  /* the accent edge is a pseudo-element so it can grow from the top on hover
     instead of popping in and shifting the row by a border width */
  .note-row::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--accent); transform:scaleY(0); transform-origin:top;
    transition:transform .22s cubic-bezier(.2,.7,.3,1);
  }
  .note-row:hover{ background:var(--bg-2); }
  .note-row:hover::before{ transform:scaleY(1); }

  .note-k{
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); white-space:nowrap;
  }
  .note-main{ min-width:0; grid-column:2; }
  .note-row h3{
    font-family:var(--font-display); font-weight:400; font-size:1.4rem;
    letter-spacing:-.005em; margin:0; line-height:1.25;
    transition:color .16s ease;
  }
  .note-row:hover h3{ color:var(--accent); }
  .note-sub{ color:var(--muted); font-size:.9rem; margin-top:.45rem; max-width:58ch; }
  .note-meta{
    font-family:var(--font-mono); font-size:.66rem; color:var(--dim);
    margin-top:var(--sp-3); display:flex; flex-wrap:wrap; gap:.4rem .9rem;
  }
  .note-go{
    font-family:var(--font-mono); font-size:.72rem; color:var(--dim);
    white-space:nowrap; transition:color .16s ease, transform .18s ease;
  }
  .note-row:hover .note-go{ color:var(--accent); transform:translateX(2px); }

  @media (max-width:640px){
    .note-row{ grid-template-columns:1fr auto; gap:var(--sp-2); }
    .note-main{ grid-column:1 / -1; }
    .note-go{ display:none; }
  }

  /* a queued slot, so the section doesn't read as finished at one entry */
  .notes-next{
    display:flex; align-items:center; gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-4);
    border-top:1px dashed var(--line-2);
    font-family:var(--font-mono); font-size:.68rem; color:var(--dim);
  }
  .notes-next b{ color:var(--muted); font-weight:400; }

  /* ============ DOCUMENT (a single field note) ============ */
  /* Same box as .wrap on the CV, so the two pages share a frame and the
     column edges line up when you click through. The measure that results is
     wide for prose, so the leading below is opened up to compensate. */
  .doc-wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--sp-5); }
  @media (max-width:640px){ .doc-wrap{ padding:0 var(--sp-4); } }

  .doc-back{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
    text-decoration:none; padding:var(--sp-6) 0 0;
    transition:color .15s ease;
  }
  .doc-back:hover{ color:var(--accent); }
  .doc-back .arrow{ transition:transform .18s ease; }
  .doc-back:hover .arrow{ transform:translateX(-3px); }

  .doc-head{ padding:var(--sp-4) 0 var(--sp-5); border-bottom:1px solid var(--line); }
  .doc-title{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(2.1rem, 5.2vw, 3.6rem); line-height:1.08;
    letter-spacing:-.015em; margin:var(--sp-3) 0 0;
  }
  .doc-title em{ font-style:italic; color:var(--accent); }
  .doc-standfirst{
    font-size:1.12rem; color:var(--muted); margin-top:var(--sp-4); line-height:1.7;
  }
  .doc-byline{
    display:flex; flex-wrap:wrap; gap:.4rem var(--sp-3); margin-top:var(--sp-4);
    font-family:var(--font-mono); font-size:.7rem; color:var(--dim);
    letter-spacing:.04em;
  }
  .doc-byline .sep{ color:var(--line-2); }

  /* ---- the incident summary block: the facts, before the argument ---- */
  .facts{
    border:1px solid var(--line); border-radius:3px; background:var(--bg-1);
    margin:var(--sp-5) 0; overflow:hidden;
  }
  .facts-head{
    display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
    padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line);
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim); background:var(--bg-2);
  }
  .facts-head .dur{ color:var(--accent); letter-spacing:.08em; }
  .fact{
    display:grid; grid-template-columns:150px 1fr; gap:var(--sp-2) var(--sp-4);
    padding:var(--sp-3); border-top:1px solid var(--line);
  }
  .fact:first-of-type{ border-top:none; }
  .fact-k{
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim);
  }
  .fact-v{ font-size:.92rem; }
  .fact-v b{ font-family:var(--font-mono); font-weight:500; color:var(--accent); font-size:.88rem; }
  @media (max-width:560px){
    .fact{ grid-template-columns:1fr; gap:.3rem; }
  }

  /* ---- prose ---- */
  .doc-body{ padding:var(--sp-6) 0 var(--sp-7); }
  .doc-body h2{
    font-family:var(--font-display); font-weight:400;
    font-size:1.75rem; letter-spacing:-.01em; line-height:1.2;
    margin:var(--sp-7) 0 var(--sp-4); position:relative;
  }
  .doc-body h2:first-child{ margin-top:0; }
  .doc-body h2::before{
    content:attr(data-n); position:absolute; left:-2.6rem; top:.42em;
    font-family:var(--font-mono); font-size:.66rem; color:var(--dim);
    letter-spacing:.1em;
  }
  /* the number hangs outside the container, so hide it before the container
     stops having room for it rather than letting it clip */
  @media (max-width:1200px){ .doc-body h2::before{ display:none; } }

  .doc-body h3{
    font-family:var(--font-body); font-weight:600; font-size:1rem;
    letter-spacing:-.005em; margin:var(--sp-5) 0 var(--sp-2);
  }
  .doc-body p{ margin:0 0 var(--sp-4); font-size:1.02rem; line-height:1.85; }
  .doc-body p:last-child{ margin-bottom:0; }
  .doc-body strong{ font-weight:600; color:var(--fg); }
  .doc-body em{ font-style:italic; }
  .doc-body a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
  .doc-body a:hover{ border-color:var(--accent); }
  .doc-body code{
    font-family:var(--font-mono); font-size:.86em;
    background:var(--bg-2); border:1px solid var(--line);
    border-radius:2px; padding:.08em .35em;
  }

  .doc-body ul{ margin:0 0 var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
  .doc-body li{ position:relative; padding-left:var(--sp-4); font-size:1.02rem; line-height:1.78; color:var(--muted); }
  .doc-body li strong{ color:var(--fg); }
  .doc-body li::before{
    content:""; position:absolute; left:0; top:.72em;
    width:7px; height:1px; background:var(--line-2);
  }

  /* ---- the cascade diagram: text, so it survives copy-paste and screen readers ---- */
  .cascade{
    border:1px solid var(--line); border-radius:3px; background:var(--bg-1);
    padding:var(--sp-4); margin:0 0 var(--sp-4);
    font-family:var(--font-mono); font-size:.78rem; line-height:1.5;
    display:flex; flex-direction:column; gap:.2rem;
  }
  .cascade-step{ display:flex; align-items:baseline; gap:var(--sp-2); color:var(--muted); }
  .cascade-step b{ color:var(--fg); font-weight:500; }
  .cascade-step i{ color:var(--dim); font-style:normal; font-size:.68rem; letter-spacing:.1em; min-width:1.6rem; }
  .cascade-arrow{ color:var(--accent); padding-left:1.8rem; line-height:1; font-size:.7rem; }
  .cascade-step.term b{ color:var(--accent); }

  /* ---- pull quote: the one line worth remembering ---- */
  .pull{
    border-left:2px solid var(--accent);
    padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);
    margin:var(--sp-5) 0;
    font-family:var(--font-display); font-size:1.42rem; line-height:1.35;
    letter-spacing:-.005em; color:var(--fg);
  }

  /* ---- margin note: a claim I'm making, flagged as mine ---- */
  .aside{
    border:1px solid var(--line); border-left:2px solid var(--line-2);
    border-radius:0 3px 3px 0; background:var(--bg-1);
    padding:var(--sp-4); margin:var(--sp-5) 0;
  }
  .aside-k{
    font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim); display:block; margin-bottom:var(--sp-2);
  }
  .aside p{ font-size:.95rem !important; color:var(--muted); margin:0 !important; }
  .aside p + p{ margin-top:var(--sp-3) !important; }

  /* ---- the hook back to what I'm building ---- */
  .plug{
    display:block; text-decoration:none;
    border:1px solid var(--line-2); border-radius:3px;
    background:var(--bg-1); padding:var(--sp-4);
    margin:var(--sp-5) 0;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .plug:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--glow); }
  .plug-k{
    font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim);
    display:flex; align-items:center; gap:.5rem;
  }
  .plug-k .live{
    width:6px; height:6px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft); flex-shrink:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .plug-k .live{ animation:pulse-a 2.6s ease-in-out infinite; }
  }
  @keyframes pulse-a{
    0%,100%{ box-shadow:0 0 0 3px var(--accent-soft); }
    50%{ box-shadow:0 0 0 7px transparent; }
  }
  .plug p{
    font-size:1rem !important; margin:var(--sp-2) 0 0 !important;
    color:var(--fg);
  }
  .plug p b{ font-weight:600; }
  .plug-go{
    display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--sp-3);
    font-family:var(--font-mono); font-size:.72rem; color:var(--accent);
  }
  .plug-go .arrow{ transition:transform .18s ease; }
  .plug:hover .plug-go .arrow{ transform:translate(2px,-2px); }

  /* ---- sources ---- */
  .srcs{ border-top:1px solid var(--line); padding-top:var(--sp-5); margin-top:var(--sp-7); }
  .srcs h2{ font-family:var(--font-mono) !important; font-size:.68rem !important;
    letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
    margin:0 0 var(--sp-3) !important; }
  .srcs ol{ margin:0; padding:0; list-style:none; counter-reset:src;
    display:flex; flex-direction:column; gap:var(--sp-2); }
  .srcs li{
    counter-increment:src; position:relative; padding-left:var(--sp-5);
    font-size:.88rem; color:var(--muted); line-height:1.55;
  }
  .srcs li::before{
    content:"[" counter(src) "]"; position:absolute; left:0; top:0;
    font-family:var(--font-mono); font-size:.72rem; color:var(--dim);
  }
  .srcs a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line-2); }
  .srcs a:hover{ color:var(--accent); border-color:var(--accent); }

  .disclaim{
    font-size:.82rem; color:var(--dim); margin-top:var(--sp-4);
    line-height:1.6;
  }

  /* ---- who wrote this ---- */
  .sig{
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
    border:1px solid var(--line); border-radius:3px; background:var(--bg-1);
    padding:var(--sp-4); margin-top:var(--sp-6);
  }
  .sig-av{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--accent); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:.78rem; font-weight:600;
  }
  .sig-t{ min-width:0; flex:1 1 16rem; }
  .sig-t b{ font-size:.92rem; font-weight:600; display:block; }
  .sig-t span{ font-size:.85rem; color:var(--muted); }
  .sig .actions{ margin-top:0; }