/* ============================================================
   K. ARTISTRY — Kyla Rossouw
   Fine line & illustrative tattoo · Pretoria
   ============================================================ */

/* ---------- tokens ---------- */
/* Palette and type are fixed by the K Artistry brand guide
   (_brand/K Artistry Brand Assets/README.txt). Oxblood is accent only —
   "one diamond, one rule, one stamp", under 5% of any surface — so it is
   deliberately NOT used for headline italics, links or body accents. */
:root{
  --ink:      #0B0B0C;   /* Ground. The default state of everything. */
  --ink-2:    #0F0F11;
  --ink-3:    #151517;
  --ash:      #2A2A2D;   /* Panels, rules, garment blanks. Structural. */

  --bone:     #E9E4D9;   /* Every mark and every letter. Warm, never white. */
  --bone-2:   #C6C0B4;
  --dim:      #8A857C;
  --dim-2:    #5E5A53;

  --oxblood:  #8A1C1C;   /* Accent only. Use sparingly — see note above. */

  --line:     rgba(233,228,217,.10);
  --line-2:   rgba(233,228,217,.18);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --gut: clamp(56px, 11vh, 140px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden — `hidden` would make body a scroll container and
     kill position:sticky for the scroll-driven gallery */
  overflow-x:clip;
}
html{ overflow-x:clip; }

/* film grain, shared by the hero and studio plates */
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none; opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--oxblood); color:var(--bone); }

:focus-visible{
  outline:1px solid var(--oxblood);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--oxblood); color:var(--bone); padding:12px 20px;
}
.skip:focus{ left:0; }

/* ---------- type primitives ---------- */
.eyebrow{
  font-size:10.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--dim);
  font-weight:400;
  margin:0 0 22px;
}
.sec__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px,6.4vw,86px);
  line-height:.98;
  letter-spacing:-.015em;
  margin:0 0 24px;
}
.sec__title em{
  font-style:italic;
  color:var(--bone);
}
.sec__lede{
  color:var(--bone-2);
  max-width:44ch;
  font-size:clamp(15px,1.15vw,18px);
}
.sec__lede b{ color:var(--bone); font-weight:400; }

/* the "one diamond" from the brand guide — the only oxblood in the hero */
.dia{
  display:inline-block; vertical-align:middle;
  width:5px; height:5px; margin:0 .5em .1em;
  background:var(--oxblood);
  transform:rotate(45deg);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 30px;
  border-radius:999px;
  border:1px solid transparent;
  /* must be explicit — a <button> otherwise falls back to the UA's
     near-white `buttonface`, which made the ghost variant unreadable */
  background:transparent;
  font-size:12px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--bone); color:var(--ink); }
.btn--solid:hover{ background:var(--bone-2); }
.btn--ghost{ border-color:var(--line-2); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--bone); background:rgba(233,228,217,.06); }
.btn:active{ transform:scale(.975); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; gap:28px;
  padding:20px var(--pad);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease),
             border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,11,12,.86);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  padding-top:14px; padding-bottom:14px;
}
.nav__mark{
  display:flex; align-items:center; gap:15px;
  margin-right:auto;
  padding:4px 0;   /* clear space equals the cap height of the K */
}
/* The supplied SVG leaves two classes for the host page to define:
   `.k` is live Cormorant type (the letterform itself), and `.solid`
   marks the shapes that fill rather than stroke — the eyes, the skull
   and the wing dots. Without these the K falls back to a default serif
   and the moth's details come out hollow. */
.mark .k{ font-family:var(--serif); font-weight:300; }
.mark .solid{ fill:#E9E4D9; }

.nav__mark .mark{
  display:block; width:auto; height:50px;
  transition:height .5s var(--ease);
}
.nav.is-stuck .nav__mark .mark{ height:42px; }
.nav__rule{ width:1px; height:30px; background:var(--line-2); flex:0 0 auto; }
.nav__word{
  font-family:var(--serif);
  font-size:15px; font-weight:400;
  letter-spacing:.34em; color:var(--bone);
  padding-left:1px;
}
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); position:relative; padding:4px 0;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--oxblood);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ height:40px; padding:0 22px; font-size:11px; }

.nav__burger{
  display:none; width:42px; height:42px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.nav__burger span{
  display:block; height:1px; background:var(--bone);
  transition:transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1){ width:24px; }
.nav__burger span:nth-child(2){ width:16px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ width:24px; transform:translateY(-3.5px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:80;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--pad) 48px;
  opacity:0; transition:opacity .45s var(--ease);
}
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; }
.menu nav{ display:flex; flex-direction:column; gap:6px; }
.menu nav a{
  font-family:var(--serif); font-size:clamp(34px,10vw,52px);
  line-height:1.18; display:flex; align-items:baseline; gap:16px;
  border-bottom:1px solid var(--line); padding:14px 0;
}
.menu nav a em{
  font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:.22em; color:var(--dim);
}
.menu__foot{
  margin-top:40px; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:flex-end;
  padding:clamp(110px,16vh,150px) var(--pad) clamp(80px,12vh,120px);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* the back sits low-left in the source, so bias the crop down and left —
     that cuts the pillows off the top and brings her into frame */
  object-fit:cover; object-position:24% 78%;
  filter:grayscale(.22) contrast(1.16) brightness(1.14);
  transform:scale(1.06);
  animation:heroDrift 30s var(--ease) infinite alternate;
}
@keyframes heroDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(2.2%,-1.6%,0); }
}
/* dark falls from the right, so the work stays lit on the left */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(10,10,10,0) 4%, rgba(10,10,10,.14) 26%,
                    rgba(10,10,10,.62) 50%, rgba(10,10,10,.9) 70%, var(--ink) 92%),
    linear-gradient(to top, var(--ink) 0%, rgba(10,10,10,.5) 16%, rgba(10,10,10,0) 46%);
}
.hero__vig{
  position:absolute; inset:0;
  background:radial-gradient(78% 68% at 34% 48%, rgba(10,10,10,0) 38%, rgba(10,10,10,.72) 100%);
  mix-blend-mode:multiply;
}

/* vertical credit rail down the left edge */
.hero__rail{
  position:absolute; left:calc(var(--pad) - 4px); top:50%; z-index:3;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  margin:0; font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--dim);
}
.hero__rail::after{
  content:""; position:absolute; left:50%; bottom:-64px;
  width:1px; height:52px; background:linear-gradient(to bottom,var(--bone-2),transparent);
}

.hero__inner{
  position:relative; z-index:4;
  max-width:min(700px,62vw);
  text-align:right;
  margin-left:auto;
}
.hero__inner .eyebrow{ margin-bottom:18px; }
.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(42px,6.2vw,94px);
  line-height:.96;
  letter-spacing:-.022em;
  margin:0 0 28px;
}
.hero__title span{ display:block; }
.hero__title em{ font-style:italic; color:var(--bone); }
.hero__sub{
  max-width:42ch; margin-left:auto; color:var(--bone-2);
  font-size:clamp(15px,1.28vw,19px);
  margin-bottom:38px;
}
.hero__sub strong{ color:var(--bone); font-weight:400; }
.hero__acts{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }

.hero__scroll{
  position:absolute; left:50%; bottom:clamp(26px,4vh,44px); z-index:4;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim);
}
.hero__scroll i{
  display:block; width:1px; height:44px;
  background:linear-gradient(to bottom, transparent, var(--bone-2));
  transform-origin:top;
  animation:scrollPulse 2.6s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%,100%{ transform:scaleY(.3); opacity:.45; }
  50%    { transform:scaleY(1);  opacity:1; }
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sec{ padding:var(--gut) var(--pad); position:relative; }
.sec--work{ padding-left:0; padding-right:0; }
.sec--work .sec__head{ padding:0 var(--pad); }
.sec__head{ max-width:760px; margin:0 0 clamp(40px,6vw,72px); }

.sec--studio{ background:var(--ink-2); }
.sec--care{ background:var(--ink-2); }

/* ============================================================
   ARC GALLERY
   base state  = horizontal scroll-snap strip (works with no JS)
   is-3d state = draggable 3D ring, added by JS
   The .pin wrapper only claims extra height once JS is running,
   so a no-JS / reduced-motion visit gets an ordinary strip.
   ============================================================ */
.pin{ position:relative; }
html.js .pin{ height:310vh; }
html.js .pin__stick{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(18px,3vh,34px);
}

.arc__prog{
  height:1px; margin:0 var(--pad);
  background:var(--line);
  position:relative; overflow:hidden;
}
.arc__prog i{
  position:absolute; inset:0 auto 0 0;
  width:0%; background:var(--oxblood);
  transition:width .25s linear;
}
html:not(.js) .arc__prog{ display:none; }

.arc{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.arc::-webkit-scrollbar{ display:none; }

.arc__stage{
  display:flex;
  gap:22px;
  padding:10px calc(50vw - 172px);
  align-items:flex-start;
}

.arc__card{
  flex:0 0 344px;
  width:344px;
  scroll-snap-align:center;
  display:block;
  background:none; border:0; padding:0; margin:0;
  text-align:left; cursor:pointer;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.arc__frame{
  display:block;              /* it's a <span> — without this the inline
                                 baseline gap inflates the card height */
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line);
}
.arc__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.18) contrast(1.04);
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.arc__card:hover .arc__frame img{ transform:scale(1.045); filter:grayscale(0) contrast(1.06); }

.arc__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.55), transparent 42%);
  opacity:.85;
  pointer-events:none;
}
.arc__tag{
  position:absolute; left:14px; top:14px; z-index:2;
  font-size:10px; letter-spacing:.22em;
  color:var(--bone);
  background:rgba(10,10,10,.5);
  backdrop-filter:blur(6px);
  padding:5px 9px;
}
.arc__cap{
  display:flex; align-items:baseline; gap:10px;
  padding:14px 2px 0;
}
.arc__cap b{
  font-family:var(--serif); font-size:20px; font-weight:400;
  letter-spacing:.005em;
}
.arc__cap i{
  font-style:normal; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
  margin-left:auto;
}

/* --- 3D upgrade --- */
.arc.is-3d{
  overflow:visible;
  scroll-snap-type:none;
  height:clamp(470px,62vh,660px);   /* JS overrides once it has measured a card */
  /* short perspective on purpose — it's what makes neighbouring cards fall
     away in scale instead of sitting on a near-flat line */
  perspective:820px;
  perspective-origin:50% 46%;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.arc.is-3d.is-drag{ cursor:grabbing; }

.arc.is-3d .arc__stage{
  position:absolute; inset:0;
  display:block; padding:0; gap:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.arc.is-3d .arc__card{
  position:absolute;
  left:50%; top:50%;
  width:var(--cw);
  margin-left:calc(var(--cw) / -2);
  margin-top:calc(var(--ch) / -2);
  will-change:transform,opacity;
  backface-visibility:hidden;
}
/* depth + speed blur live here, one level in from the 3D-transformed card */
.arc.is-3d .arc__frame{ will-change:filter; }
/* pointer-events are driven per-frame from JS, by card visibility */
.arc.is-3d .arc__card:hover .arc__frame img{ transform:none; }
.arc.is-3d .arc__card.is-front:hover .arc__frame img{ transform:scale(1.04); filter:grayscale(0); }
.arc.is-3d .arc__cap{ opacity:0; transition:opacity .5s var(--ease); }
.arc.is-3d .arc__card.is-front .arc__cap{ opacity:1; }

/* arc footer ui */
.arc__ui{
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin-top:36px; padding:0 var(--pad);
}
.arc__nav{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-2); background:none;
  cursor:pointer; color:var(--bone-2);
  display:grid; place-items:center; font-size:15px;
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.arc__nav:hover{ border-color:var(--bone); color:var(--bone); background:rgba(233,228,217,.05); }
.arc__meta{
  display:flex; align-items:baseline; gap:9px;
  margin:0; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
  min-width:230px; justify-content:center;
}
.arc__meta #arcNum{ color:var(--oxblood); }
.arc__sep{ color:var(--dim-2); }
.arc__name{
  font-family:var(--serif); font-size:17px;
  letter-spacing:.02em; text-transform:none;
  color:var(--bone); margin-left:8px;
}

/* ============================================================
   STUDIO
   ============================================================ */
.studio{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,6vw,90px);
  align-items:center;
  max-width:1320px; margin:0 auto;
}
.studio__imgs{ position:relative; }
.studio__img{ margin:0; overflow:hidden; border:1px solid var(--line); }
.studio__img img{ width:100%; filter:grayscale(.3) contrast(1.05) brightness(.92); }
.studio__img--a{ width:78%; }
.studio__img--b{
  width:52%; position:absolute; right:0; bottom:-13%;
  border:1px solid var(--line-2);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.studio__copy p{ color:var(--bone-2); max-width:50ch; }
.studio__facts{
  margin-top:34px; border-top:1px solid var(--line);
}
.studio__facts li{
  display:flex; gap:20px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line);
  font-size:13.5px; color:var(--bone);
}
.studio__facts span{
  flex:0 0 96px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim);
}

/* ============================================================
   STYLES
   ============================================================ */
.styles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  border-top:1px solid var(--line);
}
.style{
  padding:34px 30px 38px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  position:relative;
  transition:background .5s var(--ease);
}
.style:hover{ background:var(--ink-2); }
.style__n{
  font-size:10px; letter-spacing:.24em; color:var(--dim);
  display:block; margin-bottom:26px;
}
.style h3{
  font-family:var(--serif); font-size:27px; font-weight:400;
  margin-bottom:14px; line-height:1.15;
}
.style p{ font-size:14px; color:var(--dim); margin-bottom:20px; }
.style__price{
  font-style:normal; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-2);
  border-top:1px solid var(--line); padding-top:14px; display:block;
}
.rates{
  margin-top:44px;
  display:grid; grid-template-columns:auto auto 1fr;
  gap:clamp(28px,5vw,64px); align-items:start;
}
.rate{ display:flex; flex-direction:column; gap:6px; }
.rate__n{
  font-family:var(--serif); font-size:clamp(34px,4.4vw,54px);
  line-height:1; letter-spacing:-.01em; color:var(--bone);
}
.rate__u{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
}
.rates__note{
  margin:0; max-width:46ch; font-size:13.5px; color:var(--dim);
  border-left:1px solid var(--line); padding-left:clamp(20px,3vw,34px);
}
@media (max-width:860px){
  .rates{ grid-template-columns:auto auto; gap:32px; }
  .rates__note{ grid-column:1 / -1; border-left:0; padding-left:0; }
}

/* ============================================================
   PROCESS + CARE
   ============================================================ */
.care{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(38px,6vw,86px);
  max-width:1320px; margin:0 auto;
}
.care__h{
  font-family:var(--serif); font-size:26px; font-weight:400;
  padding-bottom:16px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.steps li{ display:flex; gap:22px; padding:16px 0; }
.steps span{
  flex:0 0 auto; font-size:10px; letter-spacing:.2em;
  color:var(--dim); padding-top:5px;
}
.steps strong{ font-weight:400; font-size:15.5px; display:block; margin-bottom:5px; }
.steps p{ font-size:13.5px; color:var(--dim); margin:0; }

.care__list li{
  padding:13px 0 13px 22px; position:relative;
  border-bottom:1px solid var(--line);
  font-size:14px; color:var(--dim);
}
.care__list li::before{
  content:""; position:absolute; left:0; top:22px;
  width:8px; height:1px; background:var(--oxblood);
}
.care__list strong{ color:var(--bone); font-weight:400; }
.care__flag{
  margin-top:24px; padding:16px 18px;
  border-left:1px solid var(--oxblood);
  background:var(--ink-3);
  font-size:13px; color:var(--bone-2);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:900px; border-top:1px solid var(--line); }
.q{ border-bottom:1px solid var(--line); }
.q summary{
  list-style:none; cursor:pointer;
  padding:24px 44px 24px 0; position:relative;
  font-family:var(--serif); font-size:clamp(19px,2.1vw,25px);
  font-weight:400; line-height:1.3;
  transition:color .35s var(--ease);
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ color:var(--bone); }
.q summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:11px; height:1px; background:var(--bone-2);
  box-shadow:0 0 0 0 transparent;
  transition:transform .4s var(--ease);
}
.q summary::before{
  content:""; position:absolute; right:13px; top:50%;
  width:1px; height:11px; background:var(--bone-2);
  transform:translateY(-50%);
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.q[open] summary::before{ transform:translateY(-50%) rotate(90deg); opacity:0; }
.q p{
  padding:0 40px 26px 0; margin:0;
  font-size:14.5px; color:var(--dim); max-width:70ch;
}

/* ============================================================
   BOOK
   ============================================================ */
.book{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(38px,6vw,92px);
  max-width:1320px; margin:0 auto;
}
.book__copy p{ color:var(--bone-2); max-width:42ch; }
.book__alt{ margin-top:26px; font-size:13.5px; color:var(--dim); }
.book__alt a{ color:var(--bone); border-bottom:1px solid var(--line-2); padding-bottom:1px; }
.book__alt a:hover{ color:var(--bone); border-color:var(--bone); }

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.field{ grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; }
.field--half{ grid-column:span 1; }
.field label{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.field input,.field select,.field textarea{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:14px 16px;
  font-size:14.5px; font-weight:300;
  border-radius:0;
  transition:border-color .35s var(--ease), background .35s var(--ease);
  width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; cursor:pointer; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--oxblood); background:var(--ink-3);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--dim-2); }

.field--check{
  flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap;
}
.field--check input{ width:17px; height:17px; accent-color:var(--oxblood); flex:0 0 auto; }
.field--check label{
  letter-spacing:.02em; text-transform:none; font-size:13.5px; color:var(--bone-2);
}
.field__err{
  font-size:11.5px; color:var(--bone-2); min-height:0;
}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{ border-color:var(--oxblood); }

.form__acts{
  grid-column:1 / -1; display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;
}
.form__status{
  grid-column:1 / -1; margin:0; font-size:13px; color:var(--bone-2); min-height:1.2em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(48px,7vw,84px) var(--pad) 36px;
  display:grid; gap:48px;
}
.foot__mark{
  width:clamp(200px,34vw,430px); height:auto;
  opacity:.5;
}
.foot__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px;
}
.foot__cols h4{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px; font-weight:400;
}
.foot__cols a,.foot__cols span{
  display:block; font-size:14px; color:var(--bone-2); padding:3px 0;
}
.foot__cols a:hover{ color:var(--bone); }
.foot__fine{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:24px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2);
  margin:0;
}

/* ============================================================
   VIEWER (full-bleed film strip)
   ============================================================ */
.viewer{
  position:fixed; inset:0; z-index:120;
  background:#060606;   /* fully opaque — nothing from the page behind bleeds */
  opacity:0; transition:opacity .45s var(--ease);
  overflow:hidden;
  touch-action:none;
}
.viewer[hidden]{ display:none; }
.viewer.is-open{ opacity:1; }

.viewer__track{
  position:absolute; inset:0 0 168px 0;
  display:flex;
  will-change:transform;
}
.viewer__slide{
  flex:0 0 100%;
  position:relative;
  --px:clamp(16px,5vw,90px);
  --pt:72px;
  --pb:20px;
}
/* Explicit width/height, not insets and not max-*. A replaced element sizes
   to its intrinsic dimensions when width/height are auto — insets get
   ignored — and max-height:100% is dropped against an auto-sized grid row.
   Only a definite box plus object-fit letterboxes reliably. */
.viewer__slide img{
  position:absolute;
  top:var(--pt); left:var(--px);
  width:calc(100% - var(--px) * 2);
  height:calc(100% - var(--pt) - var(--pb));
  object-fit:contain;
  opacity:0; transform:scale(.985);
  transition:opacity .6s var(--ease), transform .8s var(--ease-out);
}
.viewer__slide img.is-ready{ opacity:1; transform:none; }

.viewer__close{
  position:absolute; top:18px; right:18px; z-index:5;
  width:46px; height:46px; border-radius:50%;
  background:rgba(233,228,217,.06); border:1px solid var(--line);
  cursor:pointer; color:var(--bone); font-size:14px;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.viewer__close:hover{ background:rgba(233,228,217,.14); border-color:var(--bone); }

.viewer__arrow{
  position:absolute; top:50%; z-index:5;
  transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(10,10,10,.5); border:1px solid var(--line);
  color:var(--bone); font-size:16px; cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease), opacity .3s;
}
.viewer__arrow:hover{ background:rgba(233,228,217,.12); border-color:var(--bone); }
.viewer__arrow--l{ left:clamp(10px,2.4vw,30px); }
.viewer__arrow--r{ right:clamp(10px,2.4vw,30px); }

.viewer__bar{
  position:absolute; inset:auto 0 0 0;
  padding:22px var(--pad) 30px;
  border-top:1px solid var(--line);
  background:linear-gradient(to top, var(--ink), rgba(10,10,10,.7));
  display:grid; gap:12px;
}
.viewer__cap{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0;
}
.viewer__cap em{
  font-style:normal; font-size:10.5px; letter-spacing:.24em; color:var(--oxblood);
}
.viewer__cap strong{
  font-family:var(--serif); font-size:clamp(22px,3vw,32px);
  font-weight:400; letter-spacing:.005em;
}
.viewer__cap span{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.viewer__note{ margin:0; font-size:13px; color:var(--dim); max-width:60ch; }
.viewer__dots{ display:flex; gap:6px; flex-wrap:wrap; }
.viewer__dots button{
  width:20px; height:2px; padding:0; border:0; cursor:pointer;
  background:var(--ink-4); transition:background .35s var(--ease);
}
.viewer__dots button:hover{ background:var(--dim); }
.viewer__dots button[aria-current="true"]{ background:var(--oxblood); }

body.is-locked{ overflow:hidden; }

/* ============================================================
   REVEAL — only engages once JS confirms it can un-reveal
   ============================================================ */
html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease-out) var(--d,0s),
             transform .9s var(--ease-out) var(--d,0s);
}
html.js .reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .studio{ grid-template-columns:1fr; }
  .studio__imgs{ max-width:560px; margin-bottom:64px; }
  .care{ grid-template-columns:1fr; }
  .book{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }

  /* no room for a side-by-side split, so split it top/bottom instead:
     the plate holds the top of the screen, the copy sits under it on
     solid black. Nothing important ever ends up behind the type. */
  .hero{
    align-items:flex-end; justify-content:flex-start;
    padding:0 var(--pad) clamp(44px,7vh,72px);
  }
  .hero__bg{
    height:66%; bottom:auto;
    object-position:50% 62%;
    filter:grayscale(.18) contrast(1.14) brightness(1.2);
  }
  .hero__veil{
    background:linear-gradient(to top, var(--ink) 42%, rgba(10,10,10,.9) 52%,
                               rgba(10,10,10,.22) 70%, rgba(10,10,10,.5) 100%);
  }
  .hero__vig{
    background:radial-gradient(94% 44% at 50% 24%, rgba(10,10,10,0) 44%, rgba(10,10,10,.55) 100%);
  }
  .hero__rail,.hero__scroll{ display:none; }
  .hero__inner{ max-width:none; margin-left:0; text-align:left; }
  .hero__sub{ margin-left:0; max-width:34ch; }
  .hero__acts{ justify-content:flex-start; }
  .hero__acts .btn{ flex:1 1 auto; min-width:150px; }

  html.js .pin{ height:280vh; }
  .arc__stage{ padding:10px calc(50vw - 132px); gap:16px; }
  .arc__card{ flex-basis:264px; width:264px; }
  .arc__meta{ min-width:0; }
  .arc__name{ display:none; }
  .arc__nav{ width:52px; height:52px; }   /* thumb-sized */
  .arc__prog{ margin:0 var(--pad); }
  .style{ border-right:0; }
  .viewer__arrow{ display:none; }
  .viewer__track{ inset:0 0 186px 0; }
  .viewer__slide{ --px:16px; --pt:64px; --pb:12px; }
  .form{ grid-template-columns:1fr; }
  .field--half{ grid-column:1 / -1; }
}

@media (max-width:520px){
  .studio__img--a{ width:86%; }
  .studio__img--b{ width:56%; bottom:-9%; }
  .foot__fine{ flex-direction:column; gap:8px; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js .reveal{ opacity:1; transform:none; }
  .hero__bg{ animation:none; }
}