/* ============================================================================
   PALIMPSEST SHELL — the layer system
   ----------------------------------------------------------------------------
   One stylesheet, one nav, one depth model, shared by every page on the site.
   Layered on top of Tiktó (dashboards/assets/tikto.css), which owns the colour,
   type and status tokens. This file owns DEPTH, MATERIAL and MOTION.

   ── The design thesis ─────────────────────────────────────────────────────
   Palimpsest is an instrument, not a brochure, so depth is not decoration here:
   depth encodes epistemic distance. How far back a surface sits tells you how
   far it is from something you can quote.

     plane 0  ambient        the apparatus — atmosphere, never information
     plane 1  evidence       raw files, probe lists, vantages, the receipts
     plane 2  method         the components that produced a number
     plane 3  reading        the number itself, the thing you may cite
     plane 4  chrome         nav and controls, floating over all of it

   Reading surfaces sit closest to the eye, are brightest, and carry the least
   blur. Evidence sits furthest back. Scrolling moves you between planes rather
   than merely down a document. That is the whole idea, and every rule below is
   in service of it.

   Motion follows Apple HIG: long gentle ease-outs, no bounce, 200–800ms, and
   everything collapses to instant under prefers-reduced-motion. Nothing here
   is load-bearing — the page is fully readable with CSS animation unsupported,
   JS disabled, or motion reduced.
   ========================================================================== */

/* ============================ TOKENS ====================================== */
:root {
  /* ---- planes: each is a surface tint + a hairline + a shadow, together ----
     Values sit on top of Tiktó's --tk-surface ramp so a page that already uses
     Tiktó tokens does not fight this file. */
  --ps-plane-0: transparent;
  --ps-plane-1: rgba(255, 255, 255, 0.016);
  --ps-plane-2: rgba(255, 255, 255, 0.030);
  --ps-plane-3: rgba(255, 255, 255, 0.050);
  --ps-plane-4: rgba(8, 10, 14, 0.72);

  --ps-edge-1: rgba(255, 255, 255, 0.055);
  --ps-edge-2: rgba(255, 255, 255, 0.085);
  --ps-edge-3: rgba(255, 255, 255, 0.130);

  /* Two-part shadows: a tight contact shadow plus a wide ambient one. A single
     large blur reads as fog; the pair reads as an object resting on something. */
  --ps-lift-1: 0 1px 2px rgba(0, 0, 0, .40), 0 4px 14px rgba(0, 0, 0, .28);
  --ps-lift-2: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 38px rgba(0, 0, 0, .40);
  --ps-lift-3: 0 3px 6px rgba(0, 0, 0, .50), 0 28px 70px rgba(0, 0, 0, .55);

  /* ---- materials: translucency + saturation boost, the frosted-glass recipe.
     saturate() is what stops backdrop-filter looking like grey plastic. */
  --ps-material: saturate(180%) blur(20px);
  --ps-material-thin: saturate(160%) blur(10px);

  /* ---- z-scale, named so nothing ever guesses a number again ---- */
  --ps-z-ambient: 0;
  --ps-z-content: 1;
  --ps-z-raised: 10;
  --ps-z-nav: 900;
  --ps-z-flyout: 890;
  --ps-z-scrim: 880;

  /* ---- motion: Apple's curves. Standard is a long tail with no overshoot. --- */
  --ps-ease: cubic-bezier(.28, .11, .32, 1);       /* the default: settles, never bounces */
  --ps-ease-out: cubic-bezier(.16, 1, .3, 1);      /* entrances: fast start, long glide */
  --ps-ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* moves that leave and arrive */
  --ps-t-fast: .18s;
  --ps-t: .34s;
  --ps-t-slow: .62s;
  --ps-t-reveal: .78s;

  --ps-nav-bar-h: 52px;
  --ps-region-rail-h: 44px;
  --ps-nav-h: calc(var(--ps-nav-bar-h) + var(--ps-region-rail-h));
  --ps-measure: 68ch;   /* the line length prose is allowed to reach */
}

@media (prefers-reduced-motion: reduce) {
  :root { --ps-t-fast: 1ms; --ps-t: 1ms; --ps-t-slow: 1ms; --ps-t-reveal: 1ms; }
}

/* Light theme: Tiktó flips its tokens on [data-tk-theme="light"]; the planes
   have to flip too or every surface inverts into mud. */
[data-tk-theme="light"] {
  --ps-plane-1: rgba(12, 20, 34, 0.020);
  --ps-plane-2: rgba(12, 20, 34, 0.036);
  --ps-plane-3: rgba(255, 255, 255, 0.900);
  --ps-plane-4: rgba(250, 251, 253, 0.780);
  --ps-edge-1: rgba(12, 20, 34, 0.070);
  --ps-edge-2: rgba(12, 20, 34, 0.110);
  --ps-edge-3: rgba(12, 20, 34, 0.170);
  --ps-lift-1: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 14px rgba(20, 30, 50, .06);
  --ps-lift-2: 0 2px 4px rgba(20, 30, 50, .08), 0 14px 38px rgba(20, 30, 50, .10);
  --ps-lift-3: 0 3px 6px rgba(20, 30, 50, .10), 0 28px 70px rgba(20, 30, 50, .14);
}

/* ====================== CROSS-DOCUMENT TRANSITIONS ======================== */
/* Page-to-page navigation cross-fades instead of flashing white. Supported
   browsers only; everywhere else this rule is inert and navigation is normal. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: ps-vt-out .22s var(--ps-ease) both; }
::view-transition-new(root) { animation: ps-vt-in .34s var(--ps-ease-out) both; }
@keyframes ps-vt-out { to { opacity: 0; } }
@keyframes ps-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* The nav must not cross-fade with the page — it is furniture, it stays put. */
.ps-nav { view-transition-name: ps-nav; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================ PAGE GROUND ================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anchor targets clear the sticky nav instead of hiding behind it. */
:target, [id] { scroll-margin-top: calc(var(--ps-nav-h) + 18px); }

body.ps {
  margin: 0;
  background: var(--tk-void, #000);
  color: var(--tk-text-1, #e2e8f0);
  font-family: var(--tk-font-display), system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* the page never scrolls sideways, ever */
  /* This site publishes sha256 roots, JSONL URLs and long CDT slugs. With
     overflow-x: clip above, an unbreakable token would be CUT rather than
     wrapped — silently truncating evidence. Only fires when a token would
     otherwise overflow; nowrap table cells are unaffected. */
  overflow-wrap: break-word;
}

/* Embedded media never dictates the page width. The clip above hides the
   symptom of an oversized image; this removes the cause. */
.ps img, .ps svg, .ps video, .ps canvas { max-width: 100%; }
.ps img, .ps video { height: auto; }

/* ---- plane 0: the ambient field ------------------------------------------
   Two fixed radial washes that drift very slightly with scroll. Fixed
   attachment is what sells parallax without a single line of JS: the content
   moves, the field does not. */
body.ps::before {
  content: "";
  position: fixed;
  inset: -10% -10% -10% -10%;
  z-index: var(--ps-z-ambient);
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% -6%, rgba(6, 214, 224, .085), transparent 62%),
    radial-gradient(46% 38% at 88% 12%, rgba(167, 139, 250, .050), transparent 60%),
    radial-gradient(52% 44% at 6% 42%, rgba(6, 214, 224, .030), transparent 62%);
  /* A faint grain kills the banding that big soft gradients get on OLED. */
  opacity: .95;
}

/* Everything real sits above the field. */
body.ps > *:not(.ps-nav):not(.ps-skip) { position: relative; z-index: var(--ps-z-content); }

.ps-wrap { max-width: 1020px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }
.ps-wrap--narrow { max-width: 880px; }
.ps-wrap--wide { max-width: 1240px; }

/* ============================ NAVIGATION ================================== */
/* Plane 4. Frosted, condenses on scroll, and keeps the regional evidence line
   permanently visible beneath a compact set of focused flyouts. */
.ps-nav {
  position: sticky; top: 0;
  z-index: var(--ps-z-nav);
  height: var(--ps-nav-h);
  display: flex; align-items: center; align-content: flex-start;
  flex-wrap: wrap; column-gap: 14px; row-gap: 0;
  padding: 0 clamp(12px, 3.4vw, 26px);
  background: var(--ps-plane-4);
  border-bottom: 1px solid transparent;
  font-family: var(--tk-font-mono), ui-monospace, monospace;
  transition: border-color var(--ps-t) var(--ps-ease),
              background var(--ps-t) var(--ps-ease),
              box-shadow var(--ps-t) var(--ps-ease);
}
/* The frosting lives on a pseudo-element, not on .ps-nav itself, and that is
   load-bearing rather than stylistic: backdrop-filter makes an element a
   containing block for position:fixed descendants. With it on .ps-nav, the
   mobile menu sheet and its scrim (both fixed, both children of the nav) would
   resolve against a 52px-tall bar instead of the viewport — the scrim would
   cover only the nav strip and the sheet would open in the wrong place.
   On the pseudo, the blur is identical and the nav stops being a containing
   block. Paints beneath the nav's own tint, which is what frosted glass is. */
.ps-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: var(--ps-material);
  backdrop-filter: var(--ps-material);
}
/* Scrolled state — set by shell.js. The hairline and lift only appear once
   there is content underneath to separate from. */
.ps-nav[data-scrolled] {
  border-bottom-color: var(--ps-edge-1);
  box-shadow: var(--ps-lift-1);
}

.ps-nav__brand {
  display: flex; align-items: center; gap: 9px;
  height: var(--ps-nav-bar-h);
  color: var(--tk-text-0, #fff); font-weight: 700; font-size: 12px;
  letter-spacing: .2em; text-decoration: none; white-space: nowrap;
  transition: opacity var(--ps-t-fast) var(--ps-ease);
}
.ps-nav__brand:hover { opacity: .78; }
.ps-nav__brand img { display: block; }

.ps-nav__spacer { flex: 1; height: var(--ps-nav-bar-h); }

.ps-nav__items {
  display: flex; align-items: center; gap: 1px;
  min-height: var(--ps-nav-bar-h);
}

/* A nav entry: either a plain link or a flyout trigger. */
.ps-nav__item { position: relative; }
.ps-nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--tk-text-2, #94a3b8);
  font-size: 12px; letter-spacing: .02em;
  padding: 7px 11px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit;
  transition: color var(--ps-t-fast) var(--ps-ease),
              background var(--ps-t-fast) var(--ps-ease);
}
.ps-nav__link:hover,
.ps-nav__link:focus-visible { color: var(--tk-text-0, #fff); background: rgba(255,255,255,.07); }
.ps-nav__link[aria-current="page"],
.ps-nav__link[data-within] { color: var(--tk-live, #06d6e0); background: rgba(6,214,224,.11); }
.ps-nav__link[aria-expanded="true"] { color: var(--tk-text-0,#fff); background: rgba(255,255,255,.09); }

/* the disclosure chevron rotates rather than swapping glyphs */
.ps-nav__chev {
  width: 7px; height: 7px; flex: none; margin-left: 1px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ps-t) var(--ps-ease);
}
.ps-nav__link[aria-expanded="true"] .ps-nav__chev { transform: translateY(1px) rotate(-135deg); }

/* ---- flyout: plane 4 material, opens beneath the bar ---- */
.ps-flyout {
  position: absolute; top: calc(100% + 7px); left: 50%;
  z-index: var(--ps-z-flyout);
  min-width: 290px; max-width: min(94vw, 380px);
  padding: 9px;
  background: var(--ps-plane-4);
  -webkit-backdrop-filter: var(--ps-material);
  backdrop-filter: var(--ps-material);
  border: 1px solid var(--ps-edge-2);
  border-radius: 14px;
  box-shadow: var(--ps-lift-3);
  /* closed state */
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-8px) scale(.97);
  transform-origin: top center;
  transition: opacity var(--ps-t) var(--ps-ease),
              transform var(--ps-t) var(--ps-ease-out),
              visibility 0s linear var(--ps-t);
}
/* The panel is visually separated from its trigger, but the pointer path must
   remain continuous. Without this transparent hit corridor, crossing the 7px
   breathing room fires pointerleave before the panel can cancel its close
   timer, which makes the options disappear under a reader's cursor. */
.ps-flyout::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px; height: 8px;
}
.ps-nav__item[data-open] .ps-flyout {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s, 0s, 0s;
}
/* Keep the last flyouts on screen instead of bleeding off the right edge.
   AI Evals is the third item from the end and owns a two-column panel, so it
   needs the same edge anchoring as the two menus after it. */
.ps-nav__item:nth-last-child(-n+3) .ps-flyout { left: auto; right: 0; transform: translateY(-8px) scale(.97); }
.ps-nav__item:nth-last-child(-n+3)[data-open] .ps-flyout { transform: translateY(0) scale(1); }

/* A two-column flyout for the pillar that has outgrown one list. Apple's
   mega-menu move: widen rather than scroll, because a scrolling menu hides
   exactly the items that are newest. */
.ps-flyout--wide { min-width: 560px; max-width: min(94vw, 640px); }
.ps-flyout__cols { display: grid; grid-template-columns: 1fr; gap: 4px; }
.ps-flyout--wide .ps-flyout__cols { grid-template-columns: 1fr 1fr; gap: 10px; }

.ps-flyout__head {
  font-family: var(--tk-font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tk-text-4, #6f8098);
  margin: 6px 0 3px; padding: 0 11px;
}

.ps-flyout__lede {
  padding: 5px 11px 9px; margin: 0;
  font-size: 11px; line-height: 1.5; color: var(--tk-text-3, #7d8ca3);
  border-bottom: 1px solid var(--ps-edge-1); margin-bottom: 5px;
}
.ps-flyout a {
  display: block; padding: 8px 11px; border-radius: 9px;
  text-decoration: none; color: var(--tk-text-1, #e2e8f0);
  transition: background var(--ps-t-fast) var(--ps-ease),
              transform var(--ps-t-fast) var(--ps-ease);
}
.ps-flyout a:hover, .ps-flyout a:focus-visible { background: rgba(255,255,255,.075); }
.ps-flyout a:active { transform: scale(.985); }
.ps-flyout a[aria-current="page"] { background: rgba(6,214,224,.11); }
.ps-flyout a b {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--tk-text-0, #fff);
  font-family: var(--tk-font-display);
}
.ps-flyout a span {
  display: block; margin-top: 2px;
  font-size: 11px; line-height: 1.45; color: var(--tk-text-3, #7d8ca3);
  font-family: var(--tk-font-display);
}
/* "NEW" tag — earned by shipping, removed by hand when it stops being true. */
.ps-tag {
  font-family: var(--tk-font-mono); font-size: 9.5px; letter-spacing: .1em;
  padding: 2px 5px; border-radius: 4px; flex: none;
  background: rgba(6,214,224,.15); color: var(--tk-live, #06d6e0);
  border: 1px solid rgba(6,214,224,.28); text-transform: uppercase;
}
.ps-tag--soon { background: rgba(100,116,139,.16); color: var(--tk-stale,#8593a8); border-color: rgba(100,116,139,.38); }

/* ---- regional evidence rail --------------------------------------------
   It borrows the language of archive-file tabs: one continuous rule, four
   named ledgers, and a cyan registration mark only when a link is engaged.
   These remain ordinary anchors in a labelled list, never ARIA tabs: each
   destination moves the document rather than swapping an in-page panel. */
.ps-region-rail {
  order: 1;
  flex: 0 0 100%;
  height: var(--ps-region-rail-h);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--ps-edge-1);
  font-family: var(--tk-font-mono), ui-monospace, monospace;
}
.ps-region-rail__label {
  display: flex; align-items: center;
  margin: 0; padding: 0 16px 0 2px;
  border-right: 1px solid var(--ps-edge-1);
  color: var(--tk-text-4, #6f8098);
  font-size: 9px; font-weight: 700; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.ps-region-rail__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 100%;
  margin: 0; padding: 0;
  list-style: none;
}
.ps-region-rail__list li { min-width: 0; }
.ps-region-rail__link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 44px;
  padding: 0 10px;
  border-right: 1px solid var(--ps-edge-1);
  color: var(--tk-text-2, #94a3b8);
  font-size: 11px; font-weight: 650; line-height: 1.2;
  letter-spacing: .025em; text-align: center; text-decoration: none;
  transition: color var(--ps-t-fast) var(--ps-ease),
              background var(--ps-t-fast) var(--ps-ease);
}
.ps-region-rail__list li:last-child .ps-region-rail__link { border-right: 0; }
.ps-region-rail__link::before {
  content: "";
  position: absolute; top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: var(--tk-live, #06d6e0);
  opacity: 0;
  transition: opacity var(--ps-t-fast) var(--ps-ease);
}
.ps-region-rail__link:hover,
.ps-region-rail__link:focus-visible {
  color: var(--tk-text-0, #fff);
  background: rgba(255,255,255,.055);
}
.ps-region-rail__link:hover::before,
.ps-region-rail__link:focus-visible::before { opacity: 1; }

/* ---- mobile: the bar collapses to a sheet ---- */
.ps-nav__burger { display: none; }
.ps-nav__scrim {
  position: fixed; inset: 0; z-index: var(--ps-z-scrim);
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--ps-t) var(--ps-ease), visibility 0s linear var(--ps-t);
}
body[data-ps-menu] .ps-nav__scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
/* The page must hold still under the open sheet: without this, touch-drag on
   the scrim scroll-chains into the document and the reader loses their place. */
body[data-ps-menu] { overflow: hidden; }

@media (max-width: 940px) {
  /* 44x44: the burger is the single gateway to all navigation on a phone,
     and Apple's 44pt floor is the difference between a tap and a fumble.
     The drawn bars stay the same size — the box grows, not the icon. */
  .ps-nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 44px; height: 44px; padding: 0 12px; margin-right: -10px; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer;
  }
  .ps-nav__burger i {
    display: block; height: 1.5px; background: var(--tk-text-1, #e2e8f0); border-radius: 2px;
    transition: transform var(--ps-t) var(--ps-ease), opacity var(--ps-t-fast) var(--ps-ease);
  }
  body[data-ps-menu] .ps-nav__burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  body[data-ps-menu] .ps-nav__burger i:nth-child(2) { opacity: 0; }
  body[data-ps-menu] .ps-nav__burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .ps-nav__items {
    position: fixed; top: var(--ps-nav-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--ps-nav-h));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: var(--ps-z-flyout);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px clamp(12px, 4vw, 20px) 30px;
    background: var(--ps-plane-4);
    -webkit-backdrop-filter: var(--ps-material); backdrop-filter: var(--ps-material);
    border-bottom: 1px solid var(--ps-edge-2);
    box-shadow: var(--ps-lift-3);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity var(--ps-t) var(--ps-ease),
                transform var(--ps-t) var(--ps-ease-out),
                visibility 0s linear var(--ps-t);
  }
  body[data-ps-menu] .ps-nav__items {
    transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s;
  }
  .ps-nav__link { width: 100%; justify-content: space-between; padding: 11px 12px; font-size: 13px; }
  /* On mobile the flyouts are not floating panels, they are inline sections. */
  .ps-flyout {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; max-width: none; box-shadow: none; border: 0; border-radius: 0;
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0 0 6px 10px; margin: 0 0 4px;
    border-left: 1px solid var(--ps-edge-1);
    display: none;
  }
  .ps-flyout::before { display: none; }
  .ps-nav__item[data-open] .ps-flyout { display: block; }
  .ps-nav__item:nth-last-child(-n+3) .ps-flyout { right: auto; transform: none; }
  .ps-flyout--wide { min-width: 0; max-width: none; }
  .ps-flyout--wide .ps-flyout__cols { grid-template-columns: 1fr; gap: 0; }
  .ps-flyout__lede { display: none; }
}

@media (max-width: 620px) {
  :root { --ps-region-rail-h: 88px; }
  .ps-region-rail { grid-template-columns: 72px minmax(0, 1fr); }
  .ps-region-rail__label {
    padding: 0 10px 0 2px;
    font-size: 8.5px; line-height: 1.4;
    white-space: normal;
  }
  .ps-region-rail__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 44px);
  }
  .ps-region-rail__link { padding: 0 6px; font-size: 10.5px; }
  .ps-region-rail__list li:nth-child(even) .ps-region-rail__link { border-right: 0; }
  .ps-region-rail__list li:nth-child(-n+2) .ps-region-rail__link {
    border-bottom: 1px solid var(--ps-edge-1);
  }
}

/* ---- no JavaScript: the nav must still be a nav --------------------------
   The sheet above is opened by shell.js setting body[data-ps-menu]. With
   scripting off the burger does nothing and every link is unreachable on a
   phone — a dead end on exactly the hardened and low-power browsers this
   project's readers use. Here the bar becomes a plain stacked block that
   scrolls with the document, flyouts open, nothing hidden. Purely additive:
   a browser that does not know `scripting` never matches this rule and
   keeps today's behaviour. */
@media (max-width: 940px) and (scripting: none) {
  .ps-nav { position: static; height: auto; flex-wrap: wrap; padding-bottom: 10px; }
  .ps-nav__burger { display: none; }
  .ps-nav__items {
    order: 2;
    position: static; max-height: none; width: 100%;
    transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border-bottom: 0; background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 4px 0 0;
  }
  .ps-nav__item .ps-flyout { display: block; }
}

/* Desktop has the same no-script obligation. Disclosure buttons cannot open
   without shell.js, so the navigation becomes an in-flow directory and every
   destination remains keyboard, crawler and hardened-browser reachable. */
@media (min-width: 941px) and (scripting: none) {
  .ps-nav {
    position: static; height: auto; align-items: flex-start; flex-wrap: wrap;
    padding-top: 14px; padding-bottom: 14px;
  }
  .ps-nav__brand { min-height: 34px; }
  .ps-nav__spacer { display: none; }
  .ps-nav__items {
    order: 2;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    width: 100%; align-items: start; gap: 8px;
  }
  .ps-nav__link { width: 100%; justify-content: space-between; }
  .ps-nav__chev { display: none; }
  .ps-nav__item .ps-flyout,
  .ps-nav__item:nth-last-child(-n+3) .ps-flyout {
    position: static; display: block;
    min-width: 0; max-width: none; margin-top: 4px;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
  }
  .ps-flyout::before { display: none; }
  .ps-flyout--wide .ps-flyout__cols { grid-template-columns: 1fr; }
}

/* ============================ SURFACES ==================================== */
/* The plane classes. A page composes depth out of these three and nothing else. */
.ps-p1, .ps-p2, .ps-p3 {
  border-radius: var(--tk-radius-lg, 14px);
  border: 1px solid var(--ps-edge-1);
  transition: transform var(--ps-t) var(--ps-ease-out),
              border-color var(--ps-t) var(--ps-ease),
              box-shadow var(--ps-t) var(--ps-ease),
              background var(--ps-t) var(--ps-ease);
}
.ps-p1 { background: var(--ps-plane-1); box-shadow: none; }
.ps-p2 { background: var(--ps-plane-2); border-color: var(--ps-edge-2); box-shadow: var(--ps-lift-1); }
.ps-p3 {
  background: var(--ps-plane-3); border-color: var(--ps-edge-2); box-shadow: var(--ps-lift-2);
  -webkit-backdrop-filter: var(--ps-material-thin); backdrop-filter: var(--ps-material-thin);
}

/* Interactive surfaces rise toward the reader. 2px, not 8px — this is an
   instrument, and a card that leaps looks like it is reporting something. */
a.ps-p1:hover, a.ps-p2:hover, a.ps-p3:hover,
.ps-lift:hover {
  transform: translateY(-2px);
  border-color: var(--ps-edge-3);
  box-shadow: var(--ps-lift-2);
}
a.ps-p3:hover { box-shadow: var(--ps-lift-3); }
.ps-lift:active, a.ps-p1:active, a.ps-p2:active, a.ps-p3:active { transform: translateY(0) scale(.995); }

@media (prefers-reduced-motion: reduce) {
  a.ps-p1:hover, a.ps-p2:hover, a.ps-p3:hover, .ps-lift:hover { transform: none; }
}

/* A hairline that fades at both ends, so sections separate without a hard rule. */
.ps-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--ps-edge-2) 18%, var(--ps-edge-2) 82%, transparent);
}

/* ============================ SCROLL CHOREOGRAPHY ========================= */
/* Native scroll-driven animation where the browser has it, IntersectionObserver
   fallback where it does not, and instant everywhere under reduced-motion.
   Content is visible by default; the animation only ever takes it away and
   gives it back, so a failure mode is "no animation", never "no content". */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ps-reveal {
      animation: ps-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
    /* Sections that should feel like they settle into place from further back. */
    .ps-reveal--deep {
      animation: ps-rise-deep linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    /* A band that dims and recedes as it leaves the top of the viewport —
       the "page has depth" cue, borrowed straight from Apple product pages. */
    .ps-recede {
      animation: ps-recede linear both;
      animation-timeline: view();
      animation-range: exit -8% exit 100%;
    }
  }
}

@keyframes ps-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ps-rise-deep {
  from { opacity: 0; transform: translateY(46px) scale(.972); }
  to   { opacity: 1; transform: none; }
}
@keyframes ps-recede {
  from { opacity: 1; transform: none; }
  to   { opacity: .35; transform: translateY(-14px) scale(.978); }
}

/* JS fallback: shell.js marks <html class="ps-js"> only when it will actually
   drive the reveal, so no-JS never hides anything. */
.ps-js .ps-fallback-reveal { opacity: 0; transform: translateY(22px); }
.ps-js .ps-fallback-reveal.ps-in {
  opacity: 1; transform: none;
  transition: opacity var(--ps-t-reveal) var(--ps-ease-out),
              transform var(--ps-t-reveal) var(--ps-ease-out);
  transition-delay: var(--ps-d, 0ms);
}

/* Stagger for lists: a child's index becomes its delay, capped so a long list
   never feels like it is loading. */
.ps-stagger > * { --ps-d: calc(var(--ps-i, 0) * 46ms); }

@media (prefers-reduced-motion: reduce) {
  .ps-js .ps-fallback-reveal { opacity: 1; transform: none; }
}

/* ---- pinned narrative: a heading holds while its evidence scrolls past ---- */
.ps-pin { position: sticky; top: calc(var(--ps-nav-h) + 22px); align-self: start; }

/* A two-column "claim on the left, evidence on the right" band. Collapses to a
   single column on narrow screens, where the pin is released. */
.ps-band { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); }
@media (max-width: 860px) {
  /* minmax(0,1fr), not 1fr: a bare 1fr track means minmax(auto,1fr), so one
     uncompressible child (a min-width table inside its scroll box, a long
     hash) silently blows the whole column past the viewport — measured live
     at 561px on a 360px phone (fund.html #rigour) before this changed. */
  .ps-band { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ps-pin { position: static; }
}

/* ============================ TYPE ======================================== */
.ps-kicker {
  font-family: var(--tk-font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tk-live, #06d6e0); margin: 0 0 12px;
}
.ps-h1 {
  font-size: clamp(32px, 5.6vw, 54px); line-height: 1.03; font-weight: 800;
  letter-spacing: -.028em; margin: 0 0 14px; color: var(--tk-text-0, #fff);
  text-wrap: balance;
}
.ps-h2 {
  font-size: clamp(22px, 3.2vw, 31px); line-height: 1.12; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 10px; color: var(--tk-text-0, #fff);
  text-wrap: balance;
}
.ps-lede { font-size: clamp(15px, 1.6vw, 17.5px); color: var(--tk-text-2, #94a3b8); max-width: var(--ps-measure); margin: 0 0 26px; text-wrap: pretty; }
.ps-label {
  font-family: var(--tk-font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tk-text-3, #7d8ca3); margin: 0 0 12px;
}
.ps-section-head {
  font-family: var(--tk-font-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tk-text-3, #7d8ca3);
  padding-bottom: 9px; margin: 54px 0 16px;
  border-bottom: 1px solid var(--ps-edge-1);
}
.ps-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============================ CONTROLS ==================================== */
.ps-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--tk-font-mono); font-size: 12.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  background: var(--tk-live, #06d6e0); color: #04141a;
  transition: transform var(--ps-t-fast) var(--ps-ease),
              filter var(--ps-t-fast) var(--ps-ease),
              border-color var(--ps-t-fast) var(--ps-ease),
              color var(--ps-t-fast) var(--ps-ease);
}
.ps-btn:hover { filter: brightness(1.09); transform: translateY(-1px); }
.ps-btn:active { transform: translateY(0) scale(.985); }
.ps-btn--ghost {
  background: transparent; color: var(--tk-text-1, #e2e8f0); border-color: var(--ps-edge-3);
}
.ps-btn--ghost:hover { border-color: var(--tk-live, #06d6e0); color: var(--tk-live, #06d6e0); filter: none; }
.ps-btn--telegram {
  background: rgba(6, 214, 224, .1); color: var(--tk-live, #06d6e0);
  border-color: color-mix(in srgb, var(--tk-live, #06d6e0) 44%, transparent);
}
.ps-btn--telegram:hover { background: rgba(6, 214, 224, .17); filter: none; }

/* ---- coarse pointers get room, mice keep the density --------------------
   A finger is about 9mm wide and lands on what it covers; a cursor lands on
   a pixel. These rules fire only where the pointer is coarse, so desktop
   spacing is untouched — including on touch-capable laptops in mouse mode.
   The tablet case matters especially: above the 940px breakpoint an iPad
   gets the DESKTOP nav bar, whose 12px links are a 31px target. */
@media (hover: none), (pointer: coarse) {
  .ps-btn { padding: 12px 18px; }
}
@media (pointer: coarse) and (min-width: 941px) {
  .ps-nav__link { padding: 13px 13px; }
  .ps-nav__items { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) { .ps-btn:hover { transform: none; } }

/* A live dot that actually pulses, because "live" is a claim worth animating. */
.ps-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 0 0 currentColor;
}
.ps-dot--live { animation: ps-pulse 2.6s var(--ps-ease-in-out) infinite; }
@keyframes ps-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.30); }
  60%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .ps-dot--live { animation: none; } }

/* ============================ ACCESSIBILITY =============================== */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--tk-live, #06d6e0);
  outline-offset: 2px; border-radius: 6px;
}
.ps-skip {
  position: absolute; left: 10px; top: -60px; z-index: 1000;
  padding: 9px 15px; border-radius: 9px;
  background: var(--tk-live, #06d6e0); color: #04141a;
  font-family: var(--tk-font-mono); font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: top var(--ps-t) var(--ps-ease);
}
.ps-skip:focus { top: 9px; }
.ps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Wide content (tables, charts) scrolls inside its own box. The page body must
   never scroll horizontally — that rule is enforced by body.ps overflow-x too. */
.ps-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Evidence dispatch route: a native-details navigator for the public-interest
   side of the network. It stays useful without JavaScript and makes the reason
   for each cross-product route visible before a reader follows it. */
.evidence-dispatch {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--tk-live, #06d6e0) 34%, var(--ps-edge-2));
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--tk-live, #06d6e0) 13%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(10, 20, 27, .96), rgba(7, 12, 18, .88));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .22);
}
.evidence-dispatch__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 24px;
  align-items: end;
  margin-bottom: 20px;
}
.evidence-dispatch__head > p {
  margin: 0;
  color: var(--tk-text-3, #7d8ca3);
  font-size: 13px;
  line-height: 1.55;
}
.evidence-route {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.evidence-route__stop {
  --route-accent: var(--tk-live, #06d6e0);
  min-width: 0;
  border: 1px solid var(--ps-edge-2);
  border-radius: 13px;
  background: rgba(8, 14, 20, .76);
  transition: border-color var(--ps-t-fast) var(--ps-ease),
              transform var(--ps-t-fast) var(--ps-ease),
              background var(--ps-t-fast) var(--ps-ease);
}
.evidence-route__stop--narco { --route-accent: #9d6bff; }
.evidence-route__stop--signal { --route-accent: #f2a85d; }
.evidence-route__stop--scam { --route-accent: #67d391; }
.evidence-route__stop:hover,
.evidence-route__stop[open] {
  border-color: color-mix(in srgb, var(--route-accent) 62%, var(--ps-edge-2));
  background: color-mix(in srgb, var(--route-accent) 7%, rgba(8, 14, 20, .92));
  transform: translateY(-2px);
}
.evidence-route__stop summary {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 116px;
  padding: 16px 44px 16px 16px;
  cursor: pointer;
  list-style: none;
}
.evidence-route__stop summary::-webkit-details-marker { display: none; }
.evidence-route__stop summary::after {
  content: "+";
  position: absolute;
  top: 15px;
  right: 16px;
  color: var(--route-accent);
  font: 500 20px/1 var(--tk-font-mono);
  transition: transform var(--ps-t-fast) var(--ps-ease);
}
.evidence-route__stop[open] summary::after { transform: rotate(45deg); }
.evidence-route__stop summary strong {
  color: var(--tk-text-0, #fff);
  font-size: 15px;
  letter-spacing: -.01em;
}
.evidence-route__stop summary > span:last-child {
  color: var(--tk-text-3, #7d8ca3);
  font-size: 12px;
  line-height: 1.45;
}
.evidence-route__step {
  color: var(--route-accent);
  font-family: var(--tk-font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.evidence-route__body {
  margin: 0 16px 16px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--route-accent) 28%, transparent);
}
.evidence-route__body p {
  margin: 0 0 11px;
  color: var(--tk-text-2, #94a3b8);
  font-size: 12.5px;
  line-height: 1.5;
}
.evidence-route__body a {
  color: var(--route-accent);
  font-family: var(--tk-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
}
.evidence-route__body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.evidence-route__links { display: flex; flex-wrap: wrap; gap: 8px 16px; }

@media (max-width: 720px) {
  .evidence-dispatch__head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .evidence-route { grid-template-columns: minmax(0, 1fr); }
  .evidence-route__stop summary { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .evidence-route__stop,
  .evidence-route__stop summary::after { transition: none; }
  .evidence-route__stop:hover,
  .evidence-route__stop[open] { transform: none; }
}

/* Long pages: let the browser skip layout for offscreen sections. */
.ps-defer { content-visibility: auto; contain-intrinsic-size: auto 620px; }

/* Page share row: quiet mono controls under the h1, same register as the
   table-view summaries. Injected by shell.js on readings, briefs, dashboards. */
.ps-share { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px; font-family: var(--tk-font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tk-text-4); }
.ps-share button { background: none; border: none; padding: 0 0 1px; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--tk-text-4); border-bottom: 1px solid var(--ps-edge-2, #2a2f36); }
.ps-share button:hover { color: var(--tk-text-2); }
.ps-share button:focus-visible { outline: 1px solid var(--tk-live, #06d6e0); outline-offset: 2px;
  color: var(--tk-text-2); }
.ps-share__dot { color: var(--tk-text-4); }
.ps-share__note { color: var(--tk-ok, #19c393); }

/* Per-card share chip: bottom-right of every signal card. Quiet by default,
   present on touch, never louder than the reading it shares. */
a.door, a.lead, a.sig, [data-share-card] { position: relative; }
.ps-cardshare { position: absolute; right: 14px; bottom: 12px;
  background: none; border: none; padding: 0 0 1px; cursor: pointer;
  font-family: var(--tk-font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tk-text-4);
  border-bottom: 1px solid var(--ps-edge-2, #2a2f36);
  opacity: 0; transition: opacity .25s ease; }
a.door:hover .ps-cardshare, a.lead:hover .ps-cardshare, a.sig:hover .ps-cardshare,
[data-share-card]:hover .ps-cardshare,
.ps-cardshare:focus-visible { opacity: 1; }
.ps-cardshare:hover { color: var(--tk-text-2); }
.ps-cardshare:focus-visible { outline: 1px solid var(--tk-live, #06d6e0); outline-offset: 2px; }
@media (hover: none) { .ps-cardshare { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .ps-cardshare { transition: none; } }
@media print { .ps-cardshare { display: none !important; } }

/* Sister-publication relay. A complete fallback lives in the HTML; the small
   network-relay script upgrades only the text and receipt when NarcoScope's
   public dossier can be read. Violet marks the adjacent desk so its evidence
   cannot be mistaken for Palimpsest's cyan first-party readings. */
.sister-relay {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, .52fr) minmax(0, 1.32fr) minmax(240px, .76fr);
  min-height: 360px;
  margin-top: clamp(24px, 5vw, 66px);
  margin-bottom: clamp(30px, 6vw, 74px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #a98bff 36%, var(--ps-edge-2));
  border-radius: 20px;
  background:
    radial-gradient(circle at 9% 82%, rgba(6, 214, 224, .11), transparent 31%),
    radial-gradient(circle at 88% 0%, rgba(169, 139, 255, .14), transparent 34%),
    linear-gradient(145deg, rgba(6, 10, 15, .98), rgba(5, 6, 8, .98) 58%, rgba(12, 7, 18, .96));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .3);
}
.sister-relay > * { position: relative; z-index: 1; }
.sister-relay__route {
  min-height: 360px;
  overflow: hidden;
  border-right: 1px solid var(--ps-edge-1);
}
.sister-relay__route::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: radial-gradient(rgba(255, 255, 255, .34) .6px, transparent .7px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}
.sister-relay__route svg {
  position: absolute;
  inset: 15% -27% auto 2%;
  width: 135%;
  height: auto;
  overflow: visible;
}
.sister-relay__route path {
  fill: none;
  stroke: rgba(169, 139, 255, .48);
  stroke-width: 1.2;
  stroke-dasharray: 5 8;
  animation: ps-relay-route 8s linear infinite;
}
.sister-relay__route path:first-child { stroke: rgba(6, 214, 224, .5); }
@keyframes ps-relay-route { to { stroke-dashoffset: -78; } }
.sister-relay__route circle { fill: #a98bff; filter: drop-shadow(0 0 8px #a98bff); }
.sister-relay__route circle:first-of-type { fill: var(--tk-live); filter: drop-shadow(0 0 8px var(--tk-live)); }
.sister-relay__route span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: var(--tk-live);
  font-family: var(--tk-font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sister-relay__route span:last-child { left: auto; right: 16px; top: 16px; bottom: auto; color: #b9a5ff; }
.sister-relay__story { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 54px); }
.sister-relay__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  color: #b9a5ff;
  font-family: var(--tk-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sister-relay__kicker span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.sister-relay__story h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--tk-text-0);
  font-family: var(--tk-font-display);
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 500;
  letter-spacing: -.042em;
  line-height: 1.02;
}
.sister-relay__dek { max-width: 62ch; margin: 17px 0 0; color: var(--tk-text-2); font-size: 13px; line-height: 1.62; }
.sister-relay__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.sister-relay__actions a { color: var(--tk-text-0); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.sister-relay__actions a:first-child { color: #b9a5ff; }
.sister-relay__actions a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sister-relay__receipt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3vw, 34px);
  border-left: 1px solid var(--ps-edge-1);
  background: rgba(255, 255, 255, .018);
}
.sister-relay__fresh { margin: 0 0 15px; color: var(--tk-text-4); font-family: var(--tk-font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.sister-relay[data-relay-state="remote"] .sister-relay__fresh span { color: var(--tk-ok); }
.sister-relay__figures { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--ps-edge-1); border-radius: 12px; background: var(--ps-edge-1); }
.sister-relay__figures p { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; margin: 0; padding: 13px; background: rgba(7, 10, 14, .97); }
.sister-relay__figures strong { grid-row: 1 / 3; color: var(--tk-text-0); font-size: 25px; font-weight: 500; letter-spacing: -.04em; }
.sister-relay__figures span { color: var(--tk-text-3); font-size: 10px; line-height: 1.35; }
.sister-relay__boundary { margin: auto 0 0; padding-top: 17px; border-top: 1px solid var(--ps-edge-1); color: var(--tk-text-3); font-size: 10.5px; line-height: 1.5; }
.sister-relay__boundary b { color: #ff9a83; }

@media (max-width: 900px) {
  .sister-relay { grid-template-columns: 110px minmax(0, 1fr); }
  .sister-relay__receipt { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid var(--ps-edge-1); border-left: 0; }
  .sister-relay__fresh { grid-column: 1 / -1; margin: 0; }
}
@media (max-width: 620px) {
  .sister-relay { grid-template-columns: 1fr; min-height: 0; }
  .sister-relay__route { min-height: 118px; border-right: 0; border-bottom: 1px solid var(--ps-edge-1); }
  .sister-relay__route svg { inset: -62% -4% auto auto; width: 93%; }
  .sister-relay__story { padding: 24px 20px 26px; }
  .sister-relay__story h2 { font-size: 30px; }
  .sister-relay__receipt { grid-column: auto; grid-template-columns: 1fr; padding: 22px 20px; }
  .sister-relay__fresh { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sister-relay__route path { animation: none; }
}

/* Print: strip every plane back to paper. */
@media print {
  body.ps::before, .ps-nav { display: none !important; }
  .ps-p1, .ps-p2, .ps-p3 { box-shadow: none !important; background: none !important; border-color: #ccc !important; }
  .ps-reveal, .ps-fallback-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ps-share { display: none !important; }
  .sister-relay__route { display: none !important; }
  .sister-relay { display: block !important; border-color: #ccc !important; }
}