/* ============================================================================
   Quant Competitions — futuristic house style
   Graphite void + steel + AIC crimson (#ae1f19).

   Loaded from <head> on every page, after the Shopify theme sheets but before
   the per-page inline <style> blocks, so selectors here carry one extra
   qualifier (usually `body`) to win the cascade against those inline rules
   without resorting to !important on everything.
   ========================================================================== */

:root {
  /* ground */
  --qc-void:      #080405;   /* page base */
  --qc-void-2:    #0d0709;   /* section band */
  --qc-surface:   #150b0d;   /* raised panel */
  --qc-line:      rgba(226, 156, 148, 0.16);
  --qc-line-soft: rgba(226, 156, 148, 0.08);

  /* brand */
  --qc-brand:     #ae1f19;   /* AIC crimson — solid fills, bars, glow cores */
  --qc-brand-lit: #e8392c;   /* the same red, lifted for legible text on dark */
  --qc-ember:     #ff9a86;   /* warm highlight */

  /* neutrals */
  --qc-steel:     #8ea3bd;   /* cool secondary: eyebrows, data, hairlines */
  --qc-ink:       #f5edeb;
  --qc-muted:     #a89693;

  --qc-mono: "Chivo Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ---------------------------------------------------------------- ground -- */

html,
body {
  background-color: var(--qc-void);
}

/* The Shopify colour schemes paint white behind every unstyled band. Repoint
   them at the void so section gaps and the footer stay in the dark. */
body,
body .color-scheme-1,
body .color-scheme-2,
body .color-scheme-3,
body .color-scheme-4,
body .color-scheme-5 {
  --color-background: 8, 4, 5;
  --gradient-background: var(--qc-void);
  --color-foreground: 245, 237, 235;
  background-color: var(--qc-void);
  color: var(--qc-ink);
}

::selection { background: var(--qc-brand); color: #fff; }

/* Fine film grain over the whole page. Large flat fields of near-black band
   badly on cheap panels; a little noise breaks the gradient up and gives the
   dark ground some material to it. Pointer-events off, so it sits above
   everything visually and blocks nothing. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ chrome bits -- */

html { scroll-behavior: smooth; }

* { scrollbar-color: rgba(174, 31, 25, 0.7) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--qc-void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--qc-brand-lit), var(--qc-brand));
  border: 3px solid var(--qc-void);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--qc-brand-lit); }

:focus-visible {
  outline: 2px solid var(--qc-brand-lit);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------- card spotlight -- */

/* qc-fx.js publishes the pointer position on the hovered card as --mx/--my.
   The glow is a child pseudo-element rather than a background on the card, so
   it composites over the card's own gradient without replacing it. */
body .orgs-section__card,
body .about-row,
body .ev-recap,
body .ev-card,
body .qc-team-card { position: relative; isolation: isolate; }

body .orgs-section__card::after,
body .about-row::after,
body .ev-recap::after,
body .ev-card::after,
body .qc-team-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 57, 44, 0.16),
    transparent 68%
  );
}
body .orgs-section__card:hover::after,
body .about-row:hover::after,
body .ev-recap:hover::after,
body .ev-card:hover::after,
body .qc-team-card:hover::after { opacity: 1; }

/* --------------------------------------------------------------- headings -- */

/* A trace of crimson bloom behind the big display type — reads as emitted light
   rather than printed ink, which is most of the futuristic feel. */
body .ev-title,
body .ev-section-title,
body .about-intro__title,
body .qc-team-section__title,
body .certifications-page__title {
  text-shadow: 0 0 42px rgba(232, 57, 44, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------- nav -- */

/* At rest the bar is barely there; scrolling condenses it into a solid, blurred
   header. Both states share one long expo easing so the hide/show, the condense
   and the padding change all move on the same curve instead of three. */
body .qc-topnav {
  background: linear-gradient(180deg, rgba(8, 4, 5, 0.62), rgba(8, 4, 5, 0.28));
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.34s ease,
    background 0.45s ease,
    padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    backdrop-filter 0.45s ease;
  will-change: transform;
}

body .qc-topnav.is-scrolled {
  background: linear-gradient(180deg, rgba(8, 4, 5, 0.94), rgba(8, 4, 5, 0.78));
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom-color: var(--qc-line-soft);
  box-shadow: 0 1px 0 rgba(174, 31, 25, 0.3), 0 20px 44px -30px rgba(174, 31, 25, 0.65);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Sticky: the bar never leaves. Neutralise the old hide state in case a cached
   page still carries the class. */
body .qc-topnav.is-hidden {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* Wipe the underline in from the centre with a transform rather than animating
   `left`/`right`, so it runs on the compositor and cannot jitter mid-hover. */
body .qc-topnav__link {
  transition: color 0.28s ease;
}
body .qc-topnav__link::after {
  left: 0;
  right: 0;
  background: var(--qc-brand-lit);
  box-shadow: 0 0 10px rgba(232, 57, 44, 0.7);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
body .qc-topnav__link:hover::after,
body .qc-topnav__link.is-active::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  body .qc-topnav,
  body .qc-topnav__link,
  body .qc-topnav__link::after { transition-duration: 0.01ms; }
}

/* ------------------------------------------------------------------ hero -- */

/* The Shopify theme's base.css carries a blanket `div:empty { display: none }`,
   which was silently killing every purely decorative empty div on the page —
   including the hero's animated gradient mesh and its vignette. Bring the
   decorative layers back; they are aria-hidden and carry no content by design. */
body .trading-fair-banner__gradient,
body .trading-fair-banner__vignette,
body .orgs-section__card-accent,
body .about-row__accent,
body .about-divider,
body .qc-ticker__dot,
body .trading-fair-banner__tagline-dot {
  display: block;
}

/* The hero plate is a stock-market photo with a cold blue cast and a rainbow
   lens flare. Strip it to greyscale and let the crimson mesh above it (which
   blends in screen mode) do the colouring — a duotone, rather than a hue
   rotation that would drag the flare through the spectrum. */
body #TradingFairBanner > .trading-fair-banner__bg {
  filter: grayscale(1) contrast(1.35) brightness(0.85);
  opacity: 0.34;
}

/* Darken only the left column and the bottom edge, where the wordmark, tagline
   and logo sit. The middle stays open so the crimson mesh underneath still
   reads as the hero's colour. */
body .trading-fair-banner__vignette {
  background:
    linear-gradient(180deg, rgba(8, 4, 5, 0.45) 0%, transparent 26%, rgba(8, 4, 5, 0.72) 100%),
    linear-gradient(90deg, rgba(8, 4, 5, 0.78) 0%, rgba(8, 4, 5, 0.3) 34%, transparent 58%);
}

/* The mesh above the greyscale plate is what tints it. Screen blending only
   lifts, so the crimson has to be strong enough to actually read as the hero's
   colour rather than a faint bloom. */
body .trading-fair-banner__gradient {
  background:
    radial-gradient(circle at 16% 30%, rgba(174, 31, 25, 0.85), transparent 46%),
    radial-gradient(circle at 78% 16%, rgba(232, 57, 44, 0.55), transparent 42%),
    radial-gradient(circle at 72% 84%, rgba(120, 20, 16, 0.75), transparent 46%),
    radial-gradient(circle at 30% 88%, rgba(232, 57, 44, 0.45), transparent 44%);
  filter: blur(60px);
}

body #TradingFairBanner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(232, 57, 44, 0.045) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(226, 156, 148, 0.05) 1px, transparent 1px) 0 0 / 64px 100%;
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* a lit horizon where the hero hands off to the ticker */
body #TradingFairBanner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--qc-brand-lit), transparent);
  box-shadow: 0 0 24px 2px rgba(232, 57, 44, 0.45);
  pointer-events: none;
}

body .trading-fair-banner__tagline-dot { background: var(--qc-brand); box-shadow: 0 0 10px rgba(174, 31, 25, 0.9); }
/* Warm neutral rather than steel here: the hero plate is saturated crimson, and
   a cool grey label sits at too low a contrast against it. */
body .trading-fair-banner__initiative-text {
  color: rgba(255, 236, 232, 0.82);
  font-family: var(--qc-mono);
  letter-spacing: 0.24em;
}

/* ------------------------------------------------------- section surfaces -- */

/* The two light bands on the home page. Same layout, dark ground, so the page
   reads as one continuous surface instead of alternating black and white. */
body .orgs-section,
body .sponsor-section {
  background: var(--qc-void);
  color: var(--qc-ink);
}

/* A faint crimson horizon at the top of each band + a technical grid, so the
   dark stretches have structure rather than being flat black. */
body .orgs-section::before,
body .sponsor-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 44% at 50% 0%, rgba(174, 31, 25, 0.20), transparent 68%),
    linear-gradient(rgba(226, 156, 148, 0.045) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(226, 156, 148, 0.045) 1px, transparent 1px) 0 0 / 46px 100%;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}

/* glass panel */
body .orgs-section__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--qc-line);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
body .orgs-section__card:hover {
  border-color: rgba(232, 57, 44, 0.45);
  box-shadow: 0 30px 70px -34px rgba(174, 31, 25, 0.55);
}
body .orgs-section__card-name { color: var(--qc-ink); }
body .orgs-section__desc      { color: var(--qc-muted); }
body .orgs-section__card-eyebrow {
  color: var(--qc-steel);
  font-family: var(--qc-mono);
}
body .orgs-section__card-accent {
  background: linear-gradient(90deg, var(--qc-brand), var(--qc-ember));
  box-shadow: 0 0 14px rgba(174, 31, 25, 0.7);
}

body .sponsor-section__heading { color: var(--qc-ink); }
body .sponsor-section__text,
body .sponsor-section__list li { color: var(--qc-muted); }
body .sponsor-section__list li::before { background: var(--qc-brand-lit); }
body .sponsor-section__email-link { color: var(--qc-brand-lit); }
body .sponsor-section__email-link:hover { color: var(--qc-ember); }

/* ------------------------------------------------------------ about page -- */

body .about-page {
  background: var(--qc-void);
  color: var(--qc-ink);
}

body .about-container { position: relative; }
body .about-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(226, 156, 148, 0.04) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(226, 156, 148, 0.04) 1px, transparent 1px) 0 0 / 46px 100%;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
}
body .about-container > * { position: relative; z-index: 1; }

/* The wordmark asset is black artwork; invert it for the dark ground, the same
   way the home-page hero already does. */
body .about-main-logo { filter: brightness(0) invert(1); }

body .about-initiative-label {
  color: var(--qc-steel);
  font-family: var(--qc-mono);
  border-color: var(--qc-line);
  background: rgba(255, 255, 255, 0.03);
}
body .about-initiative-url { color: var(--qc-muted); }

body .about-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--qc-line);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
body .about-row:hover {
  border-color: rgba(232, 57, 44, 0.45);
  box-shadow: 0 30px 70px -34px rgba(174, 31, 25, 0.55);
}
body .about-row__name        { color: var(--qc-ink); }
body .about-row__description { color: var(--qc-muted); }
body .about-row__url         { color: var(--qc-brand-lit); }
body .about-row__eyebrow     { color: var(--qc-steel); font-family: var(--qc-mono); }
body .about-row__accent {
  background: linear-gradient(90deg, var(--qc-brand), var(--qc-ember));
  box-shadow: 0 0 14px rgba(174, 31, 25, 0.7);
}
body .about-divider {
  background: linear-gradient(90deg, transparent, rgba(232, 57, 44, 0.45), transparent);
  height: 1px;
  border: 0;
}

/* ---------------------------------------------------------------- footer -- */

body .footer {
  background: var(--qc-void);
  border-top: 1px solid var(--qc-line-soft);
  color: var(--qc-muted);
}
body .footer h2,
body .footer .footer-block__heading { color: var(--qc-ink); }
body .footer a,
body .footer .copyright__content,
body .footer small { color: var(--qc-muted); }
body .footer a:hover { color: var(--qc-brand-lit); }
body .footer .footer__content-bottom { border-top: 1px solid var(--qc-line-soft); }
body .footer .list-social__link { color: var(--qc-muted); }
body .footer .list-social__link:hover { color: var(--qc-brand-lit); }

/* The footer social marks are black glyph artwork drawn for the old white
   footer. Instagram and LinkedIn are transparent PNGs, so flattening them to
   white is enough. */
body .custom-social-link img { filter: brightness(0) invert(1); }

/* The X mark is a fully opaque tile (black glyph on a white plate), so the same
   treatment would flatten it to a solid white square. Invert it instead, then
   screen the now-black plate away and keep the white glyph. */
body .custom-social-link img[alt="X"] {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------ micro-type -- */

/* Eyebrow labels across the site read as instrument readouts: mono, wide
   tracking, steel — with crimson reserved for the thing being emphasised. */
body .about-intro__eyebrow,
body .events-cta__eyebrow,
body .worked-with__eyebrow,
body .qc-ticker__label {
  font-family: var(--qc-mono);
  letter-spacing: 0.3em;
  color: var(--qc-steel);
}
body .qc-ticker__item--accent .qc-ticker__value { color: var(--qc-brand-lit); }
body .qc-ticker__dot { background: var(--qc-brand); box-shadow: 0 0 8px rgba(174, 31, 25, 0.9); }

/* ------------------------------------------------------------- reduced -- */

@media (prefers-reduced-motion: reduce) {
  body .orgs-section::before,
  body .sponsor-section::before { animation: none; }
}