/* v13 (2026-10-08): the phone layout, centred everywhere like No. 05 (Clive: "everything centred, not scattered").
   Every block on a phone stacks in one centred column: the number line, the heading, the text, the buttons,
   the photos and the cards. Cards keep their own inner layout. Desktop is unchanged. */

/* the department cards: an old rule (yanga.css, <=900px) pushed every card into the right-hand column */
@media (max-width: 900px) {
  .pkg .pkg__card.dept__add { grid-column: auto; grid-row: auto; justify-self: stretch; }
}

@media (max-width: 640px) {
  /* ------------------------------------------------ the cover */
  .cv-left, .cv-right { text-align: center; justify-items: center; }
  .cv-say, .cv-say__tr, .stage__role, .stage__sub { text-align: center; justify-items: center; margin-inline: auto; }
  .stage__actions { justify-content: center; }
  .cv-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-stat { text-align: center; justify-items: center; }
  .cv-plus { grid-column: 1 / -1; justify-self: center; text-align: center; justify-items: center; }

  /* ------------------------------------------------ No. 01 the notice: name, then the exhibit, then the words */
  .n-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: center; text-align: center; row-gap: 1.1rem; }
  .n-head { grid-column: 1; grid-row: 1; justify-self: stretch; text-align: center; }
  .n-head .n-eyebrow { justify-content: center; text-align: center; }
  .n-right { grid-column: 1; grid-row: 2; justify-self: center; }
  .n-copy { grid-column: 1; grid-row: 3; text-align: center; max-width: 30rem; }
  .n-actions { flex-direction: row; justify-content: center; align-items: center; gap: .4rem 1.2rem; }
  .exhibit-mount { width: min(52vw, 24vh); }

  /* ------------------------------------------------ No. 02 the exhibits */
  .ex-lead { justify-items: center; text-align: center; }
  .ex-filters { justify-content: center; }
  .ex-lead .howto, .ex-reviewed { justify-content: center; text-align: center; }
  .ex-count { justify-content: center; text-align: center; }
  .ex-end { justify-items: center; text-align: center; }

  /* ------------------------------------------------ No. 04 the Minister */
  .min-copy { justify-items: center; text-align: center; }
  .min-copy .langs { justify-content: center; }
  .min-copy .greet { justify-items: center; text-align: center; }
  .min-copy .label { text-align: center; }
  .orders2__head { flex-direction: column; align-items: center; text-align: center; }
  .orders2__head .howto { justify-content: center; }
  .orders2__grid { margin-inline: auto; }

  /* ------------------------------------------------ No. 05 the groom (the model): its close too */
  .groom__close { flex-direction: column; align-items: center; text-align: center; }

  /* ------------------------------------------------ No. 06 the oath: the seal, the words, the button, one column */
  .oath__head > div { text-align: center; }
  .oath__head .d-sm { text-align: center; }
  .panel__line { text-align: center; }
  .oath__foot { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: .9rem; }
  .oath__foot .seal3d { justify-self: center; }
  .oath__foot .seal3d__hint { left: 50%; right: auto; translate: -50% 0; white-space: nowrap; }
  .oath__sworn { text-align: center; max-width: 22rem; }
  .oath__foot .hold { grid-column: 1; justify-self: center; }

  /* ------------------------------------------------ No. 07 the archive */
  .gal-head { justify-items: center; text-align: center; }
  .gal-head .howto { justify-content: center; margin-inline: auto; }
  .gal-stats { justify-content: center; text-align: center; }
  .gal-stats p { justify-content: center; }
  .arc-sub { flex-direction: column; align-items: center; text-align: center; }
  .arc-sub .howto { justify-content: center; }

  /* ------------------------------------------------ No. 08 the departments */
  .depts .howto { display: flex; justify-content: center; margin-inline: auto; text-align: center; }
  .pkg__bar { flex-direction: column; justify-content: center; text-align: center; }
  .pkg__bar p { justify-items: center; }
  .band { justify-items: center; text-align: center; }
  .band > div { text-align: center; }

  /* ------------------------------------------------ No. 09 jurisdiction */
  .juris__copy { justify-items: center; text-align: center; }
  .stamps-head { flex-direction: column; align-items: center; text-align: center; }
  .pin { justify-items: center; text-align: center; }
  .pin .label { text-align: center; }
  .pin__row { justify-content: center; width: 100%; }
  .map-key { text-align: center; display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem 1rem; }

  /* ------------------------------------------------ No. 10 the diary + No. 11 reports */
  .diary2 .howto, .reports .howto { display: flex; justify-content: center; margin-inline: auto; text-align: center; }

  /* ------------------------------------------------ No. 12 the appointment desk */
  .desk__steps3 { justify-content: center; text-align: center; gap: .8rem 1.4rem; }
  .desk__steps3 li { justify-items: center; text-align: center; }
  .da-step .da-q, .da-step .da-hint, .da-step > legend { text-align: center; }
  .da-field > label { display: block; text-align: center; }
  .da-nav { justify-content: center; gap: 1rem; }

  /* ------------------------------------------------ the close: Prefer to talk + follow */
  .cta2 { justify-items: center; text-align: center; }
  .cta2__talk, .cta2__social { text-align: center; justify-self: stretch; }
  .cta2__btns { justify-content: center; flex-direction: column; align-items: center; }
  .cta2__btns .btn { width: min(100%, 300px); justify-content: center; }
  .cta2 .socials { margin-inline: auto; }

  /* ------------------------------------------------ the footer */
  .foot__grid { justify-items: center; text-align: center; }
  .foot__grid ul { justify-items: center; padding: 0; }
  .foot__grid li a { justify-content: center; }
  .foot__brand .stamped { justify-items: center; margin-inline: auto; }
  .foot__brand .stamped__name { justify-content: center; }
  .foot__small { flex-direction: column; align-items: center; text-align: center; gap: .4rem; }
}

/* the top bar on a narrow phone: the logo badge, sound, menu and "Check your date" must all fit (the name text
   beside the badge goes; the badge itself is the brand mark) */
@media (max-width: 440px) {
  .bar__name { display: none; }
  .bar__right { gap: .4rem; }
}
/* No. 12: the three booking steps in one even row */
@media (max-width: 640px) {
  .desk__steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: 0; }
  .desk__steps3 li { font-size: .82rem; }
}
/* the postcard row scrolls sideways inside the column; centring must not let it grow wider than the screen */
@media (max-width: 640px) {
  .juris__copy > .stamps, .juris__copy > .pin, .juris__copy > .stamps-head, .juris__copy > .map-key { justify-self: stretch; width: 100%; max-width: 100%; min-width: 0; }
  .juris__copy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  body .bar .bar__right .btn { padding: 0 .6em; font-size: .82rem; min-width: 0; }
  body .bar .bar__right { gap: .25rem; }
  body .bar .snd, body .bar .menu-btn { padding: 0 .45rem; min-width: 40px; }
  body .bar { padding-inline: .7rem; }
}
/* the close box must fit the smallest phones: one column, the social cards share the width evenly */
@media (max-width: 640px) {
  .cta2 { grid-template-columns: minmax(0, 1fr); padding-inline: clamp(.9rem, 4vw, 1.5rem); }
  .cta2__talk, .cta2__social, .cta2__seal { min-width: 0; max-width: 100%; }
  .cta2 .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
  .cta2 .socials a { min-width: 0; flex-direction: column; justify-content: center; text-align: center; gap: .45rem; padding: .8rem .4rem; }
  .cta2 .socials span { min-width: 0; display: grid; justify-items: center; }
}