/* ==========================================================================
   ISC design system — tokens, base and shared components
   Source of truth: ISC Brand Visual Identity (colour palette, Raleway,
   logo construction) — see /brand/ for the documented system.
   ========================================================================== */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Variable.ttf") format("truetype-variations"),
       url("../fonts/Raleway-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand palette — 60 / 30 / 10 */
  --oxford: #1b2336;      /* primary 60% — grounds, ink */
  --space: #212e4e;       /* primary, raised dark surfaces */
  --indigo: #374775;      /* secondary — cards on dark */
  --jordi: #97b3dd;       /* secondary 30% — lines, data, logo gradient start */
  --lavender: #dae1f1;    /* secondary — light grounds, text on dark */
  --mist: #eef2f8;        /* light slide ground */
  --paper: #f7f9fc;       /* lightest surface */
  --livingston: #a2987f;  /* accent 10% — pins, active states, rules */
  --carambar: #4f2132;    /* accent — rare emphasis */

  --ink: var(--oxford);
  --ink-2: #4b5674;       /* muted text on light (AA on mist) */
  --on-dark: #eef2f8;
  --on-dark-2: #a7b4cd;   /* muted text on dark (AA on oxford) */
  --line-dark: rgba(151, 179, 221, 0.16);
  --line-light: rgba(27, 35, 54, 0.12);

  --logo-gradient: linear-gradient(90deg, #97b3dd 7%, #c6d5ec 29%, #f0f4fa 62%, #fff 100%);

  /* Type — Raleway only. Sizes scale with the smaller of width and height so
     slides fit laptops with short screens as well as tall phones. */
  --font: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.6rem, min(7.2vw, 12.5vh), 8.25rem);
  --fs-h1: clamp(2.05rem, min(4.7vw, 8.4vh), 5.25rem);
  --fs-h2: clamp(1.55rem, min(2.9vw, 5.2vh), 3.1rem);
  --fs-h3: clamp(1.08rem, min(1.45vw, 2.6vh), 1.5rem);
  --fs-lead: clamp(1.02rem, min(1.35vw, 2.4vh), 1.4rem);
  --fs-body: clamp(0.94rem, min(1.02vw, 1.9vh), 1.1rem);
  --fs-small: clamp(0.78rem, min(0.82vw, 1.55vh), 0.875rem);

  /* Shape — radii follow the logo's rounded-bar construction */
  --r-xl: clamp(18px, 2vw, 32px);
  --r-l: clamp(14px, 1.4vw, 22px);
  --r-m: 12px;
  --r-pill: 999px;

  --gutter: clamp(18px, 4.2vw, 76px);
  --chrome-h: clamp(64px, 9vh, 96px);

  --ease: cubic-bezier(0.77, 0, 0.18, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--oxford);
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--livingston);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type helpers ---------- */
.t-display { font-size: var(--fs-display); font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; }
.t-h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1.04; letter-spacing: -0.028em; }
.t-h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; }
.t-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.t-lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.5; }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-muted { color: var(--ink-2); }
.t-num { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.t-wordmark { letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; font-size: var(--fs-small); }
.t-gradient {
  background: var(--logo-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.measure { max-width: 62ch; }
.measure-s { max-width: 44ch; }

/* ---------- Pills (from the reference deck: quiet outlined tags) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.42em 1.05em;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0.92;
}
.pill--solid { background: var(--lavender); color: var(--oxford); border-color: transparent; }
.pill--accent { border-color: var(--livingston); color: var(--livingston); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--livingston); }

/* ---------- Circular arrow button ---------- */
.circle-btn {
  --s: clamp(40px, 3.4vw, 54px);
  width: var(--s); height: var(--s);
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out);
  flex: none;
}
.circle-btn svg { width: 42%; height: 42%; }
.circle-btn:hover { background: var(--livingston); border-color: var(--livingston); color: var(--oxford); }

.btn {
  display: inline-flex; align-items: center; gap: 0.8em;
  padding: 0.85em 1.4em;
  border-radius: var(--r-pill);
  background: var(--lavender); color: var(--oxford);
  font-weight: 600; font-size: var(--fs-small);
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .3s var(--ease-out);
}
.btn:hover { background: #fff; }
.btn svg { width: 1.1em; height: 1.1em; }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost:hover { background: rgba(218, 225, 241, 0.12); }

/* ---------- Icons ---------- */
.ic { width: 1.4em; height: 1.4em; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-tile {
  width: clamp(40px, 3.2vw, 52px); height: clamp(40px, 3.2vw, 52px);
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--oxford);
  flex: none;
}
.ic-tile .ic { width: 52%; height: 52%; }

/* ---------- Logo ---------- */
.logo { display: block; height: clamp(22px, 2.1vw, 32px); width: auto; fill: currentColor; }
.logo-mark { height: clamp(24px, 2.2vw, 34px); width: auto; fill: currentColor; }