/* SARVAM'S DETAIL LAYOUT since 10 Oct late (user: "sarvam does ui of
   details page clean", sarvam.ai/events/healthplix-...): a back link, then
   the square cover LEFT and the facts RIGHT (a kind pill, the H1, Luma's
   one-line question, icon-and-value facts with the ask set to their right),
   then the content as plain document sections. The H1 takes the utility
   hero step (--t-display-1s, 48) on purpose: it shares its row with the
   cover, which is what that token is for. */
/* THE BACK LINK IS A BREADCRUMB since 22 Oct (user: "bring [the category
   pages' crumb] navigation to [All events] ... Events / event page name"):
   the shared .crumb (components.css) reading "Events / <city or talk>",
   the arrow on "Events" in the regular weight as before. Positioned here,
   recoloured below for the photo heroes. */
.evhero__crumb { margin-bottom: var(--sp-8); }

.evhero__grid {
  display: grid;
  /* REARRANGED (user, 10 Oct: "arrange this hero better, remove the dotted
     padding if needed"). The hero dropped .section--band, so the grid has
     the full container; the copy column is wide enough for a two-line H1
     and a ticket whose four fields sit in one row, which brings the copy's
     height down to roughly the cover's, so the two CENTRE against each
     other with no dead ground under the cover. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-16);
  align-items: center;
}
.evhero__copy { min-width: 0; }

/* The type, icon and word (user, 10 Oct), the hub's .evkind restated (one
   stylesheet per page): Phosphor Flask duotone at 16px and "Workshop" at
   12px in brand ink. It replaced the "In-person workshop" pill. */
.evkind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 var(--sp-4);
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-ink);
}
.evkind__ic { flex: none; width: 16px; height: 16px; }
/* MORE THAN ONE LABEL (user, 12 Oct: "for B'luru make it Workshop + Dinner,
   for Nashville Workshop + Lunch"): each kind is its own .evkind, the meal
   on Phosphor ForkKnife duotone (the navbar's Restaurants glyph). The row
   takes the single label's bottom margin; the labels inside give it up. */
.evkinds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.evkinds > .evkind { margin: 0; }
/* A PARTNER EVENT'S HOST LINE (21 Oct, Dallas became Adobe's Journey
   Optimizer Loyalty Tour; Hardik: "style the page a little so that it
   looks like an Adobe event"). The host's mark in its own colour, a
   hairline, then who it is with, above the kind labels. Only on a city
   (dark photo) hero today, so the ink is on-dark. */
.evhero__with {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-size: var(--t-body);
  font-weight: 500;
  color: color-mix(in srgb, var(--on-brand) 82%, transparent);
}
.evhero__with img { height: 24px; width: auto; }
/* A round badge needs more height than a wordmark to read (Chicago's TBH). */
.evhero__with img.evhero__with-badge { height: 36px; }
.evhero__with-rule { width: 1px; height: 20px; background: color-mix(in srgb, var(--on-brand) 32%, transparent); }
/* ON PHONES IT STEPS ASIDE (user, 22 Oct: "comes to on face"): the fold
   opens on the event itself, and the partner line moves BELOW the title
   and sub as one small row, the logo at caption scale. The copy column
   goes flex so order can carry it; the markup stays put, so readers and
   crawlers still meet the partner first. */
@media (max-width: 639px) {
  .evhero__copy { display: flex; flex-direction: column; align-items: flex-start; }
  .evhero__with {
    order: 10;
    margin: var(--sp-5) 0 0;
    gap: var(--sp-2);
    font-size: var(--t-caption);
  }
  .evhero__with img { height: 18px; }
  .evhero__with img.evhero__with-badge { height: 24px; }
  .evhero__with-rule { height: 14px; }
}

.evhero__t {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--tr-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* 36px, the H2 step (user, 10 Oct): Luma's full title is long, and at 48 it
   ran three lines beside the cover. Phones hold the site's 32px H1 rather
   than following --t-display-2 down to 24. */
.evhero__t em { font-style: normal; color: var(--brand-ink); white-space: nowrap; }

.evhero__sub {
  margin: var(--sp-5) 0 0;
  max-width: 36rem;
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The countdown (10 Oct): four ruled cells under Luma's question, the
   figures in the display face with tabular numerals so a ticking digit
   never shifts its neighbours. One row of hairline cells sharing edges,
   the site's boxy grammar. Shown by js/event-countdown.js only. */
.evcount { margin-top: var(--sp-8); }
.evcount[hidden] { display: none; }
.evcount__label {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.evcount.is-live .evcount__label { color: var(--brand-ink); }
.evcount__cells {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(76px, auto));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: clip;
}
.evcount__cells[hidden] { display: none; }
.evcount__cell {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
}
.evcount__cell + .evcount__cell { border-left: 1px solid var(--border); }
/* SPLIT-FLAP (the ticket grammar's event feel, 10 Oct): each figure on
   its own flap, a hairline across its middle and the lower half a shade
   deeper, like a departures board. */
.evcount__cell b {
  position: relative;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: linear-gradient(var(--surface-2) 50%, color-mix(in srgb, var(--surface-2) 80%, var(--black)) 50%);
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.evcount__cell b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--bg);
}
.evcount__cell i {
  font-style: normal;
  font-size: var(--t-caption);
  color: var(--ink-3);
}
@media (max-width: 640px) {
  .evcount__cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .evcount__cell { padding-inline: var(--sp-2); }
}

.evhero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* THE EVENT BUTTONS CARRY NO ICON since 26 Oct (user: "remove icon from
   event buttons"), WITH ONE EXCEPTION the same day (user: "only the buttons
   which open a new tab, not luma popup, but a new page, should have arrow
   out"): a button that leaves for another site in a new tab carries the
   Phosphor ArrowUpRight in the REGULAR weight (.evcta__ic; user: "do these regular state icons"). Today that is only the From Day One
   pages' "Apply to attend" (Eventbrite). The Luma "Request a seat" buttons
   carry target="_blank" only as the no-script fallback; the popup is what
   opens, so they stay text only. The gap never changes on hover. */
.evcta { display: inline-flex; align-items: center; gap: 6px; }
.evcta__ic { display: inline-flex; }
.evcta__ic svg { width: 16px; height: 16px; }


/* ---- The admission ticket --------------------------------------------------
   From the user's ticket references (Celine Dion's wallet pass, Dune's IMAX
   ticket, Playbase's stubs, 10 Oct). A BRAND BODY drawn in primitives (the
   page is whole-dark, where --brand re-resolves): "aiRA by Capillary
   presents", four labelled fields in caps micro-labels over white values,
   the seats line; then a DASHED TEAR LINE with a page-coloured notch at each
   end; then the STUB a shade deeper, carrying the countdown and the ask.
   The tear line and notches are the events pages' one ticket grammar. */
.evticket {
  margin-top: var(--sp-8);
  max-width: none;
  border-radius: var(--r-lg);
  overflow: clip;
  color: var(--on-brand);
  background: linear-gradient(160deg, var(--primary-600), var(--primary-700));
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--primary-600) 60%, transparent);
}
.evticket__main { padding: var(--sp-5) var(--sp-6); }
/* HIERARCHY (user, 10 Oct: "text look too big"): 12px caps labels over 14px
   values, a 12px seats line, 20px countdown figures. The ticket is a
   supporting object beside a 48px headline, so nothing in it competes. */
.evticket__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
}
@media (max-width: 1199px) {
  .evticket__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}
.evticket__grid dt {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-brand) 62%, transparent);
}
.evticket__grid dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--on-brand);
}
.evticket__seats {
  margin: var(--sp-4) 0 0;
  font-size: var(--t-caption);
  color: color-mix(in srgb, var(--on-brand) 72%, transparent);
}
/* The stub: a shade deeper, under a dashed tear with a notch at each end. */
.evticket__stub {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: color-mix(in srgb, var(--primary-800) 70%, var(--black));
  border-top: 2px dashed color-mix(in srgb, var(--on-brand) 38%, transparent);
}
.evticket__stub::before,
.evticket__stub::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
}
.evticket__stub::before { left: -11px; }
.evticket__stub::after { right: -11px; }
/* The countdown, retuned for the brand ground: translucent white flaps. */
.evticket .evcount { margin: 0; }
.evticket .evcount__label { color: color-mix(in srgb, var(--on-brand) 70%, transparent); }
.evticket .evcount.is-live .evcount__label { color: var(--on-brand); }
.evticket .evcount__cells {
  border-color: color-mix(in srgb, var(--on-brand) 22%, transparent);
  grid-template-columns: repeat(4, minmax(60px, auto));
}
.evticket .evcount__cell { background: transparent; padding: var(--sp-2) var(--sp-3); }
.evticket .evcount__cell + .evcount__cell { border-left-color: color-mix(in srgb, var(--on-brand) 22%, transparent); }
.evticket .evcount__cell b {
  font-size: var(--t-title-lg);
  color: var(--on-brand);
  background: linear-gradient(color-mix(in srgb, var(--on-brand) 14%, transparent) 50%, color-mix(in srgb, var(--on-brand) 8%, transparent) 50%);
}
.evticket .evcount__cell b::after { background: color-mix(in srgb, var(--primary-800) 70%, var(--black)); }
.evticket .evcount__cell i { color: color-mix(in srgb, var(--on-brand) 65%, transparent); }
/* A USED TICKET, for a past session's page: slate instead of brand, the
   same fields, a stub saying it ended and pointing to what is next. */
.evticket--past {
  background: linear-gradient(160deg, var(--slate-600), var(--slate-700));
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--slate-700) 55%, transparent);
}
.evticket--past .evticket__stub { background: var(--slate-800); }
.evticket--past .evticket__seats { font-size: var(--t-body); font-weight: 600; color: var(--on-brand); }
.evticket__ended {
  margin: 0;
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--t-title-lg);
  font-weight: 500;
  color: var(--on-brand);
}
/* The ask on the stub: white with black ink (primitives). */
.evticket__cta { background: var(--on-brand); color: var(--black); }
.evticket__cta:hover { background: color-mix(in srgb, var(--on-brand) 88%, var(--primary-200)); }
@media (max-width: 640px) {
  .evticket__main, .evticket__stub { padding-inline: var(--sp-5); }
  .evticket__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .evticket .evcount, .evticket .evcount__cells { width: 100%; }
  .evticket .evcount__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .evhero__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
}
@media (max-width: 640px) {
  .evhero__crumb { margin-bottom: var(--sp-6); }
  /* 28px with the accent free to wrap (user, 10 Oct: "check the heading
     too, not great"). At 32 Luma's 69-character title ran four lines, and
     the nowrap on its <em> left "Into" stranded at the start of the last
     one; at 28 it sets three balanced lines. */
  .evhero__t { font-size: var(--t-title-2xl); line-height: 1.16; }
  .evhero__t em { white-space: normal; }
  .evhero__ctas, .evhero__ctas .btn { width: 100%; justify-content: center; }
}


/* ---- THE CITY HERO (.evhero--city, Chicago first, 12 Oct) -------------------
   User: "use it on thumbnail and details page hero, surprise me with crazy
   design there". Four layers, back to front:
   1. THE PHOTOGRAPH, full bleed and run up behind the floating header (the
      hub's pull-up), painted from --city (an image-set on the section) and
      SHADED: dark under the copy on the left, at the top for the nav, and
      at the foot.
   2. THE CITY'S NAME, giant caps across the foot, filled with the SAME
      photograph UNSHADED via background-clip: text. The word box and the
      photo box are both inset: 0 on .evcity with the same size and position,
      so the letters line up with the picture exactly and read as windows
      cut through the shade. Change one background-position, change both.
   3. THE FLAG STRIP at the very foot, the Chicago flag's own grammar: white,
      a sky-blue stripe, a white band carrying four red six-pointed stars, a
      sky-blue stripe, white. The word sinks behind it. Being white at its
      foot, it is also the dark hero's hand-off to the light details below.
   4. THE COPY AND THE TICKET over all of it, the ticket tilted like one held
      up to the city, levelling on hover.
   Primitives throughout (--black, --on-brand, --chicago-*): a drawn object.
   Motion: the city settles in from a slight zoom on load and drifts on
   scroll; both off under reduced motion. */
.evhero--city {
  --nav-stack: calc(var(--nav-h) + var(--nav-float) + 2px);
  --word: clamp(96px, 18.6vw, 380px);
  /* FLAGS ARE OFF every page since 22 Oct (user: "remove flags from
     each events details page"); the strip rules are in git. 0 keeps the
     photo running to the hero's foot, the Bengaluru treatment. */
  --flag-h: 0px;
  --city-pos: 50% 58%;
  /* The inline --city is the full photo; phones paint --city-sm. A custom
     property set inline cannot be overridden by a media query, hence the
     second name. */
  --city-img: var(--city);
  position: relative;
  overflow: clip;
  margin-top: calc(-1 * var(--nav-stack));
  /* The copy clears the word's cap height (0.74 line box, sunk 0.06em). */
  padding: calc(var(--nav-stack) + var(--sp-8)) 0 calc(var(--word) * 0.7 + var(--flag-h) + var(--sp-6));
  /* A full screen, like the hub's hero, so the city has room: the copy and
     the ticket sit at its foot above the word, the back link at its head. */
  display: flex;
  flex-direction: column;
  min-height: max(min(100vh, 1000px), 720px);
  min-height: max(min(100svh, 1000px), 720px);
  background: var(--black);
  color: var(--on-brand);
}
/* No frame rails across a photograph (the NASCAR card's precedent). */
.evhero--city::before,
.evhero--city::after { display: none; }
body.page-event .nav.nav-dark:not(.nav--scrolled) {
  background-color: transparent !important;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.evcity { position: absolute; inset: 0 0 var(--flag-h); }
.evcity__ph,
.evcity__word {
  position: absolute;
  inset: 0;
  background-image: var(--city-img);
  background-size: cover;
  background-position: var(--city-pos);
  background-repeat: no-repeat;
}
.evcity__ph {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--black) 92%, transparent) 0%, color-mix(in srgb, var(--black) 70%, transparent) 42%, color-mix(in srgb, var(--black) 18%, transparent) 78%, color-mix(in srgb, var(--black) 30%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--black) 70%, transparent), transparent 24%),
    linear-gradient(to top, color-mix(in srgb, var(--black) 86%, transparent), transparent 46%),
    var(--city-img);
  background-size: auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, var(--city-pos);
}
.evcity__word {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: clip;
  font-family: var(--font-display);
  font-size: var(--word);
  font-weight: 700;
  line-height: 0.74;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: saturate(1.2) contrast(1.06);
  /* The letters sink a little behind the flag strip. */
  padding-bottom: 0;
  translate: 0 0.06em;
}

.evhero--city > .padding-global { position: relative; z-index: 2; flex: 1; display: flex; }
.evhero--city > .padding-global > .container { display: flex; flex-direction: column; }
.evhero--city .evhero__grid { margin-top: auto; }
.evhero--city .crumb { color: color-mix(in srgb, var(--on-brand) 40%, transparent); }
.evhero--city .crumb a { color: color-mix(in srgb, var(--on-brand) 70%, transparent); }
.evhero--city .crumb a:hover { color: var(--on-brand); }
.evhero--city .crumb__current { color: var(--on-brand); }
.evhero--city .evhero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-12);
  align-items: end;
}
.evhero--city .evkind { color: var(--tertiary-300); }
.evhero--city .evhero__t { font-size: var(--t-display-1s); line-height: 1.06; color: var(--on-brand); }
.evhero--city .evhero__t em { color: var(--tertiary-300); }
.evhero--city .evhero__sub { color: color-mix(in srgb, var(--on-brand) 78%, transparent); }

/* THE TICKET IS PAPER AND SITS STRAIGHT since 13 Oct (user: "try something
   better with this, and also the tilt look not good"; the tilted brand
   gradient is in git). A white ticket against the dark city, the flag's
   blue on its top edge, "Admit one" and the aiRA mark on its head, ink
   fields, the countdown back on its light flaps, a barcode closing the
   stub. Its notches cannot be page-coloured discs over a photograph, so
   each half MASKS its own half-notch out (the main its bottom corners, the
   stub its top ones) and the shadow is a drop-shadow filter on the whole,
   which follows the cut-outs. Hover only lifts it. */
.evhero__hold { min-width: 0; }
.evhero--city .evticket {
  margin-top: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  color: var(--ink);
  filter: drop-shadow(0 28px 36px color-mix(in srgb, var(--black) 60%, transparent));
}
/* No hover lift (user, 13 Oct: "on hover dont move up"); the ticket sits
   still. */
.evhero--city .evticket__admit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.evhero--city .evticket__main {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
  border-top: 3px solid var(--city-accent, var(--chicago-blue));
  -webkit-mask:
    radial-gradient(circle 11px at 0 100%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 100%, transparent 96%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 11px at 0 100%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 100%, transparent 96%, #000) right / 51% 100% no-repeat;
}
.evhero--city .evticket__grid dt { color: var(--ink-3); }
.evhero--city .evticket__grid dd { color: var(--ink); }
.evhero--city .evticket__seats { color: var(--ink-3); }
/* A PAST page's paper ticket (Nashville, Bengaluru): the ended line and the
   went-count read in ink; the base past rules painted them for slate. */
.evhero--city .evticket__ended { color: var(--ink); }
.evhero--city .evticket--past .evticket__seats { color: var(--ink-2); font-weight: 600; }
.evhero--city .evticket__stub {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface-2);
  border-top-color: color-mix(in srgb, var(--ink) 22%, transparent);
  -webkit-mask:
    radial-gradient(circle 11px at 0 0, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 0, transparent 96%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 11px at 0 0, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 0, transparent 96%, #000) right / 51% 100% no-repeat;
}
.evhero--city .evticket__stub::before,
.evhero--city .evticket__stub::after { display: none; }
/* TWO FIXED ROWS, NOT A WRAPPING ROW (26 Oct, same recording). The stub was
   flex-wrap, so whether the button sat beside the countdown or under it
   depended on a few spare pixels: on one laptop it fitted beside it, on
   another it did not, and the countdown's digits change width as they
   tick. Now the countdown (or "This event has ended") always holds the top
   row and the button and barcode share the second, at every width. */
.evhero--city .evticket__stub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}
.evhero--city .evticket__stub > :first-child { grid-column: 1 / -1; }
.evhero--city .evticket__stub > .evhero__ctas { justify-self: start; }
.evhero--city .evticket__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
/* The countdown back on the base light spec: the brand-ticket overrides
   above this scope painted it for a blue ground. */
.evhero--city .evticket .evcount__label { color: var(--ink-3); }
.evhero--city .evticket .evcount.is-live .evcount__label { color: var(--brand-ink); }
.evhero--city .evticket .evcount__cells { border-color: var(--border); }
.evhero--city .evticket .evcount__cell + .evcount__cell { border-left-color: var(--border); }
.evhero--city .evticket .evcount__cell b {
  color: var(--ink);
  background: linear-gradient(var(--surface) 50%, color-mix(in srgb, var(--surface) 86%, var(--black)) 50%);
}
.evhero--city .evticket .evcount__cell b::after { background: var(--surface-2); }
.evhero--city .evticket .evcount__cell i { color: var(--ink-3); }
/* The ask on paper is the site's own primary. */
.evhero--city .evticket__cta { background: var(--black); color: var(--on-brand); }
.evhero--city .evticket__cta:hover { background: color-mix(in srgb, var(--black) 86%, var(--on-brand)); }
/* The barcode closing the stub, the hub ticket's own two-pitch stripes. */
.evhero--city .evticket__code {
  flex: none;
  align-self: center;
  width: 52px;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 78%, transparent) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 78%, transparent) 0 1px, transparent 1px 9px);
}

@media (prefers-reduced-motion: no-preference) {
  .evcity { animation: evcity-in 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @supports (animation-timeline: view()) {
    .evcity__ph, .evcity__word {
      animation: evcity-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes evcity-in { from { scale: 1.08; opacity: 0.4; } }
@keyframes evcity-drift { to { background-position-y: 30%; } }
@media (prefers-reduced-motion: reduce) {
  .evhero--city .evticket { transition: none; }
}

@media (max-width: 991px) {
  .evhero--city { --word: 24vw; padding-top: calc(var(--nav-stack) + var(--sp-8)); }
  .evhero--city .evhero__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .evhero--city .evticket { max-width: 520px; }
}
@media (max-width: 767px) {
  .evhero--city { --city-img: var(--city-sm); --city-pos: 50% 70%; }
}
@media (max-width: 640px) {
  .evhero--city .evhero__t { font-size: var(--t-title-2xl); line-height: 1.16; }
  .evhero--city .evticket__code { display: none; }
  /* No barcode on a phone, so no second track: the button runs full width. */
  .evhero--city .evticket__stub { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The event content -----------------------------------------------------
   Sarvam's "Event content": one small heading, then the listing's own copy
   as a plain document on a reading measure, ranged left on the container.
   The /about #whatis passage and the brand wave card it replaced are in
   git; the floating bar is now the page's only second ask. STRICT TO LUMA:
   every word is the listing's own. */

.evbody { position: relative; }
/* The dotted ground for widths where the bands are off (below 1200). An
   ELEMENT, never .dot-field on the section: the section's ::before is the
   frame's rail (the /about trap). Pitch 20 divides --cell. */
.evbody__ground {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 0 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 0 62%, transparent 100%);
}
@media (min-width: 1200px) {
  /* Two dot fields cannot share a section: the band's pitch is 14px. */
  .evbody__ground { display: none; }
}
.evbody .padding-global { position: relative; }

/* A document heading, not a section head: 24px, which the h3 ladder's
   statement step uses, stated explicitly on an h2. */
.evbody__h {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--t-title-xl);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--ink);
}
.evbody__close { max-width: 48rem; }
.evbody__passage { display: grid; gap: var(--sp-4); }
.evbody__passage p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.evbody__passage p.evbody__lede {
  /* A step up since 13 Oct (user: "the body lands kind of dull"): the
     opener Luma bolds reads as a lede, not another paragraph. */
  font-size: var(--t-body-lg);
  color: var(--ink);
  font-weight: 500;
}
.evbody__t {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-title-sm);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--ink);
}
/* Each body heading leads with a 20px Phosphor duotone glyph (user, 13
   Oct: "can we use icons with these h3 headings?"), harvested from the
   package per heading subject; it inherits the heading's ink. */
.evbody__ic { flex: none; width: 20px; height: 20px; }
/* Luma's topics: a plain bulleted list (sarvam). */
.evbody__list {
  margin: 0;
  /* The global reset strips list markers; this list wants them back. */
  list-style: disc;
  padding-left: 1.25em;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.evbody__list li::marker { color: var(--ink-3); }
/* A PARTNER CONFERENCE'S LINE-UP (From Day One pages, 21 Oct): the
   organiser's speakers as plain text, name over role and company, two
   columns. Text, not faces: the photos are From Day One's, not ours. */
.evspk { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
.evspk li { display: grid; gap: 2px; min-width: 0; }
.evspk__n { font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.evspk__r { font-size: var(--t-caption); line-height: 1.4; color: var(--ink-3); }
/* WITH FACES (user, 22 Oct, supplying the NYC headshots: "for new york,
   added people images"): a 44px disc beside each name, an initials disc
   where no photo was supplied (the host-chip precedent). The photos are
   From Day One's speakers, encoded at 192px in assets/events/speakers/. */
.evspk--faces li {
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  align-items: center;
}
.evspk--faces .evspk__n { align-self: end; }
.evspk--faces .evspk__r { align-self: start; }
.evspk__av {
  grid-row: 1 / 3;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.evspk__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evspk__ini {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
/* Collapsed by js/event-speakers.js: the first eight show, the button
   under the list says how many more. Script off, the list is whole. */
.evspk.is-cut li:nth-child(n + 9) { display: none; }
.evspk__more { margin-top: var(--sp-5); }
@media (max-width: 639px) { .evspk { grid-template-columns: 1fr; } }
/* An organiser with no mark of ours to show: a Phosphor glyph in the
   logo chip's white disc. */
.evhost__glyph { width: 20px; height: 20px; color: var(--ink-3); }

/* LOCATION AND THE HOSTS ARE A PAPER STUB, a white card with a dashed
   tear and punch notches, the hero ticket's own grammar (13 Oct: "the
   body lands kind of dull"). It sat BESIDE the article as a sticky second
   column for part of 13 Oct, then closed the article at the passage's
   48rem. SINCE 14 Oct (user: "a lot of space wasted") it is the hero
   ticket's own SHAPE at the container's FULL WIDTH from 992 up: the map
   and facts as the printed main, a VERTICAL perforation, and a 320px stub
   carrying the hosts (a roster of rows, not discs in a field of air) and
   the share icons. Below 992 it stacks back to the one-column card at the
   passage's measure, tears horizontal. The two halves are .evbody__half
   wrappers on all six pages; edit them together. */
.evbody__cols { display: grid; gap: var(--sp-10); }
/* WITH THE EVENT'S OWN CREATIVE (Dallas, 21 Oct): the passage keeps its
   measure as its cap and the square Luma cover takes a 300-420px column
   beside it from 1100 up (at a bare 1fr it came out 206px under the band),
   the closing ticket still spanning the row. Below, it follows the
   passage at the passage's measure. */
.evbody__poster { margin: 0; max-width: 48rem; }
.evbody__poster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
@media (min-width: 1100px) {
  .evbody__cols--poster { grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 420px); column-gap: var(--sp-12); }
  .evbody__cols--poster > .evbody__poster { grid-column: 2; grid-row: 1; }
  .evbody__cols--poster > .evbody__aside { grid-column: 1 / -1; }
}
.evbody__t--first { margin-top: 0; }
/* THE EVENT'S PARTNERS (21 Oct, Hardik: partner logos on each event
   page): the passage opens on who the event is with, a caps micro-label
   ("In association with", "Presented by" ...) and the partners' own marks
   in full colour, closed off by a hairline. A page with two kinds of
   partner sets two .evpartners__group pairs in the row (Chicago: TBH "In
   association with", NALA "Community partner", user 21 Oct). Three logo shapes, one optical
   size, as on the hub's partner row. Only on events that HAVE a partner:
   Nashville and the two Captivate talks were Capillary's own. */
.evpartners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.evpartners__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.evbody__passage p.evpartners__k { font-size: var(--t-caption); line-height: var(--lh-title); color: var(--ink-3); }
.evpartners__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
/* WITH DESCRIPTIONS (user, 22 Oct: "have a description on The Big
   HandShake Chicago and NALA too. 2 lines each"; Chicago only so far,
   futureproof.website's sponsor-band shape): each group stands as a
   column, label over mark over two sourced lines. */
.evpartners--told { align-items: flex-start; gap: var(--sp-6) var(--sp-16); }
.evpartners--told .evpartners__group {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 58ch;
}
.evpartners__d {
  margin: 0;
  font-size: var(--t-caption);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.evpartners__d a {
  color: var(--brand-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.evpartners__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); }
.evpartners__logo { display: block; width: auto; }
.evpartners__logo--word { height: 24px; }
.evpartners__logo--stack { height: 36px; }
.evpartners__logo--badge { height: 52px; }
.evbody__aside {
  max-width: 48rem;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  /* The tear's notches hang half out of the card and are clipped by it. */
  overflow: clip;
}
.evbody__aside .evbody__t { margin: 0; }
/* THE TICKET TILTS UNDER THE POINTER (21 Oct, user: "i need the hover
   moving effect"): js/ticket-tilt.js writes --rx/--ry from the mouse, at
   most 3deg on this wide card, and this turns them into a perspective
   tilt. Scoped to .is-in so .reveal's own rise keeps the transform until
   it lands (equal specificity to .reveal.is-in; this sheet loads later).
   Slow ease back when the pointer leaves, a short follow while it moves.
   Mouse only and off under reduced motion, both in the script. */
.evbody__aside[data-tilt].is-in {
  transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
.evbody__aside[data-tilt].is-in.is-tilting {
  transition: transform 140ms linear, box-shadow 300ms var(--ease);
  box-shadow: var(--shadow-md);
}
/* display: contents below 992, so the halves' children stack on the
   aside's own grid exactly as before the wrappers existed. */
.evbody__half { display: contents; }
@media (min-width: 992px) {
  .evbody__aside {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto 320px;
    align-items: stretch;
    padding: 0;
    gap: 0;
  }
  .evbody__half {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
    min-width: 0;
    padding: var(--sp-6);
  }
  /* When the stub runs taller (Bengaluru's five hosts), the map grows into
     the main's leftover height instead of leaving a field of white. */
  .evbody__half--main { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  /* The seam between main and stub is the perforation, stood upright:
     border-left instead of border-top, the punch notches at its top and
     bottom, clipped by the card like every other tear. */
  /* .evbody__aside doubled on: the base .evbody__tear rule sits later in
     this sheet and ties on specificity, so bare --seam rules lose height
     and border back to it. */
  .evbody__aside .evbody__tear--seam {
    width: 0;
    height: auto;
    margin: 0;
    border-top: 0;
    border-left: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .evbody__aside .evbody__tear--seam::before,
  .evbody__aside .evbody__tear--seam::after { left: -11px; }
  .evbody__aside .evbody__tear--seam::before { top: -11px; }
  .evbody__aside .evbody__tear--seam::after { top: auto; bottom: -11px; }
  /* The stub's inner tear (hosts / share) bleeds to the stub's own edges;
     its left notch lands on the seam, a punch at the junction. */
  .evbody__half--stub .evbody__tear { margin: var(--sp-1) calc(-1 * var(--sp-6)); }
  /* Hosts as a ROSTER in the narrow stub: 44px disc and the name on one
     row, so five hosts fill the column instead of wrapping 72px discs. */
  .evbody__half--stub .evhosts__list--mini { display: grid; gap: var(--sp-3); }
  .evbody__half--stub .evhosts__list--mini .evhost {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
    width: auto;
    text-align: left;
  }
  .evbody__half--stub .evhosts__list--mini .evhost__av { width: 44px; height: 44px; }
  .evbody__half--stub .evhosts__list--mini .evhost__av--logo img { padding: 8px; }
  .evbody__half--stub .evhosts__list--mini .evhost__name { font-size: var(--t-body); }
}
/* The tear between the stub's halves: the ticket grammar's dashed line,
   stated locally (events.css's :root --evtear does not reach this page,
   the standing pitfall), with the page-coloured notch discs half-clipped
   at each end, exactly the old hub cards' seam. */
.evbody__tear {
  position: relative;
  height: 0;
  margin: var(--sp-1) calc(-1 * var(--sp-5));
  border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.evbody__tear::before,
.evbody__tear::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
}
.evbody__tear::before { left: -11px; }
.evbody__tear::after { right: -11px; }
/* WHEN AND WHERE (user, 13 Oct: "this can be styled better with more
   details"): beside the map, the facts the hero ticket carries, read from
   each page's own ticket so the two cannot disagree: date, time, venue,
   the page's fourth line (after / part of / presented by) and its seats
   line (approval, room, or Luma's went count). The ticket's field
   grammar, a caps micro-label over the value, with a 20px duotone glyph.
   The map fills the left half at the list's height; below 640 it stacks
   on the base rule. */
@media (min-width: 641px) {
  .evbody__aside .evmap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--sp-6);
  }
  .evbody__aside .evmap__frame { aspect-ratio: auto; min-height: 240px; height: 100%; }
}
/* 0,2,0 so the base map figure's own <640 row-wrap rule never flips this
   caption sideways inside the card: the facts stay a column and the Maps
   link closes it at every width. */
.evbody__aside .evmap__cap { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.evfacts { margin: 0; display: grid; gap: var(--sp-3); }
.evfacts > div { position: relative; padding-left: 30px; }
.evfacts__ic { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: var(--ink-3); }
.evfacts dt {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-3);
}
.evfacts dd { margin: 2px 0 0; font-size: var(--t-body); font-weight: 500; line-height: 1.4; color: var(--ink); }
/* A published venue's street address (Chicago's LUXBAR, 22 Oct): the
   venue name stays the value, the address a quieter second line under it,
   in the ticket and the facts list alike. */
.evaddr {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 450;
  line-height: 1.4;
  color: var(--ink-3);
}

/* Where: a city-level Google map (the venue stays Luma's until approval).
   Framed like the cover: hairline, 12px corners. The embed is light, so on
   this whole-dark page it is INVERTED and hue-rotated back, which keeps
   water blue and land dark rather than putting a white slab in a dark
   document. */
/* A SMALL TILE since 13 Oct, second pass (user: "the google map embed, make
   its size small"; the 21:9 full-width strip was still ~330px tall). The
   map is a 280px 16:10 tile with the city and the Google Maps link standing
   beside it; it only ever shows a city, so it needs no more. Full width
   again below 640, where there is no room beside it. */
.evmap {
  margin: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-3) var(--sp-5);
}
.evmap__frame {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: clip;
  background: var(--surface-2);
}
.evmap__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
:root[data-theme="dark"] .evmap__frame iframe {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.7) brightness(0.95);
}
.evmap__cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.evmap__cap b { font-weight: 500; color: var(--ink); }
.evmap__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.evmap__link:hover { color: var(--brand-ink); }
.evmap__link svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .evmap { grid-template-columns: 1fr; }
  .evmap__frame { aspect-ratio: 16 / 9; }
  .evmap__cap { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .evmap__link { transition: none; }
}

/* Hosted by: Luma's host list, compact chips (a disc, the name, the role). */
.evhosts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.evhost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.evhost__av {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wash-primary);
  border: 1px solid var(--brand-line);
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--brand-ink);
}
/* A host's photo (supplied 10 Oct, 128px encodes in
   /assets/events/hosts/): the disc becomes a frame for it. */
.evhost__av--img { overflow: clip; background: var(--surface-2); border-color: var(--border); }
.evhost__av--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* "aiRA by Capillary" takes the aiRA sparkle (user, 12 Oct: "if it says aira
   by cap, use aira logo, if its just capillary, use capillary logo"), set
   inside the disc on white rather than cropped to fill it. */
.evhost__av--logo { background: var(--surface); }
.evhost__av--logo img { object-fit: contain; padding: 6px; }
/* Name over role, for the Captivate speaker chips (13 Oct). */
.evhost__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evhost__who .evhost__role { line-height: 1.35; }
.evhost__name { font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.evhost__role { font-size: var(--t-caption); color: var(--ink-3); }

/* THE CAPTIVATE HEADLINERS ARE BIG FACE CUTOUTS (user, 13 Oct, supplying a
   four-speakers-on-coloured-discs reference: "this i wanted like face
   cutouts big"): the chip grammar stands down on this list and each
   speaker is an alpha-matted cutout (macOS Vision subject lift over the
   originals in assets/events/source; a scratchpad tool made them, so
   REGENERATE rather than re-matte by hand) sitting bottom-anchored on a
   coloured disc, shoulders clipped by its edge, name and role centred
   below. The discs cycle the ramps' light steps. */
.evhosts__list--faces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
}
.evhosts__list--faces .evhost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: center;
}
.evhosts__list--faces .evhost__av {
  width: 100%;
  max-width: 176px;
  height: auto;
  aspect-ratio: 1;
  border: 0;
}
.evhosts__list--faces .evhost__av picture { display: block; width: 100%; height: 100%; }
.evhosts__list--faces .evhost:nth-child(4n + 1) .evhost__av { background: var(--tertiary-300); }
.evhosts__list--faces .evhost:nth-child(4n + 2) .evhost__av { background: var(--primary-300); }
.evhosts__list--faces .evhost:nth-child(4n + 3) .evhost__av { background: var(--secondary-300); }
.evhosts__list--faces .evhost:nth-child(4n + 4) .evhost__av { background: var(--tertiary-200); }
.evhosts__list--faces .evhost__who { align-items: center; }
@media (max-width: 639px) {
  .evhosts__list--faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* THE ASIDE'S HOSTS SPEAK THE SAME GRAMMAR IN MINIATURE (user, 13 Oct:
   "show these pill host chips in any better form"): the pill chips are
   gone; each host is a 72px coloured disc with their cutout over it, the
   name centred under, wrapping as a row. The logo chips (aiRA, Capillary)
   keep their mark, set on the brand wash instead of a hue so a logo never
   reads as a person. */
.evhosts__list--mini { gap: var(--sp-5) var(--sp-3); }
.evhosts__list--mini .evhost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 88px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: center;
}
.evhosts__list--mini .evhost__av { width: 72px; height: 72px; border: 0; overflow: clip; }
/* The hosts are THEIR OWN PHOTOS, as supplied (user, 13 Oct: "please dont
   change bg of evhost images, use the ones shared only"), cropped to the
   disc with a hairline; the matted cutouts on hue discs are gone. */
.evhosts__list--mini .evhost__av--img { background: var(--surface-2); border: 1px solid var(--border); }
/* The logo chip sits on PLAIN WHITE with a hairline (user, 13 Oct: the
   wash disc "not loking good, use white only"). */
.evhosts__list--mini .evhost__av--logo { background: var(--surface); border: 1px solid var(--border); }
.evhosts__list--mini .evhost__av--logo img { padding: 14px; }
.evhosts__list--mini .evhost__name { font-size: var(--t-caption); line-height: 1.3; }

/* THE DAY'S AGENDA on the two Captivate talk pages (user, 13 Oct,
   supplying capillaryevents.com's agenda URLs; "use proper table UI" the
   same day, with a shadcn-svelte data-table reference, HAND-PORTED like
   every sv-* reference: no npm here). A real <table> in a rounded ruled
   frame: a muted header row, hairline row rules, no column verticals,
   people in a muted line under each session title. OUR SESSION is a tinted
   row with a "This session" chip (see the rule below; it replaced a 2px
   brand top edge and a caps label). COLLAPSED BY js/event-agenda.js to the first six
   rows with a "Show the full day" button; script off, the whole day
   shows. The Room column drops below 640. */
.evagenda__note { margin: var(--sp-2) 0 0; font-size: var(--t-caption); color: var(--ink-3); }
.evagenda { margin: var(--sp-4) 0 var(--sp-8); }
.evagenda__frame {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: clip;
  background: var(--surface);
}
.evagenda__table { width: 100%; border-collapse: collapse; }
.evagenda__table th {
  padding: 9px 14px;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-2);
}
.evagenda__table td {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
.evagenda__time {
  width: 1%;
  white-space: nowrap;
  font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  padding-top: 12px;
}
.evagenda__t { display: block; font-size: var(--t-body); font-weight: 500; color: var(--ink); line-height: var(--lh-title); }
.evagenda__meta { display: block; margin-top: 2px; font-size: var(--t-caption); color: var(--ink-3); line-height: 1.4; }
.evagenda__room { width: 172px; font-size: var(--t-caption); color: var(--ink-3); padding-top: 12px; }
/* OUR SESSION IS A TINTED ROW since 13 Oct (user: "can we show this
   better?"). The 2px brand top edge read as a stray divider and the caps
   "THIS SESSION" as a shout. Now the whole row takes the light primary
   wash (a table marking ONE row, the place a fill is the clearest signal,
   not a hover or selected state), its time goes brand, its title stays
   ink, and "This session" is a small solid brand chip in sentence case. */
.evagenda__row--here td { background: var(--wash-primary); }
.evagenda__row--here .evagenda__time { color: var(--brand-ink); font-weight: 600; }
.evagenda__row--here .evagenda__room { color: var(--ink-2); }
.evagenda__here {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  vertical-align: 2px;
  border-radius: var(--r-xs);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.evagenda.is-cut tbody tr:nth-child(n + 7) { display: none; }
.evagenda__more { display: flex; margin: var(--sp-4) auto 0; }
@media (max-width: 639px) {
  .evagenda__table th:nth-child(3), .evagenda__table td.evagenda__room { display: none; }
  .evagenda__table th, .evagenda__table td { padding-inline: 10px; }
}

/* ---- The floating ask -----------------------------------------------------
   The homepage cue's pill (white, 28px corners, --shadow-ask), fixed to the
   foot of the screen. js/event-bar.js unhides it and toggles .is-on: on once
   the hero's buttons have scrolled away. The closing card that used to stop
   it came out with the sarvam layout, so it now rides to the page's end. */
.evbar {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  max-width: calc(100% - 2 * var(--sp-5));
  /* The shadow is a FILTER on the outer box: the notch mask sits on the
     inner .evbar__tk and would clip a box-shadow there. */
  filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--black) 45%, transparent));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 24px) scale(0.96);
  transition: opacity 320ms var(--ease), transform 480ms cubic-bezier(0.22, 1.2, 0.36, 1);
}
/* A TICKET STUB (user, 10 Oct: "build on all"): 12px corners, a semicircle
   notch masked out of each short end, and a dashed tear between the event
   line and the ask. */
.evbar__tk {
  --notch: 9px;
  display: flex;
  align-items: center;
  padding: 8px calc(var(--notch) + 4px) 8px calc(var(--notch) + 14px);
  /* The admission ticket's own colour (user, 10 Oct), in primitives. */
  background: linear-gradient(160deg, var(--primary-600), var(--primary-700));
  color: var(--on-brand);
  border-radius: var(--r-md);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.evbar__go {
  flex: none;
  margin-left: var(--sp-4);
  padding-left: var(--sp-3);
  align-self: stretch;
  display: flex;
  align-items: center;
  border-left: 2px dashed color-mix(in srgb, var(--on-brand) 38%, transparent);
}
/* On the brand stub: white text, a white button with black ink, the
   ticket's own ask. */
.evbar__btn { background: var(--on-brand); color: var(--black); }
.evbar__btn:hover { background: color-mix(in srgb, var(--on-brand) 88%, var(--primary-200)); }
.evbar[hidden] { display: none; }
.evbar.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.evbar__txt {
  min-width: 0;
  font-size: var(--t-body);
  color: color-mix(in srgb, var(--on-brand) 78%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evbar__txt b { font-weight: 600; color: var(--on-brand); }
.evbar__btn { flex: none; }

@media (max-width: 640px) {
  .evbar { left: var(--sp-5); right: var(--sp-5); max-width: none; transform: translateY(24px); }
  .evbar__tk { justify-content: space-between; }
  .evbar.is-on { transform: none; }
  /* TWO LINES, NOT AN ELLIPSIS (user, 10 Oct: the details were getting
     truncated): the city on top, the date and time under it, so nothing is
     cut beside the button. The separator dot is dropped with the break. */
  .evbar__txt { font-size: var(--t-caption); line-height: 1.3; overflow: visible; }
  .evbar__tk { padding-left: calc(var(--notch) + 10px); }
  .evbar__go { margin-left: var(--sp-3); }
  .evbar__btn.btn { padding-inline: 14px; }
  .evbar__txt b { display: block; font-size: var(--t-body); }
  .evbar__sep { display: none; }
}
/* The narrowest phones (360) are about 28px short of "Mon 9 Nov · 5:00 PM
   CT" on one line beside the button, so the button tightens and the tear
   closes in, rather than the date wrapping or being cut. */
@media (max-width: 380px) {
  .evbar__btn.btn { padding-inline: 12px; }
  .evbar__go { margin-left: var(--sp-2); padding-left: var(--sp-2); }
  .evbar__tk { padding-left: calc(var(--notch) + 8px); }
  .evbar__btn .evcta__ic { display: none; }
}
/* Below that (320) it is allowed to wrap: a third line beats a clipped one. */
@media (max-width: 340px) {
  .evbar__txt { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .evbar { transition: none; }
}

/* THE SOURCE LINE on a talk page (12 Oct): where the passage above comes
   from, with a link to it in full. Smaller and quieter than the passage. */
.evbody__src {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--t-caption);
  color: var(--ink-3);
}
/* A PROSE source line (the FDO pages' "line-up may change" sentence): the
   flex base above turns a sentence's text nodes and its link into
   separated flex items, which shredded it (user, 22 Oct: "fix this").
   This is a plain paragraph whose link looks like one. */
.evbody__src--prose { display: block; max-width: 48rem; line-height: var(--lh-body); }
.evbody__src--prose a {
  color: var(--brand-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.evbody__src--prose a:hover { text-decoration-style: dashed; }

/* THE PERFORATED JOINTS CAME OFF 22 Oct (user: the crossing squares are
   "missing in a lot of sections in events"): the detail pages take the
   site's plain joint, hairline and 6px squares, like every other page. The
   dashed tear with punch-hole rings that stood here since 13 Oct is in git. */

/* ---- The write-up ticket (.evread, 13 Oct) ----------------------------------
   The agentic-workflows page's LinkedIn write-up as a TICKET CARD (user,
   from a #GROWTH Mixer reference: "a card like this ... design dont copy
   exact, these are our competitor"): what is taken is the SHAPE, a photo
   body and a stub behind a tear; the chrome is this site's own ticket
   grammar, the perforation, the notch masks, the two-pitch barcode, the
   brand stub (never the reference's lime and pink). One link, opening the
   post in a new tab. The notches are MASKS on each half (a photo cannot
   take page-coloured discs), the shadow a drop-shadow filter. */
.evread {
  display: flex;
  margin-top: var(--sp-6);
  text-decoration: none;
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--black) 25%, transparent));
  transition: filter var(--dur-fast) var(--ease);
}
/* Hover deepens the shadow only, no lift (user, 13 Oct: "on hover dont
   move up"). */
.evread:hover,
.evread:focus-visible {
  filter: drop-shadow(0 24px 36px color-mix(in srgb, var(--black) 32%, transparent));
}
.evread:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.evread__main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 220px;
  overflow: clip;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--black);
  -webkit-mask:
    radial-gradient(circle 10px at 100% 0, transparent 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 100% 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 10px at 100% 0, transparent 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 100% 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;
}
.evread__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.evread__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--black) 82%, transparent), color-mix(in srgb, var(--black) 20%, transparent) 60%);
}
.evread__copy {
  position: absolute;
  left: var(--sp-6);
  right: 76px;
  bottom: var(--sp-5);
  color: var(--on-brand);
}
.evread__copy b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-title-lg);
  font-weight: 600;
  line-height: var(--lh-title);
}
.evread__copy i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: var(--t-caption);
  color: color-mix(in srgb, var(--on-brand) 75%, transparent);
}
.evread__go {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-5);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--on-brand);
  color: var(--black);
  transition: background-color var(--dur-fast) var(--ease);
}
.evread__go svg { width: 18px; height: 18px; }
.evread:hover .evread__go { background: var(--primary-200); }
.evread__stub {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 128px;
  padding: var(--sp-5) var(--sp-4);
  border-left: 2px dashed color-mix(in srgb, var(--on-brand) 45%, transparent);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(160deg, var(--primary-600), var(--primary-700));
  color: var(--on-brand);
  -webkit-mask:
    radial-gradient(circle 10px at 0 0, transparent 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 0 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 10px at 0 0, transparent 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 10px at 0 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;
}
.evread__code {
  width: 68px;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, var(--on-brand) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, var(--on-brand) 0 1px, transparent 1px 9px);
  opacity: 0.9;
}
.evread__cta {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Phones: the stub becomes the ticket's foot, the tear running across. */
@media (max-width: 640px) {
  .evread { flex-direction: column; }
  .evread__main {
    min-height: 190px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    -webkit-mask:
      radial-gradient(circle 10px at 0 100%, transparent 96%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle 10px at 100% 100%, transparent 96%, #000) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle 10px at 0 100%, transparent 96%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle 10px at 100% 100%, transparent 96%, #000) right / 51% 100% no-repeat;
  }
  .evread__stub {
    flex-direction: row;
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    border-left: 0;
    border-top: 2px dashed color-mix(in srgb, var(--on-brand) 45%, transparent);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    -webkit-mask:
      radial-gradient(circle 10px at 0 0, transparent 96%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle 10px at 100% 0, transparent 96%, #000) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle 10px at 0 0, transparent 96%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle 10px at 100% 0, transparent 96%, #000) right / 51% 100% no-repeat;
  }
  .evread__cta { writing-mode: horizontal-tb; rotate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .evread, .evread__go { transition: none; }
}

/* SHARE THIS EVENT (user, 13 Oct, with a round-icon "Share this event"
   reference): the last section of the paper stub, after a tear. Four
   network links and a copy-link button as 44px outlined circles, the
   site's round icon-control shape (the cue's send circle). State is
   colour on the edge and the glyph, never a fill. The copy button's label
   is for screen readers; it confirms visually by turning its link glyph
   into a check, in brand ink, for two seconds. */
.evshare { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.evshare__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.evshare__btn:hover { border-color: var(--brand-line); color: var(--brand-ink); }
.evshare__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.evshare__ic { width: 20px; height: 20px; flex: none; }
/* THE FOUR NETWORK MARKS ARE THE USER'S SUPPLIED FILES (14 Oct, user:
   "keep our social icons i shared"; assets/social/), the ONE NAMED
   EXCEPTION to the all-duotone events pages: LinkedIn is the footer's own
   bare "in" glyph, here in LinkedIn blue (the footer keeps it in ink), and
   X, Facebook and WhatsApp carry their own colours. A network mark keeps
   its colour like a customer logo, so hover only lights the edge on these
   four; the copy-link button keeps the brand-ink hover. Colours are tokens
   fed in through currentColor; Facebook's "f" is a white knockout. */
.evshare__btn--li,
.evshare__btn--li:hover { color: var(--linkedin-blue); }
.evshare__btn--x,
.evshare__btn--x:hover  { color: var(--black); }
.evshare__btn--fb,
.evshare__btn--fb:hover { color: var(--facebook-blue); }
.evshare__btn--wa,
.evshare__btn--wa:hover { color: var(--whatsapp-green); }
.evshare__knock { fill: var(--on-brand); }
.evshare__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.evshare__ok { display: none; }
.evshare__copy.is-copied { border-color: var(--brand-line); color: var(--brand-ink); }
.evshare__copy.is-copied .evshare__ic:not(.evshare__ok) { display: none; }
.evshare__copy.is-copied .evshare__ok { display: block; }
@media (prefers-reduced-motion: reduce) {
  .evshare__btn { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .evbody__aside[data-tilt].is-in { transform: none; transition: none; }
}