/* ============================================================
   SKEION — Science / MeshMHD page: what belongs to this page only.
   Loaded after /assets/site/site.css. Everything shared (page head, sections, facts, callout, plate figure, disclosure,
   sources, CTA band) comes from the system: see docs/build/13-design-system.md. Page: docs/build/27-seo-applied.md.
   ============================================================ */

/* ---------- Head: the figure sits in the right-hand column; the title a size down from a bare page head ---------- */
@media (min-width: 1024px) {
  .page-head--media .h1 { font-size: clamp(34px, calc(2.4vw + 18px), 54px); }
  .page-head--media .page-head-grid { column-gap: 0; align-items: center; }
  .page-head--media .page-head-copy { padding-right: 24px; }
  .page-head--media .page-head-media { padding-left: 48px; }
}
@media (max-width: 1023px) { .sci-fig { max-width: 560px; } }
.sci-fig .fig-cap > .fig-n, .sci-fig .fig-cap > .fig-d { display: inline; }   /* one line: what you see, then « Illustration. » (audit A16) */

/* ---------- How it works: two short blocks, each under its own rule ---------- */
.how { display: grid; gap: clamp(24px, 2.6vw, 36px); }
.how-i { padding-top: 18px; border-top: 1px solid var(--line); }
.how-t { font: 500 clamp(1.1rem, calc(0.3vw + 1rem), 1.3rem)/1.3 var(--f-display); letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.how-i .body { margin-top: 10px; }

/* ---------- Nature: one dated row per result (the vocabulary of the home's science section) ---------- */
.pubs > li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 20px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.pubs > li:last-child { border-bottom: 1px solid var(--line); }
.pub-y { font: 500 1.35rem/1.3 var(--f-mono); letter-spacing: -0.02em; color: var(--teal); font-variant-numeric: tabular-nums; }
.pub-t { font: 500 1.12rem/1.35 var(--f-display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.pub-b { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.pub-ref { margin-top: 8px; font: 400 0.75rem/1.6 var(--f-mono); letter-spacing: 0.03em; color: var(--ink-3); }
.pub-ref a { display: inline-block; padding: 13px 0; margin: -13px 0; color: var(--ink-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .pub-ref a:hover { color: var(--teal); } }
@media (max-width: 599px) { .pubs > li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } }

/* ---------- Key terms: a narrower term column; the further-reading links never widen the page ---------- */
@media (min-width: 768px) { .terms { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.terms dt { text-transform: none; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--ink); }
.sources a { overflow-wrap: anywhere; }

/* ---------- Questions: each question is an h3 inside its <summary> (outline), with the summary's own type ---------- */
.faq summary h3 { font: inherit; letter-spacing: inherit; color: inherit; }
.faq .disclosure > div { font-size: clamp(16px, calc(0.23vw + 14.8px), 18px); }
.faq .link--inline { white-space: normal; }

/* ---------- References: numbered, in mono, one per row under 1 px rules ---------- */
.refs { counter-reset: ref; border-top: 1px solid var(--line); }
.refs > li { counter-increment: ref; position: relative; padding: 14px 0 14px 2.6rem; border-bottom: 1px solid var(--line); font: 400 0.8rem/1.65 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-2); overflow-wrap: anywhere; }
.refs > li::before { content: counter(ref, decimal-leading-zero); content: counter(ref, decimal-leading-zero) / ""; position: absolute; left: 0; top: 14px; font: 500 0.75rem/1.75 var(--f-mono); letter-spacing: 0.1em; color: var(--teal); }
.refs cite { font-style: normal; color: var(--ink); }
.refs a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 12px 0; margin: -12px 0; }
@media (hover: hover) { .refs a:hover { color: var(--teal); } }

/* ---------- Long button labels wrap on a narrow phone instead of overflowing the column (the system keeps .btn on one line) ---------- */
@media (max-width: 479px) {
  .actions .btn { white-space: normal; text-align: left; justify-content: space-between; padding-block: 12px; line-height: 1.25; }
}

/* ---------- Images: Nature covers beside each result, portrait of the researcher ---------- */
.pubs > li { grid-template-columns: 4.6rem minmax(0, 1fr) clamp(104px, 11vw, 132px); }
.pub-cover { display: block; align-self: start; }
.pub-cover img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
@media (max-width: 599px) {
  .pubs > li { grid-template-columns: minmax(0, 1fr); }
  .pub-cover { width: 132px; margin-top: 12px; }
}
.sci-person { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 36px); align-items: start; }
.sci-portrait { margin: 0; }
.sci-portrait img { width: 100%; height: auto; border-radius: var(--radius, 12px); border: 1px solid var(--line); }
@media (max-width: 599px) { .sci-person { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .sci-portrait { max-width: 220px; } }