/* Phone layout. Everything inside the media query only applies below 900px wide. */
.nav-toggle { display: none; }
.announce [aria-hidden="true"] { display: none; }

@media (max-width: 900px) {
  html, body { max-width: 100%; }
  body { overflow-x: hidden; }

  /* banner and header (the menu opens with the button) */
  .announce { padding: 10px 20px; }
  .header-inner { flex-wrap: wrap; height: auto; min-height: 70px; padding: 0 20px; }
  .nav-toggle { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; height: 45px; justify-content: center; padding: 0; row-gap: 5px; width: 45px; }
  .nav-toggle span { background-color: #917c6f; display: block; height: 2px; width: 25px; }
  .nav { align-items: flex-start; display: none; flex-basis: 100%; flex-direction: column; padding-bottom: 30px; row-gap: 15px; }
  .header.nav-open .nav { display: flex; }
  .nav a { font-size: 25px; }

  /* album pop-up: photos scroll sideways */
  .av-prev, .av-next { display: none; }
  .av-item { height: 60vh; }
  .av-track { padding: 0 20px; }

  /* page structure */
  .wrap { box-sizing: border-box; max-width: 100%; min-width: 0; padding-left: 20px; padding-right: 20px; width: 100%; }
  main > section { padding-bottom: 50px; padding-top: 50px; }
  main > section:first-of-type { padding-bottom: 0; }
  #i00ka { min-height: 700px; padding: 40px 0; }
  #nosotras-2-2 { padding-bottom: 50px; }

  /* type */
  h1 { font-size: 40px; }
  h2 { font-size: 35px; }
  .eyebrow { font-size: 20px; }
  .card h2 { font-size: 20px; }
  #ivajlk4 { font-size: inherit; }
  .card h3 { font-size: 30px; }
  .tab-panel h3 { font-size: 30px; }
  #i6m06 { max-width: 100%; }
  #iw55wu { column-gap: 20px; }
  #iw55wu b { font-size: 40px; }

  /* two columns become one */
  .split { column-gap: 0; grid-template-columns: 1fr; row-gap: 30px; }
  .split > .media { order: 0; width: 100%; }
  .cards-grid { column-gap: 15px; grid-template-columns: 1fr 1fr; row-gap: 30px; }

  /* gallery */
  .masonry { column-gap: 15px; grid-auto-flow: row; grid-auto-rows: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; row-gap: 15px; }
  .masonry > * { aspect-ratio: 1 / 1; grid-column: auto; grid-row: auto; }

  /* home: friends carousel (swipe), Meet Hop, tabs, subscribe */
  .arrow { display: none; }
  .section-head { box-sizing: border-box; min-width: 0; padding-left: 20px; padding-right: 20px; width: 100%; }
  .hscroll { grid-template-columns: 1fr; row-gap: 30px; }
  .sticky { position: static; }
  #iq5751 { flex-direction: column; row-gap: 15px; }
  #icma6q { flex: none; width: 100%; }
  #meet-side { display: none; }
  #inb22l { box-sizing: border-box; min-width: 0; padding-left: 0; padding-right: 0; width: 100%; }
  .tab-panel { padding-left: 20px; padding-right: 20px; }
  #iwugwj, #i08qhi, #iykzq8 { padding-right: 0; }
  .signup { flex-direction: column; max-width: 100%; }
  #ifw1wq { flex: none; width: 100%; }
  #signup-field { flex-basis: auto; flex-direction: column; }
  #signup-note { position: static; }
  #signup-actions { width: 100%; }
  #id57kh { justify-content: center; width: 100%; }
  #signup-actions .form-sent { margin-top: 10px; position: static; }

  /* contact */
  #id3am8p { max-width: 100%; }

  /* footer and pop-ups */
  .footer-inner { padding-left: 20px; padding-right: 20px; }
  .footer-grid { column-gap: 20px; grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .footer-brand, .footer-col-last { grid-column: 1 / -1; }
  .footer-col, .footer-col-last { align-items: flex-start; text-align: left; }
  .footer-tagline { max-width: 100%; }
  .terms-modal { padding: 20px; }
  .terms-box { padding: 20px; }
  /* banner: the text scrolls sideways (12s per loop) so it fits on one line; every loop starts with 40px of empty space on the left, then "Nuremberg" (40px between phrases) */
  .announce { overflow: hidden; text-align: left; white-space: nowrap; }
  .announce-track { animation: banner-scroll 12s linear infinite; display: inline-flex; margin-left: 20px; }
  .announce-track > span { flex: none; padding-right: 40px; }
  .announce [aria-hidden="true"] { display: inline; }
  @keyframes banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .announce { text-align: center; white-space: normal; }
    .announce-track { animation: none; display: inline; margin-left: 0; }
    .announce-track > span { padding-right: 0; }
    .announce [aria-hidden="true"] { display: none; }
  }

  /* hero: smaller text block, taller image, so the doll's face stays clear */
  #izchi { font-size: 35px; max-width: none; }

  #i6m06 { font-size: 15px; }

  /* buttons: equal width pairs, centered text */
  .actions { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
  .actions .btn { justify-content: center; padding: 0 15px; text-align: center; white-space: nowrap; width: 100%; }
  #contact-actions { align-items: stretch; flex-direction: column; row-gap: 10px; }
  .form-submit { justify-content: center; width: 100%; }

  /* friends carousel: narrower cards and no right padding so the next card peeks out */
  #is562 { padding-left: 0; padding-right: 0; }
  #imhkj { padding-left: 20px; padding-right: 0; }
  #ivyfc { column-gap: 20px; padding-right: 20px; }
  #ivyfc .card { flex-basis: 260px; }

  /* less space between the intro text and the content below it */
  main > section:first-of-type + section { padding-top: 30px; }
  #i00ka + section { padding-top: 50px; }
}