@charset "UTF-8";
/* ==========================================================================
   Opus series page components. Loaded after css/styles200920261.css and reuses
   its tokens, type scale and section furniture — nothing from it is redefined.

   Loaded by the index at /opus/ and by all thirteen part pages under it, which
   is why one file covers both: a page never loads two page-level stylesheets.
   Neither view carries images or scripts of its own.

   The index gives each part a deck and a teaser; the part page gives the full
   summary. The two never repeat each other, so .essay styles the list and
   .prose styles the page, and nothing needs to do both. Every link that leaves
   for Substack opens in a new tab and says so.
   ========================================================================== */

/* --- Screen-reader-only text ---------------------------------------------- */

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Masthead buttons ------------------------------------------------------ */
/* The same component as the YouTube button on /videos/, repeated rather than
   shared: each page loads exactly one page stylesheet, never two, and moving
   it into styles200920261.css would re-version a file every page depends on.
   The index carries two of them, Substack and Opus itself, stacked in the group
   below; a part page carries the Substack one alone and uses it on its own, so
   the button has to hold its shape outside the group as well as in it. */

.series-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
  align-self: flex-start;
  padding: 0.6rem 0.85rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.25s;
}
@media (max-width: 55.999rem) {
  .series-cta { margin-top: 0.35rem; }
}

/* Stacked, not side by side. At 48rem, where the masthead turns into a row,
   the grid is 42.3rem across; the two buttons in a row measure 29.7rem, which
   would leave the lede 10rem beside them. Stacked they take the 17.7rem the
   wider of the two needs and the lede keeps the rest. */
.series-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: none;
  align-self: flex-start;
}
/* Both stretch to the wider of them rather than each shrinking to its own
   label, so the two right edges agree and the marks read as one column. */
.series-ctas .series-cta { align-self: stretch; }
@media (max-width: 55.999rem) {
  /* The gap above the button belongs to the group once there are two, or it
     would be paid again between them. */
  .series-ctas { margin-top: 0.35rem; }
  .series-ctas .series-cta { margin-top: 0; }
}

.series-cta:hover,
.series-cta:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.series-cta__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.series-cta__mark svg { width: 46%; height: 46%; fill: currentColor; }

.series-cta__text { display: grid; gap: 0.15rem; }
.series-cta__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-meta);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.series-cta__handle {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.series-cta:hover .series-cta__label,
.series-cta:hover .series-cta__handle { color: var(--accent); }

/* --- Essays (the index list) ---------------------------------------------- */
/* Built on the .claim grid from the base stylesheet: the number and the title
   sit in the narrow left column, the deck and teaser in the wide one. Below
   56rem the two columns collapse into one and the entry reads as a heading
   followed by its paragraphs. */

.essay {
  display: grid;
  gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.35rem, 2.5vw, 1.85rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--sitenav-h) + 1rem);
}
.essay:first-child { border-top: 0; padding-top: 0; }

.essay__num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}

.essay__title {
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}
.essay__title a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: color 0.18s, border-color 0.18s;
}
.essay__title a:hover,
.essay__title a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.essay__body { max-width: var(--measure); }
.essay__body p + p { margin-top: 0.9em; }

/* The deck is the article's own standfirst, so it leads the entry and is set
   apart from the teaser that follows it rather than merged into one block. */
.essay__deck {
  color: var(--ink);
  font-style: italic;
}

/* Two links per entry: the summary on this site, then the article itself. */
.essay__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.essay__cta a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.essay__cta a:hover,
.essay__cta a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (min-width: 56rem) {
  .essay { grid-template-columns: minmax(0, 0.82fr) minmax(0, 2fr); }
  .essay__head { position: relative; }
  .essay__title { padding-top: 0.15em; }
}

/* --- Print ----------------------------------------------------------------- */
/* On paper a link cannot be followed, so each entry spells its URL out once,
   under the title where a reader would look for it. */

@media print {
  .crumbs, .series-ctas, .series-cta, .pager { display: none !important; }
  .essay, .original { break-inside: avoid; }
  .essay__title a, .essay__cta a, .original__cta a { border: 0; }
  /* On paper a link cannot be followed, so the one URL that leaves the site is
     spelled out. The title's own href is internal and is left silent. */
  .essay__cta a[href^="https"]::after,
  .original__cta a[href^="https"]::after {
    content: "\A" attr(href);
    white-space: pre-wrap;
    font-size: 0.625rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3);
  }
}

/* --- A part page ---------------------------------------------------------- */
/* The masthead already carries the title and the deck, so the article itself
   is only the summary, the link to the original, and the way on. */

.part__h1 {
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3rem);
  text-wrap: balance;
  max-width: 20ch;
}

.part { padding-block: clamp(1rem, 3vw, 2rem) 0; }
.part .eyebrow { margin-bottom: 0.85rem; }

.prose {
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose p + p { margin-top: 1em; }

/* Field and alias names are quoted from the articles, where they are code. */
.prose code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--ink);
  background: var(--paper-sunk);
  border-radius: 2px;
  padding: 0.1em 0.3em;
}

/* --- The link to the original --------------------------------------------- */

.original {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  max-width: var(--measure);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.original__kind {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.original__title {
  margin-top: 0.4rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}
.original__cta {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.original__cta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 0.18s;
}
.original__cta a:hover,
.original__cta a:focus-visible { border-bottom-color: var(--accent); }

/* --- Previous / next ------------------------------------------------------ */
/* Two columns from 40rem, but the previous link keeps the left column when it
   is the only one, so the next link on Part 01 does not slide under the
   heading where a back link would be. */

.pager {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.pager__link {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.18s, background-color 0.18s;
}
.pager__link:hover,
.pager__link:focus-visible {
  border-color: var(--accent);
  background: var(--paper-raised);
}
.pager__dir {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pager__title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.36;
  color: var(--ink);
  text-wrap: pretty;
}
.pager__link:hover .pager__title,
.pager__link:hover .pager__dir { color: var(--accent); }

@media (min-width: 40rem) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__link--next { text-align: right; grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .series-cta { transition: border-color 0.18s; }
  .series-cta:hover, .series-cta:focus-visible { transform: none; }
}