:root {
  --paper:#f7f4ed;
  --ink:#282e2b;
  --muted:#777c72;
  --line:#deded1;
  --red:#9c483b;
  --blue:#427e8c;
  --gold:#a17a37
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  cursor:pointer
}

button:focus-visible,a:focus-visible {
  outline:3px solid #427e8c;
  outline-offset:4px
}

header {
  border-bottom:1px solid var(--line);
  padding:20px 4.5%;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.brand {
  font-weight:650;
  letter-spacing:2px;
  font-size:12px
}

.brand b {
  display:inline-grid;
  place-items:center;
  background:var(--ink);
  color:var(--paper);
  width:28px;
  height:28px;
  margin-right:12px;
  font-family:Georgia;
  font-size:19px
}

header small {
  color:var(--muted)
}

main {
  max-width:1500px;
  padding:22px 4.5% 30px;
  margin:auto
}

.intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px
}

.eyebrow {
  color:var(--red);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase
}

h1 {
  font:normal clamp(44px,5.6vw,76px)/1.1 Georgia,serif;
  letter-spacing:-2px;
  margin:13px 0
}

h1 span {
  color:var(--muted);
  font-size:.56em;
  letter-spacing:-1px
}

.intro p {
  max-width:580px;
  color:var(--muted);
  margin:14px 0 0
}

.period-portrait { display:block; line-height:0; border-radius:16px }
.period-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%; border-radius:inherit }
.intro h1 .period-portrait { display:inline-block; width:.8em; height:1em; margin-right:.15em; vertical-align:bottom; border-radius:.18em }

.period-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-top:30px;
  border-bottom:1px solid var(--line)
}

.overview-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:20px;
  font-size:14px
}

.period-tabs a {
  padding:12px 0;
  color:var(--muted);
  text-decoration:none;
  border-bottom:3px solid transparent
}

.period-tabs a[aria-selected="true"] {
  color:var(--ink);
  border-color:var(--red)
}

.period-summary,.practice-panel {
  max-width:900px;
  margin-top:30px
}

.period-summary .reading-body { padding:0 }

.timeline-panel {
  margin-top:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fdfbf6;
  overflow:hidden
}

.panel-top {
  padding:17px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line)
}

.panel-top strong {
  font-size:13px
}

.panel-top span {
  font-size:12px;
  color:var(--muted)
}

.scroll {
  overflow:auto
}

.timeline {
  min-width:1100px;
  padding:0 20px
}

.timeline.has-lane-overviews { min-width:1300px }
.lane-overview-link:hover rect,.lane-overview-link:focus rect { stroke-width:2.5 }
.lane-overview-link text { pointer-events:none }
.lane-overview-index { margin:18px 0; color:var(--muted) }
.lane-overview-index summary { cursor:pointer }
.lane-overview-index li { margin:10px 0 }

svg {
  width:100%;
  display:block;
  overflow:visible
}

svg text {
  font-family:inherit
}

.dot {
  cursor:pointer
}

.dot:hover circle.outer {
  stroke-width:3
}

.phasebar {
  padding:13px 22px;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  border-top:1px solid var(--line)
}

.phasebar button {
  background:transparent;
  border:1px solid transparent;
  border-radius:30px;
  padding:5px 13px;
  font-size:12px;
  color:var(--muted)
}

.phasebar button.active {
  color:var(--ink);
  border-color:var(--line);
  background:#efeee5
}

.below {
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:36px;
  margin-top:30px
}

.event-head {
  display:flex;
  gap:20px;
  align-items:start
}

.year {
  font:44px/1 Georgia;
  color:var(--red);
  min-width:100px
}

.tag {
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:700
}

h2 {
  font:normal 30px/1.2 Georgia;
  margin:8px 0 13px
}

.lead {
  font-size:16px;
  max-width:800px;
  margin:0 0 22px
}

.event-reading {
  margin-top:24px;
  max-width:800px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fdfbf6
}

.event-reading .reading-body {
  padding-top:18px
}

/* Единая сетка и ритм карточки выбранного события. */
.event-card {
  min-width:0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fdfbf6
}

.event-card .event-head { gap:16px; margin-bottom:16px }
.event-card .event-head > div:last-child { min-width:0 }
.event-card .year { min-width:0; flex-shrink:0; font-size:36px; line-height:1.2 }
.event-card .tag { font-size:11px; letter-spacing:1px }
.event-card h2 { margin:6px 0 0; overflow-wrap:anywhere }
.event-card .lead { max-width:none; margin:0 0 24px; line-height:1.65 }
.chain { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden }
.chain > div { min-width:0; padding:18px; background:var(--paper) }
.chain > div + div { border-left:1px solid var(--line) }
.chain h2,.chain h3 { font:700 11px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin:0 0 8px }
.chain p { margin:0; font-size:15px; line-height:1.65 }
.event-card .event-reading { max-width:none; margin-top:24px; border:0; border-radius:0; background:transparent }
.event-card .reading-body { padding:0; font-size:15px }
.event-card .reading-body > p { max-width:none; line-height:1.65; margin-bottom:16px }
.event-reading-footer { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px }
.event-reading-footer > a { font-weight:600 }
.event-card .event-nav { gap:12px }
.event-card .event-nav button { font-size:14px }

@media (max-width:600px) {
  .event-card { padding:18px }
  .event-card .event-head { flex-direction:column; gap:8px }
  .chain { grid-template-columns:1fr }
  .chain > div { padding:16px }
  .chain > div + div { border-left:0; border-top:1px solid var(--line) }
  .event-card .event-nav { flex-wrap:wrap }
}

.reading-body {
  padding:0 20px 18px;
  overflow-wrap:anywhere
}

.reading-body > p {
  max-width:68ch;
  margin:0 0 16px;
  line-height:1.75
}

.reading-body h3 {
  margin:30px 0 12px;
  font:normal 23px/1.3 Georgia,serif
}

.reading-body h4 {
  margin:22px 0 10px;
  font-size:16px
}

.reading-body a {
  color:var(--blue);
  text-underline-offset:3px
}

.reading-body blockquote {
  border-left:3px solid var(--gold);
  padding:2px 0 2px 18px;
  margin:22px 0;
  color:var(--muted)
}

.reading-body blockquote:has(br) {
  color:var(--ink);
  line-height:1.8
}

.reading-body img {
  display:block;
  max-width:100%;
  height:auto;
  border-radius:5px
}

.reading-body p:has(> img) + p:has(> em:only-child) {
  font-size:12px;
  color:var(--muted)
}

.reading-table {
  overflow-x:auto;
  margin:22px 0;
  border:1px solid var(--line);
  border-radius:5px
}

.reading-table table {
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  line-height:1.6
}

.reading-table th,.reading-table td {
  min-width:130px;
  padding:10px 12px;
  vertical-align:top;
  text-align:left;
  border-bottom:1px solid var(--line)
}

.reading-table th {
  background:#efeee5;
  font-weight:600
}

.reading-table tr:last-child td {
  border-bottom:0
}

.sources {
  list-style:none;
  padding:0;
  margin:0
}

.sources li {
  border-top:1px solid var(--line);
  padding:13px 0
}

.source-kind {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:5px
}

.sources a {
  color:var(--blue);
  text-underline-offset:3px
}

.sources p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px
}

.relations button {
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:5px;
  background:transparent;
  text-align:left
}

.event-nav {
  margin-top:24px;
  padding-top:17px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center
}

.event-nav button,.plain {
  border:0;
  background:transparent;
  color:var(--ink);
  padding:7px 0
}

.event-nav span {
  font-size:12px;
  color:var(--muted)
}

aside {
  border-left:1px solid var(--line);
  padding-left:27px
}

aside p {
  font-size:13px;
  color:var(--muted)
}

.progress {
  height:4px;
  background:var(--line);
  margin:17px 0 8px
}

.progress i {
  display:block;
  height:100%;
  background:var(--red)
}

.bookmark {
  background:transparent;
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:5px;
  font-size:12px
}

.quiz {
  border:1px solid var(--line);
  padding:25px;
  border-radius:9px;
  background:#fdfbf6
}

.quiz button.option {
  width:100%;
  display:block;
  text-align:left;
  border:1px solid var(--line);
  background:transparent;
  margin-top:10px;
  padding:13px;
  border-radius:5px
}

.quiz button.correct {
  background:#e2ecdf;
  border-color:#72946b
}

.quiz button.wrong {
  background:#f2dfd9;
  border-color:var(--red)
}

.quiz .next {
  background:var(--ink);
  color:white;
  border:0;
  border-radius:5px;
  padding:10px 18px;
  margin-top:18px
}

footer {
  margin-top:40px;
  padding-top:15px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:20px;
  justify-content:space-between
}

footer a {
  color:inherit
}

details {
  max-width:780px
}

summary {
  cursor:pointer
}

.hint {
  font-size:12px;
  color:var(--muted)
}

@media(max-width:760px) {
  header {
  padding:16px 5%
}

header small {
  font-size:10px
}

main {
  padding:18px 5%
}

.intro {
  align-items:start;
  flex-direction:column
}

h1 {
  font-size:47px
}

.panel-top {
  padding:12px
}

.panel-top span {
  max-width:150px;
  text-align:right;
  font-size:10px
}

.below {
  grid-template-columns:1fr;
  gap:24px
}

aside {
  border-left:0;
  border-top:1px solid var(--line);
  padding:20px 0 0
}

.event-head {
  gap:12px
}

.year {
  font-size:34px;
  min-width:77px
}

h2 {
  font-size:25px
}


footer {
  flex-direction:column;
  gap:8px
}


}

/* Общие страницы справочника. */
[hidden] { display:none !important }
a { color:var(--blue); text-underline-offset:3px }
.brand { color:var(--ink); text-decoration:none }
.breadcrumbs { margin-bottom:18px; color:var(--muted); font-size:13px }
.period-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px; margin-top:36px }
.period-card { padding:28px; border:1px solid var(--line); border-radius:10px; background:#fdfbf6 }
.period-card h2 { font:normal 30px/1.2 Georgia,serif }
.period-card-with-portrait { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:24px }
.period-card .period-portrait { width:96px; height:120px }
@media (max-width:600px) {
  .period-card-with-portrait { grid-template-columns:64px minmax(0,1fr); gap:16px; padding:20px }
  .period-card .period-portrait { width:64px; height:80px; align-self:start }
}
.article-page { max-width:850px; margin:0 auto }
.article-page h1 { font-size:clamp(36px,5vw,60px); overflow-wrap:anywhere }
.article-page .reading-body { padding:0; max-height:none }
.article-heading { margin-bottom:20px }
.article-heading h1 { margin:12px 0 0 }
.article-map-link { color:inherit; text-decoration:none; border-radius:4px }
.article-map-link:hover,.article-map-link:focus-visible { color:var(--blue); text-decoration:underline; text-underline-offset:3px }
.article-reading { margin-top:32px; padding-top:24px; border-top:1px solid var(--line) }
.article-reading > h2 { margin:0 0 20px }
.article-page .event-nav { flex-wrap:wrap; gap:16px }
.event-index { max-width:900px; margin-top:40px }
.event-index li { padding:8px 0 }
.event-index li p { margin:6px 0; color:var(--muted) }
.editorial-note { margin-top:28px }
.relations { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:stretch; gap:8px }
.relations h2 { margin:0 0 4px; font-size:22px }
.relations button { font-size:13px; padding:10px 12px; overflow-wrap:anywhere }
.event-sidebar { display:flex; flex-direction:column; gap:24px }
.event-sidebar .relations { margin:0; padding:0; border:0 }
.event-sidebar .relations button {
  background:#e9eeeb;
  border-color:#9caea5;
  color:var(--ink);
  border-radius:8px;
  box-shadow:0 2px 4px #282e2b0d;
  line-height:1.5
}
.event-sidebar .relations button:hover,
.event-sidebar .relations button:focus-visible {
  background:#dce7e1;
  border-color:var(--blue)
}
.event-sidebar #progress-panel { margin-top:auto; padding-top:20px; border-top:1px solid var(--line) }
.event-sidebar .progress { margin-top:0 }
@media(max-width:600px) { header { gap:16px; flex-wrap:wrap } .breadcrumbs { overflow-wrap:anywhere } }