/* ==========================================================================
   Home — one screen, no scroll. After the opening, every tattoo is a thin
   slice in a strip; a slice expands into the piece with its text.
   The photos in the opening and in an open piece are drawn by the WebGL
   stage (js/stage.js) sitting behind this DOM.
   ========================================================================== */

html, body.exp { height: 100%; overflow: hidden; overscroll-behavior: none; }
.is-deck .home { opacity: 0; visibility: hidden; }
.exp { background: var(--bg); }

.stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.shade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(11,11,10,0.94) 0%, rgba(11,11,10,0.6) 26%, rgba(11,11,10,0) 56%),
              linear-gradient(to bottom, rgba(11,11,10,0.6) 0%, rgba(11,11,10,0) 16%);
  transition: opacity 0.9s var(--ease);
}
.is-intro .shade, .is-piece .shade { opacity: 1; }
@media (min-width: 900px) { .is-piece .shade { opacity: 0; } }

/* ─────────── loader ─────────── */
.loader {
  position: fixed; inset: 0; z-index: 120; background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.9s var(--ease), visibility 0s 0.9s;
}
.loader__n {
  font: 400 clamp(120px, 30vw, 320px)/0.8 var(--serif);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--bone);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.no-stage .loader { display: none; }

/* Anton's capitals rise ~0.04em above a 0.8 line box and commas drop below it,
   so every clipping wrapper carries headroom that its negative margins cancel */
.intro__line, .w { overflow: clip; padding: 0.16em 0 0.22em; margin: -0.16em 0 -0.22em; }
.w { display: inline-block; vertical-align: top; }
.w > span { display: inline-block; transform: translateY(150%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 80ms); }

/* ─────────── the opening ─────────── */
.intro {
  position: fixed; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px;
  padding: 0 var(--gutter) calc(34px + env(safe-area-inset-bottom));
  transition: opacity 0.8s var(--ease), visibility 0s 0.8s;
}
.intro__name {
  font: 400 clamp(88px, 25.5vw, 440px)/0.88 var(--serif);
  text-transform: uppercase; letter-spacing: -0.012em; margin-left: -0.01em;
}
.intro__line { display: block; }
.intro__line > span { display: inline-block; transform: translateY(150%); transition: transform 1.6s var(--ease); }
.intro__line--b > span { transition-delay: 0.12s; }
.intro__place, .intro__skip { opacity: 0; transition: opacity 1.2s var(--ease) 0.7s; color: var(--bone-2); }
.intro__skip {
  position: absolute; right: var(--gutter); bottom: calc(34px + env(safe-area-inset-bottom));
  padding: 10px 0; color: var(--bone);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.is-named .intro__line > span { transform: none; }
.is-named .intro__place, .is-named .intro__skip { opacity: 1; }
.is-home .intro, .is-piece .intro { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 900px) {
  .intro { justify-content: center; padding-bottom: 0; }
  .intro__name { width: 100%; font-size: clamp(140px, 15.6vw, 380px); display: flex; justify-content: space-between; align-items: flex-end; }
  .intro__line:first-child { transform: translateY(-38%); }
  .intro__line--b { transform: translateY(38%); }
  .intro__place { position: absolute; left: var(--gutter); bottom: 5vh; }
  .intro__skip { bottom: 5vh; }
}

/* ─────────── top bar ─────────── */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(18px + env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand {
  --big: min(23vh, 12.2vw);               /* the wild size (fits the left half); JS scales it into the corner */
  position: fixed; left: var(--gutter); top: 0; z-index: 61;
  display: grid; justify-items: start;
  font: 400 var(--big)/0.88 var(--serif);
  text-transform: uppercase; letter-spacing: -0.012em;
  transform-origin: 0 0; will-change: transform;
  opacity: 0; transition: opacity 0.9s var(--ease), color 1.1s var(--ease);
}
.brand span { display: block; }
.is-home .brand, .is-deck .brand { opacity: 1; }
.top__spacer { width: 1px; }
@media (max-width: 899px) { .brand { --big: 25vw; } }
.top__nav { display: flex; align-items: center; gap: 18px; }
.top__link {
  font: 500 12px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bone); padding: 8px 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(235, 230, 221, 0.4);
  transition: text-decoration-color 0.3s, color 0.3s;
}
.top__link:hover { text-decoration-color: currentColor; }

/* ─────────── home: the strip ─────────── */
.home {
  position: fixed; inset: 0; z-index: 2; touch-action: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 56px) 0 calc(22px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0s 0.7s;
}
.is-home .home { opacity: 1; visibility: visible; transition-delay: 0s; }

.strip {
  --w: clamp(48px, 5.6vw, 100px);
  --h: min(54vh, calc(var(--w) * 4.6));
  position: absolute; left: 0; top: 50%;
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(6px, 0.8vw, 12px);
  width: max-content;
  transform: translate3d(var(--sx, 50vw), -50%, 0);
  will-change: transform;
}
.slice {
  flex: 0 0 var(--w); height: var(--h);
  transition: flex-basis 0.7s var(--ease), opacity 0.6s var(--ease), transform 0.9s var(--ease);
  opacity: 0; transform: translateY(46px);
}
.is-home .slice { opacity: 1; transform: none; transition-delay: 0s, calc(var(--i) * 45ms + 250ms), calc(var(--i) * 45ms + 250ms); }
.slice button { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--bg-2); transform-origin: 50% 50%; will-change: transform; }
.slice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slice__colour { opacity: 0; transition: opacity 0.7s var(--ease); }
.slice.is-gone button { visibility: hidden; }          /* the stage has taken over this photo */
.is-piece .slice { opacity: 0; transform: translateY(30px); transition-delay: 0s; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .strip:hover .slice:not(:hover) { opacity: 0.45; }
  .slice:hover { flex-basis: calc(var(--w) * 2.3); }
  .slice:hover .slice__colour { opacity: 1; }
}
.slice button:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

/* phones: the name owns the top, the strip sits lower and moves under the thumb */
@media (max-width: 899px) {
  /* phones: js/exp.js places and sizes the strip in the space between the name and the links */
  .strip { --w: 66px; --h: 290px; top: 61%; }
  .strip:hover .slice:not(:hover) { opacity: 1; }
}

.home__label {
  position: absolute; left: var(--x0, 53vw); top: calc(50% + min(27vh, 250px) + 18px);
  min-height: 18px; margin: 0;
  display: flex; gap: 14px; color: var(--bone-2);
}
.home__label b { font-weight: 500; color: var(--bone); }
.home__foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 0 var(--gutter); margin-top: clamp(18px, 5vh, 60px);
}
.home__creed { margin: 0; color: var(--bone-2); line-height: 1.35; }
.home__creed span { display: block; margin-top: 6px; color: var(--ash); }
.home__links { display: grid; justify-items: end; gap: 2px; text-align: right; }
.home__links .label { margin-top: 8px; }
.home__label, .home__foot { opacity: 0; transition: opacity 0.9s var(--ease) 0.9s; }
.is-home .home__label, .is-home .home__foot { opacity: 1; }

/* ─────────── the deck (after aristidebenoist.com's projects view) ───────────
   Every piece is a card on one line. The centre card is large and in colour,
   its neighbours small and in grey. The title is set huge BEHIND the centre
   card, so the photo overlaps it like a magazine cover and the work itself is
   never covered. Details sit underneath: a lettered table left of centre, the
   note right of centre, the call to action centred under the card. */
.deck {
  --cw: min(calc(64vh * 0.64), 34vw);       /* centre card width  */
  --ch: 64vh;                                 /* centre card height */
  --cy: 44vh;                                 /* centre card middle */
  position: fixed; inset: 0; z-index: 4;
  background: var(--deck-bg, var(--bg));
  color: var(--deck-fg, var(--bone));
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0s 0.6s, background-color 1.1s var(--ease), color 1.1s var(--ease);
}
.deck[hidden] { display: none; }
.deck .top__link { color: var(--deck-fg, var(--bone)); text-decoration-color: var(--deck-mute, rgba(235,230,221,.4)); transition: color 1.1s var(--ease), text-decoration-color 1.1s; }
.is-deck .top__link, .is-deck .brand { color: var(--deck-fg, var(--bone)); transition: color 1.1s var(--ease); }
.is-deck .cursor { background: var(--deck-fg, var(--bone)); }
.is-deck .cursor span { color: var(--deck-bg, var(--bg)); }
.is-deck .deck { opacity: 1; visibility: visible; transition-delay: 0s; }
.deck__count {
  position: absolute; left: 50%; top: calc(26px + env(safe-area-inset-top)); transform: translateX(-50%);
  font: 400 22px/1 var(--serif); letter-spacing: 0.01em; display: flex; gap: 8px;
}
.deck__count span { color: var(--deck-mute, var(--ash)); }

.deck__title {
  position: absolute; left: 0; right: 0; top: var(--cy); transform: translateY(-50%);
  z-index: 95; pointer-events: none;          /* above the neighbours (≤90), under the centre card (100) */
  font: 400 min(37.5vh, 19vw)/0.88 var(--serif);
  text-transform: uppercase; letter-spacing: -0.015em; text-align: center;
  padding: 0;
  color: var(--deck-fg, var(--bone));
  transition: color 1.1s var(--ease);
}
.deck__title .line { display: block; overflow: clip; padding: 0.16em 0 0.22em; margin: -0.16em 0 -0.22em; white-space: nowrap; }
.deck__title .line.split { display: grid; grid-template-columns: 1fr var(--gapw, 40vh) 1fr; padding-left: 0; padding-right: 0; }
.deck__title .l { text-align: right; }
.deck__title .r { text-align: left; }
.deck__title .gap { display: block; }
.deck__title .ch {
  display: inline-block; transform: translate3d(0, 100%, 0); opacity: 0;
  transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease-out;
  transition-delay: calc(var(--c) * 16ms + 60ms);
}
.deck__title.is-in .ch { transform: none; opacity: 1; }
.deck__title.is-out .ch {
  transform: translate3d(0, -100%, 0); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.45s ease-in;
  transition-delay: calc(var(--c) * 8ms);
}

.deck__track { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }   /* no z-index: cards stack with the title */
.deck__track.is-dragging { cursor: grabbing; }
.card {
  position: absolute; left: 50%; top: var(--cy);
  width: var(--cw); height: var(--ch);
  margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.card { overflow: hidden; }
.card .bloom { position: absolute; inset: 0; aspect-ratio: auto; }
.card .bloom img, .card__angle {
  transition: none;
  transform: translate3d(calc(var(--px, 0) * -6%), 0, 0) scale(1.12);   /* the photo drifts inside its frame */
}
.card .bloom__layer {
  visibility: visible !important; animation: none !important;
  -webkit-mask: none !important; mask: none !important;
  opacity: var(--col, 0);
}
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: var(--deck-bg, var(--bg)); opacity: var(--dim, 0);
}
.card__angle {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.card__angle.is-on { opacity: 1; }

.deck__angles {
  position: absolute; left: 50%; top: calc(var(--cy) + var(--ch) / 2 + 14px); transform: translateX(-50%);
  z-index: 120; display: flex; gap: 14px;
}
.deck__angles button { font: 500 11px/1 var(--mono); letter-spacing: 0.05em; color: var(--deck-mute, var(--ash)); padding: 6px 2px; transition: color 0.3s; }
.deck__angles button[aria-current='true'] { color: var(--deck-fg, var(--bone)); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.deck__cta { position: absolute; left: 50%; top: calc(var(--cy) + var(--ch) / 2 + 50px); transform: translateX(-50%); z-index: 120; }

.deck__meta {
  position: absolute; z-index: 120; margin: 0;
  left: 21.5vw; top: calc(var(--cy) + var(--ch) / 2 + 58px);
  display: grid; gap: 2px; min-width: 28vw;
}
.deck__meta div { display: grid; grid-template-columns: 24px 110px 1fr; }
.deck__meta span { font-size: 7px; line-height: 13px; color: var(--deck-mute, var(--ash)); }
.deck__meta dt { color: var(--deck-mute, var(--ash)); }
.deck__meta dd { margin: 0; color: var(--deck-fg, var(--bone)); }
.deck__note {
  position: absolute; z-index: 120; left: 60vw; top: calc(var(--cy) + var(--ch) / 2 + 58px);
  width: min(260px, 22vw); line-height: 1.35; color: var(--deck-fg, var(--bone-2)); opacity: 0.8;
}
.deck__nav { position: absolute; right: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 120; display: flex; gap: 22px; }
.deck__close { position: absolute; left: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 120; }
.deck__meta, .deck__note, .deck__angles, .deck__count {
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease), color 1.1s var(--ease);
}
.deck__cta, .deck__nav, .deck__close { transition: opacity 0.5s var(--ease); }
.deck.is-swapping .deck__meta, .deck.is-swapping .deck__note, .deck.is-swapping .deck__angles, .deck.is-swapping .deck__count {
  opacity: 0; transition-duration: 0.24s, 0.3s, 1.1s;
}
.deck.is-swapping .deck__meta, .deck.is-swapping .deck__note { transform: translate3d(0, 6px, 0); }
.deck:not(.is-ready) .deck__meta, .deck:not(.is-ready) .deck__note, .deck:not(.is-ready) .deck__angles,
.deck:not(.is-ready) .deck__cta, .deck:not(.is-ready) .deck__count, .deck:not(.is-ready) .deck__nav, .deck:not(.is-ready) .deck__close { opacity: 0; }

/* phones: the card owns the top half; the title and details stack under it */
@media (max-width: 899px) {
  /* the card takes whatever height is left once the title, details, note and button are placed */
  .deck {
    --ch: max(200px, min(47svh, calc(64vw / 0.62), calc(100svh - 400px - 23vw)));
    --cw: calc(var(--ch) * 0.62);
    --cy: calc(var(--nav-h) + 44px + var(--ch) / 2);
    --below: calc(var(--cy) + var(--ch) / 2);
  }
  .deck__track { touch-action: none; }
  .deck__title {
    top: calc(var(--below) + 18px); transform: none; z-index: 120;
    left: var(--gutter); right: var(--gutter);
    font-size: 12.5vw; text-align: left;
  }
  /* the counter moves to the bottom bar, between All work and Prev / Next */
  .deck__count { top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); font-size: 18px; }
  .deck__angles { top: calc(var(--below) + 12px); left: auto; right: var(--gutter); transform: none; }
  .deck__meta { left: var(--gutter); right: var(--gutter); top: calc(var(--below) + 38px + 23vw); min-width: 0; }
  .deck__meta div { grid-template-columns: 16px 92px 1fr; }
  .deck__note { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--below) + 114px + 23vw); }
  .deck__cta { top: auto; bottom: calc(62px + env(safe-area-inset-bottom)); }
}
@media (max-width: 899px) and (max-height: 760px) {
  .deck__note { display: none; }
  .deck { --ch: max(190px, min(47svh, calc(64vw / 0.62), calc(100svh - 348px - 23vw))); }
}

/* everything on screen is black on the red once it floods */
.is-flooded .brand, .is-flooded .top__link { color: var(--on-blood); text-decoration-color: rgba(11,11,10,0.5); }
.is-flooded .top .btn--blood { background: var(--on-blood); color: var(--blood); }

/* ─────────── custom cursor (fine pointers only) ─────────── */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-stage .cursor {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0; z-index: 150;
    width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 999px;
    background: var(--bone); pointer-events: none;
    transition: width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), background-color 0.35s, opacity 0.3s;
    will-change: transform;
  }
  .cursor span { font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg); opacity: 0; transition: opacity 0.25s; white-space: nowrap; }
  .cursor.has-label { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .cursor.has-label span { opacity: 1; transition-delay: 0.1s; }
  .cursor.is-book { background: var(--blood); }
  .cursor.is-book span { color: var(--on-blood); }
  .cursor.is-hidden { opacity: 0; }
  /* custom cursor removed: keep the system pointer */
}

/* ─────────── fallback: no WebGL / reduced motion ─────────── */
.no-stage .stage, .no-stage .shade, .no-stage .intro { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slice, .w > span, .intro__line > span { transition: none !important; }
}
@media (max-width: 899px) and (max-height: 700px) {

  .deck__title { font-size: 10.5vw; }
  .deck__meta { top: calc(var(--below) + 32px + 20vw); }
}

@media (max-width: 899px) {
  .home__label { top: var(--label-y, calc(61% + 160px)); }
  .home__creed { display: none; }
  .home__foot { justify-content: flex-end; }
}

/* the name's two words, flying from the opening into the big name's place */
.flyer {
  position: fixed; z-index: 70; pointer-events: none;
  display: inline-block; transform-origin: 0 0; will-change: transform;
  font-family: var(--serif); font-weight: 400; line-height: 0.88;
  text-transform: uppercase; letter-spacing: -0.012em; white-space: nowrap;
  color: var(--bone);
}
/* system pointer on everything clickable (the custom cursor is gone) */
.home button, .card, .deck button, .deck a, .top a { cursor: pointer; }