/* ══════════════════════════════════════════════════════════════════
   THE WIZARD OF INK — site.css
   ──────────────────────────────────────────────────────────────────
   Opening concept: the line draws itself.
   A tattoo is a line pushed into skin, and this shop's mark is
   handwritten — so the page opens by inking rather than by fading. A
   hairline draws out from the centre, the wordmark is swept in behind
   a mask edge as if written, and only then does the wall of work rise
   behind it. Claire opened with film, OGZ opens with a slider; this
   opens with the thing the shop actually does.

   Palette is monochrome on purpose. Their sign is black on glass, the
   photo they chose to shoot is black and white, and tattoo flash is
   ink. A colour accent here would be an invention, not a reading.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0B0B0C;          /* ink */
  --bg2:#141416;
  --paper:#F3F1EC;
  --ink2:#A9A9AD;        /* 8.3:1 on --bg */
  --line:rgba(243,241,236,.14);
  --ok:#5FBF7E; --shut:#C4574A;

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.25rem,5vw,5rem);
  --maxw:1400px;
  --bar:0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--paper);
  font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.2em}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.02;
  letter-spacing:-.015em;text-wrap:balance}
:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;z-index:200;background:var(--paper);color:var(--bg);padding:.7rem 1rem}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.t-xl{font-size:clamp(2.5rem,6.4vw,5.6rem)}
.t-lg{font-size:clamp(2rem,4.4vw,3.6rem)}
.t-md{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.lead{font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.8;color:var(--ink2)}
.lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink2);display:block}
em.i{font-style:italic}

.grain{position:fixed;inset:-150%;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}

/* ══ HERO ══════════════════════════════════════════════════════════
   Sticky at z-index 0; .stack scrolls over it. */
.hero{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;
  display:grid;place-items:center;z-index:0}

/* the wall, tilted. Straight rows read as a component; a few degrees of
   rotation reads as a surface the page is sitting on. scale covers the
   corners the rotation opens up. */
.wall{position:absolute;inset:0;display:grid;align-content:center;gap:.7rem;
  transform:rotate(-5deg) scale(1.3);opacity:.42;transition:opacity 1.4s var(--ease)}
.wall__row{overflow:hidden}
.wall__track{display:flex;width:max-content;will-change:transform;
  animation:wall var(--dur,70s) linear infinite}
.wall__row--rev .wall__track{animation-direction:reverse}
.wall__track figure{margin:0 .7rem 0 0;flex:0 0 var(--tile,230px);
  overflow:hidden;background:var(--bg2)}
.wall__track img,.wall__track .ph{width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:grayscale(1) contrast(1.05)}
/* Each tile carries its own trailing margin instead of the row using flex
   `gap`. With gap there is an extra gap between the last tile of copy one
   and the first of copy two, so the track is not two equal halves and
   translateX(-50%) drifts further out of true on every loop. */
@keyframes wall{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.hero__veil{position:absolute;inset:0;
  background:radial-gradient(120% 85% at 50% 45%,rgba(11,11,12,.35),rgba(11,11,12,.88) 70%)}

/* cursor light — a lamp moved over the work. Desktop, pointer only. */
.spot{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),
    rgba(243,241,236,.13),transparent 70%)}
@media(hover:hover) and (pointer:fine){ .hero:hover .spot{opacity:1} }

.hero__in{position:relative;z-index:3;text-align:center;padding:0 var(--pad);width:100%}

/* 1 — the needle line draws out from the centre */
.nib{width:min(62vw,520px);height:1px;background:var(--paper);margin:0 auto 2.1rem;
  transform:scaleX(0);animation:nib 1s var(--slow) .25s forwards}
@keyframes nib{to{transform:scaleX(1)}}

/* 2 — the letters draw themselves, then fill.
   This is the order a tattoo is actually made: line the outline first,
   then pack the fill. It is only possible because the mark was traced to
   real bezier paths — you cannot stroke a PNG. Each path carries
   pathLength="1", so one dasharray value works for every letter
   regardless of its true length, and --i staggers them left to right,
   the direction a hand writes. */
.wm{width:min(76vw,620px);margin:0 auto;display:block;overflow:visible}
.wm path{
  fill:rgba(243,241,236,0);stroke:var(--paper);stroke-width:2.4;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:ink 2.4s cubic-bezier(.5,0,.2,1) forwards;
  animation-delay:calc(.4s + var(--i,0)*.08s);
}
@keyframes ink{
  0%  {stroke-dashoffset:1;fill:rgba(243,241,236,0);stroke-opacity:1}
  48% {stroke-dashoffset:0;fill:rgba(243,241,236,0);stroke-opacity:1}
  100%{stroke-dashoffset:0;fill:rgba(243,241,236,1);stroke-opacity:0}
}

/* the name is "The Wizard of Ink" — the script only carries half of it,
   so the lockup completes it the way the shop window does */
.lockup{display:flex;align-items:center;justify-content:center;gap:1.1rem;
  margin:1.5rem auto 0;max-width:min(76vw,620px)}
.lockup i{flex:1;height:1px;background:var(--line)}
.lockup span{font-family:var(--mono);font-size:.7rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink2);text-indent:.42em}

.hero__sub{margin:2.2rem auto 0;max-width:38ch;color:rgba(243,241,236,.82);
  font-size:clamp(1rem,1.3vw,1.15rem)}
.hero__meta{margin-top:1.6rem;display:flex;gap:.5rem 1.8rem;justify-content:center;
  flex-wrap:wrap}
.hero__btns{margin-top:2.3rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.fade{opacity:0;animation:fade 1.3s var(--slow) forwards;animation-delay:var(--d,0s)}
@keyframes fade{to{opacity:1}}

.cue{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:3;
  display:grid;justify-items:center;gap:.7rem;color:var(--ink2)}
.cue i{width:1px;height:46px;background:linear-gradient(var(--paper),transparent);
  animation:drop 2.6s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* As the page scrolls, the mark clears and the work comes up to full.
   The finished state is the default — a browser without animation-timeline
   keeps exactly what is written above and simply does not animate, rather
   than firing the keyframes instantly on load. JS covers those browsers. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero__in{animation:markOut linear both;animation-timeline:scroll(root);animation-range:0 62vh}
    .wall{animation:wallUp linear both;animation-timeline:scroll(root);animation-range:0 62vh}
    .cue{animation:fadeOut linear both;animation-timeline:scroll(root);animation-range:0 22vh}
  }
}
@keyframes markOut{to{opacity:0;transform:translateY(-24px) scale(.96)}}
@keyframes wallUp{to{opacity:1;transform:rotate(-5deg) scale(1.12)}}
@keyframes fadeOut{to{opacity:0}}

/* ══ STACK — everything that scrolls over the hero ════════════════ */
.stack{position:relative;z-index:1;background:var(--bg)}
.sec{padding:clamp(4.5rem,11vh,9rem) 0}
.sec--tight{padding-block:clamp(2.5rem,6vh,4.5rem)}
.sec__hd{margin-bottom:clamp(2rem,5vh,3.6rem)}
.sec__hd h2{margin-top:1.1rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:1.15em 2.3em;border:1px solid var(--line);transition:all .5s var(--slow)}
.btn--solid{background:var(--paper);color:var(--bg);border-color:var(--paper)}
.btn--solid:hover{letter-spacing:.28em}
.btn--line:hover{border-color:var(--paper);letter-spacing:.28em}

.stat{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;color:var(--ink2)}
.stat i{width:7px;height:7px;border-radius:99px;background:var(--ink2)}
.stat[data-open="1"] i{background:var(--ok);box-shadow:0 0 0 3px rgba(95,191,126,.18)}
.stat[data-open="0"] i{background:var(--shut)}

/* statement */
.stmt{text-align:center;padding:clamp(4rem,9vh,7rem) 0}
.stmt h2{max-width:19ch;margin:1.6rem auto 0}

/* studio */
.studio{display:grid;grid-template-columns:1fr minmax(0,42%);gap:clamp(2rem,5vw,5rem);
  align-items:start}
.studio__art{align-self:stretch}
.studio__art img{position:sticky;top:5rem;width:100%;max-height:74vh;object-fit:cover;
  filter:grayscale(1) contrast(1.04)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1.5rem;
  margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:.4rem}
.facts dd{margin:0;font-family:var(--serif);font-size:1.35rem}


/* portfolio grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.grid figure{margin:0;overflow:hidden;background:var(--bg2)}
.grid img,.grid .ph{width:100%;height:100%;object-fit:cover;aspect-ratio:1;
  transition:transform 1.2s var(--slow)}
.grid figure:hover img{transform:scale(1.04)}
.grid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.grid figure:nth-child(8){grid-column:span 2}
.grid figure:nth-child(8) img,.grid figure:nth-child(8) .ph{aspect-ratio:2/1}


/* quote */
.quote{text-align:center;padding:clamp(4.5rem,11vh,8rem) 0;border-block:1px solid var(--line)}
.quote blockquote{margin:0 auto;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.22;max-width:20ch}
.quote cite{display:block;margin-top:2rem;font-family:var(--mono);font-style:normal;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2.2rem)}
.step{border-top:1px solid var(--line);padding-top:1.1rem}
.step b{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--ink2);font-weight:400;margin-bottom:.8rem}
.step h3{font-size:1.35rem;margin-bottom:.5rem}
.step p{color:var(--ink2);font-size:.94rem;margin:0}

/* faq — <details>, so it works with no JS at all */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.45rem);transition:color .35s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:50%;width:11px;height:1px;
  background:var(--paper);box-shadow:0 0 0 0 transparent;transition:transform .4s var(--slow)}
.faq summary::before{content:"";position:absolute;right:.5rem;top:50%;width:11px;height:1px;
  background:var(--paper);transform:rotate(90deg);transition:transform .4s var(--slow),opacity .4s}
.faq details[open] summary::before{transform:rotate(0);opacity:0}
.faq details p{color:var(--ink2);padding-bottom:1.4rem;margin:0;max-width:62ch}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.hours{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;
  border-bottom:1px solid var(--line);color:var(--ink2);font-size:.95rem}
.hours li span:last-child{font-family:var(--mono);font-size:.85rem}
.hours li[data-today]{color:var(--paper)}
.addr{font-style:normal;color:var(--ink2);line-height:2;margin-top:1.5rem}
.addr a{border-bottom:1px solid var(--line)}
.addr a:hover{border-color:var(--paper);color:var(--paper)}
.form{display:grid;gap:.7rem;margin-top:1.6rem;max-width:460px}
.form input,.form textarea{width:100%;padding:.85rem .95rem;background:var(--bg2);
  border:1px solid var(--line);color:var(--paper);font:400 .95rem var(--sans)}
.form input:focus,.form textarea:focus{border-color:var(--paper);outline:none}
.form ::placeholder{color:var(--ink2)}
.hp{position:absolute;left:-9999px}
.formmsg{font-size:.88rem;min-height:1.3em;color:var(--ink2)}
.formmsg[data-state=err]{color:#E08B76}

.ft{border-top:1px solid var(--line);padding:2.5rem 0 calc(2.5rem + var(--bar));
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;
  font-size:.8rem;color:var(--ink2)}

/* reveal — vertical only. A horizontal offset widens the document past the
   phone, which makes the page load zoomed in. */
.rv{opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--slow),transform 1s var(--slow);transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────────────────── */
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .studio,.visit{grid-template-columns:1fr;gap:2.4rem}
  .studio__art img{position:static;max-height:none;width:100%;aspect-ratio:1;object-fit:cover}
  .steps{grid-template-columns:repeat(2,1fr);gap:1.6rem}
}
@media(max-width:760px){
  :root{--bar:58px}
  .wall{transform:rotate(-7deg) scale(1.5);gap:.5rem}
  .wall__track figure{flex:0 0 var(--tile-m,150px);margin-right:.5rem}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid figure:nth-child(1),.grid figure:nth-child(8){grid-column:span 2;grid-row:auto}
  .grid figure:nth-child(1) img,.grid figure:nth-child(1) .ph{aspect-ratio:3/2}
  .cue{display:none}
  .hero__btns{flex-direction:column;align-items:stretch}
  .actbar{display:grid}
  @supports (animation-timeline:scroll()){
    @media (prefers-reduced-motion:no-preference){
      .wall{animation-name:wallUpM}
    }
  }
}
@keyframes wallUpM{to{opacity:1;transform:rotate(-7deg) scale(1.3)}}

.actbar{display:none;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;
  z-index:70;background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.actbar a{display:flex;align-items:center;justify-content:center;padding:1.1rem .5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase}
.actbar a+a{background:var(--paper);color:var(--bg)}

@media(prefers-reduced-motion:reduce){
  .nib,.wm,.fade,.cue i{animation:none}
  .nib{transform:none}
  .wm{-webkit-mask-image:none;mask-image:none}
  .fade{opacity:1}
  .wall__track{animation:none}
  .wall__row{overflow-x:auto;scrollbar-width:none}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* placeholder — delete once the portfolio photos are in */
.ph{width:100%;height:100%;position:relative;
  background:linear-gradient(150deg,#2A2A2D,#111113 78%)}
.ph::after{content:attr(data-ph);position:absolute;inset:auto 0 .5rem;text-align:center;
  font-family:var(--mono);font-size:.46rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(243,241,236,.22)}

/* ── feature — three pieces given room, before the dense grid ────── */
.feature{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.8rem)}
.feature figure{margin:0;overflow:hidden;position:relative;background:var(--bg2)}
.feature img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.4s var(--slow)}
.feature figure:hover img{transform:scale(1.04)}
.feature figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .9rem;
  background:linear-gradient(0deg,rgba(11,11,12,.85),transparent)}
@media(max-width:760px){
  .feature{grid-template-columns:1fr;gap:1rem}
  .feature img{aspect-ratio:3/2}
}

/* ══ TOPBAR ═══════════════════════════════════════════════════════
   Hidden over the hero, slides in once the work is behind you. The
   mobile menu is a SIBLING, not a child — a backdrop-filter here would
   become the containing block for any position:fixed descendant and the
   menu would scroll away with the page instead of covering it. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);
  padding:.85rem clamp(1rem,3vw,2.4rem);
  background:rgba(11,11,12,.88);backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--line);
  transform:translateY(-101%);transition:transform .55s var(--slow)}
.topbar.on{transform:none}
.topbar__mark{flex:none;display:block;width:clamp(96px,10vw,132px);color:var(--paper)}
.topbar__mark svg{width:100%;height:auto;display:block}
.topbar__nav{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.7rem);margin-left:auto}
.topbar__nav a{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);padding:.4rem 0;position:relative;
  transition:color .35s var(--ease);white-space:nowrap}
.topbar__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--paper);transition:right .4s var(--slow)}
.topbar__nav a:hover{color:var(--paper)}
.topbar__nav a:hover::after{right:0}
.topbar__nav a[aria-current]{color:var(--paper)}
.soc{display:flex;gap:.55rem;align-items:center}
.soc a{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);
  color:var(--ink2);transition:all .4s var(--ease)}
.soc a:hover{color:var(--paper);border-color:var(--paper)}
.soc svg{width:15px;height:15px;display:block}
.topbar .btn{padding:.95em 1.5em;font-size:.64rem}
.burg{all:unset;display:none;cursor:pointer;padding:.45rem;color:var(--paper)}
/* all:unset resets display — it must come first or it undoes display:none */

.sheet{position:fixed;inset:0;z-index:85;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:5rem clamp(1.5rem,6vw,3rem) 2rem;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.sheet.on{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.sheet a{font-family:var(--serif);font-size:1.7rem;padding:.5rem 0;
  border-bottom:1px solid var(--line)}
.sheet .soc{margin-top:1.6rem}
.sheet__x{all:unset;position:absolute;top:1.1rem;right:1.2rem;cursor:pointer;
  padding:.6rem;color:var(--paper);font-family:var(--mono);font-size:.7rem;letter-spacing:.2em}
body.nav-open{overflow:hidden}

@media(max-width:1180px){
  .topbar__nav{display:none}
  .burg{display:block}
  .topbar .btn{margin-left:auto}
}
@media(max-width:560px){ .topbar .btn{display:none} }

/* ══ GALLERY RAIL ═════════════════════════════════════════════════
   Thumb-driven on every device. No auto-advance: a carousel that moves
   on its own takes the work away from someone who is still looking. */
.rail{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:0 var(--pad) .5rem;scroll-padding-left:var(--pad)}
.rail::-webkit-scrollbar{display:none}
.rail>a{flex:0 0 clamp(230px,26vw,340px);scroll-snap-align:start;position:relative;
  overflow:hidden;background:var(--bg2)}
.rail img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.2s var(--slow)}
.rail>a:hover img{transform:scale(1.05)}
.rail__more{display:grid;place-content:center;gap:.9rem;text-align:center;
  border:1px solid var(--line);aspect-ratio:4/5;padding:1.5rem;
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.rail__more:hover{border-color:var(--paper);background:var(--bg2)}
.rail__more b{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.15}
.rail__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:clamp(1.4rem,3vh,2.2rem)}
.rail__hd h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.link{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:.4rem;transition:all .45s var(--slow)}
.link:hover{border-color:var(--paper);letter-spacing:.24em}

/* ══ GALLERY PAGE ═════════════════════════════════════════════════ */
.page{padding-top:5.5rem}
.page__hd{padding:clamp(2.5rem,7vh,5rem) var(--pad) clamp(2rem,4vh,3rem)}
.page__hd h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,5.4rem);
  line-height:1;margin:.8rem 0 0}
.masonry{columns:4 260px;column-gap:.7rem;padding:0 var(--pad) clamp(3rem,8vh,6rem)}
.masonry figure{margin:0 0 .7rem;break-inside:avoid;overflow:hidden;background:var(--bg2)}
.masonry img{width:100%;height:auto;display:block;transition:transform 1.2s var(--slow)}
.masonry figure:hover img{transform:scale(1.04)}
@media(max-width:700px){ .masonry{columns:2 140px;column-gap:.5rem} .masonry figure{margin-bottom:.5rem} }

@media(max-width:760px){
  .sec{padding:clamp(2.6rem,6vh,4rem) 0}
  .sec--tight{padding-block:clamp(2rem,5vh,3rem)}
  .stmt{padding:clamp(2.8rem,7vh,4.5rem) 0}
  .stmt h2{max-width:16ch}
  .sec__hd{margin-bottom:1.4rem}
  .quote{padding:clamp(3rem,8vh,5rem) 0}
  .rail__hd{margin-bottom:1.1rem}
  .facts{margin-top:1.8rem;padding-top:1.3rem;gap:1.1rem}
}

/* ── artiesten ────────────────────────────────────────────────────
   Standard pattern on studio sites: portrait, name, what they do, and a
   link straight to their own Instagram — an artist's feed is their real
   portfolio and people pick a studio by picking a person.

   The empty state is a drawn frame, not a grey box. A placeholder that
   looks designed reads as "photo coming"; a grey rectangle reads as
   "broken", and this page may sit live for a while before the portraits
   arrive. */
.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,2.2rem)}
.crew figure{margin:0 0 1.1rem;overflow:hidden;background:var(--bg2)}
.crew img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transition:transform 1.2s var(--slow),filter .9s var(--ease)}
.crew article:hover img{transform:scale(1.04);filter:grayscale(0)}
.crew h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.crew .lbl{margin-top:.45rem}
.crew__ig{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:.35rem;
  transition:all .45s var(--slow)}
.crew__ig:hover{color:var(--paper);border-color:var(--paper)}
.crew__ig svg{width:13px;height:13px}

.slot{aspect-ratio:3/4;display:grid;place-content:center;justify-items:center;gap:.7rem;
  border:1px solid var(--line);background:transparent;
  transition:border-color .5s var(--ease)}
.crew article:hover .slot{border-color:rgba(243,241,236,.3)}
.slot svg{width:30px;height:30px;color:var(--line)}
.slot span{font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink2)}

@media(max-width:860px){ .crew{grid-template-columns:1fr 1fr;gap:1.1rem} }
@media(max-width:460px){ .crew{grid-template-columns:1fr;max-width:300px} }