/* --- Локальные шрифты ------------------------------------------------------ */

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-sans-jp-subset.woff2") format("woff2");
}

/* ==========================================================================
   Сейлор Мун — Лунный архив. Оформление сайта.
   Ночь наверху, рассвет внизу; золото, стекло, звёзды.
   Шрифты подключаются локально из assets/fonts (см. блок @font-face ниже).
   ========================================================================== */

/* --- Токены --------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Ночь */
  --night-0: #07071f;
  --night-1: #0a0a2e;
  --night-2: #1a0b3d;
  --night-3: #2d1b4e;
  --night-4: #3d2566;

  /* Лунное золото */
  --gold: #f2c35c;
  --gold-soft: #ffe9a8;
  --gold-deep: #a8792a;
  --gold-line: rgba(242, 195, 92, 0.32);
  --gold-line-soft: rgba(242, 195, 92, 0.16);

  /* Розовая линия */
  --rose: #ff5fa2;
  --rose-soft: #ffd6e8;
  --rose-deep: #b62a63;

  /* Лунная бумага — нижняя, светлая половина */
  --paper-0: #fff6f9;
  --paper-1: #ffeef5;
  --paper-2: #ffe2ee;
  --ink: #3a2b45;
  --ink-soft: #6b5875;

  /* Текст на ночи */
  --text: #f4ecff;
  --text-dim: #c3b6da;
  --text-faint: #8f83ab;

  /* Стекло */
  --glass: rgba(28, 16, 58, 0.55);
  --glass-strong: rgba(18, 10, 42, 0.78);
  --glass-edge: rgba(255, 233, 168, 0.22);

  /* Планеты — цвет карточки воина */
  --p-moon: #f7d774;
  --p-mercury: #6fd1ff;
  --p-mars: #ff5b5b;
  --p-jupiter: #57d38f;
  --p-venus: #ffb347;
  --p-uranus: #7fe3e0;
  --p-neptune: #5b7bff;
  --p-pluto: #b06bff;
  --p-saturn: #d8b8ff;
  --p-chibi: #ff8fc2;
  --p-tuxedo: #8f1d3a;

  /* Размеры */
  --rail: 232px;
  --frame: 14px;
  --radius: 18px;
  --radius-lg: 26px;
  --shell: 1440px;

  --font-display: "Cormorant", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Golos Text", "Onest", "Segoe UI", system-ui, sans-serif;
  --font-jp: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

/* --- Сброс ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 0.55vw + 13px, 17px);
  line-height: 1.7;
  color: var(--text);
  background: var(--night-1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Звёздное небо и переход «ночь → рассвет» ------------------------------ */
/* Слой неба живёт под всем содержимым и светлеет по мере прокрутки страницы.
   Делается нативной scroll-driven анимацией — без единой строчки JS. */

.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(120, 78, 190, 0.55) 0%, transparent 60%),
    radial-gradient(90% 60% at 12% 4%, rgba(58, 40, 130, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, var(--night-0) 0%, var(--night-1) 34%, var(--night-2) 68%, var(--night-3) 100%);
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(255, 233, 168, 0.8) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 48% 26%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 66% 74%, rgba(255, 214, 232, 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 34%, rgba(255, 255, 255, 0.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 92% 66%, rgba(255, 233, 168, 0.7) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 36% 88%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 12%, rgba(255, 255, 255, 0.7) 50%, transparent 51%);
  background-size: 100% 100%;
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

@supports (animation-timeline: scroll()) {
  .sky {
    animation: dawn linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 70%;
  }
  @keyframes dawn {
    to {
      background:
        radial-gradient(120% 80% at 78% 8%, rgba(255, 149, 194, 0.35) 0%, transparent 60%),
        radial-gradient(90% 60% at 12% 4%, rgba(146, 108, 214, 0.3) 0%, transparent 55%),
        linear-gradient(180deg, var(--night-2) 0%, var(--night-3) 30%, #6b4a86 62%, var(--paper-2) 100%);
    }
  }
}

/* --- Оболочка страницы и золотая рамка ------------------------------------ */

.shell {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--frame);
}

.shell::before {
  content: "";
  position: absolute;
  inset: var(--frame);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 3;
}

.corner {
  position: absolute;
  width: 74px;
  height: 74px;
  color: var(--gold);
  opacity: 0.75;
  pointer-events: none;
  z-index: 4;
}
.corner-tl { top: var(--frame); left: var(--frame); }
.corner-tr { top: var(--frame); right: var(--frame); transform: scaleX(-1); }
.corner-bl { bottom: var(--frame); left: var(--frame); transform: scaleY(-1); }
.corner-br { bottom: var(--frame); right: var(--frame); transform: scale(-1); }

/* --- Шапка ---------------------------------------------------------------- */

.top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px clamp(16px, 2vw, 30px);
  border-bottom: 1px solid var(--gold-line-soft);
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 46px; height: 46px; color: var(--gold); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }

.brand-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.6vw, 30px);
  font-weight: 600;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-sub {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.42em;
  color: var(--gold);
  opacity: 0.72;
}

.top-spacer { flex: 1; }

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: clamp(180px, 24vw, 320px);
  padding: 9px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text-dim);
  font-size: 14px;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  outline: none;
}
.search input::placeholder { color: var(--text-faint); }

/* Ушко фазы луны — живая деталь, считается в браузере */
.moon-ear {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 10px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--glass);
  text-align: left;
}
.moon-ear:hover { border-color: var(--gold); }
.moon-ear .disc { width: 34px; height: 34px; flex: none; }
.moon-ear .phase-name {
  display: block;
  font-size: 13px;
  color: var(--gold-soft);
  white-space: nowrap;
}
.moon-ear .phase-day {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.burger { display: none; }

/* --- Раскладка: боковое меню + содержимое --------------------------------- */

.layout {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(14px, 1.6vw, 26px) clamp(16px, 2vw, 30px) 0;
}

.rail { position: sticky; top: 18px; align-self: start; }

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
}

.rail-link {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.rail-link svg { width: 22px; height: 22px; color: var(--gold); opacity: 0.85; }
.rail-link .ru { font-size: 15px; line-height: 1.2; }
.rail-link .jp {
  display: block;
  font-family: var(--font-jp);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.rail-link:hover {
  background: rgba(255, 233, 168, 0.07);
  border-color: var(--gold-line);
  transform: translateX(3px);
}
.rail-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255, 95, 162, 0.22), rgba(255, 233, 168, 0.08));
  border-color: var(--gold-line);
}
.rail-link[aria-current="page"] .ru { color: var(--gold-soft); }

.rail-note {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius);
  background: var(--glass);
  font-size: 13px;
  color: var(--text-dim);
}
.rail-note b { color: var(--gold-soft); font-weight: 500; }

/* --- Герой ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 46vw, 560px);
  display: flex;
  align-items: center;
  padding: clamp(24px, 3vw, 54px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(10, 10, 46, 0.92) 0%, rgba(45, 27, 78, 0.55) 48%, rgba(45, 27, 78, 0.1) 100%);
  view-transition-name: hero;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7, 7, 31, 0.96) 0%, rgba(10, 10, 46, 0.85) 48%, rgba(10, 10, 46, 0.15) 85%);
}

.hero-body { position: relative; max-width: 42ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 6px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: rgba(10, 10, 46, 0.5);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 86px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-wrap: balance;
  background: linear-gradient(180deg, #fffdf6 0%, var(--gold-soft) 38%, var(--gold) 72%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(242, 195, 92, 0.28));
}

.hero-jp {
  margin-top: 6px;
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: 0.3em;
  color: var(--rose-soft);
}

.hero p.lead {
  margin-top: 18px;
  font-size: clamp(15px, 1.05vw, 18px);
  color: var(--text-dim);
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 15px;
  color: var(--night-0);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(242, 195, 92, 0.28); }

.btn-ghost {
  color: var(--gold-soft);
  background: rgba(10, 10, 46, 0.5);
  border-color: var(--gold-line);
}
.btn-ghost:hover { border-color: var(--gold); box-shadow: 0 10px 26px rgba(255, 95, 162, 0.2); }

/* --- Кромка «ночь → рассвет» ---------------------------------------------- */

.dawn-edge { position: relative; margin-top: clamp(28px, 4vw, 60px); line-height: 0; }
.dawn-edge svg { width: 100%; height: clamp(48px, 6vw, 92px); color: var(--paper-0); }

/* --- Светлая половина ------------------------------------------------------ */

.daylight {
  position: relative;
  padding: clamp(24px, 3vw, 46px) clamp(18px, 2.4vw, 44px) clamp(36px, 4vw, 64px);
  background: linear-gradient(180deg, var(--paper-0) 0%, var(--paper-1) 60%, var(--paper-2) 100%);
  color: var(--ink);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.daylight h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 600;
  color: var(--rose-deep);
}
.daylight h2 svg { width: 24px; height: 24px; color: var(--rose); flex: none; }
.daylight h2 .jp {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-soft);
  margin-left: auto;
}

/* Бенто */
.bento {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.95fr;
  gap: clamp(14px, 1.4vw, 22px);
  align-items: start;
}

/* Лунная страница: календарь шире карточки предсказания. Раньше эти же
   значения стояли инлайном в разметке, и ни одно правило из файла их не
   перебивало — включая перевод бенто в одну колонку на телефоне. Календарь
   оставался в колонке 176 px, ячейка выходила 14 px, а диск луны — 4 px,
   то есть точка. Здесь это обычный класс, и медиазапросы ниже работают. */
.bento--luna { grid-template-columns: 1fr 1.6fr; }

.card {
  container-type: inline-size;
  padding: clamp(16px, 1.4vw, 24px);
  border: 1px solid rgba(182, 42, 99, 0.14);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 30px rgba(182, 42, 99, 0.07);
}

.news-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(182, 42, 99, 0.12);
  transition: transform 0.25s ease;
}
.news-item:last-child { border-bottom: 0; }
.news-item:hover { transform: translateX(4px); }
.news-item img, .news-item .ph {
  width: 92px; height: 62px;
  object-fit: cover;
  border-radius: 10px;
}
.news-item h3 { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.news-item p { font-size: 13px; color: var(--ink-soft); }
.news-item time { font-size: 11px; letter-spacing: 0.14em; color: var(--rose); }

.explore {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.explore a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Отступ только снизу и по бокам: картинка идёт от края до края карточки,
     как в остальных плитках сайта. */
  padding: 0 10px 14px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, var(--paper-1) 100%);
  border: 1px solid rgba(182, 42, 99, 0.12);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.explore a:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(182, 42, 99, 0.14); }
.explore .disc {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--paper-2) 70%);
  border: 1px solid rgba(182, 42, 99, 0.16);
}
.explore .disc svg { width: 30px; height: 30px; color: var(--rose-deep); }
/* Миниатюра раздела. Раньше здесь был кружок с общей иконкой — одинаковый
   по смыслу для всех четырёх плиток и потому пустой. Теперь берём готовый
   кадр из самого раздела: воинов, хроники, галереи и манги. */

.explore .thumb {
  display: block;
  width: calc(100% + 20px);
  margin: 0 -10px 8px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(150deg, var(--night-2), var(--night-3));
}

.explore .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .explore a:hover .thumb img { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .explore .thumb img { transition: none; }
  .explore a:hover .thumb img { transform: none; }
}

.explore span { font-size: 14px; color: var(--ink); }
.explore small { font-size: 11px; color: var(--ink-soft); }

/* Предсказание дня */
.fortune {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 1.6vw, 26px);
  border-radius: var(--radius);
  border: 1px solid rgba(242, 195, 92, 0.35);
  background: linear-gradient(165deg, var(--night-2) 0%, var(--night-3) 60%, #5a3a7a 100%);
  color: var(--text);
}
.fortune .disc-big { width: 96px; height: 96px; margin: 0 auto; }
.fortune .date {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.fortune .phase {
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold-soft);
}
.fortune .text {
  font-size: 15px;
  text-align: center;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* Лента воинов */
/* Лента воинов. Базовое поведение — обычная прокрутка пальцем или колесом;
   карусель включается ниже и только там, где есть мышь. */

.guardians {
  margin-top: clamp(24px, 3vw, 42px);
  padding-bottom: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.guardians-track {
  display: flex;
  gap: 14px;
  width: max-content;
}

/* Потомок, а не прямой ребёнок: копии лежат внутри .guardians-copy, и при
   display: contents они становятся элементами флекса, но по DOM остаются
   детьми обёртки. С селектором > ширина к ним не применялась, дорожка
   выходила на 340 px шире положенного, и лента дёргалась на стыке круга. */
.guardians-track .guardian { flex: 0 0 168px; }

/* Второй набор карточек нужен только едущей ленте: без него на стыке круга
   был бы рывок. Пока карусель выключена, копии просто не существуют. */
.guardians-copy { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .guardians {
    overflow: hidden;
    scroll-snap-type: none;
    /* Края растворяются вместо резкого обруба: у едущей ленты карточка
       всегда наполовину за краем, и без этого она выглядит отрубленной. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }

  .guardians-copy { display: contents; }

  .guardians-track {
    animation: guardians-roll 52s linear infinite;
  }

  /* Навести мышь — лента останавливается, чтобы можно было прочитать
     карточку и попасть по ней. Focus-within — то же самое для клавиатуры. */
  .guardians:hover .guardians-track,
  .guardians:focus-within .guardians-track { animation-play-state: paused; }
}

/* Сдвиг ровно на один набор: в дорожке 20 карточек и 19 промежутков, её
   половина — это 10 карточек и 9,5 промежутка, а набор с промежутком — 10 и
   10. Разница в половину промежутка, отсюда -7px при gap 14px. */
@keyframes guardians-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 7px)); }
}

.guardian {
  position: relative;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(182, 42, 99, 0.16);
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.guardian:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(58, 43, 69, 0.18); }
.guardian .art {
  aspect-ratio: 3 / 4;
  background: linear-gradient(165deg, color-mix(in oklab, var(--accent) 42%, #fff) 0%, color-mix(in oklab, var(--accent) 12%, #fff) 100%);
  display: grid;
  place-items: center;
}
.guardian .art img { width: 100%; height: 100%; object-fit: cover; }
.guardian .art svg { width: 46%; height: 46%; color: color-mix(in oklab, var(--accent) 70%, var(--ink)); }
.guardian .cap {
  padding: 10px 12px 14px;
  /* Имя и подпись по центру карточки: в ленте они читаются как заголовок
     карточки, а не как начало абзаца. */
  text-align: center;
}
.guardian .cap b { display: block; font-weight: 500; font-size: 15px; color: var(--ink); }
.guardian .cap span { display: block; font-size: 12px; color: var(--ink-soft); }
.guardian::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent);
}

/* --- Шапка внутренней страницы --------------------------------------------- */

.page-head {
  padding: clamp(26px, 3.4vw, 54px) clamp(20px, 2.6vw, 46px) clamp(30px, 3.6vw, 56px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, rgba(10, 10, 46, 0.9) 0%, rgba(45, 27, 78, 0.66) 100%);
  view-transition-name: hero;
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
  background: linear-gradient(180deg, #fffdf6 0%, var(--gold-soft) 42%, var(--gold) 78%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-head .hero-jp { margin-top: 8px; }
.page-head p.lead { margin-top: 16px; max-width: 68ch; color: var(--text-dim); text-wrap: pretty; }

/* --- Досье воинов ---------------------------------------------------------- */

.dossier-grid {
  display: grid;
  /* min(300px, 100%) вместо голых 300px: на узком экране колонка иначе не
     ужимается ниже своего минимума и карточка вылезает за край — на 320 px
     досье выходило за экран на 25 px. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.dossier {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(182, 42, 99, 0.16);
  background: #fff;
  box-shadow: 0 14px 30px rgba(58, 43, 69, 0.1);
  scroll-margin-top: 90px;
}
.dossier .art {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, color-mix(in oklab, var(--accent) 46%, #fff) 0%, color-mix(in oklab, var(--accent) 10%, #fff) 100%);
}
.dossier .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dossier .art > svg { width: 42%; height: 42%; color: color-mix(in oklab, var(--accent) 62%, var(--ink)); }
.dossier .body { padding: 16px 18px 20px; }
.dossier h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
}
.dossier .jp-name {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.dossier dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 12px 0;
  font-size: 13.5px;
}
.dossier dt { color: var(--ink-soft); }
.dossier dd { margin: 0; color: var(--ink); }
.dossier p { font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }
.dossier .verdict {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(182, 42, 99, 0.24);
  font-size: 13.5px;
  color: color-mix(in oklab, var(--accent) 45%, var(--ink));
}
.dossier .verdict b { font-weight: 500; }

/* Цветовые образцы воина, символика и плашка ключевой черты — обогащение досье */
.dossier .colors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.dossier .colors b { font-weight: 500; color: var(--ink); }
.dossier .swatches { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.dossier .swatch { display: inline-flex; align-items: center; gap: 5px; }
.dossier .swatch i {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(58, 43, 69, 0.18);
}
.dossier .symbolism {
  margin-top: 8px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
}
.dossier .trait {
  display: inline-flex;
  margin-top: 10px;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 30%, var(--ink));
  background: color-mix(in oklab, var(--accent) 16%, #fff);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}

.section-note {
  max-width: 76ch;
  margin: -6px 0 18px;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Приложение к досье: союзник вне десятки -------------------------------
   Сознательно не переиспользует .dossier — это не одиннадцатая карточка, а
   отдельная врезка-приложение, поэтому и вид другой: тёмное стекло вместо
   светлой бумаги карточек, тот же приём (--glass, blur+saturate), что и в
   .rail-nav / .rail-note, только с акцентным цветом самой врезки. */

.appendix {
  position: relative;
  margin-top: clamp(28px, 3vw, 46px);
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--gold-line));
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--glass-strong) 0%, color-mix(in oklab, var(--accent) 24%, var(--glass)) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--text-dim);
}
.appendix-art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, color-mix(in oklab, var(--accent) 55%, var(--night-2)) 0%, var(--night-1) 100%);
}
.appendix-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.appendix-art > svg { width: 40%; height: 40%; color: color-mix(in oklab, var(--accent) 55%, var(--text-faint)); }
.appendix-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 7, 31, 0.72);
  border: 1px solid var(--gold-line);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.appendix-badge svg { width: 13px; height: 13px; color: var(--accent); }
.appendix-body h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-soft);
}
.appendix-body .jp-name {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.appendix-body p { margin-top: 10px; font-size: 14.5px; color: var(--text-dim); text-wrap: pretty; }
.appendix-body p:first-of-type { margin-top: 0; }
.appendix-tag {
  display: inline-flex;
  margin-top: 12px;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 55%, var(--gold-soft));
  background: color-mix(in oklab, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
}
.appendix-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
  font-size: 13.5px;
  color: var(--text-dim);
}
.appendix-note b { color: var(--gold-soft); font-weight: 500; }

@media (max-width: 620px) {
  .appendix { grid-template-columns: minmax(0, 1fr); }
  .appendix-art { max-width: 260px; margin: 0 auto; }
}

/* --- Хроника --------------------------------------------------------------- */

.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--rose), var(--gold), var(--rose));
  opacity: 0.5;
}
.era { position: relative; margin-bottom: clamp(18px, 2vw, 30px); }
.era::before {
  content: "";
  position: absolute;
  left: -30px; top: 24px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(255, 95, 162, 0.18);
}
.era-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(182, 42, 99, 0.16);
  background: #fff;
}
.era-card .shot {
  /* Кадр открывается крупно по клику (см. sparkle.js), поэтому и курсор
     соответствующий: без него кликабельность ничем не выдаёт себя. */
  cursor: zoom-in;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--night-2), var(--rose));
}
.era-card .shot img { width: 100%; height: 100%; object-fit: cover; }

/* Наведение на кадр хроники приближает картинку внутри рамки. Рамка .shot
   уже с overflow: hidden, поэтому увеличенное изображение не вылезает за
   её края, а кадр просто становится крупнее — соседние карточки при этом
   не сдвигаются, вёрстка не дышит.

   Только там, где есть настоящее наведение: на тач-экране :hover
   «залипает» после касания, и картинка осталась бы приближённой. */
@media (hover: hover) and (pointer: fine) {
  .era-card .shot img { transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1); }
  .era-card:hover .shot img { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .era-card .shot img { transition: none; }
  .era-card:hover .shot img { transform: none; }
}
.era .year {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--rose);
}
.era h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); }
.era p { font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }

/* --- Лунный календарь ------------------------------------------------------ */

.luna-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.luna-grid .dow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
}
.luna-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(182, 42, 99, 0.12);
  background: #fff;
}
.luna-cell.empty { border: 0; background: none; }
.luna-cell b { font-size: 13px; font-weight: 500; color: var(--ink); }
.luna-cell svg { width: 30px; height: 30px; }
.luna-cell small { font-size: 10px; color: var(--ink-soft); }
.luna-cell.today {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(255, 95, 162, 0.16);
}

/* --- Галерея --------------------------------------------------------------- */

.gallery {
  columns: 4 220px;
  column-gap: 14px;
}
.gallery figure {
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(182, 42, 99, 0.16);
  background: #fff;
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery figure:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(58, 43, 69, 0.16); }
.gallery img { width: 100%; height: auto; }
/* Заглушка держит место, пока картинка грузится, и остаётся насовсем,
   если файла нет: успешно загруженная картинка убирает её сама (onload). */
.gallery .ph { display: block; aspect-ratio: 3 / 4; background: linear-gradient(150deg, var(--night-2), var(--rose)); }
.gallery figcaption { padding: 8px 12px 12px; font-size: 13px; color: var(--ink-soft); }

dialog.lightbox {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--night-1);
  color: var(--text);
}
dialog.lightbox::backdrop { background: rgba(7, 7, 31, 0.86); backdrop-filter: blur(4px); }
dialog.lightbox img { max-width: 100%; max-height: 78vh; margin: 0 auto; }
dialog.lightbox .cap { display: flex; gap: 16px; align-items: center; padding: 12px 16px; font-size: 14px; }
dialog.lightbox .cap button { margin-left: auto; color: var(--gold); }

/* --- Словарь и дневник ----------------------------------------------------- */

.terms { display: grid; gap: 12px; }
.term {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(182, 42, 99, 0.14);
  background: #fff;
}
.term h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--rose-deep);
}
.term h3 span {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.term p { font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }
.term .ex {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--rose-soft);
  font-size: 13.5px;
  color: var(--ink);
  font-style: italic;
}

.entries { display: grid; gap: 16px; }
.entry {
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(182, 42, 99, 0.14);
  background: #fff;
}
.entry time { font-size: 12px; letter-spacing: 0.16em; color: var(--rose); }
.entry h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); margin: 4px 0 8px; }
.entry p { font-size: 15px; color: var(--ink-soft); text-wrap: pretty; }
.entry p + p { margin-top: 10px; }

/* --- Философия: эссе с врезками-цитатами -----------------------------------
   Карточка повторяет устройство .entry со страницы дневника, но это не её
   модификатор: у записи дневника есть <time> и смысл ленты, здесь — эссе с
   парой-заголовком («жизнь и смерть») и цитатой внутри текста. Отдельный
   класс нужен, чтобы правка одной страницы не тащила за собой другую. */

.thoughts { display: grid; gap: 16px; }
.thought {
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(182, 42, 99, 0.14);
  background: #fff;
}
.thought .pair {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
}
.thought h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 10px;
  text-wrap: balance;
}
.thought p { font-size: 15px; color: var(--ink-soft); text-wrap: pretty; }
.thought p + p { margin-top: 10px; }
.thought blockquote {
  margin: 14px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--rose-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in oklab, var(--rose-soft) 26%, #fff);
}
.thought blockquote p {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}
.thought cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--rose-deep);
}
/* Заключительная оговорка — та же карточка, но приглушённая: это не шестое
   эссе, а честная сноска про то, откуда всё вышесказанное взялось. */
.thought--note { background: color-mix(in oklab, var(--rose-soft) 18%, #fff); }
.thought--note h3 { font-size: 22px; color: var(--rose-deep); }

@media (max-width: 640px) {
  .thought { padding: 16px 16px; }
  .thought h3 { font-size: 23px; }
  .thought blockquote { padding: 10px 13px; }
  .thought blockquote p { font-size: 17px; }
}

/* --- Права ----------------------------------------------------------------- */

.prose { max-width: 76ch; }
.prose h3 {
  margin: 26px 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--rose-deep);
}
.prose p, .prose li { font-size: 15px; color: var(--ink-soft); text-wrap: pretty; }
.prose ul { margin: 8px 0; }
.prose li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.prose li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rose);
}
.prose a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--rose); }

.rights-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
.rights-table th, .rights-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(182, 42, 99, 0.14);
  color: var(--ink-soft);
}
.rights-table th { color: var(--rose-deep); font-weight: 500; }
.table-wrap { overflow-x: auto; }

/* --- Подвал --------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(24px, 3vw, 44px);
  padding: clamp(22px, 2.4vw, 34px) clamp(16px, 2vw, 30px);
  border-top: 1px solid var(--gold-line-soft);
  color: var(--text-dim);
  font-size: 14px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.foot h4 {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.foot a:hover { color: var(--gold-soft); }
.foot li { margin-bottom: 6px; }
.foot .motto {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-soft);
}
.foot-brand {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-soft);
}
.foot-about { margin-top: 6px; font-size: 14px; }
.foot-contact { margin-top: 8px; }
.foot-contact a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot-upd { margin-top: 12px; font-size: 13px; color: var(--text-faint); }
.foot .rights {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--gold-line-soft);
  font-size: 12px;
  color: var(--text-faint);
}
.foot .rights + .rights { margin-top: 6px; padding-top: 0; border-top: 0; }

/* --- Форма обратной связи ---------------------------------------------------
   Единственная форма на сайте. Поля стоят на светлой половине, поэтому
   акцент розовый, а не золотой: золото .btn рассчитано на тёмный верх
   и на «лунной бумаге» выглядит чужим. */

.otklik { display: grid; gap: 18px; max-width: 62ch; }
.otklik .field { display: grid; gap: 6px; }
.otklik label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.otklik label span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.otklik input, .otklik select, .otklik textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 11px 13px;
  border: 1px solid rgba(182, 42, 99, 0.28);
  border-radius: 12px;
  background: #fff;
}
.otklik textarea { min-height: 170px; line-height: 1.55; resize: vertical; }
.otklik input::placeholder, .otklik textarea::placeholder { color: color-mix(in oklab, var(--ink-soft) 55%, #fff); }
.otklik input:focus-visible, .otklik select:focus-visible, .otklik textarea:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 1px;
  border-color: var(--rose);
}
.otklik button {
  justify-self: start;
  padding: 12px 30px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rose), var(--rose-deep));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.otklik button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(182, 42, 99, 0.28); }
/* Ловушка для роботов: поле уводится за край экрана, но остаётся в потоке и
   с подписью — тот, кто слушает страницу диктором, услышит просьбу не
   заполнять его. Скрывать через display:none нельзя: часть роботов
   заполняет как раз то, что спрятано таким образом. */
.otklik .trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.otklik-note {
  max-width: 62ch;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(182, 42, 99, 0.16);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.otklik-note p + p { margin-top: 8px; }

@media (max-width: 640px) {
  /* Safari на iPhone масштабирует страницу при фокусе, если кегль поля меньше
     шестнадцати пикселей. Прочая типографика сайта на телефоне не меняется —
     дёргаем только поля ввода. */
  .otklik input, .otklik select, .otklik textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .otklik button:hover { transform: none; }
}

/* --- Поиск по архиву --------------------------------------------------------
   Список находок висит в <body> и позиционируется по координатам поля, а не
   лежит внутри .search: .search — это <label>, и клик по ссылке внутри него
   уходил бы полю ввода вместо ссылки.

   Фон светлый, хотя список свисает с тёмной шапки: в находках три строки
   текста на каждую, и читать их по ночному фону тяжело. Золотая грань
   связывает список с шапкой, розовые акценты — со светлой половиной. */

.search-drop {
  position: fixed;
  z-index: 80;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--gold-line);
  background: var(--paper-0);
  box-shadow: 0 22px 50px rgba(7, 7, 31, 0.45);
  color: var(--ink);
}
.search-hit {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink);
}
.search-hit + .search-hit { border-top: 1px solid rgba(182, 42, 99, 0.12); }
.search-hit:hover,
.search-hit[aria-selected="true"] {
  background: color-mix(in oklab, var(--rose-soft) 34%, #fff);
}
.search-where {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
}
.search-title {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.search-snip {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.search-snip mark {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--gold-soft) 62%, #fff);
  color: var(--ink);
}
.search-none {
  padding: 14px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Переход из поиска ведёт на заголовок раздела — он не должен оказаться под
   шапкой. У карточек досье такой отступ уже был, теперь он есть у любого
   якоря на сайте. */
:target { scroll-margin-top: 96px; }

/* --- Искры, кошка, призма --------------------------------------------------- */

.spark-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: var(--sz, 6px);
  height: var(--sz, 6px);
  margin: calc(var(--sz, 6px) / -2);
  background: var(--tone, var(--gold-soft));
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  animation: spark-fall 900ms ease-out forwards;
}

@keyframes spark-fall {
  0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  25%  { opacity: 1; transform: scale(1) rotate(var(--rot, 30deg)); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 16px)) scale(0.2) rotate(var(--rot, 30deg)); }
}

.cat-run {
  position: fixed;
  bottom: 4vh;
  left: -220px;
  z-index: 92;
  /* Кошка вертикальная (460x682), поэтому ширина меньше прежней, а по высоте
     она всё равно крупнее того силуэта, что был нарисован вектором. */
  width: clamp(96px, 11vw, 150px);
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255, 233, 168, 0.5));
  animation: cat-across 3.4s linear forwards;
}

.cat-run img { display: block; width: 100%; height: auto; }

@keyframes cat-across {
  to { transform: translateX(calc(100vw + 200px)); }
}

.prism {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 233, 168, 0.5) 0%, rgba(255, 95, 162, 0.35) 32%, rgba(10, 10, 46, 0.85) 70%);
  animation: prism-flash 3.2s ease-out forwards;
}

.prism p {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 78px);
  line-height: 1.05;
  text-align: center;
  color: #fffdf6;
  text-shadow: 0 0 28px rgba(255, 233, 168, 0.9), 0 0 60px rgba(255, 95, 162, 0.6);
}

@keyframes prism-flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Проявление при прокрутке --------------------------------------------- */

@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-in linear both;
    animation-timeline: view();
    /* Конец проявления — «шестьдесят процентов входа», а не «треть прохода
       через экран». Прежний вариант (cover 32%) заканчивался уже после того,
       как блок целиком стоял перед глазами: он оставался полупрозрачным и
       ждал, пока страницу прокрутят дальше. */
    animation-range: entry 0% entry 60%;
  }
  /* Сдвиг задаём отдельным свойством translate, а не transform: у работы в
     галерее есть подъём по наведению (.gallery figure:hover), и он живёт на
     transform. Анимация в каскаде сильнее обычного правила, поэтому её
     transform: none навсегда перебил бы этот подъём — а translate с ним не
     пересекается. */
  @keyframes reveal-in {
    from { opacity: 0; translate: 0 26px; }
    to   { opacity: 1; translate: none; }
  }

  /* Метку ставит sparkle.js всему, что попало на первый экран при открытии.
     Проявление задумано для того, что появляется при прокрутке; у блока,
     который уже перед глазами, проявляться не из чего, и полупрозрачный низ
     страницы читается как брак, а не как приём. */
  .reveal.reveal--now {
    animation-name: none;
    opacity: 1;
    translate: none;
  }
}

/* Таймлайн прокрутки не подчиняется animation-duration, поэтому общее правило
   «сократить все анимации до 0.001ms» проявление не гасит — гасим отдельно. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation-name: none;
    opacity: 1;
    translate: none;
  }
}

/* --- Межстраничные переходы ------------------------------------------------ */

@view-transition { navigation: auto; }

/* --- Телефон и планшет ----------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --rail: 200px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .fortune { grid-column: span 2; }
  /* Календарю нужны семь колонок в ряд: в половине ряда ячейка выходит
     28 px, и фаза в ней снова превращается в точку. */
  .bento--luna { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .timeline { padding-left: 20px; }
  .era::before { left: -16px; }
  .era-card { grid-template-columns: minmax(0, 1fr); }
  .era-card .shot { width: 100%; aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; }
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 258px;
    padding: 16px;
    background: var(--glass-strong);
    backdrop-filter: blur(18px);
    border-right: 1px solid var(--gold-line);
    transform: translateX(-102%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .rail[data-open="true"] { transform: none; }
  .burger {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--gold-line);
    border-radius: 12px;
    background: var(--glass);
    color: var(--gold);
  }
  .search { display: none; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .fortune { grid-column: auto; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero { min-height: 420px; }
  /* На телефоне подставляется вертикальный баннер (см. <picture> в index.html):
     он снят под портретный кадр, поэтому центрируем по горизонтали, а не смещаем
     вправо, как приходилось делать с широким баннером. */
  .hero-media img { object-position: 50% 26%; }
}

@media (max-width: 420px) {
  .moon-ear { gap: 0; padding: 8px; }
  .moon-ear .phase-name, .moon-ear .phase-day { display: none; }
}

/* --- Телефон: вернуть содержимому ширину -----------------------------------
   Поля вкладываются одно в другое: поле макета, рамка страницы, светлая
   половина, карточка. На широком экране это правильно, на 360 px — треть
   экрана уходит в пустоту, и текст ложится в колонку шириной в десяток
   знаков. Ниже 620 px ужимаем каждое поле, а не одно из них: выигрыш даёт
   только сумма. */

@media (max-width: 620px) {
  :root { --frame: 8px; }

  .layout { padding-inline: 8px; }

  .daylight {
    padding-left: 14px;
    padding-right: 14px;
  }

  .card { padding: 14px; }

  /* Миниатюра новости занимала 92 px из 257 — больше трети карточки.
     Уменьшаем её и зазор: текст получает почти вдвое больше места. */
  .news-item {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
  }

  .news-item img, .news-item .ph {
    width: 68px;
    height: 50px;
  }

  /* Календарь: семь колонок на 300 px. Каждый пиксель отступа — это пиксель,
     отнятый у диска луны, поэтому зазор и поля ячейки ужимаем. */
  .luna-grid { gap: 5px; }
  .luna-cell { padding: 6px 2px 8px; gap: 3px; }
  .luna-cell b { font-size: 12px; }
}

/* Совсем узкий экран: «л. д.» в ячейке шириной 24 px не помещается и
   переносится по слогам. Лунный день по-прежнему виден в шапке страницы. */
@media (max-width: 340px) {
  .luna-cell small { display: none; }
}

/* --- Уважение к настройкам движения ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  @view-transition { navigation: none; }
}

/* --- Камео: ролики и стоп-кадры --------------------------------------------- */

.clip-note {
  max-width: 76ch;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  font-size: 15px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.clip {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(182, 42, 99, 0.16);
  background: #fff;
  box-shadow: 0 14px 30px rgba(58, 43, 69, 0.1);
}

.clip video {
  display: block;
  width: 100%;
  /* height: auto обязателен, иначе aspect-ratio ниже не работает вовсе.
     Атрибуты width/height у <video> действуют как presentational hints,
     то есть как CSS-свойства с низким приоритетом: width перебивается
     строкой выше, а height, если его не задать, остаётся от атрибута,
     становится определённой высотой — и коробка получается 720 px вместо
     положенных 16:9. */
  height: auto;
  aspect-ratio: 16 / 9;
  /* contain, а не cover: кадр показывается целиком, ничего не срезается.
     Сетки разведены по пропорции (см. .clips--tall ниже), поэтому пустых
     полей по краям всё равно не остаётся. */
  object-fit: contain;
  background: linear-gradient(150deg, var(--night-2) 0%, var(--night-3) 55%, var(--rose-deep) 130%);
}

/* Вертикальные ролики вынесены в отдельную сетку со своей пропорцией.
   Раньше все шесть лежали в одной 16:9-сетке с обрезкой по краям, и у
   четырёх вертикальных от кадра было видно около трети. Колонки здесь уже,
   чтобы все четыре помещались в ряд и карточка не вырастала во весь экран. */

.clips--tall { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.clips--tall .clip video { aspect-ratio: 9 / 16; }

.clips-sub {
  margin: clamp(22px, 2.4vw, 34px) 0 clamp(10px, 1vw, 14px);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  color: var(--ink);
}

.clips-sub .jp {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--rose);
}

.clip-body { padding: 16px 18px 20px; }
.clip-body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.clip-src {
  display: block;
  margin: 4px 0 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rose);
}
.clip-body p:not(.clip-src) { font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }

@media (max-width: 760px) {
  .clips { grid-template-columns: minmax(0, 1fr); }
  }

/* --- Баланс десяти воинов ---------------------------------------------------- */

.balance-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
.balance-table th, .balance-table td {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(182, 42, 99, 0.14);
  color: var(--ink-soft);
}
.balance-table th { color: var(--rose-deep); font-weight: 500; }
.balance-table tbody tr:hover { background: rgba(182, 42, 99, 0.05); }

.balance-text { max-width: 76ch; margin-top: clamp(20px, 2.4vw, 32px); }
.balance-text p { font-size: 15px; color: var(--ink-soft); text-wrap: pretty; }
.balance-text p + p { margin-top: 10px; }
.balance-text b { color: var(--ink); font-weight: 500; }

/* --- Пасхалка на странице «Луна»: кадр заглядывает и уходит ---------------
   Показывается из moon.js при клике по полнолунию в календаре. Живёт 3,4 с
   и снимается сама, поэтому закрывающей кнопки нет. pointer-events: none —
   чтобы она не перехватывала клики по календарю под собой, пока идёт.
   При prefers-reduced-motion выезда нет: только проявление (data-calm). */

.luna-peek {
  position: fixed;
  container-type: inline-size;
  right: clamp(8px, 2vw, 28px);
  bottom: 0;
  z-index: 60;
  width: clamp(150px, 40vw, 260px);
  pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(7, 7, 31, 0.55));
  animation: luna-peek-in 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

/* Уход по второму клику. Класс вешает скрипт, он же убирает элемент по
   окончании анимации. */
.luna-peek--out { animation: luna-peek-out 0.45s ease both; }

.luna-peek figure { margin: 0; }

.luna-peek img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gold-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

/* Подпись над картинкой — снизу места нет, элемент прижат к краю окна.
   Тёмное стекло, как у шапки и бокового меню: плашка ложится поверх любой
   половины страницы, и ночной, и светлой. */
.luna-peek figcaption {
  margin-bottom: 8px;
  padding: 8px 11px;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background: rgba(10, 10, 46, 0.82);
  backdrop-filter: blur(6px) saturate(120%);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
  color: var(--gold-soft);
  text-align: center;
  text-wrap: balance;
}

@keyframes luna-peek-in {
  from { transform: translateY(112%); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}

@keyframes luna-peek-out {
  from { transform: none;             opacity: 1; }
  to   { transform: translateY(112%); opacity: 0; }
}

/* Кому движение мешает — тому просто проявление и угасание, без выезда.
   Селектор из двух классов нужен, чтобы перебить .luna-peek[data-calm]:
   у того две составляющие, у одиночного класса — одна. */
.luna-peek[data-calm] { animation: luna-peek-fade-in 0.35s ease both; }
.luna-peek[data-calm].luna-peek--out { animation: luna-peek-fade-out 0.3s ease both; }

@keyframes luna-peek-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes luna-peek-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Обвязка сайта шире 1440 px не растягивается, и на широком мониторе справа
   от рамки остаётся пустое поле — на 2560 px это 560 px в никуда. Пусть кадр
   его и займёт: в исходнике он 960×1440, разрешения хватает с запасом.

   Ширину берём наименьшую из трёх: сколько реально свободно справа, сколько
   влезает по высоте (кадр 2:3 плюс подпись над ним) и разумный потолок.
   Внешний max() не даёт стать меньше обычного размера, поэтому отдельная
   точка перелома не нужна — до 2040 px формула сама возвращает прежние
   260 px. */
@media (min-width: 1441px) {
  .luna-peek {
    right: clamp(16px, 1.6vw, 40px);
    width: max(
      260px,
      min(
        calc((100vw - var(--shell)) / 2 - 32px),
        calc((100vh - 108px) / 1.5),
        560px
      )
    );
  }
}

/* Кегль подписи — от ширины плашки, а не от ширины окна: на 1920×1080
   правого поля не хватает, плашка остаётся прежней, и подпись по
   медиазапросу раздувалась до 20 px в 260-пиксельной плашке. */
@container (min-width: 360px) {
  .luna-peek figcaption { padding: 10px 14px; font-size: 18px; }
}

@container (min-width: 460px) {
  .luna-peek figcaption { padding: 12px 16px; font-size: 21px; }
}

/* На телефоне плашка получалась в 150 px шириной и подпись ложилась в пять
   строк. Даём немного ширины и убавляем кегль — становится четыре. */
@media (max-width: 640px) {
  .luna-peek { width: clamp(178px, 48vw, 260px); }
  .luna-peek figcaption { padding: 7px 9px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .luna-peek { animation: luna-peek-fade-in 0.35s ease both; }
  .luna-peek.luna-peek--out { animation: luna-peek-fade-out 0.3s ease both; }
}