/* ==========================================================================
   Endorsement page — THE SHIPPED STYLESHEET
   Reference for specs 008/010/014. Shared by 08-endorsement-page.html and
   08b-endorsement-page-multi-clip.html so the mockups cannot drift apart.

   Read the rules and notice what is NOT in them: no font-family, no colour
   value, no background. Every tone is mixed from the merchant theme's own
   `currentColor`; every typeface is inherited. That is the posture — the host
   supplies the brand, we supply the typographic system.

   Scoped entirely to `.cg-asset`. Nothing here can reach the merchant's
   header, footer, or any other page on their store.

   Two constraints this file must keep satisfying:
   - It ships inside a Liquid raw block, whose packaging entity-escapes the two
     Liquid openers (a doubled left brace, and a left brace followed by a
     percent sign). NEITHER sequence may appear anywhere in this file — not
     even inside a comment, which is how the first draft of this very comment
     broke the rule. Grep for both before changing anything.
   - No external requests: no webfont, no image host. Everything inherits.
   ========================================================================== */

.cg-asset {
  /* Derived palette. Each is the theme's own ink, thinned. */
  --cg-muted:     color-mix(in oklab, currentColor 66%, transparent);
  --cg-faint:     color-mix(in oklab, currentColor 46%, transparent);
  --cg-rule:      color-mix(in oklab, currentColor 17%, transparent);
  --cg-rule-soft: color-mix(in oklab, currentColor  9%, transparent);
  --cg-wash:      color-mix(in oklab, currentColor  5%, transparent);

  max-width: 41rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.25rem) 1.25rem clamp(3rem, 7vw, 5rem);
  font-size: 1.0625rem;
  line-height: 1.68;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Structural resets — we own spacing, never family/weight/colour. */
.cg-asset :where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; }
.cg-asset :where(p) + :where(p) { margin-top: 1.1em; }

/* --- breadcrumb: the internal link back to the hub ----------------------- */
.cg-breadcrumb {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}
.cg-breadcrumb a { text-decoration: none; }
.cg-breadcrumb a:hover { text-decoration: underline; }

/* --- hero ---------------------------------------------------------------- */
.cg-hero { margin-bottom: 1.75rem; }
.cg-hero h1 {
  font-size: clamp(1.95rem, 1.3rem + 2.6vw, 2.85rem);
  line-height: 1.13;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin-bottom: 0.85rem;
}

/* Freshness is the strongest measured citation correlate, so both dates are
   content, not fine print — sized to be read, not to disappear. */
.cg-dates {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cg-muted);
}

/* --- creator byline: the author entity ----------------------------------- */
.cg-byline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.95rem;
  align-items: center;
  padding: 1.15rem 0;
  margin: 1.5rem 0 2rem;
  border-top: 1px solid var(--cg-rule);
  border-bottom: 1px solid var(--cg-rule);
}
.cg-byline-photo {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cg-wash);
}
.cg-byline-name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.cg-byline-meta {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--cg-muted);
}
.cg-byline-meta a { text-decoration: none; }
.cg-byline-meta a:hover { text-decoration: underline; }
.cg-byline-sep { opacity: 0.5; padding: 0 0.15rem; }

/* --- multi-creator: the cluster at the top of the page ------------------- */
/* With several creators there is no single author, so the top block states
   the corroboration ("N creators") and each evidence unit carries its own
   full byline further down. Independent agreement IS the authority signal. */
.cg-creators {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.95rem;
  align-items: center;
  padding: 1.15rem 0;
  margin: 1.5rem 0 2rem;
  border-top: 1px solid var(--cg-rule);
  border-bottom: 1px solid var(--cg-rule);
}
.cg-creators-avatars { display: flex; }
.cg-creators-avatars > * {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--cg-wash);
  box-shadow: 0 0 0 2px canvas;
  margin-right: -0.7rem;
}
.cg-creators-avatars > *:last-child { margin-right: 0; }
.cg-creators-count {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.cg-creators-names {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--cg-muted);
}

/* --- the answer ---------------------------------------------------------- */
.cg-summary {
  font-size: 1.25rem;
  line-height: 1.55;
  letter-spacing: -0.004em;
  margin-bottom: 1.6rem;
}

.cg-disclosure {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cg-faint);
  padding-left: 0.85rem;
  border-left: 2px solid var(--cg-rule-soft);
  margin-bottom: 2.75rem;
}

/* --- one evidence unit: heading + byline + quote + clip + transcript ----- */
.cg-evidence { margin: 2.75rem 0; }
.cg-evidence + .cg-evidence {
  padding-top: 2.5rem;
  border-top: 1px solid var(--cg-rule-soft);
}
/* Connective section headings are prose the composing model MAY write
   (design-doc §4) — they carry no claim, and they give the page the semantic
   heading structure the citation research correlates with. */
.cg-evidence > h2 {
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
/* The per-unit byline is the same author entity, compact and unruled. */
.cg-byline-inline {
  border: 0;
  padding: 0;
  margin: 0 0 1.4rem;
  gap: 0.75rem;
}
.cg-byline-inline .cg-byline-photo { width: 2.4rem; height: 2.4rem; }
.cg-byline-inline .cg-byline-name { font-size: 0.9375rem; }
.cg-byline-inline .cg-byline-meta { font-size: 0.8125rem; }

/* --- creator quote ------------------------------------------------------- */
.cg-quote {
  margin: 0;
  padding-top: 0.25rem;
}
.cg-quote-context {
  font-size: 0.9375rem;
  color: var(--cg-muted);
  margin-bottom: 1rem;
}
.cg-quote blockquote { position: relative; }
/* Hanging quotation mark. The offset is in `rem`, NOT `em` — an em here would
   resolve against the glyph's own 2.9x size and escape the article's padding,
   clipping the mark off-screen on a phone. */
.cg-quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: -1.05rem;
  top: -0.1em;
  font-size: 2.9em;
  line-height: 1;
  color: var(--cg-rule);
  pointer-events: none;
}
.cg-quote blockquote p {
  font-size: clamp(1.3rem, 1.05rem + 0.85vw, 1.6rem);
  line-height: 1.36;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* Inline flow, not flex: the renderer emits bare " · " text nodes between the
   parts, so ordinary inline wrapping keeps the line honest on a narrow screen. */
.cg-quote-attribution {
  margin-top: 1.15rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--cg-muted);
}
.cg-quote-attribution cite { font-style: normal; font-weight: 600; }
.cg-quote-attribution a { text-decoration: none; }
.cg-quote-attribution a:hover { text-decoration: underline; }
.cg-provenance {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--cg-rule);
  border-radius: 0.25rem;
}

/* The clip sits BELOW the words: an answer engine cannot watch it, and the
   text is what gets cited. It is the human's proof, not the page's lead. */
.cg-quote-media-figure { margin-top: 1.75rem; }
.cg-quote-media {
  display: block;
  width: 100%;
  max-width: 16.5rem;
  aspect-ratio: 9 / 16;
  max-height: 27rem;
  object-fit: cover;
  border-radius: 0.65rem;
  border: 1px solid var(--cg-rule);
  background: var(--cg-wash);
}
.cg-quote-media-caption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--cg-faint);
}

/* --- transcript: verbatim, collapsed by default -------------------------- */
/* <details> is native — no JavaScript, and the full text sits in the
   server-rendered source whether or not the reader ever opens it, which is
   the only property a crawler or an answer-time fetcher has been shown to
   care about. This is NOT the hidden-text pattern: the reader controls it. */
.cg-transcript {
  margin-top: 2rem;
  border-top: 1px solid var(--cg-rule-soft);
  border-bottom: 1px solid var(--cg-rule-soft);
}
.cg-transcript > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 0;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cg-muted);
}
.cg-transcript > summary::-webkit-details-marker { display: none; }
.cg-transcript > summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.12rem);
  transition: transform 0.15s ease;
}
.cg-transcript[open] > summary::after { transform: rotate(-135deg) translateY(0.06rem); }

.cg-transcript-body {
  padding-bottom: 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--cg-muted);
}
.cg-transcript-line {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}
.cg-transcript-line time {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--cg-faint);
  padding-top: 0.16rem;
}
/* <mark>'s UA default is black-on-yellow — it would be the single hardcoded
   colour on the page and would look broken on a dark theme. Derive it. */
.cg-transcript mark {
  background: color-mix(in oklab, currentColor 15%, transparent);
  color: inherit;
  padding: 0.08em 0.16em;
  border-radius: 0.15rem;
}
.cg-transcript-quoted {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cg-faint);
}

/* --- FAQ: present, deliberately not elevated ----------------------------- */
.cg-faq {
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--cg-rule);
}
.cg-faq h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cg-muted);
  margin-bottom: 1.5rem;
}
.cg-faq h3 {
  font-size: 1.0625rem;
  line-height: 1.4;
  margin-bottom: 0.45rem;
}
.cg-faq h3 + p { margin-bottom: 1.6rem; }
.cg-faq h3 + p:last-child { margin-bottom: 0; }

/* --- CTA ----------------------------------------------------------------- */
.cg-cta-line { margin: 2.75rem 0; }
/* The button's accent IS the theme's link colour: `currentColor` inside an
   anchor resolves to whatever the merchant set. We never pick a colour. */
.cg-cta {
  display: inline-block;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 1.5px solid currentColor;
  border-radius: 0.4rem;
}
.cg-cta:hover { background: color-mix(in oklab, currentColor 10%, transparent); }

/* --- about the creators -------------------------------------------------- */
/* A short drafted descriptor per creator, grounded in their own bio and clips
   (design-doc §4's grounding rule applied to one more field — the model may
   phrase it, but may not invent a credential nobody stated). Deliberately
   brief: author bios are NOT a ranking factor (Google has said so outright).
   This earns its place by explaining why THIS person's testimony counts. */
.cg-about {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cg-rule);
}
.cg-about-person {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}
.cg-about-person + .cg-about-person { margin-top: 1.5rem; }
.cg-about-photo {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cg-wash);
}
.cg-about-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}
.cg-about-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cg-muted);
}
.cg-about-links {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--cg-faint);
}
.cg-about-links a { text-decoration: none; }
.cg-about-links a:hover { text-decoration: underline; }

/* --- related guides: the page-side internal links ------------------------ */
/* DESIGN-FORWARD: the page side of `internal_links` is deferred whole
   (spec 011, issue #148). Drawn here so the anatomy exists; do not build
   blindly. Anchor text is the target page's QUESTION, never "read more" —
   contextual anchors are what the internal-link correlate rests on. */
.cg-related {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cg-rule);
}
.cg-related ul { list-style: none; padding: 0; }
.cg-related li + li { margin-top: 0.9rem; }
.cg-related a {
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 600;
}
.cg-related a:hover { text-decoration: underline; }
.cg-related-rel {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cg-faint);
}

/* --- sources: a citation apparatus, not a bullet list -------------------- */
.cg-sources {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cg-rule);
}
/* The three foot sections share one quiet label style — mixing a display
   heading in among them reads as unconsidered. */
.cg-sources h2,
.cg-about h2,
.cg-related h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cg-muted);
  margin-bottom: 1rem;
}
.cg-sources ul { list-style: none; padding: 0; counter-reset: cg-src; }
.cg-sources li {
  counter-increment: cg-src;
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.cg-sources li + li { margin-top: 0.6rem; }
.cg-sources li::before {
  content: counter(cg-src) ".";
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  color: var(--cg-faint);
}
.cg-sources a { text-decoration: none; font-weight: 600; }
.cg-sources a:hover { text-decoration: underline; }
.cg-sources time { color: var(--cg-muted); }

@media (max-width: 640px) {
  .cg-asset { font-size: 1rem; }
  .cg-quote-media { max-width: 100%; max-height: 62vh; }
  .cg-byline, .cg-creators { gap: 0.8rem; }
  .cg-transcript-line { grid-template-columns: 2.6rem 1fr; gap: 0.6rem; }
}