/* Хронология /destiny/ (06.09.2026). Три колонки: слои и карта · лента · панель события.
   Цвет несёт слой (переменная --c на элементе), а не важность. Без main.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1f2429; background: #f7f7f4;
}
a { color: #0b62a4; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid #0b62a4; outline-offset: 2px; }
button { font: inherit; color: inherit; }
.sr { position: absolute; left: -9999px; }

.d-app { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 0; min-height: 100vh; }
.d-app.has-panel { grid-template-columns: 16rem minmax(0, 1fr) 22rem; }

/* ---- левая колонка: всегда на месте */
.d-left { position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto; padding: 1.1rem 1rem 1rem; border-right: 1px solid #dfe2dd; background: #f1f2ee; display: flex; flex-direction: column; gap: 1rem; }
.d-name { display: block; font-weight: 600; color: #1f2429; font-size: 1rem; }
.d-sub { font-size: .8rem; color: #6b737c; margin-top: .15rem; }
.d-langs { display: flex; gap: .6rem; font-size: .75rem; letter-spacing: .08em; margin-top: .5rem; }
.d-langs a { color: #6b737c; }
.d-langs a.active { color: #1f2429; font-weight: 600; }

.d-layers { display: flex; flex-direction: column; gap: .15rem; }
.d-layer { display: grid; grid-template-columns: .8rem 1fr auto; align-items: center; gap: .55rem; width: 100%; text-align: left; padding: .38rem .5rem; border: 0; border-radius: 3px; background: transparent; cursor: pointer; font-size: .92rem; }
.d-layer:hover { background: #e8eae4; }
.d-layer .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c, #999); box-shadow: 0 0 0 2px #f1f2ee; }
.d-layer .n { font-variant-numeric: tabular-nums; font-size: .78rem; color: #6b737c; }
.d-layer.active { background: #fff; box-shadow: inset 3px 0 0 var(--c); font-weight: 600; }
.d-layer.all .dot { background: conic-gradient(#5b6470, #b5651d, #2e7d6b, #6a4c93, #0b62a4, #3c7a3c, #9a7a3a, #a33a3a, #5b6470); }
.d-layer.dim { opacity: .55; }

.d-search input { width: 100%; padding: .45rem .6rem; border: 1px solid #cfd3cc; border-radius: 3px; background: #fff; font: inherit; font-size: .9rem; }

/* перечень мест: клик фильтрует остановки по месту */
.d-h { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6b737c; font-weight: 600; margin-bottom: .3rem; }
.d-places ol { list-style: none; margin: 0; padding: 0; }
.d-place { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .5rem; width: 100%; text-align: left; padding: .28rem .5rem; border: 0; border-radius: 3px; background: transparent; cursor: pointer; font-size: .86rem; line-height: 1.25; }
.d-place:hover { background: #e8eae4; }
.d-place.active { background: #fff; box-shadow: inset 3px 0 0 #2e7d6b; font-weight: 600; }
.d-place.zero { opacity: .4; }
.d-place .yrs { grid-column: 1; font-size: .74rem; color: #6b737c; font-variant-numeric: tabular-nums; }
.d-place .n { font-variant-numeric: tabular-nums; font-size: .76rem; color: #6b737c; grid-row: 1; grid-column: 2; }
.d-place .geo { font-size: .7rem; color: #9aa2ab; font-variant-numeric: tabular-nums; grid-column: 1; }

.d-links { margin-top: auto; display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }

/* ---- лента */
.d-main { padding: 1.4rem 2rem 4rem; max-width: 52rem; }
.d-main h1 { font-size: 1.6rem; margin: 0 0 .4rem; font-weight: 600; }
.d-main .v-lead { color: #3c454f; max-width: 62ch; margin: 0 0 .8rem; }
.d-count { font-size: .82rem; color: #6b737c; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.d-keys { font-size: .78rem; color: #8a929b; margin-top: 2rem; }

.d-timeline { list-style: none; margin: 0; padding: 0 0 0 5.2rem; position: relative; }
/* маршрут: пунктир слева от остановок */
.d-timeline::before { content: ""; position: absolute; left: 3.55rem; top: .4rem; bottom: .4rem; border-left: 2px dotted #b9beb6; }
.d-decade { position: relative; margin: 1.6rem 0 .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #6b737c; }
.d-decade::before { content: ""; position: absolute; left: -1.95rem; top: .55rem; width: .9rem; height: .9rem; border-radius: 50%; background: #f7f7f4; border: 2px solid #b9beb6; }
.d-decade[hidden] { display: none; }

.d-stop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .55rem .6rem .55rem .9rem; margin: 0 0 .2rem; border-radius: 4px; cursor: pointer; }
.d-stop:hover { background: #eef0eb; }
.d-stop.sel { background: #fff; box-shadow: 0 0 0 1px #dfe2dd, inset 3px 0 0 var(--c); }
.d-stop.dim { opacity: .38; }
.d-stop[hidden] { display: none; }
.d-stop .y { position: absolute; left: -5.2rem; width: 3.1rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; color: #6b737c; top: .62rem; }
.d-stop .pin { position: absolute; left: -1.98rem; top: .78rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--c); border: 2px solid #f7f7f4; box-shadow: 0 0 0 1px var(--c); }
.d-stop.unconfirmed .pin { background: #f7f7f4; border: 2px dashed var(--c); box-shadow: none; }
.d-stop .t, .d-stop .m, .d-stop .dev { grid-column: 1; min-width: 0; }
.d-stop .t { font-weight: 600; line-height: 1.3; }
.d-stop .m { font-size: .82rem; color: #6b737c; }
.d-stop .m .pl::before { content: "· "; }
.d-stop .m .pl:first-child::before { content: ""; }
.d-stop .tag { display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c); border: 1px solid currentColor; border-radius: 3px; padding: 0 .35rem; margin-right: .4rem; vertical-align: middle; }
.d-stop .dev { font-size: .8rem; color: #3c454f; }
.d-stop .dev b { color: var(--c); font-weight: 600; }
.d-stop .thumb { grid-row: 1 / span 3; grid-column: 2; width: 2.6rem; height: 3.6rem; object-fit: cover; border: 1px solid #dfe2dd; background: #fff; }
.d-stop .thumb.wide { width: 4.4rem; height: 3rem; }
.d-spanbar { position: absolute; width: 3px; border-radius: 2px; background: var(--c); opacity: .35; top: 0; bottom: -0.2rem; left: calc(-3.55rem - 1px - var(--k) * 6px); }

/* ---- панель события */
.d-right { position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto; padding: 1.1rem 1.2rem 2rem; border-left: 1px solid #dfe2dd; background: #fff; }
.d-right[hidden] { display: none; }
.d-right .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.d-right .layerlbl { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.d-right h2 { font-size: 1.1rem; line-height: 1.3; margin: .3rem 0 .4rem; font-weight: 600; }
.d-right .date { font-variant-numeric: tabular-nums; color: #6b737c; font-size: .9rem; }
.d-right .close { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: #6b737c; padding: .1rem .3rem; }
.d-right img.big { max-width: 100%; max-height: 16rem; display: block; margin: .8rem 0; border: 1px solid #dfe2dd; }
.d-right .note { margin: .5rem 0; color: #3c454f; font-size: .95rem; }
.d-right .src { font-size: .85rem; color: #6b737c; margin: .6rem 0; padding: .5rem .6rem; background: #f7f7f4; border-radius: 3px; }
.d-right .warn { font-size: .85rem; color: #8a5a12; background: #f5e8cf; padding: .4rem .6rem; border-radius: 3px; margin: .6rem 0; }
.d-right h3 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #6b737c; margin: 1.2rem 0 .4rem; font-weight: 600; }
.d-right ol { list-style: none; margin: 0; padding: 0; }
.d-right li { padding: .3rem 0; border-top: 1px dashed #e6e8e3; font-size: .9rem; }
.d-right li button { border: 0; background: transparent; text-align: left; padding: 0; cursor: pointer; color: #1f2429; }
.d-right li button:hover { text-decoration: underline; }
.d-right li.cur button { font-weight: 600; color: var(--c); }
.d-right li .yy { font-variant-numeric: tabular-nums; color: #6b737c; margin-right: .5rem; font-size: .82rem; }
.d-right .nav { display: flex; gap: .6rem; margin-top: 1rem; }
.d-right .nav button { border: 1px solid #cfd3cc; background: #fff; border-radius: 3px; padding: .3rem .6rem; cursor: pointer; font-size: .85rem; }

mark { background: #fff2a8; color: inherit; }

/* ---- узкие экраны: слои строкой, панель поверх */
@media (max-width: 900px) {
  .d-app, .d-app.has-panel { grid-template-columns: 1fr; }
  .d-left { position: static; height: auto; border-right: 0; border-bottom: 1px solid #dfe2dd; }
  .d-layers { flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  .d-layer { width: auto; grid-template-columns: .7rem auto auto; padding: .25rem .5rem; border: 1px solid #dfe2dd; background: #fff; }
  .d-places ol { display: flex; flex-wrap: wrap; gap: .3rem; }
  .d-place { width: auto; display: flex; gap: .4rem; border: 1px solid #dfe2dd; background: #fff; padding: .2rem .5rem; }
  .d-place .yrs, .d-place .geo { display: none; }
  .d-links { flex-direction: row; gap: 1rem; }
  .d-main { padding: 1rem 1rem 3rem; }
  .d-right { position: fixed; inset: auto 0 0 0; height: 70vh; border-left: 0; border-top: 1px solid #dfe2dd; box-shadow: 0 -8px 24px rgba(0,0,0,.08); z-index: 5; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .d-left, .d-right, .d-keys { display: none; } .d-app { display: block; } }

/* переключатель версий сайта: в узкой левой колонке — столбиком, без переносов внутри «таблеток» */
.view-switch { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin: 0; font-size: .78rem; letter-spacing: .04em; }
.view-switch a { color: #5b6470; padding: .15rem .6rem; border: 1px solid #d9dcd6; border-radius: 999px; background: #fff; text-decoration: none; white-space: nowrap; }
.view-switch a.active { background: #1f2429; color: #fff; border-color: #1f2429; }
@media (max-width: 900px) { .view-switch { flex-direction: row; flex-wrap: wrap; } }

/* страница-материал в облике хронологии: левая колонка без ленты, текст справа */
.d-app-material { grid-template-columns: 16rem minmax(0, 1fr); }
.d-back { display: inline-block; font-size: .9rem; color: #1f2429; font-weight: 600; }
.d-material { max-width: 52rem; }
.d-material p, .d-material li { max-width: 70ch; line-height: 1.55; }
.d-material h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; padding-top: .8rem; border-top: 1px solid #e6e8e3; }
.d-material h3 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
.d-material img { max-width: 100%; height: auto; }
.d-material figure { margin: 1rem 0; }
.d-material blockquote { margin: 1rem 0; padding: .4rem 1rem; border-left: 3px solid #9a7a3a; color: #3c454f; }
.d-material table { border-collapse: collapse; font-size: .92rem; }
.d-material th, .d-material td { border-bottom: 1px solid #e6e8e3; padding: .35rem .6rem; text-align: left; vertical-align: top; }
.d-material h2, .d-material h3 { clear: both; }
.d-material .book-cover { float: right; margin: 0 0 1rem 1.2rem; max-width: 9rem; }
.d-material .book-cover img { border: 1px solid #dfe2dd; }
.d-material .book-reviews { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1.4rem; padding: 0; }
.d-material .review-badge { display: block; max-width: 18rem; padding: .4rem .7rem; border-left: 3px solid #9a7a3a; background: #f1f2ee; color: #1f2429; font-size: .85rem; text-decoration: none; }
.d-material .review-badge span { display: block; }
.d-material .review-badge .rb-src { color: #6b737c; font-size: .78rem; }
.d-kids { list-style: none; padding: 0; }
.d-kids li { padding: .5rem 0; border-top: 1px solid #e6e8e3; max-width: none; }
@media (max-width: 900px) { .d-app-material { grid-template-columns: 1fr; } }

/* Разметка из контента в облике хронологии: галереи, портрет, сканы, цитата в бейдже.
   main.css здесь не грузится, поэтому правила свои (12.09.2026). */
.d-material .photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .7rem; margin: 1.2rem 0 1.8rem; }
.d-material .photo-gallery-tall { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid #e6e8e3; }
.d-material .photo-item { margin: 0; }
.d-material .photo-item img { display: block; width: 100%; height: auto; border: 1px solid #dfe2dd; }
.d-material .photo-gallery figcaption, .d-material .photo-item figcaption { margin-top: .3rem; color: #6b737c; font-size: .82rem; line-height: 1.4; }
.d-material .photo-lead { margin: 0 0 1.4rem; max-width: 34rem; }
.d-material .photo-lead img { display: block; width: 100%; height: auto; border: 1px solid #dfe2dd; }
.d-material .review-badge .rb-quote { display: block; margin-top: .15rem; color: #33404f; font-size: .88rem; font-style: italic; line-height: 1.4; }
.d-material .review-badge .rb-who { display: block; margin-top: .2rem; color: #9a7a3a; font-size: .8rem; }
.d-material .bio-portrait { float: right; margin: 0 0 1.2rem 1.4rem; max-width: 16rem; text-align: center; }
.d-material .bio-portrait img { display: block; width: 100%; height: auto; border: 1px solid #dfe2dd; }
.d-material .bio-portrait figcaption, .d-material .scan-pair figcaption { margin-top: .4rem; color: #6b737c; font-size: .84rem; line-height: 1.45; }
.d-material .scan-pair { margin: 1.2rem 0 1.8rem; }
.d-material .scan-pair img { display: block; width: 100%; height: auto; border: 1px solid #dfe2dd; }
@media (max-width: 640px) { .d-material .bio-portrait { float: none; margin: 0 auto 1.2rem; max-width: 18rem; } }

@media (max-width: 480px) {
  .d-material .book-cover { float: none; margin: .4rem 0 1rem; max-width: 10rem; }
}