/*
  The Head Spa by Hikari, D10 journal and system pages

  Pages: blog.html, blog-scalp-consultation.html, blog-hair-before-after.html,
         blog-wellness-slower-appointment.html, blog-treatment-60-90.html,
         search.html, privacy.html, terms.html, accessibility.html, 404.html, thank-you.html

  Load order on these pages: site.css, pages-journal.css, motion.css (motion always has the
  last word). site.css is never edited from here: this file only uses its tokens (colour,
  type, space, motion) and its components (.wrap, .btn, .text-link, .media, .line, .icon,
  .treatment__measure, .visually-hidden). Everything below is the finished page. The few
  transitions live in the "Motion" section at the end, inside prefers-reduced-motion:
  no-preference, and never hide content.

  Motion hooks on these pages (same contract as internal/BUILD-NOTES.md section 5)
    Scenes   [data-scene]: intro, article, related, archive, search, legal, system
    Lines    every heading is .line spans (.line--em = the italic line)
    Images   figure.media > img (article hero, prose figures, entry thumbnails)
    Modules  [data-toc]      article and policy contents, active section marker
             [data-archive]  journal category filter (CSS :target without JS, instant switch with JS;
                             no view transition slide, MOTION-SPEC rejects it)
             [data-module="arrival"]  group arrival calculator, FAQ page only since fix1
                             (TECH T1: modules.css + modules/arrival.js, not styled here)
             [data-share]    share the article link, only where navigator.share exists (TECH-SPEC:
                             no clipboard fallback)
             [data-search]   site search (search.js), [data-guess] 404 suggestion (search.js)
    Page transitions: M9 lives in motion.css (MOTION-SPEC 8). This file sets no view transition.
    Photo pair hook: journal thumbnails and each article's top image carry
    data-vt-photo="post-scalp | post-hair | post-wellness | post-6090"; motion.js names one pair
    at click time only.

  Contents
    1. Page head (archive, search, policies, system)
    2. Breadcrumbs
    3. Article head
    4. Article body, contents, prose
    5. Prose parts: figure, note, pull quote, checklist, spacing diagram, duo
    6. Entries (archive rows and Keep reading)
    7. Journal archive and category filter
    8. Search
    9. Policies (privacy, terms, accessibility)
   10. System pages (404, thank you)
   11. Micro motion (hover and focus only, reduced motion safe)
*/

/* 1. Page head: same measures as the core pages (pages-core.css) so every inner page opens alike */
.page-head {
  padding-block: clamp(3rem, 1.9rem + 3.6vw, 5.5rem) clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
}
.page-head__grid { display: grid; gap: var(--space-5) var(--gutter); }
/* H1 type: site.css 4 (.page-title, IvyMode 9/27). Only the layout stays here. */
.page-lede {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}
.page-updated {
  margin-top: var(--space-4);
  font-size: var(--fs-meta);
  color: var(--muted);
}
@media (min-width: 64em) {
  .page-head__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  .page-head__main { grid-column: 1 / span 7; }
  .page-head__grid > .page-lede { grid-column: 9 / -1; }
}

/* 2. Breadcrumbs */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.625rem;
  font-size: var(--fs-meta);
  color: var(--muted);
}
.crumbs li { display: inline-flex; align-items: center; gap: 0.625rem; }
/* separator: the same small dot as the measure ends and the contents list (fix1: a short
   hairline read as a dash) */
.crumbs li + li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
}
/* 44px wide targets without moving the words: the hit area reaches past the text on both sides */
.crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  margin-inline: -0.3125rem;
  padding-inline: 0.3125rem;
  min-height: 2.75rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--muted); }

/* 3. Article head */
.article-head {
  padding-block: clamp(1rem, 0.6rem + 1.6vw, 2.5rem) clamp(2.5rem, 1.6rem + 3.6vw, 5.5rem);
}
.article-head__grid {
  display: grid;
  gap: var(--space-6) var(--gutter);
}
.article-head .page-title { margin-top: var(--space-3); }
.article-head .page-lede { margin-top: var(--space-5); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.article-head__figure { aspect-ratio: 4 / 5; }
.article-head__figure img { object-position: 50% 45%; }
@media (min-width: 48em) {
  .article-head__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  .article-head__text { grid-column: 1 / span 7; padding-bottom: var(--space-2); }
  .article-head__figure { grid-column: 9 / -1; }
}
@media (max-width: 47.99em) {
  .article-head__figure { aspect-ratio: 5 / 4; }
}

/* share: text button, only shown where the device has a share sheet (pages-journal.js) */
.share {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 550;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.share .icon { width: 1rem; height: 1rem; }
.share:hover { color: var(--accent); }

/* 4. Article body, contents and prose */
.article-body { padding-bottom: var(--section-y-compact); }
.article-body__grid {
  display: grid;
  gap: var(--space-7) var(--gutter);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.toc { display: none; }
@media (min-width: 64em) {
  .article-body__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .toc {
    display: block;
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
  .prose { grid-column: 5 / -1; }
  .article-body--short .prose { grid-column: 1 / span 8; }
}
.toc__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.toc__track { position: relative; padding-left: 1.25rem; }
.toc__track::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--rule);
}
.toc__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: -0.21875rem;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: translateY(var(--toc-y, 0px));
}
.toc[data-ready] .toc__marker { opacity: 1; }
.toc__list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: 0.375rem;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
}
.toc__list a:hover { color: var(--accent); }
.toc__list a[aria-current] { color: var(--ink); }

.prose {
  min-width: 0;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--ink);
}
.prose > * { max-width: 38rem; }
.prose > * + * { margin-top: var(--space-5); }
.prose > p + p { margin-top: var(--space-4); }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin-top: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
.prose > h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: var(--space-4); }
.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--fs-title-sm);
  font-weight: 400;
  line-height: 1.25;
}
.prose a:not([class]) {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.prose a:not([class]):hover { color: var(--accent); text-decoration-color: currentColor; }
.prose ul:not([role]) { padding-left: 1.1em; }
.prose ul:not([role]) li + li { margin-top: var(--space-2); }
.prose strong { font-weight: 600; }
.prose-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: clamp(3rem, 2.4rem + 2vw, 4.5rem) !important;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

/* 5. Prose parts */

/* figure with a caption: the clay mat sits on the image, not on the caption */
.prose-figure.media,
.prose > .prose-figure {
  max-width: none;
  margin-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background: none;
  overflow: visible;
}
.prose-figure.media > img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 3 / 2);
  object-fit: cover;
  background: var(--clay);
}
/* the LQIP mat (modules.css, T9) belongs under the picture only, never under the caption */
.prose-figure.media[style*="--lqip"] { background-image: none; }
.prose-figure.media[style*="--lqip"] > img {
  background: var(--clay) var(--lqip) center / cover no-repeat;
}
@media (forced-colors: active) {
  .prose-figure.media[style*="--lqip"] > img { background-image: none; }
}
.prose-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--muted);
}

.note {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--cream);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.note p + p { margin-top: var(--space-3); }

.pullquote {
  margin-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.pullquote blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  font-style: italic;
  font-weight: var(--display-wght);
  line-height: 1.22;
  letter-spacing: var(--display-track-italic);
  text-indent: -0.42em;
  text-wrap: balance;
}
.pullquote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.watch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 550;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.watch .icon { width: 1rem; height: 1rem; color: var(--accent); }
.watch:hover { color: var(--accent); }
.watch__time { color: var(--muted); font-weight: 450; font-variant-numeric: tabular-nums; }

.checklist {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.checklist li {
  position: relative;
  padding: 0.875rem 0 0.875rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.5rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ink);
}
/* spacing diagram: before and after a chemical hair service (an ordered list, read as text).
   One hairline runs through the three dots; the gaps between them carry the words. */
.span-diagram {
  position: relative;
  list-style: none;
  padding: 0;
  max-width: none !important;
  margin-block: var(--space-6) !important;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.span-diagram::before {
  content: "";
  position: absolute;
  left: 0.46875rem;
  top: 0.6rem;
  bottom: 0.75rem;
  width: 1px;
  background: var(--ink-soft);
  transform-origin: center top;
}
.span-diagram li { position: relative; }
.span-diagram__stop {
  padding-left: 1.75rem;
  color: var(--ink);
  font-weight: 550;
}
.span-diagram__stop::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0.25rem;
  top: 0.4rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--ivory);
}
.span-diagram__stop--spa { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; font-style: italic; }
.span-diagram__stop--spa::before { top: 0.6rem; background: var(--accent); }
.span-diagram__gap {
  padding: 0.875rem 0 0.875rem 1.75rem;
  color: var(--muted);
}
@media (min-width: 40em) {
  .span-diagram {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    column-gap: 0;
  }
  .span-diagram::before { display: none; }
  .span-diagram__stop { padding: 1.5rem 0.25rem 0; text-align: center; }
  .span-diagram__stop::before { left: 50%; top: 0; margin-left: -0.21875rem; margin-top: -0.21875rem; }
  .span-diagram__stop--spa { font-size: 1.375rem; padding-top: 1.3rem; }
  .span-diagram__stop--spa::before { top: 0; }
  .span-diagram__gap { padding: 0.75rem 0.25rem 0; text-align: center; }
  /* each gap's line reaches half a column either side, so it runs dot to dot */
  .span-diagram__gap::before {
    content: "";
    position: absolute;
    left: -50%;
    right: -50%;
    top: 0;
    height: 1px;
    background: var(--ink-soft);
    transform-origin: left center;
  }
}

/* 60 or 90: two named rows drawn to their length, like the home page treatment rows */
.duo { max-width: none !important; }
.duo__row:first-child { padding-top: 0; }
.duo__row {
  position: relative;
  padding-block: var(--space-5) var(--space-6);
}
.duo__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  font-weight: var(--display-wght);
  line-height: 1.1;
}
.duo__name .line:first-child { font-style: italic; }
.duo__desc { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-soft); max-width: 30rem; }
.duo__row .treatment__measure { width: calc(var(--minutes) / 90 * 100%); }

/* 6. Entries: hairline rows with a small 4:5 picture (archive and Keep reading) */
.entries { border-top: 1px solid var(--rule-strong); }
.entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: var(--space-4) var(--gutter);
  align-items: start;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.entry__media { aspect-ratio: 4 / 5; }
.entry__cat { font-size: var(--fs-meta); color: var(--muted); }
.entry__title {
  margin-top: var(--space-1);
  font-size: clamp(1.3125rem, 1.1rem + 1vw, 2.125rem);
  font-weight: var(--display-wght);
  line-height: 1.14;
}
.entry__link { text-decoration: none; }
.entry__link::after { content: ""; position: absolute; inset: 0; }
.entry__link:focus-visible { outline: none; }
.entry__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.entry__dek {
  max-width: 30rem;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}
.entry__more { display: none; }
@media (min-width: 48em) {
  .entry {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    padding-block: var(--space-6);
  }
  .entry__media { grid-column: 1 / span 2; }
  .entry__body { grid-column: 4 / span 7; }
  .entry__more {
    display: block;
    grid-column: 12;
    justify-self: end;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ink-soft);
  }
}

.keep-reading { padding-block: var(--section-y-compact); background: var(--cream); }
.keep-reading__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
}
.keep-reading__title { font-size: var(--fs-h2); font-weight: var(--display-wght); }
.keep-reading .entry__title { font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem); }

/* 7. Journal archive */
.archive { padding-bottom: var(--section-y); }
.archive__target { display: block; height: 0; }
.filter { margin-bottom: clamp(0.5rem, 0.3rem + 0.8vw, 1rem); }
/* one line on a phone: the row scrolls sideways inside itself if it ever runs out of room */
.filter__list {
  display: flex;
  flex-wrap: nowrap;
  column-gap: clamp(1.25rem, 0.8rem + 2vw, 2.75rem);
  overflow-x: auto;
  scrollbar-width: none;
  margin: -0.3125rem -0.5rem;
  padding: 0.3125rem 0.5rem;   /* room for the focus ring inside the scroller */
}
.filter__list::-webkit-scrollbar { display: none; }
.filter__list > li { flex: none; }
@media (max-width: 29.99em) {
  /* phones: the four fit on one line at 390; narrower, the row runs to the screen edge and
     scrolls like any row of chips (fix1, AESTHETIC P3-10) */
  .filter__list {
    --fs-small: 0.9375rem;   /* category labels, not owner copy */
    column-gap: 0.75rem;
    margin-right: calc(-1 * var(--pad-x));
    padding-right: var(--pad-x);
  }
  .filter__list .filter__link { gap: 0.25rem; }   /* fix2: all four end inside the gutter at 390 (beats the base rule below) */
  .filter__list > li:first-child .filter__link { z-index: 1; }   /* fix3: the 44px 'All' target wins the 2px overlap */
}
/* 44px wide targets without moving the words: 7px of hit area on each side of the text */
.filter__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-inline: -0.4375rem;
  padding: 0.75rem 0.4375rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.filter__count {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.filter__link::after {
  content: "";
  position: absolute;
  left: 0.4375rem;
  right: 0.4375rem;
  bottom: 0.5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.filter__link:hover { color: var(--accent); }
.filter__link[aria-current] { color: var(--ink); }
.filter__link[aria-current]::after { transform: scaleX(1); }
.archive__status { min-height: 1.5rem; margin-top: var(--space-2); font-size: var(--fs-meta); color: var(--muted); }
.archive__status:empty { min-height: 0; margin: 0; }

/* Without JavaScript the filter is pure CSS: the category links jump to an anchor, :target
   plus :has() keep only that category. Browsers without :has() simply show every article. */
html:not(.js) .archive:has(#scalp-and-hair-care:target) .entry:not([data-category="scalp-and-hair-care"]),
html:not(.js) .archive:has(#wellness:target) .entry:not([data-category="wellness"]),
html:not(.js) .archive:has(#treatments:target) .entry:not([data-category="treatments"]) { display: none; }
html:not(.js) .archive:has(#scalp-and-hair-care:target) .filter__link[href="#scalp-and-hair-care"],
html:not(.js) .archive:has(#wellness:target) .filter__link[href="#wellness"],
html:not(.js) .archive:has(#treatments:target) .filter__link[href="#treatments"],
html:not(.js) .archive:not(:has(.archive__target:target)) .filter__link[href="#all"],
html:not(.js) .archive:has(#all:target) .filter__link[href="#all"] { color: var(--ink); }
html:not(.js) .archive:has(#scalp-and-hair-care:target) .filter__link[href="#scalp-and-hair-care"]::after,
html:not(.js) .archive:has(#wellness:target) .filter__link[href="#wellness"]::after,
html:not(.js) .archive:has(#treatments:target) .filter__link[href="#treatments"]::after,
html:not(.js) .archive:not(:has(.archive__target:target)) .filter__link[href="#all"]::after,
html:not(.js) .archive:has(#all:target) .filter__link[href="#all"]::after { transform: scaleX(1); }

/* 8. Search */
.search-form { max-width: 48rem; margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.search-form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--ink);
}
.search-field:focus-within { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.search-field input {
  flex: 1;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.375rem);
  font-weight: var(--display-wght);
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-field input:focus { outline: none; }
.search-field input::-webkit-search-cancel-button,
.search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-field__btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.search-field__btn .icon { width: 1.375rem; height: 1.375rem; }
.search-field__btn:hover { color: var(--accent); }
.search-hint {
  margin-top: var(--space-3);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.search-hint kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35em;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 0.95em;
  text-align: center;
  color: var(--ink);
}
.suggest { margin-top: var(--space-5); }
html:not(.js) [data-search-idle] { display: none; } /* the suggestions need search.js; the noscript note takes over */
.suggest__label { font-size: var(--fs-meta); color: var(--muted); }
.suggest__list { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
.suggest__list a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: var(--fs-small);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.3em;
}
.suggest__list a:hover { color: var(--accent); text-decoration-color: currentColor; }

.search-results { padding-bottom: var(--section-y); }
.results__status {
  min-height: 1.6rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.results__status b { font-weight: 600; color: var(--ink); }
.results__alt { margin-top: var(--space-1); font-size: var(--fs-meta); color: var(--muted); }
.results__alt a { color: var(--ink); }
.results__list { margin-top: var(--space-5); border-top: 1px solid var(--rule-strong); }
.results__list:empty { display: none; }
.result {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--rule);
}
.result__type { font-size: var(--fs-meta); color: var(--muted); }
.result__title { font-size: var(--fs-title-sm); font-weight: 400; line-height: 1.25; }
.result__title a { text-decoration: none; }
.result__title a:hover { color: var(--accent); }
.result__excerpt {
  max-width: 46rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.result__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-5);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.result__more a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.3em;
}
.result__more a:hover { color: var(--accent); }
mark {
  padding: 0 0.08em;
  background: var(--champagne);
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.results__empty { max-width: 40rem; margin-top: var(--space-5); }
.results__empty p + p { margin-top: var(--space-3); }
.results__empty .suggest__list { margin-top: var(--space-2); }
@media (min-width: 64em) {
  .search-results__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .search-results__inner > * { grid-column: 1 / span 9; }
}

/* 9. Policies */
.legal .prose h2 { font-size: var(--fs-title-sm); }
.legal .prose h3 {
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.legal .prose h3 + p { margin-top: var(--space-2); }
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-5) var(--gutter);
  max-width: none !important;
  padding-block: var(--space-5);
  border-block: 1px solid var(--rule);
}
.glance div { display: grid; align-content: start; gap: var(--space-1); }
.glance dt {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: var(--display-wght);
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.glance dd { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.terms-list { max-width: 38rem; }
.terms-list div { padding-block: var(--space-4); border-bottom: 1px solid var(--rule); }
.terms-list div:first-child { border-top: 1px solid var(--rule); }
.terms-list dt { font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.terms-list dd { margin: var(--space-1) 0 0; }

/* 10. System pages */
.system { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 5.5rem) var(--section-y); }
.system__grid { display: grid; gap: var(--space-7) var(--gutter); }
.system__figure { aspect-ratio: 4 / 5; }
.system__figure--wide { aspect-ratio: 3 / 2; }
.system__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}
.system .page-lede { margin-top: var(--space-5); }
.system .search-form { margin-top: var(--space-6); max-width: 32rem; }
.system .search-field input { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); min-height: 3rem; }
.guess {
  max-width: 34rem;
  margin-top: var(--space-6);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--cream);
}
.guess__label { font-size: var(--fs-meta); color: var(--muted); }
.guess__title { margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--fs-title-sm); line-height: 1.25; }
.guess__title a { text-decoration: none; }
.guess__title a:hover { color: var(--accent); }
.guess__why { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 48em) {
  .system__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .system__text { grid-column: 1 / span 7; }
  .system__figure { grid-column: 9 / -1; }
  .system__figure--wide { grid-column: 8 / -1; }
}

/* 11. Micro motion. Nothing above depends on this block. Hover only on a real pointer
   (MOTION-SPEC 7), the same colour on keyboard focus, and no movement with reduced motion.
   Page transitions (M9) are motion.css's job; journal photos only fade in as they load. */
@media (hover: hover) and (pointer: fine) {
  .entry:hover .entry__title,
  .entry:hover .entry__more { color: var(--accent); }
}
.entry:active .entry__title,
.entry:active .entry__more { color: var(--accent); }   /* fix3c: press cue on touch */
.entry:focus-within .entry__title,
.entry:focus-within .entry__more { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .toc__marker { transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease); }
  .filter__link::after { transition: transform var(--dur-ui) var(--ease); }
  .entry__more { transition: transform var(--dur-micro) var(--ease); }
  .entry:focus-within .entry__more { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .entry:hover .entry__more { transform: translateX(4px); }
}

@media print {
  .site-header, .site-footer, .toc, .keep-reading, .share, .arrival__form, .skip-link { display: none !important; }
  .article-body__grid { display: block; border: 0; }
  .prose > * { max-width: none; }
  body { background: #FFFDF8; }
}