/* AI Safety Observatory, laid out as one of the site's research pages.

   Every colour, family, radius and shadow below is a token or a value the site
   already uses. The sheet defines no palette of its own:

     research/research.css :root      --panel --panel-soft --panel-tint
                                      --line --line-strong --text --text-dim
                                      --accent --gold --radius --shadow
                                      --font-display --font-body
     research/research.css .paper-card, .catalog-card   card surface and lift
     research/index.html   .hub-anchors, .cat-group     section navigation and labels
     arc-theory/index.html .at-sec, .at-quote, .fig-disclose   prose and disclosures
     css/brand.css         --gold-text   gold AS TEXT, which clears 4.5:1 on paper

   The column is 1000px wide with a 1.5rem gutter because the site header, the
   research sub-navigation, the breadcrumb and the site footer that are stamped
   around this body are all 1000px with a 1.5rem gutter. A wider body under a
   narrower header is what made the page read as a separate site.

   No em dash or en dash appears in this file, including inside generated content. */

/* ---------------------------------------------------------------------------
   PAGE SURFACE
   The Observatory previously flattened the background to a single fill and
   switched off the paper texture that every other page carrying research.css
   draws. Both are restored, so the page sits on the same paper as its siblings.
   --------------------------------------------------------------------------- */
.obs-body { line-height: 1.65; }
.obs-body a { color: inherit; text-decoration: underline; text-underline-offset: .22em; }
.obs-body a:hover { color: var(--accent); }
.obs-body :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* The measure, shared with the stamped chrome. */
.obs-mast, .obs-main, .obs-footer { max-width: 1000px; margin-inline: auto; padding-inline: 1.5rem; }

.obs-skip { position: absolute; left: 1rem; top: -10rem; z-index: 10;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: .75rem 1rem; text-decoration: none; font-weight: 600; }
.obs-skip:focus { top: 1rem; }

/* ---------------------------------------------------------------------------
   LOCATION ROW
   The site's own masthead and primary navigation are stamped above this body,
   so the Observatory's own identity row steps down to a breadcrumb: the same
   job, at the weight the site gives a breadcrumb, rather than a second header
   competing with the real one.
   --------------------------------------------------------------------------- */
.obs-mast { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem;
  padding-block: .9rem .2rem; font-size: .78rem; letter-spacing: .03em; color: var(--text-dim); }
.obs-mast a { text-decoration: none; }
.obs-mast a:hover { color: var(--accent); text-decoration: underline; }
.obs-brand { font-weight: 600; color: var(--text-dim); }
.obs-brand span { color: var(--text-dim); }
.obs-brand::after { content: " /"; color: var(--line-strong); }

/* The synthetic marker stays plainly visible: it is a safety label, not decoration. */
.obs-fixture { margin: 0; padding: .8rem 1.5rem; text-align: center; font-size: .82rem;
  background: var(--panel-tint); border-bottom: 1px solid var(--gold);
  color: var(--text); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   PAGE HEAD
   Kicker, display title, dek and dateline, at the rhythm the research hub and
   arc-theory use. Gold as text takes the darker --gold-text: measured on this
   paper, --gold reaches 4.46:1 and --gold-text reaches 4.96:1.
   --------------------------------------------------------------------------- */
.obs-heading { max-width: 52rem; padding: 2.4rem 0 1.6rem; }
.obs-eyebrow { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-text, hsl(38, 72%, 31%)); }
.obs-heading h1 { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.12; letter-spacing: -.015em;
  margin: .45rem 0 .7rem; text-wrap: balance; overflow-wrap: anywhere; }
.obs-lede { margin: 0; max-width: 52rem; color: var(--text-dim); font-size: 1.08rem; line-height: 1.82; }
.obs-heading .obs-meta { margin: .9rem 0 0; font-variant-numeric: tabular-nums lining-nums; }
.obs-meta, .obs-muted { color: var(--text-dim); font-size: .88rem; }

/* ---------------------------------------------------------------------------
   VIEW NAVIGATION
   The research hub's own in-page anchor row: bordered pills, uppercase, current
   marked. It scroll-snaps rather than wraps, so four labels stay on one line at
   390 and at 200% text without ever widening the document.
   --------------------------------------------------------------------------- */
.obs-nav { display: flex; gap: .5rem; margin: 0 0 1.8rem; padding: .5rem 0 .15rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--line); }
.obs-nav::-webkit-scrollbar { display: none; }
@media (min-width: 721px) { .obs-nav { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; } } /* the strip swipes on a phone; at desktop widths it wraps, so the last item is never clipped (live read, 21 Sep 2026) */
.obs-nav a { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .3rem 1.05rem;
  margin-bottom: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; color: var(--text-dim); background: var(--panel); }
.obs-nav a:hover { color: var(--accent); border-color: var(--accent); }
.obs-nav [aria-current] { color: var(--panel); background: var(--accent); border-color: var(--accent); }
.obs-nav [aria-current]:hover { color: var(--panel); }

/* ---------------------------------------------------------------------------
   FILTER
   Functional, and visually secondary. It is a disclosure so that the first
   screen on a phone shows records rather than controls; the script opens it on
   wide screens, and the renderer opens it whenever a filter is already applied.
   --------------------------------------------------------------------------- */
.obs-filters { margin: 0 0 1.8rem; }
.obs-filters > summary { display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .5rem .95rem; cursor: pointer; list-style: none;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel);
  font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.obs-filters > summary::-webkit-details-marker { display: none; }
.obs-filters > summary::after { content: "\2193"; color: var(--gold-text, hsl(38, 72%, 31%)); }
.obs-filters[open] > summary::after { content: "\2191"; }
.obs-filters > summary:hover { color: var(--accent); border-color: var(--accent); }
.obs-filter { margin: .9rem 0 0; padding: 1.1rem 1.15rem; background: var(--panel-soft);
  border: 1px solid var(--line); border-radius: 18px;
  display: grid; gap: .8rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.obs-filter > label { grid-column: 1 / -1; margin: 0; font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.obs-filter > div { display: flex; gap: .5rem; min-width: 0; }
.obs-filter .obs-facets { grid-column: 2 / -1; display: grid; gap: .8rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.obs-facets label { display: grid; gap: .3rem; min-width: 0; font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.obs-filter input, .obs-filter select { width: 100%; min-width: 0; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: .65rem .7rem; min-height: 44px; color: var(--text); font: inherit; font-size: .92rem; }
.obs-filter button { flex: 0 0 auto; min-height: 44px; padding: .65rem 1.2rem;
  background: var(--accent); color: var(--panel); border: 1px solid var(--accent);
  border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.obs-filter button:hover { background: var(--text); border-color: var(--text); }
.obs-filter > a { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center;
  min-height: 44px; padding: .3rem .1rem; font-size: .82rem; color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------------------
   GROUPS AND GRID
   The hub's category label above each group; the site's two-column research
   grid, collapsing at the site's own 980 breakpoint.
   --------------------------------------------------------------------------- */
.obs-group { margin: 0 0 2.4rem; }
.obs-group-head { margin: 0 0 .9rem; display: inline-block; padding-bottom: .3rem;
  font-family: var(--font-body); font-size: 1.1rem; line-height: 1.35; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); border-bottom: 2px solid var(--accent); }
/* One column at every width, at the methodology prose measure: two columns of cards of very different
   heights left holes under the shorter card and made the reading order zigzag (live read, 30 Sep 2026). */
.obs-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 46rem; gap: 1rem; align-items: start; }
.obs-grid:has(> .obs-card:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------------------
   RECORD CARDS
   The surface, border, radius, shadow and lift of the site's research cards.
   --------------------------------------------------------------------------- */
.obs-card { min-width: 0; padding: 1.5rem; overflow-wrap: anywhere;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,248,242,.9));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.obs-card:hover { transform: translateY(-2px); border-color: rgba(25, 24, 28, .18);
  box-shadow: 0 22px 54px rgba(18, 15, 11, .1); }
.obs-card > :first-child { margin-top: 0; }
.obs-card > :last-child { margin-bottom: 0; }

/* Content type and date, set as the site sets a card eyebrow. */
.obs-card .obs-meta { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text, hsl(38, 72%, 31%));
  font-variant-numeric: tabular-nums lining-nums; }
.obs-card h1, .obs-card h2, .obs-card .obs-card-title { font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; line-height: 1.18; letter-spacing: -.03em; margin: .55rem 0 .7rem; }
.obs-card h2 a, .obs-card h1 a { text-decoration: none; }
.obs-card h2 a:hover { text-decoration: underline; color: var(--accent); }

/* Publication stage, evidential role, editorial selection: the record's small
   print, ruled off from the summary below it. Set small and letter-spaced, not
   upper-cased: the site reserves uppercase for labels of a few words, and these
   lines are sentences, which uppercase makes measurably harder to read. */
.obs-status { margin: 0 0 .9rem; padding-bottom: .85rem; font-size: .8rem; line-height: 1.6;
  letter-spacing: .015em; color: var(--text-dim); border-bottom: 1px solid var(--line); }
.obs-card .obs-status, .obs-card .obs-muted { max-width: 66ch; }
.obs-summary { margin: 0 0 .9rem; max-width: 66ch; line-height: 1.75; color: var(--text); }
.obs-muted { margin: 0 0 .9rem; font-style: italic; }
.obs-sources { margin: 0; font-size: .88rem; line-height: 1.8; color: var(--text-dim); }
.obs-sources a { color: var(--accent); font-weight: 600; text-decoration: none; padding-block: .3rem; }
.obs-sources a:hover { text-decoration: underline; }
.obs-source { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; }

/* Disclosures, in the shape arc-theory gives a disclosure: a quiet inset strip
   with an arrow that turns when it opens. */
.obs-card details { margin: 1.1rem 0 0; border-top: 1px solid var(--line); padding-top: .9rem; }
.obs-card summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 44px; padding: .55rem .9rem; cursor: pointer; list-style: none;
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: 18px;
  font-size: .82rem; font-weight: 600; color: var(--accent); }
.obs-card summary::-webkit-details-marker { display: none; }
.obs-card summary::after { content: "\2193"; color: var(--gold-text, hsl(38, 72%, 31%)); font-weight: 700; }
.obs-card details[open] > summary::after { content: "\2191"; }
.obs-card summary:hover { border-color: var(--accent); }
.obs-card details > :not(summary) { margin: .9rem 0 0; font-size: .86rem; line-height: 1.7; color: var(--text-dim); }
.obs-card details ul { padding-left: 1.1rem; display: grid; gap: .6rem; }
.obs-card details ul a { color: var(--accent); padding-block: .25rem; }
.obs-card dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: .45rem .9rem; font-size: .8rem; }
.obs-card dt { font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); padding-top: .1rem; }
.obs-card dd { margin: 0; color: var(--text); }
.obs-hash { overflow-wrap: anywhere; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .74rem; }

/* ---------------------------------------------------------------------------
   WARNINGS
   The site's aside language: a gold rule on the warm tint, square against the
   text edge and rounded away from it.
   --------------------------------------------------------------------------- */
.obs-warning { margin: 1rem 0; padding: .9rem 1.1rem; font-size: .88rem; line-height: 1.7;
  background: var(--panel-tint); border-left: 3px solid var(--gold);
  border-radius: 0 18px 18px 0; overflow-wrap: anywhere; color: var(--text); }
.obs-warning > :first-child { margin-top: 0; }
.obs-warning > :last-child { margin-bottom: 0; }
.obs-warning p { margin: .5rem 0 0; }
.obs-warning strong { color: var(--text); }
.obs-warning h2 { margin: 0 0 .3rem; font-family: var(--font-body); font-size: .8rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-text, hsl(38, 72%, 31%)); }
.obs-warning ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--text-dim); }
.obs-card .obs-warning { margin: 0 0 .9rem; font-size: .84rem; }

/* ---------------------------------------------------------------------------
   EMPTY STATE
   A quiet notice, not a box that shouts. It disappears with the first edition,
   and until then it should look like a state the page meant to have.
   --------------------------------------------------------------------------- */
.obs-empty { grid-column: 1 / -1; padding: 2.4rem 0 1.4rem; border-top: 1px solid var(--line); }
.obs-empty h2 { margin: 0 0 .7rem; font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; color: var(--text); }
.obs-empty p { margin: 0 0 1rem; max-width: 46rem; color: var(--text-dim); line-height: 1.8; }
.obs-empty a { display: inline-flex; align-items: center; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem 1.1rem;
  background: var(--panel); color: var(--accent); font-size: .88rem; font-weight: 600; text-decoration: none; }
.obs-empty a:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   METHODOLOGY PROSE
   arc-theory's section rhythm: a ruled heading, a 66ch measure, air between.
   --------------------------------------------------------------------------- */
.obs-prose { max-width: 46rem; }
.obs-prose h2 { margin: 2.2rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500; font-size: 1.5rem;
  line-height: 1.25; letter-spacing: -.02em; }
.obs-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.obs-prose p { margin: .7rem 0; max-width: 66ch; line-height: 1.8; color: var(--text-dim); }

/* ---------------------------------------------------------------------------
   THE CONVERGENCE RECORD
   Dated rows the site's evidence register already carries, set as a record
   list rather than as cards: they are context for the editions, not editions.
   --------------------------------------------------------------------------- */
.obs-record { margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line-strong); }
.obs-record-note { margin: .9rem 0 1.4rem; max-width: 66ch; color: var(--text-dim); line-height: 1.8; font-size: .95rem; }
.obs-record-year { margin: 0 0 1.4rem; }
.obs-record-year h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.obs-record-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.obs-record-row { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .2rem .9rem; padding: .85rem 1rem; min-width: 0; overflow-wrap: anywhere;
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: 18px; }
.obs-record-row .obs-meta { grid-area: 1 / 1; }
.obs-record-row .obs-status { grid-area: 2 / 1; }
.obs-record-title { grid-area: 1 / 2; }
.obs-record-source { grid-area: 2 / 2; }
.obs-record-row .obs-meta { margin: 0; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text, hsl(38, 72%, 31%));
  font-variant-numeric: tabular-nums lining-nums; }
.obs-record-title { margin: 0; line-height: 1.65; }
.obs-record-title a { color: var(--text); font-weight: 600; text-decoration: none; padding-block: .2rem; }
.obs-record-title a:hover { color: var(--accent); text-decoration: underline; }
.obs-record-source { margin: .2rem 0 0; font-size: .78rem; color: var(--text-dim);
  font-family: "IBM Plex Mono", ui-monospace, monospace; }
.obs-record-row .obs-status { margin: .25rem 0 0; padding: 0; border: 0; font-size: .78rem; }
.obs-record-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; }
.obs-record-links a { display: inline-flex; align-items: center; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .35rem 1rem;
  font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; background: var(--panel); }
.obs-record-links a:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   THE RECORD ROW AT THE FOOT
   Small print, at the weight the site's stamped footer uses, so the two read as
   one small-print zone rather than two competing footers.
   --------------------------------------------------------------------------- */
.obs-footer { margin-top: 3rem; padding-block: 1.5rem 2.4rem;
  border-top: 1px solid var(--line-strong); font-size: .78rem; color: var(--text-dim); }
.obs-footer p { margin: 0 0 .7rem; }
.obs-footer nav { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; }
.obs-footer nav a { text-decoration: none; color: var(--text-dim); }
.obs-footer nav a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   NARROWER SCREENS
   980 is the site's own collapse for its two-column research grids; 720 is the
   site's own padding step, and the width at which the stamped chrome drops to a
   1rem gutter. Sixteen pixel controls stop iOS magnifying the page on focus,
   and every row target clears 44px.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .obs-grid { grid-template-columns: 1fr; }
  .obs-filter { grid-template-columns: minmax(0, 1fr); }
  .obs-filter .obs-facets { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .obs-mast, .obs-main, .obs-footer { padding-inline: 1rem; }
  .obs-fixture { padding-inline: 1rem; }
  .obs-heading { padding: 1.6rem 0 1.2rem; }
  .obs-card { padding: 1.15rem; border-radius: 20px; }
  .obs-filter { padding: 1rem; }
  .obs-filter .obs-facets { grid-template-columns: minmax(0, 1fr); }
  .obs-filter input, .obs-filter select { font-size: max(16px, 1rem); }
  .obs-record-row { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .9rem 1rem; }
  .obs-record-row .obs-meta { grid-area: 1 / 1; }
  .obs-record-title { grid-area: 2 / 1; }
  .obs-record-source { grid-area: 3 / 1; }
  .obs-record-row .obs-status { grid-area: 4 / 1; }
  .obs-sources { line-height: 2.1; }
  .obs-card dl { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .obs-card dd { margin-bottom: .6rem; }
  /* The crumb wraps to two lines on a phone, which left the separator stranded at the
     end of the first line. Two lines need no separator, so it is dropped there. */
  .obs-mast { flex-direction: column; align-items: flex-start; gap: 0; }
  .obs-brand::after { content: ""; }
  .obs-mast a, .obs-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .obs-empty { padding-top: 1.8rem; }
  /* The first screen on a phone: both link strips swipe on one line and fade at the right edge, so a cut
     label reads as more to come, and the six linked pages stop taking a 163px block above the first record.
     The air between the heading, the strips and the controls steps down with them, so the first news card
     starts on the first screen. */
  .obs-heading { padding-bottom: .8rem; }
  .obs-nav { margin-bottom: .6rem; }
  .obs-filters { margin-bottom: 1rem; }
  .obs-main .obs-order { margin-bottom: .8rem; }
  .obs-nav, .obs-main .obs-linked-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .obs-main .obs-linked-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    gap: 0 1.1rem; margin: 0 0 1rem; padding: 0; border-block: 0; }
  .obs-main .obs-linked-nav::-webkit-scrollbar { display: none; }
  .obs-main .obs-linked-nav a { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .obs-body { scroll-behavior: auto; }
  .obs-body * { transition: none; animation: none; }
  .obs-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   THE LATEST DATE AND THE FIGURES DRAWN FROM THE EDITION (inline SVG; the page's own fonts and tokens apply)
   --------------------------------------------------------------------------- */
.obs-latest { margin: .4rem 0 0; font-size: 1rem; font-weight: 600; color: var(--text); }
.obs-latest time { color: var(--accent); }
.obs-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: 1.25rem 0 1.75rem; }
.obs-figures[hidden], .obs-group[hidden], .obs-grid[hidden], .obs-record[hidden] { display: none; } /* the hidden attribute wins over the block's own display (T2 read, 21 September 2026, N1) */

.obs-figure { margin: 0; padding: 1rem; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); min-width: 0; }
.obs-figure svg { display: block; width: 100%; height: auto; font-family: inherit; }
.obs-figure figcaption { margin-top: .6rem; font-size: .85rem; color: var(--text-dim); }
.obs-figure details { margin-top: .5rem; font-size: .85rem; overflow-x: auto; } /* the data table scrolls sideways at phone width instead of clipping (live read, 21 Sep 2026) */
.obs-figure summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent); font-weight: 600; }
.obs-figure table { border-collapse: collapse; width: 100%; margin-top: .4rem; }
.obs-figure th, .obs-figure td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 720px) { .obs-figures { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   ORDER CONTROL, DATE BASIS, PROVENANCE AND CHALLENGES (20 September 2026)
   Tokens only; the pill and the 44px targets are the navigation's own.
   --------------------------------------------------------------------------- */
.obs-order { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.obs-order button { min-height: 44px; padding: .45rem 1.05rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--panel); color: var(--text-dim); font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; cursor: pointer; }
.obs-order button:hover { color: var(--accent); border-color: var(--accent); }
.obs-order button[aria-pressed="true"] { color: var(--panel); background: var(--accent); border-color: var(--accent); }
.obs-basis { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.obs-route-note { margin: .25rem 0 0; font-size: .88rem; color: var(--text-dim); }
.obs-counters { margin: 0 0 1rem; font-size: .88rem; color: var(--text-dim); }
.obs-quote { margin: .9rem 0 1rem; padding: 1rem 1.15rem; border-left: 4px solid var(--gold); background: var(--panel-soft); border-radius: 0 8px 8px 0; }
.obs-quote p { margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; color: var(--text); }
.obs-quote footer { margin-top: .6rem; font-size: .8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.obs-table { overflow-x: auto; margin: 0 0 1.4rem; -webkit-overflow-scrolling: touch; }
.obs-table table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .85rem; }
.obs-table th, .obs-table td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.obs-table th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.obs-table details summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.obs-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .3rem .8rem; margin: .8rem 0 0; font-size: .85rem; }
.obs-dl dt { color: var(--text-dim); }
.obs-dl dd { margin: 0; overflow-wrap: anywhere; }
.obs-episode h3, .obs-namespace h3, .obs-card h3 { margin: .2rem 0 .4rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
.obs-figure-wide { grid-column: 1 / -1; }
.obs-figure svg[hidden] { display: none; }
.obs-namespace ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.obs-card[hidden], .obs-group[hidden] { display: none; }
@media (max-width: 720px) {
  .obs-dl { grid-template-columns: 1fr; }
  .obs-quote p { font-size: 1.15rem; }
  .obs-table table { min-width: 560px; }
}
.obs-media { margin: 0 0 .85rem; }
.obs-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-soft); }
.obs-media-credit { margin: .35rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--text-dim); }
.obs-feature { margin: 0 0 .9rem; padding: .9rem 1rem; background: var(--panel-soft); border-radius: 8px; }
/* Scoped to the card so the label outranks .obs-card h3 above (0,2,0 over 0,1,1), which had set it at 1.15rem in the display face. */
.obs-card .obs-feature-h { margin: .6rem 0 .25rem; font-family: var(--font-body); font-size: .74rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text, hsl(38, 72%, 31%)); }
.obs-card .obs-feature-h:first-child { margin-top: 0; }
.obs-feature p { margin: 0; }
/* The feature is a disclosure whose control is its own first label. It keeps its inset box rather than
   the ruled strip the card's other disclosures take, and its text keeps the card's size and ink. */
.obs-card details.obs-feature { margin: 0 0 .9rem; padding: .9rem 1rem; border-top: 0; }
.obs-card details.obs-feature > summary { background: var(--panel); }
.obs-card details.obs-feature > summary .obs-feature-h { margin: 0; }
.obs-card details.obs-feature[open] > summary { margin-bottom: .6rem; }
.obs-card details.obs-feature > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.obs-card details.obs-feature > .obs-feature-quote { margin: .8rem 0 0; font-size: inherit; line-height: inherit; color: inherit; }
.obs-family { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .74rem; letter-spacing: .04em; color: var(--text-dim); }
.obs-feature-quote { margin: .8rem 0 0; }
.obs-static-layout .obs-table-scroll { margin: 0 0 1.5rem; }
.obs-chronological-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.obs-chronological-list > li { display: grid; gap: .4rem; }
.obs-timeline-date { margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.obs-record-table td { vertical-align: top; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.obs-record-table th { text-align: left; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: .4rem .5rem; }