:root { --ink:#101a2b; --ink-soft:#4d5b70; --paper:#f7f5f0; --paper-deep:#ece8df; --line:#dcd8cf; --accent:#ff6b35; --accent-soft:#ffe2d6; --night:#0b1625; --header:rgba(247,245,240,.92); --serif:Iowan Old Style,Baskerville,'Times New Roman',serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --wrap:min(1180px,calc(100% - 48px)); }
html[data-theme='dark'] { --ink:#edf3fb; --ink-soft:#afbdd0; --paper:#101925; --paper-deep:#172333; --line:#314155; --accent:#ff8a5e; --accent-soft:#3a292c; --night:#09111c; --header:rgba(16,25,37,.92); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--paper); color:var(--ink); font:16px/1.65 var(--sans); margin:0; } a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; } a:hover { color:var(--accent); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; line-height:1; } .skip-link { clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }.skip-link:focus { background:#fff; clip:auto; clip-path:none; color:#000; height:auto; left:12px; padding:10px 15px; top:12px; width:auto; z-index:100; }
.site-header { align-items:center; background:var(--header); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); display:flex; gap:32px; justify-content:space-between; min-height:80px; padding:0 max(24px,calc((100vw - 1180px)/2)); position:sticky; top:0; z-index:10; }.brand img { display:block; max-height:52px; max-width:214px; object-fit:contain; width:auto; }.brand img { filter:brightness(.48) contrast(1.2) saturate(1.25); } html[data-theme='dark'] .brand img { filter:none; }.site-header nav { display:flex; gap:28px; margin-left:auto; }.site-header nav a { font-size:.76rem; font-weight:800; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; }.site-header nav span { color:var(--accent); }.theme-toggle { background:transparent; border:1px solid var(--line); border-radius:50%; color:var(--ink); cursor:pointer; font-size:1.05rem; height:37px; width:37px; }.theme-toggle:hover { background:var(--ink); color:var(--paper); }
.hero { display:grid; gap:clamp(42px,9vw,126px); grid-template-columns:minmax(0,1fr) minmax(260px,340px); margin:0 auto; min-height:640px; overflow:hidden; padding:clamp(82px,12vw,160px) 0 clamp(74px,10vw,128px); position:relative; width:var(--wrap); }.hero::before { background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:30px 30px; content:''; inset:0 -15vw 0 42%; opacity:.28; position:absolute; }.hero::after { background:radial-gradient(circle,var(--accent-soft),transparent 68%); content:''; height:460px; position:absolute; right:-190px; top:-150px; width:460px; }.hero__copy,.status-card { align-self:end; position:relative; z-index:1; }.eyebrow { color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }.hero .eyebrow { align-items:center; display:flex; gap:9px; margin-bottom:28px; }.hero .eyebrow span { background:var(--accent); border-radius:50%; box-shadow:0 0 0 5px var(--accent-soft); height:7px; width:7px; }.hero h1 { font:500 clamp(3.8rem,7.7vw,7.9rem)/.89 var(--serif); margin-bottom:28px; }.hero h1 em,.contact-section em { color:var(--accent); font-style:italic; }.hero__lede { color:var(--ink-soft); font:clamp(1.16rem,1.8vw,1.48rem)/1.48 var(--serif); max-width:620px; }.hero__actions { align-items:center; display:flex; flex-wrap:wrap; gap:21px; margin-top:33px; }.button { background:var(--ink); color:var(--paper); display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.1em; padding:14px 17px; text-decoration:none; text-transform:uppercase; }.button:hover { background:var(--accent); color:#fff; }.button span { color:var(--accent); margin-left:8px; }.button:hover span { color:#fff; }.text-link { font-size:.74rem; font-weight:800; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; }.text-link span { color:var(--accent); margin-left:4px; }
.status-card { background:var(--night); box-shadow:16px 16px 0 var(--accent-soft); color:#eaf3ff; }.status-card__bar { align-items:center; background:rgba(255,255,255,.08); display:flex; gap:5px; min-height:31px; padding:0 11px; }.status-card__bar span { background:#65748a; border-radius:50%; height:6px; width:6px; }.status-card__bar span:first-child { background:var(--accent); }.status-card__bar b { color:#aebdce; font-size:.57rem; letter-spacing:.08em; margin-left:5px; text-transform:uppercase; }.status-card__body { padding:25px 24px 23px; }.online { align-items:center; display:flex; font-size:.72rem; font-weight:800; gap:9px; letter-spacing:.08em; text-transform:uppercase; }.online i, footer span { background:#39d67a; border-radius:50%; box-shadow:0 0 0 4px rgba(57,214,122,.13); height:7px; width:7px; }.status-card dl { border-top:1px solid rgba(255,255,255,.15); display:grid; grid-template-columns:1fr 1fr; margin:24px 0; }.status-card dl div { padding:15px 12px 0 0; }.status-card dl div+div { border-left:1px solid rgba(255,255,255,.15); padding-left:15px; }.status-card dt { color:#aebdce; font-size:.58rem; font-weight:800; letter-spacing:.08em; margin-bottom:5px; text-transform:uppercase; }.status-card dd { color:#fff; font:500 1.65rem/1 var(--serif); margin:0; }.terminal { border-top:1px solid rgba(255,255,255,.15); color:#afbdd0; font:.68rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; margin:0; padding-top:18px; }.terminal span { color:#ff9b79; }.cursor { animation:blink 1s steps(2,start) infinite; color:var(--accent); }@keyframes blink { 50% { opacity:0; } }
.focus-section,.work-section,.contact-section { margin:0 auto; padding:clamp(78px,11vw,150px) 0; width:var(--wrap); }.focus-section { border-top:1px solid var(--line); }.section-intro { display:grid; grid-template-columns:270px 1fr; margin-bottom:58px; }.section-intro h2,.work-section h2,.journal-callout h2,.contact-section h2 { font:500 clamp(2.65rem,5.3vw,5.5rem)/.96 var(--serif); margin:0; }.focus-grid { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }.focus-grid article { border-bottom:1px solid var(--line); border-right:1px solid var(--line); min-height:260px; padding:29px 28px; }.focus-grid article:first-child { border-left:1px solid var(--line); }.focus-grid span,.work-placeholder>span { color:var(--accent); font:500 2rem var(--serif); }.focus-grid h3 { font:500 2rem var(--serif); margin:45px 0 12px; }.focus-grid p,.work-section__heading>p { color:var(--ink-soft); font-size:.92rem; }.work-section { background:var(--paper-deep); max-width:none; padding-left:max(24px,calc((100vw - 1180px)/2)); padding-right:max(24px,calc((100vw - 1180px)/2)); width:auto; }.work-section__heading { display:grid; grid-template-columns:270px minmax(0,1fr) minmax(180px,280px); gap:28px; margin-bottom:58px; }.work-placeholder { align-items:flex-start; background:var(--paper); border-left:3px solid var(--accent); display:grid; gap:24px; grid-template-columns:100px minmax(0,1fr); max-width:820px; padding:31px; }.work-placeholder h3 { font:500 2rem var(--serif); margin-bottom:12px; }.work-placeholder p:not(.eyebrow) { color:var(--ink-soft); max-width:560px; }
.journal-callout { background:var(--night); color:#eaf3ff; display:grid; gap:56px; grid-template-columns:1fr minmax(270px,360px); padding:clamp(75px,10vw,125px) max(24px,calc((100vw - 1180px)/2)); }.journal-callout .eyebrow { color:#ff9b79; }.journal-callout h2 { color:#fff; }.journal-callout div:last-child { align-self:end; }.journal-callout div:last-child>p { color:#b7c4d3; font:1.18rem/1.55 var(--serif); }.button--light { background:#fff; color:#0b1625; }.button--light:hover { background:#ff9b79; }.contact-section { text-align:center; }.contact-section>p:not(.eyebrow) { color:var(--ink-soft); margin:29px auto 0; max-width:400px; } footer { align-items:center; border-top:1px solid var(--line); color:var(--ink-soft); display:flex; font-size:.67rem; font-weight:800; justify-content:space-between; letter-spacing:.09em; padding:31px max(24px,calc((100vw - 1180px)/2)); text-transform:uppercase; } footer p { align-items:center; display:flex; gap:9px; margin:0; } footer span { box-shadow:none; height:6px; width:6px; }
@media (max-width:820px) { :root { --wrap:min(100% - 36px,1180px); }.site-header { min-height:69px; }.site-header nav { display:none; }.hero { display:block; min-height:0; padding:78px 0 82px; }.status-card { margin-top:52px; max-width:360px; }.section-intro,.work-section__heading { display:block; }.section-intro .eyebrow,.work-section__heading .eyebrow { margin-bottom:22px; }.work-section__heading>p { margin-top:25px; max-width:540px; }.focus-grid { grid-template-columns:1fr; }.focus-grid article,.focus-grid article:first-child { border-left:0; border-right:0; min-height:0; }.focus-grid h3 { margin-top:26px; }.journal-callout { grid-template-columns:1fr; }.journal-callout div:last-child { max-width:480px; } }
@media (max-width:500px) { .brand img { max-width:175px; }.hero { padding:64px 0 74px; }.hero h1 { font-size:clamp(3.3rem,16vw,4.9rem); }.status-card { box-shadow:10px 10px 0 var(--accent-soft); }.focus-section,.work-section,.contact-section { padding-top:75px; padding-bottom:75px; }.work-placeholder { grid-template-columns:1fr; padding:25px; }.journal-callout { padding-top:75px; padding-bottom:75px; } footer { align-items:flex-start; flex-direction:column; gap:13px; } }