
:root{
  --paper:#f6f8fb; --tint:#eaf0f7; --ink:#16233a; --muted:#56637a;
  --blue:#1f4f91; --red:#c8372f; --gold:#f2c230; --line:#d5dde9; --card:#ffffff; --on-accent:#fff;
  --display:"Yeseva One", Georgia, "Times New Roman", serif;
  --body:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
.wrap.narrow{max-width:780px}
.center{text-align:center}.btns.center{justify-content:center}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:8px}

/* header */
header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.2) blur(6px);background:color-mix(in srgb,var(--paper) 92%,transparent)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:36px;padding-block:12px}
.brand{display:flex;align-items:center;gap:14px;flex:none;text-decoration:none;color:var(--ink);min-width:0}
.mark{width:42px;height:42px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--card) 0 34%,transparent 35%),conic-gradient(var(--blue) 0 50%,var(--gold) 0 75%,var(--red) 0);box-shadow:inset 0 0 0 1px var(--line)}
.mark.sm{width:22px;height:22px}
.brand small{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.brand b{font-family:var(--display);font-weight:400;font-size:1.05rem;line-height:1.15;display:block;max-width:12em}
nav#mainnav{display:flex;align-items:center;gap:22px}
nav#mainnav ul{list-style:none;display:flex;flex-wrap:nowrap;white-space:nowrap;gap:4px 24px;margin:0;padding:0;font-size:.93rem}
nav#mainnav a{color:var(--ink);text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
nav#mainnav a:hover,nav#mainnav a[aria-current=page]{border-color:var(--blue)}
.lang{display:flex;gap:4px;font-size:.8rem}
.lang a{border:1px solid var(--line);color:var(--muted);padding:3px 9px!important;border-radius:3px;text-decoration:none}
.lang a[aria-current]{background:var(--ink);color:var(--paper)!important;border-color:var(--ink)!important}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.band{height:4px;background:linear-gradient(90deg,var(--blue) 0 50%,var(--gold) 50% 75%,var(--red) 75% 100%)}

/* hero */
.hero-wrap{background:radial-gradient(1200px 400px at 85% 0%,var(--tint),transparent 70%)}
.hero{padding-block:64px 56px;display:grid;grid-template-columns:1.45fr 1fr;gap:48px;align-items:center}
.hero>*{min-width:0}
.hero h1{font-size:clamp(2.3rem,6vw,4.2rem)}
.hero h1 span{color:var(--blue)}
.lead{font-size:1.12rem;color:var(--muted);max-width:60ch;margin:18px 0 26px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:11px 18px;border-radius:4px;text-decoration:none;font-weight:600;font-size:.95rem;font-family:inherit;cursor:pointer;border:0;line-height:1.3}
.btn.pri{background:var(--blue);color:var(--on-accent)}
.btn.pri:hover{background:color-mix(in srgb,var(--blue) 85%,#000)}
.btn.sec{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn.sec:hover{background:var(--ink);color:var(--paper)}
.hero-side{margin:0;display:grid;gap:28px;justify-items:center}
.seal{position:relative;width:min(230px,62vw);aspect-ratio:1;display:grid;place-items:center}
.seal-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--blue) 0 50%,var(--gold) 0 75%,var(--red) 0);box-shadow:0 22px 50px rgba(22,35,58,.18)}
.seal-ring::after{content:'';position:absolute;inset:14%;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.seal-in{position:relative;text-align:center;display:grid;gap:2px}
.seal-in b{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3rem);line-height:1;color:var(--ink)}
.seal-in small{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.verse{border-left:3px solid var(--gold);padding:4px 0 4px 18px;font-family:var(--display);font-size:1.25rem;line-height:1.45;margin:0;justify-self:start}
.verse small{display:block;font-family:var(--body);font-size:.8rem;color:var(--muted);margin-top:8px}
.places{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.places span{font-size:.82rem;border:1px solid var(--line);padding:3px 10px;border-radius:999px;color:var(--muted);background:var(--card)}

section{padding-block:60px}
section.pt0{padding-top:8px}
.tinted{background:var(--tint)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.more{font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}
.page-head{padding-block:48px 28px}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem)}
.page-head .lead{margin-bottom:0}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 10px 28px rgba(22,35,58,.10);transform:translateY(-2px)}
.card .ph{aspect-ratio:16/10;display:block;background:var(--tint);overflow:hidden}
.card .ph-empty{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,var(--tint),var(--paper))}
.card .ph-empty::after{content:'';width:56px;height:56px;border-radius:50%;opacity:.55;background:radial-gradient(circle,var(--paper) 0 34%,transparent 35%),conic-gradient(var(--blue) 0 50%,var(--gold) 0 75%,var(--red) 0)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .in{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.card time,.post time{font-size:.78rem;color:var(--blue);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.04em}
.card h3{font-size:1.18rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--blue)}
.card p{margin:0;color:var(--muted);font-size:.93rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.filters input,.filters select{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink)}
.filters input{flex:1 1 260px;min-width:0}
.empty{color:var(--muted)}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:36px}
.pager a,.pager span{padding:7px 12px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);background:var(--card);font-variant-numeric:tabular-nums}
.pager span[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager span:not([aria-current]){border-color:transparent;background:none}

/* krajan */
.kraj{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.kraj>*{min-width:0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);font-family:var(--display);font-size:1.5rem;color:var(--blue);line-height:1.2}
.steps b{display:block}
.steps span{color:var(--muted);font-size:.93rem}
.partner{margin-top:24px;padding:14px 16px;border:1px dashed var(--line);border-radius:6px;font-size:.88rem;color:var(--muted)}

/* map */
.map{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.map>*{min-width:0}
.mapbox{display:block;aspect-ratio:4/3;border-radius:6px;border:1px solid var(--line);position:relative;overflow:hidden;background:radial-gradient(circle at 30% 40%,var(--paper),var(--card))}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.mapbox .reg{fill:var(--tint);stroke:var(--line);stroke-width:2}
.mapbox .riv{fill:none;stroke:color-mix(in srgb,var(--blue) 30%,transparent);stroke-width:2}
.pin{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 25%,transparent)}
.pin i{position:absolute;left:16px;top:-5px;font-style:normal;font-size:.74rem;white-space:nowrap;color:var(--ink)}

/* tiles */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{padding:22px;border-top:3px solid var(--red);background:var(--card);text-decoration:none;color:inherit;transition:box-shadow .2s}
.tile:hover{box-shadow:0 10px 28px rgba(22,35,58,.08)}
.tile h3{font-size:1.15rem;margin-bottom:6px;color:var(--ink)}
.tile p{margin:0;color:var(--muted);font-size:.93rem}

/* albums */
.albums{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.albums.four{grid-template-columns:repeat(4,1fr)}
.album{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;min-width:0}
.album-img{aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:repeating-linear-gradient(45deg,var(--tint) 0 10px,var(--paper) 10px 20px);display:block}
.album-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.album:hover .album-img img{transform:scale(1.04)}
.album-meta b{display:block;font-weight:600;line-height:1.35}
.album-meta small{color:var(--muted);font-size:.82rem}
.photos{columns:4 220px;column-gap:12px;margin-top:20px}
.photos a{display:block;margin-bottom:12px;break-inside:avoid;border-radius:4px;overflow:hidden;background:var(--tint)}
.photos img{display:block;width:100%;transition:opacity .2s}
.photos a:hover img{opacity:.88}
.post .crumb{display:block;width:max-content}
.post-cover{margin:0 0 28px;border-radius:6px;overflow:hidden;background:var(--tint)}
.post-cover img{display:block;width:100%;max-height:520px;object-fit:cover}
.crumb{display:inline-block;margin-bottom:14px;text-decoration:none;font-size:.9rem;font-weight:600}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,16,28,.94);z-index:100;display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:3px}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:2.6rem;cursor:pointer;padding:12px 18px;line-height:1}
.lb-x{top:8px;right:8px}.lb-p{left:4px;top:50%;transform:translateY(-50%)}.lb-n{right:4px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#cfd6e2;font-size:.88rem;padding-inline:16px}

/* post & prose */
.post{padding-block:44px 64px}
.post h1{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:6px 0 26px}
.prose{font-size:1.04rem;line-height:1.72;min-width:0;overflow-wrap:anywhere}
.prose p{margin:0 0 1em}
.prose img{max-width:100%!important;height:auto!important;border-radius:4px}
.prose iframe,.prose video{max-width:100%;border:0;border-radius:4px}
.prose iframe[src*="youtube"]{width:100%;height:auto;aspect-ratio:16/9}
.prose table{border-collapse:collapse;width:100%!important;max-width:100%;display:block;overflow-x:auto;margin:1em 0}
.prose td,.prose th{border:1px solid var(--line);padding:8px 10px;vertical-align:top}
.prose blockquote{border-left:3px solid var(--gold);margin:1em 0;padding:2px 0 2px 18px;color:var(--muted)}
.prose h2,.prose h3,.prose h4{margin:1.4em 0 .5em}
.prose a{overflow-wrap:anywhere}
.prose [style*="width"]{max-width:100%!important}
.prose *{font-family:inherit!important}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.prevnext a{text-decoration:none;color:var(--ink);font-weight:600;line-height:1.35}
.prevnext a small{display:block;color:var(--blue);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.prevnext .r{text-align:right}
.with-side{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start}
.side{position:sticky;top:96px}
.side ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.side a{display:block;padding:7px 14px;text-decoration:none;color:var(--muted);margin-left:-2px;border-left:2px solid transparent;font-size:.94rem;line-height:1.35}
.side a:hover{color:var(--ink)}
.side a[aria-current]{color:var(--ink);border-color:var(--blue);font-weight:600}

/* contacts */
.contact-grid.with-form{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0}
.with-form .contacts{grid-template-columns:1fr}
.contacts div{min-width:0}
.contacts dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contacts dd{margin:4px 0 0;font-size:1.05rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.contacts a{text-decoration:none}
.cform{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:22px}
.cform label{display:grid;gap:6px;font-size:.88rem;font-weight:600}
.cform input,.cform textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:4px;width:100%}
.cform .hp{position:absolute;left:-9999px}
.cform .ok{background:#e6f4ea;color:#185c2c;padding:10px 12px;border-radius:4px;margin:0}
.cform .err{background:#fbe9e7;color:#8c2a1f;padding:10px 12px;border-radius:4px;margin:0}

footer.site{border-top:1px solid var(--line);padding-block:26px;font-size:.85rem;color:var(--muted);background:var(--card)}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
.foot-brand{display:flex;gap:10px;align-items:center}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--muted)}

@media (max-width:1100px){
  .burger{display:block}
  nav#mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 16px 18px;flex-direction:column;align-items:flex-start;gap:14px}
  nav#mainnav.open{display:flex}
  nav#mainnav ul{flex-direction:column;gap:2px;font-size:1.05rem}
  .hdr{position:relative}
  .albums.four{grid-template-columns:repeat(2,1fr)}
  .with-side{grid-template-columns:1fr;gap:20px}
  .side{position:static}
}
@media (max-width:820px){
  .hero,.kraj,.map,.contact-grid.with-form{grid-template-columns:1fr}
  .hero{padding-block:40px;gap:32px}
  .hero-side{justify-items:start}
  .seal{width:150px}
  .cards,.cols3,.contacts,.albums{grid-template-columns:1fr}
  .albums,.albums.four{grid-template-columns:repeat(2,1fr);gap:14px}
  section{padding-block:44px}
  .prevnext{grid-template-columns:1fr}.prevnext .r{text-align:left}
  .brand b{font-size:.95rem;white-space:normal}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
