/* ==========================================================================
   PAGES
   Page-level composition and every responsive rule that belongs to a
   section rather than to a component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Surfaces
   Two darks, alternating down every page. Not scoped to a page class: the
   home page was the only one when this was written, and every page since
   wants the same two surfaces in the same order.
   -------------------------------------------------------------------------- */
.surface--paper { background: var(--paper); color: var(--on-paper); }

/* ==========================================================================
   RESPONSIVE

   Five tiers, each doing one job:

     1180  the footer drops from four columns to two
     1024  every two column content layout becomes one
      900  the nav becomes a drawer and the timeline moves to a left spine
      640  section heads stack, grids become single column, buttons may wrap
      420  the tightest phones: type and padding step down once more

   A grid child defaults to min-width auto, which lets a long word push the
   track wider than the viewport. Every grid child on this page is therefore
   given min-width: 0, which is what stopped the booking column overflowing
   between 1024 and 820.
   ========================================================================== */

.services__grid > *,
.enquiry__grid > *,
.why__grid > *,
.booking__item > *,
.footer__grid > *,
.reviews__grid > *,
.split__grid > *,
.cards__grid > *,
.styles__grid > *,
.pricing__grid > *,
.compare__row > *,
.specs__item > *,
.pair > *,
.trio > * { min-width: 0; }

/* ---------- 1180 ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ---------- 1024 ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .printroom__stage { --album-w: 62vw; --album-x: 58%; }

  .services__grid { grid-template-columns: 1fr; }
  .services__viewer { display: none; }

  .enquiry__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .why__media { max-width: 34rem; }

  .reviews__grid { grid-template-columns: repeat(2, 1fr); }

  /* Every split becomes one column, and the photograph goes under the text
     rather than beside it. A sticky media column with nothing beside it
     just sticks to nothing. */
  .split__grid--7-5,
  .split__grid--5-7 { grid-template-columns: 1fr; }
  .split__media { position: static; max-width: 34rem; }

  /* The flipped splits put the photograph first at desktop width. Stacked,
     that buries the heading below an image, so the text comes back up. */
  .split__grid--flip .split__body { order: -1; }

  .cards__grid { grid-template-columns: repeat(2, 1fr); }
  .styles__grid { grid-template-columns: repeat(3, 1fr); }
  .pricing__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .tier--lead { order: -1; }
}

/* ---------- 900 ----------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --header-h: 72px; }

  .header__nav { display: none; }
  .header__burger { display: block; }

  .hero__img { object-position: 58% 42%; animation: none; transform: none; }
  .hero__media { animation: none; clip-path: none; }
  .hero__veil {
    background: linear-gradient(to top,
      rgba(18, 16, 14, 0.95) 0%,
      rgba(18, 16, 14, 0.72) 42%,
      rgba(18, 16, 14, 0.22) 74%,
      rgba(18, 16, 14, 0.50) 100%);
  }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .hero__actions { flex-wrap: wrap; gap: var(--s-4); }

  .printroom { height: 420vh; }
  /* Narrow enough that the mount line has somewhere to sit. At 94vw the
     album touched both edges and the outline was cropped away. */
  .printroom__stage { --album-w: 84vw; --album-x: 50%; }
  .printroom__stage { --album-y: 32%; }
  .album__mount { inset: -9px; border-color: rgba(241, 237, 229, 0.34); }
  .printroom__copy {
    top: auto;
    translate: none;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 2.5rem;
    max-width: none;
  }
  .printroom__side { display: none; }
  .printroom__count { bottom: 1rem; }

  /* Baseline alignment lines the thumbnail up with the text baseline, which
     leaves it stranded at the top of the row. The text aligns to the top,
     the photograph to the middle of the row it belongs to. */
  .services__row {
    grid-template-columns: 2rem 1fr 64px;
    align-items: start;
    column-gap: var(--s-4);
  }
  .services__num { padding-top: 0.35em; }
  .services__meta { grid-column: 2 / 3; }
  .services__go { display: none; }
  .services__thumb { display: block; align-self: center; }

  .form__row { grid-template-columns: 1fr; gap: 0; }

  .why__media { grid-template-columns: 1fr; }
  .why__main, .why__sub { grid-column: 1 / -1; }
  .why__sub { display: none; }
  .why__item { grid-template-columns: 1fr; gap: var(--s-2); }

  .work { min-height: 0; }

  /* The index sits under a shorter header at this width. */
  .index__list { padding-block: 0.8rem; }

  .compare__row,
  .specs__item { grid-template-columns: 1fr; gap: var(--s-2); }
  .moves__k { display: block; min-width: 0; margin-right: 0; margin-bottom: var(--s-1); }

  .stack__item:nth-child(2) { margin-left: 0; }
  .trio__item:nth-child(2) { margin-top: 0; }
  .reel__item:nth-child(even) { margin-top: 0; }

  /* The timeline moves off centre and runs down the left edge. The column is
     an odd 21px and the mark is centred in it, so the mark centre lands on
     10.5 and the one pixel spine at left: 10 sits exactly under it. Start
     aligning the mark instead left it four pixels off the line. */
  .booking__spine { left: 10px; }
  .booking__item,
  .booking__item:nth-child(even) {
    grid-template-columns: 21px 1fr;
    gap: var(--s-5);
    align-items: start;
  }
  .booking__mark { grid-column: 1; grid-row: 1; margin-top: 0.6rem; justify-self: center; }
  .booking__media,
  .booking__item:nth-child(even) .booking__media {
    grid-column: 2; grid-row: 2;
    margin-top: var(--s-2);
    justify-self: start;
    font-size: 3rem;
  }
  .booking__body,
  .booking__item:nth-child(even) .booking__body {
    grid-column: 2; grid-row: 1;
    max-width: none;
    margin-left: 0;
  }
}

/* ---------- 640 ----------------------------------------------------------- */
@media (max-width: 640px) {
  /* A head that sits on one line at desktop has to stack, and its aside can
     no longer refuse to wrap. */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .section-head__aside { white-space: normal; }

  /* Same for the row that closes a section. */
  .section-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
  }

  .reviews__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .footer__base { justify-content: flex-start; }

  .enquiry__panel { padding: var(--s-6) var(--s-5); }

  /* Stacked fields do not need desktop's column gap between them as well. */
  .field { margin-bottom: var(--s-5); }
  .picks { margin-bottom: var(--s-6); }
  .form__foot { gap: var(--s-4); }

  /* Wide tracking is what pushes a label onto a second line. It comes down
     rather than the type size, so the buttons keep their weight. */
  .btn,
  .btn-outline,
  .header__cta { letter-spacing: 0.1em; }
  .btn { padding: 1rem 1.5rem; }
  .btn-outline { padding: 0.8rem 1.25rem; }

  .work__img { height: min(42vh, 20rem); }
  .work__item--tall .work__img { height: min(52vh, 25rem); }

  /* Three photographs across a phone is three postage stamps. */
  .trio { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .cards__grid { grid-template-columns: 1fr; }
  .styles__grid { grid-template-columns: repeat(2, 1fr); }
  .band--inset img { aspect-ratio: 16 / 10; }
  .narrow__body { text-align: left; }
  .narrow__body .eyebrow { justify-content: flex-start; }
  .narrow__body .section-cta { justify-content: flex-start; }
  .quote { min-height: min(52vh, 26rem); }
  .quote__line { max-width: none; }
  .tier__figure { font-size: 1.75rem; }

  .cities__list { gap: 0.2rem 1.1rem; }
  .cities__item { gap: 1.1rem; }

  /* Enough to clear the floating WhatsApp button and no more. It sits 16px
     off the bottom and is 56px tall, so 4.5rem covers its whole reach. */
  .footer { padding-bottom: 4.5rem; }
}

/* ---------- 420 ----------------------------------------------------------- */
@media (max-width: 420px) {
  /* Long labels wrap rather than setting a floor on the page width. */
  .btn,
  .btn-outline {
    white-space: normal;
    text-align: left;
  }

  .btn { padding: 1rem 1.4rem; }
  .btn-outline { padding: 0.8rem 1.1rem; }

  .hero__actions { align-items: stretch; }
  .hero__actions .btn { justify-content: center; text-align: center; }

  .enquiry__panel { padding: var(--s-5) var(--s-4); }

  .services__row { grid-template-columns: 1.75rem 1fr 52px; column-gap: var(--s-3); }
  .services__thumb { width: 52px; }

  .printroom__stage { --album-w: 88vw; }

  .booking__media { font-size: 2.5rem; }

  .work__img { height: min(38vh, 17rem); }
  .work__item--tall .work__img { height: min(46vh, 21rem); }

  .styles__grid { grid-template-columns: 1fr; }
  .reel__item,
  .reel__item--wide { width: min(78vw, 20rem); }
  .shot img { height: min(46vh, 22rem); }

  .social { width: 38px; height: 38px; }
  .social__icon { width: 15px; height: 15px; }

  .whatsapp { width: 50px; height: 50px; }
  .whatsapp__icon { width: 25px; height: 25px; }
}

/* ==========================================================================
   FALLBACK
   No script, or motion reduced. The album cannot turn, so it lies out and
   every page is still on the screen.
   ========================================================================== */
.printroom--flat,
.no-js .printroom { height: auto; }

.printroom--flat .printroom__stage,
.no-js .printroom .printroom__stage {
  position: static;
  height: auto;
  padding-block: var(--section-y);
  overflow: visible;
}

.printroom--flat .printroom__paper,
.no-js .printroom .printroom__paper { position: absolute; inset: 0; }

.printroom--flat .printroom__open,
.printroom--flat .album__shade,
.printroom--flat .album__gutter,
.printroom--flat .album__mount,
.printroom--flat .printroom__count,
.no-js .printroom .printroom__open,
.no-js .printroom .album__shade,
.no-js .printroom .album__gutter,
.no-js .printroom .album__mount,
.no-js .printroom .printroom__count { display: none; }

.printroom--flat .album,
.no-js .printroom .album {
  position: relative;
  top: auto;
  left: auto;
  translate: none;
  transform: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  width: min(100%, var(--container-wide));
  margin-inline: auto;
  padding-inline: var(--gutter);
  aspect-ratio: auto;
  perspective: none;
}

.printroom--flat .album__page,
.printroom--flat .album__stack,
.printroom--flat .album__base,
.no-js .printroom .album__page,
.no-js .printroom .album__stack,
.no-js .printroom .album__base {
  position: static;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 5;
}

.printroom--flat .album__stack,
.printroom--flat .album__leaf,
.no-js .printroom .album__stack,
.no-js .printroom .album__leaf { display: contents; }

.printroom--flat .album__face,
.no-js .printroom .album__face {
  position: static;
  transform: none;
  aspect-ratio: 4 / 5;
  backface-visibility: visible;
}

.printroom--flat .printroom__copy,
.printroom--flat .printroom__side,
.no-js .printroom .printroom__copy,
.no-js .printroom .printroom__side {
  position: static;
  translate: none;
  opacity: 1;
  max-width: none;
  text-align: left;
  margin-top: var(--s-6);
  padding-inline: var(--gutter);
}

/* ==========================================================================
   REDUCED MOTION. Everything off, everything in its final state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .hero__media { clip-path: inset(0%); }
  .hero__img { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .cities__word { transform: none; }
  .booking__spine-fill { transform: scaleY(1); }
  .progress { display: none; }
}