/*
  D14 inner pages (lane B). Loaded after the page CSS and motion.css on the pages it changes.
  Every rule here answers one owner request (ledger id in the comment); nothing else in the D12
  pages changes. Tokens only from site.css. The display face is never given a font-style here
  (site.css 4, R6).

  Contents
    1. The Hikari Way: opening (4-W1, N-W2)
    2. The Hikari Way: three steps side by side (4-W4, N-W3, 4-W3, 4-W8)
    3. The Hikari Way: The Hikari Difference (3-H4a to 3-H4h, N-W4)
    4. The Hikari Way: closing line, Compare treatments, room and candle film (4-W5, 4-W6, N-W5)
    5. Treatments (R4-4: D12 frames, no rule)
    6. Journal (N-J1, N-J2)
*/

/* 1. The Hikari Way: opening. D12 full-bleed photograph and lower-left title are kept on every
   window, phones included (finish K6: one layout, no split panel); only the crop moves (4-W1).
   Landscape: the crop (rows 330 to 1345 of the original) ends 20 rows under the monitor's foot.
   The whole screen comes first (#39558 4); within that the frame rises as far as it can, so the
   scalp camera in the hand shows as much as the window allows: on any window wider than the crop
   the monitor's foot (row 1327, 2 rows spare) is the bottom edge (18 crop rows below it are let
   go, never more than the photograph overflows). Container units measure the frame; where they
   are unknown the first line holds the crop at its foot. A squarer window shows the whole crop,
   held at its right edge (the monitor's right edge is the photograph's). Portrait: the full
   frame, held at its right edge (any other place cuts the monitor). The "Understanding your
   scalp" line sits under the title (N-W2), so the scrim's even part is one line block taller. */
.page-about .d14-way-head {
  --g1-title-block: calc(2 * 1.05 * var(--fs-page-title) + var(--space-4) + 2 * 1.34 * var(--fs-h3) + var(--g1-title-foot));
}
.page-about .d14-way-head .g1-head__photo { container-type: size; }
.page-about .d14-way-head .g1-head__photo img {
  object-position: 100% 100%;
  object-position: 100% calc(100% + max(0px, min(18 * 100cqw / 1365, 1015 * 100cqw / 1365 - 100cqh)));
}
@media (orientation: portrait) {
  .page-about .d14-way-head .g1-head__photo img { object-position: 100% 50%; }
}
.d14-way-head__line {
  max-width: 36rem;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--display-wght-hero);
  line-height: 1.34;
  letter-spacing: var(--display-track-sm);
  color: var(--on-media);
  text-wrap: pretty;
}

/* 2. The Hikari Way: three steps side by side (4-W4: D12 one step to a screen was the page's
   largest empty space). From 64em the heading stays at the top left (D12 columns 2 to 7) and the
   three pictures stand in one row under it, each title under its picture; D12 picture shape (4:5),
   D12 gutters and section spacing. Phones and tablets: the D12 column. Step titles one weight up
   (N-W3). */
.page-about .d14-way-steps .g1-step__title { font-weight: 600; }
@media (min-width: 64em) {
  .page-about .d14-way-steps .g1-steps__grid { grid-template-rows: auto auto; }
  .page-about .d14-way-steps .g1-steps__title { grid-column: 2 / 8; grid-row: 1; }
  .page-about .d14-way-steps .g1-steps__list {
    grid-column: 2 / 14;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    margin-top: var(--space-7);
  }
  .page-about .d14-way-steps .g1-step {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .page-about .d14-way-steps .g1-step__figure,
  .page-about .d14-way-steps .g1-step__body { grid-column: auto; grid-row: auto; }
  .page-about .d14-way-steps .g1-step__body { margin-top: var(--space-5); padding-bottom: 0; }
}

/* 3. The Hikari Difference (moved from Home, 3-H4a): always open (3-H4b), on the page ground.
   Phones: the introduction, the three points, the concerns. From 64em the introduction and the
   concerns at the left (columns 1 to 6), the three points at the right (8 to 12) centred on the
   left column's height with even space between them (N-W4). Every h3 one size (3-H4f). */
.d14-diff { padding-block: var(--section-y); }
.d14-diff__grid { row-gap: var(--space-7); }
.d14-diff__intro .eyebrow { margin-bottom: var(--space-5); }
.d14-diff__title {
  font-size: var(--fs-h2);
  font-weight: var(--display-wght);
  line-height: 1.06;
  letter-spacing: var(--display-track-italic);
}
.d14-diff__body {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--ink-soft);
}
.d14-diff__h3 {
  font-size: var(--fs-h3);
  font-weight: var(--display-wght);
  line-height: 1.2;
}
.d14-diff__item { padding-block: var(--space-6); border-top: 1px solid var(--rule); }
.d14-diff__item:first-child { padding-top: 0; border-top: 0; }
.d14-diff__item:last-child { padding-bottom: 0; }
.d14-diff__item p {
  max-width: var(--measure);
  margin-top: var(--space-3);
  color: var(--ink-soft);
}
.d14-diff__list { margin-top: var(--space-4); }
.d14-diff__list li {
  position: relative;
  padding: 0.3125rem 0 0.3125rem 1.125rem;
  color: var(--ink);
}
.d14-diff__list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.95em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--accent);
}
.d14-diff__note {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--ink-soft);
}
@media (min-width: 64em) {
  .d14-diff__grid { grid-template-rows: auto auto; row-gap: var(--space-8); }
  .d14-diff__intro { grid-column: 2 / 8; grid-row: 1; }
  .d14-diff__concerns { grid-column: 2 / 8; grid-row: 2; }
  .d14-diff__items { grid-column: 9 / 14; grid-row: 1 / 3; align-self: center; }
  .d14-diff__item { padding-block: var(--space-7); }
  .d14-diff__item:first-child { padding-top: 0; }
  .d14-diff__item:last-child { padding-bottom: 0; }
}

/* 4. The Hikari Way: closing. Compare treatments takes the place of the consultation link
   (4-W5); the booking sentence under it (4-W6). The room and the candle film (N-W5): from 64em
   the pair keeps the D12 band height but each frame takes its picture's own shape (room
   1309:1202, film 0.7), so neither is cut; the pair sits in the middle, the paper either side.
   Below 64em the D12 band and D12 film stay as they were. */
/* finish K10 (gate 2d F7): with the address band gone (4-W7) the room and film met the footer
   with no space under them; the coda closes on the D12 section spacing, the same token as its
   top (.g1-coda padding-top). Band size, crop and alignment unchanged. */
.page-about .d14-way-coda { padding-bottom: var(--section-y); }
.d14-way-coda__book {
  max-width: var(--measure-short);
  margin-top: var(--space-4);
  color: var(--ink-soft);
}
.d14-coda-film--wide { display: none; }
@media (min-width: 64em) {
  /* fix-r1 (gate 2d F4): the narrowed band starts at (width - band) / 2, so the words above it
     start on the same line. They keep their D12 width (columns 2 to 10) and D12 wrapping; only
     their left edge moves onto the band's. */
  .page-about .d14-way-coda {
    --coda-h: min(clamp(30rem, 72svh, 48rem), calc((100vw - 2 * var(--pad-x) - 3px) / 1.7891));
    --coda-band-w: calc(var(--coda-h) * 1.7891 + 3px);
  }
  .page-about .d14-way-coda .g1-coda__words {
    grid-column: full-start / full-end;
    padding-inline-start: calc((100% - var(--coda-band-w)) / 2);
    max-width: calc((100% - var(--coda-band-w)) / 2 + 9 * (min(var(--max), 100% - 2 * var(--pad-x)) - 11 * var(--gutter)) / 12 + 8 * var(--gutter));
  }
  .page-about .d14-way-coda .g1-coda__band {
    grid-template-columns: auto auto;
    justify-content: center;
  }
  .page-about .d14-way-coda .g1-coda__room,
  .page-about .d14-way-coda .g1-coda__film { height: var(--coda-h); }
  .page-about .d14-way-coda .g1-coda__room { width: calc(var(--coda-h) * 1.0891); }
  .page-about .d14-way-coda .g1-coda__film { width: calc(var(--coda-h) * 0.7); }
  .page-about .d14-way-coda .g1-coda__room img { object-position: 50% 50%; }
  .d14-coda-film--wide { display: block; }
  .d14-coda-film--narrow { display: none; }
  .page-about .d14-coda-film--wide video { object-position: 50% 50%; }
}

/* 5. Treatments. R4-4 (2026-09-30, owner #39576/#39579: "the previous version's layout"): no rule here.
   Both frames are the D12 frames again (d11-g1.css 3: phones 4:5 edge to edge, from 64em the half-screen
   column top to bottom of the D12 row height). The 90 photograph is the D12 file; the 60 film is
   media/d14/treat/treat-60 (side-lying scene, 1080x1350 = 4:5 at the full source width, bed level). The
   finish K8 4:3 frames and shortened rows are withdrawn; the 4:3 90 crop files stay unused.
   r7 (owner #39602 3): the opening's ground is .d14-glow-bg (d14-bg.css, loaded before this file),
   the Home 60/90 background; the B2 water texture and its scrim are out of the markup, so
   d11-g1.css's .g1-head--svc photo and scrim rules have nothing to style here. */
/* r7 integrate: the clear header sits on this ground until the page moves, and the photograph's
   bright pink streak enters at the upper right, under the menu and BOOK (contrast 1.4 to 2.5:1).
   One header band only, the Home hero's own pattern (site.css .hero__scrim, second layer), in the
   ground's navy so the light below the band is the Home 60/90 ground as it is. */
.g1-head--svc.d14-glow-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(27, 30, 45, 0.6) 0,
    rgba(27, 30, 45, 0.55) var(--header-h),
    rgba(27, 30, 45, 0) calc(var(--header-h) + 3rem));
}

/* 6. Journal. Archive (N-J1): from 48em the four pictures keep their D12 width and go from 4:5
   to 1:1, a fifth less tall; phones unchanged. Hair article (N-J2): the line over the closing
   links drew an empty row under the Before you book list; it goes (the list keeps its own last
   line). */
@media (min-width: 48em) {
  body.page-archive .entry__media { aspect-ratio: 1 / 1; }
  /* fix-r1 (gate 2a F3): where the middle square cuts a thing in half, the square moves to keep
     it whole: the wall lamps (hair) from the top, the tablet and its stand (scalp) from the foot.
     The two other pictures keep the middle square. */
  body.page-archive .entry__media img[data-vt-photo="post-hair"] { object-position: 50% 0%; }
  body.page-archive .entry__media img[data-vt-photo="post-scalp"] { object-position: 50% 100%; }
}
body.page-article--hair .prose-end { border-top: 0; }

/* D14 r6 (H-013/H-014): the Home introduction (owner wording #39503-3) stays on Home only; on
   this page the section opens with the eyebrow straight into the points, so the gap under the
   eyebrow is the eyebrow's own space, not a full row gap. */
.d14-diff__intro { margin-bottom: calc(var(--space-5) - var(--space-7)); }
.d14-diff__intro .eyebrow { margin-bottom: 0; }
@media (min-width: 64em) {
  .d14-diff__intro { margin-bottom: calc(var(--space-5) - var(--space-8)); }
  /* the three points span both rows; their extra height goes to the concerns row, not under the eyebrow */
  .d14-diff__grid { grid-template-rows: auto 1fr; }
}