/* Step 6 — Visual/layout fidelity polish */

/* Keep the existing design system intact while making its spacing and type scale
   down more naturally between the existing Tailwind breakpoints. */
@media (max-width: 639px) {
  .font-display.text-4xl {
    font-size: clamp(2rem, 9vw, 2.5rem);
    line-height: 1.02;
  }

  .font-display.text-3xl {
    font-size: clamp(1.75rem, 7.5vw, 2.1rem);
    line-height: 1.08;
  }

  /* The original 5rem-ish section rhythm is visually heavy on narrow phones. */
  main section > .mx-auto[class*="py-20"],
  main section > .mx-auto[class*="py-16"] {
    padding-top: clamp(3.5rem, 12vw, 5rem);
    padding-bottom: clamp(3.5rem, 12vw, 5rem);
  }

  /* Hero media remains prominent without consuming most of a phone viewport. */
  .h-\[31rem\],
  .min-h-\[31rem\] {
    min-height: 0;
  }

  .h-\[31rem\] {
    height: clamp(20rem, 76vw, 28rem);
  }

  .min-h-\[31rem\] {
    min-height: clamp(20rem, 76vw, 28rem);
  }

  .group.bg-ink.relative.min-h-\[34rem\] {
    min-height: clamp(24rem, 105vw, 34rem);
  }

  /* Avoid cramped two-column remnants if a component is narrower than expected. */
  [class*="grid-cols-\["] {
    min-width: 0;
  }

  /* Make tap targets easier to use without changing desktop dimensions. */
  header nav a,
  header nav button,
  header button {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* Smoothly bridge the jump from phone spacing to the desktop composition. */
  main section > .mx-auto[class*="py-20"],
  main section > .mx-auto[class*="py-24"],
  main section > .mx-auto[class*="py-28"] {
    padding-top: clamp(4.5rem, 9vw, 6rem);
    padding-bottom: clamp(4.5rem, 9vw, 6rem);
  }
}

/* Prevent flex/grid children with long content from establishing an oversized
   intrinsic width. This is intentionally scoped to layout containers. */
main .flex > *,
main .grid > * {
  min-width: 0;
}

/* Preserve image composition when an image is used as a visual card background. */
main img.object-cover {
  max-width: none;
  width: 100%;
}

/* Step 7 — final polish and accessibility safeguards */
html.fallback-menu-open,
html.fallback-menu-open body { overflow-x: hidden; }

.fallback-submenu { min-width: 15rem; }
.fallback-mobile-menu summary::-webkit-details-marker { display: none; }
.fallback-mobile-menu a,
.fallback-submenu a { text-decoration: none; }

header nav a:focus-visible,
header nav button:focus-visible,
.fallback-mobile-menu a:focus-visible,
.fallback-mobile-menu summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  header { isolation: isolate; }
  .fallback-mobile-menu { width: 100%; max-width: 100vw; }
}

@media (max-width: 639px) {
  main { overflow: clip; }
  header .mx-auto { min-height: 4.5rem; }
  header img { max-height: 4rem; }
  main section { max-width: 100%; }
  button, a { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  header { position: static !important; }
  .fallback-mobile-menu, .fallback-submenu { display: none !important; }
}

.fallback-mobile-back {
  min-height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.fallback-mobile-back:hover { background: rgba(255,255,255,.05); }
@media (min-width: 1024px) { .fallback-mobile-back { display: none; } }