/* mobile: pages. phones only, desktop must stay unchanged. */

@media (max-width: 760px) {
  /* shared page body: room to breathe under the header, clear of the footer */
  .page-body { padding: clamp(48px, 8vh, 72px) var(--g) clamp(40px, 7vh, 64px); }
  .page-note { padding: 4px var(--g) clamp(32px, 6vh, 56px); font-size: 17px; line-height: 1.5; text-wrap: balance; }
  .page-note a { padding-block: 13px; }

  /* join: the itinerary card */
  .week-page { padding: clamp(40px, 6vh, 56px) var(--g) clamp(48px, 9vh, 80px); }
  .itinerary { padding: 44px clamp(22px, 7vw, 34px) 36px; }
  .it-palm { width: 36px; height: 36px; }
  .it-fiji { font-size: clamp(48px, 15vw, 60px); }
  .it-label { margin-top: 12px; font-size: 13px; letter-spacing: .28em; text-indent: .28em; }
  .it-rows { margin-top: 28px; }
  .it-row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 16px 0 15px; }
  .it-day { font-size: 13px; letter-spacing: .16em; line-height: 1.2; }
  .it-what { font-size: 19px; line-height: 1.25; }
  .it-where { font-size: 15px; line-height: 1.25; }
  .it-foot { margin-top: 28px; flex-direction: column; align-items: stretch; gap: 22px; }
  .it-chairs { font-size: 16px; line-height: 1.45; }
  .it-chairs span { margin-bottom: 8px; }
  .it-foot .btn-brass { width: 100%; min-height: 52px; font-size: 15px; }

  /* internships: two even columns, every mark scaled to the column */
  .logo-wall {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px;
    font-size: min(9px, calc((100vw - 2 * var(--g)) / 40));
  }
  .logo-wall .logo { min-width: 0; min-height: 11.5em; padding: 1.6em .8em; }
  .logo-wall .logo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .logo-wall .logo-mark { max-width: 88%; }
  .logo-text span { font-size: 2.1em; }

  /* sign-in forms */
  .login { padding: 34px clamp(20px, 6vw, 30px) 26px; }
  .login-head { margin-bottom: 14px; font-size: 30px; }
  .login-label { margin-top: 20px; font-size: 12px; }
  .login-input { min-height: 54px; margin-top: 10px; padding: 14px 16px; font-size: 17px; }
  .login-btn { min-height: 54px; margin-top: 28px; font-size: 15px; }
  .login-msg { margin-top: 16px; }

  /* faq: full-row tap targets, a clear open state */
  .faq { margin-bottom: 40px; }
  .qa summary { min-height: 68px; gap: 18px; padding: 20px 2px; font-size: 20px; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .qa summary:active { color: var(--accent-text); }
  .qa[open] summary { color: var(--accent-text); }
  .qa-mark { width: 20px; height: 20px; }
  .qa p { padding: 0 2px 26px; font-size: 17px; line-height: 1.6; }

  /* 404: stacked, thumb-sized ways out */
  main.lost { gap: 24px; padding-top: clamp(48px, 8vh, 72px); padding-bottom: clamp(56px, 10vh, 88px); }
  main.lost .lost-line { font-size: 24px; text-wrap: balance; }
  main.lost .lost-ways { flex-direction: column; align-items: center; gap: 6px; width: 100%; }
  main.lost .lost-ways .btn-brass { width: min(100%, 320px); min-height: 52px; }
  main.lost .lost-ways .text-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; }
}

/* touch: a tapped logo shouldn't stay lit like it's selected */
@media (max-width: 760px) and (hover: none) {
  .logo:hover .logo-mark { opacity: .86; color: inherit; }
}

/* landscape phones: short viewport, keep the vertical spacing in proportion */
@media (max-height: 500px) and (max-width: 960px) and (orientation: landscape) {
  .page-body { padding-top: 44px; padding-bottom: 40px; }
  .week-page { padding-top: 32px; }
  .faq { margin-bottom: 32px; }
  .qa summary { min-height: 60px; }
  .page-note a { padding-block: 13px; }
  main.lost { padding-top: 36px; padding-bottom: 48px; }
}