@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/inter-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
:root {
  color-scheme: dark;
  --ink: #0c0b10; --paper: #f3eee8; --muted: #b2abb7;
  --surface: #19212b; --peach: #edb08e; --lilac: #c8b4e7;
  --line: #3d3743; --serif: "Instrument Serif", Georgia, serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--ink); color: var(--paper); font-family: Inter, sans-serif;
  font-synthesis: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; scrollbar-color: #7c6e87 var(--ink); scroll-padding-top: 28px;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.65; }
::selection { background: var(--peach); color: var(--ink); }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
button, summary, a { touch-action: manipulation; }
button, summary { user-select: none; -webkit-user-select: none; }
button { color: inherit; font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--peach); outline-offset: 6px; border-radius: 3px; }
p, h1, h2, h3, h4, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h2 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.08; letter-spacing: -.025em; }
h4 { font-size: 14px; font-weight: 500; }
svg { display: block; flex: none; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(calc(100% - 112px), 1160px); margin-inline: auto; }
.section-space { padding-top: 112px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; top: 16px; left: 16px; background: var(--paper); color: var(--ink); padding: 12px 20px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.skip-link:not(:focus) { clip-path: inset(50%); }
.site-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 36px; padding-top: env(safe-area-inset-top, 0px); }
.identity { font-size: 14px; font-weight: 500; letter-spacing: -.03em; }
.identity-mark { display: none; }
nav { display: flex; align-items: center; gap: 26px; }
nav a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); transition: color 150ms ease; }
nav .resume-nav, nav a[aria-current] { border: 1px solid #6e617d; border-radius: 999px; padding-inline: 18px; color: var(--paper); }
nav .nav-contact { color: var(--paper); }
.contact-mobile { display: none; }
.hero-atmosphere {
  overflow: clip;
  --hero-glow-x: 76%;
  --hero-glow-y: 44%;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(12,11,16,0) 20%, rgba(12,11,16,0) 76%, var(--ink) 100%),
    linear-gradient(90deg, var(--ink) 0%, rgba(12,11,16,.88) 25%, rgba(12,11,16,.36) 48%, rgba(12,11,16,0) 72%),
    radial-gradient(ellipse 48% 68% at var(--hero-glow-x) var(--hero-glow-y), rgba(57,80,117,.25) 0%, rgba(33,52,84,.22) 30%, rgba(19,31,51,.10) 64%, rgba(19,31,51,0) 100%),
    linear-gradient(125deg, #0c0b10 16%, #0e1220 58%, #0d111b 80%, #0c0b10 100%);
}
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(740px, calc(100svh - 104px)); padding-block: 64px 88px; }
.hero-copy { position: relative; z-index: 1; width: min(100%,760px); }
h1 { font-size: clamp(100px, 11vw, 156px); line-height: .86; letter-spacing: -.035em; }
h1 span { display: block; }
.hero-description { display: grid; gap: 12px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; letter-spacing: -.02em; color: var(--paper); max-width: 40ch; margin-top: 34px; font-weight: 500; }
.hero-description p { text-wrap: balance; }
.hero-actions { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 10px 0; font-size: 13px; font-weight: 500; transition: color 150ms ease, border-color 150ms ease; }
.button:active { transform: scale(.97); }
.button-primary { color: var(--paper); border-bottom: 1px solid #8b7a9b; }
.button-secondary { color: var(--muted); border-bottom: 1px solid #51465f; }
.hero-art { position: absolute; inset: -4% auto -4% 8%; z-index: 0; width: 114%; height: 108%; opacity: .55; pointer-events: none; mask-image: linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent); }
#particle-scene, .scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#particle-scene { opacity: 0; transition: opacity 500ms ease; touch-action: pan-y; }
.hero-art[data-renderer="webgl"] #particle-scene { opacity: 1; }
.hero-art[data-renderer="webgl"] .scene-fallback { visibility: hidden; }

/* Full-bleed cloud map within Selected projects. */
.project-map {
  --map-warm: #ff5a3c;
  --map-cool: #9dbfe1;
  position: relative;
  background:
    linear-gradient(180deg,var(--ink) 0%,rgba(12,11,16,0) 20%,rgba(12,11,16,0) 78%,var(--ink) 100%),
    radial-gradient(ellipse at 50% 52%,rgba(8,10,16,.82) 0%,rgba(8,10,16,.40) 28%,rgba(8,10,16,0) 52%),
    radial-gradient(ellipse at 26% 58%,rgba(255,90,60,.18) 0%,rgba(190,62,47,.14) 22%,rgba(190,62,47,.055) 40%,rgba(190,62,47,0) 58%),
    radial-gradient(ellipse at 76% 54%,rgba(164,202,255,.13) 0%,rgba(93,136,186,.10) 24%,rgba(93,136,186,.04) 42%,rgba(93,136,186,0) 60%),
    linear-gradient(180deg,#06070c 0%,#0a0d14 46%,#07080d 100%);
}
.map-stage { display: none; position: relative; height: clamp(560px,60vw,1120px); }
.project-map[data-map-state="ready"] .map-stage { display: block; }
#project-map-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#project-map-canvas:focus { outline: none; }
#project-map-canvas:focus-visible + .map-stage-tools .map-hint { color: var(--paper); text-decoration: underline 2px var(--peach); text-underline-offset: 5px; }
#project-map-canvas.drag { cursor: grabbing; }
.map-stage-tools { position: absolute; top: 4px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 2; }
.map-hint { color: var(--muted); font-size: 11px; }
.map-motion { pointer-events: auto; min-height: 44px; border: 0; background: transparent; padding: 10px 0 10px 16px; font-size: 11px; color: var(--muted); }
.map-motion:disabled { opacity: .6; cursor: default; }
.map-access { display: flex; align-items: start; justify-content: space-between; gap: 32px; padding-block: 18px 32px; }
.map-directory { min-width: 0; flex: 1; position: relative; }
.map-directory > ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 28px; }
.map-directory li { min-width: 0; border-bottom: 1px solid var(--line); }
.map-project-link { display: block; padding: 16px 0; }
.map-project-link strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--paper); }
.map-project-link > span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.map-project-link[data-map-group="ml"] strong { color: var(--map-warm); }
.map-project-link[data-map-group="infra"] strong { color: var(--map-cool); }
.project-map[data-map-state="ready"] .map-access { display: none; }
.map-info { position: absolute; z-index: 5; right: max(28px,calc((100% - 1160px)/2)); bottom: 14px; width: 300px; padding: 24px; background: #14121c; border: 1px solid #443c51; border-radius: 12px; }
.map-info h2 { font-family: var(--serif); font-size: 32px; line-height: 1.05; letter-spacing: -.02em; color: var(--paper); margin: 0 16px 12px 0; }
.map-info-summary { color: #c3bccd; font-size: 13px; line-height: 1.6; }
.map-close { position: absolute; top: 3px; right: 3px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); }
.map-close .icon { width: 14px; height: 14px; }
.map-nearest { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.map-nearest > span { display: block; font-size: 10px; color: var(--muted); }
.map-nearest > div { display: flex; flex-wrap: wrap; gap: 0 14px; }
.map-nearest button { padding: 6px 0; min-height: 32px; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid #62566e; font-size: 11px; }
.preview-stack { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 18px 0 6px; gap: 6px; }
.preview-stack li { font-size: 11px; line-height: 1.5; border: 1px solid #4a4758; border-radius: 4px; padding: 3px 7px; color: #d4cedc; }
.preview-links { display: flex; gap: 22px; margin-top: 8px; }
.preview-links .text-link { font-size: 12px; }
.experience {
  --experience-body: #c3bccd;
  --experience-muted: #9c94a7;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(12, 11, 16, 0) 22%, rgba(12, 11, 16, 0) 78%, var(--ink) 100%),
    radial-gradient(circle at 68% 34%, rgba(166, 139, 203, .18) 0%, rgba(166, 139, 203, .10) 18%, rgba(166, 139, 203, .04) 34%, rgba(166, 139, 203, 0) 54%),
    linear-gradient(180deg, #09080d 0%, #100d16 38%, #181320 68%, #0b0a10 100%);
  color: var(--paper);
  padding-block: 76px;
}
.experience-layout > h2 { margin-bottom: 8px; }
.experience-entry { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 28px 72px; padding-block: 44px; }
.experience-entry + .experience-entry { border-top: 1px solid var(--line); }
.experience-entry:last-child { padding-bottom: 0; }
.experience-meta { grid-column: 2; grid-row: 1 / span 2; padding-top: 6px; }
.experience-dates { font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--paper); letter-spacing: -.02em; }
.experience-location { font-size: 17px; color: var(--experience-body); margin-top: 8px; }
.experience-entry > .experience-points { grid-column: 1; max-width: 74ch; }
.role-heading h3 { font-size: 76px; line-height: .95; letter-spacing: -.03em; }
.role-heading > p { margin-top: 16px; font-size: 16px; color: var(--experience-body); }
.role-heading > p span { color: var(--experience-muted); }
.experience-points { list-style: none; padding: 0; margin: 0; }
.experience-points li { font-size: 14px; line-height: 1.8; color: var(--experience-body); padding-left: 20px; position: relative; margin-top: 20px; }
.experience-points li:first-child { margin-top: 0; }
.experience-points strong { color: var(--paper); font-weight: 600; }
.experience-points li::before { content: ""; width: 4px; height: 4px; position: absolute; left: 0; top: 10px; border-radius: 50%; background: #b38fd0; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 36px; }
.section-heading > p { color: var(--muted); font-size: 12px; }
.featured-project { background: var(--surface); border-radius: 18px; padding: 44px 44px 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; color: #b6bdca; margin-bottom: 28px; }
.featured-intro h3 { font-size: 64px; line-height: .96; letter-spacing: -.025em; margin-bottom: 24px; }
.featured-intro > p { color: #b6bdca; font-size: 14px; max-width: 42ch; }
.tech-list { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 22px 0 16px; list-style: none; color: var(--muted); font-size: 12px; }
.featured-project .tech-list { color: #b6bdca; }
.text-link { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-size: 13px; font-weight: 500; }
.text-link .icon { transition: transform 160ms var(--ease-out); }
.workflow { align-self: center; padding-block: 24px; color: var(--peach); }
.workflow-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; }
.workflow-symbol { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1; }
.workflow-steps { list-style: none; margin: 32px 0; padding: 0; }
.workflow-steps li { display: flex; align-items: baseline; gap: 20px; position: relative; padding-bottom: 30px; }
.workflow-steps li:last-child { padding-bottom: 0; }
.workflow-steps li:not(:last-child)::after { content: ""; position: absolute; top: 15px; bottom: -5px; left: 5px; width: 1px; background: #6d625e; }
.workflow-dot { position: relative; width: 11px; height: 11px; border: 1px solid var(--peach); border-radius: 50%; flex: none; }
.workflow-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--peach); opacity: 0; }
.workflow-steps strong { font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.2; }
.workflow-steps div > span { display: block; font-size: 12px; color: #b6bdca; margin-top: 6px; }
figcaption { font-size: 12px; color: #b6bdca; }
.project-details { grid-column: 1 / -1; margin-top: 30px; border-top: 1px solid #3d4551; }
.project-details summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; list-style: none; font-size: 12px; color: var(--muted); }
.featured-project summary { color: #b6bdca; }
.project-details summary::-webkit-details-marker { display: none; }
.details-toggle { width: 22px; height: 22px; position: relative; flex: none; }
.details-toggle::before, .details-toggle::after { content: ""; height: 1px; width: 12px; background: currentColor; position: absolute; top: 10px; left: 5px; }
.details-toggle::after { transform: rotate(90deg); }
details[open] > summary .details-toggle::after { transform: rotate(0); }
.details-content { overflow: hidden; }
.details-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 28px; padding: 12px 0 28px; }
.details-inner h4 { margin-bottom: 12px; }
.details-inner p { font-size: 13px; color: var(--muted); max-width: 64ch; }
.featured-project .details-inner p { color: #b6bdca; }
.detail-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.detail-foot p { font-size: 12px; max-width: 60ch; }
.close-details { display: none; align-items: center; gap: 10px; flex: none; border: 0; background: transparent; padding: 12px 0 12px 12px; font-size: 12px; min-height: 44px; }
.js .close-details { display: inline-flex; }
.close-details .icon { width: 14px; height: 14px; }
.close-details:active { opacity: .7; }
.project-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; padding: 40px 20px 0; border-bottom: 1px solid var(--line); }
.project-row-heading h3 { font-size: 39px; line-height: 1.1; letter-spacing: -.02em; }
.project-row-heading > p { font-size: 12px; color: var(--muted); margin-top: 10px; }
.project-row-body > p { font-size: 14px; color: var(--muted); max-width: 48ch; }
.project-row .project-details { margin-top: 16px; border: 0; }
.mini-flow { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--peach); font-size: 11px; }
.mini-flow > span { background: #231d1c; padding: 8px 10px; border-radius: 6px; }
.mini-flow .icon { width: 14px; height: 14px; }
.analysis-flow { color: var(--lilac); }
.analysis-flow > span { background: #241e30; }
.all-work { margin-top: 28px; }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 80px; }
.about-contact-atmosphere { position: relative; isolation: isolate; }
.about-contact-atmosphere::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -100px 0 -80px;
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 22%,#000 76%,transparent 100%);
  mask-image: linear-gradient(180deg,transparent 0%,#000 22%,#000 76%,transparent 100%);
  background:
    radial-gradient(ellipse at 72% 38%,rgba(133,69,91,.19) 0%,rgba(99,51,75,.11) 24%,rgba(63,35,56,.04) 44%,transparent 65%),
    radial-gradient(ellipse at 18% 72%,rgba(162,106,91,.055) 0%,transparent 45%),
    linear-gradient(180deg,#0c0b10 0%,#151018 46%,#0c0b10 100%);
}
.about-body { min-width: 0; }
.about-body > p { font-size: 14px; color: var(--muted); margin-bottom: 20px; max-width: 65ch; overflow-wrap: break-word; }
.about-body .about-lead { font-family: var(--serif); font-size: 36px; line-height: 1.12; color: var(--paper); margin-bottom: 26px; }
.education { display: flex; flex-direction: column; font-size: 12px; margin-top: 28px; gap: 4px; }
.education span:not(:first-child) { color: var(--muted); }
.contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 80px; padding-bottom: 72px; }
.contact h2 { font-size: clamp(64px, 7vw, 100px); }
.contact-intro > p { font-size: 14px; color: var(--muted); margin-top: 32px; max-width: 46ch; line-height: 1.65; }
.contact-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.contact-links .text-link { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 96px; padding-block: 24px; border-bottom: 1px solid #534957; font-size: 20px; font-weight: 600; }
.contact-links .text-link:first-child { padding-top: 8px; min-height: 80px; }
.contact-links .icon { width: 18px; height: 18px; color: var(--peach); }
.contact-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; white-space: nowrap; font-size: 18px; padding: 14px 0; border-bottom: 1px solid #796b82; }
.contact-link svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 160ms var(--ease-out); }
.site-footer { border-top: 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 24px max(24px, env(safe-area-inset-bottom, 0px)); font-size: 11px; }
.site-footer > span { color: var(--muted); }
.site-footer > a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.site-footer .icon { width: 14px; height: 14px; }
.resume-main { min-height: calc(100svh - 220px); padding-block: 100px; }
.resume-main h1 { font-size: clamp(80px, 11vw, 144px); }
.resume-main > p { color: var(--muted); font-size: 18px; max-width: 42ch; margin-top: 32px; }
.resume-main > .text-link { margin-top: 28px; }

.work > .all-work { display: flex; }
.work > .section-heading { margin-bottom: 24px; }
.work-project-index { list-style: none; margin-block: 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 26px; }
.work-project-index a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--muted); }
.work-project-index a[aria-current] { color: var(--paper); text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--lilac); }
.project-readers { display: grid; gap: 48px; }
.project-reader { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 24px 80px; padding-top: 34px; border-top: 0; scroll-margin-top: 28px; outline-offset: 5px; }
/* Full-bleed atmosphere follows each reader, including direct links and no-JS views. */
.project-reader { position: relative; isolation: isolate; padding-bottom: 44px; }
.project-reader::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block: -70px -90px; left: 50%; width: 100vw; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 25%,#000 65%,transparent 100%);
  mask-image: linear-gradient(180deg,transparent 0%,#000 25%,#000 65%,transparent 100%);
  background:
    linear-gradient(180deg,var(--ink) 0%,transparent 24%,transparent 70%,var(--ink) 100%),
    radial-gradient(ellipse at var(--reader-primary-x,24%) 38%,rgb(var(--reader-primary) / .10) 0%,rgb(var(--reader-primary) / .045) 24%,transparent 55%),
    radial-gradient(ellipse at var(--reader-secondary-x,76%) 48%,rgb(var(--reader-secondary) / .08) 0%,rgb(var(--reader-secondary) / .03) 28%,transparent 58%),
    linear-gradient(180deg,#07080c 0%,#0d1016 46%,#090b10 100%);
}
.project-reader[data-project-tone="ml"] { --reader-primary: 255 90 60; --reader-secondary: 166 139 203; }
.project-reader[data-project-tone="infra"] { --reader-primary: 157 191 225; --reader-secondary: 93 136 186; --reader-primary-x: 76%; --reader-secondary-x: 24%; }
.project-reader[data-project-tone="hybrid"] { --reader-primary: 255 90 60; --reader-secondary: 157 191 225; }
.project-reader:focus-visible { outline: 2px solid var(--peach); }
.back-to-projects { display: none; }
.project-reader .featured-intro { padding-bottom: 0; }
.project-reader .featured-intro h3 { font-size: clamp(42px,4.2vw,58px); text-wrap: balance; }
.project-reader .project-meta { display: none; }
.project-reader .project-summary { font-size: 14px; color: var(--muted); line-height: 1.65; margin-top: 20px; max-width: 42ch; }
.project-reader .tech-list { color: var(--lilac); margin-block: 22px 12px; }
.project-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.project-links .text-link { font-size: 12px; }
.project-overview { padding-top: 5px; }
.overview-points { display: grid; gap: 18px; padding-left: 17px; margin: 0; color: #c3bccd; font-size: 14px; line-height: 1.75; max-width: 64ch; }
.overview-points li { padding-left: 7px; }
.overview-points li::marker { color: var(--lilac); }
.project-overview .workflow { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.project-reader-footer { grid-column: 1 / -1; padding-block: 0 8px; }
.project-reader-footer > p { font-size: 11px; color: var(--muted); max-width: 75ch; }
@media (max-width: 760px) {
 .project-map[data-map-state="ready"] .map-stage { display: none; }
 .project-map[data-map-state="ready"] .map-access { display: flex; }
 .map-access { flex-direction: column; gap: 22px; padding-block: 24px 52px; }
 .map-directory { width: 100%; }
 .map-directory > ul { display: block; margin: 0; padding: 0; }
 .map-project-link { padding-block: 17px; }
 .project-reader { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .project-reader .featured-intro h3 { font-size: 44px; }
 .project-reader .workflow { padding-bottom: 26px; }
}
@media (hover: hover) and (pointer: fine) {
  nav a:hover, .text-link:hover, summary:hover, .close-details:hover, .site-footer a:hover { color: var(--peach); }
  .text-link:hover .icon, .contact-link:hover svg { transform: translate(2px, -2px); }
  .button-primary:hover, .button-secondary:hover { color: var(--peach); border-color: var(--peach); }
  .contact-link:hover { color: var(--peach); }
}
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
  .play-sequence li .workflow-dot::after { animation: signal 900ms var(--ease-out) both; }
  .play-sequence li:nth-child(2) .workflow-dot::after { animation-delay: 450ms; }
  .play-sequence li:nth-child(3) .workflow-dot::after { animation-delay: 900ms; }
  @keyframes signal { 0% { opacity: 0; transform: scale(.6); } 45% { opacity: 1; transform: scale(1.5); } 100% { opacity: .65; transform: scale(1); } }
}
@media (max-width: 1100px) {
  .hero { gap: 0; min-height: 650px; }
  h1 { font-size: 12.3vw; }
  .wrap { width: calc(100% - 72px); }
  nav { gap: 20px; }
  .about { gap: 48px; }
  .featured-project { padding-inline: 32px; column-gap: 40px; }
  .project-row { padding-inline: 0; column-gap: 40px; }
  .mini-flow { gap: 6px; font-size: 10px; }
  .mini-flow > span { padding-inline: 7px; }
}
@media (max-width: 760px) {
 .hero-atmosphere { --hero-glow-x: 72%; --hero-glow-y: 40%; }
 .hero { padding-block: 60px 92px; min-height: 600px; }
 h1 { font-size: clamp(80px,26vw,150px); line-height: .85; }
 .hero-description { font-size: 18px; max-width: 40ch; margin-top: 28px; gap: 14px; }
 .hero-actions { margin-top: 28px; gap: 24px; }
 .button { min-height: 44px; font-size: 12px; padding: 10px 0; }
 .hero-art { inset: 0 -20px; width: calc(100% + 40px); height: 100%; opacity: .4; }

  .wrap { width: calc(100% - 40px); }
  .site-header { min-height: 94px; align-items: flex-start; padding-top: max(22px, env(safe-area-inset-top, 0px)); gap: 20px; }
  .identity { font-size: 0; }
  .identity-mark { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.2; }
  nav { gap: 4px 14px; justify-content: flex-end; flex-wrap: wrap; max-width: 340px; }
  nav a { min-height: 34px; font-size: 11px; }
  nav .resume-nav, nav a[aria-current] { padding-inline: 10px; }
  .contact-desktop, .nav-contact .icon { display: none; }
  .contact-mobile { display: inline; }
  .button { min-height: 44px; font-size: 12px; padding: 10px 0; }
  .section-space { padding-top: 76px; }
  .experience { padding-block: 52px; }
  .experience-entry { grid-template-columns: minmax(0,1fr); row-gap: 22px; padding-block: 36px; }
  .experience-meta { grid-column: 1; grid-row: auto; padding-top: 0; }
  .experience-dates { font-size: 18px; }
  .experience-location { font-size: 15px; margin-top: 5px; }
  .experience-entry > .experience-points { grid-column: 1; }
    h2 { font-size: 42px; }
  .role-heading h3 { font-size: 48px; line-height: 1.05; text-wrap: balance; }
  .role-heading > p { font-size: 14px; margin-top: 12px; }
    .experience-points li { font-size: 13px; }
    .section-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 26px; }
  .section-heading > p { font-size: 12px; }
  .featured-project { padding: 28px 24px 0; grid-template-columns: minmax(0, 1fr); }
  .project-meta { font-size: 11px; margin-bottom: 24px; gap: 14px; }
  .featured-intro h3 { font-size: 58px; }
  .featured-intro > p, .project-row-body > p { font-size: 13px; }
  .workflow { margin-top: 24px; padding-block: 22px 12px; border-top: 1px solid #3d4551; }
  .workflow-top { font-size: 12px; }
  .workflow-symbol { width: 28px; height: 28px; }
  .workflow-steps { margin-block: 26px; }
  .workflow-steps strong { font-size: 29px; }
  .workflow-steps div > span, figcaption { font-size: 12px; }
  .project-details { margin-top: 24px; }
  .details-inner { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .details-inner p { font-size: 13px; }
  .detail-foot { flex-direction: column; align-items: start; gap: 10px; }
  .detail-foot p { font-size: 12px; }
  .close-details { padding-left: 0; }
  .project-row { padding: 32px 0 0; grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .project-row-heading h3 { font-size: 36px; }
  .project-row .project-details { margin-top: 0; }
  .mini-flow { font-size: 11px; gap: 8px; margin-top: 22px; }
  .mini-flow > span { padding-inline: 8px; }
  .mini-flow .icon { width: 12px; height: 12px; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .about-heading br { display: none; }
  .about-body > p { font-size: 14px; }
  .about-body .about-lead { font-size: 32px; }
  .contact { grid-template-columns: minmax(0,1fr); gap: 28px; padding-bottom: 48px; }
  .contact h2 { font-size: 64px; }
  .contact-intro > p { margin-top: 20px; font-size: 13px; }
  .desktop-break { display: none; }
  .contact-link { font-size: 18px; }
  .site-footer { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding-block: 16px max(24px, env(safe-area-inset-bottom, 0px)); }
  .site-footer > span { grid-row: 2; grid-column: 1 / -1; font-size: 10px; }
  .site-footer > a { grid-row: 1; grid-column: 2; }
  .resume-main { padding-block: 80px; }
  .resume-main h1 { font-size: 25vw; }
  .resume-main > p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.project-stack-icons { display: flex; flex-wrap: wrap; gap: 20px 28px; list-style: none; padding: 0; margin: 30px 0 0; }
.project-stack-icons li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.project-stack-icons img { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }