/*
  The Head Spa by Hikari, D14 Home lane (index.html only). Loaded last on the home page, after
  site.css, home.css, modules.css and motion.css. D12 stays the base (owner #39576 "keep the previous
  version, change only what I asked"): every rule here answers one ledger id (research/ledger-d14.json)
  and says which. Built by tools/home/build-d14-home-css.py; do not edit by hand.

  Contents
    B1  The film and the owner's first words on it
    B2  Sound on
    (B3  The Hikari Difference on the water light: removed in r7 with its section, #39602 Home 3)
    B4  Treatments: the name in the middle of its picture
    B5  In Their Words: the whole 9:16 frame
    B6  Type on photographs (shell handoff 1)
    B7  Plan your visit: the FAQ link under the heading
    G2  The footer on the Home page: the subtle gradient
    R7  Owner #39602 Home 4 to 8: the treatment ground and its heading, the guests three to a row
        on a computer screen, Plan your visit closer to its photograph (Home 10, the footer, is
        in site.css: it is the same footer on all 16 pages)
*/

/* B1 (3-H2a to 3-H2d, N-H1, N-H2, 2-F3, 0-G1). The D12 film stays full screen; the owner's heading,
   line and link sit on it, low on the left (#39576 "not the centre, at the side"; the side follows
   the #39577 mock, phone 1). The centre lockup is gone from the HTML. The shade is the owner's
   palette charcoal (#1A1714, #39577), deepest behind the words, and keeps D12's veil under the
   header. Strength set by measurement: the heading at least 3:1 and the line at least 4.5:1 against
   the 95th percentile brightest film pixel under them, over the D12 film every second and the D14
   test renders (qa/home/b1-contrast.json). */
.hm-hero .hero__scrim {
  background:
    linear-gradient(to bottom, rgba(var(--scrim-rgb), 0.5) 0, rgba(var(--scrim-rgb), 0.34) var(--header-h), rgba(var(--scrim-rgb), 0) calc(var(--header-h) + 5rem)),
    radial-gradient(ellipse 100% 110% at 0% 100%, rgba(26, 23, 20, 0.78) 0%, rgba(26, 23, 20, 0.62) 40%, rgba(26, 23, 20, 0.3) 68%, rgba(26, 23, 20, 0) 100%),
    linear-gradient(to top, rgba(26, 23, 20, 0.35) 0%, rgba(26, 23, 20, 0) 40%);
}
.hm-hero__copy {
  position: absolute;
  z-index: 1;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 4.5rem; /* clear of Sound on at the foot (B2) */
  color: var(--on-media);
}
.hm-hero__title {
  font-size: var(--fs-h1-home);
  line-height: 1.06;
}
.hm-hero__lede {
  max-width: 26rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.hm-hero__more { margin-top: 1.25rem; }
@media (max-width: 47.99em) {
  /* a phone: the words run the full width, so the shade comes up from the foot across it */
  .hm-hero .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(var(--scrim-rgb), 0.5) 0, rgba(var(--scrim-rgb), 0.34) var(--header-h), rgba(var(--scrim-rgb), 0) calc(var(--header-h) + 5rem)),
      linear-gradient(to top, rgba(26, 23, 20, 0.84) 0%, rgba(26, 23, 20, 0.62) 40%, rgba(26, 23, 20, 0) 68%);
  }
}
.hm-hero .hm-link { color: var(--on-media); }
.hm-hero .hm-link:hover { color: var(--on-media-soft); }
@media (min-width: 48em) {
  .hm-hero__copy {
    left: var(--rail-pad);
    right: auto;
    width: min(46rem, calc(100% - 2 * var(--pad-x)));
    bottom: clamp(4.5rem, 11svh, 7.5rem);
  }
  .hm-hero__more { margin-top: 1.5rem; }
}
@media (min-width: 64em) {
  .hm-hero__title { font-size: min(4.5rem, 4.9vw); }   /* D12 .hm-intro__title */
  .hm-hero__title .line { white-space: nowrap; }
}

/* B1 r4 (R4-1, 2026-09-30). The words keep to one agreed zone so the film can keep every face out
   of it (#39576 "the model and the bed lie level", the faces clear of the words). The words and
   their order do not change; only size, measure, place and shade.
   Phone (below 48em): the three parts stay on the first screen, packed into the foot: heading
   28px, line 14px, and the link on the same row as Sound on (the one control, low right), so the
   line ends above Sound on. Block top within the bottom 30% at 390x664, 26% at 390x844, 25% at
   430x932. The shade comes up from the foot only as far as the words need (px, not %), so the
   film above it stays clear.
   Wide screen (64em and up): the block inside x 4 to 40%, y 58 to 93% of the screen at 1366x768,
   1440x900, 1920x969, 1920x1080 and 2560x1080. Left edge on the header logo's rail, never nearer
   the edge than 4.5vw (the J of the heading hangs about 3px left of it); the heading scales down with the width left to it and with the height; the
   shade is a soft dark field under the block only (the copy's ::before, following the words),
   plus a low floor under the film controls. Measured: qa/r4/hero-text-zone.json. */
@media (max-width: 47.99em) {
  .hm-hero .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(var(--scrim-rgb), 0.5) 0, rgba(var(--scrim-rgb), 0.34) var(--header-h), rgba(var(--scrim-rgb), 0) calc(var(--header-h) + 5rem)),
      linear-gradient(to top, rgba(26, 23, 20, 0.84) 0, rgba(26, 23, 20, 0.74) 9rem, rgba(26, 23, 20, 0.58) 13rem, rgba(26, 23, 20, 0) 19rem);
  }
  .hm-hero__copy { bottom: 1rem; }
  .hm-hero__title { font-size: 1.75rem; line-height: 1.04; }
  .hm-hero__title .line { white-space: nowrap; }
  .hm-hero__lede {
    max-width: none;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.42;
  }
  /* the link's row (.hm-link is 2.75rem high) is Sound on's row: its foot on Sound on's foot */
  .hm-hero__more { margin-top: 0.25rem; }
}
@media (min-width: 64em) {
  .hm-hero__copy {
    left: max(var(--rail-pad), 4.5vw);
    right: auto;
    width: auto;
    max-width: calc(40% - max(var(--rail-pad), 4.5vw) - 1rem);
    bottom: 7.5svh;
  }
  .hm-hero__title { font-size: min(4.5rem, 4vw, calc(81px - 1.16vw), 6.6svh); }
  .hm-hero__lede {
    max-width: 26rem;
    margin-top: 1rem;
    font-size: clamp(1rem, 1.9svh, 1.0625rem);
    line-height: 1.55;
  }
  .hm-hero__more { margin-top: 0.75rem; }
  .hm-hero .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(var(--scrim-rgb), 0.5) 0, rgba(var(--scrim-rgb), 0.34) var(--header-h), rgba(var(--scrim-rgb), 0) calc(var(--header-h) + 5rem)),
      linear-gradient(to top, rgba(26, 23, 20, 0.28) 0, rgba(26, 23, 20, 0) 7rem);
  }
  .hm-hero__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -3rem;
    border-radius: 3rem;
    background: rgba(26, 23, 20, 0.62);
    filter: blur(2rem);
    pointer-events: none;
  }
}

/* B2 (2-F4x1). Sound on (D13 part, import/parts/06-sound-on): the film plays muted, this turns its
   music on. Beside the D12 film toggle, low on the right, in the film toggle's voice with the header
   Book's hairline over the film. On a phone it is the one control, in the corner (MJ, D13 r5). */
.hm-film__sound {
  position: absolute;
  z-index: 2;
  right: calc(var(--pad-x) - 0.75rem + 2.75rem + 0.25rem);
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  background: rgba(26, 23, 20, 0.28);
  box-shadow: inset 0 0 0 1px var(--on-media-line);
  color: var(--on-media);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.hm-film__sound:hover { color: var(--on-media-soft); }
.hm-film__sound-icon { font-size: 1rem; line-height: 1; }
@media (max-width: 47.99em) {
  .hm-film .hm-film__toggle { display: none; }
  .hm-film__sound { right: calc(var(--pad-x) - 0.5rem); }
}

/* B4 (3-H5a, 3-H5b, N-H3, N-H4). D12's two texture slides. The brackets are gone (home.css). The
   name's own box is in the middle of the picture, across and down (#39558 3-5 "the exact centre of
   the photograph"): the copy fills the slide as three rows, equal space above and below the name,
   the line, price and Book in the lower row, the padding equal top and bottom and taller than the
   foot controls, so nothing meets them. Measured: qa/home/b4-measure.json. */
.hm-slide__card { padding: 0; }
.hm-slide__copy {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  max-width: none;
  padding: 7.5rem var(--pad-x);
}
.hm-slide__name { grid-row: 2; }
.hm-slide__more {
  grid-row: 3;
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: 40rem;
  padding-top: 0.75rem;
}
@media (min-width: 48em) {
  .hm-slide__copy { padding: 6.5rem var(--pad-x); }
  .hm-slide__more { gap: 0.875rem; padding-top: 0.875rem; }
}
/* a short screen (1366x768, 1280x720, a small phone): the lower copy a little tighter, so it stays
   clear of the foot controls while the name keeps the middle */
@media (max-height: 50em) {
  .hm-slide__more,
  .hm-slide__copy .hm-slide__more { gap: 0.5rem; padding-top: 0.5rem; }
  .hm-slide__price { margin-top: 0.25rem; }
}
@media (max-height: 46em) {
  .hm-slide__more,
  .hm-slide__copy .hm-slide__more { gap: 0.375rem; padding-top: 0.375rem; }
  .hm-slide__price { margin-top: 0; }
  .hm-slide__name { font-size: min(clamp(2.75rem, 1.5rem + 4vw, 4.5rem), 9.4svh); }
}
html:not(.js) .hm-slide__card { padding-bottom: 0; }

/* B5 (3-H6a, 3-H6b, 3-H6c, N-H6, N-H7). D12's one-guest rail and place (PLAN 4-3 #5); on the card
   the whole 9:16 frame (D13 part, import/parts/05-in-their-words), nothing cropped. The rail is held
   to the width whose 9:16 card still fits one screen under the header with its line under it, as
   D12's 4:5 card did. data-crop is the whole frame (0 0 1080 1920) so D12's hover film and the
   dialog opening from the card still work without cropping. */
.hm-story .story__media { aspect-ratio: 9 / 16; }
.hm-story .story__media img { object-fit: contain; }
.hm-rail { max-width: max(20rem, calc((100svh - 14rem) * 0.5625)); }

/* B6 (shell handoff 1, 0-G2 / N-G1): display type on a photograph or texture is Medium 500 */
.hm-slide__name,
.hm-gift__title { font-weight: var(--display-wght-hero); }

/* B7 (3-H7a, 3-H7b). D12's heading and Drying Studio photograph; the address, the station and the
   two notes are gone; "Questions about your visit?" right under the heading (#39558 3-7). */
.hm-visit__more { order: 2; margin-top: 1rem; }
@media (min-width: 64em) {
  .hm-visit__grid { grid-template-rows: auto minmax(0, 1fr); }
  .hm-visit__more { grid-column: 10 / 14; grid-row: 2; align-self: start; margin: 1.5rem 0 0; }
}

/* G2 (N-B1, PLAN 5 G1 "Home 2 places only", MJ D2 (a)). The owner's "04 Subtle Gradient" on the
   Home footer only (fix round 1, gate G2A-F4: it had been on all 16 pages via site.css; it now
   lives here, so the other 15 pages keep D12's plain champagne). Over the D12 champagne, one soft
   diagonal light sweep and a glow from the top left. Light only: every footer text colour keeps
   at least its D12 contrast (muted #716050 is 4.5:1 on the plain champagne, so nothing may be
   darker). Fix round 1 (G2d-F1): the sweep's brightest part is about 9 to 10 grey levels over the
   champagne, so it can be seen (qa/home/fix-r1/texture-r1.json). CSS only, no image. */
.page-home .site-footer {
  background:
    linear-gradient(118deg, rgba(255, 252, 247, 0) 28%, rgba(255, 252, 247, 0.34) 46%, rgba(255, 252, 247, 0) 64%),
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(255, 252, 247, 0.15) 0%, rgba(255, 252, 247, 0) 70%),
    var(--surface-band);
}

/* R7-1 (#39602 Home 1). "Certified Trichologist" never breaks (the strong carries .nowrap in the
   HTML). On a computer screen the line is also given the few pixels it needs (26rem to 28rem) so
   "Trichologist" comes up beside "Certified" at the end of the first line instead of the pair
   moving down: 443px at 17px (1440 and up), 417px at 16px (1280, 1366). The copy's own cap (B1 r4,
   inside 40% of the screen) still wins, so the words stay in their agreed zone. On a phone the
   first line is about 15px too short for the pair at 390 wide, so the pair starts the second
   line together; at 430 it ends the first. */
@media (min-width: 64em) {
  .hm-hero__lede { max-width: 28rem; }
}

/* R7-4, R7-5 (#39602 Home 4 and 5). The treatment ground is .d14-glow-bg on the rail (d14-bg.css,
   loaded after this file, so it replaces D12's night ground); the two texture pictures are gone
   from the HTML. "Choose your head spa." now stands in that ground, above both treatments: a child
   of the rail, not of a slide, so it stays while the slides move. It sits in the middle across,
   as far from the top as the foot controls are from the foot, inside the slide copy's top padding
   (B4), so each name keeps the middle of its slide. The line that stood under it is gone. The
   heading lets a swipe through to the track under it. */
.hm-tex .hm-treat__head {
  position: absolute;
  z-index: 1;
  top: 1.5rem;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 var(--pad-x);
  text-align: center;
  pointer-events: none;
}
.hm-tex .hm-treat__title {
  position: relative;
  display: inline-block;
  color: var(--glow-ink, var(--on-media));
}
/* the light of the new ground can reach the top middle (on a phone the bright streak crosses it),
   so the heading carries its own soft dark field, as the film's words do (B1 r4): the ground's
   navy, blurred, only as large as the words. Measured: qa/r7/home/contrast.json. */
.hm-tex .hm-treat__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.75rem -4rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 22, 33, 0.74) 0%, rgba(20, 22, 33, 0.56) 55%, rgba(20, 22, 33, 0) 100%);
  filter: blur(0.75rem);
  pointer-events: none;
}
@media (min-width: 48em) {
  .hm-tex .hm-treat__head { top: 2.75rem; }
}

/* R7-6 (#39602 Home 6). In Their Words on a computer screen (64em and up): the heading on top, the
   six guests under it three to a row (two rows), in the page order, then the reviews link. A card
   is at most 24rem wide, and no wider than a 9:16 frame that fits one screen with its lines under
   it, so a row reads at once. The heading, the grid and the reviews link share one measure, held
   in the middle of the page (the heading keeps its left edge on the grid's). Phones and tablets
   keep the one-at-a-time rail (D12, B5). With nothing to scroll, site.js hides Prev / Next. */
@media (min-width: 64em) {
  .hm-stories {
    --st-col: min(24rem, calc((100svh - 16rem) * 0.5625));
    --st-gap: clamp(1.5rem, 0.5rem + 1.5vw, 2.5rem);
    --st-w: calc(3 * var(--st-col) + 2 * var(--st-gap));
  }
  .hm-stories__grid { grid-template-rows: auto auto auto; }
  .hm-stories__title,
  .hm-rail {
    grid-column: c1 / c13;
    justify-self: center;
    width: min(100%, var(--st-w));
    max-width: none;
  }
  .hm-stories__title { grid-row: 1; }
  .hm-rail { grid-row: 2; margin: 2.5rem 0 0; }
  .hm-rail__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 3rem var(--st-gap);
    overflow: visible;
    scroll-snap-type: none;
  }
  .hm-rail__controls { display: none; }
  .hm-reviews {
    grid-column: c1 / c13;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    margin: 2.5rem 0 0 max(0px, calc((100% - var(--st-w)) / 2));
  }
}

/* R7-8 (#39602 Home 8). Plan your visit on a computer screen: the heading and "Questions about
   your visit?" move one column toward the Drying Studio photograph, a steady gap from its edge
   (about 4rem at 1920, 3.25rem at 1440), top still on the photograph's top. */
@media (min-width: 64em) {
  .hm-visit__title,
  .hm-visit__more { grid-column: 9 / 14; }
  .hm-visit__title { margin-left: clamp(2rem, 1rem + 2.5vw, 4rem); }
  .hm-visit__more { margin-left: clamp(2rem, 1rem + 2.5vw, 4rem); }
}

/* R8-1 (#39612 Home). The whole group, "60-minute Premium Head Spa" down to the Book link, now
   sits in the middle of the treatment ground (B4 had the name alone in the middle, the line, price
   and Book under it, so the group read about 72 to 95px low). A fourth row, as tall as the first,
   under the group: equal space above the name and below Book. The padding (B4) is unchanged, so the
   heading and the foot controls keep their places. Measured: qa/r8/home/measure-{before,after}.json. */
.hm-slide__copy { grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); }

/* R9-2 (#39624 "a little larger"). "Choose your head spa." on the treatment ground about one
   step up: 24 to 28px became 26 to 31px (about 10%). */
.hm-tex .hm-treat__title { font-size: clamp(1.625rem, 1.425rem + 0.6vw, 1.9375rem); }