/* Phones: the same page, tuned for a thumb and a small screen. Loaded after the other stylesheets. */
@media (max-width: 760px) {
  /* Hero: the artwork sits within the screen, the button is a full-width thumb target. */
  .hero { padding-top: 26px; padding-bottom: 28px; gap: 10px; }
  .hero h1 { font-size: clamp(54px, 13vw, 78px); line-height: 1.02; }
  .hero-copy > p { font-size: 15.5px; line-height: 1.7; margin: 22px 0 22px; }
  .hero .button { width: 100%; }
  .hero-footnote { margin-top: 16px; }
  .hero-art { height: 400px; max-width: 400px; margin: 4px auto 0; }
  .hero-art-float { inset: 6px 0 0; }
  .hero-art .hands { transform: rotate(-4deg) translateY(var(--parallax, 0px)); }
  .art-backdrop { inset: 4% 6% 6% 4%; }

  /* Sections breathe less on a phone but keep their rhythm. */
  .coming-up { padding-top: 6px; }
  .coming-up-inner { border-radius: 18px; }
  .coming-up-count { padding: 12px 18px; }
  .coming-up-count strong { font-size: 30px; }
  .belief-strip { padding: 14px 0; }
  .belief-strip span { font-size: 21px; }
  .about { padding-top: 56px; padding-bottom: 56px; }
  .about h2 { font-size: clamp(36px, 9.4vw, 52px); }
  .about-detail { padding: 22px 20px; margin-top: 22px; }
  .about-detail p { font-size: 15px; line-height: 1.75; }
  .about-detail p + p { margin-top: 12px; }
  h2 { font-size: clamp(36px, 9.4vw, 52px); }
  .values-heading { margin-bottom: 22px; }
  .value-grid { gap: 12px; }
  .value-card { min-height: 0; padding: 26px 22px 20px; }
  .value-icon { font-size: 36px; margin-bottom: 16px; }
  .value-card h3 { font-size: 27px; margin-bottom: 10px; }
  .value-card p { font-size: 15px; line-height: 1.7; }
  .card-caption { padding-top: 20px; }
  .events-home { padding-bottom: 56px; }
  .stories-home { padding-bottom: 56px; }
  .kindness { padding-bottom: 50px; }
  .kindness-inner { padding: 44px 20px 28px; }
  .kindness h2 { font-size: clamp(38px, 10vw, 46px); }
  .kindness-inner > p { margin: 18px auto 22px; }
  .kindness .button { width: 100%; font-size: 14px; }
  .footer-top { padding-bottom: 20px; }

  /* The menu is a solid sheet (a translucent one ghosted the page through it) and the toggle folds into a real cross. */
  .header nav { background: #fffaf7; }
  .menu-toggle[aria-expanded=true] > span:nth-of-type(1) { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] > span:nth-of-type(2) { transform: translateY(-3.5px) rotate(-45deg); }

  /* Touch feedback: buttons dip and shine when pressed, since there is no hover. */
  .button-dark:active { transform: scale(.985); background: var(--rose); }
  .button-dark:active:after, .nav-cta:active:before { animation: button-light .7s ease; }
  .value-card.lit:before { opacity: 1; }
  .value-card.lit .value-icon { transform: rotate(-10deg) scale(1.18); }
  .event-card:active { transform: scale(.985); }

  /* Event page: a bar with the price and a Get tickets button follows the reader until the ticket panel is on screen. */
  .ticket-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #fffaf7f2; border: 1px solid #f0dbe4; box-shadow: 0 16px 45px #8f4d6833; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(calc(100% + 24px)); transition: transform .35s cubic-bezier(.2,.7,.3,1); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ticket-bar.show { transform: none; }
  .ticket-bar b { display: block; font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.03em; color: var(--rose); line-height: 1.1; }
  .ticket-bar small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
  .ticket-bar .button { min-height: 46px; padding: 12px 20px; gap: 12px; flex-shrink: 0; }
  body.has-ticket-bar .event-body { padding-bottom: 110px; }
}
@media (min-width: 761px) { .ticket-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .ticket-bar { transition: none; } }
/* Decorative glows must never widen the page: a phone browser would zoom the whole site out to fit them. */
@media (max-width: 760px) {
  .page-hero { overflow: clip; overflow-clip-margin: 0px; }
  .page-aura { inset: -30% 0 -20%; }
  .ticket-bar .button { max-width: 60%; }
}
/* Touch screens: a soft light passes over cards as they come into view, in place of the hover glow. */
@media (hover: none) {
  .value-card::after, .story::after, .coming-up-inner::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 32%, #ffffff7a 50%, transparent 68%); transform: translateX(-130%); }
  .story, .coming-up-inner { overflow: hidden; }
  .coming-up-inner { position: relative; }
  .motion-ready .value-card.visible::after, .motion-ready .story.visible::after { animation: card-shine 1.2s .3s ease both; }
  .coming-up-inner::after { animation: card-shine 1.3s 1s ease both; }
  @keyframes card-shine { to { transform: translateX(130%); } }
}
@media (hover: none) and (prefers-reduced-motion: reduce) { .value-card::after, .story::after, .coming-up-inner::after { display: none; } }