/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Palette is MSU maroon (#5d1725, sampled from the MSU CCE logo) plus white and
   neutral grey — the MSU pairing — per Vince Scott: "make the basis MSU colors
   and logo and add from there." Deliberately no gold: that is MGCCC's accent,
   and it only appears inside the MGCCC logo itself. Tonal variants go darker
   rather than lighter, since lightening maroon shifts it toward red. */
:root {
  --bg:        #ffffff;
  --bg-alt:    #f3f4f6;
  --surface:   #ffffff;
  --surface-2: #eceef1;
  --border:        rgba(17,24,39,.11);
  --border-strong: rgba(17,24,39,.20);
  --text:       #1f2126;
  --text-muted: #5b6068;
  --text-faint: #7c828b;
  --accent:       #5d1725;
  --accent-bright:#5d1725;
  --accent-deep:  #40101b;
  --accent-ink:   #ffffff;
  --radius:    10px;
  --radius-sm: 6px;
  --ease-out:  cubic-bezier(.25, 1, .5, 1);
  --ease-back: cubic-bezier(.22, 1.2, .36, 1);

  /* One shell for the top bar, the sticky nav and the hero, so the logo, the
     menu button and the hero copy all sit on the same left and right edges. */
  --shell:  1180px;
  --gutter: 2.5rem;

  /* The bar rides 32px wider on each side than the content shell, so the logo
     and menu button sit just outboard of the hero copy rather than flush with
     it. Widened symmetrically to keep the bar balanced. */
  --bar-shell: calc(var(--shell) + 64px);
}

/* Footer carries the maroon so the page closes on the MSU basis. */
footer {
  --bg:        #4a1220;
  --bg-alt:    #4a1220;
  --surface:   #5d1725;
  --surface-2: #601a28;
  --border:        rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24);
  --text:       #ffffff;
  --text-muted: #e6d3d7;
  --text-faint: #c9adb3;
  --accent-bright: #ffffff;
}

html { scroll-behavior: smooth; }

/* The sticky section nav is 62px tall and would otherwise sit on top of
   whatever an anchor link jumps to. */
section[id], header[id] { scroll-margin-top: 78px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.accent { color: var(--accent); }

.icon { width: 1em; height: 1em; display: block; }

/* ── TRANSPARENT TOP BAR ──
   Absolutely positioned over the hero so the hero background shows through,
   and it scrolls away with the hero rather than following the viewport. */
#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 110;
  background: transparent;
}

.topbar-inner {
  max-width: var(--bar-shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 98px;
}

.topbar-logo {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.topbar-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.topbar-logo img {
  height: 46px;
  width: auto;
  max-width: 58vw;
  object-fit: contain;
  display: block;
  transition: opacity .2s ease;
}

.topbar-logo:hover img { opacity: .78; }

/* ── MENU BUTTON + PANEL ── */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease, border-color .2s ease;
}

.menu-toggle:hover { background: var(--bg-alt); border-color: var(--accent); }
.menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.menu-toggle .icon { width: 26px; height: 26px; }

/* Flies out horizontally, leftward from the button, rather than dropping
   below it. The right offset is the button's own offset plus its width and a
   gap, so the strip always starts just left of the button. */
.menu-panel {
  --menu-clear: 66px;   /* 54px button + 12px gap */

  position: absolute;
  top: 50%;
  right: calc(max(var(--gutter), calc((100% - var(--bar-shell)) / 2 + var(--gutter))) + var(--menu-clear));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(17,24,39,.15);
  padding: .4rem .45rem;
  opacity: 0;
  /* translateY(-50%) does the vertical centring, so both states carry it. */
  transform: translateY(-50%) translateX(14px) scale(.97);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-out);
}

.menu-panel.open {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  pointer-events: auto;
}

.menu-panel a {
  color: var(--text);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding: .55rem .95rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}

.menu-panel a:hover { background: var(--bg-alt); color: var(--accent); }

.menu-panel .menu-cta {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-align: center;
}

.menu-panel .menu-cta:hover { background: var(--accent-deep); color: var(--accent-ink); }

/* ── STICKY SECTION NAV ──
   Maroon bar carrying only section links, all styled alike. */
#sectionnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--accent);
  transition: box-shadow .25s ease;
}

/* .pinned is set by app.js when the bar reaches the top of the viewport. */
#sectionnav.pinned { box-shadow: 0 2px 18px rgba(64,16,27,.38); }

/* Three tracks so the links stay optically centred in the bar regardless of
   how wide the home logo on the left happens to be. */
.sectionnav-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
}

/* Home button. A wordmark used to sit here, but at bar scale its fine strokes
   never read cleanly on maroon; an icon states the same thing at any size. */
.sn-home {
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: #ffffff;
  transition: background-color .2s ease, border-color .2s ease;
}

.sn-home:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); }
.sn-home:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.sn-home .icon { width: 22px; height: 22px; }

.sn-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2.75rem;
}

.sn-links a {
  position: relative;
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .2s;
}

.sn-links a:hover, .sn-links a.active { color: #ffffff; }

.sn-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -23px;
  height: 2px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.sn-links a:hover::after, .sn-links a.active::after { transform: scaleX(1); }

/* ── HERO ──
   Split layout: copy on the left, event logistics in a maroon detail card on
   the right. The host logos (MSU, MGCCC) sit on a rule beneath the copy. */
#hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* keeps mobile browser chrome from causing overflow */
  display: flex;
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

/* Padding is even top and bottom so the content centres in the full-height
   hero; the top value also clears the absolute top bar. */
.split-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 3.25rem;
  align-items: center;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 6rem var(--gutter);
}

.hero-content {
  max-width: none;
  padding: 0;
}

.hero-content > * {
  opacity: 0;
  animation: hero-line-in 1.3s var(--ease-out) both;
}

.hero-presented   { animation-delay: .15s; }
.hero-tagline     { animation-delay: .9s; }
.hero-countdown   { animation-delay: 1.2s; }
.split-hosts      { animation-delay: 1.45s; }

/* The title rises up from behind its own bottom edge rather than just sliding.
   The h1 is the mask, so it carries the overflow and the inner span moves. The
   padding/margin pair gives descenders room inside the clipped box. */
.hero-content h1 {
  animation: none;
  opacity: 1;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: calc(1.25rem - .12em);
}

.h1-rise {
  display: block;
  animation: title-rise 1.6s var(--ease-out) both;
  animation-delay: .3s;
}

@keyframes title-rise {
  from { opacity: 0; transform: translateY(105%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each host logo arrives just after the rule it sits on. */
.split-hosts a {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  opacity: 0;
  animation: logo-in 1.1s var(--ease-back) both;
  transition: opacity .2s ease;
}

.split-hosts a:nth-child(1) { animation-delay: 1.55s; }
.split-hosts a:nth-child(2) { animation-delay: 1.75s; }
.split-hosts a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

/* Hover moves the image, not the anchor. The anchor's entrance animation uses
   fill-mode: both, so its final keyframe keeps applying after it finishes and
   outranks any transform or opacity set on the anchor itself — an opacity fade
   was declared here and never actually ran. */
.split-hosts img {
  transition: transform .35s var(--ease-back);
}

/* Lift and scale only. A drop-shadow traced the MSU logo's rectangle rather
   than its artwork — that file is a JPEG with no alpha — while shadowing the
   MGCCC PNG correctly, so the pair did not match. */
.split-hosts a:hover img,
.split-hosts a:focus-visible img {
  transform: translateY(-5px) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .split-hosts img { transition: none; }
  .split-hosts a:hover img { transform: none; }
}

@keyframes logo-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.detail-card {
  opacity: 0;
  animation: card-in 1.5s var(--ease-out) both;
  animation-delay: .45s;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(34px) scale(.972); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-line-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .h1-rise, .split-hosts a, .detail-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Event subheading, kept as the eyebrow above the title per Shelly Hollis:
   "Securing the Coast" with a subheading of "CMMC Day". */
.hero-presented {
  display: inline-block;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--accent);
}

.hero-content h1 {
  font-size: clamp(2.9rem, 6.2vw, 5.9rem);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.02;
  margin-bottom: 1.25rem;
}

.hero-tagline {
  color: var(--text-muted);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  margin-bottom: 1.85rem;
  max-width: 27ch;
}

.hero-countdown {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .88rem;
  margin-bottom: 3rem;
}

.split-hosts {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2.4rem;
  border-top: 1px solid var(--border);
}

.split-hosts img { object-fit: contain; display: block; }
.split-hosts .hb-msu   { width: 322px; height: auto; }
.split-hosts .hb-mgccc { height: 84px; width: auto; }

/* ── EVENT DETAIL CARD ── */
.detail-card {
  background: linear-gradient(158deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 3.1rem 2.5rem;
  box-shadow: 0 20px 44px rgba(64,16,27,.28);
}

.dc-label {
  color: rgba(255,255,255,.74);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.dc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.4rem;
}

.dc-list li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.dc-list li:last-child { border-bottom: none; padding-bottom: 0; }

.dc-list span {
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.dc-list strong {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
}

/* White on maroon — the MSU pairing. Scoped to .detail-card so it outranks
   .btn-primary, which is defined further down the file and would otherwise
   win on source order. */
.detail-card .dc-cta {
  display: block;
  text-align: center;
  width: 100%;
  background: #ffffff;
  color: var(--accent);
}

.detail-card .dc-cta:hover { box-shadow: 0 10px 26px rgba(0,0,0,.3); }

.dc-map {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: rgba(255,255,255,.8);
  font-size: .85rem;
  text-decoration: none;
}

.dc-map:hover { color: #fff; text-decoration: underline; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 2.2rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .2s var(--ease-back), box-shadow .2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(94,23,37,.32);
}

.btn-primary:active { transform: translateY(0); }

/* ── SCROLL REVEAL ──
   Gated behind .js (added by app.js before paint) so pages without
   JavaScript just show everything, instead of hiding it forever. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out);
}

.js .reveal.in-view { opacity: 1; transform: none; }

.reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group > *:nth-child(2) { transition-delay: 130ms; }
.reveal-group > *:nth-child(3) { transition-delay: 260ms; }
.reveal-group > *:nth-child(4) { transition-delay: 390ms; }
.reveal-group > *:nth-child(5) { transition-delay: 520ms; }
.reveal-group > *:nth-child(6) { transition-delay: 650ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── SECTIONS ── */
section { padding: 5.5rem 0; }

.alt-section {
  background: var(--bg-alt);
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.alt-section .section-sub { color: var(--text-muted); }

.section-title {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  margin-bottom: .75rem;
  color: var(--text);
}

.section-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 640px;
  margin: 0 auto 3.25rem;
}

/* ── PARTNERS ──
   Sits at the foot of the page, directly above the footer. */
#partners {
  background: var(--bg);
  padding: 3.5rem 0 3.75rem;
  border-top: 1px solid var(--border);
}

.partners-label {
  text-align: center;
  color: var(--text-faint);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.partners-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.1rem;
}

.partner-card {
  text-decoration: none;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: .95rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(17,24,39,.12);
}

.partner-card img {
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  transition: transform .3s var(--ease-out);
}

.partner-card:hover img { transform: scale(1.045); }

/* The four marks have very different aspect ratios, so a single height gives
   them very different optical weight. Sized individually to read as equals. */
.partner-card img.p-msu   { height: auto; width: 200px; }
.partner-card img.p-mgccc { height: 54px; }
.partner-card img.p-dcg   { height: 62px; }
.partner-card img.p-tne   { height: 36px; }

/* ── DOE FUNDING ACKNOWLEDGEMENT ── */
.funding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 780px;
  margin: 2.75rem auto 0;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border);
  text-align: left;
}

.funding-logo {
  height: 62px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.funding-text { max-width: 480px; }

.funding-text p {
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.5;
}

.funding-disclaimer {
  color: var(--text-faint) !important;
  font-size: .75rem !important;
  margin-top: .4rem;
}

/* ── VENUE ──
   Map and address side by side, photographs beneath. */
.venue-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  grid-template-rows: 1fr auto;
  gap: .85rem 1.5rem;
  align-items: stretch;
}

.venue-map { grid-column: 1; grid-row: 1; }
.venue-maplink { grid-column: 1; grid-row: 2; }
.venue-facts { grid-column: 2; grid-row: 1 / span 2; }

.venue-maplink {
  font-size: .85rem;
}

.venue-maplink a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(93,23,37,.3);
}

.venue-maplink a:hover { border-bottom-color: var(--accent); }

.venue-map {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 430px;
  background: var(--bg-alt);
}

.venue-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.venue-facts {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  display: flex;
  flex-direction: column;
}

.venue-facts h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: .6rem;
}

.venue-address {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.venue-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: 1.75rem;
}

.venue-list li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}

.venue-list li:last-child { border-bottom: none; padding-bottom: 0; }

.venue-list span {
  color: var(--text-faint);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.venue-list strong { color: var(--text); font-size: .95rem; font-weight: 600; }

.venue-cta {
  margin-top: auto;
  text-align: center;
  font-size: .95rem;
  padding: .75rem 1.5rem;
}

/* ── ABOUT CARDS ── */
.about-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  max-width: 1040px;
  margin: 0 auto;
}

.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease;
}

/* Border goes maroon on hover only. */
.about-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.card-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto 1.15rem;
  color: var(--accent-bright);
  transition: transform .3s var(--ease-back);
}

.about-card:hover .card-icon { transform: scale(1.14); }

.card-icon .icon { width: 100%; height: 100%; }

.about-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text);
}

.about-card p { color: var(--text-muted); font-size: .92rem; }

/* ── AGENDA ── */
/* Held to a readable measure: at full container width each row drew a rule
   far wider than the sentence above it, which read as stretched. */
.agenda-list {
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
}

.agenda-item {
  display: flex;
  gap: 1.75rem;
  padding: 1.6rem 1rem;
  margin: 0 -1rem;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background-color .2s ease;
}

.agenda-item:last-child { border-bottom: none; }
/* Agenda sits on a white band, so the row hover tints toward grey. */
.agenda-item:hover { background-color: var(--bg-alt); }

.agenda-time {
  flex-shrink: 0;
  width: 44px;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  opacity: .38;
  padding-top: .05rem;
}

.agenda-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .3rem;
}

.agenda-speaker {
  color: var(--accent-bright);
  font-size: .86rem;
  font-style: italic;
  margin-bottom: .35rem;
}

.agenda-body p { color: var(--text-muted); font-size: .93rem; }

/* ── SPEAKERS ── */
.speaker-title {
  color: var(--accent-bright);
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: .3rem;
}

/* Not uppercased: the marks are mixed case by definition — ECoP and Lead CCA
   were rendering as ECOP and LEAD CCA. */
.speaker-creds {
  color: var(--text-faint);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .8rem;
}

.speaker-bio { color: var(--text-muted); font-size: .9rem; }

/* ── FEATURED SPEAKER ──
   One confirmed speaker reads better as a wide card than as a quarter-width
   cell: the bio wrapped into a narrow ribbon in the grid, and its length left
   the placeholder cards beside it mostly empty. */
/* One row per speaker so the list scales as more are confirmed, and each bio
   keeps a full-width measure instead of a narrow column. */
.speaker-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1040px;
  margin: 0 auto;
}

.speaker-featured {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.25rem;
  align-items: center;
  padding: 2.25rem 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
}

.sf-photo {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
}

.sf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sf-body h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
}

.sf-body .speaker-title { font-size: .95rem; margin-bottom: .35rem; }
.sf-body .speaker-creds { margin-bottom: .9rem; }
.sf-body .speaker-bio { font-size: .95rem; line-height: 1.65; }

@media (max-width: 700px) {
  .speaker-featured {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
  .sf-photo { width: 128px; height: 128px; }
}

/* Whole card is clickable; the button is the keyboard route. */
.speaker-featured { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.speaker-featured:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(93,23,37,.1); }

.sf-more {
  display: inline-block;
  margin-top: 1rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid rgba(93,23,37,.35);
  transition: border-color .2s ease;
}

.sf-more:hover { border-bottom-color: var(--accent); }
.sf-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── FULL BIO MODAL ── */
.bio-modal {
  /* The reset at the top of this file zeroes all margins, which kills the
     margin:auto a native dialog uses to centre itself in the top layer. */
  margin: auto;
  width: min(720px, calc(100vw - 2.5rem));
  max-height: min(86vh, 820px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 70px rgba(17,24,39,.3);
  overflow: hidden;
}

.bio-modal::backdrop { background: rgba(24,14,18,.55); }

.bio-modal[open] {
  display: flex;
  flex-direction: column;
  animation: bio-in .32s var(--ease-out) both;
}

@keyframes bio-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bio-modal[open] { animation: none; }
}

.bio-close {
  position: absolute;
  top: .6rem;
  right: .75rem;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.bio-close:hover { background: var(--bg-alt); color: var(--accent); }
.bio-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bio-head {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  padding: 2rem 3.5rem 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bio-head img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.bio-head h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: .25rem; }
.bio-head .speaker-title { font-size: .92rem; margin-bottom: .3rem; }
.bio-head .speaker-creds { margin-bottom: .6rem; }

/* Icon only — an underline beneath a bare glyph reads as a stray rule, so the
   hover cue is the colour instead. */
.bio-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  text-decoration: none;
  transition: color .2s ease, transform .2s var(--ease-back);
}

.bio-link a:hover { color: var(--accent-deep); transform: translateY(-1px); }
.bio-link a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.bio-link .icon { width: 22px; height: 22px; }

/* Only the prose scrolls, so the name stays visible on a long bio. */
.bio-copy {
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
}

.bio-copy p {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.bio-copy p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .bio-head { flex-direction: column; text-align: center; padding: 2.25rem 1.25rem 1.25rem; }
  .bio-copy { padding: 1.25rem 1.25rem 1.75rem; }
}

/* ── REGISTER FORM ── */
/* The register band is white, so the card leans on a shadow rather than a
   background change to separate itself from the section. */
.reg-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(17,24,39,.06);
  padding: 2.5rem;
  max-width: 760px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.form-group.full-width { margin-bottom: 1.25rem; }

label {
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 600;
}

input, select, textarea {
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .7rem 1rem;
  font-size: .95rem;
  font-family: inherit;
  transition: border-color .2s;
  width: 100%;
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

select option { background: var(--bg-alt); color: var(--text); }

textarea { resize: vertical; }

.form-submit { text-align: center; margin-top: 1.75rem; }

.form-note {
  color: var(--text-faint);
  font-size: .85rem;
  margin-top: .85rem;
}

/* ── FOOTER ── */
footer {
  background: var(--bg-alt);
  color: var(--text-muted);
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.footer-event {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}

.footer-brand p { font-size: .9rem; margin-top: .35rem; color: var(--text-muted); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s;
}

.footer-links a:hover { color: var(--accent-bright); }

.footer-copy { font-size: .8rem; color: var(--text-faint); }

.footer-copy a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.footer-copy a:hover { color: var(--text); }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr; }

  .agenda-item { flex-direction: column; gap: .35rem; }
  .agenda-time { width: auto; }

  .topbar-inner { height: 82px; }
  .topbar-logo img { height: 34px; }
  .menu-panel {
    top: 82px;
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    white-space: normal;
    border-radius: var(--radius);
    padding: .5rem;
    transform: translateY(-8px);
  }
  .menu-panel.open { transform: translateY(0); }
  .menu-panel a { padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .95rem; }
  .menu-panel .menu-cta { margin-top: .35rem; }

  /* Grid's symmetric 1fr tracks reserved as much room right of the links as
     the arrow took on the left, which pushed "Register" off a 390px screen.
     Flex with an auto margin centres the links without that reservation. */
  .sectionnav-inner {
    display: flex;
    padding: 0 .85rem;
    height: 60px;
  }
  .sn-home { margin-right: .5rem; }
  .sn-links { margin: 0 auto; gap: 1.05rem; }
  .sn-links a { font-size: .8rem; white-space: nowrap; }
  .sn-links a::after { bottom: -19px; }
  .sn-home { width: 38px; height: 38px; }
  .sn-home .icon { width: 20px; height: 20px; }


  .venue-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .venue-map, .venue-maplink, .venue-facts { grid-column: 1; grid-row: auto; }
  .venue-map { min-height: 260px; }
  .venue-facts { padding: 1.6rem 1.4rem; }

  .split-hosts { gap: 1.5rem; }
  .split-hosts .hb-msu { width: 224px; }
  .split-hosts .hb-mgccc { height: 56px; }

  .detail-card { padding: 1.9rem 1.6rem; }

  .funding { justify-content: center; text-align: center; }
  .funding-logo { height: 52px; margin: 0 auto; }
}

/* ── LARGE SCREENS ──
   At 1500px+ the 1180px container left deep empty gutters and the capped type
   stopped growing, so the hero read as a small block adrift in white. The
   container widens and the whole hero steps up a size. */
@media (min-width: 1500px) {
  :root { --shell: 1320px; --gutter: 3rem; }

  .split-grid {
    gap: 3.6rem;
    padding: 7rem var(--gutter);
  }

  .hero-presented { font-size: .9rem; margin-bottom: 1.6rem; }
  .hero-content h1 { font-size: 6.1rem; margin-bottom: 1.35rem; }
  .hero-tagline { font-size: 1.42rem; margin-bottom: 2rem; max-width: 26ch; }
  .hero-countdown { font-size: .9rem; margin-bottom: 3rem; }

  .split-hosts { padding-top: 2.6rem; gap: 2.75rem; }
  .split-hosts .hb-msu { width: 340px; }
  .split-hosts .hb-mgccc { height: 90px; }

  .detail-card { padding: 3rem 2.7rem; }
  .dc-label { margin-bottom: 1.6rem; }
  .dc-list { gap: 1.6rem; margin-bottom: 2.5rem; }
  .dc-list li { padding-bottom: 1.6rem; }
  .dc-list strong { font-size: 1.08rem; }
  .detail-card .dc-cta { font-size: 1.05rem; padding: .9rem 2rem; }
}

/* Wider still: one more step so ultrawide monitors are not mostly gutter. */
@media (min-width: 1800px) {
  :root { --shell: 1440px; }
  .hero-content h1 { font-size: 6.6rem; }
  .split-hosts .hb-msu { width: 366px; }
  .split-hosts .hb-mgccc { height: 96px; }
}

/* Roomier than the viewport on screens with the height to spare, so the hero
   reads as a full page of its own. Deliberately scoped away from short screens
   and mobile, where the extra height would only strand the content. */
@media (min-width: 901px) and (min-height: 801px) {
  #hero {
    min-height: 108vh;
    min-height: 108svh;
  }

  .split-grid { padding: 7rem 2.5rem; }
}

/* On short screens (laptops, landscape tablets) a full-height hero would push
   the card's CTA below the fold, so the vertical rhythm tightens instead. */
@media (min-width: 901px) and (max-height: 800px) {
  .split-grid { padding: 6.25rem 2.5rem 2.25rem; }

  .hero-presented { font-size: .82rem; margin-bottom: 1rem; }
  .hero-content h1 { font-size: clamp(2.5rem, 4.4vw, 3.6rem); margin-bottom: .9rem; }
  .hero-tagline { font-size: 1.1rem; margin-bottom: 1.25rem; }
  .hero-countdown { font-size: .82rem; margin-bottom: 1.6rem; }

  .split-hosts { padding-top: 1.4rem; gap: 1.9rem; }
  .split-hosts .hb-msu { width: 258px; }
  .split-hosts .hb-mgccc { height: 66px; }

  .detail-card { padding: 1.9rem; }
  .dc-list { gap: .95rem; margin-bottom: 1.5rem; }
  .dc-list li { padding-bottom: .95rem; }
  .dc-list strong { font-size: 1rem; }
}

/* Below 820px there is genuinely no room for a horizontal strip beside the
   logo, so those widths keep the vertical dropdown. Ranged to exclude phones,
   whose own block sets an 82px bar height and must still win. */
@media (min-width: 701px) and (max-width: 819px) {
  .menu-panel {
    top: 98px;
    right: var(--gutter);
    min-width: 220px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    white-space: normal;
    border-radius: var(--radius);
    padding: .5rem;
    transform: translateY(-8px);
  }
  .menu-panel.open { transform: translateY(0); }
  .menu-panel a { padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .95rem; }
  .menu-panel .menu-cta { margin-top: .35rem; }
}

/* 820-1099px: the strip and the logo both step down so they clear each other.
   At full size the strip is ~430px and the logo ~329px, which overruns the bar
   below about 1100px. */
@media (min-width: 820px) and (max-width: 1099px) {
  .topbar-logo img { height: 38px; }

  .menu-panel {
    --menu-clear: 60px;
    gap: .1rem;
    padding: .35rem .4rem;
  }

  .menu-panel a { font-size: .84rem; padding: .48rem .72rem; }
}

/* Venue reflows before the hero does: the map column gets too narrow first. */
@media (max-width: 900px) {
  .venue-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .venue-map, .venue-maplink, .venue-facts { grid-column: 1; grid-row: auto; }
  .venue-map { min-height: 300px; }
}

/* Very small phones (320px class): five links plus the home arrow need a
   final step down or "Register" runs off the edge. */
@media (max-width: 360px) {
  .sectionnav-inner { padding: 0 .5rem; }
  .sn-home { margin-right: .35rem; width: 34px; height: 34px; }
  .sn-links { gap: .72rem; }
  .sn-links a { font-size: .74rem; }
  .sn-home .icon { width: 18px; height: 18px; }
}

/* The split collapses to one column before the nav does. */
@media (max-width: 900px) {
  :root { --gutter: 1.5rem; }

  .split-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 6.5rem var(--gutter) 3rem;
  }

  /* Stacked, the copy plus the detail card are taller than the viewport, so
     the hero grows with its content instead of forcing a full-screen box. */
  #hero { min-height: 0; }
}