:root {
  --bg: #05060c;
  --bg-2: #090c16;
  --ink: #e9ecf2;
  --ink-2: #aab2c6;
  --muted: #828aa0;
  --line: rgba(220, 228, 245, .12);
  --line-2: rgba(220, 228, 245, .22);
  --glass: rgba(12, 16, 28, .5);
  --accent: #8fb6e8;
  --era-1: #7d8aa8;   /* early / enterprise */
  --era-2: #4fb6a6;   /* data / cloud */
  --era-3: #e0b25a;   /* AI / now */
  --chrome: clamp(1.3rem, 5vw, 5rem);
  --content-max: 74.875rem;
  --rad: 9px;          /* standard panel radius (instrument tone) */
  --display: "Inter Tight", system-ui, sans-serif;
  --name-display: "Italiana", "Cormorant Garamond", var(--display);
  --sans: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
em { font-style: normal; color: var(--muted); }

/* ---- cosmos + atmosphere ---- */
#cosmos { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; display: block; opacity: 1;
  transition: opacity .7s cubic-bezier(.16,1,.3,1); }
body.sysmap-cosmos-dim #cosmos { opacity: .38; }
.nebula { position: fixed; z-index: -2; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events: none; will-change: transform; }
.nebula-1 { width: 60vw; height: 60vw; left: -10vw; top: -10vh; background: radial-gradient(circle, rgba(58,86,150,.5), transparent 70%); animation: drift1 26s ease-in-out infinite alternate; }
.nebula-2 { width: 55vw; height: 55vw; right: -12vw; bottom: -12vh; background: radial-gradient(circle, rgba(60,120,140,.30), transparent 70%); animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw,6vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-7vw,-5vh) scale(.92); } }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .04;
  background-image: radial-gradient(rgba(255,255,255,.6) .5px, transparent .6px); background-size: 3px 3px; }

/* ---- HUD ---- */
.hud { position: fixed; z-index: 30; font: 400 .68rem/1 var(--mono); letter-spacing: .08em; color: var(--muted); pointer-events: none; }
.hud-k { color: var(--ink-2); }
.hud-tl { top: 1.3rem; left: var(--chrome); }
.hud-tr { top: 1.3rem; right: var(--chrome); }
.hud-bl { bottom: 1.3rem; left: var(--chrome); }
.hud-br { bottom: 1.3rem; right: var(--chrome); }

/* ---- thin mono nav (frames the hero; hairline+blur on scroll; active-dot scroll-spy) ---- */
.site-nav { position: fixed; z-index: 28; top: 3.1rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(.65rem, 1.5vw, 1.25rem); max-width: calc(100vw - var(--chrome) * 2);
  padding: .48rem .8rem; border: 1px solid transparent; border-radius: var(--rad); color: var(--muted);
  font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
.site-nav.is-scrolled { background: var(--glass); border-color: var(--line); backdrop-filter: blur(12px); }
.site-nav a { position: relative; text-decoration: none; white-space: nowrap; transition: color .25s ease; }
.site-nav a::after { content: ""; position: absolute; left: 50%; bottom: -.45rem; width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); opacity: 0; transform: translateX(-50%); transition: opacity .25s ease; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); }
.site-nav a.is-active::after { opacity: .9; }
@media (max-width: 820px) {
  .site-nav { left: var(--chrome); right: var(--chrome); transform: none; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .site-nav a { min-height: 2.5rem; display: inline-flex; align-items: center; }
  .site-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  .site-nav {
    left: 0;
    right: 0;
    top: 2.75rem;
    max-width: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    gap: .48rem;
    padding: .14rem .9rem;
    font-size: .56rem;
    letter-spacing: .08em;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.35rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.35rem), transparent 100%);
  }
  .site-nav a { min-height: 2.5rem; }
}

/* ---- reveal ---- */
.reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
html.anim .reveal:not(.in) { opacity: 0; transform: translateY(26px); }

/* ---- hero ---- */
.hero { --hero-top-pad: clamp(13rem, 31svh, 18rem); min-height: 100svh; display: block; padding: var(--hero-top-pad) var(--chrome) 5rem; position: relative; }
.hero-inner {
  --hero-photo-w: clamp(20rem, 40vw, 30rem);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-photo-w);
  grid-template-areas:
    "top ."
    "name photo"
    "role photo"
    "sub photo"
    "contact photo"
    ". photo";
  /* the 1fr spacer row absorbs the photo's extra height so the text rows keep their tight rhythm */
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.hero-copy { display: contents; max-width: none; }
.hero-top { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.05rem; font: 400 clamp(.72rem, .9vw, .88rem)/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.hero h1 { grid-area: name; margin: 0; font-family: var(--name-display); font-size: clamp(4.5rem, 9vw, 8.45rem); line-height: 1; letter-spacing: .06em; font-weight: 400; text-transform: none; font-synthesis: none; position: relative; white-space: nowrap; }
.hero h1.reveal { transition-duration: 1.05s; }
.hero-top { grid-area: top; }
.motif { flex: 0 0 auto; display: inline-grid; grid-template-columns: 1fr 1fr; gap: .22rem; width: .82rem; }
.motif i { width: .26rem; height: .26rem; border-radius: 50%; background: var(--accent); opacity: .72; }
.motif i:nth-child(2){ background: var(--era-3); opacity: .68; } .motif i:nth-child(4){ background: var(--era-2); opacity: .68; }
.hero-role { grid-area: role; margin: 1.15rem 0 0; font: 500 clamp(.98rem, 1.65vw, 1.55rem)/1.25 var(--display); color: var(--ink-2); letter-spacing: 0; }
.hero-sub { grid-area: sub; max-width: 60rem; margin: .42rem 0 0; color: var(--muted); font-size: clamp(.86rem, 1vw, .98rem); line-height: 1.55; }
.hero-contact { grid-area: contact; margin-top: 1.05rem; display: flex; gap: .9rem; justify-content: flex-start; font: .9rem var(--mono); }
.hero-contact a { text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.hero-contact a:hover { color: var(--accent); border-color: var(--accent); }
.hero-contact span { color: var(--muted); }
.hero-photo {
  grid-column: 2;
  grid-row: top-start / photo-end;
  justify-self: end;
  align-self: start;
  width: var(--hero-photo-w);
  height: min(66svh, 42rem);
  margin: 0;
  border: 1px solid rgba(220, 228, 245, .12);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(115% 92% at 50% 26%, #000 34%, rgba(0,0,0,.9) 58%, transparent 100%),
    linear-gradient(to left, #000 70%, transparent 100%);
  mask-image:
    radial-gradient(115% 92% at 50% 26%, #000 34%, rgba(0,0,0,.9) 58%, transparent 100%),
    linear-gradient(to left, #000 70%, transparent 100%);
}
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.82) brightness(.88); transform: none; }
.scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: .5rem; color: var(--muted); font: .62rem var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue span { width: 1px; height: 2.2rem; background: linear-gradient(var(--muted), transparent); }

/* ---- sections ---- */
.section { position: relative; padding: clamp(5rem,9vw,9rem) var(--chrome); }
.shell { max-width: var(--content-max); margin: 0 auto; }
.kicker { margin: 0 0 .8rem; color: var(--accent); font: 500 .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.section h2 { margin: 0 0 2.6rem; font-size: clamp(1.9rem,3.6vw,3.2rem); line-height: 1.08; }

/* LAYOUT RHYTHM (owner direction #1): mix of split / full-width / flipped so the page breathes.
   .split = title-left/material-right · .split.flip = material-left/title-right · plain .shell = title-top full width. */
.shell.split { display: grid; grid-template-columns: minmax(12rem, 19rem) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.shell.split .sec-head { position: sticky; top: 6rem; }
.shell.split .sec-head h2 { margin-bottom: 0; }
.shell.split .sec-body { min-width: 0; }
.shell.split.flip { grid-template-columns: 1fr minmax(12rem, 19rem); }
.shell.split.flip .sec-head { order: 2; text-align: right; }
.shell.split.flip .sec-body { order: 1; }
@media (max-width: 820px) {
  .shell.split, .shell.split.flip { grid-template-columns: 1fr; gap: 1.4rem; }
  .shell.split .sec-head, .shell.split.flip .sec-head { position: static; order: 0; text-align: left; }
  .shell.split.flip .sec-body { order: 1; }
}

/* ---- WHAT I BUILD — first proof scene, one asymmetric instrument over the cosmos ---- */
.build { padding-top: clamp(4rem, 7vw, 7rem); }
.build-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .72fr);
  grid-template-areas:
    "thesis ops"
    "work work";
  gap: clamp(1rem, 2vw, 1.35rem); align-items: stretch; }
.build-stage::before { content: ""; position: absolute; inset: clamp(.7rem, 1.4vw, 1.1rem) 34% auto 3.5%;
  height: 1px; background: linear-gradient(90deg, transparent, rgba(143,182,232,.5), transparent); pointer-events: none; }
.build-stage::after { content: ""; position: absolute; left: 61%; top: 8%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent); pointer-events: none; }
.build-thesis { grid-area: thesis; position: relative; min-height: clamp(24rem, 40vw, 33rem); padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--era-3) 36%, var(--line)); border-left-color: rgba(224,178,90,.72); border-radius: var(--rad); background:
    radial-gradient(circle at 82% 18%, rgba(143,182,232,.13), transparent 30%),
    radial-gradient(circle at 12% 92%, rgba(224,178,90,.10), transparent 34%),
    rgba(12,16,28,.42);
  box-shadow: inset 1px 0 0 rgba(224,178,90,.52), -14px 0 34px rgba(224,178,90,.07);
  backdrop-filter: blur(12px); overflow: hidden; }
.build-thesis::before { content: ""; position: absolute; width: 18rem; height: 18rem; right: -6rem; top: -6rem;
  border: 1px solid rgba(143,182,232,.16); border-radius: 50%; box-shadow: inset 0 0 60px rgba(143,182,232,.05); }
.build-thesis::after { content: ""; position: absolute; right: clamp(1.2rem, 2.5vw, 2rem); bottom: clamp(1.2rem, 2.5vw, 2rem);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: -4rem -3.3rem 0 rgba(224,178,90,.72), -8.7rem .6rem 0 rgba(79,182,166,.72), -12.6rem -5rem 0 rgba(143,182,232,.45); }
.build-thesis .kicker { position: relative; }
.build-thesis h2 { position: relative; max-width: 11ch; margin: 0; font-size: clamp(2.4rem, 5.8vw, 5.2rem); line-height: .96; letter-spacing: -.03em; text-wrap: balance; }
.build-lede { position: relative; max-width: 48rem; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; color: var(--ink-2);
  font-size: clamp(1rem, 1.45vw, 1.24rem); line-height: 1.55; text-wrap: pretty; }
.build-bridge { position: relative; margin-top: clamp(2rem, 4vw, 3.6rem); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  color: var(--ink-2); font: 500 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.build-bridge i { width: clamp(1.8rem, 5vw, 4.5rem); height: 1px; background: linear-gradient(90deg, var(--line-2), rgba(143,182,232,.6)); }
.build-ops { grid-area: ops; display: grid; align-content: stretch; grid-template-rows: 1.18fr repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--rad);
  background: rgba(12,16,28,.34); backdrop-filter: blur(12px); overflow: hidden; }
.build-op { position: relative; min-height: 0; padding: 1.05rem 1.25rem 1.12rem; border-top: 1px solid var(--line);
  transition-property: background, border-color, transform; transition-duration: 1.5s; transition-timing-function: cubic-bezier(.22,1,.36,1); }
.build-op:first-child { border-top: 0; }
.build-op-main { border-left: 1px solid rgba(224,178,90,.58); background: linear-gradient(135deg, rgba(224,178,90,.11), rgba(143,182,232,.08), rgba(12,16,28,.20)); box-shadow: inset 1px 0 0 rgba(224,178,90,.42); }
.build-op::before { content: ""; position: absolute; left: 0; top: 1.15rem; bottom: 1.15rem; width: 2px; background: var(--line-2);
  opacity: .7; transition: background 1.5s cubic-bezier(.22,1,.36,1), opacity 1.5s cubic-bezier(.22,1,.36,1); }
.build-op:hover { background: rgba(20,26,44,.62); transform: translateX(-4px); }
.build-op:hover::before { background: var(--accent); opacity: 1; }
.build-op h3 { margin: 0; color: var(--ink); font-size: clamp(1.02rem, 1.4vw, 1.24rem); line-height: 1.18; }
.build-op p { margin: .65rem 0 0; color: var(--ink-2); font-size: .9rem; line-height: 1.48; text-wrap: pretty; }
.worklinks { grid-area: work; display: grid; grid-template-columns: minmax(11rem, .24fr) 1fr; gap: clamp(.85rem, 1.6vw, 1.1rem);
  padding: clamp(.75rem, 1.5vw, 1rem); border: 1px solid var(--line); border-radius: var(--rad);
  background: rgba(12,16,28,.36); backdrop-filter: blur(12px); }
.worklinks-head { align-self: end; padding-right: clamp(.6rem, 1.5vw, 1rem); border-right: 1px solid var(--line); }
.worklinks-head h3 { margin: 0; font-size: clamp(1.08rem, 1.8vw, 1.45rem); line-height: 1.12; }
.worklinks-head p { margin: .75rem 0 0; color: var(--muted); font: .74rem/1.5 var(--mono); letter-spacing: .03em; }
.worklinks-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.worklink { position: relative; min-height: 5.15rem; display: grid; align-content: end; gap: .28rem; padding: .72rem .68rem;
  border: 1px solid var(--line); border-radius: calc(var(--rad) - 1px); background: rgba(5,8,16,.28);
  text-decoration: none; overflow: hidden; transition-property: transform, border-color, background, box-shadow; transition-duration: 1.5s; transition-timing-function: cubic-bezier(.22,1,.36,1); }
.worklink span { position: relative; color: var(--ink); font: 600 .84rem/1.16 var(--display); }
.worklink small { position: relative; color: var(--muted); font: .58rem/1.32 var(--mono); letter-spacing: .035em; }
.worklink i { position: absolute; top: .62rem; right: .62rem; color: var(--muted); font-style: normal; font: .74rem/1 var(--mono);
  transition: transform 1.5s cubic-bezier(.22,1,.36,1), color 1.5s cubic-bezier(.22,1,.36,1); }
.worklink:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(20,26,44,.58); box-shadow: 0 12px 34px rgba(0,0,0,.26); }
.worklink:hover small { color: var(--ink-2); }
.worklink:hover i { color: var(--accent); transform: translate(3px,-3px); }
.worklink:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1080px) {
  .build-stage { grid-template-columns: 1fr; grid-template-areas: "thesis" "ops" "work"; }
  .build-stage::before, .build-stage::after { display: none; }
  .build-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .build-op { border-top: 0; border-left: 1px solid var(--line); }
  .build-op:nth-child(odd) { border-left: 0; }
  .build-op:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .worklinks-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .worklink { grid-column: span 2; }
  .worklink:nth-last-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 760px) {
  .build-thesis { min-height: auto; }
  .build-thesis h2 { max-width: 12ch; }
  .build-bridge { align-items: flex-start; flex-direction: column; gap: .62rem; }
  .build-bridge i { width: 1px; height: 1.7rem; margin-left: .2rem; }
  .build-ops { grid-template-columns: 1fr; }
  .build-op, .build-op:nth-child(odd), .build-op:nth-child(n+3) { border-left: 0; border-top: 1px solid var(--line); }
  .build-op:first-child { border-top: 0; }
  .worklinks { grid-template-columns: 1fr; }
  .worklinks-head { align-self: auto; padding-right: 0; padding-bottom: .9rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .worklink { min-height: 5.6rem; }
}
@media (max-width: 560px) {
  .worklinks-row { grid-template-columns: 1fr; }
  .worklink, .worklink:nth-last-child(-n+2) { grid-column: auto; }
}

/* ---- TIMELINE (one coherent rail model: dot + card + rail share state; eras bend, not snap) ---- */
.tl-section { position: relative; }      /* height set by JS */
.tl-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.tl-band { position: absolute; top: 0; bottom: 0; left: var(--tl-band-left, max(var(--chrome), calc((100vw - var(--content-max)) / 2))); width: var(--tl-band-width, min(var(--content-max), calc(100vw - var(--chrome) * 2))); z-index: 2; pointer-events: none; }
.tl-head { position: absolute; top: 8vh; left: 0; right: 0; z-index: 6; pointer-events: none; }
.tl-head h2 { margin: .4rem 0 .3rem; font-size: clamp(1.75rem,3.3vw,2.9rem); line-height: 1.05; }
.tl-sub { margin: .55rem 0 0; display: inline-flex; align-items: center; gap: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); color: var(--muted); font: .76rem var(--mono); }
.tl-comet { --tl-comet-c: var(--era-1); --tl-comet-r: 0deg; --tl-comet-y: 68%; --tl-comet-tail: 5.8rem; --tl-comet-energy: .18;
  position: absolute; left: -1.35rem; top: 50%; z-index: 6; width: 3.2rem; height: 8.2rem;
  transform: translateY(-50%); pointer-events: none; opacity: .96; contain: layout paint; }
.tl-comet::before { content: ""; position: absolute; left: 50%; top: .25rem; bottom: .25rem; width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tl-comet-c) 36%, transparent), transparent);
  opacity: calc(.16 + var(--tl-comet-energy) * .18); }
.tl-comet-core { position: absolute; left: 50%; top: var(--tl-comet-y); width: 0; height: 0;
  transform: translate(-50%, -50%) rotate(var(--tl-comet-r));
  transition: top .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.tl-comet-tail { position: absolute; left: 50%; bottom: .16rem; width: calc(.24rem + var(--tl-comet-energy) * .16rem); height: var(--tl-comet-tail);
  transform: translateX(-50%); transform-origin: 50% 100%; border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, #fff 86%, var(--tl-comet-c)) 0 8%, transparent 15%),
    linear-gradient(0deg, color-mix(in srgb, #fff 68%, var(--tl-comet-c)) 0%, color-mix(in srgb, var(--tl-comet-c) 88%, transparent) 21%, color-mix(in srgb, var(--tl-comet-c) 50%, transparent) 68%, transparent 100%);
  filter: drop-shadow(0 0 calc(.32rem + var(--tl-comet-energy) * .58rem) color-mix(in srgb, var(--tl-comet-c) 72%, transparent));
  opacity: calc(.52 + var(--tl-comet-energy) * .4);
  transition: height .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1), opacity .42s cubic-bezier(.22,1,.36,1), filter .42s cubic-bezier(.22,1,.36,1); }
.tl-comet-tail::after { content: ""; position: absolute; left: 50%; bottom: 12%; width: 1px; height: 82%; transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(255,255,255,.9), color-mix(in srgb, var(--tl-comet-c) 62%, transparent) 42%, transparent 100%);
  opacity: calc(.42 + var(--tl-comet-energy) * .34); }
.tl-comet-head { position: absolute; left: 50%; top: 50%; width: calc(.62rem + var(--tl-comet-energy) * .12rem); height: calc(.62rem + var(--tl-comet-energy) * .12rem);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff 0 16%, color-mix(in srgb, #fff 70%, var(--tl-comet-c)) 28%, var(--tl-comet-c) 58%, color-mix(in srgb, var(--tl-comet-c) 18%, transparent) 78%, transparent 100%);
  box-shadow: 0 0 calc(.3rem + var(--tl-comet-energy) * .42rem) color-mix(in srgb, var(--tl-comet-c) 82%, transparent),
    0 0 calc(.72rem + var(--tl-comet-energy) * .82rem) color-mix(in srgb, var(--tl-comet-c) 38%, transparent);
  transition: width .42s cubic-bezier(.22,1,.36,1), height .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), background 1.5s cubic-bezier(.22,1,.36,1); }
.tl-comet-spark { position: absolute; left: 50%; bottom: 1.15rem; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, #fff 50%, var(--tl-comet-c));
  opacity: calc(.12 + var(--tl-comet-energy) * .42); filter: drop-shadow(0 0 .38rem var(--tl-comet-c)); transition: opacity .42s cubic-bezier(.22,1,.36,1); }
.tl-comet-spark.spark-a { transform: translate(-.72rem, -1.1rem); }
.tl-comet-spark.spark-b { transform: translate(.58rem, -2.45rem) scale(.72); opacity: calc(.08 + var(--tl-comet-energy) * .28); }
/* rails are SVG paths drawn THROUGH the dots (so dots always sit on the rail) */
.tl-rails { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.rail { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail.main { stroke: url(#railgrad); opacity: .55; }
.rail.ai { stroke: var(--era-3); opacity: 0; filter: drop-shadow(0 0 6px rgba(224,178,90,.45)); transition: opacity .35s ease; }
.rail.tail { stroke: var(--era-2); stroke-dasharray: 2 7; opacity: 0; }   /* faint "still running" concurrency past the fork */
.tl-colcap { position: absolute; top: 17vh; z-index: 2; font: 500 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.tl-colcap.cap-b { color: var(--era-3); opacity: 0; transition: opacity .4s ease; transform: none; }
.tl-track { position: absolute; inset: 0; z-index: 3; pointer-events: auto; }
.tl-entry { --tone: var(--era-1); --tl-w: 3.4rem; --tl-card-x: 0px; --tl-card-scale: 1; --tl-py: 1.1rem; --tl-px: 1.22rem; --tl-title: 1.18rem; position: absolute; left: 50%; top: 0; width: var(--tl-w); will-change: transform, opacity; }
.tl-entry[data-era="2"] { --tone: var(--era-2); } .tl-entry[data-era="3"] { --tone: var(--era-3); }
.tl-dot-hit { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: auto; }
.tl-dot-hit::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.tl-dot { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%,-50%); border: 2px solid var(--tone); background: var(--bg-2); box-shadow: 0 0 0 4px rgba(5,6,12,.85), 0 0 16px color-mix(in srgb, var(--tone) 35%, transparent); pointer-events: none; }
.tl-card { margin-top: 1rem; padding: .28rem .36rem; border: 1px solid transparent; border-left: 2px solid color-mix(in srgb, var(--tone) 48%, transparent); border-radius: var(--rad); background: color-mix(in srgb, rgba(12,16,28,.36) 78%, var(--tone) 22%); backdrop-filter: blur(8px); opacity: .72; overflow: hidden; will-change: opacity, transform; transform: translateX(var(--tl-card-x)) scale(var(--tl-card-scale)); transform-origin: top center; transition: opacity 1.5s cubic-bezier(.22,1,.36,1), padding 1.5s cubic-bezier(.22,1,.36,1), border-color 1.5s cubic-bezier(.22,1,.36,1), background .45s cubic-bezier(.25,.8,.4,1), box-shadow .45s cubic-bezier(.25,.8,.4,1), transform 1.5s cubic-bezier(.22,1,.36,1), border-left-width .45s cubic-bezier(.25,.8,.4,1), backdrop-filter .45s cubic-bezier(.25,.8,.4,1); }
.tl-card:focus-visible { outline: 1px solid var(--tone); outline-offset: 4px; }
.tl-entry.is-active { z-index: 40; }
.tl-entry:has(.tl-card:focus-visible) { z-index: 50 !important; }
.tl-entry.is-hover-boost { z-index: 50 !important; transition: opacity .45s cubic-bezier(.25,.8,.4,1), transform .45s cubic-bezier(.25,.8,.4,1); }
.tl-entry.is-active .tl-card { padding: var(--tl-py) var(--tl-px) 1rem; border-color: color-mix(in srgb, var(--tone) 78%, rgba(255,255,255,.28)); border-left-color: color-mix(in srgb, #fff 38%, var(--tone)); border-left-width: 6px; background: linear-gradient(135deg, color-mix(in srgb, rgba(9,12,22,.96) 86%, var(--tone) 14%), color-mix(in srgb, rgba(4,6,12,.94) 90%, var(--tone) 10%)); backdrop-filter: none; opacity: 1; box-shadow: inset 1px 0 0 color-mix(in srgb, #fff 34%, var(--tone)), 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent), 0 18px 46px rgba(0,0,0,.48), 0 0 30px color-mix(in srgb, var(--tone) 16%, transparent); }
.tl-entry.is-active.is-hover-boost .tl-card, .tl-entry.is-active .tl-card:focus-visible { --tl-card-scale: 1.03; box-shadow: inset 1px 0 0 color-mix(in srgb, #fff 42%, var(--tone)), 0 0 0 1px color-mix(in srgb, var(--tone) 26%, transparent), 0 22px 58px rgba(0,0,0,.52), 0 0 36px color-mix(in srgb, var(--tone) 20%, transparent); }
.tl-entry.is-hover-boost .tl-card { transition: opacity .45s cubic-bezier(.25,.8,.4,1), padding .45s cubic-bezier(.25,.8,.4,1), border-color .45s cubic-bezier(.25,.8,.4,1), background .45s cubic-bezier(.25,.8,.4,1), box-shadow .45s cubic-bezier(.25,.8,.4,1), transform .45s cubic-bezier(.25,.8,.4,1), border-left-width .45s cubic-bezier(.25,.8,.4,1), backdrop-filter .45s cubic-bezier(.25,.8,.4,1); }
.tl-entry.is-active .tl-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(15rem, .95fr); column-gap: 1.15rem; align-items: start; }
.tl-entry.is-active .tl-meta, .tl-entry.is-active .tl-card h3, .tl-entry.is-active .tl-body, .tl-entry.is-active .tl-tag { grid-column: 1; }
.tl-entry.is-active .tl-more { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; margin-top: 0; padding-top: 0; padding-left: 1rem; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--tone) 38%, var(--line)); }
.tl-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .9rem; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .001s linear, max-height .001s linear; }
.tl-entry.is-active .tl-meta { opacity: 1; max-height: 2rem; transition: opacity .28s cubic-bezier(.25,.8,.4,1) .14s, max-height .28s cubic-bezier(.25,.8,.4,1) .14s; }
.tl-year { font: 600 .88rem var(--mono); letter-spacing: .04em; color: var(--tone); white-space: nowrap; }
.tl-mode { color: var(--muted); font: 500 .64rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.tl-card h3 { margin: 0; font-size: .68rem; line-height: 1; color: color-mix(in srgb, var(--tone) 70%, var(--ink)); white-space: nowrap; opacity: .76; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s cubic-bezier(.25,.8,.4,1), margin .45s cubic-bezier(.25,.8,.4,1), font-size .45s cubic-bezier(.25,.8,.4,1), color .45s cubic-bezier(.25,.8,.4,1); }
.tl-entry.is-active .tl-card h3 { margin: .32rem 0 .42rem; font-size: var(--tl-title); line-height: 1.12; color: var(--ink); white-space: normal; opacity: 1; transition: opacity .28s cubic-bezier(.25,.8,.4,1) .14s, margin .45s cubic-bezier(.25,.8,.4,1), font-size .45s cubic-bezier(.25,.8,.4,1), color .45s cubic-bezier(.25,.8,.4,1); }
.tl-card p { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.46; }
.tl-entry.is-active .tl-card p { font-size: 1.05rem; }
.tl-body { opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; transition: opacity .001s linear, max-height .001s linear; }
.tl-entry.is-readable .tl-body { opacity: 1; max-height: 36rem; pointer-events: auto; transition: opacity .3s cubic-bezier(.25,.8,.4,1), max-height .3s cubic-bezier(.25,.8,.4,1); }
.tl-chip-row { display: flex; flex-wrap: wrap; gap: .34rem; margin-top: .72rem; }
.tl-chip { display: inline-flex; align-items: center; gap: .36rem; min-width: 0; padding: .2rem .46rem .2rem .26rem; border: 1px solid color-mix(in srgb, var(--tone) 34%, var(--line)); border-radius: 999px; background: rgba(5,8,16,.34); color: var(--ink-2); font: 500 .68rem/1 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.tl-chip[data-kind="tech"] { border-style: dashed; }
.tl-chip svg { width: 1.4rem; height: 1.4rem; flex: 0 0 1.4rem; }
.tl-chip .chip-bg { fill: color-mix(in srgb, var(--tone) 17%, rgba(8,11,20,.9)); stroke: color-mix(in srgb, var(--tone) 72%, transparent); }
.tl-chip .chip-mark { fill: var(--tone); font: 700 8px var(--mono); letter-spacing: 0; }
.tl-more { display: grid; gap: .38rem; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding-top: 0; border-top: 1px solid transparent; transition: max-height .001s linear, opacity .001s linear, margin-top .001s linear, padding-top .001s linear, border-color .001s linear; }
.tl-entry.is-readable .tl-more { max-height: 18rem; opacity: 1; margin-top: .72rem; padding-top: .72rem; border-color: color-mix(in srgb, var(--tone) 38%, var(--line)); transition: max-height .3s cubic-bezier(.25,.8,.4,1), opacity .3s cubic-bezier(.25,.8,.4,1), margin-top .3s cubic-bezier(.25,.8,.4,1), padding-top .3s cubic-bezier(.25,.8,.4,1), border-color .3s cubic-bezier(.25,.8,.4,1); }
.tl-entry.is-hover-boost .tl-more { transition: max-height .3s cubic-bezier(.25,.8,.4,1), opacity .3s cubic-bezier(.25,.8,.4,1), margin-top .3s cubic-bezier(.25,.8,.4,1), padding-top .3s cubic-bezier(.25,.8,.4,1), border-color .3s cubic-bezier(.25,.8,.4,1); }
.tl-entry.is-active .tl-more, .tl-entry.is-active .tl-card:hover .tl-more, .tl-entry.is-active .tl-card:focus-visible .tl-more { margin-top: 0; padding-top: 0; }
.tl-more-row { display: grid; grid-template-columns: 4.8rem 1fr; gap: .55rem; }
.tl-more-k { color: var(--tone); font: 600 .64rem/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tl-more-v { color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.tl-tag { display: inline-block; margin-top: .7rem; font: .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .14rem .6rem; }
.tl-credentials { position: absolute; z-index: 6; left: 0; bottom: calc(max(3.4rem, 5.5vh) + 3rem); width: min(30rem, 42%); padding: .95rem 1rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--era-3); border-radius: var(--rad); background: rgba(12,16,28,.72); backdrop-filter: blur(10px); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 1.5s cubic-bezier(.22,1,.36,1), transform 1.5s cubic-bezier(.22,1,.36,1); }
.tl-credentials.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.tl-cred-cap { margin: 0 0 .55rem; color: var(--era-3); font: 600 .58rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.tl-cred-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.tl-cred-chip { border: 1px solid color-mix(in srgb, var(--era-3) 34%, var(--line)); border-radius: 999px; padding: .2rem .48rem; color: var(--ink-2); font: 500 .56rem/1.2 var(--mono); }
.tl-degree { margin: .18rem 0 0; color: var(--ink-2); font-size: .76rem; line-height: 1.35; }
.tl-degree strong { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) {
  .tl-band { left: var(--chrome); width: calc(100vw - var(--chrome) * 2); }
  .tl-head { top: 6.1rem; }
  .tl-comet { left: -.2rem; top: 54%; width: 2.55rem; height: 6.5rem; }
  .tl-entry { width: var(--tl-w); } .tl-dot, .tl-dot-hit { left: 0; } .tl-card { margin-left: 1.35rem; transform-origin: top left; } .tl-colcap { display: none; }
  .tl-entry.is-active .tl-card { display: block; }
  .tl-card { max-height: calc(100svh - 13.5rem); overflow-y: auto; overscroll-behavior: contain; padding: .82rem .9rem .85rem; }
  .tl-card h3 { font-size: 1.12rem; }
  .tl-card p, .tl-entry.is-active .tl-card p { font-size: .9rem; line-height: 1.38; }
  .tl-chip-row { gap: .26rem; margin-top: .55rem; }
  .tl-chip { padding: .15rem .34rem .15rem .2rem; font-size: .62rem; white-space: normal; }
  .tl-chip svg { width: 1.12rem; height: 1.12rem; flex-basis: 1.12rem; }
  .tl-entry.is-readable .tl-body { max-height: calc(100svh - 17rem); overflow-y: auto; overscroll-behavior: contain; }
  .tl-more { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding-top: 0; padding-left: 0; border-left: 0; border-top: 1px solid transparent; }
  .tl-entry.is-readable .tl-more { max-height: none; opacity: 1; overflow: visible; margin-top: .7rem; padding-top: .7rem; padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line)); }
  .tl-more-row { grid-template-columns: 4.25rem 1fr; gap: .45rem; }
  .tl-more-k { font-size: .58rem; }
  .tl-more-v { font-size: .8rem; line-height: 1.3; }
  .tl-tag { font-size: .58rem; }
  .tl-credentials { left: 1.35rem; right: 0; bottom: 4.7rem; width: auto; max-height: calc(100svh - 12rem); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-comet { --tl-comet-y: 58%; --tl-comet-tail: 5.1rem; --tl-comet-energy: .24; }
  .tl-comet-core, .tl-comet-tail, .tl-comet-tail::after, .tl-comet-head, .tl-comet-spark { transition: none; }
  .tl-entry, .tl-card, .tl-meta, .tl-body, .tl-card h3, .tl-more, .tl-entry.is-hover-boost, .tl-entry.is-hover-boost .tl-card, .tl-entry.is-hover-boost .tl-more { transition: none; }
  .tl-comet-spark { display: none; }
}

/* ---- BREADTH RIBBON (single-speed caption pinned to the bottom of the work-scroll; content + color
   follow the active era — set by the timeline JS via --tl-ribbon-c. One track, one speed, pauses on hover) ---- */
.tl-ribbon { position: absolute; left: 0; right: 0; bottom: max(3.4rem, 5.5vh); z-index: 5; height: 2.15rem;
  display: grid; grid-template-columns: auto 1fr; align-items: stretch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); --tl-ribbon-c: var(--era-1); pointer-events: auto; }
.tl-ribbon-cap { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.1rem 0 1rem;
  border-right: 1px solid var(--line); color: var(--tl-ribbon-c);
  font: 500 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.tl-ribbon-cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tl-ribbon-c); box-shadow: 0 0 8px var(--tl-ribbon-c); }
.tl-ribbon-window { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ink) 3%, var(--ink) 88%, transparent);
  mask-image: linear-gradient(90deg, transparent 0, var(--ink) 3%, var(--ink) 88%, transparent); }
.tl-ribbon-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: .7rem;
  width: max-content; padding-left: 1.2rem; will-change: transform; animation: ticker 96s linear infinite; }
.tl-ribbon:hover .tl-ribbon-track { animation-play-state: paused; }
.tl-ribbon-cell { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; color: var(--ink-2);
  font: 500 .62rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tl-ribbon-cell::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--tl-ribbon-c); opacity: .9; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 820px) { .tl-ribbon { bottom: 2vh; } .tl-ribbon-cap { padding-left: 1rem; } }
@media (prefers-reduced-motion: reduce) { .tl-ribbon-track { animation: none; } }

/* ---- PROOF cards (hover reveals context; stable footprint, no neighbor collision) ---- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem,1fr)); gap: .9rem; }
.proof-grid .pcard-wide { grid-column: span 2; }   /* long value (on-prem to AWS) gets a double-wide card; grid reflows */
.pcard { border: 1px solid var(--line); border-radius: var(--rad); background: var(--glass); backdrop-filter: blur(7px); padding: 1.2rem 1.2rem 1.3rem; min-height: 8.5rem; cursor: default;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s, background .35s; }
.pcard:hover { transform: translateY(-4px); border-color: var(--accent); background: rgba(20,26,44,.7); box-shadow: 0 20px 50px rgba(0,0,0,.5); z-index: 2; position: relative; }
.pcard .pv { font-family: var(--display); font-size: clamp(2.05rem, 2.5vw, 2.55rem); font-weight: 700; }
.pcard .pl { margin-top: .5rem; font: .72rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pcard .pn { margin-top: .6rem; font-size: .82rem; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; }
.pcard:hover .pn { max-height: 6rem; opacity: 1; }

/* ---- SYSTEM MAP (full-bleed field of floating skill clusters; hover unfurls ONE at a time =====
   "slow orbital disclosure, not bouncy widgets": tamed overshoot (cubic-bezier top 1.04, <=6px),
   one open at a time + others dim, slow per-tree float; shared skills wear a halo; ECE nests to ELK. ---- */
.sysmap-section { position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  min-height: 100svh; padding: 0; overflow: hidden; }
.sysmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }

/* right-anchored title overlay (no-fly zone for trees) */
.sysmap-title { position: absolute; z-index: 4; top: 15vh; right: clamp(1.5rem, 6vw, 7rem);
  width: clamp(15rem, 23vw, 22rem); text-align: right; pointer-events: none; }
.sysmap-title h2 { margin: .35rem 0 0; font-size: clamp(1.75rem, 3.3vw, 2.9rem); line-height: 1.05; }
.sysmap-hint { margin: 1rem 0 0; color: var(--muted); font: .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* a cluster = thin threads + scattered SOLID dots + a tinted category pill; JS breathes/tilts the figure */
.cl { transition: opacity .35s ease, filter .35s ease; will-change: transform; }
.cl.is-ambient-paused { will-change: auto; }
.sysmap.focusing .cl:not(.is-hot) { opacity: .28; filter: saturate(.7); }

@keyframes constellation-breathe-tilt {
  0%, 100% { transform: scale(1) rotate(calc(var(--tilt, .7deg) * -1)); }
  50% { transform: scale(calc(1 + var(--breathe, .025))) rotate(var(--tilt, .7deg)); }
}
@keyframes constellation-counter-tilt {
  0%, 100% { transform: rotate(var(--tilt, .7deg)); }
  50% { transform: rotate(calc(var(--tilt, .7deg) * -1)); }
}

/* threads — the constellation's asterism lines (connect-the-dots figure); brighter on the hovered cluster */
.cl-edge { stroke: var(--c); fill: none; stroke-width: .95; opacity: .46; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: opacity .32s ease, stroke-width .32s ease, stroke-dashoffset 1.15s cubic-bezier(.16,1,.3,1); }
.sysmap.is-drawn .cl-edge { stroke-dashoffset: 0; }
.sysmap.is-solid .cl-edge { stroke-dasharray: none; stroke-dashoffset: 0; }
.cl.is-hot .cl-edge { opacity: .72; stroke-width: 1.15; }
.sysmap.focusing .cl:not(.is-hot) .cl-edge { opacity: .13; stroke-width: .8; }

/* ghost stars — faint gray dots that only complete a constellation's recognizable shape (no label, inert) */
.cl-ghost { pointer-events: none; }
.ghost-dot { fill: rgba(194,204,224,.58); filter: drop-shadow(0 0 2px rgba(184,194,216,.22)); }
.sysmap.focusing .cl:not(.is-hot) .ghost-dot { opacity: .42; }

/* nodes — 4-point instrument glints, sized by years with brightness as a second magnitude channel */
.cl-node { cursor: grab; touch-action: none; outline: none; }
.cl-node:active { cursor: grabbing; }
.node-hit { fill: transparent; pointer-events: all; }
.node-star { transform-box: fill-box; transform-origin: center; opacity: var(--star-opacity, .88);
  filter: drop-shadow(0 0 var(--glow, 7px) color-mix(in srgb, var(--c) var(--glow-mix, 58%), transparent));
  transition: transform .25s ease, opacity .25s ease, filter .25s ease; }
.node-halo { fill: var(--c); opacity: .12; }
.node-core { fill: color-mix(in srgb, var(--c) 82%, #fff); }
.node-ray { stroke: color-mix(in srgb, var(--c) 76%, #fff); stroke-width: 1; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
.node-ring { fill: none; stroke: color-mix(in srgb, var(--c) 74%, #fff); stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; }
.cl-node text { fill: var(--muted); font: 500 10.5px var(--mono); pointer-events: none; paint-order: stroke; stroke: rgba(5,8,16,.8); stroke-width: 3.5px; transition: fill .25s ease; }
.cl-node:hover .node-star, .cl-node.hot .node-star, .cl-node:focus-visible .node-star {
  transform: scale(1.38); opacity: 1; filter: drop-shadow(0 0 15px color-mix(in srgb, var(--c) 82%, transparent)); }
.cl-node.is-shining:not(.is-anchor) .node-star {
  animation: star-shine var(--shine-dur, 2100ms) cubic-bezier(.16,1,.3,1) 1; }
.cl-node.is-anchor.is-shining .node-star {
  animation: anchor-twinkle 6.8s ease-in-out infinite, star-shine-anchor var(--shine-dur, 2100ms) cubic-bezier(.16,1,.3,1) 1;
  animation-delay: var(--tw, 0s), 0s; }
.cl-node.is-shining .node-halo {
  animation: shine-halo var(--shine-dur, 2100ms) cubic-bezier(.16,1,.3,1) 1; }
.cl-node.is-shining .node-core {
  animation: shine-core var(--shine-dur, 2100ms) cubic-bezier(.16,1,.3,1) 1; }
.cl-node.is-shining .node-ray {
  animation: shine-ray var(--shine-dur, 2100ms) cubic-bezier(.16,1,.3,1) 1; }
.cl-node:hover text, .cl-node.hot text, .cl-node:focus-visible text { fill: var(--ink); }
.cl-node:focus-visible .node-ring { opacity: 1; stroke: var(--ink); stroke-width: 1.4; }
/* anchor star — the brightest in its constellation (highest-years skill); a faint halo ring */
.cl-node.is-anchor .node-star { --star-opacity: 1; --glow-mix: 78%; animation: anchor-twinkle 6.8s ease-in-out infinite; animation-delay: var(--tw, 0s); }
.cl-node.is-anchor .node-ring { opacity: .72; }
@keyframes anchor-twinkle {
  0%, 100% { opacity: .92; filter: drop-shadow(0 0 var(--glow, 10px) color-mix(in srgb, var(--c) 70%, transparent)); }
  50% { opacity: 1; filter: drop-shadow(0 0 calc(var(--glow, 10px) + 5px) color-mix(in srgb, var(--c) 86%, transparent)); }
}
@keyframes star-shine {
  0%, 100% { transform: scale(1); opacity: var(--star-opacity, .88); filter: drop-shadow(0 0 var(--glow, 7px) color-mix(in srgb, var(--c) var(--glow-mix, 58%), transparent)); }
  44% { transform: scale(1.2); opacity: .95; filter: drop-shadow(0 0 calc(var(--glow, 7px) + 6px) color-mix(in srgb, var(--c) 72%, transparent)); }
}
@keyframes star-shine-anchor {
  0%, 100% { transform: scale(1); }
  44% { transform: scale(1.18); }
}
@keyframes shine-halo {
  0%, 100% { opacity: .12; filter: drop-shadow(0 0 0 transparent); }
  44% { opacity: .18; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 62%, transparent)); }
}
@keyframes shine-core {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
  44% { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 66%, transparent)); }
}
@keyframes shine-ray {
  0%, 100% { opacity: .7; }
  44% { opacity: .85; }
}

/* category pill — tinted rounded tag sitting among its dots */
.cl-pill { pointer-events: none; }
.cl-pill-bg { fill: color-mix(in srgb, var(--c) 10%, rgba(6,9,16,.76)); stroke: color-mix(in srgb, var(--c) 40%, transparent); stroke-width: 1; rx: 4px; }
.cl-pill-title { fill: var(--c); font: 650 10px var(--mono); letter-spacing: .14em; }
.cl-pill-sub { fill: var(--ink-2); font: 500 8.5px var(--mono); letter-spacing: .18em; opacity: .72; }

/* center readout — strong text appears on hover/focus/drag */
.sysmap-detail { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(34ch, 50vw); text-align: center; pointer-events: none; opacity: .72; transition: opacity .3s ease; }
.sysmap-detail.live { opacity: 1; }
.sysmap-detail .sd-k { font: 500 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.sysmap-detail h3 { margin: .55rem 0 .25rem; font: 650 clamp(1.95rem, 3.55vw, 3.05rem)/1.02 var(--display); color: var(--ink); }
.sysmap-detail .sd-yr { margin: 0 0 .55rem; font: 500 .82rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.sysmap-detail .sd-note { margin: 0 auto; max-width: 30ch; font: 400 .96rem/1.5 var(--sans); color: var(--ink-2); }

@media (max-width: 820px) and (min-width: 721px) {
  .sysmap-title { top: 7vh; right: 1.2rem; width: clamp(12rem, 60vw, 16rem); }
  .sysmap-detail { top: 55%; width: min(40ch, 86vw); }
  .cl-root text { font-size: 13px; }
}

/* PHONE system map — JS re-centers the six clusters into a tall portrait column (viewBox 560x1720);
   here the section flows + scrolls, the title/readout sit normally, and the readout STICKS to the top
   so a tapped node's story stays in view while you scroll the field. Fixes the squashed-band + the
   oversized "Hover a node" overlap. */
@media (max-width: 720px) {
  .sysmap-section { width: auto; margin-left: 0; min-height: auto; overflow: visible;
    padding: clamp(3.5rem, 9vw, 6rem) 0 3rem; }
  .sysmap-title { position: relative; inset: auto; top: auto; right: auto; left: auto;
    width: auto; max-width: none; text-align: left; padding: 0 var(--chrome); pointer-events: auto; }
  .sysmap-title h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .sysmap-hint { display: none; }
  .sysmap-detail { position: sticky; top: 4.2rem; left: auto; transform: none; z-index: 6;
    width: calc(100% - var(--chrome) * 2); margin: 1.1rem auto .3rem; padding: .75rem .95rem;
    text-align: left; opacity: 1; border: 1px solid var(--line); border-radius: var(--rad);
    background: rgba(8, 11, 20, .82); backdrop-filter: blur(12px); }
  .sysmap-detail .sd-k { font-size: .58rem; letter-spacing: .14em; }
  .sysmap-detail h3 { font-size: 1.18rem; margin: .25rem 0 .15rem; }
  .sysmap-detail .sd-yr { font-size: .72rem; margin-bottom: .35rem; }
  .sysmap-detail .sd-note { font-size: .82rem; max-width: none; margin: 0; }
  .sysmap { position: relative; width: 100%; height: auto; display: block; z-index: 2; }
  .cl-node text { font-size: 12px; }
  .cl-pill-title { font-size: 11px; }
  .cl-pill-sub { font-size: 8.5px; }
  .node-ray { stroke-width: .85; }
}

@media (prefers-reduced-motion: reduce) {
  #cosmos { transition: none; }
  .cl, .cl-pill, .cl-node text { animation: none !important; transition: none; transform: none; will-change: auto; }
  .cl-edge { transition: opacity .32s ease, stroke-width .32s ease; stroke-dasharray: none; stroke-dashoffset: 0; }
  .cl-node.is-anchor .node-star { animation: none; }
  .cl-node.is-shining .node-star,
  .cl-node.is-shining .node-halo,
  .cl-node.is-shining .node-core,
  .cl-node.is-shining .node-ray { animation: none; }
}

/* ---- PLATFORMS (full-width grouped icon grid) ---- */
.plat-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
.plat-cat { padding-top: 1rem; border-top: 1px solid var(--line); }   /* grouped-panel feel: category reads before its tools (codex) */
.plat-cat-head { margin: 0 0 1rem; color: var(--accent); font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.plat-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.plat-tile { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--glass); backdrop-filter: blur(7px); transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s; }
.plat-tile:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(20,26,44,.6); }
.plat-tile svg { width: 22px; height: 22px; flex: 0 0 22px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.plat-tile span { white-space: nowrap; font: .82rem var(--mono); color: var(--ink-2); }

/* ---- ROW FAMILY: writing ledger, mission manifest, contact links ---- */
.writing-ledger-section { padding-block: clamp(4.6rem, 8vw, 7.4rem); }
.ledger-head { margin-bottom: clamp(1.3rem, 3vw, 2.2rem); }
.row-list, .ledger-list, .manifest-list { display: grid; }
.ledger-row, .manifest-row {
  --tone: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: minmax(7rem, .22fr) minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2.4rem);
  align-items: baseline;
  min-height: 6.25rem;
  padding: 1.35rem .3rem 1.15rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: padding-left .35s cubic-bezier(.16,1,.3,1), color .25s ease;
}
.ledger-row:last-child, .manifest-row:last-child { border-bottom: 1px solid var(--line); }
.ledger-meta, .manifest-status {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  align-items: center;
  color: var(--muted);
  font: 500 .68rem/1.15 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ledger-type, .manifest-status { color: var(--tone); }
.ledger-content, .manifest-content { min-width: 0; }
.ledger-year {
  margin: clamp(.8rem, 2vw, 1.25rem) 0 .35rem;
  color: var(--muted);
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ledger-title, .manifest-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.28rem, 2.2vw, 1.88rem);
  font-weight: 600;
  line-height: 1.05;
}
.ledger-row.is-latest .ledger-title { font-size: clamp(1.65rem, 3vw, 2.45rem); }
.ledger-deck, .manifest-line {
  margin: .38rem 0 0;
  max-width: 72ch;
  color: var(--ink-2);
  font-size: clamp(.92rem, 1.15vw, 1.03rem);
  line-height: 1.45;
}
.ledger-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .38s cubic-bezier(.16,1,.3,1), opacity .26s ease, margin-top .38s cubic-bezier(.16,1,.3,1);
}
.ledger-body > p { min-height: 0; overflow: hidden; margin: 0; max-width: 76ch; color: var(--ink-2); font-size: .96rem; line-height: 1.62; }
.ledger-row:hover, .ledger-row:focus-visible, .manifest-row:hover, .manifest-row:focus-visible { padding-left: .55rem; }
.ledger-row:hover .ledger-type, .ledger-row:focus-visible .ledger-type,
.manifest-row:hover .manifest-status, .manifest-row:focus-visible .manifest-status { color: var(--tone); }
.ledger-row:hover .ledger-title, .ledger-row:focus-visible .ledger-title,
.manifest-row:hover .manifest-title, .manifest-row:focus-visible .manifest-title { color: var(--tone); }
.ledger-row:focus-visible, .manifest-row:focus-visible { outline: 1px solid var(--tone); outline-offset: 4px; }
.ledger-row.is-open .ledger-body, .ledger-row:hover .ledger-body, .ledger-row:focus-within .ledger-body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: .95rem;
}
.ledger-coda {
  margin: 1.15rem 0 0;
  color: var(--muted);
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mission-manifest-section { padding-block: clamp(5rem, 9vw, 8rem); }
.manifest-row {
  min-height: 8.15rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 1.65rem .3rem 1.45rem;
}
.manifest-titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem .75rem;
}
.manifest-titleline::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-2);
  order: 1;
}
.manifest-title { font-size: clamp(1.1rem, 1.85vw, 1.58rem); line-height: 1.12; }
.manifest-status {
  order: 2;
  display: inline-flex;
  flex: 0 0 auto;
  padding: .14rem .46rem .16rem;
  border: 1px solid color-mix(in srgb, var(--tone) 38%, var(--line));
  border-radius: 999px;
  background: rgba(5, 8, 16, .26);
  font-size: .58rem;
  letter-spacing: .12em;
}
.manifest-line { max-width: 62ch; margin-top: .62rem; }
.manifest-row[data-status="shipping"] { --tone: var(--era-2); }
.manifest-row[data-status="in-flight"] { --tone: var(--era-3); }
@media (max-width: 720px) {
  .ledger-row, .manifest-row { grid-template-columns: 1fr; row-gap: .65rem; min-height: auto; padding-block: 1.15rem; }
  .ledger-meta, .manifest-status { font-size: .62rem; }
  .manifest-row { align-items: start; }
  .manifest-titleline::after { display: none; }
  .ledger-row.is-latest .ledger-title { font-size: clamp(1.45rem, 8vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ledger-row, .manifest-row, .ledger-body { transition: none; }
}

/* masked slide-up title (the "Systems that had to hold" feeling) */
.rise { overflow: hidden; padding-bottom: .12em; }
.rise > span { display: inline-block; transform: translateY(115%); transition: transform .9s cubic-bezier(.16,1,.3,1); }
html.anim .rise.reveal:not(.in) { opacity: 1; transform: none; }
.rise.in > span { transform: translateY(0); }

/* ---- CONTACT (closing call) ---- */
.contact-lede { margin: 1.2rem 0 0; color: var(--ink-2); font-size: .98rem; line-height: 1.6; max-width: 30ch; }
.shell.split .contact-lede { /* keep readable in the sticky title column */ }
.contact-links { list-style: none; margin: 0; padding: 0; display: grid; }
.contact-links li { border-top: 1px solid var(--line); }
.contact-links li:last-child { border-bottom: 1px solid var(--line); }
.contact-links a { display: grid; grid-template-columns: 8rem 1fr auto; align-items: baseline; gap: 1rem; padding: 1.35rem .3rem; text-decoration: none; transition: padding-left .35s cubic-bezier(.16,1,.3,1), color .25s; }
.contact-links a:hover { padding-left: .55rem; color: var(--accent); }   /* restrained travel; the arrow carries the motion (codex) */
.contact-links .cl-k { font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.contact-links a:hover .cl-k { color: var(--accent); }
.contact-links .cl-v { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.contact-links .cl-v em { font-style: normal; font-family: var(--mono); font-size: .7rem; color: var(--muted); letter-spacing: .06em; }
.contact-links a:hover .cl-v { color: var(--accent); }
.contact-links .cl-arrow { font: 400 1.1rem var(--mono); color: var(--muted); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.contact-links .cl-arrow-mobile { display: none; font: 400 .72em/1 var(--mono); color: var(--muted); }
.contact-links a:hover .cl-arrow { transform: translate(5px,-3px); color: var(--accent); }
@media (max-width: 560px) {
  .contact-links a {
    display: block;
    padding: .78rem .85rem;
    min-height: inherit;
  }
  .contact-links a:hover { padding-left: 1.05rem; }
  .contact-links .cl-k {
    display: block;
    margin-bottom: .38rem;
    line-height: 1;
  }
  .contact-links .cl-v {
    display: inline;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .contact-links .cl-arrow { display: none; }
  .contact-links .cl-arrow-mobile {
    display: inline-block;
    vertical-align: baseline;
  }
  .contact-links a:hover .cl-arrow-mobile {
    color: var(--accent);
  }
}

/* ---- CONTACT closing dock (the last beat lands: big headline + status panel left, large link rows right) ---- */
.contact-close { min-height: 92svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; overflow: hidden; }
.contact-close > .shell { width: 100%; position: relative; z-index: 2; }
.contact-close .shell.split .sec-head { position: relative; top: auto; }
/* three aligned boxes: headline panel · link rows · profile portrait (owner-directed experiment) */
.shell.split.contact-grid { grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr) clamp(12rem, 19vw, 16rem); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
.contact-panel { position: relative; padding: 1.4rem 1.7rem 1.7rem; border: 1px solid var(--line); border-radius: var(--rad); background: var(--glass); backdrop-filter: blur(10px); overflow: hidden; }
/* sized to sit inside the panel without clipping "challenge" */
.contact-close h2 { font-size: clamp(2.3rem, 4vw, 4.1rem); line-height: .96; margin-bottom: 0; }
.contact-close h2.rise { overflow: visible; padding-bottom: 0; }
.contact-close h2.rise > span { display: block; transform: none; transition: none; }
.contact-close .contact-lede { margin: 1.4rem 0 0; color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; max-width: 31ch; }
.contact-status { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font: 500 .62rem/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* links = the middle box: rows distribute over the full column height so all three boxes align */
.contact-links-large { height: 100%; display: grid; grid-auto-rows: 1fr; align-content: stretch; }
.contact-links-large li { min-height: clamp(5.6rem, 11.5vh, 7.6rem); display: grid; }
.contact-links-large a { grid-template-columns: 6.5rem 1fr auto; align-items: center; padding: 1.15rem 1rem; }
.contact-links-large .cl-v { font-size: clamp(1.3rem, 2.3vw, 2.05rem); line-height: 1.05; }
@media (max-width: 560px) {
  .contact-links-large {
    height: auto;
    grid-auto-rows: auto;
    align-content: start;
  }
  .contact-links-large li { min-height: 5.65rem; }
  .contact-links-large .cl-v {
    font-size: clamp(1.42rem, 7.5vw, 1.82rem);
    line-height: 1.05;
  }
}
/* the third box: the left-facing profile, fully visible, same box language as the panel (owner: keep the frame) */
.contact-side-portrait { margin: 0; position: relative; border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: #05060c; }
.contact-side-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(.88) brightness(.86); }
@media (max-width: 820px) {
  .shell.split.contact-grid { grid-template-columns: 1fr; align-items: start; }
  .contact-panel { position: relative; }
  .contact-side-portrait { justify-self: end; width: min(60vw, 20rem); height: clamp(16rem, 52vw, 22rem); }
}

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2.4rem var(--chrome); border-top: 1px solid var(--line); color: var(--muted); font: .74rem var(--mono); }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .hero { --hero-top-pad: clamp(11rem, 28svh, 15rem); }
  .hero-inner { display: block; }
  .hero-copy { display: block; }
  .hero-photo {
    width: 100%;
    height: clamp(14rem, 38svh, 22rem);
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
  }
  .hero-photo img { object-position: 50% 24%; transform: none; }
  .proof-grid { grid-template-columns: repeat(2,1fr); }
  .proof-grid .pcard-wide { grid-column: span 2; }   /* keeps the long "on-prem to AWS" value on one line */
  .hud-bl, .hud-tl { font-size: .6rem; }
}
@media (max-width: 560px) {
  /* tighten the instrument HUD so the clock / scroll-% don't run off the edge */
  .hud { font-size: .54rem; letter-spacing: .04em; }
  /* hero: let the name wrap to two lines + scale display + mono down to the phone */
  .hero { --hero-top-pad: clamp(9.5rem, 24svh, 12rem); padding-bottom: 4rem; }
  .hero-top { align-items: flex-start; gap: .55rem; margin-bottom: .85rem; font-size: .68rem; line-height: 1.25; letter-spacing: .16em; }
  .hero h1 { font-size: clamp(2.6rem, 13vw, 4.7rem); line-height: .9; white-space: normal; max-width: 7ch; }
  .motif { width: .76rem; margin-top: .08rem; }
  .hero-role { font-size: .8rem; }
  .hero-sub { font-size: .82rem; }
  .hero-contact { gap: .55rem .7rem; font-size: .8rem; flex-wrap: wrap; }
  .scroll-cue { display: none; }   /* would otherwise overlap the wrapped contact row */
  /* section headings shouldn't crowd the gutters */
  .section h2 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
  .contact-close h2 { font-size: clamp(2rem, 8vw, 2.8rem); }
}
@media (max-width: 520px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid .pcard-wide { grid-column: auto; }   /* single column: no double-wide span needed */
  .note { grid-template-columns: 1fr; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim .reveal { opacity: 1 !important; transform: none !important; }
  .rise > span { transform: none !important; }
  .nebula, .motif i { animation: none !important; }
  .rail.ai { opacity: .9 !important; }
  .scroll-cue { display: none; }
}

/* ---- PHONE performance ----
   backdrop-filter over the always-repainting cosmos canvas is the #1 jank source: every frosted
   panel re-rasterizes its blur each frame, starving the main thread so scroll + CSS animations
   stutter or appear frozen. On phones, drop the blur and lean on a more opaque panel fill (still
   reads as glass against the cosmos showing through the gaps), and lighten the nebulae. */
@media (max-width: 720px) {
  .site-nav.is-scrolled, .build-thesis, .build-ops, .worklinks, .tl-card,
  .pcard, .plat-tile, .contact-panel, .sysmap-detail, .tl-ribbon, .tl-credentials, .worklink {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: rgba(10, 13, 24, .86);
  }
  .nebula-1 { filter: blur(46px); opacity: .4; }
  .nebula-2 { display: none; }   /* one nebula is plenty on a phone */
}