/* ==========================================================================
   Bast advisory one-pagers
   Layers on assets/styles.css. Same tokens, same Estedad, re-weighted.

   THE RE-WEIGHT
   The site anchors display type at 200 thin, which is right at 68px on a
   landing page and anaemic at 40px on a one-pager. Same role map, one step
   heavier where the canvas got smaller:

     figure  200 thin      the hero number only, where thin still sings
     h1      300 light     the elegant voice, with enough presence to lead
     h2      500 medium    proof headings, functional
     label   600 semibold  tracked, accent - orients, never shouts
     body    400 regular
     strong  600 semibold  Estedad 700 is too heavy against 400 at this size

   USING THE PAGE
   Prose does not get wider to fill a sheet - a 110-character line is
   unreadable. The page gets filled by putting structure beside the prose:
   the title sits next to the lede, facts and proofs run as three-up rows,
   the ask splits in two. Measure stays ~60ch everywhere text is read.

   Screen and print are the same document. Print drops the chrome.
   ========================================================================== */

:root {
  /* Match the site's full content rail on screen. The old 58rem cap made the
     advisory read like a document embedded inside the website. */
  --adv-max: var(--max);

  --adv-figure: clamp(4.25rem, 8vw, 5.5rem);
  --adv-h1: clamp(1.9rem, 3.6vw, 2.5rem);
  --adv-lede: 1.0625rem;
  --adv-proof: 1.0625rem;
  --adv-body: 0.9375rem;
  --adv-label: 0.75rem;
  --adv-fine: 0.8125rem;

  --adv-gap: 2rem;
}

/* ---------- the sheet ---------------------------------------------------- */
.sheet {
  width: min(var(--adv-max), calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4.5rem, 8vw, 7rem);
}

/* ---------- advisory landing page --------------------------------------- */
.advisory-index {
  padding-top: clamp(4.5rem, 9vw, 8rem);
}

.advisory-index > * + * {
  margin-top: clamp(6rem, 11vw, 10rem);
}

.advisory-index .sheet-label {
  color: var(--accent-text);
  font-size: var(--fs-label);
}

.advisory-hero {
  position: relative;
  overflow: clip;
}

.advisory-hero::before {
  content: "";
  position: absolute;
  width: min(34rem, 60vw);
  height: min(34rem, 60vw);
  right: -12rem;
  top: -14rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 144, 204, 0.13), rgba(60, 84, 161, 0.04) 48%, transparent 70%);
  pointer-events: none;
}

.advisory-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

.advisory-index h1 {
  max-width: 12ch;
  font-size: clamp(3.9rem, 7.2vw, 6.35rem);
  font-weight: var(--fw-thin);
  line-height: 0.93;
  letter-spacing: -0.045em;
}

.advisory-hero-note {
  padding-bottom: 0.45rem;
}

.advisory-hero-note p {
  margin: 0 0 1.6rem;
  color: var(--quiet);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.55;
}

.advisory-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--accent-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.advisory-arrow-link span {
  font-size: 1.35em;
  transition: transform 160ms ease;
}

.advisory-arrow-link:hover span { transform: translateX(0.3rem); }

/* Two doors out of the hero: start a conversation, or go read her first. */
.advisory-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.25rem;
}

.advisory-arrow-link-quiet {
  color: var(--quieter);
  font-weight: 400;
}

.advisory-arrow-link-quiet:hover { color: var(--accent-text); }

.advisory-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  border-top: 2px solid transparent;
  border-image: var(--grad) 1;
}

.advisory-rail p {
  margin: 0;
  padding: 1.25rem 1.5rem 0 0;
}

.advisory-rail p + p {
  border-left: 1px solid var(--line);
  padding-left: 1.5rem;
}

.advisory-rail strong,
.advisory-rail span {
  display: block;
}

.advisory-rail strong {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.advisory-rail span {
  margin-top: 0.25rem;
  color: var(--quieter);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}

/* ---------- the narrative beneath the advisory work -------------------- */
.advisory-narrative {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) * 1.5);
  background: var(--ink);
  color: #fff;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.advisory-narrative::before {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  left: -13rem;
  bottom: -20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 169, 225, 0.24), transparent 68%);
  pointer-events: none;
}

.advisory-narrative-copy {
  position: relative;
  z-index: 1;
}

.advisory-narrative .sheet-label { color: #7fd0f0; }

.advisory-narrative h2 {
  max-width: 13ch;
  margin: 1rem 0 1.25rem;
  color: #fff;
  font-size: clamp(2.7rem, 5vw, 4.7rem);
  font-weight: var(--fw-thin);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.advisory-narrative-lede {
  max-width: 56ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

.advisory-narrative blockquote {
  max-width: 38ch;
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid #55c7ec;
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: var(--fw-light);
  line-height: 1.45;
}

.advisory-narrative-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2rem;
}

.advisory-narrative-actions .button {
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

.advisory-narrative-actions .button:hover {
  background: #eaf7fc;
}

.advisory-narrative-actions .advisory-download {
  color: #a8ddf2;
}

.advisory-narrative-cover {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 22rem);
  justify-self: end;
  color: #fff;
  text-decoration: none;
}

.advisory-narrative-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.advisory-narrative-cover > span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.advisory-narrative-cover:hover img {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.advisory-narrative-cover:hover > span { color: #fff; }

.advisory-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.advisory-library-head h2,
.advisory-offer h2 {
  margin: 0.8rem 0 0;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: var(--fw-thin);
  line-height: 1;
  letter-spacing: -0.035em;
}

.advisory-library-head > p {
  margin: 0;
  color: var(--quiet);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
}

.advisory-brief-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advisory-brief-card {
  position: relative;
  display: flex;
  min-height: 35rem;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card-face);
  box-shadow: var(--neu-raise-sm);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.advisory-brief-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad);
}

.advisory-brief-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--neu-raise);
}

.advisory-brief-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.advisory-brief-card h3 {
  min-height: 4.8rem;
  margin: 3.5rem 0 1rem;
  font-size: clamp(1.65rem, 2.8vw, 2.15rem);
  font-weight: var(--fw-light);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.advisory-brief-card > p {
  margin: 0;
  color: var(--quiet);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.advisory-proof {
  margin: auto 0 2rem;
  padding-top: 2rem;
}

.advisory-proof strong {
  display: block;
  color: var(--accent-text);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: var(--fw-thin);
  line-height: 1;
  letter-spacing: -0.03em;
}

.advisory-proof span {
  display: block;
  margin-top: 0.55rem;
  color: var(--quieter);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}

.advisory-brief-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.advisory-brief-actions .button {
  min-height: 42px;
  padding: 0.65rem 1rem;
  font-size: var(--fs-body-sm);
}

.advisory-download {
  color: var(--accent-text);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  text-underline-offset: 3px;
}

.advisory-offer {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
  border-radius: calc(var(--radius-lg) * 1.5);
  background: var(--ink);
  color: #fff;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.advisory-offer .sheet-label { color: #7fd0f0; }
.advisory-offer h2 { color: #fff; }

.advisory-offer-copy p {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
}

.advisory-offer-copy strong { color: #fff; }
.advisory-offer-copy .button { margin-top: 0.75rem; }

.advisory-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.16);
}

.advisory-fit > div {
  background: var(--ink);
  padding: 1.25rem;
}

.advisory-fit span {
  display: block;
  color: #7fd0f0;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.advisory-fit p {
  margin: 0.65rem 0 0;
  font-size: var(--fs-body-sm);
}

.advisory-capacity { margin-bottom: 0; }

/* ---------- detail-page wayfinding and source ledger -------------------- */
.advisory-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  width: min(var(--max), calc(100% - 40px));
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 auto;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line-subtle);
  border-bottom: 1px solid var(--line-subtle);
  background: rgba(221, 227, 233, 0.92);
  backdrop-filter: blur(12px);
  color: var(--quiet);
  font-size: var(--fs-body-sm);
}

.advisory-subnav a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.advisory-subnav a:hover { color: var(--accent-text); }
.advisory-subnav-back { color: var(--accent-text) !important; }

.advisory-subnav div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.advisory-receipts {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  border-top: 1px solid var(--line-subtle);
}

.advisory-receipts-head {
  display: grid;
  grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 1.35fr);
  gap: 1rem clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.advisory-receipts-head .sheet-label {
  grid-row: 1 / span 2;
  color: var(--accent-text);
}

.advisory-receipts-head h2 {
  margin: 0;
  font-size: clamp(2.25rem, 4.5vw, 3.8rem);
  font-weight: var(--fw-thin);
  line-height: 1;
  letter-spacing: -0.035em;
}

.advisory-receipts-head > p:last-child {
  max-width: 58ch;
  margin: 0.75rem 0 0;
  color: var(--quiet);
  line-height: 1.55;
}

.advisory-source-list {
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 2.5rem;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.advisory-source-list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}

.advisory-source-list span {
  color: var(--quieter);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
}

.advisory-source-list a {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.advisory-source-list a:hover {
  color: var(--accent-text);
  text-decoration-color: currentColor;
}

/* One .sheet-page per printed page. On screen they are just sections of the
   same scroll; in print each one is exactly one Letter page, with its own
   padding, so page two is not a leftover fragment of page one. */
.sheet-page > * + * { margin-top: var(--adv-gap); }
.sheet-page + .sheet-page { margin-top: calc(var(--adv-gap) * 1.5); }

/* ---------- masthead ----------------------------------------------------- */
.sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid transparent;
  border-image: var(--grad) 1;
}

.sheet-head img { width: 104px; height: auto; display: block; }

.sheet-label {
  font-family: var(--font-display);
  font-size: var(--adv-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

/* Title beside the lede - this is what fills the top of the page. */
.sheet-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: end;
}

.sheet h1 {
  font-size: var(--adv-h1);
  font-weight: var(--fw-light);   /* 300, not the site's 200 */
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
}

.sheet-lede {
  font-size: var(--adv-lede);
  font-weight: 400;
  line-height: 1.45;
  color: var(--quiet);
  margin: 0;
}

/* ---------- the number --------------------------------------------------- */
.stat {
  display: grid;
  grid-template-columns: minmax(12.5rem, 0.25fr) 1fr;
  gap: 2rem;
  align-items: center;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
}

.stat-figure {
  font-size: var(--adv-figure);
  font-weight: var(--fw-thin);    /* 200 - the one place thin belongs */
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}

.stat-unit {
  font-size: var(--adv-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7fd0f0;
  margin: 0.55rem 0 0;
}

.stat-claim {
  font-size: var(--adv-lede);
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
}

.stat-claim strong { font-weight: var(--fw-semibold); }

/* A sheet whose argument is the point carries a statement here, not a number.
   Same block, same weight in the page, no invented metric. */
.stat-statement { grid-template-columns: 1fr; }
.stat-label { color: #7fd0f0; margin-bottom: 0.7rem; }
.stat-statement .stat-claim { font-size: calc(var(--adv-lede) * 1.14); line-height: 1.38; max-width: 74ch; }

.stat-source {
  font-size: var(--adv-fine);
  color: rgba(255, 255, 255, 0.6);
  margin: 0.6rem 0 0;
}

.stat-source a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- the turn ----------------------------------------------------- */
.turn {
  font-size: var(--adv-lede);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 0;             /* margin-top belongs to the .sheet rhythm */
  max-width: none;
  columns: 2;
  column-gap: 2.25rem;
  column-fill: balance;
}

.turn strong { font-weight: var(--fw-semibold); }

/* A turn can run to several paragraphs when the argument needs room. */
.turn p { margin: 0 0 0.7rem; break-inside: avoid-column; }
.turn p:last-child { margin-bottom: 0; }

/* Fine print that belongs to the block above it, not to the page. */
.stat-note {
  font-size: var(--adv-fine);
  color: var(--quieter);
  margin-top: 0.55rem !important;
}

/* Inside the ink band the muted colour has to be light, not dark. */
.stat .stat-note { color: rgba(255, 255, 255, 0.45); }

/* ---------- three-up rows ------------------------------------------------ */
.row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin-bottom: 0;             /* margin-top belongs to the .sheet rhythm */
}

/* facts: a number and what it means */
.facts > li { border-top: 1px solid var(--line); padding-top: 0.85rem; }

.facts b {
  display: block;
  font-size: 1.75rem;
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.facts p { font-size: var(--adv-body); line-height: 1.45; color: var(--quiet); margin: 0; }
.facts cite { display: block; font-style: normal; font-size: var(--adv-fine); color: var(--quieter); margin-top: 0.35rem; }

/* proofs: what the work is. Four of them go two-up rather than four-across -
   four columns on Letter gives each about 1.6in, which is not a column. */
.proofs > li { border-top: 2px solid var(--accent); padding-top: 0.85rem; }
.proofs-2up { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
.proofs p + p { margin-top: 0.55rem; }

.proofs h2 {
  font-size: var(--adv-proof);
  font-weight: var(--fw-medium);  /* 500 */
  line-height: 1.25;
  margin: 0 0 0.4rem;
}

.proofs p { font-size: var(--adv-body); line-height: 1.5; color: var(--quiet); margin: 0; }

.proofs cite {
  display: block;
  font-style: normal;
  font-size: var(--adv-fine);
  color: var(--quieter);
  margin-top: 0.5rem;
}

.proofs cite a { color: var(--accent-text); }

/* A number that proves the mechanism, sitting under the claim it supports.
   Never replaces the voice line; it earns the voice line. */
.proof-stat {
  font-size: var(--adv-body);
  line-height: 1.45;
  color: var(--ink);
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-subtle);
}

.proof-stat b {
  font-weight: var(--fw-light);
  font-size: 1.4em;
  letter-spacing: -0.015em;
  color: var(--accent-text);
}

.proof-stat span {
  display: block;
  font-size: var(--adv-fine);
  color: var(--quieter);
  margin-top: 0.25rem;
}

/* ---------- the running band --------------------------------------------- */
.running {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
}

.running > .sheet-label { margin-bottom: 0.85rem; }

.running ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.running li { font-size: var(--adv-body); line-height: 1.45; color: var(--quiet); margin: 0; }
.running b { display: block; font-weight: var(--fw-semibold); color: var(--ink); }


/* ---------- the story ----------------------------------------------------
   Long-form prose that has to earn its space on a sheet. Two columns keep the
   measure readable while using the full width, which is the same trick the
   three-up rows pull with structure.
   -------------------------------------------------------------------------- */
.story { border-top: 2px solid transparent; border-image: var(--grad) 1; padding-top: 1.1rem; }

.story > .sheet-label { margin-bottom: 0.75rem; }

.story-body {
  columns: 2;
  column-gap: 2.25rem;
  font-size: var(--adv-body);
  line-height: 1.5;
  color: var(--quiet);
}

.story-body p { margin: 0 0 0.7rem; break-inside: avoid; }
.story-body p:last-child { margin-bottom: 0; }
.story-body strong { font-weight: var(--fw-semibold); color: var(--ink); }

/* ---------- the ask ------------------------------------------------------ */
.ask {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
  border-top: 2px solid transparent;
  border-image: var(--grad) 1;
  padding-top: 1.25rem;
}

.ask p { margin: 0; font-size: var(--adv-body); line-height: 1.5; }
.ask strong { font-weight: var(--fw-semibold); }
.ask .ask-price { font-size: var(--adv-lede); font-weight: 300; }

.sheet-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--adv-fine);
  color: var(--quieter);
  border-top: 1px solid var(--line-subtle);
  padding-top: 0.85rem;
}

.sheet-foot p { margin: 0; }

/* The website already carries the brand and global footer. Keep the document
   furniture for print, but let the screen version behave like a proper page.
   This sits after the shared sheet rules so the screen treatment wins. */
@media screen {
  .sheet-head img,
  .sheet-foot { display: none; }

  .sheet-head {
    justify-content: flex-start;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .sheet-page + .sheet-page {
    margin-top: clamp(5rem, 10vw, 8rem);
    padding-top: clamp(4rem, 8vw, 6.5rem);
    border-top: 1px solid var(--line-subtle);
  }
}

/* Continuation head. Hidden on screen; printed at the top of a second page so
   the sheet still says who it is from if the pages get separated. */
.sheet-contd { display: none; }

@media (max-width: 64rem) {
  .advisory-hero-grid,
  .advisory-narrative,
  .advisory-library-head,
  .advisory-offer {
    grid-template-columns: 1fr;
  }

  .advisory-hero-note,
  .advisory-library-head > p,
  .advisory-offer-copy {
    max-width: 44rem;
  }

  .advisory-brief-grid {
    grid-template-columns: 1fr;
  }

  .advisory-brief-card {
    min-height: 0;
  }

  .advisory-brief-card h3 {
    min-height: 0;
    max-width: 20ch;
    margin-top: 2.5rem;
  }

  .advisory-proof {
    margin-top: 3rem;
  }

  .advisory-narrative-cover {
    width: min(100%, 20rem);
    justify-self: start;
  }
}

@media (max-width: 46rem) {
  .sheet-intro, .ask { grid-template-columns: 1fr; gap: 1.25rem; }
  .turn { columns: 1; }
  .story-body { columns: 1; }
  .row3, .running ul, .proofs-2up { grid-template-columns: 1fr; }
  .stat { grid-template-columns: 1fr; gap: 1rem; }
  .advisory-index .proofs > li { min-height: 0; }

  .advisory-index {
    padding-top: 3.5rem;
  }

  .advisory-index > * + * {
    margin-top: 5rem;
  }

  .advisory-index h1 {
    font-size: clamp(3.2rem, 15vw, 4.1rem);
  }

  .advisory-rail {
    grid-template-columns: 1fr;
    margin-top: 3.5rem;
  }

  .advisory-rail p {
    padding: 1rem 0;
  }

  .advisory-rail p + p {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-left: 0;
  }

  .advisory-library-head h2,
  .advisory-offer h2 {
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }

  .advisory-narrative {
    padding: 2rem 1.5rem;
  }

  .advisory-narrative h2 {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .advisory-narrative-cover {
    width: 100%;
  }

  .advisory-offer {
    padding: 2rem 1.5rem;
  }

  .advisory-fit {
    grid-template-columns: 1fr;
  }

  .advisory-subnav {
    align-items: flex-start;
    padding: 0.7rem 0;
  }

  .advisory-subnav div {
    gap: 0.9rem;
  }

  .advisory-receipts-head {
    grid-template-columns: 1fr;
  }

  .advisory-receipts-head .sheet-label {
    grid-row: auto;
  }

  .advisory-source-list li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* ==========================================================================
   PRINT - this is the PDF. Chromium renders it; CSS owns the page.
   ========================================================================== */
@page {
  size: Letter;
  margin: 0;
}

@media print {
  /* --adv-scale is set by scripts/advisory-pdf.mjs, which shrinks the sheet
     until it fits one page. Edit the copy freely; the fit corrects itself. */
  :root {
    --adv-scale: 1;

    --adv-figure: calc(4.5rem  * var(--adv-scale));
    --adv-h1:     calc(2.15rem * var(--adv-scale));
    --adv-lede:   calc(1.02rem * var(--adv-scale));
    --adv-proof:  calc(1.02rem * var(--adv-scale));
    --adv-body:   calc(0.9rem  * var(--adv-scale));
    --adv-label:  calc(0.7rem  * var(--adv-scale));
    --adv-fine:   calc(0.75rem * var(--adv-scale));
    --adv-gap:    calc(1.4rem  * var(--adv-scale));
  }

  html, body { background: #fff; color: var(--ink); font-size: 16px; }

  .site-header,
  .site-footer,
  .bast-consent,
  .skip-link,
  .print-hide { display: none !important; }

  main { padding: 0 !important; margin: 0 !important; }

  .sheet { max-width: none; width: 100%; margin: 0; padding: 0; }

  /* Each page is a real page: fixed to Letter, with its own margins, so the
     second one is not a fragment inheriting whatever padding was left over.
     Laid out as a column that distributes its slack, which is what stops a
     short page from ending two inches up and reading as if it were cut off.
     Children do not shrink - if the copy will not fit, it spills to another
     page where the build catches it, rather than quietly compressing. */
  .sheet-page {
    height: 11in;
    padding: calc(0.58in * var(--adv-scale)) 0.6in calc(0.4in * var(--adv-scale));
    box-sizing: border-box;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    break-after: page;
    break-inside: avoid;
  }
  .sheet-page:last-child { break-after: auto; }
  .sheet-page > * { flex: 0 0 auto; }

  /* Fills and rules must survive the print pipeline. */
  .stat,
  .running,
  .facts > li,
  .proofs > li {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-inside: avoid;
  }

  .story   { padding-top: calc(0.9rem * var(--adv-scale)); }
  .proof-stat { margin-top: calc(0.55rem * var(--adv-scale)); padding-top: calc(0.5rem * var(--adv-scale)); }
  /* Let the argument flow across the full page instead of stranding a wide
     unused margin to its right. Paragraphs stay intact where they can. */
  .turn p { margin-bottom: calc(0.55rem * var(--adv-scale)); }
  .story-body { column-gap: 2rem; }

  .sheet-contd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: calc(0.7rem * var(--adv-scale));
    border-bottom: 1px solid var(--line);
  }
  .sheet-contd img { width: calc(74px * var(--adv-scale)); height: auto; display: block; }
  .stat    { padding: calc(1.25rem * var(--adv-scale)) 1.4rem; border-radius: 9px; }
  .running { padding: calc(1.05rem * var(--adv-scale)) 1.25rem; border-radius: 9px; }

  .facts b            { font-size: calc(1.6rem * var(--adv-scale)); margin-bottom: calc(0.32rem * var(--adv-scale)); }
  .facts > li,
  .proofs > li        { padding-top: calc(0.72rem * var(--adv-scale)); }
  .sheet-head         { padding-bottom: calc(0.85rem * var(--adv-scale)); }
  .sheet-intro        { gap: 2.1rem; }
  .ask                { padding-top: calc(1rem * var(--adv-scale)); gap: 1.8rem; }
  .sheet-foot         { padding-top: calc(0.7rem * var(--adv-scale)); }
  .running > .sheet-label { margin-bottom: calc(0.7rem * var(--adv-scale)); }
  .running ul         { gap: 1.35rem; }
  .row3               { gap: 1.4rem; }

  .sheet-head img { width: calc(92px * var(--adv-scale)); }

  a { text-decoration: none; color: inherit; }
  .stat-source a { color: rgba(255, 255, 255, 0.7); }
  .proofs cite a { color: var(--accent-text); }

/* A number that proves the mechanism, sitting under the claim it supports.
   Never replaces the voice line; it earns the voice line. */
.proof-stat {
  font-size: var(--adv-body);
  line-height: 1.45;
  color: var(--ink);
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-subtle);
}

.proof-stat b {
  font-weight: var(--fw-light);
  font-size: 1.4em;
  letter-spacing: -0.015em;
  color: var(--accent-text);
}

.proof-stat span {
  display: block;
  font-size: var(--adv-fine);
  color: var(--quieter);
  margin-top: 0.25rem;
}
}