:root {
  --bg: #0a0a0a;
  --bg-card: #141414;
  --bg-card-hover: #1c1c1c;
  --red: #e0202e;
  --text: #f5f5f5;
  --text-secondary: #e6e6e6;
  --gray: #9a9a9a;
  --border: #262626;
  --shimmer-1: #161616;
  --shimmer-2: #232323;
  --search-cancel-filter: invert(1);
}
/* Light mode -- opt-in only (see THEME_INIT_SNIPPET/theme-toggle-btn below),
   default experience stays exactly the dark theme above for anyone who
   hasn't explicitly switched. Everything, including the header and footer,
   follows the toggle via these variables. The UNO-logo thumbnail/hero
   fallback placeholders are the one exception -- uno-logo.png is a
   near-white mark designed to sit on a dark surface, so those content-area
   placeholder badges stay on their original dark literal colors in both
   themes rather than going invisible. The header and footer logos are
   handled separately: they swap between uno-logo.png (dark theme) and
   uno-logo-dark.png (light theme) via the .logo-dark-mode/.logo-light-mode
   toggle below, so they don't need this exception.
*/
[data-theme="light"] {
  --bg: #f7f7f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0ee;
  --red: #e0202e;
  --text: #161616;
  --text-secondary: #2c2c2c;
  --gray: #6b6b6b;
  --border: #e0e0dd;
  --shimmer-1: #e9e9e6;
  --shimmer-2: #f6f6f4;
  --search-cancel-filter: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
a { color: inherit; }
header {
  background: var(--bg-card);
  border-bottom: 4px solid var(--red);
  padding: 22px 5vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
}
header a.brand-link { display: flex; align-items: center; gap: 16px; text-decoration: none; }
header img.logo { height: 52px; width: auto; display: block; }
/* Two logo variants -- uno-logo.png is a near-white mark for the dark
   theme, uno-logo-dark.png is a near-black recolor of the exact same
   artwork for the light theme (same file, same shapes, just the letter
   fill swapped -- see the comment on uno-logo-dark.png's generation).
   Only one is ever visible at a time, toggled the same way as the
   sun/moon icons below. */
.logo-light-mode { display: none; }
[data-theme="light"] .logo-dark-mode { display: none; }
[data-theme="light"] .logo-light-mode { display: block; }
/* header img.logo sets display:block with higher specificity than the
   generic rules above, so the header's own logo pair needs an explicit
   override at matching specificity (the footer logos have no competing
   display rule, so the generic rules above are enough for them). */
header img.logo.logo-light-mode { display: none; }
[data-theme="light"] header img.logo.logo-dark-mode { display: none; }
[data-theme="light"] header img.logo.logo-light-mode { display: block; }
header .tagline {
  color: var(--gray);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-left: 2px solid var(--red);
  padding-left: 16px;
}

.header-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.header-filters a {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--gray); text-decoration: none; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--border);
}
.header-filters a:hover { color: var(--text); border-color: var(--gray); }
.header-filters a.active { color: #fff; background: var(--red); border-color: var(--red); }

/* Mobile hamburger menu -- hidden checkbox drives a CSS-only dropdown, no JS. */
.nav-toggle-checkbox { display: none; }
.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Standalone mobile-header-row copy of the toggle -- hidden above the
   mobile breakpoint, where the nav-pill copy inside .header-filters
   (below) is used instead. See the mobile media query for its visible
   styling; this just keeps it out of the desktop layout. */
.theme-toggle-btn-mobile { display: none; }

/* Light/dark toggle -- last pill inside .header-filters itself (right
   after Opinion), styled to match those pills exactly so it reads as
   part of the nav bar instead of a separate floating control. On mobile
   this copy is hidden (see media query) in favor of the standalone
   .theme-toggle-btn-mobile button that sits in the visible header row,
   so the control doesn't require opening the hamburger menu to reach. */
.header-filters .theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--gray);
  cursor: pointer;
  line-height: 1;
}
.header-filters .theme-toggle-btn:hover { color: var(--text); border-color: var(--gray); }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }

@media (max-width: 760px) {
  header .tagline { display: none; }
  header { gap: 10px; }
  /* Visible header row on mobile, left to right: logo, search, theme
     toggle, hamburger. The theme toggle lives here (not just inside the
     hamburger's dropdown) so switching themes doesn't require opening the
     menu first. */
  .theme-toggle-btn-mobile {
    display: inline-flex;
    order: 3;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--gray);
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle-btn { display: flex; order: 4; }
  .header-filters {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-card);
    border-bottom: 4px solid var(--red);
    padding: 10px 5vw 20px;
    gap: 6px;
    z-index: 30;
  }
  .header-filters a { padding: 13px 16px; border-radius: 6px; text-align: left; }
  /* The dropdown's own toggle copy is redundant now that the standalone
     mobile-row button above is always reachable, so it's dropped here
     rather than shown twice. */
  .header-filters .theme-toggle-btn-desktop { display: none; }
  .nav-toggle-checkbox:checked ~ .header-filters { display: flex; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

main { padding: 32px 5vw 80px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-3px); background: var(--bg-card-hover); border-color: var(--red); }
.card-thumb {
  width: 100%; height: 180px; object-fit: cover; display: block;
  background: linear-gradient(100deg, var(--shimmer-1) 30%, var(--shimmer-2) 50%, var(--shimmer-1) 70%);
  background-size: 300% 100%;
  animation: thumb-shimmer 1.4s ease-in-out infinite;
}
.card-thumb-fallback {
  object-fit: contain;
  padding: 34px 44px;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  animation: none;
}
@keyframes thumb-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card-meta { font-size: 11px; color: var(--gray); margin-bottom: 10px; letter-spacing: 0.3px; }
.card-category { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.card-dot { margin: 0 6px; }
.card-title { font-size: 18px; line-height: 1.3; margin: 0 0 10px; font-weight: 800; color: var(--text); }
.card-excerpt { font-size: 14px; color: var(--gray); line-height: 1.5; margin: 0 0 16px; flex: 1; }
.card-link { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase;
  letter-spacing: 0.5px; border-bottom: 2px solid var(--red); padding-bottom: 3px; align-self: flex-start; }

/* Ad rail -- reserves a right-column slot on listing pages (home, category,
   topic hub) for standard IAB units (300x250, 300x600). Narrows the card
   grid to ~4 columns on wide desktop instead of 5, sight-unseen -- .grid's
   existing auto-fill/minmax does that on its own once .listing-main has
   less width to work with, no column count hardcoded anywhere. Swap the
   .ad-slot placeholder contents for real ad-network tags once one is
   wired up; the sizing/markup won't need to change. */
.listing-layout { display: flex; gap: 28px; align-items: flex-start; }
.listing-main { flex: 1; min-width: 0; }
.ad-rail { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
.ad-slot-flip { position: relative; display: block; width: 300px; height: 250px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.ad-flip-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.ad-flip-frame.is-visible { opacity: 1; }
.ad-flip-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-slot-image { display: block; width: 300px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.ad-slot-image img { display: block; width: 100%; height: auto; }
.house-ad { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 22px 20px; text-align: center; }
.house-ad h3 { font-size: 15px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.house-ad p { font-size: 13px; color: var(--gray); line-height: 1.5; margin: 0 0 14px; }
.house-ad a {
  display: inline-block; background: var(--red); color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 20px; border-radius: 6px; text-decoration: none;
}
.house-ad a:hover { background: #c81a27; }
@media (max-width: 980px) {
  .listing-layout { flex-direction: column; }
  .ad-rail { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; position: static; }
  .ad-slot, .house-ad { width: 100%; max-width: 336px; }
}

footer { padding: 56px 5vw 0; border-top: 1px solid var(--border); color: var(--gray); font-size: 13px; line-height: 1.7; background: var(--bg-card); }
footer strong { color: var(--text); }
footer a { color: var(--gray); text-decoration: none; }
footer a:hover { color: var(--text); }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-bottom: 40px; }
.footer-logo { height: 40px; width: auto; }
.footer-tagline { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--red); }
.footer-columns {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding-bottom: 40px; border-top: 1px solid var(--border); padding-top: 40px;
}
.footer-col h4 {
  margin: 0 0 16px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text);
}
.footer-col a { display: block; margin-bottom: 10px; font-size: 13px; }
.footer-col p { margin: 0 0 10px; font-size: 13px; color: var(--gray); }
.footer-col .footer-contact-email { color: var(--red); font-weight: 700; }
.footer-col .footer-contact-email:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--border); padding: 24px 0 28px; }
.footer-source-note { margin: 0 0 16px; font-size: 12px; color: var(--gray); max-width: 720px; }
.footer-copy {
  margin: 0; font-size: 11px; color: var(--gray); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
@media (max-width: 640px) {
  .footer-columns { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .footer-copy { justify-content: center; text-align: center; }
}

.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 48px; }
.pagination a, .pagination span {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px 18px; border-radius: 6px; text-decoration: none;
}
.pagination a { color: var(--text); border: 1px solid var(--border); }
.pagination a:hover { border-color: var(--red); color: var(--red); }
.pagination .disabled { color: #4a4a4a; border: 1px solid var(--border); opacity: 0.5; }
.pagination .page-count { color: var(--gray); border: none; text-transform: none; letter-spacing: 0; font-weight: 400; }
.page-jump {
  display: flex; align-items: center; gap: 8px;
  color: var(--gray); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.page-jump select {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 14px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.page-jump select:hover { border-color: var(--red); }
.page-jump select:focus { outline: none; border-color: var(--red); }

@media (max-width: 600px) {
  .pagination { flex-wrap: wrap; row-gap: 14px; column-gap: 10px; }
  .pagination a, .pagination .page-count { font-size: 12px; padding: 10px 14px; }
  .page-jump {
    order: 99;
    flex-basis: 100%;
    justify-content: center;
  }
  .page-jump select {
    flex: 0 1 240px;
    padding: 13px 16px;
    font-size: 15px;
  }
}

/* Search bar -- shared component in the header and next to the page-jump
   dropdown in pagination. Reused as-is (no per-placement variants beyond
   width/order) so it looks identical wherever it appears. */
.search-bar {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 3px 3px 16px;
  flex: 0 1 220px;
  min-width: 0;
  position: relative;
}
.search-bar:focus-within { border-color: var(--red); }
.search-bar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 0;
}
.search-bar input::placeholder { color: var(--gray); }
.search-bar input::-webkit-search-cancel-button { filter: var(--search-cancel-filter); opacity: 0.6; }
.search-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--red);
  color: #fff;
  flex-shrink: 0;
}
.search-bar button:hover { background: #c81a27; }
                          
.header-search { order: 2; }
@media (max-width: 760px) {
  /* Collapse to an icon-only button on mobile -- there isn't room for logo +
     full text input + hamburger on one row, so the input is visually hidden
     and tapping the circular red button submits the (empty) form to
     /search/, where the visitor types their query on a dedicated page. */
  .header-search {
    order: 2;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    max-width: none;
    min-width: 0;
    margin: 0 0 0 auto;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
  }
  .header-search .search-input { display: none; }
  .header-search button {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  /* Tapping the icon first expands the pill (via SEARCH_SUGGEST_JS below)
     instead of submitting an empty query -- this is what actually shows
     the input so a visitor can type. */
  .header-search.expanded {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
    border-radius: 999px;
    padding: 3px 3px 3px 14px;
    overflow: visible;
  }
  .header-search.expanded .search-input { display: block; }
  .header-search.expanded button { width: 30px; height: 30px; }
}

.pagination-search { flex-basis: 220px; }
@media (max-width: 600px) {
  .pagination-search { order: 99; flex-basis: 100%; max-width: 320px; margin: 0 auto; }
}

/* Live search suggestions dropdown -- populated by SEARCH_SUGGEST_JS as the
   visitor types. Anchored to the .search-bar it belongs to (position:
   relative set above), so header-search and pagination-search each get
   their own independent panel. */
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.search-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.search-suggest-item:last-of-type { border-bottom: none; }
.search-suggest-item:hover, .search-suggest-item.active { background: var(--bg-card-hover); }
.search-suggest-item img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  flex-shrink: 0; background: #1a1a1a;
}
.search-suggest-item img.search-suggest-fallback { object-fit: contain; padding: 6px; }
.search-suggest-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-suggest-title {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggest-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray); }
.search-suggest-empty { padding: 14px 12px; font-size: 13px; color: var(--gray); }
.search-suggest-viewall {
  display: block; padding: 10px 12px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--red);
  text-decoration: none; text-align: center; background: rgba(224, 32, 46, 0.06);
}
.search-suggest-viewall:hover { background: rgba(224, 32, 46, 0.14); }

/* Search results page */
.search-status { color: var(--gray); font-size: 14px; margin: 0 0 24px; }
.search-load-more {
  display: block;
  margin: 40px auto 0;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.search-load-more:hover { border-color: var(--red); color: var(--red); }

/* Article page */
.article-wrap { max-width: 720px; margin: 0 auto; padding: 48px 5vw 80px; }
.back-link { display: inline-block; font-size: 13px; color: var(--gray); text-decoration: none; margin-bottom: 24px; }
.back-link:hover { color: var(--text); }
.article-meta { font-size: 12px; color: var(--gray); margin-bottom: 14px; letter-spacing: 0.3px; }
.article-title { font-size: 32px; line-height: 1.25; font-weight: 800; margin: 0 0 24px; color: var(--text); }
.article-hero {
  width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px;
  margin-bottom: 28px; border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--shimmer-1) 30%, var(--shimmer-2) 50%, var(--shimmer-1) 70%);
  background-size: 300% 100%;
  animation: thumb-shimmer 1.4s ease-in-out infinite;
}
.article-hero-fallback {
  object-fit: contain;
  padding: 48px 60px;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  animation: none;
}
.article-summary { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 32px; }
/* Hand-authored article bodies (UNO Ent originals, not RSS summaries) --
   set via an article's optional "body_html" field in articles.json, which
   fully replaces the single-paragraph .article-summary block below with
   real multi-paragraph HTML the article was written with directly. Reuses
   the same typography as .article-summary so it reads identically. */
.article-body { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 8px; }
.article-body p { margin: 0 0 18px; }
.article-body h2 { font-size: 21px; font-weight: 800; color: var(--text); margin: 32px 0 14px; }
.article-body a { color: var(--red); font-weight: 700; text-decoration: none; }
.article-body a:hover { text-decoration: underline; }
.article-body .outbound-cta { margin: 8px 0 24px; }
/* Responsive 16:9 video embed for hand-authored posts that include a
   YouTube (or similar) player inline -- e.g. a music release announcement
   embedding the official video. */
.article-video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 4px 0 28px;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #000;
}
.article-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.outbound-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 6px;
  letter-spacing: 0.3px;
}
.outbound-cta:hover { background: #c81a27; }
.outbound-note { font-size: 12px; color: var(--gray); margin-top: 14px; }
.article-related-topics { font-size: 13px; color: var(--gray); margin-top: 24px; }
.article-related-topics a { color: var(--red); font-weight: 700; text-decoration: none; }
.article-related-topics a:hover { text-decoration: underline; }

/* Premium "feature" layout -- opt-in via an article's "layout": "feature"
   field, used for hand-authored UNO Ent originals that should read like a
   magazine feature rather than a wire-summary post (see .article-body
   above for the plain version). Structurally separate from .article-wrap
   so a feature's full-bleed hero doesn't affect any of the other 3500+
   standard article pages. Design language: brand red stays the primary
   accent (CTAs, drop cap), a restrained gold is layered in as the second
   "premium" accent for dividers/labels only -- two accent colors, used
   sparingly, is what keeps this feeling classy instead of loud. */
:root { --gold: #c9a24b; }
.feature-hero {
  position: relative; width: 100%; max-height: 720px; overflow: hidden;
  background: #000;
}
.feature-hero-img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; display: block; opacity: 0.92; }
.feature-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 22%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.92) 100%);
  display: flex; align-items: flex-end;
}
.feature-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 20px 5vw 0; }
.feature-topbar .back-link {
  display: inline-flex; align-items: center; gap: 6px; color: #fff;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px; margin: 0; backdrop-filter: blur(4px);
}
.feature-topbar .back-link:hover { background: rgba(0,0,0,0.6); color: #fff; }
.feature-hero-inner { max-width: 820px; margin: 0 auto; padding: 40px 5vw 44px; width: 100%; box-sizing: border-box; }
.feature-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; background: var(--red);
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 16px; margin-bottom: 20px; border-bottom: 2px solid var(--gold);
}
.feature-title {
  color: #fff; font-size: 48px; line-height: 1.08; font-weight: 800; margin: 0 0 18px;
  letter-spacing: -0.5px; text-transform: uppercase; text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.feature-byline {
  display: flex; align-items: center; gap: 10px; color: #cfcfcf;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.feature-byline strong { color: var(--gold); font-weight: 800; }
.feature-byline .dot { color: var(--gold); }
.feature-wrap { max-width: 720px; margin: 0 auto; padding: 48px 5vw 80px; }
.feature-body { font-size: 18px; line-height: 1.8; color: var(--text-secondary); }
.feature-body p { margin: 0 0 22px; }
.feature-body > p:first-of-type::first-letter {
  float: left; font-size: 76px; line-height: 0.78; font-weight: 800; color: var(--red);
  padding: 6px 10px 0 0; font-family: 'Helvetica Neue', Arial, sans-serif;
}
.feature-body h2 {
  font-size: 13px; font-weight: 800; color: var(--text); margin: 48px 0 20px;
  text-transform: uppercase; letter-spacing: 2px; padding-bottom: 12px;
  border-bottom: 3px solid var(--gold); display: inline-block;
}
.feature-body a { color: var(--red); font-weight: 700; text-decoration: none; }
.feature-body a:hover { text-decoration: underline; }
.feature-body .outbound-cta { margin: 10px 0 28px; border-radius: 2px; text-transform: uppercase; letter-spacing: 1px; color: #fff; }
.feature-pullquote {
  position: relative; margin: 40px 0; padding: 8px 0 8px 40px;
  font-size: 30px; line-height: 1.35; font-weight: 800; color: var(--text);
  letter-spacing: -0.3px;
}
.feature-pullquote::before {
  content: "C"; position: absolute; left: -4px; top: -18px;
  font-size: 76px; font-weight: 800; color: var(--gold); line-height: 1; font-family: Georgia, serif;
}
.feature-video-caption {
  display: block; color: var(--red); font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; margin: 0 0 12px;
}
.feature-gallery-section { margin: 48px 0; }
.feature-section-label {
  display: block; color: var(--gold); font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; margin: 0 0 16px;
}
.feature-gallery { column-count: 2; column-gap: 12px; }
.feature-gallery img {
  width: 100%; display: block; margin: 0 0 12px; border-radius: 2px;
  border: 1px solid var(--border); transition: transform 0.2s ease, filter 0.2s ease;
  break-inside: avoid;
}
.feature-gallery img:hover { transform: scale(1.015); filter: brightness(1.05); }
@media (max-width: 640px) {
  .feature-title { font-size: 30px; }
  .feature-hero { max-height: 480px; }
  .feature-hero-inner { padding: 30px 6vw 28px; }
  .feature-body { font-size: 17px; }
  .feature-body > p:first-of-type::first-letter { font-size: 56px; }
  .feature-pullquote { font-size: 22px; padding-left: 30px; }
  .feature-pullquote::before { font-size: 56px; top: -14px; }
}
.comments-wrap { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.comments-heading { font-size: 20px; font-weight: 800; margin: 0 0 20px; color: var(--text); }
.comments-load-btn {
  background: var(--red); color: #fff; border: none; border-radius: 6px;
  font-weight: 700; font-size: 14px; padding: 12px 22px; cursor: pointer;
  letter-spacing: 0.3px;
}
.comments-load-btn:hover { background: #c81a27; }
.comments-load-note { font-size: 13px; color: var(--gray); margin-top: 10px; }

/* Cookie consent banner */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--bg-card); border-top: 1px solid var(--border);
  padding: 16px 5vw; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cookie-banner-inner p { margin: 0; font-size: 13px; color: var(--gray); line-height: 1.5; flex: 1; min-width: 240px; }
.cookie-banner-inner a { color: var(--red); font-weight: 700; text-decoration: none; }
.cookie-banner-inner a:hover { text-decoration: underline; }
.cookie-banner-btn {
  -webkit-appearance: none; appearance: none;
  background: var(--red) !important; color: #fff !important; border: none; border-radius: 6px;
  font-weight: 700; font-size: 13px; padding: 11px 26px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
}
.cookie-banner-btn:hover { background: #c81a27; }

/* Legal pages (Privacy Policy, Terms of Service) */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 48px 5vw 80px; }
.legal-wrap h1 { font-size: 30px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.legal-wrap .legal-updated { font-size: 12px; color: var(--gray); margin-bottom: 36px; letter-spacing: 0.3px; }
.legal-wrap h2 { font-size: 18px; font-weight: 700; margin: 36px 0 12px; color: var(--text); }
.legal-wrap p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 16px; }
.legal-wrap a { color: var(--red); text-decoration: none; font-weight: 700; }
.legal-wrap a:hover { text-decoration: underline; }

/* Topic hub pages (/topic/{slug}/) and the /topics/ directory */
.topic-hub-heading { margin: 0 0 28px; }
.topic-hub-heading h1 { font-size: 30px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.topic-hub-sub { font-size: 14px; color: var(--gray); margin: 0; }
.topic-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.topic-index-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px; text-decoration: none;
}
.topic-index-item:hover { background: var(--bg-card-hover); border-color: var(--gray); }
.topic-index-name { font-size: 15px; font-weight: 700; color: var(--text); }
.topic-index-count { font-size: 12px; color: var(--gray); flex-shrink: 0; }