/* ==========================================================================
   PAGES — shared shell for the quiet pages (Work, Blog, Publications, About)
   Extends the tokens in main.css. Boldness stays in the hero; these pages
   are benthic ground, paper text, mono kickers, tan hairlines.
   ========================================================================== */

/* Screen-reader-only utility — content kept accessible when the visual
   layer takes over its presentation. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Page frame: fixed neatline + top strip (plate-mark / back link)
   -------------------------------------------------------------------------- */

.page-neatline {
  position: fixed;
  inset: var(--frame-inset);
  border: 1px solid rgba(var(--tan-rgb), 0.30);
  pointer-events: none;
  z-index: 60;
}

.page-neatline::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(var(--tan-rgb), 0.12);
}

.page-strip {
  position: fixed;
  top: calc(var(--frame-inset) + 14px);
  left: calc(var(--frame-inset) + 22px);
  right: calc(var(--frame-inset) + 22px);
  display: flex;
  /* wrap whole items: when plate-mark + back link can't share the row
     (narrow screen x wide theme font), the link drops to its own row as a
     complete box — a bordered inline link must never fragment mid-box
     (2026-07-06, caught by Ben on the Fold) */
  flex-wrap: wrap;
  row-gap: 6px;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 70;
}

/* the flex item is the nav wrapper, not the link: the auto margin keeps it
   right-aligned even when it wraps to a row of its own */
.page-strip nav { margin-left: auto; }

.page-strip .plate-mark-static {
  font-family: var(--font-mono);
  font-size: var(--fs-furniture);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-label);
  color: var(--label);
  /* translucent backing so scrolling content can't collide with it — the
     same legibility treatment the hero nav panel got (CLAUDE.md log) */
  background: rgba(var(--benthic-rgb), 0.72);
  padding: 4px 9px;
}

.page-strip a {
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  text-decoration: none;
  white-space: nowrap;
  color: var(--paper);
  padding: 8px 16px;
  background: rgba(var(--benthic-rgb), 0.66);
  border: 1px solid rgba(var(--tan-rgb), 0.45);
  position: relative;
  transition: color 140ms ease;
}

.page-strip a::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(var(--tan-rgb), 0.16);
  pointer-events: none;
}

.page-strip a:hover { color: var(--flag); }

/* --------------------------------------------------------------------------
   Shared furniture
   -------------------------------------------------------------------------- */

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-furniture);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-label);
  color: var(--fir);
}

/* Double-rule panel (DESIGN.md §5): outer rule + inset hairline */
.panel {
  position: relative;
  background: rgba(var(--strata-rgb), 0.88);
  border: 1px solid rgba(var(--tan-rgb), 0.45);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(var(--tan-rgb), 0.16);
  pointer-events: none;
}

.hairline {
  border: 0;
  border-top: 1px solid rgba(var(--tan-rgb), 0.25);
}

/* Static readout chip — coords-chip styling, fixed placement */
.chip {
  font-family: var(--font-mono);
  font-size: var(--fs-furniture);
  letter-spacing: var(--ls-meta);
  color: var(--tan);
  background: rgba(var(--benthic-rgb), 0.72);
  border: 1px solid rgba(var(--tan-rgb), 0.3);
  padding: 3px 8px;
}

/* --------------------------------------------------------------------------
   reveal.js furniture: the station marker (visible draggable lamp carrier on
   coarse pointers — same instrument furniture as the hero's, no idle drift)
   -------------------------------------------------------------------------- */

.rv-station {
  stroke: var(--tan);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.9;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.rv-station .rv-station-dot { fill: var(--paper); stroke: none; }

.rv-station .rv-station-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

/* The ambient pool reveal.js creates. No mix-blend-mode: at the low alphas the
   gradient uses, screen and normal compositing over the dark benthic ground are
   visually identical, but the blend forces a backdrop re-composite on every
   move (very slow on iOS Safari and for About's per-scroll-frame updates). */
.rv-lamp { pointer-events: none; }