/* ==========================================================================
   uconnquantum.org - UConn Quantum Computing

   Root site. Each event lives in its own folder with its own stylesheet, so
   one event can never break another. That means a little duplication here by
   design: this file and qiskit-fall-fest-2026/styles.css share the token block
   but are otherwise independent.
   ========================================================================== */

/* Navy and white only, taken from UConn's own brand (brand.uconn.edu):
   Navy #000E2F is the primary institutional color and is the ink here.
   "Husky Eyes" #A4C8E1 from the secondary palette frames the partner strip.

   There is no accent hue. Buttons, headline emphasis and every interactive
   state use the ink itself, inverting to white on navy where they need to
   stand out, so links stay legible by their underline rather than by color.
   The register band is permanently navy, so anything sitting on it inverts
   explicitly instead of inheriting the accent, which would vanish.
   Solid fills throughout. No gradients. */
:root {
  --bg:         #ffffff;
  --layer:      #f2f5f9;
  --layer-2:    #e4eaf2;
  --ink:        #000e2f;
  --ink-2:      #3f4a61;
  --ink-3:      #63708a;
  --rule:       #d9dfe9;
  --rule-2:     #aeb8c9;
  --sky:        #a4c8e1;

  --accent:     #000e2f;
  --accent-br:  #1f2f52;
  --accent-bg:  #eef1f7;
  --on-accent:  #ffffff;

  --band-bg:    #000e2f;
  --band-ink:   #ffffff;
  --band-mute:  #9fabc4;

  --maxw: 1240px;
  --gut: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #000e2f;
    --layer:      #0a1a3f;
    --layer-2:    #15274f;
    --ink:        #eaf0fa;
    --ink-2:      #aebbd2;
    --ink-3:      #8494b0;
    --rule:       #1e3059;
    --rule-2:     #33477a;
    --sky:        #4d7ba3;

    --accent:     #eaf0fa;
    --accent-br:  #ffffff;
    --accent-bg:  #16243f;
    --on-accent:  #000e2f;

    --band-bg:    #0a1a3f;
    --band-ink:   #ffffff;
    --band-mute:  #9fabc4;
  }
}

:root[data-theme="dark"] {
  --bg:     #000e2f;
  --layer:    #0a1a3f;
  --layer-2:  #15274f;
  --ink:    #eaf0fa;
  --ink-2:    #aebbd2;
  --ink-3:    #8494b0;
  --rule:     #1e3059;
  --rule-2:   #33477a;
  --sky:    #4d7ba3;

  --accent:   #eaf0fa;
  --accent-br:  #ffffff;
  --accent-bg:  #16243f;
  --on-accent:  #000e2f;

  --band-bg:  #0a1a3f;
  --band-ink:   #ffffff;
  --band-mute:  #9fabc4;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

.nav { border-bottom: 1px solid var(--rule); }
.nav-in { max-width: 1000px; margin: 0 auto; padding: 0 24px; height: 76px; display: flex; align-items: center; }
.nav-logo { height: 50px; width: 135px; color: var(--ink); }

.hero { padding: 84px 0 72px; border-bottom: 1px solid var(--rule); }
.hero h1 { font-size: clamp(36px, 6vw, 62px); letter-spacing: -0.035em; }
.hero p { font-size: 19px; color: var(--ink-2); margin-top: 22px; max-width: 56ch; }

.links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.clink {
  border: 1px solid var(--rule-2); padding: 16px 22px; min-width: 208px;
  text-decoration: none; display: flex; align-items: center; gap: 14px;
  transition: border-color .2s, background .2s;
}
.clink > span { display: flex; flex-direction: column; gap: 3px; }
.clink-ic { width: 22px; height: 22px; flex: none; color: var(--ink-3); transition: color .2s; }
.clink:hover .clink-ic { color: var(--accent); }
.clink-join .clink-ic { color: var(--accent); }
.clink:hover { border-color: var(--accent); background: var(--accent-bg); }
.clink b { font-size: 16px; font-weight: 600; color: var(--ink); }
.clink small { font-size: 13.5px; color: var(--ink-3); }
.clink-join { border-color: var(--accent); }
.clink-join b { color: var(--accent); }

.section { padding: 72px 0; }
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

.event {
  display: block; text-decoration: none; margin-top: 24px;
  border: 1px solid var(--rule-2); padding: 34px 32px;
  transition: border-color .2s, background .2s;
}
.event:hover { border-color: var(--accent); background: var(--accent-bg); }
.event .when {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.event h2 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 12px; color: var(--ink); }
.event p { color: var(--ink-2); margin-top: 14px; max-width: 60ch; }
.event .go { font-weight: 600; color: var(--accent); margin-top: 20px; display: block; }

footer { border-top: 1px solid var(--rule); padding: 40px 0; font-size: 13.5px; color: var(--ink-3); }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 640px) { .hero { padding: 52px 0 44px; } .section { padding: 48px 0; } }