/* ==========================================================================
   Memorials & tributes honor roll (/memorial/)
   Loaded only on the memorial page - see the enqueue in functions.php.

   Layout intent: the roll is grouped (In memory / In honor / Birthdays),
   alphabetised by surname server-side, and broken up with letter dividers.
   The repeated "IN MEMORY OF" label is deliberately NOT printed on cards whose
   line already matches their section heading, so the names carry the page.
   ========================================================================== */

.monroe-memorial-tribute-page .monroe-tribute-board {
  --t-teal: #0f766e;
  --t-teal-2: #0d9488;
  --t-teal-deep: #0a5f59;
  --t-ink: #153635;
  --t-muted: #3d524f;
  --t-muted-2: #5a6f6c;
  --t-gold: #b45309;
  --t-honor: #15803d;
  --t-border: rgba(23, 58, 57, 0.12);
  --t-hairline: rgba(23, 58, 57, 0.08);
  --t-surface: #ffffff;
  --t-cream: #fffaf2;
  --t-r-lg: 20px;
  --t-r-md: 14px;
  --t-shadow: 0 14px 40px rgba(15, 30, 29, 0.08);
  --t-shadow-sm: 0 2px 12px rgba(15, 30, 29, 0.06);

  max-width: 1120px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  font-family: "Montserrat", "Jost", "Segoe UI", sans-serif;
  color: var(--t-ink);
  border-radius: var(--t-r-lg);
  border: 1px solid var(--t-border);
  background: var(--t-surface);
  box-shadow: var(--t-shadow);
  overflow: hidden;
}
/* Author display rules on plaques and letter dividers must not override the
   native hidden state used by the search filter. */
.monroe-memorial-tribute-page [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.monroe-memorial-tribute-page .monroe-tribute-hero {
  text-align: center;
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 1.9rem);
  border-bottom: 1px solid var(--t-border);
  background:
    radial-gradient(ellipse 90% 120% at 50% -30%, rgba(15, 118, 110, 0.14), transparent 62%),
    linear-gradient(180deg, var(--t-cream) 0%, #ffffff 100%);
}

.monroe-memorial-tribute-page .monroe-tribute-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 40rem;
  margin: 0 auto;
}

.monroe-memorial-tribute-page .monroe-tribute-hero__eyebrow {
  margin: 0 0 0.2rem;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-teal);
}

.monroe-memorial-tribute-page .monroe-tribute-hero__title {
  margin: 0;
  font-family: "Abril Fatface", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--t-ink);
}

/* hairline - leaf - hairline */
.monroe-memorial-tribute-page .monroe-tribute-hero__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0.9rem auto 0;
  width: 100%;
  max-width: 20rem;
}

.monroe-memorial-tribute-page .monroe-tribute-hero__rule::before,
.monroe-memorial-tribute-page .monroe-tribute-hero__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 118, 110, 0.35), transparent);
}

.monroe-memorial-tribute-page .monroe-tribute-hero__rule svg {
  display: block;
  color: var(--t-teal-2);
  opacity: 0.85;
}

.monroe-memorial-tribute-page .monroe-tribute-hero__stat {
  margin: 0.75rem 0 0;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t-muted-2);
}

/* --------------------------------------------------------------------------
   Intro + buttons
   -------------------------------------------------------------------------- */
.monroe-memorial-tribute-page .monroe-tribute-intro {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.35rem, 3vw, 1.85rem);
  text-align: center;
  border-bottom: 1px solid var(--t-border);
  background: #fff;
}

.monroe-memorial-tribute-page .monroe-tribute-intro__text {
  max-width: 52rem;
  margin: 0 auto 0.8rem;
  color: var(--t-muted);
  line-height: 1.7;
  font-size: 1.05rem;
}

.monroe-memorial-tribute-page .monroe-tribute-intro__note {
  max-width: 46rem;
  margin: 0 auto 1.2rem;
  color: var(--t-muted-2);
  font-size: 0.94rem;
  line-height: 1.6;
}

.monroe-memorial-tribute-page .monroe-tribute-intro__actions {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--primary {
  border-radius: 999px;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 0.7rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, var(--t-teal) 0%, #0b6b64 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--primary:hover,
.monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--primary:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(13, 148, 136, 0.28);
}

.monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--ghost {
  border-radius: 999px;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0.66rem 1.3rem;
  border: 2px solid rgba(15, 118, 110, 0.4);
  color: var(--t-teal);
  background: rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--ghost:hover,
.monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--ghost:focus-visible {
  background: rgba(15, 118, 110, 0.07);
  color: var(--t-teal-deep);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.12);
}

/* --------------------------------------------------------------------------
   Toolbar: search + count + A-Z rail (revealed by memorial-tribute.js)
   -------------------------------------------------------------------------- */
.monroe-memorial-tribute-page .monroe-tribute-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
  background: rgba(255, 255, 255, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-border);
}

.monroe-memorial-tribute-page .monroe-tribute-toolbar__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.monroe-memorial-tribute-page .monroe-tribute-search {
  position: relative;
  flex: 1 1 16rem;
  min-width: 12rem;
}

.monroe-memorial-tribute-page .monroe-tribute-search__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-muted-2);
  pointer-events: none;
  line-height: 0;
}

.monroe-memorial-tribute-page .monroe-tribute-search__input {
  width: 100%;
  padding: 0.65rem 2.4rem 0.65rem 2.5rem;
  border-radius: 999px;
  border: 1.5px solid rgba(23, 58, 57, 0.18);
  background: #fff;
  font-family: "Montserrat", "Jost", sans-serif;
  font-size: 0.95rem;
  color: var(--t-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.monroe-memorial-tribute-page .monroe-tribute-search__input::placeholder { color: #8a9b98; }

/* The component supplies its own accessible clear button. */
.monroe-memorial-tribute-page .monroe-tribute-search__input::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

.monroe-memorial-tribute-page .monroe-tribute-search__input:focus {
  outline: none;
  border-color: var(--t-teal-2);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.16);
}

.monroe-memorial-tribute-page .monroe-tribute-search__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  border: 0;
  background: rgba(23, 58, 57, 0.08);
  color: var(--t-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
}

.monroe-memorial-tribute-page .monroe-tribute-search__clear:hover { background: rgba(23, 58, 57, 0.15); }
.monroe-memorial-tribute-page .monroe-tribute-search.is-filled .monroe-tribute-search__clear { display: block; }

.monroe-memorial-tribute-page .monroe-tribute-toolbar__count {
  margin: 0;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--t-muted);
  white-space: nowrap;
}

.monroe-memorial-tribute-page .monroe-tribute-azrail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.6rem;
  transition: opacity 0.15s ease;
}

.monroe-memorial-tribute-page .monroe-tribute-azrail.is-muted {
  opacity: 0.35;
  pointer-events: none;
}

.monroe-memorial-tribute-page .monroe-tribute-azrail__btn {
  min-width: 1.65rem;
  padding: 0.24rem 0.3rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t-teal);
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.monroe-memorial-tribute-page .monroe-tribute-azrail__btn:hover,
.monroe-memorial-tribute-page .monroe-tribute-azrail__btn:focus-visible {
  background: rgba(13, 148, 136, 0.12);
  color: var(--t-teal-deep);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.monroe-memorial-tribute-page .monroe-tribute-section {
  padding: clamp(1.4rem, 3vw, 2rem) 0 0;
  background: linear-gradient(180deg, #f8faf9 0%, #fff 55%);
}

.monroe-memorial-tribute-page .monroe-tribute-section + .monroe-tribute-section {
  border-top: 1px solid var(--t-hairline);
}

.monroe-memorial-tribute-page .monroe-tribute-section__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0 clamp(1rem, 3vw, 1.5rem) 0.35rem;
}

.monroe-memorial-tribute-page .monroe-tribute-section__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-top: 0.15rem;
}

.monroe-memorial-tribute-page .monroe-tribute-section__mark--memory {
  background: rgba(13, 148, 136, 0.1);
  color: var(--t-teal);
}

.monroe-memorial-tribute-page .monroe-tribute-section__mark--honor {
  background: rgba(21, 128, 61, 0.1);
  color: var(--t-honor);
}

.monroe-memorial-tribute-page .monroe-tribute-section__mark--birthday {
  background: rgba(180, 83, 9, 0.1);
  color: var(--t-gold);
}

.monroe-memorial-tribute-page .monroe-tribute-section__title {
  margin: 0;
  font-family: "Abril Fatface", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.15;
  color: var(--t-ink);
}

.monroe-memorial-tribute-page .monroe-tribute-section__sub {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--t-muted-2);
  max-width: 42rem;
}

/* --------------------------------------------------------------------------
   Card grid + letter dividers
   -------------------------------------------------------------------------- */
/* Column width is tuned against the real 111-name list: 196px yields five
   columns at the 1120px board width. Each letter divider forces a row break,
   so narrower columns meaningfully offset the ragged rows they create. */
.monroe-memorial-tribute-page .monroe-tribute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
  gap: 0.7rem;
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

.monroe-memorial-tribute-page .monroe-tribute-letter {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.45rem 0 0.1rem;
  /* Clears the sticky toolbar when the A-Z rail jumps here. */
  scroll-margin-top: 132px;
}

.monroe-memorial-tribute-page .monroe-tribute-letter:first-child { margin-top: 0; }

.monroe-memorial-tribute-page .monroe-tribute-letter__glyph {
  font-family: "Abril Fatface", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--t-teal);
  background: rgba(13, 148, 136, 0.09);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.monroe-memorial-tribute-page .monroe-tribute-letter__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(23, 58, 57, 0.16), transparent);
}

.monroe-memorial-tribute-page .monroe-tribute-plaque {
  --plaque-accent: #0d9488;
  --plaque-accent-soft: rgba(13, 148, 136, 0.11);
  --plaque-border: rgba(13, 148, 136, 0.22);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 1rem 0.8rem 1.05rem;
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--plaque-border);
  background:
    radial-gradient(circle at 50% -10%, var(--plaque-accent-soft), transparent 58%),
    linear-gradient(145deg, #ffffff 0%, #fbfffe 55%, #f3fbf9 100%);
  box-shadow:
    0 9px 22px rgba(19, 71, 67, 0.08),
    0 2px 5px rgba(19, 71, 67, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.monroe-memorial-tribute-page .monroe-tribute-plaque--honor {
  --plaque-accent: #3f8f5d;
  --plaque-accent-soft: rgba(63, 143, 93, 0.12);
  --plaque-border: rgba(63, 143, 93, 0.22);
  background:
    radial-gradient(circle at 50% -10%, var(--plaque-accent-soft), transparent 58%),
    linear-gradient(145deg, #ffffff 0%, #fbfff9 55%, #f4fbf1 100%);
}

.monroe-memorial-tribute-page .monroe-tribute-plaque--birthday {
  --plaque-accent: #c27a20;
  --plaque-accent-soft: rgba(194, 122, 32, 0.12);
  --plaque-border: rgba(194, 122, 32, 0.23);
  background:
    radial-gradient(circle at 50% -10%, var(--plaque-accent-soft), transparent 58%),
    linear-gradient(145deg, #ffffff 0%, #fffdf8 55%, #fdf7e9 100%);
}

/* Inner engraved border */
.monroe-memorial-tribute-page .monroe-tribute-plaque::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--plaque-accent) 13%, transparent);
  pointer-events: none;
}

/* A tiny ribbon-like accent gives each card a keepsake feel. */
.monroe-memorial-tribute-page .monroe-tribute-plaque::after {
  content: "";
  position: absolute;
  top: 0;
  left: 27%;
  right: 27%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--plaque-accent), transparent);
  opacity: 0.72;
}

.monroe-memorial-tribute-page .monroe-tribute-plaque:hover {
  transform: translateY(-4px) rotate(-0.2deg);
  box-shadow:
    0 16px 34px rgba(19, 71, 67, 0.14),
    0 3px 8px rgba(19, 71, 67, 0.07),
    inset 0 1px 0 #fff;
  border-color: color-mix(in srgb, var(--plaque-accent) 42%, transparent);
}

@media (hover: none), (pointer: coarse) {
  .monroe-memorial-tribute-page .monroe-tribute-plaque:hover {
    transform: none;
    box-shadow:
      0 9px 22px rgba(19, 71, 67, 0.08),
      0 2px 5px rgba(19, 71, 67, 0.05);
    border-color: var(--plaque-border);
  }
}

.monroe-memorial-tribute-page .monroe-tribute-plaque__icon {
  position: relative;
  z-index: 1;
  width: 2.45rem;
  height: 2.45rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
  color: var(--plaque-accent);
  border: 1px solid color-mix(in srgb, var(--plaque-accent) 20%, transparent);
  border-radius: 48% 52% 50% 46%;
  background: color-mix(in srgb, var(--plaque-accent) 10%, white);
  box-shadow:
    0 4px 10px color-mix(in srgb, var(--plaque-accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.monroe-memorial-tribute-page .monroe-tribute-plaque__icon svg {
  width: 1.22rem;
  height: 1.22rem;
}

.monroe-memorial-tribute-page .monroe-tribute-plaque__watermark {
  position: absolute;
  z-index: -1;
  right: -0.55rem;
  bottom: -0.7rem;
  width: 4.6rem;
  height: 4.6rem;
  color: var(--plaque-accent);
  opacity: 0.055;
  transform: rotate(-18deg);
  pointer-events: none;
}

.monroe-memorial-tribute-page .monroe-tribute-plaque__watermark svg {
  width: 100%;
  height: 100%;
}

/* Printed only when the entry's line differs from its section heading. */
.monroe-memorial-tribute-page .monroe-tribute-plaque__type {
  margin: 0;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-muted-2);
}

.monroe-memorial-tribute-page .monroe-tribute-plaque--honor .monroe-tribute-plaque__type { color: var(--t-honor); }
.monroe-memorial-tribute-page .monroe-tribute-plaque--birthday .monroe-tribute-plaque__type { color: var(--t-gold); }

.monroe-memorial-tribute-page .monroe-tribute-plaque__name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--t-ink);
  text-wrap: balance;
}

.monroe-memorial-tribute-page .monroe-tribute-plaque__meta {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--t-muted-2);
}

/* --------------------------------------------------------------------------
   Empty / no-results
   -------------------------------------------------------------------------- */
.monroe-memorial-tribute-page .monroe-tribute-empty,
.monroe-memorial-tribute-page .monroe-tribute-noresults {
  margin: 0;
  padding: 2.75rem 1.5rem 3rem;
  text-align: center;
  color: var(--t-muted-2);
  font-size: 0.98rem;
  line-height: 1.6;
  background: #fff;
}

/* --------------------------------------------------------------------------
   Closing CTA + foot
   -------------------------------------------------------------------------- */
.monroe-memorial-tribute-page .monroe-tribute-closing {
  margin: clamp(1.25rem, 3vw, 1.85rem) clamp(1rem, 3vw, 1.5rem) 0;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: var(--t-r-md);
  border: 1px solid rgba(13, 148, 136, 0.22);
  background:
    radial-gradient(ellipse 120% 140% at 0% 0%, rgba(13, 148, 136, 0.09), transparent 60%),
    var(--t-cream);
  text-align: center;
}

.monroe-memorial-tribute-page .monroe-tribute-closing__title {
  margin: 0 0 0.4rem;
  font-family: "Abril Fatface", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  color: var(--t-ink);
}

.monroe-memorial-tribute-page .monroe-tribute-closing__text {
  margin: 0 auto 1.05rem;
  max-width: 38rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--t-muted);
}

.monroe-memorial-tribute-page .monroe-tribute-closing__actions {
  justify-content: center;
  gap: 0.65rem;
}

.monroe-memorial-tribute-page .monroe-tribute-foot {
  padding: 1.15rem 1.25rem 1.5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  text-align: center;
  font-size: 0.96rem;
  color: var(--t-muted);
  border-top: 1px solid var(--t-border);
  background: rgba(255, 250, 242, 0.5);
}

.monroe-memorial-tribute-page .monroe-tribute-foot a {
  color: var(--t-teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.monroe-memorial-tribute-page .monroe-tribute-foot a:hover,
.monroe-memorial-tribute-page .monroe-tribute-foot a:focus-visible {
  color: var(--t-teal-deep);
}

/* --------------------------------------------------------------------------
   Motion + small screens
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .monroe-memorial-tribute-page .monroe-tribute-plaque,
  .monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--primary,
  .monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--ghost {
    transition: none;
  }

  .monroe-memorial-tribute-page .monroe-tribute-plaque:hover,
  .monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--primary:hover,
  .monroe-memorial-tribute-page .monroe-tribute-btn.monroe-tribute-btn--ghost:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .monroe-memorial-tribute-page .monroe-tribute-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 0.65rem;
  }

  .monroe-memorial-tribute-page .monroe-tribute-plaque {
    min-height: 128px;
    padding: 0.9rem 0.6rem;
  }

  .monroe-memorial-tribute-page .monroe-tribute-plaque__name { font-size: 0.95rem; }

  .monroe-memorial-tribute-page .monroe-tribute-plaque__icon {
    width: 2.2rem;
    height: 2.2rem;
  }

  .monroe-memorial-tribute-page .monroe-tribute-toolbar__count {
    width: 100%;
    white-space: normal;
  }

  .monroe-memorial-tribute-page .monroe-tribute-letter { scroll-margin-top: 150px; }
}

/* ---------------------------------------------------------------------------
   Desktop screen utilization + mobile density
   -------------------------------------------------------------------------- */

/* Wide desktops: match the theme shell's 1320px content width (the board's
   1120px cap left asymmetric gutters inside a 1320px shell) and let the
   auto-fill grid pick up a sixth column. */
@media (min-width: 1360px) {
  .monroe-memorial-tribute-page .monroe-tribute-board {
    max-width: 1320px;
  }

  .monroe-memorial-tribute-page .monroe-tribute-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  }
}

/* Mobile: two compact plaque columns. A ~100-name wall at one plaque per
   row is a very long scroll; two columns halve it and short memorial names
   stay readable at this size. Letter dividers already span the full row. */
@media (max-width: 640px) {
  .monroe-memorial-tribute-page .monroe-tribute-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monroe-memorial-tribute-page .monroe-tribute-plaque {
    min-height: 112px;
    padding: 0.75rem 0.5rem;
    gap: 0.35rem;
  }

  .monroe-memorial-tribute-page .monroe-tribute-plaque__name {
    font-size: 0.85rem;
    line-height: 1.25;
  }

  .monroe-memorial-tribute-page .monroe-tribute-plaque__meta {
    font-size: 0.68rem;
  }

  .monroe-memorial-tribute-page .monroe-tribute-plaque__icon {
    width: 1.9rem;
    height: 1.9rem;
  }
}

/* Small screens: keep the search floating while browsing the wall, pinned
   below the fixed nav (offset tracks --monroe-nav-height). */
@media (max-width: 720px) {
  .monroe-memorial-tribute-page .monroe-tribute-toolbar {
    position: sticky;
    top: calc(var(--monroe-nav-height, 96px) + 8px);
    z-index: 20;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(15, 30, 29, 0.14);
    padding: 0.6rem;
  }
}