/* ============================================================
   Mobile usability fixes — readability + tap targets
   Loaded site-wide. Mobile-only (≤760px).
   ============================================================ */
@media (max-width: 760px) {
  /* Unified footer — used by index, rome, calhoun, locations */
  .sfoot__nav a {
    font-size: .72rem !important;
    letter-spacing: .26em !important;
    line-height: 1.4;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .25rem 0;
  }
  .sfoot__loc-addr { font-size: .82rem !important; line-height: 1.7 !important; }
  .sfoot__fine { font-size: .62rem !important; letter-spacing: .2em !important; }

  /* Homepage CTA inline links (Reserve / Visit studio / studio hours / pedi back) */
  .menu-note a,
  .house-cta,
  .pedi-row__back,
  .nav-reserve {
    font-size: .74rem !important;
    letter-spacing: .26em !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .25rem 0;
  }

  /* Rome / Calhoun location detail links */
  .location-detail a,
  a.reserve-cta,
  .reserve-cta {
    font-size: .78rem !important;
    letter-spacing: .22em !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .35rem 0;
  }

  /* Atelier filter Clear button + category chips — readable + 44px tap */
  .atl-filter__clear {
    font-size: .72rem !important;
    letter-spacing: .2em !important;
    min-height: 44px !important;
    padding: .6rem 0 !important;
  }
  .atl-chip {
    font-size: .82rem !important;
    padding: .55rem 1rem !important;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
  .atl-chip--edit { font-size: 1rem !important; }

  /* Blog category filter buttons */
  .cat {
    font-size: .72rem !important;
    letter-spacing: .18em !important;
    padding: .7rem 1.1rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Color swatches: keep visual size, expand hit target */
  .atl-sw { position: relative; }
  .atl-sw::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Rome / Calhoun action buttons */
  .btn, .fbtn {
    font-size: .74rem !important;
    letter-spacing: .22em !important;
    padding: 1rem 1.6rem !important;
    min-height: 44px;
  }

  /* Homepage visit-card action buttons */
  .vbtn, .vbtn--solid, .vbtn--ghost {
    font-size: .74rem !important;
    letter-spacing: .2em !important;
    min-height: 44px !important;
    padding: .85rem 1.2rem !important;
  }

  /* Blog footer link */
  .bfoot, .bfoot a {
    font-size: .74rem !important;
    letter-spacing: .2em !important;
  }

  /* Footer location name + tel — bump tap height */
  .sfoot__loc-name, .sfoot__loc-tel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Rome / Calhoun book buttons */
  .book-btn {
    font-size: .74rem !important;
    letter-spacing: .2em !important;
    min-height: 48px !important;
    padding: 1rem 1.4rem !important;
  }

  /* Homepage reserve button + house toggle */
  .reserve-btn {
    font-size: .82rem !important;
    letter-spacing: .3em !important;
    padding: 1.1rem 2.6rem !important;
  }
  .house-toggle button {
    font-size: .76rem !important;
    letter-spacing: .26em !important;
    padding: .9rem 1.4rem !important;
    min-height: 44px;
  }

  /* Blog featured-post body anchor — ensure parent <a> renders tall enough */
  .feat__body a {
    display: inline-block;
    padding: .5rem 0;
  }


  .readlink {
    font-size: .82rem !important;
    letter-spacing: .12em !important;
    padding: .55rem 0 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .card .readlink { font-size: .74rem !important; }

  /* Homepage vcard phone link — make tap target 44px */
  .vcard__detail a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .35rem 0;
  }
}

/* ============================================================
   Color contrast fixes (all viewports) — WCAG AA on ivory bg.
   Default taupe (#A99B8C) ≈ 2.5:1; bumped to deeper warm grey.
   ============================================================ */
.eyebrow,
.masthead .eyebrow,
.masthead .lede,
.atl-filter__label,
.atl-eyebrow,
.atl-lede,
.atl-caption__by,
.atl-caption__count,
.atl-hint,
.atl-filter__clear,
.bnav__home,
.cat {
  color: #6f6253 !important; /* ~5.1:1 on #F7F4EF */
}
.cat.on { color: var(--ivory) !important; }
.atelier--dark .atl-eyebrow,
.atelier--dark .atl-lede,
.atelier--dark .atl-caption__by,
.atelier--dark .atl-caption__count,
.atelier--dark .atl-filter__label,
.atelier--dark .atl-filter__clear,
.atelier--dark .atl-hint {
  color: #d6cab9 !important; /* keep light variant readable on dark */
}
/* Unified footer (.sfoot) sits on black — needs LIGHT text */
.sfoot__fine {
  color: #c9bba6 !important; /* ~6.0:1 on #000 */
}
/* Blog footer sits on ivory — needs DARK text */
.bfoot { color: #6f6253 !important; }
.bfoot a { color: #6b4f2c !important; } /* deeper gold for ≥4.5:1 */