/* Margin Notes — Article N°04 "The org chart branched because the tools did"
 * ---------------------------------------------------------------------------
 * Brand contract: v9.1 (vermilion + two-navy + canvas; 5-font system with
 * Caveat reinstated for in-article hand-marks). All color tokens come from
 * /design/tokens.css via the cascade — DO NOT redeclare --ink, --canvas,
 * --accent etc. here. Only article-specific layout vars (--col-reading,
 * --col-margin, --gutter) and motion easings live here.
 *
 * Originally authored against an earlier brand (cadmium #FFB000 + off-black
 * #1d1d1f + system mute scale). Ported by dropping the local :root block —
 * the same var names now resolve to v9.1 values:
 *   --ink       #1d1d1f → #2A3B6E  (navy)
 *   --canvas    #f5f5f7 → #FBFAF7  (warm off-white)
 *   --accent    #FFB000 → #c73e2a  (vermilion)
 *   --prose     #334155 → #3A4B82  (navy body)
 *   --mute-*    slate   → navy-shifted greys
 */

:root {
  /* Article-only layout tokens. Global ones live in /design/tokens.css. */
  --col-reading: 640px;
  --col-margin: 300px;
  --gutter: 72px;
}

* { 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: var(--select-bg); color: var(--select-fg); }

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: color-mix(in srgb, var(--canvas) 72%, transparent);
  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 — present from page load
   as chrome (not a motion subject in this article — N°04's motion lives in
   the journey/lift/orgchart/T-pi figures). Kept for visual consistency with
   N°03. */
.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: var(--canvas);
  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;
}

/* ---------- Hero ---------- */

.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);
}

.prose strong { color: var(--ink); 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 (.emph in v9.1 is italic Newsreader 32px;
   keeping the article-2 author's intent which was upright 28px Newsreader.
   If we want to follow the v9.1 .emph contract strictly, the article HTML
   can use a different class or this can be overridden later. For now: keep
   author intent. */
.emph {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.35;
  color: var(--ink);
  margin: 56px 0;
  text-wrap: balance;
}

/* Eulogy list — not used in N°04 prose but kept in case (was present in
   the source CSS). */
.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;
}
.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,
.margin-note .tag-ico rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* 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 ---------- */
/* v9.1 contract: endcard quote + |mn seal (NOT plain "m,n" text) + colophon.
   The seal lives in the HTML as an inline SVG with the cursor block + Sacramento
   "mn" — same as N°03. The colophon byline links to /about. */

.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__sig {
  width: 64px;
  height: 64px;
  display: block;
}

/* ---------- Article footer (next-article + subscribe + colophon) ---------- */
/* Mirrors N°03's article footer structure. Subscribe block is hidden via the
   `hidden` attribute on the section + bracketing <hr>s in the HTML — launch
   posture. Will re-enable when the newsletter pipeline ships. */

.article-footer {
  max-width: 720px;
  margin: 96px auto 0;
  padding: 0 24px 64px;
}
.article-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article-footer__rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}
.next-article__label,
.subscribe__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 18px;
}
.next-article__link {
  display: block;
  border-bottom: none;
  color: var(--ink);
  transition: opacity 180ms var(--ease);
}
.next-article__link:hover { opacity: 0.7; }
.next-article__title {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 6px;
}
.next-article__excerpt {
  display: block;
  font-size: 15px;
  color: var(--mute-1);
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-1);
}
.colophon__tag {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--mute-1);
}
.colophon__sep { color: var(--mute-3); }
.colophon__byline {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.colophon__byline:hover { color: var(--ink); border-bottom-color: var(--ink-soft); }

/* ---------- 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: 22px; }
}

/* ---------- 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; }
}