:root {
--bg: #fffaf3;
--surface: #ffffff;
--text: #2b2118;
--muted: #6b5b4d;
--accent: #b5651d;
--accent-soft: #f6e4cf;
--border: #eadbc8;
--note-bg: #fff4d6;
--note-border: #e6c25a;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1b1510;
--surface: #251d16;
--text: #f3e9dc;
--muted: #bfae9b;
--accent: #e39a52;
--accent-soft: #3a2a1b;
--border: #3c2f23;
--note-bg: #3a3014;
--note-border: #8a7230;
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: Georgia, "Times New Roman", serif;
line-height: 1.7;
font-size: 18px;
}
header.site {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px;
}
.brand { font-weight: 700; font-size: 1.2rem; color: var(--accent); text-decoration: none; letter-spacing: .3px; }
.langs { font-family: system-ui, sans-serif; font-size: .85rem; display: flex; gap: 6px; }
.langs a, .langs span {
padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
color: var(--muted); text-decoration: none;
}
.langs span.active { background: var(--accent); color: #fff; border-color: var(--accent); }
main { max-width: 780px; margin: 0 auto; padding: 28px 20px 60px; }
nav.crumbs { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
nav.crumbs a { color: var(--muted); }
h1 { font-size: 2.4rem; line-height: 1.2; margin: 6px 0 10px; }
h2 { font-size: 1.6rem; margin: 2.2em 0 .5em; padding-bottom: 6px; border-bottom: 2px solid var(--accent-soft); }
h3 { font-size: 1.2rem; margin: 1.6em 0 .3em; color: var(--accent); }
p { margin: 0 0 1em; }
.meta { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.facts {
font-family: system-ui, sans-serif; font-size: .92rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 14px 18px; margin: 20px 0 28px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 24px;
}
.facts div b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
figure { margin: 0 0 24px; }
figure svg { width: 100%; height: auto; border-radius: 14px; display: block; }
figcaption { font-family: system-ui, sans-serif; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.note {
font-family: system-ui, sans-serif; font-size: .9rem;
background: var(--note-bg); border-left: 4px solid var(--note-border);
padding: 10px 14px; border-radius: 6px; margin: 16px 0;
}
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .45em; }
details { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: .6em 0 0; }
.toc { font-family: system-ui, sans-serif; font-size: .92rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px; margin-bottom: 28px; }
.toc strong { display: block; margin-bottom: 6px; }
.toc ol { columns: 2; column-gap: 28px; margin: 0; }
.toc a { color: var(--accent); text-decoration: none; }
.related { display: flex; flex-wrap: wrap; gap: 8px; font-family: system-ui, sans-serif; font-size: .9rem; }
.related span { background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; }
.placeholder-box { border: 2px dashed var(--border); border-radius: 12px; padding: 16px; font-family: system-ui, sans-serif; color: var(--muted); font-size: .95rem; }
.sources li { font-size: .95rem; }
footer { text-align: center; font-family: system-ui, sans-serif; font-size: .8rem; color: var(--muted); padding: 24px; border-top: 1px solid var(--border); }
@media (max-width: 560px) { .toc ol { columns: 1; } h1 { font-size: 2rem; } body { font-size: 17px; } }
select { font: inherit; font-family: system-ui, sans-serif; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.controls { font-family: system-ui, sans-serif; font-size: .9rem; margin: 0 0 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-family: system-ui, sans-serif; font-size: .92rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
td.rank { font-weight: 700; color: var(--accent); width: 2.2em; }
td.score { font-weight: 700; white-space: nowrap; }
.rec { display: block; margin-bottom: 4px; }
.rec a { color: var(--accent); }
.tag { display: inline-block; font-size: .7rem; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); margin-right: 6px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; font-family: system-ui, sans-serif; font-size: .92rem; }
.card h3 { margin: 0 0 4px; color: var(--text); font-family: Georgia, serif; }
.card p { margin: 0 0 6px; }
code { background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; font-size: .88em; }
blockquote { margin: 16px 0; padding: 10px 14px; background: var(--note-bg); border-left: 4px solid var(--note-border); border-radius: 6px; font-family: system-ui, sans-serif; font-size: .9rem; }
blockquote p { margin: 0; }
main img { max-width: 100%; height: auto; border-radius: 14px; }
#timeline-key-dates + ul { list-style: none; margin: 0 0 1.4em 8px; padding: 0 0 0 0; border-left: 3px solid var(--accent-soft); }
#timeline-key-dates + ul li { position: relative; padding: 0 0 14px 22px; margin: 0; }
#timeline-key-dates + ul li::before { content: ""; position: absolute; left: -8px; top: .55em; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 20; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
header.site nav.main { display: flex; gap: 18px; align-items: center; font-family: system-ui, sans-serif; font-size: .95rem; flex-wrap: wrap; }
header.site nav.main a { color: var(--text); text-decoration: none; }
header.site nav.main a:hover { color: var(--accent); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 16px 0 32px; }
.card-link { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.card-link:hover, .card-link:focus-visible { border-color: var(--accent); }
.card-link img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0; }
.card-link .t { padding: 12px 14px 14px; font-family: system-ui, sans-serif; }
.card-link .t strong { display: block; font-family: Georgia, serif; font-size: 1.05rem; margin-bottom: 4px; }
.card-link .t span { font-size: .85rem; color: var(--muted); display: block; line-height: 1.4; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 40em; }
.related a { text-decoration: none; color: inherit; }
.related a span:hover { background: var(--accent); color: #fff; }
footer { line-height: 1.8; }
footer a { color: var(--muted); }
main a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sources a { word-break: break-word; }