/* =========================================================
   Bridge: Human Attention series -> Workfabric design system.

   The series JSX styles itself from a private --em-* palette
   (cream paper, Source Serif, a warm orange accent). Every one
   of those tokens is re-pointed here at the canonical site.css
   tokens, so the essay inherits bone/ink/twin-cyan and both
   light and dark themes for free.

   Same approach the site already uses to host the first essay
   (see human-attention-is-the-substrate-of-enterprise-ai.html,
   which bridges the older --c-* palette the same way).
   ========================================================= */
:root {
  --em-paper:      var(--bone);
  --em-paper-deep: var(--bone-2);
  --em-ink:        var(--ink);
  --em-ink-soft:   var(--ink-2);
  --em-ink-faint:  var(--ink-3);
  --em-accent:      var(--twin-ink);
  --em-accent-soft: var(--twin-softer);
  --em-rule:       var(--rule);

  /* No serif on the public site — the essay's display face becomes
     Inter Tight, same as everything else. */
  --em-serif: var(--font-display);
  --em-sans:  var(--font-display);
  --em-mono:  var(--font-mono);
}

/* The essay set <em> and pull quotes in italic. The design system
   drops italics entirely; belt-and-braces for anything the JSX
   sweep missed. */
#root em,
#root i,
#root cite,
#root blockquote,
#root address { font-style: normal; }

::selection { background: var(--twin-soft); color: var(--ink); }

/* ---------- Shared bits the retuned primitives reference ---------- */

/* The twin-cyan dot that precedes every eyebrow on the site. */
.em-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--twin);
  vertical-align: middle;
  margin-right: 8px;
  transform: translateY(-1px);
}

/* ---------- Article hero chrome ----------
   Same rules the other news articles carry inline (see
   introducing-contextfabric.html), so this piece opens with the back link and
   twin pill readers already recognise. */
.article-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.article-back {
  display: flex; width: fit-content; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-3); text-decoration: none;
  margin-bottom: 24px; transition: color .2s;
}
.article-back:hover { color: var(--ink); }
.article-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: normal; text-transform: none;
  color: var(--twin-ink);
  padding: 7px 14px; border-radius: 999px;
  background: var(--twin-softer); border: 1px solid var(--twin-soft);
  font-weight: 500;
}
.article-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--twin); flex: none; }
/* Keeps a twinned phrase and its trailing punctuation on the same line. */
.ha-nobreak { white-space: nowrap; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline;
  padding-bottom: 28px; border-bottom: 1px solid var(--rule-2);
}
.article-meta .by { font-family: var(--font-display); font-size: 14px; color: var(--ink-2); letter-spacing: normal; }
.article-meta .date,
.article-meta .reading { font-family: var(--font-display); font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--ink-3); }

/* Inert CTA for a part that is written but not published. Ghost-button
   geometry so it sits in the same slot as the primary button it replaces,
   but muted and non-interactive — nothing here is clickable. */
.em-soon-btn {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  letter-spacing: -0.005em; white-space: nowrap;
  color: var(--ink-3);
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
  cursor: default;
}

/* Three-part index at the foot of the essay. */
.em-index-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 140px;
  gap: 24px; align-items: baseline;
  border-top: 1px solid var(--rule);
  padding: 20px 0;
  text-decoration: none; color: inherit;
  transition: background .2s ease;
}
a.em-index-row:hover { background: var(--bone-2); }
.em-index-row.on { background: var(--twin-softer); }
/* Unpublished rows: present, legible, plainly not a link. */
.em-index-row.soon { opacity: 0.72; cursor: default; }
.em-index-row > :last-child { text-align: right; }

/* ---------- Hero ---------- */
.em-hero-grid {
  display: grid;
  /* 340 not 280: the opening figure scales with this column, and below ~320px
     its time labels drop under 12px. */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(32px, 5vw, 56px);
  margin-bottom: clamp(32px, 5vw, 48px);
}
.em-hero-fig {
  padding-left: 24px;
  border-left: 1px solid var(--rule);
  align-self: stretch;
  display: flex; flex-direction: column;
}
/* The hand-off and paper-callout cards share a two-column body. */
.em-next-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
}

/* The paper callout's section summaries. */
.em-paper-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}

/* ---------- Figure overflow ----------
   Figures are drawn for desktop widths and their SVGs carry a min-width so
   their labels can't shrink below ~12px. Each figure body is therefore its own
   horizontal scroller at every viewport: the drawing scrolls, the page does
   not. (site.css hides body overflow, so without this they would just clip.) */
#root figure > div,
#root .em-hero-fig > div { overflow-x: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .em-hero-grid { grid-template-columns: 1fr; }
  .em-hero-fig { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 24px; }
  .em-next-body { grid-template-columns: 1fr; }
  .em-paper-items { grid-template-columns: 1fr; gap: 20px; }
  /* Multi-column figure layouts are inline styles, so they need !important to
     unstack. Two panels side by side on a phone leaves each ~160px wide,
     which is what dragged the smallest labels down to 3px. */
  #root figure div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  #root figure div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .em-index-row { grid-template-columns: 40px minmax(0, 1fr); }
  .em-index-row > :last-child { display: none; }
  #root figure div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
}