/* SportsNat — black & gold: black masthead + stadium hero, cream page, white cards */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f6f1e7; color: #191919; line-height: 1.55; }
a { color: #9a6b00; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Masthead */
/* Masthead — revamped 2026-11-10: one tidy bar. Row 1 is the wordmark
   plus the account actions; row 2 is a single nav strip. Nothing in
   the header is allowed to wrap onto two lines: labels are nowrap,
   the username truncates with an ellipsis, the nav links slide
   sideways (scrollbar hidden) if they ever outgrow the bar, and the
   search box shrinks — then drops to its own full row — on phones. */
.masthead { background: #000; border-bottom: 4px solid #ffb612; padding: 12px 0 10px; }
.mast-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.logo { font-size: clamp(21px, 6vw, 32px); font-weight: 900; color: #fff; text-decoration: none; letter-spacing: .5px; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.logo span { color: #ffb612; }
.mast-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; }
.mast-user { display: inline-flex; align-items: center; gap: 6px; color: #ddd; font-size: 14px; white-space: nowrap; min-width: 0; }
.mast-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.pill { display: inline-block; border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.pill-login { color: #fff; border: 2px solid #fff; background: transparent; }
.pill-login:hover { border-color: #ffb612; color: #ffb612; }
.pill-signup { color: #000; background: #ffb612; border: 2px solid #ffb612; }
.pill-signup:hover { background: #ffc63f; }
.mast-nav { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-links::-webkit-scrollbar { display: none; }
.mast-nav a { color: #eee; text-decoration: none; font-size: 15px; white-space: nowrap; flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; }
.mast-nav a:hover { color: #ffb612; background: rgba(255, 182, 18, .15); }

/* Hero */
.hero { background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 65%, rgba(0,0,0,0) 100%), #111 url('images/hero.jpg') center 30% / cover no-repeat; border-bottom: 4px solid #ffb612; }
.hero-inner { padding: 64px 16px 40px; }
.hero h1 { margin: 0 0 8px; color: #fff; font-size: clamp(36px, 6.5vw, 58px); font-weight: 900; line-height: 1.08; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.hero h1 .gold { color: #ffb612; }
.hero p { margin: 0; color: #fff; font-size: 18px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

main.wrap { padding-top: 16px; padding-bottom: 32px; }
.layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } .hero-inner { padding: 44px 16px 30px; } }

/* Cards and panels */
.post-card, .post-full, .panel { background: #fff; border: 1px solid #e5ddcb; border-radius: 14px; padding: 20px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(60,50,20,.06); }
.post-card { border-top: 5px solid #ffb612; }
.post-full { border-top: 5px solid #ffb612; }
.post-date { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #8a8378; margin-bottom: 6px; }
.post-card h2, .post-full h1 { margin: 4px 0 8px; line-height: 1.22; font-weight: 800; color: #111; }
.post-card h2 { font-size: 27px; }
.post-full h1 { font-size: 32px; }
.post-card h2 a { color: #111; text-decoration: none; }
.post-card h2 a:hover { color: #9a6b00; }
.byline { color: #555; font-size: 14px; margin-bottom: 6px; }
.byline strong { color: #191919; }
.excerpt { color: #333; margin: 6px 0 4px; }
.badge { display: inline-block; background: #ffb612; color: #000; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.body-text { white-space: pre-wrap; color: #222; }
.small { font-size: 13px; color: #777; }

/* Share + follow buttons */
.share { margin: 12px 0 4px; }
.share-btn { display: inline-block; background: #fff; color: #191919; border: 1.5px solid #191919; border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; text-decoration: none; margin: 0 6px 6px 0; }
.share-btn:hover { background: #ffb612; border-color: #ffb612; color: #000; }
.btn-follow { background: #ffb612; color: #000; border: 0; border-radius: 999px; padding: 5px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-follow:hover { background: #ffc63f; }
.btn-ghost { background: transparent; color: #191919; border: 1.5px solid #191919; border-radius: 999px; font-weight: 600; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.btn-ghost:hover { border-color: #ffb612; background: #ffb612; color: #000; }

/* Sponsored slots — one uniform box everywhere (top of page, sidebar,
   in-feed): same padding, same dashed frame, and the same 18px bottom
   margin the cards and panels use, so ads sit in the content rhythm
   instead of floating at their own spacing. Width is capped by the
   responsive-hardening rules further down. */
.ad { background: #f3ead3; border: 1.5px dashed #d9c48f; border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; width: 100%; }
.ad-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #8a8378; margin-bottom: 6px; }
.ad-main strong { font-size: 20px; color: #4a4436; }
.ad-main p { margin: 4px 0 0; color: #6d675a; font-size: 15px; }
.ad-main a { color: #4a4436; text-decoration: none; }
.ad-main a:hover { text-decoration: underline; }

/* Forms */
input[type=text], input[type=password], input[type=url], textarea, select { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #cfc8b4; background: #fff; color: #191919; margin: 4px 0 12px; font-size: 15px; }
textarea { min-height: 220px; }
button, .btn { background: #ffb612; color: #000; border: 0; border-radius: 999px; padding: 9px 20px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: #ffc63f; }
.error { background: #fdecec; border: 1px solid #e5a3a3; color: #7a1616; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.notice { background: #e9f6ea; border: 1px solid #9ecfa3; color: #1d5c27; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }

/* Writer profiles */
.profile-head { border-top: 5px solid #ffb612; }
.profile-name { font-size: 32px; margin: 4px 0 2px; }
.profile-bio { color: #333; margin: 10px 0 4px; white-space: pre-wrap; }
.profile-stats { display: flex; gap: 28px; margin: 14px 0 6px; }
.profile-stat strong { display: block; font-size: 26px; line-height: 1.1; }
.profile-stat span { font-size: 13px; color: #777; }

/* Search + team tags */
.nav-search { display: flex; align-items: center; gap: 6px; flex: 0 1 272px; min-width: 168px; margin-left: auto; }
.nav-search input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; padding: 7px 12px; margin: 0; font-size: 14px; border-radius: 999px; border: 1.5px solid #555; background: #111; color: #fff; }
.nav-search input[type=search]::placeholder { color: #aaa; }
.nav-search button { padding: 7px 14px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; margin: 0; }
.search-form { display: flex; gap: 8px; }
.search-form input[type=search] { flex: 1; margin: 0; }
.search-form button { white-space: nowrap; }
.tag-pill { display: inline-block; background: #000; color: #ffb612; border: 1.5px solid #000; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; text-decoration: none; margin: 0 6px 6px 0; }
.tag-pill:hover { background: #ffb612; color: #000; border-color: #ffb612; }
.tag-pill-active { background: #ffb612; color: #000; border-color: #ffb612; }
.tag-head h1 { margin: 4px 0 6px; }

/* Comment likes + reader polls */
.comment-actions { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.like-count { font-size: 13px; color: #9a6b00; font-weight: 700; }
.btn-liked { background: #ffb612; border-color: #ffb612; }
.poll-q { font-size: 18px; font-weight: 700; margin: 4px 0 10px; }
.poll-opt { display: block; padding: 5px 0; font-size: 15px; }
.poll-opt input { margin-right: 8px; }
.poll-result { margin: 10px 0; }
.poll-result-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 4px; }
.poll-bar { background: #eee5cf; border-radius: 999px; height: 12px; overflow: hidden; }
.poll-bar-fill { background: #ffb612; height: 100%; border-radius: 999px; }
.poll-mine .poll-result-head strong { color: #9a6b00; }

/* Following feed polish */
.badge-new { background: #000; color: #ffb612; }
.feed-summary { color: #555; font-size: 14px; margin: -4px 0 16px; }
.suggest-row { border-top: 1px solid #eee5cf; padding: 10px 0; }
.suggest-row:first-of-type { border-top: 0; }
.suggest-bio { color: #555; font-size: 14px; margin: 4px 0; }
.suggest-meta { font-size: 13px; color: #777; }
.follow-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #eee5cf; padding: 8px 0; }
.follow-row:first-of-type { border-top: 0; }

/* Comments, tables, footer */
.comment { border-top: 1px solid #eee5cf; padding: 10px 0; }
.comment .byline { margin-bottom: 2px; }
.comment-pinned { background: #fff7e0; border: 2px solid #ffb612; border-radius: 8px; padding: 10px 12px; margin: 6px 0; }
.badge-pinned { background: #000; color: #ffb612; }
table.users { width: 100%; border-collapse: collapse; }
table.users td, table.users th { border-bottom: 1px solid #eee5cf; padding: 8px; text-align: left; font-size: 14px; }
.footer { background: #000; border-top: 4px solid #ffb612; color: #999; font-size: 13px; padding: 18px 0 28px; margin-top: 8px; }

/* Faith & Prayer */
.tag-faith { background: #5b3a8e; border-color: #5b3a8e; color: #fff; }
.tag-faith:hover { background: #ffb612; border-color: #ffb612; color: #000; }
.faith-intro { border-top: 5px solid #5b3a8e; }
.faith-intro h1 { margin: 4px 0 8px; font-size: 32px; font-weight: 800; color: #111; line-height: 1.22; }
/* Faith shop — horizontal scroller (2026-11-10): the product
   grid became a left-and-right strip. The .faith-scroll wrapper
   owns the sideways scrolling, so the page itself never scrolls
   sideways; the track inside is a flex row sized to its cards and
   centred by its auto margins whenever it fits (a filtered-down
   result set sits in the middle, never stranded at the left);
   when it doesn't fit, the auto margins collapse to zero, the
   strip starts at the left edge and scrolls, and the next card
   peeking in is the invitation to swipe. Card widths keep two
   cards on a phone screen, more on wider screens. */
.faith-scroll { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; margin-bottom: 18px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.faith-scroll::-webkit-scrollbar { height: 8px; }
.faith-scroll::-webkit-scrollbar-thumb { background: #d9c48f; border-radius: 999px; }
.faith-scroll::-webkit-scrollbar-track { background: #eee5cf; border-radius: 999px; }
.faith-grid { display: flex; gap: 14px; flex: 0 0 auto; margin: 0 auto; padding: 4px 2px 8px; }
.faith-product { background: #fff; border: 1px solid #e5ddcb; border-radius: 14px; padding: 16px; box-shadow: 0 1px 4px rgba(60,50,20,.06); display: flex; flex-direction: column; flex: 0 0 auto; width: 232px; scroll-snap-align: start; }
@media (max-width: 900px) { .faith-product { width: 204px; } }
.faith-product img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.faith-thumb-ph { height: 160px; border-radius: 10px; background: #f3ead3; border: 1.5px dashed #d9c48f; display: flex; align-items: center; justify-content: center; font-size: 52px; color: #5b3a8e; margin-bottom: 10px; }
.faith-product h3 { margin: 2px 0 6px; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.faith-desc { color: #333; font-size: 14px; margin: 0 0 10px; flex: 1; overflow-wrap: anywhere; }
.faith-price { font-size: 20px; font-weight: 800; color: #111; margin: 0 0 2px; }
.faith-stock { font-size: 13px; color: #777; margin: 0 0 10px; }
.faith-buy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.faith-buy input[type=number] { width: 64px; flex: 0 0 auto; padding: 8px; border-radius: 8px; border: 1px solid #cfc8b4; font-size: 15px; margin: 0; }
.faith-buy button { flex: 1 1 auto; white-space: nowrap; }
.faith-cart { border-top: 5px solid #5b3a8e; }
.faith-cart-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #eee5cf; padding: 8px 0; flex-wrap: wrap; }
.faith-cart-row:first-of-type { border-top: 0; }
.faith-cart-name { font-weight: 600; }
.faith-cart-qty { display: flex; align-items: center; gap: 6px; }
.faith-cart-qty button { padding: 3px 11px; font-size: 14px; }
.faith-cart-total { font-size: 18px; font-weight: 800; margin: 12px 0; }
.faith-msg { margin-bottom: 14px; }
@media (max-width: 560px) { .faith-intro h1 { font-size: 26px; } .faith-product { width: calc((100vw - 72px) / 2); padding: 12px; } .faith-product img, .faith-thumb-ph { height: 110px; } }

/* Faith & Prayer v2 — search/filter, detail modal, coupons, admin */
.faith-filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.faith-filter-row input[type=search] { flex: 1 1 220px; padding: 10px 14px; border-radius: 999px; border: 1px solid #cfc8b4; font-size: 15px; margin: 0; min-width: 0; }
.faith-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.faith-chip { background: #fff; color: #191919; border: 1.5px solid #d9c48f; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.faith-chip:hover { border-color: #5b3a8e; color: #5b3a8e; }
.faith-chip.active { background: #5b3a8e; border-color: #5b3a8e; color: #fff; }
.faith-clickable { cursor: pointer; }
.faith-product h3.faith-clickable:hover { color: #5b3a8e; }
.faith-modal { display: none; position: fixed; inset: 0; background: rgba(20, 15, 5, .55); z-index: 60; align-items: center; justify-content: center; padding: 16px; }
.faith-modal.open { display: flex; }
.faith-modal-box { background: #fff; border-radius: 14px; border-top: 5px solid #5b3a8e; padding: 20px; max-width: 480px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.faith-modal-box h3 { margin: 4px 0 6px; font-size: 23px; line-height: 1.25; }
.faith-modal-close { position: absolute; top: 8px; right: 8px; background: #f3ead3; color: #191919; border-radius: 999px; width: 34px; height: 34px; padding: 0; font-size: 20px; line-height: 1; z-index: 1; }
.faith-modal-close:hover { background: #ffb612; }
.faith-modal-img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.faith-modal-ph { height: 220px; }
.faith-cart-totals { margin: 12px 0; }
.faith-total-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 15px; }
.faith-discount-line { color: #1d5c27; font-weight: 600; }
.faith-grand-total { font-size: 18px; font-weight: 800; border-top: 1px solid #eee5cf; margin-top: 6px; padding-top: 8px; }
.faith-coupon-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; }
.faith-coupon-row input[type=text] { flex: 1; margin: 0; min-width: 0; text-transform: uppercase; }
.faith-lowstock { background: #b3261e; color: #fff; }
.faith-filter-links { font-size: 14px; margin: 0 0 10px; }
.faith-filter-links a { margin-right: 4px; }
.panel input[type=date] { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #cfc8b4; background: #fff; color: #191919; margin: 4px 0 12px; font-size: 15px; }

/* Faith & Prayer v3 — memberships, support, wallet, analytics,
   banner, construction, shipping labels */
.faith-banner { background: #5b3a8e; color: #fff; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-weight: 700; text-align: center; }
.faith-construction { border-top: 5px solid #b3261e; }
.faith-featured-badge { background: #ffb612; color: #000; }
.faith-member { border-top: 5px solid #5b3a8e; }
.faith-plan-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.faith-plan { flex: 1 1 220px; background: #f6f1e7; border: 1px solid #e5ddcb; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.faith-ship-address { min-height: 74px; }
.faith-support { border-top: 5px solid #5b3a8e; }
.faith-contact-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.faith-ticket { border-top: 1px solid #eee5cf; padding: 12px 0; }
.faith-ticket:first-of-type { border-top: 0; }
.faith-ticket-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.faith-ticket-reply { background: #f6f1e7; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.faith-ticket-reply-form { margin-top: 8px; }
.faith-badge-closed { background: #8a8378; color: #fff; }
.faith-prio-dedicated { background: #5b3a8e; color: #fff; }
.faith-prio-priority { background: #ffb612; color: #000; }
.faith-prio-basic { background: #eee5cf; color: #191919; }
/* Site-wide owner announcement banner (under the header, every page) */
.site-announcement { background: #ffb612; color: #111; text-align: center; padding: 10px 14px; font-weight: 700; font-size: 15px; border-radius: 12px; margin: 0 0 16px; overflow-wrap: anywhere; }

.faith-ana-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 14px; }
/* Seller analytics: each day row is a tap target that fills the
   detail line under the chart with that day's full date + revenue. */
button.faith-ana-row { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 5px 4px; border-radius: 8px; }
button.faith-ana-row:hover, button.faith-ana-row:focus-visible { background: rgba(91, 58, 142, .08); outline: none; }
.faith-ana-detail { font-weight: 700; margin: 8px 0 2px; min-height: 1.2em; }
.faith-ana-label { flex: 0 0 130px; min-width: 0; overflow-wrap: anywhere; }
.faith-ana-track { flex: 1; background: #eee5cf; border-radius: 999px; height: 12px; overflow: hidden; min-width: 40px; }
.faith-ana-fill { display: block; background: #5b3a8e; height: 100%; border-radius: 999px; }
.faith-ana-fill-alt { background: #ffb612; }
.faith-ana-val { flex: 0 0 auto; color: #555; }
/* Shipping label page (faith_label.php loads this stylesheet) */
.faith-label-page main.wrap { padding-top: 24px; }
.faith-label { background: #fff; border: 2px solid #191919; border-radius: 6px; padding: 26px; max-width: 560px; margin: 0 auto 24px; }
.faith-label-from { border-bottom: 1px dashed #cfc8b4; padding-bottom: 14px; margin-bottom: 16px; font-size: 14px; }
.faith-label-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #8a8378; margin-bottom: 4px; }
.faith-label-name { font-size: 26px; font-weight: 800; line-height: 1.2; }
.faith-label-address { font-size: 19px; margin-top: 4px; }
.faith-label-meta { border-top: 1px dashed #cfc8b4; padding-top: 12px; margin-top: 18px; font-size: 14px; }
.faith-label-actions { max-width: 560px; margin: 0 auto 14px; display: flex; gap: 10px; align-items: center; }
@media print {
  .no-print, .faith-label-actions { display: none !important; }
  body { background: #fff; }
  .faith-label { border-width: 2px; box-shadow: none; margin: 0; max-width: none; }
}

/* Responsive hardening — the page must fit the screen at every width:
   no sideways scrolling on phones, tablets, or desktop. */
/* Safety net: never allow horizontal scrolling, whatever a widget does. */
html, body { overflow-x: hidden; }
/* Media and embedded content can never be wider than their container. */
img, iframe, video, embed, object, ins { max-width: 100%; }
main.wrap, .hero, .masthead, .footer { max-width: 100%; }
/* Grid/flex children must be allowed to shrink below their content size,
   otherwise one wide item stretches the whole page sideways. */
.layout > * { min-width: 0; }
.mast-actions { min-width: 0; }
.profile-stats { flex-wrap: wrap; }
.comment-actions { flex-wrap: wrap; }
.search-form input[type=search] { min-width: 0; }
.poll-result-head > span { min-width: 0; overflow-wrap: anywhere; }
/* Ad slots: AdSense units and the iframes Google drops inside them stay
   inside their box (an oversized creative is clipped, never the page). */
.ad { max-width: 100%; overflow: hidden; }
ins.adsbygoogle { display: block; max-width: 100% !important; overflow: hidden; }
.ad iframe { max-width: 100% !important; }
/* Long unbroken words, links and usernames wrap instead of forcing width. */
.body-text, .profile-bio, .comment, .excerpt, .poll-q, .poll-opt, .byline { overflow-wrap: anywhere; }
.post-card h2, .post-full h1, .profile-name { overflow-wrap: break-word; }
/* Admin/user tables stay within their panel on narrow screens. */
table.users { table-layout: fixed; }
table.users td, table.users th { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .post-card, .post-full, .panel { padding: 16px; }
  .post-card h2 { font-size: 23px; }
  .post-full h1 { font-size: 26px; }
  .profile-name { font-size: 26px; }
  .profile-stat strong { font-size: 22px; }
  .ad { padding: 12px; }
  .hero p { font-size: 16px; }
}

/* Masthead on smaller screens (revamp): the wordmark and the account
   actions share row 1 — both shrink, nothing wraps. The search box
   drops to its own full row once the nav strip plus search would
   have to squeeze; the links themselves stay on one scrollable
   strip (scrollbar hidden) if they ever outgrow the bar. */
@media (max-width: 900px) {
  .mast-nav { flex-wrap: wrap; }
  .nav-links { flex: 1 1 100%; }
  .nav-search { flex: 1 1 100%; min-width: 0; margin-left: 0; }
}
@media (max-width: 640px) {
  .pill { padding: 7px 12px; font-size: 13.5px; }
  .mast-uname { max-width: 76px; }
}
@media (max-width: 420px) {
  .logo { font-size: 19px; letter-spacing: 0; }
  .pill { padding: 6px 10px; font-size: 13px; }
  .mast-uname { max-width: 58px; }
  .mast-user { font-size: 13px; }
}

/* Video link previews (2026-11-10): players embedded by video_embed.php in
   article and comment bodies. 16:9 landscape by default; portrait formats
   (YouTube Shorts, TikTok, Instagram Reels, Facebook Reels) are narrower. */
.video-embed { position: relative; width: 100%; max-width: 720px; margin: 12px auto; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-embed--portrait { max-width: 360px; aspect-ratio: 9 / 16; }
.video-embed--tweet { background: transparent; aspect-ratio: auto; overflow: visible; }
.video-embed--tweet .twitter-tweet { margin: 0 auto !important; }
.video-caption { text-align: center; font-size: 13px; margin: 2px auto 12px; overflow-wrap: anywhere; }
.comment .video-embed { max-width: 560px; }
.comment .video-embed--portrait { max-width: 320px; }

/* YouTube embed-blocked fallback (2026-11-10): when a video's owner has
   disabled embedding, yt_fallback.js swaps the dead player for this
   thumbnail card linking to the watch page. The card absolutely fills
   its .video-embed wrapper, so the 16:9 (or portrait) box the iframe
   occupied is preserved exactly and the layout never jumps. The
   thumbnail, play disc and badge reuse the feed-preview classes. */
.video-embed .yt-fallback { position: absolute; inset: 0; display: block; background: #111; text-decoration: none; }
.yt-fallback-note { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); width: max-content; max-width: 92%; background: rgba(0, 0, 0, .82); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center; padding: 6px 12px; border-radius: 999px; }
.video-embed--portrait .yt-fallback-note { bottom: 7%; font-size: 12.5px; }
.video-embed .yt-fallback:hover .video-preview-disc, .video-embed .yt-fallback:focus-visible .video-preview-disc { background: #ffc933; }
.video-embed .yt-fallback:focus-visible { outline: 3px solid #9a6b00; outline-offset: -3px; }

/* Listing video previews (2026-11-10): click-to-play facades on post
   cards (video_embed.php's sn_video_preview_html + video_preview.js).
   The wrapper bleeds to the card edges exactly like .card-thumb-link;
   the facade is a 16:9 tile — thumbnail, first frame, post image, or a
   labelled placeholder — and the swapped-in embed reuses .video-embed. */
.video-preview { margin: -20px -20px 12px; }
.video-preview-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: 9px 9px 0 0; overflow: hidden; background: #111; cursor: pointer; -webkit-appearance: none; appearance: none; }
.video-preview-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.video-preview-tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(135deg, #33333d, #101014); }
.video-preview-platform { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .02em; }
.video-preview-disc { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 182, 18, .96); color: #111; font-size: 25px; line-height: 1; padding-left: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.video-preview-disc--over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video-preview-badge { position: absolute; left: 10px; bottom: 10px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.video-preview-facade:hover .video-preview-disc, .video-preview-facade:focus-visible .video-preview-disc { background: #ffc933; }
.video-preview-facade:focus-visible { outline: 3px solid #9a6b00; outline-offset: -3px; }
.video-preview .video-embed { margin: 0 auto; }
.video-preview .video-caption { margin-bottom: 0; padding: 6px 10px 2px; }
@media (max-width: 640px) {
  .video-preview { margin: -16px -16px 10px; }
  .video-preview-disc { width: 52px; height: 52px; font-size: 21px; }
}

/* Post images, photo posts & link posts (2026-11-10, update_post_images.php):
   hero banner on the article page, card thumbnails on listings, Photo/Link
   badges, the link destination card, and the write-form image picker. */
.post-hero { display: block; width: 100%; border-radius: 12px; margin: 10px 0 14px; }
.post-hero-cover { max-height: 420px; object-fit: cover; }
.post-hero-photo { max-height: 82vh; object-fit: contain; background: #111; }
.card-thumb-link { display: block; margin: -20px -20px 12px; }
.card-thumb { display: block; width: 100%; height: 210px; object-fit: cover; border-radius: 9px 9px 0 0; }
.card-badges { margin: 0 0 6px; }
.badge-photo { background: #111; color: #ffb612; }
.badge-link { background: #111; color: #ffb612; }
.link-card { display: flex; flex-direction: column; gap: 2px; background: #fff8e6; border: 1px solid #e5ddcb; border-left: 5px solid #ffb612; border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; }
.link-card a { font-weight: 800; color: #9a6b00; text-decoration: none; font-size: 18px; overflow-wrap: anywhere; }
.link-card-url { color: #555; font-size: 13px; overflow-wrap: anywhere; }
.form-error { background: #fdecec; border: 1px solid #e5b4b4; color: #7a1f1f; border-radius: 10px; padding: 10px 14px; }
.current-image { display: block; max-width: 260px; border-radius: 10px; margin: 6px 0; }
@media (max-width: 640px) {
  .card-thumb-link { margin: -16px -16px 10px; }
  .card-thumb { height: 160px; }
  .post-hero-cover { max-height: 260px; }
}

/* New-article alerts panel (notify_widget.php): two separate section
   switches — Sports and Faith & Prayer — plus the device on/off button. */
.notify-panel h3 { margin-top: 0; }
.notify-opt { display: block; font-size: 15px; font-weight: 600; margin: 8px 0; cursor: pointer; }
.notify-opt input[type="checkbox"] { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; accent-color: #ffb612; cursor: pointer; }
.notify-actions { margin: 12px 0 4px; }
.notify-status { min-height: 18px; margin: 4px 0 0; }

/* Numbered pagination (db.php pagination_html): one pager under every
   article listing — home feed, team pages, search, Following, writer
   profiles, the Faith & Prayer blog. Ten posts a page; the current
   page is a solid gold pill; long page runs collapse with an ellipsis.
   The row wraps onto a second line on narrow phones rather than ever
   widening the page, and every pill label is nowrap. */
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 2px 0 20px; }
.pager-link { display: inline-block; padding: 7px 13px; border: 1.5px solid #d9c48f; border-radius: 999px; background: #fff; color: #4a4436; font-size: 14px; font-weight: 700; line-height: 1.25; text-decoration: none; white-space: nowrap; }
a.pager-link:hover { border-color: #ffb612; color: #111; }
.pager-cur { background: #ffb612; border-color: #ffb612; color: #111; }
.pager-off { opacity: .45; }
.pager-gap { color: #8a8378; padding: 0 2px; }

/* People & roles (people.php): the roster table must never crush the
   way table-layout:fixed + overflow-wrap:anywhere (the generic .users
   rules above) made it — headers split mid-word, usernames split
   mid-name, the gold role badges stacked letter by letter, and the
   promote/demote controls ran off the right edge. Desktop keeps the
   table: auto layout, nowrap where it matters, a min-width on the
   promote column so the select + Save always fit. At <=720px every
   row becomes a card: username + badge on line 1, a plain-text stats
   line, then the promote/demote control full-width. Everything is
   scoped to .people-table so faith_admin's ledger/orders tables
   (also .users) keep their existing behaviour. */
table.people-table { table-layout: auto; }
table.people-table td, table.people-table th { overflow-wrap: normal; }
table.people-table th { white-space: nowrap; }
table.people-table td.p-user { max-width: 210px; }
table.people-table .p-uname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.people-table .p-stat { white-space: nowrap; }
table.people-table .p-act { min-width: 240px; }
table.people-table .p-statsline { display: none; }
/* Tablet widths: the six nowrap columns' natural widths add up to a
   little more than the panel holds, so tighten the padding and the
   two capped columns until the whole table fits inside it again. */
@media (max-width: 900px) {
  table.people-table td, table.people-table th { padding-left: 5px; padding-right: 5px; }
  table.people-table td.p-user { max-width: 170px; }
  table.people-table .p-act { min-width: 200px; }
}
@media (max-width: 720px) {
  table.people-table, table.people-table tbody { display: block; width: 100%; }
  table.people-table .p-head { display: none; }
  table.people-table .p-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; border: 1px solid #e5ddcb; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
  table.people-table .p-row td { border-bottom: none; padding: 0; }
  table.people-table td.p-user { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; }
  table.people-table .p-uname { display: block; overflow: hidden; text-overflow: ellipsis; }
  table.people-table td.p-role { flex: 0 0 auto; }
  table.people-table td.p-stat { display: none; }
  table.people-table td.p-statsline { display: block; flex: 1 1 100%; margin-top: 4px; font-size: 14px; color: #555; }
  table.people-table td.p-act { flex: 1 1 100%; min-width: 0; margin-top: 10px; }
  table.people-table td.p-act form { width: 100%; }
  table.people-table td.p-act select { flex: 1 1 auto; min-height: 42px; font-size: 15px; }
  table.people-table td.p-act button { flex: 0 0 auto; min-height: 42px; padding: 0 18px; }
  table.people-table td.p-act .small { display: block; }
}

/* Article engagement (post.php engage bar, bookmarks.php, and the home
   page's Most read panel): like / save buttons sit in one wrapping row
   under the article — flex-wrap plus nowrap labels, so the row folds
   onto a second line on narrow phones instead of widening the page,
   matching the pager rules above. The Most read list is a numbered
   ranking with gold rank numbers; titles wrap normally. */
.engage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 4px; padding: 12px 0; border-top: 1px solid #e5ddcb; border-bottom: 1px solid #e5ddcb; }
.engage form { margin: 0; }
.engage-count { font-size: 14px; font-weight: 700; color: #9a6b00; white-space: nowrap; }
.engage .small { white-space: normal; }
.most-read { list-style: none; counter-reset: mr; margin: 6px 0 0; padding: 0; }
.most-read li { counter-increment: mr; position: relative; padding: 8px 0 8px 34px; border-bottom: 1px solid #eee5cf; }
.most-read li:last-child { border-bottom: none; }
.most-read li::before { content: counter(mr); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: #ffb612; color: #111; font-size: 13px; font-weight: 800; line-height: 24px; text-align: center; }
.most-read a { color: #111; text-decoration: none; overflow-wrap: anywhere; }
.most-read a:hover { color: #9a6b00; }

/* ================================================================
   THEME SYSTEM (2026-11-10): palettes are CSS variables. The :root
   values below are EXACTLY the colours the rules above have always
   used, and the re-skin block re-declares the core surfaces through
   the variables — so the default "home" theme renders identically
   to the pre-theme site. Each [data-theme="..."] block further down
   only swaps variable values (plus a couple of decorative extras).
   The active theme is chosen server-side in db.php (themes.php):
   a visitor's pinned choice, else today's holiday, else home.
   ================================================================ */
:root {
  --bg: #f6f1e7; --surface: #ffffff; --surface-2: #f3ead3;
  --text: #191919; --heading: #111111; --body-2: #333333; --body-2b: #222222;
  --muted: #777777; --muted-2: #555555; --faint: #8a8378;
  --accent: #ffb612; --accent-2: #9a6b00; --accent-hover: #ffc63f; --on-accent: #000000;
  --border: #e5ddcb; --border-soft: #eee5cf; --border-strong: #d9c48f; --input-border: #cfc8b4;
  --header-bg: #000000; --header-text: #ffffff; --header-link: #eeeeee; --header-muted: #dddddd; --header-2: #111111;
  --footer-text: #999999; --tag-bg: #000000; --nav-hover-bg: rgba(255, 182, 18, .15);
  --ad-strong: #4a4436; --ad-p: #6d675a; --pinned-bg: #fff7e0; --linkcard-bg: #fff8e6;
  --search-border: #555555; --search-ph: #aaaaaa;
}

/* Core surfaces through the variables (values identical by default) */
body { background: var(--bg); color: var(--text); }
a { color: var(--accent-2); }
.masthead { background: var(--header-bg); border-bottom-color: var(--accent); }
.logo { color: var(--header-text); }
.logo span { color: var(--accent); }
.mast-user { color: var(--header-muted); }
.pill-login { color: var(--header-text); border-color: var(--header-text); }
.pill-login:hover { border-color: var(--accent); color: var(--accent); }
.pill-signup { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.pill-signup:hover { background: var(--accent-hover); }
.mast-nav a { color: var(--header-link); }
.mast-nav a:hover { color: var(--accent); background: var(--nav-hover-bg); }
.nav-search input[type=search] { border-color: var(--search-border); background: var(--header-2); color: var(--header-text); }
.nav-search input[type=search]::placeholder { color: var(--search-ph); }
.hero { border-bottom-color: var(--accent); }
.post-card, .post-full, .panel { background: var(--surface); border-color: var(--border); }
.post-card, .post-full { border-top-color: var(--accent); }
.post-date { color: var(--faint); }
.post-card h2, .post-full h1 { color: var(--heading); }
.post-card h2 a { color: var(--heading); }
.post-card h2 a:hover { color: var(--accent-2); }
.byline { color: var(--muted-2); }
.byline strong { color: var(--text); }
.excerpt { color: var(--body-2); }
.badge { background: var(--accent); color: var(--on-accent); }
.body-text { color: var(--body-2b); }
.small { color: var(--muted); }
.share-btn { background: var(--surface); color: var(--text); border-color: var(--text); }
.share-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-follow { background: var(--accent); color: var(--on-accent); }
.btn-follow:hover { background: var(--accent-hover); }
.btn-ghost { color: var(--text); border-color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ad { background: var(--surface-2); border-color: var(--border-strong); }
.ad-tag { color: var(--faint); }
.ad-main strong { color: var(--ad-strong); }
.ad-main p { color: var(--ad-p); }
.ad-main a { color: var(--ad-strong); }
input[type=text], input[type=password], input[type=url], textarea, select { border-color: var(--input-border); background: var(--surface); color: var(--text); }
.panel input[type=date] { border-color: var(--input-border); background: var(--surface); color: var(--text); }
button, .btn { background: var(--accent); color: var(--on-accent); }
button:hover, .btn:hover { background: var(--accent-hover); }
.profile-bio { color: var(--body-2); }
.profile-stat span { color: var(--muted); }
.tag-pill { background: var(--tag-bg); color: var(--accent); border-color: var(--tag-bg); }
.tag-pill:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tag-pill-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.like-count { color: var(--accent-2); }
.poll-bar { background: var(--border-soft); }
.poll-bar-fill { background: var(--accent); }
.poll-mine .poll-result-head strong { color: var(--accent-2); }
.feed-summary { color: var(--muted-2); }
.suggest-row, .follow-row { border-top-color: var(--border-soft); }
.suggest-bio { color: var(--muted-2); }
.suggest-meta { color: var(--muted); }
.comment { border-top-color: var(--border-soft); }
.comment-pinned { background: var(--pinned-bg); border-color: var(--accent); }
table.users td, table.users th { border-bottom-color: var(--border-soft); }
.footer { background: var(--header-bg); border-top-color: var(--accent); color: var(--footer-text); }
.faith-intro h1 { color: var(--heading); }
.faith-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); }
.faith-scroll::-webkit-scrollbar-track { background: var(--border-soft); }
.faith-product { background: var(--surface); border-color: var(--border); }
.faith-thumb-ph { background: var(--surface-2); border-color: var(--border-strong); }
.faith-desc { color: var(--body-2); }
.faith-price { color: var(--heading); }
.faith-stock { color: var(--muted); }
.faith-modal-box { background: var(--surface); }
.faith-modal-close { background: var(--surface-2); color: var(--text); }
.faith-modal-close:hover { background: var(--accent); }
.faith-plan { background: var(--bg); border-color: var(--border); }
.faith-ticket { border-top-color: var(--border-soft); }
.faith-ticket-reply { background: var(--bg); }
.faith-cart-row { border-top-color: var(--border-soft); }
.faith-grand-total { border-top-color: var(--border-soft); }
.faith-chip { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.faith-ana-track { background: var(--border-soft); }
.faith-ana-val { color: var(--muted-2); }
.faith-filter-row input[type=search] { border-color: var(--input-border); background: var(--surface); color: var(--text); }
.faith-label { color: #191919; }
.faith-label .faith-label-tag { color: #8a8378; }
.faith-label .small { color: #777777; }
.faith-label-from { border-bottom-color: #cfc8b4; }
.faith-label-meta { border-top-color: #cfc8b4; }
.link-card { background: var(--linkcard-bg); border-color: var(--border); border-left-color: var(--accent); }
.link-card a { color: var(--accent-2); }
.link-card-url { color: var(--muted-2); }
.pager-link { border-color: var(--border-strong); background: var(--surface); color: var(--ad-strong); }
a.pager-link:hover { border-color: var(--accent); color: var(--heading); }
.pager-cur { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager-gap { color: var(--faint); }
.engage { border-top-color: var(--border); border-bottom-color: var(--border); }
.engage-count { color: var(--accent-2); }
.most-read li { border-bottom-color: var(--border-soft); }
.most-read li::before { background: var(--accent); color: var(--on-accent); }
.most-read a { color: var(--heading); }
.most-read a:hover { color: var(--accent-2); }
.video-preview-facade:focus-visible { outline-color: var(--accent-2); }
@media (max-width: 720px) {
  table.people-table .p-row { background: var(--surface); border-color: var(--border); }
  table.people-table td.p-statsline { color: var(--muted-2); }
}

/* Theme switcher (header row 1, far left) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mast-row { justify-content: flex-start; }
.mast-actions { margin-left: auto; }
.logo { overflow: hidden; text-overflow: ellipsis; }
.theme-switch { display: flex; align-items: center; flex: 0 0 auto; }
.theme-select { width: auto; max-width: 148px; margin: 0; padding: 6px 8px; font-size: 13.5px; font-weight: 600; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--text); cursor: pointer; }
.theme-go { padding: 6px 12px; font-size: 13px; margin-left: 6px; }
@media (max-width: 900px) { .theme-select { max-width: 124px; } }
@media (max-width: 560px) {
  /* Phones: the switcher takes its own slim line at the top of the
     masthead (still top-left of the header) rather than squeezing
     the wordmark and account pills off the first row. */
  .mast-row { flex-wrap: wrap; }
  .theme-switch { order: -1; flex: 1 1 100%; margin-bottom: 8px; }
  .theme-select { max-width: 230px; }
}

/* Homepage theme banner: holiday greeting (+ image/video) or the
   active uniform theme's art strip. Homepage only (index.php). */
.theme-banner { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; }
.theme-banner-media { width: 132px; height: 84px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #111; }
.theme-banner-text { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.35; }
.theme-banner--art { padding: 0; overflow: hidden; border: 0; background: none; }
.theme-banner--art .theme-banner-media { width: 100%; height: 170px; border-radius: 12px; }
@media (max-width: 560px) {
  .theme-banner { gap: 10px; padding: 10px 12px; }
  .theme-banner-media { width: 96px; height: 64px; }
  .theme-banner-text { font-size: 15.5px; }
  .theme-banner--art .theme-banner-media { height: 110px; }
}

@media print {
  body { background: #fff !important; color: #191919 !important; }
  .theme-banner, .theme-switch { display: none !important; }
}

/* ---- Steelers uniform themes ---- */
[data-theme="away"] {
  --bg: #f4f4f6; --surface: #ffffff; --surface-2: #ececf0;
  --text: #141414; --heading: #000000; --body-2: #2c2c2c; --body-2b: #222222;
  --muted: #6a6a6a; --muted-2: #4d4d4d; --faint: #8a8a8a;
  --accent: #ffb612; --accent-2: #8a6100; --accent-hover: #ffc63f; --on-accent: #000000;
  --border: #d9d9de; --border-soft: #e8e8ec; --border-strong: #c9c9d1; --input-border: #c2c2ca;
  --header-bg: #ffffff; --header-text: #111111; --header-link: #222222; --header-muted: #444444; --header-2: #f0f0f2;
  --footer-text: #555555; --tag-bg: #111111; --nav-hover-bg: rgba(255, 182, 18, .22);
  --ad-strong: #33322c; --ad-p: #5c5a52; --pinned-bg: #fff7e0; --linkcard-bg: #fff8e6;
  --search-border: #c6c6cc; --search-ph: #777777;
}
[data-theme="colorrush"] {
  --bg: #0a0a0a; --surface: #161616; --surface-2: #1f1f1f;
  --text: #f2f2f2; --heading: #ffffff; --body-2: #d9d9d9; --body-2b: #e6e6e6;
  --muted: #a8a8a8; --muted-2: #c4c4c4; --faint: #8f8f8f;
  --accent: #ffb612; --accent-2: #ffb612; --accent-hover: #ffc63f; --on-accent: #000000;
  --border: #2e2e2e; --border-soft: #262626; --border-strong: #3d3d3d; --input-border: #3a3a3a;
  --header-bg: #000000; --header-text: #ffffff; --header-link: #eeeeee; --header-muted: #cccccc; --header-2: #111111;
  --footer-text: #999999; --tag-bg: #000000; --nav-hover-bg: rgba(255, 182, 18, .15);
  --ad-strong: #e8e2cf; --ad-p: #c9c2ab; --pinned-bg: #26200c; --linkcard-bg: #1f1f1f;
  --search-border: #555555; --search-ph: #aaaaaa;
}
[data-theme="bumblebee"] {
  --bg: #0d0c08; --surface: #171510; --surface-2: #221f16;
  --text: #f7f3e8; --heading: #ffffff; --body-2: #ddd6c2; --body-2b: #eae4d0;
  --muted: #b0a888; --muted-2: #cbc2a6; --faint: #978d6f;
  --accent: #ffb612; --accent-2: #ffb612; --accent-hover: #ffc63f; --on-accent: #000000;
  --border: #3a3524; --border-soft: #2b281c; --border-strong: #55492a; --input-border: #4a422a;
  --header-bg: #000000; --header-text: #ffffff; --header-link: #f3ecd9; --header-muted: #d8d0b4; --header-2: #111008;
  --footer-text: #a79d7f; --tag-bg: #000000; --nav-hover-bg: rgba(255, 182, 18, .18);
  --ad-strong: #efe7cf; --ad-p: #cfc5a4; --pinned-bg: #292410; --linkcard-bg: #221f16;
  --search-border: #55492a; --search-ph: #a79d7f;
}
/* Bumblebee banding: a black-and-gold striped band along the header's
   bottom edge, in place of the plain gold rule. */
[data-theme="bumblebee"] .masthead {
  border-bottom-color: transparent;
  background-image: repeating-linear-gradient(90deg, #ffb612 0 22px, #000000 22px 44px);
  background-size: 100% 6px; background-position: bottom; background-repeat: no-repeat;
}

/* ---- Holiday themes ---- */
[data-theme="veterans"] {
  --bg: #0d1526; --surface: #16223c; --surface-2: #1d2c4d;
  --text: #f4f6fb; --heading: #ffffff; --body-2: #d7deee; --body-2b: #e6ebf7;
  --muted: #a7b3cc; --muted-2: #c2cddd; --faint: #8d9cb8;
  --accent: #ffb612; --accent-2: #ffc63f; --accent-hover: #ffc63f; --on-accent: #000000;
  --border: #2e4470; --border-soft: #24365c; --border-strong: #3d5a8f; --input-border: #3a5484;
  --header-bg: #081020; --header-text: #ffffff; --header-link: #e8edf8; --header-muted: #cdd6ea; --header-2: #0d1830;
  --footer-text: #93a3c0; --tag-bg: #081020; --nav-hover-bg: rgba(255, 182, 18, .15);
  --ad-strong: #eef1f9; --ad-p: #c2cddd; --pinned-bg: #232f52; --linkcard-bg: #1d2c4d;
  --search-border: #3a5484; --search-ph: #8d9cb8;
}
/* Veterans + Independence Day: a red/white/blue band under the header. */
[data-theme="veterans"] .masthead, [data-theme="july4"] .masthead {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, #b22234 0 33.3%, #f5f5f5 33.3% 66.6%, #3c3b6e 66.6% 100%);
  background-size: 100% 4px; background-position: bottom; background-repeat: no-repeat;
}
[data-theme="july4"] {
  --bg: #f7f5ef; --surface: #ffffff; --surface-2: #eef1f8;
  --text: #16213c; --heading: #0d1830; --body-2: #2c3a58; --body-2b: #22304e;
  --muted: #66738d; --muted-2: #47536e; --faint: #8593ab;
  --accent: #2456c4; --accent-2: #b22234; --accent-hover: #3a6bd8; --on-accent: #ffffff;
  --border: #d5dbe8; --border-soft: #e4e9f2; --border-strong: #b9c4da; --input-border: #aebad2;
  --header-bg: #16264d; --header-text: #ffffff; --header-link: #e6ebf8; --header-muted: #d5dcee; --header-2: #0f1c3a;
  --footer-text: #aeb9cf; --tag-bg: #16264d; --nav-hover-bg: rgba(255, 255, 255, .14);
  --ad-strong: #22304e; --ad-p: #47536e; --pinned-bg: #fdf3d8; --linkcard-bg: #eef1f8;
  --search-border: #46587e; --search-ph: #93a3c0;
}
[data-theme="memorial"] {
  --bg: #1d1f26; --surface: #282a33; --surface-2: #31333d;
  --text: #eceaf0; --heading: #ffffff; --body-2: #d5d3dc; --body-2b: #e2e0e9;
  --muted: #a9a7b4; --muted-2: #c6c4cf; --faint: #918f9c;
  --accent: #b08d57; --accent-2: #d8b988; --accent-hover: #c19e66; --on-accent: #14100a;
  --border: #43454f; --border-soft: #373943; --border-strong: #55575f; --input-border: #4c4e58;
  --header-bg: #14151b; --header-text: #f2f0f5; --header-link: #e6e4ec; --header-muted: #c9c7d1; --header-2: #0e0f13;
  --footer-text: #9d9ba8; --tag-bg: #14151b; --nav-hover-bg: rgba(176, 141, 87, .18);
  --ad-strong: #ece9df; --ad-p: #c6c4cf; --pinned-bg: #333026; --linkcard-bg: #31333d;
  --search-border: #4c4e58; --search-ph: #918f9c;
}
[data-theme="memorial"] .theme-banner { border-color: #7a2e3a; }
[data-theme="christmas"] {
  --bg: #0e2417; --surface: #173723; --surface-2: #1e4530;
  --text: #f2f7f0; --heading: #ffffff; --body-2: #d9e8d9; --body-2b: #e6f2e6;
  --muted: #a9c4ac; --muted-2: #c4dcc6; --faint: #8fae93;
  --accent: #d4af37; --accent-2: #ffd97a; --accent-hover: #e3c158; --on-accent: #101503;
  --border: #2c5c40; --border-soft: #265036; --border-strong: #3d7355; --input-border: #356b4a;
  --header-bg: #081a0f; --header-text: #ffffff; --header-link: #eaf5ec; --header-muted: #cfe3d2; --header-2: #0b2013;
  --footer-text: #9dbfa2; --tag-bg: #081a0f; --nav-hover-bg: rgba(212, 175, 55, .16);
  --ad-strong: #f0f3e2; --ad-p: #c4dcc6; --pinned-bg: #274a26; --linkcard-bg: #1e4530;
  --search-border: #356b4a; --search-ph: #8fae93;
}
[data-theme="christmas"] .post-card, [data-theme="christmas"] .post-full { border-top-color: #c1272d; }
[data-theme="thanksgiving"] {
  --bg: #f7ead9; --surface: #fffaf2; --surface-2: #f3e0c3;
  --text: #2e1f10; --heading: #241708; --body-2: #4a3520; --body-2b: #3c2a16;
  --muted: #8a6f4d; --muted-2: #6d5638; --faint: #a3875f;
  --accent: #c2571b; --accent-2: #96500f; --accent-hover: #d96c26; --on-accent: #ffffff;
  --border: #e2c9a4; --border-soft: #ecd9ba; --border-strong: #cfa96f; --input-border: #c8a76f;
  --header-bg: #3a2410; --header-text: #fdf3e3; --header-link: #f7e8d2; --header-muted: #ecd9bd; --header-2: #2c1b0b;
  --footer-text: #c8ab84; --tag-bg: #3a2410; --nav-hover-bg: rgba(194, 87, 27, .18);
  --ad-strong: #3c2a16; --ad-p: #6d5638; --pinned-bg: #fdf0d0; --linkcard-bg: #fdf3dd;
  --search-border: #6d5638; --search-ph: #a3875f;
}
[data-theme="halloween"] {
  --bg: #0d0a12; --surface: #1a1424; --surface-2: #241a33;
  --text: #f3eefb; --heading: #ffffff; --body-2: #ddd3f2; --body-2b: #e9e1fa;
  --muted: #ab9cc4; --muted-2: #c6bade; --faint: #9383b3;
  --accent: #ff7518; --accent-2: #c9a0ff; --accent-hover: #ff8c3a; --on-accent: #160a00;
  --border: #3a2a52; --border-soft: #2e2142; --border-strong: #4f3a70; --input-border: #463364;
  --header-bg: #07050b; --header-text: #ffffff; --header-link: #efe9fb; --header-muted: #d5c9ec; --header-2: #0a0714;
  --footer-text: #9a8ab5; --tag-bg: #07050b; --nav-hover-bg: rgba(255, 117, 24, .16);
  --ad-strong: #f0e9fa; --ad-p: #c6bade; --pinned-bg: #2b1e3e; --linkcard-bg: #241a33;
  --search-border: #463364; --search-ph: #9383b3;
}
[data-theme="easter"] {
  --bg: #fdf6ee; --surface: #ffffff; --surface-2: #fdeef6;
  --text: #33302e; --heading: #2b2723; --body-2: #55504b; --body-2b: #45403b;
  --muted: #8d8378; --muted-2: #6d655b; --faint: #a79a8d;
  --accent: #5f9e52; --accent-2: #b0527a; --accent-hover: #6fb060; --on-accent: #ffffff;
  --border: #ecd9e4; --border-soft: #f3e4ee; --border-strong: #dfc2d2; --input-border: #d5b8c6;
  --header-bg: #fbe4ee; --header-text: #33302e; --header-link: #45403b; --header-muted: #6d655b; --header-2: #ffffff;
  --footer-text: #a08d84; --tag-bg: #33302e; --nav-hover-bg: rgba(95, 158, 82, .16);
  --ad-strong: #45403b; --ad-p: #6d655b; --pinned-bg: #fdf6d8; --linkcard-bg: #fdf3e3;
  --search-border: #cbb6a8; --search-ph: #97897c;
}
[data-theme="valentines"] {
  --bg: #fdf0f2; --surface: #ffffff; --surface-2: #fbe3e8;
  --text: #33161d; --heading: #2a0f16; --body-2: #5c2f3a; --body-2b: #4a2430;
  --muted: #9c7180; --muted-2: #7c4c5c; --faint: #b08f9b;
  --accent: #c12747; --accent-2: #a31636; --accent-hover: #d13a59; --on-accent: #ffffff;
  --border: #efc3cd; --border-soft: #f6d7de; --border-strong: #e2a3b3; --input-border: #d894a5;
  --header-bg: #5c1220; --header-text: #fff5f6; --header-link: #ffe3e9; --header-muted: #f3c3cd; --header-2: #470d18;
  --footer-text: #d9a5b1; --tag-bg: #5c1220; --nav-hover-bg: rgba(255, 255, 255, .13);
  --ad-strong: #4a2430; --ad-p: #7c4c5c; --pinned-bg: #fdeef0; --linkcard-bg: #fdf0f2;
  --search-border: #8c3548; --search-ph: #d9a5b1;
}
[data-theme="stpatricks"] {
  --bg: #0c2013; --surface: #14301d; --surface-2: #1b4027;
  --text: #f0f7ee; --heading: #ffffff; --body-2: #d6ead2; --body-2b: #e4f2e0;
  --muted: #a4c69e; --muted-2: #c0dabb; --faint: #87ab80;
  --accent: #ffb612; --accent-2: #ffd34d; --accent-hover: #ffc63f; --on-accent: #000000;
  --border: #2a5a38; --border-soft: #234c30; --border-strong: #3a734c; --input-border: #336b45;
  --header-bg: #071709; --header-text: #ffffff; --header-link: #eaf6e6; --header-muted: #cfe6c8; --header-2: #0a2010;
  --footer-text: #93b98c; --tag-bg: #071709; --nav-hover-bg: rgba(255, 182, 18, .15);
  --ad-strong: #eef5e4; --ad-p: #c0dabb; --pinned-bg: #274a26; --linkcard-bg: #1b4027;
  --search-border: #336b45; --search-ph: #87ab80;
}
[data-theme="newyear"], [data-theme="nye"] {
  --bg: #0b0b0e; --surface: #17171c; --surface-2: #202027;
  --text: #f4f4f6; --heading: #ffffff; --body-2: #dbdbe0; --body-2b: #e8e8ec;
  --muted: #a9a9b3; --muted-2: #c6c6cd; --faint: #8f8f99;
  --accent: #d4af37; --accent-2: #f0c75e; --accent-hover: #e3c158; --on-accent: #100c02;
  --border: #34343e; --border-soft: #2a2a33; --border-strong: #454550; --input-border: #3e3e48;
  --header-bg: #000000; --header-text: #ffffff; --header-link: #eeeef2; --header-muted: #cfcfd6; --header-2: #0a0a0c;
  --footer-text: #9a9aa4; --tag-bg: #000000; --nav-hover-bg: rgba(212, 175, 55, .16);
  --ad-strong: #eeeedd; --ad-p: #c6c6cd; --pinned-bg: #26220e; --linkcard-bg: #202027;
  --search-border: #3e3e48; --search-ph: #8f8f99;
}
[data-theme="mlk"] {
  --bg: #101623; --surface: #1a2338; --surface-2: #232f4a;
  --text: #f2f4fa; --heading: #ffffff; --body-2: #d6dcee; --body-2b: #e4eaf7;
  --muted: #a3afc9; --muted-2: #bfc9dd; --faint: #8794b0;
  --accent: #d4af37; --accent-2: #e9c766; --accent-hover: #e3c158; --on-accent: #100c02;
  --border: #35456a; --border-soft: #2c3a5c; --border-strong: #47597f; --input-border: #41557a;
  --header-bg: #0a0f1c; --header-text: #ffffff; --header-link: #e8edf8; --header-muted: #c9d3e6; --header-2: #0d1424;
  --footer-text: #8f9cb8; --tag-bg: #0a0f1c; --nav-hover-bg: rgba(212, 175, 55, .15);
  --ad-strong: #edf0f8; --ad-p: #bfc9dd; --pinned-bg: #26314e; --linkcard-bg: #232f4a;
  --search-border: #41557a; --search-ph: #8794b0;
}
[data-theme="presidents"] {
  --bg: #f5f3ee; --surface: #ffffff; --surface-2: #eceff5;
  --text: #1b2436; --heading: #101828; --body-2: #39445c; --body-2b: #2c3752;
  --muted: #6b7690; --muted-2: #4d5872; --faint: #8a94ab;
  --accent: #b22234; --accent-2: #1d3fae; --accent-hover: #cf2f42; --on-accent: #ffffff;
  --border: #d3d9e4; --border-soft: #e2e7f0; --border-strong: #b4bfd2; --input-border: #a7b3c7;
  --header-bg: #16264d; --header-text: #ffffff; --header-link: #e6ebf5; --header-muted: #c9d3e6; --header-2: #0f1c3a;
  --footer-text: #a7b1c4; --tag-bg: #16264d; --nav-hover-bg: rgba(255, 255, 255, .13);
  --ad-strong: #2c3752; --ad-p: #4d5872; --pinned-bg: #fdf3d8; --linkcard-bg: #eceff5;
  --search-border: #46587e; --search-ph: #8a94ab;
}
[data-theme="mothers"] {
  --bg: #fdf3f0; --surface: #ffffff; --surface-2: #fbe7e0;
  --text: #38231f; --heading: #2c1a16; --body-2: #5f423c; --body-2b: #4c332e;
  --muted: #a07a70; --muted-2: #7d5a52; --faint: #b3948a;
  --accent: #d96c57; --accent-2: #b14a38; --accent-hover: #e57f6a; --on-accent: #ffffff;
  --border: #f0d2c6; --border-soft: #f7e0d6; --border-strong: #e3b7a6; --input-border: #d8a894;
  --header-bg: #fbe7e0; --header-text: #38231f; --header-link: #4c332e; --header-muted: #7d5a52; --header-2: #fff7f3;
  --footer-text: #b3948a; --tag-bg: #38231f; --nav-hover-bg: rgba(217, 108, 87, .16);
  --ad-strong: #4c332e; --ad-p: #7d5a52; --pinned-bg: #fdf3da; --linkcard-bg: #fdf3ec;
  --search-border: #d8b3a6; --search-ph: #a98a80;
}
[data-theme="fathers"] {
  --bg: #eef0f2; --surface: #ffffff; --surface-2: #e3e6ea;
  --text: #1e252c; --heading: #141a20; --body-2: #3d4753; --body-2b: #2f3944;
  --muted: #6e7a87; --muted-2: #525f6c; --faint: #8b96a1;
  --accent: #8a5a2b; --accent-2: #7c4c1e; --accent-hover: #9c6a35; --on-accent: #ffffff;
  --border: #ccd2d9; --border-soft: #dde2e8; --border-strong: #adb8c2; --input-border: #a2aeb9;
  --header-bg: #2b3540; --header-text: #f2f5f7; --header-link: #dde4ea; --header-muted: #b9c3cd; --header-2: #202830;
  --footer-text: #a5b0ba; --tag-bg: #2b3540; --nav-hover-bg: rgba(255, 255, 255, .12);
  --ad-strong: #2f3944; --ad-p: #525f6c; --pinned-bg: #f7eed6; --linkcard-bg: #ece7db;
  --search-border: #4d5a68; --search-ph: #93a1ad;
}
[data-theme="juneteenth"] {
  --bg: #101410; --surface: #1a201a; --surface-2: #232b21;
  --text: #f2f4ec; --heading: #ffffff; --body-2: #dbe2d2; --body-2b: #e7ecdc;
  --muted: #a9b39c; --muted-2: #c3ccb4; --faint: #8b977d;
  --accent: #d4af37; --accent-2: #ff8a70; --accent-hover: #e3c158; --on-accent: #100c02;
  --border: #37402f; --border-soft: #2c3527; --border-strong: #4a573e; --input-border: #43513a;
  --header-bg: #0a0f0a; --header-text: #ffffff; --header-link: #ecf2e4; --header-muted: #ccd6bf; --header-2: #0d130c;
  --footer-text: #97a487; --tag-bg: #0a0f0a; --nav-hover-bg: rgba(212, 175, 55, .15);
  --ad-strong: #eff3e2; --ad-p: #c3ccb4; --pinned-bg: #28301f; --linkcard-bg: #232b21;
  --search-border: #43513a; --search-ph: #8b977d;
}
[data-theme="juneteenth"] .masthead {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, #ce1126 0 33.3%, #151515 33.3% 66.6%, #007a3d 66.6% 100%);
  background-size: 100% 4px; background-position: bottom; background-repeat: no-repeat;
}
[data-theme="labor"] {
  --bg: #edf1f5; --surface: #ffffff; --surface-2: #dde6ee;
  --text: #18222c; --heading: #101820; --body-2: #36434f; --body-2b: #2a3641;
  --muted: #68798a; --muted-2: #4d5f72; --faint: #8798a8;
  --accent: #2f6db3; --accent-2: #1f4e80; --accent-hover: #3d80c4; --on-accent: #ffffff;
  --border: #c3d0dd; --border-soft: #d5e0ea; --border-strong: #a3b8cb; --input-border: #97aec2;
  --header-bg: #22384e; --header-text: #f0f5fa; --header-link: #d9e5f0; --header-muted: #b3c5d6; --header-2: #182a3d;
  --footer-text: #9db2c4; --tag-bg: #22384e; --nav-hover-bg: rgba(255, 255, 255, .12);
  --ad-strong: #2a3641; --ad-p: #4d5f72; --pinned-bg: #fdf3d8; --linkcard-bg: #e7eef5;
  --search-border: #47637e; --search-ph: #93a9bc;
}
[data-theme="columbus"] {
  --bg: #eef5f4; --surface: #ffffff; --surface-2: #ddefec;
  --text: #14282c; --heading: #0d1f24; --body-2: #33545a; --body-2b: #27454b;
  --muted: #64828a; --muted-2: #49696f; --faint: #84a2a8;
  --accent: #0f766e; --accent-2: #0b5a54; --accent-hover: #159487; --on-accent: #ffffff;
  --border: #bfdcd6; --border-soft: #d2e8e3; --border-strong: #9cc8bf; --input-border: #8fbdb2;
  --header-bg: #123a4d; --header-text: #eefaf7; --header-link: #d7ecec; --header-muted: #a9cbc9; --header-2: #0c2a3a;
  --footer-text: #93b8bd; --tag-bg: #123a4d; --nav-hover-bg: rgba(255, 255, 255, .12);
  --ad-strong: #27454b; --ad-p: #49696f; --pinned-bg: #fdf3d8; --linkcard-bg: #e8f3ec;
  --search-border: #3d6076; --search-ph: #84a2a8;
}