/* Tangiers polish pass: one calm page canvas, clearer type, and stable fixed panels. */
:root {
  --page-bg: #f3eadb;
  --page-paper: #fffaf2;
  --page-ink: #18202a;
  --page-muted: #4d5d68;
}

body,
.site-header,
.section,
.rating-section,
.mosaic-section,
.comparison-section,
.lounge-section,
.bonuses-section,
.games-section,
.support-section,
.faq-section,
.site-footer {
  background: var(--page-bg) !important;
  color: var(--page-ink);
}

html,
body {
  overflow-x: hidden;
}

.container.closing-note {
  width: min(calc(100% - 72px), var(--container));
  margin-right: auto;
  margin-left: auto;
}

h1 {
  max-width: 650px;
  font-size: clamp(2.85rem, 4.7vw, 4.8rem);
  line-height: .98;
}

h2 {
  font-size: clamp(1.85rem, 3.2vw, 3.1rem);
}

.rating-section h2,
.bonuses-heading h2,
.lounge-copy h2,
.support-section h2 {
  color: var(--page-ink);
}

.rating-intro p:last-child,
.bonuses-heading p:last-child,
.lounge-copy > p:not(.section-kicker),
.support-grid > div > p:not(.section-kicker),
.faq-heading p:last-child,
.mosaic-heading p:last-child,
.comparison-heading p:last-child,
.games-copy > p:not(.section-kicker),
.closing-note {
  color: var(--page-muted);
}

.rating-section .section-kicker,
.bonuses-heading .section-kicker,
.lounge-copy .section-kicker,
.support-section .section-kicker {
  color: var(--teal);
}

.rating-section .closing-note,
.lounge-section .closing-note,
.bonuses-section .closing-note,
.support-section .closing-note {
  color: var(--page-muted);
  border-color: var(--terracotta);
}

.mosaic-board,
.mosaic-board article,
.bonus-grid article {
  border-color: var(--line);
  background: var(--page-paper);
}

.mosaic-board article:nth-child(2),
.mosaic-board article:nth-child(3),
.mosaic-board article:nth-child(4) {
  background: var(--page-paper);
}

.mosaic-board h3,
.bonus-grid h3 {
  color: var(--page-ink);
}

.mosaic-board p,
.bonus-grid p {
  color: var(--page-muted);
}

.comparison-section tbody th {
  color: var(--teal);
}

.comparison-section tbody td {
  color: var(--page-muted);
}

.lounge-section {
  color: var(--page-ink);
}

.lounge-list {
  border-color: var(--line);
}

.lounge-list div {
  border-color: var(--line);
}

.lounge-list b {
  color: var(--terracotta);
}

.lounge-list small {
  color: var(--page-muted);
}

.support-points {
  border-color: var(--line);
}

.support-points div {
  border-color: var(--line);
}

.support-points strong {
  color: var(--teal);
}

.support-points span {
  color: var(--page-muted);
}

.support-note {
  border-color: var(--line);
  background: var(--page-paper);
}

.support-note span {
  color: var(--terracotta);
}

.support-note strong {
  color: var(--page-ink);
}

.support-note p {
  color: var(--page-muted);
}

.site-footer {
  color: var(--page-ink);
}

.footer-top,
.footer-columns,
.support-area,
.affiliate-row {
  border-color: var(--line);
}

.footer-top > p,
.footer-columns p,
.support-area > p {
  color: var(--page-muted);
}

.footer-nav a {
  color: var(--page-ink);
}

.footer-columns h3,
.support-area h3,
.affiliate-row strong {
  color: var(--page-ink);
}

.footer-columns a {
  color: var(--teal);
}

.support-orgs a {
  border-color: #284e70;
  background: var(--navy);
}

.support-orgs span {
  color: var(--terracotta);
}

.affiliate-row,
.footer-bottom {
  color: var(--page-muted);
}

.catfish {
  right: auto;
  left: 50%;
  bottom: 18px;
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding-right: 58px;
  transform: translateX(-50%);
}

.catfish-close {
  top: 50%;
  right: 8px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  line-height: 1;
  transform: translateY(-50%);
}

.cookie-panel {
  bottom: 18px;
}

@media (max-width: 800px) {
  .container.closing-note {
    width: min(calc(100% - 36px), var(--container));
  }
}

@media (max-width: 520px) {
  .container.closing-note {
    width: min(calc(100% - 28px), var(--container));
  }

  h1 {
    font-size: clamp(2.55rem, 10vw, 3.6rem);
  }

  h2 {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .catfish {
    bottom: 186px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    padding-right: 48px;
  }
}