:root {
    --gray1:#F9F9F9;
    --gray2:#E7E7E7;
    --gray3:#CDCDCD;
    --gray4:#888;
    --gray5:#5B5B5B;

    --beige1:#F7F5F2;
    --beige2:#E5E1DA;
    --beige3:#ccc4b8;
    --beige4:#65615a;
    --gold: #89602d;

    --black1:#4c4c4c;
    --black2:#313030;
    --black3:#212121;

    --main-body-side-padding: 100px;

    /* Minimum pointer/touch target (WCAG 2.2 SC 2.5.8, axe target-size): discrete
       controls must be ≥24×24 CSS px. The compact layout (≤960px) lifts dense
       controls to 44px; this var backs the desktop baseline. */
    --touch-target-min: 24px;

    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    min-height: 100vh;
    min-height: 100svh; /* phones: the small viewport, so the footer is reachable without the toolbar hiding */
    display: flex;
    flex-direction: column;
    /* Body-text leading (WCAG 1.4.12 baseline); the accessibility menu offers
       1.15 as its tight option and 2 as the loose one (includes/header.html). */
    line-height: 1.5;
}

input {
    font-family: "Space Grotesk", sans-serif;
}

button {
    font-family: "Space Grotesk", sans-serif;
    border: none;
    color: var(--black3);
    background-color: var(--beige2);
    border-radius: 1000px;
    padding: 8px 16px;
}
button:hover {
    cursor: pointer;
}

/* Base link colour. Any link a page/component stylesheet doesn't colour used to
   fall back to the browser-default blue; give it the site gold instead. This is
   an element selector (specificity 0,0,1), so every scoped rule (nav,
   breadcrumbs, footer, pagination, listings, …) overrides it and is unaffected.
   Author origin beats the UA stylesheet, so visited links go gold too instead of
   purple. Gold on white ≈ 5.6:1 → WCAG 2.1 AA (1.4.3); the UA underline is kept,
   so links remain distinguishable by more than colour (1.4.1). */
a {
    color: var(--gold);
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 10px;
    z-index: 100;
    transition: top 0.2s ease-in-out;
}
.skip-link:focus {
    top: 0;
}

/* Visible keyboard focus indicator for every interactive control (WCAG 2.4.7).
   Uses :focus-visible so mouse clicks don't show a ring, keyboard users do. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
/* Keyboard equivalents for hover-only affordances. */
button:focus-visible {
    background-color: var(--beige3);
}
#header_content input[type="submit"]:focus-visible {
    text-decoration: underline;
}
#for_publishers a:focus-visible {
    background-color: var(--gray3);
}

/* Screen-reader-only text: removed from view but kept in the accessibility tree. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#header_content {
    display: flex;
    position: relative;
    overflow: hidden;
    background-color: var(--beige2);
    border-bottom: 1px solid var(--beige1);
    height: 140px;
}
/* #header_bar groups the slim mobile top row (logo + hamburger + a11y button).
   On desktop it is transparent (display:contents) so the original flex layout of
   #header_content is untouched; the mobile breakpoint turns it into the bar. */
#header_bar {
    display: contents;
}
#mobile_nav_btn {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}
#mobile_nav_btn > img {
    display: block;
    height: 28px;
    width: 28px;
}
#header_content input[type="submit"] {
    border: none;
    background: none;
    color: var(--black2);
    font-size: initial;
    /* ≥24×24 hit box (WCAG 2.2 SC 2.5.8) for the narrow PL/EN text toggle. */
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0 8px;
}
#header_content input[type="submit"]:hover {
    cursor: pointer;
}
#mhp_header_logo {
    height: 80px;
    width: auto; /* the <img> carries its intrinsic width/height; only the height is styled */
    padding: 30px;
    background-color: var(--beige1);
}
a:has(> #bazhum_header_logo) {
    display: block;
    width: fit-content;
}
#bazhum_header_logo {
    height: 50px;
    width: auto;
    padding: 25px 0;
    display: block;
}

#subpages_list {
    padding: 0;
    margin: 0;
    display: flex;
}
#subpages_list > li {
    display: inline-block;
    padding-right: 40px;
}
#subpages_list > li > a {
    color: var(--black2);
    text-decoration: none;
}
#subpages_list > li:nth-child(1) {
    padding-left: 0;
}
#header_search {
    position: absolute;
    right: 100px;
    top: 0;
    padding: 12px 0;
    align-items: end;
}
#input_bar {
    justify-content: flex-end;
    display: flex;
    border-bottom: 1px solid var(--beige4);
    padding-bottom: 6px;
    margin: 0;
}
#input_bar > * {
    vertical-align: middle;
}
/* The text field is type=search (mobile keyboards show a search key); the
   :not() form also covers a plain text input. appearance:none drops Safari's
   rounded search styling so the underline design survives. */
#input_bar > input:not([type=image]) {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    background-color: transparent;
    width: 250px;
    min-width: 0;
    font-weight: bold;
}
#input_bar > input::placeholder {
    color: var(--black2);
    font-family: "Space Grotesk", sans-serif;
}

#header_search {
    transition: 200ms ease-out top;
}
#header_search > a {
    font-size: smaller;
    text-decoration: none;
    color: var(--black2);
    float: right;
}
#header_search.hidden {
    top: -145px;
}

#header_nav {
    padding-left: 80px;
    position: absolute;
    left: 145px;
    top: 0;
    transition: 200ms ease-out top;
}
#header_nav.hidden {
    top: -145px;
}

#accessiblity_btn {
    position: absolute;
    top: 15px;
    right: 15px;
    transition: 200ms ease-out top;
}
#accessiblity_btn.hidden {
    top: -145px;
}

#close_accessiblity_menu {
    height: 1.5em;
    width: auto;
    position: absolute;
    right: 15px;
    top: 15px;
}

#accessiblity_menu {
    position: absolute;
    left: 145px;
    top: 0;
    transition: 200ms ease-out top;
    display: flex;
    justify-content: space-around;
    width: calc(100% - 145px);
    height: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    background-color: white;
}
#accessiblity_menu.hidden {
    top: 145px;
}

#accessiblity_menu > div > span {
    font-weight: bold;
    display: block;
    padding: 15px 0;
}
#accessiblity_font_size > div {
    display: flex;
    align-items: center;
}
#accessiblity_font_size input[type="image"] {
    width: auto; /* heights below; the width attribute must not pin the glyph */
}
#accessiblity_font_size input[type="image"]:not(:last-of-type) {
    margin-right: 20px;
}
#accessiblity_font_size input[type="image"]:nth-of-type(1) {
    height: 2em;
}
#accessiblity_font_size input[type="image"]:nth-of-type(2) {
    height: 2.75em;
}
#accessiblity_font_size input[type="image"]:nth-of-type(3) {
    height: 3.25em;
}
#accessiblity_menu > div > button {
    padding: 4px 8px;
    /* ≥24px tap height on desktop too (WCAG 2.2 SC 2.5.8); the 960px block lifts
       these to 44px on the compact layout. */
    min-height: var(--touch-target-min);
}
#accessiblity_menu > div > button.selected {
    background-color: var(--black3);
    color: var(--beige2);
}

/* WCAG 2.2 SC 2.5.8 (axe target-size): pin a ≥24×24 hit box on the header icon
   buttons. Their source SVGs are already 24-40px, so these mins never stretch a
   glyph — they guarantee the control stays compliant in any font-size context. */
#accessiblity_btn,
#header_search input[type="image"],
#close_accessiblity_menu,
#accessiblity_font_size input[type="image"] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

#breadcrumbs {
    padding: 10px 50px;
    border-bottom: 1px solid var(--beige1);
    overflow-wrap: break-word;
}
#breadcrumbs > a {
    font-size: smaller;
    color: var(--black1);
    text-decoration: none;
    display: inline;
}
#breadcrumbs > a:not(:last-child)::after {
    content: "/";
    color: var(--gold);
    margin: 0 8px;
}
#breadcrumbs > a:last-child {
    font-weight: bold;
}

#main_content {
    padding: 30px var(--main-body-side-padding);
    padding-bottom: 50px;
    flex: 1;
    position: relative;
    /* Long unbreakable strings (titles, URLs, emails) wrap instead of forcing a
       horizontal scroll on narrow screens. */
    overflow-wrap: break-word;
}

.three_col_split {
    display: flex;
}
.three_col_split > * {
    display: inline-block;
}
.three_col_split > :nth-child(1) {
    width: 70%;
}
.three_col_split > :nth-child(2) {
    width: 15%;
}
.three_col_split > :nth-child(3) {
    width: 15%;
}

.four_col_split {
    display: flex;
}
.four_col_split > * {
    display: inline-block;
}
.four_col_split > :nth-child(1) {
    width: 50%;
}
.four_col_split > :nth-child(2) {
    width: 10%;
}
.four_col_split > :nth-child(3) {
    width: 25%;
}
.four_col_split > :nth-child(4) {
    width: 15%;
}

div.alphabet_carousel {
    width: 100%;
    padding-bottom: 40px;
}
.alphabet_carousel_elem {
    font-size: larger;
    font-weight: bold;
    text-decoration: none;
    color: var(--black2);
    background-color: var(--beige1);
    border: 1px solid var(--black1);
    padding: 7px;
    margin: 5px 5px;
    width: 1.1666em; /* this is a hack */
    text-align: center;
    display: inline-block;
}
.current_carousel_elem {
    color: white;
    background-color: var(--gold);
}

div#full_text {
    align-items: center;
    display: flex;
    position: relative;
}
div#full_text > label {
    color: var(--black2);
    font-weight: initial;
}
div#full_text > img {
    margin: 0 12px;
    height: 25px;
    width: auto;
    user-select: none;
}
div#full_text > input[type=checkbox] {
    appearance:none;
    height: 26px;
    width: 26px;
    margin: 0;
    border: 1px solid var(--gray4);
}
div#full_text > input[type=checkbox]::before {
    clip-path: rect(12px 17px 14px 8px);
    width: 26px;
    height: 26px;
    background-color: var(--gold);
    content: "";
    display: block;
    position: absolute;
}
div#full_text > input[type=checkbox]:checked::before {
    clip-path: path("M9.00016 16.1698L4.83016 11.9998L3.41016 13.4098L9.00016 18.9998L21.0002 6.99984L19.5902 5.58984L9.00016 16.1698Z");
    width: 26px;
    height: 26px;
    background-color: var(--gold);
    content: "";
    display: block;
    position: absolute;
}

.a11y_main {
    max-width: max(60%, 40rem); /* 60% on desktop; a 40rem column on tablets; full width on phones */
    margin: 0 auto;
}

#for_publishers {
    margin: 0 !important;
    padding: 100px;
    --gold_triple: 137, 96, 45;
    --opacity: 0.7;
    background: linear-gradient(0deg, rgba(var(--gold_triple), var(--opacity)), rgba(var(--gold_triple), var(--opacity))), url("/static/assets/bazhum-images-stock-3.7df8cdea0f45.webp");
    background-size: cover;
    background-position: center;
    color: white;
    font-size: 1.33em;
}
#for_publishers a {
    background-color: white;
    color: var(--black3);
    border-radius: 1000px;
    padding: 8px 16px;
    text-decoration: none;
}
#for_publishers a:hover {
    cursor: pointer;
}

footer {
    color: var(--beige3);
    background-color: var(--black2);
}
footer a {
    color: var(--beige3);
    margin-right: 30px;
    display: inline-block;
    text-decoration: none;
}
footer > div {
    padding: 40px 140px;
}
.footer_links > * {
    vertical-align: middle;
}
.footer_logos {
    background-color: var(--beige2);
}
.footer_logos img {
    max-height: 35px;
    max-width: 100%;
    height: auto;
    width: auto;
}
.footer_links img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#back_top_btn > img {
    position: sticky;
    position: -webkit-sticky;
    bottom: 5vh;
    float: right;
    margin-right: calc(var(--main-body-side-padding)*-1);
    padding: 7px;
    background-color: var(--beige2);
    border-radius: 100px 100px 0px 0px;
    transform: rotate(-90deg);
}

.name_block > h1 {
    margin: 0;
}
.name_block > ul {
    margin: 5px 0;
    margin-bottom: 15px;
    padding-left: 10px;
    list-style: none;
}

/* Hover-only colours apply only where a hovering pointer exists: on a touch
   screen a tapped control would otherwise keep its hover colour until the next
   tap. Outside this block a :hover rule may only set the cursor; the
   :focus-visible twins above stay unconditional. Every sheet follows the same
   split (test_accessibility pins it). */
@media (hover: hover) {
    button:hover {
        background-color: var(--beige3);
    }
    #for_publishers a:hover {
        background-color: var(--gray3);
    }
}

/* Honour the OS "reduce motion" preference (WCAG 2.3.3): drop smooth scrolling
   and neutralise the slide/expand/rotate transitions used across the site. */
@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Responsive reflow (WCAG 1.4.10): the layout must collapse to a single column
   down to 320px without horizontal scrolling. Three width breakpoints, layered
   after the desktop rules so the wide-screen design is untouched, and every
   sheet keeps the same block order (hover guard, 1024, 960, 640; each once,
   never nested):
     1024px  shave the oversized side paddings;
      960px  the COMPACT LAYOUT: compact header (slim sticky bar + the drawer
             as a full-screen sheet, the a11y overlay as a modal), the iOS
             input guard, single-column *_col_split rows, every stacked
             component layout, every 44px touch-target lift, the fixed
             back-to-top disc. The desktop header's absolutely-positioned nav
             row ends near x≈900px and its search box overlaps the logo below
             ~810px, so portrait tablets and landscape phones need the drawer;
             the body follows the header so a landscape phone never gets
             desktop rows under a phone header. nav.js, a11y.js and
             search_filters.js pair this value with
             matchMedia("(min-width: 961px)"); test_accessibility pins the pair;
      640px  PHONE-PORTRAIT SIZING only: 16px gutter, heading sizes, 40px
             pagination cells, the breadcrumb and alphabet strips, solid
             backgrounds instead of the stock photos. No 44px rule lives here.
   --------------------------------------------------------------------------- */

/* Medium: shave the oversized side paddings before the full mobile stack. */
@media (max-width: 1024px) {
    :root {
        --main-body-side-padding: 40px;
    }
    #main_content {
        padding-bottom: 32px;
    }
    #for_publishers {
        padding: 56px;
    }
    footer > div {
        padding: 30px 40px;
    }
    /* 961-1024px still shows the desktop header; 24px between nav items (40px
       on wider screens) keeps PL/EN inside the 140px bar with margin to spare. */
    #subpages_list > li {
        padding-right: 24px;
    }
}

/* Compact layout: phones, landscape phones and portrait tablets. */
@media (max-width: 960px) {
    /* Header becomes a slim sticky bar; nav + search drop down on demand. */
    html {
        scroll-padding-top: 64px;
    }
    #header_content {
        flex-direction: column;
        height: auto;
        overflow: visible;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    /* The open drawer is a full-viewport sheet: fixed rather than in-flow so it
       never pushes the page down, scrollable on its own (landscape phones) with
       overscroll contained, and body.nav-open (set by nav.js) locks the page
       behind it. The bar stays pinned at the top of the sheet so the X is always
       reachable. The fixed a11y overlay inside is not clipped (no transform). */
    #header_content.nav-open {
        position: fixed;
        inset: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    #header_content.nav-open #header_bar {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--beige2);
    }
    body.nav-open,
    body.a11y-open {
        overflow: hidden;
    }
    #header_bar {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 0 8px;
        box-sizing: border-box;
    }
    #mhp_header_logo {
        height: 32px;
        padding: 8px;
    }
    #mobile_nav_btn {
        display: inline-block;
        margin-left: auto;
    }
    #accessiblity_btn {
        position: static;
        top: auto;
        right: auto;
        height: 28px;
        width: auto;
        padding: 8px;
        box-sizing: content-box;
    }
    #accessiblity_btn.hidden {
        display: none;
    }

    /* Nav + search collapse behind the hamburger; #header_content.nav-open (set
       by nav.js) reveals them as a drop-down panel below the bar. CSS hides them
       with display:none, so they leave the focus order while collapsed. */
    #header_nav,
    #header_search {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        padding-left: 0;
        box-sizing: border-box;
        display: none;
        border-top: 1px solid var(--beige1);
    }
    #header_content.nav-open #header_nav,
    #header_content.nav-open #header_search {
        display: block;
    }
    /* a11y.js still toggles .hidden when its overlay opens; keep that winning. */
    #header_nav.hidden,
    #header_search.hidden {
        display: none !important;
    }
    #header_nav {
        padding: 8px 16px;
    }
    #header_search {
        padding: 12px 16px;
    }
    /* The drawer's advanced-search link (still floated right) and the search
       icon get a 44px tap box; the text field stretches with the icon. */
    #header_search > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    #input_bar > input[type="image"] {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    #bazhum_header_logo {
        height: 36px;
        padding: 12px 0;
    }
    #subpages_list {
        flex-direction: column;
        gap: 4px;
    }
    #subpages_list > li {
        padding-right: 0;
    }
    #subpages_list > li > a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    /* PL/EN: a 44px tap box, left-aligned with the links above it. */
    #subpages_list form input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 0;
        text-align: left;
    }
    #input_bar > input:not([type=image]) {
        width: 100%;
    }

    /* Accessibility menu becomes a full-screen overlay (a modal dialog: a11y.js
       sets aria-modal and inerts the page). It is fixed (not absolute) because
       the header now collapses to a slim bar, so an absolute inset:0 would only
       cover ~56px. z-index sits above the sticky header and the drawer sheet. */
    #accessiblity_menu {
        position: fixed;
        inset: 0;
        width: 100%;
        height: auto;
        min-height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        z-index: 100;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    }
    #accessiblity_menu.hidden {
        display: none;
    }
    #accessiblity_menu > div > button {
        min-height: 44px;
    }
    /* The only way out of the overlay is a 44px close box; the first group
       label keeps clear of it. */
    #close_accessiblity_menu {
        top: 6px;
        right: 6px;
        width: 44px;
        height: 44px;
        padding: 10px;
        box-sizing: border-box;
    }
    #accessiblity_menu > div:first-of-type > span {
        padding-right: 56px;
    }
    /* The three "A" glyphs keep their 32/44/52px size cue; padding (not a
       min-height, which would scale the replaced image) lifts the small one. */
    #accessiblity_font_size input[type="image"] {
        padding: 6px;
        box-sizing: content-box;
    }
    #accessiblity_font_size input[type="image"]:not(:last-of-type) {
        margin-right: 8px;
    }

    /* Page layout and touch targets for the compact layout (moved up from the
       640px block so landscape phones and portrait tablets get them too). */
    #breadcrumbs > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .three_col_split,
    .four_col_split {
        flex-direction: column;
    }
    .three_col_split > *,
    .four_col_split > * {
        width: 100% !important;
    }
    .alphabet_carousel_elem {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }
    /* Stack the footer rows so links and funding logos wrap tidily instead of
       relying on inline-block + margin-right (which wraps unevenly). The
       funding emblems grow to 48px so their lockup text stays legible. */
    .footer_links,
    .footer_logos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }
    footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-right: 0;
    }
    .footer_logos img {
        max-height: 48px;
    }
    .footer_logos > a {
        max-width: 100%;
    }
    #for_publishers a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
    }
    /* Back to top: a fixed 44px disc in the corner instead of the sticky floated
       arrow whose negative margin sat over the last list column. Below the
       header (50) and the a11y overlay (100); the footer's logo band reserves
       room so the disc never covers a funding emblem at the end of the page. */
    #back_top_btn {
        position: fixed;
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: var(--beige2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 40;
    }
    #back_top_btn > img {
        position: static;
        float: none;
        margin: 0;
        padding: 0;
        width: 24px;
        height: 24px;
        background: none;
        border-radius: 0;
        transform: rotate(-90deg);
    }
    body:has(#back_top_btn) footer > div:last-child {
        padding-bottom: 80px;
    }
    /* Full-text checkbox: the 26px box keeps its geometry (the ::before
       checkmark is drawn for it); a transparent ::after halo makes the 44px hit
       box and the label becomes an equivalent 44px target. */
    div#full_text > input[type=checkbox] {
        position: relative;
    }
    div#full_text > input[type=checkbox]::after {
        content: "";
        position: absolute;
        inset: -9px;
    }
    div#full_text > label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Keep text fields at ≥16px so iOS Safari doesn't auto-zoom on focus, without
       shrinking fields that are already larger (e.g. the homepage hero search).
       Landscape phones sit in this band, hence 960px rather than 640px. */
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}

/* Phone portrait sizing (layout and touch targets are handled at 960px above). */
@media (max-width: 640px) {
    :root {
        --main-body-side-padding: 16px;
    }
    /* Belt and braces for WCAG 1.4.10: clip (not hidden, which would break
       position: sticky) any stray horizontal overflow; the per-component rules
       here and in the page sheets are the real fix. */
    body {
        overflow-x: clip;
    }

    /* Breadcrumbs: one scrolling row instead of three or four wrapped lines on
       an issue page (nav.js scrolls it to the end so the current page shows).
       The vertical padding keeps focus outlines inside the scroller; the
       ::after spacer is the trailing gutter scroll containers drop. */
    #breadcrumbs {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        white-space: nowrap;
        overflow-wrap: normal;
        padding: 6px 0 6px 16px;
    }
    #breadcrumbs > a {
        flex: 0 0 auto;
    }
    #breadcrumbs::after {
        content: "";
        flex: 0 0 8px;
    }
    #main_content {
        padding-bottom: 24px;
    }
    footer > div {
        padding: 24px 16px;
    }
    /* Solid gold instead of the 175 KB stock photo behind the gradient: white
       on #89602d is 5.6:1, while the gold veil over a photo has no reliable
       contrast at all. */
    #for_publishers {
        padding: 48px 24px;
        box-sizing: border-box;
        background: var(--gold);
    }

    /* Alphabet index: one scrolling strip of chips (44px from the 960px block)
       that bleeds to the viewport edges, instead of six rows of chips above the
       first entry. nav.js centres the current chip. */
    div.alphabet_carousel {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        width: auto;
        margin: 0 calc(var(--main-body-side-padding) * -1);
        padding: 6px 0 16px var(--main-body-side-padding);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        scroll-padding: 0 var(--main-body-side-padding);
    }
    div.alphabet_carousel::after {
        content: "";
        flex: 0 0 8px;
    }
    .alphabet_carousel_elem {
        flex: 0 0 auto;
        margin: 0;
        scroll-snap-align: center;
    }
}