/* ── The Portrait reading — shared styles ────────────────────────────
   The single source of truth for the Portrait reading's typography and layout,
   used by BOTH the live Portrait surface (anchor-stories/coverage/) and the
   sample preview (sample-portrait/). Extracted verbatim from the coverage page
   so the sample can never drift from the real thing.

   Built on the product design tokens — editorial serif, ink + gold, with a
   single vermilion mark on the Mirror. The Range is a quiet typeset tally,
   never a chart. The Bridge is a quiet inline link, not a button.

   Cache-buster: bump ?v= on every <link> to this file in one commit (currently
   ?v=1). Referenced by coverage/index.html and sample-portrait/index.html. */
  .portrait { max-width: 41rem; margin: 26px 0 0; }
  .pt-meta {
    font-family: var(--serif); font-style: italic; font-size: 16px;
    color: var(--ink-faint); line-height: 1.6; margin: 0 0 30px;
    padding-bottom: 22px; border-bottom: 1px solid var(--rule);
  }
  .pt-selfread { margin: 0 0 32px; padding-left: 16px; border-left: 1px solid var(--gold); }
  .pt-selfread--invite { border-left-color: var(--fill-border); }
  .pt-selfread-label {
    display: block; font-family: var(--ui); font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
  }
  .pt-selfread p {
    margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 22px; line-height: 1.3; color: var(--ink);
  }
  .pt-selfread-note { display: block; margin-top: 9px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); font-style: normal; }
  .pt-beat { margin: 0 0 34px; }
  .pt-beat-tag {
    display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
    font-family: var(--ui); font-size: 10px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  }
  .pt-beat-tag::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
  .pt-beat-body p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.66; color: var(--ink); }
  .pt-beat-body em { font-style: italic; color: var(--ink); }
  .pt-beat--mirror { padding-left: 18px; border-left: 2px solid var(--accent-ink); }
  .pt-beat--mirror .pt-beat-tag { color: var(--accent-ink); }
  .pt-beat--mirror .pt-beat-tag::after { background: linear-gradient(90deg, rgba(200,66,31,.4), var(--rule) 42%); }
  .pt-tally { margin: 16px 0 0; }
  .pt-tally-row {
    display: flex; align-items: baseline; gap: 14px; padding: 7px 0;
    border-top: 1px solid var(--rule);
  }
  .pt-tally-row:last-child { border-bottom: 1px solid var(--rule); }
  .pt-tally-name { flex: 0 0 auto; min-width: 12rem; font-family: var(--ui); font-size: 13px; color: var(--ink-faint); }
  .pt-tally-row.lead .pt-tally-name { color: var(--ink); font-weight: 600; }
  .pt-marks { color: var(--gold); letter-spacing: .26em; font-size: 13px; line-height: 1; }
  .pt-marks--empty { color: var(--ink-faint); letter-spacing: 0; font-style: italic; font-family: var(--serif); font-size: 14px; opacity: .75; }
  .pt-bridge-link {
    display: inline-block; margin-top: 13px; font-family: var(--serif); font-style: italic; font-size: 17px;
    color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px;
    transition: color .2s, border-color .2s;
  }
  .pt-bridge-link:hover { color: var(--gold); }
  .pt-bridge-link .pt-arrow { font-style: normal; }
  .pt-edit { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap; }
  .pt-edit:hover { border-bottom-color: var(--gold); }
  .pt-nudge {
    display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0; padding: 13px 16px;
    background: var(--fill-bg); border: 1px solid var(--fill-border); border-radius: 8px;
    font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--ink-mid);
  }
  .pt-nudge a { color: var(--navy); font-weight: 600; }
  .pt-nudge-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 6px; }
  .pt-foot {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule);
    font-family: var(--ui); font-size: 11.5px; color: var(--ink-faint); letter-spacing: .02em;
  }
  .pt-foot-mark { letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

  /* Empty-state link to the sample preview. Shown in the "taking shape" state on
     the live surface (before three legible stories exist), so a visitor can read
     a finished portrait before writing their own. Quiet, gold, never a button. */
  .pt-sample {
    display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
    margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule);
    font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--ink-faint);
  }
  .pt-sample a {
    font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--gold);
    text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap;
  }
  .pt-sample a:hover { border-bottom-color: var(--gold); }

  @media (max-width: 600px) {
    .pt-tally-name { min-width: 8.5rem; }
    .pt-selfread p { font-size: 19px; }
    .pt-beat-body p { font-size: 16.5px; }
  }