/* The e-bulletin: what its blocks look like, on a phone first. Shared by the editor, the
   cards on the home page and the published page, so the three never drift. The look
   (colours, fonts, corners, shape) arrives as custom properties on .eb; see
   src/model/looks.ts. Editor-only decoration lives in src/web/webEditor.css.

   Every block is a section drawn the way pop.site draws one: 20px in from the edges, a
   head row with the block's icon and heading, then its content, with rows in soft cards
   filled with the text colour at 5%. shape-sheet stacks the blocks on one page with a
   hairline between them; shape-cards makes each block a card on a tinted table;
   shape-sections copies pop.site's sections as closely as it can (at the end). Every
   look draws sections now; the other two stay for pages published in them. */

.eb {
  /* Defaults. A page published before the themes carries only the first dozen inline,
     so everything after them is worked out from those. */
  --eb-accent: #24457a; --eb-on-accent: #fff; --eb-page: #fff; --eb-card: #fff; --eb-text: #1f1d1a; --eb-muted: #6b665c; --eb-rule: #e8e6e1;
  --eb-heading-color: #1f1d1a; --eb-heading-font: system-ui, sans-serif; --eb-body-font: system-ui, sans-serif; --eb-heading-weight: 600; --eb-radius: 10px;
  --eb-accent-ink: var(--eb-accent);
  --eb-tint: color-mix(in srgb, var(--eb-text) 5%, transparent);
  --eb-button: var(--eb-accent); --eb-on-button: var(--eb-on-accent);
  --eb-wash: color-mix(in srgb, var(--eb-accent) 7%, #fff);
  --eb-wash-glow: color-mix(in srgb, var(--eb-accent) 32%, #fff);
  --eb-wash-deep: color-mix(in srgb, var(--eb-accent) 50%, #fff);
  --eb-wash-ink: var(--eb-heading-color); --eb-wash-btn-ink: var(--eb-heading-color);
  --eb-sheen: rgba(255, 255, 255, .62);
  --eb-shade: #111;
  /* The edge of a row card, a tile raised on a row, the table behind a sheet. */
  --eb-edge: rgba(0, 0, 0, .07);
  --eb-raised: var(--eb-page);
  --eb-table: var(--eb-page);
  background: var(--eb-table);
  color: var(--eb-text);
  font: 16px/1.5 var(--eb-body-font);
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* The column answers to its own width, not the window's, so the editor's phone-wide
     stage lays out exactly as a phone does. */
  container-type: inline-size;
}
.eb.shape-sheet { --eb-table: color-mix(in srgb, var(--eb-text) 5%, var(--eb-page)); }
.eb.shape-cards { --eb-raised: var(--eb-card); }
.eb.eb-dark { --eb-edge: rgba(255, 255, 255, .08); --eb-raised: rgba(255, 255, 255, .07); color-scheme: dark; }
.eb-dark .eb-pic.eb-hero-mark:not(.solid) { background: rgba(255, 255, 255, .12); }
.eb, .eb * { box-sizing: border-box; }
.eb a { color: var(--eb-accent-ink); }

/* The reading column: the sheet itself. It fills the page's height, and takes the page's
   corners in the editor's phone. */
.eb-col { --eb-gut: 20px; --eb-gap: 16px; flex: 1 0 auto; width: 100%; max-width: 720px; margin: 0 auto; padding-bottom: 8px; background: var(--eb-page); border-radius: inherit; }

/* ---- Every block: a section, 20px in, its parts 16px apart, a hairline under it. */
.eb-block { position: relative; display: flex; flex-direction: column; gap: var(--eb-gap); padding: var(--eb-gut); border-bottom: 1px solid var(--eb-rule); }

/* ---- Words */
.eb-h { margin: 0; font: var(--eb-heading-weight) 18px/1.5 var(--eb-heading-font); color: var(--eb-heading-color); letter-spacing: -.005em; overflow-wrap: anywhere; }
.eb-title { margin: 0; font: var(--eb-heading-weight) 40px/1.12 var(--eb-heading-font); letter-spacing: -.022em; overflow-wrap: anywhere; text-wrap: balance; }
.eb-label { font: 600 13px/1.4 var(--eb-body-font); color: var(--eb-accent-ink); letter-spacing: .01em; overflow-wrap: anywhere; }
.eb-line { color: var(--eb-muted); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.eb-rich { overflow-wrap: anywhere; }
.eb-rich p { margin: 0 0 10px; }
.eb-rich p:last-child { margin-bottom: 0; }
.eb-rich ul, .eb-rich ol { margin: 0 0 10px; padding-left: 1.3em; }
.eb-rich ul:last-child, .eb-rich ol:last-child { margin-bottom: 0; }
.eb-rich li { margin: 0 0 4px; }
.eb-rich li p { margin: 0; }
.eb-rich strong { font-weight: 700; }
.eb-rich u { text-decoration: underline; }
.eb-rich a { color: var(--eb-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---- The head row: the icon, the heading, what sits at the right; a small line over it
   and a line under it take whole lines of their own. */
.eb-head { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; }
.eb-head > .eb-label { flex: 0 0 100%; margin-bottom: 2px; }
.eb-head > .eb-h { flex: 1 1 0; min-width: 0; }
.eb-head > .eb-line { flex: 0 0 100%; margin-top: 2px; }
.eb-h-icon { flex: none; display: grid; place-items: center; width: 24px; height: 27px; color: var(--eb-accent-ink); }
.eb-h-icon svg { width: 24px; height: 24px; stroke-width: 1.6; }
.eb .eb-more { flex: none; display: inline-flex; align-items: center; gap: 1px; font: 500 14px/27px var(--eb-body-font); color: var(--eb-accent-ink); text-decoration: none; }
.eb-more svg { width: 16px; height: 16px; }

/* ---- Rows: soft cards in the text colour, a fine edge, 10px apart. */
.eb-rows, .eb-evrows, .eb-items, .eb-faq-items, .eb-linkrows { display: flex; flex-direction: column; gap: 10px; }
.eb-row, .eb-evrow, .eb-item, .eb-faq-item, .eb-linkrow, .eb-tile, .eb-mini, .eb-msg, .eb-quote-box {
  border-radius: var(--eb-radius); background: var(--eb-tint); box-shadow: inset 0 0 0 1px var(--eb-edge);
}
/* A small square on a row: a date, an icon, an arrow. */
.eb-date, .eb-icon, .eb-linkrow-go, .eb-cal-sm {
  flex: none; display: grid; place-items: center; border-radius: calc(var(--eb-radius) * .8); background: var(--eb-raised); box-shadow: inset 0 0 0 1px var(--eb-edge);
}
.eb .eb-chev { flex: none; display: grid; color: var(--eb-muted); }

/* Where the reader has a mouse, what can be clicked answers it. */
@media (hover: hover) {
  .eb :is(a.eb-linkrow, a.eb-item, a.eb-evrow, a.eb-mini, a.eb-link, a.eb-social, .eb-faq-item):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eb-text) 22%, transparent); }
  .eb :is(a.eb-btn, a.eb-cal, a.eb-pill):hover { opacity: .9; }
}

/* A wide, quiet button: "Read more" at the foot of a block. */
.eb .eb-link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: var(--eb-radius); background: var(--eb-tint); box-shadow: inset 0 0 0 1px var(--eb-edge); color: var(--eb-heading-color); font: 500 15px/1.25 var(--eb-body-font); text-decoration: none; text-align: center; }

/* ---- Pictures: cropped to their frame. Art is an SVG that fills it. */
.eb-pic { position: relative; overflow: hidden; border-radius: var(--eb-radius); background: var(--eb-tint); color: var(--eb-accent); }
/* Our art in its solid tone: the piece in the on-accent colour on a block of the accent. */
.eb-pic.solid { background: var(--eb-accent); color: var(--eb-on-accent); }
.eb-pic .eb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eb-pic .eb-art-wrap, .eb-pic .eb-art { display: block; width: 100%; height: 100%; }
.eb-caption { color: var(--eb-muted); font-size: 14px; line-height: 1.4; }

/* ---- The title */
.eb-hero { padding: 0; gap: 0; overflow: hidden; border-bottom: 0; }
.eb-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 24px var(--eb-gut); }
.eb-hero-text > * + * { margin-top: 12px; }
.eb-hero-text > .eb-hero-top + * { margin-top: 20px; }
.eb-hero-text > .eb-label + .eb-title { margin-top: 14px; }
.eb-hero-text > .eb-detail { margin-top: 16px; }
.eb-hero .eb-line { font-size: 16px; line-height: 1.5; color: inherit; opacity: .82; }
/* The small line over the title, and the line of facts: soft chips. */
.eb-hero .eb-label { padding: 4px 12px; border-radius: calc(var(--eb-radius) * 3); background: var(--eb-sheen); color: inherit; font-weight: 500; }
.eb-detail { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--eb-radius); background: var(--eb-sheen); font-size: 14px; font-weight: 500; line-height: 1.35; }
.eb-detail svg { flex: none; opacity: .8; }
/* The wide button. */
.eb .eb-pill { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 44px; margin-top: 24px; padding: 10px 16px; border-radius: var(--eb-radius); background: #fff; color: var(--eb-wash-btn-ink); font: 500 16px/1.25 var(--eb-body-font); text-align: center; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* Center and left: the words on a colour wash, with a band of light across it. */
.eb-hero.center, .eb-hero.left { background: var(--eb-wash); color: var(--eb-wash-ink); }
.eb-hero-wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 18%, var(--eb-sheen) 36%, transparent 54%),
    radial-gradient(120% 75% at 0% 0%, var(--eb-wash-glow), transparent 64%),
    radial-gradient(110% 85% at 100% 100%, var(--eb-wash-deep), transparent 68%),
    radial-gradient(70% 55% at 0% 100%, var(--eb-wash-glow), transparent 72%);
}
.eb-hero.center .eb-hero-text { align-items: center; text-align: center; padding: 56px var(--eb-gut) 24px; }
.eb-hero.left .eb-hero-text { padding: 20px var(--eb-gut) 24px; }
.eb-hero.left .eb-hero-top + * { margin-top: 44px; }
.eb-hero.center .eb-title, .eb-hero.left .eb-title { color: var(--eb-wash-ink); }
.eb-hero-top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.eb-hero.left .eb-hero-top { flex-direction: row; }
.eb-pic.eb-hero-mark { flex: none; width: 56px; height: 56px; border-radius: calc(var(--eb-radius) + 2px); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .06); }
.eb-hero.left .eb-pic.eb-hero-mark { width: 40px; height: 40px; border-radius: 50%; }
/* Solid art keeps its colour behind it, or the white drawing vanishes. */
.eb-pic.eb-hero-mark.solid, .eb-pic.eb-mark.solid { background: var(--eb-accent); color: var(--eb-on-accent); }
.eb-hero-name { font: 500 16px/1.4 var(--eb-body-font); overflow-wrap: anywhere; }

/* Over: the words over the picture, on a shade. */
.eb-hero.over { justify-content: flex-end; min-height: 440px; background: #1d1d1f; color: #fff; }
.eb-hero.over .eb-hero-pic { position: absolute; inset: 0; border-radius: 0; }
.eb-hero.over .eb-hero-text { padding-top: 110px; background: linear-gradient(to top, color-mix(in srgb, var(--eb-shade) 88%, transparent), color-mix(in srgb, var(--eb-shade) 58%, transparent) 50%, transparent); }
.eb-hero.over .eb-title { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.eb-hero.over .eb-label, .eb-hero.over .eb-detail { background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.eb .eb-hero.over .eb-pill { color: #111; }

/* Under: the picture, then the words on the page. */
.eb-hero.under { border-bottom: 1px solid var(--eb-rule); }
.eb-hero.under .eb-hero-pic { aspect-ratio: 16 / 10; border-radius: 0; }
.eb-hero.under .eb-hero-text { padding-top: 20px; }
.eb-hero.under .eb-title { color: var(--eb-heading-color); }
.eb-hero.under .eb-line { color: var(--eb-muted); opacity: 1; }
.eb-hero.under .eb-label { padding: 0; background: none; color: var(--eb-accent-ink); font-weight: 600; }
.eb-hero.under .eb-detail { background: var(--eb-tint); box-shadow: inset 0 0 0 1px var(--eb-edge); }
.eb .eb-hero.under .eb-pill { background: var(--eb-button); color: var(--eb-on-button); box-shadow: none; }

/* Band: no picture, a deep band of the look's colour. */
.eb-hero.no-pic { background: linear-gradient(155deg, var(--eb-accent) 30%, color-mix(in srgb, var(--eb-accent) 72%, #000)); color: var(--eb-on-accent); }
.eb-hero.no-pic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 20%, rgba(255, 255, 255, .12) 38%, transparent 56%); pointer-events: none; }
.eb-hero.no-pic .eb-hero-text { padding: 48px var(--eb-gut) 28px; }
.eb-hero.no-pic .eb-label, .eb-hero.no-pic .eb-detail { background: color-mix(in srgb, var(--eb-on-accent) 16%, transparent); }
.eb .eb-hero.no-pic .eb-pill { background: var(--eb-on-accent); color: var(--eb-accent); }
/* On a home card: where the picture goes. */
.eb-hero-icon { position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: var(--eb-on-accent); display: grid; place-items: center; opacity: .9; }

/* ---- A heading between blocks: it belongs to what follows, so no line under it. */
.eb-heading { padding-top: 32px; padding-bottom: 0; border-bottom: 0; }
.eb-h-lone { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; }

/* ---- A story */
.eb-body { display: flex; flex-direction: column; gap: 10px; }
.eb-body > .eb-link { margin-top: 6px; }
.eb-section .eb-h { font-size: 20px; line-height: 1.35; }
.eb-section .eb-h-icon { height: 27px; }
.eb-banner { aspect-ratio: 16 / 9; }
/* The picture at the side. */
.eb-section.layout-side { flex-direction: row; align-items: flex-start; }
.eb-section.layout-side > .eb-body { flex: 1; min-width: 0; }
.eb-pic.eb-side-pic { order: 2; flex: 0 0 38%; aspect-ratio: 4 / 5; }
/* The words over the picture, on a shade. */
.eb-section.layout-over { display: grid; grid-template-columns: minmax(0, 1fr); }
.eb-section.layout-over > * { grid-area: 1 / 1; min-width: 0; }
.eb-pic.eb-over-pic { aspect-ratio: auto; min-height: 300px; }
.eb-section.layout-over > .eb-body { z-index: 1; align-self: end; padding: 72px 20px 20px; border-radius: 0 0 var(--eb-radius) var(--eb-radius); background: linear-gradient(to top, color-mix(in srgb, var(--eb-shade) 88%, transparent), color-mix(in srgb, var(--eb-shade) 55%, transparent) 55%, transparent); color: #fff; }
.eb-section.layout-over .eb-h, .eb-section.layout-over .eb-label, .eb-section.layout-over .eb-h-icon, .eb-section.layout-over .eb-rich a { color: #fff; }
.eb .eb-section.layout-over .eb-link { background: #fff; box-shadow: none; color: #111; }

/* ---- A picture: edge to edge, or with a margin */
.eb-picture figure { margin: 0; }
.eb-photo { aspect-ratio: 4 / 3; }
.eb-picture:not(.inset) { padding: 0; }
.eb-picture:not(.inset) .eb-photo { border-radius: 0; }
.eb-picture:not(.inset) .eb-caption { padding: 10px var(--eb-gut) 14px; }
.eb-picture.inset .eb-caption { padding-top: 8px; }
.eb-pic-link { display: block; }

/* ---- One event */
.eb-event-top { display: flex; align-items: center; gap: 14px; }
.eb-date { width: 56px; height: 56px; align-content: center; gap: 3px; color: var(--eb-accent-ink); line-height: 1; }
.eb-date b { font: 600 22px/1 var(--eb-heading-font); }
.eb-date span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.eb-event-body { flex: 1; min-width: 0; }
.eb-event .eb-h { font-size: 20px; line-height: 1.3; }
.eb-event .eb-when { margin-top: 2px; color: var(--eb-muted); font-size: 15px; }
.eb-where { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--eb-radius); background: var(--eb-tint); box-shadow: inset 0 0 0 1px var(--eb-edge); font-size: 15px; font-weight: 500; line-height: 1.35; }
.eb-where svg { flex: none; color: var(--eb-accent-ink); }
.eb-event > .eb-line { color: var(--eb-text); font-size: 16px; }
.eb .eb-cal { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--eb-radius); background: var(--eb-button); color: var(--eb-on-button); font: 500 16px/1.25 var(--eb-body-font); text-decoration: none; }

/* ---- A button: wide, filled; quiet with a line round it; an icon at the left. */
.eb-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 10px 18px; border-radius: var(--eb-radius); background: var(--eb-button); color: var(--eb-on-button); font: 500 16px/1.25 var(--eb-body-font); text-align: center; text-decoration: none; }
.eb a.eb-btn { color: var(--eb-on-button); }
.eb .eb-btn.outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--eb-button); color: var(--eb-heading-color); }
.eb-btn.no-link { opacity: .55; }
.eb-btn-label { display: block; }
.eb-btn-line { display: block; margin-top: 1px; font-size: 13.5px; font-weight: 400; opacity: .82; }
.eb-btn.with-icon { justify-content: flex-start; padding: 8px 12px 8px 8px; text-align: left; }
.eb-btn.with-icon .eb-btn-words { flex: 1; min-width: 0; }
.eb-btn-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: calc(var(--eb-radius) * .8); background: color-mix(in srgb, var(--eb-on-button) 16%, transparent); }
.eb-btn.outline .eb-btn-icon { background: var(--eb-tint); color: var(--eb-accent-ink); }
.eb-btn .eb-arrow { flex: none; display: grid; opacity: .8; }

/* ---- A divider: a soft band between groups of blocks, or a space. */
.eb-divider { height: 10px; padding: 0; border-bottom: 0; background: var(--eb-tint); }
.eb-divider hr { display: none; }
.eb-divider.space { height: 28px; background: none; }

/* ---- The contact details at the foot */
.eb-footer { align-items: center; gap: 4px; padding: 32px var(--eb-gut) 20px; border-bottom: 0; color: var(--eb-muted); font-size: 14px; text-align: center; }
.eb-footer b { margin-bottom: 2px; color: var(--eb-heading-color); font: var(--eb-heading-weight) 17px/1.35 var(--eb-heading-font); }
.eb .eb-footer a { color: inherit; }
.eb-footer .eb-line { margin-top: 8px; font-size: 14px; }

/* ---- A word from someone: a card with the photo, the name and what they do, then the
   words. A square photo stands at the side. */
.eb-msg { display: flex; gap: 14px; padding: var(--eb-gut); }
.eb-msg-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.eb-who { display: flex; align-items: center; gap: 12px; }
.eb-pic.eb-portrait { flex: none; width: 48px; height: 48px; border-radius: 50%; }
.eb-who-t { min-width: 0; display: flex; flex-direction: column; }
.eb-who-name { font: 500 17px/1.35 var(--eb-body-font); color: var(--eb-heading-color); overflow-wrap: anywhere; }
.eb-who-role { font-size: 14px; line-height: 1.35; color: var(--eb-muted); }
.eb-message.square .eb-msg { padding: 12px 16px 12px 12px; }
.eb-pic.eb-portrait.eb-square { flex: 0 0 38%; width: auto; height: auto; min-height: 168px; align-self: stretch; border-radius: calc(var(--eb-radius) * .8); }
.eb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.eb-tag { padding: 4px 10px; border-radius: calc(var(--eb-radius) * 3); background: var(--eb-raised); box-shadow: inset 0 0 0 1px var(--eb-edge); color: var(--eb-accent-ink); font-size: 13px; font-weight: 500; line-height: 1.35; }

/* ---- Times */
.eb-row { display: flex; align-items: baseline; gap: 14px; padding: 14px 16px; }
.eb-row .eb-when { flex: none; min-width: 64px; color: var(--eb-accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.eb-what { flex: 1; min-width: 0; }
.eb-what b { display: block; font-weight: 500; }
.eb-note { display: block; color: var(--eb-muted); font-size: 14px; line-height: 1.4; }

/* ---- Events, several */
.eb .eb-evrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; color: var(--eb-text); text-decoration: none; }
.eb-evrow .eb-date { width: 48px; height: 48px; }
.eb-evrow .eb-date b { font-size: 19px; }
.eb-evrow .eb-date span { font-size: 10.5px; }
.eb-pic.eb-thumb { flex: none; width: 52px; height: 52px; border-radius: calc(var(--eb-radius) * .8); }
.eb-evbody { flex: 1; min-width: 0; }
.eb-evtitle { display: block; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.eb-evmeta { color: var(--eb-muted); font-size: 14px; line-height: 1.4; }
.eb-evrow .eb-line { margin-top: 2px; color: var(--eb-text); font-size: 14px; }
.eb .eb-cal-sm { width: 34px; height: 34px; color: var(--eb-accent-ink); text-decoration: none; }
.eb-evicon .eb-icon { width: 24px; height: 24px; background: none; box-shadow: none; }

/* ---- Quote */
.eb-quote-box { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: var(--eb-gut); }
.eb-quote-mark { display: block; height: 26px; color: var(--eb-accent-ink); }
.eb-quote-text { font: italic 400 20px/1.45 var(--eb-heading-font); color: var(--eb-heading-color); overflow-wrap: anywhere; }
.eb-quote-source { color: var(--eb-muted); font-size: 14px; }
.eb-quote-source::before { content: "\2014\00a0"; }
.eb .eb-quote-box .eb-link { margin-top: 4px; background: var(--eb-raised); }

/* ---- Numbers: each on its own card, big. */
.eb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eb-tile { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 12px; text-align: center; }
.eb-stat { font: var(--eb-heading-weight) 36px/1.1 var(--eb-heading-font); color: var(--eb-heading-color); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eb-stat-label { font-size: 15px; line-height: 1.35; }
.eb-stat-note { color: var(--eb-muted); font-size: 13px; line-height: 1.35; }
/* No tile left alone: an odd last tile takes the whole row. */
.eb-tiles > .eb-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- Notices: icon rows */
.eb .eb-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; color: var(--eb-text); text-decoration: none; }
.eb-icon { width: 40px; height: 40px; color: var(--eb-accent-ink); }
.eb-icon svg { width: 20px; height: 20px; }
.eb-icon.none { font-size: 18px; }
.eb-item-body { flex: 1; min-width: 0; }
.eb-item-body b { display: block; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.eb-item-body .eb-line { display: block; margin-top: 1px; font-size: 14px; }

/* ---- The name at the very top */
.eb-brand { flex-direction: row; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.eb-pic.eb-mark { flex: none; width: 40px; height: 40px; border-radius: calc(var(--eb-radius) * .8 + 2px); }
.eb-brand-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eb-brand-name { font: var(--eb-heading-weight) 17px/1.3 var(--eb-heading-font); color: var(--eb-heading-color); overflow-wrap: anywhere; }
.eb-brand-tag { margin-top: 1px; color: var(--eb-muted); font-size: 13px; line-height: 1.35; }

/* ---- Two small cards side by side */
.eb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eb .eb-mini { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; color: var(--eb-text); text-decoration: none; }
.eb-mini-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.eb-mini-h { font: var(--eb-heading-weight) 17px/1.3 var(--eb-heading-font); color: var(--eb-heading-color); overflow-wrap: anywhere; }
.eb-mini-lines { color: var(--eb-muted); font-size: 14px; line-height: 1.4; white-space: pre-line; }
@container (max-width: 359px) { .eb-pair { grid-template-columns: 1fr; } }

/* ---- Social: a centred row of square buttons */
.eb-socials { align-items: center; gap: 14px; text-align: center; }
.eb-socials .eb-socials-h { font-size: 16px; }
.eb-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.eb .eb-social { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--eb-radius); background: var(--eb-tint); box-shadow: inset 0 0 0 1px var(--eb-edge); color: var(--eb-heading-color); text-decoration: none; }
.eb-social > span { display: grid; }
.eb-social svg { width: 22px; height: 22px; }
.eb-social.no-link { opacity: .45; }

/* ---- Questions: rows that open on a tap, the answer in the same card */
.eb-faq-item summary { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; list-style: none; cursor: pointer; font-weight: 500; line-height: 1.35; }
.eb-faq-item summary::-webkit-details-marker { display: none; }
.eb-faq-q { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eb-faq-chev { flex: none; display: grid; color: var(--eb-muted); transition: transform .15s ease; }
.eb-faq-item[open] .eb-faq-chev { transform: rotate(180deg); }
.eb-faq-a { margin-top: -4px; padding: 0 18px 16px; color: var(--eb-muted); font-size: 15px; line-height: 1.5; }

/* ---- Links: rows that go somewhere, a small square arrow at the end */
.eb .eb-linkrow { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px 8px 18px; color: var(--eb-text); text-decoration: none; }
.eb-linkrow-t { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.eb-linkrow-go { width: 34px; height: 34px; color: var(--eb-heading-color); }
.eb-linkrow.no-link .eb-linkrow-go { opacity: .4; }

/* ---- Photos: a row to swipe, bleeding to the edge, or a grid. The dots at the head
   follow the swipe where the browser has scroll timelines. */
.eb-gallery { timeline-scope: --eb-shots; }
.eb-shots.row { display: flex; gap: 10px; margin: 0 calc(-1 * var(--eb-gut)); padding: 0 var(--eb-gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--eb-gut); scrollbar-width: none; overscroll-behavior-x: contain; scroll-timeline: --eb-shots x; }
.eb-shots.row::-webkit-scrollbar { display: none; }
/* With a mouse or a trackpad the browser's snapping jumps, so it is off there: a small
   script drags the row and glides it onto a photo (server/shots.ts). */
.eb-shots.row { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .eb-shots.row { scroll-snap-type: none; cursor: grab; -webkit-user-select: none; user-select: none; }
  .eb-shots.row.grabbing { cursor: grabbing; }
}
.eb-shots.row .eb-shot { flex: 0 0 82%; scroll-snap-align: start; }
.eb-shots.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eb-shot { margin: 0; min-width: 0; }
.eb-pic.eb-shot-pic { aspect-ratio: 1; }
.eb-shot .eb-caption { padding: 8px 2px 0; }
.eb-dots { position: relative; flex: none; display: flex; gap: 6px; margin-top: 10px; color: var(--eb-heading-color); }
.eb-dots i, .eb-dots b { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eb-dots i { opacity: .22; }
.eb-dots b { position: absolute; left: 0; top: 0; }
@supports (animation-timeline: scroll()) {
  .eb-dots b { animation: eb-dot linear both; animation-timeline: --eb-shots; }
}
@keyframes eb-dot { to { transform: translateX(calc((var(--n) - 1) * var(--eb-dot-step, 12px))); } }

/* ---- Video: a still with a frosted play button, the title under it */
.eb .eb-video-link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.eb-video-still { position: relative; margin-bottom: 10px; }
.eb-pic.eb-video-pic { aspect-ratio: 16 / 9; }
.eb-video-pic.no-still { background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--eb-accent) 55%, #fff), transparent 60%), color-mix(in srgb, var(--eb-accent) 85%, #000); }
.eb-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20, 20, 20, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 4px 16px rgba(0, 0, 0, .18); }
.eb-play svg { margin-left: 3px; }
.eb-video-t { font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--eb-heading-color); overflow-wrap: anywhere; }
.eb-video .eb-line { font-size: 14px; }

/* ==== Cards: each block a card on the table; the title, a heading between blocks, a
   divider and the foot sit on the table itself. */
.shape-cards .eb-col { padding: 12px 0 8px; background: none; }
.shape-cards .eb-block { margin: 0 12px 12px; border-bottom: 0; border-radius: calc(var(--eb-radius) + 6px); }
.shape-cards .eb-block:not(.eb-hero, .eb-heading, .eb-divider, .eb-footer, .eb-brand, .eb-picture.inset) { background: var(--eb-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 10px rgba(0, 0, 0, .03); }
.shape-cards .eb-hero { margin: 0 0 12px; border-radius: 0; }
.shape-cards .eb-first > .eb-hero { margin-top: -12px; }
.shape-cards .eb-hero.under { background: var(--eb-card); border-bottom: 0; }
.shape-cards .eb-heading { padding: 20px 8px 0; }
.shape-cards .eb-brand { padding: 4px 8px 6px; }
.shape-cards .eb-divider { height: auto; margin-bottom: 12px; padding: 0 8px; }
.shape-cards .eb-divider hr { display: block; margin: 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--eb-text) 12%, transparent); }
.shape-cards .eb-divider.space { height: 16px; margin-bottom: 0; }
.shape-cards .eb-footer { padding: 24px 20px 16px; }
.shape-cards .eb-picture:not(.inset) { overflow: hidden; }
.shape-cards .eb-picture.inset { padding: 0; }
.shape-cards .eb-picture.inset .eb-caption { padding: 8px 8px 0; }

/* ==== Headings in capitals, for a poster */
.heads-caps .eb-h { font-size: 16px; letter-spacing: .05em; text-transform: uppercase; }
.heads-caps .eb-h-lone { font-size: 22px; }
.heads-caps .eb-section .eb-h, .heads-caps .eb-event .eb-h { font-size: 18px; }
.heads-caps .eb-title { letter-spacing: -.01em; line-height: 1.02; text-transform: uppercase; }
.heads-caps .eb-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ==== A wide page: more room at the sides, bigger titles, tiles in one row. */
@container (min-width: 600px) {
  .eb-col { --eb-gut: 32px; --eb-gap: 18px; }
  .eb-title { font-size: 52px; }
  .eb-hero.center .eb-hero-text { padding: 80px 64px 40px; }
  .eb-hero.left .eb-hero-text { padding-bottom: 40px; }
  .eb .eb-pill { align-self: flex-start; min-width: 280px; }
  .eb .eb-hero.center .eb-pill { align-self: center; }
  .eb-hero.over { min-height: 480px; }
  .eb-hero.under .eb-hero-pic { aspect-ratio: 2 / 1; }
  .eb-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .eb-tiles > .eb-tile:last-child:nth-child(odd) { grid-column: auto; }
  .eb-shots.row .eb-shot { flex-basis: 44%; }
  .eb-dots.two, .eb-head:has(> .eb-dots.two:only-child) { display: none; }
  .eb-shots.grid { grid-template-columns: repeat(3, 1fr); }
  .eb-pic.eb-side-pic { aspect-ratio: 4 / 3; }
  .shape-cards .eb-block { margin-left: 16px; margin-right: 16px; }
  .shape-cards .eb-hero { margin-left: 0; margin-right: 0; }
}
/* A computer's window: the sheet sits on its table. */
@container (min-width: 760px) {
  .shape-sheet .eb-col { margin: 32px auto; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 40px rgba(0, 0, 0, .06); }
  .shape-cards .eb-col { padding-top: 24px; }
  .shape-cards .eb-hero { margin: 0 16px 12px; border-radius: calc(var(--eb-radius) + 6px); }
  .shape-cards .eb-first > .eb-hero { margin-top: 0; }
}

/* ==== Sections: every block the way pop.site draws its sections. The page edge to edge,
   a hairline between blocks, 20px in and 20px apart; headings and icons in the heading
   colour (in the look's font and weight), the icons in two tones; rows, small squares
   and pictures with a fine edge and a lit line along the top (--eb-ring); buttons 52px
   high with a soft drop; numbers one under another. On a wide page the blocks stay
   full width with their insides 650px across, and a title on a wash is 600px tall. */
.eb.shape-sections {
  --eb-edge: rgba(0, 0, 0, .08);
  --eb-lit: rgba(255, 255, 255, .22);
  --eb-raised: rgba(255, 255, 255, .5);
  --eb-drop: 0 4px 8px rgba(0, 0, 0, .1);
  --eb-ring: inset 0 0 0 1px var(--eb-edge), inset 0 2px 0 var(--eb-lit);
  --eb-press: inset 0 0 0 1px rgba(23, 23, 23, .2), inset 0 2px 0 rgba(255, 255, 255, .22), var(--eb-drop);
  --eb-dot-step: 9px;
}
.eb.shape-sections.eb-dark { --eb-edge: color-mix(in srgb, var(--eb-text) 10%, transparent); --eb-lit: rgba(255, 255, 255, .08); --eb-raised: rgba(255, 255, 255, .06); --eb-drop: 0 4px 8px rgba(0, 0, 0, .3); }
.shape-sections .eb-col { --eb-gut: 20px; --eb-py: 20px; --eb-gap: 20px; max-width: none; padding-bottom: 0; }
.shape-sections .eb-block { padding: var(--eb-py) var(--eb-gut); }
.shape-sections .eb-hero, .shape-sections .eb-divider, .shape-sections .eb-picture:not(.inset) { padding: 0; }
.shape-sections .eb-hero { border-bottom: 1px solid var(--eb-rule); }

/* The head row: an 18px heading, the icon beside it in the same colour. */
.shape-sections .eb-h, .shape-sections .eb-h-lone, .shape-sections .eb-section .eb-h, .shape-sections .eb-event .eb-h { font-size: 18px; line-height: 27px; letter-spacing: 0; }
.shape-sections .eb-heading { padding-bottom: 0; }
.shape-sections .eb-h-icon { color: var(--eb-heading-color); }
.shape-sections .eb-h-icon svg { stroke-width: 1.7; }
.shape-sections .eb-label { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.eb.shape-sections .eb-more { color: var(--eb-heading-color); }
.shape-sections .duo > :first-child { fill: currentColor; fill-opacity: .22; }
.shape-sections .eb-rich { line-height: 1.35; }

/* The fine edge and the lit top, on everything that sits on the page. */
.shape-sections :is(.eb-row, .eb-evrow, .eb-item, .eb-faq-item, .eb-linkrow, .eb-tile, .eb-mini, .eb-msg, .eb-quote-box, .eb-date, .eb-icon, .eb-linkrow-go, .eb-cal-sm, .eb-link, .eb-where, .eb-social, .eb-tag) { box-shadow: var(--eb-ring); }
.shape-sections :is(.eb-date, .eb-icon, .eb-linkrow-go, .eb-cal-sm) { border-radius: var(--eb-radius); }
.shape-sections .eb-evicon .eb-icon { background: none; box-shadow: none; }
.shape-sections .eb-pic::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: var(--eb-ring); pointer-events: none; }
.shape-sections :is(.eb-hero-pic, .eb-picture:not(.inset) .eb-photo)::before { content: none; }
@media (hover: hover) {
  .shape-sections :is(a.eb-linkrow, a.eb-item, a.eb-evrow, a.eb-mini, a.eb-link, a.eb-social, .eb-faq-item):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eb-text) 22%, transparent), inset 0 2px 0 var(--eb-lit); }
}

/* Buttons: 52px, a dark edge and a soft drop; the quiet one on a row's tint. */
.eb.shape-sections :is(.eb-btn, .eb-cal) { min-height: 52px; font-weight: 500; box-shadow: var(--eb-press); }
.eb.shape-sections .eb-btn.outline { background: var(--eb-tint); box-shadow: var(--eb-ring); color: var(--eb-heading-color); }
.shape-sections .eb-btn-icon { border-radius: calc(var(--eb-radius) - 2px); }
.eb.shape-sections .eb-link { min-height: 52px; font-size: 16px; color: var(--eb-heading-color); }
.shape-sections .eb-body > .eb-link { margin-top: 10px; }

/* The title: pop.site's, a 40px title on the wash with the mark and the name over it. */
.shape-sections .eb-title { font-size: 40px; line-height: 45px; letter-spacing: -.03em; }
.shape-sections .eb-hero-text > * + * { margin-top: 20px; }
.shape-sections .eb-hero-text > .eb-label + .eb-title { margin-top: 16px; }
.shape-sections .eb-hero .eb-line { font-size: 16px; line-height: 1.35; opacity: 1; }
.shape-sections .eb-hero:not(.under) .eb-label { padding: 6px 12px; border-radius: var(--eb-radius); font-size: 14px; }
.shape-sections .eb-detail { gap: 10px; padding: 10px 20px; font-size: 14px; }
.shape-sections .eb-detail svg { width: 20px; height: 20px; }
.shape-sections .eb-hero.under .eb-detail { box-shadow: var(--eb-ring); }
.shape-sections .eb-hero.center .eb-hero-text, .shape-sections .eb-hero.no-pic .eb-hero-text { padding: 48px var(--eb-gut) 20px; }
.shape-sections .eb-hero.left .eb-hero-text { padding-bottom: 20px; }
.shape-sections .eb-hero-top { gap: 10px; }
.shape-sections .eb-pic.eb-hero-mark { width: 65px; height: 65px; border-radius: var(--eb-radius); box-shadow: none; }
.shape-sections .eb-hero.left .eb-pic.eb-hero-mark { width: 40px; height: 40px; border-radius: var(--eb-radius); }
.shape-sections .eb-hero-name { font-size: 18px; line-height: 27px; }
.eb.shape-sections .eb-pill { min-height: 52px; margin-top: 30px; font-size: 16px; font-weight: 500; box-shadow: none; }
.eb.shape-sections .eb-hero.under .eb-pill { box-shadow: var(--eb-press); }

/* A word from someone: pop.site's testimonial. The words sit under the name, not the
   photo, while the card is narrow. */
.shape-sections .eb-msg { gap: 10px; padding: 20px; }
.shape-sections .eb-msg-in, .shape-sections .eb-who { gap: 10px; }
.shape-sections .eb-pic.eb-portrait:not(.eb-square) { width: 55px; height: 55px; border-radius: var(--eb-radius); }
.shape-sections .eb-who-name { font-size: 18px; line-height: 27px; }
.shape-sections .eb-who-role { font-size: 16px; line-height: 24px; color: var(--eb-text); }
.shape-sections .eb-msg-in > .eb-rich { font-weight: 500; }
.shape-sections .eb-msg-in:has(> .eb-who > .eb-portrait) > .eb-rich { margin-left: 20%; }
.shape-sections .eb-message.square .eb-msg { gap: 14px; padding: 10px 20px 10px 10px; }
.shape-sections .eb-pic.eb-portrait.eb-square { border-radius: var(--eb-radius); }
.shape-sections .eb-tag { padding: 7px 14px; border-radius: var(--eb-radius); background: var(--eb-tint); color: var(--eb-heading-color); font-size: 14px; }

/* Times, events, notices, two cards */
.shape-sections .eb-row { padding: 15px 20px; }
.shape-sections .eb-row .eb-when { font-weight: 500; color: var(--eb-heading-color); }
.shape-sections .eb-date { color: var(--eb-heading-color); }
.shape-sections .eb-date b { font-weight: 500; }
.shape-sections .eb-evtitle { font-size: 16px; }
.shape-sections .eb-pic.eb-thumb { border-radius: var(--eb-radius); }
.eb.shape-sections .eb-cal-sm { width: 40px; height: 40px; color: var(--eb-heading-color); }
.shape-sections .eb-where { align-self: flex-start; gap: 10px; padding: 10px 20px; font-size: 14px; }
.shape-sections .eb-where svg { width: 20px; height: 20px; color: var(--eb-heading-color); opacity: .5; }
.shape-sections .eb-event > .eb-line { font-size: 16px; }
.eb.shape-sections .eb-item { padding: 12px 20px 12px 12px; }
.shape-sections .eb-icon { color: var(--eb-heading-color); }
.shape-sections .eb-item-body b { font-size: 16px; }
.shape-sections .eb-item-body .eb-line { font-size: 14px; }
.eb.shape-sections .eb-mini { gap: 5px; padding: 20px; }
.shape-sections .eb-mini-top { margin-bottom: 10px; }
.shape-sections .eb-mini-h { font-size: 18px; line-height: 27px; }
.shape-sections .eb-mini-lines { font-size: 15px; }

/* Numbers: one under another, each on its own card. */
.shape-sections .eb-tiles { grid-template-columns: minmax(0, 1fr); }
.shape-sections .eb-tile { gap: 5px; padding: 20px; }
.shape-sections .eb-stat { font-size: 40px; line-height: 45px; }
.shape-sections .eb-stat-label { font-size: 16px; line-height: 24px; }

/* Social: 56px squares in the middle of their section. */
.shape-sections .eb-socials { justify-content: center; gap: 20px; min-height: 122px; }
.shape-sections .eb-socials .eb-socials-h { font-size: 18px; }
.shape-sections .eb-social-row { gap: 10px; }
.eb.shape-sections .eb-social { width: 56px; height: 56px; color: var(--eb-heading-color); }
.shape-sections .eb-social svg { width: 24px; height: 24px; }

/* Questions */
.shape-sections .eb-faq-item summary { gap: 12px; padding: 15px 24px; }
.shape-sections .eb-faq-q { line-height: 20px; }
.shape-sections .eb-faq-chev { color: var(--eb-heading-color); }
.shape-sections .eb-faq-chev svg { width: 20px; height: 20px; }
.shape-sections .eb-faq-a { margin-top: -5px; padding: 0 24px 15px; color: var(--eb-text); font-size: 14px; line-height: 21px; }

/* Links: 64px rows, the arrow on a half-white square. */
.eb.shape-sections .eb-linkrow { min-height: 64px; padding: 10px 10px 10px 20px; }
.shape-sections .eb-linkrow-t { font-size: 18px; line-height: 20px; }
.shape-sections .eb-linkrow-go { width: 40px; height: 40px; }
.shape-sections .eb-linkrow-go svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* Photos: big squares to swipe, small dots at the head. */
.shape-sections .eb-dots { gap: 4px; margin-top: 11px; }
.shape-sections .eb-dots :is(i, b) { width: 5px; height: 5px; }
.shape-sections .eb-dots i { opacity: .25; }
.shape-sections .eb-shots.row { gap: 20px; }
.shape-sections .eb-shots.row .eb-shot { flex-basis: 85%; }
.shape-sections .eb-shot .eb-caption { padding: 15px 0 0; color: var(--eb-heading-color); font-size: 16px; font-weight: 500; }
.shape-sections .eb-picture.inset .eb-caption { padding-top: 10px; }

/* Video: a wide still, a frosted 64px play button. */
.eb.shape-sections .eb-video-link { gap: 4px; }
.shape-sections .eb-video-still { margin-bottom: 12px; }
.shape-sections .eb-pic.eb-video-pic { aspect-ratio: 370 / 204; }
.shape-sections .eb-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(23, 23, 23, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.shape-sections .eb-play svg { width: 26px; height: 26px; }
.shape-sections .eb-video-t { font-size: 16px; }

/* A quote, the mark in two tones; the name at the top of the page; the foot. */
.shape-sections .eb-quote-box { padding: 20px; }
.shape-sections .eb-quote-mark { color: var(--eb-heading-color); opacity: .4; }
.shape-sections .eb-quote-text { font: 500 18px/27px var(--eb-heading-font); }
.shape-sections .eb-quote-source { color: var(--eb-text); font-size: 16px; }
.shape-sections .eb-brand { gap: 10px; }
.shape-sections .eb-pic.eb-mark { border-radius: var(--eb-radius); }
.shape-sections .eb-brand-name { font-size: 18px; line-height: 27px; }
.shape-sections .eb-brand-tag { font-size: 14px; }
.shape-sections .eb-divider.space { height: 20px; }
.shape-sections .eb-footer { gap: 5px; padding-bottom: 24px; }
.shape-sections .eb-footer b { margin-bottom: 0; font: 500 16px/24px var(--eb-body-font); }
.shape-sections .eb-footer .eb-line { margin-top: 5px; }

/* Headings in capitals keep their spacing. */
.heads-caps.shape-sections .eb-h { font-size: 16px; letter-spacing: .05em; }
.heads-caps.shape-sections .eb-title { line-height: 1.02; letter-spacing: -.01em; }
.heads-caps.shape-sections .eb-label, .heads-caps.shape-sections .eb-hero .eb-label { font-size: 12px; letter-spacing: .08em; }

/* The words run the card's width once it is wide enough (pop.site's own point). */
@container (min-width: 403px) {
  .shape-sections .eb-msg-in:has(> .eb-who > .eb-portrait) > .eb-rich { margin-left: 0; }
}
/* A wide page: full-width sections, their insides 650px across, more air above and below. */
@container (min-width: 600px) {
  .shape-sections .eb-col { --eb-gut: max(32px, calc(50% - 325px)); --eb-py: 40px; --eb-gap: 20px; }
  .shape-sections .eb-hero.center { min-height: 600px; justify-content: center; }
  .shape-sections .eb-hero.over { min-height: 600px; }
  .shape-sections .eb-hero.center .eb-hero-text { padding: 40px var(--eb-gut); }
  .shape-sections .eb-hero.left .eb-hero-text { padding-bottom: 40px; }
  .shape-sections .eb-pic.eb-hero-mark { width: 70px; height: 70px; }
  .eb.shape-sections .eb-pill { min-width: 160px; }
  .shape-sections .eb-shots.row .eb-shot { flex-basis: calc(50% - 10px); }
}

/* ==== Printing the page itself: a dark look prints dark words on white, every photo
   shows, and blocks aren't cut in two where it can be helped. */
@media print {
  .eb.eb-dark {
    --eb-page: #fff !important; --eb-card: #fff !important; --eb-table: #fff !important; --eb-text: #111 !important; --eb-muted: #555 !important;
    --eb-rule: #ddd !important; --eb-heading-color: #111 !important; --eb-accent-ink: #333 !important; --eb-tint: rgba(0, 0, 0, .05) !important;
    --eb-edge: rgba(0, 0, 0, .1) !important; --eb-raised: #fff !important; --eb-button: #111 !important; --eb-on-button: #fff !important;
  }
  /* A block in its own colour was lightened for the dark page: dark again for paper. */
  .eb.eb-dark .eb-block[style] { --eb-heading-color: #111 !important; --eb-accent-ink: #333 !important; --eb-tint: rgba(0, 0, 0, .05) !important; }
  /* Light words on a colour need the colour on paper too, even with backgrounds off. */
  .eb-hero, .eb-btn, .eb-cal, .eb-hero .eb-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .eb-shots.row { flex-wrap: wrap; overflow: visible; }
  .eb-shots.row .eb-shot { flex-basis: 45%; }
  .eb-dots, .eb-head:has(> .eb-dots:only-child) { display: none; }
  .eb-block { break-inside: avoid; }
}

/* ==== Pages published before the themes: their card wrappers and head rows. */
.eb-card-body { display: flex; flex-direction: column; gap: 12px; }
.eb-h-row, .eb-head-row { display: flex; align-items: center; gap: 10px; }
.eb-h-row .eb-h, .eb-head-row .eb-h { flex: 1; min-width: 0; }
.eb-event-card { display: flex; gap: 14px; }
.eb-from b, .eb-from span { display: block; }
.eb-from span { color: var(--eb-muted); font-size: 14px; }
.eb-message-in { display: flex; gap: 14px; }