/* WDYE Studio event-site theme (adapted from the WeDoYourEvents ELEVATE template) */
:root {
  --ink: #14161c; --ink-soft: #565c6b; --ink-faint: #667085;
  --surface: #fff; --line: #e7e9f0; --line-soft: #eef0f6;
  --brand: #4f46e5; --accent: #e0a43b;
  /* Soft & Dark themes derive from the event's brand color so all three cohere */
  --surface-alt: color-mix(in srgb, var(--brand) 5%, #f6f7fb);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, #fff);
  --dark: color-mix(in srgb, var(--brand) 16%, #100d1c);
  --radius: 16px; --radius-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(20,22,28,.04), 0 2px 8px rgba(20,22,28,.05);
  --shadow: 0 6px 28px rgba(20,22,28,.09);
  --shadow-lg: 0 20px 60px rgba(20,22,28,.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font-body, "Inter", sans-serif); color: var(--font-dark, var(--ink)); background: var(--surface); line-height: 1.62; -webkit-font-smoothing: antialiased; }

/* optional scroll-into-view reveal — the .fx class is added by JS only when the site opts in (body[data-fx]),
   so with JS off / reduced-motion everything stays visible. .fx-in is added as each element enters the viewport. */
.fx { transition: opacity .6s ease, transform .55s cubic-bezier(.22,.61,.36,1), filter .55s ease; }
body[data-fx="fade"]  .fx:not(.fx-in) { opacity: 0; }
body[data-fx="rise"]  .fx:not(.fx-in) { opacity: 0; transform: translateY(24px); }
body[data-fx="zoom"]  .fx:not(.fx-in) { opacity: 0; transform: scale(.95); }
body[data-fx="blur"]  .fx:not(.fx-in) { opacity: 0; filter: blur(9px); }
body[data-fx="slide"] .fx:not(.fx-in) { opacity: 0; transform: translateX(-28px); }
@media (prefers-reduced-motion: reduce) { .fx { transition: none; } .fx:not(.fx-in) { opacity: 1 !important; transform: none !important; filter: none !important; } }
img, svg { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; }
.section { padding: var(--pad, 96px) 0; }
/* a blend seam: a band between two sections fading one color into the next. The band REPLACES
   the upper section's bottom padding (livejudgesite does the same with .blendfoot) - the fade is
   already generous space, and stacking padding in front of it only pushes the next section away.
   :has() keeps this self-correcting: a seam that gets dropped, because a photo background sits on
   one side of it, leaves that section's padding untouched. */
.secblend { height: var(--blendh, 300px); }
.section:has(+ .secblend) { padding-bottom: 0; }
.secblend + .section { padding-top: 0; }
/* A blend where ONE side is a background photo. A photo has no flat color to fade to, but the
   seam only needs one on one side: the fade rides the photo section and runs to transparent, so
   the picture emerges through the neighbor's color. It lives on a wrapper because the section's
   own ::before and ::after are already the picture and its color screen. z-index 2 puts the wash
   above both of those and, being earlier in tree order than .container (also 2), still under the
   text. The photo section holds the fade's height as padding so its content never sits in it. */
.seamwrap { position: relative; }
.seamwrap::before, .seamwrap::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.seamwrap::before { top: 0; height: var(--seamtop, 0); background: var(--gradtop, none); }
.seamwrap::after { bottom: 0; height: var(--seamfoot, 0); background: var(--gradfoot, none); }
.seamwrap.fadetop > .section { padding-top: var(--seamtop); }
.seamwrap.fadefoot > .section { padding-bottom: var(--seamfoot); }
/* the neighbor gives up its own air to the fade, the same trade a flow band makes */
.section:has(+ .seamwrap.fadetop) { padding-bottom: 0; }
.seamwrap.fadefoot + .section { padding-top: 0; }
.section-alt, .sec-soft { background: var(--surface-alt); }
.sec-light { background: var(--surface); }
.sec-dark { background: var(--dark); color: var(--font-light, #e6e4f5); }
/* custom-color and background-image sections (Site Layout → Customize) */
/* background image lives on ::before so the admin can drag (background-position) & zoom (transform:scale) it within the section frame; the color screen sits on ::after above it */
.section.has-bg { position: relative; overflow: hidden; }
.section.has-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--bg-img); background-size: cover; background-position: var(--bg-pos, center); background-repeat: no-repeat; transform: scale(var(--bg-zoom, 1)); transform-origin: var(--bg-pos, center); }
.section.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--screen, #0d0b1a); opacity: var(--screen-op, .55); }
.section.has-bg > .container { position: relative; z-index: 2; }
.section.sec-flat > .container { position: relative; z-index: 1; }
/* legibility scrim: keep section copy readable over any background photo, whatever the overlay opacity.
   scoped to section-level text (headers/lead/checklist) — never the white cards/boxes sitting on top. */
.section.has-bg .eyebrow, .section.has-bg .h2, .section.has-bg .lead, .section.has-bg .checklist li { text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 22px rgba(0,0,0,.5); }
.section.has-bg.sec-light .eyebrow, .section.has-bg.sec-light .h2, .section.has-bg.sec-light .lead, .section.has-bg.sec-light .checklist li { text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.85); }
.sec-dark .h2 { color: var(--font-light, #fff); }
.sec-dark .lead, .sec-dark .checklist li, .sec-dark .vf, .sec-dark p { color: color-mix(in srgb, var(--font-light, #fff) 80%, transparent); }
.sec-dark .vf strong, .sec-dark .hotel-alt h3, .sec-dark .media-subhead { color: var(--font-light, #fff); }
.sec-dark .eyebrow { color: var(--eb, var(--accent)); }
.sec-dark .tier-label { color: color-mix(in srgb, var(--font-light, #fff) 58%, transparent); }
.sec-dark .video-card h3 { color: var(--font-light, #fff); }
.sec-dark .video-card p { color: color-mix(in srgb, var(--font-light, #fff) 64%, transparent); }
.sec-dark .checklist li::before { background: rgba(255,255,255,.12); color: var(--accent); }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--eb, var(--accent)); margin-bottom: 14px; }   /* default = SECONDARY (owner 2026-08-25); --eb overrides per section */
.h2 { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: clamp(30px, 4vw, 43px); font-weight: 600; line-height: 1.12; margin-bottom: 18px; letter-spacing: -.015em; max-width: 22ch; }
.lead { font-size: 17.5px; color: var(--ink-soft); max-width: 680px; line-height: 1.6; }
.agenda-tz { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 6px 15px; }
.sec-dark .agenda-tz { color: var(--font-light, #fff); background: rgba(255,255,255,.1); }

.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; transition: all .16s ease; font-size: 15px; padding: 12px 26px; font-family: inherit; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { filter: brightness(.9); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
/* Register buttons get their own admin-set color (falls back to brand); overrides .btn-primary via source order */
.btn-reg { background: var(--reg-bg, var(--brand)); color: var(--reg-fg, #fff); border-color: var(--reg-bg, var(--brand)); }
.btn-reg:hover { filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.btn-glass { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); }
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-sm { padding: 8px 18px; font-size: 14px; }

/* Nav */
/* The page-top anchor: zero height, normal flow, document y=0. It exists so `#top` is NOT the
   sticky header below it - anchoring to a sticky element makes the browser chase a target that
   moves with the scroll. See the comment beside it in src/site.js. */
.top-anchor { display: block; height: 0; }
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line-soft); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; color: var(--ink); max-width: 52vw; }   /* no overflow:hidden — it would clip the logo's vertical nudge; .brand-name clips its own text */
.brand-logo { display: block; height: 36px; width: auto; max-width: min(52vw, 300px); object-fit: contain; flex-shrink: 0; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Every link carries the pill's padding, so the row does not shift as you move between pages;
   only the active one paints. The gap absorbs that padding to keep the old rhythm. */
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 999px; }
.nav-links a:hover { color: var(--ink); }
/* Website Pages: the page you're on, in a multi-page nav. A tint of the event's own brand, not a
   solid fill - it marks state, it does not compete with the Register button beside it. */
.nav-links a.active { color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--brand) 13%, transparent); }
.nav.sec-dark .nav-links a.active { color: var(--font-light, #fff); background: color-mix(in srgb, var(--font-light, #fff) 15%, transparent); }
/* header themes (Site Layout > Header). sec-light keeps the default glassy white. */
.nav.sec-soft { background: color-mix(in srgb, var(--surface-alt) 90%, transparent); }
.nav.sec-dark { background: color-mix(in srgb, var(--dark) 88%, transparent); border-bottom-color: rgba(255,255,255,.12); }
.nav.sec-dark .brand-name, .nav.sec-dark .nav-links a { color: color-mix(in srgb, var(--font-light, #fff) 80%, transparent); }
.nav.sec-dark .nav-links a:hover, .nav.sec-dark .brand-name { color: var(--font-light, #fff); }
.nav.sec-dark .nav-burger { color: var(--font-light, #fff); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-burger { display: none; background: none; border: none; color: var(--ink); cursor: pointer; font-size: 20px; padding: 4px; }

/* Website Pages: a secondary page (not Home) gets this instead of the hero — same header theme,
   just a title band, since the hero itself stays a Home-only, one-per-site thing (Branding). */

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; min-height: var(--hero-vh, 88vh); display: flex; align-items: var(--hero-pos, center); padding: 110px 24px 90px; }
.hero-plain { min-height: var(--hero-vh, 74vh); }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* admin-controlled photo overlay (same model as section background images: flat color + opacity) */
.hero-scrim { position: absolute; inset: 0; background: var(--hero-screen, #100e22); opacity: var(--hero-screen-op, .55); }
.hero-gradient { background: linear-gradient(150deg, var(--dark) 0%, var(--brand) 120%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .4; }
.g1 { width: 540px; height: 540px; background: var(--brand); top: -160px; left: -120px; }
.g2 { width: 460px; height: 460px; background: var(--accent); opacity: .16; bottom: -200px; right: -90px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: #fff; color: #14161c; padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 0; outline: 3px solid var(--brand); outline-offset: -3px; }
.hero-content { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; width: 100%; text-align: center; }
.hero-kicker { display: flex; align-items: center; gap: 14px; justify-content: center; font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #d7d3f5; margin-bottom: 22px; }
.kicker-rule { width: 34px; height: 1px; background: var(--accent); }
.hero-title { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: clamp(42px, 8vw, 92px); font-weight: 600; line-height: .98; letter-spacing: -.02em; }
.hero-tagline { font-size: clamp(17px, 2.3vw, 22px); color: #ece9fb; margin: 22px auto 0; max-width: 40ch; line-height: 1.45; }
.hero-facts { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; font-size: 15px; color: #cfcbe8; flex-wrap: wrap; }
.hero-fact-div { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); }
.countdown { display: flex; justify-content: center; gap: 10px; margin: 38px auto 0; max-width: 520px; }
.cd-unit { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 18px 8px 14px; backdrop-filter: blur(8px); }
.cd-num { font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cd-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #c7c3e2; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero-note { margin-top: 20px; font-size: 13.5px; color: var(--accent); font-weight: 500; }
/* Register-note color override (admin: Auto = accent, Light, Dark). Applies in hero + banner. */
.hero-note.note-light, .banner-note.note-light { color: var(--font-light, #fff); }
.hero-note.note-dark, .banner-note.note-dark { color: var(--font-dark, var(--ink)); }
/* Hero text tone = DARK ink (admin "Text color: Dark", or Auto over a light overlay). Default hero stays light-on-scrim. */
.hero.hero-ink { color: var(--font-dark, var(--ink)); }
.hero.hero-ink .hero-title, .hero.hero-ink .hero-kicker, .hero.hero-ink .hero-tagline, .hero.hero-ink .hero-facts { text-shadow: 0 1px 12px rgba(255,255,255,.4); }
.hero.hero-ink .hero-kicker { color: color-mix(in srgb, var(--font-dark, var(--ink)) 62%, transparent); }
.hero.hero-ink .hero-tagline { color: color-mix(in srgb, var(--font-dark, var(--ink)) 82%, transparent); }
.hero.hero-ink .hero-facts { color: color-mix(in srgb, var(--font-dark, var(--ink)) 72%, transparent); }
.hero.hero-ink .hero-fact-div { background: color-mix(in srgb, var(--font-dark, var(--ink)) 34%, transparent); }
.hero.hero-ink .cd-unit { background: color-mix(in srgb, var(--font-dark, var(--ink)) 6%, transparent); border-color: color-mix(in srgb, var(--font-dark, var(--ink)) 16%, transparent); }
.hero.hero-ink .cd-label { color: color-mix(in srgb, var(--font-dark, var(--ink)) 60%, transparent); }
/* An explicit tile wash, identical to livejudgesite's: dark darkens the hero, light lifts it.
   Declared AFTER .hero-ink, which matches at the same specificity, so an explicit choice wins
   on a light hero instead of being silently overridden by the auto ink wash. */
.countdown.cd-dark .cd-unit { background: rgba(0,0,0,.35); border-color: rgba(0,0,0,.28); }
.countdown.cd-light .cd-unit { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.hero.hero-ink .btn-glass { background: color-mix(in srgb, var(--font-dark, var(--ink)) 5%, transparent); color: var(--font-dark, var(--ink)); border-color: color-mix(in srgb, var(--font-dark, var(--ink)) 26%, transparent); backdrop-filter: none; }
.hero.hero-ink .btn-glass:hover { background: color-mix(in srgb, var(--font-dark, var(--ink)) 11%, transparent); border-color: color-mix(in srgb, var(--font-dark, var(--ink)) 46%, transparent); }

/* Stats */
.stats { background: var(--dark); color: #fff; padding: 40px 0; }
.stats-light { background: var(--surface-alt); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; text-align: center; }
.stat-num { display: block; font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 34px; font-weight: 600; }
.stats-light .stat-num { color: var(--brand); }
.stat-label { font-size: 12.5px; color: #a9a4cc; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; display: block; }
.stats-light .stat-label { color: var(--ink-soft); }

/* Hero banner (edge-to-edge, client-designed) */
.hero-banner { width: 100%; }
.hero-banner > img { width: 100%; height: auto; display: block; }
.hero-banner > img.banner-fixed { object-fit: cover; }
.banner-bar { background: var(--dark); color: #fff; padding: 26px 0; }
.banner-bar-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.countdown-sm { margin: 0; max-width: 460px; gap: 10px; }
.countdown-sm .cd-unit { padding: 10px 6px 8px; }
.countdown-sm .cd-num { font-size: clamp(22px, 3.5vw, 32px); }
.banner-cta { display: flex; align-items: center; justify-content: center; }
.banner-note { font-size: 14px; color: var(--accent); font-weight: 600; margin: 0; }

/* About */
.about-grid-single { max-width: 760px; }
/* top-aligned (the eyebrow + heading live ABOVE the grid in .about-head/.custom-head, so the image
   always starts level with the first paragraph); --cgut widens the text-to-image gap and --coff
   nudges the image further down from that line */
.about-grid { display: grid; grid-template-columns: var(--ctf, 1.38fr) 1fr; gap: 64px; column-gap: var(--cgut, 64px); align-items: start; }   /* --ctf set when the image is framed: Text Block Width maps to the text column share */   /* same 58/42 as the builder preview */
.about-grid.img-left { grid-template-columns: 1fr var(--ctf, 1.38fr); }   /* keep the WIDE column with the text when the image leads, same rule as custom blocks */
.about-grid.img-left .about-visual { order: -1; }
.about-visual { margin: 0 auto; }   /* max-width set inline per admin "Image size" so any aspect (incl. portrait) fits, centered */
.about-grid .about-visual { margin-top: calc(var(--coff, 0px) + 5px); }
.about-visual img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-lg); }
/* fixed-shape frame (admin set an aspect ratio): the figure holds the shape + radius/shadow, the photo covers it and can be dragged/zoomed */
.about-visual.about-framed { overflow: hidden; border-radius: 20px; box-shadow: var(--shadow-lg); }
.about-visual.about-framed img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
/* The frame (fixed aspect + overflow clip) lives on an inner box now, NOT the figure: with it on
   the figure, the figcaption sat inside the clipped aspect-ratio box and a chosen shape silently
   ate the caption. The figure keeps only the admin's max-width. */
.about-imgbox.about-framed { overflow: hidden; border-radius: 20px; box-shadow: var(--shadow-lg); }
.about-imgbox.about-framed img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.about-cap { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-faint); text-align: center; }
.sec-dark .about-cap { color: color-mix(in srgb, var(--font-light, #fff) 60%, transparent); }
@media (max-width: 920px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-grid.img-left .about-copy, .about-grid.img-left .about-visual { order: 0; } .about-grid .about-visual { margin-top: 0; } }

/* Custom content sections — default: copy left, image right; img-left flips it */
/* 58/42 text-to-image split, the same proportions the builder preview shows (it was 50/50, which
   wrapped text much harder than the preview and made long blocks run tall - owner 2026-08-27) */
/* card #367/#368: the global .h2 22ch cap made owner-authored titles wrap early (the "title
   shift") and independently of the body copy under them - a custom block or Why Attend heading
   spans its own grid column (.ch-cell), exactly the body text's column, so raising Text Block
   Width narrows (or widens) the title and the body by the same amount, in step */
.custom-section .h2, .about .h2 { max-width: none; }
/* the head row mirrors its grid (owner 2026-08-28): with the image on the LEFT the eyebrow +
   heading ride the TEXT column on the right; image-right keeps the head over the left text column.
   The image still top-aligns with the first paragraph because the head stays its own row. */
.custom-head { display: grid; grid-template-columns: var(--ctf, 1.38fr) 1fr; column-gap: var(--cgut, 60px); }
.custom-head.img-left { grid-template-columns: 1fr var(--ctf, 1.38fr); }
.custom-head.img-left .ch-cell { grid-column: 2; }
.about-head { display: grid; grid-template-columns: var(--ctf, 1.38fr) 1fr; column-gap: var(--cgut, 64px); }
.about-head.img-left { grid-template-columns: 1fr var(--ctf, 1.38fr); }
.about-head.img-left .ch-cell { grid-column: 2; }
@media (max-width: 920px) {
  .custom-head, .about-head { grid-template-columns: 1fr; }
  .custom-head.img-left .ch-cell, .about-head.img-left .ch-cell { grid-column: 1; }
}
.custom-grid { display: grid; grid-template-columns: var(--ctf, 1.38fr) 1fr; gap: 60px; column-gap: var(--cgut, 60px); align-items: start; }
.custom-grid.img-left { grid-template-columns: 1fr var(--ctf, 1.38fr); }   /* keep the WIDE column with the text when the image leads */
.custom-grid.img-left .custom-visual { order: -1; }
.custom-grid-single { max-width: 760px; }
/* Text-only panels choose their own measure (owner 2026-09-09). Medium is the 760px this has
   always been, so an existing panel is untouched. Narrow is a reading column; wide lets a callout
   or a checklist breathe without becoming the full container. */
.custom-grid-single.tw-narrow { max-width: 580px; }
.custom-grid-single.tw-wide { max-width: 1000px; }
/* card #489: .lead's own 680px reading cap (no margin:auto) has no effect on a centered box's
   WIDTH, only on where its text sits inside that box - so Medium->Wide grew the (centered)
   custom-grid-single outward same as Narrow<680 did, but the glued-left text never got any wider,
   which read as the whole panel sliding left instead of widening. The text-only panel's own
   measure IS the control the admin picked; let it fill the box instead of a second, fixed cap. */
.custom-grid-single .lead { max-width: none; }
.custom-visual { margin: 0 auto; }   /* max-width set inline per admin "Size"; the frame is the inner box so the caption can ride inside the figure (card 483) */
.custom-grid .custom-visual { margin-top: calc(var(--coff, 0px) + 5px); }   /* +5px optical: the text's first line has half-leading above its glyphs */
.custom-imgbox { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.custom-imgbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
.custom-body { line-height: 1.7; }
/* a panel's own closing button: spans the container UNDER the text+image row, never inside a column */
.panel-actions { display: flex; margin-top: 34px; }
.panel-actions-left { justify-content: flex-start; }
.panel-actions-center { justify-content: center; }
.panel-actions-right { justify-content: flex-end; }
@media (max-width: 640px) { .panel-actions { justify-content: center; } }
/* ⚠️ BELOW `.panel-actions { display: flex }`, not above it: `.pa-narrow` is (0,1,0) too, so
   source order is the whole argument and a rule written higher up would lose in silence.
   The panel emits its button twice and shows exactly one (see cActionsWide/cActionsNarrow in
   src/site.js). Wide it rides inside the text column, under the last line of copy; narrow the
   panel is one column and it goes LAST, after the photo, where it has always been. */
.pa-narrow { display: none; }
@media (max-width: 920px) {
  .pa-wide { display: none; }
  .pa-narrow { display: flex; }
}
/* card #484: a text-only panel (no image) has no grid column to sit in, so the button used to
   center/right-align against the FULL custom-grid-single width while the text next to it was
   capped narrower - a centered or right-aligned button drifted away from where the text actually
   ends. Now that .custom-grid-single .lead (card #489) fills the same box as everything else in
   it, .panel-actions needs no cap of its own to line up with the text - removing the old fixed
   680px value (a leftover of the cap that #489 removed) is what keeps them matched at every width. */
@media (max-width: 920px) { .custom-grid { grid-template-columns: 1fr; gap: 32px; } .custom-grid.img-left .custom-copy, .custom-grid.img-left .custom-visual { order: 0; } .custom-grid .custom-visual { margin-top: 0; } }
.checklist { list-style: none; margin-top: 26px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; line-height: 1.5; color: var(--ink-soft); font-size: 15.5px; }
/* card 482: a flex row lays its gap between EVERY item, and a <strong>, <em> or <a> inside the
   text is its own item, so bolding two words opened a 12px hole on each side of them. The rich
   checklist wraps its text in ONE .cl-t item; the plain highlight list has no marks to split. */
.checklist li .cl-t { flex: 1 1 auto; min-width: 0; }
/* custom blocks: per-block spacing pickers (Tight / Normal / Relaxed) */
.custom-body.gap-tight { line-height: 1.4; }
.custom-body.gap-relaxed { line-height: 1.9; }
.checklist.hl-tight li { padding-top: 4px; padding-bottom: 4px; }
.checklist.hl-relaxed li { padding-top: 15px; padding-bottom: 15px; }
/* solid brand badge; glyph color is chosen server-side (white on dark brands, near-black on light brands)
   so the tick always passes contrast, unlike the old pale-brand-on-pale-tint. */
.checklist li::before { content: "✓"; flex: 0 0 auto; margin-top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--check-fg, #fff); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* The other four bullet marks (card 479). Each keeps the 20px box the check badge occupies, so the
   text column starts in the same place whichever mark a list wears and switching one never reflows
   the paragraph around it. The mark's color is a variable rather than var(--brand) directly,
   because a dark section paints these on a dark ground - see .sec-dark below. */
/* what an exhibitor says they do, on their directory row (migration 135). The search box already
   matches them: the row's data-q carries the tags. */
.exh-row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.exh-row-tags span { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 5px; background: var(--bg, #f6f6f8); border: 1px solid var(--line, #e8e8ec); color: var(--ink-soft, #565c6b); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.sec-dark .exh-row-tags span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: color-mix(in srgb, var(--font-light, #fff) 76%, transparent); }
.checklist { --cl-mark: var(--brand); }
.sec-dark .checklist { --cl-mark: var(--accent); }
.checklist.cl-dot li::before, .checklist.cl-square li::before, .checklist.cl-dash li::before, .checklist.cl-arrow li::before {
  content: ""; background: none; border-radius: 0; color: transparent; }
.checklist.cl-dot li::before { background: var(--cl-mark); border-radius: 50%; width: 8px; height: 8px; margin: 8px 6px 0; }
.checklist.cl-square li::before { background: var(--cl-mark); border-radius: 2px; width: 8px; height: 8px; margin: 8px 6px 0; }
.checklist.cl-dash li::before { background: var(--cl-mark); border-radius: 2px; width: 13px; height: 2.5px; margin: 11px 3.5px 0; }
/* a triangle drawn from borders, so it needs no glyph and no font to be present */
.checklist.cl-arrow li::before { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--cl-mark); margin: 7px 6px 0; }
/* Timeline block (custom blocks + Why Attend): year markers on an accent rail.
   The node is a solid accent dot inside a white gap inside a thick pale-accent halo
   (owner-picked look 2026-08-27); the halo is opaque so the rail ends cleanly under it. */
.custom-tl { border-left: 2px solid var(--line); padding-left: 26px; display: flex; flex-direction: column; gap: 20px; margin: 10px 0 16px; }
.custom-tl .ctl-row { position: relative; }
.custom-tl .ctl-row::before { content: ""; position: absolute; left: -35px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 26%, #fff); }
/* run-in rows (owner 2026-08-27): the year and the first line share a row, the text wraps under */
.custom-tl .ctl-year { display: inline; font-weight: 800; color: var(--brand); font-size: 18px; letter-spacing: .03em; margin-right: 9px; }
.custom-tl .ctl-body { display: inline; line-height: 1.6; color: var(--ink-soft); }
.sec-dark .custom-tl { border-left-color: rgba(255,255,255,.2); }
.sec-dark .custom-tl .ctl-row::before { border-color: rgba(255,255,255,.92); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.25)); }
.sec-dark .custom-tl .ctl-year { color: #fff; }
.sec-dark .custom-tl .ctl-body { color: color-mix(in srgb, var(--font-light, #fff) 80%, transparent); }
.section.has-bg .custom-tl .ctl-year, .section.has-bg .custom-tl .ctl-body { text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 22px rgba(0,0,0,.5); }
.section.has-bg.sec-light .custom-tl .ctl-year, .section.has-bg.sec-light .custom-tl .ctl-body { text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.85); }
/* Quote block (custom blocks + Why Attend): an accent rail beside an italic line, attribution below */
.custom-q { border-left: 3px solid var(--brand); margin: 10px 0 16px; padding: 2px 0 2px 22px; }
.custom-q p { font-style: italic; font-size: 20px; line-height: 1.55; margin: 0; color: var(--ink); }
.custom-q cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--brand); }
.sec-dark .custom-q { border-left-color: rgba(255,255,255,.35); }
.sec-dark .custom-q p { color: var(--font-light, #fff); }
.sec-dark .custom-q cite { color: #fff; }
/* Hint box (card #361): a shaded callout with a light border, tinted from the site's brand */
.custom-hint { background: color-mix(in srgb, var(--brand) 7%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 14px; padding: 18px 22px; margin: 12px 0 18px; }
.custom-hint p { margin: 0; font-size: 16.5px; line-height: 1.6; }
.custom-hint-head { font-weight: 750; font-size: 16px; letter-spacing: .01em; margin: 0 0 6px !important; color: var(--ink); }
.sec-dark .custom-hint { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.sec-dark .custom-hint-head { color: var(--font-light, #fff); }
.section.has-bg .custom-hint { background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.6); }
.section.has-bg.sec-dark .custom-hint { background: rgba(10,10,24,.55); border-color: rgba(255,255,255,.25); }
.section.has-bg .custom-q p, .section.has-bg .custom-q cite { text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 22px rgba(0,0,0,.5); }
.section.has-bg.sec-light .custom-q p, .section.has-bg.sec-light .custom-q cite { text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.85); }

/* Session engine */
/* overflow must stay visible: the filter dropdown panels extend past short session lists */
.engine { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
/* day tabs live in their OWN box above the engine card: the day is the top-level choice.
   flex-wrap keeps every day reachable on narrow viewports (5-day events overflowed a nowrap row) */
.day-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.day-tab { flex: 1 1 150px; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; cursor: pointer; padding: 16px 20px; font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.25; transition: all .15s; }
.day-tab small { font-weight: 600; font-size: 13.5px; color: var(--ink-faint); }
.day-tab:hover { border-color: var(--ink-soft); }
.day-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.day-tab.active small { color: rgba(255,255,255,.7); }

/* toolbar: Track filter | Credits filter | Search, split by thin dividers */
.engine-toolbar { display: grid; grid-template-columns: 1fr 1fr 1.4fr; border-bottom: 1px solid var(--line-soft); }
.engine-toolbar.etb-2 { grid-template-columns: 1fr 1.6fr; }
.engine-toolbar.etb-1 { grid-template-columns: 1fr; }   /* no tracks and no credits: search only */
.etb-cell { padding: 14px 20px; display: flex; align-items: center; min-width: 0; }
.etb-cell + .etb-cell { border-left: 1px solid var(--line-soft); }
.etb-search { position: relative; }
.search-icon { position: absolute; left: 34px; font-size: 13px; opacity: .5; pointer-events: none; }
.session-search { border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 18px 10px 38px; font-family: inherit; font-size: 14px; width: 100%; outline: none; }
.session-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* dropdown filters: one button, options in a panel (colored dots, hairline dividers) */
.filter-dd { position: relative; width: 100%; }
.filter-btn { width: 100%; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color .15s; }
.filter-btn:hover, .filter-btn.open { border-color: var(--ink-soft); }
.filter-btn .filter-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chev { margin-left: auto; font-size: 11px; opacity: .55; }
.filter-btn .dot, .tf-opt .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.filter-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; max-width: 320px; max-height: 340px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px rgba(15, 18, 34, .16); z-index: 60; padding: 6px; }
.tf-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; padding: 11px 12px; font-family: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.tf-opt:last-child { border-bottom: 0; }
.tf-opt:hover { background: #f7f8fc; }
.tf-opt.active { font-weight: 700; color: var(--ink); }
.tf-opt .tf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-check { margin-left: auto; color: var(--brand); font-weight: 700; }
.engine-meta { padding: 12px 24px 0; font-size: 13px; color: var(--ink-faint); }
.session-list { padding: 14px 24px 30px; }
/* day heading shown when a search / credit filter spans multiple days */
.agenda-dayblock + .agenda-dayblock { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.agenda-dayhead { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 20px; }
.agenda-dayblock .time-group:first-of-type { margin-top: 14px; }
.time-group { margin-top: 24px; }
.time-label { font-size: 16px; font-weight: 800; letter-spacing: .02em; color: #475569; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); margin-bottom: 13px; }
.session-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(324px, 1fr)); gap: 12px; }
.session-card { text-align: left; font-family: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--sc-color, var(--ink-faint)); border-radius: 12px; padding: 15px 17px; transition: all .16s; display: flex; flex-direction: column; gap: 6px; }
.session-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.sc-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sc-track { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-text, var(--sc-color)); }
.sc-cae { font-size: 10.5px; background: var(--surface-alt); color: var(--ink-soft); font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.sc-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.sc-meta { font-size: 12.5px; color: var(--ink-soft); }
/* margin-top:auto pins speakers to the card bottom, so titles can wrap while every
   card in a row keeps its top badge and bottom speaker line visually aligned */
.sc-speakers { font-size: 12.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.sc-ava { display: inline-flex; flex: none; }
.sc-ava img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; margin-left: -6px; }
.sc-ava img:first-child { margin-left: 0; }
/* names take the remaining width beside the (fixed) avatar stack and clamp to 2 lines — never overlap the avatars */
.sc-names { min-width: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* always a visible diagonal gradient (brand-tinted corner → near-black) so keynote tiles read with depth, not a flat slab */
/* keynote = a LIGHT, premium card built on the SECONDARY (accent) color: a warm accent wash, an accent rail,
   and the KEYNOTE eyebrow as a small filled accent badge. Text stays the normal dark ink. */
.session-keynote { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, #fff) 0%, #fff 72%); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-left: 4px solid var(--accent); box-shadow: 0 4px 13px color-mix(in srgb, var(--accent) 9%, transparent); }
.session-keynote .sc-track { display: inline-flex; align-self: flex-start; background: var(--accent); color: var(--accent-fg, #fff); padding: 3px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .07em; }
.no-results { padding: 44px; text-align: center; color: var(--ink-faint); }

/* Speakers */
.speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 20px; margin-top: 40px; align-items: start; }  /* start (not stretch) → cards hug their content; no empty white below shorter cards */
.speaker-card { display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all .18s; }
.speaker-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.speaker-photo { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--surface-alt); }
.speaker-photo img { width: 100%; height: 100%; object-fit: cover; }
.speaker-photo-blank { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--dark)); }
.speaker-badge { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(20,22,28,.72); color: #fff; border-radius: 6px; padding: 4px 9px; }
.speaker-info { padding: 16px 18px 20px; }
.speaker-name { font-size: 16px; font-weight: 650; color: var(--ink); }
.speaker-role { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }  /* reserve + cap at 2 lines so every card is the same height */
.speaker-link { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--brand); opacity: 0; transition: all .18s; }
.speaker-card:hover .speaker-link { opacity: 1; }

/* Gallery panels — a grid of people in one of four card looks. The look is the section's, never
   the card's: one shape across the grid is what makes a wall of faces read as a set. */
.gal-align-left { text-align: left; }
.gal-align-center { text-align: center; }
.gal-align-right { text-align: right; }
.gal-lead { max-width: 640px; }
.gal-align-center .gal-lead { margin-left: auto; margin-right: auto; }
.gal-align-right .gal-lead { margin-left: auto; }
/* Card 524: Headline Position moved the eyebrow and the intro but never the HEADLINE. The global
   `.h2` carries `max-width: 22ch`, so text-align only moved the words INSIDE a box still pinned to
   the left edge. The box has to move too, exactly as .gal-lead's already does. */
.gal-align-center > .h2 { margin-left: auto; margin-right: auto; }
.gal-align-right > .h2 { margin-left: auto; }
.gal-grid { display: flex; flex-wrap: wrap; gap: 36px 26px; margin-top: 42px; }
.gal-align-center .gal-grid { justify-content: center; }
.gal-align-right .gal-grid { justify-content: flex-end; }
.gal-card { margin: 0; width: 194px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gal-photo { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--surface-alt); }
.gal-photo img { width: 100%; height: 100%; object-fit: cover; }
.gal-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--brand); background: var(--brand-soft); }
.gal-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 15px; }
.gal-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.gal-title { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.gal-circle .gal-photo { border-radius: 50%; box-shadow: 0 12px 26px -14px rgba(16,19,33,.5); }
.gal-square .gal-photo { border-radius: var(--gal-radius, 0px); box-shadow: 0 12px 26px -14px rgba(16,19,33,.5); }
.gal-circle-card .gal-card { width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 20px 28px; box-shadow: var(--shadow-sm); }
.gal-circle-card .gal-photo { width: 74%; border-radius: 50%; }
.gal-portrait-card .gal-card { width: 224px; align-items: stretch; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--gal-radius, 14px); overflow: hidden; box-shadow: var(--shadow-sm); }
.gal-portrait-card .gal-photo { aspect-ratio: 4/5; }
.gal-portrait-card .gal-meta { margin-top: 0; padding: 16px 18px 20px; }
.gal-circle-card .gal-card, .gal-portrait-card .gal-card { transition: transform .18s, box-shadow .18s; }
.gal-circle-card .gal-card:hover, .gal-portrait-card .gal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sec-dark .gal-name { color: var(--font-light, #fff); }
.sec-dark .gal-title { color: color-mix(in srgb, var(--font-light, #fff) 72%, transparent); }
.sec-dark .gal-circle-card .gal-card, .sec-dark .gal-portrait-card .gal-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.sec-dark .gal-mono { background: rgba(255,255,255,.1); color: var(--font-light, #fff); }
@media (max-width: 560px) { .gal-grid { gap: 26px 16px; } .gal-card, .gal-circle-card .gal-card, .gal-portrait-card .gal-card { width: calc(50% - 8px); } }

/* Sponsors */
.sponsor-tier { margin-top: 40px; }
.tier-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-faint); margin-bottom: 16px; text-align: center; }
.sponsor-wall { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* overflow:hidden because a logo the organizer has scaled up or moved (migration 128) must be
   clipped by its own tile instead of bleeding over the neighboring one */
.sponsor-logo { background: rgba(var(--spon-box-rgb, 255,255,255), var(--spon-box-op, 1)); backdrop-filter: blur(9px) saturate(1.15); -webkit-backdrop-filter: blur(9px) saturate(1.15); border: 1px solid color-mix(in srgb, #c8cddc calc(var(--spon-box-op, 1) * 100%), rgba(255,255,255,.5)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-sm); transition: all .18s; }
.sponsor-logo:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sponsor-link { cursor: pointer; }
.sponsor-link:hover { border-color: var(--brand); }
.sponsor-logo img { width: 100%; height: 100%; object-fit: contain; }
.wall-large .sponsor-logo { flex: 1 1 320px; max-width: 380px; padding: 24px 36px; height: 168px; }
.wall-medium .sponsor-logo { flex: 1 1 220px; max-width: 270px; padding: 20px 28px; height: 118px; }
.wall-small .sponsor-logo { flex: 0 1 190px; padding: 14px 22px; height: 82px; }
.wall-medium .sponsor-wordmark span { font-size: 16px; }
.wall-small .sponsor-wordmark span { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.sponsor-wordmark span { font-weight: 700; font-size: 18px; color: #3b4150; text-align: center; }
.modal-atts { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 24px; }
.modal-att { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-family: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; transition: all .15s; color: var(--ink); }
.modal-att:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.att-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }
.att-doc { background: var(--brand); }
.att-vid { background: #dc2626; font-size: 14px; }
.att-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.att-title { font-size: 14px; font-weight: 600; }
.att-sub { font-size: 12px; color: var(--ink-faint); }
.att-go { color: var(--ink-faint); flex-shrink: 0; }
.modal-att-player { border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; margin: 6px 0; }
.modal-att-player iframe { width: 100%; height: 100%; border: 0; }

/* Venue */
.venue-grid { display: grid; grid-template-columns: var(--ctf, 1.38fr) 1fr; gap: 64px; column-gap: var(--cgut, 64px); align-items: start; }   /* same split contract as about/custom */
.venue-grid.img-left { grid-template-columns: 1fr var(--ctf, 1.38fr); }
.venue-grid.img-left .venue-visual { order: -1; }
.venue-grid .venue-visual { margin-top: calc(var(--coff, 0px) + 5px); }
.venue-grid-single { grid-template-columns: 1fr; max-width: 760px; }
/* A venue fact is a BOX (owner 2026-09-09). The label is the small uppercase kicker and the value
   carries the weight, the same shape the studio's Venue Panel preview has always drawn. */
.venue-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 22px; }
.venue-addr { font-size: 14.5px; color: var(--ink-soft); margin: 14px 0 0; }
.vf { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.vf-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }
.vf-value { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.sec-dark .vf { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.sec-dark .vf-label { color: color-mix(in srgb, var(--font-light, #fff) 62%, transparent); }
.sec-dark .vf-value { color: var(--font-light, #fff); }
.section.has-bg .vf { background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.6); }
.section.has-bg .vf-label { color: var(--ink-faint); }
.section.has-bg .vf-value { color: var(--ink); }
.section.has-bg.sec-dark .vf { background: rgba(10,10,24,.55); border-color: rgba(255,255,255,.25); }
.section.has-bg.sec-dark .vf-label { color: color-mix(in srgb, var(--font-light, #fff) 62%, transparent); }
.section.has-bg.sec-dark .vf-value { color: var(--font-light, #fff); }
.vf-map { color: inherit; text-decoration: none; }
.vf-map:hover { text-decoration: underline; }
.vf-map-cta { color: var(--brand); font-weight: 600; white-space: nowrap; text-decoration: none; margin-left: 2px; }
.vf-map:hover .vf-map-cta { text-decoration: underline; }
.sec-dark .vf-map-cta { color: var(--accent); }
.venue-visual { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); margin-inline: auto; }   /* auto margin keeps a scaled-down image centered in its column (matches .about-visual) */
.venue-visual img { width: 100%; height: auto; display: block; }   /* unframed = whole image at natural proportions (matches the admin "Original" preview) */
.venue-visual.venue-framed img { height: 100%; object-fit: cover; }   /* framed = fill the chosen aspect ratio */
.venue-visual figcaption { text-align: center; font-size: 12.5px; color: var(--ink-faint); padding: 14px; background: #fff; }

/* Hotel */
.hotel-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.hotel-grid-single { grid-template-columns: 1fr; max-width: 640px; }
.hotel-card { background: rgba(var(--hotel-box-rgb, 255,255,255), var(--hotel-box-op, 1)); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border: 1px solid color-mix(in srgb, #c8cddc calc(var(--hotel-box-op, 1) * 100%), rgba(255,255,255,.5)); border-radius: 20px; padding: 38px; box-shadow: var(--shadow); }
.hotel-badge { display: inline-block; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border-radius: 999px; padding: 5px 14px; margin-bottom: 16px; }
.hotel-name { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 25px; line-height: 1.2; margin-bottom: 10px; font-weight: 600; }
.hotel-sub { color: var(--ink-soft); font-size: 15px; }
.hotel-rate { display: flex; align-items: baseline; gap: 12px; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.rate-num { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 46px; font-weight: 600; }
.rate-detail { font-size: 13px; color: var(--ink-faint); line-height: 1.4; }
.hotel-perks { list-style: none; margin-bottom: 20px; }
.hotel-perks li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; color: var(--ink-soft); }
.hotel-perks li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hotel-cutoff { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 22px; }
.hotel-alt h3 { font-size: 17px; margin-bottom: 16px; font-weight: 650; }
.hotel-alt-item { background: rgba(var(--hotel-box-rgb, 255,255,255), var(--hotel-box-op, 1)); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border: 1px solid color-mix(in srgb, #c8cddc calc(var(--hotel-box-op, 1) * 100%), rgba(255,255,255,.5)); border-radius: 12px; padding: 15px 18px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hotel-alt-item strong { font-size: 14.5px; font-weight: 600; display: block; }
.hotel-alt-item small { font-size: 12.5px; color: var(--ink-faint); }
.alt-rate { color: var(--brand); font-weight: 650; font-size: 14px; white-space: nowrap; }
.hotel-warning { margin-top: 20px; font-size: 13px; color: var(--ink); background: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px 16px; line-height: 1.55; }
/* keep the warning crisp: black text on light gray, even inside a dark-themed section */
.sec-dark .hotel-warning, .hotelbox-glass .hotel-warning { color: var(--ink); }
/* panel text follows the panel, not the section: dark on light/opaque panels; light only when the panel is glassy over a dark section */
.hotelbox-solid .hotel-name, .hotelbox-solid .rate-num, .hotelbox-solid .hotel-alt-item strong, .hotelbox-solid .hotel-cutoff strong { color: var(--ink); }
.hotelbox-solid .hotel-sub, .hotelbox-solid .hotel-perks li, .hotelbox-solid .hotel-cutoff { color: var(--ink-soft); }
.hotelbox-solid .rate-detail, .hotelbox-solid .hotel-alt-item small, .hotelbox-solid .alt-rate { color: var(--ink-faint); }
.hotelbox-glass .hotel-name, .hotelbox-glass .rate-num, .hotelbox-glass .hotel-alt-item strong, .hotelbox-glass .hotel-cutoff strong { color: #fff; }
.hotelbox-glass .hotel-sub, .hotelbox-glass .hotel-perks li, .hotelbox-glass .hotel-cutoff, .hotelbox-glass .rate-detail, .hotelbox-glass .hotel-alt-item small, .hotelbox-glass .alt-rate { color: #dcd9ef; }

/* Resources & videos */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 40px; }
.resource-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; color: var(--ink); transition: all .16s; position: relative; }
.resource-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.rc-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); font-size: 18px; }
.resource-card h3 { font-size: 15.5px; margin-bottom: 4px; font-weight: 650; }
.resource-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; padding-right: 30px; }
.rc-type { position: absolute; top: 20px; right: 20px; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 40px; }
.video-thumb { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; cursor: pointer; box-shadow: var(--shadow-sm); background: #14161c; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb iframe { width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 18px; padding-left: 4px; z-index: 2; transition: transform .18s; }
.video-thumb:hover .video-play { transform: scale(1.08); }
.video-thumb.playing .video-play { display: none; }
.video-card h3 { font-size: 15px; font-weight: 600; margin-top: 14px; }
.video-card p { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

/* FAQ */
.faq-list { margin-top: 30px; }
/* ===== Schedule Overview (card 517) - the simplified schedule an organizer publishes before
   sessions exist. A day header, then one card of striped rows: time, category pill, label.
   Like the FAQ bars and the pricing cards, it inherits the SECTION's theme rather than sitting as
   a white card on a dark band. ===== */
.sch-lead { max-width: 70ch; }
/* The timezone legend rides the FIRST day's header row, pushed right (owner 2026-09-16). It is a
   note, not a heading, so it resets the weight and size the .sch-dayhead around it carries.
   `margin-left:auto` rather than justify-content, so the weekday and its date pill stay together
   on the left however long the zone's name turns out to be. */
.sch-zone { margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-faint); text-align: right; }
.sec-dark .sch-zone { color: color-mix(in srgb, var(--font-light, #fff) 62%, transparent); }
/* narrow: it drops under the weekday rather than squeezing the date pill, and stays right-aligned */
@media (max-width: 560px) { .sch-dayhead { flex-wrap: wrap; } .sch-zone { flex: 1 0 100%; margin-left: 0; margin-top: 4px; } }
.sch-days { margin-top: 34px; display: grid; gap: 30px; }
.sch-dayhead { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; }
.sec-dark .sch-dayhead { color: var(--font-light, #fff); }
.sch-daypill { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; background: var(--accent); color: var(--font-dark, #14161c); }
.sch-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.sec-dark .sch-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
/* the stripe IS the row boundary at every width, which is what lets the row reflow on a phone
   without needing a rule between rows */
.sch-row { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, max-content) 1fr auto; align-items: center; gap: 8px 18px;
  width: 100%; text-align: left; padding: 14px 20px; font: inherit; background: none; border: 0; color: inherit; }
/* ⚠️ Each row being its OWN grid means each row sizes its own columns, so the labels start at a
   different x on every line - which is exactly what it looked like the first time. The card owns
   the tracks and the rows borrow them, so one wide category pill widens that column for the whole
   day instead of shunting one label. Behind @supports because a browser without subgrid would read
   `subgrid` as invalid and collapse every row to one column; without it the rows keep their own
   (misaligned, but readable) tracks. */
@supports (grid-template-columns: subgrid) {
  .sch-card { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, max-content) 1fr auto; }
  .sch-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.sch-row:nth-child(odd) { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.sec-dark .sch-row:nth-child(odd) { background: rgba(255,255,255,.05); }
.sch-when { font-size: 14px; font-weight: 650; color: var(--brand); white-space: nowrap; }
.sec-dark .sch-when { color: var(--accent); }
/* the pill is its word's hue at 13% over whatever is behind it, a hairline ring of the same hue and
   the hue deepened for the text (card 546: "more of a transparent color rather than a solid color";
   the agenda tile's own recipe). 62% hue in the text keeps every one of the eight hues above 4.9:1. */
.sch-cat { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; --sc-c: #7c8598;
  background: color-mix(in srgb, var(--sc-c) 13%, transparent); color: color-mix(in srgb, var(--sc-c) 62%, #14161c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-c) 24%, transparent); }
.sec-dark .sch-cat { background: color-mix(in srgb, var(--sc-c) 26%, transparent); color: color-mix(in srgb, var(--sc-c) 40%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-c) 45%, transparent); }
/* a block with no category keeps the column so every row's label still starts on the same line */
.sch-cat-none { background: none; padding: 0; }
.sch-what { font-size: 15.5px; color: var(--ink); }
.sec-dark .sch-what { color: var(--font-light, #fff); }
/* CLICKABILITY IS DERIVED: only a row that HAS a description is a button, and the chevron and the
   hover live on that button alone. A panel where nothing has a description renders completely
   inert, with no affordance promising a detail that is not there. */
.sch-row-open { cursor: pointer; }
.sch-row-open:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.sec-dark .sch-row-open:hover { background: rgba(255,255,255,.12); }
.sch-more { color: var(--ink-faint); font-size: 20px; line-height: 1; }
.sec-dark .sch-more { color: color-mix(in srgb, var(--font-light, #fff) 55%, transparent); }
@media (max-width: 640px) {
  /* time + pill share the first line, the label takes its own; the chevron rides the first line.
     The card gives its tracks back here - a stacked row cannot borrow a four-column subgrid. */
  .sch-card { display: block; }
  .sch-row { grid-column: auto; grid-template-columns: auto max-content 1fr; row-gap: 6px; padding: 13px 16px; }
  .sch-what { grid-column: 1 / -1; }
}
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 600; font-size: 15.5px; list-style: none; position: relative; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 14px; font-size: 20px; color: var(--brand); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; color: var(--ink-soft); font-size: 14.5px; }
/* a rich answer (card 545): the answer box carries the padding once, its blocks stack inside it */
.faq-item .faq-a { padding: 0 22px 20px; color: var(--ink-soft); font-size: 14.5px; }
.faq-item .faq-a p { padding: 0; margin: 0 0 10px; }
.faq-item .faq-a > :last-child { margin-bottom: 0; }
.faq-item .faq-a .custom-h { font-size: 15px; margin: 14px 0 6px; color: var(--ink); }
.faq-item .faq-a .custom-list { margin: 0 0 10px; padding-left: 22px; }
.faq-item .faq-a .checklist { margin: 0 0 10px; }
.faq-item .faq-a a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.sec-dark .faq-item .faq-a { color: color-mix(in srgb, var(--font-light, #fff) 78%, transparent); }
.sec-dark .faq-item .faq-a a { color: inherit; }
/* on dark sections the bars go frosted-dark so the text keeps contrast */
/* opt-in "ask us" panel under the FAQ list */
.faq-ask { margin-top: 26px; padding: 30px 26px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.faq-ask-h { margin: 0 0 18px; font-size: 17px; font-weight: 650; color: var(--ink); }
.sec-dark .faq-ask { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.sec-dark .faq-ask-h { color: var(--font-light, #fff); }
/* the Ask a Question button must contrast on a dark FAQ band: a dark brand color would vanish, so
   the fill flips to light then (server-computed --askbtn vars); a bright brand keeps its pop */
.sec-dark .faq-ask .btn-primary { background: var(--askbtn-bg, var(--font-light, #fff)); color: var(--askbtn-fg, var(--font-dark, #14161c)); border-color: transparent; }
.sec-dark .faq-ask .btn-primary:hover { filter: brightness(.94); }
.sec-dark .faq-item { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.sec-dark .faq-item summary { color: var(--font-light, #fff); }
.sec-dark .faq-item p { color: color-mix(in srgb, var(--font-light, #fff) 78%, transparent); }
.sec-dark .faq-item summary::after { color: var(--accent); }

/* Final CTA / footer */
.final-cta { text-align: center; padding: 96px 24px; }
/* the CTA's default "Dark" theme is the signature brand gradient */
.final-cta.sec-dark { background: linear-gradient(150deg, var(--dark), var(--brand)); }
.final-cta .h2 { max-width: none; margin: 0 auto 12px; }
.final-cta .lead { max-width: 640px; margin: 0 auto 30px; }
.final-cta .lead a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
/* --ftr-text flips with the footer's theme (light font on dark footers, dark font on light) */
.footer { --ftr-text: var(--font-light, #fff); background: #101024; color: color-mix(in srgb, var(--ftr-text) 62%, transparent); font-size: 14px; }
.footer.sec-light { background: var(--surface); --ftr-text: var(--font-dark, var(--ink)); }
.footer.sec-soft { background: var(--surface-alt); --ftr-text: var(--font-dark, var(--ink)); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 40px 56px; max-width: 1140px; margin: 0 auto; padding: 60px 24px 44px; }
.footer-brand-col { flex: 2 1 280px; }
.footer-col { flex: 1 1 150px; }
.footer-logo { display: block; height: 46px; width: auto; max-width: 230px; object-fit: contain; margin-bottom: 16px; }
.footer-brandname { color: var(--ftr-text); font-weight: 700; font-size: 19px; margin-bottom: 14px; }
.footer-blurb { color: color-mix(in srgb, var(--ftr-text) 62%, transparent); line-height: 1.7; font-size: 13.5px; max-width: 42ch; }
.footer-col h4 { color: var(--ftr-text); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; font-weight: 700; }
.footer-col > a { display: block; color: color-mix(in srgb, var(--ftr-text) 62%, transparent); padding: 4px 0; transition: color .15s; }
.footer-col > a:hover { color: var(--ftr-text); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social-link { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--ftr-text) 62%, transparent); background: color-mix(in srgb, var(--ftr-text) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ftr-text) 13%, transparent); transition: color .16s, background .16s, border-color .16s, transform .16s; }
.footer-social-link svg { width: 17px; height: 17px; display: block; }
.footer-social-link:hover { color: #fff; background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.footer-contact { color: color-mix(in srgb, var(--ftr-text) 62%, transparent); line-height: 1.8; font-size: 13.5px; margin-bottom: 8px; }
.footer-contact a { color: color-mix(in srgb, var(--ftr-text) 88%, transparent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ftr-text) 45%, transparent); }
.footer-contact a:hover { color: var(--ftr-text); text-decoration-color: currentColor; }
.footer-bar { border-top: 1px solid color-mix(in srgb, var(--ftr-text) 14%, transparent); padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 1140px; margin: 0 auto; font-size: 13px; }
.powered a { color: #4f46e5; }   /* always the WeDoYourEvents company purple, never the client's palette */
.sec-dark .powered a { color: #a5b4fc; }   /* the same purple, lifted so it stays readable on a dark footer */

/* Modals */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16,14,34,.6); backdrop-filter: blur(5px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop[hidden] { display: none; }
.modal { background: #fff; border-radius: 20px; max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); position: relative; animation: modalIn .24s cubic-bezier(.2,.7,.3,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; } }
.modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--ink-soft); cursor: pointer; z-index: 3; font-size: 14px; }
.modal-head { padding: 32px 34px 22px; color: #fff; }
/* A schedule block's detail has no track to take a color from, so its head carries the brand
   gradient rather than inheriting `.modal-head`'s white text over no background at all. */
.modal-head-plain { background: linear-gradient(120deg, var(--dark, #1a1735), var(--brand)); }
.modal-track-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; background: rgba(255,255,255,.18); border-radius: 999px; padding: 5px 13px; margin-bottom: 14px; }
.modal-title { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 25px; line-height: 1.2; font-weight: 600; }
.modal-when { margin-top: 12px; font-size: 13.5px; opacity: .92; }
.modal-body { padding: 26px 34px 32px; }
.modal-desc { font-size: 15px; color: var(--ink-soft); margin-bottom: 24px; line-height: 1.6; white-space: pre-line; }
.modal-section-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 12px; }
.modal-speaker { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font-family: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; transition: all .15s; }
.modal-speaker:hover { box-shadow: var(--shadow-sm); }
.modal-speaker-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msa-blank { background: linear-gradient(135deg, var(--brand), var(--dark)); display: inline-block; }
.modal-speaker-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.modal-speaker-name { font-weight: 650; font-size: 15px; color: var(--ink); }
.modal-speaker-role { font-size: 12.5px; color: var(--ink-faint); }
.modal-speaker-go { color: var(--ink-faint); }
.modal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.modal-tag { font-size: 12px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; color: var(--ink-soft); }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.modal-reg { text-align: center; padding: 44px 40px; max-width: 460px; }
.modal-reg h3 { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 22px; margin-bottom: 12px; }
.modal-reg p { color: var(--ink-soft); font-size: 15px; }
/* registration chooser (several labeled links) */
.regchoose-sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 20px; }
.regchoose-list { display: flex; flex-direction: column; gap: 10px; }
.regchoose-link { width: 100%; justify-content: center; font-size: 16px; padding: 13px 18px; }
.speaker-modal-head { display: flex; gap: 20px; align-items: center; padding: 32px 34px 24px; border-bottom: 1px solid var(--line-soft); }
.speaker-modal-photo { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.speaker-modal-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #a06514; background: #fdf3e0; border-radius: 6px; padding: 4px 9px; margin-bottom: 8px; }
.speaker-modal-head .modal-title { color: var(--ink); }
.speaker-modal-role { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
.speaker-sessions { display: flex; flex-direction: column; gap: 8px; }
.spk-session { display: flex; align-items: center; gap: 12px; justify-content: space-between; text-align: left; font-family: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--sc-color, var(--brand)); border-radius: 11px; padding: 13px 16px; transition: all .15s; }
.spk-session:hover { box-shadow: var(--shadow-sm); }
.spk-session-main { display: flex; flex-direction: column; gap: 3px; }
.spk-session-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.spk-session-when { font-size: 12.5px; color: var(--ink-soft); }
.spk-session-go { color: var(--ink-faint); }

/* Responsive */
@media (max-width: 920px) {
  .venue-grid, .hotel-grid { grid-template-columns: 1fr; gap: 44px; }
  .venue-grid.img-left { grid-template-columns: 1fr; }
  .venue-grid.img-left .venue-copy, .venue-grid.img-left .venue-visual { order: 0; }
  .venue-grid .venue-visual { margin-top: 0; }
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 16px 24px; gap: 12px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-burger { display: flex; }
}
@media (max-width: 560px) {
  .section { padding: calc(var(--pad, 96px) * .67) 0; }
  .secblend { height: calc(var(--blendh, 300px) * .67); }
  .seamwrap::before { height: calc(var(--seamtop, 0px) * .67); }
  .seamwrap::after { height: calc(var(--seamfoot, 0px) * .67); }
  .seamwrap.fadetop > .section { padding-top: calc(var(--seamtop) * .67); }
  .seamwrap.fadefoot > .section { padding-bottom: calc(var(--seamfoot) * .67); }
  .hero { min-height: auto; padding: 84px 20px 64px; }
  .session-cards { grid-template-columns: 1fr; }
  .day-tabs { flex-direction: column; gap: 8px; }
  .day-tab { font-size: 17px; padding: 13px 18px; }
  .engine-toolbar, .engine-toolbar.etb-2, .engine-toolbar.etb-1 { grid-template-columns: 1fr; }
  .etb-cell + .etb-cell { border-left: 0; border-top: 1px solid var(--line-soft); }
  .countdown { gap: 6px; }
  .stats-grid { gap: 28px; }
}

/* Floating "Open the App" QR card. Sits bottom-right on desktop; on a phone the QR is useless
   (you cannot scan your own screen), so it collapses to a tap target instead of a code. */
.appqr {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 186px; padding: 14px 14px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); text-align: center;
  opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease;
}
.appqr.in { opacity: 1; transform: none; }
.appqr[hidden] { display: none; }   /* the display rule above would otherwise beat the attribute */
.appqr-x {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; line-height: 1;
  border: 0; background: transparent; color: var(--ink-faint); font-size: 13px; cursor: pointer; border-radius: 7px;
}
.appqr-x:hover { background: var(--line-soft); color: var(--ink); }
.appqr-t { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; margin-bottom: 9px; }
.appqr-c { width: 156px; height: 156px; display: block; margin: 0 auto; border-radius: 8px; }
/* No desktop path INTO the app: the event app is a phone experience and opening it in a desktop
   browser is a bad first impression, so the card offers a code to scan and nothing to click.
   On a phone the code is useless (you cannot scan your own screen), so there the card becomes the
   tap target instead. Owner rule 2026-08-12, same reason the landing demo link came out. */
.appqr-a { display: none; margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--brand); text-decoration: none; }
.appqr-a:hover { text-decoration: underline; }
/* On a phone this is a full-width bar pinned to the bottom, not a floating card. The card shape
   was inherited from the desktop QR and read as an ad someone had failed to close: small, corner,
   and its only words were "Open on this device", which says nothing about what is on the other
   side of the tap. A bar spanning the screen is unmistakably part of the site, and the copy now
   names the thing and answers the objection ("no download") in the same breath. */
@media (max-width: 720px) {
  .appqr {
    left: 0; right: 0; bottom: 0; width: auto; padding: 0;
    background: var(--ink); border: 0; border-radius: 0; text-align: left;
    box-shadow: 0 -6px 22px rgba(20,22,28,.22);
    display: flex; align-items: stretch;
    /* the home indicator sits over the last ~20px of a modern iPhone */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
  }
  .appqr.in { transform: none; }
  .appqr-c, .appqr-t { display: none; }
  .appqr-a {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    flex: 1; min-width: 0; margin: 0; padding: 15px 10px;
    color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; text-decoration: none;
  }
  .appqr-a:hover, .appqr-a:active { text-decoration: none; color: #fff; }
  .appqr-x {
    position: static; float: none; margin: 0; flex: none; width: 46px; height: auto;
    border-radius: 0; color: rgba(255,255,255,.62); font-size: 15px;
  }
  .appqr-x:hover { background: rgba(255,255,255,.10); color: #fff; }
  /* the bar is fixed, so the last of the page would otherwise sit under it forever */
  body.has-appbar { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

/* custom-block rich text: the four block types (paragraph, heading, bullet + numbered list) */
.custom-rich p { margin: 0 0 14px; }
.custom-rich p:last-child, .custom-rich .custom-list:last-child { margin-bottom: 0; }
/* A heading has to SET its color and its leading. The rich-text wrapper is `.lead custom-rich`,
   and `.lead` carries `color: var(--ink-soft)` and `line-height: 1.6` - so a heading that declares
   neither inherits both and renders as large MUTED body text at body leading. The studio's preview
   (`.pv-h`) always set `color: var(--ink)`, which is why the heading looked right there and wrong
   on the site (owner report 2026-09-09: "the Headers we input look right in the preview but are
   not being honored on the live site. Getting stepped on by another css command"). The explicit
   line-height also stops the Text spacing control, which is meant for body copy, from restretching
   the headings with it. Measured before and after, on the rendered page. */
.custom-h { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); margin: 20px 0 8px; }
.custom-rich .custom-h:first-child { margin-top: 0; }
.sec-dark .custom-h { color: var(--font-light, #fff); }
.custom-list { margin: 0 0 14px; padding-left: 24px; }
.custom-list li { margin: 5px 0; }
.custom-rich a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sec-dark .custom-rich a { color: var(--accent); }
.custom-rich.gap-tight p, .custom-rich.gap-tight .custom-list li { line-height: 1.4; }
.custom-rich.gap-tight p { margin-bottom: 8px; }
.custom-rich.gap-relaxed p, .custom-rich.gap-relaxed .custom-list li { line-height: 1.9; }
.custom-rich.gap-relaxed p { margin-bottom: 20px; }

/* checklist blocks inside rich custom-block bodies: the green checks join the text flow and
   follow the block's one Text-spacing picker (the old separate hl_gap control is retired) */
.custom-rich .checklist { margin: 4px 0 14px; }
.custom-rich .checklist:last-child { margin-bottom: 0; }
.custom-rich.gap-tight .checklist li { padding-top: 4px; padding-bottom: 4px; }
.custom-rich.gap-relaxed .checklist li { padding-top: 15px; padding-bottom: 15px; }

/* ---- Exhibit hall (2026-08-26) ---- */
.exh-avail { color: var(--muted, #64748b); font-size: 15px; margin: -14px 0 18px; }
/* several floor maps on one page (migration 113): each block gets its map's name over it */
.exh-maptitle { font-size: 21px; font-weight: 800; margin: 34px 0 14px; }
.exh-block + .exh-maptitle { margin-top: 44px; }
.exh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.exh-tab { font: 600 13.5px/1 inherit; font-family: inherit; color: #475467; background: #fff; border: 1.5px solid #e2e5ee; border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.exh-tab.exh-on { background: var(--brand-wash, #eef0ff); border-color: var(--brand, #4f46e5); color: var(--brand-ink, var(--brand, #3730a3)); }
.sec-dark .exh-tab { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #e6e8f2; }
.sec-dark .exh-tab.exh-on { background: rgba(255,255,255,.92); color: #14161c; border-color: transparent; }
.exh-map { background: #fff; border: 1px solid #e6e8f0; border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(20,22,28,.04), 0 8px 26px rgba(20,22,28,.05); }
.sec-dark .exh-map { background: rgba(255,255,255,.96); border-color: transparent; }
.exh-map svg { width: 100%; height: auto; max-height: 72vh; display: block; }
.exh-floor { fill: #fbfbfd; stroke: #d6dae6; stroke-width: 1.6; }
.exb { cursor: pointer; }
.exb text { font-family: inherit; pointer-events: none; }
.exb-off { cursor: default; }
/* A SHAPE IS SCENERY (owner 2026-09-18): a stage, an aisle, a lounge. It is not for sale and has no
   detail behind it, so it takes no cursor and answers no click. `pointer-events: none` on the whole
   group is the honest version of that - it cannot even be hovered, and a click on it lands on the
   floor underneath rather than being swallowed. */
.exb-area { pointer-events: none; }
.exb-area text { font-family: inherit; }
.exb-sel rect, .exb-sel polygon { stroke-width: 2.6 !important; filter: drop-shadow(0 1px 3px rgba(20,22,28,.35)); }
.exb:focus { outline: none; }
.exb:focus-visible rect, .exb:focus-visible polygon { stroke-width: 2.6 !important; }
.exh-card { margin-top: 14px; background: #fff; border: 1px solid #e6e8f0; border-left: 4px solid var(--brand, #4f46e5); border-radius: 12px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(20,22,28,.05); }
.exh-card-name { font-weight: 800; font-size: 17px; color: #14161c; }
.exh-card-meta { color: #565c6b; font-size: 13.5px; margin-top: 2px; }
.exh-card-link { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 14px; }
/* ⚠️ THE COMPANION RULE, and its absence is the whole bug (owner 2026-09-18: "we should not have a
   View Website link until there is actually a link"). public/site.js already does
   `a.hidden = true` when an exhibitor has no url - but `display: inline-block` above DEFEATS the
   hidden attribute, so the link rendered anyway, pointing at whatever the last pick set. Any rule
   that gives an element a display must carry this beside it; it is the third time today. */
.exh-card-link[hidden] { display: none; }
.exh-dir { margin-top: 30px; }
.exh-dir-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.exh-dir-title { font-size: 20px; font-weight: 800; margin: 0; }
.sec-dark .exh-dir-title { color: #fff; }
.exh-search { height: 40px; border: 1.5px solid #dde1ec; border-radius: 10px; padding: 0 14px; font-size: 14px; font-family: inherit; min-width: 230px; background: #fff; color: #14161c; }
.exh-rows { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #e6e8f0; border-radius: 12px; overflow: hidden; }
.exh-row { display: flex; align-items: baseline; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #eef0f6; flex-wrap: wrap; }
.exh-row:last-child { border-bottom: 0; }
.exh-row-name { font-weight: 700; color: #14161c; }
.exh-row-meta { color: #667085; font-size: 13px; }
.exh-row-link { margin-left: auto; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.exh-none { color: #667085; font-style: italic; margin-top: 10px; }
@media (max-width: 640px) { .exh-search { flex: 1 1 100%; } .exh-row-link { margin-left: 0; } }
.exh-row-logo { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; flex: none; align-self: center; }
.exh-row-blurb { display: block; font-weight: 500; color: #667085; font-size: 12px; margin-top: 1px; }
.custom-cap { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-faint); text-align: center; }
.sec-dark .custom-cap { color: color-mix(in srgb, var(--font-light, #fff) 60%, transparent); }

/* ---- Registration Pricing panel (site.js S.pricing) -----------------------------------------
   Two looks over one set of facts: a narrow LIST (name and description left, price right) and a
   PANEL grid. The price is the loudest thing in either, because it is the one fact a visitor came
   to this section for. Both inherit the section's theme the way the FAQ bars do: white on a light
   band, frosted on a dark one, so a restyled section never leaves a white card floating. */
.pricing-list { margin-top: 30px; display: grid; gap: 10px; }
.pricing-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; }
.pr-main { min-width: 0; }
.pr-name { display: block; font-weight: 650; font-size: 16px; color: var(--ink); }
.pr-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.pr-price { flex: none; text-align: right; }
.pr-amount { display: block; font-weight: 750; font-size: 22px; letter-spacing: -.01em; color: var(--brand); white-space: nowrap; }
.pr-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.pricing-cards { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pricing-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.sec-dark .pc-list li { color: color-mix(in srgb, var(--font-light, #fff) 72%, transparent); }
.sec-dark .pc-list li::before { color: var(--accent); }
.pc-name { font-weight: 650; font-size: 15.5px; color: var(--ink); }
.pc-amount { margin-top: 10px; font-weight: 750; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; color: var(--brand); }
.pc-tier { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.pc-desc { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.pc-per { font-size: 14px; font-weight: 500; color: var(--ink-soft); margin-left: 3px; letter-spacing: 0; }
/* what the price includes: derived from the form, so it can never go stale against what is sold */
.pc-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.pc-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.pc-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--tertiary, #0d9488); }
.pc-list .pc-more { padding-left: 24px; font-style: italic; color: var(--ink-faint); }
.pc-list .pc-more::before { content: ""; }
/* margin-top:auto pins the button to the card's foot so a row of cards ends level. The minimum
   gap above it goes on the PRECEDING element, not on the button: a `.pc-list + .pc-btn` rule is
   (0,3,0) and silently beat the (0,1,0) auto, which left the shorter card's button floating 203px
   above its foot. Measured, not assumed. */
.pc-btn { margin-top: auto; width: 100%; text-align: center; }
.pricing-card > :has(+ .pc-btn) { margin-bottom: 20px; }
.pc-meta { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }
.sec-dark .pricing-row, .sec-dark .pricing-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.sec-dark .pr-name, .sec-dark .pc-name { color: var(--font-light, #fff); }
.sec-dark .pr-desc, .sec-dark .pr-meta, .sec-dark .pc-desc, .sec-dark .pc-meta, .sec-dark .pc-tier { color: color-mix(in srgb, var(--font-light, #fff) 72%, transparent); }
/* the brand color can be too dark to read on a dark band; the light font is always safe there */
.sec-dark .pr-amount, .sec-dark .pc-amount { color: var(--font-light, #fff); }
@media (max-width: 620px) {
  .pricing-row { flex-direction: column; gap: 12px; }
  .pr-price { text-align: left; }
}

/* Moderators: the people who run a room and present nowhere sit under the speakers grid in a
   grid of their own (sessions.moderator_ids, v2.250.0). Same card, a sub-heading between. */
.speaker-subhead { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 44px 0 0; }
.speaker-grid-mods { margin-top: 22px; }
.spk-session-tag { display: inline-block; vertical-align: 2px; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }