/* Mobile layout lives here; desktop styles remain in styles.css. */
@media (max-width: 600px) {
  html { width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
  body { width: 100%; max-width: 100vw; overflow-x: clip; overscroll-behavior-x: none; }
  main { width: 100%; overflow-x: clip; }
  .hero.section { height: 100svh; min-height: 100svh; }
  .about.section, .history.section, .party.section, .contacts.section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .site-header { top: .75rem; left: .75rem; right: .75rem; }
  .site-nav { display: flex; justify-content: center; gap: clamp(.6325rem, 2.645vw, 1.035rem); }
  .site-nav a { font-size: clamp(.792rem, 3.3vw, 1.034rem); }
  .site-nav a:hover, .site-nav a:focus-visible { -webkit-text-stroke: .055em currentColor; }
  .site-nav a:active { -webkit-text-stroke: .095em currentColor; }
  .hero-lockup { top: 9svh; }
  .hero-title { font-size: clamp(2.645rem, 11.21vw, 4.23rem); line-height: .9; width: 100%; max-width: none; }
  .hero-title-line { display: block; white-space: nowrap; }
  .hero-title-line + .hero-title-line { margin-top: 2.4rem; }
  .hero-title .outline-letter { font-size: 1.55em; }
  .hero-stripe { top: 50%; height: 2.2rem; transform: translate(-50%, -50%) rotate(-1deg); }
  .hero-stripe span { font-size: clamp(1rem, 4vw, 1.3rem); }
  .hero-description { width: 86vw; top: 45svh; font-size: clamp(.9rem, 3.5vw, 1.05rem); }
  .hero-next.svg-button { width: clamp(137.8px, 15.6vw, 262.6px); }
  .hero-horovod-shell:hover .hero-horovod,
  .hero-horovod:hover { animation: horovodBounce 3.8s cubic-bezier(.37,0,.63,1) infinite; }
  .hero-horovod-shell.is-frenzied .hero-horovod,
  .hero-horovod-shell.is-frenzied:hover .hero-horovod { animation: horovodFrenzy .28s steps(1,end) infinite; }
  .hero-next.svg-button:hover img.svg-button-hover,
  .hero-next.svg-button:focus-visible img.svg-button-hover { opacity: 0; }
  .hero-next.svg-button:hover img:not(.svg-button-hover),
  .hero-next.svg-button:focus-visible img:not(.svg-button-hover) { opacity: 1; }
  .hero-next.svg-button:active img.svg-button-hover { opacity: 1; }
  .hero-next.svg-button:active img:not(.svg-button-hover) { opacity: 0; }
  .about.section { padding-top: 1.5rem; }
  .about-stage { height: 950px; min-height: 0; margin-top: -4rem; }
  .about-stage .about-copy { width: 52%; max-width: 52%; white-space: normal; text-wrap: pretty; overflow-wrap: anywhere; font-size: clamp(.9rem, 3vw, 1.1rem); line-height: 1.15; }
  .about-stage .about-copy br { display: none; }
  .about-stage .copy-one { left: 14%; top: calc(4% + 120px); }
  .about-stage .copy-two { left: 37%; top: calc(33% + 85px); }
  .about-stage .copy-three { left: 14%; top: calc(62% + 105px); }
  .about-shape--1 { width: 122%; left: -23%; top: -2%; }
  .about-shape--2 { width: 129%; right: -19%; top: 27%; }
  .about-shape--3 { width: 116%; left: -23%; top: 56%; }
  .about-stage .about-copy::before,
  .about-stage .copy-two::before,
  .history-story-copy::before { width: 1.8rem; height: 1.8rem; font-size: 1rem; left: -2.15rem; top: -.2rem; }
  .about-stage .face { left: 56%; top: 18%; width: 35.42%; }
  .about-stage .sticker--1 { left: -4%; top: 14%; width: 43%; }
  .about-stage .sticker--2 { left: -8%; top: 37%; width: 50.3%; }
  .about-stage .sticker--3 { left: -8%; top: 52%; width: 74.3%; }
  .about-stage .sticker--4 { right: 2%; top: 76%; width: 31.4%; }
  .face .pupil { transition: none; }
  .hero-horovod-shell { width: 140vw; bottom: 0; }
  .history.section[data-history-mode="intro"] .history-gallery,
  .history.section[data-history-mode="outro"] .history-gallery { transform: none; opacity: 0; pointer-events: none; }
  .history.section[data-history-mode="reading"] .history-gallery { transform: none; opacity: 1; }
  .history.section { min-height: max(34rem, 80svh); padding-bottom: 1.5rem; }
  .history-story { left: 50%; width: min(72vw, 28rem); text-align: left; }
  .history-story-copy { text-align: left; text-wrap: pretty; }
  .history-content p, .history-photo-caption { text-wrap: pretty; orphans: 2; widows: 2; }
  .history-title-rest { font-size: clamp(1.275rem, 3.9vw, 2.025rem); }
  .history-text--long .history-title-rest { font-size: clamp(1.125rem, 3.45vw, 1.65rem); }
  .history-photo-caption { text-wrap: balance; }
  .history-label { white-space: nowrap; }
  .history-deck { --card-w: min(76vw, 420px); --card-h: calc(var(--card-w) * 1.25); width: calc(var(--card-w) + 2rem); height: calc(var(--card-h) + 3rem); }
  .history-gallery .history-deck { cursor: pointer; }
  .history-nav { display: none; }
  .history-quicknav { position: relative; left: auto; bottom: auto; transform: none; width: calc(100% - 1rem); margin: 5px auto 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
  .history-quicknav button.svg-button { width: 100%; }
  .history-quicknav button.svg-button img.svg-button-hover,
  .history-quicknav button.svg-button:hover img.svg-button-hover,
  .history-quicknav button.svg-button:focus-visible img.svg-button-hover { opacity: 0; }
  .history-quicknav button.svg-button img:not(.svg-button-hover),
  .history-quicknav button.svg-button:hover img:not(.svg-button-hover),
  .history-quicknav button.svg-button:focus-visible img:not(.svg-button-hover) { opacity: 1; }
  .history-quicknav button.svg-button:active img.svg-button-hover { opacity: 1; }
  .history-quicknav button.svg-button:active img:not(.svg-button-hover) { opacity: 0; }
  .contact-content p { width: 88vw; }
  .contact-button.svg-button,
  .contact-button.svg-button:hover,
  .contact-button.svg-button:focus-visible { width: clamp(256.53px, 28.99vw, 490.62px); }
  .contact-content p br { display: none; }
  .svg-button img.svg-button-hover,
  .svg-button:hover img.svg-button-hover,
  .svg-button:focus-visible img.svg-button-hover { opacity: 1 !important; visibility: hidden !important; }
  .svg-button img:not(.svg-button-hover),
  .svg-button:hover img:not(.svg-button-hover),
  .svg-button:focus-visible img:not(.svg-button-hover) { opacity: 1 !important; visibility: visible !important; }
  .svg-button:active img.svg-button-hover { visibility: visible !important; }
  .svg-button:active img:not(.svg-button-hover) { visibility: hidden !important; }
  .history-story-button.text-action:hover,
  .history-story-button.text-action:focus-visible,
  .poster-intro-button.text-action:hover,
  .poster-intro-button.text-action:focus-visible { -webkit-text-stroke-width: .84px; }
  .history-story-button.text-action,
  .poster-intro-button.text-action { -webkit-text-stroke-width: .84px; }
  .history-story-button.text-action:active,
  .poster-intro-button.text-action:active { -webkit-text-stroke-width: 1.75px; }
  .poster-intro-button.text-action,
  .poster-intro-button.text-action:hover,
  .poster-intro-button.text-action:focus-visible { -webkit-text-stroke-width: .59px; }
  .poster-intro-button.text-action:active { -webkit-text-stroke-width: 1.23px; }
  .poster-intro-content { width: 100%; max-width: 24rem; margin: auto; }
  .poster-intro-copy { width: 100%; margin: 0; padding: 0 0 0 2.2rem; font-size: clamp(.85rem, 2.8vw, 1rem); line-height: 1.16; text-align: left; }
  .poster-intro-number { width: 1.8rem; height: 1.8rem; left: 0; top: 0; font-size: 1rem; }
  .poster-intro-button.text-action { display: block; width: max-content; max-width: 100%; margin: 1.1rem auto 0; text-align: left; white-space: normal; }
  .poster-intro-button.text-action::after { content: none; }
  .poster-intro-button.text-action .constructor-word,
  .poster-intro-button.text-action .invitation-word { position: relative; display: block; width: max-content; margin: 0; }
  .poster-intro-button.text-action .constructor-word::after,
  .poster-intro-button.text-action .invitation-word::after { content: ""; position: absolute; display: block; left: 0; right: 0; bottom: -.12em; height: 3px; background: currentColor; }
}