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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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



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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: 0.8em;
}

.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: 0.75em;
}

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

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

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

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

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

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

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

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

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

.base-logo img {
  max-width: 180px;
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

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

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

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

.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, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line);
}

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

@media (max-width: 899px) {
  .base-lead-story {
    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: anywhere;
}

.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: 0.85em;
}

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

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

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

/* css/templates/zoshyt/zoshyt.css */
/* «Зошит» (growth story 15): a calm notebook page. One sheet: a left rail
   with the site's menu, a 2px accent «margin line», and one reading column.
   Inside the column, dates, rubrics and block labels sit in a narrow note
   column of their own: every `.zoshyt-entry` is a two-track grid pulled left
   by the note's width, so its note hangs in the gutter between the margin
   line and the text while the text itself keeps one edge. Rows are ruled by
   thin --line hairlines, like the lines of a notebook. Colours only through
   the tokens, so the low-vision mode repaints all of it. */

.zoshyt-body {
  --zs-sheet: 1140px;
  --zs-rail: 220px;
  --zs-pad: 40px;
  --zs-note: 7rem;
  --zs-gap: 28px;
  --zs-col: 42rem;
  --zs-side: 32px;
  --zs-hang: calc(var(--zs-note) + var(--zs-gap));
}

/* ---------- shared pieces ---------- */

.zoshyt-title,
.zoshyt-main .page-h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-title {
  margin-bottom: 0;
}

.zoshyt-lead {
  margin-top: 14px;
  font-size: calc(var(--fs-text) + 3px);
  line-height: 1.55;
  color: var(--body);
}

.zoshyt-meta {
  font-size: var(--fs-meta-lg);
  line-height: 1.5;
  color: var(--muted);
}

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

.zoshyt-rubric {
  margin-bottom: 4px;
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.zoshyt-caption {
  margin-top: 8px;
  font-size: var(--fs-meta-lg);
  font-style: italic;
  line-height: 1.45;
  color: var(--muted);
  text-align: left;
}

.zoshyt-empty {
  padding: 24px 0;
  font-style: italic;
  color: var(--muted);
}

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

.zoshyt-crumbs {
  margin-bottom: 20px;
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

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

/* A small heading that divides a page: «Раніше», «Читайте також». */
.zoshyt-divider {
  margin-top: 56px;
  font-family: var(--font-body);
  font-size: var(--fs-meta-lg);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.zoshyt-more {
  margin-top: 18px;
}

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

.zoshyt-button,
.zoshyt-body .base-button,
.zoshyt-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 22px;
  border: 2px solid var(--blue);
  border-radius: var(--radius-button);
  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);
}

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

.zoshyt-button--ghost,
.zoshyt-body .base-button--ghost,
.zoshyt-body .btn-outline {
  background: transparent;
  color: var(--blue);
}

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

.zoshyt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

/* A photo laid into the notebook: a thin paper frame around it. */
.zoshyt-frame {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--paper);
  box-shadow: 0 1px 3px var(--blue-shadow-a14);
}

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

/* Running text: a post, the about block, an intro. */
.zoshyt-prose {
  max-width: 68ch;
  color: var(--body);
}

.zoshyt-prose > * + * {
  margin-top: 1em;
}

.zoshyt-prose h2,
.zoshyt-prose h3,
.zoshyt-prose h4 {
  margin-top: 1.8em;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-prose h2 {
  font-size: calc(var(--fs-text) + 8px);
}

.zoshyt-prose h3 {
  font-size: calc(var(--fs-text) + 4px);
}

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

.zoshyt-prose li + li {
  margin-top: 0.35em;
}

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

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

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

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

.zoshyt-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--zs-sheet);
  margin-inline: auto;
  padding: 18px var(--zs-side);
}

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

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

.zoshyt-brand-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.zoshyt-brand-name {
  display: flex;
  flex-direction: column;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  overflow-wrap: anywhere;
}

.zoshyt-brand:hover .zoshyt-brand-name {
  color: var(--accent);
}

.zoshyt-header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.zoshyt-search .base-search-input {
  width: 220px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: var(--radius-button) 0 0 var(--radius-button);
}

.zoshyt-search .base-search-button {
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
}

.zoshyt-bvi {
  min-height: 40px;
  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);
  font-weight: 600;
  cursor: pointer;
}

.zoshyt-bvi:hover,
.zoshyt-bvi[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent);
}

.zoshyt-menu-toggle {
  margin-left: 0;
  border-radius: var(--radius-button);
}

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

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

.zoshyt-rail {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 36px 24px 64px 0;
  border-right: 2px solid var(--accent);
}

.zoshyt-section-row {
  display: none;
}

.zoshyt-main {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  max-width: calc(var(--zs-pad) + var(--zs-hang) + var(--zs-col));
  padding: 40px 0 88px calc(var(--zs-pad) + var(--zs-hang));
}

/* The `_base` views this template keeps (search, events, contacts, text
   pages …) come in their own .container: here the column is the 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, the content in the column. The note
   follows the content in the markup (a heading is read before its label). */
.zoshyt-entry {
  display: grid;
  grid-template-columns: var(--zs-note) minmax(0, 1fr);
  column-gap: var(--zs-gap);
  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;
}

.zoshyt-note {
  padding-top: 0.3em;
  font-size: var(--fs-meta-lg);
  line-height: 1.35;
  color: var(--muted);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Nothing in the margin is set under 12 px (--fs-meta-lg, 12.5 px). */
.zoshyt-note-label {
  display: block;
  font-size: var(--fs-meta-lg);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

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

.zoshyt-note-value {
  display: block;
  margin-top: 2px;
  color: var(--ink);
}

.zoshyt-note-block + .zoshyt-note-block {
  margin-top: 16px;
}

.zoshyt-date time {
  display: block;
}

.zoshyt-date-day {
  display: block;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.zoshyt-date-month {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-meta-lg);
}

/* ---------- the rail: the menu as a vertical list ---------- */

.zoshyt-rail-title {
  margin-bottom: 8px;
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.zoshyt-rail-item {
  border-top: 1px solid var(--line);
}

.zoshyt-rail-item:last-child {
  border-bottom: 1px solid var(--line);
}

.zoshyt-rail-link,
.zoshyt-rail-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav-side);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.zoshyt-rail-group {
  font-weight: 700;
  cursor: default;
}

.zoshyt-rail-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.zoshyt-rail-link.is-current,
.zoshyt-rail-sublink.is-current,
.zoshyt-rail-toggle[aria-expanded='true'] {
  color: var(--accent);
}

/* The current page is marked by a dot sitting on the margin line: the rail's
   right padding plus half the line, less half the dot. */
.zoshyt-rail-link.is-current::after,
.zoshyt-rail-sublink.is-current::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -31px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

.zoshyt-rail-caret {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}

.zoshyt-rail-caret::before,
.zoshyt-rail-caret::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
  background: currentColor;
}

.zoshyt-rail-caret::after {
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.zoshyt-rail-toggle[aria-expanded='true'] .zoshyt-rail-caret::after {
  transform: rotate(0deg);
}

/* The dropdown opens in place, under its item, on a click — a disclosure, not
   a floating panel; disclosure.js only toggles `hidden`. */
.zoshyt-rail-panel {
  padding-bottom: 10px;
}

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

.zoshyt-rail-sub {
  margin-left: 2px;
  border-left: 2px solid var(--line);
}

.zoshyt-rail-item--open .zoshyt-rail-sub {
  margin-bottom: 10px;
  border-left-color: var(--accent);
}

.zoshyt-rail-sublink {
  position: relative;
  display: block;
  padding: 6px 0 6px 14px;
  color: var(--body);
  font-size: calc(var(--fs-nav-side) - 0.5px);
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.zoshyt-rail-sublink:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.zoshyt-rail-sublink.is-current {
  font-weight: 700;
}

/* The menu's button item («Вступ»): a small outlined button in the list. */
.zoshyt-rail-link.zoshyt-rail-cta {
  justify-content: center;
  margin-block: 12px;
  padding: 8px 14px;
  border: 2px solid var(--blue);
  border-radius: var(--radius-button);
  color: var(--blue);
  font-weight: 700;
}

.zoshyt-rail-link.zoshyt-rail-cta:hover {
  background: var(--blue);
  color: var(--paper);
  text-decoration: none;
}

.zoshyt-rail-note {
  margin-top: 24px;
  font-size: var(--fs-meta-lg);
}

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

/* ---------- the home page ---------- */

.zoshyt-home > * + * {
  margin-top: 72px;
}

.zoshyt-hero-title {
  font-size: clamp(36px, 4.4vw, var(--fs-h1));
  line-height: 1.06;
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-hero-tagline {
  margin-top: 16px;
  font-size: var(--fs-tagline);
  line-height: 1.4;
  color: var(--accent);
}

.zoshyt-hero-lead {
  margin-top: 18px;
  color: var(--body);
}

.zoshyt-hero-lead > * + * {
  margin-top: 0.8em;
}

.zoshyt-hero-lead a {
  color: var(--accent);
  text-decoration: underline;
}

.zoshyt-hero-media {
  margin-top: 36px;
}

.zoshyt-hero-media img {
  aspect-ratio: 16 / 9;
}

.zoshyt-block-title {
  font-size: calc(var(--fs-h2-news) * 0.82);
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-block-head > .zoshyt-note {
  padding-top: 0.75em;
}

.zoshyt-block-head + .zoshyt-prose,
.zoshyt-block-head + .zoshyt-logos {
  margin-top: 16px;
}

.zoshyt-list {
  list-style: none;
  margin-top: 20px;
}

.zoshyt-list > .zoshyt-entry {
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.zoshyt-list > .zoshyt-entry:last-child {
  border-bottom: 1px solid var(--line);
}

.zoshyt-item--thumb .zoshyt-item-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px;
  gap: 20px;
  align-items: start;
}

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

.zoshyt-item-title {
  font-size: var(--fs-card-title);
  line-height: 1.3;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-item-link {
  color: var(--ink);
  text-decoration: none;
}

.zoshyt-item-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.zoshyt-item-summary {
  margin-top: 6px;
  color: var(--body);
}

.zoshyt-item .zoshyt-meta {
  margin-top: 4px;
}

/* «Розділи сайту»: a short table of contents. */
.zoshyt-toc {
  list-style: none;
}

.zoshyt-toc-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.zoshyt-toc-item:first-child {
  border-top: 1px solid var(--line);
}

.zoshyt-toc-link {
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.zoshyt-toc-link:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.zoshyt-toc-item--accent .zoshyt-toc-link {
  color: var(--accent);
}

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

/* Documents: the format as a small tag. */
.zoshyt-filetype {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-meta-sm);
  font-weight: 700;
  letter-spacing: var(--ls-filetype);
  line-height: 1.5;
  color: var(--ink);
}

.zoshyt-doc-link {
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

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

.zoshyt-doc .zoshyt-meta {
  margin-top: 4px;
}

.zoshyt-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 32px;
  margin-top: 28px;
}

.zoshyt-group-title {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-meta-lg);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.zoshyt-links {
  list-style: none;
}

.zoshyt-links li + li {
  margin-top: 6px;
}

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

/* The gallery block and the albums of a gallery page. */
.zoshyt-album-media {
  margin-block: 4px 14px;
}

.zoshyt-albums .zoshyt-album-media {
  margin-block: 12px 0;
}

.zoshyt-block--gallery .zoshyt-album {
  margin-top: 20px;
}

/* Quick links: a short two-column list with the sprite's icons. */
.zoshyt-quick {
  list-style: none;
  margin-top: 16px;
  columns: 2 220px;
  column-gap: 32px;
}

.zoshyt-quick li {
  break-inside: avoid;
  border-bottom: 1px solid var(--line);
}

.zoshyt-quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding-block: 8px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

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

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

/* Numbers: a ledger — the figure in the margin, the word beside it. */
.zoshyt-figures {
  list-style: none;
  margin-top: 16px;
}

.zoshyt-figure {
  align-items: baseline;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.zoshyt-figure:first-child {
  border-top: 1px solid var(--line);
}

.zoshyt-entry > .zoshyt-figure-value {
  padding-top: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.zoshyt-figure-label {
  font-size: calc(var(--fs-text) + 1px);
  color: var(--body);
}

.zoshyt-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  list-style: none;
  margin-top: 20px;
}

.zoshyt-logo a {
  display: block;
}

.zoshyt-logo img {
  width: auto;
  max-width: 160px;
  height: 56px;
  object-fit: contain;
}

/* The banner: a solid tinted panel with an accent edge. */
.zoshyt-banner {
  padding: 24px 28px;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--chrome-tint);
  color: var(--ink);
}

.zoshyt-banner--image {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

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

.zoshyt-banner-copy > p {
  margin-top: 10px;
}

.zoshyt-banner-copy > .zoshyt-actions {
  margin-top: 18px;
}

.zoshyt-block--banner > .zoshyt-entry > .zoshyt-note {
  padding-top: 28px;
}

/* Contacts: the labels in the margin. */
.zoshyt-facts {
  margin-top: 16px;
}

.zoshyt-fact {
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.zoshyt-fact:first-child {
  border-top: 1px solid var(--line);
}

.zoshyt-fact dd {
  color: var(--ink);
  overflow-wrap: anywhere;
}

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

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

.zoshyt-divider + .zoshyt-facts,
.zoshyt-divider + .zoshyt-form {
  margin-top: 14px;
}

.zoshyt-map {
  margin-top: 28px;
}

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

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

.zoshyt-body .chrome-social a {
  color: var(--accent);
}

/* ---------- inner pages ---------- */

.zoshyt-page-head {
  margin-bottom: 28px;
}

.zoshyt-page-head > .zoshyt-note {
  padding-top: 0.9em;
}

.zoshyt-filters {
  margin-top: 20px;
}

.zoshyt-opening {
  margin-bottom: 40px;
}

.zoshyt-opening .zoshyt-entry > .zoshyt-note {
  padding-top: 0.9em;
}

.zoshyt-opening-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
}

.zoshyt-opening-counter {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.zoshyt-opening-media {
  margin-top: 24px;
}

/* A feed: the lead entry a little larger. */
.zoshyt-item--lead {
  padding-bottom: 8px;
}

.zoshyt-lead-title {
  font-size: calc(var(--fs-h2-news) * 0.82);
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-item--lead .zoshyt-item-summary {
  margin-top: 10px;
  font-size: calc(var(--fs-text) + 1px);
}

.zoshyt-lead-media {
  margin-top: 20px;
}

.zoshyt-item--lead > .zoshyt-note {
  padding-top: 1.6em;
}

.zoshyt-feed-rows .zoshyt-list {
  margin-top: 12px;
}

/* A post: the notes stay in view beside the text as it scrolls. */
.zoshyt-entry > .zoshyt-article-notes {
  position: sticky;
  top: 24px;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 0.6em;
}

.zoshyt-article-title {
  font-size: clamp(32px, 4vw, 46px);
}

.zoshyt-byline {
  margin-top: 14px;
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

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

.zoshyt-linked {
  margin-top: 6px;
}

.zoshyt-article-cover {
  width: auto;
  margin: 32px 0 0;
}

.zoshyt-article-cover img {
  cursor: zoom-in;
}

.zoshyt-article-body {
  margin-top: 32px;
  font-size: calc(var(--fs-text) + 1.5px);
  line-height: 1.8;
}

.zoshyt-article-foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.zoshyt-article .author-cards {
  margin-top: 40px;
}

.zoshyt-related .zoshyt-list {
  margin-top: 12px;
}

/* An album: two photos per row, each with its caption under it. */

/* People: a small round photo in the margin, the rest in the column. */
.zoshyt-person-photo {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.zoshyt-person-photo img,
.zoshyt-person-initial {
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.zoshyt-person-photo img {
  object-fit: cover;
}

.zoshyt-person-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chrome-tint-line);
  background: var(--chrome-tint);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
}

.zoshyt-person-name {
  font-size: var(--fs-card-title);
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-person-role {
  margin-top: 2px;
  font-weight: 600;
  color: var(--accent);
}

.zoshyt-person .zoshyt-meta {
  margin-top: 4px;
}

.zoshyt-person-bio {
  margin-top: 8px;
  color: var(--body);
}

.zoshyt-director {
  margin-bottom: 28px;
}

.zoshyt-director-photo {
  max-width: 280px;
}

.zoshyt-director-photo img {
  aspect-ratio: 4 / 5;
}

.zoshyt-director-name {
  margin-top: 12px;
}

.zoshyt-team-banner {
  margin-bottom: 24px;
}

.zoshyt-team-intro,
.zoshyt-intro {
  margin-bottom: 12px;
}

.zoshyt-team .text-page-contact {
  margin-top: 40px;
}

/* The collections (story 26): the filters as an entry, «Фільтр» in the
   margin, the form on the page's own paper between two hairlines. */
.zoshyt-filter-entry {
  margin-block: 8px 24px;
}

.zoshyt-collection-filters.base-collection-filters {
  margin-bottom: 8px;
  padding: 14px 0;
  background: none;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
}

.zoshyt-result {
  margin: 0;
}

.zoshyt-docs > .zoshyt-doc {
  padding-block: 14px;
}

/* The `_base` views: section titles, the text of a page. */
.zoshyt-main .base-section-title {
  font-size: calc(var(--fs-text) + 6px);
}

.zoshyt-main .base-prose {
  max-width: 68ch;
}

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

.zoshyt-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--body);
  font-size: var(--fs-nav-side);
}

.zoshyt-footer-inner {
  max-width: var(--zs-sheet);
  margin-inline: auto;
  padding: 40px var(--zs-side) 28px;
}

.zoshyt-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px 40px;
}

.zoshyt-footer-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zoshyt-footer-text {
  margin-top: 8px;
}

.zoshyt-footer-tagline {
  font-style: italic;
}

.zoshyt-footer-title {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-meta-lg);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

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

.zoshyt-footer-links li + li,
.zoshyt-footer-lines li + li {
  margin-top: 6px;
}

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

.zoshyt-footer .base-contact-label {
  color: var(--muted);
}

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

.zoshyt-footer-bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta-lg);
  color: var(--muted);
}

/* «Нижній колонтитул: Темний» of «Оформлення». */
.theme-footer-dark .zoshyt-footer {
  border-top-color: var(--chrome-bar);
  background: var(--chrome-bar);
  color: var(--chrome-bar-ink);
}

.theme-footer-dark .zoshyt-footer-name,
.theme-footer-dark .zoshyt-footer-title,
.theme-footer-dark .zoshyt-footer a {
  color: var(--chrome-bar-strong);
}

.theme-footer-dark .zoshyt-footer .base-contact-label,
.theme-footer-dark .zoshyt-footer-bottom {
  color: var(--chrome-bar-ink);
}

.theme-footer-dark .zoshyt-footer-bottom {
  border-top-color: var(--chrome-bar-line);
}

/* ---------- a wide screen that is not quite wide ---------- */

@media (min-width: 900px) and (max-width: 1099px) {
  .zoshyt-body {
    --zs-rail: 200px;
    --zs-pad: 28px;
    --zs-note: 5.5rem;
    --zs-gap: 20px;
  }

  .zoshyt-search .base-search-input {
    width: 160px;
  }
}

/* ---------- below the tablet edge: no rail, the overlay is the menu ---------- */

@media (max-width: 899px) {
  .zoshyt-body {
    --zs-side: 20px;
    --zs-pad: 0px;
  }

  .zoshyt-search,
  .zoshyt-rail {
    display: none;
  }

  .zoshyt-header-inner {
    padding-block: 12px;
  }

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

  /* The section's name is the title of its row of links here. */
  .zoshyt-note--section {
    display: none;
  }

  .zoshyt-section-row {
    display: block;
    grid-column: 1;
    grid-row: 1;
    padding-top: 20px;
  }

  .zoshyt-main {
    grid-column: 1;
    grid-row: 2;
    max-width: calc(var(--zs-hang) + var(--zs-col));
    padding-top: 28px;
    padding-bottom: 64px;
  }
}

/* ---------- a phone: the notes go above their entries ---------- */

@media (max-width: 599px) {
  .zoshyt-body {
    --zs-note: 0px;
    --zs-gap: 0px;
  }

  .zoshyt-brand-name {
    font-size: 16px;
    overflow-wrap: break-word;
  }

  /* A long name keeps a column wide enough to read: the switch and the menu
     button move under it rather than squeezing it to a word per line. */
  .zoshyt-header-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .zoshyt-brand {
    flex: 1 1 12em;
  }

  .zoshyt-brand-mark {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }

  .zoshyt-brand-logo {
    height: 44px;
  }

  .zoshyt-bvi {
    max-width: 132px;
    font-size: var(--fs-meta-lg);
    line-height: 1.2;
  }

  .zoshyt-entry {
    display: flex;
    flex-direction: column;
  }

  .zoshyt-entry > .zoshyt-note {
    order: -1;
    margin-bottom: 6px;
    padding-top: 0;
    text-align: left;
  }

  .zoshyt-entry > .zoshyt-note:empty,
  .zoshyt-block-head > .zoshyt-note {
    display: none;
  }

  .zoshyt-note-line {
    display: inline;
  }

  .zoshyt-note-line + .zoshyt-note-line::before {
    content: '· ';
  }

  .zoshyt-date-day,
  .zoshyt-date-month {
    display: inline;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-meta-lg);
    font-weight: 700;
    color: var(--muted);
  }

  .zoshyt-entry > .zoshyt-article-notes {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    order: 0;
    margin-top: 16px;
  }

  .zoshyt-note-block + .zoshyt-note-block {
    margin-top: 0;
  }

  .zoshyt-article-notes .zoshyt-note-label,
  .zoshyt-article-notes .zoshyt-note-value {
    display: inline;
  }

  .zoshyt-article-notes .zoshyt-note-value {
    margin-left: 4px;
  }

  .zoshyt-entry.zoshyt-figure,
  .zoshyt-entry.zoshyt-person {
    flex-direction: row;
    gap: 14px;
  }

  .zoshyt-entry.zoshyt-figure > .zoshyt-note,
  .zoshyt-entry.zoshyt-person > .zoshyt-note {
    margin-bottom: 0;
  }

  .zoshyt-person-photo img,
  .zoshyt-person-initial {
    width: 60px;
    height: 60px;
  }

  .zoshyt-item--thumb .zoshyt-item-body {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 14px;
  }

  .zoshyt-banner {
    padding: 20px;
  }

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

  .zoshyt-home > * + * {
    margin-top: 56px;
  }
}

/* ---------- low-vision mode ---------- */

:root[data-theme='low-vision'] .zoshyt-frame {
  box-shadow: none;
}

@media (min-width: 600px) {
  :root[data-theme='low-vision'] .zoshyt-date-day,
  :root[data-theme='low-vision'] .zoshyt-entry > .zoshyt-figure-value {
    font-size: 34px;
  }
}

/* ---------- print: the page's own content only ---------- */

@media print {
  .zoshyt-rail,
  .zoshyt-section-row {
    display: none;
  }

  .zoshyt-sheet {
    display: block;
    max-width: none;
    padding: 0;
  }

  .zoshyt-main {
    max-width: none;
    padding: 0 0 0 var(--zs-hang);
  }

  .zoshyt-entry > .zoshyt-article-notes {
    position: static;
  }
}

/* ---------- the measure ---------- */

/* Running text stays at about 72 characters a line, never past 75: 55ch of
   the body face, whose «0» is wider than its average letter. */
.zoshyt-body .base-prose,
.zoshyt-body .chp-text-body,
.zoshyt-body .zoshyt-prose {
  max-width: 55ch;
}