/* ─────────────────────────────────────────────────────────────────────────────
   Athena Naturals — Learn library
   Shared stylesheet for the static, server-rendered education pages under /learn.

   These pages are intentionally plain HTML rather than React routes: the site is
   a client-rendered SPA, and most AI crawlers (GPTBot, ClaudeBot, PerplexityBot,
   CCBot) do not execute JavaScript. Content that only exists after hydration is
   invisible to them. Everything here ships in the HTML source.

   Design language mirrors the app: Cormorant Garamond italic display, Beatrice
   body, #4E66AC primary, squared corners throughout.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Fonts (self-hosted Beatrice, matching src/index.css) ─────────────────── */
@font-face {
  font-family: 'Beatrice';
  src: url('/fonts/BeatriceStandard-Regular.ttf') format('truetype');
  font-weight: 100 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Beatrice';
  src: url('/fonts/BeatriceStandard-Italic.ttf') format('truetype');
  font-weight: 100 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Beatrice';
  src: url('/fonts/BeatriceStandard-SemiBold.ttf') format('truetype');
  font-weight: 451 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Beatrice';
  src: url('/fonts/BeatriceStandard-SemiBoldItalic.ttf') format('truetype');
  font-weight: 451 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --primary: #4E66AC;
  --secondary: #D6E4EB;
  --neutral: #6F7881;
  --ink: #4E66AC;
  --body: rgba(60, 72, 92, 0.88);
  --body-muted: rgba(60, 72, 92, 0.66);
  --rule: rgba(78, 102, 172, 0.18);
  --rule-soft: rgba(78, 102, 172, 0.1);
  --wash: rgba(214, 228, 235, 0.28);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Beatrice', 'Inter', system-ui, -apple-system, sans-serif;
  --measure: 68ch;
  --gutter: min(100% - 2rem, 920px);
  /* Height of the fixed nav: logo box + vertical padding. Kept as a variable
     because both the body offset and anchor scrolling depend on it. */
  --nav-h: 93px;
}

@media (max-width: 999px) {
  :root {
    --nav-h: 81px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  padding-top: var(--nav-h);
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid rgba(78, 102, 172, 0.65);
  outline-offset: 3px;
}

/* Visible to a screen reader, not to the eye: used for the search label, which
   the placeholder already conveys visually. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-to-content {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 9999;
  padding: 0.6rem 1.1rem;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.skip-to-content:focus {
  transform: translate(-50%, 0);
}

/* ─── Site nav ──────────────────────────────────────────────────────────────
   A hand-port of the React nav in src/App.jsx as it renders on a non-home
   route: fixed, solid primary, white logo and links. These pages are plain
   HTML for crawlers, so the nav cannot be imported; the values below are
   copied from the component and must be changed in both places together.
   ────────────────────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 3vw;
  background: var(--primary);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.14);
}

/* The wordmark is a white fill masked by the logo PNG, matching the component,
   so it stays crisp against the primary field without a second asset. */
.site-nav__logo {
  display: block;
  padding: 0.48rem 0.86rem;
  line-height: 0;
}
.site-nav__mark {
  position: relative;
  display: block;
  width: 92px;
  flex-shrink: 0;
}
.site-nav__glyph {
  display: block;
  width: 100%;
  aspect-ratio: 2000 / 1008;
  background: #fff;
  -webkit-mask-image: url('/BlueLogo-V1.png');
  mask-image: url('/BlueLogo-V1.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.site-nav__tm {
  position: absolute;
  top: 12%;
  right: -7%;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 6px;
  font-weight: 500;
  line-height: 1;
}

.site-nav__links {
  display: flex;
  gap: 2rem;
}
.site-nav__links a {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.2s ease;
}
.site-nav__links a:hover {
  opacity: 0.72;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-nav__btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 1.2rem;
  background: transparent;
  color: #fff;
  border: 0.5px solid rgba(255, 255, 255, 0.46);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}
.site-nav__btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.site-nav__cart {
  min-width: 46px;
  padding: 0 0.82rem;
}
.site-nav__cart svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Mobile cluster and the full-screen menu it opens. */
.site-nav__mobile {
  display: none;
  align-items: center;
  gap: 0.4rem;
}
.site-nav__mobile .site-nav__cart {
  min-width: 44px;
  min-height: 36px;
  padding: 0 0.76rem;
  z-index: 60;
}
.site-nav__burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 60;
}
.site-nav__burger span[data-bar] {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #fff;
  transition: background 0.25s;
}
.site-nav__burger span[data-bar]:last-of-type {
  width: 14px;
}
.site-nav__burger .site-nav__close {
  display: none;
  color: #fff;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1;
}
.site-nav.is-open .site-nav__burger span[data-bar] {
  display: none;
}
.site-nav.is-open .site-nav__burger .site-nav__close {
  display: block;
}

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.site-menu[hidden] {
  display: none;
}
.site-menu a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
}
.site-menu__cart {
  padding: 0.8rem 1.25rem;
  border: 0.5px solid rgba(78, 102, 172, 0.35);
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
}
.site-menu__cta {
  margin-top: 0.75rem;
  padding: 1rem 3rem;
  background: var(--primary);
  color: #fff !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
}

/* Kept in step with NAV_DESKTOP_MIN_WIDTH in src/App.jsx: the desktop row of
   links plus the shop CTA and cart needs about 1000px before it stops crowding
   the logo, so tablets get the hamburger. */
@media (max-width: 999px) {
  .site-nav {
    padding: 0.85rem 4vw;
  }
  .site-nav__logo {
    padding: 0.42rem 0.7rem;
  }
  .site-nav__mark {
    width: 78px;
  }
  .site-nav__tm {
    font-size: 5px;
  }
  .site-nav__links,
  .site-nav__actions {
    display: none;
  }
  .site-nav__mobile {
    display: flex;
  }
}

/* The menu needs JS, so the button only appears once the script has run. The
   nav links themselves are plain anchors, so a no-JS visitor loses nothing on
   desktop and still has the logo and cart on mobile. */
html.js .site-nav__burger {
  display: flex;
}
body.menu-open {
  overflow: hidden;
}

@media (min-width: 1000px) {
  .site-menu {
    display: none !important;
  }
}

/* ─── Article shell ────────────────────────────────────────────────────────── */
.article {
  width: var(--gutter);
  margin: 0 auto;
  padding: clamp(3.25rem, 7vw, 5.25rem) 0 clamp(3.5rem, 7vw, 6rem);
}

/* Sits above the eyebrow. Small and low-contrast on purpose: it is wayfinding,
   and it must not compete with the display heading directly beneath it. */
.article__breadcrumb {
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: rgba(111, 120, 129, 0.7);
}

.article__breadcrumb a {
  color: rgba(111, 120, 129, 0.9);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.18em;
}

.article__breadcrumb a:hover {
  color: var(--primary);
}

.article__breadcrumb span[aria-hidden] {
  margin: 0 0.3rem;
  opacity: 0.55;
}

.eyebrow {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(111, 120, 129, 0.85);
}

.article h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.7rem, 8vw, 5.6rem);
  line-height: 0.96;
  color: var(--ink);
  margin: 0.75rem 0 0;
  text-wrap: balance;
}

.article__meta {
  margin: 1.1rem 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(111, 120, 129, 0.72);
}

/* Byline. Deliberately not uppercase like .article__meta above it: a name is
   read rather than scanned, and letterspaced small caps make one harder to
   parse, not easier. */
.article__byline {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(60, 72, 92, 0.72);
}

.article__byline a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.18em;
}

.article__byline a:hover {
  text-decoration-thickness: 1.5px;
}

/* On the hub the byline follows the standfirst rather than a meta line, so it
   needs the wider gap that separates it from body copy above. */
.article--library .article__byline {
  margin-top: 1.4rem;
  font-size: 0.86rem;
}

/* --- /about ---------------------------------------------------------------- */
.about__person {
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px solid var(--rule-soft);
}

.about__credential {
  margin: 0.4rem 0 1.3rem;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--body-muted);
}

.about__links {
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.83rem;
  word-break: break-word;
}

.about__links li {
  margin-top: 0.4rem;
}

.article__standfirst {
  max-width: var(--measure);
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  font-size: clamp(1.02rem, 2.1vw, 1.16rem);
  line-height: 1.7;
  color: rgba(60, 72, 92, 0.92);
}

/* ─── Body typography ──────────────────────────────────────────────────────── */
.article section {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  border-top: 0.5px solid var(--rule);
  padding-top: clamp(1.2rem, 2.4vw, 1.55rem);
}

.article h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.65rem, 3.6vw, 2.15rem);
  line-height: 1.16;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.article h3 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.article p,
.article li {
  font-size: clamp(0.93rem, 1.7vw, 0.99rem);
  line-height: 1.78;
  color: var(--body);
}

.article p {
  max-width: var(--measure);
  margin: 0.85rem 0 0;
}

.article ul,
.article ol {
  max-width: var(--measure);
  margin: 0.9rem 0 0;
  padding-left: 1.15rem;
}
.article li {
  margin-top: 0.5rem;
}

.article a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.18em;
}
.article a:hover {
  text-decoration-thickness: 1.5px;
}

.article strong {
  font-weight: 600;
  color: rgba(48, 60, 82, 0.95);
}

/* ─── Data table ───────────────────────────────────────────────────────────── */
/* The caption lives outside the scroll container so it stays readable at mobile
   widths; only the table itself scrolls sideways. */
.table-figure {
  margin: 1.5rem 0 0;
}

.table-scroll {
  overflow-x: auto;
  border: 0.5px solid var(--rule);
  background: #fff;
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.table-figure figcaption {
  padding: 0.85rem 0 0;
  max-width: var(--measure);
  font-size: 0.78rem;
  line-height: 1.62;
  color: var(--body-muted);
}

th,
td {
  padding: 0.78rem 1rem;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.5;
  border-bottom: 0.5px solid var(--rule-soft);
  vertical-align: baseline;
}

thead th {
  background: var(--wash);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
}

tbody th {
  font-weight: 600;
  color: rgba(48, 60, 82, 0.95);
  white-space: nowrap;
}

td {
  color: var(--body);
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.pass {
  font-weight: 600;
  color: #2f6b4f;
  white-space: nowrap;
}

/* ─── Key points ───────────────────────────────────────────────────────────── */
/* Sits directly under the standfirst. Deliberately self-contained sentences:
   this is the block AI answers tend to quote. */
.key-points {
  max-width: var(--measure);
  margin-top: clamp(1.8rem, 3.5vw, 2.4rem);
  padding: clamp(1.1rem, 2.6vw, 1.5rem);
  border: 0.5px solid var(--rule);
  background: #fff;
}
.key-points h2 {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.key-points ul {
  margin-top: 0.85rem;
  padding-left: 1.05rem;
}
.key-points li {
  font-size: 0.9rem;
  line-height: 1.68;
}

/* ─── Disclaimer ───────────────────────────────────────────────────────────── */
.disclaimer {
  max-width: var(--measure);
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: 1.2rem;
  border-top: 0.5px solid var(--rule);
  font-size: 0.78rem;
  line-height: 1.68;
  color: rgba(111, 120, 129, 0.92);
}

/* ─── Callout ──────────────────────────────────────────────────────────────── */
.callout {
  max-width: var(--measure);
  margin-top: 1.5rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  background: rgba(214, 228, 235, 0.3);
  border-left: 2px solid var(--primary);
}
.callout > :first-child {
  margin-top: 0;
}
.callout p {
  font-size: 0.9rem;
}

/* ─── Key-value figures ────────────────────────────────────────────────────── */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin-top: 1.5rem;
  border: 0.5px solid var(--rule);
  background: #fff;
}
.specs div {
  padding: 1rem 1.1rem;
  border-right: 0.5px solid var(--rule-soft);
  border-bottom: 0.5px solid var(--rule-soft);
}
.specs dt {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(111, 120, 129, 0.9);
}
.specs dd {
  margin: 0.45rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ink);
}

/* ─── Downloads / buttons ──────────────────────────────────────────────────── */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.btn {
  display: inline-block;
  padding: 0.82rem 1.4rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn--solid {
  background: var(--primary);
  color: #fff;
}
.btn--solid:hover {
  background: #43589a;
}
.btn--ghost {
  border: 0.5px solid var(--rule);
  color: var(--primary);
}
.btn--ghost:hover {
  background: rgba(214, 228, 235, 0.35);
}
/* `.article a` is more specific than a bare `.btn--*`, so the button colours
   have to be scoped the same way this text-decoration reset already is.
   Without them the solid button paints primary text on a primary field and
   reads as an empty blue block. */
.article .btn {
  text-decoration: none;
}
.article .btn--solid {
  color: #fff;
}
.article .btn--ghost {
  color: var(--primary);
}

/* ─── References ───────────────────────────────────────────────────────────── */
.references ol {
  max-width: none;
  padding-left: 1.4rem;
}
.references li {
  font-size: 0.83rem;
  line-height: 1.62;
  color: var(--body-muted);
  margin-top: 0.7rem;
}
.references a {
  word-break: break-word;
}

.footnote {
  max-width: var(--measure);
  margin-top: 1.3rem;
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(111, 120, 129, 0.9);
}

/* ─── Related reading ──────────────────────────────────────────────────────── */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.related a {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 0.5px solid var(--rule);
  background: #fff;
  text-decoration: none;
}
.related a:hover {
  background: rgba(214, 228, 235, 0.28);
}
.related span {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--ink);
}
.related small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--body-muted);
}

/* ─── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--primary);
  color: rgba(214, 228, 235, 0.55);
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3rem);
}
.site-footer__inner {
  width: var(--gutter);
  margin: 0 auto;
}
.site-footer img {
  height: 30px;
  width: auto;
  display: block;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.6rem;
}
.site-footer a {
  font-size: 0.8rem;
  color: rgba(214, 228, 235, 0.6);
  text-decoration: none;
}
.site-footer a:hover {
  color: rgba(214, 228, 235, 0.95);
}
.site-footer hr {
  border: 0;
  height: 0.5px;
  background: rgba(214, 228, 235, 0.12);
  margin: 2rem 0;
}
.site-footer p {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(214, 228, 235, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Library index ─────────────────────────────────────────────────────────
   The /learn hub. A three-up card grid, squared corners and hairline rules to
   match the store. Each card carries a topic label, title and a sentence that
   has to stand on its own, since this is the page a crawler reads to decide
   what the library is about. Cards keep a uniform height so the grid reads as
   a shelf rather than a ragged list.
   ────────────────────────────────────────────────────────────────────────── */

/* The card grid wants more room than the 68ch reading measure the articles
   use, so the hub widens its container. */
.article--library {
  width: min(100% - 2rem, 1180px);
}

/* ─── Search ───────────────────────────────────────────────────────────────
   Filtering is a JS enhancement layered over markup that is already complete,
   so the control stays hidden until the script confirms it works. Every card
   is in the HTML either way. */
.library-tools {
  display: none;
  margin: clamp(2.4rem, 5vw, 3.25rem) 0 0;
}
html.js .library-tools {
  display: block;
}

.library-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 0.5px solid var(--rule);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.library-search:focus-within {
  border-color: rgba(78, 102, 172, 0.55);
  box-shadow: inset 0 0 0 0.5px rgba(78, 102, 172, 0.45);
}
.library-search__icon {
  position: absolute;
  left: clamp(0.95rem, 2vw, 1.2rem);
  width: 16px;
  height: 16px;
  color: rgba(111, 120, 129, 0.75);
  pointer-events: none;
}
.library-search input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 1.05rem 3rem 1.05rem calc(clamp(0.95rem, 2vw, 1.2rem) + 16px + 0.8rem);
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.library-search input::placeholder {
  color: rgba(111, 120, 129, 0.8);
}
.library-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.library-search input:focus {
  outline: none;
}
.library-search__clear {
  position: absolute;
  right: 0.55rem;
  display: none;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: 0;
  color: rgba(111, 120, 129, 0.85);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.library-search__clear:hover {
  color: var(--primary);
}
.library-search.has-query .library-search__clear {
  display: block;
}

.library-status {
  margin: 0.85rem 0 0;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(111, 120, 129, 0.85);
}

/* ─── Card grid ───────────────────────────────────────────────────────────── */
/* Scoped under `.article` to outrank `.article ul`, which styles prose lists
   with bullets, an indent and a 68ch measure. This is a grid of destinations,
   so it drops all three. */
.article .library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  max-width: none;
  margin: clamp(1.6rem, 3vw, 2rem) 0 0;
  padding-left: 0;
  list-style: none;
}

.article .library__item {
  margin-top: 0;
  display: flex;
}
.library__item[hidden] {
  display: none;
}

.library__item a {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 17rem;
  padding: clamp(1.35rem, 2.6vw, 1.7rem);
  background: #fff;
  border: 0.5px solid var(--rule);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.library__item a:hover,
.library__item a:focus-visible {
  background: var(--wash);
  border-color: rgba(78, 102, 172, 0.45);
}

.library__topic {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(111, 120, 129, 0.85);
}

.library__title {
  margin-top: 0.85rem;
  font-family: var(--serif);
  font-size: clamp(1.32rem, 2.1vw, 1.58rem);
  font-weight: 400;
  line-height: 1.16;
  color: var(--ink);
  text-wrap: balance;
}

/* Clamped so a long blurb cannot stretch one card past its neighbours. */
.library__blurb {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--body-muted);
}

.library__more {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.library__more::after {
  content: '\2192';
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 160ms ease;
}
.library__item a:hover .library__more::after,
.library__item a:focus-visible .library__more::after {
  transform: translateX(3px);
}

/* Shown only when a search matches nothing. */
.library-empty {
  margin: clamp(1.6rem, 3vw, 2rem) 0 0;
  padding: clamp(2rem, 5vw, 3rem);
  background: #fff;
  border: 0.5px solid var(--rule);
  text-align: center;
}
.library-empty p {
  max-width: none;
  margin: 0;
  color: var(--body-muted);
}
.library-empty[hidden] {
  display: none;
}

@media (max-width: 1000px) {
  .article .library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .article .library {
    grid-template-columns: minmax(0, 1fr);
  }
  .library__item a {
    min-height: 0;
  }
  /* One card per row, so heights no longer need to agree and the blurb can
     run to its natural end rather than being cut mid-sentence. */
  .library__blurb {
    display: block;
    overflow: visible;
  }
  /* 16px keeps iOS Safari from zooming the page when the field takes focus. */
  .library-search input {
    font-size: 16px;
  }
}

/* ─── Plain-English layer ──────────────────────────────────────────────────────
   Every article carries two versions at one URL. The plain layer is what loads;
   the full evidence review sits below it inside a <details>, closed by default.

   Both ship in the HTML source, so the technical article stays fully available
   to crawlers and to AI retrieval regardless of the disclosure state. Collapsing
   it shortens the page a reader sees, not the page a crawler reads.
   ────────────────────────────────────────────────────────────────────────── */
.plain {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

/* The one sentence a skimmer reads and an AI answer is most likely to lift.
   Set at standfirst weight so it reads as the article's opening, not a callout. */
.plain__answer {
  max-width: var(--measure);
  margin: 0;
  padding-left: clamp(0.9rem, 2vw, 1.2rem);
  border-left: 2px solid var(--primary);
  font-size: clamp(1.08rem, 2.3vw, 1.28rem);
  line-height: 1.62;
  color: rgba(60, 72, 92, 0.94);
}

/* Lighter than .article section: no rule above, tighter rhythm, smaller heads.
   The plain layer should read as one continuous short piece rather than as a
   set of chaptered sections the way the evidence review does. */
.article .plain__section {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 0;
  padding-top: 0;
}

.article .plain__section h2 {
  font-size: clamp(1.22rem, 2.5vw, 1.46rem);
  line-height: 1.24;
}

.plain__takeaways {
  max-width: var(--measure);
  margin-top: clamp(2rem, 4vw, 2.6rem);
  padding: clamp(1.1rem, 2.6vw, 1.5rem);
  border: 0.5px solid var(--rule);
  background: var(--wash);
}
.article .plain__takeaways h2 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.plain__takeaways ul {
  margin-top: 0.85rem;
  padding-left: 1.05rem;
}
.plain__takeaways li {
  font-size: 0.9rem;
  line-height: 1.68;
}

/* ─── The full evidence review, behind a disclosure ────────────────────────── */
/* Width is left to the elements inside, which carry the same max-widths they do
   when the review is the entire page. Only the rule spans the full column, to
   match the rules that separate sections elsewhere in an article. */
.deep {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  border-top: 0.5px solid var(--rule);
}

.deep > summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  max-width: var(--measure);
  padding: clamp(1.1rem, 2.4vw, 1.4rem) 0;
  cursor: pointer;
  list-style: none;
  color: var(--primary);
}
.deep > summary::-webkit-details-marker {
  display: none;
}
.deep > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* A drawn glyph rather than the native triangle, which no browser renders in
   a way that matches the rest of the page. Squared, in keeping with the app. */
.deep__glyph {
  position: relative;
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  border: 0.5px solid var(--rule);
  transform: translateY(0.2rem);
}
.deep__glyph::before,
.deep__glyph::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--primary);
  transform: translate(-50%, -50%);
}
.deep__glyph::before {
  width: 0.62rem;
  height: 1px;
}
.deep__glyph::after {
  width: 1px;
  height: 0.62rem;
  transition: opacity 0.15s ease;
}
.deep[open] .deep__glyph::after {
  opacity: 0;
}

.deep__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.deep__hint {
  display: block;
  margin-top: 0.42rem;
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--body-muted);
}
.deep > summary:hover .deep__label {
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

/* The review's own first section already carries a rule, so suppress the one
   the standfirst would otherwise butt against. */
.deep__body > .article__standfirst {
  margin-top: 0;
  padding-bottom: 0.6rem;
}

/* The review opens with its standfirst rather than a ruled section, so drop the
   top margin that would otherwise double the gap under the summary. */
.deep__body > .key-points {
  margin-top: clamp(1.4rem, 3vw, 1.9rem);
}