/* article.css · shared stylesheet for the generated article pages
 *
 * Loaded by every insights/[slug].html. It is a FILE rather than an inline
 * <style> block because article pages are N files, not one: an inline copy
 * would ship once per article and a fix would mean regenerating all of them.
 * Every other v2 page is self-contained and stays that way.
 *
 * main.css is NOT touched and is not loaded by an article page. Article
 * styling lives here and nowhere else (CLAUDE_WEBSITE.md section 3, item 9).
 *
 * TWO HALVES, kept separate on purpose.
 *
 *   PART 1 · THE SHELL, COPIED VERBATIM FROM about.html's inline <style>.
 *   Do not rewrite these rules. They are what makes an article page visually
 *   identical to the rest of the v2 site. If about.html changes, re-copy.
 *
 *   PART 2 · THE ARTICLE BODY, new. None of it exists anywhere on the site,
 *   because no page has ever rendered long-form prose. Each rule carries the
 *   reason it is needed.
 *
 * NOT HERE: .article, .article-grid, .featured and .filter-bar. Those belong
 * to insights.html's inline <style> and duplicating them invites drift.
 *
 * Square corners everywhere. No border-radius on anything in this file.
 */


/* ==========================================================================
 * PART 1 · SHELL, VERBATIM FROM about.html
 * ========================================================================== */

/* --- :root, all 21 tokens, unchanged (about.html 31 to 44) --------------- */
  :root {
    --red: #E20000; --red-dark: #C50000;
    --navy: #011132; --navy-2: #051D4A; --navy-3: #020F28;
    --silver: #ADB5BD; --white: #FFFFFF; --off: #F5F5F3; --text-dim: #3A4A66;
    --line: rgba(255,255,255,0.10); --line-navy: rgba(1,17,50,0.14);
    --silver-dim: rgba(173,181,189,0.62);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fs-display: clamp(2.4rem, 5.5vw, 4.5rem);
    --fs-h2: clamp(1.75rem, 3.6vw, 2.75rem);
    --fs-h3: 1.25rem;
    --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-label: 0.75rem;
    --nav-h: 66px;
    --space-section: clamp(4.5rem, 10vw, 8.5rem);
  }

/* --- reset, focus, skip link, container (about.html 45 to 56) ------------ */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Sora', sans-serif; font-weight: 400; font-size: var(--fs-body); line-height: 1.7; background: var(--navy); color: var(--silver); -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
  .on-light :focus-visible { outline-color: var(--navy); }
  .skip-link { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--navy); padding: 0.75rem 1.25rem; z-index: 999; font-size: var(--fs-small); text-decoration: none; }
  .skip-link:focus { left: 0; }
  .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
  @media (min-width: 640px)  { .container { padding: 0 2rem; } }
  @media (min-width: 1024px) { .container { padding: 0 2.5rem; } }

/* --- headings and accent (about.html 61 to 66) -------------------------- */
  h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em; color: var(--white); }
  .on-light h2 { color: var(--navy); }
  h3 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--white); }
  .on-light h3 { color: var(--navy); }
  .accent { color: var(--red); font-style: italic; }
  .on-light p { color: var(--text-dim); }

/* --- buttons and text link (about.html 68 to 76) ------------------------ */
  .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 1.05rem 1.9rem; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .btn-primary { background: var(--red); color: var(--white); }
  .btn-primary:hover { background: var(--red-dark); }
  .btn-ghost { border-color: rgba(255,255,255,0.35); color: var(--white); background: none; }
  .btn-ghost:hover { border-color: var(--white); }
  .on-light .btn-ghost { border-color: rgba(1,17,50,0.35); color: var(--navy); }
  .on-light .btn-ghost:hover { border-color: var(--navy); }
  .text-link { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 0.35rem; transition: border-color 0.2s; }
  .text-link:hover { border-color: var(--white); }

/* --- nav, including the mobile drawer (about.html 78 to 97) ------------- */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem 1.25rem; transition: background-color 0.3s; }
  .nav.scrolled { background: rgba(1,17,50,0.96); border-bottom: 1px solid var(--line); }
  @media (min-width: 1024px) { .nav { padding: 1.1rem 2.5rem; } }
  .nav-logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; font-size: 1.3rem; letter-spacing: 0.02em; color: var(--white); text-decoration: none; }
  .nav-links { display: none; list-style: none; gap: 2.25rem; }
  .nav-links a { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); text-decoration: none; transition: color 0.2s; }
  .nav-links a:hover { color: var(--white); }
  .nav-links a[aria-current="page"] { color: var(--white); border-bottom: 1px solid var(--white); padding-bottom: 0.3rem; }
  .nav-cta-slot { display: none; }
  .nav-toggle { background: none; border: 1px solid var(--line); width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
  .nav-toggle span { width: 18px; height: 2px; background: var(--white); }
  @media (min-width: 900px) {
    .nav-links { display: flex; }
    .nav-cta-slot { display: block; }
    .nav-toggle { display: none; }
  }
  .nav-mobile { display: none; position: fixed; inset: 0; z-index: 190; background: var(--navy-3); padding: 6rem 2rem 2rem; }
  .nav-mobile.open { display: block; }
  .nav-mobile ul { list-style: none; display: grid; gap: 1.75rem; margin-bottom: 3rem; }
  .nav-mobile a:not(.btn) { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--white); text-decoration: none; }

/* --- footer (about.html 165 to 178) ------------------------------------- */
  .site-footer { background: var(--navy-3); padding: 4.5rem 0 2rem; }
  .footer-grid { display: grid; gap: 3rem; margin-bottom: 3.5rem; }
  @media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
  .footer-logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; font-size: 1.3rem; color: var(--white); margin-bottom: 1rem; }
  .footer-brand p { font-size: var(--fs-small); color: var(--silver); }
  .footer-brand a { color: var(--white); }
  .footer-col-label { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-dim); margin-bottom: 1.25rem; }
  .footer-col ul { list-style: none; display: grid; gap: 0.8rem; }
  .footer-col a { font-size: var(--fs-small); color: var(--silver); text-decoration: none; transition: color 0.2s; }
  .footer-col a:hover { color: var(--white); }
  .footer-bottom { border-top: 1px solid var(--line); padding-top: 1.75rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--silver-dim); }
  .footer-bottom a { color: var(--silver); text-decoration: none; }
  .footer-bottom a:hover { color: var(--white); }
  .footer-bottom ul { list-style: none; display: flex; gap: 1.5rem; }

/* --- reveal and reduced motion (about.html 180 to 186) ------------------ */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation: none !important; }
  }


/* ==========================================================================
 * PART 2 · THE ARTICLE, NEW
 *
 * Nothing below is copied. No page on this site has rendered long-form prose
 * before, so none of it has a precedent to match.
 * ========================================================================== */

/* --- 1 · layout wrapper --------------------------------------------------
 * THE NAV IS position: fixed AND NOTHING IN THE SHARED CSS OFFSETS CONTENT
 * BELOW IT. Every v2 page solves this locally: about.html does it with
 * .about-hero { padding-top: var(--nav-h) }. Without the padding-top here the
 * h1 sits underneath the nav bar. The extra clamp beneath --nav-h is breathing
 * room, not the offset; --nav-h alone would put the headline flush to the nav.
 *
 * 720px is narrower than .container's 1200px because this is a reading
 * measure, not a layout. At --fs-body it lands around 68 to 72 characters.
 * .container is still used for the nav and footer, which stay full width.
 */
.article-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem)) 1.25rem clamp(4rem, 9vw, 7rem);
}
@media (min-width: 640px) { .article-page { padding-left: 2rem; padding-right: 2rem; } }

/* --- 2 · paragraph spacing · THE CRITICAL ONE ----------------------------
 * The reset is * { margin: 0 } and there is NO bare p rule anywhere in the
 * site's CSS. Every existing page spaces its paragraphs with a component rule
 * (.about-hero-text p, .pillars p) or with .stack. A rendered markdown body is
 * consecutive <p> elements with no component class, so without this rule the
 * whole article runs together as one unbroken block of text.
 *
 * Scoped to .article-body so it cannot leak into the nav or footer, both of
 * which use <p> for non-prose (.footer-logo, .footer-col-label).
 */
.article-body p { margin-bottom: 1.5rem; }
.article-body > *:last-child { margin-bottom: 0; }

/* --- 3 · h1 --------------------------------------------------------------
 * THERE IS NO h1 SELECTOR ANYWHERE IN about.html. Display type on this site is
 * the .display CLASS, not a tag, so an <h1> in an article would otherwise
 * render at the browser default: Sora, bold, roughly 2em, and silver.
 *
 * Treatment is .display's (Montserrat 800 italic, white, tight leading), sized
 * between --fs-h2 and --fs-display. A hero headline announces a page; an
 * article headline sits above text it belongs to, and --fs-display at 4.5rem
 * would dwarf the body it introduces.
 */
.article-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 1.5rem;
}

/* --- 4 · heading spacing inside the body ---------------------------------
 * Margin above is larger than margin below so a heading groups with the text
 * it introduces rather than floating equidistant between two blocks. h2 and h3
 * inherit their type from the copied rules in Part 1; only spacing is set here.
 */
.article-body h2 { margin-top: 3rem; margin-bottom: 1.1rem; }
.article-body h3 { margin-top: 2.25rem; margin-bottom: 0.85rem; }
.article-body h2:first-child,
.article-body h3:first-child { margin-top: 0; }

/* --- 5 · lists -----------------------------------------------------------
 * The reset does not remove list-style, but * { padding: 0 } removes the
 * indent that makes a marker readable, and the site's other lists all set
 * list-style: none explicitly (.nav-links, .footer-col ul, .nav-mobile ul).
 * A prose list needs its markers back and needs the indent restored.
 */
.article-body ul,
.article-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.6rem; }
.article-body li:last-child { margin-bottom: 0; }
.article-body li::marker { color: var(--silver-dim); }

/* --- 6 · prose links -----------------------------------------------------
 * NOTHING ON THE SITE COVERS LINKS IN BODY CONTENT. The only a rule is
 * a { color: inherit }, and all three link treatments that exist are component
 * classes (.btn, .text-link, .footer-col a). A markdown link would otherwise
 * be silver text with a browser-default underline.
 *
 * Same mechanic as .text-link, a bottom border that brightens on hover,
 * without its uppercase Archivo label styling, which would be wrong mid
 * sentence. text-decoration: none replaces the UA underline with the border,
 * so the link is still marked without two underlines stacked.
 */
.article-body a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--silver-dim);
  transition: border-color 0.2s, color 0.2s;
}
.article-body a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

/* --- 7 · callout ---------------------------------------------------------
 * blockquote.highlight is what render-markdown.mjs emits for a "> " line.
 *
 * THIS IS THE ONE PLACE RED APPEARS ON AN ARTICLE PAGE, per the single point
 * of emphasis per visible area rule. Nothing else in Part 2 uses --red, and
 * the .btn-primary copied in Part 1 does not appear in an article body.
 */
.article-body blockquote.highlight {
  border-left: 2px solid var(--red);
  background: var(--navy-2);
  padding: 1.5rem 1.75rem;
  margin: 2.25rem 0;
}
.article-body blockquote.highlight p { color: var(--white); margin-bottom: 1rem; }
.article-body blockquote.highlight p:last-child { margin-bottom: 0; }

/* --- 8 · inline emphasis -------------------------------------------------
 * strong lifts to white rather than going heavier alone: on navy at --fs-body,
 * weight on its own is close to invisible. em stays silver and leans, so the
 * two are distinguishable from each other rather than both reading as "bold".
 */
.article-body strong { font-weight: 600; color: var(--white); }
.article-body em { font-style: italic; }

/* --- 9 · cover image -----------------------------------------------------
 * img is already display: block with max-width: 100% from the copied reset.
 * This adds the column width and the space beneath it.
 */
.article-cover { width: 100%; margin-bottom: clamp(2rem, 5vw, 3rem); }
.article-cover img { width: 100%; height: auto; }

/* --- 10 · meta line ------------------------------------------------------
 * Kicker reuses insights.html's .article-kicker treatment exactly: Archivo
 * 600, uppercase, 0.14em tracking, --silver-dim. Named .article-eyebrow rather
 * than .article-kicker so this file never collides with insights.html's card
 * rules if both are ever loaded on one page.
 *
 * The byline row is --fs-small silver, with date and read time in the same
 * Archivo label treatment as the kicker, matching the .byline .date pattern in
 * insights.html's featured block.
 */
.article-eyebrow {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 1rem;
}
.article-meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--silver);
  padding-bottom: 1.75rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.article-meta .date,
.article-meta .read-time {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
}

/* --- 11 · back link ------------------------------------------------------
 * .text-link is copied verbatim in Part 1, so the foot of an article carries
 * .article-foot .text-link and needs no new type rules, only the rule above it
 * and the space around it.
 */
.article-foot {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}