/* ─── тема по умолчанию: «Иней» ───────────────────────────────
   Очень светлый холодный фон, глубокий синий акцент, много воздуха.
   Соседние темы — ниже, переключаются через ?dev=1. */
:root{
  --sky:oklch(0.945 0.030 236);      /* верхний свет страницы */
  --ground:oklch(0.985 0.007 232);   /* основной фон */
  --surface:oklch(1 0 0);            /* карточки, плашки */
  --line:oklch(0.905 0.018 235);
  --line-soft:oklch(0.935 0.014 235);
  --text:oklch(0.255 0.030 250);
  --text-2:oklch(0.475 0.028 250);
  --text-3:oklch(0.545 0.024 245);
  --deep:oklch(0.47 0.110 248);      /* акцент */
  --deep-hover:oklch(0.39 0.110 248);
  --deep-soft:oklch(0.955 0.026 244);
  --warn:oklch(0.55 0.110 62);       /* только статус, не украшение */

  --f-text:"Lora",Georgia,"Times New Roman",serif;   /* голос группы: лид, письмо, заголовки, адрес */
  --f-ui:"Golos Text","Helvetica Neue",Arial,sans-serif; /* всё служебное: метки, данные, кнопки */

  /* типографическая шкала — других кеглей на странице нет */
  --fs-micro:14px;   /* метки, дни недели, копирайт */
  --fs-ident:28px;   /* кто мы: вывеска */
  --fs-small:17px;   /* маршрут, приписки, пункты списка */
  --fs-base:19px;    /* служебный основной, кнопки, преамбула */
  --fs-letter:21px;  /* текст письма */
  --fs-num:26px;     /* время в расписании */
  --fs-addr:28px;    /* адрес */
  --fs-h2:32px;
  --fs-h1:clamp(29px, 4.4vw, 48px);

  --pad:32px;
  --r-card:14px;   /* карточки */
  --r-cell:10px;   /* плитки и плашки */
  --r-pill:999px;  /* кнопки */
  --step:4px;      /* всё пространство кратно */
}

/* «Утро» — больше цвета в воздухе, акцент уходит в бирюзу */
:root[data-theme="morning"]{
  --sky:oklch(0.930 0.042 225);
  --ground:oklch(0.978 0.014 226);
  --surface:oklch(0.995 0.004 226);
  --line:oklch(0.893 0.024 228);
  --line-soft:oklch(0.928 0.018 228);
  --text:oklch(0.265 0.032 240);
  --text-2:oklch(0.480 0.030 238);
  --text-3:oklch(0.550 0.026 235);
  --deep:oklch(0.50 0.095 232);
  --deep-hover:oklch(0.42 0.095 232);
  --deep-soft:oklch(0.950 0.032 230);
}

/* «Высота» — почти белый фон, чистый небесный акцент */
:root[data-theme="altitude"]{
  --sky:oklch(0.960 0.024 250);
  --ground:oklch(0.992 0.004 250);
  --surface:oklch(1 0 0);
  --line:oklch(0.915 0.014 250);
  --line-soft:oklch(0.945 0.010 250);
  --text:oklch(0.230 0.038 258);
  --text-2:oklch(0.465 0.032 256);
  --text-3:oklch(0.540 0.026 252);
  --deep:oklch(0.52 0.135 255);
  --deep-hover:oklch(0.43 0.135 255);
  --deep-soft:oklch(0.958 0.030 252);
}

/* Ночная тема: сайт открывают вечером, светлая страница бьёт по глазам */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="frost"]):not([data-theme="morning"]):not([data-theme="altitude"]){
    --sky:oklch(0.245 0.028 250);
    --ground:oklch(0.185 0.020 250);
    --surface:oklch(0.225 0.022 250);
    --line:oklch(0.330 0.024 250);
    --line-soft:oklch(0.285 0.020 250);
    --text:oklch(0.945 0.010 245);
    --text-2:oklch(0.790 0.016 245);
    --text-3:oklch(0.660 0.018 245);
    --deep:oklch(0.755 0.105 245);
    --deep-hover:oklch(0.830 0.090 245);
    --deep-soft:oklch(0.300 0.055 245);
    --warn:oklch(0.800 0.095 68);
  }
}

*{box-sizing:border-box}
/* видно только поисковику и скринридеру */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* при смене оттенка переходы мешают: цвет «залипает» на прежнем значении */
html.switching *,html.switching *::before,html.switching *::after{transition:none !important}
/* на короткой странице градиент фона растягивается на всё окно, а не обрывается под текстом */
html{-webkit-text-size-adjust:100%;min-height:100%}
body{
  margin:0;color:var(--text);
  font-family:var(--f-text);font-size:var(--fs-letter);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background:var(--ground);
  /* воздух: свет сверху, без резкой границы */
  background-image:linear-gradient(to bottom,var(--sky),var(--ground) 620px);
  background-repeat:no-repeat;
}
a{color:var(--deep);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}
[hidden]{display:none !important}

.shell{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* ─── первый экран ────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start;
  padding:48px 0 40px;
}
.letter{display:flex;flex-direction:column;gap:24px}
.fellowship{
  font-family:var(--f-text);margin:0;display:flex;flex-direction:column;gap:2px;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.fellowship b{
  font-size:var(--fs-ident);font-weight:600;line-height:1.2;letter-spacing:-0.01em;
  color:var(--text);font-family:var(--f-text);
}
.fellowship span{font-family:var(--f-text);font-size:var(--fs-base);font-weight:400;color:var(--text-2)}
.lead{
  font-size:var(--fs-h1);font-weight:400;line-height:1.14;margin:0;
  letter-spacing:-0.015em;text-wrap:balance;
}
.lead em{font-style:italic;color:var(--deep)}
.jump{
  font-family:var(--f-ui);font-size:var(--fs-base);font-weight:500;color:var(--deep);
  text-decoration:none;display:inline-flex;gap:12px;align-items:center;align-self:flex-start;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:14px 24px;
}
.jump:hover{border-color:var(--deep);color:var(--deep-hover)}
.jump span{transition:transform 160ms cubic-bezier(0.2,0,0,1)}
.jump:hover span{transform:translateX(3px)}
.intro{font-size:var(--fs-letter);line-height:1.6;color:var(--text-2);margin:0;max-width:44ch;text-wrap:pretty}


.place{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  overflow:hidden;box-shadow:0 1px 2px oklch(0.4 0.05 250 / 0.04),0 8px 24px oklch(0.4 0.05 250 / 0.05);
}
.place-body{padding:20px 24px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.place .k{
  font-family:var(--f-ui);font-size:var(--fs-micro);letter-spacing:0.09em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;margin:0;
}
.addr{margin:0;display:flex;flex-direction:column;gap:2px}
.addr b{font-size:var(--fs-addr);font-weight:600;line-height:1.2;letter-spacing:-0.01em}
.addr span{font-family:var(--f-ui);font-size:var(--fs-small);color:var(--text-2)}
.door{
  font-family:var(--f-ui);font-size:var(--fs-small);line-height:1.6;color:var(--text-2);margin:4px 0 0;
}
.door b{color:var(--text);font-weight:600}
.place .btn{margin-top:12px}

.btn{
  font-family:var(--f-ui);font-size:var(--fs-base);font-weight:600;text-decoration:none;padding:16px 28px;border-radius:var(--r-pill);
  background-color:var(--deep);color:var(--surface);border:1px solid var(--deep);display:inline-block;
  transition:background-color 160ms cubic-bezier(0.2,0,0,1),color 160ms cubic-bezier(0.2,0,0,1),
             border-color 160ms cubic-bezier(0.2,0,0,1);
}
.btn:hover{background-color:var(--deep-hover);border-color:var(--deep-hover)}
.btn.ghost{background-color:transparent;color:var(--deep);border-color:var(--line)}
.btn.ghost:hover{background-color:var(--deep-soft);border-color:var(--deep);color:var(--deep-hover)}

.photo{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--ground)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.empty{
  border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-ui);font-size:14px;color:var(--text-2);text-align:center;line-height:1.6;
}
.photo.empty small{color:var(--text-3)}

/* ─── расписание недели ───────────────────────────────────── */
.schedule{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:24px 28px;margin:0 0 20px;
}
.schedule .k{
  font-family:var(--f-ui);font-size:var(--fs-micro);letter-spacing:0.09em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;margin:0 0 16px;
}
.week{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
}
.week .day{
  font-family:var(--f-ui);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 4px;border-radius:var(--r-cell);background:var(--ground);
}
.week .day .d{font-size:var(--fs-micro);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.week .day .t{font-size:var(--fs-num);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.week .day.off{background:transparent}
.week .day.off .t{color:var(--text-3);font-weight:400}
.week .day.next{background:var(--deep-soft)}
.week .day.next .d,.week .day.next .t{color:var(--deep)}
.duration{
  font-family:var(--f-ui);font-size:var(--fs-base);color:var(--text-2);margin:20px 0 0;max-width:82ch;
}
.online{
  font-family:var(--f-ui);font-size:var(--fs-small);line-height:1.5;color:var(--text-2);
  margin:8px 0 0;line-height:1.6;
}
.other{
  font-family:var(--f-ui);font-size:var(--fs-small);color:var(--text-2);max-width:82ch;
  border-top:1px solid var(--line-soft);margin:20px 0 0;padding-top:16px;
}
.schedule.warn .week .day.next{background:oklch(0.968 0.024 70)}
.schedule.warn .week .day.next .d,.schedule.warn .week .day.next .t{color:var(--warn)}

/* ─── что будет в первый раз ──────────────────────────────── */
.first{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:32px;margin:0 0 24px;
}
.first h2{font-size:var(--fs-h2);font-weight:400;margin:0 0 24px;line-height:1.25}
.steps{display:flex;flex-direction:column;gap:32px}
.step-group h3{
  font-family:var(--f-ui);font-size:var(--fs-micro);letter-spacing:0.09em;text-transform:uppercase;
  color:var(--deep);font-weight:600;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line-soft);
}
.step-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.step-group li{max-width:88ch}
.step-group li{
  font-family:var(--f-ui);font-size:var(--fs-small);line-height:1.6;color:var(--text-2);
  margin:0;padding-left:16px;position:relative;
}
.step-group li::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--deep);opacity:0.55;
}
.step-group li b{color:var(--text);font-weight:600}
.rules{font-family:var(--f-ui);font-size:var(--fs-small);color:var(--text-3);margin:28px 0 0;
  border-top:1px solid var(--line-soft);padding-top:16px}

/* ─── для родственников ───────────────────────────────────── */
.family{
  background:var(--deep-soft);border-radius:var(--r-card);padding:28px 32px;margin:0 0 24px;
}
.family h2{font-size:var(--fs-h2);font-weight:400;margin:0 0 12px;line-height:1.25}
.family p{font-size:var(--fs-base);line-height:1.6;color:var(--text-2);margin:0}
.family b{color:var(--text);font-weight:600}

/* ─── подвал: преамбула АА ────────────────────────────────── */
.foot{
  border-top:1px solid var(--line-soft);margin-top:32px;padding:32px 0 64px;
}
.preamble{
  font-size:var(--fs-base);line-height:1.65;color:var(--text-2);margin:0;
}
.credit{
  font-family:var(--f-ui);font-size:var(--fs-micro);color:var(--text-3);margin:12px 0 0;
}
.foot a{color:var(--text-3)}

/* ─── служебные страницы: «что сайт знает», статистика ────── */
.doc-top{padding:32px 0 0}
.back{font-family:var(--f-ui);font-size:var(--fs-base);text-decoration:none}
.back:hover{text-decoration:underline}
.doc{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:40px 48px;margin:24px 0 0;max-width:860px;
}
.doc h1{font-size:var(--fs-h2);font-weight:400;line-height:1.25;margin:0 0 8px;text-wrap:balance}
.doc-meta{font-family:var(--f-ui);font-size:var(--fs-micro);color:var(--text-3);margin:0 0 28px}
.doc .doc-lead{font-family:var(--f-text);font-size:var(--fs-letter);line-height:1.6;color:var(--text);margin:0 0 8px}
.doc h2{font-size:var(--fs-letter);font-weight:600;line-height:1.35;margin:36px 0 12px}
.doc p,.doc li{
  font-family:var(--f-ui);font-size:var(--fs-base);line-height:1.65;color:var(--text-2);
  max-width:68ch;text-wrap:pretty;
}
.doc p{margin:0 0 12px}
.doc ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.doc li{padding-left:16px;position:relative}
.doc li::before{
  content:"";position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;
  background:var(--deep);opacity:0.55;
}
.doc b{color:var(--text);font-weight:600}

/* ─── служения ────────────────────────────────────────────── */
.svc-ask{background:var(--deep-soft);border-radius:var(--r-cell);padding:24px;margin:28px 0 0}
.doc .svc-q{font-family:var(--f-text);font-size:var(--fs-letter);line-height:1.35;color:var(--text);margin:0 0 16px}
.svc-chips{display:flex;flex-wrap:wrap;gap:8px}
.svc-chips button{
  font-family:var(--f-ui);font-size:var(--fs-small);font-weight:500;color:var(--deep);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 20px;
  transition:background-color 160ms cubic-bezier(0.2,0,0,1),color 160ms cubic-bezier(0.2,0,0,1),
             border-color 160ms cubic-bezier(0.2,0,0,1);
}
.svc-chips button:hover{border-color:var(--deep)}
.svc-chips button[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--surface)}
.doc .svc-count{font-size:var(--fs-small);margin:16px 0 0}
.doc .svc-count:empty{margin:0}

.svc-group{margin-top:36px}
.doc .svc-group h2{
  font-family:var(--f-ui);font-size:var(--fs-micro);letter-spacing:0.09em;text-transform:uppercase;
  color:var(--deep);font-weight:600;line-height:1.5;margin:0 0 4px;
}
.svc{border-top:1px solid var(--line-soft);scroll-margin-top:16px}
.svc summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 0;cursor:pointer;list-style:none;
}
.svc summary::-webkit-details-marker{display:none}
.svc-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.svc-name{font-size:var(--fs-letter);line-height:1.35;color:var(--text);transition:color 160ms cubic-bezier(0.2,0,0,1)}
.svc summary:hover .svc-name{color:var(--deep)}
.svc-need{font-family:var(--f-ui);font-size:var(--fs-small);line-height:1.5;color:var(--text-2)}
.svc-mark{
  flex:none;width:12px;height:12px;margin-right:4px;
  border-right:2px solid var(--deep);border-bottom:2px solid var(--deep);
  transform:translateY(-2px) rotate(45deg);transition:transform 160ms cubic-bezier(0.2,0,0,1);
}
.svc[open] .svc-mark{transform:translateY(2px) rotate(225deg)}
.svc-body{padding:0 0 24px}
.doc .svc-how{color:var(--text);font-weight:500;margin:0 0 12px}

/* ─── панель проверки (?dev=1) ────────────────────────────── */
.dev{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:var(--text);color:var(--surface);font-family:var(--f-ui);font-size:13px;
  display:none;flex-direction:column;gap:8px;padding:12px 16px;
}
.dev.on{display:flex}
.dev .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dev .row > span{opacity:0.65;min-width:150px}
.dev button{
  font:inherit;cursor:pointer;padding:6px 12px;border-radius:6px;
  border:1px solid oklch(0.45 0.03 250);background:transparent;color:var(--surface);
}
.dev button[aria-pressed="true"]{background:var(--surface);color:var(--text);border-color:var(--surface)}
body:has(.dev.on){padding-bottom:120px}

/* ─── адаптив ─────────────────────────────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:36px;padding:36px 0 32px}
  .place{max-width:520px}
}
@media (max-width:640px){
  /* на телефоне «куда идти» важнее, чем разъяснение: письмо уходит под карточку */
  .letter{display:contents}
  .fellowship{order:1}
  .lead{order:2}
  .intro{order:3}
  .place{order:4}
  .jump{order:5}   /* без явного порядка ссылка уезжала в самый верх */
  .hero{gap:24px}
  .photo{aspect-ratio:16/10}
  :root{
    --pad:20px;
    --fs-small:16px; --fs-base:18px; --fs-letter:19px;
    --fs-num:23px; --fs-addr:25px; --fs-h2:27px; --fs-ident:24px;
  }
  body{background-image:linear-gradient(to bottom,var(--sky),var(--ground) 420px)}
  .hero{padding:28px 0 32px;gap:28px}
  .letter{gap:20px}
  .letter{max-width:none;gap:20px}
  .fellowship{font-size:13px}
  .place-body{padding:18px 20px 20px}
    .btn{text-align:center}
  .jump{display:flex;justify-content:space-between;align-self:stretch;padding:16px 20px;border-radius:var(--r-cell)}
  .schedule{padding:20px}
  /* на телефоне важно «когда мы есть», а не «когда нас нет» */
  .week{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .week .day.off{display:none}
  .foot{padding:24px 0 48px}
  .first{padding:24px 20px}
  .steps{gap:24px}
  .family{padding:20px}
  .doc-top{padding:24px 0 0}
  .doc{padding:24px 20px;margin-top:16px}
  .doc h2{margin-top:28px}
  .doc li::before{top:12px}
  .svc-ask{padding:20px 16px;margin-top:24px}
  .svc-chips button{flex:1 1 auto}
  .svc-group{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
}