/* ==========================================================================
   ALLOut Security — single event template (allout_events)
   Everything is scoped under .aos-blk .aos-event / .aos-card--event.
   No :root, no body, no bare element selectors. No external requests.
   ========================================================================== */

/* Scoped reset. Not a bare '*' — it is inside .aos-blk, so nothing leaks to
   BeTheme, the portal or WP-Client. Required: every full-width button and
   padded panel here assumes border-box. */
.aos-blk .aos-event,
.aos-blk .aos-event *,
.aos-blk .aos-event *::before,
.aos-blk .aos-event *::after,
.aos-blk .aos-card--event,
.aos-blk .aos-card--event *,
.aos-blk .aos-card--event *::before,
.aos-blk .aos-card--event *::after{box-sizing:border-box}

.aos-blk .aos-ico{width:18px; height:18px} /* base size — every other rule overrides */

.aos-blk .aos-event{
  /* tokens re-declared in scope — never on :root (shared page with BeTheme,
     the customer portal and WP-Client) */
  /* accent #f03c45 as given. It is 3.85:1 against white, so it is used only where
     it carries no text (rules, dots, icons). --accent-deep is the same hue darkened
     for text-bearing surfaces: 5.77:1 on white. */
  --accent:#f03c45; --accent-deep:#C81C26;
  --red-400:#F0555F; --red-500:var(--accent); --red-600:var(--accent-deep); --red-700:#A5161F;
  --navy-700:#14224A; --navy-800:#0E1C40; --navy-900:#081634;
  --blue-400:#3D63D8; --blue-500:#2B4FC9; --blue-600:#1F3CA6;
  --gray-50:#F7F8FB; --gray-100:#EFF1F6; --gray-200:#E3E7EF; --gray-300:#D2D8E4;
  --gray-500:#7B8499; --gray-700:#3E4658;
  --text-strong:var(--navy-900); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --border-subtle:var(--gray-200); --border-default:var(--gray-300);
  --color-primary:var(--red-500); --color-link:var(--blue-500);
  --radius-md:4px; --radius-lg:4px; --radius-card:4px; --radius-xl:4px;
  --shadow-card:0 4px 16px rgba(14,28,64,.08);
  --shadow-lg:0 16px 40px rgba(14,28,64,.14);
  --shadow-focus:0 0 0 3px rgba(61,99,216,.35);
  --container-max:1200px; --gutter:24px;
  --font-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-body:'Mulish','Segoe UI',system-ui,sans-serif;
  /* derived tints — rgba() of existing tokens only, no new hues */
  --st-open-bg:rgba(43,79,201,.08);      /* blue-500 @ 8%  */
  --st-open-fg:var(--blue-600);
  --tint-navy:rgba(8,22,52,.06);         /* navy-900 @ 6%  */

  /* THE WIDTH IS THE THEME'S, NOT OURS.
     The article carries BeTheme's own `container` class, so this page lines up
     with every other section on the site and goes on lining up if the theme's
     content width is ever changed — in the one place it is set.

     No max-width and no horizontal padding here on purpose. The handoff states
     1200px and a 24px gutter because its reference file is a standalone page
     with nothing else on it to agree with; on this site both of those numbers
     already exist, in the theme, and restating them makes two authorities on
     one measurement. That is how a band ends up 24px narrower than the content
     beneath it, and it is the same rule the ALLOut Blocks Page Header follows.

     --container-max and --gutter stay declared: the handoff's token block is
     transcribed whole, and other rules in this file read --gutter for their own
     spacing. They are simply not applied to this element. */
  margin:0 auto; padding:32px 0 64px;
  font-family:var(--font-body); color:var(--text-body); font-size:14.5px; line-height:1.6;
}

/* ---------- layout: content column + sticky action column ---------- */
/* ROW GAP 20px, NOT THE HANDOFF'S 36px. The two rows in the left column are the
   header and the body of one article — a standfirst and the text under it — so a
   36px trench between them read as two separate sections stacked on a page. The
   COLUMN gap stays 40px: that one separates the article from the action panel,
   which genuinely are two things. Client decision, taken on the live page. */
.aos-blk .aos-event__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:20px 40px; align-items:start;
}
.aos-blk .aos-event__hd{grid-column:1; grid-row:1; min-width:0}
.aos-blk .aos-event__side{grid-column:2; grid-row:1 / span 2; min-width:0}
.aos-blk .aos-event__body{grid-column:1; grid-row:2; min-width:0; max-width:760px}

/* ---------- badges ---------- */
.aos-blk .aos-event__badges{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.aos-blk .aos-event__badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px;
  border-radius:4px; font-size:11.5px; font-weight:800; line-height:1.2; white-space:nowrap;
}
.aos-blk .aos-event__badge .aos-ico{width:13px; height:13px; flex:none}
/* Online = navy, in person = red — the site's existing convention (Block 4
   Prefooter Events badges an Event red and a Webinar navy) and the fastest read
   of which kind of thing this page is.
   The fill is --red-700, NOT --red-500: white on --red-500 is 4.23:1, which fails
   AA at 11.5px/800 (the large-text exemption needs >=18.66px bold). --red-700 is
   7.15:1. The DS Badge's own solid red tone has the same problem at this size. */
.aos-blk .aos-event__badge--kind{background:var(--navy-900); color:#fff}
/* ALLOut's brand accent, on instruction (2026-08-05), replacing the --red-700
   the handoff specified. Stated once and not repeated: white on #f03c45 is
   3.85:1 and does not meet WCAG AA at 11.5px/800. It is the brand's red and the
   decision is the site owner's. */
.aos-blk .aos-event__badge--place{background:var(--accent); color:#fff}

/* live indicator — only on UPCOMING live webinars; a past session is not live */
.aos-blk .aos-event__live{
  flex:none; width:7px; height:7px; border-radius:50%; background:var(--red-500);
  animation:aos-event-live 1.8s ease-in-out infinite;
}
.aos-blk .aos-card--event .aos-card__live{
  flex:none; width:7px; height:7px; border-radius:50%; background:#E8323F;
  animation:aos-event-live 1.8s ease-in-out infinite;
}
@keyframes aos-event-live{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.3; transform:scale(.75)}}
.aos-blk .aos-event__badge--open{background:var(--st-open-bg); color:var(--st-open-fg)}

/* ---------- standfirst, media, topics ---------- */
.aos-blk .aos-event__excerpt{
  margin:0 0 20px; max-width:660px; font-size:16px; line-height:1.6; font-weight:400;
  color:var(--text-body); text-wrap:pretty;
}
.aos-blk .aos-event__media{
  /* height:auto + no aspect-ratio: the whole image shows, at its own ratio */
  display:block; width:100%; height:auto; margin:0 0 24px;
  border-radius:var(--radius-lg); background:var(--gray-100);
}
.aos-blk .aos-event__topics{
  display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 0; padding:0; list-style:none;
}
.aos-blk .aos-event__topic{
  padding:4px 9px; border-radius:4px; background:var(--gray-100);
  font-size:12px; font-weight:700; color:var(--text-body);
}

/* ---------- facts ---------- */
/* COMPARTMENT 2 — the detail panel. A filled surface with no border, so it reads
   as a distinct block from the white, bordered, shadowed action card above it
   without adding a second outline. */
.aos-blk .aos-event__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 28px;
  padding:6px 18px 8px; border-radius:var(--radius-md); background:var(--gray-50);
}
.aos-blk .aos-event__fact{
  display:flex; min-width:0; padding:11px 0; border-top:1px solid var(--gray-200);
}
.aos-blk .aos-event__fact:first-child{border-top:0}
.aos-blk .aos-event__fact-txt{
  display:flex; flex-direction:column; min-width:0;
  font-size:14.5px; font-weight:700; color:var(--text-strong);
}
.aos-blk .aos-event__fact-lbl{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-body); margin-bottom:4px;
}
.aos-blk .aos-event__fact-sub{
  margin-top:2px; font-size:12.5px; font-weight:400; color:var(--text-body); line-height:1.5;
}
.aos-blk .aos-event__fact-sub abbr{text-decoration:none; border-bottom:1px dotted var(--gray-300)}

/* ---------- right rail ---------- */
/* The rail carries the action AND the facts, the venue/joining block and the
   cross-link, so those three stop stacking full-width below the write-up.
   Nothing here is sticky: the rail is now dense enough that a sticky wrapper
   taller than the viewport would leave its lower half unreachable. */
.aos-blk .aos-event__rail{display:flex; flex-direction:column; gap:16px}
.aos-blk .aos-event__rail-sec{margin:0}
.aos-blk .aos-event__rail-ttl{
  margin:0 0 11px; font-family:var(--font-display); font-weight:700; font-size:14px;
  line-height:1.3; letter-spacing:-.005em; color:var(--text-strong);
}
.aos-blk .aos-event__rail .aos-event__sec-note{margin-top:9px; font-size:11.5px}

/* facts, in the rail: one column, tighter, no outer border (the rail groups it) */
.aos-blk .aos-event__rail .aos-event__facts{grid-template-columns:minmax(0,1fr)}
.aos-blk .aos-event__rail .aos-event__fact-txt{font-size:14px}

.aos-blk .aos-event__rail .aos-event__joining{font-size:13px; padding:13px 15px}

/* cross-link, in the rail: vertical, no hover lift (it is not a card in a grid) */
.aos-blk .aos-event__cross--rail{gap:12px; padding:0; border-top:0}
.aos-blk .aos-event__cross--rail .aos-event__cross-ttl{font-size:13.5px}
.aos-blk .aos-event__cross--rail .aos-event__cross-sub{font-size:12px}

/* ---------- action card ---------- */
.aos-blk .aos-event__card{
  padding:20px; border-radius:var(--radius-card); background:#fff;
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-card);
}
.aos-blk .aos-event__card--open{border-top:3px solid var(--color-primary)}
/* COMPARTMENT 1 — the action card now answers the two questions people actually
   arrive with, in priority order: WHEN is it, and HOW DO I GET IN. */
.aos-blk .aos-event__when{
  margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--border-subtle);
}
.aos-blk .aos-event__when-date{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:26px;
  line-height:1.1; letter-spacing:-.02em; color:var(--text-strong);
}
.aos-blk .aos-event__when-time{
  margin:5px 0 0; font-size:13.5px; font-weight:700; color:var(--text-body);
}
.aos-blk .aos-event__when-time abbr{text-decoration:none; font-weight:400}
.aos-blk .aos-event__card-ttl{
  margin:0 0 5px; font-family:var(--font-display); font-weight:700; font-size:17px;
  line-height:1.25; letter-spacing:-.01em; color:var(--text-strong);
}
.aos-blk .aos-event__card-sub{margin:0 0 14px; font-size:12.5px; font-weight:600; color:var(--text-body)}
.aos-blk .aos-event__card-note{margin:11px 0 0; font-size:12.5px; line-height:1.5; color:var(--text-body)}
.aos-blk .aos-event__card-note--lead{margin:0 0 4px; font-size:13.5px; color:var(--text-body)}
.aos-blk .aos-event__card-note a{color:var(--color-link); text-decoration:underline; text-underline-offset:3px}
.aos-blk .aos-event__gate{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; padding:5px 11px 5px 9px;
  border-radius:4px; background:var(--tint-navy); color:var(--navy-800);
  font-size:11.5px; font-weight:800;
}
.aos-blk .aos-event__gate .aos-ico{width:13px; height:13px}

/* ---------- buttons ---------- */
.aos-blk .aos-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:12px 18px; border-radius:var(--radius-md); border:1px solid transparent;
  font-family:var(--font-body); font-size:14px; font-weight:800; line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.aos-blk .aos-btn .aos-ico{width:16px; height:16px; flex:none}
/* --red-600, not --red-500: white on --red-500 is 4.23:1 and fails AA at 14px/800
   (the large-text exemption needs >=18.66px bold). --red-600 is 5.34:1. */
/* The brand accent at rest, on instruction — see the badge above for the
   contrast note. The hover and active states keep the darker reds: they are what
   makes the button visibly respond to a pointer, and darkening on hover is the
   direction it was already going. */
.aos-blk .aos-btn--primary{background:var(--accent); color:#fff}
.aos-blk .aos-btn--primary:hover{background:var(--accent-deep)}
.aos-blk .aos-btn--primary:active{background:var(--red-700)}
.aos-blk .aos-btn--ghost{background:#fff; color:var(--navy-700); border-color:var(--gray-300)}
.aos-blk .aos-btn--ghost:hover{background:var(--gray-100)}
.aos-blk .aos-btn--sm{width:auto; padding:9px 14px; font-size:13px}
.aos-blk .aos-event a:focus-visible,
.aos-blk .aos-event button:focus-visible,
.aos-blk .aos-event [tabindex]:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px; box-shadow:var(--shadow-focus)}

/* ---------- add to calendar ---------- */
.aos-blk .aos-event__cal{display:flex; flex-wrap:wrap; gap:6px 18px; margin:16px 0 0}
.aos-blk .aos-event__cal-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; color:var(--color-link); text-decoration:underline;
  text-decoration-color:transparent; text-underline-offset:3px;
  transition:text-decoration-color .18s ease, color .18s ease;
}
.aos-blk .aos-event__cal-link:hover{color:var(--blue-600); text-decoration-color:currentColor}
.aos-blk .aos-event__cal-link .aos-ico{width:15px; height:15px; flex:none}
.aos-blk .aos-event__cal-link--solo{margin-top:14px}

/* ---------- sections ---------- */
/* Each content section is its own compartment: a full-width rule above it, so the
   write-up, the speakers and the agenda are scannable as separate things. */
.aos-blk .aos-event__sec{margin:32px 0 0; padding:28px 0 0; border-top:1px solid var(--border-subtle)}
.aos-blk .aos-event__sec-ttl{
  margin:0 0 14px; font-family:var(--font-display); font-weight:700; font-size:20px;
  line-height:1.22; letter-spacing:-.01em; color:var(--text-strong);
}
.aos-blk .aos-event__sec-note{margin:12px 0 0; font-size:12px; font-weight:600; color:var(--text-body)}
.aos-blk .aos-event__sec-note--lead{margin:-6px 0 18px; font-size:13.5px; font-weight:400; color:var(--text-body)}

/* ---------- speakers ---------- */
.aos-blk .aos-event__spk{margin:0; padding:0; list-style:none}
.aos-blk .aos-event__spk-item{
  display:flex; gap:14px; min-width:0; padding:14px 0; border-top:1px solid var(--border-subtle);
}
.aos-blk .aos-event__spk-item:first-child{padding-top:0; border-top:0}
.aos-blk .aos-event__spk-photo,
.aos-blk .aos-event__spk-mono{
  flex:none; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.aos-blk .aos-event__spk-photo{background:var(--gray-100)}
.aos-blk .aos-event__spk-mono{
  background:var(--tint-navy); color:var(--navy-700);
  font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:.02em;
}
.aos-blk .aos-event__spk-txt{display:flex; flex-direction:column; min-width:0}
.aos-blk .aos-event__spk-name{font-family:var(--font-display); font-size:14.5px; font-weight:700; color:var(--text-strong)}
.aos-blk .aos-event__spk-role{margin-top:3px; font-size:12px; font-weight:700; color:var(--text-body)}
.aos-blk .aos-event__spk-bio{margin-top:7px; font-size:13px; line-height:1.55; color:var(--text-body); text-wrap:pretty}

/* ---------- agenda ---------- */
.aos-blk .aos-event__tablewrap{overflow-x:auto; border-radius:var(--radius-md)}
.aos-blk .aos-event__agenda{width:100%; min-width:540px; border-collapse:collapse; font-size:13.5px}
.aos-blk .aos-event__agenda th,
.aos-blk .aos-event__agenda td{padding:11px 16px; text-align:left; vertical-align:top}
.aos-blk .aos-event__agenda th:first-child,
.aos-blk .aos-event__agenda td:first-child{padding-left:0}
.aos-blk .aos-event__agenda thead th{
  padding:10px 16px; background:var(--gray-50); border-bottom:1px solid var(--gray-200);
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-body);
}
.aos-blk .aos-event__agenda tbody tr + tr th,
.aos-blk .aos-event__agenda tbody tr + tr td{border-top:1px solid var(--border-subtle)}
.aos-blk .aos-event__agenda tbody th{
  width:92px; font-variant-numeric:tabular-nums; font-weight:800; color:var(--text-strong);
}
.aos-blk .aos-event__agenda tbody td:first-of-type{color:var(--text-strong); font-weight:700}
.aos-blk .aos-event__agenda tbody td{color:var(--text-body)}
/* decorative only — the cell is empty; the element is aria-hidden, so it is
   exempt from the contrast minimum */
.aos-blk .aos-event__dash{color:var(--gray-300)}

/* ---------- venue / joining ---------- */
/* Map link + travel note, sat straight under the facts. The address itself is
   already in the Venue and Location fact rows — no heading, no repeat. */
.aos-blk .aos-event__travel{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.aos-blk .aos-event__travel .aos-btn{width:auto}
.aos-blk .aos-event__joining{
  margin:0; padding:14px 16px; border-radius:var(--radius-md); background:var(--gray-50);
  font-size:13.5px; line-height:1.6; color:var(--text-body); text-wrap:pretty;
}
.aos-blk .aos-event__joining strong{color:var(--text-strong)}

/* ---------- form container (Gravity Form styles its own internals) ---------- */
.aos-blk .aos-event__form{
  min-height:180px; border-radius:var(--radius-lg); background:#fff;
  border:1px dashed var(--gray-300); display:flex; align-items:center; justify-content:center; padding:24px;
}

/* ---------- cross-links ---------- */
.aos-blk .aos-event__cross{
  display:flex; align-items:center; gap:16px; padding:14px 0 0; text-decoration:none;
  border-top:1px solid var(--border-subtle); transition:color .18s ease;
}
.aos-blk .aos-event__cross:hover .aos-event__cross-ttl{color:var(--red-600)}
.aos-blk .aos-event__cross:hover .aos-event__cross-arrow{transform:translateX(3px)}
.aos-blk .aos-event__cross-txt{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
.aos-blk .aos-event__cross-kicker{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-body); margin-bottom:4px;
}
.aos-blk .aos-event__cross-ttl{font-family:var(--font-display); font-size:14.5px; font-weight:700; color:var(--text-strong); line-height:1.32}
.aos-blk .aos-event__cross-sub{margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--text-body); text-wrap:pretty}
.aos-blk .aos-event__cross-arrow{flex:none; color:var(--red-500); transition:transform .18s ease}
.aos-blk .aos-event__cross-arrow .aos-ico{width:18px; height:18px}
.aos-blk .aos-event__cross-ttl{transition:color .18s ease}

/* ==========================================================================
   ARCHIVE CARD — deltas only. The grid and base card already exist.
   ========================================================================== */
/* The archive runs 3 up, matching the 1200px content width of the site's other
   blocks. auto-fit would collapse to 2 at some widths; 3 is the design. */
.aos-blk .aos-cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
  margin:0 auto; padding:0; list-style:none; max-width:1200px;
}
.aos-blk .aos-card--event{
  --navy-700:#14224A; --navy-900:#081634; --gray-50:#F7F8FB; --gray-100:#EFF1F6;
  --gray-200:#E3E7EF; --gray-300:#D2D8E4; --gray-500:#7B8499; --gray-700:#3E4658;
  --accent:#f03c45; --accent-deep:#C81C26;
  --red-500:var(--accent); --red-600:var(--accent-deep); --red-700:#A5161F;
  --blue-500:#2B4FC9; --blue-600:#1F3CA6;
  --font-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-body:'Mulish','Segoe UI',system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border:1px solid var(--gray-200); border-radius:4px; box-shadow:0 4px 16px rgba(14,28,64,.08);
  font-family:var(--font-body); color:var(--gray-700);
}
.aos-blk .aos-card--event .aos-card__media{
  aspect-ratio:16/9; background:var(--gray-100); border-bottom:1px solid var(--gray-200);
}
/* contain, not cover: the full image shows inside the card’s 16:9 well */
.aos-blk .aos-card--event .aos-card__media img{display:block; width:100%; height:100%; object-fit:contain}
/* DELTA 1 — type label. Sits in the text area, not over the image: on a photo it
   was unreliable to read and it fought the image. Navy online, accent in person. */
.aos-blk .aos-card--event .aos-card__kind{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 8px;
  border-radius:4px; background:var(--navy-900); color:#fff; font-size:11px; font-weight:800;
}
.aos-blk .aos-card--event .aos-card__kind--place{background:var(--accent-deep)}
.aos-blk .aos-card--event .aos-card__kind .aos-ico{width:14px; height:14px}
.aos-blk .aos-card--event .aos-card__body{display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px}
.aos-blk .aos-card--event .aos-card__ttl{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.3;
  color:var(--navy-900); text-wrap:pretty;
}
/* DELTA 2 — date/time line and venue-or-platform line */
.aos-blk .aos-card--event .aos-card__meta{
  display:flex; align-items:flex-start; gap:7px; margin:0; font-size:12px; font-weight:700; color:var(--gray-700);
}
.aos-blk .aos-card--event .aos-card__meta .aos-ico{width:14px; height:14px; flex:none; margin-top:1px; color:var(--gray-500)}
.aos-blk .aos-card--event .aos-card__cta{
  /* --red-600, not --red-500: 4.23:1 vs 5.34:1 on white at this size */
  margin:6px 0 0; font-size:12.5px; font-weight:800; color:var(--red-600);
  display:flex; align-items:center; gap:7px;
}
.aos-blk .aos-card--event .aos-card__cta .aos-ico{width:15px; height:15px}

/* ==========================================================================
   RESPONSIVE — the two site breakpoints, nothing else
   ========================================================================== */
@media (max-width:1000px){
  .aos-blk .aos-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Vertical only. The theme's container owns the horizontal edge at every
     width, so restating a gutter here would reintroduce exactly the second
     authority the base rule removed. */
  .aos-blk .aos-event{padding:32px 0 56px}
  .aos-blk .aos-event__grid{grid-template-columns:minmax(0,1fr); gap:32px}
  .aos-blk .aos-event__hd,
  .aos-blk .aos-event__side,
  .aos-blk .aos-event__body{grid-column:1; grid-row:auto; max-width:none}
  .aos-blk .aos-event__rail{gap:14px}
  .aos-blk .aos-event__sec-ttl{font-size:19px}
  .aos-blk .aos-event__sec{margin-top:32px; padding-top:24px}
}
@media (max-width:640px){
  .aos-blk .aos-event{padding:24px 0 48px; font-size:14px}
  .aos-blk .aos-event__excerpt{font-size:15px; margin-bottom:18px}
  .aos-blk .aos-event__media{margin-bottom:20px}

  .aos-blk .aos-event__card{padding:20px}
  /* COMPARTMENT 1 — the action card now answers the two questions people actually
   arrive with, in priority order: WHEN is it, and HOW DO I GET IN. */
.aos-blk .aos-event__when{
  margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--border-subtle);
}
.aos-blk .aos-event__when-date{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:26px;
  line-height:1.1; letter-spacing:-.02em; color:var(--text-strong);
}
.aos-blk .aos-event__when-time{
  margin:5px 0 0; font-size:13.5px; font-weight:700; color:var(--text-body);
}
.aos-blk .aos-event__when-time abbr{text-decoration:none; font-weight:400}
.aos-blk .aos-event__card-ttl{font-size:16px}
  .aos-blk .aos-btn{padding:12px 16px; font-size:13.5px}
  .aos-blk .aos-event__cal{gap:10px; flex-direction:column}
  .aos-blk .aos-event__sec{margin-top:28px; padding-top:22px}
  .aos-blk .aos-event__sec-ttl{font-size:18px}

  .aos-blk .aos-event__spk-photo,
  .aos-blk .aos-event__spk-mono{width:46px; height:46px; font-size:15px}

  .aos-blk .aos-event__cross{gap:14px}
  .aos-blk .aos-cards{grid-template-columns:minmax(0,1fr)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .aos-blk .aos-event *{transition:none !important}
  .aos-blk .aos-event__live,
  .aos-blk .aos-card--event .aos-card__live{animation:none}
  .aos-blk .aos-event__cross:hover{transform:none}
}

/* ==========================================================================
   ADDENDUM — everything above this line is the handoff's stylesheet, byte for
   byte. Nothing below changes a value in it.

   The handoff's speaker avatars are empty placeholder spans: the mock had no
   real photographs in it, so it never had to say how one sits in the circle.
   A real attachment does, and without a rule it renders at its intrinsic size
   and spills out of a 52px well. Cover, because a portrait cropped to a circle
   is the point of a circle — this is the one place the design's "never crop"
   rule does not apply, since that rule is about the FEATURED image, which is
   still uncropped and still at its own ratio.

   Scoped under .aos-blk like everything else. No token is declared here.
   ========================================================================== */
.aos-blk .aos-event__spk-photo img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:50%;
}