/* ===================================================================
   Сила Воскресения — общие стили сайта
   =================================================================== */

:root{
  --ink:        #150821;
  --deep:       #1B0A2A;
  --aubergine:  #2A1240;
  --vitrage:    #4A1E5D;
  --vitrage-2:  #6B2D7A;
  --ember:      #9E2E6C;
  --ember-2:    #C76A9D;
  --lavender:   #D7C8DD;
  --cream:      #EBE3EE;
  --bone:       #F6F1F8;
  --white:      #FFFFFF;
  --rule:       rgba(21, 8, 33, 0.12);

  --max:        1240px;
  --pad-x:      clamp(20px, 4vw, 56px);
  --pad-y:      clamp(48px, 6vw, 96px);

  --rad:        6px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Manrope', system-ui, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

img, svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
a:hover{ color: var(--ember) }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background: var(--ember); color: var(--bone) }

/* ---------- Type system ---------- */
.h-display{ font-family:'Unbounded'; font-weight:600; line-height:1.02; letter-spacing:-.005em }
.h-title  { font-family:'Unbounded'; font-weight:600; line-height:1.1;  letter-spacing:0 }
.h-section{ font-family:'Unbounded'; font-weight:500; line-height:1.15; letter-spacing:.005em }
.h-eyebrow{ font-family:'Manrope';   font-weight:600; font-size:12px;
            letter-spacing:.22em; text-transform:uppercase; opacity:.65 }
.h-mono   { font-family:'Manrope';   font-weight:500; font-size:11px;
            letter-spacing:.1em }
.lede     { font-size: clamp(17px, 1.6vw, 21px); line-height:1.55; max-width:60ch }
.h-small  { font-size:14px; line-height:1.55; opacity:.78 }

h1.title-xl{ font: 600 clamp(40px, 6vw, 76px)/.98 'Unbounded'; letter-spacing:-.01em }
h2.title-l { font: 600 clamp(28px, 3.6vw, 44px)/1.05 'Unbounded' }
h3.title-m { font: 600 clamp(20px, 2.2vw, 26px)/1.15 'Unbounded' }

/* ---------- Layout helpers ---------- */
.wrap   { width:100%; max-width: var(--max); margin:0 auto; padding: 0 var(--pad-x) }
.stack-l{ display:flex; flex-direction:column; gap: clamp(48px, 6vw, 88px) }
.stack-m{ display:flex; flex-direction:column; gap: clamp(24px, 3vw, 40px) }
.stack-s{ display:flex; flex-direction:column; gap: 12px }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 48px) }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px) }
.cols-side{ display:grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(32px, 4vw, 80px) }
@media (max-width: 760px){
  .grid-2, .grid-3, .cols-side{ grid-template-columns: 1fr }
}

.section{ padding: var(--pad-y) 0 }
.hairline{ height:1px; background: var(--rule); border:0 }

/* ---------- Cross + rays mark (knack) ---------- */
.mark{ display:inline-block; line-height:0; color: currentColor }
.mark svg{ width:100%; height:auto; display:block }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(246, 241, 248, .92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.brand-lock{ display:flex; align-items:center; gap:12px }
.brand-lock .mark{ width:28px; color: var(--ink) }
.brand-lock .name{
  font-family:'Unbounded'; font-weight:600; font-size:16px; letter-spacing:.005em;
}
.brand-lock .sub{
  font-family:'Manrope'; font-weight:500; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.55; margin-top:1px;
}
.nav{ display:flex; align-items:center; gap: clamp(14px, 1.8vw, 24px) }
.nav > a, .nav > .nav-item > .nav-link{
  font-family:'Manrope'; font-weight:500; font-size:14px;
  letter-spacing:.04em;
  padding: 8px 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s, color .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.nav > a:hover,
.nav > .nav-item > .nav-link:hover,
.nav .active{ color: var(--ink); border-bottom-color: var(--ember) }

/* Дропдаун */
.nav-item{ position:relative }
.nav-item .caret{ font-size:9px; opacity:.6; transition: transform .15s }
.nav-item:hover .caret{ transform: rotate(180deg) }
.submenu{
  position:absolute; top:100%; left:-12px;
  min-width: 220px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--rad);
  padding: 8px;
  margin-top: 12px;
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  box-shadow: 0 12px 32px rgba(21, 8, 33, .12);
  z-index: 60;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu{ opacity:1; visibility:visible; transform: translateY(0) }
.submenu a{
  display:block; padding: 10px 14px; border-radius: calc(var(--rad) - 2px);
  font-size: 14px; letter-spacing: 0;
}
.submenu a:hover{ background: var(--cream); color: var(--ink) }

/* Mobile nav */
.nav-toggle{ display:none; font-size:24px; line-height:1; padding:4px 8px }
@media (max-width: 880px){
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--bone); border-bottom:1px solid var(--rule);
    padding: 8px 0;
  }
  .nav.open{ display:flex }
  .nav > a, .nav > .nav-item > .nav-link{
    padding:14px var(--pad-x); border-bottom:1px solid var(--rule);
  }
  .nav-item{ position:static }
  .nav-item .caret{ display:none }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding: 0 0 8px;
    background: var(--cream); border-radius: 0;
    margin-top: 0;
  }
  .submenu a{ padding: 10px var(--pad-x) 10px calc(var(--pad-x) + 20px); border-bottom:1px solid var(--rule) }
  .nav-toggle{ display:block }
}

/* ---------- Hero (со слайдером на фоне) ---------- */
.hero{
  background: linear-gradient(165deg, var(--ink) 0%, var(--deep) 40%, var(--vitrage) 100%);
  color: var(--bone);
  padding: clamp(80px, 10vw, 160px) 0;
  position:relative;
  overflow:hidden;
  min-height: clamp(520px, 64vh, 720px);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(199,106,157,.20), transparent 60%),
    radial-gradient(ellipse 70% 80% at 10% 90%, rgba(107,45,122,.35), transparent 65%);
  pointer-events:none; z-index:1;
}
.hero .wrap{ position:relative; z-index:3 }
.hero .h-eyebrow{ opacity:.8 }
.hero h1{ margin-top:24px }
.hero p.lede{ margin-top:24px; opacity:.92 }
.hero .cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap }

/* Hero photo slider — фон, JS переключает .active */
.hero-slides{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
}
.hero-slides > .slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero-slides > .slide.active{ opacity: .58 }
/* Затемнение, чтобы текст всегда читался */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(21,8,33,.35) 0%, rgba(21,8,33,.55) 100%);
  pointer-events:none;
}

/* Плейсхолдеры пока нет реальных файлов */
.hero-slides .slide.--placeholder-1{ background:linear-gradient(135deg,#2A1240,#6B2D7A) }
.hero-slides .slide.--placeholder-2{ background:linear-gradient(135deg,#4A1E5D,#9E2E6C) }
.hero-slides .slide.--placeholder-3{ background:linear-gradient(135deg,#1B0A2A,#4A1E5D) }
.hero-slides .slide.--placeholder-4{ background:linear-gradient(135deg,#9E2E6C,#C76A9D) }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 22px; border-radius: 999px;
  font-family:'Manrope'; font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase;
  transition: transform .15s, background .2s, color .2s;
}
.btn-primary{ background: var(--ember); color: var(--bone) }
.btn-primary:hover{ background: var(--ember-2); color: var(--ink); transform: translateY(-1px) }
.btn-ghost{
  background: transparent; color: var(--bone);
  border:1px solid rgba(246,241,248,.4);
}
.btn-ghost:hover{ background: rgba(246,241,248,.08); color: var(--bone) }
.btn-dark{ background: var(--ink); color: var(--bone) }
.btn-dark:hover{ background: var(--vitrage); color: var(--bone); transform: translateY(-1px) }

/* ---------- Schedule blocks ---------- */
.schedule{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px);
}
.schedule .day{
  background: var(--bone); color: var(--ink);
  border:1px solid var(--rule); border-radius: var(--rad);
  padding: 28px 28px 32px;
  display:flex; flex-direction:column; gap:12px;
}
.schedule .day .label{
  font-family:'Manrope'; font-weight:600; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; opacity:.6;
}
.schedule .day .name{ font: 600 22px/1.1 'Unbounded' }
.schedule .day .time{ font: 500 28px/1 'Unbounded'; margin-top:auto; padding-top:8px }
.schedule .day .desc{ font-size:14px; opacity:.7; line-height:1.55 }
@media (max-width: 760px){ .schedule{ grid-template-columns: 1fr } }

/* ---------- Quote block ---------- */
.scripture{
  font-family:'Unbounded'; font-weight:300;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height:1.22; letter-spacing:-.005em;
  max-width: 22ch;
}
.scripture-ref{
  font-family:'Manrope'; font-weight:500; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; opacity:.6;
  margin-top:18px;
}

/* ---------- Cards ---------- */
.card{
  background: var(--bone);
  border:1px solid var(--rule);
  border-radius: var(--rad);
  padding: clamp(24px, 3vw, 36px);
}
.card.dark{ background: var(--ink); color: var(--bone); border-color: transparent }
.card.vitrage{ background: var(--vitrage); color: var(--bone); border-color: transparent }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink); color: var(--bone);
  padding: clamp(56px, 7vw, 100px) 0 36px;
  margin-top: clamp(80px, 8vw, 140px);
}
.site-footer .grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 760px){ .site-footer .grid{ grid-template-columns: 1fr 1fr } }
.site-footer h4{
  font: 600 12px/1 'Manrope';
  letter-spacing:.22em; text-transform:uppercase; opacity:.6;
  margin-bottom: 14px;
}
.site-footer a{ display:block; padding:5px 0; opacity:.85; font-size:14px }
.site-footer a:hover{ opacity:1; color: var(--ember-2) }
.site-footer .brand-lock .mark{ color: var(--bone) }
.site-footer .brand-lock .name, .site-footer .brand-lock .sub{ color: var(--bone) }
.site-footer .legal{
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(246,241,248,.15);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; opacity:.55; letter-spacing:.04em;
}

/* ---------- Brand book (отдельная страница) ---------- */
.bb-toc{
  position:sticky; top: 80px;
  font-size:13px; line-height:1.9;
}
.bb-toc h4{
  font: 600 11px/1 'Manrope';
  letter-spacing:.22em; text-transform:uppercase; opacity:.5;
  margin-bottom: 14px;
}
.bb-toc a{ display:block; opacity:.7 }
.bb-toc a:hover{ opacity:1; color: var(--ember) }
.bb-toc a.is-active{ color: var(--ember); opacity:1 }

.bb-section{ scroll-margin-top: 96px }
.bb-section + .bb-section{ margin-top: clamp(80px, 8vw, 120px) }
.bb-section .h-eyebrow{ display:block; margin-bottom: 12px }

.swatches{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
@media (max-width: 760px){ .swatches{ grid-template-columns: repeat(2, 1fr) } }
.swatch{ display:flex; flex-direction:column; gap:10px }
.swatch .chip{
  aspect-ratio: 1/0.7; border-radius: var(--rad);
  display:flex; align-items:flex-end; padding:14px;
  font-family:'Manrope'; font-weight:600; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--bone);
}
.swatch .meta{ font: 500 11px/1.6 'Manrope'; letter-spacing:.04em; opacity:.7 }

.size-row{ display:flex; align-items:flex-end; gap: clamp(24px, 3vw, 48px); flex-wrap:wrap }
.size-row .tile{ display:flex; flex-direction:column; align-items:center; gap:10px }
.size-row .tile small{ font: 500 11px/1 'Manrope'; opacity:.5; letter-spacing:.04em }

.type-spec{ display:grid; grid-template-columns: 160px 1fr; gap: 18px 32px; align-items:baseline }
.type-spec span:first-child{ font: 500 11px/1 'Manrope'; letter-spacing:.18em; text-transform:uppercase; opacity:.55 }

/* ---------- VK Gallery slider (horizontal scroll, snap) ---------- */
.gallery{
  display:grid; grid-template-columns: 1fr; gap: 20px;
}
.gallery-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.gallery-head h3{ font: 600 clamp(22px, 2.4vw, 30px)/1.1 'Unbounded'; max-width:36ch }
.gallery-head .all-link{
  font: 500 13px/1 'Manrope'; letter-spacing:.16em; text-transform:uppercase;
  opacity:.7; white-space:nowrap;
}
.gallery-head .all-link:hover{ opacity:1; color: var(--ember) }
.gallery-track{
  display:flex; gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--pad-x);
  padding-bottom: 8px;
  margin: 0 calc(var(--pad-x) * -1);
  padding-left: var(--pad-x); padding-right: var(--pad-x);
  scrollbar-width: thin;
  scrollbar-color: var(--vitrage) transparent;
}
.gallery-track::-webkit-scrollbar{ height: 6px }
.gallery-track::-webkit-scrollbar-thumb{ background: var(--vitrage); border-radius:3px }
.gallery-slide{
  flex: 0 0 clamp(220px, 28vw, 360px);
  scroll-snap-align: start;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  border-radius: var(--rad);
  overflow:hidden;
  background: var(--cream);
  border: 1px solid var(--rule);
  transition: transform .2s, box-shadow .2s;
}
.gallery-slide:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(21, 8, 33, .12);
  color: inherit;
}
.gallery-slide .thumb{
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--vitrage);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  color: rgba(246,241,248,.95);
  padding: 24px;
  overflow:hidden;
}
.gallery-slide .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(21,8,33,.45) 100%);
  pointer-events:none;
}
.gallery-slide .thumb .ico{ width: 56px; opacity:.55; position:relative; z-index:1 }
.gallery-slide .thumb.--ink{      background: linear-gradient(160deg, #150821, #2A1240) }
.gallery-slide .thumb.--vitrage{  background: linear-gradient(160deg, #4A1E5D, #6B2D7A) }
.gallery-slide .thumb.--ember{    background: linear-gradient(160deg, #9E2E6C, #4A1E5D) }
.gallery-slide .thumb.--rose{     background: linear-gradient(160deg, #C76A9D, #9E2E6C) }
.gallery-slide .thumb.--lav{      background: linear-gradient(160deg, #6B2D7A, #4A1E5D); }
.gallery-slide .meta{
  padding: 14px 16px 18px;
  display:flex; flex-direction:column; gap:6px;
}
.gallery-slide .title{
  font: 600 15px/1.3 'Manrope'; letter-spacing:.002em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.gallery-slide .sub{
  font: 500 11px/1.4 'Manrope';
  letter-spacing:.06em; opacity:.55;
  display:flex; gap:8px; align-items:center; justify-content:space-between;
}
.gallery-slide .sub .vk-mark::before{ content:"VK →" }

/* ---------- VK Album cards ---------- */
.album-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.album-grid.cols-2{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) }
.album-grid.cols-4{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
.album-card{
  display:flex; flex-direction:column;
  border-radius: var(--rad);
  overflow:hidden;
  background: var(--cream);
  border: 1px solid var(--rule);
  transition: transform .2s, box-shadow .2s;
  text-decoration:none; color: inherit;
}
.album-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(21, 8, 33, .12);
  color: inherit;
}
.album-card .thumb{
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--vitrage);
  position:relative;
}
.album-card .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(21,8,33,.55) 100%);
}
.album-card .meta{
  padding: 14px 16px 18px;
  display:flex; flex-direction:column; gap:6px;
}
.album-card .title{
  font: 600 15px/1.3 'Manrope';
  letter-spacing:.002em;
}
.album-card .sub{
  font: 500 11px/1.4 'Manrope';
  letter-spacing:.06em; opacity:.55;
  display:flex; gap:8px; align-items:center;
}
.album-card .sub::after{
  content:"VK →"; margin-left:auto; opacity:.6;
}

/* ---------- Event card (без превью) ---------- */
.event-card{
  border:1px solid var(--rule); border-radius: var(--rad);
  padding: 22px 24px;
  display:flex; flex-direction:column; gap: 8px;
  background: var(--bone);
}
.event-card .when{
  font-family:'Manrope'; font-weight:600; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color: var(--ember);
}
.event-card .what{ font: 600 19px/1.3 'Unbounded' }
.event-card .desc{ font-size:14px; opacity:.78; line-height:1.55 }

/* ---------- Person card ---------- */
.person-card{
  display:flex; gap:18px; align-items:flex-start;
  padding: 22px; border:1px solid var(--rule); border-radius: var(--rad);
  background: var(--bone);
}
.person-card .avatar{
  width:64px; height:64px; flex-shrink:0;
  border-radius: 50%;
  background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  color: var(--vitrage);
}
.person-card .role{
  font: 500 11px/1.2 'Manrope'; letter-spacing:.18em;
  text-transform:uppercase; opacity:.55;
}
.person-card .name{ font: 600 17px/1.2 'Unbounded'; margin-top:4px }
.person-card .desc{ font-size:14px; opacity:.78; margin-top:6px; line-height:1.55 }

/* ---------- Live stream pill ---------- */
.live-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(158, 46, 108, .15);
  color: var(--ember-2);
  font: 600 11px/1 'Manrope'; letter-spacing:.16em; text-transform:uppercase;
}
.live-pill .dot{
  width:8px; height:8px; border-radius:50%; background: var(--ember);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink{ 50%{ opacity:.3 } }

.dontmark{
  position:relative; aspect-ratio:1; padding: 22px;
  background: var(--cream); border-radius: var(--rad);
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Mobile fine-tuning (≤ 480px) ---------- */
@media (max-width: 480px) {
  :root{ --pad-x: 18px }
  body{ font-size:15px }
  .hero{ padding: 56px 0 }
  h1.title-xl{ font-size: 36px; line-height: 1.02 }
  h2.title-l{ font-size: 26px }
  h3.title-m{ font-size: 19px }
  .lede{ font-size: 16px }
  .scripture{ font-size: 20px; line-height: 1.25 }

  .section{ padding: 44px 0 }

  .schedule .day{ padding: 22px 22px 26px }
  .schedule .day .name{ font-size: 19px }
  .schedule .day .time{ font-size: 24px }

  .site-header .wrap{ padding-top: 14px; padding-bottom: 14px }
  .brand-lock .mark{ width: 24px }
  .brand-lock .name{ font-size: 15px }
  .brand-lock .sub{ display:none } /* экономим место в шапке */

  .nav-toggle{ font-size: 22px }
  .nav > a, .nav > .nav-item > .nav-link{ padding: 12px var(--pad-x); font-size: 15px }
  .submenu a{ padding: 8px var(--pad-x) 8px calc(var(--pad-x) + 18px); font-size: 14px }

  .site-footer{ padding: 52px 0 28px }
  .site-footer .grid{ grid-template-columns: 1fr; gap: 28px }
  .site-footer .legal{ font-size: 11px; flex-direction: column; align-items: flex-start; gap: 6px }

  .gallery-slide{ flex-basis: 240px }
  .gallery-head h3{ font-size: 20px }
  .gallery-head .all-link{ font-size: 12px }

  .cta{ flex-direction: column; align-items: stretch }
  .cta .btn{ justify-content: center; text-align: center }

  .person-card{ padding: 16px; gap: 14px }
  .person-card .avatar{ width: 48px; height: 48px }

  .swatches{ grid-template-columns: 1fr 1fr; gap: 12px }
  .swatch .chip{ aspect-ratio: 1/0.55; padding: 10px; font-size: 11px }

  .grid-3{ gap: 16px }
  .card{ padding: 22px }

  /* отступ под фиксированный хедер при якорях */
  .bb-section{ scroll-margin-top: 70px }
}

/* ---------- Совсем маленькие экраны (≤ 360px) ---------- */
@media (max-width: 360px) {
  h1.title-xl{ font-size: 32px }
  .scripture{ font-size: 18px }
  .schedule .day .time{ font-size: 21px }
}
.dontmark::before, .dontmark::after{
  content:""; position:absolute; inset:0;
}
.dontmark::before{
  background: linear-gradient(to top right,
    transparent calc(50% - .5px), #c0254a calc(50% - .5px),
    #c0254a calc(50% + .5px), transparent calc(50% + .5px));
}
.dontmark::after{
  background: linear-gradient(to top left,
    transparent calc(50% - .5px), #c0254a calc(50% - .5px),
    #c0254a calc(50% + .5px), transparent calc(50% + .5px));
}