/* ==========================================================================
   Cape Town Future Tech Collective — call for speakers
   Built from Figma "Meetup branding" → page "Web pages"
   Dark mode  : frame 18:517      Light mode : frame 23:1031
   Colour scheme follows the browser/OS preference. No manual toggle.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Migha ......... display face for the "FUTURE TECH" wordmark.
                   Drop Migha-BlackExpandedContrast.woff2 into assets/fonts/.
   Fraunces ...... self-hosted variable font (latin subset), SOFT 0 / WONK 1.
   Helvetica Neue  everything else — resolved from the visitor's system.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Migha";
  src: url("assets/fonts/Migha-ExpandedContrast-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Roman-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Ital-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --font-sans: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-display: "Migha", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;

  --measure: 810px;
  --gutter: 48px;
  --stack: 24px;

  /* Clear space above and below every divider line. The page's flex gap
     already contributes --stack, so .rule only has to make up the rest. */
  --rule-space: 80px;

  /* Migha is served with its weight axis live, so the wordmark is tunable. */
  --migha-wght: 257;

  /* Artwork scale. Both drop on mobile — see the 700px breakpoint. The FTC
     lockup and its graphic scale together so they stay a matched pair. */
  --brand-scale: 1;
  --kurtosys-scale: 1;

  /* 14px floor on every piece of text, at every width. Anything smaller than
     this in the Figma has been raised to meet it. */
  --text-min: 14px;

  /* The one deliberate exception to --text-min: the sponsor credit label sits
     next to a logo rather than being read as body copy. */
  --credit-label: 12px;

  --link: #3b72ff;

  /* Divider lines. 90% reads correctly on the cream ground; the dark-mode
     override drops it to 20% so the lines do not glare. */
  --rule: rgba(217, 217, 217, 0.9);

  /* Light mode is the default; dark is applied in the media query below. */
  --bg: #fffeee;
  --hero-ink: #000000;
  --heading-ink: #000000;
  --card-title-ink: #000000;
  --body-ink: rgba(0, 0, 0, 0.6);
  --eyebrow-ink: rgba(0, 0, 0, 0.5);
  --step-ink: #000000;
  --border: rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1d28;
    --hero-ink: #fffeee;
    --heading-ink: rgba(255, 254, 238, 0.8);
    --card-title-ink: rgba(255, 254, 238, 0.8);
    --body-ink: rgba(255, 254, 238, 0.8);
    --eyebrow-ink: rgba(222, 255, 57, 0.9);
    --step-ink: rgba(255, 254, 238, 0.7);
    --border: rgba(255, 254, 238, 0.2);
    --rule: rgba(217, 217, 217, 0.2);
  }
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 39px 0;
  background: var(--bg);
  color: var(--body-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* --- Colour-scheme asset swap -------------------------------------------- */

.only-dark { display: none; }
.only-light { display: block; }

@media (prefers-color-scheme: dark) {
  .only-dark { display: block; }
  .only-light { display: none; }
}

/* --- Page frame ----------------------------------------------------------
   Every block sits in an 810px measure, centred, with the page's 48px gutter
   and a 24px rhythm between blocks (matching the Figma auto-layout).
   ------------------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack);
  padding: 0 var(--gutter);
}

.block {
  width: 100%;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rule {
  width: 100%;
  max-width: var(--measure);
  height: 0;
  margin: calc(var(--rule-space) - var(--stack)) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* --- Masthead and footer -------------------------------------------------- */

/* The masthead is two columns at every width: the FTC lockup with its graphic
   on the left, the sponsor credit floated beside it on the right. On mobile the
   artwork scales down rather than stacking, so the pairing is kept. flex-wrap
   is the escape hatch for very narrow screens. */

.masthead {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.masthead-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Holds the FTC logo at the sponsor block's height so the two read as one row.
   The sponsor block is whichever is taller: its 30px line box, or the Kurtosys
   mark at the current scale. Deriving it means no breakpoint is needed. */
.logo-slot {
  display: flex;
  align-items: center;
  min-height: max(30px, calc(48px * var(--kurtosys-scale)));
}

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.logo-ftc {
  width: calc(127.94px * var(--brand-scale));
  height: calc(36.31px * var(--brand-scale));
}

.mountain {
  width: calc(129.82px * var(--brand-scale));
  height: calc(40px * var(--brand-scale));
}

/* The only text on the page allowed below --text-min — see --credit-label.
   Stays on one line: the label never breaks and never sits above the mark. */
.broughtby {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 16px;
  margin: 0;
  font-weight: 700;
  font-size: var(--credit-label);
  line-height: 30px;
  letter-spacing: 0.06em;
  color: var(--hero-ink);
}

.logo-kurtosys {
  width: calc(144px * var(--kurtosys-scale));
  height: calc(48px * var(--kurtosys-scale));
}

/* --- Hero ---------------------------------------------------------------- */

/* No extra bottom padding here — the Figma hero carried 24px, but that would
   make the rule below it sit 64px clear while every other rule sits at 40px. */
.hero {
  gap: 28px;
  color: var(--hero-ink);
}

.hero-kicker {
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 1.75px;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: var(--migha-wght);
  font-variation-settings: "wght" var(--migha-wght);
  font-size: clamp(48px, 14.7vw, 119px);
  letter-spacing: -0.03em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
}

.hero-sub {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(44px, 12.3vw, 100px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
}

/* --- Type ---------------------------------------------------------------- */

.eyebrow {
  font-weight: 500;
  font-size: var(--text-min);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
}

.h2 {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 600;
  font-size: clamp(26px, 4.7vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--heading-ink);
}

.body { color: var(--body-ink); }

.serif-italic {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  font-style: italic;
}

.note {
  font-size: var(--text-min);
  font-style: italic;
  color: var(--body-ink);
  text-decoration: underline;
  text-underline-position: from-font;
}

.note strong { font-weight: 700; }

.closing {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 600;
  font-style: italic;
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: -0.6px;
  color: var(--body-ink);
}

a { color: var(--link); }

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

/* --- Cards ---------------------------------------------------------------
   Collapsed 1px grid: the list owns the top and left edge, each cell owns its
   right and bottom edge. Holds at any column count, so the responsive
   breakpoints need no border bookkeeping.
   ------------------------------------------------------------------------- */

.cards {
  display: grid;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 194px;
  padding: 24px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.card-short { min-height: 100px; }

.card-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--card-title-ink);
}

.card-note {
  font-weight: 300;
  font-size: var(--text-min);
  color: var(--body-ink);
}

/* --- How to apply --------------------------------------------------------- */

.h2-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.h2-link a {
  color: var(--link);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.arrow { width: 23px; height: 23px; flex: none; }

.steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-weight: 700;
  font-size: var(--text-min);
  color: var(--step-ink);
  text-decoration: underline;
  text-underline-position: from-font;
}

.steps .body { flex: 1 1 auto; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --gutter: 32px; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .card { min-height: 0; }
}

/* Mobile changes the logo sizes and nothing else — no flex-direction, no wrap,
   no gap overrides. The masthead keeps the exact layout it has on desktop, so
   the sponsor credit stays on one line beside the FTC lockup. The FTC logo and
   its graphic go to half together; the Kurtosys mark scales separately. Both
   dimensions of each image come off one factor, so aspect ratios are exact. */
@media (max-width: 700px) {
  :root {
    --brand-scale: 0.5;        /* 127.94x36.31 -> 64x18, 129.82x40 -> 65x20 */
    --kurtosys-scale: 0.58333; /* 144x48 -> 84x28 */
  }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  body { padding: 24px 0; }

  .cards-4,
  .cards-2 { grid-template-columns: 1fr; }

  .hero-kicker { font-size: 20px; letter-spacing: 1.4px; }
  .steps li { align-items: flex-start; }
  .step-num { height: auto; width: 24px; justify-content: flex-start; }
}

/* --- Print / reduced motion ----------------------------------------------- */

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