/* =====================================================
   Hollywood Melanin — Shared Stylesheet
   WCAG 2.2 AA compliant · Dark/Light mode · Responsive
   ===================================================== */

/* ── Design tokens ──
   Colors are defined in oklch() for perceptual uniformity and
   wide-gamut display support. Variants are derived via relative
   color syntax — oklch(from var(--base) l c h) — so changing a
   single base token (e.g. --mg) propagates automatically to all
   hover and text-accessible variants.

   ProcessWire theme editor note:
   Only --mg needs to be editable per-brand. When building the PW
   theme color picker, convert the editor's hex input to oklch()
   before writing to the CSS custom property. A client-side
   hex→oklch converter is required (see color-system docs). ── */
:root {
  @media(prefers-reduced-motion: no-preference) {
    smooth-scrolling: smooth;
    
    @view-transition {
      navigation: auto;
    }

    ::view-transition-group(root) {
      animation-duration: 1s;
    }

    @keyframes slide-out {
      to {
        transform: translateX(-100vw);
      }
    }

    @keyframes slide-in {
      to {
        transform: translateX(100vw);
      }
    }
    

    article a img {
      view-transition-name: article-image;
    }
  }
  
  /* Brand — changing --mg propagates to --mg-h, --mg-t automatically */
  --mg:    oklch(56.53% 0.2425 343.57deg); /* #cc0099 */
  --mg-h:  oklch(from var(--mg) calc(l * 0.848) calc(c * 0.848) h); /* darker hover */
  --mg-t:  oklch(from var(--mg) calc(l * 0.874) calc(c * 0.874) h); /* AA on white */

  /* Surface */
  --bg:    oklch(100% 0 0);
  --bg2:   oklch(97%  0 0);

  /* Hero background — FIXED DARK. Does not invert in dark mode.
     White text on this value = 18:1 contrast ratio in any mode.
     --hero-accent uses the brighter brand variant for AA on dark (4.9:1). */
  --hero-bg:     oklch(14.5% 0 0);
  --hero-accent: oklch(from var(--mg) calc(l * 1.136) c h);

  /* Text */
  --hd:    oklch(14.5% 0 0);
  --bd:    oklch(21.8% 0 0);
  --mu:    oklch(46.4% 0 0);   /* 7:1 on white — WCAG AA */
  --br:    oklch(88.2% 0 0);
  --ui-b:  oklch(56.6% 0 0);   /* 4.54:1 on white — WCAG AA */
  --foc:   oklch(14.5% 0 0);

  --nav-h: 2.25rem;
  scroll-padding-top: 4.05rem;
}

.dark {
  /* --mg-t bumped lighter for AA on dark backgrounds (5:1 on --bg dark) */
  --mg-t:  oklch(from var(--mg) calc(l * 1.136) c h);
  --bg:    oklch(17.8% 0 0);
  --bg2:   oklch(23.5% 0 0);
  --hd:    oklch(96.1% 0 0);
  --bd:    oklch(85.8% 0 0);
  --mu:    oklch(68.6% 0 0);   /* 4.6:1 on dark bg — WCAG AA */
  --br:    oklch(29.3% 0 0);
  --ui-b:  oklch(56.6% 0 0);
  --foc:   oklch(96.1% 0 0);
  /* NOTE: --hero-bg and --hero-accent intentionally omitted —
     the hero is always dark regardless of site theme.          */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 1rem; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--bg);
  color: var(--bd);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
/*
  Full-bleed image reset — only applies to images that are
  direct children of a container intended as an image card.
  Images with explicit width/height attributes (avatars, icons,
  logos) are NOT affected because attribute selectors are more
  specific, and per-component overrides use !important or higher
  specificity selectors when needed.
  Using :not([class*="avatar"]) prevents the reset stretching
  portrait/avatar images used throughout the site.
*/
img:not([class*="avatar"]) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
img[class*="avatar"] {
  display: block;
  object-fit: cover;
}
ul, ol { list-style: none; padding: 0; margin: 0; }
button { font-family: inherit; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
figure { margin: 0; }

/* ── Typography ── */
.serif { font-family: 'Playfair Display', Georgia, serif; }

/* ── Layout ── */
.wrap {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Accessibility ── */
:focus-visible {
  outline: 0.1875rem solid var(--foc);
  outline-offset: 0;
  border-radius: 0.125rem;
}

button, input, [class*="btn"] {
    min-height: 2.375rem;
}

/* Skip link */
.skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--mg);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.625rem 1.125rem;
  z-index: 9999;
  transition: top .15s;
  border-radius: 0 0 0.25rem 0.25rem;
}
.skip:focus { top: 0; }

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── Image zoom hover ── */
.zoom { overflow: hidden; display: block; }
.zoom img { transition: transform .4s ease; will-change: transform; }
.zoom:hover img { transform: scale(1.04); }

/* ── Labels / chips ── */
.cat {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mg-t);
  transition: color .15s;
}
.cat:hover { color: var(--mg-h); }

.badge {
  display: inline-block;
  background: var(--mg);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0.1875rem 0.5625rem;
  transition: background .15s;
}
.badge:hover { background: var(--mg-h); }

/* ── Headline link ── */
.hd-link {
  color: var(--hd);
  transition: color .15s;
}
.hd-link:hover { color: var(--mg-t); }

/* ── Author link ── */
.author-link {
  font-weight: 700;
  color: var(--hd);
  transition: color .15s;
}
.author-link:hover { color: var(--mg-t); }

/* ── Breadcrumb link ── */
.bc-link {
  font-size: 0.75rem; /* was 0.6875rem (11px) — WCAG small text */
  font-weight: 600;
  color: var(--mu);
  transition: color .15s;
}
.bc-link:hover { color: var(--hd); }

/* ── Read more link ── */
.read-more {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mg-t);
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color .15s;
}
.read-more:hover { color: var(--mg-h); }

/* ── Tag chips ── */
.tag-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  background: var(--bg2);
  color: var(--mu);
  border: 1px solid var(--br);
  transition: color .15s, border-color .15s;
}
.tag-chip:hover { color: var(--hd); border-color: var(--hd); }

/* ── Sidebar helpers ── */
.sb-section-title {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--hd);
  border-bottom: 0.125rem solid var(--mg);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.rank-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--br);
  line-height: 1;
  flex-shrink: 0;
  width: 2rem;
}

/* ── Sub-category tabs ── */
.sub-tab {
  font-size: 0.75rem;
  font-weight: 600;
  /*
    Vertical padding creates room for the 0.1875rem focus ring above
    and below each tab, preventing clipping by the scrollable
    container. Do NOT reduce this padding below 0.25rem.
  */
  padding: 0.875rem 1rem;
  color: var(--mu);
  border-bottom: 0.125rem solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: inline-block;
}
.sub-tab:hover { color: var(--hd); }
/* Focus ring override for sub-tabs: offset inward so the
   scrollable container's top/bottom edges don't clip it. */
.sub-tab:focus-visible {
  outline-offset: -0.125rem;
}
.sub-tab-active {
  color: var(--mg-t);
  border-bottom-color: var(--mg);
}

/* ── Buttons ──
   All nav-area buttons share the same height so they
   sit evenly in a row. Height = line-height(1.2) * 0.75rem
   font + 2*(padding-top 0.5rem) + 2*(border 0.0938rem) ≈ 2.1875rem.
   We pin everything to 2.25rem via --nav-h.
   ── */
.btn-mg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  background: var(--mg);
  color: #fff !important;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.8125rem; /* was 0.75rem (12px) — bumped for mobile readability */
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0 1rem;
  border: 0;
  transition: background .15s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-mg:hover { background: var(--mg-h); }

.btn-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: var(--nav-h);
  background: transparent;
  border: 0.0938rem solid var(--ui-b);
  color: var(--mu);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.8125rem; /* was 0.75rem (12px) — bumped for mobile readability */
  font-weight: 600;
  letter-spacing: .02em;
  padding: 0 0.75rem;
  transition: border-color .15s, color .15s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-ui:hover { border-color: var(--hd); color: var(--hd); }

/* ── Section divider ── */
.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1.25rem;
}
.divider span {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--hd);
  white-space: nowrap;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--br);
}

/* ── Ad slots ── */
.ad-slot {
  background: var(--bg2);
  border: 1px dashed var(--br);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--mu);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  position: relative;
}
.ad-slot::before {
  content: 'Advertisement';
  position: absolute;
  top: 0.375rem;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .45;
}
.ad-728 { width: 100%; height: 5.625rem; }
.ad-300 { width: 18.75rem; height: 15.625rem; max-width: 100%; }
.ad-160 { width: 10rem; height: 37.5rem; max-width: 100%; }

/* ── Main navigation ── */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--br);
  position: sticky;
  top: 0;
  z-index: 100;
  /*
    overflow: visible (default) — do NOT set overflow:hidden here.
    Clipping the header prevents focus outlines from showing on
    nav links at the top/bottom edges (WCAG 2.2 §2.4.11 Focus
    Appearance). Always let focus rings bleed outside containers.
  */
}
.nav-inner {
  display: flex;
  align-items: center;
  min-height: 4rem;
  /* Vertical padding creates room for 0.1875rem focus rings above/below
     nav links so they're never clipped by the container edge. */
  padding: 0.25rem 1.5rem;
  gap: 1rem;
  position: relative;
}
.logo {
  display: flex;
  align-items: baseline;
  gap: 0.175rem;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  text-decoration: none;
}
.logo-word1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--hd);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.logo-word2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--mg);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nav-sep {
  width: 1px;
  height: 1.75rem;
  background: var(--br);
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  flex: 1;
  /*
    overflow MUST be visible (not hidden/clip).
    Hidden overflow clips CSS outline-based focus rings at
    container edges — fails WCAG 2.2 §2.4.11 Focus Appearance.
    Instead we hide overflow at the nav-inner level via flex
    truncation; .nlink items that won't fit are hidden by
    the hamburger breakpoint at ≤64rem.
  */
  overflow: visible;
  min-width: 0;
}
.nlink {
  font-size: 0.8125rem; /* was 0.75rem (12px) — bumped for mobile readability */
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--mu);
  padding: 0.375rem 0.625rem;
  white-space: nowrap;
  transition: color .15s;
}
.nlink:hover { color: var(--hd); }
.nlink-active {
  color: var(--mg-t) !important;
  border-bottom: 0.125rem solid var(--mg-t);
  padding-bottom: 0.25rem;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Theme toggle ──
   Both icons are stacked in the same button space.
   We use opacity (not display:none/block) so the
   button never changes size between modes.
   ── */
#tbtn {
  /* Inherits .btn-ui height = var(--nav-h) */
  width: var(--nav-h);  /* square */
  padding: 0;
  position: relative;
  flex-shrink: 0;
}
#tbtn svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s;
  pointer-events: none;
}
#tbtn .icon-sun  { opacity: 0; }
#tbtn .icon-moon { opacity: 1; }
.dark #tbtn .icon-sun  { opacity: 1; }
.dark #tbtn .icon-moon { opacity: 0; }

/* Share buttons — square, same height as btn-ui */
.share-btn {
  width: var(--nav-h);
  height: var(--nav-h);
  padding: 0;
}

/* ── Hamburger / mobile nav ── */
.ham {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  width: var(--nav-h);
  height: var(--nav-h);
  border: 0.0938rem solid var(--ui-b);
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.ham span {
  width: 1.125rem;
  height: 0.125rem;
  background: var(--hd);
  display: block;
  transition: .25s;
  pointer-events: none;
}

/*
  IMPORTANT: The hidden checkbox is position:fixed so the
  browser cannot scroll to it when it receives focus (which
  causes the page-jump bug when the hamburger label is clicked).
*/
#ntog {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.mob-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 0.125rem solid var(--mg);
  z-index: 999;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, .12);
}

:has(#ntog:checked) .mob-nav { display: block; }
:has(#ntog:checked) .ham span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
:has(#ntog:checked) .ham span:nth-child(2) { opacity: 0; transform: scaleX(0); }
:has(#ntog:checked) .ham span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* ARIA: tell screen readers the menu state */
:has(#ntog:checked) .ham { border-color: var(--hd); }

.mob-nav-link {
  display: block;
  padding: 0.8125rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hd);
  border-bottom: 1px solid var(--br);
  transition: color .15s, background .15s;
}
.mob-nav-link:hover, .mob-nav-link:focus-visible {
  background: var(--bg2);
  color: var(--mg-t);
}
.mob-nav-link-last { border-bottom: 0; }
.mob-nav-link-active { color: var(--mg-t) !important; }
.mob-nav-footer {
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--br);
  margin-top: 0.25rem;
}

/* ── Interstitial ad overlay ── */
.intl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 9900;
  align-items: center;
  justify-content: center;
}
.intl-inner {
  position: relative;
  width: 90vw;
  max-width: 41.25rem;
}
.intl-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 0.875rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.intl-close:hover, .intl-close:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
}

/* ── Skin / wallpaper ad ── */
body.has-skin { background: url('SKIN_AD_URL') center / cover fixed no-repeat; }
.skin-rail {
  position: fixed;
  top: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: auto;
}
.skin-left { left: 0; width: calc((100vw - 75rem) / 2 - 0.75rem); }
.skin-right { right: 0; width: calc((100vw - 75rem) / 2 - 0.75rem); }

/* ── Footer ── */
.site-footer {
  background: #0a0a0a;
  color: rgba(255, 255, 255, .6);
}
.footer-inner {
  padding-top: 3.5rem;
  padding-bottom: 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-logo-word1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-logo-word2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--mg);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-tagline {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .45);
  max-width: 16.25rem;
  margin: 0.75rem 0 1.25rem;
}
.footer-col-title {
  font-size: 0.6875rem; /* was 0.625rem (10px) — WCAG very small text */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  margin: 0 0 1rem;
}
.footer-link {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, .55);
  transition: color .15s;
}
.footer-link:hover, .footer-link:focus-visible { color: #fff; }
.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.footer-copy {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, .45); /* was .3 (2.77:1 — WCAG fail); .45 = 5.16:1 — WCAG AA pass */
  margin: 0;
}
.social-icons { display: flex; gap: 0.625rem; }
.social-icon {
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .6);
  transition: color .15s, border-color .15s;
}
.social-icon:hover, .social-icon:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

/* ── Article page ── */
.article-body p { font-size: 1.0625rem; line-height: 1.85; color: var(--bd); margin-bottom: 1.5rem; }
.article-body h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--hd);
  margin: 2.25rem 0 1rem;
  line-height: 1.2;
}
.article-body blockquote {
  border-left: 0.25rem solid var(--mg);
  padding: 1rem 0 1rem 1.5rem;
  margin: 2rem 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3125rem;
  font-style: italic;
  color: var(--hd);
  font-weight: 700;
  line-height: 1.4;
}
.article-body blockquote cite {
  display: block;
  font-size: 0.8125rem;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--mu);
  margin-top: 0.75rem;
}

/* ── Newsletter CTA ── */
.nl-section {
  background: var(--mg);
  padding: 3rem 1.5rem;
  margin-top: 2.5rem;
  text-align: center;
}
.nl-eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 0.5rem;
}
.nl-heading {
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.nl-sub { font-size: 0.9375rem; color: rgba(255, 255, 255, .8); max-width: 30rem; margin: 0 auto 1.75rem; line-height: 1.6; }
.nl-form { display: flex; max-width: 27.5rem; margin: 0 auto; }
.nl-input {
  flex: 1;
  padding: 0.8125rem 1rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.8125rem;
  border: 0.125rem solid rgba(255, 255, 255, .4);
  border-right: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  outline: none;
}
.nl-input::placeholder { color: rgba(255, 255, 255, .55); }
.nl-input:focus { border-color: rgba(255, 255, 255, .8); }
.nl-btn {
  background: #fff;
  color: var(--mg);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0.8125rem 1.25rem;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.nl-btn:hover, .nl-btn:focus-visible { opacity: .9; outline: 0.1875rem solid #fff; outline-offset: 0.125rem; }

/* ── Page-specific layout helpers ── */
.with-sb { display: grid; grid-template-columns: 1fr 18.75rem; gap: 3rem; }
.article-layout { display: grid; grid-template-columns: 1fr 18.75rem; gap: 3.5rem; align-items: flex-start; }
.grid-hero { display: grid; grid-template-columns: 2.8fr 1fr; gap: 1px; background: transparent; }
.right-stack { display: flex; flex-direction: column; gap: 1px; background: var(--br); .zoom img { padding-inline: 24px 0;} }
.grid-4c { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--br); }
.grid-3c { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.feat-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1px; background: var(--br); }

/* ── Legal / prose pages ── */
.prose-body h2 { font-size: 1.125rem; font-weight: 700; color: var(--hd); margin: 2rem 0 0.75rem; }
.prose-body h3 { font-size: 0.9375rem; font-weight: 700; color: var(--hd); margin: 1.5rem 0 0.5rem; }
.prose-body p, .prose-body li { font-size: 0.9375rem; line-height: 1.8; color: var(--bd); margin-bottom: 1rem; }
.prose-body ul { list-style: disc; padding-left: 1.5rem; }
.prose-body ol { list-style: decimal; padding-left: 1.5rem; }
.prose-body a { color: var(--mg-t); text-decoration: underline; }
.prose-body a:hover { color: var(--mg-h); }

/* ── Utility / spacing helpers (replaces inline styles) ── */
/* Flex */
.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.inline-flex    { display: inline-flex; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-wrap      { flex-wrap: wrap; }
.gap-4          { gap: 0.25rem; }
.gap-6          { gap: 0.375rem; }
.gap-8          { gap: 0.5rem; }
.gap-10         { gap: 0.625rem; }
.gap-12         { gap: 0.75rem; }
.gap-16         { gap: 1rem; }
.gap-20         { gap: 1.25rem; }
.gap-24         { gap: 1.5rem; }
/* Margin bottom */
.mb-4           { margin-bottom: 0.25rem; }
.mb-6           { margin-bottom: 0.375rem; }
.mb-8           { margin-bottom: 0.5rem; }
.mb-10          { margin-bottom: 0.625rem; }
.mb-12          { margin-bottom: 0.75rem; }
.mb-14          { margin-bottom: 0.875rem; }
.mb-16          { margin-bottom: 1rem; }
.mb-20          { margin-bottom: 1.25rem; }
.mb-24          { margin-bottom: 1.5rem; }
.mb-28          { margin-bottom: 1.75rem; }
.mb-32          { margin-bottom: 2rem; }
.mb-40          { margin-bottom: 2.5rem; }
.mb-48          { margin-bottom: 3rem; }
/* Padding */
.pt-0           { padding-top: 0; }
.pt-4           { padding-top: 0.25rem; }
.pt-12          { padding-top: 0.75rem; }
.pt-20          { padding-top: 1.25rem; }
.pt-24          { padding-top: 1.5rem; }
/* Text */
.text-center    { text-align: center; }
.font-700       { font-weight: 700; }
.font-800       { font-weight: 800; }
/* Display */
.block          { display: block; }
.hidden         { display: none !important; }
/* Widths */
.w-full         { width: 100%; }
.max-w-480      { max-width: 30rem; }
.max-w-520      { max-width: 32.5rem; }
.max-w-600      { max-width: 37.5rem; }
.max-w-640      { max-width: 40rem; }
.max-w-760      { max-width: 47.5rem; }
.mx-auto        { margin-left: auto; margin-right: auto; }

/* ── Component helpers (replaces inline styles on specific patterns) ── */

/* Leaderboard ad wrapper (used above/below content on every page) */
.ad-leaderboard-wrap {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--br);
}
.ad-leaderboard-wrap--bottom {
  border-bottom: none;
  border-top: 1px solid var(--br);
  padding: 1.5rem 0;
}

/* Interstitial: hidden by default via CSS; JS adds .is-open to show it */
.intl-overlay { display: none; }
.intl-overlay.is-open { display: flex; }

/* Mobile nav search bar (injected by shared.js) */
.mob-nav-search {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--br);
}
.mob-nav-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  border: 0.0938rem solid var(--br);
  background: var(--bg);
  transition: border-color .15s;
}
.mob-nav-search-form:focus-within { border-color: var(--mg); }
.mob-nav-search-input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1rem;
  background: transparent;
  border: 0;
  color: var(--hd);
  outline: none;
}
.mob-nav-search-input::placeholder { color: var(--mu); }
.mob-nav-search-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--mu);
  cursor: pointer;
  transition: color .15s;
  flex-shrink: 0;
}
.mob-nav-search-btn:hover { color: var(--hd); }

/* Footer logo wrapper */
.footer-logo-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

/* Section headings used inside `.wrap` blocks */
.section-eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--mg-t);
  margin-bottom: 1rem;
}
.section-heading-serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  color: var(--hd);
  line-height: 1.15;
  margin: 0;
}
.section-intro {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--mu);
  margin: 0;
}

/* Inline share / social row */
.share-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

/* Advert label row (centered leaderboard wrappers) */
.ad-center-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
}

/* ── Extended spacing utilities ── */
.pt-16 { padding-top: 1rem; }
.pt-28 { padding-top: 1.75rem; }
.pt-32 { padding-top: 2rem; }
.pt-40 { padding-top: 2.5rem; }
.pb-0  { padding-bottom: 0; }
.pb-24 { padding-bottom: 1.5rem; }
.pb-40 { padding-bottom: 2.5rem; }
.pb-48 { padding-bottom: 3rem; }
.pb-56 { padding-bottom: 3.5rem; }
.mt-4  { margin-top: 0.25rem; }
.mt-5  { margin-top: 0.3125rem; }
.mt-6  { margin-top: 0.375rem; }
.mt-7  { margin-top: 0.4375rem; }
.mt-8  { margin-top: 0.5rem; }
.mt-10 { margin-top: 0.625rem; }
.mt-14 { margin-top: 0.875rem; }
.mt-16 { margin-top: 1rem; }
.mt-18 { margin-top: 1.125rem; }
.mt-20 { margin-top: 1.25rem; }
.mt-24 { margin-top: 1.5rem; }
.mt-28 { margin-top: 1.75rem; }
.mt-32 { margin-top: 2rem; }
.mt-40 { margin-top: 2.5rem; }
.mt-48 { margin-top: 3rem; }
.mt-56 { margin-top: 3.5rem; }
.mr-4  { margin-right: 0.25rem; }
.ml-auto { margin-left: auto; }
.p-0   { padding: 0; }
.p-16  { padding: 1rem; }
.p-24  { padding: 1.5rem; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 50%; }
.border-t { border-top: 1px solid var(--br); }
.border-b { border-bottom: 1px solid var(--br); }
.border-l-mg { border-left: 0.25rem solid var(--mg); }
.bg-bg  { background: var(--bg); }
.bg-bg2 { background: var(--bg2); }
.text-hd   { color: var(--hd); }
.text-mu   { color: var(--mu); }
.text-mg-t { color: var(--mg-t); }
.text-br   { color: var(--br); }
.text-11   { font-size: 0.6875rem; }
.text-12   { font-size: 0.75rem; }
.text-13   { font-size: 0.8125rem; }
.text-14   { font-size: 0.875rem; }
.fw-500    { font-weight: 500; }
.fw-600    { font-weight: 600; }
.fw-700    { font-weight: 700; }
.fw-800    { font-weight: 800; }
.fw-900    { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.ls-neg02  { letter-spacing: -.02em; }
.flex-center { display: flex; justify-content: center; }

/* ── Ad wrappers ── */
.ad-top-strip {
  background: var(--bg);
  border-bottom: 1px solid var(--br);
  padding: 0.625rem 0;
}
.ad-mid-strip {
  background: var(--bg2);
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
  padding: 0.75rem 0;
  margin-top: 2rem;
}
.ad-inline-wrap { display: flex; justify-content: center; margin: 1.75rem 0; }
.ad-slot--intl {
  width: 100%;
  aspect-ratio: 3/2;
  background: #1a1a1a;
  border-color: rgba(255,255,255,.1);
  font-size: 1rem;
  color: rgba(255,255,255,.3);
}

/* ── Mobile nav list + subscribe ── */
.mob-nav-list { padding: 0.5rem 0; }
.mob-nav-footer .btn-mg {
  width: 100%;
  padding: 0.6875rem;
  display: inline-flex;
  justify-content: center;
  box-sizing: border-box;
}

/* ── Footer logo override ── */
.site-footer .logo {
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

/* ── Breadcrumb ── */
.breadcrumb-list    { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb-sep     { font-size: 0.75rem; color: var(--mu); } /* was 0.6875rem (11px) / var(--br) near-invisible */
.breadcrumb-current { font-size: 0.75rem; font-weight: 600; color: var(--mg-t); } /* was 0.6875rem (11px) */

/* ── Category page header ── */
.cat-header { background: var(--bg2); border-bottom: 0.1875rem solid var(--mg); padding: 2rem 0; }
.cat-header h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--hd);
  line-height: 1;
  margin: 0 0 0.625rem;
}
.cat-header-desc { font-size: 0.875rem; color: var(--mu); max-width: 32.5rem; }

/* ── Sub-tab strip ── */
.sub-tabs-wrap { background: var(--bg); border-bottom: 1px solid var(--br); overflow-x: auto; }
.sub-tabs { display: flex; gap: 0; }

/* ── Category featured article ── */
.cat-feat-article { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--br); }
.h2-cat-feat {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 900;
  color: var(--hd);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.deck-cat-feat { font-size: 0.875rem; color: var(--mu); line-height: 1.75; margin-bottom: 0.75rem; }

/* ── Zoom aspect-ratio variants (always pair with .zoom) ── */
.zoom-4x3        { aspect-ratio: 4/3; }
.zoom-16x9       { aspect-ratio: 16/9; }
.zoom-16x10      { aspect-ratio: 16/10; }
.zoom-bleed      { aspect-ratio: 16/9; margin: 0 -1rem; }
.zoom-bleed-left { aspect-ratio: 16/9; margin-left: -1.25rem; }

/* ── Typography helpers for articles ── */
.h3-grid { font-size: 1rem; font-weight: 700; color: var(--hd); line-height: 1.3; margin: 0.375rem 0 0.5rem; }
.byline    { font-size: 0.75rem; font-weight: 500; color: var(--mu); }
.byline    strong { color: var(--hd); font-weight: 600; }
.byline-sm { font-size: 0.7188rem; font-weight: 500; color: var(--mu); margin-top: 0.4375rem; }
.byline-sm strong { color: var(--hd); }
.byline-xs { font-size: 0.6875rem; color: var(--mu); font-weight: 500; }
.byline-xs strong { color: var(--hd); }

/* ── Sidebar trending list ── */
.trend-list { display: flex; flex-direction: column; }
.trend-item { padding: 0.75rem 0; border-bottom: 1px solid var(--br); }
.trend-item:last-child { border-bottom: none; }
.h4-trend { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; display: block; }

/* ── Load-more row ── */
.load-more-wrap { text-align: center; padding: 1.25rem 0; border-top: 1px solid var(--br); }

/* ── Homepage lead article ── */
.lead-article    { background: var(--bg); padding-right: 1.75rem; }
.lead-content    { padding: 1.125rem 0 1.75rem; }
.article-meta-row{ display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; }
.article-date    { font-size: 0.6875rem; font-weight: 500; color: var(--mu); }
.h1-hero {
  font-size: clamp(1.375rem, 2.5vw, 2.5rem);
  font-weight: 900;
  color: var(--hd);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 0.875rem;
}
.lead-deck { font-size: 0.9375rem; color: var(--mu); line-height: 1.75; margin-bottom: 0.875rem; max-width: 32.5rem; }

/* ── Right-stack articles ── */
.stack-article { background: var(--bg); padding: 0 0 1.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.stack-article--bt { border-top: 1px solid var(--br); }
.stack-content { padding-right: 0.5rem; }
.h3-stack { font-size: 1.0625rem; font-weight: 700; color: var(--hd); line-height: 1.22; margin: 0.375rem 0 0; }

/* ── Grid-4c card articles ── */
.card-article         { background: var(--bg); padding-bottom: 1.5rem; }
.card-article--padded { background: var(--bg); padding: 0 1rem 1.5rem; }
.card-content         { padding: 0.75rem 0 0; }
.h3-card  { font-size: 0.9375rem; font-weight: 700; color: var(--hd); line-height: 1.25; margin: 0.375rem 0 0; }
.card-date{ font-size: 0.6875rem; font-weight: 500; color: var(--mu); margin-top: 0.375rem; }

/* ── Celebrity spotlight ── */
.feat-content { padding: 1rem 0; }
.h2-feat  { font-size: clamp(1.125rem, 2vw, 1.75rem); font-weight: 700; color: var(--hd); line-height: 1.15; margin: 0.5rem 0 0.75rem; }
.feat-deck{ font-size: 0.875rem; color: var(--mu); line-height: 1.7; margin-bottom: 0.75rem; }

/* ── Mini article list ── */
.mini-list    { background: var(--br); display: grid; gap: 1px; grid-template-columns: 1fr; }
.mini-article { background: var(--bg); padding: 1rem; display: flex; gap: 0.875rem; align-items: center; }
.mini-thumb   { width: 5.625rem; height: 4.25rem; flex-shrink: 0; }
.h3-mini  { font-size: 0.875rem; font-weight: 700; color: var(--hd); line-height: 1.3; margin: 0.25rem 0 0.375rem; }
.mini-date{ font-size: 0.6875rem; color: var(--mu); font-weight: 500; }

/* ── Latest stories list ── */
.latest-article { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--br); align-items: flex-start; }
.latest-article--last { border-bottom: none; }
.latest-thumb { width: 8.75rem; height: 6rem; flex-shrink: 0; }
.h3-latest{ font-size: 1.125rem; font-weight: 700; color: var(--hd); line-height: 1.25; margin: 0.375rem 0 0.5rem; }
.latest-deck { font-size: 0.8125rem; color: var(--mu); line-height: 1.6; margin-bottom: 0.5rem; }

/* ── Ranked list ── */
.rank-list { display: flex; flex-direction: column; }
.rank-item { display: flex; gap: 0.75rem; padding: 0.875rem 0; border-bottom: 1px solid var(--br); align-items: flex-start; }
.rank-item--last { border-bottom: none; }
.rank-item--sm   { padding: 0.75rem 0; }
.rank-cat { display: block; margin-bottom: 0.1875rem; }
.h4-rank  { font-size: 0.875rem; font-weight: 700; line-height: 1.3; display: block; }
.h4-rank--sm { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; display: block; }

/* ── Sidebar ad slots ── */
.sb-ad-wrap    { margin-bottom: 1.75rem; display: flex; justify-content: center; }
.sb-ad-bottom  { display: flex; justify-content: center; }
.sb-ad-bottom--mb { display: flex; justify-content: center; margin-bottom: 1.75rem; }

/* ── Post / article header ── */
.h1-article {
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 900;
  color: var(--hd);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.article-deck { font-size: 1.0625rem; color: var(--mu); line-height: 1.6; margin-bottom: 1.25rem; font-weight: 500; }
.article-byline-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
}
.author-tag   { display: flex; align-items: center; gap: 0.625rem; }
.avatar-sm    { width: 2.375rem; height: 2.375rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.avatar-lg    { width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.author-name  { font-size: 0.75rem; font-weight: 700; color: var(--hd); margin-bottom: 1px; }
.author-title { font-size: 0.6875rem; color: var(--mu); }
.article-meta-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex-wrap: wrap; }
.meta-text { font-size: 0.75rem; color: var(--mu); font-weight: 500; }
.share-btns{ display: flex; gap: 0.375rem; }
.btn-share { width: 2.25rem; height: 2.25rem; padding: 0; }

/* ── Article hero figure ── */
.figure-article { margin: 0 0 1.75rem; }
img.img-article-hero { width: 100%; height: auto; max-height: 31.25rem; object-fit: cover; display: block; }
figcaption { font-size: 0.6875rem; color: var(--mu); padding: 0.5rem 0; font-weight: 500; }

/* ── Article tags row ── */
.article-tags {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--br);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.tags-label { font-size: 0.6875rem; font-weight: 700; color: var(--mu); margin-right: 0.25rem; }

/* ── Author bio box ── */
.author-bio-box   { margin-top: 2.5rem; padding: 1.5rem; background: var(--bg2); border-left: 0.25rem solid var(--mg); }
.author-bio-inner { display: flex; gap: 1rem; align-items: flex-start; }
.eyebrow-xs      { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); margin-bottom: 0.25rem; }
.author-bio-name { font-size: 1rem; font-weight: 700; display: block; margin-bottom: 0.375rem; }
.author-bio-text { font-size: 0.8125rem; color: var(--mu); line-height: 1.6; }

/* ── Sticky sidebar ── */
.sticky-sidebar { position: sticky; top: 5.5rem; }

/* ── Related articles ── */
.h3-related { font-size: 0.875rem; font-weight: 700; color: var(--hd); line-height: 1.3; margin: 0.3125rem 0 0; }

/* ── Responsive ── */
@media (max-width: 1260px) {
  .skin-rail { display: none; }
}

@media(min-width: 1025px) {
  .lead-article { padding-right: 1rem; border-right: 1px solid var(--br); }
  .right-stack { padding-left: 1rem; background: var(--bg); }
  .stack-article:first-child { border-bottom: 1px solid var(--br); padding-bottom: 0; margin-bottom: 1.25rem; }
}

@media (max-width: 1024px) {
  .ham { display: flex; }
  .nav-links { display: none; }
  .hide-mob { display: none !important; }

  /* Search button moves into the mobile nav (injected by shared.js);
     hide it from the desktop action bar at this breakpoint. */
  #search-btn { display: none; }

  .with-sb { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .sb-col { display: none !important; }

  .grid-hero { grid-template-columns: 1fr; gap: 0; background: transparent; }
  .right-stack { flex-direction: row; flex-wrap: wrap; background: transparent; }
  .right-stack article { flex: 1; min-width: 17.5rem; border: 1px solid var(--br); }
  .grid-4c { grid-template-columns: repeat(2, 1fr); background: transparent; gap: 1rem; }
  .grid-3c { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: 1fr; background: transparent; gap: 1.5rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .lead-article { padding-right: 0; }
}

/* Utility bar hidden on small phones — it adds clutter at this size. */
@media (max-width: 767px) {

  .mini-article { padding: 1rem 0; & > a { display: none;}}

  .latest-article {
    flex-direction: column;

    .latest-thumb {
      width: 100%;
      height: auto;
    }
  }
}

@media (max-width: 600px) {
  .right-stack { flex-direction: column; }
  .right-stack article { min-width: 0; border: none; border-bottom: 1px solid var(--br); }
  .grid-4c { grid-template-columns: 1fr; gap: 1.25rem; }
  .grid-3c { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .article-body p { font-size: 0.9375rem; }
  .nl-form { flex-direction: column; }
  .nl-input { border-right: 0.125rem solid rgba(255, 255, 255, .4); border-bottom: 0; }
}

/* ── Search modal ── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.search-inner {
  background: var(--bg);
  width: 100%;
  max-width: 640px;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  position: relative;
}
.search-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mu);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.search-close-btn:hover { color: var(--hd); }
.search-label {
  display: block;
  font-size: 0.75rem; /* was 0.7rem (11.2px) — bumped to 12px minimum */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 0.75rem;
}
.search-form {
  display: flex;
  gap: 0.5rem;
}
.search-input {
  flex: 1;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid var(--br);
  border-radius: 6px;
  background: var(--bg);
  color: var(--hd);
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.search-input:focus { border-color: var(--mg); }
.search-input::placeholder { color: var(--mu); }
.search-submit {
  background: var(--mg);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.search-submit:hover { opacity: 0.88; }
.search-hint {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--mu);
}

/* Search results page */
.search-results-hd { margin-bottom: 1.5rem; }
.search-count { font-size: 0.85rem; color: var(--mu); margin-top: 0.25rem; }
.search-result-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--br);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-thumb {
  width: 100px;
  height: 67px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--br);
}
.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-result-title { font-weight: 700; margin: 0.2rem 0 0.4rem; line-height: 1.35; }
.search-result-title a { color: var(--hd); text-decoration: none; }
.search-result-title a:hover { color: var(--mg); }
.search-result-meta { font-size: 0.78rem; color: var(--mu); }
.search-no-results { text-align: center; padding: 3rem 0; color: var(--mu); }
.search-no-results strong { display: block; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--hd); }

.hm-yt-converted {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}