/* shared/glp-cluster.css — single cluster stylesheet for the GLP-1 landing
   page (/glp-1/) and the coastal series hub (/series/glp-1/).
   Consumes tokens only from shared/tokens.css (loaded via shared/site.css).
   Section 1 is the landing page composition, migrated from glp-1/glp1.css
   (now deleted). Section 2 is the series hub composition, moved out of the
   inline <style> block in series/glp-1/index.html; every hub selector is
   prefixed with .glp1-series so none of it can leak onto the landing page. */

/* Self-hosted house faces (same mechanism as shared/chrome.css and
   articles/editorial-desk.css): Big Shoulders Display for display,
   Hanken Grotesk for body, JetBrains Mono for labels/eyebrows. */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
}

/* ============================================================
   Section 1 — /glp-1/ landing page (migrated from glp1.css).
   House typography: Big Shoulders Display (uppercase, heavy, tight)
   for display, Hanken Grotesk for body, JetBrains Mono for labels.
   Approved palette: fill/rules #2A5CFF (no exact token equivalent, so
   literal), accent text on light var(--ba-blue-ink) (#0056e2), muted
   #566185 (no exact token equivalent, so literal), ink
   var(--ba-text-strong) (#0b1330), body var(--ba-text-body) (#38406a).
   ============================================================ */

.glp-page {
  --section: clamp(3.5rem, 7vw, 6rem);
}

.glp-page {
  overflow-x: clip;
  color: var(--ba-text-body, #38406a);
  background: var(--ba-canvas, var(--paper));
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

.glp-main {
  min-height: 50vh;
}

.glp-page .display {
  max-width: 12ch;
  color: var(--ba-navy, #0b1330);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.glp-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ba-blue-ink, #0056e2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.glp-page .eyebrow::before {
  width: 1.4rem;
  height: 2px;
  background: currentColor;
  content: "";
}

.glp-hero,
.glp-path,
.glp-food,
.glp-bigger,
.glp-long {
  position: relative;
  padding-block: var(--section);
}

/* shared/site.css also styles the legacy .nav and .brand classes. */
.glp-page .site-head .brand {
  flex-direction: row;
}

.glp-page .site-head .nav {
  position: static;
  display: block;
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  backdrop-filter: none;
}

.glp-page .site-head .nav[hidden] {
  display: none;
}

.glp-hero {
  overflow: hidden;
  background:
    radial-gradient(72% 65% at 100% 0%, rgba(42, 92, 255, 0.09), transparent 65%),
    var(--ba-canvas, var(--paper));
}

.glp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.25rem);
}

.glp-hero__copy {
  position: relative;
  z-index: 1;
}

.glp-hero .display {
  margin-block: 1.25rem;
  max-width: 8ch;
}

.glp-hero .display span {
  display: block;
}

.glp-hero__accent {
  color: var(--ba-blue-ink, #0056e2);
}

.glp-hero__subcopy,
.glp-path__subcopy {
  max-width: 39rem;
  margin: 0;
  color: #566185;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
}

.glp-hero__picture {
  position: relative;
  display: block;
  min-width: 0;
  isolation: isolate;
}

.glp-hero__picture::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, var(--ba-canvas, var(--paper)) 0%, rgba(255, 255, 255, 0.7) 9%, transparent 35%), linear-gradient(0deg, var(--ba-canvas, var(--paper)) 0%, transparent 18%);
  content: "";
  pointer-events: none;
}

.glp-hero__image {
  display: block;
  width: 100%;
  max-height: 35rem;
  object-fit: cover;
  object-position: center;
  border-radius: 1.5rem;
}

.glp-path__intro {
  max-width: 52rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.glp-path__intro .display {
  max-width: none;
  margin-block: 1rem;
  font-size: clamp(2.1rem, 5vw, 4rem);
}

.glp-path__grid {
  align-items: stretch;
}

.glp-path__column {
  min-width: 0;
}

.glp-path__number {
  margin: 0 0 0.75rem;
  color: var(--ba-blue-ink, #0056e2);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.glp-path__column h3 {
  margin: 0 0 1.25rem;
  color: var(--ba-navy, #0b1330);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.05;
}

.glp-path__list {
  display: grid;
  gap: 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glp-path__link {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.35rem;
  color: var(--ba-text-strong, var(--navy));
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}

.glp-path__link span {
  color: var(--ba-blue-ink, #0056e2);
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.2;
}

.glp-path__link:hover {
  color: var(--ba-blue-ink, #0056e2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.glp-path__bridge {
  margin: 2rem 0 0;
  color: #566185;
  font-size: 1rem;
  line-height: 1.6;
}

.glp-path__bridge-link {
  color: var(--ba-blue-ink, #0056e2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.glp-path__bridge-link:hover {
  color: var(--ba-blue-deep, #0049d6);
}

.glp-path,
.glp-bigger {
  background: var(--ba-canvas-deep, var(--paper-3));
}

.glp-food,
.glp-long {
  background: var(--ba-canvas, var(--paper));
}

.glp-bigger {
  overflow: hidden;
  background:
    radial-gradient(74% 96% at 100% 48%, rgba(42, 92, 255, 0.055), transparent 70%),
    var(--ba-canvas-deep, var(--paper-3));
}

.glp-path__grid,
.glp-food__grid,
.glp-bigger__grid {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.glp-path__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glp-food__grid,
.glp-bigger__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.glp-food__grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.glp-bigger__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.glp-bigger__copy,
.glp-bigger__picture {
  min-width: 0;
}

.glp-bigger__title {
  max-width: 10ch;
  margin-block: 1rem 1.5rem;
  font-size: clamp(2.3rem, 5.1vw, 4.5rem);
}

.glp-bigger__title span,
.glp-long__title span {
  display: block;
}

.glp-bigger__paragraph {
  max-width: 37rem;
  margin: 0 0 1rem;
  color: #566185;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.7;
}

.glp-bigger__cta {
  margin-top: 0.5rem;
}

.glp-bigger__cta:hover {
  transform: translateY(-2px);
}

.glp-bigger__cta:focus-visible {
  outline: 3px solid #2A5CFF;
  outline-offset: 4px;
}

/* Filled-button role: approved accent fill #2A5CFF (no exact token
   equivalent). Hover follows the shared chrome precedent (#1747df). */
.glp-page .btn--primary {
  background: #2A5CFF;
  color: #ffffff;
  padding: 1rem 1.35rem;
  border-radius: var(--radius, 2px);
  box-shadow: 0 6px 16px rgba(42, 92, 255, 0.28);
}

.glp-page .btn--primary:hover {
  background: #1747df;
  color: #ffffff;
}

.glp-bigger__picture {
  position: relative;
  display: block;
  isolation: isolate;
}

.glp-bigger__picture::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, var(--ba-canvas-deep, var(--paper-3)) 0%, rgba(255, 255, 255, 0.72) 10%, transparent 42%), linear-gradient(0deg, var(--ba-canvas-deep, var(--paper-3)) 0%, transparent 20%);
  content: "";
  pointer-events: none;
}

.glp-bigger__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 75% 15%;
  border-radius: 1.5rem;
}

.glp-long {
  display: grid;
  min-height: clamp(33rem, 56vw, 46rem);
  align-items: center;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 8rem);
  background: #f5e9d7;
  isolation: isolate;
}

.glp-long__picture {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  overflow: hidden;
}

.glp-long__picture::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(247, 239, 226, 0.99) 0%, rgba(247, 239, 226, 0.95) 31%, rgba(247, 239, 226, 0.68) 50%, rgba(247, 239, 226, 0.12) 78%), linear-gradient(0deg, rgba(247, 239, 226, 0.3), transparent 30%);
  content: "";
  pointer-events: none;
}

.glp-long__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}

.glp-long__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.glp-long__copy {
  max-width: 42rem;
}

.glp-long__title {
  max-width: 8ch;
  margin-block: 1rem 1.5rem;
  font-size: clamp(2.8rem, 7vw, 6rem);
}

.glp-long__accent {
  color: var(--ba-blue-ink, #0056e2);
}

.glp-long__subcopy {
  max-width: 38rem;
  margin: 0;
  color: var(--ba-text-body, #38406a);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.7;
}

.glp-food__picture {
  display: block;
  min-width: 0;
}

.glp-food__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3.5rem rgba(13, 24, 53, 0.15);
}

.glp-food__content {
  min-width: 0;
}

.glp-food__title {
  max-width: 10ch;
  margin-block: 1rem 1.25rem;
  color: var(--ba-text-strong, #0b1330);
  font-size: clamp(2.1rem, 4.5vw, 3.8rem);
}

.glp-food__title span {
  display: block;
}

.glp-food__subcopy {
  max-width: 37rem;
  margin: 0;
  color: #566185;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.65;
}

.glp-food__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.glp-food__link {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--ba-border-strong, var(--line-strong));
  color: var(--ba-text-strong, var(--navy));
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.glp-food__link:hover {
  color: var(--ba-blue-ink, #0056e2);
}

.glp-food__link:focus-visible {
  outline: 3px solid #2A5CFF;
  outline-offset: 4px;
}

.glp-food__arrow {
  flex: 0 0 auto;
  color: var(--ba-blue-ink, #0056e2);
  font-size: 1.2em;
  line-height: 1;
}

.glp-path__column + .glp-path__column {
  border-left: 1px solid var(--ba-border-strong, var(--line-strong));
  padding-left: clamp(1rem, 3vw, 2.5rem);
}

.glp-page .btn {
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 200ms, color 200ms, border-color 200ms;
}

@media (max-width: 47.99em) {
  .glp-hero__grid,
  .glp-path__grid,
  .glp-food__grid,
  .glp-bigger__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .glp-hero__picture {
    margin-inline: -1rem;
  }

  .glp-bigger {
    padding-bottom: 3rem;
  }

  .glp-bigger__grid {
    gap: 2rem;
  }

  .glp-bigger__picture {
    margin-inline: -0.5rem;
  }

  .glp-bigger__picture::before {
    background: linear-gradient(0deg, var(--ba-canvas-deep, var(--paper-3)) 0%, transparent 26%);
  }

  .glp-bigger__image {
    aspect-ratio: 1 / 1;
    object-position: 75% 15%;
    border-radius: 1rem;
  }

  .glp-long {
    min-height: 39rem;
    padding-block: 4rem;
  }

  .glp-long__content {
    grid-template-columns: minmax(0, 1fr);
  }

  .glp-long__picture::before {
    background: linear-gradient(90deg, rgba(247, 239, 226, 0.95), rgba(247, 239, 226, 0.78)), linear-gradient(0deg, rgba(247, 239, 226, 0.3), transparent 45%);
  }

  .glp-long__image {
    object-position: 58% center;
  }

  .glp-hero__image {
    max-height: 25rem;
    border-radius: 1rem;
  }

  .glp-hero__picture::before {
    background: linear-gradient(0deg, var(--ba-canvas, var(--paper)) 0%, transparent 28%);
  }

  .glp-path__desktop-break {
    display: none;
  }

  .glp-food__desktop-break {
    display: none;
  }

  .glp-food__image {
    aspect-ratio: 16 / 10;
  }

  .glp-food__links {
    grid-template-columns: minmax(0, 1fr);
  }

  .glp-food__link {
    border-bottom: 0;
  }

  .glp-path__column + .glp-path__column {
    border: 0;
    padding-left: 0;
  }
}

@media (max-width: 59.99em) {
  .glp-page .site-head .nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: auto;
    padding: 0;
    border-bottom: 1px solid var(--line);
    background: var(--lt-surface, #ffffff);
    box-shadow: var(--ba-elevation-2, 0 30px 70px -26px rgba(11, 19, 48, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .glp-page,
  .glp-page *,
  .glp-page *::before,
  .glp-page *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media print {
  .site-head,
  .site-foot,
  .nav-toggle {
    display: none !important;
  }

  .glp-page {
    color: #000;
    background: #fff;
  }

  .glp-hero,
  .glp-path,
  .glp-food,
  .glp-bigger,
  .glp-long {
    padding-block: 1.25rem;
    background: #fff;
    break-inside: avoid;
  }
}

/* ============================================================
   Section 2 — /series/glp-1/ coastal hub (moved verbatim out of the
   inline <style> block in series/glp-1/index.html). Every selector is
   prefixed with .glp1-series (the hub <body> class) and the bare :root
   custom-property block below is scoped to .glp1-series, so none of
   these rules can affect the landing page. Declarations unchanged.
   ============================================================ */

.glp1-series {
  --guide-ink: #071333;
  --guide-muted: #34415c;
  --guide-paper: #fffcf6;
  --guide-card: #fffefa;
  --guide-mint: #59c8b0;
  --guide-blue: #1654ff;
  --guide-line: #eee8dc;
}

.glp1-series {
  color: var(--guide-ink);
  background: var(--guide-paper);
  font-family: "Hanken Grotesk", sans-serif;
}

.glp1-series .series-hero {
  height: 440px;
  min-height: 0;
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: var(--guide-ink);
  background: #f8f2e8;
  isolation: isolate;
}

.glp1-series .series-hero__image,
.glp1-series .series-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.glp1-series .series-hero__image { z-index: -2; }
.glp1-series .series-hero__image img { object-fit: cover; object-position: center 16%; }

.glp1-series .series-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #fffcf6 0%, rgba(255, 252, 246, .98) 28%, rgba(255, 252, 246, .86) 43%, rgba(255, 252, 246, .23) 63%, transparent 78%);
}

.glp1-series .series-hero__content {
  width: min(100% - 3rem, 1180px);
  margin: 0 auto;
  padding: 2rem 0;
}

.glp1-series .series-kicker,
.glp1-series .chapter-index,
.glp1-series .chapter-stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.glp1-series .series-kicker { color: #168f7c; margin: 0 0 .85rem; }

.glp1-series .series-hero h1 {
  max-width: 620px;
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(4.8rem, 8vw, 7.1rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-transform: uppercase;
}

.glp1-series .series-hero__dek {
  max-width: 540px;
  margin: 1rem 0 0;
  font-family: Georgia, serif;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  line-height: 1.35;
}

.glp1-series .series-hero__cta,
.glp1-series .chapter-row__cta,
.glp1-series .series-close__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: #fff;
  background: var(--guide-blue);
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(22, 84, 255, .14);
}

.glp1-series .series-hero__cta { margin-top: 1rem; padding: .82rem 1.3rem; }
.glp1-series .series-hero__cta::after,
.glp1-series .chapter-row__cta::after,
.glp1-series .series-close__cta::after { content: "→"; font-size: 1.15em; line-height: 1; }
.glp1-series .series-hero__cta:hover,
.glp1-series .chapter-row__cta:hover,
.glp1-series .series-close__cta:hover { background: #0d43df; }

.glp1-series .chapter-list {
  width: min(100% - 3rem, 1180px);
  margin: 0 auto;
  padding: 1.6rem 0 1.5rem;
}

.glp1-series .chapter-list__intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 2rem;
  margin: 0 1rem 1rem;
}

.glp1-series .chapter-list__eyebrow {
  margin: 0 0 .25rem;
  color: #168f7c;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.glp1-series .chapter-list__intro h2,
.glp1-series .series-close h2 {
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.65rem);
  font-weight: 900;
  line-height: .91;
  text-transform: uppercase;
}

.glp1-series .chapter-list__intro > p:last-child {
  max-width: 490px;
  margin: 0 0 .2rem;
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.4;
}

.glp1-series .chapter-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 150px;
  align-items: stretch;
  min-height: 150px;
  margin-top: .65rem;
  overflow: hidden;
  background: var(--guide-card);
  border: 1px solid var(--guide-line);
  border-radius: 9px;
}

.glp1-series .chapter-row__media { min-height: 148px; background: #e7dfd1; }
.glp1-series .chapter-row__media img { display: block; width: 100%; height: 100%; min-height: 148px; object-fit: cover; }
.glp1-series .chapter-row:nth-of-type(odd) .chapter-row__media img { object-position: center; }

.glp1-series .chapter-row__copy {
  align-self: center;
  min-width: 0;
  padding: .8rem 1.4rem;
}

.glp1-series .chapter-index { margin: 0 0 .3rem; color: #12786a; }

.glp1-series .chapter-row h3 {
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  line-height: .95;
  text-wrap: balance;
}

.glp1-series .chapter-row__copy > p:not(.chapter-index) {
  margin: .38rem 0 0;
  color: var(--guide-muted);
  font-family: Georgia, serif;
  font-size: .97rem;
  line-height: 1.28;
}

.glp1-series .chapter-row h3 a { color: inherit; text-decoration: none; }
.glp1-series .chapter-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

.glp1-series .chapter-row__stat {
  margin-top: .5rem !important;
  color: var(--guide-ink) !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-size: .9rem !important;
  line-height: 1.22 !important;
}

.glp1-series .chapter-stat-label { color: #168f7c; font-size: .64rem; }
.glp1-series .chapter-row__stat strong { font-weight: 800; }

.glp1-series .chapter-row__action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .7rem;
}

.glp1-series .chapter-row__cta { padding: .75rem .85rem; white-space: nowrap; font-size: .94rem; }

.glp1-series .series-note {
  width: min(100% - 3rem, 1180px);
  margin: 0 auto 2rem;
  padding: .85rem 1rem;
  color: #35415a;
  background: #f4efe5;
  border-left: 3px solid #45bda5;
  font-size: .9rem;
}

.glp1-series .series-close {
  min-height: 280px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 3rem max(1.5rem, calc((100vw - 1120px) / 2));
  color: #fff;
  background: #071333 url("/assets/photos/glp1-field-guide/glp1-coastal-path-hub-v2.webp") center 58% / cover no-repeat;
  isolation: isolate;
}

.glp1-series .series-close::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 19, 51, .96), rgba(7, 19, 51, .86) 45%, rgba(7, 19, 51, .24));
}

.glp1-series .series-close__content { width: min(100%, 1120px); margin: 0 auto; }
.glp1-series .series-close h2 { color: #fffdf6; max-width: 650px; font-size: clamp(2.8rem, 5vw, 4.6rem); }
.glp1-series .series-close__content > p { max-width: 570px; margin: .7rem 0 0; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.35; }
.glp1-series .series-close__cta { margin-top: .9rem; padding: .82rem 1.3rem; }

@media (max-width: 760px) {
  .glp1-series .shell-nav-wrapper { align-items: center; }
  .glp1-series .shell-brand { max-width: calc(100% - 64px); min-width: 0; }
  .glp1-series .shell-brand-title { font-size: 1.3rem; }
  .glp1-series .shell-brand-subtitle { font-size: .57rem; line-height: 1.4; }
  .glp1-series .shell-nav-toggle { flex-shrink: 0; }
  .glp1-series .series-hero { height: 540px; }
  .glp1-series .series-hero__image img { object-position: 100% center; }
  .glp1-series .series-hero::after { background: linear-gradient(90deg, rgba(255, 252, 246, .98), rgba(255, 252, 246, .87) 54%, rgba(255, 252, 246, .3)); }
  .glp1-series .series-hero__content, .glp1-series .chapter-list, .glp1-series .series-note { width: min(100% - 2rem, 1180px); }
  .glp1-series .series-hero__content { padding: 2rem 0; }
  .glp1-series .series-hero h1 { max-width: 510px; font-size: clamp(4.2rem, 15vw, 6.4rem); }
  .glp1-series .series-hero__dek { max-width: 390px; }
  .glp1-series .chapter-list { padding-top: 1.3rem; }
  .glp1-series .chapter-list__intro { grid-template-columns: 1fr; gap: .5rem; margin: 0 .15rem 1rem; }
  .glp1-series .chapter-row { grid-template-columns: 92px minmax(0, 1fr); min-height: 0; }
  .glp1-series .chapter-row__media, .glp1-series .chapter-row__media img { min-height: 100%; height: 100%; }
  .glp1-series .chapter-row__copy { padding: .85rem .9rem; }
  .glp1-series .chapter-row h3 { font-size: clamp(1.65rem, 7vw, 2.1rem); }
  .glp1-series .chapter-row__copy > p:not(.chapter-index) { font-size: .9rem; }
  .glp1-series .chapter-row__action { grid-column: 1 / -1; justify-content: flex-end; padding: .55rem .75rem .75rem; border-top: 1px solid var(--guide-line); }
  .glp1-series .chapter-row__cta { min-height: 42px; padding: .6rem 1rem; }
  .glp1-series .series-close { min-height: 300px; padding: 2.4rem 1.25rem; background-position: 62% center; }
  .glp1-series .series-close::before { background: linear-gradient(90deg, rgba(7, 19, 51, .96), rgba(7, 19, 51, .78) 70%, rgba(7, 19, 51, .48)); }
}

@media (max-width: 390px) {
  .glp1-series .series-hero__content, .glp1-series .chapter-list, .glp1-series .series-note { width: min(100% - 1.5rem, 1180px); }
  .glp1-series .series-hero h1 { font-size: clamp(3.75rem, 16.5vw, 4.5rem); }
  .glp1-series .chapter-row { grid-template-columns: 76px minmax(0, 1fr); }
  .glp1-series .chapter-row__copy { padding: .75rem; }
  .glp1-series .chapter-row h3 { font-size: 1.58rem; }
  .glp1-series .chapter-row__copy > p:not(.chapter-index) { font-size: .85rem; }
  .glp1-series .chapter-row__stat { font-size: .85rem !important; }
}

/* ---------------------------------------------------------------------------
   Landing-page section container.

   `.wrap` and its two custom properties used to arrive from /shared/home.css,
   which the landing page no longer loads. The values below are copied verbatim
   from that definition so the composition is pixel-identical; scoping to
   `.glp-page` keeps them off every other route.
   --------------------------------------------------------------------------- */
.glp-page {
  --wrap: 72rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
}

.glp-page .wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* ==========================================================================
   Section 5 — GLP-1 cluster figure system (visual pass, 2026-10-12)

   Serves the thirteen editorial articles, the field guide, and the two
   standalone cluster pages. Every label and number stays real HTML; a raster
   carries geometry only. Figure titles use the cluster display face and the
   kicker uses the cluster mono face by explicit stack, so the figure system
   looks the same on every route without touching --font-display on pages
   that keep their own reading type.
   ========================================================================== */

.glp-fig {
  margin: 2rem 0 2.25rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: #F5F8FC;
  border: 1px solid #DCE4EF;
  border-radius: 18px;
}

.glp-fig > :first-child { margin-top: 0; }
.glp-fig > :last-child { margin-bottom: 0; }

.glp-fig__kicker {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ba-blue-ink, #0056e2);
  margin: 0 0 0.5rem;
}

.glp-fig__title {
  font-family: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--navy);
  margin: 0 0 0.55rem;
}

.glp-fig__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 1rem;
}

/* The figure section already frames the raster; do not frame it twice. */
.glp-fig .teaching-raster {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
}

.glp-fig .teaching-raster__labels strong { color: var(--navy); }

.glp-compare {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 46em) {
  .glp-compare { grid-template-columns: 1fr 1fr; }
}

.glp-compare__panel {
  background: #FFFFFF;
  border: 1px solid #DCE4EF;
  border-radius: 12px;
  padding: 0.95rem 1.05rem;
}

.glp-compare__label {
  font-family: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--navy);
  margin: 0 0 0.3rem;
}

.glp-compare__body {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.glp-callout {
  margin: 1.75rem 0;
  padding: 1rem 1.15rem;
  background: #FFFBF2;
  border-left: 4px solid #B45309;
  border-radius: 4px 12px 12px 4px;
}

.glp-callout__label {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B45309;
  margin: 0 0 0.4rem;
}

.glp-callout p { margin: 0 0 0.5rem; }
.glp-callout p:last-child { margin-bottom: 0; }

/* Diagram hero: used where an article has no approved photograph. It sits in
   the existing .article-hero band, so it inherits that band's rhythm. */
.glp-hero-figure { margin: 1.5rem 0 1.25rem; }

.glp-hero-figure .teaching-raster {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
}

.glp-hero-figure .teaching-raster__labels strong { color: var(--navy); }

.glp-hero-figure__caption {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Photo hero: a responsive shell and nothing more. Each page's own
   .article-hero-image rule keeps governing size, margin and radius, so this
   class must not restyle the image. A descendant rule here would outrank the
   page's inline sheet and quietly change four heroes' layout. */
.glp-hero-photo { display: block; }

/* Row attribution must survive the horizontal scroll a phone gives a table. */
.article-prose .data-table-wrap { position: relative; }

.article-prose .data-table th[scope="row"],
.article-prose .data-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--cool-grey, #F8FAFC);
  z-index: 1;
  /* The row-header emphasis used to come from the page's own
     .data-table tbody td:first-child rule, which stops matching a cell once it
     becomes a th. Carry the weight and ink here instead of losing them. */
  font-weight: 600;
  color: var(--ink, #122033);
}

/* .article-cards only declares columns up to data-count four, so a wider grid
   collapsed to a single column at every width. */
@media (min-width: 700px) {
  .article-prose .article-cards[data-count="5"],
  .article-prose .article-cards[data-count="6"],
  .article-prose .article-cards[data-count="7"],
  .article-prose .article-cards[data-count="8"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Series chapter navigation stays distinct from ordinary reading links. */
.glp-series-article .article-hero .section-label {
  color: #0369a1;
}

.glp-series-article .article-hero .section-label::before {
  background: currentColor;
}

.glp-series-article .article-prose .data-table thead th {
  color: #fff;
}

.glp-series-article .article-prose #where-to-go-next {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line, #dce4ef);
}

.glp-series-article .article-prose .glp-series-next {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.glp-series-article .glp-series-next li {
  margin: 0;
  border-bottom: 1px solid var(--line, #dce4ef);
}

.glp-series-article .glp-series-next a,
.glp-series-article .glp-series-return a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.65rem;
  color: var(--ba-blue-ink, #0056e2);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.glp-series-article .glp-series-next a:hover,
.glp-series-article .glp-series-return a:hover {
  text-decoration-thickness: 2px;
}

.glp-series-article .glp-series-next a:focus-visible,
.glp-series-article .glp-series-return a:focus-visible {
  outline: 2px solid var(--ba-blue-ink, #0056e2);
  outline-offset: 3px;
}

/* Label-only reference cards need a compact index, not empty full-size panels. */
.glp-series-article .article-prose .glp-system-index {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.glp-series-article .article-prose .glp-system-index .article-card-block {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line, #dce4ef);
  border-radius: 6px;
  background: transparent;
}

@media (min-width: 700px) {
  .glp-series-article .article-prose .glp-system-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Article comparisons bind each label to its information, without invented
   signal curves, outcome trends, or disconnected illustration legends. */
.glp-series-article .article-prose :is(.glp-duration, .glp-food-noise, .glp-targets) {
  margin: 2rem 0 2.5rem;
  padding: 1.4rem 0;
  border-block: 1px solid #cbd7e7;
}

.glp-series-article .article-prose :is(.glp-duration, .glp-food-noise) > figcaption,
.glp-series-article .glp-target-table caption {
  margin: 0 0 1.15rem;
  padding: 0;
  text-align: left;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0a192f;
}

.glp-series-article .glp-duration dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
}

.glp-series-article .glp-duration dl > div {
  min-width: 0;
  padding: .4rem 0;
}

.glp-series-article .glp-duration dt {
  font-family: "Hanken Grotesk", sans-serif;
  color: #35415a;
  font-size: .95rem;
  font-weight: 700;
}

.glp-series-article .glp-duration dd { margin: .6rem 0 0; }
.glp-series-article .glp-duration dd strong {
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  font-weight: 800;
  color: #0a192f;
}
.glp-series-article .glp-duration dl > div:last-child dd strong { color: #12786a; }
.glp-series-article .glp-duration dd span {
  display: block;
  margin-top: .75rem;
  max-width: 24ch;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: .88rem;
  line-height: 1.45;
  color: #35415a;
}

.glp-series-article .article-prose .glp-food-noise {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.glp-series-article .glp-food-noise > figcaption { grid-column: 1 / -1; }
.glp-series-article .glp-food-noise__state { min-width: 0; }
.glp-series-article .article-prose .glp-food-noise__state h3 {
  margin: 0 0 1rem;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #35415a;
}
.glp-series-article .article-prose .glp-food-noise__state ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.glp-series-article .article-prose .glp-food-noise__state li {
  margin: 0 0 .6rem;
  font-family: Georgia, serif;
  font-size: clamp(.95rem, 2vw, 1.2rem);
  line-height: 1.45;
  font-style: italic;
  color: #35415a;
}
.glp-series-article .article-prose .glp-food-noise__state p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: #12786a;
}

.glp-series-article .glp-target-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  color: #0a192f;
}
.glp-series-article .glp-target-table :is(th, td) {
  padding: .9rem .75rem;
  border-bottom: 1px solid #dce4ef;
  text-align: left;
  vertical-align: top;
}
.glp-series-article .glp-target-table thead th {
  padding-top: 0;
  font-size: .85rem;
  color: #35415a;
}
.glp-series-article .glp-target-table tbody th { width: 35%; }
.glp-series-article .glp-target-table tr:last-child :is(th, td) { border-bottom: 0; }
.glp-series-article .glp-target-tag {
  display: inline-block;
  margin: 0 .4rem .3rem 0;
  padding: .22rem .5rem;
  background: #e7efff;
  color: #174591;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.4;
}
.glp-series-article .glp-target-tag:nth-child(2) { background: #e4f3ed; color: #126854; }
.glp-series-article .glp-target-tag:nth-child(3) { background: #fbefd8; color: #88521a; }

.glp-series-article .article-prose :is(.glp-habit-links, .glp-outcome-links) {
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  padding-block: .7rem;
  border-block: 1px solid #cbd7e7;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: .95rem;
  line-height: 1.4;
}
.glp-series-article :is(.glp-habit-links, .glp-outcome-links) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  color: #0056e2;
  font-weight: 600;
  text-underline-offset: .2em;
}
.glp-series-article :is(.glp-habit-links, .glp-outcome-links) a:focus-visible {
  outline: 2px solid #0056e2;
  outline-offset: 3px;
}
.glp-series-article .article-prose .glp-training-patterns {
  margin-block: 1.25rem;
  padding-left: 1.5rem;
  font-family: "Hanken Grotesk", sans-serif;
}
.glp-series-article .glp-training-patterns li {
  padding: .55rem .35rem;
  border-bottom: 1px solid #dce4ef;
}
.glp-series-article .glp-training-patterns li::marker { color: #12786a; font-weight: 700; }
.glp-series-article .article-prose .glp-research-status {
  padding: 1.2rem 1.35rem;
  background: #fbefd8;
  color: #593a18;
  font-family: "Hanken Grotesk", sans-serif;
  line-height: 1.6;
}
.glp-series-article .article-prose .glp-reader-goals {
  padding: 0;
  list-style: none;
  font-family: Georgia, serif;
  font-style: italic;
}
.glp-series-article .glp-reader-goals li {
  margin: 0;
  padding: .85rem 0;
  border-bottom: 1px solid #dce4ef;
}
.glp-series-article .glp-evidence-table tbody td,
.glp-series-article .glp-week-table tbody td { line-height: 1.55; }

@media (max-width: 480px) {
  .glp-series-article .glp-duration dl,
  .glp-series-article .article-prose .glp-food-noise { gap: 1rem; }
  .glp-series-article .glp-target-table :is(th, td) { padding-inline: .4rem; }
  .glp-series-article .glp-target-table tbody th { width: 38%; font-size: .9rem; }
  .glp-series-article .glp-target-tag { margin-right: .2rem; font-size: .8rem; }
}