/* ========================================
   GLOBAL
======================================== */

:root {
  /* Colors — tuned to Pantone's Cloud Dancer pastel family.
     The neutrals carry a little warmth rather than being pure grey, so they
     sit at the same temperature as the ground instead of reading cold on it. */
  --color-bg: #ffffff;
  --color-surface: #fbfaf7;             /* a faint warm tint, so cards read against the white */
  --color-text: #1c1a17;
  --color-secondary: #6e6960;           /* 5.13:1 on white */
  --color-tertiary: #a29c92;            /* decorative bar fill, never text */
  --color-line: rgba(28, 26, 23, 0.14);

  /* The pastels Pantone pairs with Cloud Dancer. Available for use;
     applied sparingly, because the project pages carry their own palettes. */
  --pantone-cloud-dancer: #f0eee9;      /* 11-4201 */
  --pantone-lemon-icing:  #f4eccc;      /* 11-0515 */
  --pantone-nimbus-cloud: #d5d5d7;      /* 13-4108 */
  --pantone-raindrops:    #e8d9dc;      /* 11-1400 Raindrops on Roses */
  --pantone-ice-melt:     #d7e4f0;      /* 13-4306 */
  --pantone-peach-dust:   #ecdace;      /* 12-1107 */
  --pantone-almost-aqua:  #cbd3c2;      /* 13-6006 */
  --pantone-orchid-tint:  #dad4dc;      /* 13-3802 */

  --color-accent: var(--pantone-almost-aqua);

  /* Layout */
  --page-max: 1600px;
  --page-padding: 48px;

  --reading-width: 680px;
  --content-width: 1120px;

  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 120px;
  --space-4xl: 160px;

  /* Figures. Many boards and charts are white artwork on a white page, so each
     one needs its own edge: a rounded corner, a hairline to draw the boundary,
     and a soft shadow to lift it off the paper. */
  --radius-figure: 12px;
  --ring-figure: 0 0 0 1px rgba(28, 26, 23, 0.11);
  --shadow-figure: 0 1px 2px rgba(28, 26, 23, 0.05), 0 12px 32px rgba(28, 26, 23, 0.10);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ========================================
   RESET
======================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    "PingFang SC",
    "Hiragino Sans GB",
    sans-serif;

  font-size: 17px;
  line-height: 1.55;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

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

button,
input,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

::selection {
  background: #111;
  color: #fff;
}


/* ========================================
   PAGE CONTAINER
======================================== */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.reading {
  width: 100%;
  max-width: var(--reading-width);
}

.content-width {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}


/* ========================================
   NAVIGATION
======================================== */

.site-header {
  width: 100%;
  height: 80px;

  /* Sticky from the start; only the surface changes on scroll, so the page
     never jumps when the header changes position. */
  position: sticky;
  top: 0;
  z-index: 100;

  background: transparent;
  border-bottom: 1px solid transparent;

  transition:
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    border-color 0.3s ease;
}

.site-header.scrolled {
  /* Must track --color-bg: alpha means it cannot use the variable directly. */
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--color-line);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-nav {
  width: 100%;
  max-width: var(--page-max);
  height: 100%;

  margin: 0 auto;

  padding-left: var(--page-padding);
  padding-right: var(--page-padding);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;

  font-size: 15px;
}

.nav-links a {
  color: var(--color-secondary);

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text);
}


/* ========================================
   TYPOGRAPHY
======================================== */

.display {
  font-size: clamp(54px, 6vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.048em;
  font-weight: 500;
}

.display-small {
  font-size: clamp(42px, 4.5vw, 68px);
  line-height: 1;
  letter-spacing: -0.042em;
  font-weight: 500;
}

h1 {
  font-size: clamp(48px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 500;
}

h2 {
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
}

h3 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 500;
}

h4 {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 500;
}

p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
}

.text-large {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.text-small {
  font-size: 14px;
  line-height: 1.5;
}

.caption {
  margin-top: 12px;

  font-size: 13px;
  line-height: 1.45;

  color: var(--color-secondary);
}

.eyebrow {
  margin-bottom: 18px;

  font-size: 13px;
  line-height: 1.3;

  color: var(--color-secondary);

  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.muted {
  color: var(--color-secondary);
}


/* ========================================
   LINKS / BUTTONS
======================================== */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 15px;

  white-space: nowrap;
}

.text-link::after {
  content: "\2197";
  transition: transform 0.25s ease;
}

.text-link:hover::after {
  transform: translate(2px, -2px);
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 46px;

  padding: 0 22px;

  border-radius: 999px;

  background: var(--color-text);
  color: #fff;

  font-size: 15px;

  transition:
    transform 0.25s var(--ease),
    opacity 0.25s ease;
}

.button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.button-secondary {
  background: transparent;
  color: var(--color-text);

  border: 1px solid var(--color-line);
}


/* ========================================
   DIVIDER
======================================== */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-line);
}


/* ========================================
   FOOTER
======================================== */

.site-footer {
  margin-top: 160px;
  padding-bottom: 48px;
}

.footer-inner {
  padding-top: 32px;
  border-top: 1px solid var(--color-line);

  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.footer-inner p {
  margin: 0;

  font-size: 14px;
  color: var(--color-secondary);
}


/* ========================================
   ACCESSIBILITY
======================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;

  padding: 12px 18px;

  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);

  font-size: 14px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

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

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

}


/* ========================================
   MOTION

   Purely additive. The `.js` class is set by an inline script in <head>, so
   with JavaScript off nothing is ever hidden — the page just renders static.
   Reduced-motion users get the final state immediately.
======================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity 0.65s var(--ease),
    transform 0.65s var(--ease);

  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;

  will-change: auto;
}

/* Stagger siblings: data-delay="1" | "2" | "3" */
.js [data-reveal][data-delay="1"] { transition-delay: 0.09s; }
.js [data-reveal][data-delay="2"] { transition-delay: 0.18s; }
.js [data-reveal][data-delay="3"] { transition-delay: 0.27s; }

/* Image reveal — the frame holds still while the picture settles back to 1.
   Only used on case-study media, never on home cards (those own their
   transform for the hover state). */
.js [data-reveal-image] {
  overflow: hidden;
}

.js [data-reveal-image] img {
  transform: scale(1.06);
  transition: transform 1.1s var(--ease);
}

.js [data-reveal-image].is-visible img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

  .js [data-reveal],
  .js [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .js [data-reveal-image] img {
    transform: none !important;
  }

}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 900px) {

  :root {
    --page-padding: 28px;
  }

  .site-header {
    height: 72px;
  }

  .display {
    font-size: clamp(46px, 9vw, 68px);
  }

  h1 {
    font-size: clamp(44px, 8vw, 64px);
  }

}


@media (max-width: 640px) {

  :root {
    --page-padding: 20px;

    --space-3xl: 80px;
    --space-4xl: 110px;
  }

  body {
    font-size: 16px;
  }

  .nav-links {
    gap: 16px;
    font-size: 14px;
  }

  .display {
    font-size: 46px;
  }

  h1 {
    font-size: 44px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 23px;
  }

  p {
    font-size: 16px;
  }

  .text-large {
    font-size: 19px;
  }

  .site-footer {
    margin-top: 110px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 12px;
  }

}