/* The site's styles: the visual system of ADR-0011, rebuilt from the
   approved Claude Design prototype as plain CSS.

   Theme. The Intro is always dark. Below it the page follows the device's
   light or dark setting; the switch sets data-theme on <html> for the visit
   only, and nothing is stored (scope floor line 10). The dark tokens are
   therefore written twice: once for an explicit choice and the always-dark
   parts, once inside the media query for the device setting.

   Without a script the page is whole: every panel open, every control that
   needs a script hidden by its own `hidden` attribute. site.js adds the
   `js` class to <html>, and only rules under `.js` depend on it.

   Mobile first. Widths: 760px (projects two to a row), 1040px (the menu
   moves to the top), 1060px (timeline to scale), 1180px (projects three to
   a row). */

/* Fonts: Latin subsets, served from this site, each with its SIL Open Font
   License beside it in fonts/. The upright Instrument Serif is not used and
   not shipped. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fonts/manrope-normal.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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-normal.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;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-italic.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;
}

/* Tokens. Light by default. */
:root {
  --bg: #F3F1EC;
  --surface: #FFFFFF;
  --surface2: #F7F6F2;
  --ink: #111216;
  --ink2: #2E3138;
  --muted: #555A63;
  --line: rgba(17, 18, 22, 0.11);
  --line2: rgba(17, 18, 22, 0.22);
  --acc: #C6F135;
  --acc-ink: #3F6212;
  --on-acc: #0B0C0F;
  --glow: rgba(160, 210, 40, 0.22);
  --glare: rgba(150, 200, 30, 0.12);
  --glow2: rgba(40, 170, 170, 0.12);
  --band: rgba(63, 98, 18, 0.07);
  --fade: 0.07;
  --knot: #3F6212;
  --shadow: 0 1px 2px rgba(17, 18, 22, 0.05), 0 14px 34px -16px rgba(17, 18, 22, 0.22);
  --glass: rgba(255, 255, 255, 0.74);
  --sans: "Manrope", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: clamp(20px, 4vw, 56px);
  --tl-cols: 36px minmax(0, 1.3fr) 112px minmax(0, 0.85fr) minmax(0, 1.25fr);
  --month: 66px;
  color-scheme: light;
}
/* Dark: an explicit choice, and the parts that are always dark. */
:root[data-theme="dark"], .dark {
  --bg: #0A0B0E;
  --surface: #14161B;
  --surface2: #1B1E24;
  --ink: #F2F0EA;
  --ink2: #D3D2CC;
  --muted: #A4A9B2;
  --line: rgba(255, 255, 255, 0.09);
  --line2: rgba(255, 255, 255, 0.2);
  --acc-ink: #C6F135;
  --glow: rgba(198, 241, 53, 0.16);
  --glare: rgba(198, 241, 53, 0.16);
  --glow2: rgba(45, 200, 190, 0.14);
  --band: rgba(198, 241, 53, 0.05);
  --fade: 0.06;
  --knot: #C6F135;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 44px -24px rgba(0, 0, 0, 0.7);
  --glass: rgba(20, 22, 27, 0.74);
  color-scheme: dark;
}
/* Dark: the device's setting, unless the switch chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0B0E;
    --surface: #14161B;
    --surface2: #1B1E24;
    --ink: #F2F0EA;
    --ink2: #D3D2CC;
    --muted: #A4A9B2;
    --line: rgba(255, 255, 255, 0.09);
    --line2: rgba(255, 255, 255, 0.2);
    --acc-ink: #C6F135;
    --glow: rgba(198, 241, 53, 0.16);
    --glare: rgba(198, 241, 53, 0.16);
    --glow2: rgba(45, 200, 190, 0.14);
    --band: rgba(198, 241, 53, 0.05);
    --fade: 0.06;
    --knot: #C6F135;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 44px -24px rgba(0, 0, 0, 0.7);
    --glass: rgba(20, 22, 27, 0.74);
    color-scheme: dark;
  }
}
/* Which of a pair of marks shows, by the page's theme. */
.page-dark-only { display: none; }
:root[data-theme="dark"] .page-light-only { display: none; }
:root[data-theme="dark"] .page-dark-only { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-light-only { display: none; }
  :root:not([data-theme="light"]) .page-dark-only { display: block; }
}

/* Base. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.4s ease, color 0.4s ease;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--acc-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: #C6F135; color: #0B0C0F; }
[hidden] { display: none !important; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono { font-family: var(--mono); }
/* Visually hidden, still read. `pre`, not `nowrap`: it also never wraps,
   and it keeps a space at either end, which m.sp() in macros.html.j2
   relies on. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: pre;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: #C6F135;
  color: #0B0C0F;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; color: #0B0C0F; }
.wrap { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.i { flex: none; }

/* Buttons and chips. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.btn:hover, .btn:focus-visible { background: var(--line); color: var(--ink); }
.btn-acc {
  gap: 10px;
  padding: 0 22px;
  border: 0;
  background: var(--acc);
  color: var(--on-acc);
  font-weight: 700;
  box-shadow: 0 10px 30px -10px var(--glow);
}
.btn-acc:hover, .btn-acc:focus-visible { background: var(--acc); color: var(--on-acc); transform: translateY(-2px); }
.btn-sm { min-height: 40px; padding: 0 14px; gap: 6px; font-size: 14px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink2);
}
.chips-mono li {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 7px 10px;
}

/* Tilt and lift. site.js tilts a [data-tilt] card toward the pointer or
   the finger and moves its glare; a keyboard focus inside lifts it. */
[data-tilt] { position: relative; isolation: isolate; transition: transform 0.18s ease-out; }
[data-tilt]:focus-within { transform: translateY(-4px); }
.glare {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--glare), transparent 55%);
}

/* A "Go to full entry" target flashes once. */
@keyframes flash {
  from { box-shadow: 0 0 0 3px #C6F135, 0 0 0 7px rgba(17, 18, 22, 0.35); }
  to { box-shadow: 0 0 0 3px rgba(198, 241, 53, 0), 0 0 0 7px rgba(17, 18, 22, 0); }
}
.proj:target, .job:target, .degree:target, .cert:target { animation: flash 1.6s ease-out 0.35s; }
.proj, .job, .degree, .cert { scroll-margin-top: 20px; }

/* Navigation: the phone's floating bar. */
.dnav, .rail { display: none; }
.mbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink);
}
.mbar-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
/* The bar's glass is drawn behind it, not on it: an element with a backdrop
   filter would become the menu panel's backdrop, and the panel's own blur
   would then see nothing of the page. The progress marker is the first
   background layer, sized by site.js. */
.mbar-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(var(--acc-ink), var(--acc-ink)) left bottom / calc(var(--p, 0) * 100%) 2px no-repeat,
    var(--glass);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.mnav { flex: 1; min-width: 0; }
.mnav summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 10px 0 16px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav-n { font-family: var(--mono); font-size: 12px; color: var(--acc-ink); }
.mnav-label { flex: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.mnav-pct { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.i-menu .i-close, .mnav[open] .i-menu .i-open { display: none; }
.mnav[open] .i-menu .i-close { display: inline; }
.mnav-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 8px;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.mnav-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.mnav-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
}
.mnav-num { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.mnav-panel a[aria-current] { background: var(--acc); color: var(--on-acc); font-weight: 700; }
.mnav-panel a[aria-current] .mnav-num { color: inherit; }
.theme-btn {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: transparent;
  cursor: pointer;
}
.theme-btn[aria-checked="true"] svg { fill: currentColor; }

/* Navigation: the bar at the top, and the progress rail, on a wide screen. */
@media (min-width: 1040px) {
  .mbar { display: none; }
  .dnav {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    color: var(--ink);
    transition: background-color 0.35s, color 0.35s, border-color 0.35s;
  }
  .dnav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
  .dnav-list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .dnav-list a:hover, .dnav-list a:focus-visible { background: var(--line); }
  .dnav-list a[aria-current] { padding: 9px 14px; background: var(--acc); color: var(--on-acc); font-weight: 700; }
  .dnav-list a[aria-current]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: 13px;
    padding: 8px 12px 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: transparent;
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    position: relative;
  }
  .theme-switch::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 1px;
    height: 22px;
    margin-top: -11px;
    background: var(--line2);
  }
  .track { position: relative; width: 30px; height: 18px; border-radius: 999px; border: 1px solid var(--line2); }
  .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ink);
    transition: transform 0.25s ease;
  }
  .theme-switch[aria-checked="true"] .track { background: var(--acc); }
  .theme-switch[aria-checked="true"] .knob { transform: translateX(12px); background: #0B0C0F; }
  .rail {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 44vh;
    width: 34px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    pointer-events: none;
    background: none;
  }
  .rail[hidden] { display: none; }
  .rail-pct { font-family: var(--mono); font-size: 11px; color: var(--muted); min-height: 1em; }
  .rail-bar { position: relative; flex: 1; width: 2px; border-radius: 2px; background: var(--line2); }
  .rail-fill {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: var(--acc-ink);
    transform-origin: top;
    transform: scaleY(var(--p, 0));
  }
  .rail-tick {
    position: absolute;
    left: -3px;
    top: calc(var(--t, 0) * 100% - 1px);
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: left 0.25s ease, width 0.25s ease;
  }
  .rail-tick.on { left: -6px; width: 14px; }
  .proj, .job, .degree, .cert { scroll-margin-top: 96px; }
}

/* Intro. */
.intro {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(104px, 15vh, 148px) 0 28px;
}
.intro-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 82% 16%, var(--glow), transparent 70%),
    radial-gradient(45% 40% at 6% 94%, var(--glow2), transparent 72%);
}
.knot {
  position: absolute;
  top: clamp(24px, 5vh, 72px);
  right: clamp(-260px, -12vw, -48px);
  width: clamp(360px, 64vw, 940px);
  aspect-ratio: 1 / 1;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}
.knot.on { opacity: 1; }
.avail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.3;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
}
.avail-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px var(--glow); }
.intro-name {
  font-weight: 700;
  font-size: clamp(76px, 15vw, 244px);
  line-height: 0.84;
  letter-spacing: -0.05em;
}
.intro-name span { display: block; }
.intro-name .serif { margin-top: 0.16em; letter-spacing: -0.025em; padding-left: 0.06em; }
.headline {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(20px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}
.sep { color: var(--muted); }
.intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: end;
  margin-top: clamp(36px, 5vw, 64px);
}
.intro-main { min-width: 0; }
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink2);
}
.facts li { display: flex; gap: 10px; }
.arrow { color: var(--acc-ink); }
.lede {
  margin-top: 28px;
  font-size: clamp(16.5px, 1.25vw, 18px);
  line-height: 1.62;
  color: var(--ink2);
  max-width: 66ch;
  text-wrap: pretty;
}
.lede + .lede { margin-top: 16px; }
.cta { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  min-width: 0;
}
.result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 172px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 55%, transparent));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.result-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-fig { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.result-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(44px, 4.4vw, 62px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--acc-ink);
}
.result-suffix { font-size: 0.46em; letter-spacing: -0.02em; }
.result-word {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(50px, 4.8vw, 68px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--acc-ink);
}
.result-text { font-size: 15px; line-height: 1.4; color: var(--ink2); }
.strip {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: clamp(56px, 8vw, 100px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink2);
}
.strip-static { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.sq { flex: none; display: inline-block; width: 6px; height: 6px; background: var(--acc); }
.strip-track { display: flex; width: max-content; will-change: transform; }
.strip-group { display: flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap; }
.strip-pause {
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.strip-pause .i-play, .strip-pause.paused .i-pause { display: none; }
.strip-pause.paused .i-play { display: inline; }

/* The page below the Intro, rising over it. */
.page {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  transition: background-color 0.4s ease;
}
.sec {
  position: relative;
  padding: clamp(88px, 11vw, 150px) 0 clamp(40px, 5vw, 64px);
  overflow-x: clip;
}
.sec-last { padding-bottom: clamp(64px, 8vw, 110px); }
/* Off-screen sections skip layout until they near the viewport. Measured
   2026-10-06 on one machine, Lighthouse default mobile, medians of five:
   Total Blocking Time 29 and 41 ms with this rule; 164, 250, 171 and
   249 ms without it, against ADR-0009's 200 ms, which keeps the rule on
   one condition: in full accessibility mode, the one screen readers
   switch on, the tree at load matches the page without the rule. It did
   not, until everything hidden inside the sections also carried
   aria-hidden (setShown in site.js); measured 2026-10-07 at 360 and
   1366 px, it does. In default mode, 1 of the 26 headings is in the tree
   at load at 360 px and 8 at 1366 px, the residual ADR-0009 accepts.
   Find-in-page was not tested. logs/2026-10-06-before-push.md,
   logs/2026-10-07-tree-parity.md. The size is an estimate, replaced by
   the real one once a section has been shown. */
.page > .sec { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
/* An anchor in the address bar, from a link on the page or one shared,
   lays every section out first, so the jump lands exactly where it should
   rather than where the estimated sizes put it. Pure CSS, so it holds
   without a script too. */
html:has(:target) .page > .sec { content-visibility: visible; }
.sec-head { position: relative; margin-bottom: clamp(32px, 4vw, 56px); }
.fade-word {
  position: absolute;
  left: -0.05em;
  bottom: -0.2em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(100px, 19vw, 300px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: var(--fade);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.sec-title { position: relative; display: flex; align-items: baseline; gap: 14px; }
.sec-n { font-family: var(--mono); font-size: 13px; color: var(--acc-ink); }
.sec-title h2 {
  min-width: 0;
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}

/* Projects: the opening figure. */
.feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 20px;
  padding: clamp(26px, 4vw, 56px);
  border-radius: 28px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 24px;
}
.feature-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 18% 100%, rgba(198, 241, 53, 0.22), transparent 70%),
    radial-gradient(50% 60% at 100% 0%, rgba(45, 200, 190, 0.16), transparent 70%);
}
.feature-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.feature-main { display: contents; }
/* On a phone the probes card sits between the figure and its words, as in
   the prototype; the reading order keeps "592 automated tests" whole. */
.feature-text { order: 4; }
.feature-note { order: 5; }
.feature-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(120px, 21vw, 330px);
  line-height: 0.8;
  letter-spacing: -0.07em;
}
.feature-text { font-size: clamp(40px, 4.4vw, 64px); line-height: 0.95; letter-spacing: -0.02em; }
.feature-pairs {
  list-style: none;
  order: 3;
  margin: 0;
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: 16px 20px;
  border-radius: 18px;
  background: #F3F1EC;
  color: #111216;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.7);
  transform: rotate(-2.5deg);
}
.feature-pairs li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
.feature-pairs .num { font-family: var(--mono); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; }
.feature-pairs li > span:last-child { font-size: 14px; white-space: nowrap; }
.feature-note { font-size: 17px; line-height: 1.55; color: var(--ink2); max-width: 46ch; }
@media (min-width: 1000px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "label pairs"
      "num text"
      "num note";
    gap: 20px clamp(28px, 4vw, 64px);
    align-items: end;
  }
  .feature-label { grid-area: label; align-self: start; }
  .feature-num { grid-area: num; }
  .feature-text { grid-area: text; }
  .feature-pairs { grid-area: pairs; justify-self: end; }
  .feature-note { grid-area: note; }
}

/* Projects: the grid. Without a script every card and every panel takes a
   full row, card then panel. With one, panels start closed and the cards
   flow two or three to a row; `dense` lets the cards after an open panel's
   card fill its row, so the panel lands under the row. */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.proj-grid > * { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .js .proj-grid { grid-auto-flow: row dense; }
  .js .proj-grid > .proj { grid-column: span var(--span-mid); }
  .js .proj-grid > .proj-lead { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .js .proj-grid > .proj { grid-column: span var(--span-wide); }
  .js .proj-grid > .proj-lead { grid-column: 1 / -1; }
}
.proj {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease-out, border-color 0.25s;
}
.proj.is-open { border-color: var(--ink); }
.proj-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  align-content: start;
  gap: 22px clamp(24px, 4vw, 56px);
}
.proj-head, .proj-side { min-width: 0; }
.proj-dates { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.proj h3 {
  margin-top: 14px;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.proj-sub { margin-top: 6px; font-size: 15.5px; font-weight: 500; color: var(--ink2); }
.proj-summary { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.proj-summary strong { font-weight: 700; color: var(--ink); }
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 3px var(--glow);
  vertical-align: 0.08em;
}
.proj-side { display: flex; flex-direction: column; gap: 18px; }
.proj-fact { font-size: 17px; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.proj-actions { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 4px; }
.proj-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.depth-toggle {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.sign {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--on-acc);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
}
.sign::before { content: "+"; }
.depth-toggle[aria-expanded="true"] .sign::before { content: "\2212"; }
.depth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3.6vw, 52px);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow);
}
.depth-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 65% at 100% 0%, var(--glare), transparent 72%); }
.depth-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.depth-head h3 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.depth-head h3 .serif { letter-spacing: -0.02em; }
.depth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.depth-list {
  list-style: none;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 4px clamp(28px, 4vw, 56px);
}
.depth-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); }
.depth-n { font-family: var(--mono); font-size: 12px; line-height: 1.9; color: var(--acc-ink); }
.depth-list p { font-size: 16px; line-height: 1.64; color: var(--ink2); max-width: 70ch; text-wrap: pretty; }
.depth-list strong { font-weight: 700; color: var(--ink); }
.depth-list a { color: var(--acc-ink); font-weight: 600; }

/* Timeline: shared pieces. */
.shape { flex: none; display: inline-block; }
.lane-builds .shape { width: 11px; height: 11px; border-radius: 3px; background: var(--acc); border: 2px solid var(--ink); }
.lane-work .shape { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 2px solid var(--ink); }
.lane-certifications .shape { width: 9px; height: 9px; margin: 1px; transform: rotate(45deg); background: var(--bg); border: 2px solid var(--ink); }
.tl-filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tl-filter[aria-pressed="false"] { border-style: dashed; background: transparent; opacity: 0.62; }
.tl-filter[aria-pressed="false"] .tl-filter-label { text-decoration: line-through; }
.tl-empty { margin: 16px 0; color: var(--muted); }
.tl[data-hide~="builds"] .lane-builds.tl-entry,
.tl[data-hide~="work"] .lane-work.tl-entry,
.tl[data-hide~="certifications"] .lane-certifications.tl-entry { display: none; }
.tl-sign::before { content: "+"; }
.tl-card[open] .tl-sign::before { content: "\2212"; }
.tl-card summary { list-style: none; cursor: pointer; }
.tl-card summary::-webkit-details-marker { display: none; }
.tl-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 700; }
.tl-links a { color: var(--acc-ink); }
.tl-close {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: transparent;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.stripes { background: repeating-linear-gradient(135deg, var(--band) 0 1px, transparent 1px 12px), var(--band); }

/* Timeline on a phone: one spine, lanes interleaved, newest first. The band
   is a header before the first entry it covers, and its stripes run behind
   every entry below it to the end. */
.tl { max-width: 720px; }
.tl-lanes { margin-bottom: 12px; }
.tl-head, .tl-scale { display: none; }
.tl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-axis { display: none; }
.tl-body { position: relative; }
.tl-mspine {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 19px;
  width: 2px;
  border-radius: 2px;
  background: var(--line2);
}
.tl-spine-fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(var(--acc-ink), var(--acc));
  transform-origin: top;
  transform: scaleY(0);
}
.tl-list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0 0 110px;
  display: flex;
  flex-direction: column;
  overflow-y: clip;
}
.tl-entry { order: 2; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; padding: 5px 0; }
.tl-entry.after-band { order: 0; }
.tl-yr {
  display: none;
  grid-column: 1;
  justify-self: center;
  margin: 7px 0 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
}
.tl-entry[data-year-mark] .tl-yr { display: block; }
.tl-mark { grid-column: 1; grid-row: 2; justify-self: center; margin-top: 19px; transition: box-shadow 0.3s; }
.tl-mark.lit { box-shadow: 0 0 0 5px var(--glow), 0 0 18px 2px var(--glow); }
.lane-builds .tl-mark { width: 14px; height: 14px; border-radius: 3px; background: var(--acc); border: 2px solid var(--ink); }
.lane-work .tl-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--ink); }
.lane-certifications .tl-mark { width: 12px; height: 12px; margin-top: 20px; transform: rotate(45deg); background: var(--bg); border: 2px solid var(--ink); }
.tl-card {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.tl-card summary { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 16px; }
.tl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.tl-sign { font-size: 15px; }
.tl-title { order: 2; margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.tl-org { order: 3; margin-top: 2px; font-size: 14px; color: var(--muted); }
.tl-dates { order: 4; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.tl-pop { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.tl-detail { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.tl-band { order: 1; margin-top: 8px; padding: 14px 14px 10px 52px; }
/* The stripes start where the band header sits (an absolute box with no
   top keeps its place in the flow) and run far down; the list clips them
   at its bottom edge, where a fade into the page takes over. */
.tl-band-bg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  margin-top: -14px;
  height: 10000px;
  border-radius: 20px;
  background: repeating-linear-gradient(135deg, var(--band) 0 1px, transparent 1px 12px), var(--band);
}
.tl-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.tl-band-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink2);
}
.tl-band-label .sq { display: none; }
.tl-band-label a { color: inherit; }
.tl-band-end {
  position: absolute;
  z-index: 1;
  bottom: 48px;
  left: 0;
  width: 40px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.tl-band-end span { display: block; }

/* Timeline on a wide screen: to scale. From 1060px, not 1180: a desktop
   window can be narrower than 1180 (Waqas's portrait monitor, about 1065
   px), and ADR-0003 keeps the desktop timeline to scale. Below it, the
   stacked list of a phone. 1060, the narrowest width at which no card
   title breaks inside a word (measured 2026-10-22; at 1040 and 1050
   "Specialization" did). */
@media (min-width: 1060px) {
  .tl { max-width: none; }
  .tl-lanes {
    position: sticky;
    top: 74px;
    z-index: 8;
    display: grid;
    grid-template-columns: var(--tl-cols);
    align-items: center;
    min-height: 65px;
    margin: 0;
    padding: 10px 0;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .tl-filters { display: contents; }
  .tl-filters[hidden] { display: none !important; }
  .tl-head, .tl-filter { grid-row: 1; justify-self: center; }
  .tl-head { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
  .js .tl-head { display: none; }
  .lane-builds.tl-head, .lane-builds.tl-filter { grid-column: 2; }
  .lane-work.tl-head, .lane-work.tl-filter { grid-column: 4; }
  .lane-certifications.tl-head, .lane-certifications.tl-filter { grid-column: 5; }
  .tl-filter { padding: 0 16px; gap: 10px; }
  .tl-filter.lane-builds .shape, .tl-head.lane-builds .shape { width: 12px; height: 12px; }
  .tl-scale {
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
  }
  .tl-empty { text-align: center; }
  .tl-body { margin-top: 20px; }
  .tl-mspine { display: none; }
  .tl-axis, .tl-list {
    display: grid;
    grid-template-columns: var(--tl-cols);
    grid-template-rows: repeat(var(--rows), calc(var(--month) / 4));
  }
  .tl-axis { position: absolute; z-index: 1; inset: 0 0 auto 0; pointer-events: none; }
  .tl-spine { grid-column: 3; grid-row: 1 / -1; position: relative; }
  .tl-spine::before, .tl-spine .tl-spine-fill {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
  }
  .tl-spine::before { background: var(--line2); }
  .tl-spine .tl-spine-fill { inset: 0 auto 0 50%; }
  .tl-month {
    grid-column: 3;
    grid-row: var(--row) / span 4;
    position: relative;
    align-self: center;
    margin-left: calc(50% + 11px);
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1;
    color: var(--muted);
  }
  .tl-month::before {
    content: "";
    position: absolute;
    top: calc(-33px + 0.5em);
    left: -15px;
    width: 8px;
    height: 1px;
    background: var(--line2);
  }
  .tl-year {
    grid-column: 3;
    grid-row: var(--row) / span 4;
    align-self: start;
    justify-self: end;
    margin: 8px calc(50% + 9px) 0 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
  }
  .tl-year-line { grid-column: 2 / -1; grid-row: var(--row); align-self: start; border-top: 1px dashed var(--line2); }
  .tl-read {
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: start;
    border-top: 1px solid var(--acc-ink);
    opacity: 0;
    transition: opacity 0.25s;
  }
  .tl-chip {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    opacity: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--acc);
    color: var(--on-acc);
    white-space: nowrap;
    box-shadow: 0 0 0 4px var(--bg);
    transition: opacity 0.25s;
  }
  /* No stacking context of its own here, so the axis draws above the band
     and below the entries. */
  .tl-list { padding: 0 0 96px; z-index: auto; overflow: visible; }
  .tl-list::after { display: none; }
  .tl-entry {
    position: relative;
    z-index: 3;
    display: block;
    grid-row: var(--row) / span var(--span);
    margin: 0 12px;
    padding: 3px 0;
  }
  .tl-entry.lane-builds { grid-column: 2; }
  .tl-entry.lane-work { grid-column: 4; }
  .tl-entry.lane-certifications { grid-column: 5; }
  .tl-entry:has(.tl-card[open]), .tl-entry.is-open { z-index: 20; }
  .tl-yr, .tl-mark { display: none !important; }
  .tl-card {
    position: relative;
    min-height: 100%;
    margin-left: calc(var(--x) + var(--gl));
    width: calc(var(--w) - var(--gl) - var(--gr));
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface) 0, var(--surface) 60px, var(--body) 104px, var(--body) 100%);
    box-shadow: var(--shadow);
  }
  .lane-builds .tl-card { --body: color-mix(in oklab, var(--acc) 15%, transparent); }
  .lane-work .tl-card { --body: color-mix(in oklab, var(--ink) 5%, transparent); }
  .lane-certifications .tl-card { --body: color-mix(in oklab, var(--surface) 62%, transparent); border: 1px dashed var(--line2); }
  .tl-card::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 4px;
    pointer-events: none;
  }
  .lane-builds .tl-card::after { right: -1px; border-radius: 0 12px 12px 0; background: var(--acc); }
  .lane-work .tl-card::after { left: -1px; border-radius: 12px 0 0 12px; background: var(--ink); }
  .tl-card summary { min-height: 100%; gap: 3px; padding: 7px 12px 6px 14px; border-radius: 12px; overflow: hidden; }
  .tl-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tl-dates { order: 1; margin: 0; font-size: 11px; line-height: 13px; color: var(--muted); }
  .tl-dates::before { content: ""; display: inline-block; margin-right: 7px; vertical-align: -1px; }
  .lane-builds .tl-dates::before { width: 9px; height: 9px; border-radius: 2px; background: var(--acc); border: 1.5px solid var(--ink); }
  .lane-work .tl-dates::before { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
  /* Turned, the diamond outgrows its 7px box: 1px each side keeps it inside
     the card, and 8px on the right starts the date where the others do. */
  .lane-certifications .tl-dates::before { width: 7px; height: 7px; margin: 0 8px 0 1px; transform: rotate(45deg); background: var(--bg); border: 1.5px solid var(--ink); }
  .tl-title { order: 2; margin: 0; font-size: 14px; line-height: 1.12; letter-spacing: -0.01em; hyphens: auto; overflow-wrap: break-word; }
  .tl-org { order: 3; margin: 0; font-size: 13px; line-height: 1.3; }
  .tl-pop {
    position: absolute;
    z-index: 2;
    top: var(--pop, min(calc(100% + 6px), 72px));
    left: 0;
    width: max(100%, 340px);
    padding: 14px 16px 18px 18px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--ink);
    box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.45);
  }
  .lane-certifications .tl-pop { left: auto; right: 0; }
  .js .tl-close { display: grid; float: right; margin: -4px -6px 6px 12px; }
  .tl-band {
    grid-column: 1 / -1;
    grid-row: var(--row) / span var(--span);
    position: relative;
    z-index: 0;
    margin: 0 0 -96px;
    padding: 0;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: repeating-linear-gradient(135deg, var(--band) 0 1px, transparent 1px 12px), var(--band);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 96px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 96px), transparent);
  }
  .tl-band-bg { display: none; }
  .tl-band-label {
    position: sticky;
    top: 156px;
    width: 36px;
    /* Stops short of the bottom, where the marker of the earlier start sits. */
    margin-bottom: 120px;
    padding: 22px 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tl-band-label .sq { display: inline-block; background: var(--acc-ink); }
  .tl-band-end { bottom: 30px; width: 36px; }
}

/* Work and Education. */
.jobs { display: flex; flex-direction: column; gap: 20px; }
.job {
  display: flex;
  flex-wrap: wrap;
  gap: 28px clamp(28px, 5vw, 80px);
  padding: clamp(24px, 3.2vw, 44px);
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.job-head { flex: 1 1 280px; max-width: 440px; min-width: 0; }
.job-top { display: flex; align-items: center; gap: 14px; }
.tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
}
.tile-acc { background: var(--acc); color: var(--on-acc); box-shadow: 0 8px 20px -8px var(--glow); }
.job-dates { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.job h3 { margin-top: 20px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.job-org { margin-top: 6px; font-size: 17px; font-weight: 600; color: var(--ink2); }
.job-loc { margin-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.job-list { flex: 2 1 420px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.job-list li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.64;
  color: var(--ink2);
  max-width: 72ch;
  text-wrap: pretty;
}
.job-list strong { color: var(--ink); }
.degree {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 32px clamp(32px, 5vw, 80px);
  padding: clamp(24px, 3.6vw, 52px);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.degree-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 75% at 100% 0%, var(--glare), transparent 72%); }
.degree-head { min-width: 0; }
.degree h3 {
  margin-top: 22px;
  font-size: clamp(38px, 5.6vw, 80px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.degree-org { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--ink2); max-width: 60ch; }
.degree-cgpa { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--ink2); }
.degree-cgpa .mono { font-weight: 600; color: var(--ink); }
.degree-courses { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); }
.degree-courses h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.chips-soft { gap: 8px; }
.degree-courses .chips li { padding: 8px 13px; }

/* Certifications. */
.certs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.cert {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
  min-height: 232px;
  padding: 22px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s ease;
}
.cert-flood {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cert-acc .cert-flood, .cert-acc .cert-sq { background: #C6F135; }
.cert-ink .cert-flood, .cert-ink .cert-sq { background: var(--ink); }
.cert-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; opacity: 0.8; }
.cert-sq { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1px solid currentColor; }
.cert-name { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cert-title { font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.cert-org { font-size: 15px; opacity: 0.8; }
.cert-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.cert:hover .cert-flood, .cert:focus-visible .cert-flood { transform: translateY(0); }
.cert:hover .cert-view, .cert:focus-visible .cert-view { opacity: 1; transform: none; }
/* A touch screen has no hover, so the card's only link cue is shown from the
   start there (the first audit, F3). */
@media (hover: none) { .cert-view { opacity: 1; transform: none; } }
.cert-acc:hover, .cert-acc:focus-visible { color: #0B0C0F; }
.cert-ink:hover, .cert-ink:focus-visible { color: var(--bg); }

/* Skills. */
.skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.skill {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.skill h3 { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.skill-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--acc-ink);
}

/* Contact. */
.routes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.route {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  height: 100%;
  min-height: 300px;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: 28px;
  text-decoration: none;
}
.route-email { background: #C6F135; color: #0B0C0F; box-shadow: 0 24px 50px -24px rgba(120, 160, 20, 0.6); }
.route-email .glare { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 55%); }
.route-linkedin { background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow); }
.route-github { background: var(--ink); color: var(--bg); box-shadow: var(--shadow); }
.route-github .glare { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(198, 241, 53, 0.28), transparent 55%); }
.route:hover, .route:focus-visible { color: inherit; }
.route-email:hover, .route-email:focus-visible { color: #0B0C0F; }
.route-linkedin:hover, .route-linkedin:focus-visible { color: var(--ink); }
.route-github:hover, .route-github:focus-visible { color: var(--bg); }
.route-top { display: flex; justify-content: space-between; align-items: flex-start; }
.route-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #0B0C0F; color: #C6F135; }
.route-mark { display: grid; place-items: center; width: 64px; height: 64px; }
.route-mark img { width: auto; height: 44px; }
.route-github .route-mark img { height: 48px; }
.route-body { display: flex; flex-direction: column; }
.route-label { font-size: clamp(36px, 3.6vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.route-line { margin-top: 12px; font-size: 16px; line-height: 1.5; max-width: 34ch; }
.route-linkedin .route-line, .route-linkedin .route-addr { color: var(--ink2); }
.route-addr { margin-top: 18px; font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }

/* Footer. */
.foot {
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px var(--pad) 112px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  border-top: 1px solid var(--line);
}
.foot-name { font-size: 30px; line-height: 1; }
.foot-loc { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.foot-link { font-size: 14px; font-weight: 700; color: var(--ink); }
/* The Portfolio Footer line: a row of its own under the name and links,
   at reading width. The address may break anywhere on a narrow screen. */
.foot-note { flex-basis: 100%; max-width: 72ch; font-size: 14px; line-height: 1.65; color: var(--muted); }
.foot-note a { overflow-wrap: anywhere; }

/* Reduced motion: nothing moves. site.js also stops the knot, the strip,
   the tilt and the scroll effects, and requests no animation frame. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-tilt]:focus-within, .btn-acc:hover, .btn-acc:focus-visible { transform: none; }
}