/* ==========================================================================
   The site on paper, for the paper pages that review/build-index-paper.py builds from index.html and consulting.html
   (the preview, index-paper.html, and with --prod the pages build.sh deploys). index.html and consulting.html are
   unchanged, and ./build.sh classic still builds the blue site. The direction TJ approved on 18 Oct 2026
   (outputs/design-direction-20261018/arch-board.html, "Roll it out"): paper ground, ink type, the engraved stone in
   Arc-blue ink (the #bp-ink filter in the page, its low end set to this paper), the scenes inside the walk's arches
   white on Arc blue (blue inside, paper outside), Arc blue kept for the moment (the manifesto and the close) and for
   every button. Grown from css/theme-white.css.
   ========================================================================== */

:root {
  color-scheme: light;
  --night: #f4f5f8;
  --paper: #f4f5f8;
  --white: #0f1115;
  --ink: #0f1115;
  --ink-soft: rgba(15, 17, 21, 0.8);
  --ink-faint: rgba(15, 17, 21, 0.58);
  --on-night: #0f1115;
  --on-night-soft: rgba(15, 17, 21, 0.8);
  --on-night-faint: rgba(15, 17, 21, 0.58);
  --rule-paper: rgba(15, 17, 21, 0.14);
  --rule-night: rgba(15, 17, 21, 0.14);
  --line: rgba(15, 17, 21, 0.4);
  --field: rgba(0, 45, 222, 0.05);
  --scrim: rgba(244, 245, 248, 0.95);
  --arc-pale: #4b5261;
}
html, body { background: #f4f5f8; }

/* the engraving: white lines on Arc blue become Arc-blue ink on paper (the negative print, lines are shadow) */
.arcade, .eng-layer, .fx-under, .fx-over, .speed-canvas,
svg.plate, svg.shard, svg.section-draw, svg.morph,
canvas.ch-canvas, canvas.l1-under, canvas.l2-emb, canvas.l2-band, canvas.l2-band-light,
canvas.l2-book-cv, canvas.l2-door-cv, canvas.l2-frieze { filter: url(#bp-ink); }

/* inside the arches: the scene stays white on Arc blue (js/paper-walk.js draws it on canvas.paper-win), and so do the
   small motions that live in it (water, steam, propellers, the cursor) */
canvas.paper-win, canvas.fx-live { filter: none !important; }

/* the moment: the manifesto and the close stay Arc blue, white on blue */
section[data-theme="arc"] {
  background: var(--arc); color: #fff;
  --white: #fff; --ink: #fff; --ink-soft: rgba(255, 255, 255, 0.84); --ink-faint: rgba(255, 255, 255, 0.62);
  --on-night: #fff; --on-night-soft: rgba(255, 255, 255, 0.84); --on-night-faint: rgba(255, 255, 255, 0.62);
  --rule-paper: rgba(255, 255, 255, 0.26); --rule-night: rgba(255, 255, 255, 0.26); --line: rgba(255, 255, 255, 0.55);
  --field: rgba(0, 18, 120, 0.34); --scrim: rgba(0, 36, 180, 0.95); --arc-pale: #9db5ff;
}
section[data-theme="arc"] canvas, section[data-theme="arc"] svg { filter: none; }

/* buttons: Arc blue with white type; white with blue type on the blue sections */
.btn-arch { background: var(--arc); color: #fff; }
.btn-arch:hover { background: #0f1115; color: #fff; box-shadow: none; }
.btn-line:hover { background: #0f1115; color: #fff; }
.btn-small[aria-pressed="true"] { background: #0f1115; color: #fff; }
section[data-theme="arc"] .btn-arch { background: #fff; color: var(--arc); }
section[data-theme="arc"] .btn-arch:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }

/* the veils and glows that were Arc blue */
.masthead::before { background: linear-gradient(to bottom, rgba(244, 245, 248, 0.97) 55%, rgba(244, 245, 248, 0)); }
.masthead.menu-open .nav { background: #f4f5f8; }
.hero-vignette { background: radial-gradient(ellipse 58% 40% at 50% 54%, rgba(244, 245, 248, 0.6), rgba(244, 245, 248, 0) 72%); }
.hero-copy::before, .hero-prelude::before, .cx-copy::before {
  background: radial-gradient(closest-side, rgba(244, 245, 248, 0.95), rgba(244, 245, 248, 0.82) 52%, rgba(244, 245, 248, 0) 100%);
}
.cx-copy-low::before, .cx-copy-b::before {
  background: radial-gradient(closest-side, rgba(244, 245, 248, 0.96), rgba(244, 245, 248, 0.8) 55%, rgba(244, 245, 248, 0) 100%);
}
.cx-copy .lead { color: rgba(15, 17, 21, 0.9); }
.section-draw .l1-veil, .section-draw .l1-veil-out { fill: #002dde; }
.shard.l1-eng .rep.off .rep-box { fill: rgba(255, 255, 255, 0.74); }

/* "Own it" panel: the owned side is the blue one */
.ledger-own { background: var(--arc); color: #fff; }
.ledger-own .ledger-sub { color: rgba(255, 255, 255, 0.78); }
.ledger-own li { border-top-color: rgba(255, 255, 255, 0.25); }

/* a clear marker, so a screenshot of this page is never mistaken for the live site (no capitals: the web sets none) */
.preview-badge {
  position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 9999;
  padding: 8px 12px; background: #0f1115; color: #fff;
  font: 600 12px/1 var(--f-body, "Hanken Grotesk", sans-serif); letter-spacing: 0.01em; text-transform: none; pointer-events: none;
}

/* section grounds that paint Arc blue directly: paper, except the manifesto and the close */
.cx-hero, .r3-hero, .walk-stage, .r3-end, .run, .hero, .history, .footer, .join, .benefits { background: #f4f5f8; }
.hero-flash, .walk-flash { background: #f4f5f8; }

/* white cards with blue type become blue with white type: Arc blue is the accent on paper */
.skip, .dex, .fp-copy mark, .honest-card, .join-kind input:checked + span, .socials a:hover, .c-loop-head, .c-trust {
  background: var(--arc); color: #fff;
}
.honest-card, .honest-card *, .c-loop-head, .c-loop-head *, .c-trust, .c-trust * { color: #fff !important; }

/* the light at the end of the corridor: the ink map turns the engraving's glow blue, so light it again, centred where
   the corridor puts it (corridor2.js: the horizon at 56% of the screen) */
.hero-sticky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 30% 34% at 50% 56%, #ffffff, #ffffff 12%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: lighten; opacity: var(--paper-glow, 1);
}
/* the reward receipt keeps its paper: white card, Arc-blue type (no colour map) */
svg.receipt { filter: none; --white: #ffffff; --ink: #ffffff; }

/* the hero's numbers: their labels and dividers were white on blue */
.kpis { color: var(--ink-soft); }
.kpis li + li { border-left-color: rgba(15, 17, 21, 0.25); }

/* ---------- the close: the eighth arch (js/paper-close.js) ---------- */
/* one arch on Arc blue, numbered VIII after the seven plates; the keystone drops in, the window opens onto paper, and
   the close stands in it. Replaces the great arch over seven miniatures (finale.js) on the paper pages. */
.revolution { background: var(--arc); }
.climax-fig.paper-close { position: relative; max-width: none; width: min(100%, 860px); margin: clamp(28px, 6vh, 64px) auto 0; padding-inline: 0; aspect-ratio: 660 / 800; }
.paper-close canvas.close-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.paper-close .close-win { position: absolute; display: grid; align-content: center; justify-items: center; gap: 6cqi; text-align: center; color: #0f1115; padding: 0 6%; container-type: inline-size; }
.paper-close .close-win svg { width: 34cqi; height: auto; color: #002dde; fill: currentColor; }
.paper-close .close-win .rev-final { margin: 0; color: #0f1115; font: 400 15cqi/0.95 var(--f-display); text-transform: none; white-space: nowrap; }
.paper-close .close-win > * { opacity: 0; transform: translateY(18px); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1); }
.paper-close.lit .close-win > * { opacity: 1; transform: none; }
.paper-close.lit .close-win > *:nth-child(2) { transition-delay: 0.15s; }
html.reduced .paper-close .close-win > * { transition: none; }
@media (max-width: 640px) {
  .climax-fig.paper-close { width: min(100%, 520px); }
}

/* the blueprint: the page becomes the drawing board, a faint Arc-blue grid on paper */
.blueprint {
  background:
    linear-gradient(rgba(0, 45, 222, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(0, 45, 222, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(0, 45, 222, 0.1) 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(90deg, rgba(0, 45, 222, 0.1) 1px, transparent 1px) 0 0 / 160px 160px,
    #f4f5f8;
}
/* the drawings that go through the ink map are drawn white, so the map turns them Arc blue */
svg.plate, svg.shard, svg.section-draw, svg.morph {
  --white: #ffffff; --ink: #ffffff; --on-night: #ffffff;
  --on-night-soft: rgba(255, 255, 255, 0.84); --on-night-faint: rgba(255, 255, 255, 0.62);
}

/* the walk's Play button is Arc blue: its type stays white */
.walk-play { color: #fff; }
.walk-play:hover, .walk-play:focus-visible { box-shadow: inset 0 0 0 1px #fff; }

/* the preview badge sits bottom right, above the walk's Play button on wide screens (phones move that button to the top) */
.preview-badge { right: 14px; left: auto; }
@media (min-width: 981px) { .preview-badge { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); } }

/* the close fits the screen: the whole arch, keystone to sill, with room for the heading above it */
.climax-fig.paper-close { width: min(100%, 860px, calc((100svh - 150px) * 0.825)); }

/* the join form and its lead were white on blue: ink on paper */
.join-text .lead { color: var(--ink-soft); }
.field input::placeholder, .field textarea::placeholder { color: rgba(15, 17, 21, 0.45); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #0f1115; background: rgba(0, 45, 222, 0.06); }
.field input, .field textarea { background: #ffffff; }
.copy { background: var(--arc); color: #fff; }
.copy:hover { background: #0f1115; color: #fff; }

/* ---------- the business page (consulting.html on paper) ---------- */
/* every engraving is ink on paper: the page cuts them in the negative print (ARC_WHITE_LINE false), so the ink map
   turns their lines Arc blue and the solid blue that stood behind the stone into paper. As the board's monument draws
   it: the scene in the arch's window in ink, like the stone (its films, js/living-biz.js, are left out on paper) */
.page-consulting canvas.c-plate-canvas, .page-consulting canvas.biz-cv { filter: url(#bp-ink); }
/* the package's portal card was white with blue type: Arc blue with white type, the accent on paper */
.page-consulting .c-pkg-portal { background: var(--arc); color: #fff; }
.page-consulting .c-pkg-kicker { color: rgba(255, 255, 255, 0.76); }
.page-consulting .c-pkg-portal h3, .page-consulting .c-pkg-portal dt { color: #fff; }
.page-consulting .c-pkg-portal dd { color: rgba(255, 255, 255, 0.88); }
.page-consulting .c-pkg-portal dl > div { border-top-color: rgba(255, 255, 255, 0.28); }
/* the path the steps hang on: how far along you are in Arc blue; a step's stone is set in blue once it is reached */
.page-consulting .c-steps::after { background: var(--arc); }
.page-consulting .c-step::before { background: #f4f5f8; box-shadow: inset 0 0 0 1px rgba(15, 17, 21, 0.5); }
.page-consulting .c-step.is-active::before, .page-consulting .c-step.is-past::before { background: var(--arc); box-shadow: none; }
/* the hero's lead was white on blue: ink on paper */
.page-consulting .c-hero-copy .lead { color: var(--ink-soft); }

/* Run a node, on a phone: the note that the app runs on a computer (js/common.js) was white on blue */
.run-phone { color: var(--ink-soft); }
/* ... and the other downloads, as rows to tap: their white hairline becomes ink */
@media (max-width: 560px) {
  .run-others a { box-shadow: inset 0 0 0 1px rgba(15, 17, 21, 0.3); }
  .run-others a:active { background: rgba(0, 45, 222, 0.08); }
}