/*
 * 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;
    --surface: #eceef3;
    --surface-raised: #fff;
    --surface-sunken: #e2e6ee;
    --rule: #d5dae3;
    --rule-strong: #a9b1c0;

    --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;
    --caption-size: 0.8em;
    --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 globe 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;
}

.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;
    width: 100%;
    min-width: 0;
    background: transparent;
    color: var(--ink);
    border-bottom: 2px 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;
}

/* 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 absent from the first frame and appears with the first character. */
.site-search input[type="search"]:placeholder-shown ~ button {
    display: 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 {
    display: block;
    padding: 0.7rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    color: var(--ink-muted);
    border-bottom: 2px solid transparent;
}

.main-menu a:hover {
    color: var(--ink);
}

.main-menu li.current a {
    color: var(--ink);
    border-bottom-color: var(--accent-2);
}

/* ------------------------------------------------------------ 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: 3px solid var(--accent-2);
}

/* ------------------------------------------------------------------ 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 {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

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

.main-menu.header li.current > a {
    color: var(--accent);
    border-bottom-color: var(--accent-2);
}

/* «Еще»: 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
   globe — 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;
    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 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 */

.main-column .heading {
    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 {
    content: "";
    display: block;
    width: 3.5rem;
    margin: 1.1rem 0 2.2rem;
    border-top: 3px solid var(--accent-2);
}

.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 {
    padding-top: 0.5rem;
    border-top: 2px solid var(--rule-strong);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.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: 1.4em 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;
    border-bottom: 1px solid var(--rule);
}

.side-menu a:hover {
    border-bottom-color: var(--accent-2);
}

/* ------------------------------------------- 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(--ink);
    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. */
.side-aside-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink-faint);
    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. */
.side-page-aside.is-collapsed > ul > li:nth-child(n + 11) {
    display: none;
}

.side-page-aside.is-collapsed > ul > li:has(> a.current),
.side-page-aside.is-collapsed.is-open > ul > li {
    display: list-item;
}

/* When the article being read is pulled up from further down the list, say so
   — otherwise it reads as the eleventh entry rather than the fortieth. */
.side-page-aside.is-collapsed:not(.is-open) > ul > li:nth-child(n + 11):has(> a.current)::before {
    content: "…";
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ink-faint);
}

.aside-more {
    display: block;
    margin-top: 1rem;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

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

/* 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. */
.side-page-aside a.current {
    display: block;
    font-weight: 700;
    color: var(--ink);
    border-bottom: none;
    border-inline-start: 3px solid var(--accent-2);
    padding-inline-start: calc(0.7rem - 3px);
    margin-inline-start: -0.7rem;
}

/* --------------------------------------------------------------- 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, beside the words rather than under them */

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid var(--rule);
}

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

.home-hero-caption {
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0;
}

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

.home-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}

.home-figures dt {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}

.home-figures dd {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--ink-muted);
}

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

.home-block-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    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;
}

/* faces */

.home-faces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1.5rem;
    list-style: none;
}

.home-faces a {
    display: block;
    text-decoration: none;
    color: var(--ink);
}

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

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

.footer-nav .main-menu a {
    font-size: 0.78rem;
    font-weight: 400;
    padding: 0.3rem 0;
    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;
}