@import url('../fonts/fonts.css');

/* ============================================================================
   messiah.by — общие стили сайта.
   Файл общий, а не встроен в index.html: страниц будет много, и общий вид
   должен задаваться в одном месте.
   ========================================================================= */

:root {
  /* Цвета взяты с иконы: багрянец мафория, охра нимба, тёплый пергамент. */
  --ink:        #1b1512;
  --ink-soft:   #5f544b;
  --ink-mute:   #8a7d72;
  --paper:      #fbf8f3;
  --paper-2:    #f4ece0;
  --paper-3:    #ece0cf;
  --gold:       #b08733;
  --gold-soft:  #d9bf86;
  --red:        #8d1b21;
  --red-deep:   #6b1318;
  --line:       rgba(27, 21, 18, .12);

  --shadow-sm: 0 1px 2px rgba(27,21,18,.06), 0 2px 8px rgba(27,21,18,.05);
  --shadow-md: 0 2px 6px rgba(27,21,18,.07), 0 12px 32px rgba(27,21,18,.09);

  --wrap: 1140px;
  --gap: clamp(1.25rem, 3vw, 2.25rem);
  --radius: 14px;

  /* Светлая тема задана жёстко: сайт построен на пергаменте и багрянце,
     автоматическая тёмная версия его просто выворачивает наизнанку.
     Тёмная тема — отдельная работа, а не побочный эффект. */
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.7 'Inter', -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem); font-weight: 600; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--red-deep); }

img, svg { max-width: 100%; height: auto; display: block; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

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

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 243, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px;
}

.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none; flex: none;
}
.logo svg { width: 22px; color: var(--ink); }
/* Логотип — растр 212x52 от владельца. Высота 26px выбрана не на глаз: это
   ровно половина высоты исходника, то есть предел, при котором на экране с
   двойной плотностью картинка идёт пиксель в пиксель. Выше — начнёт мылиться.
   ⚠️ На экранах с тройной плотностью (телефоны) запаса уже нет: нужен вектор
   логотипа (SVG), и тогда это правило можно выбросить целиком. */
.logo__img { height: 26px; width: auto; }
.logo__word {
  font-weight: 700; font-size: 1.32rem; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  font-weight: 500; white-space: nowrap;
}
.nav a:hover { color: var(--red); }

.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  border-radius: 10px; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink);
}
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 18px; height: 1.5px;
  background: currentColor; position: relative; transition: transform .2s ease, opacity .2s ease;
}
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: .5rem clamp(1rem, 4vw, 2rem) 1.25rem;
    max-height: calc(100dvh - 68px); overflow-y: auto;
    /* ⚠️ Прячем через display, а не только hidden: на сцепке с flex
       атрибут hidden бьётся display:flex и меню остаётся видимым. */
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav a:last-child { border-bottom: 0; }
}

/* ---- Кнопки ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 500; font-size: 1rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); color: #fff; }
.btn--ghost { border-color: rgba(27,21,18,.22); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: rgba(27,21,18,.04); }

/* ---- Секции ------------------------------------------------------------- */

section { padding-block: clamp(3.25rem, 7vw, 6rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .9rem;
}

.tint { background: var(--paper-2); }

/* ---- Первый экран ------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90rem 40rem at 78% -12%, rgba(176,135,51,.20), transparent 62%),
    radial-gradient(60rem 36rem at 8% 108%, rgba(141,27,33,.10), transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; margin-inline: auto; max-width: 22rem; }
}
.hero h1 { margin-bottom: .45em; }
.hero__lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--ink-soft); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__verse {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; font-style: italic; color: var(--ink-soft); max-width: 32rem;
}
.hero__verse cite { display: block; font: 500 .82rem/1 'Inter', sans-serif;
  font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-top: .85rem; }

/* Киот — арочная рама под икону. Рисуется целиком стилями, поэтому
   выглядит законченно и до того, как появится сам образ. */
.kiot {
  position: relative; aspect-ratio: 5 / 6; width: 100%; max-width: 430px;
  border-radius: 50% 50% var(--radius) var(--radius) / 34% 34% var(--radius) var(--radius);
  background: linear-gradient(170deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--gold-soft);
  box-shadow: var(--shadow-md), inset 0 0 0 7px rgba(251,248,243,.85), inset 0 0 0 8px rgba(176,135,51,.35);
  display: grid; place-items: center; overflow: hidden;
  padding: 7%;
}
/* ⚠️ Образ прижат к низу рамы: в исходнике он срезан ровной линией, и по
   центру этот срез повисает в воздухе. */
.kiot { align-items: end; }
/* ⚠️⚠️ Исходник образа всего 340x424. Без ограничения рама растягивала его
   до 395px по ширине — это 2,3 пикселя экрана на один пиксель картинки при
   обычной двойной плотности, то есть заметное мыло. Пока не дали образ
   крупнее, не даём растягивать сверх натуральной величины. Появится файл от
   1000px по высоте — этот max-width можно снять. */
/* Ограничение висит на <picture>, а не на <img>: элементом сетки киота
   теперь является picture, и max-width на вложенном img сетка бы не увидела. */
.kiot picture { display: block; width: 100%; max-width: 340px; margin-inline: auto; }
.kiot img { width: 100%; height: auto; }
.kiot__placeholder { width: 42%; color: var(--gold); opacity: .5; }

/* ---- Символ веры -------------------------------------------------------- */

.creed { text-align: center; }
.creed__text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.15rem);
  line-height: 1.45; max-width: 52rem; margin: 0 auto 1.5rem;
}
.creed__note { color: var(--ink-soft); max-width: 42rem; margin-inline: auto; }

/* ---- Сетки карточек ----------------------------------------------------- */

.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }

.card {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tint .card { background: #fff; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__num {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.1rem;
  color: var(--gold); line-height: 1; margin-bottom: .6rem;
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }
.chip {
  display: inline-block; margin-top: 1rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-soft);
  border-radius: 999px; padding: .28rem .7rem;
}

/* ---- Пророчества -------------------------------------------------------- */

.prophecy { display: grid; gap: 0; border-top: 1px solid var(--line); }
.prophecy__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.25rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--line);
}
.prophecy__side { min-width: 0; }
.prophecy__label {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .35rem;
}
.prophecy__text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.22rem; line-height: 1.4; }
.prophecy__ref { font-size: .85rem; color: var(--gold); margin-top: .35rem; font-weight: 500; }
.prophecy__arrow { color: var(--gold-soft); flex: none; }
.prophecy__arrow svg { width: 26px; }
@media (max-width: 760px) {
  .prophecy__row { grid-template-columns: 1fr; gap: 1rem; }
  .prophecy__arrow { transform: rotate(90deg); margin-inline: auto; }
}

/* ---- Большая цитата ----------------------------------------------------- */

.verse {
  background:
    radial-gradient(50rem 26rem at 50% 0%, rgba(176,135,51,.16), transparent 65%),
    var(--ink);
  color: var(--paper); text-align: center;
}
.verse blockquote {
  margin: 0 auto; max-width: 48rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.7rem); line-height: 1.4;
}
.verse cite {
  display: block; margin-top: 1.75rem; font: 500 .82rem/1 'Inter', sans-serif;
  font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
}
.verse__cross { width: 30px; margin: 0 auto 2rem; color: var(--gold); opacity: .85; }

/* ---- Молитвы ------------------------------------------------------------ */

.prayer {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.prayer h3 { color: var(--red); }
.prayer__body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem; line-height: 1.55; color: var(--ink);
}
.prayer__ref { margin-top: auto; padding-top: 1.1rem; font-size: .84rem; color: var(--ink-mute); }

/* ---- Вопросы ------------------------------------------------------------ */

.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0;
  position: relative; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__answer { padding-bottom: 1.5rem; color: var(--ink-soft); max-width: 44rem; }

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

.site-foot { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-foot__grid { display: grid; gap: var(--gap); grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .site-foot__grid { grid-template-columns: 1fr; } }
.site-foot h4 {
  font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-foot a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.site-foot a:hover { color: var(--red); }
.site-foot__about { color: var(--ink-soft); font-size: .95rem; max-width: 24rem; }
.site-foot__bottom {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .86rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}