/* Shared responsive rules for news and video; no separate mobile content. */
:root {
  --tap-size: 2.75rem;
  --card-padding: clamp(1rem, 2.2vw, 1.75rem);
}
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.intro, .featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.intro-copy, .card-body, .video-card, .section-top > *, .brand > span { min-width: 0; }
.card-body, .featured .card-body, .video-card .card-body { padding: var(--card-padding); }
.intro-copy, .card-body, .section-top, footer { overflow-wrap: anywhere; }
.nav { min-height: 4.2rem; height: auto; }
.nav-tab { min-height: 4.2rem; }
.nav-note { flex-shrink: 0; }
.filter, .tag, .empty button {
  min-height: var(--tap-size);
  min-width: var(--tap-size);
  max-width: 100%;
  padding: .625rem .875rem;
  font-size: .875rem;
}
.filters, .card-tags { gap: .5rem; }
.card-links, .card-meta, .section-top { flex-wrap: wrap; }
.card-links { gap: .5rem 1rem; }
.card-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  max-width: 100%;
  padding-block: .5rem;
  font-size: .875rem;
}
.section-top h2 { font-size: clamp(1.15rem, 2.3vw, 1.5625rem); }
.news-card h3, .featured h3 { font-size: clamp(1.15rem, 1.75vw, 1.5625rem); }
.video-card h3 { font-size: clamp(1.125rem, 1.5vw, 1.25rem); }
.intro p, .news-card p, .video-card p { font-size: 1rem; }
.intro h1 { font-size: clamp(1.75rem, 3.1vw, 2.8125rem); }
.intro-sign, .nav-note, footer p { font-size: .875rem; }
.video-player { width: 100%; min-width: 0; aspect-ratio: 16 / 9; }
.video-player iframe { max-width: 100%; }
.news-card, .video-card { scroll-margin-top: 1.5rem; }
footer { flex-wrap: wrap; }

/* Tablet: two news columns, with comfortably sized video players in portrait. */
@media (max-width: 65.625rem) {
  #feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured { display: flex; grid-column: auto; }
  .featured .cover-wrap { height: auto; min-height: 0; aspect-ratio: 1.65; }
  .brand { gap: .75rem; letter-spacing: -.15rem; }
}
@media (max-width: 56.25rem) {
  #feed.video-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .nav-note { font-size: 0; gap: 0; }
  .intro h1 { letter-spacing: -.06rem; }
}

/* Phone and reflow at browser zoom: one column and wrapping controls. */
@media (max-width: 40.625rem) {
  .wrap { width: calc(100% - 2rem); }
  #feed, #feed.video-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .intro { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .intro-copy { padding: 1.25rem; }
  .intro-art { height: clamp(10rem, 45vw, 14rem); }
  .brand { font-size: clamp(1.75rem, 9.5vw, 3.8rem); gap: .5rem; letter-spacing: -.06rem; }
  .peace { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .brand-star { display: none; }
  .nav, .nav-tab { min-height: 3.75rem; }
  .nav-tab { font-size: 1.0625rem; }
  .tabs { gap: 1.5rem; }
  .section-top { gap: .5rem 1rem; }
  .section-top h2 { flex-basis: 100%; }
  .result-count { font-size: .8125rem; }
  .filters { padding-block: 1rem 1.25rem; }
  .card-meta { font-size: .75rem; }
  .intro-sign { margin-top: 1rem; }
}
@media (hover: none) {
  .news-card:hover .cover { transform: none; }
}