/* ==========================================================================
   Gaia Solutions — gaia-solutions.earth
   One stylesheet. Tokens first, then base, then patterns.

   Palette rules that are load-bearing (do not "tidy" these away):
   1. --alert appears ONLY where something exceeds a threshold, or on a caveat
      block. Never a general warm accent. Its value sits close to EPA AQI
      orange, which the Gaia app uses for "Unhealthy for Sensitive Groups" —
      same colour, same meaning, across app and site.
   2. --lav does two jobs that never collide because they differ by scale:
      full-bleed nav/footer chrome, and a 4px series marker on library entries.
   3. Series colours identify a line of enquiry. They carry no severity meaning.

   Text shades: the seven brand hexes were designed for surfaces, and most of
   them fail WCAG AA as text (--mint on --paper is 2.28:1). Each therefore has
   a -text variant at the same hue for type, while the original value is kept
   for surfaces and non-text marks. --alert in particular keeps its exact
   original value on the chart stroke, which is where app parity lives.
   ========================================================================== */

/* -------------------------------------------------------------- @font-face */
/* Self-hosted. No third-party font request in production, by design.
   Both families are variable, so one file per style covers every weight. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin-italic.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin-ext-italic.woff2') format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Surfaces */
  --paper: #fbf7f6;
  --blush: #f4e6e6;
  --cool: #f4f9f9;
  --surface: #ffffff;

  /* Brand chrome — existing recognition equity, keep it */
  --lav: #cbb0f4;
  --lav-pale: #efe6fb;
  --lav-deep: #9f7fd4;

  /* Ink */
  --ink: #1c1a1b;
  --soft: #6e6567;
  --faint: #a79ea0;

  /* Semantic — these two carry meaning and must not be used decoratively */
  --mint: #01bd8a;
  --alert: #ff7e69;

  /* Text-safe variants — same hue as the brand value, darkened until they clear
     WCAG AA (4.5:1) on the WORST of our five surfaces, not just on --paper.
     --blush (L=0.815) and --lav-pale (L=0.819) are the binding constraints; a
     shade tuned to --paper (L=0.937) fails on the B2C door and the placeholder.
     Ratios below are the worst case across all five. Type only — surfaces and
     non-text marks keep the original brand values. */
  --mint-text: #017858; /* 4.52:1 */
  /* Surface variant, for white type on a mint fill. White on --mint itself is
     2.43:1 — the primary CTA is 12.5px bold, which does not qualify as "large",
     so it needs the full 4.5:1. Same hue, 48% of mint's brightness. */
  --mint-deep: #018763; /* white on this = 4.52:1 */
  --alert-text: #a45144; /* 4.51:1 */
  --faint-text: #6d6769; /* 4.56:1 */
  --lav-text: #716288; /* 4.55:1 */

  /* Library series colours — identity only, no severity meaning */
  --s-vent: #91d0f2;
  --s-moist: #ace5cf;
  --s-mould: var(--lav);
  --s-summer: #ffd99c;
  --s-plants: var(--s-moist);

  /* Rules */
  --rule: #e7dbdb;
  --rule-cool: #dce7e7;

  --serif: 'EB Garamond', Garamond, Georgia, serif;
  --sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
    sans-serif;
  --mx: 1120px;
}

/* -------------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
}

body.t-cool {
  background: var(--cool);
}

.wrap {
  max-width: var(--mx);
  margin: 0 auto;
  padding: 0 30px;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: clamp(33px, 5.2vw, 56px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.022em;
  margin: 20px 0;
  max-width: 20ch;
}

h1 em {
  font-style: italic;
  font-weight: 500;
}

h2 {
  font-size: clamp(25px, 3vw, 33px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.16;
  margin: 0 0 16px;
  max-width: 27ch;
}

h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

p {
  margin: 0 0 15px;
}

/* Subscript in formulae (CO2). Using <sub> rather than the U+2082 character
   keeps the glyph inside the font subset we ship. */
sub {
  font-size: 0.7em;
  line-height: 0;
}

/* Long unbroken tokens — file paths, DOIs, URLs — must wrap, or they push the
   page wider than a 360px viewport. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--lav-pale);
  padding: 0.1em 0.34em;
  overflow-wrap: anywhere;
}

.cite a,
.article a {
  overflow-wrap: anywhere;
}

.sect {
  padding: 70px 0;
  border-top: 1px solid var(--rule);
}

body.t-cool .sect {
  border-top-color: var(--rule-cool);
}

.sect.plain {
  border-top: 0;
}

.hero {
  padding: 60px 0 0;
}

.dek {
  font-size: 20.5px;
  line-height: 1.48;
  color: var(--soft);
  max-width: 49ch;
  margin: 0;
}

/* ------------------------------------------------------------ utility type */

.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint-text);
}

.eyebrow.mute {
  color: var(--faint-text);
}

.label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint-text);
}

.u {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.62;
  color: var(--soft);
}

.u strong {
  color: var(--ink);
  font-weight: 600;
}

.num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- accessibility helpers */

/* Moved out of view vertically rather than with a negative `left`, so it can
   never contribute to horizontal scroll on a narrow viewport. */
.skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-200%);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 20px;
  text-decoration: none;
}

.skip:focus {
  transform: translateY(0);
}

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

/* --------------------------------------------------------------------- nav */
/* Lavender chrome retained — it is the one visual asset referral traffic
   already recognises. Text is --ink (9.11:1) rather than white (1.90:1). */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lav);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-in {
  max-width: var(--mx);
  margin: 0 auto;
  padding: 14px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.logo img {
  display: block;
  width: 104px;
  height: auto;
}

.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nav-links a {
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
}

.nav-links a:hover {
  border-bottom-color: var(--ink);
}

.nav-links a[aria-current='page'] {
  font-weight: 700;
  border-bottom-color: var(--ink);
}

.nav-tog {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  border: 1px solid var(--ink);
  transition:
    background 0.18s,
    color 0.18s;
}

.btn:hover {
  background: transparent;
  color: var(--ink);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
}

.btn.ghost:hover {
  background: var(--ink);
  color: var(--surface);
}

/* Primary CTA — white on green, which needs --mint-deep rather than --mint:
   white on --mint is 2.43:1 and fails AA at this size. */
.btn.mint {
  background: var(--mint-deep);
  border-color: var(--mint-deep);
  color: var(--surface);
}

.btn.mint:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.tlink {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-bottom: 1.5px solid var(--mint);
  padding-bottom: 2px;
}

.tlink:hover {
  border-bottom-color: var(--ink);
}

.tlink.sm {
  font-size: 11.5px;
}

.actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.actions.mt {
  margin-top: 26px;
}

/* ------------------------------------------------------------- image block */

figure {
  margin: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Placeholder for imagery not yet shot. Temporary by definition — when the
   real frame lands, replace the whole .ph block with a <figure class="shot">. */
.ph {
  position: relative;
  background: var(--lav-pale);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px;
  min-height: 200px;
  overflow: hidden;
}

.ph.tall {
  min-height: 320px;
}

.ph.short {
  min-height: 150px;
}

.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 12px,
    rgba(159, 127, 212, 0.07) 12px 13px
  );
}

.ph span {
  position: relative;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  max-width: 34ch;
}

.ph span b {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--lav-text);
}

/* ---------------------------------------------------------- weighted doors */

.b2c-door {
  background: var(--blush);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  margin-top: 38px;
}

.b2c-door .copy {
  padding: 44px 42px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.b2c-door h2 {
  font-size: clamp(27px, 3.3vw, 37px);
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 13px;
}

.b2c-door p {
  font-size: 17.5px;
  color: var(--soft);
  max-width: 34ch;
}

.b2c-door .wom {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--soft);
  border-left: 2px solid var(--mint);
  padding-left: 12px;
  margin: 20px 0 22px;
  line-height: 1.5;
  max-width: 36ch;
}

.b2c-door .shot,
.b2c-door .shot img {
  height: 100%;
}

.b2c-door .shot img {
  object-fit: cover;
}

.b2b-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  background: var(--cool);
  border: 1px solid var(--rule-cool);
  border-top: 0;
  padding: 22px 42px;
}

.b2b-strip .t {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 46ch;
  line-height: 1.45;
}

.b2b-strip .t small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--soft);
  margin-top: 4px;
}

/* ------------------------------------------------------------------- triad */

.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 32px;
}

.triad-c {
  background: var(--paper);
  padding: 25px 23px 29px;
}

.triad-c .vb {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mint-text);
  display: block;
  margin-bottom: 11px;
}

.triad-c p {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--soft);
  margin: 0;
}

/* ---------------------------------------------------------- library strip */

.lib {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}

.lib-c {
  background: var(--surface);
  padding: 16px 16px 20px;
  position: relative;
  text-decoration: none;
  display: block;
  transition: background 0.18s;
}

.lib-c:hover {
  background: var(--paper);
}

.lib-c .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.lib-c .s {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint-text);
  margin: 0 0 8px 11px;
}

.lib-c .t {
  display: block;
  font-size: 17px;
  line-height: 1.26;
  margin-left: 11px;
  letter-spacing: -0.008em;
}

/* -------------------------------------------------------- HonestBlock */
/* Bordered block, --alert eyebrow, heading, body. tone=strong | soft.
   soft (grey border, white fill) is for B2C pages, where the strong version
   reads as confrontational. */

.honest {
  border: 1px solid var(--ink);
  padding: 25px 27px 27px;
  margin: 28px 0;
  max-width: 64ch;
}

.honest .hd {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alert-text);
  margin-bottom: 12px;
}

/* The heading level is a document-structure decision, not a visual one: a block
   sitting directly under the page h1 needs an h2, one inside an h2 section needs
   an h3. Both render identically so the author can pick the correct level and
   keep heading order sequential. */
.honest h2,
.honest h3 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 9px;
  max-width: none;
  line-height: 1.3;
  font-family: var(--serif);
}

.honest p {
  font-size: 16.5px;
  line-height: 1.52;
  color: var(--soft);
  margin-bottom: 11px;
}

.honest p:last-child {
  margin-bottom: 0;
}

.honest strong {
  color: var(--ink);
  font-weight: 600;
}

.honest.soft {
  border-color: var(--rule);
  background: var(--surface);
}

.honest.soft .hd {
  color: var(--faint-text);
}

/* ------------------------------------------------------------- Citation */
/* Every factual claim sourced to a paper gets one. Grotesk, small, DOI
   resolves. CI fails the build if a DOI 404s at doi.org. */

/* Serif, unlike the rest of the utility layer. Dropping the size alone did not
   fix this: at any size Inter's x-height is so much larger than EB Garamond's
   that a citation set in it read as body copy rather than as a reference. 12px
   Garamond occupies less height than 11px Inter did.
   A citation exists to be checkable — by a reader who goes looking, and by
   whatever is parsing the page — not to be read on the way past.
   --soft holds 5.31:1 on --paper at any size, so this costs nothing in contrast.
   .methods carries the same treatment; both are provenance fine print. */
.cite {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.55;
  color: var(--soft);
  margin: 14px 0 0;
}

.cite cite {
  font-style: italic;
}

.cite a {
  color: var(--ink);
  text-decoration-color: var(--faint);
}

/* ----------------------------------------------------------------- Rank */
/* Numbered hierarchy: moisture -> substrate -> suppression.
   The last numeral takes --alert-text: suppression is third, and that
   ordering is the point. */

.rank {
  list-style: none;
  padding: 0;
  margin: 22px 0 8px;
  counter-reset: r;
}

/* Three grid items, not two: ::before holds the numeral, and <b> and <span> are
   both direct children. Without the explicit grid-column below, <span> auto-flows
   into the 34px numeral column and the description wraps one word per line.
   row-gap is 0 because <b> carries its own margin-bottom. */
.rank li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 16px;
  row-gap: 0;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

.rank b,
.rank span {
  grid-column: 2;
}

.rank li:last-child {
  border-bottom: 1px solid var(--rule);
}

.rank li::before {
  content: counter(r);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--faint-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.rank b {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 3px;
}

.rank span {
  font-size: 16.5px;
  color: var(--soft);
  line-height: 1.48;
}

.rank li.last::before {
  color: var(--alert-text);
}

/* ----------------------------------------------------------------- Spec */
/* Two-column key/value/detail grid. .spec.three for the S520 conditions. */

.spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 26px 0 8px;
}

.spec.three {
  grid-template-columns: repeat(3, 1fr);
}

.spec > div {
  background: var(--paper);
  padding: 15px 18px 17px;
}

.spec .k {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint-text);
  margin-bottom: 5px;
}

.spec .v {
  display: block;
  font-size: 17px;
  line-height: 1.35;
}

.spec .v small {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--soft);
  margin-top: 4px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- steps */

.steps {
  margin: 26px 0 10px;
}

.step {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 20px;
  padding: 19px 0;
  border-top: 1px solid var(--rule);
}

.step:last-child {
  border-bottom: 1px solid var(--rule);
}

.step .when {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint-text);
  padding-top: 4px;
}

.step h3 {
  margin-bottom: 5px;
}

.step p {
  font-size: 16.5px;
  color: var(--soft);
  margin: 0;
  max-width: 56ch;
}

/* ------------------------------------------------------- Chart + MethodsLine */
/* Inline SVG, no charting library. --mint for the line, --alert for
   above-threshold segments, dashed --faint for the reference line.
   Strokes are graphical objects, so they keep the original brand values. */

.chartbox {
  margin: 32px 0 0;
}

.chartbox svg {
  width: 100%;
  height: auto;
}

.chartbox text {
  font-family: var(--sans);
  fill: var(--faint-text);
}

.cl {
  fill: none;
  stroke: var(--mint);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.clx {
  fill: none;
  stroke: var(--alert);
  stroke-width: 2.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Interquartile band and 90th-percentile line on a distribution chart.
   Deliberately NOT --alert or .clx: --alert means a threshold was exceeded, and
   on the CO2 chart nothing is. A spread is not an exceedance. */
.cband {
  fill: var(--mint);
  opacity: 0.13;
  stroke: none;
}

.cp90 {
  fill: none;
  stroke: var(--soft);
  stroke-width: 1.6;
  stroke-dasharray: 5 3;
  stroke-linejoin: round;
}

/* Upper-tail band: 90th-percentile room up to the worst room. --rule, the same
   neutral the library series grid shows through its empty cell.
   Deliberately NOT --alert, which it used to be: --alert asserts a threshold was
   exceeded, and these levels are uncalibrated, so a spread of rooms crossing a
   scale marker is not that. Opaque, so it is only 1.27:1 against --paper — the
   .cp100 edge below carries the boundary, and no type may sit on it (see
   TOKEN_PAIRS: --faint-text is 4.10:1 here, --ink 12.82:1). */
.ctail {
  fill: var(--rule);
  stroke: none;
}

/* Top edge of the upper-tail band — the worst-room line. The band fill alone is
   too close to --paper to read as a boundary. */
.cp100 {
  fill: none;
  stroke: var(--soft);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.cdot {
  fill: var(--alert);
}

.clabel {
  fill: var(--soft);
}

/* --soft, not --faint: this line crosses the --rule-filled upper-tail band, where
   --faint is 1.93:1 and effectively invisible. --soft is 4.18:1 there. */
.cth {
  stroke: var(--soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.cax {
  stroke: var(--rule);
  stroke-width: 1;
}

/* Provenance sentence under any chart or figure. Mandatory on any figure —
   what was measured, where, when, and the selection-bias note.
   Serif at 12px for the same reason as .cite above: it is fine print, and Inter
   at 11px read heavier than the serif copy around it. */
.methods {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.55;
  color: var(--faint-text);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-top: 6px;
  max-width: 80ch;
}

/* ------------------------------------------------------------ services grid */

.svc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}

.svc a {
  background: var(--paper);
  padding: 25px 25px 29px;
  text-decoration: none;
  display: block;
  transition: background 0.18s;
}

.svc a:hover {
  background: var(--surface);
}

.svc .o {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-text);
  display: block;
  margin-bottom: 10px;
}

/* An index card is a top-level section of its page, so it takes h2. Styled at
   both levels so a card can also be nested under an h2 elsewhere. */
.svc h2,
.svc h3 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 7px;
  max-width: none;
  line-height: 1.3;
  font-family: var(--serif);
}

.svc p {
  font-size: 16px;
  color: var(--soft);
  margin: 0;
  max-width: 38ch;
}

/* ------------------------------------------------------------- two columns */

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  margin-top: 30px;
  align-items: start;
}

.two h3 {
  font-size: 23px;
}

.two p {
  font-size: 16.5px;
  color: var(--soft);
}

/* ------------------------------------------------------- buildings variant */
/* Cool surface, grotesk display type. B2B reads colder on purpose. */

.pg-bld h1 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.032em;
  font-size: clamp(29px, 4.3vw, 47px);
  line-height: 1.08;
}

.pg-bld .dek {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
}

.pg-bld h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.026em;
  font-size: clamp(22px, 2.6vw, 29px);
}

.pg-bld .sect {
  border-top-color: var(--rule-cool);
}

.pg-bld .spec,
.pg-bld .triad {
  background: var(--rule-cool);
  border-color: var(--rule-cool);
}

.pg-bld .spec > div,
.pg-bld .triad-c {
  background: var(--cool);
}

/* --------------------------------------------------------- library & method */

.series-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}

.series-c {
  background: var(--surface);
  padding: 22px 24px 26px;
  position: relative;
  text-decoration: none;
  display: block;
  transition: background 0.18s;
}

.series-c:hover {
  background: var(--paper);
}

.series-c .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.series-c h3 {
  margin-left: 12px;
}

.series-c p {
  font-size: 16px;
  color: var(--soft);
  margin: 0 0 0 12px;
  max-width: 40ch;
}

.series-c .count {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint-text);
  margin: 10px 0 0 12px;
}

.entries {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}

.entries li {
  border-top: 1px solid var(--rule);
}

.entries li:last-child {
  border-bottom: 1px solid var(--rule);
}

/* Same three-children-in-a-two-column-grid trap as .rank: the series label, the
   title and the date are all direct children, so each is pinned to its column
   explicitly. Without this the date auto-flows under the title and the title is
   squeezed into whatever the date left behind. */
.entries a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 20px;
  row-gap: 0;
  align-items: baseline;
  padding: 18px 0 18px 14px;
  text-decoration: none;
  position: relative;
}

.entries .es,
.entries .et {
  grid-column: 1;
}

.entries .ed {
  grid-column: 2;
  grid-row: 1;
}

.entries a:hover .et {
  border-bottom-color: var(--ink);
}

.entries .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.entries .et {
  font-size: 19px;
  line-height: 1.3;
  border-bottom: 1.5px solid transparent;
}

.entries .ed {
  font-family: var(--sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--faint-text);
  white-space: nowrap;
}

.entries .es {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint-text);
  margin-bottom: 6px;
}

/* Article body — the library post template. Constrained measure, and the
   heading scale steps down from the page h1. */

.article {
  max-width: 68ch;
}

.article h2 {
  font-size: 27px;
  margin-top: 42px;
}

.article h3 {
  font-size: 21px;
  margin-top: 30px;
}

.article p {
  font-size: 18.5px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.article ul,
.article ol {
  font-size: 18.5px;
  line-height: 1.6;
  padding-left: 24px;
  margin-bottom: 18px;
}

.article li {
  margin-bottom: 8px;
}

.article blockquote {
  margin: 26px 0;
  padding-left: 20px;
  border-left: 2px solid var(--mint);
  font-size: 19px;
  color: var(--soft);
}

.article .refs {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.article .refs h2 {
  font-size: 21px;
  margin-top: 0;
}

.byline {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--faint-text);
  font-variant-numeric: tabular-nums;
  margin: 0 0 8px;
}

.series-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint-text);
  text-decoration: none;
}

.series-tag::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--series, var(--lav));
}

/* ------------------------------------------------------------------ footer */

.ft {
  border-top: 1px solid var(--ink);
  margin-top: 76px;
  padding: 42px 0 54px;
}

.ft-in {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}

.ft h2 {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint-text);
  margin: 0 0 13px;
  max-width: none;
}

.ft ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 2.05;
}

.ft a {
  text-decoration: none;
  color: var(--soft);
}

.ft a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.ft .mission {
  font-size: 17px;
  line-height: 1.5;
  color: var(--soft);
  max-width: 34ch;
  margin: 16px 0 0;
}

.ft .logo img {
  width: 150px;
}

.ft-base {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--faint-text);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ft-base a {
  color: var(--faint-text);
}

.social {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
}

.social a {
  line-height: 0;
}

.social img {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------- 404 */

.mid {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px 0;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 880px) {
  .b2c-door,
  .triad,
  .lib,
  .spec,
  .spec.three,
  .svc,
  .ft-in,
  .two,
  .series-grid {
    grid-template-columns: 1fr;
  }

  .b2c-door .copy {
    padding: 34px 26px 38px;
  }

  .b2c-door {
    display: flex;
    flex-direction: column-reverse;
  }

  .b2b-strip {
    padding: 20px 26px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--lav);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 30px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 11px 0;
    font-size: 15px;
  }

  .nav-tog {
    display: block;
  }

  .step {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .rank li {
    grid-template-columns: 26px 1fr;
    gap: 12px;
  }

  .entries a {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 420px) {
  .wrap {
    padding: 0 20px;
  }

  .nav-in {
    padding: 12px 20px;
  }

  .honest {
    padding: 20px 18px 22px;
  }
}

/* ----------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .cl,
  .clx {
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
    animation: draw 1.8s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .clx {
    animation-delay: 1s;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cl,
  .clx {
    animation: none;
  }
}

@media print {
  .nav,
  .nav-tog,
  .skip {
    display: none;
  }

  body {
    background: var(--surface);
  }
}