/*
 * The v3 look: candidate A's colour and home page, candidate B's typography
 * and right-hand column.
 *
 * Paper ground with a quiet blue and a muted red, but the type is sans
 * throughout and set large — headings carry weight rather than serifs. On
 * article pages the aside sits to the right of the text, so the reading column
 * starts at the left margin; the home page keeps A's arrangement, where the
 * section list leads and the picture follows.
 */

/*
 * Grey ground, the logo's blue, the logo's red — the colours the site has
 * always had, taken down a step in saturation so they carry the page instead
 * of shouting over it. The previous paper palette is kept in
 * palette-paper.css.
 */

:root {
    --ink: #1b1e26;
    --ink-muted: #59606e;
    --ink-faint: #8b93a3;
    --accent: #17398a;
    --accent-2: #c11f38;

    /* The red where it marks something — the rule under a page title, the bar
       beside the article being read, the line under the section in the menu.
       Separate from --accent-2 so a section can answer in its own colour
       without taking the red out of hovers and buttons along with it. */
    --marker: var(--accent-2);
    --surface: #eceef3;
    --surface-raised: #fff;
    --surface-sunken: #e2e6ee;
    --rule: #d5dae3;
    --rule-strong: #a9b1c0;

    /* Magnifier for the two search fields. Inline so it costs no request and
       cannot arrive after the field it belongs to; the stroke repeats
       --ink-faint by hand, because a data: URL is its own document and knows
       nothing of this page's custom properties. */
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.7-4.7'/%3E%3C/svg%3E");

    --font-body: "Noto Sans", sans-serif;
    --font-head: "Noto Sans", sans-serif;

    --text-size: 18px;
    --line-height: 1.65;
    /* Kept above what the widest shell can hand the text column, so it never
       clamps and leaves an unexplained gap before the aside. */
    --measure: 100rem;
    /* Captions carry dates, names and photographers — on an archive they are
       read, not glanced at, so they sit a step below the text rather than two. */
    --caption-size: 0.9em;
    --radius: 2px;

    /* Effectively the viewport minus its padding on any ordinary display:
       the cap only bites on very large monitors. */
    --shell: 2000px;

    /* One column, used twice: the aside beside the text, and the block of
       tools in the header. Because both sit in the same shell, giving the
       tools this width lands the search field exactly above the aside — and
       keeps it there in every language, whatever «Найти» happens to be
       called, since the field takes whatever the button and language chooser leave. */
    --aside-col: 18.5rem;
}

/* Page skeleton. A short page — a section with only an aside, a 404 — would
   otherwise end halfway down and leave a band of empty background below the
   footer. The column keeps the footer against the bottom of the viewport
   there, and lets it be pushed down as usual once the content is taller. */
body {
    background: var(--surface);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* «В память о» is a section of obituaries, and the site's red has no business
   in it. One variable covers everything that carries it: the rule under the
   heading, the bar beside the article being read, the line under the section
   in the menu. */
body[data-section="in-memoriam"] {
    --marker: var(--ink);
}

/* The marker for the current section is two things — the word and the line
   under it — and only the line follows --marker. The word is set in the blue
   every link on the site is set in, which is not a colour to override
   wholesale; here it is named on its own. */
body[data-section="in-memoriam"] .main-menu.header li.current > a,
body[data-section="in-memoriam"] .main-menu.header li.current > span {
    color: var(--ink);
}

/* The list beside the text is a roll of the dead, not a set of destinations,
   so it is set in ink — but it answers in red under the pointer as every list
   on the site does, or the entries read as unclickable text. The dotted line
   under «Показать все» follows the text colour on its own. */
body[data-section="in-memoriam"] .side-menu a,
body[data-section="in-memoriam"] .side-page-aside .current,
body[data-section="in-memoriam"] .aside-more,
body[data-section="in-memoriam"] .aside-more:hover {
    color: var(--ink);
}

/* Named again, and in red: the rule above is more specific than the site-wide
   hover at the foot of this file and would otherwise hold the ink through it,
   leaving the one list on the site that answers nothing to the pointer. */
body[data-section="in-memoriam"] .side-menu a:hover {
    color: var(--accent-2);
}

/* The frame and the centring come from the old design — 49 pages carry this
   class and every one of them is in «В память о», always on the page's own
   heading, which is set like any other heading now. */
.main-content h2.black-border {
    width: auto;
    margin-inline: 0;
    padding: 0;
    border: 0;
}

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: 3.5rem;
}

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

.site-header {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--rule);
}

.site-header-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.5rem;
}

.logo {
    display: block;
    flex-shrink: 0;
}

.logo img {
    display: block;
    height: 68px;
    width: auto;
}

.site-tools {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-inline-start: auto;
    flex: 0 0 var(--aside-col);
}

.site-search {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.site-search input[type="search"] {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0;
    padding-inline-start: 1.6em;
    width: 100%;
    min-width: 0;
    background: transparent;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}

.site-search input[type="search"]:focus {
    outline: none;
    border-bottom-color: var(--accent-2);
}

.site-search button {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    background: transparent;
    color: var(--accent-2);
    cursor: pointer;

    /* Slides out from behind the field rather than blinking into place. Width
       and padding rather than display, which cannot be animated — and the cap
       is set close to what «Найти» actually measures, or the button would
       finish moving long before the transition did. */
    overflow: hidden;
    white-space: nowrap;
    max-inline-size: 7rem;
    opacity: 1;
    transition:
        max-inline-size 0.22s ease,
        padding-inline 0.22s ease,
        opacity 0.16s ease 0.06s;
}

/* Nothing typed, nothing to press. :placeholder-shown is true exactly while
   the field is empty, so this needs no script and never flashes — the button
   is folded away from the first frame and comes out with the first character. */
.site-search input[type="search"]:placeholder-shown ~ button {
    max-inline-size: 0;
    padding-inline: 0;
    opacity: 0;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .site-search button {
        transition: none;
    }
}

.langs {
    display: flex;
    gap: 0.5rem;
}

.lang-btn {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    text-decoration: none;
}

.lang-btn:hover {
    color: var(--accent-2);
}

/* -------------------------------------------------------------------- nav */

.site-nav {
    background: var(--surface-raised);
    border-top: 1px solid var(--rule);
}

.main-menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 0.2rem 1.5rem;
}

.main-menu a,
.main-menu li > span {
    display: block;
    padding: 0.7rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    color: var(--accent);
    border-bottom: 2px solid transparent;
}

/* The section being read: the rule under it and the weight, in the blue every
   link is set in. Ink here would have been a third meaning for a colour that
   already means «heading» and «running text». */
.main-menu li.current > a,
.main-menu li.current > span {
    font-weight: 700;
    border-bottom-color: var(--marker);
}

/* ------------------------------------------------------------ page title */

.page-heading {
    padding-block: 4rem 0;
}

.page-heading .heading {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}

.page-heading .heading::after {
    content: "";
    display: block;
    width: 3.5rem;
    margin-top: 1.2rem;
    border-top: 5px solid var(--marker);
}

/* ------------------------------------------------------------------ body */

/* Takes whatever the header and the footer leave; never shrinks below its
   content (flex would otherwise squeeze it on short viewports). */
main {
    display: block;
    flex: 1 0 auto;
    padding-block: 3.5rem 6rem;
}

.main-wrapper {
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: 3.5rem;
    display: grid;
    /* The text takes everything the aside does not. Nothing is pinned to the
       edges, so the space between the two columns is exactly the gap instead
       of gap plus whatever the row had left over. The aside is wide enough for
       section names — wrapping every one of them to three lines would defeat
       the point of putting navigation there. */
    grid-template-columns: minmax(0, 1fr) var(--aside-col);
    gap: 3rem;
    align-items: start;
}

.main-wrapper:not(:has(.side-menu)) {
    grid-template-columns: minmax(0, 1fr);
}

/* Title and text share one column, so the aside starts level with the heading
   rather than below it. */
.main-column {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.main-content {
    max-width: var(--measure);
}

.side-menu {
    grid-column: 2;
    grid-row: 1;
}

/* ------------------------------------------------- sections in the header */

/* Takes the space the logo and the tools leave, and keeps it whatever it
   holds. Sized by its own content it would shrink as the script folded items
   away, the row would look full again, and the folding would never stop. */
.main-menu.header {
    flex: 1 1 0;
    min-width: 0;
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid var(--rule);
}

/* The row is rendered whole and folded by script, which cannot happen before
   the first paint — so on every page load the items that do not fit flashed
   up and vanished. Hidden, not undisplayed: the script measures widths, and
   an undisplayed row has none. The <noscript> block in the header puts it
   back for readers who will never get the script that reveals it. */
.main-menu.header .menu-list {
    visibility: hidden;
}

.main-menu.header.nav-ready .menu-list {
    visibility: visible;
}

/* One line, always: wrapping would hide the overflow the script is supposed to
   measure, and the row would silently grow a second storey instead. */
.main-menu.header > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    gap: 1.4rem;
}

.main-menu.header > ul > li {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Inside the dropdown long names are free to wrap again */
.nav-more-list li {
    white-space: normal;
}

.main-menu.header a,
.main-menu.header li > span {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

/* Which section is open is said by the rule under it and by the weight — not
   by the colour. Blue used to mean «you are here» in this row and «follow me»
   everywhere else on the page; one of the two had to go. */
.main-menu.header li.current > a,
.main-menu.header li.current > span {
    font-weight: 700;
    border-bottom-color: var(--marker);
}

/* «Еще»: whatever the row ran out of width for. Hidden until that happens */

.nav-more {
    position: relative;
}

.nav-more-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-muted);
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.nav-more-btn:hover,
.nav-more.open .nav-more-btn {
    color: var(--ink);
}

.nav-more-caret {
    font-size: 0.65em;
    line-height: 1;
    transition: transform 0.15s ease;
}

.nav-more.open .nav-more-caret {
    transform: rotate(180deg);
}

/* The two dropdowns in the header — sections under «Еще», languages under the
   language code — are one object seen twice, so the panel and its entries are written
   once. Only how wide each may grow and which edge it hangs from differ.
   Every entry rule carries the .main-menu.header prefix: a bare
   .nav-more-list a loses to .main-menu.header a, which is how these entries
   came to wear the header row's padding instead of the panel's. */
.main-menu.header .nav-more-list,
.lang-list {
    position: absolute;
    top: calc(100% + 0.55rem);
    z-index: 60;
    display: none;
    min-width: 10rem;
    padding: 0.35rem;
    list-style: none;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 10px 24px -8px rgba(27, 30, 38, 0.28);
}

/* Section names are far longer than «English» or «עברית», so this one is
   given the room to hold them on one line. Hung from its end edge like the
   language panel rather than centred under the button: «Еще» sits at the end
   of the row, and a centred panel wide enough for «Что писали о нас газеты»
   would reach out under the search field. */
.main-menu.header .nav-more-list {
    inset-inline-end: 0;
    /* Sized by its contents, not by what is around it. The panel hangs off the
       «Еще» button, which is 40-odd pixels wide, and an absolute box shrinks
       to fit the space its containing block offers — so every name longer than
       the minimum wrapped, however much max-width allowed. */
    width: max-content;
    min-width: 14rem;
    max-width: 26rem;
}

.lang-list {
    inset-inline-end: 0;
}

.main-menu.header .nav-more.open .nav-more-list,
.langs.open .lang-list {
    display: block;
}

.main-menu.header .nav-more-list li + li,
.lang-list li + li {
    border-top: 1px solid var(--rule);
}

.main-menu.header .nav-more-list a,
.lang-list a,
.lang-list span {
    display: flex;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
    border-bottom: none;
}

/* A slot for the tick, held open on every entry so the languages line up
   whether or not the one above them is marked. Only this panel has one: the
   section being read is never folded away into «Еще» (see nav.js), so a tick
   there would mark nothing. */
.lang-list a::before,
.lang-list span::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 0.85em;
}

.lang-list .current span::before {
    content: "✓";
}

.main-menu.header .nav-more-list a:hover,
.lang-list a:hover {
    background: var(--surface-sunken);
    color: var(--accent-2);
}

.main-menu.header .nav-more-list li.current a {
    color: var(--accent);
    font-weight: 700;
}

/* ------------------------------------------------------- language chooser */

.langs {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: 3px;
}

.lang-btn:hover,
.langs.open .lang-btn {
    color: var(--accent);
    background: var(--surface-sunken);
}

.lang-globe {
    display: block;
}

/* The current language as its two-letter code: the reader sees what they
   are reading; the caret beside it says it can be changed. */
.lang-code {
    display: block;
    min-width: 1.6em;
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 22px;
    text-align: center;
}

/* Same caret as «Еще»: the two dropdowns are one object, and the caret says
   the code opens a choice rather than just naming the language. */
.lang-caret {
    font-size: 0.65rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.langs.open .lang-caret {
    transform: rotate(180deg);
}

/* The panel itself is shared with «Еще» — see the header menu above. All that
   is left here is the language being read: stated, not offered. */
.lang-list .current span {
    color: var(--ink-faint);
    font-weight: 700;
    cursor: default;
}

/* ------------------------------------------------- the page title, on page */

/* The heading a page opens with is its title, whether the layout printed it or
   the text carries its own — and the text's own is promoted only when the
   layout printed nothing, or a section front page would show two. */
.main-column .heading,
.home-hero-side .heading,
.main-column:not(:has(> .heading)) .main-content > h2:first-of-type,
.main-column:not(:has(> .heading)) .main-content:not(:has(> h2)) > h3:first-of-type {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}

.main-column .heading::after,
.home-hero-side .heading::after,
.main-column:not(:has(> .heading)) .main-content > h2:first-of-type::after,
.main-column:not(:has(> .heading)) .main-content:not(:has(> h2)) > h3:first-of-type::after {
    content: "";
    display: block;
    width: 3.5rem;
    margin: 1.1rem 0 2.2rem;
    border-top: 5px solid var(--marker);
}

.main-content a {
    color: var(--accent);
    text-underline-offset: 0.15em;
}

.main-content h2,
.main-content h3 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ aside */

.side-menu {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* The space above a heading is what separates one group from the last, and it
   has to beat the space inside a group by enough to be read as a break —
   more so now that names sit close together. */
.side-menu h2,
.side-menu h3,
.side-menu h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 2.8em 0 0.5em;
}

.side-menu h2:first-child,
.side-menu h3:first-child,
.side-menu h4:first-child {
    margin-top: 0;
}

/* The aside is a list of names and links more often than prose, so what it
   needs is air between the lines, not paragraph spacing. */
.side-menu p {
    margin: 1.6em 0;
}

.side-menu ul {
    list-style: none;
}

.side-menu li {
    margin: 1.6em 0;
}

/* Entries that are not links are names, not navigation — a roster of a
   council reads as one list, and the air a two-line article title needs
   between neighbours only pulls it apart. */
.side-menu li:not(:has(a)) {
    margin: 0.5em 0;
}

.side-menu li:first-child,
.side-menu p:first-child {
    margin-top: 0;
}

.side-menu a {
    color: var(--accent);
    text-decoration: none;
}

/* The whole row answers to the pointer, not just the words in it. Half of an
   entry used to be dead: the space to the right of a short title, and — worse,
   because it is exactly where a pointer travelling down the list passes — the
   gap between one entry and the next. The gap is the link's own padding now,
   so consecutive rows touch and there is nothing in between to fall into.

   Only where the list is navigation, which is what `data-aside` marks. An
   aside typed by hand — the roster on «Кто мы» — has no rows to point at, and
   the margins above are the spacing it was written for. */
.side-page-aside[data-aside] > ul > li {
    margin: 0;
}

.side-page-aside[data-aside] > ul > li > a,
.side-page-aside[data-aside] > ul > li > .current {
    display: block;
    padding-block: 0.8em;
}

/* The first and last rows would otherwise start and end a padding late. */
.side-page-aside[data-aside] > ul {
    margin-block: -0.8em;
}

/* Pages inside a page — the reports under «Выставка "Евреи борьбы"». Set in
   from the entries of the section proper, and a shade smaller, so the list
   reads as one section with a folder in it rather than as two lists.

   The step is a property rather than a number in two places: the mark beside
   the entry being read reads it too, and moves in with the text (see the rule
   for .current at the foot of the aside). The padding stays on the link, not
   on the row, or the indent would be a strip the pointer falls through. */
.side-page-aside > ul > li {
    --aside-step: 0rem;
}

.side-page-aside > ul > li.is-nested {
    --aside-step: 2rem;
}

.side-page-aside > ul > li.is-nested > a,
.side-page-aside > ul > li.is-nested > .current {
    padding-inline-start: var(--aside-step);
    font-size: 0.95em;
}

/* ------------------------------------------- site sections in the sidebar */

/* Navigation lives in the right column: a vertical list has no width to
   overflow, so long section names in three languages cannot break it. */

.side-sections-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 0.7rem;
}

.main-menu.sidebar ul {
    display: block;
    list-style: none;
}

.main-menu.sidebar li {
    margin: 0;
    border-bottom: 1px solid var(--rule);
}

.main-menu.sidebar li:last-child {
    border-bottom: none;
}

.main-menu.sidebar a {
    display: block;
    padding: 0.62rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--accent);
    text-decoration: none;
    border-bottom: none;
    text-transform: none;
    letter-spacing: 0;
}

.main-menu.sidebar a:hover {
    color: var(--accent-2);
}

/* The section you are in is filled, not merely tinted — at a glance it reads
   as a place you are standing, not a link you might follow. */
.main-menu.sidebar li.current a {
    background: var(--accent);
    color: #fff;
    padding-inline: 0.7rem;
    margin-inline: -0.7rem;
}

.main-menu.sidebar li.current a:hover {
    color: #fff;
}

/* The page's own aside is a different kind of thing from site navigation —
   the rule, the gap and the label are all there to say so. */
.side-page-aside {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--rule-strong);
    font-size: 0.95rem;
}

/* Carries a section name now, so no capitals and no tracking: «В РАЗДЕЛЕ ИЗ
   ИСТОРИИ ЕВРЕЙСКОГО ДВИЖЕНИЯ» would run to three shouted lines. */
/* Reads as the headings inside a hand-written aside do — «В разделе
   „Воспоминания"» and «Почетный совет» name the group above the same kind of
   list, so they are set the same way. */
.side-aside-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 0.8rem;
}

/* When it is the only thing in the column, the column's own rule is enough —
   no need for a second one right under it. */
.side-page-aside:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.side-page-aside > *:first-child {
    margin-top: 0;
}

/* Collapsed the list shows ten entries — and the article being read whatever
   its place in it, so a reader forty items down still sees where they are
   rather than ten strangers. Scoped to the direct child list: an aside typed
   by hand in the admin is prose, not navigation, and must not be cut. */
/* Until the script has measured — and for readers who will never run it — a
   flat ten. :where() keeps the guard out of the specificity, so the rule below
   can take over on equal footing. */
.side-page-aside.is-collapsed:where(:not(.is-measured)) > ul > li:nth-child(n + 11) {
    display: none;
}

/* Once measured: whatever ran past the bottom of the article beside it, which
   is the length that actually matters. The script marks the entries and leaves
   the one being read alone, so nothing here has to rescue it. */
.side-page-aside.is-collapsed > ul > li.is-over {
    display: none;
}

/* Not while filtering: there the question is what matched, and an article that
   did not is no more worth keeping on screen than any other. */
/* Not while filtering: there the question is what matched, and an article that
   did not is no more worth keeping on screen than any other. */
.side-page-aside.is-collapsed:where(:not(.is-measured)):not(.is-filtering) > ul > li:has(> .current),
.side-page-aside.is-collapsed.is-open:not(.is-filtering) > ul > li {
    display: list-item;
}

/* When the article being read was pulled up past hidden ones, say so —
   otherwise it reads as the eleventh entry rather than the fortieth. */
.side-page-aside.is-collapsed:not(.is-open):not(.is-filtering) > ul > li.is-gap::before {
    content: "…";
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ink-faint);
}

/* Dotted, because it is not a link: it goes nowhere, it unfolds what is
   already here. */
.aside-more {
    display: block;
    /* So the dotted line runs under the words and not across the column */
    width: fit-content;
    margin-top: 1rem;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
}

.aside-more:hover {
    color: var(--accent-2);
}

/* The rule above sets display, which is what the browser's own [hidden] sets
   too — and a class beats it. Without this the button stayed on screen on
   every article long enough to hold the whole list, offering to show what was
   already there. */
.aside-more[hidden] {
    display: none;
}

/* Filter over the section list. Same underline as the site search, a size
   down: it searches one section, not the site. */
.aside-filter {
    display: block;
    inline-size: 100%;
    margin-bottom: 1.4em;
    padding: 0.3rem 0;
    padding-inline-start: 1.6em;
    font: inherit;
    font-size: 0.85rem;
    background: transparent;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}

.aside-filter:focus {
    outline: none;
    border-bottom-color: var(--accent-2);
}

/* The magnifier both fields carry. background-position has no logical form, so
   the mirrored side is spelled out for Hebrew. */
.site-search input[type="search"],
.aside-filter {
    background-image: var(--icon-search);
    background-repeat: no-repeat;
    background-size: 1.05em;
    background-position: left center;
}

[dir="rtl"] .site-search input[type="search"],
[dir="rtl"] .aside-filter {
    background-position: right center;
}

/* While the filter has something in it the ten-entry limit is off: what is on
   screen is what matched, however far down the list it was. Written against
   .is-collapsed as well, or the folding rules above — one class heavier —
   would keep hiding the matches. */
.side-page-aside.is-filtering > ul > li,
.side-page-aside.is-collapsed.is-filtering > ul > li {
    display: none;
}

.side-page-aside.is-filtering > ul > li.is-match,
.side-page-aside.is-collapsed.is-filtering > ul > li.is-match {
    display: list-item;
}

/* «Показать все» counts the whole section; while filtering it would be
   answering a question nobody asked. */
.side-page-aside.is-filtering .aside-more {
    display: none;
}

.aside-empty {
    font-size: 0.85rem;
    color: var(--ink-faint);
}

/* One level down from the section, so a bar rather than a fill. A border and
   not an inset shadow: box-shadow has no logical form, so in Hebrew the bar
   ended up on the left, away from the edge the text starts at.

   The colour stays the blue of every other entry: the bar and the weight say
   which page is open, and turning the words to ink on top of that made the one
   entry you cannot follow look like the only text in the list. It is not a
   link any more (generic-page.ejs prints a span), so the colour is named here
   rather than inherited from .side-menu a. */
.side-page-aside .current {
    display: block;
    position: relative;
    font-weight: 700;
    color: var(--accent);
    border-bottom: none;
}

/* Drawn rather than bordered. The row is a tall clickable band now — an inch
   of padding above the words and an inch below — and a border took the whole
   of it, turning a mark beside a title into a stripe down the column. Inset by
   exactly that padding, the bar is the height of the words again.

   It also follows the indent: on a page inside a page the mark stands beside
   its own entry, not out at the edge of the column. */
.side-page-aside .current::before {
    content: "";
    position: absolute;
    inset-block: 0.8em;
    inset-inline-start: calc(var(--aside-step, 0rem) - 0.7rem);
    width: 3px;
    background: var(--marker);
}

/* ------------------------------------------- navigation under an article */

/* Three fixed places rather than a row spread out by the browser: an article
   at the top of its section has no entry before it, and with flex the section
   name would slide over to where the reader learned to expect «back». */
.section-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem 2rem;
    align-items: start;
    margin-top: 3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-size: 0.95rem;
    line-height: 1.35;
}

.section-nav-up {
    text-align: center;
    font-weight: 600;
}

.section-nav-next {
    text-align: end;
}

.section-nav a {
    border-bottom: none;
}

.section-nav a:hover {
    color: var(--accent-2);
}

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

/* The front page runs its own blocks full width — no aside, no text column */
.main-wrapper:has(.home-page) {
    display: block;
    max-width: none;
    padding-inline: 0;
}

.home-page {
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: 3.5rem;
}

/* The painting against the words in the golden ratio — the picture the smaller
   part. It is a picture on a front page, not the front page itself: at two
   thirds it filled the first screen and the words never appeared at all. */

/* No rule under the hero: the one that matters belongs under «Свежие
   материалы», where it opens what follows rather than closing what came
   before. Two of them, a line apart, only made the heading look boxed in. */
.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    gap: 3rem;
    align-items: start;
    padding-bottom: 2.5rem;
}

.home-hero-figure {
    margin: 0;
}

.home-hero-figure img {
    display: block;
    width: 100%;
    max-width: none;
    border: 1px solid var(--rule-strong);
}

/* Every piece of running text on the front page is hyphenated, like the body of
   an article and for the sharper version of the same reason: none of these
   columns is more than half the page wide, and a Russian word can fill half a
   line on its own. The rule in v3-base hangs off .main-content, which the front
   page is not — it is built from blocks rather than from a parsed body — so the
   texts here ask for it themselves.

   Titles and section names are left out: a hyphen in one reads as a typo, the
   same as in the headings of an article. Hebrew is left out too — the language
   does not break words, and no browser ships a dictionary for it. */
.home-about,
.home-hero-caption,
.home-update-text,
.home-face-text {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 2;
    overflow-wrap: break-word;
}

body[lang="he"] :is(.home-about, .home-hero-caption, .home-update-text, .home-face-text) {
    -webkit-hyphens: none;
    hyphens: none;
}

/* Under the painting now that the painting is a column of its own — a caption
   belongs to its picture, not to the text beside it. */
.home-hero-caption {
    font-size: var(--caption-size);
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0.9rem 0 0;
}

.home-hero-caption p {
    margin: 0;
    text-indent: 0;
}

/* The site's own name over the text about it, set like the title of any other
   page — see the shared rule with .main-column .heading below. */
.home-hero-side .heading {
    margin-bottom: 0;
}

.home-about {
    font-size: 1.05rem;
    line-height: 1.6;
}

.home-about p {
    margin: 0 0 1rem;
    text-indent: 0;
}

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

.home-about-more {
    margin: 1rem 0 0;
    text-indent: 0;
    font-weight: 600;
}

/* The four section blocks are one thing and want saying once. Smaller than the
   page title above it and larger than the section names below, so the order of
   the page is legible from the sizes alone. */
.home-updates-title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    padding-top: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--rule-strong);
}

.home-updates-title + .home-block {
    padding-top: 2rem;
}

/* blocks */

.home-block {
    padding-block: 3rem;
    border-bottom: 1px solid var(--rule);
}

.home-block:last-child {
    border-bottom: none;
}

.home-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* A section name, not a label on a box — it has to hold its own between the
   heading over the group and the titles of the articles under it. */
.home-block-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
}

.home-block-head .home-block-title {
    margin-bottom: 0;
}

.home-block-more {
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    color: var(--accent);
}

.home-block-more:hover {
    color: var(--accent-2);
}

.home-block-head + ul {
    margin-top: 1.5rem;
}

/* what a section added last */

/* One set of columns for the whole front page, and every list on it stands on
   them: six tracks, because six is what the page is made of — six faces in a
   row, and three entries of a section over them, each taking two tracks with
   the picture in one and the words in the other. Counted rather than fitted:
   auto-fit gives the two lists different tracks the moment the number of them
   is odd, and then nothing on the page lines up with anything. */
.home-updates,
.home-faces {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    list-style: none;
}

/* Four across, then two: the same halving, so an entry of a section keeps its
   pair of tracks all the way down and the picture never leaves the words. */
@media (max-width: 68rem) {
    .home-updates,
    .home-faces {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 44rem) {
    .home-updates,
    .home-faces {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The picture stands beside the whole entry — the title as well as the text —
   in a square of its own. A square because the pictures are anything from a
   passport photograph to a banner, and three cards side by side need one shape
   between them; filled rather than fitted, because a photograph letterboxed
   inside a frame looks like a mistake. Cropped from the top, so what a tall
   photograph loses is the ground and not the face.

   `subgrid` rather than a grid of its own: the two halves then sit on the
   page's own columns, with the page's own gap between them. */
.home-updates li {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
}

/* Nothing to stand beside — an article whose picture is missing, or whose file
   has gone — and the words take the pair. */
.home-update-figure[hidden] + .home-update-copy,
.home-update-copy:only-child {
    grid-column: span 2;
}

.home-update-figure {
    display: block;
    background: var(--surface-sunken);
}

.home-update-figure img {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
}

/* Takes what the picture leaves, and may be narrower than its own words. */
.home-update-copy {
    min-width: 0;
}

.home-update-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    border-bottom: none;
}

.home-update-text {
    margin: 0.6rem 0 0;
    text-indent: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* On a line of its own under the excerpt: run in after the text, it was read
   as the end of the sentence rather than as the way on. Its own width, though,
   and not the column's — a block would answer to the pointer across the empty
   half of the line, where there is nothing to click. */
.home-read-more {
    display: block;
    width: fit-content;
    margin-top: 0.5rem;
    white-space: nowrap;
    font-size: 0.92em;
    font-weight: 600;
}

/* faces — the columns themselves are set with .home-updates above */

.home-face-link {
    display: block;
    text-decoration: none;
    color: var(--ink);
    border-bottom: none;
}

/* The opening of the entry, cut where a card can hold it. Hebrew has the
   photographs but not the texts, and there the card is the face alone. */
.home-face-text {
    margin: 0.5rem 0 0;
    text-indent: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

/* Portrait, because the photographs are portraits: at anything near square the
   crop took the top of the head and the chin with it. Cropped from the top, so
   what the ratio does cut is the chest and never the face. */
.home-faces img {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    background: var(--surface-sunken);
    filter: grayscale(1);
    transition: filter 0.25s ease;
}

.home-faces a:hover img {
    filter: grayscale(0);
}

.home-face-name {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

.home-face-year {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

/* photographs */

.home-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
}

.home-photos li {
    flex: 1 1 12rem;
}

.home-photos a {
    display: block;
    height: 11rem;
    overflow: hidden;
    background: var(--surface-sunken);
}

.home-photos img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.home-photos a:hover img {
    transform: scale(1.04);
}

/* ------------------------------------------------------ home page (legacy) */

/* The home page keeps candidate A's arrangement: the section list leads on the
   left, the picture takes the rest. It is the site's index, not an article, so
   the right-hand aside rule above does not apply here. */

.main-wrapper:has(.main-content.home) {
    grid-template-columns: 16rem minmax(0, 1fr);
}

.main-wrapper:has(.main-content.home) .side-menu {
    grid-column: 1;
    padding-top: 0;
    border-top: none;
}

.main-content.home {
    grid-column: 2;
    max-width: none;
}

.menu-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--rule-strong);
}

.main-menu.home ul {
    flex-direction: column;
    gap: 0;
}

.main-menu.home li {
    border-bottom: 1px solid var(--rule);
}

.main-menu.home li:last-child {
    border-bottom: none;
}

.main-menu.home a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    padding: 1rem 0;
    border-bottom: none;
}

.main-menu.home a:hover {
    color: var(--accent-2);
}

.main-pic {
    margin: 0;
}

.main-pic img {
    display: block;
    width: 100%;
    max-width: none;
    border: 1px solid var(--rule-strong);
}

.main-pic-caption {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-muted);
    text-align: center;
    padding: 1.1rem 2rem 0;
}

.main-pic-caption p {
    text-indent: 0;
    margin: 0;
}

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

.site-footer {
    border-top: 1px solid var(--rule);
    background: var(--surface-raised);
    padding-block: 2rem;
}

.footer-nav .main-menu ul {
    justify-content: center;
    gap: 0.4rem 1.4rem;
}

.footer-nav .main-menu a,
.footer-nav .main-menu li > span {
    font-size: 0.78rem;
    font-weight: 400;
    padding: 0.3rem 0;
    border-bottom: none;
}

/* The section being read, marked but quietly: the heavy red rule the header
   uses is a marker in a row of headings and a blemish in a row of small type.
   Weight alone, at this size, is as much as the row can carry. */
.footer-nav .main-menu li.current > a,
.footer-nav .main-menu li.current > span {
    font-weight: 700;
    border-bottom: none;
}

.footer-nav .main-menu a:hover {
    color: var(--accent-2);
}

.copyright {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
    color: var(--ink-faint);
    text-align: center;
}

/* ------------------------------------------------------------------ links

   One system, kept at the foot of the file so it wins over the components
   above and there is a single place to read it:

   at rest    the site's blue, everywhere and nothing else — which is why the
              row of sections no longer marks the one being read in blue, and
              marks it with the rule and the weight instead.
   pointed at red. No underline anywhere, at rest or under the pointer: the
              colour carries it, and on pages that are largely lists of names
              and dates a line under every one of them is noise.

   The same answer in the header, in the section list, on the front page, in
   running text and at the foot of an article — which is what was missing:
   each of them used to answer differently, or not at all. */

a,
.main-content a,
.main-menu a,
.side-menu a,
.section-nav a,
.home-page a,
.lang-list a,
.lang-btn,
.search-result-item a {
    text-decoration-line: none;
}

a:hover,
.main-content a:hover,
.main-menu a:hover,
.main-menu.header a:hover,
.main-menu.header .nav-more-list a:hover,
.main-menu.sidebar a:hover,
.side-menu a:hover,
.section-nav a:hover,
.home-page a:hover,
.lang-list a:hover,
.search-result-item a:hover {
    color: var(--accent-2);
    text-decoration-line: none;
}

/* ------------------------------------------------- scrolling to an anchor */

/* The fallback for a reader without scripts: nav.js takes these clicks and
   runs them faster than the browser's own smooth scrolling, which spends over
   a second crossing a long article. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* A note landing hard against the top edge reads as the top of the page. */
[id^="footnote"] {
    scroll-margin-top: 1.5rem;
}

/* Arriving at a note, the note says so: the paper warms under it and cools
   again. Which one was meant is otherwise a question of counting brackets —
   the notes are set at the foot in a run, and they all look alike.

   On the way back it is the reference in the text that lights up, and there it
   is one character wide, hence the padding. */
@keyframes anchor-flash {
    0% { background-color: transparent; }
    12% { background-color: rgba(240, 196, 32, 0.55); }
    55% { background-color: rgba(240, 196, 32, 0.55); }
    100% { background-color: transparent; }
}

.anchor-flash {
    animation: anchor-flash 1.6s ease-out;
    border-radius: 2px;
}

/* Inline targets — the [1] in the running text — are too small to show a
   colour without a little room around them. */
a.anchor-flash {
    padding-inline: 0.15em;
    margin-inline: -0.15em;
}

@media (prefers-reduced-motion: reduce) {
    .anchor-flash {
        animation: none;
    }
}