/* ==========================================================================
   Storybook Hunt: Watercolor Whimsy — progressive enhancement
   Base styles are mobile (<= 768px); everything below only widens the page.
   ========================================================================== */

/* ------------------------------------------------------------ tablet and up */
@media (min-width: 768px) {

  :root { --header-h: 68px; }

  body { font-size: 17px; }

  .wrap { padding: 0 32px; }

  /* Full text navigation replaces the icon-only header control */
  .site-nav { display: flex; align-items: center; gap: 26px; margin-right: 26px; }
  .site-nav__link {
    display: inline-flex; align-items: center;
    min-height: 44px;
    color: var(--ink-soft);
    font-size: 15px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .site-nav__link:hover { color: var(--teal-deep); border-bottom-color: var(--rose); }
  .site-nav__link:active { color: var(--rose); }

  .brand__icon { width: 40px; height: 40px; }
  .brand__name { font-size: 18px; }
  .brand__sub  { font-size: 13px; }

  .header-cta {
    width: auto; height: auto;
    min-height: 44px;
    padding: 0 20px;
    gap: 8px;
    border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 600;
  }
  .header-cta__text { display: inline; }
  .header-cta__icon { display: none; }

  /* Two-column storybook spread */
  .hero { padding: 56px 0 68px; }
  .hero__inner {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: center;
    gap: 46px;
  }
  .hero__title { font-size: 40px; }
  .hero__lede { font-size: 19px; }
  .hero__points li { font-size: 16px; }
  .hero__page { margin-top: 0; }
  .paper-frame { transform: rotate(1.6deg); padding: 14px 14px 6px; }
  .paper-frame__caption { font-size: 15px; }
  .hero__badge { width: 84px; height: 84px; top: -28px; left: -20px; }

  /* Buttons sit side by side once there is room */
  .store-row { flex-direction: row; flex-wrap: wrap; gap: 18px; }
  .store-row--center { justify-content: center; }
  .store-btn { width: auto; min-width: 232px; }
  .download .store-row { max-width: none; }

  .section { padding: 76px 0; }
  .section__title { font-size: 33px; }
  .kicker { font-size: 16px; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 38px; }

  .download__icon { width: 100px; height: 100px; }
  .download__title { font-size: 36px; }
  .download__lede { font-size: 19px; }
  .download__note { font-size: 15px; }

  .about__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    gap: 44px;
  }
  .about__card { margin-top: 0; position: sticky; top: calc(var(--header-h) + 24px); }

  .site-footer { padding: 56px 0 44px; }
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    align-items: start;
    gap: 28px 36px;
  }
  .site-footer__brand { margin-bottom: 0; }
  .site-footer__nav { flex-direction: column; gap: 0; margin-bottom: 0; }
  .site-footer__legal { justify-content: flex-end; }
  .site-footer__copy { grid-column: 1 / -1; }

  /* The floating bar is a phone-only affordance */
  .sticky-cta { display: none; }
}

/* ----------------------------------------------------------- desktop and up */
@media (min-width: 1024px) {

  .hero { padding: 76px 0 92px; }
  .hero__inner { grid-template-columns: 1fr 1.06fr; gap: 62px; }
  .hero__title { font-size: 50px; }
  .hero__lede { font-size: 20px; }

  .section { padding: 92px 0; }
  .section__title { font-size: 38px; }

  .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .feature-card { padding: 26px 24px; }
  .feature-card__title { font-size: 20px; }
  .feature-card__text { font-size: 16px; }

  .download__title { font-size: 44px; max-width: 26ch; }

  .wash--rose { width: 420px; height: 420px; }
  .wash--teal { width: 480px; height: 480px; }
  .wash--gold { width: 360px; height: 360px; }
}