/* A restrained editorial palette for the technical-journal layout. */
:root { --paper:#f2eee6; --paper-light:#faf8f3; --ink:#252b30; --muted:#687074; --faint:#cecbc4; --rule:#bdb9b1; --red:#ad4b3c; --red-dark:#803a31; --acid:#d5b978; --sans:"DM Sans",sans-serif; --mono:"DM Mono",monospace; --serif:"DM Serif Display",Georgia,serif; --max:1440px; }
html { background:var(--paper); }
body { background:linear-gradient(90deg,rgba(37,43,48,.028) 1px,transparent 1px),var(--paper); background-size:84px 84px; color:var(--ink); }
body::before { display:none; }
.paper-noise { opacity:.035; }.dot-grid-canvas { opacity:.18; mix-blend-mode:multiply; }
.page-loader { background:var(--ink); color:var(--paper); z-index:100; }.page-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }.loader-mark { font-size:18px; letter-spacing:.04em; }.loader-bar { background:rgba(255,255,255,.22); }.loader-fill { background:var(--acid); }.loader-text { color:rgba(255,255,255,.58); }
.site-header { position:sticky; top:0; height:76px; backdrop-filter:blur(14px); background:rgba(242,238,230,.82); border-bottom-color:rgba(37,43,48,.25); }.mark { font-size:20px; letter-spacing:-.08em; }.mark span,.footer-mark span { color:var(--red); }.site-header nav { gap:clamp(16px,2.4vw,38px); }.site-header nav a,.resume-link { color:var(--ink); font-size:9px; }.resume-link { border:1px solid var(--ink); padding:8px 11px; }.resume-link::after { display:none; }.resume-link:hover { color:var(--paper); background:var(--ink); }
.hero { min-height:calc(100svh - 76px); padding:clamp(42px,8vw,115px) 0 90px; }.hero-index { margin-bottom:clamp(48px,7vw,92px); color:var(--muted); }.hero-index span:last-child { color:var(--red); }.hero-main { grid-template-columns:minmax(0,1.5fr) minmax(286px,.55fr); gap:clamp(44px,7vw,140px); }.eyebrow { color:var(--ink); font-size:10px; }.hero h1 { max-width:950px; font-family:var(--serif); font-size:clamp(62px,9.7vw,146px); line-height:.84; letter-spacing:-.065em; }.hero h1 em { color:var(--red); }.intro { max-width:540px; color:#4f575d; font-size:clamp(16px,1.4vw,19px); line-height:1.75; margin:42px 0 30px; }.ink-button { border:1px solid var(--ink); background:var(--ink); transition:transform .25s,box-shadow .25s,background .25s; }.ink-button:hover { background:var(--red); box-shadow:6px 6px 0 var(--ink); transform:translate(-3px,-3px); }.hero-stats { margin-top:58px; border-top-color:var(--ink); gap:clamp(22px,4vw,62px); }.stat-number { font-family:var(--serif); color:var(--red); font-size:38px; }.stat-label { color:var(--muted); }
.specimen { max-width:370px; transform:rotate(2.2deg); }.specimen::before { inset:13px -13px -13px 13px; border-color:var(--ink); }.specimen-top { border-color:var(--ink); }.photo-frame { background:var(--acid); border-color:var(--ink); box-shadow:0 0 0 7px var(--paper); }.photo-frame:hover { box-shadow:10px 10px 0 var(--red),0 0 0 7px var(--paper); }.photo-frame img { filter:grayscale(100%) contrast(1.15); mix-blend-mode:multiply; }.specimen-data { border-color:var(--ink); background:var(--paper-light); }.specimen-data>div { border-color:var(--rule); }.status-pulse { color:var(--red)!important; }.hand-note { color:var(--red-dark); right:-54px; bottom:-62px; }
.ticker { margin-top:10px; background:var(--ink); border-color:var(--ink); transform:rotate(-.4deg) scale(1.01); }.ticker::before,.ticker::after { background:linear-gradient(90deg,var(--ink),transparent); }.ticker::after { background:linear-gradient(270deg,var(--ink),transparent); }.ticker-dot { color:var(--acid); }
.section { padding:clamp(90px,12vw,175px) 0; border-bottom-color:var(--rule); }.section-label { margin-bottom:clamp(48px,6vw,84px); color:var(--muted); }.section-label span:first-child { color:var(--red); }.section-label span:last-child { border-color:var(--ink); }.observation-grid { gap:clamp(42px,10vw,160px); }.large-statement p { font-family:var(--serif); font-size:clamp(32px,4.5vw,68px); line-height:1.13; letter-spacing:-.04em; }.large-statement p+p { color:var(--muted); }.margin-note { border-color:var(--red); background:rgba(255,255,255,.28); padding:20px; box-shadow:7px 7px 0 rgba(37,43,48,.12); }.currently-grid { margin-top:90px; border-color:var(--ink); }.currently-card { background:rgba(250,248,243,.46); min-height:230px; transition:color .25s,background .25s,transform .25s; }.currently-card:hover { transform:translateY(-7px); background:var(--ink); color:var(--paper); }.currently-card:hover .currently-label,.currently-card:hover .currently-author { color:var(--acid); }.currently-label { color:var(--red); }.currently-value { font-family:var(--serif); font-size:23px; }
.work { overflow:hidden; }.artifact { grid-template-columns:68px 1fr; margin-bottom:clamp(72px,9vw,132px); transition:transform .3s ease; }.artifact.offset { margin-left:12%; }.artifact-body { border-top:2px solid var(--ink); }.artifact-heading { padding:25px 0 32px; }.artifact-type { color:var(--red); }.artifact h2 { font-family:var(--serif); font-size:clamp(36px,4.7vw,70px); line-height:.95; }.artifact-heading>a { padding:8px 0; border-color:var(--ink); }.artifact-grid { gap:clamp(30px,6vw,90px); padding:32px 0; }.artifact-description { align-self:center; max-width:560px; font-size:17px; line-height:1.8; }.metadata { display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; }.metadata span,.chrono-stack span { border:1px solid var(--rule); padding:4px 7px; font-size:8px; letter-spacing:.08em; }.artifact::after { background:rgba(213,185,120,.18); }.diagram,.attention-map,.evidence-card,.terminal { border-color:var(--ink); background-color:var(--paper-light); }.diagram div,.token { background:var(--paper-light); }.evidence-card { background:var(--acid); box-shadow:8px 8px 0 var(--ink); transform:rotate(-1.5deg); }.chart { border-color:var(--ink); }.chart-line { background:var(--red); }.vision-grid { background:var(--ink)!important; color:var(--paper)!important; border:0!important; }.terminal { background:#20262c!important; box-shadow:8px 8px 0 var(--red); }
.notes-grid { gap:0; border-top:2px solid var(--ink); }.note { padding:30px; background:rgba(250,248,242,.42); transition:transform .3s,box-shadow .3s,background .3s; }.note:hover { transform:translateY(-8px) rotate(-.6deg); background:var(--acid); box-shadow:8px 8px 0 var(--ink); }.note h3 { font-family:var(--serif); font-size:clamp(27px,2.5vw,39px); line-height:1; }.note>span,.note-tag { color:var(--red); }.chronology { border-top:2px solid var(--ink); }.chrono-row { padding:34px 0; transition:background .2s,padding .25s; }.chrono-row:hover { background:rgba(213,185,120,.2); padding-left:16px; }.chrono-row h3 { font-family:var(--serif); font-size:31px; }.chrono-row>div>span { color:var(--red); }
.contact { border-bottom:0; }.contact-inner { background:var(--ink); color:var(--paper); padding:clamp(48px,8vw,112px); position:relative; overflow:hidden; }.contact-inner::after { content:"?"; position:absolute; right:-2%; bottom:-24%; color:var(--acid); opacity:.13; font-family:var(--serif); font-size:clamp(280px,43vw,700px); line-height:1; }.contact-inner>* { position:relative; z-index:1; }.contact-label { color:var(--acid); }.contact h2 { font-family:var(--serif); font-size:clamp(54px,8vw,120px); line-height:.88; letter-spacing:-.05em; }.contact h2 em { color:var(--red); }.contact p { color:rgba(243,240,232,.72); }.contact-button { background:var(--acid); color:var(--ink); }.contact-button:hover { background:var(--red); color:var(--paper); }.contact-links a { color:var(--paper); }
footer { background:var(--ink); color:var(--paper); padding:58px max(7vw,calc((100vw - var(--max))/2)) 28px!important; }.footer-main { border-color:rgba(243,240,232,.28); }.footer-brand p,.footer-colophon p,.footer-bottom { color:rgba(243,240,232,.6); }.footer-nav a { color:var(--paper); }.colophon-label { color:var(--acid); }
@media (max-width:850px) { .site-header { height:64px; }.site-header nav { display:none; }.hero { min-height:auto; padding-top:44px; }.hero h1 { max-width:100%; font-size:50px; overflow-wrap:anywhere; }.hero-copy { min-width:0; width:100%; }.intro { inline-size:min(100%,330px); max-width:100%; font-size:15px; overflow-wrap:anywhere; }.hero-index span:nth-child(2) { display:none; }.hero-main,.observation-grid { grid-template-columns:minmax(0,1fr); }.specimen { margin:28px auto 40px; justify-self:center; width:min(80%,360px); }.hand-note { right:-35px; }.artifact,.artifact.offset { grid-template-columns:1fr; margin-left:0; }.artifact-number { padding-bottom:10px; }.artifact-grid { grid-template-columns:1fr; }.artifact-heading { gap:18px; }.artifact-heading>a { white-space:nowrap; }.currently-grid { grid-template-columns:1fr; }.currently-card { min-height:auto; border-right:0; border-bottom:1px solid var(--rule); }.notes-grid { grid-template-columns:1fr; }.note { border-right:0!important; border-bottom:1px solid var(--rule); }.contact-inner { margin:0 calc(var(--pad) * -1); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }