/*
 * The Studio's sections, rows, columns and elements.
 *
 * Linked only by a site whose look is `studio`, so a classic site is untouched
 * by every rule in here. Every color and every measurement is a site token with
 * a fallback, which is what makes a theme a theme: changing --site-color-primary
 * changes the buttons, the links, the icons and the accents together, because
 * none of them names a color of its own.
 *
 * A fallback after a comma is the only place a literal appears, and it is there
 * so that a page rendered before its site has tokens still looks deliberate.
 */

/* ── sections ─────────────────────────────────────────────────────── */

.eb-sec {
    position: relative;
    padding-top: var(--sec-pt, var(--site-section-pad, 72px));
    padding-bottom: var(--sec-pb, var(--site-section-pad, 72px));
    /* A tall band, for a hero. The control has been in the panel since A-2 and
       nothing read it, so setting it did nothing at all. */
    min-height: var(--sec-mh, 0);
    background-color: var(--sec-bg, transparent);
    color: var(--sec-tc, inherit);
    text-align: var(--sec-ta, inherit);

    /* What a section hands down to everything inside it.
       A block's settings are emitted with the prefix of what the block is, so a
       section's button color arrives as --sec-btn-color while the button element
       reads --btn-color. Nothing bridged the two, so setting the button color on
       a band did nothing at all: a call to action on a colored band drew a solid
       primary button on a primary background, which is very nearly invisible. A
       section declares the inherited names for its subtree, which is what custom
       property inheritance is for. */
    --btn-color: var(--sec-btn-color, var(--site-color-primary, #1E6F4E));
    --btn-text: var(--sec-btn-text, var(--site-on-primary, #fff));
    --tc-muted: var(--sec-tc-muted, var(--site-color-textMuted, #5d6a61));
}
.eb-sec[data-eb-bg] {
    background-image: var(--sec-bg-image);
    background-size: cover;
    background-position: center;
}
.eb-sec__veil {
    position: absolute;
    inset: 0;
    background: var(--sec-overlay, rgb(0 0 0 / .35));
    pointer-events: none;
}
/* The fallbacks are the classic shell's own container, on purpose: a site in
   the classic look emits no tokens, and a section converted from a classic block
   has to sit in exactly the same box the block it replaced sat in. A studio-look
   site emits --site-container and --site-gutter, so these never apply there. */
.eb-sec__inner { position: relative; margin-inline: auto; padding-inline: var(--site-gutter, clamp(16px, 3vw, 24px)); }
/* Full width, and its own side padding when a band asks for one: a converted
   announcement bar runs the whole width and still keeps its words twenty pixels
   off the edge, which is what the classic bar did. */
.eb-w-full      { max-width: none; padding-inline: var(--sec-px, 0); }
.eb-w-container { max-width: var(--sec-mw, var(--site-container, 1200px)); }
.eb-w-narrow    { max-width: var(--sec-mw, 760px); }

/* ── rows and columns ─────────────────────────────────────────────── */

.eb-row {
    display: grid;
    grid-template-columns: var(--row-cols, 1fr);
    gap: var(--row-gap, var(--site-space-5, 28px));
    align-items: var(--row-align, start);
    /* A row can be narrower than the band and sit in the middle of it, which is
       how a classic team grid places two people: together, centered, rather than
       one at each end. A row is a block, so with no cap the auto margins do
       nothing. */
    max-width: var(--row-mw, none);
    margin-inline: auto;
}
/* How far a row stands from the one above it, which is the row's gap unless the
   row says otherwise. Two numbers, not one: a classic block that holds a list
   puts forty pixels under its subheading and twenty-four between its tiers, and
   a row whose gap did both jobs could only ever match one of them. `spaceBefore`
   on a row is what writes --row-mt. */
.eb-row { margin-top: var(--row-mt, 0); }
.eb-row + .eb-row { margin-top: var(--row-mt, var(--row-gap, var(--site-space-5, 28px))); }
.eb-row.is-even > .eb-col { height: 100%; }

.eb-col {
    display: flex;
    flex-direction: column;
    gap: var(--col-gap, var(--site-space-4, 20px));
    align-items: var(--col-align, stretch);
    justify-content: var(--col-justify, start);
    min-width: 0;
    /* A column can be capped and centered, which is how a classic team grid draws
       a person: a third of the row, never wider than 320. With no cap the auto
       margins do nothing, so this changes no column that has not asked. */
    max-width: var(--col-mw, none);
    /* Centering is opt-in. Auto inline margins on a grid item make it shrink to
       its content instead of filling its track, so applying them to every column
       narrowed every gallery, every row and every panel on the site. */
    margin-inline: var(--col-mx, 0);
    padding: var(--col-pt, 0) var(--col-px, 0) var(--col-pb, 0);
    background-color: var(--col-bg, transparent);
    /* A panel's own text color, which is how a classic pricing table writes the
       tier it wants chosen: light words on the primary color. */
    color: var(--col-tc, inherit);
    border-radius: var(--col-br, 0);
    border: var(--col-bw, 0) solid var(--col-bc, transparent);
    /* A panel can stand off the page, which is how a classic pricing table marks
       the tier it wants chosen. By name, not by value: see ResponsiveCss. */
    box-shadow: var(--col-shadow, none);
    /* And it can be as tall as the band asks, which is how the picture half of a
       split hero keeps its height when the words half is short. */
    min-height: var(--col-mh, 0);
}
/* A panel in the site's card shape (cardShape): the site's corner radius, which
   a column's own radius setting still overrides. The concave cut comes from the
   shell's .eb-card-shape rule. */
.eb-col.eb-card-shape { border-radius: var(--col-br, var(--site-card-radius, var(--site-radius, 0px))); }

/* A column that is a picture rather than a stack of words. */
.eb-col.has-picture {
    background-image: var(--col-bgi, none);
    background-size: cover;
    background-position: center;
}

/* 768, not 767: the same width App\Builder\Render\ResponsiveCss writes its mobile
   settings at, so a setting and a rule cannot disagree about when a phone starts. */
/* 640, which is where the classic feature grid writes its own media query and so
   where a converted one has to stack too. */
@media (max-width: 640px) {
    .eb-row--stack-narrow { grid-template-columns: 1fr; }
    .eb-row--stack-narrow.is-reversed > .eb-col:first-child { order: 2; }
}
@media (max-width: 768px) {
    .eb-row--stack-mobile { grid-template-columns: 1fr; }
    .eb-row--stack-mobile.is-reversed > .eb-col:first-child { order: 2; }
}
@media (max-width: 1024px) {
    .eb-row--stack-tablet { grid-template-columns: 1fr; }
}

/* ── the shape of an element ──────────────────────────────────────── */

/* Every element carries data-block-id, so this is a class and an attribute and
   beats the single class of a rule further down the file. .eb-heading sets
   margin: 0 and was quietly winning, which meant "space after" did nothing on
   the one element people put it on most. */
/* Centering (`centred`) is --el-mx: auto plus --el-cw: 100%, because auto margins
   on a flex item shrink it to its content. Nothing read --el-mx until 2026-10-02,
   so every capped, centered element a conversion wrote sat at the left. */
[data-block-id].eb-el { margin: var(--el-mt, 0) var(--el-mx, 0) var(--el-mb, 0); width: var(--el-cw, auto); max-width: var(--el-mw, none); text-align: var(--el-ta, inherit); color: var(--el-tc, inherit); opacity: var(--el-op, 1); }
.eb-el__empty,
.eb-sec__empty,
.eb-row__empty,
.eb-col__empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--site-color-border, #d9dfd8);
    border-radius: var(--site-card-radius, var(--site-radius, 10px));
    color: var(--site-color-textMuted, #5d6a61);
    font-size: .875rem;
    text-align: center;
}

/* ── text ─────────────────────────────────────────────────────────── */

.eb-heading {
    margin: 0;
    font-family: var(--site-font-heading, var(--font-heading, inherit));
    font-weight: var(--el-fw, var(--site-heading-weight, 700));
    letter-spacing: var(--site-heading-tracking, -0.01em);
    line-height: var(--el-lh, 1.15);
    color: var(--el-tc, inherit);
}
h1.eb-heading { font-size: var(--el-fs, var(--site-text-4xl, clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem))); }
h2.eb-heading { font-size: var(--el-fs, var(--site-text-3xl, clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem))); }
h3.eb-heading { font-size: var(--el-fs, var(--site-text-2xl, 1.5rem)); }
h4.eb-heading { font-size: var(--el-fs, var(--site-text-xl, 1.2rem)); }

/* The size goes on the element, not on the body inside it. A margin written in
   ems resolves against the font size of the thing it is on, and every classic
   block spaces its paragraphs with the browser's own 1em margin: with the size a
   level down, "one line of its own size" was one line of sixteen pixels rather
   than of the 16.8 the paragraph is actually set in. Wrong by a pixel or two on
   every converted paragraph, and by more on the large ones. */
.eb-text-el { font-size: var(--el-fs, inherit); }
.eb-text-el__body {
    font-family: var(--site-font-body, var(--font-body, inherit));
    font-weight: var(--el-fw, inherit);
    line-height: var(--el-lh, var(--site-lh, 1.65));
    letter-spacing: var(--el-ls, normal);
    text-transform: var(--el-tt, none);
}
.eb-text-el__body > :first-child { margin-top: 0; }
.eb-text-el__body > :last-child { margin-bottom: 0; }
.eb-text-el__body p { margin: 0 0 var(--el-para, .9em); }
.eb-text-el__body a { color: var(--site-primary-text, var(--site-color-primary, #1E6F4E)); }

/* ── buttons ──────────────────────────────────────────────────────── */

.eb-btn-el.is-wide .eb-btn { width: 100%; box-sizing: border-box; }
.eb-btns { display: flex; flex-wrap: wrap; gap: var(--el-gap, 12px); justify-content: var(--el-ta, flex-start); }

/* No borders on a button, on any of the four styles. An outline draws its line as
   an inset shadow instead, so that a button's height is its padding and its line
   and nothing else: with a hairline border a solid button was two pixels taller
   than the one on three live websites, and two pixels taller than the outline
   button beside it would have been without one. */
.eb-btn--solid {
    background: var(--el-btn-color, var(--btn-color, var(--site-color-primary, #1E6F4E)));
    /* A pale button on a colored band needs dark words on it, which a classic
       call to action says outright and this had no way to say. */
    color: var(--el-btn-text, var(--btn-text, var(--site-on-primary, #fff)));
    border: 0;
}
.eb-btn--outline {
    background: transparent;
    color: var(--el-btn-color, var(--btn-color, var(--site-color-primary, #1E6F4E)));
    border: 0;
    box-shadow: inset 0 0 0 1px currentColor;
}
.eb-btn--soft {
    background: color-mix(in srgb, var(--el-btn-color, var(--btn-color, var(--site-color-primary, #1E6F4E))) 14%, transparent);
    color: var(--el-btn-color, var(--btn-color, var(--site-color-primary, #1E6F4E)));
    border: 0;
}
.eb-btn--link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--el-btn-color, var(--btn-color, var(--site-color-primary, #1E6F4E)));
    text-decoration: underline;
}
.eb-btn--sm { padding: .45em 1em; font-size: .875rem; }
.eb-btn--md { padding: .75em 1.5em; }
.eb-btn--lg { padding: .9em 2em; font-size: 1.06rem; }

/* ── pictures ─────────────────────────────────────────────────────── */

.eb-img { margin: 0; }
.eb-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--el-br, var(--site-card-radius, 0)); }
.eb-img--auto img { height: auto; }
.eb-img--1-1 img  { aspect-ratio: 1 / 1; }
.eb-img--4-3 img  { aspect-ratio: 4 / 3; }
.eb-img--3-2 img  { aspect-ratio: 3 / 2; }
.eb-img--16-9 img { aspect-ratio: 16 / 9; }
.eb-img--3-4 img  { aspect-ratio: 3 / 4; }
.eb-img.is-zoomy img { transition: transform .5s var(--site-ease, ease); }
.eb-img.is-zoomy:hover img { transform: scale(1.04); }
/* .5rem, not .5em: the classic block measures the gap from the root font size and
   the caption's own is smaller, so an em put the caption a pixel too close. */
.eb-img__caption { margin-top: .5rem; font-size: .875rem; color: var(--site-color-textMuted, #5d6a61); }
.eb-img__none {
    display: grid;
    place-items: center;
    min-height: 160px;
    border: 1px dashed var(--site-color-border, #d9dfd8);
    border-radius: var(--site-card-radius, 10px);
    color: var(--site-color-textMuted, #5d6a61);
}

/* ── space and rules ──────────────────────────────────────────────── */

.eb-spacer { height: var(--el-height, 40px); }
.eb-divider { border: 0; }
.eb-divider--line  { border-top: 1px solid var(--site-color-border, #d9dfd8); }
.eb-divider--short { border-top: 3px solid var(--site-color-primary, #1E6F4E); width: 64px; margin-inline: auto; border-radius: 3px; }
.eb-divider--dots  {
    height: 6px;
    background-image: radial-gradient(circle, var(--site-color-border, #d9dfd8) 2px, transparent 2px);
    background-size: 14px 6px;
    background-repeat: repeat-x;
}

/* ── quote ────────────────────────────────────────────────────────── */

.eb-quote { margin: 0; padding-left: 1.2em; border-left: 3px solid var(--site-color-primary, #1E6F4E); }
.eb-quote__words { font-size: var(--el-fs, var(--site-text-lg, 1.1rem)); font-style: var(--el-fst, normal); line-height: var(--el-lh, 1.55); }

/* The large opening mark, which is how a classic quote block draws itself: no
   rule down the side, the words in italic, and the name and role on one line. */
.eb-quote--mark, .eb-quote--plain { padding-left: 0; border-left: 0; }
.eb-quote--mark::before {
    content: '\201C';
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 5rem;
    line-height: .6;
    margin-bottom: 1rem;
    color: var(--el-accent, var(--site-color-primary, #1E6F4E));
    opacity: .4;
}
.eb-quote--mark .eb-quote__words { font-style: italic; }
.eb-quote--mark .eb-quote__who { display: block; margin-top: 0; font-size: .95rem; }
.eb-quote--mark .eb-quote__name { display: inline; font-weight: 700; }
.eb-quote--mark .eb-quote__role { display: inline; margin-left: .4rem; font-size: inherit; }
.eb-quote--mark .eb-quote__role::before { content: '\00B7\00A0'; }
/* The numbers a classic testimonial card uses, which are the ones to have: a
   round face, the name in bold at nine tenths, the role smaller and muted, and
   twelve pixels between the face and the words. */
.eb-quote__who { display: flex; align-items: center; gap: .75rem; align-self: stretch; margin-top: 1rem; }
/* The words take the room and the name goes to the bottom of it, so a row of
   equal-height cards lines its names up along the bottom. */
.eb-quote.is-fill { display: flex; flex-direction: column; flex: 1 1 auto; }
.eb-quote.is-fill .eb-quote__who { margin-top: auto; padding-top: 1rem; }
.eb-quote__face { width: var(--el-face, 40px); height: var(--el-face, 40px); border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.eb-quote__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--el-face-bg, var(--site-color-primary, #1E6F4E));
    color: var(--el-face-tc, var(--site-on-primary, #fff));
    font-weight: 700;
    font-size: calc(var(--el-face, 40px) / 2.5);
    line-height: 1;
}
.eb-quote__name { display: block; font-weight: 700; font-size: .9rem; }
.eb-quote__role { display: block; font-size: .8rem; color: var(--site-color-textMuted, #5d6a61); }

/* ── card ─────────────────────────────────────────────────────────── */

.eb-card {
    display: flex;
    flex-direction: column;
    background: var(--el-bg, var(--site-color-surface, #fff));
    border: var(--el-bw, 1px) solid var(--el-bc, var(--site-color-border, #e7ebe6));
    border-radius: var(--el-br, var(--site-card-radius, 12px));
    overflow: hidden;
}
.eb-card__icon { display: block; width: 2rem; height: 2rem; margin-bottom: .75rem; color: var(--el-tc, inherit); }
.eb-card__icon svg { width: 100%; height: 100%; }
.eb-card__icon.is-character { width: auto; height: auto; font-size: 2rem; line-height: 1; }
.eb-card__pic { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.eb-card__body { display: flex; flex-direction: column; gap: .55em; align-items: var(--el-ai, flex-start); padding: var(--el-pt, var(--site-space-4, 20px)) var(--el-px, var(--site-space-4, 20px)) var(--el-pb, var(--site-space-4, 20px)); }

/* A card about a person: a round photograph over the words, and the same
   stand-in a classic team block draws for somebody who has not sent one. */
.eb-card__face {
    display: grid;
    place-items: center;
    width: var(--el-face, 120px);
    height: var(--el-face, 120px);
    margin-bottom: 0;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}
.eb-card--square .eb-card__face { border-radius: var(--el-br, var(--site-card-radius, 0)); }
.eb-card__face--none { background: var(--site-color-primary, #E7EBE6); color: rgb(255 255 255 / .8); }
.eb-card__face--none svg { width: 48px; height: 48px; }
/* A person's card is not a panel: no border and no background, like the classic. */
.eb-card--circle, .eb-card--square { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.eb-card--circle .eb-card__body, .eb-card--square .eb-card__body { padding: var(--el-pt, 0) var(--el-px, 0) var(--el-pb, 0); }
.eb-card__heading { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--el-fs, var(--site-text-lg, 1.1rem)); font-weight: var(--el-fw, var(--site-heading-weight, 700)); }
.eb-card__text { margin: 0; color: var(--el-tc-muted, var(--sec-tc-muted, var(--site-color-textMuted, #5d6a61))); }

/* ── stats ────────────────────────────────────────────────────────── */

.eb-stats { display: grid; grid-template-columns: repeat(var(--el-cols, 3), 1fr); gap: var(--el-gap, 20px); }
.eb-stats__one { text-align: center; }
.eb-stats__num {
    margin: 0;
    font-family: var(--site-font-heading, inherit);
    font-size: var(--el-fs, var(--site-text-3xl, 2.2rem));
    font-weight: var(--el-fw, 700);
    color: var(--el-tc, var(--site-color-primary, #1E6F4E));
}
.eb-stats__label { margin: .2em 0 0; font-size: var(--el-fs-label, .9rem); color: var(--el-tc-muted, var(--sec-tc-muted, var(--site-color-textMuted, #5d6a61))); }

/* ── icon list ────────────────────────────────────────────────────── */

.eb-iconlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--el-cols, 1), 1fr); gap: var(--el-gap, .75rem) var(--el-gap-x, 2rem); }
/* The size of a line, the space between the mark and the words: both the
   caller's, because no two classic blocks that draw a ticked list agree about
   them. A pricing tier's features are 0.9rem with eight pixels of gap and a plain
   icon list is inherited with 9.6, and one rule for both meant one of them was
   always wrong. */
.eb-iconlist__row { display: flex; gap: var(--el-mark-gap, .7em); align-items: flex-start; font-size: var(--el-fs, inherit); }
.eb-iconlist__icon { flex: 0 0 auto; width: var(--il-icon, 22px); height: var(--il-icon, 22px); color: var(--el-tc, var(--site-color-primary, #1E6F4E)); }
/* A character somebody typed rather than a drawing: sized as text, and bold,
   which is how the classic list drew it. */
/* A character somebody typed sits on the first line of the words beside it, not
   on a line and a half of its own: the classic list gives the mark the browser's
   own line height and nudges it down a tenth of a rem. Backwards, it made every
   row four pixels taller than the one it replaced. */
.eb-iconlist__icon.is-character { width: auto; height: auto; font-weight: var(--el-mark-fw, 400); line-height: normal; margin-top: var(--el-mark-mt, 0); }
.eb-iconlist__icon svg { width: 100%; height: 100%; }
.eb-iconlist__title { display: block; font-weight: 600; }
.eb-iconlist__text { display: block; }
/* The words of a plain list, at the line height and the color the classic gives
   them: the ordinary text color, not a muted gray. Muted is right for a feature's
   sentence under its title, which is the layout below, and wrong for a list item,
   where it turned every converted line from black to gray. */
.eb-iconlist--beside .eb-iconlist__words { line-height: var(--el-lh, normal); }
.eb-iconlist--above .eb-iconlist__text { color: var(--el-tc-muted, var(--sec-tc-muted, var(--site-color-textMuted, #5d6a61))); }

/* The icon over the words rather than beside them, which is how a feature reads:
   a larger mark, a title, then a sentence. The mark follows the words' color,
   because a classic feature grid draws it in the section's text color rather
   than in the site's accent. */
.eb-iconlist--above .eb-iconlist__row { display: block; }
.eb-iconlist--above .eb-iconlist__icon { display: block; margin-bottom: 12px; font-size: var(--il-icon, 32px); line-height: 1.2; color: var(--el-tc, currentColor); }
.eb-iconlist--above .eb-iconlist__title { font-size: var(--el-fs, 1.1rem); font-weight: var(--el-fw, 700); margin: 1em 0 8px; }
.eb-iconlist--above .eb-iconlist__text { font-size: var(--el-fs-text, .9rem); line-height: 1.6; margin-top: 1em; }

/* The mark in a filled circle, centered, which is how a classic steps block draws
   its numbers. A shape no element drew, so converting a set of steps turned three
   numbered circles into a stacked list of plain characters. */
.eb-iconlist--circled .eb-iconlist__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--il-mark, 56px);
    height: var(--il-mark, 56px);
    border-radius: 50%;
    background: var(--el-mark-bg, var(--site-color-primary, #1E6F4E));
    color: var(--el-mark-tc, #fff);
    font-size: var(--il-icon, 1.25rem);
    font-weight: var(--el-mark-fw, 800);
    line-height: 1;
}
.eb-iconlist--above.eb-iconlist--circled .eb-iconlist__icon { margin: 0 auto var(--el-mark-mb, 16px); }
.eb-iconlist--above.eb-iconlist--circled .eb-iconlist__icon.is-character { width: var(--il-mark, 56px); height: var(--il-mark, 56px); }
/* A circled mark's own words sit under it without the extra line the plain
   layout adds, because the circle's bottom margin is the space. */
.eb-iconlist--circled .eb-iconlist__title { margin: 1em 0 .4rem; }
.eb-iconlist--above.eb-iconlist--circled .eb-iconlist__text { margin-top: 0; }

/* ── accordion ────────────────────────────────────────────────────── */

.eb-acc { display: grid; gap: var(--el-gap, 2px); }
.eb-acc__one { border-bottom: 1px solid var(--site-color-border, #e7ebe6); }
.eb-acc__q { padding: var(--el-pt, 1rem) 0 var(--el-pb, 1rem); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1em; }
.eb-acc__q::-webkit-details-marker { display: none; }
.eb-acc__q::after { content: '+'; color: var(--site-primary-text, var(--site-color-primary, #1E6F4E)); font-weight: 400; }
.eb-acc__one[open] .eb-acc__q::after { content: '\2212'; }
.eb-acc__a { padding: 0 0 1em; color: var(--el-tc-muted, var(--sec-tc-muted, var(--site-color-textMuted, #5d6a61))); }

/* ── gallery ──────────────────────────────────────────────────────── */

.eb-gal { display: grid; gap: var(--el-gap, 12px); }
.eb-gal--grid { grid-template-columns: repeat(var(--el-cols, 3), 1fr); }
.eb-gal--grid .eb-gal__pic { width: 100%; height: var(--el-height, auto); aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--el-br, var(--site-card-radius, 8px)); }
/* A picture with a caption under it. The rounding is on the figure so the picture
   and its caption are one shape, which is how a classic gallery drew the pair. */
.eb-gal__one { margin: 0; overflow: hidden; border-radius: var(--el-br, var(--site-card-radius, 8px)); }
.eb-gal--grid .eb-gal__one .eb-gal__pic { border-radius: 0; }
.eb-gal__caption {
    margin: 0;
    padding: .4rem .5rem;
    font-size: .75rem;
    color: var(--el-tc-muted, var(--sec-tc-muted, var(--site-color-textMuted, #566159)));
}
/* Captions over the picture (captionPlace = over). */
.eb-gal--over .eb-gal__one { position: relative; }
.eb-gal--over .eb-gal__caption {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.4em .9em .75em;
    color: #fff; font-size: .85rem; text-align: left; opacity: 1;
    background: linear-gradient(to top, rgb(0 0 0 / .6), rgb(0 0 0 / 0));
    pointer-events: none;   /* a click on the words opens the picture under them */
}
/* Opens larger when clicked (opens = larger): a :target viewer, no script. */
.eb-gal__open { display: block; cursor: zoom-in; }
.eb-gal__box {
    display: none; position: fixed; inset: 0; z-index: 400; padding: 4vh 4vw;
    align-items: center; justify-content: center; background: rgb(0 0 0 / .88);
}
.eb-gal__box:target { display: flex; }
.eb-gal__shut { position: absolute; inset: 0; }
.eb-gal__big { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; pointer-events: none; }
.eb-gal__big img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: var(--site-card-radius, 8px); pointer-events: auto; }
.eb-gal__big figcaption { color: #fff; text-align: center; font-size: .95rem; }
.eb-gal__nav, .eb-gal__close { position: absolute; z-index: 1; color: #fff; text-decoration: none; }
.eb-gal__nav { top: 50%; transform: translateY(-50%); font-size: 2.75rem; line-height: 1; padding: .4rem .9rem; }
.eb-gal__nav--prev { left: 1vw; }
.eb-gal__nav--next { right: 1vw; }
.eb-gal__close { top: 2vh; right: 2vw; font-weight: 600; padding: .4em .9em; border-radius: 999px; background: rgb(255 255 255 / .16); }
.eb-gal--masonry { display: block; columns: var(--el-cols, 3); column-gap: var(--el-gap, 12px); }
.eb-gal--masonry .eb-gal__pic { width: 100%; margin-bottom: var(--el-gap, 12px); border-radius: var(--el-br, var(--site-card-radius, 8px)); break-inside: avoid; }
.eb-gal--carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.eb-gal--carousel .eb-gal__pic { flex: 0 0 auto; width: 70%; max-width: 420px; scroll-snap-align: center; border-radius: var(--el-br, var(--site-card-radius, 8px)); }

/* ── video, embed, map ────────────────────────────────────────────── */

.eb-video { position: relative; border-radius: var(--el-br, var(--site-card-radius, 8px)); overflow: hidden; }
.eb-video--16-9 { aspect-ratio: 16 / 9; }
.eb-video--4-3  { aspect-ratio: 4 / 3; }
.eb-video--1-1  { aspect-ratio: 1 / 1; }
.eb-video iframe,
.eb-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

.eb-embed { min-height: var(--embed-h, auto); }
.eb-embed__stand-in {
    margin: 0;
    padding: 20px;
    border: 1px dashed var(--site-color-border, #d9dfd8);
    border-radius: var(--site-card-radius, 10px);
    text-align: center;
    color: var(--site-color-textMuted, #5d6a61);
}

/* Height comes from the setting, per breakpoint, so a map can be short on a
   phone. It was read in PHP and written as a second variable, which meant the
   tablet and mobile values were computed, saved, and ignored. */
.eb-map { height: var(--el-height, 320px); border-radius: var(--el-br, var(--site-card-radius, 8px)); overflow: hidden; }
.eb-map iframe { width: 100%; height: 100%; border: 0; }

/* ── social and logos ─────────────────────────────────────────────── */

.eb-social { list-style: none; display: flex; gap: var(--el-gap, 12px); margin: 0; padding: 0; justify-content: var(--el-ta, flex-start); }
.eb-social__one { display: inline-grid; place-items: center; width: var(--soc-size, 34px); height: var(--soc-size, 34px); border-radius: 50%; color: var(--el-tc, inherit); }
.eb-social__one:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.eb-social__one svg { width: var(--soc-icon, 18px); height: var(--soc-icon, 18px); }
/* The form element hands its cap to the form inside it, which reads --mw the way
   the classic Contact Form block's own markup always has. */
.eb-form-el { --mw: var(--el-mw, 640px); }

.eb-social--labels .eb-social__one { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; border-radius: 0; font-size: var(--el-fs, .8rem); text-decoration: none; }
.eb-social--labels .eb-social__one:hover { background: none; text-decoration: underline; }

.eb-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--el-ta, center); gap: var(--el-gap, 28px) var(--el-gap-x, var(--el-gap, 28px)); }
.eb-logos__one { height: var(--logo-h, 44px); width: auto; max-width: var(--el-item-mw, none); object-fit: contain; }
.eb-logos.is-grey .eb-logos__one { filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s; }
.eb-logos.is-grey .eb-logos__one:hover { filter: none; opacity: 1; }

/* ── the anchor, which draws nothing ──────────────────────────────── */

.eb-anchor { height: 0; }
.eb-anchor__mark {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--site-radius, 6px);
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 12%, transparent);
    color: var(--site-primary-text, var(--site-color-primary, #1E6F4E));
    font-size: 11px;
}

/* The small translucent pill a classic announcement bar puts beside its words.
   Converted bars carry the class in their own content, which is where an inline
   link belongs; the colors are the bar's, not the site's. */
.eb-btn--bar {
    margin-left: 1rem;
    padding: .35rem 1rem;
    font-size: .85rem;
    background: rgb(255 255 255 / .25);
    color: inherit;
    border: 1px solid rgb(255 255 255 / .5);
}

/* ── events ───────────────────────────────────────────────────────── */

/*
 * What these replace: .eb-ev__* on eight hard-coded blades, where every color
 * was a literal because the blades were rendered around a page that did not
 * exist and so had no site tokens to read. Everything here reads the site's own.
 */

.eb-evh { position: relative; overflow: hidden; border-radius: var(--el-br, var(--site-radius, 8px)); }
.eb-evh__body { padding: var(--el-pt, 0) 0 var(--el-pb, 0); text-align: var(--el-ta, inherit); }
.eb-evh__name { margin: 0 0 .35em; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-4xl, 2.6rem); line-height: 1.12; }
.eb-evh__when { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-lg, 1.05rem); }
.eb-evh__strap { margin: .6em 0 0; font-size: var(--site-text-lg, 1.05rem); }
/* What the last action said, where somebody is looking when they land back. */
.eb-evh__notice, .eb-aui__notice {
    margin: 0 0 1.2em;
    padding: .8em 1.1em;
    border-radius: var(--site-radius, 8px);
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 12%, transparent);
    color: var(--site-color-text, inherit);
}
.eb-evh--over .eb-evh__notice { background: rgb(255 255 255 / .18); color: #fff; }
.eb-evh__notice--wrong { background: color-mix(in srgb, var(--site-color-danger, #A8392C) 14%, transparent); }

/* Over a photograph: the picture is a background so nothing reflows while it
   loads, and the veil is what keeps the words readable over any photograph. */
.eb-evh--over { background-image: var(--evh-image); background-size: cover; background-position: center; }
.eb-evh--over::before {
    content: ''; position: absolute; inset: 0;
    background: rgb(0 0 0 / var(--evh-veil, .45));
}
.eb-evh--over .eb-evh__body { position: relative; padding: clamp(40px, 8vw, 104px) clamp(20px, 5vw, 56px); color: #fff; }
.eb-evh--over .eb-evh__when { color: rgb(255 255 255 / .86); }

.eb-evd__words { margin: 0 0 1.4em; }
.eb-evd__facts { display: grid; gap: .8em; margin: 0 0 1.4em; }
.eb-evd__fact { display: grid; grid-template-columns: 5.5em 1fr; gap: 1em; }
.eb-evd__fact dt { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-evd__fact dd { margin: 0; }

.eb-evv { display: grid; gap: 1.2em; }
.eb-evv__name { margin: 0 0 .2em; font-weight: 600; }
.eb-evv__line { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-evv__map { width: 100%; height: var(--evv-map-h, 280px); border: 0; border-radius: var(--el-br, var(--site-radius, 8px)); }

.eb-evs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--el-gap, 14px); }
.eb-evs__line { display: grid; grid-template-columns: 6.5em 1fr; gap: 1.2em; align-items: baseline; }
.eb-evs__at { color: var(--site-primary-text, var(--site-color-primary, #1E6F4E)); font-variant-numeric: tabular-nums; font-weight: 600; }
.eb-evs__what { display: grid; gap: .2em; }
.eb-evs__title { font-weight: 600; }
.eb-evs__text { color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }

.eb-evsp__tier { margin: 1.6em 0 .7em; text-align: center; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); letter-spacing: .06em; text-transform: uppercase; }
.eb-evsp__tier:first-child { margin-top: 0; }
.eb-evsp__row { display: grid; grid-template-columns: repeat(var(--el-cols, 4), 1fr); gap: var(--el-gap, 24px); align-items: center; }
.eb-evsp__one { display: grid; place-items: center; }
.eb-evsp__logo { max-width: 100%; height: auto; max-height: 64px; object-fit: contain; }
.eb-evsp__name { font-weight: 600; text-align: center; }

.eb-evl { display: grid; gap: 1.2em; }
.eb-evl__heading { margin: .6em 0 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-xl, 1.3rem); }
.eb-evl__row { display: grid; gap: var(--el-gap, 24px); }
.eb-evl--cards .eb-evl__row { grid-template-columns: repeat(var(--el-cols, 3), 1fr); }
.eb-evl__one {
    display: flex; flex-direction: column; gap: .8em;
    border: 1px solid var(--site-color-border, #E7EBE6);
    border-radius: var(--el-br, var(--site-radius, 8px));
    overflow: hidden;
}
.eb-evl--rows .eb-evl__one { flex-direction: row; align-items: center; gap: 1.4em; padding: 1em 1.2em; }
.eb-evl__pic { display: block; }
.eb-evl__pic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.eb-evl__body { display: grid; gap: .35em; padding: 0 1.2em 1.2em; align-content: start; }
.eb-evl--rows .eb-evl__body { padding: 0; }
.eb-evl__name { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-lg, 1.05rem); }
.eb-evl__name a { color: inherit; }
.eb-evl__when, .eb-evl__where { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-evl__one .eb-btn { justify-self: start; margin-top: .5em; }
.eb-evl__none { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }

/* ── tickets ──────────────────────────────────────────────────────── */

.eb-evt__heading { margin: 0 0 .8em; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-xl, 1.3rem); }
.eb-evt__rows { display: grid; gap: .6em; margin-bottom: 1.2em; }
.eb-evt__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1.2em;
    align-items: center;
    padding: 1em 1.1em;
    border: 1px solid var(--site-color-border, #E7EBE6);
    border-radius: var(--el-br, var(--site-radius, 8px));
}
.eb-evt__row[data-eb-state="sold_out"],
.eb-evt__row[data-eb-state="closed"] { opacity: .62; }
.eb-evt__name { margin: 0; font-weight: 600; }
.eb-evt__note { margin: .25em 0 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-evt__note--few { color: var(--site-color-danger, #A8392C); }
.eb-evt__price { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.eb-evt__pick { display: grid; gap: .3em; }
.eb-evt__label { font-size: var(--site-text-sm, .9rem); color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-evt__qty { min-width: 5.5em; }
.eb-evt__shut { color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); white-space: nowrap; }
.eb-evt__wait { margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid var(--site-color-border, #E7EBE6); }
.eb-evt__waitlead { margin: 0 0 .9em; }
.eb-evt__waitrow { display: grid; gap: .5em; margin-bottom: 1em; }

.eb-evr { display: grid; gap: .9em; }
.eb-evr__heading { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-xl, 1.3rem); }
.eb-evr__words { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-evr__form { display: grid; gap: .6em; }
.eb-evr__shut { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }

/* ── the auction ──────────────────────────────────────────────────── */

.eb-aug { display: grid; gap: 1.2em; }
.eb-aug__shut { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-aug__row { display: grid; grid-template-columns: repeat(var(--el-cols, 3), 1fr); gap: var(--el-gap, 24px); }
.eb-aug__one {
    display: flex; flex-direction: column;
    border: 1px solid var(--site-color-border, #E7EBE6);
    border-radius: var(--el-br, var(--site-radius, 8px));
    overflow: hidden;
}
.eb-aug__pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.eb-aug__body { display: grid; gap: .3em; padding: 1em 1.1em 1.2em; align-content: start; }
.eb-aug__lot { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-xs, .8rem); letter-spacing: .05em; text-transform: uppercase; }
.eb-aug__name { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-lg, 1.05rem); }
.eb-aug__name a { color: inherit; }
.eb-aug__bid { margin: .2em 0 .6em; font-variant-numeric: tabular-nums; font-weight: 600; }
.eb-aug__one .eb-btn { justify-self: start; }

.eb-aui { display: grid; gap: 1em; }
.eb-aui__name { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-3xl, 2rem); }
.eb-aui__where { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-aui__pic { display: block; width: 100%; height: auto; border-radius: var(--el-br, var(--site-radius, 8px)); }
.eb-aui__value { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-aui__bid { margin: 0; font-size: var(--site-text-xl, 1.3rem); font-variant-numeric: tabular-nums; font-weight: 700; }
.eb-aui__historyhead { margin: 0 0 .5em; font-weight: 600; }
.eb-aui__bids { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; }
.eb-aui__bids li { display: flex; justify-content: space-between; gap: 1em; padding: .4em 0; border-bottom: 1px solid var(--site-color-border, #E7EBE6); }
.eb-aui__amount { font-variant-numeric: tabular-nums; font-weight: 600; }

.eb-bid { display: grid; gap: .8em; }
.eb-bid__form { display: grid; gap: 1em; }
.eb-bid__said { margin: 0; }
.eb-bid__hint { margin: .3em 0 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-bid__aside { color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-weight: 400; }

/* ── the basket, the checkout, the card, the tickets ───────────────── */

.eb-sum__rows { display: grid; gap: .5em; }
.eb-sum__row { display: grid; grid-template-columns: 1fr auto auto; gap: 1em; align-items: baseline; }
.eb-sum__what { font-weight: 600; }
.eb-sum__how { color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-sum__price { font-variant-numeric: tabular-nums; }
.eb-sum__total {
    display: flex; justify-content: space-between; gap: 1em;
    margin-top: .9em; padding-top: .9em;
    border-top: 1px solid var(--site-color-border, #E7EBE6);
    font-weight: 700; font-variant-numeric: tabular-nums;
}

.eb-cko__form { display: grid; gap: 1.1em; }
.eb-cko__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1em; }
.eb-cko__guests { display: grid; gap: 1em; }
.eb-cko__head { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-lg, 1.05rem); }
.eb-cko__hint { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-cko__check { display: flex; gap: .55em; align-items: flex-start; font-size: var(--site-text-sm, .9rem); cursor: pointer; }
.eb-cko__check input { margin-top: .2em; }
.eb-cko__aside { color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-weight: 400; }
.eb-cko__seat { padding: 1em 1.1em; border: 1px solid var(--site-color-border, #E7EBE6); border-radius: var(--el-br, var(--site-radius, 8px)); }
.eb-cko__seatno { margin: 0 0 .7em; font-weight: 600; }
.eb-cko__ticket { margin: 1.2em 0 .4em; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-md, 1rem); font-weight: 600; }
.eb-tix__group { margin: 1em 0 .4em; font-weight: 600; }
.eb-tix__meal { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-tix__receipt { margin-top: 1.2em; font-size: var(--site-text-sm, .9rem); }
.eb-tix__receipt td, .eb-tix__receipt th { padding: .3em .6em .3em 0; text-align: left; }
.eb-tix__receipt td:not(:first-child), .eb-tix__receipt th:not(:first-child) { text-align: right; }
.eb-cko__none { margin: 0; }
.eb-seat__lead { margin: 0 0 1.2em; font-size: var(--site-text-lg, 1.05rem); line-height: 1.5; }
.eb-seat__notice { margin: 0 0 1em; padding: .7em 1em; border-radius: var(--site-radius, 8px); background: var(--tc-soft, var(--site-color-surface, rgba(0,0,0,.05))); font-weight: 600; }
.eb-seat__closed { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-seat__none { margin: 0; }
.eb-seat__form { display: grid; gap: 1em; }
.eb-seat__back { margin: 1.4em 0 0; font-size: var(--site-text-sm, .9rem); }

.eb-pay { display: grid; gap: 1em; }
.eb-pay__what { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-pay__total { display: flex; justify-content: space-between; gap: 1em; font-weight: 700; font-variant-numeric: tabular-nums; }
.eb-pay__form { display: grid; gap: 1em; }
.eb-pay__slot { min-height: 46px; }
.eb-pay__hint, .eb-pay__said { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }

.eb-tix { display: grid; gap: 1em; }
.eb-tix__said { margin: 0; }
.eb-tix__one {
    display: grid; grid-template-columns: 1fr auto auto; gap: 1.2em; align-items: center;
    padding: 1em 1.1em;
    border: 1px solid var(--site-color-border, #E7EBE6);
    border-radius: var(--el-br, var(--site-radius, 8px));
}
.eb-tix__name { margin: 0; font-weight: 600; }
.eb-tix__kind { margin: .2em 0 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-tix__number { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-tix__number span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--site-color-text, inherit); }
.eb-tix__qr { display: block; border-radius: 4px; }
.eb-tix__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2em; }

.eb-give { display: grid; gap: .9em; }
.eb-give__heading { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-xl, 1.3rem); }
.eb-give__words { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-give__form { display: grid; gap: 1em; }
.eb-give__presets { display: flex; flex-wrap: wrap; gap: .5em; }
.eb-give__preset {
    padding: .55em 1.1em;
    border: 1px solid var(--site-color-border, #E7EBE6);
    border-radius: var(--site-btn-radius, var(--site-radius, 8px));
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.eb-give__preset.is-on {
    border-color: var(--site-color-primary, #1E6F4E);
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 10%, transparent);
    color: var(--site-primary-text, var(--site-color-primary, #1E6F4E));
    font-weight: 600;
}
.eb-give__slot { min-height: 46px; }
.eb-give__hint, .eb-give__said { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }

/* Narrow screens: every grid of columns becomes a stack, in reading order. */
@media (max-width: 768px) {
    .eb-evl--cards .eb-evl__row,
    .eb-aug__row,
    .eb-evsp__row { grid-template-columns: 1fr; }
    .eb-evl--rows .eb-evl__one { flex-direction: column; align-items: stretch; }
    .eb-evt__row { grid-template-columns: 1fr auto; }
    .eb-evt__pick { grid-column: 1 / -1; }
    .eb-evs__line { grid-template-columns: 1fr; gap: .2em; }
    .eb-evd__fact { grid-template-columns: 1fr; gap: .1em; }
    .eb-sum__row { grid-template-columns: 1fr auto; }
    .eb-sum__how { grid-column: 1 / -1; }
    .eb-tix__one { grid-template-columns: 1fr auto; }
}

/* ── somebody's own account ────────────────────────────────────────── */

/*
 * What these replace: .eb-account__* on two blades where every card was
 * hardcoded onto one of them. The rules read the site's own tokens, so a portal
 * looks like the website it is part of rather than like a control panel.
 */

.eb-pnav { display: flex; flex-wrap: wrap; gap: var(--el-gap, 18px); justify-content: var(--el-ta, flex-start); }
.eb-pnav__one {
    padding: .35em 0;
    color: var(--tc-muted, var(--site-color-textMuted, #566159));
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.eb-pnav__one:hover { color: var(--site-color-text, inherit); }
.eb-pnav__one.is-here { color: var(--site-primary-text, var(--site-color-primary, #1E6F4E)); border-bottom-color: var(--site-color-primary, #1E6F4E); font-weight: 600; }

.eb-pwel { display: grid; gap: .5em; }
.eb-pwel__name { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-3xl, 2rem); }
.eb-pwel__email { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-pwel__words { margin: .4em 0 0; max-width: 52ch; }
.eb-pwel__notice {
    margin: 0 0 .6em;
    padding: .8em 1.1em;
    border-radius: var(--site-radius, 8px);
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 12%, transparent);
}
.eb-pwel__sums { display: flex; flex-wrap: wrap; gap: 1.8em; margin: 1em 0 0; }
.eb-pwel__sum { display: grid; gap: .1em; }
.eb-pwel__sum dt { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-pwel__sum dd { margin: 0; font-size: var(--site-text-xl, 1.3rem); font-weight: 700; font-variant-numeric: tabular-nums; }

.eb-plist, .eb-pgive { display: grid; gap: .6em; align-content: start; }
.eb-plist__heading { margin: .4em 0 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-lg, 1.05rem); }
.eb-plist__heading:first-child { margin-top: 0; }
.eb-plist__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.eb-plist__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .2em 1.2em;
    padding: .8em 0;
    border-bottom: 1px solid var(--site-color-border, #E7EBE6);
}
.eb-plist__row:last-child { border-bottom: 0; }
.eb-plist__what { font-weight: 600; }
.eb-plist__what a { color: inherit; }
.eb-plist__meta { grid-column: 1; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-plist__state {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    padding: .2em .7em;
    border-radius: var(--vir-radius-pill, 999px);
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 10%, transparent);
    color: var(--site-primary-text, var(--site-color-primary, #1E6F4E));
    font-size: var(--site-text-xs, .8rem);
    font-weight: 600;
    white-space: nowrap;
}
.eb-plist__more { font-size: var(--site-text-sm, .9rem); }
.eb-plist__none { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }

.eb-pprof { display: grid; gap: .8em; }
.eb-pprof__form { display: grid; gap: 1em; max-width: 26rem; }
.eb-pprof__aside { color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-weight: 400; }
.eb-pout { text-align: var(--el-ta, left); }

.eb-signin { display: grid; gap: .9em; max-width: 26rem; }
.eb-signin__heading { margin: 0; font-family: var(--site-font-heading, inherit); font-size: var(--site-text-2xl, 1.6rem); }
.eb-signin__words { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-signin__form { display: grid; gap: 1em; }
.eb-signin__code { margin-top: 1.5em; padding-top: 1.25em; border-top: 1px solid var(--site-color-border, rgba(0, 0, 0, .12)); }
.eb-signin__forgot-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-signin__forgot[open] summary { margin-bottom: .75em; }
.eb-signin__aside { color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-weight: 400; }
.eb-signin__hint { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-signin__notice {
    margin: 0;
    padding: .8em 1.1em;
    border-radius: var(--site-radius, 8px);
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 12%, transparent);
}

@media (max-width: 768px) {
    .eb-plist__row { grid-template-columns: 1fr; }
    .eb-plist__state { grid-row: auto; grid-column: 1; justify-self: start; }
}

/* Support requests on the account pages (elements/portal_support) */
.eb-psup { display: grid; gap: .8em; align-content: start; }
.eb-psup__back { font-size: var(--site-text-sm, .9rem); }
.eb-psup__meta { margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #566159)); font-size: var(--site-text-sm, .9rem); }
.eb-psup__msgs { list-style: none; margin: 0; padding: 0; display: grid; }
.eb-psup__msg { padding: .9em 0; border-bottom: 1px solid var(--site-color-border, #E7EBE6); }
.eb-psup__msg:last-child { border-bottom: 0; }
.eb-psup__msg.is-team { border-left: 3px solid var(--site-color-primary, #1E6F4E); padding-left: .8em; }
.eb-psup__who { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4em; font-size: var(--site-text-sm, .9rem); color: var(--tc-muted, var(--site-color-textMuted, #566159)); margin-bottom: .4em; }
.eb-psup__who strong { color: var(--site-color-text, inherit); }
.eb-psup__body { overflow-wrap: anywhere; }
.eb-psup__body p { margin: 0 0 .6em; }
.eb-psup__body img { max-width: 100%; height: auto; }
.eb-psup__quoted { margin-top: .4em; font-size: var(--site-text-sm, .9rem); color: var(--tc-muted, var(--site-color-textMuted, #566159)); }
.eb-psup__quoted summary { cursor: pointer; }
.eb-psup__files { list-style: none; margin: .5em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; font-size: var(--site-text-sm, .9rem); }
.eb-psup__new summary { list-style: none; display: inline-flex; cursor: pointer; }
.eb-psup__new summary::-webkit-details-marker { display: none; }
.eb-psup__new[open] summary { margin-bottom: .8em; }
.eb-psup__form { display: grid; gap: 1em; max-width: 36rem; }
.eb-psup__actions { display: flex; gap: .6em; flex-wrap: wrap; }

/* ── Coming up, and the RSVP form for members (el_portal_coming_up, el_event_rsvp; partials/member-rsvp) ── */
.eb-pcu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.eb-pcu__card {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--site-color-border, rgb(0 0 0 / .12));
    border-radius: var(--site-radius, 8px);
    background: var(--site-color-surface, transparent);
}
.eb-pcu__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.eb-pcu__name { margin: 0; font-size: var(--site-text-lg, 1.15rem); }
.eb-pcu__when, .eb-pcu__note, .eb-pcu__empty { margin: .35em 0 0; color: var(--site-color-text, inherit); opacity: .8; }
.eb-pcu__badge {
    flex: none; padding: .2em .65em; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: color-mix(in srgb, var(--site-color-text, #1c1c1c) 10%, transparent);
}
.eb-pcu__badge--in { background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 16%, transparent); }
.eb-pcu__badge--wait { background: color-mix(in srgb, var(--site-color-danger, #A8392C) 12%, transparent); }
.eb-pcu__group { margin-top: .9rem; }
.eb-pcu__groupname { margin: 0 0 .5em; font-weight: 600; }
.eb-pcu__people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.eb-pcu__people li { display: flex; align-items: center; gap: .45em; }
.eb-pcu__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.eb-pcu__avatar--initials {
    display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600;
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 18%, transparent);
}
.eb-pcu__reply, .eb-pcu__cancel { margin-top: .9rem; }
.eb-pcu__reply > summary, .eb-pcu__cancel > summary { cursor: pointer; list-style: none; display: inline-block; }
.eb-pcu__reply > summary::-webkit-details-marker, .eb-pcu__cancel > summary::-webkit-details-marker { display: none; }
.eb-pcu__form { margin-top: 1rem; display: grid; gap: .75rem; max-width: 34rem; }
.eb-pcu__guest { margin: 0; padding: .75rem 1rem; border: 1px solid var(--site-color-border, rgb(0 0 0 / .12)); border-radius: var(--site-radius, 8px); }
.eb-pcu__help { margin: .25em 0 0; font-size: .85rem; opacity: .75; font-weight: 400; }
.eb-pcu__checks { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.eb-pcu__check { display: inline-flex; align-items: center; gap: .4em; }
.eb-pcu__link {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--site-color-text, inherit); text-decoration: underline;
}
.eb-pcu__danger { background: var(--site-color-danger, #A8392C); border-color: var(--site-color-danger, #A8392C); }
.eb-pcu__more { margin: 1rem 0 0; }

/* The venue's own details, when the page shows them (el_event_venue, showDetails). */
.eb-evv__details { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0 0; }
.eb-evv__details dt { font-weight: 600; }
.eb-evv__details dd { margin: 0; }
@media (max-width: 560px) { .eb-evv__details { grid-template-columns: 1fr; } .eb-evv__details dd { margin-bottom: .5rem; } }

/* ── My RSVPs (el_portal_replies) ── */
.eb-prep__title { margin: 1.25rem 0 .5rem; font-size: var(--site-text-lg, 1.1rem); }
.eb-prep__list { list-style: none; margin: 0; padding: 0; }
.eb-prep__row {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: .8rem 0; border-bottom: 1px solid var(--site-color-border, rgb(0 0 0 / .12));
}
.eb-prep__name { margin: 0; font-weight: 600; }
.eb-prep__meta { margin: .2em 0 0; font-size: .9rem; opacity: .8; }
.eb-prep__date { flex: none; min-width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums; }
.eb-prep__what { flex: 1; min-width: 0; }
.eb-prep__actions { flex: none; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.eb-prep__actions .eb-pcu__cancel { margin-top: 0; }
.eb-prep__actions .eb-pcu__cancel[open] { flex-basis: 100%; }
.eb-prep__year { margin: 1rem 0 .25rem; font-size: .85rem; font-weight: 700; opacity: .7; }
.eb-prep__list--past { opacity: .62; }
.eb-pcu__guests { margin: .25rem 0; }
.eb-pcu__guests > summary { cursor: pointer; font-weight: 600; margin-bottom: .6rem; }
.eb-pcu__guests[open] > summary { margin-bottom: .75rem; }
.eb-myr { margin: 1rem 0; }

/* ── Members directory (el_portal_directory) ── */
.eb-pdir__search { margin: 0 0 1rem; max-width: 30rem; }
.eb-pdir__searchrow { display: flex; gap: .5rem; }
.eb-pdir__searchrow .eb-form__input { flex: 1; }
.eb-pdir__count { margin: 0 0 .75rem; opacity: .8; }
.eb-pdir__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.eb-pdir__card {
    display: flex; gap: .85rem; align-items: center; padding: .85rem 1rem;
    border: 1px solid var(--site-color-border, rgb(0 0 0 / .12)); border-radius: var(--site-radius, 8px);
}
.eb-pdir__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.eb-pdir__name { margin: 0; font-weight: 600; }
.eb-pdir__label { opacity: .7; }
.eb-pdir__pages { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }

/* A member's profile on a site that keeps its members (el_portal_profile). */
.eb-pprof__photo { display: flex; gap: 1rem; align-items: center; margin-bottom: .5rem; }
.eb-pprof__fixed { margin: .2em 0 0; }

/* ── The header's own options (header block): a member's photo, the Floating
   style, the menu's side and a large logo under the bar. Here rather than in
   the shell or site-base.css so either look of site gets them, and a site
   using none of them loads nothing new (PageRenderer, needsElementAssets). ── */
/* A signed-in member's own photo (a site that keeps its members). */
.eb-header__me {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none;
    border: 3px solid var(--site-color-text, #1c1c1c);
    background: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 18%, #fff);
    color: var(--site-color-text, #1c1c1c); font-weight: 700; text-decoration: none;
}
.eb-header__me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eb-footer__credit { display: inline-flex; opacity: .85; }
.eb-header.eb-header--floating {
    margin: var(--site-space-3, 18px) clamp(12px, 2.5vw, 48px) 0;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgb(0 0 0 / .10), 0 1px 2px rgb(0 0 0 / .06);
}
.eb-header--floating.is-sticky { top: var(--site-space-3, 18px); }
.eb-header--floating .eb-header__inner { max-width: none; padding: .55rem .7rem .55rem clamp(1rem, 2vw, 1.75rem); }
/* A Floating header's links take its own text color (Text color), not the link color. */
.eb-header.eb-header--floating .eb-header__nav a:not(.eb-btn),
.eb-header.eb-header--floating .eb-header__dropdown-btn { color: inherit; }
.eb-header--menu-left .eb-header__nav { margin-right: auto; }
.eb-header--menu-center .eb-header__nav { margin-inline: auto; }
/* The logo large, centered under the bar; it scrolls away as the bar stays. */
.eb-header__mark { display: flex; justify-content: center; padding: var(--site-space-6, 40px) var(--site-gutter, 24px) var(--site-space-4, 24px); }
.eb-header__mark a { display: block; }
.eb-header__mark img { display: block; width: min(var(--hdr-mark-w, 520px), 80vw); height: auto; }
@media (max-width: 768px) {
    .eb-header.eb-header--floating { margin: 10px 10px 0; }
    .eb-header--floating.is-sticky { top: 10px; }
    .eb-header--floating .eb-header__nav { top: calc(100% + 8px); border-radius: var(--site-card-radius, 16px); }
    .eb-header__mark { padding-top: var(--site-space-5, 28px); }
}
.eb-header__markname { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; color: inherit; text-decoration: none; }

/* Places left on a list of events (el_event_list, showPlaces). */
.eb-evl__places { white-space: nowrap; font-size: .92em; color: var(--site-primary-text, var(--site-color-primary, inherit)); font-weight: 600; }
.eb-evl__places.is-full { color: var(--site-color-danger, #A8392C); }

/* ── People: a member's photo or initials, name and badge (partials/person),
   in the directory's Photos layout and in an event's groups. ── */
.eb-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(calc(var(--person-size, 56px) + 1rem), 1fr)); }
.eb-people--big { gap: 2rem 1.5rem; }
.eb-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; min-width: 0; }
.eb-person__photo {
    width: var(--person-size, 56px); height: var(--person-size, 56px); border-radius: 50%; object-fit: cover; flex: none;
    border: 3px solid var(--site-color-background, #fff); box-shadow: 0 2px 8px rgb(0 0 0 / .15);
}
.eb-person__photo--initials {
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
    font-size: calc(var(--person-size, 56px) * .32);
    background: var(--site-color-primary, #1E6F4E); color: var(--site-on-primary, #fff);
}
.eb-person__name { font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.eb-people--small .eb-person__name { font-size: .78rem; font-weight: 500; }
.eb-person__badge {
    display: inline-block; padding: .2em .75em; border-radius: 999px; font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--site-color-secondary, var(--site-color-primary, #1E6F4E)); color: var(--site-on-secondary, #fff);
}
.eb-people--small .eb-person__badge { padding: 0; background: none; color: var(--site-primary-text, var(--site-color-primary, inherit)); text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 500; }
.eb-person__line { font-size: .85rem; opacity: .8; }

/* ── An event's groups, or who is coming (el_event_tables) ── */
.eb-evg__heading { margin: 0 0 .75rem; }
.eb-evg__group + .eb-evg__group { margin-top: 1.25rem; }
.eb-evg__name { margin: 0 0 .6rem; font-size: var(--site-text-base, 1rem); font-weight: 700; }
.eb-evg__time { margin-left: .5em; font-weight: 500; }
.eb-evg .eb-people { --person-size: 44px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .9rem .5rem; justify-items: center; }

/* ── Event facts (el_event_facts) ── */
.eb-evf__name { margin: 0 0 1rem; }
.eb-evf__list { margin: 0; display: grid; gap: .8rem; }
.eb-evf__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.eb-evf__label { font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }
.eb-evf__colon { margin-left: -.4rem; }
.eb-evf__icon { display: inline-flex; width: 1.15em; height: 1.15em; color: var(--site-primary-text, var(--site-color-primary, currentColor)); }
.eb-evf__icon svg { width: 100%; height: 100%; }
.eb-evf__text { margin: 0; }
.eb-evf__text a:not(.eb-btn) { color: inherit; text-decoration: underline; }
.eb-evf__btn { margin-left: .4rem; vertical-align: baseline; }
.eb-evf__row.is-full .eb-evf__text { color: var(--site-color-danger, #A8392C); font-weight: 600; }

/* ── Profile as a summary card (el_portal_profile, startAs = summary) ── */
.eb-pprof__card { display: grid; gap: 1rem; grid-template-columns: 1fr auto; align-items: start; }
.eb-pprof__who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.eb-pprof__face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; font-size: 2rem; }
.eb-pprof__name { margin: 0; font-size: var(--site-text-xl, 1.4rem); font-weight: 700; }
.eb-pprof__email { margin: .2em 0 0; opacity: .75; overflow-wrap: anywhere; }
.eb-pprof__facts { grid-column: 1 / -1; margin: 0; display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.eb-pprof__facts dt { font-weight: 700; font-size: .85rem; }
.eb-pprof__facts dd { margin: .1em 0 0; }
.eb-pprof__out { grid-column: 2; grid-row: 1; }
.eb-pprof__edit { margin-top: 1.25rem; }
.eb-pprof__edit > summary { cursor: pointer; list-style: none; display: inline-block; }
.eb-pprof__edit > summary::-webkit-details-marker { display: none; }
.eb-pprof__edit[open] > summary { margin-bottom: 1rem; }
@media (max-width: 560px) { .eb-pprof__card { grid-template-columns: 1fr; } .eb-pprof__out { grid-column: 1; grid-row: auto; } }

/* ── a classic block that draws an element (builder/blocks/_wrapped) ───── */
/* The band: its own padding and background, like any classic block. Inside a
   classic column the column already has its room, so the band adds none at
   the sides. */
.eb-wrap { padding-top: var(--pt, 24px); padding-bottom: var(--pb, 24px); background: var(--bg, transparent); }
.eb-container-block .eb-col .eb-wrap > .eb-container { padding-left: 0; padding-right: 0; }
/* A column drawn as a card (classic Columns) has its own room inside. */
.eb-col--card > .eb-section > .eb-container { padding-left: 0; padding-right: 0; }
/* A classic gallery drawn with the gallery element's markup: two across on a phone. */
@media (max-width: 768px) { .eb-gal-classic .eb-gal--grid { grid-template-columns: repeat(2, 1fr); } }