/* ============================================================
   История континентов — styles
   UI / цифры: JetBrains Mono · чтение: Lora
   Каждое столетие имеет собственный цвет и эмблему (см. блок ВЕКА).
   ============================================================ */

:root {
  --font-read: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* поверхности — светлая тема */
  --paper: #f6f2ea;
  --paper-2: #fffdf8;
  --card: #fffdf8;
  --ink: #1d1a15;
  --ink-soft: #5b5548;
  --ink-faint: #98917f;
  --line: rgba(29, 26, 21, 0.09);
  --line-2: rgba(29, 26, 21, 0.16);
  --shadow: 0 1px 2px rgba(29, 26, 21, .04), 0 8px 28px -22px rgba(29, 26, 21, .5);
  --shadow-lift: 0 1px 2px rgba(29, 26, 21, .05), 0 16px 40px -26px rgba(29, 26, 21, .55);

  /* карта */
  --land: #e7ddca;
  --land-hover: #dbcfb6;
  --map-line: rgba(29, 26, 21, 0.12);
  --label-ink: #2a261f;
  --label-bg: rgba(246, 242, 234, 0.74);

  --accent-ink: #fff;
  --wash: 9%;

  --maxw: 1140px;
  --read: 47rem;
  --radius: 14px;
}

/* ---- палитра столетий (светлая) ---------------------------- */
:root {
  --c1:  #b0603a;  /* терракота Рима */
  --c2:  #a97f31;  /* бронза и золото пика */
  --c3:  #94472e;  /* ржавчина кризиса */
  --c4:  #7c4a70;  /* императорский порфир */
  --c5:  #6d665a;  /* пепел павшего Запада */
  --c6:  #3c7b78;  /* византийская бирюза */
  --c7:  #6d7442;  /* олива и борозда */
  --c8:  #8d6a33;  /* мёд каролингского пергамента */
  --c9:  #3d6d88;  /* северное море */
  --c10: #5b7b60;  /* камень и мох */
  --c11: #9a4d43;  /* романский кирпич */
  --c12: #3f5fa8;  /* готический лазурит */
  --c13: #a8862b;  /* латунь часов и линз */
  --c14: #6b5679;  /* чумной фиолет */
  --c15: #b1442f;  /* киноварь печатника */
  --c16: #2f7a5c;  /* зелень океана и Реформации */
  --c17: #46508f;  /* ночной индиго телескопов */
  --c18: #a75f79;  /* роза Просвещения */
  --c19: #45677a;  /* сталь и копоть */
  --c20: #8f3b4a;  /* тревожный кармин */
  --c21: #1f80a6;  /* электрический циан */

  /* запасные цвета эпох — для континентов без нумерации веков */
  --e-antiquity:   #b0603a;
  --e-medieval:    #8d5a5f;
  --e-renaissance: #2f7a5c;
  --e-industrial:  #45677a;
  --e-modern:      #4a5bb0;
}

[data-theme="dark"] {
  --paper: #121317;
  --paper-2: #191b21;
  --card: #191b21;
  --ink: #ece7dd;
  --ink-soft: #a9a396;
  --ink-faint: #6f6a60;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.17);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -24px rgba(0,0,0,.9);
  --shadow-lift: 0 1px 2px rgba(0,0,0,.35), 0 18px 44px -26px rgba(0,0,0,.95);

  --land: #282c35;
  --land-hover: #343943;
  --map-line: rgba(255, 255, 255, 0.07);
  --label-ink: #e7e2d8;
  --label-bg: rgba(18, 19, 23, 0.62);
  --accent-ink: #14151a;
  --wash: 13%;

  --c1:  #d68a5c;
  --c2:  #d3a54f;
  --c3:  #c47051;
  --c4:  #b47ea6;
  --c5:  #a49c8d;
  --c6:  #5fb0ab;
  --c7:  #a3ad6f;
  --c8:  #c39a5c;
  --c9:  #6ea3c0;
  --c10: #8fb493;
  --c11: #d0776c;
  --c12: #7e97e0;
  --c13: #d9b558;
  --c14: #a48fb3;
  --c15: #e0765e;
  --c16: #57b189;
  --c17: #8790cf;
  --c18: #dd93aa;
  --c19: #7ea3b8;
  --c20: #d1727f;
  --c21: #4fb8e0;

  --e-antiquity:   #d68a5c;
  --e-medieval:    #c08e93;
  --e-renaissance: #57b189;
  --e-industrial:  #7ea3b8;
  --e-modern:      #8b95e0;
}

/* акцент: сначала эпоха, затем — если век известен — цвет века */
[data-era="antiquity"]   { --accent: var(--e-antiquity); }
[data-era="medieval"]    { --accent: var(--e-medieval); }
[data-era="renaissance"] { --accent: var(--e-renaissance); }
[data-era="industrial"]  { --accent: var(--e-industrial); }
[data-era="modern"]      { --accent: var(--e-modern); }

body[data-century="1"]  { --accent: var(--c1); }
body[data-century="2"]  { --accent: var(--c2); }
body[data-century="3"]  { --accent: var(--c3); }
body[data-century="4"]  { --accent: var(--c4); }
body[data-century="5"]  { --accent: var(--c5); }
body[data-century="6"]  { --accent: var(--c6); }
body[data-century="7"]  { --accent: var(--c7); }
body[data-century="8"]  { --accent: var(--c8); }
body[data-century="9"]  { --accent: var(--c9); }
body[data-century="10"] { --accent: var(--c10); }
body[data-century="11"] { --accent: var(--c11); }
body[data-century="12"] { --accent: var(--c12); }
body[data-century="13"] { --accent: var(--c13); }
body[data-century="14"] { --accent: var(--c14); }
body[data-century="15"] { --accent: var(--c15); }
body[data-century="16"] { --accent: var(--c16); }
body[data-century="17"] { --accent: var(--c17); }
body[data-century="18"] { --accent: var(--c18); }
body[data-century="19"] { --accent: var(--c19); }
body[data-century="20"] { --accent: var(--c20); }
body[data-century="21"] { --accent: var(--c21); }

/* цвет засечки в ленте столетий */
.tl-chip[data-century="1"]  { --chip: var(--c1); }
.tl-chip[data-century="2"]  { --chip: var(--c2); }
.tl-chip[data-century="3"]  { --chip: var(--c3); }
.tl-chip[data-century="4"]  { --chip: var(--c4); }
.tl-chip[data-century="5"]  { --chip: var(--c5); }
.tl-chip[data-century="6"]  { --chip: var(--c6); }
.tl-chip[data-century="7"]  { --chip: var(--c7); }
.tl-chip[data-century="8"]  { --chip: var(--c8); }
.tl-chip[data-century="9"]  { --chip: var(--c9); }
.tl-chip[data-century="10"] { --chip: var(--c10); }
.tl-chip[data-century="11"] { --chip: var(--c11); }
.tl-chip[data-century="12"] { --chip: var(--c12); }
.tl-chip[data-century="13"] { --chip: var(--c13); }
.tl-chip[data-century="14"] { --chip: var(--c14); }
.tl-chip[data-century="15"] { --chip: var(--c15); }
.tl-chip[data-century="16"] { --chip: var(--c16); }
.tl-chip[data-century="17"] { --chip: var(--c17); }
.tl-chip[data-century="18"] { --chip: var(--c18); }
.tl-chip[data-century="19"] { --chip: var(--c19); }
.tl-chip[data-century="20"] { --chip: var(--c20); }
.tl-chip[data-century="21"] { --chip: var(--c21); }

/* ============================================================ ЭМБЛЕМЫ ВЕКОВ
   Рисуются маской по цвету века, поэтому подстраиваются под тему.
   I акведук · II купол · III треснувшая монета · IV хризма · V плетёнка
   VI мозаика · VII борозды · VIII виньетка · IX драккар · X романская арка
   XI зубцы стены · XII стрельчатая арка · XIII шестерня · XIV кресты
   XV литеры · XVI роза ветров · XVII орбиты · XVIII рокайль
   XIX рельсы · XX волны · XXI сеть                                        */

body[data-century="1"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M12 82V52a11 11 0 0 1 22 0v30M39 82V52a11 11 0 0 1 22 0v30M66 82V52a11 11 0 0 1 22 0v30'/%3E%3Cpath d='M8 88h84M8 34h84'/%3E%3C/svg%3E"); }
body[data-century="2"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M12 80a38 38 0 0 1 76 0'/%3E%3Cpath d='M8 86h84M50 80V56M30 80l7-19M70 80l-7-19'/%3E%3Ccircle cx='50' cy='46' r='8' fill='black' stroke='none'/%3E%3C/svg%3E"); }
body[data-century="3"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Cpath d='M50 16l-10 20 15 10-13 16 8 22'/%3E%3C/svg%3E"); }
body[data-century="4"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M50 90V20'/%3E%3Cpath d='M50 20h9a13 13 0 0 1 0 26h-9'/%3E%3Cpath d='M26 46l48 32M74 46L26 78' stroke-width='5'/%3E%3C/svg%3E"); }
body[data-century="5"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5'%3E%3Ccircle cx='50' cy='34' r='23'/%3E%3Ccircle cx='30' cy='66' r='23'/%3E%3Ccircle cx='70' cy='66' r='23'/%3E%3C/svg%3E"); }
body[data-century="6"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='black'%3E%3Crect x='42' y='12' width='16' height='16' rx='2'/%3E%3Crect x='42' y='32' width='16' height='16' rx='2'/%3E%3Crect x='22' y='32' width='16' height='16' rx='2'/%3E%3Crect x='62' y='32' width='16' height='16' rx='2'/%3E%3Crect x='42' y='52' width='16' height='16' rx='2'/%3E%3Crect x='42' y='72' width='16' height='16' rx='2'/%3E%3C/svg%3E"); }
body[data-century="7"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 78c22-26 62-26 84 0M8 60c22-26 62-26 84 0M8 42c22-26 62-26 84 0M8 24c22-26 62-26 84 0'/%3E%3C/svg%3E"); }
body[data-century="8"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 80l16-16'/%3E%3Cpath d='M34 66C46 26 62 14 88 8 82 34 70 52 34 66z'/%3E%3Cpath d='M12 92h76'/%3E%3C/svg%3E"); }
body[data-century="9"]  { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 60h88c-4 18-22 28-44 28S10 78 6 60z'/%3E%3Cpath d='M50 60V10'/%3E%3Cpath d='M53 16c23 4 33 18 33 36H53z'/%3E%3C/svg%3E"); }
body[data-century="10"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M18 86V44a32 32 0 0 1 64 0v42'/%3E%3Cpath d='M50 86V54'/%3E%3Ccircle cx='50' cy='38' r='7' fill='black' stroke='none'/%3E%3Cpath d='M8 90h84'/%3E%3C/svg%3E"); }
body[data-century="11"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M10 88V44h13V30h14v14h14V30h14v14h13v44'/%3E%3Cpath d='M42 88V64h16v24'/%3E%3C/svg%3E"); }
body[data-century="12"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M18 92V52C18 32 32 14 50 10c18 4 32 22 32 42v40'/%3E%3Cpath d='M32 92V66c0-10 8-18 18-18s18 8 18 18v26'/%3E%3Ccircle cx='50' cy='34' r='9'/%3E%3Cpath d='M10 92h80'/%3E%3C/svg%3E"); }
body[data-century="13"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='23'/%3E%3Cpath d='M50 12v10M50 78v10M12 50h10M78 50h10M23 23l7 7M70 70l7 7M77 23l-7 7M30 70l-7 7'/%3E%3Cpath d='M50 50V36M50 50l10 8' stroke-width='4'/%3E%3C/svg%3E"); }
body[data-century="14"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M24 88V40M13 54h22'/%3E%3Cpath d='M52 88V22M40 38h24'/%3E%3Cpath d='M80 88V48M70 60h20'/%3E%3C/svg%3E"); }
body[data-century="15"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='12' y='30' width='22' height='44' rx='2'/%3E%3Crect x='39' y='20' width='22' height='54' rx='2'/%3E%3Crect x='66' y='36' width='22' height='38' rx='2'/%3E%3Cpath d='M8 84h84'/%3E%3Cpath d='M18 44h10M45 34h10M72 50h10' stroke-width='4'/%3E%3C/svg%3E"); }
body[data-century="16"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6l8 36 36 8-36 8-8 36-8-36-36-8 36-8z' fill='black'/%3E%3Ccircle cx='50' cy='50' r='31' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E"); }
body[data-century="17"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5'%3E%3Cellipse cx='50' cy='50' rx='45' ry='25' transform='rotate(-20 50 50)'/%3E%3Ccircle cx='68' cy='43' r='10' fill='black' stroke='none'/%3E%3Ccircle cx='19' cy='60' r='6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
body[data-century="18"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 20v68M30 88h40M18 32h64'/%3E%3Cpath d='M18 32L7 58h22zM82 32L71 58h22z'/%3E%3Ccircle cx='50' cy='18' r='6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
body[data-century="19"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M24 92L42 12M76 92L58 12'/%3E%3Cpath d='M21 84h58M27 62h46M33 40h34M38 22h24' stroke-width='4'/%3E%3C/svg%3E"); }
body[data-century="20"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5'%3E%3Ccircle cx='50' cy='50' r='20'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='47'/%3E%3Ccircle cx='50' cy='50' r='7' fill='black' stroke='none'/%3E%3C/svg%3E"); }
body[data-century="21"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M16 22L50 50 84 22M16 78L50 50 84 78M50 50V10M50 50v40'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3Ccircle cx='16' cy='22' r='5'/%3E%3Ccircle cx='84' cy='22' r='5'/%3E%3Ccircle cx='16' cy='78' r='5'/%3E%3Ccircle cx='84' cy='78' r='5'/%3E%3Ccircle cx='50' cy='10' r='5'/%3E%3Ccircle cx='50' cy='90' r='5'/%3E%3C/g%3E%3C/svg%3E"); }

/* ============================================================ БАЗА */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
  transition: background-color .5s ease;
}

body {
  margin: 0;
  background: transparent;
  font-family: var(--font-read);
  color: var(--ink);
  line-height: 1.72;
  font-size: 1.06rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color .25s ease;
}

/* мягкая заливка цветом века на весь экран */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(112% 52% at 50% -6%, color-mix(in srgb, var(--accent) var(--wash), transparent), transparent 68%),
    radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, var(--accent) calc(var(--wash) / 2), transparent), transparent 70%);
  transition: background .6s ease;
}

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============================================================ ПРОГРЕСС ЧТЕНИЯ */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  pointer-events: none; background: transparent;
}
#progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
  transition: width .12s linear, background .5s ease;
}

/* ============================================================ ШАПКА */
#topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px clamp(18px, 5vw, 48px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: background .5s ease, box-shadow .5s ease;
}
.brand-text {
  font-family: var(--font-ui); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  color: var(--ink-soft);
}
.icon-btn {
  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  display: grid; place-items: center; transition: border-color .2s, background .2s, transform .15s;
}
.icon-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.icon-btn:active { transform: scale(.92); }
.theme-icon {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  background: linear-gradient(90deg, var(--ink-soft) 0 50%, transparent 50% 100%);
}
[data-theme="dark"] .theme-icon { background: none; box-shadow: inset -4px -2px 0 0 var(--ink-soft); border-color: transparent; }

/* ============================================================ КАРТА */
#map-stage { padding: clamp(4px, 1.4vw, 14px) clamp(10px, 4vw, 40px) clamp(10px, 2vw, 18px); text-align: center; }
.map-frame { position: relative; max-width: 840px; margin: 0 auto; }
#worldmap { display: block; width: 100%; height: auto; max-height: min(30vh, 268px); overflow: visible; }
.continent {
  fill: var(--land); stroke: var(--map-line); stroke-width: .8; stroke-linejoin: round;
  cursor: pointer; transition: fill .3s ease, opacity .3s ease;
}
.continent:hover { fill: var(--land-hover); }
#worldmap.has-selection .continent { opacity: .58; }
#worldmap.has-selection .continent:hover { opacity: .85; }
.continent.selected { fill: var(--accent); stroke: transparent; opacity: 1 !important; }
.continent:focus { outline: none; }
.continent:focus-visible { outline: none; stroke: var(--accent); stroke-width: 1.8; }

.map-labels { position: absolute; inset: 0; pointer-events: none; }
.map-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  font-family: var(--font-ui); font-size: clamp(.6rem, 1.3vw, .75rem); font-weight: 500;
  letter-spacing: .01em; white-space: nowrap; color: var(--label-ink);
  padding: 3px 9px; border-radius: 999px; background: var(--label-bg);
  border: 1px solid var(--line); backdrop-filter: blur(4px);
  transition: color .2s, background .2s, border-color .2s, transform .2s; user-select: none;
}
.map-label:hover { border-color: var(--accent); transform: translate(-50%, -50%) scale(1.05); }
.map-label.selected {
  color: var(--accent-ink); background: var(--accent); border-color: transparent;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* ============================================================ НАВИГАЦИЯ (липкая) */
#navbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid var(--line);
  padding: 4px clamp(14px, 5vw, 48px) 0;
}

/* лента столетий */
.timeline { max-width: var(--maxw); margin: 4px auto 0; display: flex; align-items: stretch; gap: 2px; }
.tl-arrow {
  flex: none; width: 28px; border: 0; background: none; color: var(--ink-faint);
  cursor: pointer; font-size: 1.25rem; line-height: 1; transition: color .2s;
}
.tl-arrow:hover:not(:disabled) { color: var(--accent); }
.tl-arrow:disabled { opacity: .22; cursor: default; }

.tl-track {
  display: flex; gap: 0; overflow-x: auto;
  padding: 0 2px 8px; flex: 1; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.tl-track::-webkit-scrollbar { display: none; }

.tl-chip {
  flex: none; cursor: pointer; border: 0; background: none; color: var(--ink-faint);
  padding: 7px 13px 8px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: var(--font-ui); line-height: 1.1; position: relative;
  transition: color .18s ease;
}
/* цветная засечка века — вместе они складываются в спектр времени */
.tl-chip::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--chip, var(--ink-faint)) 30%, transparent);
  transition: background .2s ease, height .2s ease, left .2s ease, right .2s ease;
}
.tl-chip:hover { color: var(--ink); }
.tl-chip:hover::after { background: color-mix(in srgb, var(--chip, var(--ink-faint)) 60%, transparent); }
.tl-chip .tl-roman { font-weight: 600; font-size: .9rem; letter-spacing: .01em; }
.tl-chip .tl-years { font-size: .63rem; color: var(--ink-faint); transition: color .18s; }
.tl-chip.active { color: var(--ink); }
.tl-chip.active::after { background: var(--chip, var(--accent)); height: 3px; left: 3px; right: 3px; }
.tl-chip.active .tl-years { color: var(--ink-soft); }
.tl-chip.tl-epilogue .tl-roman { font-size: .78rem; }

/* фильтры тем */
.filters {
  max-width: var(--maxw); margin: 0 auto; display: flex; gap: 5px;
  overflow-x: auto; padding: 9px 2px 11px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.filters::-webkit-scrollbar { display: none; }
.f-chip {
  flex: none; cursor: pointer; border: 1px solid transparent; background: none; color: var(--ink-faint);
  border-radius: 999px; padding: 5px 13px; font-family: var(--font-ui); font-size: .79rem; font-weight: 500;
  white-space: nowrap; transition: color .16s, background .16s, border-color .16s;
}
.f-chip:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.f-chip.active {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.f-chip .f-ico { margin-right: .42em; font-size: .95em; }

/* ============================================================ СОДЕРЖАНИЕ */
#content { max-width: var(--read); margin: 0 auto; padding: clamp(28px, 5vw, 52px) clamp(20px, 6vw, 24px) 72px; }

.period-head { margin-bottom: 30px; position: relative; }
.period-head > * { position: relative; z-index: 1; }
/* эмблема столетия */
.period-head::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -4px; top: -26px; width: 152px; height: 152px;
  background: var(--accent); opacity: .12;
  -webkit-mask: var(--motif, none) center / contain no-repeat;
  mask: var(--motif, none) center / contain no-repeat;
  transition: background .5s ease, opacity .5s ease;
}
[data-theme="dark"] .period-head::after { opacity: .16; }

.period-title {
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 3.05rem); line-height: 1.0; margin: 0;
  letter-spacing: -.025em; color: var(--ink);
}
.period-title .pt-num { color: var(--accent); transition: color .45s ease; }
.period-title .pt-unit { font-weight: 400; color: var(--ink-faint); }
.period-meta {
  font-family: var(--font-ui); font-size: .84rem; font-weight: 500;
  color: var(--ink-soft); margin-top: 14px; letter-spacing: .005em;
}
.period-era { color: var(--accent); font-weight: 600; }
.period-label {
  font-family: var(--font-read); font-style: italic; font-size: 1.1rem;
  color: var(--ink-soft); margin: 14px 0 0; max-width: 34rem;
  padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

/* карточки тем */
.section {
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  position: relative; overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
/* тонкая цветная кромка сверху — «корешок» карточки */
.section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 14%, transparent) 62%, transparent);
  opacity: .68; transition: opacity .22s ease;
}
.section:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line-2));
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
.section:hover::before { opacity: .95; }

.section-title {
  font-family: var(--font-ui); font-weight: 600; font-size: 1.09rem; line-height: 1.35;
  margin: 0; letter-spacing: -.012em;
  display: flex; align-items: flex-start; gap: .62em;
}
.section-title .sec-ico {
  flex: none; display: grid; place-items: center;
  width: 1.95em; height: 1.95em; border-radius: 10px; font-size: .95em; line-height: 1;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: background .3s ease;
}
.section:hover .sec-ico { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.section-title .sec-text { padding-top: .28em; }

.section-body { font-size: 1.06rem; color: var(--ink); }
.section-body > *:first-child { margin-top: 16px; }
.section-body p { margin: 0 0 1.05em; }
.section-body > p:last-child { margin-bottom: 0; }
.section-body strong { font-weight: 600; }
.section-body em { font-style: italic; }
.section-body ul, .section-body ol { margin: 0 0 1.05em; padding-left: 1.25em; }
.section-body li { margin: .42em 0; padding-left: .15em; }
.section-body li::marker { color: color-mix(in srgb, var(--accent) 70%, var(--ink-faint)); }
.section-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.7em 0; }
.section-body .md-h { font-family: var(--font-ui); font-weight: 600; line-height: 1.35; margin: 1.8em 0 .5em; letter-spacing: -.012em; }
.section-body h2.md-h { font-size: 1.28rem; }
.section-body h3.md-h { font-size: 1.1rem; }
.section-body h4.md-h { font-size: 1rem; color: var(--ink-soft); }
.section-body .md-h:first-child { margin-top: 4px; }

/* выноски */
.section-body blockquote.note {
  margin: 1.5em 0; padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft); font-size: 1rem;
}
.section-body blockquote.note p { margin: 0 0 .6em; }
.section-body blockquote.note p:last-child { margin: 0; }
.section-body blockquote.note strong { color: var(--ink); }

/* таблицы */
.table-wrap { overflow-x: auto; margin: 1.6em 0; }
table { border-collapse: collapse; width: 100%; font-family: var(--font-ui); font-size: .87rem; line-height: 1.5; }
thead th {
  text-align: left; font-weight: 600; color: var(--accent); padding: 8px 14px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line-2)); white-space: nowrap;
}
tbody td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
table strong { color: var(--ink); font-weight: 600; }

/* термин со всплывающей подсказкой */
.term {
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 75%, transparent);
  cursor: help; transition: color .15s, background .15s;
  border-radius: 2px;
}
.term:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }

.appendix .section-title { font-weight: 700; font-size: clamp(1.3rem, 5vw, 1.62rem); letter-spacing: -.025em; }

/* появление карточек */
@media (prefers-reduced-motion: no-preference) {
  .section { animation: card-in .45s cubic-bezier(.22,.7,.3,1) both; }
  .section:nth-child(1) { animation-delay: 0ms }
  .section:nth-child(2) { animation-delay: 40ms }
  .section:nth-child(3) { animation-delay: 80ms }
  .section:nth-child(4) { animation-delay: 115ms }
  .section:nth-child(5) { animation-delay: 145ms }
  .section:nth-child(n+6) { animation-delay: 170ms }
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================ ПОДСКАЗКА */
#tooltip {
  position: absolute; z-index: 100; max-width: min(330px, 84vw);
  background: var(--ink); color: var(--paper);
  border-radius: 12px; padding: 12px 15px;
  font-family: var(--font-ui); font-size: .83rem; line-height: 1.52;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.55);
  pointer-events: none; opacity: 0; transform: translateY(4px) scale(.985);
  transition: opacity .15s ease, transform .15s ease;
}
#tooltip.show { opacity: 1; transform: none; }
#tooltip .tip-term { display: block; font-weight: 700; color: var(--accent); margin-bottom: 4px; font-size: .79rem; letter-spacing: .02em; text-transform: uppercase; }
[data-theme="dark"] #tooltip { background: #262932; color: var(--ink); }

/* ============================================================ ПОДВАЛ И ПРОЧЕЕ */
#footer {
  max-width: var(--read); margin: 0 auto; padding: 28px clamp(20px, 6vw, 24px) 76px;
  border-top: 1px solid var(--line); color: var(--ink-faint);
  font-family: var(--font-ui); font-size: .75rem; line-height: 1.65;
}
#footer p { margin: 0 0 6px; }
.term-demo { border-bottom: 1px dotted var(--accent); }

.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(10px); color: var(--ink);
  font-size: 1.1rem; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s, transform .25s, border-color .2s, color .2s;
}
.to-top:hover { border-color: var(--accent); color: var(--accent); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }

/* ============================================================ АДАПТИВ */
@media (max-width: 720px) {
  body { font-size: 1.02rem; }
  #worldmap { max-height: 30vh; }
  .section { padding: 22px 20px; border-radius: 13px; }
  .section-title { font-size: 1.18rem; }
  .period-head::after { width: 112px; height: 112px; top: -14px; right: -8px; opacity: .1; }
  .to-top { right: 12px; bottom: 12px; }
}
@media (max-width: 440px) {
  .map-label { font-size: .58rem; padding: 2px 7px; }
  .period-head::after { width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  *, html { scroll-behavior: auto !important; }
  .section { animation: none !important; }
  .section:hover { transform: none; }
}