/* ==========================================================================
   Ghost in the Org Chart — shared chrome
   Single source of truth for site-wide chrome: design tokens, reset, type,
   announcement bar, nav, mobile menu, footer, org-chart connector.
   Loaded on every page before the page's own inline <style>.
   Redesign: warm paper + ink, Source Serif 4 / IBM Plex Mono, square corners.
   ========================================================================== */

:root {
  --bg: #faf7f2;                /* warm paper */
  --ink: #1a1a2e;              /* headlines, body copy */
  --accent: #ff6b35;           /* decorative only: rules, marks, borders — never text */
  --accent-text: #c2410c;      /* all links + interactive text — WCAG AA on paper */
  --gray: #6b6b76;             /* secondary text, captions */
  --line: rgba(26,26,46,.12);  /* dividers, borders */
  --white: #ffffff;            /* cards, overlays */
  --orange: #ff6b35;           /* legacy alias of --accent (decorative) */
  --ghost-bg: #0d1b2a;         /* dark ghost section background */
}

/* ----- Reset ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Source Serif 4', Georgia, serif;
      font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--ink); background: var(--bg);
      -webkit-font-smoothing: antialiased; }

/* ----- Headlines ----- */
h1, h2, h3, h4, h5, h6 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; line-height: 1.2; letter-spacing: 0; }

/* ----- Mono: dates, tags, eyebrows, nav, reading time, breadcrumbs, figures ----- */
.nav-links a, .announce-label, .announce-link, .announce-text,
.article-eyebrow, .hero-eyebrow, .sources-label, .article-breadcrumb,
.article-meta, .tag-chip, .reading-time, .eyebrow, .figure-caption, figcaption {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ----- Links (base) ----- */
a { color:var(--accent-text);text-decoration:none }
a:hover { text-decoration:underline }
a:focus-visible { outline:2px solid var(--accent-text);outline-offset:3px;border-radius:0 }

/* ----- Layout ----- */
.wrap { max-width:1100px;margin:0 auto;padding:0 32px }

/* ----- Announcement bar ----- */
.announce-bar { background:var(--ink);padding:10px 0;position:relative;z-index:200 }
.announce-inner { display:flex;align-items:center;justify-content:center;gap:16px;max-width:1100px;margin:0 auto;padding:0 32px }
.announce-label { font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--accent);flex-shrink:0 }
.announce-text { font-size:13px;letter-spacing:.3px;color:var(--bg) }
.announce-link { font-size:12px;font-weight:500;letter-spacing:1px;color:var(--accent);white-space:nowrap;text-decoration:none }
.announce-link:hover { text-decoration:underline }
.announce-close { position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(250,247,242,.55);cursor:pointer;font-size:18px;line-height:1;padding:4px }
.announce-close:hover { color:var(--white) }

/* ----- Nav ----- */
nav { position:sticky;top:0;z-index:100;background:rgba(250,247,242,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 }
.nav-inner { display:flex;align-items:center;justify-content:space-between;height:60px }
.nav-logo img { height:26px;display:block }
.nav-center { display:flex;align-items:center;gap:8px }
.nav-page-label { font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--gray);padding:3px 8px;border-radius:0;background:none;border:1px dotted var(--line) }
.nav-links { display:flex;gap:28px }
.nav-links a { font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative;padding:18px 0;display:block }
.nav-links a::after { content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--accent);transition:width .2s ease }
.nav-links a:hover::after,.nav-links a.active::after { width:100% }
.nav-links a.active { color:var(--accent-text) }
.nav-links a:hover { color:var(--ink);text-decoration:none }

/* ----- Hamburger ----- */
.hamburger { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:200 }
.hamburger span { display:block;width:22px;height:2px;background:var(--ink);border-radius:0;transition:all .25s ease }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0 }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ----- Mobile menu ----- */
.mobile-menu { display:none;position:fixed;inset:0;z-index:150;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:32px }
.mobile-menu.open { display:flex }
.mobile-close { position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;font-size:28px;color:var(--gray);line-height:1;padding:8px }
.mobile-close:hover { color:var(--ink) }
.mobile-menu a { font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:20px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--ink);text-decoration:none }
.mobile-menu a:hover { color:var(--accent-text) }

/* ----- Org-chart connector (reusable section divider) -----
   Short vertical stem dropping into a horizontal bar — thin ink line.
   Applied to <hr> and available as the .org-connector utility class. */
.org-connector, hr {
  appearance:none;-webkit-appearance:none;border:none;background:none;
  position:relative;width:100%;height:22px;margin:48px 0;overflow:visible;
}
.org-connector::before, hr::before {
  content:'';position:absolute;left:50%;top:0;width:1px;height:11px;
  background:var(--ink);transform:translateX(-50%);opacity:.55;
}
.org-connector::after, hr::after {
  content:'';position:absolute;left:50%;top:11px;width:96px;height:1px;
  background:var(--ink);transform:translateX(-50%);opacity:.55;
}

/* ----- Footer ----- */
footer { padding:32px 0;border-top:1px solid var(--line);margin-top:80px;font-size:12px;color:var(--gray) }
.footer-disclaimer { font-size:12px;color:var(--gray);line-height:1.7;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line) }
.footer-disclaimer a { color:var(--gray);text-decoration:underline }
.footer-disclaimer a:hover { color:var(--accent-text) }
.footer-inner { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px }
.footer-links a,.footer-inner a { color:var(--gray) }
.footer-links a:hover,.footer-inner a:hover { color:var(--accent-text);text-decoration:none }

/* ----- Responsive (mobile chrome) ----- */
@media (max-width: 680px) {
  .wrap { padding:0 20px }
  .nav-links { display:none }
  .hamburger { display:flex }
  .announce-text { display:none }
  .footer-inner { flex-direction:column;gap:14px;text-align:center }
  .footer-links { justify-content:center }
}