@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --paper: #f5f7f2;
  --paper-bright: #fbfcf9;
  --panel: #edf1ea;
  --ink: #202820;
  --muted: #667267;
  --green: #228b22;
  --green-dark: #176b1b;
  --green-pale: #e5eee2;
  --line: #d7e0d5;
  --grid: rgba(42, 116, 49, .10);
  --terminal: #516251;
  --sans: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --serif: "Space Grotesk", Inter, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121412;
  --paper-bright: #191c19;
  --panel: #1a1f1a;
  --ink: #e8eee7;
  --muted: #a2ada2;
  --green: #5bdb55;
  --green-dark: #36b83b;
  --green-pale: #202b20;
  --line: #303930;
  --grid: rgba(152, 177, 152, .19);
  --terminal: #a6b7a4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: #dce7d9; color: var(--ink); }

.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; transform: translateY(-150%); border-radius: 5px; background: var(--green-dark); color: #fff; }
.skip-link:focus { transform: translateY(0); }
.site-header { height: 80px; padding: 0 max(6.9vw, calc((100vw - 1280px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(32, 41, 33, .08); }
.wordmark { font-size: 27px; line-height: 1; font-weight: 700; letter-spacing: -.09em; }
.wordmark span { color: var(--green); }
.site-nav { display: flex; align-items: center; gap: 38px; color: #555f57; font-size: 13px; }
.site-nav > a:not(.nav-contact) { transition: color .2s ease; }
.site-nav > a:not(.nav-contact):hover, .site-nav > a:not(.nav-contact):focus-visible { color: var(--green); }
.nav-contact { color: var(--green-dark); border-bottom: 1px solid #aebcae; padding: 8px 0; }
.nav-contact span { margin-left: 7px; transition: transform .2s ease; display: inline-block; }
.nav-contact:hover span { transform: translate(2px, -2px); }
.section-shell { width: min(1120px, 86.2%); margin-inline: auto; }
.section-block { padding-block: 126px; }
.hero { min-height: 652px; position: relative; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; padding-block: 66px 83px; }
.hero-copy { position: relative; z-index: 1; padding: 15px 0 0; }
.eyebrow { margin: 0; color: var(--green); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #688c68; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(104, 140, 104, .12); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 27px 0 19px; font-size: clamp(48px, 5.45vw, 71px); font-weight: 500; letter-spacing: -.065em; line-height: 1.025; }
.hero-divider { color: #a7afa7; font-weight: 400; }
.serif-accent { color: var(--green); font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: -.055em; }
.hero-description { max-width: 422px; margin-bottom: 28px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 21px; padding: 0 18px; border: 1px solid var(--green); border-radius: 3px; font-size: 12px; font-weight: 600; transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(32, 41, 33, .1); }
.button-primary { background: var(--green); color: #fff; }
.button-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.button-outline { color: var(--green-dark); }
.button-outline:hover { background: var(--green-pale); }
.hero-note { margin: 37px 0 0; color: #929a91; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; }
.hero-art { width: 100%; max-width: 468px; aspect-ratio: 1 / 1; justify-self: end; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid #e3e7df; background-color: #f0f2ec; background-image: linear-gradient(rgba(68, 104, 79, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 104, 79, .05) 1px, transparent 1px); background-size: 25px 25px; }
.hero-art::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(68, 104, 79, .16); pointer-events: none; }
.hero-model { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; background-color: transparent; --poster-color: transparent; touch-action: pan-y; }
.art-topline, .art-caption { position: absolute; z-index: 2; right: 28px; left: 28px; display: flex; justify-content: space-between; color: #78857a; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.art-topline { top: 29px; }
.art-caption { bottom: 29px; }
.art-index { position: absolute; right: 26px; bottom: 55px; color: rgba(68, 104, 79, .12); font-family: var(--mono); font-size: 52px; }
.scroll-cue { position: absolute; bottom: 30px; left: 0; display: flex; align-items: center; gap: 11px; color: #848d85; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.scroll-line { width: 32px; height: 1px; background: var(--green); }

.about { display: grid; grid-template-columns: .8fr 1fr; gap: 11%; border-top: 1px solid var(--line); }
.section-heading { align-self: start; }
.section-number { margin-left: 15px; color: #a1a9a0; }
.section-heading h2, .projects-heading h2 { margin: 23px 0 0; font-size: clamp(42px, 4.3vw, 57px); font-weight: 500; letter-spacing: -.065em; line-height: 1.07; }
.about-content { padding-top: 32px; }
.about-content > p { margin-bottom: 17px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.about-content > .about-lead { margin-bottom: 20px; color: var(--ink); font-size: 19px; font-weight: 500; letter-spacing: -.025em; line-height: 1.55; }
.journey-note { position: relative; margin: 31px 0 35px; padding: 21px 25px 19px 55px; border-left: 2px solid var(--green); background: #eef1eb; }
.journey-mark { position: absolute; top: 9px; left: 19px; color: #7c967f; font-family: var(--serif); font-size: 43px; line-height: 1; }
.journey-note p { margin: 0 0 7px; color: #344438; font-family: var(--serif); font-size: 18px; font-style: italic; }
.journey-caption { color: #879087; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; }
.journey-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; }
.journey-steps > div { display: grid; gap: 7px; }
.step-dot { width: 8px; height: 8px; border: 1px solid var(--green); border-radius: 50%; background: var(--paper); }
.journey-steps > div:nth-of-type(2) .step-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-pale); }
.journey-future .step-dot { border-style: dashed; }
.step-label { color: #939b93; font-family: var(--mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.journey-steps strong { color: #3e4940; font-size: 11px; font-weight: 600; }
.journey-connector { height: 1px; margin: 0 10px 23px; background: #cbd4c9; }
.journey-connector-dashed { background: repeating-linear-gradient(90deg, #cbd4c9 0 3px, transparent 3px 6px); }

.projects { background: #eef1eb; }
.projects-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; }
.section-intro { width: 270px; margin: 0 4px 7px 20px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid #e2e6df; background: var(--paper-bright); box-shadow: 0 2px 8px rgba(37, 50, 39, .025); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.project-card:hover { transform: translateY(-7px); border-color: #c7d2c5; box-shadow: 0 18px 35px rgba(37, 50, 39, .1); }
.project-visual { aspect-ratio: 1.68 / 1; position: relative; display: grid; place-items: center; overflow: hidden; color: #58715c; }
.visual-robot, .visual-suspension, .visual-sustainable { background-color: #e9ede7; background-image: linear-gradient(rgba(68, 104, 79, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 104, 79, .06) 1px, transparent 1px); background-size: 18px 18px; }
.visual-robot svg, .visual-suspension svg, .visual-sustainable svg { width: 78%; height: auto; }
.visual-code { background: #e9ede7; }
.visual-code::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#bfc9bd .7px, transparent .7px); background-size: 13px 13px; opacity: .55; }
.visual-label { position: absolute; z-index: 1; top: 15px; left: 16px; color: #7c897e; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; }
.visual-index { position: absolute; right: 14px; bottom: 9px; color: rgba(68, 104, 79, .36); font-family: var(--mono); font-size: 11px; }
.code-window { width: 71%; position: relative; z-index: 1; border: 1px solid #d7ded5; background: rgba(248, 249, 246, .91); box-shadow: 0 9px 20px rgba(45, 61, 48, .07); }
.code-window-bar { height: 25px; display: flex; align-items: center; gap: 4px; padding: 0 9px; border-bottom: 1px solid #e0e5df; }
.code-window-bar > span { width: 4px; height: 4px; border-radius: 50%; background: #b3beb1; }
.code-window-bar small { margin-left: 6px; color: #8c988c; font-family: var(--mono); font-size: 7px; }
.code-lines { display: grid; gap: 7px; padding: 13px 10px; color: #536254; font-family: var(--mono); font-size: clamp(7px, .75vw, 9px); }
.code-lines span { white-space: nowrap; }
.code-lines i { display: inline-block; width: 20px; color: #b0b8af; font-style: normal; }
.code-lines b { color: #56745a; font-weight: 500; }
.code-lines em { color: #b37956; font-style: normal; }
.project-body { padding: 21px 20px 20px; }
.project-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-type, .project-year { color: #89928a; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.project-year { color: var(--green); text-align: right; }
.project-body h3 { min-height: 43px; margin: 13px 0 15px; font-size: 17px; font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
.project-details { display: grid; gap: 12px; margin: 0; }
.project-details > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; align-items: start; }
.project-details dt { color: #35443a; font-size: 10px; font-weight: 700; }
.project-details dd { margin: 0; color: #737c74; font-size: 10px; line-height: 1.6; }
.edit-note { color: #9ca39a; font-size: 9px; font-style: italic; }
.in-progress { color: var(--green); }
.in-progress .status-dot { width: 6px; height: 6px; margin-right: 5px; }
.projects-footnote { margin: 28px 0 0; color: #858e85; font-family: var(--mono); font-size: 9px; letter-spacing: .02em; }
.projects-footnote span { margin-right: 5px; color: var(--green); }

.skills { display: grid; grid-template-columns: .8fr 1fr; gap: 11%; }
.skill-groups { display: grid; gap: 31px; padding-top: 6px; }
.skill-group { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.skill-group:last-child { padding-bottom: 0; border-bottom: 0; }
.skill-group-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.skill-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d9e1d7; border-radius: 50%; color: var(--green); font-size: 17px; }
.skill-icon-learning { background: #eef1eb; font-family: var(--mono); font-size: 16px; }
.skill-kicker { margin: 0 0 3px; color: #929a92; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.skill-group h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.skill-list li { padding: 9px 12px; border: 1px solid #dfe4dc; border-radius: 2px; background: #fbfcf9; color: #59645b; font-size: 10px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.skill-list li:hover { border-color: #a8baa8; background: #eef2ec; color: var(--green-dark); }
.skill-group-learning .skill-list li { border-color: #dce3da; background: #eef1eb; }
.skill-group-learning .skill-list li:hover { border-color: #a8baa8; background: #e4ebe1; }
.skill-edit-note { margin: 12px 0 0; color: #9aa198; font-family: var(--mono); font-size: 8px; }

.site-footer { background: #e9ede7; }
.footer-inner { padding-top: 76px; }
.footer-main { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 67px; }
.footer-eyebrow-divider { padding-inline: 5px; color: #a0aaa0; }
.footer-main h2 { margin: 22px 0 10px; font-size: clamp(42px, 4.6vw, 58px); font-weight: 500; letter-spacing: -.065em; line-height: 1; }
.footer-message { max-width: 360px; margin: 0; color: #68736a; font-size: 12px; line-height: 1.7; }
.social-links { width: 290px; align-self: center; display: grid; }
.social-links a { display: grid; grid-template-columns: 21px 1fr 15px; align-items: center; gap: 13px; padding: 13px 2px; border-bottom: 1px solid #d6ddd4; color: #49564b; font-size: 11px; transition: padding .2s ease, color .2s ease; }
.social-links a:first-child { border-top: 1px solid #d6ddd4; }
.social-links a:hover { padding-inline: 7px; color: var(--green); }
.social-links svg { width: 16px; height: 16px; fill: currentColor; }
.social-arrow { color: #889489; text-align: right; }
.footer-bottom { min-height: 68px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d6ddd4; }
.footer-wordmark { font-size: 21px; }
.footer-bottom p, .back-to-top { margin: 0; color: #858e85; font-family: var(--mono); font-size: 8px; letter-spacing: .03em; }
.footer-bottom p span { padding-inline: 3px; color: var(--green); }
.back-to-top { transition: color .2s ease; }
.back-to-top:hover { color: var(--green); }

.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.js-reveal.is-visible { opacity: 1; transform: translateY(0); }
.project-card.js-reveal:nth-child(2) { transition-delay: .1s; }
.project-card.js-reveal:nth-child(3) { transition-delay: .2s; }

@media (max-width: 900px) {
  .section-shell { width: min(720px, 88%); }
  .hero { min-height: 565px; grid-template-columns: 1fr .82fr; gap: 15px; }
  .hero h1 { font-size: clamp(48px, 7vw, 65px); }
  .hero-art { max-width: 360px; }
  .about, .skills { grid-template-columns: .72fr 1fr; gap: 7%; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-details > div { grid-template-columns: 85px minmax(0, 1fr); }
  .section-block { padding-block: 100px; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 68px; }
  .site-header { height: 66px; padding-inline: 6%; }
  .site-nav { gap: 17px; font-size: 11px; }
  .site-nav .nav-contact { display: none; }
  .section-shell { width: 88%; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 36px; padding-block: 70px 88px; }
  .hero-copy { padding-top: 0; }
  .hero h1 { margin-top: 24px; font-size: clamp(48px, 11vw, 66px); }
  .hero-description { max-width: 390px; font-size: 14px; }
  .hero-note { margin-top: 25px; }
  .hero-art { width: min(100%, 390px); justify-self: center; }
  .scroll-cue { bottom: 28px; }
  .section-block { padding-block: 78px; }
  .about, .skills { grid-template-columns: 1fr; gap: 27px; }
  .section-heading h2, .projects-heading h2 { font-size: 47px; }
  .about-content { padding-top: 0; }
  .projects-heading { display: block; margin-bottom: 30px; }
  .section-intro { width: auto; max-width: 350px; margin: 18px 0 0; }
  .project-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-body h3 { min-height: auto; }
  .project-details > div { grid-template-columns: 78px minmax(0, 1fr); }
  .skill-groups { gap: 23px; }
  .footer-inner { padding-top: 60px; }
  .footer-main { display: block; padding-bottom: 40px; }
  .social-links { width: 100%; margin-top: 30px; }
  .footer-bottom { min-height: 62px; }
}

@media (max-width: 370px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 10px; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 230px; }
  .journey-steps { grid-template-columns: auto .45fr auto .45fr auto; }
  .journey-connector { margin-inline: 5px; }
  .journey-steps strong { font-size: 9px; }
  .step-label { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-reveal { opacity: 1; transform: none; }
}

/* Theme tokens drive both drafting-board palettes and their surface contrast. */
html { background: var(--paper); }
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at center, var(--grid) 1px, transparent 1.25px),
    repeating-linear-gradient(30deg, transparent 0 47px, var(--grid) 48px, transparent 49px),
    repeating-linear-gradient(150deg, transparent 0 47px, var(--grid) 48px, transparent 49px);
  background-size: 18px 18px, 84px 84px, 84px 84px;
  background-attachment: fixed;
  transition: background-color .28s ease, color .28s ease;
}
body, .site-header, .hero-art, .journey-note, .projects, .project-card,
.project-visual, .code-window, .skill-list li, .skill-group-learning .skill-list li,
.site-footer, .button, .theme-toggle-track {
  transition-property: background-color, color, border-color, box-shadow, transform;
  transition-duration: .25s;
  transition-timing-function: ease;
}
.site-header { border-bottom-color: var(--line); }
.site-nav { color: var(--muted); }
.nav-contact { color: var(--green); border-bottom-color: var(--line); }
.hero-divider, .section-number, .step-label, .journey-caption, .skill-kicker,
.skill-edit-note, .footer-bottom p, .back-to-top { color: var(--muted); }
.hero-note, .scroll-cue, .project-type, .visual-label, .projects-footnote,
.footer-message, .project-details dd { color: var(--muted); }
.hero-art {
  border-color: var(--line);
  background-color: var(--panel);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
}
.hero-art::before { border-color: var(--line); }
.visual-robot, .visual-suspension, .visual-sustainable { color: var(--terminal); }
.art-topline, .art-caption { color: var(--muted); }
.art-index { color: var(--grid); }
.serif-accent { color: var(--green); }
.journey-note { background: var(--panel); border-left-color: var(--green); }
.journey-note p, .journey-steps strong, .project-details dt { color: var(--ink); }
.journey-mark { color: var(--green); }
.journey-connector { background-color: var(--line); }
.journey-connector-dashed { background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px); }
.projects, .site-footer { background: color-mix(in srgb, var(--panel) 85%, transparent); }
.project-card { border-color: var(--line); background: var(--paper-bright); }
.project-card:hover { border-color: var(--green); }
.project-visual { color: var(--terminal); }
.visual-robot, .visual-code, .visual-suspension, .visual-sustainable { background-color: var(--panel); }
.visual-robot, .visual-suspension, .visual-sustainable { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); }
.visual-code::before { background-image: radial-gradient(var(--line) .7px, transparent .7px); }
.code-window { border-color: var(--line); background: var(--paper-bright); }
.code-window-bar { border-bottom-color: var(--line); }
.code-window-bar small, .code-lines { color: var(--terminal); }
.code-lines i { color: var(--muted); }
.code-lines b { color: var(--green); }
.code-lines em { color: #a86d4e; }
.project-year, .in-progress { color: var(--green); }
.skill-group { border-bottom-color: var(--line); }
.skill-icon { border-color: var(--line); color: var(--green); }
.skill-icon-learning, .skill-group-learning .skill-list li { background: var(--panel); }
.skill-list li { border-color: var(--line); background: var(--paper-bright); color: var(--ink); }
.skill-list li:hover, .skill-group-learning .skill-list li:hover { border-color: var(--green); background: var(--green-pale); color: var(--green); }
.social-links a { border-color: var(--line); color: var(--ink); }
.social-links a:first-child, .footer-bottom { border-color: var(--line); }
.button-primary { background: var(--green); border-color: var(--green); color: #101510; }
.button-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.button-outline { color: var(--green); border-color: var(--green); }
.button-outline:hover { background: var(--green-pale); }
.skip-link { background: var(--green); color: #101510; }
.status-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0 7px 8px;
  border: 0;
  background: transparent;
  color: var(--terminal);
  cursor: pointer;
  font: 500 9px/1 var(--mono);
  letter-spacing: .08em;
}
.theme-toggle-track {
  width: 34px;
  height: 18px;
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--green);
  background: var(--green-pale);
}
.theme-toggle-thumb {
  width: 12px;
  height: 12px;
  background: var(--green);
  transition: transform .22s ease;
}
:root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(16px); }
.theme-toggle:hover .theme-toggle-track { box-shadow: 0 0 12px color-mix(in srgb, var(--green) 25%, transparent); }

.hero-terminal, .eyebrow, .button, .art-topline, .art-caption, .visual-label,
.project-title-row, .project-details dt, .skill-kicker, .skill-edit-note,
.projects-footnote, .journey-note .journey-caption, .footer-bottom p,
.back-to-top, .theme-toggle { font-family: var(--mono); }
.hero-terminal { max-width: 470px; color: var(--terminal); font-size: 11px; letter-spacing: .045em; line-height: 1.9; }
.hero h1 { font-weight: 600; letter-spacing: -.07em; }
.hero h1 .serif-accent { font-family: var(--sans); font-style: normal; font-weight: 400; letter-spacing: -.07em; }
.section-heading h2, .projects-heading h2, .footer-main h2 { font-weight: 500; }
.journey-note p { font-family: var(--sans); font-style: normal; }
.section-shell { position: relative; }

.theme-toggle:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.button, .nav-contact, .social-links a { position: relative; }
.button-primary > span:first-child::before,
.button-primary > span:first-child::after,
.button-outline > span:first-child::before,
.button-outline > span:first-child::after {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width .2s ease, opacity .2s ease;
  vertical-align: bottom;
}
.button-primary > span:first-child::before,
.button-outline > span:first-child::before { content: "["; }
.button-primary > span:first-child::after,
.button-outline > span:first-child::after { content: "]"; }
.button:hover > span:first-child::before,
.button:hover > span:first-child::after,
.button:focus-visible > span:first-child::before,
.button:focus-visible > span:first-child::after { max-width: 1em; opacity: 1; }

.journey-steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; padding-left: 8px; }
.tree-title { margin: 0 0 12px; color: var(--terminal); font: 500 9px/1.5 var(--mono); letter-spacing: .08em; }
.tree-title span { color: var(--green); }
.tree-node { position: relative; display: grid; grid-template-columns: 14px 74px 1fr; gap: 9px; align-items: center; min-height: 38px; padding-left: 9px; border-left: 1px solid var(--line); }
.tree-node .step-dot { width: 7px; height: 7px; background: var(--paper); }
.tree-node-current .step-dot { background: var(--green); box-shadow: 0 0 9px color-mix(in srgb, var(--green) 55%, transparent); }
.tree-node .step-label { font-size: 8px; }
.tree-node strong { font: 500 11px/1.4 var(--sans); }
.tree-branch { height: 13px; margin-left: 9px; border-left: 1px dashed var(--line); }
.tree-branch-future { border-left-style: dotted; }
.journey-future strong { color: var(--muted); }

.project-card { position: relative; }
.project-card::before { content: ""; position: absolute; z-index: 2; inset: 7px auto auto 7px; width: 7px; height: 7px; border-top: 1px solid var(--green); border-left: 1px solid var(--green); opacity: .7; pointer-events: none; }
.project-visual { border-bottom: 1px solid var(--line); }
.project-details { gap: 14px; }
.project-details > div { grid-template-columns: 62px minmax(0, 1fr); }
.project-details dt { color: var(--green); font-size: 9px; letter-spacing: .04em; }
.project-details dd { font-family: var(--mono); font-size: 9px; }
.project-title-row { font-size: 8px; }
.project-type, .project-year { font-size: 8px; }
.project-body h3 { font-size: 18px; }
.visual-label { font-size: 8px; }

.site-footer { border-top: 1px solid var(--line); }
.footer-bottom { border-top-color: var(--line); }
.footer-bottom p, .back-to-top { font-size: 9px; }

.hero-art { isolation: isolate; }
.art-index { z-index: 2; }
.art-topline, .art-caption { z-index: 3; }
.hero-art::before { z-index: 3; }

@media (max-width: 620px) {
  .site-nav { gap: 14px; }
  .theme-toggle { gap: 5px; padding-left: 2px; font-size: 8px; }
  .theme-toggle-track { width: 30px; height: 17px; }
  :root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(12px); }
  .tree-node { grid-template-columns: 13px 67px 1fr; }
}

/* A single oversized grid layer stays continuous across section boundaries. */
body {
  isolation: isolate;
  background-image: none;
}
.background-grid {
  position: fixed;
  z-index: 0;
  inset: -35vmax;
  pointer-events: none;
  opacity: .78;
  background-image:
    radial-gradient(circle, var(--grid) 1px, transparent 1.25px),
    repeating-linear-gradient(30deg, transparent 0 37px, var(--grid) 38px 39px, transparent 40px 76px),
    repeating-linear-gradient(150deg, transparent 0 37px, var(--grid) 38px 39px, transparent 40px 76px);
  background-size: 24px 24px, auto, auto;
  transform: rotate(var(--grid-rotation, 0deg)) scale(var(--grid-scale, 1)) translate3d(0, var(--grid-shift, 0px), 0);
  transform-origin: center;
  will-change: transform;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: color-mix(in srgb, var(--paper) 60%, transparent); }
}
main, .site-footer { position: relative; z-index: 1; }
.skip-link { z-index: 20; }
.include-slot { display: contents; }
.component-loading, .component-error {
  width: min(1120px, 86.2%);
  margin: 24px auto;
  color: var(--terminal);
  font: 500 11px/1.7 var(--mono);
}
.component-error { padding: 16px; border: 1px solid var(--green); }
.component-error[hidden] { display: none; }

/* The card's visible link uses a full-card hit area without obscuring its text. */
.project-card { position: relative; }
.project-open {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 21px;
  padding: 10px 0 1px;
  border-top: 1px solid var(--line);
  color: var(--green);
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .08em;
}
.project-open::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.project-open span { transition: transform .2s ease; }
.project-card:hover .project-open span, .project-open:focus-visible span { transform: translate(2px, -2px); }
.project-open:focus-visible { outline: none; }
.project-open:focus-visible::after { outline: 2px solid var(--green); outline-offset: 3px; }
.project-card:hover .project-open { border-color: var(--green); }

.project-dialog {
  width: min(900px, calc(100vw - 36px));
  max-width: none;
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--green);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .48);
}
.project-dialog[open] { animation: dialog-enter .22s ease-out both; }
@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.project-dialog::backdrop { background: rgba(5, 10, 6, .72); backdrop-filter: blur(5px); }
.dialog-frame { max-height: min(88vh, 900px); display: flex; flex-direction: column; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 27px 34px 22px; border-bottom: 1px solid var(--line); background: var(--panel); }
.dialog-header .eyebrow { font-size: 9px; }
.dialog-header h2 { max-width: 650px; margin: 13px 0 0; font-size: clamp(25px, 4vw, 38px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; }
.dialog-close, .dialog-done {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--terminal);
  cursor: pointer;
  font: 500 9px/1 var(--mono);
  letter-spacing: .08em;
}
.dialog-close span { color: var(--green); font-size: 19px; line-height: .6; }
.dialog-close:hover, .dialog-done:hover { color: var(--green); }
.dialog-body { padding: 26px 34px 34px; overflow: auto; overscroll-behavior: contain; }
.detail-summary { max-width: 730px; margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.detail-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.detail-image-placeholder { aspect-ratio: 1.5; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; margin: 0; overflow: hidden; border: 1px dashed color-mix(in srgb, var(--green) 65%, var(--line)); background-color: var(--panel); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 18px 18px; color: var(--green); }
.detail-image-placeholder::before { content: "+"; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--green); border-radius: 50%; font: 400 17px/1 var(--mono); }
.detail-image-placeholder > span { color: var(--terminal); font: 500 8px/1 var(--mono); letter-spacing: .08em; }
.detail-image-placeholder figcaption { max-width: calc(100% - 18px); overflow: hidden; color: var(--muted); font: 400 8px/1.4 var(--mono); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.detail-image-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-image-placeholder:has(img) { border-style: solid; }
.detail-section { display: grid; grid-template-columns: minmax(170px, .62fr) 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 2px 0 0; color: var(--green); font: 500 9px/1.6 var(--mono); letter-spacing: .07em; }
.detail-section p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 34px; border-top: 1px solid var(--line); background: var(--panel); }
.dialog-footer > span { color: var(--muted); font: 400 8px/1 var(--mono); letter-spacing: .08em; }
.dialog-done { color: var(--green); }
@media (max-width: 620px) {
  .project-dialog { width: calc(100vw - 20px); max-height: 92vh; }
  .dialog-frame { max-height: 92vh; }
  .dialog-header { padding: 21px 18px 17px; gap: 12px; }
  .dialog-header h2 { font-size: 25px; }
  .dialog-close { gap: 6px; font-size: 8px; }
  .dialog-body { padding: 20px 18px 26px; }
  .detail-summary { font-size: 13px; }
  .detail-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .detail-image-placeholder:last-child { display: none; }
  .detail-section { grid-template-columns: 1fr; gap: 7px; padding: 14px 0; }
  .dialog-footer { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .background-grid { transform: none !important; }
  .project-dialog[open] { animation: none; }
}

.current-project-card {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  margin-bottom: 34px;
  border-color: var(--green);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--green) 9%, transparent);
}
.current-project-card::before {
  inset: 0 auto auto 0;
  width: 15px;
  height: 15px;
  border-width: 2px;
  opacity: 1;
}
.current-project-visual {
  min-height: 300px;
  height: 100%;
  aspect-ratio: auto;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}
.current-project-visual svg { width: min(75%, 340px); height: auto; }
.current-project-visual .visual-index { right: 20px; bottom: 16px; font-size: 13px; }
.current-project-body { align-self: center; padding: clamp(24px, 4vw, 48px); }
.current-project-body h3 {
  min-height: 0;
  max-width: 480px;
  margin: 18px 0 11px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.18;
}
.current-project-summary { max-width: 480px; margin-bottom: 22px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.current-project-body .project-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.current-project-body .project-details > div { display: block; }
.current-project-body .project-details dt { margin-bottom: 6px; }
.current-project-body .project-details dd { line-height: 1.7; }
.current-project-body .project-open { margin-top: 25px; }
.project-archive-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 15px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}
.project-archive-heading h3, .project-archive-heading span {
  margin: 0;
  color: var(--terminal);
  font: 500 9px/1.5 var(--mono);
  letter-spacing: .08em;
}
.project-archive-heading span { color: var(--muted); }
@media (max-width: 900px) {
  .current-project-card { grid-template-columns: .85fr 1.15fr; }
  .current-project-visual { min-height: 330px; }
  .current-project-body { padding: 25px; }
}
@media (max-width: 620px) {
  .current-project-card { grid-template-columns: 1fr; }
  .current-project-visual { min-height: 0; height: auto; aspect-ratio: 1.65; border-right: 0; border-bottom: 1px solid var(--line); }
  .current-project-body { padding: 23px 20px 20px; }
  .current-project-body h3 { font-size: 24px; }
  .current-project-body .project-details { grid-template-columns: 1fr 1fr; }
  .project-archive-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}

.project-card.js-reveal {
  transform: translateY(26px) scale(.975);
  transition-delay: var(--reveal-delay, 0ms);
}
.project-card.js-reveal.is-visible { transform: translateY(0) scale(1); }
.project-card.js-reveal.is-visible:hover { transform: translateY(-7px) scale(1.01); }
.current-project-card.js-reveal { transform: translateY(32px) scale(.985); }
.current-project-card.js-reveal.is-visible { transform: translateY(0) scale(1); }
.current-project-card.js-reveal.is-visible:hover { transform: translateY(-4px) scale(1.005); }

.project-archive-heading.js-reveal,
.skills .section-heading.js-reveal {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}
.project-archive-heading.js-reveal.is-visible,
.skills .section-heading.js-reveal.is-visible { opacity: 1; transform: translateX(0); }

.skill-group.js-reveal {
  opacity: 0;
  transform: translateX(-25px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}
.skill-group-learning.js-reveal { transform: translateX(25px); }
.skill-group.js-reveal.is-visible { opacity: 1; transform: translateX(0); }
.skill-list li.js-reveal {
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.skill-list li.js-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.skill-list li.js-reveal.is-visible:hover { transform: translateY(-3px) scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .project-card.js-reveal,
  .current-project-card.js-reveal,
  .project-archive-heading.js-reveal,
  .skills .section-heading.js-reveal,
  .skill-group.js-reveal,
  .skill-list li.js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}