@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-var.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
:root{--cream:#ece4d0;--paper:#f1ead8;--ink:#141d2e;--ink2:#24324a;--muted:#4f5a6b;--navy:#1c2c45;--orange:#e07a2c;--orange-ink:#a9500f;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
--pad:clamp(20px,4vw,56px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);-webkit-text-size-adjust:100%}
body{min-height:100vh;color:var(--ink);font-family:var(--serif);overflow-x:hidden;
 background:linear-gradient(var(--cream) 0 60%,#2f4866 60%,#16233a)} /* no-JS fallback */
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
ol,ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#sea{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;display:block;z-index:0}
.grain{position:fixed;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;z-index:1;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.33  0 0 0 0 0.3  0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.seafade{position:fixed;left:0;right:0;bottom:0;height:200px;background:linear-gradient(transparent,rgba(14,22,37,.88));pointer-events:none;z-index:1}

/* ---------- HUD (decorative) ---------- */
.hud{position:fixed;inset:0;pointer-events:none;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.75}
.hud .h{position:absolute;color:rgba(20,29,46,.62)}
.hud b{font-weight:500;color:var(--ink)} .hud .o{color:var(--orange)}
.hud .tl{top:26px;left:30px;-webkit-mask:linear-gradient(180deg,#000 40%,transparent);mask:linear-gradient(180deg,#000 40%,transparent)}
.hud .tr{top:26px;right:30px;text-align:right;-webkit-mask:linear-gradient(270deg,transparent,#000 35%);mask:linear-gradient(270deg,transparent 0,#000 35%)}
.hud .bl{bottom:24px;left:30px;color:rgba(236,228,208,.72);-webkit-mask:linear-gradient(0deg,#000 50%,rgba(0,0,0,.25));mask:linear-gradient(0deg,#000 50%,rgba(0,0,0,.25))}
.hud .br{bottom:24px;right:30px;text-align:right;color:rgba(236,228,208,.72);-webkit-mask:linear-gradient(270deg,rgba(0,0,0,.3),#000 50%);mask:linear-gradient(270deg,rgba(0,0,0,.3),#000 50%)}
.hud .bl b,.hud .br b{color:var(--cream)}
.hud .vim{color:rgba(20,29,46,.5)} .hud .bl .vim{color:rgba(236,228,208,.5)}
.corner{position:absolute;width:14px;height:14px;border:0 solid rgba(20,29,46,.45)}
.c1{top:14px;left:14px;border-width:1px 0 0 1px}.c2{top:14px;right:14px;border-width:1px 1px 0 0}
.c3{bottom:14px;left:14px;border-width:0 0 1px 1px;border-color:rgba(236,228,208,.5)}.c4{bottom:14px;right:14px;border-width:0 1px 1px 0;border-color:rgba(236,228,208,.5)}
.ticks{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:240px;height:8px;
 background:repeating-linear-gradient(90deg,rgba(20,29,46,.4) 0 1px,transparent 1px 12px);-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}

/* ---------- Content ---------- */
main{position:relative;z-index:3}
.ident,.writing{text-shadow:0 0 14px var(--cream),0 0 4px var(--cream)}
.eyebrow{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow i{display:inline-block;width:38px;height:1px;background:rgba(20,29,46,.45)}
h1{font-weight:400;font-size:clamp(88px,10.3vw,148px);line-height:.86;letter-spacing:-.02em;margin:18px 0 22px}
h1 .dot{color:var(--orange)}
.bio{font-size:clamp(21px,1.75vw,25px);line-height:1.3;color:var(--ink2);max-width:440px}
.writing h2{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid rgba(20,29,46,.35);padding-bottom:8px;margin-bottom:4px}
.writing h2 .meta{font-weight:400;color:var(--muted)}
.writing li a{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px dotted rgba(20,29,46,.28);transition:padding .5s ease,color .3s}
.writing li a:hover{padding-left:6px}
.writing li a:hover .t,.writing li a:focus-visible .t{color:var(--orange-ink)}
.writing time{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}
.writing .t{font-size:20.5px;line-height:1.18;color:var(--ink);transition:color .3s}
.writing .ar{font-family:var(--mono);font-size:.7em;vertical-align:.12em}
.writing .s{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.social ul{display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.social a{display:inline-block;padding:10px 2px;border-bottom:1px solid transparent;transition:border-color .3s,color .3s;text-shadow:0 1px 8px rgba(10,16,28,.8)}
.social a:hover,.social a:focus-visible{border-bottom-color:var(--orange);color:#fff}
.social .mail a{color:#f6cfa8;text-transform:none;letter-spacing:.06em}

/* Desktop: one calm screen */
@media (min-width:900px){
 main{height:100vh;min-height:620px}
 .ident{position:absolute;left:9vw;top:15vh;width:min(560px,42vw)}
 .writing{position:absolute;right:8vw;top:15vh;width:min(430px,34vw)}
 .social{position:absolute;left:0;right:0;bottom:58px;display:flex;justify-content:center}
}
@media (min-width:900px) and (max-height:700px){ .ident,.writing{top:11vh} h1{font-size:96px;margin:10px 0 14px} .writing li a{padding:5px 0} }

/* Mobile / narrow: stacked */
@media (max-width:899px){
 .hud{position:absolute;height:120px} .hud .bl,.hud .br,.hud .c3,.hud .c4,.hud .ticks{display:none}
 .hud .tl{top:20px;left:20px}.hud .tr{top:20px;right:20px}.hud .tl .vim{display:none}
 .corner.c1{top:10px;left:10px}.corner.c2{top:10px;right:10px}
 .hud .h{font-size:8.5px} .hud .wide{display:none} .hud .tr{-webkit-mask:none;mask:none}
 main{padding:96px var(--pad) 40px}
 h1{margin:14px 0 16px}
 .bio{font-size:21px;max-width:none}
 .writing{margin-top:30vh;background:rgba(241,234,216,.94);border:1px solid rgba(20,29,46,.4);padding:16px 18px 6px;box-shadow:0 24px 50px -28px rgba(5,10,20,.7);text-shadow:none}
 .writing li:last-child a{border-bottom:0}
 .writing li a{grid-template-columns:1fr auto;grid-template-areas:"t t" "d s";gap:2px 10px;padding:12px 0;min-height:56px}
 .writing .t{grid-area:t;font-size:21px}.writing time{grid-area:d}.writing .s{grid-area:s;text-align:right}
 .writing li a:hover{padding-left:0}
 .social{margin-top:22px;background:rgba(16,26,43,.82);border:1px solid rgba(236,228,208,.25);padding:8px}
 .social ul{display:grid;grid-template-columns:1fr 1fr;gap:0}
 .social li a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-bottom:1px solid rgba(236,228,208,.12)}
 .social li.mail{grid-column:1/-1}.social li.mail a{border-bottom:0;font-size:13px}
 .seafade{height:120px}
}

/* ---------- Boot ---------- */
#boot{display:none}
html.boot #boot{display:flex;position:fixed;inset:0;z-index:20;background:var(--cream);align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .45s ease;cursor:pointer}
html.boot.booted #boot{opacity:0;pointer-events:none}
#boot pre{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink);line-height:1.8;min-height:8em;min-width:32ch}
#boot .skip{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.7}
html.boot main{opacity:0} html.boot.booted main{opacity:1;transition:opacity .8s ease .1s}

@media (prefers-reduced-motion:reduce){
 *{transition:none!important;animation:none!important}
}
@media (max-height:820px){.hud .tl .vim{display:none}}