/* ═══════════════════════════════════════════════════════════════════════
   Евангелска Црква во Македонија — ecm.mk

   One stylesheet, no preprocessor, no framework. Each numbered section's
   rules live in ONE place, desktop rules immediately followed by that
   section's own @media block. There is NO global media block — to change
   a section, edit one contiguous run of this file.

   Breakpoints: 1020px (nav → hamburger), 980px (the hero band), 760px, 520px.
   The first two used to be one number and are now two, because the nav ran
   out of room before the hero did — see §5.

    1. Design tokens
    2. Reset and base
    3. Helpers — skip link, visually-hidden, wrap, buttons
    4. Brand mark
    5. Site header, nav, language switch
    6. Hero
    7. Find a church
    8. Who we are
    9. What's coming
   10. Theological education
   11. Site footer
   12. Church page
   13. Interior pages — hero and dated spine
   14. Video (click to load)
   15. Humanitarian work — facts, deeds, bank details
   16. ETIK — the programme
   17. Publishing — the books
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ─────────────────────────────────────────────────
   Navy is the brand: #093862, sampled from the denomination's own mark.
   The neutrals are biased toward it rather than being flat greys, so the
   pale bands read as the same family as the navy ones. Brick is the only
   warm colour on the site and is spent on exactly two things: primary
   actions and section eyebrows. */
:root{
  --navy:#093862;
  --navy-2:#14497A;
  --ink:#05203A;

  --ground:#E4E8ED;
  --surface:#FCFBF9;
  --surface-2:#F1F0EC;

  --text:#12283C;
  --muted:#56687B;
  --line:rgba(9,56,98,.16);

  --brick:#9E4A2C;
  --brick-soft:#C4744F;

  --on-navy:#F0F4F8;
  --on-navy-dim:#A9BFD4;
  --rule-navy:rgba(255,255,255,.22);

  --display:"Golos Text","IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --gutter:34px;
}

/* ── 2. Reset and base ───────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brick);outline-offset:3px;border-radius:2px}

/* The browser's own `[hidden]{display:none}` is a UA rule, so ANY author rule
   that sets `display` on the same element beats it — and then toggling
   `el.hidden` in JS silently stops hiding anything. `.church{display:block}`
   did exactly that to the church filter. Declare it here, once, with
   !important, and `el.hidden` can be trusted everywhere on the site. */
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}

/* ── 3. Helpers ───────────────────────────────────────────────────────
   .visually-hidden is for text that should never be seen but must be read
   aloud. It is NOT usable for the skip link — that has to become visible
   when it receives focus, which is why the two are different rules. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--brick);color:#fff;padding:12px 20px;border-radius:2px;
  font-size:15px;font-weight:600;text-decoration:none;transition:top .16s;
}
.skip-link:focus{top:12px}

main:focus{outline:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 27px;border:1.5px solid transparent;border-radius:2px;
  font-size:15.5px;font-weight:600;text-decoration:none;
  transition:background .16s,color .16s,border-color .16s;
}
.btn-solid{background:var(--brick);color:#fff}
.btn-solid:hover{background:var(--brick-soft)}
.btn-ghost{border-color:var(--rule-navy);color:var(--on-navy)}
.btn-ghost:hover{border-color:var(--on-navy);background:rgba(255,255,255,.08)}

.section{padding:80px 0}
@media (max-width:760px){
  .section{padding:56px 0}
  :root{--gutter:22px}
}

/* ── 4. Brand mark ───────────────────────────────────────────────────
   The Е and Ц monogram. It inherits `currentColor`, so the same file
   serves navy-on-cream in the header and cream-on-navy in the hero. */
.mark{width:100%;height:100%;display:block;color:inherit}

/* ── 5. Site header, nav, language switch ────────────────────────────── */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:relative;z-index:40;
}
.header-inner{display:flex;align-items:center;gap:22px;padding:16px var(--gutter)}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);flex:none}
.brand .mark{width:36px;height:36px}
.brand-text{
  font-size:14.5px;line-height:1.26;font-weight:600;letter-spacing:.01em;color:var(--text);
}
.brand-text small{
  display:block;font-weight:400;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}

.site-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
/* 20px, not 24: with six items and nowrap, 24px put the header 5px over at
   990 and forced the hamburger in earlier than 980. Measured in Macedonian. */
.nav-list{display:flex;align-items:center;gap:18px}
.nav-list > li{display:flex;align-items:center}
.nav-list a{display:flex;align-items:center;
  font-size:14.5px;font-weight:500;text-decoration:none;color:var(--text);
  padding-bottom:3px;border-bottom:2px solid transparent;
  /* A wrapped item («Локални цркви» over two lines) makes the whole header
     taller and reads as a mistake. It would rather run out of room and let
     the breakpoint collapse it than break in half. */
  white-space:nowrap;
}
.nav-list a:hover{border-bottom-color:var(--line)}
.nav-list a.is-active{border-bottom-color:var(--brick);color:var(--navy)}

.nav-cta{
  padding:9px 18px;border:1.5px solid var(--navy);border-radius:2px;
  font-size:13.5px;font-weight:600;text-decoration:none;color:var(--navy);
  transition:background .16s,color .16s;
}
.nav-cta:hover{background:var(--navy);color:#fff}

/* The language switch shows ONLY the current language and opens to the other
   two. Three visible codes cost ~110px of header; collapsed it costs ~50, and
   that is what pays for the six nav items. It is a <details>, so it works with
   JavaScript off — and it stays OUTSIDE .site-nav (see below) so a visitor who
   landed in the wrong language can still find it on a phone. */
.lang-switch{position:relative;flex:none}
.lang-switch summary{
  display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:6px 9px;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:var(--navy);background:var(--surface-2);border-radius:2px;
}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary:hover{background:var(--ground)}
/* One caret for both header menus: the language switch and the «Активности»
   nav group. It was .lang-caret until the nav grew a second <details>. */
.caret{width:0;height:0;border-left:4px solid transparent;
       border-right:4px solid transparent;border-top:5px solid var(--muted);
       transition:transform .16s}
details[data-menu][open] > summary .caret{transform:rotate(180deg)}

/* ── The «Активности» nav group ───────────────────────────────────────
   A HEADER over the pages beneath it, not a link to a page of its own —
   there is no routes.activities. Same <details> as the language switch, so
   it works with JavaScript off; main.js only adds Escape and outside-click.
   The summary is styled to sit flush with the plain nav links beside it, so
   the caret is the only thing that says it opens. */
.nav-group{display:flex;align-items:center}
.nav-drop{position:relative}
.nav-drop > summary{
  display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:500;color:var(--text);
  padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav-drop > summary::-webkit-details-marker{display:none}
.nav-drop > summary:hover{border-bottom-color:var(--line)}
.nav-drop > summary.is-active{border-bottom-color:var(--brick);color:var(--navy)}
.nav-drop > ul{
  position:absolute;left:0;top:calc(100% + 10px);z-index:60;
  list-style:none;margin:0;padding:5px;min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 12px 26px rgba(5,32,58,.14);
}
.nav-drop > ul a{
  display:block;padding:9px 12px;border-bottom:0;border-radius:2px;
  font-size:14px;font-weight:500;color:var(--muted);white-space:normal;
}
.nav-drop > ul a:hover{color:var(--navy);background:var(--surface-2);border-bottom:0}
.nav-drop > ul a.is-active{color:var(--navy);border-bottom:0}

.lang-switch ul{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  list-style:none;margin:0;padding:4px;min-width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 12px 26px rgba(5,32,58,.14);
}
.lang{
  display:block;padding:7px 12px;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-decoration:none;border-radius:2px;color:var(--muted);
  white-space:nowrap;
}
a.lang:hover{color:var(--navy);background:var(--surface-2)}

.nav-toggle{
  display:none;width:44px;height:42px;flex:none;
  background:transparent;border:1.5px solid var(--line);border-radius:2px;
  cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle-bar{display:block;width:19px;height:2px;background:var(--navy);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 1020, up from 980 on 8 September 2026, when the owner asked for a larger
   brand lockup. That is the honest trade: the brand grew ~12px and the nav
   ~14px, which put the language switch 19px past the right edge at 981.
   The gaps were tightened first (header 28→22, nav items 20→18) to give back
   26px of it, and the breakpoint took the rest.

   The history: six nav items needed 1080; collapsing the language switch to
   one code bought ~60px and got it to 980; the bigger brand has now spent
   40 of that back. ALWAYS MEASURE IN MACEDONIAN, the widest of the three
   languages, and measure the LANGUAGE SWITCH'S RIGHT EDGE against the
   viewport — that is the thing that runs off. Nothing common sits between
   980 and 1020: iPad landscape is 1024 and clears it. */
@media (max-width:1020px){
  .header-inner{gap:14px}
  .nav-toggle{display:flex}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(5,32,58,.13);
    padding:8px var(--gutter) 20px;margin-left:0;
  }
  .site-nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list a{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-list a.is-active{border-bottom-color:var(--brick)}
  /* In the stacked menu the group is a row that opens in place — no
     absolutely-positioned panel floating over the page behind it. */
  .nav-group{display:block}
  .nav-drop{position:static}
  .nav-drop > summary{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-drop > ul{
    position:static;box-shadow:none;border:0;border-bottom:1px solid var(--line);
    margin:0;padding:2px 0 10px 16px;min-width:0;background:transparent;
  }
  .nav-drop > ul a{padding:11px 0;border-bottom:0}
  .nav-cta{align-self:flex-start;margin-top:18px;padding:12px 22px;font-size:14.5px}
  .lang-switch{margin-left:auto}
}
@media (max-width:520px){
  .brand .mark{width:32px;height:32px}
  .brand-text{font-size:13px}
  .brand-text small{font-size:10.5px;letter-spacing:.11em}
  .lang-switch summary{padding:6px 7px;font-size:12px}
  .lang{padding:6px 10px;font-size:12px}
}

/* Anything an old URL redirects INTO gets breathing room above it, so a
   visitor arriving from /activity or /events does not land with the heading
   jammed against the top of the window. */
[id]{scroll-margin-top:26px}

/* ── 6. Hero ──────────────────────────────────────────────────────────
   Deliberately image-free. The sentence is the picture. The monogram is
   set very large at low opacity as architecture, not decoration — it is
   aria-hidden and carries no meaning a screen reader needs. */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--on-navy);
  padding:96px 0 0;
}
.hero-mark{
  position:absolute;right:-88px;top:50%;transform:translateY(-50%);
  width:min(560px,52vw);aspect-ratio:1;color:#fff;opacity:.05;pointer-events:none;
}
.hero-inner{position:relative;z-index:1}

/* The eyebrow is SHARED with the interior page heroes (§13) — one rule, one
   appearance, no drift. It was a brick-coloured line of text on those pages
   until 8 Sep 2026; the owner wanted them to match the home page, which is
   pale blue text with a hairline running off it. */
.hero-kicker{display:flex;align-items:center;gap:15px;margin-bottom:32px}
.hero-kicker span{
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:var(--on-navy-dim);
}
.hero-kicker i{flex:1;max-width:120px;height:1px;background:var(--rule-navy)}

.hero-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5.6vw,68px);line-height:1.03;letter-spacing:-.033em;
  max-width:19ch;
}
.hero-title em{font-style:normal;color:var(--brick-soft)}

.hero-lede{
  margin-top:30px;font-size:16.5px;line-height:1.65;
  color:var(--on-navy-dim);max-width:52ch;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:76px;border-top:1px solid var(--rule-navy);
}
.fact{padding:26px 24px 32px 0;border-right:1px solid var(--rule-navy)}
.fact:last-child{border-right:0}
.fact:not(:first-child){padding-left:24px}
.fact dt{
  font-family:var(--display);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.fact dd{margin-top:9px;font-size:13px;line-height:1.5;color:var(--on-navy-dim)}

@media (max-width:980px){
  .hero{padding-top:64px}
  .facts{margin-top:52px}
}
@media (max-width:760px){
  .hero{padding-top:48px}
  .facts{grid-template-columns:1fr 1fr}
  .fact{border-bottom:1px solid var(--rule-navy);padding-bottom:24px}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(2n+1){padding-left:0}
  .fact:nth-child(2n){padding-left:24px}
  .fact dt{font-size:29px}
}

/* ── 7. Find a church ─────────────────────────────────────────────────
   Fully server-rendered: every church is in the HTML before any script
   runs, so the list works with JavaScript off. The search box only hides
   rows that are already there. */
.section-find{background:var(--surface);padding-bottom:92px;scroll-margin-top:24px}

.find-head{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:end;margin-bottom:16px}
.find-heading{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.4vw,38px);letter-spacing:-.028em;line-height:1.1;
}
.find-intro{margin-top:11px;color:var(--muted);font-size:15px;line-height:1.6;max-width:54ch}

.find-search{position:relative}
.find-search input{
  width:100%;padding:15px 16px 15px 45px;
  font-family:var(--body);font-size:15.5px;color:var(--text);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:2px;
}
.find-search input::placeholder{color:var(--muted)}
.find-search input:focus{border-color:var(--navy);background:var(--surface)}
.find-search svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--muted);pointer-events:none;
}

.find-count{
  margin:18px 0 28px;padding-top:16px;border-top:1.5px solid var(--line);
  font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
}

/* A church page's breadcrumb links straight at a region (/#region-southeast),
   so the group needs the same landing offset the #find section has — without
   it the region heading sits flush against the top of the viewport. */
.church-group{margin-bottom:34px;scroll-margin-top:24px}
.church-region{
  display:flex;align-items:baseline;gap:10px;margin-bottom:14px;
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:var(--brick);
}
.church-region span{
  font-size:11px;color:var(--muted);letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}

/* A RULED LIST IN COLUMNS, not a grid of boxes. The regions hold 11, 13 and
   6 churches, which will never divide evenly into a responsive column count,
   so any celled/boxed treatment leaves a bitten-out corner on the last row of
   every region. A list has no cells to leave empty: a short last row is just
   one fewer underline, which reads as a directory rather than as a mistake.
   (First attempt used 1px grid gaps over a coloured container, which was
   worse still — it painted grey blocks into the empty cells.) */
.church-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  column-gap:40px;border-top:1px solid var(--line);
}
.church{
  display:block;padding:13px 2px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--text);
}
.church b{display:block;font-size:15.5px;font-weight:500;transition:color .14s}
.church span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
a.church:hover b{color:var(--brick)}
.church.is-pending b{font-weight:400;color:var(--muted)}

.find-empty{padding:30px 0;color:var(--muted);font-size:15px}
.find-empty a{color:var(--navy)}

@media (max-width:900px){
  .find-head{grid-template-columns:1fr;gap:22px;align-items:start}
}

/* ── 8. Who we are ──────────────────────────────────────────────────── */
.section-who{background:var(--ground)}
.who-heading{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.4vw,38px);letter-spacing:-.028em;line-height:1.14;
  max-width:24ch;margin-bottom:38px;
}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.who-col h3{
  font-family:var(--display);font-weight:600;font-size:17px;
  padding-top:14px;border-top:2px solid var(--navy);margin-bottom:11px;
}
.who-col p{color:var(--muted);font-size:15px;line-height:1.7}
/* Where a column has a page of its own, the text stops and hands over. */
.who-more{
  display:inline-block;margin-top:12px;font-size:14px;font-weight:600;
  color:var(--brick);text-decoration:none;
  border-bottom:1.5px solid var(--brick);padding-bottom:1px;
}
.who-more:hover{color:var(--ink);border-bottom-color:var(--ink)}
.who-col p + p{margin-top:12px}
@media (max-width:900px){
  .who-grid{grid-template-columns:1fr;gap:28px}
}

/* ── 9. What's coming ───────────────────────────────────────────────── */
.section-agenda{background:var(--surface)}
.agenda-heading{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.4vw,38px);letter-spacing:-.028em;
}
/* Says what KIND of events these are. The old /events page's own title
   («Настани од национален карактер») carried that and «Што следи» does not
   — and this block is where /events now lands. */
.agenda-intro{margin-top:12px;margin-bottom:30px;color:var(--muted);
              font-size:15.5px;line-height:1.65;max-width:60ch}
.agenda-row{
  display:grid;grid-template-columns:100px 1fr 200px;gap:28px;
  padding:24px 0;border-top:1px solid var(--line);align-items:baseline;
}
.agenda-row:last-child{border-bottom:1px solid var(--line)}
.agenda-when b{
  display:block;font-family:var(--display);font-weight:700;font-size:16px;
  line-height:1.2;color:var(--navy);font-variant-numeric:tabular-nums;
}
.agenda-when small{
  display:block;margin-top:3px;font-size:11.5px;font-weight:500;
  letter-spacing:.09em;color:var(--muted);
}
.agenda-what h3{font-size:17.5px;font-weight:600;margin-bottom:7px}
.agenda-what p{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:58ch}
.agenda-where{font-size:13.5px;color:var(--muted)}
@media (max-width:760px){
  .agenda-row{grid-template-columns:1fr;gap:8px}
  .agenda-when{display:flex;align-items:baseline;gap:9px}
  .agenda-when small{margin-top:0}
}

/* ── 10. Theological education ──────────────────────────────────────── */
.section-edu{background:var(--ground)}
.edu-heading{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.4vw,38px);letter-spacing:-.028em;margin-bottom:30px;
}
.edu-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.edu-card{background:var(--surface);padding:34px 32px 36px;display:flex;flex-direction:column}
.edu-kicker{
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:var(--brick);
}
.edu-card h3{
  font-family:var(--display);font-weight:700;font-size:25px;
  letter-spacing:-.02em;margin:12px 0;
}
.edu-body{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:20px;flex:1}
.edu-link{
  align-self:flex-start;font-size:14.5px;font-weight:600;text-decoration:none;
  color:var(--navy);border-bottom:1.5px solid var(--navy);padding-bottom:2px;
}
.edu-link:hover{color:var(--brick);border-bottom-color:var(--brick)}
@media (max-width:760px){
  .edu-grid{grid-template-columns:1fr}
  .edu-card{padding:28px 24px 30px}
}

/* ── 11. Site footer ────────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:var(--on-navy);padding:70px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:46px}
.footer-col h2{
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:var(--on-navy-dim);margin-bottom:17px;
}
.footer-col li{margin-bottom:9px}
.footer-col a{color:var(--on-navy);text-decoration:none;border-bottom:1px solid transparent}
.footer-col a:hover{border-bottom-color:var(--on-navy)}
.footer-address,.footer-reach{font-size:15px;line-height:1.7}
.footer-reach{margin-top:15px}
.footer-reach a{border-bottom:1px solid var(--rule-navy)}
.footer-note{display:block;margin-top:2px;font-size:12px;color:var(--on-navy-dim)}

.footer-foot{
  margin-top:54px;padding-top:20px;border-top:1px solid var(--rule-navy);
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px 26px;flex-wrap:wrap;font-size:12.5px;color:var(--on-navy-dim);
}
.footer-foot a{color:var(--on-navy-dim);text-decoration:none;border-bottom:1px solid var(--rule-navy)}
.footer-foot a:hover{color:var(--on-navy)}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .site-footer{padding-top:54px}
}

/* ── 12. Church page ──────────────────────────────────────────────────
   Order is FIXED for every church, because the pastors' objection was
   that it wasn't: photo + practical details → about → pastor → history
   → vision → town → gallery → nearby. Any block a church has no copy
   for disappears; the sequence of the rest never changes. */
.hero--church{padding:30px 0 74px}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:30px;
       font-size:12.5px;color:var(--on-navy-dim)}
.crumb a{color:var(--on-navy-dim);text-decoration:none;border-bottom:1px solid var(--rule-navy)}
.crumb a:hover{color:var(--on-navy)}

.church-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:56px;align-items:start}
.church-title{font-family:var(--display);font-weight:800;
              font-size:clamp(30px,4.3vw,50px);line-height:1.04;letter-spacing:-.03em}
.church-place{margin-top:12px;font-size:12px;letter-spacing:.19em;text-transform:uppercase;
              font-weight:600;color:var(--brick-soft)}

/* The practical details live IN the hero rather than in a band beneath
   it. They fill the navy the title alone left empty, they are the first
   thing a visitor reads, and the phone numbers are live links here — so
   there is no need for a "call us" button repeating them. */
.church-facts{display:grid;grid-template-columns:1fr 1fr;gap:34px;
              margin-top:34px;padding-top:28px;border-top:1px solid var(--rule-navy)}
.facts-col{min-width:0}
.facts-group + .facts-group{margin-top:26px}
.church-facts h2{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
                 font-weight:600;color:var(--brick-soft);margin-bottom:12px}
.times{display:flex;flex-direction:column;gap:11px}
.time dt{font-size:15px;font-weight:600;line-height:1.35;color:var(--on-navy)}
.time dd{margin-top:2px;font-size:14.5px;color:var(--on-navy-dim);
         font-variant-numeric:tabular-nums}
.facts-note{font-size:14px;line-height:1.65;color:var(--on-navy-dim);max-width:44ch}
.church-facts address{font-style:normal;font-size:15px;line-height:1.6;color:var(--on-navy)}
.facts-contact li{margin-bottom:7px;font-size:15px;line-height:1.5;color:var(--on-navy)}
.facts-contact a{color:var(--on-navy);text-decoration:none;
                 border-bottom:1px solid var(--rule-navy);font-weight:500}
.facts-contact a:hover{border-bottom-color:var(--on-navy)}
.facts-contact span{color:var(--on-navy-dim);font-size:12.5px}

/* CONTAINED, never edge to edge. The frame is a fixed 3:2 whatever shape
   the source photo is, and a hairline offset behind it does the work a
   good photograph would otherwise have to do on its own. */
.church-photo{margin:0;position:relative}
.church-photo::after{content:"";position:absolute;inset:20px -20px -20px 20px;
                     border:1px solid var(--rule-navy);z-index:0}
.church-photo img{position:relative;z-index:1;width:100%;aspect-ratio:3/2;
                  object-fit:cover;background:var(--ink)}
@media (max-width:1040px){
  .church-hero-grid{grid-template-columns:minmax(0,1fr) 360px;gap:38px}
  .church-facts{grid-template-columns:1fr;gap:26px}
}
@media (max-width:860px){
  .church-hero-grid{grid-template-columns:1fr;gap:36px}
  .church-photo{max-width:520px;order:-1}
  .church-facts{grid-template-columns:1fr 1fr}
  .hero--church{padding-bottom:54px}
}
@media (max-width:560px){.church-facts{grid-template-columns:1fr}}

/* Long-form runs as a measured column with the block name in the left
   margin, so a church with five blocks and one with two read as the same
   page rather than as a full page and a stub. */
.section-story{background:var(--surface)}
.story-wrap{display:flex;flex-direction:column;gap:38px}
.story-block{display:grid;grid-template-columns:190px minmax(0,1fr);gap:38px;
             padding-top:26px;border-top:1px solid var(--line)}
.story-block:first-child{padding-top:0;border-top:0}
.story-block h2{font-family:var(--display);font-weight:700;font-size:17px;
                letter-spacing:-.018em;color:var(--navy);align-self:start}
.story-body{max-width:66ch}
.story-name{font-size:15.5px;font-weight:600;color:var(--text);margin-bottom:10px}
.story-body p{color:var(--muted);font-size:15.5px;line-height:1.75}
.story-body p + p{margin-top:13px}
/* The town description is background, not church copy — set back a step
   so it cannot be mistaken for what the congregation says of itself. */
.story-block--town .story-body p{font-size:14.5px}
@media (max-width:820px){
  .story-block{grid-template-columns:1fr;gap:12px;padding-top:22px}
  .story-wrap{gap:28px}
}

/* ── Gallery: a filmstrip, not a grid of squares ─────────────────────
   The photographs are every shape and every quality. Cropping them to a
   uniform square throws away the only thing that varies interestingly
   about them and still leaves ragged holes at the end of a row. Locking
   the HEIGHT instead lets each picture keep its own proportions — the
   panorama runs long, the snapshot runs short — so the differing shapes
   become the rhythm of the strip. It also cannot leave an empty cell,
   whether a church has one photograph or a dozen. */
.section-gallery{background:var(--ground)}
.gallery-heading{font-family:var(--display);font-weight:700;
                 font-size:clamp(22px,2.6vw,28px);letter-spacing:-.024em;margin-bottom:20px}
.gallery{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;
         scroll-snap-type:x proximity;
         scrollbar-color:rgba(9,56,98,.4) transparent;scrollbar-width:thin}
.gallery li{flex:none;scroll-snap-align:start}
.gallery a{display:block;position:relative;height:250px;overflow:hidden;
           background:var(--ink);text-decoration:none}
.gallery img{height:100%;width:auto;max-width:none;display:block;
             filter:saturate(.72) brightness(.93);
             transition:filter .4s ease,transform .6s ease}
.gallery a:hover img,.gallery a:focus-visible img{filter:none;transform:scale(1.035)}
.gallery-cap{position:absolute;left:0;right:0;bottom:0;
             padding:30px 14px 12px;color:#fff;font-size:12.5px;line-height:1.4;
             background:linear-gradient(rgba(4,17,32,0),rgba(4,17,32,.9));
             opacity:0;transform:translateY(8px);
             transition:opacity .3s ease,transform .3s ease}
.gallery a:hover .gallery-cap,.gallery a:focus-visible .gallery-cap{opacity:1;transform:none}
@media (max-width:760px){.gallery a{height:200px}}

.lightbox{border:0;padding:0;background:transparent;position:relative;
          max-width:min(1100px,92vw);max-height:92vh}
.lightbox::backdrop{background:rgba(4,17,32,.88)}
.lightbox img{max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto;
              background:var(--ink)}
.lightbox-caption{margin-top:12px;text-align:center;font-size:13.5px;color:var(--on-navy-dim)}
/* Inside the dialog, over the picture — positioned above it, this sat
   off-screen whenever the image was tall. */
.lightbox-close{position:absolute;top:10px;right:10px;z-index:2;
                width:40px;height:40px;display:flex;align-items:center;justify-content:center;
                background:rgba(4,17,32,.72);border:1px solid rgba(255,255,255,.28);
                border-radius:2px;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0}
.lightbox-close:hover{background:rgba(4,17,32,.92)}

.section-nearby{background:var(--surface)}
.nearby-heading{font-family:var(--display);font-weight:700;
                font-size:clamp(22px,2.6vw,28px);letter-spacing:-.024em;margin-bottom:22px}
.nearby-all{margin-top:26px}

/* ── 13. Interior pages — hero and dated spine ────────────────────────
   Shared by /istorija and /rakovodstvo, and by whatever comes next. Two
   devices, used twice, rather than a new idea per page.

   A DATED SPINE. The history really is a chronology — 1988, 1991, 1994,
   2020 — so the years are the structure instead of being buried in the
   middle of sentences. The leadership page reuses it for the succession
   of presidents. The year sits in the left margin in exactly the place a
   church page puts «За црквата» / «За пасторот», which is why the page
   types read as one site rather than three ideas.

   The hero carries ONE contained photograph, never edge to edge: a scan
   of a 1990s snapshot is a deliberate object at this size and a bad
   backdrop at full width. Same frame-and-hairline treatment as §12.  */
.page-hero{background:var(--ink);color:var(--on-navy);padding:76px 0 72px}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;
                gap:56px;align-items:center}
/* The key words of an interior page's heading, the way the home page marks
   «Христос»: one phrase per page and never more — «триесет цркви»,
   «пастори», «Верување». Two accents in one heading is no accent at all. */
.page-hero h1 em{font-style:normal;color:var(--brick-soft)}
.page-hero h1{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
              font-size:clamp(34px,4.6vw,54px);line-height:1.08;max-width:15ch;margin:0}
.page-standfirst{margin:24px 0 0;max-width:48ch;font-size:17px;line-height:1.6;
                 color:var(--on-navy-dim)}
.page-photo{margin:0;position:relative}
.page-photo::after{content:"";position:absolute;inset:20px -20px -20px 20px;
                   border:1px solid var(--rule-navy);z-index:0}
.page-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;
                object-fit:cover;background:var(--ink);display:block}
/* A single-person portrait does not survive a landscape frame — the crop
   either loses the head or the shoulders. /rakovodstvo uses 4:5. */
.page-photo--portrait img{aspect-ratio:4/5}
.page-photo--portrait{max-width:300px;margin-left:auto}
/* A BUILDING shot from below is the same problem at a different size: at 4:3
   the crop loses the cross on the roof or the entrance, and at 300px the
   façade stops being readable. /etik uses 4:5 at 360. */
.page-photo--tall img{aspect-ratio:4/5}
.page-photo--tall{max-width:360px;margin-left:auto}
/* THREE faces stacked up a tall frame need a taller one again. Every ratio in
   this section was chosen by looking at the one photograph it carries, which
   is the practice on this site, not a preference: on /doniraj 4:5 cuts the
   woman in glasses through the mouth and 3:4 drops the AGAPE lettering the
   picture is FOR. */
.page-photo--group img{aspect-ratio:2/3}
.page-photo--group{max-width:320px;margin-left:auto}
/* A BOOK COVER is not cropped — ever. It is a fixed object whose title runs
   to its own edges, and the thirteen covers on /izdavastvo are not even all
   the same shape. So this is the one hero that imposes no ratio at all and
   lets the image be what it is. */
.page-photo--book img{aspect-ratio:auto;height:auto}
.page-photo--book{max-width:270px;margin-left:auto}
.page-photo figcaption{position:relative;z-index:1;margin-top:14px;
                       font-size:12.5px;line-height:1.5;color:var(--on-navy-dim)}

.page-body{background:var(--surface);padding:12px 0 96px}
.spine-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 44px;
          padding:44px 0;border-top:1px solid var(--line)}
.spine-row:first-child{border-top:0}
/* Sticky so the date stays beside its own paragraphs on a long block. */
.spine-year{font-family:var(--display);font-weight:600;font-size:26px;
           color:var(--brick);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
           position:sticky;top:24px;align-self:start}
/* The closing block is thematic, not dated — set back so it does not
   pretend to be another year on the timeline. */
.spine-row--nodate .spine-year{font-size:11.5px;letter-spacing:.17em;
                             text-transform:uppercase;color:var(--muted);
                             font-weight:600;padding-top:8px}
.spine-row h2:not(.spine-year):not(.spine-topic){font-family:var(--display);font-weight:600;
             font-size:21px;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px}
/* On /rakovodstvo the margin label IS the heading — «Претседател»,
   «Извршен тим» — so it is an <h2> carrying .spine-year. It must keep the
   label styling, not the era-heading styling. */
h2.spine-year{margin:0}
.spine-row p{margin:0 0 15px;max-width:68ch;font-size:16.5px;line-height:1.72;
            color:var(--text)}
.spine-row p:last-child{margin-bottom:0}

@media (max-width:1040px){
  .page-hero-grid{grid-template-columns:minmax(0,1fr) 330px;gap:40px}
}
@media (max-width:760px){
  .page-hero{padding:56px 0 60px}
  .page-hero-grid{grid-template-columns:1fr;gap:36px}
  .page-photo{max-width:520px}
  .spine-row{grid-template-columns:1fr;gap:0;padding:32px 0}
  .spine-year{position:static;margin-bottom:10px;font-size:22px}
}

/* /404's one row: a solid button beside a text link. .btn-ghost is drawn for
   a dark band and would all but vanish here, so the secondary action is the
   interior pages' own .page-link instead of a second button. */
.notfound-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin:0}
.notfound-actions .page-link{margin-top:0}

/* The date a page was last revised, at the foot of the body. Only /privatnost
   uses it — a privacy notice with no date is a privacy notice nobody can tell
   is current. It sits outside the spine, so it aligns with the margin column
   rather than with the prose. */
.page-updated{margin:34px 0 0;font-size:12.5px;letter-spacing:.04em;
              color:var(--muted);border-top:1px solid var(--line);padding-top:18px}

/* Interior-page link out of a block — brick, underlined, same weight as
   the "more" link on the home page. */
.page-link{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;
           color:var(--brick);text-decoration:none;
           border-bottom:1.5px solid var(--brick);padding-bottom:1px}
.page-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* The succession: a year and a sentence, tabular so the dates line up. */
.succession p{display:grid;grid-template-columns:74px minmax(0,1fr);gap:0 16px;
              margin:0 0 12px;max-width:64ch;font-size:16.5px;line-height:1.72;
              color:var(--text)}
.succession p b{font-weight:600;color:var(--brick);font-variant-numeric:tabular-nums}

/* Denomination contact, as the last row of the spine. Two columns on a
   wide screen so four short entries do not read as a long thin list. */
.contact-list{list-style:none;margin:0;padding:0;
              display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
              gap:22px 44px;max-width:56ch}
.contact-list li{font-size:16px;line-height:1.55;color:var(--text)}
.contact-list li span{display:block;font-size:11.5px;letter-spacing:.14em;
                      text-transform:uppercase;font-weight:600;
                      color:var(--muted);margin-bottom:5px}
.contact-list a{color:var(--ink);text-decoration:none;font-weight:500;
                border-bottom:1px solid var(--line)}
.contact-list a:hover{border-bottom-color:var(--ink)}
@media (max-width:760px){
  .succession p{grid-template-columns:60px minmax(0,1fr)}
  .contact-list{grid-template-columns:1fr;gap:18px}
  .page-photo--portrait{max-width:300px;margin-left:0}
}

/* The margin of a /veruvanje row: the article number, with a topic label
   under it. The NUMBER is the church's own — it is how the statement of
   faith is written and cited — so it keeps the weight the year has on
   /istorija. The topic is ours and sits back accordingly. */
.spine-label{position:sticky;top:24px;align-self:start}
.spine-num{display:block;font-family:var(--display);font-weight:600;font-size:26px;
           color:var(--brick);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
           line-height:1}
.spine-topic{margin:8px 0 0;font-family:var(--body);font-size:11.5px;
             letter-spacing:.17em;text-transform:uppercase;font-weight:600;
             color:var(--muted);line-height:1.4}
/* Every article is linkable — /veruvanje#a15 — so it needs the landing
   offset the region anchors on the home page have. */
.spine-row[id]{scroll-margin-top:24px}

/* A heading that is a whole sentence, not a phrase: the belief page uses the
   church's own long title rather than one invented here, so it needs a step
   down in size and a wider measure than the other interior heroes. */
.page-hero h1.hero-h1--long{font-size:clamp(28px,3.4vw,40px);max-width:22ch}

@media (max-width:760px){
  .spine-label{position:static;margin-bottom:12px}
  .spine-num{display:inline-block;margin-right:12px;font-size:22px}
  .spine-topic{display:inline-block;margin:0}
}

/* ── 14. Video (click to load) ────────────────────────────────────────
   Closes /veruvanje. The poster is served from ecm.mk and the YouTube
   iframe is only inserted on click — see js/main.js for why. The frame
   holds a 16:9 box either way, so nothing jumps when the swap happens. */
/* --ground, the same light blue as «Кој сме ние», the education strip and
   the church galleries. It was ink first and ran straight into the ink
   footer as one dark mass; navy separated them but read as a stray colour
   the site uses nowhere else. A light band is what the rest of the site
   does, and it lets the poster be the only dark thing here. */
.section-video{background:var(--ground);color:var(--text);padding:80px 0}
.video-heading{font-family:var(--display);font-weight:600;
               font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;
               color:var(--ink);margin:0 0 26px}
.video-frame{position:relative;max-width:840px;aspect-ratio:16/9;
             background:var(--ink);overflow:hidden}
.video-frame img,.video-frame iframe{position:absolute;inset:0;
             width:100%;height:100%;display:block;border:0}
.video-frame img{object-fit:cover}
.video-play{position:absolute;inset:0;width:100%;height:100%;
            display:flex;flex-direction:column;align-items:center;
            justify-content:center;gap:14px;
            background:rgba(5,32,58,.46);border:0;cursor:pointer;
            color:var(--on-navy);font-family:var(--body);font-size:14px;
            font-weight:600;letter-spacing:.03em}
.video-play:hover{background:rgba(5,32,58,.26)}
.video-play-icon{width:64px;height:64px;border-radius:50%;
                 background:var(--brick);position:relative;display:block}
.video-play-icon::after{content:"";position:absolute;top:50%;left:53%;
                 transform:translate(-50%,-50%);
                 border-left:19px solid var(--on-navy);
                 border-top:12px solid transparent;
                 border-bottom:12px solid transparent}
.video-play:hover .video-play-icon{background:var(--brick-soft)}
.video-body{max-width:56ch;margin:26px 0 0;font-size:16.5px;line-height:1.7;
            color:var(--text)}
.video-body a{color:var(--ink);text-decoration:none;font-weight:500;
              border-bottom:1px solid var(--line)}
.video-body a:hover{border-bottom-color:var(--ink)}
@media (max-width:760px){
  .section-video{padding:56px 0}
  .video-play-icon{width:52px;height:52px}
  .video-play-icon::after{border-left-width:16px;border-top-width:10px;
                          border-bottom-width:10px}
}

/* ── 15. Humanitarian work — facts, deeds, bank details ───────────────
   /humanitarna-dejnost adds four small pieces INSIDE §13's spine rather
   than a page layout of its own: an inline photograph, a facts block
   (opening hours), a list of deeds, and bank details. Nothing here is
   specific to this page — the next page that needs a set of numbers
   somebody will copy should reuse .give rather than restyle a table. */

/* An inline photograph inside a spine row. Contained, like every other
   photograph on this site — §13's standing constraint, not a one-off. */
.spine-figure{margin:22px 0 0;max-width:640px}
.spine-figure img{display:block;width:100%;height:auto;
                  border:1px solid var(--line);background:var(--surface-2)}

/* A short set of facts: the Negotino centre's opening hours. On the old
   site these existed ONLY as Macedonian text burnt into a JPEG, which is
   unreadable in the other two languages and to a search engine. */
.deed-facts{margin-top:24px}
.deed-facts h3,
.give-heading{font-family:var(--body);font-size:11.5px;letter-spacing:.17em;
              text-transform:uppercase;font-weight:600;color:var(--muted);
              margin:0 0 12px}
.deed-facts dl{margin:0;display:grid;gap:6px 28px;
               grid-template-columns:repeat(auto-fit,minmax(200px,max-content))}
.deed-facts dl > div{display:flex;gap:14px;align-items:baseline;
                     border-top:1px solid var(--line);padding-top:8px}
.deed-facts dt{font-size:15.5px;color:var(--muted);min-width:78px}
.deed-facts dd{margin:0;font-size:15.5px;font-weight:600;color:var(--ink);
               font-variant-numeric:tabular-nums}

/* Nineteen things one congregation actually did. Two columns on a wide
   screen — as one column it runs past the fold and reads as a wall. */
.deed-list{margin:18px 0 0;padding:0;list-style:none;
           columns:2;column-gap:44px;max-width:900px}
.deed-list li{break-inside:avoid;margin:0 0 11px;padding-left:16px;
              position:relative;font-size:15.5px;line-height:1.6;color:var(--text)}
.deed-list li::before{content:"";position:absolute;left:0;top:11px;
                      width:7px;height:1px;background:var(--brick)}

/* §13's `.spine-row p{margin:0 0 15px}` is (0,0,1,1) and would otherwise beat
   a plain `.deed-contact`, silently killing the margin above this block — it
   did, and the contact line sat flush against the hours. Any later rule that
   sets margins on a <p> inside a spine row needs the same specificity. */
.spine-row p.deed-contact{margin:24px 0 0;font-size:16px;line-height:1.6}
.deed-contact b{display:block;font-family:var(--body);font-size:11.5px;
                letter-spacing:.17em;text-transform:uppercase;font-weight:600;
                color:var(--muted);margin-bottom:6px}
.deed-contact a{color:var(--ink);text-decoration:none;font-weight:500;
                border-bottom:1px solid var(--line)}
.deed-contact a:hover{border-bottom-color:var(--ink)}

/* Bank details. Somebody is going to copy an IBAN out of this into a
   transfer form, so every value is selectable text — never an image — and
   set in tabular figures so a mistyped digit is visible. */
.give{margin-top:30px}
.give-card{border:1px solid var(--line);background:var(--surface-2);
           padding:20px 22px;margin-bottom:14px;max-width:560px}
.give-card:last-child{margin-bottom:0}
/* A "read next" link under a set of accounts needs more air than it does
   under a paragraph — .page-link's own 14px sat it against the card. */
.give + .page-link{margin-top:22px}
.give-card h4{font-family:var(--display);font-weight:600;font-size:16px;
              color:var(--ink);margin:0 0 14px;letter-spacing:-.005em}
.give-card dl{margin:0}
.give-card dl > div{display:grid;grid-template-columns:118px minmax(0,1fr);
                    gap:4px 18px;padding:7px 0;border-top:1px solid var(--line)}
.give-card dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
              font-weight:600;color:var(--muted);padding-top:3px}
.give-card dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink);
              font-variant-numeric:tabular-nums;word-break:break-word}

@media (max-width:760px){
  .deed-list{columns:1}
  .give-card dl > div{grid-template-columns:1fr}
  .give-card dt{padding-top:0}
  .deed-facts dl{grid-template-columns:1fr}
}

/* ── 16. ETIK — the programme ─────────────────────────────────────────
   The only curriculum on this site: 43 subjects over four years, inside one
   §13 spine row. The subject NUMBERS are the institute's own and run
   continuously across the years, so they come from `<ol start>` rather than
   from a counter that restarts — and they are set in brick and tabular
   figures, because on this page the number is how a subject is referred to,
   exactly as the article number is on /veruvanje. */
.years{display:grid;gap:30px}
.year h3{font-family:var(--display);font-weight:600;font-size:17px;
         color:var(--ink);margin:0 0 12px;letter-spacing:-.005em}
.year h3 span{display:block;margin-top:4px;font-family:var(--body);
              font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
              font-weight:600;color:var(--muted)}
.subjects{margin:0;padding:0 0 0 2.4em;columns:2;column-gap:44px;max-width:860px}
.subjects li{break-inside:avoid;margin:0 0 8px;padding-left:4px;
             font-size:15.5px;line-height:1.55;color:var(--text)}
.subjects li::marker{color:var(--brick);font-weight:600;
                     font-variant-numeric:tabular-nums}

/* The three entry requirements. Numbered because the institute numbers them,
   but they are sentences, not a list of names — one column, wider measure. */
.entry-list{margin:0 0 18px;padding:0 0 0 1.5em;max-width:64ch}
.entry-list li{margin:0 0 10px;font-size:16.5px;line-height:1.7;color:var(--text)}
.entry-list li::marker{color:var(--brick);font-weight:600}

/* A portrait BESIDE the prose rather than under it. A person is a tall,
   narrow subject: stacked below two short paragraphs it left a hole in the
   row, and the eye had to travel past the text to reach it. The photo stays
   on the right, the side the hero photograph is on.

   Only a section that HAS a photo gets .spine-media, so this cannot change
   the flow of the sections that do not — and /humanitarna-dejnost's wide
   landscape banner is not in a .spine-media, so it still sits under its
   text where a 2.5:1 image belongs. */
.spine-media{display:grid;grid-template-columns:minmax(0,1fr) 220px;
             gap:0 36px;align-items:start;
             /* The pair ENDS where the prose ends. Left to fill the column it
                ran 256px past the right edge of every other paragraph on the
                page and the portrait read as detached from the text it
                belongs to. `ch` here is the same measure `.spine-row p` uses,
                and the font-size is restated so the two resolve to the same
                width — change one and change the other. */
             font-size:16.5px;max-width:68ch}
.spine-media .spine-figure{margin-top:5px}

/* A portrait inside a spine row — smaller than the 640px .spine-figure a
   landscape photograph gets, for the same reason .page-photo--portrait is
   narrow: a person does not need the full measure. */
.spine-figure--portrait{max-width:260px}
.spine-figure--portrait img{aspect-ratio:4/5;object-fit:cover}
.spine-figure figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;
                         color:var(--muted)}

@media (max-width:760px){
  .subjects{columns:1}
  .years{gap:26px}
  /* The row is already one column wide here; the photo goes back under. */
  .spine-media{grid-template-columns:1fr}
  .spine-media .spine-figure{margin-top:22px}
}

/* ── 17. Publishing — the books ───────────────────────────────────────
   Two treatments were built for the owner to choose between, the way the
   home page and /istorija were. Option А put the cover in §13's spine margin
   and its rules were DELETED when option Б won on 8 September 2026 — a
   rejected variant left in the stylesheet is a rejected variant somebody
   revives by accident. */

/* Shared: the parts of a book entry that are the same either way. */
.book-author{margin:-6px 0 16px;font-size:14px;letter-spacing:.06em;
             text-transform:uppercase;font-weight:600;color:var(--muted)}
.book-tags{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
           margin:18px 0 0;font-size:13px;color:var(--muted)}
.book-free{font-weight:700;letter-spacing:.1em;text-transform:uppercase;
           font-size:12px;color:var(--brick)}
.book-entry p.book-order{margin:14px 0 0;font-size:14.5px;line-height:1.6;
                         color:var(--text);padding-top:13px;
                         border-top:1px solid var(--line);max-width:56ch}
.book-order b{display:block;font-size:11.5px;letter-spacing:.15em;
              text-transform:uppercase;font-weight:600;color:var(--muted);
              margin-bottom:5px}
.book-order a{color:var(--ink);text-decoration:none;font-weight:500;
              border-bottom:1px solid var(--line);white-space:nowrap}
.book-order a:hover{border-bottom-color:var(--ink)}
/* A cover is a photographed paperback, not artwork on a white ground — it
   needs an edge or it floats. */
.book-entry figure img,.shelf img{
  display:block;width:100%;height:auto;border:1px solid var(--line);
  background:var(--surface-2)}

.section-shelf{background:var(--ground);padding:44px 0}
.shelf{list-style:none;margin:0;padding:0;display:grid;gap:20px;
       grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.shelf a{display:block;transition:transform .16s}
.shelf a:hover{transform:translateY(-4px)}
.book-entry{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 48px;
            padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.book-entry:first-child{border-top:0}
.book-entry figure{margin:6px 0 0;position:sticky;top:24px}
.book-entry h2{font-family:var(--display);font-weight:600;font-size:27px;
               letter-spacing:-.018em;color:var(--ink);margin:0 0 12px}
.book-entry p{margin:0 0 15px;max-width:64ch;font-size:16.5px;line-height:1.72;
              color:var(--text)}

@media (max-width:760px){
  .book-entry figure{position:static;max-width:190px;margin-bottom:22px}
  .book-entry{grid-template-columns:1fr;gap:0;padding:34px 0}
  .book-entry h2{font-size:23px}
  .shelf{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px}
}