/* =====================================================================
   The Observer News — base stylesheet (theme-agnostic).
   Theme files override fonts/colors/spacing in /themes/<name>/style.css
   ===================================================================== */

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--c-text, #1c1c1c);
  background: var(--c-bg, #fafaf7);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary, #0b3d5c); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container.page-body { max-width: 820px; margin: 2rem auto; }  /* v37.1: comfortable reading width + auto-center (override .section's margin: 2rem 0) */

/* ---------- util bar / masthead / search ---------- */
.util-bar { background: var(--c-primary, #0b3d5c); color: #fff; font-size: .85rem; }
.util-bar__inner { display: flex; justify-content: space-between; padding: .35rem 1rem; flex-wrap: wrap; }
/* v39: weather widget in the util-bar — grouped on the left with the date */
.util-bar__left { display: inline-flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.util-bar__weather { display: inline-flex; align-items: center; gap: .3rem; opacity: .95; }
.util-bar__weather-loc { opacity: .75; font-size: .9em; }
.util-bar a, .util-bar__search { color: #fff; background: none; border: 0; cursor: pointer; font: inherit; }
.util-bar__links a { margin: 0 .4rem; }

.masthead { text-align: center; padding: 1.4rem 0 .6rem; }
.masthead__logo { max-height: 170px; margin: 0 auto; }
.masthead__fallback .masthead__title { font-family: 'Playfair Display', serif; font-size: 2.8rem; line-height: 1.05; letter-spacing: .02em; }
.masthead__fallback .masthead__sub   { font-style: italic; opacity: .8; }

.search-drawer { display: none; background: #ececec; padding: .6rem 0; }
.search-drawer.is-open { display: block; }
.search-drawer input { width: 70%; padding: .5rem; border: 1px solid #999; }
.search-drawer button { padding: .55rem 1rem; }

/* ---------- nav ---------- */
.mainnav { background: var(--c-menu-bg, #2e7d32); color: #fff; }
.mainnav__inner { display: flex; align-items: center; }
.mainnav__toggle { display: none; background: none; color: #fff; border: 0; padding: .6rem 1rem; cursor: pointer; }
.mainnav__list { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.mainnav__list > li { position: relative; }
.mainnav__list > li > a {
  display: block; color: #fff; padding: .8rem 1rem; font-weight: 600;
  text-transform: uppercase; font-size: .82rem; letter-spacing: .04em;
}
.mainnav__list > li > a:hover, .mainnav__list > li:focus-within > a {
  background: var(--c-menu-hover, #1b5e20); text-decoration: none;
}
.submenu {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--c-menu-bg, #2e7d32); list-style: none; padding: .3rem 0;
  min-width: 200px; z-index: 50; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu { display: block; }
.submenu li a { display: block; color: #fff; padding: .55rem 1rem; font-size: .85rem; }
.submenu li a:hover { background: var(--c-menu-hover, #1b5e20); }
.caret { font-size: .7em; margin-left: .15rem; }

@media (max-width: 800px) {
  .mainnav__toggle { display: block; }
  .mainnav__list { display: none; width: 100%; flex-direction: column; }
  .mainnav__list.is-open { display: flex; }
  .submenu { position: static; box-shadow: none; }
}

/* ---------- breaking bar ---------- */
.breaking { background: var(--c-accent, #a8201a); color: #fff; padding: .5rem 0; }
.breaking__pill { background: #fff; color: var(--c-accent, #a8201a); padding: .15rem .55rem; font-weight: 700; font-size: .75rem; border-radius: 3px; margin-right: .6rem; }
.breaking__title { color: #fff; font-weight: 600; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 1.6rem; margin-top: 1.2rem; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

.kicker { display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase;
          letter-spacing:.08em; color: var(--c-accent, #a8201a); margin-bottom:.4rem; }

.hero__lead-photo { margin-bottom: .7rem; }
.hero__lead-title { font-family:'Playfair Display', serif; font-size: clamp(1.6rem,3vw,2.7rem); line-height: 1.12; margin: .3rem 0 .5rem; }
.hero__lead-excerpt { font-size: 1.05rem; color: #444; }
.hero__caption, .article__hero figcaption, .article__inline figcaption { font-size:.85rem; color:#555; padding:.4rem .2rem 0; font-style: italic; }

.byline { font-size: .82rem; color: #666; margin-top:.3rem; }
.byline__more { color: var(--c-accent, #a8201a); font-weight: 600; margin-left: .6rem; }

/* ---------- carousel ---------- */

/* ---------- rail ---------- */
.hero__rail { border-left: 3px solid var(--c-primary, #0b3d5c); padding-left: 1rem; }
@media (max-width: 900px) { .hero__rail { border-left: 0; padding-left: 0; } }
.rail__title { font-family:'Playfair Display', serif; font-size:1.25rem; margin: 0 0 .8rem; }
.rail__item { display: grid; grid-template-columns: 80px 1fr; gap: .6rem; padding:.5rem 0; border-bottom: 1px solid #eaeaea; color: inherit; }
.rail__thumb { background:#eee; aspect-ratio: 1; overflow:hidden; }
.rail__thumb img { width:100%; height:100%; object-fit:cover; }
.rail__cat { font-size:.7rem; color:#888; font-weight:700; letter-spacing:.05em; }
.rail__title-2 { font-size: .98rem; margin:.15rem 0 0; line-height: 1.25; }

/* ---------- ad slots (v45.1: no whitespace framing the image) ----------
   The dashed beige placeholder only shows when a slot is empty. When a
   creative is present, the slot collapses around the image. The image
   keeps its height cap so small banners are NOT scaled up to 1200px. */
.ad-slot { display:flex; align-items:center; justify-content:center; margin:1rem 0; }
.ad-slot--rectangleinline { margin: 1.4rem 0; }
.ad-slot--empty {
  background:#f3f3ef; border:1px dashed #cfcfcf;
  min-height: var(--leader-h, 160px);
  color:#a0a0a0; font-size:.85rem; font-style:italic;
}
.ad-slot--empty.ad-slot--rectanglesidebar { min-height: 280px; }
.ad-slot--empty.ad-slot--rectangleinline  { min-height: 250px; }
.ad-slot--empty.ad-slot--sponsorstripa,
.ad-slot--empty.ad-slot--sponsorstripb    { min-height: 120px; }
.ad-slot__link img {
  display: block;
  max-height: calc(var(--leader-h, 160px) - 10px);
  max-width: 100%;
  height: auto;
  width: auto;
}

.ad-inline { margin: 1.6rem 0; }

/* ---------- sections / cards ---------- */
.section { margin-top: 2rem; margin-bottom: 2rem; }  /* v38: longhand so .container's auto horizontal margins are preserved */
.section__title { font-family:'Playfair Display', serif; font-size:1.7rem; border-bottom: 3px double var(--c-primary, #0b3d5c); padding-bottom:.4rem; }
.section__sub   { font-family:'Playfair Display', serif; font-size:1.15rem; margin: 1.4rem 0 .6rem; color:#666; }

.headline-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1.2rem; }
.headline-card { display:block; color:inherit; background:#fff; border:1px solid #eee; padding:.6rem; }
.headline-card__photo { aspect-ratio: 16/10; background:#eee; overflow:hidden; margin-bottom:.5rem; }
.headline-card__photo img { width:100%; height:100%; object-fit:cover; }
.headline-card__title { font-family:'Playfair Display', serif; font-size:1.15rem; margin:0 0 .3rem; }

/* v38: From Our Communities — card grid (thumbnail + title + date) */
.city-grid-section            { /* uses .container + .section spacing */ }
.city-grid-section__head      { text-align: center; margin: 0 0 1.4rem; }
.city-grid-section__title     { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--c-menu-bg, #2e7d32); margin: 0 0 .25rem; letter-spacing: .02em; }
.city-grid-section__subtitle  { font-family: 'Source Sans 3', sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: #666; margin: 0; }

.city-grid                    { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.city-col                     { background: #fff; border: 1px solid #eee; padding: 1rem; min-height: 120px; }
.city-col__title              { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--c-menu-bg, #2e7d32); margin: 0 0 .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--c-menu-bg, #2e7d32); }

.city-card                    { display: block; color: inherit; text-decoration: none; }
.city-card:hover              { text-decoration: none; }
.city-card:hover .city-card__title { color: var(--c-accent, #a8201a); }
.city-card__photo             { aspect-ratio: 16/10; background: #eee; overflow: hidden; margin: .6rem 0 .6rem; }
.city-card__photo img         { width: 100%; height: 100%; object-fit: cover; display: block; }
.city-card__title             { font-family: 'Playfair Display', serif; font-size: 1.05rem; line-height: 1.25; margin: 0 0 .25rem; color: var(--c-text, #1c1c1c); }
.city-card__date              { font-size: .8rem; color: #888; margin: 0; }
.city-card__empty             { font-family: 'Lora', Georgia, serif; font-style: italic; color: #999; margin: .8rem 0 0; }

/* ---------- article ---------- */
.article { max-width: 820px; }
.article__head { padding: 1.6rem 0 1rem; }
.article__kicker { color: var(--c-accent, #a8201a); font-weight:700; letter-spacing:.06em; font-size:.85rem; }
.article__title { font-family:'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, var(--art-title-max, 3.2rem)); line-height:1.1; margin: .4rem 0 .6rem; }
.article__dek { font-size:1.15rem; color:#444; }
.article__byline { color:#666; font-size:.9rem; }
.article__hero { margin: 1rem 0 1.6rem; }
.article__body,
.page-body          { font-family:'Lora', Georgia, serif; font-size:1.08rem; line-height: 1.7; }
.article__body p,
.page-body p        { margin: 0 0 1em; }
.article__body h2, .article__body h3,
.page-body h2,    .page-body h3      { font-family:'Playfair Display', serif; line-height:1.2; }

.article__inline { margin: 1rem 0; }
.article__inline--left  { float:left; margin: .3rem 1.2rem 1rem 0; max-width: 45%; }
.article__inline--right { float:right; margin: .3rem 0 1rem 1.2rem; max-width: 45%; }
.article__inline--center{ margin: 1rem auto; max-width: 95%; }

.tts-btn { margin-left:.6rem; padding:.2rem .55rem; background:var(--c-primary,#0b3d5c); color:#fff; border:0; border-radius:3px; font:inherit; cursor:pointer; }
.tts-btn.is-playing { background: var(--c-accent, #a8201a); }

/* ---------- forms / generic ---------- */
.btn { display:inline-block; padding:.55rem 1rem; background: var(--c-primary,#0b3d5c); color:#fff; border:0; cursor:pointer; }
.btn:hover { background: var(--c-accent, #a8201a); text-decoration: none; color: #fff; }

.placeholder-card { padding: 2rem; background: #f5f3ec; border: 1px dashed #cdc; text-align: center; }
.flash { padding: .7rem 1rem; margin: .8rem 0; border-radius: 4px; }
.flash--success { background: #e3f4e1; color: #2c5d2a; }
.flash--error   { background: #fde8e8; color: #8a1f1f; }
.flash--info    { background: #eaf3fb; color: #1f4a7a; }

/* ---------- classifieds / obits / reps ---------- */
.cf-nav { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 1.6rem; }
.cf-nav__link { padding:.3rem .7rem; background:#eee; border-radius:3px; color: #333; }
.cf-nav__link.is-active { background: var(--c-primary,#0b3d5c); color:#fff; }
.cf-grid, .obit-grid, .rep-grid, .article-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem;
}
.cf-card, .obit-card, .rep-card, .story-card {
  background:#fff; border: 1px solid #ececec; padding: .8rem;
}
.cf-card__photo, .obit-card__photo, .story-card__photo { margin-bottom:.5rem; }
.cf-card__title, .obit-card__name, .story-card__title { font-family:'Playfair Display', serif; font-size:1.1rem; margin:.2rem 0; }
.cf-card__price { font-weight:700; color: var(--c-accent, #a8201a); }
.rep-card__photo { width: 110px; height: 110px; border-radius:50%; object-fit: cover; margin: 0 auto .6rem; }
.rep-card__photo--blank { background: #ddd; }
.rep-card { text-align: center; }

/* ---------- edition / flipbook ---------- */
.edition__viewer { aspect-ratio: 4/3; border: 1px solid #ddd; background:#000; }
.edition__viewer iframe { width:100%; height:100%; border:0; }

/* ---------- footer ---------- */
.site-footer { background: #1c1c1c; color: #ddd; padding: 2rem 0 1rem; margin-top: 3rem; }
.site-footer a { color: #ddd; }
.site-footer__grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 800px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.site-footer__brand { font-family:'Playfair Display', serif; font-size:1.4rem; color:#fff; margin-bottom:.3rem; }
.site-footer__h { font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; color:#fff; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { padding:.18rem 0; }
.site-footer__copy { text-align: center; font-size: .82rem; color:#888; border-top: 1px solid #333; margin-top:1.2rem; padding-top:1rem; }
.footer-news input { padding:.4rem; width: 100%; margin-bottom:.3rem; }
.footer-news button { padding: .45rem .8rem; }

/* ---------- In-page ad rotator ---------- */
.ad-slot--rotating { position: relative; overflow: hidden; display: grid; place-items: center; }
.ad-slot--rotating .ad-creative {
  grid-area: 1 / 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.ad-slot--rotating .ad-creative.is-active {
  opacity: 1; pointer-events: auto;
}
.ad-slot--rotating .ad-creative img { max-height: 100%; }

/* ---------- Lead carousel — thumbnail strip ---------- */
.lead-carousel__thumbs {
  display: flex; gap: .5rem; overflow-x: auto;
  margin-top: .8rem; padding-bottom: .4rem;
  scrollbar-width: thin;
}
.lead-carousel__thumb {
  flex: 0 0 120px; padding: 0; border: 2px solid transparent;
  background: #fff; border-radius: 4px; cursor: pointer; text-align: left;
  transition: border-color .15s, transform .15s;
}
.lead-carousel__thumb img {
  display: block; width: 100%; height: 72px;
  object-fit: cover; border-radius: 2px 2px 0 0;
}
.lead-carousel__thumb-title {
  display: block; font-size: .78rem; padding: .3rem .4rem;
  line-height: 1.2; color: #1c1c1c;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
 * Lead carousel — title overlay on photo + image-only thumb strip
 * ============================================================ */

.lead-carousel { position: relative; }
.lead-carousel__track {
  position: relative;
  min-height: 380px;
  background: #1a1a1a;
  overflow: hidden;
}
.lead-carousel__slide,
.hero__lead-link.lead-carousel__slide {
  display: none;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.lead-carousel__slide.is-active { display: block; }

.lead-carousel__slide .hero__lead-photo {
  margin: 0;
  height: 460px;
  overflow: hidden;
}
.lead-carousel__slide .hero__lead-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Caption overlay sitting on the bottom of the image */
.lead-carousel__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.6rem 1.3rem;
  color: #fff;
  background: linear-gradient(to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.lead-carousel__caption .article__kicker {
  display: inline-block;
  background: #a8201a;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .25rem .55rem;
  margin: 0 0 .55rem 0;
  text-transform: uppercase;
}
.lead-carousel__caption .hero__lead-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  margin: 0 0 .4rem 0;
  font-weight: 700;
}
.lead-carousel__caption .byline {
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  letter-spacing: .04em;
  font-weight: 600;
}

/* Prev / next arrows — small red squares on the right edge */
.lead-carousel__arrow {
  position: absolute;
  right: 0;
  width: 40px; height: 40px;
  background: #a8201a;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  appearance: none;
  -webkit-appearance: none;
}
.lead-carousel__arrow svg { display: block; }
.lead-carousel__arrow:hover { filter: brightness(1.1); }
.lead-carousel__arrow--next { top: 50%; transform: translateY(-50%); }
.lead-carousel__arrow--prev { top: calc(50% + 44px); transform: translateY(-50%); }

/* ============================================================
 * Thumbnail strip — image-only, with a caret above the active one
 * ============================================================ */
.lead-carousel__thumbs {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: 1.6rem 0 .6rem;
  scrollbar-width: thin;
}
.lead-carousel__thumb {
  flex: 0 0 110px;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .15s;
}
.lead-carousel__thumb:hover { transform: translateY(-2px); }
.lead-carousel__thumb img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 2px;
}

/* Downward-pointing caret that sits above the active thumbnail */
.lead-carousel__thumb-caret {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #333;
  opacity: 0;
  transition: opacity .15s;
}
.lead-carousel__thumb.is-active .lead-carousel__thumb-caret { opacity: 1; }
.lead-carousel__thumb.is-active img { outline: 2px solid #333; outline-offset: 0; }

/* ============================================================
 * Accessibility — reader-controlled text size
 * ============================================================
 * Default (--readable-scale: 1). Larger options shift it up.
 * Scaling is applied only to body-text elements, not navigation
 * or headlines, so layout stays put as the text grows. */

body { --readable-scale: 1; }
body[data-text-scale="2"] { --readable-scale: 1.18; }
body[data-text-scale="3"] { --readable-scale: 1.35; }

.article__body,
.article__body p,
.article__body li,
.article__body blockquote,
.page-body,
.page-body p,
.page-body li,
.page-body blockquote { font-size: calc(17px * var(--readable-scale, 1)); line-height: 1.65; }
.article__dek            { font-size: calc(1.15rem * var(--readable-scale, 1)); }
.story-card__excerpt     { font-size: calc(.95rem * var(--readable-scale, 1)); }
.story-card__title       { font-size: calc(1.1rem  * var(--readable-scale, 1)); }
.byline                  { font-size: calc(.88rem * var(--readable-scale, 1)); }
.hero__lead-excerpt      { font-size: calc(1.1rem * var(--readable-scale, 1)); }
.headline-card__title    { font-size: calc(1rem  * var(--readable-scale, 1)); }
.page-body               { font-size: calc(17px * var(--readable-scale, 1)); line-height: 1.65; }
.cf-card__body, .obit-card__body { font-size: calc(.95rem * var(--readable-scale, 1)); }
figcaption               { font-size: calc(.85rem * var(--readable-scale, 1)); }

/* The A-/A/A+ button group sitting in the top utility bar */
.util-bar__a11y { display: inline-flex; gap: .15rem; align-items: center; vertical-align: middle; }
.util-bar__a11y button {
  font: inherit;
  background: transparent;
  color: inherit;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 3px;
  cursor: pointer;
  padding: .05rem .45rem;
  line-height: 1.2;
  min-width: 1.8em;
  text-align: center;
}
.util-bar__a11y button:first-child   { font-size: .8em; }
.util-bar__a11y button:nth-child(2)  { font-size: 1em; }
.util-bar__a11y button:last-child    { font-size: 1.15em; font-weight: 700; }
.util-bar__a11y button:hover { background: rgba(0,0,0,.06); }
.util-bar__a11y button:focus { outline: 2px solid var(--c-primary, #0b3d5c); outline-offset: 1px; }

/* ============================================================
 * Padding around images dropped into article bodies via TinyMCE.
 * TinyMCE writes `style="float: left;"` / `style="float: right;"`
 * directly on the <img> or wrapping <figure>. Without margin, text
 * wraps tight against the image. These rules give the text room
 * to breathe.
 * ============================================================ */
.article__body img[style*="float: left"],
.article__body img[style*="float:left"],
.article__body figure[style*="float: left"],
.article__body figure[style*="float:left"],
.article__body .align-left,
.page-body img[style*="float: left"],
.page-body img[style*="float:left"],
.page-body figure[style*="float: left"],
.page-body figure[style*="float:left"],
.page-body .align-left {
  float: left;
  margin: .3rem 1.4rem .9rem 0;
  max-width: 50%;
}
.article__body img[style*="float: right"],
.article__body img[style*="float:right"],
.article__body figure[style*="float: right"],
.article__body figure[style*="float:right"],
.article__body .align-right,
.page-body img[style*="float: right"],
.page-body img[style*="float:right"],
.page-body figure[style*="float: right"],
.page-body figure[style*="float:right"],
.page-body .align-right {
  float: right;
  margin: .3rem 0 .9rem 1.4rem;
  max-width: 50%;
}
.article__body img[style*="margin-left: auto"],
.article__body figure[style*="margin-left: auto"],
.article__body .align-center,
.page-body img[style*="margin-left: auto"],
.page-body figure[style*="margin-left: auto"],
.page-body .align-center {
  display: block;
  margin: 1.1rem auto;
  max-width: 95%;
}

/* When the image stretches across the full text width, still give it
 * top/bottom breathing room. */
.article__body img:not([style*="float"]):not([style*="margin-left: auto"]),
.page-body img:not([style*="float"]):not([style*="margin-left: auto"]) {
  margin: 1rem 0;
}

/* TinyMCE wraps captioned images in <figure>. Using display:table makes the
 * figure shrink to the image, and a table-caption forces the caption text to
 * wrap to the IMAGE width instead of overhanging it. */
.article__body figure,
.page-body figure,
.article__inline { display: table; width: auto; max-width: 100%; margin: 1rem 0; }
.article__body figure img,
.page-body figure img,
.article__inline img { display: block; max-width: 100%; height: auto; }
.article__body figure figcaption,
.page-body figure figcaption,
.article__inline figcaption {
  display: table-caption; caption-side: bottom;
  font-size: .85rem; color: #555; padding: .4rem .2rem 0; font-style: italic;
}
/* Centered figures: keep them centered while shrunk to the image. */
.article__body figure[style*="margin-left: auto"],
.page-body figure[style*="margin-left: auto"],
.article__body figure.align-center,
.page-body figure.align-center,
.article__inline--center { display: table; margin-left: auto; margin-right: auto; }

/* Make sure paragraphs after a floated image clear properly if the
 * floated image is taller than the following text. */
.article__body p,
.page-body p { overflow-wrap: break-word; }

/* ============================================================
 * v40 — Editor-friendly table / callout / bar styling
 * Applies to TinyMCE-inserted blocks inside .page-body (CMS pages)
 * and .article__body (articles). Lets editors build the deadlines
 * table and "Ready to talk" callouts visually with the green
 * Observer News look.
 * ============================================================ */

.page-body table,
.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  background: #fff;
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: .98rem;
}
.page-body table th,
.article__body table th,
.page-body table thead td,
.article__body table thead td {
  background: var(--c-menu-bg, #2e7d32);
  color: #fff;
  text-align: left;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .65rem .9rem;
  font-size: .85rem;
  border: 0;
}
.page-body table td,
.article__body table td {
  padding: .55rem .9rem;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
}
.page-body table tbody tr:nth-child(even) td,
.article__body table tbody tr:nth-child(even) td {
  background: #f8f7f1;
}
.page-body table tbody tr:hover td,
.article__body table tbody tr:hover td {
  background: #efece2;
}

/* Beige "Ready to talk?" / sidebar-style box */
.page-body .callout,
.article__body .callout {
  background: #f5f0e3;
  border-left: 6px solid var(--c-menu-bg, #2e7d32);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  font-size: 1rem;
}
.page-body .callout p:last-child,
.article__body .callout p:last-child { margin-bottom: 0; }

/* Solid green section header bar (the "DEADLINES" style label) */
.page-body .section-bar,
.article__body .section-bar {
  display: block;
  background: var(--c-menu-bg, #2e7d32);
  color: #fff;
  padding: .55rem 1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 1.6rem 0 .6rem;
}

/* Heavy double-rule divider */
.page-body hr.divider,
.article__body hr.divider {
  border: 0;
  border-top: 4px double var(--c-primary, #0b3d5c);
  margin: 1.8rem 0;
}

/* ---------- v40 Advertise page: extras above the body ---------- */
.advertise-top              { margin: 0 0 1.4rem; }
.advertise-top .rate-link   { text-align: left; margin: 0 0 1.4rem; }
.advertise-top .section__sub{ margin-top: 0; }
.advertise-divider {
  border: 0;
  border-top: 2px solid var(--c-menu-bg, #2e7d32);
  margin: 1.6rem 0 1.8rem;
}
.btn.btn--lg {
  font-size: 1.05rem;
  padding: .8rem 1.4rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Rep card refinements (still centered, but tighten spacing) */
.rep-card__name  { font-family:'Playfair Display', serif; font-size:1.15rem; margin:.2rem 0 .2rem; }
.rep-card__title { font-family:'Source Sans 3', sans-serif; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--c-menu-bg, #2e7d32); margin-bottom:.4rem; }
.rep-card__email a { color: var(--c-menu-bg, #2e7d32); }
.rep-card__phone { color:#555; font-size:.95rem; }

/* ============================================================
 * v41.1 — CMS page title default sizing (per-page font/size
 * applied via inline style from pages.title_font / title_size;
 * this rule supplies the fallback for pages that don't override).
 * Plus subtitle/tagline rendered under the H1.
 * ============================================================ */
.page-body .section__title,
.page-body .page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.15;
  margin: .3rem 0 .4rem;
}

.page-body .page-subtitle {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #555;
  margin: 0 0 1.2rem;
  line-height: 1.45;
  max-width: 720px;
}
/* center the subtitle when the title is centered (admin per-page setting) */
.page-body .page-subtitle[style*="center"] { margin-left: auto; margin-right: auto; }

/* =====================================================
   v42 — Video / YouTube support
   Hub grid, single-video page, in-article responsive 16:9 embeds.
   IMPORTANT (per project CSS cascade gotcha): any rule for a
   `.container.section` MUST re-assert `margin: 0 auto` because
   `.section { margin: 2rem 0 }` (line ~118) wins on horizontal axis.
   ===================================================== */

/* --- Hub layout --- */
.container.videos-hub          { max-width: 1100px; margin: 2rem auto; }
.videos-hub__head              { text-align: center; margin: 0 0 1.4rem; }
.videos-hub__head .section__title { display: inline-block; border-bottom: 3px double var(--c-primary, #0b3d5c); padding: 0 .6rem .4rem; }
.videos-hub__head .section__sub   { margin-top: .5rem; }
.videos-hub__pager             { display:flex; gap:.4rem; justify-content:center; margin: 1.4rem 0; }
.videos-hub__pager a,
.videos-hub__pager strong      { padding: .3rem .6rem; border:1px solid #ccc; border-radius:3px; text-decoration:none; }
.videos-hub__pager strong      { background: var(--c-primary, #0b3d5c); color:#fff; border-color: var(--c-primary, #0b3d5c); }

/* --- Single-video page --- */
.container.video-single        { max-width: 900px; margin: 2rem auto; }
.video-single__desc            { margin-top: 1rem; font-family: 'Lora', Georgia, serif; line-height: 1.6; color: #333; }

/* --- Grid of cards (shared between hub and "more videos" strip) --- */
.video-grid                    {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 0;
}
.video-card                    {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.video-card:hover              { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.video-card__poster            {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.video-card__poster img        { width:100%; height:100%; object-fit: cover; display:block; }
.video-card__play              {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.6rem; text-shadow: 0 2px 8px rgba(0,0,0,.6);
  pointer-events: none;
  opacity: .85;
  transition: opacity .12s ease;
}
.video-card:hover .video-card__play { opacity: 1; }
.video-card__sponsor,
.video-card__featured          {
  position: absolute;
  top: .5rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .45rem;
  border-radius: 3px;
  color: #fff;
}
.video-card__sponsor           { left: .5rem; background: #a8201a; }
.video-card__featured          { right: .5rem; background: var(--c-primary, #0b3d5c); }
.video-card__meta              { padding: .7rem .9rem .9rem; }
.video-card__title             {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  margin: 0 0 .3rem;
  line-height: 1.25;
  color: #1c1c1c;
}
.video-card__date              { font-size: .82rem; color: #777; }

/* --- Responsive 16:9 in-body embed --- */
.video-embed                   { margin: 1.6rem 0; }
.video-embed__frame            {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.video-embed__frame iframe,
.video-embed__frame video      {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.video-embed figcaption        {
  margin-top: .5rem;
  font-size: .9rem;
  color: #666;
  font-style: italic;
  text-align: center;
}
.video-embed__sponsor          {
  display: inline-block;
  margin-bottom: .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: #a8201a;
  padding: .2rem .5rem;
  border-radius: 3px;
}

/* =====================================================================
   v45.2 — thumb strip redesign + masthead bg mask
   ===================================================================== */

/* Snug + bigger thumbs with a title overlay on each card.
   These rules override the second .lead-carousel__thumbs block earlier
   in this file (later wins on equal specificity). */
.lead-carousel__thumbs {
  padding: .35rem 0 .5rem !important;   /* squash the 1.6rem top gap */
  gap: .55rem !important;
}
.lead-carousel__thumb {
  flex: 0 0 180px !important;
  position: relative;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 4px;
  background: #000;                      /* shows behind the title gradient */
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lead-carousel__thumb img {
  display: block !important;
  width: 100% !important;
  height: 110px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  opacity: .9;
  transition: opacity .15s ease;
}
.lead-carousel__thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.lead-carousel__thumb:hover img,
.lead-carousel__thumb.is-active img { opacity: 1; outline: 0 !important; }
.lead-carousel__thumb.is-active {
  border-color: var(--c-accent, #a8201a);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
/* Hide the legacy little down-caret — the border + title carry it now. */
.lead-carousel__thumb-caret { display: none !important; }
/* Article title overlay along the bottom edge of the thumb. */
.lead-carousel__thumb-title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .5rem .45rem;
  font-family: 'Playfair Display', serif;
  font-size: .8rem;
  line-height: 1.18;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.86) 35%, rgba(0,0,0,0));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 700px) {
  .lead-carousel__thumb { flex: 0 0 140px !important; }
  .lead-carousel__thumb img { height: 86px !important; }
  .lead-carousel__thumb-title { font-size: .74rem; padding-top: 1.2rem; }
}

/* Mask the home-page background so it cannot show through the masthead
   or util bar. Util-bar already has its own primary-color bg; masthead
   was transparent and was letting bg_home bleed up to the top. */
body.is-home .masthead,
body.is-home .search-drawer { background: var(--c-bg, #fafaf7); }

/* ---------------------------------------------------------------
   Archive page (archive.php) + archived-article notice
   --------------------------------------------------------------- */
.archive__intro      { color:#555; margin:.2rem 0 1.1rem; max-width:60ch; }
.archive__search     { background:#f4f2ec; border:1px solid #e2dfd4; border-radius:8px; padding:.9rem 1rem; margin-bottom:1.6rem; }
.archive__search-row { display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; }
.archive__field      { display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; color:#555; }
.archive__field span { font-weight:600; }
.archive__field input{ padding:.45rem .6rem; border:1px solid #cfcabb; border-radius:5px; font:inherit; background:#fff; }
.archive__field--grow{ flex:1 1 260px; }
.archive__field--grow input{ width:100%; }
.archive__actions    { display:flex; gap:.5rem; }
.archive__count      { color:#555; margin:.2rem 0 1rem; }
.archive__empty      { color:#666; padding:1rem 0; }
.archive__hint       { color:#777; font-size:.9rem; margin-top:1.2rem; }
.archive__pager      { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.8rem 0 .4rem; }
.archive__pager-status{ color:#666; font-size:.9rem; }

.btn--ghost          { background:transparent; color:var(--c-primary,#0b3d5c); border:1px solid currentColor; }
.btn--ghost:hover    { background:rgba(11,61,92,.08); }

/* ============================================================
 * Obituaries page — banner, grouped grid, detail   2026-06
 * ============================================================ */
.obit-banner{position:relative;background-size:cover;background-position:center;min-height:210px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.obit-banner__title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2rem,5vw,3.2rem);color:#23303a;background:rgba(255,255,255,.55);padding:.3rem 1.5rem;border-radius:4px;margin:0;letter-spacing:.02em}
.obit-issue{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;color:#0b3d5c;border-bottom:2px solid #e6e6df;padding-bottom:.3rem;margin:1.6rem 0 1rem}
.obit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.2rem}
.obit-card{display:block;text-decoration:none;color:inherit;text-align:center}
.obit-card__photo{width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:#eee;border:1px solid #e0e0d8}
.obit-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
.obit-card__name{font-family:'Playfair Display',Georgia,serif;font-size:1rem;margin:.5rem 0 .15rem;color:#1c1c1c}
.obit-card:hover .obit-card__name{color:#0b3d5c;text-decoration:underline}
.obit-card__dates{font-size:.82rem;color:#666;margin:0}
.obit-archive{margin-top:2.4rem}
.obit-search{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin-bottom:1.2rem}
.obit-search input{padding:.45rem;border:1px solid #cfcfc7;border-radius:3px;font:inherit}
.obit-clear{margin-left:.2rem;font-size:.9rem}
.obit-detail__back{margin:0 0 .4rem}
.obit-detail__name{font-family:'Playfair Display',Georgia,serif;margin:.2rem 0 .1rem}
.obit-detail__dates{color:#666;font-style:italic;margin:0 0 1rem}
.obit-detail__photo{float:left;width:240px;max-width:40%;margin:.2rem 1.4rem 1rem 0}
.obit-detail__photo img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid #e0e0d8}
.obit-detail__body{line-height:1.7}
.obit-detail__service{clear:both;margin-top:1.4rem;padding-top:1rem;border-top:1px solid #e6e6df}
@media (max-width:560px){.obit-detail__photo{float:none;width:100%;max-width:100%;margin:0 0 1rem}}