/* 7XL Poker — custom layer on top of Water.css (dark). Dark editorial, single muted gold. */
:root{
  --bg:#14110d;
  --surface:#1c1812;
  --surface-2:#23201a;
  --text:#e9e2d2;
  --muted:#9a937f;
  --gold:#c3a155;
  --gold-soft:#d8bd83;
  --line:#3a3528;
  --maxw:760px;
  --serif:"Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --body:"Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Re-assert dark palette regardless of OS scheme (playbook gotcha #1) */
html, body{
  background:var(--bg) !important;
  color:var(--text) !important;
  overflow-x:hidden;
}
*{box-sizing:border-box;}
body{
  font-family:var(--body);
  line-height:1.72;
  font-size:18px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px 80px;
  -webkit-font-smoothing:antialiased;
}
img, svg, table, pre{max-width:100%;}
h1,h2,h3,h4{font-family:var(--serif); color:var(--text); line-height:1.25; overflow-wrap:anywhere;}
h1{font-size:2.2rem; margin:.6em 0 .3em; font-weight:700;}
h2{font-size:1.55rem; margin:2em 0 .5em; color:var(--gold-soft); border-bottom:1px solid var(--line); padding-bottom:.25em;}
h3{font-size:1.18rem; margin:1.6em 0 .4em;}
p, li{color:var(--text);}
a{color:var(--gold); text-decoration:none;}
a:hover{color:var(--gold-soft); text-decoration:underline;}
.muted{color:var(--muted);}

/* Header */
header.site{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:18px 0 10px; margin-bottom:8px; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand img{width:38px; height:38px;}
.brand b{font-family:var(--serif); font-size:1.3rem; color:var(--text); letter-spacing:.5px;}
.brand b span{color:var(--gold);}
header.site nav{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; flex:1;}
header.site nav a{font-size:.93rem; color:var(--muted);}
header.site nav a:hover, header.site nav a[aria-current="page"]{color:var(--gold);}
.cta{
  display:inline-block; background:var(--gold); color:#14110d !important;
  font-family:var(--body); font-weight:700; font-size:.9rem;
  padding:8px 16px; border-radius:7px; text-decoration:none !important; white-space:nowrap;
}
.cta:hover{background:var(--gold-soft);}

/* Hero */
.hero{margin:18px 0 6px; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.hero img{display:block; width:100%; height:auto;}
.lede{font-size:1.18rem; color:var(--gold-soft); font-family:var(--serif); line-height:1.55;}

/* Answer-first callout */
.answer{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:8px; padding:18px 20px; margin:22px 0;
}
.answer p:first-child{margin-top:0;} .answer p:last-child{margin-bottom:0;}

/* Tables */
table{width:100%; border-collapse:collapse; margin:22px 0; font-size:.95rem; background:var(--surface);}
th, td{border:1px solid var(--line); padding:9px 12px; text-align:start; color:var(--text); background:var(--surface);}
thead th{background:var(--surface-2); color:var(--gold-soft);}
.tablewrap{overflow-x:auto;}

/* Figures */
figure{margin:26px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface);}
figure img{display:block; width:100%; height:auto;}
figcaption{padding:10px 14px; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line);}

/* Author block */
.author{
  display:flex; gap:16px; align-items:center; margin:38px 0 8px;
  padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.author img{width:64px; height:64px; border-radius:50%; flex:0 0 auto; object-fit:cover;}
.author b{color:var(--text);} .author .role{color:var(--muted); font-size:.9rem;}

/* code */
code{background:var(--surface-2); color:var(--gold-soft); padding:1px 5px; border-radius:4px; font-size:.9em;}
pre{background:var(--surface); border:1px solid var(--line); padding:14px; border-radius:8px; overflow-x:auto;}
pre code{background:transparent; color:inherit; padding:0;}

footer.site{margin-top:54px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem;}

/* breadcrumbs */
.crumbs{font-size:.82rem; color:var(--muted); margin:16px 0 0;}
.crumbs a{color:var(--muted);} .crumbs a:hover{color:var(--gold);}

/* RTL refinements (logical props already used; just nudge nav) */
[dir="rtl"] .answer{border-left:none; border-right:3px solid var(--gold);}
[dir="rtl"] .brand b{letter-spacing:0;}

@media (max-width:430px){
  body{font-size:17px;}
  h1{font-size:1.8rem;}
  header.site{gap:10px;}
  header.site nav{font-size:.85rem;}
}

/* Defend against any OS dark-flip from Water.css */
@media (prefers-color-scheme: dark){
  html, body{background:var(--bg); color:var(--text);}
  th, td{background:var(--surface); color:var(--text);}
  thead th{background:var(--surface-2); color:var(--gold-soft);}
  .answer, figure, .author, pre{background:var(--surface);}
  code{background:var(--surface-2); color:var(--gold-soft);}
}
@media (prefers-color-scheme: light){
  html, body{background:var(--bg); color:var(--text);}
  th, td{background:var(--surface); color:var(--text);}
  thead th{background:var(--surface-2); color:var(--gold-soft);}
  .answer, figure, .author, pre{background:var(--surface);}
}