:root { --ink:#26362f; --paper:#f4f6f1; --accent:#91a896; --accent-strong:#607b69; --acid:var(--accent); --surface:#e7ede7; --muted:#64736a; --line:rgba(38,54,47,.18); --portrait-light:#e6eee7; --portrait-shade:#cedbd0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; transition:background-color .25s ease, color .25s ease; }
body.dark-theme { --ink:#ecf3ed; --paper:#17221c; --accent:#a8c0ae; --accent-strong:#789680; --acid:var(--accent); --surface:#223129; --muted:#b2c2b6; --line:rgba(236,243,237,.18); --portrait-light:#26382e; --portrait-shade:#1d2a22; color-scheme:dark; }
.grain { position:fixed; inset:0; opacity:.17; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
main { max-width:1600px; margin:auto; }
nav { position:sticky; top:0; z-index:20; height:92px; padding:0 4.8vw; display:flex; align-items:center; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(12px); }
.scroll-progress { position:absolute; right:0; bottom:-1px; left:0; height:3px; pointer-events:none; }
.scroll-progress span { display:block; width:0; height:100%; background:var(--accent-strong); transition:width 150ms linear; }
a { color:inherit; text-decoration:none; } .brand { font-size:15px; letter-spacing:-.6px; font-weight:700; } .brand span { font-weight:400; }
.nav-links { position:absolute; left:50%; display:flex; align-items:center; gap:30px; transform:translateX(-50%); font:500 13px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .nav-links a { transition:color .2s ease; } .nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--accent-strong); } .nav-links span { color:var(--accent-strong); font-size:15px; }.theme-toggle { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-size:17px; line-height:1; transition:background .2s, color .2s, transform .2s; }.theme-toggle:hover { background:var(--accent); color:#17221c; transform:rotate(18deg); }
.hero { min-height:calc(100vh - 92px); display:grid; grid-template-columns:1fr 35.5%; border-bottom:1px solid var(--line); }
.portrait-wrap { position:relative; grid-column:2; grid-row:1; min-height:630px; padding:42px 35px 30px 4.8vw; background:linear-gradient(145deg, var(--portrait-light) 0%, var(--portrait-light) 58%, var(--portrait-shade) 58%, var(--portrait-shade) 100%); display:flex; flex-direction:column; }
.portrait-meta, .section-label, .project-type, footer { font:10px "DM Mono",monospace; letter-spacing:.02em; }
.portrait-meta { display:flex; justify-content:space-between; margin-bottom:16px; }
.portrait { display:block; width:min(100%, min(64vh, 580px)); height:auto; margin:0 auto; object-fit:contain; object-position:center bottom; filter:saturate(1.12) contrast(1.03); }
.portrait-caption { max-width:240px; margin:16px 0 0 auto; font-size:13px; line-height:1.35; }
.hero-copy { grid-column:1; grid-row:1; padding:7.8vw 5.3vw 4vw; display:flex; flex-direction:column; justify-content:space-between; min-height:630px; }
.eyebrow { margin:0; font:10px "DM Mono",monospace; letter-spacing:.07em; }
h1 { margin:28px 0; font-size:clamp(56px,8vw,135px); line-height:1.01; letter-spacing:-.048em; font-weight:600; } h1 em { font-family:inherit; font-weight:600; } h2 em { font-family:Georgia,serif; font-weight:400; } h1 strong { display:inline-block; background:var(--accent); font-weight:600; padding:0 .08em .04em; }
.hero-bottom { display:flex; justify-content:space-between; align-items:end; gap:24px; } .hero-bottom p { max-width:320px; margin:0; font-size:16px; line-height:1.3; }
.round-link { width:54px; height:54px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:24px; transition:.25s; } .round-link:hover { background:var(--accent-strong); color:var(--paper); transform:rotate(-45deg); }
.statement { padding:150px 4.8vw; display:grid; grid-template-columns:35.5% 1fr; gap:5vw; border-bottom:1px solid var(--line); }.about-rail { min-height:100%; }.rail-stats { margin-top:115px; }.rail-stats div { display:grid; grid-template-columns:86px 1fr; align-items:center; padding:17px 0; border-top:1px solid var(--line); }.rail-stats div:last-child { border-bottom:1px solid var(--line); }.rail-stats strong { font-size:28px; letter-spacing:-.08em; }.rail-stats span { font-size:13px; line-height:1.22; }.rail-note { max-width:255px; margin:32px 0 0; font-size:15px; line-height:1.46; }.about-title { max-width:850px; margin:0; font-size:clamp(47px,5.9vw,94px); letter-spacing:-.065em; line-height:.92; font-weight:600; }.about-content { margin-top:66px; display:grid; grid-template-columns:minmax(260px,.9fr) minmax(300px,1.1fr); gap:55px; }.about-lead { margin:0 0 26px; font-size:20px; line-height:1.42; }.about-intro > p:last-child { margin:0; font-size:18px; line-height:1.5; }.about-copy { font-size:18px; line-height:1.52; }.about-copy p { margin:0 0 27px; }.currently { margin-top:48px; padding:26px 24px 27px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.25); }.currently-label { margin:0 0 19px; color:#d34a33; font:11px "DM Mono",monospace; letter-spacing:.21em; }.current-item { border-left:2px solid #d34a33; padding:4px 0 4px 15px; min-height:50px; margin-top:20px; }.current-item strong { display:block; margin-bottom:7px; font-size:17px; line-height:1.12; }.current-item span { color:#68645d; display:block; font-size:14px; line-height:1.34; white-space:nowrap; }.current-focus span { white-space:normal; }
.work { padding:120px 4.8vw; display:grid; grid-template-columns:minmax(130px,.34fr) minmax(520px,1fr); gap:54px; border-bottom:1px solid var(--line); background:#e6e3da; scroll-margin-top:92px; }.work-rail { min-height:100%; }.work-main { max-width:900px; }.work-kicker { margin:0; color:#d34a33; font:11px "DM Mono",monospace; letter-spacing:.17em; }.work-main h2 { margin:18px 0 45px; font-family:"DM Sans",Arial,sans-serif; font-size:clamp(46px,5vw,76px); letter-spacing:-.035em; line-height:1; font-weight:600; }.work-main h2 em { font-family:Georgia,serif; font-weight:400; }.certificate-viewer { padding:20px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.38); }.certificate-label { margin:0 0 16px; color:#625f58; font:10px "DM Mono",monospace; letter-spacing:.14em; }.certificate-document { display:block; width:100%; height:650px; border:1px solid rgba(20,20,20,.16); border-radius:12px; background:#f7f5f0; }.certificate-document + .certificate-link { display:inline-block; margin:16px 4px 0; border-bottom:1px solid currentColor; padding-bottom:3px; font:11px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.certificate-link span { color:#d34a33; font-size:15px; }.work-copy { max-width:780px; margin:38px 0 0; font-size:19px; line-height:1.7; color:#625f58; }.contact { padding:120px 4.8vw; display:grid; grid-template-columns:minmax(260px,.75fr) minmax(520px,1.4fr); gap:8vw; border-bottom:1px solid var(--line); background:#eeece5; scroll-margin-top:92px; }.contact-heading h2 { margin:28px 0 24px; font-size:clamp(48px,5.2vw,82px); letter-spacing:-.075em; line-height:.91; font-weight:600; }.contact-heading h2 em { font-family:Georgia,serif; font-weight:400; }.contact-heading > p:last-child { max-width:280px; margin:0; font-size:17px; line-height:1.5; color:#625f58; }.contact-form { padding:54px 55px 56px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.45); }.form-kicker { margin:0 0 28px; color:#d34a33; font:11px "DM Mono",monospace; letter-spacing:.2em; }.contact-form label { display:block; margin-top:20px; font:11px "DM Mono",monospace; letter-spacing:.16em; text-transform:uppercase; }.contact-form label span { color:#d34a33; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }.contact-form .form-grid label { margin-top:0; }.contact-form input, .contact-form textarea { display:block; width:100%; margin-top:10px; padding:16px 20px; border:1px solid rgba(20,20,20,.14); border-radius:14px; outline:none; background:rgba(255,255,255,.58); color:var(--ink); font:17px "DM Sans",sans-serif; letter-spacing:0; text-transform:none; transition:border-color .2s, box-shadow .2s; }.contact-form input { height:58px; }.contact-form textarea { min-height:168px; resize:vertical; }.contact-form input::placeholder, .contact-form textarea::placeholder { color:#98938b; }.contact-form input:focus, .contact-form textarea:focus { border-color:#d34a33; box-shadow:0 0 0 3px rgba(211,74,51,.12); }.contact-form button { margin-top:28px; padding:17px 33px; border:0; border-radius:999px; background:#d34a33; color:white; cursor:pointer; font:600 16px "DM Sans",sans-serif; transition:transform .2s, background .2s; }.contact-form button:hover { background:#ba3e2b; transform:translateY(-2px); }.contact-form button:disabled { cursor:wait; opacity:.7; transform:none; }.contact-form button span { margin-left:8px; font-size:20px; }.form-status { min-height:22px; margin:15px 0 0; color:#a63b2a; font-size:14px; }.form-status.is-success { color:#3d6c26; } footer { padding:24px 4.8vw; display:flex; justify-content:space-between; background:var(--ink); color:var(--paper); } footer a { color:var(--acid); }
.statement { grid-template-columns:minmax(130px,.34fr) minmax(380px,1fr) minmax(300px,.72fr); gap:54px; align-items:start; }.about-rail { min-height:720px; }.about-main { padding-top:8px; }.about-main .about-lead { font-size:28px; line-height:1.45; letter-spacing:-.025em; }.about-main .degree-line { display:inline-block; white-space:nowrap; font-size:clamp(29px,2vw,34px); letter-spacing:-.055em; }.about-main .about-copy { max-width:670px; margin-top:42px; font-size:18px; line-height:1.9; color:#625f58; }.about-main .about-copy p { margin-bottom:28px; }.about-main .about-copy strong { color:var(--ink); }.statement > .currently { width:100%; max-width:none; margin:160px 0 0; padding:30px; align-self:start; }.statement > .currently .current-item span { white-space:normal; }
.about-main .experience-line { display:inline-block; font-size:clamp(21px,1.55vw,26px); line-height:1.32; letter-spacing:-.03em; }
@media (max-width:760px) { nav { height:70px; padding:0 20px; }.brand { font-size:13px; }.nav-links { left:auto; right:20px; gap:10px; transform:none; font-size:9px; letter-spacing:.015em; }.hero { grid-template-columns:1fr; }.portrait-wrap { grid-column:1; grid-row:1; min-height:unset; padding:25px 20px 20px; }.portrait { width:min(100%, 72vw); height:auto; }.hero-copy { grid-column:1; grid-row:2; min-height:540px; padding:54px 20px 32px; }.statement { display:block; padding:80px 20px; }.about-rail { margin-bottom:48px; }.rail-stats { margin-top:28px; }.rail-note { display:none; }.about-content { display:block; margin-top:40px; }.about-lead { margin-bottom:24px; font-size:18px; }.about-intro > p:last-child, .about-copy { font-size:17px; }.about-copy { margin-top:32px; }.currently { display:block; margin-top:48px; padding:26px 24px; }.current-item { margin-top:23px; min-height:0; }.work { display:block; padding:84px 20px; scroll-margin-top:70px; }.work-rail { min-height:0; margin-bottom:30px; }.work-main h2 { margin-bottom:32px; }.certificate-document { height:460px; }.work-copy { margin-top:28px; font-size:17px; line-height:1.65; }.contact { display:block; padding:84px 20px; scroll-margin-top:70px; }.contact-form { margin-top:46px; padding:30px 22px; }.form-grid { grid-template-columns:1fr; gap:20px; }.contact-form .form-grid label { margin-top:0; } footer { padding:20px; gap:15px; font-size:8px; } }
@media (max-width:760px) { .about-rail { min-height:90px; margin-bottom:36px; }.about-timeline { display:none; }.about-main .about-lead { font-size:21px; }.about-main .experience-line { font-size:21px; }.about-main .about-copy { margin-top:28px; font-size:17px; line-height:1.7; }.statement > .currently { margin-top:42px; } }

/* Quiet two-colour palette overrides */
.currently { background:color-mix(in srgb, var(--surface) 58%, transparent); }
.about-main .about-lead { color:var(--accent-strong); text-shadow:0 1px 0 rgba(255,255,255,.45); }.about-main .about-lead strong { display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone; background:color-mix(in srgb, var(--accent) 34%, transparent); padding:.08em .16em; }.about-main .degree-line { color:var(--ink); }.about-main .experience-line { color:var(--accent-strong); }
.currently-label, .work-kicker, .form-kicker, .contact-form label span, .certificate-link span { color:var(--accent-strong); }
.current-item { border-left-color:var(--accent-strong); }.current-item span, .about-main .about-copy, .certificate-label, .work-copy, .contact-heading > p:last-child { color:var(--muted); }
.work { background:var(--surface); }.contact { background:color-mix(in srgb, var(--surface) 64%, var(--paper)); }
.certificate-viewer, .contact-form { background:color-mix(in srgb, var(--paper) 54%, transparent); }.certificate-document { border-color:var(--line); background:var(--paper); }
.contact-form input, .contact-form textarea { border-color:var(--line); background:color-mix(in srgb, var(--paper) 82%, transparent); color:var(--ink); }.contact-form input::placeholder, .contact-form textarea::placeholder { color:var(--muted); }.contact-form input:focus, .contact-form textarea:focus { border-color:var(--accent-strong); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); }
.contact-form button { background:var(--accent-strong); color:var(--paper); }.contact-form button:hover { background:var(--ink); }.form-status { color:var(--accent-strong); }.form-status.is-success { color:var(--accent-strong); }
.blog-hero { min-height:calc(100vh - 92px); padding:clamp(100px,14vw,190px) 4.8vw; background:linear-gradient(135deg, var(--surface), var(--paper)); }.blog-hero h1 { max-width:950px; margin:28px 0; font-size:clamp(58px,8vw,128px); }.blog-hero h1 em { font-family:Georgia,serif; font-weight:400; }.blog-hero > p { max-width:500px; margin:0 0 36px; color:var(--muted); font-size:19px; line-height:1.55; }.blog-medium-link { display:inline-block; padding:15px 21px; border:1px solid var(--ink); border-radius:999px; font:500 13px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; transition:background .2s, color .2s; }.blog-medium-link:hover { background:var(--accent-strong); border-color:var(--accent-strong); color:var(--paper); }.blog-medium-link span { color:var(--accent-strong); font-size:16px; }.blog-medium-link:hover span { color:inherit; }
body.dark-theme .about-main .about-lead, body.dark-theme .about-main .degree-line, body.dark-theme .about-main .experience-line { color:var(--ink); text-shadow:none; } body.dark-theme .about-main .about-lead strong { background:transparent; padding:0; } body.dark-theme .portrait { filter:saturate(.85) contrast(1.04) brightness(.88); } body.dark-theme .certificate-document { background:#fff; } body.dark-theme footer { background:#101712; }
@media (max-width:760px) { .nav-links { gap:8px; }.theme-toggle { width:25px; height:25px; font-size:14px; }.blog-hero { min-height:calc(100vh - 70px); padding:100px 20px; } }

/* Om AI */
.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; }
.om-ai { position:fixed; right:28px; bottom:28px; z-index:30; font-family:"DM Sans",Arial,sans-serif; }
.om-ai-toggle { display:flex; align-items:center; gap:10px; padding:12px 17px 12px 12px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--paper); box-shadow:0 12px 28px rgba(25,40,32,.22); cursor:pointer; font:600 14px "DM Sans",Arial,sans-serif; transition:transform .2s ease, box-shadow .2s ease; }
.om-ai-toggle:hover { box-shadow:0 16px 34px rgba(25,40,32,.3); transform:translateY(-2px); }.om-ai-toggle-icon { display:grid; width:29px; height:29px; place-items:center; border-radius:50%; background:var(--accent); color:var(--ink); font-size:16px; }
.om-ai-panel { position:absolute; right:0; bottom:0; display:flex; width:min(380px, calc(100vw - 32px)); max-height:min(610px, calc(100vh - 32px)); min-height:475px; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:21px; background:var(--paper); box-shadow:0 22px 60px rgba(25,40,32,.25); opacity:0; pointer-events:none; transform:translateY(12px) scale(.98); transform-origin:bottom right; transition:opacity .2s ease, transform .2s ease; }
.om-ai[data-open="true"] .om-ai-panel { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }.om-ai[data-open="true"] .om-ai-toggle { opacity:0; pointer-events:none; transform:translateY(8px); }
.om-ai-header { display:flex; align-items:start; justify-content:space-between; padding:21px 21px 18px; border-bottom:1px solid var(--line); background:var(--surface); }.om-ai-header p { margin:0 0 6px; color:var(--accent-strong); font:10px "DM Mono",monospace; letter-spacing:.12em; }.om-ai-header p span { margin-left:6px; font-size:8px; }.om-ai-header h2 { margin:0; font-size:21px; letter-spacing:-.04em; }.om-ai-close { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-size:22px; line-height:1; }.om-ai-close:hover { background:var(--ink); color:var(--paper); }
.om-ai-messages { display:flex; min-height:205px; flex:1; flex-direction:column; gap:11px; overflow-y:auto; padding:18px 18px 12px; scrollbar-width:thin; }.om-ai-message { max-width:88%; margin:0; padding:10px 12px; border-radius:13px; font-size:13px; line-height:1.42; }.om-ai-message--bot { align-self:flex-start; border:1px solid var(--line); border-bottom-left-radius:3px; background:var(--surface); }.om-ai-message--user { align-self:flex-end; border-bottom-right-radius:3px; background:var(--accent-strong); color:var(--paper); }
.om-ai-suggestions { display:flex; flex-wrap:wrap; gap:7px; padding:4px 18px 14px; }.om-ai-suggestions button { border:1px solid var(--line); border-radius:999px; padding:7px 9px; background:transparent; color:var(--ink); cursor:pointer; font:10px "DM Mono",monospace; line-height:1.2; }.om-ai-suggestions button:hover { border-color:var(--accent-strong); background:var(--surface); }
.om-ai-form { display:flex; gap:9px; padding:14px 16px 16px; border-top:1px solid var(--line); }.om-ai-form input { min-width:0; flex:1; border:1px solid var(--line); border-radius:999px; padding:11px 14px; outline:none; background:transparent; color:var(--ink); font:14px "DM Sans",Arial,sans-serif; }.om-ai-form input:focus { border-color:var(--accent-strong); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 27%, transparent); }.om-ai-form button { display:grid; width:41px; height:41px; flex:none; place-items:center; border:0; border-radius:50%; background:var(--accent-strong); color:var(--paper); cursor:pointer; font-size:20px; }.om-ai-form button:hover { background:var(--ink); }
@media (max-width:760px) { .om-ai { right:16px; bottom:16px; }.om-ai-panel { min-height:min(475px, calc(100vh - 32px)); }.om-ai-toggle { padding-right:15px; } }
.form-honeypot { display:none !important; }