/* DO NOT EDIT THIS FILE DIRECTLY */
/* Minimal baseline styles for early layout scaffolding.
   This theme's original CSS pipeline isn't currently populated, so keep
   this file small and focused on structural elements.
*/

:root {
  --container-max: 70rem;
  --surface: #ffffff;
  --surface-2: #f3f5f7;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15, 23, 42, 0.12);
  --shadow: 0 10px 30px rgba(2, 8, 23, 0.10);
  --color-darkblue: #0b141b;
  --color-medblue: #0d3e62;
  --color-brightblue: #0c78bd;
  --color-green: #014221;
  --color-brightgreen: #89c540;
  --color-white: #ffffff;
}


/* Anchor links (e.g. the Resources sub-menu) glide to their target instead of
   jumping. scroll-padding-top keeps the heading clear of the sticky header,
   whose bar is 5rem tall. */
html {
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
/*  font-weight: <weight>;*/
  font-style: normal;
}



/* Full-height column so the footer sits at the bottom of the viewport on
   short pages (footer takes margin-top: auto below) rather than floating
   partway up. */
.site-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  position: relative;
  z-index: 10;
}

/* Buttons (used by hero and feature sections) */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary {
  background: #0b4a6f;
  color: #fff;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Homepage hero */
.hero {
  text-align: left;
  max-width: 85%;
  margin: 0 auto;
  padding: 24px 0;
}

/* ── Countdown timer ── */
.hero-countdown__timer {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem;
  font-variant-numeric: tabular-nums;
}

/* ── Live stream hero ── */
.site-hero--live {
  position: relative;
  overflow: hidden;
}

.site-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.site-hero--live::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Live mode: dark scrim over the video for text legibility. Overrides the
   branded colored gradient on .site-hero.large::before (higher specificity). */
.site-hero.large.site-hero--live::before {
  background: rgba(0, 0, 0, 0.3);
}

.site-hero--live > .container {
  position: relative;
  z-index: 2;
}

.hero-live__badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

/* The live heading is a fixed phrase, and the longest one ("Testimony meeting
   in progress") wraps at the shared 4.5rem title size. Scale it down for the
   live hero only so it stays on one line at desktop widths; the rem cap keeps
   it from overflowing the container on wide monitors, and it still wraps on
   phones (as the Sunday phrase already does). */
.site-hero--live .hero-banner__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
}

/* ── Default hero ── */

/* The site name runs long, and at the shared 4.5rem title size it wraps to
   three lines on desktop. Scale it for the default hero only, as live mode
   does for its own fixed phrase. */
.hero-banner--default .hero-banner__title {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 700;
}
.hero-tagline {
  color: var(--color-medblue);
  display: block;
  font-size: clamp(1.3rem, 2.8vw, 2.25rem);
  font-style: italic;
  font-family: "Asap Condensed", sans-serif;
  font-weight: 200;
  text-shadow: none;
  margin: auto;
  text-align: center;
}
.hero-tagline__source {
  display: block;
  font-size: 0.5em;
  font-style: normal;
  font-weight: 400;
  margin-top: 0.25rem;
}

/* ── Announcement banner ── */
.hero-banner {
  margin-top: 16px;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-banner__title {
  font-weight: 100;
  font-size: 4.5rem;
  padding: 0 1rem;
}

.hero-banner__meta {
  font-size: 14px;
  opacity: 0.9;
  padding: .5rem 1rem 2rem;

}

.hero-banner__countdown {
  font-size: 1.125rem;
  font-weight: 600;
  opacity: 0.95;
  font-variant-numeric: tabular-nums;
}

.hero-banner__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Hero banner with foreground image */
.hero-banner--has-fg {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hero-banner__body {
  flex: 1;
  min-width: 0;
}

.hero-banner__fg {
  flex-shrink: 0;
  width: 12rem;
}

.hero-banner__fg img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

/* Hero with background image (announcement mode) */
.site-hero--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.site-hero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.site-hero--bg > * {
  position: relative;
  z-index: 10;
}
/* ── Site hero (Default ) ── */
.hero-banner.hero-banner--default {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: none;
  text-align: center;
  padding:3rem 1.5rem;
}
.site-hero.large.site-hero--default{ 
  color:var(--color-darkblue);
  text-shadow:none;
}
.site-hero--default hr {
  border: none;
  border-top: 1px solid #96b4c5;
  margin: 1.5rem auto 1rem;
}
.hero-banner__content{
  font-style:italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  margin:1rem 0;
}
/* Tiles: these are the "boxes" from the mockup. */
.home-tiles {
  background: var(--surface-2);
  padding: 2.5rem 0 3.5rem;
  position: relative;
  z-index: 10;
}

.tile-grid {
  display: grid;
  gap: 4vh;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tile {
  display: block;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  min-height: 120px;
}

.tile__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.tile__desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.tile:hover {
  transform: translateY(-1px);
}

/* Tiles Background images and animation - home page and other pages */
.container-home-tile{
  padding: 0 10vh;
}
/* 1. Parent container - ensures scaling is contained */
.img-container {
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  display: inline-block;
}
.container-home-tile a, .container-link-tile a {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: inherit;
  display: block;
  min-height: 120px;
  margin:0;
  overflow:hidden;
  position: relative;
  padding:0;
  text-decoration: none;
  width: 100%;
}
.entry-content .container-link-tile{
  line-height: 1rem;
}
/* 2. The Image - ensure it stays at the bottom of the stack */
.container-home-tile img, .container-link-tile img, .entry-content .container-link-tile img{
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
  border-radius: 16px;
}

/* 3. The Gradient Overlay - sits on top of image, below text */
.container-home-tile a::after, .container-link-tile a::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,.1) 50%, rgba(0,0,0, .8) 100%);
  z-index: 1; /* Higher than image */
  pointer-events: none;
  border-radius: 16px;
}

/* 4. The Text - sits on top of everything */
.container-home-tile a div, .container-link-tile a strong { 
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  padding:2rem 0 0 0;
  margin: 0 auto -6rem ;
  position: relative;
  color: white;
  z-index: 2; /* Higher than gradient */
  transition: transform 0.5s ease;
}
.container-link-tile span{
  color:#fff;
  display: block;
  margin-bottom:-6rem;
  padding:0 .5rem;
  position: relative;
  text-align: center;
  z-index: 10;
}
.container-link-tile span strong{
  font-size: 1.1rem;
  line-height: 1.5rem;
}
/* 5. Hover Effect - Scale only the image */
.img-container:hover img{
  transform: scale(1.1);
}

/* Scale effect on hover */
.img-container a:hover img {
  transform: scale(1.2); /* Zooms  */
}
/* Scale effect on hover */
.img-container a:hover div, .container-link-tile a:hover strong{
  transition: transform 0.5s ease; /* Controls speed and smoothness */
  transform: scale(1.4); /* Zooms */
}

/* Feature section */
.home-feature {
  background: var(--surface);
  padding: 36px 0;
}
/* title with background images, no movement */
.resource-card-imageheader h3{
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0) 100%);
  border-radius: 15px 15px 0 0;
  color: #fff;
  display: block;
  height:4rem;
  font-size:1.3rem;
  line-height:1.35rem;
  text-align: center;
  margin: 0 0 -6rem 0;
  padding:1.5rem .2rem 0 ;
  position: relative;
  z-index: 10;
}
.resource-card--textoverlay{
  color: #fff;
  display: block;
  font-family: "Asap Condensed", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size:1.5rem;
  line-height: 1.75rem;
  padding: 1rem;
  position: absolute;
  text-align: left;
  text-shadow:1px 1px 1px #333;
  z-index: 10;
}
.resource-card--textoverlay strong{
  font-size: 1.75rem;
  font-weight: 400;

}
.resource-card-imageheader img{
  border-radius: 15px;
}


.feature-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
}

.feature-copy h2 {
  margin: 0 0 10px;
  font-size: 1.7rem;
}

.feature-copy p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
  font-size:1.1rem
}

.feature-actions {
  margin-top: 14px;
}

.feature-actions .btn-secondary {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e293b;
}

.feature-media {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
  min-height: 220px;
  display: grid;
  place-items: center;
}
.feature-media .media-image{
  border-radius: 16px;
  min-height: 220px;
  display: grid;
  place-items: center;
  width: 100%;
}

.media-placeholder {
  color: var(--muted);
  font-size: 14px;
}

/* ── Page Colums x3 ── */
.content-column {
  display: grid;
  gap: 4vh;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding:0;
  margin:0;
}
.content-cell {
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding:1.5rem 2rem;
}

/* ── Resource cards (variable count, wraps instead of fixed 3-up) ── */
.resource-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.5rem 0;
}
.resource-card {
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.5rem 2rem;
}
.resource-card h3 {
  margin-top: 0;
}

/* ── enter text, usually when logo is used */
.resource-grid.text-center{
  text-align: center;
}

/* ── Fixed three-column grid (e.g. six cards as two even rows) ── */
.resource-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Auto-numbered cards (e.g. "what to expect" steps) ── */
.resource-grid.numbered {
  counter-reset: step;
}
.resource-grid.numbered .resource-card {
  counter-increment: step;
  position: relative;
  padding-top: 2rem;
}
.resource-grid.numbered .resource-card::before {
  content: counter(step);
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-brightgreen);
  color: var(--color-darkblue);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ── Resource cards (smaller!) ── */
.resource-grid.small {
  gap:.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.resource-grid.small  .resource-card{
  padding:1rem 1rem 0;
}

/* ── Camp logo row ── */
.camp-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin: 1.5rem 0;
}
.entry-content .camp-logos img {
  height: 64px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
/* ── Donate form (embedded PayPal button) ── */
.donate-form {
  margin: 1.5rem 0;
  text-align: center;
}
/* ── Small standalone logo (single-item sections, not a grid) ── */
.inline-logoblock {
  float:left;
  margin:0 1rem 0 0;
  padding:0;
  width: auto;
}
.inline-logoblock a{
  display: inline-block;
  font-size:.8rem;
  margin: 0.5rem 1.25rem 0.75rem 0;
  text-align: center;
}
/* Logo on the right instead, e.g. to alternate with the section above. */
.inline-logoblock.right {
  float: right;
  margin: 0 0 0 1rem;
}
.inline-logoblock.right a {
  margin: 0.5rem 0 0.75rem 1.25rem;
}
/* A card grid sits below the floated logo, never wrapped around it: a short
   intro paragraph leaves the float still active, which would squeeze the
   columns into the remaining width. */
.inline-logoblock ~ .resource-grid{
  clear: both;
}
.entry-content .inline-logo {
  border-radius: 15px;
  display:flex;
  height: 8rem;
  width: auto;
}
/* ── Larger inline icon (e.g. contact tiles) ── */
.entry-content .icon-lg {
  width: 2.5rem;
  height: 2.5rem;
}
/* ── Small standalone logo / badge (e.g. payment cards) ── */
.entry-content .logo-sm {
  width: auto;
  max-width: 120px;
  height: auto;
  margin: 0 auto;
  display: block;
}
/* ── Text-height inline icon (e.g. the Share glyph in instructions) ── */
.entry-content .icon-inline {
  width: 1.2em;
  height: 1.2em;
  /* Center within the line box rather than dropping below the baseline, so a
     heading containing the icon keeps the same line height (and the same gap
     to the next line) as text-only headings. */
  vertical-align: middle;
}
.btn-contentsmall,
.btn-contentsmall-right{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #0b4a6f;
  margin-right:.5rem;
  margin-bottom:.5rem;
}
.btn-contentsmall:hover,
.btn-contentsmall-right:hover{
  color:#fff;
  background-color:var(--color-medblue);
}
/* Same as btn-contentsmall, floated to the right */
.btn-contentsmall-right{
  float: right;
}
.staticimg-roundcorner, .staticimg-roundcorner-floatright, .staticimg-roundcorner-floatleft{
  border-radius: 15px;
}
.staticimg-roundcorner-floatright, .entry-content img.staticimg-roundcorner-floatright {
  display: block;
  float: right;
  margin:1rem 0 1rem 1rem;
  max-width: 400px;
}
.staticimg-roundcorner-floatleft, .entry-content img.staticimg-roundcorner-floatleft {
  display: block;
  float: left;
  margin:0 2rem 2rem 0 ;
  max-width:400px;
}
.img-roundcorner {
  border-radius: 15px;
  transition: 
    transform 0.4s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease;
}

.img-roundcorner:hover, .img-roundcorner:focus-visible {
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}
@media (prefers-reduced-motion: no-preference) {
  .img-roundcorner:hover, .img-roundcorner:focus-visible {
    transform: scale(1.08) translateY(-12px);
  }
}

/* ── Timeline for History  ── */
.timeline {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

/* The vertical line */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 3px;
  height: 100%;
  background: var(--color-medblue, #2c5282);
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 50px;
}

/* The circle dot on the line */
.timeline-indicator {
  content: "";
  position: absolute;
  top: 4rem;
  left: 34.25rem;
  width: 18px;
  height: 18px;
  background: var(--color-medblue, #2c5282);
  border: 3px solid #fff;
  border-radius: 50%;
  z-index: 1;
}
.timeline-indicator.right {
  left: -4.3rem;

}
.timeline-content {
  background: #f8f9fa;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.5rem 2rem;
}

.timeline-content h3, .timeline-content h2 {
  line-height: 1.75rem;
  margin: 0 0 5px;
  color: var(--color-medblue, #2c5282);
}

.timeline-content p {
  margin: .8rem 0;
  color: #555;
  line-height: 1.5;
}
/* ── Adding Some Content Breaks  ── */

.section-break{
  border-bottom:1px solid #bbb;
  padding-bottom:1rem;
 margin-bottom:3rem; 
}
.section-secondary, .section-main{
 margin-bottom:3rem; 
}
.entry-content hr {
  clear: both;
  border:none;
  border-bottom:1px solid #bbb;
  padding-bottom:2rem;
  margin-bottom:3rem;
}
.section-highlight{
  background-color:var(--surface-2);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding:1.5rem 2.5rem;
  margin:2.5rem auto 2rem;
}
.section-highlight.center{
  text-align: center;
}
.section-highlight .resource-card{
  background-color: #fff;
}
/* on blue background, keep White background */
.section-highlight.section-blue .resource-card{
  background: #fff;
  border-color:none;
  color:var(--muted);
}
/* on blue background, keep blue background */
.section-highlight.section-blue .onblue .resource-card{
  background:rgb(8, 98, 155);
  border-color:none;
  color:#fff;
}
.section-highlight.section-blue{
  background: #0D3E62;
  background: linear-gradient(21deg,rgba(13, 62, 98, 1) 1%, rgb(8, 98, 155) 50%, rgba(12, 120, 189, 1) 100%);
  color:#fff;
  font-size: 1.2rem;
}
.section-highlight.section-blue a{
  color:#89c540
}
.section-highlight.section-blue a:hover{
  color:#fff;
}
.section-highlight.section-blue a.btn-contentsmall{
  color:#0b4a6f
}
.section-highlight.section-blue a.btn-contentsmall:hover{
  color:#fff;
}
.section-highlight.section-blue h2 {
  margin-top: 0.5rem;
}
.section-highlight.section-blue .resource-card{
  background: #fff;
  border-color:none;

}
.section-highlight.section-backgroundimage{
  background-color: var(--color-medblue);
  color: #fff;
  background-image: url("../../images/cs-online-community.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-size:1.2rem;
  overflow: hidden;
  position: relative;
  scale: calc(1.1rem);
}
.section-highlight.section-backgroundimage a{
  color:var(--color-brightblue);
}
.section-highlight.section-backgroundimage a:hover{
  color:#fff
}
.section-highlight.section-backgroundimage a.btn-contentsmall{
  color:#0b4a6f
}
.section-highlight.section-backgroundimage a.btn-contentsmall:hover{
  color:#fff
}
/* Mother Church Image */
.cs-online-community{
  background-image: url("../../images/cs-online-community.jpg");
}
/* Open Book Image */
.section-highlight.section-backgroundimage.cs-readingroom{
  background-image: url("../../images/square-FCC-03.jpg");
}
/* Open Book Image */
.section-highlight.section-backgroundimage.cs-youth{
  background-image: url("../../images/square-FCC-10.jpg");
}
/* Open Book Image */
.section-highlight.section-backgroundimage.cs-speaker{
  background-image: url("../../images/square-FCC-04.jpg");
}
/* Page lead paragraph. The opening paragraph directly after a page's first
   heading is styled automatically — no wrapper div needed. Use .lead-box to
   get the same boxed treatment for a lead/callout anywhere else (e.g. a
   multi-paragraph intro, a heading-inside-box, or a mid-page callout). */
.entry-content > h1:first-child + p,
.lead-box{
  font-size: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.5rem 2.5rem;
  margin: 2.5rem auto 2rem;
}
  .content-cell-background {
  background-color: var(--color-medblue);
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  scale: calc(1.1rem);
  font-size: 1.15rem;

}
.content-cell-background h3 {
  font-size:1.35rem;
  line-height:1.5rem
}
/*.content-cell-background-sunday {
 background-image: url("../../images/square-FCC-04.jpg");
}
.content-cell-background-childcare {
 background-image: url("../../images/square-FCC-10.jpg");
}
.content-cell-background-wednesday {
 background-image: url("../../images/square-FCC-07.jpg");
}*/
.section-highlight.section-backgroundimage::after, .content-cell-background::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 58, 85, 0.8) 100%);
  z-index: 1;
  overflow: hidden;
}
/* Lift content above the dark ::after gradient overlay. Direct children of a
   background-image section are lifted automatically, so no inner wrapper div
   is needed (the ::after pseudo-element is not matched by > * and stays back). */
.section-backgroundimage-container, .content-cell-container,
.section-highlight.section-backgroundimage > *{
  position: relative;
  z-index: 10;
}
.btn-callout{
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  background:var(--color-brightgreen);
  border-color: #c7d2fe;
  margin:1rem auto;
  font-size:1.125rem
}
.btn-callout:hover{
  color:#fff;
  background-color:var(--color-medblue);
}
.entry-content .section-highlight hr {
  border-bottom:1px solid #ddd;
  width:75%;
}
/* ── Portal tiles ── */
.portal-tiles {
  background: var(--surface-2);
  padding: 1.75rem 0;
}

.tile-grid--portal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tile--portal {
  display: flex;
  flex-direction: column;
}

.tile__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  background-color: var(--muted);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tile--portal:hover .tile__icon {
  background-color: var(--text);
}

.tile__details {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ── Article meta ── */
.article-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.article-meta__sep {
  margin: 0 0.375rem;
}

.article-meta__category {
  color: #0b4a6f;
  text-decoration: none;
  font-weight: 500;
}

.article-meta__category:hover {
  text-decoration: underline;
}

.article-tags {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.article-tags__tag {
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 1rem;
  background: var(--surface-2);
  color: var(--muted);
  text-decoration: none;
}

.article-tags__tag:hover {
  background: #e2e8f0;
}

/* ── Article listing ── */
.category-desc {
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.55;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-list__item {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.article-list__item:last-child {
  border-bottom: none;
}

.article-list__title {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

.article-list__title a {
  color: var(--text);
  text-decoration: none;
}

.article-list__title a:hover {
  color: #0b4a6f;
}

.article-list__meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.article-list__summary {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Taxonomy lists (tags, categories, authors) ── */
.taxonomy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.taxonomy-list__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.taxonomy-list__item a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}

.taxonomy-list__item a:hover {
  background: #e2e8f0;
}

.taxonomy-list__count {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── Page content ── */
.site-section {
  padding: 32px 0 48px;
  position: relative;
  z-index: 10;
}

.entry-content {
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 32px;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content .img-portrait {
  max-width: 16rem;
  border-radius: 0.5rem;
}

.entry-content .infobox {
  float: right;
  width: 18rem;
  margin: 0 0 1rem 1.5rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.entry-content .infobox img {
  display: block;
  max-width: 100%;
  margin: 0 auto 1rem;
}

.entry-content .infobox ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.entry-content .infobox li {
  margin-bottom: 0.375rem;
}

.entry-content a {
  color: #0b4a6f;
}

/* ── Recordings (Past Services) ── */
.recordings {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.recording__heading {
  font-size: 20px;
  margin: 0 0 12px;
}

.recording__type {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

.recording__player {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.recording__player video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.recording__options {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.recording__link {
  font-size: 14px;
  font-weight: 500;
  color: #0b4a6f;
  text-decoration: none;
}

.recording__link:hover {
  text-decoration: underline;
}

/* ── Site header ── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  gap: 1 rem;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo img {
  height: 4.8rem;
  width: auto;
}
/* ── footer logo ── */
.site-footer-logo  {
  filter:grayscale(1) brightness(10);
  height:5.5rem;
  margin:  -2rem 0 1rem -1.5rem;
}

/* ── Location badge ── */
.site-location {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-brightblue);
  text-decoration: none;
  white-space: nowrap;
}

.site-location:hover {
  color: var(--text);
}

.site-location__pin {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  -webkit-mask-image: url("../../images/pin.svg");
  mask-image: url("../../images/pin.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-brightblue);

}

/* ── Desktop navigation ── */
.site-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.site-nav__link {
  display: block;
  padding: .5rem .6rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-medblue);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}

.site-nav__link:hover {
  background: var(--surface-2);
  color: var(--color-brightblue);
}

.caret {
  font-size: 10px;
  margin-left: 2px;
}

/* Dropdown */
.site-nav__item--dropdown {
  position: relative;
}

/* Invisible bridge so the cursor can travel from the nav link to the
   dropdown without leaving the li's hover zone. */
.site-nav__item--dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 180px;
  z-index: 200;
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown-link {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}

.site-nav__dropdown-link:hover {
  background: var(--surface-2);
}

/* Header actions (portal button + hamburger) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-portal {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.btn-portal:hover {
  background: #e2e8f0;
}

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* ── Mobile menu overlay ── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
}

.mobile-menu-overlay.is-open {
  display: block;
}

.mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: var(--surface);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px calc(80px + env(safe-area-inset-bottom, 0px));
}

.mobile-menu__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.mobile-menu__close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text);
  line-height: 1;
  padding: 4px;
}

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

.mobile-menu__nav > ul > li > a {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.mobile-menu__sub {
  padding-left: 16px;
}

.mobile-menu__sub li a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}

.mobile-menu__nav .btn-portal {
  display: block;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 24px;
}

/* ── Site hero (page titles) ── */
.site-hero, .site-hero.large{
  background-color: var(--color-medblue);
  color: #fff;
  padding: 32px 0;
  background-image: url("../../images/FirstChurchChrist-Scientist-Banner-13.jpg");
  background-size: cover;
  background-position: center;
  min-height: 15vh;
  background-attachment: fixed;
  text-shadow: 2px 2px 1px rgba(18, 50, 64, 0.85);
  overflow: hidden;
  position: relative;
  scale: calc(1.1rem);
}
.site-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(4, 23, 46, 0.622), rgba(70, 70, 70, 0.1)100%);
  z-index: 1;
  overflow: hidden;
}
.site-hero.large::after{
  background: linear-gradient(90deg,rgba(4, 23, 46, 0.622), rgba(70, 70, 70, 0.1)100%);
}

.container-hero{
  padding:0;
  position:relative;
  margin:auto;
  z-index:10;
}
/* ── Site hero (page titles) ── */
.site-hero.large{
  min-height: 50vh;
}
.site-hero.large::before, .site-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.site-hero.large .hero{
  padding:0;
  margin:0;
  width:100%;
}
.site-hero.large.site-hero--default .hero{
  margin:0 auto;
}
.site-hero__default h1 {
  margin: 0;
  font-size: 5rem;
  text-align: center;
}
/* ── Site hero (Countdown ) ── */
.hero-banner.hero-banner-countdown {
  margin-top: 0;
  padding:3rem 0 3rem 2rem;
  z-index: 10;
  position: relative;
  background:color-mix(in srgb, var(--color-darkblue) 45%, transparent);
  width:65%;
}
.hero-banner_countdown, .hero-banner_countdown-column{
  display: grid;
  grid-template-columns: 3fr .5fr 5fr .5fr 7fr .5fr 7fr;
}
.hero-banner_countdown{
  display: flex;
  width: 25rem;
}
.hero-banner__kicker{
  color:#ccc;
  font-size: 1.1rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  padding:0 1rem;
  opacity: 0.9;
}
.countdown-number{
  font-weight: 100;
  font-size:4.5rem;
  display: block;
  width: 100%;
  text-align: center;
}
.countdown-spacer {
  font-weight: 100;
  font-size:4rem;
  display: block;
  width: 1rem;
  text-align: center;
}
.countdown-label{
  text-align: center;
  color: #ccc;
  font-variant: all-small-caps;
  font-size: 1.1rem;
  display: block;
  width: 100%;
}

/* ── Hero Section, Large Buttons ── */
.hero .btn-primary{
  border-color: #fff;
  color:rgb(20, 72, 104);
  background-color:  rgba(255, 255, 255, 0.85);
  text-shadow: none;
  font-size: 1.5rem;
  padding:1.2rem 2rem;
}
.hero  .btn-primary:hover{
  color:#fff;
  background-color: rgb(20, 72, 104);
}

.hero-banner--default .btn-primary{
  border-color: #fff;
  background: #0b4a6f;
  color: #fff;
  text-shadow: none;
  font-size: 1.5rem;
  font-weight: 300;
  padding: 1.2rem 2rem;
  margin: 0.5rem 0.65rem;
}
.hero-banner--default .btn-primary:hover{
  color:#fff;
  background-color:var(--color-brightblue);
}

/* ── Hero Section, Resource Cards ── */
.hero .resource-card{
  background-color: rgba(255, 255, 255, 0.85);
  font-size:1.5rem;
  font-weight:200;
  text-align: center;
  padding:5rem 0 ;
}
/* ── Footer ── */
.site-footer {
  background: var(--color-darkblue);
  color: #cbd5e1;
  padding: 4rem 0 0;
  font-size: 0.9rem;
  margin-top: auto; /* push to viewport bottom on short pages */
}

.site-footer a {
  color: #e2e8f0;
  text-decoration: none;
}

.site-footer a:hover, 
.site-footer__grid a.site-location:hover{
    color:var(--color-brightgreen);
}

a:hover .site-location__pin {
  background-color: var(--color-brightgreen);

}

/* ── Location badge Footer ── */
.site-footer__grid .site-location {
    font-size: 0.9rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 3fr 1.5fr 2.5fr;
  gap: 2rem;
}

.site-footer__heading {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: #98aac3;
  margin: 0 0 14px;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links li {
  margin-bottom: 8px;
}

.site-footer__text {
  margin: 0 0 10px;
  line-height: 1.5;
  letter-spacing: .02rem;
}

.site-footer__text a[href^="mailto:"],
.site-footer__text a[href^="tel:"] {
  white-space: nowrap;
}

/* Email | phone: each item carries a leading "|" that sits in a strip just
   left of the column, clipped by the paragraph. Whichever item starts a line
   loses its separator, so a wrapped line never ends or begins with a pipe. */
.site-footer__contact {
  overflow: hidden;
}
.site-footer__contact-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.5em;
}
.site-footer__contact-list > span::before {
  content: "|" / "";
  display: inline-block;
  width: 1.5em;
  text-align: center;
}

.site-footer .btn-donate {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  background: #fff;
  color: #0f172a;
}

.site-footer .btn-donate:hover {
  background: #e2e8f0;
  color: #0f172a;
  text-decoration: none;
}

.site-footer__bottom {
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 13px;
  color: var(--color-white);
  letter-spacing: 0.05rem;
}

.site-footer__bottom .copyright{
  margin-top: 2rem;
  color:var(--muted)
}

.site-footer__bottom p {
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .content-column {
    gap: 2vh;
  }
  .content-cell {
    padding: .2rem 1rem;
  }
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-grid.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-grid--portal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .hero-countdown__timer {
    font-size: 1.5rem;
  }

    /* Hide desktop nav, show hamburger; location badge sits beside it */
  .site-header .site-location {
    margin-left: auto;
    margin-right: 0.75rem;
  }

  .site-nav {
    display: none;
  }

  .site-header__actions .btn-portal {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .hero-banner__fg {
    width: 8rem;
  }
  .hero-banner.hero-banner-countdown{
    margin:auto;
    width:85%;
  }
  .hero-banner__actions{
    margin:1rem auto;
    width:65%;
  }
  .container-home-tile{
    padding:0 3rem;
  }
  /* Resource card logos vary wildly in native size (225px up to 1000px);
  without a cap, small source images render at native size while large
  ones stretch to fill the card, making the row look uneven. Inline glyphs
  (.icon-inline) are excluded — they must stay inline with their text. */
  .entry-content .resource-card img:not(.icon-inline):not(.icon-lg):not(.logo-sm) {
    width: 75%;
    max-width: 200px;
    margin:auto;
    display:block;
  }
.entry-content .resource-card img.staticimg-roundcorner{
    width:100%;
    max-width: 100%;
  }
  /* ── Page Colums x3 ── */
  .content-column {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 1.5rem 0;
  }
  /* ── Resource cards (smaller!) ── */
  .resource-grid.small {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
  .site-hero__default h1{
    line-height: .95em;
  }
 /* Remove Float Left on Image (Events) */
  .entry-content .resource-card img.staticimg-roundcorner-floatleft,  .staticimg-roundcorner-floatleft, .entry-content img.staticimg-roundcorner-floatleft{
    float:left;
    margin:0 1rem 1rem 0;
    max-width:45%;
    padding:0 0;
  } 
}

@media (max-width: 520px) {
  /* Stacked layout: keep every logo block left-aligned above its text. */
  .inline-logoblock.right {
    float: left;
    margin: 0 1rem 0 0;
  }
  .inline-logoblock.right a {
    margin: 0.5rem 1.25rem 0.75rem 0;
  }
  .site-logo img {
    height: 4rem;
  }
  .site-header .site-location {
    font-size: 0.75rem;
    margin-right: 0.5rem;
  }
  .site-header .site-location__pin {
    width: 1.1rem;
    height: 1.1rem;
  }
  .resource-card{
    padding:.5rem 1.5rem;
  }
  .resource-grid {
    gap: .5rem;
  }
  /* Numbered cards stack in one column here; the step badge overhangs the top
     of each card by 0.9rem, so a tight gap makes it collide with the card
     above. Give the rows room for the badge to sit clear. */
  .resource-grid.numbered {
    row-gap: 2rem;
  }

  .content-column {
    display: block;
    gap: 2vh;
  }
  .content-cell {
    padding: .2rem 1rem;
    margin:0 0 1rem;
  }
  .tile-grid {
    grid-template-columns: 1fr;
  }
  .resource-grid.cols-3 {
    grid-template-columns: 1fr;
  }
  .container-home-tile {
    padding: 0 1rem;
  }

  .entry-content .infobox {
    float: none;
    width: auto;
    margin: 0 0 1.5rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  /* Centered footer: the clipped-separator trick needs left-aligned lines, so
     stack email and phone instead. */
  .site-footer__contact-list {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
  }
  .site-footer__contact-list > span::before {
    content: none;
  }
  /* -- Remove Float Images -- */
  .staticimg-roundcorner-floatright, .entry-content img.staticimg-roundcorner-floatright{
    float:none;
    margin:0 0 1rem 0;
    max-width:90%;
    padding:0 0;
    text-align: center;
  } 
   /* Remove Float Left on Image (Events) */
  .entry-content .resource-card img.staticimg-roundcorner-floatleft,  .staticimg-roundcorner-floatleft, .entry-content img.staticimg-roundcorner-floatleft{
    float:none;
    margin:0 0 1rem 0;
    max-width:100%;
    padding:0 0;
  } 

  /* -- Countdown/Hero -- */
  .hero-banner__fg {
    display: none;
  }
  .hero-banner.hero-banner-countdown{
    padding:1rem;
    width:100%;
    margin:0 0 0 -1rem;
  }
  .countdown-number{
    font-size:3rem;
  }
  .hero-banner_countdown, .hero-banner_countdown-column{
    grid-template-columns:2fr .5fr 3fr .5fr 4fr .5fr 3fr;
  }
  .hero-banner__actions{
    width:100%;
  }
  .countdown-spacer {
    font-size:3rem;
  }
  .site-hero.large .hero{
    margin:0 auto;

  }
  .hero .btn {
    display: block;
    margin:auto;
  }
  /* Additional Style Adjustments */
  .site-hero__default h1 {
    font-size:3rem;
    line-height: 1em;
    max-width: 100%;
  }
  .btn-contentsmall{
    display: block;
    line-height:1.2rem;
    text-align: center;
    margin:.5rem auto;
    padding:1rem 0;
  }
  .section-highlight{
    padding:.5rem 1.5rem;
  }
  .entry-content .inline-logo{
    height:6rem;
    margin-top:1rem;
  }
  .entry-content hr{
    padding:0;
    margin:0 0 2rem;
  }
  .staticimg-roundcorner-floatright{
    float:none;
    margin:.5em 0;
    text-align: left;
  }
  .btn-callout{
    display:block;
    margin:.5rem auto ;
    text-align:center;
    line-height:1.3rem;
  }
  .resource-card h3{
    margin-top:1rem;
  }
  h1, h2, h3{
    line-height: 1.2em;
  }
  .entry-content > h1:first-child + p,
  .lead-box{
    padding:  .5rem 1.5rem;
  }
  .donate-form input[type="image"] {
    width:100%;
  }

}
/* -- Timeline Mobile Freindly -- */
@media (max-width: 768px) {
    /* The circle dot on the line */
  .timeline-indicator, .timeline-indicator.right {
    top: 1rem;
    left: .62rem;
  }
}
@media (min-width: 768px) {
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .timeline-item {
    width: 45%;
    padding-left: 0;
  }

  /* Alternate items left/right on desktop */
  .timeline-item:nth-child(odd) {
    margin-left: 0;
    text-align: right;
  }

  .timeline-item:nth-child(even) {
    margin-left: 55%;
  }

  .timeline-item::before {
    left: 50%;
    transform: translateX(-50%);
  }
}
/* -- Home Page Responsive  -- */
@media (max-width: 1400px) {
  .site-hero.large.site-hero--default .hero{
    max-width: 100%;
  }
  .hero-banner__content{
   font-size: clamp(2rem, 5vw, 2rem);
  }
}
@media (max-width: 980px) {
    .hero-banner__content{
     font-size: clamp(2rem, 5vw, 1.5rem);
    }
    .resource-card{
      margin-top: 0;
    }
   

}
@media (max-width: 520px) {
}

/* ── Print ── */
@media print {
  .site-wrap {
    position: relative;
  }

  .site-header {
    position: static;
  }

  .site-nav,
  .site-location,
  .site-header__actions {
    display: none;
  }

  .site-hero,
  .site-hero.large {
    min-height: 0;
    height: auto;
    padding: 8px 0;
    background-image: none;
    background-attachment: scroll;
    color: #000;
    text-shadow: none;
  }

  .site-hero::before,
  .site-hero::after,
  .site-hero.large::before,
  .site-hero.large::after {
    display: none;
  }

  .site-hero__default h1 {
    font-size: 2rem;
    margin: 0;
  }

  /* Internal page titles: pull the title up into the header row, right-aligned
     across from the logo, so the header's divider sits below both instead of
     between them. (The homepage hero has too much going on for this treatment.) */
  .site-hero:not(.large) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    background: none;
  }

  .site-hero:not(.large) .container {
    width: 100%;
  }

  .site-hero:not(.large) .site-hero__default {
    width: 100%;
    text-align: right;
  }

  .site-hero:not(.large) .site-hero__default h1 {
    font-size: 1.5rem;
  }

  .site-section {
    padding-top: 12px;
  }

  .entry-content h1 {
    font-size: 1.75rem;
    margin-top: 0;
  }

  /* ── Footer: built for a dark background, needs to be readable on paper ── */
  .site-footer {
    background: none;
    color: #000;
    padding: 16px 0 0;
    border-top: 1px solid #000;
  }

  .site-footer a {
    color: #000;
  }

  .site-footer__heading {
    color: #000;
  }

  .site-footer__grid {
    display: block;
  }

  .site-footer__col {
    margin-bottom: 12px;
  }

  .site-footer-logo,
  .site-footer .btn-donate {
    display: none;
  }

  .site-footer__bottom {
    color: #000;
    border-top-color: #000;
  }

  .site-footer__bottom .copyright {
    color: #000;
  }
}