/* =====================================================================
   Arnav Akhoury: patent-drawing identity.
   Layout: every section is a numbered drawing sheet with a running
   patent header. Light = ink on drafting paper with a non-photo-blue
   grid. Dark = a cyanotype (true blueprint) print.
   ===================================================================== */
:root {
  --paper: #fafaf7;          /* drafting paper */
  --paper-2: #f0f1ec;
  --ink: #16181b;            /* india ink */
  --ink-2: #4a4f57;
  --ink-3: #868c94;
  --hair: rgba(22, 24, 27, .16);
  --grid: rgba(74, 168, 206, .1);     /* non-photo blue */
  --grid-major: rgba(74, 168, 206, .22);
  --stamp: #3340c4;          /* rubber-stamp violet-blue */
  --stamp-tint: rgba(51, 64, 196, .08);
  --redline: #c9381f;        /* examiner's red pencil */
  --display: "Old Standard TT", "Times New Roman", Times, serif;
  --body: "B612", "Segoe UI", system-ui, sans-serif;
  --mono: "B612 Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f2b4a; --paper-2: #133559; --ink: #eef3f8; --ink-2: #b9c9da; --ink-3: #7f98b2;
    --hair: rgba(238, 243, 248, .2); --grid: rgba(170, 205, 240, .09); --grid-major: rgba(170, 205, 240, .18);
    --stamp: #ffcf5c; --stamp-tint: rgba(255, 207, 92, .1); --redline: #ff9480;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f2b4a; --paper-2: #133559; --ink: #eef3f8; --ink-2: #b9c9da; --ink-3: #7f98b2;
  --hair: rgba(238, 243, 248, .2); --grid: rgba(170, 205, 240, .09); --grid-major: rgba(170, 205, 240, .18);
  --stamp: #ffcf5c; --stamp-tint: rgba(255, 207, 92, .1); --redline: #ff9480;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 15.5px/1.68 var(--body);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 12px 12px, 12px 12px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .5s, color .5s;
}
::selection { background: var(--stamp); color: var(--paper); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
kbd { font: 400 10.5px var(--mono); border: 1px solid currentColor; padding: 0 5px; opacity: .8; }
.mono { font-family: var(--mono); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }

/* hatches (section-lining) for HTML elements */
.hatch-diag { background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 6px); }
.hatch-cross { background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 7px); }
.hatch-dots { background: radial-gradient(var(--ink) 1.1px, transparent 1.4px) 0 0 / 6px 6px; }
.hatch-grid { background: linear-gradient(var(--ink) 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / 6px 6px; }
.hatch-lines { background: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 5px); }
.hatch-line { stroke: var(--ink); stroke-width: .8; }

/* ---------------- RUNNING HEADER ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) 10px;
  background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.scrolled { border-color: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.brand-mark .accent { stroke: var(--stamp); }
.brand-text { font: 400 19px var(--display); letter-spacing: .01em; white-space: nowrap; }
.tool-btn, kbd { white-space: nowrap; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { text-decoration: none; font: 400 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); border-color: var(--ink); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.sheet-counter { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-counter b { color: var(--ink); font-weight: 700; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--ink); font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; transition: background .2s, color .2s; }
.tool-btn:hover { background: var(--ink); color: var(--paper); }
.swatch { width: 12px; height: 12px; border: 1px solid currentColor; background: #0f2b4a; }
:root[data-theme="dark"] .swatch { background: #fafaf7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .swatch { background: #fafaf7; } }

/* ---------------- SHEETS ---------------- */
.sheet { max-width: var(--maxw); margin: 0 auto; padding: clamp(84px, 11vw, 140px) var(--gutter) 0; }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.sheet-title { font: 400 clamp(40px, 5.6vw, 74px)/1 var(--display); letter-spacing: -.01em; margin: 40px 0 14px; text-wrap: balance; }
.sheet-sub { margin: 0 0 44px; max-width: 64ch; color: var(--ink-2); }
.lede { font-size: clamp(16px, 1.4vw, 17.5px); color: var(--ink-2); max-width: 60ch; }
.lede strong { color: var(--ink); }

.fig { margin: 0; }
.fig figcaption { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.fig-no { font: italic 400 22px var(--display); letter-spacing: .02em; text-transform: none; color: var(--ink); }

/* ---------------- HERO ---------------- */
.hero { padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: 36px; }
.hero-copy { min-width: 0; }
.role { margin: 0 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--stamp); }
.string-meta { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.string-meta b { color: var(--ink); font-weight: 400; }
.locales { display: flex; flex-wrap: wrap; gap: 4px 2px; margin: 18px 0 26px; border-bottom: 1px solid var(--hair); }
.locales button { font: 400 12.5px var(--body); letter-spacing: .01em; padding: 6px 10px 8px; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.locales button:hover { color: var(--ink); }
.locales button[aria-selected="true"] { color: var(--ink); border-color: var(--stamp); }
.headline { font: 400 clamp(42px, 6vw, 80px)/1.04 var(--display); letter-spacing: -.015em; margin: 0; min-height: 3.15em; text-wrap: balance; }
.headline em { font-style: italic; color: var(--stamp); }
.headline.swap { animation: wipe .7s cubic-bezier(.3,.7,.2,1) both; }
@keyframes wipe { from { clip-path: inset(-30% 100% -30% -5%); } to { clip-path: inset(-30% -5% -30% -5%); } }
.headline:lang(ja) { font-family: "Noto Serif JP", var(--display); line-height: 1.25; font-size: clamp(36px, 5vw, 66px); }
.headline:lang(zh) { font-family: "Noto Serif SC", var(--display); line-height: 1.25; font-size: clamp(36px, 5vw, 66px); }
.string-stats { margin: 14px 0 26px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.string-stats b { color: var(--ink); font-weight: 400; }
.string-stats .neg { color: var(--stamp); }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; text-decoration: none; font: 400 12.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--ink); transition: background .2s, color .2s; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--stamp); border-color: var(--stamp); color: var(--paper); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* FIG. 1 exploded isometric stack */
.fig1 svg { width: 100%; height: auto; display: block; overflow: visible; }
.plate { transition: transform 1.3s cubic-bezier(.2,.8,.15,1); }
.fig1:not(.exploded) .plate { transform: translateY(var(--collapse)); }
.plate .top { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.plate .inset { fill: none; stroke: var(--ink-3); stroke-width: .8; stroke-dasharray: 3 3; }
.plate .side-l { fill: url(#h-diag); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.plate .side-r { fill: url(#h-diag-dense); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.plate .pl-label { font: 400 12px var(--mono); fill: var(--ink); letter-spacing: .12em; text-transform: uppercase; }
.plate.focus .top { fill: var(--stamp-tint); stroke: var(--stamp); stroke-width: 1.8; }
.plate.focus .pl-label { fill: var(--stamp); }
.plate .dot { fill: var(--ink); }
.plate .leader { fill: none; stroke: var(--ink); stroke-width: .9; }
.plate .ref { font: 400 15px var(--mono); fill: var(--ink); }
.plate .ref-l { font: 400 10px var(--mono); fill: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.fig1 .cl { stroke: var(--ink-3); stroke-width: .9; stroke-dasharray: 22 5 4 5; fill: none; }
.fig1 .cl-t { font: italic 13px var(--display); fill: var(--ink-3); }
.fig1 .ref-all { font: 400 15px var(--mono); fill: var(--ink); text-decoration: underline; }
.fig1 .leader-all { fill: none; stroke: var(--ink); stroke-width: .9; marker-end: url(#arrow); }

/* ---------------- CLAIMS ---------------- */
.claims-body { max-width: 860px; }
.claims-intro { font: italic 400 24px var(--display); margin: 0 0 22px; }
.claim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; font: 400 clamp(18px, 1.7vw, 21px)/1.6 var(--display); }
.claim-list li { display: grid; grid-template-columns: 2.4em 1fr; }
.claim-list li > div { min-width: 0; }
.claim-list p { margin: 8px 0 0 2em; }
.claim-list em { font-style: italic; color: var(--stamp); }
.cn { font-weight: 700; }

/* ---------------- IMPACT ---------------- */
.counts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: 64px; }
.count { padding: 26px 24px 22px; border-right: 1px solid var(--hair); min-width: 0; }
.count:first-child { padding-left: 0; }
.count:last-child { border-right: 0; }
.count-v { font: 400 clamp(48px, 5.6vw, 80px)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.count-l { margin-top: 10px; font-weight: 700; }
.count-n { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.dims { display: grid; gap: 4px; }
.dim { display: grid; grid-template-columns: 210px 1fr 120px; gap: 20px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--hair); }
.dim-l b { display: block; font-weight: 700; font-size: 15px; }
.dim-l span { font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.dim-track { position: relative; height: 54px; }
.dim-before { position: absolute; left: 0; top: 4px; height: 14px; border: 1.5px solid var(--redline); background: repeating-linear-gradient(45deg, var(--redline) 0 1px, transparent 1px 6px); opacity: .85; }
.dim-after { position: absolute; left: 0; top: 22px; height: 14px; background: var(--ink); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.dims-wrap:not(.in) .dim-after { transform: scaleX(.02); }
.dim-line { position: absolute; top: 44px; height: 9px; border-left: 1px solid var(--ink-2); border-right: 1px solid var(--ink-2); }
.dim-line::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid var(--ink-2); }
.dim-v { font: 400 28px var(--display); text-align: right; font-variant-numeric: lining-nums; white-space: nowrap; }
.dim-axis { display: grid; grid-template-columns: 210px 1fr 120px; gap: 20px; padding-top: 6px; }
.dim-axis .ticks { position: relative; height: 22px; border-top: 1px solid var(--ink); }
.dim-axis .ticks span { position: absolute; top: 0; transform: translateX(-50%); font: 400 10px var(--mono); color: var(--ink-3); padding-top: 6px; }
.dim-axis .ticks span::before { content: ""; position: absolute; left: 50%; top: 0; height: 5px; border-left: 1px solid var(--ink); }
.dim-axis .ticks span:first-child { transform: none; } .dim-axis .ticks span:first-child::before { left: 0; }
.dim-axis .ticks span:last-child { transform: translateX(-100%); } .dim-axis .ticks span:last-child::before { left: auto; right: 0; }
.dim-key { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-top: 6px; }
.dim-key i { display: inline-block; width: 22px; height: 9px; margin-right: 8px; vertical-align: -1px; }
.dim-key .kb { border: 1.5px solid var(--redline); background: repeating-linear-gradient(45deg, var(--redline) 0 1px, transparent 1px 5px); }
.dim-key .ka { background: var(--ink); }

/* ---------------- JOURNEY / GIT ---------------- */
.lane-legend { list-style: none; margin: -24px 0 34px; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.lane-legend li { display: flex; align-items: center; gap: 10px; }
.lane-legend svg { width: 40px; height: 6px; overflow: visible; }
.lg, .git-svg path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.lg.l1, .git-svg path.l1 { stroke-dasharray: 7 5; stroke-linecap: butt; }
.lg.l2, .git-svg path.l2 { stroke-dasharray: .5 5.5; stroke-width: 2.6; }
.git { position: relative; --lane-w: 30px; --gutter-w: 110px; }
.git-svg { position: absolute; left: 0; top: 0; width: var(--gutter-w); overflow: visible; pointer-events: none; transition: clip-path 2s cubic-bezier(.3,.6,.2,1); }
.git:not(.in) .git-svg { clip-path: inset(0 0 100% 0); }
.git.in .git-svg { clip-path: inset(0 0 0 0); }
.git-svg circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.git-svg circle.head { fill: var(--stamp); stroke: var(--stamp); }
.git-svg circle.l1 { fill: var(--paper); } .git-svg circle.l2 { fill: var(--ink); }
.git-list { list-style: none; margin: 0; padding: 0 0 0 var(--gutter-w); }
.git-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hair); min-height: 56px; }
.git-row > div { min-width: 0; }
.git-row .when { font: 400 11.5px/1.7 var(--mono); color: var(--ink-3); padding-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.git-row h3 { margin: 0; font-size: 16.5px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.git-row .org { color: var(--ink-2); font-size: 14.5px; }
.git-row ul { margin: 10px 0 4px; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; }
.git-row li { margin: 3px 0; }
.git-row li::marker { content: "– "; color: var(--ink-3); }
.git-row.minor { min-height: 0; padding: 10px 0; }
.git-row.minor h3 { font-size: 15px; font-weight: 400; }
.pgroup summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pgroup summary::-webkit-details-marker { display: none; }
.pgroup .pg-hint::before { content: "+ show"; }
.pgroup[open] .pg-hint::before { content: "− hide"; }
.pg-hint { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); border-bottom: 1px solid currentColor; }
.pgroup summary:hover .pg-hint, .pgroup summary:focus-visible .pg-hint { color: var(--stamp); }
.pgl { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; gap: 4px; font-size: 14.5px; }
.pgl li { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 3px 0; border-bottom: 1px dotted var(--hair); }
.pgl a { text-decoration: none; }
.pgl a:hover { color: var(--stamp); text-decoration: underline; }
.pgl .mono { font-size: 11.5px; color: var(--ink-3); }
.tag { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tag.head { color: var(--paper); background: var(--stamp); padding: 1px 7px; }

/* ---------------- FILTERS ---------------- */
.filters { display: flex; gap: 4px 20px; flex-wrap: wrap; margin-bottom: 30px; }
.filters button { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 0; color: var(--ink-3); border-bottom: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; }
.filters button:hover { color: var(--ink); }
.filters button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.filters .sw { width: 14px; height: 14px; border: 1px solid var(--ink); display: inline-block; }

/* ---------------- WORK: project sheets with crop marks ---------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 34px 30px; }
.card {
  --mk: var(--ink);
  position: relative; text-align: left; border: 1px solid var(--ink); background: var(--paper);
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; min-height: 280px; min-width: 0;
  transition: background .25s;
}
.card::before {
  content: ""; position: absolute; inset: -13px; pointer-events: none;
  background:
    linear-gradient(var(--mk), var(--mk)) left 0 top 12px / 8px 1px no-repeat,
    linear-gradient(var(--mk), var(--mk)) left 12px top 0 / 1px 8px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 0 top 12px / 8px 1px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 12px top 0 / 1px 8px no-repeat,
    linear-gradient(var(--mk), var(--mk)) left 0 bottom 12px / 8px 1px no-repeat,
    linear-gradient(var(--mk), var(--mk)) left 12px bottom 0 / 1px 8px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 0 bottom 12px / 8px 1px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 12px bottom 0 / 1px 8px no-repeat;
  transition: inset .3s cubic-bezier(.2,.8,.2,1);
}
.card:hover { background: var(--paper-2); --mk: var(--stamp); }
.card:hover::before { inset: -18px; }
.card.hide { display: none; }
.c-top { display: flex; justify-content: space-between; gap: 10px; font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.c-top .c-fig { color: var(--stamp); }
.card h3 { margin: 4px 0 0; font: 400 27px/1.1 var(--display); text-wrap: balance; }
.card p { margin: 0; color: var(--ink-2); font-size: 14.5px; flex: 1; }
.c-parts { font: 400 11px var(--mono); color: var(--ink-2); letter-spacing: .02em; }
.c-parts span { color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; margin-right: 6px; }
.c-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ink); }
.c-kpi b { font: 400 25px var(--display); font-variant-numeric: lining-nums; }
.c-kpi span { display: block; font: 400 10.5px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.c-open { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; border-bottom: 1px solid currentColor; }
.card:hover .c-open { color: var(--stamp); }

/* ---------------- DRAWER (project sheet) ---------------- */
.drawer-scrim, .palette-scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 65%, transparent); opacity: 0; transition: opacity .3s; }
.drawer-scrim.open, .palette-scrim.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(880px, 100vw);
  background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 12px 12px;
  border-left: 1.5px solid var(--ink); transform: translateX(102%); transition: transform .55s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.open { transform: none; }
.drawer-close { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; z-index: 2; background: var(--paper); }
.drawer-body { padding: 40px clamp(16px, 5vw, 56px) 60px; }
.drawer-body .d-meta { font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.drawer-body h2 { font: 400 clamp(36px, 5vw, 58px)/1.02 var(--display); margin: 26px 0 14px; text-wrap: balance; }
.drawer-body .d-lede { font-size: 17.5px; color: var(--ink-2); margin: 0 0 14px; }
.drawer-body h3 { margin: 36px 0 12px; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.drawer-body ul.d-list { padding-left: 18px; color: var(--ink-2); margin: 0; }
.drawer-body ul.d-list li { margin: 6px 0; }
.drawer-body ul.d-list li::marker { content: "– "; }
.drawer-body .d-ctx { color: var(--ink-2); margin: 0; max-width: 66ch; }
.d-impact { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.d-impact li { padding: 10px 0; border-bottom: 1px solid var(--hair); font: 400 21px var(--display); }
.d-figure { margin: 0; border: 1px solid var(--ink); background: var(--paper); padding: 14px; overflow-x: auto; }
.d-figure figcaption { margin-top: 12px; text-align: center; font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.d-titleblock { margin-top: 44px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1px; background: var(--ink); border: 1.5px solid var(--ink); }
.d-titleblock div { background: var(--paper); padding: 8px 10px; min-width: 0; }
.d-titleblock span { display: block; font: 400 9.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.d-titleblock b { font-weight: 400; font-size: 14px; overflow-wrap: anywhere; }

/* ---------------- DIAGRAMS ---------------- */
.diagram { width: 100%; min-width: 560px; height: auto; display: block; }
.diagram text { font-family: var(--mono); }
.d-box rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; rx: 1px; }
.d-box.accent rect { stroke-width: 2.4; }
.d-box.warm rect { stroke-dasharray: 6 4; stroke-width: 1.4; }
.d-box.muted rect { stroke-dasharray: 3 3; fill: url(#h-diag); }
.d-box.muted text { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
.d-t { fill: var(--ink); font-size: 12px; text-anchor: middle; }
.d-s { fill: var(--ink-2); font-size: 9.5px; text-anchor: middle; }
.d-s.strong { fill: var(--ink); font-size: 12px; }
.d-cap { fill: var(--ink-3); font-size: 10px; letter-spacing: .12em; }
.d-note { fill: var(--ink-3); font-size: 10.5px; text-anchor: middle; }
.d-note.left { text-anchor: start; }
.d-note.big { fill: var(--stamp); font-size: 22px; font-family: var(--display) !important; }
.d-note.strong { fill: var(--ink); font-weight: 700; }
.d-ref { fill: var(--ink); font-size: 10.5px; }
.d-arrow { fill: none; stroke: var(--ink); stroke-width: 1.2; marker-end: url(#arrow); }
.d-arrow.accent { stroke: var(--stamp); stroke-width: 1.6; marker-end: url(#arrow-accent); stroke-dasharray: 6 4; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.d-arrow.warm { stroke-dasharray: 6 4; }
.d-arrow.dash { stroke-dasharray: 3 4; }
.d-arrowhead { fill: var(--ink); }
.d-arrowhead.accent { fill: var(--stamp); }
.d-dash { fill: none; stroke: var(--ink-3); stroke-dasharray: 2 4; }
.d-store rect { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.2; rx: 1px; }
.d-track { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.d-bar { fill: var(--ink); }
.d-bar.muted { fill: var(--redline); }
.d-thumbs rect { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1; }
.d-thumbs rect.on { fill: url(#h-diag); stroke: var(--ink); stroke-width: 1.6; }

/* ---------------- PATENTS ---------------- */
.patent-top { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 330px) 1fr; gap: clamp(28px, 6vw, 80px); align-items: end; margin-bottom: 48px; }
.tally-row { display: flex; align-items: flex-end; gap: 16px; }
.tally-row .mono { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); padding-bottom: 14px; }
.tally-num { font: 400 clamp(120px, 15vw, 190px)/.8 var(--display); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.tally-row.small { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink); }
.tally-row.small .tally-num { font-size: 64px; color: var(--ink-2); }
.tally-row.small .mono { padding-bottom: 6px; }
.tally-note { color: var(--ink-2); font-size: 14px; margin: 16px 0 0; }
.pchart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; align-items: end; height: 210px; border-bottom: 2px solid var(--ink); }
.pcol { display: flex; flex-direction: column-reverse; gap: 4px; }
.pblock { height: var(--bh, 34px); border: 1.2px solid var(--ink); background-color: var(--paper) !important; cursor: pointer; transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.8,.2,1), outline-color .2s; outline: 2px solid transparent; outline-offset: 2px; }
.pchart-fig:not(.in) .pblock { transform: scaleY(0); }
.pblock:hover, .pblock:focus-visible { outline-color: var(--stamp); }
.pyears { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; font: 400 12px var(--mono); padding-top: 8px; text-align: center; }
.patent-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.patent { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 26px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.patent.hide { display: none; }
.p-no { font: 400 12.5px var(--mono); display: flex; flex-direction: column; gap: 8px; }
.p-no i { font-style: normal; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.p-no .sw { width: 14px; height: 14px; border: 1px solid var(--ink); flex: none; }
.patent h3 { margin: 0 0 6px; font: 400 24px/1.2 var(--display); }
.patent p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 68ch; }
.stamp {
  justify-self: end; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 12px; border: 2.5px solid var(--stamp); outline: 1px solid var(--stamp); outline-offset: 2px;
  color: var(--stamp); text-decoration: none; font: 700 13px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  transform: rotate(var(--rot, -5deg)); filter: url(#rough); opacity: .9; transition: transform .25s, opacity .25s;
}
.stamp small { font-size: 9.5px; font-weight: 400; letter-spacing: .12em; }
.stamp:hover { transform: rotate(0) scale(1.05); opacity: 1; }
.patent-list.collapsed .patent:nth-child(n+9) { display: none; }
.show-all { margin-top: 18px; height: 40px; padding: 0 18px; border: 1px solid var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; transition: background .2s, color .2s; }
.show-all:hover { background: var(--ink); color: var(--paper); }
.also { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ink); display: grid; gap: 8px; font-size: 14.5px; }
.also p { margin: 0; color: var(--ink-2); }
.also .mono { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-right: 8px; }
.also p > .mono:first-child { display: inline-block; min-width: 92px; }
.also a { color: var(--ink); }
.patent-more { margin-top: 22px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); display: flex; gap: 18px; flex-wrap: wrap; }
.patent-more a { color: var(--ink); }

/* ---------------- BOM ---------------- */
.table-wrap { overflow-x: auto; }
.bom { width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); background: var(--paper); }
.bom th { font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; text-align: left; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); border-right: 1px solid var(--hair); color: var(--ink-2); }
.bom td { padding: 14px; border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); vertical-align: top; }
.bom tr:hover td { background: var(--stamp-tint); }
.bom .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); width: 70px; }
.bom td:first-child { font-family: var(--mono); width: 80px; }
.bom td:nth-child(2) { font: 400 22px var(--display); width: 200px; }
.bom td:last-child { color: var(--ink-2); }
.bom tr.focus td:nth-child(2) { color: var(--stamp); }

/* ---------------- TIME ZONES ---------------- */
.tz { margin-bottom: 64px; }
.tz-scroll { overflow-x: auto; padding-bottom: 6px; }
.tz-grid { display: grid; grid-template-columns: 150px repeat(24, minmax(22px, 1fr)); gap: 3px; align-items: center; font: 400 11px var(--mono); min-width: 720px; }
.tz-name { color: var(--ink); padding-right: 10px; line-height: 1.25; text-align: left; }
.tz-name small { display: block; color: var(--ink-3); font-size: 10px; }
.tz-name.home { color: var(--stamp); }
.tz-cell { height: 30px; border: 1px solid var(--hair); position: relative; }
.tz-cell.work { border-color: var(--ink); background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 5px); }
.tz-cell.overlap { border-color: var(--ink); background: var(--ink); }
.tz-cell.now { outline: 2px solid var(--stamp); outline-offset: 1px; z-index: 1; }
.tz-hours { color: var(--ink-3); text-align: center; font-size: 10px; }
.notes { max-width: 900px; }
.notes-h { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 14px; font-weight: 700; }
.notes ol { margin: 0; padding-left: 1.6em; display: grid; gap: 14px; }
.notes li { padding-left: 6px; color: var(--ink-2); }
.notes li::marker { font: 700 13px var(--mono); color: var(--ink); }
.notes li b { color: var(--ink); text-transform: uppercase; font: 700 13px var(--mono); letter-spacing: .06em; margin-right: 6px; }
.toolkit { margin: 32px 0 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); line-height: 2; }
.toolkit span { color: var(--ink-3); }

/* ---------------- RECOGNITION ---------------- */
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.col-h { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); font-weight: 400; margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.register { list-style: none; margin: 0; padding: 0; }
.register li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.register .yr { font: 400 11.5px var(--mono); color: var(--ink-2); padding-top: 4px; }
.register a { color: inherit; }
.register a:hover { color: var(--stamp); }
.register b { display: block; font: 400 21px/1.25 var(--display); }
.register span { color: var(--ink-3); font-size: 14px; }
.certs b { font-size: 18px; }
.certs li { padding: 10px 0; }
.register .gpa { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

/* ---------------- CONTACT / TITLE BLOCK ---------------- */
.contact { padding-bottom: 32px; }
.contact-h { font: italic 400 clamp(50px, 9vw, 124px)/.95 var(--display); letter-spacing: -.02em; margin: 44px 0 16px; text-wrap: balance; }
.title-block { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5px; background: var(--ink); border: 2px solid var(--ink); }
.tb-cell { background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; text-align: left; text-decoration: none; min-width: 0; border: 0; }
.tb-name { grid-column: 1 / -1; padding: 18px 16px; }
.tb-cell:last-child { grid-column: span 2; }
.tb-big { font: 400 clamp(30px, 4vw, 46px)/1.05 var(--display); }
.tb-sub { color: var(--ink-2); }
.tb-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.tb-v { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.tb-hint { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.tb-act { cursor: pointer; transition: background .2s; }
/* Opaque tint: the grid behind the cells is ink-coloured, so a translucent hover fill would show it through as black. */
.tb-act:hover, .tb-act:focus-visible { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.tb-act:hover .tb-hint, .tb-act:focus-visible .tb-hint { color: var(--stamp); }
.tb-act:focus-visible { outline-offset: -4px; }
.foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding-top: 22px; margin-top: 56px; border-top: 1px solid var(--ink); }

/* ---------------- PALETTE ---------------- */
.palette-scrim { display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; }
.palette { width: min(620px, 100%); background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--grid-major); transform: translateY(-8px); transition: transform .25s; }
.palette-scrim.open .palette { transform: none; }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ink); }
.palette-input > .mono { font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.palette-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--ink); font: 400 16px var(--body); min-width: 0; }
#palette-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
#palette-list .grp { font: 400 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); padding: 10px 10px 4px; }
#palette-list .item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; cursor: pointer; font-size: 14.5px; border-left: 2px solid transparent; }
#palette-list .item small { font: 400 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
#palette-list .item[aria-selected="true"] { background: var(--stamp-tint); border-color: var(--stamp); }
#palette-list .empty { padding: 20px; color: var(--ink-3); text-align: center; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1040px) {
  .counts { grid-template-columns: repeat(2, 1fr); }
  .count:nth-child(2n) { border-right: 0; }
  .count:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .count:nth-child(2n+1) { padding-left: 0; }
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .fig1 { max-width: 560px; margin: 0 auto; width: 100%; }
  .patent-top { grid-template-columns: 1fr; }
  .rec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hide-sm, .sheet-counter, #kbd-hint { display: none; }
  .headline { min-height: 0; }
  .counts { grid-template-columns: 1fr; }
  .count { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .count:last-child { border-bottom: 0; }
  .dim, .dim-axis { grid-template-columns: 1fr; gap: 6px; }
  .dim-axis > :first-child, .dim-axis > :last-child { display: none; }
  .dim-v { text-align: left; font-size: 22px; }
  .git { --gutter-w: 72px; --lane-w: 20px; }
  .git-row { grid-template-columns: 1fr; gap: 2px; }
  .cards { grid-template-columns: 1fr; }
  .patent { grid-template-columns: 1fr; gap: 10px; }
  .p-no { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .stamp { justify-self: start; }
  .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-titleblock { grid-template-columns: 1fr 1fr; }
  .claim-list p { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fig1 .plate { transform: none !important; }
  .git .git-svg { clip-path: none !important; }
  .dim-after, .pblock { transform: none !important; }
}

/* ---------------- PRINT = CV ---------------- */
@media print {
  @page { margin: 13mm; }
  :root, :root[data-theme] { --paper: #fff; --paper-2: #fff; --ink: #111; --ink-2: #333; --ink-3: #666; --hair: #ccc; --stamp: #2a36a8; --redline: #b8321b; color-scheme: light; }
  html, body { background: #fff !important; }
  body { font-size: 10pt; }
  .nav, .drawer, .drawer-scrim, .palette-scrim, .skip, .cta-row, .filters, .locales, .string-meta, .string-stats, .tz, .pchart-fig, .patent-more, .foot, .card .c-open, .tb-hint, .lane-legend, .git-svg, .dims .fig figcaption { display: none !important; }
  .sheet, .hero { padding: 0 !important; max-width: none; }
  .sheet { margin-top: 16pt; }
  .hero-grid { display: block; padding: 0; }
  .fig1 { display: none; }
  .headline { font-size: 26pt; min-height: 0; }
  .sheet-title { font-size: 18pt; margin: 8pt 0; }
  .sheet-sub { display: none; }
  .claim-list { font-size: 11pt; gap: 6pt; }
  .count-v { font-size: 26pt; } .counts { margin-bottom: 10pt; }
  .git-list { padding-left: 0; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10pt; }
  .card { min-height: 0; padding: 8pt; } .card::before { display: none; }
  .card.hide { display: flex !important; } .patent.hide { display: grid !important; }
  .card, .patent, .git-row, .register li, .dim, .bom tr, .claim-list li { break-inside: avoid; }
  .stamp { filter: none; }
  .tally-num { font-size: 60pt; }
  .contact-h { font-size: 22pt; }
}