/*
Theme Name: Benderson Media
Theme URI: https://bendersonmedia.com/
Author: Benderson Media
Author URI: https://bendersonmedia.com/
Description: Editorial theme for Benderson Media. Faithful replica of the bendersonmedia.com design system: Fraunces display headlines, Inter UI, token-driven light and dark modes, sticky translucent header, market ticker strip, and a card based news layout.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: benderson
Tags: news, magazine, blog, editorial, dark-mode, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   COMPONENT CLASS INVENTORY  (read this before writing any template)
   --------------------------------------------------------------------------
   Every template in this theme composes the classes below. Do not invent new
   global class names; extend here instead. Legacy names captured from the
   original Next.js build are kept as aliases and marked (alias).

   LAYOUT
     .bm-wrap ................ 80rem max-width container, 24px gutters
     .bm-wrap-narrow ......... 48rem container for prose / centered content
     .bm-wrap-mid ............ 64rem container
     .bm-section ............. standard vertical section rhythm (48/64px)
     .bm-section--tight ...... reduced vertical rhythm
     .bm-section-head ........ flex row: title left, "View all" link right
     .bm-section-title ....... Fraunces section heading (Latest, Finance, ...)
     .bm-section-viewall ..... accent uppercase "View all" link
     .section-divider ........ (alias) accent rule under a section head
     .bm-grid-2 / .bm-grid-3 / .bm-grid-4 ... responsive card grids
     .bm-split ............... [1.4fr 1fr] feature + side list layout
     .bm-split--hero ......... [1.65fr 1fr] hero + sidebar layout
     .bm-stack ............... vertical flex stack, gap via --bm-stack-gap

   TYPOGRAPHY
     .bm-headline-xl / .headline-xl ... hero H1 (Fraunces display)
     .bm-headline-lg / .headline-lg ... section + feature headings
     .bm-headline-md / .headline-md ... card and list titles
     .bm-headline-sm .................. small list titles
     .bm-eyebrow ...................... 10px bold uppercase accent kicker
     .bm-eyebrow--muted ............... same, muted colour (e.g. "The Lead")
     .bm-kicker-row ................... eyebrow + hairline + secondary label
     .bm-dek .......................... hero / feature standfirst paragraph
     .bm-excerpt ...................... 14px card summary text
     .bm-meta ......................... uppercase date + read time row
     .bm-meta-sep ..................... middot separator inside .bm-meta
     .bm-clamp-2 / .bm-clamp-3 ........ line clamping helpers
     .bm-link-accent .................. inline accent link

   CARDS AND LISTS
     .bm-card ................. article card wrapper (article element)
     .bm-card-link ............ full-card anchor (block, group hover source)
     .bm-card-media ........... 16:10 framed image with hover zoom
     .article-image-frame ..... (alias of .bm-card-media)
     .bm-card-media--hero ..... larger radius hero variant
     .hero-image-wrap ......... (alias) hero image frame w/ beam accent
     .border-beam ............. gradient hairline over the hero image
     .bm-card-body ............ text block under the media
     .bm-card-title ........... card headline (compose with .bm-headline-md)
     .bm-feature .............. large in-section feature article
     .bm-list .................. vertical divided list container
     .bm-list-item ............ thumb + text row inside .bm-list
     .bm-list-thumb ........... 96px square rounded thumbnail
     .bm-list-body ............ text column of a list item
     .glass-card / .bm-glass .. translucent bordered panel

   CHROME
     .bm-header ............... sticky translucent site header
     .theme-header ............ (alias of .bm-header)
     .bm-header-inner ......... 68px flex bar
     .bm-wordmark ............. "Benderson MEDIA" lockup
     .bm-wordmark-name / .bm-wordmark-tag
     .bm-nav / .bm-nav-link ... desktop navigation
     .bm-actions .............. right side control cluster
     .bm-theme-toggle ......... sun/moon round button
     .bm-menu-btn ............. mobile hamburger
     .bm-mobile-nav ........... collapsible mobile menu
     .bm-ticker ............... market strip below the header
     .bm-ticker-label ......... "MARKETS" label with live dot
     .bm-ticker-viewport / .ticker-mask ... fading overflow mask
     .bm-ticker-track ......... animated marquee rail (pauses on hover)
     .bm-ticker-item / .bm-ticker-sym / .bm-ticker-val / .bm-ticker-chg
     .bm-trending ............. trending headline marquee strip
     .bm-footer ............... site footer
     .bm-footer-grid / .bm-footer-head / .bm-footer-link / .bm-footer-bar

   FORMS AND CTAs
     .bm-btn .................. base pill button
     .bm-btn--solid ........... inverted (dark on light) primary button
     .bm-btn--accent .......... accent filled button
     .bm-btn--ghost ........... outlined button
     .bm-input ................ pill text input
     .bm-subscribe-form ....... email + submit row
     .bm-newsletter ........... full width "Sharper than your feed." section
     .bm-newsletter-inline .... in-article newsletter panel
     .bm-form-note ............ "Free / No spam / Unsubscribe anytime"
     .bm-form-msg ............. success or error feedback line
     .bm-search-form / .bm-search-input

   ARTICLE PROSE
     .bm-prose / .wp-content .. full article typography (aliases, identical)
     .bm-prose--dropcap ....... adds the drop cap to the first paragraph
     .image-credit ............ figcaption credit line
     .bm-figure ............... article figure wrapper

   UTILITY
     .bm-wrap-flush ........... cancels container padding on small screens
     .bm-hide-mobile / .bm-hide-desktop
     .bm-sr-only .............. screen reader only text
     .bm-skip-link ............ keyboard skip to content
     .bm-rule ................. 1px subtle horizontal rule
     .bm-hairline ............. short flexible hairline used in kicker rows
     .bm-pagination ........... numbered archive pagination
     .aurora-bg ............... soft accent wash behind the hero
     .bm-tools ................ affiliate "Tools & Resources" grid block
   ==========================================================================
   TABLE OF CONTENTS
     1.  Design tokens (light)
     2.  Design tokens (dark)
     3.  Reset and base
     4.  Layout primitives
     5.  Typography components
     6.  Header
     7.  Market ticker
     8.  Trending strip
     9.  Cards and lists
     10. Buttons and forms
     11. Newsletter blocks
     12. Article prose (.bm-prose / .wp-content)
     13. Tools and resources block
     14. Footer
     15. Pagination and archive furniture
     16. Decorative effects
     17. Utilities
     18. Responsive and motion preferences
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS (LIGHT)  -- values mirrored verbatim from the live site
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Surfaces */
  --bg-primary: #fafaf7;
  --bg-secondary: #fff;
  --bg-card: #fff;
  --bg-card-hover: #fff;
  --bg-input: #fff;
  --bg-ticker: #f4f4ef;
  --bg-header: #fafaf7d9;
  --bg-inverted: #0b1220;

  /* Text */
  --text-primary: #1a2236;
  --text-secondary: #1a2236b8;
  --text-muted: #1a223680;
  --text-heading: #0b1220;
  --text-on-accent: #fff;

  /* Accent */
  --accent: #0891b2;
  --accent-hover: #0e7490;
  --accent-bright: #00d4ff;
  --accent-soft: #ecfeff;
  --accent-soft-2: #00d4ff0f;
  --accent-glow: #0891b226;

  /* Lines and shadows */
  --border-card: #0b12200f;
  --border-card-hover: #0891b259;
  --border-subtle: #0b122014;
  --shadow-card: 0 1px 2px #0b12200a, 0 8px 32px #0b12200d;
  --shadow-lift: 0 4px 12px #0b12200f, 0 16px 48px #0891b21a;

  /* Article prose */
  --wp-text: #1a2236e0;
  --wp-link: #0891b2;
  --wp-code-bg: #0891b21a;
  --wp-pre-bg: #0b12200a;
  --wp-blockquote-border: #00d4ff;
  --wp-blockquote-text: #1a2236bf;

  /* Selection, scrollbar, overlays */
  --selection-bg: #0891b22e;
  --selection-text: #0b1220;
  --scrollbar-track: #fafaf7;
  --scrollbar-thumb: #0b122026;
  --scrollbar-thumb-hover: #0b12204d;
  --gradient-overlay: linear-gradient(to top, #fafaf7f2 0%, #fafaf799 40%, transparent 80%);
  --glass-blur: 16px;

  /* Market direction colours */
  --pos: #10b981;
  --neg: #f43f5e;

  /* Type system */
  --font-serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-fraunces: var(--font-serif);
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-inter: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-8xl: 6rem;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;
  --tracking-tight: -.025em;
  --tracking-wide: .025em;

  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;

  /* Layout */
  --wrap: 80rem;
  --wrap-mid: 64rem;
  --wrap-narrow: 48rem;
  --gutter: 1.5rem;
  --header-h: 68px;

  color-scheme: light;
}

/* ==========================================================================
   2. DESIGN TOKENS (DARK)
   ========================================================================== */

[data-theme="dark"] {
  --bg-primary: #06090e;
  --bg-secondary: #0a0e1a;
  --bg-card: #ffffff08;
  --bg-card-hover: #ffffff0d;
  --bg-input: #ffffff0a;
  --bg-ticker: #0a0e1a;
  --bg-header: #06090ed9;
  --bg-inverted: #fafaf7;

  --text-primary: #e8ecf5;
  --text-secondary: #e8ecf5b8;
  --text-muted: #e8ecf57a;
  --text-heading: #fff;
  --text-on-accent: #06090e;

  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-bright: #00d4ff;
  --accent-soft: #00d4ff14;
  --accent-soft-2: #00d4ff0a;
  --accent-glow: #00d4ff26;

  --border-card: #ffffff0f;
  --border-card-hover: #00d4ff4d;
  --border-subtle: #ffffff14;
  --shadow-card: 0 1px 2px #0006, 0 8px 32px #0000004d;
  --shadow-lift: 0 4px 24px #00000080, 0 0 48px #00d4ff14;

  --wp-text: #e8ecf5e6;
  --wp-link: #22d3ee;
  --wp-code-bg: #00d4ff1a;
  --wp-pre-bg: #ffffff0a;
  --wp-blockquote-border: #00d4ff;
  --wp-blockquote-text: #e8ecf5bf;

  --selection-bg: #00d4ff40;
  --selection-text: #fff;
  --scrollbar-track: #06090e;
  --scrollbar-thumb: #ffffff26;
  --scrollbar-thumb-hover: #ffffff4d;
  --gradient-overlay: linear-gradient(to top, #06090ef2 0%, #06090e99 40%, transparent 80%);
  --glass-blur: 12px;

  --pos: #34d399;
  --neg: #fb7185;

  color-scheme: dark;
}


/* ==========================================================================
   3. RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.bm-nav-open { overflow: hidden; }

#bm-main,
.bm-main { flex: 1 1 auto; }

img,
svg,
video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }

::selection { background: var(--selection-bg); color: var(--selection-text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.bm-wrap,
.bm-wrap-mid,
.bm-wrap-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bm-wrap { max-width: var(--wrap); }
.bm-wrap-mid { max-width: calc(var(--wrap-mid) + var(--gutter) * 2); }
.bm-wrap-narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }

.bm-section { padding-block: 3rem; }
.bm-section--tight { padding-block: 2rem; }
.bm-section--lead { padding: 2.5rem 0 3.5rem; position: relative; overflow: hidden; }
.bm-section--alt { background: var(--bg-secondary); }

@media (min-width: 640px) {
  .bm-section { padding-block: 4rem; }
  .bm-section--lead { padding: 3.5rem 0 5rem; }
}

.bm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Accent rule beneath a section head, matching the live site. */
.section-divider,
.bm-section-head { position: relative; padding-bottom: .75rem; }
.section-divider::after,
.bm-section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
}
.section-divider::before,
.bm-section-head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: var(--accent);
  z-index: 1;
}

.bm-section-viewall {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--accent);
  white-space: nowrap;
  transition: opacity .15s ease;
}
.bm-section-viewall:hover { opacity: .7; }

.bm-grid-2,
.bm-grid-3,
.bm-grid-4 { display: grid; gap: 2rem 2rem; }
.bm-grid-3 { row-gap: 2.5rem; }

.bm-split,
.bm-split--hero { display: grid; gap: 2rem; }

.bm-stack { display: flex; flex-direction: column; gap: var(--bm-stack-gap, 1rem); }

@media (min-width: 640px) {
  .bm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bm-split { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
  .bm-split--hero { grid-template-columns: 1.65fr 1fr; gap: 3.5rem; }
}


/* ==========================================================================
   5. TYPOGRAPHY COMPONENTS
   ========================================================================== */

.bm-headline-xl,
.headline-xl,
.bm-headline-lg,
.headline-lg,
.bm-headline-md,
.headline-md,
.bm-headline-sm {
  font-family: var(--font-serif);
  color: var(--text-heading);
  margin: 0;
}

/* Axis values are measured, not guessed: at 60px in the 732px hero column,
   wght 800 / opsz 144 / -0.045em sets "Benioff Backed Startup Targets" to
   716px, matching the 718px line on the live site so headlines break on the
   same words. Do not loosen these without re-measuring. */
.bm-headline-xl,
.headline-xl {
  font-weight: 800;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
  font-size: clamp(2.25rem, 1.35rem + 3.9vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.bm-headline-lg,
.headline-lg {
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.032em;
}

.bm-headline-md,
.headline-md {
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48;
  font-size: 1.1875rem;
  line-height: 1.24;
  letter-spacing: -.018em;
}

.bm-headline-sm {
  font-family: var(--font-serif);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
  font-size: .9375rem;
  line-height: var(--leading-snug);
  letter-spacing: -.008em;
}

.bm-section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--text-heading);
  margin: 0;
}

.bm-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  line-height: 1;
}
.bm-eyebrow--muted { color: var(--text-muted); font-weight: 400; letter-spacing: .18em; }

.bm-kicker-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.bm-hairline {
  display: block;
  height: 1px;
  flex: 1 1 auto;
  max-width: 4rem;
  background: var(--border-subtle);
}

.bm-dek {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 42rem;
}

.bm-excerpt {
  font-size: 14px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.bm-meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.bm-meta--plain { text-transform: none; letter-spacing: 0; gap: .5rem; }
.bm-meta-sep { opacity: .7; }

.bm-clamp-2,
.bm-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bm-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.bm-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.bm-link-accent { color: var(--accent); transition: color .15s ease; }
.bm-link-accent:hover { color: var(--accent-hover); }


/* ==========================================================================
   6. HEADER
   ========================================================================== */

.bm-header,
.theme-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.bm-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1rem;
}

.bm-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .625rem;
  line-height: 1;
  flex-shrink: 0;
}
.bm-wordmark-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--text-heading);
}
.bm-wordmark-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--accent);
  padding-bottom: 2px;
}
@media (min-width: 640px) {
  .bm-wordmark-name { font-size: 28px; }
  .bm-wordmark-tag { font-size: 11px; }
}

.bm-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 900px) { .bm-nav { display: flex; } }

.bm-nav-link {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-secondary);
  transition: color .2s ease;
  padding-block: .25rem;
}
/* Underline sweep uses scaleX rather than width so it composites on the GPU. */
.bm-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.bm-nav-link:hover,
.bm-nav-link[aria-current="page"],
.bm-nav .current-menu-item > .bm-nav-link { color: var(--text-heading); }
.bm-nav-link:hover::after,
.bm-nav .current-menu-item > .bm-nav-link::after { transform: scaleX(1); }

.bm-actions { display: flex; align-items: center; gap: .75rem; }

.bm-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  flex-shrink: 0;
}
.bm-theme-toggle:hover {
  color: var(--accent);
  border-color: var(--border-card-hover);
  background: var(--accent-soft-2);
}
.bm-theme-toggle svg { width: 15px; height: 15px; }
.bm-icon-moon { display: none; }
[data-theme="dark"] .bm-icon-sun { display: none; }
[data-theme="dark"] .bm-icon-moon { display: block; }

.bm-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  color: var(--text-secondary);
}
@media (min-width: 900px) { .bm-menu-btn { display: none; } }

.bm-mobile-nav {
  display: none;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  padding: .5rem 0 1.25rem;
}
.bm-mobile-nav.is-open { display: block; }
@media (min-width: 900px) { .bm-mobile-nav, .bm-mobile-nav.is-open { display: none; } }
.bm-mobile-nav ul { display: flex; flex-direction: column; }
.bm-mobile-nav a {
  display: block;
  padding: .875rem .25rem;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.bm-mobile-nav a:hover { color: var(--accent); }


/* ==========================================================================
   7. MARKET TICKER
   ========================================================================== */

.bm-ticker {
  background: var(--bg-ticker);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.bm-ticker-inner {
  display: flex;
  align-items: center;
  height: 34px;
}
.bm-ticker-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  padding: 0 1.25rem 0 var(--gutter);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--text-secondary);
  background: var(--bg-ticker);
  position: relative;
  z-index: 2;
}
.bm-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--pos);
  flex-shrink: 0;
}

.bm-ticker-viewport,
.ticker-mask {
  flex: 1 1 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.bm-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: bm-marquee 55s linear infinite;
}
.bm-ticker-viewport:hover .bm-ticker-track,
.bm-ticker-track:focus-within { animation-play-state: paused; }

.bm-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding-inline: 1.5rem;
  white-space: nowrap;
}
.bm-ticker-sym {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}
.bm-ticker-val { font-size: 11px; color: var(--text-primary); }
.bm-ticker-chg {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  font-size: 11px;
  font-weight: 600;
}
.bm-ticker-chg svg { width: 10px; height: 10px; }
.bm-ticker-chg.is-up { color: var(--pos); }
.bm-ticker-chg.is-down { color: var(--neg); }

@keyframes bm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}


/* ==========================================================================
   8. TRENDING STRIP
   ========================================================================== */

.bm-trending {
  padding-block: .75rem;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  overflow: hidden;
}
.bm-trending-inner { display: flex; align-items: center; gap: 1.5rem; }
.bm-trending-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent);
  z-index: 1;
}
/* Spacing lives on the item, not as a track gap, so the two duplicated halves
   are exactly equal width and the -50% marquee loop has no visible seam. */
.bm-trending .bm-ticker-track { animation-duration: 70s; }
.bm-trending-item {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  margin-right: 2.5rem;
}
.bm-trending-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.bm-trending-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color .15s ease;
}
.bm-trending-item:hover .bm-trending-title { color: var(--accent); }


/* ==========================================================================
   9. CARDS AND LISTS
   ========================================================================== */

.bm-card { display: block; height: 100%; }
.bm-card-link { display: block; height: 100%; }

.bm-card-media,
.article-image-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-card);
  margin-bottom: 1rem;
}
.bm-card-media img,
.article-image-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.bm-card-link:hover .bm-card-media img,
.bm-card-link:hover .article-image-frame img { transform: scale(1.04); }

.bm-card-media--placeholder {
  background:
    radial-gradient(120% 120% at 20% 0%, var(--accent-soft-2), transparent 60%),
    var(--bg-secondary);
}

.bm-card-media--hero,
.hero-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--bg-secondary);
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-card);
}
.bm-card-media--hero img,
.hero-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.4, 0, .2, 1);
}
.bm-card-link:hover .bm-card-media--hero img,
.bm-card-link:hover .hero-image-wrap img { transform: scale(1.03); }

.bm-card-body { display: block; }

.bm-card-title { display: block; margin-bottom: .625rem; transition: color .2s ease; }
.bm-card-link:hover .bm-card-title,
.bm-card-link:hover .bm-headline-md,
.bm-card-link:hover .bm-headline-lg,
.bm-card-link:hover .bm-headline-xl,
.bm-card-link:hover .bm-headline-sm { color: var(--accent); }

.bm-card .bm-eyebrow { margin-bottom: .625rem; }
.bm-card .bm-excerpt { margin-bottom: .75rem; }

/* Large in-section feature */
.bm-feature .bm-card-media { border-radius: var(--radius-lg); margin-bottom: 1.25rem; }
.bm-feature .bm-headline-lg { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.75rem); margin-bottom: .75rem; }
.bm-feature .bm-excerpt { font-size: 15px; margin-bottom: .75rem; }

/* Divided vertical list (ALSO TODAY, section sidebars, related lists) */
.bm-list { display: flex; flex-direction: column; }
.bm-list-item { padding-block: 1.25rem; border-top: 1px solid var(--border-subtle); }
.bm-list-item:first-child { border-top: 0; padding-top: 0; }
.bm-list-item:last-child { padding-bottom: 0; }
.bm-list-link { display: flex; gap: 1rem; align-items: stretch; }

.bm-list-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-card);
}
.bm-list-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.bm-list-link:hover .bm-list-thumb img { transform: scale(1.04); }

.bm-list-body {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  min-width: 0;
  flex: 1 1 auto;
}
.bm-list-body .bm-headline-md,
.bm-list-body .bm-headline-sm { font-size: 15px; line-height: 1.28; }
.bm-list-body .bm-meta { margin-top: auto; font-size: 11px; letter-spacing: .08em; }
.bm-list-link:hover .bm-headline-md,
.bm-list-link:hover .bm-headline-sm { color: var(--accent); }

@media (min-width: 640px) {
  .bm-list-body .bm-headline-md { font-size: 16px; }
}

/* Sidebar heading with the heavy underline used by ALSO TODAY */
.bm-aside-head {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--text-heading);
}
.bm-aside-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--text-heading);
  margin: 0;
}

/* Translucent panel */
.glass-card,
.bm-glass {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.glass-card:hover,
.bm-glass:hover { border-color: var(--border-card-hover); }


/* ==========================================================================
   10. BUTTONS AND FORMS
   ========================================================================== */

.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.bm-btn:hover { transform: translateY(-1px); }
.bm-btn:active { transform: translateY(0); }
.bm-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.bm-btn--solid { background: var(--bg-inverted); color: var(--text-on-accent); }
.bm-btn--solid:hover { opacity: .88; }

.bm-btn--accent { background: var(--accent); color: var(--text-on-accent); }
.bm-btn--accent:hover { background: var(--accent-hover); }

.bm-btn--ghost {
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  background: transparent;
}
.bm-btn--ghost:hover { border-color: var(--border-card-hover); color: var(--accent); }

.bm-btn--lg { padding: .875rem 1.75rem; font-size: 13px; letter-spacing: .1em; }

.bm-subscribe-btn { display: none; }
@media (min-width: 640px) { .bm-subscribe-btn { display: inline-flex; } }

.bm-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .875rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bm-input::placeholder { color: var(--text-muted); }
.bm-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.bm-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
}
@media (min-width: 640px) { .bm-subscribe-form { flex-direction: row; } }

.bm-form-note {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text-muted);
  margin-top: 1.25rem;
}
.bm-form-msg {
  margin-top: 1rem;
  font-size: 13px;
  color: var(--accent);
  min-height: 1.2em;
}
.bm-form-msg.is-error { color: var(--neg); }

.bm-search-form { display: flex; gap: .5rem; }
.bm-search-input {
  flex: 1 1 auto;
  padding: .75rem 1.125rem;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
}
.bm-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }


/* ==========================================================================
   11. NEWSLETTER BLOCKS
   ========================================================================== */

.bm-newsletter {
  position: relative;
  padding-block: 6rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  overflow: hidden;
  text-align: center;
}
.bm-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background: radial-gradient(ellipse 600px 300px at 50% 40%, var(--accent-soft), transparent 70%);
}
.bm-newsletter-inner { position: relative; z-index: 1; max-width: 42rem; margin-inline: auto; }
.bm-newsletter .bm-eyebrow { letter-spacing: .25em; margin-bottom: .75rem; }
.bm-newsletter .bm-headline-lg { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
.bm-newsletter p.bm-newsletter-sub {
  font-size: 16px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 28rem;
  margin: 1.25rem auto 0;
}
.bm-newsletter .bm-subscribe-form { max-width: 28rem; margin: 2rem auto 0; }

.bm-newsletter-inline {
  margin-block: 2.5rem;
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.bm-newsletter-inline .bm-eyebrow { margin-bottom: .625rem; }
.bm-newsletter-inline p { color: var(--text-secondary); font-size: 14px; margin: .5rem 0 1.25rem; }


/* ==========================================================================
   12. ARTICLE PROSE  (.bm-prose and .wp-content are identical aliases)
   ========================================================================== */

.bm-prose,
.wp-content {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--wp-text);
}

.bm-prose > *:first-child,
.wp-content > *:first-child { margin-top: 0; }

.bm-prose p,
.wp-content p { margin: 0 0 1.4em; }

.bm-prose h1,
.wp-content h1 {
  font-family: var(--font-serif);
  font-weight: 800;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--text-heading);
  margin: 1.6em 0 .6em;
}

.bm-prose h2,
.wp-content h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 96;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--text-heading);
  margin: 2em 0 .6em;
}

.bm-prose h3,
.wp-content h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text-heading);
  margin: 1.7em 0 .5em;
}

.bm-prose h4,
.wp-content h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-heading);
  margin: 1.6em 0 .5em;
}

.bm-prose a,
.wp-content a {
  color: var(--wp-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
.bm-prose a:hover,
.wp-content a:hover { color: var(--accent-hover); }

.bm-prose strong,
.wp-content strong { color: var(--text-heading); font-weight: 700; }

.bm-prose ul,
.bm-prose ol,
.wp-content ul,
.wp-content ol { margin: 0 0 1.4em; padding-left: 1.35em; }
.bm-prose ul,
.wp-content ul { list-style: disc; }
.bm-prose ol,
.wp-content ol { list-style: decimal; }
.bm-prose li,
.wp-content li { margin-bottom: .55em; }
.bm-prose li::marker,
.wp-content li::marker { color: var(--accent); }

.bm-prose blockquote,
.wp-content blockquote {
  margin: 1.9em 0;
  padding: .25em 0 .25em 1.4em;
  border-left: 3px solid var(--wp-blockquote-border);
  color: var(--wp-blockquote-text);
  font-style: italic;
  font-size: 1.125rem;
}
.bm-prose blockquote p:last-child,
.wp-content blockquote p:last-child { margin-bottom: 0; }

.bm-prose code,
.wp-content code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--wp-code-bg);
  padding: .15em .4em;
  border-radius: var(--radius-md);
}
.bm-prose pre,
.wp-content pre {
  background: var(--wp-pre-bg);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 1.15em 1.25em;
  overflow-x: auto;
  margin: 0 0 1.5em;
  font-size: .875rem;
  line-height: 1.6;
}
.bm-prose pre code,
.wp-content pre code { background: none; padding: 0; }

.bm-prose img,
.wp-content img { border-radius: var(--radius-lg); margin: 1.7em 0; width: 100%; }

.bm-prose figure,
.wp-content figure { margin: 1.9em 0; }
.bm-prose figcaption,
.wp-content figcaption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: .625rem;
  line-height: 1.5;
}

.bm-prose table,
.wp-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.7em 0;
  font-size: .95rem;
}
.bm-prose th,
.bm-prose td,
.wp-content th,
.wp-content td {
  padding: .625rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.bm-prose th,
.wp-content th { color: var(--text-heading); font-weight: 700; }

.bm-prose hr,
.wp-content hr { margin: 2.4em 0; border-top: 1px solid var(--border-subtle); }

/* Article body hides a duplicated H1 that WordPress content sometimes carries. */
.bm-prose--nofirsth1 > h1:first-child,
.wp-content--nofirsth1 > h1:first-child { display: none; }

/* Drop cap on the opening paragraph. */
.bm-prose--dropcap > p:first-of-type::first-letter,
.wp-content--dropcap > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: 800;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
  float: left;
  font-size: 4.1rem;
  line-height: .82;
  padding: .06em .09em 0 0;
  margin-top: .04em;
  color: var(--text-heading);
}

.bm-figure { margin: 0 0 2.5rem; }
.bm-figure img { width: 100%; border-radius: var(--radius-lg); }

.image-credit,
.bm-image-credit {
  display: block;
  margin-top: .625rem;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.image-credit a,
.bm-image-credit a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   13. TOOLS AND RESOURCES BLOCK
   ========================================================================== */

.bm-tools { position: relative; padding-block: 4rem; }
.bm-tools::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-card-hover), transparent);
}
.bm-tools-head { margin-bottom: 2.25rem; }
.bm-tools-head h2 {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-heading);
}
.bm-tools-head h2 span { color: var(--accent); }
.bm-tools-head p { font-size: 15px; color: var(--text-secondary); margin-top: .5rem; }
.bm-tools-head .bm-tools-disclosure { font-size: 11px; color: var(--text-muted); margin-top: .5rem; }

.bm-tool-card { position: relative; overflow: hidden; padding: 1.25rem; }
/* Replica note: the live site puts a 2px gradient bar on the TOP edge of each
   tool card (h-0.5, colour fading to transparent). Reproduced verbatim because
   this is a faithful-replica build, not a redesign. It is a top rule, not a
   side tab, and it fades out rather than running the full width as a slab. */
.bm-tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--bm-tool-accent, var(--accent)), transparent);
}
.bm-tool-icon { color: var(--bm-tool-accent, var(--accent)); margin-bottom: .75rem; }
.bm-tool-icon svg { width: 22px; height: 22px; }
.bm-tool-card h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 1rem;
}
.bm-tool-row { padding-block: .5rem; border-bottom: 1px solid var(--border-subtle); }
.bm-tool-row:last-child { border-bottom: 0; }
.bm-tool-row a {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  transition: opacity .15s ease;
}
.bm-tool-row a:hover { opacity: .8; }
.bm-tool-row span { display: block; font-size: 12px; color: var(--text-muted); margin-top: .125rem; }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.bm-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}
.bm-footer-inner { padding: 4rem 0 2.5rem; }
.bm-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 640px) { .bm-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bm-footer-brand { grid-column: span 2; }
.bm-footer-brand .bm-wordmark { margin-bottom: 1.25rem; }
.bm-footer-brand .bm-wordmark-name { font-size: 30px; }
.bm-footer-brand .bm-wordmark-tag { font-size: 12px; }
.bm-footer-blurb {
  font-size: 14px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 24rem;
}

.bm-footer-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.bm-footer-col ul { display: flex; flex-direction: column; gap: .75rem; }
.bm-footer-link {
  font-size: 13px;
  color: var(--text-secondary);
  transition: color .15s ease;
}
.bm-footer-link:hover { color: var(--accent); }

.bm-footer-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}
@media (min-width: 640px) { .bm-footer-bar { flex-direction: row; align-items: center; } }
.bm-footer-bar span,
.bm-footer-bar a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
}
.bm-footer-bar a { transition: color .15s ease; }
.bm-footer-bar a:hover { color: var(--accent); }


/* ==========================================================================
   15. PAGINATION AND ARCHIVE FURNITURE
   ========================================================================== */

.bm-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 3.5rem;
}
.bm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: .75rem;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.bm-pagination .page-numbers:hover { color: var(--accent); border-color: var(--border-card-hover); }
.bm-pagination .page-numbers.current {
  background: var(--bg-inverted);
  color: var(--text-on-accent);
  border-color: transparent;
}
.bm-pagination .page-numbers.dots { border-color: transparent; }

.bm-archive-head { padding: 3rem 0 1rem; }
.bm-archive-head .bm-eyebrow { margin-bottom: .75rem; }
.bm-archive-desc { color: var(--text-secondary); max-width: 42rem; margin-top: 1rem; font-size: 15px; }

.bm-empty {
  padding: 4rem 0;
  text-align: center;
  color: var(--text-muted);
}


/* ==========================================================================
   16. DECORATIVE EFFECTS
   ========================================================================== */

/* Soft accent wash behind the lead story. */
.aurora-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 780px 420px at 12% -6%, var(--accent-soft), transparent 62%),
    radial-gradient(ellipse 620px 380px at 88% 4%, var(--accent-soft-2), transparent 66%);
  opacity: .85;
}

/* Gradient hairline riding the top edge of the hero image. */
.border-beam {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, var(--accent-bright), var(--accent), transparent);
  opacity: .9;
  z-index: 2;
  pointer-events: none;
}


/* ==========================================================================
   17. UTILITIES
   ========================================================================== */

.bm-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: 700;
  border-radius: 0 0 var(--radius-lg) 0;
}
.bm-skip-link:focus { left: 0; }

.bm-rule { height: 1px; background: var(--border-subtle); border: 0; }

.bm-hide-mobile { display: none; }
@media (min-width: 640px) { .bm-hide-mobile { display: block; } }
@media (min-width: 900px) { .bm-hide-desktop { display: none; } }

.bm-wrap-flush { margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 640px) { .bm-wrap-flush { margin-inline: 0; } }

.bm-relative { position: relative; z-index: 1; }


/* ==========================================================================
   18. RESPONSIVE AND MOTION PREFERENCES
   ========================================================================== */

@media (max-width: 639px) {
  .bm-headline-md,
  .headline-md { font-size: 1.0625rem; }
  .bm-newsletter { padding-block: 4rem; }
  .bm-tool-card { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .bm-ticker-track { animation: none !important; transform: none !important; }
  .bm-btn:hover { transform: none; }
}

@media print {
  .bm-header, .bm-ticker, .bm-trending, .bm-newsletter, .bm-tools, .bm-footer { display: none !important; }
  body { background: #fff; color: #000; }
}