/* Staircase menu (Tone Segurado's burger menu, rewritten). Full-screen sheet of stacked white rows; on open every
   row slides in from the left from a different distance (top row furthest) and they all land together. */
.stm {
  --stm-dur: 250ms;                               /* rows: Webflow easeIn, 250ms */
  --stm-ease: cubic-bezier(.42, 0, 1, 1);
  --stm-fade: 100ms;                              /* sheet opacity 0 -> 1, linear */
  --stm-ink: #161616;
  --stm-sheet: #d8d3c7;
  --stm-frame: #e8e6e0;                           /* 14px page-colour frame round the sheet */
  --stm-row: #fff;
  --stm-current: #0a84ff;
  --stm-top: 83px;                                /* room for the header */
  --stm-row-h: 14vh;
  --stm-size: 8vh;
  --stm-hover: cubic-bezier(.23, 1, .32, 1);      /* 111ms hover swell */
}
.stm__sheet {
  position: fixed; inset: 0; z-index: 1011;
  display: none; flex-direction: column; justify-content: center;
  min-height: 100vh; padding-top: var(--stm-top); box-sizing: border-box;
  background: var(--stm-sheet); border: 14px solid var(--stm-frame); box-shadow: inset 0 0 0 3px var(--stm-ink);
  opacity: 0; overflow: hidden;
}
.stm.is-open .stm__sheet { display: flex; }
.stm__row {
  display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box;
  margin-bottom: -3px; padding-bottom: 1vh; border: 3px solid var(--stm-ink); background: var(--stm-row) no-repeat;
  color: var(--stm-ink); text-decoration: none; text-transform: uppercase; letter-spacing: 5px;
  font: 400 var(--stm-size)/var(--stm-row-h) var(--stm-font, inherit);
  transition: font-size 111ms var(--stm-hover), letter-spacing 111ms var(--stm-hover);
  will-change: transform;
}
.stm__row span { position: relative; }
/* hover: bolder, a hair larger, an arrow points in from each side */
.stm__row:hover { font-weight: 700; font-size: calc(var(--stm-size) * 1.1); }
.stm__row::before, .stm__row::after { content: ''; width: 111px; height: 40px; margin: 0 auto; opacity: 0; flex: none;
  background: var(--stm-arrow) center / contain no-repeat; }
.stm__row::after { transform: scaleX(-1); }
.stm__row:hover::before, .stm__row:hover::after { opacity: 1; }
.stm__row span { margin: 0 4vw; }
.stm__row::before { order: -1; }
/* current page: blue, ringed by a hand-drawn loop */
.stm__row[aria-current] { color: var(--stm-current); position: relative; z-index: 1; background-color: transparent; box-shadow: inset 0 0 0 999px var(--stm-row); }
.stm__row[aria-current] span::after { content: ''; position: absolute; inset: -26% -24% -30%; background: var(--stm-ring) center / 100% 100% no-repeat; pointer-events: none; }
/* burger -> X: Webflow inExpo, 200ms */
.stm__burger { position: relative; z-index: 1012; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--stm-ink); }
.stm__burger i { position: absolute; left: 7px; right: 7px; height: 3px; background: currentColor; border-radius: 2px;
  transition: transform 200ms cubic-bezier(.95, .05, .795, .035); }
.stm__burger i:first-child { top: 12px; } .stm__burger i:last-child { top: 21px; }
.stm.is-open .stm__burger i:first-child { transform: translateY(4.5px) rotate(45deg); }
.stm.is-open .stm__burger i:last-child { transform: translateY(-4.5px) rotate(-45deg); }
@media (max-width: 767px) {
  .stm { --stm-top: 67px; }
  .stm__row { justify-content: flex-start; padding-left: 12%; letter-spacing: 1px; font-size: 9vw; line-height: 13vh; }
  .stm__row:hover { font-size: 9vw; }
  .stm__row::before, .stm__row::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stm__row { transition: none; } }