/* ============================================================
   Shanghai Püha Johannese Kool Tallinnas
   Warm classical theme — burgundy / gold / ivory
   Palette taken from the school emblem:
     burgundy #722E2A, deep #650013, gold #C39036, sand #E2C791
   ============================================================ */
:root{
  --ink:#2a211d;
  --ink-dim:#5d4f47;
  --ink-faint:#8a7a70;

  --burgundy:#722e2a;
  --burgundy-dark:#4d1b1b;
  --burgundy-deep:#3a1315;
  --burgundy-soft:#8f4340;

  --gold:#c39036;
  --gold-bright:#e0b45f;
  --gold-deep:#9a6f22;
  --sand:#e2c791;
  --sand-soft:#f2e3c6;

  /* Page grounds are warm parchment rather than white, so a full page of
     text still reads as part of the same object as the burgundy header.
     --card sits one step lighter than --paper so panels lift off it. */
  --paper:#f3e9d6;
  --paper-2:#ecdfc6;
  --paper-3:#e4d2b2;
  --card:#fbf6ea;
  --card-lift:#fffdf6;

  --line:rgba(114,46,42,.14);
  --line-strong:rgba(114,46,42,.28);
  --gold-line:rgba(195,144,54,.42);

  --radius:3px;
  --maxw:1180px;
  --shadow-sm:0 2px 10px rgba(74,34,26,.07);
  --shadow:0 14px 40px rgba(74,34,26,.13);
  --shadow-lg:0 24px 70px rgba(74,34,26,.18);

  --font:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Playfair Display","Times New Roman",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* A soft vignette keeps large parchment areas from reading as flat colour.
   It darkens at the edges rather than tinting the middle, which the warm
   ground would turn blotchy. */
body::before{
  content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(114,46,42,.05));
}
a{color:var(--burgundy);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-deep)}
/* height:auto keeps the intrinsic width/height attributes (which reserve
   layout space and stop the page jumping as images load) from also fixing
   the rendered height once CSS scales the width. */
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:.005em;margin:0 0 .5em;color:var(--burgundy-dark);line-height:1.2}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.45em}
strong{color:var(--burgundy-dark)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.container-narrow{max-width:880px;margin:0 auto;padding:0 22px}

/* ---------- sections ---------- */
.section{padding:86px 0;position:relative}
.section-alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-sand{background:linear-gradient(180deg,var(--paper-3),var(--paper-2))}
.section-tight{padding:62px 0}

.eyebrow{
  color:var(--gold-deep);text-transform:uppercase;letter-spacing:.26em;
  font-size:12px;font-weight:700;margin-bottom:14px;
}
.eyebrow-c{text-align:center}
.section-title{font-size:clamp(31px,4.2vw,48px);margin-bottom:14px}
.section-title-c{text-align:center}
/* ornamental rule: a small diamond flanked by tapering gold lines */
.section-title-c::after{
  content:"";display:block;width:132px;height:9px;margin:20px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  clip-path:polygon(0 45%,38% 45%,50% 0,62% 45%,100% 45%,100% 55%,62% 55%,50% 100%,38% 55%,0 55%);
}
.section-sub{text-align:center;color:var(--ink-dim);max-width:760px;margin:0 auto 54px;font-size:19px}
.lead{font-size:20px;line-height:1.75;color:var(--ink-dim)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:var(--font);font-weight:600;letter-spacing:.03em;
  font-size:15px;padding:13px 28px;border-radius:var(--radius);border:1px solid transparent;
  transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,color .2s;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  color:#fff;background:linear-gradient(180deg,var(--burgundy-soft),var(--burgundy));
  border-color:var(--burgundy-dark);
  box-shadow:0 6px 18px rgba(114,46,42,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{color:#fff;background:linear-gradient(180deg,var(--burgundy),var(--burgundy-dark));box-shadow:0 8px 24px rgba(114,46,42,.4)}
.btn-gold{
  color:#3a2408;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border-color:var(--gold-deep);
  box-shadow:0 6px 18px rgba(195,144,54,.3),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover{color:#2a1a04;background:linear-gradient(180deg,#eec473,var(--gold))}
.btn-ghost{color:var(--burgundy);border-color:var(--line-strong);background:rgba(255,253,246,.6)}
.btn-ghost:hover{color:var(--burgundy-dark);border-color:var(--burgundy);background:rgba(114,46,42,.06)}
.btn-ghost-light{color:var(--sand-soft);border-color:rgba(226,199,145,.45);background:rgba(255,255,255,.06)}
.btn-ghost-light:hover{color:#fff;border-color:var(--sand);background:rgba(255,255,255,.14)}
.btn-lg{padding:16px 36px;font-size:16px}
.btn-block{width:100%}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(58,19,21,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(226,199,145,.18);
  transition:background .25s,box-shadow .25s,border-color .25s;
}
.site-header.scrolled{background:rgba(58,19,21,.985);box-shadow:0 6px 26px rgba(40,12,14,.35)}
/* wider than --maxw: the header row carries six menu items plus the language
   switch and the donate button, and the Russian labels need the room */
.nav{display:flex;align-items:center;gap:18px;height:72px;max-width:1420px}
.brand{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;color:#fff}
.brand:hover{color:#fff}
.brand-mark{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 26%,#fbf1dc,#e2c791 72%);
  border:1px solid rgba(226,199,145,.9);
  box-shadow:0 0 0 3px rgba(58,19,21,.9),0 0 0 4px rgba(195,144,54,.42);
  overflow:hidden;
}
.brand-mark img{width:86%;height:86%;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;line-height:1.12;min-width:0;overflow:hidden}
.brand-copy b{font-family:var(--serif);font-size:16px;font-weight:700;color:#fff;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-copy small{
  margin-top:4px;color:var(--sand);font-size:9.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
}

.nav-links{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav-links>a,.nav-item>button{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font);font-size:14.5px;font-weight:500;letter-spacing:.015em;
  color:#f0e3cd;padding:9px 12px;border-radius:var(--radius);white-space:nowrap;
  background:none;border:0;cursor:pointer;transition:color .15s,background .15s;
}
.nav-links>a:hover,.nav-item>button:hover,.nav-item.open>button{color:var(--sand);background:rgba(226,199,145,.1)}
/* current page — driven by body[data-page] so the shared header needs no
   per-page edit */
body[data-page="about"] [data-nav="about"]>button,
body[data-page="studies"] [data-nav="studies"]>button,
body[data-page="info"] [data-nav="info"]>button,
body[data-page="documents"] [data-nav-link="documents"],
body[data-page="support"] [data-nav-link="support"],
body[data-page="contacts"] [data-nav-link="contacts"]{
  color:var(--sand);box-shadow:inset 0 -2px 0 var(--gold);
}
.nav-item{position:relative}
.nav-item>button::after{
  content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s;
}
.nav-item.open>button::after{transform:translateY(1px) rotate(-135deg)}
.nav-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:248px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;
}
.nav-item.open .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{
  display:block;padding:9px 13px;font-size:14.5px;color:var(--ink);border-radius:2px;
}
.nav-menu a:hover{background:var(--paper-3);color:var(--burgundy)}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}

/* language switch */
.lang-toggle{position:relative}
.lang-current{
  display:flex;align-items:center;gap:6px;height:40px;padding:0 13px;
  background:rgba(226,199,145,.1);border:1px solid rgba(226,199,145,.3);border-radius:var(--radius);
  color:var(--sand);font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.09em;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.lang-current:hover{background:rgba(226,199,145,.2);border-color:rgba(226,199,145,.6)}
.lang-current::after{
  content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:150px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;
}
.lang-toggle.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{
  background:none;border:0;text-align:left;padding:9px 12px;border-radius:2px;cursor:pointer;
  font-family:var(--font);font-size:14.5px;color:var(--ink);
}
.lang-menu button:hover{background:var(--paper-3)}
.lang-menu button.active{color:var(--burgundy);font-weight:700;background:var(--paper-2)}

.nav-toggle{
  display:none;width:42px;height:40px;border:1px solid rgba(226,199,145,.3);border-radius:var(--radius);
  background:rgba(226,199,145,.1);color:var(--sand);font-size:19px;cursor:pointer;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:min(86vh,760px);display:flex;align-items:center;
  padding:150px 0 96px;overflow:hidden;
  background:linear-gradient(150deg,#4d1b1b 0%,#722e2a 46%,#3a1315 100%);
}
.hero-bg{
  position:absolute;inset:0;opacity:.3;
  background:url("../img/school-building.jpg") center 62% / cover no-repeat;
  mix-blend-mode:luminosity;
}
/* Inner pages use the corner view; the wide façade needs the full-height
   hero to read, and at 62px tall it would just be a band of brick. */
.page-hero .hero-bg{
  background-image:url("../img/school-entrance.jpg");
  background-position:center 46%;
  opacity:.2;
}
.hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 70% 25%,rgba(226,199,145,.24),transparent 52%),
    radial-gradient(ellipse at 12% 90%,rgba(58,19,21,.7),transparent 58%);
}
/* thin gold rule framing the hero, echoing a book plate */
.hero-frame{
  position:absolute;inset:26px;pointer-events:none;
  border:1px solid rgba(226,199,145,.2);
}
.hero-frame::before,.hero-frame::after{
  content:"";position:absolute;width:15px;height:15px;border:1px solid rgba(226,199,145,.55);
}
.hero-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hero-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hero-inner{position:relative;z-index:2;text-align:center}
.hero-emblem{width:118px;margin:0 auto 26px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}
.hero-emblem img{width:100%}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  padding:8px 20px;border:1px solid rgba(226,199,145,.42);border-radius:100px;
  color:var(--sand);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(226,199,145,.08);
}
/* The school's full name is the page's headline. It is long — 55 characters
   in Estonian, 68 in Russian — so it is sized by character width (max-width
   in em) rather than by viewport alone, which keeps it to two or three lines
   in every language instead of one language wrapping to five. */
.hero-name{
  font-size:clamp(25px,3.6vw,48px);color:#fff;line-height:1.16;
  /* 22em is the narrowest width at which all three names break into two even
     lines without splitting "Сан-Францисского" at its hyphen. Wider changes
     nothing; narrower forces a third line. Greedy wrapping, in browsers
     without text-wrap, lands on the same breaks. */
  max-width:22em;margin:0 auto 20px;
  text-shadow:0 6px 30px rgba(30,8,10,.55);
  text-wrap:balance;
  hyphens:none;
}
.hero-motto{
  position:relative;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,2.1vw,25px);line-height:1.4;color:var(--sand);
  max-width:24em;margin:0 auto 26px;padding-top:26px;text-wrap:balance;
}
.hero-motto::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:110px;height:9px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  clip-path:polygon(0 45%,38% 45%,50% 0,62% 45%,100% 45%,100% 55%,62% 55%,50% 100%,38% 55%,0 55%);
}
.hero-tagline{
  max-width:760px;margin:0 auto 34px;font-size:clamp(17px,2vw,21px);
  color:rgba(255,250,241,.88);line-height:1.72;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:46px}
.hero-facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border-top:1px solid rgba(226,199,145,.22);padding-top:30px;max-width:860px;margin:0 auto;
}
.hero-fact{padding:4px 30px;min-width:150px;position:relative}
.hero-fact+.hero-fact::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(226,199,145,.22);
}
.hero-fact b{display:block;font-family:var(--serif);font-size:29px;color:var(--sand);line-height:1.2}
.hero-fact span{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,250,241,.62);margin-top:5px}

/* compact hero for inner pages */
.page-hero{
  position:relative;padding:148px 0 62px;overflow:hidden;
  background:linear-gradient(140deg,#4d1b1b,#722e2a 62%,#3a1315);
  text-align:center;
}
.page-hero h1{color:#fff;font-size:clamp(30px,4.6vw,46px);margin-bottom:10px;position:relative;z-index:2}
.page-hero p{color:rgba(255,250,241,.8);max-width:680px;margin:0 auto;position:relative;z-index:2}
.page-hero .eyebrow{color:var(--sand);position:relative;z-index:2}

/* breadcrumb */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:13.5px}
.crumbs .container{display:flex;gap:9px;align-items:center;padding-top:13px;padding-bottom:13px;flex-wrap:wrap}
.crumbs a{color:var(--ink-faint)}
.crumbs a:hover{color:var(--burgundy)}
.crumbs span{color:var(--ink-faint)}
.crumbs b{color:var(--burgundy);font-weight:600}

/* ============================================================
   CONTENT BLOCKS
   ============================================================ */
/* Long URLs and the odd very long compound word appear in the legal texts;
   without this they push the page sideways on a phone. */
.prose{font-size:17.5px;overflow-wrap:break-word}
.prose h2{font-size:clamp(26px,3.2vw,36px);margin-top:1.6em}
.prose h3{font-size:clamp(21px,2.4vw,26px);margin-top:1.5em;color:var(--burgundy)}
.prose>:first-child{margin-top:0}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line)}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg);
}
.prose ol{padding-left:1.35em}
.prose ol::marker{color:var(--gold-deep)}

/* two-column split */
/* ---------- figures ---------- */
.figure{margin:0}
.figure img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:auto}
.figure figcaption{margin-top:13px;font-size:14px;color:var(--ink-faint);text-align:center}

/* An icon is a devotional image, not decoration: it gets a mat and a frame
   and is never cropped or stretched to fill a box. */
.icon-plate{
  max-width:340px;margin:0 auto;padding:15px;
  background:linear-gradient(150deg,var(--sand-soft),var(--paper-3));
  border:1px solid var(--gold-line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.icon-plate img{
  width:100%;height:auto;display:block;border-radius:2px;
  border:1px solid rgba(114,46,42,.28);
}
.icon-plate figcaption{
  margin-top:13px;text-align:center;font-family:var(--serif);font-size:15px;
  color:var(--burgundy);line-height:1.4;
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
.split-img{position:relative}
.split-img img{border-radius:var(--radius);box-shadow:var(--shadow)}
.split-img::after{
  content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--gold-line);
  border-radius:var(--radius);z-index:-1;
}

/* cards */
.cards{display:grid;gap:26px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--sand));
  transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--ink-dim);font-size:16px;margin-bottom:0}
.card-icon{
  width:52px;height:52px;margin-bottom:18px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--sand-soft),var(--sand));
  color:var(--burgundy);border:1px solid var(--gold-line);
}
.card-icon svg{width:24px;height:24px}
.card-link{display:block;color:inherit}
.card-link:hover{color:inherit}
.card-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14px;font-weight:600;color:var(--burgundy);letter-spacing:.02em;
}
.card-more::after{content:"→";transition:transform .2s}
.card-link:hover .card-more::after{transform:translateX(4px)}

/* numbered principle list */
.tenets{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tenet{background:var(--card);padding:26px 28px;display:flex;gap:22px;align-items:flex-start}
.tenet b{
  font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1;flex:none;
  min-width:38px;
}
.tenet p{margin:0;color:var(--ink-dim);font-size:16.5px}

/* timeline */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--gold-line)}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:7px;width:15px;height:15px;
  background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 4px var(--paper);
}
.tl-item time{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:6px;
}
.tl-item h3{font-size:20px;margin-bottom:6px}
.tl-item p{color:var(--ink-dim);margin-bottom:0;font-size:16.5px}

/* info rows / definition-style facts */
.factlist{border-top:1px solid var(--line)}
.factrow{
  display:grid;grid-template-columns:230px 1fr;gap:24px;
  padding:17px 0;border-bottom:1px solid var(--line);
}
.factrow dt{font-weight:600;color:var(--burgundy);font-size:16px}
.factrow dd{margin:0;color:var(--ink-dim)}

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:16px}
th,td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line)}
thead th{
  background:var(--paper-3);color:var(--burgundy-dark);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{font-weight:700;color:var(--burgundy-dark);background:var(--paper-3)}

/* document list */
.doclist{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.doclist li{margin:0}
.doclist a{
  display:flex;align-items:center;gap:15px;padding:15px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);font-size:16px;transition:border-color .18s,background .18s,transform .18s;
}
.doclist a:hover{border-color:var(--gold);background:var(--card-lift);transform:translateX(4px);color:var(--burgundy)}
.doc-ico{
  flex:none;width:36px;height:36px;border-radius:3px;display:grid;place-items:center;
  background:var(--paper-3);color:var(--burgundy);font-size:10px;font-weight:700;letter-spacing:.05em;
  border:1px solid var(--line);
}
.doc-meta{margin-left:auto;font-size:13px;color:var(--ink-faint);white-space:nowrap}
/* On a phone the document name plus a date such as "последняя редакция
   10.11.2023" is wider than the screen, so the date drops to its own line,
   indented to line up under the title rather than under the icon. */
@media (max-width:600px){
  .doclist a{flex-wrap:wrap;row-gap:4px}
  .doc-meta{margin-left:0;white-space:normal;flex:0 0 100%;padding-left:51px}
}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:18px}
.person{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;display:flex;gap:16px;align-items:flex-start;
}
.person-avatar{
  flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--sand-soft),var(--sand));
  color:var(--burgundy);font-family:var(--serif);font-size:19px;font-weight:700;
  border:1px solid var(--gold-line);
}
.person b{display:block;font-family:var(--serif);font-size:17.5px;color:var(--burgundy-dark);line-height:1.3}
.person span{display:block;font-size:14.5px;color:var(--ink-dim);margin-top:4px}

/* news */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px}
.news-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.news-card time{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:10px;
}
.news-card h3{font-size:20px;margin-bottom:10px}
.news-card p{color:var(--ink-dim);font-size:15.5px;margin-bottom:0}

/* vacancy */
.vacancy{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:28px 30px;margin-bottom:18px;
}
.vacancy h3{font-size:21px;margin-bottom:12px}
.vacancy p{margin-bottom:.7em;color:var(--ink-dim);font-size:16.5px}
.vacancy p:last-child{margin-bottom:0}

/* callout */
.callout{
  background:linear-gradient(150deg,var(--paper-3),var(--paper-2));
  border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:28px 32px;margin:30px 0;
}
.callout p:last-child{margin-bottom:0}
.callout-title{
  display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;
  font-weight:700;color:var(--burgundy-dark);margin-bottom:10px;
}
.callout-title::before{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none}

/* bank details block */
.bank{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;font-size:16px;
}
.bank h4{font-size:16px;margin-bottom:12px;color:var(--burgundy);letter-spacing:.02em}
.bank dl{margin:0 0 18px;display:grid;gap:4px}
.bank dl:last-child{margin-bottom:0}
.bank dt{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.bank dd{margin:0 0 8px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:15.5px;color:var(--ink)}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.contact-list{display:grid;gap:2px}
.contact-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.contact-item:last-child{border-bottom:0}
.contact-ico{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-3);color:var(--burgundy);border:1px solid var(--line);
}
.contact-ico svg{width:19px;height:19px}
.contact-item b{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:3px}
.contact-item span,.contact-item a{font-size:17px;color:var(--ink)}
.contact-item a:hover{color:var(--burgundy)}
.map-embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.map-embed iframe{display:block;width:100%;height:400px;border:0;filter:saturate(.82)}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;padding:78px 0;text-align:center;
  background:linear-gradient(140deg,#4d1b1b,#722e2a 60%,#3a1315);
}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background:radial-gradient(ellipse at 50% 0%,rgba(226,199,145,.5),transparent 60%);
}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{color:#fff;font-size:clamp(27px,3.6vw,40px)}
.cta-band p{color:rgba(255,250,241,.82);max-width:640px;margin:0 auto 30px;font-size:18px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* quick links strip */
.quicklinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.quicklink{
  background:var(--card);padding:26px 24px;display:flex;flex-direction:column;gap:8px;
  color:var(--ink);transition:background .18s;
}
.quicklink:hover{background:var(--paper-2);color:var(--ink)}
.quicklink b{font-family:var(--serif);font-size:18px;color:var(--burgundy-dark)}
.quicklink span{font-size:14.5px;color:var(--ink-dim)}
.quicklink em{font-style:normal;color:var(--gold-deep);font-size:13px;font-weight:700;letter-spacing:.05em;margin-top:4px}

/* in-page section nav */
.subnav{
  position:sticky;top:72px;z-index:40;background:rgba(243,233,214,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.subnav .container{
  display:flex;gap:4px;padding-top:0;padding-bottom:0;
  overflow-x:auto;
  /* "safe" keeps the first item reachable: plain `center` would push the
     start of an overflowing row out of reach on narrow screens */
  justify-content:center;
  justify-content:safe center;
  /* the row still scrolls on small screens, but without a visible bar */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.subnav .container::-webkit-scrollbar{display:none}
.subnav a{
  padding:15px 14px;font-size:14.5px;color:var(--ink-dim);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.subnav a:hover{color:var(--burgundy)}
.subnav a.active{color:var(--burgundy);border-bottom-color:var(--gold);font-weight:600}
/* With the scrollbar hidden, a cut-off item on a phone needs some other
   sign that the row continues — hence the fade at the right edge. */
@media (max-width:760px){
  .subnav{position:sticky}
  .subnav::after{
    content:"";position:absolute;top:0;bottom:1px;right:0;width:38px;pointer-events:none;
    background:linear-gradient(90deg,rgba(243,233,214,0),var(--paper));
  }
}

/* Anchored targets sit under the fixed header — and under the sticky
   subnav on pages that have one, hence the larger offset there. */
section[id],[id].anchor-h{scroll-margin-top:100px}
body:has(.subnav) section[id]{scroll-margin-top:140px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:#3a1315;color:rgba(255,250,241,.72);padding:66px 0 0;font-size:15.5px;
  border-top:3px solid var(--gold);
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.site-footer h4{
  color:var(--sand);font-family:var(--font);font-size:12.5px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;margin-bottom:18px;
}
.site-footer a{color:rgba(255,250,241,.72)}
.site-footer a:hover{color:var(--sand)}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer-brand{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.footer-brand .brand-mark{width:52px;height:52px}
.footer-brand b{display:block;font-family:var(--serif);font-size:18px;color:#fff;line-height:1.3}
.footer-brand small{display:block;font-size:13px;color:rgba(255,250,241,.6);margin-top:5px}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(226,199,145,.28);color:var(--sand);transition:background .18s,border-color .18s;
}
.footer-social a:hover{background:rgba(226,199,145,.16);border-color:var(--sand)}
.footer-social svg{width:19px;height:19px}
.footer-bottom{
  border-top:1px solid rgba(226,199,145,.16);padding:22px 0;
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
  font-size:13.5px;color:rgba(255,250,241,.55);
}
.footer-bottom nav{display:flex;gap:22px;flex-wrap:wrap}

/* back to top */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:55;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--burgundy);color:var(--sand);
  border:1px solid var(--gold-line);box-shadow:var(--shadow);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--burgundy-dark);color:#fff}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.center{text-align:center}
.stack-lg>*+*{margin-top:58px}
.note{font-size:14.5px;color:var(--ink-faint)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Six menu items plus a language switch and a donate button is a wide row,
   and the Russian labels are the longest. Between the hamburger breakpoint
   and 1400px everything in the bar tightens so the row still fits on one
   line instead of colliding. */
@media (min-width:1280px) and (max-width:1400px){
  .nav{gap:12px}
  .nav-links>a,.nav-item>button{font-size:13.5px;padding:9px 8px}
  .nav-right{gap:8px}
  .nav-right .btn{padding:11px 16px;font-size:14px}
  .brand{gap:10px}
  .brand-copy b{font-size:15px}
}

@media (max-width:1279px){
  .nav-links{
    position:fixed;top:72px;left:0;right:0;background:#4d1b1b;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px 16px 22px;
    border-bottom:1px solid rgba(226,199,145,.2);
    max-height:calc(100vh - 72px);overflow-y:auto;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links>a,.nav-item>button{width:100%;justify-content:space-between;padding:14px 10px;font-size:16px}
  .nav-item{width:100%}
  .nav-menu{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:transparent;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0;
  }
  .nav-item.open .nav-menu{display:block}
  .nav-menu a{color:rgba(255,250,241,.78);padding:10px 12px;font-size:15px}
  .nav-menu a:hover{background:rgba(226,199,145,.12);color:var(--sand)}
  .nav-toggle{display:block}
  .subnav{top:72px}
}
@media (max-width:920px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .split-img::after{display:none}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding:62px 0}
  .cards-2,.cards-3,.cards-4{grid-template-columns:1fr}
  .factrow{grid-template-columns:1fr;gap:4px}
  .hero{padding:126px 0 72px;min-height:auto}
  .hero-frame{inset:14px}
  .hero-fact{padding:10px 20px}
  .hero-fact+.hero-fact::before{display:none}
  .hero-facts{gap:6px}
  .page-hero{padding:124px 0 48px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .brand-copy b{font-size:14px}
  .brand-copy small{font-size:8.5px;letter-spacing:.2em}
  .tenet{flex-direction:column;gap:8px}
  .prose{font-size:16.5px}
  .map-embed iframe{height:300px}
  .to-top{right:14px;bottom:14px}
}
/* The header row is brand + language + donate + menu. On phones the Russian
   label ("Пожертвовать") is the widest of the three, so everything in the
   row shrinks together rather than letting the menu button run off-screen. */
/* Up to 680px the name beside the emblem is hidden: the full name is the
   headline just below it, and at 650px the Russian one would need truncating. */
@media (max-width:680px){
  .brand-copy{display:none}
  .nav{gap:8px}
  .nav-right{gap:7px}
  /* Narrow, but not short: these are the main controls on a phone, so they
     keep a finger-sized height even though their width is squeezed. */
  .nav-right .btn{padding:12px 13px;font-size:13px;letter-spacing:0;min-height:44px}
  .lang-current{height:44px;padding:0 10px;font-size:12px;gap:4px}
  .nav-toggle{width:44px;height:44px;font-size:18px}
  .lang-menu button{padding:12px 14px}
  .brand{gap:9px}
  .brand-mark{width:40px;height:40px}
}
@media (max-width:420px){
  .hero-emblem{width:92px}
}

/* ---------- print ---------- */
@media print{
  .site-header,.subnav,.to-top,.cta-band,.hero-cta,.footer-social{display:none!important}
  body{background:#fff;font-size:12pt}
  .hero,.page-hero{background:#fff;padding:20pt 0;color:#000}
  .hero h1,.page-hero h1{color:#000;text-shadow:none}
  .reveal{opacity:1;transform:none}
}