/* ============================================================================
   pf-letter.css — THE LETTER'S STEPPED PAGE (2026-09-11)

   Founder: the cover letter becomes a dedicated stepped page like the
   portfolio. "I need best versions."

   This sheet COMPOSES the portfolio's approved grammar rather than restating
   it: .pf-launch-strip, .cxs-stage / .cxs-sheet / .cxs-section / .cxs-field /
   .cxs-foot / .cxs-btn, .pf-check-bar / .pf-check-foot and .pf-stage* are all
   pf-portfolio.css's, loaded before this file. Everything here is what the
   LETTER needs and the portfolio does not: twelve complete letter papers as
   cards, a paper read beside its own paragraphs, and a check that prints.

   Colour comes only from tokens.css (--cx-cons-* / --cx-ink / --cx-letter-*).
   No new hue is named anywhere in this file.
   ========================================================================== */

/* -------------------------------------------------- the crumb and the nav
   FIX 2026-09-11 · the product switcher is `position: absolute; left: 50%;
   transform: translateX(-50%)` over the bar (studio-nav-standard.css), so it
   is OUT OF FLOW: the bar's left cell cannot see it and grows under it. The
   crumb's subject is already gone on this route (app.js), and this is the
   bound that holds whatever the crumb carries.

   The nav is 558px wide and centred, so its left edge is `50vw - 279px`, and
   the crumb's own left edge is the bar's 40px gutter plus the wordmark —
   177px at these widths. Above 1200px the crumb is capped so its right edge
   stops clear of the nav (480 = 279 half-nav + 12 clearance + 177 offset,
   plus a few px for a scrollbar's share of vw). Between 901 and 1200 the two
   cannot both fit — 92px of room for a 104px crumb — so the crumb steps
   aside; the nav's own "03 Sign · Letter" is lit and the page titles itself.
   At 900 and below the nav is already display:none and the crumb returns. */
@media (min-width: 1200px) {
  body.folio-v5:has(.pfl-launch) .s1-tool,
  body.folio-v5:has(.pfl-generating) .s1-tool {
    justify-self: start;
    min-width: 0;
    max-width: calc(50vw - 480px);
    overflow: hidden;
    white-space: nowrap;
  }
}
@media (min-width: 901px) and (max-width: 1199.98px) {
  body.folio-v5:has(.pfl-launch) .s1-tool,
  body.folio-v5:has(.pfl-generating) .s1-tool { display: none; }
}

/* ---------------------------------------------------------------- the page */
.folio-v5 .pfl-launch { display: block; background: var(--cx-cons-bone); }
.folio-v5 .pfl-showcase { background: var(--cx-cons-parchment); }
.folio-v5 .pfl-showcase-main { display: block; }

/* ============================================================ 01 · DESIGN */
.folio-v5 .pfl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(30px, 4.6vw, 62px) clamp(18px, 4vw, 58px) clamp(18px, 2.4vw, 30px);
}
.folio-v5 .pfl-hero > div > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cx-cons-vermilion-deep);
  font: 500 10.5px/1 var(--cx-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.folio-v5 .pfl-hero > div > span::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--cx-cons-vermilion);
  transform: rotate(45deg);
}
/* 2026-09-11 (late) · FOUNDER: "texts bit smaller, it looks too big."
   One step down on the display type: 72px topped out at 44px at 1440. */
.folio-v5 .pfl-hero h1 {
  margin: 16px 0 0;
  color: var(--cx-ink);
  font: 400 clamp(30px, 3.1vw, 44px)/1.02 var(--cx-font-display);
  letter-spacing: -.018em;
}
.folio-v5 .pfl-hero h1 em { font-style: italic; color: var(--cx-cons-vermilion); }
.folio-v5 .pfl-hero > p {
  position: relative;
  margin: 0 0 6px;
  max-width: 46ch;
  color: var(--cx-cons-char);
  font: 400 15px/1.55 var(--cx-font-ui);
}
.folio-v5 .pfl-hero-aside {
  display: block;
  margin-top: 12px;
  color: var(--cx-cons-vermilion);
  font: 500 19px/1.25 var(--cx-font-hand);
  font-style: normal;
}

.folio-v5 .pfl-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 14px clamp(18px, 4vw, 58px) 16px;
  border-top: 1px solid var(--cx-cons-hair);
  border-bottom: 1px solid var(--cx-cons-hair);
  background: var(--cx-cons-paper);
}
.folio-v5 .pfl-tools p {
  margin: 0;
  color: var(--cx-cons-faint);
  font: 500 10.5px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.folio-v5 .pfl-tools p b { color: var(--cx-ink); font-weight: 700; }
.folio-v5 .pfl-tools nav { display: flex; flex-wrap: wrap; gap: 8px; }
.folio-v5 .pfl-tools nav button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 999px;
  background: var(--cx-cons-parchment);
  color: var(--cx-cons-char);
  font: 500 12px/1 var(--cx-font-ui);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.folio-v5 .pfl-tools nav button:hover { border-color: var(--cx-ink); color: var(--cx-ink); }
.folio-v5 .pfl-tools nav button.on { background: var(--cx-ink); border-color: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .pfl-progress { flex: 1 1 120px; min-width: 80px; }

.folio-v5 .pfl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(22px, 3vw, 42px);
  padding: clamp(26px, 4vw, 52px) clamp(18px, 4vw, 58px);
}
.folio-v5 .pfl-card { position: relative; min-width: 0; }
.folio-v5 .pfl-card[hidden] { display: none; }
.folio-v5 .pfl-card > .pf-tape { top: -10px; right: 26px; --tr: 5deg; z-index: 4; }
.folio-v5 .pfl-card:nth-child(2n) > .pf-tape { right: auto; left: 26px; --tr: -6deg; }
.folio-v5 .pfl-card > a { display: block; text-decoration: none; color: inherit; }
.folio-v5 .pfl-card-art {
  position: relative;
  display: block;
  height: 340px;
  overflow: hidden;
  border: 1px solid var(--cx-cons-hair);
  background: var(--cx-cons-paper);
  box-shadow: 0 10px 26px var(--cx-ink-a08);
  transform: rotate(var(--tk, -.5deg));
  transition: transform 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard);
}
.folio-v5 .pfl-card:nth-child(2n) .pfl-card-art { --tk: .7deg; }
.folio-v5 .pfl-card > a:hover .pfl-card-art,
.folio-v5 .pfl-card > a:focus-visible .pfl-card-art {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 18px 40px var(--cx-ink-a10);
}
/* THE COMPLETE LETTER, SCALED — not a thumbnail drawing of one. The paper is
   laid out at its real width and shrunk, so what the card shows is exactly
   what the stage and the download show. */
.folio-v5 .pfl-card-paper { position: absolute; inset: 0; display: block; }
.folio-v5 .pfl-card-paper .letter-paper {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 620px;
  min-height: 790px;
  margin: 0;
  border: 0;
  box-shadow: none;
  transform: translateX(-50%) scale(.46);
  transform-origin: top center;
  pointer-events: none;
}
.folio-v5 .pfl-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 14px 2px 0;
}
.folio-v5 .pfl-card-name { grid-column: 1; grid-row: 1; min-width: 0; }
.folio-v5 .pfl-card-index { grid-column: 1; grid-row: 2; }
.folio-v5 .pfl-card-open { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.folio-v5 .pfl-card-name h2 { margin: 0; color: var(--cx-ink); font: 400 20px/1.1 var(--cx-font-display); }
.folio-v5 .pfl-card-name p { margin: 3px 0 0; color: var(--cx-cons-char); font: 400 12.5px/1.45 var(--cx-font-ui); }
.folio-v5 .pfl-card-index {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cx-cons-faint);
}
.folio-v5 .pfl-card-index i { font-style: normal; color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pfl-card-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cx-ink);
  font: 500 12px/1 var(--cx-font-ui);
  white-space: nowrap;
  transition: gap 180ms ease;
}
.folio-v5 .pfl-card > a:hover .pfl-card-open { gap: 12px; }

.folio-v5 .pfl-showcase-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(30px, 5vw, 72px) clamp(18px, 4vw, 58px) clamp(44px, 6vw, 86px);
  border-top: 1px solid var(--cx-cons-hair);
}
.folio-v5 .pfl-showcase-footer p { margin: 0; color: var(--cx-ink); font: 400 clamp(24px, 3vw, 38px)/1.08 var(--cx-font-display); }
.folio-v5 .pfl-showcase-footer a { color: var(--cx-cons-char); font: 500 12px/1 var(--cx-font-ui); text-decoration: none; }
.folio-v5 .pfl-showcase-footer a:hover { color: var(--cx-ink); }

/* DELETED 2026-09-11 · .pfl-stage .pf-stage-body, .pfl-stage-sheet, its tape
   and .pfl-stage-paper .letter-paper. The letter's preview is the WORLD STAGE
   now — the same full-bleed component the portfolio opens, holding one sheet
   instead of a website. Its paper rules live in assets/pf-world-stage.css as
   .ws-paper, so there is one stage in the product, not two. */

/* =========================================================== 02 · DETAILS */
.folio-v5 .pfl-sheet .pfl-posting { min-height: 132px; }
.folio-v5 .pfl-help { display: block; margin: 10px 0 0; }
.folio-v5 .pfl-own { margin-top: 16px; }
.folio-v5 .pfl-own-lines { min-height: 128px; }

.folio-v5 .pfl-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.folio-v5 .pfl-source {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-parchment);
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.folio-v5 .pfl-source:hover { background: var(--cx-cons-paper); border-color: var(--cx-ink); }
.folio-v5 .pfl-source.on {
  background: var(--cx-cons-paper);
  border-color: var(--cx-ink);
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion);
}
.folio-v5 .pfl-source b { color: var(--cx-ink); font: 400 18px/1.15 var(--cx-font-display); }
.folio-v5 .pfl-source small { color: var(--cx-cons-char); font: 400 12px/1.45 var(--cx-font-ui); }
.folio-v5 .pfl-source em {
  align-self: end;
  color: var(--cx-cons-faint);
  font: 500 10px/1 var(--cx-font-mono);
  font-style: normal;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.folio-v5 .pfl-source.on em { color: var(--cx-cons-vermilion-deep); }

/* the blockers: words, not a disabled button with a hover-only reason. */
.folio-v5 .pfl-blockers { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.folio-v5 .pfl-blockers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 13px 15px;
  border: 1px solid var(--cx-cons-vermilion);
  border-radius: 4px;
  background: color-mix(in srgb, var(--cx-cons-vermilion) 6%, transparent);
}
.folio-v5 .pfl-blockers b { flex: 0 0 100%; color: var(--cx-ink); font: 600 13.5px/1.35 var(--cx-font-ui); }
.folio-v5 .pfl-blockers span { color: var(--cx-cons-char); font: 400 12.5px/1.45 var(--cx-font-ui); }
.folio-v5 .pfl-blockers .cxs-btn { margin-left: auto; height: 36px; }
.folio-v5 .pfl-state { display: block; margin: 10px 0 0; text-align: right; }

/* the voice bar, standing on the sheet rather than in a studio pane. */
.folio-v5 .pfl-sheet .cover-voice-bar { margin: 0; padding: 0; border: 0; background: transparent; }
.folio-v5 .pfl-sheet .cover-voice-bar > header { display: none; }
.folio-v5 .pfl-sheet .cover-voice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.folio-v5 .pfl-sheet .cover-voice-grid button {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-parchment);
  text-align: left;
  cursor: pointer;
}
.folio-v5 .pfl-sheet .cover-voice-grid button.on {
  background: var(--cx-cons-paper);
  border-color: var(--cx-ink);
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion);
}
.folio-v5 .pfl-sheet .cover-voice-grid button > i { display: none; }
.folio-v5 .pfl-sheet .cover-voice-grid b { color: var(--cx-ink); font: 400 18px/1.15 var(--cx-font-display); }
.folio-v5 .pfl-sheet .cover-voice-grid span { color: var(--cx-cons-char); font: 400 12px/1.4 var(--cx-font-ui); }
.folio-v5 .pfl-sheet .cover-voice-grid small {
  color: var(--cx-cons-quiet);
  font: italic 400 12.5px/1.45 var(--cx-font-display);
}
.folio-v5 .pfl-sheet .cover-voice-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--cx-ink);
  border-radius: 4px;
  background: var(--cx-cons-paper);
}
.folio-v5 .pfl-sheet .cover-voice-confirm b { display: block; color: var(--cx-ink); font: 600 13.5px/1.35 var(--cx-font-ui); }
.folio-v5 .pfl-sheet .cover-voice-confirm span { color: var(--cx-cons-char); font: 400 12.5px/1.45 var(--cx-font-ui); }
.folio-v5 .pfl-sheet .cover-voice-confirm-actions { display: flex; gap: 8px; margin-left: auto; }

/* ======================================================= 03 · YOUR LETTER */
.folio-v5 .pfl-write-stage {
  display: grid;
  grid-template-columns: 58fr 42fr;
  align-items: start;
  gap: clamp(18px, 2.4vw, 36px);
  padding: clamp(20px, 2.6vw, 40px) clamp(16px, 3vw, 46px) 90px;
  background: var(--cx-cons-bone);
}
.folio-v5 .pfl-paper-col { position: sticky; top: calc(var(--topbar-h, 56px) + 12px); min-width: 0; }
.folio-v5 .pfl-paper-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--cx-cons-hair);
  border-bottom: 0;
  background: var(--cx-cons-paper);
}
.folio-v5 .pfl-paper-id { display: grid; gap: 2px; min-width: 0; }
.folio-v5 .pfl-paper-id small {
  color: var(--cx-cons-faint);
  font: 500 10px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.folio-v5 .pfl-paper-id b { color: var(--cx-ink); font: 400 19px/1 var(--cx-font-display); }
.folio-v5 .pfl-paper-controls { display: flex; align-items: center; gap: 8px; }
.folio-v5 .pfl-paper-controls .cxs-btn { height: 36px; padding: 0 13px; font-size: 12px; }
.folio-v5 .pfl-accent-panel { border-top: 0; }
.folio-v5 .pfl-paper {
  max-height: calc(100vh - var(--topbar-h, 56px) - 150px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--cx-cons-hair);
  background: var(--cx-cons-bone);
}
.folio-v5 .pfl-paper .letter-paper {
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 0;
  box-shadow: var(--cx-shadow-raise);
}
.folio-v5 .pfl-paper-hand {
  margin: 10px 0 0;
  color: var(--cx-cons-vermilion);
  font: 500 18px/1.2 var(--cx-font-hand);
  text-align: right;
}

.folio-v5 .pfl-rows-sheet { max-width: none; }
.folio-v5 .pfl-rows { display: grid; gap: 12px; margin-top: 20px; }
.folio-v5 .pfl-row {
  padding: 12px 14px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-parchment);
}
.folio-v5 .pfl-row.open { background: var(--cx-cons-paper); border-color: var(--cx-ink); }
.folio-v5 .pfl-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
}
.folio-v5 .pfl-row-head > i {
  font-style: normal;
  color: var(--cx-cons-faint);
  font: 400 11px/1 var(--cx-font-mono);
}
.folio-v5 .pfl-row-head > b { color: var(--cx-ink); font: 600 12.5px/1 var(--cx-font-ui); }
.folio-v5 .pfl-row-head .cxs-details-key { margin-left: auto; }
.folio-v5 .pfl-trace {
  color: var(--cx-cons-vermilion-deep);
  font: 500 10px/1.3 var(--cx-font-mono);
  letter-spacing: .06em;
}
.folio-v5 .pfl-trace.own { color: var(--cx-cons-faint); }
.folio-v5 .pfl-field {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 3px;
  background: var(--cx-cons-paper);
  color: var(--cx-ink);
  font: 400 13.5px/1.55 var(--cx-font-ui);
  resize: vertical;
}
.folio-v5 .pfl-field:focus { outline: 0; border-color: var(--cx-ink); box-shadow: inset 0 -2px 0 var(--cx-ink); }
.folio-v5 .pfl-row-words {
  display: block;
  margin-top: 6px;
  color: var(--cx-cons-faint);
  font: 400 10.5px/1 var(--cx-font-mono);
}
.folio-v5 .pfl-panel {
  margin-top: 10px;
  padding: 12px 13px;
  border: 1px dashed var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-bone);
}
.folio-v5 .pfl-panel-quote {
  margin: 0 0 6px;
  color: var(--cx-ink);
  font: italic 400 14px/1.55 var(--cx-font-display);
}
.folio-v5 .pfl-panel-note { margin: 0; color: var(--cx-cons-char); font: 400 12px/1.5 var(--cx-font-ui); }
.folio-v5 .pfl-panel-note.quiet { margin-top: 9px; color: var(--cx-cons-faint); font-size: 11.5px; }
.folio-v5 .pfl-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.folio-v5 .pfl-panel .cover-source-receipt { margin-top: 9px; }
.folio-v5 .pfl-addrow { margin: 2px 0; }
.folio-v5 .pfl-addrow button {
  width: 100%;
  min-height: 40px;
  border: 1px dashed var(--cx-cons-hair);
  border-radius: 4px;
  background: transparent;
  color: var(--cx-cons-char);
  font: 500 12px/1 var(--cx-font-ui);
  cursor: pointer;
}
.folio-v5 .pfl-addrow button:hover { background: var(--cx-cons-parchment); color: var(--cx-ink); border-color: var(--cx-ink); }
.folio-v5 .pfl-row-signed { background: var(--cx-cons-bone); }
.folio-v5 .pfl-signed { margin: 0; color: var(--cx-ink); font: 400 22px/1.1 var(--cx-font-hand); }
.folio-v5 .pfl-signed.none { color: var(--cx-cons-char); font: 400 12.5px/1.5 var(--cx-font-ui); }
.folio-v5 .pfl-signed.none a { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pfl-words {
  margin: 14px 0 0;
  color: var(--cx-cons-faint);
  font: 400 11px/1 var(--cx-font-mono);
  letter-spacing: .08em;
}

/* ============================================================= 04 · CHECK */
.folio-v5 .pfl-check-stage {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: start;
  gap: clamp(18px, 2.4vw, 36px);
  padding: clamp(18px, 2.4vw, 34px) clamp(16px, 3vw, 46px) 30px;
  background: var(--cx-cons-bone);
}
.folio-v5 .pfl-check-paper {
  max-height: calc(100vh - var(--topbar-h, 56px) - 200px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--cx-cons-hair);
  background: var(--cx-cons-bone);
}
.folio-v5 .pfl-check-paper .letter-paper {
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 0;
  box-shadow: var(--cx-shadow-raise);
}
.folio-v5 .pfl-check-side { display: grid; gap: 16px; min-width: 0; }
.folio-v5 .pfl-review {
  padding: 20px 22px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-paper);
}
.folio-v5 .pfl-review-head > span {
  color: var(--cx-cons-faint);
  font: 500 10px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.folio-v5 .pfl-review-head h1 { margin: 9px 0 5px; color: var(--cx-ink); font: 400 28px/1.08 var(--cx-font-display); }
.folio-v5 .pfl-review-head p { margin: 0 0 14px; color: var(--cx-cons-char); font: 400 13px/1.5 var(--cx-font-ui); }
.folio-v5 .pfl-review-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cx-cons-hair);
  color: var(--cx-cons-faint);
  font: 400 11.5px/1.4 var(--cx-font-ui);
}
.folio-v5 .pfl-review-foot i { font-style: normal; color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pfl-downloads {
  padding: 18px 20px;
  border: 1px solid var(--cx-ink);
  border-radius: 4px;
  background: var(--cx-cons-paper);
}
.folio-v5 .pfl-downloads h2 { margin: 0 0 12px; color: var(--cx-ink); font: 400 24px/1.05 var(--cx-font-display); }
.folio-v5 .pfl-download-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.folio-v5 .pfl-versions { display: grid; gap: 7px; margin-top: 14px; }
.folio-v5 .pfl-versions select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 3px;
  background: var(--cx-cons-parchment);
  color: var(--cx-ink);
  font: 400 12.5px/1 var(--cx-font-ui);
}
.folio-v5 .pfl-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 20px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-parchment);
}
.folio-v5 .pfl-next > span {
  color: var(--cx-cons-faint);
  font: 500 10px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.folio-v5 .pfl-next a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cx-ink);
  font: 500 12.5px/1 var(--cx-font-ui);
  text-decoration: none;
  transition: gap 180ms ease;
}
.folio-v5 .pfl-next a em { font-style: normal; color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pfl-next a:hover { gap: 12px; }
.folio-v5 .pfl-check .pf-check-foot { margin: 0 clamp(16px, 3vw, 46px) 70px; }

/* the generating state between 02 and 03 keeps the strip above it. */
.folio-v5 .pfl-generating { background: var(--cx-cons-bone); }

/* ------------------------------------------------------------- 1024 / 900 */
@media (max-width: 1023px) {
  .folio-v5 .pfl-write-stage,
  .folio-v5 .pfl-check-stage { grid-template-columns: minmax(0, 1fr); }
  .folio-v5 .pfl-paper-col { position: static; }
  .folio-v5 .pfl-paper { max-height: 62vh; }
  .folio-v5 .pfl-check-paper { max-height: 62vh; }
}
@media (max-width: 900px) {
  .folio-v5 .pfl-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .folio-v5 .pfl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------- 640 */
@media (max-width: 640px) {
  .folio-v5 .pfl-hero { padding: 22px 16px 14px; }
  /* the 640 tier restates the display size, so it moves with it: 36 → 30. */
  .folio-v5 .pfl-hero h1 { font-size: 30px; }
  .folio-v5 .pfl-tools { padding: 12px 16px; }
  /* law 10 · every target is at least 40px on the phone. */
  .folio-v5 .pfl-tools nav { width: 100%; }
  .folio-v5 .pfl-tools nav button { flex: 1 1 28%; min-height: 40px; }
  .folio-v5 .pfl-progress { flex-basis: 100%; }
  .folio-v5 .pfl-grid { padding: 20px 16px; gap: 26px; }
  .folio-v5 .pfl-card-art { height: 300px; transform: none; }
  .folio-v5 .pfl-card-paper .letter-paper { transform: translateX(-50%) scale(.42); }
  .folio-v5 .pfl-showcase-footer { padding: 26px 16px 60px; }
  .folio-v5 .pfl-sources,
  .folio-v5 .pfl-sheet .cover-voice-grid { grid-template-columns: minmax(0, 1fr); }
  .folio-v5 .pfl-source,
  .folio-v5 .pfl-sheet .cover-voice-grid button { min-height: 64px; }
  .folio-v5 .pfl-blockers .cxs-btn { margin-left: 0; width: 100%; justify-content: center; }
  .folio-v5 .pfl-state { text-align: left; }
  .folio-v5 .pfl-write-stage,
  .folio-v5 .pfl-check-stage { padding: 12px 12px 70px; gap: 14px; }
  .folio-v5 .pfl-paper,
  .folio-v5 .pfl-check-paper { padding: 10px; max-height: 56vh; }
  .folio-v5 .pfl-paper-bar { padding: 10px 12px; }
  .folio-v5 .pfl-paper-controls { width: 100%; }
  .folio-v5 .pfl-paper-controls .cxs-btn,
  .folio-v5 .pfl-paper-controls .cxs-details-key { flex: 1 1 auto; min-height: 40px; justify-content: center; }
  .folio-v5 .pfl-rows-sheet { padding: 22px 14px 16px; }
  .folio-v5 .pfl-row-head .cxs-details-key { margin-left: 0; flex: 1 1 100%; min-height: 40px; justify-content: center; }
  .folio-v5 .pfl-panel-actions .cxs-panel-quiet,
  .folio-v5 .pfl-panel-actions .cxs-panel-danger { flex: 1 1 auto; min-height: 40px; }
  .folio-v5 .pfl-download-actions .cxs-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .folio-v5 .pfl-check .pf-check-foot { margin: 0 12px 60px; }
  .folio-v5 .pfl-next { padding: 12px 14px; }
  .folio-v5 .pfl-next a { flex: 1 1 100%; min-height: 40px; }
  /* law 10, finished: the strip's own steps, the stage's primary and the
     unsigned row's door are the last three targets under 40px on the phone.
     Scoped to this tool, so the portfolio's strip is untouched. */
  .folio-v5 .pfl-strip li > *,
  .folio-v5 .pfl-strip li:not(:has(a, button)) { min-height: 40px; }
  .folio-v5 .pfl-signed.none a { display: inline-block; padding: 11px 0; }
}

/* -------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  .folio-v5 .pfl-card-art,
  .folio-v5 .pfl-card-open,
  .folio-v5 .pfl-next a,
  .folio-v5 .pfl-source,
  .folio-v5 .pfl-tools nav button { transition: none !important; }
  .folio-v5 .pfl-card-art { transform: none; }
}

/* ==========================================================================
   PRINT — the letter, and only the letter. window.print() on step 04 must
   put the paper on the page with nothing of the application around it.
   ========================================================================== */
@media print {
  body.folio-v5 .pfl-launch .pf-launch-strip,
  body.folio-v5 .pfl-launch .pf-check-bar,
  body.folio-v5 .pfl-launch .pf-check-foot,
  body.folio-v5 .pfl-check-side,
  body.folio-v5 .pfl-paper-bar,
  body.folio-v5 .pfl-paper-hand,
  body.folio-v5 .pfl-rows-sheet,
  body.folio-v5 .pfl-words { display: none !important; }
  body.folio-v5 .pfl-launch,
  body.folio-v5 .pfl-write-stage,
  body.folio-v5 .pfl-check-stage,
  body.folio-v5 .pfl-paper-col {
    display: block !important;
    padding: 0 !important;
    background: none !important;
  }
  body.folio-v5 .pfl-paper,
  body.folio-v5 .pfl-check-paper {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  body.folio-v5 .pfl-paper .letter-paper,
  body.folio-v5 .pfl-check-paper .letter-paper {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}