/*
 * DISASTERSIGNAL · ATLAS TYPOGRAPHY
 * ==================================
 * This is the ONLY file to edit to resize the large titles on Atlas slides.
 *
 * Chapter 1 uses an <h1>; chapters 2–6 use <h2> for correct page semantics.
 * Both are styled here so they look like the same headline family.
 *
 * HOW TO EDIT A SIZE:
 *   clamp(MINIMUM, FLUID SIZE, MAXIMUM)
 *   e.g. clamp(52px, 5.5vw, 98px)
 *   - Minimum prevents microscopic text on small screens.
 *   - vw grows/shrinks with screen width (1vw = 1% of viewport width).
 *   - Maximum keeps titles from growing excessively on large monitors.
 *
 * Change the values below. Do NOT add heading sizes to assets/story.css.
 * This file is loaded AFTER story.css and affects Atlas chapters ONLY.
 * Section descriptions, signup labels, buttons and other pages stay untouched.
 */

body[data-variant="atlas"] {
  /* Desktop and laptop: approximately 9–10% smaller than previous preview. */
  --atlas-cover-title-size: clamp(52px, 5.5vw, 98px);
  --atlas-chapter-title-size: clamp(44px, 5vw, 88px);
}

/* One headline system for the six chapters; avoid styling EmailOctopus headings. */
body[data-variant="atlas"] .panel .copy > h1 {
  font-size: var(--atlas-cover-title-size);
}

body[data-variant="atlas"] .panel .copy > h2 {
  font-size: var(--atlas-chapter-title-size);
}

/* Tablets: 701–960px wide. */
@media (min-width: 701px) and (max-width: 960px) {
  body[data-variant="atlas"] {
    --atlas-cover-title-size: clamp(44px, 5.7vw, 72px);
    --atlas-chapter-title-size: clamp(44px, 5.7vw, 72px);
  }
}

/* Phones: up to 700px wide. */
@media (max-width: 700px) {
  body[data-variant="atlas"] {
    --atlas-cover-title-size: clamp(34px, 9.2vw, 62px);
    --atlas-chapter-title-size: clamp(34px, 9.2vw, 62px);
  }
}

/* Short phone screens: prevent titles from crowding the content below. */
@media (max-width: 700px) and (max-height: 660px) {
  body[data-variant="atlas"] {
    --atlas-cover-title-size: clamp(32px, 8.5vw, 52px);
    --atlas-chapter-title-size: clamp(32px, 8.5vw, 52px);
  }
}

/* Short desktop screens: only the Coming Soon chapter has a signup panel. */
@media (min-width: 701px) and (max-height: 850px) {
  body[data-variant="atlas"] {
    --atlas-final-title-size: clamp(32px, 3.4vw, 52px);
  }

  body[data-variant="atlas"] #chapter-6 .copy > h2 {
    font-size: var(--atlas-final-title-size);
  }
}