/* ==========================================================================
   Numbers V2 — shared design system
   Owner: header agent. Every V2 page links this file.

   Colours, fonts and easings come from /css/tokens.css (brand-system.md,
   "Color, second look", pick B). Nothing here hardcodes a hex: a recolor
   stays a one-file change in tokens.css.

   What is in here
   ---------------
   container + 12-column grid
   type scale: .t-display .t-h1 .t-h2 .t-h3 .t-lead .t-body .t-small .t-mono
   .eyebrow (pill), .chip (ink / white / electric), .btn (primary, ghost,
   electric, ghost-dark, sizes s/m/l), .card (light, cloud, dark, photo)
   .section rhythm, .rule hairlines, .bars four-bar strip, .sticker helper,
   .sr-only, skip link, focus ring, reduced motion.

   Theme
   -----
   <body data-theme="dark"> (or a section with .theme-black / data-theme)
   flips the semantic vars used by the type scale and the components.
   ========================================================================== */

@import url("/css/tokens.css");

:root {
  /* layout */
  --v2-max: 1440px;
  --v2-content: 1248px;
  --v2-gutter: 96px;
  --v2-grid-gap: 24px;

  /* section rhythm: 128 above/below on a laptop, 64 on a phone */
  --v2-section: 128px;
  --v2-section-tight: 80px;

  /* navy height, shared with header.css */
  --v2-nav-h: 76px;

  --v2-radius-card: 16px;
  --v2-radius-photo: 10px;
  --v2-radius-tile: 12px;

  /* semantic type colours, overridden on a dark ground */
  --t-lead-color: var(--body-ink);
  --t-body-color: var(--mute);
  --t-small-color: var(--body-ink);
  --t-mono-color: var(--mute);
  --t-display-color: var(--ink);
  --t-heading-color: var(--ink);
  --v2-rule: var(--hairline);
  --focus-ring: var(--up);
}

/* A dark ground can be declared on <body> (data-theme) or on any section
   (.theme-black comes from tokens.css, data-theme="dark" is the page API). */
.theme-black,
[data-theme="dark"],
[data-theme="black"] {
  --t-lead-color: var(--body-on-black);
  --t-body-color: var(--body-on-black);
  --t-small-color: var(--body-on-black);
  --t-mono-color: var(--label-on-black);
  --t-display-color: var(--white);
  --t-heading-color: var(--white);
  --v2-rule: var(--line);
  --focus-ring: var(--electric);
  --ground: var(--black);
  --fg: var(--white);
  --lead: var(--body-on-black);
  --label: var(--label-on-black);
  --rule: var(--line);
  color-scheme: dark;
}

[data-theme="light"],
[data-theme="white"] {
  color-scheme: light;
}

/* ---------- reset, scoped to the V2 site ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground, var(--white));
  color: var(--fg, var(--ink));
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

::selection { background: var(--up); color: var(--white); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  transition: top .18s var(--ease-soft);
}
.skip-link:focus { top: 12px; }

/* on a black hero the skip link must not disappear into the nav */
body[data-nav-resolved="dark"] .skip-link {
  background: var(--electric);
  color: var(--ink);
}

/* ---------- container + grid ---------- */
.container {
  width: 100%;
  max-width: var(--v2-max);
  margin-inline: auto;
  padding-inline: var(--v2-gutter);
}

.container--narrow { max-width: calc(var(--v2-content) + var(--v2-gutter) * 2); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--v2-grid-gap);
  align-items: start;
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-12 { grid-column: span 12; }

/* two things that truly belong side by side: a picture and its story */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ---------- type scale (brand-system.md, section 2) ---------- */
.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-ui);
  font-weight: 800;
  text-wrap: balance;
}

.t-display {
  font-size: 88px;
  line-height: 88px;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--t-display-color);
}

.t-h1 {
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -0.03em;
  color: var(--t-heading-color);
}

.t-h2 {
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.03em;
  color: var(--t-heading-color);
}

.t-h3 {
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--t-heading-color);
}

.t-lead {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 130%;
  font-weight: 400;
  color: var(--t-lead-color);
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  color: var(--t-body-color);
  text-wrap: pretty;
}

.t-small {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--t-small-color);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-mono-color);
}

/* element defaults; page CSS loads after this file and can override */
h1 { font-size: 64px; line-height: 68px; letter-spacing: -0.03em; font-weight: 800; color: var(--t-heading-color); text-wrap: balance; }
h2 { font-size: 48px; line-height: 52px; letter-spacing: -0.03em; font-weight: 800; color: var(--t-heading-color); text-wrap: balance; }
h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; font-weight: 700; color: var(--t-heading-color); }

/* ---------- eyebrows ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 15px;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  flex: none;
}
.theme-black .eyebrow,
[data-theme="dark"] .eyebrow,
[data-theme="black"] .eyebrow {
  background: var(--raised);
  border-color: var(--line);
  color: var(--label-on-black);
}
.theme-black .eyebrow::before,
[data-theme="dark"] .eyebrow::before,
[data-theme="black"] .eyebrow::before { background: var(--electric); }

/* ---------- chips: square corners mark words ---------- */
.chip {
  display: inline-block;
  padding: 0.02em 0.2em 0.06em;
  border-radius: 0.16em;
  line-height: 0.94;
  white-space: nowrap;
}
.chip--ink { background: var(--ink); color: var(--white); }
.chip--white { background: var(--white); color: var(--ink); }
.chip--electric { background: var(--electric); color: var(--ink); }
.chip--up { background: var(--up); color: var(--ink); }

/* ---------- buttons: round pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s var(--ease-soft), color .18s var(--ease-soft),
              border-color .18s var(--ease-soft);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .18s var(--ease-soft); }
.btn:hover svg { transform: translateX(4px); }

.btn--l { height: 52px; padding: 0 24px; font-size: 17px; }
.btn--m { height: 44px; padding: 0 20px; font-size: 15px; }
.btn--s { height: 36px; padding: 0 16px; font-size: 14px; }

/* on white: ink pill, electric on hover */
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--electric); color: var(--ink); }

/* on white: outline pill */
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--button-line); }
.btn--ghost:hover { background: var(--fill); border-color: var(--ink); }

/* on black: electric pill, white on hover */
.btn--electric { background: var(--electric); color: var(--ink); }
.btn--electric:hover { background: var(--white); color: var(--ink); }

/* on black: outline pill */
.btn--ghost-dark { background: transparent; color: var(--white); border-color: var(--btn-line-on-black); }
.btn--ghost-dark:hover { background: var(--raised); border-color: var(--white); }

/* text link: 15 semibold with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--t-heading-color);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .18s var(--ease-soft); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- section rhythm + hairlines ---------- */
.section { padding-block: var(--v2-section); }
.section--tight { padding-block: var(--v2-section-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.rule { border: 0; border-top: 1px solid var(--v2-rule); margin: 0; }
.rule--dark { border-top-color: var(--line); }
.hairline { height: 1px; width: 100%; background: var(--v2-rule); border: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--v2-rule);
  border-radius: var(--v2-radius-card);
  background: var(--white);
  color: var(--ink);
  padding: 32px;
}
.card--cloud { background: var(--cloud); }
.card--dark {
  background: var(--black);
  border-color: var(--line);
  color: var(--white);
  --t-heading-color: var(--white);
  --t-body-color: var(--body-on-black);
  --t-lead-color: var(--body-on-black);
  --t-mono-color: var(--label-on-black);
  --v2-rule: var(--line);
}
.card--photo { padding: 8px; border-radius: var(--v2-radius-card); background: var(--white); }
.card--photo img { border-radius: var(--v2-radius-photo); width: 100%; height: auto; }

/* tile: the 142 px rounded square family */
.tile {
  border-radius: var(--v2-radius-tile);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--v2-rule);
}

/* the four logo bars as a 4 px strip (dark cards) */
.bars { display: flex; gap: 2px; width: 72px; height: 4px; }
.bars i { display: block; flex: 1; height: 100%; border-radius: 1px; background: var(--sky); }
.bars i:nth-child(2) { background: var(--pink); }
.bars i:nth-child(3) { background: var(--electric); }
.bars i:nth-child(4) { background: var(--up); }

/* ---------- stickers: absolute, tilted, never in the text flow ---------- */
.sticker-host { position: relative; }

.sticker {
  position: absolute;
  z-index: 3;
  width: var(--sticker-w, 160px);
  transform: rotate(var(--tilt, -4deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}
.sticker img { width: 100%; height: auto; }

/* cardboard-card sticker anchors */
.sticker--tl { top: 0; left: 0; translate: -30% -30%; }
.sticker--tr { top: 0; right: 0; translate: 30% -30%; }
.sticker--bl { bottom: 0; left: 0; translate: -30% 30%; }
.sticker--br { bottom: 0; right: 0; translate: 30% 30%; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  :root { --v2-gutter: 48px; }
}

@media (max-width: 900px) {
  :root {
    --v2-section: 80px;
    --v2-section-tight: 56px;
  }
  .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-12 > [class*="span-"] { grid-column: span 6; }
  .split { grid-template-columns: 1fr; }
  .t-display { font-size: 60px; line-height: 62px; }
  .t-h1, h1 { font-size: 48px; line-height: 52px; }
  .t-h2, h2 { font-size: 38px; line-height: 42px; }
}

@media (max-width: 600px) {
  :root {
    --v2-gutter: 20px;
    --v2-grid-gap: 16px;
    --v2-section: 64px;
    --v2-section-tight: 48px;
  }
  body { font-size: 16px; line-height: 25px; }
  .t-display { font-size: 48px; line-height: 50px; }
  .t-h1, h1 { font-size: 40px; line-height: 44px; }
  .t-h2, h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.025em; }
  .t-h3, h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.015em; }
  .t-lead { font-size: 17px; line-height: 26px; }
  .t-body { font-size: 16px; line-height: 25px; }
  .t-small { font-size: 14px; line-height: 22px; }
  .t-mono { font-size: 11px; line-height: 16px; }
  .btn { height: 44px; padding: 0 18px; font-size: 15px; }
  .btn--l { height: 48px; padding: 0 22px; font-size: 16px; }
  .btn--s { height: 36px; padding: 0 14px; font-size: 14px; }
  .card { padding: 24px; }
  .section-head { margin-bottom: 36px; gap: 20px; }
  .sticker { width: min(var(--sticker-w, 160px), 132px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}