/*
  The Head Spa by Hikari, D12 home (index.html only). Loaded after site.css, before modules.css
  and motion.css. Replaces the D11 home.css (backups/pre-integrate/site/css/home.css).
  Brief (MJ 9/27): "no words on the film, like yusen", "rebuild it like yusen, there is no
  breathing room". Base = concept h1 "Yusen Skeleton", with the three judges' fixes and the
  grafts from concept h2 (Treatments beside a film from the left edge, the Difference points
  beside a film at the right edge, the Plan Your Visit column, the gift crop). DESIGN-D12.md.
  The yusen grammar (research/YUSEN-SKELETON.md 4): one section is about one screen; a screen is
  either a full-bleed picture, or paper with one or two pictures and a few words; a large italic
  and a small text size and nothing between; text links, no boxes; the header out of the way.
  The owner's eight sections keep their order (R-156). Final states only, except the header
  tuck (9), which is the one new movement.

  Contents
    0. Tokens, the page grid, shared voices
    1. Film and first words
    2. The Hikari Difference
    3. Treatments
    4. In Their Words
    5. A Space to Settle In
    6. Plan Your Visit
    7. Gift Cards
    8. Journal
    9. Header over the film, and the tuck
   10. Tablet widths
*/

/* 0. Tokens, grid, voices */
.page-home {
  --hm-top: 4.5rem;      /* 72: first line of a paper screen on a phone */
  --hm-bot: 4.5rem;
  --hm-gap: 2.5rem;      /* 40: words to picture on a phone */
  --fs-h1-home: clamp(2.3rem, 1.2rem + 3.6vw, 4.5rem);      /* 37 to 72 */
  --fs-title-home: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);  /* 24 to 28 */
  --fs-media-home: clamp(2.75rem, 1.6rem + 4.4vw, 5rem);    /* 44 to 80: words on a photograph */
}
@media (min-width: 64em) {
  .page-home { --hm-top: 6.5rem; --hm-bot: 6.5625rem; }   /* 104 / 105 (yusen 103 / 45 to 57) */
}

/* phones: one column between two side gutters, "full" runs to the screen edges.
   desktop: 12 columns of the 1440 content width. Line 2 = column 1, column n ends at line n + 2,
   lines 1 and 15 are the screen edges (a picture that bleeds starts or ends there). */
.hm-grid {
  display: grid;
  grid-template-columns: [full-start] var(--pad-x) [c1] minmax(0, 1fr) [c13] var(--pad-x) [full-end];
}
.hm-grid > * { grid-column: c1 / c13; min-width: 0; }
@media (min-width: 64em) {
  .hm-grid {
    grid-template-columns:
      [full-start] minmax(calc(var(--pad-x) - var(--gutter)), 1fr)
      [c1] repeat(12, minmax(0, calc((var(--max) - 11 * var(--gutter)) / 12)))
      [c13] minmax(calc(var(--pad-x) - var(--gutter)), 1fr) [full-end];
    column-gap: var(--gutter);
  }
}

.hm-h2 {
  font-size: var(--fs-h2-home);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.06;
  letter-spacing: var(--display-track-italic);
}
.hm-eyebrow { margin: 0; }
/* the one link voice in the page body (yusen: small capitals on a hairline, no boxes) */
.hm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.hm-link > span:first-child { position: relative; }
.hm-link > span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.375rem;
  height: 1px;
  background: currentColor;
}
.hm-link .icon--ext { width: 0.6875rem; height: 0.6875rem; margin-left: 0.125rem; }
.hm-link:hover { color: var(--accent); }

/* 1. Film and first words */
.hm-hero {
  display: block;
  min-height: 0;
  overflow: visible;
  background: var(--surface);
  color: var(--ink);
}
.hm-film {
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
  background: var(--night);
  color: var(--on-media);
}
.hm-film :focus-visible { outline-color: var(--on-media); }
/* only a veil under the header, and a soft pool behind the lockup while it stands */
.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));
}
.hm-hero .hero__scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 32% 22% at 50% 50%, rgba(var(--scrim-rgb), 0.32) 0%, rgba(var(--scrim-rgb), 0.14) 55%, rgba(var(--scrim-rgb), 0) 100%);
  opacity: 0;
}
html[data-mast="in"]:not([data-mast-tight]) .hm-hero .hero__scrim::before { opacity: 1; }
/* the wordmark in the middle of the film, and it stays (yusen keeps its wordmark on the film at
   0.8). Smaller than D11 so the tagline does not read as a shop sign: about 380 at 1440, 230 on
   a phone (aesthetic judge, 9/27). */
.hm-hero .hero__mast {
  top: 50%;
  width: min(59vw, 34svh);
  height: auto;
}
.hm-hero .hero__mast svg { width: 100%; height: auto; max-width: none; }
html[data-mast="in"]:not([data-mast-tight]) .hm-hero .hero__mast { opacity: 0.8; }
/* only over the film itself: while a file is swapped or fails, the poster (the real shop sign)
   shows, and the web wordmark steps aside */
.hm-film:has(.hero__film:not([data-film-state="playing"])) .hero__mast,
.hm-film:has(.hero__film:not([data-film-state="playing"])) .hero__scrim::before { visibility: hidden; }
/* D12 fix2 (MOTION-r2 must_fix 1): a new file after the wordmark has come (the screen turned)
   fades in over the poster for M2 (480); site.js holds the wordmark back for that fade, so it
   never stands over the poster's real sign */
html[data-mast-hold] .hm-hero .hero__mast,
html[data-mast-hold] .hm-hero .hero__scrim::before { visibility: hidden; }
@media (min-width: 48em) {
  .hm-hero .hero__mast { width: min(26.4vw, 42svh); }
}
@keyframes hm-mast-breathe {
  0%   { opacity: 0; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  40%  { opacity: 0.34; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  100% { opacity: 0.8; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"])[data-mast="in"]:not([data-mast-tight]) .hm-hero .hero__mast { animation-name: hm-mast-breathe; }
}
.hm-film__toggle {
  position: absolute;
  right: calc(var(--pad-x) - 0.75rem);
  bottom: 1rem;
  z-index: 2;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  justify-content: center;
}

/* the owner's first words under the film (yusen "Our Ethos"): phone = heading, line, then the
   photograph edge to edge; desktop = the 4:5 photograph on the left, a small film top right,
   the heading low in the middle and its line in the right column, level with the photograph's
   foot (every block on a column line, read top to bottom) */
.hm-intro { padding-block: var(--hm-top) 0; }
.hm-intro__title {
  order: 1;
  max-width: none;
  font-size: var(--fs-h1-home);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.06;
  letter-spacing: var(--display-track-italic);
  color: var(--ink);
}
.hm-intro__lede {
  order: 2;
  max-width: 26rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.hm-intro__lede strong { font-weight: var(--text-wght-strong); color: var(--ink); }
.hm-intro__photo {
  order: 3;
  grid-column: full-start / full-end;
  aspect-ratio: 4 / 5;
  margin-top: var(--hm-gap);
}
.hm-intro__loop { display: none; }
@media (min-width: 64em) {
  .hm-intro {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    padding-block: var(--hm-top) var(--hm-bot);
  }
  .hm-intro__photo { grid-column: 2 / 7; grid-row: 1 / -1; margin: 0; align-self: start; }
  .hm-intro__loop { display: block; grid-column: 11 / 14; grid-row: 1; aspect-ratio: 3 / 2; }
  .hm-intro__title { grid-column: 8 / 14; grid-row: 3; font-size: min(4.5rem, 4.9vw); }
  .hm-intro__title .line { white-space: nowrap; }
  .hm-intro__lede { grid-column: 11 / 14; grid-row: 4; max-width: none; margin-top: 2rem; margin-bottom: -0.35em; }
}

/* 2. The Hikari Difference: screen one half photograph, half paper; screen two the points and
   the scalp concerns as fold rows (closed first, 9/27 18:00 text diet) and a film at the right edge */
.hm-diff { background: var(--surface); }
.hm-diff__split { display: grid; grid-template-columns: minmax(0, 1fr); }
.hm-diff__text {
  order: -1;
  display: grid;
  gap: 1.5rem;
  padding: var(--hm-top) var(--pad-x) var(--hm-gap);
}
.hm-diff__words { display: grid; gap: 1.5rem; }
/* two lines exactly as the owner wrote them (R-064), never a third: the size follows the column */
.hm-diff__title { font-size: min(var(--fs-h2-home), 10.4vw); }
.hm-diff__title .line { white-space: nowrap; }
.hm-diff__body { max-width: 27.375rem; color: var(--ink-soft); }
.hm-diff__photo { aspect-ratio: 4 / 5; margin: 0; }
@media (min-width: 48em) {
  .hm-diff__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-diff__text {
    order: 0;
    grid-template-rows: auto 1fr;
    align-content: stretch;
    padding: 3.75rem var(--pad-x) var(--hm-bot) clamp(2rem, 7vw, 6.5rem);
  }
  .hm-diff__words { align-self: end; }
  .hm-diff__title { font-size: min(var(--fs-h2-home), 4.8vw); }
  .hm-diff__photo { aspect-ratio: auto; height: clamp(38rem, 62.5vw, 56.25rem); }
}

.hm-diff__index { padding-block: var(--hm-top) var(--hm-bot); }
/* 9/27 18:00 text diet (MJ: "too many words"): the three points and the scalp concerns are
   hairline rows that fold. Native details, closed first, so the page without JS is the finished
   page; the owner's words stay in the DOM word for word (R-068 to R-070, R-074 to R-077). A row =
   the title in the display italic and a small "+" of two hairlines at the end (inline SVG, no
   glyph); open, the "+" turns 45 degrees to a cross and the text comes in under the title. */
.hm-folds { order: 1; }
.hm-fold { border-top: 1px solid var(--rule); }
.hm-folds > .hm-fold:last-child,
.hm-fold--concerns { border-bottom: 1px solid var(--rule); }
.hm-fold__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.75rem;
  padding-block: 1.125rem 1.25rem;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
}
.hm-fold__sum::marker { content: ""; }
.hm-fold__sum::-webkit-details-marker { display: none; }
.hm-fold__title {
  margin: 0;
  font-size: var(--fs-title-home);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.2;
}
/* R-074: smaller than the three point titles (same weight as rows 1 to 3, fix1 18:30) */
.hm-fold--concerns .hm-fold__title {
  font-size: 1.25rem;
  font-weight: var(--display-wght-em);
  line-height: 1.3;
}
.hm-fold__mark {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  color: var(--ink-soft);
}
.hm-fold[open] > .hm-fold__sum .hm-fold__mark { transform: rotate(45deg); }
.hm-fold__sum:hover,
.hm-fold__sum:hover .hm-fold__mark { color: var(--accent); }
.hm-fold__body { padding: 0.125rem 0 1.5rem; }
.hm-fold__text { max-width: 24rem; color: var(--ink-soft); }
.hm-diff__loop { order: 2; grid-column: full-start / full-end; aspect-ratio: 4 / 3; margin-top: var(--hm-gap); }
.hm-diff__loop video { object-position: 50% 42%; }
.hm-fold--concerns { order: 3; margin-top: var(--hm-gap); }
.hm-concerns__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 0;
}
.hm-concerns__list li { line-height: 1.4; color: var(--ink); }
.hm-concerns__note { max-width: 27rem; margin-top: 1.25rem; color: var(--ink-soft); }
.hm-diff__more { order: 4; margin-top: 2rem; }
/* the only movement in the fold: the cross turns and the text fades in, opacity and transform
   only, one short step; none of it under reduced motion (data-motion="off") or without JS */
@keyframes hm-fold-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hm-fold__mark { transition: transform var(--dur-micro) var(--ease); }
  html:not([data-motion="off"]) .hm-fold[open] > .hm-fold__body { animation: hm-fold-in var(--dur-micro) var(--ease) both; }
}
/* D12 fix1 (AESTHETIC-r1 MF-1): on a phone the four concerns are one list, one line each (in two
   columns "Flaking & dandruff concerns" broke onto two lines at 390 and the grid went ragged) */
@media (max-width: 47.99em) {
  .hm-concerns__list { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
  /* D12 fix2 (AESTHETIC-r2 MF-1): the 4:3 window shows only the top of the loop (the candle row
     and the steam), so the face in it does not come a screen before the face in the Treatments
     loop. No face enters this window through the whole loop. */
  .hm-diff__loop video { object-position: 50% 0%; }
}
@media (min-width: 64em) {
  .hm-diff__index { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .hm-folds { grid-column: 2 / 9; grid-row: 1; }
  .hm-fold__sum { padding-block: 1.5rem 1.625rem; }
  /* open, the text stands in the right part of the row (the 3:4 split the closed rows had),
     the titles keep their own column */
  .hm-fold__body { padding-inline-start: calc((100% - var(--gutter)) * 3 / 7 + var(--gutter)); }
  /* the concerns row continues the stack (a gap between two hairlines read as an empty row);
     its smaller title is the difference, R-074 */
  .hm-fold--concerns { grid-column: 2 / 9; grid-row: 2; margin-top: 0; border-top: 0; }
  /* one column under 1400: the indented part of the row is too narrow for two max-content
     columns (at 1024 to 1365 "Oiliness & build-up" ran past the row's hairline) */
  .hm-concerns__list { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .hm-diff__more { grid-column: 2 / 9; grid-row: 4; align-self: end; margin-top: 2rem; margin-bottom: -0.5rem; }
  /* final r4: a 4:3 tile on the first hairline showing only the candles and the steam, so the
     section 3 loop is the only face on screen (AESTHETIC-r3 must_fix) */
  .hm-diff__loop { grid-column: 10 / 14; grid-row: 1 / -1; align-self: start; aspect-ratio: 4 / 3; margin: 0; }
  .hm-diff__loop video { object-position: 50% 0%; }
}
@media (min-width: 87.5em) {
  .hm-concerns__list { grid-template-columns: repeat(2, max-content); gap: 0.375rem 2rem; }
}

/* 3. Treatments: yusen's services slider (research/YUSEN-PATTERNS.md 3.5) on a texture. The
   heading and the assessment line on the paper above (R-079, the owner's sentence as written);
   then the texture screen: one treatment a slide, its words low in the frame where the water is
   dark (the ivory sky of the shallow texture and the rose of the dusk stay clear above them),
   the foot controls under them. The picture is anchored at its foot and drawn 1.3 times the
   frame height, never shorter than --tex-reach (so on a short frame, where the words sit higher,
   it keeps growing and its dark lower band stays under the name: the reach is the height that
   puts the name's first line in the dark water, one value a breakpoint, no cliff), so the dark
   lower band of each texture carries the ivory type (glyph contrast measured in
   qa/texture/fix1/); a light veil from the foot to the upper quarter closes the last gap.
   Ivory type only on the texture. Square corners, no shadow. Final states only: Prev / Next
   scroll the track (site.js, native smooth scroll, instant under reduced motion). */
.hm-treat { background: var(--surface); }
.hm-treat__grid { padding-block: var(--hm-top) 2.5rem; }
.hm-treat__title {
  font-size: var(--fs-title-home);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.2;
  letter-spacing: var(--display-track-sm);
}
.hm-treat__intro { max-width: 24rem; margin-top: 0.625rem; color: var(--ink-soft); }

/* the texture screen: a rail of two full-width slides */
.hm-tex {
  --tex-zoom: 1.3;
  --tex-reach: 68rem;
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--on-media);
  background: var(--night);
}
.hm-tex__track {
  grid-auto-columns: 100%;
  gap: 0;
  padding: 0;
  scroll-padding-inline: 0;
}
.hm-slide { position: relative; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.hm-slide--90 { --tex-zoom: 1.45; --tex-reach: 76rem; } /* the dusk's dark water starts lower in its frame */
.hm-slide__card {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  height: 100svh;
  min-height: 36rem;
  padding: 5rem var(--pad-x) 9.5rem;
  overflow: hidden;
  text-align: center;
}
.hm-slide__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  background: var(--lqip, none) 50% 100% / cover no-repeat var(--night);
}
.hm-slide__bg picture {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: max(calc(var(--tex-zoom) * 100%), var(--tex-reach));
}
.hm-slide__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* the veil (the site's lightest: .hm-space__room 0.66, .bleed--dark 0.72): nothing above the
   upper quarter, 0.4 from the foot to where the name sits (0.3 there before texture-fix1; the
   name's glyph contrast on a short frame and a 360 phone asked for it) */
.hm-slide__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim-rgb), 0.4) 0%, rgba(var(--scrim-rgb), 0.4) 46%, rgba(var(--scrim-rgb), 0) 76%);
}
.hm-slide__copy { display: grid; justify-items: center; gap: 0.75rem; max-width: 40rem; }
.hm-slide__name {
  font-size: clamp(2.75rem, 1.5rem + 4vw, 4.5rem);   /* 44 to 72 (yusen 56 / 80) */
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.02;
  letter-spacing: var(--display-track-italic);
  text-wrap: balance;
}
/* D14 (ledger 3-H5a, N-H4; #39558 3-5, #39576): the brackets around the names are gone */
.hm-slide__desc { max-width: 26rem; color: var(--on-media-soft); }
.hm-slide__price { margin-top: 0.5rem; }
.hm-slide__price .price { font-size: var(--fs-price); }
.hm-slide__price .price__currency { color: inherit; } /* R9-1 */
.hm-slide__action { margin-top: 0.125rem; }
.hm-tex .hm-link { color: var(--on-media); }
.hm-tex .hm-link:hover { color: var(--on-media-soft); }
.hm-tex :focus-visible { outline-color: var(--on-media); }

/* the foot: count, the two names as tabs with their hairlines (the progress line, the active
   cell filled), Prev / Next; the Treatments link beside them. Small capitals, no boxes.
   On a phone two rows: the count left and the Treatments link right on one line, the tabs with
   their hairline under them; Prev / Next stay hidden there (a swipe, or one tap on the other
   name, R-083). On a wide screen one row, Prev / Next shown. */
.hm-tex__controls,
.hm-treat__more {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  padding: 0 var(--pad-x);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hm-tex__controls {
  bottom: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 0 1rem;
}
.hm-tex__count {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: inline-block;
  padding-bottom: 0.625rem;
  font-weight: 400;
  line-height: 2.125rem; /* the buttons' 44 less the 10 under the hairline: one text line */
  font-variant-numeric: tabular-nums;
}
.hm-tex__nav { grid-column: 2; grid-row: 1; display: none; gap: 1.25rem; }
.hm-tex__tabs { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 1.5rem; }
.hm-tex__tab,
.hm-tex__btn {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.hm-tex__tab {
  position: relative;
  flex: 1 1 0;
  text-align: left;
}
.hm-tex__tab,
.hm-tex__btn { padding-bottom: 0.625rem; } /* one text baseline for the row; the tab's hairline sits in this space */
.hm-tex__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--on-media-line);
}
.hm-tex__tab[aria-pressed="false"] { font-weight: 400; }
.hm-tex__tab[aria-pressed="true"]::after { height: 2px; background: var(--on-media); }
.hm-tex__btn:disabled { opacity: 0.38; cursor: default; }
.hm-treat__more { bottom: 4.25rem; left: auto; } /* the count's line (the tab row, 2.75rem, is under it) */
.hm-treat__more .hm-link { padding-bottom: 0.625rem; } /* the same text line as the tabs */
/* no JavaScript: the two slides stack, the foot controls never show, the link keeps its foot */
html:not(.js) .hm-tex__track { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
html:not(.js) .hm-slide__card { padding-bottom: 7rem; }
html:not(.js) .hm-treat__more { bottom: 1.5rem; }

@media (min-width: 48em) {
  .hm-treat__grid { padding-bottom: 3rem; }
  .hm-slide__card { height: clamp(34rem, 90vh, 56rem); padding: 5rem var(--pad-x) 8.5rem; }
  .hm-slide__copy { gap: 0.875rem; }
  .hm-slide__desc { font-size: 1.0625rem; }
  /* one row at the foot: count, tabs (a 400px progress line, yusen), Prev / Next; the link right */
  .hm-tex__controls,
  .hm-treat__more,
  html:not(.js) .hm-treat__more { bottom: 2.75rem; }
  .hm-tex__controls { display: flex; align-items: flex-end; gap: 2rem; right: auto; }
  .hm-tex__tabs { width: min(25rem, 36vw); gap: 1.5rem; }
  .hm-tex__nav { display: flex; gap: 1.5rem; }
  html:not(.js) .hm-slide__card { padding-bottom: 7rem; }
}

/* 4. In Their Words: one guest at a time, her controls under her */
.hm-stories { background: var(--surface); }
.hm-stories__grid { padding-block: var(--hm-top) var(--hm-bot); }
.hm-stories__title { order: 1; }
.hm-rail { order: 2; margin-top: 2rem; }
.hm-reviews { order: 3; }
.hm-rail__track {
  grid-auto-columns: 100%;
  gap: 0;
  padding: 0;
  scroll-padding-inline: 0;
}
.hm-story .story__meta {
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hm-story .story__play { width: 1rem; height: 1rem; }
/* final r4: the hanging open quote (site.css text-indent -0.4em) is clipped by the gap-less rail
   and the next card's quote shows at the line end, so the quotes sit inside the card here */
.hm-story .story__quote p { text-indent: 0; }
.hm-rail__controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.25rem 0 0;
  padding: 0;
}
.hm-rail .rail__btn { width: 2.75rem; height: 2.75rem; box-shadow: none; color: var(--ink); }
.hm-rail .rail__btn:hover:not(:disabled) { box-shadow: none; color: var(--accent); }
.hm-rail .rail__btn:disabled { opacity: 0.3; }
.hm-progress {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  margin-right: 1rem;
  background: var(--rule-strong);
}
.hm-progress__fill {
  position: absolute;
  left: 0;
  top: -0.5px;
  height: 2px;
  width: calc(var(--hm-p, 0.1667) * 100%);
  background: var(--ink);
}
.hm-reviews {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  justify-self: start;
  margin-top: 1.5rem;
}
.hm-reviews .reviews__count { font-size: 2.5rem; }
.hm-reviews .reviews__label {
  position: relative;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hm-reviews .reviews__label .icon--ext { width: 0.6875rem; height: 0.6875rem; }
.hm-reviews .reviews__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.55em; }
.hm-reviews:hover .reviews__label { color: var(--accent); }
@media (min-width: 64em) {
  .hm-stories__grid { grid-template-rows: auto minmax(0, 1fr) auto; }
  .hm-stories__title { grid-column: 2 / 6; grid-row: 1; }
  .hm-rail { grid-column: 7 / 11; grid-row: 1 / -1; align-self: start; margin: 0; }
  .hm-reviews { grid-column: 11 / 14; grid-row: 3; align-self: end; justify-self: end; margin: 0 0 0.25rem; white-space: nowrap; }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .hm-rail { grid-column: 6 / 10; }
  .hm-reviews { grid-column: 10 / 14; }
}

/* 5. A Space to Settle In: two photographs edge to edge, the words on the room */
.hm-space__pair { display: flex; flex-direction: column; }
.hm-space__pair figure { position: relative; margin: 0; overflow: hidden; background: var(--clay); }
.hm-space__pair img { width: 100%; height: 100%; object-fit: cover; }
.hm-space__room img { aspect-ratio: 4 / 3; }
.hm-space__reception { display: none; }
.hm-space__copy {
  order: -1;
  display: grid;
  gap: 1rem;
  padding: var(--hm-top) var(--pad-x) 2.5rem;
}
.hm-space__title {
  font-size: var(--fs-h2-home);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.06;
  letter-spacing: var(--display-track-italic);
}
.hm-space__text { max-width: 26rem; color: var(--ink-soft); }
@media (min-width: 48em) {
  .hm-space__pair {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 5fr;
    height: clamp(28rem, 45.8vw, 41.25rem); /* 660 at 1440: shorter than 2 and 3 (R-092) */
  }
  .hm-space__room img { aspect-ratio: auto; }
  .hm-space__reception { display: block; }
  .hm-space__room::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--scrim-rgb), 0.66) 0%, rgba(var(--scrim-rgb), 0.3) 32%, rgba(var(--scrim-rgb), 0) 58%);
  }
  .hm-space__copy {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 58.333%;
    padding: 0 var(--pad-x) 3.25rem;
    color: var(--on-media);
  }
  .hm-space__text { color: var(--on-media-soft); font-size: 1.0625rem; }
  .hm-space :focus-visible { outline-color: var(--on-media); }
}

/* 6. Plan Your Visit: the Drying Studio from the left edge; the heading at the top of the right
   column, the address, the station, the two notes and the FAQ link together at its foot */
.hm-visit { background: var(--surface); }
.hm-visit__grid { padding-block: var(--hm-top) var(--hm-bot); }
.hm-visit__title { order: 1; }
.hm-visit__where { order: 2; margin-top: 1rem; }
.hm-visit__photo { order: 3; grid-column: full-start / full-end; aspect-ratio: 4 / 3; margin-top: 2rem; }
.hm-visit__notes { order: 4; display: grid; gap: 1rem; justify-items: start; margin-top: 2rem; }
.hm-visit__notes p { max-width: 27.375rem; color: var(--ink-soft); }
.hm-visit__notes .hm-visit__more { margin-top: 0.25rem; }
.hm-visit__address {
  font-family: var(--font-display);
  font-size: var(--fs-title-home);
  font-weight: 400;
  line-height: 1.25;
}
.hm-visit__station { margin-top: 0.375rem; color: var(--ink-soft); }
@media (min-width: 64em) {
  .hm-visit__grid { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .hm-visit__photo { grid-column: 1 / 9; grid-row: 1 / -1; align-self: start; margin: 0; }
  .hm-visit__title { grid-column: 10 / 14; grid-row: 1; }
  .hm-visit__where { grid-column: 10 / 14; grid-row: 3; margin: 1.5rem 0 0; }
  .hm-visit__notes { grid-column: 10 / 14; grid-row: 4; margin: 1.75rem 0 -0.5rem; }
}

/* 7. Gift Cards: yusen's gift band. The crop leaves the door, the street and the bins out of
   the frame; the ink sits on the bright curtain, so no veil (site.css .bleed--light adds one) */
.hm-gift { min-height: clamp(30rem, 78svh, 44rem); }
.hm-gift.bleed--light::before { background: none; }
.hm-gift__content { gap: 1.25rem; }
.hm-gift__title {
  font-size: var(--fs-media-home);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.04;
  letter-spacing: var(--display-track-italic);
}
@media (min-width: 48em) {
  .hm-gift { min-height: max(100svh, 36rem); }
  .hm-gift .bleed__media img { object-position: 50% 100%; }
}

/* 8. Journal: the heading top left, one article with its photograph and one more by name under
   it in the middle column, the archive link low on the left */
.hm-journal { background: var(--surface); }
.hm-journal__grid { padding-block: var(--hm-top) var(--hm-bot); }
.hm-journal__title { order: 1; }
.hm-journal__posts { order: 2; margin-top: 2rem; }
.hm-journal__all { order: 3; margin-top: 1.25rem; }
.hm-post__figure { aspect-ratio: 4 / 5; }
.hm-post__title {
  margin-top: 1rem;
  font-size: var(--fs-title-home);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.2;
}
.hm-post--text { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.hm-post--text .hm-post__title { margin-top: 0; }
.hm-post .post__link { text-decoration: none; }
.hm-post .post__link:hover { color: var(--accent); }
@media (min-width: 64em) {
  .hm-journal__grid { grid-template-rows: auto minmax(0, 1fr) auto; }
  .hm-journal__title { grid-column: 2 / 6; grid-row: 1; }
  .hm-journal__posts { grid-column: 7 / 11; grid-row: 1 / -1; margin: 0; }
  .hm-journal__all { grid-column: 2 / 6; grid-row: 3; align-self: end; margin: 0 0 -0.5rem; }
}

/* 4 and 8 take the height of their picture column (about one screen, yusen G1), so the links
   low in the side columns share the foot of the picture */

/* 9. Header over the film, and the tuck. home.js marks [data-over-film] while the film is under
   the header (clear, ivory type, as yusen's) and [data-tuck] while the visitor reads down the
   page; scrolling up brings it back, ivory. Focus or the open menu always bring it back. */
.page-home .site-header[data-overlay][data-over-film] { color: var(--on-media); }
.page-home .site-header[data-overlay][data-over-film]::before { opacity: 0; }
.page-home .site-header[data-overlay][data-over-film] .site-header__bar { box-shadow: inset 0 -1px 0 var(--on-media-line); }
.page-home .site-header[data-overlay][data-over-film] .btn--header {
  background: transparent;
  color: var(--on-media);
  box-shadow: inset 0 0 0 1px var(--on-media-line);
}
.page-home .site-header[data-overlay][data-over-film] :focus-visible { outline-color: var(--on-media); }
/* on a phone the Book over the film is the word only (yusen); the box comes with the ivory header */
@media (max-width: 63.99em) {
  .page-home .site-header[data-overlay][data-over-film] .btn--header { box-shadow: none; padding-inline: 0.5rem; }
}
/* yusen keeps its header logo while the wordmark stands on the film (D11 hid it) */
html[data-mast="in"]:not([data-mast-tight]) body.page-home .site-header[data-overlay] .brand { opacity: 1; }
.page-home .site-header[data-tuck] { transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) body.page-home .site-header[data-overlay] {
    transition: color 0s var(--ease) var(--dur-micro), box-shadow 0s var(--ease) var(--dur-micro), transform var(--dur-ui) var(--ease); /* D14 (shell handoff 2): the hairline keeps D12's 240ms step */
  }
  html:not([data-motion="off"]) body.page-home .site-header[data-overlay][data-solid] {
    transition: color 0s var(--ease) 0s, box-shadow 0s var(--ease) 0s, transform var(--dur-ui) var(--ease);
  }
}

/* 10. Tablet widths (48em to 63.99em): the phone order, pictures held to a readable size */
@media (min-width: 48em) and (max-width: 63.99em) {
  .hm-intro { padding-bottom: var(--hm-bot); }
  .hm-intro__photo,
  .hm-diff__loop,
  .hm-visit__photo { grid-column: c1 / c13; width: 64%; }
  .hm-diff__loop { aspect-ratio: 4 / 5; }
  .hm-diff__loop { aspect-ratio: 4 / 3; }
  .hm-diff__loop video { object-position: 50% 0%; }
  .hm-rail { max-width: 26rem; }
  .hm-journal__posts { max-width: 28rem; }
}