/* Sterling Pearson portfolio. Design system: monochrome blueprint (hairline grid, mono spec blocks)
   + flight-deck photography (full-bleed images, condensed uppercase display). Single dark theme by design. */
:root{
  color-scheme:dark;
  --void:#0A0A0B;
  --panel:#101112;
  --panel-2:#151618;
  --line:#232426;
  --line-2:#2E3033;
  --text:#ECECEA;
  --text-2:#B4B5B2;
  --muted:#85878A;
  --faint:#5A5C5F;          /* lines and rules only: 2.95:1, too low for text */
  --dim:#6A6C6F;            /* large decorative text only: 3.8:1 */
  --live:#E3A23B;          /* in-progress status only */
  --done:#D8D8D4;          /* complete status */
  --disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --z-raise:1; --z-raise-2:2; --z-raise-3:3;   /* stacking inside a component */
  --z-behind:-1;--z-nav:50; --z-skip:60; --z-sheet:90; --z-overlay:900; --z-lightbox:1000;
  /* component colors (shelf, lamp, 3D viewer, diagram accents) */
  --paper:#FAFAF8; --spine-ink:#0B0B0C; --spine-muted:#777777; --ok:#6FCF97; --bulb:#FFE2A8;
  --flame-1:#FFF1CF; --flame-2:#FFE6B0; --flame-3:#FFD08A;
  --steel-0:#0D0E0F; --steel-1:#12151C; --steel-2:#18191B; --steel-3:#1B1C1F; --steel-4:#1D1E21;
  --steel-5:#2A2C30; --steel-6:#3B3D41; --steel-7:#4A4C50; --steel-8:#55575B; --steel-9:#6A6C70;
  /* channel triplets for translucent layers: rgb(var(--x) / alpha) */
  --shade-rgb:4 4 5; --glint-rgb:250 250 248; --scrim-rgb:6 6 7; --panel-rgb:18 19 21; --lamp-rgb:255 198 118;
  --gut:clamp(16px,4vw,48px);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* stop iOS Safari inflating captions and small text */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--void);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--text);color:var(--void)}
:focus-visible{outline:1px solid var(--text);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.disp{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;line-height:.95}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--text-2);max-width:62ch}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--void) 72%,transparent);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.brand .mk{font:600 15px var(--disp);letter-spacing:.08em;border:1px solid var(--text);padding:2px 6px}
.brand .nm{font:600 17px var(--disp);letter-spacing:.12em;text-transform:uppercase}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);text-decoration:none}
.nav ul a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:8px;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--text);border:1px solid var(--line-2);padding:9px 16px;border-radius:999px;background:transparent;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--text)}
.btn.solid{background:var(--text);color:var(--void);border-color:var(--text)}
.btn.solid:hover{background:var(--paper)}
/* phones: brand + resume on the first row, the section tabs on a full-width second row */
@media (max-width:820px){
  html{scroll-padding-top:104px}
  .nav .wrap{flex-wrap:wrap;height:auto;gap:0 12px;justify-content:space-between}
  .nav .brand{order:1;height:52px}
  .nav .btn.hide-sm{order:2;padding:7px 14px;font-size:11px}
  .nav ul{order:3;flex:1 0 100%;margin:0;height:40px;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line)}
  .nav ul a{font-size:11px;letter-spacing:.1em;padding:10px 0}
}
@media (max-width:360px){.nav .brand .nm{display:none}}

/* ---------- hero (split: copy left, portrait photo right) ---------- */
.hero{position:relative;min-height:min(94vh,900px);min-height:min(94svh,900px);display:flex;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-grid{position:relative;z-index:var(--z-raise-2);width:100%;display:flex;align-items:flex-end;padding-block:120px 56px}
.hero-copy{max-width:min(620px,56%)}
.hero h1{font-size:clamp(56px,9.4vw,148px)}
.hero .motto{font:500 clamp(18px,2.2vw,26px)/1.2 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);margin-top:14px}
.hero .lede{margin-top:22px;color:var(--text)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-photo{position:absolute;margin:0;top:0;right:0;bottom:0;width:min(52%,760px);z-index:var(--z-raise)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(.92) contrast(1.04)}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 0%,color-mix(in srgb,var(--void) 94%,transparent) 8%,color-mix(in srgb,var(--void) 78%,transparent) 18%,color-mix(in srgb,var(--void) 50%,transparent) 30%,color-mix(in srgb,var(--void) 22%,transparent) 44%,color-mix(in srgb,var(--void) 6%,transparent) 58%,color-mix(in srgb,var(--void) 0%,transparent) 70%),linear-gradient(180deg,color-mix(in srgb,var(--void) 45%,transparent) 0%,color-mix(in srgb,var(--void) 0%,transparent) 22%,color-mix(in srgb,var(--void) 0%,transparent) 78%,color-mix(in srgb,var(--void) 70%,transparent) 100%);z-index:var(--z-raise)}
.hero-photo figcaption{position:absolute;right:var(--gut);bottom:18px;z-index:var(--z-raise-2);text-align:right}
.fig{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){
  .hero{flex-direction:column;min-height:0}
  .hero-photo{position:relative;width:100%;height:56vh;height:56svh;min-height:380px;order:-1}
  .hero-photo img{object-position:50% 45%}
  .hero-photo::before{background:linear-gradient(180deg,color-mix(in srgb,var(--void) 50%,transparent) 0%,color-mix(in srgb,var(--void) 0%,transparent) 25%,color-mix(in srgb,var(--void) 0%,transparent) 60%,var(--void) 100%)}
  .hero-photo figcaption{display:none}
  .hero-grid{padding-block:0 44px;margin-top:-90px}
  .hero-copy{max-width:none}
}

/* ---------- time-in-industry strip ---------- */
.specs{display:grid;grid-template-columns:minmax(200px,1fr) 3fr minmax(170px,.9fr) minmax(170px,.9fr);border-bottom:1px solid var(--line)}
.specs .sd{padding:22px var(--gut) 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.specs .sd.main{border-left:0}
.specs .v{font:600 clamp(30px,3.4vw,44px)/1 var(--disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.specs .k{font:12px/1.45 var(--mono);color:var(--muted);letter-spacing:.03em}
.tl{border-left:1px solid var(--line);padding:18px 28px 16px}
.axis{position:relative;padding-top:18px}
.yr{position:absolute;top:0;font:10.5px var(--mono);letter-spacing:.1em;color:var(--muted);padding-left:5px;border-left:1px solid var(--line-2);height:calc(100% + 4px)}
.lane{position:relative;height:46px;margin-top:6px}
.bar{position:absolute;top:0;height:12px;background:var(--text);color:var(--text);text-decoration:none;min-width:6px;transition:background .15s}
.bar:hover{background:var(--live)}
.bar .bl{position:absolute;left:0;top:18px;font:600 15px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.bar .bm{position:absolute;left:0;top:34px;font:10px/1 var(--mono);color:var(--muted);white-space:nowrap}
.trk{position:relative;height:18px;margin-top:6px}
.trk .tl{position:absolute;left:0;top:0;border:0;padding:0;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);z-index:var(--z-raise);background:var(--void);padding-right:6px}
.trk .line{position:absolute;top:8px;height:2px;background:var(--muted)}
.trk:first-of-type .line{background:var(--live)}
.now{position:absolute;top:14px;bottom:-4px;border-left:1px dashed var(--live)}
.now i{position:absolute;top:-16px;left:-14px;font:normal 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--live)}
.tl-legend{display:none}
@media (max-width:1100px){.specs{grid-template-columns:1fr 1fr}.specs .tl{grid-column:1/-1;order:3;border-left:0;border-top:1px solid var(--line)}.specs .sd:nth-child(3){border-left:0;border-top:1px solid var(--line);order:4}.specs .sd:nth-child(4){border-top:1px solid var(--line);order:5}.specs .sd.main{grid-column:1/-1}}
@media (max-width:600px){.bar .bl,.bar .bm{display:none}.tl{padding:16px var(--gut)}.tl-legend{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:10px 0 0;padding:0;font:11px var(--mono);color:var(--muted)}.tl-legend b{color:var(--text);font-weight:500}}

/* ---------- sections ---------- */
section.sec{padding-block:clamp(72px,9vw,128px);border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:48px;max-width:980px}
.sec-head h2{font-size:clamp(40px,6vw,80px)}
.sec-head .lede{margin-top:18px}

/* loop diagram */
.loop{border:1px solid var(--line);background:var(--panel)}
.loop svg{width:100%;height:auto;display:block}
.loop-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.loop-steps>div{padding:20px 22px 24px;border-left:1px solid var(--line)}
.loop-steps>div:first-child{border-left:0}
.loop-steps h3{font:600 26px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin:6px 0 10px}
.loop-steps p{font-size:14.5px;color:var(--text-2)}
.loop-steps>div{display:flex;flex-direction:column}
.proof{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:5px}
.proof .label{font-size:10px;color:var(--muted)}
.proof a{font:12px var(--mono);letter-spacing:.04em;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-2);width:fit-content;padding-bottom:1px}
.proof a:hover{border-color:var(--text)}
@media (max-width:860px){.loop-steps{grid-template-columns:1fr 1fr}.loop-steps>div:nth-child(3){border-left:0}.loop-steps>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.loop-steps{grid-template-columns:1fr}.loop-steps>div{border-left:0;border-top:1px solid var(--line)}.loop-steps>div:first-child{border-top:0}}

/* professional record */
.record{margin-top:56px;border-top:1px solid var(--line)}
.role{padding:40px 0 44px;border-bottom:1px solid var(--line);scroll-margin-top:72px}
.role-top{display:grid;grid-template-columns:minmax(230px,1fr) 2.6fr;gap:32px}
.role h3{font:600 clamp(32px,3.4vw,44px)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.role .meta{display:flex;flex-direction:column;gap:6px}
.role .meta .t{color:var(--text-2);font-size:15px}
.rid{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:6px}
.glyph{width:44px;height:44px;color:var(--text-2)}
.role .stages{margin-top:10px}
.role ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.role li{position:relative;padding-left:18px;font-size:15.5px;color:var(--text-2)}
.role li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--muted)}
.role li b{color:var(--text);font-weight:600}
.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:22px;border:1px solid var(--line);background:var(--panel)}
.readouts>div{padding:12px 14px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.readouts>div:first-child{border-left:0}
.readouts .v{font:600 26px/1 var(--disp);letter-spacing:.03em;color:var(--text)}
.readouts .k{font:10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stages{display:flex;flex-wrap:wrap;gap:6px}
.stg{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line-2);color:var(--muted)}
.stg.on{color:var(--text);border-color:var(--text-2)}
.gallery{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,230px)}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--panel);cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font:10.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--void) 85%,transparent))}
.gallery.g2{grid-template-columns:2fr 1fr}
.gallery.g4{grid-template-columns:2fr 1fr 1fr 1fr}
.gallery.g6{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.role-top{grid-template-columns:1fr;gap:20px}.gallery,.gallery.g4,.gallery.g6{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(150px,38vw,260px)}.gallery.g2{grid-template-columns:1fr 1fr}}

/* project cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--void);text-decoration:none;display:flex;flex-direction:column;min-width:0;transition:background .2s}
.card:hover{background:var(--panel)}
.card .img{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--panel)}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .img img{transform:scale(1.03)}
.card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font:600 32px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.card p{color:var(--text-2);font-size:15px}
.card .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:10px}
.card .go{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font:11px var(--mono);letter-spacing:.06em;color:var(--muted);border:1px solid var(--line-2);padding:3px 8px}
.card.feature{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}
.card.feature .img{aspect-ratio:auto;min-height:380px;position:relative;border-bottom:0;border-right:1px solid var(--line)}
.card.feature .img img{position:absolute;inset:0}
.card.feature h3{font-size:40px}
@media (max-width:760px){.cards{grid-template-columns:1fr}.card.feature{display:flex}.card.feature .img{aspect-ratio:16/10;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.card.feature .img img{position:static}}

.status{display:inline-flex;align-items:center;gap:8px;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--done)}
.status.live{color:var(--live)}
.status.live::before{background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 15%,transparent)}

/* capability */
.badges{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:28px}
.badge{background:var(--void);padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.badge .bx{font:600 22px/1 var(--disp);letter-spacing:.08em;border:1px solid var(--text-2);padding:8px 10px;min-width:54px;text-align:center;position:relative}
.badge .bx::after{content:"";position:absolute;inset:3px;border:1px solid var(--line-2)}
.badge .bt{font:600 17px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.badge .bs{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.badges{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.badges{grid-template-columns:repeat(2,1fr)}}
.cap{border-top:1px solid var(--line)}
.cap>div{display:grid;grid-template-columns:220px 1fr 180px;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.cap .k{font:600 20px var(--disp);letter-spacing:.08em;text-transform:uppercase}
.cap .v{font:14px/1.7 var(--mono);color:var(--text-2)}
@media (max-width:760px){.cap>div{grid-template-columns:1fr;gap:8px}}

/* about */
.about{display:grid;grid-template-columns:minmax(200px,260px) 1fr;align-items:end;gap:clamp(28px,5vw,72px);align-items:start}
.about .portrait{margin:0;border:1px solid var(--line);overflow:hidden;aspect-ratio:4/5;background:var(--panel);cursor:zoom-in}
.about .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.about .copy{display:flex;flex-direction:column;gap:18px;max-width:64ch}
.about .copy p{color:var(--text-2);font-size:17.5px}
.about .copy p:first-child{color:var(--text)}
@media (max-width:760px){.about{grid-template-columns:1fr}.about .portrait{max-width:200px}}
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
@media (max-width:1000px){.stories{grid-template-columns:repeat(2,1fr)}}

/* overlays (lightbox + story). Plain fixed layers, no blur, so photos stay crisp */
.ov{position:fixed;inset:0;z-index:var(--z-overlay);background:rgb(var(--scrim-rgb) / .94);color:var(--text)}
.ov[hidden]{display:none}
.lb{z-index:var(--z-lightbox);display:grid;grid-template-columns:64px 1fr 64px;align-items:center}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;justify-content:center;padding:56px 0 24px;min-width:0}
.lb img,.lb video{max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain;filter:none;background:var(--void)}
.lb img[hidden],.lb video[hidden]{display:none}
.lb .nv{all:unset;cursor:pointer;font:40px/1 var(--disp);color:var(--text-2);text-align:center;height:100%;display:grid;place-items:center}
.lb .nv:hover{color:var(--text)}
.lb .nv[hidden]{visibility:hidden;display:grid}
.x{all:unset;position:fixed;top:14px;right:18px;z-index:var(--z-raise-3);cursor:pointer;font:30px/1 var(--mono);color:var(--text-2);width:40px;height:40px;display:grid;place-items:center;background:color-mix(in srgb,var(--void) 60%,transparent)}
.x:hover{color:var(--text)}
.story-ov{overflow:auto;padding:4vh 3vw}
.story{position:relative;width:min(1100px,100%);margin:0 auto;background:var(--void);border:1px solid var(--line-2)}
.story .x{position:sticky;float:right;top:8px;margin:8px 8px 0 0}
.story-in{padding:28px clamp(18px,3vw,36px) 32px}
.story-head{display:flex;flex-direction:column;gap:10px;max-width:62ch}
.story-head h3{font-size:clamp(38px,5vw,64px)}
.story-head p{color:var(--text-2);font-size:17px}
.story-head .btn{width:fit-content;margin-top:6px}
.story-g{grid-template-columns:repeat(3,1fr)!important;grid-auto-rows:clamp(160px,22vw,260px)}
.story-g figure:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:640px){.story-g{grid-template-columns:1fr 1fr!important}.lb{grid-template-columns:36px 1fr 36px}}
body.modal{overflow:hidden}
.figs figure,.case-img{cursor:zoom-in}

/* contact / footer */
.contact{padding-block:clamp(72px,10vw,140px) 40px}
.contact h2{font-size:clamp(48px,9vw,120px)}
.contact .rows{margin-top:40px;border-top:1px solid var(--line)}
.contact .rows>div{display:grid;grid-template-columns:200px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.contact .rows .v{font:16px var(--mono)}
.contact .rows a.v{display:inline-block;padding-block:5px;width:fit-content}
@media (max-width:620px){.contact .rows>div{grid-template-columns:1fr auto}.contact .rows .label{grid-column:1/-1}}
.copy-btn{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line-2);color:var(--text-2);padding:5px 10px;cursor:pointer}
.copy-btn:hover{color:var(--text);border-color:var(--text-2)}
footer.foot{padding-block:28px 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---------- case study view ---------- */
.case{padding-top:60px}
.case[hidden]{display:none}
.case-hero{position:relative;border-bottom:1px solid var(--line)}
.case-hero .wrap{padding-block:56px 40px}
.back{display:flex;width:fit-content;gap:8px;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:34px}
.back:hover{color:var(--text)}
.case-hero h1{font-size:clamp(46px,8vw,112px)}
.case-hero .lede{margin-top:20px}
.titleblock{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);margin-top:36px}
.titleblock>div{padding:12px 16px;border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:4px;min-width:0}
.titleblock>div:first-child{border-left:0}
.titleblock .v{font:13px/1.45 var(--mono);color:var(--text)}
@media (max-width:820px){.titleblock{grid-template-columns:1fr 1fr}.titleblock>div:nth-child(3){border-left:0}.titleblock>div:nth-child(n+3){border-top:1px solid var(--line-2)}}
.case-img{border-bottom:1px solid var(--line);background:var(--panel)}
.case-img img{width:100%;max-width:1100px;margin:0 auto;max-height:72vh;object-fit:cover}
.case-body{padding-block:56px 40px}
.block{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:36px 0;border-top:1px solid var(--line)}
.block:first-child{border-top:0;padding-top:0}
.block>.label{padding-top:6px}
.block .content{display:flex;flex-direction:column;gap:16px;max-width:760px}
.block .content p{color:var(--text-2);font-size:16.5px}
.block .content p b{color:var(--text);font-weight:600}
.block ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.block li{position:relative;padding-left:20px;color:var(--text-2)}
.block li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--muted)}
.block li b{color:var(--text);font-weight:600}
@media (max-width:760px){.block{grid-template-columns:1fr;gap:10px}}
.wide{max-width:none!important}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
pre.code{margin:16px 0 0;padding:14px 16px;background:var(--panel);border:1px solid var(--line);overflow-x:auto;font:12px/1.6 var(--mono);color:var(--text-2);white-space:pre}
pre.code:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.figs figure{margin:0;background:var(--panel);display:flex;flex-direction:column}
.figs img{width:100%;aspect-ratio:4/3;object-fit:cover}
.figs img.contain{aspect-ratio:auto;height:auto;object-fit:contain;background:none}
.figs figcaption{padding:10px 12px 12px;font:11px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line)}
.dtable{width:100%;border-collapse:collapse;font:13px/1.5 var(--mono)}
.dtable th,.dtable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable th{font-weight:500;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.dtable td{color:var(--text-2);font-variant-numeric:tabular-nums}
.dtable td.hi{color:var(--text)}
.tw{overflow-x:auto;border:1px solid var(--line)}
.tw .dtable{min-width:560px}
.diagram{border:1px solid var(--line);background:var(--panel);padding:18px}
.diagram svg{width:100%;height:auto;display:block}
.diagram .fig{margin-top:10px}
.note{border-left:2px solid var(--live);padding:4px 0 4px 14px;font-size:14px;color:var(--text-2)}
.viewer{position:relative;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 40%,var(--steel-3) 0%,var(--steel-0) 70%);aspect-ratio:16/10}
.viewer canvas{width:100%!important;height:100%!important;display:block;cursor:grab}
.viewer .hud{position:absolute;left:12px;top:10px;right:12px;display:flex;justify-content:space-between;pointer-events:none}
.viewer .views{position:absolute;left:12px;bottom:12px;display:flex;gap:6px}
.viewer .views button{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--void) 70%,transparent);color:var(--text-2);border:1px solid var(--line-2);padding:5px 9px;cursor:pointer}
.viewer .views button:hover{color:var(--text)}
.viewer .fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font:12px var(--mono)}
.viewer .viewer-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer .viewer-note{position:absolute;right:12px;bottom:12px;margin:0;font:11px var(--mono);color:var(--muted)}
.viewer .views button:disabled{opacity:.35;cursor:default}
.next{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.next a{padding:28px var(--gut);text-decoration:none;display:flex;flex-direction:column;gap:6px}
.next a+a{border-left:1px solid var(--line);text-align:right}
.next a:hover{background:var(--panel)}
.next .t{font:600 28px var(--disp);letter-spacing:.04em;text-transform:uppercase}

.invert{filter:invert(1) hue-rotate(180deg) contrast(.92) brightness(.95)}
.case-img img.invert{object-fit:contain;max-height:70vh;background:var(--paper);padding:24px}
.case-img:has(img.invert){background:var(--void)}
.block .content p.fig,.diagram p.fig{font:11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* video clips */
figure.vid{position:relative;cursor:zoom-in}
figure.vid video{width:100%;height:100%;object-fit:cover;display:block;background:var(--void)}
.figs figure.vid video{aspect-ratio:4/3}
figure.vid .play{position:absolute;top:10px;left:10px;z-index:var(--z-raise);font:10px var(--mono);letter-spacing:.1em;color:var(--text);background:color-mix(in srgb,var(--void) 60%,transparent);border:1px solid color-mix(in srgb,var(--text) 40%,transparent);padding:3px 7px}
figure.vid .play::after{content:" CLIP"}
.lb video{max-width:100%;max-height:calc(100dvh - 120px);background:var(--void)}
.route-box{margin:22px 0 4px;border:1px solid var(--line);background:var(--panel);padding:12px 16px}
.route{width:100%;max-width:720px;height:auto;display:block;margin:0 auto}
.story-g figure:only-child{grid-column:1/-1!important;grid-row:span 2}

/* chronological About timeline */
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px}
.legend .k{display:inline-flex;align-items:center;gap:8px;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.legend .k::before{content:"";width:9px;height:9px;border:1px solid var(--text-2);box-sizing:border-box}
.chrono{list-style:none;margin:56px 0 0;padding:0;position:relative}
.chrono::before{content:"";position:absolute;left:160px;top:30px;bottom:24px;width:1px;background:var(--line-2)}
.yr-row{padding:22px 0 6px 176px}
.yr-row:first-child{padding-top:0}
.yr-big{font:600 clamp(44px,5vw,68px)/1 var(--disp);letter-spacing:.04em;color:var(--dim)}
.ev{display:grid;grid-template-columns:128px 32px 1fr;gap:0 16px;align-items:start;padding:7px 0}
.ev-when{font:12px var(--mono);letter-spacing:.06em;color:var(--muted);text-align:right;padding-top:20px;white-space:nowrap}
.ev-dot,.legend .k::before{border-radius:50%}
.ev-dot{width:11px;height:11px;margin:22px auto 0;border:1px solid var(--text-2);background:var(--void);position:relative;z-index:var(--z-raise);box-sizing:border-box}
.k-work .ev-dot,.legend .k-work::before,.k-research .ev-dot,.legend .k-research::before{background:var(--text);border-color:var(--text)}
.k-project .ev-dot,.legend .k-project::before{border-radius:0}
.k-leadership .ev-dot,.legend .k-leadership::before{border-radius:0;transform:rotate(45deg)}
.k-school .ev-dot,.legend .k-school::before{border-radius:0;background:var(--text-2)}
.ev-card{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;border:1px solid var(--line);padding:12px;min-width:0;transition:border-color .15s,background .15s}
button.ev-card,a.ev-card{cursor:pointer}
button.ev-card:hover,a.ev-card:hover,button.ev-card:focus-visible,a.ev-card:focus-visible{border-color:var(--text-2);background:var(--panel)}
div.ev-card{grid-template-columns:1fr;border-style:dashed}
.ev-th{display:flex;gap:4px}
.ev-th img{width:112px;height:84px;object-fit:cover;display:block;filter:saturate(.9)}
.ev-card:hover .ev-th img{filter:saturate(1)}
.ev-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-kind{font-size:10px}
.ev-t{font:600 clamp(21px,2vw,26px)/1.05 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.ev-p{font-size:15px;line-height:1.5;color:var(--text-2);max-width:70ch}
.ev-go{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-top:4px}
@media (max-width:760px){
  .chrono::before{left:9px}
  .yr-row{padding-left:34px}
  .ev{grid-template-columns:20px 1fr;gap:4px 14px}
  .ev-dot{grid-column:1;grid-row:1 / span 2;margin-top:4px}
  .ev-when{grid-column:2;grid-row:1;text-align:left;padding-top:0}
  .ev-card{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:12px}
  .ev-th img{width:calc(50% - 2px);height:auto;aspect-ratio:4/3;flex:1}
  .ev-th.n1 img{width:100%;aspect-ratio:16/9}
}
blockquote.pull{margin:0;border-left:2px solid var(--live);padding:6px 0 6px 20px}
blockquote.pull p{font:400 clamp(18px,1.8vw,21px)/1.55 var(--sans)!important;color:var(--text)!important}

/* v3: role stories, surge block, glyphs everywhere, timeline project marks, map */
.story-txt{display:flex;flex-direction:column;gap:12px;max-width:74ch}
.story-txt p{font-size:16px;line-height:1.65;color:var(--text-2)}
.story-txt p:first-child{color:var(--text)}
.surge{display:grid;grid-template-columns:minmax(230px,1fr) 2.6fr;gap:32px;margin-top:26px;padding-top:24px;border-top:1px dashed var(--line-2)}
.surge-txt{display:flex;flex-direction:column;gap:8px}
.surge-txt h4{font:600 26px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
.surge-txt p{font-size:15px;color:var(--text-2)}
.surge-g{margin-top:0;grid-auto-rows:clamp(150px,15vw,210px)}
@media (max-width:900px){.surge{grid-template-columns:1fr;gap:14px}}
.gallery.r-firehawk{grid-template-columns:1.6fr 1fr;grid-auto-rows:clamp(220px,26vw,360px)}
@media (max-width:900px){.gallery.r-firehawk{grid-template-columns:1fr}}
.card .body{position:relative}
.card .body>.label,.card .body>.status{padding-right:52px}
blockquote.ex{margin:12px 0 0;padding:8px 0 8px 12px;border-left:2px solid var(--line-2);font-size:13.5px;line-height:1.5;color:var(--text)}
.marks{position:relative;height:30px;margin-top:6px}
.marks .mk-l{position:absolute;left:0;top:4px;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--void);padding-right:6px;z-index:var(--z-raise);border:0}
.pmk{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--text-2)}
.pmk i{width:9px;height:9px;border:1px solid var(--text-2);transform:rotate(45deg);background:var(--void);margin-top:4px}
.pmk span{font:10px var(--mono);letter-spacing:.06em;white-space:nowrap}
.pmk{min-width:28px;z-index:var(--z-raise-2)}   /* tap target: the diamond alone is ~20px wide; sit above the NOW marker */
.pmk.lo{z-index:var(--z-raise)}   /* the wide lower-label marker yields its edge to its narrow neighbor */
.pmk:hover{color:var(--live)}.pmk:hover i{border-color:var(--live);background:var(--live)}
@media (max-width:600px){.pmk span{display:none}}
.route .stop{cursor:pointer}
.route .stop:hover circle,.route .stop:focus circle{fill:var(--live)}
.route .stop:hover text{fill:var(--live)}
.route .pulse{animation:pulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
.route-box{padding:12px 16px 10px}
.route{max-width:760px}
.badges{grid-template-columns:repeat(4,1fr)}
.k-in-progress .ev-dot,.legend .k-in-progress::before{background:var(--live);border-color:var(--live)}
.k-in-progress .ev-kind{color:var(--live)}
.gallery.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.gallery.g3{grid-template-columns:1fr 1fr}.gallery.g3>*:last-child{grid-column:1/-1}}   /* three across on a phone left captions five lines deep */

/* SpaceX: what I owned + lessons */
.owned{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.owned-l{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.owned-l li{background:var(--void);padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.on-t{font:600 19px/1.05 var(--disp);letter-spacing:.05em;text-transform:uppercase}
.on-p{font-size:14px;line-height:1.5;color:var(--text-2)}
.lessons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.lessons>div{border-left:2px solid var(--live);padding:2px 0 2px 12px;display:flex;flex-direction:column;gap:3px}
.ls-t{font:600 16px var(--disp);letter-spacing:.06em;text-transform:uppercase}
.ls-p{font-size:13.5px;line-height:1.45;color:var(--text-2)}
@media (max-width:1000px){.owned-l{grid-template-columns:1fr 1fr}.lessons{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.owned-l,.lessons{grid-template-columns:1fr}}
.role .owned-l li{padding:14px 16px 16px;font-size:inherit}.role .owned-l li::before{display:none}

/* ---------- round 5 (2026-09-25) ---------- */
.story-txt p,.story-txt p:first-child{color:var(--text)}
.specs .sd.main .v small{font:500 .38em var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);vertical-align:middle;margin-left:4px}
.marks{height:46px}
.pmk.lo span{margin-top:14px}
.cap>div{grid-template-columns:240px 1fr}
.badges{grid-template-columns:repeat(3,1fr);max-width:720px}
.owned-l{grid-template-columns:repeat(4,1fr)}
.owned-l li{padding:12px 14px 14px}
.role .owned-l li{padding:12px 14px 14px}
@media (max-width:1100px){.owned-l{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.owned-l{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.owned-l{grid-template-columns:1fr}.cap>div{grid-template-columns:1fr}}
.story-head{max-width:70ch}
.story-head p+p{margin-top:2px}
.role-body a,.story-txt a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
/* KXR page: three team sections */
.case-body .block .content.wide .kxr-sec{padding-top:10px}
.kxr-sec h2{font-size:clamp(34px,4.6vw,56px);margin-top:6px}
.kxr-sec .lede{margin-top:10px;max-width:70ch}
/* KXR team cards (Lockheed review, 2026-10-10): jump to each team's section */
.kxr-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.kxr-nav a{background:var(--void);display:flex;flex-direction:column;gap:6px;padding:16px 18px;text-decoration:none;transition:background .2s}
.kxr-nav b{font:600 22px/1.1 var(--disp)}
.kxr-nav .go{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--live)}
.kxr-nav a:hover{background:var(--panel-2)}
.kxr-sec{scroll-margin-top:96px}
@media (max-width:760px){.kxr-nav{grid-template-columns:1fr}}
.kxr-sec{scroll-margin-top:84px}

/* ---------- Off the clock: book shelf (draft) ---------- */
.shelf-wrap{position:relative;margin-top:72px;padding:40px clamp(18px,4vw,44px) 36px;border:1px solid var(--line);background:radial-gradient(120% 90% at 80% 0%,var(--steel-1) 0%,var(--void) 60%);overflow:hidden;isolation:isolate}
.shelf-wrap .stars{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-behind);opacity:.9}
.shelf-head{max-width:60ch;display:flex;flex-direction:column;gap:8px}
.shelf-head h3{font-size:clamp(34px,4.4vw,54px)}
.shelf-head p{color:var(--text-2)}
.shelf-body{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:end;margin-top:30px}
.shelf{position:relative;display:flex;align-items:flex-end;gap:6px;padding:0 10px 10px;min-height:270px}
.plank{position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(var(--steel-5),var(--steel-2));border-top:1px solid var(--line-2)}
.book{--tone:var(--spine-muted);position:relative;width:54px;height:var(--h);border:0;padding:14px 0;cursor:pointer;
  background:linear-gradient(90deg,rgb(var(--shade-rgb) / .35),rgb(var(--glint-rgb) / .07) 30%,rgb(var(--shade-rgb) / 0) 55%,rgb(var(--shade-rgb) / .4)),var(--tone);
  color:var(--spine-ink);display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  box-shadow:inset 0 0 0 1px rgb(var(--glint-rgb) / .08),0 6px 18px rgb(var(--shade-rgb) / .5);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .3s}
.book::before,.book::after{content:"";position:absolute;left:6px;right:6px;height:1px;background:rgb(var(--shade-rgb) / .35)}
.book::before{top:8px}.book::after{bottom:8px}
.book .spine-t{writing-mode:vertical-rl;transform:rotate(180deg);font:600 17px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase}
.book .spine-a{writing-mode:vertical-rl;transform:rotate(180deg);font:10px var(--mono);letter-spacing:.06em;opacity:.8}
.book:hover{transform:translateY(-6px)}
.book.on{transform:translateY(-22px) rotate(-2deg);filter:brightness(1.12)}
.book:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.book-cards{min-height:150px;position:relative}
.book-card{max-width:52ch;display:flex;flex-direction:column;gap:8px}
.book-card h4{font:600 clamp(28px,3.4vw,40px)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.book-card p{color:var(--text-2);font-size:16px;line-height:1.6}
html.anim .book-card:not([hidden]){animation:cardIn .5s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){.shelf-body{grid-template-columns:1fr}.shelf{justify-content:center;min-height:250px}.book{width:46px}}

/* ---------- scroll animations (only when JS adds html.anim; reduced motion never gets them) ---------- */
html.anim .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 70ms)}
html.anim .rv.in{opacity:1;transform:none}
html.anim .ev.rv{transition-delay:0s;transition-duration:.45s,.5s}   /* list entries arrive one at a time as you scroll: no group stagger */
html.anim .ev.rv .ev-dot{transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) .05s}
html.anim .ev.rv.k-leadership .ev-dot{transform:scale(0) rotate(45deg)}
html.anim .ev.rv.in .ev-dot{transform:scale(1)}
html.anim .ev.rv.in.k-leadership .ev-dot{transform:scale(1) rotate(45deg)}
html.anim .chrono::after{content:"";position:absolute;left:160px;top:30px;bottom:24px;width:1px;background:var(--text);transform-origin:top;transform:scaleY(var(--draw,0));opacity:.85}
@media (max-width:760px){html.anim .chrono::after{left:9px}}
html.anim .draw [data-dl]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--d,0) * 40ms)}
html.anim .draw.in [data-dl]{stroke-dashoffset:0}
html.anim .draw text{opacity:0;transition:opacity .8s ease .6s}
html.anim .draw.in text{opacity:1}
@media (min-width:761px){html.anim .hero-photo{overflow:hidden}html.anim .hero-photo img{transform:scale(1.08)}}
/* scroll-driven (no JS scroll listener): the hero photo drifts at ~0.18x the scroll for the first 120vh, and the timeline
   rail draws from when its top passes 70% of the screen until its bottom does. Unsupported browsers: still photo, full rail. */
@supports (animation-timeline: scroll()) {
  @media (min-width:761px){html.anim .hero-photo img{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 120vh}}
  @keyframes hero-drift{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(0,21.6vh,0) scale(1.08)}}
  html.anim .chrono{view-timeline-name:--chrono}
  html.anim .chrono::after{animation:rail-draw linear both;animation-timeline:--chrono;animation-range:cover 30vh cover calc(100% - 70vh)}
  @keyframes rail-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
html.anim .hero-copy>*{animation:heroIn .9s cubic-bezier(.2,.8,.2,1) both}
html.anim .hero-copy>*:nth-child(2){animation-delay:.12s}html.anim .hero-copy>*:nth-child(3){animation-delay:.24s}
html.anim .hero-copy>*:nth-child(4){animation-delay:.36s}html.anim .hero-copy>*:nth-child(5){animation-delay:.48s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.anim .route .stop,html.anim .route>circle,html.anim .route>text{opacity:0;transition:opacity .45s ease;transition-delay:calc(var(--d,0) * 160ms)}
html.anim .route.go .stop,html.anim .route.go>circle,html.anim .route.go>text{opacity:1}
html.anim .route .trip{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.2s ease .2s}
html.anim .route.go .trip{stroke-dashoffset:0}
.book-card[hidden]{display:none}

/* ---------- round 7: drawings, aside, story lead, animated icons, richer book pull ---------- */
.aside{margin-top:26px}
.aside .surge-g{grid-template-columns:1fr}
.drawings{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.drawings>p{max-width:72ch;color:var(--text-2);margin:8px 0 18px}
.drawings a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.dwg-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.plate-dwg{margin:0;display:grid;grid-template-columns:minmax(0,2.4fr) minmax(220px,1fr);background:var(--void);
  background-image:linear-gradient(rgb(var(--glint-rgb) / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--glint-rgb) / .035) 1px,transparent 1px);background-size:24px 24px}
.plate-dwg .dwg{position:relative;padding:22px 26px;display:grid;place-items:center;overflow:hidden;cursor:zoom-in}
.plate-dwg img{width:100%;max-height:230px;object-fit:contain}
.plate-dwg figcaption{padding:18px 20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.plate-dwg figcaption b{font:600 22px/1.05 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.plate-dwg figcaption span:last-child{font-size:14px;line-height:1.55;color:var(--text-2)}
@media (max-width:760px){.plate-dwg{grid-template-columns:1fr}.plate-dwg figcaption{border-left:0;border-top:1px solid var(--line)}}
html.anim .plate-dwg img{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.5,0,.2,1) .15s}
html.anim .plate-dwg.in img{clip-path:inset(0 0 0 0)}
html.anim .plate-dwg .scan{position:absolute;top:10%;bottom:10%;left:0;width:2px;background:var(--live);box-shadow:0 0 14px var(--live);opacity:0}
html.anim .plate-dwg.in .scan{animation:scanX 1.8s cubic-bezier(.5,0,.2,1) .15s both}
@keyframes scanX{0%{left:3%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:97%;opacity:0}}
.story-lead{margin:18px 0 6px;display:block}
.story-lead figure{margin:0}
.story-lead video,.story-lead img{width:100%;max-height:62vh;object-fit:cover;display:block}

/* role icons: draw in, then keep a quiet idle motion */
.glyph .g-spin{transform-origin:24px 24px;transform-box:view-box;animation:gspin 7s linear infinite}
.glyph .g-blink{animation:gblink 2.4s ease-in-out infinite}
.glyph .g-flow{stroke-dasharray:3 3;animation:gflow .6s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
@keyframes gblink{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes gflow{to{stroke-dashoffset:-6}}
@keyframes gdrop{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(5px);opacity:0}}
.role:hover .glyph .g-spin{animation-duration:1.4s}
html.anim .rid.draw .glyph [data-dl]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--d,0) * 60ms)}
html.anim .rid.draw.in .glyph [data-dl]{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.glyph .g-spin,.glyph .g-blink,.glyph .g-flow{animation:none}}

/* books: pulled out, spun to the cover, text follows */
.book-card{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start;max-width:none}
.bc-txt{display:flex;flex-direction:column;gap:8px;max-width:52ch}
.cover{--tone:var(--spine-muted);position:relative;width:132px;aspect-ratio:2/3;background:linear-gradient(135deg,rgb(var(--glint-rgb) / .14),rgb(var(--shade-rgb) / .25)),var(--tone);
  color:var(--spine-ink);padding:14px 12px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  box-shadow:0 18px 40px rgb(var(--shade-rgb) / .55),inset 6px 0 0 rgb(var(--shade-rgb) / .22)}
.cover .c-t{font:600 20px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.cover .c-a{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.cover .shine{position:absolute;inset:-40% auto -40% -60%;width:40%;background:linear-gradient(90deg,transparent,rgb(var(--glint-rgb) / .45),transparent);transform:skewX(-18deg)}
.book-cards{perspective:900px}
@media (max-width:520px){.book-card{grid-template-columns:96px 1fr;gap:16px}.cover{width:96px}.cover .c-t{font-size:15px}}
html.anim .book.pull{animation:pull .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes pull{0%{transform:none}45%{transform:translateY(-58px) rotate(-7deg)}100%{transform:translateY(-22px) rotate(-2deg)}}
html.anim .book.nudge{animation:nudge .6s ease both}
@keyframes nudge{0%,100%{transform:none}40%{transform:rotate(calc(var(--dir,1) * 3deg))}}
html.anim .book-card:not([hidden]){animation:none}
html.anim .book-card:not([hidden]) .cover{animation:coverIn .8s cubic-bezier(.2,.8,.2,1) .1s both;transform-origin:left center}
html.anim .book-card:not([hidden]) .shine{animation:shine 1.1s ease .7s both}
html.anim .book-card:not([hidden]) .bc-txt>*{animation:cardIn .55s ease both}
html.anim .book-card:not([hidden]) .bc-txt>*:nth-child(1){animation-delay:.35s}
html.anim .book-card:not([hidden]) .bc-txt>*:nth-child(2){animation-delay:.45s}
html.anim .book-card:not([hidden]) .bc-txt>*:nth-child(3){animation-delay:.58s}
@keyframes coverIn{0%{opacity:0;transform:rotateY(-95deg) translateX(-30px)}60%{opacity:1}100%{transform:none}}
@keyframes shine{from{left:-60%}to{left:130%}}
.aside.solo{grid-template-columns:1fr}.aside.solo .surge-txt{max-width:72ch}

/* ---------- round 8: richer icons, timeline sweep, compact owned{animation:liftoff 6s cubic-bezier(.5,0,.8,.6) infinite}
.glyph .g-arms{animation:arms 6s ease infinite;transform-box:view-box;transform-origin:15px 18px}
@keyframes liftoff{0%,38%{transform:none;opacity:1}78%{transform:translateY(-34px);opacity:1}84%{transform:translateY(-40px);opacity:0}85%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}
@keyframes flame{0%,30%{opacity:0;transform:scaleY(.3)}34%{opacity:1;transform:scaleY(.8)}40%,76%{opacity:1;transform:scaleY(1.25)}82%,100%{opacity:0}}
@keyframes arms{0%,28%{transform:none}36%,90%{transform:rotate(-24deg)}100%{transform:none}}
.glyph .g-plume{transform-box:fill-box;transform-origin:0 50%;animation:plume .35s ease-in-out infinite alternate}
@keyframes plume{from{transform:scaleX(.82);opacity:.75}to{transform:scaleX(1.08);opacity:1}}
.glyph .g-trace{stroke-dasharray:14;animation:trace 1.6s linear infinite}
@keyframes trace{from{stroke-dashoffset:14}to{stroke-dashoffset:-14}}
.glyph .g-roll{transform-box:view-box;animation:gspin 1.4s linear infinite}
.glyph .g-belt{stroke-dasharray:2.5 2.5;animation:belt .5s linear infinite}
@keyframes belt{to{stroke-dashoffset:-5}}
@keyframes grain{0%{transform:translate(0,0);opacity:0}6%{opacity:1}26%{transform:translate(0,11px)}90%{opacity:1;transform:translate(26px,11px)}100%{transform:translate(30px,11px);opacity:0}}
.glyph .g-finl{transform-box:view-box;transform-origin:20px 29px;animation:finl 2.2s ease-in-out infinite}
.glyph .g-finr{transform-box:view-box;transform-origin:28px 29px;animation:finr 2.2s ease-in-out infinite}
@keyframes finl{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes finr{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}}
.glyph .g-arc{stroke-dasharray:3 3;animation:belt .8s linear infinite}
@media (prefers-reduced-motion:reduce){.glyph *{animation:none!important}}

/* time-in-industry strip sweeps left to right, NOW rides to the present */
html.anim .tl-strip .bar{transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 110ms + 60ms)}
html.anim .tl-strip.in .bar{transform:none}
html.anim .tl-strip .trk .line{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.4,0,.2,1) .15s}
html.anim .tl-strip.in .trk .line{clip-path:inset(0 0 0 0)}
html.anim .tl-strip .pmk{opacity:0;transform:translateX(-50%) scale(.4);transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d,0) * 70ms + 250ms)}
html.anim .tl-strip.in .pmk{opacity:1;transform:translateX(-50%)}
html.anim .tl-strip:not(.in) .now{left:0!important;opacity:0}
html.anim .tl-strip .now{transition:left 1.3s cubic-bezier(.4,0,.2,1) .05s,opacity .3s ease .05s}

/* compact "what I owned" */
.owned-l li{padding:10px 12px;flex-direction:row;align-items:baseline;gap:10px}
.role .owned-l li{padding:10px 12px}
.owned-l .on-t{font-size:14px}

/* books: straight up and forward, no tilt */
html.anim .book.pull{animation:pullUp .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pullUp{0%{transform:none}55%{transform:translateY(-44px) scale(1.08)}100%{transform:translateY(-26px) scale(1.05)}}
.book.on{transform:translateY(-26px) scale(1.05);box-shadow:inset 0 0 0 1px rgb(var(--glint-rgb) / .2),0 0 0 1px rgb(var(--glint-rgb) / .25),0 18px 40px rgb(var(--shade-rgb) / .6),0 0 34px color-mix(in srgb,var(--tone) 45%,transparent);z-index:var(--z-raise-2)}
.shelf:has(.book.on) .book:not(.on){filter:brightness(.6) saturate(.8)}
html.anim .book.nudge{animation:none}
html.anim .book-card:not([hidden]) .cover{animation:coverFwd .7s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes coverFwd{0%{opacity:0;transform:translateY(24px) scale(.82)}100%{opacity:1;transform:none}}

/* ---------- round 9: full-stack Starship icon ---------- */
.glyph .g-stack{animation:stack 7s cubic-bezier(.55,0,.85,.55) infinite}
.glyph .g-arms{transform-box:view-box;transform-origin:13px 12.5px;animation:arms2 7s ease infinite}
.glyph .g-plume2{opacity:0;transform-box:fill-box;transform-origin:50% 0;animation:plume2on 7s linear infinite}
.glyph .g-plume2 .p-out{fill:var(--live);opacity:.55;transform-box:fill-box;transform-origin:50% 0;animation:flick .12s steps(2) infinite alternate}
.glyph .g-plume2 .p-in{fill:var(--flame-2);opacity:.95;transform-box:fill-box;transform-origin:50% 0;animation:flick .09s steps(2) infinite alternate-reverse}
.glyph .g-plume2 .p-dia{fill:var(--paper)}
.glyph .g-smoke circle{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:smoke 7s ease-out infinite}
.glyph .g-smoke circle:nth-child(2n){animation-delay:.15s}
@keyframes stack{0%,40%{transform:none;opacity:1}80%{transform:translateY(-52px);opacity:1}82%{opacity:0}83%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}
@keyframes arms2{0%,18%{transform:none}28%,88%{transform:rotate(-38deg)}100%{transform:none}}
@keyframes plume2on{0%,31%{opacity:0;transform:scaleY(.2)}35%{opacity:1;transform:scaleY(.7)}41%,78%{opacity:1;transform:scaleY(1)}82%,100%{opacity:0}}
@keyframes flick{from{transform:scaleY(.88) scaleX(.95)}to{transform:scaleY(1.08) scaleX(1.03)}}
@keyframes smoke{0%,32%{opacity:0;transform:scale(.4)}38%{opacity:.5}62%{opacity:.25;transform:scale(2.4)}75%,100%{opacity:0;transform:scale(2.8)}}

/* round 10: strip bordered by 20 mo and 500+, wider timeline */
.specs{grid-template-columns:minmax(190px,.75fr) 4.2fr minmax(190px,.75fr)}
.specs .sd{justify-content:center}
.specs .sd:last-child{text-align:right;align-items:flex-end}
.tl{padding:28px clamp(32px,4vw,64px) 26px;border-right:0}
.tl .axis{padding-top:22px}
.tl .lane{height:52px;margin-top:10px}
.tl .trk{margin-top:9px}
.tl .marks{margin-top:10px}
@media (max-width:1100px){
  .specs{grid-template-columns:1fr 1fr}
  .specs .sd.main{grid-column:auto;order:1}
  .specs .sd:last-child{order:2;border-left:1px solid var(--line);border-top:0}
  .specs .tl{grid-column:1/-1;order:3;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:600px){.tl{padding:18px var(--gut)}}
.specs{grid-template-columns:minmax(230px,.85fr) 4fr minmax(230px,.85fr)}
.specs .sd .v{white-space:nowrap}
@media (max-width:1100px){.specs{grid-template-columns:1fr 1fr}}
.specs .sd.main .v small{display:block;margin:10px 0 0;font-size:12px;letter-spacing:.16em}
/* round 11: defined Starship plume */
.glyph .g-plume2 .p-out{opacity:.45}
.glyph .g-plume2 .p-mid{fill:var(--live);opacity:.9;transform-box:fill-box;transform-origin:50% 0;animation:flick .1s steps(2) infinite alternate}
.glyph .g-plume2 .p-in{fill:var(--flame-1);opacity:1}
/* round 12: page-wide starfield */
html{background:var(--void)}
body{background:transparent}
.sky{position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:var(--z-behind);pointer-events:none}
@media print{.sky{display:none}}
.case-body .block>*{min-width:0}.case-body .block .content{min-width:0;max-width:100%}
/* round 13: reading lamp over the shelf */
.shelf{isolation:isolate}
.lamp{position:absolute;left:50%;top:-58px;width:0;height:0;z-index:var(--z-raise-3);pointer-events:none;transform-origin:0 -600px;animation:sway 7s ease-in-out infinite alternate}
.lamp .cord{position:absolute;left:-.5px;bottom:0;width:1px;height:640px;background:linear-gradient(transparent,var(--steel-7) 40%,var(--steel-9))}
.lamp .shade{position:absolute;left:-26px;top:0;width:52px;height:22px;background:linear-gradient(var(--steel-6),var(--steel-4));clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);border-radius:2px}
.lamp .bulb{position:absolute;left:-9px;top:18px;width:18px;height:9px;border-radius:0 0 9px 9px;background:var(--bulb);box-shadow:0 0 14px 4px rgb(var(--lamp-rgb) / .55),0 0 46px 14px color-mix(in srgb,var(--live) 28%,transparent);opacity:0;transition:opacity .2s}
.lamp .cone{position:absolute;left:-190px;top:22px;width:380px;height:330px;
  background:linear-gradient(rgb(var(--lamp-rgb) / .30),rgb(var(--lamp-rgb) / .12) 55%,color-mix(in srgb,var(--live) 0%,transparent));
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);filter:blur(6px);mix-blend-mode:screen;opacity:0;transition:opacity .2s}
.pool{position:absolute;left:50%;bottom:-6px;width:min(460px,120%);height:70px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgb(var(--lamp-rgb) / .34),color-mix(in srgb,var(--live) 10%,transparent) 60%,transparent);filter:blur(4px);z-index:var(--z-raise);pointer-events:none;opacity:0;transition:opacity .2s}
.shelf-wrap.lit .lamp .bulb,.shelf-wrap.lit .lamp .cone,.shelf-wrap.lit .pool{opacity:1}
html.anim .shelf-wrap.lit .lamp .bulb,html.anim .shelf-wrap.lit .lamp .cone,html.anim .shelf-wrap.lit .pool{animation:lampOn 1.1s steps(1,end) both}
.shelf-wrap.lit .book{box-shadow:inset 0 14px 18px -12px rgb(var(--lamp-rgb) / .35)}
@keyframes lampOn{0%{opacity:0}12%{opacity:.8}18%{opacity:.1}30%{opacity:.9}36%{opacity:.35}48%,100%{opacity:1}}
@keyframes sway{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.lamp{animation:none}}
@media (max-width:760px){.lamp{top:-46px}.lamp .cone{left:-150px;width:300px;height:300px}}
.shelf-body{margin-top:78px}
.lamp{top:-44px;transform-origin:0 -90px}
.lamp .cord{height:96px;background:linear-gradient(transparent,var(--steel-8) 70%,var(--steel-9))}
@media (max-width:760px){.shelf-body{margin-top:70px}.lamp{top:-40px}}
.lamp .cord{height:60px}.lamp{transform-origin:0 -60px}

/* round 14: How I work = the laser-marking cell{margin-top:56px;border:1px solid var(--line);background:linear-gradient(180deg,rgb(var(--panel-rgb) / .92),color-mix(in srgb,var(--void) 96%,transparent))}
@keyframes cxRide{from{transform:translateX(0)}to{transform:translateX(110px)}}
@keyframes cxBelt{to{stroke-dashoffset:-18}}
@keyframes cxFlow{to{stroke-dashoffset:-11}}
@keyframes cxBeam{0%,23%{opacity:0}26%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes cxCheck{0%,11%{opacity:0}14%,24%{opacity:1}34%,100%{opacity:0}}
@keyframes cxTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* round 15: first cross-country */
.xc-box{margin:30px 0 8px;padding-top:24px;border-top:1px solid var(--line)}
.xc-box h4{font:600 clamp(24px,2.6vw,32px)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;margin:8px 0 10px}
.xc-box>p{color:var(--text-2);max-width:78ch}
.xc-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr);gap:18px;margin-top:18px;align-items:stretch}
.xc-grid .route-box{margin:0}
.xc-spec.titleblock{grid-template-columns:1fr;align-content:start}
.xc-g{display:grid;grid-template-columns:minmax(0,560px);margin-top:18px}
@media (max-width:760px){.xc-grid{grid-template-columns:1fr}.xc-spec.titleblock{grid-template-columns:1fr 1fr}}
.figs img[src$="x-jas-img0515.jpg"],.figs img[src$="x-jas-img0517.jpg"]{object-position:50% 12%}

/* ---- Round 22: selected projects result line, Work read-more ---- */
.card .result{margin:2px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:4px;color:var(--text);font-size:15px;line-height:1.45}
.card .result .label{font-size:10px}
.card.feature .result{font-size:16px}
.story-txt details.more>p{margin:12px 0 0}
.story-txt details.more>summary{margin-top:4px}
.story-txt details.more[open]>summary{margin-bottom:4px}
.card .go{white-space:nowrap}
.story-txt details.more>summary{list-style:none;cursor:pointer;width:max-content;padding:7px 12px;border:1px solid var(--line-2);transition:border-color .2s,background .2s}
.story-txt details.more>summary::-webkit-details-marker{display:none}
.story-txt details.more>summary:hover{border-color:var(--text-2);background:var(--panel)}
.story-txt details.more>summary .label{color:var(--text)}
.story-txt details.more .rm-less,.story-txt details.more[open] .rm-more{display:none}
.story-txt details.more[open] .rm-less{display:inline}
.story-txt details.more p:first-of-type{color:var(--text-2)}

/* ---- Round 27: compact project index, timeline status tags ---- */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--void);text-decoration:none;display:flex;flex-direction:column;min-width:0;transition:background .2s}
.tile:hover{background:var(--panel)}
.tile .img{aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line);background:var(--panel)}
.tile .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover .img img{transform:scale(1.04)}
.tile .img svg{width:100%;height:100%}
.tile .tb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile .label{font-size:9.5px;line-height:1.4}
.tile h3{font:600 20px/1.05 var(--disp);letter-spacing:.04em;text-transform:uppercase;margin:0}
.tile p{font-size:13.5px;line-height:1.45;color:var(--text-2);margin:0}
.tile .go{margin-top:auto;padding-top:8px;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);white-space:nowrap}
@media (max-width:1060px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}.tile .tb{padding:12px}.tile h3{font-size:17px}.tile p{font-size:12.5px}
  .tiles>.tile:last-child:nth-child(odd){grid-column:1/-1}.tiles>.tile:last-child:nth-child(odd) .img{aspect-ratio:16/8}}
.ev-status{font-size:9.5px;margin-top:2px}

/* ---- Round 28: real book list (ratings, read dates) ---- */
.bc-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rating{color:var(--live);letter-spacing:.12em;font-size:15px}
.rating i{font-style:normal;color:var(--line-2)}
.book .spine-t{max-height:calc(var(--h) - 70px);overflow:hidden}

/* ---- Round 29: spine width from pages, illustrated covers ---- */
.book{width:var(--w,54px)}
.cover{isolation:isolate}
.cover .art{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-behind)}
.cover .c-t,.cover .c-a{position:relative;text-shadow:0 1px 6px rgb(var(--shade-rgb) / .55)}
.cover .shine{z-index:var(--z-raise)}
.bc-meta .label{white-space:nowrap}
@media (max-width:520px){.cover .c-a{display:none}.cover .c-t{font-size:12.5px;line-height:1.05}}

/* ---- Round 30: 7 spines fit on phones ---- */
.shelf-body>*{min-width:0}
@media (max-width:760px){.book{width:calc(var(--w,54px)*.78)}}
@media (max-width:520px){.shelf{gap:3px;padding:0 4px 10px}.book{width:calc(var(--w,54px)*.6);height:calc(var(--h)*.85);padding:10px 0}
  .book .spine-t{font-size:12px;letter-spacing:.05em;max-height:calc(var(--h)*.85 - 50px)}.book .spine-a{display:none}}
.book-card p.eng{margin-top:10px;padding-left:12px;border-left:2px solid var(--live);color:var(--text)}
.book-card p.eng .label{display:block;margin-bottom:4px;color:var(--live)}

/* ---- Round 34: detailed SpaceX mark, regolith SRT mark ---- */
.rid .glyph{width:60px;height:60px}
.rid .glyph.xl{width:88px;height:88px;overflow:hidden}
.glyph .sx-stack{animation:sxstack 7s cubic-bezier(.55,0,.85,.55) infinite}
.glyph .sx-arms{transform-box:view-box;transform-origin:29px 41px;animation:arms2 7s ease infinite}
@keyframes sxstack{0%,40%{transform:none;opacity:1}80%{transform:translateY(-118px);opacity:1}82%{opacity:0}83%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
.glyph .sr-drop{animation:srdrop 2.1s linear infinite}
.glyph .sr-carry{animation:srcarry 3s linear infinite}
.glyph .sr-fall{animation:srfall 2.4s ease-in infinite}
@keyframes srdrop{0%{transform:translate(0,0);opacity:0}10%{opacity:1}85%{transform:translate(0,8px);opacity:1}100%{transform:translate(0,9px);opacity:0}}
@keyframes srcarry{0%{transform:translate(0,0);opacity:0}8%{opacity:1}90%{opacity:1;transform:translate(22px,-7px)}100%{transform:translate(24px,-7.6px);opacity:0}}
@keyframes srfall{0%{transform:translate(0,0);opacity:0}10%{opacity:1}85%{transform:translate(1.5px,10px);opacity:1}100%{transform:translate(1.6px,11px);opacity:0}}
@media (max-width:640px){.rid .glyph{width:48px;height:48px}.rid .glyph.xl{width:70px;height:70px}}

/* ---- Round 34: capability cards ---- */
.badges.b3{grid-template-columns:repeat(3,1fr)}
.badges.b3 .badge{flex-direction:row;align-items:center;gap:14px}
.badges.b3 .badge .bt{margin-top:0}
.badges.b3 .badge>span:nth-child(n+2){display:block}
.capg{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.capc{background:var(--void);padding:24px 24px 20px;display:flex;flex-direction:column;gap:16px}
.capc-h h3{font:600 26px/1.05 var(--disp);letter-spacing:.05em;text-transform:uppercase;margin:6px 0 6px}
.capc-h p{color:var(--text-2);font-size:15px;margin:0}
.chips-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:12px/1 var(--mono);letter-spacing:.02em;color:var(--text-2);border:1px solid var(--line-2);padding:7px 9px}
.chip.core{color:var(--text);border-color:var(--text-2);background:var(--panel)}
.capc .proof{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding-top:12px;border-top:1px dashed var(--line-2)}
.capc .proof a{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-decoration:none}
.capc .proof a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.capg{grid-template-columns:1fr}}
@media (max-width:640px){.badges.b3{grid-template-columns:1fr}.badges.b3 .badge{padding:12px 14px}.capc{padding:18px 16px}}
.capc .proof{flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;text-align:left}
.capc .proof .label{margin-right:6px}
.badges.b3{width:100%}
/* phone: the strip keeps the headline numbers and the four roles; tracks and project marks live in the timeline below */
@media (max-width:640px){.tl-strip .trk,.tl-strip .marks{display:none}.tl-strip .axis{min-height:0;padding-bottom:6px}}

/* ---- Round 34: spinner assembly legend + explode ---- */
.vlegend{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));background:var(--void);border:1px solid var(--line);border-top:0;margin-bottom:10px}
.vlegend button{box-shadow:inset -1px -1px 0 var(--line)}
.vlegend button{all:unset;cursor:pointer;background:var(--void);padding:10px 12px;display:grid;grid-template-columns:12px 1fr;column-gap:10px;row-gap:2px;align-items:center}
.vlegend button i{width:12px;height:12px;grid-row:1/3;align-self:start;margin-top:3px}
.vlegend button b{font:600 14px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.vlegend button span{grid-column:2;font:11px/1.35 var(--mono);color:var(--muted)}
.vlegend button:hover,.vlegend button.on{background:var(--panel)}
.vlegend button:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.viewer .views .xp{border-color:var(--live)!important;color:var(--live)!important}
.viewer .views .xp.on{background:var(--live)!important;color:var(--void)!important}
/* round 35: G1000 photo sits under the flight spec instead of alone in a half-empty row */
.xc-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.xc-side .xc-g{margin-top:0;grid-template-columns:1fr}
.xc-side .xc-g figure img{aspect-ratio:4/3;object-fit:cover}
.xc-grid{align-items:start}
/* round 35: SpaceX gallery of 5 (2 clips), Firehawk flight test wider than the team photo */
.gallery.r-spacex{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;grid-auto-rows:clamp(220px,24vw,340px)}
.gallery.r-spacex figure.vid video{width:100%;height:100%;object-fit:cover}
.gallery.r-firehawk{grid-template-columns:1fr 1.6fr}
@media (max-width:900px){.gallery.r-spacex{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(150px,38vw,260px)}.gallery.r-spacex>*:first-child{grid-column:1/-1}.gallery.r-firehawk{grid-template-columns:1fr}}
.case-img img{cursor:zoom-in}
.more-story{all:unset;cursor:pointer;display:inline-block;margin-top:12px;padding:8px 12px;border:1px solid var(--line-2)}
.more-story:hover{border-color:var(--text-2);background:var(--panel)}
.more-story .label{color:var(--text)}
.more-story:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* ---- Round 37: cleaner Japan map + itinerary ---- */
.jp-box{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:22px;align-items:center;padding:16px 18px}
.jp-map .route{max-width:none}
.jp .stop:hover circle:nth-of-type(2),.jp .stop:focus circle:nth-of-type(2){fill:var(--live)}
.jp-list .label{display:block;margin-bottom:8px}
.itin{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.itin li{border-bottom:1px solid var(--line)}
.itin .stop{display:grid;grid-template-columns:62px 1fr auto;align-items:baseline;gap:10px;padding:8px 4px;text-decoration:none;color:var(--text)}
.itin a.stop:hover,.itin a.stop:focus-visible{background:var(--panel-2)}
.itin a.stop:hover b{color:var(--live)}
.itin .n{font:11px var(--mono);color:var(--muted);letter-spacing:.06em}
.itin b{font:600 16px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.itin .c{font:11px var(--mono);color:var(--muted)}
.itin .dim{opacity:.55}
@media (max-width:760px){.jp-box{grid-template-columns:1fr}}

/* ---- Round 38: resume shown inside the portfolio ---- */
.resume-ov{position:fixed;inset:0;z-index:var(--z-sheet);background:rgb(var(--scrim-rgb) / .92);overflow-y:auto;padding:24px 16px}
.resume-ov .rs{max-width:900px;margin:0 auto}
.resume-ov .rs-bar{position:sticky;top:0;z-index:var(--z-raise-2);display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--void);border:1px solid var(--line)}
.resume-ov .rs-bar .label{margin-right:auto}
.resume-ov .rs-bar .x{position:static}
.resume-ov img{display:block;width:100%;height:auto;background:var(--paper);margin-top:10px;box-shadow:0 20px 60px rgb(var(--shade-rgb) / .5)}

/* ---- Round 39: favorite series on the shelf ---- */
.book.fav{box-shadow:inset 3px 0 0 var(--live),inset -3px 0 0 var(--live),0 0 22px color-mix(in srgb,var(--live) 28%,transparent);height:calc(var(--h) + 18px)}
.book.fav::before,.book.fav::after{background:var(--live);height:2px}
.book .spine-star{color:var(--live);font-size:15px;line-height:1;margin-bottom:6px;text-shadow:0 0 8px color-mix(in srgb,var(--live) 70%,transparent)}
.book-card.fav .cover{box-shadow:0 0 0 1px var(--live),0 0 34px color-mix(in srgb,var(--live) 35%,transparent),0 18px 40px rgb(var(--shade-rgb) / .5)}
@keyframes suns{to{transform:rotate(360deg)}}
.fav-tag{display:inline-flex;align-items:center;gap:6px;width:max-content;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--void);background:var(--live);padding:4px 8px}
.fav-tag::before{content:"★"}
.vols{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vols li{font:12px var(--mono);color:var(--text-2);border:1px solid var(--line-2);padding:5px 8px;display:flex;gap:6px}
.vols li span{color:var(--live)}
.vols li.dim{border-style:dashed;color:var(--muted)}
.vols li.dim span{color:var(--muted)}
.book-card:not(.fav) .vols li span{color:var(--text-2)}

/* ---------- audit fixes, Sep 26 ---------- */
/* hit areas for the most-tapped text links: nav tabs and case-study Back (look unchanged) */
.nav ul a{position:relative}.nav ul a::before{content:"";position:absolute;inset:-6px -4px}
[data-back]{position:relative}[data-back]::before{content:"";position:absolute;inset:-6px -4px}
/* bigger hit areas without changing the look: timeline bars are 12px tall, proof links 16px */
.bar::before{content:"";position:absolute;inset:-8px 0}
.proof a,.capc .proof a{position:relative}
.proof a::after,.capc .proof a::after{content:"";position:absolute;inset:-5px -3px}
/* keyboard skip link, visible only on focus */
.skip{position:fixed;left:12px;top:-60px;z-index:var(--z-skip);font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--void);background:var(--text);padding:10px 14px;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
main:focus{outline:none}
/* current section in the nav */
.nav ul a[aria-current="true"]{color:var(--text)}
.nav ul a[aria-current="true"]::after{content:"";display:block;height:1px;margin-top:3px;background:var(--text)}
/* 404 */
.nf{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding-block:120px 60px}
.nf h1{font-size:clamp(48px,8vw,96px)}
.nf .ctas{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- audit round (2026-09-27): first screen: results row, tagged-link line ---------- */
.hero .ref-line{margin-top:12px;font:12.5px/1.5 var(--mono);color:var(--text-2);max-width:52ch}
.proof3{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);max-width:640px}
.proof3 li[hidden]{display:none}
.proof3 a{display:grid;gap:4px;padding:12px 14px 12px 0;text-decoration:none;color:inherit;height:100%}
.proof3 li+li a{padding-left:14px;border-left:1px solid var(--line)}
.proof3 .label{font-size:11px}
.proof3 b{font:600 16px/1.15 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.proof3 .r{font-size:14px;line-height:1.4;color:var(--text-2)}
.proof3 a:hover b{color:var(--live)}
@media (max-width:640px){.proof3{grid-template-columns:1fr;margin-top:24px}.proof3 li+li a{padding-left:0;border-left:0;border-top:1px solid var(--line)}.proof3 a{padding:11px 0}}
.nav .fx-theme{margin-left:4px;min-height:24px}
@media (max-width:820px){.nav ul{flex:1 1 0}.nav .fx-theme{order:4;height:40px;margin:0 0 0 10px;padding:0 0 0 10px;border-top:1px solid var(--line);border-left:1px solid var(--line);font-size:10.5px}}   /* phones: MODE ends the tab row, keeping brand and Resume together */

/* ---------- audit round (2026-09-27): keyboard, headings, diagrams, phone captions ---------- */
.tw.more{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.tw-hint{display:block;margin-top:6px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.x:focus-visible,.lb .nv:focus-visible{outline:2px solid var(--text);outline-offset:2px}   /* all:unset above wiped the global ring */
h2.label{font-weight:400;line-height:1.4}
.case h1[tabindex="-1"]:focus{outline:none}   /* focus lands here on route change for screen readers; it isn't a control */   /* case-page section labels are headings for screen readers, styled as labels */
.tw:focus-visible{outline:1px solid var(--text);outline-offset:2px}
.back{padding:10px 0;margin-bottom:24px}
.diagram{cursor:zoom-in}
.lb .lb-svg{width:min(96vw,1500px);max-height:calc(100dvh - 120px);overflow:auto;background:var(--void);padding:14px;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.lb .lb-svg svg{display:block;width:100%;height:auto}
.lb .lb-svg[hidden]{display:none}
@media (max-width:640px){
  .diagram{position:relative}
  .diagram::after{content:"Tap to enlarge";position:absolute;right:8px;bottom:6px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);pointer-events:none}
  .lb .lb-svg svg{width:1000px;max-width:none}   /* full-size drawing, pan sideways to read it */
  .gallery figure{display:flex;flex-direction:column}
  .gallery figure>img,.gallery figure>video{flex:1;min-height:0;height:auto}
  .gallery figcaption{position:static;background:var(--panel);color:var(--text-2);padding:7px 8px 8px}
}
/* Book cards share one grid cell, so the panel is always as tall as the longest card and never resizes or shifts when
   another book is picked. Hidden cards keep their space but are invisible and out of the accessibility tree. */
.book-cards{display:grid;align-items:start}
.book-cards>.book-card{grid-area:1/1}
.book-cards>.book-card[hidden]{display:grid;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.book-cards>.book-card[hidden] *{animation:none!important}}
/* ---- 2026-10-02: projects first. Engineering project showcases, the On the bench row, Leadership, compact Experience ---- */
.showcases{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.sc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.sc.flip>.sc-media{order:2}
.sc-media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:var(--panel);margin:0}
.sc-media img,.sc-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
a.sc-media:hover img{transform:scale(1.03)}
.sc-media.sc-dwg{background:var(--paper)}
.sc-media.sc-dwg img{object-fit:contain;padding:18px;filter:none}
.sc-media figure.vid{margin:0;height:100%}
.sc-media figure.vid figcaption{position:absolute;left:12px;bottom:10px;margin:0;background:rgb(var(--shade-rgb) / .6);padding:3px 8px}
.sc-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.sc-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sc-ic .glyph{width:44px;height:44px;color:var(--text-2)}
.sc h3{font:600 clamp(30px,3.4vw,44px)/.98 var(--disp);letter-spacing:.02em;margin:0;text-wrap:balance}
.sc h3 a{color:inherit;text-decoration:none}
.sc h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.sc-blurb{margin:0;font-size:16px;line-height:1.55;color:var(--text)}
.sc-did ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.sc-did li{position:relative;padding-left:18px;color:var(--text-2);font-size:15px;line-height:1.5}
.sc-did li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--live)}
.sc-res{display:flex;flex-direction:column;gap:3px;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-res b{font-weight:500;font-size:16px;line-height:1.45;color:var(--text)}
.sc-tags{display:flex;flex-wrap:wrap;gap:6px}
.sc-tags span{font:11px var(--mono);letter-spacing:.06em;color:var(--text-2);border:1px solid var(--line-2);padding:3px 8px}
.sc-go{align-self:flex-start}
.sc-photos{grid-column:1/-1;margin-top:4px}
.sc-lead .sc-photos{grid-template-columns:1fr 1fr}
.bench-head{margin-top:clamp(40px,5vw,64px);padding-top:18px;border-top:1px solid var(--line)}
.course-head{margin:clamp(56px,7vw,96px) 0 clamp(28px,3vw,40px);padding-top:clamp(24px,3vw,36px)}
.course-head h3{font-size:clamp(28px,3.8vw,48px)}
.benches{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:14px}
.bench{display:grid;grid-template-columns:150px minmax(0,1fr);background:var(--void);text-decoration:none;color:inherit;min-width:0;transition:background .2s}
.bench:hover{background:var(--panel)}
.bench .img{height:100%;min-height:150px;overflow:hidden;border-right:1px solid var(--line);background:var(--panel)}
.bench .img img{width:100%;height:100%;object-fit:cover}
.bench .img svg{width:100%;height:100%}
.bench .bb{padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.bench h3{font:600 22px/1.05 var(--disp);letter-spacing:.03em;margin:0}
.bench p{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}
.bench .status{color:var(--live)}
.bench .go{margin-top:auto;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
@media (max-width:900px){
  .sc{grid-template-columns:1fr;gap:18px}
  .sc.flip>.sc-media{order:0}
  .benches{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sc h3{font-size:34px}
  .sc-blurb{font-size:16px}
  .bench{grid-template-columns:104px minmax(0,1fr)}
  .bench .img{min-height:120px}
  .sc-lead .sc-photos{grid-template-columns:1fr 1fr}
}
/* ---- 2026-10-02: compact timeline. Career entries are one-line rows; life stories keep their photo cards ---- */
.ev.ev-row{padding:3px 0}
.ev-row .ev-when{padding-top:12px}
.ev-row .ev-dot{margin-top:14px}
.ev-row .ev-card{display:block;padding:9px 14px}
.ev-row .ev-txt{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.ev-row .ev-kind{min-width:84px}
.ev-row .ev-t{font-size:clamp(17px,1.5vw,19px)}
.ev-row .ev-go{margin:0 0 0 auto;font-size:14px;letter-spacing:0}
.ev-row .ev-status{order:5;margin-left:auto}
.ev-row .ev-go{order:6}
.ev-row .ev-status~.ev-go{margin-left:12px}
.yr-row{padding-top:14px}
@media (max-width:820px){
  .ev-row .ev-when{padding-top:0}
  .ev-row .ev-dot{margin-top:4px}
  .ev-row .ev-kind{min-width:0;width:100%}
  .ev-row .ev-card{padding:8px 12px}
}

/* One color for all running text (Sterling, 2026-10-10): secondary text matches the main text in both modes; small labels keep --muted */
:root{--text-2:var(--text)}
html:root[data-theme="1975"]{--text-2:var(--text)}

/* KXR team sections laid out like a Work role (Lockheed review, 2026-10-10) */
.kxr-sec{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:20px 40px;align-items:start}
.kxr-sec .ks-meta{display:flex;flex-direction:column;gap:8px}
.kxr-sec .ks-meta h2{margin-top:0}
.kxr-sec .ks-tb{display:grid;gap:8px;margin-top:6px}
.kxr-sec .ks-tb>div{display:flex;flex-direction:column;gap:2px}
.kxr-sec .ks-tb .v{font-size:14px;color:var(--text)}
.kxr-sec>.lede{margin-top:0;font-size:clamp(17px,1.5vw,20px)}
@media (max-width:760px){.kxr-sec{grid-template-columns:1fr}}