/* ==========================================================
   Salvatore Pianura — Portfolio
   "Blueprint" — an editorial, architectural dark system.

   Structure
     1.  Design tokens
     2.  Reset & base
     3.  Motion primitives (reveal states)
     4.  Loader / cursor / ambient
     5.  Header, navigation, fullscreen menu
     6.  Layout shell & section furniture
     7.  Hero
     8.  Profile + figures
     9.  Expertise explorer
     10. Work stack
     11. Experience timeline
     12. Architecture diagram
     13. Keynote principles
     14. Certifications marquee
     15. Contact
     16. Footer & utilities
     17. Responsive
     18. Reduced motion
     19. Print

   Accent policy: violet is a *signal*, never decoration. It marks what is
   active, current, connected or clickable — nothing else.
   ========================================================== */

/* ==========================================================
   1. Design tokens
   ========================================================== */

:root {
  /* --- Surfaces: near-black, cool charcoal ------------------ */
  --bg: #070708;
  --bg-raise: #0a0a0c;
  --surface-1: #101014;
  --surface-2: #15151a;
  --surface-glass: rgba(12, 12, 15, 0.72);

  /* --- Ink -------------------------------------------------- */
  --text: #f2f2f4;
  --text-dim: #c5c5cc;
  --muted: #90909b;
  --muted-2: #64646f;
  --muted-3: #44444d;

  /* --- Accent ----------------------------------------------- */
  --accent: #7c3aed;
  --accent-2: #8b5cf6;
  --accent-soft: #a78bfa;
  --accent-deep: #4c1d95;
  --accent-wash: rgba(124, 58, 237, 0.12);
  --accent-line: rgba(139, 92, 246, 0.34);
  --glow: rgba(124, 58, 237, 0.25);

  /* --- Hairlines -------------------------------------------- */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.22);

  /* --- Radii ------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------- */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 40px 110px rgba(0, 0, 0, 0.5);

  /* --- Space ------------------------------------------------ */
  --space-section: clamp(96px, 13vh, 168px);
  --space-block: clamp(38px, 5vw, 76px);
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1280px;
  --nav-h: 64px;

  /* --- Type ------------------------------------------------- */
  --font-display: "Clash Display", "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Satoshi", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* --- Motion (mirrors the MOTION object in js/motion.js) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.24s;
  --dur: 0.42s;
  --dur-slow: 0.9s;
}

/* ==========================================================
   2. Reset & base
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

/* Lenis drives scrolling itself; native smooth behaviour fights it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

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

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

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
svg { display: block; }

::selection { background: var(--accent); color: #fff; }

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

.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 16px; }

.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;
}

/* ==========================================================
   3. Motion primitives
   Every hidden-by-default state lives under html.js-motion, so the page
   is fully visible with JS disabled, with GSAP unavailable, or with
   reduced motion requested.
   ========================================================== */

html.js-motion [data-reveal] {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    clip-path var(--dur-slow) var(--ease-out);
}

html.js-motion [data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
html.js-motion [data-reveal="fade"].is-in { opacity: 1; transform: none; }

html.js-motion [data-reveal="mask"] {
  opacity: 0;
  clip-path: inset(0 0 102% 0);
  transform: translate3d(0, 14px, 0);
}
html.js-motion [data-reveal="mask"].is-in {
  opacity: 1;
  clip-path: inset(0 0 -12% 0);
  transform: none;
}

html.js-motion [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js-motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
html.js-motion [data-reveal="stagger"].is-in > *:nth-child(2) { transition-delay: 0.06s; }
html.js-motion [data-reveal="stagger"].is-in > *:nth-child(3) { transition-delay: 0.12s; }
html.js-motion [data-reveal="stagger"].is-in > *:nth-child(4) { transition-delay: 0.18s; }
html.js-motion [data-reveal="stagger"].is-in > *:nth-child(n+5) { transition-delay: 0.24s; }

/* Hero entrance: elements start displaced, motion.js plays them in. */
html.js-motion [data-hero] { opacity: 0; }
html.js-motion .h1-line > span { transform: translate3d(0, 105%, 0); }

/* ==========================================================
   4. Loader / cursor / ambient
   ========================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  background: var(--bg);
}
html.js .loader { display: grid; }
html:not(.js-motion) .loader { display: none; }

.loader-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.loader-sp {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--text);
}

.loader-rule {
  display: block;
  width: 120px;
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}
.loader-rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left;
}

.loader.is-done { pointer-events: none; }

/* --- Custom cursor ---------------------------------------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 250;
  pointer-events: none;
  display: none;
  mix-blend-mode: difference;
}
body.has-cursor .cursor { display: block; }
body.has-cursor,
body.has-cursor a,
body.has-cursor button { cursor: none; }

.cursor-dot,
.cursor-ring {
  position: absolute;
  top: 0; left: 0;
  border-radius: var(--r-pill);
  will-change: transform;
}

.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #fff;
}

.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
  transition: width var(--dur) var(--ease-out),
              height var(--dur) var(--ease-out),
              margin var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.cursor-label {
  font-family: var(--font-text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.cursor.is-link .cursor-ring {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-color: rgba(255, 255, 255, 0.9);
}
.cursor.is-label .cursor-ring {
  width: 82px; height: 82px;
  margin: -41px 0 0 -41px;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
}
.cursor.is-label .cursor-label { opacity: 1; transform: scale(1); color: #000; }
.cursor.is-label .cursor-dot { opacity: 0; }

/* --- Ambient background ----------------------------------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.ambient-field {
  position: absolute;
  width: 52vw;
  height: 52vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.5;
}
.ambient-field.one {
  top: -22vw; left: -14vw;
  background: radial-gradient(circle, rgba(76, 29, 149, 0.5), transparent 68%);
}
.ambient-field.two {
  bottom: -26vw; right: -16vw;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.28), transparent 68%);
}

/* Fine noise: kills banding in the large dark gradients. */
.ambient-grain {
  position: absolute;
  inset: -50%;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ==========================================================
   5. Header, navigation, fullscreen menu
   ========================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform var(--dur) var(--ease-out);
}

.nav {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 16px auto 0;
  height: var(--nav-h);
  padding: 0 8px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  transition: height var(--dur) var(--ease-out),
              margin var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

/* Condensed state after the hero */
.site-header.is-scrolled .nav {
  height: 54px;
  margin-top: 10px;
  background: rgba(9, 9, 11, 0.86);
  border-color: var(--line-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-soft);
  background: var(--accent-wash);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.brand:hover .brand-mark { background: rgba(124, 58, 237, 0.24); color: #fff; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
}

.nav-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: 30px;
  width: 0;
  margin-top: -15px;
  border-radius: var(--r-pill);
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.3);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.nav-links.has-active .nav-indicator { opacity: 1; }

.nav-links > a {
  position: relative;
  z-index: 1;
  padding: 8px 13px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}
.nav-links > a:hover { color: var(--text); }
.nav-links > a.active { color: var(--text); }

.nav-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-counter {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.nav-counter #nav-counter-current { color: var(--accent-soft); }
.nav-counter i { font-style: normal; opacity: 0.45; }

.lang-toggle {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

.lang-btn {
  min-width: 32px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: #fff; background: rgba(124, 58, 237, 0.85); }

.nav-cta {
  position: relative;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.28);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.nav-cta:hover { background: var(--accent-2); box-shadow: 0 10px 30px rgba(124, 58, 237, 0.44); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 24px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* --- Scroll progress hairline ------------------------------ */

.nav-progress {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: transparent;
}
.nav-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  box-shadow: 0 0 12px var(--glow);
}

/* --- Fullscreen menu -------------------------------------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg-raise);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  display: grid;
  align-items: center;
  overflow-y: auto;
}
body.menu-open .menu-overlay {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur) var(--ease-out), visibility 0s;
}

.menu-inner {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: calc(var(--nav-h) + 48px) 0 48px;
}

.menu-list { display: flex; flex-direction: column; }

.menu-list a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.menu-list li:last-child a { border-bottom: 1px solid var(--line); }
.menu-list a:hover, .menu-list a:focus-visible { color: var(--accent-soft); padding-left: 10px; }

.menu-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted-3);
  letter-spacing: 0.06em;
}

.menu-foot {
  margin-top: 34px;
  font-size: 0.8rem;
  color: var(--muted-2);
}

/* ==========================================================
   6. Layout shell & section furniture
   ========================================================== */

.shell {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--space-section);
  scroll-margin-top: calc(var(--nav-h) + 30px);
}

.sec-head { margin-bottom: var(--space-block); }

.sec-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.sec-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.sec-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
  padding: 4px 8px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  background: var(--accent-wash);
}

.sec-eyebrow {
  position: relative;
  padding-left: 42px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 30px; height: 1px;
  background: var(--line-3);
}

.sec-title {
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 17ch;
}

.sec-lede {
  color: var(--muted);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  max-width: 46ch;
  padding-bottom: 6px;
}

/* --- Shared atoms ----------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:hover { border-color: var(--accent-line); background: rgba(124, 58, 237, 0.1); }

.btn.primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 34px rgba(124, 58, 237, 0.3);
}
.btn.primary:hover { background: var(--accent-2); box-shadow: 0 14px 40px rgba(124, 58, 237, 0.44); }

.btn.ghost {
  border-color: transparent;
  background: none;
  color: var(--muted);
  padding-inline: 6px;
}
.btn.ghost:hover { background: none; color: var(--text); }

/* ==========================================================
   7. Hero
   ========================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 56px);
  padding-bottom: 28px;
  overflow: hidden;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

/* Sinks the canvas grid behind the copy so text contrast never suffers. */
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% 30%, rgba(7, 7, 8, 0.92) 0%, rgba(7, 7, 8, 0.45) 45%, transparent 72%),
    linear-gradient(to bottom, transparent 55%, var(--bg) 98%);
}

.hero-shell {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.hero-copy { min-width: 0; }

.hero-role {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-role i { font-style: normal; color: var(--muted-3); }

.hero-role-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.6);
  animation: beacon 3.4s var(--ease-in-out) infinite;
}

@keyframes beacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0); }
}

.hero-title {
  font-size: clamp(3rem, 8.4vw, 7.4rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin-bottom: 34px;
}

.h1-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.02em;
  will-change: transform;
}
.h1-line > span { display: block; }

/* The 3rd line is set in the same size but reads denser than the plain
   lines — a touch of tracking back keeps the word spaces legible. */
.h1-line.accent { letter-spacing: -0.035em; }

.h1-line.accent > span {
  background: linear-gradient(96deg, var(--accent-soft) 0%, var(--accent) 58%, #6d28d9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .h1-line.accent > span { color: var(--accent-2); }
}

.hero-subtitle {
  max-width: 54ch;
  color: var(--text-dim);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.62;
}

.hero-subtitle-secondary {
  max-width: 54ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* --- Portrait --------------------------------------------- */

.portrait {
  position: relative;
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 440px;
}

.portrait-frame {
  position: relative;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(21, 21, 26, 0.6), rgba(10, 10, 12, 0.3));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Architectural corner marks */
.portrait-tick {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent-line);
}
.portrait-tick.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.portrait-tick.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.portrait-tick.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.portrait-tick.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.portrait-mask {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  /* Contains the blend layers below to this box. */
  isolation: isolate;
  /* Revealed by motion.js; a plain clip so nothing is ever permanently hidden. */
}
html.js-motion .portrait-mask { clip-path: inset(0 0 100% 0); }

.portrait-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  will-change: transform;
}

/*
  The portrait is a studio shot on a near-white backdrop, which would sit in
  this page like a lightbox. This is a duotone vignette: a multiply layer that
  is white (a no-op) over the face and graduates to violet then deep indigo
  toward the edges. The subject stays natural and recognisable; only the
  backdrop is graded into the palette.
*/
.portrait-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    118% 70% at 50% 27%,
    #ffffff 0%,
    #e8e4f2 24%,
    #a49bbe 50%,
    #4d4270 76%,
    #241d3d 100%
  );
  mix-blend-mode: multiply;
  opacity: 0.88;
}

/* Grounds the frame into the page and carries the eye to the caption. */
.portrait-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 7, 8, 0.6) 0%, rgba(7, 7, 8, 0.1) 24%, transparent 46%);
}

/* Pointer-tracked edge light; --px/--py are written by motion.js. */
.portrait-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 260px at var(--px, 50%) var(--py, 40%),
    rgba(167, 139, 250, 0.22),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  mix-blend-mode: screen;
}
.portrait:hover .portrait-sheen { opacity: 1; }

.portrait-caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 16px;
  padding-left: 2px;
}
.portrait-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.portrait-role {
  font-size: 0.78rem;
  color: var(--muted-2);
}

/* --- Hero foot -------------------------------------------- */

.hero-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
}
.scroll-cue:hover { color: var(--text); }

.scroll-cue-rail {
  display: block;
  width: 54px; height: 1px;
  background: var(--line-2);
  overflow: hidden;
}
.scroll-cue-rail i {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent-2);
  animation: cueSlide 2.6s var(--ease-in-out) infinite;
}
@keyframes cueSlide {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(250%); }
}

/* ==========================================================
   8. Profile + figures
   ========================================================== */

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.profile-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 60px);
}

.profile-statement {
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.pillars {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pillar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted-2);
  transition: color 0.55s var(--ease-out);
}
.pillar:last-child { border-bottom: 1px solid var(--line); }

/* The rule occupies a fixed slot and grows *within* it, so an active
   pillar can never strike through its own label. */
.pillar-bar {
  display: block;
  width: 64px; height: 1px;
  flex-shrink: 0;
  background: var(--line-3);
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out), background 0.55s var(--ease-out);
}

.pillar.is-on { color: var(--text); }
.pillar.is-on .pillar-bar { background: var(--accent-2); transform: scaleX(1); }

.profile-copy { min-width: 0; }

.profile-copy p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 60ch;
}
.profile-copy p + p { margin-top: 22px; }

.profile-copy .lede {
  color: var(--text-dim);
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  letter-spacing: -0.008em;
}

/* --- Trajectory rail -------------------------------------- */

.path { margin-top: var(--space-block); }

.path-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 20px;
}

.path-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.path-rail::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  top: 4px;
  height: 1px;
  background: var(--line);
}
/* Drawn progressively by motion.js via --path-progress. */
.path-rail::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  top: 4px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
  transform: scaleX(var(--path-progress, 0));
  transform-origin: left;
  transition: transform 0.1s linear;
}

.path-step {
  position: relative;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.path-dot {
  position: absolute;
  top: 0; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  transform: translateY(-0px);
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.path-step.is-on .path-dot {
  background: var(--accent);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
}

.path-idx {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted-3);
  letter-spacing: 0.06em;
}
.path-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.45s var(--ease-out);
}
.path-step.is-on .path-name { color: var(--text-dim); }
.path-step.current .path-name { color: var(--text); font-weight: 700; }
.path-step.current.is-on .path-idx { color: var(--accent-soft); }

/* --- Figures ---------------------------------------------- */

.figures {
  margin-top: var(--space-section);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.figure {
  padding: 34px clamp(14px, 2vw, 30px) 6px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.figure:first-child { padding-left: 0; }
.figure:last-child { border-right: 0; padding-right: 0; }

.figure-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 14px;
}

.figure-value {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, #ffffff 8%, #b9a6ee 62%, var(--accent) 108%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .figure-value { color: var(--text); -webkit-text-fill-color: currentColor; }
}

.figure-value.is-text {
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  padding-top: 0.35em;
}

.figure-label {
  margin-top: 20px;
  color: var(--muted-2);
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 30ch;
}

/* ==========================================================
   9. Expertise explorer
   ========================================================== */

.explorer { border-top: 1px solid var(--line); }

.cap {
  position: relative;
  border-bottom: 1px solid var(--line);
  transition: background 0.6s var(--ease-out);
}

/* Active row picks up a faint violet wash from the left. */
.cap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(124, 58, 237, 0.09), rgba(124, 58, 237, 0.01) 46%, transparent 72%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.cap.is-active::before { opacity: 1; }

.cap-head { margin: 0; font-weight: inherit; }

.cap-trigger {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  width: 100%;
  padding: clamp(20px, 2.6vw, 32px) 0;
  text-align: left;
}

.cap-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted-3);
  transition: color 0.5s var(--ease-out);
}
.cap.is-active .cap-num { color: var(--accent-soft); }

.cap-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.7rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--muted);
  transition: color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transform-origin: left center;
}
.cap.is-active .cap-name { color: var(--text); }

.cap-sign {
  position: relative;
  width: 15px; height: 15px;
  flex-shrink: 0;
}
.cap-sign::before,
.cap-sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  margin-top: -0.5px;
  background: var(--muted-2);
  transition: transform 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.cap-sign::after { transform: rotate(90deg); }
.cap.is-active .cap-sign::before,
.cap.is-active .cap-sign::after { background: var(--accent-soft); }
.cap.is-active .cap-sign::after { transform: rotate(0deg); }

/* grid-template-rows 0fr → 1fr animates height without JS measurement. */
.cap-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.62s var(--ease-out);
}
.cap.is-active .cap-body { grid-template-rows: 1fr; }

.cap-body-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}

.cap-text {
  padding: 4px 0 clamp(28px, 3vw, 40px);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.5s var(--ease-out) 0.06s, transform 0.5s var(--ease-out) 0.06s;
  max-width: 62ch;
}
.cap.is-active .cap-text { opacity: 1; transform: none; }

.cap-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 10px;
}

.cap-desc {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.68;
  margin-bottom: 20px;
}

.cap-glyph {
  justify-self: end;
  width: 130px;
  color: var(--accent-soft);
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.94);
  transition: opacity 0.62s var(--ease-out) 0.1s, transform 0.62s var(--ease-out) 0.1s;
  padding-bottom: clamp(28px, 3vw, 40px);
}
.cap.is-active .cap-glyph { opacity: 0.85; transform: none; }
.cap-glyph .glyph-hot { stroke: var(--accent-2); }

/* ==========================================================
   10. Work stack
   ========================================================== */

.work-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6vh;
}

.work-card {
  --recede: 0;
  position: sticky;
  top: calc(var(--nav-h) + 30px + var(--i) * 14px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 100% at 84% 0%, rgba(76, 29, 149, 0.16), transparent 58%),
    linear-gradient(158deg, var(--surface-2) 0%, var(--bg-raise) 76%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  will-change: transform;
}

/* A card sinking behind the next one is dimmed by this overlay rather than
   by its own opacity — a translucent card would let the one underneath
   show straight through it. */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(6, 6, 8, 0.74);
  opacity: var(--recede, 0);
}

.work-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.6vw, 54px);
}

/* Alternate the composition so the stack never reads as one repeated block. */
.work-card:nth-child(even) .work-card-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.work-card:nth-child(even) .work-main { order: 2; }
.work-card:nth-child(even) .work-visual { order: 1; }
.work-card:nth-child(even) {
  background:
    radial-gradient(120% 100% at 16% 0%, rgba(76, 29, 149, 0.16), transparent 58%),
    linear-gradient(202deg, var(--surface-2) 0%, var(--bg-raise) 76%);
}

.work-main { min-width: 0; }

.work-index {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.work-index-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(167, 139, 250, 0.42);
  will-change: transform;
}
.work-index-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.work-title {
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  max-width: 18ch;
  margin-bottom: 14px;
}

.work-role {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent-soft);
}
.work-role-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.work-fields {
  margin-top: 26px;
  display: grid;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.work-field-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 7px;
}
.work-field p:not(.work-field-label) {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 56ch;
}

.work-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  color: var(--accent-soft);
}
.work-visual::before {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 68%);
  filter: blur(34px);
}
.work-svg {
  position: relative;
  width: 100%;
  max-width: 330px;
  height: auto;
}
.work-svg .wd { stroke: currentColor; }
.work-svg .work-pulse { fill: var(--accent-soft); opacity: 0; }
.work-svg .work-links { stroke: var(--accent-2); }

/* ==========================================================
   11. Experience timeline
   ========================================================== */

.timeline { position: relative; padding-left: clamp(28px, 4vw, 56px); }

.timeline-track {
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.timeline-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent-soft), var(--accent), var(--accent-deep));
  transform: scaleY(var(--tl-progress, 0));
  transform-origin: top;
  box-shadow: 0 0 10px var(--glow);
}

.timeline-items { display: flex; flex-direction: column; }

.tl-item {
  position: relative;
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.tl-item:first-child { border-top: 0; padding-top: 0; }

.tl-node {
  position: absolute;
  left: calc(-1 * clamp(28px, 4vw, 56px));
  top: clamp(28px, 3vw, 42px);
  width: 9px; height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-3);
  transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.tl-item:first-child .tl-node { top: 4px; }
.tl-item.is-on .tl-node {
  background: var(--accent);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.12);
}

.tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.tl-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.tl-duration {
  color: var(--muted-3);
  text-transform: none;
  letter-spacing: 0.02em;
}

.tl-role {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--muted);
  transition: color 0.5s var(--ease-out);
}
.tl-item.is-on .tl-role { color: var(--text); }

.tl-company {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
}

.tl-bullets {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  max-width: 68ch;
}
.tl-bullets li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.tl-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 8px; height: 1px;
  background: var(--muted-3);
}

/* Present role carries the extra weight. */
.tl-item.is-current .tl-company { color: var(--text); }
.tl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 9px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
  vertical-align: middle;
}

/* ==========================================================
   12. Architecture diagram
   ========================================================== */

.arch {
  position: relative;
  padding: clamp(22px, 3vw, 44px) 0;
}

.arch-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.arch-links path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
}
.arch-links path.arch-flow {
  stroke: var(--accent-2);
  stroke-width: 1.25;
  opacity: 0.9;
}

.arch-band {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-3);
  text-align: center;
  margin-bottom: 14px;
  transition: color 0.6s var(--ease-out);
}
.arch-band.is-on { color: var(--accent-soft); }
.arch-row + .arch-band { margin-top: 58px; }

.arch-row {
  position: relative;
  display: grid;
  gap: clamp(12px, 2vw, 22px);
  justify-items: center;
}
.arch-row-3 { grid-template-columns: repeat(3, 1fr); }
.arch-row-1 { grid-template-columns: 1fr; }

.arch-node {
  position: relative;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(16, 16, 20, 0.86);
  transition: border-color 0.6s var(--ease-out), background 0.6s var(--ease-out), transform 0.4s var(--ease-out);
  will-change: transform;
}
.arch-node.is-on {
  border-color: var(--accent-line);
  background: rgba(28, 20, 46, 0.9);
}
.arch-node:hover { transform: translateY(-3px); }

.arch-node-tag {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--muted-3);
  transition: color 0.6s var(--ease-out);
}
.arch-node.is-on .arch-node-tag { color: var(--accent-soft); }

.arch-node-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  padding-right: 26px;
}

.arch-node-sub {
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted-2);
}

.arch-node-wide { max-width: 640px; }
.arch-node-out { max-width: 480px; }

.arch-node-hub {
  max-width: 520px;
  padding: 26px 28px;
  border-color: rgba(139, 92, 246, 0.28);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(124, 58, 237, 0.2), transparent 62%),
    rgba(18, 14, 30, 0.92);
}
.arch-node-hub.is-on {
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 20px 70px rgba(124, 58, 237, 0.22);
}
.arch-node-hub .arch-node-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.028em;
}

.principles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-block);
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.chip {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 0.79rem;
  font-weight: 500;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.chip:hover { color: var(--text-dim); border-color: var(--accent-line); }

/* ==========================================================
   13. Keynote principles
   ========================================================== */

.keynote-section { padding-bottom: calc(var(--space-section) * 0.6); }

.keynote-stage {
  display: grid;
  gap: 26px;
}

.keynote-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.keynote-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(167, 139, 250, 0.45);
}

.keynote-copy h3 {
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-bottom: 14px;
}
.keynote-copy p {
  color: var(--muted);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.66;
  max-width: 52ch;
}

.keynote-rail { display: none; }

/* Pinned presentation — desktop only, and only when motion is on.
   Below the breakpoint the four principles stay a plain, scrolling list. */
@media (min-width: 901px) {
  html.js-motion .keynote {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  /* Tall enough for the longest of the four principles, and no taller —
     the copy and the progress rail should read as one composition. */
  html.js-motion .keynote-stage {
    position: relative;
    display: block;
    min-height: 30vh;
    width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  }
  html.js-motion .keynote-item {
    position: absolute;
    inset: 0 0 auto 0;
    border-top: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 34px, 0) scale(0.985);
    transition:
      opacity 0.5s var(--ease-out),
      transform 0.7s var(--ease-out),
      visibility 0s linear 0.7s;
    will-change: transform, opacity;
  }
  html.js-motion .keynote-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.5s var(--ease-out),
      transform 0.7s var(--ease-out),
      visibility 0s;
  }

  html.js-motion .keynote-rail {
    position: absolute;
    left: 0;
    bottom: -10px;
    display: flex;
    gap: 6px;
  }
  html.js-motion .keynote-rail span {
    display: block;
    width: 34px; height: 2px;
    border-radius: 2px;
    background: var(--line-2);
    transition: background 0.5s var(--ease-out), width 0.5s var(--ease-out);
  }
  html.js-motion .keynote-rail span.is-on { background: var(--accent-2); width: 54px; }
}

/* ==========================================================
   14. Certifications marquee
   ========================================================== */

.marquee {
  display: none;
  position: relative;
  margin-top: 8px;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
html.js-motion .marquee { display: block; }

.marquee-row {
  display: flex;
  overflow: hidden;
  padding: 7px 0;
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding-right: 12px;
  will-change: transform;
}

.cert-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.cert-pill:hover { border-color: var(--accent-line); background: rgba(124, 58, 237, 0.08); }

.cert-pill-code {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-soft);
  padding: 3px 7px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
}
.cert-pill-name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-dim);
}

/* Static list — the no-JS, reduced-motion and print representation.
   With the marquee running it stays in the accessibility tree (the
   marquee itself is aria-hidden), so the certifications are always
   announced exactly once. */
.cert-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
html.js-motion .cert-list {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cert-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ==========================================================
   15. Contact
   ========================================================== */

.contact {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--space-section) * 0.8);
}

.contact-glow {
  position: absolute;
  left: 50%;
  bottom: -46vw;
  width: 108vw;
  height: 92vw;
  transform: translateX(-50%) scale(var(--glow-scale, 0.7));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, rgba(76, 29, 149, 0.14) 38%, transparent 68%);
  filter: blur(70px);
  opacity: var(--glow-opacity, 0);
  pointer-events: none;
  transition: opacity 0.2s linear;
}

.contact-title {
  margin: 8px 0 var(--space-block);
  font-size: clamp(2.9rem, 12.5vw, 11rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.c-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.c-line > span { display: block; }

.c-line.soft {
  text-transform: none;
  letter-spacing: -0.04em;
}
.c-line.soft > span {
  background: linear-gradient(94deg, var(--accent-soft), var(--accent) 68%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .c-line.soft > span { color: var(--accent-2); }
}
html.js-motion .c-line > span { transform: translate3d(0, 105%, 0); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.contact-p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 44ch;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.contact-links a {
  position: relative;
  padding: 14px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  will-change: transform;
}
.contact-links a:hover { border-color: var(--accent-line); background: rgba(124, 58, 237, 0.1); }

.contact-links a.is-primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 34px rgba(124, 58, 237, 0.32);
}
.contact-links a.is-primary:hover { background: var(--accent-2); }

.contact-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 18px;
}

.contact-closing-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin-bottom: 16px;
}

/* ==========================================================
   16. Footer & utilities
   ========================================================== */

.footer {
  padding: 30px 0 40px;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted-3);
}
.footer-mid { color: var(--muted-2); }

.print-btn {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.print-btn:hover { border-color: var(--accent-line); background: rgba(124, 58, 237, 0.14); }

/* ==========================================================
   17. Responsive
   ========================================================== */

@media (max-width: 1320px) {
  .nav-links > a { padding: 8px 9px; font-size: 0.78rem; }
  .nav-counter { display: none; }
}

/* Nine links plus brand, language toggle and CTA stop fitting here —
   hand over to the fullscreen menu before anything can be truncated. */
@media (max-width: 1160px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .hero-shell { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr); }
  .cap-body-inner { grid-template-columns: minmax(0, 1fr); }
  .cap-glyph { display: none; }
  .work-card-inner,
  .work-card:nth-child(even) .work-card-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .work-card:nth-child(even) .work-main { order: 1; }
  .work-card:nth-child(even) .work-visual { order: 2; }
  .work-visual { max-width: 300px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .sec-head-split { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .sec-lede { padding-bottom: 0; }
  .profile-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .profile-sticky { position: static; }
  .pillars { margin-top: 26px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure { border-bottom: 1px solid var(--line); padding-left: clamp(14px, 2vw, 30px); }
  .figure:nth-child(odd) { padding-left: 0; }
  .figure:nth-child(even) { border-right: 0; }
  .figure:nth-last-child(-n+2) { border-bottom: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .arch-node-hub { max-width: none; }
  .arch-node-wide, .arch-node-out { max-width: none; }
}

@media (max-width: 720px) {
  :root { --nav-h: 56px; }

  .hero {
    padding-top: calc(var(--nav-h) + 26px);
    min-height: 0;
    padding-bottom: 44px;
  }
  /* Copy leads on small screens: the headline must not start below the
     fold, and it is the LCP element. */
  .hero-shell { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
  .hero-role { font-size: 0.66rem; letter-spacing: 0.13em; margin-bottom: 20px; }
  .hero-title { font-size: clamp(2.9rem, 15vw, 4.4rem); margin-bottom: 24px; }
  .portrait { justify-self: stretch; max-width: none; }
  .portrait-mask { aspect-ratio: 5 / 4; }
  .portrait-mask img { object-position: center 15%; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }
  .hero-foot { flex-wrap: wrap; gap: 12px; font-size: 0.62rem; }
  .hero-foot-year { display: none; }

  .brand-name { display: none; }
  /* "Contatti" already lives in the menu — drop the duplicate. */
  .nav-cta { display: none; }
  /* The contact section carries a print link, so the floating button is
     redundant here and only covers content. */
  .print-btn { display: none; }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure { border-right: 0; padding-left: 0 !important; padding-right: 0; }
  .figure-label { max-width: none; }

  .path-rail { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .path-rail::before, .path-rail::after { display: none; }
  .path-step { padding-top: 0; padding-left: 22px; }
  .path-dot { top: 5px; }

  .arch-row-3 { grid-template-columns: minmax(0, 1fr); }
  .arch-row + .arch-band { margin-top: 34px; }
  .work-card { border-radius: var(--r-lg); }
  .work-fields { gap: 16px; }
  .timeline { padding-left: 24px; }
  .tl-node { left: -24px; }
  .contact-title { margin-bottom: 34px; }
  .contact-links a { flex: 1 1 auto; text-align: center; }
  .footer-inner { justify-content: flex-start; gap: 6px; flex-direction: column; align-items: flex-start; }
  .print-btn { right: 14px; bottom: 14px; padding: 10px 15px; font-size: 0.75rem; }
}

/* Mobile: the sticky stack becomes a plain sequence — cheaper and
   far more predictable on touch. */
@media (max-width: 900px) {
  .work-card { position: static; }
  .work-stack { gap: 20px; }
}

@media (hover: none) {
  .cursor { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}

/* ==========================================================
   18. Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .loader { display: none !important; }
  .cursor { display: none !important; }
  .marquee { display: none !important; }
  .cert-list { display: grid !important; }

  /* Every capability panel is simply open. */
  .cap-body { grid-template-rows: 1fr !important; }
  .cap-text, .cap-glyph { opacity: 1 !important; transform: none !important; }

  .work-card { position: static !important; }
  .profile-sticky { position: static !important; }
  .path-rail::after { transform: scaleX(1) !important; }
  .timeline-track i { transform: scaleY(1) !important; }
  .contact-glow { opacity: 0.5 !important; transform: translateX(-50%) scale(1) !important; }
  .hero-canvas { display: none; }
}

/* ==========================================================
   19. Print / PDF
   The page becomes a compact two-to-three page CV. Two rules drive
   everything: never depend on background graphics (browsers disable
   them by default), and only individual cards get break-inside:avoid.
   ========================================================== */

@media print {
  @page { size: A4; margin: 11mm 12mm; }

  html { font-size: 10pt; scroll-behavior: auto; }

  body {
    background: #fff !important;
    color: #16161a;
    overflow: visible;
  }

  /* Everything that only exists for the screen experience. */
  .loader, .cursor, .ambient, .site-header, .menu-overlay, .print-btn,
  .hero-canvas, .hero-veil, .scroll-cue, .nav-progress, .marquee,
  .contact-glow, .keynote-rail, .work-visual, .cap-glyph, .arch-links,
  .skip-link, .hero-actions, .portrait-tick, .portrait-sheen,
  .hero-role-dot, .cap-sign, .timeline-track, .path-rail::before,
  .path-rail::after {
    display: none !important;
  }

  .shell { width: 100%; max-width: none; }

  /*
    Motion states must never survive into paper. This has to cover every
    scroll-reveal target, not just the declarative [data-reveal] ones:
    GSAP writes inline opacity/transform on its `from()` targets as soon as
    the tween is created, so any section the visitor never scrolled past
    would otherwise print as an empty box.
  */
  [data-reveal], [data-hero], .h1-line > span, .c-line > span,
  .cap-text, .cap-glyph, .keynote-item,
  .work-card, .work-title, .work-role, .work-card .tags, .work-fields,
  .work-index-num, .tl-item, .figure, .figure-value, .chip,
  #contact-links a, .principles-row > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    visibility: visible !important;
    filter: none !important;
  }

  /* The stack recede overlay must not tint anything on paper. */
  .work-card::after { display: none !important; }

  /*
    ScrollTrigger wraps a pinned section in a .pin-spacer sized to the whole
    pin distance (here ~2.6 viewports). Left alone that inline height prints
    as several blank pages after the content, so collapse the spacer and
    un-pin whatever is inside it.
  */
  .pin-spacer {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: auto !important;
  }
  .pin-spacer > * {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  .section {
    padding-block: 0;
    margin-top: 6mm;
    break-inside: auto;
  }

  h1, h2, h3, h4 { color: #0d0d10; break-after: avoid; }

  /* Gradient text is invisible with background graphics off. */
  .h1-line.accent > span, .c-line.soft > span, .figure-value {
    background: none !important;
    -webkit-text-fill-color: currentColor;
    color: #6d28d9 !important;
  }

  /* ---- Hero: a letterhead, not a splash ------------------- */

  .hero {
    min-height: 0;
    display: block;
    padding: 0;
    margin-bottom: 6mm;
    break-inside: avoid;
    break-after: avoid;
  }
  .hero-shell {
    display: grid;
    grid-template-columns: 1fr 32mm;
    gap: 7mm;
    align-items: start;
  }
  .hero-role { margin-bottom: 3pt; font-size: 8pt; color: #6a6a72 !important; }
  .hero-title { font-size: 24pt; line-height: 1.02; margin-bottom: 4mm; letter-spacing: -0.03em; }
  .h1-line { display: inline; overflow: visible; }
  .h1-line > span { display: inline; }
  .h1-line::after { content: " "; }
  .hero-subtitle { font-size: 9.5pt; line-height: 1.45; max-width: none; }
  .hero-subtitle-secondary { font-size: 9pt; margin-top: 3pt; max-width: none; }
  .hero-foot { display: none; }

  .portrait { max-width: none; }
  .portrait-frame { padding: 0; border: 0; background: none !important; }
  .portrait-mask {
    aspect-ratio: 4/5;
    border: 1px solid #ccccd2;
    border-radius: 2mm;
    /* The duotone grade is a blend layer over a background gradient, and
       background graphics are off on paper — drop it entirely rather than
       leave the rasteriser blending against nothing. */
    isolation: auto;
    clip-path: none !important;
  }
  .portrait-mask::before,
  .portrait-mask::after { display: none !important; }
  .portrait-caption { margin-top: 2mm; }
  .portrait-name { font-size: 9.5pt; }
  .portrait-role { font-size: 7.5pt; color: #6a6a72 !important; }

  /* ---- Section furniture ---------------------------------- */

  .sec-head, .sec-head-split {
    display: block;
    margin-bottom: 3mm;
    break-inside: avoid;
    break-after: avoid;
  }
  .sec-meta { margin-bottom: 2mm; gap: 8px; }
  .sec-num {
    border-color: #c9c9d0 !important;
    background: none !important;
    color: #6d28d9 !important;
    font-size: 7pt;
  }
  .sec-eyebrow { color: #6a6a72 !important; font-size: 7.5pt; padding-left: 0; }
  .sec-eyebrow::before { display: none; }
  .sec-title { font-size: 15pt; line-height: 1.1; max-width: none; }
  .sec-lede { font-size: 9pt; max-width: none; margin-top: 2pt; color: #45454d !important; }

  .tag, .chip {
    padding: 2pt 5pt;
    font-size: 7pt;
    border-color: #d5d5db !important;
    background: none !important;
    color: #45454d !important;
    border-radius: 2pt;
  }
  .tags { gap: 3pt; }

  /* ---- Profile -------------------------------------------- */

  .profile-layout { display: grid; grid-template-columns: 52mm 1fr; gap: 7mm; }
  .profile-sticky { position: static; }
  .profile-statement { font-size: 13pt; line-height: 1.12; max-width: none; }
  .pillars { margin-top: 4mm; }
  .pillar {
    padding: 3pt 0;
    font-size: 9pt;
    color: #16161a !important;
    border-color: #e2e2e7 !important;
  }
  .pillar-bar { background: #6d28d9 !important; }
  .profile-copy p { font-size: 9.5pt; line-height: 1.5; max-width: none; color: #45454d !important; }
  .profile-copy p + p { margin-top: 2.5mm; }
  .profile-copy .lede { font-size: 10.5pt; color: #16161a !important; }

  .path { margin-top: 5mm; break-inside: avoid; }
  .path-label { font-size: 7.5pt; color: #6a6a72 !important; margin-bottom: 2mm; }
  .path-rail { grid-template-columns: repeat(4, 1fr); gap: 3mm; }
  .path-step { padding-top: 0; }
  .path-dot { display: none; }
  .path-idx { color: #9a9aa2 !important; font-size: 7pt; }
  .path-name { font-size: 8.5pt; color: #45454d !important; }
  .path-step.current .path-name { color: #6d28d9 !important; }

  .figures {
    margin-top: 5mm;
    grid-template-columns: repeat(4, 1fr);
    border-color: #e2e2e7 !important;
    break-inside: avoid;
  }
  .figure { padding: 3mm 3mm 0; border-color: #e2e2e7 !important; }
  .figure-kicker { font-size: 7pt; color: #9a9aa2 !important; margin-bottom: 1.5mm; }
  .figure-value { font-size: 20pt; line-height: 1; }
  .figure-value.is-text { font-size: 10pt; padding-top: 0; }
  .figure-label { font-size: 7.5pt; margin-top: 2mm; line-height: 1.35; color: #45454d !important; }

  /* ---- Expertise: every panel open ------------------------ */

  .explorer { border-color: #e2e2e7 !important; }
  .cap { border-color: #e2e2e7 !important; break-inside: avoid; }
  .cap::before { display: none; }
  .cap-trigger { display: block; padding: 3mm 0 1mm; }
  .cap-num { font-size: 7pt; color: #6d28d9 !important; }
  .cap-name { font-size: 11pt; color: #0d0d10 !important; display: inline; margin-left: 3mm; }
  .cap-body { display: block; }
  .cap-body-inner { display: block; overflow: visible; }
  .cap-text { padding: 0 0 3mm; max-width: none; }
  .cap-title { font-size: 9.5pt; margin-bottom: 1mm; }
  .cap-desc { font-size: 8.5pt; line-height: 1.4; margin-bottom: 2mm; color: #45454d !important; }

  /* ---- Work ----------------------------------------------- */

  .work-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; }
  .work-card {
    position: static !important;
    border-color: #d8d8de !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 2mm;
    break-inside: avoid;
  }
  .work-card-inner,
  .work-card:nth-child(even) .work-card-inner { display: block; padding: 4mm; }
  .work-index { margin-bottom: 2mm; }
  .work-index-num {
    font-size: 14pt;
    color: #6d28d9 !important;
    -webkit-text-stroke: 0;
  }
  .work-index-label { font-size: 6.5pt; color: #9a9aa2 !important; }
  .work-title { font-size: 11pt; max-width: none; margin-bottom: 1.5mm; }
  .work-role { font-size: 8.5pt; color: #6d28d9 !important; margin-bottom: 2mm; }
  .work-role-label { color: #9a9aa2 !important; font-size: 6.5pt; }
  .work-fields { margin-top: 3mm; padding-top: 2.5mm; gap: 2.5mm; border-color: #e2e2e7 !important; }
  .work-field-label { font-size: 6.5pt; color: #9a9aa2 !important; }
  .work-field p:not(.work-field-label) { font-size: 8pt; line-height: 1.4; max-width: none; color: #45454d !important; }

  /* ---- Timeline ------------------------------------------- */

  .timeline { padding-left: 0; }
  .tl-item { padding: 3mm 0; border-color: #e2e2e7 !important; break-inside: avoid; }
  .tl-node { display: none; }
  .tl-head { margin-bottom: 1.5mm; }
  .tl-date { font-size: 8pt; color: #6d28d9 !important; }
  .tl-duration { color: #77777f !important; }
  .tl-role { font-size: 11pt; color: #0d0d10 !important; }
  .tl-company { font-size: 9pt; color: #45454d !important; }
  .tl-badge {
    border-color: #6d28d9 !important;
    background: none !important;
    color: #6d28d9 !important;
    font-size: 6pt;
  }
  .tl-bullets { margin-top: 2mm; max-width: none; gap: 1mm; }
  .tl-bullets li { font-size: 8.5pt; line-height: 1.4; color: #45454d !important; }
  .tl-bullets li::before { background: #9a9aa2 !important; }

  /* ---- Architecture --------------------------------------- */

  .arch { padding: 0; break-inside: avoid; }
  .arch-band { font-size: 7pt; color: #9a9aa2 !important; margin-bottom: 2mm; }
  .arch-row + .arch-band { margin-top: 4mm; }
  .arch-row { gap: 3mm; }
  .arch-node {
    padding: 3mm;
    border-color: #d8d8de !important;
    background: none !important;
    border-radius: 2mm;
    break-inside: avoid;
  }
  .arch-node-tag { color: #9a9aa2 !important; font-size: 6.5pt; }
  .arch-node-title { font-size: 9.5pt; }
  .arch-node-hub { border-color: #6d28d9 !important; box-shadow: none !important; }
  .arch-node-hub .arch-node-title { font-size: 11pt; color: #6d28d9 !important; }
  .arch-node-sub { font-size: 8pt; margin-top: 1.5mm; color: #45454d !important; }
  .principles-row { margin-top: 4mm; padding-top: 3mm; border-color: #e2e2e7 !important; }

  /* ---- Keynote: a plain four-up ---------------------------- */

  .keynote { min-height: 0 !important; display: block !important; }
  .keynote-stage {
    display: grid !important;
    position: static !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 4mm;
    min-height: 0 !important;
    width: 100% !important;
  }
  .keynote-item {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    border-top: 1px solid #e2e2e7 !important;
    padding-top: 3mm !important;
    break-inside: avoid;
  }
  .keynote-num {
    font-size: 12pt;
    color: #6d28d9 !important;
    -webkit-text-stroke: 0;
    margin-bottom: 1mm;
  }
  .keynote-copy h3 { font-size: 10pt; max-width: none; margin-bottom: 1.5mm; }
  .keynote-copy p { font-size: 8pt; line-height: 1.4; max-width: none; color: #45454d !important; }

  /* ---- Certifications: the static list --------------------- */

  /* Restores the list from its screen-reader-only state. */
  .cert-list {
    display: grid !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 3mm;
  }
  .cert-list li {
    padding: 2.5mm;
    border-color: #d8d8de !important;
    border-radius: 2mm;
    break-inside: avoid;
  }
  .cert-pill-code {
    color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    background: none !important;
    font-size: 7pt;
  }
  .cert-pill-name { font-size: 8.5pt; color: #16161a !important; }

  /* ---- Contact -------------------------------------------- */

  .contact { padding-bottom: 0; break-inside: avoid; }
  .contact-title { font-size: 17pt; margin: 2mm 0 4mm; line-height: 1.02; }
  .c-line { display: inline; overflow: visible; }
  .c-line > span { display: inline; }
  .c-line::after { content: " "; }
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6mm;
    padding-top: 3mm;
    border-color: #e2e2e7 !important;
  }
  .contact-p { font-size: 9pt; max-width: none; color: #45454d !important; }
  .contact-kicker { color: #6a6a72 !important; font-size: 7.5pt; margin-bottom: 2mm; }
  .contact-closing-title { font-size: 11pt; margin-bottom: 2mm; }

  .contact-links { margin-top: 3mm; gap: 4pt; display: block; }
  .contact-links a {
    display: block;
    padding: 0;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 9pt;
    color: #16161a !important;
  }
  /* A label alone is useless on paper — spell out the destination. */
  .contact-links a[data-print-value]::after {
    content: " — " attr(data-print-value);
    font-weight: 400;
    color: #45454d;
  }
  .contact-links a[data-print-hide] { display: none !important; }

  .footer { padding: 4mm 0 0; border-color: #e2e2e7 !important; }
  .footer-inner { font-size: 8pt; color: #6a6a72 !important; }
  .footer-mid { color: #6a6a72 !important; }
}