/* Knead studio homepage comparison look: the dark video hero (Mount Pleasant preview).
   The site's own colours (styles.css: lacquer, ivory, blush, amber; nothing re-tinted).
   Desktop (Phat 2026-11-06, Option C; iPhone-fixes spec 12.0): the homepage's hero, full width. The homepage's own
   blur-fill clip (/img/home, made for copy on its dark left, the hand sharp at right), its wash and its filter
   (styles.css .hero-media), with the copy layered over the clip and the h1 on two lines ("Massage in" /
   "Mount Pleasant") so it clears the hand. This reverses 2026-11-05 "Keep its old clip" (judged in the old half-width
   plate; 2026-10-31 "the full-bleed clip did not come out nice" was the old upscaled close-up, not this clip).
   Phones and tablets (899 and below): unchanged, a short video band above the copy (Phat: "it's fine on mobile").
   Below the fold the page is styles.css as it stands.
   Loaded only on pages with html[data-look="video"], on top of styles.css (same self-hosted fonts). */

/* the copy column is narrow below 1400px: the rating takes its own line (as on phones), no stray separator */
@media (min-width: 700px) and (max-width: 1399px) {
  [data-look="video"] .sh-meta .rating { flex-basis: 100%; }
  [data-look="video"] .sh-meta .rating::before { display: none; }
}

[data-look="video"] .sh { background: var(--lacquer); }
[data-look="video"] .sh h1 { font-size: clamp(3.1rem, 5.84vw, 5.6rem); line-height: .98; letter-spacing: -.015em; }
[data-look="video"] .sh .lede { max-width: 40ch; }

/* ---------- desktop: the homepage hero, full width, copy layered over the clip ---------- */
@media (min-width: 900px) {
  [data-look="video"] .sh { min-height: max(100svh, 760px); }
  /* "Mount Pleasant" takes line 2, back on the clip's dark left (one line ran into the hand: h1 2.95 in the spec) */
  [data-look="video"] .sh h1 em { display: block; width: fit-content; }
}

/* owner round 2 (Phat 2026-11-08: "1 same identity now, just a different hero image for each"): every studio page
   wears this look with its own photograph instead of the clip. Desktop: the photo is a plate on the right, like the
   clip's sharp hand, and fades into the lacquer on every side the copy or the page meets (no edge on any Knead hero);
   the copy keeps the clip's dark left. The photo stays muted by styles.css .hero-media img. */
@media (min-width: 900px) {
  [data-look="video"] .sh .hero-media:has(img) { left: 40%; background: var(--lacquer); }
  [data-look="video"] .sh .hero-media:has(img)::after {
    background:
      linear-gradient(to right, var(--lacquer) 0%, rgba(35, 33, 28, .9) 10%, rgba(35, 33, 28, .55) 26%, rgba(35, 33, 28, .18) 44%, rgba(35, 33, 28, 0) 60%),
      linear-gradient(to bottom, rgba(35, 33, 28, .7) 0, rgba(35, 33, 28, .3) 110px, rgba(35, 33, 28, 0) 240px),
      linear-gradient(to left, rgba(35, 33, 28, .45) 0%, rgba(35, 33, 28, 0) 16%);
  }
}

/* pause: a round dark disc, ivory glyph, top right of the clip */
[data-look="video"] .vpause {
  border-radius: 50%; border-color: rgba(244, 239, 238, .45); color: var(--ivory); background: rgba(35, 33, 28, .58);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
[data-look="video"] .vpause:hover { border-color: var(--ivory); background: rgba(35, 33, 28, .82); }

/* phone and tablet: the clip is a band on top (short, so H1 and Book still make the first screen), copy below on the
   plain ground; no wash, no fades, the clip as shot */
@media (max-width: 899px) {
  [data-look="video"] .nav { background: var(--lacquer); }
  [data-look="video"] .sh { display: block; min-height: 0; padding-top: var(--nav-h); }
  [data-look="video"] .sh .hero-media { position: relative; inset: auto; z-index: 1; background: var(--lacquer-deep); height: min(36svh, 440px); min-height: 220px; }
  [data-look="video"] .sh .hero-media::before, [data-look="video"] .sh .hero-media::after { display: none; }
  [data-look="video"] .sh .hero-media video, [data-look="video"] .sh .hero-media img { position: absolute; inset: 0; filter: none; object-position: center 45%; }
  /* owner round 2026-11-07 #3 (Phat: blend the border between the hero video and what follows; no hard line on any
     Knead hero): only the band's foot fades into the ground the copy sits on; the clip above stays as shot */
  [data-look="video"] .sh .hero-media::after {
    display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, var(--lacquer) 0%, rgba(35, 33, 28, .8) 22%, rgba(35, 33, 28, .42) 52%, rgba(35, 33, 28, .12) 80%, rgba(35, 33, 28, 0) 100%);
  }
  /* review fix 2026-11-08 (owner round 2; ruling: no visible edge on any Knead hero): with a photo in the band, its
     top edge met the solid nav in a hard line; the band's head now fades out of the nav's lacquer too */
  [data-look="video"] .sh .hero-media::before {
    display: block; content: ""; position: absolute; inset: 0 0 auto 0; height: 56px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, var(--lacquer) 0, rgba(35, 33, 28, .55) 40%, rgba(35, 33, 28, 0) 100%);
  }
  [data-look="video"] .vpause { top: calc(var(--nav-h) + 12px); }
  [data-look="video"] .sh > .wrap { position: relative; z-index: 2; margin: 0; min-height: 0; display: block; max-width: none; padding: 26px var(--pad) 36px; }
  [data-look="video"] .sh .hero-copy { max-width: none; padding: 0; }
  [data-look="video"] .sh h1 { font-size: clamp(2.5rem, 11vw, 4.2rem); }
}

/* page heroes (Phat 2026-11-11: "i also want to have it as the hero for each service blended with the hero text ... the
   site feels sloppy, when you just slap a photo underneath"): the service pages with a photo, /memberships and
   /packages wear this same hero (lib.mjs pageHead, .sh-page), with the page's photo where the studio pages have theirs.
   Their names run longer than "Massage in Kitsilano" ("The RMT: registered massage therapy"), so the h1 keeps the inner
   pages' size and the blush word stays inline (the studio h1's second line is a desktop rule above). */
[data-look="video"] .sh-page h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1; max-width: 13em; }
[data-look="video"] .sh-page h1 em { display: inline; }
/* desktop: the studio plate as a 4:5 portrait, the full hero height against the right edge (its photos are portrait,
   and so are the vertical footage stills that may replace them; a 60%-wide plate cropped them to close-ups). The plate's
   own fades above (left into the copy's lacquer, top under the nav, the right edge, the foot) carry over unchanged. */
@media (min-width: 900px) {
  [data-look="video"] .sh-page .hero-media:has(img) { left: auto; width: auto; aspect-ratio: 4 / 5; max-width: 64%; }
  [data-look="video"] .sh-page .hero-copy { max-width: 40rem; }
}