/* Generated by scripts/build-learn.mjs — edit that, not this. */
:root{
  --bg:#06110C; --panel:#102A1F; --panel-2:#163527; --stroke:#2C4A3B;
  --gold:#C6A353; --gold-soft:#E6D5A8; --text:#F2EFE6; --text-2:#9DB2A6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.65;
}
.wrap{max-width:760px;margin:0 auto;padding:34px 22px 72px}
a{color:var(--gold)}
a:hover{color:var(--gold-soft)}
/* The promo strip. Deliberately NOT sticky: these pages exist to rank, and a
   banner that covers content on a phone is the pattern Google penalises. This
   one pushes the page down and scrolls away, so it is seen once on arrival and
   never again — which is also roughly how often anyone wants to see it. */
.promo{
  display:block;margin:0 0 20px;padding:11px 16px;
  background:linear-gradient(90deg,rgba(198,163,83,.15),rgba(198,163,83,.07));
  border:1px solid rgba(198,163,83,.42);border-radius:11px;
  color:var(--gold-soft);text-decoration:none;text-align:center;
  font-size:.93rem;font-weight:600;line-height:1.45
}
.promo:hover{background:rgba(198,163,83,.22);border-color:var(--gold);color:var(--gold-soft)}
.promo .go{opacity:.75;white-space:nowrap}
.promo .sub{display:block;font-weight:400;font-size:.84rem;color:var(--text-2);margin-top:2px}
@media(max-width:520px){.promo{font-size:.88rem;padding:10px 13px}}
.crumb{font-size:.85rem;color:var(--text-2);margin-bottom:22px}
.crumb a{text-decoration:none}
h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.caption{color:var(--text-2);margin-top:8px;font-size:1.03rem}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--stroke),transparent);margin:26px 0}
h2{
  font-size:1.32rem;font-weight:650;color:var(--gold-soft);
  margin:38px 0 12px;scroll-margin-top:18px;letter-spacing:-.01em
}
h2 a.anchor{opacity:0;text-decoration:none;font-weight:400;margin-left:8px}
h2:hover a.anchor{opacity:.5}
p{margin:0 0 12px;color:#DDE6DF}
strong,em{color:var(--text)}
ul{margin:0 0 12px 22px;color:#DDE6DF}
li{margin:7px 0}
/* Reference tables are wider than a phone: scroll each one, never the page. */
.rules-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 14px}
table{border-collapse:collapse;margin:0;width:100%;min-width:100%}
th,td{border:1px solid var(--stroke);padding:7px 11px;font-size:.9rem;text-align:left}
th{background:var(--panel-2);color:var(--gold-soft)}
/* Suit pips inline in prose — the card-face shades vanish against the felt. */
.cs{font-weight:800}
.cs.s-S{color:var(--text)}
.cs.s-C{color:#9FB0AE}
.cs.s-H{color:#F1615A}
.cs.s-D{color:#EFA15A}
.toc{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;padding:18px 22px;margin:24px 0}
.toc h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-2);font-weight:650;margin-bottom:10px}
.toc ol{margin:0 0 0 20px}
.toc li{margin:5px 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.chapters{list-style:none;margin:0}
.chapters li{margin:0 0 12px}
.chapters a{
  display:block;background:var(--panel);border:1px solid var(--stroke);
  border-radius:14px;padding:17px 20px;text-decoration:none;color:var(--text)
}
.chapters a:hover{border-color:var(--gold);color:var(--text)}
/* These are spans inside the card's <a>; without display:block they run together
   on one line and the margins do nothing. */
.chapters .t{display:block;font-weight:650;color:var(--gold-soft);font-size:1.08rem}
.chapters .c{display:block;color:var(--text-2);font-size:.92rem;margin-top:3px}
.chapters .n{display:block;color:var(--text-2);font-size:.8rem;margin-top:8px;opacity:.75;line-height:1.45}
.play{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--gold);border-radius:15px;padding:22px;margin:36px 0 0;text-align:center
}
.play .h{color:var(--gold-soft);font-weight:650;font-size:1.12rem;margin-bottom:5px}
.play p{color:var(--text-2);font-size:.92rem;margin-bottom:16px}
.btn{
  display:inline-block;background:var(--gold);color:#0B1D15;font-weight:700;
  padding:12px 28px;border-radius:10px;text-decoration:none
}
.btn:hover{background:var(--gold-soft);color:#0B1D15}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Secondary: same size as the primary so neither reads as an afterthought,
   outlined rather than filled so the browser route stays the louder one. */
.btn-2{background:none;color:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
.btn-2:hover{background:rgba(198,163,83,.14);color:var(--gold-soft)}
.play .note{margin:14px 0 0;font-size:.84rem;color:var(--text-2)}
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:34px;font-size:.93rem}
.pager a{text-decoration:none;max-width:48%}
.pager .lbl{display:block;color:var(--text-2);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em}
footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--stroke);text-align:center;color:var(--text-2);font-size:.85rem}
footer a{margin:0 9px}
@media(max-width:520px){.wrap{padding:26px 18px 56px}h1{font-size:1.6rem}h2{font-size:1.18rem}}