/* The interactive reader shell, as the live site's interactive-shell.css draws it: a light 56px
   title bar (wordmark, "Interactive", the headline that opens the about panel, then Sources,
   Share and Back), the stage the feature's frame fills, and the Sources and Share dialogs.
   The live headline and share heading name a --font-serif token the site never defined, so the
   browser drew them in the inherited sans; the values below are what it drew. */

.interactive-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--paper-0);
  color: var(--ink-1);
  font: 16px var(--font-sans);
}
.interactive-shell * { box-sizing: border-box; }
.interactive-shell [hidden] { display: none !important; }
.interactive-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}
.interactive-shell a { color: inherit; text-decoration: none; }
.interactive-wordmark { flex: none; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -2px; }
.interactive-wordmark span { color: var(--blue); }
.interactive-label {
  padding-left: 24px;
  border-left: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.interactive-header nav { display: flex; flex: none; align-items: center; gap: 20px; margin-left: auto; }
.interactive-header nav > * { min-width: 44px; white-space: nowrap; }
.interactive-back-detail { white-space: pre; }
.interactive-shell button,
.interactive-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 600 13px / 1.3 var(--font-sans);
  cursor: pointer;
}
.interactive-shell :focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.interactive-header nav a:hover,
.interactive-shell button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The headline is the title bar; byline, dates and summary drop below it on demand. */
.interactive-about { flex: 1; min-width: 0; }
.interactive-about > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px;
  list-style: none;
  cursor: pointer;
}
.interactive-about > summary::-webkit-details-marker { display: none; }
.interactive-about > summary:hover h1 { text-decoration: underline; text-underline-offset: 3px; }
.interactive-about h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: 400 16px / normal var(--font-sans);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.interactive-chevron {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
}
.interactive-about[open] .interactive-chevron { transform: translateY(1px) rotate(225deg); }
.interactive-about-panel {
  position: absolute;
  z-index: 2;
  top: 100%;
  right: 0;
  left: 0;
  max-height: min(60dvh, 420px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--paper-0);
}
.interactive-about-panel p { max-width: 72ch; margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.interactive-about-panel p:last-child { margin-bottom: 0; }
.interactive-about-panel a { text-decoration: underline; text-underline-offset: 3px; }

/* The stage is a <main>; the site's page padding is not the shell's, so it is set out in full. */
.interactive-stage { position: relative; flex: 1; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
#pique-interactive { display: block; width: 100%; height: 100%; border: 0; }
#interactive-status,
.interactive-no-script {
  position: absolute;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: var(--paper-0);
  font-size: 14px;
}
#interactive-status button { margin-left: 12px; }
/* A click inside the frame never reaches this document, so the open panel has its own dismissal surface. */
#interactive-scrim { position: absolute; inset: 0; background: rgb(22 24 29 / 20%); }

#interactive-sources {
  width: min(720px, calc(100% - 24px));
  max-height: calc(100dvh - 48px);
  padding: 16px 24px;
  border: 1px solid var(--line-strong);
  background: var(--paper-0);
  color: var(--ink-1);
  overscroll-behavior: contain;
}
#interactive-sources::backdrop,
#interactive-share::backdrop { background: rgb(22 24 29 / 55%); }
.interactive-close { position: sticky; top: 0; background: var(--paper-0) !important; }
#interactive-share {
  width: min(440px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 24px;
  border: 1px solid var(--line-strong);
  background: var(--paper-0);
  color: var(--ink-1);
}
.interactive-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.interactive-share-heading h2 { margin: 0; font: 400 16px / normal var(--font-sans); }
.interactive-share-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.interactive-share-targets a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#interactive-share button { min-width: 44px; }
#interactive-share-status { min-height: 1.5em; margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
#interactive-share-manual { margin-top: 8px; font-size: 13px; }
#interactive-share-url {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--paper-0);
  color: var(--ink-1);
  font: 16px var(--font-sans);
}

/* The Sources dialog's panel, the live shell's namespaced copy of "How we know this.". */
.pique-sources {
  max-width: 42.5rem;
  margin: 0 auto 24px;
  padding: 24px 0 0;
  border-top: 4px solid var(--editorial-field);
  background: var(--paper-0);
  color: var(--ink-1);
  font-family: var(--font-sans);
}
.pique-sources h2 { margin: 0 0 0.5rem; font: 500 2.5rem / 1.1 var(--font-display); letter-spacing: -0.025em; }
.pique-sources .pique-sources__period { color: var(--blue); }
.pique-sources ol { margin: 0; padding: 0; list-style: none; counter-reset: source; }
.pique-sources ol > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); counter-increment: source; }
.pique-sources ol > li::before {
  content: counter(source) ".";
  color: var(--blue-deep);
  font: italic 500 1.75rem / 1 var(--font-display);
}
.pique-sources ol > li + li { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pique-sources .pique-sources__entry { min-width: 0; overflow-wrap: anywhere; }
.pique-sources p { margin: 0; font-size: 0.875rem; line-height: 1.5; }
.pique-sources .pique-sources__note { margin: 0.75rem 0 1.5rem; color: var(--ink-2); }
.pique-sources .pique-sources__citation { color: var(--ink-1); font-size: 1.05rem; font-weight: 600; }
.pique-sources .pique-sources__citation a {
  color: var(--ink-1);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pique-sources a:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }
.pique-sources .pique-sources__meta { margin-top: 0.25rem; color: var(--ink-2); font-size: 0.8125rem; }
.pique-sources summary { padding: 0.6rem 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pique-sources summary:focus-visible { outline: 2px solid var(--editorial-field); outline-offset: 3px; }
.pique-sources ul {
  margin: 0.5rem 0 0;
  padding: 1rem;
  border-left: 2px solid var(--blue);
  background: var(--paper-2);
  list-style: none;
}
.pique-sources ul > li + li { margin-top: 0.75rem; }
.pique-sources blockquote {
  margin: 0.5rem 0;
  padding: 0.4rem 1rem;
  border-left: 2px solid var(--editorial-field);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .interactive-header {
    gap: 8px;
    min-height: calc(52px + env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .interactive-wordmark { font-size: 29px; }
  .interactive-label { padding-left: 12px; font-size: 9px; letter-spacing: 0.5px; }
  .interactive-header nav { gap: 4px; }
  .interactive-header nav a,
  .interactive-header button { font-size: 12px; }
  .interactive-back-detail { display: none; }
  .interactive-about h1 { font-size: 15px; }
  .interactive-about-panel { padding: 8px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  #interactive-share { margin: auto auto max(12px, env(safe-area-inset-bottom)); padding: 12px 16px; }
}
@media (max-width: 520px) { .interactive-label { display: none; } }
@media (max-width: 46rem) { .pique-sources ol > li { grid-template-columns: 2.25rem minmax(0, 1fr); } }
/* Browser zoom can leave less than a phone's normal CSS width. Keep the controls reachable. */
@media (max-width: 319px) {
  .interactive-header { flex-wrap: wrap; }
  .interactive-about { min-width: 44px; }
  .interactive-header nav { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
}