/* ————————————————————————————————————————————————
   DDI — Department of Design Intelligence
   Shared design system. Single source of truth for all pages.
   Specimen reference: specimen.html
   ———————————————————————————————————————————————— */

/* ————— Fonts (self-hosted, SIL OFL 1.1) ————— */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* metric-matched local fallbacks: measured against the real faces
   (Geist = 104.5% of Arial; Geist Mono = 100% of Courier New), with
   Geist's vertical metrics (asc 920 / desc 220 / gap 100 per 1000 upm)
   compensated for the size adjustment. Any residual font swap on a
   cold load is shift-free. */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial');
  size-adjust: 104.5%;
  ascent-override: 88.04%;
  descent-override: 21.05%;
  line-gap-override: 9.57%;
}
@font-face {
  font-family: 'Geist Mono Fallback';
  src: local('Courier New');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 10%;
}

/* ————— Tokens ————— */
:root {
  /* Hairlines render as true 0.5px on retina; 1x displays round 0.5px
     to invisible, so they get 1px. Revert: set --hairline: 0.5px. */
  --hairline: 1px;
  /* Every table-like row on the site shares this height:
     header, breadcrumb, ref row, filter row, index rows, article end, footer. */
  --row-h: 48px;
  /* Reading measure. The whole site adopts the article column width
     (~65 characters per line at 16px). */
  --measure: 640px;
  /* Archival grays. Metadata text must clear 4.5:1 on paper white
     (#757575 = 4.6:1); quiet interactive links rest darker still.
     #999 is reserved for non-text decoration only. */
  --ink-muted: #757575;
  --ink-quiet: #666;
  /* Motion. Two easings only: the mechanism (symmetric, for anything
     that spins, wipes, or stamps) and the settle (long tail, for
     anything arriving on the page). */
  --ease-mech: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* 0.5px only where it is exactly one device pixel (true 2x and up);
   fractional-DPR Windows displays (125/150%) keep uniform 1px rules,
   which snap far more consistently than 0.75px ones. The -webkit
   alternative covers Safari 15 and earlier. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root { --hairline: 0.5px; }
}

/* ————— Reset & Base ————— */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* the document is paper: declare it so no browser force-darkens
     the office into an unreviewed night edition */
  color-scheme: light only;
  -webkit-tap-highlight-color: transparent;
}

/* selection reads as the registrar's highlighter: ink on archival gray */
::selection {
  background: #e8e8e8;
  color: #000;
}

body {
  font-family: 'Geist', 'Geist Fallback', -apple-system, sans-serif;
  font-weight: 400;
  color: #000;
  background: #fff;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* the office holds no italic cuts, and a sheared upright is not a
     ruling: quotation is carried by rules, size, and the mono hand */
  font-synthesis: none;
}

a { color: inherit; text-decoration: none; }

/* ————— Utilities ————— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* the corridor for keyboard readers: invisible until it takes focus */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 200;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #000;
  background: #fff;
}
.skip-link:focus-visible {
  left: 24px;
  top: 16px;
  padding: 12px 16px;
}

/* ————— Layout ————— */
.site-wrapper {
  /* content column = --measure (border-box: 640 + 2 × 48 padding) */
  max-width: calc(var(--measure) + 96px);
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ————— Header (row) ————— */
.site-header {
  padding: 32px 0 0;
}
.header-inner {
  position: relative;
  height: var(--row-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--hairline) solid #e0e0e0;
}
/* the running head: FLO at left, the filing reference at right, both in
   the mono face, with a progress rail on the bottom hairline. Shared by
   the Prospectus and every article so the head reads the same. */
.header-logo {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  /* the plate's engraved cut, promoted to the running head: Regular,
     wide-tracked - the Medium 0.08em read too dense beside it */
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #000;
}
.header-filing {
  display: flex;
  gap: 18px;
  align-items: baseline;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.filing-num { font-variant-numeric: tabular-nums; }
.rail-fill {
  position: absolute;
  left: 0;
  bottom: calc(var(--hairline) * -1);
  width: 100%;
  height: var(--hairline);
  background: #000;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
/* legacy article head (header-left / subtitle / nav) — retained for any
   page still using it; the running head above is the current treatment */
.header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.header-subtitle {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}
.header-nav {
  display: flex;
  gap: 24px;
}
.header-nav a {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-quiet);
  letter-spacing: 0.03em;
  transition: color 0.15s ease;
}
.header-nav a:hover,
.header-nav a.active {
  color: #000;
}

/* ————— Sub-header (row) — breadcrumb, article ref, filter bar ————— */
.sub-header {
  height: var(--row-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--hairline) solid #e0e0e0;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}
.sub-header a {
  color: var(--ink-quiet);
  transition: color 0.15s ease;
}
.sub-header a:hover { color: #000; }
/* the breadcrumb row rides with the running head: on articles (and the
   404) the row directly under the header stays pinned beneath it */
.site-header + .sub-header {
  position: sticky;
  top: 80px; /* header: 32px breathing + 48px row */
  z-index: 50;
  background: #fff;
}

/* ————— Content area (below header system) ————— */
.page-content {
  padding-top: 48px;
}
main {
  padding-bottom: 64px;
}

/* ————— Footer (row, hugs the viewport bottom) ————— */
.site-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: #fff;
  /* above the section rows (40): arriving sections pass under the
     footer bar, never over it */
  z-index: 50;
}
/* three-part footer: Flo at left, the seal centred in the page, the
   social links at right. The 1fr/auto/1fr columns keep the seal on
   the true page centre whatever the sides weigh. */
.footer-inner {
  height: var(--row-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: var(--hairline) solid #e0e0e0;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}
.footer-left-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-right-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-link {
  color: var(--ink-quiet);
  transition: color 0.15s ease;
}
.footer-link:hover { color: #000; }
.footer-sig { justify-self: start; color: #000; }
.footer-mark {
  justify-self: center;
  color: #000;
  display: block;
}
.footer-social {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-inner span,
.footer-inner a {
  white-space: nowrap;
}
.footer-legal-fr {
  color: #e0e0e0;
  /* Hidden: at the 640px measure the footer row cannot hold it (content
     is 676px with it, 514px without). Markup kept pending content review. */
  display: none;
}

/* ————— Index table (Writing + Index pages) ————— */
/* the register heading is the table's first line: same row height and
   hairline as the rows below, flush against the column header */
.register-head {
  height: var(--row-h);
  display: flex;
  align-items: center;
  border-bottom: var(--hairline) solid #e0e0e0;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.index-list {
  display: flex;
  flex-direction: column;
}
.index-header-row {
  height: var(--row-h);
  display: grid;
  grid-template-columns: 48px 1fr 80px;
  gap: 16px;
  align-items: center;
  border-bottom: var(--hairline) solid #e0e0e0;
}
.index-header-row span {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.index-h-date { text-align: right; }
.index-row {
  height: var(--row-h);
  display: grid;
  grid-template-columns: 48px 1fr 80px;
  gap: 16px;
  align-items: center;
  border-bottom: var(--hairline) solid #e0e0e0;
}
.index-ref {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}
.index-title {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index-type {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* the type column is filed but not shown: the spans, data-type
   attributes, and dossier logic all stay - only the ink is withheld */
.index-type,
.index-h-type {
  display: none;
}
.index-date {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  text-align: right;
  white-space: nowrap;
}
/* Row hover: REF COUNTER x INK (chosen from explorations/hover.html, 013).
   The reference digits spin one mechanical revolution and land back on the
   filing number while an ink wave darkens type and date character by
   character. The geometry never moves. Strips and ink spans are built by
   assets/ddi.js; without JS (or on touch / reduced motion) the rules below
   degrade to a plain color darkening. */
.ddi-dcol {
  display: inline-block;
  overflow: hidden;
  height: 14px;
  line-height: 14px;
  vertical-align: top;
}
.ddi-dstrip {
  display: block;
  transition: transform 0.55s var(--ease-mech);
}
.ddi-dstrip div {
  height: 14px;
  line-height: 14px;
}
.ddi-ink {
  color: var(--ink-muted);
  transition: color 0.12s linear;
}
@media (hover: hover) and (pointer: fine) {
  a.index-row .index-ref,
  a.index-row .index-type,
  a.index-row .index-date {
    transition: color 0.3s ease;
  }
  a.index-row:hover .index-ref,
  a.index-row:hover .index-type,
  a.index-row:hover .index-date {
    color: #000;
  }
  a.index-row:hover .ddi-ink {
    color: #000;
  }
}

/* ————— Article detail ————— */
.article-title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}
.article-intro {
  font-size: 16px;
  font-weight: 400;
  color: #666;
  line-height: 1.7;
  margin-bottom: 48px;
}

.article-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #000;
}
.article-body p { margin-bottom: 1.2em; }

.article-body h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2.4em;
  margin-bottom: 0.8em;
  letter-spacing: -0.01em;
}
.article-body h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.article-body blockquote {
  margin: 2em 0;
  padding: 0 0 0 24px;
  border-left: var(--hairline) solid #000;
}
.article-body blockquote p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 0.6em;
}
.article-body blockquote cite {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  font-style: normal;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  display: block;
}

.article-body .pullquote {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 2.4em 0;
  padding: 0 40px;
  text-align: center;
}

.article-body pre {
  margin: 2em 0;
  padding: 24px;
  background: #f2f2f2;
  border: var(--hairline) solid #e0e0e0;
  overflow-x: auto;
}
.article-body pre code {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #000;
  background: none;
  padding: 0;
}
.article-body code {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 14px;
  background: #f2f2f2;
  padding: 2px 6px;
}

.article-body figure {
  margin: 2.4em 0;
}
.article-body .ddi-figure {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  height: auto;
  background: #fff;
}

/* ————— Letterhead (the homepage front desk) ————— */
.letterhead {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 56px 0 48px;
}
.letterhead .ddi-seal,
.letterhead .ddi-seal-plain {
  flex: 0 0 auto;
  display: block;
}
.letterhead-text {
  padding-top: 18px;
}
.letterhead-name {
  font-family: 'Times New Roman', Times, serif;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
}
.letterhead-charter {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 14px 0 0;
  max-width: 350px;
}
.letterhead-issue {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-top: 14px;
}
.letterhead-issue a {
  color: var(--ink-quiet);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: var(--hairline);
  transition: color 0.3s ease;
}
.letterhead-issue a:hover { color: #000; }
@media (max-width: 720px) {
  .letterhead {
    flex-direction: column;
    gap: 24px;
    padding: 40px 0 36px;
  }
  .letterhead .ddi-seal,
  .letterhead .ddi-seal-plain {
    width: 140px !important;
    height: 140px !important;
  }
  .letterhead-text { padding-top: 0; }
}

/* unlabeled figure plates bookending an article: one above the title,
   one closing the document */
.article-plate {
  margin: 0;
}
.article-plate .ddi-figure {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  height: auto;
  background: #fff;
}
.article-plate-open {
  margin-bottom: 40px;
}
.article-plate-close {
  margin-top: 56px;
}
/* a sealed document centers the seal instead of a figure */
.article-plate-seal {
  display: flex;
  justify-content: center;
}

/* the Sweep: page-leave overlay - the plain seal wipes onto a white sheet.
   Navigation waits for the wipe to finish (ddi.js listens for animationend),
   so the document is fully sealed before it is filed away. */
.ddi-sweep {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s linear;
  z-index: 100;
}
.ddi-sweep.on {
  opacity: 1;
  pointer-events: auto;
}
.ddi-sweep svg {
  width: 48px;
  height: 48px;
}
.ddi-sweep.on svg {
  animation: ddi-sweep-wipe 0.4s var(--ease-mech) both;
}
@keyframes ddi-sweep-wipe {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* the arrival: the next document opens from under the same sheet. The
   departure stamped the seal shut; here it lifts - the same mark un-draws
   and the sheet clears. Driven by html.ddi-arriving, set pre-paint by an
   inline head script when a Sweep filed the previous page (sessionStorage
   flag). Pure CSS from there, so it self-clears even if ddi.js never runs. */
html.ddi-arriving::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 101;
  background: #fff;
  pointer-events: none;
  animation: ddi-arrive-sheet 0.28s linear 0.3s both;
}
html.ddi-arriving::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  z-index: 102;
  background: #000;
  -webkit-mask: url('favicon.svg') center / contain no-repeat;
  mask: url('favicon.svg') center / contain no-repeat;
  pointer-events: none;
  animation: ddi-arrive-seal 0.3s var(--ease-mech) both;
}
@keyframes ddi-arrive-seal {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}
@keyframes ddi-arrive-sheet {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* ————— Reveals: the document files in —————
   Sections and register rows arrive with the settle easing, gated by an
   IntersectionObserver (no libraries). The pre-paint .pre-anim class on
   <html> hides targets before the script hands over; keyboard focus into
   an unfiled element files it instantly (ddi.js/focusin in the page). */
.ddi-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-settle), transform 0.7s var(--ease-settle);
}
.ddi-reveal.is-filed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ddi-reveal { opacity: 1; transform: none; transition: none; }
}

/* the letter fixes itself: characters paint immediately in the archival
   gray (the page is never blank), then take ink in reading order. Spans
   built by the page script; without JS the longstop drops .ink-wait and
   the letter simply reads in full black. */
html.ink-wait #letter .about-body { color: var(--ink-muted); }
.ddi-ink-fix {
  color: var(--ink-muted);
  transition: color 0.35s linear;
}
html.ink-fixed .ddi-ink-fix { color: #000; }

/* ————— Focus: the registrar's mark —————
   Keyboard traversal locks on the way the reticle does: a square hairline
   frame, no browser blue. Register rows take the full-row treatment. */
:focus-visible {
  outline: 1px solid #000;
  outline-offset: 3px;
  border-radius: 0;
}
a.index-row:focus-visible {
  outline-offset: -1px;
  background: #f7f7f7;
}
a.index-row:focus-visible .index-ref,
a.index-row:focus-visible .index-type,
a.index-row:focus-visible .index-date,
a.index-row:focus-visible .ddi-ink {
  color: #000;
}

/* the plain seal stamped at the close of every document */
.end-stamp {
  color: #000;
  flex: 0 0 auto;
}

/* the colophon row under the footer */
.footer-colophon {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
  border-top: var(--hairline) solid #e0e0e0;
  padding: 14px 0;
  text-align: center;
}

/* ————— Plates (the public catalogue) ————— */
.plates-intro {
  padding: 48px 0 8px;
}
.plates-intro p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  max-width: 520px;
}
.plate-entry {
  margin: 48px 0;
}
.plate-entry .article-plate {
  margin: 0;
}
.plate-spec {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--row-h);
  border-bottom: var(--hairline) solid #e0e0e0;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.plate-ref { color: #000; }
.plate-name { color: #000; text-transform: uppercase; }
.plate-note { color: var(--ink-muted); margin-left: auto; text-align: right; }
.plates-colophon {
  padding: 16px 0 56px;
}
.plates-colophon p {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  max-width: 440px;
}
.article-body figure img,
.article-body figure video {
  display: block;
  width: 100%;
  height: auto;
}
/* filed motion: video records toggle with a click; the hand shows it */
video.ddi-motion { cursor: pointer; }
/* the instrument-offline notice: a plate that could not be computed
   degrades to a filed notice, holding the plate's own footprint */
.ddi-figure-offline {
  width: 100%;
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: #f2f2f2;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  line-height: 1.8;
}
.article-body .img-placeholder {
  width: 100%;
  height: 280px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.article-body figcaption {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.article-body .aside {
  margin: 2em 0;
  padding: 20px 24px;
  border-left: var(--hairline) solid #e0e0e0;
  background: #f2f2f2;
}
.article-body .aside-label {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.article-body .aside p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 0;
}

.article-body ol {
  margin: 1.5em 0;
  padding-left: 24px;
}
.article-body ol li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0.8em;
  padding-left: 8px;
}

.article-body ul {
  margin: 1.5em 0;
  padding-left: 20px;
  list-style: none;
}
.article-body ul li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0.6em;
  padding-left: 12px;
  position: relative;
}
.article-body ul li::before {
  content: '\2014';
  position: absolute;
  left: -16px;
  color: var(--ink-muted);
}

.article-body hr {
  border: none;
  border-top: var(--hairline) solid #e0e0e0;
  margin: 2em 0;
}

.article-body a {
  color: #666;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: var(--hairline);
  transition: color 0.3s ease;
}
.article-body a:hover {
  color: #000;
}
/* ink wave on link characters (spans built by ddi.js; the rules above are
   the no-JS / touch / reduced-motion fallback) */
.article-body a .ddi-ink {
  color: #666;
}
.article-body a:hover .ddi-ink {
  color: #000;
}

.article-body .fn-ref {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  vertical-align: super;
  color: var(--ink-quiet);
  margin-left: 1px;
}

.article-body .footnotes {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: var(--hairline) solid #e0e0e0;
}
.article-body .footnotes p {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 0.6em;
}
.article-body .footnotes .fn-num {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  color: var(--ink-muted);
  margin-right: 6px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.article-tags span {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: var(--hairline) solid #e0e0e0;
  padding: 4px 10px;
}

.article-end {
  height: var(--row-h);
  margin-top: 48px;
  border-top: var(--hairline) solid #e0e0e0;
  border-bottom: var(--hairline) solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}

/* ————— Exhibits: prototype records filed as a grid. A slot holds the
   footprint until its record is filed; a filed record is a silent
   looping video (.ddi-motion) with an optional plate-spec row and a
   data-doss line for the hover slip. ————— */
.exhibit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.exhibit {
  margin: 0;
}
/* a filed record is a door into its lab: the tile is the visual alone,
   the whole card is the link, the hover slip carries the context */
.exhibit-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.exhibit video,
.exhibit img {
  display: block;
  width: 100%;
  height: auto;
  background: #f2f2f2;
}
.exhibit-slot {
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* a filed exhibit is a working link: ink on hover, same plate otherwise */
a.exhibit-slot {
  text-decoration: none;
  transition: color 0.2s var(--ease-mech), background 0.2s var(--ease-mech);
}
a.exhibit-slot:hover,
a.exhibit-slot:focus-visible {
  color: #000;
  background: #ececec;
}
@media (max-width: 600px) {
  .exhibit-grid { grid-template-columns: 1fr; }
}

/* ————— Section heads: each section opens with its numbered row, and
   the row is both the invitation and the heading. It rides sticky
   beneath the running head while its section is read; because the
   sections are cut to the viewport, the NEXT section's row rests
   exactly at the fold - pinned at the bottom as the invitation,
   pinned at the top once entered, never adrift in between. ————— */
.section-head {
  position: sticky;
  top: 80px; /* the running head above */
  z-index: 40;
  background: #fff;
  /* the docked edge the content slides under */
  box-shadow: 0 var(--hairline) 0 #e0e0e0;
}

/* the row itself: number, name, and a quiet arrow that points the
   way the reader is about to go */
.section-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--row-h);
  border-top: var(--hairline) solid #e0e0e0;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-quiet);
  transition: color 0.15s ease;
}
.section-cta .cta-num {
  color: var(--ink-muted);
  transition: color 0.15s ease;
}
.section-cta .cta-arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-settle);
}
.section-cta:hover,
.section-cta:hover .cta-num { color: #000; }
.section-cta:hover .cta-arrow { transform: translateY(2px); }

/* ————— Adjacent filings: the document ends on where to go next.
   Two rows in the register's own hand - Next, then Previous - so a
   finished read never dead-ends. Rebuilt by scripts/build-world.py. ————— */
.article-nav {
  margin-top: 48px;
  border-top: var(--hairline) solid #e0e0e0;
}
.article-nav-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  height: var(--row-h);
  border-bottom: var(--hairline) solid #e0e0e0;
}
.article-nav-row .nav-label {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}
.article-nav-row .nav-title {
  font-size: 14px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .article-nav-row:hover .nav-label { color: #000; }
}
@media (max-width: 480px) {
  .article-nav-row { grid-template-columns: 76px 1fr; gap: 8px; }
}

/* ————— About ————— */
.about-body {
  font-size: 16px;
  line-height: 1.7;
  color: #000;
}
.about-body p {
  margin-bottom: 1.4em;
}
/* the letter is signed. The hand writes itself: the pen's path, traced
   from the ink, drives round-capped mask strokes that reveal the true
   ink exactly where the hand travels - constant pen speed, each stroke's
   start and duration baked by the tracer as --t/--d. Held under
   .ink-hold, released by the letter's fix (--sig-t0 is the beat after
   the last character, written by the page script); without JS the ink
   is simply already dry. */
.letter-signature {
  display: block;
  width: 140px;
  height: auto;
  aspect-ratio: 720 / 300;
  margin: 24px 24px 0 auto;   /* the letter closes at bottom right, as signed - the hand stops a step short of the margin */
  cursor: crosshair;          /* an instrument, like the cover and the plate: click and the pen signs again */
}
html.ink-wait .letter-signature .sig-s,
.letter-signature.ink-hold .sig-s {
  stroke-dasharray: 101;
  stroke-dashoffset: 101;
}
.letter-signature.ink-hold .sig-s {
  transition: stroke-dashoffset var(--d) linear;
  transition-delay: calc(var(--sig-t0, 0s) + var(--t));
}
html.ink-fixed .letter-signature.ink-hold .sig-s { stroke-dashoffset: 0; }
/* signing on demand: .re-sign blanks the strokes between frames,
   .re-signing lets the pen retake them on the same --t/--d schedule
   (the page script swaps the classes around a reflow) */
.letter-signature.re-sign .sig-s {
  stroke-dasharray: 101;
  stroke-dashoffset: 101;
  transition: none;
}
.letter-signature.re-signing .sig-s {
  stroke-dasharray: 101;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d) linear;
  transition-delay: var(--t);
}
.about-section-label {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-top: 64px;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: var(--hairline) solid #e0e0e0;
}
.about-quote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: var(--hairline) solid #000;
}
.about-quote p {
  font-size: 16px;
  line-height: 1.7;
  color: #000;
  margin-bottom: 0.6em;
}
.about-quote cite {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  font-style: normal;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

/* ————— Not found (404) ————— */
.notfound-body {
  font-size: 16px;
  line-height: 1.7;
  color: #000;
}
.notfound-body p { margin-bottom: 1.2em; }

/* ————— Responsive ————— */
@media (max-width: 720px) {
  .site-wrapper {
    padding: 0 24px;
  }
  /* the running head stays a single row on narrow screens */
  .header-inner {
    height: var(--row-h);
    flex-direction: row;
    align-items: center;
    padding: 0;
  }
  .article-title {
    font-size: 32px;
  }
  .article-body .pullquote {
    font-size: 22px;
    padding: 0 16px;
  }
  /* Stacked footer: release the fixed height and the sticky pin; the
     seal sits centred above the name and the social links */
  .site-footer {
    position: static;
  }
  .footer-inner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0 24px;
  }
  .footer-social {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
}

/* the register on narrow screens: the filing reference is the concept
   and never leaves. Each row becomes a two-line filing card - ref beside
   a wrapping title, type and date beneath in the mono hand - and the
   hairline row rhythm survives on min-height. */
@media (max-width: 600px) {
  .index-header-row {
    grid-template-columns: 48px 1fr;
    gap: 8px;
  }
  .index-h-type,
  .index-h-date {
    display: none;
  }
  .index-row {
    grid-template-columns: 48px 1fr auto;
    grid-template-areas:
      'ref title title'
      'ref type  date';
    gap: 2px 8px;
    height: auto;
    min-height: var(--row-h);
    align-content: center;
    padding: 10px 0;
  }
  .index-ref { grid-area: ref; }
  .index-title {
    grid-area: title;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
  }
  .index-type { grid-area: type; }
  .index-date { grid-area: date; justify-self: end; }
}

@media (max-width: 480px) {
  .site-wrapper {
    padding: 0 16px;
  }
  .header-nav {
    flex-wrap: wrap;
    gap: 12px;
  }
  .article-title {
    font-size: 28px;
  }
  .sub-header {
    height: auto;
    min-height: var(--row-h);
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 8px 0;
  }
}

/* landscape phones: the sticky chrome would eat a third of the viewport */
@media (max-height: 520px) {
  .site-header { position: static; }
  .site-footer { position: static; }
  .site-header + .sub-header { position: static; }
  .section-head { position: static; }
}

/* touch: every row-dwelling link fills its row - 44px+ targets with no
   visual change - and long-pressable files advertise no OS callout */
@media (pointer: coarse) {
  .header-logo,
  .sub-header a,
  .footer-link {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    min-height: 44px;
  }
  .footer-social { gap: 22px; }
  [data-doss] {
    -webkit-touch-callout: none;
  }
}

/* ————— Print: a document issued by the office ————— */
/* ————— The Prospectus: the site read as one document —————
   The menu is a table of contents; sections are anchored; the header
   stays at the top of the page like a running head. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
}
main section[id] { scroll-margin-top: 96px; }
/* no section apparatus: the document just flows, sections spaced apart */
main section { margin-top: 64px; }
main section:first-of-type { margin-top: 40px; }
/* the entries read as a table of contents: the number sits above the
   word, small columns echoing the register */
.header-nav { gap: 20px; }
.header-nav a {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.header-nav .nav-num { font-size: 10px; }
.about-body a {
  color: #666;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: var(--hairline);
  transition: color 0.3s ease;
}
.about-body a:hover { color: #000; }
/* the letter's links keep the letter's ink: black as the prose, the
   dotted rule alone marks the working link (the stubs keep the quiet
   gray). Also retires the cleanup snap: black chars settle on black. */
#letter .about-body a { color: #000; }
@media print {
  .site-header nav,
  .sub-header a,
  .footer-right-group,
  .ddi-sweep,
  .article-plate canvas,
  .ddi-figure,
  .ddi-seal {
    display: none !important;
  }
  .article-plate { margin: 0 !important; }
  /* the issued document keeps its seal even under default print
     settings, which strip backgrounds: force color adjustment */
  .article-plate-seal::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    background: #000;
    -webkit-mask: url('favicon.svg') center / contain no-repeat;
    mask: url('favicon.svg') center / contain no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body { color: #000; }
  .site-footer { position: static; }
  a { text-decoration: none !important; color: #000 !important; }
  .article-body a::after {
    content: ' (' attr(href) ')';
    font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
    font-size: 9px;
    color: #666;
  }
}

/* ————— Forced colors (Windows High Contrast) —————
   The reader's system palette is the ruling: the hidden-cursor
   instrument stands down entirely (never leave a page with no
   cursor), and the rail keeps a visible ink. */
@media (forced-colors: active) {
  html.ddi-survey-on,
  html.ddi-survey-on * { cursor: auto !important; }
  .ddi-survey { display: none !important; }
  .rail-fill { background: CanvasText; }
}

/* ————— The Survey Point ————————————————————————————————
   The Department's reading instrument. A precise point that
   surveys the document beneath it, locks onto anything filed
   or actionable, and reports what it finds in the register's
   own hand. Progressive enhancement built in ddi.js: engaged
   only on fine pointers; touch and reduced-motion keep the
   native cursor untouched.
   ———————————————————————————————————————————————— */
html.ddi-survey-on,
html.ddi-survey-on * { cursor: none; }
/* text fields keep a real caret so typing is never blind */
html.ddi-survey-on input,
html.ddi-survey-on textarea,
html.ddi-survey-on [contenteditable] { cursor: text; }

.ddi-survey { display: none; }

html.ddi-survey-on .ddi-survey {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483646;
}

/* the core — a 6px filled registrar's point, pixel-precise.
   Circle and square are the same size; only the shape changes. */
.ddi-point {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #000;
  transform: translate3d(-50px, -50px, 0);
  transition: width 0.16s ease, height 0.16s ease,
              margin 0.16s ease, border-radius 0.22s ease, opacity 0.2s ease;
}
html.ddi-survey-on.is-stamp .ddi-point {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
}

/* the reticle — a plain hairline circle that trails on a lerp. It
   breathes with the hand (opening slightly in transit, settling at
   rest - driven per-frame in ddi.js) and tightens onto anything
   actionable. Nothing else. */
.ddi-ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: var(--hairline) solid rgba(0, 0, 0, 0.28);
  transform: translate3d(-50px, -50px, 0);
  transition: border-color 0.2s ease,
              width 0.22s var(--ease-settle),
              height 0.22s var(--ease-settle), margin 0.22s var(--ease-settle);
}
/* the lock — over anything actionable the ring tightens and inks in */
html.ddi-survey-on.is-lock .ddi-ring {
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-color: rgba(0, 0, 0, 0.75);
}
/* the instrument lifts off the page as one — beats every
   per-node state below it */
html.ddi-survey-on.is-hidden .ddi-survey { opacity: 0 !important; }

/* ————— The dossier — the point pulls a filed slip ——————
   Hovering a filed element (data-doss) morphs the point from
   a circle into a square — the instrument reaching into the
   archive — then a slip files out and inks in. No network: the
   intelligence was filed ahead of time, not fetched on hover.
   ———————————————————————————————————————————————— */

/* the wait — a hairline arc sweeps around the point and closes
   the circle, the survey instrument acquiring its mark. It fills
   over exactly the dwell, so the reveal is visible coming. */
.ddi-arc {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  opacity: 0;
  transform: translate3d(-50px, -50px, 0);
  transition: opacity 0.14s ease;
}
.ddi-arc svg { width: 28px; height: 28px; display: block; transform: rotate(-90deg); }
.ddi-arc .trk { fill: none; stroke: rgba(0, 0, 0, 0.2); stroke-width: 1; }
.ddi-arc .prg {
  fill: none;
  stroke: #000;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 62.83;
  stroke-dashoffset: 62.83;   /* fill is driven in ddi.js over the dwell */
}
html.ddi-survey-on.is-loading .ddi-arc { opacity: 1; }
/* once the slip opens, the point settles to a steady square —
   the file is pulled */
html.ddi-survey-on.is-doss .ddi-point { border-radius: 1px; }
/* the trailing reticle steps aside for the arc and the slip */
html.ddi-survey-on.is-loading .ddi-ring,
html.ddi-survey-on.is-doss .ddi-ring { opacity: 0; }
/* the ref label stays up through the wait as instant feedback,
   then steps aside when the full slip opens */

/* on touch there is no instrument, but the archive still answers:
   a long-press on anything filed brings out the same slip, anchored
   to the press. Driven by html.ddi-slip-touch + is-open from ddi.js. */
html.ddi-slip-touch .ddi-slip {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483646;
}
html.ddi-slip-touch.is-open .ddi-slip-card {
  opacity: 1;
  transform: scale(1);
}
html.ddi-slip-touch.is-open .ddi-slip-word {
  opacity: 1;
  transform: none;
}

/* the slip — outer node positions (JS transform), card scales
   in so the file appears to slide out of the point */
.ddi-slip { transform: translate3d(-50px, -50px, 0); }
/* the attachment: some files carry a photograph, filed ahead of time
   and simply there when the slip opens - the photograph is evidence,
   not an act; only the clerk's typing animates. The card's own
   scale-in carries its appearance. */
.ddi-slip-img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: var(--hairline) solid #e0e0e0;
}
/* the film attachment — the crest constructs itself on the slip:
   no photograph, no words; the seal is the whole record */
.ddi-slip-film {
  border-bottom: 0;
  padding: 14px;
  box-sizing: border-box;
}
.ddi-slip-film svg { display: block; width: 100%; height: auto; }
.ddi-slip-film text {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 3px;
}

/* an annotated word in the letter: filed, not linked - it stays in
   the text's own ink under the dotted rule */
.about-body span[data-doss] {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: var(--hairline);
}

/* the slip is quiet: the description alone, framed by the same gray
   hairline as the register rows */
.ddi-slip-card {
  width: 264px;
  max-width: 56vw;
  background: #fff;
  border: var(--hairline) solid #e0e0e0;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top left;
  transition: opacity 0.18s ease, transform 0.22s var(--ease-settle);
}
html.ddi-survey-on.is-open .ddi-slip-card { opacity: 1; transform: scale(1); }

.ddi-slip-body {
  font-family: 'Geist', 'Geist Fallback', sans-serif;
  font-size: 12.5px;
  line-height: 1.46;
  color: #000;
  padding: 9px 10px 11px;
}
/* the body writes itself in, one word after another */
.ddi-slip-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
html.ddi-survey-on.is-open .ddi-slip-word {
  opacity: 1;
  transform: none;
}

/* ————— The companion: the character's dossier drawer (easter egg).
   Click the footer mark and the Bureau's actor slides out to browse with
   you; CLOSE files it away. Desktop with a fine pointer only - at phone
   size the actor is too small to read. */
.fbi-companion {
  position: fixed;
  right: 24px;
  bottom: 72px;
  width: 264px;
  background: #fff;
  border: var(--hairline) solid #e0e0e0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  padding: 20px 20px 16px;
  z-index: 90;
  transform: translateX(calc(100% + 32px));
  transition: transform 0.5s var(--ease-settle);
}
.fbi-companion.open { transform: none; }
/* on wide viewports the companion stands in the left margin, vertically
   centered, right beside the content column (content = --measure + 96
   centered, so its left edge is at 50vw - 368px; the drawer sits 24px
   outside it). Narrower desktops keep the bottom-right card so it never
   covers the text. */
@media (min-width: 1280px) {
  .fbi-companion {
    left: calc(50vw - 608px);
    right: auto;
    bottom: auto;
    top: 50%;
    width: 216px;
    /* fully off-canvas: undo the left offset (50vw - 608px) and clear the edge */
    transform: translate(calc(-50vw + 608px - 100% - 24px), -50%);
  }
  .fbi-companion.open { transform: translate(0, -50%); }
  .fbi-companion svg { width: 160px; height: 160px; }
}
.fbi-companion svg { display: block; margin: 0 auto; }
.fbi-companion-cap {
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 12px;
}
.fbi-companion-close {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px;
}
.fbi-companion-close:hover { color: #000; }
/* the mark answers a click (companion drawer) but never advertises it:
   no pointer cursor - the interaction stays a discovery */
@media (max-width: 899px), (pointer: coarse) {
  .fbi-companion { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fbi-companion { transition: none; }
}