/*
Atlas das Apostas — editorial theme.
Written from scratch rather than re-coloured from the monobrand lands: the point of this
site is that it does not look like one. Paper ground, ink-blue accent, serif headings,
a single ~68-character measure, rules instead of cards.
Prefix: atlas- (the monobrands use mp-).
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --at-paper:       #faf7f2;
  --at-paper-2:     #f2ede4;
  --at-paper-3:     #e8e1d5;
  --at-ink:         #16202b;
  --at-ink-2:       #3d4a57;
  --at-ink-3:       #6b7885;
  --at-rule:        #d9d1c4;
  --at-rule-strong: #b9ae9c;

  --at-blue:        #1c3d5a;
  --at-blue-deep:   #12293d;
  --at-blue-light:  #2f6489;
  --at-clay:        #b4522e;      /* single accent — used sparingly */
  --at-clay-soft:   #f3e3dc;
  --at-green:       #2f6b46;
  --at-amber-bg:    #fdf3d8;
  --at-amber-line:  #d9b64a;

  --at-font-body:  Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --at-font-ui:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --at-font-head:  'Source Serif 4', Georgia, serif;

  --at-measure:    68ch;
  --at-max:        1120px;

  --at-s1: 4px;  --at-s2: 8px;  --at-s3: 12px; --at-s4: 16px;
  --at-s5: 24px; --at-s6: 32px; --at-s7: 48px; --at-s8: 72px; --at-s9: 104px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --at-paper: #14171a; --at-paper-2: #1b1f23; --at-paper-3: #232a30;
    --at-ink: #eceae6; --at-ink-2: #c2c7cc; --at-ink-3: #9099a1;
    --at-rule: #2c343b; --at-rule-strong: #414c55;
    --at-blue-light: #7fb2d6; --at-clay: #e08a63; --at-clay-soft: #33231d;
    --at-amber-bg: #2b2413; --at-green: #6cba8c;
  }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--at-paper); color: var(--at-ink);
  font-family: var(--at-font-body); font-size: 1.0625rem; line-height: 1.72;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--at-blue-light); text-underline-offset: 2px; }
a:hover { color: var(--at-clay); }

.atlas-skip { position: absolute; left: -9999px; }
.atlas-skip:focus {
  position: fixed; left: var(--at-s4); top: var(--at-s4); z-index: 99;
  background: var(--at-blue); color: #fff; padding: var(--at-s3) var(--at-s4);
  font-family: var(--at-font-ui); font-weight: 600; border-radius: 4px;
}

.atlas-wrap { max-width: var(--at-max); margin: 0 auto; padding: 0 var(--at-s5); }
.atlas-measure { max-width: var(--at-measure); }

/* ==========================================================================
   3. MASTHEAD
   ========================================================================== */
.atlas-head {
  border-bottom: 1px solid var(--at-rule);
  background: var(--at-paper);
  position: sticky; top: 0; z-index: 40;
}
.atlas-head-inner {
  display: flex; align-items: center; gap: var(--at-s5);
  padding: var(--at-s4) var(--at-s5); flex-wrap: wrap;
  max-width: var(--at-max); margin: 0 auto;
}
.atlas-logo {
  font-family: var(--at-font-head); font-weight: 700; font-size: 1.375rem;
  letter-spacing: -0.015em; color: var(--at-ink); text-decoration: none;
  margin-right: auto; display: inline-flex; align-items: baseline; gap: 8px;
}
.atlas-logo b { color: var(--at-clay); font-weight: 700; }
.atlas-logo span {
  font-family: var(--at-font-ui); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--at-ink-3);
}
.atlas-nav { display: flex; gap: var(--at-s5); flex-wrap: wrap; }
.atlas-nav a {
  font-family: var(--at-font-ui); font-size: 0.875rem; font-weight: 500;
  color: var(--at-ink-2); text-decoration: none; padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.atlas-nav a:hover, .atlas-nav a[aria-current="page"] {
  color: var(--at-ink); border-bottom-color: var(--at-clay);
}

/* ==========================================================================
   4. BREADCRUMB
   ========================================================================== */
.atlas-crumbs {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0;
  margin: var(--at-s5) 0 0; font-family: var(--at-font-ui);
  font-size: 0.75rem; color: var(--at-ink-3);
}
.atlas-crumbs li { display: flex; gap: 8px; align-items: center; }
.atlas-crumbs li:not(:last-child)::after { content: "›"; color: var(--at-rule-strong); }
.atlas-crumbs a { color: var(--at-ink-2); text-decoration: none; }
.atlas-crumbs a:hover { color: var(--at-clay); }

/* ==========================================================================
   5. ARTICLE
   ========================================================================== */
.atlas-article { padding: var(--at-s6) 0 var(--at-s9); }
.atlas-kicker {
  font-family: var(--at-font-ui); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--at-clay);
  margin: 0 0 var(--at-s3);
}
.atlas-h1 {
  font-family: var(--at-font-head); font-weight: 700;
  font-size: clamp(1.875rem, 3.4vw + 1rem, 2.875rem); line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 var(--at-s4); max-width: 22ch;
}
.atlas-standfirst {
  font-size: 1.1875rem; line-height: 1.62; color: var(--at-ink-2);
  max-width: var(--at-measure); margin: 0 0 var(--at-s5);
}
.atlas-byline {
  font-family: var(--at-font-ui); font-size: 0.8125rem; color: var(--at-ink-3);
  border-top: 1px solid var(--at-rule); border-bottom: 1px solid var(--at-rule);
  padding: var(--at-s3) 0; margin: 0 0 var(--at-s6);
  display: flex; flex-wrap: wrap; gap: var(--at-s2) var(--at-s4);
}
.atlas-byline a { color: var(--at-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--at-rule-strong); }

.atlas-prose { max-width: var(--at-measure); }
.atlas-prose > * + * { margin-top: var(--at-s4); }
.atlas-prose h2 {
  font-family: var(--at-font-head); font-weight: 700; font-size: 1.625rem;
  line-height: 1.25; letter-spacing: -0.01em; margin-top: var(--at-s8);
  padding-top: var(--at-s4); border-top: 1px solid var(--at-rule);
}
.atlas-prose h3 {
  font-family: var(--at-font-head); font-weight: 700; font-size: 1.1875rem;
  margin-top: var(--at-s6);
}
.atlas-prose ul, .atlas-prose ol { padding-left: 1.25rem; }
.atlas-prose li + li { margin-top: var(--at-s2); }
.atlas-prose strong { font-weight: 700; color: var(--at-ink); }
.atlas-prose figure { margin: var(--at-s6) 0; }
.atlas-prose figcaption {
  font-family: var(--at-font-ui); font-size: 0.75rem; color: var(--at-ink-3);
  margin-top: var(--at-s2); padding-left: var(--at-s3);
  border-left: 2px solid var(--at-rule-strong);
}

/* source links get a visible marker — every regulatory claim carries one */
.atlas-src {
  font-family: var(--at-font-ui); font-size: 0.75rem; color: var(--at-ink-3);
  margin-top: var(--at-s2);
}
.atlas-src a { color: var(--at-blue-light); }

/* ==========================================================================
   6. CALLOUTS
   ========================================================================== */
.atlas-note, .atlas-warn, .atlas-key {
  border-left: 3px solid var(--at-rule-strong); padding: var(--at-s4) var(--at-s5);
  background: var(--at-paper-2); margin: var(--at-s6) 0;
  font-size: 1rem; max-width: var(--at-measure);
}
.atlas-warn { border-left-color: var(--at-amber-line); background: var(--at-amber-bg); }
.atlas-key  { border-left-color: var(--at-clay); background: var(--at-clay-soft); }
.atlas-note p:first-child, .atlas-warn p:first-child, .atlas-key p:first-child { margin-top: 0; }
.atlas-note p:last-child, .atlas-warn p:last-child, .atlas-key p:last-child { margin-bottom: 0; }
.atlas-callout-h {
  font-family: var(--at-font-ui); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--at-ink-3);
  margin: 0 0 var(--at-s2);
}

/* ==========================================================================
   7. TABLES
   ========================================================================== */
.atlas-table-wrap { overflow-x: auto; margin: var(--at-s6) 0; }
.atlas-table {
  border-collapse: collapse; width: 100%; min-width: 32rem;
  font-family: var(--at-font-ui); font-size: 0.875rem;
}
.atlas-table caption {
  font-size: 0.75rem; color: var(--at-ink-3); text-align: left;
  padding-bottom: var(--at-s2);
}
.atlas-table th, .atlas-table td {
  border-bottom: 1px solid var(--at-rule); padding: 10px 12px; text-align: left;
  vertical-align: top;
}
.atlas-table thead th {
  border-bottom: 2px solid var(--at-rule-strong); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--at-ink-3);
}
.atlas-table tbody tr:hover { background: var(--at-paper-2); }

/* ==========================================================================
   8. FAQ
   ========================================================================== */
.atlas-faq {
  border-bottom: 1px solid var(--at-rule); max-width: var(--at-measure);
}
.atlas-faq summary {
  cursor: pointer; list-style: none; padding: var(--at-s4) 2rem var(--at-s4) 0;
  font-family: var(--at-font-head); font-weight: 700; font-size: 1.0625rem;
  position: relative;
}
.atlas-faq summary::-webkit-details-marker { display: none; }
.atlas-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--at-font-ui); font-weight: 400; font-size: 1.25rem; color: var(--at-clay);
}
.atlas-faq[open] summary::after { content: "–"; }
.atlas-faq > div, .atlas-faq > p { padding: 0 0 var(--at-s4); color: var(--at-ink-2); }

/* ==========================================================================
   9. FRONT PAGE
   ========================================================================== */
.atlas-lede { padding: var(--at-s8) 0 var(--at-s6); border-bottom: 1px solid var(--at-rule); }
.atlas-lede h1 {
  font-family: var(--at-font-head); font-weight: 700;
  font-size: clamp(2.125rem, 4vw + 1rem, 3.25rem); line-height: 1.12;
  letter-spacing: -0.022em; margin: 0 0 var(--at-s4); max-width: 18ch;
}
.atlas-lede p { max-width: var(--at-measure); font-size: 1.1875rem; color: var(--at-ink-2); margin: 0; }

.atlas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--at-s6) var(--at-s7); margin: var(--at-s7) 0; }
.atlas-card { border-top: 2px solid var(--at-ink); padding-top: var(--at-s4); }
.atlas-card-kicker {
  font-family: var(--at-font-ui); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--at-clay); margin: 0 0 var(--at-s2);
}
.atlas-card h3 { font-family: var(--at-font-head); font-size: 1.25rem; line-height: 1.3; margin: 0 0 var(--at-s2); }
.atlas-card h3 a { color: var(--at-ink); text-decoration: none; }
.atlas-card h3 a:hover { color: var(--at-clay); }
.atlas-card p { margin: 0; font-size: 0.9375rem; color: var(--at-ink-2); }

.atlas-list { list-style: none; padding: 0; margin: 0; max-width: var(--at-measure); }
.atlas-list li { border-bottom: 1px solid var(--at-rule); padding: var(--at-s4) 0; }
.atlas-list a { font-family: var(--at-font-head); font-weight: 700; font-size: 1.0625rem; color: var(--at-ink); text-decoration: none; }
.atlas-list a:hover { color: var(--at-clay); }
.atlas-list span { display: block; font-family: var(--at-font-ui); font-size: 0.8125rem; color: var(--at-ink-3); margin-top: 2px; }

.atlas-sect-h {
  font-family: var(--at-font-ui); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--at-ink-3);
  border-bottom: 1px solid var(--at-rule); padding-bottom: var(--at-s2);
  margin: var(--at-s8) 0 var(--at-s5);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.atlas-foot {
  border-top: 1px solid var(--at-rule); background: var(--at-paper-2);
  margin-top: var(--at-s9); padding: var(--at-s7) 0 var(--at-s6);
  font-family: var(--at-font-ui); font-size: 0.875rem;
}
.atlas-foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--at-s7); }
.atlas-foot h4 {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--at-ink-3); margin: 0 0 var(--at-s3);
}
.atlas-foot ul { list-style: none; padding: 0; margin: 0; }
.atlas-foot li { margin: 6px 0; }
.atlas-foot a { color: var(--at-ink-2); text-decoration: none; }
.atlas-foot a:hover { color: var(--at-clay); }
.atlas-foot-legal {
  border-top: 1px solid var(--at-rule); margin-top: var(--at-s6); padding-top: var(--at-s5);
  color: var(--at-ink-3); font-size: 0.8125rem; line-height: 1.6;
}
.atlas-foot-legal strong { color: var(--at-ink-2); }
.atlas-age {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--at-clay); border-radius: 50%; color: var(--at-clay);
  font-weight: 700; font-size: 0.8125rem; margin-right: var(--at-s3); float: left;
}
.atlas-foot-bottom {
  display: flex; justify-content: space-between; gap: var(--at-s4); flex-wrap: wrap;
  margin-top: var(--at-s5); color: var(--at-ink-3); font-size: 0.75rem;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .atlas-foot-top { grid-template-columns: 1fr 1fr; }
  .atlas-head-inner { gap: var(--at-s3); }
  .atlas-nav { gap: var(--at-s4); width: 100%; }
  .atlas-logo { margin-right: 0; }
}
@media (max-width: 560px) {
  .atlas-foot-top { grid-template-columns: 1fr; }
  body { font-size: 1rem; }
  .atlas-prose h2 { margin-top: var(--at-s7); }
}

@media print {
  .atlas-head, .atlas-foot, .atlas-crumbs { display: none; }
  body { background: #fff; color: #000; }
}

/* Inline code — the regulation articles set `.bet.br` and TLD examples in <code>. Without a
   rule it falls back to the browser's default monospace, which is a size and colour mismatch
   against the serif measure. Flagged by the agent that wrote those pages. */
code, kbd {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.875em; background: var(--at-paper-3); color: var(--at-ink);
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--at-rule);
  white-space: nowrap;
}
.atlas-prose a[href^="http"]::after {
  content: "↗"; font-size: 0.75em; margin-left: 2px; color: var(--at-ink-3);
  text-decoration: none; vertical-align: super;
}