/*
 * Brier Sound public responsive readability layer.
 *
 * Newsroom responsive behavior lives only in /admin/admin.css.
 */

@media (max-width: 1024px) {
  :root {
    --gutter: clamp(20px, 4vw, 28px);
  }

  .utility-bar {
    font-size: 12px;
    letter-spacing: .065em;
  }

  .utility-bar .shell {
    min-height: 40px;
    gap: 12px;
  }

  .site-header .shell {
    padding-block: 18px 16px;
  }

  .site-header.compact .shell {
    padding-block: 14px;
  }

  .site-nav a,
  .text-button {
    padding-block: 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  .section-rule,
  .metadata {
    font-size: 12px;
    line-height: 1.55;
  }

  .home-main {
    padding-block: 26px 56px;
  }

  .lead-layout {
    gap: 28px;
    padding: 24px 0 32px;
  }

  .lead-story .dek {
    font-size: 19px;
    line-height: 1.58;
    color: var(--text);
  }

  .feed-item p:not(.story-preview-meta) {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
  }

  .empty-state {
    font-size: 16px;
    line-height: 1.6;
  }

  .empty-state p {
    color: var(--text);
  }

  .story-main .dek {
    color: var(--text);
  }

  .context-block h2 {
    font-size: 11px;
  }

  .context-block p,
  .context-block li {
    font-size: 14px;
    line-height: 1.6;
  }

  .site-footer h2 {
    font-size: 12px;
  }

  .site-footer p,
  .site-footer a {
    font-size: 14px;
    line-height: 1.65;
  }

  .site-footer .utility-footer {
    font-size: 11px;
    line-height: 1.55;
  }

  .outline-button,
  .solid-button {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 11px;
  }
}

@media (max-width: 1024px) and (pointer: coarse) {
  .site-header .shell,
  .site-header.compact .shell {
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }

  .site-nav {
    justify-content: flex-start;
  }

  .story-layout {
    grid-template-columns: 1fr;
  }

  .story-context {
    position: static;
  }

  .site-footer .resource-layer {
    grid-template-columns: 1fr;
  }

  .site-footer .utility-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 14px;
  }
}

@media (max-width: 760px) {
  .utility-cluster {
    gap: 10px;
  }

  .site-header .shell {
    gap: 12px;
    padding-block: 18px 16px;
  }

  .masthead {
    font-size: clamp(31px, 9vw, 38px);
    line-height: 1;
  }

  .site-header.compact .masthead {
    font-size: 28px;
  }

  .site-nav {
    gap: 18px;
  }

  .home-main {
    padding-block: 24px 48px;
  }

  .lead-layout {
    gap: 24px;
    padding: 22px 0 30px;
  }

  .lead-story h1 {
    margin: 14px 0 16px;
    font-size: clamp(36px, 10.5vw, 44px);
    line-height: 1.06;
  }

  .lead-story .dek {
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.62;
  }

  .feed-section {
    padding-top: 30px;
  }

  .feed-list {
    margin-top: 14px;
  }

  .feed-item {
    gap: 10px;
    padding: 22px 0;
  }

  .feed-item h2 {
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 1.18;
  }

  .empty-state {
    padding: 30px 0;
  }

  .empty-state h2 {
    margin-bottom: 10px;
    font-size: 21px;
  }

  .story-page {
    padding-block: 24px 52px;
  }

  .story-layout {
    gap: 32px;
  }

  .story-main h1 {
    margin: 14px 0 18px;
    font-size: 36px;
    line-height: 1.1;
  }

  .story-main .dek {
    font-size: 18px;
    line-height: 1.62;
  }

  .story-copy {
    margin-top: 28px;
  }

  .story-copy section {
    padding: 24px 0;
  }

  .story-copy p {
    font-size: 17px;
    line-height: 1.65;
  }

  .context-block {
    padding: 18px 0;
  }

  .content-page {
    padding-block: 28px 52px;
  }

  .content-page h1 {
    font-size: 36px;
    line-height: 1.08;
  }

  .content-page h2 {
    font-size: 14px;
  }

  .content-page p,
  .content-page li {
    font-size: 17px;
    line-height: 1.65;
  }

  .site-footer {
    margin-top: 16px;
  }

  .site-footer .resource-layer {
    gap: 18px;
    padding: 24px 0;
  }
}