@import url(@import url('https://fonts.google
family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0E0D0D;--surface:#161414;--surface2:#1E1B1B;
  --bx:#7C1F2E;--bxl:#A8293C;--bxm:rgba(124,31,46,0.15);
  --w:#F5F3F0;--mu:#7A7572;--bo:rgba(245,243,240,0.08);--bos:rgba(245,243,240,0.15);
}
html{scroll-behavior:smooth}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--w);overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.1rem 3rem;display:flex;justify-content:space-between;align-items:center;border-bottom:0.5px solid var(--bo);background:rgba(14,13,13,0.94);backdrop-filter:blur(14px)}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:400;color:var(--w);text-decoration:none;letter-spacing:0.03em}
.nav-links{display:flex;gap:1.75rem;align-items:center}
.nav-links a{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--mu);text-decoration:none;transition:color 0.2s}
.nav-links a:hover{color:var(--w)}
.admin-link{color:var(--bxl)!important;opacity:0.8}
.lang-btn{font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;border:0.5px solid var(--bos);padding:0.28rem 0.6rem;cursor:pointer;background:transparent;color:var(--mu);transition:all 0.2s;font-family:'Syne',sans-serif}
.lang-btn:hover{background:var(--bx);color:var(--w);border-color:var(--bx)}

/* HERO */
#home{min-height:100vh;display:grid;grid-template-columns:1fr 0.5px 1fr;padding-top:56px}
.hero-l{padding:5rem 3.5rem 4.5rem;display:flex;flex-direction:column;justify-content:flex-end}
.hero-div{background:var(--bo)}
.hero-r{position:relative;overflow:hidden;background:var(--surface)}
.hero-r-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem;z-index:2;background:linear-gradient(to top,rgba(14,13,13,0.7) 0%,transparent 60%)}
.hero-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mu);font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;flex-direction:column;gap:0.75rem;border:0.5px dashed rgba(245,243,240,0.08)}
.hero-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-tag{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--bxl);margin-bottom:1.25rem;display:flex;align-items:center;gap:0.75rem}
.hero-tag::before{content:'';display:inline-block;width:20px;height:0.5px;background:var(--bxl)}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2.8rem,5vw,5.2rem);font-weight:400;line-height:1.0;margin-bottom:1.75rem}
.hero-title em{font-style:italic;color:var(--bxl)}
.hero-roles{border-left:2px solid var(--bx);padding-left:1.1rem;margin-bottom:2.5rem;display:flex;flex-direction:column;gap:0.35rem}
.hero-roles span{font-size:0.75rem;letter-spacing:0.03em;color:var(--mu);line-height:1.55}
.hero-cta{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--w);text-decoration:none;padding:0.7rem 1.35rem;border:0.5px solid var(--bos);transition:all 0.3s;background:transparent;width:fit-content}
.hero-cta:hover{background:var(--bx);border-color:var(--bx)}
.hero-meta p:first-child{font-size:0.58rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,243,240,0.4);margin-bottom:0.3rem}
.hero-meta p:last-child{font-family:'Playfair Display',serif;font-style:italic;font-size:0.95rem;color:rgba(245,243,240,0.7)}
.social-bar{display:flex;gap:1rem;margin-top:2rem}
.soc-link{display:flex;align-items:center;gap:0.5rem;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--mu);text-decoration:none;border:0.5px solid var(--bo);padding:0.35rem 0.7rem;transition:all 0.25s}
.soc-link:hover{color:var(--w);border-color:var(--bxl);background:var(--bxm)}
.soc-link svg{width:13px;height:13px;flex-shrink:0}

/* SECTIONS */
section{padding:6.5rem 3rem}
.sh{display:flex;align-items:flex-start;gap:2.5rem;margin-bottom:4.5rem}
.sh-num{font-size:0.58rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--bxl);padding-top:0.4rem;white-space:nowrap}
.sh-title{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:400;line-height:1.1;margin-bottom:0.3rem}
.sh-sub{font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--mu)}
.sh-line{flex:1;height:0.5px;background:var(--bos);margin-top:1.4rem}

/* BIO */
#bio{background:var(--surface)}
.bio-grid{display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:start}
.bio-img{aspect-ratio:3/4;background:var(--surface2);border:0.5px solid var(--bo);position:relative;overflow:hidden}
.img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0.75rem;color:var(--mu);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase}
.bio-lead{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:400;line-height:1.65;font-style:italic;color:var(--w);margin-bottom:1.75rem}
.bio-body{font-size:0.82rem;line-height:1.9;color:var(--mu);margin-bottom:1rem}
.bio-tags{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:1.75rem}
.bio-tag{font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;border:0.5px solid var(--bos);padding:0.28rem 0.75rem;color:var(--mu);transition:all 0.2s}
.bio-tag:hover{border-color:var(--bxl);color:var(--bxl)}

/* PROJECT GRID */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0.5px;background:var(--bo)}
a.pc{display:block;text-decoration:none;color:inherit;background:var(--bg);transition:background 0.2s;position:relative;overflow:hidden}
a.pc:hover{background:var(--surface2)}
.pc-accent{position:absolute;top:0;left:0;height:2px;width:0;background:var(--bx);transition:width 0.35s}
a.pc:hover .pc-accent{width:100%}
.pc-img{aspect-ratio:16/10;background:var(--surface2);position:relative;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-body{padding:1.35rem}
.pc-sec{font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--bxl);margin-bottom:0.5rem}
.pc-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:400;margin-bottom:0.4rem;line-height:1.3;color:var(--w)}
.pc-desc{font-size:0.73rem;line-height:1.7;color:var(--mu)}
.pc-year{font-size:0.58rem;color:var(--mu);margin-top:0.9rem;border-top:0.5px solid var(--bo);padding-top:0.65rem}
.empty-s{grid-column:1/-1;border:0.5px dashed var(--bo);padding:3.5rem;text-align:center;color:var(--mu);font-size:0.72rem;letter-spacing:0.06em}

/* CONTACT */
#contact{background:var(--bx)}
.ct-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:5rem;align-items:start}
.ct-info p{font-size:0.8rem;line-height:1.85;color:rgba(245,243,240,0.65);margin-bottom:2rem}
.ct-detail{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.ct-row{padding-bottom:1rem;border-bottom:0.5px solid rgba(245,243,240,0.18)}
.ct-label{font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(245,243,240,0.4);margin-bottom:0.25rem}
.ct-val{font-size:0.82rem;color:var(--w)}
.ct-soc{display:flex;gap:0.75rem;margin-top:0.5rem;flex-wrap:wrap}
.ct-soc a{display:flex;align-items:center;gap:0.45rem;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(245,243,240,0.65);text-decoration:none;border:0.5px solid rgba(245,243,240,0.2);padding:0.35rem 0.7rem;transition:all 0.2s}
.ct-soc a:hover{color:var(--w);border-color:rgba(245,243,240,0.5)}
.ct-soc svg{width:13px;height:13px}
.cf{display:flex;flex-direction:column;gap:0.9rem}
.cf-g{display:flex;flex-direction:column;gap:0.3rem}
.cf-g label{font-size:0.58rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,243,240,0.45)}
.cf-g input,.cf-g textarea{background:rgba(245,243,240,0.07);border:0.5px solid rgba(245,243,240,0.18);color:var(--w);padding:0.7rem 0.9rem;font-family:'Syne',sans-serif;font-size:0.8rem;outline:none;transition:border-color 0.2s;width:100%}
.cf-g input::placeholder,.cf-g textarea::placeholder{color:rgba(245,243,240,0.28)}
.cf-g input:focus,.cf-g textarea:focus{border-color:rgba(245,243,240,0.45)}
.cf-g textarea{resize:vertical;min-height:105px}
.cf-row2{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
.cf-btn{background:var(--w);color:var(--bx);border:none;padding:0.8rem 1.75rem;font-family:'Syne',sans-serif;font-size:0.67rem;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;transition:all 0.25s;width:100%;font-weight:600;margin-top:0.25rem}
.cf-btn:hover{background:var(--bg);color:var(--w)}
.cf-ok{display:none;padding:1.5rem;background:rgba(245,243,240,0.08);border:0.5px solid rgba(245,243,240,0.2);text-align:center}
.cf-ok p{font-size:0.8rem;color:rgba(245,243,240,0.75);line-height:1.7}
.cf-ok-mark{font-family:'Playfair Display',serif;font-size:1.5rem;font-style:italic;color:rgba(245,243,240,0.5);margin-bottom:0.5rem}

/* FOOTER */
footer{padding:1.75rem 3rem;display:flex;justify-content:space-between;align-items:center;border-top:0.5px solid var(--bo)}
footer p{font-size:0.62rem;letter-spacing:0.08em;color:var(--mu)}
.footer-dot{width:5px;height:5px;background:var(--bx);display:inline-block;margin-right:0.4rem;vertical-align:middle}
.foot-soc{display:flex;gap:1rem}
.foot-soc a{font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--mu);text-decoration:none;transition:color 0.2s}
.foot-soc a:hover{color:var(--bxl)}

/* ── SINGLE PROJECT ── */
.sp{min-height:100vh;padding-top:56px;background:var(--bg)}

.sp-hero{position:relative;width:100%;height:65vh;overflow:hidden}
.sp-hero img{width:100%;height:100%;object-fit:cover;display:block}
.sp-hero-grad{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--bg) 100%)}

.sp-wrap{max-width:740px;margin:0 auto;padding:4rem 2rem 8rem}

.sp-back{display:inline-flex;align-items:center;gap:0.5rem;font-family:'Syne',sans-serif;font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--mu);text-decoration:none;margin-bottom:3rem;transition:color 0.2s}
.sp-back:hover{color:var(--bxl)}

.sp-meta{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.25rem}
.sp-sector{font-family:'Syne',sans-serif;font-size:0.56rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--bxl)}
.sp-year{font-family:'Syne',sans-serif;font-size:0.56rem;letter-spacing:0.15em;color:var(--mu)}

.sp-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem);font-weight:400;line-height:1.1;color:var(--w);margin-bottom:0.6rem}
.sp-title-fr{font-family:'Playfair Display',serif;font-style:italic;font-size:1rem;color:var(--mu);margin-bottom:3.5rem}

.sp-content{border-top:0.5px solid var(--bo);padding-top:3rem;margin-bottom:3rem}
.sp-content p{font-family:'Syne',sans-serif;font-size:0.9rem;line-height:1.95;color:rgba(245,243,240,0.75);margin-bottom:1.5rem}
.sp-content h1,.sp-content h2,.sp-content h3{font-family:'Playfair Display',serif;font-weight:400;color:var(--w);margin:2.5rem 0 1rem;line-height:1.2}
.sp-content h2{font-size:1.5rem}
.sp-content h3{font-size:1.15rem}
.sp-content img{width:100%;height:auto;display:block;margin:2.5rem 0}
.sp-content ul,.sp-content ol{font-family:'Syne',sans-serif;font-size:0.9rem;line-height:1.9;color:rgba(245,243,240,0.75);padding-left:1.5rem;margin-bottom:1.5rem}
.sp-content li{margin-bottom:0.5rem}
.sp-content strong{color:var(--w);font-weight:600}
.sp-content em{font-style:italic}
.sp-content a{color:var(--bxl);text-decoration:underline}
.sp-content blockquote{border-left:2px solid var(--bx);padding-left:1.5rem;margin:2rem 0;font-family:'Playfair Display',serif;font-style:italic;font-size:1.1rem;color:rgba(245,243,240,0.6)}

.sp-fr{border-top:0.5px solid var(--bo);padding-top:2.5rem;margin-bottom:3rem}
.sp-lang{font-family:'Syne',sans-serif;font-size:0.55rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--bxl);margin-bottom:1.25rem}

.sp-nav{padding-top:2.5rem;border-top:0.5px solid var(--bo)}

/* MOBILE */
@media(max-width:768px){
  #home{grid-template-columns:1fr;grid-template-rows:auto 0 60vw}
  .hero-div{display:none}
  .hero-l{padding:4rem 1.5rem 3rem}
  section{padding:4rem 1.5rem}
  nav{padding:1rem 1.5rem}
  .nav-links{gap:1rem}
  .bio-grid,.ct-grid{grid-template-columns:1fr;gap:2.5rem}
  .bio-img{aspect-ratio:4/3}
  .cf-row2{grid-template-columns:1fr}
  .sh{flex-wrap:wrap;gap:1rem}
  .sh-line{display:none}
  .sp-wrap{padding:3rem 1.5rem 5rem}
  .sp-hero{height:50vw}
}