@font-face{font-family:"Degular Mono";src:url("fonts/DegularMono-Regular.woff2") format("woff2"),url("fonts/DegularMono-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Degular Mono";src:url("fonts/DegularMono-Bold.woff2") format("woff2"),url("fonts/DegularMono-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
:root{--paper:#ffffff;--ink:#121212;--mute:rgba(18,18,18,.52)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Degular Mono","DM Mono",ui-monospace,Menlo,"Courier New",monospace;font-weight:400;font-size:13px;line-height:1.7;-webkit-font-smoothing:antialiased}
header{position:absolute;z-index:5;top:0;left:0;width:100%;padding:26px 3.2vw;display:flex;align-items:center;justify-content:space-between;color:#fff}
.mark{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
header a{color:inherit;text-decoration:none}
nav{display:flex;gap:34px}
nav a{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero{height:94vh;min-height:600px;margin:0 2vw;position:relative;color:#fff;overflow:hidden}
.hero figure{position:absolute;inset:0;margin:0;background:#222}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.30))}
.hero-copy{position:absolute;z-index:1;left:3vw;bottom:6vh}
.kicker{margin:0 0 14px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hero h1{margin:0;font-size:10px;font-weight:400;line-height:1.7;letter-spacing:.2em;text-transform:uppercase}
.label{margin:0;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.intro{max-width:820px;margin:auto;padding:10vh 5vw 9vh}
.intro .label{margin-bottom:9vh}
.intro-txt p{max-width:600px;margin:0 0 2.2em;font-size:13px;line-height:2.05;font-weight:400}
.work,.events{padding:6vh 3vw 8vh;max-width:1060px;margin:auto}
.work>.label,.events>.label{display:block;margin:0 0 12vh}
.project{margin:0 0 21vh}
.project:last-child{margin-bottom:8vh}
.gal{position:relative}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.track::-webkit-scrollbar{display:none}
.track img{flex:0 0 100%;width:100%;height:66vh;object-fit:cover;scroll-snap-align:center;display:block;background:#f4f4f3}
.prev,.next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:0;background:transparent;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.4);width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.prev{left:10px}.next{right:10px}
.count{position:absolute;right:16px;bottom:12px;z-index:2;margin:0;font-size:10px;letter-spacing:.14em;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.45)}
.cap{display:flex;align-items:baseline;gap:26px;margin-top:16px}
.cap p{margin:0;font-size:10px;letter-spacing:.16em;color:var(--mute)}
.cap h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cap span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.services{max-width:820px;margin:auto;padding:9vh 5vw 12vh}
.services .label{display:block;margin-bottom:9vh}
.services ol{list-style:none;margin:0;padding:0}
.services li{border-top:1px solid rgba(18,18,18,.16);padding:22px 0;font-size:13px;letter-spacing:.06em}
.services li:last-child{border-bottom:1px solid rgba(18,18,18,.16)}
footer{max-width:1060px;margin:auto;border-top:1px solid rgba(18,18,18,.16);padding:12vh 3vw 7vh}
footer>.label{display:block;margin-bottom:8vh}
.email{display:inline-block;color:var(--ink);text-decoration:none;font-weight:700;font-size:clamp(13px,1.7vw,18px);letter-spacing:.04em;margin-bottom:12vh}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:25px;font-size:11px;line-height:2;color:var(--mute)}
.foot p{margin:0;font-weight:700;letter-spacing:.04em}
.foot a{color:var(--ink);text-decoration:none}
.foot .colophon{font-weight:400;color:var(--mute)}
@media(max-width:720px){
header{padding:18px 20px}
nav{gap:18px}
.hero{height:78svh;min-height:480px;margin:0 12px}
.hero-copy{left:18px;bottom:5vh}
.hero h1{font-size:10px}
.intro{padding:10vh 24px 9vh}
.intro .label{margin-bottom:7vh}
.work,.events{padding:5vh 18px 6vh}
.work>.label,.events>.label{margin-bottom:9vh}
.project{margin:0 0 14vh}
.track img{height:58svh}
.cap{flex-wrap:wrap;gap:8px 18px;margin-top:13px}
.services{padding:9vh 24px 12vh}
.services .label{margin-bottom:7vh}
footer{padding:11vh 18px 6vh}
footer>.label{margin-bottom:7vh}
.email{font-size:13px;overflow-wrap:anywhere;margin-bottom:10vh}
.foot{grid-template-columns:1fr;gap:26px}
}
.project.port .gal{max-width:640px;margin-left:auto;margin-right:auto}
.project.port .track img{height:auto;aspect-ratio:4/5}
.project.port .cap{max-width:640px;margin-left:auto;margin-right:auto}
@media(max-width:720px){.project.port .gal,.project.port .cap{max-width:82%}}
.track .vsl{flex:0 0 100%;width:100%;height:66vh;scroll-snap-align:center;background:#121212;display:flex;align-items:center;justify-content:center;margin:0}
.track .vsl iframe{width:100%;height:100%;border:0;display:block}
.project.port .track .vsl{height:auto;aspect-ratio:4/5}
@media(max-width:720px){.track .vsl{height:58svh}}
header.solid{position:relative;color:var(--ink)}
.clients{max-width:820px;margin:auto;padding:0 5vw 13vh}
.clients .label{display:block;margin-bottom:7vh}
.clients ul{list-style:none;margin:0;padding:0;columns:2;column-gap:60px}
.clients li{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:9px 0;border-top:1px solid rgba(18,18,18,.12)}
.work-cta{max-width:820px;margin:auto;padding:0 5vw}
.work-link{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0}
.svc-note{margin:6vh 0 0;font-size:11px;line-height:1.9;color:var(--mute);max-width:520px}
.sec-head{margin:0 0 12vh}
.sec-gap{margin-top:22vh;padding-top:10vh;border-top:1px solid rgba(18,18,18,.16)}
@media(max-width:720px){
.clients ul{columns:1}
.sec-gap{margin-top:16vh;padding-top:8vh}
}

.hero figure img.hsl{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero figure img.hsl.on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero figure img.hsl{transition:none}}

.clients li a{color:inherit;text-decoration:none}
.clients li a:hover{text-decoration:underline;text-underline-offset:3px}

.sec-head .label a{color:inherit;text-decoration:none}
.sec-head .label a:hover{text-decoration:underline;text-underline-offset:3px}
.sec-head .label.sub{margin-top:10px}
.ev-dark{position:relative;left:50%;transform:translateX(-50%);width:100vw;background:#0e0e0e;color:#f4f4f3;padding:12vh max(3vw,calc((100vw - 1060px)/2 + 3vw)) 12vh;margin-top:0}
.ev-dark .sec-gap{margin-top:0;padding-top:0;border-top:0}
.ev-dark .label{color:rgba(255,255,255,.6)}
.ev-dark .cap h3{color:#fff}
.ev-dark .cap p,.ev-dark .cap span{color:rgba(255,255,255,.55)}
.ev-dark .track img{background:#1a1a1a}
.ev-dark .project:last-child{margin-bottom:0}
@media(max-width:720px){.ev-dark{padding:10vh 18px}}

/* work index heads: prominent, clickable */
.sec-head .label{font-size:13px;color:var(--ink)}
.sec-head .label a{font-weight:700}
.sec-head .label.sub{margin-top:14px}

.overview{display:flex;gap:6vw;align-items:flex-start;margin:0 0 14vh}
.overview .label{font-size:13px;color:var(--ink);margin:0 0 5vh}
.ov-lists{flex:0 0 41%}
.ov-list{list-style:none;margin:0 0 9vh;padding:0}
.ov-list li{border-top:1px solid rgba(18,18,18,.14);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ov-list li:last-child{border-bottom:1px solid rgba(18,18,18,.14)}
.ov-list a{display:flex;gap:16px;align-items:baseline;padding:10px 0;color:inherit;text-decoration:none}
.ov-list a:hover{text-decoration:underline;text-underline-offset:3px}
.ov-list span{color:var(--mute);font-weight:400;flex:0 0 auto}
.ov-mosaic{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ov-mosaic a{display:block;margin:0}
.ov-mosaic img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#f4f4f3}
@media(max-width:720px){.overview{flex-direction:column;gap:8vh;margin-bottom:10vh}.ov-lists{flex:none;width:100%}}

.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 14px;margin:0 0 14vh}
.ov-grid>.label{grid-column:1/-1;font-size:13px;color:var(--ink);margin:0}
.ov-grid a{display:block;margin:0;color:inherit;text-decoration:none}
.ov-grid a:hover .ovc{text-decoration:underline;text-underline-offset:3px}
.ov-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#f4f4f3}
.ovc{display:flex;gap:12px;margin:9px 0 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.ovc span{color:var(--mute);font-weight:400}
@media(max-width:720px){.ov-grid{grid-template-columns:1fr 1fr;gap:22px 10px;margin-bottom:10vh}}

main.proj{max-width:1060px;margin:auto;padding:16vh 3vw 10vh}
main.proj .project{margin-bottom:0}
.back{margin:0 0 7vh}
.back a{color:inherit;text-decoration:none}
.back a:hover{text-decoration:underline;text-underline-offset:3px}
.page-dark{background:#0e0e0e;color:#f4f4f3}
.page-dark header{color:#fff}
.page-dark .label{color:rgba(255,255,255,.6)}
.page-dark .cap h3{color:#fff}
.page-dark .cap p,.page-dark .cap span{color:rgba(255,255,255,.55)}
.page-dark .track img{background:#1a1a1a}
.page-dark footer{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.55)}
.page-dark .email,.page-dark .foot a{color:#fff}
.page-dark .foot{color:rgba(255,255,255,.55)}
.page-dark .foot .colophon{color:rgba(255,255,255,.4)}
@media(max-width:720px){main.proj{padding:12vh 18px 8vh}}

main.proj .cap{margin:0 0 6vh}
/* photos entieres, ratio d'origine, sans recadrage */
.track img,.project.port .track img{height:76vh;aspect-ratio:auto;object-fit:contain;background:transparent}
.project.port .gal,.project.port .cap{max-width:none}
.track .vsl,.project.port .track .vsl{height:76vh;aspect-ratio:auto}
.page-dark .track img{background:transparent}
@media(max-width:720px){.track img,.project.port .track img,.track .vsl,.project.port .track .vsl{height:60svh}}
/* vignettes grille : ratio d'origine */
.ov-grid{align-items:start}
.ov-grid img{aspect-ratio:auto;height:auto;object-fit:contain}

/* mobile fixes */
html,body{overflow-x:hidden}
@media(max-width:720px){
.ov-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ovc{flex-wrap:wrap;gap:2px 8px;font-size:9px}
header{padding:16px 14px;gap:10px}
.mark{font-size:10px;letter-spacing:.14em;white-space:nowrap}
nav{gap:12px}
nav a{font-size:10px;letter-spacing:.12em}
.hero h1{font-size:10px}
.cap{flex-wrap:wrap}
.foot{grid-template-columns:1fr}
}

/* vignettes grille: meme format 4:5, photo entiere */
.ov-grid img{aspect-ratio:4/5;height:auto;width:100%;object-fit:contain;object-position:center;background:#f4f4f3}
.svc-lead{margin:0 0 6vh;font-size:13px;line-height:1.9;font-weight:700;letter-spacing:.04em;max-width:560px}
/* grille Work: cases identiques 4:5 */
.ov-grid img{aspect-ratio:4/5;width:100%;height:auto}
.ov-grid img.ovp{object-fit:cover;object-position:center 25%}
.ov-grid img.ovl{object-fit:contain;background:#f4f4f3}
/* fleches bien visibles */
.prev,.next{width:48px;height:48px;background:rgba(18,18,18,.72);color:#fff;text-shadow:none;border-radius:50%}
.prev:hover,.next:hover{background:#121212}
.prev svg,.next svg{width:18px;height:14px}
.prev{left:14px}.next{right:14px}
.count{background:rgba(18,18,18,.72);padding:3px 9px;border-radius:12px;right:14px;bottom:14px;text-shadow:none}
.track{cursor:grab}
/* fleches noires simples */
.prev,.next{background:transparent;color:#121212;border-radius:0;width:48px;height:48px}
.prev:hover,.next:hover{background:transparent;opacity:.55}
.prev svg,.next svg{width:26px;height:18px}
.prev svg path,.next svg path{stroke-width:1.6}
.page-dark .prev,.page-dark .next,.ev-dark .prev,.ev-dark .next{color:#fff}