/* Deku's Wisdom — base stylesheet.
 *
 * Palette is lifted straight from the mascot art so the site and the character
 * read as one object: honey wood browns, cream paper, one sage-green accent
 * (the sprout) carrying every link and interactive state.
 */

:root {
  --cream: #f5f0e1;
  --cream-deep: #ece4d0;
  --paper: #fffdf7;
  --ink: #2f2418;
  --ink-soft: #5d4c38;
  --ink-faint: #8a765c;
  --wood: #b6822f;
  --wood-deep: #4a3220;
  --sprout: #5f8a52;
  --sprout-deep: #3f6136;
  --rule: #ded3ba;

  --measure: 68ch;
  --shell: 1080px;
  --radius: 10px;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --verdict-red: #8c2f1b;    --verdict-red-bg: #f6e6e1;
  --verdict-amber: #7a4d12;  --verdict-amber-bg: #f3ead6;
  --verdict-blue: #35506b;   --verdict-blue-bg: #e5ecf2;
  --verdict-green-bg: #e7eede;
  --tier-primary: #b9c9a8;

  color-scheme: light dark;
}

/* Dark mode follows the OS setting; the audience expects it. Same wood-and-sprout
   palette, inverted: paper becomes the dark card, ink becomes cream. Every colour
   on the site is a token, so this block is the whole implementation — a new
   hard-coded hex anywhere below is a light-only bug. */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1d1811;
    --cream-deep: #272016;
    --paper: #2a2219;
    --ink: #efe6d3;
    --ink-soft: #c9b99d;
    --ink-faint: #9c8a6c;
    --wood: #d4a04d;
    --wood-deep: #e9d7b3;
    --sprout: #8db97e;
    --sprout-deep: #a9d19b;
    --rule: #463a2a;

    --verdict-red: #f0a48e;    --verdict-red-bg: #4a2419;
    --verdict-amber: #e6b978;  --verdict-amber-bg: #43301a;
    --verdict-blue: #a7c3e0;   --verdict-blue-bg: #223243;
    --verdict-green-bg: #2b3a26;
    --tier-primary: #5c7a4f;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: var(--sprout-deep); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }

:focus-visible { outline: 3px solid var(--sprout); outline-offset: 2px; }

/* ---------- shell ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark { width: 40px; height: 40px; }
.brand-name { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }

.site-nav { display: flex; gap: 1.25rem; font-family: var(--sans); font-size: 0.95rem; }

main { max-width: var(--shell); margin: 0 auto; padding: 2rem 1.25rem 3rem; }

.prose { max-width: var(--measure); }
.prose.center { margin-inline: auto; text-align: center; }

h1, h2, h3 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.7rem); margin: 0.2em 0 0.4em; }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem); margin: 2.2rem 0 0.7rem; }

.standfirst { font-size: 1.15rem; color: var(--ink-soft); }
.meta, .source-note, .count { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); }

.section { margin-top: 2.6rem; }

/* ---------- breadcrumbs ---------- */

.breadcrumbs {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.breadcrumbs a { color: var(--ink-soft); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1rem;
}
.hero h1 { margin-top: 0; }
.hero-copy p { max-width: 46ch; color: var(--ink-soft); }
.hero-art { border-radius: var(--radius); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

/* The hidden attribute must always win. Without this, any element that also
   carries a class with an explicit display (.button, .share-link…) stayed
   VISIBLE with hidden="" set — found live when the archive replay tried to
   hide the share button and the browser overrode it. */
[hidden] { display: none !important; }

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--sprout-deep);
  color: var(--paper);
  text-decoration: none;
}
.button:hover { background: var(--ink); color: var(--paper); }
.button-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.button-quiet:hover { background: var(--cream-deep); color: var(--ink); }

/* ---------- quotes ---------- */

.quote-list { display: grid; gap: 1.4rem; margin-top: 1.4rem; }

.quote-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}

.quote-card blockquote { margin: 0; }
.quote-card blockquote p {
  margin: 0 0 0.7rem;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink);
}
.quote-card cite { font-style: normal; font-family: var(--sans); font-size: 0.9rem; }
.quote-card footer { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; }

.commentary {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.commentary p { margin: 0; }

.theme-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
}
.theme-chips a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink-soft);
  text-decoration: none;
}
.theme-chips a:hover { background: var(--sprout); color: var(--paper); }

/* Homepage teasers. The quote is the hero; the lens promise is the affordance and
   sits where a call to action belongs, so the card reads line-first. No commentary
   here by design — see app/views/pages/_quote_teaser.html.erb. */

.teaser-grid {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.quote-teaser a {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 0.55rem;
  height: 100%;
  padding: 1.3rem 1.4rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.quote-teaser a:hover,
.quote-teaser a:focus-visible { border-color: var(--sprout); }

.quote-teaser blockquote {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.35;
  color: var(--ink);
}

.teaser-cite {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.teaser-promise {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--sprout-deep);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.teaser-arrow { padding-left: 0.35em; }
.quote-teaser a:hover .teaser-arrow { padding-left: 0.6em; }
@media (prefers-reduced-motion: no-preference) {
  .teaser-arrow { transition: padding-left 120ms ease-out; }
}

.section-lead { color: var(--ink-soft); max-width: var(--measure); margin: 0.3rem 0 0; }
.section-more { font-family: var(--sans); font-size: 0.9rem; margin: 1.1rem 0 0; }

.spoiler-shield summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.spoiler-shield[open] summary { margin-bottom: 1rem; }

/* ---------- definition card (meaning pages) ---------- */

.definition-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--sprout);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
  display: grid;
  gap: 0.9rem;
}
.definition-card > div { display: grid; gap: 0.15rem; }
.definition-card dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.definition-card dd { margin: 0; }
.romaji { color: var(--ink-faint); }

.body-copy p { max-width: var(--measure); }

.character-intro {
  border-left: 3px solid var(--sprout);
  padding-left: 1rem;
  margin: 1.2rem 0 1.6rem;
  color: var(--ink-soft);
}

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 0.8rem 0;
}
.faq summary { cursor: pointer; font-weight: 700; }

/* ---------- lists & cards ---------- */

.link-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.link-list.columns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card-grid {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card-grid a {
  display: grid;
  gap: 0.3rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.card-grid a:hover { border-color: var(--sprout); }
.card-kanji { font-size: 1.6rem; color: var(--wood); }
.card-title { font-weight: 700; }
.card-blurb { font-size: 0.9rem; color: var(--ink-soft); }

.art-404 { margin: 0 auto; }

/* ---------- footer ---------- */

.site-footer {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: var(--sans);
}
.footer-mark { opacity: 0.55; }
.footer-nav { display: flex; gap: 1.1rem; justify-content: center; margin: 0.6rem 0 1rem; font-size: 0.9rem; }
.disclaimer {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.copyright { font-size: 0.78rem; color: var(--ink-faint); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  main { padding: 1.4rem 1rem 2.4rem; }
  .site-header { padding: 0.9rem 1rem; }
  .quote-card { padding: 1.1rem 1.1rem; }
  .link-list.columns { grid-template-columns: 1fr; }
}

.spoiler-notice {
  background: var(--cream-deep);
  border-left: 3px solid var(--wood);
  padding: 0.7rem 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}

.body-copy table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; }
.body-copy th, .body-copy td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); }

/* Series run facts — anime vs manga dates plus alternate titles. */
.run-facts {
  display: grid;
  gap: 0.55rem;
  margin: 1.3rem 0 1.8rem;
  padding: 1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.92rem;
}
.run-facts > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; }
.run-facts dt { color: var(--ink-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; padding-top: 0.15rem; }
.run-facts dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 480px) { .run-facts > div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* Pinterest save link. A plain anchor rather than their JS widget, so no
   third-party script loads for the sake of a button. */
.pin-save { margin: 0.9rem 0 0; }
.share-row { margin: 0.9rem 0 0; display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: baseline; }
.share-link {
  font-size: 0.82rem; color: var(--ink-soft); background: none; border: none;
  padding: 0; cursor: pointer; font-family: inherit;
  border-bottom: 1px solid var(--rule); text-decoration: none;
}
.share-link:hover { color: var(--sprout-deep); border-bottom-color: var(--sprout); }
.pin-link {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.pin-link:hover { color: var(--sprout-deep); border-bottom-color: var(--sprout); }

/* Affiliate block. Deliberately below the quotes: the commentary is the product,
   the link is a convenience, and the ordering should say so. */
.buy-block { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.buy-block p { color: var(--ink-soft); max-width: var(--measure); }
.affiliate-disclosure {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  max-width: var(--measure);
}

/* 404. A page that only apologises wastes the visit, so it carries routes back in. */
.not-found .art-404 { margin: 0 auto 0.5rem; }
.not-found-links {
  list-style: none;
  padding: 0;
  margin: 1.8rem auto;
  max-width: 34rem;
  display: grid;
  gap: 0.9rem;
  text-align: left;
}
.not-found-links li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
}
.not-found-links a { font-weight: 700; }
.not-found-links span {
  display: block;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}
.not-found .quote-list { text-align: left; }

/* Quotele + quizzes */
.quotele-quote p { font-size: 1.35rem; line-height: 1.5; }
.quotele-options { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1rem 0; }
.quotele-option { font-size: 0.85rem; }
.quotele-option:disabled { opacity: 0.35; cursor: default; }
.quotele-result, .quiz-result { margin-top: 1.2rem; }
.quiz-question { border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.2rem; margin: 1rem 0; }
.quiz-question legend { font-weight: 600; padding: 0 0.4rem; }

/* ---------- fact-check database + article verdict boxes ----------
   One visual language for both surfaces, because they carry the same text:
   the ~40-word verdict renders on the database page and at the top of the
   full article it belongs to. Badge hues run from red (invented) to green
   (true), muted to sit inside the cream palette rather than shout over it. */
.verdict-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wood);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  font-size: 0.98rem;
}
.verdict-box p { margin: 0.5rem 0 0; }
.verdict-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  vertical-align: middle;
}
.verdict-fabricated       { color: var(--verdict-red); background: var(--verdict-red-bg); }
.verdict-borrowed         { color: var(--verdict-amber); background: var(--verdict-amber-bg); }
.verdict-misattributed    { color: var(--verdict-amber); background: var(--verdict-amber-bg); }
.verdict-translation-split{ color: var(--verdict-blue); background: var(--verdict-blue-bg); }
.verdict-dub-original     { color: var(--verdict-blue); background: var(--verdict-blue-bg); }
.verdict-true             { color: var(--sprout-deep); background: var(--verdict-green-bg); }

.factcheck-group h2 { margin-top: 2.2rem; }
.factcheck-row blockquote { margin: 0 0 0.8rem; }

/* ---------- Quotele stats + archive ----------
   Client-rendered from localStorage, so the server ships only containers. */
.quotele-stats-body { margin-top: 0.6rem; }
.stat-grid { display: flex; gap: 1.4rem; justify-content: center; margin: 0.8rem 0 1.2rem; }
.stat-cell { display: grid; gap: 0.1rem; }
.stat-num { font-size: 1.5rem; font-weight: 700; color: var(--wood-deep); }
.stat-label {
  font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint);
}
.stat-row { display: grid; grid-template-columns: 5rem 1fr 2rem; align-items: center; gap: 0.7rem; margin: 0.35rem auto; max-width: 26rem; }
.stat-bar {
  display: block; height: 0.85rem; background: var(--cream-deep);
  border-radius: 4px; overflow: hidden;
}
.stat-bar span { display: block; height: 100%; background: var(--sprout); border-radius: 4px; }
.stat-row .stat-count { font-family: var(--sans); font-size: 0.8rem; text-align: right; }
.quotele-archive-list { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; margin-top: 0.8rem; max-height: 16rem; overflow-y: auto; padding: 0.2rem; }
.archive-item { min-width: 3.6rem; }
.archive-won { border-color: var(--sprout); color: var(--sprout-deep); }
.archive-lost { opacity: 0.55; }

/* ---------- public source badges ----------
   The verification claim, made visible and clickable on every quote card.
   Same pill shape as the verdict badges so "verified" reads as one system
   across the site rather than two unrelated decorations. */
.source-badges { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin-left: 0.5rem; vertical-align: middle; }
.source-badge {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
}
a.source-badge:hover { border-color: var(--sprout); color: var(--sprout-deep); }
.tier-primary { border-color: var(--tier-primary); }
.tier-double {
  color: var(--sprout-deep);
  border-color: var(--sprout);
  background: var(--verdict-green-bg);
}

/* ---------- anime calendar ----------
   Reuses .quote-card; the date and kind lead so the eye can scan a month. */
.calendar-month h2 { margin-top: 2.2rem; }
.calendar-month .event-row + .event-row { margin-top: 1rem; }
.event-date { margin: 0 0 0.3rem; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; }
.event-date time { font-weight: 600; color: var(--ink); }
.event-kind { border: 1px solid var(--rule); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.78rem; }
.event-title { margin: 0 0 0.5rem; font-size: 1.15rem; }
.event-description { margin: 0 0 0.6rem; color: var(--ink-soft); }
.calendar-recent .event-row { opacity: 0.85; }

/* ---------- embed codes ---------- */
.embed { margin-top: 0.8rem; padding: 0.8rem 0.9rem; border: 1px dashed var(--rule); border-radius: 8px; font-family: var(--sans); font-size: 0.85rem; }
.embed label { display: block; margin-bottom: 0.4rem; color: var(--ink-soft); }
.embed-code { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1.4; padding: 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); resize: vertical; }
.embed .share-link { margin-top: 0.5rem; }