@charset "utf-8";
/* ============================================================
   Blind Faith Tattoo — spec demo for Dead Pixel Design
   Direction B. Contract: ../DIRECTION.md
   Ground is bone, ink is black, dark is punctuation.
   Type stays small and structural; the work carries the page.
   ============================================================ */

:root{
  --night:#100F11;
  --ink:#151416;
  --bone:#EDEAE3;
  --bone-dim:#DDD9D1;
  --red:#C8271D;
  --red-deep:#661414;
  --dust:#8C857A;

  --hair-ink:rgba(21,20,22,.16);
  --hair-bone:rgba(237,234,227,.18);

  --chrome:11px;
  --track:.16em;

  /* Display is a Didone: the thick/thin contrast IS the edge, and the italic
     carries the swagger. Archivo stays, but only small, tracked and structural.
     Archivo 800 uppercase at display size read as a gym ad. */
  --display:'Bodoni Moda', 'Bodoni MT', Didot, 'Times New Roman', serif;
  --grotesk:Archivo, system-ui, -apple-system, sans-serif;
  --gut:clamp(18px,2.4vw,34px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--grotesk);
  font-synthesis-weight:none;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ── shared type utilities ─────────────────────────────── */
.display{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-variation-settings:'opsz' 96;
  font-weight:600;
  letter-spacing:-.022em;
  text-transform:none;
}
.display em{font-style:italic;font-weight:600}
/* the red marks a line, it is never a coloured word */
.mark{position:relative;display:inline-block}
.mark::after{
  content:"";position:absolute;left:0;right:6%;bottom:.02em;height:.055em;
  background:var(--red);
}
.chrome{
  font-size:var(--chrome);letter-spacing:var(--track);
  text-transform:uppercase;font-weight:400;
}
.count{font-variant-numeric:tabular-nums}

/* ── fixed chrome ──────────────────────────────────────── */
/* The chrome floats over the page the whole way down, and the page alternates
   dark and bone. difference-blend alone put nav text straight through section
   headings on an anchor jump, so it carries the ground with it instead. */
.mast{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(18px,4vw,64px);align-items:start;
  padding:16px var(--gut);
  color:var(--bone);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.mast.is-stuck{
  backdrop-filter:blur(9px) saturate(1.05);
  -webkit-backdrop-filter:blur(9px) saturate(1.05);
}
.mast.is-stuck.on-dark{
  background:rgba(16,15,17,.82);color:var(--bone);border-bottom-color:var(--hair-bone);
}
.mast.is-stuck.on-bone{
  background:rgba(237,234,227,.86);color:var(--ink);border-bottom-color:var(--hair-ink);
}
/* anchor jumps must clear the bar */
[id]{scroll-margin-top:76px}
.mast__brand{font-weight:700;letter-spacing:.1em}
.mast__sub{display:block;opacity:.5;margin-top:3px;letter-spacing:.12em;font-weight:400}
.mast nav{display:flex;gap:clamp(14px,2.4vw,38px);flex-wrap:wrap;padding-top:1px}
.mast a{text-decoration:none;opacity:.72;transition:opacity .25s}
.mast a:hover,.mast a:focus-visible{opacity:1}
.mast__book{white-space:nowrap;padding-top:1px}

.progress{
  position:fixed;left:0;top:0;height:1px;width:0;
  background:var(--red);z-index:80;
}

.cue{
  position:fixed;right:var(--gut);bottom:18px;z-index:70;
  display:flex;align-items:center;gap:11px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);opacity:.8;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  text-decoration:none;
  transition:opacity .4s;
}
.cue[hidden]{display:none}
.cue__x{width:11px;height:11px;position:relative;animation:spin 9s linear infinite}
.cue__x::before,.cue__x::after{
  content:"";position:absolute;inset:0;top:50%;border-top:1px solid currentColor;
}
.cue__x::before{transform:rotate(45deg)}
.cue__x::after{transform:rotate(-45deg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── dark surfaces: lit, never flat fill ───────────────── */
.dark{background:var(--night);color:var(--bone);position:relative;isolation:isolate}
.dark::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background-image:url("../img/paper-grain.jpg");background-size:256px;
  mix-blend-mode:overlay;opacity:.055;
}
.dark > *{position:relative;z-index:3}

/* ── the open ──────────────────────────────────────────── */
.open{min-height:100svh;display:grid;place-items:center;overflow:hidden}
.open::before{
  content:"";position:absolute;inset:-20%;z-index:0;
  background:
    radial-gradient(58% 46% at 50% 36%, rgba(200,39,29,.13), transparent 62%),
    radial-gradient(72% 60% at 50% 44%, rgba(214,196,168,.16), transparent 68%);
  filter:blur(2px);
  animation:breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe{from{opacity:.78;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}

.ghost{
  position:absolute;z-index:1;left:50%;top:44%;transform:translate(-50%,-50%);
  font-family:UnifrakturMaguntia,serif;
  font-size:clamp(58px,11.5vw,205px);line-height:.8;white-space:nowrap;
  color:#EDEAE3;opacity:.06;letter-spacing:-.012em;
  pointer-events:none;user-select:none;
}

.subject{position:relative;z-index:3;width:min(52vw,620px);aspect-ratio:3/4;margin-top:1vh}
.subject img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;
  filter:brightness(.80) contrast(1.26) saturate(.96);
  -webkit-mask-image:radial-gradient(ellipse 50% 57% at 50% 44%,#000 34%,transparent 72%);
          mask-image:radial-gradient(ellipse 50% 57% at 50% 44%,#000 34%,transparent 72%);
  animation:rise 24s ease-in-out infinite alternate;
}
@keyframes rise{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.07) translateY(-1.4%)}}

.open__copy{position:absolute;z-index:5;left:var(--gut);bottom:clamp(66px,9vh,116px);max-width:40ch}
.eyebrow{
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--dust);margin-bottom:12px;
}
.open__copy h1{font-family:var(--display);font-variation-settings:'opsz' 96;
  font-size:clamp(46px,6.6vw,104px);font-weight:600;letter-spacing:-.032em;line-height:.92}
.open__copy p{margin-top:14px;font-size:13px;line-height:1.55;color:rgba(237,234,227,.62);max-width:30ch}

/* a quiet counterweight so the frame is not empty on one side */
.open__meta{
  position:absolute;z-index:5;right:var(--gut);bottom:clamp(66px,9vh,116px);
  text-align:right;display:grid;gap:9px;
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  color:rgba(237,234,227,.42);
}
.open__meta a{color:rgba(237,234,227,.72);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.open__meta a:hover{color:var(--red);border-bottom-color:var(--red)}
.open__meta .n{color:var(--bone);font-weight:700}

/* ── fact band ─────────────────────────────────────────── */
.band{
  display:flex;flex-wrap:wrap;gap:8px clamp(20px,3.4vw,52px);align-items:baseline;
  padding:15px var(--gut);
  border-bottom:1px solid var(--hair-ink);
  font-size:var(--chrome);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dust);
}
.band b{color:var(--ink);font-weight:700}
.band .live{color:var(--red)}
.dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--red);margin-right:7px;vertical-align:middle;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

/* ── section heads ─────────────────────────────────────── */
.head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--gut);flex-wrap:wrap;
  padding:clamp(40px,5.4vw,86px) var(--gut) 18px;
  font-size:var(--chrome);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dust);
}
.head h2{font-size:var(--chrome);letter-spacing:var(--track);font-weight:700;color:inherit}
.dark .head h2{color:var(--bone)}
.bone .head h2{color:var(--ink)}

/* ── the work ──────────────────────────────────────────── */
.bone{background:var(--bone);color:var(--ink);position:relative}

.filters{
  display:flex;gap:2px;flex-wrap:wrap;
  padding:0 var(--gut) 16px;
}
.filter{
  appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--chrome);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dust);
  padding:7px 0;margin-right:22px;
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.filter:hover{color:var(--ink)}
.filter[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--red)}
.filter .count{opacity:.55;margin-left:5px}

/* ── the wall ───────────────────────────────────────────
   A mosaic, not a sea. Built from 3-column units where roughly one piece in
   six is a FEATURE at exactly twice the linear size, placed on an irregular
   beat so the eye always has somewhere to land. Emphasis is scroll-driven:
   whatever is crossing the reading line sits at full weight and saturation
   and everything else recedes, continuously, so the wall is never static and
   never uniform. Degrades to a plain grid without JS, stops dead under
   prefers-reduced-motion.

   Registered so --in can transition; --e is written every frame and must not. */
@property --in{syntax:'<number>';inherits:false;initial-value:0}
@property --w {syntax:'<number>';inherits:false;initial-value:1}
.wallwrap{position:relative;isolation:isolate;overflow:hidden;
  padding:0 var(--gut) clamp(34px,4.4vw,64px)}
.wallwrap__ghost{
  position:absolute;z-index:0;left:50%;top:38%;transform:translate(-50%,-50%);
  font-family:UnifrakturMaguntia,serif;
  font-size:clamp(60px,10.5vw,185px);line-height:.8;white-space:nowrap;
  color:var(--ink);opacity:.05;pointer-events:none;user-select:none;
}

/* no-JS / pre-layout fallback */
.grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
}
/* JS took over: a mosaic of 3-column units, one in six at double size */
.grid.is-live{
  display:grid;
  grid-template-columns:repeat(var(--cols,12),1fr);
  grid-auto-rows:var(--rowh,240px);
  grid-auto-flow:row dense;
  gap:var(--wgap,12px);
}
.grid.is-live .piece{aspect-ratio:auto;grid-column:span 3;grid-row:span 1}
.grid.is-live .piece.is-big{grid-column:span 6;grid-row:span 2}

.piece{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bone-dim);
  border:0;padding:0;margin:0;cursor:pointer;display:block;width:100%;
  /* --in: has it entered (transitions once). --w: presence (per frame).
     The floor on --w is high on purpose. This is a portfolio: dimming the
     client's work to 57% to create "emphasis" just makes their tattoos look
     washed out, which is the opposite of the job. Movement carries the life;
     presence only adds depth. The floor drops properly on hover, which is a
     deliberate act by the visitor rather than a state the wall sits in. */
  --in:1;--w:1;--py:0px;
  opacity:calc(var(--in) * (.12 + .88 * var(--w)));
  transform:translate3d(0,calc(var(--py) + (1 - var(--in)) * 14px),0)
            scale(calc(.988 + .012 * var(--w)));
  filter:saturate(calc(.8 + .2 * var(--w)));
  transition:--in .8s var(--ease);
  /* depth: a hairline edge and a grounded shadow, never a card */
  box-shadow:0 1px 0 rgba(21,20,22,.06), 0 10px 26px -18px rgba(21,20,22,.55);
}
.dark .piece{box-shadow:0 1px 0 rgba(237,234,227,.05), 0 14px 34px -20px rgba(0,0,0,.9)}
/* only a scripted page starts them hidden, and only then can it raise them */
.js .piece{--in:0}
.js .piece.is-in{--in:1}
/* Reduced motion drops every transform and the entrance, but KEEPS presence
   and the hover recession, which are opacity and saturation only. The setting
   is about vestibular triggers, not about forbidding depth. */
@media (prefers-reduced-motion: reduce){
  .piece{transform:none;transition:none}
  .piece img{transform:none !important}
}
.piece[hidden]{display:none}
/* a feature piece carries more of the wall, so it holds presence longer */
.piece.is-big{box-shadow:0 1px 0 rgba(21,20,22,.07), 0 22px 54px -26px rgba(21,20,22,.7)}
.dark .piece.is-big{box-shadow:0 1px 0 rgba(237,234,227,.06), 0 26px 64px -28px rgba(0,0,0,.95)}
/* 12% of slack each way, because the parallax inside the frame is now the main
   movement and it needs somewhere to travel */
.piece img{
  position:absolute;left:0;right:0;top:-12%;height:124%;width:100%;object-fit:cover;
  transition:filter .5s var(--ease);
  will-change:transform;
}
.piece figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:30px 12px 11px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#EDEAE3;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.piece::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(237,234,227,0);
  transition:box-shadow .4s var(--ease);
}
/* Hover scale lives in the JS transform, composed with the parallax translate,
   because the frame loop owns img.style.transform. Recession-on-hover is gone
   on purpose: scroll emphasis already does that job continuously, and running
   both made the wall twitch. */
.piece:hover figcaption,.piece:focus-visible figcaption{opacity:1;transform:none}
.piece:hover::after,.piece:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(237,234,227,.34)}

.grid__empty{
  width:100%;padding:40px 0;color:var(--dust);
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
}

/* ── lightbox ──────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:100;
  background:rgba(10,9,11,.94);
  display:none;place-items:center;
  padding:clamp(40px,6vw,70px) clamp(16px,5vw,90px);
}
.lb[open]{display:grid}
.lb::backdrop{background:transparent}
.lb__fig{position:relative;max-width:100%;max-height:100%;display:grid;place-items:center}
.lb__img{
  max-width:100%;max-height:78svh;width:auto;height:auto;object-fit:contain;
  animation:lbin .38s var(--ease) both;
}
@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb__cap{
  margin-top:16px;text-align:center;color:rgba(237,234,227,.66);
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
}
.lb__cap b{color:var(--bone);font-weight:700}
.lb__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  appearance:none;background:none;border:0;cursor:pointer;
  color:var(--bone);font-size:26px;line-height:1;padding:16px 12px;
  opacity:.5;transition:opacity .25s;
}
.lb__btn:hover,.lb__btn:focus-visible{opacity:1}
.lb__prev{left:calc(var(--gut)*-1)}
.lb__next{right:calc(var(--gut)*-1)}
.lb__close{
  position:fixed;top:16px;right:var(--gut);z-index:3;
  appearance:none;background:none;border:0;cursor:pointer;color:var(--bone);
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  opacity:.7;transition:opacity .25s;
}
.lb__close:hover,.lb__close:focus-visible{opacity:1}

/* ── artists ───────────────────────────────────────────── */
.artists{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:2px clamp(24px,3.6vw,64px);padding:0 var(--gut) clamp(14px,1.8vw,26px);
}
.artist{position:relative;padding:clamp(24px,2.6vw,38px) 0 0;border-top:1px solid var(--hair-bone)}
.artist h3{
  font-family:var(--display);font-variation-settings:'opsz' 96;
  font-size:clamp(30px,3.4vw,52px);font-weight:600;letter-spacing:-.026em;
  line-height:.98;text-transform:none;
}
.artist__role{
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--dust);margin:12px 0 16px;
}
.artist p{font-size:14px;line-height:1.62;color:rgba(237,234,227,.66);max-width:44ch}
.artist q{quotes:"“" "”";color:rgba(237,234,227,.88);font-style:italic}
.artist__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:22px}
.artist__strip .sh{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1b1a1c}
.artist__strip img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.86);transition:filter .5s,transform .8s var(--ease);
}
.artist__strip .sh:hover img{filter:brightness(1);transform:scale(1.05)}

/* A type-led panel where a photograph would have been. The only process shot in
   the harvest is 552px wide, leads with an unidentified face and barely shows the
   tattoo, so it earns nothing at this scale. Their own sentence carries it. */
.pull{
  position:relative;isolation:isolate;overflow:hidden;
  margin:clamp(22px,2.8vw,46px) var(--gut) clamp(50px,6vw,90px);
  border-top:1px solid var(--hair-bone);border-bottom:1px solid var(--hair-bone);
  padding:clamp(46px,7vw,104px) 0;
  display:grid;place-items:center;text-align:center;
}
.pull__ghost{
  position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:UnifrakturMaguntia,serif;
  font-size:clamp(70px,13vw,210px);line-height:.8;white-space:nowrap;
  color:var(--bone);opacity:.05;pointer-events:none;user-select:none;
}
.pull blockquote{position:relative;z-index:2;max-width:min(760px,86vw);margin-inline:auto}
.pull blockquote p{
  font-family:var(--display);font-variation-settings:'opsz' 96;
  font-size:clamp(26px,3.8vw,58px);font-weight:600;line-height:1.06;
  letter-spacing:-.028em;color:var(--bone);
}
.pull blockquote p em{font-style:italic}
.pull blockquote cite{
  display:block;margin-top:18px;font-style:normal;
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--red);
}

/* ── flash ─────────────────────────────────────────────── */
.flash{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:0 var(--gut) clamp(40px,5vw,70px)}
.flash .piece{aspect-ratio:3/4}

/* ── visit ─────────────────────────────────────────────── */
.visit{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px clamp(24px,3.6vw,64px);
  padding:0 var(--gut) clamp(50px,6vw,90px);
}
.step{border-top:1px solid var(--hair-ink);padding-top:20px}
.dark .step{border-top-color:var(--hair-bone)}
.step__n{
  font-size:var(--chrome);letter-spacing:var(--track);color:var(--red);
  margin-bottom:14px;font-variant-numeric:tabular-nums;
}
.step h3{font-family:var(--display);font-variation-settings:'opsz' 40;
  font-size:clamp(20px,1.9vw,27px);font-weight:600;letter-spacing:-.018em;margin-bottom:10px}
.step p{font-size:14px;line-height:1.62;color:#4a4650;max-width:38ch}
.dark .step p{color:rgba(237,234,227,.62)}
.step a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(200,39,29,.4)}
.step a:hover{border-bottom-color:var(--red)}

/* ── the shop ──────────────────────────────────────────── */
.shop{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:2px;padding:0 var(--gut) clamp(50px,6vw,90px);align-items:stretch;
}
.shop__copy{padding-right:clamp(10px,2vw,40px)}
.shop__copy h3{
  font-family:var(--display);font-variation-settings:'opsz' 96;
  font-size:clamp(32px,4vw,60px);font-weight:600;letter-spacing:-.028em;
  line-height:.98;text-transform:none;margin-bottom:22px;
}
.shop__copy p{font-size:15px;line-height:1.62;color:rgba(237,234,227,.66);max-width:42ch;margin-bottom:16px}
.shop__addr{
  border-top:1px solid var(--hair-bone);margin-top:26px;padding-top:18px;
  display:grid;gap:11px;
}
.shop__addr a,.shop__addr span{
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  color:rgba(237,234,227,.72);text-decoration:none;
}
.shop__addr a{border-bottom:1px solid transparent;width:fit-content;transition:color .25s,border-color .25s}
.shop__addr a:hover{color:var(--red);border-bottom-color:var(--red)}
.shop__wall{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:2px}
.shop__wall .sh{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1b1a1c}
.shop__wall img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.8);transition:filter .5s,transform .8s var(--ease);
}
.shop__wall .sh:hover img{filter:brightness(1);transform:scale(1.05)}

/* ── booking ───────────────────────────────────────────── */
.book{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(26px,4vw,80px);
  padding:0 var(--gut) clamp(56px,6vw,96px);
}
.book__lede h3{
  font-family:var(--display);font-variation-settings:'opsz' 96;
  font-size:clamp(32px,4vw,60px);font-weight:600;letter-spacing:-.028em;
  line-height:.98;text-transform:none;margin-bottom:20px;
}
.book__lede p{font-size:15px;line-height:1.62;color:#4a4650;max-width:34ch;margin-bottom:16px}
.book__direct{
  border-top:1px solid var(--hair-ink);margin-top:26px;padding-top:18px;display:grid;gap:11px;
}
.book__direct a{
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  text-decoration:none;color:var(--ink);width:fit-content;
  border-bottom:1px solid var(--hair-ink);transition:color .25s,border-color .25s;
}
.book__direct a:hover{color:var(--red);border-bottom-color:var(--red)}

.form{display:grid;gap:0}
.field{position:relative;border-bottom:1px solid var(--hair-ink);padding:20px 0 9px}
.field label{
  display:block;font-size:var(--chrome);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dust);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;appearance:none;background:none;border:0;padding:0;
  font:inherit;font-size:16px;color:var(--ink);line-height:1.45;
}
.field textarea{resize:vertical;min-height:74px}
.field select{cursor:pointer}
.field input::placeholder,.field textarea::placeholder{color:#b0aaa2}
.field:focus-within{border-bottom-color:var(--red)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px)}
.form__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.submit{
  appearance:none;cursor:pointer;font:inherit;
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  background:var(--ink);color:var(--bone);border:1px solid var(--ink);
  padding:15px 30px;position:relative;overflow:hidden;
  transition:color .3s;
}
.submit::before{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:translateY(101%);transition:transform .4s var(--ease);z-index:0;
}
.submit:hover::before,.submit:focus-visible::before{transform:translateY(0)}
.submit span{position:relative;z-index:1}
.form__note{font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;color:var(--dust)}
.form__status{
  margin-top:18px;font-size:14px;line-height:1.5;color:var(--red);
}
.form__status:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── footer ────────────────────────────────────────────── */
.foot{padding:clamp(40px,5vw,70px) var(--gut) 26px}
.foot__top{
  display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,60px);
  border-top:1px solid var(--hair-bone);padding-top:30px;
}
.foot__mark{font-family:UnifrakturMaguntia,serif;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--bone)}
.foot__mark + p{margin-top:14px;font-size:13px;line-height:1.6;color:rgba(237,234,227,.5);max-width:32ch}
.foot h4{
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  color:rgba(237,234,227,.45);font-weight:400;margin-bottom:14px;
}
.foot ul{list-style:none;display:grid;gap:10px}
.foot li a{
  font-size:var(--chrome);letter-spacing:var(--track);text-transform:uppercase;
  text-decoration:none;color:rgba(237,234,227,.78);
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.foot li a:hover{color:var(--red);border-bottom-color:var(--red)}
.foot__base{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--hair-bone);margin-top:38px;padding-top:16px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,234,227,.34);
}
.foot__base a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(237,234,227,.2)}
.foot__base a:hover{color:var(--red);border-bottom-color:var(--red)}

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

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .visit{grid-template-columns:1fr;gap:0}
  .step{margin-top:22px}
}
@media (max-width:900px){
  .mast{grid-template-columns:1fr auto;gap:14px;font-size:10px}
  .mast nav{display:none}
  .subject{width:76vw}
  .ghost{font-size:17vw}
  .open__copy{bottom:88px;right:var(--gut)}
  .open__meta{display:none}
  .grid{grid-template-columns:repeat(3,1fr)}
    .artists{grid-template-columns:1fr;gap:0}
  .artist + .artist{margin-top:34px}
  .flash{grid-template-columns:repeat(2,1fr)}
  .shop{grid-template-columns:1fr}
  .shop__copy{padding-right:0;margin-bottom:26px}
  .book{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__mark{grid-column:1/-1}
  .process{aspect-ratio:4/3}
  .lb__prev{left:-6px}
  .lb__next{right:-6px}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
  .artist__strip{grid-template-columns:repeat(3,1fr)}
  .shop__wall{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .subject img{transform:scale(1.02)}
  .process img{transform:scale(1.06)}
  .rv{opacity:1;transform:none}
  /* Pieces get the ENTRANCE forced complete rather than opacity nailed to 1.
     Nailing it overrode the presence calc, so the wall lost its depth and its
     hover recession for every reduced-motion visitor. The floor is 0.877, well
     clear of anything that reads as hidden. */
  .piece{--in:1;transform:none}
}