/* ============================================================================
   Corrections for the inherited page templates.
   ----------------------------------------------------------------------------
   The token remap re-skinned every legacy rule, but it could not fix layout.
   These are the places where the old structure fought the new system and the
   result read as "old layout, new colours", which is worse than either.

   Loaded after gn.css. Everything here is prefixed html.gn so it also outranks
   the <style id="gn-fx"> block that js/fx.js injects at runtime, which lands
   later in the document than any linked stylesheet.
   ============================================================================ */

/* ------------------------------------------------- the discarded neon world

   js/fx.js still injects the effects layer from the pre-cream design: a
   pointer-following aurora, a glowing scroll rail, and spot glows built from
   #00ff88 / #a855f7. The token sweep never reached them because they live in a
   JavaScript string, not in markup. They are pure decoration from a world this
   site no longer occupies, and the glow shadows are the exact tell the system
   was built to remove.

   Hidden rather than deleted at source, because rebuilding the minified bundle
   would force a cache-busting version change across 2,861 pages for a purely
   cosmetic gain. The dead CSS still ships; removing it from fx.src.js is a
   follow-up, not a blocker. */
html.gn .gn-aurora { display: none !important; }
html.gn .gn-spot::before,
html.gn .gn-spot::after { display: none !important; }
html.gn .gn-magnet { transition: none; }

/* The scroll rail is a real affordance on a long article, so it stays — but as
   a hairline in the system's accent, not a neon bar with a 14px halo. */
html.gn .gn-beam {
  height: 2px;
  background: var(--ac);
  box-shadow: none;
}

/* --------------------------------------------------------- inherited heroes

   The archive, service, industry and glossary templates centre their hero and
   pad the top by 176px to clear a position:fixed nav. The nav is sticky now, so
   that padding was dead space, and the centring made every page except the
   homepage look like a different site. */
html.gn .hero {
  padding: clamp(32px, 5vw, 56px) var(--gut) clamp(24px, 3.5vw, 40px);
  min-height: 0;
  max-width: var(--max);
  margin: 0 auto;
  text-align: left;
  display: block;
}
html.gn .hero-title,
html.gn .hero-desc,
html.gn .hero-badge,
html.gn .stats-bar,
html.gn .newsletter,
html.gn .newsletter-desc,
html.gn .section-transition { text-align: left; }

html.gn .hero-desc {
  max-width: 60ch;
  margin-left: 0;
  margin-right: 0;
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.55;
}

/* The stat strip is the category's oldest device and it is existing content, so
   it is aligned into the system rather than redesigned: a ruled row, not a
   floating centred card. */
html.gn .stats-bar {
  justify-content: flex-start;
  gap: clamp(24px, 5vw, 56px);
  max-width: var(--max);
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  background: none;
  border-radius: 0;
  flex-wrap: wrap;
}

html.gn .newsletter {
  max-width: var(--max);
  margin: 0;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}

/* 112px of air between the hero and the first section on templates that were
   built for a taller, looser world. */
html.gn .hero + .section,
html.gn .hero + section { padding-top: clamp(28px, 4vw, 48px); }

/* Breadcrumbs read as navigation, not as body copy. */
html.gn .breadcrumb,
html.gn .breadcrumbs {
  font-size: 13px;
  color: var(--ink3);
  margin-bottom: 18px;
}
html.gn .breadcrumb a:hover,
html.gn .breadcrumbs a:hover { color: var(--ac); }

/* ---------------------------------------------------------------- eyebrows

   179 pages put a kicker above the heading: "The Problem", "Our Approach",
   "// Diagnose Your Growth". It is the most reliable tell of a generated
   layout, and it never earns its place — the heading already says what the
   section is, so the label is the same sentence twice at two sizes.

   Hidden rather than cut from markup: display:none removes it from the
   accessibility tree as well as the page, and it keeps this reversible in one
   line if a section is later found to depend on one. */
html.gn .section-label { display: none; }

/* With the kicker gone the heading needs its own air, since it was previously
   spaced against the label rather than against the section edge. */
html.gn .section-title { margin-top: 0; }

/* ------------------------------------------------------- article scan block

   Every Signal article and glossary term used to end in related links, which
   is a dead end: the reader learns something and leaves. This turns the end of
   each of 738 pages into an entry point for the scan.

   It is a real GET form pointing at "/", so it works with JavaScript disabled;
   the homepage reads ?scan= and runs immediately. No modal, no email gate, no
   interruption mid-read — it sits where the article finishes. */
html.gn .gn-cta-scan {
  margin: 40px 0 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
}
html.gn .gn-cta-scan h3 {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 540;
  letter-spacing: -.022em;
  margin: 0 0 6px;
}
html.gn .gn-cta-scan p {
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 56ch;
}
html.gn .gn-cta-scan form { display: grid; gap: 8px; max-width: 460px; }
@media (min-width: 520px) { html.gn .gn-cta-scan form { grid-template-columns: 1fr auto; } }
html.gn .gn-cta-scan input {
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  font-size: 16px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--bg);
  width: 100%;
}
html.gn .gn-cta-scan input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--actint); outline: none; }
html.gn .gn-cta-scan button {
  height: 46px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ac);
  color: var(--acink);
  font-size: 15px;
  font-weight: 530;
  cursor: pointer;
  white-space: nowrap;
}
html.gn .gn-cta-scan button:hover { background: var(--ac); color: var(--acink); opacity: .92; }
html.gn .gn-cta-scan small {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink3);
}

/* ----------------------------------------------------------- article body

   The article header sits on the page gutter while .post-content centres
   itself in an 800px column, so the h1 started at 34px and the first paragraph
   at 204px. One page, two left edges.

   Aligned to the header and given a real reading measure instead. 68ch is the
   upper end of comfortable for 15px Inter; the old 800px column was running to
   roughly 95 characters. */
html.gn .post-content,
html.gn .article-body,
html.gn .glossary-body {
  margin-inline: 0;
  padding-inline: var(--gut);
  max-width: calc(68ch + 2 * var(--gut));
}
html.gn .post-content > *,
html.gn .post-section { max-width: 68ch; }

/* The scan block is a panel rather than prose, so it gets the full measure. */
html.gn .gn-cta-scan { max-width: none; }

/* ---------------------------------------------------------------------------
   Press clippings.

   These are screenshots of the real articles, cropped to headline, byline and
   date. Nothing else: no body copy, no licensed photography, no advertising
   that happened to be on the page that day.

   The clippings come from publications with different grounds — Benzinga and
   Yahoo Finance are dark, Nasdaq and Entrepreneur are light — and that is left
   alone. Normalising them would make them look like artwork we made up, which
   is the opposite of the point. The card border does the unifying instead.
--------------------------------------------------------------------------- */
html.gn .gn-press {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto 1rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { html.gn .gn-press { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { html.gn .gn-press.three { grid-template-columns: repeat(3, 1fr); } }

html.gn .gn-clip {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
html.gn .gn-clip:hover,
html.gn .gn-clip:focus-visible {
  border-color: var(--ac);
  transform: translateY(-2px);
  color: inherit;
}
@media (prefers-reduced-motion: reduce) { html.gn .gn-clip { transition: none; } html.gn .gn-clip:hover { transform: none; } }

/* Natural height, deliberately.
   A fixed aspect-ratio with object-fit:cover looked tidier but cropped the
   bottom of the taller clippings, and the bottom of a clipping is where the
   byline lives — the one thing these images exist to prove. Ragged card
   heights are a cheap price for never cutting "BY SCOTT MCGOVERN" off.
   Intrinsic width and height attributes on every clipping keep this from
   costing any layout shift. */
html.gn .gn-clip img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg3);
}

html.gn .gn-clip .gn-clip-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  padding: .7rem .85rem .8rem;
}
html.gn .gn-clip .gn-pub {
  font-family: var(--mo);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
html.gn .gn-clip .gn-when {
  font-family: var(--mo);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--ink3);
}
html.gn .gn-clip .gn-read {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ac);
  white-space: nowrap;
}
html.gn .gn-clip:hover .gn-read { text-decoration: underline; text-underline-offset: .18em; }

html.gn .gn-press-group {
  font-family: var(--mo);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink3);
  text-align: center;
  margin: 2.5rem 0 1.1rem;
}

/* ---------------------------------------------------------------------------
   Profile page: one content column.

   The inherited page CSS gives .section and .section-dark different boxes, and
   .section-dark > * adds its own padding on top. Measured at 1440px, the four
   kinds of child in a dark section started at x=130, x=40, x=170 and x=270 —
   four left edges in one section, which reads as sloppiness rather than
   rhythm. These rules put every direct child of a section on this page into
   the same 1100px column so there is exactly one left edge on the page.

   Scoped to .gn-profile so no other page inherits the correction.
--------------------------------------------------------------------------- */
html.gn .gn-profile .section > *,
html.gn .gn-profile .section-dark > * {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 0;
}

/* Prose keeps the shared left edge and caps its measure on the right, rather
   than shrinking its box and drifting out of alignment with the headings. */
html.gn .gn-profile .section-desc {
  max-width: 1100px;
  padding-right: max(0px, calc(1100px - 68ch));
}

html.gn .gn-profile .gn-press { max-width: 1100px; }