/* Phone and narrow-screen layout. Desktop and 4K reading styles stay in the original stylesheets. */
@media (max-width: 900px) {
  :root { --reading: 16px; --type-scale: .727272727; }
  .lodging-body, .reviews-body, .savings-body, .food-body, .shopping-body, .overview-body {
    font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%;
  }
  body > main.wrap, body > main.shop-wrap, body > main.ov-wrap, body > main.food-wrap,
  .savings-body > main { width: 100%; padding: 22px 14px 40px; }
  main img { max-width: 100%; }
  main p, main li, main dd, main a { overflow-wrap: anywhere; }
  .lodging-body button, .reviews-body button, .savings-body button, .food-body button, .shopping-body button,
  .lodging-body select, .reviews-body select, .savings-body input, .food-body select, .shopping-body select,
  .lodging-body input:not([type=checkbox]), .food-body input, .shopping-body input:not([type=checkbox]) {
    min-height: 44px; padding: 9px 12px; font-size: 16px; line-height: 1.4;
  }
  .lodging-body button, .reviews-body button, .savings-body button, .food-body button, .shopping-body button {
    font-size: 14px;
  }
  .lodging-body textarea { font-size: 16px; }
  .lodging-body input[type=checkbox], .shopping-body .shop-check input {
    width: 22px; height: 22px; min-height: 0; flex-shrink: 0; padding: 0;
  }
  .site-header { padding: 14px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .brand { font-size: 20px; gap: 10px; line-height: 1.3; }
  .brand-mark { width: 40px; height: 40px; font-size: 24px; flex-shrink: 0; }
  .brand small { font-size: 10px; letter-spacing: 2px; margin-top: 4px; }
  .site-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 4px 6px; }
  .site-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 4px; font-size: 14px; line-height: 1.35; white-space: nowrap; }
  .site-footer, .shopping-body .site-footer, .overview-body .site-footer {
    font-size: 14px; gap: 10px; margin-top: 24px; padding: 20px 14px;
  }
  .intro h1, .reviews-body h1, .savings-body h1, .food-hero h1, .shop-hero h1, .ov-hero h1 {
    font-size: 30px; line-height: 1.3; letter-spacing: -.5px; margin: 12px 0 16px;
  }
  .lodging-body h2, .reviews-body h2, .savings-body h2, .food-section-heading h2,
  .food-price-intro h2, .shop-section-heading h2, .ov-section-heading h2 {
    font-size: 23px; line-height: 1.4;
  }
  .eyebrow, .food-eyebrow, .shop-eyebrow, .ov-eyebrow { font-size: 12px; letter-spacing: 1.3px; }
  .notice, .review-banner, .review-notice, .important, .method, .food-note, .shop-note, .ov-note {
    font-size: 14px; line-height: 1.65; padding: 14px 16px; margin: 16px 0; border-radius: 14px;
  }
  .stat, .row, .review-card, .food-card, .shop-card, .ov-area, .ov-update { border-radius: 18px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
  .stat { min-width: 0; padding: 14px; }
  .stat strong, .stat b { font-size: 24px; line-height: 1.35; }
  .wrap small, .stat small, .stat span { font-size: 14px; line-height: 1.5; }
  .primary, .review-link, .food-button, .shop-button, .ov-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 10px 16px; font-size: 14px; line-height: 1.4;
  }
  .areas, .maptoolbar, .food-kind-tabs, .shop-tabs {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; max-width: 100%;
    padding-bottom: 6px; overscroll-behavior-x: contain;
  }
  .areas button, .maptoolbar button, .food-kind-tabs button, .shop-tabs button { flex-shrink: 0; white-space: nowrap; font-size: 14px; min-height: 44px; }
  .maplegend, .food-map-legend { padding: 12px 14px; gap: 10px 14px; font-size: 13px; line-height: 1.5; }
  .mapbox, .food-map-layout { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  #map, .map-fallback, .food-map-canvas { height: 340px; }
  .mapdetail, .food-map-info { padding: 16px; max-height: none; font-size: 15px; }
  .mapdetail h2, .food-map-info h3 { font-size: 20px; }
  .mapdetail .source-note, .mapcaption, .food-map-status { font-size: 13px; line-height: 1.6; }
  .mapcaption { padding: 14px; }
  .mapdetail .maplist { max-height: 230px; }
  .station-browser { margin-top: 18px; padding-top: 14px; }
  .station-browser h3 { font-size: 18px; }
  .station-row, .exit-buttons button, .food-map-tools button { min-height: 44px; font-size: 14px; }
  .metro-name { font-size: 14px; line-height: 24px; top: -26px; }
  .district-label { font-size: 18px; line-height: 32px; }
  .exit-marker span { font-size: 16px; line-height: 26px; }
  .food-body .leaflet-tooltip, .lodging-body .leaflet-popup-content { font-size: 14px; }
  .lodging-body .leaflet-control-attribution, .lodging-body .leaflet-control-scale-line,
  .food-body .leaflet-control-attribution { font-size: 11px; }
  .food-body .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }

  /* Lodging: photos and fields stack without shrinking the text into narrow columns. */
  .lodging-body > main.wrap { padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
  .intro { display: block; }
  .intro p { font-size: 16px; }
  .intro .dates { min-width: 0; margin-top: 18px; padding: 16px; font-size: 16px; }
  .feature-food { display: block; padding: 18px; margin: 20px 0; }
  .feature-food h2 { font-size: 23px; }
  .feature-food p { font-size: 15px; margin-bottom: 12px; }
  .feature-food .eyebrow { font-size: 12px; }
  .feature-food .primary { font-size: 14px; padding: 10px 16px; }
  .feature-food img { display: none; }
  .lodging-body .filters { position: relative; padding: 16px 0; }
  .lodging-body .filter-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
  .filter-line label { gap: 10px; font-size: 14px; min-height: 44px; max-width: 100%; }
  .filter-line label:has(select) { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .filter-line select, .filter-line input[type=search] { min-width: 0; width: 100%; max-width: 100%; margin-left: 0; }
  #resultCount { font-size: 14px; margin: 14px 0; }
  .row { scroll-margin-top: 20px; }
  .row-main { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .hero, .no-photo { height: 220px; }
  .lodging-body .hero-button, .lodging-body .thumb { min-height: 0; padding: 0; }
  .photo-note, .hero .photo-note { font-size: 13px; }
  .row h3 { font-size: 20px; line-height: 1.4; margin: 10px 0; }
  .chips { gap: 6px; }
  .chip { font-size: 13px; line-height: 1.5; padding: 4px 9px; }
  .room { font-size: 16px; }
  .fields { grid-template-columns: 64px minmax(0, 1fr); gap: 8px 10px; font-size: 15px; }
  .notes { font-size: 14px; line-height: 1.6; }
  .price-column { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 8px; }
  .price { font-size: 26px; line-height: 1.35; }
  .price-sub, .source-note, .delta { font-size: 14px; line-height: 1.5; }
  .album { margin-top: 16px; }
  .album summary, .gallery-status, .album-link { font-size: 14px; }
  .album summary, .platforms summary, .excluded summary { min-height: 44px; padding: 10px 0; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .thumb img { height: 100px; }
  .thumb span { font-size: 12px; }
  .platforms, .excluded { padding: 16px; font-size: 14px; max-width: 100%; overflow-x: auto; }
  .platforms table { font-size: 14px; min-width: 640px; }
  .footer { font-size: 13px; line-height: 1.7; }
  .comparebar { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; align-items: stretch; flex-direction: column; }
  .comparebar span { font-size: 14px; line-height: 1.4; }
  .comparebar .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .comparebar button { min-width: 0; padding: 8px 5px; font-size: 13px; line-height: 1.35; min-height: 44px; }
  .lightbox, .selection-dialog, .compare-dialog { width: calc(100vw - 20px); max-width: none; max-height: 90vh; max-height: 90dvh; padding: 14px; }
  .lightbox-header { gap: 8px; flex-wrap: wrap; padding: 0; }
  .lightbox-header strong { font-size: 16px; }
  .viewer { display: block; position: relative; padding: 0; min-height: 0; margin-top: 14px; }
  .viewer button { position: absolute; top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px; padding: 0; font-size: 26px; background: #22372de6; }
  .viewer button:first-child { left: 0; }
  .viewer button:last-child { right: 0; }
  .viewer img { display: block; width: 100%; height: 48vh; height: 48dvh; }
  .viewer-footer { font-size: 14px; padding: 12px 0 0; gap: 8px; flex-wrap: wrap; }
  .viewer-footer input { min-height: 44px; max-width: 76px; }
  .selection-dialog h2, .compare-dialog h2 { font-size: 22px; }
  .selection-dialog textarea { font-size: 16px; height: 45vh; }

  /* Food: compact menus, AUD budgets, booking notes and map controls. */
  .food-hero, .shop-hero, .ov-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 6px 0 28px; }
  .food-hero p, .shop-hero p, .ov-hero p { font-size: 16px; max-width: 100%; }
  .food-hero-actions, .shop-actions, .ov-actions { gap: 8px; margin-top: 16px; }
  .food-cover img { height: 240px; border-radius: 40px 14px 14px; }
  .food-cover figcaption { font-size: 12px; padding: 9px 12px; left: 12px; right: 12px; bottom: 12px; flex-wrap: wrap; }
  .food-stamp { width: 78px; height: 78px; top: -12px; right: 12px; font-size: 10px; border-width: 3px; }
  .food-stamp span { font-size: 9px; }
  .food-intro-strip, .shop-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px 0; margin-bottom: 24px; }
  .food-intro-strip strong, .shop-overview strong { font-size: 26px; }
  .food-intro-strip span, .shop-overview span { font-size: 14px; }
  .food-section-heading, .ov-section-heading { display: block; margin: 30px 0 16px; }
  .food-section-heading p, .ov-section-heading > p, .shop-section-heading > p { font-size: 14px; margin-top: 10px; max-width: 100%; }
  .section-number { font-size: 13px; }
  .food-map-info { border-left: 0; border-top: 1px solid var(--line); }
  .food-area-choices button { font-size: 14px; }
  .food-filter-panel, .shop-filter { padding: 16px; border-radius: 16px; }
  .food-filter-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .food-filter-line label { font-size: 14px; }
  .food-count, .food-ko, .food-strength, .food-facts, .food-booking, .food-detail { font-size: 15px; }
  .food-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .food-card { display: block; }
  .food-photo-button { margin: 0; width: 100%; border-radius: 0 !important; min-height: 0 !important; }
  .food-photo-button img { height: 220px; }
  .food-photo-button .photo-more { font-size: 12px; bottom: 12px; right: 12px; }
  .food-card-content { padding: 16px; }
  .food-tags { font-size: 13px; }
  .food-card h3 { font-size: 21px; gap: 10px; margin: 12px 0 6px; }
  .food-strength { line-height: 1.7; margin: 12px 0 16px; }
  .food-facts { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 10px; }
  .food-booking { flex-direction: column; gap: 6px; }
  .food-actions { gap: 8px; }
  .food-actions button, .food-actions a { font-size: 14px; min-height: 44px; padding: 9px 12px; }
  .food-photo-credit, .food-sources { font-size: 13px; }
  .food-detail summary, .food-menu-detail > summary { min-height: 44px; padding: 10px 0; font-size: 15px; }
  .food-gallery img { width: 120px; height: 90px; }
  .food-guide-grid, .food-route-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .food-guide-card, .food-route-card { padding: 18px; border-radius: 18px; }
  .food-guide-card h3, .food-route-card h3, .hanwoo-copy h3 { font-size: 20px; }
  .food-guide-card p, .food-guide-card li, .food-route-card p, .food-route-steps, .hanwoo-copy p, .hanwoo-copy li { font-size: 15px; }
  .hanwoo-panel { grid-template-columns: minmax(0, 1fr); }
  .hanwoo-copy { padding: 20px 18px; }
  .hanwoo-picture img { height: 240px; min-height: 0; }
  .hanwoo-picture figcaption { font-size: 12px; padding: 10px 12px; }
  .food-spending-guide, .food-hanwoo-budget { padding: 18px 16px; margin: 24px 0 32px; border-radius: 16px; }
  .food-rate-line, .food-rate-detail p { font-size: 14px; }
  .food-budget-picks { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 18px 0; }
  .food-budget-picks a { padding: 16px; gap: 8px; }
  .food-budget-picks span { font-size: 15px; }
  .food-budget-picks strong { font-size: 20px; }
  .food-budget-picks small { font-size: 14px; }
  .food-spending { padding: 14px 12px; margin: 18px 0; }
  .food-spending-heading { font-size: 15px; }
  .food-price-status { font-size: 13px; }
  .food-budget-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .food-budget-grid.compact .food-budget-item { display: block; }
  .food-budget-item > span { font-size: 14px; }
  .food-budget-item > strong { font-size: 20px; }
  .food-budget-item p, .food-spending-note, .food-price-exclusions, .food-price-caveat,
  .food-menu-detail > p, .food-menu-links, .food-original-prices, .food-deposit-note, .food-hanwoo-budget p { font-size: 14px; }
  .food-menu-date { font-size: 13px !important; }
  .food-menu-list li { grid-template-columns: minmax(0, 1fr); font-size: 15px; gap: 6px; padding: 12px 0; }
  .food-menu-list span, .food-menu-list p { font-size: 14px; }
  .food-menu-list li > strong { text-align: left; font-size: 16px; }
  .food-reservation-table { font-size: 14px; min-width: 660px; }
  .food-reservation-table th, .food-reservation-table td { padding: 12px; }
  .food-dialog { padding: 14px; width: calc(100vw - 20px); }
  .food-dialog header strong { font-size: 16px; max-width: 100%; }
  .food-dialog footer { font-size: 14px; gap: 8px; }

  /* Shopping: readable product notes and smaller photos without losing the catalogue. */
  .shop-hero-image { border-radius: 40px 16px 16px; }
  .shop-hero-image > img { height: 270px; padding: 20px 16px 75px; }
  .shop-hero-image figcaption { left: 18px; right: 18px; bottom: 16px; }
  .shop-hero-image figcaption > span, .shop-photo-tag { font-size: 12px; }
  .shop-hero-image figcaption > strong { font-size: 23px; }
  .shop-hero-foot, .shop-results-line, .shop-note { font-size: 14px; }
  .shop-overview > div { padding: 0 12px; }
  .shop-overview > div:nth-child(2) { border: 0; }
  .shop-section-heading { display: block; padding-top: 26px; margin-bottom: 18px; }
  .shop-brand-grid, .shop-editors-pick, .shop-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-brand-letter, .shop-series, .shop-compare-brand { padding: 20px 18px; }
  .shop-brand-letter > span, .shop-compare-head > span { font-size: 20px; }
  .shop-brand-letter h3 { font-size: 23px; margin: 18px 0 12px; }
  .shop-brand-letter p, .shop-brand-letter a, .shop-series p, .shop-compare-head p, .shop-compare-head a { font-size: 15px; }
  .shop-series { display: block; }
  .shop-series h3 { font-size: 18px; }
  .shop-series article > span { font-size: 12px; }
  .shop-series article + article { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
  .shop-short-pick { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .shop-short-pick img { width: 80px; height: 90px; }
  .shop-short-pick strong { font-size: 15px; }
  .shop-short-pick span { font-size: 14px; }
  .shop-filter-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shop-filter-fields label { font-size: 14px; gap: 6px; }
  .shop-filter-fields .shop-check { padding-top: 0; min-height: 44px; }
  .shop-filter-fields > button { justify-self: start; }
  .shop-results-line { flex-direction: column; gap: 8px; margin: 16px 0; }
  .shop-results-line small { font-size: 13px; }
  .shop-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .shop-card-visual { height: 240px; }
  .shop-card-visual figcaption { font-size: 12px; }
  .shop-card-copy { padding: 16px; }
  .shop-card-meta, .shop-card-brand, .shop-price-note { font-size: 13px; }
  .shop-card h3 { font-size: 20px; margin: 10px 0 8px; }
  .shop-price strong { font-size: 24px; }
  .shop-price > span, .shop-price > del { font-size: 14px; }
  .shop-card .shop-why, .shop-card summary { font-size: 15px; }
  .shop-detail-content, .shop-card-links > a, .shop-card-links button { font-size: 14px; }
  .shop-card-links > a, .shop-card-links button { min-height: 44px; }
  .shop-gallery img { height: 160px; }
  .shop-gallery figcaption { font-size: 13px; }
  .shop-compare-picks { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
  .shop-compare-picks a { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: center; }
  .shop-compare-picks img, .shop-compare-nophoto { height: 90px; }
  .shop-compare-picks strong { font-size: 15px; }
  .shop-compare-picks span, .shop-compare-note { font-size: 14px; }
  .shop-route-list, .shop-video-list, .shop-saving-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .shop-route { padding: 18px; }
  .shop-route h3, .shop-video h3 { font-size: 20px; }
  .shop-route > span, .shop-route > p, .shop-store address, .shop-store p, .shop-store-links { font-size: 14px; }
  .shop-store h4 { font-size: 17px; }
  .shop-video { display: block; }
  .shop-video-photo img { height: 200px; }
  .shop-video-photo > span { font-size: 14px; }
  .shop-video-content { padding: 18px; }
  .shop-video-meta { font-size: 13px; }
  .shop-video .shop-video-by, .shop-video .shop-video-scope, .shop-video .shop-video-disclosure, .shop-video ul { font-size: 14px; }
  .shop-saving-grid h3 { font-size: 18px; }
  .shop-saving-grid p, .shop-saving-grid a, .shop-method { font-size: 14px; }

  /* Reviews, savings and itinerary use the same mobile scale. */
  .reviews-body .intro { max-width: 100%; }
  .reviews-body .review-card { padding: 18px 16px; margin: 18px 0; }
  .reviews-body .card-top { display: block; }
  .reviews-body .price { font-size: 24px; margin: 10px 0; white-space: normal; }
  .reviews-body .filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .reviews-body .filters label { display: grid; gap: 5px; margin: 0; font-size: 14px; }
  .reviews-body .filters select { width: 100%; min-width: 0; }
  .reviews-body .coverage, .reviews-body .entry-meta, .reviews-body .neutral-list,
  .reviews-body .quick-index a, .reviews-body small { font-size: 14px; }
  .reviews-body .reason, .reviews-body .details summary, .reviews-body .neutral summary { font-size: 15px; }
  .reviews-body .chip, .reviews-body .entry .chip { font-size: 13px; }
  .reviews-body .quick-index a, .reviews-body .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .reviews-body .entry { padding: 14px 0; }
  .savings-body .top { align-items: flex-start; flex-direction: column; gap: 8px; font-size: 14px; }
  .savings-body .dates { padding: 16px; font-size: 15px; }
  .savings-body .cards, .savings-body .grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .savings-body .card, .savings-body section { min-width: 0; padding: 18px 16px; }
  .savings-body .card strong { font-size: 22px; }
  .savings-body .small, .savings-body .source, .savings-body footer, .savings-body .note { font-size: 14px; }
  .savings-body .tag { font-size: 13px; }
  .savings-body table { font-size: 14px; min-width: 680px; }
  .savings-body th { font-size: 13px; }
  .savings-body th, .savings-body td { padding: 12px; }
  .savings-body code { font-size: 14px; }
  .savings-body .calcinputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .savings-body .calcinputs label { width: 100%; font-size: 14px; }
  .savings-body .calcinputs input { min-width: 0; width: 100%; }
  .savings-body .scenario { font-size: 14px; min-height: 44px; }
  .savings-body summary { font-size: 15px; min-height: 44px; }
  .savings-body .result { padding: 16px; }
  .ov-dates { padding: 20px 18px; border-radius: 18px; }
  .ov-dates h2 { font-size: 19px; }
  .ov-dates li { font-size: 15px; }
  .ov-dates p { font-size: 14px; }
  .ov-hero .ov-note { font-size: 14px; }
  .ov-areas, .ov-updates, .ov-plan { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ov-area, .ov-update { padding: 18px; }
  .ov-area > span { font-size: 13px; }
  .ov-area h3 { font-size: 22px; }
  .ov-area > p, .ov-area-foot { font-size: 14px; }
  .ov-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  .ov-col h4 { font-size: 15px; }
  .ov-col li, .ov-col .ov-empty { font-size: 15px; }
  .ov-col li small { font-size: 14px; }
  .ov-col .ov-new { font-size: 12px; }
  .ov-table { font-size: 14px; }
  .ov-table th { font-size: 13px; }
  .ov-table td, .ov-table th { padding: 12px; }
  .ov-chip { font-size: 13px; }
  .ov-update h3 { font-size: 20px; }
  .ov-update h4 { font-size: 16px; }
  .ov-update li, .ov-plan p, .ov-plan li, .ov-method { font-size: 14px; }
  .ov-plan h3 { font-size: 18px; }
  .ov-plan article { padding: 18px 0; }
}

@media (max-width: 380px) {
  .food-filter-line { grid-template-columns: minmax(0, 1fr); }
  .intro h1, .reviews-body h1, .savings-body h1, .food-hero h1, .shop-hero h1, .ov-hero h1 { font-size: 28px; }
}