@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600;1,700&display=swap');

:root { --ink:#101413; --paper:#f5f4ef; --muted:#64706a; --line:#cbd0c9; --acid:#cbff4d; --dark:#18231e; --white:#fffefa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible, button:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:9; background:var(--acid); padding:.65rem 1rem; font-weight:800; } .skip-link:focus { top:1rem; }
.site-header { display:flex; justify-content:space-between; align-items:center; max-width:1280px; margin:auto; padding:1.1rem 2.5rem; border-bottom:1px solid var(--line); }
.wordmark { font-family:"DM Mono",monospace; font-weight:500; font-size:1.05rem; text-decoration:none; letter-spacing:-.06em; } .wordmark span { color:#6f8c10; }
.header-actions { display:flex; align-items:center; gap:1.5rem; } nav { display:flex; gap:1.45rem; } nav a { font-size:.88rem; font-weight:700; text-decoration:none; } nav a:hover { text-decoration:underline; }.language-selector { gap:.55rem; padding-left:1.5rem; border-left:1px solid var(--line); }.language-selector a { color:var(--muted); font:500 .68rem "DM Mono",monospace; letter-spacing:.03em; }.language-selector a[aria-current="page"] { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
main { max-width:1280px; margin:auto; padding:0 2.5rem; }
.intro { min-height:clamp(490px,66vh,680px); padding:clamp(5rem,12vw,10rem) 0 4rem; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eyebrow,.project-index { font:500 .75rem/1.2 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
h1,h2,h3,p { margin-top:0; } h1 { max-width:1000px; margin:1rem 0 1.8rem; font-size:clamp(3.25rem,7.5vw,7rem); line-height:.98; letter-spacing:-.07em; font-weight:800; } h1 em { font-family:"Playfair Display",serif; font-weight:600; letter-spacing:-.06em; }
.lede { max-width:615px; font-size:clamp(1.12rem,1.8vw,1.4rem); line-height:1.5; } .text-link { margin-top:1.2rem; font-weight:800; }
.projects { padding:4rem 0 7rem; } .section-heading { padding-bottom:2.4rem; border-top:1px solid var(--ink); padding-top:1.25rem; }.section-heading h2 { max-width:690px; font-size:clamp(1.8rem,3.4vw,3.2rem); line-height:1.08; letter-spacing:-.05em; margin-bottom:0; }
.project { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr); gap:clamp(2rem,5vw,6.5rem); align-items:center; padding:4.8rem 0; border-bottom:1px solid var(--line); }.project-image,.project-visual { overflow:hidden; min-height:420px; }.project-image img { width:100%; height:100%; object-fit:cover; display:block; }.report-image { background:#10231d; aspect-ratio:851/790; }.report-image img { object-position:center 18%; }.tv-image { background:#111; }.tv-image img { object-position:center; }
.project-copy { padding:1rem 0; } h3 { font-size:clamp(2rem,3.5vw,3.4rem); letter-spacing:-.06em; line-height:1; margin:.8rem 0 1.25rem; }.summary { font-size:1.12rem; line-height:1.48; font-weight:600; }.project-details { border-top:1px solid var(--line); margin:1.8rem 0 1.3rem; }.project-details div { padding:.82rem 0; border-bottom:1px solid var(--line); }.project-details dt { font:500 .68rem/1.2 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }.project-details dd { margin:0; font-size:.94rem; }.technical-note,.availability { font-size:.82rem; color:#505b55; }.technical-note code { font-family:"DM Mono",monospace; font-size:.76rem; }.button-link { display:inline-block; padding:.82rem 1rem; background:var(--ink); color:var(--white); font-weight:800; text-decoration:none; margin-top:.7rem; }.button-link:hover { background:#344139; }
.porra-image { width:100%; min-width:0; min-height:0; background:#edf1f5; }.porra-image img { width:100%; height:auto; object-fit:contain; }
.tv-showcase { background:#080d13; padding:1.5rem; display:grid; grid-template-columns:.92fr .92fr 1.2fr; gap:.85rem; align-items:end; }
.tv-shot { min-width:0; margin:0; color:#cbd3dd; }.tv-shot-frame { position:relative; overflow:hidden; aspect-ratio:390/844; border:1px solid #29313c; border-radius:1rem; background:#080d13; box-shadow:0 1rem 2.4rem rgba(0,0,0,.3); }.tv-shot-frame img { width:100%; height:100%; display:block; object-fit:cover; }.tv-shot--search .tv-shot-frame { aspect-ratio:538/884; }.tv-shot figcaption { padding-top:.55rem; font:500 .66rem "DM Mono",monospace; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.about { display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; padding:6rem 0; border-bottom:1px solid var(--line); }.about h2,.contact h2 { font-size:clamp(2.25rem,4vw,4rem); line-height:1.05; letter-spacing:-.06em; margin:0; }.about-copy { max-width:600px; font-size:1.12rem; }.about-copy p+p { margin-top:1.2rem; }
.contact { padding:7rem 0 8rem; }.contact h2 { margin:1rem 0 2rem; }.contact-links { display:flex; gap:2rem; flex-wrap:wrap; }.contact-links a { font-size:clamp(1.05rem,2vw,1.35rem); font-weight:800; }
footer { max-width:1280px; margin:auto; padding:1.5rem 2.5rem 2.2rem; color:var(--muted); font:400 .72rem "DM Mono",monospace; border-top:1px solid var(--line); }.linkedin-banner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.85rem; padding:.85rem 1rem; color:var(--ink); background:#eef0ea; border:1px solid var(--line); text-decoration:none; transition:border-color .2s ease,transform .2s ease; }.linkedin-banner:hover { border-color:var(--ink); transform:translateY(-1px); }.linkedin-mark { width:2rem; height:2rem; display:grid; place-items:center; border-radius:3px; background:#0a66c2; color:white; font:800 1rem/1 Manrope,sans-serif; letter-spacing:-.05em; }.linkedin-profile { display:flex; flex-direction:column; min-width:0; }.linkedin-profile strong { color:var(--ink); font:700 .84rem/1.35 Manrope,sans-serif; }.linkedin-profile small { overflow:hidden; color:var(--muted); font:400 .68rem/1.35 "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }.linkedin-cta { color:var(--ink); font-weight:500; }.footer-meta { display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; }
@media (max-width:850px) { .site-header { align-items:flex-start; } .header-actions { align-items:flex-end; flex-direction:column; gap:.6rem; }.language-selector { padding-left:0; border-left:0; } }
@media (max-width:720px) { .site-header,main,footer { padding-left:1.2rem; padding-right:1.2rem; }.site-header { padding-top:1rem; padding-bottom:1rem; } nav { gap:.8rem; } nav a { font-size:.76rem; }.language-selector a { font-size:.64rem; }.intro { min-height:540px; padding-top:6rem; }.projects { padding-top:2rem; }.project,.about { grid-template-columns:1fr; gap:1.5rem; padding:3.5rem 0; }.project-image,.project-visual { min-height:330px; }.porra-image { min-height:0; }.tv-showcase { grid-template-columns:150px 150px 195px; align-items:center; overflow-x:auto; padding:1rem; }.project-copy { padding:0; }.project-porra .project-image { order:0; }.about { padding:4.5rem 0; }.contact { padding:5rem 0; }.linkedin-banner { grid-template-columns:auto 1fr; }.linkedin-cta { grid-column:2; }.footer-meta { flex-direction:column; } }
@media (max-width:460px) { .site-header { flex-direction:column; gap:.8rem; }.header-actions { width:100%; align-items:flex-start; }.header-actions nav { flex-wrap:wrap; row-gap:.45rem; }.intro { padding-top:4.5rem; }.contact-links a { overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }