/* Jugami World History (Herodotus) — v1 */
:root{--ink:#22261f;--ink2:#2f3618;--olive:#4b5320;--olive2:#3a4119;--khaki:#a89a6a;--poppy:#b3261e;--steel:#5f6b6d;--paper:#f1ead9;--paper2:#ddd2b6;--card:#fbf7ec;--text:#26241f;--muted:#5a5446;--ok:#2d6a2d;--radius:10px;--serif:Georgia,"Palatino Linotype","Book Antiqua",Palatino,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--serif);font-size:18px;line-height:1.65}
img,svg{max-width:100%;height:auto}
a{color:#2f4a6b}a:hover{color:var(--poppy)}
a:focus-visible,button:focus-visible,input:focus-visible+span,summary:focus-visible{outline:3px solid #d8a13a;outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#f4d27a;color:var(--ink);padding:6px 12px;z-index:9;display:inline-flex;align-items:center;min-height:44px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
.site-head{background:var(--olive2);color:var(--paper);border-bottom:4px solid var(--poppy)}
.bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center;min-height:44px;color:var(--paper);text-decoration:none;font-size:1.15rem}
.brand:hover{color:#fff}.brand svg{width:38px;height:38px;flex:none}
.head-nav{display:flex;flex-wrap:wrap;gap:0 16px;font-family:var(--sans);font-size:.92rem}
.head-nav a{color:#efe4c4;text-decoration:none;padding:0 2px;display:inline-flex;align-items:center;min-height:44px}.head-nav a:hover{color:#fff;text-decoration:underline}
.wire{height:12px;background:radial-gradient(circle at 6px 6px,var(--ink) 0 2px,transparent 2.5px) 0 0/28px 12px,linear-gradient(transparent 5px,var(--steel) 5px 7px,transparent 7px),var(--khaki)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:14px 0 0;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center}.crumbs li+li:before{content:"›";margin-right:6px}.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.hero{display:grid;gap:24px;align-items:center;padding:26px 0 10px}
@media(min-width:820px){.hero{grid-template-columns:1.25fr 1fr}}
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--poppy);margin:0;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.1;margin:.2em 0;color:var(--olive2)}
.tagline{font-size:1.2rem;font-style:italic;color:var(--muted);margin:.3em 0}
h2{font-size:1.75rem;line-height:1.25;color:var(--olive2);border-bottom:2px solid var(--khaki);padding-bottom:4px;margin-top:2.2em;scroll-margin-top:12px}
h3{font-size:1.2rem;line-height:1.3;margin:.2em 0;color:var(--ink)}
h2 .sub{display:block;font-size:.95rem;font-family:var(--sans);font-weight:400;color:var(--muted);letter-spacing:.02em}
.prose{max-width:70ch}.prose p,.prose li{margin:.6em 0}
.lede{font-size:1.15rem}
.toc{background:var(--card);border:1px solid var(--paper2);border-radius:var(--radius);padding:12px 18px;font-family:var(--sans);font-size:.95rem;margin-top:12px}
.toc ol{margin:.3em 0;padding-left:1.4em}
@media(min-width:640px){.toc ol{columns:2;column-gap:2.5em}}
.toc li{padding:0;break-inside:avoid}.toc a{display:inline-flex;align-items:center;min-height:44px}
.brief{background:var(--ink);color:#efe6cf;border-radius:var(--radius);padding:16px 20px;margin:20px 0}
.brief h2{color:#fff;border:0;margin:0 0 .3em;font-size:1.3rem}
.brief p{margin:.4em 0;max-width:72ch}
.brief strong{color:#f4d27a}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));margin:16px 0}
.card{background:var(--card);border:1px solid var(--paper2);border-top:5px solid var(--olive);border-radius:var(--radius);padding:14px 16px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.card.red{border-top-color:var(--poppy)}.card.steel{border-top-color:var(--steel)}.card.khaki{border-top-color:var(--khaki)}
.card p{margin:.4em 0}.card ul{margin:.4em 0;padding-left:1.2em}
.letter{display:inline-grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--poppy);color:#fff;font:700 1.1rem var(--sans);margin-right:8px;vertical-align:middle}
.stats{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-family:var(--sans);font-size:.9rem;margin:.5em 0;padding:8px 10px;background:#efe7d2;border-radius:6px}
.stats dt{font-weight:700;color:var(--olive2)}.stats dd{margin:0}
.sides{display:grid;gap:16px;margin:16px 0}
@media(min-width:760px){.sides{grid-template-columns:1fr 1fr}}
.side{border-radius:var(--radius);padding:14px 18px;border:2px solid}
.side.allies{background:#eef1f3;border-color:#5b7186}.side.central{background:#f3ece4;border-color:#7d5a3c}
.side h3{margin-bottom:.4em}.side ul{list-style:none;padding:0;margin:0}
.side li{padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.15)}.side li:last-child{border:0}
.side .when{display:block;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
figure{margin:20px 0}
.map{background:var(--card);border:1px solid var(--paper2);border-radius:var(--radius);padding:10px}
.map img,.map svg{display:block;width:100%;border-radius:6px}
figcaption,.cap{font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-top:8px;max-width:80ch}
.key{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--sans);font-size:.88rem;margin:6px 0 0;padding:0;list-style:none}
.key span{display:inline-block;vertical-align:middle;margin-right:6px}
.sw-line{width:28px;height:0;border-top:4px solid var(--poppy)}.sw-dash{width:28px;height:0;border-top:4px dashed #5f4b8b}.sw-dash.red{border-top-color:var(--poppy)}
.sw-dot{width:14px;height:14px;border-radius:50%;background:var(--poppy);border:2px solid #fff;box-shadow:0 0 0 1px var(--poppy)}.sw-sq{width:10px;height:10px;background:var(--ink)}
.sw-diamond{width:12px;height:12px;background:#5f4b8b;transform:rotate(45deg);margin-left:3px}
.sw-fill{width:22px;height:16px;border:1px solid #6d6450;border-radius:3px}.sw-fill.ally{background:#9fb8cf}.sw-fill.ally2{background:#cddbe7}.sw-fill.cent{background:#dfa999}.sw-fill.neut{background:#e4dcc3}
.callout{background:#e6eadc;border:1px solid #c3cbab;border-left:6px solid var(--olive);border-radius:var(--radius);padding:12px 16px;margin:18px 0;max-width:78ch}
.callout h3{font-size:1.05rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--olive2)}
.callout p{margin:.4em 0}
.filters-wrap{background:var(--card);border:1px solid var(--paper2);border-radius:var(--radius);padding:10px 14px;margin:12px 0 18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.filters .lbl{font:700 .85rem var(--sans);color:var(--muted);align-self:center;min-width:4.5em}
.filters button,.btn{font:600 .92rem var(--sans);background:#fff;border:2px solid var(--olive);color:var(--olive2);border-radius:999px;padding:7px 14px;min-height:44px;cursor:pointer}
.filters button[aria-pressed=true],.btn.primary{background:var(--olive);color:#fff}
.filters button:hover,.btn:hover{border-color:var(--poppy)}
.count{font:600 .9rem var(--sans);color:var(--muted);margin:4px 0 0}
.timeline{list-style:none;padding:0;margin:0 0 0 8px;border-left:4px solid var(--olive)}
.timeline li{position:relative;padding:4px 0 18px 26px}
.timeline li:before{content:"";position:absolute;left:-12px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:4px solid var(--poppy)}
.timeline li[data-cat=russia]:before{border-color:#5f4b8b}.timeline li[data-cat=usa]:before{border-color:#2f4a6b}.timeline li[data-cat=peace]:before{border-color:var(--olive)}.timeline li[data-cat=fronts]:before{border-color:var(--steel)}
.timeline time{font-family:var(--sans);font-weight:700;color:var(--poppy);font-size:.95rem}
.timeline .tag{font:600 .75rem var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-left:6px}
.timeline p{margin:.3em 0 0;max-width:68ch}
.quote{background:var(--card);border-left:6px solid var(--poppy);border-radius:0 var(--radius) var(--radius) 0;margin:22px 0;padding:14px 18px;max-width:80ch}
.quote blockquote{margin:0;font-size:1.1rem;font-style:italic}
.quote blockquote p{margin:.3em 0}
.quote.poem blockquote p{margin:.8em 0}
.quote figcaption{margin-top:10px}
.quote .why{margin:.7em 0 0;font-size:1rem}
.quote .ask{margin:.4em 0 0;font-size:1rem}
.vocab{display:grid;gap:10px 22px;margin:16px 0}
@media(min-width:760px){.vocab{grid-template-columns:1fr 1fr}}
.vocab div{background:var(--card);border:1px solid var(--paper2);border-radius:8px;padding:10px 14px}
.vocab dt{font-weight:700;color:var(--olive2)}.vocab dd{margin:.2em 0 0}
.quiz{background:var(--card);border:2px solid var(--olive);border-radius:var(--radius);padding:16px;max-width:820px}
.quiz fieldset{border:0;border-bottom:1px dashed var(--paper2);margin:0 0 12px;padding:0 0 12px;min-width:0}
.quiz legend{font-weight:700;margin-bottom:6px;padding:0}
.quiz label{display:block;padding:9px 6px;cursor:pointer;border-radius:6px}
.quiz label:hover{background:#efe7d2}
.quiz input{margin-right:8px;transform:scale(1.15)}
.quiz .fb{font-family:var(--sans);font-size:.95rem;margin:.3em 0 0}
.fb.ok{color:var(--ok)}.fb.no{color:var(--poppy)}
.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.score{font:700 1.1rem var(--sans);color:var(--olive2)}
.talk li{margin-bottom:.7em}
.unit-card{display:grid;gap:18px;align-items:center;background:var(--olive2);color:var(--paper);border-radius:var(--radius);padding:20px;text-decoration:none;margin:16px 0}
@media(min-width:700px){.unit-card{grid-template-columns:200px 1fr}}
.unit-card h3{color:#fff;font-size:1.45rem}.unit-card p{margin:.4em 0}
.unit-card:hover,.unit-card:focus-visible{color:#fff;box-shadow:0 0 0 4px var(--poppy)}
.unit-card .go{font:700 .95rem var(--sans);color:#f4d27a}
.badge{display:inline-block;font:700 .72rem var(--sans);text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:2px 10px;background:var(--poppy);color:#fff;margin-bottom:4px}
.badge.soon{background:#e2d8bd;color:#4d4636}
.roadmap{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:16px 0}
.roadmap li{background:var(--card);border:1px dashed #b9ad8c;border-radius:var(--radius);padding:12px 14px}
.roadmap h3{font-size:1.08rem}.roadmap p{margin:.3em 0;font-size:1rem}
.roadmap .yrs{font:600 .85rem var(--sans);color:var(--muted)}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-family:var(--sans);margin:30px 0;padding:12px 0;border-top:1px solid var(--paper2);align-items:center}
.pager a,.pager span{display:inline-flex;align-items:center;min-height:44px}
.sources li{margin-bottom:6px}
.site-foot{background:var(--ink);color:#ddd3bb;margin-top:40px;padding:22px 0;font-family:var(--sans);font-size:.92rem}
.site-foot a{color:#f4d27a;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.jugami-more{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}.jugami-more span{font-weight:700;margin-right:4px}
.table-wrap{overflow-x:auto}
table.facts{border-collapse:collapse;font-family:var(--sans);font-size:.92rem;margin:12px 0;min-width:420px}
table.facts th,table.facts td{border:1px solid var(--paper2);padding:6px 10px;text-align:left;vertical-align:top}
table.facts th{background:#e6dcc3}