/* Brows & Skin — palette sampled from the institut's own photos */
:root{
  --night:#12150C;   /* moss panels in shadow */
  --moss:#27301A;    /* moss panels in light */
  --oak:#A9845B;     /* the corridor parquet */
  --chaux:#E7E3D9;   /* the white walls, warmed */
  --stone:#A19C8E;   /* secondary text on dark */
  --lichen:#C8CC6E;  /* lit moss — the only accent */
  --g:'Familjen', 'Helvetica Neue', Arial, sans-serif;
  --s:'Gambetta', Georgia, serif;
  --x:20px;
  --vh:100vh;
}
@supports (height:100svh){:root{--vh:100svh}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--chaux);font-family:var(--g);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::after{content:"";position:fixed;inset:-50%;background:url(../img/grain.png);opacity:.075;mix-blend-mode:overlay;pointer-events:none;z-index:80}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,p,figure,blockquote,ol{margin:0;padding:0}
em{font-family:var(--s);font-style:italic;font-weight:400;letter-spacing:-.01em}
cite{font-style:normal}
sup{font-size:.6em;line-height:0;vertical-align:.6em}
::selection{background:var(--lichen);color:var(--night)}

/* wordmark */
.mark{position:fixed;top:16px;left:var(--x);z-index:70;font-weight:650;font-size:17px;letter-spacing:-.035em;text-decoration:none;color:var(--chaux);mix-blend-mode:difference}
.mark i{font-family:var(--s);font-style:italic;font-weight:400;font-size:1.12em;padding:0 .06em;letter-spacing:0}

/* buttons */
.b-solid{display:inline-flex;align-items:center;gap:14px;background:var(--lichen);color:var(--night);text-decoration:none;font-weight:620;font-size:15px;letter-spacing:-.01em;padding:15px 18px 15px 18px;border-radius:0;position:relative}
.b-solid::after{content:"";width:22px;height:1px;background:currentColor;transition:width .6s cubic-bezier(.83,0,.17,1)}
.b-solid:hover::after,.b-solid:focus-visible::after{width:46px}
.b-thread{color:var(--chaux);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;font-weight:550;font-size:15px}
.b-thread:hover{text-decoration-style:wavy;text-decoration-color:var(--lichen)}

/* scene mechanics — readable without JS, pinned with JS */
[data-r]{--t:1}[data-o]{--u:0}
.scene{position:relative}
.stage{position:relative;min-height:var(--vh);overflow:hidden}
.motion .scene{height:var(--h)}
.motion .stage{position:sticky;top:0;height:var(--vh);min-height:0}
.veil{position:absolute;inset:0;pointer-events:none}

/* 1 · arrivée */
.s-arrive{--h:250vh}
.arrive-img{position:absolute;inset:0;transform:scale(calc(1.7 - .7*var(--t)));transform-origin:98% 42%;will-change:transform}
.arrive-img img{width:100%;height:100%;object-fit:cover;object-position:88% 50%}
.s-arrive .veil{background:linear-gradient(180deg,rgba(18,21,12,.6) 0,rgba(18,21,12,0) 22%,rgba(18,21,12,.15) 48%,rgba(18,21,12,.92) 86%)}
.arrive-place{position:absolute;top:19px;right:var(--x);display:flex;flex-direction:column;align-items:flex-end;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--chaux);opacity:.85;line-height:1.5}
.arrive-a{position:absolute;left:var(--x);right:var(--x);bottom:92px;opacity:calc(1 - var(--u));transform:translateY(calc(var(--u)*-70px))}
.s-arrive h1{font-weight:640;font-size:clamp(46px,14.2vw,128px);line-height:.88;letter-spacing:-.055em}
.s-arrive h1 span{display:block}
.s-arrive h1 em{display:block;color:var(--lichen);font-size:.8em;line-height:.98;margin-top:.12em;letter-spacing:-.025em;max-width:9.5em}
.arrive-cta{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.arrive-b{position:absolute;left:var(--x);right:var(--x);bottom:104px;opacity:var(--t);transform:translateY(calc((1 - var(--t))*50px))}
@media (prefers-reduced-motion:no-preference){.js .arrive-b{--t:0}}
.arrive-b p{font-weight:560;font-size:clamp(27px,7.6vw,58px);line-height:1.04;letter-spacing:-.04em;max-width:15em}
.arrive-b em{color:var(--lichen)}
.arrive-b .arrive-list{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:18px}
.cue{position:absolute;right:var(--x);bottom:96px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:calc(1 - var(--u));writing-mode:vertical-rl;display:none}

/* 2 · le seuil */
.s-seuil{--h:300vh;background:var(--night)}
.door{position:absolute;top:calc(var(--vh)*.11);left:var(--x);right:var(--x);height:calc(var(--vh)*.47);clip-path:inset(0 calc(48.5% - 48.5%*var(--t)) 0 calc(48.5% - 48.5%*var(--t)));will-change:clip-path}
.door img{width:100%;height:100%;object-fit:cover;object-position:35% 50%;transform:scale(calc(1.3 - .3*var(--t)))}
.path{position:absolute;left:var(--x);right:var(--x);bottom:88px;list-style:none}
.path li{font-weight:620;font-size:clamp(25px,7vw,54px);line-height:1.02;letter-spacing:-.045em;padding:6px 0;opacity:calc(.14 + .86*var(--t));transform:translateX(calc((1 - var(--t))*-22px))}
.path em{color:var(--chaux);letter-spacing:-.02em}
.path .since{color:var(--oak);font-weight:540;font-size:clamp(18px,4.6vw,30px);letter-spacing:-.025em;padding-top:12px}

/* 3 · le travail */
.s-work{--h:560vh;--n:5}
.s-work .stage{background:var(--night)}
.track{display:flex;height:100%;width:calc(var(--n)*100vw);transform:translateX(calc(var(--k,0)*(var(--n) - 1)*-100vw));will-change:transform}
.pane{position:relative;flex:0 0 100vw;height:100%;overflow:hidden}
.pane-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pane h2{font-weight:700;letter-spacing:-.065em;line-height:.82}
.pane h2 em{font-weight:400;letter-spacing:-.03em}
.pane p{font-size:16.5px;line-height:1.42;max-width:23em}
.pane-txt{position:absolute;left:var(--x);right:var(--x);z-index:2}
.kicker{font-size:11px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--lichen);margin-bottom:10px}
.fil{position:absolute;z-index:5;top:calc(var(--vh)*.075);left:0;width:100%;height:1px;background:var(--lichen);transform:scaleX(var(--t));transform-origin:0 50%}
.fil::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border:1px solid var(--lichen);border-radius:50%;background:var(--night)}

.p-fil .pane-bg{object-position:55% 30%}
.p-fil::before,.p-peau::before,.p-mains::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,21,12,.25) 0,rgba(18,21,12,0) 30%,rgba(18,21,12,.55) 62%,rgba(18,21,12,.95) 100%)}
.p-fil .pane-txt{bottom:84px}
.p-fil h2{font-size:clamp(96px,31vw,300px);margin:0 0 18px -.04em}

.p-regard{background:var(--moss)}
.eye{position:absolute;top:calc(var(--vh)*.12);right:-6vw;width:74vw;height:calc(var(--vh)*.5);overflow:hidden}
.eye img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:contrast(1.04) saturate(.85)}
.p-regard .pane-txt{bottom:84px}
.p-regard h2{font-size:clamp(78px,24vw,250px);margin:0 0 16px -.04em;position:relative}
.p-regard blockquote{margin-top:14px;font-family:var(--s);font-style:italic;font-size:17px;line-height:1.3;color:var(--chaux);max-width:22em}
.p-regard cite{display:block;font-family:var(--g);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:6px}
.eye-cap{position:absolute;top:calc(var(--vh)*.12 - 26px);right:var(--x);font-size:11px!important;color:var(--stone);text-align:right;max-width:16em!important}

.p-peau .pane-bg{object-position:60% 40%}
.p-peau .pane-txt{bottom:84px}
.p-peau h2{font-size:clamp(90px,28vw,280px);margin:0 0 18px -.04em}

.p-cire{background:var(--chaux);color:var(--night)}
.room{position:absolute;top:calc(var(--vh)*.1);left:0;right:12vw;height:calc(var(--vh)*.4);overflow:hidden}
.room img{width:100%;height:100%;object-fit:cover}
.p-cire .pane-txt{top:calc(var(--vh)*.53)}
.p-cire h2{font-size:clamp(90px,28vw,280px);margin:0 0 20px -.04em;color:var(--night)}
.p-cire p{color:#3d3a30}

.p-mains .pane-bg{object-position:30% 50%}
.p-mains .pane-txt{bottom:84px}
.p-mains h2{font-size:clamp(70px,21vw,230px);margin:0 0 18px -.04em}
.p-mains h2 em{color:var(--lichen)}
.p-mains .b-solid{margin-top:20px}

/* 4 · Selin */
.s-selin{background:var(--chaux);color:var(--night);position:relative;z-index:2}
.selin-wide{height:calc(var(--vh)*.52);overflow:hidden}
.selin-wide img{width:100%;height:122%;object-fit:cover;transform:translateY(calc(var(--f,0)*-18%))}
.selin-body{padding:0 var(--x) 26px;position:relative}
.selin-face{width:112px;height:112px;margin:-56px 0 18px auto;position:relative;outline:6px solid var(--chaux)}
.selin-face img{width:100%;height:100%;object-fit:cover;filter:saturate(.75)}
.s-selin h2{font-weight:640;font-size:clamp(40px,11.4vw,96px);line-height:.92;letter-spacing:-.055em;margin-top:-62px;max-width:7.6em}
.s-selin h2 em{display:block;font-size:1.12em;letter-spacing:-.03em;color:var(--moss)}
.selin-p{margin-top:18px;font-size:17px;max-width:24em;color:#3d3a30}
.rule{background:var(--moss);color:var(--chaux);overflow:hidden;padding:20px 0 16px}
.rule p{white-space:nowrap;font-weight:650;font-size:clamp(40px,12vw,120px);letter-spacing:-.055em;line-height:1;transform:translateX(calc(var(--f,0)*-55%));will-change:transform}
.rule i{font-family:var(--s);font-weight:400;color:var(--lichen);padding:0 .15em}
.selin-end{padding:28px var(--x) 40px;display:grid;gap:26px}
.motto em{display:block;font-size:clamp(50px,15vw,140px);line-height:.88;letter-spacing:-.035em;color:var(--night)}
.motto span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6b6656;margin-top:10px}
.selin-end blockquote{font-size:19px;line-height:1.35;font-weight:500;letter-spacing:-.015em;border-top:1px solid var(--night);padding-top:14px;max-width:24em}
.selin-end cite{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6b6656;margin-top:8px}

/* 5 · celles qui restent */
.s-stay{--h:250vh}
.stay-img{position:absolute;inset:0;transform:scale(calc(1.06 + .16*var(--t)))}
.stay-img img{width:100%;height:100%;object-fit:cover}
.s-stay .veil{background:rgba(18,21,12,.62)}
.q{position:absolute;left:var(--x);right:var(--x);top:calc(var(--vh)*.16)}
.q1{opacity:calc(var(--t) - var(--u));transform:translateY(calc((1 - var(--t))*40px - var(--u)*40px))}
.q2{opacity:var(--t);transform:translateY(calc((1 - var(--t))*40px))}
.q p{font-family:var(--s);font-size:clamp(27px,7.4vw,64px);line-height:1.08;letter-spacing:-.02em;max-width:17em}
.q2 p{font-size:clamp(44px,12.5vw,120px);line-height:.98}
.q em{color:var(--lichen)}
.q cite{display:block;margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.quiet{position:absolute;left:var(--x);right:var(--x);bottom:92px;font-size:15px;line-height:1.4;color:var(--chaux);opacity:var(--t);max-width:26em;border-top:1px solid rgba(231,227,217,.3);padding-top:12px}

/* 6 · venir */
.s-come{background:var(--night);position:relative;z-index:2;padding-bottom:30px}
.come-img{height:calc(var(--vh)*.42);overflow:hidden}
.come-img img{width:100%;height:125%;object-fit:cover;object-position:30% 50%;transform:translateY(calc(var(--f,0)*-16%))}
.s-come h2{font-weight:700;font-size:clamp(58px,17.5vw,190px);line-height:.84;letter-spacing:-.065em;margin:-.55em var(--x) 0;position:relative}
.s-come h2 em{color:var(--lichen);font-weight:400;letter-spacing:-.035em}
.come-grid{display:grid;gap:14px;padding:22px var(--x) 0}
.addr{font-size:23px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.addr span{display:block;font-family:var(--s);font-style:italic;font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--oak);margin-top:8px}
.hours{color:var(--stone);font-size:16px;max-width:24em}
.come-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(231,227,217,.18);margin:26px var(--x) 0;border:1px solid rgba(231,227,217,.18)}
.act{display:block;background:var(--night);padding:16px 14px 15px;text-decoration:none;transition:background .5s cubic-bezier(.83,0,.17,1),color .5s}
.act span{display:block;font-weight:650;font-size:21px;letter-spacing:-.035em}
.act small{display:block;color:var(--stone);font-size:13px;margin-top:2px}
.act:hover{background:var(--moss)}
.act-main{grid-column:1/-1;background:var(--lichen);color:var(--night)}
.act-main small{color:#3e4120}
.act-main:hover{background:var(--chaux)}

.foot{background:#0B0D07;color:var(--stone);font-size:13px;padding:26px var(--x) 90px;position:relative;z-index:2}
.foot p{margin:0 0 6px}
.foot .prop{margin-top:14px;color:var(--chaux);font-family:var(--s);font-style:italic;font-size:15px}

/* dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:75;display:grid;grid-template-columns:1.35fr 1fr 1fr;background:#0B0D07;border-top:1px solid rgba(231,227,217,.16);padding-bottom:env(safe-area-inset-bottom)}
.dock a{padding:17px 14px 16px;font-weight:620;font-size:14.5px;letter-spacing:-.01em;text-decoration:none;color:var(--chaux)}
.dock a+a{border-left:1px solid rgba(231,227,217,.14)}
.dock .dock-book{background:var(--lichen);color:var(--night);display:flex;justify-content:space-between;align-items:center}
.dock .dock-book::after{content:"";width:18px;height:1px;background:currentColor}

/* no-motion: the film becomes a readable sequence */
html:not(.motion) .track{flex-direction:column;width:auto;transform:none}
html:not(.motion) .pane{flex:none;width:100%;height:var(--vh);min-height:560px}
html:not(.motion) .s-work .stage{overflow:visible}
html:not(.motion) .fil{display:none}
html:not(.motion) .q{position:relative;top:auto;padding:80px 0 0}
html:not(.motion) .s-stay .stage{padding:0 var(--x) 120px}
html:not(.motion) .q{left:auto;right:auto}
html:not(.motion) .quiet{position:relative;left:auto;right:auto;bottom:auto;margin-top:40px}
html:not(.motion) .s-arrive .arrive-b{display:none}
html:not(.motion) .s-seuil .stage{min-height:auto;padding-bottom:40px}
html:not(.motion) .path{position:relative;left:auto;right:auto;bottom:auto;padding:calc(var(--vh)*.62) var(--x) 0}

/* desktop */
@media (min-width:900px){
  :root{--x:56px}
  body{font-size:18px}
  .mark{top:26px;font-size:21px}
  .dock{left:auto;right:28px;top:20px;bottom:auto;grid-template-columns:auto auto auto;border:1px solid rgba(231,227,217,.18);mix-blend-mode:normal}
  .dock a{padding:11px 16px;font-size:14px}
  .dock .dock-book{gap:14px}
  .arrive-place{top:auto;bottom:64px;right:var(--x)}
  .arrive-a{bottom:64px;right:40vw}
  .arrive-b{bottom:64px;right:30vw}
  .cue{display:block;bottom:auto;top:50%}
  .door{top:12vh;left:50vw;right:var(--x);height:76vh}
  .path{bottom:auto;top:22vh;right:54vw}
  .path .since{padding-top:22px}
  .pane p{font-size:18px}
  .p-fil .pane-txt,.p-peau .pane-txt,.p-mains .pane-txt,.p-regard .pane-txt{bottom:64px;right:auto;max-width:44vw}
  .p-fil h2,.p-peau h2,.p-cire h2{font-size:15vw}
  .p-mains h2{font-size:11.5vw}
  .p-regard h2{font-size:13vw}
  .eye{top:12vh;right:9vw;width:32vw;height:76vh}
  .eye-cap{top:auto;bottom:calc(12vh - 26px);right:9vw}
  .room{top:0;left:0;right:auto;width:56vw;height:100%}
  .p-cire .pane-txt{top:auto;bottom:64px;left:60vw}
  .p-peau .pane-txt{left:auto;right:var(--x);text-align:right}
  .p-peau p{margin-left:auto}
  .s-selin{display:grid;grid-template-columns:1.15fr 1fr}
  .selin-wide{grid-column:1/-1;height:64vh}
  .selin-body{padding:0 var(--x) 50px}
  .selin-face{width:150px;height:150px;margin:-75px 0 26px 0}
  .s-selin h2{margin-top:0}
  .selin-end{padding:56px var(--x) 50px 0;align-content:end}
  .rule{grid-column:1/-1;order:3}
  .stay-img{left:56vw}
  .s-stay .veil{left:56vw;background:rgba(18,21,12,.35)}
  .s-stay .stage{background:var(--night)}
  .q{top:18vh;right:48vw}
  .q2{right:46vw}
  .q2 p{font-size:6.2vw}
  .quiet{bottom:64px;left:auto;right:var(--x);width:26em}
  .come-img{height:62vh}
  .come-grid{grid-template-columns:1fr 1fr;gap:56px;padding-top:34px}
  .come-actions{grid-template-columns:1.6fr 1fr 1fr 1fr;margin-top:40px}
  .act-main{grid-column:auto}
  .act{padding:26px 22px 24px}
  .act span{font-size:28px}
  .foot{padding:28px var(--x) 30px}
}