/* ═══════════════════════════════════════════════════════════════════════
   newdais.ai — Daybreak component layer
   Applies the company "Daybreak" design system (canonical spec:
   newdais/brand/DESIGN.md; tokens in static/tokens.css — light default,
   dark toggle). Components style THROUGH tokens; no hex literals here.
   Fonts: Hanken Grotesk (display + body) / JetBrains Mono (labels, data).
   ═══════════════════════════════════════════════════════════════════════ */

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

/* form controls & UA chrome follow the active theme */
html { color-scheme: light; background: var(--ground); }
@media (prefers-color-scheme: dark) { html { color-scheme: dark; } }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

body {
  font-family: var(--font-sans);
  color: var(--ink-2);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-2), color var(--dur-2);
}

::selection { background: rgba(255,99,33,.25); }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }

a { transition: color var(--dur-1) var(--ease); }

/* ── Layout ─────────────────────────────────────────────────────────── */

.container-site {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px)  { .container-site { padding-inline: 40px; } }
@media (min-width: 1024px) { .container-site { padding-inline: 56px; } }

.section    { padding-block: clamp(56px, 8vw, 96px); position: relative; }
.section-sm { padding-block: clamp(44px, 6vw, 72px); position: relative; }

/* Section rhythm (DESIGN.md §5): alternate --ground ↔ --surface-2 */
.bg-elev-band {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Deep band — footer / closing moments (near-black plum in both themes).
   The band is dark in BOTH themes, so it carries fixed light inks. */
.bg-deep-band { background: var(--surface-3); color: #C0B6CB; }
.bg-deep-band h1, .bg-deep-band h2, .bg-deep-band h3, .bg-deep-band h4 { color: #F4EDE6; }
/* The band is dark in both themes, so the logo always wears its dark-mode
   inks here: set the tokens locally rather than filtering the artwork. */
.bg-deep-band .site-logo {
  --logo-ink: #F4EDE6; --logo-sun-1: var(--solar-400); --logo-sun-2: var(--coral-500);
}
.foot-link { font-size: 14px; color: #C0B6CB; transition: color var(--dur-1) var(--ease); }
.foot-link:hover { color: var(--ember-300); }
.foot-note { color: #867B96; }
/* the sunrise hairline at the band's top edge */
.horizon-top { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--horizon-line); opacity: .8; }
/* Legacy class names kept as no-op aliases */
.bg-navy, .bg-ink, .bg-surface { background: transparent; }

/* ── Sunrise motifs (DESIGN.md §6: placed, not sprayed) ─────────────── */

/* ambient glow blobs are retired — the horizon carries the warmth now */
.ambient { display: none; }
.grid-lines, .dot-grid { background-image: none; }

/* the one permitted hero sun-glow: low-opacity ember, bottom-anchored */
.glow-gold {
  background: radial-gradient(60% 55% at 50% 100%,
    rgba(255,99,33,.12) 0%, transparent 70%);
}

/* 1px sunrise hairline — under the nav, atop the footer, featured cards */
.horizon-rule { height: 1px; background: var(--horizon-line); }

/* ── Typography components ──────────────────────────────────────────── */

.display {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
}

/* Legacy hero-gradient text: now plain ink (gradient text retired) */
.display-grad { color: var(--ink); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.on-dark, .eyebrow.on-light { color: var(--accent); }
/* eyebrows sitting on the deep band / sunrise band need the bright step */
.bg-deep-band .eyebrow, .cta-sunrise .eyebrow { color: var(--accent-bright); }

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mono-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* sunrise hairline accent (was gold) */
.rule-gold {
  width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--ember-500), var(--coral-500));
  border-radius: 2px;
}

/* ── Buttons (DESIGN.md §8: solid interacts, gradient is hero-only) ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 0 22px;
  height: 48px;
  border-radius: var(--r-md);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn svg { transition: transform var(--dur-1) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* primary — SOLID accent; correct contrast in both themes via --on-accent */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* hero / closing-CTA gradient button — dark ink text, never white */
.btn-sunrise {
  background: var(--grad-cta);
  color: #1B1630;
  border: none;
  box-shadow: var(--shadow-sm);
}
.btn-sunrise:hover {
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow: var(--shadow-md);
}

/* secondary (was ghost-glass) — surface + hairline, teal on hover */
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--flow); transform: translateY(-1px); }

/* solid ink button — for placement on the sunrise band / deep band */
.btn-dark { background: var(--ink); color: var(--ground); border-color: transparent; }
.btn-dark:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--flow); background: var(--surface-2); }

/* ── Cards & panels ─────────────────────────────────────────────────── */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
a.card:hover, button.card:hover, .card-hover:hover {
  border-color: color-mix(in srgb, var(--accent-bright) 45%, var(--line));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* featured card: the sunrise, rationed to its top border */
.card-featured::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--horizon-line);
}

/* hero-media / callout panel (was frosted glass) */
.panel-glass {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* Legacy alias */
.tile-dark {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease);
}
.tile-dark:hover { border-color: color-mix(in srgb, var(--accent-bright) 45%, var(--line)); }

.step-num {
  font-family: var(--font-mono);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent-bright) 45%, transparent);
  user-select: none;
  pointer-events: none;
}

.corner-tick::after { display: none; }

/* ── Chips & badges ─────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 16px;
}
/* teal owns live/active state (DESIGN.md §2.1) */
.chip .chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--flow);
  animation: chip-pulse 2.6s ease-out infinite;
}

.badge-tech {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.badge-tech:hover { border-color: var(--flow); color: var(--ink); }

/* ── Nav ────────────────────────────────────────────────────────────── */

.site-header { padding: 14px 0; transition: padding var(--dur-2) var(--ease); }
.site-header .nav-shell {
  position: relative;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
/* the sunrise hairline under the nav */
.site-header .nav-shell::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -1px;
  height: 1px;
  background: var(--horizon-line);
  opacity: .75;
  pointer-events: none;
}
.site-header.scrolled { padding: 8px 0; }
.site-header.scrolled .nav-shell {
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  box-shadow: var(--shadow-md);
}

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .01em;
  padding: 8px 14px;
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link[aria-current="page"] { color: var(--accent); background: var(--surface-2); }

/* logo: inline SVG, so bars + wordmark ride --logo-ink and the disc keeps its
   sunrise ramp in both themes. The wordmark is live text in the brand face. */
.site-logo { height: 40px; width: auto; display: block; }
.site-logo .logo-word {
  font-family: var(--font-sans); font-size: 82px; font-weight: 700;
  letter-spacing: -2px; fill: var(--logo-ink);
}
@media (max-width: 767px) { .site-logo { height: 30px; } }
/* the new mark is wider than the old one; give the 320px class of phone room
   for the logo + theme toggle + hamburger without overflowing the shell */
@media (max-width: 380px) { .site-logo { height: 26px; } }

/* ── Forms ──────────────────────────────────────────────────────────── */

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Chrome autofill paint — keep it on the themed surface */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  border-color: var(--line-strong);
}

/* rfp upload drop-zone hover/dragover state (was bg-white/[0.06]) */
.drop-zone:hover, .drop-hover { background: var(--surface-2); }

/* dark veil over video posters (theme-independent: sits on imagery) */
.video-veil { background: rgba(12,8,24,.5); transition: background 300ms var(--ease); }
.group:hover .video-veil { background: rgba(12,8,24,.32); }

/* ── FAQ / details ──────────────────────────────────────────────────── */

details.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
details.faq + details.faq { margin-top: 10px; }
details.faq:hover { border-color: var(--line-strong); }
details.faq[open] { border-color: color-mix(in srgb, var(--accent-bright) 45%, var(--line)); background: var(--surface); }
details.faq > summary { list-style: none; cursor: pointer; color: var(--ink); }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq[open] summary ~ * { animation: fadeDown var(--dur-3) var(--ease); }

/* ── Closing CTA band (the second — and last — sunrise moment) ─────── */

.cta-sunrise {
  position: relative;
  background: var(--grad-sunrise);
}
.cta-sunrise, .cta-sunrise h2, .cta-sunrise h3, .cta-sunrise p { color: #1B1630; }

/* ── Scroll reveal (DESIGN.md §7: one quiet fade-up) ────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-3) var(--ease-dawn), transform var(--dur-3) var(--ease-dawn);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 60ms; }
.reveal-d2 { transition-delay: 120ms; }
.reveal-d3 { transition-delay: 180ms; }

/* ── Animations ─────────────────────────────────────────────────────── */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-fade:not(.hidden) { animation: fadeIn 200ms ease-out; }

@keyframes chip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(18,169,157,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(18,169,157,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,169,157,0); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,99,33,.45); }
  70%  { box-shadow: 0 0 0 18px rgba(255,99,33,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,99,33,0); }
}
.play-pulse { animation: pulse-ring 2.4s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Theme toggle button ────────────────────────────────────────────── */

.theme-toggle {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  display: inline-grid;
  place-items: center;
  transition: border-color var(--dur-1) var(--ease);
}
.theme-toggle:hover { border-color: var(--flow); }

/* ── Material Symbols (icon font) ───────────────────────────────────── */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Dropdown hover (legacy) */
.dropdown-menu { display: none; }
.dropdown-container:hover .dropdown-menu { display: flex; }

/* ── Fresh News rail ────────────────────────────────────────────────────
   Markup: templates/partials/_news_rail.html · driver: static/news.js
   Content: data/news.json. One slide visible at a time; the track slides
   horizontally so every card keeps the height of the tallest one and the
   page never reflows mid-rotation. */

.news-rail { position: relative; }

.news-viewport {
  overflow: hidden;
  /* Vertical scrolling stays with the page; horizontal drag is the rail's. */
  touch-action: pan-y;
  /* Room for the card shadow, which would otherwise be clipped. */
  padding: 3px 3px 8px;
  margin: -3px -3px -8px;
}

.news-track {
  display: flex;
  will-change: transform;
  transition: transform 520ms var(--ease-dawn);
}

.news-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 3px;
  /* Inactive slides sit behind the active one for drag-through legibility. */
  opacity: .55;
  transition: opacity var(--dur-3) var(--ease);
}
.news-slide.is-active { opacity: 1; }

.news-card {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}
.news-card-plain { grid-template-columns: minmax(0, 1fr); }

.news-media {
  position: relative;
  background: var(--surface-3);
  min-height: 100%;
}
.news-media video,
.news-media img,
.news-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
  object-fit: cover;
}
/* Stills are usually product screenshots, whose content sits at the top. A
   centred crop lands on empty chrome; video posters stay centred. */
.news-media img { object-position: top center; }

/* Click-to-play cover for clips too long or heavy to loop as a teaser */
.news-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(15, 11, 34, .12) 0%, rgba(15, 11, 34, .42) 100%);
  cursor: pointer;
}
.news-play-disc {
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-cta, var(--accent));
  color: #1B1630;
  box-shadow: 0 0 34px rgba(255, 99, 33, .28);
  transition: transform var(--dur-2) var(--ease);
}
.news-play:hover .news-play-disc { transform: scale(1.06); }
.news-play-disc svg { width: 24px; height: 24px; margin-left: 4px; }

/* Sound toggle, overlaid bottom-left of a video slide */
.news-sound {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(15, 11, 34, .68);
  backdrop-filter: blur(8px);
  color: #F4EDE6;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.news-sound:hover { background: rgba(15, 11, 34, .88); }
.news-sound svg { width: 14px; height: 14px; }

.news-copy {
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-card-plain .news-copy { max-width: 62ch; }

.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.news-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-bright) 40%, var(--line));
  border-radius: var(--r-sm);
  background: rgb(var(--accent-rgb) / .07);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.news-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.news-cta:hover { color: var(--accent-hover); }
.news-cta svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.news-cta:hover svg { transform: translateX(3px); }

/* Dwell timer for the visible slide */
.news-progress {
  height: 2px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.news-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

/* The dots are the only control, so they sit centred under the card and carry
   a hit area far larger than the 9px they draw. The resume button is absolute
   so that its appearing does not shove the dots off centre. */
.news-dots-row { position: relative; margin-top: 16px; }

.news-resume {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.news-resume:hover { border-color: var(--accent); }
.news-resume[hidden] { display: none; }
.news-resume svg { width: 12px; height: 12px; margin-left: 1px; }

.news-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.news-dot {
  position: relative;
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.news-dot::after {          /* 23px target, comfortably inside the 16px gap */
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
.news-dot:hover { border-color: var(--accent); }
.news-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

/* Hero variant: one column, media on top, sized to sit beside the hero copy
   rather than under a section heading. Title and body are clamped so a long
   item cannot stretch the card past the hero. */
.news-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
/* Copy on top, clip beneath. The 1fr on the copy row means slack from a
   shorter item collects behind the words rather than as a dead band under
   the clip, and the media stays flush to the bottom of the card. */
.news-rail-hero .news-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
}
/* The cap keeps the whole rail near the height of the hero copy beside it, so
   the two columns line up and the dots stay above the fold on a 900px screen. */
.news-rail-hero .news-media video,
.news-rail-hero .news-media img,
.news-rail-hero .news-media iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 240px;
  min-height: 0;
}
.news-rail-hero .news-copy { padding: 18px 22px 20px; }
.news-rail-hero .news-meta { margin-bottom: 10px; }
.news-rail-hero .news-title { font-size: 19px; margin-bottom: 8px; }
.news-rail-hero .news-title,
.news-rail-hero .news-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-rail-hero .news-title { -webkit-line-clamp: 2; }
.news-rail-hero .news-body  { -webkit-line-clamp: 2; font-size: 14px; }
.news-rail-hero .news-cta-row { margin-top: 14px; }
.news-rail-hero .news-progress { margin-top: 14px; }
.news-rail-hero .news-dots-row { margin-top: 12px; }
.news-rail-hero .news-play-disc { width: 54px; height: 54px; }
.news-rail-hero .news-play-disc svg { width: 21px; height: 21px; }

@media (max-width: 860px) {
  .news-card { grid-template-columns: minmax(0, 1fr); }
  .news-media video,
  .news-media img,
  .news-media iframe { aspect-ratio: 16 / 9; height: auto; min-height: 0; }

  /* Stacked, the hero card no longer has to match a column beside it, so the
     height cap and the tight clamps come off. */
  .news-rail-hero .news-media video,
  .news-rail-hero .news-media img,
  .news-rail-hero .news-media iframe { max-height: none; }
  .news-rail-hero .news-title { -webkit-line-clamp: 3; }
  .news-rail-hero .news-body  { -webkit-line-clamp: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .news-track { transition: none; }
  .news-slide { opacity: 1; }
}