/* ══════════════════════════════════════════════════════════
   inVogue Tattoo — V2
   Dark editorial · warm oxblood + amber · brand serif lockup
   ══════════════════════════════════════════════════════════ */

:root{
  /* surfaces — strict monochrome */
  --ink:#0A0A0A;
  --charcoal:#121212;
  --ash:#1A1A1A;
  --ash-2:#242424;
  --line:#2F2F2F;

  /* text */
  --bone:#F1F1EE;
  --bone-dim:#BDBDBA;
  --smoke:#848481;

  /* accent — white on black (brand is black & white) */
  --oxblood:#4A4A4A;
  --oxblood-2:#3A3A3A;
  --oxblood-deep:#161616;
  --ember:#E9E9E6;
  --ember-soft:rgba(255,255,255,.09);

  /* type */
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --brand:"Cinzel","Fraunces",Georgia,serif;
  --deva:"Noto Serif Devanagari",serif;

  --gutter:clamp(1.25rem,5vw,5rem);
  --maxw:1400px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* atmosphere — theme-dependent (dark defaults) */
  --glass:rgba(10,10,11,.85);
  --glass-strong:rgba(10,10,11,.97);
  --vignette:rgba(0,0,0,.55);
  --shadow-hard:rgba(0,0,0,.75);
  --shadow-soft:rgba(0,0,0,.8);
  --hover-ring:rgba(255,255,255,.5);
  --hover-glow:rgba(255,255,255,.28);
  --ring-soft:rgba(255,255,255,.3);
  --edge-glow:rgba(255,255,255,.45);
  --stamp-inner:rgba(237,231,221,.22);
  --grain-o:.05;
  --map-filter:grayscale(1) invert(.9) contrast(.88);
  color-scheme:dark;
}

/* ══ light theme — warm paper, same monochrome brand ══ */
:root[data-theme="light"]{
  /* surfaces */
  --ink:#F6F4EF;
  --charcoal:#EFECE5;
  --ash:#E8E5DD;
  --ash-2:#DDD9CF;
  --line:#D3CEC2;

  /* text */
  --bone:#171716;
  --bone-dim:#45453F;
  --smoke:#7A7A72;

  /* accent — black on paper */
  --oxblood:#B5B0A4;
  --oxblood-2:#C5C0B4;
  --oxblood-deep:#EDEAE2;
  --ember:#20201D;
  --ember-soft:rgba(20,20,18,.07);

  /* atmosphere */
  --glass:rgba(246,244,239,.85);
  --glass-strong:rgba(246,244,239,.97);
  --vignette:rgba(30,26,20,.12);
  --shadow-hard:rgba(40,35,25,.3);
  --shadow-soft:rgba(40,35,25,.22);
  --hover-ring:rgba(23,23,22,.45);
  --hover-glow:rgba(23,23,22,.16);
  --ring-soft:rgba(23,23,22,.25);
  --edge-glow:rgba(23,23,22,.35);
  --stamp-inner:rgba(23,23,22,.22);
  --grain-o:.06;
  --map-filter:grayscale(1) contrast(.95);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--bone);color:var(--ink)}

/* ── shared type ── */
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.muted{color:var(--smoke)}
.center{text-align:center}

.sec-title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.6rem,7vw,6rem);
  line-height:.95;
  letter-spacing:-.02em;
}
.sec-title em{color:var(--bone);font-style:italic;position:relative}
.sec-title em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:2px;background:var(--oxblood);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .2s}
.reveal.is-in .sec-title em::after,.sec-title.is-in em::after{transform:scaleX(1)}

.sec-num{color:var(--ember);display:block;margin-bottom:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em}
.sec-head{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,12vw,10rem) var(--gutter) clamp(2rem,5vw,3.5rem)}
.sec-head--center{text-align:center}
.sec-lead{max-width:44ch;margin-top:1.4rem;color:var(--bone-dim);font-size:1.05rem}
.sec-head--center .sec-lead{margin-inline:auto}

.dropcap{
  font-family:var(--serif);font-style:italic;font-weight:400;
  float:left;font-size:3.6em;line-height:.72;padding:.06em .12em 0 0;color:var(--ember);
}

/* ── reveal animation ── */
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none;filter:none}

/* ══ grain + vignette ══ */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:var(--grain-o);mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0,transparent 55%,var(--vignette) 100%);
}

/* ══ needle / branch lines ══ */
.needle{width:100%;overflow:hidden}
.needle svg{width:100%;height:12px;display:block}
.needle line{stroke:var(--line);stroke-width:1.2;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.4s var(--ease)}
.needle.is-in line{stroke-dashoffset:0}
.needle--hero{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ══ nav ══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--gutter);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:var(--glass);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-top:.7rem;padding-bottom:.7rem}
.nav__brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.nav__mark{color:var(--bone);display:grid;place-items:center}
.nav__mark img{width:30px;height:30px;object-fit:contain}
.nav__wordmark{width:102px;height:auto;display:block;translate:0 1px;opacity:.96}
.nav__links{display:flex;gap:1.6rem}
.nav__links a{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim);position:relative;padding:.2rem 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__call{margin:0 1.3rem 0 2rem}
@media(max-width:700px){.nav__call{display:none}}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.nav__burger span{width:24px;height:2px;background:var(--bone);transition:.3s var(--ease)}

/* theme switcher */
.themer{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:none;color:var(--bone-dim);
  cursor:pointer;display:grid;place-items:center;padding:0;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease);
}
.themer:hover{color:var(--ember);border-color:var(--ember);transform:rotate(12deg)}
.themer svg{grid-area:1/1;width:15px;height:15px;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.themer__sun{opacity:0;transform:rotate(90deg) scale(.4)}
:root[data-theme="light"] .themer__sun{opacity:1;transform:none}
:root[data-theme="light"] .themer__moon{opacity:0;transform:rotate(-90deg) scale(.4)}

/* scroll progress hairline */
.nav__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--oxblood),var(--ember));
  transform:scaleX(0);transform-origin:left;pointer-events:none;
}

/* ══ stamp CTA ══ */
.stamp{
  --pad:.95em 1.7em;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--bone);padding:var(--pad);
  border:1.5px solid var(--oxblood);
  background:var(--oxblood-deep);
  border-radius:2px;
  transform:rotate(-1.4deg);
  transition:transform .18s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 0 0 0 var(--ember-soft);
  overflow:hidden;
}
.stamp::before{content:"";position:absolute;inset:3px;border:1px solid var(--stamp-inner);border-radius:1px;pointer-events:none}
.stamp:hover{transform:rotate(-1.4deg) scale(.97);background:var(--bone);color:var(--ink);box-shadow:0 0 34px -6px var(--ember-soft)}
.stamp:active{transform:rotate(-1.4deg) scale(.93)}
.stamp--sm{--pad:.6em 1.1em;font-size:.7rem}
.stamp--lg{--pad:1.15em 2.4em;font-size:.9rem}
.stamp__ink{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--ember-soft),transparent 60%);opacity:0;transition:opacity .3s}
.stamp:hover .stamp__ink{opacity:1}

.ghostlink{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);border-bottom:1px solid transparent;transition:.3s var(--ease);padding-bottom:2px}
.ghostlink:hover{color:var(--bone);border-bottom-color:var(--ember)}

/* ══ 1 · HERO ══ */
.hero{position:relative;padding-top:clamp(6.5rem,13vh,9rem);min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero__intro{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gutter);text-align:center}
.hero__deva{
  font-family:var(--deva);color:var(--ember);
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;
  display:flex;align-items:center;justify-content:center;gap:1.1rem;
}
.hero__deva::before,.hero__deva::after{content:"";height:1px;width:2.4rem;background:var(--oxblood);flex:none}
.hero__brandname{
  font-family:var(--brand);font-weight:400;
  font-size:clamp(3.1rem,11.5vw,9rem);
  line-height:1;letter-spacing:.05em;text-indent:.05em;
  color:var(--bone);margin-top:1rem;
}
.hero__brandsub{
  display:block;font-size:clamp(.9rem,2.1vw,1.45rem);
  letter-spacing:.62em;margin-right:-.62em;text-transform:uppercase;
  color:var(--ember);margin-top:.45em;
}
.hero__strap{color:var(--smoke);margin-top:1.5rem}
.hero__sub{max-width:52ch;margin:1.4rem auto 0;color:var(--bone-dim);font-size:clamp(1rem,1.4vw,1.15rem)}
.hero__sub em{font-family:var(--serif);color:var(--bone)}
.hero__cta{display:flex;align-items:center;justify-content:center;gap:2rem;margin-top:2.2rem;flex-wrap:wrap}

.hero__strip{
  width:100%;max-width:1260px;margin:clamp(2.6rem,6.5vh,4.2rem) auto 0;
  padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);align-items:center;
}
.hero__shot{position:relative;transform:rotate(var(--rot,0));transition:transform .45s var(--ease)}
.hero__shot img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border:1px solid var(--line);
  filter:grayscale(.18) contrast(1.05);
  transition:filter .5s var(--ease);
}
.hero__shot--mid img{aspect-ratio:3/2}
.hero__shot:hover{transform:rotate(0) scale(1.015)}
.hero__shot:hover img{filter:grayscale(0) contrast(1.05)}
.hero__shot figcaption{margin-top:.7rem;color:var(--smoke);text-align:center}

.hero__marquee{margin-top:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:.8rem 0}
.marquee__track{display:flex;align-items:center;gap:2rem;white-space:nowrap;width:max-content;animation:marq 34s linear infinite}
.marquee__track span{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--bone-dim)}
.marquee__track i{width:6px;height:6px;background:var(--oxblood);border-radius:50%;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ══ 2 · WORK / ARCHIVE ══ */
.work{position:relative}
.filters{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.filter{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);background:transparent;border:1px solid var(--line);
  padding:.55em 1.1em;border-radius:2px;cursor:pointer;transition:.25s var(--ease);
}
.filter:hover{border-color:var(--bone-dim);color:var(--bone)}
.filter.is-active{background:var(--bone);color:var(--ink);border-color:var(--bone)}

.flash{overflow:hidden;cursor:grab;padding:1rem 0 1.5rem}
.flash.is-drag{cursor:grabbing}
.flash__track{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.2rem);padding:2rem var(--gutter);width:max-content;will-change:transform}
.piece{flex:0 0 auto;width:min(78vw,340px);transform:rotate(var(--rot,0));transition:transform .45s var(--ease),opacity .45s var(--ease)}
.piece--md{width:min(70vw,290px)}
.piece--sm{width:min(60vw,235px)}
.piece.is-hidden{display:none}
.piece__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.piece img{width:100%;height:auto;border:1px solid var(--line);filter:grayscale(.25) contrast(1.04);transition:filter .5s var(--ease),transform .5s var(--ease)}
.piece:hover{transform:rotate(0) scale(1.015)}
.piece:hover img{filter:grayscale(0) contrast(1.06)}
.piece figcaption{margin-top:.9rem;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--bone)}
.piece figcaption em{color:var(--smoke);font-size:.82rem;font-family:var(--sans);font-style:normal;letter-spacing:.04em}

.piece--more{width:min(70vw,260px);display:grid;place-items:center;border:1px dashed var(--line);aspect-ratio:4/5}
.piece--more__inner{text-align:center;display:grid;gap:.8rem;padding:1.5rem}
.piece--more__inner .mono:first-child{font-size:2rem;color:var(--oxblood)}
.piece--more strong{font-family:var(--serif);font-weight:340;font-size:1.6rem;line-height:1.05}
.piece--more:hover{border-color:var(--ember)}
.flash__hint{text-align:center;color:var(--smoke);margin-top:-.5rem}

/* ══ 3 · STENCIL → SKIN ══ */
.storysec{position:relative}

.story{display:none;height:260vh}
.storysec.js-story .story{display:block}
.storysec.js-story .story-static{display:none}

.story__stage{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.story__frame{
  position:relative;overflow:hidden;
  width:min(88vw,calc(78vh * .8));aspect-ratio:4/5;
  border:1px solid var(--line);
  box-shadow:0 40px 80px -30px var(--shadow-hard);
}
.story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story__img--final{clip-path:inset(0 100% 0 0);will-change:clip-path}
.story__edge{
  position:absolute;top:0;bottom:0;left:0;width:2px;
  background:var(--ember);box-shadow:0 0 18px 2px var(--edge-glow);
  will-change:left;
}
.story__label{position:absolute;bottom:1rem;color:var(--bone);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.story__label--l{left:1.1rem}
.story__label--r{right:1.1rem}

/* static fallback (no JS / reduced motion) */
.story-static{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.5rem);
}
.story-static figure{position:relative}
.story-static img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.story-static figcaption{margin-top:.8rem;color:var(--smoke)}

/* in session */
.session{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(3.5rem,8vw,6rem) var(--gutter) clamp(3rem,7vw,5rem);
  display:grid;grid-template-columns:minmax(240px,380px) 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.session__video{position:relative;transform:rotate(-1.2deg)}
.session__video video{width:100%;aspect-ratio:9/16;object-fit:cover;border:1px solid var(--line);filter:grayscale(.15) contrast(1.04)}
.session__video figcaption{position:absolute;left:.9rem;bottom:.8rem;color:var(--bone);mix-blend-mode:difference}
.session__copy h3{font-family:var(--serif);font-weight:340;font-size:clamp(2rem,5vw,3.6rem);line-height:1}
.session__copy h3 em{color:var(--ember)}
.session__copy p{margin-top:1.2rem;color:var(--bone-dim);max-width:44ch}
.session__note{color:var(--smoke)}

/* ══ 4 · PIERCING ══ */
.piercing{background:var(--charcoal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.piercing__grid{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(4.5rem,10vw,8rem) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;
}
.piercing__copy .sec-title{margin-bottom:1.6rem}
.piercing__copy p{color:var(--bone-dim);max-width:48ch;margin-bottom:1.1rem}
.piercing__cta{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;margin-top:1.6rem}

.piercing__media{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1rem,2.5vw,1.8rem);align-items:start}
.piercing__main{transform:rotate(1deg)}
.piercing__detail{transform:rotate(-1.6deg);margin-top:clamp(2rem,6vw,4.5rem)}
.piercing__media video{width:100%;aspect-ratio:9/16;object-fit:cover;border:1px solid var(--line);filter:grayscale(.1) contrast(1.03)}
.piercing__media figcaption{margin-top:.7rem;color:var(--smoke)}

/* ══ 5 · STUDIO ══ */
.studio{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vw,8rem) var(--gutter)}
.studio__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start}
.studio__img{overflow:hidden;border:1px solid var(--line);transform:translateY(var(--studio-y,0)) rotate(var(--studio-rot,0deg));transition:transform .8s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);will-change:transform}
.studio__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1);transition:transform .8s var(--ease)}
.studio__img:hover{border-color:var(--hover-ring);box-shadow:0 28px 60px -38px var(--hover-glow)}
.studio__img:hover img{transform:scale(1.04)}
.studio__img--tall{grid-column:1/5;grid-row:1/3;aspect-ratio:3/4.4}
.studio__copy{grid-column:6/13;padding-top:1rem}
.studio__copy .sec-title{margin:.4rem 0 1.6rem}
.studio__copy p{max-width:52ch;color:var(--bone-dim);margin-bottom:1.1rem}
.signature{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--bone);margin-top:1.6rem !important}

/* ── guided studio walkthrough (base = mobile / reduced-motion: stacked labelled cards) ── */
.walk{position:relative;max-width:var(--maxw);margin:clamp(2.5rem,6vw,4rem) auto 0;padding:0 var(--gutter)}
.walk__kicker{color:var(--ember);margin-bottom:clamp(1.4rem,3.5vw,2rem)}
.walk__route{display:none}
.walk__stage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));gap:clamp(1rem,2.5vw,1.6rem)}
.walk__card{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--charcoal)}
.walk__card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.12)}
.walk__cap{display:flex;flex-direction:column;gap:.3rem;padding:.95rem 1.05rem 1.15rem}
.walk__cap-idx{color:var(--ember)}
.walk__cap-title{font-family:var(--serif);font-size:1.3rem;line-height:1.15;color:var(--bone)}
.walk__cap-note{font-size:.92rem;color:var(--bone-dim);max-width:42ch}

/* ── motion: pinned deck with a floor-plan route that draws (all sizes) ── */
@media(prefers-reduced-motion:no-preference){
  .walk:not(.walk--static){min-height:calc(100vh + 3 * 46vh)}
  .walk:not(.walk--static) .walk__sticky{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(5rem,11vh,7rem) 0 clamp(2rem,6vh,4rem)}
  .walk:not(.walk--static) .walk__kicker{margin-bottom:clamp(1.6rem,4vh,2.6rem)}
  .walk:not(.walk--static) .walk__inner{display:grid;grid-template-columns:minmax(178px,224px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}

  /* route rail */
  .walk:not(.walk--static) .walk__route{display:flex;flex-direction:column;justify-content:space-between;position:relative;gap:clamp(1.2rem,3vh,2.4rem);align-self:stretch;list-style:none;padding:.35rem 0}
  .walk__route::before{content:"";position:absolute;left:1rem;top:1rem;bottom:1rem;width:1px;background:var(--line)}
  .walk__fill{position:absolute;left:1rem;top:1rem;width:1px;height:0;background:linear-gradient(180deg,var(--ember),var(--oxblood));transition:height .6s var(--ease)}
  .walk__step{display:flex;align-items:center;gap:.85rem;position:relative;z-index:1}
  .walk__dot{flex:none;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);background:var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;color:var(--smoke);transition:color .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
  .walk__step-label{font-family:var(--serif);font-size:1.02rem;color:var(--smoke);transition:color .45s var(--ease)}
  .walk__step.is-done .walk__dot{border-color:var(--ember);color:var(--ember)}
  .walk__step.is-done .walk__step-label{color:var(--bone-dim)}
  .walk__step.is-active .walk__dot{border-color:var(--oxblood);background:var(--oxblood-deep);color:var(--bone);box-shadow:0 0 0 5px var(--ember-soft)}
  .walk__step.is-active .walk__step-label{color:var(--bone)}

  /* stage deck */
  .walk:not(.walk--static) .walk__stage{display:block;position:relative;aspect-ratio:16/10;grid-template-columns:none;gap:0}
  .walk:not(.walk--static) .walk__card{position:absolute;inset:0;transform-origin:center center;opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease),filter .7s var(--ease),box-shadow .7s var(--ease),border-color .7s var(--ease);will-change:transform,opacity}
  .walk:not(.walk--static) .walk__card img{height:100%;aspect-ratio:auto}
  .walk:not(.walk--static) .walk__card[data-pos="0"]{transform:none;opacity:1;filter:none;z-index:40;border-color:var(--hover-ring);box-shadow:0 42px 90px -55px var(--shadow-hard),0 0 0 1px var(--ember-soft)}
  .walk:not(.walk--static) .walk__card[data-pos="1"]{transform:translate(6%,4.5%) scale(.9) rotate(1.1deg);opacity:.5;z-index:30}
  .walk:not(.walk--static) .walk__card[data-pos="2"]{transform:translate(11%,8.5%) scale(.84) rotate(1.6deg);opacity:.28;z-index:20}
  .walk:not(.walk--static) .walk__card[data-pos="3"]{transform:translate(15.5%,12%) scale(.8) rotate(2deg);opacity:.15;z-index:10}
  .walk:not(.walk--static) .walk__card[data-pos="-1"]{transform:translate(-7%,-4.5%) scale(.9) rotate(-1.1deg);opacity:.34;z-index:8}
  .walk:not(.walk--static) .walk__card[data-pos="-2"]{transform:translate(-12%,-8.5%) scale(.84) rotate(-1.6deg);opacity:.2;z-index:6}
  .walk:not(.walk--static) .walk__card[data-pos="-3"]{transform:translate(-16%,-12%) scale(.8) rotate(-2deg);opacity:.1;z-index:4}
  .walk:not(.walk--static) .walk__card:not([data-pos="0"]) img{filter:grayscale(.55) brightness(.62)}

  /* caption — overlaid, only the active room speaks */
  .walk:not(.walk--static) .walk__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.3rem,2.6vw,2rem);gap:.4rem;background:linear-gradient(0deg,rgba(10,10,11,.94) 6%,rgba(10,10,11,.55) 58%,transparent);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s;pointer-events:none}
  .walk:not(.walk--static) .walk__card[data-pos="0"] .walk__cap{opacity:1;transform:none}
  .walk:not(.walk--static) .walk__cap-title{font-size:clamp(1.45rem,2vw,1.9rem)}
  .walk:not(.walk--static) .walk__cap-note{font-size:.98rem;max-width:46ch}
}

/* ══ 6 · STYLES INDEX ══ */
.styles{position:relative;border-top:1px solid var(--line)}
.index{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(4rem,8vw,6rem);list-style:none}
.index__row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.3rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line);
  cursor:default;position:relative;transition:padding-left .4s var(--ease),color .4s var(--ease);
}
.index__no{color:var(--smoke);transition:color .3s}
.index__name{font-family:var(--serif);font-weight:340;font-size:clamp(1.6rem,4.5vw,3.4rem);line-height:1;letter-spacing:-.01em}
.index__desc{color:var(--smoke);max-width:34ch;font-size:.92rem;justify-self:end;text-align:right}
.index__arrow{color:var(--oxblood);font-size:1.4rem;opacity:0;transform:translateX(-10px);transition:.35s var(--ease)}
.index__row:hover{padding-left:clamp(.5rem,2vw,2rem)}
.index__row:hover .index__name{color:var(--ember)}
.index__row:hover .index__no{color:var(--ember)}
.index__row:hover .index__arrow{opacity:1;transform:none}

.index__preview{position:fixed;top:0;left:0;width:300px;height:380px;pointer-events:none;z-index:15;opacity:0;transform:translate(-50%,-50%) rotate(-3deg);transition:opacity .3s var(--ease);border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -20px var(--shadow-soft)}
.index__preview.is-on{opacity:1}
.index__preview img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.05)}

/* ══ 7 · PROCESS / BOOKING ══ */
.process{max-width:var(--maxw);margin:0 auto;padding-bottom:clamp(4rem,8vw,6rem)}
.track{position:relative;padding:2.5rem var(--gutter) 0}
.needle--track{position:absolute;top:3.2rem;left:0;right:0;padding:0 var(--gutter)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.5rem);position:relative}
.step{position:relative;padding-top:2.5rem}
.step::before{content:"";position:absolute;top:.4rem;left:0;width:11px;height:11px;border-radius:50%;background:var(--ink);border:2px solid var(--oxblood)}
.step__no{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;color:var(--ember)}
.step h3{font-family:var(--serif);font-weight:360;font-size:clamp(1.4rem,3vw,2rem);margin:.4rem 0 .7rem}
.step p{color:var(--bone-dim);font-size:.95rem;max-width:32ch}
.step__proof{margin-top:1.2rem;position:relative;width:60%;border:1px solid var(--line);transform:rotate(-2deg)}
.step__proof img{aspect-ratio:3/4;object-fit:cover;filter:grayscale(.1)}
.step__proof figcaption{position:absolute;top:-1.4rem;right:0;color:var(--ember)}
.process__cta{text-align:center;margin-top:clamp(3rem,6vw,4.5rem)}

/* ══ 8 · HYGIENE ══ */
/* ══ 8 · PRICING ══ */
.pricing{padding-bottom:clamp(4.5rem,9vw,7rem)}
.rates{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);
}
.rate{border:1px solid var(--line);background:var(--charcoal);padding:clamp(1.5rem,3vw,2.2rem)}
.rate__tag{color:var(--ember);display:block;margin-bottom:1.1rem}
.rate h3{font-family:var(--serif);font-weight:390;font-size:1.35rem;margin-bottom:.5rem}
.rate__price{font-size:1.05rem;margin-bottom:.9rem}
.rate__price em{font-family:var(--serif);font-style:normal;color:var(--bone);font-size:1.25rem}
.rate__price .mono{color:var(--smoke)}
.rate>p:last-child{color:var(--bone-dim);font-size:.95rem}

.factors{
  max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;padding:0 var(--gutter);
  list-style:none;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
}
.factors li{
  display:flex;align-items:center;gap:.7rem;
  border:1px solid var(--line);padding:.65rem 1.1rem;
  color:var(--bone-dim);font-size:.9rem;
}
.factors li .mono{color:var(--ember)}

.estimator{
  width:min(640px,calc(100% - 2*var(--gutter)));margin:clamp(2.6rem,5vw,4rem) auto 0;
  border:1px solid var(--line);background:var(--ash);
  padding:clamp(1.6rem,3.5vw,2.6rem);
}
.estimator__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.estimator__title{font-family:var(--serif);font-weight:390;font-size:1.5rem}
.estimator__tabs{display:flex;border:1px solid var(--line);margin-bottom:1.4rem}
.estimator__tab{
  flex:1;background:none;border:0;color:var(--bone-dim);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.75rem;transition:.3s var(--ease);
}
.estimator__tab.is-active{background:var(--oxblood-deep);color:var(--bone)}
.estimator__row{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.1rem}
.estimator__row>span{flex:none;width:11.5rem;color:var(--bone-dim);font-size:.92rem}
.estimator__row output{color:var(--ember);font-family:var(--mono)}
.estimator__row input[type=range]{flex:1;accent-color:var(--ember);cursor:pointer}
.estimator__seg{display:flex;border:1px solid var(--line);flex:1}
.estimator__seg button{
  flex:1;background:none;border:0;color:var(--bone-dim);cursor:pointer;
  font-size:.85rem;padding:.6rem;transition:.25s var(--ease);
}
.estimator__seg button.is-active{background:var(--ember-soft);color:var(--ember)}
.estimator__result{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1.4rem;
}
.estimator__result .mono{color:var(--smoke)}
.estimator__figure{font-family:var(--serif);font-size:clamp(1.7rem,3.5vw,2.3rem);color:var(--bone)}
.estimator__cta{margin-top:1.4rem}
.estimator__fine{font-size:.85rem;margin-top:1.1rem;max-width:48ch}

@media(max-width:900px){.rates{grid-template-columns:1fr}}
@media(max-width:560px){
  .estimator__row{flex-direction:column;align-items:flex-start;gap:.5rem}
  .estimator__row>span{width:auto}
  .estimator__row input[type=range]{width:100%}
  .estimator__seg{width:100%}
}

/* ══ 9 · HYGIENE ══ */
.hygiene{background:var(--charcoal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hygiene__head{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--gutter) 2.5rem}
.hygiene__head .sec-lead{max-width:50ch}
.seals{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(4rem,9vw,7rem);list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.seal{text-align:left}
.seal__ring{
  display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
  border:2px solid var(--oxblood);color:var(--ember);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;line-height:1.3;text-align:center;
  transform:rotate(-6deg);margin-bottom:1.3rem;position:relative;
}
.seal__ring::after{content:"";position:absolute;inset:5px;border:1px dashed var(--ring-soft);border-radius:50%}
.seal h3{font-family:var(--serif);font-weight:360;font-size:1.3rem;margin-bottom:.5rem}
.seal p{color:var(--smoke);font-size:.9rem;max-width:26ch}

/* ══ 9 · CLIENT STORIES ══ */
.stories{padding-bottom:clamp(4rem,8vw,6rem)}
.stories__row{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(1.5rem,5vw,4rem);padding:1.5rem var(--gutter) 0;flex-wrap:wrap;
}
.shot-card{
  width:min(72vw,300px);background:var(--charcoal);
  border:1px solid var(--line);border-radius:22px;padding:.55rem;
  transform:rotate(var(--rot,0));
  box-shadow:0 30px 60px -25px var(--shadow-soft);
  transition:transform .45s var(--ease);
}
.shot-card:hover{transform:rotate(0) scale(1.02)}
.shot-card img{width:100%;border-radius:16px}
.shot-card figcaption{text-align:center;color:var(--smoke);padding:.8rem .2rem .5rem}
.stories__more{text-align:center;margin-top:2.5rem}

/* ══ 10 · FAQ ══ */
.faq{padding-bottom:clamp(4.5rem,9vw,7rem)}
.faq .sec-head{padding-top:clamp(4rem,9vw,7rem)}
.faq__list{max-width:780px;margin:0 auto;padding:0 var(--gutter);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:1.3rem .2rem;cursor:pointer;list-style:none;
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__no{color:var(--smoke);flex:none;transition:color .3s var(--ease)}
.faq__q{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:390;flex:1}
.faq__mark{position:relative;flex:none;width:.85rem;height:.85rem;align-self:center}
.faq__mark::before,.faq__mark::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--ember);
  transition:transform .35s var(--ease);
}
.faq__mark::before{width:100%;height:1px}
.faq__mark::after{width:1px;height:100%}
.faq__item[open] .faq__mark::after{transform:scaleY(0)}
.faq__item[open] .faq__no{color:var(--ember)}
.faq__item summary:hover .faq__q{color:var(--ember)}
.faq__a{padding:0 .2rem 1.5rem;color:var(--bone-dim);max-width:58ch}
.faq__a a{color:var(--bone);border-bottom:1px solid var(--oxblood)}
.faq__a a:hover{color:var(--ember);border-bottom-color:var(--ember)}
@media(min-width:701px){.faq__a{padding-left:calc(1.1rem + 2.6em)}}
.faq__more{text-align:center;margin-top:2.6rem}

/* ══ cta band ══ */
.ctaband{
  max-width:var(--maxw);margin:0 auto;padding:clamp(2.2rem,5vw,3.5rem) var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,3vw,2.5rem);
  flex-wrap:wrap;text-align:center;
}
.ctaband__txt{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--bone-dim)}

/* ══ 12 · CONSULTATION ══ */
.consult{background:var(--charcoal);border-top:1px solid var(--line);padding-bottom:clamp(4rem,9vw,7rem)}
.consult .sec-head{padding-top:clamp(4rem,9vw,7rem)}
.consult__form{width:min(760px,calc(100% - 2*var(--gutter)));margin:0 auto}
.consult__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.consult__field{display:flex;flex-direction:column;gap:.45rem}
.consult__field--full{grid-column:1/-1}
.consult__field .mono{color:var(--ember)}
.consult__field input,.consult__field textarea,.consult__field select{
  background:var(--ash);border:1px solid var(--line);color:var(--bone);
  font-family:var(--sans);font-size:.95rem;padding:.8rem .9rem;
  transition:border-color .3s var(--ease);border-radius:0;-webkit-appearance:none;appearance:none;
}
.consult__field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ember) 50%),linear-gradient(135deg,var(--ember) 50%,transparent 50%);
  background-position:calc(100% - 1.2rem) 50%,calc(100% - .85rem) 50%;
  background-size:.35rem .35rem;background-repeat:no-repeat;
}
.consult__field textarea{resize:vertical;min-height:5.5rem}
.consult__field :is(input,textarea,select):focus{outline:none;border-color:var(--ember)}
.consult__field ::placeholder{color:var(--smoke)}
.consult__actions{margin-top:1.6rem;display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap}
.consult__actions .stamp{border:0;cursor:pointer;background:none;font:inherit}
.consult__fine{font-size:.85rem;max-width:44ch}
@media(max-width:560px){.consult__grid{grid-template-columns:1fr}}

/* ══ floating whatsapp ══ */
.wafab{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;
  width:3.2rem;height:3.2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--oxblood-deep);border:1px solid var(--oxblood);color:var(--bone);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.wafab:hover{transform:translateY(-3px);background:var(--oxblood)}
@media(max-width:700px){.wafab{display:none}} /* mobile has the bookbar */

/* ══ visit map ══ */
.visit__map{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(4rem,9vw,6rem)}
.visit__map iframe{
  width:100%;height:clamp(260px,38vw,380px);border:1px solid var(--line);display:block;
  filter:var(--map-filter);
}
.visit__map-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-top:.9rem}

.foot__links a{color:var(--bone-dim);transition:color .3s var(--ease)}
.foot__links a:hover{color:var(--ember)}

/* ══ 13 · VISIT ══ */
.visit{border-top:1px solid var(--line)}
.visit__grid{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.visit__copy .sec-title{margin:.4rem 0 1.4rem}
.visit__copy>p{color:var(--bone-dim);max-width:40ch}
.contact{margin:2.4rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
.contact dt{color:var(--ember);margin-bottom:.4rem}
.contact dd{font-size:1.05rem;line-height:1.4}
.contact a{border-bottom:1px solid var(--line);transition:.3s}
.contact a:hover{border-bottom-color:var(--ember)}
.visit__cta{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;margin-top:1rem}

.visit__ig{display:block;position:relative;border:1px solid var(--line);padding:.7rem;background:var(--charcoal)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.ig-grid img{aspect-ratio:1;object-fit:cover;filter:grayscale(.3) contrast(1.05);transition:filter .5s var(--ease)}
.visit__ig:hover .ig-grid img{filter:grayscale(0)}
.ig-grid__cta{display:block;text-align:center;margin-top:.8rem;color:var(--ember)}

/* ══ footer ══ */
.foot{border-top:1px solid var(--line);margin-top:2rem}
.foot__lockup{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:clamp(3rem,6vw,4.5rem) var(--gutter) 1.5rem;text-align:center;
}
.foot__logo{width:min(72vw,260px);height:auto;margin-bottom:.35rem}
.foot__deva{font-family:var(--deva);color:var(--smoke);font-size:.85rem;margin-top:.3rem}
.foot__row{max-width:var(--maxw);margin:0 auto;padding:1.5rem var(--gutter) 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

/* ══ mobile booking bar ══ */
.bookbar{display:none}

/* ══ lightbox ══ */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(6,6,7,.94);backdrop-filter:blur(8px);display:grid;place-items:center;padding:5vw;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__fig{max-width:min(90vw,640px);text-align:center;transform:scale(.96);transition:transform .4s var(--ease)}
.lightbox.is-open .lightbox__fig{transform:none}
.lightbox__fig img{max-height:82vh;width:auto;margin:0 auto;border:1px solid var(--line)}
.lightbox__fig figcaption{margin-top:1rem;color:var(--bone-dim)}
.lightbox__close{position:absolute;top:1.4rem;right:1.8rem;width:44px;height:44px;border:1px solid var(--line);background:none;color:var(--bone);font-size:1.1rem;cursor:pointer;border-radius:50%;transition:.3s}
.lightbox__close:hover{border-color:var(--ember);color:var(--ember)}
/* the lightbox is a photo viewer — always dark, in both themes */
.lightbox{--ink:#0A0A0A;--bone:#F1F1EE;--bone-dim:#BDBDBA;--line:#3A3A3A;--ember:#E9E9E6}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:900px){
  .nav__links{position:fixed;inset:0 0 auto;top:0;flex-direction:column;background:var(--glass-strong);backdrop-filter:blur(16px);padding:6rem var(--gutter) 3rem;gap:1.6rem;transform:translateY(-100%);transition:transform .45s var(--ease);height:auto;border-bottom:1px solid var(--line)}
  .nav__links.is-open{transform:none}
  .nav__links a{font-size:1.4rem}
  .nav__wordmark{width:86px}
  .nav__burger{display:flex;order:3}
  .nav .stamp--sm{margin-left:auto}

  .hero{justify-content:flex-start}

  .session{grid-template-columns:1fr}
  .session__video{max-width:340px}

  .piercing__grid{grid-template-columns:1fr}
  .piercing__detail{margin-top:clamp(1.5rem,8vw,3rem)}

  .studio__grid{grid-template-columns:1fr 1fr;gap:1rem}
  /* the artist shot already appears in the archive on small screens — skip the duplicate */
  .studio__img--tall{display:none}
  .studio__copy{grid-column:1/3;padding-top:0}

  .steps{grid-template-columns:1fr 1fr}
  .seals{grid-template-columns:1fr 1fr}
  .visit__grid{grid-template-columns:1fr}
  .index__desc{display:none}
  .index__row{grid-template-columns:auto 1fr auto}
}

/* ── mobile archive: 2-col masonry instead of drag wall ── */
@media(max-width:700px){
  .hero__strip{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:.9rem;padding-bottom:.6rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .hero__strip::-webkit-scrollbar{display:none}
  .hero__shot{flex:0 0 76vw;scroll-snap-align:center;transform:none}
  .hero__shot--mid img{aspect-ratio:16/10}

  .flash{overflow:visible;cursor:auto;padding:0}
  .flash__track{
    display:block;width:auto;columns:2;column-gap:.9rem;
    padding:1rem var(--gutter) .5rem;transform:none !important;
  }
  .piece,.piece--md,.piece--sm{
    width:100%;display:block;break-inside:avoid;
    margin:0 0 1.4rem;transform:none;
  }
  .piece figcaption{margin-top:.55rem;font-size:.92rem}
  .piece figcaption em{display:block;font-size:.74rem;margin-top:.1rem}
  .piece--more{aspect-ratio:auto;padding:1.6rem 0}
  .flash__hint{display:none}

  .story__frame{width:min(92vw,calc(70vh * .8))}

  .bookbar{
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    display:flex;gap:.6rem;
    padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background:var(--glass);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .45s var(--ease);
  }
  .bookbar.is-on{transform:none}
  .bookbar a{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
    text-align:center;padding:.9em 1em;border-radius:2px;
  }
  .bookbar__main{flex:1.4;background:var(--oxblood-deep);border:1.5px solid var(--oxblood);color:var(--bone)}
  .bookbar__alt{flex:1;border:1px solid var(--line);color:var(--bone-dim)}
  .foot{padding-bottom:4.5rem}
}

@media(max-width:560px){
  .hero__brandname{font-size:clamp(2.6rem,13.5vw,4.2rem)}
  .hero__deva{font-size:.98rem}
  .hero__strap{font-size:.64rem;letter-spacing:.14em}
  .steps{grid-template-columns:1fr}
  .seals{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .sec-head,.hygiene__head{padding-top:4rem}
  .index__desc{display:none}
  .story-static{grid-template-columns:1fr}
  .stories__row{gap:1.6rem}
  .shot-card{width:min(76vw,300px)}
  .studio__grid{grid-template-columns:1fr}
  .studio__copy{grid-column:auto}
  .foot__row{justify-content:center;text-align:center}
}

/* ══ screenshot mode ══ */
html.shot{scroll-behavior:auto}
html.shot .reveal{opacity:1 !important;transform:none !important;filter:none !important}
html.shot .needle line{stroke-dashoffset:0 !important}
html.shot .hero{min-height:auto !important}
html.shot .sec-title em::after{transform:scaleX(1) !important}
html.shot .storysec .story{display:none !important}
html.shot .storysec .story-static{display:grid !important}
html.shot .grain{display:none}
html.shot body::after{display:none}
html.shot .bookbar{transform:none !important}

/* ══ reduced motion ══ */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.001s !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none}
  .grain{display:none}
  .marquee__track{animation:none}
  .needle line{stroke-dashoffset:0}
  .storysec .story{display:none !important}
  .storysec .story-static{display:grid !important}
}

/* ══ clickable images + walk steps ══ */
.hero__shot img,.walk__card img{cursor:pointer}
.walk:not(.walk--static) .walk__step{cursor:pointer}

/* ══ walkthrough on phones: same pinned deck, compact layout ══ */
@media(prefers-reduced-motion:no-preference) and (max-width:700px){
  .walk:not(.walk--static){min-height:calc(100vh + 3 * 52vh)}
  .walk:not(.walk--static) .walk__sticky{justify-content:flex-start;padding:4.6rem 0 1.6rem;min-height:100svh}
  .walk:not(.walk--static) .walk__inner{display:flex;flex-direction:column;gap:1.1rem;align-items:stretch}
  .walk:not(.walk--static) .walk__route{flex-direction:row;flex-wrap:wrap;gap:.45rem;align-self:auto;padding:0;justify-content:flex-start}
  .walk:not(.walk--static) .walk__route::before,.walk:not(.walk--static) .walk__fill{display:none}
  .walk:not(.walk--static) .walk__step{
    border:1px solid var(--line);border-radius:99px;
    padding:.3rem .75rem .3rem .5rem;gap:.4rem;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .walk:not(.walk--static) .walk__dot{width:1.2rem;height:1.2rem;border:0;background:none;box-shadow:none;font-size:.66rem}
  .walk:not(.walk--static) .walk__step-label{font-size:.84rem}
  .walk:not(.walk--static) .walk__step.is-active{border-color:var(--ember);background:var(--ember-soft)}
  .walk:not(.walk--static) .walk__step.is-active .walk__dot{background:none;box-shadow:none;color:var(--ember)}
  .walk:not(.walk--static) .walk__stage{aspect-ratio:4/4.6}
  .walk:not(.walk--static) .walk__cap{padding:1rem}
  .walk:not(.walk--static) .walk__cap-title{font-size:1.3rem}
  .walk:not(.walk--static) .walk__cap-note{font-size:.88rem}
}

/* ══ black & white: all media strictly monochrome ══ */
.visit__map iframe{filter:var(--map-filter)!important}

/* ══ placeholder tag ══ */
.ph-tag{display:inline-block;color:var(--smoke);border:1px dashed var(--line);padding:.3rem .7rem}

/* ══ why band + stats ══ */
.why{border-bottom:1px solid var(--line);padding:clamp(2.6rem,6vw,4.5rem) var(--gutter);max-width:100%}
.why__grid{
  max-width:var(--maxw);margin:0 auto;list-style:none;
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
}
.why__grid li{
  display:flex;align-items:center;gap:.65rem;
  border:1px solid var(--line);padding:.6rem 1.05rem;
  color:var(--bone-dim);font-size:.92rem;
}
.why__grid li .mono{color:var(--ember)}
.stats{
  max-width:min(980px,100%);margin:clamp(2.4rem,5vw,3.6rem) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center;
}
.stat__n{display:block;font-family:var(--serif);font-weight:340;font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1;color:var(--bone)}
.stat__l{display:block;margin-top:.55rem;color:var(--smoke)}
.why__note{text-align:center;margin-top:1.8rem}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}}

/* ══ resident artist ══ */
.artist{
  max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) var(--gutter);
  display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.artist__photo{position:relative;transform:rotate(-1.2deg)}
.artist__photo::before{content:"";position:absolute;inset:-10px;border:1px solid var(--line);transform:rotate(2deg);pointer-events:none}
.artist__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.artist__name{font-family:var(--serif);font-weight:340;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.05;margin:.9rem 0}
.artist__name em{font-style:italic}
.artist__bio{color:var(--bone-dim);max-width:52ch}
.artist__copy>div{margin-top:1.4rem}
@media(max-width:800px){.artist{grid-template-columns:1fr}.artist__photo{max-width:340px}}

/* ══ before / after slider ══ */
.ba{width:min(560px,calc(100% - 2*var(--gutter)));margin:0 auto clamp(4rem,8vw,6rem)}
.ba__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.ba__kicker{color:var(--ember)}
.ba__frame{position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;touch-action:pan-y}
.ba__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__under{z-index:1}
.ba__top{position:absolute;inset:0;z-index:2;will-change:clip-path}
.ba__handle{
  position:absolute;top:0;bottom:0;left:50%;z-index:3;width:1px;background:var(--bone);
  pointer-events:none;transform:translateX(-.5px);
}
.ba__handle::after{
  content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);border:1px solid var(--bone);color:var(--bone);font-size:.95rem;
}
.ba__range{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none;
}
.ba__labels{display:flex;justify-content:space-between;margin-top:.7rem;color:var(--smoke)}

/* ══ theme plumbing ══ */
/* brand PNGs are bone-white art on transparency — flip to ink on paper */
:root[data-theme="light"] .nav__mark img,
:root[data-theme="light"] .nav__wordmark,
:root[data-theme="light"] .foot__logo{filter:invert(1)}

/* the pinned-walkthrough caption sits on a dark photo scrim — its text stays light in light theme */
@media(prefers-reduced-motion:no-preference){
  :root[data-theme="light"] .walk:not(.walk--static) .walk__cap{--bone:#F1F1EE;--bone-dim:#D6D4CD;--ember:#E9E9E6}
}
/* theme-flip crossfade fallback for browsers without the View Transitions API */
html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),filter .45s var(--ease)!important;
}