/* 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:14px 22px 72px}
a{color:var(--gold)}
a:hover{color:var(--gold-soft)}
/* The promo strip, pinned to the top of the viewport.
   Sticky costs something on these pages: they exist to rank, and Google
   penalises banners that obscure content on a phone. The mitigation is height —
   the second line is dropped below 520px so the pinned bar is one line and
   about 5% of a phone viewport, small enough to read past. The background must
   stay fully opaque or the prose scrolls visibly through it. */
/* The bar pins, but the gap beneath it must pin too. With the background on the
   link alone, prose scrolls visibly through the margin below it — a clipped
   sliver of text riding under the bar the whole way down the chapter. The
   wrapper is what sticks; it paints the page background across the full gap. */
.promo-bar{
  position:sticky;top:0;z-index:30;
  background:var(--bg);padding:10px 0 12px;margin:0 0 10px
}
.promo{
  display:block;padding:11px 16px;
  background:#12281D;
  border:1px solid rgba(198,163,83,.42);border-radius:11px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.85);
  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}
/* Pinned, the sub-line is the difference between 5% and 10% of a phone screen
   for the whole of a 19,000-character chapter. The headline carries the offer. */
@media(max-width:520px){
  .promo{font-size:.88rem;padding:9px 13px}
  .promo .sub{display:none}
  .promo-bar{padding:8px 0 10px}
}
.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:86px;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 .toc-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-2);font-weight:650;margin:0 0 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)}
/* Advertising slot — WEBSITE ONLY.
   It exists here, in the page generator, and nowhere near index.html or www/,
   which are the shipped iOS bundle. The App Store listing states the app has no
   ads and the privacy policy states it collects nothing; both must stay true.
   Putting the slot in the generator rather than the app shell is what makes
   that structural rather than a matter of remembering.
   An unfilled slot is collapsed rather than a gap — see the rule below. */
.adslot{margin:30px 0;text-align:center;min-height:0}
/* Collapse the slot while nothing has been put in it.
   :not(:has(*)) and not :empty, which is what this was and which never once
   matched: browsers disqualify :empty on any text node, whitespace included, so
   the newline after the opening tag was enough — and the HTML comment that used
   to sit inside the aside guaranteed it. Nothing looked wrong, because a 0px box
   with no border or padding lets its margins collapse through it and into the
   CTA below, so the rule was dead and the layout was correct for an unrelated
   reason. That stops being true the moment this element gets a border, padding
   or a rendered .adslot-label.
   :has() ignores text and comments and asks the question actually meant here —
   are there any child ELEMENTS — so the slot cannot be un-collapsed again by
   someone dropping a comment back into it. An ad script that injects an <ins> or
   an <iframe> gives it an element child, and the margins come back. */
.adslot:not(:has(*)){display:none;margin:0}
.adslot > *{max-width:100%}
.adslot-label{
  display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);opacity:.55;margin-bottom:7px
}
.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}}