/* =============================================================
   Agustín Kamke — portfolio
   One design system. Light + dark. No override layers.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#FBFCFD;
  --surface:#FFFFFF;
  --surface-2:#F2F5F9;
  --text:#0F1419;
  --muted:#4B5565;      /* 7.4:1 on white  */
  --faint:#6B7686;      /* 4.6:1 on white  */
  --line:#E2E8F0;
  --line-strong:#CBD5E1;

  --blue:#1B5FE3;       /* 5.6:1 on white  */
  --blue-ink:#0F3EA0;
  --cyan:#0E7490;
  --green:#0A7A55;
  --amber:#9A5B06;

  --blue-soft:#EDF3FE;
  --cyan-soft:#E8F6FA;
  --green-soft:#E9F7F1;
  --amber-soft:#FDF4E7;

  --shadow-sm:0 1px 2px rgba(15,20,25,.05), 0 4px 12px rgba(15,20,25,.04);
  --shadow-md:0 2px 6px rgba(15,20,25,.06), 0 14px 38px rgba(15,20,25,.07);
  --shadow-lg:0 4px 12px rgba(15,20,25,.07), 0 28px 70px rgba(15,20,25,.10);

  --max:1200px;
  --radius:16px;
  --radius-lg:24px;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --display:"Manrope","Inter",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
  --bg:#0B0F16;
  --surface:#131923;
  --surface-2:#1A2130;
  --text:#F2F5F9;
  --muted:#A9B4C4;      /* 9.2:1 on bg */
  --faint:#808B9C;      /* 5.6:1 on bg */
  --line:#242D3C;
  --line-strong:#3A465A;

  --blue:#7FA8FF;
  --blue-ink:#A9C4FF;
  --cyan:#4FC8DE;
  --green:#45CE97;
  --amber:#E0A63C;

  --blue-soft:#14203A;
  --cyan-soft:#10262E;
  --green-soft:#0E2721;
  --amber-soft:#2A2113;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 14px 38px rgba(0,0,0,.34);
  --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 28px 70px rgba(0,0,0,.45);
}

/* Honour the OS before JS runs, so dark-mode visitors never see a light flash.
   The explicit toggle above still wins once a choice is stored. */
@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --bg:#0B0F16;
    --surface:#131923;
    --surface-2:#1A2130;
    --text:#F2F5F9;
    --muted:#A9B4C4;
    --faint:#808B9C;
    --line:#242D3C;
    --line-strong:#3A465A;

    --blue:#7FA8FF;
    --blue-ink:#A9C4FF;
    --cyan:#4FC8DE;
    --green:#45CE97;
    --amber:#E0A63C;

    --blue-soft:#14203A;
    --cyan-soft:#10262E;
    --green-soft:#0E2721;
    --amber-soft:#2A2113;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 14px 38px rgba(0,0,0,.34);
    --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 28px 70px rgba(0,0,0,.45);
  }
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.035em;line-height:1.08;margin:0;font-weight:800}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

::selection{background:color-mix(in srgb,var(--blue) 24%,transparent)}

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:2000;
  padding:11px 16px;border-radius:10px;
  background:var(--text);color:var(--bg);
  font-size:13px;font-weight:600;
  transform:translateY(-160%);
  transition:transform .18s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}

.eyebrow{
  color:var(--blue);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;
}
.muted{color:var(--muted)}


/* ---------- 3. Progress + topbar ---------- */
.progress{
  position:fixed;inset:0 auto auto 0;height:2px;width:0;z-index:1000;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green));
  will-change:width;
}

.topbar{
  position:sticky;top:0;z-index:100;
  height:64px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding-inline:max(22px,calc((100vw - var(--max))/2));
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.wordmark{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.02em;
}
.wordmark-glyph{
  width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent);
}
.topnav{
  display:flex;gap:2px;padding:4px;
  border:1px solid var(--line);border-radius:13px;background:var(--surface);
}
.topnav a{
  padding:7px 12px;border-radius:9px;
  color:var(--muted);font-size:12.5px;font-weight:500;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.topnav a:hover{background:var(--blue-soft);color:var(--blue)}

.topbar-actions{justify-self:end;display:flex;align-items:center;gap:10px}

.theme-toggle{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--muted);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.theme-toggle:hover{color:var(--blue);border-color:var(--blue)}
.icon-moon{display:none}
html[data-theme="dark"] .icon-sun{display:none}
html[data-theme="dark"] .icon-moon{display:block}
/* Keeps the icon honest if JS never runs. */
@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]) .icon-sun{display:none}
  html:not([data-theme="light"]) .icon-moon{display:block}
}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--blue);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px color-mix(in srgb,var(--blue) 30%,transparent);
}
.btn-primary:hover{box-shadow:0 8px 24px color-mix(in srgb,var(--blue) 36%,transparent)}
html[data-theme="dark"] .btn-primary{color:#0B0F16}
.btn-ghost{background:var(--surface);color:var(--text)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-quiet{
  padding:8px 14px;font-size:12.5px;
  background:var(--surface);color:var(--muted);
}
.btn-quiet:hover{border-color:var(--blue);color:var(--blue)}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:min(880px,calc(100svh - 64px));
  display:flex;align-items:center;
  padding-block:56px 88px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(70% 55% at 12% 8%,color-mix(in srgb,var(--blue) 8%,transparent),transparent 70%),
    radial-gradient(60% 50% at 88% 78%,color-mix(in srgb,var(--cyan) 7%,transparent),transparent 70%);
}
.hero-canvas{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;
  width:min(100% - 44px,var(--max));
  margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:64px;align-items:center;
}

.kicker{
  color:var(--blue);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  margin-bottom:20px;
}
.hero h1{
  font-size:clamp(56px,7.6vw,104px);
  line-height:.86;letter-spacing:-.06em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--blue),var(--cyan) 55%,var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Current role, stated up front. */
.hero-now{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:24px;padding:9px 16px 9px 14px;
  border:1px solid color-mix(in srgb,var(--blue) 34%,var(--line));
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--blue-ink);font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;
}
.now-pulse{
  position:relative;width:8px;height:8px;flex:none;
  border-radius:50%;background:var(--blue);
}
.now-pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--blue);
  animation:now-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes now-ping{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(2.8);opacity:0}
}

.lede{
  max-width:31em;margin-top:22px;
  color:var(--muted);font-size:17px;line-height:1.6;letter-spacing:-.011em;
}

.hero-proof{
  display:grid;gap:1px;margin-top:30px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--line);overflow:hidden;
}
.hero-proof li{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;
  padding:13px 16px;background:var(--surface);
}
.hero-proof strong{
  font-family:var(--display);font-size:19px;letter-spacing:-.035em;color:var(--blue);
}
.hero-proof span{color:var(--muted);font-size:12.5px;line-height:1.5}
.hero-proof span b{color:var(--text);font-weight:600}

.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.hero-status{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:22px;padding:8px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--muted);font-size:12px;
}
.hero-status .dot{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 16%,transparent);
}

/* --- selected work: independent cards, deliberately not wired together --- */
.hero-work{min-width:0}
.work-caption{
  margin-bottom:16px;
  color:var(--faint);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
}

/* Two horizontal lanes, same mechanism as the projects reel but running in
   opposite directions so the hero does not read as one single strip. */
.work-lanes{display:grid;gap:14px}

/* Only once script.js has cloned the set does .is-looping turn the animation
   on, so a JS failure leaves static cards rather than a track scrolling into
   empty space. */
.work-lane{position:relative;overflow:hidden}
/* Edge fade drawn as overlays instead of mask-image: iOS Safari can stop
   repainting a transform animation that runs inside a masked container. */
.work-lane::before,
.work-lane::after{
  content:"";position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none;
}
.work-lane::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.work-lane::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

.work-track{
  display:flex;width:max-content;
  will-change:transform;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.work-set{display:flex;gap:14px;padding-right:14px}
.work-set>li{display:flex}   /* lets the plain card stretch to the lane height */

.work-lane.is-looping .work-track{animation:work-left 40s linear infinite}
.work-lane-rev.is-looping .work-track{animation-name:work-right;animation-duration:46s}

/* Pause on hover only where a real pointer exists. On iOS a tap leaves :hover
   stuck on the element, which would freeze the lanes for the rest of the visit. */
@media(hover:hover) and (pointer:fine){
  .work-lanes:hover .work-track{animation-play-state:paused}
}
.work-lanes:focus-within .work-track{animation-play-state:paused}

/* -50% of a two-set track is exactly one set, so the seam never shows.
   The gap lives inside each set as padding-right to keep the halves equal. */
@keyframes work-left{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes work-right{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}

.wcard{
  position:relative;display:block;flex:none;width:228px;
  overflow:hidden;
  border-radius:15px;
  border:1px solid var(--line-strong);
  background:var(--surface);
  box-shadow:var(--shadow-md);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.wcard:hover,.wcard:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--blue);
}
.wcard-media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .3s var(--ease);
}
.wcard:hover img{transform:scale(1.04)}
.wcard-body{display:block;padding:12px 14px}
.wcard-org{
  display:block;
  color:var(--blue);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
}
.wcard-name{
  display:block;margin-top:5px;
  font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:-.025em;line-height:1.25;
}
.wcard-meta{display:block;margin-top:6px;color:var(--muted);font-size:11.5px;line-height:1.45}
.wcard-plain{
  min-height:180px;display:grid;align-content:center;
  background:linear-gradient(160deg,var(--surface),var(--blue-soft));
  border-color:var(--blue);
}
.hero-scroll{
  position:absolute;left:50%;bottom:20px;z-index:2;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  color:var(--faint);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
}
.hero-scroll span{
  position:relative;width:44px;height:1px;background:var(--line-strong);overflow:hidden;
}
.hero-scroll span::after{
  content:"";position:absolute;top:0;left:-18px;width:18px;height:1px;background:var(--blue);
  animation:scroll-cue 1.9s var(--ease) infinite;
}
@keyframes scroll-cue{to{left:44px}}

/* ============================================================
   6. SECTIONS
   ============================================================ */
.section{
  width:min(100% - 44px,var(--max));
  margin-inline:auto;
  display:grid;grid-template-columns:172px minmax(0,1fr);gap:52px;
  padding-block:96px;
  border-top:1px solid var(--line);
  scroll-margin-top:78px;   /* clears the sticky header on anchor jumps */
}
.section-marker{
  position:sticky;top:88px;align-self:start;
  padding:15px 16px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.section-marker span{
  display:block;font-family:var(--display);font-size:24px;font-weight:800;
  letter-spacing:-.05em;color:var(--blue);
}
.section-marker p{margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.4}

.section-body{min-width:0}

.section-head{
  display:grid;grid-template-columns:1fr minmax(0,.72fr);gap:56px;align-items:end;
  margin-bottom:44px;
}
.section-head h2{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.05em}
.section-head p{color:var(--muted);font-size:14px;line-height:1.65}
.section-head a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

.sub-h{
  margin:52px 0 16px;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);font-family:var(--font);
}

/* ---------- Profile ---------- */
.profile{
  display:grid;grid-template-columns:224px minmax(0,1fr);gap:36px;align-items:center;
  padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-md);
}
.profile-photo{
  border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
}
.profile-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.profile-copy h2{
  margin:11px 0 14px;
  font-size:clamp(27px,3.2vw,40px);letter-spacing:-.045em;
}
.profile-lede{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:60ch}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.facts>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.facts dt{color:var(--faint);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.facts dd{margin-top:4px;font-size:12.5px;font-weight:500}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.pillars>div{
  padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.pillars>div:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pillars>div:nth-child(1){background:linear-gradient(150deg,var(--surface),var(--blue-soft))}
.pillars>div:nth-child(2){background:linear-gradient(150deg,var(--surface),var(--cyan-soft))}
.pillars>div:nth-child(3){background:linear-gradient(150deg,var(--surface),var(--green-soft))}
.label{color:var(--faint);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.pillars p{margin-top:12px;color:var(--muted);font-size:12.5px;line-height:1.65}

.edu-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;
  padding:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.edu-card h4{margin:9px 0 6px;font-size:22px;letter-spacing:-.04em}
.edu-card .muted{font-size:13px}
.edu-meta{text-align:right;display:grid;gap:3px}
.edu-meta span{color:var(--muted);font-size:12px}
.edu-meta strong{font-family:var(--display);font-size:26px;color:var(--blue);letter-spacing:-.04em}

.teaching{border-top:1px solid var(--line)}
.teaching li{
  display:flex;justify-content:space-between;gap:24px;
  padding:15px 4px;border-bottom:1px solid var(--line);
}
.teaching strong{font-size:13.5px;font-weight:600}
.teaching span{color:var(--muted);font-size:12.5px}

/* ---------- Experience timeline ---------- */
.timeline{position:relative}
.timeline::before{
  content:"";position:absolute;top:14px;bottom:14px;left:129px;width:1.5px;
  background:linear-gradient(var(--blue),var(--cyan),var(--green));
  opacity:.3;
}
.job{
  position:relative;
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:52px;
  padding-block:26px;
}
.job::before{
  content:"";position:absolute;left:123px;top:34px;
  width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:3px solid var(--blue);
  box-shadow:0 0 0 4px var(--bg);
}
.job-date{color:var(--faint);font-size:12px;line-height:1.45;padding-top:5px}
.job-body{
  padding:20px 22px;border-radius:var(--radius);
  border:1px solid transparent;background:transparent;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.job-body:hover{border-color:var(--line);background:var(--surface);box-shadow:var(--shadow-md)}
.job-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.company{
  color:var(--blue);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
}
.job-head h3{margin-top:7px;font-size:23px;letter-spacing:-.04em}
.job-context{
  display:inline-block;font-family:var(--font);font-size:11.5px;font-weight:500;
  color:var(--faint);letter-spacing:0;
}
.tag{
  flex:none;padding:6px 11px;border-radius:999px;
  background:var(--blue-soft);color:var(--blue);
  font-size:10.5px;font-weight:700;white-space:nowrap;
}
/* Names the organisation for this role only — each job stands alone. */
.job-org-note{
  margin-top:10px;padding:6px 11px;
  display:inline-block;border:1px solid var(--line);border-radius:999px;
  background:var(--surface-2);color:var(--faint);font-size:11.5px;
}
.job-summary{margin-top:15px;color:var(--muted);font-size:14px;line-height:1.65;max-width:66ch}

.bullets{display:grid;gap:9px;margin-top:18px}
.bullets li{
  position:relative;padding-left:19px;
  color:var(--muted);font-size:13.5px;line-height:1.62;max-width:74ch;
}
.bullets li::before{
  content:"";position:absolute;left:2px;top:.65em;
  width:5px;height:5px;border-radius:50%;background:var(--blue);
}
.bullets strong,.note strong{color:var(--text);font-weight:600}

.stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.stack li{
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface-2);color:var(--muted);font-size:11px;
}

/* ---------- Projects: moving index ---------- */
/* Two identical sets sit side by side; translating the track by exactly -50%
   lands set 2 where set 1 started, so the loop has no visible seam. */
.reel{
  position:relative;
  margin-bottom:12px;
  padding:4px 0;
  overflow:hidden;
}
/* Overlay fade, not mask-image — see the note on .work-lane. */
.reel::before,
.reel::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;
}
.reel::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.reel::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

.reel-track{
  display:flex;
  width:max-content;
  animation:reel-scroll 52s linear infinite;
  will-change:transform;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
@media(hover:hover) and (pointer:fine){
  .reel:hover .reel-track{animation-play-state:paused}
}
.reel:focus-within .reel-track{animation-play-state:paused}
@keyframes reel-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.reel-set{display:flex;gap:16px;padding-right:16px}

.reel-card{
  display:block;width:266px;flex:none;
  border:1px solid var(--line-strong);border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow-md);
  overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.reel-card:hover,.reel-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--blue);
}
.reel-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.rc-body{display:block;padding:13px 15px}
.rc-org{
  display:block;color:var(--blue);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
}
.rc-name{
  display:block;margin-top:5px;
  font-family:var(--display);font-size:14.5px;font-weight:700;
  letter-spacing:-.025em;line-height:1.25;
}
.rc-meta{display:block;margin-top:7px;color:var(--muted);font-size:11.5px;line-height:1.45}
.reel-card-plain{
  display:grid;align-content:center;min-height:212px;
  background:linear-gradient(155deg,var(--surface),var(--blue-soft));
  border-color:var(--blue);
}
.hint-pointer{display:none}
@media(hover:hover) and (pointer:fine){
  .hint-pointer{display:inline}
  .hint-touch{display:none}
}
.reel-hint{
  margin-bottom:30px;
  color:var(--faint);font-size:11.5px;
}

/* ---------- Projects ---------- */
/* Projects are grouped under the role they belong to, never merged. */
.project-group{margin-bottom:16px}
.project-group + .project-group{
  margin-top:44px;padding-top:8px;border-top:2px solid var(--line-strong);
}
.group-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  margin-bottom:8px;padding:14px 18px;
  border-radius:14px;background:var(--surface-2);border:1px solid var(--line);
}
.group-head h3{font-size:19px;letter-spacing:-.035em}
.group-head p{color:var(--muted);font-size:12.5px}

.project{padding-block:38px;border-top:1px solid var(--line);scroll-margin-top:84px}
.project-group .project:first-of-type{border-top:0;padding-top:22px}
.project-head{
  display:grid;grid-template-columns:1fr minmax(0,.9fr);gap:44px;align-items:end;
  margin-bottom:22px;
}
.project-head h4{margin-top:9px;font-size:clamp(23px,2.7vw,31px);letter-spacing:-.045em}
.project-head>p{color:var(--muted);font-size:13.5px;line-height:1.65}

.shot{
  display:block;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);cursor:zoom-in;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.shot:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.shot-wide img{aspect-ratio:16/9}
.shot-portrait img{aspect-ratio:3/4}
.shot-pano img{aspect-ratio:1100/383}
.shot>span{display:block;padding:11px 14px;color:var(--muted);font-size:12px;line-height:1.45}

.media-grid{display:grid;gap:14px;align-items:start;margin-top:4px}
.media-grid-2{grid-template-columns:1fr 1fr;margin-top:14px}
/* The portrait sets the row height; the videos grow to meet it instead of
   leaving a hole under themselves. */
.media-grid-truck{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch}
.media-grid-truck .video-pair figure{display:flex;flex-direction:column;min-height:0}
.media-grid-truck .video-pair video{flex:1 1 auto;min-height:190px;aspect-ratio:auto;object-fit:cover}
.video-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.video-pair figure,.video-single{margin:0}
.video-pair video,.video-single video{
  width:100%;border-radius:var(--radius);border:1px solid var(--line);background:#0B0F16;
}
.video-pair video{aspect-ratio:4/3;object-fit:cover}
.video-single video{aspect-ratio:16/9;object-fit:cover;max-height:460px}
.video-pair figcaption,.video-single figcaption{
  padding-top:8px;color:var(--muted);font-size:11.5px;
}

.note{
  display:grid;grid-template-columns:106px minmax(0,1fr);gap:18px;
  margin-top:16px;padding:16px 18px;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(120deg,var(--surface),var(--blue-soft));
  color:var(--muted);font-size:13px;line-height:1.65;
}
.note>span{
  color:var(--faint);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;padding-top:2px;
}

.project-featured{
  padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.project-featured .project-head{margin-bottom:20px}

.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.loop li{
  position:relative;padding:16px;min-height:130px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg);
}
.loop li:not(:last-child)::after{
  content:"";position:absolute;right:-8px;top:50%;z-index:1;
  width:7px;height:7px;border-top:1.5px solid var(--blue);border-right:1.5px solid var(--blue);
  transform:translateY(-50%) rotate(45deg);
}
.loop span{color:var(--blue);font-size:10px;font-weight:700;letter-spacing:.1em}
.loop strong{display:block;margin-top:24px;font-family:var(--display);font-size:15px;letter-spacing:-.03em}
.loop small{display:block;margin-top:6px;color:var(--muted);font-size:11.5px;line-height:1.5}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.metrics>div{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.metrics strong{display:block;font-family:var(--display);font-size:21px;color:var(--cyan);letter-spacing:-.04em}
.metrics span{display:block;margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.5}

/* ---------- Cloud ---------- */
.cloud-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.cloud-card{
  /* Without this the wide diagram's min-content size leaks out through the
     grid item's automatic minimum size and widens the whole page. */
  min-width:0;
  padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.cloud-card h3{margin:10px 0 12px;font-size:clamp(22px,2.6vw,29px);letter-spacing:-.04em}
.cloud-card>p{color:var(--muted);font-size:14px;line-height:1.7;max-width:70ch}

.diagram-scroll{
  margin-top:24px;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);padding:14px;
}
.diagram{width:100%;min-width:660px;height:auto}
.dg-box rect{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.2}
.dg-box .dg-box-accent{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1.4}
.dg-title text{
  fill:var(--text);font-family:var(--display);font-size:14px;font-weight:700;
  text-anchor:middle;letter-spacing:-.02em;
}
.dg-sub text{fill:var(--muted);font-family:var(--font);font-size:11.5px;text-anchor:middle}
.dg-note text{fill:var(--faint);font-family:var(--font);font-size:11.5px}
.dg-link path{stroke:var(--blue);stroke-width:1.6;fill:none}
.dg-arrow{fill:var(--blue)}

.cloud-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.cloud-facts li{padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--bg)}
.cloud-facts strong{display:block;font-family:var(--display);font-size:22px;color:var(--green);letter-spacing:-.04em}
.cloud-facts span{display:block;margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.5}

/* ---------- Skills ---------- */
.skills{border-top:1px solid var(--line)}
.skills>div{
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;
  padding:22px 12px;border-bottom:1px solid var(--line);border-radius:12px;
  transition:background .18s var(--ease);
}
.skills>div:hover{background:var(--surface)}
.skills dt{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--blue)}
.skills>div:nth-child(2) dt{color:var(--cyan)}
.skills>div:nth-child(3) dt{color:var(--green)}
.skills>div:nth-child(4) dt{color:var(--amber)}
.skills dd{color:var(--muted);font-size:13.5px;line-height:1.7}

/* ---------- Contact ---------- */
.section-contact{border-bottom:1px solid var(--line)}
.contact-card{
  position:relative;overflow:hidden;
  padding:52px;border-radius:28px;
  background:
    radial-gradient(60% 60% at 88% 10%,rgba(14,116,144,.42),transparent 65%),
    radial-gradient(60% 60% at 6% 92%,rgba(27,95,227,.38),transparent 65%),
    #0D1219;
  color:#F2F5F9;box-shadow:var(--shadow-lg);
}
.contact-card::after{
  content:"AK";position:absolute;right:24px;bottom:-46px;
  font-family:var(--display);font-weight:800;font-size:172px;letter-spacing:-.08em;
  color:rgba(255,255,255,.05);pointer-events:none;
}
.contact-card>*{position:relative;z-index:1}
.overline{color:#93B8FF;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.contact-card h2{margin-top:16px;max-width:16ch;font-size:clamp(34px,4.8vw,60px);letter-spacing:-.05em}
.contact-lede{margin-top:20px;max-width:56ch;color:rgba(242,245,249,.72);font-size:14.5px;line-height:1.7}
.contact-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.contact-links a,.contact-print{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  color:#F2F5F9;font-size:13.5px;font-weight:600;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.contact-links a:hover,.contact-print:hover{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);transform:translateY(-1px);
}
.contact-links a:focus-visible,.contact-print:focus-visible{outline-color:#93B8FF}
.contact-meta{margin-top:44px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  color:rgba(242,245,249,.6);font-size:12px}

/* ---------- Footer ---------- */
.footer{
  width:min(100% - 44px,var(--max));margin-inline:auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-block:26px 44px;color:var(--faint);font-size:11.5px;
}

/* ---------- Rail ---------- */
.rail{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;
  display:grid;gap:12px;padding:12px 9px;border-radius:16px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.rail a{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:var(--line-strong);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.rail a:hover,.rail a.is-active{background:var(--blue);transform:scale(1.4)}
.rail span{
  position:absolute;right:20px;top:50%;
  transform:translateY(-50%) translateX(6px);
  opacity:0;pointer-events:none;white-space:nowrap;
  padding:5px 9px;border-radius:7px;
  background:var(--text);color:var(--bg);font-size:11px;font-weight:600;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------- Lightbox ---------- */
.lightbox{
  width:min(1120px,calc(100vw - 32px));max-height:92vh;
  padding:0;border:0;border-radius:18px;
  background:#0B0F16;color:#F2F5F9;box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.lightbox::backdrop{background:rgba(6,9,14,.78);backdrop-filter:blur(6px)}
.lightbox img{width:100%;max-height:80vh;object-fit:contain;background:#0B0F16}
.lightbox-caption{padding:14px 18px;font-size:12.5px;color:rgba(242,245,249,.72)}
.lightbox-close{
  position:absolute;right:12px;top:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);color:#0B0F16;font-size:22px;line-height:1;
}
.lightbox-close:hover{background:#fff}

/* ============================================================
   7. Responsive
   ============================================================ */
@media(max-width:1240px){
  .topnav a{padding:7px 9px;font-size:12px}
}
@media(max-width:1100px){
  .rail{display:none}
  .hero-inner{gap:44px}
}
@media(max-width:980px){
  .topnav{display:none}
  .topbar{grid-template-columns:1fr auto}
  .hero{min-height:0;padding-block:44px 72px}
  .hero-inner{grid-template-columns:1fr;gap:48px}
  .hero-scroll{display:none}
  .section{grid-template-columns:1fr;gap:26px;padding-block:72px}
  .section-marker{position:static;display:flex;align-items:baseline;gap:12px;width:max-content}
  .section-marker p{margin-top:0}
  .section-head,.project-head{grid-template-columns:1fr;gap:16px}
  .profile{grid-template-columns:1fr;gap:26px}
  .profile-photo{max-width:260px}
  .timeline::before{display:none}
  .job{grid-template-columns:1fr;gap:8px;padding-block:20px;border-bottom:1px solid var(--line)}
  .job::before{display:none}
  .job-body{padding:0}
  .job-body:hover{background:transparent;box-shadow:none;border-color:transparent}
  .media-grid-truck{grid-template-columns:1fr}
  .loop{grid-template-columns:1fr 1fr}
  .loop li:not(:last-child)::after{display:none}
  .skills>div{grid-template-columns:1fr;gap:8px}
}
@media(max-width:620px){
  body{font-size:14.5px}
  .section,.footer,.hero-inner{width:min(100% - 30px,var(--max))}
  .topbar{height:58px;padding-inline:15px}
  .btn-quiet{display:none}
  .hero h1{font-size:clamp(46px,13vw,64px)}
  .lede{font-size:15.5px}
  .hero-proof li{grid-template-columns:1fr;gap:2px}
  .wcard{width:196px}
  .reel-card{width:222px}
  .reel-card-plain{min-height:186px}
  .hero-now{font-size:12.5px;padding:8px 14px 8px 12px;align-items:flex-start}
  .now-pulse{margin-top:6px}
  .facts,.metrics,.cloud-facts,.media-grid-2,.video-pair,.loop{grid-template-columns:1fr}
  .edu-card{grid-template-columns:1fr;gap:18px}
  .edu-meta{text-align:left}
  .note{grid-template-columns:1fr;gap:8px}
  .project-featured,.cloud-card{padding:22px 18px}
  .contact-card{padding:32px 24px}
  .contact-card::after{font-size:120px;bottom:-32px}
  .teaching li{flex-direction:column;gap:4px}
  .footer{flex-direction:column}
}

/* ---------- Motion preferences ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  /* Freeze both carousels, but leave them scrollable by hand — otherwise the
     cards past the fold would be frozen out of reach. */
  .work-track,.reel-track{animation:none;transform:none}
  .work-lane,.reel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .work-lane::before,.work-lane::after,
  .reel::before,.reel::after{display:none}
}

/* ============================================================
   8. Print — the page becomes a CV
   ============================================================ */
@media print{
  @page{margin:14mm 13mm}

  html,body{background:#fff!important;color:#000;font-size:10pt;line-height:1.45}

  .topbar,.rail,.progress,.skip-link,.hero-canvas,.hero-work,.hero-actions,
  .reel,.reel-hint,
  .hero-scroll,.lightbox,.footer,.section-marker,.diagram-scroll,
  video,.video-pair,.video-single,.shot,.profile-photo,.media-grid,
  .btn,.contact-print,.theme-toggle{
    display:none!important;
  }

  .hero{
    min-height:0;padding:0 0 10pt;background:none;display:block;
    border-bottom:1.5pt solid #000;
  }
  .hero-inner{display:block;width:auto;gap:0}
  .hero h1{font-size:26pt;line-height:1}
  .hero h1 em{color:#000;-webkit-text-fill-color:#000;background:none}
  /* Collapse the two-line display name onto one CV line, keeping the space. */
  .hero h1 br{display:none}
  .hero h1 em::before{content:" "}
  .kicker{color:#000;font-size:8.5pt;margin-bottom:6pt;letter-spacing:.06em}
  .lede{font-size:10.5pt;margin-top:8pt;color:#000;max-width:none}
  .hero-proof{display:block;border:0;background:none;margin-top:8pt}
  .hero-proof li{display:inline;padding:0;background:none}
  .hero-proof li::after{content:" · "}
  .hero-proof li:last-child::after{content:""}
  .hero-proof strong{color:#000;font-size:10pt}
  .hero-proof strong::after{content:" "}   /* grid gap is gone once inline */
  .hero-proof span{font-size:9.5pt;color:#000}
  .hero-status{border:0;padding:0;margin-top:6pt;font-size:9.5pt;color:#000;background:none}
  .hero-now{
    display:block;border:0;border-radius:0;padding:0;margin-top:6pt;
    background:none;color:#000;font-size:10pt;font-weight:700;
  }
  .now-pulse{display:none}
  .hero-status .dot{display:none}
  .print-contact{display:block!important;margin-top:4pt;font-size:9.5pt}

  .section{
    display:block;width:auto;padding:10pt 0 0;border-top:0;
    break-inside:auto;
  }
  .section-body{display:block}
  .section-head{display:block;margin-bottom:8pt}
  .section-head h2{font-size:14pt;margin-bottom:3pt}
  .section-head p,.sub-h{font-size:9pt;color:#000}
  .sub-h{margin:12pt 0 5pt;letter-spacing:.08em}

  .profile{display:block;padding:0;border:0;box-shadow:none;background:none}
  .profile-copy h2{font-size:13pt;margin:0 0 5pt}
  .profile-lede{font-size:9.5pt;color:#000}
  .facts{display:block;margin-top:6pt}
  .facts>div{display:inline-block;border:0;padding:0 14pt 3pt 0;background:none;vertical-align:top}
  .pillars{display:block;margin-top:5pt}
  .pillars>div{display:block;border:0;padding:0 0 2pt;background:none!important}
  .pillars p{display:inline;margin:0;font-size:9.5pt;color:#000}
  .label{font-size:8.5pt}
  .label::after{content:": "}
  .job-org-note{
    display:block;margin-top:2pt;padding:0;border:0;background:none;
    font-size:9pt;color:#000;
  }
  .facts dt{font-size:7.5pt}
  .facts dd{font-size:9.5pt}

  .edu-card{display:flex;justify-content:space-between;gap:16pt;padding:0;border:0;box-shadow:none;background:none}
  .edu-card h4{font-size:11.5pt}
  .edu-meta strong{font-size:11pt;color:#000}
  .edu-meta span{font-size:9pt;color:#000}

  .teaching li{padding:3pt 0}

  .timeline::before{display:none}
  .job{display:block;padding:0 0 9pt;break-inside:avoid}
  .job::before{display:none}
  .job-date{font-size:9pt;color:#000;padding:0}
  .job-body{padding:0;border:0;background:none}
  .job-head h3{font-size:12pt;margin-top:2pt}
  .company{color:#000;font-size:8.5pt}
  .tag{display:none}
  .job-summary,.bullets li{font-size:9.5pt;color:#000;max-width:none;line-height:1.4}
  .job-summary{margin-top:3pt}
  .bullets{gap:2pt;margin-top:5pt}
  .bullets li::before{background:#000;width:3pt;height:3pt;top:.6em}
  /* Flex would eat the whitespace around the separator; go back to text flow. */
  .stack{display:block;margin-top:5pt}
  .stack li{display:inline;border:0;background:none;padding:0;color:#000;font-size:8.5pt}
  .stack li::after{content:" · "}
  .stack li:last-child::after{content:""}

  /* Keep the employer grouping visible in the printed CV. */
  .project-group{margin:0}
  .project-group + .project-group{margin-top:8pt;padding-top:0;border-top:0}
  .group-head{
    display:block;margin:8pt 0 4pt;padding:0 0 2pt;
    border:0;border-bottom:.5pt solid #999;border-radius:0;background:none;
  }
  .group-head h3{display:inline;font-size:10.5pt}
  .group-head p{display:inline;font-size:9pt;color:#000}
  .group-head p::before{content:" — "}

  .project{padding:0 0 8pt;border-top:0;break-inside:avoid}
  .project-group .project:first-of-type{padding-top:0}
  .project-head{display:block;margin-bottom:4pt}
  .project-head h4{font-size:11.5pt}
  .project-head>p{font-size:9.5pt;color:#000}
  .note{display:block;border:0;background:none;padding:0;margin-top:3pt;font-size:9pt;color:#000}
  .note>span{display:inline;font-size:9pt}
  .note>span::after{content:": "}
  .project-featured{padding:0;border:0;box-shadow:none;background:none}
  .loop{display:block;margin-top:4pt}
  .loop li{display:inline;border:0;padding:0;min-height:0;background:none;font-size:9pt}
  .loop li::after{content:" → "}
  .loop li:last-child::after{content:""}
  .loop span{display:none}
  .loop strong{display:inline;margin:0;font-size:9pt}
  .loop small{display:none}
  .metrics{display:block;margin-top:4pt}
  .metrics>div{display:inline-block;border:0;padding:0 14pt 0 0;background:none}
  .metrics strong{display:inline;color:#000;font-size:9.5pt}
  .metrics span{display:inline;font-size:9pt;color:#000}
  .metrics span::before{content:" — "}

  .cloud-grid{display:block}
  .cloud-card{padding:0 0 8pt;border:0;box-shadow:none;background:none;break-inside:avoid}
  .cloud-card h3{font-size:11.5pt;margin:2pt 0 4pt}
  .cloud-card>p{font-size:9.5pt;color:#000}
  .cloud-facts{display:block;margin-top:4pt}
  .cloud-facts li{display:inline-block;border:0;padding:0 14pt 0 0;background:none}
  .cloud-facts strong{display:inline;color:#000;font-size:9.5pt}
  .cloud-facts span{display:inline;font-size:9pt}
  .cloud-facts span::before{content:" — "}

  .skills>div{display:block;padding:4pt 0;break-inside:avoid}
  .skills dt{font-size:9.5pt;color:#000}
  .skills dd{font-size:9.5pt;color:#000}

  .section-contact{border-bottom:0}
  .contact-card{padding:0;border-radius:0;background:none!important;color:#000;box-shadow:none}
  .contact-card::after{display:none}
  .contact-card h2{font-size:12pt;max-width:none;margin-top:4pt}
  .overline{color:#000;font-size:8.5pt}
  .contact-lede{color:#000;font-size:9.5pt;margin-top:4pt}
  .contact-links{margin-top:6pt;gap:0}
  .contact-links a{border:0;padding:0 14pt 0 0;color:#000;font-size:9.5pt}
  .contact-links a span{display:none}
  .contact-meta{margin-top:6pt;padding-top:4pt;color:#000;font-size:9pt;border-top:.5pt solid #999}

  a{color:#000;text-decoration:none}
  h1,h2,h3,h4{break-after:avoid}
}

.print-contact{display:none}

/* ---------- 404 ---------- */
.oops{
  min-height:80vh;
  width:min(100% - 44px,var(--max));margin-inline:auto;
  display:grid;place-content:center;justify-items:start;gap:18px;
}
.oops h1{font-size:clamp(54px,11vw,116px);letter-spacing:-.06em;line-height:.85}
.oops h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--blue),var(--cyan) 55%,var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.oops p{color:var(--muted);font-size:16px;max-width:46ch}