:root {
--cream: #f5f0e1;
--cream-deep: #ece4d0;
--paper: #fffdf7;
--ink: #2f2418;
--ink-soft: #5d4c38;
--ink-faint: #7b6952;
--wood: #b6822f;
--wood-deep: #4a3220;
--sprout: #5f8a52;
--sprout-deep: #3f6136;
--rule: #ded3ba;
--rule-strong: #928a7a;
--text-3xs: 0.75rem;
--text-2xs: 0.875rem;
--text-sm: 1rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.25rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--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;
}
@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;
--rule-strong: #816b4d;
--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: var(--text-sm);
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: var(--space-2xs) var(--space-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }
:focus-visible { outline: 3px solid var(--sprout); outline-offset: 2px; }
.site-header {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
justify-content: space-between;
max-width: var(--shell);
margin: 0 auto;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--rule);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
text-decoration: none;
color: var(--ink);
}
.brand-mark { width: 40px; height: 40px; }
.brand-name { font-weight: 700; font-size: var(--text-md); letter-spacing: 0.01em; }
.site-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-md);
font-family: var(--sans);
font-size: var(--text-sm);
}
main { max-width: var(--shell); margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.prose { max-width: var(--measure); margin-inline: auto; }
.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: var(--space-xl) 0 var(--space-xs); }
.standfirst { font-size: var(--text-md); color: var(--ink-soft); }
.meta, .source-note, .count { font-family: var(--sans); font-size: var(--text-2xs); color: var(--ink-faint); }
.section { margin-top: var(--space-2xl); }
.breadcrumbs {
font-family: var(--sans);
font-size: var(--text-2xs);
color: var(--ink-faint);
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
}
.breadcrumbs a { color: var(--ink-soft); }
.hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--space-xl);
align-items: center;
margin-bottom: var(--space-sm);
}
.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: var(--space-xs); margin-top: var(--space-lg); }
[hidden] { display: none !important; }
details:not([open]) > *:not(summary) { display: none; }
.button {
display: inline-block;
font-family: var(--sans);
font-size: var(--text-sm);
padding: var(--space-2xs) var(--space-sm);
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); }
.quote-list { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
.quote-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: var(--space-lg) var(--space-lg);
}
.quote-card blockquote { margin: 0; }
.quote-card blockquote p {
margin: 0 0 var(--space-xs);
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: var(--text-2xs); }
.quote-card footer { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); align-items: baseline; }
.commentary {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
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: var(--space-2xs);
margin: var(--space-sm) 0 0;
padding: 0;
}
.theme-chips a {
display: inline-block;
font-family: var(--sans);
font-size: var(--text-3xs);
padding: var(--space-3xs) var(--space-2xs);
border-radius: 999px;
background: var(--cream-deep);
color: var(--ink-soft);
text-decoration: none;
}
.theme-chips a:hover { background: var(--sprout); color: var(--paper); }
.teaser-grid {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
display: grid;
gap: var(--space-sm);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.quote-teaser a {
display: grid;
grid-template-rows: 1fr auto auto;
gap: var(--space-2xs);
height: 100%;
padding: var(--space-md) var(--space-lg) var(--space-sm);
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);
}
.quote-teaser .teaser-spoiler {
font-family: var(--sans);
font-size: var(--text-sm);
font-style: italic;
color: var(--ink-faint);
}
.teaser-cite {
font-family: var(--sans);
font-size: var(--text-2xs);
color: var(--ink-faint);
}
.teaser-promise {
font-family: var(--sans);
font-size: var(--text-2xs);
color: var(--sprout-deep);
padding-top: var(--space-2xs);
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: var(--space-3xs) 0 0; }
.section-more { font-family: var(--sans); font-size: var(--text-2xs); margin: var(--space-sm) 0 0; }
.spoiler-shield summary {
cursor: pointer;
font-family: var(--sans);
font-size: var(--text-2xs);
color: var(--ink-faint);
}
.spoiler-shield[open] summary { margin-bottom: var(--space-sm); }
.definition-card {
background: var(--paper);
border: 1px solid var(--rule);
border-left: 4px solid var(--sprout);
border-radius: var(--radius);
padding: var(--space-md) var(--space-lg);
margin: var(--space-lg) 0;
display: grid;
gap: var(--space-sm);
}
.definition-card > div { display: grid; gap: var(--space-3xs); }
.definition-card dt {
font-family: var(--sans);
font-size: var(--text-3xs);
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: var(--space-sm);
margin: var(--space-md) 0 var(--space-lg);
color: var(--ink-soft);
}
.faq details {
border-bottom: 1px solid var(--rule);
padding: var(--space-xs) 0;
}
.faq summary { cursor: pointer; font-weight: 700; }
.link-list { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.link-list.columns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card-grid {
list-style: none;
margin: var(--space-sm) 0 0;
padding: 0;
display: grid;
gap: var(--space-sm);
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card-grid a {
display: grid;
gap: var(--space-3xs);
height: 100%;
padding: var(--space-sm) var(--space-md);
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: var(--text-xl); color: var(--wood); }
.card-title { font-weight: 700; }
.card-blurb { font-size: var(--text-2xs); color: var(--ink-soft); }
.art-404 { margin: 0 auto; }
.site-footer {
max-width: var(--shell);
margin: 0 auto;
padding: var(--space-xl) var(--space-md) var(--space-2xl);
border-top: 1px solid var(--rule);
text-align: center;
font-family: var(--sans);
}
.footer-mark { opacity: 0.55; }
.footer-nav { display: flex; gap: var(--space-sm); justify-content: center; margin: var(--space-2xs) 0 var(--space-sm); font-size: var(--text-2xs); }
.disclaimer {
max-width: 62ch;
margin: 0 auto;
font-size: var(--text-3xs);
line-height: 1.55;
color: var(--ink-faint);
}
.copyright { font-size: var(--text-3xs); color: var(--ink-faint); }
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; }
.hero-art { order: -1; }
}
@media (max-width: 480px) {
body { font-size: var(--text-sm); }
main { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
.site-header { padding: var(--space-sm) var(--space-sm); }
.quote-card { padding: var(--space-sm) var(--space-sm); }
.link-list.columns { grid-template-columns: 1fr; }
}
.spoiler-notice {
background: var(--cream-deep);
border-left: 3px solid var(--wood);
padding: var(--space-xs) var(--space-sm);
font-family: var(--sans);
font-size: var(--text-2xs);
}
.body-copy table { border-collapse: collapse; width: 100%; margin: var(--space-md) 0; }
.body-copy th, .body-copy td { text-align: left; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--rule); }
.run-facts {
display: grid;
gap: var(--space-2xs);
margin: var(--space-md) 0 var(--space-xl);
padding: var(--space-sm) var(--space-md);
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
font-family: var(--sans);
font-size: var(--text-2xs);
}
.run-facts > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-2xs); }
.run-facts dt { color: var(--ink-faint); font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: 0.07em; padding-top: var(--space-3xs); }
.run-facts dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 480px) { .run-facts > div { grid-template-columns: 1fr; gap: var(--space-3xs); } }
.pin-save { margin: var(--space-sm) 0 0; }
.stat-row, .count, .quotele-stats-body { font-variant-numeric: tabular-nums; }
.quote-index { margin: var(--space-md) 0 0; }
.quote-index-list {
margin: var(--space-xs) 0 0;
padding-left: var(--space-md);
display: grid;
gap: var(--space-3xs);
font-family: var(--sans);
font-size: var(--text-3xs);
color: var(--ink-soft);
}
.quote-index-list a { color: var(--ink-soft); }
.quote-index-list a:hover { color: var(--ink); }
.quote-index-spoiler { font-style: italic; color: var(--ink-faint); }
.more-guides { margin-top: var(--space-md); }
.more-guides[open] .link-list { margin-top: var(--space-xs); }
.share-disclosure { margin-top: var(--space-xs); }
.disclosure-summary {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--sans);
font-size: var(--text-3xs);
color: var(--ink-faint);
cursor: pointer;
list-style: none;
}
.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary::before {
content: "+";
display: inline-block;
width: 1em;
font-weight: 700;
}
.share-disclosure[open] .disclosure-summary::before { content: "\2212"; }
.disclosure-summary:hover { color: var(--sprout-deep); }
.share-row { margin: var(--space-sm) 0 0; display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: baseline; }
.share-link {
font-size: var(--text-2xs); color: var(--ink-soft); background: none; border: none;
padding: 0; cursor: pointer; font-family: inherit;
border-bottom: 1px solid var(--rule-strong); text-decoration: none;
}
.share-link:hover { color: var(--sprout-deep); border-bottom-color: var(--sprout); }
.pin-link {
font-family: var(--sans);
font-size: var(--text-3xs);
color: var(--ink-faint);
text-decoration: none;
border-bottom: 1px solid var(--rule-strong);
}
.pin-link:hover { color: var(--sprout-deep); border-bottom-color: var(--sprout); }
.buy-block { border-top: 1px solid var(--rule); padding-top: var(--space-lg); }
.buy-block p { color: var(--ink-soft); max-width: var(--measure); }
.affiliate-disclosure {
font-family: var(--sans);
font-size: var(--text-3xs);
color: var(--ink-faint);
max-width: var(--measure);
}
.not-found .art-404 { margin: 0 auto var(--space-2xs); }
.not-found-links {
list-style: none;
padding: 0;
margin: var(--space-xl) auto;
max-width: 34rem;
display: grid;
gap: var(--space-sm);
text-align: left;
}
.not-found-links li {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: var(--space-xs) var(--space-sm);
}
.not-found-links a { font-weight: 700; }
.not-found-links span {
display: block;
font-family: var(--sans);
font-size: var(--text-2xs);
color: var(--ink-faint);
margin-top: var(--space-3xs);
}
.not-found .quote-list { text-align: left; }
.quotele-quote p { font-size: var(--text-lg); line-height: 1.5; }
.quotele-options { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; margin: var(--space-sm) 0; }
.quotele-option {
font-size: var(--text-2xs);
min-height: 44px;
padding-inline: var(--space-sm);
}
.quotele-option:disabled { opacity: 0.35; cursor: default; }
.quotele-result, .quiz-result { margin-top: var(--space-md); }
.quiz-question { border: 1px solid var(--rule); border-radius: 8px; padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; }
.quiz-question legend { font-weight: 600; padding: 0 var(--space-2xs); }
.verdict-box {
background: var(--paper);
border: 1px solid var(--rule);
border-left: 3px solid var(--wood);
border-radius: var(--radius);
padding: var(--space-sm) var(--space-sm);
margin: var(--space-md) 0;
font-size: var(--text-sm);
}
.verdict-box p { margin: var(--space-2xs) 0 0; }
.verdict-badge {
display: inline-block;
font-family: var(--sans);
font-size: var(--text-3xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: var(--space-3xs) var(--space-2xs);
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); }
.needs-js { display: none; }
.js .needs-js { display: inline-block; visibility: hidden; }
.js .needs-js.ready { visibility: visible; }
.check-list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.check-list li { display: flex; gap: var(--space-2xs); align-items: baseline; flex-wrap: wrap; }
.check-list a { color: var(--ink); }
.factcheck-group h2 { margin-top: var(--space-xl); }
.factcheck-row blockquote { margin: 0 0 var(--space-xs); }
.quotele-stats-body { margin-top: var(--space-2xs); }
.stat-grid { display: flex; gap: var(--space-lg); justify-content: center; margin: var(--space-xs) 0 var(--space-md); }
.stat-cell { display: grid; gap: var(--space-3xs); }
.stat-num { font-size: var(--text-xl); font-weight: 700; color: var(--wood-deep); }
.stat-label {
font-family: var(--sans); font-size: var(--text-3xs); 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: var(--space-xs); margin: var(--space-2xs) 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: var(--text-3xs); text-align: right; }
.quotele-archive-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; margin-top: var(--space-xs); max-height: 16rem; overflow-y: auto; padding: var(--space-3xs); }
.archive-item { min-width: 3.6rem; }
.archive-won { border-color: var(--sprout); color: var(--sprout-deep); }
.archive-lost { opacity: 0.55; }
.source-badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-3xs); margin-left: var(--space-2xs); vertical-align: middle; }
.source-badge {
font-family: var(--sans);
font-size: var(--text-3xs);
font-weight: 600;
letter-spacing: 0.05em;
padding: var(--space-3xs) var(--space-2xs);
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);
}
.calendar-month h2 { margin-top: var(--space-xl); }
.calendar-month .event-row + .event-row { margin-top: var(--space-sm); }
.event-date { margin: 0 0 var(--space-3xs); font-family: var(--sans); font-size: var(--text-2xs); color: var(--ink-soft); display: flex; gap: var(--space-xs); 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: var(--space-3xs) var(--space-2xs); font-size: var(--text-3xs); }
.event-title { margin: 0 0 var(--space-2xs); font-size: var(--text-md); }
.event-description { margin: 0 0 var(--space-2xs); color: var(--ink-soft); }
.calendar-recent .event-row { opacity: 0.85; }
.copy-control:not(.needs-js), .js .needs-js.copy-control { display: inline-grid; grid-template-areas: "label"; }
.copy-control::before, .copy-control::after, .copy-control > span { grid-area: label; }
.copy-control::before { content: attr(data-copy-label); visibility: hidden; }
.copy-control::after { content: "Couldn't copy"; visibility: hidden; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: var(--space-lg) 0; flex-wrap: wrap; }
.pagination [aria-disabled] { opacity: .45; }
.table-scroll { overflow-x: auto; margin: var(--space-md) 0; }
.volume-table { border-collapse: collapse; width: 100%; font-size: var(--text-2xs); }
.volume-table th, .volume-table td { text-align: left; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--rule); vertical-align: top; }
.volume-table thead th { border-bottom: 2px solid var(--rule-strong); }
.buy-links { display: inline-flex; gap: var(--space-2xs); }
.buy-link { font-weight: 600; text-decoration: underline; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; margin: var(--space-md) 0; }
.filter-row label { display: grid; gap: var(--space-3xs); font-size: var(--text-2xs); }
.filter-row select, .filter-row input { font: inherit; padding: var(--space-3xs) var(--space-2xs); border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper); color: var(--ink); }