:root{--green-dark:#1f4d36;--green:#2e6b4f;--green-soft:#e8f1eb;--accent:#d98a3d;
--cream:#faf7f1;--paper:#fff;--ink:#2b2b28;--muted:#6f6f66;--line:#e6e1d6;
--accent-soft:#fdf1e3}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6}
header{background:var(--green-dark);color:#fff;padding:18px 16px}
.wrap{max-width:820px;margin:0 auto;padding:0 4px}
header .wrap{display:flex;align-items:center;gap:12px}
header img{height:44px;background:#fff;border-radius:8px;padding:3px}
header h1{font-size:20px;font-weight:600}
header a{color:#cfe3d7;font-size:13px;text-decoration:none;margin-left:auto;white-space:nowrap}
main{max-width:820px;margin:22px auto 60px;padding:0 14px}
h2{font-size:22px;color:var(--green-dark);margin:34px 0 12px;line-height:1.3}
h3{font-size:17px;color:var(--green-dark);margin:24px 0 8px}
p{margin-bottom:13px}
a{color:var(--green)}
.lead{font-size:17px;color:var(--ink)}
.когда{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--accent);
border-radius:10px;padding:14px 16px;margin:18px 0 26px}
.когда b{color:var(--green-dark)}
.когда .строка{display:flex;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.когда .строка span:first-child{color:var(--muted);min-width:108px}
.врезка{background:var(--green-soft);border-radius:10px;padding:15px 17px;margin:20px 0}
.врезка p:last-child{margin-bottom:0}
.навык{background:var(--paper);border:1px solid var(--line);border-radius:10px;
padding:14px 16px;margin-bottom:11px}
.навык b{color:var(--green-dark);display:block;margin-bottom:4px}
.навык .зачем{color:var(--muted);font-size:14.5px;margin-top:6px}
.страна{border-left:3px solid var(--green-soft);padding:2px 0 2px 14px;margin-bottom:18px}
.страна b{color:var(--green-dark)}
/* карточки стран — в стиле карточек основного сайта: тень, подъём при наведении */
.страна-блок{background:var(--paper);border:1px solid var(--line);border-radius:16px;
overflow:hidden;box-shadow:0 10px 30px rgba(31,77,54,.07);margin-bottom:20px;
transition:.2s transform,.2s box-shadow}
.страна-блок:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(31,77,54,.12)}
.страна-блок .шапка{background:linear-gradient(105deg,var(--green-dark) 0%,var(--green) 100%);
color:#fff;padding:17px 22px;display:flex;align-items:center;gap:14px}
.страна-блок .флаг{font-size:36px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.страна-блок .шапка h3{color:#fff;margin:0;font-size:19px;line-height:1.2}
.страна-блок .шапка .город{font-size:13px;opacity:.82;margin-top:3px;letter-spacing:.3px}
.страна-блок .тело{padding:19px 22px 22px}
.страна-блок .тело p{margin-bottom:11px}
.страна-блок .тело p:last-of-type{margin-bottom:15px}
.деталь{background:var(--green-soft);border-radius:10px;padding:12px 15px;margin:14px 0;
font-size:14.5px;border-left:4px solid var(--green)}
.деталь b{color:var(--green-dark)}
.кнопка{display:inline-flex;align-items:center;gap:.5em;border:none;cursor:pointer;
font-family:inherit;font-weight:700;font-size:14.5px;padding:12px 24px;border-radius:999px;
background:var(--green);color:#fff;text-decoration:none;
transition:.2s transform,.2s box-shadow,.2s background}
.кнопка:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,77,54,.28)}
.кнопка.главная{background:var(--accent);box-shadow:0 8px 20px rgba(217,138,61,.3)}
.кнопка.главная:hover{background:#c47a30}
/* блок с цифрами */
.цифры{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
gap:12px;margin:20px 0 8px}
.цифра{background:linear-gradient(160deg,var(--paper) 0%,var(--green-soft) 100%);
border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-align:center}
.цифра .число{font-size:30px;font-weight:800;color:var(--green-dark);line-height:1}
.цифра .подпись{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.35}
ul{margin:0 0 13px 20px}
li{margin-bottom:6px}
.подвал{font-size:13px;color:var(--muted);border-top:1px solid var(--line);
margin-top:38px;padding-top:16px}
.источники{font-size:13px;color:var(--muted)}
.источники a{color:var(--muted)}
@media(max-width:560px){
  h2{font-size:19px}
  main{padding:0 12px}
  /* на узком экране подпись и значение не помещаются в строку и разъезжаются —
     ставим их друг под другом осознанно, а не по воле переноса */
  .когда .строка{flex-direction:column;gap:1px;margin-bottom:11px}
  .когда .строка span:first-child{min-width:0;font-size:13px}
  .страна-блок .шапка{padding:14px 16px;gap:11px}
  .страна-блок .флаг{font-size:30px}
  .страна-блок .шапка h3{font-size:17px}
  .страна-блок .тело{padding:16px 16px 18px}
  .кнопка{width:100%;justify-content:center}
}

/* ——— общее для всех страниц праздников ——— */
header .назад{color:#cfe3d7;font-size:13px;text-decoration:none;margin-left:auto;white-space:nowrap}
.хлебные{font-size:13px;color:var(--muted);margin-bottom:14px}
.хлебные a{color:var(--muted)}

/* обложка внутри страницы праздника */
.обложка{border-radius:16px;overflow:hidden;margin:0 0 20px;box-shadow:0 10px 30px rgba(31,77,54,.10)}
.обложка img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.обложка .подпись{background:var(--paper);border:1px solid var(--line);border-top:none;
padding:10px 16px;font-size:13px;color:var(--muted)}

/* фото внутри текста */
figure{margin:22px 0}
figure img{display:block;width:100%;height:auto;border-radius:14px;
box-shadow:0 8px 24px rgba(31,77,54,.09)}
/* вертикальные кадры в тексте не должны занимать целый экран */
figure.полоса img{aspect-ratio:16/9;object-fit:cover;object-position:50% 55%}
figcaption{font-size:13px;color:var(--muted);margin-top:8px;padding:0 2px}

/* панели праздников на общей странице */
.панели{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
gap:18px;margin:22px 0 10px}
.панель{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
box-shadow:0 10px 30px rgba(31,77,54,.07);transition:.2s transform,.2s box-shadow}
.панель:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(31,77,54,.14)}
.панель .фото{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--green-soft)}
.панель .фото img{display:block;width:100%;height:100%;object-fit:cover;transition:.35s transform}
.панель:hover .фото img{transform:scale(1.04)}
.панель .метка{position:absolute;left:12px;top:12px;background:rgba(31,77,54,.88);color:#fff;
font-size:12px;font-weight:700;letter-spacing:.3px;padding:5px 11px;border-radius:999px;
backdrop-filter:blur(2px)}
.панель .метка.скоро{background:rgba(217,138,61,.94)}
.панель .текст{padding:15px 18px 17px;display:flex;flex-direction:column;flex:1}
.панель h3{margin:0 0 5px;font-size:19px;color:var(--green-dark)}
.панель .дата{font-size:13px;color:var(--accent);font-weight:700;margin-bottom:8px}
.панель p{font-size:14.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.панель .читать{margin-top:auto;font-weight:700;font-size:14.5px;color:var(--green)}
.панель:hover .читать{color:var(--green-dark)}

/* панель праздника, которого ещё нет как страницы */
.панель.скоро-будет{opacity:.72;cursor:default;box-shadow:none}
.панель.скоро-будет:hover{transform:none;box-shadow:none}
.панель.скоро-будет .фото{display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,var(--green-soft) 0%,#f4ece0 100%);font-size:44px}

/* список остальных праздников года */
.дальше{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:18px 0}
.дальше ul{margin:8px 0 0 18px}
.дальше li{margin-bottom:5px;font-size:14.5px}
.дальше b{color:var(--green-dark)}

@media(max-width:560px){
  .панель .текст{padding:14px 15px 16px}
  .панель h3{font-size:17.5px}
}

/* ——— годовая линия: как праздник связан с учебным планом ——— */
.год{position:relative;margin:22px 0 8px;padding-left:30px}
.год::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:3px;border-radius:2px;
background:linear-gradient(180deg,var(--accent) 0%,var(--green) 55%,var(--green-dark) 100%)}
.веха{position:relative;margin-bottom:16px}
.веха::before{content:"";position:absolute;left:-26px;top:5px;width:13px;height:13px;
border-radius:50%;background:var(--paper);border:3px solid var(--green)}
.веха.сделано::before{background:var(--green);border-color:var(--green)}
.веха.сейчас::before{background:var(--accent);border-color:var(--accent);
box-shadow:0 0 0 5px rgba(217,138,61,.18)}
.веха .срок{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.2px}
.веха b{display:block;color:var(--green-dark);margin:1px 0 3px}
.веха p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
@media(max-width:560px){.год{padding-left:26px}.год::before{left:7px}.веха::before{left:-24px}}

/* ——— пара «как принято в традиции» / «как у нас» ——— */
.пара{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px;
background:var(--paper)}
.пара > div{padding:12px 15px;font-size:14.5px;line-height:1.5;display:flex;gap:11px;
align-items:flex-start}
.пара .наше{background:var(--accent-soft);border-top:1px solid var(--line)}
.тег{flex-shrink:0;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
padding:3px 9px;border-radius:999px;margin-top:2px;white-space:nowrap}
.пара .канон .тег{background:var(--green-soft);color:var(--green-dark)}
.пара .наше .тег{background:var(--accent);color:#fff}
.пара b{color:var(--green-dark)}
@media(max-width:600px){
  .пара > div{flex-direction:column;gap:7px}
  .тег{align-self:flex-start;margin-top:0}
}
