/* css/fonts.css */
/* Every typeface the «Оформлення» tab offers, served from the site itself
   (public/fonts/, each with its licence beside it — docs/dev/licensing.md).
   A face that no rule uses is never downloaded, so declaring all of them here
   costs nothing and keeps this file the same for every school. The choice
   itself is made by --font-body and --font-heading, which GET /theme.css
   writes. The first stylesheet of /site.css. */

@font-face {
  font-family: 'Commissioner';
  src: url('/fonts/Commissioner-Variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Text';
  src: url('/fonts/FixelText-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Display';
  src: url('/fonts/FixelDisplay-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'e-Ukraine';
  src: url('/fonts/e-Ukraine-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'e-Ukraine';
  src: url('/fonts/e-Ukraine-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'e-Ukraine';
  src: url('/fonts/e-Ukraine-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair';
  src: url('/fonts/Playfair-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* css/base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--paper);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-variant-numeric: tabular-nums;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Images from the files table carry width/height attributes (issue #208), so
   the page does not jump while they load. An attribute height is a CSS
   height, though: without this rule a photo capped by max-width would keep
   its full height and stretch. Every rule that sizes an image on purpose
   (object-fit boxes, the hero) is a class selector and still wins. */
img {
  height: auto;
}


a {
  color: var(--blue);
  text-decoration: none;
}

/* A link inside a sentence is told apart from the words around it by more
   than its colour (WCAG 1.4.1, axe link-in-text-block): the text of a page
   or a post, a contact line, a search result's section. Links that carry a
   class of their own — cards, menus, buttons — are styled by it. */
p a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


input,
select,
textarea,
.photo-slot,
[class*='card'] {
  border-radius: var(--radius);
  box-shadow: none;
}

button,
[class*='btn'] {
  border-radius: var(--radius-button);
  box-shadow: none;
}

/* Headings take the heading face (--font-heading, «Оформлення»); everything
   else keeps the text face set on body. */
h1,
h2,
h3,
h4,
.page-h1,
.hero-title,
.logo-wordmark,
.footer-org-name,
.news-card-title,
.album-card-title {
  font-family: var(--font-heading);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-8); 
}

@media (max-width: 1279px) {
  .container {
    padding-inline: 32px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--space-5); 
  }
}



.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-3);
  z-index: 1000;
  background: var(--paper);
  color: var(--blue);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  border: 1.5px solid var(--blue);
}

.skip-link:focus {
  left: var(--space-5);
}

/* Local mode's banner (issue #52, story 23.2) — every public page, not only
   the admin panel: the site itself is only ever visible to someone signed
   in on this computer, and that has to be obvious wherever a page renders. */
.local-mode-banner {
  background: var(--chrome-tint);
  border-bottom: 1px solid var(--chrome-tint-line);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  font-size: 0.9rem;
  text-align: center;
}

.local-mode-banner a {
  color: var(--accent);
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


.md-align-left {
  text-align: left;
}

.md-align-center {
  text-align: center;
}

.md-align-right {
  text-align: right;
}

.md-indent {
  padding-left: var(--space-7);
}


figure {
  width: fit-content;
  max-width: 100%;
  margin: var(--space-5) auto;
}

figure.md-align-left,
.md-align-left figure {
  margin-left: 0;
  margin-right: auto;
}

figure.md-align-center,
.md-align-center figure {
  margin-inline: auto;
}

figure.md-align-right,
.md-align-right figure {
  margin-left: auto;
  margin-right: 0;
}

figure img {
  max-width: 100%;
  border-radius: 2px;
}

figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-meta-lg);
  text-align: center;
}

blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--accent);
  color: var(--body);
  font-style: italic;
}

/* Content blocks emitted by src/lib/renderMarkdown.js */

.md-table {
  overflow-x: auto;
  margin: var(--space-5) 0;
}

.md-table table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: var(--fs-text);
}

.md-table th,
.md-table td {
  border: 1px solid var(--line);
  padding: var(--space-2) var(--space-4);
  text-align: left;
  vertical-align: top;
}

.md-table th {
  background: var(--line-soft);
  font-weight: 700;
}

.md-map,
.md-video {
  width: 100%;
  margin: var(--space-6) 0;
}

.md-map iframe,
.md-video iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
}

.md-map iframe {
  height: 360px;
}

.md-video iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.md-map figcaption a {
  font-weight: 600;
}

.md-file {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  color: var(--ink);
}

.md-file:hover {
  border-color: var(--accent);
}

.md-file-title {
  flex: 1;
  font-weight: 600;
}

.md-file-meta {
  color: var(--muted);
  font-size: var(--fs-meta-lg);
  white-space: nowrap;
}

.md-file-action {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.md-callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--blue);
  background: var(--line-soft);
}

.md-callout-title {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--blue);
}

.md-callout > :last-child {
  margin-bottom: 0;
}

.md-details {
  margin: var(--space-4) 0;
  border: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
}

.md-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--blue);
}

.md-details[open] summary {
  margin-bottom: var(--space-3);
}

/* Titles and document names typed in the admin panel: a long compound word
   or a pasted address breaks inside its column instead of widening it past
   the edge of a phone screen (lang="uk" gives hyphens: auto its rules). */
.page-h1,
.news-card-title,
.news-lead-title,
.news-row-title,
.news-opening-title,
.news-more-title,
.document-row-title,
.site-section-title,
.album-card-title,
.home-gallery-title,
.chp-title,
.chp-news-title,
.chp-doc-link {
  overflow-wrap: anywhere;
  hyphens: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-7) 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Low-vision theme. The type scale itself is redefined in tokens.css; these
   are the reading and meta sizes the component files write as literals, off
   the scale, raised to the same steps: 20px+ for text, 15px for meta lines. */
:root[data-theme='low-vision'] .news-article-body {
  font-size: 22px;
}

:root[data-theme='low-vision'] .news-opening-lead,
:root[data-theme='low-vision'] .news-reading .news-article-body > p:first-child {
  font-size: 23px;
}

:root[data-theme='low-vision'] .news-card-title {
  font-size: 23px;
}

:root[data-theme='low-vision'] .news-row-title {
  font-size: 27px;
}

:root[data-theme='low-vision'] .site-footer,
:root[data-theme='low-vision'] .news-lead-summary,
:root[data-theme='low-vision'] .chp-news-summary,
:root[data-theme='low-vision'] .chp-doc-link,
:root[data-theme='low-vision'] .document-row-title,
:root[data-theme='low-vision'] .news-rail-item,
:root[data-theme='low-vision'] .section-report-table table {
  font-size: 20px;
}

:root[data-theme='low-vision'] .footer-bottom,
:root[data-theme='low-vision'] .footer-col h2,
:root[data-theme='low-vision'] .form-group label,
:root[data-theme='low-vision'] .field-error,
:root[data-theme='low-vision'] .section-nav-title,
:root[data-theme='low-vision'] .news-card-date,
:root[data-theme='low-vision'] .news-section-title,
:root[data-theme='low-vision'] .news-lead-kicker,
:root[data-theme='low-vision'] .news-flag,
:root[data-theme='low-vision'] .news-opening .breadcrumbs,
:root[data-theme='low-vision'] .news-opening-kicker,
:root[data-theme='low-vision'] .news-opening-meta,
:root[data-theme='low-vision'] .news-article-byline,
:root[data-theme='low-vision'] .news-linked-pages,
:root[data-theme='low-vision'] .news-share-link,
:root[data-theme='low-vision'] .news-cover figcaption,
:root[data-theme='low-vision'] .news-article-body figcaption,
:root[data-theme='low-vision'] .chp-chip,
:root[data-theme='low-vision'] .chp-chip-count,
:root[data-theme='low-vision'] .chp-doc-type,
:root[data-theme='low-vision'] .chp-year-count,
:root[data-theme='low-vision'] .chp-news-month,
:root[data-theme='low-vision'] .page-opening-counter,
:root[data-theme='low-vision'] .section-report-kicker,
:root[data-theme='low-vision'] .section-report-table th {
  font-size: 15px;
}

/* Photos and embedded maps/videos stay — a gallery without its photos is an
   empty page, and CSS cannot put an image's alt text in its place — but lose
   their colour, so they do not compete with the yellow-on-black text. The
   school's logo keeps its colours. */
:root[data-theme='low-vision'] img,
:root[data-theme='low-vision'] iframe {
  filter: grayscale(1);
}

:root[data-theme='low-vision'] .logo img {
  filter: none;
}

/* The credit line at the very bottom of every template's footer
   (partials/site-credit.liquid): the footer's small print — its quiet text
   colour on the dark band, --muted on a light one — with the link in the
   same colour, told apart by its underline. Every pair reads at 4.5:1
   (test/templates/siteCredit.test.js); a template whose footer is always
   dark sets its own colour back for the light variant. */
.site-footer .site-credit {
  color: var(--chrome-bar-ink);
  font-size: var(--fs-meta-lg);
}

.theme-footer-light .site-footer .site-credit {
  color: var(--muted);
}

.site-footer p + .site-credit {
  margin-top: var(--space-2);
}

.site-footer p.site-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Print: the page's own content only — no site frame, and none of the
   screen-only reading aids (progress bar, chapter bar, share links). Loaded
   before every component file, hence !important against their display. */
@media print {
  .topbar,
  .site-header,
  .mobile-menu-overlay,
  .announcement,
  .site-footer,
  .section-nav,
  .reading-progress,
  .chp-bar,
  .news-share {
    display: none !important;
  }
}

/* css/components/photo-slot.css */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--fs-meta-lg);
  text-align: center;
  padding: var(--space-5);
}


.photo-slot--1-1 {
  aspect-ratio: 1;
}

.photo-slot--16-9 {
  aspect-ratio: 16 / 9;
}

.photo-slot--3-2 {
  aspect-ratio: 3 / 2;
}

/* css/components/homepage.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  font-weight: 700;
  font-size: var(--fs-button);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background: var(--blue);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--blue-900);
}

.btn-outline {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}

.btn-outline:hover {
  background: var(--paper-2);
}




.hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-9);
  padding-block: var(--space-9);
  align-items: center;
}

/* No photo uploaded: the photo column isn't rendered at all, so the text
   spans the full width instead of sitting beside an empty rectangle. */
.hero--no-photo {
  grid-template-columns: minmax(0, 1fr);
}

/* The display size follows the screen down to a phone's, where the longest
   word of a school's name — in capitals — would otherwise be wider than the
   screen; never below the section headings («Новини»), so it stays the
   largest text on the page, and in the low-vision mode its tokens are
   larger. A word still too wide breaks rather than scroll the page. */
.hero-title {
  font-weight: 800;
  font-size: clamp(var(--fs-h2-news), 10.6vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--blue);
  max-width: 24ch;
  overflow-wrap: anywhere;
}

.hero-tagline {
  font-weight: 700;
  font-size: var(--fs-tagline);
  color: var(--accent);
  margin-top: 18px;
}

.hero-lead {
  font-weight: 400;
  font-size: var(--fs-text);
  line-height: 28px;
  color: var(--body);
  max-width: 46ch;
  margin-top: var(--space-5);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Panorama hero (issue #155): with a photo the hero is a full-width band.
   The photo sits on the right at 16:9, anchored to the right edge so the
   building and the pitch stay in frame; a navy gradient in the colour of
   the top bar carries the text on the left. */
.hero--panorama {
  --hero-ground: var(--chrome-bar);
  --hero-ground-deep: var(--blue-950);
  --hero-ink: #ffffff;
  --hero-ink-soft: rgb(255 255 255 / 0.9);
  /* Left edge of the container, whatever the viewport width. */
  --hero-edge: max(0px, (100% - var(--container)) / 2);

  position: relative;
  display: block;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  background: linear-gradient(180deg, var(--hero-ground) 0%, var(--hero-ground-deep) 100%);
  color: var(--hero-ink);
}

.hero--panorama .hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  height: 100%;
  aspect-ratio: 16 / 9;
  z-index: -2;
  /* On very wide screens the photo starts where the navy is still showing;
     fading its own left edge keeps that edge from reading as a line. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}

.hero--panorama .hero-media img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-radius: 0;
}

/* Solid navy under the text, fading out before the facade, plus soft top
   and bottom edges so the band reads as one piece. */
.hero--panorama::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      var(--hero-ground) 0,
      var(--hero-ground) calc(var(--hero-edge) + 250px),
      var(--blue-a90) calc(var(--hero-edge) + 420px),
      var(--blue-a50) calc(var(--hero-edge) + 520px),
      var(--blue-a12) calc(var(--hero-edge) + 610px),
      transparent calc(var(--hero-edge) + 690px)
    ),
    linear-gradient(180deg, var(--blue-950-a35) 0, transparent 90px),
    linear-gradient(0deg, var(--blue-950-a45) 0, transparent 120px);
}

.hero--panorama .hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  padding-block: var(--space-10);
}

.hero--panorama .hero-copy {
  max-width: 470px;
}

.hero--panorama .hero-title {
  color: var(--hero-ink);
}

.hero--panorama .hero-tagline {
  color: var(--accent-light);
}

.hero--panorama .hero-lead {
  max-width: none;
  color: var(--hero-ink-soft);
}

.hero--panorama .md-callout {
  margin: 0;
  background: rgb(255 255 255 / 0.08);
  border-left-color: var(--accent-light);
}

.hero--panorama .md-callout-title {
  color: var(--hero-ink);
}

.hero--panorama .md-callout p {
  color: var(--hero-ink-soft);
}

/* Buttons inverted for the dark ground. */
.hero--panorama .btn-primary {
  background: var(--paper);
  color: var(--blue);
  border-color: var(--paper);
}

.hero--panorama .btn-primary:hover {
  background: var(--chrome-tint);
  border-color: var(--chrome-tint);
}

.hero--panorama .btn-outline {
  background: transparent;
  color: var(--hero-ink);
  border-color: rgb(255 255 255 / 0.75);
}

.hero--panorama .btn-outline:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--hero-ink);
}

.hero--panorama .btn:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 3px;
}

/* The band has its own edge; the next section's hairline would double it. */
.hero--panorama + .home-about {
  border-top: 0;
}

/* Narrower screens cannot keep the facade clear of the text, so the layout
   stacks: copy on navy, then the whole photo, the navy melting into the sky. */
@media (max-width: 1179px) {
  .hero--panorama {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--hero-ground);
  }

  .hero--panorama::before {
    display: none;
  }

  .hero--panorama .hero-inner {
    order: 1;
    width: 100%;
    min-height: 0;
    padding-block: var(--space-9) var(--space-8);
  }

  .hero--panorama .hero-copy {
    max-width: 560px;
  }

  .hero--panorama .hero-media {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    z-index: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero--panorama .hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--hero-ground) 0, transparent 32%);
  }
}

@media (max-width: 767px) {
  .hero--panorama .hero-title {
    font-size: clamp(var(--fs-h2-news), 10.6vw, var(--fs-h1-phone));
  }
}

/* Low-vision theme: no photo, plain high-contrast text on black. */
:root[data-theme='low-vision'] .hero--panorama {
  background: #000000;
}

:root[data-theme='low-vision'] .hero--panorama .hero-media,
:root[data-theme='low-vision'] .hero--panorama::before {
  display: none;
}

:root[data-theme='low-vision'] .hero--panorama .btn-primary {
  background: #ffdd00;
  color: #000000;
  border-color: #ffdd00;
}

.site-sections {
  padding-block: var(--space-10);
}

.section-rubric {
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--blue);
  padding-bottom: var(--space-3);
  display: inline-block;
}

.site-sections-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  margin-top: var(--space-7);
}

.site-sections-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.site-section-title {
  font-size: var(--fs-menu-index);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.site-section-title--accent {
  color: var(--accent);
}

.site-section-note {
  font-size: var(--fs-meta-lg);
  color: var(--muted);
  white-space: nowrap;
}

.site-sections-list li:hover .site-section-title {
  color: var(--accent);
}

.site-sections-list li:hover .site-section-note {
  color: var(--ink);
}

@media (max-width: 767px) {
  .site-sections-list {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* A heading and its «all of them» link: the link goes under the heading
   when the two do not fit side by side. */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}

.section-link {
  font-weight: 700;
  font-size: var(--fs-button);
  white-space: nowrap;
}

.section-link--accent {
  color: var(--accent);
}

.news-heading,
.documents-heading {
  font-weight: 800;
  font-size: var(--fs-h2-news);
  color: var(--ink);
}


.news-preview {
  padding-block: var(--space-10);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.news-card {
  display: block;
  color: inherit;
}

.news-card-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.news-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.news-card-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-4);
}

.news-card-title {
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card:hover .news-card-title {
  color: var(--blue);
}

.news-card:hover .news-card-photo img {
  transform: scale(1.03);
}

@media (max-width: 767px) {
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


.documents-preview {
  padding-block: var(--space-10);
}

.documents-preview-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-9); 
  margin-top: var(--space-7);
}

.documents-preview-intro p {
  margin-top: var(--space-4);
  max-width: 40ch;
}

.documents-preview-intro .section-link {
  display: inline-block;
  margin-top: var(--space-5);
}

.document-rows {
  margin-bottom: var(--space-8);
}

.document-row {
  display: grid;
  grid-template-columns: 1fr 130px 110px;
  gap: var(--space-5);
  padding-block: 15px;
  color: inherit;
  border-top: 1px solid var(--line);
}

.document-row:first-child {
  border-top: 2px solid var(--blue);
}

.document-row:hover {
  background: var(--paper-2);
  margin-inline: -16px;
  padding-inline: 16px;
}

.document-row-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}

.document-row:hover .document-row-title {
  color: var(--blue);
}

.document-row-type {
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-filetype);
}

.document-row-date {
  font-size: var(--fs-meta-lg);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.document-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.document-group-col h3 {
  font-size: var(--fs-nav);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.document-group-col a {
  display: block;
  font-size: var(--fs-nav);
  color: var(--body);
  padding-block: var(--space-1);
}

.document-group-col a:hover {
  color: var(--accent);
}

/* A column's heading leads to the documents collection filtered by it. */
.document-group-col h3 a {
  color: inherit;
  font-weight: inherit;
  padding-block: 0;
}

@media (max-width: 767px) {
  .documents-preview-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .document-row-date {
    text-align: left;
  }

  .document-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Optional home page blocks: an excerpt of the "about" page, the latest
   album, contacts with a map. */

.home-about {
  padding-block: var(--space-10);
  border-top: 1px solid var(--line);
}

.home-about-heading,
.home-gallery-heading,
.home-contacts-heading,
.home-block-heading {
  font-weight: 800;
  font-size: var(--fs-h2-news);
  color: var(--ink);
}

.home-about-text {
  margin-top: var(--space-6);
  max-width: 68ch;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--body);
}

.home-about-text p {
  margin-bottom: var(--space-4);
}

.home-about-text p:last-child {
  margin-bottom: 0;
}

.home-gallery {
  padding-block: var(--space-10);
}

.home-gallery-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  margin-top: var(--space-6);
}

.home-gallery-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
}

.home-gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.home-gallery-card:hover .home-gallery-photo img {
  transform: scale(1.03);
}

.home-gallery-title {
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
}

.home-gallery-card:hover .home-gallery-title {
  color: var(--accent);
}

.home-gallery-meta {
  margin-top: var(--space-2);
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.home-contacts {
  padding-block: var(--space-10);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}

.home-contacts--no-map {
  grid-template-columns: minmax(0, 1fr);
}

.home-contacts-list {
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}

.home-contacts-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--body);
}

.home-contacts-row dt {
  font-weight: 700;
  color: var(--ink);
}

.home-contacts-row dd {
  margin: 0;
}

.home-contacts-info .chrome-social {
  margin-top: var(--space-5);
}

.home-contacts-actions {
  margin-top: var(--space-6);
}

.home-contacts-map iframe {
  display: block;
  border: 1px solid var(--line);
}

.home-contacts-map .contacts-map-link {
  margin-top: var(--space-2);
  font-size: var(--fs-meta-lg);
}

@media (max-width: 767px) {
  .home-gallery-card,
  .home-contacts {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Blocks with content of their own (growth story 11): quick links, numbers,
   partner logos and a banner. Tokens only — the brand colours come from
   /theme.css, and the low-vision theme repaints them like everything else.
   Icons are drawn in currentColor; logos turn grey with every other photo in
   the low-vision theme (base.css). */

.home-links,
.home-numbers,
.home-partners,
.home-banner {
  padding-block: var(--space-10);
}

/* Corners follow «Оформлення» like every card does (--radius: square unless
   the admin panel rounds them, always square in the low-vision theme) — none
   of these class names contains "card", so base.css does not reach them. The
   figures of «Цифри» are rules, not boxes, and stay square; the banner panel
   clips its picture to its own corners. */
.home-link,
.home-partner,
.home-banner-panel {
  border-radius: var(--radius);
}

.home-links-list,
.home-numbers-list,
.home-partners-list {
  list-style: none;
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.home-links .sr-only + .home-links-list,
.home-numbers .sr-only + .home-numbers-list,
.home-partners .sr-only + .home-partners-list {
  margin-top: 0;
}

.home-links-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  min-height: 72px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-text);
  line-height: 1.3;
}

.home-link:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.home-link-icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--blue);
}

.home-numbers-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.home-numbers-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--blue);
}

/* A figure is display type, set in the heading face like the hero title. */
.home-number-value {
  font-family: var(--font-heading);
  font-size: var(--fs-h2-news);
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue);
}

.home-number-label {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--body);
}

.home-partners-list {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.home-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper);
}

.home-partner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.home-partner img {
  width: auto;
  height: auto;
  max-width: min(100%, 180px);
  max-height: 72px;
  object-fit: contain;
}

.home-banner-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.home-banner-panel--text {
  grid-template-columns: minmax(0, 1fr);
}

.home-banner-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.home-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-banner-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
}

.home-banner-title {
  font-weight: 800;
  font-size: var(--fs-h2-news);
  line-height: 1.15;
  color: var(--ink);
}

.home-banner-text {
  max-width: 60ch;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--body);
}

.home-banner-actions {
  margin-top: var(--space-2);
}

@media (max-width: 899px) {
  .home-links-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-banner-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-banner-copy {
    padding: var(--space-6);
  }
}

@media (max-width: 479px) {
  .home-links-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* css/components/news.css */
/* Page heading used by the plain text pages, galleries, the library and
   contacts. The news pages have their own navy opening instead. */
.page-h1 {
  font-weight: 800;
  font-size: var(--fs-h2-news);
  color: var(--ink);
  padding-block: var(--space-9) var(--space-5);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.filter-chip {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-nav);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  font-family: inherit;
}

.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-chip.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

/* The chips are links: filtering happens on the server, so every
   combination of year and rubric has an address of its own. */
a.filter-chip {
  display: inline-block;
  text-decoration: none;
}

.filter-chip.is-active:hover {
  color: var(--paper);
}

.news-empty {
  color: var(--muted);
  padding-block: var(--space-8);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-top: 1px solid var(--line);
}

.pagination-link {
  font-weight: 700;
  color: var(--accent);
}

.pagination-status {
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

/* ==========================================================================
   «Журнал» — the news feed as a magazine front, a post as an immersive
   opening followed by a reading column. The navy grounds continue the site
   frame (top bar, footer, the home page panorama).
   ========================================================================== */

.news-front,
.news-opening {
  --news-ground: var(--chrome-bar);
  --news-ground-deep: var(--blue-950);
  --news-ink: #ffffff;
  --news-ink-soft: rgb(255 255 255 / 0.88);
  --news-ink-faint: rgb(255 255 255 / 0.76);
  --news-hair: rgb(255 255 255 / 0.22);

  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--news-ground) 0%, var(--news-ground-deep) 100%);
  color: var(--news-ink);
}

.news-front :focus-visible,
.news-opening :focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 3px;
}

.news-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--transition-fast);
}

/* A cover or a header photo as a framed print: a white mat, a shadow and a
   second sheet behind it. A poster with its own lettering stays an object
   beside the headline instead of a banner competing with it. */
.news-frame {
  position: relative;
  display: block;
  background: var(--paper);
  padding: 8px;
  box-shadow:
    0 28px 56px -22px var(--blue-shadow-a60),
    0 2px 8px var(--blue-shadow-a22);
}

.news-frame::before {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--accent-light-a55);
  z-index: -1;
}

.news-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.news-section-title {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 3px solid var(--blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--blue);
}

.news-more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--accent);
}

/* ---------- list: the front ---------- */

.news-front {
  overflow: hidden;
}

.news-front::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--blue-950-a35) 0, transparent 90px),
    linear-gradient(0deg, var(--blue-950-a50) 0, transparent 140px);
  pointer-events: none;
}

.news-front-inner {
  padding-block: var(--space-7) var(--space-10);
}

.news-front-inner:has(.news-lead) {
  padding-bottom: var(--space-11);
}

.news-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--news-hair);
}

.news-masthead-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--news-ink);
}

.news-masthead-filters {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
}

.news-front .chip-row {
  margin: 0;
  gap: var(--space-2);
}

.news-front .filter-chip {
  min-height: 34px;
  padding: 5px 14px;
  font-size: 13.5px;
  color: var(--news-ink);
  border: 1px solid rgb(255 255 255 / 0.45);
}

.news-front .filter-chip:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--news-ink);
  color: var(--news-ink);
}

.news-front .filter-chip.is-active {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--blue);
}

.news-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-9);
}

.news-lead--no-cover {
  grid-template-columns: minmax(0, 1fr);
}

.news-lead--no-cover .news-lead-copy {
  max-width: 760px;
}

.news-lead-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-light);
}

.news-flag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent-light);
  color: var(--blue-950);
}

.news-lead-rubric {
  font-weight: 700;
  color: var(--news-ink);
}

.news-lead-title {
  margin: 0;
  font-size: clamp(27px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.news-lead-title a {
  color: var(--news-ink);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.news-lead-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
}

.news-lead-summary {
  margin: var(--space-5) 0 0;
  max-width: 52ch;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--news-ink-soft);
}

.news-lead-btn {
  gap: var(--space-3);
  margin-top: var(--space-7);
  background: var(--paper);
  color: var(--blue);
  border-color: var(--paper);
  text-decoration: none;
}

.news-lead-btn:hover {
  background: var(--chrome-tint);
  border-color: var(--chrome-tint);
}

.news-lead-media {
  position: relative;
  display: block;
  isolation: isolate;
  margin-right: 16px; /* room for the second sheet */
}

/* The cover once more, blurred into the navy — the list's echo of the home
   page panorama, where the photo melts into the band. */
.news-lead-glow {
  position: absolute;
  inset: -35% -60% -35% -25%;
  width: auto;
  max-width: none;
  height: auto;
  object-fit: cover;
  filter: blur(64px) saturate(1.1);
  opacity: 0.32;
  z-index: -2;
  pointer-events: none;
}

.news-lead-btn:hover .news-arrow,
.news-row:hover .news-arrow,
.news-more-card:hover .news-arrow {
  transform: translateX(3px);
}

/* ---------- list: the rows ---------- */

.news-feed {
  padding-block: var(--space-10) var(--space-11);
}

.news-rows-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-row {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 300px;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--line);
}

.news-row--no-cover {
  grid-template-columns: 120px minmax(0, 1fr);
}

.news-row[hidden] {
  display: none;
}

.news-row-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  color: var(--blue);
}

.news-row-day {
  font-size: 52px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--ls-heading);
  font-variant-numeric: tabular-nums;
}

.news-row-month {
  font-size: var(--fs-meta-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.news-row-rubric {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-row-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  text-wrap: balance;
}

.news-row-link,
.news-more-card-link {
  color: inherit;
  text-decoration: none;
}

/* The whole row / card is the click target; the title is the one link. */
.news-row-link::after,
.news-more-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.news-row:hover .news-row-link,
.news-more-card:hover .news-more-card-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.news-row-link:focus-visible,
.news-more-card-link:focus-visible {
  outline: none;
}

.news-row-link:focus-visible::after,
.news-more-card-link:focus-visible::after {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.news-row-summary,
.news-more-summary {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-text);
  line-height: 1.6;
  color: var(--body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.news-row-media,
.news-more-media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--chrome-tint);
}

.news-row-media {
  outline: 1px solid var(--line);
}

.news-row-media img,
.news-more-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.news-row:hover .news-row-media img,
.news-more-card:hover .news-more-media img {
  transform: scale(1.03);
}

.news-feed .pagination {
  margin-top: var(--space-7);
}

/* ---------- post: the opening ---------- */

.news-opening-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--space-10);
  align-items: end;
  padding-block: var(--space-6) var(--space-10);
}

.news-opening--no-cover .news-opening-inner {
  grid-template-columns: minmax(0, 1fr);
}

.news-opening--no-cover .news-opening-copy {
  max-width: 820px;
}

.news-opening .draft-preview-banner {
  margin-bottom: var(--space-5);
  color: var(--ink);
}

.news-opening .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-size: 13.5px;
  color: var(--news-ink-faint);
}

.news-opening .breadcrumbs a {
  color: var(--news-ink-faint);
  text-decoration: none;
}

.news-opening .breadcrumbs a:hover {
  color: var(--news-ink);
  text-decoration: underline;
}

.news-opening-kicker {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent-light);
  color: var(--blue-950);
}

.news-opening-title {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--news-ink);
  text-wrap: balance;
}

.news-opening-lead {
  margin: var(--space-6) 0 0;
  max-width: 56ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--news-ink-soft);
}

.news-opening-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-7) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--news-hair);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-light);
}

.news-opening-meta > * + *::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: var(--space-5);
  vertical-align: middle;
  background: var(--news-hair);
}

/* «Текст: … · Фото: …» (#182), under the date line. */
.news-article-byline {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--news-ink-soft);
}

/* «Також у розділах: Харчування» — the info pages that show this post
   (#181), each a way back to its news chapter. */
.news-linked-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: 14px;
}

.news-linked-pages-label {
  font-weight: 600;
  color: var(--news-ink-faint);
}

.news-linked-page {
  padding: 3px 10px;
  border: 1px solid var(--news-hair);
  font-weight: 700;
  color: var(--news-ink);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.news-linked-page:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: var(--accent-light);
}

@media (prefers-reduced-motion: reduce) {
  .news-linked-page {
    transition: none;
  }
}

:root[data-theme='low-vision'] .news-linked-page {
  border: 2px solid var(--line);
  color: var(--ink);
}

/* The cover hangs out of the band into the page. */
.news-cover {
  position: relative;
  z-index: 1;
  margin: 0 16px -112px 0;
}

.news-cover img {
  cursor: zoom-in;
}

.news-cover figcaption {
  margin-top: var(--space-4);
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
}

/* ---------- post: reading column + side rail ---------- */

.news-reading {
  display: grid;
  grid-template-columns: 172px minmax(0, 680px);
  gap: var(--space-11);
  padding-block: var(--space-9) var(--space-10);
}

.news-opening:not(.news-opening--no-cover) + .news-reading {
  padding-top: 136px;
}

.news-rail {
  position: sticky;
  top: 112px;
  align-self: start;
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-2);
  border-top: 3px solid var(--blue);
}

.news-rail-item {
  margin: 0;
  display: grid;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.news-rail-label,
.news-share-label {
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--muted);
}

.news-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.news-share-label {
  margin-right: var(--space-2);
}

.news-share-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  background: var(--paper);
  border: 1.5px solid var(--line);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.news-share-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
}

.news-share-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.news-share-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.news-share--rail {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.news-share--rail .news-share-label {
  margin: 0 0 var(--space-2);
}

.news-share--rail .news-share-link {
  min-height: 40px;
  padding-inline: 0;
  border-width: 0 0 1px;
  border-color: var(--line-soft);
}

.news-share--rail .news-share-link:hover {
  border-color: var(--accent);
}

/* ---------- post: the text ---------- */

/* Also the class of the admin editor's live preview
   (src/admin/views/news/form.liquid), so text looks there as it will here. */
.news-article-body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--body);
}

.news-article-body > :first-child {
  margin-top: 0;
}

.news-article-body p {
  margin-top: var(--space-4);
}

.news-article-body strong {
  color: var(--ink);
}

.news-article-body h2 {
  position: relative;
  margin: var(--space-9) 0 var(--space-4);
  padding-top: var(--space-5);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--blue);
  text-wrap: balance;
}

.news-article-body h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--accent);
}

.news-article-body h3 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.news-article-body blockquote {
  margin: var(--space-7) 0;
  padding: 0 0 0 var(--space-6);
  border-left: 3px solid var(--accent);
  font-size: 21px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--blue);
}

.news-article-body figure {
  margin-block: var(--space-8);
}

.news-article-body figure img {
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.news-article-body figcaption {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--muted);
}

/* The video: a navy screen with a caption strip. */
.news-article-body .md-video {
  margin-block: var(--space-5) var(--space-8);
  padding: 12px 12px 14px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-950) 100%);
  box-shadow: 0 28px 56px -22px var(--blue-shadow-a60);
}

.news-article-body .md-video::after {
  content: 'Відео · YouTube';
  display: block;
  margin-top: 12px;
  padding-left: 22px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: linear-gradient(var(--accent-light), var(--accent-light)) 0 50% / 12px 2px no-repeat;
}

.news-article-body .md-video iframe {
  background: var(--blue-950);
}

.news-article-body .md-map {
  margin-block: var(--space-7);
}

.news-article-body .md-callout {
  margin-block: var(--space-8) 0;
  padding: var(--space-6) var(--space-7);
  background: var(--chrome-tint);
  border-left: 4px solid var(--accent);
}

.news-article-body .md-callout-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
}

/* On the public page (not in the editor preview) the first paragraph is the
   way in: a size up, and a drop cap when it starts with words. */
.news-reading .news-article-body > p:first-child {
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
}

.news-reading .news-article-body.has-dropcap > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-size: 3.6em;
  font-weight: 800;
  line-height: 0.8;
  color: var(--blue);
}

/* The video and the photos are a little wider than the text. */
.news-reading .news-article-body .md-video,
.news-reading .news-article-body figure:not(.md-video):not(.md-map) {
  width: calc(100% + 80px);
  max-width: none;
  margin-inline: -40px;
}

.news-article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.news-article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.news-article-back:hover {
  text-decoration: underline;
}

.news-article-back:hover .news-arrow--back {
  transform: translateX(-3px);
}

/* ---------- post: «Читайте також» ---------- */

.news-more {
  padding-block: var(--space-9) var(--space-11);
  background: var(--chrome-tint);
  border-top: 1px solid var(--chrome-tint-line);
}

.news-more .news-section-title {
  margin-bottom: var(--space-7);
}

.news-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
}

.news-more-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--chrome-tint-line);
}

.news-more-copy {
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.news-more-date {
  margin: 0;
  font-size: var(--fs-meta-lg);
  font-weight: 700;
  color: var(--accent);
}

.news-more-title {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

/* One related post: a wide card, not a lonely third of a row. */
.news-more-card:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.news-more-card:only-child:not(:has(.news-more-media)) {
  grid-template-columns: minmax(0, 1fr);
}

.news-more-card:only-child .news-more-copy {
  align-self: center;
  padding: var(--space-7) var(--space-8);
}

.news-more-card:only-child .news-more-title {
  font-size: 24px;
  line-height: 1.25;
}

/* ---------- reading-progress bar (public/js/reading-progress.js) ---------- */

.reading-progress {
  display: none;
}

.has-reading-progress .reading-progress {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  z-index: 1200;
  height: 4px;
  pointer-events: none;
}

.reading-progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.6);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 90ms linear;
}

/* ---------- a feed inside a dropdown: the side menu takes the left, so
   the bands become panels in the right column ---------- */

.section-layout-main .news-front .news-front-inner,
.section-layout-main .news-opening .news-opening-inner {
  padding-inline: var(--space-7);
}

.section-layout-main .news-opening-inner {
  grid-template-columns: minmax(0, 1fr);
}

.section-layout-main .news-cover {
  max-width: 460px;
}

.section-layout-main .news-reading {
  grid-template-columns: minmax(0, 1fr);
}

.section-layout-main .news-rail {
  display: none;
}

.section-layout-main .news-lead {
  gap: var(--space-8);
}

.section-layout-main .news-reading-main {
  max-width: 680px;
}

.section-layout-main .news-reading .news-article-body .md-video,
.section-layout-main .news-reading .news-article-body figure:not(.md-video):not(.md-map) {
  width: 100%;
  margin-inline: 0;
}

@media (min-width: 900px) {
  .section-layout-main .news-row {
    grid-template-columns: 96px minmax(0, 1fr) 220px;
    gap: var(--space-7);
  }

  .section-layout-main .news-row--no-cover {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

.section-layout-main .news-feed,
.section-layout-main .news-more {
  padding-top: var(--space-8);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1179px) {
  .news-opening-inner {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-8);
  }

  .news-reading {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 899px) {
  .news-lead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-7);
  }

  .news-front-inner:has(.news-lead) {
    padding-bottom: var(--space-9);
  }

  .news-masthead-filters {
    justify-items: start;
  }

  .news-row,
  .news-row--no-cover {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-6);
  }

  .news-row--no-cover .news-row-copy {
    grid-column: 1 / -1;
  }

  .news-row-date {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
  }

  .news-row-day,
  .news-row-month {
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--blue);
  }

  .news-row-title {
    font-size: 19px;
  }

  .news-row-media {
    aspect-ratio: 1;
  }

  .news-opening-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .news-opening .breadcrumbs {
    margin-bottom: var(--space-6);
  }

  .news-cover {
    margin-bottom: -96px;
  }

  .news-reading {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-opening:not(.news-opening--no-cover) + .news-reading {
    padding-top: 128px;
  }

  /* The share block at the end of the text covers small screens. */
  .news-rail {
    display: none;
  }

  .news-reading .news-article-body .md-video,
  .news-reading .news-article-body figure:not(.md-video):not(.md-map) {
    width: calc(100% + 2 * var(--space-5));
    margin-inline: calc(-1 * var(--space-5));
  }

  .news-more-grid,
  .news-more-card:only-child {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-more-card:only-child .news-more-copy {
    padding: var(--space-5) var(--space-6) var(--space-6);
  }

  .news-more-card:only-child .news-more-title {
    font-size: var(--fs-card-title);
  }
}

@media (max-width: 767px) {
  .news-masthead-title {
    font-size: 24px;
  }

  .news-lead-summary {
    font-size: 16.5px;
  }

  .news-row-summary {
    grid-column: 1 / -1;
  }

  .news-opening-lead {
    font-size: 17.5px;
  }

  .news-article-body {
    font-size: 17px;
  }

  .news-reading .news-article-body > p:first-child {
    font-size: 18.5px;
  }

  .news-article-body h2 {
    font-size: 23px;
  }

  .news-article-body .md-video {
    padding: 8px 8px 12px;
  }

  .news-article-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-layout-main .news-front .news-front-inner,
  .section-layout-main .news-opening .news-opening-inner {
    padding-inline: var(--space-5);
  }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .news-arrow,
  .reading-progress-bar,
  .news-row-media img,
  .news-more-media img {
    transition: none;
  }

  .news-row:hover .news-row-media img,
  .news-more-card:hover .news-more-media img,
  .news-lead-btn:hover .news-arrow,
  .news-row:hover .news-arrow,
  .news-more-card:hover .news-arrow,
  .news-article-back:hover .news-arrow--back {
    transform: none;
  }
}

/* ---------- low-vision theme: black grounds, no photo tricks ----------
   Its tokens turn --blue-950 yellow, so the navy gradients would run from
   black to yellow; the bands become black with a yellow rule instead. */

:root[data-theme='low-vision'] .news-front,
:root[data-theme='low-vision'] .news-opening {
  background: var(--paper);
  border-block: 2px solid var(--line);
}

:root[data-theme='low-vision'] .news-front::before,
:root[data-theme='low-vision'] .news-lead-glow,
:root[data-theme='low-vision'] .news-frame::before {
  display: none;
}

:root[data-theme='low-vision'] .news-frame {
  padding: 0;
  border: 2px solid var(--line);
  box-shadow: none;
}

:root[data-theme='low-vision'] .news-flag,
:root[data-theme='low-vision'] .news-opening-kicker {
  background: transparent;
  border: 2px solid var(--line);
  color: var(--ink);
}

:root[data-theme='low-vision'] .news-lead-btn {
  border-color: var(--line);
}

:root[data-theme='low-vision'] .news-article-body .md-video {
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: none;
}

:root[data-theme='low-vision'] .news-article-body .md-video::after {
  color: var(--ink);
  background: none;
  padding-left: 0;
}

:root[data-theme='low-vision'] .reading-progress-bar {
  background: var(--accent);
  box-shadow: none;
}

/* css/components/text-page.css */
.text-page {
  padding-block: var(--space-9) var(--space-10);
}

/* A page inside a dropdown: the rest of its section on the left, the page on
   the right (layouts/base.ejs). The page keeps its own markup; its outer
   container and vertical padding give way to the layout's. */
.section-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
  padding-block: var(--space-9) var(--space-10);
}

/* Two classes, so it outranks the page wrappers' own padding rules
   (gallery, library, news), whichever stylesheet loads last. */
.section-layout .section-layout-main > * {
  padding-block: 0;
}

.section-layout-main .container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.section-layout-main .page-h1 {
  padding-top: 0;
}

.section-nav {
  position: sticky;
  top: 100px;
  border-top: 3px solid var(--blue);
  background: var(--chrome-tint);
  padding: var(--space-4) var(--space-2) var(--space-3);
}

.section-nav-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 0 var(--space-3) var(--space-2);
}

.section-nav ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-nav a {
  display: block;
  font-size: var(--fs-nav-side);
  line-height: 1.35;
  color: var(--body);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.section-nav a:hover {
  color: var(--blue);
  background: var(--paper);
}

.section-nav a.active {
  color: var(--blue);
  background: var(--paper);
  border-left-color: var(--accent);
  font-weight: 700;
}

/* Tablets and phones: the section becomes a scrollable row of links above
   the page, so the page itself stays in the first screen. */
@media (max-width: 1023px) {
  .section-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-top: var(--space-6);
  }

  .section-nav {
    position: static;
    padding: var(--space-3) 0 0;
  }

  .section-nav-title {
    padding-inline: var(--space-3);
  }

  .section-nav ul {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    padding: 0 var(--space-3) var(--space-3);
    scrollbar-width: thin;
  }

  .section-nav li {
    flex: none;
  }

  .section-nav a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    background: var(--paper);
    padding: var(--space-1) var(--space-3);
  }

  .section-nav a.active {
    border-bottom-color: var(--accent);
  }
}

.text-page-content {
  max-width: 68ch;
}

.text-page-content .page-h1 {
  padding-top: 0;
}

/* An info page with a header photo opens with a navy band (partials/
   page-opening.ejs, colours and type from .news-opening in news.css) across
   the whole width above the section side menu. Unlike a news cover, which
   is often a poster with text and is framed whole, the page photo is a
   panorama like the home hero: it fills the right part of the band and
   fades into the navy, so nothing hangs out and the page follows directly. */
.page-opening {
  overflow: hidden;
}

.page-opening .news-opening-inner {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 340px;
  padding-block: var(--space-9);
}

.page-opening .news-opening-copy {
  position: relative;
  z-index: 1;
  max-width: 46%;
}

.page-opening .news-cover {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  margin: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%);
  mask-image: linear-gradient(90deg, transparent 0, #000 35%);
}

.page-opening .news-frame {
  height: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}

.page-opening .news-frame::before {
  display: none;
}

.page-opening .news-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: default;
}

/* A page without a side menu has no heading of its own once the band
   carries the title, so its text column takes the heading's spacing. */
main > .page-opening + .text-page-content {
  padding-block: var(--space-9) var(--space-10);
}

/* ...and lines up with the title in the band: the container's left edge,
   the reading measure kept on its children. */
main > .page-opening + .text-page-content {
  max-width: var(--container);
}

main > .page-opening + .text-page-content > * {
  max-width: 68ch;
}

/* Narrow screens: the title on navy, then the whole photo under it, the
   navy melting into its sky. */
@media (max-width: 899px) {
  .page-opening .news-opening-inner {
    min-height: 0;
    padding-block: var(--space-8) var(--space-6);
  }

  .page-opening .news-opening-copy {
    max-width: none;
  }

  .page-opening .news-cover {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  }
}

/* Without a header photo (#183): a plain navy band — the title, the
   description and the counters, no empty right half. Only pages with news,
   documents or photos get it; a page with only text keeps its white heading. */
.page-opening--plain .news-opening-inner {
  min-height: 0;
  padding-block: var(--space-9) var(--space-8);
}

.page-opening--plain .news-opening-copy {
  max-width: 760px;
}

/* «10 новин · 6 документів · 9 фото» — each a jump to its chapter. */
.page-opening-counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--news-hair);
}

.page-opening-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--news-ink-soft);
  text-decoration: none;
}

.page-opening-count {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-heading);
  font-variant-numeric: tabular-nums;
  color: var(--news-ink);
}

.page-opening-counter:hover {
  color: var(--news-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-underline-offset: 5px;
}

@media (max-width: 899px) {
  .page-opening--plain .news-opening-inner {
    padding-block: var(--space-8);
  }

  .page-opening-count {
    font-size: 22px;
  }
}

:root[data-theme='low-vision'] .page-opening .news-cover {
  display: none;
}

:root[data-theme='low-vision'] .page-opening .news-opening-copy {
  max-width: none;
}

.text-page-contact {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.text-page-contact p {
  margin-bottom: var(--space-2);
}

.text-page-contact .btn {
  margin-top: var(--space-4);
}



.director-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.director-photo {
  width: 140px;
  height: 140px;
  flex: none;
}

.director-name {
  font-size: var(--fs-card-title);
  font-weight: 700;
  color: var(--ink);
}

.director-text {
  margin-top: var(--space-7);
}


.team-banner {
  margin-top: var(--space-7);
}

/* Optional intro above the cards on a people page (story #97). */
.team-intro {
  margin-top: var(--space-7);
}

.team-intro > :first-child {
  margin-top: 0;
}

.team-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.team-photo {
  width: 96px;
  height: 96px;
}

.team-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.team-name,
.team-position,
.team-meta,
.team-bio {
  
  flex-basis: 100%;
}

.team-name {
  font-size: var(--fs-nav);
  font-weight: 700;
  color: var(--ink);
}

.team-position {
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.team-meta {
  font-size: var(--fs-meta-sm);
  color: var(--muted);
}

.team-qualification {
  font-weight: 600;
  color: var(--accent);
}

.team-bio {
  font-size: var(--fs-meta-lg);
  color: var(--ink);
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .team-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Printable school-year list of a page's news (#184, section-report.ejs). */
.section-report {
  padding-block: var(--space-8) var(--space-10);
}

.section-report-back {
  margin-bottom: var(--space-6);
  font-size: var(--fs-meta-lg);
}

.section-report-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-report-title {
  margin-top: var(--space-2);
  font-size: var(--fs-h2-news);
  font-weight: 800;
  color: var(--ink);
}

.section-report-year {
  margin-top: var(--space-2);
  color: var(--muted);
}

.section-report-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.section-report-tools .chip-row {
  margin: 0;
}

.section-report-table {
  overflow-x: auto;
  border-top: 3px solid var(--blue);
}

.section-report-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.section-report-table th,
.section-report-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.section-report-table th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-report-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.section-report-link a {
  word-break: break-all;
}

/* The site frame is hidden in print by base.css; this is the report's own. */
@media print {
  .section-report-back,
  .section-report-tools {
    display: none !important;
  }

  .section-layout {
    display: block;
    padding: 0;
  }

  .section-report {
    padding: 0;
    max-width: none;
  }

  .section-report-table {
    overflow: visible;
    border-top-color: #000;
  }

  .section-report-table table {
    font-size: 11pt;
  }

  .section-report-link a {
    color: #000;
  }
}

/* css/components/contacts.css */
.contacts-page {
  max-width: 68ch;
  padding-block: var(--space-9) var(--space-10);
}

.contacts-info p {
  margin-bottom: var(--space-2);
}

.contacts-map {
  margin-top: var(--space-7);
}

.contacts-map iframe {
  display: block;
  border: 1px solid var(--line);
}

.contacts-map-link {
  margin-top: var(--space-2);
  font-size: var(--fs-meta-lg);
}

.contacts-hours {
  margin-top: var(--space-8);
}


.contact-form {
  margin-top: var(--space-8);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  font-size: 13px;
  color: var(--body);
  margin-bottom: var(--space-2);
}

.form-group input,
.form-group textarea {
  display: block;
  width: 100%;
  height: 48px;
  border: 1px solid var(--line-strong);
  padding-inline: var(--space-4);
  font-family: inherit;
  font-size: var(--fs-text);
}

.form-group textarea {
  height: auto;
  padding-block: var(--space-3);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
  border-color: var(--accent);
}

.form-group input.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--error);
}

.field-error {
  font-size: 13px;
  color: var(--error);
  margin-top: var(--space-2);
}


.contact-result {
  max-width: 60ch;
  padding-block: var(--space-9) var(--space-10);
}

.contact-result-message {
  margin-top: var(--space-4);
  margin-bottom: var(--space-7);
}

/* css/components/gallery.css */
.gallery-container {
  padding-block: var(--space-9);
}

.masonry-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

.gallery-item:hover,
.gallery-item:focus-visible {
  box-shadow: 0 6px 18px var(--blue-a16);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.gallery-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 899px) {
  .masonry-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .masonry-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img {
    transition: none;
  }
}

/* Albums (story #96): a gallery page lists albums. An in-text gallery reuses
   .masonry-gallery so the album viewer (album.js) finds its images; the
   <figure> wrapper needs .gallery-item to stay a block. */

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.album-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: box-shadow var(--transition-fast);
}

.album-card:hover,
.album-card:focus-visible {
  box-shadow: 0 6px 18px var(--blue-a16);
}

.album-card-cover {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
}

.album-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.album-card:hover .album-card-cover img {
  transform: scale(1.04);
}

.album-card-body {
  display: block;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.album-card-title {
  font-size: var(--fs-card-title);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.album-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.album-back {
  padding-top: var(--space-7);
}

.album-date {
  color: var(--muted);
  margin-bottom: var(--space-6);
}

.album-photo {
  margin: 0;
}

.album-photo .gallery-item {
  display: block;
}

@media (max-width: 899px) {
  .album-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .album-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* css/components/album.css */
/* The album (GitHub #201, #207; partials/album, album-thumbs, album-viewer
   and public/js/album.js): one framed photo at a time with ‹ › on the
   frame, its caption under it and the matrix of thumbnails under that, and
   the full-screen viewer. Every page template links this file; a template's
   own colours, faces and corners arrive through the tokens. Low vision: the
   photos are grey by base.css, the controls yellow on black (below). */

.album {
  margin: var(--space-7) 0;
}

.album-head {
  margin-bottom: var(--space-3);
}

.album-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-card-title);
  line-height: var(--lh-h3);
}

.album-title a {
  color: inherit;
}

.album-meta,
.album-source {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

/* Over the cards of a chapter's albums that are not in place. */
.album-more-title {
  margin: var(--space-7) 0 var(--space-4);
  color: var(--ink);
  font-size: var(--fs-card-title);
  line-height: var(--lh-h3);
}

.album-source a {
  color: var(--accent);
  font-weight: 600;
}

/* Who took a photo (growth story 34): «Фото: …» on its own line under a
   caption, an album's title or a slide, smaller than the caption itself. */
.photo-credit {
  display: block;
  font-size: var(--fs-meta-sm);
  font-style: normal;
}

/* The stage: ONE photo in a 3:2 frame. The slides stand side by side in the
   strip and the stage shows exactly one of them — the script moves the strip
   (a transform), nothing scrolls sideways. ‹ ›, the counter and «На весь
   екран» lie on the frame: .album-controls is as tall as the frame (its
   padding is two thirds of the stage's width) and lets clicks through. */
.album-stage {
  position: relative;
  max-width: 800px;
  overflow: hidden;
  /* Brought into view by a thumbnail: clear of the sticky header (and of a
     section page's chapter bar). */
  scroll-margin-top: var(--chp-offset, 96px);
}

.album-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
  transition: transform 0.35s ease;
}

.album-track--jump {
  transition: none;
}

.album-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.album-figure {
  margin: 0;
}

.album-frame {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--paper-2);
}

.album-frame:focus-visible,
.album-thumb:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.album-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.album--ready .album-frame,
.album-zoom {
  cursor: zoom-in;
}

.album-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
  color: var(--body);
  font-size: var(--fs-text);
  line-height: var(--lh-h3);
}

.album-caption-note {
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

.album-caption-album {
  color: var(--accent);
  font-weight: 600;
}

.album-controls {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  padding-top: 66.6667%;
  pointer-events: none;
}

.album-btn,
.album-counter {
  position: absolute;
  pointer-events: auto;
}

.album-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--chrome-bar-line);
  border-radius: var(--radius-button);
  background: var(--blue-950-a92);
  color: var(--chrome-bar-strong);
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.album-btn--prev,
.album-btn--next {
  top: 50%;
  translate: 0 -50%;
}

.album-btn--prev {
  left: var(--space-3);
}

.album-btn--next {
  right: var(--space-3);
}

.album-btn--full {
  right: var(--space-3);
  bottom: var(--space-3);
  width: auto;
  height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--fs-meta-lg);
  font-weight: 600;
}

.album-btn:hover,
.album-btn:focus-visible {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

.album-btn:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
}

.album-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.album-btn[hidden],
.album-counter[hidden] {
  display: none;
}

.album-counter {
  bottom: var(--space-3);
  left: var(--space-3);
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-button);
  background: var(--blue-950-a92);
  color: var(--chrome-bar-strong);
  font-size: var(--fs-meta-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  pointer-events: none;
}

/* The matrix of thumbnails under the frame: small squares, the framed photo
   marked. */
.album-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 800px;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.album-thumbs-item {
  margin: 0;
}

.album-thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--paper-2);
}

.album-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.album-thumb:hover img,
.album-thumb[aria-current='true'] img {
  opacity: 1;
}

.album-thumb[aria-current='true'] {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* An album in place: «Усі N фото →» under its matrix. */
.album-all-line {
  margin: var(--space-3) 0 0;
}

.album-all {
  color: var(--accent);
  font-size: var(--fs-text);
  font-weight: 700;
}

@media (max-width: 899px) {
  .album-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .album-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .album-btn--prev {
    left: var(--space-2);
  }

  .album-btn--next {
    right: var(--space-2);
  }
}

/* The viewer: the page's dark band behind the photo, the stage snapping to
   each photo, the caption, and a strip of thumbnails at the bottom. */
.album-viewer-open {
  overflow: hidden;
}

.album-viewer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--blue-950-a92), var(--blue-950-a92)), var(--chrome-bar);
  color: var(--chrome-bar-strong);
}

.album-viewer[hidden] {
  display: none;
}

.album-viewer-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.album-viewer-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--fs-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-viewer-counter {
  margin: 0;
  color: var(--chrome-bar-ink);
  font-size: var(--fs-meta-lg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.album-viewer-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--chrome-bar-line);
  border-radius: var(--radius-button);
  background: var(--blue-950-a50);
  color: var(--chrome-bar-strong);
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.album-viewer-btn:hover,
.album-viewer-btn:focus-visible {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

.album-viewer-btn:focus-visible,
.album-viewer-stage:focus-visible,
.album-viewer-thumb:focus-visible,
.album-viewer-more a:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: -3px;
}

.album-viewer-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.album-viewer-main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.album-viewer-stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.album-viewer-slide {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0 var(--space-2);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.album-viewer-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.album-viewer-more a {
  color: var(--chrome-bar-strong);
  font-size: var(--fs-card-title);
  font-weight: 700;
}

.album-viewer-go {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.album-viewer-go--prev {
  left: var(--space-4);
}

.album-viewer-go--next {
  right: var(--space-4);
}

.album-viewer-info {
  max-width: 70ch;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4) 0;
  text-align: center;
}

.album-viewer-caption,
.album-viewer-note {
  margin: 0;
  line-height: var(--lh-h3);
}

.album-viewer-caption {
  font-size: var(--fs-text);
}

.album-viewer-note {
  color: var(--chrome-bar-ink);
  font-size: var(--fs-meta-lg);
}

.album-viewer-note a {
  color: var(--chrome-bar-strong);
  text-decoration: underline;
}

.album-viewer-caption[hidden],
.album-viewer-note[hidden] {
  display: none;
}

.album-viewer-strip {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.album-viewer-strip li {
  flex: 0 0 auto;
  margin: 0;
}

.album-viewer-strip li:first-child {
  margin-left: auto;
}

.album-viewer-strip li:last-child {
  margin-right: auto;
}

.album-viewer-thumb {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
}

.album-viewer-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-viewer-thumb:hover,
.album-viewer-thumb[aria-current='true'] {
  opacity: 1;
}

.album-viewer-thumb[aria-current='true'] {
  border-color: var(--accent-light);
}

@media (max-width: 767px) {
  .album-viewer-top {
    padding: var(--space-2) var(--space-3);
  }

  .album-viewer-go--prev {
    left: var(--space-2);
  }

  .album-viewer-go--next {
    right: var(--space-2);
  }

  .album-viewer-slide {
    padding: 0;
  }

  .album-viewer-strip {
    padding: var(--space-2) var(--space-3);
  }

  .album-viewer-thumb {
    width: 48px;
    height: 48px;
  }
}

/* Low vision: the controls yellow on black, the current photo in yellow. */
:root[data-theme='low-vision'] .album-btn,
:root[data-theme='low-vision'] .album-viewer-btn {
  border-color: var(--accent);
  color: var(--accent);
}

:root[data-theme='low-vision'] .album-thumb img,
:root[data-theme='low-vision'] .album-viewer-thumb {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .album-track {
    transition: none;
  }
}

/* css/components/section-page.css */
/* ==========================================================================
   «Розділи» — the info page as one calm column of chapters (#183,
   partials/section-page.ejs). Under the opening band: a slim sticky
   «На сторінці» bar naming only the parts that exist, then numbered chapters
   separated by thin navy rules — the text, the news, the documents, the
   photos. Long lists are folded after a few items, so a full page stays short
   and a sparse one stays tidy. A page with only text never gets here.
   ========================================================================== */

.section-page {
  --chp-header: 72px; /* the compact sticky site header */
  --chp-bar-h: 52px;
  --chp-gap: 72px; /* between chapters */
  --chp-offset: calc(var(--chp-header) + var(--chp-bar-h) + 20px);

  padding-block: var(--space-9) var(--space-10);
}

/* The tiered header (chrome.css) is taller when stuck: its two rows, 83px. */
@media (min-width: 1280px) {
  :root:not(.theme-header-centered):not(.theme-header-compact) .site-header--tiered ~ main .section-page,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact) .section-page {
    --chp-header: 83px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.chp-bar) {
    scroll-behavior: smooth;
  }
}

/* ---------- the chapter bar ---------- */

.chp-bar {
  position: sticky;
  top: var(--chp-header);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--chp-bar-h);
  margin-bottom: var(--space-9);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.chp-bar-label {
  flex: none;
  margin: 0;
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.chp-bar-list {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) 3px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.chp-bar-list::-webkit-scrollbar {
  display: none;
}

.chp-bar-list li {
  flex: none;
}

.chp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px var(--space-3);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.chp-chip:hover {
  background: var(--chrome-tint);
  color: var(--blue);
}

.chp-chip-count {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.chp-chip.is-active {
  background: var(--blue);
  color: var(--paper);
}

.chp-chip.is-active .chp-chip-count {
  color: var(--accent-light);
}

.chp-chip:focus-visible,
.chp-year:focus-visible,
.chp-btn:focus-visible,
.chp-report-link:focus-visible,
.chp-news-link:focus-visible,
.chp-doc-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- a chapter ---------- */

.chp {
  scroll-margin-top: var(--chp-offset);
}

.chp + .chp {
  margin-top: var(--chp-gap);
}

.chp-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--blue);
}

.chp-head--plain {
  grid-template-columns: minmax(0, 1fr);
}

/* The first chapter sits right under the bar (or the heading); a rule there
   would double it. */
.chp:first-of-type .chp-head {
  border-top: 0;
  padding-top: 0;
}

.chp-num {
  font-size: 56px;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: var(--ls-heading);
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}

.chp-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.chp-meta {
  margin: 6px 0 0;
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

/* ---------- buttons ---------- */

.chp-btn,
.chp-report-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  border: 1.5px solid var(--blue);
  background: var(--paper);
  color: var(--blue);
  font: inherit;
  font-size: var(--fs-button);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.chp-btn:hover,
.chp-report-link:hover {
  background: var(--chrome-tint);
}

.chp-btn[hidden] {
  display: none;
}

.chp-btn-count {
  font-weight: 600;
  color: var(--muted);
}

.chp-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.chp-expand {
  margin-top: var(--space-6);
}

.chp-expand::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.chp-expand[aria-expanded='true']::after {
  transform: translateY(2px) rotate(-135deg);
}

/* ---------- 01 text ---------- */

.chp-text {
  max-width: 68ch;
}

.chp-text > :first-child,
.chp-text-body > :first-child {
  margin-top: 0;
}

/* Reading rhythm for the editors' text inside the chapter: paragraphs,
   headings and lists get the air a single long column needs. */
.chp-text-body p,
.chp-text-body ul,
.chp-text-body ol,
.chp-text-body table {
  margin-bottom: var(--space-4);
}

.chp-text-body ul,
.chp-text-body ol {
  padding-left: 1.3em;
}

.chp-text-body h2,
.chp-text-body h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-weight: 800;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
}

.chp-text-body h2 {
  font-size: 22px;
}

.chp-text-body h3 {
  font-size: 19px;
}

.chp-text .director-card {
  margin-top: 0;
  margin-bottom: var(--space-7);
}

/* ---------- 02 news ---------- */

.chp-news-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.chp-years {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chp-year {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px var(--space-4);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--body);
  font-size: var(--fs-nav);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.chp-year:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chp-year.is-active {
  border-color: var(--blue);
  background: var(--chrome-tint);
  color: var(--blue);
}

.chp-year-count {
  font-size: 12px;
  color: var(--muted);
}

.chp-years-single {
  margin: 0;
  font-size: var(--fs-nav);
  font-weight: 600;
  color: var(--muted);
}

.chp-report-link {
  border-color: var(--line);
  padding-block: 7px;
}

.chp-report-link:hover {
  border-color: var(--blue);
}

/* The latest post across the column, then cards two by two. */
.chp-news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chp-news {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chp-news-media {
  display: block;
}

.chp-news-media .news-frame {
  padding: 0;
  box-shadow: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--chrome-tint);
}

.chp-news-media .news-frame::before {
  display: none;
}

.chp-news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.chp-news:hover .chp-news-media img {
  transform: scale(1.03);
}

.chp-news-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
}

.chp-news-copy > * {
  grid-column: 2;
}

.chp-news-date {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding-top: 2px;
  color: var(--blue);
}

.chp-news-day {
  font-size: 36px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--ls-heading);
  font-variant-numeric: tabular-nums;
}

.chp-news-month {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--muted);
}

.chp-news-title {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.chp-news-link {
  color: inherit;
  text-decoration: none;
}

/* The whole card is the link. */
.chp-news-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.chp-news:hover .chp-news-link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.chp-news-summary {
  margin: var(--space-2) 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}

/* Every card shows its summary: three lines at most beside the photo. */
.chp-news:not(.is-featured) .chp-news-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* A card without a cover: the date carries it, on a tinted ground. */
.chp-news--no-cover:not(.is-featured) {
  align-self: start;
  padding: var(--space-5);
  background: var(--chrome-tint);
  border-top: 3px solid var(--blue);
}

/* Featured: framed like the «Журнал» front, on a light tint. */
.chp-news.is-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-7) var(--space-7) var(--space-7) var(--space-6);
  background: var(--chrome-tint);
  border-top: 3px solid var(--blue);
}

.chp-news.is-featured.chp-news--no-cover {
  grid-template-columns: minmax(0, 1fr);
}

.chp-news.is-featured .chp-news-media {
  margin-right: 14px; /* room for the second sheet */
}

.chp-news.is-featured .chp-news-media .news-frame {
  padding: 7px;
  overflow: visible;
  background: var(--paper);
  box-shadow:
    0 22px 44px -24px var(--blue-shadow-a45),
    0 2px 6px var(--blue-shadow-a14);
}

.chp-news.is-featured .chp-news-media .news-frame::before {
  display: block;
  inset: 14px -14px -14px 14px;
  border-color: var(--blue-a28);
}

.chp-news.is-featured .chp-news-media img {
  height: 100%;
}

.chp-news.is-featured .chp-news-copy {
  display: block;
}

.chp-news-flag {
  margin: 0 0 var(--space-3);
}

.chp-news.is-featured .news-flag {
  background: var(--blue);
  color: var(--paper);
}

.chp-news.is-featured .chp-news-date {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 0;
}

.chp-news.is-featured .chp-news-day {
  font-size: 44px;
}

.chp-news.is-featured .chp-news-month {
  margin: 0;
  font-size: var(--fs-meta-lg);
  text-align: left;
}

.chp-news.is-featured .chp-news-title {
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

.chp-news.is-featured .chp-news-summary {
  margin-top: var(--space-4);
  font-size: 15.5px;
  line-height: 1.6;
}

.chp-news-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--accent);
}

.chp-news:hover .news-arrow {
  transform: translateX(3px);
}

/* A lone card after the featured one reads as a row, not half a grid. */
.chp-news.is-alone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.chp-news.is-alone.chp-news--no-cover {
  grid-template-columns: minmax(0, 1fr);
}

.chp-news-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* ---------- 03 documents ---------- */

.chp-docs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.chp-doc {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-2) var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--transition-fast);
}

.chp-doc[hidden] {
  display: none !important;
}

.chp-doc:hover {
  background: var(--paper-2);
}

.chp-doc-type {
  display: grid;
  place-items: center;
  width: 52px;
  height: 40px;
  border: 1.5px solid currentColor;
  background: var(--paper);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: var(--ls-filetype);
  color: var(--blue);
}

.chp-doc-type--pdf {
  color: var(--error);
}

.chp-doc-type--doc,
.chp-doc-type--docx,
.chp-doc-type--odt {
  color: var(--accent);
}

.chp-doc-link {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}

/* The whole row is the link. */
.chp-doc-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.chp-doc:hover .chp-doc-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.chp-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-4);
  margin: 4px 0 0;
  font-size: var(--fs-meta-lg);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.chp-doc-dl {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--line);
  color: var(--blue);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.chp-doc:hover .chp-doc-dl {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--paper);
}

/* ---------- tablets and phones ---------- */

@media (max-width: 1023px) {
  .chp-bar {
    margin-bottom: var(--space-7);
  }
}

@media (max-width: 767px) {
  .section-page {
    --chp-gap: 56px;
  }

  .chp-bar {
    gap: var(--space-3);
  }

  .chp-bar-label {
    display: none;
  }

  .chp-num {
    font-size: 40px;
  }

  .chp-title {
    font-size: 25px;
  }

  .chp-news-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .chp-years {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chp-year {
    flex: none;
  }

  .chp-report-link {
    align-self: flex-start;
  }

  .chp-news-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .chp-news.is-featured {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
  }

  /* The cards shrink to rows — a small thumbnail beside the date and the
     title — so ten news do not become ten screens. */
  .chp-news:not(.is-featured) {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
  }

  .chp-news:not(.is-featured) .chp-news-copy {
    display: block;
  }

  .chp-news:not(.is-featured) .chp-news-date {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    margin-bottom: 4px;
    padding: 0;
  }

  .chp-news:not(.is-featured) .chp-news-day {
    font-size: 22px;
  }

  .chp-news:not(.is-featured) .chp-news-month {
    margin: 0;
  }

  .chp-news:not(.is-featured) .chp-news-title {
    font-size: 16.5px;
  }

  .chp-news--no-cover:not(.is-featured) {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .chp-news-foot .chp-btn,
  .chp-expand {
    width: 100%;
    justify-content: center;
  }

  .chp-doc {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  .chp-doc-type {
    width: 44px;
    height: 36px;
    font-size: 10.5px;
  }

  .chp-doc-dl {
    display: none;
  }

  .chp-doc-link {
    font-size: 16px;
  }
}

/* ---------- motion, low vision ---------- */

@media (prefers-reduced-motion: reduce) {
  .chp-chip,
  .chp-btn,
  .chp-report-link,
  .chp-news-media img,
  .chp-doc,
  .chp-doc-dl {
    transition: none;
  }

  .chp-news:hover .chp-news-media img,
  .chp-news:hover .news-arrow {
    transform: none;
  }
}

:root[data-theme='low-vision'] .chp-news.is-featured,
:root[data-theme='low-vision'] .chp-news--no-cover:not(.is-featured) {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top-width: 3px;
}

:root[data-theme='low-vision'] .chp-news.is-featured .chp-news-media .news-frame {
  box-shadow: none;
  border: 1px solid var(--line);
}

:root[data-theme='low-vision'] .chp-news.is-featured .chp-news-media .news-frame::before {
  display: none;
}

:root[data-theme='low-vision'] .chp-year.is-active,
:root[data-theme='low-vision'] .chp-chip:hover,
:root[data-theme='low-vision'] .chp-btn:hover,
:root[data-theme='low-vision'] .chp-report-link:hover,
:root[data-theme='low-vision'] .chp-doc:hover {
  background: var(--paper);
  color: var(--blue);
  outline: 2px solid var(--blue);
}

:root[data-theme='low-vision'] .chp-doc-type {
  color: var(--blue);
  background: var(--paper);
}

:root[data-theme='low-vision'] .chp-chip.is-active .chp-chip-count {
  color: var(--paper);
}

/* css/components/authors.css */
/* ==========================================================================
   Authors (#188): the byline in a post's opening, the «Автори» cards at the
   end of a post, and the author page. Built on the «Журнал» styles of
   news.css (the navy opening, the rows, the section titles).
   ========================================================================== */

/* ---------- avatar: a photo, or the initials on a tint ---------- */

.author-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chrome-tint-line);
  color: var(--blue);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.author-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-av--initials {
  background: var(--accent-light);
  color: var(--blue-950);
}

.author-av--xs {
  width: 22px;
  height: 22px;
  font-size: 9px;
  letter-spacing: 0;
}

.author-av--card {
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.author-av--hero {
  width: 184px;
  height: 184px;
  font-size: 64px;
  box-shadow:
    0 0 0 8px var(--paper),
    0 28px 56px -18px var(--blue-shadow-a70);
}

/* ---------- byline in the navy opening ---------- */

.author-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.author-byline-part {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--news-ink-faint);
}

.author-byline-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--news-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--news-hair);
  transition: border-color var(--transition-fast);
}

.author-byline-person:hover {
  border-bottom-color: var(--accent-light);
}

/* Credited but not linked: an author without recorded consent has no page,
   so nothing here may look like a link. */
.author-byline-person--plain,
.author-byline-person--plain:hover {
  border-bottom-color: transparent;
}

.author-byline-person .author-av {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35);
}

.author-byline-sep {
  color: var(--news-hair);
}

/* ---------- «Автори» at the end of a post ---------- */

.author-cards {
  margin-top: var(--space-9);
}

.author-cards .news-section-title {
  margin-bottom: var(--space-5);
}

.author-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.author-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
  background: var(--chrome-tint);
  border: 1px solid var(--chrome-tint-line);
}

.author-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}

.author-role {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-meta-sm);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--blue);
  border: 1.5px solid var(--blue);
}

.author-role--photo {
  color: var(--blue);
  background: var(--paper);
}

.author-card-name {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.author-card-link {
  color: inherit;
  text-decoration: none;
}

/* The whole card is the click target; the name is the one link. */
.author-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.author-card:hover .author-card-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.author-card-link:focus-visible {
  outline: none;
}

.author-card-link:focus-visible::after {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.author-card-sign {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--body);
}

.author-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.author-card-more .news-arrow {
  width: 16px;
  height: 16px;
}

.author-card:hover .news-arrow {
  transform: translateX(3px);
}

/* ---------- author page: the navy band ---------- */

.author-hero-inner {
  padding-block: var(--space-6) var(--space-10);
}

.author-hero-grid {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.author-hero-sign {
  margin: var(--space-3) 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-light);
}

.author-hero .author-hero-bio {
  margin-top: var(--space-5);
  font-size: 17.5px;
}

.author-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--news-hair);
}

.author-stat {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--news-ink-faint);
}

.author-stat strong {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--news-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- author page: the publications ---------- */

.author-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-7);
  margin-bottom: var(--space-7);
}

.author-filters .chip-row {
  margin: 0;
}

.author-year + .author-year {
  margin-top: var(--space-9);
}

.author-year-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}

.author-year-count {
  font-size: var(--fs-meta-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

.author-row-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  letter-spacing: 0;
  text-transform: none;
}

.author-row-roles .author-role {
  font-size: 11px;
}

.author-row-co {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.author-more-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.author-more-status {
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.author-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 22px;
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.author-more-btn:hover {
  background: var(--blue);
  color: var(--paper);
}

.author-more-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- responsive ---------- */

@media (max-width: 899px) {
  .author-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .author-av--hero {
    width: 128px;
    height: 128px;
    font-size: 44px;
    box-shadow:
      0 0 0 6px var(--paper),
      0 20px 40px -16px var(--blue-shadow-a70);
  }

  .author-hero-inner {
    padding-bottom: var(--space-8);
  }
}

@media (max-width: 767px) {
  .author-cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .author-card {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .author-av--card {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }

  .author-stats {
    gap: var(--space-3) var(--space-6);
  }

  .author-stat strong {
    font-size: 24px;
  }

  .author-more-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .author-byline-person,
  .author-more-btn {
    transition: none;
  }

  .author-card:hover .news-arrow {
    transform: none;
  }
}

/* ---------- low-vision theme: black grounds, yellow rules ----------
   Its tokens turn the blues and tints yellow or black, so the tinted
   avatars and cards would lose their text; outline them instead. */

:root[data-theme='low-vision'] .author-av,
:root[data-theme='low-vision'] .author-av--initials {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: none;
}

:root[data-theme='low-vision'] .author-card {
  background: var(--paper);
  border: 2px solid var(--line);
}

:root[data-theme='low-vision'] .author-role {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

:root[data-theme='low-vision'] .author-byline-person {
  border-bottom-color: var(--line);
}

/* css/components/search.css */
/* The search results page (/poshuk): a wide field, then the hits grouped
   into pages, posts and documents. */
.search-page {
  padding-bottom: var(--space-11);
}

.search-form {
  display: flex;
  gap: var(--space-3);
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.search-form-input {
  appearance: none;
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
}

.search-form-input:focus {
  border-color: var(--accent);
}

.search-status {
  color: var(--body);
  margin-bottom: var(--space-7);
}

.search-status p {
  margin: 0;
}

.search-hint {
  color: var(--muted);
  font-size: 15px;
  margin-top: var(--space-2);
}

.search-group {
  margin-bottom: var(--space-9);
}

.search-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--blue);
  margin-bottom: var(--space-2);
}

.search-group-count {
  font-size: var(--fs-meta-lg);
  font-weight: 600;
  color: var(--muted);
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-result {
  max-width: 72ch;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.search-result-title {
  font-size: var(--fs-card-title);
  font-weight: 700;
  color: var(--blue);
}

.search-result-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.search-result-meta {
  margin-top: var(--space-1);
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.search-result-type {
  font-weight: 700;
  letter-spacing: var(--ls-filetype);
}

.search-result-snippet {
  margin-top: var(--space-2);
  color: var(--body);
  line-height: 1.6;
}

/* The words that matched. */
.search-page mark {
  background: #fdeeb0;
  color: inherit;
  padding-inline: 1px;
}

:root[data-theme='low-vision'] .search-page mark {
  background: var(--blue);
  color: var(--paper);
}

@media (max-width: 767px) {
  .search-form {
    flex-direction: column;
  }
}

/* css/components/transparency.css */
/* The transparency page (/prozorist): the article 30 items the school has
   published, one numbered row each, linking to the page or document. */
.transparency-page {
  padding-bottom: var(--space-11);
}

.transparency-lead {
  max-width: 720px;
  color: var(--body);
  margin-bottom: var(--space-7);
}

.transparency-list {
  max-width: 860px;
  margin: 0;
  padding-left: var(--space-6);
}

.transparency-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.transparency-link {
  font-weight: 700;
  color: var(--blue);
}

.transparency-meta {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* The other acts' items (growth story 28), under a heading of their own. */
.transparency-h2 {
  max-width: 860px;
  margin: var(--space-8) 0 var(--space-3);
}

/* css/components/md-blocks.css */
/* Blocks of the visual editor (story 24.3), emitted by
   src/lib/markdownSyntax.js: the three kinds of notice and the photo grid
   inside a text. The plain .md-callout and every older block stay in
   base.css. */

.md-callout-info {
  border-left-color: var(--blue);
  background: var(--line-soft);
}

.md-callout-warning {
  border-left-color: var(--callout-warning);
  background: var(--callout-warning-bg);
}

.md-callout-warning .md-callout-title {
  color: var(--callout-warning);
}

.md-callout-success {
  border-left-color: var(--callout-success);
  background: var(--callout-success-bg);
}

.md-callout-success .md-callout-title {
  color: var(--callout-success);
}

/* A gallery inside a text reuses the album grid (.masonry-gallery), so the
   album viewer opens its photos; three columns fit the text column better than
   the album page's four. */
.md-gallery {
  grid-template-columns: repeat(3, 1fr);
  margin: var(--space-5) 0;
}

.md-gallery .album-photo {
  width: auto;
}

@media (max-width: 600px) {
  .md-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Low vision: every notice is the same black box with a yellow edge — the
   three kinds keep their title, not their colour. */
:root[data-theme='low-vision'] .md-callout,
:root[data-theme='low-vision'] .md-callout-info,
:root[data-theme='low-vision'] .md-callout-warning,
:root[data-theme='low-vision'] .md-callout-success {
  border: 2px solid var(--accent);
  border-left-width: 6px;
  background: var(--paper);
  color: var(--ink);
}

:root[data-theme='low-vision'] .md-callout-title {
  color: var(--accent);
}

/* The button of «@кнопка» (growth story 31, decision G): white words on the
   accent, darker under the pointer, never underlined. [href] makes the rule
   one step more specific than a template's «text links» rule (.x-prose a),
   which used to paint the words in the link colour on the accent — the
   button was unreadable in «Класична». */
.md-button[href],
.md-button[href]:visited {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.md-button[href]:hover,
.md-button[href]:focus-visible {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--paper);
  text-decoration: none;
}

/* Low vision: yellow words and frame on black, the page's own colours. */
:root[data-theme='low-vision'] .md-button[href],
:root[data-theme='low-vision'] .md-button[href]:visited,
:root[data-theme='low-vision'] .md-button[href]:hover {
  border: 2px solid var(--accent);
  background: var(--paper);
  color: var(--accent);
  text-decoration: underline;
}

/* The text palette (story 32, B3, src/config/palette.js): a coloured word is
   <span class="c-<key>">, a highlight <mark class="fill-<key>">, a filled table
   cell <td class="fill-<key>">. Classes only, never a style attribute; the
   colours are tokens, so the low-vision mode turns them yellow and the fills
   transparent (tokens.css), and the school's two follow «Оформлення». */
.c-black {
  color: var(--pal-black);
}

.c-grey {
  color: var(--pal-grey);
}

.c-red {
  color: var(--pal-red);
}

.c-orange {
  color: var(--pal-orange);
}

.c-green {
  color: var(--pal-green);
}

.c-blue {
  color: var(--pal-blue);
}

.c-violet {
  color: var(--pal-violet);
}

.c-brown {
  color: var(--pal-brown);
}

.c-primary {
  color: var(--blue);
}

.c-accent {
  color: var(--accent);
}

/* A highlight keeps the text's own colour: the fills are light enough for
   the ink, the body text and the colour itself at 4.5:1. */
mark[class*='fill-'] {
  padding: 0 0.1em;
  color: inherit;
}

.fill-black,
.md-table .fill-black {
  background: var(--pal-black-tint);
}

.fill-grey,
.md-table .fill-grey {
  background: var(--pal-grey-tint);
}

.fill-red,
.md-table .fill-red {
  background: var(--pal-red-tint);
}

.fill-orange,
.md-table .fill-orange {
  background: var(--pal-orange-tint);
}

.fill-green,
.md-table .fill-green {
  background: var(--pal-green-tint);
}

.fill-blue,
.md-table .fill-blue {
  background: var(--pal-blue-tint);
}

.fill-violet,
.md-table .fill-violet {
  background: var(--pal-violet-tint);
}

.fill-brown,
.md-table .fill-brown {
  background: var(--pal-brown-tint);
}

.fill-primary,
.md-table .fill-primary {
  background: var(--primary-tint);
}

.fill-accent,
.md-table .fill-accent {
  background: var(--accent-tint);
}

/* Low vision: the fill is gone, so a highlighted word turns yellow instead —
   it still stands out from the white text around it. */
:root[data-theme='low-vision'] mark[class*='fill-'] {
  color: var(--accent);
}

/* A table with its own look (story 32, B1): the editor writes it as an HTML
   table inside .md-table — alignment, borders and fill per cell, the
   borders of the whole table. Two classes deep, one step above base.css's
   ".md-table th/td". A cell's own border is 2px, so in the collapsed
   table it wins over its neighbours' 1px lines. */
.md-table .cell-l {
  text-align: left;
}

.md-table .cell-c {
  text-align: center;
}

.md-table .cell-r {
  text-align: right;
}

.md-table .tbl-borders-dashed th,
.md-table .tbl-borders-dashed td {
  border-style: dashed;
  border-color: var(--line-strong);
}

.md-table .tbl-borders-none th,
.md-table .tbl-borders-none td {
  border-style: none;
}

.md-table .cell-border-solid {
  border: 2px solid var(--line-strong);
}

.md-table .cell-border-dashed {
  border: 2px dashed var(--line-strong);
}

.md-table .cell-border-none {
  border-style: hidden;
}

/* css/components/events.css */
/* The events calendar (growth story 09): a calendar page — the month agenda,
   «Найближчі події» grouped by day, the month links — one event's page, and
   the home page block «Найближчі події». Tokens only; no script. */

.events-page {
  padding-bottom: var(--space-11);
}

.events-intro {
  margin-bottom: var(--space-5);
}

.events-subscribe {
  margin: 0 0 var(--space-7);
  color: var(--muted);
}

.events-subscribe-link {
  font-weight: 700;
  color: var(--accent);
}

.events-block {
  max-width: 860px;
  margin-bottom: var(--space-9);
}

.events-block-title {
  font-weight: 800;
  font-size: var(--fs-card-title);
  color: var(--ink);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--blue);
}

.events-month-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.events-month-link {
  font-weight: 700;
  color: var(--accent);
}

.events-empty {
  color: var(--muted);
  padding-block: var(--space-5);
}

.events-day {
  margin-bottom: var(--space-7);
}

.events-day-title {
  font-size: var(--fs-text);
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 var(--space-3);
}

.events-day-title::first-letter {
  text-transform: uppercase;
}

.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events-item {
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-left: 3px solid var(--line);
  margin-bottom: var(--space-3);
}

.events-item-title {
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: var(--lh-h3);
  margin: 0;
}

.events-item-title a {
  color: var(--ink);
}

.events-item-meta {
  margin: var(--space-1) 0 0;
  color: var(--body);
  font-weight: 600;
}

.events-item-summary {
  margin: var(--space-1) 0 0;
  color: var(--muted);
}

.events-months {
  max-width: 860px;
}

.events-months-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One event. */
.event-page {
  max-width: var(--container);
  padding-bottom: var(--space-11);
}

.event-breadcrumbs {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-7);
  color: var(--muted);
  font-size: var(--fs-nav);
}

.event-breadcrumbs a {
  color: var(--accent);
}

.event-title {
  padding-top: var(--space-3);
  max-width: 68ch;
}

.event-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
  max-width: 68ch;
}

.event-fact {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-3);
}

.event-fact dt {
  color: var(--muted);
  font-weight: 600;
}

.event-fact dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.event-fact dd::first-letter {
  text-transform: uppercase;
}

.event-summary {
  max-width: 68ch;
  font-size: var(--fs-tagline);
  color: var(--body);
  margin: 0 0 var(--space-7);
}

.event-body {
  margin-bottom: var(--space-7);
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.event-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--accent);
}

/* «Найближчі події» on the home page. */
.home-events {
  padding-block: var(--space-10);
}

.home-events-heading {
  font-weight: 800;
  font-size: var(--fs-h2-news);
  color: var(--ink);
}

.home-events-list {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.home-event {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--line);
  background: var(--paper);
}

.home-event-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: var(--space-2) var(--space-3);
  background: var(--blue);
  color: var(--paper);
  text-align: center;
}

.home-event-day {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-event-month {
  font-size: var(--fs-meta-lg);
  font-weight: 600;
}

.home-event-title {
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: var(--lh-h3);
  margin: 0;
}

.home-event-title a {
  color: var(--ink);
}

.home-event-meta {
  margin: var(--space-1) 0 0;
  color: var(--muted);
}

@media (max-width: 767px) {
  .event-fact {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-events {
    padding-block: var(--space-8);
  }
}

/* css/components/collections.css */
/* The two collection pages (growth story 26) — «Документи» and
   «Фотоальбоми»: a text above the list, a filter form whose every state is
   an address, the count, then the rows or the album cards. The document
   rows reuse the section page's .chp-doc rows (section-page.css), the album
   cards the gallery's (gallery.css). */

.collection {
  padding-block: var(--space-9) var(--space-10);
}

.collection-intro {
  max-width: 72ch;
  margin-bottom: var(--space-7);
}

.collection-intro > :first-child {
  margin-top: 0;
}

.collection-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.collection-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 180px;
}

.collection-filter--wide {
  flex: 1 1 260px;
}

.collection-filter label {
  font-size: var(--fs-meta-lg);
  font-weight: 600;
  color: var(--ink);
}

.collection-filter select,
.collection-filter input {
  appearance: none;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-text);
}

.collection-filter select:focus,
.collection-filter input:focus {
  border-color: var(--accent);
}

.collection-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.collection-reset {
  color: var(--blue);
  font-weight: 600;
}

.collection-result {
  color: var(--muted);
  margin-bottom: var(--space-5);
}

.collection-docs {
  border-top: 2px solid var(--blue);
}

.collection-doc-page {
  color: inherit;
}

.album-card-page {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-meta-lg);
  color: var(--body);
}

.chp-albums {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}

.chp-people {
  margin-top: 0;
}

@media (max-width: 899px) {
  .collection-filter {
    flex: 1 1 100%;
  }
}

/* css/chrome.css */
.topbar {
  height: 40px;
  background: var(--chrome-bar);
  border-bottom: 1px solid var(--chrome-bar);
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.topbar-contacts {
  display: flex;
  gap: var(--space-6);
  font-size: var(--fs-meta-lg);
  color: var(--chrome-bar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  min-width: 0;
}

.topbar-contacts a {
  color: inherit;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* The one highlighted link in the top bar (Налаштування → Контакти). */
.topbar-important {
  background: var(--error);
  color: var(--paper);
  font-size: var(--fs-meta-lg);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-important:hover,
.topbar-important:focus-visible {
  background: var(--error-dark);
  color: var(--paper);
}

.mobile-menu-overlay a.mobile-important {
  background: var(--error);
  color: var(--paper);
  font-weight: 700;
  padding-inline: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Focus ring on the dark bands. The site-wide ring (base.css) is the accent blue, which on the navy
   top bar and footer is 1.6:1 — a keyboard user could not see where they were (review 2026-09, F-02;
   WCAG 2.4.7, 1.4.11). --chrome-bar-strong is the bands' own white and follows the theme, as the
   dark news band already does (news.css). Not .mobile-important in the mobile menu, which the review
   also listed: the ring sits outside that red button, on the menu's white paper, where the accent
   already reads and a white ring would vanish. */
.topbar :focus-visible,
.site-footer :focus-visible,
.announcement :focus-visible {
  outline: 3px solid var(--chrome-bar-strong);
  outline-offset: 3px;
}

.low-vision-toggle {
  background: transparent;
  border: 1px solid var(--chrome-bar-line);
  color: var(--chrome-bar-strong);
  font-size: var(--fs-meta-lg);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-family: inherit;
}

.low-vision-toggle:hover {
  border-color: var(--chrome-bar-strong);
}

.low-vision-toggle[aria-pressed='true'] {
  background: var(--chrome-bar-strong);
  color: var(--chrome-bar);
  border-color: var(--chrome-bar-strong);
}

.chrome-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chrome-social a {
  display: flex;
  color: var(--muted);
}

.chrome-social svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

.topbar .chrome-social a {
  color: var(--chrome-bar-ink);
}

.topbar .chrome-social a:hover {
  color: var(--chrome-bar-strong);
}

.topbar .chrome-social svg {
  width: 18px;
  height: 18px;
}


/* A minimum height, not a fixed one: the tiered header (a menu or a name
   too long for one row, below) is taller, and a menu whose labels are too
   long even for that wraps rather than run past the edge of the screen. */
.site-header {
  display: flex;
  flex-direction: column;
  min-height: 116px;
  background: var(--chrome-tint);
  border-bottom: 1px solid var(--chrome-tint-line);
  position: sticky;
  top: 0;
  z-index: 40;
  transition: min-height var(--transition-base);
}

.site-header.is-sticky {
  min-height: 72px;
}

/* The row fills the header's content box, as the height of 100% it had
   before did: inheriting the header's min-height instead would add its
   bottom border on top — 117 and 73 px, and the chapter bar (top: 72px in
   section-page.css) under the stuck header's edge. Its width is set because
   auto inline margins (.container) keep a flex item from stretching. */
.header-inner {
  flex-grow: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
}

/* Short of room, the logo gives way first: its wordmark wraps, down to its
   longest word, before the menu has to take a second row. Flexbox shares a
   shortage in proportion to the shrink factors, so the logo's is large
   enough that the menu's share rounds to nothing — any share at all would
   wrap a menu that fits exactly. Once the logo is down to its longest word
   the menu takes the rest. */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 1000000 auto;
  color: inherit;
}

.logo-mark {
  flex: none;
  width: 84px;
  height: 84px;
  font-weight: 800;
  font-size: 32px;
  padding: 0;
  transition: width var(--transition-base), height var(--transition-base);
}


.site-header.is-sticky .logo-mark {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

.logo-wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 12em;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.logo-line-1 {
  font-weight: 700;
  font-size: 19px;
  color: var(--blue);
}

.logo-line-2 {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.logo-line-3 {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.site-header.is-sticky .logo-line-1 {
  font-size: 15px;
}

.site-header.is-sticky .logo-line-2 {
  font-size: 12.5px;
}

.site-header.is-sticky .logo-line-3 {
  font-size: 10.5px;
}

/* A long name (header.liquid, logo--long) in a smaller size over two or
   three lines, instead of one line as wide as the menu; such a header is
   tiered (below), so the menu does not compete with it for the row. */
.logo--long .logo-wordmark {
  max-width: 19em;
  line-height: 1.2;
}

.logo--long .logo-line-1 {
  font-size: 16px;
}

.site-header.is-sticky .logo--long .logo-line-1 {
  font-size: 13px;
}

@media (max-width: 479px) {
  .logo--long .logo-mark {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  .logo--long .logo-line-1 {
    font-size: 14px;
  }
}


.logo-mark--image {
  object-fit: contain;
  background: none;
  border: none;
  mix-blend-mode: multiply;
}

/* On the black low-vision header, multiply would black the logo out. */
:root[data-theme='low-vision'] .logo-mark--image {
  mix-blend-mode: normal;
}

/* One row from 1280px: the logo, the menu, the search and the CTA. The
   sizes are those a school's full menu (four sections, three links and
   «Вступ») fits at inside the 1180px container — the container's width from
   1268px up, so there is no larger step at wider screens. The menu sits
   against the search; the room left over is between it and the logo. A
   menu whose labels are too long even so wraps, left-aligned, as a last
   resort — never past the edge. */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1) 12px;
  flex: 0 1 auto;
  margin-left: auto;
}

.main-nav > a,
.mega-menu-trigger {
  white-space: nowrap;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  padding-block: var(--space-2);
}

.main-nav > a:hover,
.mega-menu-trigger:hover {
  color: var(--accent);
}

.main-nav > a.active,
.mega-menu-trigger.active {
  border-bottom-color: var(--accent);
}

.mega-menu-trigger {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mega-menu-wrap {
  position: relative;
}

/* The dropdown sits on a white page, so it has to read as a separate layer:
   a blue edge on top, a shadow under it, and a small pointer back to the
   menu item it belongs to. */
.mega-menu-panel {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  background: var(--chrome-tint);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  box-shadow:
    0 2px 6px var(--blue-950-a08),
    0 18px 44px var(--blue-950-a18);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--space-3);
  min-width: 460px;
  z-index: 50;
  animation: mega-menu-in var(--transition-fast);
  /* mega-menu.js moves a panel that would cross the window's edge back
     inside it (--mega-shift); the pointer below moves the other way, so it
     stays on its item. A property of its own, so the opening animation's
     transform does not undo it. */
  translate: var(--mega-shift, 0);
}

/* Pointer: a square turned 45deg, sharing the panel's blue top edge. */
.mega-menu-panel::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--chrome-tint);
  border-top: 3px solid var(--blue);
  border-left: 3px solid var(--blue);
  transform: translateX(-50%) rotate(45deg);
  margin-left: calc(-1 * var(--mega-shift, 0px));
}

/* Bridges the gap between the menu item and the panel, so moving the mouse
   down does not leave both and close the dropdown. */
.mega-menu-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--space-4) + 3px);
}

@keyframes mega-menu-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu-panel {
    animation: none;
  }
}

.mega-menu-panel[hidden] {
  display: none;
}

.mega-menu-panel a {
  display: block;
  font-size: var(--fs-nav-sub);
  font-weight: 500;
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid transparent;
  /* A long page title wraps inside its column rather than widening the
     whole panel past the edge of the screen. */
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.mega-menu-panel a:hover,
.mega-menu-panel a:focus-visible {
  background: var(--paper);
  box-shadow: 0 1px 3px var(--blue-950-a10);
  color: var(--blue);
  border-left-color: var(--accent);
}

.mega-menu-panel a.active {
  color: var(--accent);
  font-weight: 700;
  border-left-color: var(--accent);
}

/* The open item keeps its colour and turns its arrow, so it is clear which
   menu the panel belongs to. */
.mega-menu-trigger[aria-expanded='true'] {
  color: var(--accent);
}

.mega-menu-trigger > span {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.mega-menu-trigger[aria-expanded='true'] > span {
  transform: rotate(180deg);
}

/* The search and the CTA, at the row's end. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.nav-cta {
  white-space: nowrap;
  background: var(--blue);
  color: var(--paper);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  font-size: var(--fs-button);
}

.nav-cta:hover {
  background: var(--blue-900);
}

.mobile-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hamburger-bar {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--blue);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  overflow-y: auto;
  padding: var(--space-8) var(--space-5);
}

.mobile-menu-overlay a,
.mobile-about-toggle {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.mobile-about-panel {
  padding-left: var(--space-5);
}

.mobile-about-panel a {
  min-height: 48px;
  font-size: var(--fs-nav-sub);
  font-weight: 500;
}

.mobile-menu-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

.site-header.is-sticky .nav-cta {
  padding-block: var(--space-1);
  line-height: 1.3;
}

/* From 1280px the logo is the one-row size, and stuck it keeps its width:
   the mark gets smaller, the room it gives up becomes a margin, and the
   wordmark keeps its size — so the stuck header's row breaks exactly where
   the full one did and no menu item jumps between rows on scrolling. */
@media (min-width: 1280px) {
  .header-inner {
    gap: var(--space-4);
  }

  .logo-mark {
    width: 72px;
    height: 72px;
    transition:
      width var(--transition-base),
      height var(--transition-base),
      margin var(--transition-base);
  }

  .site-header.is-sticky .logo-mark {
    width: 56px;
    height: 56px;
    margin-inline-end: 16px;
  }

  .site-header.is-sticky .logo-line-1 {
    font-size: 19px;
  }

  .site-header.is-sticky .logo-line-2 {
    font-size: 15px;
  }

  .site-header.is-sticky .logo-line-3 {
    font-size: 12px;
  }

  .site-header.is-sticky .logo--long .logo-line-1 {
    font-size: 16px;
  }
}

/* Below 1280px the menu folds into the burger, the CTA with it (the mobile
   menu lists it), and the search sits right, next to the burger. The logo
   is all that can give way: it may shrink below its longest word, which
   then breaks rather than pushing the menu button off a phone's screen. */
@media (max-width: 1279px) {
  .logo {
    min-width: 0;
  }

  .main-nav,
  .header-actions .nav-cta {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .mobile-menu-toggle {
    display: flex;
  }
}

/* --- Header: tiered -------------------------------------------------------
   A menu of more than eight top-level items or a long name
   (site-header--tiered, header.liquid), and every menu in the low-vision
   mode, whose larger type no school menu fits in one row with: two
   deliberate rows from 1280px — the logo with the search and the CTA, then
   the whole menu, left-aligned under the logo, the container's full width.
   The centred and compact headers lay themselves out (variants.css). */
@media (min-width: 1280px) {
  :root:not(.theme-header-centered):not(.theme-header-compact) .site-header--tiered .header-inner,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .header-inner {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0;
    padding-block: var(--space-3) 0;
  }

  :root:not(.theme-header-centered):not(.theme-header-compact) .site-header--tiered .header-actions,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .header-actions {
    margin-left: auto;
  }

  :root:not(.theme-header-centered):not(.theme-header-compact) .site-header--tiered .main-nav,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .main-nav {
    order: 1;
    flex: 1 0 100%;
    min-height: 48px;
    margin-left: 0;
    column-gap: var(--space-4);
  }

  :root:not([data-theme='low-vision']):not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered
    .main-nav
    > a,
  :root:not([data-theme='low-vision']):not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered
    .mega-menu-trigger {
    font-size: 15px;
  }

  /* Stuck: both rows tighter, the logo smaller — its width no longer
     decides anything, the menu has a row of its own. Section pages move
     their chapter bar under this height (section-page.css). */
  :root:not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered.is-sticky
    .header-inner,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .site-header.is-sticky
    .header-inner {
    padding-block: var(--space-1) 0;
  }

  :root:not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered.is-sticky
    .logo-mark,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .site-header.is-sticky
    .logo-mark {
    width: 40px;
    height: 40px;
    margin-inline-end: 0;
    font-size: 16px;
  }

  :root:not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered.is-sticky
    .logo-line-1,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .site-header.is-sticky
    .logo-line-1 {
    font-size: 15px;
  }

  :root:not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered.is-sticky
    .main-nav,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .site-header.is-sticky
    .main-nav {
    min-height: 36px;
  }

  :root:not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered.is-sticky
    .main-nav
    > a,
  :root:not(.theme-header-centered):not(.theme-header-compact)
    .site-header--tiered.is-sticky
    .mega-menu-trigger,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .site-header.is-sticky
    .main-nav
    > a,
  :root[data-theme='low-vision']:not(.theme-header-centered):not(.theme-header-compact)
    .site-header.is-sticky
    .mega-menu-trigger {
    padding-block: 2px;
    line-height: 1.3;
  }
}

/* The low-vision mode keeps its larger menu type (tokens.css); the menu has
   a row of its own there (above). */
:root[data-theme='low-vision']:not(.theme-header-compact) .main-nav > a,
:root[data-theme='low-vision']:not(.theme-header-compact) .mega-menu-trigger {
  font-size: var(--fs-nav-main);
}


/* Site search in the header. The menu leaves no room for a standing field,
   so the header shows the magnifier only — the field's label. Focusing the
   field (a click on the magnifier, or Tab) opens it to the left, over the
   menu, as a layer of its own; leaving it folds it away again. */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--blue);
  cursor: pointer;
}

.header-search-toggle:hover,
.header-search:focus-within .header-search-toggle {
  color: var(--accent);
}

.header-search-toggle svg {
  width: 20px;
  height: 20px;
}

/* Folded: no width, no border, invisible, but still in the tab order. */
.header-search-input {
  appearance: none;
  position: absolute;
  top: 50%;
  right: 100%;
  z-index: 45;
  width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateY(-50%);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-nav-main);
  transition:
    width var(--transition-fast),
    opacity var(--transition-fast);
}

.header-search:focus-within .header-search-input {
  width: min(20rem, 60vw);
  height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--accent);
  opacity: 1;
  box-shadow: 0 8px 24px var(--blue-950-a10);
}

.header-search-input::placeholder {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .header-search-input {
    transition: none;
  }
}

/* On a phone the wordmark, the magnifier and the burger no longer fit in
   one row: at 360px the burger ends 6px past the edge. The mobile menu
   opens with a full search field of its own, so the magnifier goes — and
   with it the actions group, which would otherwise still claim a gap. */
@media (max-width: 479px) {
  .header-search,
  .header-actions {
    display: none;
  }
}

/* The same search at the top of the mobile menu, as wide as the menu. */
.mobile-search {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.mobile-search-input {
  appearance: none;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  /* 16px or more, or iOS zooms the page in when the field gets focus. */
  font-size: 16px;
}

.mobile-search-input:focus {
  border-color: var(--accent);
}

.mobile-search-button {
  min-height: 48px;
  padding: 0 var(--space-5);
  background: var(--blue);
  color: var(--paper);
  border: none;
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: 700;
  cursor: pointer;
}

.mobile-search-button:hover {
  background: var(--blue-900);
}

/* Site-wide announcement strip under the header, on every page: "alert" is for the rare urgent case
   (remote learning tomorrow), "info" for a calm notice. */
.announcement {
  padding-block: var(--space-3);
  font-weight: 600;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.announcement-icon {
  font-size: 1.25em;
  line-height: 1;
}

.announcement--alert {
  background: var(--error);
  color: var(--paper);
  border-bottom: 3px solid var(--error-dark);
}

.announcement--info {
  background: var(--blue);
  color: var(--paper);
}
.site-footer {
  background: var(--chrome-bar);
  color: var(--chrome-bar-ink);
  padding-block: var(--space-9);
  font-size: 13.5px;
  line-height: 1.9;
}

/* Columns are switchable from the admin panel, so the row is a wrapping
   flex line rather than a fixed 4-column grid: a hidden column leaves no gap. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.footer-col {
  flex: 1 1 160px;
  min-width: 0;
}

.footer-about {
  flex: 1.4 1 240px;
}

.footer-contacts p {
  margin: 0;
}

.footer-contacts .chrome-social {
  margin-block: var(--space-3);
}

.footer-cta {
  display: inline-block;
  margin-top: var(--space-3);
  border: 1px solid var(--chrome-bar-line);
  padding: var(--space-1) var(--space-4);
  color: var(--chrome-bar-strong);
  font-weight: 600;
}

.footer-cta:hover {
  border-color: var(--chrome-bar-strong);
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
}

.footer-bottom p {
  margin: 0;
}

.footer-col h2 {
  color: var(--chrome-bar-strong);
  font-size: 13px;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-col a {
  display: block;
  color: var(--chrome-bar-ink);
  padding-block: var(--space-1);
}

.footer-col a:hover {
  color: var(--chrome-bar-strong);
}

.footer-org-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--chrome-bar-strong);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.footer-tagline {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-light);
  margin-top: var(--space-4);
}

.footer-contacts .chrome-social a,
.footer-contacts a {
  color: var(--chrome-bar-ink);
}

@media (max-width: 767px) {
  .footer-inner {
    flex-direction: column;
    gap: var(--space-7);
  }
}

/* Phones: the top bar keeps only its buttons; the contacts are in the footer. */
@media (max-width: 767px) {
  .topbar-contacts {
    display: none;
  }

  .topbar-inner {
    justify-content: flex-end;
  }

  .topbar-actions {
    gap: var(--space-3);
  }

  .topbar .chrome-social {
    display: none;
  }

  .low-vision-toggle,
  .topbar-important {
    white-space: nowrap;
  }
}

/* css/components/variants.css */
/* Layout variants of «Оформлення» (growth story 13). Each is a class on
   <html> — theme-header-*, theme-hero-*, theme-radius-*, theme-footer-* —
   put there by layouts/base.liquid from an allow-list (src/config/theme.js).
   The defaults (classic, photo, sharp, dark) are what the other stylesheets
   already draw, so they have no rules here. Tokens only: no brand literal,
   no !important. Linked after chrome.css and the component files whose rules
   it restyles. */

/* --- Corners ---------------------------------------------------------------
   The radii themselves are tokens (--radius, --radius-button, --radius-media,
   written by /theme.css; base.css applies the first two to fields, cards and
   buttons). A few buttons carry a class that neither [class*='btn'] nor
   `button` matches, and two photo frames round on their own. */
.nav-cta,
.footer-cta,
.topbar-important {
  border-radius: var(--radius-button);
}

.news-card-photo,
.album-card-cover {
  border-radius: var(--radius-media);
}

/* Menu items drawn as a list with an underline or a rule stay square: a
   rounded box would bend the line. */
.mega-menu-trigger,
.mobile-about-toggle {
  border-radius: 0;
}

/* --- Header: compact ------------------------------------------------------
   No top bar (base.liquid leaves it out): one white row with the logo, the
   menu, the search and .header-tools — the highlighted link and the
   low-vision switch the top bar carried. */
.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.header-tools[hidden] {
  display: none;
}

.header-tools .low-vision-toggle {
  border-color: var(--line-strong);
  color: var(--ink);
}

.header-tools .low-vision-toggle:hover {
  border-color: var(--ink);
}

.header-tools .low-vision-toggle[aria-pressed='true'] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

.theme-header-compact .site-header {
  min-height: 88px;
  background: var(--paper);
  border-bottom-color: var(--line);
}

.theme-header-compact .site-header.is-sticky {
  min-height: 64px;
}

.theme-header-compact .logo-mark {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

.theme-header-compact .site-header.is-sticky .logo-mark {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

/* Phones: the highlighted link is at the top of the mobile menu already. */
@media (max-width: 767px) {
  .header-tools .topbar-important {
    display: none;
  }

  .header-tools .low-vision-toggle {
    font-size: var(--fs-meta-sm);
    padding-inline: var(--space-2);
  }
}

/* The one row also carries .header-tools, so it gets a wider row than the
   page's container, and below 1440px — where even that is too narrow for a
   school's full menu beside them — the menu folds into the menu button one
   step earlier than in the other headers. */
.theme-header-compact .header-inner {
  max-width: 1440px;
  gap: var(--space-5);
}

.theme-header-compact .main-nav {
  gap: var(--space-1) var(--space-3);
}

.theme-header-compact .main-nav > a,
.theme-header-compact .mega-menu-trigger {
  font-size: 15px;
}

@media (max-width: 1439px) {
  .theme-header-compact .main-nav {
    display: none;
  }

  .theme-header-compact .mobile-menu-toggle {
    display: flex;
  }

  .theme-header-compact .header-inner {
    justify-content: flex-start;
  }

  .theme-header-compact .header-actions {
    margin-left: auto;
  }

  .theme-header-compact .header-actions .nav-cta {
    display: none;
  }
}

/* Phones: the low-vision switch does not fit beside the logo and the menu
   button, so it takes a row of its own above them — where the top bar
   carries it in the other headers. */
@media (max-width: 767px) {
  .theme-header-compact .header-inner {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding-block: var(--space-2);
  }

  .theme-header-compact .header-tools {
    order: -1;
    flex-basis: 100%;
    justify-content: flex-end;
  }

  /* Stuck, that row goes, as the top bar scrolls away in the other headers:
     the header keeps its compact 64px, and the chapter bar of a page of
     several parts (section-page.css, top: 72px) is not hidden under it. */
  .theme-header-compact .site-header.is-sticky .header-tools {
    display: none;
  }

  /* No basis, so the row never wraps the menu button onto a third line: the
     logo grows to its own width where there is room and shrinks where there
     is not. */
  .theme-header-compact .logo {
    flex: 1 1 0;
    max-width: max-content;
  }
}

/* Below 480px the search is in the mobile menu only (chrome.css): the menu
   button keeps to the right edge without it. */
@media (max-width: 479px) {
  .theme-header-compact .mobile-menu-toggle {
    margin-left: auto;
  }
}

/* --- Header: centred -------------------------------------------------------
   From the tablet edge up: the logo and wordmark centred on a row of their
   own, the menu centred on the row below; the search on the right of the
   logo row, the menu button (below 1280px, where the menu folds) on its
   left. Below 900px every header is the ordinary phone header. */
@media (min-width: 900px) {
  .theme-header-centered .site-header,
  .theme-header-centered .site-header.is-sticky {
    min-height: 0;
  }

  .theme-header-centered .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    row-gap: var(--space-2);
    padding-block: var(--space-4) var(--space-3);
  }

  .theme-header-centered .logo {
    grid-column: 2;
    grid-row: 1;
  }

  .theme-header-centered .header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .theme-header-centered .mobile-menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .theme-header-centered .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    margin-left: 0;
  }

  /* The menu has the whole second row: the full menu type and spacing. */
  .theme-header-centered .main-nav {
    column-gap: var(--space-6);
  }

  .theme-header-centered .main-nav > a,
  .theme-header-centered .mega-menu-trigger {
    font-size: var(--fs-nav-main);
  }
}

/* --- First screen: split ---------------------------------------------------
   The panorama's markup (partials/home/hero.liquid, .hero--panorama) laid out
   as two columns on the page's own paper: the text on the left, the photo
   framed on the right with the card radius and the long soft shadow. The
   `plain` variant needs no rule: the view model hands the hero over without
   its photo, and it renders as .hero--no-photo. */
.theme-hero-split .hero--panorama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--space-9);
  max-width: var(--container);
  min-height: 0;
  margin-inline: auto;
  padding: var(--space-9) var(--space-8);
  background: none;
  color: inherit;
  overflow: visible;
  isolation: auto;
}

.theme-hero-split .hero--panorama::before {
  display: none;
}

.theme-hero-split .hero--panorama .hero-inner {
  order: 1;
  display: block;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.theme-hero-split .hero--panorama .hero-copy {
  max-width: none;
}

.theme-hero-split .hero--panorama .hero-media {
  order: 2;
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-media);
  box-shadow: 0 18px 44px var(--blue-shadow-a22);
  -webkit-mask-image: none;
  mask-image: none;
}

.theme-hero-split .hero--panorama .hero-media::after {
  display: none;
}

.theme-hero-split .hero--panorama .hero-media img {
  object-position: center;
}

.theme-hero-split .hero--panorama .hero-title {
  color: var(--blue);
}

/* Two columns: the title has half the width the panorama gives it, so its
   size follows the screen, and the longest word of the name stays whole. */
@media (min-width: 768px) {
  .theme-hero-split .hero--panorama .hero-title {
    font-size: clamp(var(--fs-h2-news), 4.4vw, var(--fs-h1));
  }
}

/* The low-vision mode hides the photo: the text, its title included, takes
   the whole row. */
:root[data-theme='low-vision'].theme-hero-split .hero--panorama {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-theme='low-vision'].theme-hero-split .hero--panorama .hero-title {
  max-width: none;
}

.theme-hero-split .hero--panorama .hero-tagline {
  color: var(--accent);
}

.theme-hero-split .hero--panorama .hero-lead {
  max-width: 46ch;
  color: var(--body);
}

.theme-hero-split .hero--panorama .md-callout {
  margin: var(--space-5) 0;
  background: var(--line-soft);
  border-left-color: var(--blue);
}

.theme-hero-split .hero--panorama .md-callout-title {
  color: var(--blue);
}

.theme-hero-split .hero--panorama .md-callout p {
  color: var(--body);
}

.theme-hero-split .hero--panorama .btn-primary {
  background: var(--blue);
  border-color: transparent;
  color: var(--paper);
}

.theme-hero-split .hero--panorama .btn-primary:hover {
  background: var(--blue-900);
  border-color: transparent;
}

.theme-hero-split .hero--panorama .btn-outline {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}

.theme-hero-split .hero--panorama .btn-outline:hover {
  background: var(--paper-2);
  border-color: var(--blue);
}

.theme-hero-split .hero--panorama .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1279px) {
  .theme-hero-split .hero--panorama {
    padding-inline: 32px;
  }
}

@media (max-width: 767px) {
  .theme-hero-split .hero--panorama {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding: var(--space-8) var(--space-5);
  }
}

/* --- Footer: light ---------------------------------------------------------
   The header's tint instead of the dark band: text in --body, links in the
   accent (checked at 4.5:1 on this tint by the «Оформлення» form), a hairline
   on top where the dark band had its own edge. */
.theme-footer-light .site-footer {
  background: var(--chrome-tint);
  color: var(--body);
  border-top: 1px solid var(--chrome-tint-line);
}

.theme-footer-light .footer-col h2 {
  color: var(--ink);
}

.theme-footer-light .footer-org-name {
  color: var(--blue);
}

.theme-footer-light .footer-tagline {
  color: var(--accent);
}

.theme-footer-light .footer-col a,
.theme-footer-light .footer-contacts a,
.theme-footer-light .footer-contacts .chrome-social a {
  color: var(--accent);
}

.theme-footer-light .footer-col a:hover,
.theme-footer-light .footer-contacts .chrome-social a:hover {
  color: var(--blue);
}

.theme-footer-light .footer-cta {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-footer-light .footer-cta:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.theme-footer-light .footer-bottom {
  border-top-color: var(--chrome-tint-line);
  color: var(--muted);
}

.theme-footer-light .site-footer :focus-visible {
  outline-color: var(--accent);
}

/* css/style.css */
.honeypot-field {
  position: absolute;
  left: -10000px;
  top: -10000px;
}

.draft-preview-banner {
  background: #fff3cd;
  border: 1px solid #ffe08a;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
}