/* Smartphone-first usability improvements */
@media (max-width: 640px) {
  html {
    font-size: 16px;
    scroll-padding-top: 88px;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.8;
  }

  p,
  li,
  a,
  span,
  small {
    line-break: strict;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  small {
    font-size: 1rem;
  }

  .container {
    width: min(100% - 32px, 1120px);
  }

  .site-header {
    top: 8px;
  }

  .header-inner {
    gap: 10px;
    min-height: 64px;
    padding: 6px 8px 6px 18px;
  }

  .logo {
    font-size: 1.1rem;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav {
    gap: 8px;
  }

  .nav a.nav-cta,
  .button,
  .text-link,
  .footer-links a {
    min-height: 48px;
    font-size: 1rem;
    line-height: 1.35;
  }

  .nav a.nav-cta {
    color: #fff;
    background: #b96249;
    border: 2px solid #b96249;
    padding: 10px 16px;
    box-shadow: 0 8px 20px rgba(115, 58, 43, 0.25);
  }

  .hero {
    padding-top: 104px;
    padding-bottom: 64px;
  }

  .hero-grid {
    gap: 34px;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.5rem);
    line-height: 1.28;
    letter-spacing: 0.04em;
  }

  .hero-lead,
  .intro-body,
  .section-head > p,
  .card p,
  .experience-lead,
  .promise-copy > p,
  .visit-lead {
    font-size: 1rem;
    line-height: 1.95;
  }

  .hero-lead {
    margin-top: 24px;
  }

  .hero-actions {
    gap: 12px;
    margin-top: 28px;
  }

  .hero-actions .button,
  .dm-button,
  .cream-button {
    width: 100%;
    min-height: 56px;
  }

  .dm-button,
  .cream-button {
    color: #fff;
    background: #b96249;
    border-color: #b96249;
    box-shadow: 0 10px 24px rgba(115, 58, 43, 0.24);
  }

  .button.ghost {
    color: var(--green);
    background: #fff;
    border-width: 2px;
  }

  .teacher-note {
    gap: 8px;
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.65;
  }

  .teacher-note span {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
  }

  .real-logo-frame {
    border-radius: 24px;
  }

  section,
  .experience {
    padding: 72px 0;
  }

  .eyebrow,
  .card-number,
  .card h3 small,
  .card-meta,
  .experience-photo span,
  .teacher-panel > span,
  .official-photo > span,
  .menu-card > p,
  .space-shot > span small,
  .source-note,
  .calendar-kicker,
  .dm-help,
  .footer-logo small,
  .footer-bottom {
    font-size: 1rem;
    line-height: 1.6;
  }

  .intro-body strong,
  .value h3,
  .teacher-panel h3,
  .menu-card h3 {
    font-size: 1.15rem;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .card {
    min-height: 0;
    padding: 34px 26px;
    border-radius: 26px;
  }

  .card h3 {
    margin-top: 28px;
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .card p {
    margin-top: 20px;
  }

  .card-meta {
    position: static;
    min-height: 44px;
    margin-top: 28px;
    padding: 10px 14px;
    align-items: center;
  }

  .experience-grid {
    gap: 36px;
  }

  .experience-copy h2,
  .section-head h2,
  .promise-copy h2,
  .calendar-head h2,
  .visit h2 {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
    line-height: 1.5;
  }

  .detail-points div,
  .teacher-panel,
  .menu-card {
    padding: 22px 18px;
  }

  .detail-points span,
  .teacher-panel p,
  .menu-card li,
  .menu-card small,
  .value p,
  .calendar-legend,
  .open-dates span,
  .holiday-note,
  .info-list b,
  .info-list span,
  .closing-copy > span {
    font-size: 1rem;
    line-height: 1.75;
  }

  .text-link {
    width: 100%;
    justify-content: space-between;
    padding: 8px 2px;
  }

  .official-photo,
  .experience-photo,
  .space-shot,
  .official-calendar {
    border-radius: 24px;
  }

  .space-shot::after {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .space-shot > span {
    right: 20px;
    font-size: 1.5rem;
    line-height: 1.45;
  }

  .calendar-legend {
    gap: 12px;
  }

  .calendar-legend span {
    min-height: 36px;
  }

  .calendar-summary {
    padding: 28px 18px;
    border-radius: 24px;
  }

  .open-dates span {
    padding: 14px 8px;
  }

  .time-slots b {
    font-size: 1.1rem;
  }

  .visit {
    padding-bottom: 72px;
  }

  .visit-box {
    border-radius: 28px;
    padding: 42px 22px;
  }

  .info-list li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }

  .closing-brand {
    min-height: 0;
    gap: 32px;
    padding: 64px 16px;
  }

  .beige-logo-crop {
    border-radius: 24px;
  }

  .closing-copy p {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.6;
  }

  .footer-top {
    gap: 24px;
  }

  .footer-links {
    width: 100%;
    gap: 8px 16px;
  }

  .footer-links a {
    align-items: center;
    display: inline-flex;
  }
}

@media (min-width: 641px) {
  .nav a.nav-cta,
  .dm-button {
    background: #b96249;
    border-color: #b96249;
    color: #fff;
  }
}