:root { color-scheme: light; --paper: #fff; --surface: #CCE1F4; --ink: #212529; --secondary: #002B50; --accent: #006bc8; --line: #dee2e6; --dot: #99C4E9; --radius: .375rem; --pill: 50rem; --container-max-width: 1048px; --container-gutter: 72px; --container-edge: max(var(--container-gutter), calc((100vw - var(--container-max-width)) / 2)); --nav-height: 60px; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --reveal-duration: 420ms; --reveal-distance: 12px; --reveal-mobile-distance: 7px; --reveal-stagger: 70ms; --reveal-secondary-delay: 80ms; --cord-track-width: 64px; --cord-hit-size: 46px; --cord-hit-offset: 23px; --cord-terminal-size: 13px; --cord-rest-y: 176px; --cord-travel: 54px; --cord-line-x: 31.3px; --cord-handle-left: 9px; --cord-control-gap: 8px; --cord-track-shift: 20px; --cord-container-edge: var(--container-edge); --cord-inset: max(calc(env(safe-area-inset-right, 0px) + var(--cord-track-shift) + 2px), calc(var(--cord-container-edge) - var(--cord-track-width) + var(--cord-handle-left) - var(--cord-control-gap) + var(--cord-track-shift))); --cord-hint-width: clamp(116px, 11vw, 142px); --cord-hint-right-edge: 40px; --cord-annotation-width: clamp(132px, 8vw, 160px); --cord-annotation-gap: 5px; --cord-annotation-half-height: 24px; --cord-annotation-label-offset: 6px; --cord-annotation-ink: #5f6368; --cord-hint-font-size: 16px; --cord-hint-gap: 4px; --cord-arrow-width: 46px; --cord-arrow-height: 48px; --cord-below-width: 68px; --cord-below-half-width: 34px; --cord-below-arrow-width: 24px; --cord-below-arrow-height: 28px; --cord-below-font-size: 12px; --cord-below-gap: 3px; --cord-below-handle-gap: 5px; --cord-clearance: 8px; --cord-nav-reserve: max(0px, calc(var(--cord-inset) + var(--cord-track-width) - var(--cord-handle-left) + var(--cord-control-gap) - var(--cord-container-edge))); --cord-reserved-lane-width: calc(40px + clamp(116px, 11vw, 142px)); --cord-lane-width: max(var(--cord-track-width), var(--cord-reserved-lane-width)); --cord-reserved-space: max(0px, calc(var(--cord-inset) + var(--cord-lane-width) + var(--cord-clearance) - var(--cord-container-edge))); }
:root[data-theme="dark"] { color-scheme: dark; --paper: #101923; --surface: #1b2c3b; --ink: #e9eef4; --secondary: #c7e0f5; --accent: #78c0ff; --line: #354b5e; --dot: #395975; --cord-annotation-ink: #b8bcc2; }
*, *::before, *::after { box-sizing: border-box; }
    html { min-width: 320px; scroll-padding-top: calc(var(--nav-height) + 16px); -webkit-tap-highlight-color: transparent; }
    body { margin: 0; min-width: 320px; background-color: var(--paper); background-image: radial-gradient(circle, var(--dot) .65px, transparent .9px); /* taste-skill-ignore: required static Dot Grid */ background-size: 24px 24px; color: var(--ink); font: 400 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
button, summary, a { touch-action: manipulation; }
    a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--secondary); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--secondary); color: var(--paper); }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - var(--container-gutter) - var(--container-gutter)), var(--container-max-width)); margin-inline: auto; }
    .site-header { position: sticky; z-index: 20; top: 0; background-color: var(--paper); background-image: radial-gradient(circle, var(--dot) .65px, transparent .9px); /* taste-skill-ignore: required static Dot Grid */ background-size: 24px 24px; }
    .nav-inner { min-height: var(--nav-height); display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: clamp(16px, 2vw, 32px); padding-inline-end: var(--cord-nav-reserve); }
    .brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; min-height: 44px; color: var(--secondary); font-size: 17px; font-weight: 700; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 18px; font-weight: 400; letter-spacing: 0; }
.brand-name { display: inline-flex; align-items: baseline; }
.brand-name-highlight { color: var(--accent); font-weight: 800; }
.cursor { display: inline-block; margin-left: 1px; color: var(--accent); font-weight: 900; -webkit-text-stroke: .3px currentColor; }
    .desktop-nav, .nav-tools, .social-links, .language-switcher { display: flex; align-items: center; }
.desktop-nav { justify-self: center; gap: clamp(8px, 1.2vw, 20px); }
    .nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--secondary); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .nav-link::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; background: var(--accent); content: ""; opacity: 0; transform: scaleX(.25); transform-origin: left center; }
.nav-link.is-active { color: var(--accent); }
.nav-link.is-active::after { opacity: 1; transform: scaleX(1); }
.mobile-links .nav-link[aria-current="page"] { color: var(--accent); }
.mobile-links .nav-link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.site-header .nav-link:focus-visible { outline: 3px solid var(--secondary); outline-offset: 4px; border-radius: 4px; }
.nav-tools { justify-self: end; gap: 10px; }
.social-links { gap: 2px; }
    .icon-link, .language-option, .menu-toggle, .cord-handle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; color: var(--secondary); background: transparent; border: 0; cursor: pointer; text-decoration: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.icon-link svg { width: 19px; height: 19px; fill: currentColor; }
    .language-switcher { gap: 2px; }
.language-option { border-radius: var(--radius); }
.language-option[aria-pressed="true"] { background: var(--surface); }
.language-option svg { width: 24px; height: 18px; border-radius: 2px; }
.icon-link:hover, .nav-link:hover, .language-option:hover { color: var(--accent); }
.icon-link:active, .language-option:active, .menu-toggle:active { transform: scale(.97); }
.mobile-controls { display: none; align-items: center; gap: 4px; }
.mobile-menu { position: relative; flex: 0 0 auto; }
.menu-toggle { width: 44px; height: 44px; border-radius: var(--radius); }
.menu-toggle:hover { color: var(--accent); }
.menu-icon { position: relative; display: block; width: 20px; height: 20px; }
.menu-icon-line { position: absolute; top: 50%; left: 2px; width: 16px; height: 2px; border-radius: var(--pill); background: currentColor; transform-origin: center; transition: transform 180ms var(--ease-out), opacity 120ms ease; }
.menu-icon-line:nth-child(1) { transform: translateY(-6px); }
.menu-icon-line:nth-child(2) { transform: translateY(0); }
.menu-icon-line:nth-child(3) { transform: translateY(6px); }
.menu-toggle[aria-expanded="true"] .menu-icon-line:nth-child(1) { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon-line:nth-child(2) { opacity: 0; transform: scaleX(.6); }
.menu-toggle[aria-expanded="true"] .menu-icon-line:nth-child(3) { transform: translateY(0) rotate(-45deg); }
    .mobile-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: min(320px, calc(100vw - var(--container-gutter) - var(--container-gutter))); padding: 12px; background: var(--surface); }
.mobile-panel[hidden] { display: none; }
.mobile-links { display: grid; }
.mobile-links .nav-link { padding-inline: 10px; }
.mobile-tools { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 4px 0; }
.mobile-tools .social-links { gap: 0; }
.mobile-preferences { display: flex; align-items: center; gap: 2px; }
.mobile-tools .language-switcher { border-left: 0; padding-left: 0; }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--secondary); cursor: pointer; touch-action: manipulation; }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[aria-pressed="true"] { background: var(--paper); }
.theme-toggle:hover { color: var(--accent); }
main { display: block; }
    .hero { min-height: calc(100svh - var(--nav-height)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, min(36vw, 360px)); align-items: center; gap: clamp(24px, 6vw, 84px); padding-block: clamp(48px, 7vh, 88px); }
.hero-copy { min-width: 0; }
.hero-role-badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 0 12px; padding: 5px 10px; border: 1px solid rgba(0,107,200,.28); /* taste-skill-ignore: user-requested thin blue pill border */ border-radius: var(--pill); background: rgba(204,225,244,.3); color: var(--accent); }
.hero-role-dot { position: relative; display: inline-grid; width: 8px; height: 8px; flex: 0 0 8px; place-items: center; color: currentColor; }
.hero-role-pulse { position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(.8); transform-origin: center; }
.hero-role-core { position: relative; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hero-role-label { min-width: 0; max-width: 100%; color: var(--accent); font-size: clamp(10px, calc(.75vw + 8px), 11px); font-weight: 600; letter-spacing: .055em; line-height: 1.35; text-wrap: pretty; }
h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 12ch; margin-bottom: 10px; color: var(--secondary); font-size: clamp(42px, 5.2vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
    .hero #hero-title { max-width: 14ch; font-size: clamp(42px, 5.2vw, 64px); }
    .specialty { margin: 0; color: var(--accent); font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.3; }
    .lede { max-width: 58ch; margin: 18px 0 0; color: var(--ink); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.hero-stack { margin-top: 24px; }
.stack-title { margin-bottom: 9px; color: var(--secondary); font-size: 15px; font-weight: 700; }
.tech-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tech-list li { padding: 4px 10px; border-radius: var(--radius); background: var(--surface); color: var(--secondary); font-size: 14px; line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--paper); font-size: 15px; font-weight: 700; text-decoration: none; touch-action: manipulation; transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.hero-actions > .button { gap: 9px; min-height: 48px; border: 1px solid transparent; white-space: nowrap; transition: transform 180ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.hero-actions > .button > .button-arrow { width: 16px; height: 16px; flex: 0 0 16px; transition: transform 180ms var(--ease-out); }
.hero-actions > .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero-actions > .button:active { transform: translateY(0) scale(.98); box-shadow: none; }
.button-secondary { background: var(--surface); color: var(--secondary); }
.hero-media { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; width: min(100%, 380px); margin: 0; justify-self: center; }
.profile-frame { position: relative; grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, 380px); padding: 10px; overflow: visible; border: 1px solid rgba(153,196,233,.62); border-radius: 26px; background: var(--paper); box-shadow: 0 18px 38px rgba(0,107,200,.12), 0 0 28px rgba(0,107,200,.06); /* taste-skill-ignore: requested subtle blue frame border, diffuse shadow, and outer glow */ }
.profile-motion { position: relative; width: 100%; transform: perspective(900px) rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; transition: transform 360ms var(--ease-out); }
.terminal-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 6px; width: 100%; height: 38px; padding: 8px clamp(8px, 1vw, 12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--line) 54%, transparent); color: var(--secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: clamp(11px, calc(.625vw + 9px), 12px); line-height: 1; } /* taste-skill-ignore: requested monospace terminal prompt and subtle bottom separator. */
.terminal-lights { display: inline-flex; grid-column: 1; align-items: center; gap: 5px; justify-self: start; min-width: 0; }
.terminal-light { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.terminal-light-red { background: var(--bs-red, #dc3545); }
.terminal-light-amber { background: var(--bs-yellow, #ffc107); }
.terminal-light-green { background: var(--bs-green, #198754); }
.terminal-user { grid-column: 2; justify-self: center; color: var(--secondary); font-weight: 600; white-space: nowrap; }
.terminal-status { grid-column: 3; justify-self: end; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--bs-green, #198754); }
.java-greeting { margin: 0; padding: 8px clamp(8px, 1vw, 12px); background: var(--paper); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.4; } /* taste-skill-ignore: user explicitly requested selectable Java code in monospace. */
.java-greeting code { color: inherit; font: inherit; white-space: normal; overflow-wrap: normal; }
.java-greeting .java-method { color: var(--accent); font-weight: 600; }
.java-greeting .java-string { color: var(--secondary); white-space: nowrap; }
.profile-photo-clip { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0 0 16px 16px; background: var(--surface); }
.profile-frame.is-tilting .profile-motion { transition: none; }
    .portrait { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 34%; }
.profile-photo-clip::after { position: absolute; inset: 52% 0 0; background: linear-gradient(to top, rgba(0,25,48,.78), rgba(0,25,48,.3) 50%, transparent); /* taste-skill-ignore: requested bottom-only photo scrim */ content: ""; pointer-events: none; }
.profile-badges { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.profile-badges[hidden] { display: none; }
.profile-badge { position: absolute; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); padding: 6px 11px; border: 1px solid rgba(153,196,233,.38); border-radius: var(--pill); background: var(--paper); box-shadow: 0 3px 10px rgba(0,43,80,.12); /* taste-skill-ignore: requested subtle badge border and short shadow */ color: var(--secondary); font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.profile-badge[data-position="top-right"] { top: 12px; right: 12px; }
.profile-badge[data-position="bottom-left"] { bottom: 12px; left: 12px; }
.profile-badge[data-position="bottom-right"] { right: 12px; bottom: 12px; }
.profile-badge[data-kind="availability"]::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #198754; content: ""; }
.microservices-card { position: relative; z-index: 2; grid-column: 1; grid-row: 1; align-self: end; justify-self: start; display: flex; align-items: center; gap: 11px; width: min(268px, calc(100% - 10px)); margin: 0 0 56px -14px; padding: 12px 14px; border-radius: 12px; background: var(--secondary); box-shadow: 0 12px 28px rgba(0,43,80,.24); /* taste-skill-ignore: requested floating card elevation */ color: var(--paper); transform: translate3d(0,0,20px); transition: transform 280ms var(--ease-out); }
.microservices-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); }
.microservices-icon svg { display: block; width: 19px; height: 19px; }
.microservices-copy { min-width: 0; }
.microservices-copy h2 { margin: 0 0 3px; color: var(--paper); font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.microservices-copy p { margin: 0; color: color-mix(in srgb, var(--paper) 84%, transparent); font-size: 12px; line-height: 1.35; }
    .projects, .skills-section, .about-section { padding: 34px 0 84px; }
.section-divider { border-top: 1px solid var(--line); /* taste-skill-ignore: explicitly requested section divider */ }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section-heading-main { display: grid; gap: 10px; min-width: 0; }
.section-heading-main .hero-role-badge { margin-bottom: 0; }
.section-heading > p { max-width: 38ch; text-align: right; }
h2 { margin-bottom: 0; color: var(--secondary); font-size: clamp(27px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.section-heading p { margin-bottom: 0; color: var(--secondary); font-size: 15px; }
.bank-experience { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid rgba(0,107,200,.22); /* taste-skill-ignore: user-requested outlined banking experience card */ border-radius: 14px; background: rgba(204,225,244,.38); box-shadow: 0 2px 8px rgba(0,43,80,.06); /* taste-skill-ignore: user-requested minimal card depth */ color: var(--secondary); }
.bank-experience-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 12px; background: var(--accent); color: var(--paper); }
.bank-experience-icon svg { display: block; width: 24px; height: 24px; }
.bank-copy { min-width: 0; }
.bank-copy h2 { margin: 0 0 3px; color: var(--secondary); font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.3; text-wrap: pretty; }
.bank-copy p { margin: 0; color: var(--secondary); font-size: 14px; line-height: 1.45; }
.certifications { margin-top: 18px; }
.certifications-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title issuer"; align-items: center; gap: 8px; margin-bottom: 10px; }
.certifications-heading h2 { grid-area: title; color: var(--secondary); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.certification-issuer { grid-area: issuer; margin: 0; color: var(--secondary); font-size: 13px; font-weight: 600; }
.certifications-mark { grid-area: icon; display: block; width: 22px; height: 22px; flex: 0 0 22px; }
.certification-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.certification-list li { min-width: 0; }
.certification-card { min-width: 0; min-height: 88px; display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(153,196,233,.52); /* taste-skill-ignore: user-requested certification-card outline */ border-radius: 14px; background: rgba(204,225,244,.24); }
.certification-copy { min-width: 0; }
.certification-copy h3 { margin: 0; color: var(--secondary); font-size: 15px; font-weight: 700; line-height: 1.32; overflow-wrap: anywhere; }
.certification-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 5px; color: var(--secondary); font-size: 12px; line-height: 1.35; }
.certification-level { font-size: 12px; font-weight: 600; }
.certification-badge { display: block; width: 72px; height: 72px; align-self: center; justify-self: end; object-fit: contain; }
.certification-link { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 3px; min-height: 44px; max-width: 100%; margin-top: 6px; padding: 0 8px; border: 0; border-radius: var(--pill); background: transparent; color: var(--secondary); font-size: 11px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: normal; box-shadow: none; transition: transform 180ms var(--ease-out); }
.certification-link::before { position: absolute; inset: 5px 0; z-index: -1; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: inherit; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); content: ""; pointer-events: none; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.certification-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--pill); }
.certification-link:active { transform: scale(.98); }
.certification-link:active::before { background-color: color-mix(in srgb, var(--accent) 22%, var(--paper)); box-shadow: none; }
.certification-link-arrow { font-size: 12px; line-height: 1; transition: transform 180ms var(--ease-out); }
:root.has-scroll-reveals [data-scroll-reveal] { transition: opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms), translate var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms); }
:root.has-scroll-reveals [data-scroll-reveal]:not([data-scroll-revealed]) { opacity: 0; translate: 0 var(--reveal-distance); }
:root.has-scroll-reveals [data-scroll-reveal][data-scroll-revealed] { opacity: 1; translate: 0 0; }
:root.has-scroll-reveals [data-scroll-reveal][data-scroll-reveal-immediate] { opacity: 1; translate: none; transition: none; }
@media (prefers-reduced-motion: reduce) { :root.has-scroll-reveals [data-scroll-reveal] { opacity: 1; translate: none; transition: none; } }
.proof-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.proof-badges[hidden] { display: none; }
.proof-badges li { padding: 5px 10px; border-radius: var(--pill); background: var(--surface); color: var(--secondary); font-size: 13px; font-weight: 700; }
.project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.3vw, 32px); }
.project-list .project-card:nth-child(3n + 2) { --reveal-delay: var(--reveal-stagger); }
.project-list .project-card:nth-child(3n + 3) { --reveal-delay: calc(var(--reveal-stagger) * 2); }
.project-card { min-width: 0; display: flex; flex-direction: column; padding: 16px; border: 1px solid color-mix(in srgb, var(--line) 72%, var(--secondary) 28%); border-radius: 14px; background: color-mix(in srgb, var(--paper) 93%, var(--surface) 7%); transition: border-color 160ms ease; }
@media (hover: hover) { .project-card:hover { border-color: var(--accent); } }
.project-card:focus-within { border-color: var(--accent); }
.project-media { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 9px; background: var(--surface); color: var(--paper); }
.project-media img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.project-media-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,43,80,.2); color: var(--paper); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
.project-view-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 116px; min-height: 44px; padding: 0 16px; border-radius: var(--pill); background: var(--secondary); color: var(--paper); font-size: 14px; font-weight: 700; line-height: 1.2; }
.project-eye-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.project-media:hover .project-media-overlay, .project-media:focus-visible .project-media-overlay { opacity: 1; }
.project-media:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (hover: none), (pointer: coarse) { .project-media-overlay { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .project-media-overlay, .project-card { transition: none; } }
.project-copy { display: flex; flex: 1; flex-direction: column; padding-top: 16px; }
h3 { margin-bottom: 8px; color: var(--secondary); font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
h3 a { text-decoration: none; }
h3 a:hover { color: var(--accent); text-decoration: underline; }
.project-copy p { margin-bottom: 15px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.project-copy .tech-list { margin-top: auto; }
.project-copy .tech-list li { padding: 3px 8px; font-size: 13px; }
.project-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.project-details-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.project-details-link:hover { color: var(--secondary); text-decoration: underline; }
.project-card-external-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.project-demo-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--secondary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.project-demo-link:hover { border-color: var(--accent); color: var(--accent); }
.skills-carousel { display: grid; gap: 16px; }
.skills-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.skills-filters { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.skills-filters[hidden], .skills-controls[hidden], .skills-autoplay-status[hidden] { display: none; }
.skills-filter { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); background: color-mix(in srgb, var(--paper) 92%, var(--surface) 8%); color: var(--secondary); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.skills-filter[aria-pressed="true"] { border-color: var(--secondary); background: var(--secondary); color: var(--paper); }
.skills-filter-count { margin-inline-start: 5px; font-variant-numeric: tabular-nums; }
.skills-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.skills-autoplay-status { display: inline-flex; align-items: center; gap: 8px; color: var(--secondary); font-size: 14px; line-height: 1.35; white-space: nowrap; }
.skills-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; }
.skills-autoplay-status[data-state="paused"] .skills-status-dot { opacity: .45; }
.skills-control-buttons { display: flex; align-items: center; gap: 8px; }
.skills-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--secondary); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; touch-action: manipulation; }
.skills-control svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skills-control svg[hidden] { display: none; }
.skills-control[disabled] { opacity: .5; cursor: not-allowed; }
.skills-help { margin: 0; color: var(--secondary); font-size: 14px; line-height: 1.4; }
.skills-track { display: flex; gap: 16px; min-width: 0; margin: 0; padding: 2px 2px 12px; overflow-x: auto; overflow-y: hidden; list-style: none; overscroll-behavior-inline: contain; scroll-behavior: auto; scrollbar-color: var(--secondary) var(--surface); scrollbar-width: thin; -webkit-overflow-scrolling: touch; cursor: grab; }
.skills-track:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.skills-track.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.skills-slide { flex: 0 0 calc((100% - 48px) / 4); min-width: 0; }
.skills-slide[hidden] { display: none; }
.skills-card { display: flex; min-height: 246px; height: 100%; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper) 93%, var(--surface) 7%); }
.skills-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.skills-card-icon, .skills-logo-fallback { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; }
.skills-card-icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.skills-card-icon img[src$="/python.svg"] { transform: scale(1.5); }
:root[data-theme="dark"] .skills-card-icon img[src$="/langgraph-langchain.svg"] { filter: brightness(0) invert(1); }
.skills-card-icon .skills-icon-dark { display: none; }
:root[data-theme="dark"] .skills-card-icon .skills-icon-light { display: none; }
:root[data-theme="dark"] .skills-card-icon .skills-icon-dark { display: block; }
.skills-logo-fallback { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--secondary); font-size: 13px; font-weight: 700; line-height: 1; text-align: center; }
.skills-category { margin: 0; color: var(--secondary); font-size: 13px; font-weight: 600; line-height: 1.3; }
.skills-card h3 { margin: 0 0 6px; color: var(--secondary); font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.skills-specialty { margin: 0 0 10px; color: var(--accent); font-size: 14px; font-weight: 700; line-height: 1.4; }
.skills-description { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .skills-filter, .skills-control { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
  .skills-filter:hover, .skills-control:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
}
@media (max-width: 1000px) {
  .skills-slide { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 760px) {
  .skills-toolbar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .skills-filters { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-color: var(--secondary) var(--surface); scrollbar-width: thin; }
  .skills-controls { flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; }
  .skills-autoplay-status { flex: 1 1 100%; }
  .skills-control-buttons { justify-content: flex-start; }
  .skills-slide { flex-basis: min(100%, 336px); }
}
@media (max-width: 420px) {
  .skills-card { padding: 14px; }
  .skills-card h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .skills-filter, .skills-control { transition: none; }
  .skills-track { scroll-behavior: auto; }
}
.about-section { padding-block: 36px 84px; }
.about-heading { max-width: 760px; margin-bottom: 22px; }
.about-eyebrow { margin-bottom: 8px; }
.about-title { color: var(--secondary); font-size: clamp(34px, 4vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.about-subtitle { max-width: 68ch; margin: 12px 0 0; color: var(--ink); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; text-wrap: pretty; }
.about-filters { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 3px; margin: 0 0 26px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper) 92%, var(--surface) 8%); }
.about-filters[hidden] { display: none; }
.about-filter { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--secondary); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.about-filter[aria-pressed="true"] { background: var(--secondary); color: var(--paper); }
.about-filter-count { font-variant-numeric: tabular-nums; }
.about-filter:focus-visible, .about-document-link:focus-visible, .about-organization:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.about-timeline { position: relative; display: grid; gap: 18px; margin: 0; padding: 0 0 0 34px; list-style: none; }
.about-timeline::before { position: absolute; top: 14px; bottom: 14px; left: 10px; width: 1px; background: var(--line); content: ""; }
.about-timeline-item { position: relative; min-width: 0; }
.about-timeline-item[hidden] { display: none; }
.about-timeline-item::before { position: absolute; top: 22px; left: -30px; width: 13px; height: 13px; border: 2px solid var(--line); border-radius: 50%; background: var(--paper); content: ""; transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out); }
.about-timeline-item[data-scroll-revealed]::before { border-color: var(--accent); background: var(--accent); }
.about-timeline-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 2px 8px rgba(0,43,80,.07); color: var(--ink); }
:root[data-theme="dark"] .about-timeline-card { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.about-card-header { min-width: 0; margin-bottom: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.about-employer-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.about-employer-heading .about-card-title { min-width: 0; margin: 0; }
.about-employer-mark { display: block; width: 52px; height: 52px; flex: 0 0 52px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); object-fit: contain; }
.about-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 9px; color: var(--secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.4; }
.about-card-category { color: var(--accent); font-weight: 700; }
.about-card-date { color: var(--secondary); font-variant-numeric: tabular-nums; }
.about-card-period { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 10px; }
.about-card-duration { color: var(--secondary); font-size: 12.5px; font-weight: 600; }
.about-card-title { margin: 0 0 3px; color: var(--secondary); font-size: clamp(19px, 2vw, 22px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.about-institution { margin: 0; color: var(--secondary); font-size: 15px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.about-institution a, .about-organization { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 3px; }
.about-card-description { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.about-role + .about-role { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.about-role-summary { display: grid; min-height: 44px; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 6px 14px; cursor: pointer; list-style: none; }
.about-role-summary::-webkit-details-marker { display: none; }
.about-role-summary::marker { content: ""; }
.about-role-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.about-role-title { min-width: 0; color: var(--secondary); font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.about-role-period { color: var(--secondary); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.about-role-chevron { width: 9px; height: 9px; justify-self: center; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 180ms var(--ease-out); }
.about-role[open] > .about-role-summary .about-role-chevron { transform: rotate(225deg); }
.about-role-content { min-width: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.about-role-label { margin: 0; color: var(--secondary); font-size: 13px; font-weight: 700; line-height: 1.35; }
.about-initiatives { display: grid; min-width: 0; gap: 13px; margin: 0; padding: 0; list-style: none; }
.about-initiative { display: grid; min-width: 0; grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr); grid-template-areas: "technologies content"; align-items: start; gap: 12px 24px; }
.about-initiative-content { min-width: 0; grid-area: content; }
.about-initiative-technologies-group { min-width: 0; grid-area: technologies; }
.about-initiative-technologies { display: flex; min-width: 0; flex-wrap: wrap; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.about-initiative-technologies li { max-width: 100%; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 82%, var(--paper) 18%); color: var(--secondary); font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.about-initiative + .about-initiative { padding-top: 13px; border-top: 1px solid var(--line); }
.about-initiative-title { margin: 0 0 5px; color: var(--secondary); font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.about-initiative-description { max-width: 72ch; margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; text-wrap: pretty; }
.about-initiative-proposal { max-width: 72ch; margin: 7px 0 0; color: var(--secondary); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.about-initiative-proposal strong { font-weight: 700; }
.about-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.about-tags li { max-width: 100%; padding: 4px 9px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 82%, var(--paper) 18%); color: var(--secondary); font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.about-projects { display: grid; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.about-project { min-width: 0; }
.about-project + .about-project { padding-top: 18px; border-top: 1px solid var(--line); }
.about-project-header { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 16px; margin-bottom: 12px; }
.about-project-title { margin: 0; color: var(--secondary); font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.about-project-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px 10px; color: var(--secondary); font-size: 13px; line-height: 1.4; }
.about-project-period-label { font-weight: 700; }
.about-project-period { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.about-project-mode { max-width: 100%; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--secondary); font-size: 12px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.about-project-layout { display: grid; min-width: 0; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(16px, 2.6vw, 28px); }
.about-project-media { min-width: 0; }
.about-project-media-link { display: block; min-width: 0; overflow: hidden; border-radius: 10px; background: var(--surface); }
.about-project-media img { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.about-project-content { min-width: 0; }
.about-project-description { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; text-wrap: pretty; }
.about-project-detail { margin: 9px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.about-project-technology-label { font-weight: 700; }
.about-project-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.about-project-tags li { max-width: 100%; padding: 3px 7px; border-radius: 5px; background: color-mix(in srgb, var(--surface) 82%, var(--paper) 18%); color: var(--secondary); font-size: 12px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.about-project-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.about-project-action { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 8px 11px; border-radius: 7px; background: var(--surface); color: var(--secondary); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform 160ms var(--ease-out); }
.about-project-action:active { transform: scale(.97); }
.about-project-action:focus-visible, .about-project-media-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.about-card-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; margin-top: 14px; }
.about-document-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 7px; background: var(--surface); color: var(--secondary); font-size: 14px; font-weight: 700; text-decoration: none; }
.about-document-link:hover { background: var(--accent); color: var(--paper); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-filter, .about-document-link { transition: color 160ms ease, background-color 160ms ease; }
  .about-filter:hover:not([aria-pressed="true"]) { color: var(--accent); }
  .about-timeline-card { transition: border-color 160ms ease; }
  .about-timeline-item:hover .about-timeline-card { border-color: color-mix(in srgb, var(--line) 35%, var(--accent) 65%); }
  .about-project-action:hover { transform: translateY(-2px); }
}
@media (max-width: 900px) {
  .about-initiative { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "technologies"; gap: 10px; }
}
@media (max-width: 760px) {
  .about-section { padding-block: 28px 58px; }
  .about-heading { margin-bottom: 20px; }
  .about-title { font-size: clamp(32px, 8vw, 38px); }
  .about-subtitle { margin-top: 10px; font-size: 16px; }
  .about-filters { margin-bottom: 22px; }
  .about-timeline { gap: 14px; padding-left: 24px; }
  .about-timeline::before { left: 6px; }
  .about-timeline-item::before { top: 20px; left: -23px; width: 12px; height: 12px; }
  .about-timeline-card { padding: 17px; }
  .about-card-meta { font-size: 12.5px; }
  .about-card-period { justify-content: flex-start; }
  .about-role-summary { grid-template-columns: minmax(0, 1fr) 12px; grid-template-rows: auto auto; gap: 3px 12px; }
  .about-role-title, .about-role-period { grid-column: 1; }
  .about-role-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .about-project-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .about-project-media { width: 100%; }
  .about-project-media-link { max-width: 520px; }
  .about-project-media img { aspect-ratio: 16 / 9; }
  .about-project-header { align-items: flex-start; }
  .about-project-meta { gap: 5px 8px; }
  .about-project-actions { gap: 8px; }
  .about-card-footer { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .about-filter, .about-document-link, .about-timeline-card, .about-role-chevron { transition: none; }
  .about-project-action { transition-duration: 100ms; }
  .about-project-action:active { transform: scale(.99); }
  .about-timeline-item[data-scroll-reveal]::before { transition: none; }
}
.contact-section { --contact-error: #b42318; padding: 34px 0 84px; }
:root[data-theme="dark"] .contact-section { --contact-error: #ffb4ab; }
.contact-heading { max-width: 64ch; margin-bottom: 30px; }
.contact-heading h2 { max-width: 18ch; margin: 0 0 10px; font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.contact-heading p { max-width: 62ch; margin: 0; color: var(--secondary); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: start; gap: clamp(24px, 3.8vw, 48px); }
.contact-form { min-width: 0; padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper) 96%, var(--surface) 4%); color: var(--ink); }
.contact-form h3 { margin: 0 0 8px; color: var(--secondary); font-size: 22px; line-height: 1.25; }
.contact-form-intro { margin: 0 0 20px; color: var(--secondary); font-size: 14px; }
.contact-field-list { display: grid; gap: 16px; }
.contact-field { display: grid; min-width: 0; gap: 6px; }
.contact-field-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.contact-field label { color: var(--secondary); font-size: 15px; font-weight: 700; }
.contact-field-help { margin: 0; color: var(--secondary); font-size: 14px; line-height: 1.45; }
.contact-message-counter { color: var(--secondary); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-field input, .contact-field textarea { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font: inherit; line-height: 1.45; transition: border-color 140ms ease; }
.contact-field textarea { min-height: 150px; resize: vertical; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 2px; }
.contact-field input[aria-invalid="true"], .contact-field textarea[aria-invalid="true"] { border-color: var(--contact-error); }
.contact-field-error { margin: 0; color: var(--contact-error); font-size: 14px; font-weight: 600; line-height: 1.4; }
.contact-field-error[hidden], .contact-feedback[hidden] { display: none; }
.contact-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.contact-form-actions .button { min-height: 48px; cursor: pointer; }
.contact-submit { gap: 10px; }
.contact-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.contact-submit-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; background-color: currentColor; -webkit-mask: url("../icon/send.svg") center / contain no-repeat; mask: url("../../assets/icon/send.svg") center / contain no-repeat; }
.contact-submit[disabled] { cursor: progress; opacity: .72; }
.contact-submit[disabled]:hover { background: var(--accent); color: var(--paper); }
.contact-submit:active:not(:disabled) { transform: translateY(1px); }
.contact-feedback { margin: 14px 0 0; padding: 12px 14px; border-radius: 7px; background: var(--surface); color: var(--secondary); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.contact-feedback--error { background: color-mix(in srgb, var(--contact-error) 10%, var(--paper)); color: var(--contact-error); }
.contact-feedback--warning { background: color-mix(in srgb, var(--surface) 70%, var(--paper)); color: var(--secondary); }
.contact-aside { display: grid; align-content: start; gap: 18px; min-width: 0; }
.contact-card { --reveal-delay: var(--reveal-secondary-delay); min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 8px 22px color-mix(in srgb, var(--secondary) 12%, transparent); }
.contact-focus { --reveal-delay: calc(var(--reveal-secondary-delay) * 2); }
.contact-card-header { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.contact-card-header h3 { margin: 0; color: var(--secondary); font-size: 21px; line-height: 1.25; }
.contact-aside-intro { margin: 0 0 10px; color: var(--secondary); font-size: 15px; line-height: 1.5; }
.contact-channels { display: grid; margin: 0; padding: 0; list-style: none; }
.contact-channel-item { min-width: 0; }
.contact-channel-item + .contact-channel-item { border-top: 1px solid var(--line); }
.contact-channel { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 62px; padding: 10px 2px; border-radius: 9px; color: var(--secondary); text-decoration: none; transition: color 150ms ease, background-color 150ms ease; }
.contact-channel:active { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); }
.contact-channel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .contact-channel:hover { background: color-mix(in srgb, var(--accent) 6%, var(--paper)); color: var(--accent); text-decoration: none; }
  .contact-field input:hover:not(:focus-visible):not([aria-invalid="true"]), .contact-field textarea:hover:not(:focus-visible):not([aria-invalid="true"]) { border-color: color-mix(in srgb, var(--line) 35%, var(--accent) 65%); }
}
.contact-channel-icon-box { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); }
.contact-channel-icon { display: block; width: 22px; height: 22px; color: currentColor; }
.contact-channel-copy { display: grid; min-width: 0; gap: 2px; }
.contact-channel-label { color: inherit; font-size: 14px; font-weight: 700; }
.contact-channel-value { color: inherit; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.contact-external-note { display: block; }
.contact-channel-arrow { display: block; width: 18px; height: 18px; color: currentColor; }
.contact-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0; padding: 0; list-style: none; }
.contact-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--secondary); font-size: 13px; font-weight: 700; line-height: 1.2; }
.contact-focus { min-width: 0; }

@media (max-width: 1000px) { .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
@media (max-width: 760px) {
  .contact-section { padding-block: 28px 58px; }
  .contact-heading { margin-bottom: 24px; }
  .contact-heading h2 { font-size: clamp(32px, 8vw, 40px); }
  .contact-heading p { font-size: 16px; }
  .contact-form { padding: 16px; }
  .contact-form-actions { flex-direction: column; align-items: stretch; }
  .contact-form-actions > .button { width: 100%; }
  .contact-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-field input, .contact-field textarea, .contact-channel, .contact-submit { transition: none; }
  .contact-submit:active:not(:disabled) { transform: none; }
}
.cord-slot { position: fixed; z-index: 25; top: 0; left: 0; right: auto; width: var(--cord-track-width); height: calc(var(--cord-rest-y) + var(--cord-travel) + var(--cord-hit-size)); overflow: visible; pointer-events: none; visibility: hidden; --cord-safe-left: env(safe-area-inset-left, 0px); --cord-safe-right: env(safe-area-inset-right, 0px); --cord-safe-top: env(safe-area-inset-top, 0px); }
.cord-slot.is-positioned { visibility: visible; }
.cord-slot.is-unavailable { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.cord-assembly { position: absolute; inset: 0 auto 0 0; width: 100%; height: 100%; pointer-events: none; }
.cord-line { position: absolute; top: 0; left: calc(100% - var(--cord-track-width) - var(--cord-track-shift)); display: block; width: var(--cord-track-width); height: var(--cord-rest-y); overflow: visible; color: var(--secondary); pointer-events: none; }
.cord-line path { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-opacity: .58; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cord-handle { position: absolute; z-index: 1; top: calc(var(--cord-rest-y) - var(--cord-hit-offset)); left: calc(100% - var(--cord-track-width) + var(--cord-handle-left) - var(--cord-track-shift)); display: grid; place-items: center; width: var(--cord-hit-size); height: var(--cord-hit-size); min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--secondary); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: auto; }
.cord-handle svg { display: none; }
.cord-handle::after { content: ""; width: var(--cord-terminal-size); height: var(--cord-terminal-size); border-radius: 50%; background: var(--surface); pointer-events: none; transition: transform 120ms ease-out; }
.cord-handle:active::after { transform: scale(.92); }
.cord-handle:active, .cord-handle.is-dragging { cursor: grabbing; }
.cord-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cord-slot.is-compact .cord-handle { left: calc(100% - var(--cord-track-width) + var(--cord-handle-left)); }
.cord-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cord-hint { position: absolute; z-index: 24; inset: 0; color: var(--cord-annotation-ink); pointer-events: none; }
.cord-hint--lateral { position: absolute; top: calc(var(--cord-rest-y) - var(--cord-annotation-half-height)); right: var(--cord-hint-right-edge); width: var(--cord-hint-width); height: var(--cord-arrow-height); pointer-events: none; }
.cord-hint-content { position: absolute; inset-block: 0; left: calc(var(--cord-hint-width) + var(--cord-hint-right-edge) - var(--cord-track-width) - var(--cord-track-shift) + var(--cord-handle-left) + var(--cord-hit-offset) - var(--cord-annotation-gap) - var(--cord-annotation-width)); display: grid; width: var(--cord-annotation-width); grid-template-columns: minmax(0, 1fr) var(--cord-arrow-width); align-items: center; gap: var(--cord-hint-gap); white-space: nowrap; pointer-events: none; }
.cord-hint-text { position: relative; top: var(--cord-annotation-label-offset); display: flex; min-width: 0; flex-direction: column; align-items: flex-end; overflow: visible; color: currentColor; font-family: "Segoe Print", "Bradley Hand", cursive; font-size: var(--cord-hint-font-size); font-style: italic; font-weight: 600; line-height: 1.05; text-align: right; white-space: nowrap; }
.cord-hint-text span { display: block; }
.cord-hint-arrow { display: block; width: var(--cord-arrow-width); height: var(--cord-arrow-height); flex: none; color: currentColor; overflow: visible; pointer-events: none; }
.cord-hint-arrow path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cord-hint--below { position: absolute; top: calc(var(--cord-rest-y) + var(--cord-hit-offset) + var(--cord-below-handle-gap)); left: calc(100% - var(--cord-track-width) - var(--cord-track-shift) + var(--cord-handle-left) + var(--cord-hit-offset) - var(--cord-below-half-width)); display: none; width: var(--cord-below-width); flex-direction: column; align-items: center; gap: var(--cord-below-gap); pointer-events: none; }
.cord-hint-text--below { top: 0; align-items: center; font-size: var(--cord-below-font-size); text-align: center; }
.cord-hint-arrow--below { width: var(--cord-below-arrow-width); height: var(--cord-below-arrow-height); }
.cord-slot.is-hint-below .cord-hint--lateral { display: none; }
.cord-slot.is-hint-below .cord-hint--below { display: flex; }
.cord-slot.is-hint-hidden .cord-hint, .cord-slot.is-compact .cord-line, .cord-slot.is-compact .cord-hint { display: none; }
.cord-slot.is-compact:not(.is-menu-docked) { height: var(--nav-height); }
.cord-slot.is-menu-docked { position: relative; top: auto; right: auto; left: auto; width: 48px; height: calc(var(--cord-rest-y) + var(--cord-travel) + var(--cord-hit-size)); margin: 8px var(--cord-track-shift) 0 auto; }
@media (min-width: 1280px) and (max-width: 1599px) {
  :root { --cord-hint-width: clamp(84px, calc(10vw - 44px), 96px); --cord-hint-right-edge: 6px; --cord-annotation-width: clamp(112px, calc(6vw + 36px), 132px); --cord-annotation-half-height: clamp(17px, calc(1.875vw - 7px), 20px); --cord-hint-font-size: clamp(13px, 1.04vw, 15px); --cord-hint-gap: 3px; --cord-arrow-width: clamp(26px, calc(3.75vw - 22px), 32px); --cord-arrow-height: clamp(34px, calc(3.75vw - 14px), 40px); }
}
@media (min-width: 1600px) {
  :root { --cord-hint-width: clamp(96px, calc(25vw - 304px), 142px); --cord-hint-right-edge: clamp(10px, calc(10vw - 150px), 40px); --cord-annotation-width: clamp(140px, calc(4vw + 76px), 160px); --cord-annotation-half-height: clamp(17px, calc(2.5vw - 23px), 24px); --cord-hint-font-size: clamp(13px, calc(1vw - 2.7px), 16px); --cord-hint-gap: 4px; --cord-arrow-width: clamp(26px, calc(5vw - 54px), 46px); --cord-arrow-height: clamp(34px, calc(5vw - 46px), 48px); }
}
@media (max-width: 1000px) {
  :root { --container-gutter: 64px; --cord-track-width: 56px; --cord-hit-size: 46px; --cord-hit-offset: 23px; --cord-terminal-size: 12px; --cord-rest-y: 124px; --cord-travel: 42px; --cord-line-x: 27.3px; --cord-handle-left: 5px; --cord-control-gap: 8px; --cord-hint-width: clamp(104px, 12vw, 112px); --cord-hint-right-edge: 36px; --cord-hint-font-size: 15px; --cord-hint-gap: 4px; --cord-arrow-width: 36px; --cord-arrow-height: 40px; --cord-annotation-half-height: 20px; --cord-clearance: 8px; --cord-reserved-lane-width: calc(36px + clamp(104px, 12vw, 112px)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 38px 48px; }
  .hero-media { grid-column: 1; grid-row: 1; }
  .hero-copy { grid-column: 1; grid-row: 2; }
  .profile-frame { width: min(72vw, 320px, 100%); min-height: 0; }
}
@media (max-width: 760px) {
  :root { --container-gutter: 56px; --cord-track-width: 52px; --cord-hit-size: 44px; --cord-hit-offset: 22px; --cord-terminal-size: 12px; --cord-rest-y: 76px; --cord-travel: 34px; --cord-line-x: 25.3px; --cord-handle-left: 4px; --cord-control-gap: 6px; --cord-hint-width: 96px; --cord-hint-right-edge: 32px; --cord-hint-font-size: 13px; --cord-hint-gap: 3px; --cord-arrow-width: 32px; --cord-arrow-height: 34px; --cord-clearance: 6px; --cord-reserved-lane-width: 52px; }
}
@media (max-width: 480px) {
  .about-employer-heading { gap: 10px; }
  .about-employer-mark { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (max-width: 767px) {
  .cord-slot { display: none !important; visibility: hidden !important; pointer-events: none !important; }
  .nav-inner { padding-inline-end: 0; }
}
@media (orientation: landscape) and (max-height: 420px) {
  :root { --cord-rest-y: 72px; --cord-travel: 28px; --cord-reserved-lane-width: var(--cord-track-width); }
  .cord-hint { display: none; }
}
@media (max-width: 1000px) {
.nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
.desktop-nav, .nav-tools { display: none; }
.mobile-controls { display: flex; justify-self: end; }

.portrait { width: min(100%, 300px); }
.project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
.project-list .project-card:nth-child(2n + 2) { --reveal-delay: var(--reveal-stagger); }
}
@media (max-width: 760px) {
:root { --nav-height: 60px; --reveal-distance: var(--reveal-mobile-distance); }
.profile-frame { padding: 8px; border-radius: 24px; }
.microservices-card { position: relative; grid-column: 1; grid-row: 2; align-self: start; justify-self: center; width: min(calc(100% - 8px), 320px); margin: 12px auto 0; transform: none; }
.certification-list { grid-template-columns: 1fr; }
.certification-card { grid-template-columns: minmax(0, 1fr) 64px; }
.certification-badge { width: 64px; height: 64px; }
.certifications-heading { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon issuer"; gap: 4px 10px; }
.portrait { width: 100%; }
h1 { font-size: clamp(40px, 10vw, 54px); }
.hero #hero-title { max-width: 12ch; font-size: clamp(38px, 9vw, 54px); }
.lede { font-size: 17px; }
.projects { padding: 28px 0 58px; }
.section-heading { display: block; margin-bottom: 22px; }
.section-heading p { margin-top: 8px; }
.section-heading-main { gap: 8px; }
.section-heading > p { max-width: none; text-align: left; }
.project-list { grid-template-columns: 1fr; gap: 32px; }
.project-list .project-card { --reveal-delay: 0ms; }

}
@media (max-width: 420px) {
.brand { gap: 6px; font-size: 16px; }
.brand-mark { width: 29px; height: 32px; flex-basis: 29px; font-size: 16px; }
.hero-actions { gap: 9px; }
.hero-actions > .button { min-height: 48px; padding-inline: 14px; }
.button { font-size: 14px; }
.project-media { aspect-ratio: 4 / 3; }
.mobile-tools { gap: 4px; padding-inline: 0; }
}
@media (max-width: 350px) {
.nav-inner { gap: 8px; }
.brand { gap: 4px; font-size: 15px; }
.brand-mark { width: 26px; height: 32px; flex-basis: 26px; font-size: 14px; }
.mobile-controls { gap: 2px; }
}
@media (hover: hover) and (pointer: fine) {
.button:hover { background: var(--secondary); color: var(--paper); }
.button-secondary:hover { background: var(--surface); color: var(--secondary); }
.hero-actions > .button:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent); }
.hero-actions > .button:not(.button-secondary):hover { background-color: color-mix(in srgb, var(--accent) 90%, var(--secondary)); }
.hero-actions > .button.button-secondary:hover { background-color: color-mix(in srgb, var(--surface) 78%, var(--accent)); }
.certification-link:hover::before { background-color: color-mix(in srgb, var(--accent) 20%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent); }
.hero-actions > .button:hover:active { transform: translateY(0) scale(.98); box-shadow: none; }
.certification-link:hover:active { transform: scale(.98); }
.certification-link:hover:active::before { background-color: color-mix(in srgb, var(--accent) 28%, var(--paper)); box-shadow: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.hero-actions > .button:hover { transform: translateY(-2px); }
.hero-actions > .button:first-child:hover .button-arrow { transform: translate(2px, 2px); }
.hero-actions > .button-secondary:hover .button-arrow { transform: translate(2px, -2px); }
.certification-link:hover .certification-link-arrow { transform: translate(1px, -1px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.bank-experience, .certification-card { transition: transform 180ms var(--ease-out), border-color 180ms ease, box-shadow 180ms ease; }
.bank-experience:hover, .certification-card:hover { transform: translateY(-2px); border-color: rgba(0,107,200,.42); }
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
.cursor { animation: cursor-blink 1.35s steps(2, start) infinite; }
:root.has-scroll-reveals [data-scroll-reveal="hero-intro"][data-scroll-revealed] { animation: hero-intro-arrive 420ms var(--ease-out) both; }
:root.has-scroll-reveals [data-scroll-reveal="hero-photo"][data-scroll-revealed] { animation: hero-photo-arrive 420ms var(--ease-out) both; }
.hero-role-pulse { animation: role-badge-pulse 2.4s cubic-bezier(.16, 1, .3, 1) infinite; }
.nav-link::after { transition: opacity 180ms ease, transform 180ms var(--ease-out); }
}
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes hero-intro-arrive { from { opacity: .96; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-photo-arrive { from { opacity: .92; translate: 0 var(--reveal-distance); } to { opacity: 1; translate: 0 0; } }
@keyframes role-badge-pulse { 0% { opacity: 0; transform: scale(.8); } 10% { opacity: .34; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(2.4); } }
@supports (animation-timeline: view()) {
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.hero { view-timeline-name: --hero-view; }
.portrait { animation: portrait-parallax linear both; animation-timeline: --hero-view; animation-range: exit 0% exit 100%; }
@keyframes portrait-parallax { to { transform: translateY(3%); } }
}
}
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .cursor { animation: none; }
      .hero-role-pulse { animation: none; transform: none; opacity: 0; }
      .hero-copy > *, .hero-media, .portrait, .profile-motion, .profile-badge, .microservices-card, [data-scroll-reveal] { animation: none; transform: none; translate: none; filter: none; opacity: 1; transition: none; }
      .nav-link::after, .button, .project-media img, .cord-handle, .cord-line, .certification-link, .certification-link::before, .certification-link-arrow, .hero-actions > .button .button-arrow, .menu-icon-line { transition: none; }
      .menu-toggle:active { transform: none; }
      .hero-actions > .button, .hero-actions > .button .button-arrow, .certification-link, .certification-link::before, .certification-link-arrow { transition: none; }
      .hero-actions > .button:active, .certification-link:active { transform: none; }
      .hero-actions > .button:hover:active, .certification-link:hover:active { transform: none; }
    }
    .site-footer { border-top: 1px solid var(--line); /* taste-skill-ignore: requested subtle footer separator */ background: var(--paper); color: var(--secondary); }
    .footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; padding-block: 32px; }
    :root { --back-to-top-size: 48px; --back-to-top-edge: 24px; }
    .site-footer .footer-inner { padding-block-end: calc(var(--back-to-top-size) + var(--back-to-top-edge) + env(safe-area-inset-bottom, 0px)); }
    [data-back-to-top] {
      position: fixed;
      z-index: 12;
      right: max(var(--back-to-top-edge), env(safe-area-inset-right, 0px));
      bottom: max(var(--back-to-top-edge), env(safe-area-inset-bottom, 0px));
      display: grid;
      width: var(--back-to-top-size);
      height: var(--back-to-top-size);
      place-items: center;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
      border-radius: 12px;
      background: var(--accent);
      color: var(--paper);
      box-shadow: 0 4px 14px rgba(0, 43, 80, .16);
      cursor: pointer;
      opacity: 0;
      translate: 0 6px;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out), visibility 0s linear 180ms;
    }
    [data-back-to-top][data-visible="true"] {
      opacity: 1;
      translate: 0 0;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out), visibility 0s;
    }
    [data-back-to-top] svg { display: block; width: 22px; height: 22px; }
    [data-back-to-top]:focus-visible { outline: 3px solid var(--secondary); outline-offset: 4px; }
    :root[data-theme="dark"] [data-back-to-top] { box-shadow: 0 4px 14px rgba(0, 0, 0, .34); }
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
      [data-back-to-top]:hover { translate: 0 -2px; box-shadow: 0 6px 18px rgba(0, 43, 80, .2); }
    }
    [data-back-to-top]:active { scale: .97; }
    @media (max-width: 760px) {
      :root { --back-to-top-edge: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-back-to-top] {
        translate: none;
        scale: none;
        transition: opacity 180ms var(--ease-out), visibility 0s linear 180ms;
      }
      [data-back-to-top][data-visible="true"] {
        translate: none;
        scale: none;
        transition: opacity 180ms var(--ease-out), visibility 0s;
      }
    }
    .footer-identity { display: flex; flex: 1 1 500px; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-width: 0; }
    .site-footer .brand { flex: 0 0 auto; }
    .site-footer .cursor { animation: none; }
    .footer-copy { flex: 1 1 260px; min-width: 0; }
    .footer-user { margin: 0 0 4px; color: var(--secondary); font: 600 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; } /* taste-skill-ignore: user-requested terminal identity verbatim */
    .footer-copyright { margin: 0; color: var(--secondary); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
    .footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
    .footer-nav .nav-link { padding-inline: 4px; border-radius: var(--radius); font-weight: 600; }
    .footer-socials { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
    .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--line); /* taste-skill-ignore: requested outlined social buttons */ border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 28%, var(--paper)); color: var(--secondary); text-decoration: none; }
    .footer-social-link svg { display: block; width: 19px; height: 19px; }
    .site-footer a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
    .footer-nav .nav-link:active, .footer-social-link:active { background: var(--surface); color: var(--accent); }
    @media (hover: hover) and (pointer: fine) {
      .footer-nav .nav-link:hover, .footer-social-link:hover { background: var(--surface); color: var(--accent); }
      .site-footer .brand:hover { color: var(--accent); }
    }
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
      .footer-nav .nav-link, .footer-social-link { transition: color 150ms ease, background-color 150ms ease; }
    }
    @media (pointer: coarse) {
      .footer-social-link { width: 44px; height: 44px; flex-basis: 44px; }
    }
    @media (max-width: 600px) {
      .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 28px; }
      .footer-identity { flex: none; width: 100%; gap: 20px 28px; }
      .footer-copy { flex-basis: 100%; }
      .footer-nav { gap: 4px 16px; }
      .footer-socials { margin-inline-start: 0; }
    }

.project-page {
  padding-block: clamp(32px, 5vw, 64px) clamp(54px, 7vw, 88px);
}
.project-page .portfolio-block.project {
  padding: 0;
}
.project-page .project-detail-container,
.project-page .project-detail-gallery > .container {
  width: min(calc(100% - clamp(32px, 8vw, 72px)), 1048px);
  margin-inline: auto !important;
}
.project-page .project-detail-heading {
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.project-page .project-detail-title {
  max-width: 28ch;
  margin: 0;
  color: var(--secondary);
  font-size: clamp(36px, 5.4vw, 58px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-wrap: balance;
}
.project-page .project-detail-cover {
  display: block;
  width: 100% !important;
  max-height: min(42vw, 360px);
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 auto clamp(18px, 3vw, 28px) !important;
  padding: clamp(14px, 2.5vw, 28px) !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 78%, var(--surface) 22%);
  object-fit: contain;
}
.project-page .project-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
  align-items: start;
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0 !important;
}
.project-page .project-detail-grid > .project-detail-copy,
.project-page .project-detail-grid > .project-detail-tech {
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 95%, var(--surface) 5%);
  color: var(--ink);
}
.project-page .project-detail-grid > .project-detail-copy {
  flex: initial;
}
.project-page .project-detail-copy h2 {
  margin: 0 0 16px;
  color: var(--secondary);
  font-size: clamp(21px, 2.3vw, 25px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.project-page .project-detail-copy p {
  max-width: 72ch;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.project-page .project-detail-copy p:last-child {
  margin-bottom: 0;
}
.project-page .project-detail-copy p a {
  display: inline-flex;
  min-height: 44px;
  max-width: 100%;
  align-items: center;
  margin-block: 4px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 46%, var(--paper) 54%);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.project-page .project-detail-copy a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--pill);
}
.project-page .project-detail-tech .tags {
  display: grid;
  gap: 12px;
}
.project-page .project-detail-tech .meta-heading {
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}
.project-page .project-detail-tech .tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -7px 0 4px;
  padding: 0;
  list-style: none;
}
.project-page .project-detail-tech .tags li {
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 52%, var(--paper) 48%);
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.project-page .project-detail-gallery {
  margin-top: clamp(36px, 6vw, 72px);
  padding-block: 0 !important;
}
.project-page .project-detail-gallery .row.mb-5 {
  margin: 0 0 20px;
}
.project-page .project-detail-gallery h2 {
  margin: 0;
  color: var(--secondary);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.035em;
}
.project-page .project-detail-gallery .photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin: 0 !important;
}
.project-page .project-detail-gallery .photos > .col {
  width: auto;
  max-width: none;
  padding: 0;
  flex: initial;
}
.project-page .project-detail-gallery .photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
  .project-page .project-detail-copy p a:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--paper));
    color: var(--secondary);
  }
}
@media (max-width: 760px) {
  .project-page {
    padding-block: 24px 56px;
  }
  .project-page .project-detail-title {
    font-size: clamp(32px, 8.5vw, 46px);
  }
  .project-page .project-detail-cover {
    max-height: 320px;
    padding: 14px !important;
  }
  .project-page .project-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-page .project-detail-copy,
  .project-page .project-detail-tech {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-page .project-detail-copy p a {
    transition: none;
  }
}

.maintenance-banner {
  background-color: #fff3cd;
  color: #664d03;
  border-bottom: 1px solid #ffecb5;
}
.maintenance-banner-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.maintenance-banner-icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.maintenance-banner-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 5px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.maintenance-banner-title {
  font-weight: 700;
}
.maintenance-banner-message {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .maintenance-banner-inner {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }
  .maintenance-banner-icon {
    margin-top: 2px;
  }
  .maintenance-banner-copy {
    justify-content: flex-start;
  }
}