:root{
  --ink:#0d0c0b;
  --paper:#ece8e1;
  --mute:#8d887f;
  --line:rgba(236,232,225,.16);
  --serif:'Bodoni Moda','Didot',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--paper);outline-offset:6px}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut) 34px;color:var(--paper);background:linear-gradient(var(--ink) 55%,rgba(13,12,11,0))}
.mark{font-family:var(--serif);font-size:20px;letter-spacing:.04em}
.top nav{display:flex;gap:clamp(18px,3vw,40px);font-size:14px;font-weight:400}
.top nav a{position:relative;padding-bottom:3px}
.top nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.top nav a:hover::after{transform:scaleX(1)}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);align-items:end;overflow:hidden}
.hero-photo{grid-column:6 / -1;grid-row:1;height:100svh;position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 20%;filter:grayscale(1) contrast(1.05);animation:reveal 1.8s cubic-bezier(.2,.7,.2,1) both}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0,transparent 35%)}
.hero-text{grid-column:1 / -1;grid-row:1;position:relative;z-index:2;padding:0 var(--gut) clamp(48px,9vh,96px);align-self:end}
h1{font-family:var(--serif);font-weight:400;line-height:.86;letter-spacing:-.025em;font-size:clamp(64px,14vw,220px)}
h1 span{display:block;white-space:nowrap}
h1 .n2{font-style:italic;margin-left:.8em}
.role{margin-top:clamp(24px,4vh,44px);font-size:clamp(18px,1.7vw,24px);font-family:var(--serif);font-style:italic}
.sub{margin-top:6px;color:var(--mute);font-size:15px}
.scroll{position:absolute;right:var(--gut);bottom:32px;z-index:3;width:1px;height:64px;background:var(--line);overflow:hidden}
.scroll span{position:absolute;inset:0;background:var(--paper);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@keyframes reveal{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}

/* wide portrait */
.wide{padding:clamp(80px,14vh,160px) var(--gut) 0}
.wide img{width:100%;max-height:88vh;object-fit:cover;object-position:50% 30%;filter:grayscale(1)}
.caption{margin-top:14px;color:var(--mute);font-size:14px}

/* fiche */
.fiche{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:clamp(100px,18vh,200px) var(--gut)}
.fiche h2{grid-column:1 / span 4;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,58px);line-height:1.05}
.fiche dl{grid-column:6 / -1}
.fiche dl div{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.fiche dl div:last-child{border-bottom:1px solid var(--line)}
dt{color:var(--mute);font-size:15px}
dd{font-size:clamp(18px,1.6vw,22px)}

/* contact */
.contact{padding:clamp(60px,12vh,140px) var(--gut) clamp(100px,18vh,200px);display:flex;flex-direction:column;gap:6px}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--mute);margin-bottom:18px}
.big{font-family:var(--sans);font-weight:300;font-size:clamp(28px,6vw,96px);line-height:1.15;letter-spacing:-.03em;width:fit-content;max-width:100%;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s}
.big:hover{background-size:100% 1px}

footer{display:flex;justify-content:space-between;gap:16px;padding:24px var(--gut);border-top:1px solid var(--line);color:var(--mute);font-size:13px}

/* motion */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.progress{position:fixed;inset:0 0 auto 0;height:1px;z-index:11;background:var(--paper);transform:scaleX(0);transform-origin:left;opacity:.6}
.hero-photo{will-change:transform,opacity;transform-origin:50% 0}
h1 .n1,h1 .n2{overflow:hidden;padding:0 .12em .08em 0;margin-bottom:-.08em;will-change:transform}
.js h1 .ch{display:inline-block;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.19,1,.22,1) var(--d) both}
@keyframes rise{to{transform:none}}
.js .role,.js .sub{opacity:0;animation:fade 1.2s ease 1.1s both}
@keyframes fade{to{opacity:1}}

.band{overflow:hidden;padding:clamp(70px,12vh,140px) 0 0;white-space:nowrap}
.band-track{display:inline-flex;gap:.6em;font-family:var(--serif);font-style:italic;font-size:clamp(64px,13vw,200px);line-height:1;will-change:transform}
.band-track span{color:var(--paper)}

.clip{overflow:hidden;will-change:clip-path}
.clip img{will-change:transform}
.wide{padding-top:clamp(60px,10vh,120px)}

.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease calc(var(--i,0) * .09s),transform 1.2s cubic-bezier(.19,1,.22,1) calc(var(--i,0) * .09s)}
.js .reveal.in{opacity:1;transform:none}
.fiche dl div.row{border-top:0;position:relative}
.fiche dl div.row::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.19,1,.22,1) calc(var(--i,0) * .09s + .1s)}
.fiche dl div.row.in::before,html:not(.js) .fiche dl div.row::before{transform:scaleX(1)}
.js .mask.reveal{display:block;overflow:hidden;opacity:1;transform:none}
.js .mask.reveal .big{display:inline-block;transform:translateY(105%);transition:transform 1.3s cubic-bezier(.19,1,.22,1) calc(var(--i,0) * .12s),background-size .5s}
.js .mask.reveal.in .big{transform:none}

/* tablet */
@media (max-width:1024px){
  .fiche h2{grid-column:1 / -1;margin-bottom:40px}
  .fiche dl{grid-column:1 / -1}
}

/* mobile */
@media (max-width:760px){
  .hero{display:block;position:relative}
  .hero-photo{position:absolute;inset:0;height:100%}
  .hero-photo img{object-position:50% 25%}
  .hero-photo::after{background:linear-gradient(0deg,var(--ink) 8%,rgba(13,12,11,.15) 60%)}
  .hero-text{position:absolute;inset:auto 0 0 0}
  h1{font-size:clamp(44px,15vw,120px)}
  h1 .n2{margin-left:.3em}
  .top nav a:first-child{display:none}
  .fiche h2{grid-column:1 / -1;margin-bottom:32px}
  .fiche dl{grid-column:1 / -1}
  .fiche dl div{grid-template-columns:1fr;gap:2px;padding:16px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-photo img,.scroll span,.js h1 .ch,.js .role,.js .sub{animation:none;transform:none;opacity:1}
  .js .reveal,.js .mask.reveal .big{transition:none;transform:none;opacity:1}
  .fiche dl div.row::before{transform:scaleX(1);transition:none}
}