/* theholyamerican.com: an earnest, corny faith-and-flag newsletter. A church bulletin that met a
   Fourth of July flyer: a 19th-century American landscape painting for the masthead, a gold-framed
   plate, flag stripes and a "God bless America" ticker. Corny, not cartoonish (Adam, 2026-10-12).
   The stories get the page (Adam, 2026-10-15): a featured first story, then the grid.
   Rules: no font-size below .85rem; the wordmark is larger than every h1 (tests/logo_test.php). */
:root {
  --bg: #fbf6e9; --paper: #fffdf6; --fg: #1d2240; --muted: #4e5470; --line: #e6d9b5;
  --red: #b0122b; --blue: #1c2f73; --gold: #d4a017; --gold-hi: #f6dc84; --gold-deep: #8a6200;
  --plate: rgba(255, 253, 246, .94); --wm-shadow: #f6dc84; --star: rgba(28, 47, 115, .05);
  --warn-bg: #fff3cf; --warn-line: #c79a1b; --err-bg: #fde8e4; --err-line: #b3261e; --info-bg: #eef1f9;
  --serif: Georgia, "Times New Roman", Times, serif;
  --script: "Brush Script MT", "Segoe Script", "Lucida Handwriting", "Apple Chancery", cursive;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1530; --paper: #171f45; --fg: #f6f0dc; --muted: #c6c8da; --line: #2f3a6e;
    --red: #ff7a8a; --blue: #b7c6ff; --gold: #f2c94c; --gold-hi: #f6dc84; --gold-deep: #f2c94c;
    --plate: rgba(15, 21, 48, .92); --wm-shadow: #0b1026; --star: rgba(255, 255, 255, .05);
    --warn-bg: #3a2f00; --warn-line: #c79a1b; --err-bg: #3d1214; --err-line: #ff8a80; --info-bg: #1d2a55; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.ha { margin: 0; color: var(--fg); background-color: var(--bg);
  background-image: radial-gradient(var(--star) 2px, transparent 2.5px); background-size: 30px 30px;
  font: 17px/1.65 var(--serif); }
a { color: var(--red); }
.ha-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Flag stripes and the ticker. */
.ha-stripes { height: 12px; background: repeating-linear-gradient(180deg, #b0122b 0 4px, #fff 4px 8px, #1c2f73 8px 12px); }
.ha-ticker { overflow: hidden; background: #1c2f73; color: #f6dc84; white-space: nowrap; border-bottom: 2px solid #d4a017; }
.ha-ticker-track { display: inline-flex; animation: ha-scroll 135s linear infinite; } /* 3 copies per cycle: about 31px/s, as before */
.ha-ticker span { padding: 6px .45em 6px 0; flex: none; font: 700 .9rem/1.4 var(--serif); letter-spacing: .14em; }
@keyframes ha-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ha-ticker-track { animation: none; }
  .ha-ticker { white-space: normal; text-align: center; }
  .ha-ticker span + span { display: none; }
  .ha-ticker span { padding-left: .45em; }
  .ha-ticker span::before { content: "★ "; }
}

/* Masthead: a public-domain painting (assets/CREDITS.md) with the seal and wordmark on a gold-framed
   plate. Every word over the painting sits on the plate, which is nearly opaque, so its contrast holds
   whatever part of the painting is behind it. */
.ha-header { position: relative; }
.ha-banner { position: relative; overflow: hidden; background: #2b2a33; }
.ha-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ha-banner-inner { position: relative; display: flex; justify-content: center; padding-top: 30px; padding-bottom: 30px; }
/* The edges: Christ covers the left edge and the bison the right, full banner height, each fading into
   the painting through a soft gradient mask (Adam, 2026-10-15: no frame, no border). --edge is each
   edge's width; the plate is kept narrower than the gap between the two faces. */
.ha-banner { --edge: min(27vw, 440px); }
.ha-edge { position: absolute; top: 0; height: 100%; width: var(--edge); object-fit: cover; }
.ha-edge-left { left: 0; object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }
.ha-edge-right { right: 0; object-position: 30% 35%;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
/* The plate: every word over the pictures sits on it (contrast, see the head of this block). */
.ha-plate { max-width: min(800px, calc(100vw - var(--edge) - 120px)); min-width: 0; background: var(--plate); border: 2px solid var(--gold);
  outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 6px; padding: 12px 26px 10px 18px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.ha-brand { display: flex; align-items: center; gap: 18px; min-width: 0; max-width: 100%; color: var(--fg); text-decoration: none; }
/* The verse of the day, under the title (inc/layout.php layout_verse). */
.ha-verse { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--gold); text-align: center; color: var(--muted);
  font-style: italic; font-size: .95rem; line-height: 1.4; }
.ha-verse-label { font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin-right: .3em; }
.ha-verse-ref { font-style: normal; white-space: nowrap; }
.ha-mark { width: 96px; height: 96px; flex: none; border-radius: 50%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.ha-brand-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.ha-wordmark { font-family: var(--serif); font-weight: 700; font-size: 3.2rem; line-height: 1.05; text-transform: uppercase;
  letter-spacing: .06em; color: var(--blue); text-shadow: 0 2px 0 var(--wm-shadow); overflow-wrap: anywhere; min-width: 0; }
.ha-wm-holy { color: var(--red); }
.ha-tagline { margin-top: 4px; font-family: var(--script); font-size: 1.7rem; line-height: 1.2; color: var(--gold-deep); text-wrap: balance; }

/* The toolbar. More feeds become links here, beside Today's Issue (inc/layout.php LAYOUT_NAV). */
.ha-nav { background: #1c2f73; border-top: 3px solid #d4a017; border-bottom: 3px solid #d4a017; }
.ha-nav .ha-wrap { display: flex; gap: 2px 26px; flex-wrap: wrap; justify-content: center; font-size: 1rem; font-variant: small-caps; letter-spacing: .08em; }
.ha-nav a { color: #f6dc84; text-decoration: none; padding: 8px 2px 6px; border-bottom: 3px solid transparent; font-weight: 700; }
.ha-nav a:hover, .ha-nav a:focus { border-bottom-color: #f6dc84; }
.ha-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.ha-main { padding-top: 22px; padding-bottom: 40px; }

/* The feed: its title, the date and search on one slim row, then the stories. */
.ha-feed-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--gold); }
.ha-eyebrow { margin: 0; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.ha-feed-head h1 { margin: 2px 0 0; font-family: var(--serif); font-weight: 700; font-size: 2rem; line-height: 1.15; color: var(--blue); }
.ha-search { display: flex; flex-direction: column; flex: 0 1 300px; min-width: 0; }
.ha-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ha-search input { font: inherit; font-size: 1rem; color: var(--fg); background: var(--paper); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 16px; min-width: 0; }
.ha-notice { border: 1px solid var(--line); border-left-width: 5px; border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; background: var(--info-bg); }
.ha-notice p { margin: 4px 0; }
.ha-notice-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.ha-notice-error { background: var(--err-bg); border-color: var(--err-line); }
.ha-retry { font: inherit; font-size: .95rem; margin-top: 4px; }
.ha-loading { color: var(--muted); font-style: italic; }

/* Stories. The first is the featured card across the whole row; the rest fill a grid
   (one column on a phone, two from 640px, three from 1000px). */
.ha-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ha-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: 6px; overflow: hidden; min-width: 0; box-shadow: 0 2px 6px rgba(29, 34, 64, .08); }
.ha-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); }
.ha-card-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; color: #d4a017; font-size: 2.6rem;
  background: radial-gradient(circle at 50% 50%, #2a3f8f 0, #1c2f73 55%, #15245a 100%); border-bottom: 3px solid #b0122b; }
.ha-card-body { min-width: 0; padding: 12px 16px 14px; }
.ha-card-title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 6px; overflow-wrap: anywhere; }
.ha-card-link { color: var(--blue); text-decoration: none; }
.ha-card-link:hover, .ha-card-link:focus { color: var(--red); text-decoration: underline; }
.ha-card-summary { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; font-size: .95rem; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ha-card-meta { margin: 0; font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.ha-card-source { font-weight: 700; color: var(--red); }
.ha-card-kicker { margin: 0 0 6px; font: 700 .9rem/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.ha-card-featured { grid-column: 1 / -1; border: 2px solid var(--gold); border-top-width: 6px; box-shadow: 0 4px 18px rgba(29, 34, 64, .14); }
.ha-card-featured .ha-card-body { padding: 16px 20px 20px; }
.ha-card-featured .ha-card-title { font-size: 1.5rem; line-height: 1.2; }
.ha-card-featured .ha-card-summary { font-size: 1.05rem; -webkit-line-clamp: 6; line-clamp: 6; }
.ha-search-empty { color: var(--muted); }

/* Legal pages and the footer. */
.ha-prose { max-width: 680px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px 24px 20px; }
.ha-prose h1 { font: 700 2rem/1.2 var(--serif); color: var(--blue); }
.ha-prose h2 { font-size: 1.25rem; margin-top: 1.6em; }
.config-error { border: 2px solid var(--err-line); background: var(--err-bg); padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.config-error-inline { color: var(--err-line); font-weight: 700; }
.ha-footer { background: #1c2f73; color: #f6f0dc; font-size: .95rem; padding: 26px 0 34px; text-align: center; border-top: 3px solid #d4a017; }
.ha-footer a { color: #f6dc84; }
.ha-footer p { margin: 6px 0; }
.ha-footer-motto { font-family: var(--script); font-size: 1.7rem; line-height: 1.3; color: #f6dc84; }
.ha-small { font-size: .9rem; opacity: .9; }

@media (min-width: 640px) {
  .ha-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  .ha-card-featured { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .ha-card-featured .ha-card-img { height: 100%; min-height: 300px; aspect-ratio: auto; }
  .ha-card-featured .ha-card-body { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; }
  .ha-card-featured .ha-card-title { font-size: 1.9rem; }
}
@media (min-width: 1000px) {
  .ha-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1099px) {
  /* Mid widths (R1-2): a smaller seal and wordmark so the plate fits between the faces in two clean lines. */
  .ha-mark { width: 72px; height: 72px; }
  .ha-wordmark { font-size: 2.4rem; }
  .ha-tagline { font-size: 1.4rem; }
}
@media (max-width: 600px) {
  /* Phone: the plate takes the full width, so it moves DOWN and the top of the banner shows the two
     faces (Christ's head and halo at the left, the bison's head at the right) above it, down to 320px. */
  .ha-banner { --edge: 46vw; }
  .ha-edge { height: 150px; } /* 2026-10-21 (Adam: "can't see the jesus and buffalo background very well"): taller, so more of both faces shows above the plate */
  .ha-edge-left { object-position: 50% 8%; -webkit-mask-image: linear-gradient(to right, #000 60%, transparent); mask-image: linear-gradient(to right, #000 60%, transparent); }
  .ha-edge-right { object-position: 25% 30%; -webkit-mask-image: linear-gradient(to left, #000 60%, transparent); mask-image: linear-gradient(to left, #000 60%, transparent); }
  .ha-banner .ha-banner-inner { padding: 112px 8px 10px; } /* beats the later .ha-wrap padding */
  .ha-plate { max-width: 100%; padding: 6px 8px; }
  /* 2026-10-21 (Adam: "squish the logo a bit", "make the holy american title line one line"): the wordmark takes
     the plate's full width on ONE line (nowrap, 1.5rem fits 320px); the seal moves to the tagline's row, small.
     .ha-brand-text dissolves (display: contents) so the three children place on one grid. */
  .ha-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; }
  .ha-brand-text { display: contents; }
  .ha-wordmark { grid-column: 1 / -1; grid-row: 1; white-space: nowrap; text-align: center; overflow: hidden; font-size: 1.5rem; letter-spacing: .01em; }
  .ha-tagline { grid-column: 2; grid-row: 2; margin-top: 0; }
  .ha-verse { font-size: .85rem; margin-top: 4px; padding-top: 4px; line-height: 1.3; }
  .ha-verse-label { display: none; } /* the phone keeps the verse and its reference, not the label */
  .ha-mark { grid-column: 1; grid-row: 2; width: 40px; height: 40px; }
  .ha-tagline { font-size: 1.05rem; line-height: 1.15; }
  .ha-nav .ha-wrap { gap: 0 14px; letter-spacing: .02em; }
  .ha-nav a { padding: 7px 0 5px; }
  /* 2026-10-21 (Adam: "make the today's issue line one line"): sentence case (uppercase + tracking cannot hold the
     longest date at 320px at a readable size), nowrap, size follows the width between .8rem and .9rem. */
  .ha-feed-head > div { min-width: 0; max-width: 100%; } /* a flex item: without this nowrap text widens it and the ellipsis below never engages (review R1 F1: page scrolled sideways on a wider font) */
  .ha-eyebrow-label { display: none; } /* phone: the date alone (Adam, 2026-10-21: "drop todays issue on phones") */
  .ha-eyebrow { white-space: nowrap; text-transform: none; letter-spacing: .02em; font-size: clamp(.8rem, 3.6vw, .9rem); overflow: hidden; text-overflow: ellipsis; }
  .ha-feed-head h1 { font-size: 1.4rem; } /* 1.45 -> 1.4: the wordmark (1.5) stays the largest heading (tests/logo_test.php) */
  .ha-search { flex-basis: 100%; }
  .ha-prose h1 { font-size: 1.4rem; }
  .ha-wrap { padding: 0 16px; }
  .ha-prose { padding: 4px 16px 16px; }
}
@media (max-width: 360px) {
  .ha-nav .ha-wrap { gap: 0 10px; letter-spacing: 0; font-size: .9rem; } /* one toolbar line at 320px */
}