/* Reading sizes are independent of the rem-based layout scale.
   Keep display/section heading sizes and authored <br> breaks unchanged.
   Screen-only rules leave the printable menu's established print layout intact. */
@media screen {
  :root {
    --reading-body: max(16px, 1rem);
    --reading-lead: max(16px, 1.125rem);
    --reading-small: max(14px, 0.875rem);
    --reading-control: max(15px, 1rem);
    --reading-caption: max(12px, 0.75rem);
  }

  body,
  .split-copy p,
  .home-features .split.reverse .split-copy p,
  .home-clients p,
  .home-experiences > div > p,
  .reviews > div > p,
  .social-section p,
  .private-home p,
  .step p,
  .menu-intro p,
  .legal-copy,
  .checkout-top p,
  .faq-item p {
    font-size: var(--reading-body);
  }

  .home-features .split-copy p,
  body[data-page="workshop"] .split-copy p,
  .event-section .split-copy p,
  .blog-section .split-copy p,
  .checkout-submit p,
  .extra-row p {
    font-size: var(--reading-lead);
  }

  .hero p {
    font-size: max(18px, 1.375rem);
  }

  .experience-card p,
  .review-card,
  .feature-cards p,
  .conference-grid p,
  .buffet-title p,
  .menu-item,
  .menu-request-bottom strong,
  .menu-request-bottom li,
  .menu-total,
  .order-values label,
  .order-values input,
  .extra-row label,
  .customer-type label,
  .order-subtotal,
  .cookie-settings,
  .cookie-banner p,
  .toast,
  .toast p {
    font-size: var(--reading-small);
  }

  .feature-cards p,
  .conference-grid p,
  .menu-item .price,
  .order-number {
    font-size: max(14px, 1.125rem);
  }

  .banner-copy p {
    font-size: var(--reading-lead);
  }

  .menu-item strong {
    font-size: max(14px, 1.125rem);
  }

  .review-card header,
  .faq-item summary {
    font-size: max(14px, 1rem);
  }

  .review-time,
  .review-card time {
    font-size: var(--reading-caption);
  }

  .btn,
  .home-features .btn,
  .checkout-top .btn,
  .login-section .btn {
    font-size: var(--reading-control);
  }

  .btn-small,
  .buffet-controls .btn,
  .menu-request-actions .btn,
  .cookie-actions .btn,
  .home-nav .nav-cta {
    font-size: var(--reading-small);
  }

  .home-nav,
  .checkout-link {
    font-size: max(14px, 1.125rem);
  }

  .desktop-menu a {
    font-size: max(16px, 1.125rem);
  }

  .field input:not([type="checkbox"]):not([type="radio"]),
  .field textarea,
  .field select,
  .field label:not(.error),
  .field .error,
  .form-error {
    font-size: var(--reading-small);
  }

  /* Footer text must not inherit the 12px desktop layout root: at a laptop
     width that made the former .75rem copy just 9px. */
  .site-footer,
  .footer-about p,
  .footer-company p,
  .footer-links ul {
    font-size: 14px;
    line-height: 1.5;
  }

  .footer-about p {
    max-width: none;
  }

  .site-footer h3 {
    font-size: 16px;
    line-height: 1.3;
  }

  .footer-form input,
  .footer-form textarea {
    font-size: 16px !important;
  }

  .footer-form .btn {
    font-size: 14px;
    min-height: 40px;
  }

  .footer-bottom {
    font-size: 12px;
    line-height: 1.5;
  }

  .footer-links .columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }

  .footer-company a {
    overflow-wrap: anywhere;
  }

  /* Small content labels, not the display/section headings. */
  .feature-cards h3,
  .conference-grid h3,
  .legal-copy h3 {
    font-size: max(14px, 1rem);
  }

  /* Keep each authored feature-heading line together in narrower columns,
     without nowrap, clipping, widening the grid, or JavaScript text fitting. */
  .home-features .split-copy {
    container-type: inline-size;
  }

  .home-features h2 {
    font-size: min(clamp(1.75rem, 1.875vw, 2.25rem), 6.4cqi);
  }
}

@media screen and (min-width: 1201px) {
  .top-strip a {
    font-size: max(12px, 0.875rem);
  }
}

@media screen and (min-width: 651px) {
  /* Keep the three link-group starts at the reference's relative positions.
     Let their row use available footer width so readable labels have room. */
  .footer-form {
    grid-row: 1;
    align-self: start;
  }

  .footer-links {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: minmax(216px, 23.5fr) minmax(280px, 27fr) minmax(
        0,
        49.5fr
      );
    column-gap: 0;
  }

  .footer-links > section {
    padding-right: 16px;
  }
}

@media screen and (min-width: 1400px) {
  .footer-layout {
    grid-template-columns: minmax(0, 40fr) minmax(0, 22fr) minmax(0, 34fr);
    column-gap: 2%;
    row-gap: 16px;
    align-items: start;
  }

  .footer-about p {
    line-height: 1.45;
  }

  .footer-form {
    grid-row: 1;
  }

  .footer-links {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: minmax(212px, 23.5fr) minmax(304px, 27fr) minmax(
        0,
        49.5fr
      );
    gap: 0;
  }

  .footer-links > section {
    padding-right: 20px;
  }

  .footer-links .columns {
    grid-template-columns: max-content max-content;
    column-gap: 12px;
  }

  .footer-about .brand {
    margin-bottom: 16px;
  }

  .footer-company p {
    margin-bottom: 18px;
  }

  .footer-form h3 {
    margin-bottom: 20px;
  }

  .footer-form .form-actions {
    margin-top: 12px;
  }
}

@media screen and (max-width: 1200px) {
  .home-features h2 {
    font-size: min(1.75rem, 6.4cqi);
  }
}

@media screen and (max-width: 650px) {
  .hero p {
    font-size: 18px;
  }

  .home-features h2 {
    font-size: min(1.125rem, 6.4cqi);
  }
}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
  .experience-card h3 {
    font-size: 1.3125rem;
  }
}