/* ── SECTION ── a band: ground, width, padding, and the gap between what it holds */
/* a frame that already insets its content names it as --frame-gutter, and the band pads only the rest */
.el-section { padding-inline: calc(var(--gutter) - var(--frame-gutter, 0px)); }
.el-section--ground-paper { background: var(--paper); }
.el-section--ground-surface { background: var(--surface); }
.el-section--ground-ink { background: var(--ink); color: var(--paper); --ink-body: var(--paper); --ink-soft: var(--paper-soft); --link-fg: var(--paper); }
.el-section--ground-ink :where(h1, h2, h3, .head--section, .head--item) { color: inherit; }
.el-section--pad-none { padding-block: 0; }
.el-section--pad-half { padding-block: calc(var(--section) / 2); }
.el-section__inner { display: grid; row-gap: var(--stack-gap); max-width: var(--measure); margin-inline: 0 auto; }
.el-section--width-wide > .el-section__inner { max-width: var(--measure-wide); }
.el-section--width-widest > .el-section__inner { max-width: var(--measure-widest); }
.el-section--width-full > .el-section__inner { max-width: none; }
.el-section--gap-none > .el-section__inner { row-gap: 0; }
.el-section--gap-tight > .el-section__inner { row-gap: var(--tight-gap); }
.el-section--gap-head > .el-section__inner { row-gap: var(--head-gap); }
.el-section--gap-inset > .el-section__inner { row-gap: var(--inset); }
.el-section--align-center { text-align: center; }
.el-section--align-center > .el-section__inner { margin-inline: auto; justify-items: center; }
.el-section__inner > * { margin: 0; min-width: 0; max-width: 100%; }
/* bleed: the band runs edge to edge, everything in it — stepping out of the gutter its frame names as --frame-gutter, or dropping its own */
@media not all and (min-width: 30rem) { .el-section--bleed-30rem { padding-inline: 0; margin-inline: calc(var(--frame-gutter, 0px) * -1); } }

/* ── COLUMNS ── the switcher: equal tracks, one column below the stop */
.el-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--inset); }
.el-columns--gap-tight { gap: var(--tight-gap); }
.el-columns--gap-stack { gap: var(--stack-gap); }
.el-columns--gap-head { gap: var(--head-gap); }
.el-columns--gap-section { gap: var(--head-gap) var(--section); }
.el-columns--align-start { align-items: start; }
.el-columns--align-center { align-items: center; }
.el-columns--align-end { align-items: end; }
.el-columns__col { min-width: 0; }
.el-columns--rule > .el-columns__col { border-top: 1px solid var(--hairline); padding-block-start: var(--rule-gap); }
@media (min-width: 30rem) {
  .el-columns--stack-30rem.el-columns--n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-columns--stack-30rem.el-columns--n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-columns--stack-30rem.el-columns--n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 56rem) {
  .el-columns--stack-56rem.el-columns--n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-columns--stack-56rem.el-columns--n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-columns--stack-56rem.el-columns--n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .el-columns--stack-72rem.el-columns--n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-columns--stack-72rem.el-columns--n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-columns--stack-72rem.el-columns--n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.el-columns--stack-never.el-columns--n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.el-columns--stack-never.el-columns--n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.el-columns--stack-never.el-columns--n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── HEADING ── the head rhythm; the title is the rung liquid.css gives its level */
.el-heading--start { text-align: start; }
.el-heading--center { text-align: center; }
.el-heading--center > .lede { margin-inline: auto; }
.el-heading--start > .lede { margin-inline: 0; }
.el-heading--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── TEXT ── prose at the measure */
.el-text--measure { max-width: var(--measure); }
.el-text--center { text-align: center; margin-inline: auto; }
.el-text a { overflow-wrap: anywhere; --link-fg: var(--accent-ink); --link-fg-hover: var(--ink); --link-line: underline var(--hairline); }

/* ── BUTTONS ── the cluster: each button its label's width, labels on one baseline */
.el-buttons { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--stack-gap); }
.el-buttons > .btn { flex: 0 0 auto; }
.el-buttons--gap-tight { gap: var(--tight-gap); }
.el-buttons--gap-one { gap: var(--stack-gap) var(--s1); }
.el-buttons--center { justify-content: center; }
.el-buttons--end { justify-content: flex-end; }
@media not all and (min-width: 30rem) {
  .el-buttons--stack-30rem { flex-direction: column; align-items: flex-start; }
  .el-buttons--stack-30rem.el-buttons--center { align-items: center; }
  .el-buttons--stack-30rem.el-buttons--end { align-items: flex-end; }
}

/* ── SPLIT ── the sidebar: media beside text, one column below the stop */
.el-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--inset); align-items: start; }
.el-split--center { align-items: center; }
.el-split__media { min-width: 0; }
.el-split__body { min-width: 0; }
.el-split__body > * { max-width: var(--measure); }
.el-split--box { gap: 0; background: var(--surface); }
.el-split--box.el-split--reverse { background: var(--paper); }
.el-split--box > .el-split__body { padding: var(--section) var(--gutter); background: var(--paper); border: 1px solid var(--hairline); margin: var(--inset) var(--gutter); }
.el-split--box > .el-split__media > .el-image { max-height: var(--plate-h); }
@media (min-width: 56rem) {
  .el-split--stack-56rem { grid-template-columns: calc((100% - var(--s2)) / var(--phi2)) minmax(0, 1fr); column-gap: var(--s2); }
  .el-split--stack-56rem.el-split--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-split--stack-56rem.el-split--reverse > .el-split__media { order: 2; }
  .el-split--stack-56rem.el-split--reverse:not(.el-split--1-1) { grid-template-columns: minmax(0, 1fr) calc((100% - var(--s2)) / var(--phi2)); }
}
@media (min-width: 72rem) {
  .el-split--stack-72rem { grid-template-columns: calc((100% - var(--s2)) / var(--phi2)) minmax(0, 1fr); column-gap: var(--s2); }
  .el-split--stack-72rem.el-split--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-split--stack-72rem.el-split--reverse > .el-split__media { order: 2; }
  .el-split--stack-72rem.el-split--reverse:not(.el-split--1-1) { grid-template-columns: minmax(0, 1fr) calc((100% - var(--s2)) / var(--phi2)); }
  .el-split--box { column-gap: 0; }
  .el-split--box > .el-split__media > .el-image { width: 100%; height: 100%; max-height: none; min-height: calc(50vw / var(--ratio-card)); aspect-ratio: auto; }
}

/* ── IMAGE ── a slot at its declared ratio, cropped around its focal point */
.el-image { display: block; width: 100%; height: auto; object-fit: cover; object-position: var(--focal); }
.el-image--card { aspect-ratio: var(--ratio-card); }
.el-image--plate { aspect-ratio: var(--ratio-plate); }
.el-image--portrait { aspect-ratio: 3 / 4; }
.el-image--video { aspect-ratio: var(--ratio-video); }
.el-image--post { aspect-ratio: 3 / 2; }
.el-image.slot-empty { display: grid; place-items: center; border: 1px dashed var(--line); }

/* ── VIDEO ── the frame is the ratio's; the player fills it and can never grow it */
.el-video { display: grid; justify-items: center; width: 100%; }
.el-video .video__frame { width: 100%; max-width: 100%; aspect-ratio: var(--ratio-video); background: var(--ink);
                          display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; }
.el-video .video__frame > * { min-width: 0; max-width: 100%; min-height: 0; max-height: 100%; }
.el-video .video__frame wistia-player { display: block; width: 100%; height: 100%; }
/* capped: the site's video slot — its share of the screen from the wide stop (--media-w, liquid.css), and never taller than the film height */
.el-video--cap .video__frame { max-height: var(--film-h); max-width: min(100%, var(--media-w), calc(var(--film-h) * var(--ratio-video))); }
@media (min-width: 56rem) { .el-video--line .video__frame { border: 1px solid var(--accent); } }

/* ── QUOTE ── the quotation, and a signed support line under a rule */
.el-quote { max-width: var(--measure); }
.el-quote__signed { display: grid; gap: var(--tight-gap); margin: 0; padding-block-start: var(--rule-gap); border-top: 1px solid var(--hairline); }
.el-quote__support { margin: 0; }

/* ── CARD ── an image, a title and a line, the whole a link; the roll is 1 → 2 → 3 across */
.el-card { display: grid; align-content: start; text-decoration: none; }
.el-card__title { padding: var(--s-1) var(--s0) 0; border: 1px solid var(--hairline); border-block-end: 0; }
.el-card__meta { padding: 0 var(--s0) var(--s-1); border: 1px solid var(--hairline); border-block-start: 0; }
.el-card:focus-visible .el-image { opacity: calc(1 / var(--qphi)); }
.el-card:focus-visible .el-card__title { color: var(--accent-ink); }
@media (hover: hover) {
  .el-card:hover .el-image { opacity: calc(1 / var(--qphi)); }
  .el-card:hover .el-card__title { color: var(--accent-ink); }
}
.el-card:active .el-image { opacity: calc(1 / var(--sqphi)); }
.el-card:active .el-card__title { color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .el-card .el-image { transition: opacity var(--t-quick) ease; }
  .el-card__title { transition: color var(--t-quick) ease; }
  .el-card:active .el-image { transition-duration: var(--t-press); }
}
.el-card[hidden] { display: none; }
.el-roll { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--head-gap) var(--s1); }
.el-roll--gap-inset { gap: var(--inset) var(--s1); }
@media (min-width: 56rem) { .el-roll { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .el-roll { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── LIST ── plain, ruled rows, or terms and definitions */
.el-list { margin: 0; max-width: var(--measure); }
.el-list--plain { padding-inline-start: var(--head-gap); }
.el-list--ruled { list-style: none; padding: 0; }
.el-list--ruled > li { padding-block: var(--stack-gap); border-bottom: 1px solid var(--hairline); }
.el-list--definition { padding: 0; }
.el-list--definition > dt { font-size: var(--f-1); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.el-list--definition > dd { margin: 0 0 var(--stack-gap); }

/* ── CALENDAR ── the booking frame asks for 745-790px at every step and cannot resize itself */
.el-calendar { width: 100%; }
.el-calendar iframe { display: block; width: 100%; border: 0; min-height: 860px; }

/* ── DIVIDER ── */
.el-divider { border: 0; border-top: 1px solid var(--hairline); margin: 0; width: 100%; }
.el-divider--accent { border-top-color: var(--accent); }