/* ==========================================================================
   Disruption Economics — RethinkX × KSE
   Built from Figma "FSDTS" (5RFgeLi5e3gz0aDNRVDQJb), page "Final".
   Frames: 390 / 440 / 768 / 1020 / 1280 / 1512.
   Type and spacing interpolate between the 768 and 1020 frames.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   PP Neue Corp (Pangram Pangram, licensed) — the woff2 cuts from the licensed
   package. The design also calls for Compact Medium on the footer copyright;
   that cut was not purchased, so the footer uses Narrow Medium (see .copyright).
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "PP Neue Corp Compact"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("assets/fonts/PPNeueCorp-CompactUltrabold.woff2") format("woff2");
}
@font-face {
  font-family: "PP Neue Corp Narrow"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("assets/fonts/PPNeueCorp-NarrowUltrabold.woff2") format("woff2");
}
@font-face {
  font-family: "PP Neue Corp Narrow"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/fonts/PPNeueCorp-NarrowMedium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --black: #000000;
  --orange: #FF6B17;
  --deep-blue: #1B4A5A;
  --cream: #F7F3F0;
  --warm-grey: #C4C1BE;
  --white: #FFFFFF;

  --font-display: "PP Neue Corp Compact", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  --font-narrow: "PP Neue Corp Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* One multiplier over the whole type scale. Short viewports step it down (see
     the max-height queries) so the hero CTA stays above the fold; because every
     size is derived from it, the ratios between them never change. */
  --type-scale: 1;

  /* Every fluid value ramps between the 768 and 1020 frames. */
  --fs-display: calc(clamp(42px, calc(42px + 43 * (100vw - 768px) / 252), 85px) * var(--type-scale));
  --fs-label:   calc(clamp(21px, calc(21px + 21 * (100vw - 768px) / 252), 42px) * var(--type-scale));
  --fs-lead:    calc(clamp(21px, calc(21px + 12 * (100vw - 768px) / 252), 33px) * var(--type-scale));
  --fs-body:    calc(clamp(18px, calc(18px +  3 * (100vw - 768px) / 252), 21px) * var(--type-scale));
  --fs-cta:     calc(clamp(21px, calc(21px +  7 * (100vw - 768px) / 252), 28px) * var(--type-scale));
  --fs-intro:   calc(21px * var(--type-scale));
  --fs-nav:     calc(21px * var(--type-scale));
  --fs-meta:    calc(15px * var(--type-scale));
  --fs-footer:  calc(13px * var(--type-scale));

  --gap-section: clamp(60px, calc(60px + 61 * (100vw - 768px) / 252), 121px);
  --gap-block:   clamp(21px, calc(21px + 21 * (100vw - 768px) / 252), 42px);
  --gap-head:    clamp(18px, calc(18px + 15 * (100vw - 768px) / 252), 33px);
  --gap-col:     clamp(12px, calc(12px + 10 * (100vw - 768px) / 252), 22px);
  --gap-card:    clamp(0px,  calc(0px  +  6 * (100vw - 768px) / 252),  6px);
  --gap-bio:     clamp(9px,  calc(9px  +  3 * (100vw - 768px) / 252), 12px);
  --pad-panel:   clamp(18px, calc(18px + 24 * (100vw - 768px) / 252), 42px);

  /* 18px gutter, growing to 23px at 1020, then whatever centres a 1112px column. */
  --gutter: max(clamp(18px, 2.25vw, 23px), calc((100% - 1112px) / 2));

  /* Gaps above the hero and below the closing CTA. Kept separate from
     --gap-section so the first and last screens can be tightened without
     touching the rhythm between sections. */
  --gap-header: clamp(24px, calc(24px + 24 * (100vw - 768px) / 252), 48px);
  --gap-footer: clamp(56px, calc(56px + 64 * (100vw - 768px) / 252), 120px);
}

/* The Figma-exported SVGs carry display-p3 alongside their hex, so on a wide-gamut
   screen the logo and chart render more saturated than a CSS hex of the same name.
   Match them there, and fall back to the hex where display-p3 is unavailable. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --orange:    color(display-p3 1.0000 0.4196 0.0902);  /* = #FF6B17 */
    --warm-grey: color(display-p3 0.7700 0.7553 0.7469);  /* = #C4C1BE */
  }
}

/* Short viewports cannot fit the hero through its CTA at full size. Step the whole
   scale down; every size derives from this one number, so the proportions hold.
   Wide and narrow need different steps: the mobile hero is already smaller, so the
   same height would otherwise shrink phone text far more than necessary. */
@media (min-width: 768px) and (max-height: 800px) { :root { --type-scale: 0.92; } }
@media (min-width: 768px) and (max-height: 700px) { :root { --type-scale: 0.84; } }
@media (min-width: 768px) and (max-height: 640px) { :root { --type-scale: 0.76; } }
@media (min-width: 768px) and (max-height: 600px) { :root { --type-scale: 0.68; } }

@media (max-width: 767px) and (max-height: 620px) { :root { --type-scale: 0.90; } }
@media (max-width: 767px) and (max-height: 540px) { :root { --type-scale: 0.82; } }

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-narrow);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.15;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, hgroup { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--black); color: var(--white); padding: 10px 16px;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
}
.skip-link:focus { top: 8px; }

/* --- Page shell ----------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  gap: 0;   /* header→hero and closing→footer are set explicitly below */
  padding: var(--gutter) var(--gutter)
           clamp(18px, calc(18px + 19 * (100vw - 768px) / 252), 37px);
}
main { margin-top: var(--gap-header); }
main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}
.section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}
.stack-33 { display: flex; flex-direction: column; gap: var(--gap-head); }

/* --- Type ----------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.89;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-label);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-label);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.lead {
  font-family: var(--font-narrow);
  font-weight: 800;
  font-size: var(--fs-lead);
  line-height: 1.15;
  letter-spacing: 0;
}
.body { font-size: var(--fs-body); }
.body strong, .bio__role { font-weight: 800; }
.measure { font-size: var(--fs-intro); max-width: 640px; }
.orange { color: var(--orange); }
.card--orange { color: var(--orange); }

@media (min-width: 1020px) {
  .card__title { line-height: 0.89; }
  .lead--wide { max-width: 923px; }
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* Figma uses space-between with no explicit gap; keep only a small guard so the
     nav gets the full remaining width of the 1112px column. */
  gap: 12px;
}
.logo { flex: none; }
.logo img { width: 276.6px; height: auto; }

.nav-inline {
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  gap: 10.5px;
  font-family: var(--font-narrow);
  font-weight: 800;
  font-size: var(--fs-nav);
  line-height: 0.7;
  text-transform: uppercase;
}
/* Items never break mid-label; the row wraps instead of overflowing the column
   if the rendered font is wider than PP Neue Corp (e.g. before it is installed). */
.nav-inline a { text-decoration: none; white-space: nowrap; }
.nav-inline a:hover { color: var(--orange); }

/* Hamburger: three 24×6 bars with 6px gaps (24 × 30 total). */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: none;
}
/* flex: none so the three bars keep their 6px in a column flex container instead
   of being shrunk by it. */
.burger__bar { display: block; flex: none; width: 100%; height: 6px; background: var(--black); }

@media (min-width: 1280px) {
  .nav-inline { display: flex; }
  .burger { display: none; }
  /* Designer request: tighten the top so the hero CTA lands in the first screen. */
  .page { padding-top: 42px; }
}

/* --- Mobile menu ---------------------------------------------------------- */
.menu-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.35);
}
.menu {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 50;
  /* 45% of the viewport. dvh tracks the browser chrome on mobile; vh is the
     fallback, and on iOS/Android it measures the *large* viewport, which made
     the panel taller than intended. */
  height: 45vh;
  height: 45dvh;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  background: var(--white);
  overflow-y: auto;
}
.menu[hidden], .menu-backdrop[hidden] { display: none; }
.menu__close {
  align-self: flex-end;
  width: 24px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--black);
}
.menu__nav {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-narrow);
  font-weight: 800;
  font-size: var(--fs-nav);
  line-height: 1.15;
  text-transform: uppercase;
}
.menu__nav a { text-decoration: none; }

/* --- CTA ------------------------------------------------------------------ */
.cta-block { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-cta);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}
.cta:hover { color: var(--black); }
.meta { font-size: var(--fs-meta); line-height: 1.15; }

/* --- Columns -------------------------------------------------------------- */
.cols { display: grid; gap: var(--gap-col); }
.cols--2 { grid-template-columns: 1fr; }
.cols--3 { grid-template-columns: 1fr; }
.card { display: flex; flex-direction: column; gap: var(--gap-card); }
/* Portraits are square sources shown in a 356×199 window. The RethinkX three are
   cropped to it, each at its own vertical focal point (--crop). The KSE two are
   stretched to fill it instead, which is what the frame does — hence the separate
   object-fit below rather than a doctored copy of the source file. */
/* Name / role / body sit at the card gap; the wider image-to-text gap is made up
   by a margin on the image, so the text block needs no extra wrapper. */
.bio { display: flex; flex-direction: column; gap: var(--gap-card); }
/* The RethinkX portraits are square sources cropped to the 356×199 window; each
   sits at its own vertical offset in Figma, passed in as --crop on the element.
   The KSE portraits already match the window, so the default is harmless. */
.bio img {
  /* Fills its column, but never wider than the 356px image node in Figma. The
     KSE bios sit in 545px columns, where the image must stay 356px rather than
     stretch — the text below it still spans the full column. */
  width: 100%; max-width: 356px; height: auto; aspect-ratio: 356 / 199;
  object-fit: cover; object-position: center var(--crop, 50%);
  opacity: 0.98;   /* the image fills carry 98% opacity in Figma */
  margin-bottom: calc(var(--gap-bio) - var(--gap-card));
}
/* The KSE pair fills the frame rather than being cropped into it. */
#kyiv .bio img { object-fit: fill; }

/* Before/After sit side by side at every width — they do so even at 390. */
.cols--tight { grid-template-columns: 1fr 1fr; }

@media (min-width: 768px) {
  .cols--bios.cols--3 { grid-template-columns: repeat(3, 1fr); }
  .cols--bios.cols--2 { grid-template-columns: repeat(2, 1fr); }
  .cols--audience { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
  .cols--2 { grid-template-columns: repeat(2, 1fr); }
  .cols--tight { gap: 24px; }
}

/* --- Chart ---------------------------------------------------------------- */
.chart { margin: 0; }
.chart__mobile { width: 100%; height: auto; }
.chart__panel { display: none; }

@media (min-width: 768px) {
  .chart__mobile { display: none; }
  .chart__panel {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1112 / 556;
    background: var(--cream);
    container-type: inline-size;
  }
  .chart__panel > * { position: absolute; }

  /* Geometry is lifted straight from the Figma node offsets, as % of the panel. */
  .chart__linear { left: 5.08%;  top: 56.215%; width: 89.84%; height: 25.424%; }
  .chart__axes   { left: 5.08%;  top: 10.169%; width: 89.84%; height: 79.661%; }
  .chart__curve  { left: 5.08%;  top: 11.298%; width: 89.84%; height: 70.056%; }
  .chart__dot    { left: 49.15%; top: 67.232%; width: 1.7%;   height: 3.39%;   }
  .chart__drop {
    left: 49.86%; top: 68.926%; width: 2px; height: 20.904%;
    background: repeating-linear-gradient(to bottom, var(--black) 0 2px, transparent 2px 4px);
  }

  .chart__label {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(9px, 1.62cqw, 18px);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .chart__label--actual {
    left: 79.66%; top: 15.72%; width: 15.26%;
    text-align: right; color: var(--orange); font-weight: 500;
  }
  .chart__label--forecast {
    left: 81.36%; top: 60.45%; width: 13.56%;
    text-align: right; color: var(--warm-grey); font-weight: 500;
  }
  .chart__label--regime { left: 26.84%; top: 60.45%; width: 23.16%; text-align: right; }
  .chart__label--x      { left: 44.93%; top: 93.53%; width: 10.16%; text-align: center; text-transform: none; }
  .chart__label--y {
    left: 1.66%; top: 32.77%; height: 33.9%;
    writing-mode: vertical-rl; transform: rotate(180deg);
    text-transform: none;
  }
}

/* --- Modules panel -------------------------------------------------------- */
.section--panel {
  background: var(--cream);
  padding: var(--pad-panel);
  gap: var(--gap-block);
}
.modules { display: flex; flex-direction: column; gap: clamp(21px, calc(21px - 3 * (100vw - 768px) / 252), 21px); }
.modules li { display: flex; flex-direction: column; gap: var(--gap-card); }
.modules .num { font-variant-numeric: lining-nums tabular-nums; }
.capstone { display: flex; flex-direction: column; gap: var(--gap-card); }

@media (min-width: 1020px) { .modules { gap: 18px; } }

/* --- Not for -------------------------------------------------------------- */
.not-for { display: flex; flex-direction: column; gap: var(--gap-card); max-width: 545px; }
.not-for ul { list-style: disc; padding-left: 1.5em; }
.not-for li { margin-bottom: 0; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: var(--gap-footer);
}
/* Figma specifies Compact Medium here. That cut has not been supplied, so this
   uses Narrow Medium from the same family — swap to var(--font-display) once
   PPNeueCorp-CompactMedium is in assets/fonts/ and declared above. */
.copyright {
  font-family: var(--font-narrow);
  font-weight: 500;
  font-size: var(--fs-footer);
  line-height: 1.15;
}
.logos { display: flex; align-items: flex-end; gap: 21px; }
.logo-rethinkx { width: 75px; height: auto; }
.logo-kse { width: 75px; height: auto; }

@media (min-width: 1020px) {
  .logos { gap: 42px; }
  .logo-rethinkx { width: 116px; }
  .logo-kse { width: 116px; }
}

/* --- Breakpoint-specific copy -------------------------------------------- */
.wide-only { display: none; }
@media (min-width: 1020px) {
  .wide-only { display: inline; }
  br.wide-only { display: inline; }
  .narrow-only { display: none; }
}