/*
  The Head Spa by Hikari, inner pages group 1 (g1): about.html (The Hikari Way) and
  services.html (Treatments). D12 rebuild of the D11 file (the D11 version is in
  backups/pre-g1/assets/css/d11-g1.css); the file name stays so the pages' <head> is unchanged.

  D12 (MJ 9/27 "yusen 처럼 다시 구조짜봐, 여백의 미"): yusen's inner pages. A media opening with
  the page title in the middle and nothing else; the owner's first sentence on the paper under
  a small label; then one idea to a screen (one treatment, one step), a picture and a few lines
  beside it, and the rest of the screen left empty.

  Loaded after site.css on these two pages only. Final states only: no transitions, no
  keyframes (motion.css / motion-layer.css). Tokens from site.css; sizes are site.css tokens
  (--fs-display, --fs-h2, --fs-h3, --fs-small, --fs-meta, --fs-label). Class names that
  motion.js or motion-layer.css read (.plans, .plan__measure, .plan__fill, .g1-coda,
  .g1-head--photo) keep their names.

  Contents
    0. Grid (phones: one column between the gutters; 64em up: the 12 columns of the 1440 width
       with the screen edges as outer lines)
    1. Opening: the whole screen, the page title in the middle
    2. Introduction: a small label and one sentence
    3. Treatments: one treatment to a screen
    4. Treatments: plan your visit
    5. The Hikari Way: three steps, one to a screen
    6. The Hikari Way: the closing line, then the room and the candle film
    7. The Hikari Way: visit band
*/

/* 0. Grid. Desktop line numbers: 1 = left screen edge, 2 = column 1, column n ends at line n + 2,
   14 = end of column 12, 15 = right screen edge. */
.g1-grid {
  display: grid;
  grid-template-columns: [full-start] var(--pad-x) [c1] minmax(0, 1fr) [c13] var(--pad-x) [full-end];
}
.g1-grid > * { grid-column: c1 / c13; min-width: 0; }
@media (min-width: 64em) {
  .g1-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);
  }
}

/* small labels (What's included, Before / After your treatment): the eyebrow's small capitals */
.pc-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.g1-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

/* 1. Opening. The page's first section lies under the clear header ([data-overlay-under]).
   The picture fills the screen. IvyMode 9/27 (MJ "히어로 폰트가 좀 안어울려"):
   - About (.g1-head--photo): the title leaves the middle of the photograph for its lower left
     corner, on the calmest part of the frame, over one faint linear scrim on the lower third
     (glyph contrast measured, qa/ivymode/measure/contrast.json). Landscape screens take the 5:4
     crop, portrait screens the 4:5.
   - Treatments (.g1-head--svc, yusen "Our Services"): the B2 water texture, the title in the
     middle. The candle film that stood here is gone from the opening: the 60-minute treatment
     below already carries a film of the room, and yusen opens its services on a still ground.
   The title is the inner page H1 voice (site.css 4) at the on-media weight. */
.g1-head {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: max(100svh, 34rem);
  overflow: hidden;
  background: var(--night);
  color: var(--on-media);
}
.g1-head__photo,
.g1-head__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.g1-head__photo img { object-position: 50% 22%; }
@media (orientation: portrait) {
  .g1-head__photo img { object-position: 58% 40%; }
}
.g1-head__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.g1-head__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: calc(var(--header-h) + var(--space-6)) var(--pad-x) var(--space-7);
  text-align: center;
}
.g1-head__title,
.g1-head__title .line {
  font-weight: var(--display-wght-hero);
}
.g1-head__title {
  letter-spacing: var(--display-track-hero);
  color: var(--on-media);
  text-wrap: balance;
}

/* About: lower left, one scrim */
.g1-head--photo {
  --g1-title-foot: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);                          /* space under the title */
  --g1-title-block: calc(2 * 1.05 * var(--fs-page-title) + var(--g1-title-foot));   /* two lines and that space */
  align-items: end;
  justify-items: stretch;
}
.g1-head--photo .g1-head__inner {
  padding: calc(var(--header-h) + var(--space-6)) var(--rail-pad) var(--g1-title-foot);
  text-align: left;
}
/* ivymode fix1: on screens shorter than the 34rem floor (phones on their side, the small phone
   upright under Safari's bars, short windows) the floor pushed the foot-set title below the first
   screen, so there the opening is exactly the screen. Screens 34rem tall and up keep the floor. */
@media (max-height: 33.99em) {
  .g1-head--photo,
  .g1-head--svc { min-height: 100vh; min-height: 100svh; }
}
/* one linear scrim, measured from the foot so it follows the title on every screen shape: even
   under the title's two lines, fading out 7rem above them, clear across the middle, and the
   header's band at the top (its ivory type sits on the photograph until the page moves) */
.g1-head--photo .g1-head__scrim {
  background: linear-gradient(to top,
    rgba(var(--scrim-rgb), 0.62) 0,
    rgba(var(--scrim-rgb), 0.54) var(--g1-title-block),
    rgba(var(--scrim-rgb), 0) calc(var(--g1-title-block) + 7rem),
    rgba(var(--scrim-rgb), 0) calc(100% - var(--header-h) - 6rem),
    rgba(var(--scrim-rgb), 0.5) calc(100% - var(--header-h)),
    rgba(var(--scrim-rgb), 0.68) 100%);
}

/* Treatments: the texture, the title in the middle */
.g1-head--svc .g1-head__photo img { object-position: 50% 50%; }
/* one linear scrim over the texture: a little deeper under the header, even behind the title
   (the water's pale falls reach the middle of the frame) */
.g1-head--svc .g1-head__scrim {
  background: linear-gradient(to bottom,
    rgba(var(--scrim-rgb), 0.6) 0,
    rgba(var(--scrim-rgb), 0.52) var(--header-h),
    rgba(var(--scrim-rgb), 0.4) calc(var(--header-h) + 4rem),
    rgba(var(--scrim-rgb), 0.4) 100%);
}

/* 2. Introduction (yusen "Why Yusen?"): the small label at the left, the sentence at the
   yusen statement size (28px), the rest of the band empty */
.g1-intro { padding-top: var(--section-y); }
.g1-intro__label { margin: 0; }
.g1-intro__line {
  margin-top: var(--space-4);
  max-width: 44rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--display-wght);
  line-height: 1.34;
  letter-spacing: var(--display-track-sm);
  color: var(--ink);
  text-wrap: pretty;
}
.g1-intro__more { margin-top: var(--space-5); }
@media (min-width: 64em) {
  .g1-intro { padding-bottom: var(--section-y); }
  .g1-intro__label { grid-column: 2 / 4; grid-row: 1; padding-top: 0.5rem; }
  .g1-intro__line { grid-column: 4 / 12; grid-row: 1; margin-top: 0; }
  .g1-intro__more { grid-column: 4 / 12; grid-row: 2; }
}

/* 3. Treatments: one treatment to a screen. The film (60) or photograph (90) fills half the screen
   from its edge, top to bottom; the name, the sentence, every inclusion, the price and the
   booking link stand in the other half, in the middle of the screen's height. Phones: name, the
   picture edge to edge (4:5), then the words. */
.g1-plans { padding-bottom: var(--section-y); }
.plans { display: grid; }
.plan { position: relative; padding-top: var(--section-y); }
.plan__name { font-weight: var(--display-wght); }
.plan__name .line:first-child {
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1;
  letter-spacing: var(--display-track-italic);
}
/* fix1 (R-046/R-047): the same size as the price, as on the brochure */
.plan__name .line:last-child {
  margin-top: 0.5rem;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}
.plan__measure { position: relative; height: 2rem; margin-top: var(--space-4); }
.plan__track,
.plan__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
}
.plan__track { right: 0; background: var(--rule); }
.plan__fill {
  width: calc(var(--minutes) / 90 * 100%);
  background: var(--ink);
  transform-origin: left center;
}
.plan__dot {
  position: absolute;
  right: 0;
  top: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(50%, -50%);
}
.plan__time {
  position: absolute;
  left: calc(var(--minutes) / 90 * 100%);
  bottom: 0.625rem;
  transform: translateX(-100%);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
}
.plan__figure {
  grid-column: full-start / full-end;
  aspect-ratio: 4 / 5;
  margin-top: var(--space-6);
}
.plan__figure img { position: absolute; inset: 0; }
.plan__figure--film { background: var(--night); }
.plan__figure--film video { object-position: 50% 56%; }
.plan__desc { max-width: 30rem; margin-top: var(--space-6); color: var(--ink); }
.plan__included { margin-top: var(--space-6); }
.plan__list li {
  position: relative;
  padding: 0.5625rem 0 0.5625rem 1.375rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}
.plan__list li:last-child { border-bottom: 1px solid var(--rule); }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 1.0625rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
}
.plan__list .plan__extra { color: var(--ink); }
.plan__list .plan__extra::before { background: var(--accent); }
.plans-key {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--space-3);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.plans-key::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}
.plan__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
}
.plan__price .price { font-size: var(--fs-h3); }
.plan__price .price__currency { color: inherit; } /* R9-1 */
.plan__foot .btn { white-space: nowrap; }
@media (min-width: 48em) and (max-width: 63.99em) {
  /* tablets: the phone order, the picture held to a readable size */
  .plan__figure { grid-column: c1 / c13; aspect-ratio: 4 / 3; }
}
@media (min-width: 64em) {
  .g1-plans { padding-bottom: 0; }
  .plan {
    min-height: clamp(44rem, 62.5vw, 56.25rem);
    padding-top: 0;
    /* the leftover height 2 : 1 above and below the words: the sticky header takes the top of
       the screen, so the words sit in the middle of what shows under it */
    grid-template-rows: minmax(calc(var(--header-h) + var(--space-6)), 2fr) auto auto auto auto minmax(var(--space-7), 1fr);
  }
  .plan__head { grid-row: 2; }
  .plan__desc { grid-row: 3; }
  .plan__included { grid-row: 4; }
  .plan__foot { grid-row: 5; }
  .plan__figure {
    grid-row: 1 / -1;
    align-self: stretch;
    aspect-ratio: auto;
    margin: 0;
  }
  /* 60 minutes: the film from the left edge to the middle, the words in columns 8 to 12 */
  #sixty .plan__figure { grid-column: 1 / 8; }
  #sixty > :not(.plan__figure) { grid-column: 9 / 14; }
  /* 90 minutes: the words in columns 1 to 5, the photograph from the middle to the right edge */
  #ninety .plan__figure { grid-column: 8 / 15; }
  #ninety > :not(.plan__figure) { grid-column: 2 / 7; }
  .plan__figure--film video { object-position: 50% 58%; }
  .plan__figure img { object-position: 50% 40%; }
  .plan__desc { margin-top: var(--space-5); }
  .plan__included { margin-top: var(--space-6); }
  .plan__foot { margin-top: var(--space-5); }
}

/* 4. Treatments: plan your visit. Phones: the heading, the Drying Studio photograph edge to edge,
   the two notes. From 64em: the heading at the top of columns 1 to 4 and the two notes at their
   foot; the photograph from column 6 to the right edge, 3:2, whole (R-051). */
.g1-svisit { padding-block: var(--section-y); }
.g1-svisit__title { font-size: var(--fs-h2); font-style: italic; font-weight: var(--display-wght-em); line-height: 1.06; }
.g1-svisit__head .text-link { margin-top: var(--space-3); }
.g1-svisit__photo {
  grid-column: full-start / full-end;
  aspect-ratio: 3 / 2;
  margin-top: var(--space-6);
}
.g1-svisit__notes { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.g1-svisit__block { max-width: var(--measure-short); color: var(--ink-soft); }
.g1-svisit__block p + p { margin-top: var(--space-2); }
.g1-svisit__block p:first-of-type { color: var(--ink); }
@media (min-width: 48em) and (max-width: 63.99em) {
  .g1-svisit__photo { grid-column: c1 / c13; }
}
@media (min-width: 64em) {
  .g1-svisit__grid { grid-template-rows: auto minmax(var(--space-6), 1fr) auto; }
  .g1-svisit__head { grid-column: 2 / 7; grid-row: 1; }
  .g1-svisit__notes { grid-column: 2 / 6; grid-row: 3; margin: 0; gap: var(--space-6); }
  .g1-svisit__photo { grid-column: 7 / 15; grid-row: 1 / -1; align-self: start; margin: 0; }
}

/* 5. The Hikari Way: three steps, one to a screen (yusen "Our Story"). The heading at the top left;
   the conversation in the middle with its words at the right, the magnified view (a short silent
   loop) to the right edge with its words at the left, the care at the left with its words in the
   middle. The words sit on the picture's lower line. Phones: heading, then each step's picture
   (4:5 between the gutters), its title and its sentence. */
.g1-steps { padding-top: var(--section-y); }
.g1-steps__title {
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.06;
  letter-spacing: var(--display-track-italic);
}
.g1-steps__list { display: grid; gap: var(--space-9); margin-top: var(--space-7); }
.g1-step__figure { aspect-ratio: 4 / 5; }
.g1-step__figure--film { background: var(--night); }
.g1-step__body { margin-top: var(--space-5); }
.g1-step__title {
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.15;
}
.g1-step__text {
  max-width: var(--measure-short);
  margin-top: var(--space-3);
  color: var(--ink-soft);
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .g1-step__figure { width: min(100%, 28rem); }
}
@media (min-width: 64em) {
  .g1-steps__grid { grid-template-rows: auto; }
  .g1-steps__title { grid-column: 2 / 7; grid-row: 1; align-self: start; position: relative; z-index: 1; }
  .g1-steps__list {
    grid-column: full-start / full-end;
    grid-row: 1;
    grid-template-columns: subgrid;
    gap: var(--section-y) var(--gutter);
    margin-top: 0;
  }
  .g1-step {
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--gutter);
    align-items: end;
  }
  .g1-step__figure,
  .g1-step__body { grid-row: 1; }
  .g1-step__body { margin: 0; padding-bottom: 0.25rem; }
  .g1-step--1 .g1-step__figure { grid-column: 7 / 11; }
  .g1-step--1 .g1-step__body { grid-column: 11 / 14; }
  .g1-step--2 .g1-step__figure { grid-column: 10 / 15; }
  .g1-step--2 .g1-step__body { grid-column: 4 / 8; }
  .g1-step--3 .g1-step__figure { grid-column: 3 / 7; }
  .g1-step--3 .g1-step__body { grid-column: 8 / 12; }
  .g1-step__text { font-size: var(--fs-body); }
}

/* 6. The closing line on the paper (yusen "Ethos"), then the room and the candle film edge to edge,
   3px apart, no words on them. Phones: the room 7 parts, the film 5, at a short height. */
.g1-coda { padding-top: var(--section-y); }
.g1-coda__line {
  max-width: 18em;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.1;
  letter-spacing: var(--display-track-italic);
  text-wrap: balance;
}
.g1-coda__words .text-link { margin-top: var(--space-5); }
.g1-coda__band {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 3px;
  margin-top: var(--section-y);
}
.g1-coda__room,
.g1-coda__film { height: clamp(16rem, 72vw, 26rem); }
.g1-coda__room img { position: absolute; inset: 0; object-position: 50% 62%; }
.g1-coda__film { background: var(--night); }
.g1-coda__film video { object-position: 50% 30%; }
@media (min-width: 64em) {
  .g1-coda__words { grid-column: 3 / 12; }
  .g1-coda__room,
  .g1-coda__film { height: clamp(30rem, 72svh, 48rem); }
}

/* 7. Visit band: the address and one line, the two links at the right */
.g1-visit-band { padding-block: var(--section-y); }
.g1-visit-band__grid { row-gap: var(--space-5); align-items: end; }
.g1-visit-band__title {
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.06;
  letter-spacing: var(--display-track-italic);
}
.g1-visit-band__copy p { max-width: var(--measure-short); margin-top: var(--space-4); color: var(--ink-soft); }
@media (min-width: 64em) {
  .g1-visit-band__copy { grid-column: 2 / 10; grid-row: 1; }
  .g1-visit-band__actions { grid-column: 10 / 14; grid-row: 1; justify-content: flex-end; }
}