@font-face{font-family:Roboto;src:url("../fonts/roboto.woff2?v=20260731") format("woff2");font-display:block;font-style:normal;font-weight:400}
:root{--ink:#111;--paper:#fff;--muted:#777;--gutter:clamp(20px,3.3vw,56px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Roboto,Arial,sans-serif;font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.sr-only,.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;z-index:100;width:auto;height:auto;clip:auto;margin:8px;padding:10px;background:#fff}
.site-header{height:110px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;background:#fff}
.brand{font-size:18px;font-weight:700;letter-spacing:.01em}
.site-nav{display:flex;gap:32px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.site-nav a{position:relative;padding:8px 0}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:#111;transition:right .25s}
.site-nav a:hover:after,.site-nav a[aria-current=page]:after{right:0}
.menu-toggle{display:none;background:none;border:0;padding:8px}
.menu-toggle span:not(.sr-only){display:block;width:24px;height:1px;background:#111;margin:5px}
.series-filters{display:flex;justify-content:center;gap:clamp(12px,2.2vw,34px);padding:4px var(--gutter) 32px;flex-wrap:wrap}
.series-filters button{appearance:none;border:0;background:none;padding:7px 0;color:#777;font:inherit;font-size:11px;letter-spacing:.08em;cursor:pointer;position:relative;text-transform:uppercase}
.series-filters button:after{content:"";position:absolute;height:1px;left:0;right:100%;bottom:2px;background:#111;transition:right .2s}
.series-filters button:hover,.series-filters button.is-active{color:#111}
.series-filters button:hover:after,.series-filters button.is-active:after{right:0}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.project-card[hidden]{display:none}
.project-card{position:relative;overflow:hidden;aspect-ratio:1.42;background:#eee}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .4s}
.project-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;background:rgba(0,0,0,.46);color:#fff;opacity:0;transition:opacity .35s}
.project-overlay strong{font-size:clamp(20px,2vw,31px);font-weight:400}
.project-overlay small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.project-card:hover img{transform:scale(1.035);filter:grayscale(.25)}
.project-card:hover .project-overlay,.project-card:focus-visible .project-overlay{opacity:1}
.project{padding:clamp(55px,8vw,130px) var(--gutter)}
.project-intro{max-width:1320px;margin:0 auto 44px;text-align:left}
.project-intro h1{max-width:960px;font-size:clamp(26px,2.2vw,36px);line-height:1.15;letter-spacing:-.012em}
.eyebrow{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:11px}
h1{max-width:1080px;font-size:clamp(34px,3.7vw,56px);line-height:1.08;font-weight:400;letter-spacing:-.02em;margin:.2em 0}
.subtitle{font-size:18px;color:var(--muted);margin-top:-4px}
.lede{font-size:16px;margin:34px auto 0;max-width:690px}
.project-copy{max-width:1320px;margin:0 auto clamp(52px,7vw,92px)}
.project-copy p{max-width:820px;margin:0}
.project-copy .narrative{font-size:16px;line-height:1.75;margin:0 0 34px}
.project-copy .fact{font-size:12px;line-height:1.5;white-space:pre-line}
.project-copy .fact+.narrative{margin-top:34px}
.project-copy .narrative+.fact{margin-top:42px}
.project-media{max-width:1320px;margin:0 auto;display:grid;gap:clamp(22px,4vw,65px)}
.project-media figure{margin:0}
.project-media img{width:100%;max-height:88vh;object-fit:contain}
.lightbox-trigger{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.lightbox-trigger:focus{outline:0}
.lightbox-trigger:focus-visible{outline:1px solid #111;outline-offset:5px}
.lightbox{width:100vw;max-width:none;height:100vh;max-height:none;margin:0;padding:42px 70px;border:0;background:rgba(8,8,8,.96);color:#fff}
.lightbox[open]{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:1fr auto;align-items:center;gap:20px}
.lightbox::backdrop{background:rgba(0,0,0,.92)}
.lightbox-image{grid-column:2;grid-row:1;justify-self:center;max-width:100%;max-height:calc(100vh - 105px);object-fit:contain}
.lightbox button{border:0;background:transparent;color:#fff;font:inherit;cursor:pointer}
.lightbox-close{position:absolute;right:24px;top:14px;font-size:38px;line-height:1}
.lightbox-prev,.lightbox-next{font-size:28px;padding:15px}
.lightbox-count{grid-column:2;grid-row:2;justify-self:center;margin:0;font-size:11px;letter-spacing:.12em}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media-item{margin:0}
.media-fiche{width:100%;margin:12px 0 0;padding-top:10px;border-top:1px solid #ddd}
.media-fiche p{margin:0;font-size:12px;line-height:1.5}
.image-fiche{margin-top:12px}
.project-flow{max-width:1320px;margin:0 auto;display:grid;gap:clamp(46px,6vw,88px)}
.project-flow .flow-text{max-width:820px;margin:0;font-size:16px;line-height:1.75}
.project-flow .media-item img{width:100%;max-height:88vh;object-fit:contain}
.project-nav{max-width:1320px;margin:45px auto 0;border-top:1px solid #ddd;padding-top:24px;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.project-nav--top{margin:0 auto 65px;border-top:0;border-bottom:1px solid #ddd;padding:0 0 24px}
.text-page{max-width:900px;min-height:62vh;padding:clamp(55px,8vw,120px) var(--gutter);margin:auto}
.text-page h1{margin-top:0;margin-bottom:50px}
.text-page p{max-width:720px;font-size:16px;margin:0 0 28px}
.contact-page a{text-decoration:underline;text-underline-offset:4px}
.contact-form{display:grid;gap:22px;max-width:620px}
.contact-form label{display:grid;gap:7px;font-size:12px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #ccc;background:#fff;padding:12px;font:inherit;border-radius:0}
.contact-form button{justify-self:start;border:1px solid #111;background:#111;color:#fff;padding:11px 24px;font:inherit;text-transform:uppercase;letter-spacing:.1em;font-size:11px;cursor:pointer}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{min-height:1.5em;margin:0!important;font-size:13px!important}
.form-status.is-success{color:#246b3c}
.form-status.is-error{color:#9c2828}
.site-footer{min-height:120px;padding:35px var(--gutter);border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .site-header{height:82px}.series-filters{justify-content:flex-start;padding-top:8px}
  .menu-toggle{display:block;z-index:3}
  .site-nav{display:none;position:absolute;z-index:2;top:82px;left:0;right:0;background:#fff;padding:25px var(--gutter);flex-direction:column;gap:14px;border-top:1px solid #eee}
  .site-nav.is-open{display:flex}
  .portfolio-grid{grid-template-columns:1fr}
  .project-card{aspect-ratio:1.25}
  .project-overlay{opacity:1;justify-content:flex-end;align-items:flex-start;text-align:left;background:linear-gradient(transparent 42%,rgba(0,0,0,.67))}
  .project{padding-top:50px}.project-intro{margin-bottom:40px}.project-intro h1{font-size:clamp(26px,7vw,34px);line-height:1.15}
  h1{font-size:clamp(32px,9vw,44px);line-height:1.1;letter-spacing:-.015em}
  .lightbox{padding:48px 12px 22px}.lightbox[open]{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}