/* gâche — v5 */

:root{
  --void:#0A0A0B;
  --panel:#000;
  --bone:#F1EBDC;   /* eggshell everywhere */
  --shell:#F1EBDC;          /* eggshell — the wordmark */
  --mute:rgba(241,235,220,.50);   /* off-white, dimmed \u2014 not a separate grey pigment */
  --dim:rgba(241,235,220,.30);    /* off-white, dimmer still */
  --hair:#1D1D1D;

  /* one face everywhere — Syne, same as the wordmark */
  --display:"Syne", sans-serif;
  --sans:"Syne", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --word:"Syne", sans-serif;

  --gut:clamp(18px,3.2vw,40px);
  --bar:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--bone);
  font-family:var(--sans);font-weight:400;font-size:14.5px;line-height:1.65;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
.caps{text-transform:uppercase;letter-spacing:.18em;font-weight:400;font-size:10.5px}
.tiny{font-size:12.5px;letter-spacing:.02em;font-weight:400}

/* ---------- page transition : the word turns over ---------- */
#turn{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:var(--void);
  opacity:0;pointer-events:none;
  transition:opacity .34s ease;
}
#turn.busy{opacity:1;pointer-events:auto}
#turn .dust{position:absolute;inset:0;width:100%;height:100%}
#turn .word{position:relative;z-index:1;
  font-family:var(--word);font-weight:400;
  font-size:clamp(44px,9vw,110px);
  line-height:1;letter-spacing:-.015em;
  color:var(--shell);text-transform:lowercase;
  transform:perspective(900px) rotateX(0deg);
  will-change:transform;
}
#turn .hint{
  position:absolute;left:0;right:0;top:calc(50% + clamp(34px,6.5vw,76px));
  text-align:center;color:var(--dim);
  opacity:0;transform:translateY(6px);
}
#turn.busy .hint{animation:hintin .8s ease .18s both}
@keyframes hintin{
  0%{opacity:0;transform:translateY(6px)}
  35%{opacity:1;transform:translateY(0)}
  75%{opacity:1}
  100%{opacity:0;transform:translateY(-4px)}
}
#turn.busy .word{animation:turnover .78s cubic-bezier(.65,0,.35,1) both}
#turn.arrive .word{animation:turnback .7s cubic-bezier(.65,0,.35,1) both}
@keyframes turnover{
  from{transform:perspective(900px) rotateX(0deg)}
  to{transform:perspective(900px) rotateX(180deg)}
}
@keyframes turnback{
  from{transform:perspective(900px) rotateX(180deg)}
  to{transform:perspective(900px) rotateX(360deg)}
}

/* ---------- nav / footer ---------- */
.bar{
  position:sticky;top:0;z-index:40;height:var(--bar);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:0 var(--gut);background:var(--void);
}
.bar nav{display:flex;gap:clamp(14px,2.2vw,28px)}
.bar a{color:var(--mute);transition:color .3s}
.bar a:hover,.bar a.on{color:var(--bone)}
.bar .mid{display:flex;justify-content:center}
.bar .mark{
  font-family:var(--word);font-weight:400;font-size:22px;
  letter-spacing:-.01em;color:var(--shell);line-height:1;text-transform:lowercase;
}
.bar .mark:hover{color:var(--bone)}
.bar .mark .lm{
  font-size:.52em;letter-spacing:.13em;
  margin-left:.34em;vertical-align:.42em;
  color:var(--mute);transition:color .3s;
}
.bar .mark:hover .lm{color:var(--shell)}
.bar .end{display:flex;justify-content:flex-end;align-items:center}
.cart{display:flex;align-items:center;gap:6px;color:var(--mute)}
.cart:hover{color:var(--bone)}
.cart svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.2}
.cart b{font-weight:300;font-size:11px}

.social{display:flex;gap:15px}
.social svg{width:14px;height:14px;fill:currentColor;display:block}
.social a{color:var(--mute)}
.social a:hover{color:var(--bone)}

.foot{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px var(--gut) calc(30px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--hair);
  color:var(--dim);text-align:center;
}
.foot .set{display:flex;gap:16px;align-items:center;font-size:11px;letter-spacing:.1em}
.foot .set a{text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--bone)}

/* ================= 1 · front screen ================= */
body.gate-open{overflow:hidden;height:100vh;height:100svh}
.gate{
  position:relative;z-index:1;height:100vh;height:100svh;display:flex;flex-direction:column;
  opacity:0;transition:opacity 1.2s ease;
}
.gate.lit{opacity:1}
.gate .field{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.gate .field canvas{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(74vmin,660px);height:min(74vmin,660px);
}
.gate .name{
  position:relative;z-index:2;display:block;
  font-family:var(--word);font-weight:400;
  font-size:clamp(56px,15vw,190px);line-height:.9;letter-spacing:-.015em;
  color:var(--bone);text-transform:lowercase;user-select:none;
  transition:opacity .5s ease;
}
a.name:hover{opacity:.75}
.gate .list{
  position:relative;z-index:2;width:min(300px,78vw);margin:0 auto;
  padding-bottom:calc(clamp(22px,5vh,46px) + env(safe-area-inset-bottom, 0px));text-align:center;
}
.gate .list label{display:block;color:var(--dim);margin-bottom:7px}
.gate .list input::placeholder{
  color:var(--dim);opacity:1;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:opacity .4s ease;
}
.gate .list input:focus::placeholder{opacity:.35}
.gate .list .row{display:flex;border-bottom:1px solid #212121}
.gate .list input{
  flex:1;background:none;border:0;color:var(--bone);
  font-family:var(--word);font-size:16px;padding:8px 0;text-align:center;
}
.gate .list input::placeholder{font-family:var(--word)}
.gate .list button{color:var(--mute);padding:8px 0 8px 14px;white-space:nowrap}
.gate .list button:hover{color:var(--bone)}
.gate .say{margin-top:10px;min-height:14px;color:var(--dim);font-size:11px;letter-spacing:.1em}

/* ================= 2 · home ================= */
.hero{position:relative;height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));overflow:hidden;background:#000}
.hero video,.hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .cover{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent 40%);
}

/* ================= 3 · garments — left scrolls, right holds ================= */
.story{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:start;border-top:1px solid var(--hair);
}
.story:first-of-type{border-top:0}
.story .moves > *{
  aspect-ratio:4/5;background:#000;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
a.story-link{display:block;color:inherit}
.story .holds{
  position:sticky;top:var(--bar);height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));
  display:flex;flex-direction:column;overflow:hidden;
}
.story .holds .mood{flex:1;min-height:0;background:#000;overflow:hidden}
.story .holds .mood img{width:100%;height:100%;object-fit:cover;display:block}
.story .holds .meta{
  flex:none;padding:22px clamp(16px,2.4vw,34px) 26px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--hair);
}
.story .holds h2{
  font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,27px);
  line-height:1.15;text-transform:lowercase;
}
.story .holds .sub{color:var(--mute);margin-top:2px;font-size:13px}
.story .holds .go{color:var(--mute);white-space:nowrap;border-bottom:1px solid #2A2A2A;padding-bottom:2px}
.story .holds .go:hover{color:var(--bone);border-color:var(--bone)}

/* ================= 4 · product ================= */
.pdp{display:grid;grid-template-columns:1.3fr 1fr;align-items:start}
.pdp .shots > *{width:100%;min-height:100vh;min-height:100vh;height:100svh;background:#000;border-bottom:1px solid var(--hair)}
.pdp .info{
  background:var(--panel);padding:clamp(34px,5vw,72px) clamp(24px,3.6vw,54px);
  display:flex;flex-direction:column;justify-content:center;
  position:sticky;top:var(--bar);height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));
}
.pdp h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.1;text-transform:lowercase}
.pdp .price{color:var(--mute);margin-top:6px}
.buyrow{display:flex;gap:12px;margin-top:26px}
.qty{display:flex;align-items:center;background:#161616}
.qty button{width:32px;height:46px;color:var(--mute);font-size:16px;font-weight:200}
.qty button:hover{color:var(--bone)}
.qty span{min-width:26px;text-align:center;font-size:13px}
.add{flex:1;background:#161616;color:var(--bone);height:46px;transition:background .25s}
.add:hover{background:#212121}
.sizes{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.sizes button{border:1px solid var(--hair);padding:8px 14px;font-size:12px;color:var(--mute)}
.sizes button:hover{color:var(--bone)}
.sizes button.on{border-color:var(--bone);color:var(--bone)}
.said{margin-top:12px;color:var(--dim);font-size:11px;letter-spacing:.08em;min-height:14px}
.desc{margin-top:32px;color:var(--mute);font-size:13.5px;line-height:1.9;max-width:38ch}
.desc .close{margin-top:16px;color:var(--dim);letter-spacing:.06em}

/* ================= 5 · archive ================= */
.arch-wrap{position:relative}
.arch-track{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:stretch}
.arch-track .col{flex:none;display:flex;flex-direction:column;border-right:1px solid #19191A}
.arch-track .col > *{flex:1;position:relative;background:#101011}
/* the crop-bias rule that lived here was tuned for the earlier
   generated collage frames (headlines sitting top-left in every
   one). Real photography is centrally composed by the photographer,
   so default centre-crop is correct now -- intentionally removed. */
.arch-track .col > * + *{border-top:1px solid #000}
.arch-track .frame .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 18px 22px;color:var(--mute);
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
}
.arch-track .col.in .cap{opacity:1;transform:translateY(0)}
.arch-end{display:flex;align-items:center;justify-content:center;padding:14vh var(--gut);color:var(--dim)}
.arch-plain{display:none}
.arch-plain > *{display:block;width:100%;background:#000}
.arch-plain .full{height:80vh;height:80svh;margin-bottom:1px}
.arch-plain .pair{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-bottom:1px}
.arch-plain .pair > *{height:56vh;height:56svh}
body.arch-fallback .arch-wrap{display:none}
body.arch-fallback .arch-plain{display:block}

.ph{
  display:flex;align-items:center;justify-content:center;
  background:#111;color:rgba(241,235,220,.25);font-size:10.5px;letter-spacing:.2em;text-transform:lowercase;
}

@media (max-width:860px){
  /* ---------- story cards: the same two-column composition as desktop ----------
     The first photo and the mood shot each fill the screen, side by
     side, at equal height \u2014 nothing left empty. Scroll and the second
     product photo rises on the left while the mood/price panel holds
     its position on the right, exactly like the desktop pin. */
  .story .moves > *{
    height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));
    aspect-ratio:auto;
  }
  .story .moves img:first-child{object-position:45% center}   /* the disc sits at ~45% across the source \u2014 measured, not guessed */
  .story .holds{
    position:sticky;top:var(--bar);
    height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));
    display:flex;flex-direction:column;overflow:hidden;
  }
  .story .holds .mood{flex:1;min-height:0;aspect-ratio:auto}
  .story .holds .meta{
    align-items:center;gap:10px;flex:none;
    padding:14px clamp(12px,3vw,20px) 16px;
  }
  .story .holds .go{
    border:1px solid #2A2A2A;padding:6px 12px;
    letter-spacing:.12em;text-transform:uppercase;font-size:10px;
  }
  a.holds:active .go{color:var(--bone);border-color:var(--bone)}
  .story .holds h2{font-size:15px}
  .story .holds .sub{font-size:11px}

  /* product pages: same two-column read, just narrower */
  /* product page only: the listing up top, photos as a simple
     scroll underneath \u2014 nothing pinned, nothing cropped to fit a
     column that was never going to hold three photos comfortably. */
  .pdp{display:flex;flex-direction:column;align-items:stretch}
  .pdp .info{
    order:-1;position:relative;top:auto;height:auto;width:100%;
    padding:26px clamp(16px,4vw,24px) 24px;
    border-bottom:1px solid var(--hair);
  }
  .pdp .info h1{font-size:26px}
  .pdp .shots{order:1;width:100%}
  .pdp .shots > *{
    min-height:0;aspect-ratio:4/5;height:auto;
    border-right:0;border-bottom:1px solid var(--hair);
  }

  .bar{grid-template-columns:auto 1fr auto}
  .bar nav{gap:13px}
}

@media (max-width:860px){
  /* ---------- archive: native horizontal swipe, full-width frames ----------
     Desktop's column widths (56vw, 26vw, a pair stacked in one column\u2026)
     are tuned for a wide screen; unscaled on a phone they crop each
     frame to a sliver. On mobile every column becomes one full frame,
     so nothing is ever cut off \u2014 swipe, and the whole picture is
     there each time. The ending stays a downward arrival, exactly
     like the desktop release: swipe to the last frame, then the page
     continues down into the sign-off, same as scrolling ever did. */
  body.arch-swipe .arch-wrap{height:auto}
  body.arch-swipe .arch-track{
    position:static;height:74vh;height:74svh;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  body.arch-swipe .arch-track::-webkit-scrollbar{display:none}
  body.arch-swipe .arch-track .col{
    width:92vw !important;flex:0 0 92vw !important;
    scroll-snap-align:center;
  }
  /* Wide photos can't survive a tall narrow box — object-fit:cover
     would throw most of the frame away. Landscape and square frames
     get a shorter, letterboxed cell so the whole picture reads.
     Classes are set by JS from each image's real ratio (no :has(),
     which older iOS Safari doesn't support). */
  body.arch-swipe .arch-track .col.wide .frame{
    flex:0 0 auto;height:52vh;height:52svh;align-self:center;
  }
  body.arch-swipe .arch-track .col.squareish .frame{
    flex:0 0 auto;height:62vh;height:62svh;align-self:center;
  }
  /* three frames whose actual subject sits off-centre in the source
     photo — verified by rendering the real crop, not guessed. Default
     centre-crop was slicing the chair off-frame, clipping the word
     "NOTHING," and losing "SALVATION" text on the jeep. */
  body.arch-swipe .arch-track .col img[src*="p20.jpg"]{object-position:20% center}
  body.arch-swipe .arch-track .col img[src*="p19.jpg"]{object-position:28% center}
  body.arch-swipe .arch-track .col img[src*="p18.jpg"]{object-position:38% center}
  body.arch-swipe .arch-plain{display:none}

  /* the ending stays out of reach until the swipe actually gets there \u2014
     the page has nowhere further to go until the last frame is seen,
     then the sign-off opens up below, same as the desktop release. */
  body.arch-swipe .arch-end{
    max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;
    transition:max-height .6s ease, opacity .5s ease .15s, padding .6s ease;
  }
  body.arch-swipe.arch-done .arch-end{
    max-height:50vh;opacity:1;padding:12vh var(--gut) 8vh;
  }
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- whispers — small French lines placed through the site ---------- */
.whisper{
  display:flex;align-items:center;justify-content:center;
  padding:12vh var(--gut);
  color:var(--dim);font-size:12px;letter-spacing:.22em;
  text-transform:lowercase;text-align:center;
}
.hero .whisper{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;padding:0;
  color:rgba(241,235,220,.5);
}


/* the held panel as a link */
a.holds{color:inherit}
a.holds:hover .go{color:var(--bone);border-color:var(--bone)}
a.holds:hover h2{color:var(--bone)}

/* selection runs red — the one place the accent lives outside the flip */
::selection{background:#A31C1C;color:#F1EBDC}


/* ---------- cart ---------- */
#bag{
  position:fixed;inset:0;z-index:250;
  background:rgba(10,10,11,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
#bag.open{opacity:1;pointer-events:auto}
#bag .inner{
  width:min(420px,86vw);
  transform:translateY(10px);transition:transform .4s ease;
}
#bag.open .inner{transform:translateY(0)}
#bag h3{
  font-family:var(--word);font-weight:400;font-size:26px;
  text-transform:lowercase;letter-spacing:-.01em;margin-bottom:22px;
}
#bag .line{
  display:flex;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--hair);
  color:var(--mute);font-size:13px;
}
#bag .line b{font-weight:400;color:var(--bone)}
#bag .none{color:var(--dim);font-size:13px;letter-spacing:.06em;padding:6px 0 2px}
#bag .sum{
  display:flex;justify-content:space-between;
  padding:16px 0 0;color:var(--bone);font-size:14px;
}
#bag .out{
  width:100%;margin-top:22px;background:#161616;color:var(--dim);
  height:46px;cursor:not-allowed;
}
#bag .shut{
  display:block;margin:26px auto 0;color:var(--mute);
  text-decoration:underline;text-underline-offset:3px;
}
#bag .shut:hover{color:var(--bone)}


/* ---------- the page can be turned over (type the name) ---------- */
html{transition:transform .95s cubic-bezier(.65,0,.35,1)}
html.flipped{transform:rotate(180deg)}

/* ---------- the wordmark breathes ---------- */
.gate .name{animation:breathe 6s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.012)}}

/* ---------- corner globe, turned by the scroll ---------- */
#meter{
  position:fixed;left:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:38px;height:38px;z-index:60;opacity:.7;pointer-events:none;
}
@media (max-width:860px){#meter{display:none}}



.ashfield{position:fixed;inset:0;z-index:3;pointer-events:none}



/* ---------- 7 · the corner world ---------- */
#meter{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:40px;height:40px;z-index:60;opacity:.5;pointer-events:none;
}
@media (max-width:860px){#meter{width:32px;height:32px;left:12px}}


/* ================= opener · 00:00 / CENDRES ================= */
.clock-stage{
  position:relative;
  height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:9vh;             /* lifts the whole group */
  overflow:hidden;background:var(--void);
}
.clock-stage .ashcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

.time{
  position:relative;z-index:2;line-height:.9;
  font-family:var(--word);font-weight:400;
  font-size:clamp(88px,20vw,330px);
  color:var(--bone);
  user-select:none;
}
/* every glyph in an identical box — hours and minutes can't drift apart */
.time .digits span{display:inline-block;width:.60em;text-align:center}
.time .digits span.c{width:.30em}
.time .digits{transition:opacity .45s ease, filter .45s ease}
.time .word{
  font-family:var(--word);font-weight:400;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.42em;letter-spacing:.34em;text-indent:.34em;
  opacity:0;transition:opacity .5s ease .1s;
  pointer-events:none;white-space:nowrap;
}
.time .segcv{
  display:block;margin:0 auto;width:min(76vw,720px);height:auto;aspect-ratio:3.1/1;
  transition:opacity .45s ease, filter .45s ease;
}
.clock-stage.cendres .segcv{opacity:0;filter:blur(6px)}
.clock-stage.cendres .digits{opacity:0;filter:blur(6px)}
.clock-stage.cendres .word{opacity:1}

.since{
  position:relative;z-index:2;margin-top:44px;
  color:var(--dim);font-size:12px;letter-spacing:.18em;text-transform:lowercase;
}
.markline{
  position:relative;z-index:2;margin-top:44px;   /* same interval as clock -> since */
  text-align:center;color:var(--bone);opacity:.34;font-size:11px;letter-spacing:.26em;
}

/* dead hours — 02:00 to 05:00 */
body.late .time{opacity:.55}
body.late .since{opacity:.6}
.time.flick{animation:flick .34s steps(2,end) 1}
@keyframes flick{
  0%{opacity:1}25%{opacity:.2}45%{opacity:.8}65%{opacity:.3}100%{opacity:1}
}
body.late .time.flick{animation:flickl .34s steps(2,end) 1}
@keyframes flickl{
  0%{opacity:.55}30%{opacity:.1}55%{opacity:.45}75%{opacity:.15}100%{opacity:.55}
}

/* minuit — the earned flip. only ever fires live at 00:00 */
#minuit{
  position:fixed;inset:0;z-index:280;pointer-events:none;
  background:#A31C1C;opacity:0;transition:opacity 1.1s ease;
}
html.minuit #minuit{opacity:.36}
html.minuit body{transform:rotate(180deg)}


/* le dernier mois — the calendar that opens the page and returns at midnight */
.calcv{
  position:absolute;inset:0;width:100%;height:100%;z-index:5;
  background:var(--void);
  opacity:1;transition:opacity 1s ease;
}
.calcv.hide{opacity:0;pointer-events:none}


/* ---------- one bone, everywhere ---------- */
.gate .name{color:var(--bone)}
.gate .list input{color:var(--bone)}
.gate .list input::placeholder{color:var(--bone);opacity:.48}
.gate .list .caps{color:var(--bone);opacity:.72}
.gate .list .caps:hover{opacity:1}
.gate .say{color:var(--bone);opacity:.6}
.since{color:var(--bone);opacity:.5}
.markline{color:var(--bone);opacity:.34}
.bar .mark{color:var(--bone)}
.bar .mark .lm{color:var(--bone);opacity:.5}
.bar .mark:hover .lm{opacity:1;color:var(--bone)}


/* ---------- verrou — the drop is locked ---------- */
@keyframes glmshake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  35%{transform:translateX(6px)}
  55%{transform:translateX(-4px)}
  75%{transform:translateX(3px)}
  90%{transform:translateX(-1px)}
}
body.shake{animation:glmshake .42s cubic-bezier(.36,.07,.19,.97) 1}

#soon{
  position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,11,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
#soon.on{opacity:1;pointer-events:auto}
#soon .panel{
  width:min(420px,86vw);text-align:center;
  padding:44px 30px 38px;border:1px solid var(--hair);background:var(--void);
  transform:translateY(10px);transition:transform .5s ease;
}
#soon.on .panel{transform:translateY(0)}
#soon .bigword{
  font-family:var(--word);font-weight:400;text-transform:lowercase;
  font-size:clamp(40px,8vw,64px);line-height:1;color:var(--bone);
}
#soon .subword{
  margin-top:12px;color:var(--bone);opacity:.5;
  font-size:12px;letter-spacing:.18em;
}
#soon .row{
  display:flex;gap:0;margin-top:30px;border-bottom:1px solid #3A3A3B;
}
#soon input{
  flex:1;background:none;border:0;outline:0;
  color:var(--bone);font-family:var(--word);font-size:16px;letter-spacing:.04em;
  padding:10px 2px;
}
#soon input::placeholder{color:var(--bone);opacity:.42;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
#soon .caps{
  background:none;border:0;color:var(--bone);opacity:.72;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:10px 2px;
}
#soon .caps:hover{opacity:1}
#soon .say{margin-top:14px;color:var(--bone);opacity:.55;font-size:11px;letter-spacing:.14em;min-height:14px}
#soon .close{
  position:absolute;top:14px;right:18px;color:var(--bone);opacity:.4;
  font-size:20px;line-height:1;background:none;border:0;
}
#soon .close:hover{opacity:1}
#soon .panel{position:relative}


/* ---------- épuisé — sold out stays on the record ---------- */
.pdp .price s{opacity:.45;text-decoration-thickness:1.5px}
.add[disabled]{
  opacity:.4;pointer-events:none;cursor:default;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.gone-line{
  padding:0 var(--gut) 46px;color:var(--bone);opacity:.4;
  letter-spacing:.14em;
}


/* ---------- plain pages: contact, legal ---------- */
.plainpage{
  max-width:640px;margin:0 auto;padding:9vh var(--gut) 12vh;
  color:var(--bone);
}
.plainpage h1{
  font-family:var(--word);font-weight:400;text-transform:lowercase;
  font-size:clamp(38px,6vw,58px);line-height:1;
}
.plainpage .lede{margin-top:14px;font-size:12px;letter-spacing:.2em;opacity:.5;text-transform:lowercase}
.plainpage form{margin-top:44px;display:flex;flex-direction:column;gap:28px}
.plainpage form .hp{display:none}
.plainpage label{
  display:flex;flex-direction:column;gap:8px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.85;
}
.plainpage input[type=text],.plainpage input[type=email],.plainpage textarea{
  background:none;border:0;outline:0;border-bottom:1px solid #2E2E2F;
  color:var(--bone);font-family:var(--word);font-size:16px;letter-spacing:.02em;
  padding:9px 2px;resize:vertical;
}
.plainpage input:focus,.plainpage textarea:focus{border-color:var(--bone)}
.plainpage button.caps{
  align-self:flex-start;background:none;border:1px solid #2E2E2F;
  color:var(--bone);opacity:.8;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  padding:12px 34px;cursor:pointer;transition:opacity .3s ease,border-color .3s ease;
}
.plainpage button.caps:hover{opacity:1;border-color:var(--bone)}
.plainpage .say{font-size:11px;letter-spacing:.14em;opacity:.55;min-height:14px;text-transform:lowercase}
.plainpage .prose{margin-top:40px;display:flex;flex-direction:column;gap:22px}
.plainpage .prose p{font-size:14px;line-height:1.8;opacity:.75;letter-spacing:.01em}
.plainpage .prose .stampline{opacity:.45;font-size:12px;letter-spacing:.12em}
.plainpage .prose a{color:var(--bone);border-bottom:1px solid #3A3A3B}
.plainpage .prose a:hover{border-color:var(--bone)}

/* ---------- home fits one screen: no scroll, no dead space ---------- */
body.fit{height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}
body.fit .bar{flex:none}
body.fit .clock-stage{flex:1;min-height:0;height:auto;padding-bottom:0}
body.fit .foot{flex:none;padding:16px var(--gut) 18px}
body.fit .foot .social{margin-bottom:8px}


/* ---------- phone header: the mark crowns the page ---------- */
@media (max-width:700px){
  :root{--bar:100px}
  .bar{
    height:auto;display:flex;flex-direction:column;align-items:center;
    gap:9px;padding:16px var(--gut) 13px;
  }
  .bar .mid{order:-1}
  .bar .mark{font-size:27px;letter-spacing:-.01em}
  .bar nav{gap:20px}
  .bar nav a{font-size:10.5px;letter-spacing:.16em;text-transform:lowercase}
  .bar .end{position:absolute;top:18px;right:var(--gut)}
}

.time{margin-left:auto;margin-right:auto;text-align:center}


/* ---------- phone: every page speaks the site's language ---------- */
@media (max-width:860px){
  /* archive fallback: hairline seams like the desktop track,
     the sign-off where it belongs — after the last frame
     (reduced-motion visitors only; everyone else gets the swipe track) */
  body.arch-fallback main{display:flex;flex-direction:column}
  body.arch-fallback .arch-plain{order:1;background:var(--hair)}
  .arch-plain > *{background:#101011}
  .arch-plain img{width:100%;height:100%;object-fit:cover;display:block}
.arch-plain .full img[src*="p20.jpg"]{object-position:20% center}
.arch-plain .full img[src*="p19.jpg"]{object-position:28% center}
.arch-plain .full img[src*="p18.jpg"]{object-position:38% center}
  body.arch-fallback .arch-end{
    order:2;display:block;border-top:1px solid var(--hair);
    padding:38px 0 44px;text-align:center;
  }

  /* quieter page frames on phones */
  .plainpage{padding:6vh var(--gut) 10vh}
  .foot{padding:20px var(--gut) 26px}
}

/* ================= 2b · home / the wall ================= */
body.wall-home{height:100vh;height:100svh;overflow:hidden;background:#080808}
.wall-home .wall-bar{
  position:fixed;inset:0 0 auto 0;z-index:90;background:linear-gradient(to bottom,rgba(5,5,5,.62),rgba(5,5,5,0));
  pointer-events:none;transition:opacity .45s ease;height:76px;
}
.wall-home .wall-bar .mid,.wall-home .wall-bar .end,.wall-home .wall-bar nav{pointer-events:auto}
.wall-home .wall-bar .mark{font-size:24px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.wall-home .wall-nav{opacity:0;transform:translateY(-5px);transition:opacity .4s ease,transform .4s ease}
.wall-home.ui-awake .wall-nav{opacity:1;transform:none}
.wall-home .wall-bar .end{opacity:.52;transition:opacity .35s ease}
.wall-home.ui-awake .wall-bar .end{opacity:1}
.wall-stage{position:fixed;inset:0;background:#050505;overflow:hidden}
.wall-frame{position:absolute;inset:0;opacity:0;transform:scale(1.015);transition:opacity .75s ease,transform 1.2s ease;pointer-events:none}
.wall-frame.is-active{opacity:1;transform:scale(1)}
.wall-frame img{width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.84) contrast(1.02) brightness(.94)}
.wall-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 45%,rgba(0,0,0,.11) 75%,rgba(0,0,0,.35) 100%)}
.wall-meta{position:absolute;z-index:12;left:var(--gut);bottom:26px;display:flex;flex-direction:column;color:rgba(241,235,220,.66);font-size:9px;line-height:1.55;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .35s ease}
.wall-home.ui-awake .wall-meta{opacity:1}
.wall-change{position:absolute;z-index:14;right:var(--gut);bottom:27px;display:flex;gap:10px;align-items:center;color:rgba(241,235,220,.68);font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .35s ease,color .25s ease}
.wall-home.ui-awake .wall-change{opacity:1}.wall-change:hover{color:var(--bone)}
.wall-change i{width:18px;height:18px;border:1px solid currentColor;border-radius:50%;position:relative}.wall-change i:after{content:'';position:absolute;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;right:-1px;top:1px;transform:rotate(22deg)}
.wall-prompt{position:absolute;z-index:12;left:var(--gut);top:28px;color:rgba(241,235,220,.48);font-size:9px;letter-spacing:.13em;transition:opacity .4s ease}.wall-prompt span{letter-spacing:.28em;margin-right:8px}.wall-home.ui-awake .wall-prompt{opacity:0}
.wall-hotspot{position:absolute;z-index:10;display:block;border:1px solid transparent;border-radius:2px;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.wall-hotspot:hover{border-color:rgba(241,235,220,.28);background:rgba(241,235,220,.025);box-shadow:0 0 0 1px rgba(0,0,0,.18) inset}
.hs-garments{left:31%;top:27%;width:31%;height:45%}.hs-archive{left:66%;top:10%;width:23%;height:39%}.hs-acc{left:67%;top:61%;width:17%;height:27%}
.peel-zone{position:absolute;z-index:15;left:56.2%;top:16.5%;width:11.5%;height:18%;perspective:700px}
.peel-paper{position:absolute;right:0;top:0;width:74%;height:74%;background:linear-gradient(135deg,#d7cdb7,#f0e9d9 56%,#b8ad98);clip-path:polygon(0 0,100% 0,100% 100%);transform-origin:100% 0;transform:rotateY(0deg) rotateZ(0deg);transition:transform .55s cubic-bezier(.2,.75,.18,1),filter .55s;filter:drop-shadow(-5px 7px 6px rgba(0,0,0,.4));opacity:.0}
.under-mark{position:absolute;right:12%;top:9%;width:56%;height:46%;display:flex;align-items:center;justify-content:center;gap:7px;background:#181615;border:1px solid rgba(241,235,220,.14);opacity:0;transition:opacity .35s ease;color:var(--bone)}
.under-mark i{width:7px;height:7px;background:currentColor;border-radius:50%}.under-mark small{position:absolute;left:8px;bottom:6px;font-size:6px;letter-spacing:.12em;opacity:.55;text-transform:uppercase}
.peel-zone:hover .peel-paper,.peel-zone:focus .peel-paper{opacity:.95;transform:rotateY(-118deg) rotateZ(-5deg)}
.peel-zone:hover .under-mark,.peel-zone:focus .under-mark{opacity:.9}
@media(max-width:760px){
  .wall-home .wall-bar{height:66px;padding:0 17px}.wall-home .wall-bar .mark{font-size:21px}.wall-home .wall-nav{position:fixed;left:16px;right:16px;bottom:18px;top:auto;display:flex;justify-content:center;gap:18px;background:rgba(8,8,8,.56);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 12px;border:1px solid rgba(241,235,220,.08)}
  .wall-home .wall-nav a{font-size:9px;letter-spacing:.08em}.wall-frame img{object-position:center center}.wall-meta{left:16px;bottom:72px}.wall-change{right:16px;bottom:75px}.wall-prompt{display:none}
  .hs-garments{left:15%;top:19%;width:56%;height:47%}.hs-archive{left:58%;top:9%;width:39%;height:38%}.hs-acc{left:59%;top:58%;width:34%;height:28%}.peel-zone{left:54%;top:16%;width:22%;height:18%}
}

/* ================= home wall v2 ================= */
body.wall-home.wall-v2{height:100vh;height:100svh;overflow:hidden;background:#080808}
.wall-v2 .bar,.wall-v2 .wall-bar{display:none!important}
.wall-top{position:fixed;z-index:100;right:24px;top:19px;pointer-events:none}
.wall-cart{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:rgba(241,235,220,.72);transition:color .25s ease,transform .25s ease}
.wall-cart:hover{color:var(--bone);transform:translateY(-1px)}
.wall-cart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2}.wall-cart b{font-size:8px;margin-left:4px;font-weight:400}
.wall-v2 .wall-stage{position:fixed;inset:0;overflow:hidden;background:#060606}
.wall-v2 .wall-frame{position:absolute;inset:-10px;opacity:0;background-size:cover;background-position:center center;will-change:transform,opacity;transform:translate3d(0,0,0) scale(1.018);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.65,.2,1);pointer-events:none}
.wall-v2 .wall-frame.is-active{opacity:1}
.wall-v2 .wall-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 48%,rgba(0,0,0,.13) 78%,rgba(0,0,0,.40) 100%)}
.wall-top-fade,.wall-bottom-fade{position:absolute;left:0;right:0;z-index:5;pointer-events:none}
.wall-top-fade{top:0;height:88px;background:linear-gradient(to bottom,rgba(5,5,5,.80),rgba(5,5,5,.26) 48%,transparent)}
.wall-bottom-fade{bottom:0;height:100px;background:linear-gradient(to top,rgba(5,5,5,.84),rgba(5,5,5,.30) 52%,transparent)}
.wall-point{position:absolute;z-index:20;width:28px;height:28px;transform:translate(-50%,-50%);display:block;outline:0;transition:left .55s cubic-bezier(.2,.65,.2,1),top .55s cubic-bezier(.2,.65,.2,1),translate .12s linear}
.wall-point .plus{position:absolute;inset:0;display:grid;place-items:center;border:1px solid rgba(241,235,220,.78);border-radius:50%;background:rgba(6,6,6,.22);color:rgba(241,235,220,.92);font-size:16px;line-height:1;font-family:Arial,sans-serif;font-weight:300;box-shadow:0 1px 8px rgba(0,0,0,.24);transition:background .2s ease,border-color .2s ease,transform .2s ease}
.wall-point:hover .plus,.wall-point:focus-visible .plus,.wall-point.is-revealed .plus{background:rgba(6,6,6,.72);border-color:var(--bone);transform:scale(1.06)}
.hot-label{position:absolute;left:37px;top:50%;transform:translateY(-50%) translateX(-5px) scale(.98);transform-origin:left center;white-space:nowrap;padding:6px 9px 5px;background:rgba(7,7,7,.88);color:rgba(241,235,220,.92);font-size:9px;line-height:1;letter-spacing:.14em;text-transform:lowercase;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 4px 18px rgba(0,0,0,.14)}
.hot-label:before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:7px solid rgba(7,7,7,.88)}
.wall-point:hover .hot-label,.wall-point:focus-visible .hot-label,.wall-point.is-revealed .hot-label{opacity:1;transform:translateY(-50%) translateX(0) scale(1);pointer-events:auto}
.wall-v2 .peel-zone{position:absolute;z-index:16;width:105px;height:100px;transform:translate(-10%,-10%);perspective:700px;background:none;border:0;cursor:pointer;transition:left .55s ease,top .55s ease}
.wall-v2 .peel-paper{position:absolute;right:0;top:0;width:78%;height:72%;background:linear-gradient(135deg,#c8bda6,#eee7d8 60%,#ac9e88);clip-path:polygon(0 0,100% 0,100% 100%);transform-origin:100% 0;transition:transform .52s cubic-bezier(.2,.75,.18,1),opacity .3s;filter:drop-shadow(-5px 7px 5px rgba(0,0,0,.34));opacity:0}
.wall-v2 .under-mark{position:absolute;right:11%;top:10%;width:58%;height:44%;display:flex;align-items:center;justify-content:center;gap:7px;background:#171514;color:var(--bone);opacity:0;transition:opacity .3s ease}
.wall-v2 .under-mark i{width:7px;height:7px;background:currentColor;border-radius:50%}.wall-v2 .under-mark small{position:absolute;left:7px;bottom:5px;font-size:6px;letter-spacing:.12em;opacity:.52;text-transform:uppercase}
.wall-v2 .peel-zone:hover .peel-paper,.wall-v2 .peel-zone:focus .peel-paper{opacity:.96;transform:rotateY(-116deg) rotateZ(-4deg)}
.wall-v2 .peel-zone:hover .under-mark,.wall-v2 .peel-zone:focus .under-mark{opacity:.9}
.wall-v2 .wall-meta{position:absolute;z-index:15;left:24px;bottom:50px;display:flex;flex-direction:column;color:rgba(241,235,220,.58);font-size:8px;line-height:1.6;letter-spacing:.15em;text-transform:uppercase;pointer-events:none}
.wall-v2 .wall-change{position:absolute;z-index:16;right:24px;bottom:49px;display:flex;gap:9px;align-items:center;color:rgba(241,235,220,.60);font-size:8px;letter-spacing:.15em;text-transform:uppercase;transition:color .2s ease}
.wall-v2 .wall-change:hover{color:var(--bone)}.wall-v2 .wall-change i{width:16px;height:16px;border:1px solid currentColor;border-radius:50%;position:relative}.wall-v2 .wall-change i:after{content:'';position:absolute;width:4px;height:4px;border-top:1px solid currentColor;border-right:1px solid currentColor;right:-1px;top:1px;transform:rotate(22deg)}
.wall-foot{position:absolute;z-index:18;left:50%;bottom:17px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;color:rgba(241,235,220,.52)}
.wall-foot .social{display:flex;gap:13px;align-items:center}.wall-foot .social a{display:block;width:12px;height:12px;opacity:.7;transition:opacity .2s ease,transform .2s ease}.wall-foot .social a:hover{opacity:1;transform:translateY(-1px)}.wall-foot .social svg{width:100%;height:100%;fill:currentColor}
.wall-foot-links{display:flex;gap:12px;font-size:7px;letter-spacing:.13em;text-transform:lowercase}.wall-foot-links a{opacity:.7}.wall-foot-links a:hover{opacity:1}
@media(max-width:760px){
  .wall-top{top:12px;right:11px}.wall-cart{width:36px;height:36px}
  .wall-v2 .wall-frame{inset:-18px;background-position:center center}
  .wall-v2 .wall-meta{left:14px;bottom:46px;font-size:7px}.wall-v2 .wall-change{right:14px;bottom:46px;font-size:7px}.wall-v2 .wall-change span{display:none}
  .wall-foot{bottom:15px;gap:14px}.wall-foot .social{gap:11px}.wall-foot-links{gap:9px;font-size:6px}
  .wall-point{width:30px;height:30px}.hot-label{left:39px;font-size:8px;padding:6px 8px 5px}
  .wall-v2 .peel-zone{width:88px;height:82px}
}
@media(prefers-reduced-motion:reduce){.wall-v2 .wall-frame,.wall-point,.hot-label,.wall-v2 .peel-paper{transition:none!important}}

/* ===== WALL HOME V3 — art-directed, minimal, fast ===== */
body.wall-home.wall-v3{height:100vh;height:100svh;overflow:hidden;background:#080808;color:var(--bone)}
.wall-v3 .bar,.wall-v3 .wall-bar,.wall-v3 .name-center{display:none!important}
.wall-v3 .wall-top{position:fixed;z-index:80;right:20px;top:14px;pointer-events:none}
.wall-v3 .wall-cart{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:rgba(241,235,220,.7);transition:opacity .2s ease,color .2s ease}
.wall-v3 .wall-cart:hover{color:var(--bone)}
.wall-v3 .wall-cart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.15}.wall-v3 .wall-cart b{font-size:8px;margin-left:4px;font-weight:400}
.wall-v3 .wall-stage{position:fixed;inset:0;overflow:hidden;background:#050505;isolation:isolate}
.wall-v3 .wall-frame{position:absolute;inset:-12px;opacity:0;background-size:cover;background-position:center;transform:translate3d(0,0,0) scale(1.018);transition:opacity .62s ease,transform .7s cubic-bezier(.2,.65,.2,1);pointer-events:none;will-change:transform,opacity}
.wall-v3 .wall-frame.is-active{opacity:1}
.wall-v3 .wall-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 47%,transparent 52%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.38) 100%)}
.wall-v3 .wall-top-fade{position:absolute;z-index:3;left:0;right:0;top:0;height:102px;background:linear-gradient(to bottom,rgba(5,5,5,.88),rgba(5,5,5,.30) 58%,transparent);pointer-events:none}
.wall-v3 .wall-bottom-fade{position:absolute;z-index:3;left:0;right:0;bottom:0;height:104px;background:linear-gradient(to top,rgba(5,5,5,.76),rgba(5,5,5,.18) 58%,transparent);pointer-events:none}

/* integrated wall markers: symbols only at rest, labels appear only on hover / first tap */
.wall-v3 .wall-point{position:absolute;z-index:20;width:32px;height:32px;transform:translate(-50%,-50%);display:block;outline:0;transition:left .55s cubic-bezier(.2,.65,.2,1),top .55s cubic-bezier(.2,.65,.2,1),translate .12s linear}
.wall-v3 .wall-point:before{content:'';position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(241,235,220,.13),rgba(241,235,220,0) 68%);opacity:.36;pointer-events:none}
.wall-v3 .sigil{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(11,10,10,.38);border:1px solid rgba(241,235,220,.42);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);box-shadow:0 2px 10px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.02);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.wall-v3 .sigil svg{width:17px;height:17px;stroke:rgba(241,235,220,.95);fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.wall-v3 .point-acc .sigil svg{width:18px;height:18px}
.wall-v3 .wall-point:hover .sigil,.wall-v3 .wall-point:focus-visible .sigil,.wall-v3 .wall-point.is-revealed .sigil{transform:scale(1.08);background:rgba(8,8,8,.78);border-color:rgba(241,235,220,.8);box-shadow:0 4px 16px rgba(0,0,0,.28)}
.wall-v3 .hot-label{position:absolute;left:42px;top:50%;min-width:156px;padding:8px 12px 8px 13px;background:rgba(9,9,9,.88);border:1px solid rgba(241,235,220,.08);color:var(--bone);opacity:0;pointer-events:none;transform:translateY(-50%) translateX(-7px);transition:opacity .16s ease,transform .18s ease;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.wall-v3 .hot-label:before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:10px solid rgba(9,9,9,.88)}
.wall-v3 .hot-label strong{display:block;font-weight:400;font-size:8px;line-height:1.1;letter-spacing:.18em;text-transform:lowercase}
.wall-v3 .hot-label small{display:block;margin-top:5px;font-size:6.5px;line-height:1.4;letter-spacing:.09em;opacity:.58;text-transform:none;white-space:normal}
.wall-v3 .wall-point:hover .hot-label,.wall-v3 .wall-point:focus-visible .hot-label,.wall-v3 .wall-point.is-revealed .hot-label{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}

/* peel is a real peel, not a label */
.wall-v3 .peel-zone{position:absolute;z-index:19;width:110px;height:98px;transform:translate(-12%,-12%);perspective:900px;background:none;border:0;cursor:pointer;transition:left .5s ease,top .5s ease;outline:0}
.wall-v3 .peel-zone .peel-pin{position:absolute;right:7px;top:4px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(11,10,10,.34);border:1px solid rgba(241,235,220,.40);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.wall-v3 .peel-zone .peel-pin svg{width:15px;height:15px;stroke:rgba(241,235,220,.92);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.wall-v3 .peel-tip{position:absolute;right:42px;top:8px;min-width:138px;padding:8px 11px 8px 12px;background:rgba(9,9,9,.88);border:1px solid rgba(241,235,220,.08);color:var(--bone);opacity:0;pointer-events:none;transform:translateX(-7px);transition:opacity .16s ease,transform .18s ease;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.wall-v3 .peel-tip:after{content:'';position:absolute;left:100%;top:14px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:9px solid rgba(9,9,9,.88)}
.wall-v3 .peel-tip strong{display:block;font-size:8px;font-weight:400;letter-spacing:.17em;text-transform:lowercase}
.wall-v3 .peel-tip small{display:block;margin-top:5px;font-size:6.5px;line-height:1.35;letter-spacing:.08em;opacity:.58}
.wall-v3 .peel-zone:hover .peel-tip,.wall-v3 .peel-zone:focus-visible .peel-tip,.wall-v3 .peel-zone.is-peeled .peel-tip{opacity:1;transform:none}
.wall-v3 .under-layer{position:absolute;right:10px;top:14px;width:76px;height:56px;padding:9px 10px;background:linear-gradient(180deg,#11100f,#171514);color:rgba(241,235,220,.92);opacity:.0;display:flex;align-items:flex-end;justify-content:space-between;border-radius:1px;box-shadow:0 6px 16px rgba(0,0,0,.22);overflow:hidden}
.wall-v3 .under-layer:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%);mix-blend-mode:screen}
.wall-v3 .under-orbs{position:absolute;left:10px;top:11px;display:flex;gap:5px}.wall-v3 .under-orbs i{width:6px;height:6px;background:currentColor;border-radius:50%}
.wall-v3 .under-copy{position:relative;z-index:1;font-size:7px;line-height:1.2;letter-spacing:.16em;text-transform:lowercase}.wall-v3 .under-copy small{display:block;opacity:.56;font-size:5.5px;letter-spacing:.13em;text-transform:uppercase}
.wall-v3 .peel-paper{position:absolute;right:2px;top:2px;width:78px;height:58px;background:linear-gradient(135deg,#8c7f6a,#d3c7b2 64%,#7b6f5d);clip-path:polygon(0 0,100% 0,100% 100%);transform-origin:100% 0;transition:transform .5s cubic-bezier(.2,.75,.18,1),filter .3s ease;filter:drop-shadow(-5px 7px 6px rgba(0,0,0,.30))}
.wall-v3 .peel-zone:hover .peel-paper,.wall-v3 .peel-zone:focus-visible .peel-paper,.wall-v3 .peel-zone.is-peeled .peel-paper{transform:rotateY(-130deg) rotateZ(-6deg)}
.wall-v3 .peel-zone:hover .under-layer,.wall-v3 .peel-zone:focus-visible .under-layer,.wall-v3 .peel-zone.is-peeled .under-layer{opacity:1}

.wall-v3 .wall-meta{position:absolute;z-index:16;left:22px;bottom:28px;display:flex;flex-direction:column;gap:1px;color:rgba(241,235,220,.67);font-size:8px;line-height:1.45;letter-spacing:.15em;text-transform:uppercase;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.wall-v3 .wall-city{color:rgba(241,235,220,.92)}.wall-v3 .wall-withheld{opacity:.68}.wall-v3 .wall-year{opacity:.46}
.wall-v3 .wall-switch{position:absolute;z-index:18;right:22px;bottom:26px;display:flex;align-items:center;gap:9px;color:rgba(241,235,220,.64)}
.wall-v3 .wall-switch button{color:inherit;font:400 8px/1 Syne,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:color .18s ease,opacity .18s ease}.wall-v3 .wall-switch button:hover{color:var(--bone)}
.wall-v3 .wall-prev,.wall-v3 .wall-next{width:23px;height:23px;border:1px solid rgba(241,235,220,.28);border-radius:50%;font-size:11px!important;letter-spacing:0!important;display:grid;place-items:center}.wall-v3 .wall-prev:hover,.wall-v3 .wall-next:hover{border-color:rgba(241,235,220,.7)}
.wall-v3 .wall-dots{display:flex;gap:5px;align-items:center}.wall-v3 .wall-dots i{width:15px;height:1px;background:rgba(241,235,220,.25);transition:background .25s ease,width .25s ease}.wall-v3 .wall-dots i.is-active{width:23px;background:rgba(241,235,220,.85)}
.wall-v3 .wall-change{margin-left:4px;opacity:.72}

.wall-v3 .wall-foot{position:absolute;z-index:18;left:50%;transform:translateX(-50%);bottom:18px;display:flex;align-items:center;gap:18px;color:rgba(241,235,220,.52)}
.wall-v3 .wall-foot .social{display:flex;gap:13px;align-items:center}.wall-v3 .wall-foot .social a,.wall-v3 .wall-foot-links a{font-size:7px;line-height:1;letter-spacing:.13em;text-transform:lowercase;opacity:.7;transition:opacity .18s ease}.wall-v3 .wall-foot .social a:hover,.wall-v3 .wall-foot-links a:hover{opacity:1}.wall-v3 .wall-foot-links{display:flex;gap:12px}

/* real found notes; softened into the wall instead of floating cards */
.wall-v3 .wall-note{position:absolute;z-index:9;display:none;color:rgba(39,33,26,.74);font:400 9px/1.55 Syne,sans-serif;letter-spacing:.02em;pointer-events:none;text-transform:lowercase;mix-blend-mode:multiply;filter:saturate(.92)}
.wall-v3 .wall-note.is-active{display:block}.wall-v3 .wall-note span{display:block;margin-bottom:6px;font-size:6px;letter-spacing:.18em;text-transform:uppercase;opacity:.62}
.wall-v3 .wall-note:before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 15% 14%,rgba(255,255,255,.18),transparent 22%),
  radial-gradient(circle at 72% 78%,rgba(0,0,0,.06),transparent 34%),
  linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 26%),
  linear-gradient(180deg,#d0c3aa,#b9a98e);
  opacity:.96}
.wall-v3 .wall-note:after{content:'';position:absolute;left:10px;right:10px;top:-6px;height:10px;background:linear-gradient(90deg,transparent 0 7%,rgba(101,85,57,.34) 7% 29%,transparent 29% 40%,rgba(101,85,57,.26) 40% 58%,transparent 58% 100%);opacity:.42;filter:blur(.2px)}
.wall-v3 .wall-note>*{position:relative;z-index:1}
.wall-v3 .wall-note-hk{left:60.8%;top:47.8%;width:194px;padding:18px 18px 15px;clip-path:polygon(3% 4%,97% 0,100% 90%,94% 98%,5% 100%,0 10%);transform:rotate(-1.2deg)}
.wall-v3 .wall-note-nyc{left:14.5%;top:58.2%;width:190px;padding:17px 17px 15px;clip-path:polygon(4% 0,97% 4%,100% 91%,94% 100%,0 96%,2% 8%);transform:rotate(.9deg)}
.wall-v3 .wall-note-london{left:54%;top:61%;width:185px;padding:17px 17px 14px;clip-path:polygon(0 5%,94% 0,100% 95%,5% 100%);transform:rotate(-.8deg)}
@media(max-width:760px){
  .wall-v3 .wall-top{top:8px;right:8px}.wall-v3 .wall-cart{width:38px;height:38px}
  .wall-v3 .wall-frame{inset:-18px;background-position:center}
  .wall-v3 .wall-top{top:8px;right:8px}.wall-v3 .wall-cart{width:38px;height:38px}
  .wall-v3 .wall-frame{inset:-18px;background-position:center}
  .wall-v3 .wall-point{width:34px;height:34px}.wall-v3 .sigil svg{width:18px;height:18px}
  .wall-v3 .hot-label{left:43px;min-width:144px;padding:8px 11px}.wall-v3 .hot-label strong{font-size:8px}.wall-v3 .hot-label small{font-size:6.5px}
  .wall-v3 .wall-meta{left:13px;bottom:54px;font-size:7px}.wall-v3 .wall-switch{right:13px;bottom:56px;gap:7px}.wall-v3 .wall-change span{display:none}
  .wall-v3 .wall-foot{left:50%;bottom:12px;gap:10px}.wall-v3 .wall-foot .social{gap:9px}.wall-v3 .wall-foot .social a,.wall-v3 .wall-foot-links a{font-size:6px}.wall-v3 .wall-foot-links{gap:8px}
  .wall-v3 .wall-note{transform:scale(.82);transform-origin:top left}
  .wall-v3 .wall-note-hk{left:47%;top:49%}.wall-v3 .wall-note-nyc{left:6%;top:61%}.wall-v3 .wall-note-london{left:44%;top:63%}
  .wall-v3 .peel-zone{width:94px;height:86px}
  .wall-v3 .peel-zone .peel-pin{width:32px;height:32px}
  .wall-v3 .peel-tip{right:40px;min-width:118px;padding:7px 10px}
  .wall-v3 .under-layer{width:66px;height:49px;padding:8px 9px}.wall-v3 .peel-paper{width:68px;height:52px}
}
@media(prefers-reduced-motion:reduce){.wall-v3 .wall-frame,.wall-v3 .wall-point,.wall-v3 .hot-label,.wall-v3 .peel-paper,.wall-v3 .sigil,.wall-v3 .peel-tip{transition:none!important}}

/* ================= WALL V4 — integrated archive navigation ================= */
.wall-v3 .wall-point{
  width:54px;height:54px;background:transparent;border:0;border-radius:50%;
  cursor:pointer;z-index:22;
}
.wall-v3 .wall-point:before,.wall-v3 .wall-point .sigil{display:none!important}
.wall-v3 .wall-point .hot-label{
  left:48px;top:50%;min-width:158px;padding:8px 12px 9px 13px;
  background:rgba(8,8,8,.90);border:1px solid rgba(241,235,220,.07);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)
}
.wall-v3 .wall-point .hot-label:before{
  border-top-width:7px;border-bottom-width:7px;border-right-width:9px;
  border-right-color:rgba(8,8,8,.90)
}
.wall-v3 .wall-point:hover .hot-label,.wall-v3 .wall-point:focus-visible .hot-label,.wall-v3 .wall-point.is-revealed .hot-label{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.wall-v3 .wall-point:focus-visible{outline:1px solid rgba(241,235,220,.28);outline-offset:3px}

/* actual poster peel: no resting icon, the corner itself moves */
.wall-v3 .peel-zone{width:126px;height:108px;z-index:21;cursor:pointer;background:transparent;overflow:visible}
.wall-v3 .peel-zone .peel-pin{display:none!important}
.wall-v3 .peel-tip{right:86px;top:28px;min-width:128px}
.wall-v3 .under-layer{right:7px;top:8px;width:91px;height:69px;padding:9px 10px;opacity:0;transform:rotate(-2deg);transition:opacity .18s ease}
.wall-v3 .peel-paper{right:0;top:0;width:96px;height:77px;
  background:linear-gradient(132deg,rgba(122,109,91,.98),rgba(213,203,182,.98) 62%,rgba(102,88,72,.98));
  clip-path:polygon(0 0,100% 0,100% 100%);transform-origin:100% 0;
  filter:drop-shadow(-6px 8px 7px rgba(0,0,0,.34));opacity:.88
}
.wall-v3 .peel-zone:hover .peel-paper,.wall-v3 .peel-zone:focus-visible .peel-paper,.wall-v3 .peel-zone.is-peeled .peel-paper{transform:rotateY(-142deg) rotateZ(-7deg)}
.wall-v3 .peel-zone:hover .under-layer,.wall-v3 .peel-zone:focus-visible .under-layer,.wall-v3 .peel-zone.is-peeled .under-layer{opacity:.94}

/* first layout: metadata left, wall switch right */
.wall-v3 .wall-meta{left:24px;bottom:28px;font-size:8px;gap:1px}
.wall-v3 .wall-switch{left:auto!important;right:24px;bottom:27px;gap:8px}
.wall-v3 .wall-change{order:-1;margin:0 6px 0 0;opacity:.74}
.wall-v3 .wall-prev,.wall-v3 .wall-next{width:22px;height:22px}
.wall-v3 .wall-dots{gap:4px}.wall-v3 .wall-dots i{width:12px}.wall-v3 .wall-dots i.is-active{width:19px}

/* social marks only, centered at the bottom */
.wall-v3 .wall-foot{left:50%!important;right:auto!important;bottom:20px!important;transform:translateX(-50%)!important;display:flex;gap:16px;align-items:center;color:rgba(241,235,220,.62)}
.wall-v3 .wall-foot a{width:23px;height:23px;display:grid;place-items:center;opacity:.62;transition:opacity .18s ease,transform .18s ease}
.wall-v3 .wall-foot a:hover{opacity:1;transform:translateY(-1px)}
.wall-v3 .wall-foot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.wall-v3 .wall-foot svg .fill{fill:currentColor;stroke:none}
.wall-v3 .wall-foot-links,.wall-v3 .wall-foot .social{display:contents}

/* all earlier floating paper UI is gone */
.wall-v3 .wall-note,.wall-v3 .wall-local{display:none!important}

@media(max-width:760px){
  .wall-v3 .wall-point{width:58px;height:58px}
  .wall-v3 .wall-point .hot-label{left:49px;min-width:142px;padding:8px 10px}
  .wall-v3 .wall-meta{left:13px;bottom:58px;font-size:7px}
  .wall-v3 .wall-switch{right:12px!important;bottom:58px;gap:6px}
  .wall-v3 .wall-change{margin-right:4px}.wall-v3 .wall-change span{display:none}
  .wall-v3 .wall-foot{bottom:16px!important;gap:14px}
  .wall-v3 .wall-foot a{width:28px;height:28px}.wall-v3 .wall-foot svg{width:16px;height:16px}
  .wall-v3 .peel-zone{width:112px;height:96px}
  .wall-v3 .peel-paper{width:84px;height:68px}.wall-v3 .under-layer{width:80px;height:60px}
  .wall-v3 .peel-tip{right:73px;top:25px;min-width:112px}
}