/* ============================================================
   PALESTINA.ID — OBJECTS CARRY STORIES
   A digital exhibition.
   ============================================================ */

/* ------------------------------------------------------------
   PALETTE - Palestina + Indonesia, in fixed proportion.
   The two flags share red and white; Palestine adds green and
   black. Those four are the whole system. The ratio is what
   keeps it a luxury house and not a banner:

     black  ~68%   the room the objects stand in
     white  ~16%   every word
     green  ~11%   the ground, used in whole sections
     red     ~4%   the thread, and one word at the end
     brass   ~1%   engraving only

   Nothing else is allowed in.
   ------------------------------------------------------------ */
:root{
  color-scheme: dark;

  /* black - the room */
  --void:  #08090A;
  --pit:   #0B0C0D;
  --stone: #121316;
  --ash:   #1C1E22;
  --edge:  #2A2C31;

  /* white - the voice */
  --bone:  #F4F1EA;
  --dust:  #A9A79F;
  --mute:  #6F6D66;

  /* green - the ground */
  --green:      #0A6B3C;
  --green-lit:  #12A05A;
  --green-deep: #072B1B;
  --green-edge: #123B27;

  /* red - the thread */
  --red:      #C2172B;
  --red-lit:  #E0323F;
  --red-deep: #5E0F1A;

  /* brass - engraving only */
  --brass: #B4894A;

  /* type */
  --display: "Marcellus", "Optima", Palatino, "Palatino Linotype", serif;
  --body: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ar: "Amiri", "Noto Naskh Arabic", serif;

  /* motion */
  --arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --move:   cubic-bezier(0.65, 0, 0.35, 1);
  --exit:   cubic-bezier(0.4, 0, 1, 1);

  --gut: clamp(1.25rem, 4vw, 5rem);
  --maxw: 88rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(0.98rem, 0.93rem + 0.24vw, 1.06rem);
  font-weight:300;
  line-height:1.66;
  letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:-0.012em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; }

.mono{ font-family:var(--mono); font-weight:400; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- browser surfaces --------------------------------------- */
::selection{ background:var(--red); color:var(--bone); }
body{ caret-color:var(--red); }
:focus-visible{ outline:1px solid var(--red-lit); outline-offset:4px; }
html{ scrollbar-color:var(--edge) var(--void); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:var(--edge); border:3px solid var(--void); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

.skiplink{
  position:fixed; top:0; left:0; z-index:400;
  padding:.8rem 1.2rem; background:var(--bone); color:var(--void);
  font-size:.85rem; font-weight:600; text-decoration:none;
  transform:translateY(-110%); transition:transform 200ms var(--arrive);
}
.skiplink:focus{ transform:translateY(0); }

/* ============================================================
   THE SPINE — one thread across the whole document
   ============================================================ */
.spine{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--arrive);
}
.spine.is-live{ opacity:1; }

/* ============================================================
   THRESHOLD
   ============================================================ */
.threshold{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center;
  background:var(--void);
  transition:opacity 900ms var(--arrive), visibility 900ms;
}
.threshold.is-done{ opacity:0; visibility:hidden; }
.threshold__inner{ display:grid; gap:1.4rem; justify-items:center; width:min(22rem, 74vw); text-align:center; }
.threshold__mark{ font-family:var(--display); font-size:1.6rem; letter-spacing:.02em; }
.threshold__mark span{ color:var(--red-lit); }
.threshold__label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); }
.threshold__rule{ width:100%; height:1px; background:var(--edge); overflow:hidden; }
.threshold__rule span{
  display:block; height:100%; width:100%; background:var(--red);
  transform:scaleX(0); transform-origin:left;
}
.threshold__count{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--dust); font-variant-numeric:tabular-nums; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem var(--gut);
  mix-blend-mode:normal;
  transition:opacity 600ms var(--arrive), transform 600ms var(--arrive);
}
.masthead.is-hidden{ opacity:0; transform:translateY(-100%); pointer-events:none; }
.masthead__mark img{ width:clamp(96px,9vw,124px); opacity:.94; }
.masthead__meta{ margin-left:auto; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.masthead__meta span{ color:var(--red-lit); }
.masthead__sound{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
  padding:.4rem .2rem;
  transition:color 240ms ease, transform 160ms var(--arrive);
}
.masthead__sound:active{ transform:scale(.96); }
.masthead__sound-dot{
  width:5px; height:5px; border-radius:50%; background:var(--red-lit);
  transition:background-color 240ms ease, transform 240ms var(--arrive);
}
.masthead__sound[aria-pressed="true"] .masthead__sound-dot{ background:var(--mute); transform:scale(.7); }
@media (hover:hover) and (pointer:fine){ .masthead__sound:hover{ color:var(--bone); } }
@media (max-width:720px){ .masthead__meta{ display:none; } .masthead__sound{ margin-left:auto; } }

/* over the lit room the bar inverts, or it disappears into the paper */
.masthead.is-light .masthead__mark img{ filter:invert(1); }
.masthead.is-light .masthead__meta{ color:#6B665C; }
.masthead.is-light .masthead__meta span{ color:var(--red); }
.masthead.is-light .masthead__sound{ color:#6B665C; }
.masthead.is-light .masthead__sound-dot{ background:var(--red); }
@media (hover:hover) and (pointer:fine){
  .masthead.is-light .masthead__sound:hover{ color:#171613; }
}

/* ============================================================
   SHARED TYPE
   ============================================================ */
.h-display{
  font-size:clamp(2.1rem, 5.4vw, 4.6rem);
  letter-spacing:-0.018em; line-height:1.04;
  text-wrap:balance;
}
.h-sub{
  margin-top:.9rem;
  font-family:var(--ar), var(--body);
  font-size:clamp(.95rem,1.5vw,1.15rem);
  font-style:normal; color:var(--dust); letter-spacing:.01em;
}
.eyeless{ color:var(--red-lit); margin-bottom:1.6rem; letter-spacing:.34em; }

/* ============================================================
   01 — OVERTURE
   ============================================================ */
.overture{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gut) 2rem;
  overflow:hidden;
  background:var(--void);
}
/* the film sits under the shader; the shader becomes its grain and light */
.overture__film{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--void); }
.overture__video{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  opacity:0; transition:opacity 1.6s var(--arrive); filter:saturate(.8);
  will-change:opacity;
}
.overture__video.is-playing{ opacity:1; }
.overture__film::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(8,9,10,.62) 30%, rgba(8,9,10,.72) 62%, var(--void) 100%),
    radial-gradient(95% 75% at 50% 46%, rgba(8,9,10,.30) 0%, rgba(8,9,10,.80) 62%, var(--void) 100%);
}
.overture__canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  mix-blend-mode:screen; opacity:.5;
}
.overture__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(circle at 50% 42%, transparent 0%, transparent 38%, rgba(8,9,10,.72) 78%, var(--void) 100%);
}
.overture__stage{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  min-height:min(46svh, 24rem);
  display:grid; place-items:center;
}
.line{
  grid-area:1/1; text-align:center;
  will-change:opacity, transform, filter;
}
/* hidden only when the motion layer is confirmed alive */
body.js-motion .line{ opacity:0; }
.line__en{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.9rem, 5.6vw, 4.6rem);
  line-height:1.06; letter-spacing:-0.016em;
}
.line__id{
  display:block; margin-top:.9rem;
  font-family:var(--mono); font-size:clamp(.62rem,1.1vw,.74rem);
  letter-spacing:.28em; text-transform:uppercase; color:var(--red-lit);
}
.line--mark .line__en{ font-size:clamp(2.6rem, 8vw, 6rem); letter-spacing:-0.03em; }
.line--mark em{ font-style:normal; color:var(--red-lit); }

.overture__foot{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-top:2.5rem; color:var(--mute);
}
.overture__hint{ display:flex; align-items:center; gap:.8rem; }
.overture__hint-rule{ display:block; width:3rem; height:1px; background:var(--red); transform-origin:left; }
.overture__ar{ font-family:var(--ar); font-size:1.05rem; letter-spacing:0; text-transform:none; color:var(--dust); }

/* ============================================================
   02 — THE THREAD
   ============================================================ */
.thread{
  position:relative; background:var(--green-deep);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,7vw,7rem); align-items:center;
  padding:clamp(7rem,18vh,13rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2); margin-inline:auto;
}
.thread::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, rgba(7,43,27,0) 26%, var(--green-deep) 74%),
    url("../img/plate/thread.webp") center/cover no-repeat;
  opacity:.5;
}
.thread > *{ position:relative; z-index:1; }
.thread__col--body{ display:grid; gap:1.3rem; max-width:38ch; color:var(--dust); }
.thread__ar{
  font-family:var(--ar); font-size:1.4rem; line-height:1.9;
  color:var(--green-lit); margin-top:.4rem;
}
@media (max-width:860px){ .thread{ grid-template-columns:1fr; gap:2.5rem; } }

/* ============================================================
   03 — THE PASSAGE
   ============================================================ */
.passage{ position:relative; background:var(--pit); }
.passage__viewport{ overflow:hidden; }
.passage.is-pinned .passage__viewport{ height:100svh; display:flex; align-items:center; }
.passage__track{
  display:flex; align-items:center; gap:clamp(2rem,6vw,7rem);
  padding:clamp(5rem,12vh,9rem) var(--gut);
  will-change:transform;
}
.passage.is-pinned .passage__track{ padding-block:0; }
.passage.is-swipe .passage__viewport{
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
}
.passage.is-swipe .passage__viewport::-webkit-scrollbar{ display:none; }
.passage.is-swipe .scene{ scroll-snap-align:center; }

.scene{ flex:none; width:min(30rem, 82vw); }
.scene--title{ width:min(34rem, 86vw); }
.scene__nudge{ margin-top:2.6rem; color:var(--mute); display:flex; align-items:center; gap:.8rem; }
.scene__nudge::after{ content:""; width:3.5rem; height:1px; background:var(--red); }

.scene__plate{
  position:relative; overflow:hidden;
  aspect-ratio:4/5; background:var(--stone);
  border:1px solid var(--edge);
}
.scene__plate img,
.scene__plate canvas{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); will-change:transform;
}
.scene__plate--float{
  position:relative;
  background:radial-gradient(60% 50% at 50% 62%, rgba(18,160,90,.16), transparent 70%), var(--stone);
}
.scene__plate--float img{
  position:absolute; inset:0;
  width:100%; height:100%;
  padding:11% 16%;
  box-sizing:border-box;
  object-fit:contain; transform:none;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.7));
}
.scene__caption{ padding-top:1.5rem; display:grid; gap:.35rem; }
.scene__no{ color:var(--red-lit); }
.scene__title{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:.4rem; }
.scene__id{ font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
.scene__note{ margin-top:.7rem; color:var(--dust); max-width:34ch; }

/* ============================================================
   04 — THE VITRINE
   ============================================================ */
.vitrine{
  position:relative; min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,17rem);
  grid-template-rows:auto 1fr auto;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(5rem,12vh,8rem) var(--gut) clamp(3rem,7vh,5rem);
  background:
    radial-gradient(70% 55% at 50% 46%, #17181B 0%, var(--void) 68%);
  overflow:hidden;
  isolation:isolate;
  transition:background 900ms var(--arrive);
}
.vitrine::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("../img/plate/stone.webp") center/cover no-repeat;
  opacity:.13; filter:grayscale(.5) brightness(.62) blur(2px);
  -webkit-mask-image:radial-gradient(76% 70% at 50% 46%, #000 18%, transparent 82%);
  mask-image:radial-gradient(76% 70% at 50% 46%, #000 18%, transparent 82%);
  transition:opacity 900ms var(--arrive);
}
.vitrine.is-focus{ background:radial-gradient(52% 42% at 50% 46%, #1B1C20 0%, #030304 70%); }
.vitrine.is-focus::before{ opacity:.05; }
.vitrine__head{ grid-column:1; grid-row:1; }
.vitrine__stage{
  grid-column:2; grid-row:1 / 3;
  position:relative; display:grid; place-items:center; min-height:min(62svh, 34rem);
}
.vitrine__pool{
  position:absolute; width:min(30rem,72%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(18,160,90,.20) 0%, rgba(10,107,60,.07) 40%, transparent 68%);
  filter:blur(6px);
  transition:transform 900ms var(--arrive), opacity 900ms var(--arrive);
}
.vitrine.is-focus .vitrine__pool{ transform:scale(.78); opacity:.85; }
.vitrine__piece{
  position:relative; overflow:hidden;
  width:min(46svh, 25rem); aspect-ratio:4/5;
  border:1px solid var(--edge);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9);
  will-change:transform;
}
.vitrine__piece img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity 380ms var(--arrive), filter 380ms var(--arrive);
}
.vitrine__piece.is-swapping img{ opacity:0; filter:drop-shadow(0 40px 50px rgba(0,0,0,.8)) blur(9px); }
.vitrine__sheen{
  position:absolute; inset:-14%; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(244,241,234,.10), transparent 72%);
  mix-blend-mode:screen;
  filter:blur(14px);
}
.vitrine__shadow{
  position:absolute; bottom:6%; width:min(19rem,52%); height:1.6rem;
  background:radial-gradient(ellipse, rgba(0,0,0,.75) 0%, transparent 70%);
  filter:blur(7px);
}
.vitrine__label{ grid-column:3; grid-row:2; align-self:center; display:grid; gap:.4rem; }
.vitrine__acc{ color:var(--brass); }
.vitrine__name{ font-size:clamp(1.25rem,2vw,1.7rem); margin-top:.3rem; }
.vitrine__var{ font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dust); }
.vitrine__spec{ margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--edge); display:grid; gap:.8rem; }
.vitrine__spec > div{ display:grid; gap:.15rem; }
.vitrine__spec dt{ font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.vitrine__spec dd{ margin:0; font-size:.92rem; color:var(--bone); }

.vitrine__index{ grid-column:1; grid-row:2; align-self:center; display:grid; gap:.1rem; max-height:52svh; overflow:auto; scrollbar-width:none; }
.vitrine__index::-webkit-scrollbar{ display:none; }
.vitrine__index button{
  display:flex; align-items:baseline; gap:.7rem; width:100%; text-align:left; cursor:pointer;
  padding:.42rem .5rem .42rem 0;
  color:#8A8378;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  transition:color 240ms ease, transform 300ms var(--arrive);
}
.vitrine__index button:active{ transform:translateX(var(--step, 0)) scale(.985); }
.vitrine__index button .n{ color:#4A463F; transition:color 240ms ease; }
.vitrine__index li.is-on button{ color:var(--bone); --step:.6rem; transform:translateX(.6rem); }
.vitrine__index li.is-on button .n{ color:var(--red-lit); }
@media (hover:hover) and (pointer:fine){
  .vitrine__index button:hover{ color:var(--dust); }
}
.vitrine__hint{ grid-column:1 / -1; grid-row:3; color:var(--mute); text-align:center; }

@media (max-width:1000px){
  .vitrine{ grid-template-columns:1fr; grid-template-rows:auto auto auto auto; }
  .vitrine__head, .vitrine__stage, .vitrine__label, .vitrine__index, .vitrine__hint{ grid-column:1; }
  .vitrine__head{ grid-row:1; } .vitrine__stage{ grid-row:2; } .vitrine__label{ grid-row:3; }
  .vitrine__index{
    grid-row:4; display:flex; gap:.2rem; overflow-x:auto; max-height:none;
    padding-bottom:.5rem; margin-top:1rem;
  }
  .vitrine__index button{ white-space:nowrap; padding:.5rem .8rem; border:1px solid var(--edge); }
  .vitrine__index li.is-on button{ --step:0; transform:none; border-color:var(--red); }
  .vitrine__hint{ display:none; }
}

/* ============================================================
   IV·b — THE WHITE ROOM
   A museum needs one lit room. The shoot is bright and clean;
   forcing it into the dark grade would have wasted it.
   ============================================================ */
.room{
  background:var(--bone);
  color:#171613;
  padding:clamp(5rem,13vh,9rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2); margin-inline:auto;
}
.room__head{ max-width:52rem; margin-bottom:clamp(2.5rem,6vh,4rem); }
.room .eyeless{ color:var(--red); }
.room .h-sub{ color:#5C574E; }
.room__note{ margin-top:1.6rem; max-width:44ch; color:#5C574E; font-size:.98rem; }

.room__grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-flow:dense;
  gap:clamp(.6rem,1.4vw,1.4rem);
}
.plate{ position:relative; overflow:hidden; background:#E4E0D6; }
.plate img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform 900ms var(--arrive);
}
@media (hover:hover) and (pointer:fine){
  .plate:hover img{ transform:scale(1.06); }
}
.plate__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.9rem 1rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(0deg, rgba(15,14,12,.62), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity 420ms var(--arrive), transform 420ms var(--arrive);
}
@media (hover:hover) and (pointer:fine){
  .plate:hover .plate__cap{ opacity:1; transform:translateY(0); }
}
/* an editorial rhythm, not a uniform grid */
.plate--tall{ grid-column:span 4; aspect-ratio:3/4; }
.plate--wide{ grid-column:span 8; aspect-ratio:16/10; }
.plate--half{ grid-column:span 6; aspect-ratio:4/5; }
.plate--full{ grid-column:span 12; aspect-ratio:21/9; }
.plate--third{ grid-column:span 4; aspect-ratio:1; }
@media (max-width:900px){
  .plate--tall, .plate--half, .plate--third{ grid-column:span 6; }
  .plate--wide, .plate--full{ grid-column:span 12; aspect-ratio:4/3; }
}
@media (max-width:560px){
  .plate--tall, .plate--half, .plate--third{ grid-column:span 12; aspect-ratio:4/5; }
}


/* ============================================================
   VI — TWO NATIONS
   ============================================================ */
.nations{
  position:relative; background:var(--void);
  padding:clamp(5rem,13vh,9rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2); margin-inline:auto;
}
.nations__head{ max-width:46rem; }
.nations__stage{
  position:relative; margin:clamp(2.5rem,6vh,4rem) 0;
  height:min(58svh, 30rem);
}
.nations__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.nations__tag{
  position:absolute; color:var(--mute); letter-spacing:.26em;
}
.nations__tag--ps{ left:2%; top:6%; color:var(--red-lit); }
.nations__tag--id{ right:2%; bottom:8%; color:var(--green-lit); }

.era{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  border-top:1px solid var(--edge); padding-top:clamp(1.8rem,4vw,2.6rem);
  counter-reset:era;
}
.era__item{
  opacity:.38;
  transition:opacity 600ms var(--arrive), transform 600ms var(--arrive);
  cursor:default;
}
.era__item.is-on{ opacity:1; }
.era__y{ color:var(--red-lit); margin-bottom:.6rem; }
.era__item h3{ font-size:1.14rem; margin-bottom:.55rem; letter-spacing:-0.01em; }
.era__item p:last-child{ color:var(--dust); font-size:.94rem; max-width:34ch; }
@media (hover:hover) and (pointer:fine){ .era__item:hover{ opacity:1; } }

.nations__quote{ margin-top:clamp(3rem,7vh,5rem); max-width:min(46rem,78vw); }
.nations__gloss{ margin-top:1rem; color:var(--mute); font-size:.92rem; font-style:italic; }
.nations__src{ margin-top:2rem; color:var(--mute); max-width:60ch; letter-spacing:.12em; }

/* ============================================================
   VII — WORN BY
   ============================================================ */
.worn{
  background:var(--green-deep);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,6vw,5rem); align-items:center;
  padding:clamp(5rem,13vh,9rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2); margin-inline:auto;
}
.worn__note{ margin-top:1.4rem; color:var(--dust); max-width:38ch; }
.worn__who{ margin-top:2.2rem; display:grid; gap:1.1rem; }
.worn__who li{
  display:grid; gap:.15rem;
  padding-top:1rem; border-top:1px solid color-mix(in srgb, var(--bone) 14%, transparent);
}
.worn__who b{ font-family:var(--display); font-weight:400; font-size:1.24rem; }
.worn__who span{ font-size:.88rem; color:var(--dust); }
.worn__who em{
  font-family:var(--mono); font-style:normal; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green-lit); margin-top:.3rem;
}
.worn__film{
  position:relative; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--bone) 16%, transparent);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.9);
}
.worn__film video{ width:100%; height:auto; display:block; }
@media (max-width:860px){ .worn{ grid-template-columns:1fr; } }

/* ============================================================
   VIII — WHERE IT GOES
   ============================================================ */
.give{
  background:var(--void);
  padding:clamp(5rem,13vh,9rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2); margin-inline:auto;
}
.give__head{ max-width:44rem; }
.give__note{ margin-top:1.6rem; color:var(--dust); max-width:46ch; }
.give__partners{
  margin-top:clamp(2.5rem,6vh,4rem);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem,1fr));
  gap:0; border-top:1px solid var(--edge);
}
.give__partners li{
  padding:1.5rem .2rem;
  border-bottom:1px solid var(--edge);
  font-family:var(--display); font-size:clamp(1.1rem,2vw,1.5rem);
  color:var(--bone);
}
.give__fine{ margin-top:1.6rem; color:var(--mute); letter-spacing:.12em; }

/* ============================================================
   05 — THE ATLAS
   ============================================================ */
.atlas{
  position:relative; min-height:100svh; background:var(--green-deep);
  display:grid; align-content:center; gap:clamp(2rem,6vh,4rem);
  padding:clamp(6rem,14vh,10rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2); margin-inline:auto;
  overflow:hidden;
}
.atlas__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.atlas__head, .atlas__figures, .atlas__foot{ position:relative; z-index:1; }
.atlas__figures{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,4vw,3rem);
  border-top:1px solid var(--edge); padding-top:2rem; max-width:56rem;
}
.atlas__figures > div{ display:grid; gap:.5rem; }
.atlas__figures dt{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); order:2; }
.atlas__figures dd{
  margin:0; order:1;
  font-family:var(--display); font-size:clamp(2.4rem,6vw,4.4rem);
  letter-spacing:-0.02em; line-height:1; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.atlas__foot{ color:var(--mute); }
@media (max-width:700px){ .atlas__figures{ grid-template-columns:1fr; gap:1.6rem; } }

/* ============================================================
   06 — THE COLLECTION
   ============================================================ */
.collection{
  padding:clamp(6rem,14vh,10rem) var(--gut);
  max-width:calc(var(--maxw) + var(--gut)*2); margin-inline:auto;
}
.collection__head{ margin-bottom:clamp(3rem,8vh,5rem); }
.collection__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(15rem,100%), 1fr));
  gap:clamp(1.5rem,3vw,2.6rem);
}
.piece{ position:relative; }
.piece__frame{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  background:var(--pit);
  border:1px solid var(--edge);
  clip-path:inset(0 0 0 0);
}
/* every object is now a photograph, so they already share a frame and a
   scale — no per-object correction needed any more */
.piece__frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 700ms var(--arrive), filter 700ms var(--arrive);
}
.piece__meta{ padding-top:.9rem; display:grid; gap:.2rem; }
.piece__n{ color:var(--brass); }
.piece__name{ font-family:var(--display); font-size:1.02rem; line-height:1.3; }
.piece__var{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
@media (hover:hover) and (pointer:fine){
  .piece:hover .piece__frame img{ transform:scale(1.07); }
}

/* ============================================================
   07 — THE MOVEMENT
   ============================================================ */
.movement{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(6rem,14vh,10rem) var(--gut);
  overflow:hidden;
  background:var(--void);
}
.movement__bed{
  position:absolute; inset:0; margin:0; z-index:0;
}
.movement__bed img{
  width:100%; height:100%; object-fit:cover; object-position:56% 40%;
  filter:grayscale(.72) contrast(1.15) brightness(.36) sepia(.12);
  transform:scale(1.12); will-change:transform;
}
.movement__bed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--void) 0%, rgba(8,9,10,.5) 34%, rgba(8,9,10,.6) 66%, var(--void) 100%);
}
.movement__type{
  position:relative; z-index:1;
  display:grid; gap:clamp(1.1rem,3vh,2.2rem);
  width:100%; max-width:var(--maxw);
  text-align:center; justify-items:center;
}
.claim{ will-change:opacity, transform; }
body.js-motion .claim{ opacity:0; }
.claim__en{
  display:block; font-family:var(--display);
  font-size:clamp(1.7rem,5.2vw,4rem); line-height:1.04; letter-spacing:-0.018em;
}
.claim__id{
  display:block; margin-top:.5rem;
  font-family:var(--mono); font-size:clamp(.58rem,1vw,.68rem);
  letter-spacing:.28em; text-transform:uppercase; color:var(--red-lit);
}
.claim:last-child .claim__en{ color:var(--green-lit); }

/* ============================================================
   08 — CARRY
   ============================================================ */
.carry{
  position:relative; min-height:100svh; background:var(--green-deep);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(6rem,14vh,10rem) var(--gut) 2.5rem;
  overflow:hidden;
}
.carry::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../img/plate/olive.webp") center/cover no-repeat;
  opacity:.24;
}
.carry::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, var(--green-deep) 8%, rgba(7,43,27,.78) 46%, rgba(7,43,27,.4) 100%);
}
.carry__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.carry__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin-inline:auto; flex:1;
  display:flex; flex-direction:column; justify-content:center;
}
.carry__h{ font-size:clamp(2.4rem,7vw,5.6rem); }
.carry__acts{ margin-top:clamp(3rem,8vh,5rem); border-top:1px solid var(--edge); max-width:46rem; }
.act{
  display:grid; grid-template-columns:2.6rem 1fr auto; align-items:center; gap:1.2rem;
  padding:1.35rem .2rem; border-bottom:1px solid var(--edge);
  text-decoration:none;
  transition:transform 420ms var(--arrive), border-color 300ms ease;
}
.act__k{ color:var(--mute); transition:color 300ms ease; }
.act__n{ font-family:var(--display); font-size:clamp(1.15rem,2.4vw,1.75rem); display:flex; flex-direction:column; gap:.25rem; }
.act__n em{
  font-family:var(--mono); font-style:normal;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}
.carry__aside{
  margin-top:2rem; max-width:46rem; color:var(--dust); font-size:.95rem;
}
.carry__aside a{ color:var(--bone); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--red); }
@media (hover:hover) and (pointer:fine){ .carry__aside a:hover{ color:var(--red-lit); } }
.carry__legal{ display:flex; gap:1.4rem; padding-top:.6rem; }
.carry__legal a{ color:var(--mute); text-decoration:none; transition:color 220ms ease; }
@media (hover:hover) and (pointer:fine){ .carry__legal a:hover{ color:var(--bone); } }
.act__i{
  width:3rem; height:1px; background:var(--mute); position:relative;
  transform:scaleX(.5); transform-origin:right;
  transition:transform 420ms var(--arrive), background-color 300ms ease;
}
.act__i::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-right:1px solid currentColor; border-top:1px solid currentColor;
  color:var(--mute); transform:rotate(45deg);
  transition:color 300ms ease;
}
.act:active{ transform:translateX(.9rem) scale(.995); }
@media (hover:hover) and (pointer:fine){
  .act:hover{ transform:translateX(1rem); border-bottom-color:var(--red); }
  .act:hover .act__k{ color:var(--red-lit); }
  .act:hover .act__i{ transform:scaleX(1); background:var(--red); }
  .act:hover .act__i::after{ color:var(--red); }
}
.carry__foot{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:.5rem; padding-top:3rem; color:var(--mute);
}
.carry__foot .mono{ letter-spacing:.14em; }

/* ============================================================
   REDUCED MOTION — fewer and gentler, not none
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .line, .claim{ opacity:1 !important; transform:none !important; filter:none !important; }
  .scene__plate img, .scene__plate canvas, .movement__bed img{ transform:none !important; }
  .spine{ opacity:1; }
  *{ scroll-behavior:auto !important; }
}
body.reduce-motion .line,
body.reduce-motion .claim{ opacity:1 !important; transform:none !important; filter:none !important; }
body.reduce-motion .scene__plate img,
body.reduce-motion .scene__plate canvas,
body.reduce-motion .movement__bed img{ transform:none !important; }