/* Phone and tablet layout.
 *
 * The supplied build was designed for desktop only. It sizes its text boxes as
 * a share of the screen width, for example width:min(48vw,640px), which is
 * sensible on a laptop and far too narrow on a phone: 48vw of a 375px screen is
 * 180px. Its menu is a single row of links with no phone version, and on the
 * two business pages that row was wider than the screen, which forced the
 * whole page to render zoomed out.
 *
 * Every rule here sits inside a max-width media query, so nothing changes at
 * desktop widths. The build styles everything inline, and an inline style
 * outranks any stylesheet, which is why these rules need !important.
 *
 * The r-* classes are hooks added to the pages for this file. The build's own
 * page script rewrites inline styles as it renders (it inserts spaces into
 * values like min(48vw,640px)), so matching on style text would be fragile.
 * Classes survive it.
 */

/* The phone menu is built by mobile-menu.js. Hidden on desktop. */
.mm-toggle,
.mm-panel { display: none; }


/* ---------- Tablet and phone: 1000px and below -------------------------- */

@media (max-width: 1000px) {

  /* The desktop row of links no longer fits. Replace it with the menu. */
  .mc-nav > .mc-navlinks,
  .dw-nav > div,
  .aa-nav > div,
  .hl-nav > div,
  .cr-nav > div { display: none !important; }

  .mm-toggle { display: flex; }
  .mm-panel:not([hidden]) { display: flex; }

  /* Give the text boxes room they did not have at half the screen width. */
  .r-hero  { width: min(80vw, 600px) !important; }
  .r-band  { width: min(84vw, 640px) !important; }
  .mc-stack,
  .r-focus { width: min(62vw, 440px) !important; }

  /* The homepage darkens the left of its photo so the story reads. On desktop
     that darkening fades to nothing 46% of the way across, and the text never
     goes past it. Widening the text here takes it beyond that point, over the
     bright wall, so carry the same gentle darkening further across. Still a
     sunlit room; the text just keeps its footing. The overlay is static in the
     build, not animated, so overriding it here is safe. */
  .mc-scrim {
    background: linear-gradient(90deg,
      rgba(16, 11, 6, .44) 0%,
      rgba(16, 11, 6, .30) 45%,
      rgba(16, 11, 6, .16) 80%,
      rgba(16, 11, 6, .08) 100%) !important;
  }
}


/* ---------- Phone: 760px and below --------------------------------------- */

@media (max-width: 760px) {

  /* Hero and photo-band text span the screen with a steady side margin. */
  .r-hero,
  .r-band {
    width: auto !important;
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  /* Two-column sections stack: picture above, text below. */
  .r-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Careers job rows: title, details and button stack instead of three
     cramped columns. */
  .r-jobrow {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .r-jobrow > :last-child { justify-self: start !important; }

  /* Homepage story lines use the full width, less a margin each side. */
  .mc-stack,
  .r-focus { width: calc(100vw - 64px) !important; }
}


/* ---------- The phone menu ------------------------------------------------ */

.mm-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #f2ead9;
  background: rgba(20, 16, 11, .42);
  border: 1px solid rgba(214, 180, 130, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.mm-toggle:focus-visible,
.mm-close:focus-visible,
.mm-links a:focus-visible,
.mm-cta:focus-visible,
.mm-home:focus-visible {
  outline: 1px solid #d6b482;
  outline-offset: 4px;
}
/* Two hairlines, the quiet version of the usual three-bar icon. */
.mm-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 16px;
}
.mm-bars span {
  display: block;
  height: 1px;
  background: currentColor;
}

.mm-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  flex-direction: column;
  padding: 18px 24px 36px;
  background: #14100b;
  overflow-y: auto;
  animation: mmFade .35s ease;
}
@keyframes mmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-panel { animation: none; }
}

.mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
}
.mm-home img {
  display: block;
  height: 24px;
  width: auto;
  opacity: .92;
}
.mm-close {
  padding: 11px 16px;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #f2ead9;
  background: none;
  border: 1px solid rgba(214, 180, 130, .5);
  cursor: pointer;
}

.mm-links {
  display: flex;
  flex-direction: column;
  margin: auto 0;
  padding: 40px 0;
}
.mm-links a {
  display: block;
  padding: 14px 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 8.2vw, 2.6rem);
  line-height: 1.15;
  color: #efe7d8;
  text-decoration: none;
  border-bottom: 1px solid rgba(214, 180, 130, .14);
}
.mm-links a:last-child { border-bottom: 0; }
.mm-links a[aria-current="page"] { color: #d6b482; }

.mm-cta {
  align-self: flex-start;
  padding: 15px 28px;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #f2ead9;
  text-decoration: none;
  border: 1px solid rgba(214, 180, 130, .55);
}