@layer base, components, utilities;

:root {
  --ink: #07110f;
  --ink-soft: #0c1916;
  --ink-panel: #101f1c;
  --paper: #edf1e8;
  --muted: #84908a;
  --line: rgba(230, 241, 226, 0.14);
  --line-bright: rgba(230, 241, 226, 0.24);
  --lime: #c9f36a;
  --lime-soft: #e7ffac;
  --orange: #ff9d66;
  --teal: #75dfd2;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Space Grotesk", system-ui, sans-serif;
  --pointer-x: 50vw;
  --pointer-y: 30vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--display); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(117, 223, 210, 0.085), transparent 25rem); transition: background 0.25s ease; }
body::after { content: ""; position: fixed; inset: 0; z-index: -4; pointer-events: none; opacity: 0.26; background-image: linear-gradient(rgba(201,243,106,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(201,243,106,0.035) 1px, transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
::selection { color: var(--ink); background: var(--lime); }

.site-noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0.03; 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='.5'/%3E%3C/svg%3E"); }
.pointer-glow { position: fixed; width: 18rem; height: 18rem; left: var(--pointer-x); top: var(--pointer-y); translate: -50% -50%; border-radius: 999px; border: 1px solid rgba(201,243,106,0.08); pointer-events: none; z-index: -2; opacity: 0.36; transition: left 0.2s ease-out, top 0.2s ease-out; }
.shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.section-pad { padding-top: 9rem; padding-bottom: 9rem; }
.site-header { position: fixed; z-index: 10; top: 0; left: 0; right: 0; border-bottom: 1px solid transparent; background: linear-gradient(var(--ink), rgba(7,17,15,0.82), transparent); transition: border-color 0.3s ease, background 0.3s ease; }
.site-header.is-scrolled { border-color: var(--line); background: rgba(7,17,15,0.9); backdrop-filter: blur(16px); }
.nav-wrap { height: 84px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); font-size: 0.82rem; font-weight: 700; letter-spacing: -0.08em; background: var(--lime); transform: rotate(-5deg); }
.brand-mark__dot { color: var(--orange); }
.brand-copy { display: grid; gap: 0.15rem; font-size: 0.78rem; font-weight: 600; letter-spacing: -0.03em; }
.brand-copy small { color: var(--muted); font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.12em; }
.primary-nav { display: flex; align-items: center; gap: 2rem; color: var(--muted); font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.primary-nav a { transition: color 0.2s ease; }
.primary-nav a:hover, .primary-nav a.is-active { color: var(--lime); }
.nav-availability { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--paper) !important; padding: 0.65rem 0.8rem; border: 1px solid var(--line-bright); }
.nav-availability span, .status-dot, .pulse { color: var(--lime); text-shadow: 0 0 9px var(--lime); }
.nav-toggle { display: none; border: 0; background: none; width: 40px; height: 40px; padding: 0.6rem; }
.nav-toggle span { display: block; height: 1px; margin: 7px 0; background: var(--lime); transition: transform 0.2s ease; }

.hero { min-height: 100vh; position: relative; display: grid; grid-template-columns: 0.98fr 1.02fr; align-items: center; gap: 4.5rem; padding-top: 10rem; padding-bottom: 8rem; }
.hero::before { content: ""; position: absolute; top: 7rem; left: -10vw; width: 48vw; height: 50vw; max-height: 620px; border: 1px solid rgba(201,243,106,0.1); border-radius: 50%; transform: rotate(-18deg); pointer-events: none; }
.hero__copy { position: relative; z-index: 1; }
.eyebrow, .section-heading, .project-card__label, .project-card__topline, .hero__visual-topline, .hero__visual-bottomline, .hero__meta, .hero__plot-coordinates, .contact__direct-label, .contact__links, .site-footer, .skill-column__top { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; }
.eyebrow { display: flex; align-items: center; gap: 0.7rem; color: var(--lime); margin-bottom: 2.3rem; }
.eyebrow__line { width: 26px; height: 1px; background: var(--lime); }
.eyebrow__label { color: var(--muted); margin-left: 0.7rem; }
.hero__kicker { color: var(--teal); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 1.5rem; }
.hero__kicker span { color: var(--orange); padding: 0 0.25rem; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 740px; color: var(--paper); font-size: clamp(3.4rem, 6.4vw, 6.5rem); line-height: 0.94; letter-spacing: -0.085em; font-weight: 500; margin-bottom: 2rem; }
h1 em, h2 span, .projects__intro em, .skills__intro span { color: var(--lime); font-style: normal; }
.hero__cursor { color: var(--orange); font-size: 0.7em; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__lede { color: #acb6ae; max-width: 410px; font-size: 1rem; line-height: 1.65; margin-bottom: 2.2rem; }
.hero__actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 1.5rem; min-height: 48px; padding: 0.8rem 1rem; border: 1px solid transparent; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.button span, .project-card__links span, .contact__direct span { font-size: 1rem; transition: transform 0.25s ease; }
.button:hover { transform: translateY(-3px); }
.button:hover span, .project-card__links a:hover span, .contact__direct a:hover span { transform: translate(3px, -3px); }
.button--primary { color: var(--ink); background: var(--lime); }
.button--primary:hover { background: var(--lime-soft); }
.button--ghost { color: var(--paper); border-color: var(--line-bright); }
.button--ghost:hover { color: var(--lime); border-color: var(--lime); }
.hero__meta { display: flex; align-items: center; gap: 0.8rem; color: var(--muted); margin-top: 4rem; }
.meta-divider { width: 22px; height: 1px; background: var(--line-bright); }
.hero__visual { min-height: 600px; position: relative; padding: 1.15rem; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(22,43,37,0.65), rgba(7,17,15,0.7)); box-shadow: 20px 20px 0 rgba(201,243,106,0.05); overflow: hidden; }
.hero__visual::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(201,243,106,0.07); pointer-events: none; }
.hero__visual-topline, .hero__visual-bottomline { position: relative; z-index: 1; display: flex; justify-content: space-between; color: var(--muted); }
.status-dot { color: var(--lime); }
.hero__plot-wrap { position: relative; display: grid; place-items: center; min-height: 500px; }
.hero__plot { width: min(100%, 560px); overflow: visible; }
.plot-contours path { stroke: rgba(117,223,210,0.37); stroke-width: 2; stroke-dasharray: 2 8; }
.plot-route { filter: drop-shadow(0 0 8px rgba(201,243,106,0.7)); animation: routeDash 12s linear infinite; }
@keyframes routeDash { to { stroke-dashoffset: -120; } }
.plot-points circle { fill: var(--lime); stroke: var(--ink); stroke-width: 5; }
.plot-center-ring { fill: none; stroke: var(--lime); stroke-width: 1; stroke-dasharray: 3 4; animation: spin 12s linear infinite; transform-origin: 344px 404px; }
.plot-center { fill: var(--orange); }
@keyframes spin { to { transform: rotate(360deg); } }
.plot-labels { fill: rgba(201,243,106,0.75); font-family: var(--mono); font-size: 11px; letter-spacing: 1px; }
.hero__plot-coordinates { position: absolute; right: 0.5rem; bottom: 1.2rem; display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.5rem; text-align: right; }
.hero__plot-scanline { position: absolute; left: 14%; right: 14%; top: 32%; height: 1px; background: linear-gradient(90deg, transparent, var(--lime), transparent); opacity: 0.5; box-shadow: 0 0 22px var(--lime); animation: scan 5s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateY(-120px); opacity: 0; } 50% { opacity: 0.7; } 80% { transform: translateY(180px); opacity: 0; } }
.hero__plot-crosshair { position: absolute; width: 26px; height: 26px; border: 1px solid var(--orange); opacity: 0.8; }
.hero__plot-crosshair::before, .hero__plot-crosshair::after { content: ""; position: absolute; background: var(--orange); }
.hero__plot-crosshair::before { top: 50%; left: -6px; right: -6px; height: 1px; }.hero__plot-crosshair::after { left: 50%; top: -6px; bottom: -6px; width: 1px; }
.hero__plot-crosshair--one { top: 23%; left: 13%; }.hero__plot-crosshair--two { bottom: 21%; right: 10%; border-color: var(--teal); transform: rotate(45deg); }.hero__plot-crosshair--two::before, .hero__plot-crosshair--two::after { background: var(--teal); }
.floating-card { position: absolute; z-index: 2; display: grid; gap: 0.25rem; padding: 0.85rem 1rem; border: 1px solid var(--line-bright); background: rgba(7,17,15,0.88); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.floating-card small { color: var(--muted); font-family: var(--mono); font-size: 0.55rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; }
.floating-card--metric { top: 20%; right: -1.1rem; min-width: 100px; }.floating-card--metric strong { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.08em; }.floating-card__icon { position: absolute; top: 0.7rem; right: 0.8rem; color: var(--lime); }.floating-card--status { bottom: 13%; left: -1.2rem; }.floating-card--status .pulse { position: absolute; top: 0.75rem; left: 0.7rem; width: 5px; height: 5px; border-radius: 99px; background: var(--lime); }.floating-card--status small { padding-left: 0.8rem; }.hero__scroll { position: absolute; left: 0; bottom: 2.2rem; display: flex; align-items: center; gap: 1rem; color: var(--muted); font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; writing-mode: vertical-rl; }.hero__scroll i { color: var(--lime); font-size: 1rem; font-style: normal; animation: bounce 1.5s ease-in-out infinite; } @keyframes bounce { 50% { transform: translateY(5px); } }

.marquee-band { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; color: var(--lime); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; white-space: nowrap; }
.marquee-track { display: flex; align-items: center; gap: 2.4rem; width: max-content; animation: marquee 32s linear infinite; }.marquee-track b { color: var(--orange); font-size: 1rem; font-weight: 400; } @keyframes marquee { to { transform: translateX(-50%); } }
.section-heading { display: flex; align-items: center; gap: 0.75rem; color: var(--lime); }.section-number { color: var(--orange); }.heading-rule { height: 1px; flex: 1; max-width: 130px; background: var(--line-bright); }.heading-note { color: var(--muted); margin-left: auto; text-transform: none; letter-spacing: 0; }
.about__grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 7rem; margin-top: 5.7rem; }.about__statement h2, .projects__intro h2, .skills__intro h2 { font-size: clamp(2.5rem, 4.5vw, 4.4rem); line-height: 0.98; letter-spacing: -0.075em; font-weight: 500; margin-bottom: 2.4rem; }.about__statement h2 span { color: var(--teal); }.about__body { max-width: 600px; color: #b7c0b8; font-size: 1.03rem; line-height: 1.7; }.about__body--muted { color: var(--muted); font-size: 0.92rem; }.about__signature { display: flex; align-items: center; gap: 0.85rem; color: var(--muted); margin-top: 3rem; font-family: var(--mono); font-size: 0.63rem; line-height: 1.5; }.signature-mark { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ink); background: var(--orange); font-family: var(--display); font-size: 0.7rem; font-weight: 700; transform: rotate(8deg); }.about__aside { display: grid; align-content: center; gap: 1.1rem; }.stat-card { display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }.stat-card strong { color: var(--lime); font-size: 3.2rem; line-height: 0.8; font-weight: 500; letter-spacing: -0.08em; }.stat-card strong span { color: var(--orange); font-size: 1.2rem; }.stat-card > span { color: var(--muted); font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; }.about__quote { margin-top: 2rem; padding-left: 1.2rem; border-left: 2px solid var(--orange); color: var(--paper); font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.04em; }
.projects { position: relative; }.projects__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: 5.7rem; margin-bottom: 3.4rem; }.projects__intro h2 { margin-bottom: 0; }.projects__intro p, .skills__intro p { max-width: 245px; color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin-bottom: 0.5rem; }.project-list { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 1.4rem; }.project-card { border: 1px solid var(--line); background: rgba(15,31,28,0.62); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; transform-style: preserve-3d; }.project-card:hover { border-color: rgba(201,243,106,0.42); box-shadow: 0 20px 50px rgba(0,0,0,0.16); }.project-card__visual { position: relative; min-height: 355px; overflow: hidden; border-bottom: 1px solid var(--line); }.project-card__topline { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; color: rgba(237,241,232,0.55); font-size: 0.52rem; }.project-card__number { position: absolute; right: 1rem; bottom: 0.75rem; color: rgba(201,243,106,0.28); font-family: var(--mono); font-size: 3rem; letter-spacing: -0.1em; }.project-card__visual--map { background: #142821; }.project-card__visual--map::before { content: ""; position: absolute; inset: 0; opacity: 0.6; background-image: linear-gradient(rgba(117,223,210,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(117,223,210,0.12) 1px, transparent 1px); background-size: 42px 42px; transform: rotate(-5deg) scale(1.14); }.mini-map { position: absolute; inset: 3rem 2rem; border: 1px solid rgba(117,223,210,0.3); transform: rotate(-6deg); background: radial-gradient(ellipse at 70% 34%, rgba(201,243,106,0.15), transparent 30%), rgba(10,29,24,0.45); }.mini-map::after { content: ""; position: absolute; inset: 10% 12%; border: 1px dashed rgba(201,243,106,0.3); border-radius: 42% 60% 30% 53%; }.mini-map__road { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, var(--teal), transparent); transform-origin: left center; opacity: 0.75; }.mini-map__road--one { width: 74%; top: 42%; left: 12%; transform: rotate(20deg); }.mini-map__road--two { width: 62%; top: 61%; left: 18%; transform: rotate(-35deg); background: linear-gradient(90deg, transparent, var(--lime), transparent); }.mini-map__road--three { width: 50%; top: 28%; left: 32%; transform: rotate(78deg); }.mini-map__pin { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); border-radius: 50% 50% 50% 0; background: var(--lime); font-family: var(--mono); font-size: 0.58rem; transform: rotate(-45deg); box-shadow: 0 0 0 5px rgba(201,243,106,0.12); }.mini-map__pin::first-letter { transform: rotate(45deg); }.mini-map__pin--a { top: 33%; left: 20%; }.mini-map__pin--b { top: 52%; right: 23%; background: var(--orange); }.mini-map__pin--c { bottom: 16%; left: 52%; background: var(--teal); }.mini-map__legend { position: absolute; right: 1rem; bottom: 0.8rem; color: var(--muted); font-family: var(--mono); font-size: 0.48rem; line-height: 1.5; text-align: right; }.mini-map__legend b { color: var(--lime); font-size: 0.75rem; }.project-card__visual--terminal { min-height: 355px; padding: 4.5rem 2rem 2rem; background: #111616; }.terminal-bar { position: absolute; top: 1.2rem; left: 1.2rem; right: 1.2rem; display: flex; align-items: center; gap: 0.3rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }.terminal-bar span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }.terminal-bar span:nth-child(1) { background: var(--orange); }.terminal-bar span:nth-child(2) { background: var(--lime); }.terminal-bar span:nth-child(3) { background: var(--teal); }.terminal-bar small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 0.55rem; }.terminal-code { font-family: var(--mono); font-size: clamp(0.55rem, 1.2vw, 0.72rem); line-height: 2; white-space: nowrap; }.terminal-code p { margin: 0; }.terminal-code i { display: inline-block; width: 1.5rem; color: #495650; font-style: normal; }.code-purple { color: #d7a9ff; }.code-blue { color: var(--teal); }.code-orange { color: var(--orange); }.code-green { color: var(--lime); }.project-card__content { padding: 1.8rem 1.8rem 2.1rem; }.project-card__label { color: var(--orange); font-size: 0.56rem; }.project-card h3 { margin: 0.75rem 0 0.7rem; font-size: 2.1rem; font-weight: 500; letter-spacing: -0.075em; }.project-card p { min-height: 5rem; color: var(--muted); font-size: 0.84rem; line-height: 1.6; }.tag-list { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 1.4rem 0 1.6rem; }.tag-list span { padding: 0.4rem 0.55rem; border: 1px solid var(--line-bright); color: var(--paper); font-family: var(--mono); font-size: 0.53rem; text-transform: uppercase; letter-spacing: 0.06em; }.project-card__links { display: flex; gap: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--lime); font-family: var(--mono); font-size: 0.61rem; text-transform: uppercase; letter-spacing: 0.08em; }.project-card__links a { display: inline-flex; align-items: center; gap: 0.55rem; }.project-card__links span { color: var(--orange); }
.skills { border-top: 1px solid var(--line); }.skills__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 5.7rem; margin-bottom: 3.5rem; }.skills__intro h2 { margin-bottom: 0; }.skill-matrix { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.skill-column { min-height: 360px; padding: 1.4rem 1.6rem 1.8rem; border-right: 1px solid var(--line); }.skill-column:last-child { border-right: 0; }.skill-column--accent { background: rgba(201,243,106,0.07); }.skill-column__top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }.skill-icon { color: var(--lime); font-family: var(--display); font-size: 1.6rem; }.skill-column h3 { margin: 2.5rem 0 2.6rem; font-size: 1.7rem; line-height: 1.02; letter-spacing: -0.07em; font-weight: 500; }.skill-column h3 em { color: var(--muted); font-style: normal; }.skill-column ul { list-style: none; margin: 0; padding: 0; }.skill-column li { display: flex; justify-content: space-between; padding: 0.74rem 0; border-top: 1px solid var(--line); color: #c3ccc4; font-size: 0.83rem; }.skill-column li span { color: var(--lime); }
.contact { padding-bottom: 5rem; }.contact__panel { padding: 2rem; border: 1px solid rgba(201,243,106,0.25); background: radial-gradient(circle at 90% 10%, rgba(117,223,210,0.12), transparent 28rem), rgba(15,31,28,0.7); }.contact__layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: 7rem; margin: 5.2rem 3rem 2.3rem; }.contact__copy h2 { font-size: clamp(2.6rem, 4.5vw, 4.5rem); line-height: 0.98; letter-spacing: -0.08em; font-weight: 500; }.contact__copy h2 span { color: var(--orange); }.contact__copy > p { max-width: 400px; color: var(--muted); line-height: 1.6; font-size: 0.9rem; }.contact__direct { display: grid; gap: 0.55rem; margin-top: 3.8rem; }.contact__direct-label { color: var(--muted); font-size: 0.53rem; }.contact__direct a { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--lime); font-family: var(--mono); font-size: 0.72rem; }.contact-form { display: grid; gap: 1.1rem; }.contact-form label { display: grid; gap: 0.6rem; color: var(--muted); font-family: var(--mono); font-size: 0.57rem; text-transform: uppercase; letter-spacing: 0.08em; }.contact-form input, .contact-form textarea { width: 100%; resize: vertical; padding: 0.8rem 0; color: var(--paper); border: 0; border-bottom: 1px solid var(--line-bright); outline: 0; background: transparent; font-family: var(--display); font-size: 0.9rem; text-transform: none; letter-spacing: 0; transition: border-color 0.2s ease; }.contact-form textarea { min-height: 90px; }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #58655f; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--lime); }.button--submit { justify-self: start; margin-top: 0.5rem; border: 0; }.form-note { min-height: 1.2rem; color: var(--lime); font-family: var(--mono); font-size: 0.58rem; line-height: 1.5; }.contact__links { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.2rem; color: var(--muted); }.contact__links a { color: var(--paper); transition: color 0.2s ease; }.contact__links a:hover { color: var(--lime); }.contact__links span { margin-right: auto; color: var(--orange); }.site-footer { border-top: 1px solid var(--line); padding: 1.6rem 0; color: var(--muted); font-size: 0.55rem; }.footer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.footer-mark span { color: var(--orange); }.site-footer a:hover { color: var(--lime); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }.reveal--delay { transition-delay: 0.13s; }.reveal--delay-2 { transition-delay: 0.26s; }.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 920px) {
  .shell { width: min(100% - 40px, 720px); }.section-pad { padding-top: 6.5rem; padding-bottom: 6.5rem; }.hero { grid-template-columns: 1fr; gap: 3rem; padding-top: 9rem; }.hero::before { width: 80vw; height: 80vw; }.hero__visual { min-height: 540px; }.hero__scroll { display: none; }.about__grid, .project-list, .contact__layout { grid-template-columns: 1fr; gap: 3rem; }.about__aside { grid-template-columns: 1fr 1fr; }.about__quote { grid-column: 1 / -1; }.project-card__visual, .project-card__visual--terminal { min-height: 315px; }.skills__intro, .projects__intro { align-items: flex-start; flex-direction: column; gap: 1.4rem; }.skills__intro p, .projects__intro p { max-width: 420px; }.contact__layout { margin: 4rem 1.4rem 1.5rem; }.contact__panel { padding: 1.4rem; }.contact__links span { width: 100%; margin-bottom: 0.4rem; }.contact__links { column-gap: 1rem; }
}
@media (max-width: 640px) {
  .shell { width: calc(100% - 32px); }.nav-wrap { height: 70px; }.brand-copy small { font-size: 0.42rem; }.primary-nav { position: absolute; top: 70px; left: 16px; right: 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0.75rem; border: 1px solid var(--line-bright); background: rgba(7,17,15,0.97); }.primary-nav.is-open { display: flex; }.primary-nav a { padding: 0.9rem; border-bottom: 1px solid var(--line); }.primary-nav .nav-availability { margin-top: 0.6rem; border: 1px solid var(--line-bright); }.nav-toggle { display: block; }.section-pad { padding-top: 5.5rem; padding-bottom: 5.5rem; }.hero { min-height: auto; padding-top: 8.5rem; padding-bottom: 5rem; }.eyebrow { flex-wrap: wrap; font-size: 0.54rem; }.eyebrow__label { margin-left: 0; width: 100%; padding-left: 2.2rem; }.hero__kicker { line-height: 1.5; }.hero__lede { font-size: 0.93rem; }.hero__actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.hero__meta { margin-top: 2.5rem; flex-wrap: wrap; font-size: 0.52rem; }.hero__visual { min-height: 430px; padding: 0.8rem; }.hero__plot-wrap { min-height: 360px; }.hero__plot-coordinates { right: 0.25rem; bottom: 0.4rem; font-size: 0.43rem; }.floating-card--metric { top: 17%; right: -0.4rem; }.floating-card--status { left: -0.4rem; bottom: 7%; }.floating-card { padding: 0.65rem 0.75rem; }.floating-card--metric strong { font-size: 1.25rem; }.floating-card small { font-size: 0.48rem; }.hero__visual-bottomline { font-size: 0.47rem; }.hero__visual-index { display: none; }.about__grid { margin-top: 3.5rem; }.about__statement h2, .projects__intro h2, .skills__intro h2 { font-size: 2.7rem; }.about__body { font-size: 0.93rem; }.about__aside { grid-template-columns: 1fr 1fr; gap: 0.8rem; }.stat-card { display: block; padding: 0.8rem 0; }.stat-card strong { display: block; margin-bottom: 0.8rem; font-size: 2.4rem; }.stat-card > span { font-size: 0.5rem; line-height: 1.4; }.about__quote { margin-top: 1rem; font-size: 1rem; }.projects__intro, .skills__intro { margin-top: 3.5rem; margin-bottom: 2.5rem; }.project-card__visual, .project-card__visual--terminal { min-height: 255px; }.project-card__content { padding: 1.4rem 1.25rem 1.6rem; }.project-card h3 { font-size: 1.9rem; }.project-card p { min-height: 0; font-size: 0.8rem; }.terminal-code { font-size: 0.5rem; }.skill-matrix { display: block; }.skill-column { min-height: auto; padding: 1.3rem 1.25rem 1.7rem; border-right: 0; border-bottom: 1px solid var(--line); }.skill-column:last-child { border-bottom: 0; }.skill-column h3 { margin: 1.8rem 0 1.6rem; font-size: 1.5rem; }.skill-column li { font-size: 0.78rem; }.contact__panel { padding: 1rem; }.contact__layout { margin: 3.5rem 0.4rem 1rem; gap: 3rem; }.contact__copy h2 { font-size: 2.85rem; }.contact__direct { margin-top: 2.5rem; }.contact__direct a { font-size: 0.6rem; }.contact__links { font-size: 0.53rem; gap: 0.8rem; }.footer-wrap { align-items: flex-start; flex-direction: column; gap: 0.6rem; }.footer-mark { order: 3; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }