/*
  The Head Spa by Hikari, D12 group 3: the Journal and the policy pages

  Pages: blog.html, blog-scalp-consultation.html, blog-hair-before-after.html,
         blog-wellness-slower-appointment.html, blog-treatment-60-90.html (loaded right after
         d11-g2.css), privacy.html, terms.html, accessibility.html (right after d11-g4.css).
  Linked on these eight pages only. search.html keeps d11-g2.css without this file.

  D12 (DESIGN-D12.md 5, YUSEN-PATTERNS.md 4 and 7.4): the Journal reads like a magazine page.
  A large italic title on its own, one large picture, a narrow reading column on one axis and
  the rest of the page left empty. Room comes from fewer pieces side by side, not from padding.
  The policy pages keep their words and order; only the reading column and the space change.

  Rules kept: tokens only (colour, type, space; no hex, no font names), square corners, no
  shadow, no transitions or keyframes (motion.css owns motion), no text boxes on photographs.
  Words, links, head and JSON-LD of the pages are unchanged; the only markup change is the
  wellness picture (a crop without the entrance door, see tools/d12/g3/make-wellness-crop.py).

  Contents
    1. Journal archive: italic title with room above it, card titles at the home journal size
    2. Article cover: title first across the page, then the picture on the reading axis
       (column 5) with the lede at its foot on the left
    3. Article body: one reading axis at column 5, a narrower measure, italic section titles
    4. Keep reading
    5. Policies: no band, italic title on the reading axis, a narrower measure
*/

/* 1. Journal archive */
.page-archive .page-head {
  padding-block: clamp(4rem, 1.6rem + 7vw, 8.5rem) clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
/* H1 type: site.css 4 (.page-title, IvyMode 9/27). Only the layout stays here. */
/* card titles at the home Journal size (home 8: 24 to 28 italic), under large pictures */
.page-archive .entry__title {
  font-size: var(--fs-h3);
  font-weight: var(--display-wght-em);
  line-height: 1.18;
  letter-spacing: var(--display-track-sm);
}
.page-archive .entry__body { margin-top: var(--space-4); }
.page-archive .entry__title { margin-top: var(--space-2); }
.page-archive .entry__dek { max-width: var(--measure-short); margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 48em) {
  /* the pictures stop short of the centre hairline: air on both sides of it (yusen blog) */
  .page-archive .entry:nth-child(odd of :not([hidden])) { padding-right: clamp(0rem, -3rem + 6vw, 4rem); }
  .page-archive .entry:nth-child(even of :not([hidden])) { padding-left: clamp(0rem, -3rem + 6vw, 4rem); }
}

/* 2. Article cover: crumbs, then the title alone across the page, then the picture */
.page-article .article-head {
  padding-block: clamp(0.5rem, 0.3rem + 0.8vw, 1rem) clamp(3.5rem, 2rem + 4vw, 6.5rem);
}
.page-article .article-head__text { display: contents; }   /* its parts join the cover grid */
.page-article .article-head__grid {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-article .article-head .crumbs { order: 1; margin-bottom: 0; }
.page-article .article-head .page-title {
  order: 2;
  margin-top: clamp(2rem, 1rem + 4vw, 5.5rem);
}
.page-article .article-head__figure {
  order: 3;
  aspect-ratio: 4 / 5;
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 4rem);
}
.page-article .article-head .page-lede { order: 4; max-width: var(--measure-short); margin-top: var(--space-6); }
.page-article .article-head .article-meta { order: 5; margin-top: var(--space-5); }

/* phones: the picture runs edge to edge under the title (d11-g2's negative side margins) */
@media (min-width: 48em) and (max-width: 63.99em) {
  /* tablets: a 4:5 picture two thirds wide, run to the right edge */
  .page-article .article-head__figure {
    grid-column: auto;
    align-self: flex-end;
    width: calc(66.667% + var(--pad-x));
    margin-left: 0;
    margin-right: calc(-1 * var(--pad-x));
  }
}
@media (min-width: 64em) {
  .page-article .article-head__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--gutter);
    align-items: start;
  }
  .page-article .article-head .crumbs { grid-column: 1 / -1; grid-row: 1; }
  .page-article .article-head .page-title { grid-column: 1 / span 10; grid-row: 2; }
  /* the picture opens the reading axis (column 5), 4:5 as it was framed; nothing beside it but
     the lede at its foot */
  .page-article .article-head__figure {
    grid-column: 5 / span 6;
    grid-row: 3 / span 2;
    width: auto;
    margin-inline: 0;
  }
  .page-article .article-head .page-lede {
    grid-column: 1 / span 4;
    grid-row: 3;
    align-self: end;
    margin-top: 0;
    padding-right: var(--gutter);
  }
  .page-article .article-head .article-meta { grid-column: 1 / span 4; grid-row: 4; align-self: end; }
}
@media (min-width: 80em) {
  .page-article .article-head .page-lede,
  .page-article .article-head .article-meta { grid-column: 1 / span 3; padding-right: 0; }
}

/* 3. Article body: the text column on the axis of the cover picture, a shorter line */
.page-article .article-body__grid { padding-top: clamp(2.5rem, 1.6rem + 3vw, 5rem); }
.page-article .prose > * { max-width: var(--measure); }
.page-article .prose h2 {
  margin-top: clamp(3.5rem, 2.6rem + 3vw, 5.5rem);
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: var(--display-wght-em);
  line-height: 1.2;
}
.page-article .prose > h2:first-child { margin-top: 0; }
.page-article .prose h2 + * { margin-top: var(--space-4); }
/* the care note: between two hairlines on the page ground, not a box */
.page-article .note {
  padding: var(--space-5) 0;
  border-block: 1px solid var(--rule);
  background: none;
}
/* pictures in the text: wider than the line, as wide as the cover picture */
.page-article .prose > .prose-figure { max-width: none; }
@media (min-width: 64em) {
  .page-article .prose { grid-column: 5 / -1; }
  .page-article--sixty .article-body--short .prose { grid-column: 5 / -1; }
  /* the prose runs over 8 columns; the cover picture takes 6 of them (columns 5 to 10) */
  .page-article .prose > .prose-figure {
    width: calc(75% - var(--gutter) / 4);
    margin-right: 0;
  }
  /* the picture and guest quote pair (Time to rest) keeps to the same box */
  .page-article .prose > .g2-pair {
    width: calc(75% - var(--gutter) / 4);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* 60 or 90: the two lengths keep the width from the axis to the right margin */
.page-article--sixty .prose > .duo { max-width: none; }

/* 4. Keep reading */
.page-article .keep-reading__title,
.page-article .keep-reading__title .line {
  font-style: italic;
  font-weight: var(--display-wght-light);
}
.page-article .keep-reading .entry__title { font-size: var(--fs-h3); line-height: 1.18; }

/* 5. Policies: the page ground from the top, the title and the text on one axis (column 5) */
.page-legal .page-head {
  background: none;
  padding-block: clamp(4rem, 1.6rem + 7vw, 8.5rem) clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
/* H1 type: site.css 4 (.page-title, IvyMode 9/27). Only the layout stays here. */
.page-legal .page-updated { color: var(--muted); }
.page-legal .page-head__grid > .page-lede { max-width: var(--measure); }
.page-legal .article-body__grid {
  padding-top: clamp(2.5rem, 1.6rem + 3vw, 5rem);
  border-top: 1px solid var(--rule);
}
.page-legal .prose > * { max-width: var(--measure); }
.page-legal .prose h2 {
  margin-top: clamp(3.5rem, 2.6rem + 3vw, 5.5rem);
  font-style: italic;
  font-weight: var(--display-wght-em);
}
.page-legal .prose > h2:first-child { margin-top: 0; }
@media (min-width: 64em) {
  .page-legal .page-head__grid > .page-lede { grid-column: 5 / span 6; }
}
@media print {
  .page-legal .article-body__grid { border-top: 0; }
}