/* Rarity: the pieces only this page uses. The odds table, stamps, specimen pair, badge plate and
   FAQ come from site.css (the homepage's Rarity and Progress sections and the page kit). */

/* ---------- sections, laid out like the homepage's plates ---------- */
.r-sec { scroll-margin-top: 24px; }
.r-sec + .r-sec { margin-top: 120px; }
.r-sec > .plate { margin-bottom: 36px; }
.r-sec h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.06; }
.r-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.r-copy p { margin-top: 20px; font-size: 18px; color: var(--ink-2); max-width: 30em; }
.r-copy p:has(> .link-arrow) { margin-top: 26px; }

/* ---------- tables in the odds-card look ---------- */
.ledger-card { background: var(--paper-hi); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 0 var(--sand); }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger caption { caption-side: top; text-align: left; padding: 20px 24px 16px; }
.ledger-title { display: block; font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 72, 'SOFT' 100; font-size: 28px; line-height: 1.1; }
.ledger-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.ledger th, .ledger td { padding: 14px 24px; text-align: left; border-top: 1px solid var(--rule); vertical-align: middle; font-size: 16px; }
.ledger thead th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding-top: 11px; padding-bottom: 11px;
}
.ledger tbody th { font-weight: 500; }
.ledger .num { text-align: right; white-space: nowrap; }
.ledger thead .num { white-space: normal; }
.ledger td.num { font-family: var(--display); font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: 20px; font-weight: 500; }
.ledger .stamp { font-size: 11.5px; }
.xp-table td.num:nth-child(2) { font-family: var(--ui); font-size: 15px; color: var(--ink-2); }

/* stars, in the app's amber, deepened for paper */
.stars { display: inline-flex; gap: 2px; color: #C58B00; vertical-align: middle; }
.stars svg { width: 16px; height: 16px; }
.stars-table tbody th { font-weight: 600; }
.stars-table .gold td:first-child .stars { color: #B07800; }
.stars-table .gold th { color: var(--st-legendary); }

/* ---------- catching again: the two specimen cards ---------- */
.r-again .pair { margin: 0 0 0 40px; }
.r-again .spec-sm { --w: 232px; }
.r-again .spec-b { left: 256px; }
.r-again .pair-note { top: 400px; width: 230px; }

.page-head h1 { text-wrap: balance; }

/* ---------- the first-catch footnote ---------- */
.exception { background: var(--sand-lo); border: 1px solid #E2D6C1; padding: 28px 30px 30px; margin-top: 8px; max-width: 34rem; }
.exception-k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); }
.exception h3 { margin-top: 8px; font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: 24px; line-height: 1.2; }
.exception p:not(.exception-k) { margin-top: 12px; color: #3E3E4A; }

/* ---------- rarity badges ---------- */
.r-badges { margin-top: 48px; padding: 30px 26px 22px; }
.r-badges-h { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 20px; }
.r-badges .badges + .r-badges-h { margin-top: 30px; padding-top: 24px; border-top: 1px solid #D6C8AF; }
.r-badges .badges.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r-badges .badges { gap: 26px 8px; }
.r-badges .badges small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.r-sec .more { margin-top: 28px; }

/* ---------- questions, the notice ---------- */
.r-faq { margin-top: 120px; padding-top: 72px; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.r-faq .faq-head h2 { font-size: clamp(34px, 3.6vw, 52px); }
.r-notice { margin-top: 64px; max-width: 52rem; }

@media (max-width: 980px) {
  .r-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .r-sec + .r-sec { margin-top: 96px; }
  .r-again .pair { margin-left: 8px; }
  .r-faq { margin-top: 96px; padding-top: 56px; }
}

@media (max-width: 560px) {
  .r-sec + .r-sec { margin-top: 80px; }
  .r-sec > .plate { margin-bottom: 26px; }
  .r-sec h2 { font-size: 32px; }
  .r-copy p { font-size: 17px; }
  .r-again .pair { margin-left: 0; }
  .r-again .spec-sm { --w: auto; }
  .r-again .spec-b { left: auto; }
  .ledger caption { padding: 14px 14px 12px; }
  .ledger-title { font-size: 22px; }
  .ledger th, .ledger td { padding: 11px 10px; font-size: 15px; }
  .ledger thead th { font-size: 10px; letter-spacing: 0.08em; }
  .ledger td.num { font-size: 17px; }
  .ledger .stamp { font-size: 9.5px; letter-spacing: 0.1em; padding: 5px 4px 4px 6px; }
  .xp-table td.num:nth-child(2) { font-size: 13px; }
  .stars svg { width: 12px; height: 12px; }
  .stars { gap: 1px; }
  .exception { padding: 22px 20px 24px; }
  .exception h3 { font-size: 21px; }
  .r-badges { padding: 22px 12px 16px; }
  .r-badges .badges, .r-badges .badges.five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 6px; }
  .r-badges .badges small { font-size: 11.5px; }
  .r-faq { margin-top: 80px; padding-top: 48px; }
  .r-notice { margin-top: 48px; }
}