/* 17 Great Finds, phone compaction (2026-10-02). From the mobile structure audit: the page was 24,051px
   (about 28 screens) on a 390px phone. Desktop is untouched; everything here is below 760px.
   Kept on purpose: the hero card grid (Kyle rejected a sideways strip on 2026-09-15), the big Danville
   photo bands (Kyle: "don't make these photos small"), and the buyer's terms, which stay readable. */
.more-btn{display:none}
@media(max-width:760px){
  /* repeats of what the wall and the menu already say */
  #auctions .section-heading>p,.finds-note p,.story-more,#next{display:none}

  /* "show the start, then a button": the story timeline and the FAQ */
  .clamp-box{position:relative}
  .clamp-box:not(.is-open)>.timeline{max-height:560px;overflow:hidden}
  .clamp-box:not(.is-open)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
    background:linear-gradient(to top,#f9f8fa 12%,#f9f8fa00)}   /* the story section's own ground, or the fade shows as a white block */
  .more-btn{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;padding:12px 18px;border:1px solid #D7DEE6;border-radius:40px;
    background:#fff;font:650 14px/1 var(--font);color:var(--deep);cursor:pointer;min-height:44px}
  .more-btn svg{width:14px;height:14px;color:var(--blue-ink);transform:rotate(135deg);transition:transform .4s var(--out)}
  .more-btn[aria-expanded="true"] svg{transform:rotate(-45deg)}
  .faqs:not(.is-all) details:nth-of-type(n+6){display:none}

  /* alerts: three slim rows */
  .alert-grid{gap:10px}
  .alert-card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:2px;padding:16px 18px;min-height:0}
  .alert-card .ac-icon{grid-row:span 2;margin:0}
  .alert-card h3{margin:0;font-size:17px}
  .alert-card p{display:none}
  .alert-card .ac-go{margin:0;font-size:13px}

  /* selling: the four services as a 2x2 of icon and name */
  .service-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .service-list article{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff}
  .service-list article p{display:none}
  .service-list article h3{font-size:15.5px;line-height:1.2;margin:0}

  /* good to know: same words, two columns */
  .good-to-know{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .good-to-know .gtk p{font-size:13px;line-height:1.45}

  /* market: the booth list repeats the paragraph above it */
  .market-copy>p:nth-of-type(2){display:none}

  /* contact topics: one swipeable row of chips */
  .ch-topics .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px;scroll-padding-inline:16px}
  .ch-topics .chips::-webkit-scrollbar{display:none}
  .ch-topics .chip{flex:none}
}

/* ---- Mobile QA fixes (2026-10-02 audit) ---- */
@media(max-width:760px){
  /* the one-row chip strip must not widen the contact column (it pushed the page to 790px) */
  .ch-panel{grid-template-columns:minmax(0,1fr)}
  .ch-topics{min-width:0;min-inline-size:0}
  /* a phone visitor sees the buttons straight away, not 1.5s after the headline */
  .motion.is-loaded:not(.entered) .actions .enter,.motion.is-loaded:not(.entered) .hero-live{animation-delay:0s!important;animation-duration:.45s!important}
  /* lot names get two lines instead of an ellipsis */
  .wall-grid.rail .wall-cap b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12.5px;line-height:1.25}
  .wall-grid.rail .wall-img{bottom:68px}
  .sale-wall .wall-grid.rail{grid-template-rows:repeat(2,222px)}
  /* room for the Ask B&H button at the very bottom, and footer links big enough for a thumb */
  footer{padding-bottom:84px}
  footer a.ul{font-size:14px;display:inline-block;padding:12px 0;min-height:44px}
  .menu-toggle,.text-link,.cd-copy,.ch-place button,.film-sound,.mailing-link{min-height:44px}
  .text-link{display:inline-flex;align-items:center}
}
@media(max-width:760px){
  /* small-print floor (QA): nothing a buyer needs under 11px */
  .sale-clock i,.wall-cap em,.find-badge,.find-cat,.clock-kicker{font-size:11.5px}
  .hero-rule span{font-size:11px}
}
/* contrast (QA): the HiBid note under the wall, and the not-yet-reached timeline years */
.wall-foot p,.wall-foot>span{color:#625d6a}
html .tl-on .timeline li:not(.is-reached) .ty{color:#7690A6}   /* was #9DB2C4, 2.07:1; now just over 3:1 */

/* ---- Phone layout, second pass (2026-10-02, Kyle: "really redesign the entire layout to work best for mobile") ----
   One reading line down the left edge, tighter rhythm between sections, cards that read as cards. */
@media(max-width:760px){
  /* rhythm: every section opens and closes on the same beat */
  .section{padding:56px 0}
  .section-heading{text-align:left;margin-bottom:24px}
  .section-heading p{margin:12px 0 0;max-width:none}
  .section-heading h2{text-wrap:balance}

  /* facts: four short statements, two by two, with their line kept short */
  .facts{padding:24px 0 26px}
  .facts-grid{grid-template-columns:1fr 1fr;gap:18px 0}
  .fact{padding:0 14px}
  .fact strong{font-size:24px}
  .fact>span{font-size:12.5px;line-height:1.4;margin-top:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* auctions: the small print under the wall says what the card and the catalog already say */
  .auction-footer p{display:none}
  .auction-footer{border-top:0;padding-top:0;margin-top:12px}

  /* selling: four services as proper cards — icon, name, one short line */
  .service-list{gap:10px}
  .service-list article{padding:16px 14px 16px;border-radius:20px;gap:12px;box-shadow:0 1px 0 #0000000a}
  .service-list article>span{min-width:42px;width:42px;height:42px;border-radius:13px}
  .service-list article p{display:block;margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted)}
  .service-list article h3{font-size:15px}

  /* market: storefront across, two squares under it — no swipe, nothing overlapping */
  .market-photos{grid-template-columns:1fr 1fr;gap:10px}
  .market-photos .mp-store{grid-column:1/-1}
  .market-photos figure{border-radius:18px}

  /* footer: one text size, so it reads as a list rather than a jumble */
  .footer-main>div,.footer-main p,footer a.ul{font-size:14px}
  .footer-main>div{gap:2px}
  footer a.ul{padding:9px 0;min-height:40px}
}