/* Inter latin subset, self-hosted (SIL OFL, see assets/fonts/Inter-OFL.txt). Same file as benji.org uses;
     Google's current Inter is a newer version whose text runs ~0.7% wider. */
  @font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  /* metric-matched fallback: keeps line breaks stable when Inter swaps in (values from benji.org's next/font) */
  @font-face{font-family:"Inter Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}

  :root{
    color-scheme: light;
    /* palette — warm paper, 3-tier text, hairlines */
    --bg:        oklch(0.985 0.006 80);
    --bg-2:      oklch(0.970 0.006 80);
    --bg-3:      oklch(0.945 0.007 80);
    --surface:   oklch(0.995 0.003 80);   /* mini-UI windows in diagrams */
    --line:      oklch(0.89  0.006 80);
    --line-soft: oklch(0.94  0.005 80);
    --stroke:    oklch(0.79  0.006 80);
    --fg:        oklch(0.20  0 0);
    --fg-2:      oklch(0.37  0 0);
    --fg-3:      oklch(0.49  0 0);
    --fg-4:      oklch(0.54  0 0);
    --accent:    oklch(0.52  0.18 35);   /* vermilion, text-safe */
    --accent-2:  oklch(0.68  0.15 45);   /* strokes and fills only, never text */
    --warn:      oklch(0.52  0.12 70);
    --danger:    oklch(0.55  0.18 25);
    --hl:        oklch(0.92  0.12 95);   /* highlighter */
    --ink-y:     oklch(0.78  0.14 75);   /* doodle star */
    --sel-bg:    oklch(0.947 0 0);       /* = #ededed, as on benji.org */
    --sel-fg:    oklch(0.178 0 0);       /* = #111 */

    --hand:  "Caveat", ui-rounded, cursive;
    --mono: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, Courier, monospace;
    --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --measure: 550px;
    --label-col: 9.5rem;
    --index-col: 108px;
    --radius: 4px;

    --t: cubic-bezier(.2,.7,.2,1);
    --ease-smooth: cubic-bezier(.19,1,.22,1);
  }
  /* light is the default; dark is opt-in via the top-right toggle (saved in localStorage), not the OS setting */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:        oklch(0.145 0.010 255);
    --bg-2:      oklch(0.175 0.012 255);
    --bg-3:      oklch(0.205 0.013 255);
    --surface:   oklch(0.205 0.013 255);
    --line:      oklch(0.28  0.012 255);
    --line-soft: oklch(0.22  0.012 255);
    --stroke:    oklch(0.36  0.012 255);
    --fg:        oklch(0.94  0.008 255);
    --fg-2:      oklch(0.78  0.010 255);
    --fg-3:      oklch(0.68  0.012 255);
    --fg-4:      oklch(0.62  0.012 255);
    --accent:    oklch(0.74  0.16 48);
    --accent-2:  oklch(0.62  0.15 42);
    --warn:      oklch(0.82  0.150 70);
    --danger:    oklch(0.70  0.180 25);
    --hl:        oklch(0.42  0.08 85);
    --ink-y:     oklch(0.80  0.13 80);
    --sel-bg:    oklch(0.32  0.012 255);
    --sel-fg:    oklch(0.96  0.008 255);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    background:var(--bg);color:var(--fg);font-family:var(--sans);
    font-size:14px;line-height:20px;font-weight:460;letter-spacing:-.09008px;-webkit-text-size-adjust:100%;text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  body{min-height:100vh;position:relative}

  /* theme toggle: a small icon in the top-right corner of the page (scrolls away with it) */
  .theme-toggle{all:unset;position:absolute;top:16px;right:16px;width:32px;height:32px;display:grid;place-items:center;color:var(--fg-3);cursor:pointer;border-radius:8px;transition:color .2s var(--t)}
  .theme-toggle:hover{color:var(--fg)}
  .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .theme-toggle svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .theme-toggle .i-sun{display:none}
  :root[data-theme="dark"] .theme-toggle .i-sun{display:block}
  :root[data-theme="dark"] .theme-toggle .i-moon{display:none}

  a{color:inherit;text-decoration:none}
  ::selection{background:var(--sel-bg);color:var(--sel-fg)}

  /* ——— Layout ——— */
  main{max-width:calc(var(--measure) + 32px);margin:0 auto;padding:80px 16px 0;min-width:0}
  @media (max-width:768px){main{padding:32px 24px 0}}

  .back{display:inline-block;font-size:13px;color:var(--fg-3);margin-bottom:2.5rem;transition:color .2s var(--t)}
  .back:hover{color:var(--fg)}
  .doc-title{font-size:15px;font-weight:600;line-height:normal;letter-spacing:-.13px}
  .doc-meta{font-size:14px;color:var(--fg-3);margin:2px 0 2.5rem}

  /* ——— Links ——— */
  .ilink,.case-links a,.paperlinks .pdf{
    color:var(--fg);
    text-decoration:underline 1px var(--stroke);text-underline-offset:3px;
    transition:text-decoration-color .2s ease;
  }
  .ilink:hover,.case-links a:hover,.paperlinks .pdf:hover{text-decoration-color:var(--accent)}

  /* the one hand-drawn mark on the landing: it replaces the underline of a single link */
  .nb{white-space:nowrap}   /* keeps the comma glued to the marked link when the line wraps */
  .mark{position:relative;display:inline-block;white-space:nowrap}
  .mark .ilink,.mark .ilink:hover{text-decoration-color:transparent}
  .scribble{position:absolute;left:-3%;width:106%;top:calc(100% - 6px);height:auto;overflow:visible;pointer-events:none}
  .scribble path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s cubic-bezier(.65,0,.35,1) .7s forwards;transition:stroke-width .2s var(--t)}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media (hover:hover){.mark:hover .scribble path{stroke-width:3.4}}

  /* ——— Landing ——— */
  .name{font-size:14px;font-weight:500;line-height:20px;margin:0}
  /* spacing measured on benji.org: name→line 24px, line→first paragraph 24px, paragraphs 36px apart */
  .eyebrow{font-size:14px;line-height:20px;color:var(--fg-3);margin:4px 0 24px}
  .prose p{color:var(--fg);text-wrap:pretty}
  .prose p + p{margin-top:16px}

  .index{margin-top:48px}
  .index-h{font-size:14px;font-weight:460;color:var(--fg-3);padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
  /* year-grouped list: the year sits in its own column outside the links, so hover dimming skips it
     and the row separators start after it (full-width lines only between year groups), as on benji.org */
  .rows{list-style:none}
  .yg{display:grid;grid-template-columns:var(--index-col) 1fr}
  .yg:not(:last-child){border-bottom:1px solid var(--line-soft)}
  .yg > ul{list-style:none}
  .yg > ul > li + li{border-top:1px solid var(--line-soft)}
  .yg .yr{font-size:14px;line-height:20px;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap;padding:11.76px 0}
  .row{display:grid;grid-template-columns:1fr auto;gap:0 16px;align-items:baseline;padding:11.76px 0;transition:opacity .14s ease}
  .row .t{color:var(--fg)}
  .row .k{color:var(--fg-3);white-space:nowrap}
  /* list hover: dim the siblings, keep the hovered row (hover-capable, wide screens only) */
  @media (hover:hover) and (min-width:520px){.rows:not(.static):hover .row{opacity:.35}.rows:not(.static) .row:hover,.rows .row:focus-visible{opacity:1}}

  footer.page-foot{position:relative;margin-top:40px;padding:39px 0 80px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--fg-3)}
  footer.page-foot::before{content:"";position:absolute;top:0;left:0;width:50px;height:1px;background:var(--line)}

  /* shared label-column grid: facts, bio, case details, timeline, awards, index rows */
  .facts dl,.case dl{display:grid;grid-template-columns:var(--label-col) 1fr;gap:.625rem 1rem;font-size:14px;line-height:1.4286}
  .facts dt,.case dt{font-size:13px;color:var(--fg-3);padding-top:2px;grid-column:1}
  .facts dd,.case dd{color:var(--fg-2);grid-column:2}
  .facts .dim{display:block;font-family:var(--mono);color:var(--fg-3);font-size:12.5px;margin-top:2px;font-variant-numeric:tabular-nums}

  .bio{margin-top:1.5rem}
  .bio .cell{display:grid;grid-template-columns:var(--label-col) 1fr;gap:0 1rem;padding:1.25rem 0;border-top:1px solid var(--line-soft)}
  .cell h4{font-size:13px;font-weight:450;color:var(--fg-3);padding-top:2px}
  .cell p{color:var(--fg-2);font-size:14px;line-height:1.4286;grid-column:2}
  .cell ul{grid-column:2;list-style:none;font-size:14px;color:var(--fg-2);display:flex;flex-direction:column;gap:.5rem}

  .pills{display:flex;flex-wrap:wrap;gap:0}
  .pill{font-size:13px;color:var(--fg-3)}
  .pill:not(:last-child)::after{content:"·";margin:0 .5em;color:var(--fg-4)}

  /* ——— Project pages ——— */
  .proj{display:flex;flex-direction:column;color:inherit}
  /* diagram stage: a quiet tint; mini product windows rise from its bottom edge and are cropped by it */
  .proj .art{
    position:relative;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;
    padding:44px 24px 0;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px;
  }
  .proj .art svg{display:block;width:100%;max-width:440px;height:auto;overflow:visible;
    font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
  .proj .art .badge,.proj .art .ex{position:absolute;top:14px;font-size:13px;line-height:20px;color:var(--fg-3)}
  .proj .art .badge{left:16px}
  .proj .art .ex{right:16px;z-index:2;transition:color .2s var(--t)}
  .proj .art .ex:hover{color:var(--fg)}
  .proj .art text{fill:var(--fg-3)}
  .proj .art .t1{fill:var(--fg);font-size:15px;font-weight:530}
  .proj .art .t2{fill:var(--fg-2);font-size:14px}
  .proj .art .big{fill:var(--fg);font-size:26px;font-weight:560;letter-spacing:-.02em}
  .proj .art .acc{fill:var(--accent);font-weight:530}
  .proj .art .on-acc{fill:var(--surface);font-weight:530}
  .proj .art .sub{font-size:13px}
  .proj .art .win{fill:var(--surface);stroke:var(--line)}
  .proj .art .inset{fill:var(--bg-2);stroke:var(--line)}
  .proj .art .rule{fill:none;stroke:var(--line)}
  .proj .art .dots circle,.proj .art .track{fill:var(--line)}
  .proj .art .hub{fill:var(--stroke)}
  .proj .art .bar{fill:var(--fg-4)}
  .proj .art .bar-a{fill:var(--accent-2)}
  .proj .art .ring{fill:none;stroke:var(--accent-2);stroke-width:1.5}
  .proj .art .box{fill:none;stroke:var(--accent);stroke-width:1.5}
  .proj .art .box-2{fill:none;stroke:var(--fg-4);stroke-dasharray:3 3}
  .proj .art .tab{fill:var(--accent)}
  .proj .art .road{fill:none;stroke:var(--line);stroke-width:26}
  .proj .art .lane{fill:none;stroke:var(--bg);stroke-width:1.5;stroke-dasharray:6 8}
  .proj .art .ld{stroke:var(--accent-2);stroke-width:2;stroke-linecap:round}
  .proj .art .tgt{fill:var(--accent);stroke:var(--bg-2);stroke-width:2}
  .proj .art .car{fill:var(--fg-2)}
  .proj .art .glass{stroke:var(--surface);stroke-width:1.5}
  .proj .body{padding:1.5rem 0 0;flex:1;display:flex;flex-direction:column}
  .proj p{color:var(--fg-2);font-size:14px;line-height:1.4286;margin-bottom:.875rem}
  .proj .pills{margin-top:auto}

  .award{
    display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
    font-size:13px;color:var(--fg-2);margin-bottom:.75rem;
  }
  .award::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}

  .case{position:relative;margin-top:1.5rem}
  .case dl{padding:0 0 .25rem}
  .case code{font-family:var(--mono);font-size:.9em;color:var(--fg)}
  .case-links{display:flex;flex-wrap:wrap;gap:1.25rem;padding:.875rem 0 .25rem;font-size:13px}

  /* diagram motion, each with a cause: result in view (bar), detection then logging (det, fill), recipe arrived (plate) */
  .proj .art .fill{transform-box:fill-box;transform-origin:left center;transition:transform 1s var(--t) 1.1s}
  .proj .art .grow{transition:transform 1.4s cubic-bezier(.33,1,.68,1)}   /* matches the 1.4s count-up */
  .js .proj .art .fill{transform:scaleX(0)}
  .proj.in .art .fill{transform:none}
  .proj .art .det{transition:opacity .4s var(--t) .5s}
  .proj .art .det-2{transition-delay:.8s}
  .js .proj .art .det{opacity:0}
  .proj.in .art .det{opacity:1}
  .proj .art .plate{transform-box:fill-box;transform-origin:center;transition:transform 1.2s var(--t) .6s}
  .proj.in .art .plate{transform:rotate(72deg)}
  @media (hover:hover){ .proj.in .art:hover .plate{transform:rotate(144deg);transition-delay:0s} }

  /* ——— Work (role) pages ——— */
  .role .tl-org{font-size:14px;margin:0 0 16px}
  .role .tl-body{font-size:14px;color:var(--fg)}

  /* ——— Resume page ——— */
  .facts{margin-top:0}
  .res-panel{position:relative;margin-top:3rem}
  .res-tabs{display:flex;gap:1.25rem;border-bottom:1px solid var(--line-soft);font-size:13px}
  .res-tabs button{
    font:inherit;padding:.5rem 0;background:none;border:0;color:var(--fg-3);
    cursor:pointer;position:relative;transition:color .2s var(--t);
  }
  .res-tabs button:hover{color:var(--fg)}
  .res-tabs button.on{color:var(--fg)}
  .res-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent)}
  .res-tabs .spacer{flex:1}
  .res-tabs .dl{padding:.5rem 0;color:var(--fg-2);font-size:13px;display:flex;align-items:center;gap:8px;text-decoration:underline 1px var(--stroke);text-underline-offset:3px}
  .res-tabs .dl:hover{color:var(--fg)}

  /* without JS every tab is shown, stacked */
  .res-tab{padding:1.5rem 0 0}
  .js .res-tab{display:none}
  .js .res-tab.on{display:block}

  /* timeline: date in the label column */
  .tl-item{display:grid;grid-template-columns:var(--label-col) 1fr;column-gap:1rem;padding-bottom:1.75rem}
  .tl-item:last-child{padding-bottom:0}
  .tl-date{grid-column:1;grid-row:1 / span 3;white-space:nowrap;font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums;padding-top:2px}
  .tl-title,.tl-org,.tl-body{grid-column:2}
  .tl-title{font-size:14px;font-weight:560;letter-spacing:-.005em;margin-bottom:2px}
  .tl-org{font-size:13px;color:var(--fg-3);margin-bottom:.5rem}
  .tl-body{font-size:14px;color:var(--fg-2);line-height:1.4286}
  .tl-body ul{margin-top:.5rem;list-style:none;display:flex;flex-direction:column;gap:.25rem}
  .tl-body li{position:relative;padding-left:14px}
  .tl-body li::before{content:"•";position:absolute;left:0;color:var(--fg-4)}

  .skillgrid{display:flex;flex-direction:column;gap:1rem}
  .skillgroup{display:grid;grid-template-columns:var(--label-col) 1fr;gap:0 1rem}
  .skillgroup h5{font-size:13px;font-weight:450;color:var(--fg-3);padding-top:2px}
  .skillgroup .pill{font-size:14px;color:var(--fg-2)}

  .awrow{
    display:grid;grid-template-columns:var(--label-col) 1fr auto;gap:0 1rem;align-items:start;
    padding:.75rem 0;border-bottom:1px solid var(--line-soft);
  }
  .awrow:last-child{border-bottom:none}
  .awyear{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums;padding-top:2px}
  .awyear.same{color:transparent}
  .awtitle{font-size:14px;font-weight:500;letter-spacing:-.005em}
  .awdesc{font-size:13px;color:var(--fg-3);margin-top:2px}
  .awtag{font-size:13px;color:var(--fg-3);white-space:nowrap;padding-top:2px}
  .tl-body strong, .proj p strong{color:var(--fg);font-weight:560}
  .awtag.gold{color:var(--warn)}

  /* ——— Papers page ——— */
  .paperlinks{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
  .paperlinks li{border-bottom:1px solid var(--line-soft);padding-bottom:.25rem}
  .paperlinks .psum{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:.875rem 0;font-size:14px;line-height:1.4286;color:var(--fg-2)}
  .paperlinks .pidx{grid-column:1;grid-row:1;font-family:var(--mono);font-size:12.5px;color:var(--fg-3);padding-top:2px}
  .paperlinks .ptitle{grid-column:2;grid-row:1}
  .paperlinks .pvenue{grid-column:2;grid-row:2;font-size:13px;color:var(--fg-3)}
  .paperlinks li > p{position:relative;padding:0 0 .625rem 38px;font-size:14px;line-height:1.4286;color:var(--fg-2);margin:0}
  .paperlinks .pdf{display:inline-block;margin:0 0 1rem 38px;font-size:13px}

  /* ——— Handwritten ink: highlighter, bracket, margin note, doodles ——— */
  .em{position:relative}
  /* slice (not clone) so the swipe runs across a wrapped highlight line by line, like a real pen */
  .hl{background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 0/100% 100%;border-radius:.2em;padding:.05em .1em;margin:0 -.1em;color:var(--fg)}
  .js .hl{background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .15s}
  .js .em.in .hl,.js .hl.em.in{background-size:100% 100%}

  .brk{position:absolute;top:2px;left:calc(100% + 1.25rem);width:12px;height:calc(100% - 4px);display:none;fill:none;stroke:var(--fg-3);stroke-width:1.6;stroke-linecap:round;overflow:visible}
  .note{position:absolute;top:50%;left:calc(100% + 2.75rem);width:max-content;max-width:10rem;display:none;font:500 21px/1.1 var(--hand);color:var(--fg-2);transform:translateY(-50%) rotate(-3deg);transform-origin:left center}
  @media (min-width:1100px){.brk,.note{display:block}}
  .js .brk path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease .7s}
  .js .em.in .brk path{stroke-dashoffset:0}
  .js .note{clip-path:inset(-30% 100% -30% 0);transition:clip-path .9s steps(14) 1.1s}   /* stepped = "being written" */
  .js .em.in .note{clip-path:inset(-30% -10% -30% 0)}

  .doodle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--fg-3);overflow:visible;pointer-events:none}
  .doodle .a{stroke:var(--accent-2)} .doodle .bgf{fill:var(--bg)} .doodle-star{color:var(--ink-y)}
  .doodle-m{position:absolute;top:var(--y,0);right:calc(100% + 3rem);width:56px;height:auto;display:none}
  @media (min-width:1100px){.doodle-m{display:block}}
  .doodle-robot{width:22px;height:22px;flex:none}
  /* easter egg: the footer robot is a button; each poke makes it hop and say something in handwriting */
  .robot{all:unset;display:inline-flex;cursor:pointer;border-radius:6px;transform-origin:50% 90%}
  .robot:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
  .robot.hop{animation:hop .45s var(--ease-smooth)}
  @keyframes hop{30%{transform:translateY(-7px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}100%{transform:none}}
  .bubble{font:500 17px/1 var(--hand);color:var(--fg-2);transform:rotate(-2deg);transform-origin:left center}
  .bubble:empty{display:none}
  .bubble a{color:var(--accent);text-decoration:underline 1px;text-underline-offset:3px}
  .bubble.say{animation:say .35s var(--ease-smooth)}
  @keyframes say{from{opacity:0;transform:translateX(-4px) rotate(-2deg)}}
  .js .doodle :is(path,circle){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-smooth)}
  .js .doodle .f{transition-delay:.7s}
  .js .doodle.in :is(path,circle){stroke-dashoffset:0}
  .doodle-robot .eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s 3s infinite}
  @keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
  @media (hover:hover){.doodle.poke{pointer-events:auto;transform-origin:50% 90%}.doodle.poke:hover{animation:shake .6s ease-in-out}}
  @keyframes shake{20%{transform:rotate(-9deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}

  /* ——— Focus & motion ——— */
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  h1, h2, h3{text-wrap:balance}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
    .reveal{opacity:1;transform:none}
    .scribble path{stroke-dashoffset:0}
    .js .hl{background-size:100% 100%} .js .note{clip-path:none}
    .js .brk path,.js .doodle :is(path,circle){stroke-dashoffset:0}
    .proj .art *{transition-delay:0s !important}
  }

  /* ——— Scroll reveal (only when JS is on, so content never stays hidden) ——— */
  .js .reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s var(--ease-smooth)}
  .js .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.05s}
  .reveal.d2{transition-delay:.1s}
  .reveal.d3{transition-delay:.15s}
  .reveal.d4{transition-delay:.2s}

  /* ——— Responsive ——— */
  @media (max-width: 768px){
    .awtag{display:none}
    .awrow{grid-template-columns:var(--label-col) 1fr}
    .res-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
    .res-tabs::-webkit-scrollbar{display:none}
    .res-tabs button{flex-shrink:0}
  }
  @media (max-width: 520px){
    :root{--label-col:5.5rem}
    .proj .art{margin-inline:-24px;padding:44px 0 0;border-radius:0;border-inline:0}   /* the stage runs to the screen edges so the SVG stays legible */
    :root{--index-col:56px}
    .row{grid-template-columns:1fr}
    .row .k{display:none}
    /* label grids that carry long labels stack the label above its content */
    .facts dl,.case dl,.bio .cell,.tl-item,.skillgroup{grid-template-columns:1fr}
    .facts dt,.case dt,.cell h4,.skillgroup h5,.tl-date{grid-column:1;grid-row:auto;padding-top:0}
    .facts dd,.case dd,.cell p,.cell ul,.tl-title,.tl-org,.tl-body{grid-column:1}
    .facts dd + dd{margin-top:-.25rem}
    .tl-date{margin-bottom:2px}
    .cell h4,.skillgroup h5{margin-bottom:.25rem}
    .awyear.same{display:none}
    .awrow{grid-template-columns:1fr}
  }