/* Dark is the deliberate default for every visitor — regardless of their OS
   theme — because the hero video and photos read better against it. Light is
   available as an explicit opt-in via the theme toggle (data-theme="light"). */
:root{
  --bg:#0A0E16;
  --surface:#121A29;
  --surface-2:#161F30;
  --border:#23304A;
  --text:#F5F7FB;
  --text-dim:#9AA7C2;
  --text-dimmer:#5E6C8C;
  --blue:#5EB1FF;
  --blue-light:#8FD0FF;
  --blue-soft:rgba(94,177,255,.14);
  --glow-a:rgba(94,177,255,.22);
  --glow-b:rgba(94,177,255,.12);
  --shadow:rgba(0,0,0,.5);
  --font-display:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-2:#EEF2F9;
  --border:#DDE3EE;
  --text:#10192B;
  --text-dim:#55627A;
  --text-dimmer:#8A94AC;
  --blue:#2F7FD6;
  --blue-light:#1F6FC4;
  --blue-soft:rgba(47,127,214,.10);
  --glow-a:rgba(47,127,214,.20);
  --glow-b:rgba(47,127,214,.10);
  --shadow:rgba(16,25,43,.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
::selection{ background:var(--blue); color:#fff; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; text-wrap:balance; margin:0; }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-light); font-weight:500;
}
.eyebrow-center{ display:flex; justify-content:center; }

/* ---------- header ---------- */
header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand .mark{ width:34px; height:34px; border-radius:9px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px; flex:none; }
.brand .word{ font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; }
.navlinks{ display:flex; align-items:center; gap:26px; }
.navlinks a{ font-size:14px; text-decoration:none; color:var(--text-dim); transition:color .15s; }
.navlinks a:hover{ color:var(--text); }
.navlinks a.active{ color:var(--text); }
.navctl{ display:flex; align-items:center; gap:10px; }
.lang-toggle{ display:flex; align-items:center; height:38px; border:1px solid var(--border); border-radius:100px; padding:3px; gap:2px; flex:none; }
.lang-btn{ font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.03em; border:none; background:transparent; color:var(--text-dimmer); border-radius:100px; padding:0 10px; height:100%; cursor:pointer; transition:background .15s ease, color .15s ease; }
.lang-btn:hover{ color:var(--text); }
.lang-btn.active{ background:var(--blue); color:#fff; }
.icon-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, background .15s; flex:none; }
.icon-btn:hover{ border-color:var(--blue); color:var(--blue); }
.icon-btn svg{ width:16px; height:16px; }
#menuToggle{ display:none; }
.mobile-menu{ display:none; }
@media (max-width:760px){
  .navlinks{ display:none; }
  #menuToggle{ display:flex; }
  .mobile-menu.open{ display:flex; }
}
.mobile-menu{ position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--bg); border-bottom:1px solid var(--border); padding:8px 0; }
.mobile-menu a{ padding:14px 22px; font-size:14.5px; text-decoration:none; color:var(--text); border-top:1px solid var(--border); }
.mobile-menu a:first-child{ border-top:none; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; text-decoration:none; padding:13px 24px; border-radius:100px; white-space:nowrap; transition:transform .15s ease, opacity .15s ease, border-color .15s ease; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ transform:translateY(-1px); opacity:.92; }
.btn-ghost{ border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- hero ---------- */
.hero{ position:relative; display:flex; align-items:center; min-height:840px; padding:170px 0 120px; overflow:hidden; border-bottom:1px solid var(--border); }
@media (max-width:760px){ .hero{ min-height:680px; padding:145px 0 100px; } }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--bg); }
.hero-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--bg) 84%, transparent) 0%,
    color-mix(in srgb, var(--bg) 64%, transparent) 45%,
    color-mix(in srgb, var(--bg) 32%, transparent) 100%
  );
}
.hero-glow{ position:absolute; top:-220px; left:50%; transform:translateX(-50%); width:1100px; height:640px; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 50% 55% at 40% 30%, var(--glow-a), transparent 70%),
    radial-gradient(ellipse 45% 50% at 65% 40%, var(--glow-b), transparent 70%); }
.hero-inner{ position:relative; z-index:3; width:100%; max-width:820px; }
.hero h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.1; letter-spacing:-.01em; margin:22px 0 24px; }
@media (max-width:520px){ .hero h1{ font-size:2rem; } }
.hero p.lede{ font-size:1.1rem; color:var(--text-dim); max-width:58ch; margin:0 0 34px; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }

/* ---------- ticker ---------- */
.ticker{ border-bottom:1px solid var(--border); overflow:hidden; }
.ticker-track{ display:flex; width:max-content; animation:tick 42s linear infinite; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation-duration:160s; } }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker-item{ font-family:var(--font-mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dimmer); padding:14px 26px; white-space:nowrap; }
.ticker-item::after{ content:"·"; margin-left:26px; color:var(--border); }

/* ---------- section shell ---------- */
section{ padding:88px 0; }
.sec-head{ max-width:64ch; margin-bottom:56px; }
.sec-head h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); margin-top:14px; }
.sec-head p{ color:var(--text-dim); margin-top:14px; font-size:1.02rem; }

@supports (animation-timeline: view()){
  .reveal{ animation:rise linear both; animation-timeline:view(); animation-range:entry 0% cover 25%; }
  @keyframes rise{ from{ opacity:.4; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
}
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none !important; } }

/* ---------- timeline eras ---------- */
#timeline{ border-top:1px solid var(--border); }
.era{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:72px 0; border-bottom:1px solid var(--border); }
.era:last-child{ border-bottom:none; }
.era--left .era-media{ order:-1; }
@media (max-width:860px){
  .era{ grid-template-columns:1fr; gap:32px; padding:56px 0; }
  .era--left .era-media{ order:0; }
}

.era-index{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.era-index .n{ font-family:var(--font-mono); font-size:1rem; color:var(--blue); font-weight:600; flex:none; }
.era-index .rule{ height:1px; background:var(--border); flex:1; }
.era-years{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--text-dimmer); margin-bottom:6px; }
.era-body h3{ font-size:1.7rem; margin-bottom:14px; }
.era-body p.desc{ color:var(--text-dim); font-size:1rem; max-width:56ch; margin:0 0 28px; }
.era-body p.desc a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.era-body p.desc a:hover{ color:var(--blue-light); }

.era-tags{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.era-tags span{ display:block; font-size:.88rem; color:var(--text); padding:12px 0; border-top:1px solid var(--border); }
@media (max-width:420px){ .era-tags{ grid-template-columns:1fr; } }

/* Placeholder slide — a slot waiting for a real photo/video. */
.carousel-slide.placeholder{ box-sizing:border-box; border:1.5px dashed var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; }
.carousel-slide.placeholder svg{ width:30px; height:30px; color:var(--text-dimmer); }
.carousel-slide.placeholder span{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-dimmer); max-width:26ch; }

/* Every era-media slot is a carousel: a single slide shows no arrows (removed by
   JS depending on slide count), multiple slides get glowing prev/next arrows. */
.media-carousel{ position:relative; overflow:hidden; border-radius:16px; background:var(--surface-2); }
.media-carousel.media-portrait{ max-width:360px; margin:0 auto; }
@media (max-width:860px){ .media-carousel.media-portrait{ max-width:300px; } }

.carousel-track{ display:flex; transition:transform .45s ease; }
@media (prefers-reduced-motion: reduce){ .carousel-track{ transition:none; } }

.carousel-slide{ position:relative; overflow:hidden; flex:0 0 100%; min-width:0; aspect-ratio:4/3; }
.media-carousel.media-portrait .carousel-slide{ aspect-ratio:9/16; }
.media-carousel.media-tall .carousel-slide{ aspect-ratio:3/4; }
.carousel-slide video, .carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.carousel-slide:hover video, .carousel-slide:hover img{ transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){ .carousel-slide video, .carousel-slide img{ transition:none; } }
/* Cropped screenshots: show the whole crop, never re-crop it further to fill the box. */
.carousel-slide.contain img{ object-fit:contain; background:var(--surface-2); }

.carousel-arrow{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(10,14,22,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 0 14px 1px var(--blue-soft);
  transition:box-shadow .2s ease, background .2s ease, border-color .2s ease, transform .15s ease;
}
.carousel-arrow:hover{ box-shadow:0 0 0 5px var(--blue-soft), 0 0 20px 2px var(--blue); border-color:var(--blue); background:rgba(10,14,22,.68); }
.carousel-arrow:active{ transform:translateY(-50%) scale(.94); }
.carousel-arrow.prev{ left:12px; }
.carousel-arrow.next{ right:12px; }
.carousel-arrow svg{ width:18px; height:18px; }
.carousel-arrow[hidden]{ display:none; }

/* ---------- contact / closing ---------- */
.closing{ text-align:center; border-top:1px solid var(--border); }
.closing h2{ font-size:clamp(1.9rem,4vw,2.7rem); max-width:16ch; margin:16px auto 0; }
.closing p{ color:var(--text-dim); margin:18px auto 40px; max-width:46ch; }
.contact-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.contact-chip{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; padding:13px 24px; border-radius:100px; border:1px solid var(--border); color:var(--text); text-decoration:none; transition:border-color .15s ease, color .15s ease; }
.contact-chip:hover{ border-color:var(--blue); color:var(--blue); }
.contact-chip svg{ width:16px; height:16px; }
.contact-details{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; margin-top:26px; }
.contact-details a{ font-family:var(--font-mono); font-size:13px; color:var(--text-dimmer); text-decoration:none; transition:color .15s ease; }
.contact-details a:hover{ color:var(--blue); }

footer{ padding:30px 0 60px; border-top:1px solid var(--border); }
footer .foot-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-family:var(--font-mono); font-size:11px; color:var(--text-dimmer); }
footer a{ color:var(--text-dimmer); text-decoration:none; }
footer a:hover{ color:var(--blue); }

/* ---------- CV page ---------- */
.cv-page{ padding:64px 0 96px; }
.cv-wrap{ max-width:980px; }
.cv-header{ display:flex; align-items:center; gap:28px; padding-bottom:36px; border-bottom:1px solid var(--border); margin-bottom:44px; flex-wrap:wrap; }
.cv-photo{ width:130px; height:170px; border-radius:14px; object-fit:cover; object-position:62% 38%; flex:none; }
.cv-header-text h1{ font-size:clamp(1.8rem,3vw,2.4rem); margin:10px 0 6px; }
.cv-role{ font-size:1.05rem; color:var(--blue-light); font-weight:600; margin-bottom:14px; }
.cv-contact-line{ display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:13px; color:var(--text-dim); align-items:center; }
.cv-contact-line a{ color:var(--text-dim); text-decoration:none; }
.cv-contact-line a:hover{ color:var(--blue); }
.cv-dot{ color:var(--text-dimmer); }

.cv-grid{ display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:start; }
@media (max-width:760px){ .cv-grid{ grid-template-columns:1fr; gap:36px; } }

.cv-side{ display:flex; flex-direction:column; gap:32px; }
.cv-block h2{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dimmer); font-weight:600; margin:0 0 12px; }
.cv-block p{ color:var(--text-dim); font-size:.92rem; margin:0; }

.cv-edu-degree{ font-weight:700; font-size:.95rem; margin-bottom:2px; }
.cv-edu-school{ color:var(--text-dim); font-size:.9rem; }
.cv-edu-years{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-dimmer); margin-top:4px; }

.cv-skills{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cv-skills li{ font-size:.88rem; color:var(--text); padding-left:14px; position:relative; }
.cv-skills li::before{ content:"•"; position:absolute; left:0; color:var(--text-dimmer); }

.cv-lang-row{ display:flex; justify-content:space-between; font-size:.9rem; padding:8px 0; border-top:1px solid var(--border); }
.cv-lang-row:first-of-type{ border-top:none; padding-top:0; }
.cv-lang-level{ color:var(--text-dimmer); font-family:var(--font-mono); font-size:.78rem; }

.cv-main h2{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin:0 0 24px; }
.cv-job{ padding:22px 0; border-top:1px solid var(--border); }
.cv-job:first-of-type{ border-top:none; padding-top:0; }
.cv-job-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.cv-job-title{ font-weight:700; font-size:1.05rem; }
.cv-job-org{ color:var(--blue-light); font-size:.92rem; font-weight:600; margin-top:2px; }
.cv-job-org-note{ color:var(--text-dimmer); font-weight:500; }
.cv-job-years{ font-family:var(--font-mono); font-size:.8rem; color:var(--text-dimmer); white-space:nowrap; }
.cv-job ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.cv-job li{ font-size:.92rem; color:var(--text-dim); padding-left:16px; position:relative; }
.cv-job li::before{ content:"•"; position:absolute; left:0; color:var(--text-dimmer); }

/* ---------- print (CV export) ---------- */
@media print {
  header, footer, .mobile-menu { display:none !important; }
  body{ background:#fff; }
  :root, :root[data-theme]{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F4F6; --border:#DDE1E7;
    --text:#10192B; --text-dim:#3F4959; --text-dimmer:#6B7385;
    --blue:#1F5FA8; --blue-light:#1F5FA8;
  }
  .cv-page{ padding:24px 0; }
  .cv-photo{ box-shadow:none; }
  a{ text-decoration:none; }
  .reveal{ animation:none !important; opacity:1 !important; transform:none !important; }
  /* A CSS grid's two tracks paginate independently, which interleaves the
     sidebar and the experience column across a page break. Stack them as
     plain document flow instead, so print pagination follows source order. */
  .cv-grid{ display:block; }
  .cv-side{ margin-bottom:28px; }
  .cv-block{ margin-bottom:20px; break-inside:avoid; }
  .cv-job{ break-inside:avoid; }
}