/* ─────────────────────────────────────────────────────────
   biancale.STUDIO — design system · v6 (final vision)
   clean white · Crave Sans (Jost stand-in) + handwritten accent · left rail
   ───────────────────────────────────────────────────────── */

/* Neue Montreal — the real deal (all weights) */
@font-face{font-family:'Neue Montreal';src:url('../fonts/neue-montreal/NeueMontreal-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neue-montreal/NeueMontreal-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neue-montreal/NeueMontreal-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neue-montreal/NeueMontreal-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neue-montreal/NeueMontreal-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neue-montreal/NeueMontreal-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neue-montreal/NeueMontreal-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#FCFCFA;
  --paper-2:#F1F0EC;
  --ink:#15140F;
  --ink-soft:rgba(21,20,15,.56);
  --ink-faint:rgba(21,20,15,.30);
  --hair:rgba(21,20,15,.13);
  --dark:#100F0D;
  --paper-on-dark:#EDEAE1;
  --red:#A23C30;
  --red-ink:#F4E7DF;
  --sans:'Neue Montreal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:var(--sans);                             /* handwritten removed — everything is Neue Montreal */
  --soft:#A6A099;
  --serif:var(--sans);--mono:var(--sans);--script:var(--sans);   /* legacy aliases → Neue Montreal */
  --pad:clamp(20px,3.2vw,46px);
  --rail:clamp(46px,4.4vw,72px);        /* left menu rail width */
  --railpad:clamp(58px,6vw,104px);      /* content offset to clear the rail */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-sharp:cubic-bezier(.77,0,.18,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none;-ms-overflow-style:none;background:var(--paper)}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

body[data-lang="fr"] .l-en{display:none!important}
body[data-lang="en"] .l-fr{display:none!important}

/* ── type voices ─────────────────────────────────────── */
/* landing headline: Neue Montreal Medium, sentence case, faded grey, tight */
.d1{font-family:var(--sans);font-weight:500;font-size:clamp(26px,3.4vw,46px);line-height:1.08;letter-spacing:-.012em}
.d2{font-family:var(--sans);font-weight:500;font-size:clamp(24px,3vw,42px);line-height:1.14;letter-spacing:.01em;text-transform:uppercase}
.d3{font-family:var(--sans);font-weight:400;font-size:clamp(18px,2.05vw,26px);line-height:1.36;letter-spacing:0}
.it{font-style:italic}
.hand{font-family:var(--hand);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1;color:var(--ink-soft);display:inline-block}
.lbl{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}
.lbl-f{color:var(--ink-faint);font-weight:400}
.body-t{font-family:var(--sans);font-weight:400;font-size:13.5px;line-height:1.75;color:var(--ink-soft);max-width:56ch}

/* ── left rail menu (FR/EN · Portfolio · Information) ──── */
.rail{
  position:fixed;top:0;left:0;z-index:60;height:100vh;width:var(--rail);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:clamp(22px,3.4vh,40px) 0;pointer-events:none;
  color:#fff;mix-blend-mode:difference;             /* adapts over photos & white alike */
}
.rail>*{pointer-events:auto}
.vtx{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.r-logo{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.2vw,17px);line-height:1;letter-spacing:.02em}   /* biancale — Light */
.r-logo b{font-weight:500;font-size:.72em;letter-spacing:.1em}     /* studio — Medium + smaller */
.r-nav{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:opacity .3s;opacity:.74}
.r-nav:hover,.r-nav.on{opacity:1}
/* language — minimal, vertical, centred on the right edge */
.lang-rail{position:fixed;right:0;top:0;bottom:0;width:var(--rail);z-index:60;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#fff;mix-blend-mode:difference}
.lang-rail .r-lang{pointer-events:auto;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.16em}
.r-lang b{font-weight:500}.r-lang i{font-style:normal;opacity:.5}
/* Information page: menu painted for the red panel (mix-blend would tint cyan over red) */
body.pg-info .rail,body.pg-info .lang-rail{mix-blend-mode:normal;color:var(--red-ink)}

/* ── entrance splash (departure board) ───────────────── */
#splash{position:fixed;inset:0;z-index:120;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:opacity .7s ease}
#splash.gone{opacity:0;pointer-events:none}
/* 'biancale.' stays put; the city is absolute to its right, so its length never shifts the logo */
.sp-logo{position:relative;font-family:var(--sans);font-weight:300;font-size:clamp(19px,2.4vw,30px);color:var(--ink);white-space:nowrap;letter-spacing:.02em}
.sp-flip{position:absolute;left:100%;bottom:.04em;margin-left:.4em;font-weight:500;font-size:.5em;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* ── footer ──────────────────────────────────────────── */
footer{
  padding:15vh var(--pad) 42px var(--railpad);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
footer .f-mail{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.5vw,19px);border-bottom:1px solid var(--hair);padding-bottom:2px;transition:border-color .3s}
footer .f-mail:hover{border-color:var(--ink)}
footer .f-cities{margin-top:20px}

/* ── page transitions (darkroom) ─────────────────────── */
#veil{position:fixed;inset:0;background:var(--dark);opacity:0;pointer-events:none;z-index:90;transition:opacity .34s ease}
body.leaving #veil{opacity:1}
#cover{position:fixed;inset:0;background:var(--dark);z-index:95;transform:translateY(0);pointer-events:none}
#cover.lift{transform:translateY(-101%);transition:transform .62s var(--ease-sharp) .05s}
body:not(.entering) #cover{display:none}
body.entering main{opacity:.6}
body.settle main{opacity:1;transition:opacity .7s ease .1s}

/* ── scroll reveals ──────────────────────────────────── */
.rv{transform:translateY(28px);transition:transform .9s var(--ease-out)}
.rv.on{transform:none}
.rvt{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s var(--ease-out)}
.rvt.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.rvt{transform:none;opacity:1;transition:none}
  #cover.lift{transition:none}
}

/* ── figures ─────────────────────────────────────────── */
figure.ph{position:relative;background:var(--paper-2)}
figure.ph img{width:100%;height:auto}
figure.ph figcaption{margin-top:10px}
/* follow-cursor over album photos: a circle that grows and shows a "+" */
.zoomable{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%2315140F' stroke-opacity='0.5' stroke-width='1'/%3E%3Cpath d='M16 11.5v9M11.5 16h9' stroke='%2315140F' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E") 16 16, pointer}
body.has-mcursor .zoomable,body.has-mcursor .zoomable *{cursor:none}
.mcursor{position:fixed;top:0;left:0;z-index:200;pointer-events:none;width:0;height:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(16,15,13,.7);color:var(--paper-on-dark);font-family:var(--sans);font-weight:300;font-size:22px;line-height:1;opacity:0;transform:translate(-50%,-50%);transition:width .3s var(--ease-out),height .3s var(--ease-out),opacity .3s ease}
.mcursor span{transform:scale(.5);transition:transform .3s var(--ease-out)}
body.mc-on .mcursor{opacity:1;width:64px;height:64px}
body.mc-on .mcursor span{transform:none}
body.gal-open .mcursor{opacity:0}
.alb-flow figure.zoomable img,.strip-track figure.zoomable img{transition:transform .6s var(--ease-out),filter .6s ease}
.alb-flow figure.zoomable:hover img,.strip-track figure.zoomable:hover img{transform:scale(1.012)}
.prlx{overflow:hidden}
.prlx img{height:116%;width:100%;object-fit:cover;will-change:transform}

/* video sound toggle */
.snd{position:absolute;right:14px;bottom:14px;z-index:4;width:40px;height:40px;border-radius:50%;background:rgba(17,16,14,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;transition:background .25s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.snd:hover{background:rgba(17,16,14,.78)}

/* ── gallery mode ────────────────────────────────────── */
#gal{position:fixed;inset:0;z-index:85;display:none}
#gal.open{display:block}
.gal-bg{position:absolute;inset:0;background:rgba(16,15,13,.975);opacity:0;transition:opacity .4s ease}
#gal.in .gal-bg{opacity:1}
.gal-track{position:absolute;inset:0;opacity:0;transition:opacity .25s ease .1s}
#gal.in .gal-track{opacity:1}
.gal-it{position:absolute;left:50%;top:50%;will-change:transform;cursor:pointer}
.gal-it img{height:min(66vh,900px);width:auto;max-width:none;display:block}
.gal-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:rgba(237,234,225,.6);z-index:5;font-size:10px;letter-spacing:.17em;text-transform:uppercase}
.gal-x{position:absolute;top:22px;right:var(--pad);z-index:6;color:rgba(237,234,225,.8);font-size:13px;letter-spacing:.2em;padding:10px}
.gal-x:hover{color:#fff}
.gal-clone{position:fixed;z-index:96;margin:0;transition:transform .5s var(--ease-sharp);transform-origin:top left;will-change:transform}
body.gal-open{overflow:hidden}

/* ── layout helpers ──────────────────────────────────── */
.wrap{max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
/* pages with normal vertical flow clear the rail on the left */
body.pg-flow .album-body>.wrap,body.pg-flow .dark-sec>.wrap{padding-left:var(--railpad)}

/* ═══════════ LANDING — filmstrip + fixed text overlays ═══════ */
/* NB: no overflow-x:hidden here — it would break the sticky pin. .hpin clips. */
.home-main{position:relative;overflow-x:clip}
.pg-home{overflow-x:clip}
.hstage{position:relative}
.hpin{position:sticky;top:0;height:100vh;overflow:hidden}
.hstrip{display:flex;align-items:center;height:100vh;gap:clamp(26px,2.8vw,54px);padding:0 9vw 0 var(--railpad);will-change:transform}
.hstrip>*{flex:none}
/* eyebrow top-centre · headline left · selected bottom-right — all FIXED, images scroll behind */
.home-eyebrow{position:fixed;top:clamp(20px,3.6vh,40px);left:50%;transform:translateX(-50%);z-index:20;letter-spacing:.26em;font-weight:500;color:var(--ink-soft);pointer-events:none;white-space:nowrap}
/* headline sits ON the first image — white, faded, one font, always above the images */
.home-head{position:fixed;left:calc(var(--railpad) + 3vw);top:50%;transform:translateY(-50%);z-index:40;width:min(26vw,340px);pointer-events:none}
.home-head .d1{color:#fff;font-weight:500;font-size:clamp(28px,3.4vw,50px);line-height:1.03}
.home-selected{position:fixed;right:var(--pad);bottom:6vh;z-index:20;letter-spacing:.2em;font-weight:500;pointer-events:none}
/* strip images — vertically staggered (each carries its own --y offset) */
.hitem{position:relative;height:var(--h,52vh);cursor:pointer;transform:translateY(var(--y,0))}
.hitem.gap-lg{margin-right:clamp(72px,7vw,150px)}
.hframe{position:relative;display:block;height:100%;overflow:hidden}   /* clips the blur → edges stay crisp */
.hframe img{height:100%;width:auto;max-width:none;object-fit:cover;background:var(--paper-2);transition:filter .5s ease,transform .7s var(--ease-out)}
.hitem .hcap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.hitem .hcap .hcap-t{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.55);white-space:nowrap}
.hitem:hover .hframe img{filter:blur(13px) brightness(.86)}
.hitem:hover .hcap{opacity:1}
/* end link — small + thin */
.h-end{display:flex;align-items:center;justify-content:center;height:100vh;padding:0 12vw 0 4vw}
.h-end a{font-family:var(--sans);font-weight:500;font-size:clamp(11px,1vw,13px);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--ink-soft);padding-bottom:3px;transition:opacity .3s}
.h-end a:hover{opacity:.55}

/* ═══════════════ PORTFOLIO — category vertical slider ═ */
body.pg-work{overflow:hidden;height:100vh}
.pf-wrap{position:fixed;inset:0;display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.pf-left{position:relative;height:100vh;overflow:hidden}
.pf-stage{position:absolute;left:calc(var(--railpad) + 3vw);right:5%;top:0;height:100vh}
.pf-track{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:13vh;padding:20vh 0;will-change:transform;opacity:0;pointer-events:none;transition:opacity .5s ease}
.pf-track.on{opacity:1;pointer-events:auto}
.pf-shot{position:relative;align-self:flex-start;cursor:pointer;overflow:hidden}   /* clip blur → crisp edges */
.pf-shot.port img{width:auto;height:60vh;aspect-ratio:4/5;object-fit:cover}
.pf-shot.land img{width:min(44vw,600px);height:auto}
.pf-shot img{display:block;background:var(--paper-2);transition:filter .5s ease}
.pf-shot .pf-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;transition:opacity .4s ease;pointer-events:none}
.pf-shot .pf-name span{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.55);white-space:nowrap}
.pf-shot:hover img{filter:blur(13px) brightness(.86)}
.pf-shot:hover .pf-name{opacity:1}
.pf-right{padding-right:clamp(28px,6vw,110px);padding-left:5vw;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:100vh;padding-top:18vh}
.pf-eyebrow{letter-spacing:.24em;margin-bottom:24px}
.pf-cat{display:flex;align-items:baseline;justify-content:space-between;gap:18px;text-align:left;font-family:var(--sans);font-weight:400;font-size:clamp(18px,2.15vw,30px);line-height:1.5;letter-spacing:0;color:var(--ink-faint);transition:color .3s;cursor:pointer;width:100%}
.pf-cat:hover,.pf-cat.on{color:var(--ink)}
/* running count on the RIGHT — tabular + fixed width so it never pushes the name */
.pf-cat .pf-num{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--ink-faint);flex:none;min-width:2.4ch;text-align:right;font-variant-numeric:tabular-nums;align-self:center;transition:color .3s}
.pf-cat.on .pf-num{color:var(--ink)}
.pf-desc{max-width:40ch;margin-top:30px;min-height:7em;transition:opacity .25s ease;font-size:13px}

/* ═══ ALBUM — fixed hero; white body scrolls up over it ═══ */
.album-hero{position:fixed;top:0;left:0;width:100%;height:100vh;overflow:hidden;background:var(--dark);z-index:0}
.album-hero img{width:100%;height:100%;object-fit:cover}
.album-hero-spacer{height:100vh}                    /* transparent — the fixed hero shows through */
.album-body{position:relative;z-index:2;background:var(--paper)}
/* breathing room between the fixed hero and the first image (dark-first albums already pad) */
.album-body>.wrap:first-child,.album-body>.strip-sec:first-child{padding-top:9vh}
.ah-overlay{position:absolute;inset:0;z-index:2;pointer-events:none}
/* project name — Crave Sans, CAPS, justified (words spread) — max 2 lines */
.ah-title{position:absolute;left:var(--railpad);top:50%;transform:translateY(-50%);font-family:var(--sans);font-weight:400;text-transform:uppercase;font-size:clamp(23px,2.7vw,42px);line-height:1.16;letter-spacing:.06em;max-width:min(40vw,520px);text-align:justify;text-align-last:justify}
.ah-title.short{max-width:none;text-align-last:auto;font-size:clamp(24px,2.9vw,44px)}   /* single short word: ZEYA/MAAR/AgAu */
.ah-info{position:absolute;right:clamp(24px,5vw,80px);top:50%;transform:translateY(-50%);text-align:right;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.8;max-width:22ch}
/* weddings: keep the (longer) subtitle on a single line, not a wrapped paragraph */
.alb-mariage-01 .ah-info,.alb-mariage-02 .ah-info{white-space:nowrap;max-width:none;letter-spacing:.12em}
/* maar + Sassy Women Society: white hero text, no font shadow — a soft scrim darkens
   the photo edges (where the title/subtitle sit) instead, so white reads cleanly */
.alb-maar .ah-title,.alb-maar .ah-info,.alb-sws .ah-title,.alb-sws .ah-info{color:#fff!important}
.alb-maar .album-hero::after,.alb-sws .album-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.03) 42%,rgba(0,0,0,.03) 60%,rgba(0,0,0,.3))}
.ah-scroll{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
/* small intro after the hero */
/* additional-info paragraph placed between the images */
.album-note{max-width:54ch;font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.75;color:var(--ink-soft)}
.album-note p{margin:0}
.album-note .lbl{display:block;margin-top:12px}
.album-note-wrap{padding:5vh 0}
.album-note-inline{max-width:54ch;text-align:left}
.dark-sec .album-note{color:rgba(237,234,225,.72)}

/* ── album flow (kept) ───────────────────────────────── */
.alb-flow{display:flex;flex-direction:column;gap:14vh;padding-bottom:6vh}
.al{display:flex}
.al.l{justify-content:flex-start}
.al.c{justify-content:center}
.al.r{justify-content:flex-end}
.g-duo{display:flex;gap:2.4vw;justify-content:center;align-items:flex-start}
.g-trio{display:flex;gap:2.6vw;align-items:center;justify-content:center}
.g-trio .stack{display:flex;flex-direction:column;gap:2vw}
.chap{display:flex;align-items:baseline;gap:18px;margin:6vh 0 -4vh;position:relative;z-index:2}
.chap .hand{margin-left:4px}
.txt-between{display:flex;flex-direction:column;gap:14px;max-width:52ch;margin:2vh auto;text-align:center}
.txt-between.left{margin-left:0;text-align:left}

.film-w{position:relative}
.film-w video{width:100%;height:auto}
.film-full{position:relative;height:100vh;overflow:hidden}
.film-full video{width:100%;height:100%;object-fit:cover}
.film-full .ff-txt{position:absolute;left:var(--railpad);bottom:9vh;z-index:2;display:flex;flex-direction:column;gap:10px}
.film-full .ff-txt .hand{color:rgba(237,234,225,.85)}
.film-full .ff-txt .lbl{color:rgba(237,234,225,.55)}
.reel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2vw;max-width:1100px;margin:0 auto}
.reel{position:relative;cursor:pointer}
.reel video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000}
.reel .r-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(237,234,225,.92);font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:rgba(16,15,13,.18);transition:background .3s}
.reel:hover .r-play{background:rgba(16,15,13,.04)}
.reel.playing .r-play{display:none}

/* next project */
.next-proj{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;padding:14vh 0 4vh}
.next-proj .np-row{display:flex;gap:clamp(10px,1.2vw,18px);align-items:stretch;justify-content:center}
.next-proj .np-row figure.ph{width:clamp(96px,10vw,150px);aspect-ratio:4/5;overflow:hidden}
.next-proj .np-row figure.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.next-proj a:hover img{transform:scale(1.03)}
.np-line{position:relative;height:1px;background:rgba(21,20,15,.09);width:min(560px,80vw);margin:8px 0}
.np-line .np-fill{position:absolute;left:0;top:0;height:1px;width:0%;background:var(--ink-soft);transition:width .14s linear}
.np-title{margin-top:2px;font-family:var(--sans);text-transform:uppercase;font-size:clamp(20px,2vw,28px);letter-spacing:.06em}
.np-prev{margin-top:14px;color:var(--ink-faint);transition:color .25s}
.np-prev:hover{color:var(--ink)}

.dark-sec{background:var(--dark);color:var(--paper-on-dark);padding:11vh 0}
.dark-sec .lbl,.dark-sec .body-t,.dark-sec .hand{color:rgba(237,234,225,.55)}
.dark-sec figure.ph{background:rgba(237,234,225,.06)}

/* ── horizontal strip (soni / french-garden) ─────────── */
.strip-sec{position:relative}
.strip-vp{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.strip-track{display:flex;align-items:center;gap:clamp(28px,4vw,72px);padding:0 10vw 0 var(--railpad);will-change:transform}
.strip-track figure.ph{flex:none}
.strip-track figure.ph img{height:100%;width:auto}
.strip-track .st-txt{flex:none;display:flex;flex-direction:column;gap:12px;max-width:34ch}
.strip-track .film-w{flex:none}
.strip-track .film-w video{height:58vh;width:auto}
.strip-count{position:absolute;bottom:26px;right:var(--pad);z-index:5}

/* ═══════════════ PORTRAITS — masked name reveal + sliding images ═════════════ */
body.pg-portraits{overflow:hidden;height:100vh}
.pt-wrap{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1.05fr}
/* fixed reveal window: names are near-invisible outside it, clear inside — same weight always */
/* the reveal "hole": a sharp-edged slot at centre height. Empty above, the active name
   crisp inside, the upcoming names a faint list below — hard stops, no soft blur. */
.pt-names{position:relative;height:100vh;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 45%,#000 45%,#000 53%,rgba(0,0,0,.14) 53%,rgba(0,0,0,.14) 100%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 45%,#000 45%,#000 53%,rgba(0,0,0,.14) 53%,rgba(0,0,0,.14) 100%)}
.pt-name{position:absolute;left:calc(var(--railpad) + 3vw);right:6%;top:50%;transform:translateY(-50%);font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.9vw,25px);line-height:1.1;letter-spacing:-.002em;color:var(--ink);cursor:pointer;will-change:transform}
.pt-cap{display:none}
.pt-stage{position:relative;height:100vh;overflow:hidden}
.pt-slot{position:absolute;left:5%;right:clamp(24px,5vw,70px);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;will-change:transform}
.pt-slot img{max-height:78vh;max-width:100%;width:auto;height:auto;object-fit:contain;background:var(--paper-2)}
body.pg-portraits footer{display:none}

/* ═══════════════ INFORMATION — image + red panel ═════ */
body.pg-info{overflow:hidden;height:100vh;background:var(--red)}   /* fixed — no scroll, no white edges */
/* image shifted right (left margin clears the rail) so the red shows behind the menu */
.info-wrap{display:grid;grid-template-columns:minmax(300px,48%) 1fr;min-height:100vh;padding-left:var(--railpad)}
.info-img{position:relative;overflow:hidden;background:var(--red)}
.info-img img{width:100%;height:100%;object-fit:cover;min-height:100vh}
.info-panel{background:var(--red);color:var(--red-ink);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.2vh,22px);padding:6vh clamp(34px,6vw,110px) 6vh clamp(30px,5vw,80px)}
.info-panel .i-lead{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.7vw,21px);line-height:1.5;max-width:40ch}
.info-panel .i-body{font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.35vw,16px);line-height:1.65;max-width:42ch;color:var(--red-ink)}
.info-panel .i-svc{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:clamp(14px,1.35vw,16px);line-height:1.55}
.info-panel .i-mail{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.5vw,18px);border-bottom:1px solid rgba(244,231,223,.4);align-self:flex-start;padding-bottom:2px;transition:border-color .3s}
.info-panel .i-mail:hover{border-color:var(--red-ink)}
.info-panel .i-sep{height:1px;width:34px;background:rgba(244,231,223,.4);margin:6px 0}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:860px){
  :root{--railpad:clamp(48px,14vw,72px)}
  .rail{width:var(--rail)}
  html,body{overflow-x:hidden}                        /* nothing pans sideways on any page */
  /* ── landing: fixed white headline + full-bleed photos scrolling up behind it ── */
  body.pg-home{overflow-x:hidden}
  /* menu reads white over the photos (mix-blend goes muddy over mid-tones) */
  body.pg-home .rail,body.pg-home .lang-rail{mix-blend-mode:normal;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 16px rgba(0,0,0,.5)}
  .hpin{position:static;height:auto;overflow:visible}
  .hstage{height:auto!important}
  .hstrip{flex-direction:column;height:auto;transform:none!important;gap:0;padding:0;align-items:stretch}
  .home-eyebrow{position:fixed;top:2.4vh;left:var(--railpad);transform:none;z-index:41;margin:0;padding:0;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
  .home-head{position:fixed;left:var(--railpad);right:auto;top:auto;bottom:13vh;transform:none;width:auto;max-width:78vw;z-index:41;padding:0;pointer-events:none}
  .home-head .d1{max-width:none;color:#fff}
  .home-selected{position:fixed;bottom:5vh;left:var(--railpad);right:auto;top:auto;z-index:41;margin:0;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
  .hitem{height:auto!important;width:100%;transform:none!important}
  .hitem .hframe,.hitem img{height:auto;width:100%;display:block}
  .hitem:hover .hframe img{filter:none}               /* touch: reveal is by first tap, not hover */
  .hitem:hover .hcap{opacity:0}
  .hitem.revealed .hframe img{filter:blur(14px) brightness(.82)}
  .hitem.revealed .hcap{opacity:1}
  .h-end{display:flex;height:auto;min-height:60vh;padding:0 var(--pad) 0 var(--railpad);align-items:center;justify-content:flex-start;background:var(--paper)}
  .h-end a{color:var(--ink);border-color:var(--ink)}
  /* ── portfolio: category text up top, images = vertical scroller below (page fixed) ── */
  body.pg-work{height:100vh;overflow:hidden}
  .pf-wrap{position:static;display:flex;flex-direction:column;height:100vh}
  .pf-right{order:0;flex:none;min-height:0;padding:6.5vh var(--pad) 1.4vh var(--railpad)}
  .pf-desc{margin-top:1.2vh;font-size:13px;line-height:1.5;max-width:none}
  .pf-left{order:1;flex:1 1 auto;width:100%;min-height:0;height:auto;padding:0;position:static;overflow:hidden}
  .pf-stage{position:static;width:100%;height:100%}
  .pf-track{position:static;opacity:1;pointer-events:auto;display:none;width:100%;transform:none!important;height:100%;flex-direction:column;gap:2.4vh;padding:0 var(--pad) 8vh var(--railpad);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .pf-track.on{display:flex}
  .pf-shot{flex:none;align-self:stretch;width:100%}
  .pf-shot img,.pf-shot.port img,.pf-shot.land img{width:100%;height:auto;display:block;object-fit:cover}
  .pf-shot.port img{aspect-ratio:4/5}
  .pf-shot.land img{aspect-ratio:3/2}
  /* ── portraits: full-screen photo, swipe to the next; the name is a FIXED label ── */
  body.pg-portraits{height:100vh;overflow:hidden}
  .pt-wrap{position:static;display:block;height:100vh;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
  .pt-names{display:none}
  .pt-stage{position:static;height:auto;overflow:visible;display:block}
  .pt-slot{position:relative;transform:none!important;opacity:1!important;height:100vh;margin:0;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;background:var(--paper)}
  .pt-slot img{max-height:100vh;width:100%;height:100%;object-fit:cover}
  .pt-slot.pt-clone{display:none}                     /* mobile shows the 6 real photos, not the loop clones */
  .pt-mname{display:block;position:fixed;right:9vw;bottom:10vh;z-index:6;color:#fff;font-family:var(--sans);font-weight:400;font-size:16px;letter-spacing:.05em;text-shadow:0 1px 18px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.5)}
  .pt-wrap::-webkit-scrollbar,.pf-track::-webkit-scrollbar{display:none}
  .pt-wrap,.pf-track{scrollbar-width:none;-ms-overflow-style:none}
  /* ── albums: hero in-flow (no fixed layer to reveal); content stacks full-width ── */
  .album-hero{position:relative;height:86vh}
  .album-hero-spacer{display:none}
  .ah-title{left:var(--railpad);right:var(--pad);top:auto;bottom:13vh;transform:none;text-align:left;text-align-last:left;font-size:clamp(30px,9vw,54px);line-height:1.02;letter-spacing:0;max-width:none}
  .ah-title.short{font-size:clamp(34px,12vw,60px)}
  .ah-info{left:var(--railpad);right:auto;top:auto;bottom:7vh;transform:none;text-align:left;max-width:82vw;white-space:normal}
  .alb-mariage-01 .ah-info,.alb-mariage-02 .ah-info{max-width:82vw;font-size:11px;letter-spacing:.12em}
  .alb-flow{gap:8vh}
  /* keep the varied editorial layout (different sizes + left/centre/right placement) —
     just cap width so nothing overflows and the page can't pan sideways */
  .alb-flow figure,.g-duo figure,.g-trio figure{max-width:100%}
  .g-duo{flex-wrap:wrap;gap:3vw}
  .g-trio{flex-wrap:wrap}
  .bleed{width:100%;margin-left:0}
  .film-full{height:auto}
  .film-full video{position:static;width:100%;height:auto;object-fit:contain}
  .reel-grid{grid-template-columns:1fr 1fr;gap:2.5vw;max-width:100%}
  .snd{width:28px;height:28px;font-size:11px;right:8px;bottom:8px}
  body.pg-flow main>.wrap{padding-left:var(--railpad)}
  /* ── info: horizontal banner + text below; nothing pans, no white edges ── */
  body.pg-info{overflow-x:hidden;overscroll-behavior:none}
  .info-wrap{grid-template-columns:1fr;padding-left:0;min-height:auto}
  .info-img{background:var(--red)}
  .info-img img{min-height:0;height:auto;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 42%}
  .info-panel{justify-content:flex-start;padding:7vh var(--pad) 10vh var(--railpad)}
  .gal-it img{height:min(52vh,90vw)}
  /* strip albums (Parisienne / French Garden) — full-width stack */
  .strip-sec{height:auto!important}
  .strip-vp{position:static;height:auto;overflow:visible}
  .strip-track{flex-direction:column;transform:none!important;padding:0 var(--pad) 0 var(--railpad);gap:7vh;align-items:center}
  .strip-track figure.ph{max-width:100%;width:100%!important;height:auto!important}
  .strip-track figure.ph img{height:auto;width:100%}
  .strip-track .film-w{width:100%}
  .strip-track .film-w video{height:auto!important;width:100%!important}
  .strip-count{display:none}
}