/* News reading on phones: full titles, swipeable lead stories, photos on the left. */
.carousel-controls { display: none; }
@media (max-width: 650px) {
  .lead-stories { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px 0 24px; }
  .lead-side { display: contents; }
  .lead-main, .lead-side article, .lead-side article + article { display: flex; flex-direction: column; min-width: 0; gap: 0; margin: 0; padding: 0; border: 0; }
  .lead-main-image, .lead-side-image { order: 0; width: 100%; flex: none; grid-row: auto; border-radius: 3px; }
  .lead-main-image img, .lead-side-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .lead-main h1, .lead-side h2 { order: 1; margin: 12px 0 10px; font: 700 25px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
  .lead-kicker { order: 3; margin: 0 0 5px; font-size: 11px; }
  .lead-main .lead-meta, .lead-side .lead-meta { order: 4; margin: 0; color: #737e8c; font-size: 12px; line-height: 1.4; }
  .lead-main p, .lead-side p { display: none; }
  .lead-main .lead-deck, .lead-side .lead-deck { order: 2; margin: 0 0 10px; color: #586675; font: 16px/1.4 Arial, sans-serif; letter-spacing: normal; overflow: hidden; }
  .lead-card .lead-deck[data-mobile-lines] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lead-deck-lines); }
  .full-title { display: inline; }
  .short-title { display: none; }

  .story, .story.featured { grid-template-columns: 96px minmax(0, 1fr); gap: 7px 13px; }
  .story-image { grid-column: 1; grid-row: 1 / span 2; }
  .story-image img, .featured .story-image img { width: 96px; height: 72px; object-fit: cover; }
  .story time { grid-column: 2; grid-row: 1; flex-wrap: wrap; gap: 4px 8px; }
  .story-copy { grid-column: 2; grid-row: 2; }
  .story time .date { font-size: 11px; }
  .story time .clock { font-size: 13px; }
  .story h3, .story.featured h3 { font-size: 17px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }

  .lead-stories[data-mobile-layout="carousel"] { display: flex; align-items: stretch; width: calc(100% + 16px); gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 16px 16px 0 0; border-bottom: 0; scroll-snap-type: x mandatory; scroll-padding-left: 0; overscroll-behavior-x: contain; scrollbar-width: none; }
  .lead-stories[data-mobile-layout="carousel"]::-webkit-scrollbar { display: none; }
  .lead-stories[data-mobile-layout="carousel"] .lead-card { flex: 0 0 calc(100% - 16px); min-height: var(--lead-card-height, 0px); scroll-snap-align: start; scroll-snap-stop: always; }
  .lead-stories[data-mobile-count="1"] { width: 100%; padding-right: 0; }
  .lead-stories[data-mobile-count="1"] .lead-card { flex-basis: 100%; }
  .lead-stories[data-mobile-layout="carousel"] + .carousel-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .carousel-count { color: #737e8c; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .carousel-dots { display: flex; justify-content: center; }
  .carousel-controls button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; background: transparent; color: #111417; cursor: pointer; }
  .carousel-dots button::after { content: ''; width: 6px; height: 6px; border-radius: 9px; background: #c5cbd1; transition: width .16s ease; }
  .carousel-dots button[aria-current="true"]::after { width: 20px; background: var(--red); }
  .carousel-arrows { display: flex; }
  .carousel-arrows button { font-size: 22px; }
  .carousel-arrows button:disabled { color: #c5cbd1; cursor: default; }
  .carousel-controls button:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; border-radius: 4px; }
}
@media (max-width: 360px) {
  .story, .story.featured { grid-template-columns: 88px minmax(0, 1fr); gap: 7px 12px; }
  .story-image img, .featured .story-image img { width: 88px; height: 70px; }
  .lead-main h1, .lead-side h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .carousel-dots button::after { transition: none; } }