/* ═══════════════ Theme layer: the "WikiEtymology Homepage" design ═══════════════
   Loaded after the component files. It turns the old espresso bar into the design's
   light, hairline header and footer, sets Noto Serif headings at regular weight, and
   makes buttons navy with a copper hover. */

/* Type: Noto Serif at regular weight with tight tracking, as in the design */
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.01em; }
h1 { font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; }
.prose h2, .article-body h2 { letter-spacing: -0.01em; }
strong, b { font-weight: 600; }

/* Buttons: navy, copper on hover, sharp corners */
.btn { background: var(--accent); color: var(--marble); border-radius: var(--r); }
.btn:hover { background: var(--brand); color: #fff; }
[data-theme="dark"] .btn { color: #101A1E; }
[data-theme="dark"] .btn:hover { color: #101A1E; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ── Header ── */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.brand__mark {
  width: 30px; height: 30px;
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  box-shadow: none;
  font-weight: 400;
  font-size: 1.1rem;
}
.brand__wordmark { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.brand__wordmark em { color: inherit; font-style: normal; }
.brand__tagline { color: var(--faint); letter-spacing: .1em; }

.primary-nav a { color: var(--muted); font-weight: 600; font-size: 0.875rem; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a::after { background: var(--brand); height: 1px; }
.primary-nav a.nav-cta {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  color: var(--ink);
}
.primary-nav a.nav-cta::after { display: none; }
.primary-nav a.nav-cta:hover { background: var(--ink); color: var(--marble); text-decoration: none; }

.site-header .btn--sm { background: var(--accent); color: var(--marble); border-radius: var(--r); }
.site-header .btn--sm:hover { background: var(--brand); color: #fff; }
[data-theme="dark"] .site-header .btn--sm,
[data-theme="dark"] .site-header .btn--sm:hover { color: #101A1E; }

.mobile-nav { background: var(--paper); border-bottom: 1px solid var(--border); box-shadow: var(--sh-md); }
.mobile-nav a { color: var(--ink); }

/* ── Footer: paper-deep band with hairlines ── */
.site-footer {
  background: var(--stone);
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.site-footer__brand { color: var(--ink); font-weight: 700; }
.site-footer__brand em { color: inherit; }
.site-footer h3 { color: var(--faint); }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--brand); }
.site-footer p { color: var(--muted); font-family: var(--serif); }

/* ── Homepage details from the design ── */
.home-hero h1 { font-weight: 400; }
.home-hero h1 em { color: var(--brand); }
.home-search { border-radius: 0; }
.home-search button { background: var(--accent); color: var(--marble); }
.home-search button:hover { background: var(--brand); color: #fff; }
[data-theme="dark"] .home-search button, [data-theme="dark"] .home-search button:hover { color: #101A1E; }
.origin-row__name { font-weight: 400; }
.origin-row__glyph { color: var(--brand); font-family: var(--serif); }
.word-card h3 { font-weight: 400; }
.home-wotd h2 { font-weight: 400; }
.home-learn strong { font-weight: 400; }

/* Entry page: headword and answer card in the design's voice */
.article-hero h1 { font-weight: 400; }
.answer-card { border-radius: var(--r); border-left-color: var(--accent); }
.answer-card__definition { font-weight: 400; }
.prose p:first-of-type::first-letter { color: var(--brand); font-weight: 400; }
.myth-box--false .myth-box__stamp { color: var(--danger); }

/* Phones: keep the menu button on screen; Login and account links move into the menu */
@media (max-width: 640px) {
  .site-header__inner { gap: var(--sp-3); }
  .brand__tagline { display: none; }
  .brand__wordmark { font-size: 1.15rem; }
  .brand__mark { width: 26px; height: 26px; font-size: 0.95rem; }
  .site-header__actions { gap: 2px; }
  .site-header .btn--sm, .site-header .nav-dropdown { display: none; }
}

/* ═══════════════ Compact heroes (November 2026) ═══════════════
   Every page used to stack 48px of hero padding, 32px below it and another 48-64px at
   the top of the content. Heroes are now about half that, so the first real content
   (answer card, word list, page text) shows without scrolling. */
.hero, .page-hero, .article-hero { padding: var(--sp-5) 0 var(--sp-5); }
.hero h1, .page-hero h1 { margin: 0 0 var(--sp-2); }
.hero__lede, .page-hero__lede { margin-bottom: 0; }
.hero .eyebrow, .page-hero .eyebrow, .article-hero .eyebrow { margin-bottom: var(--sp-2); }
.article-hero h1 { margin: 0 0 var(--sp-2); }
.article-hero__meta { padding-top: var(--sp-3); }

.article-layout { padding-top: var(--sp-5); }
.archive-layout { padding-top: var(--sp-5); }
.page-content { padding: var(--sp-6) 0 var(--sp-8); }
.breadcrumb-nav { padding: var(--sp-2) 0; }

/* Homepage hero: same composition, less air */
.home-hero__grid { padding-top: var(--sp-6); padding-bottom: var(--sp-6); gap: var(--sp-7); }
.home-hero h1 { margin: var(--sp-3) 0 var(--sp-3); }
.home-hero__copy { margin-bottom: var(--sp-5); }

@media (max-width: 860px) {
  .hero, .page-hero, .article-hero { padding: var(--sp-4) 0; }
  .article-layout, .archive-layout { padding-top: var(--sp-4); }
  .page-content { padding: var(--sp-5) 0 var(--sp-7); }
}
@media (max-width: 680px) {
  .home-hero__grid { padding-top: var(--sp-5); padding-bottom: var(--sp-5); gap: var(--sp-5); }
  .home-hero h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); margin: var(--sp-2) 0 var(--sp-3); }
  .home-hero__copy { margin-bottom: var(--sp-4); }
  .home-aside { padding-top: var(--sp-4); }
  .page-hero h1, .hero h1, .article-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .page-hero__lede, .hero__lede { font-size: var(--fs-base); }
  .article-hero__meta { gap: var(--sp-2) var(--sp-3); }
}

/* ═══════════════ Entry page: heading, summary, pronunciation and grammar ═══════════════ */
.entry-title { margin: 0 0 var(--sp-3); line-height: 1.05; }
.entry-title__lead {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.entry-title__word {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.article-hero .eyebrow { margin-bottom: var(--sp-3); }

.answer-card__label {
  margin: 0 0 var(--sp-3);
  font: 700 var(--fs-xs)/1 var(--sans);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand);
}

.word-profile { margin: 0 0 var(--sp-6); }
.word-profile__title {
  margin: 0 0 var(--sp-3);
  font: 700 var(--fs-xs)/1 var(--sans);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--faint);
}
.word-profile__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.word-profile__list > div { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; }
.word-profile__list > div + div { padding-left: var(--sp-4); border-left: 1px solid var(--border-soft); }
.word-profile__list dt {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--faint);
}
.word-profile__list dd { margin: 0; color: var(--ink); font-size: var(--fs-md); }
.word-profile__say { grid-column: span 2; }
.word-profile__say dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.word-profile .ipa { font-family: var(--serif); font-size: var(--fs-xl); color: var(--ink); }
.word-profile .respelling { font-weight: 700; letter-spacing: var(--ls-wide); color: var(--accent); }
.word-profile__listen {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--ink); border-radius: var(--r);
  background: transparent; color: var(--ink);
  font: 600 var(--fs-sm)/1 var(--sans);
  cursor: pointer;
}
.word-profile__listen:hover { background: var(--ink); color: var(--marble); transform: none; }
.facts-section .word-profile__title { margin-top: 0; }

@media (max-width: 640px) {
  .word-profile__list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); }
  .word-profile__say { grid-column: 1 / -1; }
  .word-profile__list > div, .word-profile__list > div + div { padding: var(--sp-3) 0; border-left: 0; }
  .word-profile__list > div + div { border-top: 1px solid var(--border-soft); }
  .entry-title__word { font-size: clamp(2.25rem, 11vw, 3rem); }
}

/* Summary questions and panel labels are not story section headings: no rule, no caps */
.article-body .answer-card__q {
  display: block;
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.article-body .answer-card__q:first-of-type { margin-top: 0; }
.article-body .answer-card__q::after,
.article-body .word-profile__title::after { content: none; display: none; }
.article-body .word-profile__title {
  display: block;
  margin: 0 0 var(--sp-3);
  font: 700 var(--fs-xs)/1 var(--sans);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--faint);
}

/* Etymology at a glance: hairline cells like the pronunciation panel (no coloured gaps) */
.facts {
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.facts > div {
  background: transparent;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--border-soft);
}
.facts dt { color: var(--faint); font-weight: 600; }
.facts dd { font-weight: 400; color: var(--ink); }

/* ═══════════════ Entry heading: the word and its details on one line ═══════════════
   Desktop: details sit to the right of the word, on its baseline. Phones: they wrap below. */
.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
}
.entry-head .entry-title { margin: 0; }
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 0.55rem;               /* lines the details up with the word's baseline */
  font-size: var(--fs-md);
  color: var(--muted);
}
.entry-meta__item + .entry-meta__item::before,
.entry-meta__listen + .entry-meta__item::before {
  content: "·";
  margin-right: var(--sp-3);
  color: var(--faint);
}
.entry-meta .ipa { font-family: var(--serif); font-size: var(--fs-lg); color: var(--muted); }
.entry-meta .respelling { font-weight: 600; letter-spacing: var(--ls-wide); color: var(--muted); }
.entry-meta__listen {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
}
.entry-meta__listen:hover { border-color: var(--ink); background: var(--paper); transform: none; }

.article-footer__policy { flex-basis: 100%; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.article-footer__policy a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .entry-head { flex-direction: column; align-items: flex-start; }
  .entry-meta { margin: 0; font-size: var(--fs-base); }
}

/* Long titles or links in sources wrap instead of widening the page */
.sources li, .prose a, .link-list a { overflow-wrap: anywhere; }

/* ═══════════════ Usage trend (Google Books Ngram) ═══════════════ */
.trend__findings { margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.trend__findings li { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); position: relative; color: var(--body); }
.trend__findings li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.trend__findings .trend__note { color: var(--muted); }
.trend__findings .trend__note::before { background: var(--border); }
.trend-chart { position: relative; margin: 0 0 var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--paper); color: var(--brand); }
.trend-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-chart__grid { stroke: var(--border-soft); stroke-width: 1; }
.trend-chart__label { fill: var(--faint); font: 500 11px var(--sans); }
.trend-chart__note { fill: var(--muted); font: 600 11px var(--sans); }
.trend-chart__line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-chart__area { stroke: none; }
.trend-chart__sparse { fill: var(--border-soft); opacity: .45; }
.trend-chart__dot { fill: currentColor; stroke: var(--paper); stroke-width: 2; }
.trend-chart__marker { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 4; }
.trend-chart__hit { cursor: crosshair; }
.trend-chart__cursor { stroke: var(--ink); stroke-width: 1; opacity: .35; }
.trend-chart__tip {
  position: absolute; top: var(--sp-3); pointer-events: none;
  padding: .35rem .6rem; border-radius: var(--r-sm); background: var(--ink); color: var(--marble);
  font: 600 var(--fs-xs)/1.3 var(--sans); white-space: nowrap; transform: translateX(-50%);
}
.trend-chart__caption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.trend-chart__caption a { color: var(--brand); }
.trend__table summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.trend__table table { margin-top: var(--sp-3); border-collapse: collapse; font-size: var(--fs-sm); }
.trend__table th, .trend__table td { padding: .3rem 1.25rem .3rem 0; border-bottom: 1px solid var(--border-soft); text-align: left; }
.trend__table th { color: var(--faint); font-weight: 600; }
@media (max-width: 640px) {
  .trend-chart { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
  .trend-chart__label, .trend-chart__note { font-size: 21px; }
}