/* Grace Time Travel — mobile-first layout scale, shared by every page.
 *
 * The pages keep the design's inline styles, but spacing that should be tighter on small screens is
 * written as a multiple of these variables, e.g. padding: calc(88px * var(--sy)) var(--gutter).
 * The base values below are for phones; the media queries step up to the full design at 1024px+.
 *
 *   --gutter  side padding of every section
 *   --sy      vertical section spacing (paddings 36px and up)
 *   --sg      large gaps between columns and cards (32px and up)
 *   --sh      minimum height of the big photo headers
 *   --cols-2  enquiry forms and the "at a glance" list: one column on phones, two from 600px
 */
:root {
  --gutter: 16px;
  --sy: 0.6;
  --sg: 0.6;
  --sh: 0.72;
  --cols-2: minmax(0, 1fr);
}
@media (min-width: 600px) {
  :root {
    --gutter: 24px;
    --sy: 0.8;
    --sg: 0.8;
    --sh: 0.85;
    --cols-2: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  :root { --sy: 1; --sg: 1; --sh: 1; }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }

/* Menu (hamburger) button used by the page headers on small screens */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid #C9CFDB; border-radius: 999px;
  background: transparent; color: #12397A; cursor: pointer;
}
.menu-btn .i-close { display: none; }
.menu-open .menu-btn .i-open { display: none; }
.menu-open .menu-btn .i-close { display: inline; }