/* ============================================================
   V2 — EDITORIAL REFINEMENT
   Identity unchanged: #FFFFFF / #111111 / #F5F3EF / #333333 / #92908B / #E5E5E5
   Direction: masthead typography, numbered sections, index lists,
   asymmetric project composition, marginalia, figure treatment.
   ============================================================ */
:root{--white:#FFFFFF;--black:#111111;--ivory:#F5F3EF;--charcoal:#333333;--warm:#92908B;--warm-text:#716E66;--border:#E5E5E5;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,-apple-system,sans-serif;--max:1240px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--black);color:#fff}
body{font-family:var(--sans);color:var(--charcoal);background:var(--white);line-height:1.8;font-size:16.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.04)}
a{color:var(--black);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.container{max-width:var(--max);margin:0 auto;padding:0 2.5rem}
.narrow{max-width:760px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--black);color:#fff;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:1rem;top:1rem}
/* --- Section numbering: editorial apparatus, not decoration --- */
main{counter-reset:sec}
.kicker{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--warm-text);font-weight:500;margin-bottom:1.4rem}
.section .kicker::before{counter-increment:sec;content:"Nº 0" counter(sec) "  —  ";color:var(--black)}
.section{padding:8.5rem 0}
.section-ivory{background:var(--ivory)}
.section-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,4.4vw,3.4rem);line-height:1.12;color:var(--black);margin-bottom:2.6rem;text-wrap:balance}
.lead{font-size:1.13rem;line-height:1.9}
.center{text-align:center}
/* Header — newspaper rule */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.97);border-bottom:4px double var(--black);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--black)}
.brand:hover{text-decoration:none}
.brand-mono{font-family:var(--serif);font-weight:600;font-size:1.3rem;border:1px solid var(--black);width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:none}
.brand-name{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:.03em}
.main-nav{display:flex;gap:2.4rem;align-items:center}
.main-nav a{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--charcoal);position:relative;padding:.2rem 0}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--black);transition:width .4s ease}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.main-nav a:hover{text-decoration:none}
.lang-switch{display:flex;gap:.4rem;align-items:center;font-size:.8rem;border-left:1px solid var(--border);padding-left:1.6rem}
.lang-switch a::after{display:none}
.lang-active{font-weight:600;color:var(--black);border-bottom:1px solid var(--black)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--black);margin:5px 0}
/* Hero — masthead */
.hero{padding:4.5rem 0 0}
.hero-top{display:flex;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--black);padding-bottom:1rem;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--warm-text)}
.hero-top .kicker{margin:0}
.hero-name{font-family:var(--serif);font-weight:500;font-size:clamp(3.8rem,9.5vw,8rem);line-height:.98;letter-spacing:-.015em;color:var(--black);padding:3.2rem 0 3.6rem;border-bottom:1px solid var(--border)}
.hero-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;padding:3.8rem 0 4.5rem;align-items:start}
.hero-statement{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.35rem);font-style:italic;font-weight:500;line-height:1.35;color:var(--black);margin-bottom:1.6rem}
.hero-sub{max-width:32rem;margin-bottom:2.8rem}
.hero-actions{display:flex;gap:3rem;flex-wrap:wrap}
.editorial-link{font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;color:var(--black);display:inline-flex;align-items:center;gap:.9rem}
.editorial-link::after{content:"";display:block;width:44px;height:1px;background:var(--black);transition:width .45s ease}
.editorial-link:hover{text-decoration:none}
.editorial-link:hover::after{width:72px}
.hero-portrait{position:relative;margin-top:1.2rem}
.hero-portrait::after{content:"";position:absolute;inset:0;transform:translate(20px,20px);border:1px solid var(--black);z-index:-1}
.hero-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ivory)}
.hero-portrait figcaption,.fig-cap{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--warm-text);margin-top:1.9rem}
.hero-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--black)}
.hero-meta div{padding:1.3rem 1.5rem 1.6rem 0;border-right:1px solid var(--border)}
.hero-meta div:last-child{border-right:0;padding-left:1.5rem}
.hero-meta div:nth-child(2){padding-left:1.5rem}
.hero-meta span{display:block;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--warm-text);margin-bottom:.3rem}
.hero-meta strong{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--black)}
.scroll-hint{display:none}
/* Buttons — reserved for the form only; links carry navigation */
.btn{display:inline-block;padding:1rem 2.4rem;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--black);transition:background .3s,color .3s;cursor:pointer;font-family:var(--sans);background:var(--black);color:#fff}
.btn:hover{text-decoration:none;background:var(--charcoal)}
.btn[disabled]{opacity:.55;cursor:wait}
.text-link{font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--black);padding-bottom:3px}
.text-link:hover{text-decoration:none;color:var(--warm);border-color:var(--warm)}
/* Intro — text column + marginalia */
.intro-grid{display:grid;grid-template-columns:220px 1fr;gap:5rem}
.side-note{font-size:.86rem;line-height:1.9;color:var(--warm-text);border-top:1px solid var(--black);padding-top:1rem;max-width:180px}
.drop-cap::first-letter{font-family:var(--serif);font-size:4.6em;font-weight:500;float:left;line-height:.78;padding:.06em .14em 0 0;color:var(--black)}
.intro-main .text-link{margin-top:.5rem;display:inline-block}
.intro-main p{margin-bottom:1.4rem}
/* Expertise — an index, not cards */
.exp-grid{display:block;border-top:2px solid var(--black)}
.exp-item{display:grid;grid-template-columns:130px 1fr;gap:2.5rem;padding:3rem .5rem;border-bottom:1px solid var(--border);transition:padding-left .45s ease,background .45s ease;align-items:start}
.exp-item:hover{padding-left:1.6rem;background:linear-gradient(to right,var(--ivory),transparent 70%)}
.exp-num{font-family:var(--serif);font-size:3.2rem;font-weight:500;line-height:1;color:var(--warm)}
.exp-item h3{font-family:var(--serif);font-weight:600;font-size:2rem;color:var(--black);margin-bottom:.5rem;line-height:1.15}
.exp-item p{max-width:620px}
.exp-skills{font-size:.8rem;color:var(--warm-text);letter-spacing:.14em;text-transform:uppercase;margin-top:1rem}
/* Projects — asymmetric editorial composition */
.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4.5rem 2.5rem;counter-reset:fig}
.project-card{counter-increment:fig}
.project-card:nth-child(1){grid-column:1/8}
.project-card:nth-child(2){grid-column:8/13;margin-top:7rem}
.project-card:nth-child(3){grid-column:1/6;margin-top:-2rem}
.project-card:nth-child(4){grid-column:6/13}
.project-media{display:block;overflow:hidden;position:relative}
.project-media img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff;transition:transform 1s cubic-bezier(.19,1,.22,1)}
.project-card:nth-child(1) .project-media img{aspect-ratio:16/10}
.project-card:hover .project-media img{transform:scale(1.03)}
.project-meta{display:flex;justify-content:space-between;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--warm-text);margin:1.2rem 0 .6rem}
.project-meta span:first-child::before{content:"Fig. 0" counter(fig) " — ";color:var(--black)}
.project-card h3{font-family:var(--serif);font-weight:600;font-size:1.85rem;line-height:1.2;color:var(--black);margin-bottom:.55rem;text-wrap:balance}
.project-card p{max-width:480px;margin-bottom:1rem}
/* Articles — home: staggered portraits; journal page: index rows */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem 2.5rem}
.article-card:nth-child(2){transform:translateY(3.2rem)}
.article-grid{padding-bottom:3.2rem}
.article-media{display:block;overflow:hidden}
.article-media img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ivory);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.article-card:hover .article-media img{transform:scale(1.03)}
.article-meta{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-text);margin:1.1rem 0 .55rem}
.article-card h3{font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1.22;margin-bottom:.5rem;text-wrap:balance}
.article-card h3 a{color:var(--black)}
.article-card .text-link{display:inline-block;margin-top:.8rem}
.featured-card{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center;margin-bottom:5rem;transform:none!important}
.featured-card .article-media img{aspect-ratio:16/11}
.featured-card h3{font-size:2.5rem}
#articleGrid{grid-template-columns:1fr;gap:0;padding-bottom:0;border-top:2px solid var(--black)}
#articleGrid .article-card{display:grid;grid-template-columns:300px 1fr;gap:3rem;padding:2.8rem 0;border-bottom:1px solid var(--border);transform:none;align-items:center}
#articleGrid .article-media img{aspect-ratio:4/3}
#articleGrid .article-meta{margin-top:0}
.filter-bar{display:flex;gap:2.2rem;flex-wrap:wrap;margin:0 0 3.5rem;border-bottom:1px solid var(--border);padding-bottom:1rem}
.filter-btn{background:none;border:0;padding:.3rem 0;font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;color:var(--warm-text);position:relative}
.filter-btn::after{content:"";position:absolute;left:0;bottom:-1rem;width:0;height:2px;background:var(--black);transition:width .35s ease}
.filter-btn:hover{color:var(--black)}
.filter-btn.active{color:var(--black);font-weight:600}
.filter-btn.active::after{width:100%}
.filter-empty{color:var(--warm-text);font-style:italic;padding:2rem 0}
/* Page hero */
.page-hero{padding:6rem 0 3.5rem;border-bottom:4px double var(--black)}
.page-title{font-family:var(--serif);font-weight:500;font-size:clamp(3.6rem,7.5vw,6rem);line-height:1;color:var(--black);letter-spacing:-.01em}
.page-hero .lead{margin-top:1.6rem;max-width:640px}
/* About */
.about-portrait{margin:3.5rem 0;max-width:400px;position:relative}
.about-portrait::after{content:"";position:absolute;inset:0;transform:translate(16px,16px);border:1px solid var(--black);z-index:-1}
.timeline{list-style:none;margin-top:1rem}
.tl-item{display:grid;grid-template-columns:210px 1fr;gap:3rem;padding:2.6rem 0;border-top:1px solid var(--border);position:relative}
.tl-item:last-child{border-bottom:1px solid var(--border)}
.tl-year{font-family:var(--serif);font-size:1.9rem;font-weight:500;color:var(--black);line-height:1.1}
.tl-item h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--black);margin-bottom:.4rem}
.ach-list{list-style:none;border-top:2px solid var(--black)}
.ach-list li{padding:1.4rem 0;border-bottom:1px solid var(--border);font-size:1.05rem;display:flex;gap:1.4rem}
.ach-list li::before{content:"—";color:var(--warm)}
.phil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem}
.phil-item{border-top:2px solid var(--black);padding-top:1.3rem}
.phil-item h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--black);margin-bottom:.4rem}
/* Article detail — reading column with apparatus */
.article-detail{padding:5rem 0}
.article-detail .article-meta{margin-bottom:1.2rem}
.article-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.7rem,5.5vw,4.3rem);line-height:1.06;color:var(--black);margin-bottom:1.2rem;text-wrap:balance}
.author-line{color:var(--warm-text);font-size:.9rem;margin-top:1.2rem;letter-spacing:.06em}
.article-hero{margin:3rem -6rem 3.5rem}
.article-hero img{width:100%;aspect-ratio:16/8;object-fit:cover}
.toc{border:0;border-left:2px solid var(--black);padding:.2rem 0 .2rem 1.6rem;margin-bottom:3rem;background:none}
.toc p{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--warm-text);margin-bottom:.6rem}
.toc ol{margin-left:1.1rem}
.article-content h2{font-family:var(--serif);font-weight:600;font-size:2rem;color:var(--black);margin:3rem 0 .9rem}
.article-content p{margin-bottom:1.3rem;font-size:1.07rem;line-height:1.95}
.article-content>p:first-of-type::first-letter{font-family:var(--serif);font-size:4.4em;font-weight:500;float:left;line-height:.78;padding:.05em .13em 0 0;color:var(--black)}
.pull-quote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.4;color:var(--black);text-align:center;padding:2.6rem 1rem;margin:3rem 0;border-top:1px solid var(--black);border-bottom:1px solid var(--border)}
.share-line{border-top:1px solid var(--border);padding:1.4rem 0;margin-top:3.5rem;font-size:.9rem;letter-spacing:.05em}
.pn-nav{display:flex;justify-content:space-between;gap:2rem;padding:1.8rem 0;border-top:2px solid var(--black);flex-wrap:wrap}
.pn-link{max-width:46%;font-size:.95rem;font-family:var(--serif);font-size:1.15rem}
.pn-next{text-align:right;margin-left:auto}
/* Contact — underline form */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:6rem;align-items:start}
.contact-info h2{font-family:var(--serif);font-weight:600;font-size:2rem;color:var(--black);margin-bottom:1.8rem}
.contact-info p{margin-bottom:1.6rem}
.ci-label{display:block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--warm-text);margin-bottom:.25rem}
.field{margin-bottom:2rem}
.field label{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.2rem;color:var(--black)}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;padding:.7rem 0;font-family:var(--sans);font-size:1.05rem;color:var(--charcoal);border-radius:0}
.field input:focus,.field textarea:focus{border-bottom:2px solid var(--black);outline:none}
.field-error{color:#8a1f1f;font-size:.88rem;margin-top:.35rem}
.hp-field{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-status{margin-bottom:1rem;font-size:.95rem}
.form-status.ok{color:#1e5c2e}.form-status.err{color:#8a1f1f}
.form-note{font-size:.83rem;color:var(--warm-text);margin-top:1.2rem;line-height:1.7}
/* CTA — a closing statement, not a box */
.cta{border-top:4px double var(--black)}
.cta-wrap{max-width:900px}
.cta-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5.5vw,4.4rem);line-height:1.1;color:var(--black);margin-bottom:1.6rem;text-wrap:balance}
.cta .lead{margin-bottom:2.6rem;max-width:560px}
.cta .editorial-link{font-size:.9rem}
/* Footer — editorial colophon */
.site-footer{border-top:1px solid var(--black);padding:4.5rem 0 2.5rem;background:var(--ivory)}
.footer-name{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.05;color:var(--black);padding-bottom:2.5rem;border-bottom:1px solid var(--border);margin-bottom:2.5rem}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;padding-bottom:3rem}
.footer-cols .fc-title{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--warm-text);font-weight:500;margin-bottom:1rem}
.footer-cols a{display:block;padding:.25rem 0;font-size:.95rem}
.footer-cols p{font-size:.95rem}
.footer-bottom{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:1.6rem;font-size:.82rem;color:var(--warm-text)}
.footer-tag{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--charcoal)}
/* Reveal — restrained: headings & media only (classes removed elsewhere) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.reveal.visible{opacity:1;transform:none}
.no-motion .reveal{opacity:1;transform:none;transition:none}
/* Responsive */
@media(max-width:900px){
.container{padding:0 1.4rem}
.hero-top{flex-direction:column;gap:.35rem}
.hero-grid2,.contact-grid,.featured-card,.intro-grid{grid-template-columns:1fr}
.intro-grid{gap:2rem}.side-note{max-width:none}
.exp-item{grid-template-columns:64px 1fr;gap:1.4rem;padding:2.2rem 0}
.exp-num{font-size:2.1rem}
.project-grid{grid-template-columns:1fr}
.project-card:nth-child(n){grid-column:1/-1;margin-top:0}
.article-grid{grid-template-columns:1fr;padding-bottom:0}
.article-card:nth-child(2){transform:none}
#articleGrid .article-card{grid-template-columns:1fr;gap:1.2rem}
.article-hero{margin:2.5rem 0}
.hero-meta{grid-template-columns:1fr}
.hero-meta div{border-right:0;border-bottom:1px solid var(--border);padding-left:0!important}
.hero-meta div:last-child{border-bottom:0}
.nav-toggle{display:block}
.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:1.4rem 2rem 2rem;gap:1.2rem;border-bottom:4px double var(--black)}
.main-nav.open{display:flex}
.lang-switch{border-left:0;padding-left:0}
.site-header .container{position:relative}
.tl-item{grid-template-columns:1fr;gap:.4rem}
.footer-cols{grid-template-columns:1fr}
.pn-link{max-width:100%}
.section{padding:5rem 0}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
.reveal{opacity:1;transform:none}
}