style.css

/*
 Theme Name:   Understrap Child - MELP
 Theme URI:    https://mariaedgeworth.org
 Description:  Child theme for Maria Edgeworth Letters Project
 Author:       MELP Team
 Author URI:   https://mariaedgeworth.org
 Template:     understrap
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
*/

/**
 * All MELP theme styling lives in this one file. There is no build step —
 * edit it directly and reload.
 *
 * Written in native CSS: nesting, custom properties, and nested @media. It
 * replaces the former Gulp + Sass pipeline, whose partials compiled into
 * assets/css/melp.css; both are gone. `url()` paths resolve against this file
 * at the theme root, so they read `assets/images/...`, not `../images/...`.
 *
 * Mobile-first throughout: base rules target the smallest viewport and
 * larger-screen overrides layer on via nested min-width queries sitting next
 * to the component they modify. Breakpoints are 800px (tablet) and 1120px
 * (desktop), plus 960px for the letter viewer only — it goes side-by-side
 * earlier than the rest of the site so landscape tablets get the desktop
 * layout instead of the stacked one.
 *
 * Section order is load-bearing: later sections win the cascade where
 * selectors collide. Keep new rules in the section they belong to rather than
 * appending to the end.
 *
 * The Google Fonts stylesheet (Libre Baskerville + Public Sans) is enqueued
 * from functions.php, not @imported here, so it downloads in parallel with
 * this file instead of waiting on it.
 */



/* ==========================================================================
   TYPOGRAPHY
   Base layer: brand custom properties, base typography, a11y utilities.
   ========================================================================== */

/**
 * Base typography + brand variables.
 *
 * The custom properties below are the single source of truth for brand color
 * and type. Prefer referencing them over repeating a literal value, so a
 * palette change lands in one place.
 */


:root {
  /* Brand colors */
  --melp-gold: #CBBA69;
  --melp-gold-dark: #857217;
  --melp-text-muted: #596668; /* AA: 4.7:1 on --melp-bg-warm, was #677779 (3.7:1) */
  --melp-text: #464B4D;
  --melp-white: #FFFFFF;
  --melp-bg-warm: #E9E5DC;
  --melp-bg-light: #FEFCF7;
  --melp-browse-label: #59696B;
  --melp-border-light: #C4C4C4;
  --melp-placeholder: #767676; /* AA: 4.5:1 on white, was #999999 (2.8:1) */

  /* Pill icon colors */
  --melp-pill-people-icon: #B8C9D5;
  --melp-pill-people-hover: #587385;
  --melp-pill-people-active: #587385;
  --melp-pill-places-icon: #EAE1B8;
  --melp-pill-places-hover: #857217;
  --melp-pill-places-active: #857217;
  --melp-pill-works-icon: #EFCEBC;
  --melp-pill-works-hover: #9D5D39;
  --melp-pill-works-active: #9D5D39;
  --melp-pill-date-icon: #C3C0B8;
  --melp-pill-date-hover: #677779;
  --melp-pill-date-active: #677779;
  --melp-pill-repo-icon: #C3C0B8;
  --melp-pill-repo-hover: #677779;
  --melp-pill-repo-active: #677779;

  /* Pagination */
  --melp-pager-active: #587385;
  --melp-pager-inactive: #BEC7CE;

  /* Fonts */
  --melp-font-serif: Georgia, serif;
  --melp-font-body: 'Public Sans', sans-serif;
  --default-text-font: 'Public Sans', sans-serif;

  /* ---------------------------------------------------------------------
     Fluid type scale.

     Every font-size on the site comes from one of these tokens — there are
     no literal px sizes left except the letter transcript, which stays
     pinned so its line breaks keep matching the original manuscript.

     Each token interpolates between a 400px and a 1280px viewport and is
     flat outside that range, so there is no need for font-size media
     queries: the clamp does the work. Add a new token here rather than
     hard-coding a one-off size.

                          320px      1280px+
       --fs-psmall         12px  →  14px     small UI text, labels, pills
       --fs-p              14px  →  16px     body copy, form controls
       --fs-plarge         16px  →  18px     lead paragraphs
       --fs-h4             18px  →  20px
       --fs-h3             20px  →  22px
       --fs-h2             20px  →  26px
       --fs-h1             28px  →  38px     page titles, heroes
     --------------------------------------------------------------------- */
  --fs-psmall: clamp(0.75rem, 0.6932rem + 0.2273vw, 0.875rem);
  --fs-p:      clamp(0.875rem, 0.8182rem + 0.2273vw, 1rem);
  --fs-plarge: clamp(1rem, 0.9432rem + 0.2273vw, 1.125rem);
  --fs-h4:     clamp(1.125rem, 1.0682rem + 0.2273vw, 1.25rem);
  --fs-h3:     clamp(1.25rem, 1.1932rem + 0.2273vw, 1.375rem);
  --fs-h2:     clamp(1.25rem, 1.0795rem + 0.6818vw, 1.625rem);
  --fs-h1:     clamp(1.75rem, 1.4659rem + 1.1364vw, 2.375rem);

  /* h5 and h6 continue the ramp downward; aliases rather than new clamps
     so the scale stays six steps wide. */
  --fs-h5: var(--fs-plarge);
  --fs-h6: var(--fs-p);
}

h1,
h2,
h3,
h4,
h5,
h6,
.letter-carousel-label,
.topic-index-name {
  font-family: var(--melp-font-serif) !important;
  text-transform: none !important;
  /* `balance` evens out ragged headings; ignored by browsers that lack it.
     Tracking is 0.02em — the design spec quotes 2%, which is not a valid
     letter-spacing unit in CSS (percentages are dropped), so it is expressed
     in em here. */
  text-wrap: balance;
  letter-spacing: 0.02em;
}

/* Every heading level takes its size from the scale; the clamps make
   per-breakpoint font-size overrides unnecessary. */
/* h1/h2/h3/h5 get their sizes from their own rules further down; h4 and h6
   have none of their own, so they are set here. */
h4 { font-size: var(--fs-h4); }
h6 { font-size: var(--fs-h6); }

h2 {
  font-family: 'Libre Baskerville', serif !important;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-h2);
  line-height: 100%;
  letter-spacing: 0.02em;
}

h3 {
  font-family: 'Libre Baskerville', serif !important;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-h3);
  line-height: 25.2px;
}

body,
p {
  font-family: var(--melp-font-body);
}

body {
  background-color: var(--melp-bg-light);
}


/* ---------------------
     OTHER MASTHEAD STYLES
     (was at the bottom of style.css)
 ----------------------*/
#masthead #masthead-project-description {
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-h3);
  line-height: 160%;
}

/* The byline (editors / team / design credits, one icon per line) is moved by
   JS to sit directly under the "Project Updates" <h2> — no longer inside
   #masthead — so it's styled on the ID alone. On that light background the text
   uses the default dark colour. It shares the section's 1232px content
   container (matching the posts block) and left-aligns beneath the heading; the
   container's own responsive gutter handles the screen edges. */
#masthead-byline {
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-psmall);
  line-height: 150%;
  color: var(--default-text-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  max-width: 1232px;
  margin: 0 auto 30px;

  & br {
    display: none;
  }

  & span {
    display: flex;
    align-items: center;
    gap: 15px;

    &::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background-size: contain;
      background-repeat: no-repeat;
      flex-shrink: 0;
    }

    &:nth-of-type(1)::before {
      background-image: url('assets/images/hero_icon_1.png');
      background-size: 17.25px;
      background-position: center;
    }

    /* Icons 2 and 3 are intentionally swapped relative to their filenames —
       the artwork order didn't match the byline copy order. */
    &:nth-of-type(2)::before {
      background-image: url('assets/images/hero_icon_3.png');
    }

    &:nth-of-type(3)::before {
      background-image: url('assets/images/hero_icon_2.png');
    }
  }
}


/* ---------------------
     ACCESSIBILITY
     WCAG 2.2 AA structural pass — see /Users/.../plans/synthetic-watching-clarke.md
 ----------------------*/

/* Visually-hidden utility for sr-only labels (e.g. on `<input>`s where the
   placeholder is the only visible affordance). Standard pattern; do not
   `display: none` because that hides from AT too. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link — first focusable element on every page via the `wp_body_open`
   hook in functions.php. Hidden off-screen until focused, then drops into
   view in the top-left corner. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--melp-text);
  color: var(--melp-bg-light);
  text-decoration: none;
  font-family: var(--melp-font-body);
  font-weight: 600;
  border-radius: 0 0 4px 0;

  &:focus,
  &:focus-visible {
    top: 0;
    outline: 2px solid var(--melp-gold);
    outline-offset: 2px;
  }
}

/* Global focus ring for every interactive element. `:where()` keeps the
   specificity at 0 so per-component overrides win without `!important`.
   Uses the slate accent already in the palette so it reads on both cream
   and teal surfaces. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--melp-pill-people-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduced-motion guard. Neutralizes the 0.2 s color/background transitions,
   the carousel transform hover, and `scroll-behavior: smooth` for users who
   have the OS preference set. Carousel JS (LetterCarousel) also gates its
   smooth-scroll easing on the same media query. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   GLOBAL
   Global components: site chrome, letter viewer, search, cards, controls.
   ========================================================================== */

:root {
    --page-bg-color: #FEFCF7;
    --masthead-bg-color: #587385;
    --masthead-text-color: #FEFCF7;
    --secondary-bg-color: #D0D0CE;
    --control-bg-color: #CBBA69;
    --control-text-color: #464B4D;
    --control-border-color: #7C7C7C;
    --heading-text-color: #464B4D;
    --default-text-color: #464B4D;
    --default-text-font: 'Public Sans', sans-serif;
    --browse-by-pill-color: #F5F5F5;
    --alt-bg-color: #E4E4E4;
    --alt-text-color: #59696B;
    --search-bg-color: #E9E5DC;
    --border-light-color: #D0D0CE;
    --border-result-color: #C3C0B8;
    --text-muted-color: #596668; /* AA: 4.7:1 on --search-bg-color, was #677779 (3.7:1) */
    --text-label-color: #59696B;
    --radio-color: #6F8596;
    --accent-bar-color: #536D81;
}

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

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    color: var(--default-text-color)!important;
    background-color: var(--page-bg-color)!important;
    font-family: var(--default-text-font)!important;
    scroll-behavior: smooth;
}

#announcement-banner {
    padding: 10px;
    text-align: center;
    background-color: white;
    width: 100%;
}

h1 {
    /* Default H1. Reads --color-neutrals-Black directly (not
       --heading-text-color) so per-component re-points of that token — e.g.
       link-hover rules — never recolor page headings. */
    color: var(--color-neutrals-Black, #464B4D) !important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: var(--fs-h1);
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal !important;
    text-transform: none !important;

    /* No font-size override here any more — --fs-h1 already ramps 28→38px
       across this range. Only the desktop line-height still needs a step. */
    @media (min-width: 1120px) {
        line-height: 50.4px !important; /* 126% */
    }
}

h2 {
    color: var(--heading-text-color)!important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: var(--fs-h2);
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal !important;
    text-transform: none !important;
}

h3 {
    color: var(--heading-text-color)!important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400 !important;
    line-height: 25.2px !important;
}

h5 {
    color: var(--heading-text-color)!important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: var(--fs-h5);
    font-style: normal;
    text-transform: none !important;
    font-weight: 400 !important;
    line-height: 26px !important;
}

p {
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    font-size: var(--fs-p);
    /* `pretty` avoids orphans/short last lines; ignored where unsupported. */
    text-wrap: pretty;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

a {
    color: var(--default-text-color);
}

img.alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

img.alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
}

.profile-image-circle {
    width: 178px!important;
    height: 178px!important;
    overflow: hidden!important;
    border-radius: 50%!important;
}

.profile-byline p {
    margin: 0;
}

input[type=radio] + label {
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    font-size: var(--fs-p);
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}

input[type=text] {
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    font-style: italic;
    font-size: var(--fs-p);
    font-weight: 400;
}

option[disabled] { display: none; }

button {
    cursor: pointer;
}

details {
    padding-bottom: 16px;
    border-bottom: solid 1px var(--border-light-color);
}

details > summary, .metadata-label, .tippy-content .entity-popup-label {
    display: block;
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    font-size: var(--fs-p);
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
    text-transform: uppercase;
}

.metadata-label {
    font-family: "Public Sans", var(--default-text-font), sans-serif;
    font-size: var(--fs-psmall);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.78px;
    color: #464B4D;
    line-height: 20px;
}

details > summary {
    margin-left: 20px;
    list-style: none;
    cursor: pointer;
    padding: 12px 0;
}

/* Hide the disclosure triangle. Deliberately two rules, not one selector list:
   an unrecognized selector invalidates the whole list, so pairing these would
   mean Firefox — which cannot parse ::-webkit-details-marker — discards the
   ::marker half too and keeps painting the triangle. */
details > summary::marker {
    display: none;
}

details > summary::-webkit-details-marker { /* Safari */
    display: none;
}

details > summary::before {
    background-image: url('assets/images/icon_chevron_down.png');
    background-size: 9px;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    left: -20px;
    top: 20px;
    width: 10px;
    height: 18px;
    cursor: pointer;
    content: "";
    transition: transform 0.2s ease;
}

details:not([open]) > summary::before {
    background-image: url('assets/images/icon_chevron_down.png');
    transform: rotate(-90deg);
}


/* ---------------------
           NAV
 ----------------------*/
#top-container {
    background-color: var(--masthead-bg-color);
    border-bottom: none;
}

#top-container:has(#nav-container.search) {
    border-bottom: none;
}


#top-container.homepage {
    border-bottom: unset;
    gap: 0;
}

#nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--masthead-bg-color);
    width: 100vw;
    height: 80px;
    padding: 0 max(calc((100vw - 1232px) / 2), calc(15vw / 2));
    border-bottom: 4.697px solid var(--color-yellow-60, #CBBA69);

    @media (min-width: 1120px) {
        height: auto;
        border-bottom: solid 5px var(--control-bg-color);
    }

    /* Inner pages (anything without the JS-applied .homepage class) drop
       the gold rule under the nav — only the homepage keeps it. */
    &:not(.homepage) {
        border-bottom: none;
    }
}

#nav-title-and-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0;

    @media (min-width: 1120px) {
        margin-bottom: -55px;
    }
}

#nav-container.homepage {
    position: relative;
    z-index: 20;
    background-color: var(--masthead-bg-color);
    padding: 0 20px;
    width: 100%;

    @media (min-width: 1120px) {
        background-color: unset;
        border-bottom: unset;
        padding: 0 max(calc((100vw - 1232px) / 2), calc(15vw / 2));
    }
}

#nav-container.homepage #nav-title-and-menu {
    /* Mobile: title on the left, hamburger on the right (space-between).
       Desktop: title floats to the masthead and the menu group right-aligns. */
    justify-content: space-between;
    margin-bottom: 0;

    @media (min-width: 1120px) {
        justify-content: end;
    }
}

#nav-container.homepage #nav-menu {
    padding-top: 20px;
}

#nav-container.search #nav-title-and-menu {
    margin-bottom: unset;
}



#nav-container a {
    color: var(--masthead-text-color) !important;
    font-size: var(--fs-psmall);
    font-weight: 700;
    letter-spacing: 1.04px;
    text-transform: uppercase;
    /* No underline at rest (bootstrap's base `a` underlines otherwise) —
       it appears on hover/keyboard focus only. */
    text-decoration: none;
}

#nav-container a:hover,
#nav-container a:focus-visible {
    text-decoration: underline;
}

#nav-title, #nav-title a {
    /* Mobile: small uppercase Libre Baskerville label, no underline.
       Desktop: the large Romie wordmark used in the original masthead. */
    color: var(--masthead-text-color);
    font-family: "Libre Baskerville";
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    text-transform: uppercase;
    text-decoration: none;
    word-wrap: break-word;
    max-width: 180px;

    @media (min-width: 1120px) {
        font-family: "Romie", sans-serif !important;
        font-size: var(--fs-h2);
        line-height: 30px !important;
        font-weight: normal;
        text-transform: none;
        text-decoration: none;
        height: 60px;
        margin: 25px 0;
        max-width: 300px;
    }
}

#nav-container.search #nav-title {
    margin-right: auto;
}

/* Content pages: the search is nested in #nav-title-and-menu, inline between the
   logo and the menu. Lay the row out on a single centered line, with the logo at
   the left and the search + menu grouped to the right. */
#nav-container:not(.homepage):not(.search) #nav-title-and-menu #nav-search {
    position: static;
    top: auto;
    flex: 0 0 auto;
    margin: 0;
}

#nav-container:not(.homepage):not(.search) #nav-title-and-menu {
    align-items: center;
    margin-bottom: 0;
}

#nav-container:not(.homepage):not(.search) #nav-menu {
    align-self: center;
    margin-top: 0;
}

#nav-container:not(.homepage):not(.search) #nav-search-bar {
    width: 320px;
    height: 40px;
}

#nav-container:not(.homepage):not(.search) #nav-search-button {
    height: 40px;
}

#nav-search {
    display: flex;
    justify-content: center;
}

#nav-container #nav-search {
    position: relative;
    top: 25px;
    z-index: 20;
}

#nav-search-bar {
    border-radius: 4px 0 0 4px;
    border: none;
    color: var(--default-text-color);
    width: 320px;
    height: 40px;
    padding-left: 16px;
    font-size: var(--fs-p);
    font-family: var(--default-text-font);
}

#nav-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 104px;
    padding: 0 20px;
    text-decoration: none;
    color: var(--control-text-color);
    background-color: var(--control-bg-color);
    /* Hover fill slides in from the left (dark gold over gold — matches the
       Places pill hover). */
    /* Hover fill sliding in from the left; retreats on un-hover. Double-width,
       hard-stop gradient whose background-position animates between halves.
       (Shared pattern — keep the four background declarations together.) */
    background-image: linear-gradient(to right, var(--melp-pill-places-hover) 50%, var(--control-bg-color) 50%);
    background-size: 200% 100%;
    background-position: right top;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease, color 0.2s, border-color 0.2s;

    &:hover,
    &:focus-visible {
        background-position: left top;
    }
    border-radius: 0 4px 4px 0;
    border: none;
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0.78px;
    position: relative;
}

#nav-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 30px;
    row-gap: 5px;

    @media (min-width: 1120px) {
        justify-content: flex-end;
        align-self: start;
        margin-top: 30px;
    }
}

#nav-container.homepage #nav-menu {
    align-self: unset;
    margin-top: unset;
}

/* Inline nav links underline on hover/focus only — no rest-state underline,
   including the current page (aria-current still announces it to AT). The
   hamburger drawer's push-menu rules keep their own .current underline. */
#nav-menu a:hover, #nav-menu a:focus-visible {
    text-decoration: underline;
}

/* Focus rings on the slate nav/masthead surfaces. The global ring in
   the TYPOGRAPHY section uses --melp-pill-people-hover (#587385), which is the
   exact --masthead-bg-color, so it's invisible here. Use the gold accent —
   the same convention as the skip-link focus on dark surfaces. Covers the
   logo/wordmark link (which JS moves into #masthead on the homepage), the
   inline menu items, the search controls, and the hamburger button. */
#nav-container a:focus-visible,
#nav-container button:focus-visible,
#nav-container input:focus-visible,
#masthead a:focus-visible {
    outline: 2px solid var(--melp-gold);
    outline-offset: 2px;
}

/* Mobile hamburger button — a real <button> wrapping the SVG glyph
   <img>. The desktop version (≥1120px) hides it; the .force-hamburger
   override below wins back at desktop when there are 3+ menu items. */
#hamburger-open-button {
    display: block;
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin-left: 30px;
    /* Reset UA <button> chrome so the glyph shows on its own. */
    background: none;
    border: none;
    padding: 0;

    & > img {
        width: 100%;
        height: 100%;
        display: block;
    }

    @media (min-width: 1120px) {
        display: none;
    }
}


/* ---------------------
         MASTHEAD
 ----------------------*/
#masthead { display: none; }

#masthead.homepage {
    /* mobile: full-width single column with no background image so the hero text
       reads on a flat teal panel. desktop: the original 3-column grid with the
       right-side engraving overlay. */
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 20px 10px;
    background-color: var(--masthead-bg-color);

    @media (min-width: 1120px) {
        display: grid;
        grid-template-columns: min(43%, 480px) 1fr min(22%, 230px);
        width: 100vw;
        min-height: 500px;
        margin: -40px auto 0 auto;
        padding: 0;
        background-image: url('assets/images/hero-right-bg.png');
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

#masthead.homepage #masthead-right-col {
    /* mobile only: the right column is hidden until the grid lays out at desktop. */
    display: none;

    @media (min-width: 800px) {
        display: block;
    }
}

#masthead-left-col {
    /* hidden through tablet — only re-appears once the masthead is the desktop grid. */
    display: none;
    background-image: url('assets/images/hero-left-bg.png');
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;

    @media (min-width: 1120px) {
        display: block;
    }
}

#masthead-center-col {
    display: flex;
    width: 100%;
    padding: 0;

    @media (min-width: 800px) {
        padding-top: 60px;
    }

    @media (min-width: 1120px) {
        width: auto;
        padding: 50px 0;
    }
}

#masthead p {
    font-size: var(--fs-p);
    font-style: normal;
    line-height: 17px;
    color: var(--masthead-text-color);
    margin-top: 1em;
}

#masthead p.by-line {
    font-size: var(--fs-psmall);
}

#masthead-title-and-description {
    /* mobile: hero text spans the panel with centered alignment.
       desktop: revert to the original 24px gutter offset. */
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;

    @media (min-width: 1120px) {
        width: auto;
        padding-left: 24px;
        padding-right: 24px;
        margin: auto -24px;
        text-align: left;
    }
}

#masthead-title-and-description #nav-title,
#masthead-title-and-description #nav-title a {
    /* This used to step 30px → 40px → 38px across two breakpoints, which is
       non-monotonic and impossible to express as one clamp. --fs-h1 ramps
       28→38px smoothly and lands on the same desktop size, so the two
       font-size overrides are gone; only the line-height steps remain. */
    display: contents;
    font-family: 'Libre Baskerville', serif !important;
    font-size: var(--fs-h1) !important;
    line-height: 40.4px !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
    text-transform: none;
    vertical-align: middle;
    color: var(--masthead-text-color) !important;
    max-width: unset;

    @media (min-width: 800px) {
        line-height: 30px !important;
    }

    @media (min-width: 1200px) {
        line-height: 50.4px !important;
    }
}

#masthead-title-and-description p {
    font-size: var(--fs-psmall);
    line-height: 22px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;

    @media (min-width: 1120px) {
        font-size: var(--fs-p);
        line-height: 17px;
        text-align: left;
    }
}

#masthead > p {
    padding-left: 0;
    padding-right: 0;
}

#masthead-about-button {
    display: inline-block;
    color: var(--masthead-text-color);
    font-size: var(--fs-psmall);
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 60px;
    border: 1px solid var(--masthead-text-color);
    padding: 10px 20px 10px 20px;
    margin-top: 10px;
    transition: background-color 0.2s, color 0.2s;
}

#masthead-about-button:hover {
    background-color: var(--masthead-text-color);
    color: var(--masthead-bg-color);
    text-decoration: none;
}

/* ---------------------
        HAMBURGER MODAL
   (mobile drawer + push-menu)
 ----------------------*/

/* Body scroll lock while the modal is open — prevents the page underneath from
   scrolling and visibly shifting when the user drags inside the drawer. */
body.hamburger-open {
    overflow: hidden;
}

/* Dimming backdrop. The full-screen mobile drawer sits on top of this and
   covers it; the push-menu side panel (which only spans 393px on tablet+ and
   desktop) leaves the rest of the viewport visible, so the backdrop both
   hides background shifts caused by the DOM moves in open_hamburger and gives
   the drawer the conventional "modal" affordance. */
body.hamburger-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 4999;
    pointer-events: none;
}

/* The modal stays hidden by default; JS sets `display: flex` inline to open it.
   When opened the rest of these rules style it as a full-screen overlay. The
   `.push-menu` block further down overrides this with a right-side panel when
   the menu has 3+ items, at every viewport. */
#hamburger-modal {
    display: none;
    flex-direction: column;
    position: fixed;
    padding: 40px;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5000;
    background-color: var(--page-bg-color);
}

/* The drawer only renders the close X (the title is no longer moved in here);
   flex-end keeps the X anchored to the right at every viewport. */
#hamburger-title-container {
    display: flex;
    justify-content: flex-end;
}

#hamburger-close-button {
    height: 35px;
    width: 35px;
    cursor: pointer;
    /* Reset UA <button> chrome — the close glyph <img> inside is the
       full visual; this element used to be an <img> styled directly. */
    background: none;
    border: none;
    padding: 0;

    & > img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

#hamburger-search-container {
    display: flex;
    justify-content: center;
    /* 50px of breathing room above the search — sits below the close-X title row. */
    margin-top: 50px;
    margin-bottom: 30px;
}

#hamburger-search-container #nav-search-bar,
#hamburger-search-container #nav-search-button {
    border: 1px solid var(--control-bg-color);
}

/* Search fills the drawer width at every hamburger breakpoint. On mobile the
   fixed-basis bar already shrinks to fit; in the 800–1119px band the drawer is
   wide, so make the bar grow to fill instead of sitting centered at its 320px
   basis. (Mirrors the .push-menu treatment, which only applies with 3+ nav
   items.) */
#hamburger-search-container #nav-search {
    width: 100%;
    display: flex;
}

#hamburger-search-container #nav-search-bar {
    flex: 1;
    min-width: 0;
    width: auto;
}

#hamburger-search-container #nav-search-button {
    flex: 0 0 auto;
}

#hamburger-nav-container {
    display: flex;
    justify-content: center;
    border-top: solid 1px var(--default-text-color);
    border-bottom: solid 1px var(--default-text-color);
    padding-top: 30px;
    padding-bottom: 30px;
}

#hamburger-nav-container #nav-menu {
    flex-direction: column;
    gap: 30px;
}

#hamburger-nav-container #nav-menu a {
    font-size: var(--fs-h2);
    font-weight: normal;
    text-transform: uppercase;
    color: var(--default-text-color);
}

#hamburger-footer-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: end;
}

/* The page footer's #footer-copyright is cloned into the drawer by JS once
   footer.html loads. Force a compact layout that reads well in the narrow drawer. */
#hamburger-footer-container #footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 24px 10px;
    border-top: 1px solid #E9E5DC;
}

#hamburger-footer-container #footer-copyright-text {
    width: 100%;
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    line-height: 1.5;
    color: var(--default-text-color);
}

#hamburger-footer-container #footer-copyright-corpora {
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    color: var(--masthead-bg-color);
}

/* `!important` overrides the inline `style="width: 120px"` baked into footer.html. */
#hamburger-footer-container #footer-copyright-corpora img {
    width: 70px !important;
    opacity: 0.8;
}


/* ---------------------
     PUSH MENU (3+ items)
 ----------------------*/

/* When the nav has 3 or more items the inline menu is replaced with a hamburger
   trigger that opens a side-panel "push" menu — same behaviour at every viewport. */
#nav-container.force-hamburger {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#nav-container.force-hamburger #nav-menu {
    display: none;
}

#nav-container.force-hamburger #hamburger-open-button {
    display: block;
    width: 36px;
    height: 36px;
    cursor: pointer;
    align-self: center;
    margin-top: 0;
    flex-shrink: 0;
    content: url('assets/images/hamburger_menu.svg');
}

/* Push-menu side panel — overrides the full-screen mobile overlay styling. */
#hamburger-modal.push-menu {
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 393px;
    max-width: 100vw;
    z-index: 5000;
    background-color: var(--melp-white);
    padding: 48px 20px 0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
}

#hamburger-modal.push-menu #hamburger-close-button {
    height: 24px;
    width: 24px;
    cursor: pointer;
}

#hamburger-modal.push-menu #hamburger-search-container {
    display: flex;
    /* 50px above the search — matches the plain-mode drawer for consistency. */
    margin: 50px 0 0;
}

#hamburger-modal.push-menu #hamburger-search-container #nav-search {
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    display: flex;
}

#hamburger-modal.push-menu #hamburger-search-container #nav-search-bar {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 40px;
    border: none;
    border-radius: 4px 0 0 4px;
    background-color: var(--melp-bg-light);
    padding-left: 16px;
    font-family: var(--melp-font-body);
    font-size: var(--fs-p);
    font-style: italic;
    color: var(--melp-text-muted);
}

#hamburger-modal.push-menu #hamburger-search-container #nav-search-button {
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    background-color: var(--melp-gold);
    color: var(--melp-white);
    font-family: var(--melp-font-body);
    font-size: var(--fs-psmall);
    font-weight: 700;
    letter-spacing: 0.78px;
    text-transform: uppercase;
}

#hamburger-modal.push-menu #hamburger-search-container #nav-search-button:hover {
    background-color: var(--melp-gold-dark);
}

#hamburger-modal.push-menu #hamburger-nav-container {
    display: flex;
    flex-direction: column;
    border: none;
    padding: 24px 0 0;
    margin-top: 0;
}

#hamburger-modal.push-menu #hamburger-nav-container #nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

#hamburger-modal.push-menu #hamburger-nav-container #nav-menu a {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid #E9E5DC;
    font-family: 'Libre Baskerville', serif;
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 36.4px;
    letter-spacing: 0.4px;
    text-transform: none;
    text-align: center;
    color: #536E82 !important;
    text-decoration: none;
}

#hamburger-modal.push-menu #hamburger-nav-container #nav-menu a:first-child {
    border-top: 1px solid #E9E5DC;
}

/* Focus mirrors hover so keyboard users get the same cue; the drawer sits
   on the cream surface, so the global slate ring stays visible here and the
   underline is an addition, not the only indicator. */
#hamburger-modal.push-menu #hamburger-nav-container #nav-menu a:hover,
#hamburger-modal.push-menu #hamburger-nav-container #nav-menu a:focus-visible,
#hamburger-modal.push-menu #hamburger-nav-container #nav-menu a.current {
    text-decoration: underline;
}

#hamburger-modal.push-menu #hamburger-footer-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 10px;
    padding: 24px 10px;
    border-top: 1px solid #E9E5DC;
    margin-top: 24px;
    font-family: var(--melp-font-body);
    font-size: var(--fs-psmall);
    color: var(--melp-text);
}


/* ---------------------
        BROWSE BY
 ----------------------*/
#browse-by-container {
    display: flex;
    align-items: center;
    background-color: var(--secondary-bg-color);
    border-top: solid 3px var(--control-bg-color);
    padding-bottom: 25px;
}

#browse-by-container > #nav-search {
    position: relative;
    top: -25px;
}

#browse-by-bar {
    display: flex;
    max-width: 1232px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.browse-by-pill {
    display: flex;
    height: 40px;
    padding: 0 20px;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-psmall);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.78px;
    border-radius: 4px;
    color: var(--masthead-text-color);
    background-color: var(--masthead-bg-color);
}

.browse-by-pill:hover {
    color: white;
    text-decoration: none;
}

.browse-by-pill img {
    height: 16px;
    width: auto;
}

/* Focus-visible override for the pills so the keyboard state preserves
   the same hover background (focus reads as engagement, not just an
   outline against the default surface). */
.browse-by-pill:focus-visible {
    color: white;
    background-color: var(--melp-pill-people-hover);
    outline-offset: 2px;
}

/* ---------------------
       START HERE
 ----------------------*/
#start-here-container {
    margin-top: 40px;
    display: flex;
    align-items: center;
}

#start-here-description {
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--default-text-color);
}


/* ---------------------
      LETTER CAROUSEL
 ----------------------*/
.letter-carousel {
    position: relative;
}

.letter-carousel-viewport {
    overflow: hidden;
    position: relative;
}

.letter-carousel-slider {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    height: 500px;
    transition: transform 0.4s ease;
}

.letter-carousel-item {
    display: flex;
    flex-direction: column;
    width: 300px;
    flex-shrink: 0;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

/* One link wraps the image + title. No underline at rest; on hover/keyboard
   focus the title turns our blue and underlines. */
.letter-carousel-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.letter-carousel-link:hover .letter-carousel-label,
.letter-carousel-link:focus-visible .letter-carousel-label {
    color: #587385 !important;
    text-decoration: underline;
}

.letter-carousel-thumbnail-frame {
    max-height: 370px;
    /* Clip on both axes so the hover zoom scales the image inside a
       fixed frame instead of growing it. */
    overflow: hidden;
    border-radius: 10px;
}

.letter-carousel-thumbnail {
    border-radius: 10px!important;
    transition: transform 0.3s ease;
}

/* Hovering a carousel card zooms INTO the image — the thumbnail frame keeps
   its size and its overflow clip swallows the scaled edges. Applies to every
   LetterCarousel instance (homepage Start Here + letter "Up Next"). */
.letter-carousel-link:hover .letter-carousel-thumbnail,
.letter-carousel-link:focus-visible .letter-carousel-thumbnail {
    transform: scale(1.1);
}

.letter-carousel-label {
    color: var(--default-text-color) !important;
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: normal;
    line-height: 37px;
    cursor: pointer;
}

.letter-carousel-pager {
    margin-top: 30px;
    margin-left: 45%;
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
}

.letter-carousel-page {
    cursor: pointer;
}


/* ---------------------
     PROJECT UPDATES
 ----------------------*/
#project-updates-container {
    margin-top: 50px;
    display: flex;
    align-items: center;

    /* Between tablet and the 1232px design width the fixed-width posts block
       shrinks to fill the viewport, so the title and cards run right up to the
       screen edges. Add a gutter across that range. */
    @media (min-width: 800px) and (max-width: 1232px) {
        padding-left: 30px;
        padding-right: 30px;
    }
}

#project-updates-posts-and-subscribe {
    display: flex;
    width: 1232px;
}

#project-updates {
    width: 814px;
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 20px;
}

#subscribe {
    width: 418px;
}

.project-update {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 397px;
    height: 500px;
    border-radius: 10px;
    border: 1px solid var(--default-text-color);
    padding: 20px;
}

.project-update-image-wrapper {
    width: 135px;
    height: 135px;
    overflow: hidden;
    border-radius: 50%;
    margin-top: 25px;
}

.project-update-title {
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    text-align: center;
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    line-height: normal;
    margin-bottom: 0px;

    /* Mobile: left-aligned, matching .project-update-description below it.
       Unlike the section headings this needs no `align-self` — .project-update
       is a flex column with `align-items: start`, so the title box already
       spans the card and only the centered text has to move. */
    @media (max-width: 799px) {
        text-align: left;
    }
}

.project-update-description {
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    text-align: left;
    font-size: var(--fs-p);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 10px;
}

.project-read-more {
    display: flex;
    height: 50px;
    padding: 16px;
    align-items: center;
    border: 1px solid var(--default-text-color);
    gap: 10px;
    font-size: var(--fs-p);
    font-weight: normal;
    text-transform: uppercase;
    border-radius: 90px;
}


/* Footer rules (#footer-container, #footer-supported-by(-list), .footer-image,
   #footer-copyright(-text)(-corpora)) live in the FOOTER section. The duplicate
   pre-rebrand declarations that used to sit here were always overridden by the
   FOOTER section versions (which load later) — removed. */


/* ---------------------
     ADVANCED SEARCH
 ----------------------*/
#advanced-search-container {
    width: 100vw;
    padding: 0;
}

#adv-search-hero {
    background-color: var(--search-bg-color);
    padding: 48px max(calc((100vw - 1232px) / 2), calc(15vw / 2));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-bottom: 60px;
}

#adv-search-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* The hero heading is the page's h1 (the search page has no other h1);
   selector keeps h2 for safety during the transition. */
#adv-search-hero h1,
#adv-search-hero h2 {
    font-family: 'Libre Baskerville', serif !important;
    font-size: var(--fs-h1);
    font-weight: 400 !important;
    color: var(--heading-text-color) !important;
    letter-spacing: 0.38px;
    line-height: 50.4px !important;
    text-transform: none !important;
    margin: 0;
}

#adv-search-subheading {
    font-family: var(--default-text-font);
    font-size: var(--fs-p);
    font-weight: 400;
    color: var(--text-muted-color);
    line-height: 160%;
    text-align: center;
    margin: 0;
}

#adv-search-bar {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
    max-width: 800px;
}

#adv-search-box {
    border-radius: 4px 0 0 4px;
    border: none;
    background-color: var(--page-bg-color);
    color: var(--default-text-color);
    flex: 1;
    height: 40px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: var(--fs-p);
    /* Typed text is upright — only the placeholder is italic (below). */
    font-style: normal;
}

#adv-search-box::placeholder {
    color: var(--text-label-color);
    font-style: italic;
}

#adv-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 104px;
    padding: 0 20px;
    text-decoration: none;
    color: var(--control-text-color);
    background-color: var(--control-bg-color);
    /* Hover fill slides in from the left (slate over gold). */
    /* Hover fill sliding in from the left; retreats on un-hover. Double-width,
       hard-stop gradient whose background-position animates between halves.
       (Shared pattern — keep the four background declarations together.) */
    background-image: linear-gradient(to right, #536E82 50%, var(--control-bg-color) 50%);
    background-size: 200% 100%;
    background-position: right top;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease, color 0.2s, border-color 0.2s;

    &:hover,
    &:focus-visible {
        background-position: left top;
    }
    border-radius: 0 4px 4px 0;
    border: none;
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0.78px;
    position: relative;
}

#adv-search-type-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
    margin: 0;
    color: var(--default-text-color);
    border-bottom: 1px solid var(--border-light-color);
}

.adv-search-type-label {
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--default-text-color);
    line-height: 18px;
}

#adv-search-type-bar span:has(input[type=radio]) {
    display: flex;
    align-items: center;
    gap: 10px;
}

#adv-search-type-bar input[type=radio] {
    width: 18px;
    height: 18px;
    accent-color: var(--radio-color);
}

#adv-search-filter-and-results {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-column-gap: 40px;
    padding: 0 max(calc((100vw - 1232px) / 2), calc(15vw / 2));
    width: 100%;
}

#adv-search-filter {
    border-right: 1px solid var(--border-light-color);
    padding-right: 20px;
}

.adv-search-filter-label {
    display: block;
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.78px;
    color: var(--text-label-color);
    line-height: 20px;
    margin-bottom: 8px;
}

#adv-search-filter .metadata-label,
.adv-date-search-bar,
#adv-search-dates-apply-button {
    margin-top: 8px;
}

.date-box {
    border-radius: 4px;
    border: 1px solid var(--search-bg-color);
    max-width: 105px;
    height: 35px;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    font-style: normal;
    font-size: var(--fs-p);
    font-weight: 400;
    background-color: #FFFFFF;
}

.date-box.month, .date-box.day {
    max-width: 70px;
}

#adv-search-dates-apply-button, #adv-search-modal-apply-button {
    height: 40px;
    padding: 0 20px;
    text-decoration: none;
    color: var(--control-text-color);
    background-color: var(--control-bg-color);
    /* Hover fill slides in from the left (slate over gold). */
    /* Hover fill sliding in from the left; retreats on un-hover. Double-width,
       hard-stop gradient whose background-position animates between halves.
       (Shared pattern — keep the four background declarations together.) */
    background-image: linear-gradient(to right, #536E82 50%, var(--control-bg-color) 50%);
    background-size: 200% 100%;
    background-position: right top;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease, color 0.2s, border-color 0.2s;

    &:hover,
    &:focus-visible {
        background-position: left top;
    }
    border: none;
    border-radius: 4px;
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.78px;
    position: relative;
}

/* Hover / keyboard-focus states for the search-page controls. The filled
   gold buttons and the ghost "clear filters" button animate a slate
   (#536E82) fill sliding in from the left via the slide-fill mixin on their
   base rules; only the text/border color changes live here. The modal close
   button gets a warm tint behind the glyph. :focus-visible mirrors :hover so
   keyboard users get the same cue on top of the global slate focus ring
   (the TYPOGRAPHY section). */
#adv-search-button,
#adv-search-dates-apply-button,
#adv-search-modal-apply-button,
#adv-search-clear-filter-button,
#adv-search-modal-close-button {
    cursor: pointer;
}

#adv-search-modal-close-button {
    transition: background-color 0.2s, color 0.2s;
}

#adv-search-button:hover,
#adv-search-button:focus-visible,
#adv-search-dates-apply-button:hover,
#adv-search-dates-apply-button:focus-visible,
#adv-search-modal-apply-button:hover,
#adv-search-modal-apply-button:focus-visible {
    color: var(--melp-white);
}

#adv-search-clear-filter-button:hover,
#adv-search-clear-filter-button:focus-visible {
    border-color: #536E82;
    color: var(--melp-white);
}

#adv-search-modal-close-button:hover,
#adv-search-modal-close-button:focus-visible {
    background-color: var(--melp-bg-warm);
    border-radius: 4px;
}

.filter-box {
    width: 100%!important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple
{
    /* Default state has no outline so the select2 chrome looks like a
       text input. Focus-visible reinstates a real, visible ring (uses
       the same slate accent as the global rule in the TYPOGRAPHY section). */
    outline: none;
    min-height: 35px;
    border-radius: 4px;
    border: solid 1px var(--search-bg-color);
    margin-top: 8px;
    overflow: hidden;
    background-color: #FFFFFF;
}

.select2-container--default.select2-container--focus .select2-selection--multiple:focus-visible,
.select2-container--default .select2-selection--multiple:focus-visible {
    outline: 2px solid var(--melp-pill-people-hover);
    outline-offset: 2px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple[aria-expanded=false],
.select2-container--default .select2-selection--multiple[aria-expanded=false] {
    background: #FFFFFF url('assets/images/icon_chevron_down.png') 90% 50% no-repeat;
    background-size: 9px;
}

.select2-container--default .select2-search--inline .select2-search__field,
.select2-container .select2-search--inline .select2-search__field {
    margin-top: 6px!important;
    margin-left: 8px!important;
    font-family: var(--default-text-font), sans-serif;
    font-size: var(--fs-psmall);
    cursor: text;
    width: auto !important;
    min-width: 150px;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--text-label-color);
    font-style: italic;
    font-size: var(--fs-psmall);
}

.select2-results__options {
    border: solid 1px var(--search-bg-color)!important;
    border-top: none;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--masthead-bg-color) !important;
}

.select2-selection__choice {
    background-color: var(--masthead-bg-color) !important;
    color: var(--masthead-text-color);
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: var(--fs-psmall);
}

.select2-selection__choice__remove {
    color: var(--masthead-text-color)!important;
}

#adv-search-clear-filter-button {
    color: var(--text-label-color);
    background-color: transparent;
    /* Hover fill slides in from the left (slate over transparent). */
    /* Hover fill sliding in from the left; retreats on un-hover. Double-width,
       hard-stop gradient whose background-position animates between halves.
       (Shared pattern — keep the four background declarations together.) */
    background-image: linear-gradient(to right, #536E82 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right top;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease, color 0.2s, border-color 0.2s;

    &:hover,
    &:focus-visible {
        background-position: left top;
    }
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0.78px;
    border-radius: 4px;
    border: 1px solid var(--text-label-color);
    padding: 0 20px;
    height: 40px;
    margin-top: 20px;
    position: relative;
}

#adv-search-results-meta-bar, #adv-search-results-meta-bar select {
    font-weight: 400;
    font-size: var(--fs-p);
    font-family: var(--default-text-font);
    color: var(--text-label-color);
}

#adv-search-results-meta-bar {
    position: sticky;
    top: 0;
    background-color: var(--page-bg-color);
    padding: 20px 0;
    border-bottom: 1px solid var(--border-light-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

#adv-search-results-meta-bar select {
    border-radius: 4px;
    border: 1px solid var(--border-result-color);
    /* Custom chevron so the arrow gets real breathing room — the native one
       hugs the right edge. Inset 12px to match the text padding; the 36px
       right padding keeps option text clear of it. (Mirrors the topic-index
       meta-bar selects.) */
    appearance: none;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2359696B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    padding: 8px 36px 8px 12px;
    color: var(--text-label-color);
    min-width: 186px;
}

#adv-search-count-bar {
    color: var(--text-muted-color);
    font-size: var(--fs-p);
}

#adv-search-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 24px;
    margin-bottom: 24px;
}

#adv-search-pagination:empty {
    display: none;
}

.adv-search-page-link {
    /* Rest: plain bold text, no border/background. The transparent 1px
       border keeps the box the same size when hover/active add a real one
       (no reflow). */
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--color-neutrals-Black, #464B4D);
    font-family: var(--font-family-Sans, "Public Sans"), sans-serif;
    font-size: var(--fs-p);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
}

.adv-search-page-link:hover:not(.disabled):not(.active),
.adv-search-page-link.active {
    border-color: var(--color-azure-53, #536E82);
    background: var(--color-azure-52, #587385);
    /* drop */
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10);
    color: #fff;
}

.adv-search-page-link.active {
    cursor: default;
}

.adv-search-page-link.disabled {
    color: var(--color-grey-81, #D0D0CE);
    cursor: not-allowed;
}

.adv-search-page-ellipsis {
    padding: 0 4px;
    color: var(--default-text-color);
}

.adv-search-result {
    color: var(--heading-text-color);
    font-weight: 400;
    font-size: var(--fs-h3);
    padding: 20px 0;
    border-bottom: solid 1px var(--border-result-color);
}

.adv-search-result a {
    text-decoration: none;
}

.adv-search-result a:hover,
.adv-search-result a:focus-visible {
    color: #00558C;
    /* The h5 title inside the link has `color: var(--heading-text-color)
       !important` — re-point the token so the heading follows the link blue. */
    --heading-text-color: #00558C;
    text-decoration: underline;
}

/* Search-term excerpt under the result title — ES highlight fragments from
   the letter's html field, sanitized by melp.js (match terms in <strong>),
   clamped to two lines. */
.adv-search-result-excerpt {
    margin: 4px 0 0;
    color: var(--color-neutrals-Grey-2, #59696B);
    font-family: "Public Sans", sans-serif;
    font-size: var(--fs-p);
    font-style: normal;
    font-weight: 400;
    line-height: 25.6px; /* 160% */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    & strong {
        font-weight: 700;
    }
}

/* Result titles are h3 (h2 hero → h3 results, no skipped levels); the
   former h5 stays in the selector for safety during the transition. */
.adv-search-result h3,
.adv-search-result h5 {
    margin: 0;
    font-family: 'Libre Baskerville', serif !important;
    font-size: var(--fs-h3) !important;
    font-weight: 400 !important;
    font-style: italic;
    color: var(--heading-text-color) !important;
    letter-spacing: 0.2px;
    line-height: 26px !important;
    text-transform: none !important;
}

.adv-search-result-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    font-weight: 400;
    color: var(--text-muted-color);
    line-height: 21px;
}

.adv-search-result-bullet {
    color: var(--text-muted-color);
}

/* #adv-search-modal display rule (and its mobile interior styles) lives in the
   MOBILE ADV-SEARCH MODAL section near the bottom of this file. */


/* ---------------------
     LETTER VIEWER
 ----------------------*/
#advanced-search-container.letter-viewer-container {
    width: 100vw;
    max-width: unset;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-top: 124px;
}

#advanced-search-container.letter-viewer-container::before {
    content: '';
    display: block;
    width: 182px;
    height: 85px;
    background-image: url('assets/images/footer_floral.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
}

#letter-title,
#letter-image-thumbs,
#letter-columns,
#letter-viewer,
#letter-detail-container,
#letter-credit {
    width: 100%;
    max-width: 1272px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

#letter-up-next {
    width: 100%;
}

#letter-credit {
    margin-top: 48px;
    margin-bottom: 48px;
}

#letter-credit h2 {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-h2);
    line-height: 41.6px;
    letter-spacing: 0.32px;
}

#letter-up-next h2 {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-h2);
    line-height: 100%;
    letter-spacing: 0.02em;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 48px;
}

#letter-title {
    text-transform: unset !important;
}

#letter-image-thumbs {
    display: flex;
    gap: 10px;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--color-neutrals-Ivory, #E9E5DC);
}

/* Each thumbnail is wrapped in a real <button> (keyboard-operable page
   switching) — strip the UA chrome so only the image shows. */
.letter-thumbnail-button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
}

.letter-thumbnail {
    width: 93px;
    height: 114px;
    border-radius: 10px!important;
    filter: grayscale(100%);
    cursor: pointer;
}

.letter-thumbnail.current {
    border: 2px solid var(--color-azure-52, #587385);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10);
    filter: none;
}

#letter-viewer {
    /* Mobile: image and transcript stack in a single column.
       Desktop: side-by-side with the column-arrangement toolbar to control widths. */
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    position: relative;

    @media (min-width: 960px) {
        flex-direction: row;
    }
}

#previous-letter-link {
    position: absolute;
    top: 0;
    right: 100%;
}

#next-letter-link {
    position: absolute;
    top: 0;
    left: 100%;
}

.letter-sequence-link {
    /* Mobile: previous/next chevrons hidden — there's not enough horizontal
       space to flank the stacked viewer. Desktop: shown as side handles. */
    display: none;
    height: fit-content;

    @media (min-width: 960px) {
        display: block;
    }
}

.letter-sequence-image {
    position: relative;
    top: -50px;
}

#letter-image-and-license {
    /* Mobile stacks image and transcript columns to full width. */
    width: 100%;
    height: auto;

    @media (min-width: 960px) {
        width: 60%;
        height: 725px;
        /*padding-top: 20px;*/
    }
}

/* Group label above the column-arrangement toolbar. Hidden on mobile with
   the toolbar it labels. */
#letter-columns-label {
    display: none;

    @media (min-width: 960px) {
        display: block;
        width: 100%;
        max-width: 1272px;
        margin: 0 auto 8px;
        padding-left: 20px;
        padding-right: 20px;
        color: var(--default-text-color);
        font-family: var(--default-text-font);
        font-size: var(--fs-psmall);
        font-style: normal;
        font-weight: 700;
        line-height: 20px; /* 142.857% */
        letter-spacing: 0.78px;
        text-transform: uppercase;
    }
}

#letter-columns {
    /* Mobile: hide the column-arrangement toolbar (50/50, 60/40, image only, …)
       — there's no meaningful arrangement on a single-column layout. */
    display: none;

    @media (min-width: 960px) {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
    }
}

.letter-columns-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid var(--color-neutrals-Tobacco, #C3C0B8);
    background: var(--color-white-solid, #FFF);
    padding: 10px 12px;
    cursor: pointer;
    font-family: "Public Sans", sans-serif;
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--default-text-color);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.letter-columns-button:hover:not(.active) {
    border: 1px solid var(--color-azure-51, #6F8596);
    background: var(--color-azure-50, #B8C9D5);
    text-decoration: none;
}

a.letter-columns-button:hover {
    text-decoration: none;
}

.letter-columns-button::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}

#letter-columns .letter-columns-button[data-arrangement="half"]::before,
#letter-columns .letter-columns-button[data-arrangement="two-thirds"]::before {
    mask-image: url('assets/images/icon-grid-5050.svg');
}

#letter-columns .letter-columns-button[data-arrangement="image-only"]::before {
    mask-image: url('assets/images/icon-grid-image-only.svg');
}

#letter-columns .letter-columns-button[data-arrangement="transcription-only"]::before {
    mask-image: url('assets/images/icon-grid-transcript-only.svg');
}

#letter-xml-link::before {
    mask-image: url('assets/images/icon-grid-transcript-only.svg');
}

.letter-columns-button.active {
    color: #fff;
    background: #587385;
    border-color: #587385;
    box-shadow: 0 2px 8px 0 rgba(88, 115, 133, 0.40);
}

#letter-image-toolbar {
    /* mobile: shown as a row of OpenSeadragon controls above the image;
       desktop: hidden (controls overlay the viewer instead). */
    display: flex;
    flex-direction: row;
    width: 80vw;

    & > div > div {
        /* OpenSeadragon writes `position: absolute` inline on these descendants;
           override it so they flow inside the toolbar row at mobile. */
        position: unset !important;
    }

    & img {
        filter: drop-shadow(0px 4px 0 lightgray);
    }

    @media (min-width: 960px) {
        display: none;
    }
}

#letter-image-viewer {
    height: 290px;
    width: 100%;
    border-radius: 4px;

    @media (min-width: 960px) {
        height: 675px;
        width: auto;
        border: solid 1px var(--masthead-bg-color);
        overflow: hidden;
    }
}

/* High-contrast mode for the manuscript viewer — toggled by the ◐ button
   melp.js appends to the OpenSeadragon toolbar. A display-level filter on
   the OSD canvas: grayscale strips the sepia tone, the contrast boost pulls
   faded ink off the paper. Composes with zoom/pan/rotate untouched. */
#letter-image-viewer.high-contrast .openseadragon-canvas {
    filter: grayscale(1) contrast(1.75);
}

/* The toggle itself — contrast.png matches the stock OSD button PNGs
   (35×35, glyph on an opaque white tile), so the mount is the same 35px
   footprint with the tile clipped round. The PNG is opaque, so state cues
   go on the image (hover darken) and around it (slate ring when active)
   rather than behind it. */
.letter-contrast-button {
    width: 35px;
    height: 35px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
    cursor: pointer;

    & > img {
        display: block;
        width: 100%;
        height: 100%;
        transition: filter 0.2s;
    }

    &:hover > img,
    &:focus-visible > img {
        filter: brightness(0.9);
    }

    &[aria-pressed="true"] {
        /* Real border (not box-shadow/outline) — the opaque PNG paints over
           anything drawn inside the box, but a border shrinks the content
           box so the slate ring always shows around the tile. */
        border: 2px solid var(--masthead-bg-color);
    }
}

#letter-license {
    margin-top: 10px;
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    font-size: var(--fs-p);
}

#letter-xml-and-transcript {
    width: 100%;
    height: auto;
    padding-top: 0;
    margin-bottom: 30px;
    position: relative;

    @media (min-width: 960px) {
        display: flex;
        flex-direction: column;
        height: 725px;
        width: 40%;
        align-items: start;
        gap: 0;
        padding-top: 0;
        margin-bottom: 0;
    }
}

#letter-xml {
    /* Mobile: space-between so View XML sits at the left and Remove Annotations
       sits at the right of the row (no negative top margin — the column-arrangement
       toolbar is hidden on mobile so there's nothing to overlap).
       Desktop: pulls up into the toolbar row with both controls right-aligned, and
       uses the pointer-events workaround so the column buttons under it stay clickable. */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-top: 0;
    margin-bottom: 25px;
    position: relative;
    z-index: 3;

    @media (min-width: 960px) {
        justify-content: flex-end;
        /* Anchored to the top-right of #letter-xml-and-transcript (position:
           relative) so it overlays the column-arrangement toolbar row; the
           pointer-events workaround keeps the buttons beneath it clickable. */
        position: absolute;
        right: 0;
        top: -102px;
        margin-top: 0;
        pointer-events: none;
    }
}

#letter-xml > * {
    pointer-events: auto;
}

/* "Transcript:" label sits directly above the View XML button, sharing its
   left edge (column group). The group's margin-right: auto keeps it and the
   Remove Annotations control apart (left vs right of the bar). */
#letter-xml-titlegroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-right: auto;
}

/* Same treatment as #letter-columns-label (Figma node 2672-1381). */
#letter-transcript-label {
    margin: 0;
    color: var(--default-text-color);
    font-family: var(--default-text-font);
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.78px;
    text-transform: uppercase;
}

#letter-remove-annotations-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    cursor: pointer;
}

#letter-remove-annotations {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.annotations-toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #C3C0B8;
    transition: background 0.2s ease;
}

.annotations-toggle::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

#letter-remove-annotations:checked ~ .annotations-toggle {
    background: #587385;
}

#letter-remove-annotations:checked ~ .annotations-toggle::before {
    transform: translateX(16px);
}

#letter-transcript-viewer.annotations-removed br {
    display: none;
}

/* When "Remove Annotations" is toggled on, strip the editorial overlay so the
   transcript reads as plain prose: drop the PERSON/PLACE/WORK pill backgrounds
   and icons, the cursor pointer, the hover state, and the green/gray/strike
   marks on addition/deletion/unclear. Toggling off lets the original rules
   re-apply automatically — no JS change needed. */
#letter-transcript-viewer.annotations-removed span.entity,
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="PERSON"],
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="PLACE"],
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="WORK"] {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-wrap: inherit !important;
    cursor: text !important;
    transition: none !important;
}

#letter-transcript-viewer.annotations-removed span.entity::before,
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="PERSON"]::before,
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="PLACE"]::before,
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="WORK"]::before {
    content: none !important;
    display: none !important;
}

#letter-transcript-viewer.annotations-removed span.entity:hover,
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="PERSON"]:hover,
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="PLACE"]:hover,
#letter-transcript-viewer.annotations-removed span.entity[data-entity_type="WORK"]:hover {
    background-color: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
}

#letter-transcript-viewer.annotations-removed span.addition,
#letter-transcript-viewer.annotations-removed span.deletion,
#letter-transcript-viewer.annotations-removed span.unclear {
    color: inherit !important;
    text-decoration: none !important;
}

/* Wrapper holds the scrolling transcript plus the pinned "About the
   letters" question-mark toggle and its popover, so the toggle stays put
   while the transcript scrolls. */
#letter-transcript-wrap {
    position: relative;
    width: 100%;
}

/* Question-mark toggle — circular, pinned to the top-right corner of the
   annotations panel (Figma: 24×24, x:307/y:14 inside the 345px card).
   Hidden while the popover is open — the X close button takes its place. */
#letter-about-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    line-height: 0;

    & > img {
        width: 24px;
        height: 24px;
        display: block;
    }

    &[hidden] {
        display: none;
    }
}

/* X close button — sits in the popover's top-right corner (where the ? was)
   so the popover is closed via a distinct affordance, not the ? again. */
#letter-about-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    color: var(--color-neutrals-Black, #464B4D);
    line-height: 0;
}

/* "About the Letters" popover. Figma: 345px white card, 1px #D0D0CE border,
   4px radius, drop shadow, 24px 16px padding, column with 10px gap. Anchored
   to the top-right so the toggle overlays its corner. */
#letter-about-modal {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    width: 345px;
    max-width: calc(100% - 8px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 16px;
    border-radius: 4px;
    border: 1px solid var(--color-grey-81, #D0D0CE);
    background: var(--color-white-solid, #FFF);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10);

    &[hidden] {
        display: none;
    }

    & h2 {
        /* Bold uppercase label, NOT the big serif default h2. */
        margin: 0;
        padding-right: 24px; /* clear the toggle in the corner */
        font-family: "Public Sans", sans-serif !important;
        font-size: var(--fs-psmall) !important;
        font-style: normal;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.78px;
        text-transform: uppercase !important;
        color: var(--color-neutrals-Black, #464B4D) !important;
    }

    & p {
        margin: 0;
        color: var(--color-neutrals-Grey-1, #677779);
        font-family: "Public Sans", sans-serif;
        font-size: var(--fs-psmall);
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 21px */
    }

    /* The body wrapper (admin-editable text) reproduces the modal's own
       column-gap so paragraph spacing is identical to when the <p>s were
       direct flex children. */
    & #letter-about-modal-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    & .letter-about-italic {
        font-style: italic;
    }

    & .letter-about-link {
        color: #00558C;
        text-decoration: underline;

        &:hover {
            color: var(--melp-gold-dark);
            text-decoration: none;
        }
    }
}

#letter-transcript-viewer {
    /* Mobile: shorter viewer to fit under the image on stacked layout.
       Desktop: tall viewer alongside the image at 675px. */
    height: 290px;
    width: 100%;
    padding: 20px;
    font-family: var(--default-text-font);
    /* Deliberately NOT a clamp token. The transcript's line lengths are meant
       to mirror the original manuscript (see the "About the Letters" dialog),
       and fluid type would change characters-per-line at every viewport width.
       The same applies to `#letter-transcript-viewer p` below. */
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    overflow-y: scroll;
    border-radius: 4px;
    border: 1px solid var(--color-grey-81, #D0D0CE);
    background: var(--color-white-solid, #FFF);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    margin-top: 0;

    @media (min-width: 960px) {
        height: 675px;
    }

    /* Letters that haven't been transcribed yet. The viewer keeps its full
       height so the two-column layout doesn't collapse, and the placeholder
       is centered in that space rather than stranded in the top-left corner.
       `overflow-y` drops to hidden because the permanent scrollbar track the
       transcript needs reads as broken on an otherwise empty panel. The class
       is applied by LetterViewer.render() in melp.js.

       The placeholder is nested here deliberately: `#letter-transcript-viewer p`
       below is (1,0,1) and comes later in the cascade, so a bare
       `#letter-transcript-pending` rule would lose its color and font to it. */
    &.transcript-pending {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: hidden;

        & #letter-transcript-pending {
            margin: 0;
            text-align: center;
            text-wrap: balance;
            color: var(--melp-text); /* #464B4D */
            font-family: var(--default-text-font); /* "Public Sans" */
            font-size: var(--fs-h2); /* 20→26px, replaces a flat 24px */
            font-style: normal;
            font-weight: 700;
            line-height: 25.2px; /* 105% */
        }
    }
}

#letter-transcript-viewer p {
    color: var(--color-neutrals-Black, #464B4D);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.8px; /* 180% */
}

#letter-transcript-viewer .fas { display:none; }

/*.page-highlight.active {
    background-color: rgba(0,0,0,0.1);
}*/

#letter-transcript-viewer .alert.alert-melp {
    background-color: #B8C9D5;
    border-color: #B8C9D5;
    color: #464B4D;
    padding: 0.7rem;
}

#letter-transcript-viewer .alert.alert-melp p {
    /* Editorial disclaimer above the transcript — UI chrome, not manuscript
       prose, so it scales like the rest of the site rather than staying pinned. */
    font-size: var(--fs-psmall);
    line-height: 23px !important;
    color: #464B4D;
    margin-bottom: 10px;
}

#letter-transcript-viewer .alert.alert-melp p:last-child {
    margin-bottom: 0;
}

#letter-transcript-viewer .alert.alert-melp p a,
#letter-transcript-viewer .alert.alert-melp p a span,
#letter-transcript-viewer .alert.alert-melp a,
#letter-transcript-viewer .alert.alert-melp a span {
    color: #0B57D0 !important;
    text-decoration: underline;
}

#letter-detail-section {
    width: 100%;
    background-color: #E9E5DC;
    padding-top: 48px;
    padding-bottom: 48px;
    margin-bottom: 20px;
}

#letter-detail-container {
    /* Mobile: metadata stacks above facets/citation; desktop: two columns side-by-side. */
    display: flex;
    flex-direction: column;
    column-gap: 64px;
    row-gap: 32px;

    @media (min-width: 800px) {
        flex-direction: row;
        row-gap: 48px;
    }
}

#letter-metadata, #letter-detail-right {
    flex: 1;
    min-width: 0;
}

#letter-metadata {
    display: flex;
    flex-direction: column;
    gap: 15px;

    @media (min-width: 800px) {
        gap: 16px;
        padding-right: 80px;
    }
}

#letter-detail-right {
    display: flex;
    flex-direction: column;
    row-gap: 48px;
}

#letter-facets {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

#letter-facets .letter-facet {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

#letter-facets .letter-facet-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
}

#letter-facets .letter-facet a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #B8C9D5;
    padding: 4px 8px;
    border-radius: 4px;
    color: #464B4D;
    text-decoration: none;
    font-family: "Public Sans", var(--default-text-font), sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: var(--fs-psmall);
    line-height: 25.2px;
    letter-spacing: 0px;
    transition: background-color 0.2s, color 0.2s;
}

#letter-facets #letter-PERSON-facet a::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 13px;
    flex-shrink: 0;
    background-image: url('assets/images/icon_person.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#letter-facets #letter-PERSON-facet a:hover {
    background-color: var(--melp-pill-people-hover);
    color: var(--melp-white);
    text-decoration: none;
}

#letter-facets #letter-PLACE-facet a {
    background-color: #EAE1B8;
    color: #464B4D;
}

#letter-facets #letter-PLACE-facet a::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 13px;
    flex-shrink: 0;
    background-image: url('assets/images/icon_place.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#letter-facets #letter-PLACE-facet a:hover {
    background-color: var(--melp-pill-places-hover);
    color: var(--melp-white);
    text-decoration: none;
}

#letter-facets #letter-WORK-facet a {
    background-color: var(--melp-pill-works-icon); /* #EFCEBC */
    color: #464B4D;
}

#letter-facets #letter-WORK-facet a::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 13px;
    flex-shrink: 0;
    /* Masked white glyph follows the chip's text color (dark at rest,
       white on hover). */
    background-color: currentColor;
    mask-image: url('assets/images/icon_work_white.png');
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}

#letter-facets #letter-WORK-facet a:hover {
    background-color: var(--melp-pill-works-hover);
    color: var(--melp-white);
    text-decoration: none;
}

#letter-facets .letter-facet summary {
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 0;
    padding: 0;
    font-family: "Public Sans", var(--default-text-font), sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: var(--fs-psmall);
    line-height: 20px;
    letter-spacing: 0.78px;
    text-align: left;
    text-transform: uppercase;
}

#letter-facets .letter-facet summary::before {
    order: 1;
    margin-left: auto;
    left: 0;
    top: 0;
}

#letter-metadata span {
    color: var(--alt-text-color);
    font-family: "Public Sans", var(--default-text-font), sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-p);
    line-height: 25.6px;
    letter-spacing: 0px;
    margin-top: 10px;
}

#letter-citation-and-credit {
    display: flex;
    flex-direction: column;
    row-gap: 20px;

    @media (min-width: 800px) {
        row-gap: 48px;
    }
}

#letter-credit-contents {
    display: block;
    margin-top: 10px;
    background-color: #E9E5DC;
    padding: 32px;
    border-radius: 4px;
}

#letter-citation-container {
    display: block;
    max-width: 100%;
    word-break: break-word;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    color: var(--default-text-color);
}

#letter-citation {
    margin-left: 20px;
    border: none;
    background: transparent;
    color: var(--color-neutrals-Grey-1, #677779);
    /* p - small */
    font-family: "Public Sans", sans-serif;
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    text-align: left;
}

/* Linkified URLs inside metadata values (set_metadata_field in melp.js) —
   site link blue, and break-all so archive URLs can't overflow the panel. */
#letter-metadata-collection a {
    color: #00558C;
    text-decoration: underline;
    word-break: break-all;
}

#letter-citation::before {
    background-image: url('assets/images/citation_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    left: -20px;
    top: 24px;
    width: 13px;
    height: 18px;
    content: "";
}

#letter-credit h2 {
    margin-top: 0px;
}


div.dateline {
    margin-bottom: 10px;
}

div.closer {
    margin-bottom: 10px;
}

span.underline, span.rend-underline {
    text-decoration: underline;
}

span.rend-superscript {
    vertical-align: super;
    font-size: smaller;
    line-height: normal;
}

span.deletion {
    text-decoration: line-through;
}

span.entity {
    cursor: pointer;
}

span.entity[data-entity_type=PERSON] {
    background-color: #B8C9D5;
    color: #464B4D;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: var(--fs-psmall);
    font-weight: bold;
    text-wrap: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
span.entity[data-entity_type=PERSON]:hover {
    background-color: var(--melp-pill-people-hover);
    color: var(--melp-white);
    text-decoration: none;
}
span.entity[data-entity_type=PERSON]:before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 13px;
    background-image: url('assets/images/icon_person.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 4px 0 8px;
    position: relative;
    top: 2px;
}

span.entity[data-entity_type=PLACE] {
    background-color: #EAE1B8;
    color: #464B4D;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: var(--fs-psmall);
    font-weight: bold;
    text-wrap: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
span.entity[data-entity_type=PLACE]:hover {
    background-color: var(--melp-pill-places-hover);
    color: var(--melp-white);
    text-decoration: none;
}
span.entity[data-entity_type=PLACE]:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 13px;
    background-image: url('assets/images/icon_place.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 4px 0 8px;
    position: relative;
    top: 2px;
}

span.entity[data-entity_type=WORK] {
    background-color: var(--melp-pill-works-icon); /* #EFCEBC */
    color: #464B4D;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: var(--fs-psmall);
    font-weight: bold;
    text-wrap: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
span.entity[data-entity_type=WORK]:hover {
    background-color: var(--melp-pill-works-hover);
    color: var(--melp-white);
    text-decoration: none;
}
span.entity[data-entity_type=WORK]:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 13px;
    /* Only a white work glyph exists as an asset — mask it with
       currentColor so it reads dark at rest and white on hover. */
    background-color: currentColor;
    mask-image: url('assets/images/icon_work_white.png');
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    margin: 0 4px 0 8px;
    position: relative;
    top: 2px;
}

span.addition {
    color: green;
}

span.unclear {
    color: gray;
}

span.entity span.unclear, span.entity span.addition {
    color: inherit;
}

.tippy-box {
    border-radius: 4px;
    border: 1px solid var(--color-grey-81, #D0D0CE);
    background: var(--color-white-solid, #FFF);
    /* drop */
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.tippy-arrow {
    /* Arrow matches the new white surface. */
    color: var(--color-white-solid, #FFF);
}

.tippy-content .entity-popup-label {
    margin-left: 0;
    margin-bottom: 10px;
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.78px;
    text-transform: uppercase;

    /* Type icon, masked so it inherits the per-type color below. */
    &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 14px;
        margin-right: 6px;
        vertical-align: -2px;
        background-color: currentColor;
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
    }
}

/* Label color (and the masked icon with it) matches the hover palette of
   the entity span that opened the popup. */
.tippy-content .entity-popup-label--PERSON {
    color: var(--melp-pill-people-hover); /* slate blue */

    &::before {
        mask-image: url('assets/images/icon_person.svg');
    }
}

.tippy-content .entity-popup-label--PLACE {
    color: var(--melp-pill-places-hover); /* dark gold */

    &::before {
        mask-image: url('assets/images/icon_place.svg');
    }
}

.tippy-content .entity-popup-label--WORK {
    color: var(--melp-pill-works-hover); /* rust */

    &::before {
        /* White PNG works as a mask — only its alpha channel is used. */
        mask-image: url('assets/images/icon_work_white.png');
    }
}

.entity-popup-uris a { color: var(--heading-text-color); }

/* Popup action ("Show letters with this person") reads as an underlined
   text link, not a chromed button. */
.tippy-box button {
    margin-top: 10px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    font-size: var(--fs-psmall);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.78px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
}

.letter-facet > div {
    padding-left: 20px;
}
.letter-facet > div a { color: var(--default-text-color); }

/* Placeholder line shown when a facet has no mentions ("No works
   mentioned", …) — injected by melp.js. */
.letter-facet-empty {
    color: var(--color-neutrals-Grey-1, #677779);
    font-family: "Public Sans", sans-serif;
    font-size: var(--fs-psmall);
    font-style: italic;
    font-weight: 400;
    line-height: 21px; /* 150% */
    margin: 0;
}

/* ---------------------
   CUSTOM CONTENT PAGES
 ----------------------*/
#top-container + div > div.e-con-inner,
.melp-page-content {
    padding: 0 max(calc((100vw - 1232px) / 2), calc(15vw / 2)) !important;
}

.melp-page-content h1 {
    margin: 10px 0;
}


/* ---------------------
   MOBILE-ONLY OVERRIDES
   (rules that must NOT apply at desktop)
 ----------------------*/

/* When `applyColumnArrangement` in melp.js sets inline `display: none` on either
   column for image-only / transcription-only mode at desktop, a reader who then
   resizes down to mobile would lose one column. Force both visible here, but
   only for mobile/tablet — at desktop the user's chosen arrangement wins. */
@media (max-width: 959px) {
    #letter-image-and-license,
    #letter-xml-and-transcript {
        display: block !important;
    }
}

/* Mobile letter-viewer scrolling for the page-break thumbnail strip and the
   long citation block — they're rendered too wide for a phone. */
@media (max-width: 799px) {
    #letter-image-thumbs,
    #letter-citation {
        overflow-x: scroll;
    }

    /* Tighten the metadata-label inset so it aligns flush in a single-column row. */
    .metadata-label {
        margin-left: 0;
    }
}


/* ---------------------
   MOBILE ADV-SEARCH MODAL
 ----------------------*/

/* The mobile advanced-search UI opens as a full-screen modal (JS sets `display`
   inline). At desktop the panel renders inline; these styles only apply when
   the modal is opened on mobile, so they live below the desktop layout above. */
#adv-search-modal {
    display: none;
}

@media (max-width: 799px) {
    #adv-search-modal {
        flex-direction: column;
        position: fixed;
        padding: 20px;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow-y: scroll;
        z-index: 5000;
        background-color: var(--page-bg-color);
    }

    #advanced-search-container {
        width: 100%;
        padding: 0;
    }

    #adv-search-hero {
        padding: 30px 20px;
    }

    #adv-search-filter-and-results {
        padding-left: 20px;
        padding-right: 20px;
        grid-template-columns: 100% 1fr;
    }

    #adv-search-modal-apply-close {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #adv-search-modal-close-button {
        height: 35px;
        width: 35px;
    }

    #adv-search-button,
    #adv-search-box {
        border: solid 1px var(--control-bg-color);
        border-radius: 4px;
        text-align: left;
        width: 100%;
        margin-bottom: 10px;
    }

    #adv-search-box {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    #adv-search-button {
        border-radius: 4px;
    }

    #adv-search-clear-filter-button {
        margin-left: 0;
    }

    #adv-search-results-meta-bar,
    #adv-search-results-meta-bar select {
        width: 100%;
    }

    #adv-search-bar #adv-search-button {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ---------------------
   MOBILE GUTTERS
 ----------------------*/
/* Background colors stay full-width because padding is applied to the section
   element itself — `padding-inside-the-border-box`, so the bg-color still
   reaches edge-to-edge while the content gets the gutter.
     - Homepage sections (search bar lives inside #browse-by-container, plus
       the start-here and project-updates blocks): 10px L/R.
     - Inner-page mounts (#topic-index-container): 20px L/R.
     - Advanced search: NO gutter on the #advanced-search-container mount —
       the 20px L/R lives on #adv-search-filter-and-results (mobile block
       above) instead, so full-bleed bands like #adv-search-hero can run
       edge-to-edge while the filter/results content keeps the gutter.
   Selectors target the unique container IDs because every WP page in this
   site renders <body> with no classes — body.home / .front-page would match
   nothing. The IDs themselves are the page identifier.
   `!important` to outrank the (now mostly dead) `#top-container + div > .e-con-inner`
   gutter rule above. */
@media (max-width: 799px) {
    /* Homepage sections. */
    #browse-by-container,
    #start-here-container,
    #project-updates-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Inner-page mounts. The letter viewer keeps the mount-level gutter —
       only the advanced-search page moves it down to
       #adv-search-filter-and-results (see comment above). */
    #topic-index-container,
    #advanced-search-container.letter-viewer-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* ==========================================================================
   FOOTER
   Site footer.
   ========================================================================== */

/**
 * @file
 * Footer Component Styles (mobile-first).
 *
 * Targets #footer-container rendered by MELP plugin JS.
 */


#footer-container {
  border-top: 3px solid var(--melp-gold);
  background: url('assets/images/footer_bg.png') no-repeat left center / auto 100%,
    linear-gradient(to right, transparent 0%, var(--melp-bg-warm) 50%);
  background-color: var(--melp-bg-warm);
  font-family: var(--melp-font-serif);
  color: var(--melp-text);
  text-transform: none;
  margin-top: 60px;
  position: relative;
  overflow: visible;

  &::before {
    content: '';
    display: block;
    width: 182px;
    height: 85px;
    background-image: url('assets/images/footer_floral.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -87px;
    right: 0;
    transform: translateX(-20px);
  }
}

#footer-supported-by {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  /* mobile gets a tighter bottom inset to bring the supporter logos closer
     to the copyright block; desktop returns to the symmetric 40px padding. */
  padding: 40px 20px 30px;

  & h2 {
    font-family: var(--melp-font-serif);
    color: var(--melp-text);
    text-transform: none;
    margin-bottom: 20px;
  }

  @media (min-width: 800px) {
    padding-bottom: 40px;
  }
}

#footer-supported-by-list {
  /* Row layout at every viewport — logos wrap as needed. Mobile shrinks each
     logo to ≤45% so two fit per row; tablet+ caps them at a fixed 120px. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  width: 100%;

  & .footer-image {
    max-width: 45% !important;
    height: auto;

    @media (min-width: 800px) {
      max-width: 120px !important;
    }
  }
}

/* "View All Supporters" — only rendered when a supporters URL is set on the
   Site Text screen (melp.js removes it otherwise). */
#footer-container #footer-link {
  display: block;
  text-align: center;
  padding: 0 20px 30px;
  color: inherit;
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

#footer-copyright {
  display: flex;
  /* mobile: stack the licence text on top of the Corpora line, centered.
     tablet+: side-by-side with space-between. */
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);

  @media (min-width: 800px) {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
}

#footer-copyright-text {
  /* mobile: full-width paragraph; tablet+: constrained to ~half the row so the
     "Powered by" pair has room on the right. */
  width: 100%;
  color: var(--melp-text);
  font-family: var(--melp-font-serif);
  font-size: var(--fs-p);
  font-weight: 400;
  line-height: normal;
  text-transform: none;

  @media (min-width: 800px) {
    width: 606px;
    max-width: 100%;
  }

  a {
    color: inherit;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

#footer-copyright-corpora {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  color: var(--melp-text);
  font-family: var(--melp-font-serif);

  & img {
    width: 120px;
    margin-left: 10px;
  }
}


/* ==========================================================================
   BROWSE-BY
   Browse-by pills.
   ========================================================================== */

/**
 * @file
 * Browse By Component Styles (mobile-first).
 */


#browse-by-container {
  background-color: var(--melp-bg-warm);
}

#browse-by-label {
  /* mobile: label takes its own full-width row, centered.
     desktop: revert to intrinsic width, left-aligned inline with the pills. */
  width: 100%;
  margin: 0;
  text-align: center;
  color: var(--melp-browse-label) !important;
  font-family: 'Public Sans', sans-serif !important;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-psmall) !important;
  line-height: 100% !important;
  letter-spacing: 0.78px;
  vertical-align: middle;
  text-transform: uppercase !important;

  @media (min-width: 800px) {
    width: unset;
    text-align: unset;
  }
}

#browse-by-bar {
  & .browse-by-pill {
    background-color: transparent;
    border: 1.5px solid var(--melp-border-light);
    border-radius: 4px;
    color: var(--melp-text);
    line-height: 100%;
    text-transform: none;
    text-decoration: none;
    font-family: var(--melp-font-body);
    font-size: var(--fs-p);
    font-weight: 400;
    padding: 0 14px;
    height: 36px;
    gap: 10px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;

    & img {
      width: 21px;
      height: 21px;
      background-color: var(--pill-icon-bg);
      border-radius: 50%;
    }

    /* The pills are plain navigation now (no persistent selected state), so
       the old solid `.active` treatment serves as the hover/keyboard-focus
       state. :focus-visible matches so keyboard users get the same cue (the
       global slate ring from the TYPOGRAPHY section still draws on top). */
    &:hover,
    &:focus-visible {
      background-color: var(--pill-active-bg);
      border-color: var(--pill-active-bg);
      color: var(--melp-white);
      text-decoration: none;
    }

    /* People - charcoal/slate */
    &[data-entity_type="PERSON"] {
      --pill-icon-bg: var(--melp-pill-people-icon);
      --pill-hover-bg: var(--melp-pill-people-hover);
      --pill-active-bg: var(--melp-pill-people-active);
    }

    /* Places - gold/amber */
    &[data-entity_type="PLACE"] {
      --pill-icon-bg: var(--melp-pill-places-icon);
      --pill-hover-bg: var(--melp-pill-places-hover);
      --pill-active-bg: var(--melp-pill-places-active);
    }

    /* Works - rust/terracotta */
    &[data-entity_type="WORK"] {
      --pill-icon-bg: var(--melp-pill-works-icon);
      --pill-hover-bg: var(--melp-pill-works-hover);
      --pill-active-bg: var(--melp-pill-works-active);
    }

    /* Date - olive/sage */
    &[data-entity_type="DATE"] {
      --pill-icon-bg: var(--melp-pill-date-icon);
      --pill-hover-bg: var(--melp-pill-date-hover);
      --pill-active-bg: var(--melp-pill-date-active);
    }

    /* Repository - gray-green */
    &[data-entity_type="ORG"] {
      --pill-icon-bg: var(--melp-pill-repo-icon);
      --pill-hover-bg: var(--melp-pill-repo-hover);
      --pill-active-bg: var(--melp-pill-repo-active);
    }
  }
}


/* ==========================================================================
   NAV-SEARCH
   Nav search field.
   ========================================================================== */

/**
 * @file
 * Nav Search Component Styles (mobile-first).
 *
 * These rules style the homepage nav search. The non-homepage variant
 * (`#nav-container:not(.homepage):not(.search) #nav-search-bar`) lives in
 * the GLOBAL section and wins by specificity on content pages.
 */


#nav-search {
  /* mobile: the search bar should fill the row;
     tablet/desktop: shrink back to its intrinsic width. */
  width: 100%;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;

  @media (min-width: 800px) {
    width: auto;
  }
}

#nav-search-bar {
  width: 70%;       /* mobile (relative) */
  height: 40px;
  border-radius: 4px 0 0 4px;
  font-family: var(--melp-font-body);
  font-size: var(--fs-p);
  padding-left: 24px;

  &::placeholder {
    color: var(--melp-placeholder);
    font-family: var(--melp-font-body);
    font-style: italic;
  }

  @media (min-width: 800px) { width: 150px; }
  @media (min-width: 1120px) { width: 696px; }
}

#nav-search-button {
  /* mobile: 30% of the row, no extra padding.
     tablet: shrink to label width with a small inset.
     desktop: fixed 120px wide back to the original sizing. */
  width: 30%;
  height: 40px;
  padding: 0;
  color: var(--melp-text);
  font-family: var(--melp-font-body);
  font-size: var(--fs-psmall);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.78px;
  text-transform: uppercase;
  border-radius: 0 4px 4px 0;
  /* The slate slide-in fill comes from the base #nav-search-button rule in
     the GLOBAL section (slide-fill mixin) — only the text color changes here.
     transition must include background-position or it would override the
     mixin's and kill the slide. */
  transition: background-position 0.3s ease, color 0.2s;

  &:hover,
  &:focus-visible {
    color: var(--melp-white);
  }

  @media (min-width: 800px) {
    width: unset;
    padding: 8px;
    white-space: nowrap;
  }

  @media (min-width: 1120px) {
    width: 120px;
    padding: 0;
    white-space: normal;
  }
}


/* ==========================================================================
   START-HERE
   Start Here page.
   ========================================================================== */

/**
 * @file
 * Start Here & Project Updates Component Styles (mobile-first).
 */


/* Project Updates */
#project-updates-container {
  background-color: var(--melp-bg-light);
  padding-top: 0;
  margin-top: 80px;

  & h2 {
    /* mobile: full-row and left-aligned, flush with the cards below.
       tablet+: shrink to a fixed centered column. */
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 24px;
    text-align: left;

    /* The container is `display: flex; align-items: center`, which shrink-wraps
       this heading to its text width and centers the box — so `text-align: left`
       above does nothing on its own. Stretch it to the full row; the 35px inset
       sits on top of the container's 10px mobile gutter. */
    @media (max-width: 799px) {
      align-self: stretch;
      padding-left: 35px;
      padding-right: 0;
    }

    @media (min-width: 800px) {
      width: 1232px;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 0;
      padding-right: 0;
    }
  }
}

#project-updates-posts-and-subscribe {
  /* mobile: single-column, full-width with no padding of its own — the
     gutter comes from #project-updates-container (mobile-gutters rule in
     the GLOBAL section).
     desktop: side-by-side row, capped at 1232px and centered to match the h2
     above it. (Without an explicit width + auto margins, the flex parent lets
     the element fill its row at viewports just over 1120px.) */
  padding: 0;
  width: 100%;
  max-width: 100vw;
  flex-direction: column;
  z-index: 1;
  gap: 32px;

  @media (min-width: 1120px) {
    width: 1232px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
  }
}

#project-updates {
  /* mobile: items centered, container fills the width.
     desktop: stays a column but aligns items to the start; flexes to fill the
     row's remaining space alongside the fixed-width #subscribe column. */
  width: 100%;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--melp-bg-warm);
  border-radius: 6px;
  padding: 20px;
  gap: 10px;

  @media (min-width: 1120px) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    align-items: start;
  }
}

.project-update {
  border: none;
  border-radius: 0;
  background-color: transparent;
  width: 100%;
  height: auto;
  align-items: start;
  padding: 0;
  gap: 10px;

  & .project-update-description {
    font-family: var(--melp-font-body);
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-p);
    line-height: 160%;
    color: var(--melp-text-muted);
  }

  & .project-update-image-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  & .project-update-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & .project-read-more {
    color: var(--melp-gold-dark);
    border: 1px solid var(--melp-gold-dark);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    height: auto;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    align-self: flex-start;
    font-family: var(--melp-font-body);
    font-weight: 700;
    font-style: normal;
    font-size: var(--fs-psmall);
    line-height: 100%;
    letter-spacing: 0.78px;
    /* Hover fill slides in from the left (gold over transparent). */
    /* Hover fill sliding in from the left; retreats on un-hover. Double-width,
       hard-stop gradient whose background-position animates between halves.
       (Shared pattern — keep the four background declarations together.) */
    background-image: linear-gradient(to right, var(--melp-gold) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right top;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease, color 0.2s, border-color 0.2s;

    &:hover,
    &:focus-visible {
        background-position: left top;
    }

    &:hover,
    &:focus-visible {
      border-color: var(--melp-gold);
      color: var(--melp-text);
    }
  }
}

/* Subscribe / Ninja Form */
#subscribe {
  /* mobile: takes the full width of its column.
     desktop: fixed 394px column — paired with #project-updates {flex: 1} so
     project-updates absorbs the remaining row width until they stack on
     viewports below the desktop breakpoint. */
  width: 100%;
  border: 1px solid var(--melp-bg-warm);
  border-radius: 6px;
  padding: 28px;

  @media (min-width: 1120px) {
    flex: 0 0 394px;
    width: 394px;
  }
}

#subscribe .nf-form-cont {
  font-family: 'Public Sans', sans-serif;
}

#subscribe .nf-form-cont h3 {
  font-family: 'Libre Baskerville', serif !important;
  font-size: var(--fs-h3) !important;
  font-weight: 400 !important;
  color: #464B4D !important;
  line-height: 126% !important;
  margin: 0 0 10px 0 !important;
}

#subscribe .nf-form-cont p {
  font-family: 'Public Sans', sans-serif;
  font-size: var(--fs-psmall);
  font-weight: 400;
  color: var(--melp-text-muted);
  line-height: 150%;
  margin: 0;
}

#subscribe .nf-field-label label {
  font-family: 'Public Sans', sans-serif !important;
  font-size: var(--fs-psmall) !important;
  font-weight: 700 !important;
  color: var(--melp-text-muted) !important;
  line-height: 150% !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#subscribe .nf-field-element input[type="text"],
#subscribe .nf-field-element input[type="email"],
#subscribe .nf-field-element input[type="tel"],
#subscribe .nf-field-element textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #E9E5DC !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: var(--fs-p) !important;
  font-weight: 400 !important;
  color: #59696B !important;
  height: 35px !important;
  box-shadow: none !important;
}

#subscribe .nf-field-element input::placeholder {
  color: #59696B;
  font-style: italic;
}

#subscribe .nf-field-element .ninja-forms-field.nf-element {
  width: 100% !important;
}

#subscribe input[type="button"].ninja-forms-field,
#subscribe input[type="submit"].ninja-forms-field,
#subscribe button.ninja-forms-field[type="button"] {
  background-color: #CBBA69 !important;
  /* Hover fill slides in from the left (slate over gold); $important so
     Ninja Forms' own background rules can't outrank it. */
  /* Hover fill sliding in from the left; retreats on un-hover. Double-width,
     hard-stop gradient whose background-position animates between halves.
     (Shared pattern — keep the four background declarations together.) */
  background-image: linear-gradient(to right, #536E82 50%, #CBBA69 50%) !important;
  background-size: 200% 100% !important;
  background-position: right top !important;
  background-repeat: no-repeat !important;
  transition: background-position 0.3s ease, color 0.2s, border-color 0.2s;

  &:hover,
  &:focus-visible {
      background-position: left top !important;
  }
  color: #464B4D !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: var(--fs-psmall) !important;
  font-weight: 700 !important;
  letter-spacing: 0.78px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0 20px !important;
  height: 40px !important;
  cursor: pointer;
  position: relative;
  box-shadow: none !important;
}

#subscribe input[type="button"].ninja-forms-field:hover,
#subscribe input[type="submit"].ninja-forms-field:hover,
#subscribe button.ninja-forms-field[type="button"]:hover {
  color: var(--melp-white) !important;
}

/* Keyboard focus mirrors the hover state and adds the slate ring (visible
   on the cream card surface). `!important` matches the rules above so a
   Ninja Forms stylesheet can't outrank it. */
#subscribe input[type="button"].ninja-forms-field:focus-visible,
#subscribe input[type="submit"].ninja-forms-field:focus-visible,
#subscribe button.ninja-forms-field[type="button"]:focus-visible {
  color: var(--melp-white) !important;
  outline: 2px solid var(--melp-pill-people-hover) !important;
  outline-offset: 2px;
}

#subscribe .nf-form-fields-required {
  display: none;
}

#subscribe .nf-form-cont .one-half,
#subscribe .nf-form-cont .three-sixths,
#subscribe .nf-form-cont .two-fourths {
  width: 100% !important;
  margin: 0 !important;
  clear: both;
}

/* Start Here */
#start-here-container {
  position: relative;
  overflow: visible;
  background-color: var(--melp-bg-light);
  /* The ::before floral motif is 85px tall and anchored top:0, left:0.
     Push the content below it (85px image + 40px breathing room). */
  padding-top: 125px;
  margin-top: 0;

  &::before {
    content: '';
    display: block;
    width: 182px;
    height: 85px;
    background-image: url('assets/images/footer_floral.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 auto 20px;
    position: absolute;
    left: 0;
    transform: rotate(180deg);
    top: 0;
  }

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -50%;
    width: 300px;
    height: 100%;
    background-image: url('assets/images/homepage_updates_bg.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
  }
}

/* #start-here-label is an <h2> — it otherwise has no overrides, so it uses the
   default H2 styling from the GLOBAL section.

   Mobile left-alignment needs `align-self`, not just `text-align`:
   #start-here-container is `display: flex; flex-direction: column;
   align-items: center` (WordPress block layout), which shrink-wraps every child
   to its content width and centers the resulting box. The heading box is only
   as wide as the words in it, so `text-align: left` has no room to take effect
   until the box is stretched to the full row. The 40px inset sits on top of the
   container's own 10px mobile gutter and matches #start-here-description below,
   so heading and description share a left edge. */
@media (max-width: 799px) {
  #start-here-label {
    align-self: stretch;
    text-align: left;
    padding-left: 40px;
  }
}

#start-here-description {
  /* mobile: larger, more line height, gutter padding to align with the card row.
     desktop: original 18px / 150% / no inset. */
  font-family: var(--melp-font-body);
  color: var(--melp-text-muted);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-h3);
  line-height: 32px;
  letter-spacing: 0;
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 30px;

  @media (min-width: 1120px) {
    font-size: var(--fs-plarge);
    line-height: 150%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Letter Carousel */
.letter-carousel {
  position: relative;
  z-index: 1;
}

.letter-carousel-viewport {
  position: relative;
  overflow: hidden;
  /* mobile: inset 20px each side; desktop: full bleed. */
  width: calc(100vw - 40px);

  @media (min-width: 1120px) {
    width: 100vw;
  }
}

.letter-carousel-slider {
  /* mobile: fixed height that pairs with the smaller thumbnail.
     desktop: height shrinks to fit content. */
  height: 370px;
  gap: 20px;
  will-change: transform;

  @media (min-width: 1120px) {
    height: auto;
  }
}

.letter-carousel-item {
  /* mobile: narrower card stacked column-wise (thumbnail on top, label below).
     desktop: wider card with the natural row layout from the GLOBAL section. */
  width: 330px;
  flex-shrink: 0;
  position: relative;
  flex-direction: column;

  @media (min-width: 1120px) {
    width: 385px;
  }

  & .letter-carousel-thumbnail-frame {
    /* mobile: cap the thumbnail height so the card fits the slider row;
       desktop: fixed 360px so the cards keep their tall portrait shape. */
    width: 100%;
    max-height: 240px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: relative;
    display: block;
    transition: transform 0.2s, box-shadow 0.2s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }

    @media (min-width: 1120px) {
      max-height: none;
      height: 360px;
      border-radius: 8px;
    }
  }

  & .letter-carousel-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.letter-carousel-label {
  font-family: 'Libre Baskerville', serif !important;
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h3) !important;
  line-height: 26px !important;
  letter-spacing: 0.01em;
  vertical-align: middle;
  color: var(--melp-text) !important;

  &:hover {
    text-decoration: underline;
    color: #587385 !important;
  }
}

/* Carousel arrow buttons */
.letter-carousel-arrow {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
}

.letter-carousel-arrow:hover {
  opacity: 0.9;
}

.letter-carousel-arrow-next {
  right: 0;
  justify-content: flex-end;
  padding-right: 10px;
  background: linear-gradient(89.99deg, rgba(255, 255, 255, 0) -6.91%, rgba(255, 255, 255, 0.9) 99.99%);
}

.letter-carousel-arrow-next::after {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  background: url('assets/images/slider-next.svg') center / contain no-repeat;
  flex-shrink: 0;
}

.letter-carousel-arrow-prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 10px;
  background: linear-gradient(270.01deg, rgba(255, 255, 255, 0) -6.91%, rgba(255, 255, 255, 0.9) 99.99%);
}

.letter-carousel-arrow-prev::after {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  background: url('assets/images/slider-next.svg') center / contain no-repeat;
  flex-shrink: 0;
  transform: rotate(180deg);
}

/* Pagination dots */
.letter-carousel-pager {
  margin-top: 20px;
  justify-content: center;
  margin-left: 0;
  display: flex;
  gap: 16px;

  &.hidden {
    display: none;
  }
}

.letter-carousel-dot {
  /* 12×12 dot buttons, 16px apart (pager gap). */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;

  &::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(88, 115, 133, 0.35); /* #587385 @ 35% — inactive */
    transition: background-color 0.2s, opacity 0.2s;
  }

  &:hover:not(.active)::before {
    background-color: var(--melp-pager-active);
    opacity: 0.6;
  }

  &.active::before {
    background-color: var(--melp-pager-active);
  }
}


/* ==========================================================================
   TOPIC-INDEX
   Topic index page.
   ========================================================================== */

/**
 * @file
 * Topic Index page styles (mobile-first).
 *
 * Reuses the existing `.adv-search-page-link` button class from the GLOBAL section
 * for the pager — only the container layout is local to this partial.
 */


#topic-index-container {
  width: 100%;
  padding: 90px max(calc((100vw - 1232px) / 2), 7.5vw) 0;
  margin-bottom: 60px;
  /* Same floral ornament as the letter viewer
     (#advanced-search-container.letter-viewer-container::before). */
  position: relative;

  &::before {
    content: '';
    display: block;
    width: 182px;
    height: 85px;
    background-image: url('assets/images/footer_floral.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
  }
}

#topic-index-header {
  margin: 0 0 24px;

  /* The h1 (#topic-index-title) doubles as the type indicator — JS swaps in
     the active type label and sets `color` inline to the matching
     --melp-pill-{type}-active token. The old separate subtitle is gone. */
  & h1 {
    margin: 0;
  }
}

#topic-index-meta-bar {
  /* Mirrors the spacing/structure of #adv-search-results-meta-bar without
     borrowing its sticky positioning — this page's meta bar sits inline above
     the list. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light-color);
  font-family: var(--default-text-font);
  font-size: var(--fs-p);
  color: var(--text-label-color);

  & select {
    border-radius: 4px;
    border: 1px solid var(--border-result-color);
    /* Custom chevron so the arrow gets real breathing room — the native
       one hugs the right edge. Inset 12px to match the text padding; the
       36px right padding keeps option text clear of it. */
    appearance: none;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2359696B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    padding: 8px 36px 8px 12px;
    color: var(--text-label-color);
    font-family: var(--default-text-font);
    font-size: var(--fs-p);
    min-width: 186px;
  }
}

#topic-index-count-bar {
  color: var(--color-neutrals-Grey-1, #677779);
  /* p */
  font-family: "Public Sans", sans-serif;
  font-size: var(--fs-p);
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
}

#topic-index-results {
  display: flex;
  flex-direction: column;
}

.topic-index-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-result-color);
  color: var(--heading-text-color);
  text-decoration: none;
  transition: background-color 0.15s;

  &:hover,
  &:focus-visible {
    background-color: var(--melp-bg-light);
    color: #00558C;
    /* .topic-index-name reads var(--heading-text-color) — re-point the
       token so the title follows the link blue (same pattern as
       .adv-search-result a:hover). */
    --heading-text-color: #00558C;
    text-decoration: underline;

    & .topic-index-count-badge {
      border-color: var(--accent-bar-color);
      color: var(--accent-bar-color);
    }
  }

  /* Keyboard focus sits proud of the row separator so it reads as a
     distinct ring without overlapping the next row's border. The global
     :focus-visible in the TYPOGRAPHY section supplies the 2 px slate outline;
     extending the offset here keeps it tidy against the row padding. */
  &:focus-visible {
    outline-offset: -2px;
  }
}

.topic-index-name {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 26px;
  color: var(--heading-text-color);
  min-width: 0;
}

.topic-index-count-badge {
  /* Matches the bordered "12" pill from the Figma `Link` frame. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 3px 10px;
  border: 1px solid var(--color-neutrals-Tobacco, #C3C0B8);
  border-radius: 4px;
  background: var(--color-neutrals-Ivory, #E9E5DC);
  color: var(--text-label-color);
  font-family: var(--default-text-font);
  font-size: var(--fs-p);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.39px;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

#topic-index-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  margin-bottom: 24px;

  &:empty {
    display: none;
  }

  /* Pager buttons now use the real `disabled` attribute (set by
     TopicIndex.render_pagination) alongside the legacy `.disabled`
     class. Style both the same so the visual stays consistent during
     the transition. `disabled` also removes the button from tab order
     and announces as unavailable to assistive tech. */
  & .adv-search-page-link[disabled],
  & .adv-search-page-link.disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* `aria-current="page"` is the AT-readable mirror of `.active` — keep
     the styles in lockstep so the visual cue and AT announcement agree
     on which page is current. */
  & .adv-search-page-link[aria-current="page"] {
    background-color: var(--melp-pager-active);
    color: #FFFFFF;
  }
}


/* ==========================================================================
   ALERT-BANNER
   Site alert banner.
   ========================================================================== */

/**
 * @file
 * Alert Banner Component Styles.
 *
 * Uses native CSS nesting and variables from style.css.
 */

#announcement-banner {
  background-color: var(--melp-text);
  color: var(--melp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  &::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('assets/images/alert_icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }

  & * {
    color: var(--melp-white);
  }
}


/* ==========================================================================
   ABOUT
   About page.
   ========================================================================== */

/**
 * @file
 * About page section styles (mobile-first).
 *
 * Matches the Figma "About" frame (node 2619-763). Each section is a
 * full-bleed band — the background color sits on .about-section while
 * .about-section-inner caps the content at 1034px (Figma's content width)
 * and centers it. Backgrounds alternate per the design:
 *   - hero / Maria / Editorial / Team .... #FEFCF7 (page bg, no own fill)
 *   - Project Introduction / Glossary .... #E9E5DC (--melp-bg-warm)
 *   - Editorial Statement card ........... #EAE1B8 (pale gold, 4px radius)
 *
 * Text colors per Figma:
 *   - headings ........................... #464B4D (--melp-text)
 *   - Maria / Team body .................. #596668 (--melp-text-muted)
 *   - Intro / Glossary body .............. #59696B
 *   - Editorial card body ................ #464B4D (darker than other body)
 *   - inline links ....................... #00558C underlined
 */


.about-section {
  width: 100%;
  padding: 48px 20px;

  @media (min-width: 800px) {
    padding: 64px 40px;
  }
}

.about-section--warm {
  background-color: var(--melp-bg-warm); /* #E9E5DC */
}

/* The content groups declare WP flex/grid layouts (classic themes wrap any
   other layout type in a legacy .wp-block-group__inner-container div, which
   breaks direct-child selectors). WP then emits its own gap/align-items for
   those layouts as inline styles — the `.about-section >` prefix outranks
   them so the values below always win. */
.about-section > .about-section-inner {
  width: 100%;
  max-width: 1034px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;

  & > h2 {
    color: var(--melp-text); /* #464B4D */
    margin-bottom: 24px;
  }

  & > h3 {
    color: var(--melp-text);
    margin-top: 32px;
    margin-bottom: 12px;
  }

  a {
    color: #00558C;
    text-decoration: underline;

    &:hover {
      color: var(--melp-gold-dark); /* #857217 — same dark gold as the buttons */
      text-decoration: none;
    }
  }
}

/* --- Hero ------------------------------------------------------------- */

.about-hero {
  /* Figma: 64px 203px 48px — top-heavy, body capped at 800px. */
  padding-bottom: 32px;
  /* Same floral ornament as the letter viewer
     (#advanced-search-container.letter-viewer-container::before). */
  position: relative;
  padding-top: 124px;

  &::before {
    content: '';
    display: block;
    width: 182px;
    height: 85px;
    background-image: url('assets/images/footer_floral.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
  }

  @media (min-width: 800px) {
    padding-bottom: 48px;
  }

  h1 {
    font-family: 'Libre Baskerville', serif !important;
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 1.33;
    letter-spacing: 0.01em;
    color: var(--melp-text);
    margin-bottom: 12px;

    /* --fs-h1 already covers the old 30→38px step; only line-height changes. */
    @media (min-width: 800px) {
      line-height: 50.4px;
    }
  }

  p {
    max-width: 800px;
    color: var(--melp-text-muted); /* #596668 */
  }
}

/* --- Maria Edgeworth --------------------------------------------------- */

.about-maria {
  padding-top: 0;

  p {
    color: var(--melp-text-muted);
  }

  .wp-block-media-text {
    gap: 24px;

    @media (min-width: 800px) {
      gap: 48px; /* Figma row gap between portrait and text column */
    }
  }

  .wp-block-media-text__content {
    padding: 0;

    p + p {
      margin-top: 16px;
    }
  }
}

/* --- Editorial Statement ----------------------------------------------- */

.about-editorial {
  padding-top: 0;
}

.about-section .about-editorial-card {
  background-color: #EAE1B8; /* Figma pale-gold card */
  border-radius: 4px;
  padding: 30px;
  display: block; /* override WP flex layout so the 14px margins control spacing */

  h2 {
    color: var(--melp-text);
    margin-bottom: 14px;
  }

  p {
    color: var(--melp-text); /* darker body than the other sections */

    & + p {
      margin-top: 14px;
    }
  }
}

/* The page body renders without page-identifying classes, and melp.js's
   ensure_main_landmark() moves the sections into <main> while #footer-container
   stays a body-level sibling — so the About page is detected via :has() on the
   main landmark. The Glossary band sits directly above the footer — both are
   warm (#E9E5DC), so the global 60px footer margin (the FOOTER section) would show
   a cream stripe between them. */
main:has(.about-section) + #footer-container,
.about-section ~ #footer-container {
  margin-top: 0;
}

/* --- Project Introduction & Glossary (warm bands) ---------------------- */

.about-intro,
.about-glossary {
  p,
  li {
    color: #59696B;
  }

  li + li {
    margin-top: 12px;
  }
}

/* --- Project Team ------------------------------------------------------ */

.about-team {
  p {
    color: var(--melp-text-muted);
  }

  /* Second h2 ("Current Research Assistants") separates two grid blocks —
     Figma uses a 100px block gap. */
  .about-section-inner > h2:not(:first-child) {
    margin-top: 64px;

    @media (min-width: 800px) {
      margin-top: 100px;
    }
  }

  .about-section-inner > h3 {
    margin-top: 64px;

    @media (min-width: 800px) {
      margin-top: 100px;
    }
  }
}

.about-section .about-team-grid {
  display: grid;
  /* mobile: two-up; tablet+: as many 200px-min columns as fit. */
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  justify-items: center;
  margin-top: 32px;

  @media (min-width: 800px) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.about-team-grid > .about-team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  max-width: 240px;

  .wp-block-image {
    margin-bottom: 12px;
    width: 100%;

    img {
      /* Scales down inside the narrower two-up mobile cells; full 200px
         circle from tablet up. */
      width: 100%;
      max-width: 200px;
      aspect-ratio: 1 / 1;
      height: auto;
      object-fit: cover;
      border-radius: 50%;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1); /* Figma avatar shadow */
    }
  }

  h3 {
    font-size: var(--fs-plarge);
    line-height: 27px;
    color: var(--melp-text);
    margin: 0;
  }

  p {
    font-size: var(--fs-psmall);
    line-height: 21px;
    color: var(--melp-text-muted);
    margin: 0;
  }
}