:root{
  --green:#0b6b45;
  --green-dark:#084f33;
  --green-deep:#06392a;
  --gold:#c9a227;
  --gold-btn:#dcbc4e; /* кнопки: тёмное золото сливалось с фоном и затемнением */
  --gold-light:#e7cd7a;
  --gold-strong:#a8861f; /* золото, читаемое как текст на светлом фоне */
  --red:#c03530;
  --cream:#faf7f0;
  --paper:#ffffff;
  --ink:#1c2b23;
  --muted:#5f6f66;
  --line:#e6e0d2;
  --radius:18px;
  --shadow:0 10px 30px rgba(8,79,51,.10);
  --shadow-sm:0 4px 14px rgba(8,79,51,.08);
  /* Noto covers the Tatar letters (ә җ ң һ …) that Manrope/Prata lack,
     so those glyphs no longer fall back to a mismatched system bold */
  --font:'Manrope','Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Prata','Noto Serif',Georgia,serif;
  --header-h:74px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Страница не ездит вбок. Значок reCAPTCHA стоит `position:fixed` с
   `right:-186px` — так его рисует сам Google, — и в некоторых браузерах этого
   хватает, чтобы внизу появилась горизонтальная полоса прокрутки. `clip`, а не
   `hidden`: `hidden` на корне превращает его в контейнер прокрутки и ломает
   `position:sticky` у шапки. Собственные боковые прокрутки внутри страницы —
   ленты миниатюр, широкие таблицы — это правило не трогает. */
html{overflow-x:clip}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
h1,h2,h3{line-height:1.25}
.container{max-width:1180px;margin:0 auto;padding:0 22px}
.section{padding:72px 0}
.section.alt{background:var(--paper)}
/* offset so sticky header doesn't cover anchored sections */
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold)}
.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,38px);color:var(--green-deep)}
.section-sub{color:var(--muted);max-width:640px;margin-top:10px}
.link-more{font-weight:700;font-size:15px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.link-more::after{content:"→";transition:transform .2s}
.link-more:hover::after{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-family:var(--font);font-weight:700;font-size:15px;cursor:pointer;border:2px solid transparent;transition:.2s;line-height:1.2;white-space:nowrap}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark);color:#fff}
.btn-gold{background:var(--gold-btn);color:var(--green-deep)}
/* Цвет держим и на наведении: у кнопки-ссылки его иначе перебивает глобальное
   `a:hover{color:var(--green-dark)}` — оно весит больше одного класса. */
.btn-gold:hover{background:var(--gold-light);color:var(--green-deep)}
.btn-outline{border-color:var(--green);color:var(--green);background:transparent}
.btn-outline:hover{background:var(--green);color:#fff}
.btn-white{background:#fff;color:var(--green-deep)}
.btn-white:hover{background:var(--gold-light);color:var(--green-deep)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
a.card{color:inherit}
.tag{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}
.tag-green{background:#e3f0e9;color:var(--green)}
.tag-gold{background:#f7eecd;color:#8a6d0b}
.tag-red{background:#f9e3e2;color:var(--red)}

/* map pin: the 📍 emoji renders as a round bead on Windows, so draw the real thing.
   currentColor via mask, so it picks up the colour of the text it sits in. */
.i-pin{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em;background:currentColor;-webkit-mask:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat}

/* ---- media thumbs with photo + gradient fallback ---- */
.thumb{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.thumb .thumb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* dropped from the design; other pages still carry the markup */
.thumb .thumb-icon{display:none}
.thumb .tag{position:absolute;top:12px;left:12px;z-index:3}
.thumb::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,57,42,0) 40%,rgba(6,57,42,.35));pointer-events:none}
.g1{background:linear-gradient(135deg,#0b6b45,#0d8a58)}
.g2{background:linear-gradient(135deg,#845e11,#c9a227)}
.g3{background:linear-gradient(135deg,#8d2723,#c03530)}
.g4{background:linear-gradient(135deg,#0e4f6e,#1a7fa8)}
.g5{background:linear-gradient(135deg,#4c3a78,#7a5fb8)}
.g6{background:linear-gradient(135deg,#06392a,#0b6b45)}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--green-deep);color:#cfe0d6;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:14px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.topbar a{color:#e7cd7a}
.topbar .tb-left span{margin-right:18px;white-space:nowrap}

/* ---------- HEADER ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(250,247,240,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{width:46px;height:46px;flex:none}
.brand-name{font-weight:800;font-size:15.5px;color:var(--green-deep);line-height:1.18;max-width:15ch}
.nav-links{display:flex;gap:2px;list-style:none;align-items:center}
/* Вход в кабинет живёт в списке только на узком экране — см. медиазапрос ниже. */
.nav-links .nav-auth{display:none}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-links>li>button.navtop{display:inline-flex;align-items:center;gap:5px;padding:9px 10px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink);background:none;border:none;cursor:pointer;font-family:var(--font);white-space:nowrap}
.nav-links>li>a:hover,.nav-links>li>button.navtop:hover,.nav-links>li.open>button.navtop{background:#eee8d9;color:var(--green-dark)}
.navtop .caret{font-size:10px;transition:transform .2s;opacity:.7}
.nav-links>li.open .navtop .caret{transform:rotate(180deg)}
/* dropdown */
.dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:none;z-index:70}
/* invisible bridge over the 6px gap + the header padding: without it the
   pointer leaves the <li> on the way down and the menu closes */
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-links>li.open>.dropdown{display:block;animation:dropIn .2s ease}
@media(hover:hover){.nav-links>li:hover>.dropdown{display:block;animation:dropIn .2s ease}}
/* Animate transform only — never opacity — so a frozen/disabled animation
   (backgrounded tab, reduced-motion) can never leave the menu invisible. */
@keyframes dropIn{from{transform:translateY(8px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.nav-links>li.open>.dropdown,.nav-links>li:hover>.dropdown{animation:none}}
.dropdown a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink)}
.dropdown a:hover{background:#eee8d9;color:var(--green-dark)}
.dropdown a .di{width:26px;text-align:center;font-size:16px;flex:none}
.dropdown a small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.nav-cta{display:flex;gap:8px;align-items:center}
.btn-sm{padding:9px 16px;font-size:14px}
.burger{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--green-deep)}

/* language switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;font-family:var(--font);font-weight:700;font-size:13.5px;color:var(--green-deep)}
.lang-btn:hover{border-color:var(--green)}
.lang-btn .caret{font-size:9px;opacity:.7}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:170px;display:none;z-index:80}
.lang.open .lang-menu{display:block;animation:dropIn .2s ease}
@media(prefers-reduced-motion:reduce){.lang.open .lang-menu{animation:none}}
.lang-menu button{display:flex;width:100%;align-items:center;gap:10px;background:none;border:none;padding:9px 12px;border-radius:9px;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink);text-align:left}
.lang-menu button:hover{background:#eee8d9}
.lang-menu button.active{background:#e3f0e9;color:var(--green)}
.lang-menu button .flag{font-size:16px}
/* flags with a flag-xx class are drawn in CSS/SVG, not emoji, so they look the same on every OS */
.flag[class*="flag-"]{display:inline-block;width:21px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none;vertical-align:middle;font-size:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.flag-az{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23ef3340'/><rect width='30' height='6.67' fill='%2300b5e2'/><rect y='13.33' width='30' height='6.67' fill='%23509e2f'/><circle cx='13.4' cy='10' r='3.4' fill='%23fff'/><circle cx='15' cy='10' r='3.4' fill='%23ef3340'/><g fill='%23fff'><rect x='16.6' y='8.1' width='3.8' height='3.8'/><rect x='16.6' y='8.1' width='3.8' height='3.8' transform='rotate(45 18.5 10)'/></g></svg>")}
.flag-tt{background-image:linear-gradient(to bottom,#2fa84f 0 45%,#fff 45% 55%,#da2f27 55% 100%)}
.flag-ru{background-image:linear-gradient(to bottom,#fff 0 33.34%,#0039a6 33.34% 66.67%,#d52b1e 66.67% 100%)}
.flag-en{background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><rect width='60' height='30' fill='%23012169'/><path d='M0 0 60 30M60 0 0 30' stroke='%23fff' stroke-width='6'/><path d='M0 0 60 30M60 0 0 30' stroke='%23c8102e' stroke-width='3'/><path d='M30 0V30M0 15H60' stroke='%23fff' stroke-width='10'/><path d='M30 0V30M0 15H60' stroke='%23c8102e' stroke-width='6'/></svg>")}

@media(max-width:1200px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;padding:12px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);gap:2px;max-height:80vh;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links>li>a,.nav-links>li>button.navtop{width:100%;justify-content:space-between}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;padding:2px 2px 8px 20px;min-width:auto;display:none}
  .nav-links>li.open .dropdown{display:block}
  @media(hover:hover){.nav-links>li:hover .dropdown{opacity:1}}
  .burger{display:block}
  /* Любую кнопку из полосы, а не только `.btn-outline`: стоило поменять её
     вид, как правило переставало совпадать и кнопка возвращалась на узкий
     экран — там она уже есть внутри меню. */
  .nav-cta .btn{display:none}
  /* Кабинет показывается только здесь: в широкой полосе он уже есть кнопкой
     справа. Отделён чертой и стоит по центру — это не раздел сайта, а вход к
     себе. */
  .nav-links .nav-auth{
    display:block;border-top:1px solid var(--line,#e6e0d2);
    margin-top:8px;padding-top:12px;text-align:center
  }
  /* Именно кнопка, а не строка списка: правила `.nav-links>li>a` снимают с
     неё фон, рамку и скругление — они весят больше одного класса `.btn`, —
     поэтому вид задаётся здесь заново. */
  .nav-links .nav-auth>a{
    display:inline-flex;width:auto;justify-content:center;
    padding:11px 22px;border-radius:999px;
    background:var(--green);color:#fff;font-weight:700;font-size:15px
  }
  .nav-links .nav-auth>a:hover{background:var(--green-dark);color:#fff}
}
@media(max-width:560px){
  .lang-btn .lang-label{display:none}
  .nav-cta .btn-gold{padding:9px 12px}
}

/* ---------- HERO SLIDER ---------- */
.hero{position:relative;color:#fff;overflow:hidden}
/* All slides share one grid cell, so the tallest one fixes the hero height
   and switching slides never makes the block jump. */
.slides{display:grid;min-height:560px}
.slide{grid-area:1/1;position:relative;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .8s ease}
.slide.active{opacity:1;visibility:visible;z-index:1}
.slide-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Ролик в шапке лежит на месте снимка и поверх него: снимок виден, пока видео
   грузится, и остаётся один там, где ролик не запускается — на телефоне, при
   экономии трафика, при просьбе не двигать картинки. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slide-tint{position:absolute;inset:0;z-index:1}
.slide .container{position:relative;z-index:2;padding-top:88px;padding-bottom:110px}
.slide-tag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:6px 16px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;margin-bottom:22px;backdrop-filter:blur(3px)}
.slide h1,.slide .h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,54px);max-width:760px;margin-bottom:18px;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.slide p{max-width:600px;font-size:17px;opacity:.95;margin-bottom:30px;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.slide .btn+.btn{margin-left:10px}
/* on phones the slide reads better as a centred column */
@media(max-width:700px){
  .slide .container{text-align:center;padding-bottom:96px}
  .slide h1,.slide .h1,.slide p{margin-left:auto;margin-right:auto}
  .slide .btn{margin:6px 4px 0}
  .slide .btn+.btn{margin-left:4px}
}
.hero-nav{position:absolute;bottom:34px;left:0;right:0;z-index:5}
.hero-nav .container{display:flex;align-items:center;justify-content:center}
.dots{display:flex;gap:9px}
.dot{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:.3s;padding:0}
.dot.active{background:var(--gold-light);width:52px}

/* ---------- EVENT CTA STRIP ---------- */
.next-event{background:var(--green-deep);color:#fff;position:relative;overflow:hidden}
.next-event::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 50%,rgba(201,162,39,.25),transparent)}
.next-event .container{position:relative;display:flex;align-items:center;gap:34px;padding-top:34px;padding-bottom:34px;flex-wrap:wrap}
/* same "ticket stub" as the date plates in the poster cards */
.ne-date{background:var(--gold-btn);color:var(--green-deep);border-radius:16px;padding:14px 22px;text-align:center;flex:none}
.ne-date b{display:block;font-family:var(--serif);font-size:34px;line-height:1}
.ne-date span{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.ne-info{flex:1;min-width:260px}
.ne-info h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:6px}
.ne-info p{opacity:.85;font-size:14.5px}
.countdown{display:flex;gap:12px;flex:none}
.cd-cell{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;min-width:66px;padding:10px 8px;text-align:center}
.cd-cell b{display:block;font-size:24px;color:var(--gold-light)}
.cd-cell span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
/* stacked on phones: centre the whole strip so nothing sits half-left */
@media(max-width:700px){
  .next-event .container{gap:20px;text-align:center}
  .ne-date,.next-event .btn{margin-left:auto;margin-right:auto}
  .countdown{width:100%;justify-content:center}
  .cd-cell{flex:1;max-width:96px}
}

/* ---------- GRIDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:960px){.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:18px;margin:10px 0 8px}
.card-body p{color:var(--muted);font-size:14.5px}
.meta{display:flex;gap:14px;color:var(--muted);font-size:13px;margin-top:14px;flex-wrap:wrap}
/* Date/time kicker above a card title (news cards). Its own class — not
   .meta — so the .news-card .meta{margin-top:auto} bottom rule can't push
   it down. */
.card-body .card-date{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:0 0 6px}
.card-body .card-date span{display:inline-flex;align-items:center;gap:5px}
.card-body .card-date+h3{margin-top:0}
.meta span{display:inline-flex;align-items:center;gap:5px}
.card-link{margin-top:auto;padding-top:14px;font-weight:700;font-size:14px;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.card:hover .card-link{color:var(--green-dark)}
.card-link::after{content:"→";transition:transform .2s}
.card:hover .card-link::after{transform:translateX(4px)}

/* ---------- WORLD NEWS ---------- */
.world-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:820px){.world-list{grid-template-columns:1fr}}
.world-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);color:inherit;align-items:center}
.world-item:hover h3{color:var(--green)}
.world-thumb{width:82px;height:66px;border-radius:12px;flex:none;position:relative;overflow:hidden;background:linear-gradient(135deg,#0b6b45,#0d8a58)}
.world-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world-thumb .wf{position:absolute;bottom:4px;right:4px;font-size:16px;background:rgba(255,255,255,.9);border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.world-item h3{font-size:16px;margin-bottom:4px;transition:color .2s}
.world-item h3 a{color:var(--ink)}
.world-item h3 a:hover{color:var(--green)}
.world-item .src{font-size:12.5px;color:var(--muted)}

/* ---------- SCROLL TO TOP ---------- */
/* bottom is clear of the reCAPTCHA v3 badge (fixed bottom-right, ~70px tall)
   so the two don't overlap on pages that carry a form. */
.scrolltop{position:fixed;right:22px;bottom:96px;width:50px;height:50px;border-radius:50%;background:var(--green);color:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:0 8px 24px rgba(8,79,51,.35);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .25s,transform .25s,background .2s;z-index:90}
.scrolltop.show{opacity:1;visibility:visible;transform:none}
.scrolltop:hover{background:var(--gold-btn);color:var(--green-deep)}
@media(max-width:560px){.scrolltop{right:16px;bottom:100px;width:46px;height:46px}}

/* ---------- AUTH (register / login) ---------- */
.auth-section{min-height:calc(100vh - 82px);display:flex;align-items:center;justify-content:center;padding:50px 22px;background:var(--cream)}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);width:100%;max-width:470px;padding:40px}
.auth-card h1{font-family:var(--serif);font-weight:400;font-size:28px;color:var(--green-deep);margin-bottom:6px}
.auth-card .auth-sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.social-btns{display:flex;flex-direction:column;gap:10px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:11px;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer;font-family:var(--font);font-size:15px;color:var(--ink);transition:.2s;text-decoration:none}
.social-btn:hover{background:var(--cream);border-color:#d9d2c0}
.social-btn .ic{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:800;font-size:13px;color:#fff}
.social-btn .ic svg{width:18px;height:18px;display:block}
.ic-google{background:#fff;border:1px solid var(--line)}
.ic-fb{background:#1877f2}
.ic-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:22px 0;font-size:13px;font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-alt{text-align:center;font-size:14px;color:var(--muted);margin-top:20px}
.checkbox-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.4}
.checkbox-row input{width:auto;margin-top:3px}

/* ---------- QUIZZES PAGE ---------- */
.lb-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.lb-head{background:var(--green-deep);color:#fff;padding:20px 24px;display:flex;align-items:center;gap:12px}
.lb-head h3{font-family:var(--serif);font-weight:400;font-size:20px}
.leaderboard{width:100%;border-collapse:collapse}
.leaderboard th,.leaderboard td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line)}
.leaderboard th{font-size:11.5px;text-transform:uppercase;color:var(--muted);letter-spacing:.06em;font-weight:800}
.leaderboard tbody tr:hover{background:var(--cream)}
.leaderboard td.num{text-align:right;font-weight:800;color:var(--green)}
.lb-rank{width:40px;font-weight:800;font-size:16px;color:var(--muted)}
.lb-rank.r1{color:#c9a227}.lb-rank.r2{color:#8a9199}.lb-rank.r3{color:#b06a2c}
.lb-player{display:flex;align-items:center;gap:12px}
.lb-player .avatar{width:40px;height:40px;font-size:15px;border-width:2px;margin:0}
.lb-player b{font-size:14.5px}
@media(max-width:600px){.leaderboard .hide-sm{display:none}.leaderboard th,.leaderboard td{padding:11px 12px}}

/* ---------- EVENTS: FEATURED + SIDE ---------- */
.events-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
/* Когда впереди всего одно событие, второй колонке нечем заполниться, и рядом
   с афишей оставалась пустая половина. */
.events-layout--solo{grid-template-columns:1fr}
@media(max-width:820px){.events-layout{grid-template-columns:1fr}}
/* Poster look: photo as the background of the whole card, text over a scrim —
   same magazine language as the community tiles, unlike the plain news rows. */
.ev-card{position:relative;display:flex;align-items:flex-end;border-radius:var(--radius);overflow:hidden;color:#fff;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.ev-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);color:#fff}
.ev-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Затемнение только под текстом. Раньше карточка гасла с самого верха (.25 →
   .55 к середине), и афиша фестиваля — та, что нарисована с расчётом на
   яркость, — читалась как выцветшая. Теперь верхняя половина чистая, тень
   набирается там, где начинается заголовок, и уходит в почти сплошной цвет
   у нижнего края, чтобы подпись оставалась читаемой. */
.ev-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(6,57,42,0) 0%,
    rgba(6,57,42,0) 42%,
    rgba(6,57,42,.55) 68%,
    rgba(6,57,42,.94) 100%)
}
.ev-card>.tag{position:absolute;top:16px;left:16px;z-index:3}
.ev-overlay{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:26px}

/* Мелкие карточки: в покое видна верхняя половина текстового блока —
   заголовок с датой, — остальное уведено под нижний край и выезжает при
   наведении. Заодно у блока своя подложка: общая тень карточки набирается
   только к самому низу, и на светлом снимке белый заголовок сливался с фоном.
   Крупной карточки это не касается — там текста больше и он не прячется. */
.ev-mini .ev-overlay,
.grid-3 .ev-card .ev-overlay{
  background:linear-gradient(180deg,rgba(6,57,42,0) 0%,rgba(6,57,42,.82) 26%,rgba(6,57,42,.96) 100%);
  transform:translateY(42%);
  transition:transform .35s ease
}
.ev-mini:hover .ev-overlay,
.ev-mini:focus-visible .ev-overlay,
.grid-3 .ev-card:hover .ev-overlay,
.grid-3 .ev-card:focus-visible .ev-overlay{transform:translateY(0)}
/* На тач-экранах наведения нет, и половина текста осталась бы недостижимой. */
@media (hover:none){
  .ev-mini .ev-overlay,
  .grid-3 .ev-card .ev-overlay{transform:none}
}
.ev-date{position:absolute;top:16px;right:16px;z-index:3;display:flex;flex-direction:column;align-items:center;min-width:56px;padding:7px 10px 8px;border-radius:14px;background:var(--gold-btn);color:var(--green-deep);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.ev-date b{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.05}
.ev-date span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.ev-overlay h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:12px 0 8px}
.ev-foot{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.28);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;width:100%}
.ev-foot .meta{margin-top:0;color:rgba(255,255,255,.88)}
.ev-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--gold-light);white-space:nowrap}
.ev-link::after{content:"→";transition:transform .2s}
.ev-card:hover .ev-link{color:#fff}
.ev-card:hover .ev-link::after{transform:translateX(4px)}
.ev-featured{min-height:600px}
.ev-featured .ev-overlay{padding:32px}
.ev-featured h3{font-size:28px;margin:12px 0 10px;max-width:560px}
.ev-featured p{font-size:15px;opacity:.92;max-width:560px}
.ev-featured .ev-date{min-width:72px;padding:10px 12px 11px}
.ev-featured .ev-date b{font-size:32px}
.ev-badge{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 12px;border-radius:999px;align-self:flex-start;text-transform:uppercase}
.ev-side{display:flex;flex-direction:column;gap:24px}
/* Мини-карточки подогнаны под большую: две по 288 плюс зазор 24 дают ровно её
   600, и правая колонка кончается там же, где левая. Меняете одну высоту —
   пересчитайте вторую. Прежние 246+246+24=516 оставляли снимку полоску: текст
   занимал почти всю карточку. */
.ev-mini{min-height:288px}
.grid-3 .ev-card{min-height:320px}
/* archive events: greyscale + warm sepia over a neutral (non-green) scrim reads
   clearly as past/old content; full colour returns on hover */
.ev-past .ev-bg{filter:grayscale(1) sepia(.35) contrast(.92) brightness(.9);transition:filter .3s}
.ev-past::after{background:linear-gradient(180deg,rgba(28,24,18,.2) 0%,rgba(28,24,18,.5) 45%,rgba(20,17,12,.95) 100%)}
.ev-past:hover .ev-bg{filter:none}
@media(max-width:700px){
  .ev-foot{flex-direction:column;align-items:center;gap:12px}
  .ev-foot .meta{justify-content:center}
  .ev-foot .btn{width:100%;max-width:320px}

  /* На телефоне карточка во всю ширину, и текстовый блок — он тут показан
     целиком, наведения на тач-экране нет — съедал почти всю её высоту:
     от снимка оставалась полоска под датой. Карточки выше, и снимку есть
     где показаться. */
  .ev-mini,
  .grid-3 .ev-card{min-height:380px}
  .ev-featured{min-height:440px}
}

/* ---------- NEWS: HORIZONTAL FEED ---------- */
.news-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1000px){.news-feed{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.news-feed{grid-template-columns:1fr}}
.news-card .thumb{aspect-ratio:16/9}
.news-card .card-body{padding:20px 22px}
.news-card h3{font-size:18px;margin:0 0 8px}
.news-card .meta{margin-top:auto;padding-top:14px;align-items:center}
.news-card .card-link{margin:0 0 0 auto;padding:0}

/* ---------- COMMUNITIES: PHOTO OVERLAY TILES ---------- */
.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.comm-grid{grid-template-columns:1fr}}
.comm-tile{position:relative;border-radius:var(--radius);overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
/* the tile is an <a>, so the global a:hover colour would repaint all the
   inherited text dark green on the dark green scrim — keep it white */
.comm-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow);color:#fff}
.comm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.comm-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,57,42,.25) 0%,rgba(6,57,42,.55) 45%,rgba(6,57,42,.96) 100%);z-index:1}
.comm-overlay{position:relative;z-index:2;padding:26px}
/* badge sits in the tile's top corner, like the tags on the poster cards */
.comm-badge2{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:var(--gold-btn);color:var(--green-deep);font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px}
.comm-overlay h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 8px}
.comm-overlay p{font-size:14px;opacity:.92;margin-bottom:12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.comm-stats{display:flex;gap:16px;font-size:13px;font-weight:600;opacity:.95}
.comm-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;font-size:14px;color:var(--gold-light)}
.comm-tile:hover .comm-more{color:#fff}
.comm-more::after{content:"→";transition:transform .2s}
.comm-tile:hover .comm-more::after{transform:translateX(4px)}

/* ---------- QUIZ ---------- */
.quiz-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:stretch}
@media(max-width:900px){.quiz-wrap{grid-template-columns:1fr}}
.quiz-box{background:var(--green-deep);color:#fff;border-radius:var(--radius);padding:34px;position:relative;overflow:hidden}
.quiz-box::after{content:"✿";position:absolute;font-size:200px;right:-40px;bottom:-70px;opacity:.08;pointer-events:none;z-index:0}
.quiz-box>*{position:relative;z-index:1}
.quiz-q{font-family:var(--serif);font-size:21px;margin:14px 0 22px;font-weight:400}
.quiz-opt{display:block;width:100%;text-align:left;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:#fff;padding:13px 18px;border-radius:12px;margin-bottom:10px;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:600;transition:.2s}
/* Цвет повторяется намеренно. Варианты на главной — это ссылки (<a>), а
   глобальное `a:hover{color:var(--green-dark)}` весит 0,1,1 против 0,1,0 у
   `.quiz-opt` и на наведении перекрашивало текст в тёмно-зелёный — поверх
   тёмно-зелёной коробки. Прочитать ответ было нельзя ровно до тех пор, пока
   курсор не уйдёт. Здесь селектор весит 0,2,0 и забирает цвет обратно. */
.quiz-opt:hover{background:rgba(255,255,255,.16);color:#fff}
.quiz-opt.correct{background:var(--gold-btn);border-color:var(--gold-btn);color:var(--green-deep)}
.quiz-opt.wrong{background:var(--red);border-color:var(--red)}
.quiz-feedback{min-height:26px;font-size:14px;color:var(--gold-light);font-weight:700}
/* Nickname field on the intro step: the box is dark green and the input
   isn't inside a <form>, so it misses the global form styling. Match the
   quiz-opt look — translucent white on green. */
.quiz-box .field{margin:2px 0 18px}
.quiz-box .field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:#fff}
.quiz-box .field input{width:100%;padding:12px 15px;border:1.5px solid rgba(255,255,255,.22);border-radius:12px;font-family:var(--font);font-size:14.5px;background:rgba(255,255,255,.08);color:#fff;transition:.2s}
.quiz-box .field input::placeholder{color:rgba(255,255,255,.55)}
.quiz-box .field input:focus{outline:none;border-color:var(--gold-btn);background:rgba(255,255,255,.14)}
.quiz-progress{font-size:13px;opacity:.75}
.quiz-cards{display:flex;flex-direction:column;gap:16px}
/* cards grow to fill the column so it matches the taller quiz box beside it */
.quiz-cards .quiz-card{flex:1}
.quiz-card{display:flex;align-items:center;gap:16px;padding:18px 20px;flex-direction:row}
/* plain glyphs — the gradient tiles they used to sit on read as dated */
/* The card and the teaser options are links into the quiz now, so they must
   not inherit the global link green over their own text. */
a.quiz-card{color:var(--ink)}
.quiz-card .qc-ico{width:34px;height:34px;background:none;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;flex:none}
.quiz-card h3{font-size:16px}
.quiz-card p{font-size:13.5px;color:var(--muted)}
.quiz-card .tag{margin-left:auto;flex:none}
/* quiz tiles: pin meta + button to the bottom so short and long descriptions
   line up across the row */
.qz-card .card-body .meta{margin-top:auto}
.qz-card .card-body .btn{margin-top:16px;align-self:flex-start}

/* ---------- DONATE ---------- */
.donate{background:linear-gradient(120deg,var(--green-dark),var(--green));color:#fff;position:relative;overflow:hidden}
.donate::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M60 12c8 16 16 22 32 26-16 4-24 10-32 26-8-16-16-22-32-26 16-4 24-10 32-26z" fill="none" stroke="white" stroke-opacity=".08" stroke-width="2"/></svg>')}
.donate .container{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
@media(max-width:880px){.donate .container{grid-template-columns:1fr}}
.donate h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
.donate p{opacity:.9;max-width:520px}
.donate-panel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:28px;backdrop-filter:blur(4px)}
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.amount{padding:12px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-weight:800;font-size:16px;cursor:pointer;transition:.2s;font-family:var(--font)}
.amount:hover,.amount.sel{background:var(--gold-btn);border-color:var(--gold-btn);color:var(--green-deep)}
.donate-panel .btn{width:100%}
.donate-note{font-size:12.5px;opacity:.75;margin-top:12px;text-align:center}

/* ---------- GREETINGS ---------- */
.greet-card{padding:24px;text-align:center;position:relative}
.greet-card::before{content:"❦";position:absolute;top:14px;right:18px;color:var(--gold);opacity:.5;font-size:18px}
.avatar{width:86px;height:86px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;border:3px solid var(--gold-light);overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Mourning ribbon — the customary black band across the top-left corner of a
   portrait, marking a member who has passed away. The avatar already clips
   its overflow, so the rotated bar follows the circle instead of sticking
   out; it sits above the photo but takes no clicks. */
.avatar.mourning{border-color:#2f2f2f;position:relative}
.avatar.mourning::after{content:"";position:absolute;left:-26%;top:18%;width:100%;height:13%;background:#141414;transform:rotate(-45deg);pointer-events:none;z-index:2}
.tag-mourning{background:#2f2f2f;color:#fff}

/* Profile hero. The avatar's own `margin:0 auto` centres it inside cards, but
   in this flex row the auto margins pushed it — and the name after it — far to
   the right, so they are reset here. */
.profile-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.profile-head .avatar{margin:0;flex:none}
.profile-head-text{min-width:0;flex:1 1 260px}
.profile-head-text h1{margin:6px 0 0}
.profile-head-role{margin-top:6px;font-size:16px;opacity:.92}
.profile-head-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:640px){
  .profile-head{gap:16px}
  .profile-head-actions{margin-left:0;width:100%}
}
.greet-card h3{font-size:17px}
.greet-card .gc-occasion{font-size:13px;color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin:6px 0}
.greet-card p{font-size:13.5px;color:var(--muted)}

/* ---------- CALENDAR ---------- */
.cal-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
@media(max-width:880px){.cal-wrap{grid-template-columns:1fr}}
.calendar{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.cal-head h3{font-size:18px;text-transform:capitalize}
.cal-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--cream);cursor:pointer;font-size:15px;color:var(--green-deep)}
.cal-btn:hover{background:var(--gold-light)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal-grid .dow{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;padding:6px 0}
/* 5/4, а не квадрат: при квадратных ячейках месяц о шести неделях вытягивал
   календарь до 602px против 524px у пяти карточек праздников справа, и колонки
   расходились на добрую карточку. Пропорция, а не фиксированная высота, —
   чтобы ячейка так же считалась от ширины колонки на любом экране. */
.cal-day{aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:14px;position:relative;cursor:default}
.cal-day.other{color:#c9c4b6}
.cal-day.today{background:var(--green);color:#fff;font-weight:800}
.cal-day.holiday{background:#f7eecd;color:#8a6d0b;font-weight:800}
.cal-day.holiday::after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hol-list{display:flex;flex-direction:column;gap:14px}
/* position:relative so the watermark can sit against the right edge; overflow
   hidden so a mark that runs past the rounded corner is clipped by it. */
.hol-item{position:relative;overflow:hidden;display:flex;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
/* Behind the text, faint, and never in the way of a click. The flags carry
   their own colours; the line-art marks inherit the section's green.

   Метка тянется во всю высоту записи (top/bottom:0), а не висит картинкой
   62px по центру: правый край карточки закрыт графикой целиком, и ряд читается
   как «запись с полем», а не «запись со значком». Вылет за скругление режет
   overflow:hidden на .hol-item. */
.hol-mark{position:absolute;top:0;right:0;bottom:0;opacity:.18;color:var(--green);pointer-events:none;z-index:0}
/* Высота ведёт, ширина считается от неё: рисунок не искажается, а карточка
   в две строки просто получает метку крупнее. */
.hol-mark svg{height:100%;width:auto;display:block}
/* Флаги — сплошные полосы, их не жалко подрезать: `slice` (в разметке) тянет
   их на всю площадь поля, чтобы правая часть была закрыта цветом без полей. */
.hol-mark--fill{width:120px}
.hol-mark--fill svg{width:100%;height:100%}
.hol-item > *:not(.hol-mark){position:relative;z-index:1}
/* Room for the mark so a long name does not run under it. */
.hol-item h4{padding-right:96px}
/* На узком экране метка остаётся во всю высоту — ради этого всё и затевалось,
   — поэтому ужимается не она, а резерв под заголовок: иначе он переносится,
   карточка растёт, а вместе с высотой растёт и ширина метки. Заголовок лежит
   поверх (z-index) на непрозрачных 18% — ровно так задуман водяной знак. */
@media(max-width:520px){
  .hol-item h4{padding-right:72px}
}
.hol-date{flex:none;width:64px;text-align:center;background:#e3f0e9;border-radius:10px;padding:8px 4px;color:var(--green)}
.hol-date b{display:block;font-size:20px;line-height:1.1}
.hol-date span{font-size:11px;font-weight:700;text-transform:uppercase}
.hol-item h4{font-size:15.5px}
.hol-item p{font-size:13px;color:var(--muted)}

/* ---------- MEMBERS ---------- */
.member-card{text-align:center;padding:26px 18px}
.member-card .avatar{width:104px;height:104px;font-size:34px}
.member-card h3{font-size:16.5px;margin-top:4px}
.member-card p{font-size:13px;color:var(--muted)}
/* Годы жизни идут перед должностью и набраны мельче: это подпись к имени,
   а не ещё одна строка описания. */
.member-card .member-years{font-size:12.5px;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.member-card a.profile{font-size:13.5px;font-weight:700;display:inline-block;margin-top:10px}

/* ---------- JOIN ---------- */
.join{background:var(--paper)}
.join-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:880px){.join-wrap{grid-template-columns:1fr}}
/* Home CTA — the form moved to /about, so here it's a single centred column
   inviting people over. */
.join-cta-inner{max-width:640px;margin:0 auto;text-align:center}
/* inline-flex, а не inline-block: список должен ужиматься по содержимому и
   центрироваться (за это отвечает text-align:center у .join-cta-inner), но
   inline-block отменял `display:flex` ниже — вместе с ним пропадал и `gap`,
   и все четыре пункта слипались вплотную, стык в стык по 34px иконки. */
.join-cta .join-benefits{display:inline-flex;flex-direction:column;text-align:left;margin:18px auto 26px}
.btn-lg{padding:15px 34px;font-size:16px}
.about-members-link{margin-top:28px}
/* 20px, not 14: the icons are 34px filled squares, so at 14 they read as one
   stacked column rather than four separate points. The gap between rows also
   has to clear a wrapped second line, which is why it looked uneven. */
.join-benefits{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:20px}
.join-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.join-benefits .b-ico{width:34px;height:34px;border-radius:10px;background:#e3f0e9;color:var(--green);display:flex;align-items:center;justify-content:center;flex:none;font-size:16px}
.join-benefits .b-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
form .field{margin-bottom:14px}
form label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--green-deep)}
form input,form select,form textarea{width:100%;padding:12px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--font);font-size:14.5px;background:var(--cream);color:var(--ink);transition:.2s}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--green);background:#fff}
.form-panel{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-ok{display:none;background:#e3f0e9;color:var(--green-dark);border-radius:12px;padding:14px 18px;font-weight:700;font-size:14.5px;margin-top:14px}

/* ---------- SUBSCRIBE ---------- */
/* dark green on mustard was muddy — light gold band, ink text */
.subscribe{background:var(--gold-btn);color:var(--green-deep)}
.subscribe .container{display:flex;align-items:center;gap:30px;padding-top:30px;padding-bottom:30px;flex-wrap:wrap}
.subscribe .sub-copy{flex:1;min-width:260px}
.subscribe h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.6vw,27px);line-height:1.3}
.subscribe .sub-copy p{font-size:14px;opacity:1;color:#4a3c10;margin-top:4px}
.sub-form{display:flex;gap:10px;flex:1;min-width:300px}
.sub-form input{flex:1;padding:13px 18px;border-radius:999px;border:2px solid var(--green-deep);font-family:var(--font);font-size:15px;background:#fff}
.sub-form input:focus{outline:none}
.sub-form .btn{flex:none;background:var(--green-deep);color:#fff}
.sub-form .btn:hover{background:var(--green-dark)}
@media(max-width:560px){.sub-form{flex-direction:column}.sub-form .btn{width:100%}}

/* ---------- FEATURE CARDS ---------- */
.feature-card{position:relative;overflow:hidden;padding:30px 26px 26px;text-align:left;display:flex;flex-direction:column;background:var(--paper)}
/* accent rail that fills in on hover */
.feature-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--green),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.feature-card:hover::before{transform:scaleX(1)}
/* the glyph becomes a watermark instead of a coloured tile */
.feature-card .f-ico{position:absolute;top:6px;right:14px;width:auto;height:auto;background:none;font-size:74px;line-height:1;opacity:.14;transition:transform .35s ease,opacity .35s ease;pointer-events:none}
.feature-card:hover .f-ico{transform:translateY(-4px) rotate(-6deg);opacity:.2}
.feature-card h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0;padding-right:56px}
.feature-card h3::after{content:"";display:block;width:26px;height:2px;background:var(--gold);margin:12px 0 14px;transition:width .35s ease}
.feature-card:hover h3::after{width:54px}
.feature-card p{font-size:14px;color:var(--muted);margin-bottom:18px}
.feature-card a{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:14px;font-weight:700;align-self:flex-start}

/* ---------- CONTACTS ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:18px}
.ci-item{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.ci-item .ci-ico{width:44px;height:44px;border-radius:12px;background:#e3f0e9;color:var(--green);display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.ci-item h4{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px}
.ci-item p,.ci-item a{font-size:15.5px;font-weight:600;color:var(--ink)}
.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);height:280px}
.map-frame iframe{width:100%;height:100%;border:0}
/* /contacts: cards pair up across the top, then map and form sit side by side
   and stretch to the same height — the map has no natural height to match. */
.contact-info-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
.contact-wrap-map{align-items:stretch}
.map-frame-tall{height:auto;min-height:440px}
@media(max-width:900px){.map-frame-tall{min-height:320px}}
@media(max-width:760px){.contact-info-row{grid-template-columns:1fr}}
.captcha-row{display:flex;align-items:center;gap:12px}
.captcha-row .cap-q{background:var(--green-deep);color:var(--gold-light);border-radius:12px;padding:12px 18px;font-weight:800;font-size:15px;flex:none;letter-spacing:.05em}
.captcha-row input{max-width:110px}
.form-err{display:none;color:var(--red);font-size:13.5px;font-weight:700;margin-top:10px}

/* ---------- FOOTER ---------- */
footer{background:var(--green-deep);color:#b9cec3;font-size:14px}
/* Track list comes from the footer partial: it counts the columns that
   actually rendered, so a column dropped for having no usable links no longer
   leaves an empty track sitting on the right. The fallback matches the old
   fixed four. */
.footer-grid{display:grid;grid-template-columns:var(--footer-tracks,repeat(4,1fr));gap:36px;padding:60px 0 40px}
/* Дорожки равные. Раньше бренд брал 1.4fr, а колонка на шесть ссылок — 2fr
   «под два столбца»: столбцы не получались (`columns` не действует на
   flex-контейнер, каким объявлен footer ul ниже), и двойная дорожка просто
   растягивала «Разделы», оставляя дыру перед «Участием». Правило .two-col
   удалено вместе с ней — оно ничего не делало. */
@media(max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:15px;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a{color:#b9cec3}
footer a:hover{color:var(--gold-light)}
/* Footer intro comes from the footer-intro block, so it arrives as <p> tags
   from the editor rather than one hardcoded paragraph. */
.footer-intro{margin-top:14px;max-width:300px}
.footer-intro p{font-size:13.5px}
.footer-intro p + p{margin-top:8px}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:17px;transition:.2s}
.soc a svg{width:18px;height:18px;display:block}
.soc a:hover{background:var(--gold-btn);border-color:var(--gold-btn);color:var(--green-deep)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;opacity:.8}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(6,57,42,.55);backdrop-filter:blur(4px);padding:20px}
.modal.open{display:flex}
.modal-box{background:var(--paper);border-radius:20px;padding:36px;max-width:420px;width:100%;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal-box h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--green-deep);margin-bottom:6px}
.modal-box>p{color:var(--muted);font-size:14px;margin-bottom:20px}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted)}
.modal-alt{text-align:center;font-size:13.5px;margin-top:16px;color:var(--muted)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.vis{opacity:1;transform:none}

/* ---------- LANG TOAST ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--green-deep);color:#fff;padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.3s;z-index:120}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---------- INNER PAGE (article / community) ---------- */
.page-hero{position:relative;color:#fff;min-height:520px;display:flex;align-items:flex-end;overflow:hidden}
/* Кадр по горизонтали — серединой, по вертикали — от верха. Слева он стоял
   потому, что параллакс уводит его вниз при прокрутке и начинать надо
   сверху; но горизонталь к этому отношения не имеет, а человек, снятый в
   левой части кадра, оказывался прижат к самому краю шапки. */
.page-hero .slide-photo{z-index:0;object-position:50% 0}
/* На 404 фоном стоит рисунок, а не снимок: у него важен и низ — ряд тюльпанов
   с тем, что ушёл в сторону, — поэтому кадр берётся серединой, а не от верха. */
body[data-page="error-404"] .page-hero .slide-photo{object-position:50% 50%}
/* Тень идёт от самого верха и набирается к тексту. Наверху она едва
   заметна — снимок, ради которого шапку и ставят, виден, — но белые хлебные
   крошки и логотип поверх светлого неба перестают теряться. Основная сила
   по-прежнему внизу, где лежат заголовок и подпись. */
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(6,57,42,.14) 0%,
    rgba(6,57,42,.10) 30%,
    rgba(6,57,42,.30) 62%,
    rgba(6,57,42,.58) 84%,
    rgba(6,57,42,.78) 100%)
}
/* Читаемость белого текста держится тенью, а не заливкой поверх снимка: тень
   работает ровно там, где буквы, и не трогает остальной кадр. Раньше её роль
   исполняло затемнение всей шапки — фотография под ним выцветала целиком.
   Заголовку тень назначена ниже, там же, где его размер: правило h1 идёт
   позже и перебило бы её здесь. */
.page-hero .crumbs,
.page-hero .ph-meta{text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.45)}
/* width:100% — parent is flex, otherwise the container shrinks to its text
   and its margin:0 auto centres it */
.page-hero .container{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:44px}
.page-hero .crumbs{font-size:13.5px;margin-bottom:14px;opacity:.9}
.page-hero .tag{margin-bottom:16px}
.page-hero .crumbs a{color:var(--gold-light)}
/* max-width tracks the .container (1180px) so long titles use the hero
   width instead of wrapping early at ~840px with empty space beside them */
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,44px);max-width:1100px;text-shadow:0 1px 4px rgba(0,0,0,.6),0 2px 24px rgba(0,0,0,.45)}
.page-hero .ph-meta{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;font-size:14px;opacity:.92;color:rgba(255,255,255,.92)}
/* SVG meta icons inherit white/grey; emoji platforms often paint calendars purple */
.page-hero .ph-meta .ph-ico{display:inline-flex;width:1.05em;height:1.05em;margin-right:.35em;vertical-align:-.12em;color:rgba(255,255,255,.88)}
.page-hero .ph-meta .ph-ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- LIST TOOLBAR (search + category chips) ---------- */
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.lt-search{display:flex;align-items:center;gap:9px;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;flex:1;min-width:220px;max-width:340px}
.lt-search svg{width:17px;height:17px;flex:none;color:var(--muted)}
.lt-search input{border:none;background:none;outline:none;font-family:var(--font);font-size:14.5px;color:var(--ink);width:100%}
.lt-chips{display:flex;gap:8px;flex-wrap:wrap}
.lt-chip{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.lt-chip:hover{border-color:var(--green)}
.lt-chip:disabled{opacity:.55;cursor:progress;pointer-events:none}
.lt-chip.active{background:var(--green);border-color:var(--green);color:#fff}
.lt-empty{display:none;text-align:center;color:var(--muted);padding:36px 0}

/* footer row of an article/community page: back-link left, action right */
.post-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- PAGINATION ---------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:44px}
.page-btn{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.page-btn:hover{border-color:var(--green);color:var(--green)}
.page-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.page-btn.is-arrow{font-size:18px}
.page-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.article-wrap{max-width:820px;margin:0 auto;padding:56px 22px}
/* Второй кусок текста подряд — «Как вступить» под фотографиями: свои 56px
   сверху он складывал с отступом предыдущего блока и с margin-top заголовка,
   и между снимками и текстом зияла дыра. */
.article-wrap--tight{padding-top:0;margin-top:-34px}
.article-wrap--tight .article-body > :first-child{margin-top:0}
.article-body{font-size:17px;line-height:1.75}
.article-body p{margin-bottom:20px}
.article-body h2{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--green-deep);margin:34px 0 14px}
.article-body h3{font-size:20px;margin:26px 0 10px;color:var(--green-dark)}
.article-body ul{margin:0 0 20px 22px}
.article-body li{margin-bottom:8px}
.article-body blockquote{border-left:4px solid var(--gold);background:#f7eecd55;padding:16px 22px;border-radius:0 12px 12px 0;font-style:italic;color:var(--green-dark);margin:0 0 20px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
@media(max-width:620px){.gallery{grid-template-columns:1fr 1fr}}
.gallery img{aspect-ratio:4/3;object-fit:cover;border-radius:12px;width:100%;display:block}
.gallery a{display:block;border-radius:12px;overflow:hidden;cursor:pointer}
.gallery a img{transition:transform .35s ease}
.gallery a:hover img{transform:scale(1.05)}

/* ---------- GALLERY page (static-pages/gallery) ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media(max-width:820px){.photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.photo-grid{grid-template-columns:1fr}}
.photo-tile{display:block;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--cream-2,#f3efe4)}
.photo-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease}
.photo-tile:hover img{transform:scale(1.05)}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 26px}
@media(max-width:700px){.video-grid{grid-template-columns:1fr}}
.video-card{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);background:#000;display:block}
.video-card iframe,.video-card video{width:100%;height:100%;border:0;display:block;object-fit:cover}
/* glightbox backdrop: its .goverlay has base opacity:0 with a fill-mode:none
   fade animation, so after the 0.5s open the dark layer reverts to invisible
   and the page (sticky header, video iframes) shows through the open photo.
   Pin it opaque. Do NOT touch its z-index: .goverlay is a sibling of
   .gcontainer inside .glightbox-container, so raising it paints the backdrop
   over the photo itself. The container is already z-index:999999, which puts
   the whole lightbox above the sticky header. */
.goverlay{opacity:1 !important}

/* ---------- RECIPE cards (/cuisine) ---------- */
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.recipe-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.recipe-grid{grid-template-columns:1fr}}
.recipe-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;color:var(--ink)}
.recipe-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);color:var(--ink)}
.recipe-photo{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.recipe-photo img{width:100%;height:100%;object-fit:cover}
.recipe-emoji{font-size:64px;opacity:.85}
.recipe-tag{position:absolute;top:12px;left:12px;background:var(--gold-btn);color:var(--green-deep);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.recipe-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.recipe-body h3{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--green-deep);line-height:1.25}
.recipe-body p{font-size:14px;color:var(--muted);line-height:1.5}
.recipe-link{margin-top:auto;font-weight:700;font-size:14px;color:var(--green)}

/* ---------- LIBRARY cards (/library) ---------- */
.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:680px){.library-grid{grid-template-columns:1fr}}
.library-card{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;color:var(--ink)}
.library-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink)}
.library-cover{flex:none;width:104px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.library-cover img{width:100%;height:100%;object-fit:cover}
.library-spine{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.12))}
.library-spine::after{content:"";position:absolute;left:14px;top:0;bottom:0;width:3px;background:rgba(255,255,255,.35)}
.library-info{padding:16px 18px 16px 0;display:flex;flex-direction:column;gap:6px}
.library-type{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-strong)}
.library-info h3{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--green-deep);line-height:1.25}
.library-info p{font-size:13.5px;color:var(--muted);line-height:1.5}
.library-link{margin-top:auto;font-weight:700;font-size:13.5px;color:var(--green)}

/* ---------- ALBUM showcase (Pinterest-style wall) ----------
   Grid of fine rows; each tile spans as many rows as its own aspect ratio
   needs (set by JS once the image reports its natural size), so nothing is
   cropped and the left-to-right reading order is preserved — unlike CSS
   `columns`, which flows top-to-bottom. Without JS every tile keeps the
   default span and it degrades to an even grid. */
.album-showcase{padding-top:0}
.album-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.album-photos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.album-photos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.album-photos{grid-template-columns:1fr}}
/* Masonry (10+ photos): fine rows, each tile spanning what its own aspect
   ratio needs — the span is set by JS once the image reports its size. */
.album-photos.masonry{grid-auto-rows:8px}
.album-photos.masonry .album-photo{grid-row-end:span 14}
/* Even grid (small sets): equal rectangles, so the block stays tidy. */
.album-photos.even-grid .album-photo{aspect-ratio:4/3}
.album-photo{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--cream-2,#f3efe4);box-shadow:var(--shadow-sm);cursor:zoom-in}
.album-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.album-photo:hover img{transform:scale(1.04)}
.album-photo-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;color:#fff;font-size:13px;font-weight:600;line-height:1.35;background:linear-gradient(180deg,rgba(6,57,42,0),rgba(6,57,42,.85));opacity:0;transition:opacity .25s}
.album-photo:hover .album-photo-cap{opacity:1}

/* Album cross-link strip under a material: thumbnails + a link through to
   the album, instead of duplicating the whole gallery on every page. */
.album-strip{display:block;margin:28px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;color:var(--ink)}
.album-strip:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.album-strip-shots{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
@media(max-width:620px){.album-strip-shots{grid-template-columns:repeat(3,1fr)}.album-strip-shots img:nth-child(n+4){display:none}}
.album-strip-shots img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.album-strip-meta{display:flex;flex-direction:column;gap:3px;padding:14px 18px}
.album-strip-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.album-strip-meta b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--green-deep)}
.album-strip-count{font-size:13.5px;color:var(--muted);font-weight:600}
.linked-materials a{color:var(--green-deep);font-weight:600}
.linked-materials a:hover{color:var(--green)}

/* ---------- ALBUM tiles (/gallery) ---------- */
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.album-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.album-grid{grid-template-columns:1fr}}
.album-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;color:var(--ink)}
.album-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);color:var(--ink)}
.album-cover{position:relative;aspect-ratio:4/3;overflow:hidden}
.album-cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.album-card:hover .album-cover img{transform:scale(1.05)}
.album-cover>.tag{position:absolute;top:12px;left:12px;z-index:2}
/* Photo / video counters, bottom-right over the cover. */
.album-count{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;gap:8px}
.album-count span{display:inline-flex;align-items:center;gap:4px;background:rgba(6,57,42,.78);color:#fff;font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.album-body{padding:18px 20px;display:flex;flex-direction:column;flex:1;gap:6px}
.album-body h3{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--green-deep);line-height:1.3}
.album-body p{font-size:14px;color:var(--muted);line-height:1.5}
.album-body .card-date{margin-top:auto;padding-top:8px}


/* ---------- PHOTO GALLERY (post) ---------- */
.photo-gallery{margin:26px 0}
.photo-gallery:focus{outline:none}
.pg-stage{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--green-deep);aspect-ratio:16/9;box-shadow:var(--shadow-sm)}
.pg-stage #pgLink{display:block;width:100%;height:100%}
.pg-stage #pgMain{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.pg-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(6,57,42,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;backdrop-filter:blur(2px)}
.pg-nav:hover{background:var(--gold-btn);color:var(--green-deep)}
.pg-prev{left:12px}
.pg-next{right:12px}
.pg-count{position:absolute;right:14px;bottom:12px;background:rgba(6,57,42,.6);color:#fff;font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;backdrop-filter:blur(2px)}
.pg-count b{color:var(--gold-light)}
.pg-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.pg-thumb{flex:none;width:104px;aspect-ratio:4/3;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:none;opacity:.55;transition:opacity .2s,border-color .2s;scroll-snap-align:center}
.pg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pg-thumb:hover{opacity:.85}
.pg-thumb.active{opacity:1;border-color:var(--gold-btn)}
@media(max-width:560px){.pg-nav{width:38px;height:38px;font-size:22px}.pg-thumb{width:84px}}
.share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:34px 0}
.share span{font-weight:700;color:var(--green-deep)}
.share a,.share button{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;transition:.2s}
.share a:hover,.share button:hover{transform:translateY(-3px)}
.share a svg,.share button svg{width:19px;height:19px;fill:currentColor;display:block}
.share button{border:0;padding:0;cursor:pointer;font:inherit}
.share .sh-cp svg{width:17px;height:17px}
.sh-fb{background:#3b5998}.sh-tg{background:#2aabee}.sh-wa{background:#25d366}.sh-vk{background:#0077ff}.sh-tw{background:#111}.sh-cp{background:var(--muted)}

/* Engagement bar — tatar-native */
.eng-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.eng-btn{padding:9px 16px;font-size:14px}
.eng-btn .eng-ico{display:inline-flex;width:16px;height:16px;color:var(--green);flex:none}
.eng-btn .eng-ico svg{width:100%;height:100%;display:block}
.eng-btn.is-on{border-color:var(--green);background:rgba(11,107,69,.08);color:var(--green-deep)}
.eng-btn.is-on .eng-ico{color:var(--gold)}
.eng-btn .eng-count{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;margin-left:2px}
.eng-rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eng-rating-label{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep)}
.eng-stars{display:inline-flex;align-items:center;gap:2px}
.eng-star{background:none;border:none;cursor:pointer;padding:.15rem;font-size:1.25rem;line-height:1;color:#c7bfb2}
.eng-star.is-on{color:var(--gold)}
.eng-star-clear{background:none;border:none;cursor:pointer;margin-left:.35rem;font-size:1.1rem;line-height:1;color:var(--muted)}
.eng-rating-meta{font-size:.92rem;color:var(--muted)}

.back-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin-top:10px}
/* Back link sharing the .share row: hard right on desktop, its own line
   underneath once the row wraps on a phone. It must undo `.share a`, which
   turns every anchor in the row into a 42px white-on-colour social circle —
   that clipped the label to a blank disc. */
.share .share-back{margin-left:auto;margin-top:0;width:auto;height:auto;border-radius:0;background:none;color:var(--green);font-size:15px}
.share .share-back:hover{transform:none;color:var(--green-deep)}
@media(max-width:560px){.share .share-back{margin-left:0;flex-basis:100%}}
.info-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:20px 0}
.info-list li{display:flex;gap:12px;font-size:15px}
.info-list b{color:var(--green-deep);min-width:130px;display:inline-block}
/* Holidays already behind us: the date is struck through, nothing else
   changes. Dimming the whole row was tried first and cost readability —
   every past name dropped under the 4.5:1 a body text needs. A rule through
   the date says "gone" without taking anything away from the text. */
.info-list li.is-past b{text-decoration:line-through}

/* ---------- ACCOUNT (authenticated /account/*) ---------- */
/* Token aliases for account blades that still reference the old v2 names. */
:root{
  --font-display:var(--serif);
  --font-body:var(--font);
  --bronze:var(--gold);
  --bronze-strong:var(--gold-strong);
  --cream-2:#f3efe4;
  --line-strong:#d4cdb8;
  --moss:#3a5e4a;
}
[x-cloak]{display:none!important}

.account-intro{padding:2.5rem 0 1rem}
.account-intro-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem}
.account-intro .kicker{margin-bottom:6px}
.account-intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.5vw,2.4rem);color:var(--green-deep);margin:.3rem 0;line-height:1.2}
.account-intro h1 .name{color:var(--gold)}
.account-intro .lead{color:var(--muted);margin:0;max-width:42rem}
.account-cta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.account-cta a[aria-current="page"]{background:var(--green);border-color:var(--green);color:#fff}

.account-body{padding:0 0 4rem}
/* Во всю ширину контейнера. Форма упиралась в 52rem и заканчивалась заметно
   раньше шапки кабинета — на широком экране это читалось как незакрытая
   вёрстка, а не как забота о длине строки. Ширину и так держит .container. */
.account-main{min-width:0}
/* Строки, которые ведёт администрация: набраны как значение, а не как поле
   ввода, чтобы отличались от того, что участник правит сам. */
.account-readonly{margin:0;font-weight:700;color:var(--green-deep)}
/* Форма выхода стоит в ряду вкладок — она не должна ломать flex-строку. */
.account-logout{display:contents}

/* Content chrome — panels, titles, muted text */
.account .v2-section-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--green-deep)}
.account .v2-mute{color:var(--muted)}
.account .v2-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.account .v2-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.account .v2-card:hover{transform:none;box-shadow:var(--shadow-sm)}
.account .v2-card-title{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--green-deep)}
.account .v2-card-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--cream-2)}
.account .v2-card-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.account .v2-card-meta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.account .v2-card-foot{font-size:.85rem;color:var(--muted);margin-top:auto}
.account .v2-editor-header{margin-bottom:1rem}
.account .v2-editor-back{color:var(--muted)}
.account .v2-editor-back:hover{color:var(--green)}
.account .v2-empty-state{text-align:left;padding:1.25rem 0}

/* Layout helpers kept from account blades */
.account .v2-flex{display:flex;align-items:center}
.account .v2-flex-between{display:flex;justify-content:space-between;align-items:center}
.account .v2-gap-sm{gap:.5rem}
.account .v2-grid{display:grid;gap:1rem}
.account .v2-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.account .v2-cols-3{grid-template-columns:1fr}}

/* Buttons — map leftover v2 button classes onto tatar .btn look */
.account .v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;font-family:var(--font);font-weight:700;font-size:14.5px;cursor:pointer;border:2px solid transparent;transition:.2s;line-height:1.2;white-space:nowrap;text-decoration:none;background:transparent;color:var(--green)}
.account .v2-btn-sm{padding:8px 14px;font-size:13.5px}
.account .v2-btn-ghost,.account .v2-btn-outline{border-color:var(--green);color:var(--green);background:transparent}
.account .v2-btn-ghost:hover,.account .v2-btn-outline:hover{background:var(--green);color:#fff}
.account .v2-btn-bronze,.account .v2-btn-dark,.account .v2-btn-primary{background:var(--gold-btn);color:var(--green-deep);border-color:var(--gold-btn)}
.account .v2-btn-bronze:hover,.account .v2-btn-dark:hover,.account .v2-btn-primary:hover{background:var(--gold-light);color:var(--green-deep)}
.account .v2-btn-link{border:none;padding:0;border-radius:0;color:var(--green);font-weight:700;background:none}
.account .v2-btn-link:hover{color:var(--green-dark);text-decoration:underline}

/* Badges / alerts */
.account .v2-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#e3f0e9;color:var(--green)}
.account .v2-badge-ink{background:var(--green-deep);color:#fff}
.account .v2-badge-bronze,.account .v2-badge-gold{background:#f7eecd;color:#8a6d0b}
.account .v2-alert{padding:.75rem 1rem;border-radius:12px;font-size:.92rem;font-weight:600}
.account .v2-alert-danger{background:#f9e3e2;color:var(--red)}

/* Overview panel */
.account-panel{background:var(--paper,#fff);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.75rem;box-shadow:var(--shadow-sm)}
.account-panel-title{font-family:var(--font-display);font-size:1.45rem;margin:0 0 .5rem;color:var(--green-deep)}
.account-panel-lead{margin:0 0 1.25rem;color:var(--muted);line-height:1.55;max-width:40rem}

/* ---------- ACCOUNT dashboard ---------- */
/* Two columns of equal-height panels. Правила карточки «кто вы здесь»
   (.account-panel-me, .account-me, .account-role, .account-quick-links) сняты
   вместе с ней: имя стоит в шапке кабинета, кнопки — среди вкладок. */
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.account-grid{grid-template-columns:1fr}}

.account-flash{background:#e3f0e9;border:1px solid #cbe3d6;color:var(--green-dark);border-radius:14px;padding:12px 16px;margin-bottom:18px;font-weight:600}

/* Заглушка аватара осталась — ею пользуется редактор профиля. */
.account-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--line);flex:none}
.account-avatar-blank{display:flex;align-items:center;justify-content:center;background:var(--cream-2);color:var(--green-deep);font-family:var(--serif);font-size:28px}

.account-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.account-panel-head .account-panel-title{margin:0}
.account-panel-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.account-empty{color:var(--muted);margin:0}

.account-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.account-list li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.account-list li:last-child{border-bottom:0;padding-bottom:0}
.account-list a{font-weight:700;color:var(--ink)}
.account-list a:hover{color:var(--green)}
.account-list-meta{font-size:13.5px;color:var(--muted);white-space:nowrap;flex:none}
.account-score{color:var(--green-deep);font-size:15px}

/* Switch: the only control on the page that toggles rather than submits, so
   it reads as a physical state instead of another gold button. */
.account-switch-row{display:flex;align-items:center;gap:12px}
.account-switch{width:52px;height:30px;border-radius:999px;border:1px solid var(--line-strong);background:var(--cream-2);position:relative;cursor:pointer;padding:0;transition:.2s;flex:none}
.account-switch:hover{border-color:var(--gold)}
.account-switch-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}
.account-switch.is-on{background:var(--green);border-color:var(--green)}
.account-switch.is-on .account-switch-knob{transform:translateX(22px)}
.account-switch:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.account-switch-label{font-weight:700}
.account-back{display:inline-block;margin-top:.4rem;font-size:.88rem;color:var(--muted);text-decoration:none}
.account-back:hover{color:var(--green)}
.account-flash{padding:.75rem 1rem;margin-bottom:1rem;border:1px solid var(--green);border-radius:12px;background:rgba(11,107,69,.06);color:var(--green-deep);font-weight:600}
.account-locale-tab{padding:.45rem .75rem;border-radius:999px;font-size:.82rem;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-weight:500;cursor:pointer;font-family:var(--font)}
.account-locale-tab.is-active{background:var(--green-deep);border-color:var(--green-deep);color:#fff;font-weight:700}

/* Forms (x-v2.field / input / select / textarea used on account pages) */
.account .v2-form-grid{display:grid;gap:1rem}
.account .v2-form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.account .v2-form-grid-2{grid-template-columns:1fr}}
.account .v2-field{margin-bottom:0}
.account .v2-field-label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--green-deep)}
.account .v2-field-required{color:var(--red);margin-left:2px}
.account .v2-field-help{font-size:12.5px;color:var(--muted);margin:.35rem 0 0}
.account .v2-field-error{font-size:12.5px;color:var(--red);font-weight:700;margin:.35rem 0 0}
.account .v2-field.has-error .v2-input,
.account .v2-field.has-error .v2-select,
.account .v2-field.has-error .v2-textarea{border-color:var(--red)}
.account .v2-input,
.account .v2-select,
.account .v2-textarea{width:100%;padding:12px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--font);font-size:14.5px;background:var(--cream);color:var(--ink);transition:.2s}
.account .v2-input:focus,
.account .v2-select:focus,
.account .v2-textarea:focus{outline:none;border-color:var(--green);background:#fff}
.account .v2-textarea{min-height:6rem;resize:vertical;line-height:1.5}
.account .v2-error{color:var(--red);font-size:12.5px;font-weight:700}

/* FilePond — match tatar cream/green chrome inside account */
.account .filepond--root{font-family:var(--font);margin-bottom:0}
.account .filepond--panel-root{background:var(--cream);border-radius:14px}
.account .filepond--drop-label{color:var(--muted)}
.account .filepond--label-action{color:var(--green);text-decoration:underline}

/* Notifications list */
.account .v2-notif-row:hover{background:rgba(11,107,69,.04)}
.account .v2-notif-unread{background:rgba(11,107,69,.06)}
.account .v2-notif-unread:hover{background:rgba(11,107,69,.09)}

/* Account tables */
.account table{width:100%;border-collapse:collapse}
.account table th{padding:.75rem 1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;background:var(--cream-2)}
.account table td{padding:.75rem 1rem;border-top:1px solid var(--line);vertical-align:middle}
.account table a{font-weight:600;color:var(--green-deep)}
.account table a:hover{color:var(--green)}

/* Модальное окно на <dialog>: пока используется одно — ответ на нажатие
   «Пожертвовать», — но описано как обычная карточка сайта, чтобы следующему
   окну не пришлось выдумывать свой вид. Ширина ограничена, подложка тёмная. */
/* Окно ставится по центру явно. Браузер центрирует <dialog> собственным
   `margin:auto`, а сброс в начале файла (`*{margin:0}`) его снимает — окно
   уезжало в левый верхний угол, и на телефоне это было особенно заметно.
   Высота по содержимому, но не выше экрана: длинный текст прокручивается
   внутри окна, а не уводит его за край. */
.modal-card{
  position:fixed;inset:0;margin:auto;height:fit-content;
  max-height:calc(100dvh - 32px);overflow:auto;
  border:0;border-radius:18px;padding:28px;max-width:440px;width:calc(100% - 32px);
  background:var(--cream,#fffdf5);color:var(--ink,#1c2b23);box-shadow:0 24px 60px rgba(0,0,0,.28)
}
.modal-card::backdrop{background:rgba(6,57,42,.55)}
.modal-card h3{font-size:20px;margin:0 0 10px}
.modal-card p{margin:0 0 20px;line-height:1.55;color:var(--muted,#41544a)}
.modal-card form{margin:0}