@charset "UTF-8";

/**
 * Graphs4Good — 2026 redesign.
 *
 * Scoped to #page-graphs4good so nothing here can leak into other templates.
 * Layout comes from Foundation's .grid-container, same as the rest of the v2
 * templates; this file only adds the page-specific bands, cards and buttons.
 *
 * Colors are the design-system tokens the Figma file draws from, sampled back
 * out of the frame exports and matched to the ramp in
 * assets_v2/styles/design-system/settings/_tokens.generated.scss:
 *   baltic-20 #8FE3E8  baltic-45 #30839D  baltic-50 #0A6190
 *   baltic-55 #02507B  baltic-60 #014063  baltic-70 #081E2B  baltic-75 #041823
 *   neutral-15 #F5F7FA  neutral-30 #D5D9DE  neutral-55 #535B66
 *   neutral-75 #151E29
 *
 * Type is the library's named styles, read out of the Figma file in Dev Mode
 * rather than measured off the export. Sizes are left in px because that is
 * what the styles specify and the page has no rem-scaling of its own:
 *   display/lg      Syne Neo    48 / 100% / 500 / -0.25px   hero headline
 *   H0              Syne Neo    30 / 40px  / 500 / -0.25px  ebook banner title
 *   display/sm      Syne Neo    32 / 120%  / 600            section headings
 *   display/xs      Syne Neo    24 / 130%  / 600 / -1px     overview statements
 *   Eyebrow         Syne Neo    14 / 140%  / 600 / 1px      uppercase eyebrows
 *   subheading/lg   Public Sans 20 / 140%  / 600 / 0.25px   quote lead
 *   subheading/md   Public Sans 16 / 150%  / 600 / 0.25px   chapter lede
 *   body/lg         Public Sans 16 / 150%  / 400           body copy
 *   body/md         Public Sans 14 / 140%  / 400           ebook banner copy
 *
 * The comp is a 1440 frame with 144px side gutters, so the content measure is
 * 1152px — narrower than Foundation's 1200px .grid-container, which is why the
 * container is re-capped below rather than left at the global width.
 */

#page-graphs4good {
  /* Band grounds. The comp's dark bands are the Figma
     "Gradient/Baltic/dark-baltic" with the file's own node blobs painted over
     it, which leaves the gradient visible only along the top: sampling the
     export gives a flat baltic-70 field everywhere except a lift toward the
     top-right. The bands below reproduce that as a flat ground plus one soft
     highlight, which is also what lets the hero photograph — exported with
     that same ground baked into its curved edge — sit on the band without a
     seam. A full-width linear gradient does not: it lightens the left half
     the artwork has no answer for. */
  --g4g-ink: #081E2B;         /* baltic-70 */
  --g4g-ink-deep: #041823;    /* baltic-75 */
  --g4g-ink-lift: #014063;    /* baltic-60 */

  /* Figma text/page/initial — the off-white every dark band sets text in. Not
     pure white, which is reserved for the surfaces below. */
  --g4g-on-dark: #F5F6F6;

  /* Surfaces that really are white: the jump bar, the light buttons, the two
     light bands. */
  --g4g-white: #FFF;

  --g4g-accent: #8FE3E8;      /* baltic-20 — eyebrows on dark */
  --g4g-accent-soft: #C3F8FB; /* baltic-15 — card tag + "Read more" */
  --g4g-cta: #0A6190;         /* baltic-50 — primary button, callout text */
  --g4g-cta-hover: #02507B;   /* baltic-55 */
  --g4g-teal: #30839D;        /* baltic-45 — the closing CTA card */
  --g4g-pill: #262F31;        /* baltic-65 — the card's tag */
  --g4g-rule-dark: #02507B;   /* baltic-55 — the rule between chapters */

  /* Light-band surfaces and text. */
  --g4g-surface: #F5F6F6;     /* the callout panel and the ebook band */
  --g4g-rule: #D5D9DE;        /* neutral-30 */
  --g4g-text: #151E29;        /* neutral-75 */
  --g4g-muted: #535B66;       /* neutral-55 */
  --g4g-on-dark-muted: #B2B7BD; /* neutral-40 — the lede above each card row */

  /* The cards sit DARKER than the band they are on — solid baltic-75, no
     border. (An earlier pass had them as a translucent white lift, which read
     as the opposite of the comp.) */
  --g4g-card: #041823;

  --g4g-display: "syne-neo", "Public Sans", helvetica, arial, sans-serif;
  --g4g-body: "Public Sans", "Helvetica Neue", helvetica, roboto, arial, sans-serif;

  --g4g-measure: 1152px;

  /* The sticky jump bar's resting offset: the height of whichever of the
     site's two sticky headers is showing. Foundation swaps them at 64em —
     .n-header-shell is 76px from 1024px up, and the .title-bar that replaces
     it below is 70px. NOT the 55px the legacy sub-nav uses, and not one value
     for both: too small tucks the bar under the header, too large opens a gap
     the page shows through. Published as a property so the jump targets'
     scroll-margin cannot drift away from it.

     The whole offset is resolved here rather than band by band, so the
     breakpoints below sit with the arithmetic instead of at the end of the
     file with the layout. */
  --g4g-jump-top: 76px;
  --g4g-jump-height: 56px;
}

/* WordPress's own bar stacks above the header: 32px wide, 46px below 783px,
   and below 601px it stops being fixed and scrolls away, so there it adds
   nothing to the offset. */
.admin-bar #page-graphs4good {
  --g4g-jump-top: 108px; /* 76 + 32 */
}

@media screen and (max-width: 1023px) {
  #page-graphs4good {
    --g4g-jump-top: 70px;
  }

  .admin-bar #page-graphs4good {
    --g4g-jump-top: 102px; /* 70 + 32 */
  }
}

@media screen and (max-width: 782px) {
  .admin-bar #page-graphs4good {
    --g4g-jump-top: 116px; /* 70 + 46 */
  }
}

@media screen and (max-width: 600px) {
  .admin-bar #page-graphs4good {
    --g4g-jump-top: 70px;
  }
}

#page-graphs4good .grid-container {
  max-width: calc(var(--g4g-measure) + 48px);
  padding-left: 24px;
  padding-right: 24px;
}

/*
 * The sitewide bundle carries a bare `section { padding: 40px 0 }`
 * (design-system/components/page.scss), and the `py-16` override beside it is
 * scoped to the page-v2-codebase-template slug, which this page is not on. Every
 * band below owns its own vertical rhythm, so the inherited padding is cleared
 * once here rather than re-zeroed band by band — it had been leaking 40px of
 * white between the hero and the jump bar, because the hero is the one band
 * whose padding sits on an inner element.
 */
#page-graphs4good section {
  padding: 0;
}

/* ---------------------------------------------------------------- shared */

/* Eyebrow */
#page-graphs4good .g4g-eyebrow {
  margin: 0;
  color: var(--g4g-cta);
  font-family: var(--g4g-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 140%;
  text-transform: uppercase;
}

#page-graphs4good .g4g-eyebrow--on-dark {
  color: var(--g4g-accent);
}

/* The solid button. Foundation's .button already paints baltic-50 from
   $primary-color-btn, so this only sets the comp's size and weight. */
#page-graphs4good .button.g4g-button {
  margin: 0;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
}

/* The light button the two banners use — white pill, baltic label, trailing
   arrow. Not a Foundation .button: it is a different object in the comp and
   inheriting .button's fill would mean overriding all of it back out. */
#page-graphs4good .g4g-button--light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 4px;
  background: var(--g4g-white);
  color: var(--g4g-cta);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

#page-graphs4good .g4g-button--light:hover,
#page-graphs4good .g4g-button--light:focus-visible {
  background: var(--g4g-surface);
  color: var(--g4g-cta-hover);
}

#page-graphs4good .g4g-button__arrow {
  flex: none;
  transition: transform 0.18s ease;
}

#page-graphs4good .g4g-button--light:hover .g4g-button__arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  #page-graphs4good .g4g-button__arrow {
    transition: none;
  }

  #page-graphs4good .g4g-button--light:hover .g4g-button__arrow {
    transform: none;
  }
}

/* ------------------------------------------------------------------ hero */

/*
 * The band's artwork is one plate, not a background plus a photograph. In the
 * comp the gradient, the node shapes and the masked photograph are a single
 * composition whose curved edge falls wherever those shapes meet — there is no
 * straight seam to cut it on. assets/hero-band.jpg is that whole composition,
 * lifted from the Figma frame with the copy painted out, so it scales as one
 * piece and the curve stays where the design put it at every width. An earlier
 * pass carried only the right half as an <img> over a CSS gradient; away from
 * the 1440 comp width the two halves drifted apart and the join showed.
 */
#page-graphs4good .g4g-hero__band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 368px;
  padding: 64px 0;
  overflow: hidden;
  background-color: var(--g4g-ink);
  background-image: url("hero-band.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Only used below 767px — see the phone block at the end. */
#page-graphs4good .g4g-hero__media {
  display: none;
}

/* .grid-container is a flex item here, so without this it shrink-wraps to
   the copy and drifts off the page's 144px gutter. */
#page-graphs4good .g4g-hero__band > .grid-container {
  width: 100%;
}

#page-graphs4good .g4g-hero__content {
  position: relative;
  z-index: 1;
  max-width: 580px;
}

/* display/lg */
#page-graphs4good .g4g-hero__title {
  margin: 16px 0 0;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-display);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.25px;
  line-height: 100%;
}

/* body/lg */
#page-graphs4good .g4g-hero__lead {
  max-width: 540px;
  margin: 16px 0 32px;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

/* ------------------------------------------------------------- jump links */

#page-graphs4good .g4g-jump {
  position: sticky;
  top: var(--g4g-jump-top);
  z-index: 8; /* under the site header's own stack, over the bands */
  background: var(--g4g-white);
  border-bottom: 1px solid var(--g4g-rule);
}

#page-graphs4good .g4g-jump__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 64px;
  min-height: var(--g4g-jump-height);
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

#page-graphs4good .g4g-jump__link {
  display: inline-block;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  color: var(--g4g-text);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

#page-graphs4good .g4g-jump__link:hover,
#page-graphs4good .g4g-jump__link:focus-visible {
  border-bottom-color: var(--g4g-cta);
  color: var(--g4g-cta);
}

/* Every jump target clears the header and the bar itself. The overview
   section carries the first one, so it needs this as much as the chapters
   do — without it the first link lands the heading behind both. */
#page-graphs4good .g4g-overview,
#page-graphs4good .g4g-chapter {
  scroll-margin-top: calc(var(--g4g-jump-top) + var(--g4g-jump-height));
}

/* ----------------------------------------------------------------- quote */

/*
 * Both dark bands are the same construction as the Figma file: the
 * "Gradient/Baltic/dark-baltic" diagonal, dark at the bottom-left and lifting
 * to baltic-60 at the top-right, with one of the design's node shapes laid
 * over it in a flat darker fill. The shapes are the exported SVGs, placed at
 * the offsets the comp puts them at, so nothing here is an approximation of
 * them.
 */
#page-graphs4good .g4g-quote {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  /* Fitted to the comp's own pixels in the areas the node shape leaves bare:
     the angle differs between the two bands because a CSS angle resolves
     against the box, and these two boxes are 548 and 2170 tall. */
  background: linear-gradient(24deg, var(--g4g-ink) 35%, var(--g4g-ink-lift) 80%);
}

#page-graphs4good .g4g-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 857px;
  height: 548px;
  background: url("quote-node.svg") no-repeat left top / 857px 548px;
  pointer-events: none;
}

#page-graphs4good .g4g-quote > .grid-container {
  position: relative;
  z-index: 1;
}

#page-graphs4good .g4g-quote__figure {
  display: grid;
  grid-template-columns: 489px 540px;
  gap: 81px;
  align-items: start;
  justify-content: start;
  margin: 0;
}

/* The asset is cut to the frame's own 489x356, so cover only has to guard
   against the narrower phone layout. */
#page-graphs4good .g4g-quote__portrait img {
  display: block;
  width: 100%;
  height: 356px;

  /* 16px corner and the soft drop shadow the export's filter describes
     (dilate 6, dy 3, blur 12.5 → 25, #090A0A at 15%). */
  border-radius: 16px;
  box-shadow: 0 3px 25px 6px rgb(9 9 10 / 15%);
  object-fit: cover;
  object-position: center;
}

#page-graphs4good .g4g-quote__body {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--g4g-on-dark);
}

/* subheading/lg */
#page-graphs4good .g4g-quote__lead {
  margin: 0 0 24px;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.25px;
  line-height: 140%;
}

/* body/lg */
#page-graphs4good .g4g-quote__para {
  margin: 0 0 24px;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

#page-graphs4good .g4g-quote__attrib {
  display: flex;
  flex-direction: column;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

/* -------------------------------------------------------------- overview */

#page-graphs4good .g4g-overview {
  padding: 96px 0;
  background: var(--g4g-white);
}

#page-graphs4good .g4g-overview__callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 816px;
  margin: 0 auto;
  padding: 40px 32px;
  border-radius: 8px;
  background: var(--g4g-surface);
  text-align: center;
}

#page-graphs4good .g4g-overview__callout .g4g-eyebrow {
  color: var(--g4g-text);
}

/* display/xs */
#page-graphs4good .g4g-overview__statements {
  max-width: 724px;
  margin: 0;
  color: var(--g4g-cta);
  font-family: var(--g4g-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 130%;
}

/* Each statement is its own line in the comp, and stays one even when the
   panel is narrow enough to wrap the sentence itself. */
#page-graphs4good .g4g-overview__statements span {
  display: block;
}

#page-graphs4good .g4g-overview__body {
  max-width: 718px;
  margin: 24px auto 0;
  color: var(--g4g-text);
}

/* body/lg */
#page-graphs4good .g4g-overview__body p {
  margin: 0 0 24px;
  color: var(--g4g-text);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

#page-graphs4good .g4g-overview__body p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------- ebook */

#page-graphs4good .g4g-ebook {
  padding: 59px 0;
  background: var(--g4g-surface);
}

#page-graphs4good .g4g-ebook__card {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 82px;
  align-items: center;
  overflow: hidden;
  padding: 0 48px 0 96px;
  border-radius: 8px;
  background: var(--g4g-ink-lift);
}

/* The cover is what sets the card's height: 24px of air above it and flush
   with the card's bottom edge, exactly as the comp has it. */
#page-graphs4good .g4g-ebook__cover {
  align-self: end;
  width: 236px;
  padding-top: 24px;
}

#page-graphs4good .g4g-ebook__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

#page-graphs4good .g4g-ebook__content {
  color: var(--g4g-on-dark);
}

/* H0 */
#page-graphs4good .g4g-ebook__title {
  margin: 0 0 4px;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.25px;
  line-height: 40px;
}

/* body/md */
#page-graphs4good .g4g-ebook__copy {
  margin: 0 0 30px;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
}

/* ----------------------------------------------------------- initiatives */

/*
 * This band's backdrop is a plate rather than a gradient plus a placed node
 * SVG. The node shape here is large, clipped by the band and sits over a
 * gradient whose angle and stops could only be fitted approximately — placing
 * the SVG by hand never landed where the comp has it. initiatives-band.jpg is
 * the comp's own backdrop with the copy and cards taken out of it, so the
 * shape is exactly where the design puts it. It is stretched rather than
 * covered because the band's height follows its content, and the shapes are
 * soft enough that a few pixels of scaling does not read.
 */
#page-graphs4good .g4g-initiatives {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background-color: var(--g4g-ink);
  background-image: url("initiatives-band.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#page-graphs4good .g4g-initiatives > .grid-container {
  position: relative;
  z-index: 1;
}

#page-graphs4good .g4g-chapter {
  padding: 96px 0;
}

#page-graphs4good .g4g-chapter + .g4g-chapter {
  border-top: 1px solid var(--g4g-rule-dark);
}

#page-graphs4good .g4g-chapter__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 488 and 623 with the slack between them puts the copy's left edge on 673,
   where the comp has it. */
#page-graphs4good .g4g-chapter__row {
  display: grid;
  grid-template-columns: 488px 623px;
  justify-content: space-between;
  align-items: start;
}

/* display/sm */
#page-graphs4good .g4g-chapter__title {
  max-width: 488px;
  margin: 0;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 120%;
}

/* body/lg */
#page-graphs4good .g4g-chapter__copy {
  margin: 0;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

/* subheading/md */
#page-graphs4good .g4g-chapter__lede {
  margin: 64px 0 16px;
  color: var(--g4g-on-dark-muted);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.25px;
  line-height: 150%;
}

/* ----------------------------------------------------------------- cards */

#page-graphs4good .g4g-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#page-graphs4good .g4g-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 214px;
  padding: 16px;
  border-radius: 8px;
  background: var(--g4g-card);

  /* The front page's card lift (homepage.css .hp-news-card), so the two
     surfaces answer the pointer the same way. */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-graphs4good .g4g-card:hover {
  transform: translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
  #page-graphs4good .g4g-card {
    transition: none;
  }

  #page-graphs4good .g4g-card:hover {
    transform: none;
  }
}

#page-graphs4good .g4g-card__tag {
  display: inline-block;
  align-self: start;
  margin: 0 0 20px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--g4g-pill);
  color: var(--g4g-accent-soft);
  font-family: var(--g4g-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
}

/* subheading/md, at the card's own weight */
#page-graphs4good .g4g-card__title {
  margin: 0;
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.25px;
  line-height: 150%;
}

#page-graphs4good .g4g-card__link {
  color: var(--g4g-on-dark);
  text-decoration: none;
}

/* Stretches the title's link over the whole card, so the card is one target
   and the accessible name stays the story's title. */
#page-graphs4good .g4g-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

#page-graphs4good .g4g-card__link:focus-visible::after {
  outline: 2px solid var(--g4g-accent);
  outline-offset: 2px;
}

#page-graphs4good .g4g-card__more {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: auto 0 0;
  color: var(--g4g-accent-soft);
  font-family: var(--g4g-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
}

/* ------------------------------------------------------------ closing CTA */

#page-graphs4good .g4g-cta {
  padding: 80px 0;
  background: var(--g4g-white);
}

#page-graphs4good .g4g-cta__card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 292px;
  overflow: hidden; /* clips the circular photo top and bottom, as the comp does */
  padding: 48px 84px;
  border-radius: 8px;
  background: var(--g4g-teal);
}

#page-graphs4good .g4g-cta__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

/* display/sm */
#page-graphs4good .g4g-cta__title {
  margin: 0 0 8px;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 120%;
}

/* body/lg */
#page-graphs4good .g4g-cta__copy {
  max-width: 512px;
  margin: 0 0 28px;
  color: var(--g4g-on-dark);
  font-family: var(--g4g-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

/* A circle 374px across, taller than the card, so the card's own overflow
   crops it top and bottom — the comp's shape. Taken out of flow because in
   flow it would stretch the card to the circle's height instead. */
#page-graphs4good .g4g-cta__media {
  position: absolute;
  top: 50%;
  right: 84px;
  width: 374px;
  height: 374px;
  transform: translateY(-50%);
}

#page-graphs4good .g4g-cta__media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ----------------------------------------------------- narrower viewports */

/*
 * The two-column bands hold the comp's own track widths — 489+81+540 for the
 * quote, 488+623 for a chapter head — which need the full 1152 measure plus
 * its gutters, so they stack from 1199 down rather than from the 1023 the
 * header flips at. Below 1200 they used to keep the fixed tracks and run
 * 110px past the viewport, where the bands' own `overflow: hidden` cut the
 * end off every line instead of scrolling it into view.
 */
@media screen and (max-width: 1199px) {
  #page-graphs4good .g4g-quote__figure,
  #page-graphs4good .g4g-chapter__row {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-content: start;
  }

  #page-graphs4good .g4g-chapter__title {
    max-width: none;
  }

  /* Stacked, so neither the picture nor the copy should take the whole
     measure: at 1023 that is a 975px line of body text, and a 356px-tall
     portrait stretched to the same width crops Emil to a letterbox. Both
     keep the widths the comp gives them beside each other. */
  #page-graphs4good .g4g-quote__portrait {
    max-width: 489px;
  }

  #page-graphs4good .g4g-quote__body,
  #page-graphs4good .g4g-chapter__copy {
    max-width: 640px;
  }

  /*
   * The band's backdrop plate is a 1440x2170 composition, and once the cards
   * stack the band runs two to six times taller than that — stretching the
   * plate to fit smears the node shape into a vertical streak. Below the
   * desktop layout the band falls back to what the plate is painted on:
   * baltic-70 with the same lift into the top-right corner, fitted to the
   * plate's own pixels (#014063 at the corner, gone by three-quarters of the
   * way across).
   */
  #page-graphs4good .g4g-initiatives {
    background-image: radial-gradient(140% 520px at 95% 0%, var(--g4g-ink-lift) 0%, transparent 70%);
  }

  #page-graphs4good .g4g-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  #page-graphs4good .g4g-ebook__card {
    gap: 40px;
    padding: 0 40px;
  }

  #page-graphs4good .g4g-cta__card {
    padding: 48px;
  }

  #page-graphs4good .g4g-cta__media {
    right: 48px;
  }
}

@media screen and (max-width: 767px) {
  /* At phone width the copy would sit on top of the photograph, so the plate
     comes out of the band and leads it as a strip, cropped to the half that
     carries the picture. The band's padding moves with it: the strip runs up
     to the header, and the bottom padding it did not have keeps the button
     off the jump bar it was sitting flush against. */
  #page-graphs4good .g4g-hero__band {
    display: block;
    min-height: 0;
    padding: 0 0 48px;
    background-image: none;
  }

  #page-graphs4good .g4g-hero__media {
    display: block;
    height: 200px;
    margin-bottom: 40px;
    background-image: url("hero-band.jpg");
    background-position: 82% center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #page-graphs4good .g4g-hero__title {
    font-size: 36px;
  }

  /*
   * Four links do not fit, so the bar scrolls sideways — and its scrollbar is
   * hidden, because wherever the platform draws a classic one rather than an
   * overlay it rules a grey line straight across the bar that reads as part
   * of the design. The strip goes full-bleed with the gutter as its own
   * padding, so a link scrolls to the edge of the screen instead of stopping
   * short at an invisible one.
   */
  #page-graphs4good .g4g-jump > .grid-container {
    padding: 0;
  }

  #page-graphs4good .g4g-jump__list {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  #page-graphs4good .g4g-jump__list::-webkit-scrollbar {
    display: none;
  }

  /* 48px of target for a thumb, inside the bar's own 56px. The underline
     lands just above the bar's bottom rule, which is where a scrolling nav
     strip wants it anyway. */
  #page-graphs4good .g4g-jump__link {
    padding: 12px 0;
  }

  #page-graphs4good .g4g-quote,
  #page-graphs4good .g4g-initiatives,
  #page-graphs4good .g4g-cta {
    padding: 56px 0;
  }

  #page-graphs4good .g4g-quote__portrait img {
    height: 300px;
  }

  #page-graphs4good .g4g-overview {
    padding-top: 56px;
  }

  #page-graphs4good .g4g-overview__callout {
    padding: 32px 24px;
  }

  #page-graphs4good .g4g-overview__statements {
    font-size: 20px;
    letter-spacing: -0.5px;
  }

  #page-graphs4good .g4g-overview__body {
    margin-top: 32px;
  }

  #page-graphs4good .g4g-cards {
    grid-template-columns: 1fr;
  }

  #page-graphs4good .g4g-card {
    min-height: 0;
  }

  /* The fixed height goes, and with it the auto top margin that had been
     holding "Read more" down at the bottom of the box — without this it sits
     flush against the last line of the title. */
  #page-graphs4good .g4g-card__more {
    margin-top: 16px;
  }

  #page-graphs4good .g4g-chapter {
    padding: 48px 0;
  }

  #page-graphs4good .g4g-chapter__lede {
    margin-top: 40px;
  }

  #page-graphs4good .g4g-chapter__title,
  #page-graphs4good .g4g-cta__title {
    font-size: 28px;
  }

  /* Both banners go to one column: the cover and the photo sit above the copy
     rather than beside it. */
  #page-graphs4good .g4g-ebook {
    padding: 40px 0;
  }

  #page-graphs4good .g4g-ebook__card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }

  #page-graphs4good .g4g-ebook__cover {
    justify-self: start;
    width: 160px;
  }

  #page-graphs4good .g4g-ebook__title {
    font-size: 24px;
    line-height: 130%;
  }

  #page-graphs4good .g4g-cta__card {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 32px 24px;
  }

  #page-graphs4good .g4g-cta__media {
    position: static;
    order: -1;
    width: 200px;
    height: 200px;
    margin: 0 0 24px;
    transform: none;
  }
}