/* Tablet and phone refinements loaded last: a smaller hero stage so the headline shows on the first screen, tighter spacing. */

@media (max-width: 980px) {
  .hero { padding: 20px 0 48px; }
  .hero-grid { gap: 12px; }
  .hero-ring, .hero-photo { width: min(330px, 46vw); }
  .hero-stage .orbit { inset: 2% 14% 30%; }
  .hero-hint { display: none; }
  .stone-caption { min-height: 60px; }
  .stone-caption .name { font-size: 26px; }
  .hero h1 { font-size: clamp(40px, 7vw, 60px); margin: 10px 0 14px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 10px; }
  .hero-ring, .hero-photo { width: min(210px, 58vw); }
  .stone-caption { min-height: 54px; margin-top: -10px; }
  .stone-caption .name { font-size: 22px; }
  .stone-caption .meta { font-size: 12.5px; }
  .stone-dots { gap: 6px; margin-top: 8px; }
  .stone-dot { width: 26px; height: 26px; }
  .hero h1 { font-size: 38px; }
  .hero-sub { font-size: 16px; }
  /* Thumb-sized tap targets in the header on phones. */
  .header-actions .icon-btn { width: 42px; height: 42px; }
}

/* Landscape phones: very short screens get a side-by-side hero instead of a tall stack. */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero-stage { order: 0; }
  .hero-ring, .hero-photo { width: min(200px, 30vw); }
  .hero-copy { text-align: left; }
}