/*
  The Head Spa by Hikari, D11 legal pages (group g4)
  Pages: privacy.html, terms.html, accessibility.html (body.page-legal). Linked only there,
  after site.css and pages-journal.css, so everything here is scoped to .page-legal and wins
  over the D10 policy rules without touching the shared files.

  Direction: readability first.
    - A restrained header band: plain champagne ground (--surface-band), no photograph,
      no texture, no veil. Ink and ink-soft only (5.5:1 or better on champagne).
    - D11 type: italic display title (--fs-h1, --display-wght-em), roman display section
      headings (--fs-h3, --display-wght), Public Sans text at 17px / 1.7 on a 38rem measure.
    - One reading axis on wide screens: the left rail carries "Last updated" and the
      contents; title, lede and every section start on the same line at column 5.
    - Phones and tablets: the contents list is shown under the band as hairline rows
      (GOV.UK style contents), since the pages are long; the sticky rail returns at 64em.
  Tokens only (no colour hex, no font names, no new durations). Static and finished: no
  transitions or keyframes here. The contents dot keeps its motion from pages-journal.css.
  Words, links, head and JSON-LD of the three pages are unchanged.

  Contents
    1. Header band
    2. Body grid and contents rail
    3. Prose
    4. Terms parts: at a glance, gift card rows
    5. Print
*/

/* 1. Header band */
.page-legal .page-head {
  background: var(--surface-band);
  padding-block: clamp(3rem, 1.9rem + 4.4vw, 6.5rem) clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);
}
.page-legal .page-head__grid { gap: 0 var(--gutter); }
.page-legal .page-title { color: var(--ink); } /* type: site.css 4 (.page-title) */
.page-legal .page-updated {
  margin-top: var(--space-3);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--ink-soft);          /* --muted is 4.49:1 on champagne, ink-soft 5.5:1 */
  font-variant-numeric: lining-nums;
}
.page-legal .page-head__grid > .page-lede {
  max-width: 38rem;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}
@media (min-width: 64em) {
  .page-legal .page-head__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  /* title and lede on the reading axis (column 5), "Last updated" in the rail below the
     contents title's column, level with the lede's last line */
  .page-legal .page-head__main { display: contents; }
  .page-legal .page-title { grid-column: 5 / -1; grid-row: 1; }
  .page-legal .page-head__grid > .page-lede {
    grid-column: 5 / span 7;
    grid-row: 2;
    margin-top: var(--space-6);
  }
  .page-legal .page-updated {
    grid-column: 1 / span 3;
    grid-row: 2;
    align-self: end;
    margin: 0;
    padding-bottom: 0.3em;         /* sits on the lede's last baseline, not its line box */
  }
}

/* 2. Body grid and contents */
.page-legal .article-body { padding-bottom: var(--section-y); }
.page-legal .article-body__grid {
  row-gap: var(--space-7);
  padding-top: clamp(2.5rem, 1.7rem + 3.2vw, 5rem);
  border-top: 0;                   /* the band's edge is the division */
}
.page-legal .toc__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: var(--text-wght-strong);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* below 64em: the contents as a list of hairline rows under the band (no dot, no track) */
@media (max-width: 63.99em) {
  .page-legal .toc { display: block; }
  .page-legal .toc__track { padding-left: 0; }
  .page-legal .toc__track::before,
  .page-legal .toc__marker { display: none; }
  .page-legal .toc__list { border-bottom: 1px solid var(--rule); }
  .page-legal .toc__list li { border-top: 1px solid var(--rule); }
  .page-legal .toc__list a,
  .page-legal .toc__list a[aria-current] {
    min-height: 2.75rem;
    padding-block: 0.375rem;
    font-size: var(--fs-small);
    color: var(--ink);
  }
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .page-legal .toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  /* two columns: each row keeps its own hairline, the closing rule sits under both */
  .page-legal .toc__list { border-bottom: 0; }
  .page-legal .toc__list li { border-bottom: 1px solid var(--rule); margin-top: -1px; }
}

/* 64em and up: the sticky rail (position from pages-journal.css), a little more air */
@media (min-width: 64em) {
  .page-legal .toc__list a { line-height: 1.4; }
}

/* 3. Prose: 17px Public Sans, 1.7 leading, 38rem measure (about 70 characters). Hairlines
   (section rules, the glance, the gift card rows) share one wider edge, 44rem, so every rule
   on the page ends at the same place while the text keeps its measure. */
.page-legal .prose {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
}
.page-legal .prose > * { max-width: 38rem; }
.page-legal .prose > p + p { margin-top: var(--space-4); }
.page-legal .prose h2 {
  max-width: 44rem;
  margin-top: clamp(3rem, 2.4rem + 2vw, 4.25rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--display-wght);
  line-height: 1.2;
  letter-spacing: var(--display-track);
  color: var(--ink);
}
.page-legal .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page-legal .prose h2 + * { margin-top: var(--space-4); }
.page-legal .prose h3 {
  margin-top: var(--space-6);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: var(--text-wght-strong);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink);
}
.page-legal .prose h3 + p { margin-top: var(--space-2); }
.page-legal .prose a:not([class]) {
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.24em;
  overflow-wrap: anywhere;         /* the email address never pushes a phone sideways */
}
.page-legal .prose a:not([class]):hover { color: var(--accent); text-decoration-color: currentColor; }

/* 4. Terms parts */

/* at a glance (12 hours, 48 hours, 15 minutes): display figures between two hairlines */
.page-legal .prose > .glance { max-width: 44rem !important; }  /* pages-journal sets none !important */
.page-legal .glance {
  gap: var(--space-5) var(--gutter);
  margin-top: var(--space-5);
  padding-block: var(--space-5) var(--space-6);
  border-block: 1px solid var(--rule);
}
.page-legal .glance dt {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: var(--display-wght);
  line-height: 1.05;
  letter-spacing: var(--display-track);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.page-legal .glance dd {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}
/* phones: three figures do not fit side by side, so each becomes one row, figure then words,
   on shared columns (the wrappers step aside so the figures line up) */
@media (max-width: 39.99em) {
  .page-legal .glance {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
    align-items: baseline;
  }
  .page-legal .glance div { display: contents; }
  .page-legal .glance dd { margin: 0; }
}

/* gift card terms: hairline rows, label then text; label beside the text from 48em */
.page-legal .terms-list div { padding-block: var(--space-4) var(--space-5); }
.page-legal .terms-list dt {
  font-size: 1rem;
  font-weight: var(--text-wght-strong);
  line-height: 1.5;
  color: var(--ink);
}
.page-legal .terms-list dd { margin-top: var(--space-1); }
@media (min-width: 48em) {
  .page-legal .prose > .terms-list { max-width: 44rem; }   /* the shared rule edge */
  .page-legal .terms-list div {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: baseline;
  }
  .page-legal .terms-list dd { margin-top: 0; }
}

/* 5. Print: no band ground, same reading column */
@media print {
  .page-legal .page-head { background: none; padding-block: 0 1.5rem; }
  .page-legal .prose h2 { border-top: 0; padding-top: 0; }
}