/* ═══════════════════════════════════════════════════════════════
   JoyLikes Beauty
   Mobile hairstylist · Manchester

   Two voices, and the discipline is knowing which is speaking:
   Archivo at wdth 64 / wght 800 shouts, Instrument Serif whispers.
   Gold is worn like jewellery — one or two words a screen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* colour — the five from the flyer, plus gold */
  --wine:   #3E0F20;
  --wine-d: #2C0918;
  --plum:   #6E1F3C;
  --rose:   #C8737F;
  --rose-d: #A8505F;
  --blush:  #F0D6D4;
  --shell:  #FBF6F4;
  --gold:   #D9A441;   /* on wine only — 7.2:1 there, 2.1:1 on shell */
  --gold-d: #A8781F;   /* display accents on shell — 3.7:1, AA for large text */
  --gold-ink: #96690F; /* prices, labels, small type on shell — 4.5:1, AA */
  --ink:    #2A1018;

  --ink-60: rgba(42,16,24,.62);
  --ink-14: rgba(42,16,24,.14);
  --ink-07: rgba(42,16,24,.07);
  --cream-70: rgba(251,246,244,.72);
  --cream-55: rgba(251,246,244,.55);  /* 5.6:1 on wine-d — AA for small text */
  --cream-16: rgba(251,246,244,.16);

  --err: #B22C43;
  --ok:  #1E6B4A;

  /* type */
  --display: "Instrument Serif", "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* scale — the shout tops out at 9.5rem, the whisper never exceeds step-4 */
  --step--1: .78rem;
  --step-0:  clamp(1rem, .96rem + .18vw, 1.075rem);
  --step-1:  1.15rem;
  --step-2:  1.4rem;
  --step-3:  clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --step-4:  clamp(2rem, 1.45rem + 2.4vw, 3.1rem);
  --step-5:  clamp(2.4rem, 1.4rem + 4.4vw, 4.75rem);
  --step-6:  clamp(2.75rem, 1rem + 9vw, 9.5rem);

  /* rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --pad: clamp(4.5rem, 9vw, 8.5rem);
  --max: 1320px;
  --spine: 60px;
  --bar: 74px;          /* the sticky bar overlays the first band */

  /* two radii, not seven. Softness is reserved for things you press. */
  --r-0: 0px;
  --r-pill: 99px;
  --rule: 1px solid var(--ink-14);

  /* Settle curves. Both are critically damped on purpose: nothing here is
     dragged, so no gesture momentum exists to justify overshoot. */
  --ease: cubic-bezier(.22,.61,.36,1);   /* arrivals — 300–400ms */
  --press: cubic-bezier(.3,0,.2,1);      /* the instant a finger lands */
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
a{ color:inherit }
/* Tracking is set per size, never once globally: display sizes tighten as
   they grow, body copy sits at 0. */
h1,h2,h3{ margin:0; font-weight:400; font-optical-sizing:auto }
p{ margin:0 }
ul,ol,dl{ margin:0; padding:0; list-style:none }

::selection{ background:var(--gold); color:var(--wine-d) }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:var(--gut); top:-4rem; z-index:100;
  background:var(--wine); color:var(--shell);
  padding:.7rem 1.1rem; border-radius:var(--r-pill); text-decoration:none;
  font-size:.85rem; transition:top .2s var(--ease);
}
.skip:focus{ top:.75rem }

.shell{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ── the shout ────────────────────────────────────────────────── */

/* Archivo's width axis is already loaded and was only ever used between
   100 and 120. Everything below lives at 64. */
.display{
  font-family:var(--sans);
  font-variation-settings:"wdth" 64,"wght" 800;
  font-weight:400;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.display-xl{ font-size:var(--step-6) }
.display-lg{ font-size:var(--step-5) }
.display-md{ font-size:var(--step-4) }
.display-sm{ font-size:var(--step-3) }

/* the single gold word — the brighter gold only ever lands on a dark band,
   where it has the contrast to carry. On shell it steps down a shade. */
.display em{
  font-family:inherit; font-style:normal;
  font-variation-settings:inherit;
  color:var(--gold-d);
}
.hero .display em,
.page-head .display em,
.section-wine .display em,
.section-deep .display em{ color:var(--gold) }

/* ── the whisper ──────────────────────────────────────────────── */

em{ font-family:var(--display); font-style:italic; font-weight:400 }

.serif{
  font-family:var(--display); font-style:italic; font-weight:400;
  letter-spacing:-.012em; line-height:1.14;
}

/* ── labels ───────────────────────────────────────────────────── */

.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em;
  font-variation-settings:"wdth" 118;
  color:var(--rose-d);
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px; max-width:5rem;
  background:currentColor; opacity:.4;
}
.eyebrow i{ font-style:normal; opacity:.55 }

.meta{
  font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  font-variation-settings:"wdth" 112;
  color:var(--rose-d);
}
.meta i{ font-style:normal; opacity:.5; margin-inline:.35em }

.price{
  font-size:.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  font-variation-settings:"wdth" 112;
  color:var(--gold-ink);
  white-space:nowrap;
}

/* ── section heads ────────────────────────────────────────────── */

.sec-head{ margin-bottom:clamp(2.5rem,5vw,4rem) }
.sec-head h2{ margin-top:1rem }
.sec-note{ margin-top:1.25rem; color:var(--ink-60); max-width:56ch }
.sec-note a{
  color:var(--plum); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.sec-head-c{ text-align:center }
.sec-head-c .eyebrow{ justify-content:center }
.sec-head-c .eyebrow::after{ display:none }
.sec-head-c h2{ max-width:20ch; margin-inline:auto }
.sec-head-c .sec-note{ margin-inline:auto; text-align:center }

/* The oversized word behind the heading. Purely atmospheric, so it is
   hidden from assistive tech and clipped by the section it sits in. */
.ghost{
  /* Sits entirely above the heading and is clipped by the band's top edge,
     so it reads as a watermark rather than as text behind text. */
  position:absolute; left:0; bottom:100%; z-index:0;
  font-family:var(--sans);
  font-variation-settings:"wdth" 62,"wght" 800;
  font-weight:400;
  font-size:clamp(4.5rem, 17vw, 15rem);
  line-height:.78; letter-spacing:-.03em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--ink); opacity:.045;
  pointer-events:none; user-select:none;
}
.section-wine .ghost,
.section-deep .ghost,
.page-head .ghost{ color:var(--shell); opacity:.045 }
/* Centred heads need a centred watermark, or the two sit on top of each other. */
.ghost-c{ left:50%; transform:translateX(-50%) }

/* ── the visible grid ─────────────────────────────────────────── */

/* Twelve hairline columns that content actually snaps to, so the page reads
   as a contact sheet rather than as wallpaper. Drawn as a background on the
   section itself — no spacer markup. */
.section::before,
.page-head::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; max-width:var(--max); margin-inline:auto;
  background-image:linear-gradient(to right, var(--ink-07) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%;
}
.section-wine::before,
.section-deep::before,
.page-head::before{
  background-image:linear-gradient(to right, var(--cream-16) 1px, transparent 1px);
  opacity:.32;
}
@media (max-width:760px){
  .section::before, .page-head::before{ background-size:calc(100% / 4) 100% }
}

/* ── buttons ──────────────────────────────────────────────────── */

/* The one soft thing left. A stranger is coming into your home; a page of
   nothing but hard corners would be the wrong signal. */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.6rem;
  border:1px solid transparent; border-radius:var(--r-pill);
  font:inherit; font-size:.9rem; font-weight:600;
  font-variation-settings:"wdth" 106;
  letter-spacing:.01em; text-decoration:none;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-solid{ background:var(--gold); color:var(--wine-d) }
.btn-solid:hover{ background:var(--blush) }
.btn:hover{ transform:translateY(-2px) }
/* The press is felt the moment the finger lands, not when it lifts. */
.btn:active{ transform:scale(.975); transition:transform 90ms var(--press) }
.btn-ghost{ border-color:currentColor; color:inherit; opacity:.9 }
.btn-ghost:hover{ background:var(--wine); border-color:var(--wine); color:var(--shell); opacity:1 }
.btn-sm{ padding:.6rem 1.1rem; font-size:.8rem }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none }

/* A link that behaves like a button but keeps the hard edge */
.arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none;
  font-size:.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  font-variation-settings:"wdth" 112;
  color:var(--plum);
  padding-bottom:.35rem;
  border-bottom:1px solid currentColor;
  transition:color .25s var(--ease), gap .25s var(--ease);
}
.arrow:hover{ color:var(--gold-ink); gap:1rem }

/* ── the braid: signature element ─────────────────────────────── */

/* Three sine strands, depth-sorted per segment, plotted in main.js.
   The strand alongside the section you are reading draws in gold, so the
   braid is the scroll indicator and the section index at once. */
.braid{
  position:fixed; left:0; top:0; z-index:4;
  width:var(--spine); height:100vh;
  overflow:hidden; pointer-events:none;
  mask-image:linear-gradient(transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image:linear-gradient(transparent 0, #000 9%, #000 91%, transparent 100%);
}
.braid svg{
  position:absolute; left:0;
  width:var(--spine); height:auto;
  will-change:transform;
}
.braid path{
  fill:none; stroke-linecap:round; stroke:var(--rose);
  transition:stroke .5s var(--ease);
}
.braid-back path{ stroke-width:2.2; opacity:.34 }    /* strands passing behind */
.braid-front path{ stroke-width:3.6; opacity:.85 }   /* strands crossing in front */
.braid.is-lit .braid-front path{ stroke:var(--gold); opacity:1 }

/* Narrow enough to sit beside the content rather than over it. */
@media (max-width:1339px){ :root{ --spine:26px } }
@media (max-width:767px){ .braid{ display:none } }

/* ══════════════ topbar ══════════════ */

.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(62,15,32,0);
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease);
}
.topbar.is-stuck{
  background:rgba(44,9,24,.84);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
}
/* A scroll edge, not a divider. This paints nothing — it blurs whatever
   passes beneath it, fading the blur out over 30px, so the effect works
   over the wine hero and the cream pages alike. */
.topbar::after{
  content:""; position:absolute; left:0; right:0; top:100%;
  height:30px; pointer-events:none;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  mask-image:linear-gradient(#000 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(#000 0%, transparent 100%);
  opacity:0; transition:opacity .35s var(--ease);
}
.topbar.is-stuck::after{ opacity:1 }
.topbar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:var(--bar); color:var(--shell);
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none }
.mark-sm{ width:34px; height:34px; color:var(--gold); flex:none }
.mark-mono{ font-family:var(--display); font-size:74px; fill:currentColor }
.brand-words{ display:flex; flex-direction:column; line-height:1 }
.brand-name{ font-family:var(--display); font-size:1.15rem }
.brand-sub{
  font-size:.6rem; text-transform:uppercase; letter-spacing:.3em;
  font-variation-settings:"wdth" 118; color:var(--rose);
}

.nav{ display:flex; align-items:center; gap:.35rem }
.nav a:not(.btn){
  position:relative;
  padding:.55rem .85rem; border-radius:var(--r-0);
  text-decoration:none; font-size:.88rem;
  color:var(--cream-70);
  transition:color .25s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--shell) }
.nav a[aria-current]{ color:var(--shell) }
.nav a[aria-current]::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.15rem;
  height:2px; background:var(--gold);
}
.nav .btn{ margin-left:.6rem }

.burger{
  display:none; width:44px; height:44px;
  background:none; border:0; padding:10px; cursor:pointer;
}
.burger span{
  display:block; height:2px; background:var(--shell);
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span+span{ margin-top:6px }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg) }

@media (max-width:880px){
  .burger{ display:block }
  .nav{
    position:absolute; left:var(--gut); right:var(--gut); top:calc(100% + .5rem);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--wine-d); padding:.75rem;
    border:1px solid var(--cream-16);
    /* materialise rather than slide — scale, lift and blur resolve together */
    opacity:0; visibility:hidden;
    transform:scale(.93) translateY(-6px); filter:blur(7px);
    transform-origin:100% 0;
    transition:opacity .3s var(--ease), transform .3s var(--ease),
               filter .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open{
    opacity:1; visibility:visible;
    transform:none; filter:blur(0);
    transition:opacity .3s var(--ease), transform .3s var(--ease),
               filter .3s var(--ease), visibility 0s;
  }
  .nav a:not(.btn){ padding:.85rem 1rem; font-size:1rem }
  .nav a[aria-current]::after{ left:1rem; right:auto; width:1.5rem; bottom:.5rem }
  .nav .btn{ margin:.5rem 0 0; justify-content:center }
}

/* ══════════════ hero ══════════════ */

.hero{
  position:relative; isolation:isolate;
  background:var(--wine); color:var(--shell);
  margin-top:calc(var(--bar) * -1);
  padding-top:calc(var(--bar) + clamp(2.5rem,6vw,5rem));
  overflow:hidden;
}
.hero-in{
  display:grid; align-items:end;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(3rem,7vw,6rem);
}
/* Sized so the longest word ("hairstylist,") still fits the copy column at
   every width — at the full --step-6 it overruns into the photograph. */
.hero h1{ margin-top:1.4rem; font-size:clamp(2.5rem, 6.9vw, 8.5rem) }
.hero .lede{
  margin-top:1.6rem; max-width:42ch;
  color:var(--cream-70); font-size:var(--step-1);
}
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:2.25rem }
.hero-cta .arrow{ color:var(--rose) }
.hero-cta .arrow:hover{ color:var(--gold) }

.hero-facts{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.5rem; border-top:1px solid var(--cream-16);
}
.hero-facts b{
  display:block;
  font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  font-variation-settings:"wdth" 112; color:var(--gold);
}
.hero-facts span{ display:block; margin-top:.35rem; font-size:.9rem; color:var(--cream-70) }

/* The photograph runs the full height of the band, up behind the sticky bar
   and down to the ticker. The shoot is seamless white with the hair as the
   only texture in frame — the page says the same thing, so nothing frames it. */
.hero-shot{
  position:relative; align-self:stretch;
  min-height:clamp(20rem,46vw,34rem);
  margin-top:calc((var(--bar) + clamp(2.5rem,6vw,5rem)) * -1);
  margin-bottom:calc(clamp(3rem,7vw,6rem) * -1);
}
.hero-shot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
  border-radius:var(--r-0);
}
.hero-shot::before,
.hero-shot::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hero-shot::before{
  background:linear-gradient(to bottom, rgba(62,15,32,.82), rgba(62,15,32,.28) 12%, transparent 26%);
}
.hero-shot::after{
  background:linear-gradient(to top, rgba(62,15,32,.55), transparent 42%);
}
.hero-seal{
  position:absolute; right:1.25rem; bottom:1.25rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  text-align:center;
}
.mark-lg{ width:clamp(72px,9vw,104px); height:auto; color:var(--gold) }
.mono-lg{ font-family:var(--display); font-size:62px; fill:var(--gold) }
.mark-ring{
  font-size:13px; fill:var(--gold);
  font-family:var(--sans); font-variation-settings:"wdth" 118;
  text-transform:uppercase;
}
.seal-tag{ font-family:var(--display); font-style:italic; font-size:.85rem; color:var(--blush) }

@media (max-width:880px){
  .hero-in{ grid-template-columns:1fr }
  .hero-shot{
    order:-1; min-height:22rem;
    /* Stacked above the copy, so it starts cleanly below the bar rather than
       bleeding under it — a burger button sitting on someone's face reads
       as a mistake, not as a bleed. */
    margin-top:0;
    margin-inline:calc(var(--gut) * -1);
    margin-bottom:clamp(1.5rem,4vw,2.5rem);
  }
}

/* ── ticker ── */
.ticker{
  overflow:hidden; border-block:1px solid var(--cream-16);
  background:var(--wine-d); padding-block:.85rem;
}
.ticker-run{
  display:flex; align-items:center; gap:1.5rem; width:max-content;
  animation:run 42s linear infinite;
}
.ticker-run span{
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.24em;
  font-variation-settings:"wdth" 116; color:var(--blush);
  white-space:nowrap;
}
.ticker-run i{ width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none }
@keyframes run{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .ticker-run{ animation:none } }

/* ══════════════ page heads (the five inner pages) ══════════════ */

.page-head{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--wine); color:var(--shell);
  margin-top:calc(var(--bar) * -1);
  padding-top:calc(var(--bar) + clamp(3.5rem,8vw,7rem));
  padding-bottom:clamp(3.5rem,8vw,7rem);
}
.page-head .shell{ position:relative; z-index:1 }
.page-head h1{ margin-top:1rem; max-width:16ch }
.page-head .lede{ margin-top:1.5rem; max-width:52ch; color:var(--cream-70) }
.page-head .eyebrow{ color:var(--gold) }

/* ══════════════ sections ══════════════ */

.section{ position:relative; isolation:isolate; overflow:hidden; padding-block:var(--pad) }
.section .shell{ position:relative; z-index:1 }
.section-shell{ background:var(--shell) }
.section-wine{ background:var(--wine); color:var(--shell) }
.section-deep{ background:var(--wine-d); color:var(--shell) }
.section-wine .eyebrow,
.section-deep .eyebrow{ color:var(--gold) }
.section-wine .sec-note,
.section-deep .sec-note{ color:var(--cream-70) }

/* ══════════════ signature styles (the three with photographs) ══════════════ */

/* Only three styles have a photograph, so they get their own block at a size
   589px can carry. The rest of the menu is type. An honest gap beats stock. */
.signature{
  display:grid; gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.sig{ position:relative; display:flex; flex-direction:column; text-decoration:none }
.sig-shot{ position:relative; overflow:hidden; background:var(--ink-07); aspect-ratio:3/4 }
.sig-shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.sig:hover .sig-shot img{ transform:scale(1.04) }
.sig-body{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding-top:1.1rem;
  border-top:2px solid var(--ink);
  margin-top:1.1rem;
}
.sig h3{ font-size:var(--step-3) }
.sig-note{ margin-top:.6rem; font-size:.9rem; color:var(--ink-60) }
.sig-tiers{ margin-top:.75rem }

/* ══════════════ the menu ══════════════ */

.menu{ border-top:2px solid var(--ink) }
.menu-group{ margin-top:clamp(2.5rem,5vw,4rem) }
.menu-group:first-child{ margin-top:0 }
.menu-group > h3{
  padding-block:1.25rem;
  border-bottom:1px solid var(--ink-14);
  color:var(--rose-d);
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.24em;
  font-variation-settings:"wdth" 118;
}

.svc-row{
  display:grid; align-items:baseline;
  grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:clamp(1rem,4vw,3rem); row-gap:.6rem;
  padding-block:clamp(1.4rem,3vw,2rem);
  border-bottom:1px solid var(--ink-14);
  text-decoration:none;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
a.svc-row:hover{ background:#fff; padding-left:.9rem }
.svc-row h3{ font-size:var(--step-3) }
.svc-row .price{ grid-column:2; grid-row:1; justify-self:end }
.svc-tiers{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  color:var(--ink-60);
}
.svc-tiers span{ font-size:.8rem; white-space:nowrap }
.svc-tiers b{
  font-weight:600; color:var(--ink);
  font-variation-settings:"wdth" 112;
  text-transform:uppercase; letter-spacing:.08em; font-size:.7rem;
  margin-right:.4rem;
}
.svc-row .go{
  grid-column:3; grid-row:1;
  color:var(--ink-60); font-size:1.1rem; line-height:1;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
a.svc-row:hover .go{ color:var(--gold-ink); transform:translateX(4px) }

/* ══════════════ steps ══════════════ */

/* Genuinely sequential — she cannot arrive before you have booked — so the
   numbers carry information rather than decorating. */
.steps{
  display:grid; gap:clamp(1.75rem,3.5vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
/* A rule threaded through all four steps that draws itself as the block
   arrives, with each marker lighting as the line reaches it. The order is the
   information here — you cannot arrive before you have booked — so the line
   travels rather than simply appearing. Nothing else on the site is numbered.

   Two layers: ::before is the faint track that is always there, ::after is the
   gold line that sweeps along it. --sweep is the whole journey; each dot waits
   for its own quarter of it. */
.steps{ position:relative; --sweep:1.8s }
.steps::before,
.steps::after{
  content:""; position:absolute; z-index:0;
  left:0; right:0; top:5px; height:1px;
}
.steps::before{ background:var(--cream-16) }
.steps::after{
  background:var(--gold);
  transform-origin:left center;
  transform:scaleX(1);
}

.steps li{ position:relative; padding-top:2.4rem }
.steps li::before{
  content:""; position:absolute; z-index:1; left:0; top:0;
  width:11px; height:11px; border-radius:50%;
  background:var(--wine); border:2px solid var(--cream-16);
  transition:background .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.js .steps li.is-in::before{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(217,164,65,.16);
}
/* Without JavaScript nothing is ever marked in-view, so everything is simply
   already drawn rather than stuck at nothing. */
.steps li:not(.rv)::before{ background:var(--gold); border-color:var(--gold) }

/* The sweep, only where :has can trigger it. Elsewhere the line is just there. */
@supports selector(:has(*)){
  .js .steps::after{ transform:scaleX(0); transition:transform var(--sweep) var(--ease) }
  .js .steps:has(li.is-in)::after{ transform:scaleX(1) }

  /* Each dot sits at the left edge of its column — 0, 1/4, 2/4, 3/4 across —
     so it lights exactly as the line passes it. */
  .js .steps li:nth-child(1)::before{ transition-delay:0s }
  .js .steps li:nth-child(2)::before{ transition-delay:calc(var(--sweep) * .25) }
  .js .steps li:nth-child(3)::before{ transition-delay:calc(var(--sweep) * .5) }
  .js .steps li:nth-child(4)::before{ transition-delay:calc(var(--sweep) * .75) }
}

/* Stacked on a phone, so the thread runs down the side instead of across. */
@media (max-width:640px){
  .steps{ gap:0 }
  .steps::before,
  .steps::after{
    left:5px; right:auto; top:.4rem; bottom:2.4rem;
    width:1px; height:auto;
    transform-origin:center top;
  }
  .steps::after{ transform:scaleY(1) }
  .steps li{ padding-top:0; padding-left:2.25rem; padding-bottom:2.4rem }
  .steps li:last-child{ padding-bottom:0 }
  .steps li::before{ top:.4rem }
  @supports selector(:has(*)){
    .js .steps::after{ transform:scaleY(0) }
    .js .steps:has(li.is-in)::after{ transform:scaleY(1) }
  }
}

@media (prefers-reduced-motion: reduce){
  .steps::after{ transform:none !important; transition:none !important }
  .steps li::before{ transition-delay:0s !important }
}

.step-n{
  display:block;
  font-family:var(--sans);
  font-variation-settings:"wdth" 64,"wght" 800;
  font-size:clamp(2.25rem,5vw,3.5rem); line-height:.9;
  color:var(--gold); opacity:.9;
}
.steps h3{ font-size:var(--step-2); margin-top:.6rem; font-family:var(--display) }
.steps p{ margin-top:.7rem; font-size:.925rem; color:var(--cream-70) }
.section-shell .steps::before{ background:var(--ink-14) }
.section-shell .steps::after{ background:var(--gold-d) }
.section-shell .steps li::before{ background:var(--shell); border-color:var(--ink-14) }
.js .section-shell .steps li.is-in::before{
  background:var(--gold-d); border-color:var(--gold-d);
  box-shadow:0 0 0 4px rgba(168,120,31,.14);
}
.section-shell .steps p{ color:var(--ink-60) }
.section-shell .step-n{ color:var(--gold-d) }

/* ══════════════ the contact sheet ══════════════ */

/* One shoot, one backdrop, one wardrobe. Presenting it as a contact sheet is
   what it actually is — not a portfolio of unrelated clients. */
.sheet{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(.5rem,1.2vw,1rem);
}
.tile{ position:relative; margin:0; grid-column:span 4; overflow:hidden; background:var(--wine) }
.tile-wide{ grid-column:span 8 }
.tile-half{ grid-column:span 6 }
.tile img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:3/4;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.tile-wide img, .tile-land img{ aspect-ratio:3/2 }
.tile:hover img{ transform:scale(1.035) }
.tile figcaption{
  padding-top:.6rem;
  font-size:.62rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-variation-settings:"wdth" 112;
  color:var(--ink-60);
}
/* photo not in place yet — reads as designed, not broken */
.tile.is-empty img{ display:none }
.tile.is-empty{
  aspect-ratio:3/4;
  background-image:
    repeating-linear-gradient(64deg,  rgba(240,214,212,.16) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-64deg, rgba(240,214,212,.16) 0 1px, transparent 1px 22px);
  background-color:var(--plum);
}

@media (max-width:900px){
  .sheet{ grid-template-columns:repeat(6,1fr) }
  .tile, .tile-wide, .tile-half{ grid-column:span 3 }
}
@media (max-width:520px){
  .sheet{ grid-template-columns:repeat(2,1fr) }
  .tile, .tile-wide, .tile-half{ grid-column:span 1 }
}

.social-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(2rem,4vw,3rem) }
.social{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.25rem .7rem 1rem;
  border:var(--rule); border-radius:var(--r-pill);
  text-decoration:none; font-size:.85rem; font-weight:500;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.social:hover{ border-color:var(--gold); background:#fff }
.social:active{ transform:scale(.975); transition:transform 90ms var(--press) }
.social svg{
  width:19px; height:19px; flex:none;
  fill:none; stroke:var(--plum); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.social svg .fill{ fill:var(--plum); stroke:none }

/* ══════════════ words from clients ══════════════ */

.says{ position:relative; z-index:1; text-align:center }
.says-quote{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:var(--step-4); line-height:1.18; letter-spacing:-.012em;
  max-width:24ch; margin-inline:auto;
  color:var(--shell);
}
.says-quote::before{ content:"\201C" }
.says-quote::after{ content:"\201D" }
.says-who{ margin-top:2rem }
.says-who b{
  display:block; font-weight:600; font-size:.95rem;
  font-variation-settings:"wdth" 108;
}
.says-who span{ display:block; margin-top:.3rem; font-size:.72rem; color:var(--gold);
  text-transform:uppercase; letter-spacing:.18em; font-variation-settings:"wdth" 116 }
.says-nav{ display:flex; justify-content:center; gap:.6rem; margin-top:2.5rem }
.says-nav button{
  width:46px; height:46px; border-radius:var(--r-pill);
  background:none; border:1px solid var(--cream-16); color:var(--shell);
  font:inherit; font-size:1rem; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.says-nav button:hover{ border-color:var(--gold); background:rgba(217,164,65,.12) }
.says-nav button:active{ transform:scale(.94); transition:transform 90ms var(--press) }
.says-item{ display:none }
.says-item.is-on{ display:block }

/* ══════════════ the day ══════════════ */

/* Two bars, one scale. The gold block is the same width in both on purpose —
   the work does not change, only what surrounds it. Segments are direct-labelled
   where they are wide enough to hold the words and keyed underneath where they
   are not; the numbers are all in the text, so none of this depends on seeing
   the colour. */
.day{
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);
}
.day-row{ grid-column:1 / -1 }
.day-row + .day-row{ margin-top:clamp(1.75rem,3.5vw,2.75rem) }

.day-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:.7rem;
}
.day-when{
  font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  font-variation-settings:"wdth" 116; color:var(--cream-70);
}
.day-total{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.05rem; color:var(--cream-55);
}
.day-row-hers .day-when{ color:var(--gold) }
.day-row-hers .day-total{ color:var(--shell) }

.day-bar{
  display:flex; gap:2px;                 /* a surface gap, not a border */
  height:clamp(3.25rem,6.5vw,4.75rem);
}
.seg{
  flex:0 0 var(--w); min-width:0;
  display:flex; align-items:center;
  padding-inline:clamp(.5rem,1.2vw,1rem);
  overflow:hidden;
}
.seg:first-child{ border-radius:4px 0 0 4px }
.seg:last-child{ border-radius:0 4px 4px 0 }
.seg i{
  font-style:normal; white-space:nowrap;
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  font-variation-settings:"wdth" 112;
}
/* Colour marks what CHANGES. The braiding is identical in both days, so it is
   the neutral block; the overhead is what you are actually being sold out of,
   so it carries the rose; and the run she hands back is the gold. */
.seg-same{
  background:rgba(251,246,244,.13);
  color:var(--cream-70);
  box-shadow:inset 0 0 0 1px rgba(251,246,244,.16);
}
.seg-cost{ background:var(--rose) }
.seg-back{ background:var(--gold); color:var(--wine-d); justify-content:center }

.day-key{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem;
  margin-top:1.25rem;
  padding-bottom:clamp(1.5rem,3vw,2rem);
  border-bottom:1px solid var(--cream-16);
}
.key{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; color:var(--cream-70);
}
.key::before{
  content:""; width:10px; height:10px; flex:none; border-radius:2px;
}
.key-same::before{ background:rgba(251,246,244,.13); box-shadow:inset 0 0 0 1px rgba(251,246,244,.28) }
.key-cost::before{ background:var(--rose) }
.key-back::before{ background:var(--gold) }

/* The headline the two bars add up to. */
.day-claim{
  grid-column:1;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1rem;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
.day-claim b{
  font-family:var(--sans);
  font-variation-settings:"wdth" 64,"wght" 800;
  font-weight:400; letter-spacing:-.02em; line-height:.85;
  font-size:clamp(2.75rem,7vw,5.5rem);
  color:var(--gold);
}
.day-claim span{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,2vw,1.6rem); line-height:1.25;
  color:var(--shell); max-width:26ch;
}

.day figcaption{
  grid-column:2;
  align-self:start;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  font-size:.85rem; line-height:1.6; color:var(--cream-55);
}

/* Both bars wipe open from the left as the block arrives; hers a beat later,
   so the shorter run reads as the punchline rather than a coincidence. */
.js .day .day-bar{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--ease);
}
.js .day.is-in .day-bar{ clip-path:inset(0 0 0 0) }
.js .day.is-in .day-row-hers .day-bar{ transition-delay:.45s }

@media (max-width:820px){
  .day{ grid-template-columns:1fr }
  .day-claim, .day figcaption{ grid-column:1 }
  .day figcaption{ margin-top:1.25rem; max-width:62ch }
}
@media (max-width:700px){
  .day-bar{ height:clamp(2.75rem,9vw,3.5rem) }
  .seg i{ font-size:.58rem; letter-spacing:.05em }
}
/* Below this the segments are too narrow to hold any label, so the bars become
   pure colour and the key underneath carries every name. Nothing is lost — the
   hours are in the row headings and the caption either way. */
@media (max-width:560px){
  .seg i{ display:none }
  .day-key{ gap:.5rem 1.25rem }
}

/* ══════════════ the rest of the case ══════════════ */

.also{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  margin-top:clamp(3rem,6vw,5rem);
}
.also li{ padding-top:1.2rem; border-top:1px solid var(--cream-16) }
.also h3{
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  font-variation-settings:"wdth" 116; color:var(--gold);
}
.also p{ margin-top:.75rem; font-size:.9rem; color:var(--cream-70) }

@media (prefers-reduced-motion: reduce){
  .js .day .day-bar{ clip-path:none; transition:none }
}

/* ══════════════ meet joy ══════════════ */

.about-grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
}
.about-shot{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--blush) }
.about-shot img{ width:100%; height:100%; object-fit:cover }
/* Designed placeholder, not a grey box — the portrait is still to come. */
.about-shot.is-await{
  display:grid; place-items:center; text-align:center; padding:2rem;
  background-image:
    repeating-linear-gradient(64deg,  rgba(62,15,32,.07) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-64deg, rgba(62,15,32,.07) 0 1px, transparent 1px 20px);
}
.about-shot.is-await .mark-lg{ color:var(--plum) }
.about-shot.is-await .mono-lg,
.about-shot.is-await .mark-ring{ fill:var(--plum) }
.about-shot.is-await p{ margin-top:1rem; font-size:.7rem; color:var(--plum);
  text-transform:uppercase; letter-spacing:.2em; font-variation-settings:"wdth" 116 }
.about-body p + p{ margin-top:1.2rem }
.about-body .serif{ font-size:var(--step-3); color:var(--ink) }

.stats{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.75rem; border-top:2px solid var(--ink);
}
.stats b{
  display:block;
  font-family:var(--sans); font-variation-settings:"wdth" 64,"wght" 800;
  font-size:clamp(2rem,4.5vw,3rem); line-height:.9; color:var(--gold-d);
}
.stats span{ display:block; margin-top:.5rem; font-size:.72rem; color:var(--ink-60);
  text-transform:uppercase; letter-spacing:.16em; font-variation-settings:"wdth" 114 }

.areas{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem }
.areas li{
  padding:.45rem .9rem; border:var(--rule);
  font-size:.78rem; color:var(--ink-60);
}

@media (max-width:820px){ .about-grid{ grid-template-columns:1fr } }

/* ══════════════ booking ══════════════ */

.book-wrap{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
.contact{ margin-top:2rem; padding-top:1.75rem; border-top:2px solid var(--ink) }
.contact dt{
  font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  font-variation-settings:"wdth" 114; color:var(--rose-d);
  margin-top:1.4rem;
}
.contact dt:first-child{ margin-top:0 }
.contact dd{ margin:.4rem 0 0 }
.contact a{ text-decoration:none; border-bottom:1px solid var(--ink-14) }
.contact a:hover{ border-bottom-color:var(--gold) }

.dep-note{
  margin-top:2rem; padding:1.1rem 1.25rem;
  background:var(--blush); color:var(--wine);
  font-size:.875rem; border-left:3px solid var(--gold);
}
.dep-note b{ font-weight:600 }

.book-form{
  background:#fff; padding:clamp(1.5rem,3.5vw,2.5rem);
  border:var(--rule);
}
.f-row{ display:grid; gap:1rem; grid-template-columns:1fr 1fr }
.field{ margin-top:1.1rem }
.field:first-child, .f-row .field{ margin-top:0 }
.f-row{ margin-top:1.1rem }
.book-form > .f-row:first-child{ margin-top:0 }
.field label{
  display:block; margin-bottom:.4rem;
  font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  font-variation-settings:"wdth" 114; color:var(--ink-60);
}
.field label u{ text-decoration:none; text-transform:none; letter-spacing:0; opacity:.6 }
.field input, .field select, .field textarea{
  width:100%; padding:.8rem .9rem;
  font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--shell); border:1px solid var(--ink-14);
  border-radius:var(--r-0);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
/* A native select keeps its own arrow only until the border and background
   are restyled; then it needs one drawn back in. */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E1F3C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  background-size:12px 8px;
  cursor:pointer;
}
.field select::-ms-expand{ display:none }

.field textarea{ min-height:7rem; resize:vertical }
.field input:hover, .field select:hover, .field textarea:hover{ background:#fff }
.field input:focus, .field select:focus, .field textarea:focus{
  background:#fff; border-color:var(--gold); outline:none;
}
.field.is-bad input, .field.is-bad select, .field.is-bad textarea{ border-color:var(--err) }
.err{ display:block; margin-top:.35rem; font-size:.78rem; color:var(--err) }

/* honeypot — never shown, never announced */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.f-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem }
.form-msg{ margin-top:1rem; font-size:.9rem; display:none }
.form-msg.is-on{ display:block }
.form-msg.is-ok{ color:var(--ok) }
.form-msg.is-err{ color:var(--err) }
.form-msg a{ color:var(--plum) }

@media (max-width:820px){
  .book-wrap{ grid-template-columns:1fr }
  .f-row{ grid-template-columns:1fr }
}

/* ══════════════ questions ══════════════ */

.faq{ border-top:2px solid var(--ink) }
.faq details{ border-bottom:1px solid var(--ink-14) }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.35rem;
  cursor:pointer; list-style:none;
  font-size:var(--step-1); font-weight:500;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--plum) }
.faq summary::after{
  content:"+"; flex:none;
  font-size:1.4rem; line-height:1; color:var(--gold-ink);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq p{ padding-bottom:1.5rem; max-width:64ch; color:var(--ink-60) }

/* Height animation only where the browser can interpolate to auto. */
@supports (interpolate-size: allow-keywords){
  .faq details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content{ block-size:auto }
}

.policies{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  margin-top:clamp(2.5rem,5vw,4rem);
}
.policies div{ padding-top:1.2rem; border-top:1px solid var(--ink-14) }
.policies h3{
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  font-variation-settings:"wdth" 116; color:var(--rose-d);
}
.policies p{ margin-top:.7rem; font-size:.9rem; color:var(--ink-60) }

/* ══════════════ call to action band ══════════════ */

.cta-band{ text-align:center }
.cta-band h2{ max-width:18ch; margin-inline:auto }
.cta-band .btn{ margin-top:2.25rem }

/* ══════════════ footer ══════════════ */

.foot{ background:var(--wine-d); color:var(--cream-70); padding-top:var(--pad); overflow:hidden }
.foot-in{
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1.2fr 1fr 1fr;
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot a{ text-decoration:none }
.foot a:hover{ color:var(--shell) }
.foot .brand-name{ color:var(--shell) }
.foot-tag{ font-family:var(--display); font-style:italic; color:var(--rose); margin-top:.5rem }
.foot h3{
  font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  font-variation-settings:"wdth" 116; color:var(--gold);
  margin-bottom:1rem;
}
.foot-nav li + li, .foot-contact li + li{ margin-top:.6rem }
.foot-social{ display:flex; gap:1.25rem; margin-top:1.25rem }
.foot-social a{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.18em;
  font-variation-settings:"wdth" 116; color:var(--rose);
}

/* The name, at the size it deserves, once. */
.foot-word{
  font-family:var(--sans);
  font-variation-settings:"wdth" 62,"wght" 800;
  font-weight:400;
  font-size:clamp(2.5rem,13.2vw,11rem);
  line-height:.82; letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--shell); opacity:.09;
  white-space:nowrap; user-select:none;
  margin-bottom:-.14em;
}
.foot-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-block:1.5rem; border-top:1px solid var(--cream-16);
  font-size:.75rem; color:var(--cream-55);
}

@media (max-width:760px){ .foot-in{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .foot-in{ grid-template-columns:1fr } }

/* ══════════════ whatsapp ══════════════ */

.wa{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:30;
  width:54px; height:54px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--plum); color:var(--shell);
  box-shadow:0 6px 24px rgba(44,9,24,.34);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.wa:hover{ transform:translateY(-3px); background:var(--wine) }
.wa:active{ transform:scale(.94); transition:transform 90ms var(--press) }
.wa svg{ width:25px; height:25px; fill:currentColor }

/* ══════════════ reveal on scroll ══════════════ */

/* Gated on the `js` class set in each page's head. Without JavaScript the
   content is simply there — never a hero that fades in and never arrives. */
.js .rv{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .rv.is-in{ opacity:1; transform:none }

/* ══════════════ accessibility ══════════════ */

/* Nothing here is dragged, so nothing needs momentum. With motion reduced,
   every arrival is instant and the braid holds still. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .rv{ opacity:1; transform:none }
  .braid svg{ transform:none !important }
  .sig:hover .sig-shot img,
  .tile:hover img{ transform:none }
  .btn:hover, .wa:hover, .social:active{ transform:none }
}

/* Glass becomes solid rather than disappearing. */
@media (prefers-reduced-transparency: reduce){
  .topbar.is-stuck{ background:var(--wine-d); backdrop-filter:none; -webkit-backdrop-filter:none }
  .topbar::after{ display:none }
  .nav{ background:var(--wine-d) }
  .hero-shot::after{ background:linear-gradient(to top, rgba(62,15,32,.7), transparent 46%) }
}

/* The alpha tokens are the only thing that needs to move; everything else
   is already at full contrast. */
@media (prefers-contrast: more){
  :root{
    --gold-d: #7E5A10;
    --gold-ink: #6E4E0C;
    --ink-60: rgba(42,16,24,.86);
    --ink-14: rgba(42,16,24,.4);
    --ink-07: rgba(42,16,24,.22);
    --cream-70: rgba(251,246,244,.94);
    --cream-55: rgba(251,246,244,.82);
    --cream-16: rgba(251,246,244,.42);
  }
  .ghost{ display:none }
  .grid-lines{ display:none }
  .foot-word{ opacity:.2 }
  .nav a:not(.btn){ color:var(--shell) }
}