* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink:#173354; --paper:#f5f1e8; --paper-deep:#eee8dc; --rule:rgba(23,51,84,.19); --faint:rgba(23,51,84,.075); --accent:#d66d4c; --mono:'DM Mono',ui-monospace,monospace; --serif:'Newsreader',Georgia,serif; --title-size:clamp(48px,6vw,80px); --entry-title-size:clamp(21px,2vw,28px); --label-size:11px; --nav-size:17px; }
/* Accent rule: rust is reserved for interactive links and navigation states—never labels, metadata, or decoration. */
html { scroll-behavior:smooth; }
body { color:var(--ink); background:var(--paper-deep); font-family:var(--serif); line-height:1.5; padding:28px; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.32; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
a { color:inherit; }
.site-frame { max-width:1380px; margin:auto; background:var(--paper); border:1px solid var(--rule); position:relative; overflow:hidden; }
.container { width:100%; padding-inline:clamp(28px,6vw,92px); }
.hero-meta-label,.about-label,.section-heading,.writing-date,.post-date,.footer { font-family:var(--mono); }
.hero { min-height:315px; position:relative; }
.hero .container { height:100%; position:relative; padding-top:42px; }
.hero-heading { display:block; }
.hero-title,.page-title,.post-title,.home-intro h1 { font-family:var(--serif); font-size:var(--title-size); font-weight:400; letter-spacing:-.012em; line-height:1.04; text-wrap:balance; font-kerning:normal; }
.hero-title { white-space:nowrap; animation:enter .8s ease both; }
.hero-meta { display:flex; gap:clamp(48px,8vw,110px); margin-top:28px; }
.hero-meta-item { display:grid; gap:7px; }
.hero-meta-label { font-size:9px; text-transform:uppercase; opacity:.6; letter-spacing:.1em; }
.hero-meta-value { font-family:var(--serif); font-size:clamp(15px,1.85vw,22px); line-height:1.15; }
.hero-meta-value a { text-decoration-color:var(--accent); text-underline-offset:4px; }
.section { border-top:1px solid var(--rule); }
#about { padding-block:30px 42px; }
.about-grid { display:grid; grid-template-columns:145px minmax(0,700px); gap:55px; }
.about-label { padding-top:7px; }
.about-label,.section-heading { font-size:var(--label-size); font-weight:400; text-transform:uppercase; letter-spacing:.09em; }
.about-content p { font-size:clamp(18px,2vw,24px); line-height:1.45; margin-bottom:3px; }
.about-content a { text-decoration-color:var(--accent); text-underline-offset:4px; }
.index-grid .container { display:grid; grid-template-columns:1fr 1fr; padding-inline:0; }
.index-column { padding:30px clamp(28px,5vw,78px) 42px; min-width:0; }
.index-column + .index-column { border-left:1px solid var(--rule); }
.section-heading { display:flex; justify-content:space-between; gap:16px; margin-bottom:20px; }
.section-heading a { color:var(--accent); font-family:var(--serif); font-size:13px; letter-spacing:0; text-decoration:none; text-transform:none; }
.home-writing-item { display:grid; gap:4px; padding:13px 0; border-bottom:1px solid var(--rule); text-decoration:none; }
.home-writing-item small { font:8px var(--mono); text-transform:uppercase; opacity:.65; }
.home-writing-item span { font-size:17px; }
.home-writing-item:hover span { color:var(--accent); }
.contact-links { display:grid; }
.contact-link { display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--rule); font-size:17px; text-decoration:none; }
.contact-link:hover { color:var(--accent); }
.contact-icon { display:none; }
.footer { padding:22px 0; border-top:1px solid var(--rule); color:var(--ink); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.footer-content,.footer-info { display:flex; justify-content:space-between; align-items:center; gap:28px; }
.writing-page,.projects-page,.post-page,.about-page { min-height:70vh; padding:60px 0 90px; border-top:1px solid var(--rule); }
.about-page .about-content p + p { margin-top:20px; }
.page-header { padding-bottom:55px; }
.project-list { list-style:none; border-top:1px solid var(--rule); }
.project-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; padding:28px 0; border-bottom:1px solid var(--rule); text-decoration:none; }
.project-entry h2,.project-entry h3 { font-size:var(--entry-title-size); font-weight:400; line-height:1.25; }
.project-entry p { margin-top:9px; font-size:15px; line-height:1.6; color:#626c77; }
.project-arrow { font-size:25px; line-height:1; }
.project-entry:hover h2,.project-entry:hover h3,.project-entry:hover .project-arrow { color:#ad4b2e; }
.writing-list { border-top:1px solid var(--rule); }
.writing-item { display:grid; grid-template-columns:140px 1fr auto; gap:40px; align-items:center; padding:28px 0; border-bottom:1px solid var(--rule); }
.writing-date { font-size:9px; text-transform:uppercase; }
.writing-title { font-family:var(--serif); font-size:var(--entry-title-size); font-weight:400; line-height:1.25; }
.writing-title a { text-decoration:none; transition:color .2s ease; }
.writing-title a:hover { color:var(--accent); }
.writing-desc { margin-top:4px; font-size:15px; opacity:.75; }
.writing-link { color:var(--accent); font-family:var(--serif); font-size:14px; text-decoration:none; }
.post-page .container { max-width:1000px; margin:auto; }
.post-header { margin-bottom:64px; }
.post-meta { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--rule); margin-bottom:38px; font-size:9px; text-transform:uppercase; }
.post-back { font-family:var(--serif); font-size:13px; text-decoration:none; color:var(--accent); }
.post-title { max-width:900px; }
.post-content { width:100%; font-size:19px; line-height:1.7; }
.post-content p,.post-content ul,.post-content ol,.post-content pre { margin-bottom:1.4em; }
.post-content > p,.post-content > ul,.post-content > ol,.post-content > blockquote { max-width:760px; }
.post-content h1,.post-content h2,.post-content h3 { font-family:var(--serif); font-weight:500; line-height:1.1; margin:2em 0 .7em; }
.post-content h1,.post-content h2 { font-size:36px; } .post-content h3 { font-size:27px; }
.post-content ul,.post-content ol { padding-left:1.4em; }
.post-content blockquote { border-left:1px solid var(--rule); margin:2em 0; padding-left:24px; font-style:italic; }
.post-content code { font:.8em var(--mono); background:var(--faint); padding:.15em .35em; }
.post-content pre { overflow-x:auto; padding:20px; border:1px solid var(--rule); }
.post-content pre code { background:none; padding:0; }
.post-content a { text-decoration-color:var(--accent); text-underline-offset:3px; }
.post-content .video-embed { display:block; position:relative; width:100%; max-width:none; aspect-ratio:16/9; margin:2em 0; overflow:hidden; border:1px solid var(--rule); background:var(--faint); }
.post-content .video-embed iframe { display:block; position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none; border:0; }
.post-content iframe { display:block; width:100% !important; min-height:0; aspect-ratio:16/9; border:0; }
@keyframes enter { from { opacity:0; transform:translateY(8px); } }
::selection { background:var(--ink); color:var(--paper); }
a:focus-visible { outline:1px solid var(--accent); outline-offset:5px; }
@media (max-width:760px) {
 :root { --title-size:clamp(40px,12vw,56px); --entry-title-size:21px; --nav-size:16px; }
 body { padding:10px; } .container { padding-inline:22px; }
 .hero { min-height:310px; } .hero .container { padding-top:45px; }
 .hero-meta { gap:35px; margin-top:38px; } .about-grid { grid-template-columns:1fr; gap:20px; }
 .index-grid .container { grid-template-columns:1fr; } .index-column + .index-column { border-left:0; border-top:1px solid var(--rule); }
 .writing-item { grid-template-columns:1fr auto; gap:10px 20px; } .writing-date { grid-column:1/-1; } .writing-desc { display:none; }
 .post-header { margin-bottom:44px; }
 .footer-content { align-items:flex-end; } .footer-info { flex-direction:column; align-items:flex-start; gap:3px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hero-title { animation:none; } }