/* ============================================================
   Editorial layer — "Weekender" style overlay (pilot 2026-10-24)
   Additive only: loaded AFTER legacy.css on pilot pages.
   Touches typography, rhythm and figures. Never layout grids,
   never components, never tool/app structure.
   Brand tokens (--accent etc.) inherited from tokens.css.
   ============================================================ */

/* ---- headline: heavy grotesque, tight leading ---- */
.hero h1,
.lp-hero h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* ---- eyebrow: italic small caps above the headline ---- */
.hero .gcard-tag {
  background: none;
  border: none;
  padding: 0;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}
.lp-hero .eyebrow {
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* ---- dek: the grey standfirst under the headline ---- */
.ed-dek {
  font-size: 1.27rem;
  line-height: 1.55;
  font-weight: 400;
  color: #565a55;
  max-width: 46rem;
  margin-top: 1.1rem;
}
.lp-hero .lede {
  font-size: 1.22rem;
  line-height: 1.6;
  color: #565a55;
  max-width: 46rem;
}

/* ---- byline: quieter, more air ---- */
.byline {
  font-size: 0.9rem;
  color: var(--faint);
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

/* ---- figures: full-width within the content container ---- */
.ed-figure { margin: 1.8rem 0 2.2rem; }
.ed-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.ed-figure figcaption {
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
  margin-top: 0.65rem;
}

/* ---- article body: reading rhythm ---- */
.article-body {
  font-size: 1.135rem;
  line-height: 1.78;
  color: var(--ink-soft);
}
.article-body p { margin-bottom: 1.35em; }
.article-body h2 {
  font-family: var(--font-body);
  font-weight: 750;
  font-size: 1.62rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2.3em 0 0.65em;
}
.article-body > p:first-of-type::first-letter {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 640;
  font-size: 3.1em;
  line-height: 0.85;
  float: left;
  padding: 0.06em 0.14em 0 0;
  color: var(--accent-deep);
}
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--ink);
}

/* ---- hand-drawn style divider (SVG squiggle, brand blue) ---- */
.ed-rule {
  border: 0;
  height: 22px;
  max-width: 230px;
  margin: 2.6rem auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='22' viewBox='0 0 230 22'%3E%3Cpath d='M3 12 Q 32 3, 60 12 T 117 12 T 174 12 T 227 12' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 640px) {
  .ed-dek { font-size: 1.13rem; }
  .article-body { font-size: 1.06rem; line-height: 1.74; }
  .article-body > p:first-of-type::first-letter { font-size: 2.7em; }
}