:root { --ink:#161718; --paper:#f4f3ef; --line:#c6c6c0; --muted:#686965; --blue:#1755ff; --lime:#e8ff50; --display:"Manrope", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); cursor:crosshair; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; z-index:10; top:0; left:0; padding:.75rem 1rem; background:var(--blue); color:white; transform:translateY(-120%); }
.skip-link:focus { transform:translateY(0); }
.site-header { align-items:center; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; padding:1.15rem 2rem; position:relative; z-index:2; }
.wordmark { align-items:center; display:flex; font:500 .68rem/1.15 var(--mono); letter-spacing:.08em; width:max-content; }
.mark { display:block; height:1.45rem; margin-right:.5rem; object-fit:contain; width:1.45rem; }
nav { display:flex; gap:1.75rem; font:500 .72rem var(--mono); letter-spacing:.04em; text-transform:uppercase; }
nav a, .contact-links a { transition:color .2s ease; }
nav a:hover, .contact-links a:hover { color:var(--blue); }
.menu-toggle { align-items:center; background:transparent; border:0; color:var(--ink); cursor:pointer; display:none; font:500 .67rem var(--mono); gap:.6rem; letter-spacing:.05em; padding:.35rem 0; text-transform:uppercase; }
.menu-toggle-icon { display:grid; gap:3px; width:1.05rem; }
.menu-toggle-icon span { background:currentColor; display:block; height:1px; transition:transform .2s ease,opacity .2s ease; width:100%; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform:translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform:translateY(-4px) rotate(-45deg); }
.header-status { align-items:center; display:flex; gap:.45rem; font:400 .67rem var(--mono); justify-self:end; margin:0; text-transform:uppercase; }
.header-status span { background:var(--lime); border:1px solid var(--ink); border-radius:50%; height:.45rem; width:.45rem; }
.hero, .statement, .work, .expertise, .credential, .contact { padding-left:clamp(1.5rem, 5vw, 5rem); padding-right:clamp(1.5rem, 5vw, 5rem); }
.hero { display:flex; flex-direction:column; isolation:isolate; min-height:calc(100vh - 64px); overflow:hidden; padding-top:clamp(3rem, 12vh, 10rem); position:relative; }
.hero > :not(.hero-stars) { position:relative; z-index:1; }
.hero-stars { height:100%; inset:0; opacity:.5; pointer-events:none; position:absolute; width:100%; z-index:0; }
.eyebrow, .section-label { font:500 .7rem var(--mono); letter-spacing:.09em; margin:0; text-transform:uppercase; }
.hero-name { color:var(--blue); font:700 clamp(1.15rem, 2.3vw, 2rem)/1 var(--display); letter-spacing:-.055em; margin:clamp(1.35rem, 3.5vw, 2.75rem) 0 0; }
.hero h1, h2 { font-size:clamp(2.75rem, 7.8vw, 7.7rem); font-weight:800; letter-spacing:-.085em; line-height:.9; margin:clamp(2rem, 8vh, 7rem) 0 0; max-width:1100px; }
.hero-name + h1 { margin-top:clamp(1.2rem, 3vw, 2.4rem); }
em { color:var(--blue); font-style:normal; }
.rotating-word { display:inline-block; font-family:var(--mono); font-size:1.1em; letter-spacing:-.075em; line-height:1; vertical-align:baseline; }
.rotating-word::after { animation:caret-blink .9s step-end infinite; background:currentColor; content:""; display:inline-block; height:.82em; margin-left:.08em; vertical-align:-.1em; width:.055em; }
.hero-floor { align-items:end; border-top:1px solid var(--ink); display:grid; gap:2rem; grid-template-columns:1.3fr 1fr auto; margin-top:auto; padding:1.1rem 0 1.4rem; }
.hero-summary { font-size:clamp(1rem, 1.4vw, 1.3rem); font-weight:500; line-height:1.35; margin:0; max-width:28rem; }
.text-link { font:500 .75rem var(--mono); text-transform:uppercase; }
.text-link span { color:var(--blue); font-size:1.3rem; margin-left:.25rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 2.5vw, 2rem); }
.hero-button { border:1px solid var(--ink); font:500 .67rem var(--mono); padding:.78rem .9rem; text-transform:uppercase; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.hero-button:hover, .hero-button:focus-visible { background:var(--ink); color:var(--lime); }
.hero-button-primary { background:var(--blue); border-color:var(--blue); color:white; }
.hero-button-primary:hover, .hero-button-primary:focus-visible { background:var(--ink); border-color:var(--ink); }
.hero-floor .text-link { justify-self:center; }
.hero-index { color:var(--muted); font:400 .68rem var(--mono); margin:0; }
.statement { background:var(--blue); color:white; display:grid; grid-template-columns:1fr 3fr; padding-bottom:clamp(4rem, 10vw, 9rem); padding-top:clamp(4rem, 10vw, 9rem); }
.statement .section-label { color:var(--lime); }
.statement > p { font-size:clamp(1.8rem, 4.2vw, 4.5rem); font-weight:600; letter-spacing:-.065em; line-height:1; margin:0; max-width:980px; }
.statement strong { color:var(--lime); font-weight:600; }
.statement-foot { border-top:1px solid rgba(255,255,255,.55); display:flex; gap:1.5rem; grid-column:2; justify-content:space-between; margin-top:5rem; }
.statement-foot p { font:400 .67rem var(--mono); margin:1rem 0 0; text-transform:uppercase; }
.work, .expertise { padding-bottom:clamp(5rem, 11vw, 11rem); padding-top:clamp(5rem, 11vw, 11rem); }
.section-heading { display:grid; grid-template-columns:1fr 3fr; margin-bottom:clamp(3rem, 7vw, 6.5rem); }
.section-heading h2 { margin:0; }
.experience { border-top:1px solid var(--ink); display:grid; grid-template-columns:1fr 3fr; padding:1.15rem 0 clamp(2rem, 4vw, 4rem); }
.experience:last-of-type { border-bottom:1px solid var(--ink); }
.experience-meta { color:var(--muted); display:flex; font:400 .7rem var(--mono); justify-content:space-between; padding-right:2rem; text-transform:uppercase; }
.experience h3, .expertise h3 { font-size:clamp(1.3rem, 2.35vw, 2.55rem); letter-spacing:-.055em; line-height:1.05; margin:0; }
.company-link { color:inherit; text-decoration:none; }
.company-link span { color:var(--blue); font:.55em var(--mono); margin-left:.15em; vertical-align:.2em; }
.company-link:hover, .company-link:focus-visible { color:var(--blue); text-decoration:underline; text-underline-offset:.14em; }
.case-study-link { color:var(--blue); display:inline-block; font:500 .68rem var(--mono); margin-top:1.35rem; text-transform:uppercase; }
.case-study-link:hover, .case-study-link:focus-visible { color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }
.case-study-link span { font-size:1rem; margin-left:.2rem; }
.role { color:var(--blue); font:500 .72rem var(--mono); margin:1rem 0 2rem; text-transform:uppercase; }
.experience-main > p:not(.role) { font-size:1rem; line-height:1.55; margin:0; max-width:45rem; }
.career-path { display:grid; gap:0; list-style:none; margin:0; max-width:48rem; padding:0; }
.career-path li { border-top:1px solid var(--line); display:grid; grid-template-columns:10rem 1fr; padding:1.1rem 0; }
.career-date { color:var(--muted); font:.63rem/1.4 var(--mono); margin:0; text-transform:uppercase; }
.career-path h4 { font-size:.95rem; letter-spacing:-.025em; margin:0; }
.career-path li > p:last-child { font-size:.88rem; grid-column:2; line-height:1.45; margin:.45rem 0 0; max-width:36rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:2rem; }
.tag-list span { border:1px solid var(--line); font:400 .67rem var(--mono); padding:.45rem .6rem; }
.earlier-work { margin-left:25%; padding-top:2rem; }
.earlier-work ul { list-style:none; margin:1.25rem 0 0; padding:0; }
.earlier-work li { border-top:1px solid var(--line); display:grid; font-size:.9rem; gap:1rem; grid-template-columns:1fr auto; padding:.85rem 0; }
.earlier-work li span:last-child { color:var(--muted); font:.63rem var(--mono); text-align:right; text-transform:uppercase; }
.expertise { background:#151515; color:#f8f8f5; }
.expertise .eyebrow { color:var(--lime); }
.expertise-grid { display:grid; grid-template-columns:repeat(3, 1fr); }
.expertise-grid article { border-left:1px solid #5a5a58; min-height:20rem; padding:1.2rem 1.2rem 1.5rem; }
.expertise-grid article:first-child { border-left:0; padding-left:0; }
.number { color:var(--lime); font:.7rem var(--mono); margin:0 0 5.5rem; }
.expertise h3 { margin-bottom:1.2rem; }
.expertise-grid article > p:last-child { color:#c8c8c3; font-size:.92rem; line-height:1.55; margin:0; max-width:21rem; }
.credential { align-items:start; border-bottom:1px solid var(--ink); display:grid; grid-template-columns:1fr 3fr; padding-bottom:clamp(4rem, 9vw, 8rem); padding-top:clamp(4rem, 9vw, 8rem); }
.credential-number { color:var(--blue); font-size:clamp(3.5rem, 8vw, 8rem); font-weight:800; letter-spacing:-.1em; line-height:.8; margin:0; }
.credential-copy { font-size:clamp(1rem, 1.5vw, 1.3rem); font-weight:600; line-height:1.35; margin:2rem 0 0; }
.credential-copy span { color:var(--muted); font-weight:400; }
.credential-link { display:inline-block; font:500 .7rem var(--mono); margin-top:1.5rem; text-transform:uppercase; }
.credential-link span { color:var(--blue); font-size:1rem; }
.credential-link:hover { color:var(--blue); }
.contact { background:var(--lime); min-height:90vh; padding-bottom:2rem; padding-top:clamp(4rem, 10vw, 9rem); }
.contact h2 { max-width:1200px; }
.contact em { color:var(--ink); font-weight:400; }
.contact-floor { align-items:end; border-top:1px solid var(--ink); display:grid; gap:1.5rem; grid-template-columns:1fr auto; margin-top:clamp(5rem, 13vh, 11rem); padding-top:1rem; }
.contact-email { font-size:clamp(1.35rem, 2.5vw, 2.5rem); font-weight:700; letter-spacing:-.06em; }
.contact-email span { color:var(--blue); }
.contact-actions { align-items:end; display:flex; flex-direction:column; gap:1.25rem; }
.resume-actions { display:flex; gap:.5rem; }
.resume-button { border:1px solid var(--ink); font:500 .67rem var(--mono); padding:.7rem .8rem; text-transform:uppercase; transition:background .2s ease,color .2s ease; }
.resume-button:hover { background:var(--ink); color:var(--lime); }
.resume-download { background:var(--ink); color:var(--lime); }
.resume-download:hover { background:var(--blue); border-color:var(--blue); color:white; }
.contact-links { display:flex; gap:1.25rem; justify-self:end; }
.contact-links a, .contact-floor > p { font:.67rem var(--mono); margin:0; text-transform:uppercase; }
.contact-floor > p { grid-column:1 / -1; }
.cursor-dot { background:var(--blue); border-radius:50%; height:.6rem; left:0; pointer-events:none; position:fixed; top:0; transform:translate(-50%,-50%); transition:transform .12s ease-out; width:.6rem; z-index:20; }
.case-header { grid-template-columns:1fr auto 1fr; }
.case-back { font:500 .7rem var(--mono); text-transform:uppercase; }
.case-back:hover { color:var(--blue); }
.case-study-page { padding:clamp(4rem, 10vw, 9rem) clamp(1.5rem, 5vw, 5rem) 0; }
.case-study-page > h1 { font-size:clamp(3rem, 8vw, 8rem); letter-spacing:-.09em; line-height:.88; margin:1.35rem 0 0; max-width:1100px; }
.case-role { color:var(--blue); font:500 .72rem var(--mono); margin:2rem 0 0; text-transform:uppercase; }
.case-intro { font-size:clamp(1.25rem, 2.4vw, 2.2rem); font-weight:600; letter-spacing:-.04em; line-height:1.15; margin:3.5rem 0 0; max-width:48rem; }
.case-grid { display:grid; grid-template-columns:1fr 3fr; margin-top:clamp(4rem, 9vw, 8rem); }
.case-grid > * { border-top:1px solid var(--ink); margin:0; padding:1.25rem 0 3rem; }
.case-label { color:var(--muted); font:.68rem var(--mono); text-transform:uppercase; }
.case-grid h2 { font-size:clamp(1.4rem, 3vw, 3rem); letter-spacing:-.055em; line-height:1; margin:0; }
.case-grid p { font-size:1rem; line-height:1.55; margin:1.25rem 0 0; max-width:43rem; }
.case-highlights { display:grid; gap:1.25rem; list-style:none; margin:0; padding:1.25rem 0 3rem; }
.case-highlights li { border-left:2px solid var(--blue); font-size:1rem; line-height:1.45; padding-left:1rem; }
.case-grid .tag-list { margin:0; }
.case-visuals { background:#151515; color:#f8f8f5; margin:clamp(4rem, 9vw, 8rem) 0 0; padding:clamp(4rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5rem); }
.case-section-heading { margin-bottom:clamp(3rem, 6vw, 5rem); }
.case-section-heading .eyebrow { color:var(--lime); }
.case-gallery { display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.case-gallery figure { margin:0; }
.case-gallery img { display:block; height:auto; width:100%; }
.case-gallery figcaption { color:#c8c8c3; font:.68rem var(--mono); margin-top:.7rem; }
.case-project-card { background:#20201f; display:flex; flex-direction:column; min-width:0; }
.case-project-preview { background:#0d0d0d; display:block; overflow:hidden; position:relative; }
.case-project-preview::after { background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.42)); content:""; inset:0; pointer-events:none; position:absolute; }
.case-project-preview img { aspect-ratio:3 / 2; object-fit:cover; transition:transform .35s ease,opacity .35s ease; }
.case-project-preview:hover img, .case-project-preview:focus-visible img { opacity:.8; transform:scale(1.035); }
.case-project-preview:focus-visible { outline:2px solid var(--lime); outline-offset:-2px; }
.case-project-details { display:flex; flex:1; flex-direction:column; padding:1.35rem; }
.case-project-number { color:var(--lime); font:.62rem var(--mono); letter-spacing:.08em; margin:0; }
.case-project-details h3 { font-size:clamp(1.25rem, 2.2vw, 2rem); letter-spacing:-.055em; line-height:1.03; margin:1.1rem 0 0; }
.case-project-details > p:not(.case-project-number) { color:#d0d0cb; font-size:.95rem; line-height:1.5; margin:1rem 0 0; }
.case-project-stack { display:flex; flex-wrap:wrap; gap:.4rem; margin:1.3rem 0 0; }
.case-project-stack span { border:1px solid #5a5a58; color:#e8e8e4; font:.61rem var(--mono); padding:.4rem .5rem; }
.case-project-link { align-self:flex-start; color:var(--lime); font:.66rem var(--mono); margin-top:auto; padding-top:1.5rem; text-transform:uppercase; }
.case-project-link:hover, .case-project-link:focus-visible { color:white; text-decoration:underline; text-underline-offset:.2em; }
.case-gallery-empty { align-items:center; border:1px dashed #5a5a58; color:#c8c8c3; display:flex; font:.72rem var(--mono); grid-column:1 / -1; justify-content:center; margin:0; min-height:16rem; text-transform:uppercase; }
.log-page { min-height:100vh; padding:clamp(2rem, 5vw, 5rem); }
.log-page [hidden] { display:none !important; }
.log-page .case-back { display:inline-block; margin-bottom:clamp(3rem, 8vw, 7rem); }
.log-page > h1 { font-size:clamp(3rem, 7vw, 7rem); letter-spacing:-.085em; line-height:.88; margin:1.1rem 0 0; }
.log-page-intro { font-size:clamp(1rem, 1.7vw, 1.25rem); line-height:1.5; margin:2.25rem 0 0; max-width:42rem; }
.log-login { display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - clamp(4rem, 10vw, 10rem)); max-width:44rem; }
.log-login .case-back { margin-bottom:auto; }
.log-login h1, #access-dashboard > h1 { font-size:clamp(3rem, 7vw, 7rem); letter-spacing:-.085em; line-height:.88; margin:1.1rem 0 0; }
.log-login-form { margin-top:2.5rem; }
.log-login-form label { display:block; font:.67rem var(--mono); margin-bottom:.55rem; text-transform:uppercase; }
.log-login-form > div { display:flex; max-width:34rem; }
.log-login-form input { background:transparent; border:1px solid var(--ink); border-right:0; font:1rem var(--mono); min-width:0; padding:.85rem 1rem; width:100%; }
.log-login-form button { background:var(--blue); border:1px solid var(--blue); color:white; cursor:pointer; font:500 .67rem var(--mono); padding:.85rem 1rem; text-transform:uppercase; white-space:nowrap; }
.log-login-form button:disabled { cursor:wait; opacity:.65; }
.log-login-message { color:var(--blue); font:.7rem var(--mono); margin:1rem 0 0; min-height:1rem; }
.log-table-wrap { border:1px solid var(--ink); margin-top:clamp(3rem, 7vw, 6rem); overflow:auto; }
.log-table { border-collapse:collapse; min-width:1000px; text-align:left; width:100%; }
.log-table th { background:var(--ink); color:white; font:500 .65rem var(--mono); letter-spacing:.06em; padding:1rem; text-transform:uppercase; }
.log-table td { border-top:1px solid var(--line); font:.76rem/1.45 var(--mono); max-width:30rem; padding:1rem; vertical-align:top; word-break:break-word; }
.log-table td:first-child, .log-table td:nth-child(3) { white-space:nowrap; }
@media (min-width:721px) and (max-height:900px) { .hero { min-height:calc(100vh - 64px); padding-top:clamp(2.25rem, 6vh, 4.5rem); } .hero-name { margin-top:1.5rem; } .hero-name + h1 { font-size:clamp(2.75rem, 6.5vw, 6.25rem); margin-top:1.35rem; } .hero-actions { margin:2.25rem 0 .5rem; } .hero-floor { margin-top:auto; } }
@keyframes caret-blink { 50% { opacity:0; } }
@media (max-width:720px) { .site-header { grid-template-columns:1fr auto; padding:1rem 1.3rem; } .menu-toggle { display:flex; grid-column:2; grid-row:1; } nav { display:none; } nav.is-open { align-items:flex-start; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.9rem; grid-column:1 / -1; grid-row:3; margin-top:.85rem; padding-top:1rem; } nav.is-open a { padding:.2rem 0; } .header-status { font-size:.59rem; grid-column:1 / -1; grid-row:2; justify-self:start; margin-top:.7rem; } .hero { min-height:calc(100svh - 61px); padding-top:3.5rem; } .hero h1, h2 { letter-spacing:-.075em; } .rotating-word { font-size:1em; } .hero-floor, .statement, .section-heading, .experience, .credential { grid-template-columns:1fr; } .hero-floor { align-items:start; gap:1.2rem; margin-top:3rem; } .hero-actions { width:100%; } .hero-button { flex:1; text-align:center; } .hero-floor .text-link { justify-self:start; } .hero-index { display:none; } .statement { gap:3rem; } .statement-foot { flex-direction:column; gap:.7rem; grid-column:auto; margin-top:2rem; } .statement-foot p { margin:0; } .section-heading { gap:2rem; } .experience-meta { padding:0 0 1.4rem; } .experience-main > p:not(.role) { font-size:.96rem; } .career-path li { grid-template-columns:1fr; gap:.35rem; } .career-path li > p:last-child { grid-column:auto; margin:.1rem 0 0; } .earlier-work { margin-left:0; } .earlier-work li { grid-template-columns:1fr; } .earlier-work li span:last-child { text-align:left; } .expertise-grid { grid-template-columns:1fr; } .expertise-grid article, .expertise-grid article:first-child { border-left:0; border-top:1px solid #5a5a58; min-height:auto; padding:1.25rem 0 2rem; } .expertise-grid article:first-child { border-top:0; padding-top:0; } .number { margin-bottom:2.5rem; } .contact { min-height:72vh; } .contact-floor { grid-template-columns:1fr; } .contact-actions { align-items:flex-start; } .contact-links { justify-self:start; } .resume-actions { align-items:stretch; flex-direction:column; width:100%; } .resume-button { text-align:center; } .cursor-dot { display:none; } }
@media (max-width:720px) { .case-header { grid-template-columns:1fr auto; } .case-header .header-status { display:none; } .case-back { font-size:.62rem; } .case-study-page { padding-top:3.5rem; } .case-grid { grid-template-columns:1fr; } .case-grid > * { padding-bottom:2rem; } .case-label { border-bottom:0; padding-bottom:.65rem; } .case-gallery { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .cursor-dot { display:none; } }