@import url('portfolio-tokens.css?v=20261007');
:root { --bg: var(--portfolio-canvas); --bg-soft: var(--portfolio-soft); --surface: #fff; --surface-2: #f7f7f7; --text: var(--portfolio-ink); --text-soft: var(--portfolio-muted); --text-dim: #686a68; --ink: var(--text); --muted: var(--text-soft); --paper: #fff; --soft: var(--bg-soft); --line: var(--portfolio-line); --line-strong: #bec2b8; --accent: var(--portfolio-accent); --accent-ink: #28282a; --font: var(--portfolio-font); --mono: var(--portfolio-font); --radius-lg: 20px; --ease: cubic-bezier(.22,1,.36,1); --header-h: 84px; }
* { box-sizing: border-box; }
html { background: #fff; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font: 18px/1.55 var(--font); overflow-x: visible; }
body.conversation-open { overflow: hidden; }
a { color: inherit; text-decoration: none; } img { max-width: 100%; } button,input,textarea { font: inherit; }
[hidden] { display: none !important; }
h1,h2,h3,h4 { color: var(--text); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; overflow-wrap: break-word; }
h1 { font-size: var(--portfolio-h1); } h2 { font-size: var(--portfolio-h2); } h3 { font-size: var(--portfolio-h3); }
p { margin: 0 0 20px; } p,li { color: var(--text-soft); } a:focus-visible,button:focus-visible { outline: 3px solid #789d39; outline-offset: 4px; }
.container,.container-regular { width: min(var(--portfolio-width), calc(100% - 64px)); margin-inline: auto; }
.section { padding-block: var(--portfolio-section); }
.grey-text { color: var(--text-soft); }
.button,.black-button,.hero-button,.resume-download { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 10px 20px; border: 0; border-radius: 99px; background: var(--text); color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none; transition: transform .25s ease; }
.button-accent { color: #28282a; background: var(--accent); } .button:hover,.resume-download:hover { transform: translateY(-2px); }
.eyebrow,.section-index,.system-page-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--text); font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.eyebrow > span:first-child { width: 6px; height: 6px; background: var(--text); }
.section-heading { display: flex; gap: 32px; align-items: end; justify-content: space-between; margin-bottom: 40px; } .section-heading h2 { margin: 0; } .section-heading p { max-width: 40ch; }
.section-index { border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; align-self: start; }
.text-link { display: inline-flex; gap: 12px; font-size: 16px; text-decoration: underline; text-underline-offset: 5px; }
/* Static shared header uses the homepage's markup and menu runtime. */
.navbar { position: relative; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.navbar-wrapper { display: flex; align-items: center; gap: 16px; min-height: 84px; }
.navbar-brand { display: inline-flex; align-items: center; gap: 7px; }
.brand-monogram { font-size: 30px; font-weight: 700; } .brand-wordmark { font-size: 16px; font-weight: 600; }
.nav-menu-wrapper { flex: 1; }.nav-menu { display: flex; align-items: center; gap: 22px; list-style: none; padding: 0; margin: 0; }
.nav-link { display: inline-block; padding: 12px 0; color: var(--text-soft); font-size: 18px; font-weight: 500; white-space: nowrap; }
.nav-link[aria-current="page"],.nav-link:hover { color: #000; }
.mobile-margin-top-10 { margin-left: auto; }.nav-hide { display: none; }
.hero-button-text-wrapper { position: relative; }.hero-button-text.is-relative,.black-button-text.is-relative { display: none; }.hero-button-text.is-absolute,.black-button-text.is-absolute { position: static; transform: none !important; }
.hero-button-arrow-wrapper,.black-button-white-arrow-wrapper { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #28282a; background: var(--accent); }.hero-button-arrow-wrapper .is-absolute,.black-button-white-arrow-wrapper .is-absolute { display: none; }.hero-button-arrow-wrapper .is-relative,.black-button-white-arrow-wrapper .is-relative { width: 20px; height: 20px; transform: none !important; }
.menu-button { display: none; }.language-switcher { display: flex; gap: 3px; flex-shrink: 0; padding: 3px; border: 1px solid var(--line); border-radius: 99px; }.language-switcher button { padding: 7px 9px; border: 0; border-radius: 99px; background: transparent; color: #4f4f4f; cursor: pointer; font-size: 12px; font-weight: 600; }.language-switcher button[aria-pressed="true"] { color: #fff; background: #28282a; }
.skip-link { position: fixed; top: 0; left: 16px; z-index: 100; padding: 12px; transform: translateY(-150%); background: var(--accent); }.skip-link:focus { transform: none; }
/* The same footer and contact entry points as the homepage. */
.footer-section { padding-block: var(--portfolio-section) 24px; border-top: 1px solid var(--line); background: #fff; }
.footer-header { text-align: center; }.footer-heading { margin-bottom: 24px; font-size: var(--portfolio-h1); line-height: 1.1; letter-spacing: -.045em; }
.footer-contact-wrapper { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; padding-block: 48px; }
.footer-contact { display: flex; align-items: center; gap: 16px; }.footer-contact-icon { width: 28px; height: 28px; }.footer-contact-icon svg { width: 100%; height: 100%; }
.footer-bottom-wrapper,.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-social-media-wrapper,.footer-page-link-wrapper { display: flex; flex-wrap: wrap; gap: 20px; }.footer-social-media { padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; }.footer-page-link { font-size: 14px; }.footer-copyright { font-size: 14px; }
.reveal { opacity: 1; transform: none; }.reveal.is-visible { opacity: 1; }
@media(max-width:1100px) { .nav-menu { gap: 14px; }.nav-link { font-size: 16px; } }
@media(max-width:991px) { .nav-menu-wrapper { display: none; }.nav-menu-wrapper.w--open { display: block; }.nav-menu { flex-direction: column; }.mobile-margin-top-10 { margin: 0; }.nav-hide { display: inline-flex; }.hero-button.tablet-hide { display: none; } }
@media(max-width:767px) { .container,.container-regular { width: calc(100% - 32px); }.section-heading { display: block; }.footer-contact-wrapper,.footer-bottom-wrapper { flex-direction: column; align-items: flex-start; }.footer-heading { font-size: 40px; }.footer-contact { min-width: 0; }.footer-contact a { overflow-wrap: anywhere; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media print { .navbar,.footer-section,.conversation-dialog,.cookie-settings-button,.cookie-consent-banner { display: none !important; } }
.about-page .about-hero { min-height: 0; padding-top: var(--portfolio-section); }
.about-page .about-hero::before,.about-page .about-hero-grid,.about-page .about-hero-light,.portrait-frame::before { display: none; }
.about-page :is(.about-story,.achievements,.career,.beyond-code,.about-resume,.about-proof-strip,.achievement-case,.achievement-case-slotflow,.achievement-case-coach,.about-resume-card) { background: #fff; color: var(--text); box-shadow: none; }
.about-page .about-story,.about-page .career { background: var(--bg-soft); }
.about-page :is(h1,h2) { font-size: var(--portfolio-h2); line-height: 1.15; letter-spacing: -.035em; }
.about-page .about-hero-copy h1 { font-size: var(--portfolio-h1); }
.about-page :is(h3,.achievement-case h3) { font-size: var(--portfolio-h3); line-height: 1.2; }
.about-page p { color: var(--text-soft); }.about-page :is(.about-hero-lead,.about-story-copy p,.career-intro > p,.beyond-copy > p) { font-size: 18px; line-height: 1.6; }
.about-page :is(.achievement-number,.achievement-case-copy > span,.achievement-metric strong,.career-timeline time,.career-timeline small,.beyond-principles span,.about-hero-facts,.about-proof-strip .container) { color: var(--text); }
.about-page :is(.portrait-frame,.achievement-case,.about-resume-card) { border-radius: var(--portfolio-radius); box-shadow: none; }
.about-page .portrait-frame { background: var(--bg-soft); }.about-page .portrait-caption { color: #fff; }.about-page .portrait-caption small { font-size: 12px; }
.about-page .portrait-frame img { filter: none; }.about-page .portrait-stage { max-width: 380px; }
.about-page .achievement-metric { min-height: 0; }.about-page .achievement-metric p { margin-top: 24px; }
.about-page .achievement-tech span { background: var(--bg-soft); color: var(--text-soft); font-size: 13px; text-transform: none; }
.about-page .achievement-visual { padding: 24px; background: var(--bg-soft); min-height: 0; }.about-page .achievement-visual img { width: 100%; height: auto; object-fit: contain; box-shadow: none; border-radius: 12px; }.mini-browser { display: none; }
.about-page .coach-orbit { box-shadow: none; border-color: var(--line); }.about-page .coach-orbit i { color: var(--text); background: var(--accent); border-color: var(--line); }
.about-page .resume-sheet { transform: none; box-shadow: none; border: 1px solid var(--line); }.about-page .resume-preview { min-height: 0; }
.about-page .about-proof-strip .container { font-size: 14px; text-transform: none; }.about-page .about-hero-facts,.about-page .career-timeline small,.about-page .career-timeline b { font-size: 13px; text-transform: none; }
.resume-page { background: #fff; }.resume-document { box-shadow: none; border: 1px solid var(--line); border-radius: 20px; }
.resume-toolbar { position: static; color: var(--text); height: auto; padding: 20px 32px; max-width: var(--portfolio-width); }.resume-toolbar::before { display: none; }.resume-toolbar a { color: var(--text); }.resume-toolbar .resume-download { color: #fff; background: var(--text); }.resume-language { display: none; }
.resume-identity h1 { font-size: var(--portfolio-h1); line-height: 1.05; letter-spacing: -.04em; }.resume-photo { border-radius: 20px; }
.resume-identity > p,.resume-section-label span { color: var(--text); }.resume-document :is(small,b,.resume-section-label) { font-size: 13px; }.resume-document p,.resume-document li { font-size: 16px; line-height: 1.6; }
.system-page { background: #fff; }.system-page-main { width: min(960px,calc(100% - 64px)); padding-block: var(--portfolio-section); }.system-page h1 { font-size: var(--portfolio-h1); line-height: 1.1; letter-spacing: -.04em; }.system-card { background: var(--bg-soft); border-radius: 20px; box-shadow: none; }.system-card :is(p,li) { color: var(--text-soft); font-size: 17px; }.system-card a { color: var(--text); text-decoration-color: var(--text); }.system-card-meta { font-size: 13px !important; text-transform: none; letter-spacing: 0; }.system-page-kicker,.error-code { color: var(--text); }.system-card h2 { font-size: 26px; }.error-page .system-page-main { min-height: 60vh; }
@media(max-width:767px) { .system-page-main { width: calc(100% - 32px); }.resume-toolbar { padding-inline: 16px; }.resume-document { padding: 28px 20px; }.about-page .achievement-case { padding: 24px; }.about-page .about-hero-actions { flex-wrap: wrap; } }
.nav-discuss { padding: 7px 8px 7px 16px; white-space: nowrap; }.nav-arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--text); font-size: 24px; }
.footer-contact { display: flex; gap: 40px; }.contact-box { display: flex; gap: 16px; align-items: center; }.contact-number .text-24px { font-size: 18px; }.contact-number .text-18px { font-size: 16px; }
.footer-contact-social-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 48px; }.footer-social-media-wrapper { align-items: center; }.footer-social-media { flex: none; height: auto; }
.footer-copyright-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }.copy-right-text-wrapper { font-size: 14px; }
.cookie-consent-banner { color: #28282a; background: #fff; border-color: var(--line); }.cookie-consent-banner p,.cookie-consent-banner h2,.cookie-consent-banner a { color: #28282a; }
@media(max-width:1100px) { .footer-contact-social-wrapper,.footer-contact { flex-wrap: wrap; } }
@media(max-width:767px) { .footer-contact-social-wrapper,.footer-contact { flex-direction: column; align-items: flex-start; }.footer-contact { gap: 24px; } }
.footer-contact-top { display: flex; flex-wrap: wrap; gap: 40px; }.footer-contact-wrapper { align-items: center; justify-content: space-between; }
@media(max-width:767px) { .footer-contact-top { flex-direction: column; gap: 24px; } }
html .cookie-consent-banner { background: #fff; color: #28282a; border-color: var(--line); box-shadow: 0 12px 40px #0002; backdrop-filter: none; }
html .cookie-consent-banner :is(p,h2,a) { color: #28282a; }
html .cookie-consent-banner .cookie-btn { background: #fff; color: #28282a; border-color: var(--line); }
html .cookie-consent-banner .cookie-btn-primary { background: var(--accent); }
html .cookie-settings-button { background: #fff; color: #28282a; border-color: var(--line); }
@media print { .resume-document { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; }.resume-identity h1 { font-size: 46pt; }.resume-document p,.resume-document li { font-size: 10pt; }.resume-document :is(small,b,.resume-section-label) { font-size: 9pt; } }