.site-header .brand { font-family: var(--font-display); font-size: var(--step-1); }
.hero-title { font-family: var(--font-display); font-weight: 400; line-height: 1.05; }
.assure-line { margin-top: var(--s3); }

/* The reveal card, on screen and on paper: name on top, match in the middle, a flap below. */
.reveal-sample { display: grid; padding: 0 !important; overflow: hidden; }
.rc-top, .rc-mid, .rc-flap { padding: var(--s4) var(--s5); display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.rc-top { border-bottom: 2px dotted var(--line-strong); }
.rc-kicker { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-text); font-weight: 700; }
.rc-line { font-size: var(--step-1); }
.rc-label { color: var(--ink-2); }
.rc-mid { background: var(--brand-soft); padding-block: var(--s6); }
.rc-say { font-family: var(--font-display); font-size: var(--step-1); }
.rc-match { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); color: var(--brand-text); line-height: 1.1; }
.rc-flap { border-top: 2px dotted var(--line-strong); color: var(--ink-2); font-size: var(--step--1);
  background-image: radial-gradient(color-mix(in oklab, var(--accent) 22%, transparent) 3px, transparent 3.5px);
  background-size: 22px 22px; }

.draw-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .draw-grid { grid-template-columns: 1fr 1.25fr 1fr; align-items: start; } }
.step h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); display: flex; gap: var(--s3); align-items: center; margin: 0 0 var(--s3); }
.num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; }
textarea.input { width: 100%; resize: vertical; font: inherit; }
.pair-add { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
.pair-add select:first-child { grid-column: 1 / -1; }
.pair-add #pkind { grid-column: 1 / 2; }
.pair-add #pb { grid-column: 2 / 3; }
.pair-add button { grid-column: 1 / -1; }
.pairs { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.pairs li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--radius-s); background: var(--brand-soft); }
.status { min-height: 1.5em; margin: var(--s3) 0; }
#done { display: grid; gap: var(--s3); }
#done[hidden] { display: none; }
.matches { margin: var(--s3) 0 0; padding-left: 1.25rem; }
.narrow { max-width: var(--narrow); }

.print-sheet { display: none; }
@media print {
  @page { size: letter; margin: 0.4in; }
  body { background: #fff !important; }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; color: #1f1736; font-family: "Lato", sans-serif; }
  .print-head { font-size: 10pt; margin: 0 0 0.15in; }
  .pgrid { display: grid; grid-template-columns: 1fr 1fr; }
  .pcard { border: 1px dashed #8a82a0; break-inside: avoid; display: grid; grid-template-rows: 0.75in 0.75in 0.75in; }
  .pcard .rc-top, .pcard .rc-mid, .pcard .rc-flap { padding: 0.06in 0.15in; gap: 0.02in; align-content: center; }
  .pcard .rc-top { border-bottom: 1px dotted #8a82a0; }
  .pcard .rc-flap { border-top: 1px dotted #8a82a0; background: none; color: #5b5370; }
  .pcard .rc-kicker { color: #c2410c; font-size: 8pt; }
  .pcard .rc-line { font-size: 12pt; }
  .pcard .rc-mid { background: #f3effb; }
  .pcard .rc-say { font-size: 11pt; }
  .pcard .rc-match { font-size: 18pt; color: #9a3412; }
}

/* Lavender tints from the field, not the orange brand mixed into it, which reads muddy pink. */
:root { --tint: color-mix(in oklab, var(--bg) 55%, var(--surface)); }
.rc-mid, .pairs li { background: var(--tint); }
.section-alt { background: var(--surface); }
.steps { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 860px) {
  html[data-layout="specimen"] .hero .container { gap: var(--s8); }
  html[data-layout="specimen"] .reveal-sample { max-width: 36rem; justify-self: center; }
}
.steps + p { margin-top: var(--s5); }
.icon-btn { min-width: 44px; min-height: 44px; }
.hero .small.muted { color: var(--ink); }
@media (max-width: 859px) {
  html[data-layout="specimen"] .reveal-sample { max-width: 20rem; }
  .rc-mid { padding-block: var(--s4); }
  .rc-match { font-size: var(--step-3); }
}
@media (max-width: 480px) { .pair-add { grid-template-columns: 1fr; } .pair-add #pkind, .pair-add #pb { grid-column: 1 / -1; } }

/* Private links and a person's slip. */
.extras { margin-bottom: var(--s4); }
.extras .input { width: 100%; margin-bottom: var(--s2); }
.links-title { font-size: var(--step-3); margin: 0 0 var(--s3); }
.people { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s2); }
.people li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s3); border-radius: var(--radius-s); background: var(--tint); }
.people-actions { display: flex; gap: var(--s1); }
.keep-box { border: 2px dashed var(--brand); border-radius: var(--radius); padding: var(--s4); margin: var(--s4) 0; }
.keep-box h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); margin: 0 0 var(--s2); }
.keep-box .input { min-width: 0; }
.slip-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .slip-grid { grid-template-columns: 1.1fr 1fr; } }
.slip-card { margin: 0; width: 100%; justify-self: center; max-width: 34rem; }
.slip-side { display: grid; gap: var(--s4); }
.step-title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); margin: 0 0 var(--s2); }
.wish-text { white-space: pre-wrap; margin: 0; }
#my-wish { margin-bottom: var(--s3); }
[hidden] { display: none !important; }
#slip-details { background: var(--surface); padding: 0.15rem 0.6rem; border-radius: var(--radius-s); color: var(--ink); }
.people-actions { flex-wrap: wrap; }
.people-actions .btn, .pairs .icon-btn { min-height: 44px; }
.rc-flap { font-size: var(--step-0); }