/* ==========================================================================
   Canadian Aerophilatelic Society — index.html styles
   Source: Figma "7 -> DEV Templates (SHARED)" file, node 4320-7323
   Design canvas: 1440px wide

   NOTE: This file is intentionally kept flat (not split into partials) since
   it's still being built against a single template. When we add more
   templates, this gets split into SCSS partials (tokens, base, header,
   sections, footer, etc.) and imported through a single main.scss.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — colors, type styles, effects (from Figma Dev Mode export)
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-onyx: rgba(43, 43, 43, 1);
  --color-stone: rgba(194, 191, 182, 1);
  --color-stone-light: rgba(212, 209, 200, 1);
  --color-fog: rgba(241, 241, 238, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-burnt-orange: rgba(190, 81, 3, 1);
  --color-clay: rgba(191, 128, 93, 1);
  --color-moss: rgba(187, 183, 145, 1);
  --color-graphite: rgba(82, 82, 82, 1);
  --color-sand: rgba(213, 197, 138, 1);
  --color-gold: rgba(239, 208, 130, 1);
  --color-gold-hover: rgba(229, 198, 118, 1);
  --color-kids-sky: rgba(163, 200, 216, 1);
  --color-kids-sky-hover: rgba(152, 191, 208, 1);
  --color-kids-orange: rgba(240, 165, 119, 1);
  --color-kids-orange-hover: rgba(234, 149, 98, 1);
  --color-royal: rgba(78, 97, 246, 1);
  --color-royal-bg: rgba(237, 239, 254, 1);
  --color-purple: rgba(151, 71, 255, 1);

  /* Fonts */
  --font-sans: "Plus Jakarta Sans", sans-serif;
  --font-serif: "Lora", serif;

  /* Effects */
  --shadow-menu: 0px 0px 15px 5px rgba(0, 0, 0, 0.08);

  /* Layout */
  --container-max: 1440px;
  --container-padding: 80px;
}

/* --------------------------------------------------------------------------
   2. TYPE STYLES — matches Figma text style mixins 1:1
   -------------------------------------------------------------------------- */

/* Headings — Lora */
.text-h1 {
  font: 400 60px/62px var(--font-serif);
  text-transform: uppercase;
  /* Safety net so a single long word (e.g. "Aerophilatelist,"
     "Publications") can never push past the edge of a narrow screen and
     get visually cut off — wraps mid-word only as a last resort, after
     normal word-boundary wrapping has already failed to fit. */
  overflow-wrap: break-word;
}
.text-h2 {
  font: 400 50px/58px var(--font-serif);
}
.text-h3 {
  font: 400 38px/44px var(--font-serif);
}
.text-h3-underline {
  font: 400 38px/44px var(--font-serif);
  text-decoration: underline;
}
.text-h4 {
  font: 400 28px/32px var(--font-serif);
}
.text-h5 {
  font: 400 24px/32px var(--font-serif);
}

/* Body — Plus Jakarta Sans */
.text-b1-large {
  font: 500 22px/32px var(--font-sans);
  letter-spacing: 0.04em;
}
.text-b2-medium {
  font: 500 20px/28px var(--font-sans);
  letter-spacing: 0.04em;
}
.text-b3-small-xheavy {
  font: 600 18px/26px var(--font-sans);
  letter-spacing: 0.04em;
}
.text-b4-small-heavy {
  font: 500 18px/26px var(--font-sans);
  letter-spacing: 0.04em;
}
.text-b4-1-small-heavy-italic {
  font: italic 500 18px/26px var(--font-sans);
  letter-spacing: 0.04em;
}
.text-b5-small {
  font: 400 18px/26px var(--font-sans);
  letter-spacing: 0.04em;
}
.text-b6-small-longtext {
  font: 500 18px/30px var(--font-sans);
  letter-spacing: 0.04em;
}

/* Actions */
.text-link {
  font: 600 18px/24px var(--font-sans);
  letter-spacing: 0.04em;
}
.text-link-underline {
  font: 600 18px/24px var(--font-sans);
  letter-spacing: 0.04em;
  text-decoration: underline;
}
.text-main-menu {
  font: 600 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
}
.text-main-menu:hover {
  text-decoration: underline;
}
.text-button {
  font: 600 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
}
.text-dropdown-desc {
  font: 400 16px/26px var(--font-sans);
  letter-spacing: 0.03em;
}
.text-compact-menu {
  font: 500 30px/32px var(--font-sans);
  letter-spacing: 0.03em;
}
.text-spec-title {
  font: 700 30px/58px var(--font-sans);
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-onyx);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* The Image block wraps every image in a <figure>, and browsers give
   <figure> a default margin of 1em 40px on all sides — that's the source
   of the "images look indented/tabbed in" issue on the homepage's native
   blocks (Kids Zone cards, Journal cover, Become a Member/Discover CTA
   photos, etc.). Zero it out globally; each image's own specific margin
   rule further down this file (e.g. margin-bottom on the journal cover)
   still applies on top of this and continues to work exactly as before. */
.wp-block-image {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 55px;
  padding: 10px 20px;
  border-radius: 5px;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-onyx);
  color: var(--color-white);
}
.btn--gold {
  background: var(--color-gold);
  color: var(--color-onyx);
}
.btn--gold:hover {
  background: var(--color-gold-hover);
}
.btn--dark {
  background: var(--color-onyx);
  color: var(--color-white);
}
/* Figma "Button" component, outline variant — transparent fill, 1px white
   border, used for Member Login in the header (sits on the dark nav). */
.btn--outline-light {
  background: none;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}
/* Kids Zone card buttons — accent color matches each card's image backdrop */
.btn--kids-orange {
  background: var(--color-kids-orange);
  color: var(--color-onyx);
}
.btn--kids-orange:hover {
  background: var(--color-kids-orange-hover);
}
.btn--kids-sky {
  background: var(--color-kids-sky);
  color: var(--color-onyx);
}
.btn--kids-sky:hover {
  background: var(--color-kids-sky-hover);
}

.section {
  padding-block: 80px;
}
.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
}

/* Real icon assets exported from Figma. Some icons ship with dark strokes
   only (meant to sit on light surfaces); icon-invert flips them to white
   for use on dark/onyx surfaces via CSS filter since <img> can't take
   currentColor the way inline SVG can. */
.icon-invert {
  filter: invert(1);
}
.icon-arrow-wrap {
  display: inline-flex;
  align-items: center;
}
.icon-arrow {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   4. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 117px;
  background: var(--color-white);
}
/* Black bleeds past the 1440 content box to the true right edge on wide
   screens, so there's never a white gap between the panel and the viewport
   edge. Width = design's 480px + half of whatever overflows past 1440. */
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(520px + max(0px, (100% - 1440px) / 2));
  background: var(--color-onyx);
  z-index: 0;
}
.site-header__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 520px;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
.site-header__left {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-white);
  padding-left: 80px;
  padding-right: 24px;
  min-width: 0;
}
.site-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  background: var(--color-onyx);
  color: var(--color-white);
  padding-left: 24px;
  padding-right: 60px;
}
.site-header__contact {
  color: var(--color-white);
  /* Was a plain <a>; now a <button> that opens the Contact modal, so it
     needs the usual button-reset properties to keep looking like inline
     text rather than a default browser button. Font is intentionally
     NOT reset here — .text-main-menu (already on this element) sets the
     correct 600-weight nav font, and a "font: inherit" here would win
     the cascade (same specificity, declared later) and silently strip
     that bold weight back down to a plain button's default font. */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.site-header__search {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}
.btn--light {
  background: var(--color-white);
  color: var(--color-onyx);
}
.main-nav {
  flex: 1;
}
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav__link {
  color: var(--color-onyx);
  padding: 8px 10px;
}
.main-nav__item--has-menu {
  /* Intentionally not positioned — .about-menu below needs its containing
     block to be .site-header__inner (the full 1440px header row), not this
     individual nav item, so every mega-menu opens centered under the whole
     nav regardless of which trigger (even one near the right edge, like
     Kids) is clicked. See .about-menu comment. */
}
.main-nav__trigger {
  padding: 8px 10px;
  border-radius: 999px;
}
.main-nav__trigger[aria-expanded="true"] {
  background: var(--color-fog);
  text-decoration: underline;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* About mega-menu — every panel (About, Publications, Resources, Events,
   Membership, Kids) is centered under the full header row rather than
   anchored to its own trigger button. Since .main-nav__item--has-menu is no
   longer position:relative, this position:absolute resolves against
   .site-header__inner (the nearest positioned ancestor, 1440px wide, full
   header height) — so it's always centered under the nav and never clips
   off the right edge, even for a trigger like Kids near the end of the row. */
.about-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--shadow-menu);
  padding: 40px;
  z-index: 50;
}
.about-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--color-onyx);
}
.about-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 48px;
}
.about-menu__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about-menu__title {
  display: block;
  margin-bottom: 8px;
  color: var(--color-onyx);
}
/* Every mega-menu item underlines and reveals its arrow on hover — this
   used to be hardcoded onto whichever item happened to be listed first
   (a static "featured" look, not a hover state at all), which is why only
   one item per dropdown ever showed it. The arrow markup is now always
   present in the DOM (see header.php) but hidden until hover/focus. */
.about-menu__title:hover,
.about-menu__title:focus-visible,
.about-menu__title--contact:hover,
.about-menu__title--contact:focus-visible {
  text-decoration: underline;
}
.about-menu__title .icon-arrow-wrap {
  opacity: 0;
  margin-left: 4px;
  transition: opacity 0.15s ease;
}
.about-menu__title:hover .icon-arrow-wrap,
.about-menu__title:focus-visible .icon-arrow-wrap {
  opacity: 1;
}
/* Contact Us swaps its <a> for a <button data-contact-toggle> (opens the
   Contact modal instead of navigating) — reset it to look identical to
   its sibling links. See cas_theme_is_contact_url() in functions.php.
   IMPORTANT: only reset font-family here, not the full "font" shorthand —
   "font: inherit" also resets weight/size/line-height, which silently
   overrode the bold weight this button should share with its sibling
   links (.text-b3-small-xheavy) purely because this rule happens to be
   declared later in the stylesheet. This is exactly what made "Contact
   Us" appear non-bold. */
.about-menu__title--contact {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.about-menu__desc {
  color: var(--color-graphite);
}
.about-menu__image {
  width: 250px;
  /* Grid items stretch to the row's height by default, which is normally
     enough — but a very short text column (e.g. Kids' intro line) could
     otherwise squeeze this down close to nothing regardless of what size
     photo was uploaded. A min-height keeps the photo panel a sensible
     size no matter what; object-fit: cover on the image below means any
     uploaded photo, at any dimensions/aspect ratio, always fills this
     box without stretching or distorting. */
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-stone);
}
.about-menu__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Membership menu: extra "Go to my account" link below the grid */
.about-menu__account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}
.about-menu__account-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-onyx);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Kids menu: intro heading instead of a plain grid column (the nav trigger
   itself is plain text, same as every other nav item — no pill badge) */
.about-menu__grid--kids {
  grid-template-columns: 1fr 1fr auto;
}
.about-menu__intro {
  display: flex;
  align-items: flex-start;
}
.about-menu__intro h3 {
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-white);
}
/* Same full-bleed trick as the header: black extends past the 1440 content
   box to the true right edge on screens wider than the design. */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(520px + max(0px, (100% - 1440px) / 2));
  background: var(--color-onyx);
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 520px;
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero__left {
  background: var(--color-white);
}
.hero__left-inner {
  max-width: 800px;
  padding: 80px var(--container-padding) 80px 80px;
}
.hero__right {
  background: var(--color-onyx);
  color: var(--color-white);
}
.hero__right-inner {
  padding: 80px 60px;
}

.hero__heading {
  color: var(--color-onyx);
  margin: 0 0 24px;
}
.hero__intro {
  /* No max-width of its own — previously capped at 520px, narrower than
     the heading/image/search box above and below it, which is what made
     the whole left column look inconsistently narrow against the Figma
     spec (everything sitting in ~800px). Now it just fills whatever
     width .hero__left-inner (800px) allows, same as everything else. */
  color: var(--color-graphite);
  margin: 0 0 32px;
}
.hero__stamp-image {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-sand);
  margin-bottom: 64px;
}
.hero__stamp-image img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.hero__search,
.research-discover,
.explore-theme {
  padding-top: 56px;
  border-top: 1px solid var(--color-stone-light);
  margin-top: 56px;
}
.research-discover {
  padding-top: 40px;
  margin-top: 24px;
}
.hero__search-sub {
  color: var(--color-graphite);
  margin: 8px 0 24px;
}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tabs__item {
  height: 40px;
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  background: var(--color-fog);
  color: var(--color-graphite);
  font: 600 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
}
.tabs__item.is-active {
  background: var(--color-sand);
  color: var(--color-onyx);
}
/* Journals/Monographs/Exhibits/Presentations on the homepage's "Search
   the CAS Archives" widget aren't wired to real filtering yet (only "All"
   is) — dimmed and unclickable rather than removed, so the full intended
   tab set still shows while that's pending. */
.tabs__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-onyx);
  border-radius: 5px;
  padding: 20px 20px 20px 24px;
}
.search-box__cursor {
  width: 2px;
  height: 28px;
  background: var(--color-white);
  flex-shrink: 0;
}
.search-box__input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  color: var(--color-white);
}
.search-box__input::placeholder {
  color: var(--color-white);
  opacity: 1;
}
.search-box__submit {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-force-white {
  filter: brightness(0) invert(1);
}

.research-discover__cards {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-onyx);
  margin-top: 24px;
}
.index-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-onyx);
  color: var(--color-onyx);
}
.index-row:last-child {
  border-bottom: none;
}
.index-row__text h3 {
  margin: 0 0 8px;
}
.index-row__text p {
  margin: 0;
  color: var(--color-onyx);
}
.icon-arrow-circle {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--color-onyx);
  display: flex;
  align-items: center;
  justify-content: center;
}

.explore-theme__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-top: 24px;
}
.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 54px;
  padding: 12px 30px 12px 25px;
  border-radius: 0px;
  background: var(--color-fog);
  color: var(--color-onyx);
}

/* Hero right column */
.hero__join-heading {
  margin: 0 0 16px;
}
.hero__join-copy {
  color: var(--color-stone-light);
  margin: 0 0 24px;
  max-width: 380px;
}
.hero__collage {
  position: relative;
  margin-top: 40px;
}
.hero__collage img {
  width: 100%;
  height: 565px;
  object-fit: cover;
  border-radius: 20px;
  background: var(--color-graphite);
}
.hero__collage-cta {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-burnt-orange);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Native WordPress block compatibility (Homepage Hero + Join Panel)
   -------------------------------------------------------------------------- */
/* These two sections are edited in-context as plain core WordPress blocks
   (Heading, Paragraph, Image, Buttons) wrapped in a Group block — no
   plugin required. Each block already carries the theme's real classes
   (hero__heading, hero__intro, etc.) via "Additional CSS class(es)", so
   most styling above just works. The rules below only exist to (a)
   neutralize WordPress core's own default block spacing so it can't
   fight our margins, at higher specificity than a same-source-order tie
   would give us, and (b) restyle the Buttons block's extra wrapper
   markup and rebuild the two decorative icons (the button's arrow, the
   collage photo's corner badge) that had no natural home in plain block
   markup. */
.cas-hero-group,
.cas-join-group,
.cas-journal-group,
.cas-kidszone-group,
.cas-becomemember-group,
.cas-discovercta-group {
  margin: 0;
  padding: 0;
}
.cas-hero-group .hero__heading {
  margin: 0 0 24px;
}
.cas-join-group .hero__join-heading {
  margin: 0 0 16px;
}
.cas-hero-group .hero__intro {
  margin: 0 0 32px;
}
.cas-join-group .hero__join-copy {
  margin: 0 0 24px;
}
.cas-hero-group .hero__stamp-image {
  margin: 0 0 64px;
}
.cas-join-group .hero__collage {
  margin: 40px 0 0;
}
.cas-join-group .wp-block-buttons {
  margin: 0 0 24px;
}
.cas-journal-group .wp-block-buttons,
.cas-kidszone-group .wp-block-buttons,
.cas-becomemember-group .wp-block-buttons,
.cas-discovercta-group .wp-block-buttons {
  margin: 0;
}
/* The Buttons block's "Additional CSS class(es)" field applies to the
   OUTER wrapping <div class="wp-block-button">, not the inner <a> — but
   .btn/.btn--light/etc. were written for a single <a> element (the site's
   original, non-block button markup). Left alone, BOTH the outer div and
   the inner link end up "boxed" (each gets its own height/padding/
   background from .btn + the variant color class), producing two visibly
   overlapping button-shaped boxes. Cancel the generic box styling on the
   wrapper specifically, so only the actual link — styled by the
   .wp-block-button__link rules below — looks like a button. */
.wp-block-button.btn {
  display: block;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
}
/* The Buttons block wraps its link in an extra <div class="wp-block-button">
   — apply our .btn/.btn--light/.text-button styling to the actual <a>
   (.wp-block-button__link) inside it, since that's the element the client
   actually clicks. Generalized across every homepage section that now uses
   a native block Button (Join, Journal, each Kids Zone card, Become a
   Member, Discover CTA). */
.cas-join-group .wp-block-button.btn .wp-block-button__link,
.cas-journal-group .wp-block-button.btn .wp-block-button__link,
.cas-kidszone-group .wp-block-button.btn .wp-block-button__link,
.cas-becomemember-group .wp-block-button.btn .wp-block-button__link,
.cas-discovercta-group .wp-block-button.btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 55px;
  padding: 10px 20px;
  border-radius: 5px;
  white-space: nowrap;
  font: 600 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
}
.cas-join-group .wp-block-button.btn--light .wp-block-button__link,
.cas-journal-group .wp-block-button.btn--light .wp-block-button__link {
  background: var(--color-white);
  color: var(--color-onyx);
}
.cas-becomemember-group .wp-block-button.btn--gold .wp-block-button__link {
  background: var(--color-gold);
  color: var(--color-onyx);
}
.cas-becomemember-group .wp-block-button.btn--gold .wp-block-button__link:hover {
  background: var(--color-gold-hover);
}
.cas-discovercta-group .wp-block-button.btn--dark .wp-block-button__link {
  background: var(--color-onyx);
  color: var(--color-white);
}
.cas-kidszone-group .wp-block-button.btn--kids-sky .wp-block-button__link {
  background: var(--color-kids-sky);
  color: var(--color-onyx);
}
.cas-kidszone-group .wp-block-button.btn--kids-sky .wp-block-button__link:hover {
  background: var(--color-kids-sky-hover);
}
.cas-kidszone-group .wp-block-button.btn--kids-orange .wp-block-button__link {
  background: var(--color-kids-orange);
  color: var(--color-onyx);
}
.cas-kidszone-group .wp-block-button.btn--kids-orange .wp-block-button__link:hover {
  background: var(--color-kids-orange-hover);
}
/* Replicates the little arrow icon that used to sit inside the button's
   markup — added purely via CSS since the Buttons block doesn't have a
   slot for extra inline content next to its label. */
.cas-join-group .wp-block-button.btn .wp-block-button__link::after,
.cas-journal-group .wp-block-button.btn .wp-block-button__link::after,
.cas-kidszone-group .wp-block-button.btn .wp-block-button__link::after,
.cas-becomemember-group .wp-block-button.btn .wp-block-button__link::after,
.cas-discovercta-group .wp-block-button.btn .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("../images/icon_arrow_small.svg") no-repeat center / contain;
}
/* The Discover button sits on the dark/onyx surface, so its arrow needs to
   be flipped to white — same treatment as .icon-invert on the old <img>
   version of this icon. */
.cas-discovercta-group .wp-block-button.btn--dark .wp-block-button__link::after {
  filter: invert(1);
}
/* Replicates the decorative "view collection" badge that used to be a
   separate (non-functional) button layered over the collage photo. */
.cas-join-group .hero__collage::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-burnt-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 14L14 4M14 4H6M14 4V12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
/* The Journal cover image now goes through the Image block, which puts our
   class on the <figure> wrapper instead of directly on the <img> — the base
   .hero__journal-cover rule below still sizes the figure box; this adds the
   overflow clip + object-fit onto the actual <img> inside it. */
.cas-journal-group .hero__journal-cover {
  overflow: hidden;
}
.cas-journal-group .hero__journal-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Found the actual cause by inspecting the live site's real DOM: WordPress
   auto-inserts an extra <div class="wp-block-group__inner-container">
   between a Group block and its real children whenever the block's
   "layout" support is active (which it always is for core/group, even
   though we never set a layout attribute ourselves). That wrapper becomes
   the grid container's ONLY direct child, so `display: grid` was applying
   correctly, just to a box with one item in it — the real cards/columns
   were one level deeper, stacking normally inside that wrapper. Targeting
   both the group itself AND that inner wrapper (harmless either way,
   since a version of WordPress that *doesn't* inject the wrapper just
   won't match the second selector) fixes it regardless of which level
   actually holds the children. */
/* IMPORTANT: only the INNER wrapper gets display:grid — the outer element
   (.kids-zone__grid etc.) already gets `display: grid` from its own base
   rule further down this file (unscoped, so it also has to serve the
   fallback markup, which has no inner wrapper and needs grid directly).
   In block mode that base rule still matches the outer div too, and with
   only ONE actual child (the auto-inserted wrapper) a 3-column grid places
   that single child in column 1 and leaves columns 2–3 empty — squashing
   everything to a third of the width. Explicitly setting the outer back to
   `display: block` in block mode cancels that, so only the inner wrapper
   (which holds the real children) does the column layout. */
.cas-kidszone-group .kids-zone__grid {
  display: block !important;
}
.cas-kidszone-group .kids-zone__grid > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
}
.cas-becomemember-group.become-member__inner {
  display: block !important;
}
.cas-becomemember-group.become-member__inner > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px 64px;
}
.cas-discovercta-group.discover-cta__inner {
  display: block !important;
}
.cas-discovercta-group.discover-cta__inner > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px;
  align-items: center;
}
/* Same wrapper issue affects the nested Membership Benefits row. */
.cas-becomemember-group .benefits-list {
  display: block !important;
}
.cas-becomemember-group .benefits-list > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px 32px;
}
.cas-join-group .wp-block-buttons,
.cas-journal-group .wp-block-buttons,
.cas-kidszone-group .wp-block-buttons,
.cas-becomemember-group .wp-block-buttons,
.cas-discovercta-group .wp-block-buttons {
  margin-top: 0;
}

/* --- Research & Discover (native block group) --------------------------
   Same wp-block-group__inner-container wrapper issue as above — both
   .research-discover__cards (was display:flex column) and each .index-row
   (was display:flex, space-between) now only have that one auto-inserted
   wrapper as a direct child, so the flex properties move down a level. */
.cas-research-discover-group .research-discover__cards {
  display: block !important;
}
.cas-research-discover-group .research-discover__cards > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column;
}
.cas-research-discover-group .index-row {
  display: block !important;
}
.cas-research-discover-group .index-row > .wp-block-group__inner-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cas-research-discover-group .wp-block-buttons {
  margin: 0;
  flex-shrink: 0;
}
/* The row's link used to be the whole <a class="index-row"> — a native
   Button block can't wrap a heading+paragraph pair in an <a>, so instead
   the Button becomes the same small circular arrow that sat at the end of
   the row, styled and positioned identically to the old .icon-arrow-circle
   span; its own text (default "Learn more", editable) is visually hidden
   but stays in the accessible name for screen readers. */
.wp-block-button.icon-arrow-circle {
  display: block;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  flex-shrink: 0;
}
.wp-block-button.icon-arrow-circle .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--color-onyx);
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.wp-block-button.icon-arrow-circle .wp-block-button__link::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M6.17261 1L10.0001 5.5L6.17261 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5.5H1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wp-block-button.icon-arrow-circle .wp-block-button__link:focus-visible {
  outline: 2px solid var(--color-onyx);
  outline-offset: 3px;
}

.hero__journal {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero__journal > h3 {
  margin: 0 0 24px;
  color: var(--color-white);
}
.hero__journal-cover {
  width: 100%;
  height: 565px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 24px;
}
.hero__journal-issue {
  color: var(--color-white);
  margin: 0 0 12px;
}
.hero__journal-info p:not(.hero__journal-issue) {
  color: var(--color-white);
  margin: 0 0 16px;
}
/* Summary paragraph now carries its own explicit class (rather than relying
   on the .hero__journal-info wrapper above, which the block version drops)
   so it works the same whether rendered as a block or as the fallback. */
.hero__journal-summary {
  color: var(--color-white);
  margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
   6. FEATURED ARTICLES
   -------------------------------------------------------------------------- */
.featured-articles {
  background: var(--color-fog);
}
.featured-articles__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.article-card__image {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-stone);
  margin-bottom: 20px;
}
.article-card__image img {
  width: 100%;
  object-fit: cover;
}
.article-card--large .article-card__image img {
  height: 420px;
}
.article-card h3 {
  margin: 0 0 12px;
}
.article-card p {
  margin: 0 0 16px;
  color: var(--color-graphite);
  /* Hard cap at 2 lines regardless of how much the client types into the
     Excerpt field — the word count is also trimmed in front-page.php
     (wp_trim_words), this is just a visual backstop so the layout can
     never shift even with unusually long/short words. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-articles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}
.featured-articles__grid .article-card__image img {
  height: 160px;
}

/* --------------------------------------------------------------------------
   7. FEATURED RESOURCES
   -------------------------------------------------------------------------- */
.resource-row {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding-block: 32px;
  padding-right: 160px;
  border-top: 1px solid var(--color-stone-light);
}
.resource-row__link {
  position: absolute;
  top: 32px;
  right: 0;
}
.resource-row:last-child {
  border-bottom: 1px solid var(--color-stone-light);
}
.resource-row__image {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-stone);
}
.resource-row__image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.resource-row__content h3 {
  margin: 8px 0 12px;
}
.resource-row__content p {
  margin: 0 0 8px;
  color: var(--color-graphite);
}
.resource-row__date {
  color: var(--color-graphite);
}
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font: 600 13px/20px var(--font-sans);
  letter-spacing: 0.03em;
}
.tag--royal {
  background: var(--color-royal-bg);
  color: var(--color-royal);
}
.tag--purple {
  background: rgba(151, 71, 255, 0.1);
  color: var(--color-purple);
}
.tag--outline {
  border: 1px solid var(--color-stone-light);
  color: var(--color-graphite);
}

/* --------------------------------------------------------------------------
   8. UPCOMING EVENTS
   -------------------------------------------------------------------------- */
.events {
  background: var(--color-fog);
}
.events__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.event-card__image {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-stone);
  margin-bottom: 16px;
}
.event-card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.event-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-white);
  font: 600 13px/18px var(--font-sans);
}
.event-card h3 {
  margin: 0 0 12px;
}
.event-card__title-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.event-card__title-link:hover {
  color: var(--color-burnt-orange);
}
.event-card p {
  margin: 0;
  color: var(--color-graphite);
}

/* --------------------------------------------------------------------------
   9. NEWS & ANNOUNCEMENTS
   -------------------------------------------------------------------------- */
.news-list__item {
  display: grid;
  grid-template-columns: 16px 160px 1fr auto;
  align-items: center;
  gap: 24px;
  padding-block: 24px;
  border-top: 1px solid var(--color-stone-light);
}
.news-list__item:last-child {
  border-bottom: 1px solid var(--color-stone-light);
}
.news-list__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-burnt-orange);
}
.news-list__date {
  color: var(--color-graphite);
  margin: 0;
}
.news-list__item h3 {
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. KIDS ZONE
   -------------------------------------------------------------------------- */
.kids-zone {
  background: var(--color-fog);
}
.kids-zone__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.kids-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Was 20px here, but each card is now a native block Group, and (same
     wrapper issue documented earlier in this file for kids-zone__grid etc.)
     WordPress inserts a wp-block-group__inner-container div between this
     element and its real children, so this gap has no visible effect on
     the block-rendered cards — only the fallback markup (used before the
     Home page's blocks are first seeded) ever saw it. Left at 0 and
     replaced with real margins below, targeted at each element directly,
     so spacing is identical either way and doesn't depend on how deep
     WordPress happens to nest the real content. */
  gap: 0;
}
.kids-card__lead {
  margin: 0;
  color: var(--color-onyx);
}
.kids-card__image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  /* Space below the title, above the image. */
  margin-top: 24px;
}
.kids-card__image--sky {
  background: var(--color-kids-sky);
}
.kids-card__image--orange {
  background: var(--color-kids-orange);
}
.kids-card__image img {
  width: 100%;
  aspect-ratio: 401 / 275;
  height: auto;
  object-fit: cover;
}
.kids-card h3 {
  margin: 0;
}
.kids-card p {
  margin: 0;
  color: var(--color-onyx);
}
/* Space below the image, above the bold lead line. Written as
   ".kids-card p.kids-card__lead" (not just ".kids-card__lead") so its
   specificity actually beats ".kids-card p { margin: 0; }" above — a
   plain class selector alone ties with that rule on specificity and loses
   on source order, which is why this had no visible effect at first. */
.kids-card p.kids-card__lead {
  margin-top: 24px;
}
/* The lead line ("Every stamp tells a tale.") and the description right
   below it read as one short intro, so they stay close together — just
   enough space to separate the two lines, not a full section gap. */
.kids-card__lead + p {
  margin-top: 6px;
}
/* Space below the description, above the button. Covers both the
   block-rendered button (wrapped in .wp-block-buttons) and the fallback
   markup's bare <a class="btn">. */
.kids-card .wp-block-buttons,
.kids-card > a.btn {
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   11. BECOME A MEMBER
   -------------------------------------------------------------------------- */
.become-member {
  background: var(--color-onyx);
  color: var(--color-white);
}
.become-member__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
}
.become-member__text p {
  color: var(--color-white);
  margin-top: 16px;
}
.become-member__image {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-graphite);
}
.become-member__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.become-member__benefits {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.benefits-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  margin: 24px 0 32px;
  width: 100%;
}
.benefits-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--color-white);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  list-style: none;
}
.benefits-list__item img {
  border: none;
  display: block;
}
/* Block version of the benefits list uses plain paragraphs (no room for an
   <img> icon inside a core/paragraph block), so the 4 fixed benefit icons
   are replicated here via ::before, keyed off each item's fixed position.
   Scoped to .cas-becomemember-group only, so the fallback markup's own
   <img> icons (used when the block hasn't been seeded yet) aren't doubled
   up with a second, CSS-drawn icon. */
.cas-becomemember-group .benefits-list__item::before {
  content: "";
  flex: none;
  width: 24px;
  height: 22px;
  background: no-repeat center / contain;
}
.cas-becomemember-group .benefits-item-1::before {
  background-image: url("../images/icon_journal.svg");
}
.cas-becomemember-group .benefits-item-2::before {
  background-image: url("../images/icon_search.svg");
}
.cas-becomemember-group .benefits-item-3::before {
  background-image: url("../images/icon_event.svg");
}
.cas-becomemember-group .benefits-item-4::before {
  background-image: url("../images/icon_publication.svg");
}

/* --------------------------------------------------------------------------
   12. DISCOVER CTA
   -------------------------------------------------------------------------- */
.discover-cta {
  background: var(--color-fog);
}
.discover-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.discover-cta__image {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-stone);
}
.discover-cta__image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.discover-cta__text p {
  margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-white);
  color: var(--color-onyx);
  padding-top: 80px;
  border-top: 1px solid var(--color-stone-light);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px 32px;
  padding-bottom: 56px;
}
.site-footer__brand p {
  margin: 0 0 16px;
}
.site-footer__brand p.text-b5-small {
  margin: 0;
  color: var(--color-graphite);
}
.site-footer__col h4 {
  margin: 0 0 20px;
}
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__col a {
  color: var(--color-graphite);
}
/* Footer's "Contact" item swaps its <a> for a <button data-contact-toggle>
   (opens the Contact modal instead of navigating) — reset it to look
   identical to its sibling links. See cas_theme_is_contact_url() in
   functions.php. */
.footer-contact-trigger {
  display: inline-block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--color-graphite);
}
.site-footer__social {
  grid-column: 2;
}
.site-footer__newsletter {
  grid-column: 3 / 5;
}
.site-footer__newsletter p {
  margin: 0 0 24px;
}
.site-footer__logo {
  grid-column: 1;
}
.newsletter-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
  padding: 0 24px;
  border: 1px solid var(--color-onyx);
  border-radius: 4px;
}
.newsletter-form__input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  color: var(--color-onyx);
  height: 100%;
}
.newsletter-form__input::placeholder {
  color: var(--color-graphite);
}
.newsletter-form__submit {
  flex-shrink: 0;
  padding: 12px 20px;
}
.newsletter-form__message {
  margin: 12px 0 0;
  font: 600 14px/20px var(--font-sans);
}
.newsletter-form__message.is-success {
  color: var(--color-moss);
}
.newsletter-form__message.is-error {
  color: var(--color-burnt-orange);
}
.site-footer__legal {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 0 32px;
}
.site-footer__legal-inner {
  grid-column: 2 / 5;
  padding-block: 24px;
  border-top: 1px solid var(--color-stone-light);
}
.site-footer__legal a {
  color: var(--color-onyx);
}
.site-footer__legal p {
  margin: 0;
  color: var(--color-onyx);
}

/* --------------------------------------------------------------------------
   14. MOBILE HEADER / MENU
   Hidden above the mobile breakpoint (see section 15). Matches Figma
   "HOME -> 415 Mobile" + "HOME -> 415 Menu Overlay" frames: compact header
   (logo + search + hamburger, 105px tall) that opens a full-screen white
   overlay with an accordion nav (chevron rotates open/closed per item) and
   the same "Join the CAS" panel reused from the hero's dark column.
   -------------------------------------------------------------------------- */
.site-header__mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
}
.mobile-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-onyx);
  flex-shrink: 0;
}
.mobile-search-bar {
  display: none;
}
.mobile-search-bar:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 20px;
  background: var(--color-white);
}
.mobile-search-bar__input {
  flex: 1;
  border: 1px solid var(--color-stone-light);
  border-radius: 999px;
  padding: 10px 18px;
  outline: none;
  background: none;
}
.mobile-search-bar__submit {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-onyx);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-menu {
  display: none;
}
.mobile-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-white);
  overflow-y: auto;
}
.mobile-menu__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  flex-shrink: 0;
}
.mobile-menu__topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 24px 40px;
}
.mobile-menu__link {
  color: var(--color-onyx);
  padding: 4px 0;
}
.mobile-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-onyx);
  padding: 4px 0;
  text-align: left;
}
.mobile-accordion__chevron {
  display: flex;
  color: var(--color-graphite);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.mobile-accordion__trigger[aria-expanded="true"] .mobile-accordion__chevron {
  transform: rotate(180deg);
}
.mobile-accordion__panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 0 0 8px;
}
.mobile-accordion__panel a {
  color: var(--color-onyx);
}
/* Mobile accordion's "Contact Us" item swaps its <a> for a
   <button data-contact-toggle> (opens the Contact modal instead of
   navigating) — reset it to look identical to its sibling links. See
   cas_theme_is_contact_url() in functions.php. */
.mobile-accordion__contact {
  display: inline-block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--color-onyx);
}
.mobile-accordion__link--active {
  text-decoration: underline;
}
.mobile-menu__login {
  margin: 8px 24px 32px;
  justify-content: center;
}
.btn--outline-dark {
  background: none;
  border: 1px solid var(--color-onyx);
  color: var(--color-onyx);
}
.mobile-menu__join {
  background: var(--color-onyx);
  color: var(--color-white);
  padding: 40px 24px;
  margin-top: auto;
  flex-shrink: 0;
}
.mobile-menu__join h2 {
  margin: 0 0 16px;
}
.mobile-menu__join p {
  color: var(--color-stone-light);
  margin: 0 0 24px;
}

/* Search overlay — full-page takeover triggered by the header search icon.
   Matches Figma's "Search Query -> 1440 desktop" frame: stone-light
   background, dark "Home" pill top-left, "Cancel Search" + X top-right, a
   large uppercase "SEARCH" heading, and one big rounded input. */
.search-overlay {
  display: none;
}
.search-overlay:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--color-stone-light);
  overflow-y: auto;
}
.search-overlay__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px var(--container-padding);
}
.search-overlay__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-onyx);
  color: var(--color-white);
  padding: 14px 24px;
  border-radius: 8px;
  font: 700 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.search-overlay__cancel {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--color-onyx);
  font: 700 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.search-overlay__body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px var(--container-padding) 120px;
}
.search-overlay__heading {
  font: 400 90px/1 var(--font-serif);
  text-transform: uppercase;
  color: var(--color-onyx);
  margin: 0 0 40px;
}
.search-overlay__box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  border-radius: 20px;
  padding: 0 40px;
  height: 96px;
}
.search-overlay__input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font: 500 20px/28px var(--font-sans);
  letter-spacing: 0.03em;
  color: var(--color-onyx);
}
.search-overlay__input::placeholder {
  color: var(--color-onyx);
}
.search-overlay__submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-onyx);
}

/* Live search suggestions dropdown — appears under the input as the
   visitor types (see initSearchSuggestions() in main.js). Matches the
   panel below the search box: a rounded white card of up to 5 result
   rows tagged by content type, plus a "See all results" row at the
   bottom that links to the real search results page. */
.search-overlay__suggestions {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px;
  background: var(--color-white);
  border-radius: 20px;
  overflow: hidden;
}
.search-overlay__suggestions[hidden] {
  display: none;
}
.search-overlay__suggestion-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  color: var(--color-onyx);
  text-decoration: none;
}
.search-overlay__suggestion-link:hover,
.search-overlay__suggestion-link:focus-visible {
  background: var(--color-stone-light);
}
.search-overlay__suggestion-tag {
  flex-shrink: 0;
  width: 64px;
  font: 700 11px/1.4 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.55;
}
.search-overlay__suggestion-title {
  font: 500 16px/24px var(--font-sans);
}
.search-overlay__suggestions-all {
  display: block;
  padding: 14px 24px;
  margin-top: 4px;
  border-top: 1px solid rgba(43, 43, 43, 0.12);
  font: 700 13px/20px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-onyx);
  text-decoration: none;
}
.search-overlay__suggestions-all:hover {
  text-decoration: underline;
}
.search-overlay__suggestions-empty {
  padding: 14px 24px;
  font: 500 14px/20px var(--font-sans);
  opacity: 0.6;
}

@media (max-width: 900px) {
  .search-overlay__topbar {
    padding: 24px;
  }
  .search-overlay__body {
    padding: 24px 24px 80px;
  }
  .search-overlay__heading {
    font-size: 48px;
  }
  .search-overlay__box {
    height: 72px;
    padding: 0 24px;
  }
}

/* Visually hides an element while keeping it readable by screen readers —
   used for the Contact modal's field labels below (the fields themselves
   rely on placeholder text visually, per the client's reference design,
   but still need real <label>s for accessibility). Standard WP-style
   screen-reader-only pattern. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contact modal — opened by the header "Contact" button (see
   initContactModal() in main.js). A centered dialog over a dark backdrop,
   matching the reference design the client provided (bordered rounded
   inputs, placeholder-only fields, dark Submit button) restyled with the
   site's own colors/fonts instead of the reference's default blue. */
.contact-modal {
  display: none;
}
.contact-modal:not([hidden]) {
  display: block;
}
.contact-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(43, 43, 43, 0.6);
}
.contact-modal__dialog {
  position: fixed;
  z-index: 401;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--color-white);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(43, 43, 43, 0.3);
}
.contact-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
}
.contact-modal__heading {
  font: 400 32px/1.2 var(--font-serif);
  color: var(--color-onyx);
  margin: 0;
}
.contact-modal__close {
  background: none;
  border: none;
  padding: 4px;
  color: var(--color-graphite);
  cursor: pointer;
}
.contact-modal__close:hover {
  color: var(--color-onyx);
}
.contact-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-modal__field {
  display: flex;
}
.contact-modal__input {
  width: 100%;
  border: 1px solid var(--color-stone);
  border-radius: 8px;
  padding: 14px 16px;
  font: 400 16px/24px var(--font-sans);
  color: var(--color-onyx);
  background: var(--color-white);
}
.contact-modal__input::placeholder {
  color: var(--color-graphite);
}
.contact-modal__input:focus {
  outline: none;
  border-color: var(--color-onyx);
}
.contact-modal__textarea {
  resize: vertical;
  min-height: 100px;
}
.contact-modal__honeypot {
  /* Hidden from sighted visitors and skipped by keyboard tab order
     (tabindex="-1" on the input); a real spam bot that blindly fills
     every field it finds will still populate this one, which is exactly
     what cas_theme_handle_contact_form_submit() checks for. */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-modal__message {
  margin: 0;
  font: 600 14px/20px var(--font-sans);
  min-height: 0;
}
.contact-modal__message.is-success {
  color: var(--color-moss);
}
.contact-modal__message.is-error {
  color: var(--color-burnt-orange);
}
.contact-modal__submit {
  width: 100%;
}
@media (max-width: 600px) {
  .contact-modal__dialog {
    max-width: calc(100% - 32px);
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   16. SEARCH RESULTS TEMPLATE (search-results.html)
   -------------------------------------------------------------------------- */
.search-results-hero {
  background: var(--color-fog);
  padding: 40px 0 48px;
}
.search-results-hero__home {
  margin-bottom: 40px;
}
.search-results-hero__heading {
  max-width: 700px;
  margin: 0 0 32px;
}
.search-results-hero__box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  border-radius: 16px;
  padding: 0 32px;
  height: 88px;
  max-width: 1000px;
}
.search-results-hero__input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font: 500 18px/26px var(--font-sans);
  letter-spacing: 0.03em;
  color: var(--color-onyx);
}
.search-results-hero__submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-onyx);
}
.search-results-hero__sort {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  color: var(--color-onyx);
}
.sort-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--color-stone-light);
  border-radius: 8px;
  color: var(--color-onyx);
  font: 500 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
  background: var(--color-white);
}
.sort-select__chevron {
  display: flex;
  margin-left: 4px;
}

.search-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.result-card__image {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-stone);
  margin-bottom: 25px;
}
.result-card__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.result-card__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-top: 5px;
  font: 700 13px/18px var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--color-graphite);
}
.result-card__tag span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.result-card__tag--pdf span {
  background: var(--color-burnt-orange);
}
.result-card__tag--article span {
  background: var(--color-gold);
}
.result-card__tag--journal span {
  background: var(--color-moss);
}
.result-card__tag--exhibit span {
  background: var(--color-purple);
}
.result-card__tag--event span {
  background: var(--color-royal);
}
.result-card__tag--page span {
  background: var(--color-graphite);
}
.result-card__tag--monograph span {
  background: var(--color-clay);
}
.result-card__tag--presentation span {
  background: var(--color-kids-orange);
}
.result-card__tag--kids span {
  background: var(--color-kids-sky);
}
.result-card__tag--news span {
  background: var(--color-sand);
}
.result-card__title {
  margin: 0 0 12px;
}
.result-card__desc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-stone-light);
  color: var(--color-graphite);
}
/* Long descriptions (Journal issues' "In this issue: ..." list especially)
   previously had no line limit here at all — the text span could wrap to
   as many lines as it needed, and because it's a flex item with no
   min-width set, the browser's default flex min-width (its full unwrapped
   content width) let it demand more room than the row actually had. That
   squeezed its flex sibling — the arrow icon — down toward zero width
   instead of properly wrapping the text within the space available,
   which is why the arrow appeared to just disappear on longer results.
   Clamping to 2 lines (min-width: 0 is what makes a line-clamp inside a
   flex item work at all) fixes both at once. */
.result-card__desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}
.result-card__desc .icon-arrow-wrap {
  flex-shrink: 0;
}

.search-results__end {
  text-align: center;
  color: var(--color-graphite);
  margin: 56px 0 0;
}

/* List view — toggled by the "Grid"/"List" sort-select button on the
   search-results template, and used by default (always on, no toggle) on
   the Articles Index template. Each card becomes a full-width rounded row
   with the image on the right instead of a 3-column grid of stacked cards. */
.search-results__grid.is-list-view {
  grid-template-columns: 1fr;
  gap: 24px;
}
.search-results__grid.is-list-view .result-card {
  display: grid;
  grid-template-columns: 1fr 220px;
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
  align-items: start;
  padding: 40px;
  background: var(--color-stone-light);
  border-radius: 16px;
}
.search-results__grid.is-list-view .result-card__tag {
  grid-column: 1;
  grid-row: 1;
}
.search-results__grid.is-list-view .result-card__title {
  grid-column: 1;
  grid-row: 2;
}
.search-results__grid.is-list-view .result-card__desc {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  border-bottom-color: var(--color-stone);
}
.search-results__grid.is-list-view .result-card__desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-results__grid.is-list-view .result-card__image {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  margin-bottom: 0;
  background: var(--color-stone);
}
.search-results__grid.is-list-view .result-card__image img {
  height: 100%;
}

@media (max-width: 900px) {
  .search-results__grid.is-list-view .result-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 24px;
  }
  .search-results__grid.is-list-view .result-card__image {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    margin-bottom: 20px;
  }
  .search-results__grid.is-list-view .result-card__image img {
    height: 200px;
  }
}

/* "Sort Your Results" control on page headlines — a real dropdown, see
   initSortDropdown() in main.js (generic — supports any number of these on
   a page). Used on the Articles Index (Most Relevant / Newest / Oldest /
   Title A-Z / Title Z-A, query logic in page-articles-index.php) and the
   Publications page (Newest to Oldest / Oldest to Newest / Title A-Z /
   Title Z-A, query logic in page-list-index.php). Reuses the same
   .sort-select button look as the search-results page's Grid/List
   toggle. */
.page-headline__sort {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  color: var(--color-onyx);
}
/* Articles Index search box — scopes results to just this post type (see
   $cas_search_term in page-articles-index.php). Reuses the same pill
   input styling as the site-wide search results page. */
.page-headline__search {
  margin-top: 24px;
  max-width: 640px;
  height: 64px;
  border: 1px solid var(--color-stone);
  box-shadow: 0 1px 3px rgba(43, 43, 43, 0.08);
}
.page-headline__search:focus-within {
  border-color: var(--color-onyx);
}
.page-headline__search-status {
  margin: 12px 0 0;
  color: var(--color-graphite);
}
.page-headline__search-status a {
  color: var(--color-burnt-orange);
  text-decoration: underline;
}
/* Search submit button on the Articles Index template — a plain arrow
   instead of a magnifying glass, sitting at the far right of the box now
   that the visitor-facing "type" dropdown next to it has been removed
   (each page IS a single type now, so there's nothing left to pick). Kept
   clean/borderless to match the footer newsletter Subscribe button's
   arrow (.icon-arrow-wrap / .icon-arrow) — no filled circle behind it. */
.page-headline__search-arrow {
  width: 40px;
  height: 40px;
}
/* "Download the Index" link on the Publications page — set under
   Publication Issues → Settings, shown right below the sort control.
   Reuses the same inline-flex + arrow pattern as the per-issue "Download
   PDF" link (.pub-issue__download) so it reads as the same kind of
   action, just for the whole index instead of one issue. */
.page-headline__index-download {
  margin: 16px 0 0;
}
.page-headline__index-download .text-link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 30px;
  color: var(--color-burnt-orange);
}
.sort-select-wrap {
  position: relative;
}
.sort-select__label {
  white-space: nowrap;
}
.sort-select__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-stone-light);
  border-radius: 8px;
  box-shadow: var(--shadow-menu);
}
.sort-select__option {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--color-onyx);
  font: 500 15px/22px var(--font-sans);
  text-decoration: none;
}
.sort-select__option:hover {
  background: var(--color-stone-light);
}
.sort-select__option.is-active {
  color: var(--color-burnt-orange);
  font-weight: 700;
}

/* Floating scroll-to-top button — appears once the user scrolls past the
   results header, sits above the AI assistant fab. */
.scroll-top-fab {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-burnt-orange);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-menu);
  z-index: 90;
}
.scroll-top-fab:not([hidden]) {
  display: flex;
}

@media (max-width: 900px) {
  .search-results-hero__heading {
    font-size: 28px;
    line-height: 34px;
  }
  .search-results-hero__box {
    height: 64px;
    padding: 0 20px;
  }
  .search-results-hero__sort {
    flex-wrap: wrap;
  }
  .search-results__grid {
    grid-template-columns: 1fr;
  }
}

/* Floating AI assistant button — present sitewide, matches Figma's
   "AI-Agent" component pinned bottom-right. */
.ai-agent-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-burnt-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-menu);
  z-index: 90;
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE — header breakpoint
   The desktop nav (logo + 7 items + fixed 520px black panel) needs roughly
   1320px of inner width to fit without the white nav overflowing into the
   black panel. Rather than let that overlap happen in the gap between "full
   1440 desktop" and "900px mobile stacking", the compact header + hamburger
   overlay switches on earlier, at 1360px, so there's no dead zone where nav
   text collides with the black panel.
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .site-header {
    height: auto;
    position: sticky;
  }
  .site-header::after {
    display: none;
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 16px 24px;
  }
  .site-header__left {
    padding: 0;
    gap: 0;
    background: none;
    width: auto;
  }
  .main-nav,
  .site-header__right {
    display: none;
  }
  .site-header__mobile-actions {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE — mobile
   Matches Figma's "415 Mobile" reference frame: reflows every section to a
   single column with tightened spacing/type scale. The header itself already
   switched over at the wider 1360px breakpoint above.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --container-padding: 24px;
  }

  /* Hero */
  .hero::after {
    display: none;
  }
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__left-inner {
    max-width: none;
    padding: 40px 24px;
  }
  .hero__right-inner {
    padding: 56px 24px;
  }
  .hero__heading {
    font: 400 40px/46px var(--font-serif);
  }
  .hero__intro {
    max-width: none;
  }
  .hero__stamp-image {
    margin-bottom: 40px;
  }
  .hero__stamp-image img {
    height: 220px;
  }
  .hero__search,
  .research-discover,
  .explore-theme {
    padding-top: 40px;
    margin-top: 40px;
  }
  .tabs {
    flex-wrap: wrap;
  }
  .index-row {
    flex-wrap: wrap;
  }
  .explore-theme__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero__collage img,
  .hero__journal-cover {
    height: 320px;
  }

  .section {
    padding-block: 56px;
  }
  .section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* .text-h1 (the page-headline heading on Publications, Events, Articles
     Index, News, and Join) had no mobile size at all before this — it
     stayed at the desktop 60px/uppercase, which is why long words like
     "Aerophilatelist" or "Publications" ran off the edge of the screen on
     a phone instead of wrapping to fit. The homepage's own hero heading
     is unaffected (a more specific .hero__heading rule below already
     covers it at this same size). */
  .text-h1 {
    font: 400 40px/46px var(--font-serif);
  }
  .text-h3,
  .text-h3-underline {
    font: 400 30px/36px var(--font-serif);
  }
  .text-h4 {
    font: 400 24px/30px var(--font-serif);
  }

  .featured-articles__layout,
  .featured-articles__grid {
    grid-template-columns: 1fr;
  }
  .article-card--large .article-card__image img {
    height: 260px;
  }
  .featured-articles__grid .article-card__image img {
    height: 220px;
  }

  .resource-row {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .resource-row__link {
    position: static;
    display: inline-flex;
    margin-top: 12px;
  }

  .events__grid,
  .kids-zone__grid,
  .cas-kidszone-group .kids-zone__grid {
    grid-template-columns: 1fr !important;
  }
  /* The rule above targets the Kids Zone Group block itself, but (same
     wp-block-group__inner-container wrapper covered earlier in this file)
     the real 3-card grid actually lives one level deeper, on a rule with
     higher specificity that this one can't beat regardless of screen
     size — so on mobile the cards stayed locked at 3 columns instead of
     stacking, running off the edge of the screen. This matches that
     deeper selector exactly so it can actually win here. */
  .cas-kidszone-group .kids-zone__grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr !important;
  }

  .news-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    padding-left: 20px;
  }
  .news-list__dot {
    position: absolute;
    left: 0;
    top: 32px;
  }

  .become-member__inner,
  .cas-becomemember-group.become-member__inner {
    grid-template-columns: 1fr !important;
  }
  .become-member__image {
    grid-row: auto;
    height: 260px;
  }
  .benefits-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
  /* Same wrapper-specificity issue as Kids Zone above: the block-rendered
     version of Become a Member (text/photo/benefits) and its Membership
     Benefits row both actually lay out one level deeper, inside
     wp-block-group__inner-container, on rules more specific than the
     ones above — which is why the 2-column section and the 4-across
     benefits list weren't stacking/reflowing on mobile and ran off the
     edge of the screen instead. Matched exactly so these can win here. */
  .cas-becomemember-group.become-member__inner > .wp-block-group__inner-container {
    grid-template-columns: 1fr !important;
  }
  .cas-becomemember-group .benefits-list > .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 24px;
  }

  .discover-cta__inner,
  .cas-discovercta-group.discover-cta__inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .cas-discovercta-group.discover-cta__inner > .wp-block-group__inner-container {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .discover-cta__image img {
    height: 220px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer__social,
  .site-footer__newsletter,
  .site-footer__logo {
    grid-column: 1;
  }
  /* Was flex-wrap: wrap here, which (since the email input is the flex
     item set to grow, flex:1) made the input claim the full row width by
     itself, forcing the submit arrow to wrap onto its own line below it
     inside the same bordered box — the "arrow on its own line" look.
     Kept as a single row on mobile too, just shorter/tighter, same as
     the input/button relationship on desktop. */
  .newsletter-form {
    height: 60px;
    padding: 0 16px;
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   17. ARTICLE TEMPLATE (article.html) — general long-form content page,
   reused for any article/journal/story piece.
   -------------------------------------------------------------------------- */
.article-topbar {
  padding-top: 40px;
  margin-bottom: 20px;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 14px/20px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-graphite);
}
.article-back__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-stone);
  border-radius: 8px;
  transform: rotate(180deg);
}

.article-hero {
  position: relative;
  margin-top: 40px;
  margin-bottom: 0;
  height: 480px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-hero__badge {
  top: 24px;
  left: 24px;
}

.article-body-section {
  background: var(--color-fog); /* #F1F1EE */
  padding-top: 64px;
}

.article-content {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  padding: 0 var(--container-padding) 100px;
}

.article-header__label {
  font: 600 14px/20px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-graphite);
  text-align: center;
  margin: 0 0 16px;
}
.article-header__title {
  font: 400 48px/56px var(--font-serif);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-onyx);
  margin: 0 0 24px;
}
.article-header__meta {
  font: 400 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--color-graphite);
  margin: 0 0 48px;
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.article-body p {
  font: 400 18px/30px var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--color-onyx);
  margin: 0;
}
.article-body a {
  color: var(--color-burnt-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover {
  color: var(--color-onyx);
}
/* Auto-added link around content images (see
   cas_theme_make_content_images_clickable() in functions.php) — opens the
   full-resolution original. No underline; a zoom cursor signals it's
   clickable instead. */
.cas-content-image-link,
.article-body a.cas-content-image-link {
  display: inline-block;
  text-decoration: none;
  cursor: zoom-in;
}

.article-media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  /* Self-centering safety net: .article-body already stretches these
     patterns to the full 800px article column, so this is normally a
     no-op — but it guarantees the pattern is always centered within
     whatever container it ends up in, rather than assuming its parent's
     layout, in case it's ever placed somewhere wider. */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.article-media {
  margin: 0;
}
.article-media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 16px;
}
.article-media__caption {
  font: 400 14px/22px var(--font-sans);
  color: var(--color-graphite);
}
.article-media__link {
  font: 600 14px/22px var(--font-sans);
  color: var(--color-onyx);
}

.article-media-single {
  margin: 8px auto;
  max-width: 560px;
}
.article-media-single img {
  width: 100%;
  border-radius: 4px;
}

.article-quote {
  max-width: 800px;
  margin: 16px auto;
  padding: 0;
  text-align: center;
}
.article-quote p {
  font: 400 32px/42px var(--font-serif);
  color: var(--color-onyx);
  margin: 0 0 24px;
}
.article-quote__attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-quote__attribution .text-b4-small-heavy {
  color: var(--color-onyx);
}
.article-quote__attribution .text-b5-small {
  color: var(--color-graphite);
}

.article-feature {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.article-feature__image {
  width: 280px;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.article-feature__text {
  flex: 1;
}
.article-feature__text p {
  margin: 0;
}

/* Native WordPress block compatibility (Article layout patterns —
   cas_theme_register_article_block_patterns() in functions.php). These
   patterns use core/image blocks, which always wrap the <img> in their
   own <figure class="wp-block-image">. Most of the rules above already
   target descendants (e.g. ".article-media img") so they reach straight
   through that extra figure with no changes needed. The one exception is
   ".article-feature__image", whose original design applied width/height/
   object-fit directly to the <img> — here the class lands on the
   wrapping figure instead, so the sizing needs to be re-pointed to the
   image inside it. */
.article-media .wp-block-image {
  margin: 0;
}
.article-feature__image {
  width: 280px;
  flex-shrink: 0;
  margin: 0;
}
.article-feature__image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
/* The bigger issue (found by re-checking against the same WordPress quirk
   already documented above for the homepage sections): WordPress
   auto-inserts an extra <div class="wp-block-group__inner-container">
   between a Group block and its real children whenever the block's
   "layout" support is active — which is always, for core/group, even
   though these patterns never set a "layout" attribute intentionally.
   That meant .article-media-pair's display:grid, .article-feature's
   display:flex, and .article-quote__attribution's display:flex were all
   landing on a box with exactly ONE child (the auto-inserted wrapper),
   not the two real children — so on the actual front end (not just the
   editor preview) these three patterns rendered as a single stacked
   column instead of side-by-side, which is exactly what showed up when
   previewing the page. Same fix as the homepage: put the real layout on
   the inner wrapper instead of the outer block. */
.article-media-pair {
  display: block !important;
}
.article-media-pair > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px;
}
.article-feature {
  display: block !important;
}
.article-feature > .wp-block-group__inner-container {
  display: flex !important;
  align-items: center !important;
  gap: 40px;
}
.article-quote__attribution {
  display: block !important;
}
.article-quote__attribution > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
}

.article-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-onyx);
  margin-top: 16px;
}

@media (max-width: 900px) {
  .article-hero {
    margin-top: 24px;
    margin-bottom: 40px;
    height: 260px;
  }
  .article-content {
    padding: 0 24px 64px;
  }
  .article-header__title {
    font-size: 32px;
    line-height: 38px;
  }
  .article-header__meta {
    margin-bottom: 56px;
  }
  .article-media-pair > .wp-block-group__inner-container {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .article-quote p {
    font-size: 24px;
    line-height: 32px;
  }
  .article-feature > .wp-block-group__inner-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px;
  }
  .article-feature__image {
    width: 100%;
  }
  .article-feature__image img {
    height: 220px;
  }
}

/* --------------------------------------------------------------------------
   18. SHARED — PAGE HEADLINE + PAGINATION
   Used by List Index (Library/Publications), Upcoming Events index and
   Articles index — a simple title + intro banner and a page-navigation
   component ("page_navigation" in Figma) reused across all list pages.
   -------------------------------------------------------------------------- */
.page-headline {
  padding-block: 64px 48px;
  border-bottom: 1px solid var(--color-stone-light);
}
.page-headline h1 {
  margin: 0 0 20px;
  color: var(--color-onyx);
}
.page-headline p {
  margin: 0;
  max-width: 760px;
  color: var(--color-onyx);
}

/* Plain-text pagination bar (matches the Figma reference: "‹ Prev" pinned
   left, page numbers centered as their own cluster, "Next ›" pinned
   right — current page underlined, no boxes/pills around the numbers).
   Built by cas_render_pagination() in functions.php, shared by
   Publications, Articles Index, Events, and Search Results. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* The wrapping .section already adds equal padding above and below
     everything inside it (padding-block: 80px, both the same value) —
     so as long as this margin is the same top and bottom, the actual
     visual gap ends up equal on both sides too, with no need to touch
     that shared section padding. Previously this was margin-top only
     (56px, no margin-bottom), which pushed the pagination bar down and
     left an uneven, larger gap above it than below it. */
  margin: 32px 0;
}
.pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-onyx);
  font: 600 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.pagination__nav--prev .icon-arrow {
  transform: rotate(180deg);
}
.pagination__nav--disabled {
  color: var(--color-graphite);
  opacity: 0.5;
  pointer-events: none;
}
.pagination__numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--color-graphite);
  font: 500 16px/24px var(--font-sans);
  letter-spacing: 0.03em;
  text-decoration: none;
}
.pagination__num.is-active {
  color: var(--color-onyx);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.pagination__dots {
  color: var(--color-graphite);
  font: 500 16px/24px var(--font-sans);
}

/* --------------------------------------------------------------------------
   19. TEMPLATE LIST INDEX (Library / Publications Index)
   Each Publication Issue is its own card: a meta panel on the left
   (Volume/Number, date, PDF download), and that issue's table of contents
   on the right (Title/Contents, Sources/Details, AMCN #, Page #).
   -------------------------------------------------------------------------- */
.index-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 56px 0 40px;
}
.pub-issue {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  background: var(--color-stone-light);
  border-radius: 16px;
  padding: 32px 40px;
}
.pub-issue__volume {
  margin: 0 0 8px;
  color: var(--color-onyx);
  text-transform: uppercase;
}
.pub-issue__date {
  margin: 0 0 4px;
  color: var(--color-graphite);
}
.pub-issue__issue-num {
  margin: 0 0 12px;
  color: var(--color-graphite);
}
.pub-issue__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-burnt-orange);
}
.pub-issue__table {
  display: flex;
  flex-direction: column;
}
/* "In This Issue" teaser — hand-written or auto-generated from the Table
   of Contents titles, see cas_get_publication_in_this_issue() in
   functions.php. Sits above the Titles/Contents header row so it reads
   as a quick summary before the detailed table. */
.pub-issue__summary {
  margin: 0 0 20px;
  color: var(--color-onyx);
}
/* The first Table of Contents entry always shows (see page-list-index.php)
   so the card fills its space sensibly; if there's more than one entry,
   the rest sit behind this "View All" <summary> link instead of a full
   collapsed table, so a 1-item issue doesn't leave a near-empty box and a
   30-item issue doesn't turn the page into one giant scroll. Hides the
   browser's default disclosure triangle in favor of the site's own
   chevron icon (already used for the mobile accordion), rotated
   open/closed via the [open] attribute. */
.pub-issue__table-more {
  margin-top: 20px;
}
.pub-issue__toc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--color-burnt-orange);
  font: 600 15px/22px var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pub-issue__toc-toggle::-webkit-details-marker {
  display: none;
}
.pub-issue__toc-toggle::marker {
  content: "";
}
.pub-issue__toc-chevron {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.pub-issue__table-more[open] .pub-issue__toc-chevron {
  transform: rotate(180deg);
}
.pub-issue__table-more[open] .pub-issue__toc-toggle {
  margin-bottom: 16px;
}
.pub-issue__table-empty {
  color: var(--color-graphite);
}
.pub-issue__table-head {
  display: grid;
  grid-template-columns: 1.6fr 2.2fr 0.8fr 0.5fr;
  gap: 24px;
  padding-bottom: 12px;
  color: var(--color-graphite);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font: 600 13px/18px var(--font-sans);
  border-bottom: 1px solid var(--color-stone);
}
.pub-issue__table-row {
  display: grid;
  grid-template-columns: 1.6fr 2.2fr 0.8fr 0.5fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-stone);
  color: var(--color-onyx);
}
.pub-issue__table-row:last-child {
  border-bottom: none;
}
.pub-issue__table-title {
  margin: 0;
}
.pub-issue__table-details,
.pub-issue__table-amcn,
.pub-issue__table-page {
  margin: 0;
  color: var(--color-graphite);
}

/* --------------------------------------------------------------------------
   20. TEMPLATE EVENTS / ARTICLES INDEX
   Reuses .events__grid/.event-card and .search-results__grid/.result-card
   from the homepage and search-results templates — same components, just
   presented as the full browsable index with pagination.
   -------------------------------------------------------------------------- */
.events-index__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

/* --------------------------------------------------------------------------
   21. TEMPLATE JOIN (Membership signup)
   -------------------------------------------------------------------------- */
/* Split hero, mirrors the homepage's .hero white/onyx split (1fr/520px
   columns, onyx bleeds to the true right edge on wide screens). */
.join-hero {
  position: relative;
  background: var(--color-fog);
}
.join-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(520px + max(0px, (100% - 1440px) / 2));
  background: var(--color-onyx);
  z-index: 0;
}
.join-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 520px;
  max-width: var(--container-max);
  margin-inline: auto;
}
.join-hero__left {
  background: var(--color-fog);
}
.join-hero__left-inner {
  padding: 80px var(--container-padding) 80px 80px;
}
.join-hero__right {
  background: var(--color-onyx);
  color: var(--color-white);
}
.join-hero__right-inner {
  padding: 80px 50px;
}

/* Text is narrower (~675px, matches Figma's "text_mission" node) than the
   photo below it (~800px, full column width) — an intentional breakout. */
.join-hero__text {
  max-width: 675px;
}
.join-hero__text h1 {
  margin: 0 0 24px;
  color: var(--color-onyx);
}
.join-hero__text p {
  margin: 0 0 40px;
  color: var(--color-graphite);
}
.join-hero__photo {
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-stone);
  aspect-ratio: 800 / 565;
}
.join-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.join-hero__quote {
  margin: 0 0 40px;
}
.join-hero__quote p {
  font: italic 400 28px/32px var(--font-serif);
  color: var(--color-white);
  margin: 0 0 16px;
}
.join-hero__quote cite {
  font: 400 18px/26px var(--font-sans);
  font-style: normal;
  color: var(--color-stone-light);
}
.join-hero__exhibit {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 400 / 565;
}
.join-hero__exhibit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "The benefits of membership..." intro row — left-aligned heading over a
   4-up feature grid (gold check badge, bold title, description). */
.join-intro {
  padding: 64px 0 80px;
}
.join-intro h2 {
  max-width: 640px;
  margin: 0 0 40px;
  color: var(--color-onyx);
}
.benefits-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.benefits-feature-grid__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Decorative checkmark circle above each benefit's title/description.
   Drawn entirely in CSS (was previously an inline <svg> hard-coded next
   to each item) so this section could become a native, in-context-editable
   block group — see cas-join-benefits-group in functions.php — without
   needing a 5th, purely-decorative field per card that nobody would
   actually want to change from one item to the next. */
.benefits-feature-grid__item::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-bottom: 12px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='13.25' stroke='%23EFD082' stroke-width='1.5'/%3E%3Cpath d='M9 14L12 17L19 10.5' stroke='%23EFD082' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.benefits-feature-grid__title {
  margin: 0;
  color: var(--color-onyx);
}
.benefits-feature-grid__desc {
  margin: 0;
  color: var(--color-graphite);
}
/* Same wp-block-group__inner-container wrapper issue documented earlier in
   this file (Kids Zone, Become a Member, Research & Discover) — now that
   "Benefits of Membership" is a native block group too (cas-join-benefits-
   group), both .benefits-feature-grid (was display:grid) and each
   .benefits-feature-grid__item (was display:flex) only have that one
   auto-inserted wrapper as a direct child, so the layout properties above
   need to also target that inner wrapper directly. The ::before icon isn't
   affected — it's generated on the outer element itself, which is now
   display:block, so its own margin-bottom above creates the gap before the
   real content (which lives one level deeper, inside the wrapper). */
.cas-join-benefits-group .benefits-feature-grid {
  display: block !important;
}
.cas-join-benefits-group .benefits-feature-grid > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px;
}
.cas-join-benefits-group .benefits-feature-grid__item {
  display: block !important;
}
.cas-join-benefits-group .benefits-feature-grid__item > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

/* Plain light-bg section — no dark panel, no cards. Two columns of
   membership-tier copy, each term (1yr/2yr) marked with a small gold pill
   followed by one or more region-priced lines. */
.membership-fees {
  background: var(--color-fog);
  padding: 64px 0 80px;
}
.membership-fees h2 {
  margin: 0 0 48px;
  max-width: 800px;
  color: var(--color-onyx);
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pricing-card h3 {
  margin: 0;
  color: var(--color-onyx);
}
.pricing-card__desc {
  margin: 0 0 8px;
  color: var(--color-graphite);
}
.fee-tier {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--color-gold);
  color: var(--color-onyx);
  font: 600 14px/20px var(--font-sans);
  letter-spacing: 0.03em;
  margin-top: 8px;
}
.fee-tier:first-child {
  margin-top: 0;
}
.fee-lines {
  margin: 0;
  color: var(--color-onyx);
}
.fee-lines p {
  margin: 0 0 4px;
}
.pricing-card__note {
  margin: 8px 0 0;
  font-style: italic;
  color: var(--color-graphite);
}
.pricing-card .btn {
  align-self: flex-start;
  margin-top: 16px;
}

.join-gallery {
  border-radius: 16px;
  overflow: hidden;
  margin-top: 56px;
  height: 320px;
}
.join-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join-form {
  padding: 16px 0 96px;
  background: var(--color-white);
}
.join-form__inner {
  max-width: 850px;
}
.join-form h2 {
  text-align: left;
  margin: 0 0 40px;
  color: var(--color-onyx);
}
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-section-title {
  margin: 16px 0 0;
  color: var(--color-onyx);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.uform-field {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.uform-field label {
  color: var(--color-onyx);
}
.uform-field input,
.uform-field select {
  width: 100%;
  height: 32px;
  padding: 0 0 6px;
  border: none;
  border-bottom: 2px solid var(--color-onyx);
  border-radius: 0;
  background: transparent;
  font: 400 16px/24px var(--font-sans);
  color: var(--color-onyx);
  appearance: none;
  -webkit-appearance: none;
}
.uform-field select {
  background-image: url("../images/icon_arrow_small.svg");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
}
.uform-field textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px 0 6px;
  border: none;
  border-bottom: 2px solid var(--color-onyx);
  border-radius: 0;
  background: transparent;
  font: 400 16px/24px var(--font-sans);
  color: var(--color-onyx);
  resize: vertical;
}
.uform-field input::placeholder,
.uform-field textarea::placeholder {
  color: var(--color-graphite);
}
.uform-field input:focus,
.uform-field select:focus,
.uform-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}
.uform-field__hint {
  margin: -8px 0 0;
  color: var(--color-graphite);
}
.join-form__honeypot {
  /* Hidden from sighted visitors and skipped by keyboard tab order
     (tabindex="-1" on the input); a real spam bot that blindly fills
     every field it finds will still populate this one, which is exactly
     what cas_theme_handle_join_signup() checks for. */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.join-form__message {
  margin: 0;
  font: 600 14px/20px var(--font-sans);
  min-height: 0;
}
.join-form__message.is-success {
  color: var(--color-moss);
}
.join-form__message.is-error {
  color: var(--color-burnt-orange);
}
.form-tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-tier-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-tier-group__title {
  margin: 0 0 2px;
  color: var(--color-onyx);
}
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-onyx);
}
.form-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-onyx);
}
.form-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 20px 24px;
  border-radius: 8px;
  background: var(--color-onyx);
  color: var(--color-white);
}
.form-total .text-h4 {
  color: var(--color-white);
}
.form-total__includes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: -8px 0 0;
  color: var(--color-graphite);
}
.form-total__includes p {
  margin: 0;
}
.form-total__includes p:first-child {
  color: var(--color-onyx);
  font-weight: 600;
}
.form-total__includes p:not(:last-child):not(:first-child)::after {
  content: "\2022";
  margin-left: 8px;
  color: var(--color-stone);
}
.form-disclaimer {
  margin: 0;
  color: var(--color-graphite);
}
.join-form .btn {
  align-self: flex-start;
  width: auto;
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .page-headline {
    padding-block: 40px 32px;
  }
  .index-groups {
    gap: 24px;
    padding: 32px 0 8px;
  }
  .pub-issue {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .pub-issue__table-head {
    display: none;
  }
  .pub-issue__table-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }

  .events-index__grid,
  .search-results__grid {
    grid-template-columns: 1fr;
  }

  .join-hero::after {
    display: none;
  }
  .join-hero__inner {
    grid-template-columns: 1fr;
  }
  .join-hero__left-inner {
    padding: 40px 24px 32px;
  }
  .join-hero__text {
    max-width: none;
  }
  .join-hero__right-inner {
    padding: 32px 24px 48px;
  }
  .join-hero__photo {
    aspect-ratio: 4 / 3;
  }
  .join-hero__quote p {
    font-size: 20px;
    line-height: 28px;
  }
  .join-hero__exhibit {
    aspect-ratio: 4 / 3;
  }
  .join-intro {
    padding: 40px 0;
  }
  .join-intro h2 {
    margin-bottom: 24px;
  }
  .benefits-feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  /* Same wrapper-targeting fix as the desktop rule above, needed again
     here since this mobile override would otherwise lose to the
     higher-specificity .cas-join-benefits-group ... > .wp-block-group__inner-container
     rule regardless of screen width (see the mobile Kids Zone/Become a
     Member fix earlier in this file for the full explanation). */
  .cas-join-benefits-group .benefits-feature-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
  }
  .membership-fees {
    padding: 40px 0 48px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .join-gallery {
    margin-top: 32px;
    height: 200px;
  }
  .join-form {
    padding: 8px 0 64px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-tier-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .form-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .join-form .btn {
    width: 100%;
    align-self: stretch;
    justify-content: center;
  }
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
  }
  .pagination__numbers {
    order: 3;
    width: 100%;
  }
}