/* ==========================================================================
   AI Debate Club — all design lives in this file.

   SWAPPING THE DISPLAY FONT (wordmark and section headings)
   It's a change to this file only:
     1. Replace the display-font @import line below with the new font's
        Google Fonts URL (keep "&display=block" so the wordmark fades in
        already styled).
     2. Update the "Display font" tokens in :root below: --font-display,
        --display-weight, --display-weight-heading, --display-variation,
        --display-tracking, --heading-tracking, and the two --wordmark-em
        widths (how many em wide the wordmark is in that font, so it sizes
        correctly and never overflows on phones).
   Ready-made alternatives are listed right under the @import lines: swap
   the @import line and paste that font's tokens over the ones in :root.
   Nothing in index.html or the .js files needs to change.
   ========================================================================== */

/* Display font: Archivo Black (font gallery #09) */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=block");
/* Body + footer fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400&display=swap");

/* Other grotesks from the font gallery (swap the display @import above + tokens below):

   #10 Inter Tight 900
     @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@900&display=block");
     --font-display: "Inter Tight", system-ui, sans-serif;
     --display-weight: 900;  --display-weight-heading: 900;  --display-variation: normal;
     --display-tracking: -0.05em;  --heading-tracking: -0.03em;
     --wordmark-em: 6.40;  --wordmark-em-stacked: 4.21;

   #11 Schibsted Grotesk 900
     @import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@900&display=block");
     --font-display: "Schibsted Grotesk", system-ui, sans-serif;
     --display-weight: 900;  --display-weight-heading: 900;  --display-variation: normal;
     --display-tracking: -0.045em;  --heading-tracking: -0.025em;
     --wordmark-em: 7.01;  --wordmark-em-stacked: 4.71;

   #12 Bricolage Grotesque 800
     @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@96,800&display=block");
     --font-display: "Bricolage Grotesque", system-ui, sans-serif;
     --display-weight: 800;  --display-weight-heading: 800;  --display-variation: normal;
     --display-tracking: -0.045em;  --heading-tracking: -0.025em;
     --wordmark-em: 5.84;  --wordmark-em-stacked: 3.86;

   #13 Space Grotesk 700
     @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=block");
     --font-display: "Space Grotesk", system-ui, sans-serif;
     --display-weight: 700;  --display-weight-heading: 700;  --display-variation: normal;
     --display-tracking: -0.045em;  --heading-tracking: -0.025em;
     --wordmark-em: 6.38;  --wordmark-em-stacked: 4.18;
*/

:root {
  color-scheme: light;

  /* ---- Colors ---- */
  --bg: #f6f5f1;          /* off-white page */
  --ink: #141413;         /* near-black text */
  --muted: #6b6a65;       /* grey for secondary text (4.97:1 on --bg) */
  --hairline: rgba(20, 20, 19, 0.16);   /* event card borders */

  /* ---- Fonts ---- */
  --font-display: "Archivo Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Display font settings ---- */
  --display-weight: 400;              /* the wordmark (Archivo Black only comes in 400) */
  --display-weight-heading: 400;      /* section headings */
  --display-variation: normal;        /* variable-font axes, e.g. "opsz" 9 for Fraunces */
  --display-tracking: -0.03em;        /* wordmark letter-spacing */
  --heading-tracking: -0.015em;       /* heading letter-spacing */
  --wordmark-em: 7.72;                /* width of "AI Debate Club" on one line, in em */
  --wordmark-em-stacked: 5.09;        /* width of "AI Debate" (tiny phones stack the wordmark), in em */

  /* ---- Type scale ---- */
  --text-sm: 0.8125rem;                                   /* 13px: sub-lines */
  --text-base: 0.9375rem;                                 /* 15px: body copy */
  --text-intro: 1.125rem;                                 /* 18px: intro line */
  --text-resolution: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18–20px */
  --text-heading: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);        /* 24–30px */
  --wordmark-max: 7rem;                                    /* wordmark size cap (112px) */
  --wordmark-share: 58vw;                                  /* desktop: wordmark spans ~58% of the window */
  --wordmark-min: 2.75rem;                                 /* phones: size floor, if it fits on one line */
  --text-footer: 0.75rem;
  --leading-body: 1.65;
  --leading-display: 1.1;

  /* ---- Layout ---- */
  --gutter: clamp(16px, 4vw, 24px);
  --column: 35rem;                    /* width of the text column */
  --section-gap: clamp(3rem, 2.5rem + 2vw, 4rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p { margin: 0; }
[hidden] { display: none !important; }

a {
  color: var(--ink);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-style: solid; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Hero wordmark ---------- */
.hero {
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter) clamp(2.75rem, 5vw, 4.5rem);
  text-align: center;
}
.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-synthesis: none;   /* never fake a bold the font doesn't have */
  /* ~58% of the window on desktop (capped), one line as wide as the gutters
     allow on phones; the -20px leaves room for a desktop scrollbar */
  font-size: min(
    var(--wordmark-max),
    max(var(--wordmark-share) / var(--wordmark-em), var(--wordmark-min)),
    (100vw - 2 * var(--gutter) - 20px) / var(--wordmark-em)
  );
  line-height: 1;
  letter-spacing: var(--display-tracking);
  color: var(--ink);
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;   /* one-time load-in */
}
.wordmark span { white-space: nowrap; }

/* Tiny phones, where one line would get too small: stack ("AI Debate" / "Club") */
@media (max-width: 344px) {
  .wordmark {
    font-size: min(3.25rem, (100vw - 2 * var(--gutter)) * 0.94 / var(--wordmark-em-stacked));
    line-height: 0.95;
  }
  .wordmark span { display: block; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.08em); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; }
}

/* One-line intro under the wordmark */
.intro {
  margin-top: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
  font-size: var(--text-intro);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
}
@media (prefers-reduced-motion: reduce) {
  .intro { animation: none; }
}

/* ---------- Text column ---------- */
main {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 9rem;   /* bottom space so the fixed footer never covers content */
}


section { margin-top: var(--section-gap); }
main > section:first-child { margin-top: 0; }
section p { color: var(--muted); }
section p + p { margin-top: 1em; }
.hook p + p { margin-top: 1.75em; }   /* extra air between the intro paragraphs */

h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight-heading);
  font-variation-settings: var(--display-variation);
  font-synthesis: none;
  font-size: var(--text-heading);
  line-height: var(--leading-display);
  letter-spacing: var(--heading-tracking);
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- How it works: numbered steps + small notes ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
p + .steps { margin-top: 0.75rem; }
.steps li {
  counter-increment: step;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
  color: var(--ink);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  flex: none;
  width: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.steps + p { margin-top: 1rem; }

/* ---------- Upcoming events: outline cards ---------- */
.event {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1.25rem 1.35rem;
}
.event + .event { margin-top: 1rem; }   /* space between cards */
.event .kicker {                        /* date + time, above the resolution */
  font-family: var(--font-mono);
  font-size: var(--text-footer);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.event .resolution {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-resolution);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.event .kicker + .resolution { margin-top: 0.4rem; }
.event .resolution + .meta { margin-top: 0.35rem; }
.event .cta { margin-top: 0.9rem; }

/* ---------- Previous events: Otherkind-style rows ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.3rem 0;
}
.row-main { min-width: 0; }
.row-sub {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.row-date {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Fixed footer bar ---------- */
.bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem var(--gutter);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--text-footer);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.bar-left { justify-self: start; white-space: nowrap; }
.bar-links { display: flex; gap: 1.5rem; }
.bar-links a { text-decoration-style: solid; text-underline-offset: 0.3em; }
.bar-right { justify-self: end; text-align: right; white-space: nowrap; }

@media (max-width: 639px) {
  .bar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.6875rem;
  }
}
@media (max-width: 359px) {
  .bar-links { display: none; }   /* too tight on the smallest phones */
}