/* Mobile, narrow-screen, touch-device, and reduced-motion overrides. */
@media (max-width: 740px) {
  .nav {
    width: min(var(--max), calc(100% - 32px));
    min-height: 66px;
  }

  .brand img {
    width: 54px;
    height: 34px;
  }

  .brand strong {
    font-size: 0.92rem;
  }

  .brand small {
    font-size: 0.64rem;
  }

  .account-button {
    min-height: 44px;
    padding: 12px;
  }

  .account-button-icon {
    width: 24px;
    height: 24px;
  }

  .quick-info,
  .section,
  .split,
  .contact-inner,
  .footer {
    width: min(var(--max), calc(100% - 32px));
  }

  .home-hero {
    row-gap: 22px;
    column-gap: 0;
    padding: 0 0 30px;
    background:
      linear-gradient(180deg, rgba(223, 244, 241, 0.38), rgba(255, 247, 227, 0.58)),
      var(--paper);
  }

  .hero-photo-frame {
    aspect-ratio: 4 / 5;
  }

  .hero-photo-dots {
    right: 12px;
    bottom: 12px;
  }

  .hero-intro-copy {
    width: 100%;
    margin-top: -26px;
    padding: 20px;
  }

  .hero-board {
    width: 100%;
    padding: 24px;
    border-width: 8px;
  }

  .hero-board .hero-board-cards {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero-board-cards .quick-note,
  .hero-board-cards .quick-note:nth-child(2),
  .hero-board-cards .quick-note:nth-child(3),
  .hero-board-cards .quick-note:nth-child(4),
  .hero-board-cards .quick-note:nth-child(5) {
    width: auto;
    justify-self: stretch;
    grid-column: auto;
    min-height: 0;
    transform: none;
  }

  .hero-board .quick-info p {
    font-size: 0.92rem;
  }

  .quick-info .quick-note,
  .quick-info .quick-note:nth-child(2),
  .quick-info .quick-note:nth-child(3),
  .quick-info .quick-note:hover,
  .quick-info .quick-note:focus-visible {
    transform: none;
  }

  h1 {
    font-size: 2.45rem;
    line-height: 1.02;
  }

  .hero-intro-copy h1 {
    font-size: 1.98rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 2rem;
  }

  .hero-location-link {
    align-items: stretch;
    column-gap: 9px;
  }

  .hero-location-place {
    padding-left: 0;
  }

  .section,
  .split {
    padding: 64px 0;
  }

  .split,
  .media-strip,
  .director,
  #summer,
  .feature-alt,
  .programs,
  .resources,
  .info-columns,
  .closures,
  .updates,
  .events,
  .donate {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-top: 64px;
    padding-bottom: 64px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .split {
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    padding-right: 0;
    padding-left: 0;
  }

  .split > div:first-child,
  .split > div:last-child {
    grid-column: 2;
  }

  #summer {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  #summer .feature-copy {
    order: 2;
    padding: 24px;
  }

  #summer h2 {
    font-size: 1.88rem;
    line-height: 1.08;
  }

  #summer .flyer {
    order: 1;
    width: min(100%, 360px);
    padding: 10px;
  }

  .resource-grid,
  .info-columns,
  .program-grid,
  .update-grid,
  .event-grid,
  .photo-grid-spaces,
  .donate-gallery {
    grid-template-columns: 1fr;
  }

  .resource-card {
    min-height: 178px;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 10px 12px;
  }

  .resource-visual {
    width: 72px;
    height: 72px;
    border-radius: 14px;
  }

  .resource-visual svg {
    width: 62px;
    height: 62px;
  }

  .resource-card strong {
    font-size: 1.05rem;
  }

  .contact-form-paper {
    grid-template-columns: 1fr;
    padding: 24px 18px 22px;
  }

  .resource-grid > :last-child,
  .program-grid > :last-child,
  .update-grid > :last-child,
  .event-grid > :last-child {
    grid-column: auto;
  }

  .resource-grid > :last-child:nth-child(2n + 1),
  .resource-grid > :last-child:nth-child(3n + 1),
  .program-grid > :last-child:nth-child(2n + 1),
  .program-grid > :last-child:nth-child(3n + 1),
  .update-grid > :last-child:nth-child(2n + 1),
  .update-grid > :last-child:nth-child(3n + 1),
  .update-grid > :last-child:nth-child(4n + 1),
  .event-grid > :last-child:nth-child(2n + 1),
  .event-grid > :last-child:nth-child(3n + 1),
  .event-grid > :last-child:nth-child(4n + 1) {
    grid-column: auto;
  }

  .program-grid > :last-child {
    width: auto;
    justify-self: stretch;
  }

  .info-panel.enrollment-form-panel {
    grid-column: auto;
  }

  .info-panel.reading-panel,
  .info-panel.support-flyer-panel,
  .info-panel.transportation-panel,
  .info-columns > .program-basics-panel:last-child {
    grid-column: auto;
  }

  .info-panel.support-flyer-panel {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .support-flyer-copy {
    padding-top: 20px;
  }

  .info-flyer-media {
    justify-self: center;
    width: min(100%, 360px);
  }

  .info-flyer-media img,
  .info-flyer-media .story-file-preview {
    max-height: 420px;
  }

  .info-panel.enrollment-form-panel {
    padding: 16px;
    background:
      linear-gradient(90deg, rgba(200, 63, 61, 0.12) 0 2px, transparent 2px 100%),
      repeating-linear-gradient(0deg, transparent 0 30px, rgba(13, 111, 167, 0.08) 30px 31px),
      linear-gradient(180deg, #fffef8, #f7fbff);
    background-position: 28px 0, 0 8px, 0 0;
    border-top-width: 4px;
    border-radius: 16px;
  }

  .enrollment-form-panel::before {
    display: none;
  }

  .enrollment-form-heading {
    display: grid;
    gap: 8px;
    max-width: none;
    padding: 2px 2px 4px;
  }

  .enrollment-form-heading h2 {
    margin: 0;
    font-size: 1.72rem;
    line-height: 1.08;
  }

  .enrollment-form-heading p:not(.section-kicker) {
    font-size: 0.94rem;
    line-height: 1.48;
  }

  .enrollment-builder {
    gap: 14px;
  }

  .enrollment-fieldset {
    padding: 16px 14px 14px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(16, 38, 61, 0.08);
  }

  .enrollment-fieldset:focus-within {
    border-color: rgba(13, 111, 167, 0.28);
    box-shadow: 0 12px 26px rgba(16, 38, 61, 0.1);
  }

  .enrollment-fieldset legend {
    width: calc(100% + 4px);
    margin-left: -2px;
    padding: 0 2px 10px;
    gap: 9px;
    font-size: 0.94rem;
    line-height: 1.15;
  }

  .enrollment-fieldset legend span {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    font-size: 0.85rem;
  }

  .guardian-cards,
  .enrollment-grid,
  .enrollment-grid-3,
  .enrollment-grid-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .guardian-card,
  .mini-form-card {
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
  }

  .guardian-card h3,
  .mini-form-card strong {
    font-size: 1rem;
  }

  .enrollment-builder label {
    gap: 6px;
    font-size: 0.78rem;
  }

  .enrollment-builder input,
  .enrollment-builder textarea {
    min-height: 44px;
    padding: 10px 11px;
    font-size: 16px;
  }

  .date-field-shell {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .date-picker-open {
    min-height: 44px;
  }

  .signature-grid,
  .signature-entry-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .check-option {
    min-height: 44px;
    align-items: flex-start;
    padding: 10px 11px;
    line-height: 1.35;
  }

  .check-option:has(input:checked) {
    color: var(--navy) !important;
    background: rgba(223, 244, 241, 0.8);
    border-color: rgba(47, 109, 85, 0.28);
  }

  .pickup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pickup-grid label {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .span-2,
  .span-3 {
    grid-column: auto;
  }

  .permission-list {
    gap: 10px;
    margin-top: 14px;
  }

  .permission-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 12px;
  }

  .permission-row > span {
    grid-column: 1 / -1;
    color: var(--navy);
    font-size: 0.93rem;
    line-height: 1.3;
  }

  .permission-row label {
    min-height: 40px;
    padding: 8px;
    font-size: 0.86rem;
  }

  .permission-row label:has(input:checked) {
    color: var(--navy);
    background: rgba(223, 244, 241, 0.84);
    border-color: rgba(13, 111, 167, 0.28);
    box-shadow: inset 0 0 0 1px rgba(13, 111, 167, 0.08);
  }

  .permission-note {
    margin: -2px 0 2px;
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .signature-ack {
    font-size: 0.82rem;
  }

  .enrollment-actions {
    padding: 12px;
    background: rgba(255, 255, 255, 0.66);
    border-radius: 14px;
  }

  .enrollment-status {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .enrollment-preview {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border-left-width: 4px;
    border-radius: 14px;
  }

  .enrollment-preview-copy h3 {
    font-size: 1.22rem;
  }

  .enrollment-preview-copy ol {
    gap: 8px;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .enrollment-preview-viewer {
    height: min(68vh, 560px);
    min-height: 480px;
    border-radius: 12px;
  }

  .enrollment-preview-stage {
    min-height: 0;
    border-radius: 0 0 12px 12px;
  }

  .enrollment-preview-toolbar {
    border-radius: 12px 12px 0 0;
  }

  .info-columns > .program-basics-panel:last-child .detail-list {
    grid-template-columns: 1fr;
  }

  .program-basics-panel .detail-list li {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 84px;
    padding: 12px;
  }

  .program-basics-panel .basic-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .program-basics-panel .basic-icon svg {
    width: 38px;
    height: 38px;
  }

  .program-basics-panel .basic-copy span {
    text-align: left;
  }

  .director-card,
  .contact-card,
  .info-panel,
  .program-card,
  .resource-card,
  .donate-copy,
  .stacked-copy {
    padding: 22px;
  }

  .director .contact-card {
    padding: 46px 22px 24px;
  }

  .director .contact-card h3,
  .director .contact-card p {
    padding-left: 32px;
    font-size: 0.94rem;
  }

  .director .contact-card h3 {
    font-size: 1.08rem;
  }

  .director .contact-card p:last-child a {
    font-size: 0.78rem;
  }

  .donate .donate-copy {
    padding: 0;
  }

  .donate::before {
    display: none;
  }

  .donate-impact {
    grid-template-columns: 1fr;
  }

  .donate-impact article {
    min-height: auto;
  }

  .donate-media-panel {
    justify-items: center;
  }

  .donate-note,
  .donate-gallery {
    width: 100%;
  }

  .donate-gallery {
    transform: none;
  }

  .program-card {
    min-height: auto;
  }

  .photo-grid img {
    aspect-ratio: 16 / 11;
  }

  .photo-grid-spaces img {
    aspect-ratio: var(--space-aspect, 4 / 3);
    object-fit: contain;
  }

  .button {
    width: 100%;
  }

  .pdf-modal {
    --modal-close-size: 40px;
    width: var(--modal-vw);
    height: var(--modal-vh);
  }

  .pdf-modal-shell {
    grid-template-rows: 60px auto minmax(0, 1fr);
  }

  .pdf-modal-header {
    min-height: 60px;
    padding:
      var(--modal-close-gap-block)
      calc(var(--modal-close-size) + var(--modal-close-gap-inline) + 12px)
      8px
      max(14px, env(safe-area-inset-left));
  }

  .pdf-modal-header h2 {
    font-size: 1rem;
  }

  .pdf-modal-header .section-kicker {
    font-size: 0.66rem;
  }

  .pdf-close {
    width: var(--modal-close-size);
    height: var(--modal-close-size);
  }

  .pdf-toolbar {
    gap: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .pdf-nav-button,
  .pdf-download,
  .viewer-zoom-button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 0.72rem;
  }

  .viewer-zoom-controls {
    --viewer-zoom-button-size: 34px;
    --viewer-zoom-label-width: 48px;
    --viewer-zoom-reset-width: 44px;
    gap: 4px;
    padding: 3px;
  }

  .viewer-zoom-button {
    width: var(--viewer-zoom-button-size);
    min-width: var(--viewer-zoom-button-size);
  }

  .viewer-zoom-reset {
    width: var(--viewer-zoom-reset-width);
    min-width: var(--viewer-zoom-reset-width);
  }

  .viewer-zoom-label {
    width: var(--viewer-zoom-label-width);
    min-width: var(--viewer-zoom-label-width);
  }

  .viewer-zoom-label {
    font-size: 0.7rem;
  }

  .pdf-page-label {
    min-width: 76px;
    font-size: 0.72rem;
  }

  .pdf-stage {
    padding: 10px;
  }

  .pdf-page-canvas {
    border-radius: 6px;
  }

  .pdf-status {
    right: 12px;
    bottom: 10px;
    left: 12px;
    font-size: 0.84rem;
  }

  .media-modal {
    --modal-close-size: 40px;
    width: var(--modal-vw);
    height: var(--modal-vh);
  }

  .media-modal-shell {
    grid-template-rows: 60px minmax(0, 1fr);
  }

  .media-modal-header {
    min-height: 60px;
    padding:
      var(--modal-close-gap-block)
      calc(var(--modal-close-size) + var(--modal-close-gap-inline) + 12px)
      8px
      max(14px, env(safe-area-inset-left));
  }

  .media-modal-header h2 {
    font-size: 1rem;
  }

  .media-modal-header .section-kicker {
    font-size: 0.66rem;
  }

  .media-close {
    width: var(--modal-close-size);
    height: var(--modal-close-size);
  }

  .media-modal-body {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  .media-modal--details .media-modal-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .media-modal--details .media-stage {
    padding: 12px;
  }

  .media-stage {
    padding: 12px;
  }

  .media-nav {
    width: 42px;
    height: 48px;
  }

  .media-nav-prev {
    left: var(--media-nav-prev-left, max(10px, env(safe-area-inset-left)));
  }

  .media-nav-next {
    right: var(--media-nav-next-right, max(10px, env(safe-area-inset-right)));
  }

  .media-counter {
    right: var(--media-counter-right, max(10px, env(safe-area-inset-right)));
    bottom: var(--media-counter-bottom, 10px);
  }

  .media-zoom-controls {
    bottom: var(--media-zoom-controls-bottom, max(10px, env(safe-area-inset-bottom)));
  }

  .media-stage img {
    max-height: calc(var(--modal-vh, 100dvh) - 84px);
  }

  .media-modal--details .media-stage img {
    max-height: min(56dvh, calc(var(--modal-vh, 100dvh) - 300px));
  }

  .media-details {
    max-height: min(32dvh, 250px);
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    overflow: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
  }

  .footer {
    min-height: 110px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .hero-intro-copy .eyebrow {
    padding-left: 12px;
    border-left-width: 4px;
    font-size: 0.72rem;
  }

  .hero-location-link {
    column-gap: 7px;
  }
}

@media (max-width: 430px) {
  .info-panel.enrollment-form-panel {
    padding: 12px;
    border-radius: 14px;
  }

  .enrollment-form-heading h2 {
    font-size: 1.5rem;
  }

  .enrollment-form-heading p:not(.section-kicker) {
    font-size: 0.9rem;
  }

  .enrollment-fieldset {
    padding: 14px 11px 12px;
  }

  .enrollment-fieldset legend {
    font-size: 0.9rem;
  }

  .guardian-card,
  .mini-form-card {
    padding: 12px;
  }

  .pickup-grid {
    grid-template-columns: 1fr;
  }

  .permission-row {
    padding: 10px;
  }

  .enrollment-preview-viewer {
    height: min(62vh, 520px);
    min-height: 410px;
  }
}

@media (hover: none) {
  .quick-info .quick-note:hover,
  .quick-info .quick-note:focus-visible,
  .program-card:hover,
  .calendar-frame:hover,
  .photo-grid figure[role="button"]:hover,
  .flyer[role="button"]:hover,
  .donate-gallery[role="button"]:hover,
  .update-card:hover,
  .event-card:hover,
  .resource-card:hover,
  .button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-photo-dot {
    transition: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .contact-paper-flight,
  .contact-paper-half--bottom,
  .contact-paper-half--bottom::after,
  .contact-envelope-back,
  .contact-envelope-front,
  .contact-envelope-flap,
  .contact-envelope-flap::before,
  .contact-success-panel {
    animation: none !important;
  }

  .contact-paper-flight {
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--contact-paper-slide-final, 96px)) scale(1);
  }

  .contact-paper-half--bottom {
    transform: rotateX(-176deg);
  }

  .contact-envelope-back,
  .contact-envelope-front,
  .contact-envelope-flap {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .contact-envelope-flap::before {
    transform: rotateX(0deg);
  }

  .contact-success-panel {
    opacity: 1;
    transform: none;
  }
}