@font-face{font-family:"Source Serif 4";src:url(assets/fonts/source-serif-4-opsz.woff2) format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(assets/fonts/source-serif-4-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url(assets/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Oxanium";src:url(assets/fonts/oxanium.woff2) format("woff2");font-weight:400 600;font-display:swap}
/* Palette sampled from the reference poster (Pillow quantize) */
:root{--paper:#f6ecda;--paper2:#efe2c9;--teal:#2f4b47;--pine:#203334;--ink:#2f4b47;--ink-strong:#203334;--muted:#4f5e5a;
--gold:#a8905e;--gold-soft:#d9c59b;--gold-text:#725c32;--rule:#dccba6;--tint:rgba(47,75,71,.06);
--serif:"Source Serif 4",Georgia,serif;--sans:"Barlow",Arial,sans-serif;--tech:"Oxanium","Barlow",sans-serif;
--gutter:clamp(18px,4vw,48px);--e:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-synthesis:none;color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
background:radial-gradient(120% 70% at 50% 0,#fbf4e6 0,transparent 60%),radial-gradient(90% 60% at 50% 100%,var(--paper2) 0,transparent 70%),var(--paper)}
a{color:inherit}ul{list-style:none;margin:0;padding:0}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:12px;z-index:9;background:var(--ink-strong);color:#fff;padding:8px 12px}
:focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;box-shadow:0 0 0 5px var(--gold-soft)}
::selection{background:var(--gold-soft);color:var(--ink-strong)}
/* frame */
.frame{position:relative;display:flex;flex-direction:column;min-height:100vh;padding:calc(clamp(0px,2vw,28px) + 1px) calc(var(--gutter) + clamp(0px,2vw,28px) + 1px) calc(clamp(0px,2vw,28px) + 9px)}
.frame>main,.frame>.foot{width:100%;max-width:calc(1150px - 2*var(--gutter));margin-inline:auto}
.frame>main{flex:1 0 auto}

h1,h2,h3{font-family:var(--serif);color:var(--ink-strong);font-weight:500;font-optical-sizing:auto}
.btn{display:inline-flex;align-items:center;gap:16px;border:1px solid var(--gold);padding:15px 26px 14px;text-decoration:none;font:500 13px/1 var(--tech);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-strong);background:transparent;position:relative;transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e)}
.btn svg{width:18px;height:10px;color:var(--gold);transition:transform .35s var(--e),color .35s}
.btn:hover{background:var(--teal);border-color:var(--teal);color:var(--paper)}.btn:hover svg{color:var(--gold-soft);transform:translateX(4px)}
.label{font:500 12px/1 var(--tech);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text);margin:0 0 16px;padding-left:.28em}
.social{display:flex;gap:14px;margin:2px 0 18px}
.social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--rule);color:var(--teal);transition:border-color .3s var(--e),color .3s}
.social a:hover{border-color:var(--gold);color:var(--gold-text)}.social svg{width:18px;height:18px}
.mail{font:400 17px/1 var(--sans);color:var(--ink);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 50% 100%/0 1px no-repeat;padding-bottom:4px;transition:background-size .4s var(--e)}.mail:hover{background-size:100% 1px}
/* footer: same as /essays/ */
.foot{text-align:center;border-top:1px solid var(--rule);padding:22px clamp(4px,2vw,24px) 18px;font:500 12px/1.6 var(--tech);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* responsive */


/* reduced motion: no hover transitions or smooth scroll */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v7d: teal used functionally */
.frame{padding-bottom:0}
.btn{background:var(--teal);border-color:var(--teal);color:var(--paper);transition:background .35s var(--e),box-shadow .35s var(--e)}
.btn svg{color:var(--gold-soft)}
.btn:hover{background:var(--pine);border-color:var(--pine);color:var(--paper);box-shadow:inset 0 0 0 4px var(--pine),inset 0 0 0 5px var(--gold-soft)}
.foot{border-top:0;background:var(--pine);position:relative;isolation:isolate;color:#d8d2c3;padding:18px clamp(4px,2vw,24px)}

/* v7f: no podium */

/* v7k: Source Serif 4 display */
body{overflow-x:clip}
.foot::before{background:var(--pine)}

/* v8: Emil-style single column */
.col,.intro{width:100%;max-width:640px;margin-inline:auto}
.intro{padding:clamp(72px,11vw,148px) 0 0}
.projects{padding-top:clamp(80px,10vw,128px)}
.projects .label{padding-left:0;margin-bottom:clamp(20px,2.4vw,28px)}
.project{padding:clamp(18px,2.2vw,24px) 0;border-top:1px solid var(--rule)}
.project:last-child{border-bottom:1px solid var(--rule)}
.project h3,.intro .name{margin:0 0 4px;font-weight:400;font-size:clamp(21px,.5vw + 17px,24px);line-height:1.3;letter-spacing:-.005em;font-variation-settings:"opsz" 24;color:var(--teal)}
.project h3 a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--e)}
.project h3 a svg{width:16px;height:9px;color:var(--gold);flex:none;transition:transform .35s var(--e)}
.project h3 a:hover{background-size:100% 1px}.project h3 a:hover svg{transform:translateX(4px)}
.project p,.intro .hello{margin:0;color:var(--muted);font-size:16.5px;text-wrap:pretty}
@media (max-width:600px){.intro,.col{padding-inline:4px}}
/* v9: Paco/Emil minimal, no header */
/* v10: left-aligned intro reuses project title/teaser styles */
.intro .btn{margin-top:28px}


/* v14: contact as a cream section */
.contact{scroll-margin-top:24px}
.social{display:flex;gap:14px;margin:0}
.social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold);color:var(--teal);transition:border-color .3s var(--e),color .3s var(--e),background-color .3s var(--e)}
.social a:hover{border-color:var(--teal);background:var(--tint);color:var(--ink-strong)}.social svg{width:18px;height:18px}
.mail{font:400 17px/1.4 var(--sans);color:var(--teal);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .4s var(--e)}.mail:hover{background-size:100% 1px}
/* v15: teal band (emblem + quote) below Contact, pine footer */
.contact{padding-bottom:0}
.band{margin:clamp(64px,8vw,104px) 0 0;padding:clamp(56px,7vw,80px) 0;background:var(--teal);position:relative;isolation:isolate;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:none}
.band>*{width:100%;max-width:620px}
.band::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;background:var(--teal)}
.mark{display:flex;align-items:center;gap:20px;color:var(--gold-soft);margin:0 auto 24px}.mark span{flex:1;height:1px;background:rgba(217,197,155,.35)}.mark svg{width:56px;height:56px;flex:none}
.quote{margin:0}.quote blockquote{margin:0}.quote p{font:400 italic clamp(24px,1.4vw + 16px,32px)/1.3 var(--serif);letter-spacing:-.005em;color:var(--paper);margin:0;text-wrap:balance}
.foot{margin-top:0}
/* v15: no closing hairlines; no rule between contact rows */
.project:last-child{border-bottom:0}
.contact .project+.project{border-top:0;padding-top:0}
.foot::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;background:var(--pine)}