// Dossier v2 styles — refined palette away from Anduril orange.
// Cool teal/cyan signal + warm amber secondary on a near-black ink.
// Includes: hero schematic chrome, TOC sidebar, project metrics, domain matrix,
// case-study expand layout, footnotes, grain.

const DossierV2Styles = () => {
  if (document.getElementById('dossier-v2-styles')) return;
  const s = document.createElement('style');
  s.id = 'dossier-v2-styles';
  s.textContent = `
    .dv2{
      --bg:#0e1113; --paper:#15191c; --paper-2:#1b2024; --ink:#e6e2d6;
      --dim:#7a7e7a; --dim-2:#9aa09a;
      --line:#252a2e; --line-strong:#384047;
      --signal:#5dd4c4;       /* desat teal — replaces orange */
      --signal-deep:#1b8b7e;
      --amber:#e8b056;        /* secondary status */
      --warn:#ff7a59;
      --paper-warm:#1a1815;

      background:var(--bg); color:var(--ink); position:relative;
      font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
      font-size:11px; line-height:1.55; letter-spacing:0.005em;
      min-height:100%;
    }
    .dv2.light{
      --bg:#ece8dd; --paper:#e3dece; --paper-2:#d8d3c2; --ink:#13171a;
      --dim:#6a665a; --dim-2:#3a3a35;
      --line:#c8c2b0; --line-strong:#a8a290;
      --signal:#0d7d70;
      --signal-deep:#0a5d55;
      --amber:#a06410;
      --warn:#c43a18;
      --paper-warm:#dad3bd;
    }
    .dv2 *{box-sizing:border-box}
    .dv2 ::selection{background:var(--signal); color:var(--bg)}

    /* Subtle grain — pure CSS, no asset dependency */
    .dv2::before{
      content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
      background-image:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,.015) 1px, transparent 1.5px),
        radial-gradient(circle at 75% 70%, rgba(255,255,255,.012) 1px, transparent 1.5px),
        radial-gradient(circle at 50% 50%, rgba(0,0,0,.02) 1px, transparent 1.5px);
      background-size: 4px 4px, 6px 6px, 3px 3px;
      mix-blend-mode:overlay; opacity:.7;
    }

    .dv2 .frame-corner{position:fixed; width:18px; height:18px; pointer-events:none; z-index:20; border:none}
    .dv2 .frame-corner::before, .dv2 .frame-corner::after {
      content: ''; position: absolute; background: var(--signal);
      will-change: transform, box-shadow;
    }

    /* TL corner - vertical FIRST, then horizontal */
    .dv2 .frame-corner.tl{top:14px; left:14px}
    .dv2 .frame-corner.tl::after { top:0; left:0; width:1px; height:18px; transform:scaleY(0); transform-origin:bottom center; animation: growYGlow 0.18s ease 1.2s forwards }
    .dv2 .frame-corner.tl::before { top:0; left:0; width:18px; height:1px; transform:scaleX(0); transform-origin:left center; animation: growXGlow 0.18s ease 1.4s forwards }

    /* TR corner - horizontal FIRST (continuing top), then vertical */
    .dv2 .frame-corner.tr{top:14px; right:14px}
    .dv2 .frame-corner.tr::before { top:0; left:0; width:18px; height:1px; transform:scaleX(0); transform-origin:left center; animation: growXGlow 0.18s ease 1.6s forwards }
    .dv2 .frame-corner.tr::after { top:0; right:0; width:1px; height:18px; transform:scaleY(0); transform-origin:top center; animation: growYGlow 0.18s ease 1.8s forwards }

    /* BR corner - vertical FIRST (continuing right), then horizontal */
    .dv2 .frame-corner.br{bottom:14px; right:14px}
    .dv2 .frame-corner.br::after { top:0; right:0; width:1px; height:18px; transform:scaleY(0); transform-origin:top center; animation: growYGlow 0.18s ease 2.0s forwards }
    .dv2 .frame-corner.br::before { bottom:0; left:0; width:18px; height:1px; transform:scaleX(0); transform-origin:right center; animation: growXGlow 0.18s ease 2.2s forwards }

    /* BL corner - horizontal FIRST (continuing bottom), then vertical (closes loop) */
    .dv2 .frame-corner.bl{bottom:14px; left:14px}
    .dv2 .frame-corner.bl::before { bottom:0; left:0; width:18px; height:1px; transform:scaleX(0); transform-origin:right center; animation: growXGlow 0.18s ease 2.4s forwards }
    .dv2 .frame-corner.bl::after { top:0; left:0; width:1px; height:18px; transform:scaleY(0); transform-origin:bottom center; animation: growYGlow 0.18s ease 2.6s forwards }

    @keyframes growXGlow {
      0% { transform: scaleX(0); box-shadow: 0 0 8px var(--signal); }
      100% { transform: scaleX(1); box-shadow: 0 0 0 transparent; }
    }
    @keyframes growYGlow {
      0% { transform: scaleY(0); box-shadow: 0 0 8px var(--signal); }
      100% { transform: scaleY(1); box-shadow: 0 0 0 transparent; }
    }

    @media (prefers-reduced-motion: reduce) {
      .dv2 .frame-corner::before, .dv2 .frame-corner::after { animation: none; transform: none; }
    }

    /* TOPBAR */
    .dv2 .topbar{
      display:grid; grid-template-columns:1fr auto 1fr;
      padding:11px 28px; border-bottom:1px solid var(--line-strong);
      font-size:10px; text-transform:uppercase; letter-spacing:0.18em;
      align-items:center; background:var(--bg); position:sticky; top:0; z-index:10;
      height: 49px; box-sizing: border-box;
    }
    .dv2 .topbar .l{display:flex; gap:18px; color:var(--dim); align-items:center}
    .dv2 .topbar .l .kbd{padding:2px 6px; border:1px solid var(--line-strong); border-radius:2px; font-size:9px; color:var(--ink); letter-spacing:0.08em}
    .dv2 .topbar .c{color:var(--ink); font-weight:600; letter-spacing:0.22em; display:flex; align-items:center; gap:8px}
    .dv2 .topbar .c .glyph{color:var(--signal); font-size:14px; line-height:1}
    .dv2 .topbar .r{display:flex; gap:14px; justify-content:flex-end; color:var(--dim); align-items:center}
    .dv2 .topbar .r a{color:inherit; text-decoration:none; transition:color .15s}
    .dv2 .topbar .r a:hover{color:var(--signal)}

    .dv2 .live-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--signal); margin-right:6px; animation:dv2pulse 2s infinite; vertical-align:1px; box-shadow:0 0 6px currentColor}
    @keyframes dv2pulse{0%,100%{opacity:1} 50%{opacity:.3}}

    /* LAYOUT — sticky TOC + content */
    .dv2 .shell{display:grid; grid-template-columns:200px 1fr; max-width:1320px; margin:0 auto; position:relative; z-index:2}
    .dv2 .toc{
      position:sticky; top:49px; align-self:start; height:calc(100vh - 49px);
      padding:32px 18px 32px 28px; border-right:1px solid var(--line);
      font-size:10px; overflow-y:auto;
    }
    .dv2 .toc h5{font-size:9px; text-transform:uppercase; letter-spacing:0.22em; color:var(--dim); margin:0 0 12px; font-weight:500}
    .dv2 .toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
    .dv2 .toc li{counter-increment:toc; margin-bottom:1px}
    .dv2 .toc a{
      display:flex; align-items:center; gap:10px; padding:6px 8px;
      color:var(--dim-2); text-decoration:none; transition:all .12s;
      border-left:1px solid transparent; font-size:11px;
      letter-spacing:0.02em;
    }
    .dv2 .toc a::before{
      content:'§ ' counter(toc, decimal-leading-zero); color:var(--dim);
      font-size:9px; letter-spacing:0.1em; min-width:32px;
    }
    .dv2 .toc a:hover{color:var(--ink); background:var(--paper); border-left-color:var(--line-strong)}
    .dv2 .toc a.active{color:var(--signal); border-left-color:var(--signal); background:var(--paper)}
    .dv2 .toc a.active::before{color:var(--signal)}

    .dv2 .toc .meta{margin-top:24px; padding-top:18px; border-top:1px solid var(--line); color:var(--dim); line-height:1.7; font-size:9px; letter-spacing:0.05em}
    .dv2 .toc .meta b{color:var(--ink); font-weight:600}
    .dv2 .toc .meta a.act{color:var(--signal); text-decoration:none; display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid var(--line-strong); margin-top:8px; transition:all .15s}
    .dv2 .toc .meta a.act::before{display:none}
    .dv2 .toc .meta a.act:hover{border-color:var(--signal); color:var(--signal); background:var(--paper)}

    .dv2 .main{padding:36px 36px 60px; min-width:0}

    /* HERO */
    .dv2 .hero{
      display:grid; grid-template-columns:1fr 320px; gap:36px;
      padding-bottom:36px; border-bottom:1px solid var(--line-strong);
      position:relative;
    }
    .dv2 .hero .kicker{
      display:inline-flex; align-items:center; gap:8px; font-size:10px;
      text-transform:uppercase; letter-spacing:0.22em; color:var(--signal); margin-bottom:18px;
    }
    .dv2 .hero .kicker::before{content:''; width:24px; height:1px; background:var(--signal); display:inline-block}
    .dv2 .hero h1{
      font-family:'Space Grotesk','Inter',sans-serif; font-weight:500;
      font-size:62px; line-height:0.96; letter-spacing:-0.022em; margin:0 0 18px;
      text-wrap:balance;
    }
    .dv2 .hero h1 em{font-style:normal; color:var(--signal)}
    .dv2 .hero .lead{
      font-size:14px; line-height:1.55; color:var(--dim-2);
      font-family:'Space Grotesk',sans-serif; max-width:580px; margin:0 0 22px;
      text-wrap:pretty;
    }
    .dv2 .hero .lead b{color:var(--ink); font-weight:500}

    .dv2 .hero .cta-row{display:flex; gap:10px; margin-top:24px}
    .dv2 .hero .cta{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 16px; font-size:10px; text-transform:uppercase; letter-spacing:0.18em;
      border:1px solid var(--line-strong); color:var(--ink); text-decoration:none;
      transition:all .15s; background:transparent; cursor:pointer; font-family:inherit;
    }
    .dv2 .hero .cta.primary{background:var(--signal); border-color:var(--signal); color:var(--bg)}
    .dv2 .hero .cta:hover{border-color:var(--signal); color:var(--signal)}
    .dv2 .hero .cta.primary:hover{background:transparent; color:var(--signal)}

    /* SCHEMATIC — SVG block diagram */
    .dv2 .schematic{
      border:1px solid var(--line-strong); background:var(--paper);
      padding:14px; position:relative; aspect-ratio:320/520;
    }
    .dv2 .schematic .sch-head{
      display:flex; justify-content:space-between; padding-bottom:10px;
      border-bottom:1px dashed var(--line); margin-bottom:8px;
      font-size:9px; text-transform:uppercase; letter-spacing:0.18em;
    }
    .dv2 .schematic .sch-head .l{color:var(--signal)}
    .dv2 .schematic .sch-head .r{color:var(--dim)}
    .dv2 .schematic svg{width:100%; height:auto; display:block}
    .dv2 .schematic .sch-foot{
      position:absolute; bottom:8px; left:14px; right:14px;
      display:flex; justify-content:space-between; padding-top:8px;
      border-top:1px dashed var(--line);
      font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:0.15em;
    }

    /* SECTION */
    .dv2 .section{padding:46px 0; border-bottom:1px solid var(--line); scroll-margin-top:64px}
    .dv2 .sec-head{
      display:grid; grid-template-columns:auto 1fr auto; gap:18px;
      align-items:end; margin-bottom:26px;
      padding-bottom:14px; border-bottom:1px solid var(--line-strong);
    }
    .dv2 .sec-head .num{font-size:10px; color:var(--signal); letter-spacing:0.18em; padding-bottom:6px}
    .dv2 .sec-head .title{
      display:flex; align-items:center; gap:14px;
    }
    .dv2 .sec-head .title .ico{
      color:var(--signal); display:flex; align-items:center; justify-content:center;
      width:28px; height:28px; border:1px solid var(--line-strong); flex-shrink:0;
    }
    .dv2 .sec-head h2{
      font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:500;
      letter-spacing:-0.014em; margin:0; line-height:1;
    }
    .dv2 .sec-head h2 .sub{display:block; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:400; color:var(--dim); margin-top:4px; letter-spacing:0.1em; text-transform:uppercase}
    .dv2 .sec-head .meta{font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.16em; padding-bottom:6px; text-align:right}

    /* ABOUT */
    .dv2 .about{display:grid; grid-template-columns:1fr 280px; gap:36px}
    .dv2 .about p{margin:0 0 14px; color:var(--ink); font-size:13px; line-height:1.6; font-family:'Space Grotesk',sans-serif; max-width:620px; text-wrap:pretty}
    .dv2 .about p sup{color:var(--signal); font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; padding:0 1px}
    /* Footnote reference — clickable, hover shows the note, click jumps to it */
    .dv2 .fnref{
      position:relative; cursor:pointer; text-decoration:none;
      color:var(--signal); border-bottom:none;
    }
    .dv2 .fnref sup{cursor:pointer}
    .dv2 .fnref:hover sup, .dv2 .fnref:focus-visible sup{text-decoration:underline; text-underline-offset:2px}
    .dv2 .fnref:focus-visible{outline:none}
    .dv2 .fnref::after{
      content:attr(data-def);
      position:absolute; left:50%; bottom:calc(100% + 7px);
      transform:translateX(-50%) translateY(4px);
      width:max-content; max-width:260px; white-space:normal; text-align:left;
      padding:9px 11px; background:var(--paper-2); color:var(--ink);
      border:1px solid var(--signal); box-shadow:0 10px 34px rgba(0,0,0,.45);
      font-family:'Space Grotesk',sans-serif; font-size:11.5px; line-height:1.45;
      letter-spacing:0; text-transform:none; font-weight:400; text-wrap:pretty;
      z-index:60; opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .14s ease, transform .14s ease;
    }
    .dv2 .fnref:hover::after, .dv2 .fnref:focus-visible::after{
      opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
    }
    .dv2 .about-side{
      border:1px solid var(--line-strong); padding:14px; background:var(--paper);
      font-size:10px;
    }
    .dv2 .about-side h4{margin:0 0 10px; font-size:9px; letter-spacing:0.22em; color:var(--signal); text-transform:uppercase; font-weight:600}
    .dv2 .about-side .row{display:grid; grid-template-columns:120px 1fr; gap:16px; padding:5px 0; border-top:1px dashed var(--line)}
    .dv2 .about-side .row:first-of-type{border-top:none}
    .dv2 .about-side .row .k{color:var(--dim); text-transform:uppercase; letter-spacing:0.08em; font-size:9px}
    .dv2 .about-side .row .v{color:var(--ink)}
    .dv2 .about-side .row .v.live{color:var(--signal)}

    .dv2 .footnotes{margin-top:30px; padding-top:18px; border-top:1px dashed var(--line); font-size:10px; color:var(--dim); line-height:1.7; max-width:620px}
    .dv2 .footnotes b{color:var(--signal); font-family:'JetBrains Mono',monospace; margin-right:6px}
    .dv2 .footnotes > div{scroll-margin-top:80px; transition:background .4s}
    .dv2 .footnotes > div:target{background:color-mix(in oklab, var(--signal) 14%, transparent); box-shadow:-8px 0 0 color-mix(in oklab, var(--signal) 14%, transparent)}
    .dv2 .fnback{color:var(--dim); text-decoration:none; margin-left:6px; font-size:11px}
    .dv2 .fnback:hover{color:var(--signal)}

    /* DOMAIN MATRIX */
    .dv2 .matrix-caption{
      font-size:12px; line-height:1.6; color:var(--dim);
      margin:0 0 14px; max-width:760px;
      font-family:'Space Grotesk',sans-serif;
    }
    .dv2 .matrix-caption b{color:var(--ink); font-weight:600}
    .dv2 .matrix-caption i{color:var(--ink-2, var(--dim)); font-style:italic}
    .dv2 .matrix{
      display:grid; grid-template-columns:200px repeat(5, 1fr);
      border:1px solid var(--line-strong); background:var(--paper);
      font-size:10px;
    }
    .dv2 .matrix .cell{
      padding:10px 12px; 
      border-right:1px solid var(--line); 
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:center; min-height:40px; position:relative;
    }
    .dv2 .matrix .cell:nth-child(6n){border-right:none}
    .dv2 .matrix .cell.row-h{
      justify-content:flex-start; color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:500;
    }
    .dv2 .matrix .cell.col-h{
      color:var(--signal); text-transform:uppercase; letter-spacing:0.14em; font-size:9px; font-weight:600;
      background:var(--paper-2);
    }
    .dv2 .matrix .cell.corner{background:var(--paper-2)}
    .dv2 .matrix .dot{width:10px; height:10px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal)}
    .dv2 .matrix .dot.half{
      background:linear-gradient(90deg, var(--signal) 0 50%, transparent 50% 100%);
      border:1.5px solid var(--signal); box-shadow:none;
    }
    .dv2 .matrix .dot.empty{
      background:transparent;
      border:1.5px solid var(--dim);
      box-shadow:none; opacity:1;
      width:10px; height:10px;
    }
    .dv2 .matrix .count{color:var(--ink); font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13px}

    /* PROJECTS */
    .dv2 .filter-bar{
      display:flex; gap:0; margin-bottom:18px; border:1px solid var(--line-strong);
      flex-wrap:nowrap; overflow-x:auto;
    }
    .dv2 .filter{
      flex-shrink:0; font-family:inherit; font-size:9px; text-transform:uppercase; letter-spacing:0.18em;
      padding:9px 14px; border:none; border-right:1px solid var(--line);
      background:transparent; color:var(--dim); cursor:pointer; transition:all .15s;
    }
    .dv2 .filter:last-child{border-right:none}
    .dv2 .filter:hover{color:var(--ink); background:var(--paper)}
    .dv2 .filter.active{background:var(--signal); color:var(--bg)}

    .dv2 .proj-list{display:flex; flex-direction:column}
    .dv2 .proj{
      border:1px solid var(--line); border-bottom:none;
      cursor:pointer; transition:border-color .15s, background .15s;
    }
    .dv2 .proj:last-child{border-bottom:1px solid var(--line)}
    .dv2 .proj:hover{border-color:var(--line-strong); background:var(--paper)}
    .dv2 .proj.open{border-color:var(--signal); background:var(--paper)}
    .dv2 .proj.open + .proj{border-top-color:var(--signal)}

    .dv2 .proj-head{
      display:grid; grid-template-columns:80px 1fr 320px 80px 28px;
      gap:18px; padding:18px 18px; align-items:start;
    }
    .dv2 .proj-head .code{color:var(--signal); font-size:10px; padding-top:4px; letter-spacing:0.05em}
    .dv2 .proj-head .core h3{font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:500; margin:0 0 5px; color:var(--ink); letter-spacing:-0.01em}
    .dv2 .proj-head .core .sm{font-size:11px; color:var(--dim-2); line-height:1.55; max-width:560px; font-family:'Space Grotesk',sans-serif; text-wrap:pretty}
    .dv2 .proj-head .core .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
    .dv2 .proj-head .core .tag{font-size:9px; text-transform:uppercase; letter-spacing:0.14em; color:var(--dim); padding:3px 7px; border:1px solid var(--line-strong)}
    .dv2 .proj-head .metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); align-self:start}
    .dv2 .proj-head .metric{padding:8px 10px; background:var(--bg); display:flex; flex-direction:column; gap:2px}
    .dv2 .proj-head .metric .v{font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:500; color:var(--signal); letter-spacing:-0.01em; line-height:1}
    .dv2 .proj-head .metric .k{font-size:8px; color:var(--dim); text-transform:uppercase; letter-spacing:0.14em; line-height:1.3}
    .dv2 .proj-head .yr{color:var(--dim); font-size:10px; padding-top:4px; text-align:right; letter-spacing:0.05em}
    .dv2 .proj-head .arr{color:var(--dim); display:flex; padding-top:6px; transition:transform .2s, color .15s}
    .dv2 .proj.open .proj-head .arr{transform:rotate(90deg); color:var(--signal)}
    .dv2 .proj:hover .proj-head .arr{color:var(--signal)}

    /* Case-study expanded */
    .dv2 .proj-body{
      padding:0 18px 24px;
      animation:dv2slide .25s ease both;
    }
    @keyframes dv2slide{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}
    .dv2 .proj-body .header-band{
      display:flex; justify-content:space-between; padding:0 0 14px; margin:0 0 18px;
      border-bottom:1px dashed var(--line);
      font-size:9px; text-transform:uppercase; letter-spacing:0.18em; color:var(--dim);
    }
    .dv2 .proj-body .header-band span{display:flex; align-items:center; gap:8px}
    .dv2 .proj-body .header-band b{color:var(--ink); font-weight:600}
    .dv2 .proj-body .grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px}
    .dv2 .proj-body .grid h5{
      font-size:9px; letter-spacing:0.22em; color:var(--signal);
      text-transform:uppercase; margin:0 0 8px; font-weight:600;
      display:flex; align-items:center; gap:8px;
    }
    .dv2 .proj-body .grid h5::before{content:''; width:12px; height:1px; background:var(--signal)}
    .dv2 .proj-body .grid p{margin:0; font-family:'Space Grotesk',sans-serif; font-size:13px; line-height:1.55; color:var(--ink); text-wrap:pretty}
    .dv2 .proj-body .footer-grid{
      margin-top:22px; padding-top:18px; border-top:1px dashed var(--line);
      display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; font-size:10px;
    }
    .dv2 .proj-body .footer-grid h5{font-size:9px; letter-spacing:0.18em; color:var(--dim); text-transform:uppercase; margin:0 0 8px; font-weight:500}
    .dv2 .proj-body .stack-list{display:flex; flex-wrap:wrap; gap:5px}
    .dv2 .proj-body .stack-list span{padding:3px 7px; border:1px solid var(--line-strong); color:var(--ink); font-size:9px; text-transform:uppercase; letter-spacing:0.12em}
    .dv2 .proj-body .art-list{list-style:none; margin:0; padding:0; color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:12px; line-height:1.65}
    .dv2 .proj-body .art-list li{padding:2px 0; padding-left:14px; position:relative}
    .dv2 .proj-body .art-list li::before{content:'›'; position:absolute; left:0; color:var(--signal); font-family:monospace}

    /* TIMELINE */
    .dv2 .tl{display:grid; grid-template-columns:170px 240px 1fr; gap:24px}
    .dv2 .tl .row{display:contents}
    .dv2 .tl .yr-cell{
      font-size:10px; color:var(--signal); padding:14px 0;
      border-top:1px solid var(--line); letter-spacing:0.05em;
    }
    .dv2 .tl .who-cell{padding:14px 0; border-top:1px solid var(--line); position:relative; padding-left:20px}
    .dv2 .tl .who-cell::before{
      content:''; position:absolute; left:0; top:21px; width:10px; height:10px;
      border:1.5px solid var(--signal); background:var(--bg); border-radius:50%;
    }
    .dv2 .tl .who-cell.edu::before{border-style:dashed; border-color:var(--amber)}
    .dv2 .tl .who-cell .who{font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:500; color:var(--ink); letter-spacing:-0.005em; margin:0 0 3px}
    .dv2 .tl .who-cell .role{font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:0.16em}
    .dv2 .tl .note-cell{padding:14px 0; border-top:1px solid var(--line); color:var(--dim-2); font-family:'Space Grotesk',sans-serif; font-size:12px; line-height:1.55}

    /* SKILLS */
    .dv2 .skills{display:grid; grid-template-columns:repeat(2,1fr); gap:24px 36px}
    .dv2 .skills h4{font-size:10px; letter-spacing:0.2em; color:var(--signal); text-transform:uppercase; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line-strong); display:flex; align-items:center; gap:8px; font-weight:600}
    .dv2 .skills h4 .ico{color:var(--signal); display:flex}
    .dv2 .skills .row{display:flex; flex-wrap:wrap; gap:5px}
    .dv2 .skills .chip{font-size:10px; padding:5px 9px; border:1px solid var(--line-strong); color:var(--ink); transition:all .15s; cursor:default}
    .dv2 .skills .chip:hover{border-color:var(--signal); color:var(--signal); background:var(--paper)}

    /* WRITING */
    .dv2 .writing{}
    .dv2 .write-row{
      display:grid; grid-template-columns:90px 70px 1fr 28px; gap:18px;
      padding:14px 0; border-top:1px solid var(--line);
      cursor:pointer; transition:padding-left .15s, background .15s;
      text-decoration:none; color:inherit; align-items:start;
    }
    .dv2 .write-row:hover{padding-left:6px; background:var(--paper)}
    .dv2 .write-row .date{color:var(--dim); font-size:10px; padding-top:3px}
    .dv2 .write-row .kind{font-size:9px; text-transform:uppercase; letter-spacing:0.18em; color:var(--signal); padding-top:4px}
    .dv2 .write-row .kind.essay{color:var(--amber)}
    .dv2 .write-row .kind.publication{color:var(--amber)}
    .dv2 .write-row .ttl{font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; color:var(--ink); margin:0 0 4px; letter-spacing:-0.005em}
    .dv2 .write-row .ex{font-family:'Space Grotesk',sans-serif; font-size:12px; color:var(--dim-2); line-height:1.55; max-width:600px; text-wrap:pretty}
    .dv2 .write-row .arr{color:var(--dim); display:flex; padding-top:5px}
    .dv2 .write-row:hover .arr{color:var(--signal); transform:translateX(3px)}

    /* NOW */
    .dv2 .now-card{
      max-width:780px; border:1px solid var(--line-strong); background:var(--paper);
      position:relative;
    }
    .dv2 .now-card::before{content:''; position:absolute; top:-1px; left:-1px; width:32px; height:32px; border-top:2px solid var(--signal); border-left:2px solid var(--signal)}
    .dv2 .now-card::after{content:''; position:absolute; bottom:-1px; right:-1px; width:32px; height:32px; border-bottom:2px solid var(--signal); border-right:2px solid var(--signal)}
    .dv2 .now-bar{display:flex; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--line); font-size:9px; text-transform:uppercase; letter-spacing:0.22em}
    .dv2 .now-bar .live{color:var(--signal); font-weight:600}
    .dv2 .now-bar .ts{color:var(--dim); font-family:'JetBrains Mono',monospace; letter-spacing:0.05em}
    .dv2 .now-body{padding:18px}
    .dv2 .now-body .row{display:grid; grid-template-columns:130px 1fr; gap:18px; padding:7px 0; border-top:1px dashed var(--line)}
    .dv2 .now-body .row:first-of-type{border-top:none}
    .dv2 .now-body .k{color:var(--dim); font-size:9px; text-transform:uppercase; letter-spacing:0.2em; padding-top:5px}
    .dv2 .now-body .v{font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--ink)}

    /* CONTACT */
    .dv2 .contact-block{}
    .dv2 .contact-block .pull{
      font-family:'Space Grotesk',sans-serif; font-size:46px; font-weight:500;
      letter-spacing:-0.022em; line-height:1.05; margin:0 0 28px; max-width:880px;
      text-wrap:balance;
    }
    .dv2 .contact-block .pull .ac{color:var(--signal)}
    .dv2 .contact-block .links{
      display:grid;
      grid-template-columns: 3fr minmax(108px, 1fr) 3fr minmax(80px, 1fr);
      gap:1px;
      background:var(--line-strong); border:1px solid var(--line-strong);
    }
    .dv2 .contact-block .links a{
      background:var(--bg); padding:14px 9px; text-decoration:none; color:var(--ink);
      display:flex; flex-direction:column; gap:10px;
      transition:all .15s; min-height:96px; justify-content:space-between;
      min-width:0; overflow:hidden;
    }
    .dv2 .contact-block .links a:hover{background:var(--signal); color:var(--bg)}
    .dv2 .contact-block .links a .head{display:flex; justify-content:space-between; align-items:center}
    .dv2 .contact-block .links a .k{font-size:9px; text-transform:uppercase; letter-spacing:0.22em; color:var(--dim); font-weight:600}
    .dv2 .contact-block .links a:hover .k{color:var(--bg)}
    .dv2 .contact-block .links a .v{
      font-family:'Space Grotesk',sans-serif; font-size:11.5px; line-height:1.35;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
    }
    .dv2 .contact-block .links a .ico{color:var(--signal); display:flex}
    .dv2 .contact-block .links a:hover .ico{color:var(--bg)}

    /* Footer */
    .dv2 .colophon{
      display:flex; justify-content:space-between; padding:22px 0 0; margin-top:36px;
      border-top:1px solid var(--line-strong);
      font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:0.2em;
    }

    /* Hero reveal — content always visible; animation only enriches */
    .dv2 .reveal{animation:dv2reveal .9s cubic-bezier(.2,.7,.2,1) both}
    .dv2 .reveal.d1{animation-delay:.05s}
    .dv2 .reveal.d2{animation-delay:.18s}
    .dv2 .reveal.d3{animation-delay:.32s}
    .dv2 .reveal.d4{animation-delay:.46s}
    @keyframes dv2reveal{
      0%{opacity:.001; transform:translateY(8px)}
      100%{opacity:1; transform:translateY(0)}
    }

    /* Schematic-stroke animation */
    .dv2 .schematic .stroke-anim{
      stroke-dasharray:400; stroke-dashoffset:400;
      animation:strokeIn 1.4s .6s cubic-bezier(.2,.7,.2,1) both;
    }
    @keyframes strokeIn{to{stroke-dashoffset:0}}
    .dv2 .schematic .fade-anim{opacity:0; animation:fadeIn .6s .9s ease both}
    .dv2 .schematic .fade-anim.f2{animation-delay:1.1s}
    .dv2 .schematic .fade-anim.f3{animation-delay:1.3s}
    @keyframes fadeIn{to{opacity:1}}

    /* Print */
    @media print{
      .dv2 .toc, .dv2 .topbar, .dv2 .frame-corner, .dv2 .hero .cta-row{display:none !important}
      .dv2 .shell{grid-template-columns:1fr}
      .dv2{background:white !important; color:black !important}
    }

    /* COMMAND PALETTE — ⌘K */
    .cmd-overlay{
      position:fixed; inset:0; z-index:200;
      background:rgba(8,10,12,0.72);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      display:flex; justify-content:center; align-items:flex-start;
      padding-top:14vh; animation:cmdFade .14s ease both;
    }
    @keyframes cmdFade{from{opacity:0}to{opacity:1}}
    .cmd-palette{
      position:relative;
      width:min(640px, calc(100vw - 40px));
      background:var(--paper); border:1px solid var(--line-strong);
      box-shadow:0 24px 80px rgba(0,0,0,.5), 0 0 0 1px var(--signal-dim, rgba(120,200,200,.08));
      font-family:'Space Grotesk',sans-serif; color:var(--ink);
      animation:cmdSlide .18s cubic-bezier(.2,.7,.2,1) both;
      display:flex; flex-direction:column; max-height:70vh;
    }
    @keyframes cmdSlide{from{transform:translateY(-8px); opacity:0}to{transform:translateY(0); opacity:1}}
    .cmd-bar{
      display:flex; align-items:center; gap:12px;
      padding:14px 16px; border-bottom:1px solid var(--line-strong);
      background:var(--paper-2);
    }
    .cmd-glyph{color:var(--signal); font-family:'JetBrains Mono',monospace; font-size:14px}
    .cmd-bar input{
      flex:1; background:transparent; border:none; outline:none;
      color:var(--ink); font-family:'Space Grotesk',sans-serif;
      font-size:15px; letter-spacing:0;
    }
    .cmd-bar input::placeholder{color:var(--dim)}
    .cmd-count{
      color:var(--dim); font-family:'JetBrains Mono',monospace; font-size:10px;
      letter-spacing:0.1em; white-space:nowrap;
    }
    .cmd-list{
      overflow-y:auto; flex:1; padding:6px 0;
    }
    .cmd-list::-webkit-scrollbar{width:8px}
    .cmd-list::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:4px}
    .cmd-empty{
      padding:32px 16px; text-align:center;
      color:var(--dim); font-size:12px; font-family:'JetBrains Mono',monospace;
    }
    .cmd-group{padding:6px 0}
    .cmd-group-h{
      padding:6px 16px 4px; font-size:9px; letter-spacing:0.22em;
      color:var(--signal); text-transform:uppercase;
      font-family:'JetBrains Mono',monospace; font-weight:600;
    }
    .cmd-row{
      display:grid; grid-template-columns:24px 1fr auto; gap:12px;
      padding:9px 16px; align-items:center; cursor:pointer;
      border-left:2px solid transparent; transition:background .08s, border-color .08s;
    }
    .cmd-row.sel{
      background:var(--paper-2); border-left-color:var(--signal);
    }
    .cmd-row-glyph{
      color:var(--dim); font-family:'JetBrains Mono',monospace;
      font-size:11px; letter-spacing:0.05em; text-align:center;
    }
    .cmd-row.sel .cmd-row-glyph{color:var(--signal)}
    .cmd-row-label{
      color:var(--ink); font-family:'Space Grotesk',sans-serif;
      font-size:13px; font-weight:500; letter-spacing:0;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .cmd-row-hint{
      color:var(--dim); font-family:'JetBrains Mono',monospace;
      font-size:10px; letter-spacing:0.05em;
      max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .cmd-foot{
      display:flex; align-items:center; gap:18px;
      padding:10px 16px; border-top:1px solid var(--line-strong);
      background:var(--paper-2); font-size:10px; color:var(--dim);
      font-family:'JetBrains Mono',monospace; letter-spacing:0.05em;
    }
    .cmd-foot kbd{
      display:inline-block; padding:2px 6px; margin-right:4px;
      border:1px solid var(--line-strong); background:var(--paper);
      border-radius:3px; color:var(--ink); font-size:9px;
      font-family:'JetBrains Mono',monospace; line-height:1.2;
    }

    /* ACRONYM GLOSSARY — floats beside the centered palette, same height */
    .cmd-glossary{
      position:absolute; left:calc(100% + 16px); top:0; bottom:0;
      width:300px;
      background:var(--paper); border:1px solid var(--line-strong);
      box-shadow:0 24px 80px rgba(0,0,0,.5), 0 0 0 1px var(--signal-dim, rgba(120,200,200,.08));
      display:flex; flex-direction:column;
      font-family:'Space Grotesk',sans-serif; color:var(--ink);
      animation:cmdSlide .18s cubic-bezier(.2,.7,.2,1) both;
    }
    .cmd-gloss-h{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 16px; border-bottom:1px solid var(--line-strong);
      background:var(--paper-2);
      font-size:9px; letter-spacing:0.22em; color:var(--signal);
      text-transform:uppercase; font-family:'JetBrains Mono',monospace; font-weight:600;
    }
    .cmd-gloss-h .n{color:var(--dim); letter-spacing:0.1em}
    .cmd-gloss-list{overflow-y:auto; flex:1; padding:6px 0}
    .cmd-gloss-list::-webkit-scrollbar{width:8px}
    .cmd-gloss-list::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:4px}
    .cmd-gloss-row{
      padding:9px 16px; border-left:2px solid transparent;
      transition:background .08s, border-color .08s;
    }
    .cmd-gloss-row:hover{background:var(--paper-2); border-left-color:var(--signal)}
    .cmd-gloss-term{
      color:var(--ink); font-family:'JetBrains Mono',monospace;
      font-size:12px; font-weight:600; letter-spacing:0.03em; margin-bottom:3px;
    }
    .cmd-gloss-def{
      color:var(--dim); font-size:11px; line-height:1.45; text-wrap:pretty;
    }
    .cmd-gloss-empty{
      padding:24px 16px; text-align:center; color:var(--dim);
      font-size:11px; font-family:'JetBrains Mono',monospace;
    }
    /* Not enough room to float the glossary — hide it */
    @media (max-width: 1040px){
      .cmd-glossary{display:none}
    }

    /* topbar theme toggle */
    .dv2 .topbar .theme-toggle {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 4px;
      transition: all 0.15s;
      color: var(--dim);
      font-size: 16px;
    }
    .dv2 .topbar .theme-toggle:hover {
      border-color: var(--signal);
      background: var(--paper-3);
      color: var(--signal);
    }
    
    /* topbar theme toggle */
    .dv2 .topbar .theme-toggle {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 4px;
      transition: all 0.15s;
      color: var(--dim);
      font-size: 14px;
      padding: 0;
    }
    .dv2 .topbar .theme-toggle:hover {
      border-color: var(--signal);
      background: var(--paper-3);
      color: var(--signal);
    }

    /* topbar search box */
    .dv2 .topbar .search-box {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 3px;
      transition: all 0.15s;
    }
    .dv2 .topbar .search-box:hover {
      border-color: var(--signal);
    }
    .dv2 .topbar .search-icon {
      font-size: 14px;
      color: var(--dim);
      line-height: 1;
    }
    .dv2 .topbar .search-text {
      font-size: 10px;
      font-weight: 400;
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }
    .dv2 .topbar .search-box .kbd {
      padding: 0;
      border: none;
      background: transparent;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 500;
      color: var(--dim);
      letter-spacing: 0.08em;
    }
    .dv2 .topbar .search-box:hover .search-icon,
    .dv2 .topbar .search-box:hover .search-text,
    .dv2 .topbar .search-box:hover .kbd { color: var(--signal); }

    /* Smooth theme transition - applies to color/background properties */
    .dv2,
    .dv2 *,
    .dv2 *::before,
    .dv2 *::after {
      transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }
    /* Exclude animation-driven properties from transitions to avoid jank */
    .dv2 .frame-corner::before,
    .dv2 .frame-corner::after,
    .dv2 .reveal,
    .dv2 .scroll-reveal,
    .dv2 .progress-bar,
    .dv2 .toast {
      transition: none;
    }

    /* Topbar load-in animation */
    .dv2 .topbar {
      animation: dv2topbarReveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    @keyframes dv2topbarReveal {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dv2 .topbar { animation: none; }
    }

    /* Scroll-triggered reveal animations - use animation (always replays) not transition */
    .dv2 .scroll-reveal {
      opacity: 0;
    }
    .dv2 .scroll-reveal.in-view {
      animation: dv2scrollReveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    @keyframes dv2scrollReveal {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* TOC slides in from the left */
    .dv2 .toc.scroll-reveal.in-view {
      animation: dv2tocReveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    @keyframes dv2tocReveal {
      from { opacity: 0; transform: translateX(-12px); }
      to { opacity: 1; transform: translateX(0); }
    }
    /* Staggered delays for child elements */
    .dv2 .tl > *:nth-child(3n+2).scroll-reveal { animation-delay: 0.08s; }
    .dv2 .tl > *:nth-child(3n+3).scroll-reveal { animation-delay: 0.16s; }
    .dv2 .skills > div:nth-child(2).scroll-reveal { animation-delay: 0.1s; }
    .dv2 .skills > div:nth-child(3).scroll-reveal { animation-delay: 0.2s; }
    .dv2 .skills > div:nth-child(4).scroll-reveal { animation-delay: 0.3s; }
    .dv2 .skills > div:nth-child(5).scroll-reveal { animation-delay: 0.4s; }
    .dv2 .skills > div:nth-child(6).scroll-reveal { animation-delay: 0.5s; }
    .dv2 .proj:nth-child(2).scroll-reveal { animation-delay: 0.1s; }
    .dv2 .proj:nth-child(3).scroll-reveal { animation-delay: 0.2s; }
    .dv2 .contact-block .links a:nth-child(2).scroll-reveal { animation-delay: 0.1s; }
    .dv2 .contact-block .links a:nth-child(3).scroll-reveal { animation-delay: 0.2s; }
    .dv2 .contact-block .links a:nth-child(4).scroll-reveal { animation-delay: 0.3s; }
    /* Stagger above-the-fold so hero animates first */
    .dv2 #about .sec-head.scroll-reveal { animation-delay: 0.15s; animation-duration: 0.5s; }
    .dv2 .about.scroll-reveal { animation-delay: 0.25s; animation-duration: 0.5s; }
    /* Respect motion preferences */
    @media (prefers-reduced-motion: reduce) {
      .dv2 .scroll-reveal,
      .dv2 .scroll-reveal.in-view {
        opacity: 1;
        animation: none;
      }
    }

    /* Reading progress bar at top of page */

    /* Reading progress bar at top of page */

    /* Reading progress bar at top of page */
    .dv2 .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      background: var(--signal);
      z-index: 1000;
      transition: width 0.05s linear;
      box-shadow: 0 0 8px var(--signal);
    }

    /* Toast notification */
    .dv2 .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--paper-2);
      border: 1px solid var(--signal);
      color: var(--signal);
      padding: 10px 20px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      z-index: 9999;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      animation: toast-in 0.2s ease-out;
    }
    @keyframes toast-in {
      from { opacity: 0; transform: translateX(-50%) translateY(8px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* Section share button - inside meta div */
    .dv2 .sec-head .meta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .dv2 .sec-head .share-btn {
      background: transparent;
      border: 1px solid var(--line);
      color: var(--dim);
      cursor: pointer;
      width: 22px;
      height: 22px;
      border-radius: 3px;
      font-size: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      padding: 0;
      flex-shrink: 0;
      opacity: 0.5;
    }
    .dv2 .sec-head .share-btn:hover {
      border-color: var(--signal);
      color: var(--signal);
      background: var(--paper-2);
      opacity: 1;
    }

    /* Print button in topbar */
    .dv2 .topbar .print-btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 4px;
      transition: all 0.15s;
      color: var(--dim);
      padding: 0;
    }
    .dv2 .topbar .print-btn:hover {
      border-color: var(--signal);
      background: var(--paper-3);
      color: var(--signal);
    }
    .dv2 .topbar .print-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Acronym hover terms — custom tooltip (native title was unreliable) */
    .dv2 .term {
      position: relative;
      border-bottom: 1px dotted var(--dim);
      cursor: help;
      transition: color 0.15s, border-color 0.15s;
    }
    .dv2 .term:hover,
    .dv2 .term:focus-visible {
      color: var(--signal);
      border-bottom-color: var(--signal);
      outline: none;
    }
    /* The tooltip bubble */
    .dv2 .term::after {
      content: attr(data-def);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 9px);
      transform: translateX(-50%) translateY(4px);
      width: max-content;
      max-width: 280px;
      white-space: normal;
      text-align: left;
      padding: 9px 11px;
      background: var(--paper-2);
      color: var(--ink);
      border: 1px solid var(--signal);
      box-shadow: 0 10px 34px rgba(0,0,0,.45);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 11.5px;
      line-height: 1.45;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 400;
      text-wrap: pretty;
      z-index: 60;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.14s ease, transform 0.14s ease;
    }
    /* Little arrow pointing down to the term */
    .dv2 .term::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: calc(100% + 3px);
      transform: translateX(-50%) translateY(4px);
      width: 8px;
      height: 8px;
      background: var(--paper-2);
      border-right: 1px solid var(--signal);
      border-bottom: 1px solid var(--signal);
      rotate: 45deg;
      z-index: 61;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.14s ease, transform 0.14s ease;
    }
    .dv2 .term:hover::after,
    .dv2 .term:focus-visible::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .dv2 .term:hover::before,
    .dv2 .term:focus-visible::before {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .dv2 .term::after, .dv2 .term::before { transition: none; }
    }

    /* ============================================================
       MOBILE RESPONSIVE
       Only active at ≤ 820px. Desktop layout is untouched.
       Strategy:
         - Collapse 2-col layouts (TOC+main, hero, about, project rows,
           timeline, contact links) into single-column stacks
         - Shrink hero display type from 62px → 34px
         - Compact topbar: hide center title + text on side links,
           keep search + theme + a single resume icon link
         - Matrix becomes horizontally scrollable
         - Reduce section paddings and frame chrome
       ============================================================ */
    @media (max-width: 820px) {
      .dv2 { font-size: 12px; }

      /* Frame corners smaller + tighter */
      .dv2 .frame-corner { width:10px; height:10px; }
      .dv2 .frame-corner.tl { top:8px; left:8px }
      .dv2 .frame-corner.tr { top:8px; right:8px }
      .dv2 .frame-corner.bl { bottom:8px; left:8px }
      .dv2 .frame-corner.br { bottom:8px; right:8px }
      .dv2 .frame-corner.tl::after,
      .dv2 .frame-corner.tr::after,
      .dv2 .frame-corner.bl::after,
      .dv2 .frame-corner.br::after { height:10px; }
      .dv2 .frame-corner.tl::before,
      .dv2 .frame-corner.tr::before,
      .dv2 .frame-corner.bl::before,
      .dv2 .frame-corner.br::before { width:10px; }

      /* TOPBAR — compact mode */
      .dv2 .topbar {
        grid-template-columns: 1fr auto;
        padding: 9px 14px;
        gap: 8px;
        height: auto;
        min-height: 44px;
      }
      .dv2 .topbar .l { gap: 8px; flex-wrap: nowrap; min-width: 0; }
      /* Hide the wordmark text spans, keep search + buttons */
      .dv2 .topbar .l > span:not(.search-icon):not(.search-text):not(.kbd) { display: none; }
      .dv2 .topbar .l > span:first-child { display: inline; font-weight:600; color:var(--ink); letter-spacing:0.12em; font-size:9px; white-space:nowrap; }
      .dv2 .topbar .search-box { padding: 4px 8px; gap: 6px; }
      .dv2 .topbar .search-box .search-text { display: none; }
      .dv2 .topbar .c { display: none; }
      .dv2 .topbar .r { gap: 10px; }
      /* Hide all but icon on right links */
      .dv2 .topbar .r a {
        font-size: 0; padding: 2px;
      }
      .dv2 .topbar .r a svg {
        width: 14px; height: 14px; display:block;
      }

      /* LAYOUT — drop TOC sidebar, full-width main */
      .dv2 .shell { grid-template-columns: 1fr; }
      .dv2 .toc { display: none; }
      .dv2 .main { padding: 22px 18px 48px; }

      /* HERO */
      .dv2 .hero {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-bottom: 28px;
      }
      .dv2 .hero .kicker {
        font-size: 9px;
        letter-spacing: 0.18em;
        margin-bottom: 14px;
      }
      .dv2 .hero h1 {
        font-size: 34px;
        line-height: 1.0;
        margin-bottom: 14px;
      }
      .dv2 .hero h1 br { display: none; }
      .dv2 .hero .lead { font-size: 13px; line-height: 1.55; margin-bottom: 18px; }
      .dv2 .hero .cta-row {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 18px;
      }
      .dv2 .hero .cta {
        padding: 11px 12px;
        font-size: 9px;
        flex: 1 1 auto;
        justify-content: center;
        min-height: 40px;
      }
      .dv2 .schematic { aspect-ratio: auto; padding: 12px; }

      /* SECTION */
      .dv2 .section { padding: 30px 0; scroll-margin-top: 56px; }
      .dv2 .sec-head {
        grid-template-columns: auto 1fr;
        grid-template-areas:
          "num title"
          "meta meta";
        gap: 10px 14px;
        margin-bottom: 18px;
        padding-bottom: 10px;
      }
      .dv2 .sec-head .num { grid-area: num; padding-bottom: 0; align-self: center; }
      .dv2 .sec-head .title { grid-area: title; gap: 10px; }
      .dv2 .sec-head .title .ico { width: 22px; height: 22px; }
      .dv2 .sec-head .title .ico svg { width: 12px; height: 12px; }
      .dv2 .sec-head h2 { font-size: 19px; }
      .dv2 .sec-head h2 .sub { font-size: 9px; margin-top: 3px; }
      .dv2 .sec-head .meta { grid-area: meta; text-align: left; padding-bottom: 0; font-size: 9px; }

      /* ABOUT */
      .dv2 .about {
        grid-template-columns: 1fr;
        gap: 22px;
      }
      .dv2 .about p { font-size: 13px; max-width: 100%; }
      .dv2 .about-side .row { grid-template-columns: 95px 1fr; gap: 10px; }

      /* DOMAIN MATRIX — horizontally scroll within its own box,
         never push body width past viewport */
      .dv2 .matrix-caption { font-size: 12px; }
      .dv2 .matrix {
        display: grid;
        grid-template-columns: 150px repeat(5, 70px);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .dv2 #domains { min-width: 0; overflow: hidden; }
      .dv2 .matrix .cell { min-height: 36px; padding: 8px; font-size: 9px; }
      .dv2 .matrix .cell.row-h { font-size: 11px; }
      .dv2 .matrix .cell.col-h { font-size: 8px; letter-spacing: 0.1em; }

      /* PROJECTS */
      .dv2 .filter-bar { font-size: 9px; }
      .dv2 .filter { padding: 9px 11px; font-size: 9px; }
      .dv2 .proj-head {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "code yr"
          "core core"
          "metrics metrics"
          "arr arr";
        gap: 12px;
        padding: 14px;
      }
      .dv2 .proj-head .code { grid-area: code; padding-top: 0; font-size: 10px; }
      .dv2 .proj-head .yr { grid-area: yr; padding-top: 0; font-size: 10px; }
      .dv2 .proj-head .core { grid-area: core; min-width:0; }
      .dv2 .proj-head .core h3 { font-size: 16px; }
      .dv2 .proj-head .core .sm { font-size: 12px; }
      .dv2 .proj-head .metrics { grid-area: metrics; }
      .dv2 .proj-head .metric .v { font-size: 15px; }
      .dv2 .proj-head .arr { grid-area: arr; justify-self: center; padding-top: 0; }
      .dv2 .proj.open .proj-head .arr { transform: rotate(90deg); }

      /* Case-study expand → single column */
      .dv2 .proj-body { padding: 0 14px 18px; }
      .dv2 .proj-body .grid,
      .dv2 .proj-body .footer-grid { grid-template-columns: 1fr; gap: 18px; }
      .dv2 .proj-body .header-band {
        flex-direction: column; gap: 4px; align-items: flex-start;
      }

      /* TIMELINE — 2-row stack per entry */
      .dv2 .tl { grid-template-columns: 1fr; gap: 0; }
      .dv2 .tl .yr-cell {
        padding: 14px 0 4px; border-top: 1px solid var(--line);
        font-size: 10px;
      }
      .dv2 .tl .who-cell {
        padding: 2px 0 4px 20px; border-top: none;
      }
      .dv2 .tl .who-cell::before { top: -22px; }
      .dv2 .tl .note-cell { padding: 4px 0 14px 20px; border-top: none; }

      /* SKILLS — single column */
      .dv2 .skills { grid-template-columns: 1fr; gap: 18px; }

      /* WRITING */
      .dv2 .write-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "meta arr"
          "ttl arr"
          "ex ex";
        gap: 6px 12px;
        padding: 14px 0;
      }
      .dv2 .write-row .date {
        grid-area: meta;
        display: inline-flex; gap: 10px;
        font-size: 10px;
      }
      .dv2 .write-row .kind { display: none; }
      .dv2 .write-row .ttl { grid-area: ttl; font-size: 14px; }
      .dv2 .write-row .ex { grid-area: ex; font-size: 12px; max-width: 100%; }
      .dv2 .write-row .arr { grid-area: arr; align-self: center; padding-top: 0; }

      /* NOW */
      .dv2 .now-body .row { grid-template-columns: 100px 1fr; gap: 12px; }

      /* CONTACT */
      .dv2 .contact-block .pull {
        font-size: 26px;
        margin: 0 0 20px;
      }
      .dv2 .contact-block .links {
        grid-template-columns: 1fr 1fr;
      }
      .dv2 .contact-block .links a {
        padding: 12px 10px;
        min-height: 78px;
      }
      .dv2 .contact-block .links a .v { font-size: 11px; }
      .dv2 .contact-block .links a .k { font-size: 8px; letter-spacing: 0.18em; }

      /* COLOPHON */
      .dv2 .colophon {
        flex-direction: column;
        gap: 8px;
        font-size: 8px;
        padding: 18px 0 0;
      }

      /* COMMAND PALETTE — already responsive via min(), bump padding-top */
      .cmd-overlay { padding-top: 8vh; }
      .cmd-row-hint { display: none; }
      .cmd-foot { flex-wrap: wrap; gap: 8px 14px; font-size: 9px; }
    }

    /* Very small phones */
    @media (max-width: 420px) {
      .dv2 .hero h1 { font-size: 28px; }
      .dv2 .hero .cta { flex: 1 1 100%; }
      .dv2 .contact-block .pull { font-size: 22px; }
      .dv2 .contact-block .links { grid-template-columns: 1fr; }
      .dv2 .topbar .l > span:first-child { display: none; }
    }

    /* Print styles */
    @media print {
      .dv2 .progress-bar,
      .dv2 .toast,
      .dv2 .topbar,
      .dv2 .toc,
      .dv2 .frame-corner,
      .dv2 .share-btn,
      .dv2 .filter-bar {
        display: none !important;
      }
      /* Content must never print hidden: neutralize scroll/entrance reveals */
      .dv2 .scroll-reveal,
      .dv2 .scroll-reveal.in-view,
      .dv2 .reveal {
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        transform: none !important;
      }
      .dv2 {
        background: white !important;
        color: black !important;
      }
      .dv2 .main {
        margin-left: 0 !important;
        padding: 20px !important;
      }
    }
  `;
  document.head.appendChild(s);
};

window.DossierV2Styles = DossierV2Styles;