/* Tablet and phone overrides. Loaded after site.css.
   Breakpoints from the brief: 1120 (side padding 32), 900 (nav 72px, type
   steps down), 760 (phone layouts), 560 (side padding 16). */

@media (max-width: 1120px) {
  :root { --pad: 32px; }
  .nav__inner { padding: 0 32px; column-gap: 24px; }
  .nav__side--end { gap: 18px; }
  .split, .contactgrid, .a11y { gap: 48px; }
  .plan { gap: 40px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px 32px; padding: 56px 0 40px; }
  .footer__brand { grid-column: 1 / -1; }
  .explorer { grid-template-columns: 210px 280px 1fr; }
  .legal { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
  .resrow { grid-template-columns: 1fr 1.2fr; }
  .resrow .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 1000px) {
  .nav__phone { display: none; }
}

@media (max-width: 900px) {
  :root { --pad: 20px; --nav-h: 72px; }
  body { font-size: 15.5px; }
  h1 { font-size: clamp(32px, 8.6vw, 46px); }
  h2 { font-size: clamp(26px, 6.2vw, 34px); }
  .ctaband h2 { font-size: clamp(30px, 7vw, 40px); }
  h3, .plancard__top h2, .plan__detail h2, .resrow h2 { font-size: 26px; }
  .nav__inner { padding: 0 20px; column-gap: 12px; }
  .nav .wordmark { --wm: 21px; }
  .nav__util--res { display: none; }
  .nav__tour { min-height: 40px; padding: 8px 14px; font-size: 10.5px; letter-spacing: .16em; background: transparent; color: var(--ink); }
  .nav__tour:hover { color: var(--mist); }
  .nav--ink .nav__tour { color: var(--mist); }
  .nav--ink .nav__tour:hover { color: var(--ink); }
  .nav__word { font-size: 10.5px; }
  .menu__inner { padding: 96px 22px 34px; justify-content: flex-start; }
  .menu__link span { font-size: 26px; }
  .section { padding: 56px 0; }
  .pagehead { padding: 48px 0 40px; }
  .split, .contactgrid, .a11y, .plan { grid-template-columns: 1fr; gap: 32px; }
  .split__media { order: 2; }
  .split__media img, .media-fill { height: auto; aspect-ratio: 3 / 2; }
  .split__media--tall img { aspect-ratio: 4 / 5; max-height: 70svh; }
  .plans { grid-template-columns: 1fr; gap: 16px; }
  .feeblock, .feeblock .ledger { grid-template-columns: 1fr; }
  .feeblock .ledger__row:nth-child(2) { border-top: 0; }
  .disclaim, .ctabar .wrap { flex-direction: column; align-items: flex-start; gap: 22px; }
  .imgband { height: auto; overflow: visible; }
  .imgband > img { position: static; height: 52svh; }
  .imgband .wrap { padding: 0; }
  .glass { width: 100%; padding: 36px 20px 40px; background: var(--paper); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ctaband { padding: 64px 0; }
  .petband { padding: 56px 0; }
  .legal { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 64px; }
  .legal__index { position: static; }
  .legal__index details { border: 1px solid var(--rule); padding: 0 16px; }
  .legal__index details > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: 500; color: var(--ink); }
  .legal__index details > h2 { display: none; }
  .legal__index ol { border-top: 1px solid var(--rule); margin-bottom: 8px; }
  .a11y { padding: 56px 0; }
  .a11y h1 { font-size: clamp(30px, 7.6vw, 40px); }
  .resrow { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .resrow .btn { width: 100%; min-width: 0; margin-top: 8px; }
  .footer__col a, .footer__inline a, .footer__policy a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__col { gap: 0; }

  /* Neighborhood: map first, then wrapping chips, then the list. */
  .explorer { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .explorer__rail { display: contents; }
  .explorer__head { order: 1; padding: 28px 20px 20px; background: var(--paper); }
  .explorer__map { order: 2; height: 56svh; min-height: 320px; }
  .cats { order: 3; display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .cats li { display: contents; }
  .cat { width: auto; min-height: 40px; padding: 0 14px; gap: 10px; border: 1px solid var(--rule); background: var(--plate); }
  .cat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--mist); }
  .cat[aria-pressed="true"] .cat__n, .cat[aria-pressed="true"] .cat__i { color: var(--teal-on-ink); }
  .cat__i { width: 16px; height: 16px; margin-right: 0; }
  .explorer__panel { order: 4; overflow: visible; }
  .places { overflow: visible; padding: 0 20px 24px; }
  .explorer__note { order: 5; background: var(--paper); border-top: 0; padding: 16px 20px 24px; }
  .mapcard { top: 12px; left: 12px; padding: 10px 12px; }
  .mapcard span { display: none; }
  .recenter { top: 12px; right: 12px; }
  .pin--home { width: 46px; height: 46px; font-size: 14px; }
  .sheet { display: block; position: fixed; z-index: 4500; left: 0; right: 0; bottom: 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 2px solid var(--teal); box-shadow: var(--shadow-float); transform: translateY(105%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
  .sheet.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  .sheet__top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
  .sheet h3 { font-size: 24px; }
  .sheet p { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
  .sheet .btn { width: 100%; margin-top: 14px; }
  .maplibregl-popup { display: none; }

  /* Plan pages: sticky action pair once the inline pair scrolls away. */
  .stickybar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; z-index: 3900; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(240, 241, 241, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); transform: translateY(110%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
  .stickybar .btn { padding: 12px 10px; letter-spacing: .14em; }
  html.show-sticky .stickybar { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  html.nav-open .stickybar, html.is-locked .stickybar { transform: translateY(110%); visibility: hidden; }
  body.has-sticky .footer { padding-bottom: 76px; }

  .btn { transition-duration: .12s; }
  .link, .nav__util, .footer a { transition-duration: .12s; }
}

@media (max-width: 760px) {
  .hero { min-height: 560px; }
  .hero__photo img { object-position: 58% 40%; }
  .hero__mark { top: 21%; }
  .hero__mark .wordmark { --wm: clamp(34px, 9vw, 56px); }
  .hero__foot .wrap { padding: 0 20px 40px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ctaband .actions { flex-direction: column; align-items: stretch; }
  .ctaband .actions .btn, .split__body .actions .btn, .glass .actions .btn, .contactgrid .actions .btn, .plan__detail .actions .btn, .ctabar .actions .btn { width: 100%; }
  .rows--2 { columns: 1; }
  .rows--2 li:first-child { border-top: 1px solid var(--rule); }
  .ledger--wide .ledger__row, .contactgrid .ledger--wide .ledger__row { grid-template-columns: 1fr; gap: 2px; }
  .others .ledger__row { grid-template-columns: 1fr auto; gap: 2px 16px; }
  .others .ledger__row > :nth-child(2) { grid-column: 1; color: var(--muted); }
  .others .ledger__row > :nth-child(3) { grid-column: 2; grid-row: 1; text-align: right !important; }
  .others .ledger__row > :nth-child(4) { grid-column: 2; grid-row: 2; text-align: right !important; }
  .plan__plate { padding: 20px; }
  .plan__plate-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .form { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
  .tour__call { grid-template-columns: 1fr; gap: 4px; }
  .tour__call span:last-child { text-align: left; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 28px; }
  .footer__col { border-top: 1px solid var(--rule-on-ink); padding-top: 22px; }
  .footer__brand { order: 1; } .footer__office { order: 2; } .footer__explore { order: 3; } .footer__res { order: 4; }
  .footer__legal { flex-direction: column; gap: 14px; }
  .footer__bar { flex-direction: column; gap: 10px; }
  /* Phones: two photos a row at their own ratio; an odd one out spans the row. */
  .grow { flex-wrap: wrap; gap: 22px 10px; }
  .grow + .grow { margin-top: 22px; }
  .gitem { flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * 108px); }
  .gitem figcaption { font-size: 12.5px; margin-top: 8px; }
  /* Two lines on every phone: "On Union Cross Road," / "seconds from I-40." */
  .hero h1 { font-size: clamp(30px, 8.4vw, 46px); }
  .hero h1 .line > span { white-space: nowrap; }
  .gcat { padding-top: 40px; }

  /* Tour modal and lightbox become full-screen sheets. */
  .overlay { padding: 0; align-items: stretch; }
  .overlay__panel { width: 100%; max-height: none; height: 100%; }
  .tour { padding: 0 16px 24px; }
  .tour__top { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .tour h2 { font-size: 32px; margin-top: 18px; }
  .tour__frame { margin: 16px -16px 0; border-left: 0; border-right: 0; }
  .lightbox { padding: 12px 12px 20px; display: flex; flex-direction: column; }
  .lightbox__stage { flex: 1; }
  .lightbox__stage img { max-height: calc(100svh - 170px); }
}

@media (max-width: 560px) {
  :root { --pad: 16px; }
  .nav__inner { padding: 0 14px; grid-template-columns: auto 1fr auto; }
  .nav__word { display: none; }
  .nav__toggle { padding: 6px 8px 6px 2px; }
  .nav__tour { padding: 8px 10px; letter-spacing: .12em; }
}
@media (max-width: 380px) {
  .nav .wordmark { --wm: 19px; }
  .nav__tour { font-size: 9.5px; letter-spacing: .1em; padding: 8px 8px; }
}