/* Zoom and mobile.
 *
 * The pages are a measured recreation of a fixed 980px desktop design (fixed widths, exact pixel
 * spacing). This file leaves that design exactly as it is on a normal desktop and adapts it in two
 * steps, keyed on the Tailwind classes the pages already use:
 *
 *   1024px and wider   the desktop design. Wide bands and side paddings shrink with the window, so
 *                      a zoomed-in browser (125% to about 190% on a 1920px screen) never scrolls
 *                      sideways or squeezes a text column to nothing.
 *   below 1024px       the mobile design: phones, tablets, and desktops zoomed past about 190%.
 *                      Centred logo, menu button, one column, and a call / email / WhatsApp bar.
 *
 * The Tailwind runtime injects its own stylesheet after this one, so overrides here use
 * !important to win over a utility class of equal specificity.
 */

html, body { overflow-x: clip; }

/* elements that only exist on mobile; site.js injects them */
.m-menu-btn, .m-menu, .m-contact { display: none; }

/* ------------------------------------------------------------------ desktop, any zoom */
@media (min-width: 1024px) {
  .w-\[980px\]  { max-width: calc(100% - 48px) !important; }
  .w-\[1372px\] { max-width: calc(100% - 80px) !important; }
  .max-w-\[1060px\] { max-width: 100% !important; }

  /* Split image/text bands on Services and About. Their side paddings were measured at 1920px and
     leave almost no text column at 1280px; these keep the 1920px numbers as the maximum. */
  .pl-\[280px\] { padding-left: clamp(40px, calc((100vw - 1372px) / 2 + 6px), 280px) !important; }
  .pr-\[350px\] { padding-right: clamp(40px, calc((100vw - 1372px) / 2 + 76px), 350px) !important; }
  .pl-\[110px\] { padding-left: clamp(40px, 5.7vw, 110px) !important; }
  .pl-\[283px\] { padding-left: clamp(40px, 14.7vw, 283px) !important; }
  .pr-\[283px\] { padding-right: clamp(40px, 14.7vw, 283px) !important; }
  .grid-cols-\[766px_1fr\] { grid-template-columns: 40% 1fr !important; }
  .grid-cols-\[600px_1fr\] { grid-template-columns: minmax(0, 600px) 1fr !important; gap: clamp(48px, 6.8vw, 130px) !important; }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1023px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* ---- containers: full width with a gutter ---- */
  .w-\[980px\], .w-\[1372px\] {
    width: auto !important; max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 22px !important; padding-right: 22px !important;
  }
  .max-w-\[1060px\], .max-w-\[880px\], .max-w-\[780px\], .max-w-\[700px\], .max-w-\[690px\],
  .max-w-\[488px\], .max-w-\[460px\], .max-w-\[420px\] { max-width: 100% !important; }

  /* ---- every multi-column grid becomes one column ---- */
  main .grid, body > section .grid, footer .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }
  .pl-\[280px\], .pl-\[110px\], .pl-\[283px\] { padding-left: 22px !important; }
  .pr-\[350px\], .pr-\[60px\], .pr-\[283px\] { padding-right: 22px !important; }
  .py-\[86px\] { padding-top: 56px !important; padding-bottom: 56px !important; }
  .py-\[70px\] { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pt-\[80px\], .pt-\[74px\], .pt-\[72px\], .pt-\[70px\] { padding-top: 52px !important; }
  .pb-\[86px\], .pb-\[85px\], .pb-\[80px\], .pb-\[74px\], .pb-\[73px\], .pb-\[100px\], .pb-\[96px\] { padding-bottom: 56px !important; }

  /* ---- type: display sizes come down, the small tracked caps keep their size ---- */
  .text-\[60px\], .text-\[56px\] { font-size: 40px !important; }
  .text-\[40px\] { font-size: 31px !important; }
  .text-\[36px\] { font-size: 28px !important; }
  .text-\[30px\] { font-size: 25px !important; }
  .text-\[26px\] { font-size: 21px !important; }
  .text-\[22px\] { font-size: 19px !important; }
  .text-\[20px\] { font-size: 18px !important; }
  .text-\[15px\] { font-size: 14px !important; }
  #hero-sub { letter-spacing: .16em; font-size: 14px !important; }

  /* ---- header: centred mark and name, menu button on the right ---- */
  body > header {
    position: relative !important; height: auto !important;
    padding: 22px 0 18px; border-bottom: 1px solid rgba(213, 207, 198, .7);
  }
  body > header > div { justify-content: center !important; padding-left: 70px !important; padding-right: 70px !important; }
  body > header a:first-child { flex-direction: column; gap: 10px !important; text-align: center; }
  body > header a:first-child img { width: 52px !important; height: 52px !important; }
  body > header a:first-child span { font-size: 15px !important; letter-spacing: .14em; }
  body > header nav { display: none !important; }

  .m-menu-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 55; top: 14px; right: 14px;
    width: 58px; height: 58px; padding: 0; border: 0;
    background: #fff; color: #1A1916; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(213, 207, 198, .6);
  }
  .m-menu-btn:focus-visible, .m-menu-close:focus-visible { outline: 1px solid #1A1916; outline-offset: 2px; }

  /* ---- full-screen menu ---- */
  .m-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 65;
    background: #F9F6F0; padding: 96px 32px calc(40px + env(safe-area-inset-bottom));
    opacity: 0; transition: opacity .3s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto;
  }
  .m-menu[hidden] { display: none; }
  .m-menu.is-open { opacity: 1; }
  .m-menu-close {
    position: absolute; top: 14px; right: 14px; width: 58px; height: 58px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #1A1916; cursor: pointer;
  }
  .m-menu-links { display: flex; flex-direction: column; gap: 22px; }
  .m-menu-links a {
    font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
    font-size: 34px; line-height: 1.1; color: #52504D; text-decoration: none;
  }
  /* the desktop nav hides the current page; the menu shows it, marked in brass */
  .m-menu-links a[aria-current="page"] { color: #AF976A; visibility: visible !important; pointer-events: auto !important; }
  .m-menu-foot { margin-top: auto; padding-top: 40px; border-top: 1px solid #D5CFC6; }
  .m-menu-foot p { margin: 0 0 18px; font-size: 13px; line-height: 1.7; color: #52504D; }
  html.m-menu-open, html.m-menu-open body { overflow: hidden; }

  /* ---- bottom bar: call, email, WhatsApp ---- */
  .m-contact {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #fff; border-top: 1px solid #D5CFC6;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-contact a {
    display: flex; align-items: center; justify-content: center;
    height: 66px; color: #1A1916;
  }
  .m-contact a + a { border-left: 1px solid #D5CFC6; }
  html.m-menu-open .m-contact { display: none; }

  /* ---- hero and image bands ---- */
  section.h-\[1064px\] { height: auto !important; min-height: 560px; }
  section.h-\[1064px\] > .relative { padding-bottom: 72px; }
  #hero-eyebrow { margin-top: 110px !important; }
  #hero-italic { margin-top: 40px !important; font-size: 21px !important; }
  #hero-btn { margin-top: 36px !important; }
  #hero-scroll { margin-top: 48px !important; }
  section.h-\[620px\] { height: 360px !important; }
  section.h-\[560px\] { height: auto !important; min-height: 420px; }
  section.h-\[560px\] > .relative { padding-top: 120px !important; padding-bottom: 72px; height: auto !important; }
  #whowith > .relative { padding-top: 140px !important; }
  #band { height: 40px !important; }
  /* the band photographs were sized for a fixed band height; let them fill the taller mobile band */
  .parallax img { height: 100% !important; width: 100% !important; }
  .pt-\[64px\] { padding-top: 32px !important; }

  /* ---- images that were a fixed size on desktop ---- */
  .h-\[600px\], .h-\[900px\] { height: 340px !important; }
  img.h-full.w-full.object-cover { height: 340px !important; }
  .reveal-img.w-\[412px\], img.w-\[412px\] { width: 100% !important; height: auto !important; aspect-ratio: 412 / 296; }
  img.w-\[250px\] { width: 70% !important; max-width: 280px; height: auto !important; aspect-ratio: 250 / 290; margin-top: 0 !important; }
  #portfolio img.w-\[400px\] { width: 78vw !important; height: auto !important; aspect-ratio: 400 / 439; }
  #portfolio button { display: none; }
  .\[column-count\:3\] { column-count: 2 !important; }

  /* ---- footer stacks ---- */
  footer { padding-bottom: 40px !important; }
  footer .mt-\[6px\] { margin-top: 0 !important; }
  footer .mt-\[40px\] { margin-top: 28px !important; }

  /* ---- contact page ---- */
  .cc-pop { width: min(260px, calc(100vw - 44px)); }
}