/* ==========================================================================
   YPO Iowa Innovation Challenge 2027
   Design language derived from the approved Save the Date artwork
   (Susan Hatten concept, refined by John Jackovin, delivered 2026-05-11)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground — measured from the Save the Date PNG */
  --ink:            #0B1018;
  --ink-raised:     #0F151F;
  --ink-deep:       #070A0F;

  /* Accent */
  --gold:           #D59D22;
  --gold-bright:    #F0B93A;
  --gold-dim:       rgba(213, 157, 34, 0.28);

  /* Type */
  --cream:          #F2EFE9;
  --muted:          #8A93A1;
  --muted-dim:      #5C6572;

  /* Structure */
  --rule:           rgba(242, 239, 233, 0.10);
  --rule-strong:    rgba(242, 239, 233, 0.18);
  --grid:           rgba(242, 239, 233, 0.018);

  /* Typography */
  --font-display:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Rhythm */
  --gutter:         clamp(1.25rem, 4vw, 4rem);
  --section-y:      clamp(4rem, 9vw, 8rem);
  --maxw:           1360px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* NOTE — the terminal grid overlay was removed 2026-08-19.
   It was a 1px repeating-linear-gradient at ~2% white. Invisible on screen,
   but browsers render 1px vector rules crisply when exporting to PDF, so it
   turned into hard lines across the whole document. Any opacity low enough
   to export cleanly was too low to see on screen, so it earned nothing.
   The terminal character comes from the mono type, corner brackets, prompt
   and log panel instead. To restore it, add background-image below and set
   --grid back to rgba(242,239,233,0.028) — but expect it in PDF exports. */
body {
  margin: 0;
  background-color: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. Shared primitives
   -------------------------------------------------------------------------- */

/* Small mono label:  › SECTION NAME */
.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1.5rem;
}
.label::before { content: '›'; color: var(--gold); }

.label-index {
  margin-left: auto;
  color: var(--gold);
  letter-spacing: 0.1em;
}

/* Section heading */
.h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(242, 239, 233, 0.78);
  max-width: 62ch;
  margin: 0 0 2rem;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Panel — the ./EVENT.LOG bordered box treatment */
.panel {
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(242,239,233,0.022), transparent);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}

/* Gold corner brackets */
.brackets::before, .brackets::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.brackets::before { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.brackets::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.75rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--gold); color: var(--ink); }
.btn--solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn--ghost { border-color: var(--rule-strong); color: var(--cream); }
.btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn[aria-disabled='true'] {
  border-color: var(--rule-strong);
  color: var(--muted-dim);
  pointer-events: none;
}

/* Sector chip */
.chip {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  padding: 0.625rem 1rem;
  border: 1px solid var(--rule-strong);
  color: rgba(242,239,233,0.86);
  white-space: nowrap;
}
.chip .hash { color: var(--gold); }

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 16, 24, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}
.dots { display: flex; gap: 6px; flex-shrink: 0; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-dim); display: block; }
.dots i:last-child { background: var(--gold); }

.brand { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; text-decoration: none; }
/* Susan, Apr 24: "make the YPO logo larger and more prominent" */
.brand img { height: 38px; width: auto; }
.brand span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cream);
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule-strong);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .16s ease;
}
.nav a:hover { color: var(--gold); }
.nav .btn { padding: 0.7rem 1.15rem; font-size: 0.6875rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* Gold glow + triangle field, upper right — echoes the Save the Date.
   Softness comes from element-level opacity, not from alpha stops inside the
   gradient. PDF exporters flatten gradient alpha and turn a soft glow into a
   solid gold disc; element opacity survives that flattening intact. */
.hero__glow {
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 62% 38%, var(--gold) 0%, transparent 62%);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.hero__tri {
  position: absolute;
  top: -6%;
  right: -4%;
  width: min(58vw, 760px);
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding-bottom: 1.25rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.hero__meta .rec { color: var(--gold); display: inline-flex; align-items: center; gap: 0.45em; }
.hero__meta .rec::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

.prompt {
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 1.4vw, 1rem);
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 1rem;
}
.prompt .user { color: var(--muted); }
.prompt .cmd  { color: var(--gold); }
.prompt .arg  { color: var(--cream); }
.caret {
  display: inline-block;
  width: 0.6em; height: 1.05em;
  background: var(--gold);
  vertical-align: -0.18em;
  margin-left: 0.3em;
  animation: caret 1.05s step-end infinite;
}
@keyframes caret { 0%,100%{opacity:1} 50%{opacity:0} }

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 82%;
  font-size: clamp(3.5rem, 13vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
}
.hero__title .underscore {
  display: block;
  width: clamp(3.5rem, 8vw, 7rem);
  height: clamp(0.5rem, 1.1vw, 0.9rem);
  background: var(--gold);
  margin-top: clamp(0.75rem, 1.6vw, 1.4rem);
}

.hero__tagline {
  font-size: clamp(1.0625rem, 2.1vw, 1.5rem);
  line-height: 1.5;
  max-width: 44ch;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  color: rgba(242,239,233,0.9);
}
.hero__tagline::before {
  content: '// ';
  color: var(--gold);
  font-family: var(--font-mono);
  font-weight: 700;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }

.hero__note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   6. Vitals strip — DATE / TIME / VENUE
   -------------------------------------------------------------------------- */
.vitals {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.vitals__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.vitals__cell {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2.5vw, 2rem);
  border-right: 1px solid var(--rule);
}
.vitals__cell:first-child { padding-left: 0; }
.vitals__cell:last-child { border-right: 0; padding-right: 0; }

.vitals__value {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3.1vw, 2.35rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
}
.vitals__sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0.6rem 0 0;
}

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: linear-gradient(180deg, var(--ink-deep), var(--ink)); }

.section__head { max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Event log panel */
.log { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 2; }
.log__head {
  display: flex;
  justify-content: space-between;
  color: var(--muted-dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  margin-bottom: 1.25rem;
}
/* columns flow top-to-bottom then wrap, so DOM order stays sequential */
.log__lines { column-count: 2; column-gap: 3rem; }
@media (max-width: 760px) { .log__lines { column-count: 1; } }
.log__line { color: rgba(242,239,233,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; break-inside: avoid; }
.log__t { color: var(--muted-dim); margin-right: 0.75em; }
.log__ok { color: var(--gold); }

/* Track cards */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.track { padding: clamp(1.75rem, 3vw, 2.5rem); }
.track__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 1rem;
}
.track__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  font-stretch: 88%;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 1rem;
}
.track__body { color: rgba(242,239,233,0.74); font-size: 0.9375rem; margin: 0 0 1.5rem; }
.track__list { list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; }
.track__list li { padding: 0.5rem 0; border-top: 1px solid var(--rule); display: flex; gap: 0.75em; color: rgba(242,239,233,0.8); }
.track__list li::before { content: '▸'; color: var(--gold); }

/* Chips row */
.chips { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Why participate — three benefit cards */
.whys { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.why { padding: clamp(1.75rem, 3vw, 2.25rem); }
.why__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 1rem;
}
.why__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  font-stretch: 90%;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 0.85rem;
}
.why__body { color: rgba(242,239,233,0.74); font-size: 0.9375rem; margin: 0; }

/* Agenda */
.agenda { border-top: 1px solid var(--rule); }
.agenda__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.agenda__time {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.agenda__what { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.agenda__detail { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--muted); }
.agenda__dur {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Speakers */
.speakers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.speaker { padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; }
.speaker__photo {
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(135deg, rgba(242,239,233,0.03) 0 10px, transparent 10px 20px),
    var(--ink-raised);
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--muted-dim);
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.speaker__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 90%;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 0.4rem;
}
.speaker__role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: 0 0 1rem;
}
.speaker__bio { font-size: 0.875rem; line-height: 1.6; color: rgba(242,239,233,0.72); margin: 0; }
.speaker__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

/* Prizes */
.prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.prize { padding: clamp(1.75rem, 3vw, 2.5rem); }
.prize__track {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
}
.prize__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.prize__place { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.prize__amt { font-family: var(--font-mono); font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 700; color: var(--cream); }
.prize__total { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dim); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.timeline li:first-child { border-top: 1px solid var(--rule); }
.timeline__when { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; color: var(--gold); letter-spacing: 0.02em; }
.timeline__what { margin: 0; font-size: 1rem; }
.timeline__note { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.3rem; }

/* Sponsors */
.sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.sponsor {
  background: var(--ink);
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  min-height: 140px;
}
.sponsor__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(242,239,233,0.9);
  margin: 0;
}
.sponsor__slot { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; color: var(--muted-dim); text-transform: uppercase; margin: 0.6rem 0 0; }

/* Technology sponsor — in-kind tier, set apart from the cash prize sponsors.
   Single full-width cell with a gold-tinted edge so it reads as a distinct
   category rather than a fifth name in the same row. */
.label--spaced { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.label--center { justify-content: center; }

/* Sized to roughly two cells of the four-across prize grid, centred.
   Not a grid itself — a single centred box. clamp() keeps it two-cells-wide
   on desktop, stops it going thinner than 320px, and the width:100% lets a
   narrow phone shrink it below that floor rather than overflow. */
.sponsors--tech {
  display: block;
  width: 100%;
  max-width: clamp(320px, 50%, 620px);
  margin-inline: auto;
  gap: 0;
  background: transparent;
  border: 1px solid var(--gold-dim);
}
.sponsor--tech {
  min-height: 0;
  padding: clamp(1.5rem, 2.8vw, 2rem) 1.5rem;
}
.sponsor--tech .sponsor__name { font-size: 1.1875rem; color: var(--cream); }
.sponsor__desc {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0.65rem 0 0;
}

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  text-align: left;
  padding: clamp(1.1rem, 2vw, 1.5rem) 2.5rem clamp(1.1rem, 2vw, 1.5rem) 0;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
}
.faq__q::after {
  content: '+';
  position: absolute;
  right: 0.25rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--gold);
  transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { content: '−'; }
.faq__a { padding: 0 2.5rem 1.5rem 0; margin: 0; color: rgba(242,239,233,0.74); font-size: 0.9375rem; max-width: 72ch; }
.faq__item summary { list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }

/* CTA band */
.cta-band { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, rgba(213,157,34,0.05), transparent); }
.cta-band__inner { padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.cta-band .h2 { margin-inline: auto; }
.cta-band .lede { margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Email capture — requested by Susan, Aug 17 */
.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.signup__input {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--ink-raised);
  border: 1px solid var(--rule-strong);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 1rem 1.15rem;
}
.signup__input::placeholder { color: var(--muted-dim); }
.signup__input:focus { outline: none; border-color: var(--gold); }
.signup .btn { flex: 0 0 auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Footer */
.footer { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; margin-bottom: 3rem; }
.footer__h {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; color: rgba(242,239,233,0.74); }
.footer__list li { margin-bottom: 0.6rem; }
.footer__list a { color: rgba(242,239,233,0.74); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.footer__list a:hover { color: var(--gold); border-color: var(--gold); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.footer__bar img { height: 18px; opacity: 0.75; }
.footer__status { margin-left: auto; color: var(--gold); display: inline-flex; align-items: center; gap: 0.5em; }
.footer__status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--ink-raised);
    border-bottom: 1px solid var(--rule);
    padding: 1rem var(--gutter) 1.5rem;
  }
  .nav.is-open a { padding: 0.85rem 0; width: 100%; border-bottom: 1px solid var(--rule); }
  .nav.is-open .btn { margin-top: 1rem; border-bottom: 1px solid var(--gold); }
  .nav-toggle { display: block; }

  .vitals__grid { grid-template-columns: 1fr; }
  .vitals__cell { border-right: 0; border-bottom: 1px solid var(--rule); padding-inline: 0; }
  .vitals__cell:last-child { border-bottom: 0; }

  .agenda__row { grid-template-columns: 90px 1fr; }
  .agenda__dur { grid-column: 2; }
  .timeline li { grid-template-columns: 1fr; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Focus visibility */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   10. Print / PDF
   The page is a dark full-bleed design, so printing it "as a document" makes
   it unreadable — browsers drop background colours by default and you end up
   with cream text on white paper. We keep the design instead and force colour
   output. In Chrome/Safari the user must still tick "Background graphics" in
   the print dialog; print-color-adjust handles the rest.
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: 8.5in 11in;
    margin: 0.4in;
  }

  /* Shorthand deliberately drops the grid background-image — it muddies print */
  html, body {
    background: var(--ink) !important;
    color: var(--cream) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Chrome / on-screen furniture that has no business on paper */
  .nav,
  .nav-toggle,
  .hero__glow,
  .hero__tri { display: none !important; }

  .topbar { position: static; border-bottom: 1px solid var(--rule); }

  /* clamp() with vw units resolves badly in paged media — pin real sizes.
     These overrides only affect print; the screen scale is untouched. */
  .section { padding-block: 0.34in; }
  .hero { padding-block: 0.25in 0.35in; }
  .section__head { margin-bottom: 0.22in; }

  body            { font-size: 10pt; }
  .hero__title    { font-size: 62pt; line-height: 0.86; }
  .hero__tagline  { font-size: 13pt; }
  .h2             { font-size: 25pt; }
  .lede           { font-size: 10.5pt; margin-bottom: 0.18in; }
  .vitals__value  { font-size: 17pt; }
  .vitals__cell   { padding-block: 0.2in; }
  .track          { padding: 0.24in; }
  .track__title   { font-size: 17pt; }
  .track__body    { font-size: 10pt; }
  .speaker        { padding: 0.2in; }
  .speaker__name  { font-size: 15pt; }
  .speaker__bio   { font-size: 9pt; }
  .prize          { padding: 0.24in; }
  .prize__amt     { font-size: 19pt; }
  .agenda__what   { font-size: 11pt; }
  .panel          { padding: 0.24in; }
  .cta-band__inner{ padding-block: 0.4in; }
  .footer__grid   { margin-bottom: 0.3in; }

  /* Log lines truncate at narrow widths on screen; on paper let them breathe */
  .log            { font-size: 8.5pt; line-height: 1.85; }
  .log__line      { white-space: normal; overflow: visible; text-overflow: clip; }

  /* Speaker photo placeholders waste a lot of paper at 1:1 */
  .speaker__photo { aspect-ratio: auto; height: 0.75in; margin-bottom: 0.14in; }

  /* Keep related content together, but do not orphan headings onto blank
     pages — break-after:avoid on the section head was leaving half-empty
     sheets. Widows/orphans handle it more gracefully. */
  .track,
  .speaker,
  .prize,
  .sponsor,
  .agenda__row,
  .timeline li,
  .faq__item { break-inside: avoid; page-break-inside: avoid; }

  p, li { orphans: 2; widows: 2; }
  .section, .panel { break-inside: auto; }

  /* Force the FAQ open — a collapsed accordion prints as a list of questions */
  .faq__item { display: block; }
  .faq__item > .faq__a { display: block !important; }
  .faq__q::after { content: ''; }

  /* Links: show destinations for anything off-page */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-family: var(--font-mono);
    font-size: 7pt;
    color: var(--muted);
    word-break: break-all;
  }
  .btn[href^="http"]::after,
  .brand[href]::after { content: ''; }

  /* Editorial flags stay visible in the PDF — that is the point of a review copy */
  .footer { padding-block: 0.4in 0.25in; }
}

/* Sectors block — replaces an inline style so the markup stays lint-clean. */
.sectors { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* --------------------------------------------------------------------------
   Real speaker photos + linked sponsors (added 2026-08-26)
   .speaker__photo was authored as an empty placeholder box; these rules take
   over when it is an actual <img>. Kept separate rather than rewritten so the
   placeholder styling still works for speakers whose photo hasn't arrived.
   -------------------------------------------------------------------------- */
img.speaker__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--ink-raised);
  padding: 0;
  filter: grayscale(1) contrast(1.04);
  transition: filter .45s ease;
}
.speaker:hover img.speaker__photo { filter: grayscale(0) contrast(1); }

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

/* Sponsor cells are anchors now. */
a.sponsor { text-decoration: none; color: inherit; transition: background .2s ease; }
a.sponsor:hover,
a.sponsor:focus-visible { background: var(--ink-raised); }
a.sponsor:hover .sponsor__name,
a.sponsor:focus-visible .sponsor__name { color: var(--gold); }

.sponsor__place {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--muted-dim);
  text-transform: uppercase;
  margin: 0.6rem 0 0;
}

@media print {
  img.speaker__photo { filter: grayscale(1); height: 1.1in; width: 1.1in; }
}

/* --------------------------------------------------------------------------
   Grouped Featuring rows (added 2026-08-26)
   Five confirmed speakers do not divide evenly into the four columns the base
   .speakers grid produces at desktop, which left one card orphaned on its own
   row. The grouped variant raises the track floor to 300px, which yields three
   columns, so Morning Panel fills row one exactly and Lunch & Host takes row
   two. Still collapses to two columns and then one on narrower viewports with
   no media query. Cards whose headshot has not arrived keep the original
   div.speaker__photo placeholder box rather than an img.
   -------------------------------------------------------------------------- */
.speakers--grouped { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.speakers__group {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.speakers__group ~ .speakers__group { margin-top: clamp(1rem, 2vw, 1.75rem); }

/* --------------------------------------------------------------------------
   Nav solid-button contrast fix (added 2026-08-26)
   `.nav a` sets the muted silver used by the plain nav links, and at (0,1,1)
   it outranks `.btn--solid`'s (0,1,0) ink colour. The gold Application Portal
   button was therefore rendering silver-on-gold at 1.28:1, against 7.88:1 for
   every other gold button on the page. Re-assert ink at (0,2,0), including on
   hover so the colour does not shift.
   -------------------------------------------------------------------------- */
.nav .btn--solid,
.nav .btn--solid:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Centred second Featuring row + sponsor name emphasis (added 2026-08-26)

   The Lunch & Host pair is wrapped in .speakers__row so it can centre under the
   three-card morning panel instead of sitting left-aligned with an empty third
   column. The parent grid resolves to three tracks from roughly 1035px up
   (3x300 floor + 2 gaps against the --maxw 1360 container), so above 1040px the
   pair is pinned to exactly one third of the row and centred, matching the row
   above. Below that it falls back to a plain wrapping flex row so the cards
   grow to full width on narrow screens exactly as the grid children do.

   .sponsor__name is set at (0,1,0) deliberately: the existing
   .sponsor--tech .sponsor__name rule is (0,2,0) and keeps Shift cream, so the
   four prize sponsors go gold and the technology tier stays white.
   -------------------------------------------------------------------------- */
.speakers__row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.speakers__row > .speaker { flex: 1 1 300px; }

@media (min-width: 1040px) {
  .speakers__row > .speaker {
    flex: 0 1 calc((100% - 2 * clamp(1.25rem, 2.5vw, 2rem)) / 3);
  }
}

.sponsor__name { font-weight: 700; color: var(--gold); }

/* Sponsor boxes use the card language (added 2026-08-26).
   Both sponsor frames are a thin white rule with the gold bracket corners the
   speaker and prize cards use. The prize block keeps its original 1px rule
   border and 1px dividers from the base .sponsors rule; it only needs
   position: relative so .brackets can hang its corner marks. Gold is left
   doing two jobs in this section, the sponsor names and the corner marks,
   rather than framing anything. */
.sponsors { position: relative; }

/* Technology tier frame matches the card language (added 2026-08-26).
   Thin white rule plus the same gold bracket corners the speaker and prize
   cards use, instead of its own gold-dim box. .brackets positions its corner
   marks absolutely, so the frame needs position: relative to hang them on.
   Reads as clearly subordinate to the 2px cream prize-sponsor box above while
   belonging to the same visual family. */
.sponsors--tech {
  position: relative;
  border: 1px solid var(--rule);
  background: transparent;
}

/* Corners belong to the individual sponsor cards (added 2026-08-26).
   .brackets hangs its marks off a positioned ancestor, so each cell needs
   position: relative. The wrapper no longer carries brackets of its own: its
   corners sat within a pixel of the first and last card's, which read as
   doubled rather than deliberate. */
.sponsor { position: relative; }

/* Prize cards carry a thin gold rule (added 2026-08-26).
   They lost their bracket corners with the rest of the explanatory panels, so
   the gold moves into the border instead: same 1px weight as every other
   panel, gold rather than the near-invisible white rule, which marks the two
   money cards without bringing the corner motif back. */
.prize { border-color: var(--gold); }

/* Technology tier name: light grey, matched to the sponsor name size
   (added 2026-08-26). It was set 2px larger than the four prize sponsors
   (1.1875rem against 1.0625rem), which read as more prominent than the tier
   above it. Same size now, in the muted grey, so the tier reads as
   subordinate on both size and colour rather than contradicting itself. */
.sponsor--tech .sponsor__name { font-size: 1.0625rem; color: var(--muted); }

/* Prize Sponsor tier label (added 2026-08-26).
   Set as small caps in the mono face like every other small label on the page
   (.label, .sponsor__place, .speakers__group) rather than sentence case, which
   would be the only lowercase micro-label on the site. Cream and bold puts it
   between the gold company name and the dimmed city: three steps of hierarchy
   on the card. The city's top margin tightens when the label precedes it so
   the pair reads as one block rather than two stacked lines. */
.sponsor__tier {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0.7rem 0 0;
}
.sponsor__tier + .sponsor__place { margin-top: 0.3rem; }

/* --------------------------------------------------------------------------
   Mobile nav reachability (added 2026-08-26)
   .topbar__inner is a flex row with a 1.5rem gap in which .dots and .brand are
   both flex-shrink: 0, so the brand's 38px logo plus its "Innovation Challenge"
   label could not compress and pushed .nav-toggle (margin-left: auto) past the
   right edge: at 375px the button rendered at x 400-463, entirely off-screen,
   leaving phone visitors unable to open the nav at all. The only topbar
   breakpoint was 900px and it merely revealed the button. Dropping the wordmark
   below 420px frees the ~163px needed; the logo still links home and the page
   title is already in the hero.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .brand span { display: none; }
}

/* --------------------------------------------------------------------------
   Prize sponsor logo strip (added 2026-08-26)
   The supplied marks are dark-on-light and cannot sit on the near-black card:
   WCI navy measures 1.26:1 against the card and Grace's black 1.10:1, both
   effectively invisible. They therefore live on their own light band below the
   grid, which leaves the four cards and their gold names untouched.

   The band is #FEFEFE rather than pure white on purpose: the Holmes Murphy file
   is a JPEG with no alpha whose background samples at 254,254,254, so a #FFFFFF
   band would render it as a faint visible rectangle. Matching the band to the
   file hides the seam. Replace that logo with an SVG or a transparent PNG and
   the band can go pure white.

   Every supplied file was trimmed to its ink bounds first. Holmes Murphy's
   arrived with 76% of the frame as padding, which made it read far smaller than
   the rest at a shared height; trimmed, all four sit between 5.3:1 and 6.5:1 and
   normalise cleanly on height alone.
   -------------------------------------------------------------------------- */
.sponsor-logos {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  background: #FEFEFE;
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}
.sponsor-logos__mark {
  height: clamp(22px, 2.6vw, 30px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}