:root { --ink:#0b1726; --muted:#5c6978; --paper:#f6f7f2; --white:#fff; --blue:#0775e8; --sky:#d9eeff; --line:rgba(11,23,38,.15); --mono:"DM Mono",monospace; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; overflow-x:hidden; } a { color:inherit; text-decoration:none; } button { font:inherit; } .grid-bg { position:fixed; inset:0; z-index:-1; opacity:.42; background-image:linear-gradient(rgba(11,23,38,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,23,38,.035) 1px,transparent 1px); background-size:64px 64px; pointer-events:none; } .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; }
.site-header { width:min(1320px,calc(100% - 64px)); height:96px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; } .brand { font-size:1.5rem; font-weight:800; letter-spacing:-.1em; } .brand span { color:var(--blue); }.main-nav { display:flex; gap:2rem; margin-left:12%; }.main-nav a,.header-cta,.site-footer { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }.main-nav a { position:relative; }.main-nav a::after { content:""; position:absolute; width:0; bottom:-7px; left:0; height:1px; background:var(--blue); transition:width .25s; }.main-nav a:hover::after { width:100%; }.header-cta { font-weight:500; }.header-cta span { color:var(--blue); font-size:1rem; }.menu-toggle { display:none; }
.section-shell { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }.hero { min-height:calc(100vh - 96px); display:grid; grid-template-columns:1.05fr .95fr; gap:5rem; align-items:center; padding:5rem 0 4.5rem; }.eyebrow,.card-kicker { font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; font-weight:500; }.eyebrow { display:flex; align-items:center; gap:.55rem; margin:0 0 1.5rem; }.status-dot { width:8px; height:8px; border-radius:50%; background:#1dbf73; box-shadow:0 0 0 5px rgba(29,191,115,.13); }.hero h1,.about h2,.section-heading h2,.education h2,.cv-section h2,.contact h2 { font-size:clamp(3rem,5.7vw,5.5rem); line-height:1.02; letter-spacing:-.075em; margin:0; font-weight:700; }.hero h1 em,.about h2 em,.education h2 em,.contact h2 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.08em; }.hero-intro { font-size:1.05rem; line-height:1.75; max-width:525px; color:var(--muted); margin:2rem 0; }.hero-intro strong { color:var(--ink); }.hero-actions { display:flex; align-items:center; gap:1.75rem; }.button { display:inline-flex; align-items:center; justify-content:center; gap:1.2rem; border:0; cursor:pointer; padding:1rem 1.25rem; font-weight:700; font-size:.84rem; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-primary { color:var(--white); background:var(--ink); }.button-primary span,.button-light span { color:#53a8f7; font-size:1.2rem; }.text-action { background:none; border:0; color:var(--ink); padding:.5rem 0; cursor:pointer; font-weight:700; font-size:.85rem; }.text-action span { color:var(--blue); font-size:1.1rem; margin-left:.35rem; }.hero-facts { display:flex; gap:2rem; margin:3.6rem 0 0; }.hero-facts div { border-left:1px solid var(--line); padding-left:.8rem; }.hero-facts dt { color:var(--muted); font:500 .62rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }.hero-facts dd { margin:.2rem 0 0; font-size:.78rem; font-weight:700; }
.hero-visual { height:560px; position:relative; background:linear-gradient(145deg,#b9ddf7,#e3f4fd); overflow:hidden; isolation:isolate; }.hero-visual>img { width:100%; height:100%; object-fit:cover; object-position:60% center; filter:contrast(1.04) brightness(1.12); opacity:.96; }.orbit { position:absolute; border:1px solid rgba(7,117,232,.5); border-radius:50%; z-index:1; }.orbit-one { width:500px; height:500px; bottom:-250px; right:-120px; }.orbit-two { width:370px; height:370px; bottom:-185px; right:-55px; }
.about { padding:9rem 0; border-top:1px solid var(--line); }.section-label { display:flex; gap:1.1rem; font:500 .68rem var(--mono); letter-spacing:.08em; }.section-label span { color:var(--blue); }.section-label p { margin:0; }.about-content { display:grid; grid-template-columns:1.05fr .75fr; gap:7rem; margin-top:3.75rem; }.about h2 { font-size:clamp(2.4rem,4vw,4.25rem); }.about-text { color:var(--muted); font-size:1.01rem; }.about-text p { margin:0 0 1.25rem; }.underlined-link { display:inline-block; border-bottom:1px solid var(--ink); padding-bottom:.35rem; margin-top:1.2rem; font-size:.82rem; font-weight:700; }.underlined-link span { color:var(--blue); margin-left:.65rem; }
.skills { padding:0 0 9rem; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; margin-bottom:3.25rem; }.section-heading h2 { font-size:clamp(2.4rem,4.4vw,4.5rem); max-width:650px; }.skills-layout { display:grid; grid-template-columns:.92fr 1.08fr; }.featured-skill { padding:3rem; color:var(--white); background:var(--ink); min-height:420px; display:flex; flex-direction:column; align-items:flex-start; }.skill-icon { color:#6bb7ff; font-size:2.2rem; margin-bottom:auto; }.featured-skill .card-kicker { color:#86a7c3; }.featured-skill h3 { font-size:1.8rem; letter-spacing:-.05em; line-height:1.15; margin:.65rem 0; }.featured-skill>p:not(.card-kicker) { color:#c3d2df; font-size:.88rem; }.skill-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }.skill-tags span { border:1px solid rgba(255,255,255,.25); padding:.35rem .55rem; font:.62rem var(--mono); }.skill-list { background:rgba(255,255,255,.35); }.skill-list article { min-height:105px; padding:1.4rem 1.5rem; display:grid; grid-template-columns:45px 1fr 18px; gap:.9rem; align-items:center; border-bottom:1px solid var(--line); transition:background .2s,padding .2s; }.skill-list article:hover { background:var(--white); padding-left:1.8rem; }.skill-number,.experience-date { color:var(--blue); font:500 .65rem var(--mono); }.skill-list h3 { margin:0 0 .25rem; font-size:1rem; letter-spacing:-.025em; }.skill-list p { margin:0; font-size:.76rem; color:var(--muted); }.arrow { color:var(--blue); font-size:1.1rem; }
.education { padding:8rem 0; display:grid; grid-template-columns:1fr 1fr; gap:5.5rem; border-block:1px solid var(--line); align-items:center; }.education-photo { height:545px; position:relative; overflow:hidden; background:#24405d; }.education-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); opacity:.82; }.photo-note { position:absolute; left:1.2rem; bottom:1.1rem; writing-mode:vertical-rl; color:var(--white); font:500 .58rem var(--mono); letter-spacing:.1em; }.education-copy .section-label { margin-bottom:3.4rem; }.education-copy .card-kicker { color:var(--blue); margin:0 0 .8rem; }.education h2 { font-size:clamp(2.5rem,4.5vw,4.6rem); }.education-lead { font-weight:700; margin:1.3rem 0; }.education-copy>p:not(.card-kicker):not(.education-lead) { color:var(--muted); font-size:.9rem; }.learning-list { padding:0; list-style:none; color:var(--ink); font-size:.8rem; }.learning-list li { padding:.55rem 0; border-bottom:1px solid var(--line); }.learning-list span { color:var(--blue); margin-right:.4rem; }
.experience { padding:9rem 0; }.experience-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.experience-grid article { min-height:290px; padding:2rem 1.5rem 1.5rem 0; margin-right:1.5rem; display:flex; flex-direction:column; border-right:1px solid var(--line); }.experience-grid article+article { padding-left:.5rem; }.experience-grid article:last-child { border:0; }.experience-grid h3 { margin:.8rem 0; font-size:1.5rem; letter-spacing:-.05em; }.experience-grid article>p:last-of-type { color:var(--muted); font-size:.84rem; max-width:265px; }.experience-next { background:var(--sky); padding-left:1.5rem!important; }.experience-next a { margin-top:auto; align-self:flex-end; width:38px; height:38px; border-radius:50%; background:var(--blue); color:var(--white); display:grid; place-items:center; }
.cv-section { background:var(--blue); color:var(--white); padding:5rem; display:flex; justify-content:space-between; gap:3rem; align-items:flex-end; }.cv-section .eyebrow { color:#d5edff; }.cv-section h2 { font-size:clamp(2.3rem,4vw,4rem); max-width:600px; }.cv-actions { display:flex; align-items:center; gap:1.5rem; flex-shrink:0; }.button-light { background:var(--white); color:var(--ink); }.download-link { border-bottom:1px solid rgba(255,255,255,.7); padding-bottom:.4rem; font-size:.78rem; font-weight:700; }.download-link span { margin-left:.5rem; }
.contact { padding:10rem 0 8rem; text-align:center; }.contact .eyebrow { justify-content:center; }.contact h2 { font-size:clamp(3rem,6vw,6rem); }.email-link { display:inline-block; color:var(--blue); font-size:clamp(1.15rem,2.2vw,2rem); font-weight:700; letter-spacing:-.045em; border-bottom:2px solid var(--blue); margin:3rem 0; }.email-link span { font-size:.8em; }.contact-meta { display:flex; gap:2rem; justify-content:center; color:var(--muted); font:500 .67rem var(--mono); letter-spacing:.04em; }.contact-meta a:hover { color:var(--blue); }.site-footer { width:min(1320px,calc(100% - 64px)); padding:1.4rem 0; margin:auto; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--muted); }.site-footer .brand { color:var(--ink); font-size:1.2rem; }.site-footer p { margin:0; }
.cv-dialog { width:min(1000px,calc(100% - 32px)); height:min(88vh,850px); padding:0; border:0; background:var(--white); box-shadow:0 20px 60px rgba(0,0,0,.32); }.cv-dialog::backdrop { background:rgba(5,15,28,.7); backdrop-filter:blur(4px); }.dialog-header { height:60px; padding:0 1.25rem 0 1.6rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.dialog-header h2 { font-size:.85rem; }.dialog-close { background:transparent; border:0; font-size:2rem; line-height:1; color:var(--muted); cursor:pointer; }.cv-dialog iframe { display:block; width:100%; height:calc(100% - 60px); border:0; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:800px) { .site-header,.section-shell,.site-footer { width:min(100% - 40px,620px); }.site-header { height:72px; }.header-cta { display:none; }.menu-toggle { display:flex; flex-direction:column; gap:4px; background:transparent; border:0; padding:.5rem; cursor:pointer; }.menu-toggle span:not(.sr-only) { width:22px; height:1px; background:var(--ink); transition:transform .2s; }.main-nav { display:none; position:absolute; top:72px; left:0; width:100%; margin:0; padding:1.3rem 20px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:1rem; }.main-nav.is-open { display:flex; }.hero { min-height:auto; padding:4rem 0 5rem; grid-template-columns:1fr; gap:3rem; }.hero-visual { height:430px; order:-1; }.hero h1 { font-size:clamp(3rem,13vw,4.5rem); }.hero-facts { gap:1rem; justify-content:space-between; }.hero-facts dd { font-size:.68rem; }.about { padding:5.5rem 0; }.about-content,.education { grid-template-columns:1fr; gap:2.5rem; margin-top:2.5rem; }.skills { padding-bottom:5.5rem; }.section-heading { display:block; }.section-heading h2 { margin-top:2rem; }.skills-layout { grid-template-columns:1fr; }.featured-skill { min-height:350px; padding:2rem; }.education { padding:5.5rem 0; }.education-photo { height:400px; }.education-copy .section-label { margin-bottom:2rem; }.experience { padding:5.5rem 0; }.experience-grid { grid-template-columns:1fr; }.experience-grid article { min-height:200px; padding:1.6rem 0!important; margin:0; border-right:0; border-bottom:1px solid var(--line); }.experience-next { padding-inline:1.2rem!important; }.cv-section { padding:3rem 1.5rem; display:block; }.cv-actions { margin-top:2rem; flex-wrap:wrap; }.contact { padding:6rem 0; }.contact-meta { flex-direction:column; gap:.7rem; }.site-footer { font-size:.6rem; }.hero-actions { flex-wrap:wrap; gap:1rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } * { transition-duration:.01ms!important; animation-duration:.01ms!important; } }