/* ══════════════════════════════════════════════════════════════════════════════
   journey.css — the public personal-journey page (/journey, /journey/<token>, /journey/demo).
   Ported from the Part 1 prototype (_prototypes/evorrah-personal-journey-10-directions:
   tokens.css + core.css), composed as "The Room in Light" (docs/execution/journey/DIRECTION.md:
   direction 08 with light plates tinted from the style palette — never onyx — and one
   hand-drawn arrow that draws with scroll, direction 10's engine). Self-contained on purpose:
   it imports no portal stylesheet, so a portal change can never move this page and this
   page can never move the portal. Every value below is a portal token measured in
   research/A (radii 0 / 2px / 50% — owner 2026-09-25; no #FFF; no shadows; no decorative
   gradients — the plate's ≤ 6 % pool of the style's second colour (a blurred ellipse, not a
   gradient) is the one soft light allowed;
   one curve; ≤ 16 px travel; opacity, transform and the arrow's stroke-dashoffset only).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Tokens (portal palette, faces, scale, radii, motion) ────────────────── */
:root{
  color-scheme: light;
  --pj-linen:#F8F1E7; --pj-alabaster:#E7E3DD; --pj-onyx:#141414; --pj-bordeaux:#4C061D; --pj-cherry:#6B0410;
  --pj-crimson:#9D0617;
  --pj-onyx-78:#464542; --pj-onyx-62:#6B6864; --pj-onyx-48:#8B8782; --pj-onyx-34:#AAA69F; --pj-onyx-20:#CAC5BD; --pj-onyx-12:#DDD6CE;
  --pj-approve:#3D7A2E; --pj-revise:#C0281C; --pj-amber:#846439;
  --pj-paper:#FFFDF9; --pj-wash:#FBF6EE; --pj-band:#F6EEE2; --pj-flash:#F6E3E3; --pj-hot-ring:#E7C9C9;
  --pj-onyx-hover:#2C2724;
  --pj-bg:var(--pj-linen); --pj-ink:var(--pj-onyx); --pj-ink-2:var(--pj-onyx-78); --pj-ink-3:var(--pj-onyx-62);
  --pj-line:var(--pj-onyx-20); --pj-line-2:var(--pj-onyx-12); --pj-accent:var(--pj-crimson);
  --pj-sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --pj-serif:'Crimson Pro','Times New Roman',serif;
  --pj-wordmark:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --pj-display:var(--pj-serif); --pj-display-weight:300; --pj-text:var(--pj-sans);
  --pj-t-page:25px; --pj-t-panel:16.5px; --pj-t-row:13.5px; --pj-t-base:13px; --pj-t-sec:12.5px; --pj-t-strip:12px;
  --pj-t-count:11.5px; --pj-t-chip:11px; --pj-t-th:10px; --pj-t-grp:9.5px; --pj-tr-th:.09em; --pj-tr-grp:.15em;
  --pj-lh:1.45; --pj-lh-title:1.1;
  --pj-fs-d1:clamp(40px, 7.2cqi, 112px); --pj-fs-d2:clamp(32px, 5cqi, 76px); --pj-fs-d3:clamp(26px, 3.4cqi, 46px);
  --pj-fs-d4:clamp(22px, 2.6cqi, 34px); --pj-fs-lede:clamp(17px, 1.7cqi, 22px);
  --pj-fs-body:15px; --pj-fs-cap:13px; --pj-fs-label:11px; --pj-ls-label:.2em;
  /* radii are written as literals — 0, 2px (controls) and 50% (seals) — the only three that exist */
  --pj-ease:cubic-bezier(.22,.61,.36,1); --pj-dur-base:300ms;
  --pj-journey-w:1120px; --pj-gut:clamp(16px, 4vw, 48px);
  /* the room's rhythm: calm, generous space between chapters (the arrow swings across it) */
  --pj-sec-pad:clamp(48px, 8vw, 112px);
  --pj-rv-y:16px; --pj-rv-dur:700ms;
  --pj-sticky-h:0px;
}
@media (min-width: 900px){ :root{ --pj-sec-pad:clamp(72px, 8vw, 112px); } }

html{ background: var(--pj-bg); }
body.pj-body{ margin: 0; background: var(--pj-bg); color: var(--pj-ink); font: 300 var(--pj-fs-body)/1.6 var(--pj-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.pj-body *, .pj-body *::before, .pj-body *::after{ box-sizing: border-box; }
.pj-body ::selection{ background: var(--pj-bordeaux); color: var(--pj-linen); }
.pj-body :focus-visible{ outline: 2px solid var(--pj-crimson); outline-offset: 2px; }
:where(.pj-body) button{ font: inherit; color: inherit; cursor: pointer; }
:where(.pj-body) :where(p, figure, blockquote, dl, dd, ol, ul){ margin: 0; }
:where(.pj-body) :where(h1, h2, h3, h4, h5){ margin: 0; font-weight: 400; }
.pj-body img, .pj-body svg{ max-width: 100%; }
.pj-sr{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden]{ display: none !important; }

/* skip link, top bar, footer, noscript */
.pj-skip{ position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--pj-onyx); color: var(--pj-linen); font: 500 13px/1 var(--pj-sans); text-decoration: none; border-radius: 2px; }
.pj-skip:focus{ top: 12px; }
.pj-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 var(--pj-gut); border-bottom: 1px solid var(--pj-line-2); background: var(--pj-bg); }
.pj-wordmark{ font: 500 15.3px/1 var(--pj-wordmark); letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; color: var(--pj-onyx); white-space: nowrap; text-decoration: none; }
.pj-top-note{ font: 400 12.5px/1.3 var(--pj-sans); color: var(--pj-ink-3); }
.pj-foot{ display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; padding: 28px var(--pj-gut) calc(28px + var(--pj-sticky-h)); border-top: 1px solid var(--pj-line-2); font: 400 12.5px/1.5 var(--pj-sans); color: var(--pj-ink-3); }
.pj-foot a{ color: var(--pj-ink-2); }
.pj-noscript{ max-width: 640px; margin: 40px auto; padding: 0 var(--pj-gut); font: 400 15px/1.6 var(--pj-sans); color: var(--pj-ink-2); }

/* ── 1 · Layout ──────────────────────────────────────────────────────────── */
.pj-root{ container: pj / inline-size; position: relative; display: block; min-height: 60vh; outline: none; }
.pj-wrap{ width: 100%; max-width: calc(var(--pj-journey-w) + 2 * var(--pj-gut)); margin: 0 auto; padding-inline: var(--pj-gut); }
.pj-screen{ position: relative; padding-block: var(--pj-sec-pad); scroll-margin-top: 12px; }
.pj-screen + .pj-screen{ border-top: 1px solid var(--pj-line-2); }
.pj-grid{ display: grid; gap: clamp(16px, 2.4cqi, 32px); }
.pj-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj-cols-57{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pj-stack{ display: grid; gap: 16px; align-content: start; min-width: 0; }
.pj-row-flex{ display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pj-sp{ flex: 1; }
@container pj (max-width: 760px){ .pj-cols-2, .pj-cols-3, .pj-cols-57{ grid-template-columns: minmax(0, 1fr); } }

/* ── 2 · Display type ─────────────────────────────────────────────────────── */
.pj-d1, .pj-d2, .pj-d3, .pj-d4{ font-family: var(--pj-display); font-weight: var(--pj-display-weight); letter-spacing: -0.015em; color: var(--pj-ink); text-wrap: balance; }
.pj-d1{ font-size: var(--pj-fs-d1); line-height: 1.02; }
.pj-d2{ font-size: var(--pj-fs-d2); line-height: 1.04; }
.pj-d3{ font-size: var(--pj-fs-d3); line-height: 1.08; }
.pj-d4{ font-size: var(--pj-fs-d4); line-height: 1.12; letter-spacing: -0.005em; }
em.pj-turn{ font-style: italic; color: var(--pj-accent); }
.pj-eyebrow{ display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 var(--pj-fs-label)/1.3 var(--pj-sans); letter-spacing: var(--pj-ls-label); text-transform: uppercase; color: var(--pj-ink-3); }
.pj-eyebrow::before{ content: ""; flex: none; width: 22px; height: 1px; background: var(--pj-accent); }
.pj-lede{ font: 300 var(--pj-fs-lede)/1.5 var(--pj-display); color: var(--pj-ink-2); max-width: 60ch; }
.pj-body-t{ font: 300 var(--pj-fs-body)/1.6 var(--pj-text); color: var(--pj-ink-2); max-width: 64ch; }
.pj-cap{ font: 400 var(--pj-fs-cap)/1.5 var(--pj-sans); color: var(--pj-ink-3); }
.pj-label{ font: 500 var(--pj-fs-label)/1.3 var(--pj-sans); letter-spacing: var(--pj-ls-label); text-transform: uppercase; color: var(--pj-ink-3); }
.pj-h3{ font: 400 clamp(20px, 2cqi, 26px)/1.2 var(--pj-display); color: var(--pj-ink); }
.pj-sub-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: clamp(32px, 5cqi, 56px) 0 16px; padding-top: 16px; border-top: 1px solid var(--pj-line); }
.pj-sub-head .pj-cap{ flex: 1 1 260px; }

/* chapter head — set in the invitation's grammar (spaced small caps, a light line, the ornament) */
.pj-ch-head{ display: grid; gap: 12px; max-width: 820px; margin-bottom: clamp(28px, 4cqi, 48px); }
.pj-ch-kicker{ display: flex; align-items: center; gap: 12px; font: 500 var(--pj-fs-label)/1.3 var(--pj-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--pj-ink-3); }
.pj-ch-kicker b{ font: 300 clamp(24px, 2.6cqi, 34px)/1 var(--pj-display); letter-spacing: 0; color: var(--pl-lead, var(--pj-ink)); font-variant-numeric: lining-nums; }
.pj-ch-orn{ display: block; width: 88px; height: 22px; color: var(--pc-lead, var(--pj-ink-3)); }
.pj-ch-orn svg{ width: 100%; height: 100%; }
.pj-ch-tags{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-plan-tag{ display: inline-flex; align-items: center; min-height: 20px; padding: 4px 7px; border: 1px solid var(--pj-onyx-20); border-radius: 2px; background: var(--pj-band); font: 600 10px/1.3 var(--pj-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pj-onyx-78); }
.pj-margin{ max-width: 46ch; margin-top: clamp(24px, 3cqi, 40px); padding: 2px 0 2px 14px; border-left: 3px solid var(--pj-onyx-20); font: 400 12.5px/1.5 var(--pj-sans); color: var(--pj-ink-3); }
.pj-margin b{ display: block; margin-bottom: 2px; font-weight: 500; color: var(--pj-ink-2); }

/* ── 3 · Controls ─────────────────────────────────────────────────────────── */
.pj-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--pj-onyx-20); border-radius: 2px; background: var(--pj-paper); font: 400 14px/1.2 var(--pj-sans); color: var(--pj-onyx); white-space: nowrap; text-decoration: none; cursor: pointer; }
.pj-btn:hover{ border-color: var(--pj-onyx-62); }
.pj-btn--pri{ background: var(--pj-onyx); border-color: var(--pj-onyx); color: var(--pj-linen); }
.pj-btn--pri:hover{ background: var(--pj-onyx-hover); border-color: var(--pj-onyx-hover); }
.pj-btn--lnk{ border-color: transparent; background: transparent; padding: 0 4px; color: var(--pj-bordeaux); text-decoration: underline; text-underline-offset: 3px; }
.pj-btn--lnk:hover{ border-color: transparent; color: var(--pj-onyx); }
.pj-btn--lg{ min-height: 48px; padding: 0 22px; font-size: 15px; }
.pj-btn[disabled], .pj-btn[aria-disabled="true"]{ opacity: .45; cursor: not-allowed; }
.pj-chip{ display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pj-onyx-20); border-radius: 2px; background: var(--pj-paper); font: 400 var(--pj-t-row)/1 var(--pj-sans); color: var(--pj-onyx-78); white-space: nowrap; }
.pj-chip[aria-pressed="true"]{ border-color: var(--pj-approve); color: var(--pj-approve); background: color-mix(in srgb, var(--pj-approve) 6%, var(--pj-paper)); }
@media (hover: hover) and (pointer: fine){
  .pj-btn{ min-height: 36px; padding: 0 13px; font-size: 13px; }
  .pj-btn--lg{ min-height: 46px; padding: 0 20px; font-size: 14.5px; }
  .pj-btn--lnk{ padding: 0 4px; }
  .pj-chip{ min-height: 34px; }
}
@container pj (max-width: 640px){ .pj-btn, .pj-chip{ min-height: 44px; } }
.pj-pill{ display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; border-radius: 2px; font: 500 var(--pj-t-chip)/1 var(--pj-sans); white-space: nowrap; color: var(--pj-onyx-62); background: var(--pj-onyx-12); }
.pj-pill--done{ color: var(--pj-approve); background: color-mix(in srgb, var(--pj-approve) 12%, var(--pj-paper)); }
.pj-pill--no{ color: var(--pj-revise); background: color-mix(in srgb, var(--pj-revise) 10%, var(--pj-paper)); }
.pj-pill--us{ color: var(--pj-onyx-78); background: var(--pj-band); }
.pj-pill--ex{ color: var(--pj-onyx-62); background: transparent; border: 1px dashed var(--pj-onyx-34); height: 18px; }
.pj-field{ display: grid; gap: 6px; min-width: 0; }
.pj-fl{ font: 500 12.5px/1.4 var(--pj-sans); color: var(--pj-ink-2); }
.pj-in{ width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--pj-onyx-20); border-radius: 2px; background: var(--pj-paper); font: 400 16px/1.3 var(--pj-sans); color: var(--pj-onyx); }
.pj-in::placeholder{ color: color-mix(in srgb, var(--pj-onyx) 52%, transparent); }
.pj-in:hover{ border-color: var(--pj-onyx-62); }
.pj-in:focus-visible{ outline: 2px solid var(--pj-crimson); outline-offset: 3px; border-color: var(--pj-crimson); }
.pj-hint{ font: 400 12.5px/1.45 var(--pj-sans); color: var(--pj-ink-3); }
.pj-err{ min-height: 1.45em; font: 500 13px/1.45 var(--pj-sans); color: var(--pj-crimson); }
.pj-honey{ position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 4 · The brief (mobile-first: one question per screen) ─────────────────── */
/* one vertical flow: answered lines above, the open question as one screen-height block */
.pj-brief{ padding-block: clamp(28px, 6vw, 72px) clamp(40px, 8vw, 96px); }
.pj-brief > .pj-wrap{ width: 100%; max-width: calc(820px + 2 * var(--pj-gut)); }
.pj-brief-intro{ margin-bottom: 20px; }
.pj-brief-intro .pj-cap{ max-width: 52ch; }
.pj-brief-q{ max-width: 22ch; outline: none; font-weight: 300; font-size: clamp(28px, 4.2cqi, 46px); }
.pj-brief-hint{ margin-top: 10px; }
.pj-brief-body{ margin-top: clamp(20px, 3.4cqi, 36px); }
.pj-choices{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.pj-choices--feel{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.pj-choice{ position: relative; display: grid; align-content: start; gap: 4px; min-height: 56px; padding: 14px 40px 14px 16px; text-align: left; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); border-radius: 2px; font: 400 15px/1.35 var(--pj-sans); color: var(--pj-ink); }
.pj-choice:hover{ border-color: var(--pj-onyx-62); }
.pj-choice[aria-pressed="true"]{ border-color: var(--pj-approve); background: color-mix(in srgb, var(--pj-approve) 6%, var(--pj-paper)); }
.pj-choice[aria-pressed="true"]::after{ content: "✓"; position: absolute; top: 14px; right: 14px; font: 600 13px/1 var(--pj-sans); color: var(--pj-approve); }
.pj-choice-t{ font: 400 19px/1.2 var(--pj-serif); color: var(--pj-ink); }
.pj-choice-s{ font: 400 12.5px/1.45 var(--pj-sans); color: var(--pj-ink-3); }
.pj-brief-fields{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); max-width: 640px; }
.pj-brief-or{ margin: 18px 0 10px; }
.pj-brief-nav{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(20px, 3.4cqi, 36px); }
.pj-saved{ font: 400 12.5px/1.4 var(--pj-sans); color: var(--pj-ink-3); }
.pj-saved[data-state="saved"]{ color: var(--pj-approve); }
.pj-saved[data-state="error"]{ color: var(--pj-amber); }
.pj-consent{ margin-top: 14px; max-width: 54ch; }
.pj-brief-done{ list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--pj-line); }
.pj-brief-line{ border-bottom: 1px solid var(--pj-line-2); }
.pj-brief-line-b{ display: grid; grid-template-columns: 26px minmax(90px, auto) minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: transparent; text-align: left; }
.pj-brief-line-n{ font: 500 10.5px/1 var(--pj-sans); font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--pj-ink-3); }
.pj-brief-line-k{ font: 500 10.5px/1.2 var(--pj-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pj-ink-3); }
.pj-brief-line-v{ min-width: 0; font: 300 17px/1.3 var(--pj-display); color: var(--pj-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-brief-line-c{ font: 400 12.5px/1 var(--pj-sans); color: var(--pj-bordeaux); text-decoration: underline; text-underline-offset: 3px; }
.pj-brief-line-b:hover .pj-brief-line-c{ color: var(--pj-onyx); }
@container pj (max-width: 520px){ .pj-brief-line-b{ grid-template-columns: 22px minmax(0, 1fr) auto; } .pj-brief-line-k{ display: none; } }
.pj-brief-block{ min-height: min(720px, calc(100svh - 120px)); padding-top: clamp(20px, 3cqi, 36px); scroll-margin-top: 16px; }
.pj-brief-block.is-new{ animation: pj-reveal var(--dur-considered,500ms) var(--pj-ease) both; }
@keyframes pj-reveal{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }

/* the folio: eight numbered cells — the brief's progress, then the header of the event */
.pj-folio{ list-style: none; margin: 0 0 clamp(24px, 4cqi, 44px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pj-ink); }
.pj-folio-cell{ display: grid; grid-template-rows: auto auto 1fr; gap: 4px; min-width: 0; padding: 10px 12px 14px 0; border-bottom: 1px solid var(--pj-line); }
.pj-folio-cell + .pj-folio-cell{ padding-left: 12px; border-left: 1px solid var(--pj-line-2); }
.pj-folio-cell:nth-child(4n+1){ padding-left: 0; border-left: 0; }
.pj-folio-n{ font: 500 10.5px/1 var(--pj-sans); font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--pj-ink-3); }
.pj-folio-k{ font: 500 10.5px/1.2 var(--pj-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pj-ink-3); }
.pj-folio-v{ min-height: 1.3em; font: 300 clamp(17px, 1.9cqi, 24px)/1.2 var(--pj-display); color: var(--pj-onyx-34); overflow-wrap: anywhere; }
.pj-folio-cell.is-on .pj-folio-v{ color: var(--pj-ink); }
.pj-folio-cell.is-cur{ border-bottom-color: var(--pj-ink); }
.pj-folio-cell.is-cur .pj-folio-n{ color: var(--pj-accent); }
.pj-folio.is-done{ margin-bottom: 0; border-top-color: var(--pj-line); }
/* once sent, the folio is small: one line per answer */
.pj-folio.is-done .pj-folio-cell{ display: flex; align-items: baseline; gap: 8px; padding-block: 7px; }
.pj-folio.is-done .pj-folio-n{ display: none; }
.pj-folio.is-done .pj-folio-k{ flex: none; font-size: 9.5px; }
.pj-folio.is-done .pj-folio-v{ min-width: 0; font: 400 13.5px/1.35 var(--pj-sans); color: var(--pj-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container pj (max-width: 760px){
  .pj-folio{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-folio-cell:nth-child(4n+1){ padding-left: 12px; border-left: 1px solid var(--pj-line-2); }
  .pj-folio-cell:nth-child(2n+1){ padding-left: 0; border-left: 0; }
}
/* on a phone the brief's folio is a slim progress rule, not eight cells */
@container pj (max-width: 520px){
  .pj-brief .pj-folio{ display: none; }
  .pj-brief .pj-progress{ display: flex; }
}
.pj-progress{ display: none; align-items: center; gap: 12px; margin-bottom: 22px; font: 500 12.5px/1 var(--pj-sans); font-variant-numeric: tabular-nums; color: var(--pj-ink-2); }
.pj-progress-rule{ flex: 1; height: 1px; background: var(--pj-line); position: relative; }
.pj-progress-rule i{ position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: left center; transform: scaleX(var(--p, 0)); background: var(--pj-ink); transition: transform var(--pj-dur-base) var(--pj-ease); }
.pj-folio.pj-settle .pj-folio-cell{ animation: pj-settle var(--dur-considered,500ms) var(--pj-ease) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes pj-settle{ from{ opacity: 0; } to{ opacity: 1; } }
.pj-folio-screen{ padding-block: clamp(18px, 3cqi, 32px) 0; }
.pj-folio-screen + .pj-screen{ border-top: 0; }
.pj-folio-foot{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 10px; }

/* ── 5 · #journey, the plates of light, the opening (the room), the arrow ──── */
.pj-journey{ position: relative; --pl-ground:#F3EEE4; --pl-second:#B08D5B; --pl-lead:#5B6B3F; }
/* a plate: linen until its sentinel crosses the middle of the view, then the style's ground
   crossfades in with one very soft pool of its second colour (≤ 6 %). Opacity only. */
.pj-plate{ isolation: isolate; }
.pj-plate::before, .pj-plate::after{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--dur-considered,500ms) var(--pj-ease); }
.pj-plate::before{ background-color: var(--pl-ground); }
/* the pool: one soft ellipse of the second colour at 6 %, softened by blur — light, not a gradient */
.pj-plate{ overflow: clip; }
.pj-plate::after{ inset: 4% 4% auto auto; width: 58%; height: 72%; border-radius: 50%; background-color: color-mix(in srgb, var(--pl-second) 6%, transparent); filter: blur(72px); }
.pj-plate.is-lit::before, .pj-plate.is-lit::after{ opacity: 1; }
.pj-sentinel{ position: absolute; inset: 14% 0; pointer-events: none; visibility: hidden; }
.pj-screen.pj-plate + .pj-screen, .pj-screen + .pj-screen.pj-plate{ border-top-color: transparent; }
/* the one arrow, over the lanes beside the content */
.pj-flow{ position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: var(--pl-lead); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pj-flow path{ vector-effect: non-scaling-stroke; }
.pj-flow-head{ opacity: 0; transition: opacity 300ms var(--pj-ease); }
.pj-flow-head.is-on{ opacity: 1; }
/* portrait phones: a 24 px lane on the left for the arrow */
@media (max-width: 640px){ .pj-journey .pj-wrap{ padding-left: 28px; } }

.pj-opening{ padding-top: clamp(40px, 6vw, 88px); }
.pj-open-head{ display: grid; gap: 0; }
.pj-open-title{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: end; }
.pj-open-title h1{ font-family: var(--pj-display); font-weight: 200; font-size: var(--pj-fs-d1); line-height: .98; letter-spacing: -0.02em; color: var(--pj-ink); max-width: 14ch; text-wrap: balance; }
.pj-monogram{ display: inline-flex; align-items: center; justify-content: center; width: clamp(68px, 9cqi, 112px); aspect-ratio: 1; border: 1px solid var(--pj-ink); border-radius: 50%; font: italic 200 clamp(22px, 3cqi, 38px)/1 var(--pj-display); letter-spacing: .02em; color: var(--pj-ink); }
.pj-open-meta{ display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; font: 300 var(--pj-fs-lede)/1.4 var(--pj-display); color: var(--pj-ink); }
.pj-open-meta span + span{ padding-left: 18px; border-left: 1px solid var(--pj-line); }
.pj-flow-start{ height: clamp(56px, 7cqi, 88px); }
.pj-open-line{ margin-top: clamp(28px, 4cqi, 48px); max-width: 60ch; }
@container pj (max-width: 640px){
  .pj-open-title{ grid-template-columns: minmax(0, 1fr); }
  .pj-open-title .pj-monogram{ order: -1; }
  .pj-open-meta{ flex-direction: column; gap: 2px; }
  .pj-open-meta span + span{ padding-left: 0; border-left: 0; }
}
/* the room: the day-of pieces as one table scene */
.pj-room{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3.4cqi, 44px) clamp(16px, 2.4cqi, 32px); align-items: start;
  grid-template-areas: "sign sign sign sign menu menu ordr ordr invi invi invi invi" "sign sign sign sign tabl tabl tabl tabl invi invi invi invi" "plac plac plac plac plac plac plac plac plac plac . ."; }
.pj-room-p{ min-width: 0; margin: 0; }
.pj-room-p--sign{ grid-area: sign; }
.pj-room-p--menu{ grid-area: menu; }
.pj-room-p--order{ grid-area: ordr; }
.pj-room-p--invite{ grid-area: invi; }
.pj-room-p--tables{ grid-area: tabl; }
.pj-room-p--place{ grid-area: plac; }
.pj-room-p .jp-piece, .pj-room-p .pj-piece{ margin-inline: auto; }
.pj-room-p--tables .jp-set--many{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj-room-p--invite .jp-piece, .pj-room-p--invite .pj-piece{ max-width: 380px; }
.pj-room-cap{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 10px; font: 400 12px/1.4 var(--pj-sans); color: var(--pj-ink-3); }
.pj-room-cap b{ font-weight: 500; color: var(--pj-ink-2); }
@container pj (max-width: 760px){
  .pj-room{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sign sign" "menu ordr" "invi invi" "tabl tabl" "plac plac"; }
  .pj-room-p--sign .jp-piece, .pj-room-p--sign .pj-piece{ max-width: 340px; }
  .pj-room-p--invite .jp-piece, .pj-room-p--invite .pj-piece{ max-width: 320px; }
}

/* ── 5b · The overview: the six chapters on one screen (3 × 2 desktop, 2 × 3 phone) ──
   Linen, hairlines, radii 0. The rows are sized from the view's height so the whole grid is seen
   without scrolling; each tile is one button whose ::after covers the tile (a stretched target), so
   the focus ring draws round the whole tile. Thumbnails: pieces sized from the well's height (the
   renderer scales them by container width), the other screens drawn at their own size and scaled
   with transform. */
.pj-overview{ padding-top: clamp(32px, 4vw, 56px); }
.pj-ov-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 24px; margin-bottom: clamp(14px, 1.8cqi, 22px); }
.pj-ov-head .pj-eyebrow{ margin-bottom: 10px; }
.pj-ov-lede{ margin: 0 0 4px; }
.pj-ov-grid{ --ov-h: clamp(190px, calc((100svh - 290px) / 2), 300px); --ov-k: .7;
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--ov-h); gap: 12px; }
.pj-ov-tile{ position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; min-width: 0; min-height: 0; overflow: hidden; padding: 14px 14px 12px; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); border-radius: 0; transition: border-color var(--pj-dur-base) var(--pj-ease); }
.pj-ov-h{ margin: 0; font: inherit; }
.pj-ov-go{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; color: var(--pj-ink); }
.pj-ov-go::after{ content: ""; position: absolute; inset: 0; z-index: 1; }
.pj-body .pj-ov-go:focus-visible{ outline: none; }
.pj-ov-go:focus-visible::after{ outline: 2px solid var(--pj-crimson); outline-offset: -3px; }
.pj-ov-n{ font: 300 26px/1 var(--pj-display); font-variant-numeric: lining-nums; color: var(--pl-lead-t, var(--pj-ink-2)); }
.pj-ov-name{ font: 400 clamp(18px, 1.9cqi, 24px)/1.1 var(--pj-display); color: var(--pj-ink); }
.pj-ov-more{ font: 500 10.5px/1 var(--pj-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--pj-ink-3); transition: color var(--pj-dur-base) var(--pj-ease); }
.pj-ov-tile:hover{ border-color: var(--pj-onyx-62); }
.pj-ov-tile:hover .pj-ov-more{ color: var(--pj-ink); }
.pj-ov-fact{ font: 400 12.5px/1.4 var(--pj-sans); color: var(--pj-ink-2); }
.pj-ov-fact [data-count]{ font-weight: 500; color: var(--pj-ink); font-variant-numeric: lining-nums tabular-nums; }
.pj-ov-thumb{ container: ovt / size; position: relative; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.2cqi, 16px); background-color: var(--pl-ground); border: 1px solid var(--pj-line-2); }
.pj-ov-thumb > [data-frag]{ display: contents; }
/* pieces: height-led, so the well never crops them */
.pj-ov-p{ flex: none; width: min(60cqh, 30cqw); }
.pj-ov-p--sign{ width: min(56cqh, 30cqw); }
.pj-ov-p--menu{ width: min(38cqh, 24cqw); }
.pj-ov-p--place, .pj-ov-p--landscape, .pj-ov-p--envelope{ width: min(112cqh, 34cqw); }
.pj-ov-p .jp-piece, .pj-ov-p .pj-piece{ width: 100%; max-width: none; margin: 0; }
.pj-ov-sw{ display: grid; gap: 4px; }
.pj-ov-sw i{ display: block; width: 14px; height: 14px; border: 1px solid var(--pj-line); }
/* screens: drawn at their own width, scaled with transform */
.pj-ov-stage{ flex: none; width: var(--ov-w, 300px); transform: scale(var(--ov-k)); transform-origin: center; }
.pj-ov-phone{ --ov-w: 210px; align-self: flex-start; margin-top: 9cqh; transform-origin: top center; padding: 6px; background: var(--pj-paper); border: 1px solid var(--pj-onyx-34); border-radius: 2px; }
.pj-ov-phone .pj-site{ min-height: 300px; }
.pj-ov-phone .pj-site-wrap{ padding: 22px 16px; }
.pj-ov-phone .pj-site-h{ font-size: 22px; }
.pj-ov-secs{ list-style: none; margin: 14px 0 0; padding: 0; font-size: 12px; }
.pj-ov-secs li{ padding: 6px 0; border-top: 1px solid var(--s-line); }
.pj-ov-rows{ display: grid; gap: 6px; }
.pj-ov-convo .pj-bubbles{ margin: 0; }
.pj-ov-convo .pj-bubble{ max-width: 92%; }
.pj-ov-door{ --ov-w: 240px; min-height: 0; padding: 10px; border: 1px solid var(--pj-line-2); }
.pj-ov-hint{ margin-top: 12px; font: 400 var(--pj-fs-cap)/1.4 var(--pj-sans); color: var(--pj-ink-3); }
@container pj (max-width: 1000px){ .pj-ov-grid{ --ov-k: .56; } }
@container pj (max-width: 700px){
  .pj-ov-grid{ --ov-h: clamp(150px, calc((100svh - 300px) / 3), 230px); --ov-k: .42; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pj-ov-tile{ gap: 4px; padding: 10px 10px 9px; }
  .pj-ov-go{ grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 7px; }
  .pj-ov-n{ font-size: 20px; }
  .pj-ov-name{ font-size: 16px; }
  .pj-ov-more-t{ display: none; }
  .pj-ov-fact{ font-size: 11.5px; line-height: 1.35; }
  .pj-ov-sw i{ width: 10px; height: 10px; }
  .pj-ov-hint{ margin-top: 10px; }
}

/* ── 6 · Chapter tops, side notes and the beats (prepared · decide · moves), all quiet ── */
.pj-ch-top{ display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(20px, 4cqi, 64px); align-items: start; margin-bottom: clamp(32px, 5cqi, 64px); }
.pj-ch-top .pj-ch-head{ margin-bottom: 0; }
.pj-ch-notes{ display: grid; gap: 14px; align-content: start; padding-top: 6px; }
.pj-ch-notes .pj-margin{ margin-top: 0; }
@container pj (max-width: 860px){ .pj-ch-top{ grid-template-columns: minmax(0, 1fr); } }
.pj-side{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 10.5px/1.3 var(--pj-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pj-ink-3); }
.pj-side::before{ content: ""; flex: none; width: 14px; height: 1px; background: currentColor; opacity: .6; }
.pj-side-col{ display: grid; gap: 14px; align-content: start; min-width: 0; font: 400 13px/1.55 var(--pj-sans); color: var(--pj-ink-3); }
.pj-side-col > p:not([class]){ max-width: 46ch; }
.pj-quiet{ margin-top: clamp(40px, 6cqi, 72px); }
.pj-quiet-cap{ margin: -4px 0 14px; max-width: 64ch; }
.pj-beats{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pj-beat{ display: grid; gap: 2px; min-width: 0; }
.pj-beat-k{ display: flex; align-items: center; gap: 6px; font: 500 10px/1.2 var(--pj-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pj-ink-3); }
.pj-beat-k i{ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--pj-line); border-radius: 50%; font: 500 9.5px/1 var(--pj-sans); font-style: normal; letter-spacing: 0; color: var(--pj-ink-3); }
.pj-beat-t{ font: 400 12.5px/1.45 var(--pj-sans); color: var(--pj-ink-3); }
.pj-beat-acts{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pj-beat-acts .pj-btn{ min-height: 32px; padding: 0 10px; font-size: 12.5px; background: transparent; }
.pj-beat.is-moved .pj-beat-k i{ border-color: var(--pj-approve); color: var(--pj-approve); }
.pj-beat-note{ font: 500 12.5px/1.4 var(--pj-sans); color: var(--pj-approve); }
@container pj (max-width: 640px){ .pj-beat-acts .pj-btn{ min-height: 44px; } }

/* ── 7 · Chapter 1 · the world ─────────────────────────────────────────────── */
.pj-vision-text{ font: 300 clamp(20px, 2.3cqi, 28px)/1.45 var(--pj-display); color: var(--pj-ink); text-wrap: pretty; }
.pj-vision{ max-width: 900px; margin-bottom: clamp(32px, 5cqi, 64px); }
.pj-vision .pj-vision-text{ max-width: 34ch; font-size: clamp(24px, 3.1cqi, 40px); line-height: 1.32; }
.pj-vision .pj-cap{ margin-top: 14px; max-width: 56ch; }
.pj-w{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 3cqi, 40px); align-items: stretch; }
.pj-w-plate{ display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: clamp(18px, 2.4cqi, 28px); min-height: 260px; background: var(--pc-ground); color: var(--pc-ink); border: 1px solid var(--pj-line); }
.pj-w-plate .pj-plate-type{ align-self: end; }
@container pj (max-width: 760px){ .pj-w{ grid-template-columns: minmax(0, 1fr); } }
.pj-kv{ display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font: 400 14px/1.45 var(--pj-sans); }
.pj-kv dt{ color: var(--pj-onyx-62); }
.pj-kv dd{ margin: 0; color: var(--pj-onyx); }
.pj-world-mono{ display: grid; justify-items: center; align-content: center; justify-self: start; gap: 8px; padding: 14px; background: var(--pc-ground); border: 1px solid var(--pj-line); }
.pj-world-mono .pj-cap{ max-width: 12ch; text-align: center; font-size: 11.5px; color: var(--pc-ink); }
.pj-swatches{ display: flex; }
.pj-sw{ width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--pc-ink) 18%, transparent); }
.pj-sw + .pj-sw{ border-left: 0; }
.pj-plate-type{ font-family: var(--pc-display); font-weight: var(--pc-wt); font-size: clamp(26px, 3cqi, 38px); line-height: 1.05; }
.pj-plate-cap{ font: 500 11px/1.3 var(--pc-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }

/* ── 8 · Stationery pieces (the built-in renderer; STYLES' JourneyPieces replaces it when loaded) ── */
.pj-piece{
  --pc-ground:#F3EEE4; --pc-ink:#2A2622; --pc-lead:#5B6B3F; --pc-second:#B08D5B;
  --pc-display:var(--pj-serif); --pc-sans:var(--pj-sans); --pc-wt:300; --pc-style:normal; --pc-opsz:120;
  container: piece / inline-size; position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; overflow: hidden;
  background-color: var(--pc-ground); color: var(--pc-ink); border: 1px solid color-mix(in srgb, var(--pc-ink) 14%, transparent);
  font-family: var(--pc-sans); text-align: center; isolation: isolate; margin: 0;
}
.pj-piece--landscape, .pj-piece--envelope{ aspect-ratio: 7 / 5; }
.pj-piece--menu{ aspect-ratio: 4 / 9; }
.pj-piece--place{ aspect-ratio: 3.5 / 2; }
.pj-piece--sign{ aspect-ratio: 2 / 3; }
.pj-piece--tag{ aspect-ratio: 2 / 3.4; }
.pj-piece--square{ aspect-ratio: 1 / 1; }
.pj-pi{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqi; padding: 9cqi 8cqi; }
.pj-pd{ font-family: var(--pc-display); font-weight: var(--pc-wt); font-style: var(--pc-style); font-variation-settings: 'opsz' var(--pc-opsz); line-height: 1.02; letter-spacing: -0.01em; }
.pj-ps{ font: 500 2.7cqi/1.4 var(--pc-sans); letter-spacing: .24em; text-transform: uppercase; }
.pj-pt{ font-family: var(--pc-display); font-weight: 300; font-style: italic; font-size: 3.9cqi; line-height: 1.35; }
.pj-lead{ color: var(--pc-lead); }
.pj-orn{ width: 24cqi; height: auto; color: var(--pc-lead); }
.pj-mono{ display: inline-flex; align-items: center; justify-content: center; width: 15cqi; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--pc-lead) 70%, transparent); border-radius: 50%; font-family: var(--pc-display); font-style: italic; font-weight: 300; font-size: 5cqi; line-height: 1; color: var(--pc-lead); }
.pj-wm{ position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) rotate(-32deg); font: 600 9cqi/1 var(--pj-sans); letter-spacing: .4em; text-transform: uppercase; color: var(--pc-ink); opacity: .07; pointer-events: none; white-space: nowrap; }
.pj-fold{ position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in srgb, var(--pc-ink) 22%, transparent); }
.pj-env-flap{ position: absolute; inset: 0 0 38% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--pc-lead); }
.pj-qr{ width: 60cqi; aspect-ratio: 1; color: var(--pc-ink); }
.pj-piece-cap{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; font: 400 12.5px/1.4 var(--pj-sans); color: var(--pj-ink-3); }
.pj-piece-cap b{ font-weight: 500; color: var(--pj-ink); }
.pj-lvl{ display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid var(--pj-line); border-radius: 2px; font: 500 10.5px/1 var(--pj-sans); color: var(--pj-ink-2); background: var(--pj-paper); }
.pj-lvl--guest{ border-color: color-mix(in srgb, var(--pj-bordeaux) 40%, transparent); color: var(--pj-bordeaux); }
.pj-lvl--table{ border-color: color-mix(in srgb, var(--pj-approve) 45%, transparent); color: var(--pj-approve); }
.pj-piece-open{ padding: 0; min-height: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* chapter 2: the pieces in full, the day-of pieces first (placed by role, packed densely) */
.pj-hero-pieces{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(28px, 4cqi, 48px) clamp(16px, 2.4cqi, 32px); align-items: start; }
.pj-hp{ min-width: 0; margin: 0; grid-column: span 4; }
.pj-hp--welcome_signage{ grid-column: span 5; grid-row: span 2; }
.pj-hp--menu_card, .pj-hp--order_of_evening{ grid-column: span 3; }
.pj-hp--table_numbers{ grid-column: span 4; }
.pj-hp--place_card{ grid-column: span 7; }
.pj-hp--invitation{ grid-column: span 4; }
.pj-hp--save_the_date{ grid-column: span 5; }
.pj-hp .jp-piece, .pj-hp .pj-piece{ margin-inline: auto; }
.pj-hp--menu_card .jp-piece, .pj-hp--order_of_evening .jp-piece, .pj-hp--menu_card .pj-piece, .pj-hp--order_of_evening .pj-piece{ max-width: 240px; }
.pj-set{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pj-set--tables{ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-width: 720px; }
@container pj (max-width: 760px){
  .pj-hero-pieces{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-hp[class]{ grid-column: 1 / -1; grid-row: auto; }
  .pj-hp.pj-hp--menu_card, .pj-hp.pj-hp--order_of_evening{ grid-column: span 1; }
  .pj-hp .pj-piece:not(.pj-piece--place), .pj-hp .jp-piece{ max-width: 340px; }
}

/* the 44: six shown, "Show all 44" opens the rest, grouped by category */
.pj-grid44{ display: grid; gap: 22px; }
.pj-cat-h{ display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--pj-line); }
.pj-cat-h h4{ font: 400 17px/1.2 var(--pj-serif); color: var(--pj-ink); }
.pj-cat-h span{ font: 400 12px/1 var(--pj-sans); font-variant-numeric: tabular-nums; color: var(--pj-ink-3); }
.pj-tiles44{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.pj-ptile{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: start; min-height: 64px; padding: 10px 12px; text-align: left; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); border-radius: 0; font: 400 13px/1.35 var(--pj-sans); color: var(--pj-ink); }
.pj-ptile:hover{ border-color: var(--pj-onyx-62); }
.pj-ptile-shape{ grid-row: 1 / span 2; width: 18px; height: 24px; margin-top: 2px; border: 1px solid color-mix(in srgb, var(--pc-lead, var(--pj-ink)) 55%, transparent); background: var(--pc-ground, var(--pj-wash)); }
.pj-ptile-shape[data-shape="landscape"], .pj-ptile-shape[data-shape="envelope"]{ width: 22px; height: 16px; margin-top: 5px; }
.pj-ptile-shape[data-shape="place"]{ width: 22px; height: 13px; margin-top: 6px; }
.pj-ptile-shape[data-shape="menu"]{ width: 11px; height: 24px; }
.pj-ptile-shape[data-shape="square"]{ width: 18px; height: 18px; margin-top: 4px; }
.pj-ptile-n{ font-weight: 500; }
.pj-ptile-m{ display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 11.5px; color: var(--pj-ink-3); }
.pj-ptile[data-offered="false"]{ background: transparent; border-style: dashed; color: var(--pj-ink-3); }
.pj-ptile[data-offered="false"] .pj-ptile-n{ font-weight: 400; color: var(--pj-ink-2); }
.pj-ptile[data-offered="false"] .pj-ptile-shape{ opacity: .45; }
.pj-showall{ margin-top: 14px; }

/* piece dialog */
.pj-dialog{ width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--pj-onyx-20); border-radius: 0; background: var(--pj-paper); color: var(--pj-onyx); }
.pj-dialog::backdrop{ background: rgba(20,20,20,.42); }
.pj-dialog-in{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 22px; font: 400 13.5px/1.5 var(--pj-sans); }
.pj-dialog-art{ display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--pj-linen); min-height: 260px; }
.pj-dialog-art .pj-piece{ max-width: 300px; }
.pj-dialog-art .pj-piece--landscape, .pj-dialog-art .pj-piece--envelope, .pj-dialog-art .pj-piece--place{ max-width: 360px; }
.pj-dialog-art .pj-piece--menu{ max-width: 190px; }
.pj-dialog h3{ font: 400 25px/1.1 var(--pj-serif); margin-bottom: 6px; }
.pj-dialog ul{ margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 640px){ .pj-dialog-in{ grid-template-columns: minmax(0, 1fr); } }

/* ── 9 · The sync control ─────────────────────────────────────────────────── */
.pj-sync{ margin-top: clamp(40px, 6cqi, 72px); padding: clamp(18px, 3cqi, 30px); background: var(--pj-paper); border: 1px solid var(--pj-line); scroll-margin-top: 12px; }
.pj-sync-line{ margin: 6px 0 16px; }
.pj-sync-ctls{ display: flex; flex-wrap: wrap; gap: 10px; }
.pj-sync-ctl{ display: grid; gap: 3px; min-width: min(100%, 220px); min-height: 60px; padding: 10px 44px 10px 14px; position: relative; text-align: left; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); border-radius: 2px; }
.pj-sync-ctl:hover{ border-color: var(--pj-onyx-62); }
.pj-sync-ctl::after{ content: "↻"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 400 16px/1 var(--pj-sans); color: var(--pj-ink-3); }
.pj-sync-k{ font: 600 10px/1 var(--pj-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pj-ink-3); }
.pj-sync-v{ font: 400 15px/1.25 var(--pj-sans); color: var(--pj-ink); }
.pj-sync-log{ margin-top: 14px; font: 400 13px/1.5 var(--pj-sans); color: var(--pj-ink-2); min-height: 1.5em; }
.pj-sync-log b{ font-weight: 500; color: var(--pj-ink); }
[data-frag]{ display: contents; }
.pj-changed{ animation: pj-changed 900ms var(--pj-ease) 1; }
@keyframes pj-changed{ 0%{ outline: 2px solid var(--pj-crimson); outline-offset: 3px; } 100%{ outline: 2px solid transparent; outline-offset: 3px; } }

/* ── 10 · Phone frame (the real event-hub.html renderer inside) ─────────────── */
.pj-phone{ position: relative; width: 100%; max-width: 390px; margin-inline: auto; padding: 10px; background: var(--pj-onyx); border-radius: 2px; }
.pj-phone-screen{ position: relative; height: var(--pj-phone-h, 680px); overflow-y: auto; overscroll-behavior: contain; border-radius: 2px; background: #FBF7EF; scrollbar-width: thin; }
.pj-phone--short .pj-phone-screen{ --pj-phone-h: 540px; }
.pj-phone-notch{ position: absolute; top: 10px; left: 50%; z-index: 3; width: 34%; height: 14px; transform: translateX(-50%); background: var(--pj-onyx); border-radius: 0 0 2px 2px; }
.pj-hub-frame{ display: block; width: 100%; height: 100%; border: 0; background: #FBF7EF; }
@container pj (max-width: 480px){ .pj-phone{ padding: 7px; } .pj-phone-screen{ --pj-phone-h: 580px; } }
.pj-site{ --s-accent:#5B6B3F; --s-accent-2:#B08D5B; --s-text:#1E0B0E; --s-muted:#265450; --s-bg:#FBF7EF; --s-line:rgba(30,11,14,.12); --s-head:var(--pj-serif); --s-label:var(--pj-wordmark); background: var(--s-bg); color: var(--s-text); font: 300 14px/1.7 var(--s-label); text-align: left; }
.pj-site-wrap{ padding: 30px 20px 30px; }
.pj-site-eyebrow{ font: 400 10.5px/1.4 var(--s-label); letter-spacing: .28em; text-transform: uppercase; color: var(--s-muted); }
.pj-site-h{ margin: 6px 0 4px; font: 400 26px/1.2 var(--s-head); color: var(--s-text); }
.pj-site-meta{ font-size: 13px; color: var(--s-muted); }
.pj-site-foot{ margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--s-line); text-align: center; font-size: 11.5px; color: var(--s-muted); letter-spacing: .06em; }
/* chapter 3: the phone at the centre on a light plate, notes either side */
.pj-site-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px) minmax(0, 1fr); gap: clamp(20px, 3.4cqi, 48px); align-items: start; }
.pj-plate-panel{ padding: clamp(16px, 2.4cqi, 20px); background-color: var(--pl-ground); border: 1px solid var(--pj-line-2); }
@container pj (max-width: 900px){ .pj-site-row{ grid-template-columns: minmax(0, 1fr); } .pj-site-phone{ order: -1; } }
.pj-support{ list-style: none; margin: 0; padding: 0; font: 400 13px/1.45 var(--pj-sans); }
.pj-support li{ display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--pj-line-2); color: var(--pj-ink-2); }
.pj-support li::before{ content: "·"; flex: none; width: 14px; color: var(--pj-ink-3); text-align: center; }
.pj-support li.is-on::before{ content: "✓"; color: var(--pj-approve); font-weight: 600; }
.pj-support small{ margin-left: auto; font-size: 11.5px; color: var(--pj-ink-3); white-space: nowrap; }

/* ── 11 · Portal one format (guests) ─────────────────────────────────────── */
.pj-portal{ display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--pj-line); background: var(--pj-linen); font: 400 var(--pj-t-base)/var(--pj-lh) var(--pj-sans); color: var(--pj-onyx); min-width: 0; }
.pj-pbar{ grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--pj-onyx-12); }
.pj-pbar .pj-wordmark{ font-size: 13px; }
.pj-evchip{ margin-left: auto; font-size: var(--pj-t-sec); color: var(--pj-onyx-78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-evchip b{ font-weight: 500; color: var(--pj-onyx); }
.pj-strip{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; padding: 7px 16px; border-bottom: 1px solid var(--pj-onyx-12); font-size: 13px; line-height: 1.5; color: var(--pj-onyx-62); }
.pj-strip > span{ display: inline-flex; align-items: baseline; gap: 4px; padding: 0 10px; border-left: 1px solid var(--pj-onyx-20); white-space: nowrap; }
.pj-strip > span:first-child{ padding-left: 0; border-left: 0; }
.pj-strip b{ font-weight: 500; color: var(--pj-onyx); }
.pj-rail{ background: var(--pj-alabaster); border-right: 1px solid var(--pj-onyx-20); padding: 4px 0 14px; }
.pj-rail-grp{ padding: 12px 14px 6px 17px; font: 600 var(--pj-t-grp)/1.2 var(--pj-sans); letter-spacing: var(--pj-tr-grp); text-transform: uppercase; color: var(--pj-onyx); }
.pj-rail ul{ list-style: none; margin: 0; padding: 0; }
.pj-rail-i{ display: flex; align-items: center; min-height: 30px; padding: 0 14px 0 24px; border-left: 3px solid transparent; font-size: 13.5px; color: var(--pj-onyx-78); }
.pj-rail-i[aria-current="page"]{ background: var(--pj-linen); border-left-color: var(--pj-bordeaux); color: var(--pj-onyx); font-weight: 600; }
.pj-pmain{ min-width: 0; padding: 14px 16px 22px; }
@container pj (max-width: 860px){ .pj-portal{ grid-template-columns: minmax(0, 1fr); } .pj-rail{ display: none; } }
.pj-head{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 2px 0 12px; }
.pj-head-t{ font: 400 var(--pj-t-page)/var(--pj-lh-title) var(--pj-serif); color: var(--pj-onyx); }
.pj-head p{ margin: 3px 0 0; font-size: var(--pj-t-sec); color: var(--pj-onyx-62); }
.pj-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: 8px; background: var(--pj-band); border: 1px solid var(--pj-onyx-20); }
.pj-tw{ overflow-x: auto; border: 1px solid var(--pj-onyx-20); background: var(--pj-paper); }
.pj-table{ width: 100%; border-collapse: collapse; font: 400 var(--pj-t-base)/var(--pj-lh) var(--pj-sans); color: var(--pj-onyx); }
.pj-table th{ font: 600 var(--pj-t-th)/1 var(--pj-sans); letter-spacing: var(--pj-tr-th); text-transform: uppercase; color: var(--pj-onyx-62); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--pj-onyx-20); background: var(--pj-wash); white-space: nowrap; }
.pj-table td{ padding: 7px 10px; border-bottom: 1px solid var(--pj-onyx-12); vertical-align: middle; }
.pj-table tr:last-child td{ border-bottom: 0; }
.pj-nm{ font-weight: 500; }
.pj-sub{ font-size: var(--pj-t-strip); color: var(--pj-onyx-62); }
.pj-cards{ display: none; gap: 8px; }
.pj-card-row{ display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); }
@container pj (max-width: 640px){ .pj-guests .pj-tw{ display: none; } .pj-guests .pj-cards{ display: grid; } }
.pj-panel{ display: flex; flex-direction: column; min-width: 0; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); font: 400 var(--pj-t-base)/var(--pj-lh) var(--pj-sans); color: var(--pj-onyx); }
.pj-ph{ display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--pj-onyx-12); }
.pj-ph h4{ font: 400 var(--pj-t-panel)/var(--pj-lh-title) var(--pj-serif); color: var(--pj-onyx); }
.pj-ct{ font: 500 var(--pj-t-chip)/1 var(--pj-sans); font-variant-numeric: tabular-nums; color: var(--pj-onyx-62); border: 1px solid var(--pj-onyx-20); border-radius: 2px; padding: 3px 7px; }
.pj-ct.is-hot{ color: var(--pj-crimson); border-color: var(--pj-hot-ring); }
.pj-pb{ padding: 4px 12px 10px; }
.pj-pf{ margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px 10px; border-top: 1px solid var(--pj-onyx-12); }
.pj-row{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--pj-onyx-12); }
.pj-row:last-child{ border-bottom: 0; }
.pj-gr{ flex: 1; min-width: 0; }
.pj-t{ display: block; font-weight: 500; font-size: var(--pj-t-row); color: var(--pj-onyx); }
.pj-s{ display: block; margin-top: 2px; font-size: var(--pj-t-sec); color: var(--pj-onyx-62); }
.pj-acts{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-note{ margin: 8px 0 0; font-size: var(--pj-t-sec); color: var(--pj-onyx-62); }
.pj-inline{ display: block; margin: 8px 0 2px; padding: 10px; background: var(--pj-wash); border: 1px solid var(--pj-onyx-20); border-radius: 2px; font-size: var(--pj-t-strip); color: var(--pj-onyx-78); }
.pj-tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.pj-tile{ padding: 9px 10px; border: 1px solid var(--pj-onyx-20); background: var(--pj-paper); font: 400 13px/1.45 var(--pj-sans); }
.pj-tile.has-guests{ border-color: var(--pj-onyx-34); }
.pj-tile-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.pj-tile-h b{ font-weight: 500; }
.pj-tile-h span{ font-size: var(--pj-t-count); color: var(--pj-onyx-62); font-variant-numeric: tabular-nums; }
.pj-seat{ display: block; padding: 2px 0; font-size: 12.5px; }
.pj-seat--free{ color: var(--pj-onyx-62); }

/* chapters 4 and 5: a large piece leads, the work sits beside it; the portal screens follow at supporting scale */
.pj-scene{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4cqi, 56px); align-items: start; }
.pj-lead{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(14px, 2cqi, 24px); align-items: end; }
.pj-lead--one{ grid-template-columns: minmax(0, 1fr); }
.pj-lead--one .pj-piece-host{ width: 100%; max-width: 280px; }
.pj-lead .jp-piece, .pj-lead .pj-piece{ margin-inline: auto; }
.pj-q{ font: 300 clamp(19px, 2cqi, 23px)/1.45 var(--pj-display); color: var(--pj-ink); margin-bottom: 6px; }
.pj-a{ padding-left: 12px; border-left: 3px solid var(--pj-bordeaux); font: 400 13.5px/1.55 var(--pj-sans); color: var(--pj-ink-2); margin-bottom: 6px; }
.pj-flow2{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4cqi, 32px); align-items: start; }
.pj-flow2 .pj-phone{ max-width: 330px; margin-inline: 0; }
.pj-quiet-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2cqi, 24px); margin-top: clamp(36px, 5cqi, 64px); align-items: start; }
.pj-quiet-grid > div + div{ display: grid; gap: 12px; }
.pj-side-col .pj-travel{ grid-template-columns: minmax(0, 1fr); }
.pj-side-col .pj-travel-col + .pj-travel-col{ padding-left: 0; border-left: 0; border-top: 1px solid var(--pj-line-2); }
@container pj (max-width: 900px){ .pj-scene, .pj-flow2, .pj-quiet-grid{ grid-template-columns: minmax(0, 1fr); } }

/* the sample guests: Invitation → Reply → Seat, shown as they stand */
.pj-travel{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pj-ink); margin-top: 4px; }
.pj-travel-col{ min-width: 0; padding: 10px 12px 14px 0; }
.pj-travel-col + .pj-travel-col{ padding-left: 12px; border-left: 1px solid var(--pj-line-2); }
.pj-travel-h{ font: 500 10.5px/1.2 var(--pj-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pj-ink-3); margin-bottom: 10px; }
.pj-travel-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pj-traveller{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--pj-onyx-20); background: var(--pj-paper); font: 400 12.5px/1.35 var(--pj-sans); }
.pj-traveller b{ font-weight: 500; }
.pj-traveller small{ font-size: 11.5px; color: var(--pj-ink-3); }
@container pj (max-width: 560px){ .pj-travel{ grid-template-columns: minmax(0, 1fr); } .pj-travel-col + .pj-travel-col{ padding-left: 0; border-left: 0; border-top: 1px solid var(--pj-line-2); } }

/* RSVP page (research/C §3) */
.pj-rsvp{ padding: 26px 18px 24px; text-align: center; background: var(--s-bg, #FBF7EF); color: var(--s-text, #1E0B0E); font: 300 14px/1.6 var(--s-label, var(--pj-sans)); min-height: 100%; }
.pj-sealed{ display: grid; justify-items: center; gap: 12px; width: 100%; padding: 30px 16px 26px; margin-top: 22px; border: 1px solid var(--s-line); background: var(--s-bg); text-align: center; border-radius: 0; }
.pj-sealed-env{ position: relative; width: 132px; aspect-ratio: 7 / 5; border: 1px solid color-mix(in srgb, var(--s-text) 25%, transparent); background: color-mix(in srgb, var(--s-accent-2) 22%, var(--s-bg)); }
.pj-sealed-env::before{ content: ""; position: absolute; inset: 0 0 40% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: color-mix(in srgb, var(--s-accent) 80%, var(--s-bg)); }
.pj-seal{ position: absolute; left: 50%; top: 60%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--s-accent); color: var(--s-bg); font: italic 400 13px/26px var(--s-head); }
.pj-sealed-t{ font: 400 22px/1.2 var(--s-head); }
.pj-sealed-t em{ font-style: italic; color: var(--s-accent); }
.pj-sealed-b{ font-size: 12.5px; color: var(--s-muted); }
.pj-rsvp-eyebrow{ font: 400 10.5px/1.4 var(--s-label); letter-spacing: .28em; text-transform: uppercase; color: var(--s-muted); }
.pj-rsvp-h{ margin: 8px 0 4px; font: 400 28px/1.15 var(--s-head); }
.pj-rsvp-h em{ font-style: italic; color: var(--s-accent); }
.pj-rsvp-sub{ font-size: 13px; color: var(--s-muted); margin-bottom: 16px; }
.pj-rsvp-card{ margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--s-line); text-align: left; font-size: 13px; }
.pj-rsvp-card dl{ display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.pj-rsvp-card dt{ color: var(--s-muted); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.pj-rsvp-lbl{ display: block; margin: 14px 0 8px; font: 500 10.5px/1.3 var(--s-label); letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); text-align: left; }
.pj-attend{ display: block; width: 100%; min-height: 48px; margin: 0 0 8px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--s-text) 30%, transparent); border-radius: 2px; background: transparent; font: 400 15px/1 var(--s-head); color: var(--s-text); }
.pj-attend[aria-pressed="true"]{ background: var(--s-text); color: var(--s-bg); border-color: var(--s-text); }
.pj-rsvp-submit{ display: block; width: 100%; min-height: 46px; margin-top: 12px; border: 0; border-radius: 2px; background: var(--s-accent); color: var(--s-bg); font: 500 11.5px/1 var(--s-label); letter-spacing: .18em; text-transform: uppercase; }
.pj-rsvp-foot{ margin-top: 16px; font-size: 11px; color: var(--s-muted); }
.pj-flowback{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); font: 400 13px/1.45 var(--pj-sans); }

/* email (Resend chassis: type only, no image) */
.pj-email{ max-width: 460px; background: var(--pj-linen); border: 1px solid var(--pj-line); font: 400 13px/1.5 var(--pj-sans); color: var(--pj-onyx); }
.pj-email-meta{ display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid var(--pj-line-2); background: var(--pj-paper); font-size: 12px; color: var(--pj-onyx-62); }
.pj-email-meta b{ font-weight: 500; color: var(--pj-onyx); }
.pj-email-body{ padding: 24px 22px 18px; text-align: center; }
.pj-email-wm{ display: block; padding-bottom: 12px; margin: 0 auto 20px; border-bottom: 1px solid rgba(107,104,100,.28); font: 500 12px/1 var(--pj-wordmark); letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; }
.pj-email-h{ font: 400 24px/1.15 var(--pj-serif); margin: 0 0 10px; }
.pj-email-p{ font: 400 14px/1.6 var(--pj-sans); color: rgba(20,20,20,.62); margin: 0 0 18px; }
.pj-email-cta{ display: inline-block; padding: 13px 28px; background: var(--pj-crimson); color: var(--pj-linen); font: 500 11.5px/1 var(--pj-sans); letter-spacing: .18em; text-transform: uppercase; }
.pj-email-foot{ padding: 12px 22px 16px; border-top: 1px solid var(--pj-line-2); text-align: center; font-size: 11.5px; color: var(--pj-onyx-62); }

/* requests */
.pj-steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3cqi, 32px) clamp(16px, 3cqi, 36px); align-items: start; }
@container pj (max-width: 760px){ .pj-steps{ grid-template-columns: minmax(0, 1fr); } }
.pj-step{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pj-step-n{ display: flex; align-items: baseline; gap: 10px; font: 500 12.5px/1.3 var(--pj-sans); color: var(--pj-ink-2); }
.pj-step-n span{ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--pj-line); border-radius: 50%; font-size: 11.5px; color: var(--pj-ink); }
.pj-note-card{ padding: 16px 18px; border: 1px solid var(--pj-line); }
.pj-note-text{ padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--s-text) 22%, transparent); border-radius: 2px; font: 300 14px/1.55 var(--s-label); }
.pj-bubbles{ display: grid; gap: 8px; margin: 10px 0 4px; }
.pj-bubble{ max-width: 88%; padding: 8px 10px; font: 400 13px/1.45 var(--pj-sans); border: 1px solid var(--pj-onyx-20); background: var(--pj-paper); }
.pj-bubble--out{ justify-self: end; background: var(--pj-wash); }
.pj-bubble-k{ display: block; margin-bottom: 2px; font-size: 11px; color: var(--pj-onyx-62); }
.pj-crm{ padding: 14px 16px; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); border-left: 3px solid var(--pj-bordeaux); font: 400 13.5px/1.5 var(--pj-sans); }

/* door app — light, as the real one is (app/door.html: "no dark version", owner 2026-09-10) */
.pj-door{ --door-ink:#0B1220; --door-paper:#F4F6FA; --door-line:rgba(11,18,32,.12); --door-dim:#55637A; --door-ok:#1F6B3A;
  background: var(--door-paper); color: var(--door-ink); font: 400 14px/1.5 var(--pj-sans); min-height: 100%; }
.pj-door-bar{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 30px 14px 12px; border-bottom: 1px solid var(--door-line); }
.pj-door-bar .pj-wordmark{ color: var(--door-ink); font-size: 12px; }
.pj-tally{ font: 500 12.5px/1.2 var(--pj-sans); font-variant-numeric: tabular-nums; text-align: right; }
.pj-door-in{ padding: 14px; display: grid; gap: 12px; }
.pj-door-ctx{ font-size: 12px; color: var(--door-dim); }
.pj-verdict{ display: grid; justify-items: center; gap: 4px; padding: 20px 14px; border: 2px solid var(--door-ok); border-radius: 2px; background: #F1F8F3; text-align: center; }
.pj-verdict-icon{ display: block; font: 600 34px/1 var(--pj-sans); color: var(--door-ok); }
.pj-verdict-who{ font: 700 22px/1.15 var(--pj-sans); color: var(--door-ok); }
.pj-verdict-sub{ font-size: 13px; color: var(--door-dim); }
.pj-door-btn{ flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid var(--door-line); border-radius: 2px; background: var(--pj-paper); color: var(--door-ink); font: 500 13.5px/1 var(--pj-sans); }
.pj-door-row{ display: flex; gap: 8px; }
.pj-door-party{ padding: 10px 12px; border: 2px solid #8A6410; border-radius: 2px; background: #FCF7EA; font-size: 13px; color: var(--door-ink); }
/* chapter 6: the chart at the door, the two phones, the day at the side */
.pj-door-grid{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(20px, 3cqi, 40px); align-items: start; }
.pj-door-grid--nochart{ grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.pj-door-chart{ margin: 0; min-width: 0; }
.pj-door-chart .jp-piece, .pj-door-chart .pj-piece{ max-width: 380px; margin-inline: auto; }
.pj-phones{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pj-phones .pj-phone{ max-width: 300px; }
@container pj (max-width: 960px){ .pj-door-grid, .pj-door-grid--nochart{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pj-door-chart{ grid-column: 1 / -1; } }
@container pj (max-width: 640px){ .pj-door-grid, .pj-door-grid--nochart, .pj-phones{ grid-template-columns: minmax(0, 1fr); } .pj-phones .pj-phone{ max-width: 340px; } }
.pj-qrcard{ display: grid; justify-items: center; gap: 10px; padding: 18px 14px; border: 1px solid var(--s-line); text-align: center; }
.pj-qrcard svg{ width: 140px; height: 140px; color: var(--s-text); }
.pj-qrcard-t{ font: 400 18px/1.2 var(--s-head); }

/* ── 12 · Recap, plans ─────────────────────────────────────────────────────── */
/* the recap: the room once more, small, then the counts */
.pj-echo{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 2cqi, 24px); align-items: end; margin-top: clamp(24px, 4cqi, 40px); }
.pj-echo-p{ min-width: 0; }
.pj-echo-p .jp-piece, .pj-echo-p .pj-piece{ max-width: 150px; margin-inline: auto; }
@container pj (max-width: 640px){ .pj-echo{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .pj-echo-p:nth-child(n+4){ display: none; } }
.pj-recap-figs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 clamp(28px, 5cqi, 48px); border-top: 1px solid var(--pj-line); border-bottom: 1px solid var(--pj-line); }
.pj-recap-fig{ padding: 16px 14px 16px 0; }
.pj-recap-fig + .pj-recap-fig{ padding-left: 14px; border-left: 1px solid var(--pj-line); }
.pj-recap-fig b{ display: block; font: 300 clamp(38px, 5cqi, 60px)/1 var(--pj-display); font-variant-numeric: lining-nums tabular-nums; color: var(--pj-ink); }
.pj-recap-fig > span{ display: block; margin-top: 8px; font: 400 13px/1.45 var(--pj-sans); color: var(--pj-ink-2); }
@container pj (max-width: 640px){ .pj-recap-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .pj-recap-fig:nth-child(3){ padding-left: 0; border-left: 0; } .pj-recap-fig:nth-child(n+3){ border-top: 1px solid var(--pj-line); } }
.pj-close{ display: grid; gap: 20px; justify-items: start; }
.pj-plans{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
@container pj (max-width: 860px){ .pj-plans{ grid-template-columns: minmax(0, 1fr); } }
.pj-plan{ display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); font: 400 13.5px/1.5 var(--pj-sans); color: var(--pj-onyx); }
.pj-plan.is-chosen{ border-color: var(--pj-onyx); }
.pj-plan-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pj-plan-n{ font: 500 11px/1.2 var(--pj-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--pj-onyx-62); }
.pj-most{ font: 500 11px/1.2 var(--pj-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--pj-crimson); }
.pj-plan h3{ font: 400 26px/1.1 var(--pj-serif); }
.pj-plan-price{ font: 300 44px/1 var(--pj-serif); font-variant-numeric: lining-nums; }
.pj-plan-why{ padding: 10px 12px; background: var(--pj-wash); border: 1px solid var(--pj-line-2); font-size: 12.5px; color: var(--pj-onyx-78); }
.pj-plan ul{ list-style: none; margin: 0; padding: 0; }
.pj-plan li{ padding: 5px 0; border-top: 1px solid var(--pj-onyx-12); color: var(--pj-onyx-78); }
.pj-plan-meta{ font-size: 12.5px; color: var(--pj-onyx-62); }
.pj-plan .pj-btn{ margin-top: auto; align-self: stretch; }
.pj-keep{ margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--pj-onyx-20); font: 400 13.5px/1.5 var(--pj-sans); color: var(--pj-ink-2); max-width: 62ch; }
.pj-keep b{ font-weight: 500; color: var(--pj-ink); }

/* ── 13 · Sticky CTA, the pinned corner monogram, the demo banner ──────────── */
.pj-sticky{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; padding: 0 var(--pj-gut) 14px; pointer-events: none; }
.pj-sticky-bar{ display: flex; align-items: center; gap: 14px; width: min(100%, 680px); padding: 8px 8px 8px 16px; background: var(--pj-paper); border: 1px solid var(--pj-onyx-20); pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity var(--pj-dur-base) var(--pj-ease), visibility 0s linear var(--pj-dur-base); }
.pj-sticky.is-on .pj-sticky-bar{ opacity: 1; visibility: visible; transition-delay: 0s; }
.pj-sticky-t{ flex: 1; min-width: 0; font: 400 12.5px/1.3 var(--pj-sans); color: var(--pj-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-sticky .pj-when-phone{ display: none; }
@media (max-width: 640px){
  .pj-sticky{ padding: 0; }
  .pj-sticky-bar{ width: 100%; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-width: 1px 0 0; }
  .pj-sticky .pj-when-desk{ display: none; }
  .pj-sticky .pj-when-phone{ display: inline; }
}
@media (max-width: 480px){ .pj-sticky-t{ display: none; } .pj-sticky-bar{ justify-content: space-between; } }
.pj-corner{ position: fixed; top: 14px; left: 14px; z-index: 35; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--pj-ink); border-radius: 50%; background: var(--pj-bg); font: italic 300 14px/1 var(--pj-display); color: var(--pj-ink); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity var(--pj-dur-base) var(--pj-ease), visibility 0s linear var(--pj-dur-base); }
.pj-corner.is-on{ opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 640px){ .pj-corner{ left: auto; right: 12px; top: 10px; width: 40px; height: 40px; font-size: 13px; } }
.pj-banner{ position: sticky; top: 0; z-index: 45; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; min-height: 36px; padding: 6px 16px; background: var(--pj-band); border-bottom: 1px solid var(--pj-line); font: 500 12.5px/1.3 var(--pj-sans); color: var(--pj-onyx-78); }
.pj-banner b{ font-weight: 600; color: var(--pj-onyx); }
.pj-banner a{ color: var(--pj-bordeaux); }
.pj-banner ~ .pj-corner, .pj-demo .pj-corner{ top: 50px; }

/* ── 14 · Loading, error and expiry states ─────────────────────────────────── */
.pj-state{ padding-block: clamp(56px, 10vw, 120px); }
.pj-state .pj-d3{ max-width: 20ch; }
.pj-state p{ margin-top: 14px; }
.pj-state .pj-row-flex{ margin-top: 22px; }
.pj-loading{ padding: clamp(56px, 10vw, 120px) var(--pj-gut); max-width: calc(var(--pj-journey-w) + 2 * var(--pj-gut)); margin: 0 auto; font: 300 var(--pj-fs-lede)/1.5 var(--pj-display); color: var(--pj-ink-3); }

/* ── 15 · Scroll reveals ─────────────────────────────────────────────────── */
.pj-rv{ opacity: 0; transform: translateY(var(--pj-rv-y)); transition: opacity var(--pj-rv-dur) var(--pj-ease), transform var(--pj-rv-dur) var(--pj-ease); }
.pj-rv.in, .pj-rv:focus-within{ opacity: 1; transform: none; }
.pj-rv-1{ transition-delay: 80ms; } .pj-rv-2{ transition-delay: 160ms; }
.pj-no-io .pj-rv{ opacity: 1; transform: none; }

/* reduced motion: the whole page complete and static — every reveal shown, every plate lit,
   the arrow drawn and its arrowheads on, nothing fades or slides */
@media (prefers-reduced-motion: reduce){
  .pj-body .pj-rv{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .pj-body .pj-plate::before, .pj-body .pj-plate::after{ opacity: 1 !important; transition: none !important; }
  .pj-body .pj-flow-line{ stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .pj-body .pj-flow-head{ opacity: 1 !important; }
  .pj-body *, .pj-body *::before, .pj-body *::after{ animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .pj-body .pj-changed{ outline: 2px solid var(--pj-crimson); outline-offset: 3px; }
}
.pj-reduced .pj-rv{ opacity: 1 !important; transform: none !important; transition: none !important; }
.pj-reduced .pj-plate::before, .pj-reduced .pj-plate::after{ opacity: 1 !important; transition: none !important; }
.pj-reduced .pj-flow-line{ stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.pj-reduced .pj-flow-head{ opacity: 1 !important; }
.pj-reduced .pj-ov-tile, .pj-reduced .pj-ov-more{ transition: none !important; }

/* ── 16 · Print: the event only, complete; no chrome ─────────────────────── */
@media print{
  .pj-sticky, .pj-banner, .pj-corner, .pj-skip, .pj-top, .pj-foot, .pj-plans-screen, .pj-sync-ctls, .pj-showall, .pj-beat-acts{ display: none !important; }
  .pj-rv{ opacity: 1 !important; transform: none !important; }
  .pj-flow{ display: none !important; }
  .pj-overview{ display: none !important; }
  .pj-phone-screen{ height: auto !important; overflow: visible !important; }
  .pj-screen{ break-inside: avoid-page; }
}