:root { --brand: #135e52; --brand-ink: #fff; --accent: #d9483b; --ivory: #f7f1e3; --bone: #d9c9a3; --tile-ink: #1d2a26; }
.hero-title { font-weight: 650; letter-spacing: -0.02em; }
.hero-title em { font-style: normal; color: var(--brand-text); }
.hero { background: radial-gradient(120% 90% at 100% 0%, var(--brand-soft), transparent 60%); }
@media (min-width: 860px) { .hero .container { grid-template-columns: 1.05fr 1fr; gap: var(--s6); } }

/* The setup card: the free printable, drawn as an index card on ivory stock. */
.setup-card { background: var(--ivory); color: var(--tile-ink); border-radius: var(--radius-l); padding: var(--s5); box-shadow: var(--shadow-3); border: 1px solid var(--bone); position: relative; }
.setup-card::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed var(--bone); border-radius: calc(var(--radius-l) - 6px); pointer-events: none; }
.setup-card h2, .setup-card h3 { color: var(--tile-ink); }
.setup-card .card-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.setup-card .card-head img { width: 40px; height: 40px; }
.setup-card .card-head h2 { font-size: var(--step-1); margin: 0; line-height: 1.15; }
.setup-card .card-head p { margin: 0; font-size: var(--step--1); color: #4b5a55; }
.setup-card ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s2); }
.setup-card li { line-height: 1.4; }
.setup-card li b { color: #0e4a40; }
.setup-card .card-foot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--bone); font-size: var(--step--1); color: #4b5a55; display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.no-pass { display: inline-block; background: #b8382c; color: #fff; font-weight: 700; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: var(--pill); vertical-align: middle; }

/* A small table drawn from above: one seat per player, empty seats outlined. */
.table-diagram { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto auto auto; gap: var(--s2); align-items: center; justify-items: center; max-width: 260px; margin: 0 auto var(--s4); }
.table-diagram .felt { grid-column: 2; grid-row: 2; width: 100%; aspect-ratio: 1; background: var(--brand); border-radius: 18px; display: grid; place-items: center; color: #fff; font: 700 var(--step--1)/1.2 var(--font-body); text-align: center; padding: 8px; }
.seat { font-size: var(--step--1); font-weight: 700; padding: 0.3rem 0.6rem; border-radius: var(--pill); background: #fff; color: var(--tile-ink); border: 2px solid var(--brand); white-space: nowrap; }
.seat.empty { background: transparent; border-style: dashed; border-color: #55635e; color: #55635e; font-weight: 400; }
.seat.n { grid-column: 2; grid-row: 1; } .seat.s { grid-column: 2; grid-row: 3; }
.seat.w { grid-column: 1; grid-row: 2; } .seat.e { grid-column: 3; grid-row: 2; }

/* Choice cards on the home page. */
.choices { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--s5); box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease; }
.choice:hover, .choice:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.choice .count { font: 650 var(--step-4)/1 var(--font-display); color: var(--brand-text); }
.choice h2 { font-size: var(--step-1); margin: var(--s2) 0; }
.choice p { color: var(--ink-2); margin: 0 0 var(--s3); }
.choice .go { font-weight: 700; color: var(--brand-text); }

.compare-wrap { overflow-x: auto; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s6); }
.prose h2:first-child { margin-top: 0; }
.variant { border-left: 4px solid var(--brand); padding: var(--s1) 0 var(--s1) var(--s4); margin: var(--s4) 0; }
.variant.house { border-left-color: var(--accent); }
.variant h3 { margin-bottom: var(--s1); }
.variant p { margin: 0; color: var(--ink-2); }
.tag { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.sources li { margin-bottom: var(--s2); }
.crumbs { font-size: var(--step--1); margin-bottom: var(--s2); }
.crumbs a { color: var(--ink-2); }

@media print {
  body * { visibility: hidden; }
  .setup-card, .setup-card * { visibility: visible; }
  .setup-card { position: fixed; left: 0; top: 0; width: 5in; box-shadow: none; transform: none; }
  .hero-visual { position: static; }
  .section, .site-header, .skip-link, footer { display: none; }
  .table-diagram .felt { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-pass { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.site-header nav a { white-space: nowrap; }
@media (max-width: 480px) { .site-header nav { gap: var(--s3); } .brand { white-space: nowrap; } }
.choice { display: flex; flex-direction: column; }
.choice .go { margin-top: auto; }
@media (max-width: 440px) {
  .site-header .container { flex-wrap: wrap; padding-block: var(--s2); }
  .site-header .container .theme-toggle { margin-left: auto; }
  .site-header nav { order: 3; width: 100%; margin-left: 0; gap: var(--s4); padding-top: var(--s1); }
}
@media (max-width: 640px) {
  .setup-card { padding: var(--s4); }
  .table-diagram { max-width: 210px; margin-bottom: var(--s3); }
  .table-diagram .felt { aspect-ratio: 1.6; }
  .hero { padding-block: var(--s4) var(--s5); }
}
.choice:active { transform: translateY(0); box-shadow: var(--shadow-1); border-color: var(--brand); }
.print-line { margin-top: var(--s4); }

/* Reference cards: definition lists and small tables printed on the ivory card. */
.cheat { margin: 0; display: grid; gap: var(--s2); }
.cheat dt { font-weight: 700; color: #0e4a40; }
.cheat dd { margin: 0 0 var(--s1); line-height: 1.4; }
.tcount, .sheet { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tcount th, .tcount td, .sheet th, .sheet td { text-align: left; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--bone); color: var(--tile-ink); vertical-align: top; }
.tcount .total td, .sheet .total td { border-top: 2px solid var(--brand); font-weight: 700; }
.sheet td { height: 1.9rem; }
.sheet th:first-child, .sheet td:first-child { width: 3.2rem; }
.setup-card .small { margin: var(--s3) 0 0; line-height: 1.4; }
.setup-card table + ol, .setup-card table + p { margin-top: var(--s3); }
.faq { margin: var(--s4) 0; }
.faq h3 { font-size: var(--step-0); margin-bottom: var(--s1); }
.faq p { margin: 0; color: var(--ink-2); }
.related li { margin-bottom: var(--s2); }
.guides { display: grid; gap: var(--s2) var(--s5); padding-left: 1.2em; }
@media (min-width: 640px) { .guides { grid-template-columns: 1fr 1fr; } }
@media print { .tcount th, .tcount td, .sheet th, .sheet td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }