/* ============================================================
   Direct Lithium Extraction — Online Series
   CPG (College of Petroleum Engineering & Geosciences), KFUPM
   ============================================================ */

/* ---- Level 1: raw KFUPM / CPG palette tokens (never used directly in components) ---- */
:root {
  --color-turquoise:   #115F66;
  --color-green:       #009767;
  --color-beige:       #ECE0C7;
  --color-sand:        #AA8C6D;
  --color-yellow:      #F0BA45;
  --color-blue:        #71B8D4;
  --color-gray:        #ADACAD;
  --color-white:       #FFFFFF;
  --color-black:       #222222;
  --color-crimson:     #A31F34;
  --color-dark-red:    #7E1416;
  --color-extra-blue:  #7577B8;
  --color-extra-green: #B9DB9F;
  --color-extra-rose:  #F06861;
  /* DLE-specific flyer palette (from "DLE Color pallet.png", Palette 4 / Palette 3) */
  --color-warm-grey:   #E5E1DA; /* alt-bg — replaces the retired metallic-lithium gray */
  --color-gold:        #E8B93B; /* KFUPM Gold — secondary/accent color */
  --color-teal:        #1F6F6B; /* Teal — other highlights; distinct from --color-turquoise above */

  --font-sans: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  --radius: 14px;
  --shadow-1: 0 2px 10px rgba(20, 10, 8, 0.08);
  --shadow-2: 0 12px 32px rgba(20, 10, 8, 0.16);

  /* ---- Level 2: semantic roles — CPG-led (dark-red primary) ----
     DLE is a CPG-branded sub-series; KFUPM turquoise is intentionally kept
     out of the primary role here per CPG's own two-layer brand system
     (institutional teal → college red).
     NOTE: CPG Red (#A31F34 / rgb(163,31,52)) was tested as the primary but
     flagged as disfavored for this page — CPG Dark Red (#7E1416 / rgb(126,20,22))
     is used exclusively instead. Gradient stops below are pure light/dark
     mixes of that one color (via color-mix), not a second named brand color,
     so #A31F34 never appears anywhere on this page. A teal-led alternate was
     trialed via a theme toggle and retired once dark-red was settled on. */
  --primary:       var(--color-dark-red);
  --primary-dark:  var(--color-dark-red);
  --primary-tint:  var(--color-dark-red);
  /* Deeper-still shade — hover/press feedback only, since --primary and
     --primary-dark are identical and can no longer supply that contrast. */
  --primary-press: color-mix(in srgb, var(--color-dark-red) 78%, black);
  --accent:        var(--color-gold);
  --link:          var(--color-dark-red);
  --gradient-primary: linear-gradient(135deg,
    color-mix(in srgb, var(--color-dark-red) 80%, black) 0%,
    var(--color-dark-red) 55%,
    color-mix(in srgb, var(--color-dark-red) 78%, white) 100%);

  --bg:            var(--color-white);
  --bg-alt:        var(--color-warm-grey);
  --text:          var(--color-black);
  /* Darkened from #6b5a52 to keep 4.5:1+ contrast against the lithium-gray --bg-alt */
  --text-muted:    #574943;
  --border:        #e4d8c7;
}

/* ---- Reset ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; }
p { margin: 0 0 1em; color: var(--text); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--primary); color: #fff;
  padding: 10px 16px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--primary-press); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-light { background: #fff; color: var(--primary-dark); }
.btn-light:hover { background: var(--color-beige); }
.btn-sm { padding: 8px 16px; font-size: .82rem; }
.btn-nav-cta { background: var(--accent); padding: 9px 20px; }
.btn-nav-cta:hover { background: color-mix(in srgb, var(--accent) 78%, white); }
/* Higher specificity than ".main-nav a" (element+class) is required here, otherwise
   the nav's off-white link color silently wins over this and the button renders
   near-white-on-yellow. */
.main-nav .btn-nav-cta { color: var(--color-black); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--primary-dark);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand-logo { height: 62px; }
.brand-group { display: flex; align-items: center; gap: 16px; }
.brand-event {
  display: flex; align-items: baseline; gap: 5px;
  padding-left: 16px; border-left: 1px solid rgba(255,255,255,.28);
  color: #f6e9df; text-decoration: none; font-weight: 800; font-size: .92rem; letter-spacing: .02em;
}
.brand-event span { font-weight: 600; font-size: .8rem; color: rgba(246,233,223,.75); }
.brand-event:hover { color: #fff; }
.brand-event:hover span { color: #fff; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  color: #f6e9df; text-decoration: none; font-weight: 600; font-size: .92rem;
  letter-spacing: .01em;
}
.main-nav a:hover { color: #fff; }
.header-tools { display: flex; align-items: center; gap: 14px; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* ---- Hero ---- */
.hero {
  position: relative; overflow: hidden;
  background: var(--gradient-primary);
  color: #fff;
  padding: 76px 0 64px;
}
.hero-strata {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(115deg, rgba(0,0,0,.10) 0 1px, transparent 1px 68px);
}
.hero-inner { position: relative; display: flex; align-items: center; gap: 40px; }
.hero-copy { flex: 1 1 560px; max-width: 620px; }
.hero-art { flex: 0 0 300px; max-width: 320px; }
.hero-art img { filter: drop-shadow(0 22px 40px rgba(0,0,0,.35)); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700;
  color: var(--accent); margin-bottom: 14px;
}
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 14px; }
.hero-sub { font-size: 1.12rem; color: #f5e6dd; max-width: 54ch; margin-bottom: 22px; }
.hero-meta { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-meta li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .96rem; color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Stats strip ---- */
.stats-strip { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 10px 0; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 0;
  align-items: center;
}
.stat { display: flex; align-items: center; justify-content: center; }
.stat img { max-height: 110px; width: auto; max-width: 100%; }

/* ---- Sections generic ---- */
section { padding: 74px 0; }
.section-kicker {
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800;
  color: var(--primary); margin: 0 0 8px;
}
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.lede { font-size: 1.08rem; color: var(--text-muted); max-width: 76ch; }
.sub-heading { margin: 0; font-size: 1.35rem; }

/* ---- Collapsible sections ---- */
.collapsible { border-top: 1px solid var(--border); padding: 26px 0; }
.collapsible:last-of-type { border-bottom: 1px solid var(--border); }
.collapsible + .collapsible { border-top: none; }
.collapsible summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.collapsible summary::-webkit-details-marker,
.collapsible summary::marker { display: none; content: ""; }
.collapsible summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.collapsible-head p, .collapsible-head h2 { margin: 0; }
.collapsible-head .section-kicker { margin-bottom: 6px; }
.collapsible summary h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.collapsible .chev { flex: none; width: 26px; height: 26px; color: var(--primary); stroke-width: 2.4; transition: transform .22s ease; }
.collapsible[open] .chev { transform: rotate(180deg); }
.collapsible-body { padding-top: 26px; }
.collapsible:not([open]) summary { padding-bottom: 2px; }
.collapsible summary:hover h2,
.collapsible summary:hover .sub-heading { color: var(--primary-press); }

/* ---- About ---- */
.about { background: var(--bg); }
.opp-goal-vision {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px;
}
.ogv-card {
  background: var(--bg-alt); border-radius: var(--radius); padding: 26px;
  border-top: 4px solid var(--primary);
}
.ogv-card h3 { color: var(--primary-dark); font-size: 1.08rem; }
.ogv-card p { color: var(--text-muted); font-size: .95rem; margin-bottom: 0; }

.pull-quote {
  margin: 46px 0 6px; padding: 30px 34px; border-radius: var(--radius);
  background: var(--gradient-primary); color: #fff;
  font-size: 1.28rem; font-weight: 700; line-height: 1.4; font-style: normal;
}

.matters-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px;
}
.matters-card {
  position: relative; overflow: hidden;
  background: var(--gradient-primary); border: none; border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-2);
  color: #fff;
}
.matters-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(115deg, rgba(0,0,0,.10) 0 1px, transparent 1px 68px);
}
.matters-card-wide { grid-column: span 2; }
.matters-icon {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--c) 20%, white);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.matters-icon .icon { stroke: var(--c); width: 22px; height: 22px; }
.matters-card h4 { position: relative; z-index: 1; font-size: 1rem; margin-bottom: 6px; color: #fff; }
.matters-card p { position: relative; z-index: 1; font-size: .9rem; color: rgba(255,255,255,.82); margin: 0; }

/* ---- Program ---- */
.program { background: var(--bg-alt); padding-top: 46px; padding-bottom: 46px; }
.flow-steps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 8px; margin: 20px 0 6px;
}
.flow-pill {
  background: var(--accent); color: var(--color-black); font-weight: 800; font-size: .86rem;
  padding: 9px 18px; border-radius: 999px;
}
.flow-arrow {
  flex: none; color: var(--primary); font-size: 1.05rem; line-height: 1;
}
.program-track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px;
  position: relative;
}
.program-stage {
  background: var(--gradient-primary); border-radius: var(--radius); padding: 26px 22px;
  box-shadow: var(--shadow-2); position: relative; overflow: hidden; color: #fff;
}
.program-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(115deg, rgba(0,0,0,.10) 0 1px, transparent 1px 68px);
}
.stage-badge {
  position: relative; z-index: 1;
  display: inline-block; background: var(--accent); color: var(--color-black); font-size: .74rem;
  font-weight: 800; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px;
  margin-bottom: 14px;
}

.program-stage h3 { position: relative; z-index: 1; font-size: 1.05rem; color: #fff; }
.program-stage p { position: relative; z-index: 1; font-size: .89rem; color: rgba(255,255,255,.82); margin: 0; }

/* ---- Schedule ---- */
.schedule { background: var(--bg); padding-top: 46px; }
.schedule-table { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.schedule-section {
  padding: 9px 26px; background: var(--accent); border-bottom: 1px solid var(--border);
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-black);
}
.schedule-row {
  display: grid;
  grid-template-columns: 50px 2.1fr 1.05fr 2.3fr .9fr .8fr 1.05fr;
  gap: 18px; align-items: center; padding: 20px 26px;
  border-bottom: 1px solid var(--border);
  font-size: .96rem;
  transition: background .15s ease;
}
.schedule-row:last-child { border-bottom: none; }
/* Count alternation only among actual talk rows -- ignore both the header
   and the .schedule-section banners, which otherwise eat an nth-child slot
   without taking part in the stripe pattern and throw the parity off. */
.schedule-row:nth-child(even of .schedule-row:not(.schedule-head)) { background: var(--bg-alt); }
.schedule-row:not(.schedule-head):hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-alt)); }
.schedule-head {
  background: var(--primary-dark); color: #fff; font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; padding: 16px 26px;
}
.talk-num { font-weight: 800; font-size: 1.1rem; color: var(--primary); }
.schedule-head .talk-num { color: #fff; font-size: .8rem; }
.cell-speaker { display: flex; align-items: center; gap: 16px; }
.speaker-name { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.25; color: var(--text); }
.mini-avatar {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--color-beige); box-shadow: 0 0 0 2px var(--primary);
}
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mini-avatar.placeholder { display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--color-teal); }
.mini-avatar.placeholder svg { width: 30px; height: 30px; fill: none; stroke: var(--color-teal); stroke-width: 1.6; }

/* Dual-presenter schedule row (Talk 9) — two portrait thumbnails instead of one circular avatar */
.cell-speaker--dual { align-items: center; }
.dual-avatars { display: flex; gap: 6px; flex: none; }
.mini-avatar--portrait { width: 46px; height: 62px; border-radius: 8px; box-shadow: 0 0 0 2px var(--primary); }
.dual-names { font-size: .92rem; font-weight: 800; line-height: 1.35; color: var(--text); }
.org-logo-cell { display: flex; align-items: center; height: 100%; }
.org-logo-cell img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.schedule-row:not(.schedule-head) > [data-label="Topic"] { font-weight: 700; color: var(--primary-dark); }
.topic-note { display: block; margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
/* Talk 1's Opening & Welcome / Keynote split: each of these cells is placed
   on an explicit grid row (1 or 2) via inline grid-row, rather than each
   cell stacking its own two lines independently -- that would let each
   column's divider land at a different height depending on that column's
   own content (avatar vs. plain text, muted vs. full-size type). Sharing
   real grid row tracks guarantees the dividers *could* line up, but the
   row's own align-items:center still centers each cell within its track --
   so a cell whose row-2 track is taller than its own content (e.g. Topic
   wrapping to two lines forces a tall track that Organization's one-liner
   doesn't fill) gets vertically centered with padding above it, pushing
   its divider down. Stretching each cell to fill the full track (so the
   divider always sits at the same, consistent top edge) and then centering
   its own content inside that stretched box gets both: aligned dividers
   and vertically centered content. */
.cell-split-row { align-self: stretch; display: flex; align-items: center; }
.cell-split-row--bottom { padding-top: 10px; border-top: 1px dashed var(--border); }
.cell-split-row--muted { color: var(--text-muted); font-weight: 600; font-size: .88rem; }
.cell-action { justify-self: end; }
.cell-action .btn { padding: 10px 22px; font-size: .88rem; }

/* ---- Speakers ---- */
.speakers { background: var(--bg-alt); }
.speakers-heading-mobile { display: none; }
.card-schedule { display: none; }
.speaker-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center;
  gap: 24px; margin-top: 30px;
}
.speaker-card {
  width: 100%; max-width: 280px;
  background: var(--bg); border-radius: var(--radius); padding: 22px; text-align: center;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.speaker-photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 14px; background: var(--color-beige); border: 3px solid var(--bg-alt); box-shadow: 0 0 0 2px var(--primary); }
.speaker-photo img { width: 100%; height: 100%; object-fit: cover; }
.speaker-photo.placeholder { display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--color-teal); }
.speaker-photo.placeholder svg { width: 44px; height: 44px; fill: none; stroke: var(--color-teal); stroke-width: 1.6; }

/* Dual-presenter lineup card (Talk 9) — two portrait tiles instead of one circular photo */
.speaker-photo-dual { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.speaker-photo-dual-item {
  width: 96px; height: 128px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--color-beige); box-shadow: 0 0 0 2px var(--primary);
}
.speaker-photo-dual-item img { width: 100%; height: 100%; object-fit: cover; }
.speaker-card--dual h3 { font-size: .94rem; line-height: 1.35; }

.speaker-card h3 { font-size: 1rem; margin-bottom: 2px; }
.speaker-role { font-size: .82rem; color: var(--text-muted); margin-bottom: 6px; }
.speaker-org-logo { display: flex; align-items: center; justify-content: center; height: 46px; margin: 0 0 22px; }
.speaker-org-logo img { max-height: 100%; max-width: 160px; width: auto; height: auto; object-fit: contain; }
.speaker-topic { font-size: .78rem; color: var(--primary-dark); font-weight: 700; margin-bottom: 14px; }
.speaker-links { display: flex; justify-content: center; gap: 14px; font-size: .8rem; font-weight: 700; }
.speaker-links a { text-decoration: none; }
.speaker-links a:hover { text-decoration: underline; }
.speaker-links--dual { gap: 26px; }
.speaker-links-person { display: flex; flex-direction: column; gap: 4px; }
.speaker-segment { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); }
.speaker-segment-tag {
  display: inline-block; background: var(--accent); color: var(--color-black); font-size: .7rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px;
  cursor: pointer;
}
.speaker-segment-tag:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.speaker-segment-tag:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Bio/abstract triggers (clickable name+photo) ---- */
.speaker-trigger {
  display: block; width: 100%; background: none; border: none; padding: 0; margin: 0 0 2px;
  font-family: inherit; text-align: center; cursor: pointer; border-radius: 10px;
}
.bio-trigger.has-bio { cursor: pointer; }
.speaker-trigger:hover .speaker-photo,
.bio-trigger.has-bio:hover .mini-avatar,
.speaker-trigger:hover .speaker-photo-dual-item,
.bio-trigger.has-bio:hover .mini-avatar--portrait { box-shadow: 0 0 0 3px var(--accent); }
.speaker-trigger:hover h3,
.bio-trigger.has-bio:hover { color: var(--primary-press); }
.speaker-trigger h3 { text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: var(--color-teal); }
.bio-trigger.has-bio { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--color-teal); border-radius: 6px; }
.speaker-trigger:focus-visible,
.bio-trigger.has-bio:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.cell-speaker .bio-trigger { display: inline-flex; align-items: center; gap: 10px; }

/* ---- Speaker dialog ---- */
.speaker-dialog {
  border: none; border-radius: var(--radius); padding: 0; max-width: 640px; width: calc(100% - 40px);
  max-height: calc(100vh - 60px); box-shadow: var(--shadow-2); background: var(--bg);
}
.speaker-dialog::backdrop { background: rgba(20, 10, 8, .55); backdrop-filter: blur(1px); }
.dialog-inner {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 60px); position: relative;
}
.dialog-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-alt); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.dialog-close svg { width: 16px; height: 16px; fill: none; stroke: var(--primary-dark); stroke-width: 2; stroke-linecap: round; }
.dialog-close:hover { background: var(--primary); }
.dialog-close:hover svg { stroke: #fff; }
.dialog-head { flex: none; display: flex; gap: 20px; align-items: center; padding: 32px 56px 22px 32px; }
.dialog-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; background: var(--color-beige); box-shadow: 0 0 0 3px var(--primary); }
.dialog-photo img { width: 100%; height: 100%; object-fit: cover; }
.dialog-photo.dialog-photo--dual {
  width: auto; height: 92px; display: flex; gap: 8px; overflow: visible;
  border-radius: 0; background: none; box-shadow: none;
}
.dialog-photo.dialog-photo--dual img {
  width: 70px; height: 92px; border-radius: 10px; object-fit: cover; object-position: center 30%; flex: none;
  box-shadow: 0 0 0 3px var(--primary);
}
.dialog-headtext { min-width: 0; flex: 1 1 auto; }
#dialog-name { margin-bottom: 3px; font-size: 1.2rem; }
.dialog-role { font-size: .88rem; color: var(--text-muted); margin-bottom: 3px; }
.dialog-topic { font-size: .82rem; color: var(--primary-dark); font-weight: 700; margin-bottom: 8px; }
.dialog-schedule { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dialog-schedule-info { display: flex; flex-direction: column; gap: 2px; }
.dialog-schedule-date { font-size: .82rem; font-weight: 700; color: var(--text); margin: 0; }
.dialog-schedule-note { font-size: .76rem; font-weight: 500; color: var(--text-muted); margin: 0; }
.dialog-links { display: flex; gap: 16px; font-size: .8rem; font-weight: 700; }
.dialog-links a { text-decoration: none; }
.dialog-links a:hover { text-decoration: underline; }
.dialog-org-logo { flex: none; width: 140px; height: 64px; display: flex; align-items: center; justify-content: center; }
.dialog-org-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.dialog-body-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 32px; }
.dialog-body { padding-bottom: 28px; }
.dialog-body h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); margin: 22px 0 8px; }
.dialog-body h4:first-child { margin-top: 0; }
.dialog-body .abstract-title { font-weight: 700; color: var(--text); margin-bottom: 8px; }
.dialog-body p { font-size: .92rem; color: var(--text-muted); line-height: 1.6; }
.dialog-body .dialog-person-links { display: flex; gap: 16px; font-size: .8rem; font-weight: 700; margin: -4px 0 12px; }
.dialog-body .dialog-person-links a { color: var(--primary); text-decoration: none; }
.dialog-body .dialog-person-links a:hover { text-decoration: underline; }

.dialog-segment { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
.dialog-segment-tag {
  display: inline-block; background: var(--accent); color: var(--color-black); font-size: .7rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px;
  box-shadow: var(--shadow-1);
}

.dialog-nav {
  position: relative;
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-alt);
}
.dialog-nav-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .82rem; color: var(--primary-dark);
  padding: 8px 12px; border-radius: 999px;
}
.dialog-nav-btn:hover { background: var(--bg); }
.dialog-nav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dialog-nav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dialog-nav-count { font-size: .76rem; color: var(--text-muted); font-weight: 600; }

/* ---- Registration dialog ---- */
.reg-head { padding-bottom: 8px; }
/* Off-screen, not display:none -- some honeypot-aware bots specifically
   skip display:none fields, so this stays in the layout flow (just moved
   out of the viewport) to catch those too. */
.reg-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.reg-field--wide { grid-column: 1 / -1; }
.reg-field label { display: block; font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.reg-field input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: .92rem; color: var(--text); background: var(--bg);
}
.reg-field input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.reg-talks-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.reg-talks-label { font-size: .82rem; font-weight: 700; color: var(--text); margin: 0; }
.reg-select-all {
  font-family: inherit; background: var(--bg); border: 1px solid var(--primary); cursor: pointer;
  border-radius: 999px; padding: 6px 14px; font-size: .78rem; font-weight: 700; color: var(--primary);
}
.reg-select-all:hover { background: var(--primary); color: #fff; }
.reg-talks-list {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; max-height: 260px;
  overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px;
}
/* align-items: flex-start (not center) so the checkbox lines up with the
   first line of longer, wrapping labels (like Talk 9's) instead of
   floating in the vertical middle of the whole wrapped block. */
.reg-talk-option { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: .88rem; cursor: pointer; line-height: 1.4; }
.reg-talk-option:hover { background: var(--bg-alt); }
.reg-talk-option input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); }
.reg-error {
  color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 8%, var(--bg));
  border: 1px solid var(--primary); border-radius: 8px; padding: 10px 14px; font-size: .86rem; margin-bottom: 16px;
}
.reg-submit { width: 100%; justify-content: center; }
/* Room for the close button (which sits absolutely positioned top-right of
   .dialog-inner) now that .dialog-head -- which used to supply this top
   spacing -- is hidden once the success message shows. */
.reg-success { padding-top: 34px; }
/* .dialog-body h4 styles section labels like "Abstract"/"Biography" as
   small uppercase text; .reg-success's h4 is a success headline, not a
   section label, so it needs its own look, not that one. The extra class
   here (rather than just .reg-success h4) guarantees it wins regardless of
   rule order, rather than relying on a same-specificity tiebreak. */
.dialog-body .reg-success h4 {
  font-size: 1.3rem; text-transform: none; letter-spacing: normal; font-weight: 800;
  margin: 0 0 10px; color: var(--primary-dark);
}
.reg-success p { color: var(--text-muted); margin: 0; }

@media (max-width: 560px) {
  .dialog-head { flex-direction: column; text-align: center; padding: 26px 20px 20px; }
  .dialog-body-scroll { padding: 0 20px; }
  .dialog-nav { padding: 12px 14px; }
  .dialog-nav-btn span { display: none; }
  .dialog-links { justify-content: center; }
  .dialog-schedule { justify-content: center; flex-wrap: wrap; }
  .dialog-org-logo { order: -1; width: auto; height: 54px; margin-bottom: 6px; }
  .reg-grid { grid-template-columns: 1fr; }
}

/* ---- Committees ---- */
.committees { background: var(--bg); text-align: center; }
/* Split the difference between the base .section-kicker (.78rem) and the
   committee-label size (1.35rem) it introduces. */
.committees .section-kicker { font-size: 1.07rem; }
.committee-block { margin-top: 34px; }
.committee-block + .committee-block { margin-top: 44px; }
.committee-label {
  font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--primary); margin: 0 0 20px;
}
.committee-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 26px; }
/* Both committee grids use an explicit column count (rather than natural
   flex-wrap) so they cap at 4 per row instead of fitting as many as the
   container allows at wide viewports. */
.committee-grid--exec {
  display: grid; grid-template-columns: repeat(4, 168px);
  border: 2px solid var(--bg-alt); border-radius: var(--radius); padding: 22px;
  max-width: 850px; margin: 0 auto;
}
.committee-grid--org {
  display: grid; grid-template-columns: repeat(4, 168px); justify-content: center;
  border: 2px solid var(--bg-alt); border-radius: var(--radius); padding: 22px;
  max-width: 850px; margin: 0 auto;
}
/* 9 members in a 4-column grid leaves the last one alone in its row --
   span it across all columns and center it there instead of it sitting
   left-aligned under column 1. Only safe while the member count isn't an
   exact multiple of 4 -- revisit if it ever becomes one. */
.committee-grid--org > .committee-member:last-child { grid-column: 1 / -1; justify-self: center; }
.committee-member { width: 168px; }
.committee-photo {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px;
  background: var(--color-beige); box-shadow: 0 0 0 2px var(--primary);
}
.committee-photo img { width: 100%; height: 100%; object-fit: cover; }
.committee-grid--exec .committee-photo { width: 120px; height: 120px; }
.committee-name { font-size: .92rem; font-weight: 800; color: var(--text); margin: 0 0 2px; }
.committee-title { font-size: .78rem; color: var(--text-muted); line-height: 1.4; margin: 0; }
.committee-title .nowrap { white-space: nowrap; }

/* ---- Partners ---- */
.partners { background: var(--bg-alt); text-align: center; }
.partners h2 { max-width: 46ch; margin-left: auto; margin-right: auto; }
.partners .section-kicker { font-size: 1.35rem; }
.partner-block { margin-top: 34px; }
.partner-block-label {
  font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--primary); margin: 0 0 12px;
}
.partner-logos {
  display: flex; justify-content: center;
  padding: 36px 34px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
/* Capping the wrap container's width (rather than forcing a break after a
   fixed item count) keeps wrapping purely width-driven, same as before --
   it just lowers the ceiling from ~5-6 logos per row down to ~4 at full
   width, and still degrades continuously (3-per-row, 2-per-row, ...) as the
   viewport narrows, with no risk of an orphaned partial row. */
.partner-logos-inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 30px 46px; max-width: 900px;
}
.partner-logo { display: flex; align-items: center; justify-content: center; height: 46px; flex: 0 0 auto; }
.partner-logo img { height: 100%; width: auto; max-width: 190px; object-fit: contain; }
/* Squat/near-square marks read as visually smaller than wordmarks at the same height — give them more room */
.partner-logo--tall { height: 66px; }

/* ---- CTA band ---- */
.cta-band { background: var(--gradient-primary); color: #fff; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-inner h2 { margin-bottom: 6px; }
.cta-inner p { color: #f5e6dd; margin: 0; max-width: 52ch; }

/* ---- Footer ---- */
.site-footer { background: var(--bg-alt); padding: 46px 0 30px; border-top: 1px solid var(--border); }
.footer-inner { text-align: center; }
.footer-logo { height: 80px; margin: 0 auto 16px; }
.footer-inner p { color: var(--text-muted); font-size: .88rem; max-width: 60ch; margin: 0 auto 14px; }
.footer-links { display: flex; justify-content: center; gap: 22px; font-weight: 700; font-size: .86rem; margin-bottom: 18px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-copy { font-size: .78rem; color: var(--text-muted); opacity: .8; }

/* ================= Responsive ================= */
@media (max-width: 980px) {
  .matters-grid, .program-track { grid-template-columns: repeat(2, 1fr); }
  .stat img { max-height: 72px; }
  .speaker-grid { grid-template-columns: repeat(2, minmax(0, 280px)); }
  /* 9 cards in a 2-column grid leaves the last one alone in its row —
     span it across both columns and center it there instead of it
     sitting left-aligned under column 1. */
  .speaker-grid > .speaker-card:last-child { grid-column: 1 / -1; justify-self: center; }
  .matters-card-wide { grid-column: span 2; }
  .committee-grid--exec { grid-template-columns: repeat(2, 168px); }
  .committee-grid--org { grid-template-columns: repeat(2, 168px); }
  .opp-goal-vision { grid-template-columns: 1fr; }
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-meta { align-items: center; }
  .hero-actions { justify-content: center; }
  .hero-copy { flex-basis: auto; }
  .hero-art { order: -1; flex-basis: auto; max-width: 220px; }
  .partner-logos-inner { gap: 26px 34px; }
}

@media (max-width: 760px) {
  .main-nav {
    position: absolute; top: 68px; left: 0; right: 0; background: var(--primary-dark);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 18px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .main-nav .btn-nav-cta { margin-top: 12px; text-align: center; justify-content: center; }
  .nav-toggle { display: block; }
  .brand-event span { display: none; }
  .brand-event { padding-left: 12px; gap: 0; font-size: .82rem; }
  .brand-group { gap: 12px; }

  .matters-grid, .program-track { grid-template-columns: 1fr; }
  .committee-grid--exec { grid-template-columns: 168px; }
  .committee-grid--org { grid-template-columns: 168px; }
  .flow-pill { font-size: .78rem; padding: 7px 14px; }
  .flow-arrow { font-size: .95rem; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat img { max-height: 44px; }
  .speaker-grid { grid-template-columns: minmax(0, 280px); }
  .matters-card-wide { grid-column: span 1; }
  .partner-logos { padding: 28px 22px; }
  .partner-logos-inner { gap: 24px 26px; }
  .partner-logo { height: 38px; }
  .partner-logo--tall { height: 54px; }

  /* Table is unwieldy at this width; the Speakers section below (with its
     own date/Register block per card, injected by script.js) serves as the
     schedule on mobile instead. See the SPEAKERS object in script.js. */
  .schedule { display: none; }
  .speakers-heading-desktop { display: none; }
  .speakers-heading-mobile { display: block; margin-bottom: 30px; }
  .card-schedule { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
  .card-schedule-date { font-size: .82rem; font-weight: 700; color: var(--text); margin: 0; }
  .card-schedule-split { display: flex; flex-direction: column; gap: 8px; }
  .card-schedule-part { font-size: .82rem; color: var(--text); margin: 0; }
  .card-schedule-part + .card-schedule-part { padding-top: 8px; border-top: 1px dashed var(--border); }
  .card-schedule-register { width: 100%; justify-content: center; }

  .cta-inner { text-align: center; justify-content: center; }
}