/* Web pública de Flopmortem: la estética de la app (casino clásico, oscuro) en páginas de lectura. Las fuentes se
   sirven desde la propia web (RGPD: nada de Google Fonts). La portada trae además sus estilos (landing.html). */
@font-face { font-family:"Inter"; src:url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight:400 900; font-display:swap; }
@font-face { font-family:"Playfair Display"; font-style:italic;
  src:url("/fonts/playfair-display-latin-wght-italic.woff2") format("woff2"); font-weight:400 900; font-display:swap; }

:root { --bg:#0c1712; --card:#12221b; --card2:#16291f; --border:#2b3d32; --ink:#f2ead6; --ink2:#c2b89f;
  --muted:#9a917c; --gold:#d4af5a; --gold-rgb:212,175,90; --felt:#1d6b47; --felt-deep:#0b3423; --ivory:#f6efdc;
  --serif:"Playfair Display", Georgia, serif; --sans:"Inter", system-ui, sans-serif; --gutter:clamp(1rem, 4vw, 3.5rem);
  --read:46rem; color-scheme:dark; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 1.0625rem/1.65 var(--sans);
  font-variant-numeric:lining-nums; }
a { color:var(--gold); text-underline-offset:.18em; }
a:hover { color:var(--ivory); }
img { max-width:100%; height:auto; }
.skip { position:absolute; left:-999px; top:0; background:var(--gold); color:#111; padding:.5rem 1rem; z-index:100; }
.skip:focus { left:1rem; }

/* Cabecera */
.site-head { position:sticky; top:0; z-index:50; background:rgba(12,23,18,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); }
.site-head-in { max-width:1180px; margin:0 auto; padding:.7rem var(--gutter); display:flex; align-items:center; gap:2rem; }
.site-logo { display:flex; line-height:0; }
.site-logo svg { height:34px; width:auto; }
.site-nav { display:flex; gap:1.6rem; flex:1; }
.site-nav a { color:var(--ink2); text-decoration:none; font-size:.98rem; padding:.3rem 0; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current] { color:var(--ink); border-bottom-color:var(--gold); }
.site-ctas { display:flex; gap:.6rem; }
.btn { display:inline-block; padding:.5rem 1.05rem; border-radius:999px; font-weight:600; font-size:.95rem;
  text-decoration:none; border:1px solid var(--border); color:var(--ink); white-space:nowrap; transition:transform .15s, background .15s; }
.btn:hover { transform:translateY(-1px); color:var(--ink); }
.btn.primary { background:radial-gradient(ellipse at 30% 20%, var(--felt), var(--felt-deep)); border-color:rgba(var(--gold-rgb),.45); color:var(--ivory); }
.btn.ghost:hover { background:rgba(var(--gold-rgb),.12); }
@media (max-width:760px) {
  .site-nav { display:none; }
  .site-head-in { justify-content:space-between; gap:1rem; }
  .site-logo svg { height:28px; }
  .site-ctas .ghost { display:none; }
}

/* Páginas de lectura */
.page { max-width:1180px; margin:0 auto; padding:2.2rem var(--gutter) 4rem; }
.crumbs { font-size:.9rem; color:var(--muted); margin-bottom:1.4rem; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--gold); }
.crumbs span[aria-hidden] { margin:0 .45rem; opacity:.6; }
.prose { max-width:var(--read); }
.prose h1, .hub h1 { font:700 clamp(2rem, 4.4vw, 3rem)/1.12 var(--serif); margin:0 0 1rem; letter-spacing:-.01em; }
.prose h2 { font:700 1.65rem/1.25 var(--serif); margin:2.6rem 0 .8rem; }
.prose h3 { font:700 1.25rem/1.3 var(--serif); margin:1.8rem 0 .6rem; }
.prose p, .prose li { color:var(--ink2); }
.prose strong { color:var(--ink); }
.prose em { color:var(--ink); }
.prose li { margin:.35rem 0; }
.prose code { background:var(--card2); border:1px solid var(--border); border-radius:5px; padding:.08em .35em; font-size:.92em; color:var(--ink); }
.lead { font-size:1.2rem; color:var(--ink2); }
.meta { color:var(--muted); font-size:.92rem; margin:-.3rem 0 1.6rem; }
.table-wrap { overflow-x:auto; margin:1.2rem 0; }
table { border-collapse:collapse; width:100%; font-size:.98rem; }
th, td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--border); }
th { color:var(--ink); font-weight:600; background:var(--card); }
td { color:var(--ink2); }
.box { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.2rem 1.4rem; margin:1.6rem 0; }
.box h2 { margin-top:0; }
.formula { font-size:1.05rem; color:var(--ink); border-left:3px solid var(--gold); padding:.2rem 0 .2rem 1rem; }
.cta { background:radial-gradient(ellipse at 20% 0%, #17573a, #0b2a1c 75%); border:1px solid rgba(var(--gold-rgb),.35);
  border-radius:18px; padding:1.8rem; margin:3rem 0 1rem; max-width:var(--read); }
.cta h2 { font:700 1.6rem/1.2 var(--serif); margin:0 0 .5rem; }
.cta p { color:#d7cfb9; margin:0 0 1.2rem; }

/* Índices (estadísticas, guías) y tarjetas */
.hub { max-width:1180px; }
.hub > .lead { max-width:var(--read); }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; margin:1.6rem 0; padding:0; list-style:none; }
.cards a { display:block; height:100%; background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:1.1rem 1.2rem; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; }
.cards a:hover { border-color:rgba(var(--gold-rgb),.6); transform:translateY(-2px); }
.cards a > b { display:block; font:700 1.2rem/1.25 var(--serif); margin-bottom:.35rem; }
.cards a > span:last-child { display:block; color:var(--muted); font-size:.95rem; }
.related { margin-top:2.6rem; }
.related h2 { font:700 1.3rem var(--serif); }

/* Estrategias: la mano de ejemplo paso a paso */
.pc { display:inline-block; padding:0 .3em; margin:0 .08em; border-radius:4px; background:var(--ivory); color:#1f1b14;
  font-weight:700; font-size:.92em; line-height:1.45; white-space:nowrap; }
.pc.h, .pc.d { color:#b3202b; }
.hand-steps { list-style:none; padding:0; margin:1.2rem 0; counter-reset:paso; }
.hand-steps li { position:relative; padding:.8rem 1rem; border:1px solid var(--border); border-radius:12px;
  background:var(--card); margin:.6rem 0; --v:#5b8fd6; border-left:3px solid var(--v); }
.hand-steps .st { color:var(--ink); }
.hand-steps .st b { font-family:var(--serif); color:var(--gold); margin-right:.3rem; }
.hand-steps .cm { color:var(--ink2); margin-top:.35rem; }
.hand-steps .vb { display:inline-block; font-size:.8rem; font-weight:700;
  color:var(--v); border:1px solid var(--v); border-radius:999px; padding:0 .5rem; margin-right:.3rem; }
.hand-steps .v-bien { --v:#4caf7a; }
.hand-steps .v-dudoso { --v:#ec835a; }
.hand-steps .v-error { --v:#d03b3b; }

/* Página de lectura con columna lateral (ficha, índice, categorías). En el móvil la columna va encima del texto. */
.doc-head { max-width:52rem; }
.doc-head h1 { font:700 clamp(2rem, 4.4vw, 3.1rem)/1.1 var(--serif); margin:0 0 1rem; letter-spacing:-.01em; }
.doc-grid { display:grid; grid-template-columns:minmax(0, var(--read)) minmax(16rem, 19rem); justify-content:space-between;
  gap:3rem; align-items:start; margin-top:1.6rem; }
.doc-grid > .side { grid-column:2; grid-row:1; position:sticky; top:5.2rem; }
.doc-grid > .prose { grid-column:1; grid-row:1; }
.doc-grid > .prose > :first-child { margin-top:0; }
.sheet { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.2rem 1.3rem; }
.sheet h2 { font:700 1.2rem/1.25 var(--serif); margin:0 0 1rem; }
.sheet h3 { font:700 1rem var(--serif); color:var(--ivory); margin:1.3rem 0 .5rem; }
.sheet-note { font-size:.9rem; color:var(--muted); margin:.6rem 0 0; }
.sheet-note strong { color:var(--ink); }
.side-links { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.side-links a { display:inline-block; padding:.2rem .7rem; border:1px solid var(--border); border-radius:999px; font-size:.9rem;
  color:var(--ink2); text-decoration:none; }
.side-links a:hover { border-color:var(--gold); color:var(--ink); }
.toc ol { margin:0; padding-left:1.2rem; }
.toc li { margin:.35rem 0; color:var(--muted); font-size:.95rem; }
.toc a { color:var(--ink2); text-decoration:none; }
.toc a:hover { color:var(--gold); }
.checks { list-style:none; margin:0; padding:0; }
.checks li { position:relative; padding-left:1.3rem; margin:.55rem 0; color:var(--ink2); font-size:.97rem; }
.checks li::before { content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px rgba(var(--gold-rgb), .18); }
.prose h2[id], .prose h3[id] { scroll-margin-top:5.5rem; }
@media (max-width:960px) {
  .doc-grid { grid-template-columns:minmax(0, 1fr); gap:1.6rem; }
  .doc-grid > .side, .doc-grid > .prose { grid-column:auto; grid-row:auto; }
  .doc-grid > .side { position:static; }
}

/* El medidor: la regla de la estadística con la zona sana en oro y los dos lados del leak */
.meter { margin:0 0 1.2rem; }
.meter figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.4rem;
  font-size:.9rem; color:var(--muted); }
.meter figcaption strong { font:700 1.45rem/1 var(--serif); color:var(--ivory); white-space:nowrap; }
.rail { position:relative; height:16px; border-radius:999px; overflow:hidden; background:#0b2418;
  border:1px solid #24402f; box-shadow:inset 0 2px 4px rgba(0,0,0,.55); }
.rail span { position:absolute; top:0; bottom:0; }
.rail .lowz { left:0; width:var(--a); background:repeating-linear-gradient(135deg, rgba(91,143,214,.3) 0 3px, transparent 3px 7px); }
.rail .highz { left:var(--b); right:0; background:repeating-linear-gradient(135deg, rgba(217,103,63,.3) 0 3px, transparent 3px 7px); }
.rail .zone { left:var(--a); width:calc(var(--b) - var(--a)); min-width:5px; border-radius:3px;
  background:linear-gradient(#ecd08a, #c49a42); box-shadow:0 0 14px rgba(var(--gold-rgb), .6); }
.ticks { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-top:.3rem; }
.meter.small { margin:.2rem 0 .7rem; }
.meter.small figcaption { font-size:.8rem; margin-bottom:.3rem; }
.meter.small figcaption strong { font-size:1.05rem; }
.meter.small .rail { height:9px; }
.nometer { display:block; font-size:.85rem; color:var(--gold); margin:.2rem 0 .7rem; }

/* La fórmula como fracción */
.frac { display:inline-grid; text-align:center; margin:.4rem 0 .6rem; padding:1rem 1.4rem; background:var(--card);
  border:1px solid var(--border); border-radius:14px; font:600 1.12rem/1.4 var(--serif); color:var(--ivory); }
.frac .num { padding:0 .4rem .55rem; }
.frac .den { padding:.55rem .4rem 0; border-top:2px solid var(--gold); }
.frac-note { font-size:.95rem; color:var(--muted); margin-top:0; }

/* Demasiado bajo / demasiado alto: los mismos colores que los lados del medidor */
.split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0; }
.split > div { background:var(--card); border:1px solid var(--border); border-top:3px solid var(--c); border-radius:12px; padding:1rem 1.1rem; }
.split .side-low { --c:#5b8fd6; }
.split .side-high { --c:#d9673f; }
.prose .split h3 { margin:0 0 .4rem; font:700 1.1rem var(--serif); color:var(--c); }
.split p { margin:0; font-size:.98rem; }
@media (max-width:600px) { .split { grid-template-columns:1fr; } }

/* Barras (margen de error, pot odds, proyectos, aperturas) */
.chart { margin:1.6rem 0; }
.chart figcaption, .table-fig figcaption, .map-fig figcaption, .legend { font-size:.9rem; color:var(--muted); }
.chart figcaption { margin-bottom:.8rem; }
.bars { list-style:none; margin:0; padding:0; }
.bars li { display:grid; grid-template-columns:8rem minmax(0, 1fr) 7.5rem; gap:.9rem; align-items:center; padding:.3rem 0; margin:0; }
.bars .lbl { color:var(--ink2); font-size:.95rem; }
.bars .val { color:var(--ivory); font-weight:600; font-size:.95rem; text-align:right; }
.bar { position:relative; display:block; height:12px; border-radius:999px; overflow:hidden; background:#0b2418; }
.bar > span { position:absolute; left:0; top:0; bottom:0; border-radius:inherit; }
.bar > span:first-child { width:var(--w); background:linear-gradient(90deg, #b8913c, #ecd08a); }
.bar.duo > span:first-child { background:rgba(var(--gold-rgb), .35); }
.bar.duo > span:nth-child(2) { width:var(--w2); background:linear-gradient(90deg, #b8913c, #ecd08a); }
.bar.inline { display:inline-block; width:7rem; height:10px; vertical-align:middle; margin-right:.5rem; }
.draws .bar { min-width:8rem; }
.draws td { white-space:nowrap; }
.key { display:inline-block; width:.8rem; height:.6rem; border-radius:2px; margin:0 .2rem 0 .4rem; vertical-align:middle; }
.key.k1 { background:rgba(var(--gold-rgb), .35); }
.key.k2 { background:var(--gold); margin-left:0; }
tfoot th, tfoot td { color:var(--ink); font-weight:600; background:var(--card); }
@media (max-width:600px) { .bars li { grid-template-columns:6.2rem minmax(0, 1fr) 6.2rem; gap:.6rem; } }

/* Naipes */
.cards-row { display:inline-flex; gap:.22em; vertical-align:middle; }
.card { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:1.75em; height:2.4em;
  border-radius:.24em; background:linear-gradient(#fbf6e8, #ece0c2); color:#1f1b14; line-height:1; font-size:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,0,0,.45); }
.card b { font:700 .9em var(--serif); }
.card i { font-style:normal; font-size:.85em; margin-top:.05em; }
.card.h, .card.d { color:#b3202b; }
.card.big { font-size:2.1rem; }

/* Estrategias: cabecera con la mano y la historia por calles */
.strat-head { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2.5rem; align-items:center; max-width:none; }
.deal-big { margin:0; padding:1.3rem 1.6rem 1rem; text-align:center; border-radius:20px;
  background:radial-gradient(ellipse at 50% 25%, #1f7650, #0b3423 78%); border:1px solid rgba(var(--gold-rgb), .4);
  box-shadow:inset 0 0 40px rgba(0,0,0,.35); }
.deal-big .card:first-child { transform:rotate(-5deg) translateY(2px); }
.deal-big .card:last-child { transform:rotate(5deg); }
.deal-big figcaption { margin:.9rem auto 0; font-size:.85rem; color:#d7cfb9; max-width:13rem; }
.hand-story { margin:1.2rem 0; }
.street { position:relative; margin-left:.35rem; padding:0 0 .6rem 1.5rem; border-left:2px solid #24402f; }
.street:last-child { border-left-color:transparent; }
.prose .street h3 { display:flex; align-items:center; gap:.8rem; margin:0 0 .4rem; font:700 1.3rem var(--serif); }
.street h3::before { content:""; position:absolute; left:-8px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:3px solid var(--gold); }
.street h3 .cards-row { font-size:.85rem; }
.strat-cards .deal { display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; font-size:.85rem; }
.strat-cards .deal em { font-style:normal; color:var(--muted); }
@media (max-width:760px) {
  .strat-head { grid-template-columns:1fr; gap:1.2rem; }
  .deal-big { justify-self:start; }
}

/* Índices por grupos (estadísticas, guías) */
.stat-group { margin-top:2.6rem; }
.stat-group h2 { font:700 1.7rem/1.2 var(--serif); margin:0 0 .3rem; }
.stat-group > p { color:var(--muted); margin:0; }
.stat-cards { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }

/* Matrices de rangos 13x13 */
.legend { margin:.8rem 0; }
.legend .sw { display:inline-block; width:.9rem; height:.9rem; border-radius:2px; vertical-align:-2px; margin:0 .25rem 0 .6rem;
  background:#10241a; border:1px solid var(--border); }
.legend .sw.in { background:linear-gradient(#e2c06c, #c19a45); margin-left:0; }
.grids { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap:1.6rem 1.4rem; margin:1.2rem 0 1.6rem; }
.grid13 { margin:0; }
.grid13 figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.45rem; }
.grid13 figcaption strong { font:700 1.35rem var(--serif); color:var(--ivory); }
.grid13 figcaption span { font-size:.9rem; color:var(--muted); }
.grid13 .g { display:grid; grid-template-columns:repeat(13, minmax(0, 1fr)); gap:2px; }
.grid13 .g span { aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:2px;
  background:#0f2219; color:#4f6a5b; font-size:.56rem; font-weight:600; letter-spacing:-.03em; }
.grid13 .g span.p { background:#14301f; }
.grid13 .g span.in { background:linear-gradient(#e2c06c, #c19a45); color:#2a1f0a; }

/* La mesa vista desde arriba */
.table-fig, .map-fig { margin:1.4rem 0; }
.table-fig svg, .map-fig svg { display:block; width:100%; height:auto; }
.table-fig .rail-o { fill:#2b1d12; stroke:#5a3c22; stroke-width:3; }
.table-fig .felt { fill:#17583b; stroke:rgba(var(--gold-rgb), .45); stroke-width:2; }
.table-fig .t-mid { fill:rgba(246,239,220,.9); font:700 30px var(--serif); text-anchor:middle; }
.table-fig .t-sub { fill:rgba(246,239,220,.6); font:500 13px var(--sans); text-anchor:middle; }
.seat circle { fill:#0c1712; stroke:#9a917c; stroke-width:2.5; }
.seat.mid circle { stroke:#c9ad6a; }
.seat.late circle { stroke:var(--gold); stroke-width:3.5; }
.seat.blind circle { stroke:#5b8fd6; }
.seat .t-pos { fill:var(--ivory); font:700 14px var(--sans); text-anchor:middle; }
.seat .t-ord { fill:var(--muted); font:600 11px var(--sans); text-anchor:middle; }
.dealer circle { fill:var(--ivory); stroke:#b8913c; stroke-width:2; }
.dealer text { fill:#1f1b14; font:800 12px var(--sans); text-anchor:middle; }
@media (max-width:600px) { .table-fig .t-sub { display:none; } .seat .t-pos { font-size:18px; } .seat .t-ord { font-size:14px; } }

/* Mapa de estilos (VPIP y PFR) */
.map-fig polygon { stroke:var(--bg); stroke-width:2; }
.map-fig .z-none { fill:rgba(255,255,255,.025); stroke:none; }
.map-fig .z-nit { fill:#5b8fd6; fill-opacity:.55; }
.map-fig .z-tag { fill:var(--gold); fill-opacity:.85; }
.map-fig .z-lag { fill:#e3a04f; fill-opacity:.8; }
.map-fig .z-maniac { fill:#d9673f; fill-opacity:.75; }
.map-fig .z-passive { fill:#4c8c83; fill-opacity:.6; }
.map-fig .z-station { fill:#7b6bb0; fill-opacity:.6; }
.map-fig .z-label { fill:var(--ivory); font:700 13px var(--sans); text-anchor:middle; paint-order:stroke;
  stroke:rgba(12,23,18,.55); stroke-width:3px; }
.map-fig .z-note { fill:var(--muted); font:italic 500 13px var(--sans); }
.map-fig .axis, .map-fig .tick { stroke:#3a5244; stroke-width:1.5; }
.map-fig .ax { fill:var(--muted); font:500 12px var(--sans); text-anchor:middle; }
.map-fig .ax.end { text-anchor:end; }

/* Ranking de manos */
.ranking { list-style:none; margin:1.2rem 0; padding:0; }
.ranking li { display:grid; grid-template-columns:2rem minmax(0, 1fr) auto 7.8rem; grid-template-areas:"rk hn cards hp";
  gap:1rem; align-items:center; padding:.85rem 0; margin:0; border-bottom:1px solid var(--border); }
.ranking .rk { grid-area:rk; font:700 1.5rem var(--serif); color:var(--gold); }
.ranking .hn { grid-area:hn; }
.ranking .hn strong { display:block; font:700 1.15rem var(--serif); color:var(--ivory); }
.ranking .hn span { font-size:.92rem; color:var(--muted); }
.ranking .cards-row { grid-area:cards; font-size:.85rem; }
.ranking .hp { grid-area:hp; text-align:right; }
.ranking .hp span { display:block; color:var(--ivory); font-weight:700; }
.ranking .hp small { color:var(--muted); font-size:.8rem; }
@media (max-width:700px) {
  .ranking li { grid-template-columns:1.6rem minmax(0, 1fr) auto; grid-template-areas:"rk hn hp" "rk cards cards"; row-gap:.55rem; }
  .ranking .cards-row { justify-self:start; }
}

/* Glosario */
.gl-cats { margin:0; padding:0; list-style:none; }
.gl-cats a { display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; color:var(--ink2); text-decoration:none; }
.gl-cats a:hover { color:var(--gold); }
.gl-cats small { color:var(--muted); }
@media (max-width:960px) {
  .gl-cats { display:flex; flex-wrap:wrap; gap:.4rem; }
  .gl-cats a { padding:.25rem .75rem; border:1px solid var(--border); border-radius:999px; font-size:.92rem; }
}
.gl dl { margin:0; }
.gl .term { padding:.85rem 0; border-bottom:1px solid var(--border); }
.gl dt { font:700 1.15rem var(--serif); color:var(--ivory); scroll-margin-top:5.5rem; }
.gl dd { margin:.25rem 0 0; color:var(--ink2); }
.gl a.more { display:block; font-size:.9rem; margin-top:.3rem; }
.gl h2 { scroll-margin-top:5.5rem; margin-top:2.4rem; }
.gl h2:first-child { margin-top:0; }
.gl dt:target { color:var(--gold); }

/* Portada: la plantilla de la app a toda la anchura */
.home .pl-landing { padding-inline:var(--gutter); }
.pl-kicker { font-size:1rem; color:var(--gold); font-weight:600; margin:0 0 .8rem; }
.learn { max-width:1180px; margin:0 auto; padding:3.5rem var(--gutter) 1rem; }
.learn h2 { font:700 clamp(1.7rem, 3vw, 2.3rem)/1.2 var(--serif); margin:0 0 .5rem; }
.learn > p { color:var(--ink2); max-width:var(--read); }

/* Pie */
.site-foot { border-top:1px solid var(--border); background:#09120e; margin-top:3rem; }
.site-foot-in { max-width:1180px; margin:0 auto; padding:2.6rem var(--gutter) 1.2rem; display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:2.5rem; }
.foot-brand svg { height:30px; width:auto; }
.foot-brand p { color:var(--muted); font-size:.92rem; max-width:22rem; }
.foot-cols { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem; }
.foot-cols h2 { font:700 1.05rem var(--serif); color:var(--ivory); margin:0 0 .7rem; }
.foot-cols ul { list-style:none; margin:0; padding:0; }
.foot-cols li { margin:.35rem 0; }
.foot-cols a { color:var(--ink2); text-decoration:none; font-size:.95rem; }
.foot-cols a:hover { color:var(--gold); }
.foot-note { max-width:1180px; margin:0 auto; padding:0 var(--gutter) 2rem; color:var(--muted); font-size:.85rem; }
@media (max-width:760px) {
  .site-foot-in, .foot-cols { grid-template-columns:1fr; }
  th, td { padding:.5rem .45rem; }
}