@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol { margin: 0; }
  ul, ol { padding: 0; }
  button, input, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img, svg { display: block; }
  img { max-width: 100%; }
}

@layer base {
  :root {
    --blue: #78a2d2;
    --blue-deep: #527fae;
    --yellow: #feffaf;
    --maroon: #881719;
    --ink: #101113;
    --paper: #f4f1e9;
    --paper-warm: #ebe4d8;
    --skin: #c9977d;
    --white: #fffdf8;
    --muted: #656664;
    --line: rgba(16, 17, 19, 0.18);
    --line-dark: rgba(255, 253, 248, 0.2);
    --display: "Manrope", sans-serif;
    --editorial: "Instrument Serif", Georgia, serif;
    --body: "Manrope", sans-serif;
    --gutter: clamp(1.25rem, 4vw, 4.5rem);
    --radius: 1.5rem;
    --header-h: 5.25rem;
  }

  html { overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 1rem); }

  body {
    min-width: 20rem;
    overflow-x: clip;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  body.nav-open { overflow: hidden; }
  ::selection { background: var(--yellow); color: var(--ink); }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  :focus-visible { outline: 3px solid var(--maroon); outline-offset: 4px; }
  em { color: var(--maroon); font-family: var(--editorial); font-weight: 400; }
  [hidden] { display: none !important; }

  .skip-link {
    position: fixed;
    z-index: 200;
    top: 0.75rem;
    left: 0.75rem;
    transform: translateY(-160%);
    padding: 0.7rem 1rem;
    background: var(--ink);
    color: var(--white);
    border-radius: 0.5rem;
  }
  .skip-link:focus { transform: translateY(0); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .svg-sprite symbol, svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

  .signal-field { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; pointer-events: none; opacity: 0.68; }
  .page-texture {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  }
}

@layer layout {
  .section-shell { width: min(100% - (var(--gutter) * 2), 92rem); margin-inline: auto; }
  .section-space { padding-block: clamp(7rem, 13vw, 12rem); }

  .section-index, .system-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--maroon);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 25rem);
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(3rem, 6vw, 5.75rem);
  }
  .section-heading h2, .section-intro h2 {
    max-width: 13ch;
    margin-top: 1rem;
    font-family: var(--display);
    font-size: clamp(3.1rem, 6.4vw, 7.4rem);
    font-weight: 700;
    letter-spacing: -0.075em;
    line-height: 0.93;
  }
  .section-heading > p { max-width: 34rem; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.15rem); }
}

@layer components {
  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: var(--header-h);
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-inline: var(--gutter);
    border-bottom: 1px solid transparent;
    transition: background 300ms ease, border-color 300ms ease, height 300ms ease;
  }
  .site-header.is-scrolled { height: 4.5rem; border-color: var(--line); background: rgba(244, 241, 233, 0.9); backdrop-filter: blur(16px); }
  .brand { display: inline-flex; align-items: center; gap: 0.8rem; flex: 0 0 auto; }
  .brand-mark { display: grid; width: 2.5rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; }
  .brand-copy { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.35; text-transform: uppercase; }
  .primary-nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.35vw, 1.5rem); }
  .primary-nav a { position: relative; padding-block: 0.5rem; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
  .primary-nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; transform: scaleX(0); transform-origin: right; background: var(--maroon); content: ""; transition: transform 250ms ease; }
  .primary-nav a:hover::after, .primary-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
  .nav-toggle { display: none; border: 0; background: transparent; cursor: pointer; }

  .hero { min-height: 100svh; overflow: clip; padding-top: calc(var(--header-h) + 3rem); padding-bottom: 2rem; }
  .hero-grid { display: grid; min-height: calc(100svh - var(--header-h) - 7.5rem); grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.65fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
  .system-label span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--maroon); box-shadow: 0 0 0 0.35rem rgba(136, 23, 25, 0.1); }
  .hero-copy h1 { margin-top: clamp(2rem, 5vh, 4rem); font-family: var(--display); font-size: clamp(3.7rem, 7.6vw, 8.7rem); font-weight: 700; letter-spacing: -0.085em; line-height: 0.83; }
  .hero-name { display: block; margin-bottom: clamp(1.6rem, 3vw, 3rem); color: var(--blue-deep); font-size: 0.2em; font-weight: 800; letter-spacing: 0.07em; line-height: 1; text-transform: uppercase; }
  .hero-line { display: block; }
  .hero-line-indent { padding-left: clamp(0rem, 6vw, 6rem); }
  .hero-intro { max-width: 43rem; margin-top: clamp(2rem, 4vw, 3.5rem); color: #393a39; font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.35rem; margin-top: 2.5rem; }

  .signature-button {
    --mx: 0px;
    --my: 0px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-height: 3.65rem;
    align-items: center;
    justify-content: space-between;
    gap: 2.2rem;
    overflow: hidden;
    transform: translate3d(var(--mx), var(--my), 0);
    padding: 0.7rem 0.75rem 0.7rem 1.4rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 250ms ease, transform 180ms ease, box-shadow 250ms ease;
  }
  .signature-button::before { position: absolute; z-index: -1; inset: 0; transform: translateX(-105%) skewX(-18deg); background: var(--yellow); content: ""; transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1); }
  .signature-button svg { width: 2.2rem; height: 2.2rem; padding: 0.55rem; border-radius: 50%; background: var(--blue); transition: transform 250ms ease, background 250ms ease; }
  .signature-button:hover { color: var(--ink); box-shadow: 0 0.75rem 2.5rem rgba(16, 17, 19, 0.16); }
  .signature-button:hover::before { transform: translateX(0) skewX(0); }
  .signature-button:hover svg { transform: translateX(0.15rem) rotate(-4deg); background: var(--maroon); color: var(--white); }
  .text-action { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: 0.55rem; transform: translate3d(var(--mx), var(--my), 0); border-bottom: 1px solid var(--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: color 200ms ease, border-color 200ms ease, transform 180ms ease; }
  .text-action svg { width: 1rem; height: 1rem; transition: transform 200ms ease; }
  .text-action:hover { border-color: var(--maroon); color: var(--maroon); }
  .text-action:hover svg { transform: translate(0.15rem, -0.15rem); }

  .hero-visual { position: relative; display: grid; min-height: min(72vh, 46rem); place-items: center; }
  .hero-orbit { position: absolute; inset: 2% -15%; }
  .orbit-ring { position: absolute; border: 1px solid rgba(16, 17, 19, 0.2); border-radius: 50%; }
  .orbit-ring-one { inset: 4%; }
  .orbit-ring-two { inset: 18% -8%; transform: rotate(30deg); border-color: rgba(120, 162, 210, 0.65); }
  .orbit-axis { position: absolute; top: 50%; left: 50%; background: var(--line); }
  .orbit-axis-x { width: 115%; height: 1px; transform: translate(-50%, -50%) rotate(-12deg); }
  .orbit-axis-y { width: 1px; height: 108%; transform: translate(-50%, -50%) rotate(16deg); }
  .signal-node { position: absolute; width: 0.75rem; height: 0.75rem; border: 2px solid var(--paper); border-radius: 50%; background: var(--maroon); box-shadow: 0 0 0 0.5rem rgba(136, 23, 25, 0.1); }
  .signal-node-one { top: 13%; right: 12%; }
  .signal-node-two { bottom: 17%; left: 7%; background: var(--blue); box-shadow: 0 0 0 0.5rem rgba(120, 162, 210, 0.15); }
  .portrait-frame { position: relative; width: min(87%, 28rem); overflow: hidden; border-radius: 46% 46% 1.5rem 1.5rem; background: var(--skin); box-shadow: 1.5rem 1.5rem 0 var(--yellow); }
  .portrait-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(16, 17, 19, 0.2)); content: ""; }
  .portrait-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; filter: saturate(0.9) contrast(1.02); }
  .portrait-code { position: absolute; z-index: 2; right: 1.25rem; bottom: 1rem; color: var(--white); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; }
  .signature-orb { position: absolute; display: grid; width: clamp(5.5rem, 8vw, 8.5rem); aspect-ratio: 1; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #d5e9ff, var(--blue) 44%, #31597e 80%); box-shadow: inset -1.2rem -1.4rem 2.1rem rgba(16, 17, 19, 0.22), 0 1.25rem 3.5rem rgba(40, 75, 112, 0.28); transition: transform 180ms ease; }
  .signature-orb::before, .signature-orb::after { position: absolute; inset: -0.75rem; border: 1px solid rgba(16, 17, 19, 0.28); border-radius: 50%; content: ""; }
  .signature-orb::after { inset: 35% -20%; border-right-color: transparent; border-left-color: transparent; }
  .signature-orb span { width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 1rem var(--yellow); }
  .hero-signature-orb { top: 6%; left: -2%; }
  .hero-visual-note { position: absolute; right: 0; bottom: 2%; display: flex; align-items: center; gap: 0.55rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; writing-mode: vertical-rl; }
  .hero-visual-note i { display: block; width: 1px; height: 1.6rem; background: var(--ink); }
  .hero-foot { display: flex; align-items: end; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1.2rem; }
  .hero-socials { display: flex; flex-wrap: wrap; gap: 1.4rem; }
  .hero-socials a, .contact-links a { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .hero-socials a:hover, .contact-links a:hover { color: var(--maroon); }
  .scroll-cue { display: flex; align-items: center; gap: 0.9rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  .scroll-cue i { display: block; width: 3.5rem; height: 1px; overflow: hidden; background: var(--line); }
  .scroll-cue i::after { display: block; width: 45%; height: 100%; background: var(--maroon); content: ""; animation: scroll-signal 2.2s ease-in-out infinite; }
  @keyframes scroll-signal { 0%, 100% { transform: translateX(-100%); } 55% { transform: translateX(220%); } }

  .section-intro { max-width: 80rem; }
  .section-intro h2 { max-width: 14ch; }
  .about-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 0.65fr); gap: clamp(3rem, 9vw, 10rem); align-items: start; margin-top: clamp(4rem, 8vw, 8rem); }
  .about-lede { max-width: 30ch; font-family: var(--editorial); font-size: clamp(2rem, 3.6vw, 4rem); line-height: 1.07; }
  .about-copy > p { color: #393a39; font-size: clamp(1rem, 1.4vw, 1.2rem); }
  .about-focus { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2rem; }
  .about-focus span { padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 253, 248, 0.38); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.04em; }
  .build-sequence { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(5rem, 9vw, 9rem); border-top: 1px solid var(--ink); }
  .build-sequence article { position: relative; min-height: 19rem; padding: 1.4rem clamp(1rem, 2.5vw, 2.5rem) 2rem 0; border-right: 1px solid var(--line); }
  .build-sequence article + article { padding-left: clamp(1rem, 2.5vw, 2.5rem); }
  .build-sequence article:last-child { border-right: 0; }
  .build-sequence span { color: var(--maroon); font-size: 0.67rem; font-weight: 800; }
  .build-sequence h3 { position: absolute; bottom: 5.5rem; font-size: clamp(2.2rem, 4vw, 4.5rem); letter-spacing: -0.06em; }
  .build-sequence p { position: absolute; bottom: 0; max-width: 23rem; color: var(--muted); font-size: 0.88rem; }

  .skills { overflow: clip; }
  .skills-network { position: relative; height: 45rem; border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.35); background: rgba(255, 253, 248, 0.28); }
  .skills-network::before { position: absolute; inset: 2rem; border: 1px dashed rgba(16, 17, 19, 0.13); border-radius: 50%; content: ""; }
  .network-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
  .network-lines path { fill: none; stroke: rgba(82, 127, 174, 0.42); stroke-dasharray: 5 8; stroke-width: 1.25; }
  .network-core { position: absolute; top: 50%; left: 50%; display: grid; width: 13.5rem; aspect-ratio: 1; place-items: center; transform: translate(-50%, -50%); border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--white); text-align: center; }
  .network-core::before { position: absolute; inset: -1.2rem; border: 1px solid var(--blue); border-radius: 50%; content: ""; }
  .network-core span { align-self: end; color: var(--yellow); font-size: 0.63rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
  .network-core strong { align-self: start; margin-top: 0.2rem; font-family: var(--editorial); font-size: 2.15rem; font-weight: 400; }
  .network-core i { position: absolute; bottom: 2rem; width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0.5rem rgba(120, 162, 210, 0.14); }
  .skill-node { position: absolute; display: flex; min-width: 10rem; max-width: 13rem; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); text-align: left; cursor: pointer; transition: transform 250ms ease, background 250ms ease, color 250ms ease, box-shadow 250ms ease; }
  .skill-node::after { width: 0.45rem; aspect-ratio: 1; margin-left: auto; border-radius: 50%; background: var(--blue); content: ""; }
  .skill-node small { color: var(--maroon); font-size: 0.62rem; font-weight: 800; }
  .skill-node span { font-size: 0.72rem; font-weight: 800; line-height: 1.25; }
  .skill-node:hover, .skill-node.is-active { transform: translateY(-0.35rem); background: var(--yellow); box-shadow: 0 1rem 2rem rgba(16, 17, 19, 0.11); }
  .skill-node.is-active::after { background: var(--maroon); box-shadow: 0 0 0 0.35rem rgba(136, 23, 25, 0.1); }
  .node-1 { top: 11%; left: 7%; }.node-2 { top: 6%; left: 31%; }.node-3 { top: 7%; right: 25%; }.node-4 { top: 18%; right: 5%; }.node-5 { right: 4%; bottom: 18%; }.node-6 { right: 25%; bottom: 6%; }.node-7 { bottom: 6%; left: 27%; }.node-8 { bottom: 18%; left: 5%; }
  .skill-details { position: relative; z-index: 2; width: min(92%, 72rem); min-height: 15rem; margin: -4rem auto 0; }
  .skill-detail { display: grid; grid-template-columns: 12rem minmax(16rem, 0.8fr) minmax(20rem, 1fr); gap: 2rem; align-items: start; padding: 2.2rem; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--white); box-shadow: 0 2rem 4rem rgba(16, 17, 19, 0.17); }
  .skill-detail > p { color: var(--blue); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
  .skill-detail h3 { max-width: 18ch; font-family: var(--editorial); font-size: clamp(1.7rem, 2.8vw, 2.8rem); font-weight: 400; line-height: 1; }
  .skill-detail ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
  .skill-detail li { padding: 0.45rem 0.7rem; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 0.7rem; }

  .project-controls { display: flex; align-items: center; gap: 1rem; justify-self: end; }
  .project-controls button { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; transition: background 200ms ease, color 200ms ease, transform 200ms ease; }
  .project-controls button:hover { transform: scale(1.06); background: var(--ink); color: var(--white); }
  .project-controls span { min-width: 4.7rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; }
  .project-rail { display: grid; grid-auto-columns: minmax(23rem, 34rem); grid-auto-flow: column; gap: 1.25rem; overflow-x: auto; padding: 0.25rem 0.25rem 1.7rem; scroll-padding-inline: 0.25rem; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--maroon) transparent; }
  .project-card { display: flex; min-height: 35rem; flex-direction: column; scroll-snap-align: start; padding: 1.7rem; border: 1px solid var(--ink); border-radius: var(--radius); background: rgba(244, 241, 233, 0.92); transition: transform 280ms ease, background 280ms ease, color 280ms ease, box-shadow 280ms ease; }
  .project-card:hover { transform: translateY(-0.5rem); background: var(--ink); color: var(--white); box-shadow: 0 1.5rem 3.5rem rgba(16, 17, 19, 0.18); }
  .project-featured { background: var(--blue); }
  .project-number { align-self: end; font-family: var(--editorial); font-size: 2.4rem; line-height: 1; }
  .project-stack { margin-top: 3.5rem; color: var(--maroon); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .project-card:hover .project-stack { color: var(--yellow); }
  .project-card h3 { max-width: 14ch; margin-top: 0.7rem; font-size: clamp(1.75rem, 2.5vw, 2.8rem); letter-spacing: -0.055em; line-height: 1.04; }
  .project-card > p:not(.project-stack) { margin-top: 1.5rem; color: var(--muted); font-size: 0.9rem; }
  .project-card:hover > p:not(.project-stack) { color: #c9c8c4; }
  .project-key { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid currentColor; font-size: 0.78rem; }
  .project-key span { display: block; margin-bottom: 0.45rem; color: var(--maroon); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
  .project-card:hover .project-key span { color: var(--yellow); }
  .project-card > a, .project-status { display: flex; align-items: center; gap: 0.45rem; align-self: flex-start; margin-top: 1.2rem; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
  .project-card > a { border-bottom: 1px solid currentColor; }
  .project-card > a svg { width: 0.9rem; height: 0.9rem; transition: transform 200ms ease; }
  .project-card > a:hover svg { transform: translate(0.15rem, -0.15rem); }
  .project-status { color: var(--muted); }
  .project-card:hover .project-status { color: #a9a9a6; }

  .experience-heading h2 { max-width: 12ch; }
  .experience-list { border-top: 1px solid var(--ink); }
  .experience-row { display: grid; grid-template-columns: minmax(12rem, 0.45fr) minmax(0, 1.55fr); gap: clamp(2rem, 7vw, 8rem); padding-block: clamp(2.5rem, 5vw, 4.75rem); border-bottom: 1px solid var(--line); transition: padding-left 260ms ease; }
  .experience-row:hover { padding-left: 0.7rem; }
  .experience-meta { display: flex; justify-content: space-between; gap: 2rem; color: var(--muted); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
  .experience-meta span { color: var(--maroon); }
  .experience-main > p { color: var(--blue-deep); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .experience-main > p a { border-bottom: 1px solid currentColor; }
  .experience-main h3 { margin-top: 0.65rem; font-size: clamp(2rem, 4vw, 4.5rem); letter-spacing: -0.065em; line-height: 0.95; }
  .experience-main ul { display: grid; gap: 0.7rem; max-width: 57rem; margin-top: 2rem; list-style: none; color: var(--muted); }
  .experience-main li { position: relative; padding-left: 1.25rem; font-size: 0.88rem; }
  .experience-main li::before { position: absolute; top: 0.7em; left: 0; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--maroon); content: ""; }
  .research-panel { display: grid; grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1.58fr); gap: clamp(2rem, 6vw, 7rem); margin-top: clamp(5rem, 9vw, 9rem); padding: clamp(2rem, 4vw, 4rem); border-radius: calc(var(--radius) * 1.2); background: var(--blue); }
  .research-mark { display: flex; min-height: 12rem; flex-direction: column; justify-content: space-between; color: var(--ink); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .research-mark i { width: 1px; height: 5rem; background: rgba(16, 17, 19, 0.45); }
  .research-type { color: var(--maroon); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .research-panel h3 { max-width: 19ch; margin-top: 0.8rem; font-size: clamp(2rem, 4vw, 4.2rem); letter-spacing: -0.065em; line-height: 0.98; }
  .research-panel ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.5rem; border-top: 1px solid rgba(16, 17, 19, 0.45); padding-top: 1.5rem; list-style: none; }
  .research-panel li { color: #243443; font-size: 0.77rem; }

  .education-list { position: relative; border-top: 1px solid var(--ink); }
  .education-list::before { position: absolute; top: 0; bottom: 0; left: clamp(8rem, 17vw, 16rem); width: 1px; background: var(--line); content: ""; }
  .education-row { position: relative; display: grid; grid-template-columns: clamp(8rem, 17vw, 16rem) minmax(17rem, 1fr) minmax(13rem, 0.75fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; min-height: clamp(13rem, 20vw, 19rem); border-bottom: 1px solid var(--line); }
  .education-year { display: flex; height: 100%; flex-direction: column; justify-content: center; }
  .education-year strong { color: var(--blue-deep); font-family: var(--editorial); font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.8; }
  .education-year span { margin-top: 0.8rem; color: var(--maroon); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .education-row > div:nth-child(2) { padding-left: clamp(1rem, 2vw, 2rem); }
  .education-row > div:nth-child(2) p { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; }
  .education-row h3 { max-width: 17ch; margin-block: 0.45rem; font-size: clamp(1.8rem, 3.6vw, 3.8rem); letter-spacing: -0.06em; line-height: 1; }
  .education-note { max-width: 28rem; color: var(--muted); font-size: 0.85rem; }
  .education-node { justify-self: end; width: 0.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--maroon); box-shadow: 0 0 0 0.5rem rgba(136, 23, 25, 0.1); }

  .awards { position: relative; overflow: clip; background: var(--ink); color: var(--white); }
  .awards::before { position: absolute; top: -20rem; left: -15rem; width: 45rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(120, 162, 210, 0.26), transparent 65%); content: ""; }
  .awards .section-index, .awards-heading em { color: var(--yellow); }
  .awards-heading > p { color: #aaa9a5; }
  .awards-radial { position: relative; display: grid; min-height: 64rem; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 1.2rem; padding: 2rem; }
  .radial-system { position: absolute; inset: 7%; pointer-events: none; }
  .radial-system i { position: absolute; inset: 4%; border: 1px solid rgba(120, 162, 210, 0.3); border-radius: 50%; }
  .radial-system i:nth-child(2) { inset: 20%; border-color: rgba(254, 255, 175, 0.18); }
  .radial-system span { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--line-dark); }
  .radial-system span:last-child { transform: rotate(90deg); }
  .awards-center { position: relative; z-index: 2; display: flex; grid-area: 2 / 2; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--blue); border-radius: 50%; background: var(--ink); text-align: center; }
  .awards-center > span { color: var(--yellow); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
  .awards-center strong { margin-top: 0.6rem; font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -0.065em; line-height: 0.9; }
  .awards-center em { color: var(--blue); }
  .awards-center p { margin-top: 1rem; color: #aaa9a5; font-size: 0.72rem; }
  .award-node { position: relative; z-index: 2; align-self: center; width: min(100%, 19rem); min-height: 10.5rem; padding: 1.2rem; border-top: 1px solid var(--line-dark); background: rgba(16, 17, 19, 0.88); transition: transform 250ms ease, border-color 250ms ease, background 250ms ease; }
  .award-node::before { position: absolute; top: -0.32rem; left: 0; width: 0.62rem; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--blue); content: ""; }
  .award-node:hover { transform: translateY(-0.4rem); border-color: var(--yellow); background: #17191c; }
  .award-node time { color: var(--yellow); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; }
  .award-node h3 { margin-top: 0.55rem; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.15; }
  .award-node p { margin-top: 0.45rem; color: #aaa9a5; font-size: 0.69rem; line-height: 1.45; }
  .award-1 { grid-area: 1 / 1; justify-self: start; }.award-2 { grid-area: 1 / 2; justify-self: center; }.award-3 { grid-area: 1 / 3; justify-self: end; }.award-4 { grid-area: 2 / 1; justify-self: start; }.award-5 { grid-area: 2 / 3; justify-self: end; }.award-6 { grid-area: 3 / 1; justify-self: start; }.award-7 { grid-area: 3 / 2; justify-self: center; }.award-8 { grid-area: 3 / 3; justify-self: end; }

  .leadership-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); gap: 3rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
  .leadership-intro h2 { margin-top: 1rem; font-size: clamp(3rem, 6vw, 6.5rem); letter-spacing: -0.07em; line-height: 0.95; }
  .leadership-intro > p { color: var(--muted); }
  .leadership-list { border-top: 1px solid var(--ink); list-style: none; }
  .leadership-list li { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) 13rem; gap: 2rem; align-items: center; min-height: 9.5rem; border-bottom: 1px solid var(--line); transition: padding-left 250ms ease, color 250ms ease; }
  .leadership-list li::after { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--maroon); content: ""; transition: width 350ms ease; }
  .leadership-list li:hover { padding-left: 0.65rem; }
  .leadership-list li:hover::after { width: 100%; }
  .leadership-list > li > span { color: var(--maroon); font-size: 0.66rem; font-weight: 800; }
  .leadership-list h3 { font-size: clamp(1.35rem, 2.6vw, 2.75rem); letter-spacing: -0.045em; line-height: 1.05; }
  .leadership-list p { margin-top: 0.4rem; color: var(--muted); font-size: 0.8rem; }
  .leadership-list p a { border-bottom: 1px solid currentColor; }
  .leadership-list time { justify-self: end; color: var(--muted); font-size: 0.69rem; font-weight: 700; text-transform: uppercase; }
  .community-strip { display: grid; grid-template-columns: 13rem 1fr; gap: 2rem; margin-top: 3rem; padding: 1.5rem; border-radius: 1rem; background: var(--yellow); }
  .community-strip > p { color: var(--maroon); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .community-strip > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .community-strip span { font-size: 0.77rem; font-weight: 700; line-height: 1.4; }
  .community-strip b { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.62rem; font-weight: 600; }

  .collaborate-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr); gap: clamp(3rem, 8vw, 8rem); padding: clamp(2rem, 5vw, 5rem); border-radius: calc(var(--radius) * 1.5); background: var(--maroon); color: var(--white); }
  .collaborate-panel .section-index { color: var(--yellow); }
  .collaborate-panel h2 { max-width: 12ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6.5rem); letter-spacing: -0.075em; line-height: 0.92; }
  .collaborate-panel h2 em { color: var(--yellow); }
  .collaborate-panel > div > p:not(.section-index) { max-width: 34rem; margin-top: 1.7rem; color: #e0c5c1; }
  .signature-button-light { margin-top: 2rem; border-color: var(--white); background: var(--white); color: var(--ink); }
  .signature-button-light::before { background: var(--yellow); }
  .collaborate-fields { border-top: 1px solid var(--line-dark); }
  .collaborate-fields span { display: flex; align-items: center; justify-content: space-between; padding-block: 1.5rem; border-bottom: 1px solid var(--line-dark); font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -0.03em; }
  .collaborate-fields i { color: var(--yellow); font-size: 0.6rem; font-style: normal; letter-spacing: 0.12em; }

  .contact-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.7fr); gap: clamp(3rem, 8vw, 9rem); align-items: start; }
  .contact-statement { position: relative; padding-top: 7rem; }
  .contact-orb { top: -1rem; left: 0; width: 6rem; background: radial-gradient(circle at 32% 25%, #db676a, var(--maroon) 48%, #45090b 82%); }
  .contact-statement h2 { max-width: 12ch; margin-top: 1.3rem; font-size: clamp(3.7rem, 7.5vw, 8rem); letter-spacing: -0.08em; line-height: 0.86; }
  .contact-statement > p:not(.section-index) { max-width: 38rem; margin-top: 2.3rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); }
  .contact-direct { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: 2rem; font-size: 0.8rem; font-weight: 700; }
  .contact-direct a { border-bottom: 1px solid var(--line); }
  .contact-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; }
  .contact-form { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--ink); border-radius: var(--radius); background: var(--white); box-shadow: 1rem 1rem 0 var(--blue); }
  .form-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 2rem; color: var(--maroon); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .form-head i { flex: 1; height: 1px; background: var(--line); }
  .contact-form label { display: block; margin-top: 1.1rem; color: var(--muted); font-size: 0.63rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .contact-form input, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; background: transparent; color: var(--ink); padding: 0.7rem 0; }
  .contact-form textarea { min-height: 7rem; resize: vertical; }
  .contact-form input:focus, .contact-form textarea:focus { border-color: var(--maroon); box-shadow: 0 1px 0 var(--maroon); }
  .signature-button-dark { width: 100%; margin-top: 2rem; cursor: pointer; }

  .site-footer { display: flex; min-height: 9rem; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--ink); }
  .site-footer p, .site-footer > a:last-child { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.06em; }
  .site-footer > a:last-child { border-bottom: 1px solid var(--ink); }

  .assistant-trigger { position: fixed; z-index: 80; right: 1.2rem; bottom: 1.2rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0.8rem 2rem rgba(16, 17, 19, 0.12); transition: transform 200ms ease; }
  .assistant-trigger:hover { transform: translateY(-0.2rem); }
  .assistant-trigger span { width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--maroon); box-shadow: 0 0 0 0.3rem rgba(136, 23, 25, 0.1); }
  .assistant-dialog { width: min(92vw, 32rem); max-height: min(80vh, 42rem); margin: auto 1.2rem 5rem auto; padding: 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 1.2rem; background: var(--white); color: var(--ink); box-shadow: 0 2rem 5rem rgba(16, 17, 19, 0.28); }
  .assistant-dialog::backdrop { background: rgba(16, 17, 19, 0.25); backdrop-filter: blur(3px); }
  .assistant-head { display: flex; align-items: start; justify-content: space-between; padding: 1.4rem; border-bottom: 1px solid var(--line); }
  .assistant-head span { color: var(--maroon); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
  .assistant-head h2 { margin-top: 0.3rem; font-size: 1.45rem; letter-spacing: -0.04em; }
  .assistant-head button { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
  .assistant-messages { display: flex; min-height: 12rem; max-height: 20rem; flex-direction: column; gap: 0.8rem; overflow-y: auto; padding: 1.4rem; }
  .assistant-messages p { max-width: 87%; align-self: flex-start; padding: 0.8rem 1rem; border-radius: 1rem 1rem 1rem 0.2rem; background: var(--paper); font-size: 0.78rem; }
  .assistant-messages .is-user { align-self: flex-end; border-radius: 1rem 1rem 0.2rem 1rem; background: var(--blue); color: var(--ink); }
  .assistant-form { display: flex; gap: 0.6rem; padding: 1rem; border-top: 1px solid var(--line); }
  .assistant-form input { min-width: 0; flex: 1; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; }
  .assistant-form button { display: grid; width: 2.85rem; aspect-ratio: 1; place-items: center; border: 0; border-radius: 50%; background: var(--maroon); color: var(--white); cursor: pointer; }
  .assistant-form svg { width: 1rem; height: 1rem; }

  [data-reveal] { opacity: 0; transform: translate3d(0, 2.5rem, 0); transition: opacity 750ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
  [data-reveal="left"] { transform: translate3d(-2.8rem, 0, 0); }
  [data-reveal="right"] { transform: translate3d(2.8rem, 0, 0); }
  [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
}

@layer responsive {
  @media (max-width: 1180px) {
    :root { --header-h: 4.6rem; }
    .nav-toggle { position: relative; z-index: 102; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
    .nav-toggle i, .nav-toggle i::after { display: block; width: 1rem; height: 1px; background: currentColor; content: ""; transition: transform 250ms ease; }
    .nav-toggle i::after { transform: translateY(0.28rem); }
    .nav-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] i::after { transform: rotate(-90deg); }
    .primary-nav { position: fixed; z-index: 101; inset: 0; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 0; transform: translateY(-105%); padding: 6rem var(--gutter) 3rem; background: var(--ink); color: var(--white); visibility: hidden; transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1), visibility 550ms; }
    .primary-nav.is-open { transform: translateY(0); visibility: visible; }
    .primary-nav a { width: 100%; padding: 0.5rem 0; border-bottom: 1px solid var(--line-dark); font-size: clamp(1.9rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.04em; text-transform: none; }
    .primary-nav a::after { display: none; }
    .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.65fr); }
    .skills-network { height: 41rem; }
    .skill-node { min-width: 8.5rem; max-width: 11rem; }
    .skill-detail { grid-template-columns: 9rem minmax(14rem, 0.8fr) 1fr; }
    .awards-radial { min-height: 58rem; padding-inline: 0; }
    .award-node { width: min(100%, 16rem); }
  }

  @media (max-width: 900px) {
    .section-heading { grid-template-columns: 1fr; gap: 1.5rem; }
    .section-heading > p { max-width: 32rem; }
    .hero { padding-top: calc(var(--header-h) + 2rem); }
    .hero-grid { grid-template-columns: 1fr; padding-top: 4rem; }
    .hero-copy h1 { font-size: clamp(4rem, 12vw, 7rem); }
    .hero-visual { min-height: 38rem; margin-top: 2rem; }
    .portrait-frame { width: min(55vw, 28rem); }
    .hero-signature-orb { left: 14%; }
    .hero-visual-note { right: 8%; }
    .about-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-copy { max-width: 38rem; margin-left: auto; }
    .skills-network { display: grid; height: auto; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; padding: 1.2rem; }
    .skills-network::before, .network-lines, .network-core { display: none; }
    .skill-node { position: static; width: 100%; max-width: none; min-height: 4.5rem; }
    .skill-detail { grid-template-columns: 1fr; }
    .skill-details { width: calc(100% - 2rem); margin-top: -0.1rem; }
    .project-rail { grid-auto-columns: minmax(21rem, 65vw); }
    .research-panel { grid-template-columns: 1fr; }
    .research-mark { min-height: auto; flex-direction: row; align-items: center; }
    .research-mark i { width: auto; height: 1px; flex: 1; margin-inline: 1rem; }
    .research-panel ul { grid-template-columns: 1fr; }
    .education-list::before { left: 8rem; }
    .education-row { grid-template-columns: 8rem 1fr; padding-block: 2.5rem; }
    .education-note, .education-node { grid-column: 2; justify-self: start; }
    .awards-radial { min-height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 1rem; padding: 0; }
    .radial-system { inset: 4%; }
    .awards-center { grid-area: 1 / 1 / 2 / 3; justify-self: center; width: 18rem; min-height: 18rem; margin-bottom: 1rem; }
    .award-node { width: 100%; min-height: 10rem; align-self: stretch; justify-self: stretch; }
    .award-1, .award-2, .award-3, .award-4, .award-5, .award-6, .award-7, .award-8 { grid-area: auto; }
    .leadership-intro { grid-template-columns: 1fr; }
    .leadership-list li { grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.5rem; }
    .leadership-list time { grid-column: 2; justify-self: start; }
    .community-strip { grid-template-columns: 1fr; }
    .community-strip > div { grid-template-columns: 1fr; }
    .collaborate-panel, .contact-layout { grid-template-columns: 1fr; }
    .contact-form { width: min(100%, 38rem); justify-self: end; }
  }

  @media (max-width: 620px) {
    :root { --gutter: 1.1rem; }
    .brand-copy { display: none; }
    .site-header.is-scrolled { height: 4.1rem; }
    .section-space { padding-block: 6rem; }
    .section-heading h2, .section-intro h2 { font-size: clamp(2.8rem, 14vw, 4.6rem); }
    .hero { min-height: auto; padding-top: 7.5rem; }
    .hero-grid { min-height: auto; padding-top: 1rem; }
    .hero-copy h1 { margin-top: 2rem; font-size: clamp(3.5rem, 18vw, 5.7rem); }
    .hero-line-indent { padding-left: 0; }
    .hero-intro { margin-top: 1.7rem; font-size: 1rem; }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .hero-visual { min-height: 31rem; }
    .portrait-frame { width: min(73vw, 23rem); box-shadow: 0.8rem 0.8rem 0 var(--yellow); }
    .hero-signature-orb { top: 2%; left: 6%; width: 5.5rem; }
    .hero-visual-note { right: 1%; }
    .hero-foot { align-items: flex-start; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
    .about-lede { font-size: 2.2rem; }
    .build-sequence { grid-template-columns: 1fr; }
    .build-sequence article, .build-sequence article + article { min-height: auto; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .build-sequence h3, .build-sequence p { position: static; }
    .build-sequence h3 { margin-top: 2.5rem; }
    .build-sequence p { margin-top: 0.7rem; }
    .skills-network { grid-template-columns: 1fr; }
    .skill-details { width: calc(100% - 1rem); }
    .skill-detail { padding: 1.4rem; }
    .project-controls { justify-self: start; }
    .project-rail { grid-auto-columns: calc(100vw - 3rem); }
    .project-card { min-height: 34rem; padding: 1.35rem; }
    .experience-row { grid-template-columns: 1fr; gap: 1.4rem; }
    .experience-meta { justify-content: flex-start; }
    .experience-main h3 { font-size: 2.3rem; }
    .research-panel { padding: 1.4rem; }
    .research-panel h3 { font-size: 2.15rem; }
    .education-list::before { left: 0; }
    .education-row { grid-template-columns: 1fr; gap: 1.2rem; padding: 2rem 0 2rem 1.2rem; }
    .education-row > div:nth-child(2), .education-note, .education-node { grid-column: 1; padding-left: 0; }
    .education-year strong { font-size: 4rem; }
    .awards-radial { grid-template-columns: 1fr; }
    .awards-center { grid-area: auto; width: 15rem; min-height: 15rem; }
    .award-node { min-height: auto; }
    .radial-system { display: none; }
    .leadership-intro h2 { font-size: 3.2rem; }
    .leadership-list li { grid-template-columns: 2rem 1fr; }
    .leadership-list h3 { font-size: 1.45rem; }
    .community-strip { padding: 1.2rem; }
    .collaborate-panel { padding: 1.4rem; }
    .collaborate-panel h2 { font-size: 3.2rem; }
    .contact-statement h2 { font-size: clamp(3.4rem, 17vw, 5.4rem); }
    .contact-form { box-shadow: 0.55rem 0.55rem 0 var(--blue); }
    .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 2rem; }
    .assistant-trigger { right: 0.75rem; bottom: 0.75rem; }
    .assistant-dialog { width: calc(100vw - 1.5rem); margin: auto 0.75rem 4.7rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .signal-field { opacity: 0.35; }
  }
}