/* --------------------------------------------------------------------------
   Layout sections and Picture + Text layout options (src/components/blocks/
   CmsLayout.tsx, CmsPictureText.tsx). Loaded only by a page that has such a
   section; every rule is keyed to a class only they draw, so nothing else on
   the page can change. Breakpoints are the site's: 900px and 640px.
   -------------------------------------------------------------------------- */

/* ---- the section ---- */
.cmsfx--compact { padding-block: 48px; }
.cmsfx--flush { padding-block: 0; }
.cmsfx--bleed { padding-inline: 0; }
.cmsfx__wrap--full { max-width: var(--wrap-wide); }

/* ---- rows and columns ---- */
.cmsfx__row { display: grid; grid-template-columns: var(--fx-cols, 1fr); gap: var(--fx-gap, 48px); align-items: start; }
.cmsfx__row + .cmsfx__row { margin-top: 56px; }
.cmsfx--bleed .cmsfx__row + .cmsfx__row, .cmsfx--flush .cmsfx__row + .cmsfx__row { margin-top: 0; }
.cmsfx__row--center { align-items: center; }
.cmsfx__row--bottom { align-items: end; }
.cmsfx__row--stretch { align-items: stretch; }
.cmsfx__col { min-width: 0; display: flex; flex-direction: column; }
.cmsfx__col--center { justify-content: center; }
.cmsfx__col--bottom { justify-content: flex-end; }
.cmsfx__col--pad { padding: var(--fx-pad); }
.cmsfx__col--bone { background: var(--bone); }
.cmsfx__col--white { background: #fff; }
.cmsfx__col--ink { background: var(--ink); color: #fff; --body: rgba(255, 255, 255, .86); --body-strong: rgba(255, 255, 255, .94); --muted: rgba(255, 255, 255, .74); }
.cmsfx__col--ink .lede { color: var(--on-dark); }
.section--ink .cmsfx__col .lede { color: var(--on-dark); }
.cmsfx--bleed .cmsfx__col:not(.cmsfx__col--pad) > :not(.cmsfx__media):not(.cmsfx__nest) { padding-inline: var(--gutter); }

/* ---- elements: the site's own spacing between things ---- */
/* In a Layout section only (:where adds no weight): a hero or band made flexible keeps the site's own spacing. */
:where(.cmsfx) .cmsfx__col > * + * { margin-top: 20px; }
:where(.cmsfx) .cmsfx__col > .eyebrow + * { margin-top: 0; }
:where(.cmsfx) .cmsfx__col > .display + .cmsfx__text { margin-top: 22px; }
:where(.cmsfx) .cmsfx__col > * + .cmsfx__button, :where(.cmsfx) .cmsfx__col > * + .cmsfx__link { margin-top: 28px; }
:where(.cmsfx) .cmsfx__button + .cmsfx__button { margin-top: 12px; }
.cmsfx__el--align { text-align: var(--fx-align); }
.cmsfx__el--color, .cmsfx__el--color .lede, .cmsfx__el--color a:not(.btn) { color: var(--fx-color); }
.cmsfx__el--size { zoom: var(--fx-size); }
.cmsfx__col > .cmsfx__el--mt { margin-top: var(--fx-mt); }
.cmsfx__el--mb { margin-bottom: var(--fx-mb); }
.cmsfx__text > * + * { margin-top: 18px; }
.cmsfx__list { margin: 0; padding-left: 1.3em; color: var(--body); font-size: 15px; line-height: 1.85; }
.cmsfx__list li + li { margin-top: 6px; }
.cmsfx__list a, .cmsfx__text a { color: var(--brand); }
.cmsfx__link a { font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); text-decoration: none; }
.cmsfx__link a::after { content: " →"; }
.cmsfx__link a:hover { text-decoration: underline; }
.cmsfx__rule { border: 0; border-top: 1px solid var(--line); margin-block: 8px; }
.section--ink .cmsfx__rule, .cmsfx__col--ink .cmsfx__rule { border-top-color: var(--rule-dark); }
.cmsfx__space { margin: 0 !important; }

/* ---- pictures and videos ---- */
.cmsfx__media { margin: 0; position: relative; overflow: hidden; }
.cmsfx__media img, .cmsfx__media video { display: block; width: 100%; height: auto; object-fit: var(--fx-fit, cover); object-position: var(--fx-pos, center); }
.cmsfx__media:not(.cmsfx__media--auto):not(.cmsfx__media--fill) { aspect-ratio: var(--fx-ratio); }
.cmsfx__media:not(.cmsfx__media--auto):not(.cmsfx__media--fill) img,
.cmsfx__media:not(.cmsfx__media--auto):not(.cmsfx__media--fill) video { height: 100%; }
/* Fill: the picture takes the whole height of its column — the edge-to-edge split. */
.cmsfx__media--fill { flex: 1 1 auto; min-height: 360px; }
.cmsfx__media--fill img { position: absolute; inset: 0; height: 100%; }
.cmsfx--bleed .cmsfx__row--stretch .cmsfx__media--fill { min-height: 520px; }
.cmsfx__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cmsfx__gallery--2 { grid-template-columns: repeat(2, 1fr); }
.cmsfx__gallery--4 { grid-template-columns: repeat(4, 1fr); }
.cmsfx__gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* ---- Picture + Text layout options ---- */
.cmspt--bleed { padding-inline: 0; }
.cmspt--bleed .wrap, .cmspt--bleed .panelsplit { max-width: none; }
.cmspt--full .wrap { max-width: var(--wrap-wide); }
.cmspt--full .panelsplit { max-width: var(--wrap-wide); }
.cmspt--ratio .split, .cmspt--ratio .panelsplit { grid-template-columns: var(--cmspt-cols); }
.cmspt--gap .split { gap: var(--cmspt-gap); }
.cmspt--top .split, .cmspt--top .panelsplit__copy { align-items: start; justify-content: flex-start; }
.cmspt--bottom .split { align-items: end; }
.cmspt--bottom .panelsplit__copy { justify-content: flex-end; }
.cmspt--contain .frame img, .cmspt--contain .panelsplit__media img { object-fit: contain; }
.cmspt--crop .frame { aspect-ratio: var(--cmspt-crop); height: auto; }
.cmspt--crop .frame img { height: 100%; }
.cmspt--fill .split { align-items: stretch; }
.cmspt--fill .frame { aspect-ratio: auto; height: 100%; min-height: 360px; position: relative; }
.cmspt--fill .frame img { position: absolute; inset: 0; height: 100%; }

@media (max-width: 900px) {
  .cmsfx__row--stack-tablet { grid-template-columns: 1fr; }
  .cmsfx__row--stack-tablet.cmsfx__row--reverse > :first-child { order: 2; }
  .cmsfx__row + .cmsfx__row { margin-top: 40px; }
  .cmsfx__col--pad { padding: min(var(--fx-pad), 48px) min(var(--fx-pad), 32px); }
  .cmsfx__gallery--4 { grid-template-columns: repeat(2, 1fr); }
  .cmspt--phone .split, .cmspt--phone .panelsplit { grid-template-columns: var(--cmspt-cols, 1fr 1fr); }
  .cmspt--textfirst:not(.cmspt--phone) .split > .frame, .cmspt--textfirst:not(.cmspt--phone) .panelsplit > .panelsplit__media { order: 2; }
}
@media (max-width: 640px) {
  .cmsfx__row--stack-phone { grid-template-columns: 1fr; }
  .cmsfx__row--stack-phone.cmsfx__row--reverse > :first-child { order: 2; }
  .cmsfx__col--pad { padding: min(var(--fx-pad), 40px) min(var(--fx-pad), 24px); }
  .cmsfx__gallery, .cmsfx__gallery--3 { grid-template-columns: repeat(2, 1fr); }
  .cmspt--phone .split, .cmspt--phone .panelsplit { grid-template-columns: 1fr; }
  .cmspt--textfirst .split > .frame, .cmspt--textfirst .panelsplit > .panelsplit__media { order: 2; }
}
/* An edge-to-edge standard split keeps its text off the screen's edge. */
.cmspt--bleed .split > div:not(.frame) { padding-inline: var(--gutter); }

/* Slideshows, videos with settings and Vimeo players in a Layout section fill their shape;
   a slideshow or player "as the picture" is 16:9, since it has no single picture to follow. */
.cmsfx__media--slides.cmsfx__media--auto, .cmsfx__media--embed.cmsfx__media--auto { aspect-ratio: 16 / 9; }
.cmsfx__media .cmsslides__slide { object-fit: var(--fx-fit, cover); object-position: var(--fx-pos, center); }
.cmsfx__media .cmsvideo { object-fit: var(--fx-fit, cover); object-position: var(--fx-pos, center); }
.cmsfx__media--video.cmsfx__media--auto .cmsvideo { position: static; height: auto; }
.cmsfx__media--video.cmsfx__media--auto { aspect-ratio: auto; }
.cmsfx__media--video.cmsfx__media--fill .cmsvideo, .cmsfx__media--slides.cmsfx__media--fill .cmsslides { position: absolute; inset: 0; }
.cmsfx__media--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Visual editor freedom: rows, columns and containers' own look ---- */
.cmsfx__row--justify-start { justify-content: start; }
.cmsfx__row--justify-center { justify-content: center; }
.cmsfx__row--justify-end { justify-content: end; }
.cmsfx__row--justify-between { justify-content: space-between; }
.cmsfx__row--pad, .cmsfx__box--pad { padding: var(--fx-boxpad); }
.cmsfx__col--bg, .cmsfx__row--bg, .cmsfx__box--bg { background: var(--fx-bg); }
.cmsfx__col--border, .cmsfx__row--border, .cmsfx__box--border { border: var(--fx-border); }
.cmsfx__col--radius, .cmsfx__row--radius, .cmsfx__box--radius { border-radius: var(--fx-radius); }
.cmsfx__col--minh, .cmsfx__row--minh, .cmsfx__box--minh { min-height: var(--fx-minh); }
.cmsfx__col--maxw, .cmsfx__row--maxw, .cmsfx__box--maxw { max-width: var(--fx-maxw); margin-inline: auto; width: 100%; }
.cmsfx__col--clip, .cmsfx__row--clip, .cmsfx__box--clip { overflow: hidden; }
.cmsfx__col--items-start { align-items: flex-start; }
.cmsfx__col--items-center { align-items: center; }
.cmsfx__col--items-end { align-items: flex-end; }
.cmsfx__col--items-stretch { align-items: stretch; }
.cmsfx__col--gap { gap: var(--fx-colgap); }
.cmsfx__col--gap > * + * { margin-top: 0; }

/* A container: a box of elements laid out as a flex row/column or a grid. */
.cmsfx__box { min-width: 0; gap: var(--fx-boxgap, 20px); }
.cmsfx__box--flex { display: flex; }
.cmsfx__box--column { flex-direction: column; }
.cmsfx__box--row { flex-direction: row; }
.cmsfx__box--row > * { flex: 1 1 0; min-width: 0; }
.cmsfx__box--wrap { flex-wrap: wrap; }
.cmsfx__box--grid { display: grid; grid-template-columns: repeat(var(--fx-gridcols, 2), minmax(0, 1fr)); }
.cmsfx__box--justify-start { justify-content: flex-start; }
.cmsfx__box--justify-center { justify-content: center; }
.cmsfx__box--justify-end { justify-content: flex-end; }
.cmsfx__box--justify-between { justify-content: space-between; }
.cmsfx__box--items-start { align-items: start; }
.cmsfx__box--items-center { align-items: center; }
.cmsfx__box--items-end { align-items: end; }
.cmsfx__box--items-stretch { align-items: stretch; }
.cmsfx__box > * { margin: 0; }
.cmsfx__box > .cmsfx__el--mt { margin-top: var(--fx-mt); }
/* A schedule (container "details"): the site's own definition list, its rows as elements. */
.cmsfx__box--details { gap: 0; }
.cmsfx__box--details > .deflist__row { margin: 0; }

/* ---- figures, icons and lists as elements ---- */
.cmsfx__figure { display: flex; flex-direction: column; gap: 4px; }
.cmsfx__figurenum { font-family: var(--display, inherit); font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--brand); }
.cmsfx__figurelabel { font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.cmsfx__figuredetail { font-size: 14px; color: var(--muted); }
.cmsfx__el--align.cmsfx__figure { align-items: var(--fx-align); }
.cmsfx__icon { display: inline-flex; width: var(--fx-icon, 32px); height: var(--fx-icon, 32px); color: var(--brand); }
.cmsfx__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmsfx__el--align.cmsfx__icon { align-self: var(--fx-align); }

/* ---- per-screen settings: desktop applies to every size unless tablet or phone override it ---- */
.cmsfx__el--order-d, .cmsfx__col--order-d, .cmsfx__row--order-d { order: var(--fx-order-d); }
@media (min-width: 901px) {
  .cmsfx__el--hide-d, .cmsfx__col--hide-d, .cmsfx__row--hide-d { display: none !important; }
}
@media (max-width: 900px) {
  .cmsfx__row--cols-t { grid-template-columns: var(--fx-cols-t); }
  .cmsfx__row--stacked-t { grid-template-columns: 1fr; }
  .cmsfx__row--gap-t { gap: var(--fx-gap-t); }
  .cmsfx__row--pad-t, .cmsfx__box--pad-t { padding: var(--fx-boxpad-t); }
  .cmsfx__box--row-t { flex-direction: row; }
  .cmsfx__box--column-t { flex-direction: column; }
  .cmsfx__box--column-t > * { flex: 0 1 auto; }
  .cmsfx__box--cols-t { grid-template-columns: repeat(var(--fx-gridcols-t), minmax(0, 1fr)); }
  .cmsfx__box--gap-t { gap: var(--fx-boxgap-t); }
  .cmsfx__el--order-t, .cmsfx__col--order-t, .cmsfx__row--order-t { order: var(--fx-order-t); }
  .cmsfx__el--align-t { text-align: var(--fx-align-t); }
  .cmsfx__el--size-t { zoom: var(--fx-size-t); }
  .cmsfx__col > .cmsfx__el--mt-t, .cmsfx__box > .cmsfx__el--mt-t { margin-top: var(--fx-mt-t); }
  .cmsfx__el--mb-t { margin-bottom: var(--fx-mb-t); }
}
@media (min-width: 641px) and (max-width: 900px) {
  .cmsfx__el--hide-t, .cmsfx__col--hide-t, .cmsfx__row--hide-t { display: none !important; }
}
@media (max-width: 640px) {
  .cmsfx__row--cols-m { grid-template-columns: var(--fx-cols-m); }
  .cmsfx__row--stacked-m { grid-template-columns: 1fr; }
  .cmsfx__row--gap-m { gap: var(--fx-gap-m); }
  .cmsfx__row--pad-m, .cmsfx__box--pad-m { padding: var(--fx-boxpad-m); }
  .cmsfx__box--row-m { flex-direction: row; }
  .cmsfx__box--column-m { flex-direction: column; }
  .cmsfx__box--column-m > * { flex: 0 1 auto; }
  .cmsfx__box--cols-m { grid-template-columns: repeat(var(--fx-gridcols-m), minmax(0, 1fr)); }
  .cmsfx__box--gap-m { gap: var(--fx-boxgap-m); }
  .cmsfx__el--order-m, .cmsfx__col--order-m, .cmsfx__row--order-m { order: var(--fx-order-m); }
  .cmsfx__el--align-m { text-align: var(--fx-align-m); }
  .cmsfx__el--size-m { zoom: var(--fx-size-m); }
  .cmsfx__col > .cmsfx__el--mt-m, .cmsfx__box > .cmsfx__el--mt-m { margin-top: var(--fx-mt-m); }
  .cmsfx__el--mb-m { margin-bottom: var(--fx-mb-m); }
  .cmsfx__el--hide-m, .cmsfx__col--hide-m, .cmsfx__row--hide-m { display: none !important; }
}
/* The editor's canvas: something hidden on the website is shown greyed so it can be found and shown again. */
.cmsfx__hiddenpreview { opacity: .35; outline: 1px dashed #8a8a8a; outline-offset: 2px; }

/* ---- heroes, bands and the closing band made flexible: their own frame, the Layout as their content ---- */
.cmsframe__flex { position: relative; width: 100%; flex: 0 0 auto; min-width: 0; }
/* The elements carry the site's own spacing, as the design drew them (the Layout's own spacing is for Layout sections). */
.cmsframe__flex .cmsfx__col:not(.cmsfx__col--gap):not([class*="cmsfx__col--items-"]):not(:has(> [class*="--order-"])) { display: block; }
.cmsframe__overlay { position: absolute; inset: 0; pointer-events: none; }
.cmsframe--noscrim > [class*="__scrim"] { display: none; }
.cmsframe.cmsframe--h-d { height: var(--frame-h-d); min-height: 0; }
.cmsframe--top .pagehero__inner, .cmsframe--top .hero__inner { justify-content: flex-start; padding-top: 56px; }
.cmsframe--bottom .pagehero__inner, .cmsframe--bottom .hero__inner { justify-content: flex-end; padding-bottom: 56px; }
.cmsframe--center .pagehero__inner, .cmsframe--center .hero__inner { justify-content: center; }
.cmsframe--top .cta__inner, .cmsframe--top .awards__inner { align-items: flex-start; padding-top: 40px; }
.cmsframe--bottom .cta__inner, .cmsframe--bottom .awards__inner { align-items: flex-end; padding-bottom: 40px; }
.cmsframe--top.photoband, .cmsframe--bottom.photoband { display: flex; flex-direction: column; }
.cmsframe--bottom.photoband { justify-content: flex-end; }
/* The closing band's row, as .cta__inner lays it out. */
.cmsfx__ctainner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; width: 100%; }
/* The closing band with a video or slideshow behind it, as dim as its picture. */
.cta--media > video, .cta--media > .cmsslides, .cta--media > .cmsvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }

/* ---- the site's own looks, and a few more choices, for any element ---- */
.cmsfx__el--maxw { max-width: var(--fx-maxw); }
.cmsfx__el--maxw.cmsfx__el--align[style*="--fx-align:center"] { margin-inline: auto; }
.btn.cmsfx__btn--sm { padding: 12px 20px; font-size: 10px; }
.btn.cmsfx__btn--lg { padding: 21px 40px; font-size: 12px; }
.btn.cmsfx__btn--bg { background: var(--fx-btnbg); border-color: var(--fx-btnbg); }
.btn.cmsfx__btn--fg { color: var(--fx-btnfg); }
.cmsfx__textlink { margin: 0; }
.cmsfx__part { min-width: 0; }

@media (max-width: 900px) {
  .cmsframe.cmsframe--h-t { height: var(--frame-h-t); min-height: 0; }
}
@media (max-width: 640px) {
  .cmsframe.cmsframe--h-m { height: var(--frame-h-m); min-height: 0; }
}
/* A hero's copy beside its cut-out figure, as .pagehero--split lays them out; the frame's content fills the hero's height. */
.cmsfx__herosplit { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 27vw, 346px); align-items: center; gap: 48px; height: 100%; }
.cmsframe__flex:has(.cmsfx__herosplit) { flex: 1 1 auto; display: flex; flex-direction: column; }
.cmsframe__flex:has(.cmsfx__herosplit) > .cmsfx__row { flex: 1 1 auto; }
.cmsframe__flex:has(.cmsfx__herosplit) > .cmsfx__row > .cmsfx__col { height: 100%; }
@media (max-width: 900px) {
  .cmsfx__herosplit { grid-template-columns: 1fr; align-items: center; }
}