/* MEETCUTE — единственная таблица стилей. Палитра и шрифты обязаны совпадать
   с _tokens.js ДОСЛОВНО: generate.js сверяет каждую переменную и валит сборку
   на расхождении. Тёмные полосы (.nightforge) переключают ПЕРЕМЕННЫЕ
   (--mct-inkvar / mutevar / linevar), а не парные правила .dark X — урок lomon.
   Внимание: последовательность звёздочка-слэш внутри комментария закрывает его
   досрочно и молча съедает :root целиком — не писать её тут никогда. */

:root {
  --mct-ink: #17161a;
  --mct-coal: #211e26;
  --mct-bone: #f3efe7;
  --mct-paper: #ffffff;
  --mct-copper: #a46a3a;
  --mct-copper-deep: #845128;
  --mct-amber: #c08b31;
  --mct-sheikah: #4d8b84;
  --mct-mute: #6d6660;
  --mct-line: #e1dacd;
  --mct-ink-on-dark: #f1ede5;
  --mct-wisp: 0.5rem;
  --mct-spark: 0.9rem;
  --mct-coalgap: 1.4rem;
  --mct-ingot: 2.2rem;
  --mct-anvil: 3.5rem;
  /* живые роли: на светлом равны базе, тёмная полоса переопределяет один раз */
  --mct-inkvar: var(--mct-ink);
  --mct-mutevar: var(--mct-mute);
  --mct-linevar: var(--mct-line);
  --mct-facevar: var(--mct-paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Martel Sans', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--mct-ink);
  background: var(--mct-paper);
  /* короткие страницы (404, контакты) иначе оставляют белую полосу под подвалом */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#bench { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 var(--mct-spark);
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(1.85rem, 1.2rem + 2.7vw, 3.05rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.05rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 var(--mct-spark); }
:focus-visible { outline: 2px solid var(--mct-sheikah); outline-offset: 2px; }
address { font-style: normal; }

/* ── каркас ── */
.benchspan { width: min(1150px, 100% - (var(--mct-ingot) * 2)); margin-inline: auto; }
.forgespan { padding-block: var(--mct-anvil); }
.overleap {
  position: absolute; left: -999px; top: 0; z-index: 60;
  background: var(--mct-copper); color: #fff; padding: var(--mct-wisp) var(--mct-coalgap);
}
.overleap:focus { left: 0; }

/* тёмная полоса: переключает роли один раз для всех потомков */
.nightforge {
  background: var(--mct-ink);
  color: var(--mct-inkvar);
  --mct-inkvar: var(--mct-ink-on-dark);
  --mct-mutevar: #aaa39b;
  --mct-linevar: #3a3742;
  --mct-facevar: var(--mct-coal);
}

/* ── шапка ── */
.forgetop {
  background: var(--mct-ink);
  color: var(--mct-ink-on-dark);
  border-bottom: 1px solid #2c2933;
}
.forgetop .benchspan {
  display: flex; align-items: center; gap: var(--mct-coalgap);
  padding-block: var(--mct-spark); flex-wrap: wrap;
}
.forgetop nav { margin-left: auto; }
/* флекс на ul, не на nav: у nav один потомок и меню встанет столбиком — урок kuailu */
.forgetop nav ul {
  display: flex; gap: var(--mct-coalgap); flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.forgetop nav a { text-decoration: none; font-size: 0.93rem; }
.forgetop nav a:hover { color: var(--mct-amber); }
.forgetop > .benchspan > a > img { display: block; }

/* ── кнопки ── */
.forgecall {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mct-copper); border: 0; border-radius: 4px;
  padding: 0.62rem 1.15rem; cursor: pointer;
}
.forgecall:hover { background: var(--mct-copper-deep); }
.forgecall img { display: block; }
.coldiron {
  display: inline-block; padding: 0.55rem 1.15rem; border-radius: 4px;
  border: 1px solid var(--mct-linevar); color: inherit;
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.coldiron:hover { border-color: var(--mct-copper); color: var(--mct-copper); }
.nightforge .coldiron:hover { color: var(--mct-amber); border-color: var(--mct-amber); }
.twinblades { display: flex; gap: var(--mct-spark); flex-wrap: wrap; align-items: center; }

/* ── кикер, чипы ── */
.overrune {
  display: block; font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mct-copper); margin-bottom: var(--mct-wisp);
}
.nightforge .overrune { color: var(--mct-amber); }
.runeline { display: flex; flex-wrap: wrap; gap: var(--mct-wisp); margin: var(--mct-spark) 0 0; }
.runechip {
  display: inline-block; padding: 0.22rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--mct-linevar); font-size: 0.85rem; text-decoration: none;
}
a.runechip:hover { border-color: var(--mct-sheikah); color: var(--mct-sheikah); }

/* ── крошки ── */
.trailback { font-size: 0.86rem; color: var(--mct-mutevar); padding-top: var(--mct-coalgap); }
.trailback ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mct-wisp); margin: 0; padding: 0; }
.trailback li + li::before { content: '\203A'; margin-right: var(--mct-wisp); }
.trailback a { color: inherit; }
.trailback [aria-current] { color: var(--mct-inkvar); }

/* ── карточка товара ── */
.castpiece {
  background: var(--mct-facevar); border: 1px solid var(--mct-linevar);
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.castpiece > a { display: block; background: #fff; }
.castpiece > a img { aspect-ratio: 1; object-fit: contain; }
.innercast {
  padding: var(--mct-spark); display: flex; flex-direction: column;
  gap: var(--mct-wisp); flex: 1;
}
.innercast > a {
  font-weight: 600; text-decoration: none; font-size: 0.97rem; line-height: 1.35;
}
.innercast > a:hover { color: var(--mct-copper); }
.castline { font-size: 0.82rem; color: var(--mct-mutevar); }
.mintmark {
  display: flex; align-items: baseline; gap: var(--mct-spark);
  flex-wrap: wrap; margin-top: auto;
}
.mintmark b { font-size: 1.12rem; }
.gleamrow { color: var(--mct-amber); font-size: 0.9rem; white-space: nowrap; }
.gleamrow small { color: var(--mct-mutevar); }
.castpiece .forgecall { margin: 0 var(--mct-spark) var(--mct-spark); }
.manycasts { font-size: 0.8rem; color: var(--mct-sheikah); }

/* сетки карточек */
.lootrail, .caseshelf {
  display: grid; gap: var(--mct-coalgap);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

/* ── 1. hero ── */
.firstlight { padding-block: var(--mct-anvil); }
.firstlight .benchspan {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: var(--mct-ingot); align-items: center;
}
.firstlight figure { margin: 0; }
.firstlight figure img {
  border-radius: 8px; background: #fff; aspect-ratio: 1; object-fit: contain;
}
.firstlight figcaption {
  font-size: 0.84rem; color: var(--mct-mutevar); margin-top: var(--mct-wisp);
}
.firstlight p { font-size: 1.07rem; max-width: 34rem; }

/* ── 2. полоса франшиз ── */
.guildrow { background: var(--mct-bone); }
.guildrow > .benchspan > div {
  display: grid; gap: var(--mct-spark);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.guildrow a {
  display: block; text-decoration: none; background: var(--mct-paper);
  border: 1px solid var(--mct-line); border-radius: 6px;
  padding: var(--mct-spark) var(--mct-coalgap);
}
.guildrow a b { font-family: 'Cinzel', serif; display: block; }
.guildrow a span { font-size: 0.84rem; color: var(--mct-mute); }
.guildrow a:hover { border-color: var(--mct-copper); }

/* ── 3. плитки категорий ── */
.curiogrid { display: grid; gap: var(--mct-coalgap); grid-template-columns: repeat(3, 1fr); }
.curiogrid figure { margin: 0; }
.curiogrid a { text-decoration: none; display: block; }
.curiogrid img {
  border-radius: 6px; border: 1px solid var(--mct-line);
  background: #fff; aspect-ratio: 4 / 3; object-fit: contain;
}
.curiogrid figcaption { padding-top: var(--mct-wisp); }
.curiogrid b { font-family: 'Cinzel', serif; }
.curiogrid span { display: block; font-size: 0.86rem; color: var(--mct-mute); }

/* ── 5. промо-дуэт ── */
.duskandday { display: grid; gap: var(--mct-coalgap); grid-template-columns: 1fr 1fr; }
.duskandday > div { border-radius: 8px; padding: var(--mct-ingot); }
.duskandday > div:last-child { background: var(--mct-bone); border: 1px solid var(--mct-line); }

/* ── 6. полоса доверия ── */
.threemarks { background: var(--mct-bone); }
.threemarks > .benchspan > div {
  display: grid; gap: var(--mct-coalgap); grid-template-columns: repeat(3, 1fr);
}
.threemarks h3 { margin-bottom: var(--mct-wisp); }
.threemarks p { font-size: 0.94rem; color: var(--mct-mute); margin: 0; }

/* ── 7. полоса цифр ── */
.countstamp > .benchspan > div {
  display: grid; gap: var(--mct-coalgap); grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.countstamp b {
  display: block; font-family: 'Cinzel', serif; font-size: 1.9rem;
  color: inherit;
}
.countstamp span { font-size: 0.86rem; color: var(--mct-mutevar); }

/* ── 8. spotlight ── */
.heropiece .benchspan {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: var(--mct-ingot); align-items: center;
}
.heropiece figure { margin: 0; }
/* Ролик снят 854x480, поэтому кадр держим 16:9, а не квадратом от товарного фото:
   иначе браузер дорисует поля сверху и снизу. Подложка чернильная, а не белая —
   сам кадр тёмный, и белое поле обвело бы его лишней рамкой. */
.reelcase video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 8px; border: 1px solid var(--mct-line);
  background: var(--mct-ink);
}
.reelcase figcaption {
  margin-top: var(--mct-wisp); font-size: 0.84rem; color: var(--mct-mute);
}

/* ── 9. шаги выбора ── */
.threetrials { background: var(--mct-bone); }
.threetrials ol {
  list-style: none; counter-reset: trial; margin: 0; padding: 0;
  display: grid; gap: var(--mct-coalgap); grid-template-columns: repeat(3, 1fr);
}
.threetrials li { counter-increment: trial; }
.threetrials li::before {
  content: counter(trial, upper-roman);
  display: block; font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--mct-copper); font-size: 1.3rem;
}
.threetrials li b { display: block; margin: var(--mct-wisp) 0; }
.threetrials li p { font-size: 0.94rem; color: var(--mct-mute); margin: 0; }

/* ── 10. цитаты ── */
.heardback > .benchspan > div {
  display: grid; gap: var(--mct-coalgap); grid-template-columns: repeat(3, 1fr);
}
.heardback blockquote {
  margin: 0; background: var(--mct-facevar); border: 1px solid var(--mct-linevar);
  border-radius: 6px; padding: var(--mct-coalgap);
}
.heardback blockquote p { font-size: 0.95rem; }
.heardback footer { font-size: 0.86rem; color: var(--mct-mutevar); }

/* ── 11. SEO-заметка ── */
/* Текст держит читаемую строку, поэтому справа от него оставалась пустая половина полосы;
   таблица уходит туда второй колонкой, а не под текст. */
.loresplit {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--mct-ingot); align-items: start;
}
.lorecolumn table { width: 100%; margin-top: 0; }
.longlore p { max-width: 46rem; }
.longlore table { border-collapse: collapse; margin: var(--mct-coalgap) 0; }
.longlore th, .longlore td {
  border: 1px solid var(--mct-linevar); padding: var(--mct-wisp) var(--mct-spark);
  text-align: left; font-size: 0.93rem;
}
.longlore th { font-family: 'Cinzel', serif; background: var(--mct-bone); }
.longlore ul { max-width: 46rem; padding-left: 1.2rem; }
.longlore li { margin-bottom: var(--mct-wisp); }

/* ── 12. закрывающая полоса ── */
.lastember { text-align: center; }
.lastember p { margin-inline: auto; max-width: 36rem; }
.lastember .twinblades { justify-content: center; }

/* ── карточка товара (PDP) ── */
.splitanvil {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--mct-ingot); align-items: start;
}
.splitanvil figure { margin: 0; position: sticky; top: var(--mct-coalgap); }
.splitanvil figure img {
  border-radius: 8px; border: 1px solid var(--mct-line);
  background: #fff; aspect-ratio: 1; object-fit: contain;
}
.splitanvil .castline { font-size: 0.92rem; }
.splitanvil .mintmark { margin: var(--mct-spark) 0; }
.splitanvil .mintmark b { font-size: 1.5rem; }

/* Три записи про вещь и одна про человека. Четыре одинаковые коробки 2x2
   давали стену без старшинства: глазу негде было начать. Рамки сняты —
   рубрику держит медная черта сверху, а не поле ввода. */
.fourrunes { background: var(--mct-bone); }
.fourrunes .tellrow {
  display: grid; gap: var(--mct-ingot); grid-template-columns: repeat(3, 1fr);
  margin-top: var(--mct-ingot);
}
.fourrunes .tellrow article {
  border-top: 2px solid var(--mct-copper); padding-top: var(--mct-spark);
}
.fourrunes .tellrow h3 { margin-bottom: var(--mct-wisp); }
.fourrunes .tellrow p { margin: 0; font-size: 0.94rem; color: var(--mct-mute); }
.tellnote {
  margin-top: var(--mct-ingot); padding: var(--mct-coalgap) var(--mct-ingot);
  background: var(--mct-paper); border-left: 3px solid var(--mct-sheikah);
  display: grid; grid-template-columns: 12rem 1fr; gap: var(--mct-coalgap);
  align-items: baseline;
}
.tellnote h3 { margin: 0; color: var(--mct-copper-deep); }
.tellnote p { margin: 0; font-size: 0.94rem; color: var(--mct-mute); }

.lastclasp .benchspan {
  display: flex; align-items: center; gap: var(--mct-ingot); flex-wrap: wrap;
}
.lastclasp b { font-family: 'Cinzel', serif; font-size: 1.15rem; }
.lastclasp .mintmark { margin: 0; }
.lastclasp .forgecall { margin-left: auto; }

/* ── подборщик ── */
.questdesk { border: 0; margin: 0; padding: 0; }
.questdesk fieldset {
  border: 1px solid var(--mct-line); border-radius: 6px;
  padding: var(--mct-coalgap); margin: 0 0 var(--mct-coalgap);
}
.questdesk legend { font-family: 'Cinzel', serif; font-weight: 600; padding-inline: var(--mct-wisp); }
.questdesk label { display: inline-flex; gap: var(--mct-wisp); margin: 0 var(--mct-coalgap) var(--mct-wisp) 0; }
.questdesk input { accent-color: var(--mct-copper); }
.questcall { font-weight: 600; color: var(--mct-sheikah); min-height: 1.6em; }

/* ── сервисные и гайды ── */
.plaindesk, .loreread { max-width: 46rem; }
.plaindesk h2, .loreread h2 { margin-top: var(--mct-ingot); }
.plaindesk h2:first-child, .loreread h2:first-child { margin-top: 0; }
.loreread img { border-radius: 6px; border: 1px solid var(--mct-line); }

/* оглавление заметок: карточки во всю полосу, читаемая мера остаётся только у прозы */
.filedrawer {
  display: grid; gap: var(--mct-coalgap);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  margin-block: var(--mct-ingot);
}
.drawernote {
  display: block; text-decoration: none;
  border: 1px solid var(--mct-line); border-radius: 6px;
  padding: var(--mct-coalgap);
  background: var(--mct-paper);
}
.drawernote h2 { margin: var(--mct-wisp) 0 var(--mct-wisp); font-size: 1.15rem; }
.drawernote p { margin: 0; color: var(--mct-mute); }
.drawernote:hover { border-color: var(--mct-copper); }

/* ── подвал ── */
.undermark { border-top: 1px solid #2c2933; }
.undermark > .benchspan > div {
  display: grid; gap: var(--mct-ingot);
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  padding-block: var(--mct-ingot);
}
.undermark ul { list-style: none; margin: var(--mct-wisp) 0 0; padding: 0; }
.undermark li { margin-bottom: 0.3rem; }
.undermark a { text-decoration: none; font-size: 0.92rem; }
.undermark a:hover { color: var(--mct-amber); }
.undermark p, .undermark address { font-size: 0.9rem; color: var(--mct-mutevar); }
.undermark b { font-family: 'Cinzel', serif; font-size: 0.92rem; }
.lastrivet {
  border-top: 1px solid var(--mct-linevar); padding-block: var(--mct-coalgap);
  font-size: 0.84rem; color: var(--mct-mutevar);
  display: flex; gap: var(--mct-coalgap); align-items: center; flex-wrap: wrap;
}
.lastrivet img { max-width: min(380px, 100%); }

/* ── узкие экраны ── */
@media (max-width: 900px) {
  .firstlight .benchspan, .heropiece .benchspan, .splitanvil { grid-template-columns: 1fr; }
  .curiogrid, .threemarks > .benchspan > div, .threetrials ol,
  .heardback > .benchspan > div { grid-template-columns: 1fr; }
  .duskandday, .loresplit { grid-template-columns: 1fr; }
  .countstamp > .benchspan > div { grid-template-columns: repeat(2, 1fr); }
  .fourrunes .tellrow { grid-template-columns: 1fr; gap: var(--mct-coalgap); }
  .tellnote { grid-template-columns: 1fr; gap: var(--mct-wisp); padding: var(--mct-coalgap); }
  .undermark > .benchspan > div { grid-template-columns: 1fr 1fr; }
  .splitanvil figure { position: static; }
  .forgetop nav { margin-left: 0; }
  .lastclasp .forgecall { margin-left: 0; }
}
@media (max-width: 560px) {
  .lootrail, .caseshelf { grid-template-columns: repeat(2, 1fr); }
  .castpiece .forgecall { padding: 0.5rem 0.6rem; }
  .undermark > .benchspan > div { grid-template-columns: 1fr; }
}