:root{
  --bg:#FFF9ED;
  --surface:#FFFFFF;
  --border:#D7DEE5;
  --ink:#17212B;
  --ink-muted:#5C6670;
  --accent:#0B3157;
  --accent-soft:#E4EAF1;
  --gold:#F2B632;
  --gold-soft:#FCEFD1;
  --gold-ink:#8F5A05; /* darker gold for text — #F2B632 fails contrast on light backgrounds */

  /* spacing scale */
  --sp-1:0.5rem;
  --sp-2:0.75rem;
  --sp-3:1.25rem;
  --sp-4:2rem;
  --sp-5:3rem;
  --sp-6:4.5rem;

  /* modern shape & depth scale */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(27,36,48,0.05), 0 1px 1px rgba(27,36,48,0.04);
  --shadow-md:0 10px 24px -10px rgba(27,36,48,0.20);
  --shadow-lg:0 24px 48px -16px rgba(27,36,48,0.24);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* skip link: hidden until keyboard-focused, first focusable element on every page */
.skip-link{
  position:absolute; left:1rem; top:-3rem; z-index:100;
  background:var(--accent); color:#fff; text-decoration:none;
  padding:0.6rem 1rem; border-radius:var(--radius-sm); font-weight:700; font-size:0.9rem;
  transition:top 0.15s ease;
}
.skip-link:focus{ top:1rem; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope', Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:'Lora', Georgia, serif; font-weight:700; margin:0; text-wrap:balance; letter-spacing:-0.01em; }
a{ color:var(--accent); text-underline-offset:0.15em; text-decoration-thickness:1px; }
a:hover{ color:#153a68; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.wrap{ max-width:1100px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
  a, .card, .album-card, .tile, .tile-icon, .nav-toggle span, nav.main a, .footer-col a{ transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease; }
}

/* draft banner */
.draft-banner{
  background:var(--gold-soft); color:var(--ink); text-align:center;
  font-size:0.82rem; padding:0.5rem 1rem; border-bottom:1px solid var(--gold);
}
.draft-banner b{ color:var(--gold); }

/* header / nav */
header.site{
  background:rgba(255,255,255,0.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow-sm);
}
.top-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.brand{ display:flex; align-items:center; gap:0.85rem; text-decoration:none; }
.crest-svg{ flex-shrink:0; display:block; }
.brand-text{ font-family:'Lora', serif; font-weight:700; font-size:1.08rem; line-height:1.25; color:var(--ink); }
.brand-text span{ display:block; font-family:'Manrope',sans-serif; font-weight:400; font-size:0.78rem; color:var(--ink-muted); margin-top:0.15rem; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle:hover{ background:var(--accent-soft); border-color:var(--accent); }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:1px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

nav.main{ border-top:1px solid var(--border); }
nav.main ul{ list-style:none; margin:0; padding:0.35rem 0; display:flex; gap:0.3rem; flex-wrap:wrap; font-size:0.88rem; }
nav.main a{
  display:inline-block; padding:0.62rem 0.95rem; text-decoration:none; color:var(--ink);
  font-weight:700; border-radius:999px;
}
nav.main a:hover{ color:var(--accent); background:var(--accent-soft); }
nav.main a.active{ color:#fff; background:var(--accent); }

/* hero */
.hero{
  padding:var(--sp-6) 0 var(--sp-5);
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 420px at 12% -15%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 340px at 105% 0%, var(--gold-soft), transparent 58%),
    var(--bg);
}
.hero--page{ padding:var(--sp-5) 0 var(--sp-4); }
.hero .eyebrow{
  display:inline-block; padding:0.35em 0.95em; border-radius:999px;
  background:var(--gold-soft); font-size:0.78rem; letter-spacing:0.05em; color:var(--gold-ink); font-weight:700;
  text-transform:uppercase; margin-bottom:0.9rem;
}
.hero h1{ font-size:clamp(1.95rem, 3.8vw, 2.7rem); max-width:24ch; line-height:1.2; position:relative; }
.hero h1 .hero-title-sub{ display:block; font-weight:400; font-size:0.52em; color:var(--ink-muted); margin-top:0.35rem; }
.hero .quote{ margin-top:1.1rem; color:var(--ink-muted); font-size:1.05rem; font-style:italic; max-width:50ch; position:relative; }
.hero p.lede{ margin-top:1.1rem; color:var(--ink-muted); max-width:62ch; position:relative; }

/* homepage hero: photo banner + big emblem, everyone else keeps the plain gradient */
.hero-content{ position:relative; z-index:2; max-width:34rem; }
.hero-actions{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:1.5rem; position:relative; z-index:2; }
.btn-row{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:1rem; }
.btn{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.75rem 1.4rem; border-radius:999px; font-weight:700; font-size:0.92rem;
  text-decoration:none; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:#06213D; color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline{ background:var(--surface); color:var(--accent); border:1.5px solid var(--border); }
.btn-outline:hover{ border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }

.hero-emblem{ display:none; }
@media (min-width:760px){
  .hero--home{
    background:
      linear-gradient(100deg, var(--bg) 0%, var(--bg) 30%, rgba(255,249,237,0.55) 46%, rgba(255,249,237,0) 64%),
      url('/assets/img/kyiv-hero.jpg') center right / cover no-repeat;
    min-height:460px; display:flex; align-items:center; padding-top:var(--sp-5); padding-bottom:var(--sp-5);
  }
  .hero--home .wrap{ width:100%; }
  .hero-emblem{
    display:block; position:absolute; z-index:1;
    right:clamp(3rem, 14vw, 13rem); top:50%; transform:translateY(-50%);
    width:clamp(170px, 20vw, 250px); height:auto;
    filter:drop-shadow(0 18px 34px rgba(11,49,87,0.28));
  }
}
@media (min-width:760px) and (max-width:1023px){
  /* narrower text column here so it never runs under the emblem's shifted-left position */
  .hero--home .hero-content{ max-width:26rem; }
}

/* quick-access links row on the homepage */
.quicklinks-section{ padding-top:var(--sp-4); padding-bottom:var(--sp-4); border-bottom:1px solid var(--border); }
.quicklinks{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.quicklink{
  display:flex; flex-direction:column; gap:0.6rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.2rem 1.3rem; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
}
.quicklink:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.quicklink-icon{
  width:2.3rem; height:2.3rem; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.quicklink-icon svg{ width:1.2rem; height:1.2rem; }
.quicklink-title{ font-weight:700; font-family:'Lora',serif; }
.quicklink-sub{ font-size:0.85rem; color:var(--ink-muted); }

/* breadcrumb */
.crumb{ padding:var(--sp-2) 0 0; font-size:0.82rem; color:var(--ink-muted); }
.crumb a{ color:var(--ink-muted); text-decoration:none; }
.crumb a:hover{ color:var(--accent); }

/* generic content sections */
.section{ padding:var(--sp-5) 0; border-bottom:1px solid var(--border); }
.section--last{ border-bottom:none; padding-bottom:var(--sp-6); }
.section h2{ font-size:1.35rem; margin-bottom:var(--sp-3); overflow-wrap:anywhere; }
.section h3{ font-size:1.05rem; margin:var(--sp-4) 0 var(--sp-1); overflow-wrap:anywhere; }
/* migrated content sometimes carries raw URLs or hashtag-style unbroken tokens as plain text */
.doc-content{ overflow-wrap:anywhere; }
.section p{ color:var(--ink-muted); margin:0 0 var(--sp-2); max-width:68ch; overflow-wrap:anywhere; }
.section ul, .section ol{ color:var(--ink-muted); max-width:68ch; padding-left:1.3em; margin:0 0 var(--sp-2); }
.section li{ margin-bottom:0.4rem; overflow-wrap:anywhere; }
.section strong{ color:var(--ink); }

.about{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:760px){ .about{ grid-template-columns:1.1fr 1fr; gap:var(--sp-5); align-items:start; } }
.timeline{ display:flex; flex-direction:column; gap:0.7rem; font-size:0.9rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:var(--sp-3); }
.timeline .row{ display:grid; grid-template-columns:4.4em 1fr; gap:0.9em; }
.timeline .yr{ font-family:'Lora',serif; font-weight:700; color:var(--accent); }
.timeline .ev{ color:var(--ink-muted); }

/* facts / contact cards */
.facts h2{ font-size:0.82rem; margin-bottom:var(--sp-3); color:var(--ink-muted); font-family:'Manrope',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
.facts .grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.15rem; }
.card{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius-md); padding:1.15rem 1.35rem;
  box-shadow:var(--shadow-sm);
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border); }
.card .k{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); margin-bottom:0.35rem; }
.card .v{ font-weight:700; }
.card .v-link > a{ font-weight:700; color:var(--ink); text-decoration:none; }
.card .v-link > a:hover{ color:var(--accent); }
/* hub-page link tiles: uniform icon + label buttons (Про школу, Безпека, etc.) */
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:0.75rem; }
.tile-grid--wide{ grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr)); }
.tile{
  display:flex; align-items:center; gap:0.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:0.8rem 1rem; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--ink);
  min-height:3.9rem;
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.tile:hover .tile-icon{ background:var(--accent); color:#fff; }
.tile-icon{
  width:2.15rem; height:2.15rem; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tile-icon svg{ width:1.1rem; height:1.1rem; }
.tile-body{ min-width:0; }
.tile-title{ font-weight:700; font-family:'Lora',serif; font-size:0.92rem; line-height:1.2; }

.tile--muted{ background:var(--bg); }
.tile--muted .tile-icon{ background:var(--surface); color:var(--ink-muted); }
.tile--muted .tile-title{ color:var(--ink-muted); }
.tile--muted:hover .tile-icon{ background:var(--ink-muted); color:#fff; }

/* citation / "sources" footer paragraph under legal or informational content */
.source-note{ color:var(--ink-muted); font-size:0.85rem; margin-top:1.6rem; }

/* data tables */
.table-wrap{ overflow:hidden; overflow-x:auto; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.scroll-hint{ display:none; font-size:0.8rem; color:var(--ink-muted); margin:0 0 0.6rem; }
table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
th{ text-align:left; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-muted); background:var(--accent-soft); padding:0.7rem 1rem; border-bottom:1px solid var(--border); overflow-wrap:normal; }
td{ padding:0.75rem 1rem; border-bottom:1px solid var(--border); color:var(--ink-muted); vertical-align:top; overflow-wrap:normal; }
td:first-child{ color:var(--ink); font-weight:700; }
tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:var(--accent-soft); }

/* narrow screens: a labelled record table (data-label per cell) reads as a stack of
   cards instead of a cramped/scrolling table — a genuinely wide table (a weekly
   schedule grid) keeps the plain .table-wrap scroll behavior + .scroll-hint above */
@media (max-width:640px){
  .scroll-hint{ display:block; }
  .table-wrap--stack{ overflow:visible; border:none; background:none; box-shadow:none; }
  .table-wrap--stack table, .table-wrap--stack thead, .table-wrap--stack tbody,
  .table-wrap--stack th, .table-wrap--stack td, .table-wrap--stack tr{ display:block; width:auto; }
  .table-wrap--stack thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
  }
  .table-wrap--stack tbody tr{
    border:1px solid var(--border); border-radius:var(--radius-md);
    background:var(--surface); box-shadow:var(--shadow-sm);
    padding:0.85rem 1rem; margin-bottom:0.75rem;
  }
  .table-wrap--stack tbody tr:last-child{ margin-bottom:0; }
  .table-wrap--stack td{
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    padding:0.3rem 0; border:none; text-align:right;
  }
  .table-wrap--stack td::before{
    content:attr(data-label); font-weight:700; color:var(--ink); font-size:0.78rem; text-align:left; flex-shrink:0;
  }
  .table-wrap--stack td:first-child{ font-weight:400; }
}

/* kontakty page: feedback form beside the staff table */
.kontakty-top{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:900px){ .kontakty-top{ grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:start; } }
.kontakty-top h2{ font-size:1.05rem; margin-bottom:0.9rem; }

.table-compact th, .table-compact td{ padding:0.5rem 0.7rem; font-size:0.85rem; }
@media (max-width:640px){
  .table-compact.table-wrap--stack tbody tr{ padding:0.6rem 0.8rem; margin-bottom:0.55rem; }
  .table-compact.table-wrap--stack td{ padding:0.2rem 0; }
}

.phone-cell{ display:flex; align-items:center; justify-content:flex-end; gap:0.5rem; }
.phone-num{ white-space:nowrap; }
.call-btn{
  display:inline-flex; flex:none; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
}
.call-btn svg{ width:0.95rem; height:0.95rem; }
.call-btn:hover{ background:var(--accent); color:#fff; }

/* callout for open questions / missing content */
.callout{
  background:var(--gold-soft); border:1px solid var(--gold); border-left:4px solid var(--gold);
  border-radius:var(--radius-md); padding:1.15rem 1.35rem; margin:var(--sp-3) 0;
  box-shadow:var(--shadow-sm);
}
.callout .tag{ font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold-ink); display:block; margin-bottom:0.5rem; }
.callout p{ margin:0; color:var(--ink); max-width:68ch; overflow-wrap:anywhere; }

/* numbered steps */
.steps{ counter-reset:step; list-style:none; padding:0; margin:0 0 var(--sp-2); max-width:68ch; }
.steps li{ counter-increment:step; position:relative; padding-left:2.8em; margin-bottom:1.1rem; color:var(--ink-muted); }
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-0.05em;
  width:1.9em; height:1.9em; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #06213D); color:#fff;
  font-family:'Lora',serif; font-weight:700; font-size:0.85em;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.steps li b{ color:var(--ink); }

/* pending file attachments (originals missing on old site's server) */
.pending-note{ font-size:0.82rem; color:var(--gold-ink); font-weight:700; margin:var(--sp-3) 0 0.5rem; }
ul.pending-files{ list-style:none; padding:0; margin:0 0 var(--sp-2); display:flex; flex-direction:column; gap:0.4rem; }
ul.pending-files li{
  font-size:0.9rem; color:var(--ink-muted); padding:0.55rem 0.85rem;
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-sm);
  overflow-wrap:anywhere; /* real filenames migrated from the old site are sometimes one long underscore-joined token */
}

/* gallery: album placeholder cards */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1.15rem; }
.album-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.album-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.album-thumb{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft);
  border-bottom:1px dashed var(--accent);
  position:relative;
}
.album-thumb svg{ width:2.4rem; height:2.4rem; color:var(--accent); opacity:0.55; }
.album-body{ padding:0.95rem 1.1rem 1.05rem; }
.album-title{ font-weight:700; font-size:0.95rem; color:var(--ink); }
.album-status{
  margin-top:0.4rem; display:inline-block;
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; font-weight:700;
  color:var(--gold-ink); background:var(--gold-soft); padding:0.25em 0.65em; border-radius:999px;
}
.album-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.album-card.has-photos .album-thumb{ cursor:pointer; border-bottom:1px solid var(--border); }

/* shared panel for whichever album is open — always right below the album grid,
   never detached inside a multi-row .gallery-grid */
.photo-grid-panel{
  margin-top:1.15rem; padding-top:1.15rem; border-top:1px dashed var(--border);
}
.photo-grid-panel-title{ font-size:1.05rem; margin:0 0 0.9rem; }
.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:0.6rem;
}
.photo-grid button{
  padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface); cursor:pointer; aspect-ratio:1/1; display:block;
}
.photo-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-grid button:hover{ border-color:var(--accent); }
.photo-grid button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* staff album: placeholder cards for the school collective, to be filled with real photos later */
.staff-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:1.15rem; }
.staff-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.staff-photo{
  aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border-bottom:1px dashed var(--accent);
}
.staff-photo svg{ width:2.6rem; height:2.6rem; color:var(--accent); opacity:0.5; }
.staff-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.staff-card.has-photo .staff-photo{ border-bottom:1px solid var(--border); }
.staff-body{ padding:0.75rem 0.85rem 0.9rem; text-align:center; }
.staff-name{ font-weight:700; font-size:0.9rem; color:var(--ink); line-height:1.25; }
.staff-role{ margin-top:0.25rem; font-size:0.8rem; color:var(--ink-muted); line-height:1.3; }

/* lightbox: full photo, one at a time, arrow/keyboard/swipe navigation through the whole album */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(11,17,24,0.92); padding:1.5rem;
}
.lightbox.is-open{ display:flex; }
.lightbox-figure{ max-width:min(92vw, 1100px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:0.75rem; }
.lightbox-img-wrap{ max-width:100%; max-height:76vh; display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.lightbox-img{ max-width:100%; max-height:76vh; border-radius:var(--radius-sm); object-fit:contain; background:#00000022; }
.lightbox.is-zoomed .lightbox-img-wrap{
  max-width:92vw; max-height:76vh; overflow:auto; cursor:zoom-out;
  align-items:flex-start; justify-content:flex-start;
}
.lightbox.is-zoomed .lightbox-img{ max-width:none; max-height:none; width:auto; height:auto; }
.lightbox-caption{ color:#fff; font-size:0.9rem; text-align:center; max-width:70ch; }
.lightbox-counter{ color:rgba(255,255,255,0.6); font-size:0.8rem; }
.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-zoom{
  position:absolute; border:none; background:rgba(255,255,255,0.12); color:#fff;
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover, .lightbox-zoom:hover{ background:rgba(255,255,255,0.24); }
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible, .lightbox-zoom:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.lightbox-close{ top:1.1rem; right:1.1rem; }
.lightbox-zoom{ top:1.1rem; left:1.1rem; }
.lightbox.is-zoomed .lightbox-zoom{ background:rgba(255,255,255,0.3); }
.lightbox-prev{ left:1.1rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.1rem; top:50%; transform:translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg, .lightbox-zoom svg{ width:1.4rem; height:1.4rem; }
@media (max-width:640px){
  .lightbox{ padding:0.75rem; }
  .lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-zoom{ width:2.4rem; height:2.4rem; }
  .lightbox-prev{ left:0.5rem; }
  .lightbox-next{ right:0.5rem; }
  .lightbox-close{ top:0.5rem; right:0.5rem; }
  .lightbox-zoom{ top:0.5rem; left:0.5rem; }
}

/* single standalone gallery grid (e.g. the museum page) — same thumbnails/lightbox as albums, no album list */
.solo-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:0.85rem; }
.solo-gallery button{
  padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface); cursor:pointer; aspect-ratio:4/3; display:block;
}
.solo-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.solo-gallery button:hover{ border-color:var(--accent); }
.solo-gallery button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.solo-gallery.has-photos{ border:none; padding:0; }
.gallery-empty-note{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:16/6; min-height:120px;
  background:var(--accent-soft); border:1px dashed var(--accent); border-radius:var(--radius-md);
  color:var(--ink-muted); font-size:0.9rem; padding:1.5rem;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* class timetable from data/timetable.json: table on wide screens, day cards on phones */
.tt[hidden]{ display:none !important; }
.tt-period{ color:var(--ink-muted); margin-top:-0.3rem; }
.tt-controls{ display:flex; flex-wrap:wrap; gap:0.75rem 1.5rem; align-items:center; margin:1rem 0 0.4rem; }
.tt-classes, .tt-weeks{ display:flex; flex-wrap:wrap; gap:0.35rem; }
.tt-classes{ flex-direction:column; gap:0.45rem; }
.tt-class-group{ display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem; }
.tt-group-label{ font-size:0.75rem; font-weight:700; color:var(--ink-muted); min-width:5.2rem; }
.tt [hidden]{ display:none !important; }
.tt-controls button{
  font:inherit; font-size:0.85rem; font-weight:700; cursor:pointer;
  padding:0.4rem 0.75rem; border-radius:999px;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
}
.tt-controls button:hover{ border-color:var(--accent); color:var(--accent); }
.tt-controls button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tt-controls button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tt-weeks{ padding-left:1.25rem; border-left:1px solid var(--border); }
.tt .tt-week-note{ font-size:0.88rem; margin:0.4rem 0 1rem; max-width:none; }
.tt-subj{ display:block; color:var(--ink); font-weight:700; line-height:1.3; }
.tt-meta{ display:block; font-size:0.75rem; color:var(--ink-muted); line-height:1.35; margin-top:0.1rem; }
.tt-subj + .tt-meta + .tt-subj{ margin-top:0.45rem; }
.tt-alt{ display:inline-block; margin-top:0.3rem; font-size:0.7rem; color:var(--gold-ink); background:var(--gold-soft); border-radius:999px; padding:0.1em 0.55em; line-height:1.4; }
.tt-empty{ color:var(--ink-muted); }
.tt-table{ table-layout:fixed; font-size:0.85rem; }
.tt-table th.tt-num{ width:5.2rem; text-align:center; }
.tt-table tbody th.tt-num{ background:var(--accent-soft); color:var(--ink-muted); font-weight:700; border-bottom:1px solid var(--border); vertical-align:top; padding-top:0.75rem; }
.tt-table td{ padding:0.6rem 0.65rem; }
.tt-table td:first-child{ font-weight:400; }
.tt-table tbody tr:hover td{ background:transparent; }
.tt-table th.is-today{ background:var(--gold-soft); color:var(--gold-ink); }
.tt-table td.is-today{ background:#fffaf0; }
.tt-table td.is-now{ background:var(--gold-soft); box-shadow:inset 3px 0 0 var(--gold); }
.tt-time{ display:block; font-size:0.66rem; font-weight:400; color:var(--ink-muted); letter-spacing:0; text-transform:none; margin-top:0.15rem; white-space:nowrap; }
.tt-day li .tt-time{ margin:0 0 0.1rem; font-size:0.72rem; }
.tt-day li.is-now{ background:var(--gold-soft); border-radius:var(--radius-sm); box-shadow:0 0 0 6px var(--gold-soft); }
.tt-days{ display:none; }
.tt-day{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-sm); padding:0.85rem 1rem; }
.tt-day.is-today{ border-color:var(--gold); }
.tt-day h4{ margin:0 0 0.6rem; font-size:1rem; display:flex; align-items:center; gap:0.5rem; }
.tt-today-badge{ font-family:'Manrope',sans-serif; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--gold-ink); background:var(--gold-soft); border-radius:999px; padding:0.15em 0.6em; }
.tt-day ol{ list-style:none; margin:0; padding:0; max-width:none; display:flex; flex-direction:column; gap:0.55rem; }
.tt-day li{ display:flex; gap:0.7rem; margin:0; }
.tt-li-num{ flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:0.8rem; display:flex; align-items:center; justify-content:center; }
@media (max-width:899px){
  .tt-table-wrap{ display:none; }
  .tt-days{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px,100%),1fr)); gap:0.85rem; }
  .tt-weeks{ padding-left:0; border-left:none; }
}

/* bell schedule from data/bells.json; hidden until the schedule is filled in */
[data-bells][hidden]{ display:none !important; }
.bells .bells-status{ font-weight:700; color:var(--accent); }
.bells-table{ max-width:560px; }
.bells-table th, .bells-table td{ text-align:center; }
.bells-table td:first-child{ font-weight:400; color:var(--ink-muted); }
.bells-table tbody th{ background:none; text-transform:none; letter-spacing:0; font-size:0.85rem; color:var(--ink); font-weight:700; }
.bells-table tbody td:nth-child(2){ color:var(--ink); font-weight:700; }
.bells-grid-name{ display:block; font-size:0.68rem; text-transform:none; letter-spacing:0; font-weight:700; color:var(--ink); margin-top:0.1rem; }
.bells-table tr.is-now th, .bells-table tr.is-now td{ background:var(--gold-soft); color:var(--ink); }
@media (max-width:640px){
  .table-compact.bells-table th, .table-compact.bells-table td{ padding:0.5rem 0.2rem; font-size:0.8rem; }
  .table-compact.bells-table thead th{ font-size:0.6rem; letter-spacing:0; }
  .bells-grid-name{ font-size:0.6rem; }
}
.bells-strip{
  display:inline-flex; align-items:center; gap:0.55rem; margin-bottom:1rem;
  padding:0.5rem 0.95rem; border-radius:999px; background:var(--accent-soft);
  color:var(--accent); font-weight:700; font-size:0.9rem; text-decoration:none;
}
.bells-strip svg{ width:1.1rem; height:1.1rem; flex:none; }
.bells-strip:hover{ background:var(--accent); color:#fff; }

/* embedded PDF document: click the cover preview to expand a scrollable in-page viewer */
.pdf-doc{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; margin:1.4rem 0; }
.pdf-doc-summary{
  display:flex; align-items:center; gap:1rem; padding:0.9rem 1.1rem; cursor:pointer; list-style:none;
}
.pdf-doc-summary::-webkit-details-marker{ display:none; }
.pdf-doc-summary:hover{ background:var(--accent-soft); }
.pdf-doc-summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.pdf-doc-cover{ width:100px; height:56px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); flex:none; }
.pdf-doc-info{ display:flex; flex-direction:column; gap:0.3rem; min-width:0; }
.pdf-doc-title{ font-weight:700; color:var(--ink); }
.pdf-doc-meta{ font-size:0.82rem; color:var(--ink-muted); }
.pdf-doc-toggle-label{ margin-left:auto; flex:none; font-size:0.8rem; color:var(--accent); font-weight:700; white-space:nowrap; }
.pdf-doc-toggle-label::after{ content:'Переглянути ▾'; }
.pdf-doc[open] .pdf-doc-toggle-label::after{ content:'Згорнути ▴'; }
.pdf-doc .pdf-doc-dl{ max-width:none; margin:0; padding:0.7rem 1.1rem; border-top:1px solid var(--border); font-size:0.85rem; color:var(--ink-muted); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* one page at a time, full width of the card, arrow/keyboard/swipe navigation */
.pdf-slides{ position:relative; border-top:1px solid var(--border); background:#0f1a2b; }
.pdf-slides-stage{ aspect-ratio:16/9; }
.pdf-slides-stage img{ display:none; width:100%; height:100%; object-fit:contain; }
.pdf-slides-stage img.is-active{ display:block; }
.pdf-slides-prev, .pdf-slides-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.75rem; height:2.75rem; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.88); color:var(--accent); box-shadow:var(--shadow-md);
}
.pdf-slides-prev{ left:0.9rem; }
.pdf-slides-next{ right:0.9rem; }
.pdf-slides-prev:hover, .pdf-slides-next:hover{ background:#fff; }
.pdf-slides-prev:focus-visible, .pdf-slides-next:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.pdf-slides-prev svg, .pdf-slides-next svg{ width:1.3rem; height:1.3rem; }
.pdf-slides-counter{ font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .pdf-doc-summary{ gap:0.75rem; padding:0.8rem; flex-wrap:wrap; }
  .pdf-doc-cover{ width:76px; height:43px; }
  .pdf-doc-toggle-label{ margin-left:0; width:100%; }
  .pdf-slides-prev, .pdf-slides-next{ width:2.1rem; height:2.1rem; }
  .pdf-slides-prev{ left:0.4rem; }
  .pdf-slides-next{ right:0.4rem; }
  .pdf-slides-prev svg, .pdf-slides-next svg{ width:1rem; height:1rem; }
}

/* footer */
footer.site{ margin-top:var(--sp-1); border-top:1px solid var(--border); background:var(--surface); padding:var(--sp-5) 0 var(--sp-4); color:var(--ink-muted); font-size:0.85rem; }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:var(--sp-4); }
.footer-brand{ font-family:'Lora',serif; font-weight:700; color:var(--ink); margin-bottom:0.5rem; }
.footer-muted{ color:var(--ink-muted); font-size:0.85rem; margin-bottom:0.3rem; }
.footer-heading{ font-weight:700; color:var(--ink); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.7rem; }
.footer-col a{ display:block; color:var(--ink-muted); text-decoration:none; margin-bottom:0.5rem; font-size:0.88rem; }
.footer-col a:hover{ color:var(--accent); transform:translateX(2px); }

/* contact / feedback form */
.contact-form{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.6rem 1.8rem; box-shadow:var(--shadow-sm); max-width:42rem;
}
.contact-form .form-row{ margin-bottom:1.1rem; }
.contact-form .form-row-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form label{ display:block; font-size:0.82rem; font-weight:700; color:var(--ink); margin-bottom:0.4rem; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; font:inherit; font-size:0.95rem; color:var(--ink);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:0.65rem 0.85rem; background:var(--bg);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent); background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.contact-form textarea{ resize:vertical; min-height:7rem; }
.contact-form .form-note{ font-size:0.8rem; color:var(--ink-muted); margin-top:0.5rem; }
.contact-form button[type="submit"]{ border:none; cursor:pointer; font-family:inherit; }
.contact-form .form-status{ margin-top:1rem; font-size:0.9rem; font-weight:700; display:none; }
.contact-form .form-status.is-success{ display:block; color:#1a7a4c; }
.contact-form .form-status.is-error{ display:block; color:#b3261e; }
@media (max-width:600px){
  .contact-form{ padding:1.3rem 1.2rem; }
  .contact-form .form-row-pair{ grid-template-columns:1fr; }
}

/* mobile/tablet nav — the 8-item label set only fits one row from ~970px up,
   so the hamburger threshold is intentionally higher than the general "mobile" breakpoint below */
@media (max-width:979px){
  .nav-toggle{ display:flex; }
  nav.main .wrap{ padding-left:1.5rem; padding-right:1.5rem; }
  nav.main ul{ display:none; flex-direction:column; gap:0.25rem; padding:0.5rem 0 0.75rem; }
  nav.main.is-open ul{ display:flex; }
  nav.main a{ width:100%; padding:0.8rem 1rem; border-radius:var(--radius-sm); }
  nav.main a:hover{ background:var(--accent-soft); color:var(--accent); }
  nav.main a.active{ background:var(--accent); color:#fff; }
}

@media (max-width:759px){
  .hero{ padding:var(--sp-4) 0 var(--sp-4); }
  .section{ padding:var(--sp-4) 0; }
}