/* ---------------------------------------------------------------
   Tuffeau — galerie éphémère
   --------------------------------------------------------------- */

:root{
  --paper:#F4F1EA;
  --bone:#E9E4D8;
  --ink:#15140F;
  --stone:#9A9284;
  --rouge:#B4432B;

  --bg:var(--paper);
  --fg:var(--ink);
  --fg-soft:rgba(21,20,15,.55);
  --line:rgba(21,20,15,.16);

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:16px;
  line-height:1.5;
  transition:background-color .9s var(--ease),color .9s var(--ease);
}

body.theme-ink{
  --bg:var(--ink);
  --fg:var(--paper);
  --fg-soft:rgba(244,241,234,.6);
  --line:rgba(244,241,234,.22);
}
body.theme-bone{ --bg:var(--bone); }

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{border-color:var(--fg)}
img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- grain + cursor ------------------------------------------- */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  width:12px;height:12px;border-radius:50%;
  border:1px solid currentColor;color:var(--fg);
  transform:translate(-100px,-100px);
  transition:width .25s var(--ease),height .25s var(--ease),background-color .25s var(--ease),opacity .3s;
  mix-blend-mode:difference;
}
.cursor.is-hover{width:46px;height:46px;background:rgba(255,255,255,.12)}
@media (hover:none),(pointer:coarse){ .cursor{display:none} }

/* ---- top progress + hud ------------------------------------- */
.topbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:9000;background:var(--line)}
.topbar-fill{display:block;height:100%;width:0;background:var(--fg);transition:width .15s linear}

.hud{
  position:fixed;left:20px;top:50%;z-index:8000;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fg);opacity:.7;display:flex;gap:.7em;align-items:center;
}
.hud-sep{opacity:.4}
.hud-total{opacity:.5}
.hud-label{margin-top:.4em;opacity:.6}

/* ---- panels ------------------------------------------------- */
.panel{
  position:relative;
  min-height:100svh;
  padding:clamp(22px,5vw,64px);
  display:flex;flex-direction:column;
  overflow:hidden;
}

.panel-head,.panel-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);
}
.panel-foot{margin-top:auto;align-items:flex-end}

.panel-num{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:.2em;color:var(--fg-soft);
}

/* ---- typography ------------------------------------------------ */
.giant{
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(72px,20vw,320px);
  line-height:.9;
  letter-spacing:-.02em;
  font-optical-sizing:auto;
}
h2{
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(34px,6.5vw,88px);
  line-height:1;
  letter-spacing:-.015em;
}

/* ---- 00 cover ------------------------------------------------- */
.cover-bg{
  position:absolute;inset:0;z-index:-1;
  background-size:cover;background-position:center;
  opacity:.08;filter:contrast(1.1) grayscale(1) blur(4px);
  transform:scale(1.6);
  mask-image:radial-gradient(120% 80% at 50% 40%,#000 10%,transparent 82%);
}
.cover-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.cover-sub{
  margin-top:.6em;font-size:clamp(13px,1.6vw,17px);
  letter-spacing:.42em;text-transform:uppercase;color:var(--fg-soft);
}
.stamp{
  color:var(--rouge);border:1px solid var(--rouge);
  padding:.5em .9em;border-radius:2px;
  transform:rotate(-3deg);align-self:center;
  font-size:11px;
}
.scrollcue{animation:bob 2.4s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* ---- 01 manifeste ------------------------------------------- */
.manifesto{justify-content:center}
.lead{
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(21px,3vw,40px);
  line-height:1.32;
  letter-spacing:-.01em;
  max-width:24ch;
}
.lead span{display:inline}
.lead .count{
  font-variant-numeric:tabular-nums;
  font-style:italic;color:var(--rouge);padding:0 .12em;
}
.lead .em{display:block;margin-top:.7em;font-style:italic;color:var(--fg-soft)}

/* ---- 02 works (défilement horizontal) --------------------- */
.works{
  height:360vh;               /* distance de défilement pilotant le panoramique */
  padding:0;
  overflow:visible;           /* laisse .works-sticky s'accrocher au viewport */
}
.works-sticky{
  position:sticky;top:0;
  height:100svh;
  padding:clamp(22px,5vw,64px);
  display:flex;flex-direction:column;
  overflow:hidden;            /* rogne la bande horizontale */
}
.works-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(16px,3vh,40px)}
.works-track{
  display:flex;gap:clamp(28px,5vw,84px);
  align-items:center;flex:1;
  will-change:transform;
}
.work{
  flex:0 0 auto;
  width:min(62vw,400px,40vh);   /* borné par la hauteur pour ne jamais rogner le cartel */
  display:flex;flex-direction:column;gap:14px;
}
.work-img{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:#2b2620;isolation:isolate;
}
.work-img img{
  transform:scale(1.5);transition:transform 1.4s var(--ease);
  filter:grayscale(1) contrast(1.5) brightness(1.1) blur(.6px);
}
/* bichromie : ombre tuffeau + lueur crème */
.work-img::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--rouge);mix-blend-mode:multiply;opacity:.3;
}
.work-img::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(130% 120% at 30% 15%,rgba(244,241,234,.5),rgba(244,241,234,0) 55%),
             linear-gradient(0deg,rgba(21,20,15,.5),rgba(21,20,15,0) 60%);
  mix-blend-mode:screen;
}
.work:hover .work-img img{transform:scale(1.56)}
.work-img--void{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:transparent;
  font-family:"Fraunces",serif;font-style:italic;font-size:clamp(20px,3vw,34px);
  color:var(--fg-soft);text-align:center;line-height:1.15;
}
figcaption{display:flex;flex-direction:column;gap:6px}
.work-no{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft)}
.work-title{font-family:"Fraunces",serif;font-size:clamp(20px,2.4vw,30px);font-weight:400}
.works-hint{align-self:flex-end;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft)}

/* ---- 03 place --------------------------------------------- */
.place{justify-content:flex-end}
.place-bg{
  position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  opacity:.5;filter:grayscale(1) contrast(1.1) brightness(.55);
}
.place::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,20,15,.2),rgba(21,20,15,.85))}
.place .panel-num{position:absolute;top:clamp(22px,5vw,64px);left:clamp(22px,5vw,64px)}
.place-body{max-width:32ch;display:flex;flex-direction:column;gap:22px}
.specs{list-style:none;display:flex;flex-direction:column;gap:10px}
.specs li{padding-left:1.4em;position:relative;font-size:14px;color:var(--fg-soft)}
.specs li::before{content:"—";position:absolute;left:0;color:var(--fg)}
.place-note{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(15px,2vw,20px)}

/* ---- 04 colophon ----------------------------------------- */
.colophon{justify-content:center;gap:clamp(28px,6vh,64px)}
.giant--thanks{font-style:italic;font-weight:400}
.colo-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(20px,3vw,42px);max-width:1100px;
}
.colo-col{display:flex;flex-direction:column;gap:8px;font-size:13px}
.colo-key{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft)}
.colo-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  border-top:1px solid var(--line);padding-top:20px;max-width:1100px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);
}

/* ---- reveal ---------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

@media (max-width:640px){
  .hud{left:10px;font-size:9px;letter-spacing:.2em}
  .hud .hud-label{display:none}
  .work{width:78vw}
  .works{height:320vh}
  .panel-head span:nth-child(2){display:none}
}