/* «Хранитель Церкви Русской» — публичная страница записи.
   Палитра снята с афиши проекта: состаренная бумага, угольная типографика,
   оливковая плашка благословения. */
:root{
  --ink:#2f2b24;
  --paper:#f2ebdd;
  --paper-2:#e7dece;
  --wine:#413b2c;      /* угольно-оливковый — основной тёмный (кнопки, заголовки) */
  --wine-2:#544c37;
  --olive:#65613c;     /* плашка благословения */
  --gold:#6b5219;
  --gold-2:#b99a52;
  --muted:#6d6353;
  --ok:#2e6b3f;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;
}
html{scroll-behavior:smooth}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Колонка контента тянется вместе с экраном: 720px на ноутбуке → 960px на большом мониторе,
   на телефоне ограничена шириной экрана. Дальше по файлу так же масштабируются кегли. */
.wrap{width:min(100%, clamp(720px, 54vw, 960px));margin:0 auto;padding:0 20px}

/* ---------- герой (композиция афиши: гравюра Донского монастыря на бумаге) ---------- */
.hero{
  position:relative;
  /* картинка кладётся во всю ширину внизу героя; её бумага совпадает с --paper,
     поэтому выше стыка фон продолжается незаметно — работает на любой ширине экрана */
  background:var(--paper) url('hero-bg.jpg') no-repeat center bottom;
  background-size:100% auto;
  color:var(--ink);
  padding-bottom:56px;
}
/* светлая вуаль сверху — чтобы текст читался поверх фактуры */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(242,235,221,.86) 0%, rgba(242,235,221,.62) 42%, rgba(242,235,221,.30) 100%);
}
.hero > *{position:relative;z-index:1}

/* полоса официальных логотипов — как на афише проекта */
.logos{
  display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,54px);
  flex-wrap:wrap;
  background:#fffdf7;border-bottom:1px solid #e2d5b8;
  padding:14px 20px;position:relative;z-index:2;
}
/* высоты подобраны по оптике: у логотипов разная плотность, одинаковая height смотрится криво */
.logos img{display:block;width:auto}
.logos img:nth-child(1){height:clamp(28px,3.4vw,44px)}   /* Минкультуры — самый широкий */
.logos img:nth-child(2){height:clamp(34px,4.2vw,54px)}   /* ПФКИ */
.logos img:nth-child(3){height:clamp(26px,3.2vw,40px)}   /* Клуб городского жителя */

.blessing{
  background:var(--olive);color:#f4efe0;
  text-align:center;text-transform:uppercase;
  font-size:clamp(10px,2.1vw,13px);letter-spacing:.16em;
  padding:11px 16px;position:relative;z-index:2;
}

/* герою нужна ширина под две колонки, остальной странице — нет */
.hero .wrap{width:min(100%, clamp(1000px, 72vw, 1240px))}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:48px;align-items:center;padding-top:56px;
}
.hero-quote{margin:0;padding-right:8px}
.hero-quote p{
  font-size:clamp(20px,2.1vw,34px);font-style:italic;line-height:1.42;color:var(--ink);
}
.hero-quote cite{
  display:block;margin-top:18px;font-style:normal;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.hero-quote cite::before{content:'';display:block;width:64px;height:1px;background:var(--gold-2);margin-bottom:12px}

.hero-main{text-align:center}
.hero-over{
  text-transform:uppercase;letter-spacing:.3em;font-size:12px;color:var(--gold);margin-bottom:16px;
}
.hero h1{
  /* Ширина строки «ЦЕРКВИ РУССКОЙ» ≈ 9.75 × кегль, а колонка титула ≈ 0.432vw − 53px.
     Формула ниже держит кегль ниже этого потолка с запасом ~6 % на любой ширине. */
  font-size:clamp(32px, 4.15vw - 5.1px, 62px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--wine);
}
.rule{display:flex;align-items:center;gap:14px;justify-content:center;margin:24px auto;max-width:340px}
.rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2));}
.rule span:last-child{background:linear-gradient(90deg,var(--gold-2),transparent)}
.rule em{color:var(--gold-2);font-style:normal;font-size:12px}
.hero-sub{max-width:min(100%,34em);margin:0 auto;font-size:clamp(16px,0.5vw + 11px,20px);color:#4a4335;font-style:italic}
/* кнопка — отдельной строкой под обеими колонками, по центру СТРАНИЦЫ, а не колонки */
.hero-action{display:flex;justify-content:center;margin-top:44px}
.hero-cta{
  display:inline-block;
  background:var(--wine);
  color:#f4efe0;
  text-decoration:none;
  font-family:inherit;
  font-size:clamp(17px,0.5vw + 12px,21px);
  padding:clamp(14px,1vw,18px) clamp(38px,3.4vw,56px);
  border-radius:3px;
  letter-spacing:.04em;
  box-shadow:0 6px 20px rgba(60,50,30,.22);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hero-cta:hover{background:var(--wine-2);transform:translateY(-1px);box-shadow:0 9px 24px rgba(60,50,30,.28)}

/* ---------- о проекте ---------- */
.about{padding:56px 0 8px}
.about p{margin-bottom:20px;font-size:clamp(16px,0.55vw + 10px,20px);text-align:justify}
.about-org{font-size:clamp(14px,0.35vw + 9.5px,17px);color:var(--muted);font-style:italic;text-align:center}

/* ---------- запись ---------- */
.reg{padding:44px 0 70px}
.reg h2{
  text-align:center;font-weight:400;font-size:clamp(26px,2.2vw,42px);margin-bottom:10px;color:var(--wine);
}
.reg-hint{text-align:center;color:var(--muted);max-width:520px;margin:0 auto 30px}
.card{
  width:100%;
  background:#fffdf7;
  border:1px solid #e2d5b8;
  border-top:3px solid var(--gold);
  border-radius:6px;
  padding:28px 26px;
  box-shadow:0 10px 30px rgba(60,40,20,.08);
  max-width:min(100%, clamp(500px, 38vw, 640px));margin:0 auto;
}
.field{margin-bottom:18px;position:relative}
.field label{
  display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:7px;
}
.field input{
  width:100%;
  font-family:inherit;font-size:clamp(16px,0.45vw + 11.5px,19px);color:var(--ink);
  background:#fff;
  border:1px solid #d5c6a4;border-radius:4px;
  padding:12px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,146,63,.16)}
.ac-list{
  position:absolute;z-index:20;left:0;right:0;top:100%;
  background:#fff;border:1px solid #d5c6a4;border-radius:0 0 6px 6px;
  max-height:250px;overflow-y:auto;
  box-shadow:0 14px 30px rgba(60,40,20,.18);
}
.ac-item{padding:10px 14px;cursor:pointer;font-size:16px}
.ac-item:hover,.ac-item.sel{background:var(--paper-2)}
.ac-item small{color:var(--muted)}
.ac-empty{padding:10px 14px;color:var(--muted);font-style:italic;font-size:15px}
.btn{
  display:block;width:100%;
  font-family:inherit;font-size:clamp(17px,0.5vw + 12px,20px);
  background:linear-gradient(180deg,var(--wine-2),var(--wine));
  color:#f3ead8;
  border:none;border-radius:4px;
  padding:14px;cursor:pointer;
  letter-spacing:.03em;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{
  background:none;color:var(--muted);box-shadow:none;border:none;
  font-size:15px;margin-top:10px;padding:8px;
}
.btn.ghost:hover{color:var(--wine)}
.age{
  display:inline-block;border:1px solid var(--gold-2);border-radius:4px;
  padding:0 7px;font-size:13px;color:var(--gold);margin-left:6px;vertical-align:2px;
}
.check{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  margin:2px 0 16px;font-size:16px;color:var(--ink);
}
.check input{width:19px;height:19px;accent-color:var(--wine);cursor:pointer;flex:none}
#companion-block{
  border-left:3px solid var(--gold-2);padding-left:16px;margin-bottom:18px;
}
.field label em{font-style:normal;text-transform:none;letter-spacing:0;font-size:12px}
.sub-hint{font-size:14px;color:var(--muted);line-height:1.5}
.res-who{margin-top:14px;padding-top:14px;border-top:1px solid #e2d5b8;font-size:16px}
.res-age{
  display:inline-block;margin-top:12px;border:1px solid var(--gold-2);border-radius:4px;
  padding:1px 9px;font-size:13px;color:var(--gold);
}
.notice{
  background:#fbf3e2;border:1px solid var(--gold-2);border-radius:4px;
  padding:12px 14px;font-size:15px;margin-bottom:18px;color:#5c4718;
}
.notice.err{background:#faeaea;border-color:#d9a0a0;color:#7a2626}

/* ---------- результат ---------- */
.result{margin-top:22px;text-align:center}
.res-okrug{
  display:inline-block;
  text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:#8a6a24;
  border:1px solid var(--gold-2);border-radius:20px;padding:4px 16px;margin-bottom:16px;
}
.result h3{font-weight:400;font-size:clamp(20px,1.4vw,26px);color:var(--wine);margin-bottom:14px;line-height:1.35}
.res-row{font-size:clamp(17px,0.6vw + 11px,21px);margin-bottom:8px}
.res-row b{color:var(--wine)}
.result .btn{margin-top:16px}
.success .done-mark{
  width:56px;height:56px;margin:4px auto 14px;
  border:2px solid var(--ok);border-radius:50%;
  color:var(--ok);font-size:30px;line-height:52px;
}
.success h3{color:var(--ok)}
.done-note{color:var(--muted);font-size:15px;margin-top:12px;font-style:italic}

/* ---------- футер ---------- */
footer{background:var(--paper-2);padding:34px 0 40px;text-align:center;margin-top:20px}
footer .rule{max-width:220px;margin:0 auto 20px}
footer a{color:var(--wine);}
.foot-small{color:var(--muted);font-size:13.5px;margin-top:8px}

@media (max-width:820px){
  /* на телефоне порядок как в афише сверху вниз: титул → цитата */
  .hero-grid{grid-template-columns:1fr;gap:30px;padding-top:40px;text-align:center}
  .hero-main{order:1}
  .hero-quote{order:2;padding-right:0;max-width:440px;margin:0 auto}
  .hero-quote cite::before{margin-left:auto;margin-right:auto}
  .hero-action{margin-top:32px;padding:0 20px}
  .hero-cta{width:100%;max-width:340px;text-align:center}
}
@media (max-width:560px){
  .hero{padding-bottom:44px}
  .about p{text-align:left}
  .card{padding:22px 18px}
}