/* ============================================================
   BADGER STARTUP SUMMIT 2026 — shared page chrome
   Tokens + components used by the inner pages (home keeps its
   own inline copy until we move to a real build).
   ============================================================ */

:root {
  --primary-50:#f0fbfb; --primary-100:#dbf5f6; --primary-200:#b8eaec; --primary-300:#8cdee1;
  --primary-400:#59cfd3; --primary-500:#29c1c7; --primary-600:#00b5bc; --primary-700:#00949a;
  --primary-800:#00777c; --primary-900:#005a5e; --primary-950:#003e40;
  --secondary-600:#7049ba; --secondary-700:#5c3c99;
  --accent-500:#ed6ca6; --accent-600:#e95095; --accent-700:#bf427a;
  --neutral-50:#fafafa; --neutral-100:#f5f5f5; --neutral-200:#e8e8e8; --neutral-300:#dddddd;
  --neutral-400:#bbbbbb; --neutral-500:#999999; --neutral-600:#666666; --neutral-700:#333333;
  --neutral-800:#222222; --neutral-900:#1a1a1a; --neutral-950:#000000;
  --font-head:"Google Sans", ui-sans-serif, system-ui, sans-serif; /* headings, captions, UI */
  --font-body:"Lora", Georgia, serif;                              /* body copy */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); font-size:1.125rem; line-height:1.75rem; color:var(--neutral-700); background:#fff; }
img { max-width:100%; display:block; }
a { color:var(--primary-600); }
a:hover { color:var(--secondary-600); }

/* Type scale (design-system tokens) */
.h1 { font-size:3.5rem;  line-height:3.9375rem; font-weight:700; font-family:var(--font-head); }
.h2 { font-size:2.25rem; line-height:2.5625rem; font-weight:400; font-family:var(--font-head); }
.h3 { font-size:1.75rem; line-height:2.0625rem; font-weight:400; font-family:var(--font-head); }
.h4 { font-size:1.2rem;  line-height:1.3;       font-weight:600; font-family:var(--font-head); }
.overline { font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-head); }

.container { max-width:1200px; margin:0 auto; padding:0 2rem; }
.container-narrow { max-width:880px; margin:0 auto; padding:0 2rem; }

/* ===== Announcement bar ===== */
.announce { background:var(--primary-600); color:#fff; font-family:var(--font-head); }
.announce-h { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.8rem 2rem; max-width:1400px; margin:0 auto; }
.announce b { font-weight:700; }
.announce span { font-weight:400; opacity:.92; font-size:.9375rem; }
.announce a { color:#fff; font-weight:700; font-size:.9375rem; text-decoration:none; white-space:nowrap; border-bottom:2px solid rgba(255,255,255,.5); padding-bottom:2px; }
.announce a:hover { color:#fff; border-color:#fff; }

/* ===== Nav (solid, inner pages) ===== */
.site-header { background:#fff; border-bottom:1px solid var(--neutral-200); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.1rem 2rem; max-width:1400px; margin:0 auto; }
.nav-logo img { height:48px; width:auto; }
.nav-links { display:flex; gap:1.9rem; list-style:none; }
.nav-links a { color:var(--neutral-700); text-decoration:none; font-size:.9375rem; font-weight:600; letter-spacing:.01em; padding-bottom:4px; border-bottom:2px solid transparent; font-family:var(--font-head); }
.nav-links a:hover { color:var(--primary-700); border-color:var(--primary-300); }
.nav-links a.current { color:var(--primary-700); border-color:var(--primary-600); }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:0; }
.nav-toggle span { display:block; width:26px; height:2.5px; background:var(--neutral-900); }
.btn { display:inline-block; background:var(--primary-600); color:#fff; font-weight:700; font-size:.9375rem; text-decoration:none; padding:.9em 1.7em; border:0; font-family:var(--font-head); }
.btn:hover { background:var(--primary-700); color:#fff; }
.btn-lg { font-size:1.0625rem; padding:1em 2em; }
.btn-ghost-dark { background:transparent; border:2px solid rgba(255,255,255,.55); }
.btn-ghost-dark:hover { background:rgba(255,255,255,.1); border-color:#fff; }

/* ===== Page hero (dark typographic band) ===== */
.page-hero { background:var(--neutral-900); padding:5rem 0 4.5rem; }
.page-hero .overline { color:var(--primary-400); display:block; margin-bottom:1.2rem; }
.page-hero h1 { color:#fff; }
.page-hero .lede { color:var(--neutral-300); font-family:var(--font-body); font-size:1.25rem; line-height:1.7; max-width:56ch; margin-top:1.4rem; }
.page-hero .hero-actions { margin-top:2.2rem; display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.page-hero .meta-row { display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--neutral-800); }
.page-hero .meta b { display:block; color:var(--primary-400); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-head); margin-bottom:.3rem; }
.page-hero .meta span { color:#fff; font-family:var(--font-head); font-weight:600; font-size:1.0625rem; }

/* ===== Sections ===== */
.section { padding:5.5rem 0; }
.section-alt { background:var(--neutral-100); }
.section-head { margin-bottom:2.6rem; }
.section-head .overline { color:var(--primary-700); display:block; margin-bottom:1rem; }
.section-head h2 { color:var(--neutral-900); }
.section-head .note { color:var(--neutral-500); font-size:1rem; margin-top:.8rem; max-width:64ch; }

.arrow-link { font-weight:700; font-size:1rem; text-decoration:none; color:var(--neutral-900); border-bottom:2px solid var(--primary-600); padding-bottom:3px; font-family:var(--font-head); }
.arrow-link:hover { color:var(--primary-700); }
.arrow-link::after { content:" →"; color:var(--primary-600); }

/* ===== TBD / placeholder treatment =====
   Deliberate visual: organizers should SEE what's missing. */
.tbd { border:2px dashed var(--neutral-300); background:var(--neutral-50); padding:1.4rem 1.6rem; color:var(--neutral-500); font-family:var(--font-head); font-size:.9375rem; line-height:1.55; }
.tbd b { color:var(--accent-700); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; display:block; margin-bottom:.35rem; }
.tbd-chip { display:inline-block; border:1.5px dashed var(--neutral-400); color:var(--neutral-500); font-family:var(--font-head); font-weight:600; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; padding:.3em .8em; vertical-align:middle; }

/* ===== Schedule table ===== */
.schedule { width:100%; border-collapse:collapse; border-top:4px solid var(--neutral-900); }
.schedule tr { border-bottom:1px solid var(--neutral-200); }
.schedule tr:hover { background:var(--neutral-50); }
.schedule td { padding:1.3rem 1rem 1.3rem 0; vertical-align:top; }
.schedule .time { white-space:nowrap; font-family:var(--font-head); font-weight:700; color:var(--neutral-900); font-size:1rem; width:190px; }
.schedule .what { font-family:var(--font-head); font-weight:600; color:var(--neutral-900); font-size:1.0625rem; width:280px; }
.schedule .what .tag { display:block; margin-top:.35rem; }
.schedule .detail { color:var(--neutral-600); font-size:1rem; line-height:1.6; }
.schedule .detail a { font-family:var(--font-head); font-weight:600; font-size:.9375rem; }

/* ===== Cards ===== */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.card { background:#fff; border-top:4px solid var(--neutral-900); display:flex; flex-direction:column; text-decoration:none; transition:border-color .18s ease; }
a.card:hover { border-top-color:var(--primary-600); }
.card-img { aspect-ratio:3/2; background-size:cover; background-position:center; }
.card-body { padding:1.6rem 0 0; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card .overline { color:var(--accent-700); }
.card h3 { color:var(--neutral-900); font-weight:600; font-size:1.4rem; line-height:1.25; font-family:var(--font-head); }
.card p { color:var(--neutral-600); font-size:1rem; line-height:1.6; flex:1; }
.card .arrow-link { align-self:flex-start; margin-top:.6rem; }

/* ===== People (speakers) ===== */
.people-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem; }
.person { border-top:4px solid var(--neutral-900); }
.person-photo { aspect-ratio:1/1; background-size:cover; background-position:center top; filter:grayscale(0); }
.person-photo.placeholder { background:var(--neutral-200) url('img/badger-startup-summit-grey.svg') center / 30% no-repeat; }
.person-body { padding:1.4rem 0 0; }
.person .overline { color:var(--primary-700); display:block; margin-bottom:.5rem; }
.person h3 { color:var(--neutral-900); font-weight:600; font-size:1.4rem; line-height:1.25; font-family:var(--font-head); }
.person .role { font-family:var(--font-head); font-weight:600; color:var(--neutral-500); font-size:.9375rem; margin-top:.25rem; }
.person p { color:var(--neutral-600); font-size:1rem; line-height:1.65; margin-top:.9rem; }

/* ===== Form embed slot =====
   Placeholder until the Google Form URL lands; then swap the inner
   content for: <iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" ...> */
.form-slot { border:2px dashed var(--neutral-300); background:var(--neutral-50); min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; text-align:center; padding:2.5rem 2rem; }
.form-slot b { color:var(--accent-700); font-family:var(--font-head); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.75rem; }
.form-slot p { color:var(--neutral-500); font-family:var(--font-head); font-size:1rem; max-width:44ch; }
.form-embed iframe { width:100%; border:0; min-height:900px; }

/* ===== CTA band ===== */
.cta-band { background:var(--neutral-900); padding:5rem 0; }
.cta-band .statement { color:#fff; font-family:var(--font-head); font-size:2.25rem; line-height:1.25; font-weight:300; max-width:26ch; }
.cta-band .statement em { font-style:normal; font-weight:700; color:var(--primary-600); }
.cta-band .statement .accent { font-style:normal; font-weight:700; color:var(--accent-600); }
.cta-band .hero-actions, .cta-band .actions { margin-top:2.2rem; display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }

/* ===== Footer ===== */
footer { background:var(--neutral-950); color:var(--neutral-400); padding:4.5rem 0 2.5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; align-items:start; }
.footer-logo img { height:64px; width:auto; margin-bottom:1.4rem; }
.footer-tag { font-size:.9375rem; line-height:1.6; max-width:34ch; }
footer h4 { color:#fff; font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1rem; font-family:var(--font-head); }
footer ul { list-style:none; }
footer li { margin-bottom:.6rem; }
footer a { color:var(--neutral-400); text-decoration:none; font-size:.9375rem; font-family:var(--font-head); }
footer a:hover { color:var(--primary-400); }
.footer-bottom { border-top:1px solid var(--neutral-800); margin-top:3.5rem; padding-top:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8125rem; color:var(--neutral-600); font-family:var(--font-head); }

/* ===== Mobile menu (left slide-in drawer, hamburger top right) ===== */
.menu-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .28s ease; }
.menu-backdrop.show { opacity:1; pointer-events:auto; }
.mobile-menu { position:fixed; top:0; left:0; bottom:0; z-index:101; width:min(320px, 86vw); background:var(--neutral-950); padding:4.5rem 2rem 2.5rem; overflow-y:auto; transform:translateX(-100%); transition:transform .28s ease; }
.mobile-menu.open { transform:translateX(0); }
.mobile-menu nav { display:flex; flex-direction:column; gap:1.4rem; }
.mobile-menu nav a { color:#fff; font-family:var(--font-head); font-weight:600; font-size:1.3rem; text-decoration:none; }
.mobile-menu nav a:hover, .mobile-menu nav a.current { color:var(--primary-400); }
.mobile-menu nav .btn { color:#fff; font-size:1rem; margin-top:1.2rem; align-self:flex-start; }
.menu-close { position:absolute; top:1rem; right:1rem; background:none; border:0; color:#fff; font-size:2rem; line-height:1; cursor:pointer; font-family:var(--font-head); padding:.4rem; }
.menu-close:hover { color:var(--primary-400); }

@media (max-width: 768px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .nav-right .btn { display:none; }
  .nav-logo img { height:40px; }
  .h1 { font-size:2.5rem; line-height:1.15; }
  .h2 { font-size:1.75rem; line-height:1.25; }
  .card-grid, .card-grid-2, .people-grid, .footer-grid { grid-template-columns:1fr; }
  .schedule .what { width:auto; }
  .schedule td { display:block; padding:.4rem 0; }
  .schedule tr { display:block; padding:1rem 0; }
}