/* Weave AI Impact Report, Q2 2026: web edition.
 *
 * Screen-first. The print stylesheet (../report.css) is a fixed 8.5x11in paged layout with
 * no media queries and 97 absolute print units, so nothing is inherited from it except the
 * two things that must stay identical: the :root design tokens and the four @font-face
 * blocks. Every length below is fluid.
 */

/* ---------------------------------------------------------------- typefaces --- */
@font-face {
  font-family: "Inter Display";
  src: url("assets/fonts/InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("assets/fonts/InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("assets/fonts/InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("assets/fonts/InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------------------------------------------- tokens --- */
:root {
  /* Ported verbatim from report.css. */
  --brand: #e8552f;
  --rust: #b93c22;
  --heading: #54251f;
  --ink: #181f1b;
  --ink-soft: #2a2a2a;
  --warm-grey: #4a4038;
  --secondary: #7e746d;
  --text-light: #f3f1eb;
  --surface-bright: #f6f3f1;
  --surface: #f0ebe8;
  --surface-mid: #e6e0db;
  --surface-deep: #d9d1ca;
  --surface-deepest: #bfb6ae;
  --chart-dark: #43262b;
  --positive: #4c8008;

  /* Fluid type: the print column is 689px wide at 13.7px body text, so the desktop end
     of each ramp lands close to the printed proportions and the small end is set for a
     375px phone. */
  /* Set at about 0.9 of --step--1, matching the 8.6pt against 9.6pt ratio the print
     stylesheet uses for a source note against body copy. Continuing the geometric ratio
     would land near 0.64rem, which is too small to read on a phone. */
  --step--2: clamp(0.72rem, 0.69rem + 0.14vw, 0.8rem);
  --step--1: clamp(0.8rem, 0.76rem + 0.18vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.7rem + 4vw, 4.5rem);

  --space-2xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --space-xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem);
  --space-s: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-m: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --space-l: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --space-xl: clamp(3rem, 2.2rem + 3.6vw, 6rem);

  --measure: 42rem;
  --gutter: clamp(1.125rem, 0.7rem + 2vw, 3rem);
  --radius: 12px;
  --radius-s: 8px;
}

/* ------------------------------------------------------------------- resets --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: "Inter Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
  background: var(--surface-bright);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--heading);
  color: #fff;
  padding: var(--space-xs) var(--space-s);
  z-index: 100;
  border-radius: 0 0 var(--radius-s) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------------- hero --- */
.hero {
  background: var(--heading);
  color: var(--text-light);
  padding: var(--space-l) var(--gutter) var(--space-xl);
}
.hero-inner {
  max-width: 68rem;
  margin: 0 auto;
}
/* A masthead rather than a logo floating in the band: the hairline carries the mark across
   the full measure, and the link gives the row a right-hand anchor. */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.masthead-link {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--surface-deepest);
  text-decoration: none;
}
.masthead-link:hover {
  color: #fff;
}
.wordmark {
  color: #fff;
}
/* The logo is a 120x21 lockup, so the width follows from the height. It is sized on its own
   scale rather than a type step: the W glyph reaches past the letters top and bottom, so a
   lockup matched to neighbouring type by letter size reads far heavier than that type. */
.wordmark .logo {
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 120 / 21);
}
.masthead {
  --logo-h: clamp(18px, 1rem + 0.5vw, 22px);
}
.titleblock {
  margin-top: var(--space-l);
}
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: var(--space-s);
}
.hero .rule {
  height: 3px;
  width: 4rem;
  background: var(--brand);
  margin-bottom: var(--space-m);
}
.hero h1 {
  font-size: var(--step-5);
  line-height: 1.05;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-m);
  text-wrap: balance;
}
.hero-sub {
  font-size: var(--step-1);
  color: var(--surface-deepest);
  line-height: 1.55;
  max-width: 40rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
.hero-note {
  font-size: var(--step--1);
  color: var(--surface-deepest);
  margin-top: var(--space-s);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75em 1.35em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: #fff;
  color: var(--heading);
}
.btn-ghost {
  color: var(--text-light);
  border-color: rgba(243, 241, 235, 0.35);
}
.btn-ghost:hover {
  border-color: var(--text-light);
  background: rgba(243, 241, 235, 0.1);
}
.btn .arrow {
  font-weight: 400;
}

/* ------------------------------------------------------------------- layout --- */
.layout {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------------------- toc --- */
.toc {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(var(--gutter) * -1);
  background: var(--surface-bright);
  border-bottom: 1px solid var(--surface-mid);
}
.toc-shell {
  padding: 0 var(--gutter);
  position: relative;
}
.toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-s) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}
.toc-summary::-webkit-details-marker {
  display: none;
}
.toc-chevron {
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.toc-shell[open] .toc-chevron {
  transform: rotate(-135deg);
}
/* Narrow: the open list drops over the page instead of joining the sticky bar, so the
   bar itself never occupies more than its own height while scrolling. */
.toc-list {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 65vh;
  overflow-y: auto;
  padding: 0 var(--gutter) var(--space-s);
  background: var(--surface-bright);
  border-bottom: 1px solid var(--surface-mid);
  box-shadow: 0 14px 26px rgba(84, 37, 31, 0.12);
}
/* Most sub-entries wrap to two or three lines, so the leading inside an entry has to
   read tighter than the space separating entries or a wrapped entry reads as two.
   Body leading (1.4) is too open for that: it leaves the lines of one entry almost as
   far apart as two adjacent entries. Padding stays in em so both scale with --step--1. */
.toc-item a {
  display: block;
  padding: 0.4em 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--surface-mid);
  line-height: 1.25;
}
.toc-item.part a {
  font-weight: 600;
  color: var(--heading);
}
/* Top-level entries open a group, so they get air above them that the entries inside a
   group do not. Without it every row sits on the same rhythm and the four sub-entries
   under a part read as loose neighbours rather than as its contents. */
.toc-item.part:not(:first-child) {
  margin-top: var(--space-2xs);
}
.toc-item.sub a {
  padding-left: 1rem;
  color: var(--secondary);
}
/* Dropping the separators back lets each topic read as its own chunk. At text weight the
   middots punctuate a sentence; quieted, they divide a list. */
.toc-sep {
  color: var(--surface-deepest);
  margin: 0 0.08em;
}
.toc-item a:hover {
  color: var(--brand);
}
.toc-item a[aria-current="true"] {
  color: var(--brand);
  font-weight: 600;
}
.toc-download {
  display: none;
}

/* ------------------------------------------------------------------ article --- */
.article {
  padding: var(--space-l) 0 var(--space-xl);
}
/* Prose sits in a reading measure; charts break out to the full column, because the
   matplotlib figures carry baked-in type sizes and go unreadable once scaled below
   roughly three quarters of their intrinsic width. */
.chapter {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [content-start] minmax(0, var(--measure))
    [content-end] minmax(0, 1fr)
    [full-end];
  max-width: 62rem;
  margin: 0 auto var(--space-xl);
  scroll-margin-top: 5rem;
}
.chapter > * {
  grid-column: content;
}
.chapter > .chart-figure {
  grid-column: full;
}
.chapter:last-child {
  margin-bottom: 0;
}

.chapter-title {
  font-size: var(--step-3);
  line-height: 1.16;
  font-weight: 500;
  color: var(--heading);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-s);
  text-wrap: balance;
}
.chapter-title.xl {
  font-size: var(--step-4);
}
.subhead {
  font-size: var(--step-2);
  line-height: 1.25;
  font-weight: 500;
  color: var(--heading);
  letter-spacing: -0.01em;
  margin: var(--space-l) 0 var(--space-s);
  text-wrap: balance;
}

.chapter p {
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}
.chapter p.lede {
  font-size: var(--step-1);
  color: var(--warm-grey);
  line-height: 1.55;
}
strong {
  font-weight: 600;
  color: var(--ink);
}
em {
  font-style: italic;
}

ul.tight {
  margin: 0 0 var(--space-s) 1.1rem;
}
ul.tight li {
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
}

.feature-kicker {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

/* ------------------------------------------------------------------ callout --- */
.callout {
  border-top: 2.5px solid var(--heading);
  border-bottom: 1px solid var(--surface-deep);
  padding: var(--space-s) 0 var(--space-m);
  margin: var(--space-m) 0;
}
.callout .tag {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: var(--space-2xs);
}
.callout p {
  font-size: var(--step--1);
  line-height: 1.6;
}
.callout p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- tables --- */
.dtable {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-m) 0 var(--space-2xs);
  font-size: var(--step--1);
}
.dtable th {
  text-align: left;
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondary);
  border-bottom: 1px solid var(--surface-deep);
  padding: 0 var(--space-s) var(--space-2xs) 0;
}
.dtable td {
  padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
  border-bottom: 1px solid var(--surface-mid);
}
.dtable tr:last-child td { border-bottom: 0; }
.dtable .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}
.dtable td.num { color: var(--ink); font-weight: 600; }
p.tnote {
  font-size: var(--step--2);
  color: var(--secondary);
  margin-top: var(--space-2xs);
}

/* ---------------------------------------------------------------- stat rows --- */
.stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin: var(--space-m) 0;
}
@media (min-width: 40rem) {
  .stat-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .stat-row.two {
    grid-template-columns: repeat(2, 1fr);
  }
}
.stat {
  background: #fff;
  border: 1px solid var(--surface-mid);
  border-radius: var(--radius);
  padding: var(--space-s) var(--space-m);
}
.stat .n {
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.stat .n.dark {
  color: var(--chart-dark);
}
.stat .d {
  font-size: var(--step--1);
  color: var(--secondary);
  margin-top: var(--space-2xs);
  line-height: 1.4;
}

/* ----------------------------------------------------------------- for-users --- */
.for-users {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--step--1);
  color: var(--secondary);
  border-left: 2.5px solid var(--brand);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s);
  margin: var(--space-m) 0;
  line-height: 1.5;
}
.for-users .cta {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.for-users .cta:hover {
  text-decoration: underline;
}
@media (min-width: 48rem) {
  .for-users {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
  }
  .for-users .cta {
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------- charts --- */
/* Chart type sizes are baked into the matplotlib figure coordinate system, so one render
   cannot serve every width: the 1123pt print figure puts 15.5pt labels at 5px on a phone.
   Charts therefore ship in two renders of the same data and app.js puts exactly one of
   them in the DOM. Two bands:
     >= 56.25rem  wide render, fits the column, labels 12px and up
     <  56.25rem  phone render, fits with no scrolling, labels ~11px at 375px, capped at
                  34rem and centred above 37.5rem
   The phone figure is a 374.4pt viewBox, so its point sizes are close to 1:1 with CSS px
   at a 375px viewport and scale with the viewport from there.

   The tablet band used to take the wide render at its intrinsic 54rem and scroll it. That
   was tolerable when the wide render was a centred plot, since the overflow was empty
   margin. It is not tolerable now that the wide render is a two-column composition: the
   clipped strip is the value column and the ledger figures, which is the payload. */
.chart-figure {
  margin: var(--space-m) 0;
}
.chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(84, 37, 31, 0.08);
}
.chart-svg {
  display: block;
  width: 54rem;
  max-width: none;
  height: auto;
}
.chart-hint {
  font-size: var(--step--1);
  color: var(--secondary);
  margin-top: var(--space-xs);
}

@media (max-width: 56.24rem) {
  /* Full-bleed out of the reading column so the scrollable chart gets the whole screen. */
  .chart-figure {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .chart-scroll {
    border-radius: 0;
  }
  .chart-hint {
    padding: 0 var(--gutter);
  }
}

/* The phone render is already sized for the screen, so it neither scrolls nor needs the
   hint telling you to scroll. */
.chart-scroll[data-chart-variant="mobile"] {
  overflow-x: hidden;
}
.chart-scroll[data-chart-variant="mobile"] .chart-svg {
  width: 100%;
}
.chart-figure:has(> [data-chart-variant="mobile"]) .chart-hint {
  display: none;
}

/* Tablet. The phone render serves this band too, but it is capped and centred rather than
   stretched to the column: its type sizes are baked into a 374pt viewBox, so a phone
   render filling 880px sets its 11pt labels at 26px. Nothing below 37.5rem is touched. */
@media (min-width: 37.5rem) and (max-width: 56.24rem) {
  .chart-figure:has(> [data-chart-variant="mobile"]) {
    margin-left: 0;
    margin-right: 0;
  }
  .chart-scroll[data-chart-variant="mobile"] {
    max-width: 34rem;
    margin: 0 auto;
    border-radius: var(--radius);
  }
}

@media (min-width: 56.25rem) {
  .chart-svg {
    width: 100%;
  }
  .chart-hint {
    display: none;
  }
}

/* ------------------------------------------------------------- part markers --- */
.part-marker {
  background: var(--heading);
  color: var(--text-light);
  border-radius: var(--radius);
  padding: var(--space-l) var(--space-m);
  margin: 0 0 var(--space-xl);
  scroll-margin-top: 5rem;
}
.part-inner {
  max-width: var(--measure);
  margin: 0 auto;
}
.partno {
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: var(--space-s);
}
.part-title {
  font-size: var(--step-3);
  font-weight: 500;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-xs);
  text-wrap: balance;
}
.pillars {
  font-size: var(--step-0);
  color: var(--surface-deepest);
  margin-bottom: var(--space-m);
}
.part-body p {
  color: var(--surface-deep);
  margin-bottom: var(--space-s);
}

.framework {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-top: var(--space-m);
}
@media (min-width: 34rem) {
  .framework {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 56.25rem) {
  .framework {
    grid-template-columns: repeat(4, 1fr);
  }
}
.framework-card {
  border-top: 1px solid rgba(243, 241, 235, 0.25);
  padding-top: var(--space-s);
}
.framework-card h3 {
  color: var(--brand);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--step--1);
  margin-bottom: var(--space-xs);
}
.framework-card ul {
  list-style: none;
}
.framework-card li {
  color: var(--surface-deep);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* ------------------------------------------------------------------- footer --- */
.sitefoot {
  background: var(--heading);
  color: var(--text-light);
  padding: var(--space-xl) var(--gutter) var(--space-l);
}
.sitefoot-inner {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
@media (min-width: 48rem) {
  .sitefoot-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.sitefoot-brand .wordmark {
  margin-bottom: var(--space-s);
}
/* The sign-off carries the mark a little larger than the masthead, matching how the print
   back cover sits above the cover. */
.sitefoot-brand {
  --logo-h: clamp(23px, 1.2rem + 0.7vw, 28px);
}
.sitefoot p {
  color: var(--surface-deep);
  max-width: 26rem;
}
.sitefoot .url {
  color: #fff;
  font-weight: 500;
  margin-top: var(--space-xs);
  font-size: var(--step-1);
}
.copyright {
  max-width: 68rem;
  margin: var(--space-l) auto 0;
  font-size: var(--step--1);
  color: var(--secondary);
  border-top: 1px solid rgba(243, 241, 235, 0.15);
  padding-top: var(--space-s);
}

/* ------------------------------------------------ two-column desktop layout --- */
@media (min-width: 62rem) {
  .layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
  }
  .toc {
    position: sticky;
    top: var(--space-m);
    margin: var(--space-xl) 0 0;
    background: transparent;
    border-bottom: 0;
    max-height: calc(100vh - var(--space-l));
    overflow-y: auto;
  }
  .toc-shell {
    padding: 0;
    border-left: 1px solid var(--surface-mid);
    padding-left: var(--space-s);
  }
  .toc-summary {
    cursor: default;
    pointer-events: none;
    padding-top: 0;
  }
  .toc-chevron {
    display: none;
  }
  .toc-list {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }
  /* The sidebar drops the divider rules. Group separation is carried by the margin above
     each top-level entry rather than by padding on every row, which keeps the grey block
     inside a group tight instead of spending the height uniformly. */
  .toc-item a {
    border-bottom: 0;
    padding: 0.3em 0;
  }
  .toc-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: var(--space-s);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
  }
  .toc-download:hover {
    text-decoration: underline;
  }
  .article {
    padding-top: var(--space-xl);
  }
  .chapter,
  .part-inner {
    margin-left: 0;
  }
  .part-marker {
    padding: var(--space-l);
  }
}