/* Margin Notes — Article Stylesheet (is-product-the-friction)
   Brand tokens (color, type, motion ease, geometry) are loaded earlier from
   /design/tokens.css. This file owns per-article structure + composition.
   Edit brand values at /design/tokens.css, never here. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--prose);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: #dbeafe; color: #1e3a8a; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity 180ms var(--ease); }
a:hover { opacity: 0.7; }

*:focus-visible {
  outline: 2px solid var(--chrome);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Fixed chrome ---------- */

.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.progress-bar__fill {
  height: 100%;
  background: var(--ink);
  width: 0%;
  transform-origin: left center;
  transition: width 80ms linear;
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 90;
  background: rgba(245, 245, 247, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease);
}
.nav.scrolled { border-bottom-color: var(--hairline); }

.wordmark {
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1;
  padding-top: 4px;
  white-space: nowrap;
  border-bottom: none;
  display: inline-block;
  flex: none;
}
.wordmark:hover { opacity: 0.7; }

.nav__right {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: var(--mute-1);
  letter-spacing: 0.02em;
}

/* The Google-style search bar that sits in the nav — moment 4 subject.
   Rendered here from page load so the user sees it as chrome. */
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--mute-3);
  border-radius: 10px;
  background: #fff;
  color: var(--mute-2);
  font-size: 13px;
  font-family: var(--font-sans);
  transition: border-color 180ms var(--ease);
}
.nav-search:hover { border-color: var(--mute-2); }
.nav-search svg { flex: none; }

/* ---------- Page shell ---------- */

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 48px 120px;
  display: grid;
  grid-template-columns: 1fr var(--col-reading) var(--col-margin);
  gap: 0 var(--gutter);
}

.page > * { min-width: 0; }

.article {
  grid-column: 2 / 3;
  position: relative;
}

.margin {
  grid-column: 3 / 4;
  position: relative;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute-1);
}
/* Anchored surface — JS positions each note absolutely at its target paragraph's top. */
.margin__anchored {
  position: relative;
  height: 100%;
  min-height: 100vh;
}

/* ---------- Header ---------- */

.hero { margin-bottom: 80px; }
.hero__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-1);
  margin-bottom: 40px;
}
.hero__meta span { white-space: nowrap; display: inline-block; }
.hero__meta span + span { color: var(--mute-2); }
.hero__meta span + span::before { content: "·"; margin: 0 12px; color: var(--mute-3); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}

.hero__dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.45;
  color: var(--mute-1);
  margin: 0 0 48px;
  max-width: 560px;
  text-wrap: pretty;
}

.hero__byline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  color: var(--prose);
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.hero__byline strong { font-weight: 500; color: var(--ink); }
.hero__byline span { color: var(--mute-1); }

/* The closer-question lives at the very end of the prose, set in display
   italic at headline scale. Sits ABOVE the endcard's hairline separator
   so it reads as the final line of the essay, not a quote inside a card. */
.closer-question {
  font-family: var(--font-display) !important;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 56px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.012em;
  color: var(--ink) !important;
  margin: 4rem 0 0 !important;
  text-wrap: balance;
}
.closer-question em { font-style: italic; }

/* ---------- Prose ---------- */

.prose p {
  margin: 0 0 1.35em;
  font-size: 19px;
  line-height: 1.72;
  color: var(--prose);
  text-wrap: pretty;
}

.prose p.lede::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.4em;
  line-height: 0.9;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--ink);
}

/* Two-tone ink: inline <strong> uses --ink-soft so the page's heaviest pigment
   stays reserved for the architectural moments (hero, closer, pull-quote,
   endcard pill, lift-bar variant, bypass diagram main ink). */
.prose strong { color: var(--ink-soft); font-weight: 500; }

/* Pull quote — beat 5, climax of part one */
.pullquote {
  margin: 88px -80px;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
}
.pullquote::before {
  content: "";
  position: absolute;
  top: -40px; left: 0;
  width: 48px;
  height: 1px;
  background: var(--ink);
}

/* Section break — hand-drawn Part II separator */
.section-break {
  margin: 7rem 0 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.section-break svg {
  width: 280px;
  height: 32px;
  overflow: visible;
}
.section-break svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.section-break__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--mute-1);
  text-transform: uppercase;
}

/* Emphasis sentence — beat 10.
   v9.1 fix (Tushar feedback May-13): the previous 28px upright Newsreader
   inside Inter body read as "someone made this bigger by accident" — the
   serif x-height was actually similar to body sans, and there was no
   italic signal. Now: italic + larger (32px) + light weight. Reads
   clearly as a deliberate aside, not a typo. */
.emph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.4;
  color: var(--ink);
  margin: 56px 0;
  text-wrap: balance;
}

/* Eulogy list — beat 12 */
.eulogy {
  list-style: none;
  padding: 0;
  margin: 40px 0 1.35em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--mute-1);
  letter-spacing: 0.01em;
}
.eulogy li {
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  transition: color 800ms var(--ease), opacity 800ms var(--ease);
}
.eulogy li.fading { color: var(--mute-3); opacity: 0.3; }

/* ---------- Margin surface ---------- */

.margin-note {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute-1);
  padding-left: 14px;
  border-left: 1px solid var(--mute-3);
  max-width: 240px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.margin-note.positioned { opacity: 1; transform: translateY(0); }
.margin-note em { font-family: var(--font-display); font-style: italic; color: var(--ink); }
.margin-note .tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 6px;
}
/* Tiny hand-drawn glyph that visually echoes what the note is about.
   Single-weight monoline, never filled. Same ink as the note label —
   intentionally easy to miss until you look. */
.margin-note .tag-ico {
  width: 18px;
  height: 12px;
  flex: none;
  overflow: visible;
  color: var(--mute-1);
}
.margin-note .tag-ico path,
.margin-note .tag-ico circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* The dots in the speech-bubble note are filled */
.margin-note[data-note-for="p-training-now"] .tag-ico circle {
  fill: currentColor;
  stroke: none;
}

/* Section ticks in the margin — standing chrome */
.ticks {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
  padding-left: 4px;
}
.tick {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
  transition: color 300ms var(--ease);
}
.tick::before {
  content: "";
  width: 10px; height: 1px;
  background: var(--mute-3);
  transition: width 300ms var(--ease), background 300ms var(--ease);
}
.tick.active { color: var(--ink); }
.tick.active::before { width: 20px; background: var(--ink); }

/* ---------- End card ---------- */

.endcard {
  margin-top: 120px;
  padding-top: 56px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}
.endcard__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.3;
  color: var(--ink);
  max-width: 520px;
  margin: 0;
  text-wrap: balance;
}
.endcard__quote em { font-style: italic; }
/* Endcard signature — the |mn icon (v9.1 May-13).
   The SVG itself carries the --ink-deep block, vermilion cursor, and
   Sacramento "mn" — so the wrapper styling is reduced to sizing only. */
.endcard__sig {
  display: block;
  width: 54px; height: 54px;
}

/* Footer + colophon are server-injected and styled by
   /articles/_shared/article-footer.css — no per-article footer CSS here
   (removed the legacy hand-coded-footer block that shadowed the shared one). */

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
    padding: 100px 24px 80px;
  }
  .article, .margin { grid-column: 1 / 2; }
  .margin { display: none; } /* mobile alternatives are in-body */
  .pullquote { margin: 56px 0; font-size: 28px; }
  .nav { padding: 0 20px; }
  .nav-search { display: none; }
  .nav__right { font-size: 12px; gap: 16px; }
  .hero__title { font-size: 40px; }
  .prose p { font-size: 17px; }
  .emph { font-size: 24px; }   /* mobile — scaled from desktop 32px */
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .margin-note { opacity: 1; transform: none; }
}