/* Phones and tablets: the bottom-card layout and the folding card hints. */

/* Phones and narrow windows: chapter text becomes a bottom card, the model is framed above it. */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .ab-chapter.ab-layout-left { display: block; min-height: 0; padding-block: 86vh 0; }
  .ab-chapter.ab-layout-left:last-of-type { padding-bottom: 20vh; }
  #setting { min-height: 0; padding-top: 86vh; padding-bottom: 120vh; }
  .ab-copy { margin: 0; }
  .ab-theme-cream .ab-copy { background: rgba(253, 246, 236, 0.93); }
  .ab-theme-dark .ab-copy { background: rgba(32, 33, 36, 0.88); }
  .ab-theme-photo .ab-copy { background: rgba(0, 0, 0, 0.55); }
  .ab-facts dd { font-size: 20px; }
  /* the section rail stays, smaller and closer to the edge, in the gutter beside the cards */
  .ab-rail { right: max(5px, env(safe-area-inset-right, 0px)); }
  .ab-rail li { height: 30px; }
  .ab-rail li:last-child { height: 10px; }
  .ab-rail li::after { top: 10px; }
  .ab-rail button { width: 10px; height: 10px; }
  .ab-cards { grid-template-columns: 1fr; gap: 40px; }
  .ab-factgrid { grid-template-columns: 1fr; }
  .ab-track { padding-inline: 11vw; }
  .ab-hero-bar { flex-direction: row; }
  .ab-hero-credit { font-size: 13px; }
  .ab-explore-hint { display: none; }
  .ab-explore-ui { top: calc(72px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto; max-height: none; overflow: visible; gap: 8px; }
  .ab-explore-bar { flex-wrap: nowrap; overflow-x: auto; padding: 8px; }
  .ab-explore-bar .ab-group-label { flex-basis: auto; flex: none; padding-top: 0; }
  .ab-chip { flex: none; }
  footer nav { gap: 22px; }
}
/* Card hints on phones and tablets (touch screens, and windows as narrow as a phone): the story cards in "The sail",
   "Inside" and "Stories" (.ab-has-hint, set in JS from HINT_GROUPS) start folded to a hint (their heading, or the first
   two lines of their text) with a "More" button, so the 3D scene stays in view.
   "More", or a tap anywhere on the folded card, opens the whole card, and "Hide" folds it again. Desktop browsers keep
   the full cards. The buttons are added in the JS block "card hints". */
.ab-hint-btn { display: none; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .ab-hint-btn {
    display: inline-flex; align-items: center; gap: 7px; justify-self: end; flex: none; cursor: pointer;
    padding: 8px 13px; border-radius: 999px; border: 1px solid var(--orange); background: transparent; color: inherit;
    font: 500 12px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
 }
  .ab-hint-btn svg { width: 10px; height: 10px; transition: transform 0.25s; }
  .ab-copy.ab-open .ab-hint-btn svg { transform: rotate(180deg); }
  .ab-copy.ab-has-hint:not(.ab-open) { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px !important; cursor: pointer; }
  .ab-copy.ab-has-hint:not(.ab-open) > :not(.ab-hint-src):not(.ab-hint-btn) { display: none !important; }
  .ab-copy.ab-has-hint:not(.ab-open) .ab-hint-src {
    flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
 }
  .ab-copy.ab-has-hint:not(.ab-open) h2.ab-hint-src span { display: inline; font-size: 17px; line-height: 1.3; }
  .ab-copy.ab-has-hint:not(.ab-open) h2.ab-hint-src .ab-the::after { content: " "; }
  .ab-copy.ab-has-hint:not(.ab-open) h3.ab-hint-src { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-hero-media, .ab-hero-media::after, .ab-pin { animation: none; }
}