/* Phones: fewer one-card-per-row runs (Jason 2026-10-06: "手机端…一行只能显示一个 用户必须要滑很久"). Measured at
   390x844 before: the gallery ran 64 screens, each project reel 2.35, the review wall 2.35, the service map 1.9.
   Three moves, every rule inside the phone query so the desktop stays as it is:
   - browse content (project reels, reviews) swipes sideways in a rail, the next card peeking in;
   - the gallery sits two to a row and opens 24 at a time (src/mobile-density.js);
   - the service map shrinks to a figure beside its list. */
@media (max-width:800px){
  /* ---- project reels: a native swipe rail in place of the pinned sideways scroll ---- */
  .site-page .project-reel,.project-reel{height:auto;margin:0 -6vw}
  .project-reel .project-reel-sticky{position:relative;height:auto;padding:6px 0 2px;overflow:visible}
  .project-reel .project-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:0 6vw 4px;scroll-padding-inline:6vw}
  .project-reel .project-viewport::-webkit-scrollbar{display:none}
  .project-reel .project-track{transform:none!important;will-change:auto;display:flex;gap:12px;width:max-content}
  .project-reel .project-card{flex:0 0 76vw;scroll-snap-align:start}
  .project-reel .project-card img{height:auto;min-height:0;max-height:none;aspect-ratio:4/3}
  .project-reel .project-card>span{padding:14px 16px}

  /* ---- reviews: one rail of the three columns (each a quote and a photo) ---- */
  .review-section .review-wall{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin:0 -6vw;padding:0 6vw 4px;scroll-padding-inline:6vw;height:auto;mask-image:none}
  .review-section .review-wall::-webkit-scrollbar{display:none}
  .review-section .review-column{flex:0 0 82vw;scroll-snap-align:start}
  .review-section .review-card{padding:24px}
  .review-section .review-card blockquote{font-size:22px;margin:18px 0}
  .review-section .review-photo{aspect-ratio:16/9;max-height:none}

  /* ---- gallery: two to a row, the caption in the image's alt and the lightbox, 24 at a time ---- */
  .site-page .gallery-grid{grid-template-columns:1fr 1fr;gap:8px}
  .site-page .gallery-item{border-radius:10px;padding-bottom:0;position:relative}
  .site-page .gallery-item img{height:auto;aspect-ratio:4/3;border-radius:10px}
  .site-page .gallery-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
  .site-page .gallery-item.is-capped{display:none}
  .gallery-more{display:flex;justify-content:center;margin:22px 0 0}
  .gallery-more .pill{min-width:0;width:100%}

  /* ---- service area: the map as a figure, not a screen ---- */
  .area-section .region-map{min-height:0;padding:16px}
  .area-section .minnesota-counties{display:block;width:auto;max-width:100%;max-height:300px;margin:0 auto}
  .area-section .region-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .area-section .region-legend h3{grid-column:1/-1;font-size:24px;margin:0 0 6px}
  .area-section .region-card{margin:0;padding:12px 13px}
  .area-section .region-card b{font-size:16px}
  .area-section .region-card span{font-size:12px;line-height:1.5}
}
@media (min-width:801px){.gallery-more{display:none}}

/* window tint: the ULTRAFIT figures as a static table under the interactive picker (tools/patch_seo.py) */
.tint-all-figures{margin:18px 0 0}
.tint-all-figures>summary{cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--paper);
  padding:10px 0;border-bottom:1px solid #ffffff40;list-style:none}
.tint-all-figures>summary::-webkit-details-marker{display:none}
.tint-all-figures>summary::after{content:"+";font-weight:400;color:#f59154;transition:transform .3s}
.tint-all-figures[open]>summary::after{transform:rotate(45deg)}
.tint-all-figures table{width:100%;border-collapse:collapse;font-size:14px}
.tint-all-figures caption{caption-side:bottom;text-align:left;padding-top:12px;font-size:12px;color:var(--text-soft,#bcb9b0)}
.tint-all-figures th,.tint-all-figures td{padding:9px 12px;border-bottom:1px solid #ffffff14;text-align:left;white-space:nowrap}
.tint-all-figures thead th{font-size:12px;letter-spacing:.06em;color:var(--text-soft,#bcb9b0);font-weight:600}
.tint-all-figures td{font-variant-numeric:tabular-nums;color:var(--paper)}

/* header logo: it carries width/height attributes now (no layout shift); the theme sizes only its width, so the
   height must follow or the attribute's 251px wins and squashes the mark (judge, 2026-10-06) */
html .site-brand img{height:auto}
/* window tint figures on a phone: short row names, the first column held while the rest scrolls */
@media (max-width:800px){
  .tint-all-figures .table-scroll{padding:0}
  .tint-all-figures th[scope=row]{position:sticky;left:0;background:#15110f;z-index:1}
  .tint-all-figures thead th:first-child{position:sticky;left:0;background:#15110f;z-index:2}
  .tint-all-figures th,.tint-all-figures td{padding:8px 10px;font-size:13px}
}
.tint-all-figures .tint-figures-note{margin:10px 0 0;font-size:12px;color:var(--text-soft,#bcb9b0)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- judges, 2026-10-06 round 2 ---- */
@media (max-width:800px){
  /* the rail's negative margin also took the signature row under it to the screen edges */
  .project-reel .project-signature{padding-inline:6vw;box-sizing:border-box}
  /* tablets: cards a hand's width, so two show at once instead of one and a sliver */
  .project-reel .project-card{flex-basis:min(76vw,340px)}
  .review-section .review-column{flex-basis:min(82vw,360px)}
  /* service area: titles at the top of each card, city lines at their intended size */
  .area-section .region-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
  html:not(#tw-type) .area-section .region-card span{font-size:13px;line-height:1.45}
  /* "Show more" as a quiet outline, not a second gradient button above the footer's */
  .gallery-more .pill{background:transparent;border:1px solid #ffffff55;color:var(--paper)}
  .gallery-more .pill:hover{border-color:#f59154}
}
/* window tint figures: even columns, numbers aligned */
.tint-all-figures table{table-layout:fixed;min-width:560px}
.tint-all-figures td{text-align:right}
.tint-all-figures thead th:not(:first-child){text-align:right}