/* ==========================================================================
   House of Hairstylists
   A printed magazine, translated. Bone paper, plum ink, one red per spread.
   ========================================================================== */

/* ---- Tokens ---- */
:root{
  --bone:#FAF6EF;
  --paper:#F1EAE0;
  --sand:#E4D9CA;
  --ink:#180810;
  --plum:#43182B;
  --muted:#6F5A61;
  --rule:rgba(24,8,16,.14);
  --rule-strong:rgba(24,8,16,.30);
  --lip:#D82424;
  --lip-ink:#A81717;

  --serif:"Bodoni Moda",Didot,"Bodoni MT","Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:82rem;
  --ease:cubic-bezier(.22,.68,.16,1);
  --slow:cubic-bezier(.16,.84,.24,1);

  /* Depth. Layered rather than single-blur, so edges stay crisp and the
     falloff reads like paper lifting off paper. */
  --lift-1:0 1px 1px rgba(24,8,16,.05), 0 3px 6px rgba(24,8,16,.05),
           0 8px 18px rgba(24,8,16,.055);
  --lift-2:0 1px 1px rgba(24,8,16,.05), 0 4px 10px rgba(24,8,16,.06),
           0 14px 30px rgba(24,8,16,.08), 0 30px 60px rgba(24,8,16,.07);
  --lift-3:0 2px 3px rgba(24,8,16,.06), 0 10px 24px rgba(24,8,16,.09),
           0 26px 56px rgba(24,8,16,.10), 0 52px 96px rgba(24,8,16,.09);
}

.inverse{
  --lift-1:0 1px 2px rgba(0,0,0,.34), 0 4px 10px rgba(0,0,0,.30);
  --lift-2:0 2px 6px rgba(0,0,0,.38), 0 12px 28px rgba(0,0,0,.36), 0 28px 56px rgba(0,0,0,.30);
  --lift-3:0 3px 8px rgba(0,0,0,.42), 0 18px 40px rgba(0,0,0,.40), 0 48px 92px rgba(0,0,0,.34);
  --bone:#140609;
  --paper:#1E0A12;
  --sand:#2B111C;
  --ink:#F7F1EA;
  --plum:#E6D6DB;
  --muted:#A5919A;
  --rule:rgba(247,241,234,.16);
  --rule-strong:rgba(247,241,234,.34);
  --lip-ink:#FF7264;
  background:var(--bone);
  color:var(--ink);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bone);
  background-image:
    radial-gradient(58rem 40rem at 12% -6%,  rgba(174,122,64,.10), transparent 62%),
    radial-gradient(48rem 36rem at 92% 12%,  rgba(67,24,43,.085),  transparent 60%),
    radial-gradient(64rem 48rem at 50% 118%, rgba(139,91,51,.075), transparent 64%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.64;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain. One composited layer, inert to pointers. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.inverse body::after,body.inverse::after{mix-blend-mode:screen;opacity:.055}

::selection{background:var(--lip);color:#fff}
:focus-visible{outline:2px solid var(--lip-ink);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--bone);
  padding:.75rem 1.25rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---- Page transitions (progressive) ---- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .3s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .5s var(--ease) both}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* ---- Layout ---- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:96rem}
.section{padding-block:clamp(3rem,6.5vw,5.75rem);position:relative;overflow-x:clip}
.section--tight{padding-block:clamp(2.25rem,4.5vw,3.75rem)}
/* Paper bands get their own gentle wash so they do not read as flat slabs. */
.section--paper{
  background:var(--paper);
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%,
    rgba(24,8,16,.028) 100%);
}
.inverse .ftr__word{
  -webkit-text-stroke:1px rgba(247,241,234,.11);
  text-shadow:0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(247,241,234,.05);
}
.inverse .section--paper,.inverse.section--paper{
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.30) 100%);
}
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* ---- Type ---- */
.display{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  line-height:.9;letter-spacing:-.028em;
  font-size:clamp(2.5rem,7.2vw,6.1rem);
  text-wrap:balance;
}
.display em{font-style:italic;letter-spacing:-.014em}

.h-lg{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.8rem,3.7vw,3rem);
  line-height:1.04;letter-spacing:-.02em;text-wrap:balance;
}
.h-lg em{font-style:italic}
.h-md{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.12;letter-spacing:-.012em;
}
.h-sm{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.24;letter-spacing:-.006em;
}

.eyebrow{
  font-size:.625rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--lip);flex:none}
.eyebrow--plain::before{display:none}

.lede{
  font-size:clamp(1rem,1.25vw,1.14rem);
  line-height:1.55;letter-spacing:-.011em;
  color:var(--plum);text-wrap:pretty;
}
.body-lg{font-size:1.0125rem;line-height:1.68}
.muted{color:var(--muted)}
.measure{max-width:38ch}
.measure-wide{max-width:56ch}

.dropcap::first-letter{
  font-family:var(--serif);font-weight:400;
  float:left;font-size:3.3em;line-height:.78;
  padding-right:.08em;margin-top:.07em;color:var(--ink);
}

/* Section opener with a roman folio in the margin */
.opener{
  display:grid;grid-template-columns:5rem minmax(0,1fr);
  gap:0 clamp(1rem,3vw,2.5rem);align-items:start;
  border-top:1px solid var(--rule-strong);padding-top:1.1rem;
  margin-bottom:clamp(1.35rem,2.6vw,2.1rem);
}
.opener__num{
  font-family:var(--serif);font-size:.95rem;letter-spacing:.14em;
  color:var(--muted);padding-top:.2rem;
}
.opener .eyebrow{margin-bottom:clamp(.7rem,1.5vw,1rem)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.65rem;
  font-family:var(--sans);
  font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--bone);
  border:1px solid var(--ink);border-radius:999px;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),transform .4s var(--ease);
}
.btn:hover{background:var(--lip);border-color:var(--lip);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn svg{width:.9rem;height:.9rem;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

.tlink{
  display:inline-flex;align-items:center;gap:.55rem;position:relative;
  font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:.5rem;
}
.tlink::after,.tlink::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
}
.tlink::after{background:var(--rule-strong)}
.tlink::before{
  background:var(--lip);transform:scaleX(0);transform-origin:left;z-index:1;
  transition:transform .55s var(--ease);
}
.tlink:hover::before{transform:scaleX(1)}
.tlink .arw{transition:transform .45s var(--ease)}
.tlink:hover .arw{transform:translateX(5px)}

/* ---- Header ---- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease);
}
.hdr.is-stuck{
  background:color-mix(in srgb,var(--bone) 86%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--rule);
}
.hdr__in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(.9rem,1.7vw,1.3rem);
}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{
  width:1.9rem;height:1.9rem;flex:none;background:var(--ink);
  -webkit-mask:url(../img/mark.png) center/contain no-repeat;
  mask:url(../img/mark.png) center/contain no-repeat;
}
.brand__name{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;
  font-size:1.22rem;line-height:1;letter-spacing:-.01em;white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.3rem)}
.nav a{
  font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  position:relative;padding-block:.35rem;color:var(--plum);
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lip);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.hdr__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.hdr__cta .btn{padding:.72rem 1.4rem;font-size:.68rem}

.burger{
  display:none;width:2.75rem;height:2.75rem;flex:none;
  background:none;border:1px solid var(--rule-strong);border-radius:999px;
  align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:1rem;height:1px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:1rem;height:1px;background:var(--ink);
  transition:transform .4s var(--ease);
}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] span::after{transform:translateY(-5px) rotate(-45deg)}

.mobnav{
  position:fixed;inset:0;z-index:99;background:var(--bone);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--slow);
  pointer-events:none;
}
.mobnav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobnav a{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(2.1rem,9.5vw,3.2rem);line-height:1.2;
  border-bottom:1px solid var(--rule);padding-block:.5rem;
  display:flex;align-items:baseline;justify-content:space-between;
}
.mobnav a i{font-family:var(--sans);font-style:normal;font-size:.66rem;letter-spacing:.2em;color:var(--muted)}
.mobnav__foot{margin-top:2.5rem;display:flex;flex-direction:column;gap:.9rem}

/* ==========================================================================
   The cover
   Two identical display layers: ink underneath the plate, bone inside it.
   The plate sits between them, so the type crosses the photograph and stays
   legible on both sides of the edge.
   ========================================================================== */
.cover{position:relative;background:var(--bone);overflow-x:clip}
.cover__stage{
  perspective:1500px;
  perspective-origin:50% 42%;
  position:relative;
  /* Sized so the folio, arch, masthead AND the foot (lede + call buttons)
     all land inside the first screen. --stage-h is shared with the masthead
     layer inside the plate; both boxes must be identical or the two-layer
     alignment drifts. */
  --stage-h:clamp(19rem,calc(100svh - 15rem),32rem);
  height:var(--stage-h);
  --plate-w:min(29vw,22rem);
  --plate-top:.5rem;
}
/* Rotating this wrapper tilts the plate AND both masthead layers together.
   Tilting the plate alone would break the two-layer alignment. */
.cover__3d{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .9s var(--slow);
  will-change:transform;
}
.cover__plate{
  position:absolute;top:var(--plate-top);left:50%;
  box-shadow:var(--lift-3);
  width:var(--plate-w);height:calc(var(--stage-h) - 1rem);
  transform:translateX(-50%);
  border-radius:calc(var(--plate-w)/2) calc(var(--plate-w)/2) .25rem .25rem;
  overflow:hidden;background:var(--sand);
  z-index:1;
  clip-path:inset(0 0 0 0);
}
.cover__plate > img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transform:scale(1.04);
}
.cover__type{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;height:100%;
  display:grid;place-content:center;justify-items:center;
  text-align:center;pointer-events:none;
  padding-top:clamp(1.5rem,4.5svh,3rem);
}
.cover__type .display{margin:0}
/* The bone copy, re-anchored to the stage from inside the plate. */
.cover__plate .cover__type{
  top:calc(var(--plate-top) * -1);
  height:var(--stage-h);
  color:var(--bone);
  z-index:2;
}
.cover__3d > .cover__type{color:var(--ink);z-index:0}

/* Solo cover: one type layer riding above a scrimmed plate. For photographs
   too mid-tone to carry the two-layer masthead — the type would vanish into
   the image on one side of the edge. */
.cover--solo .cover__3d > .cover__type{z-index:3;color:var(--ink)}
.cover--solo .cover__plate::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,2,5,.22) 0%,rgba(8,2,5,.70) 100%);
}

/* Folios */
.folio{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.6375rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  padding-block:.9rem;
}
.folio--top{border-bottom:1px solid var(--rule)}
.cover .folio--top{padding-block:.7rem}
.folio--bottom{border-top:1px solid var(--rule)}
.folio span:nth-child(2){text-align:center}
.folio span:last-child{text-align:right}

.cover__foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.25rem,4vw,3rem);align-items:end;
  padding-block:clamp(1.1rem,2.2vw,1.7rem);
  border-top:1px solid var(--rule);
}
.cover__foot .lede{max-width:44ch}
.cover__meta{
  text-align:right;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:grid;gap:.4rem;
}
.cover__meta b{font-weight:500;color:var(--ink)}

/* ---- Plates (arch-topped photographic frames) ---- */
.plate{
  position:relative;overflow:hidden;background:var(--sand);
  clip-path:inset(0 0 0 0);
  box-shadow:var(--lift-2);
  transition:box-shadow .6s var(--ease),transform .6s var(--ease);
}
/* A second sheet peeking out behind, so a plate reads as a print on a stack. */
.plate--stacked::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:var(--sand);
  transform:translate(.7rem,.7rem) rotate(1.1deg);
  box-shadow:var(--lift-1);
}
.plate--stacked{overflow:visible}
.plate--stacked > img{border-radius:inherit}
.plate > img{width:100%;height:100%;object-fit:cover;display:block}
.plate--arch{border-radius:50% 50% .3rem .3rem/34% 34% .3rem .3rem}
.plate--soft{border-radius:.35rem}
.plate--4x5{aspect-ratio:4/5}
.plate--3x4{aspect-ratio:3/4}
.plate--3x2{aspect-ratio:3/2}
.plate--16x9{aspect-ratio:16/9}
.plate--16x10{aspect-ratio:16/10}

figure > figcaption,.cap{
  margin-top:.85rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
/* Caption hung in the margin beside a plate */
.cap--side{
  writing-mode:vertical-rl;text-orientation:mixed;
  position:absolute;right:-2.6rem;top:0;margin:0;white-space:nowrap;
}

/* ---- The mark, blown up as a watermark ---- */
.mark-wash{
  position:absolute;pointer-events:none;z-index:0;
  width:min(46vw,34rem);aspect-ratio:1;
  background:var(--ink);opacity:.022;
  -webkit-mask:url(../img/mark.png) center/contain no-repeat;
  mask:url(../img/mark.png) center/contain no-repeat;
}
.mark-wash--r{right:-6vw;top:8%}
.mark-wash--l{left:-8vw;bottom:4%}

/* ---- Marquee ---- */
.marquee{overflow:hidden;border-block:1px solid var(--rule);padding-block:clamp(.7rem,1.2vw,.95rem);background:var(--bone)}
.marquee__track{display:flex;width:max-content;animation:slide 52s linear infinite}
.marquee__track span{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(1rem,1.75vw,1.45rem);line-height:1;
  padding-inline:clamp(1rem,2.4vw,2rem);
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);
  white-space:nowrap;color:var(--plum);
}
.marquee__track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--lip);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---- Editorial columns ---- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--mid{align-items:center}
.split--wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split__aside{position:sticky;top:7rem}
.split--mid{align-items:center}

/* Offset pair: two plates at different heights, breaking the baseline */
.offset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);align-items:start}
.offset > :nth-child(2){margin-top:clamp(3rem,9vw,8rem)}

/* ---- The tones ---- */
.tones{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.4rem,1vw,.8rem);
}
.tone{
  position:relative;aspect-ratio:1/2.35;border-radius:50% 50% .2rem .2rem/9% 9% .2rem .2rem;
  background:var(--c);overflow:hidden;
  box-shadow:var(--lift-1);
  transition:transform .7s var(--slow),box-shadow .7s var(--slow);
}
/* Curved shading across the width turns each flat swatch into a column. */
.tone::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 14%,
      rgba(255,255,255,.26) 38%, rgba(255,255,255,.10) 55%,
      rgba(0,0,0,.14) 82%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,0) 26%,
      rgba(0,0,0,.10) 88%, rgba(0,0,0,.20) 100%);
  mix-blend-mode:soft-light;
}
.tone::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18);
}
.tone:hover{transform:translateY(-12px) scale(1.015);box-shadow:var(--lift-3)}
.tone b{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  writing-mode:vertical-rl;text-orientation:mixed;rotate:180deg;
  font-family:var(--sans);font-weight:500;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tc,rgba(255,255,255,.86));white-space:nowrap;
}

/* ---- Service index ---- */
.svc{border-top:1px solid var(--rule)}
.svc__row{
  display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.15fr) 8rem;
  gap:clamp(1rem,3vw,2.5rem);align-items:center;
  padding-block:clamp(1.05rem,1.9vw,1.5rem);
  border-bottom:1px solid var(--rule);
  position:relative;transition:padding .55s var(--ease);
}
.svc__row::before{
  content:"";position:absolute;inset:0;background:var(--paper);
  opacity:0;transition:opacity .55s var(--ease);z-index:-1;
}
.svc__row:hover::before{opacity:1}
.svc__row:hover{padding-inline:clamp(0rem,1.5vw,1.4rem)}
.svc__num{font-family:var(--serif);font-size:1rem;color:var(--muted);letter-spacing:.06em}
.svc__ttl{font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.1;letter-spacing:-.014em}
.svc__txt{color:var(--muted);font-size:.98rem;line-height:1.6}
.svc__go{
  justify-self:end;width:3rem;height:3rem;border-radius:50%;
  border:1px solid var(--rule-strong);display:grid;place-items:center;flex:none;
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
.svc__go svg{width:.85rem;height:.85rem}
.svc__row:hover .svc__go{background:var(--lip);border-color:var(--lip);color:#fff;transform:rotate(-45deg)}

.svc__peek{
  position:fixed;top:0;left:0;width:13rem;aspect-ratio:4/5;
  pointer-events:none;z-index:60;opacity:0;
  transform:translate(-50%,-50%) scale(.92);
  transition:opacity .45s var(--ease),transform .55s var(--slow);
  overflow:hidden;border-radius:6.5rem 6.5rem .2rem .2rem/22% 22% .2rem .2rem;
  box-shadow:0 26px 64px rgba(24,8,16,.26);
  display:grid;align-items:end;justify-items:center;
}
.svc__peek img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.svc__peek b{
  grid-area:1/1;align-self:end;margin-bottom:1.1rem;
  font-family:var(--sans);font-weight:500;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
}
.svc__peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(prefers-reduced-motion:reduce){.svc__peek{display:none}}

/* ---- Grids & cards ---- */
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{display:flex;flex-direction:column;gap:1.1rem}
.card .plate > img{transition:transform 1.6s var(--slow)}
.card:hover .plate > img{transform:scale(1.05)}
.card:hover .plate{box-shadow:var(--lift-3);transform:translateY(-4px)}
.card__k{display:flex;align-items:baseline;gap:.7rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.card p{color:var(--muted);font-size:.97rem;line-height:1.62}

/* ---- Menu list ---- */
.menu{border-top:1px solid var(--rule)}
.menu li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:baseline;padding-block:.8rem;border-bottom:1px solid var(--rule)}
.menu__name{font-family:var(--serif);font-optical-sizing:auto;font-size:1.06rem;letter-spacing:-.008em}
.menu__note{display:block;color:var(--muted);font-size:.9rem;line-height:1.55;margin-top:.3rem;max-width:52ch}
.menu__tag{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.menu__tag--red{color:var(--lip-ink)}

/* ---- Quote ---- */
.quote{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(1.2rem,2.3vw,1.9rem);line-height:1.32;letter-spacing:-.016em;
  text-wrap:balance;text-indent:-.42em;
}
.quote__by{margin-top:1.75rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-indent:0}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.stats--band{margin-top:clamp(2rem,3.5vw,3rem)}
.stats div{border-top:1px solid var(--rule-strong);padding-top:1.1rem}
.stats b{display:block;white-space:nowrap;font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.028em}
/* Direct child only — a bare `.stats span` also caught the superscript
   inside <b>, turning it into a block and dropping it onto its own line. */
.stats > div > span{display:block;margin-top:.5rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stats b span{display:inline;margin:0;letter-spacing:0;text-transform:none;color:inherit}

/* ---- Visit ---- */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem)}
.hours{border-top:1px solid var(--rule)}
.hours li{display:flex;justify-content:space-between;gap:1.5rem;padding-block:.72rem;border-bottom:1px solid var(--rule);font-size:.95rem}
.hours li.is-today{color:var(--ink);font-weight:500}
.hours li.is-today .hours__d::after{
  content:"Today";margin-left:.6rem;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lip-ink);vertical-align:middle;
}
.hours li.is-shut{color:var(--muted)}
.openflag{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.openflag i{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.openflag.is-open i{background:#1E9E5A;box-shadow:0 0 0 3px rgba(30,158,90,.18)}
.openflag.is-closed i{background:var(--lip)}

.map{aspect-ratio:4/3;border:1px solid var(--rule);background:var(--sand);border-radius:.35rem;overflow:hidden;box-shadow:var(--lift-2);filter:grayscale(1) contrast(.92) sepia(.18);transition:filter .7s var(--ease)}
.map:hover{filter:none}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ---- Form ---- */
.form{display:grid;gap:1.35rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  padding:.7rem 0;font-size:1rem;border-radius:0;transition:border-color .4s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--lip)}
.field textarea{resize:vertical;min-height:5.5rem}
.field select{
  appearance:none;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236F5A61' stroke-width='1.4'/%3E%3C/svg%3E") right .35rem center/12px no-repeat;
}
.form__2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem}
.form__note{font-size:.8rem;color:var(--muted);line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Footer ---- */
.ftr{background:var(--paper);padding-block:clamp(2.5rem,4.5vw,4rem) 1.75rem;position:relative;overflow:hidden}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.ftr h4{font-size:.64rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.ftr li+li{margin-top:.6rem}
.ftr a:hover{color:var(--lip-ink)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-top:1.75rem;border-top:1px solid var(--rule);font-size:.72rem;color:var(--muted)}
.ftr__word{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(2rem,8.6vw,7rem);line-height:.84;letter-spacing:-.04em;
  color:transparent;margin-top:clamp(2rem,5vw,3.5rem);
  -webkit-text-stroke:1px rgba(24,8,16,.10);
  text-shadow:0 1px 0 rgba(255,255,255,.65), 0 -1px 0 rgba(24,8,16,.06);
  text-align:center;user-select:none;white-space:nowrap;overflow:hidden;
}

/* ---- Mobile action dock ---- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-strong);
  border-top:1px solid var(--rule-strong);
  transform:translateY(110%);transition:transform .55s var(--slow);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock.is-up{transform:none}
.dock a{background:var(--bone);padding:1rem .5rem;text-align:center;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:.5rem}
.dock a.is-primary{background:var(--ink);color:var(--bone)}
.dock svg{width:.85rem;height:.85rem}

/* ==========================================================================
   Photo-free composition
   The salon has no usable photography of its own work, so the plate shapes
   are filled with colour, type and the house mark instead of images.
   ========================================================================== */

/* A plate carrying a flat tone rather than a photograph. */
.plate--tone{background:var(--c,var(--sand))}
.plate--ink{background:var(--ink)}
.plate--field{
  background:linear-gradient(165deg,var(--c1,#4C2E1E) 0%,var(--c2,#D8B98C) 100%);
}
/* Plates with no <img> have nothing to scale, so only the wipe applies. */
.plate--tone,.plate--ink,.plate--field{overflow:hidden}

/* A letter or numeral used as the picture. */
.glyph{
  display:grid;place-items:center;
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  line-height:1;letter-spacing:-.04em;
  font-size:clamp(6rem,18vw,15rem);
  color:var(--bone);opacity:.92;
  height:100%;
}
.plate--tone .glyph,.plate--field .glyph{color:rgba(255,255,255,.9)}

/* The house mark, set inside a plate. */
.plate__mark{
  position:absolute;inset:14%;
  background:var(--bone);opacity:.9;
  -webkit-mask:url(../img/mark.png) center/contain no-repeat;
  mask:url(../img/mark.png) center/contain no-repeat;
}

/* ---- Reviews ---- */
.stars{display:inline-flex;gap:.22rem;align-items:center}
.stars svg{width:.7rem;height:.7rem;fill:var(--lip);flex:none}

.rating{
  display:inline-flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.rating b{
  font-family:var(--serif);font-weight:500;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--ink);text-transform:none;
}

.says__lead{
  border-top:1px solid var(--rule-strong);
  padding-top:clamp(1.5rem,3vw,2.25rem);
}
.says__q{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  letter-spacing:-.018em;line-height:1.24;text-wrap:pretty;
  color:var(--ink);
}
.says__lead .says__q{font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.18;text-indent:-.4em}
.says__by{
  margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.says__by b{font-weight:500;color:var(--ink)}

.says{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.5rem)}
.says__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem 2rem;margin-bottom:clamp(1.1rem,2vw,1.6rem);
}
.says__card{
  border-top:1px solid var(--rule);padding:1.05rem 1.15rem 1.15rem;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
  border-radius:.2rem .2rem .35rem .35rem;
  box-shadow:var(--lift-1);
  transition:box-shadow .6s var(--ease),transform .6s var(--ease);
}
.says__card:hover{box-shadow:var(--lift-2);transform:translateY(-3px)}
.inverse .says__card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))}
.says__card .says__q{font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.5}
.says__card .stars{margin-bottom:.7rem}
.says__card .says__by{margin-top:auto;padding-top:.9rem}

/* ---- Rule stack, used where a picture used to sit ---- */
.rules{display:grid;gap:.55rem;padding-block:.5rem}
.rules span{height:1px;background:var(--rule-strong);display:block}
.rules span:nth-child(2n){background:var(--rule)}

/* ==========================================================================
   Motion

   Every element's DEFAULT state is its final, visible one. Entrance motion is
   applied as a one-shot animation when the observer marks an element `is-in`.

   This matters: an earlier version hid content by default (`clip-path:
   inset(0 0 100% 0)`) and relied on a transition to reveal it. Anywhere the
   transition did not advance — a suspended/never-composited document, an
   embedded webview, a background tab — every image on the site stayed clipped
   to zero height and the page looked broken. With animations and `both` fill,
   the worst case is simply no animation.

   `.is-settled` is the second half of that guarantee: a document that is not
   actually rendering (hidden tab, embedded webview) freezes animation time at
   t=0, which for an entrance animation is the hidden keyframe. So the script
   marks elements `is-settled` when it detects that case, and settled elements
   skip the animation entirely and just show.
   ========================================================================== */

.cover__plate img{transform:scale(1.04)}

/* Structural, NOT motion: each masthead line is its own block with a clip
   window, so the lines stack and the entrance animation has something to rise
   out of. These must live outside the reduced-motion query — losing them
   collapses the whole masthead onto one line. */
.lines span{display:block;overflow:hidden}
.lines span > i{display:block;font-style:inherit}

@media (prefers-reduced-motion:no-preference){
  .js .reveal.is-in:not(.is-settled)            {animation:fadeUp 1.1s var(--slow) both}
  .js .reveal.is-in[data-d="1"]{animation-delay:.10s}
  .js .reveal.is-in[data-d="2"]{animation-delay:.20s}
  .js .reveal.is-in[data-d="3"]{animation-delay:.30s}
  .js .reveal.is-in[data-d="4"]{animation-delay:.40s}

  .js .lines.is-in:not(.is-settled) span > i   {animation:lineUp 1.25s var(--slow) both}
  .js .lines.is-in span:nth-child(2) > i       {animation-delay:.11s}
  .js .lines.is-in span:nth-child(3) > i       {animation-delay:.22s}

  .js .plate.is-in:not(.is-settled),
  .js .cover__plate.is-in:not(.is-settled)     {animation:plateWipe 1.35s var(--slow) both}
  .js .plate.is-in:not(.is-settled) img        {animation:plateZoom 1.7s var(--slow) both}
  .js .cover__plate.is-in:not(.is-settled) img {animation:coverZoom 1.7s var(--slow) both}
}

@keyframes fadeUp    {from{opacity:0;transform:translateY(16px)}}
@keyframes lineUp    {from{transform:translateY(105%)}}
@keyframes plateWipe {from{clip-path:inset(0 0 100% 0)}}
@keyframes plateZoom {from{transform:scale(1.14)}}
@keyframes coverZoom {from{transform:scale(1.12)} to{transform:scale(1.04)}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .cover__stage{--plate-w:min(38vw,22rem)}
}

@media (max-width:1080px){
  .svc__row{grid-template-columns:3rem minmax(0,1fr) 3rem;row-gap:.5rem}
  .svc__txt{grid-column:2;font-size:.92rem}
  .svc__go{grid-row:1/3;grid-column:3;align-self:center}
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tones{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cap--side{position:static;writing-mode:horizontal-tb;margin-top:.85rem}
}

@media (max-width:900px){
  .nav,.hdr__cta .btn--ghost{display:none}
  .burger{display:flex}
  /* The phone button collapses to its icon. Spelled out, the brand plus the
     number plus the burger measure ~470px, which pushed the menu button off
     the side of a 375px screen. */
  /* Must out-rank `.hdr__cta .btn` (0,2,0) above, or the pill padding stays
     and squeezes the icon to zero width. */
  .hdr__cta .hdr__tel{
    padding:0;flex:0 0 2.75rem;width:2.75rem;height:2.75rem;
    border-radius:50%;gap:0;
  }
  .hdr__cta .hdr__tel span{display:none}
  .hdr__cta .hdr__tel svg{width:1rem;height:1rem}
  .brand__name{font-size:1.05rem}

  /* The cover keeps its overlap on phones: a wider, shorter arch with the
     type scaled to match, so the masthead still crosses the photograph. */
  .cover__stage{
    height:auto;min-height:0;
    /* The plate is in normal flow here, so it is the stage's padding-top that
       positions it. The absolutely-positioned masthead layer must use the very
       same value or the two type layers drift apart — bind both to one var. */
    --pad-top:clamp(5.5rem,14svh,7.5rem);
    padding-block:var(--pad-top) clamp(2rem,6vw,3rem);
    --plate-w:min(52vw,15.5rem);
    --plate-h:min(50svh,23rem);
  }
  /* The tilt is desktop-only. Dropping the wrapper's box here restores the
     original flow, so the in-flow plate still sits below the stage padding
     and the two masthead layers line up. */
  .cover__3d{display:contents}
  .cover__plate{position:relative;top:0;height:var(--plate-h);margin-inline:auto;transform:none;left:auto}
  .cover__plate .cover__type{top:0;height:100%;padding-top:0}
  .cover__3d > .cover__type{
    position:absolute;top:var(--pad-top);height:var(--plate-h);padding-top:0;
  }
  .cover__foot{grid-template-columns:1fr;gap:1.5rem}
  .cover__meta{text-align:left;grid-auto-flow:column;justify-content:start;gap:1.5rem}

  .split,.split--even,.split--wide-left,.visit{grid-template-columns:1fr}
  .split__aside{position:static}
  .offset > :nth-child(2){margin-top:0}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .says{grid-template-columns:1fr}
  .opener{grid-template-columns:1fr;gap:.75rem}
  .opener__num{padding-top:0}
  .dock{display:grid}
  .mark-wash{width:min(70vw,20rem)}
}

@media (max-width:600px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:1.25rem}
  .form__2{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:2.25rem}
  .svc__row{grid-template-columns:2.5rem minmax(0,1fr) 2.5rem}
  .tones{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tone{aspect-ratio:1/2.4}
  .dropcap::first-letter{font-size:3.3em}
  .folio span:nth-child(2){display:none}
  .cover__meta{grid-auto-flow:row;gap:.35rem}
  .brand__name{font-size:.92rem}
}

/* Below this the wordmark cannot fit beside the two buttons; the mark and the
   link's aria-label still identify it. */
@media (max-width:340px){
  .brand__name{display:none}
}

@media print{
  .hdr,.dock,.mobnav,.marquee,.map,body::after{display:none}
  body{background:#fff;color:#000}
  .reveal,.plate,.lines span > i{opacity:1;transform:none;clip-path:none;animation:none}
}