/* 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 colour 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 colour 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 neighbour's colour. It lives on a wrapper because the section's
   own ::before and ::after are already the picture and its colour 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 neighbour 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 */
.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; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
/* 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; }

/* 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 colour + 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; }
.custom-visual { margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }   /* max-width set inline per admin "Size" */
.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-visual img { width: 100%; height: 100%; object-fit: cover; }
.custom-body { line-height: 1.7; }
@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; }
/* 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 colour 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; }
/* 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) colour: 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; }

/* 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; }
.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; 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; }
.venue-facts { margin-top: 30px; display: grid; gap: 20px; }
.vf { display: flex; gap: 15px; font-size: 14.5px; color: var(--ink-soft); }
.vf strong { color: var(--ink); font-weight: 600; }
.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 grey, 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; }
.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; }
/* 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: var(--brand-soft); border: 1px solid var(--line); border-radius: 14px; }
.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; }
.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; }
.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; }
.custom-h { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 22px; font-weight: 600; letter-spacing: -.01em; 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; }
.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; }
.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; }
.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); }