/* 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. */

/* Commissioner in two files of one face: the full file only for what lies
   beyond the core (Latin Extended-A, the rest of Cyrillic, €, ≠ ≤ ≥), the
   core — declared last, so checked first — for everything a Ukrainian page
   draws; such a page loads the core alone. */
@font-face {
  font-family: 'Commissioner';
  src: url('/fonts/Commissioner-Variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-017F, U+0460-048F, U+0492-04FF, U+20AC, U+2260, U+2264-2265;
}

@font-face {
  font-family: 'Commissioner';
  src: url('/fonts/Commissioner-Core.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+02BC, U+02C6-02DD, U+0300-030C, U+0400-045F, U+0490-0491,
    U+2007-200B, U+2010-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20B4, U+2116,
    U+2122, U+2212;
}

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

/* Fixel in two static styles under names of its own (the «fixel-lite» face):
   the text's bold is the display cut's Bold, the file the headings preload. */
@font-face {
  font-family: 'Fixel Text Lite';
  src: url('/fonts/FixelText-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Text Lite';
  src: url('/fonts/FixelDisplay-Bold.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Display Lite';
  src: url('/fonts/FixelDisplay-Bold.woff2') format('woff2');
  font-weight: 600 800;
  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;
}

/* Noto Sans Condensed: sign lettering and headings — the upstream Noto Sans
   instanced at its condensed width, one file a weight, under a family name of
   its own. */
@font-face {
  font-family: 'Noto Sans Condensed';
  src: url('/fonts/NotoSansCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Noto Sans Condensed';
  src: url('/fonts/NotoSansCondensed-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Until the condensed face arrives: the device's own narrow sans, scaled to
   its widths and line metrics, so a late swap moves no line. */
@font-face {
  font-family: 'Noto Sans Condensed Fallback';
  src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Liberation Sans Narrow Bold'),
    local('LiberationSansNarrow-Bold');
  font-weight: 500 800;
  font-style: normal;
  size-adjust: 107.6%;
  ascent-override: 99.4%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}

/* The same for the text face: Arial scaled to Fixel Text's widths and line
   metrics. */
@font-face {
  font-family: 'Fixel Text Lite Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 101.9%;
  ascent-override: 88.4%;
  descent-override: 18.7%;
  line-gap-override: 28.5%;
}

/* Wix Madefor: static cuts, each declared over the weight range it stands
   for, so a 600 or 700 heading uses the ExtraBold file as it is. */
@font-face {
  font-family: 'Wix Madefor Display';
  src: url('/fonts/WixMadeforDisplay-ExtraBold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('/fonts/WixMadeforText-Regular.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('/fonts/WixMadeforText-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Piazzolla';
  src: url('/fonts/Piazzolla-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

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

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

/* Vollkorn: static cuts, one file a style («Стенд»'s headings). */
@font-face {
  font-family: 'Vollkorn';
  src: url('/fonts/Vollkorn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* Noto Serif: static cuts of the upstream variable Noto Serif at the normal
   width — Regular, Italic and Bold. */
@font-face {
  font-family: 'Noto Serif';
  src: url('/fonts/NotoSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('/fonts/NotoSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

/* Spectral: static cuts — Regular, Italic and SemiBold. Its own U+02BC reads
   as a prime at large sizes and its «№» (U+2116) is narrow and dark beside
   its digits, so the range leaves those two characters out and they come
   from the next face of the stack (Commissioner). */
@font-face {
  font-family: 'Spectral';
  src: url('/fonts/Spectral-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-02BB, U+02BD-2115, U+2117-FFFF;
}

@font-face {
  font-family: 'Spectral';
  src: url('/fonts/Spectral-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-02BB, U+02BD-2115, U+2117-FFFF;
}

@font-face {
  font-family: 'Spectral';
  src: url('/fonts/Spectral-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-02BB, U+02BD-2115, U+2117-FFFF;
}

/* Playfair Print: two static cuts of Playfair 2 (ExtraBold and Italic) under
   their own family name, so they never mix with the variable Playfair above. */
@font-face {
  font-family: 'Playfair Print';
  src: url('/fonts/Playfair-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Print';
  src: url('/fonts/Playfair-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Noto Sans: static cuts for text, one file a style. «Газета» sets its
   italics in Playfair Print; «Стенд» uses the Italic below. */
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-Bold.woff2') format('woff2');
  font-weight: 700;
  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);
}

/* Tabular figures only where numbers stand in columns — a table, the
   numbers block of the home page — not in running text, where some faces
   draw a slashed or odd-looking zero in that set. */
table,
.home-numbers-list,
[class*='-figures'],
.vitryna-stats {
  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);
}

/* A hosted site still on review: a strip over every public page. */
.review-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;
}

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

/* Low vision turns --line-soft yellow, which is 1.3:1 against the white header
   text: the header row takes the page colours and a heavy rule instead. */
:root[data-theme='low-vision'] .md-table th {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 3px solid var(--line);
}

/* A table that scrolls sideways is a focusable region (scroll-tables.js);
   the outline is drawn inside the frame so no ancestor can clip it. */
.md-table:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.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 wraps inside its column instead of widening it past
   the edge of a phone screen; no hyphen is added inside a word (a word is
   split only when it is wider than the whole line). */
.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: break-word;
  hyphens: manual;
}

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 too, like every other picture (QA, 2026-10). */
:root[data-theme='low-vision'] img,
:root[data-theme='low-vision'] iframe {
  filter: grayscale(1);
}

/* Headings without negative tracking, whatever a template set: the word
   spaces of a heavy weight nearly close at the low-vision sizes. */
:root[data-theme='low-vision'] :is(h1, h2, h3, h4, .page-h1, .hero-title) {
  letter-spacing: 0;
}

/* 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,
  [data-section-nav],
  [data-print],
  .section-report-tools,
  .meals-daypage .meals-calendar,
  .reading-progress,
  .chp-bar,
  .news-share {
    display: none !important;
  }
}

/* The section nav's row on a phone (public/js/section-nav.js): a side with
   more links out of sight fades out, so the row reads as one that scrolls. */
@media (max-width: 899px) {
  [data-section-nav].has-more-after ul {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }

  [data-section-nav].has-more-before ul {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
    mask-image: linear-gradient(90deg, transparent, #000 32px);
  }

  [data-section-nav].has-more-before.has-more-after ul {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 32px,
      #000 calc(100% - 32px),
      transparent
    );
    mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
}

/* The low-vision switch (partials/bvi-toggle) names the action: «Для
   слабозорих» in the regular look, «Звичайна версія» in the low-vision one.
   Keyed on the theme zir.js sets before the first paint, so the right label
   is there at once; the hidden one is not part of the button's name. */
.bvi-label-on {
  display: none;
}

:root[data-theme='low-vision'] .bvi-label-off {
  display: none;
}

:root[data-theme='low-vision'] .bvi-label-on {
  display: inline;
}

/* The low-vision switch is a GET form without a script (partials/bvi-toggle):
   it takes no box of its own, so its button sits where it always did. */
.bvi-form {
  display: contents;
}

/* The menu without JavaScript (partials/mobile-menu). The overlay is in the
   markup, not hidden. zir.js puts `js` on <html> in <head>, before the first
   paint: with it the overlay stays out of sight until mobile-menu.js has
   closed it and wired its buttons (.is-ready); without it the overlay is the
   plain list that follows the header — search, links, every dropdown's pages
   shown — and the buttons that need a script (open, close, a group's own)
   are not offered. Each stylesheet family ends the list at the width where
   its header shows the whole menu (chrome.css, base-template.css). */
html.js .mobile-menu-overlay:not(.is-ready) {
  display: none;
}

html:not(.js) .mobile-menu-overlay {
  position: static;
  z-index: auto;
  overflow: visible;
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
}

html:not(.js) .mobile-menu-toggle,
html:not(.js) .mobile-menu-close {
  display: none;
}

html:not(.js) .mobile-about-toggle:disabled {
  color: var(--ink);
  cursor: default;
}

/* 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/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;
  }
}

/* «Усі фото» on the albums collection: one page of twelve photos as 4 × 3
   thumbnails, 3 columns on a tablet and 2 on a phone; a link to another of
   its pages opens at the section, clear of the sticky header. */
.album--matrix {
  scroll-margin-top: var(--chp-offset, 96px);
}

.album--matrix .album-thumbs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

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

/* css/components/meals.css */
/* «Харчування» (growth stories 38, 54): the week as a table — days as rows, newest first, прийоми
   as columns, a cell with a 4:3 photo and its dishes — and, on a phone, the same table as a list:
   each day a heading line, then rows «photo | прийом and dishes». The markup is partials/meals/week
   and partials/meals/cell; the home block «Харчування сьогодні» draws the same cells (the rules
   at the end). Every template links this file and its own colours, faces and corners arrive
   through the tokens. Order is the DOM's: no rule here reorders anything. */

/* «Меню» (story 54) is the last chapter: the information above it keeps the chapters' gap. */
.meals-info + .meals-menu {
  margin-top: var(--chp-gap);
}

.meals-empty {
  color: var(--muted);
}

.meals-week {
  margin: 0 0 var(--space-8);
}

.meals-weeknav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}

.meals-weeknav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
}

.meals-weeknav-link--next {
  margin-inline-start: auto;
}

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

.meals-scroll:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.meals-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--body);
}

.meals-caption {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: var(--lh-h3);
  text-align: left;
}

.meals-table th,
.meals-table td {
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  hyphens: manual;
}

.meals-head th {
  border-top: 0;
  border-bottom: 2px solid var(--line-strong);
  color: var(--ink);
  font-weight: 600;
}

.meals-head th:first-child {
  width: 9.5rem;
}

.meals-day {
  border-inline-start: 3px solid transparent;
  color: var(--ink);
  font-weight: 600;
}

.meals-day-name,
.meals-day-date {
  display: block;
}

.meals-day-name::first-letter {
  text-transform: uppercase;
}

.meals-day-date {
  color: var(--muted);
  font-size: var(--fs-meta-lg);
  font-weight: 400;
}

.meals-today {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--accent);
  font-size: var(--fs-meta-lg);
  font-weight: 700;
}

.meals-row.is-today .meals-day {
  border-inline-start-color: var(--accent);
}

.meals-td--note {
  color: var(--muted);
  font-size: var(--fs-text);
}

.meals-row--none .meals-day,
.meals-row--none .meals-td {
  padding-block: var(--space-2);
}

/* The cell's width, not base.css's shrink-to-fit figure (which takes the picture's `sizes` width). */
.meals-figure {
  width: auto;
  margin: 0 0 var(--space-3);
}

.meals-shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
}

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

.meals-more {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--blue-shadow-a70);
  color: var(--chrome-bar-strong);
  font-size: var(--fs-meta-lg);
  font-weight: 700;
}

:root[data-theme='low-vision'] .meals-more {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}

.meals-slot {
  display: none;
  margin: 0 0 var(--space-1);
  color: var(--ink);
  font-weight: 600;
}

.meals-dash {
  margin: 0;
  color: var(--muted);
}

.meals-group {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--ink);
}

.meals-text > :first-child {
  margin-top: 0;
}

.meals-cell .meals-dishes {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--fs-text);
}

.meals-flag {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font-size: var(--fs-meta-sm);
  font-weight: 600;
}

@media (min-width: 768px) {
  /* Positioned, so the visually hidden text in its cells is clipped with them. */
  .meals-scroll--wide {
    position: relative;
    overflow-x: auto;
  }

  .meals-scroll--wide .meals-table {
    min-width: 64rem;
  }
}

@media (max-width: 767px) {
  .meals-table,
  .meals-table tbody,
  .meals-row,
  .meals-table th,
  .meals-table td {
    display: block;
  }

  /* The column heads stay for assistive technology; each cell names its прийом in the list. */
  .meals-head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .meals-table th,
  .meals-table td {
    border-top: 0;
  }

  .meals-row {
    border-top: 1px solid var(--line);
  }

  .meals-table .meals-day {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-2);
  }

  /* A block table keeps its caption a table-caption, as narrow as its words. */
  .meals-caption {
    display: block;
  }

  .meals-day-name,
  .meals-day-date {
    display: inline-block;
  }

  .meals-today {
    margin-top: 0;
  }

  .meals-table .meals-td {
    padding: var(--space-2) var(--space-3);
  }

  .meals-row--none .meals-day {
    padding-bottom: 0;
  }

  .meals-cell--photo {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  .meals-figure {
    margin: 0;
  }

  .meals-slot {
    display: block;
  }

  /* A прийом nobody filled is not drawn in the list; the table keeps its empty cell. */
  .meals-table .meals-td--empty {
    display: none;
  }
}

/* The home block «Харчування сьогодні» (story 54, slice 7): today's прийоми as the week's cells under
   their names — side by side from a cell of about 9.5rem (so also in the narrow column of «Газета» and
   «Портал»), one under another on a phone. */

.meals-dishes {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
  color: var(--body);
}

.meals-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-6) var(--space-5);
}

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

.meals-home-item {
  min-width: 0;
}

.meals-home .meals-dishes {
  margin-top: var(--space-2);
  padding-left: var(--space-5);
  overflow-wrap: break-word;
}

.meals-home-title {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-size: var(--fs-text);
  font-weight: 600;
}

/* The heading above names the прийом; the cell's own name is for the week's list. */
.meals-home .meals-slot {
  display: none;
}

.meals-home .meals-cell--photo {
  display: block;
}

.meals-home .meals-figure {
  margin: 0 0 var(--space-3);
}

/* A day's link in the week. */

.meals-day-link {
  color: inherit;
  text-decoration: none;
}

.meals-day-link .meals-day-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The home block's date line reads at the body size. */
.base-block--meals .base-meta {
  font-size: var(--fs-text);
}

/* A day at its own address (growth story 61): one narrow sheet, the same on every template and every
   screen — the date, the share row, then a short block per прийом (its name, 4:3 thumbnails, the dishes).
   A template may only recolour it and set the прийом name's face. */
.meals-daypage {
  max-width: 40rem;
}

:root[data-theme='low-vision'] .meals-daypage {
  max-width: 800px;
}

.meals .meals-daypage .base-kicker {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font-size: var(--fs-meta-lg);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.base-page.meals .meals-daypage .page-h1 {
  margin-top: 0;
  padding-top: 0;
  font-size: var(--fs-h2-phone);
  line-height: var(--lh-h2);
}

.meals .meals-daypage .base-kicker .meals-today {
  margin: 0;
  font-size: inherit;
}

:root[data-theme='low-vision'] .base-page.meals .meals-daypage .page-h1 {
  font-size: 30px;
  line-height: var(--lh-h2);
}

/* Sending is the first action: the button and the address side by side, wrapping on a phone. */
.meals-dayshare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}

.meals-dayshare-button {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.meals-dayshare-button[hidden] {
  display: none;
}

.meals-dayshare-url {
  font-size: var(--fs-meta-lg);
  color: var(--muted);
  overflow-wrap: break-word;
  min-width: 0;
}

.meals-dayblock {
  margin: 0 0 var(--space-5);
}

.meals-dayblock + .meals-dayblock {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* 22 px (26 in low-vision): a step above the 16.5 px dishes in every template's heading face, still
   below the 24 px date. */
.meals-dayblock-title {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-tagline);
  line-height: var(--lh-h3);
}

/* A block with photos and dishes: the name over the row, the thumbnails in the first column, the
   dishes in the second. The photo column is 128 px on a phone (about two dish lines), never more
   than 40% of the block so the dishes keep room on a narrow template, and 180 px (about three
   lines) from a tablet and in low-vision mode. */
.meals-dayblock--photos {
  display: grid;
  grid-template-columns: min(128px, 40%) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
}

@media (min-width: 768px) {
  .meals-dayblock--photos {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

:root[data-theme='low-vision'] .meals-dayblock--photos {
  grid-template-columns: 180px minmax(0, 1fr);
}

.meals-dayblock--photos .meals-dayblock-title {
  grid-column: 1 / -1;
  margin: 0;
}

.meals-daythumbs {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.meals-dayblock--bare .meals-daythumbs,
.meals-dayblock--above .meals-daythumbs {
  display: flex;
  flex-wrap: wrap;
}

/* More photos than dishes: the photos in a row above the dishes, sized like a block without dishes. */
.meals-dayblock--above .meals-daythumbs {
  margin-bottom: var(--space-3);
}

/* A 4:3 crop as wide as its column or list item; the border is inside the size. */
.meals-daythumbs a {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  overflow: hidden;
}

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

.meals-daythumbs a:focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent));
  outline-offset: 2px;
}

/* Without dishes: up to 180 px, never wider than half the row, so two always fit side by side. */
.meals-dayblock--bare .meals-daythumbs li,
.meals-dayblock--above .meals-daythumbs li {
  width: min(180px, calc(50% - var(--space-2) / 2));
}

/* Low-vision on a narrow screen: the dishes would get too little room beside the photos, so the
   photos become a wrapping row above them, sized like a block without dishes. */
@media (max-width: 599px) {
  :root[data-theme='low-vision'] .meals-dayblock--photos {
    display: block;
  }

  :root[data-theme='low-vision'] .meals-dayblock--photos .meals-dayblock-title {
    margin-bottom: var(--space-3);
  }

  :root[data-theme='low-vision'] .meals-dayblock--photos .meals-daythumbs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
  }

  :root[data-theme='low-vision'] .meals-dayblock--photos .meals-daythumbs li {
    width: min(180px, calc(50% - var(--space-2) / 2));
  }
}

.meals-daydishes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.meals-daydishes li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  overflow-wrap: break-word;
}

.meals-daydishes li:first-child {
  padding-top: 0;
  border-top: 0;
}

.meals-dish-detail {
  color: var(--muted);
}

/* The month calendar (story 54): a plain seven-column table under the page, weekend columns muted,
   a day with a record underlined and bold (never colour alone), today boxed. */
.meals-calendar {
  max-width: 28rem;
  margin: var(--space-7) 0 0;
}

.meals-calendar-title {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: var(--lh-h3);
}

.meals-calendar-range {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

.meals-calnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.meals-calnav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
}

.meals-calnav-link--next {
  margin-inline-start: auto;
}

.meals-cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--body);
}

.meals-cal-caption {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.meals-cal th {
  padding: var(--space-2) 0;
  border-bottom: 2px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--fs-meta-lg);
  font-weight: 600;
  text-align: center;
}

.meals-cal td {
  padding: 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.meals-cal .meals-cal-weekend {
  color: var(--muted);
}

.meals-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: min(40px, 100%);
  min-height: 44px;
  margin: 0 auto;
}

.meals-cal-day--record {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Today's box (keyed on the cell: the open day of a day's page is aria-current="page" and may be
   today too) gives way to the focus ring while focused. */
.is-today > .meals-cal-day:not(:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

/* The open day of a day's page: a fill, not colour alone, strong in both modes; today's box inside
   it is drawn in the page colour. */
.meals-cal-day[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

.is-today > .meals-cal-day[aria-current='page']:not(:focus-visible) {
  outline-color: var(--paper);
}

/* A day marked «Харчування не було» (growth story 54, slice 9): its row says so across the row, and
   its page opens with the same sentence instead of blocks. The templates restyle it in slice 8. */
.meals-td--closed {
  color: var(--ink);
  font-size: var(--fs-text);
  font-weight: 600;
}

.meals-closed {
  margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-inline-start: 4px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-text);
  font-weight: 600;
}

/* «Панорама» (slice 8): the week and the calendar as a grey grid — every cell framed in --line-strong,
   the head on the dark top bar's colour, the day's cell on the light ground; its page is the only one
   whose wrapper is .collection.meals. A phone keeps the list, each day a framed heading line. */
.collection.meals .meals-day {
  background: var(--paper-2);
}

.collection.meals .meals-cal th {
  background: var(--chrome-bar);
  border: 1px solid var(--chrome-bar-line);
  color: var(--chrome-bar-strong);
}

.collection.meals .meals-cal td {
  border: 1px solid var(--line-strong);
}

@media (min-width: 768px) {
  .collection.meals .meals-table {
    border: 1px solid var(--line-strong);
  }

  .collection.meals .meals-table th,
  .collection.meals .meals-table td {
    border: 1px solid var(--line-strong);
  }

  .collection.meals .meals-head th {
    background: var(--chrome-bar);
    border-color: var(--chrome-bar-line);
    color: var(--chrome-bar-strong);
  }

  .collection.meals .meals-day {
    border-inline-start: 1px solid var(--line-strong);
  }

  .collection.meals .meals-row.is-today .meals-day {
    border-inline-start: 3px solid var(--accent);
  }
}

@media (max-width: 767px) {
  .collection.meals .meals-row {
    border: 1px solid var(--line-strong);
    margin-bottom: var(--space-3);
  }

  .collection.meals .meals-table .meals-day {
    border-bottom: 1px solid var(--line-strong);
  }

  .collection.meals .meals-row.is-today .meals-day {
    border-inline-start: 3px solid var(--accent);
  }
}

/* css/components/records.css */
/* Records on a page (growth story 39): the cards of a page's preset with their
   filter row, and a record's own page. The markup is partials/records-content
   and partials/record-body; every template links this file and its own
   colours, faces and corners arrive through the tokens. */

.records {
  margin-block: var(--space-8);
}

.records-title {
  margin: 0 0 var(--space-5);
  color: var(--ink);
  font-size: var(--fs-card-title);
}

.records-filters {
  margin: 0 0 var(--space-6);
}

.records-filter-label {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

.records-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.records-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-nav);
  text-decoration: none;
}

.records-chip--on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.records-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
}

.records-card-photo {
  line-height: 0;
}

.records-card-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.records-card-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.records-card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-card-title);
  line-height: var(--lh-h3);
}

.records-card-title a {
  color: var(--ink);
}

.records-card-line {
  margin: 0 0 var(--space-1);
  color: var(--body);
  font-size: var(--fs-nav);
}

.records-empty {
  color: var(--muted);
}

.record-photo {
  margin: 0 0 var(--space-6);
  line-height: 0;
}

.record-photo img {
  width: 100%;
  max-width: 640px;
  height: auto;
}

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

.record-fact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.record-fact dt {
  flex: 0 0 12em;
  color: var(--muted);
}

.record-fact dd {
  flex: 1 1 14em;
  margin: 0;
  color: var(--ink);
}

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

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

.record-text-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-card-title);
}

@media (max-width: 600px) {
  .record-fact dt {
    flex-basis: 100%;
  }
}

.records-more {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-nav);
}

/* css/components/services.css */
/* External service links (growth story 39): a row of buttons under the header
   on the home page and «Вступ», and a plain list above the footer on every
   page. The markup is partials/services; every template links this file and
   its own colours, faces and corners arrive through the tokens. */

.services-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 auto;
  padding-block: var(--space-4);
  list-style: none;
}

.services--top {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.services-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  font-size: var(--fs-button);
  font-weight: 600;
  text-decoration: none;
}

.services-btn:hover,
.services-btn:focus-visible {
  background: var(--paper);
  color: var(--accent);
}

.services--foot {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.services-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--fs-nav);
  text-decoration: underline;
}

/* css/components/doc-protection.css */
/* The signature line under a document in a list. Colours and sizes come
   from the tokens, so it scales with the text. */

.doc-protection {
  display: block;
  margin-top: var(--space-1);
  font-size: calc(var(--fs-text) * 0.91);
  line-height: var(--lh-h3);
  color: var(--muted);
}

/* Above a row whose whole area is the document's link. */
.doc-protection a {
  position: relative;
  white-space: nowrap;
  z-index: 1;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.doc-protection a:hover {
  color: var(--accent);
}

/* The low-vision mode: the line is meta-sized, like the row above it, and its links are the
   mode's link colour. */
:root[data-theme='low-vision'] .doc-protection {
  font-size: var(--fs-meta-lg);
}

:root[data-theme='low-vision'] .doc-protection a {
  color: var(--accent);
}

/* The copy-protection label sits quietly in front of the signature text; the
   description of a «Лише для читання» file is a paragraph of its own. */
.doc-protection-level {
  font-style: italic;
}

.doc-protection-desc {
  display: block;
  margin-top: var(--space-1);
  max-width: 62ch;
}

/* The low-vision mode: whoever cannot read the pictures of a «Лише для
   читання» file meets its description before the labels. */
:root[data-theme='low-vision'] .doc-protection {
  display: flex;
  flex-direction: column;
}

:root[data-theme='low-vision'] .doc-protection-desc {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--space-1);
}

/* The signature text and its links are one line of running text; a long name or provider
   breaks at a word, never inside it. */
.doc-protection-line {
  overflow-wrap: break-word;
}

/* The short mark by a signed document in the documents collection («Підписано») and the
   «Лише підписані» link under the count. The mark is plain text in the meta row's face and colour,
   no frame, inline after the title (the space in front of it is the partial's own, so a mark that
   starts a line has no indent); each template restyles it to its idea. */
.doc-signed-mark {
  color: var(--muted);
  font-size: var(--fs-meta-lg);
  font-weight: 400;
  white-space: nowrap;
}

.doc-signed-filter {
  margin: var(--space-3) 0;
  font-size: var(--fs-text);
}

.doc-signed-filter a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* «Перевірка підпису» (/dokument/<file id>/pidpys): the document, what the site checked, how to
   check it oneself. A text column; the sentences carry the result, the tick only repeats it. */
.doc-sign {
  padding-bottom: var(--space-11);
}

.doc-sign-doc,
.doc-sign-text,
.doc-sign-note,
.doc-sign-steps,
.doc-sign-small {
  max-width: 62ch;
  overflow-wrap: break-word;
}

/* The link to the document's page is body-size: links stay at the 15 px floor. */
.doc-sign-doc {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--fs-text);
}

/* Every link inside the page's text is underlined (not told by colour alone), in the mode's link
   colour in low vision. */
.doc-sign-doc a,
.doc-sign-text a,
.doc-sign-steps a,
.doc-sign-files a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:root[data-theme='low-vision'] .doc-sign-doc a,
:root[data-theme='low-vision'] .doc-sign-text a,
:root[data-theme='low-vision'] .doc-sign-steps a,
:root[data-theme='low-vision'] .doc-sign-files a {
  color: var(--accent);
}

.doc-sign-section {
  margin-top: var(--space-7);
}

/* The page's part outranks the group heading below it (1.12 × the body): at least 1.2 × that, in the
   normal and the low-vision scale alike. */
.doc-sign-h2 {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-size: calc(var(--fs-text) * 1.35);
  line-height: var(--lh-h3);
}

/* Several signatures: a part for the detached signature and one for those inside the PDF (its
   heading a step larger than the body, in the heading face, over a rule), a part for each signer
   (its heading bold body text); a long name breaks at a word. In low vision the body is 20 px, so
   the group heading is 22 px and still above it. */
.doc-sign-group,
.doc-sign-signer {
  margin-top: var(--space-5);
}

.doc-sign-group {
  margin-top: var(--space-7);
}

.doc-sign-h3 {
  max-width: 62ch;
}

.doc-sign-gh,
.doc-sign-h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: break-word;
}

.doc-sign-gh {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-heading);
  font-size: calc(var(--fs-text) * 1.12);
  line-height: var(--lh-h3);
}

.doc-sign-h3 {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

:root[data-theme='low-vision'] .doc-sign-gh,
:root[data-theme='low-vision'] .doc-sign-h3 {
  max-width: none;
}

.doc-sign-checks,
.doc-sign-files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-sign-checks li {
  display: flex;
  gap: var(--space-3);
  max-width: 62ch;
  margin-top: var(--space-2);
  color: var(--body);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.doc-sign-checks li > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.doc-sign-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
  color: var(--accent);
}

.doc-sign-text,
.doc-sign-note,
.doc-sign-steps {
  margin: var(--space-3) 0 0;
  color: var(--body);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.doc-sign-steps {
  padding-left: 1.4em;
}

.doc-sign-steps li + li {
  margin-top: var(--space-2);
}

.doc-sign-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-5);
  max-width: 62ch;
  margin: var(--space-5) 0 0;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.doc-sign-facts dt {
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

.doc-sign-facts dd {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  overflow-wrap: break-word;
}

@media (min-width: 30em) {
  .doc-sign-facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .doc-sign-facts dd {
    margin: 0;
  }
}

.doc-sign-file {
  margin: 0;
}

.doc-sign-button {
  display: inline-block;
  max-width: 100%;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: var(--fs-text);
  font-weight: 700;
  overflow-wrap: break-word;
}

.doc-sign-small {
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

/* The separate-file links are links: body size; only the lead-in above them stays small. */
.doc-sign-files {
  margin-top: var(--space-1);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.doc-sign-files li + li {
  margin-top: var(--space-1);
}

:root[data-theme='low-vision'] .doc-sign-doc,
:root[data-theme='low-vision'] .doc-sign-text,
:root[data-theme='low-vision'] .doc-sign-note,
:root[data-theme='low-vision'] .doc-sign-steps,
:root[data-theme='low-vision'] .doc-sign-small,
:root[data-theme='low-vision'] .doc-sign-checks li,
:root[data-theme='low-vision'] .doc-sign-facts {
  max-width: none;
}

/* css/components/doc-viewer.css */
/* A document shown page by page (/dokument/<file id>): the title block, the page in a frame with
   a step link on each side, the list of pages. Colours, spaces and sizes come from the tokens,
   so it follows every template's look and the low-vision mode. */
.doc-viewer {
  padding-bottom: var(--space-11);
}

.doc-viewer-date {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--fs-meta-lg);
}

.doc-viewer-desc {
  max-width: 62ch;
  margin: var(--space-3) 0 0;
  color: var(--body);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

/* Only on paper: where the document lives. */
.doc-viewer-address {
  display: none;
}

.doc-viewer-message {
  max-width: 62ch;
  margin: var(--space-7) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--fs-text);
}

.doc-viewer-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  max-width: 900px;
  margin: var(--space-5) 0;
  font-size: var(--fs-nav);
}

.doc-viewer-step {
  padding: var(--space-2) 0;
  color: var(--accent);
  font-weight: 700;
}

.doc-viewer-step:last-child {
  text-align: right;
}

.doc-viewer-step--off {
  visibility: hidden;
}

.doc-viewer-status {
  color: var(--body);
  text-align: center;
}

.doc-viewer-stage {
  max-width: 900px;
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.doc-viewer-page {
  display: block;
  width: 100%;
  height: auto;
}

.doc-viewer-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 900px;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.doc-viewer-num {
  display: block;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font-size: var(--fs-nav);
  text-align: center;
}

.doc-viewer-num[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  font-weight: 700;
}

/* The low-vision mode: the page takes the whole width. */
:root[data-theme='low-vision'] .doc-viewer-nav,
:root[data-theme='low-vision'] .doc-viewer-stage,
:root[data-theme='low-vision'] .doc-viewer-pages,
:root[data-theme='low-vision'] .doc-viewer-desc {
  max-width: none;
}

/* Paper: the title, the description and the address; not the pages. */
@media print {
  .doc-viewer-nav,
  .doc-viewer-stage,
  .doc-viewer-list,
  .doc-viewer-message {
    display: none !important;
  }

  .doc-viewer-address {
    display: block;
    margin-top: var(--space-5);
  }
}

/* css/templates/_base/base-template.css */
/* `_base` — the internal template every other one falls back to for a file
   it does not have (growth story 15). Plain, semantic, on the tokens only:
   the low-vision override of tokens.css repaints all of it. Colour pairs used
   throughout, each readable in both looks: text on --paper (--ink, --body,
   --muted, links --accent), --paper on --blue or --accent (buttons), the
   --chrome-bar-* inks on --chrome-bar (dark bands), --ink on --chrome-tint
   (light bands). A template that inherits a view from _base lists this file
   in its manifest, before its own stylesheet. */

/* ---------- page frame ---------- */

.base-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.base-main {
  flex: 1 0 auto;
}

.base-page {
  padding-block: var(--space-8) var(--space-10);
}

.page-h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  margin-bottom: var(--space-5);
  overflow-wrap: break-word;
}

.base-section-title {
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-4);
}

.base-kicker {
  font-size: var(--fs-meta-lg);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.base-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: var(--space-4);
}

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

.base-meta a {
  color: var(--accent);
  text-decoration: underline;
}

.base-count {
  font-weight: 400;
  color: var(--muted);
  font-size: 14px;
}

.base-empty {
  color: var(--muted);
  padding: var(--space-6) 0;
}

.base-status {
  margin: var(--space-5) 0;
  font-weight: 600;
  color: var(--ink);
}

.base-crumbs {
  font-size: var(--fs-meta-lg);
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.base-crumbs a {
  color: var(--accent);
}

/* Running text: a page's Markdown, a post's body, the about block. */
.base-prose {
  max-width: 72ch;
  color: var(--body);
}

.base-prose > * + * {
  margin-top: var(--space-4);
}

.base-prose h2,
.base-prose h3,
.base-prose h4 {
  color: var(--ink);
  line-height: 1.25;
  margin-top: var(--space-8);
}

.base-prose h2 {
  font-size: 26px;
}

.base-prose h3 {
  font-size: 21px;
}

.base-prose ul,
.base-prose ol {
  padding-left: 1.4em;
}

.base-prose li + li {
  margin-top: var(--space-1);
}

.base-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.base-prose img {
  border-radius: var(--radius-media);
}

/* ---------- buttons and small links ---------- */

.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid var(--blue);
  background: var(--blue);
  color: var(--paper);
  font: inherit;
  font-size: var(--fs-button);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.base-button:hover {
  background: var(--blue-900);
  border-color: var(--blue-900);
}

.base-button--ghost {
  background: transparent;
  color: var(--blue);
}

.base-button--ghost:hover {
  background: var(--blue);
  color: var(--paper);
}

.base-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}

.base-more {
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- the header ---------- */

.base-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.base-topline {
  background: var(--chrome-bar);
  color: var(--chrome-bar-ink);
  font-size: var(--fs-meta-lg);
}

.base-topline-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  min-height: 40px;
  padding-block: var(--space-1);
}

.base-topline a {
  color: var(--chrome-bar-strong);
}

.base-topline-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.base-toplink {
  font-weight: 700;
  text-decoration: underline;
}

.base-bvi {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.base-topline .base-bvi {
  color: var(--chrome-bar-strong);
}

.base-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 84px;
  padding-block: var(--space-3);
}

.base-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

.base-brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.base-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--blue);
  color: var(--paper);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  border-radius: var(--radius);
}

.base-brand-name {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: var(--ls-h3);
}

/* The menu: a row of links; a dropdown opens a panel under its item. */
.base-nav {
  flex: 1 1 auto;
}

.base-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  list-style: none;
}

.base-nav-item {
  position: relative;
}

.base-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav-main);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.base-nav-link:hover,
.base-nav-link.is-active,
.base-nav-link[aria-expanded='true'] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.base-nav-cta {
  background: var(--accent);
  color: var(--paper);
  padding-inline: 16px;
}

.base-nav-cta:hover {
  color: var(--paper);
  background: var(--blue);
  text-decoration: none;
}

.base-nav-caret {
  font-size: 14px;
}

.base-nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: calc(-50% + var(--mega-shift, 0px)) 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 28px var(--blue-shadow-a22);
}

.base-nav-panel[hidden] {
  display: none;
}

.base-nav-sublink {
  display: block;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
}

.base-nav-sublink:hover,
.base-nav-sublink.is-active {
  background: var(--chrome-tint);
  color: var(--accent);
}

/* The current page in a panel: underlined and heavier, not only tinted (the
   tint is gone in the low-vision look). */
.base-nav-sublink[aria-current='page'] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.base-search {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.base-search-input {
  min-width: 0;
  width: 190px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav);
}

.base-search-button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--paper);
  font: inherit;
  font-size: var(--fs-nav);
  font-weight: 700;
  cursor: pointer;
}

.base-search--page {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.base-search--page .base-search-input {
  flex: 1;
  width: auto;
  font-size: var(--fs-text);
}

.base-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  cursor: pointer;
}

.base-menu-toggle-bar {
  display: block;
  height: 2px;
  background: var(--ink);
}

@media (max-width: 899px) {
  .base-header-nav,
  .base-header-search {
    display: none;
  }

  .base-menu-toggle {
    display: inline-flex;
  }

  .base-topline-contacts {
    display: none;
  }
}

/* ---------- the mobile menu overlay (public/js/mobile-menu.js) ---------- */

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow-y: auto;
  padding: 72px var(--space-5) var(--space-8);
  background: var(--paper);
}

.mobile-menu-overlay[hidden] {
  display: none;
}

/* Without JavaScript the overlay is a plain list under the header (base.css);
   from the tablet edge the header shows the whole menu, so it goes. */
@media (min-width: 900px) {
  html:not(.js) .mobile-menu-overlay {
    display: none;
  }
}

.mobile-menu-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.mobile-search {
  display: flex;
  margin-bottom: var(--space-5);
}

.mobile-search-input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.mobile-search-button {
  min-height: 46px;
  padding: 8px 16px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
}

/* :where() keeps this at the weight of a bare a, so a template's own
   overlay colours (and .mobile-important) win over it. */
:where(.mobile-menu-overlay) a,
.mobile-about-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* The current location (aria-current, from the menu's `current`): a bar at
   the start of the row and a heavier weight, the page itself underlined too
   — never the colour alone, and apart from the focus ring, which outlines
   the whole row. The section above the page («true») gets the bar only. */
.mobile-menu-overlay [aria-current] {
  padding-left: var(--space-3);
  border-left: 4px solid var(--accent);
  font-weight: 700;
}

.mobile-menu-overlay [aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.mobile-about-panel {
  padding-left: var(--space-5);
}

/* The expand marker (review 2026-10, SE-13): a plus that becomes a minus, drawn once and
   bound to aria-expanded — on the mobile menu's group buttons and on a template's own
   toggle that carries `base-expand` (a side tree's folded branch). A link has none: the
   marker is what tells a button that opens a list from a row that goes somewhere. Without
   scripts the groups are open and their buttons inert (html:not(.js)): no marker. */
.mobile-about-toggle::after,
.base-expand::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: auto;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size var(--transition-fast);
}

.mobile-about-toggle[aria-expanded='true']::after,
.base-expand[aria-expanded='true']::after {
  background-size:
    100% 2px,
    0 0;
}

html:not(.js) .mobile-about-toggle::after {
  display: none;
}

.mobile-about-panel[hidden] {
  display: none;
}

.mobile-important {
  color: var(--accent);
}

/* ---------- the announcement strip ---------- */

.announcement {
  background: var(--chrome-tint);
  border-bottom: 1px solid var(--chrome-tint-line);
  color: var(--ink);
}

.announcement--alert {
  border-left: 6px solid var(--error);
}

.announcement-inner {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  font-weight: 600;
}

.announcement-icon {
  color: var(--accent);
}

.announcement--alert .announcement-icon {
  color: var(--error);
}

/* ---------- a page inside a dropdown: the section's menu on the left ---------- */

.base-with-nav {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-8) 0;
}

.base-with-nav-main > .container,
.base-with-nav-main .container {
  max-width: none;
  padding-inline: 0;
}

.base-with-nav-main .base-page {
  padding-top: 0;
}

.section-nav {
  border-top: 3px solid var(--blue);
  padding-top: var(--space-3);
}

.section-nav-title {
  font-weight: 800;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.section-nav ul {
  list-style: none;
}

.section-nav a {
  display: block;
  padding: 8px 10px;
  border-left: 3px solid transparent;
  color: var(--body);
  font-size: var(--fs-nav-side);
}

.section-nav a:hover,
.section-nav a.active {
  border-left-color: var(--accent);
  color: var(--accent);
  background: var(--chrome-tint);
}

@media (max-width: 899px) {
  .base-with-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding-top: var(--space-5);
  }

  .section-nav ul {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
  }

  .section-nav a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

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

/* ---------- an info page's opening ---------- */

.base-opening {
  background: var(--chrome-tint);
  border-bottom: 1px solid var(--chrome-tint-line);
  color: var(--ink);
}

.base-opening-inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-8);
}

.base-opening--photo .base-opening-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.base-opening-title {
  margin-bottom: var(--space-3);
}

.base-opening-counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}

.base-opening-counter {
  color: var(--accent);
  text-decoration: underline;
}

.base-opening-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-media);
}

@media (max-width: 899px) {
  .base-opening--photo .base-opening-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- the home page's blocks ---------- */

.base-block {
  padding-block: var(--space-8);
}

.base-block + .base-block {
  border-top: 1px solid var(--line);
}

.base-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}

.base-block-title {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.base-hero {
  background: var(--chrome-tint);
  border-bottom: 1px solid var(--chrome-tint-line);
}

.base-hero-inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-10);
}

.base-hero--photo .base-hero-inner {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.base-hero-title {
  font-size: clamp(34px, 5vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  overflow-wrap: break-word;
}

.base-hero-tagline {
  margin-top: var(--space-4);
  font-size: var(--fs-tagline);
  line-height: 1.4;
  color: var(--body);
}

.base-hero-lead {
  margin-top: var(--space-4);
  max-width: 60ch;
}

.base-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-media);
}

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

  .base-hero-inner {
    padding-block: var(--space-8);
  }
}

/* Cards: posts, albums, related posts. The title's link covers the card. */
.base-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-7);
  list-style: none;
}

.base-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.base-card-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.base-card-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.base-card-title {
  font-size: var(--fs-card-title);
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: break-word;
}

.base-card-link {
  color: var(--ink);
  text-decoration: none;
}

.base-card-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.base-card .base-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.base-card:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.base-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.base-tile {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
}

.base-tile--accent {
  border-top-color: var(--accent);
}

.base-tile-link {
  display: block;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}

.base-tile-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.base-tile-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.base-feature {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.base-feature-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-media);
}

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

.base-agenda {
  display: grid;
  gap: var(--space-4);
  list-style: none;
}

.base-agenda-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.base-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--space-2);
  border: 2px solid var(--blue);
  color: var(--blue);
  line-height: 1.1;
  text-align: center;
}

.base-date-day {
  font-size: 26px;
  font-weight: 800;
}

.base-date-month {
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.base-quick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  list-style: none;
}

.base-quick-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 600;
}

.base-quick-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.base-quick-icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.base-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
  list-style: none;
}

.base-figure {
  display: flex;
  flex-direction: column;
}

.base-figure-value {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
}

.base-figure-label {
  color: var(--body);
}

/* «Партнери»: a grid of equal columns — two on a phone, one where even two
   would not fit (320 px, a zoomed narrow window), as many as fit from 900 px.
   Every item starts at the top of its row: the logo in a slot of a fixed
   height, centred in it, and the name in its own row under it, so a long
   name grows its item downward and never moves its logo. */
.base-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
  list-style: none;
}

@media (min-width: 900px) {
  .base-logos {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

.base-logo {
  min-width: 0;
}

.base-logo-link {
  display: block;
}

.base-logos .partner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}

.partner-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.base-logos .partner-name {
  max-width: none;
  overflow-wrap: break-word;
}


/* Partners: the name under the logo, so it stays when the logo does not load. */
.partner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  text-align: center;
}

.partner-name {
  max-width: 180px;
  font-size: var(--fs-nav);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.base-banner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7);
  background: var(--chrome-tint);
  border: 1px solid var(--chrome-tint-line);
  border-radius: var(--radius);
}

.base-banner--image {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.base-banner-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-media);
}

@media (max-width: 899px) {
  .base-banner--image {
    grid-template-columns: minmax(0, 1fr);
  }
}

.base-contacts {
  display: grid;
  gap: var(--space-8);
}

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

@media (max-width: 899px) {
  .base-contacts--map {
    grid-template-columns: minmax(0, 1fr);
  }
}

.base-facts {
  display: grid;
  gap: var(--space-3);
}

.base-fact dt {
  font-size: var(--fs-meta-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.base-fact dd {
  color: var(--ink);
}

.base-fact a,
.base-contact-lines a {
  color: var(--accent);
}

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

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

.base-map-links a {
  color: var(--accent);
  text-decoration: underline;
}

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

.base-doc-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.base-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

/* The title and the «Підписано» mark after it are one flex item, so the mark follows the title and
   never takes the row's free space; the signature line is a row of its own under them. */
.base-doc-head {
  min-width: 0;
}

.base-doc > .doc-protection {
  flex: 0 0 100%;
  margin-top: 0;
}

.base-doc-link {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: break-word;
}

.base-doc-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.base-doc-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.base-doc-group-title {
  font-size: 17px;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.base-link-list {
  list-style: none;
}

.base-link-list li + li {
  margin-top: var(--space-1);
}

.base-link-list a {
  color: var(--accent);
  text-decoration: underline;
}

/* The page a document of the documents collection hangs on (story 26). */
.base-doc-page {
  color: inherit;
  text-decoration: underline;
}

.base-doc-page:hover {
  color: var(--accent);
}

/* ---------- the two collections (story 26) ---------- */

.base-collection-intro {
  margin-bottom: var(--space-6);
}

/* The filters: a plain GET form (partials/collection-filters), its fields
   side by side while they fit. */
.base-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);
  border-radius: var(--radius);
}

.base-collection-filter {
  flex: 0 1 220px;
  min-width: 0;
}

.base-collection-filter--wide {
  flex: 1 1 260px;
}

.base-collection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* The sentence under the filters that says «Сторінка» was reset because the chosen «Тип» has no
   document on it; empty (and out of the way) when nothing was dropped. */
.base-collection-note {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--ink);
  font-size: var(--fs-meta-lg);
  font-weight: 600;
}

.base-collection-note:empty {
  display: none;
}

.base-collection-reset {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.base-collection-result {
  margin-bottom: var(--space-4);
  color: var(--muted);
}

/* The page an album comes from, on the albums collection. */
.base-card-source {
  margin-top: var(--space-1);
}

/* The «Фотоальбоми» and «Люди» chapters of a page (story 26). */
.chp-albums,
.chp-people {
  margin-top: var(--space-5);
}

@media (max-width: 899px) {
  .base-collection-filter,
  .base-collection-filter--wide {
    flex: 1 1 100%;
  }
}

/* ---------- filters: chips shared by feeds and the calendar ---------- */

.base-filters {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-button);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav);
  text-decoration: none;
  cursor: pointer;
}

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

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

/* ---------- feeds and rows ---------- */

.base-lead-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line);
}

.base-lead-story--photo {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.base-lead-story-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.base-lead-story-title {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  margin-bottom: var(--space-2);
  overflow-wrap: break-word;
}

@media (max-width: 899px) {
  .base-lead-story--photo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.base-rows {
  list-style: none;
}

.base-row {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}

.base-row-media {
  flex: none;
  width: 200px;
}

.base-row-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.base-row-title {
  font-size: 20px;
  line-height: 1.3;
  margin: var(--space-1) 0;
  overflow-wrap: break-word;
}

.base-row-title .base-card-link {
  color: var(--ink);
}

.base-row-summary {
  color: var(--body);
}

@media (max-width: 599px) {
  .base-row-media {
    width: 96px;
  }

  .base-row-title {
    font-size: 17px;
  }
}

.base-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-6) 0;
}

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

.base-pagination-status {
  color: var(--muted);
}

/* ---------- a post ---------- */

.base-progress {
  display: none;
}

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

.base-progress-bar {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.base-article {
  max-width: 860px;
}

.base-article-head {
  margin-bottom: var(--space-6);
}

.base-byline a {
  color: var(--accent);
  text-decoration: underline;
}

.base-byline {
  color: var(--body);
  margin-top: var(--space-2);
}

.base-article-cover {
  margin: 0 0 var(--space-7);
}

.base-article-cover img {
  width: 100%;
  border-radius: var(--radius-media);
  cursor: zoom-in;
}

.base-article-body {
  font-size: 18px;
}

.base-article-foot {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.base-related {
  margin-top: var(--space-8);
}

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

.news-share-label {
  font-weight: 700;
  color: var(--ink);
  margin-right: var(--space-2);
}

.news-share-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-button);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav);
  cursor: pointer;
}

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

.news-share-link svg {
  width: 18px;
  height: 18px;
}

/* Authors under a post (#188) and an author's page. */
.news-section-title {
  font-size: 22px;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

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

.author-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.author-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.author-card-name {
  font-size: 18px;
  color: var(--ink);
}

.author-card-link {
  color: var(--ink);
  text-decoration: underline;
}

.author-card-sign,
.author-card-more {
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.author-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.author-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.author-role {
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}

.author-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chrome-tint);
  color: var(--ink);
  font-weight: 800;
  vertical-align: middle;
}

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

.author-av--xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.author-av--hero {
  width: 120px;
  height: 120px;
  font-size: 36px;
}

.base-author {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

@media (max-width: 599px) {
  .base-author {
    flex-direction: column;
  }
}

.news-arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---------- people ---------- */

.base-banner-photo img {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-media);
}

.base-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-6) 0;
}

.base-person {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.base-person-photo {
  flex: none;
  width: 96px;
}

.base-person-photo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.base-person--lead {
  margin-bottom: var(--space-6);
  align-items: center;
}

.base-person--lead .base-person-photo,
.base-person--lead .base-person-photo img {
  width: 140px;
  height: 140px;
}

.base-person-name {
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}

.base-person-role {
  color: var(--body);
}

.base-person-bio {
  margin-top: var(--space-2);
  color: var(--body);
}

/* The director's card and a photo placeholder inside the chapter layout. */
.director-card {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}

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

.director-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director-name {
  font-size: 22px;
  color: var(--ink);
}

.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* ---------- gallery ---------- */

.base-cards--albums {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------- the chapter layout of an info page (#183) ---------- */

.section-page {
  padding-block: var(--space-8) var(--space-10);
}

.chp-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding-block: var(--space-2);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.chp-bar-label {
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}

.chp-bar-list {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  list-style: none;
}

.chp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-button);
  color: var(--ink);
  white-space: nowrap;
}

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

.chp-chip-count {
  font-size: 14px;
}

.chp {
  margin-bottom: var(--space-9);
  scroll-margin-top: 72px;
}

.chp-head {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ink);
}

/* A title with a long word wraps inside the row instead of widening it. */
.chp-head-copy {
  min-width: 0;
}

.chp-num {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
}

.chp-title {
  font-size: 26px;
  color: var(--ink);
}

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

.chp-text-body,
.director-text {
  max-width: 72ch;
}

.chp-text-body > * + *,
.director-text > * + * {
  margin-top: var(--space-4);
}

.chp-news-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

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

.chp-year,
.chp-report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

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

.chp-report-link svg {
  width: 16px;
  height: 16px;
}

.chp-years-single {
  color: var(--muted);
}

.chp-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
  list-style: none;
}

.chp-news-list > li {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.chp-news-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.news-frame {
  display: block;
}

.chp-news-copy {
  padding: var(--space-4);
}

.chp-news-date {
  display: block;
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.chp-news-day::after {
  content: ' ';
}

.chp-news-title {
  font-size: 18px;
  line-height: 1.3;
}

.chp-news-link {
  color: var(--ink);
}

.chp-news-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.chp-news-summary {
  margin-top: var(--space-2);
  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;
}

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

.chp-news-foot {
  margin-top: var(--space-5);
}

.news-flag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--paper);
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.chp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 18px;
  border: 2px solid var(--blue);
  background: var(--paper);
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

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

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

.chp-doc {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

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

.chp-doc-type {
  flex: none;
  min-width: 48px;
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.chp-doc-copy {
  flex: 1;
  min-width: 0;
}

.chp-doc-link {
  font-weight: 600;
  color: var(--ink);
}

.chp-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

.chp-doc-dl svg,
.chp-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* ---------- the calendar (partials/events-days) ---------- */

.base-events {
  margin-top: var(--space-6);
}

.events-day {
  margin-bottom: var(--space-5);
}

.events-day-title {
  font-size: 18px;
  color: var(--ink);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}

.events-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.events-item-title {
  font-size: 18px;
}

.events-item-title a {
  color: var(--ink);
  text-decoration: underline;
}

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

.events-item-summary {
  color: var(--body);
}

/* ---------- search results ---------- */

.base-result-list {
  list-style: none;
}

.base-result {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.base-result-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
}

.base-result-snippet {
  color: var(--body);
}

.base-result mark {
  background: var(--accent);
  color: var(--paper);
}

/* ---------- forms: contacts, the contact result ---------- */

.base-form {
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
}

.form-group {
  display: grid;
  gap: var(--space-1);
}

.form-group label {
  font-weight: 600;
  color: var(--ink);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.form-group .is-invalid {
  border-color: var(--error);
  border-width: 2px;
}

.field-error {
  color: var(--error);
  font-weight: 600;
  font-size: var(--fs-meta-lg);
}

.field-error[hidden] {
  display: none;
}

.honeypot-field {
  position: absolute;
  left: -10000px;
  top: -10000px;
}

.draft-preview-banner {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--accent);
  background: var(--chrome-tint);
  color: var(--ink);
  font-weight: 600;
}

.contact-result {
  padding-block: var(--space-8) var(--space-10);
}

.contact-result-message {
  margin-bottom: var(--space-5);
}

/* «Панорама»'s own button classes, used by the pages that moved to _base
   unchanged (contact-result, section-report, contact-block). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid var(--blue);
  font: inherit;
  font-size: var(--fs-button);
  font-weight: 700;
  cursor: pointer;
}

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

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

.text-page-contact {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.text-page-contact a:not([class]) {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- /prozorist and the printable report ---------- */

.transparency-page {
  padding-block: var(--space-8) var(--space-10);
}

.transparency-lead {
  max-width: 72ch;
  color: var(--body);
  margin-bottom: var(--space-5);
}

.transparency-list {
  padding-left: 1.4em;
}

.transparency-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.transparency-link {
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
}

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

.section-report {
  padding-block: var(--space-8) var(--space-10);
}

.section-report-back a {
  color: var(--accent);
}

.section-report-kicker {
  font-size: var(--fs-meta-lg);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}

.section-report-title {
  font-size: 34px;
  color: var(--ink);
}

.section-report-year {
  color: var(--muted);
}

.section-report-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.section-report-table {
  overflow-x: auto;
}

.section-report-table table {
  width: 100%;
  border-collapse: collapse;
}

.section-report-table th,
.section-report-table td {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}

.section-report-date {
  white-space: nowrap;
}

.section-report-link a {
  color: var(--accent);
  overflow-wrap: break-word;
}

/* ---------- the footer ---------- */

.base-footer {
  margin-top: var(--space-10);
  background: var(--chrome-bar);
  color: var(--chrome-bar-ink);
}

.base-footer a {
  color: var(--chrome-bar-strong);
}

.base-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-7);
  padding-block: var(--space-9);
}

.base-footer-name {
  font-weight: 800;
  font-size: 18px;
  color: var(--chrome-bar-strong);
  margin-bottom: var(--space-2);
}

.base-footer-tagline {
  margin-top: var(--space-2);
}

.base-footer-title {
  font-size: var(--fs-meta-lg);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--chrome-bar-strong);
  margin-bottom: var(--space-3);
}

.base-footer-links {
  list-style: none;
}

.base-footer-links li + li {
  margin-top: var(--space-1);
}

.base-footer-links a,
.base-footer-cta {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.base-contact-lines {
  list-style: none;
}

.base-footer-contacts li + li {
  margin-top: var(--space-1);
}

.base-footer .base-contact-label {
  color: var(--chrome-bar-ink);
}

.base-footer-cta {
  font-weight: 700;
}

.base-footer-bottom {
  padding-block: var(--space-4);
  border-top: 1px solid var(--chrome-bar-line);
  font-size: var(--fs-meta-lg);
}

.base-topline-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.base-topline .base-contact-label {
  opacity: 0.85;
}

/* The social icons (partials/social-icons), wherever a template puts them. */
.chrome-social {
  display: flex;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.chrome-social a {
  display: inline-flex;
  width: 32px;
  height: 32px;
}

.chrome-social svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Contact lines on the dark bands keep the bands' own link colour. */
.base-topline .base-contact-lines a,
.base-footer .base-contact-lines a {
  color: var(--chrome-bar-strong);
}

/* A block whose heading stands alone (no «all …» link beside it). */
.base-block > .base-block-title {
  margin-bottom: var(--space-5);
}

/* «Нижній колонтитул: Світлий» of «Оформлення». */
.theme-footer-light .base-footer {
  background: var(--chrome-tint);
  border-top: 1px solid var(--chrome-tint-line);
  color: var(--body);
}

.theme-footer-light .base-footer a,
.theme-footer-light .base-footer .base-contact-lines a,
.theme-footer-light .base-footer-name,
.theme-footer-light .base-footer-title,
.theme-footer-light .base-footer .base-contact-label {
  color: var(--ink);
}

.theme-footer-light .base-footer-bottom {
  border-top-color: var(--chrome-tint-line);
}

/* ---------- shared fixes (QA, 2026-10) ----------
   Every template that keeps `_base`'s markup picks these up; a template's
   own stylesheet loads after this one and still has the last word. */

/* .link-cue — the contract every template keeps (docs/dev/templates.md):
   a link whose own text names where it leads — «Усі …», a document, a
   document section or a page, the section nav, an event, a post, an album,
   a search result — answers the pointer and the keyboard alike: the accent
   and a thicker underline, never the colour alone; the focus ring of
   base.css comes on top. A template's own markup opts in by the class. */
.link-cue:hover,
.link-cue:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.base-doc-group-title a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* «Партнери»: with a link, the name (.partner-name) is in the text colour
   and takes the links' hover/focus cue. */
.base-logo-link {
  color: var(--ink);
  text-decoration: none;
}

.base-logo-link:hover .partner-name,
.base-logo-link:focus-visible .partner-name {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* A dropdown opens under its own item, from its left edge (mega-menu.js
   still shifts it back inside the window), and a page named like the
   dropdown heads the panel as its overview, set apart by a rule. */
.base-nav-panel {
  left: 0;
  translate: var(--mega-shift, 0px) 0;
}

.base-nav-panel .base-nav-overview {
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
}

/* The labels of the contacts («Адреса», «Телефон») and of an event («Коли»,
   «Де»): sentence case in the text colour, set apart by weight alone — no
   grey tracked capitals, which read as faint at this size. */
.base-fact dt {
  color: var(--ink);
  font-size: var(--fs-nav-side);
  letter-spacing: 0;
  text-transform: none;
}

.base-topline .base-contact-label {
  opacity: 1;
  font-weight: 600;
}

/* No scripts: the desktop dropdown opens on hover and on keyboard focus, in
   every template over this menu (partials/main-nav). With scripts the `js`
   class is on <html> and mega-menu.js does it, as before. The bridge keeps the
   hover across a template's gap between the item and its panel. */
html:not(.js) .mega-menu-wrap:hover > .base-nav-panel[hidden],
html:not(.js) .mega-menu-wrap:focus-within > .base-nav-panel[hidden] {
  display: flex;
}

html:not(.js) .mega-menu-wrap > .base-nav-panel::before {
  content: '';
  position: absolute;
  inset: auto 0 100%;
  height: 8px;
}

/* ---------- the first screen on a phone: the name once, one line of announcement ----------
   At 480 px and below a hero title that only restates the school's name (partials/home/
   hero-title) shows the short name at one line's size — the header already names
   the school — and announcement.js clamps the strip to one line with «…» and a
   «Читати» button that opens the rest. Wider, nothing changes. */

.hero-title-short {
  display: none;
}

@media (max-width: 480px) {
  .hero-title-full {
    display: none;
  }

  .hero-title-short {
    display: block;
    font-size: var(--fs-h2-phone);
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .announcement--short .announcement-inner {
    align-items: center;
  }

  .announcement--short:not(.announcement--open) .announcement-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .announcement-more {
    flex: none;
    min-height: 24px;
    padding: 0 var(--space-1);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--fs-nav-side);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
  }
}

/* The keyboard focus ring from the token: the same ring as base.css, and a rule with a class in
   front of it still wins. The fallback keeps the ring when tokens.css is an older copy. */
:focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent));
  outline-offset: 2px;
}

/* An album slide after the first has no file until the frame is about to show it
   (partials/album, public/js/album.js): until then it is a blank frame, not the
   alt text of a picture that is not there. Only once the script runs (album--ready):
   without it the stage clips those slides anyway, and their frame links keep the
   photo's alt text as their name. */
.album--ready .album-img:not([src]) {
  visibility: hidden;
}

/* The no-media states: a person without a photo and a post without a cover keep their media column
   (a quiet tinted tile on the chrome tokens, so the text of every card and every row starts at the
   same x); a lead story without a cover is a deliberate text-only block with an accent rule. */
.base-person-photo--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  background: var(--chrome-tint);
  border: 1px solid var(--chrome-tint-line);
  border-radius: var(--radius-media);
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.base-person--lead .base-person-photo--blank {
  font-size: 52px;
}

.base-row-blank {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: repeating-linear-gradient(
    135deg,
    var(--chrome-tint) 0 14px,
    var(--chrome-tint-line) 14px 28px
  );
  border-radius: var(--radius-media);
}

.base-lead-story:not(.base-lead-story--photo) .base-lead-story-copy {
  max-width: 46rem;
  padding-left: var(--space-5);
  border-left: 4px solid var(--accent);
}

:root[data-theme='low-vision'] .base-row-blank {
  background-image: none;
  border: 1px solid var(--chrome-tint-line);
}

/* On paper the section menu is hidden (base.css), so its column goes too. */
@media print {
  .base-with-nav {
    display: block;
  }
}

/* css/templates/zoshyt/zoshyt.css */
/* «Зошит» — «Конспект»: lecture notes on a ruled sheet (one gradient, a line
   every --zs-line) with a red margin line. Every line box is --zs-line tall,
   every gap whole lines; another size is nudged onto its line with
   `top: calc(<line> - 0.388em)` (Noto Serif's baseline). Dates, rubrics and
   labels in italic in the margin (`.zoshyt-entry`, a two-track grid). No
   boxes, no shadows; colours through tokens only. */

.zoshyt-body {
  --zs-line: 28px;
  --zs-sheet: 1180px;
  --zs-rail: 200px;
  --zs-side: 32px;
  --zs-note: 8rem;
  --zs-in: 16px;
  --zs-out: 22px;
  --zs-hang: calc(var(--zs-note) + var(--zs-in) + 2px + var(--zs-out));
  --zs-col: 42rem;
  --zs-small: calc(var(--fs-text) - 2px);
  color: var(--zoshyt-ink);
  background: var(--zoshyt-paper);
  font-size: calc(var(--fs-text) + 0.5px);
  line-height: var(--zs-line);
  font-variant-numeric: lining-nums;
}

/* ---------- type on the lines ---------- */

.zoshyt-title,
.zoshyt-main .page-h1,
.zoshyt-hero-title {
  position: relative;
  top: calc(21px - 0.388em);
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: calc(var(--zs-line) * 2);
  letter-spacing: 0;
  color: var(--zoshyt-ink);
  overflow-wrap: break-word;
  hyphens: manual;
}

.zoshyt-hero-title {
  font-size: clamp(30px, 4.2vw, 46px);
}

.zoshyt-hero-title--long {
  top: calc(7px - 0.388em);
  font-size: 26px;
  line-height: var(--zs-line);
}

.zoshyt-block-title,
.zoshyt-lead-title,
.zoshyt-divider,
.zoshyt-prose h2,
.zoshyt-main .base-section-title,
.zoshyt-main .chp-title,
.zoshyt-main .chp-text-body h2,
.zoshyt-main .doc-sign-h2 {
  position: relative;
  top: calc(7px - 0.388em);
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(var(--fs-text) + 7.5px);
  font-weight: 700;
  line-height: var(--zs-line);
  letter-spacing: 0;
  color: var(--zoshyt-ink);
  overflow-wrap: break-word;
}

/* A heading's red stroke, in the empty line under it. */
.zoshyt-title::after,
.zoshyt-block-title::after,
.zoshyt-divider::after,
.zoshyt-prose h2::after,
.zoshyt-main .base-section-title::after,
.zoshyt-main .chp-title::after,
.zoshyt-main .chp-text-body h2::after,
.zoshyt-main .doc-sign-h2::after,
.zoshyt-main .doc-sign .page-h1::after {
  content: '';
  position: absolute;
  top: calc(100% + 0.2em);
  left: 0;
  width: 40px;
  border-top: 2px solid var(--zoshyt-margin);
}

@media (min-width: 600px) {
  .zoshyt-title::after,
  .zoshyt-main .doc-sign .page-h1::after {
    top: calc(100% + 2px);
  }
}

.zoshyt-item-title,
.zoshyt-person-name,
.zoshyt-group-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(var(--fs-text) + 2px);
  font-weight: 400;
  line-height: var(--zs-line);
  letter-spacing: 0;
  color: var(--zoshyt-ink);
  overflow-wrap: break-word;
}

.zoshyt-meta,
.zoshyt-toc-note,
.zoshyt-crumbs,
.zoshyt-byline,
.zoshyt-caption,
.zoshyt-footer-bottom {
  font-size: var(--zs-small);
  line-height: var(--zs-line);
  color: var(--zoshyt-ink-2);
}

.zoshyt-lead,
.zoshyt-hero-tagline {
  position: relative;
  top: calc(7px - 0.388em);
  margin-top: var(--zs-line);
  font-size: calc(var(--fs-text) + 3.5px);
  font-style: italic;
  line-height: var(--zs-line);
  color: var(--zoshyt-ink-2);
}

.zoshyt-hero-title + .zoshyt-hero-tagline {
  margin-top: 0;
}

/* Links are ink, underlined thin; a hover draws the line in red. */
.zoshyt-main a,
.zoshyt-footer a,
.zoshyt-rail-toplink {
  color: var(--zoshyt-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.zoshyt-item-link,
.zoshyt-toc-link,
.zoshyt-main .zoshyt-doc-link {
  text-decoration-color: var(--zoshyt-ink-2);
}

/* The pointer and the keyboard alike; the ink stays, the line turns red. */
.zoshyt-main a:hover,
.zoshyt-main a:focus-visible,
.zoshyt-footer a:hover,
.zoshyt-footer a:focus-visible,
.zoshyt-rail a:hover,
.zoshyt-rail a:focus-visible,
.zoshyt-rail-toggle:hover,
.zoshyt-rail-toggle:focus-visible,
.zoshyt-header a:hover,
.zoshyt-header a:focus-visible,
.zoshyt-tool:hover,
.zoshyt-tool:focus-visible,
.zoshyt-search-button:hover,
.zoshyt-search-button:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--zoshyt-margin);
  text-decoration-thickness: 2px;
}

.zoshyt-body .link-cue:hover,
.zoshyt-body .link-cue:focus-visible {
  color: var(--zoshyt-ink);
}

.zoshyt-empty {
  font-style: italic;
  color: var(--zoshyt-ink-2);
}

.zoshyt-empty[hidden] {
  display: none;
}

.zoshyt-crumbs {
  margin-bottom: var(--zs-line);
}

.zoshyt-more,
.zoshyt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--zs-line);
  margin-top: var(--zs-line);
}

.zoshyt-action:first-child {
  font-weight: 700;
}

.zoshyt-body .base-button,
.zoshyt-body .btn {
  min-height: 40px;
  padding: 5px 18px;
  border: 1px solid var(--zoshyt-ink);
  border-radius: var(--radius-button);
  background: var(--zoshyt-paper);
  color: var(--zoshyt-ink);
  font: inherit;
  font-size: var(--fs-button);
  cursor: pointer;
}

.zoshyt-body .base-button:hover,
.zoshyt-body .btn:hover {
  background: var(--zoshyt-ink);
  color: var(--zoshyt-paper);
}

/* A photo: a hairline, whole lines tall. */
.zoshyt-photo {
  box-sizing: border-box;
  height: calc(var(--zs-line) * 9);
  max-width: 420px;
  margin: var(--zs-line) 0 0;
  padding: 3px;
  border: 1px solid var(--line-strong);
  background: var(--zoshyt-paper);
}

.zoshyt-photo img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

/* Running text: every block whole lines tall. */
.zoshyt-prose,
.zoshyt-main .base-prose,
.zoshyt-main .chp-text-body {
  max-width: 62ch;
}

.zoshyt-prose > *,
.zoshyt-main .base-prose > *,
.zoshyt-main .chp-text-body > * {
  margin: 0;
}

.zoshyt-prose > * + *,
.zoshyt-main .base-prose > * + *,
.zoshyt-main .chp-text-body > * + * {
  margin-top: var(--zs-line);
}

.zoshyt-prose h2,
.zoshyt-main .chp-text-body h2 {
  margin-top: calc(var(--zs-line) * 2);
}

.zoshyt-prose > * + :is(h3, h4),
.zoshyt-main .chp-text-body > * + :is(h3, h4) {
  margin-top: var(--zs-line);
}

/* A picture in a text: whole lines tall, its caption one line. */
.zoshyt-prose figure:not(.md-map, .md-video, .album-photo) img,
.zoshyt-main .chp-text-body figure:not(.md-map, .md-video, .album-photo) img {
  display: block;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  height: calc(var(--zs-line) * 10);
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--zoshyt-paper);
  object-fit: cover;
}

.zoshyt-prose figcaption,
.zoshyt-main .chp-text-body figcaption {
  position: relative;
  top: calc(7px - 0.388em);
  margin: 0;
  font-size: var(--zs-small);
  font-style: italic;
  line-height: var(--zs-line);
  color: var(--zoshyt-ink-2);
  text-align: left;
}

.zoshyt-prose .md-video iframe,
.zoshyt-main .chp-text-body .md-video iframe {
  aspect-ratio: auto;
  height: calc(var(--zs-line) * 12);
}

.zoshyt-prose .md-map iframe,
.zoshyt-main .chp-text-body .md-map iframe {
  height: calc(var(--zs-line) * 13);
}

/* A table on the ruling: its rows are the lines. */
.zoshyt-prose .md-table table,
.zoshyt-main .chp-text-body .md-table table {
  width: 100%;
  font-size: inherit;
}

.zoshyt-prose .md-table th,
.zoshyt-prose .md-table td,
.zoshyt-main .chp-text-body .md-table th,
.zoshyt-main .chp-text-body .md-table td {
  padding: 0 8px;
  border: 0;
  background: none;
  line-height: var(--zs-line);
  overflow-wrap: break-word;
}

.zoshyt-prose .md-table th + th,
.zoshyt-prose .md-table td + td,
.zoshyt-main .chp-text-body .md-table th + th,
.zoshyt-main .chp-text-body .md-table td + td {
  box-shadow: inset 1px 0 0 var(--line-strong);
}

.zoshyt-prose .md-table th:first-child,
.zoshyt-prose .md-table td:first-child,
.zoshyt-main .chp-text-body .md-table th:first-child,
.zoshyt-main .chp-text-body .md-table td:first-child {
  padding-left: 0;
}

.zoshyt-prose .md-callout,
.zoshyt-main .chp-text-body .md-callout {
  padding: var(--zs-line) 20px;
}

.zoshyt-prose .md-callout > *,
.zoshyt-prose .md-callout-title,
.zoshyt-prose .md-details summary,
.zoshyt-main .chp-text-body .md-callout > *,
.zoshyt-main .chp-text-body .md-callout-title,
.zoshyt-main .chp-text-body .md-details summary {
  margin: 0;
}

.zoshyt-prose .md-details,
.zoshyt-main .chp-text-body .md-details {
  padding: 0 0 0 16px;
  border: 0;
  border-left: 2px solid var(--line-strong);
}

/* A rule: a short double stroke on its own line. */
.zoshyt-prose > hr,
.zoshyt-main .chp-text-body > hr {
  position: relative;
  height: var(--zs-line);
  border: 0;
}

.zoshyt-prose > hr::after,
.zoshyt-main .chp-text-body > hr::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 56px;
  border-top: 4px double var(--zoshyt-ink-2);
}

.zoshyt-prose ul,
.zoshyt-prose ol,
.zoshyt-main .base-prose ul,
.zoshyt-main .base-prose ol,
.zoshyt-main .chp-text-body ul,
.zoshyt-main .chp-text-body ol {
  padding-left: 1.4em;
}

.zoshyt-prose img,
.zoshyt-main .chp-text-body img {
  border: 1px solid var(--line-strong);
}

/* ---------- the header: the notebook's title line ---------- */

.zoshyt-header {
  background: var(--zoshyt-paper);
}

/* The line holds still whatever the name: the logo hangs from the top of a
   band as tall as itself (--zs-band), the search and the tools stand on the
   band's bottom line. */
.zoshyt-header-inner {
  --zs-band: 48px;
  display: flex;
  align-items: flex-start;
  gap: 8px 28px;
  max-width: var(--zs-sheet);
  margin-inline: auto;
  padding: 24px var(--zs-side) 14px;
  border-bottom: 1px solid var(--zoshyt-rule);
}

.zoshyt-brand {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  color: var(--zoshyt-ink);
  text-decoration: none;
}

.zoshyt-brand-logo {
  width: auto;
  max-width: 64px;
  height: 48px;
  object-fit: contain;
}

/* The name's last line on the band's bottom line; the admin's lines one
   under another, a step smaller the longer the longest one, three of them
   still inside the band. */
.zoshyt-brand-name {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: var(--zs-band);
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.zoshyt-brand-line {
  display: block;
}

.zoshyt-brand-name--m {
  font-size: 19px;
}

.zoshyt-brand-name--s,
.zoshyt-brand-name--xs {
  font-size: 15px;
  line-height: 1.07;
}

.zoshyt-search {
  display: flex;
  flex: 0 1 auto;
  align-items: flex-end;
  align-self: stretch;
  max-height: var(--zs-band);
  min-width: 0;
  border-bottom: 1px solid var(--zoshyt-ink-2);
}

.zoshyt-search-input {
  flex: 1 1 auto;
  width: 190px;
  min-width: 0;
  min-height: 36px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--zoshyt-ink);
  font: inherit;
  font-size: 16px;
}

.zoshyt-search-input::placeholder {
  color: var(--zoshyt-ink-2);
  font-style: italic;
  opacity: 1;
}

.zoshyt-search-button,
.zoshyt-tool {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--zoshyt-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.zoshyt-search-button {
  text-decoration: none;
}

.zoshyt-header-inner > .zoshyt-tool {
  align-self: stretch;
  align-items: flex-end;
  max-height: var(--zs-band);
}

.zoshyt-search-icon,
.zoshyt-tool-icon,
.zoshyt-menu-toggle {
  display: none;
}

/* The switch while the low-vision look is on (it then reads «Звичайна версія»). */
:root[data-theme='low-vision'] .zoshyt-bvi {
  text-decoration-color: var(--zoshyt-margin);
  text-decoration-thickness: 2px;
}

/* ---------- the sheet: rail | margin | red line | ruled column ---------- */

.zoshyt-sheet {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: var(--zs-rail) minmax(0, 1fr);
  column-gap: 36px;
  width: 100%;
  max-width: var(--zs-sheet);
  margin-inline: auto;
  padding-inline: var(--zs-side);
}

.zoshyt-rail {
  grid-column: 1;
  grid-row: 1;
  padding: calc(var(--zs-line) * 2) 0 calc(var(--zs-line) * 3);
}

.zoshyt-section {
  display: none;
}

.zoshyt-main {
  --zs-ruling: linear-gradient(
    to bottom,
    transparent 21px,
    var(--zoshyt-rule) 21px,
    var(--zoshyt-rule) 22px,
    transparent 22px
  );
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  /* The ruling runs to the sheet's right edge; the column stays --zs-col. */
  padding: calc(var(--zs-line) * 2) max(0px, 100% - var(--zs-hang) - var(--zs-col))
    calc(var(--zs-line) * 4) var(--zs-hang);
}

.zoshyt-ruled {
  background: var(--zs-ruling);
  background-size: 100% var(--zs-line);
}

.zoshyt-margin-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--zs-note) + var(--zs-in));
  width: 2px;
  background: var(--zoshyt-margin);
  transform-origin: top;
}

/* Home only: the margin line draws down once, in CSS from the first style
   (never shown whole and redrawn); not with reduced motion or in low vision. */
@keyframes zoshyt-draw {
  from {
    transform: scaleY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-theme='low-vision']) .zoshyt-main--draw .zoshyt-margin-line {
    animation: zoshyt-draw 600ms cubic-bezier(0.3, 0, 0.2, 1) both;
  }
}

/* Here the column is the `_base` views' container. */
.zoshyt-main .container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.zoshyt-main .base-page {
  padding-block: 0;
}

/* An entry: the note in the margin (after the content in the markup). */
.zoshyt-entry {
  display: grid;
  grid-template-columns: var(--zs-note) minmax(0, 1fr);
  column-gap: calc(var(--zs-in) + 2px + var(--zs-out));
  margin-left: calc(-1 * var(--zs-hang));
}

.zoshyt-entry > .zoshyt-note {
  grid-column: 1;
  grid-row: 1;
}

.zoshyt-entry > :not(.zoshyt-note) {
  grid-column: 2;
  min-width: 0;
}

/* Written in the margin: italic, grey, flush to the red line. */
.zoshyt-note {
  margin: 0;
  font-size: var(--zs-small);
  font-style: italic;
  line-height: var(--zs-line);
  color: var(--zoshyt-ink-2);
  text-align: right;
  overflow-wrap: break-word;
}

/* Small text is nudged down onto its line, like the larger sizes are up. */
.zoshyt-note:not(.zoshyt-date, .zoshyt-figure-value, .zoshyt-person-photo),
.zoshyt-date-month,
.zoshyt-date-rubric,
.zoshyt-date-after,
.zoshyt-date-short,
.zoshyt-date-label,
.zoshyt-meta,
.zoshyt-toc-note,
.zoshyt-crumbs,
.zoshyt-byline,
.zoshyt-body .zoshyt-filters .filter-chip,
.zoshyt-body .news-share-label,
.zoshyt-body .news-share-link {
  position: relative;
  top: calc(7px - 0.388em);
}

.zoshyt-note-label,
.zoshyt-note-line,
.zoshyt-note-value,
.zoshyt-date time,
.zoshyt-date-long,
.zoshyt-date-month,
.zoshyt-date-rubric,
.zoshyt-date-after,
.zoshyt-date-short > span {
  display: block;
}

/* A date wraps only between the month and the year. */
.zoshyt-date {
  overflow-wrap: normal;
}

.zoshyt-date-after,
.zoshyt-date-short > span {
  white-space: nowrap;
}

.zoshyt-article-notes .zoshyt-date-after {
  white-space: normal;
}

.zoshyt-date-short,
.zoshyt-item-rubric {
  display: none;
}

.zoshyt-note-value,
.zoshyt-num,
.zoshyt-filetype {
  font-style: normal;
  color: var(--zoshyt-ink);
}

.zoshyt-num {
  font-variant-numeric: lining-nums tabular-nums;
}

.zoshyt-date-day,
.zoshyt-entry > .zoshyt-figure-value {
  display: block;
  position: relative;
  top: calc(7px - 0.388em);
  font-size: 24px;
  font-style: normal;
  color: var(--zoshyt-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- the rail: the chapter titles ---------- */

.zoshyt-rail-list,
.zoshyt-rail-sub {
  list-style: none;
}

.zoshyt-rail-link,
.zoshyt-rail-group {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--zoshyt-ink);
  font: inherit;
  font-size: 16.5px;
  line-height: var(--zs-line);
  text-align: left;
  text-decoration: none;
  overflow-wrap: break-word;
  cursor: pointer;
}

.zoshyt-rail-item + .zoshyt-rail-item {
  margin-top: 6px;
}

.zoshyt-rail-group,
.zoshyt-rail-toggle[aria-expanded='true'] {
  font-style: italic;
}

.zoshyt-rail-group {
  cursor: default;
}

.zoshyt-rail-count,
.zoshyt-overlay-count,
.zoshyt-section-count {
  margin-left: 2px;
  font-size: var(--zs-small);
  font-style: italic;
  color: var(--zoshyt-ink-2);
}

.zoshyt-rail-panel[hidden] {
  display: none;
}

.zoshyt-rail-sub {
  margin: 2px 0 8px;
  padding-left: 14px;
}

.zoshyt-rail-sublink {
  position: relative;
  display: block;
  padding-block: 2px;
  color: var(--zoshyt-ink-2);
  font-size: 15.5px;
  line-height: 24px;
  text-decoration: none;
  overflow-wrap: break-word;
}

.zoshyt-rail-link[aria-current],
.zoshyt-rail-sublink[aria-current] {
  position: relative;
  color: var(--zoshyt-ink);
}

.zoshyt-rail-link[aria-current='page'],
.zoshyt-rail-sublink[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The current page: a small red dot before it, a tick in the margin; the
   feed above an open post or record: the same mark as a hollow ring. */
.zoshyt-rail-link[aria-current]::before,
.zoshyt-rail-sublink[aria-current]::before {
  content: '';
  position: absolute;
  top: 11px;
  left: -14px;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--zoshyt-margin);
  border-radius: 50%;
  background: var(--zoshyt-margin);
}

.zoshyt-rail-link[aria-current='true']::before,
.zoshyt-rail-sublink[aria-current='true']::before {
  background: transparent;
}

.zoshyt-rail-cta {
  text-decoration: underline;
  text-decoration-color: var(--zoshyt-margin);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.zoshyt-rail-note {
  margin-top: var(--zs-line);
  font-size: var(--fs-nav-side);
}

/* ---------- the home page ---------- */

/* Topics part by three empty lines. */
.zoshyt-home > * + * {
  margin-top: calc(var(--zs-line) * 3);
}

.zoshyt-hero-lead {
  max-width: 62ch;
  margin-top: var(--zs-line);
}

.zoshyt-hero-lead > * {
  margin: 0;
}

/* The photo in the margin beside the title, four lines tall. */
.zoshyt-entry > .zoshyt-hero-media {
  box-sizing: border-box;
  height: calc(var(--zs-line) * 4);
  margin-top: var(--zs-line);
  padding: 3px;
  border: 1px solid var(--line-strong);
  background: var(--zoshyt-paper);
}

.zoshyt-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zoshyt-list,
.zoshyt-toc,
.zoshyt-figures,
.zoshyt-quick,
.zoshyt-logos {
  list-style: none;
  margin: var(--zs-line) 0 0;
  padding: 0;
}

.zoshyt-links,
.zoshyt-authors-list {
  list-style: none;
}

.zoshyt-entry > .zoshyt-toc,
.zoshyt-authors .zoshyt-divider {
  margin-top: 0;
}

.zoshyt-authors-list {
  margin-top: var(--zs-line);
}

.zoshyt-list > li + li {
  margin-top: var(--zs-line);
}

.zoshyt-block--documents .zoshyt-list > li + li {
  margin-top: 0;
}

.zoshyt-item-summary,
.zoshyt-meta,
p.zoshyt-entry-body {
  margin: 0;
}

/* A document's title is a whole line tall to tap. */
.zoshyt-doc-link {
  display: inline-block;
  overflow-wrap: break-word;
}

.zoshyt-meta a {
  color: var(--zoshyt-ink-2);
}

/* The signature line sits on the ruling like the rest: whole lines, no gap above. «Підписано» is an
   aside after the title, italic like the notes in the margin. */
.zoshyt-doc .doc-protection {
  margin-top: 0;
  color: var(--zoshyt-ink-2);
  font-size: var(--zs-small);
  line-height: var(--zs-line);
}

.zoshyt-doc .doc-protection-desc {
  margin-top: 0;
}

/* In low vision too the line is the meta row's size, not the shared one. */
:root[data-theme='low-vision'] .zoshyt-doc .doc-protection {
  font-size: var(--zs-small);
}

.zoshyt-doc .doc-signed-mark {
  color: var(--zoshyt-ink-2);
  font-size: var(--zs-small);
  font-style: italic;
}

/* «Розділи сайту»: a table of contents, every title alike. */
.zoshyt-toc-item {
  font-size: calc(var(--fs-text) + 2px);
}

.zoshyt-toc-link {
  overflow-wrap: break-word;
}

.zoshyt-toc-note {
  font-style: italic;
  overflow-wrap: break-word;
}

/* A smaller word inside a line keeps the line's height. */
.zoshyt-toc-note,
.zoshyt-doc span.zoshyt-meta,
.zoshyt-rail-count {
  line-height: 1;
}

.zoshyt-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--zs-line) 32px;
  margin-top: var(--zs-line);
}

.zoshyt-group-title {
  font-style: italic;
}

.zoshyt-quick {
  columns: 2 220px;
  column-gap: 32px;
}

.zoshyt-quick li {
  break-inside: avoid;
}

.zoshyt-quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--zs-line);
}

.zoshyt-quick-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--zoshyt-ink-2);
}

/* Equal columns, every item from the top of its row: a long name grows
   downward and never moves its logo. Two on a phone, one at 320 px. */
.zoshyt-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
  gap: var(--zs-line) 24px;
  align-items: start;
}

.zoshyt-logo {
  min-width: 0;
}

.zoshyt-logo a {
  display: block;
}

.zoshyt-logo .partner {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.zoshyt-logo .partner-logo {
  height: calc(var(--zs-line) * 2);
}

/* A partner's logo: two lines tall, a hairline. */
.zoshyt-logo img {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  height: calc(var(--zs-line) * 2);
  padding: 3px;
  border: 1px solid var(--line-strong);
  background: var(--zoshyt-paper);
  object-fit: contain;
}

/* Its name, one ruled line under the logo. */
.zoshyt-logo .partner {
  gap: 0;
}

.zoshyt-logo .partner-name {
  max-width: none;
  line-height: var(--zs-line);
  overflow-wrap: break-word;
}

.zoshyt-logo-link:hover .partner-name,
.zoshyt-logo-link:focus-visible .partner-name {
  text-decoration: underline;
  text-decoration-color: var(--zoshyt-margin);
  text-decoration-thickness: 2px;
}

.zoshyt-banner {
  display: grid;
  gap: var(--zs-line) 28px;
  margin-top: var(--zs-line);
}

.zoshyt-banner--image {
  grid-template-columns: minmax(0, 1fr) 196px;
  align-items: start;
}

.zoshyt-banner-copy > * {
  margin: 0;
}

.zoshyt-banner-media.zoshyt-photo {
  height: calc(var(--zs-line) * 5);
  margin: 0;
}

.zoshyt-address,
.zoshyt-map {
  margin-top: var(--zs-line);
}

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

.zoshyt-body .base-map-links a,
.zoshyt-body .chrome-social a {
  color: var(--zoshyt-ink);
}

/* ---------- inner pages ---------- */

.zoshyt-page-head,
.zoshyt-opening,
.zoshyt-director,
.zoshyt-director-name,
.zoshyt-team-banner,
.zoshyt-team-intro,
.zoshyt-intro {
  margin-bottom: var(--zs-line);
}

.zoshyt-page-head > .zoshyt-note,
.zoshyt-opening .zoshyt-entry > .zoshyt-note {
  padding-top: var(--zs-line);
}

.zoshyt-filters,
.zoshyt-filter-entry,
.zoshyt-opening-counters,
.zoshyt-item--lead + *,
.zoshyt-item--lead .zoshyt-item-summary,
.zoshyt-byline,
.zoshyt-linked,
.zoshyt-article-body {
  margin-top: var(--zs-line);
}

.zoshyt-opening-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.zoshyt-divider {
  margin-top: calc(var(--zs-line) * 2);
}

/* A post: the notes stay in view beside the text as it scrolls. */
.zoshyt-entry > .zoshyt-article-notes {
  position: sticky;
  top: var(--zs-line);
  grid-row: 1 / span 2;
  align-self: start;
}

.zoshyt-article-cover.zoshyt-photo {
  max-width: 560px;
  height: calc(var(--zs-line) * 11);
}

.zoshyt-article-cover img {
  cursor: zoom-in;
}

.zoshyt-article-cover .zoshyt-caption {
  display: none;
}

.zoshyt-article-foot {
  display: flex;
  flex-direction: column;
  gap: var(--zs-line);
  margin-top: calc(var(--zs-line) * 2);
}

.zoshyt-article-foot > p {
  margin: 0;
}

.zoshyt-article .author-cards,
.zoshyt-main .text-page-contact {
  margin-top: calc(var(--zs-line) * 2);
}

.zoshyt-main .text-page-contact {
  padding-top: 0;
  border-top: 0;
}

.zoshyt-person-photo {
  display: flex;
  justify-content: flex-end;
}

.zoshyt-person-photo img,
.zoshyt-person-initial {
  box-sizing: border-box;
  width: calc(var(--zs-line) * 3);
  height: calc(var(--zs-line) * 3);
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--zoshyt-paper);
}

.zoshyt-person-photo img {
  object-fit: cover;
}

.zoshyt-person-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zoshyt-ink-2);
  font-size: 28px;
}

.zoshyt-person-role,
.zoshyt-person-bio {
  margin: 0;
  color: var(--zoshyt-ink-2);
}

.zoshyt-person-role {
  font-style: italic;
}

.zoshyt-director-photo.zoshyt-photo {
  max-width: 240px;
  height: calc(var(--zs-line) * 10);
  margin-top: 0;
}

/* The collection's filters: no panel; «Показати» an underlined word. */
.zoshyt-collection-filters.base-collection-filters {
  gap: 0 var(--zs-line);
  margin-bottom: var(--zs-line);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.zoshyt-body .zoshyt-collection-filters .base-button,
.zoshyt-body .zoshyt-form .base-button {
  min-height: var(--zs-line);
  padding: 0;
  border: 0;
  background: none;
  color: var(--zoshyt-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.zoshyt-body .zoshyt-collection-filters .base-button:hover,
.zoshyt-body .zoshyt-form .base-button:hover {
  background: none;
  color: var(--zoshyt-ink);
  text-decoration-color: var(--zoshyt-margin);
  text-decoration-thickness: 2px;
}

.zoshyt-collection-filters .base-collection-reset {
  color: var(--zoshyt-ink);
  font-weight: 400;
}

.zoshyt-result,
.zoshyt-fact dd {
  margin: 0;
}

.zoshyt-fact dd {
  overflow-wrap: break-word;
}

.zoshyt-fact-line {
  display: block;
}

.zoshyt-divider + .zoshyt-facts,
.zoshyt-divider + .zoshyt-form {
  margin-top: var(--zs-line);
}

/* Filters and sharing: plain words, a line tall each. */
.zoshyt-body .base-filters {
  gap: 0;
  margin-bottom: 0;
}

.zoshyt-body .chip-row,
.zoshyt-body .news-share {
  gap: 0 18px;
}

.zoshyt-body .filter-chip,
.zoshyt-body .news-share-link,
.zoshyt-body .news-share-label {
  min-height: 0;
  height: var(--zs-line);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--zoshyt-ink);
  font: inherit;
  font-size: var(--zs-small);
  line-height: var(--zs-line);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.zoshyt-body .news-share-label {
  font-style: italic;
  color: var(--zoshyt-ink-2);
  text-decoration: none;
}

.zoshyt-body .news-share-link svg {
  width: 15px;
  height: 15px;
}

.zoshyt-body .filter-chip.is-active,
.zoshyt-body .filter-chip:hover,
.zoshyt-body .news-share-link:hover {
  background: none;
  color: var(--zoshyt-ink);
  text-decoration-color: var(--zoshyt-margin);
  text-decoration-thickness: 2px;
}

/* ---------- the mobile menu: a notebook page with its margin line ---------- */

.zoshyt-body .mobile-menu-overlay {
  padding: 72px 24px 48px 56px;
  background: linear-gradient(
      to right,
      transparent 36px,
      var(--zoshyt-margin) 36px,
      var(--zoshyt-margin) 38px,
      transparent 38px
    )
    var(--zoshyt-paper);
}

/* Without a script the menu is the list under the header: no room for the
   close button above it, the text still right of the margin line. */
html:not(.js) .zoshyt-body .mobile-menu-overlay {
  padding: var(--space-5) 24px var(--space-5) 56px;
}

/* Without a script the list above carries its own search, so the header's goes
   while the list shows (it goes at 1280px, chrome.css). */
@media (max-width: 1279px) {
  html:not(.js) .zoshyt-search {
    display: none;
  }
}

.zoshyt-body .mobile-menu-close {
  border: 0;
  background: none;
  color: var(--zoshyt-ink);
}

.zoshyt-body .mobile-search-input {
  border: 0;
  border-bottom: 1px solid var(--zoshyt-ink-2);
  font-style: italic;
}

.zoshyt-body .mobile-search-button {
  border: 0;
  background: none;
  color: var(--zoshyt-ink);
  font-weight: 400;
  text-decoration: underline;
}

.zoshyt-body .mobile-menu-close {
  width: auto;
  height: 44px;
  padding: 0 4px;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.zoshyt-body .mobile-menu-overlay a,
.zoshyt-body .mobile-about-toggle {
  min-height: 44px;
  border-bottom: 1px solid var(--zoshyt-rule);
  color: var(--zoshyt-ink);
  font-weight: 400;
}

/* A chapter is a row; its pages under it. */
.zoshyt-body .zoshyt-overlay .mobile-about-toggle {
  flex-wrap: wrap;
  gap: 0 8px;
  font-style: italic;
}

.zoshyt-body .zoshyt-overlay-pages {
  padding-left: 22px;
}

.zoshyt-body .zoshyt-overlay-pages a {
  position: relative;
  font-size: 16px;
}

/* The current location, as in the rail: the page itself bold, underlined
   and dotted red in the margin; the chapter or feed above it bold with a
   hollow ring. The dot replaces _base's bar, which would sit on the red
   margin line; the weight and the underline stay. */
.zoshyt-body .zoshyt-overlay [aria-current] {
  position: relative;
  padding-left: 0;
  border-left: 0;
  font-weight: 700;
}

.zoshyt-body .zoshyt-overlay [aria-current]::before {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  left: -16px;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--zoshyt-margin);
  border-radius: 50%;
  background: var(--zoshyt-margin);
}

.zoshyt-body .zoshyt-overlay [aria-current='true']::before {
  background: transparent;
}

.zoshyt-body .zoshyt-overlay a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.zoshyt-body .mobile-important {
  text-decoration: underline;
  text-decoration-color: var(--zoshyt-margin);
}

/* ---------- the footer ---------- */

/* Its links and lines at the 15 px floor; the titles and the bottom line are
   the small notes. */
.zoshyt-footer {
  background: var(--zoshyt-paper);
  color: var(--zoshyt-ink-2);
  font-size: calc(var(--fs-text) - 1.5px);
  line-height: 24px;
}

.zoshyt-footer-inner {
  max-width: var(--zs-sheet);
  margin-inline: auto;
  padding: 0 var(--zs-side) 28px;
}

.zoshyt-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 40px;
  padding-top: 28px;
  border-top: 1px solid var(--zoshyt-rule);
}

.zoshyt-footer-name {
  font-size: 18px;
  font-weight: 400;
  color: var(--zoshyt-ink);
  overflow-wrap: break-word;
}

.zoshyt-footer-text {
  margin-top: 8px;
}

.zoshyt-footer-tagline,
.zoshyt-footer-title {
  font-style: italic;
}

.zoshyt-footer-title {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: var(--zs-small);
  font-weight: 400;
  color: var(--zoshyt-ink-2);
}

.zoshyt-footer-links,
.zoshyt-footer-lines {
  list-style: none;
}

.zoshyt-footer .base-contact-label {
  color: var(--zoshyt-ink-2);
}

.zoshyt-footer-bottom {
  margin-top: 24px;
}

.theme-footer-dark .zoshyt-footer {
  background: var(--chrome-bar);
  color: var(--chrome-bar-ink);
}

.theme-footer-dark .zoshyt-footer-grid {
  border-top-color: var(--chrome-bar);
}

.theme-footer-dark .zoshyt-footer-name,
.theme-footer-dark .zoshyt-footer a {
  color: var(--chrome-bar-strong);
}

.theme-footer-dark .zoshyt-footer-title,
.theme-footer-dark .zoshyt-footer .base-contact-label,
.theme-footer-dark .zoshyt-footer-bottom {
  color: var(--chrome-bar-ink);
}

/* The keyboard ring on the dark footer: the ring of the dark bands, not the accent. */
.theme-footer-dark .zoshyt-footer :focus-visible {
  outline: var(--focus-ring-on-dark);
  outline-offset: 3px;
}

/* ---------- a wide screen that is not quite wide ---------- */

@media (min-width: 900px) and (max-width: 1099px) {
  .zoshyt-body {
    --zs-rail: 180px;
    --zs-note: 6.5rem;
    --zs-in: 12px;
    --zs-out: 18px;
  }

  .zoshyt-sheet {
    column-gap: 24px;
  }
}

/* ---------- a very wide screen: a wider sheet, the same column ---------- */

@media (min-width: 1600px) {
  .zoshyt-body {
    --zs-sheet: 1320px;
  }
}

/* ---------- below the tablet edge: no rail, the overlay is the menu ---------- */

@media (max-width: 899px) {
  .zoshyt-body {
    --zs-side: 20px;
  }

  .zoshyt-rail,
  .zoshyt-note--section {
    display: none;
  }

  .zoshyt-menu-toggle {
    display: inline-flex;
    width: auto;
    height: auto;
    margin-left: 0;
  }

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

  .zoshyt-main {
    grid-column: 1;
    padding-top: var(--zs-line);
  }

  /* The section's pages folded into one line on the ruling. */
  .zoshyt-section {
    display: block;
    margin-bottom: var(--zs-line);
    color: var(--zoshyt-ink);
  }

  .zoshyt-section-line {
    min-height: var(--zs-line);
    list-style: none;
    font-style: italic;
    line-height: var(--zs-line);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .zoshyt-section-line::-webkit-details-marker {
    display: none;
  }

  .zoshyt-section-count {
    font-size: inherit;
  }

  .zoshyt-section-list {
    list-style: none;
    padding-left: 22px;
  }

  .zoshyt-section-link {
    position: relative;
    display: block;
    line-height: var(--zs-line);
    text-decoration: none;
  }

  .zoshyt-main .zoshyt-section-link:not([aria-current='page']) {
    text-decoration: none;
  }

  .zoshyt-main .zoshyt-section-link:not([aria-current='page']):hover,
  .zoshyt-main .zoshyt-section-link:not([aria-current='page']):focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--zoshyt-margin);
    text-decoration-thickness: 2px;
  }

  .zoshyt-section-link[aria-current]::before {
    content: '';
    position: absolute;
    top: 11px;
    left: -16px;
    box-sizing: border-box;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--zoshyt-margin);
    border-radius: 50%;
    background: var(--zoshyt-margin);
  }

  .zoshyt-section-link[aria-current='true']::before {
    background: transparent;
  }
}

/* ---------- a phone: a narrow margin, the notes still in it ---------- */

@media (max-width: 599px) {
  .zoshyt-body {
    --zs-side: 12px;
    --zs-note: 3.5rem;
    --zs-in: 8px;
    --zs-out: 12px;
    --zs-small: 14px;
  }

  .zoshyt-header-inner {
    --zs-band: 36px;
    gap: 4px;
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .zoshyt-brand {
    flex: 1 1 0;
    gap: 8px;
    min-width: min-content;
  }

  /* On a phone the lines run on as one text, in full, from the logo's top. */
  .zoshyt-brand-name {
    display: block;
    min-width: auto;
    min-height: 0;
    font-size: 16px;
  }

  .zoshyt-brand-line {
    display: inline;
  }

  .zoshyt-brand-name--m,
  .zoshyt-brand-name--s,
  .zoshyt-brand-name--xs {
    font-size: 15px;
    line-height: 1.25;
  }

  .zoshyt-brand-logo {
    height: 36px;
  }

  .zoshyt-search {
    flex: 1 1 0;
    min-width: 72px;
  }

  .zoshyt-search-input {
    width: auto;
  }

  /* A long name takes the whole first row; the tools keep one row under it. */
  .zoshyt-header-inner {
    flex-wrap: wrap;
  }

  .zoshyt-brand--long {
    flex-basis: 100%;
  }

  .zoshyt-hero-title.zoshyt-hero-title--long {
    font-size: 21px;
  }

  .zoshyt-search-word,
  .zoshyt-bvi .bvi-label-off,
  .zoshyt-bvi .bvi-label-on {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .zoshyt-search-icon,
  .zoshyt-tool-icon {
    display: block;
  }

  /* The switch's icon follows its label: an open eye, a crossed-out one
     while the low-vision look is on. */
  .zoshyt-tool-icon.zoshyt-bvi-icon-on,
  :root[data-theme='low-vision'] .zoshyt-tool-icon.zoshyt-bvi-icon-off {
    display: none;
  }

  :root[data-theme='low-vision'] .zoshyt-tool-icon.zoshyt-bvi-icon-on {
    display: block;
  }

  .zoshyt-search-input {
    font-size: 15px;
  }

  .zoshyt-tool {
    text-decoration: none;
  }

  .zoshyt-menu-toggle {
    text-decoration: underline;
  }

  .zoshyt-date-day {
    font-size: 19px;
  }

  .zoshyt-entry > .zoshyt-figure-value {
    font-size: 15px;
  }

  /* Block labels sideways up the narrow margin, out of the flow. */
  .zoshyt-block-head,
  .zoshyt-filter-entry,
  .zoshyt-block--sections > .zoshyt-entry {
    position: relative;
  }

  .zoshyt-block-head > .zoshyt-note,
  .zoshyt-filter-entry > .zoshyt-note,
  .zoshyt-block--sections > .zoshyt-entry > .zoshyt-note {
    position: absolute;
    top: 0;
    left: calc(var(--zs-note) - 20px);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
  }

  .zoshyt-entry > .zoshyt-hero-media {
    grid-row: 2;
    grid-column: 2;
    width: 168px;
  }

  .zoshyt-title,
  .zoshyt-main .page-h1,
  .zoshyt-hero-title {
    top: calc(7px - 0.388em);
    font-size: 26px;
    line-height: var(--zs-line);
  }

  .zoshyt-hero-title {
    font-size: 26px;
  }

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

  .zoshyt-person-photo img,
  .zoshyt-person-initial {
    width: calc(var(--zs-line) * 2);
    height: calc(var(--zs-line) * 2);
    font-size: 20px;
  }
}

/* A phone: an album's date, count and page do not fit the narrow margin
   without splitting a word, so they are one line in the column under it. */
@media (max-width: 599px) {
  .zoshyt-album > .zoshyt-note {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .zoshyt-album .zoshyt-note-line {
    display: inline-block;
    margin-right: 0.75em;
  }
}

/* A narrow phone: the date as «01.09» over «2026»; the rubric in the column. */
@media (max-width: 399px) {
  .zoshyt-date-long,
  .zoshyt-date-rubric {
    display: none;
  }

  .zoshyt-date-short,
  .zoshyt-item-rubric {
    display: block;
  }

  .zoshyt-item-rubric {
    font-style: italic;
  }

  /* Past the margin a document viewer's «Сторінка N з M» takes a row of its
     own over the two steps, so «Наступна ›» keeps a column it fits in. */
  .zoshyt-main .doc-viewer-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .zoshyt-main .doc-viewer-status {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

/* The narrowest phones: the search is the glass alone. */
@media (max-width: 359px) {
  .zoshyt-search-input {
    display: none;
  }

  .zoshyt-search {
    flex: none;
    min-width: 0;
    border-bottom: 0;
  }

  .zoshyt-header-inner {
    --zs-band: 30px;
  }

  .zoshyt-brand-name {
    font-size: 15px;
  }

  .zoshyt-brand-logo {
    height: 30px;
  }

}

/* ---------- a page with chapters reads as the same page ---------- */

/* A page's first document adds its chapter and restyles nothing (#396): the
   text page's heading (partials/page-heading), the text set as the page's
   prose, no chapter numbers; the text's own head, and the people's when
   they open the page or follow the text, kept for screen readers only. */
.zoshyt-body .chp-num {
  display: none;
}

.zoshyt-body .zoshyt-page-heading + .section-page {
  padding-top: 0;
}

/* After the text the people come as close as under a people page's intro:
   the text chapter's own margin (_base) less the difference. */
.zoshyt-body .section-page > #pro-rozdil + #lyudy {
  margin-top: calc(var(--zs-line) - var(--space-9));
}

.zoshyt-body .section-page > #pro-rozdil > .chp-head,
.zoshyt-body .section-page > #lyudy:first-of-type > .chp-head,
.zoshyt-body .section-page > #pro-rozdil + #lyudy > .chp-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- low-vision mode: plain black, the yellow margin line ---------- */

:root[data-theme='low-vision'] .zoshyt-body {
  --zs-line: 1.6em;
}

/* The larger letters want wider partner columns: still two on a phone. */
:root[data-theme='low-vision'] .zoshyt-logos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}

:root[data-theme='low-vision'] .zoshyt-body :is(.zoshyt-title, .page-h1, .zoshyt-hero-title, .zoshyt-block-title, .zoshyt-lead-title, .zoshyt-divider, .zoshyt-lead, .zoshyt-hero-tagline, .zoshyt-date-day, .zoshyt-figure-value, .base-section-title, .chp-title, h2) {
  top: 0;
}

:root[data-theme='low-vision'] .zoshyt-title,
:root[data-theme='low-vision'] .zoshyt-hero-title {
  font-size: 34px;
  line-height: 1.25;
}

@media (max-width: 599px) {
  :root[data-theme='low-vision'] .zoshyt-title,
  :root[data-theme='low-vision'] .zoshyt-hero-title {
    font-size: 26px;
  }
}

/* ---------- prose headings, the home's spacing, the contact form ---------- */

.zoshyt-prose :is(h3, h4),
.zoshyt-main .base-prose :is(h3, h4),
.zoshyt-main .chp-text-body :is(h3, h4) {
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 700;
  line-height: var(--zs-line);
  letter-spacing: 0;
  color: var(--zoshyt-ink);
}

/* Every block's heading is followed by one empty line. */
.zoshyt-home .zoshyt-block-head + * {
  margin-top: var(--zs-line);
}

.zoshyt-home > .zoshyt-hero + .zoshyt-block--sections {
  margin-top: var(--zs-line);
}

.zoshyt-facts {
  margin: 0;
}

.zoshyt-map iframe {
  box-sizing: content-box;
}

.zoshyt-body .base-map-links {
  margin: 0;
  font-size: var(--zs-small);
  line-height: var(--zs-line);
}

/* The form on the lines: an italic label, the field its underline. */
.zoshyt-form .base-form {
  gap: var(--zs-line);
  max-width: 62ch;
}

:is(.zoshyt-form, .zoshyt-collection-filters) .form-group {
  gap: 0;
}

:is(.zoshyt-form, .zoshyt-collection-filters) label {
  position: relative;
  top: calc(7px - 0.388em);
  font-size: var(--zs-small);
  font-style: italic;
  font-weight: 400;
  line-height: var(--zs-line);
  color: var(--zoshyt-ink-2);
}

:is(.zoshyt-form, .zoshyt-collection-filters) :is(input, textarea, select) {
  box-sizing: border-box;
  height: 22px;
  min-height: 0;
  margin-bottom: 6px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--zoshyt-ink-2);
  border-radius: 0;
  background-color: transparent;
  color: var(--zoshyt-ink);
  font: inherit;
  font-size: 16px;
  line-height: 18px;
}

.zoshyt-form textarea {
  height: calc(var(--zs-line) * 5 - 6px);
  line-height: var(--zs-line);
  resize: none;
}

.zoshyt-form .form-group .is-invalid {
  border-width: 0 0 2px;
}

.zoshyt-form .field-error {
  margin: 0;
  font-size: var(--zs-small);
  line-height: var(--zs-line);
}

.zoshyt-body .zoshyt-form .base-button {
  justify-self: start;
}


@media (max-width: 599px) {
  .zoshyt-prose .md-table table,
  .zoshyt-main .chp-text-body .md-table table {
    font-size: calc(var(--fs-text) - 2.5px);
  }

  .zoshyt-prose .md-table :is(th, td),
  .zoshyt-main .chp-text-body .md-table :is(th, td) {
    padding-inline: 4px;
  }

  .zoshyt-prose .md-table th,
  .zoshyt-main .chp-text-body .md-table th {
    font-style: italic;
    font-weight: 400;
  }

  /* Low vision on a phone: no margin; each note a line above its entry. */
  :root[data-theme='low-vision'] .zoshyt-body {
    --zs-note: 0px;
    --zs-small: 17px;
  }

  :root[data-theme='low-vision'] .zoshyt-entry {
    display: flex;
    flex-direction: column;
    margin-left: 0;
  }

  :root[data-theme='low-vision'] .zoshyt-entry > .zoshyt-note {
    position: static;
    top: 0;
    left: auto;
    writing-mode: horizontal-tb;
    transform: none;
    line-height: inherit;
    text-align: left;
    white-space: normal;
  }

  :root[data-theme='low-vision'] .zoshyt-entry > .zoshyt-note:not(.zoshyt-hero-media) {
    order: -1;
  }

  :root[data-theme='low-vision'] .zoshyt-date :is(time, .zoshyt-date-long, .zoshyt-date-day, .zoshyt-date-month, .zoshyt-date-rubric, .zoshyt-date-after) {
    display: inline;
    position: static;
    font-size: inherit;
  }

  :root[data-theme='low-vision'] :is(.zoshyt-date-rubric, .zoshyt-date-after)::before {
    content: '· ';
  }

  :root[data-theme='low-vision'] :is(.zoshyt-date-short, .zoshyt-item-rubric) {
    display: none;
  }
}

/* ---------- print: the page's own content only ---------- */

@media print {
  .zoshyt-rail,
  .zoshyt-section,
  .zoshyt-margin-line {
    display: none;
  }

  .zoshyt-sheet {
    display: block;
    max-width: none;
    padding: 0;
  }

  .zoshyt-main {
    padding-right: 0;
    background: none;
  }

  .zoshyt-entry > .zoshyt-article-notes {
    position: static;
  }
}

/* ---------- records of a page: the filter chips and the cards on the sheet ---------- */

/* The sheet's links are ink and underlined; a chip keeps its own colours. */
.zoshyt-main .records-chip {
  color: var(--ink);
  text-decoration: none;
}

.zoshyt-main .records-chip--on {
  color: var(--paper);
}

/* The ruled column is narrower than a card on a phone: one card to a row. */
.zoshyt-main .records-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* ---------- whole words, whole numbers, controls a finger can hit ---------- */

/* A figure is one unit and never wraps; too long for the margin, it heads
   its line in the column and its word goes under it. */
.zoshyt-figure-value {
  white-space: nowrap;
}

.zoshyt-figure--l > .zoshyt-figure-value {
  grid-column: 2;
  text-align: left;
}

.zoshyt-figure--l > .zoshyt-entry-body {
  grid-row: 2;
}

@media (max-width: 599px) {
  .zoshyt-figure--m > .zoshyt-figure-value {
    grid-column: 2;
    text-align: left;
  }

  .zoshyt-figure--m > .zoshyt-entry-body {
    grid-row: 2;
  }

  :root:not([data-theme='low-vision']) .zoshyt-entry:is(.zoshyt-figure--m, .zoshyt-figure--l) > .zoshyt-figure-value {
    font-size: 19px;
  }
}

/* The phone's margin is too narrow for a label: it heads its value instead. */
@media (max-width: 599px) {
  .zoshyt-fact > .zoshyt-note {
    grid-column: 2;
    text-align: left;
  }

  .zoshyt-fact > dd {
    grid-row: 2;
  }
}

/* 44 px controls; a control taller than its line reaches over the lines
   next to it (negative margins), so the text stays on the ruling. */
.zoshyt-search-input,
.zoshyt-search-button,
.zoshyt-tool {
  min-height: 44px;
}

:is(.zoshyt-form, .zoshyt-collection-filters) :is(input, select) {
  height: 44px;
  margin-top: -22px;
  padding-top: 22px;
}

/* A list's own mark, drawn on the field's line rather than the box's middle. */
.zoshyt-collection-filters select {
  padding-right: 20px;
  appearance: none;
}

.zoshyt-collection-filters .base-collection-filter {
  position: relative;
}

.zoshyt-collection-filters .base-collection-filter:not(.base-collection-filter--wide)::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 15px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--zoshyt-ink);
  border-bottom: 1.5px solid var(--zoshyt-ink);
  transform: rotate(45deg);
  pointer-events: none;
}

.zoshyt-body .zoshyt-collection-filters .base-button,
.zoshyt-body .zoshyt-form .base-button {
  min-height: 44px;
  margin-block: -8px;
}

.zoshyt-body .filter-chip,
.zoshyt-body .news-share-link {
  height: 44px;
  margin-block: -8px;
}

.zoshyt-body .album-btn--full {
  height: 44px;
}

@media (max-width: 899px) {
  .zoshyt-search-button,
  .zoshyt-tool {
    min-width: 44px;
  }
}

@media (max-width: 599px) {
  .zoshyt-header-inner {
    --zs-band: 44px;
  }

  /* The glass and the eye reach into the gaps, so the field keeps its width. */
  .zoshyt-search-button,
  .zoshyt-bvi {
    margin-inline: -4px;
  }
}

/* ---------- «Харчування» (growth story 54): the week on the notebook page ----------
   The day's cell hangs in the margin like a note — right-aligned, a 3px bar beside it on today — and
   the rows are ruled by hairlines; the прийоми are the column heads. Below 900px the entries stack,
   and so does the table (the shared list). */
.zoshyt-body .meals-caption {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-text);
  font-weight: 400;
}

.zoshyt-body .meals-head th {
  border-bottom: 1px solid var(--line-strong);
  font-weight: 700;
}

.zoshyt-body .meals-calendar {
  margin-top: var(--space-8);
}

.zoshyt-body .meals-cal th {
  border-bottom: 1px solid var(--line-strong);
}

@media (min-width: 900px) {
  .zoshyt-body .meals-day {
    border-inline-start: 0;
  }

  .zoshyt-body .meals-scroll {
    margin-left: calc(-1 * var(--zs-hang));
  }

  .zoshyt-body .meals-caption {
    padding-left: var(--zs-hang);
  }

  .zoshyt-body .meals-head th:first-child {
    width: var(--zs-hang);
  }

  .zoshyt-body .meals-table th.meals-day {
    padding-inline: 0 var(--zs-gap);
    text-align: right;
  }

  .zoshyt-body .meals-row.is-today .meals-day {
    position: relative;
  }

  .zoshyt-body .meals-row.is-today .meals-day::after {
    content: '';
    position: absolute;
    inset-block: 0;
    right: calc(var(--zs-gap) / 2 - 2px);
    width: 3px;
    background: var(--accent);
  }

  .zoshyt-body .meals-day + .meals-td,
  .zoshyt-body .meals-head th:nth-child(2) {
    padding-inline-start: 0;
  }

  .zoshyt-body .meals-scroll--wide .meals-table {
    min-width: calc(64rem + var(--zs-hang));
  }

  .zoshyt-body .meals-weeknav {
    padding-left: 0;
  }
}

/* A day marked «Харчування не було» keeps the note's accent edge. */
.zoshyt-body .meals-closed {
  border-inline-start-color: var(--accent);
}

/* ---------- «Перевірка підпису»: the check page on the ruled sheet ---------- */

/* The headings carry the heading strokes (the two lists above); every line of text is a whole
   --zs-line, every gap whole lines, so the words sit on the ruling. The download is an underlined
   link, not a boxed button: no boxes in this notebook. */
.zoshyt-main .doc-sign {
  padding-bottom: calc(var(--zs-line) * 3);
}

.zoshyt-main .doc-sign-doc,
.zoshyt-main .doc-sign-text,
.zoshyt-main .doc-sign-note,
.zoshyt-main .doc-sign-steps,
.zoshyt-main .doc-sign-h3,
.zoshyt-main .doc-sign-checks li,
.zoshyt-main .doc-sign-facts,
.zoshyt-main .doc-sign-files,
.zoshyt-main .doc-sign-small {
  font-size: calc(var(--fs-text) + 0.5px);
  line-height: var(--zs-line);
}

.zoshyt-main .doc-sign-doc {
  margin-top: var(--zs-line);
}

.zoshyt-main .doc-sign-section {
  margin-top: calc(var(--zs-line) * 2);
}

.zoshyt-main .doc-sign-h2 {
  margin-block: 0 var(--zs-line);
  font-size: calc(var(--fs-text) + 8px);
}

.zoshyt-main .doc-sign-text,
.zoshyt-main .doc-sign-note,
.zoshyt-main .doc-sign-steps,
.zoshyt-main .doc-sign-facts,
.zoshyt-main .doc-sign-small,
.zoshyt-main .doc-sign-group,
.zoshyt-main .doc-sign-signer {
  margin-top: var(--zs-line);
}

/* A part directly under a heading follows its empty line (the stroke's) and adds no second one. */
.zoshyt-main .doc-sign-h2 + .doc-sign-group,
.zoshyt-main .doc-sign-h2 + .doc-sign-signer,
.zoshyt-main .doc-sign-gh + .doc-sign-signer {
  margin-top: 0;
}

/* The group heading: a step under the h2, on the ruling like it, with a shorter and thinner stroke
   in the empty line below; the signer heading is bold text on a line, with none. */
.zoshyt-main .doc-sign-gh {
  position: relative;
  top: calc(7px - 0.388em);
  margin: 0 0 var(--zs-line);
  padding: 0;
  border: 0;
  font-family: var(--font-heading);
  font-size: calc(var(--fs-text) + 3px);
  line-height: var(--zs-line);
  color: var(--zoshyt-ink);
}

.zoshyt-main .doc-sign-gh::after {
  content: '';
  position: absolute;
  top: calc(100% + 0.2em);
  left: 0;
  width: 24px;
  border-top: 1px solid var(--zoshyt-margin);
}

:root[data-theme='low-vision'] .zoshyt-main .doc-sign-gh {
  top: 0;
}

.zoshyt-main .doc-sign-h3 + .doc-sign-checks {
  margin-top: var(--zs-line);
}

.zoshyt-main .doc-sign-checks li,
.zoshyt-main .doc-sign-steps li + li,
.zoshyt-main .doc-sign-files li + li {
  margin-top: 0;
}

.zoshyt-main .doc-sign-facts {
  row-gap: 0;
}

.zoshyt-main .doc-sign-facts dt,
.zoshyt-main .doc-sign-facts dd {
  margin: 0;
  font-size: calc(var(--fs-text) + 0.5px);
  line-height: var(--zs-line);
}

.zoshyt-main .doc-sign-facts dt {
  font-size: var(--zs-small);
  font-style: italic;
}

.zoshyt-main .doc-sign-small {
  font-size: var(--zs-small);
}

.zoshyt-main .doc-sign-files {
  margin-top: 0;
}

.zoshyt-main .doc-sign-button {
  padding: 0;
  border: 0;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}