/* Cut + settle menu. A full-screen menu sheet that CUTS in (opacity 0 -> 1 in 100ms, linear) while only its
   content column SETTLES (slides -20px -> 0 over 500ms, linear), so it is readable on the second frame and keeps
   landing for 400ms after; out is a plain 300ms ease-out fade (cubic-bezier(0,0,.58,1)) and the column is reset
   only once it is gone. Two columns: a sticky nav column (stays put while you scroll the sheet) beside a long list.
   Below 992px (or 600px with .csm--fold-600) it folds to one column and the close parks as a 70px round button
   fixed top-right. Markup: .csm#id > .csm__grid > nav.csm__nav (with .csm__close[data-csm-close]) +
   .csm__list[data-csm-settle]; open it from any button with aria-controls="id". */
.csm {
  --csm-in: 100ms;                    /* cut in: opacity, linear */
  --csm-settle: 500ms;                /* content column settle, linear */
  --csm-from: -20px;                  /* where the settle starts (y) */
  --csm-out: 300ms;                   /* fade out */
  --csm-out-ease: cubic-bezier(0, 0, .58, 1);   /* Webflow easeOut */
  --csm-sticky-top: 20px;             /* nav column sticks this far from the top of the sheet */
  --csm-cols: minmax(1px, .5fr) minmax(1px, 1fr);
  --csm-gap: 30px;
  --csm-pad: 30px 30px 60px;
  --csm-bg: #fffaed;
  --csm-ink: #2c2c2c;
  --csm-z: 1000;
  --csm-park: 70px;                   /* folded: round close button size */
  --csm-park-inset: 30px;
  position: fixed; inset: 0; z-index: var(--csm-z);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--csm-bg); color: var(--csm-ink);
  opacity: 0; transition: opacity var(--csm-out) var(--csm-out-ease);
}
.csm[hidden] { display: none; }
.csm:focus { outline: none; }          /* it takes focus itself when opened by pointer */
.csm.is-open { opacity: 1; transition: opacity var(--csm-in) linear; }
.csm:not(.is-open) { pointer-events: none; }   /* the page is clickable again the moment the fade-out starts */

.csm__grid { display: grid; grid-template-columns: var(--csm-cols); gap: var(--csm-gap); align-items: start; padding: var(--csm-pad); }
/* (padding sits on the grid, not the scrolling sheet, so the sticky top is measured from the screen edge) */
.csm__nav { position: sticky; top: var(--csm-sticky-top); z-index: 1; }

/* the settle: reset only after the fade-out has finished (delay = --csm-out), so it never jumps while visible */
.csm [data-csm-settle] { transform: translateY(var(--csm-from)); transition: transform 0s linear var(--csm-out); }
.csm.is-open [data-csm-settle] { transform: none; transition: transform var(--csm-settle) linear; }

.csm__close { cursor: pointer; }

/* folded: one column, nav no longer sticky, close parks top-right as a round button (label hidden) */
@media (max-width: 991px) {
  .csm:not(.csm--fold-600) .csm__grid { grid-template-columns: minmax(1px, 1fr); padding-top: 100px; }
  .csm:not(.csm--fold-600) .csm__nav { position: relative; top: auto; }
  .csm:not(.csm--fold-600) .csm__grid .csm__nav .csm__close { position: fixed; top: var(--csm-park-inset); right: var(--csm-park-inset); z-index: 2; width: var(--csm-park); height: var(--csm-park); min-width: 0; margin: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .csm:not(.csm--fold-600) .csm__close-label { display: none; }
}
@media (max-width: 599px) {
  .csm.csm--fold-600 .csm__grid { grid-template-columns: minmax(1px, 1fr); padding-top: 100px; }
  .csm.csm--fold-600 .csm__nav { position: relative; top: auto; }
  .csm.csm--fold-600 .csm__grid .csm__nav .csm__close { position: fixed; top: var(--csm-park-inset); right: var(--csm-park-inset); z-index: 2; width: var(--csm-park); height: var(--csm-park); min-width: 0; margin: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .csm.csm--fold-600 .csm__close-label { display: none; }
}
@media (max-width: 479px) { .csm { --csm-park-inset: 20px; --csm-pad: 30px 20px 60px; } }

@media (prefers-reduced-motion: reduce) {
  .csm, .csm.is-open, .csm [data-csm-settle], .csm.is-open [data-csm-settle] { transition-duration: 0s; transition-delay: 0s; }
}