/* The ride: a New Haven Line train runs from the Bronx to New Haven along the bottom of the screen as you scroll.
   Warm paper, ink and line red. Big Shoulders (after Chicago's civic signage) for signs, Public Sans for reading,
   IBM Plex Mono for anything timetable-like. Sections are stops; the route map up top shows where you are. */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face{font-family:"Big Shoulders Display";src:url("/assets/fonts/big-shoulders.woff2") format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/public-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/public-sans-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-600.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#f4efe6; --paper-2:#ebe3d5; --card:#fbf8f3;
  --ink:#15171c; --ink-2:#4a4d55; --ink-3:#6b6e75; --rule:#dbd2c3;
  --route:#d93a26;          /* New Haven Line red: graphics and large type */
  --route-text:#b02c1b;     /* the same red, dark enough for small text */
  --led:#ffd27a;            /* amber of a destination display */
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue",sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1120px; --gutter:clamp(18px,4vw,40px);
  --top-h:68px; --ride-h:clamp(104px,19vh,184px);
  --radius:16px;
  --lift:0 22px 44px -26px rgba(21,23,28,.42);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 20px)}
html.locked{overflow:hidden}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important} }
body{margin:0;padding-bottom:var(--ride-h);background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
html.no-ride body{padding-bottom:0}
::selection{background:var(--route);color:#fff}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--route);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gutter), env(safe-area-inset-left,0px));padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kicker,.stop-no,.label{font:500 12.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--route-text)}
.print-only{display:none}
.skip{position:fixed;left:12px;top:-80px;z-index:50;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:700 15px/1 var(--body);text-decoration:none}
.skip:focus{top:max(12px, env(safe-area-inset-top,0px))}

/* ---------- Buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:700 15px/1 var(--body);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--route);border-color:var(--route);color:#fff}
.btn.go::after{content:"→";transition:transform .15s}
.btn.go:hover::after{transform:translateX(3px)}

/* ---------- Route map header ---------- */
.top{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:rgba(244,239,230,.94);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid var(--rule)}
.top-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2.4vw,28px);height:var(--top-h)}
.mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--route);color:#fff;font:900 18px/1 var(--display);letter-spacing:.02em;text-decoration:none}
.mark:hover{background:var(--ink)}
.route{display:flex;align-items:center;gap:14px;min-width:0}
.terminus{flex:none;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-bottom:16px}
.route-line{position:relative;flex:1;min-width:0;height:46px}
.route-line::before{content:"";position:absolute;left:-6px;right:-6px;top:13px;height:5px;border-radius:3px;background:var(--route)}
.stops{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:flex;justify-content:space-between}
.stops li{position:relative;width:0}
.stop-link{position:absolute;left:0;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 6px 4px;color:var(--ink-2);text-decoration:none}
.stop-link .dot{width:15px;height:15px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);transition:background .15s,transform .15s}
.stop-link .name{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.stop-link .short{display:none}
.stop-link:hover .name{color:var(--route-text)}
.stop-link[aria-current="true"]{color:var(--ink)}
.stop-link[aria-current="true"] .dot{background:var(--ink);transform:scale(1.15)}
.marker{position:absolute;left:0;top:-5px;width:34px;height:19px;transform:translateX(-50%);pointer-events:none;z-index:1;transition:left .12s linear}
.marker svg{display:block;width:100%;height:100%}
.scenery{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.scenery svg{width:18px;height:12px}
.scenery[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.scenery:hover{border-color:var(--route)}

/* ---------- Stops (sections) ---------- */
.stop{padding-top:clamp(80px,11vw,136px)}
.stop.about{padding-top:clamp(36px,6vw,72px)}
/* A station sign over a short stretch of track */
.stop-head{position:relative;display:flex;align-items:flex-end;gap:clamp(14px,2vw,22px);margin-bottom:clamp(30px,4vw,52px);padding-bottom:26px}
.stop-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;
  background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/100% 2px no-repeat,repeating-linear-gradient(90deg,var(--ink-3) 0 3px,transparent 3px 15px) 0 2px/100% 8px no-repeat}
.stop-bullet{flex:none;display:grid;place-items:center;width:clamp(46px,5.4vw,64px);aspect-ratio:1;margin-bottom:4px;border-radius:50%;background:var(--route);color:#fff;font:900 clamp(24px,2.8vw,32px)/1 var(--display)}
.stop-no{margin:0 0 8px}
.stop h2{font-size:clamp(3.25rem,8.6vw,6.75rem);font-weight:900;line-height:.82;text-transform:uppercase;letter-spacing:.005em}

/* ---------- About: the departure ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.85fr);gap:clamp(36px,5vw,80px);align-items:center;min-height:calc(100svh - var(--top-h) - var(--ride-h) - 96px)}
.hero-kicker{margin:0 0 16px;font:500 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--route-text)}
.hero-name{font-size:clamp(4.6rem,13.5vw,11rem);font-weight:900;line-height:.8;text-transform:uppercase;letter-spacing:-.005em}
.hero-name .last{color:var(--route)}
.sub{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:18px;font:500 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.about .bio{margin:30px 0 32px;max-width:46ch;font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-2)}
.oops h1{font-size:clamp(3rem,8vw,5rem);text-transform:uppercase;margin-bottom:16px}
.oops p{max-width:60ch;margin-bottom:12px}
.oops .muted{color:var(--ink-2);font-size:14px}

/* The ticket */
.ticket{position:relative;justify-self:center;width:100%;max-width:410px;padding:22px 24px 20px;border-radius:18px;background:var(--card);box-shadow:0 1px 0 rgba(21,23,28,.06),var(--lift);transform:rotate(-2deg);transition:transform .25s}
.ticket:hover{transform:rotate(0)}
.t-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.t-top .t-type{display:flex;align-items:center;gap:8px}
.t-bullet{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--route);color:#fff;font:900 12px/1 var(--display)}
.t-route{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 18px;font:900 clamp(32px,3.6vw,42px)/.9 var(--display);text-transform:uppercase}
.t-route .arrow{color:var(--route);font-weight:800}
.t-perf{position:relative;height:0;margin:0 -24px 16px;border-top:2px dashed var(--rule)}
.t-perf::before,.t-perf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--paper)}
.t-perf::before{left:-11px}
.t-perf::after{right:-11px}
.t-rows{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0}
.t-rows dt{padding-top:3px;font:600 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.t-rows dd{margin:0;font:600 15.5px/1.4 var(--body)}
.t-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:20px}
.barcode{display:block;width:100%;max-width:210px;height:40px}
.t-no{margin-top:6px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.t-photo{flex:none;width:66px;height:80px;border-radius:8px;object-fit:cover;border:1px solid var(--rule)}

/* By the numbers: a destination-board panel */
.stats{position:relative;margin-top:clamp(56px,8vw,96px);padding:clamp(26px,4vw,42px);border-radius:20px;background:var(--ink);color:var(--paper);overflow:hidden}
.stats::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--route)}
.stats-label{display:flex;align-items:center;gap:10px;margin:0 0 26px;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--led)}
.stats-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 10px var(--led)}
.stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:26px 0}
.stats li{padding:0 28px;border-left:1px solid rgba(244,239,230,.16)}
.stats li:first-child{padding-left:0;border-left:0}
.stat-value{display:block;font:900 clamp(3.2rem,6.4vw,5rem)/.85 var(--display);color:var(--paper)}
.stat-label{display:block;max-width:28ch;margin-top:12px;font:500 12.5px/1.55 var(--mono);color:#c9c2b6}

/* ---------- Research and experience: a branch line ---------- */
.jobs{position:relative;list-style:none;margin:0;padding:0 0 0 46px}
.jobs::before{content:"";position:absolute;left:12px;top:12px;bottom:18px;width:6px;border-radius:3px;background:var(--route)}
.jobs > li{position:relative;min-width:0;padding-bottom:40px}
.jobs > li:last-child{padding-bottom:0}
.jobs > li::before{content:"";position:absolute;left:-43px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:5px solid var(--ink)}
.job-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:baseline}
.job-top h3{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;line-height:1.05}
.job-org{grid-column:1;font-weight:600;color:var(--ink-2)}
.job-dates{grid-column:2;grid-row:1;padding:4px 10px;border-radius:999px;background:var(--paper-2);font:500 12px/1.3 var(--mono);letter-spacing:.04em;white-space:nowrap}
.jobs ul,.card ul{margin:14px 0 0;padding-left:20px;max-width:68ch}
.jobs ul li,.card ul li{margin:6px 0;padding-left:4px}
.jobs ul li::marker,.card ul li::marker,.proj-cols li::marker{color:var(--route)}

/* ---------- Projects ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{min-height:40px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 14px/1 var(--body);cursor:pointer}
.chip:hover{border-color:var(--route)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:24px;align-items:start}
.card{min-width:0;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.media{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:var(--paper-2);color:var(--ink-2);font:500 12px/1.4 var(--mono)}
.media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
button.media{width:100%;margin:0;padding:0;border:0;overflow:hidden;cursor:pointer}
button.media:focus-visible{outline-offset:-4px}
.card:hover .media img{transform:scale(1.04)}
.open-hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:var(--paper);color:var(--ink);font:700 13px/1 var(--body);box-shadow:0 4px 12px -4px rgba(21,23,28,.4)}
.open-hint .ico svg{width:13px;height:13px}
.card:hover .open-hint{background:var(--route);color:#fff}
/* No photo yet: a platform sign with the project's name */
.sign{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px;background:var(--ink);color:var(--paper);text-align:left}
.sign::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--route)}
.sign-no{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--led)}
.sign-name{max-width:14ch;font:900 clamp(30px,3.4vw,40px)/.9 var(--display);text-transform:uppercase}
.card-body{display:grid;gap:14px;padding:22px 24px 24px}
.card h3{font-size:30px;font-weight:800;line-height:.95;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:5px 11px;border-radius:999px;background:var(--paper-2);font:600 12px/1.2 var(--body);color:var(--ink-2)}
.card details summary{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;list-style:none;font:700 14px/1 var(--body)}
.card details summary::-webkit-details-marker{display:none}
.card details summary::after{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--paper-2);font-size:15px}
.card details[open] summary::after{content:"−"}
.card .role{margin-top:10px;font:500 12px/1.5 var(--mono);color:var(--ink-2)}
.card .plinks{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-weight:700}
.empty{color:var(--ink-2)}

/* ---------- Project window ---------- */
dialog{padding:0;border:0;color:var(--ink);background:transparent;max-width:none;max-height:none;overflow:hidden}
.proj{width:min(1040px, calc(100vw - 32px));height:calc(100vh - 48px);height:calc(100dvh - 48px);margin:auto}
.proj::backdrop{background:rgba(21,23,28,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.proj[open]{animation:pull-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes pull-in{from{opacity:0;transform:translateY(18px)}}
.proj-panel{height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.proj-head{flex:none;position:relative;display:flex;align-items:center;gap:16px;padding:14px 14px 18px 24px;background:var(--ink);color:var(--paper)}
.proj-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--route)}
.proj-head h2{flex:1;min-width:0;font-size:clamp(26px,3.4vw,38px);font-weight:900;line-height:.95;text-transform:uppercase}
.bullet{flex:none;width:16px;height:16px;border-radius:50%;background:var(--route);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--paper)}
.x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(244,239,230,.12);color:var(--paper);cursor:pointer}
.x:hover{background:var(--route)}
.x .ico svg{width:18px;height:18px;stroke-width:2.2}
.proj-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:32px clamp(18px,4.5vw,52px) 64px}
.proj-body:focus-visible{outline-offset:-4px}
.proj-hero{margin:0 0 26px}
.zoom{position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--paper-2);cursor:zoom-in}
.zoom img{display:block;width:100%;height:auto}
.proj-hero .zoom img{max-height:min(60vh,560px);object-fit:contain}
.zoom-ico{position:absolute;right:10px;top:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--ink)}
.zoom:hover .zoom-ico{background:var(--route);color:#fff}
.ph{display:grid;place-items:center;aspect-ratio:4/3;padding:16px;border:1.5px dashed var(--ink-3);border-radius:12px;background:var(--paper-2);color:var(--ink-2);font:500 12.5px/1.5 var(--mono);text-align:center;overflow-wrap:anywhere}
.proj-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.proj-role{font:500 12.5px/1.5 var(--mono);color:var(--ink-2)}
.proj-lead{max-width:40ch;margin-top:16px;font-size:clamp(20px,2.4vw,26px);font-weight:500;line-height:1.35}
.proj-cols{display:grid;gap:32px 52px;margin-top:36px;padding-top:30px;border-top:1px solid var(--rule)}
.proj-cols.two{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.proj-cols p{margin:0 0 16px;max-width:66ch}
.proj-cols ul{margin:0 0 20px;padding-left:20px}
.proj-cols li{margin:6px 0}
.side-box{padding:22px 24px;border-radius:14px;background:var(--card);border:1px solid var(--rule)}
.kicker{margin:0 0 12px}
.why{margin-top:56px}
.why > h3{font-size:clamp(36px,5vw,56px);font-weight:900;line-height:.9;text-transform:uppercase}
.why > p{margin-top:10px;color:var(--ink-2)}
.why-list{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:64px}
.why-list.solo{gap:18px;margin-top:26px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.why-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:80px;align-items:center}
.why-row.flip .why-box{order:2}
.why-row.solo{grid-template-columns:minmax(0,1fr)}
.why-box{position:relative;z-index:1;padding:22px 24px;border-radius:14px;background:var(--card);border:1px solid var(--rule)}
.why-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--route);color:#fff;font:900 15px/1 var(--display)}
.why-box h4{margin:14px 0 8px;font-size:24px;font-weight:800;line-height:1;text-transform:uppercase}
.why-box p{margin:0 0 10px;font-size:15.5px;color:var(--ink-2)}
.why-box p:last-child{margin-bottom:0}
.why-fig{margin:0;min-width:0}
.why-fig figcaption{margin-top:10px;font:500 12px/1.5 var(--mono);color:var(--ink-2)}
.why-fig figcaption b{color:var(--route-text);margin-right:8px}
.leader{position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none}
.leader path{fill:none;stroke:var(--route);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.leader .tail{fill:var(--route)}
.leader .tip{fill:var(--route);stroke:#fff;stroke-width:2.5}

/* Full-size image viewer */
.lightbox{width:100vw;height:100vh;height:100dvh;margin:0}
.lightbox::backdrop{background:rgba(21,23,28,.94)}
.lb-wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:72px 16px 28px}
.lb-wrap img{display:block;min-height:0;max-width:100%;max-height:calc(100% - 44px);object-fit:contain;border-radius:8px;background:#fff}
.lb-cap{max-width:70ch;color:var(--paper);font:500 13px/1.5 var(--mono);text-align:center}
.lightbox .x{position:absolute;z-index:1;top:max(14px, env(safe-area-inset-top,0px));right:max(14px, env(safe-area-inset-right,0px))}

/* ---------- Skills ---------- */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.skill-group{padding:22px 24px;border-radius:var(--radius);background:var(--card);border:1px solid var(--rule)}
.skills h3{margin:0 0 16px;font-size:26px;font-weight:800;text-transform:uppercase}
.skills ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.skills li{padding:6px 13px;border-radius:999px;background:var(--paper-2);font:600 14px/1.3 var(--body)}

/* ---------- Education: the timetable ---------- */
.edu{display:grid;gap:32px}
.edu h3{font-size:clamp(2.25rem,4.4vw,3.25rem);font-weight:900;text-transform:uppercase;line-height:.9}
.edu .deg{margin-top:12px;font-size:19px;font-weight:600}
.edu .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.edu .meta span{padding:5px 12px;border-radius:999px;background:var(--paper-2);font:500 12.5px/1.3 var(--mono)}
.edu .lbl{margin:36px 0 14px;font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--route-text)}
.edu .tag{font-size:14px;padding:6px 13px;color:var(--ink)}
.terms{max-width:720px;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card)}
.term + .term{border-top:1px solid var(--rule)}
.term-btn{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:16px;width:100%;min-height:60px;padding:0 22px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.term-btn:hover{background:var(--paper)}
.term-name{font:800 24px/1 var(--display);text-transform:uppercase}
.term-count{font:500 12px/1 var(--mono);color:var(--ink-2)}
.term-btn::after{content:"";width:9px;height:9px;justify-self:center;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.term-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.term-btn[aria-expanded="true"] .term-count{color:var(--led)}
.term-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.term-panel{padding:6px 22px 16px}
.term-panel ul{list-style:none;margin:0;padding:0}
.term-panel li{display:flex;gap:16px;padding:11px 0;border-bottom:1px dashed var(--rule);font-size:16px;line-height:1.4}
.term-panel li:last-child{border-bottom:0}
.code{flex:none;width:7.6rem;padding-top:.12em;font:600 12.5px/1.4 var(--mono);color:var(--route-text)}

/* ---------- Contact: end of the line ---------- */
.contact .lead{max-width:56ch;margin-bottom:28px;font-size:clamp(18px,1.8vw,21px);color:var(--ink-2)}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-bottom:32px}
.email{font:900 clamp(2.4rem,7vw,5.25rem)/.95 var(--display);text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--route),var(--route)) 0 100%/0 6px no-repeat;transition:background-size .25s}
.email:hover{background-size:100% 6px}

/* ---------- Footer ---------- */
footer{padding-block:clamp(56px,8vw,96px) 28px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:20px;border-top:1px solid var(--rule);font:500 12.5px/1.6 var(--mono);color:var(--ink-2)}
.foot .grow{flex:1}
.foot a,.linkish{color:var(--ink-2);font:inherit;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.foot a:hover,.linkish:hover{color:var(--route-text);text-decoration:underline}

/* ---------- The ride (drawn by ride.js) ---------- */
.ride{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--ride-h);overflow:hidden;background:#f2d3b8;border-top:1px solid rgba(21,23,28,.14);contain:strict}
html.no-ride .ride{display:none}
.ride .layer{position:absolute;left:0;bottom:0;display:block;will-change:transform}
.ride .sun{position:absolute;left:0;top:0;width:calc(var(--ride-h) * .24);aspect-ratio:1;margin:-8% 0 0 -2%;border-radius:50%;background:#fff3dc;opacity:.9}
.ride-sign{position:absolute;left:max(12px, env(safe-area-inset-left,0px));top:10px;z-index:3;display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(21,23,28,.88);color:var(--led);font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ride-sign .b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--route);color:#fff;font:900 12px/1 var(--display);letter-spacing:0}

/* ---------- Not-found page ---------- */
.nf{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:40px var(--gutter)}
.nf-wrap{width:min(100%,640px)}
.nf-code{font:900 clamp(7rem,26vw,13rem)/.8 var(--display);color:var(--route)}
.nf h1{margin:22px 0 14px;font-size:clamp(2.5rem,7vw,4.25rem);font-weight:900;text-transform:uppercase;line-height:.9}
.nf p{margin:0 0 30px;max-width:46ch;color:var(--ink-2)}
.nf-track{height:12px;margin:26px 0 0;background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/100% 2px no-repeat,repeating-linear-gradient(90deg,var(--ink-3) 0 3px,transparent 3px 15px) 0 2px/100% 8px no-repeat;-webkit-mask:linear-gradient(90deg,#000 60%,transparent);mask:linear-gradient(90deg,#000 60%,transparent)}

/* ---------- Smaller screens ---------- */
@media (max-width:1000px){
  .stop-link .long{display:none}
  .stop-link .short{display:inline}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .ticket{justify-self:start;transform:rotate(-1.2deg)}
  .proj-cols.two{grid-template-columns:minmax(0,1fr)}
  .why-row{grid-template-columns:minmax(0,1fr);gap:32px}
  .why-row.flip .why-box{order:0}
}
@media (max-width:760px){
  :root{--top-h:60px}
  .stop-link .name{display:none}
  .route-line{height:30px}
  .terminus{padding-bottom:0}
  .scenery .txt{display:none}
  .scenery{width:40px;padding:0;justify-content:center}
  .job-top{grid-template-columns:minmax(0,1fr)}
  .job-dates{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .stats li{padding:22px 0 0;border-left:0;border-top:1px solid rgba(244,239,230,.16)}
  .stats li:first-child{padding-top:0;border-top:0}
}
@media (max-width:600px){
  .mark{width:36px;height:36px;font-size:15px}
  .terminus{display:none}
  .route{padding-inline:8px}
  .ride-sign{left:auto;right:max(12px, env(safe-area-inset-right,0px))}
  .jobs{padding-left:38px}
  .jobs::before{left:9px}
  .jobs > li::before{left:-36px;width:22px;height:22px;border-width:4.5px}
  .proj{width:100%;height:100%;margin:0}
  .proj-panel{border-radius:0}
  .proj-head{padding-top:max(14px, env(safe-area-inset-top,0px))}
  .code{width:auto;display:block}
  .term-panel li{display:block}
  .btn{flex:1 1 auto}
}

/* ---------- Print / Save as PDF: a clean one-column resume ---------- */
@media print{
  @page{margin:14mm 14mm 16mm}
  html,body{background:#fff}
  body{padding:0;font-size:10.5pt;line-height:1.4}
  .top,.ride,.skip,.filters,.open-hint,.media,.actions,.email-row .btn,.foot button,dialog,.ticket,.stop-bullet,.stop-head::after{display:none!important}
  .stop{padding-top:16pt}
  .stop.about{padding-top:0}
  .hero{display:block;min-height:0}
  .hero-kicker{display:none}
  .hero-name{font-size:30pt;line-height:1}
  .about .bio{margin:6pt 0;font-size:11pt;color:#000}
  .print-only{display:block;font:500 9pt/1.4 var(--mono)}
  .stop-head{padding:0 0 3pt;margin-bottom:8pt;border-bottom:1.5pt solid #000}
  .stop-no{display:none}
  .stop h2{font-size:17pt}
  .stats{margin-top:12pt;padding:0;background:none;color:#000;border-radius:0}
  .stats::before,.stats-label{display:none}
  .stats ul{grid-template-columns:repeat(3,1fr)}
  .stats li{padding:0 8pt 0 0!important;border:0!important}
  .stat-value{font-size:18pt;color:#000}
  .stat-label{color:#000}
  .jobs{padding-left:0}
  .jobs::before,.jobs > li::before{display:none}
  .jobs > li{padding-bottom:8pt;break-inside:avoid}
  .job-top h3,.card h3{font-size:12pt}
  .job-dates{background:none;padding:0}
  .cards{display:block}
  .card,.term,.skill-group{break-inside:avoid;border:0;background:none;padding:0;margin-bottom:8pt}
  .card-body{padding:0;gap:3pt}
  .card.has-sign .card-body h3{position:static!important;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal}
  .card details summary{display:none}
  .terms{display:grid;grid-template-columns:1fr 1fr;gap:6pt 18pt;max-width:none;border:0;background:none}
  .term + .term{border:0}
  .term-btn{min-height:0;padding:0;background:none!important;color:#000!important}
  .term-btn::after,.term-count{display:none}
  .term-name{font-size:11pt}
  .term-panel{display:block!important;padding:2pt 0 0}
  .term-panel li{display:block;padding:0;border:0}
  .code{display:inline;width:auto;color:#000}
  .skills{gap:6pt 18pt}
  .skills li,.tag,.edu .meta span{background:none;padding:0 8pt 0 0}
  .email{font-size:14pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;overflow-wrap:anywhere}
  footer{padding:10pt 0 0}
}