/* The existing ivory header grows into its navigation panel. */
html { scrollbar-gutter:stable; }
body.header-menu-open { overflow:hidden; }
.header, .header.scrolled {
  background:var(--cream);isolation:isolate;
}
.header::before {
  content:'';position:absolute;left:0;right:0;top:0;
  height:calc(100% + var(--menu-height,0px));z-index:-1;
  background:var(--cream);border-radius:inherit;
  box-shadow:0 12px 32px #250b1014;pointer-events:none;
  transition:height .6s cubic-bezier(.22,1,.36,1);
}
.header .experience-menu {
  position:absolute;inset:100% 0 auto;width:100%;height:auto;max-height:none;
  margin:0;padding:0;border:0;background:transparent;color:var(--maroon);
  overflow:hidden;visibility:hidden;pointer-events:none;
  clip-path:inset(0 0 100% 0);border-radius:0 0 12px 12px;
  transition:clip-path .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s;
}
.header.is-menu-open .experience-menu {
  visibility:visible;pointer-events:auto;clip-path:inset(0);
  transition-delay:0s;
}
.header .experience-menu-body {
  min-height:0;height:min(590px,calc(100svh - 145px));
  display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:center;
  padding:clamp(28px,4vw,64px) 30px;gap:24px;
  overflow:auto;overscroll-behavior:contain;
}
.header .experience-menu-body > nav { min-width:0; }
.header .experience-menu-body > nav > a {
  font-size:clamp(32px,4.3vw,72px);padding:10px 0;
}
.header .experience-menu-body > nav > .eyebrow { margin-bottom:24px; }
.header .experience-menu-body > nav, .header .menu-preview {
  opacity:0;transform:translateY(-12px);
  transition:opacity .2s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.header.is-menu-open .experience-menu-body > nav,
.header.is-menu-open .menu-preview { opacity:1;transform:none;transition-delay:.15s; }
.header .menu-preview {
  min-height:0;margin:0;align-self:stretch;border-radius:0;background:none;
}
.header .menu-preview > img { width:100%;max-height:100%;object-fit:contain; }
.header .main-nav { transition:opacity .2s; }
.header.is-menu-open .main-nav { opacity:0;visibility:hidden; }
.header .menu-toggle > span { transition:transform .4s cubic-bezier(.22,1,.36,1); }
@media (max-width:1150px) {
  .header .experience-menu-body { padding-left:22px;padding-right:22px; }
}
@media (max-width:850px) {
  .header .experience-menu-body {
    grid-template-columns:1fr;height:min(410px,calc(100svh - 118px));
    padding:32px 20px;gap:0;
  }
  .header .experience-menu-body > nav > a { font-size:clamp(32px,6vw,54px);padding:12px 0; }
  .header .menu-preview { display:none; }
}
@media (max-width:560px) {
  .header .experience-menu-body { padding:28px 15px;height:min(350px,calc(100svh - 105px)); }
  .header .experience-menu-body > nav > a { font-size:clamp(28px,8vw,42px); }
}
@media (prefers-reduced-motion:reduce) {
  .header::before, .header .experience-menu, .header .experience-menu-body > nav,
  .header .menu-preview, .header .menu-toggle > span { transition:none; }
}

/* One grid for the header row and expanded contents, at every breakpoint. */
.header { --header-inset:30px;padding-inline:var(--header-inset); }
.header .experience-menu-body {
  padding-inline:var(--header-inset);
  grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;
}
.header .experience-menu-body > nav { grid-column:1 / 7; }
.header .menu-preview { grid-column:8 / -1;width:100%;justify-self:end; }
.header .menu-preview > img { width:100%;max-width:100%; }
@media(max-width:1150px) { .header { --header-inset:22px; } }
@media(max-width:850px) {
  .header { --header-inset:20px; }
  .header .experience-menu-body > nav { grid-column:1 / -1; }
}
@media(max-width:560px) { .header { --header-inset:15px; } }

/* A red scrim separates the expanded header from the page beneath it. */
.header-menu-backdrop {
  position:fixed;inset:0;z-index:49;
  background:linear-gradient(to bottom,rgba(227,30,38,.75),rgba(227,30,38,.20));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s ease,visibility 0s .4s;
}
body.header-menu-open .header-menu-backdrop {
  opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;
}
@media(prefers-reduced-motion:reduce) { .header-menu-backdrop { transition:none; } }

/* Align menu copy with the TINTIN lettering inside the combined logo. */
.header .experience-menu-body > nav { padding-left:var(--logotype-offset,50px); }