/* ---------------------------------------------------------------------------
   BetSiteRank - reference theme.

   Ported from bsrank.css unchanged in layout, structure, spacing and type.
   The ONLY thing altered is colour: the original is champagne gold on near
   black and dark-only. This site is red on black and has a light mode, so
   every colour here is derived from two base values plus the site's red.

     --ink    the page ground
     --ivory  its opposite - body text on a dark ground, panel fill on a light one

   Everything between them (rules, muted labels, card fills) is a color-mix of
   the two, so a theme is defined by swapping those two values and nothing else.
   That is what :root[data-theme] does, and it is also how .methodology inverts:
   the ivory panel is not a special case, it is the same system with ink and
   ivory exchanged, which is why its rules and muted text resolve correctly
   without a single override.
   --------------------------------------------------------------------------- */

:root {
  /* Dark is the design's native mode. Values come from the WordPress theme's
     own tokens so the two stylesheets agree. */
  --ink:   #0a0a0b;
  --ivory: #f4f3ee;
  --gold:  #f03b4f;
  --gold-ink: #111114;

  --serif: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Inter rather than the reference's Manrope. Manrope is a geometric face with
     narrow apertures; Inter was drawn for screen UI - larger x-height, open
     counters, and a 600 that stays legible at 16px in a dense table, which is
     where the offer text sits. Cormorant Garamond is unchanged. */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shell: min(1136px, calc(100vw - 128px));

  /* Surfaces */
  --surface-1: color-mix(in srgb, var(--ivory)  3%, var(--ink));
  --surface-2: color-mix(in srgb, var(--ivory)  4%, var(--ink));
  /* Rules, weakest to strongest */
  --line:      color-mix(in srgb, var(--ivory) 13%, var(--ink));
  --line-2:    color-mix(in srgb, var(--ivory) 14%, var(--ink));
  --line-3:    color-mix(in srgb, var(--ivory) 16%, var(--ink));
  --line-4:    color-mix(in srgb, var(--ivory) 18%, var(--ink));
  --line-5:    color-mix(in srgb, var(--ivory) 20%, var(--ink));
  --line-6:    color-mix(in srgb, var(--ivory) 23%, var(--ink));
  --line-7:    color-mix(in srgb, var(--ivory) 27%, var(--ink));
  --line-8:    color-mix(in srgb, var(--ivory) 33%, var(--ink));
  /* Text ramp */
  --t-42: color-mix(in srgb, var(--ivory) 42%, var(--ink));
  /* 47% measured 4.45:1 on the dark ground - just under AA. 50% is 4.93. */
  --t-47: color-mix(in srgb, var(--ivory) 50%, var(--ink));
  --t-50: color-mix(in srgb, var(--ivory) 50%, var(--ink));
  --t-53: color-mix(in srgb, var(--ivory) 53%, var(--ink));
  --t-56: color-mix(in srgb, var(--ivory) 56%, var(--ink));
  --t-59: color-mix(in srgb, var(--ivory) 59%, var(--ink));
  --t-64: color-mix(in srgb, var(--ivory) 64%, var(--ink));
  --t-68: color-mix(in srgb, var(--ivory) 68%, var(--ink));
  --t-74: color-mix(in srgb, var(--ivory) 74%, var(--ink));
  --t-87: color-mix(in srgb, var(--ivory) 87%, var(--ink));
}

/* Light mode: the two base colours swap, and the whole ramp inverts with them.
   The red darkens because the bright dark-mode cut does not clear AA on a light
   ground - that pair is taken from the WordPress theme, which already measured it. */
:root[data-theme="light"] {
  --ink:   #fafafa;
  --ivory: #111114;
  --gold:  #d4213d;
  --gold-ink: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink:   #fafafa;
    --ivory: #111114;
    --gold:  #d4213d;
    --gold-ink: #ffffff;
  }
}

.bsrx-site * { box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
  /* The site header is sticky and about 110px tall (35 utility + 74 main). */\n  scroll-padding-top: 124px;
}

body.bsrx-site {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.bsrx-site::after {
  position: fixed;
  z-index: 90;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}

body.bsrx-site.menu-open,
body.bsrx-site.search-open { overflow: hidden; }

.bsrx-site a { color: inherit; text-decoration: none; }
.bsrx-site button, .bsrx-site input { font: inherit; }
.bsrx-site button { color: inherit; }
.bsrx-site img { display: block; max-width: 100%; }
.bsrx-site ::selection { color: var(--gold-ink); background: var(--gold); }

.bsrx-site .shell { width: var(--shell); margin-inline: auto; }
.bsrx-site .section-dark { background: var(--ink); }
.bsrx-site .gold { color: var(--gold) !important; }

.bsrx-site .scroll-progress {
  position: fixed;
  z-index: 80;
  /* Pinned to the very top rather than under the reference's 65px fixed bar:
     the site header is sticky and changes height between breakpoints. */
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.bsrx-site .scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold);
}

.bsrx-site .site-header {
  position: fixed;
  z-index: 70;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 215px 1fr auto;
  align-items: center;
  width: 100%;
  height: 65px;
  padding: 0 64px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  backdrop-filter: blur(18px);
  transition: background .35s ease, box-shadow .35s ease;
}

.bsrx-site .site-header.scrolled {
  background: color-mix(in srgb, var(--ink) 95%, transparent);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.bsrx-site .brand {
  display: inline-flex;
  align-items: center;
  width: 205px;
  height: 29.875px;
  font-family: var(--serif);
  font-size: 29.875px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.bsrx-site .brand span { font-style: italic; color: var(--gold); }
.bsrx-site .brand b { color: var(--gold); font-size: .43em; vertical-align: middle; }

.bsrx-site .desktop-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 650px;
}

.bsrx-site .desktop-nav a,
.bsrx-site .locale-button,
.bsrx-site .about-button {
  position: relative;
  color: var(--t-56);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .23em;
  text-transform: uppercase;
  transition: color .3s ease;
}

.bsrx-site .desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--gold);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.bsrx-site .desktop-nav a:hover { color: var(--ivory); }
.bsrx-site .desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.bsrx-site .header-actions { display: flex; align-items: center; gap: 18px; }

.bsrx-site .icon-button,
.bsrx-site .locale-button,
.bsrx-site .menu-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.bsrx-site .icon-button { width: 22px; height: 30px; padding: 5px 0; color: var(--t-59); }
.bsrx-site .icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; }
.bsrx-site .icon-button:hover { color: var(--ivory); }
.bsrx-site .locale-button { padding: 8px 0; white-space: nowrap; }
.bsrx-site .locale-button i { display: inline-block; width: 1px; height: 10px; margin: 0 5px; background: var(--line-8); vertical-align: -1px; }

.bsrx-site .about-button {
  padding: 8px 17px;
  border: 1px solid var(--line-6);
  color: var(--ivory);
}

.bsrx-site .about-button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--ivory);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.bsrx-site .about-button:hover { color: var(--ink); }
.bsrx-site .about-button:hover::before { transform: scaleX(1); transform-origin: left; }

.bsrx-site .menu-toggle { display: none; width: 25px; padding: 4px 0; }
.bsrx-site .menu-toggle span { display: block; width: 100%; height: 1px; margin: 5px 0; background: var(--ivory); transition: transform .3s ease, opacity .3s ease; }
.bsrx-site .menu-open .menu-toggle span:first-child { transform: translateY(6px) rotate(45deg); }
.bsrx-site .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.bsrx-site .menu-open .menu-toggle span:last-child { transform: translateY(-6px) rotate(-45deg); }

.bsrx-site .mobile-panel,
.bsrx-site .search-panel {
  position: fixed;
  z-index: 65;
  inset: 65px 0 0;
  visibility: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--ink) 98%, transparent);
  transition: opacity .35s ease, visibility .35s ease;
}

.bsrx-site .mobile-panel[aria-hidden="false"],
.bsrx-site .search-panel[aria-hidden="false"] { visibility: visible; opacity: 1; }

.bsrx-site .mobile-panel nav { display: grid; padding: 36px 24px; }
.bsrx-site .mobile-panel a { display: flex; gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(30px, 9vw, 44px); line-height: 1; }
.bsrx-site .mobile-panel a span { color: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .2em; }

.bsrx-site .search-panel { display: grid; place-items: start center; padding-top: 13vh; }
.bsrx-site .search-inner { width: min(920px, calc(100vw - 48px)); }
.bsrx-site .search-inner label { display: block; margin-bottom: 20px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.bsrx-site .search-row { display: flex; border-bottom: 1px solid var(--line-7); }
.bsrx-site .search-row input { flex: 1; min-width: 0; padding: 18px 0; border: 0; outline: 0; background: transparent; color: var(--ivory); font-family: var(--serif); font-size: clamp(28px, 5vw, 64px); }
.bsrx-site .search-row input::placeholder { color: var(--line-5); }
.bsrx-site .search-close { border: 0; background: transparent; color: var(--gold); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.bsrx-site .hero {
  position: relative;
  display: flex;
  min-height: 860px;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  /* No offset: the reference header was fixed, the site header is sticky and
     therefore already occupies flow space above this. */
  padding-top: 0;
}

.bsrx-site .corner-mark { position: absolute; z-index: 2; color: var(--gold); font-size: 12px; opacity: .6; }
.bsrx-site .hero-plus-one { top: 97px; left: 24px; }
.bsrx-site .hero-plus-two { right: 26px; bottom: 102px; }

.bsrx-site .hero-stage {
  position: relative;
  top: -10px;
  flex: 0 0 615px;
  min-height: 615px;
  padding-top: 130px;
}

.bsrx-site .hero-copy { position: relative; z-index: 3; }
.bsrx-site .eyebrow { margin: 0 0 32px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }

.bsrx-site .hero h1,
.bsrx-site .section-heading h2,
.bsrx-site .method-intro h2,
.bsrx-site .complaints h2,
.bsrx-site .faq-intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.025em;
}

.bsrx-site .hero h1 {
  font-size: clamp(64px, 7.6vw, 132px);
  line-height: .9;
}

.bsrx-site .hero h1 span { display: block; }
.bsrx-site em { color: var(--gold); font-weight: 400; }
.bsrx-site .hero h1 em { font-style: italic; }

.bsrx-site .hero-visual {
  position: absolute;
  z-index: 1;
  top: 15px;
  right: 111px;
  width: 284px;
  height: 552px;
  margin: 0;
}

.bsrx-site .hero-image-frame {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.bsrx-site .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.14) brightness(.46);
  transform: translate3d(0,var(--parallax,0),0) scale(1.18);
  will-change: transform;
}

.bsrx-site .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 26%, color-mix(in srgb, var(--ink) 67%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--ink) 46%, transparent), transparent 35%); }

.bsrx-site .hero-visual figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  margin-top: 16px;
}

.bsrx-site .hero-visual figcaption span { color: var(--t-64); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.bsrx-site .hero-visual figcaption strong { color: var(--gold); font-family: var(--serif); font-size: 28px; font-weight: 500; white-space: nowrap; }
.bsrx-site .hero-visual figcaption small { color: var(--t-47); font-size: 12px; font-weight: 700; }

.bsrx-site .hero-lower {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 50px;
  min-height: 108px;
  height: auto;
  margin-bottom: 40px;
  padding: 31px 0 0;
  border-top: 1px solid var(--line);
}

.bsrx-site .hero-lower > p { max-width: 500px; margin: 0; color: var(--t-64); font-size: 16px; line-height: 1.7; }
.bsrx-site .hero-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }

.bsrx-site .button {
  position: relative;
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 28px;
  border: 1px solid var(--line-6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}

.bsrx-site .button span { font-size: 17px; font-weight: 300; transition: transform .35s ease; }
.bsrx-site .button:hover span { transform: translateX(5px); }
.bsrx-site .button-light { border-color: var(--ivory); background: var(--ivory); color: var(--ink); }
.bsrx-site .button-light:hover { border-color: var(--gold); background: var(--gold); }
.bsrx-site .button-outline:hover { border-color: var(--ivory); background: var(--ivory); color: var(--ink); }

.bsrx-site .hero-facts { position: relative; z-index: 4; border-top: 1px solid var(--line); }
.bsrx-site .hero-facts .shell { display: grid; grid-template-columns: repeat(4,1fr); align-items: center; height: 56px; }
.bsrx-site .hero-facts span { color: var(--t-56); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bsrx-site .hero-facts span:not(:first-child) { text-align: center; }

.bsrx-site .footer-marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.bsrx-site .marquee-track { display: flex; width: max-content; align-items: center; gap: 28px; animation: marquee 36s linear infinite; white-space: nowrap; }
.bsrx-site .marquee-track span { color: transparent; -webkit-text-stroke: 1px var(--line-3); font-family: var(--serif); font-size: 73px; font-style: italic; letter-spacing: -.025em; }
.bsrx-site .marquee-track b { color: var(--gold); font-size: 13px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.bsrx-site .rankings { padding: 125px 0 108px; border-bottom: 1px solid var(--line); }
.bsrx-site .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 45px; }
.bsrx-site .section-heading .eyebrow { margin-bottom: 44px; }
.bsrx-site .section-heading h2 { font-size: 72px; line-height: 1; }
.bsrx-site .section-heading h2 em { color: var(--ivory); font-style: italic; font-weight: 300; }

.bsrx-site .text-link {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line-7);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  transition: gap .3s ease, color .3s ease, border-color .3s ease;
}

.bsrx-site .text-link:hover { gap: 21px; border-color: var(--gold); color: var(--ivory); }
.bsrx-site .dark-link { border-color: var(--t-74); color: var(--t-87); }
.bsrx-site .dark-link:hover { border-color: var(--ink); color: var(--gold); }

.bsrx-site .rank-table { border-top: 1px solid var(--line); }
.bsrx-site .rank-head,
.bsrx-site .casino-row {
  display: grid;
  grid-template-columns: 80px 272px minmax(220px,1fr) 90px 165px 177px;
  column-gap: 22px;
}

.bsrx-site .rank-head { min-height: 50px; align-items: center; color: var(--t-47); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bsrx-site .rank-head span:nth-last-child(-n+3) { padding-left: 6px; }

.bsrx-site .casino-row {
  position: relative;
  min-height: 150px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  transition: background .4s ease;
}

.bsrx-site .casino-row::before { position: absolute; inset: 0 -20px; z-index: 0; content: ""; background: var(--surface-2); opacity: 0; transition: opacity .4s ease; }
.bsrx-site .casino-row:hover::before { opacity: 1; }
.bsrx-site .casino-row > * { position: relative; z-index: 1; }
.bsrx-site .rank-number { color: transparent; -webkit-text-stroke: 1px var(--line-4); font-family: var(--serif); font-size: 43px; font-weight: 400; }
.bsrx-site .rank-number.active { color: var(--gold); -webkit-text-stroke: 0; }

.bsrx-site .operator { display: flex; align-items: center; gap: 18px; }
.bsrx-site .operator-mark { display: grid; width: 113px; height: 50px; flex: 0 0 auto; place-items: center; color: var(--ink); font-family: var(--serif); font-size: 13px; font-weight: 700; }
.bsrx-site .operator h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.bsrx-site .gold-bg { background: #c9a65a; }.bsrx-site .ivory-bg { background: var(--ivory); }.bsrx-site .green-bg { background: #0f4c33; color: var(--ivory); }.bsrx-site .red-bg { background: #d94b38; color: var(--ivory); }.bsrx-site .charcoal-bg { background: #2a2c2b; color: var(--ivory); }
.bsrx-site .offer { max-width: 270px; margin: 0; color: var(--t-59); font-size: 16px; line-height: 1.55; }
.bsrx-site .rating { display: flex; flex-direction: column; }
.bsrx-site .rating strong { font-family: var(--serif); font-size: 29px; font-weight: 600; line-height: 1; }
.bsrx-site .rating small { margin-left: 2px; color: var(--t-47); font-size: 12px; font-weight: 700; }
.bsrx-site .rating span { margin-top: 9px; color: var(--t-53); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bsrx-site .terms p { margin: 2px 0; color: var(--t-87); font-size: 16px; white-space: nowrap; }
.bsrx-site .terms p span { display: inline-block; width: 64px; color: var(--t-53); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bsrx-site .casino-action { display: flex; justify-content: flex-end; gap: 11px; }
.bsrx-site .visit { display: grid; width: 126px; height: 58px; place-items: center; background: var(--ivory); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-align: center; text-transform: uppercase; transition: background .3s ease; }
.bsrx-site .visit:hover { background: var(--gold); }
.bsrx-site .square-arrow { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line-5); color: var(--t-42); transition: border-color .3s ease, color .3s ease, transform .3s ease; }
.bsrx-site .square-arrow:hover { transform: translate(2px,-2px); border-color: var(--gold); color: var(--gold); }
.bsrx-site .row-note { display: block; grid-column: 3 / 7; max-height: 0; margin: 0; overflow: hidden; opacity: 0; color: var(--t-53); font-size: 12px; font-weight: 700; transition: max-height .4s ease, margin .4s ease, opacity .3s ease; }
.bsrx-site .casino-row:hover .row-note { max-height: 28px; margin: 12px 0 8px; opacity: 1; }
.bsrx-site .row-note a { float: right; width: 126px; margin-right: 51px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.bsrx-site .ranking-note { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 27px 0 0; }
.bsrx-site .ranking-note p { max-width: 680px; margin: 0; color: var(--t-53); font-size: 16px; line-height: 1.65; }

/* The inversion. Not a special case - ink and ivory trade places and every
   derived token above recomputes, so the panel's rules, muted text and numbers
   all land correctly with no per-element overrides. */
.bsrx-site .methodology {
  --ink:   #f4f3ee;
  --ivory: #0a0a0b;
  --gold:  #d4213d;
  --gold-ink: #ffffff;
  position: relative; overflow: clip; padding: 128px 0 150px;
  border-bottom: 1px solid var(--line-6);
  background: var(--ink); color: var(--ivory);
}
/* The light-mode inversion must be gated on the media query. Without it
   :root:not([data-theme="dark"]) also matches a page with no data-theme at
   all - which is every page before the toggle writes one - so the light plate
   was winning in dark mode too. */
:root[data-theme="light"] .methodology {
  --ink:   #111114;
  --ivory: #fafafa;
  --gold:  #f03b4f;
  --gold-ink: #111114;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .methodology {
    --ink:   #111114;
    --ivory: #fafafa;
    --gold:  #f03b4f;
    --gold-ink: #111114;
  }
}
.bsrx-site .method-grid { display: grid; grid-template-columns: 336px 1fr; gap: 64px; }
.bsrx-site .method-intro { position: sticky; z-index: 1; top: 110px; align-self: start; height: fit-content; }
.bsrx-site .eyebrow.dark { color: var(--t-47); }
.bsrx-site .method-intro h2 { margin-bottom: 34px; font-size: 72px; line-height: 1; }
.bsrx-site .method-intro h2 em { color: var(--ink); font-style: italic; font-weight: 300; }
.bsrx-site .method-index { margin: 55px 0 0; padding: 0; border-top: 1px solid var(--line-5); list-style: none; }
.bsrx-site .method-index li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-5); color: var(--t-53); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.bsrx-site .method-index li span { color: var(--t-47); }
.bsrx-site .method-index li.active { color: var(--t-47); }
.bsrx-site .method-list { margin-top: 112px; border-top: 1px solid var(--line-5); }
.bsrx-site .method-card { position: relative; display: grid; grid-template-columns: 160px 1fr; min-height: 250px; padding: 62px 0; border-bottom: 1px solid var(--line-6); }
.bsrx-site .method-number { color: transparent; -webkit-text-stroke: 1px var(--line-6); font-family: var(--serif); font-size: 66px; line-height: 1; }
.bsrx-site .method-card h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.1; }
.bsrx-site .method-card p { max-width: 600px; margin: 0; color: var(--t-64); font-size: 16px; line-height: 1.75; }
.bsrx-site .guides { overflow: hidden; padding: 128px 0 118px; border-bottom: 1px solid var(--line); }
.bsrx-site .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; margin-inline: auto; }
.bsrx-site .article-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--line); background: var(--surface-1); transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease; }
.bsrx-site .article-card:hover { transform: translateY(-10px); border-color: color-mix(in srgb, var(--gold) 32%, var(--ink)); }
.bsrx-site .article-image { aspect-ratio: 16/9; overflow: hidden; }
.bsrx-site .article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.bsrx-site .article-card:hover .article-image img { transform: scale(1.055); filter: saturate(.8); }
.bsrx-site .article-body { display: flex; flex: 1; flex-direction: column; padding: 34px; }
.bsrx-site .article-meta { display: flex; flex-wrap: wrap; gap: 12px 22px; color: var(--t-53); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bsrx-site .article-meta span:first-child { color: var(--gold); }
.bsrx-site .article-card h3 { margin: 24px 0 17px; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.05; }
.bsrx-site .article-card p { margin: 0; color: var(--t-56); font-size: 16px; line-height: 1.7; }
.bsrx-site .article-byline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-top: auto; padding-top: 26px; color: var(--t-53); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.bsrx-site .complaints { position: relative; min-height: 480px; overflow: hidden; border-bottom: 1px solid var(--line); }
.bsrx-site .complaints::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,color-mix(in srgb, var(--ink) 80%, transparent),color-mix(in srgb, var(--ink) 44%, transparent)), radial-gradient(ellipse at center,transparent 30%,color-mix(in srgb, var(--ink) 70%, transparent)); }
.bsrx-site .complaints-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: grayscale(1); }
.bsrx-site .complaints .corner-mark { z-index: 3; }.bsrx-site .c1{top:25px;left:24px}.bsrx-site .c2{top:25px;right:24px}.bsrx-site .c3{bottom:25px;left:24px}.bsrx-site .c4{bottom:25px;right:24px}
.bsrx-site .complaints-grid { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0,1fr) 327px; align-items: center; gap: 64px; min-height: 480px; }
.bsrx-site .complaints h2 { font-size: 60px; line-height: 1; }
.bsrx-site .complaints h2 em { color: var(--ivory); font-style: italic; font-weight: 300; }
.bsrx-site .complaints-copy { max-width: 650px; margin: 26px 0 0; color: var(--t-68); font-size: 16px; line-height: 1.75; }
.bsrx-site .complaints-actions { display: grid; gap: 14px; }
.bsrx-site .complaints-actions .button { min-height: 49px; }

.bsrx-site .faq { padding: 120px 0; border-bottom: 1px solid var(--line); }
.bsrx-site .faq-grid { display: grid; grid-template-columns: 435px 1fr; gap: 64px; }
.bsrx-site .faq-intro h2 { margin: 0 0 43px; font-size: clamp(56px,7vw,120px); line-height: .85; }
.bsrx-site .faq-intro h2 em { color: var(--ivory); font-style: italic; font-weight: 300; }
.bsrx-site .faq-intro h2 span { color: transparent; -webkit-text-stroke: 1px var(--line-5); }
.bsrx-site .accordion { border-top: 1px solid var(--line); }
.bsrx-site .faq-item { border-bottom: 1px solid var(--line); }
.bsrx-site .faq-item h3 { margin: 0; }
.bsrx-site .faq-item button { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; width: 100%; min-height: 92px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.bsrx-site .faq-item button > span:nth-child(2) { font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.15; }
.bsrx-site .faq-number { color: var(--gold); font-family: var(--serif); font-size: 12px; font-weight: 700; }
.bsrx-site .faq-item button i { position: relative; display: block; width: 12px; height: 12px; justify-self: end; }
.bsrx-site .faq-item button i::before,.bsrx-site .faq-item button i::after { position: absolute; top: 5px; left: 1px; width: 10px; height: 1px; content: ""; background: var(--t-47); transition: transform .3s ease; }
.bsrx-site .faq-item button i::after { transform: rotate(90deg); }
.bsrx-site .faq-item.open button i::after { transform: rotate(0); }
.bsrx-site .faq-answer { display: grid; max-height: 0; overflow: hidden; color: var(--t-53); transition: max-height .5s cubic-bezier(.16,1,.3,1); }
.bsrx-site .faq-answer > div { padding: 0 20px 36px 42px; }
.bsrx-site .faq-answer p { margin: 0 0 18px; font-size: 16px; line-height: 1.8; }
.bsrx-site .faq-item.open .faq-answer { max-height: 320px; }

.bsrx-site .site-footer { background: var(--ink); }
.bsrx-site .footer-marquee { height: 52px; border-top: 1px solid var(--line); }
.bsrx-site .small-track { height: 52px; gap: 34px; animation-duration: 30s; }
.bsrx-site .small-track span { color: var(--t-56); -webkit-text-stroke: 0; font-family: var(--sans); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bsrx-site .small-track b { font-size: 9px; }
.bsrx-site .responsible { background: var(--gold); color: var(--gold-ink); }
.bsrx-site .responsible-inner { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 18px; min-height: 90px; }
.bsrx-site .age { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 12px; font-weight: 700; }
.bsrx-site .responsible p { margin: 0; font-size: 16px; line-height: 1.75; }
.bsrx-site .footer-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 56px; padding-top: 94px; padding-bottom: 83px; }
.bsrx-site .footer-about { grid-column: span 5; }
.bsrx-site .footer-column { grid-column: span 2; }
.bsrx-site .footer-brand { margin: 0 0 22px !important; color: var(--ivory) !important; font-family: var(--serif); font-size: 28px !important; line-height: 1 !important; }
.bsrx-site .footer-brand em { font-style: italic; }.bsrx-site .footer-brand span { color: var(--gold); font-family: var(--sans); font-size: 8px; }
.bsrx-site .footer-about > p { max-width: 470px; margin: 0; color: var(--t-56); font-size: 16px; line-height: 1.75; }
.bsrx-site .trust-badges { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; color: var(--t-59); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bsrx-site .footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.bsrx-site .footer-column h4 { width: 100%; margin: 0 0 26px; padding-bottom: 19px; border-bottom: 1px solid var(--line); color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bsrx-site .footer-column a { margin: 0 0 14px; color: var(--t-56); font-size: 14px; font-weight: 700; transition: color .25s ease, transform .25s ease; }
.bsrx-site .footer-column a:hover { transform: translateX(4px); color: var(--ivory); }
.bsrx-site .footer-wordmark { display: grid; width: 100%; height: clamp(140px,12vw,190px); place-items: center; overflow: hidden; padding: 12px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: transparent; -webkit-text-stroke: 1px var(--line-2); font-family: var(--serif); font-size: clamp(78px,9vw,155px); font-weight: 600; line-height: .9; letter-spacing: -.04em; text-align: center; white-space: nowrap; }
.bsrx-site .footer-bottom { display: grid; min-height: 92px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px 40px; padding: 20px 0; color: var(--t-50); font-size: 12px; font-weight: 700; }
.bsrx-site .footer-bottom p { max-width: 650px; margin: 0; line-height: 1.6; }
.bsrx-site .footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 28px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bsrx-site .footer-bottom a:hover { color: var(--gold); }

.bsrx-site .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); transition-delay: var(--delay,0ms); }
.bsrx-site .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bsrx-site *,.bsrx-site *::before,.bsrx-site *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bsrx-site .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  :root { --shell: min(100% - 64px, 1050px); }
  .bsrx-site .site-header { grid-template-columns: 215px 1fr auto; padding: 0 32px; }
  .bsrx-site .desktop-nav { gap: 18px; }
  .bsrx-site .desktop-nav a { letter-spacing: .16em; }
  .bsrx-site .locale-button { display: none; }
  .bsrx-site .hero-visual { right: 5vw; }
  .bsrx-site .rank-head,.bsrx-site .casino-row { grid-template-columns: 70px 258px minmax(180px,1fr) 86px 150px 177px; column-gap: 18px; }
  .bsrx-site .article-grid { width: 100%; }
  .bsrx-site .faq-grid { grid-template-columns: 36% 1fr; gap: 45px; }
}

@media (max-width: 900px) {
  :root { --shell: calc(100% - 48px); }
  .bsrx-site .site-header { grid-template-columns: 1fr auto; padding: 0 24px; }
  .bsrx-site .desktop-nav,.bsrx-site .locale-button,.bsrx-site .about-button { display: none; }
  .bsrx-site .menu-toggle { display: block; }
  .bsrx-site .header-actions { gap: 19px; }
  .bsrx-site .hero { min-height: 900px; }
  .bsrx-site .hero-stage { flex: 1; min-height: 590px; padding-top: 100px; }
  .bsrx-site .hero h1 { font-size: clamp(63px,12vw,94px); }
  .bsrx-site .hero-visual { top: 210px; right: 0; width: 48vw; height: 520px; }
  .bsrx-site .hero-image-frame { height: 470px; }
  .bsrx-site .hero-lower { height: auto; grid-template-columns: 1fr; gap: 25px; margin-bottom: 0; padding: 35px 0; }
  .bsrx-site .hero-facts .shell { height: auto; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0; }
  .bsrx-site .hero-facts span:not(:first-child) { text-align: left; }
  .bsrx-site .rank-head { display: none; }
  .bsrx-site .casino-row { grid-template-columns: 60px 1fr 110px 140px; min-height: 170px; padding: 28px 0; column-gap: 16px; }
  .bsrx-site .operator { grid-column: 2; }.bsrx-site .offer { grid-column: 2; max-width: none; }.bsrx-site .rating { grid-column: 3; grid-row: 1 / span 2; }.bsrx-site .terms { grid-column: 4; grid-row: 1 / span 2; }.bsrx-site .casino-action { grid-column: 2 / 5; justify-content: flex-start; margin-top: 16px; }
  .bsrx-site .row-note { display: none !important; }
  .bsrx-site .method-grid { grid-template-columns: 1fr; }.bsrx-site .method-intro { position: static; }.bsrx-site .method-index { display: none; }
  .bsrx-site .article-grid { grid-template-columns: repeat(3, 42vw); width: max-content; }
  .bsrx-site .article-feature h3,.bsrx-site .article-card h3 { font-size: 30px; }
  .bsrx-site .complaints-grid { grid-template-columns: 1.35fr 1fr; gap: 35px; }
  .bsrx-site .footer-grid { grid-template-columns: 2fr 1fr 1fr; }.bsrx-site .footer-about { grid-column: auto; }.bsrx-site .footer-column { grid-column: auto; }.bsrx-site .footer-column:last-child { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }.bsrx-site .footer-column:last-child h4 { grid-column: 1/-1; }
  .bsrx-site .footer-bottom { grid-template-columns: 1fr; }.bsrx-site .footer-bottom nav { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .bsrx-site .brand { width: 176px; height: 25.65px; font-size: 25.65px; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100% - 48px); }
  .bsrx-site .scroll-progress { top: 0; }
  .bsrx-site .site-header { height: 65px; }
  .bsrx-site .hero-plus-one,.bsrx-site .hero-plus-two { display: none; }
  .bsrx-site .hero { min-height: 0; padding-top: 65px; }
  .bsrx-site .hero-stage { display: flex; min-height: 662px; flex-direction: column; padding-top: 47px; }
  .bsrx-site .eyebrow { margin-bottom: 36px; font-size: 12px; line-height: 1.6; letter-spacing: .18em; }
  .bsrx-site .hero h1 { font-size: clamp(51px,14.2vw,66px); line-height: .88; }
  .bsrx-site .hero h1 span:last-child em { display: block; }
  .bsrx-site .hero-visual { position: relative; top: auto; right: auto; width: 100%; height: auto; margin: 32px 0 0; }
  .bsrx-site .hero-image-frame { height: auto; aspect-ratio: 4/3; }
  .bsrx-site .hero-visual img { object-position: 50% 50%; }
  .bsrx-site .hero-visual figcaption { width: 100%; margin: 16px 0 0; gap: 18px; }
  .bsrx-site .hero-visual figcaption span { font-size: 12px; }
  .bsrx-site .hero-lower { padding: 38px 0; }
  .bsrx-site .hero-lower > p { font-size: 16px; }
  .bsrx-site .hero-cta { grid-template-columns: 1fr; }
  .bsrx-site .button { padding-inline: 20px; }
  .bsrx-site .hero-facts .shell { grid-template-columns: 1fr; gap: 15px; }
  .bsrx-site .rankings,.bsrx-site .guides,.bsrx-site .faq { padding: 86px 0; }
  .bsrx-site .section-heading { display: block; margin-bottom: 34px; }
  .bsrx-site .section-heading .eyebrow { margin-bottom: 28px; }
  .bsrx-site .section-heading h2 { margin-bottom: 28px; font-size: 50px; line-height: .92; }
  .bsrx-site .rank-table { border-top: 0; }
  .bsrx-site .casino-row { grid-template-columns: 48px 1fr 92px; gap: 0 10px; min-height: 0; padding: 30px 0; }
  .bsrx-site .rank-number { grid-row: 1 / span 2; font-size: 38px; align-self: start; }
  .bsrx-site .operator { grid-column: 2 / 4; }
  .bsrx-site .operator h3 { font-size: 23px; }
  .bsrx-site .offer { grid-column: 2 / 4; margin: 16px 0 22px; }
  .bsrx-site .rating { grid-column: 2; grid-row: auto; }
  .bsrx-site .terms { grid-column: 3; grid-row: auto; }
  .bsrx-site .casino-action { grid-column: 2 / 4; }
  .bsrx-site .visit { width: 125px; }.bsrx-site .square-arrow { height: 58px; }
  .bsrx-site .ranking-note { display: block; }.bsrx-site .ranking-note p { margin-bottom: 22px; }
  .bsrx-site .methodology { padding: 86px 0 100px; }
  .bsrx-site .method-intro h2 { font-size: 53px; }
  .bsrx-site .method-list { margin-top: 60px; }
  .bsrx-site .method-card { grid-template-columns: 54px 1fr; min-height: 0; padding: 42px 0; }
  .bsrx-site .method-number { font-size: 45px; }
  .bsrx-site .method-card h3 { font-size: 30px; }
  .bsrx-site .method-card p { font-size: 16px; }
  .bsrx-site .article-grid { display: grid; grid-template-columns: 82vw 82vw 82vw; width: max-content; margin-left: 0; gap: 14px; overflow: visible; }
  .bsrx-site .article-grid::after { content: ""; width: 10px; }
  .bsrx-site .guides .shell { width: auto; margin-left: 24px; }
  .bsrx-site .guides .section-heading { width: calc(100vw - 48px); }
  .bsrx-site .article-body { padding: 27px 24px; }
  .bsrx-site .article-feature h3,.bsrx-site .article-card h3 { font-size: 31px; }
  .bsrx-site .article-card p { font-size: 16px; }
  .bsrx-site .complaints { min-height: 620px; }
  .bsrx-site .complaints-grid { display: flex; min-height: 620px; flex-direction: column; align-items: stretch; justify-content: center; gap: 40px; padding: 70px 0; }
  .bsrx-site .complaints h2 { font-size: 48px; }
  .bsrx-site .complaints-copy { font-size: 16px; }
  .bsrx-site .faq-grid { grid-template-columns: 1fr; gap: 58px; }
  .bsrx-site .faq-intro h2 { font-size: 60px; }
  .bsrx-site .faq-item button { min-height: 80px; grid-template-columns: 28px 1fr 16px; }
  .bsrx-site .faq-item button > span:nth-child(2) { font-size: 21px; }
  .bsrx-site .faq-answer > div { padding-left: 28px; }
  .bsrx-site .responsible-inner { grid-template-columns: 42px 1fr; padding: 24px 0; }.bsrx-site .responsible .text-link { grid-column: 2; }
  .bsrx-site .footer-grid { grid-template-columns: 1fr 1fr; gap: 55px 25px; padding-top: 70px; }.bsrx-site .footer-about { grid-column: 1 / -1; }.bsrx-site .footer-column:last-child { grid-column: 1 / -1; }
  .bsrx-site .footer-wordmark { height: 110px; padding: 10px 24px; font-size: clamp(54px,18vw,72px); }
  .bsrx-site .footer-bottom { align-items: start; padding: 24px 0; }.bsrx-site .footer-bottom nav { gap: 12px 22px; }
}

@media (max-width: 480px) {
  .bsrx-site .brand { width: 158px; height: 23.03px; font-size: 23.03px; }
}

@media (max-width: 380px) {
  .bsrx-site .hero h1 { font-size: 49px; }
  .bsrx-site .hero-stage { min-height: 650px; }
  .bsrx-site .article-grid { grid-template-columns: 82vw 82vw 82vw; }
}


/* ---------------------------------------------------------------------------
   REAL-CONTENT ADJUSTMENTS

   Three places where the reference used a placeholder that real data replaces:
   a lettered square for the operator (the site has 99 real logos), a text
   wordmark for the brand (the site has an SVG pair), and one stock photo in the
   hero (the site has its own light/dark pair). Only the contents change - every
   box keeps the reference's dimensions.
   --------------------------------------------------------------------------- */

/* Brand: the site's own wordmark, in the 205x29.875 box the reference sized.
   Dark is this design's default, so the dark-ground logo shows first. */
.bsrx-site .brand img { width: 100%; height: auto; }
.bsrx-site .brand .bsrx-brand-logo-light { display: none; }
.bsrx-site .brand .bsrx-brand-logo-dark  { display: block; }

/* Operator mark: a real logo rather than initials on a colour. The 44x44 box
   and its place in the row are unchanged; contain keeps wordmark-shaped logos
   from being cropped. */
.bsrx-site .operator-mark.has-logo { background: none; }
.bsrx-site .operator-mark img { width: 100%; height: 100%; object-fit: contain; }

/* Hero: the site's existing pair, cross-faded on theme rather than the single
   stock photo the reference shipped. Both fill the same frame. */
.bsrx-site .hero-visual img { position: absolute; inset: 0; transition: opacity .4s ease; }
.bsrx-site .bsrank-hero-light { opacity: 0; }
.bsrx-site .bsrank-hero-dark  { opacity: 1; }

.bsrx-site .footer-brand img { width: 190px; height: auto; }

:root[data-theme="light"] .brand .bsrx-brand-logo-light { display: block; }
:root[data-theme="light"] .brand .bsrx-brand-logo-dark  { display: none; }
:root[data-theme="light"] .bsrank-hero-light { opacity: 1; }
:root[data-theme="light"] .bsrank-hero-dark  { opacity: 0; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand .bsrx-brand-logo-light { display: block; }
  :root:not([data-theme="dark"]) .brand .bsrx-brand-logo-dark  { display: none; }
  :root:not([data-theme="dark"]) .bsrank-hero-light { opacity: 1; }
  :root:not([data-theme="dark"]) .bsrank-hero-dark  { opacity: 0; }
}


/* ---------------------------------------------------------------------------
   GROUND-AWARE TEXT RAMP

   The ramp above is the reference's, and it was drawn for one ground only:
   near-black. Inverted onto a light ground the same mix percentage lands much
   weaker, because equal mixes are not equal contrast - 53% reads 5.37:1 on
   #0a0a0b but only 3.83:1 on #fafafa. Measured, three steps failed WCAG AA on
   light: the nav, the small labels and the methodology index.

   58% is the floor for 4.5:1 on a light ground, so the light ramp starts at 59
   and keeps the original spacing between steps - the hierarchy the design drew
   is preserved, it is just re-anchored.

   Four combinations exist, because the panel inverts independently of the page:
     dark page,  normal section -> dark ground  -> reference ramp
     dark page,  methodology    -> light ground -> light ramp
     light page, normal section -> light ground -> light ramp
     light page, methodology    -> dark ground  -> reference ramp
   --------------------------------------------------------------------------- */

:root[data-theme="light"] {
  --t-42: color-mix(in srgb, var(--ivory) 59%, var(--ink));
  --t-47: color-mix(in srgb, var(--ivory) 61%, var(--ink));
  --t-50: color-mix(in srgb, var(--ivory) 62%, var(--ink));
  --t-53: color-mix(in srgb, var(--ivory) 64%, var(--ink));
  --t-56: color-mix(in srgb, var(--ivory) 66%, var(--ink));
  --t-59: color-mix(in srgb, var(--ivory) 68%, var(--ink));
  --t-64: color-mix(in srgb, var(--ivory) 72%, var(--ink));
  --t-68: color-mix(in srgb, var(--ivory) 75%, var(--ink));
  --t-74: color-mix(in srgb, var(--ivory) 80%, var(--ink));
  --t-87: color-mix(in srgb, var(--ivory) 90%, var(--ink));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --t-42: color-mix(in srgb, var(--ivory) 59%, var(--ink));
    --t-47: color-mix(in srgb, var(--ivory) 61%, var(--ink));
    --t-50: color-mix(in srgb, var(--ivory) 62%, var(--ink));
    --t-53: color-mix(in srgb, var(--ivory) 64%, var(--ink));
    --t-56: color-mix(in srgb, var(--ivory) 66%, var(--ink));
    --t-59: color-mix(in srgb, var(--ivory) 68%, var(--ink));
    --t-64: color-mix(in srgb, var(--ivory) 72%, var(--ink));
    --t-68: color-mix(in srgb, var(--ivory) 75%, var(--ink));
    --t-74: color-mix(in srgb, var(--ivory) 80%, var(--ink));
    --t-87: color-mix(in srgb, var(--ivory) 90%, var(--ink));
  }
}

/* Dark page: the panel is the light ground. */
.bsrx-site .methodology {
  --t-42: color-mix(in srgb, var(--ivory) 59%, var(--ink));
  --t-47: color-mix(in srgb, var(--ivory) 61%, var(--ink));
  --t-50: color-mix(in srgb, var(--ivory) 62%, var(--ink));
  --t-53: color-mix(in srgb, var(--ivory) 64%, var(--ink));
  --t-56: color-mix(in srgb, var(--ivory) 66%, var(--ink));
  --t-59: color-mix(in srgb, var(--ivory) 68%, var(--ink));
  --t-64: color-mix(in srgb, var(--ivory) 72%, var(--ink));
  --t-68: color-mix(in srgb, var(--ivory) 75%, var(--ink));
  --t-74: color-mix(in srgb, var(--ivory) 80%, var(--ink));
  --t-87: color-mix(in srgb, var(--ivory) 90%, var(--ink));
}

/* Light page: the panel is the dark ground, so the reference ramp returns. */
:root[data-theme="light"] .methodology {
  --t-42: color-mix(in srgb, var(--ivory) 42%, var(--ink));
  /* 47% measured 4.45:1 on the dark ground - just under AA. 50% is 4.93. */
  --t-47: color-mix(in srgb, var(--ivory) 50%, var(--ink));
  --t-50: color-mix(in srgb, var(--ivory) 50%, var(--ink));
  --t-53: color-mix(in srgb, var(--ivory) 53%, var(--ink));
  --t-56: color-mix(in srgb, var(--ivory) 56%, var(--ink));
  --t-59: color-mix(in srgb, var(--ivory) 59%, var(--ink));
  --t-64: color-mix(in srgb, var(--ivory) 64%, var(--ink));
  --t-68: color-mix(in srgb, var(--ivory) 68%, var(--ink));
  --t-74: color-mix(in srgb, var(--ivory) 74%, var(--ink));
  --t-87: color-mix(in srgb, var(--ivory) 87%, var(--ink));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .methodology {
    --t-42: color-mix(in srgb, var(--ivory) 42%, var(--ink));
    /* 47% measured 4.45:1 on the dark ground - just under AA. 50% is 4.93. */
  --t-47: color-mix(in srgb, var(--ivory) 50%, var(--ink));
    --t-50: color-mix(in srgb, var(--ivory) 50%, var(--ink));
    --t-53: color-mix(in srgb, var(--ivory) 53%, var(--ink));
    --t-56: color-mix(in srgb, var(--ivory) 56%, var(--ink));
    --t-59: color-mix(in srgb, var(--ivory) 59%, var(--ink));
    --t-64: color-mix(in srgb, var(--ivory) 64%, var(--ink));
    --t-68: color-mix(in srgb, var(--ivory) 68%, var(--ink));
    --t-74: color-mix(in srgb, var(--ivory) 74%, var(--ink));
    --t-87: color-mix(in srgb, var(--ivory) 87%, var(--ink));
  }
}


/* ---------------------------------------------------------------------------
   LINK COLOUR SPECIFICITY

   style.css ships `.bsrx-site a { color: inherit }` at (0,1,1). The body carries
   .bsrx-site because header.php renders it, so that rule outranks every
   single-class link colour in this sheet (0,1,0) no matter the source order -
   the section links lost their red, and .button-light lost its dark ink, which
   would have put ivory text on an ivory button.

   Re-stated one class higher. Nothing in style.css is edited.
   --------------------------------------------------------------------------- */

.bsrx-site .text-link { color: var(--gold); }
.bsrx-site .text-link:hover { color: var(--ivory); }
.bsrx-site .dark-link { color: var(--t-87); }
.bsrx-site .dark-link:hover { color: var(--gold); }
.bsrx-site .visit { color: var(--ink); }
.bsrx-site .square-arrow { color: var(--t-42); }
.bsrx-site .square-arrow:hover { color: var(--gold); }
.bsrx-site .button-light { color: var(--ink); }
.bsrx-site .button-outline:hover { color: var(--ink); }
.bsrx-site .article-card { color: var(--ivory); }
.bsrx-site .footer-brand { color: var(--ivory); }


/* ---------------------------------------------------------------------------
   LOGO BOX

   The reference sized .operator-mark 44x44 because it held two letters on a
   colour. Every one of the 99 casino logos is 408x180 - a 2.267:1 wordmark -
   so object-fit:contain inside a square rendered them 44x19, using 44%% of the
   box height and looking like an afterthought.

   The box now carries the logos' own ratio, so they fill it edge to edge. The
   operator column widened to take it and the offer column's minimum dropped by
   the same amount, which keeps the six-column row inside the 1136px shell.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .bsrx-site .operator-mark { width: 122px; height: 54px; }
}

@media (max-width: 640px) {
  /* The operator spans the full row here, so the logo can take more of it. */
  .bsrx-site .operator-mark { width: 136px; height: 60px; }
  .bsrx-site .operator { gap: 14px; }
}


/* ---------------------------------------------------------------------------
   FULL-BLEED HERO

   The reference floated a 284x552 portrait at the right of the hero. This fills
   the whole section with the site's own hero photograph instead.

   The scrim is the part that matters. A photograph behind a 97px headline only
   works if something holds the contrast, and this site has two grounds: ivory
   text on near-black, and near-black text on off-white. A fixed dark scrim
   would make light mode unreadable. So the scrim is mixed from var(--ink) - the
   page ground - and therefore darkens in dark mode and lightens in light mode
   on its own. Brightness is flipped for the same reason.
   --------------------------------------------------------------------------- */

.bsrx-site .hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  margin: 0;
}

.bsrx-site .hero-image-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bsrx-site .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored off-centre so the subject survives the crop on tall viewports. */
  object-position: 68% 50%;
  filter: grayscale(1) contrast(1.12) brightness(.46);
}

.bsrx-site .vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ink) 94%, transparent) 0%,
      color-mix(in srgb, var(--ink) 72%, transparent) 38%,
      color-mix(in srgb, var(--ink) 30%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--ink) 85%, transparent) 0%,
      transparent 35%);
}

/* The rating caption, re-hung on the shell's right edge now that the image is
   no longer a column of its own. */
.bsrx-site .hero-visual figcaption {
  position: absolute;
  z-index: 2;
  top: 150px;
  left: 50%;
  width: var(--shell);
  justify-content: flex-end;
  margin: 0;
  transform: translateX(-50%);
}

/* Light mode: lift the photograph instead of crushing it, so the near-black
   headline reads against it. */
:root[data-theme="light"] .hero-visual img {
  filter: grayscale(1) contrast(1.02) brightness(1.28);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-visual img {
    filter: grayscale(1) contrast(1.02) brightness(1.28);
  }
}

@media (max-width: 900px) {
  .bsrx-site .hero-visual { top: 0; right: 0; width: auto; height: auto; }
  .bsrx-site .hero-image-frame { height: 100%; }
  .bsrx-site .hero-visual figcaption { top: 120px; }
}

@media (max-width: 640px) {
  /* The reference turned the figure back into a block here; it stays full-bleed. */
  .bsrx-site .hero-visual { position: absolute; inset: 0; width: auto; height: auto; margin: 0; }
  .bsrx-site .hero-image-frame { height: 100%; aspect-ratio: auto; }
  .bsrx-site .hero-visual img { object-position: 60% 50%; }
  .bsrx-site .hero-visual figcaption { display: none; }
  .bsrx-site .vignette {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--ink) 92%, transparent) 0%,
        color-mix(in srgb, var(--ink) 78%, transparent) 60%,
        color-mix(in srgb, var(--ink) 62%, transparent) 100%),
      linear-gradient(to top,
        color-mix(in srgb, var(--ink) 88%, transparent) 0%,
        transparent 40%);
  }
}


/* ---------------------------------------------------------------------------
   MOBILE HERO

   No photograph below 640. At that width the scrim needed to keep a 40px+
   headline legible was covering most of the image anyway, so it was paying a
   full-size download for something barely visible.

   The headline is fluid rather than stepped. The reference clamped it per
   breakpoint and then pinned a fixed 49px under 380px - which freezes the
   scale exactly where it most needs to keep shrinking, and is what pushes the
   long line off the side on a 320px screen. One clamp now covers 320 to 640
   continuously.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .bsrx-site .hero-visual { display: none; }

  /* The stage was 662px tall to seat the copy above the image. With no image
     that is an empty column, so it sizes to its content again. */
  .bsrx-site .hero { min-height: 0; }
  .bsrx-site .hero-stage {
    flex: 0 0 auto;
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 40px;
  }

  .bsrx-site .hero h1 {
    font-size: clamp(34px, 11.2vw, 60px);
    line-height: .95;
  }

  /* Long words in a 34px serif still need to be allowed to break rather than
     push the line out of the viewport. */
  .bsrx-site .hero h1 span { overflow-wrap: break-word; }

  .bsrx-site .hero-lower { padding: 30px 0; }
}

@media (max-width: 380px) {
  .bsrx-site .hero h1 { font-size: clamp(34px, 11.2vw, 60px); }
  .bsrx-site .hero-stage { min-height: 0; }
}

.bsrx-site .hero-image-frame picture { display: contents; }


/* ---------------------------------------------------------------------------
   HERO IMAGE: NO TREATMENT

   The photograph shows as shot. The reference's grayscale/contrast/brightness
   filter is off, as is the theme-mixed scrim that sat over it, in both modes.
   --------------------------------------------------------------------------- */

.bsrx-site .hero-visual img,
:root[data-theme="light"] .hero-visual img {
  filter: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-visual img { filter: none; }
}

.bsrx-site .vignette { display: none; }


/* ---------------------------------------------------------------------------
   HEADLINE LINE BREAK

   "in Seconds." drops to its own line at every width. The reference only did
   this under 640px; the four-line setting reads better at the large sizes too,
   and it keeps the italic phrase from running under the subject of the photo.
   --------------------------------------------------------------------------- */

.bsrx-site .hero h1 span:last-child em { display: block; }


/* HERO CAPTION REMOVED - the rating figcaption is no longer rendered. The
   reference's figcaption rules above now match nothing; this keeps that
   explicit so the next reader does not hunt for the element. */
.bsrx-site .hero-visual figcaption { display: none; }


/* ---------------------------------------------------------------------------
   TERMS COLUMN

   The reference set these nowrap because its sample values were all short
   ("40x", "1x"). Real ones are not - "1x on Flex Spins", "~US$20 equivalent" -
   and nowrap in a fixed 165px column does not shorten them, it just lets them
   run under the Visit button.

   Two columns instead: the label keeps its 64px, the value wraps inside what is
   left and stays aligned under itself rather than restarting under the label.
   --------------------------------------------------------------------------- */

.bsrx-site .terms p {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0 6px;
  align-items: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.bsrx-site .terms p span { width: auto; }


/* ---------------------------------------------------------------------------
   METHODOLOGY FOLLOWS THE THEME

   The reference dropped a cream plate into a near-black page, and this port
   mirrored that by swapping --ink and --ivory on the section - which made it
   the opposite of the page in both modes: light panel on the dark theme, dark
   panel on the light one.

   It now follows the page instead. Setting the two base colours and the whole
   ramp back to `inherit` is enough: custom properties inherit, so the section
   picks up whatever :root resolved for the current theme, and every derived
   value - rules, muted text, the numerals, the accent - recomputes with it. No
   per-element colour is restated anywhere.
   --------------------------------------------------------------------------- */

.bsrx-site .methodology {
  --ink: inherit;
  --ivory: inherit;
  --gold: inherit;
  --gold-ink: inherit;
  --t-42: inherit;
  --t-47: inherit;
  --t-50: inherit;
  --t-53: inherit;
  --t-56: inherit;
  --t-59: inherit;
  --t-64: inherit;
  --t-68: inherit;
  --t-74: inherit;
  --t-87: inherit;
  background: var(--ink);
  color: var(--ivory);
}

:root[data-theme="light"] .methodology {
  --ink: inherit;
  --ivory: inherit;
  --gold: inherit;
  --gold-ink: inherit;
  --t-42: inherit;
  --t-47: inherit;
  --t-50: inherit;
  --t-53: inherit;
  --t-56: inherit;
  --t-59: inherit;
  --t-64: inherit;
  --t-68: inherit;
  --t-74: inherit;
  --t-87: inherit;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .methodology {
    --ink: inherit;
    --ivory: inherit;
    --gold: inherit;
    --gold-ink: inherit;
    --t-42: inherit;
    --t-47: inherit;
    --t-50: inherit;
    --t-53: inherit;
    --t-56: inherit;
    --t-59: inherit;
    --t-64: inherit;
    --t-68: inherit;
    --t-74: inherit;
    --t-87: inherit;
  }
}


/* ---------------------------------------------------------------------------
   LISTING BAR AND PAGER

   The reference only ever showed five operators, so it had no count, no sort
   and no pagination. These are built from its existing vocabulary rather than
   invented: 12px uppercase with wide tracking for the labels, hairline rules,
   the accent reserved for the current page.
   --------------------------------------------------------------------------- */

.bsrx-site .listing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 18px;
}

.bsrx-site .listing-count {
  margin: 0;
  color: var(--t-53);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bsrx-site .listing-sort { display: flex; align-items: center; gap: 12px; }

.bsrx-site .listing-sort label {
  color: var(--t-53);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bsrx-site .listing-sort select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-7);
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.bsrx-site .listing-sort select:hover { border-color: var(--gold); }

.bsrx-site .listing-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.bsrx-site .pager-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-6);
  color: var(--ivory);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease;
}

.bsrx-site .pager-step:hover { border-color: var(--gold); color: var(--gold); }
.bsrx-site .pager-step.is-off { opacity: .4; }

.bsrx-site .pager-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsrx-site .pager-pages a,
.bsrx-site .pager-pages span {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  color: var(--t-53);
  font-family: var(--serif);
  font-size: 17px;
  transition: color .25s ease;
}

.bsrx-site .pager-pages a:hover { color: var(--ivory); }
.bsrx-site .pager-pages [aria-current="page"] { color: var(--gold); }

/* style.css ships .bsrx-site a { color: inherit } at (0,1,1), which outranks
   these single-class rules; restated one class higher, as elsewhere. */
.bsrx-site .pager-step { color: var(--ivory); }
.bsrx-site .pager-step:hover { color: var(--gold); }
.bsrx-site .pager-pages a { color: var(--t-53); }
.bsrx-site .pager-pages a:hover { color: var(--ivory); }

@media (max-width: 640px) {
  .bsrx-site .listing-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bsrx-site .listing-pager { justify-content: center; }
  .bsrx-site .pager-pages { justify-content: center; }
}


/* ---------------------------------------------------------------------------
   LOGO PLATES

   The 99 logos are not one kind of artwork: 73 are white wordmarks meant for a
   dark ground, 22 are dark ones meant for a light ground, and 4 read on either.
   On a single background a little over a fifth of them vanish, and which fifth
   flips with the theme.

   Each logo was measured per pixel against a white and a near-black plate -
   counting how much of the artwork falls under 3:1 on each - and carries the
   answer in _bsrx_logo_plate. The plate is fixed, not themed: a white wordmark
   needs a dark plate in light mode just as much as in dark.

   The 4 that read either way get no plate, so they sit on the page ground
   rather than in a box they do not need.
   --------------------------------------------------------------------------- */

.bsrx-site .operator-mark.plate-light,
.bsrx-site .operator-mark.plate-dark {
  padding: 5px 8px;
}

.bsrx-site .operator-mark.plate-light { background: #ffffff; }
.bsrx-site .operator-mark.plate-dark  { background: #111114; }
.bsrx-site .operator-mark.plate-none  { background: none; }


/* ---------------------------------------------------------------------------
   ACTION COLUMN

   The square arrow is gone. It duplicated the review link and carried an icon
   with no label, so the column now reads top to bottom: the affiliate button,
   then the review link under it.

   'Read review' used to live inside .row-note, which is revealed on hover -
   so on a touch screen, where there is no hover, it could not be reached at
   all. It is a permanent part of the row now; .row-note keeps only the terms
   text it was built for.
   --------------------------------------------------------------------------- */

.bsrx-site .casino-action {
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.bsrx-site .review-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: gap .3s ease;
}

.bsrx-site .review-link:hover { gap: 14px; text-decoration: underline; text-underline-offset: 4px; }

/* style.css ships .bsrx-site a { color: inherit } at (0,1,1). */
.bsrx-site .review-link { color: var(--gold); }

/* The note no longer holds a link, so its floated-anchor rules are dead. */
.bsrx-site .row-note a { float: none; width: auto; margin-right: 0; }

@media (max-width: 900px) {
  .bsrx-site .casino-action { align-items: flex-start; }
}


/* ---------------------------------------------------------------------------
   FOOTER WORDMARK

   The outline was a 1px stroke in a 14%% mix - 1.4:1 on either ground, which is
   under the threshold where an edge is visible at all, so the wordmark read as
   an empty band.

   Two values rather than one, because the ramp is not symmetric: 42%% lands
   3.76:1 on the dark ground but only 2.76:1 on the light one. 53%% is needed
   there to reach the same place. Both sit near 3.8:1 - clearly drawn, still an
   outline rather than a headline.

   The stroke also goes to 1.5px: at 155px type a single pixel is a hairline
   that sub-pixel rendering thins further.
   --------------------------------------------------------------------------- */

.bsrx-site .footer-wordmark {
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ivory) 42%, var(--ink));
}

:root[data-theme="light"] .footer-wordmark {
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ivory) 53%, var(--ink));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .footer-wordmark {
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ivory) 53%, var(--ink));
  }
}


/* ---------------------------------------------------------------------------
   FOOTER BRAND

   The same two-file wordmark the header carries, swapped on the theme. It gets
   its own classes rather than reusing .bsrx-brand-logo-* : those are scoped to
   .bsrx-brand in style.css, so half the rule set would not apply here and both
   files would show at once.
   --------------------------------------------------------------------------- */

.bsrx-site .footer-brand img { display: block; width: 190px; height: auto; }
.bsrx-site .footer-brand .bsrank-foot-logo-light { display: none; }
.bsrx-site .footer-brand .bsrank-foot-logo-dark  { display: block; }

:root[data-theme="light"] .footer-brand .bsrank-foot-logo-light { display: block; }
:root[data-theme="light"] .footer-brand .bsrank-foot-logo-dark  { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .footer-brand .bsrank-foot-logo-light { display: block; }
  :root:not([data-theme="dark"]) .footer-brand .bsrank-foot-logo-dark  { display: none; }
}


/* ---------------------------------------------------------------------------
   PARAGRAPH MARGINS

   style.css ships `.bsrx-site p { margin: 0 }` at (0,1,1). Every paragraph rule
   in this sheet written as a single class - .complaints-copy, .offer, .eyebrow -
   is (0,1,0) and loses to it regardless of source order, so those margins were
   silently dropped. The ones written as `.parent p` were never affected, which
   is why only some spacing looked wrong.

   Restated one class higher. Same values the design declared; nothing new.
   --------------------------------------------------------------------------- */

.bsrx-site .complaints-copy { margin: 26px 0 0; }
.bsrx-site .eyebrow { margin: 0 0 32px; }

@media (max-width: 640px) {
  .bsrx-site .offer { margin: 16px 0 22px; }
  .bsrx-site .eyebrow { margin-bottom: 36px; }
}


/* ---------------------------------------------------------------------------
   FAQ HEADING

   "Questions" was set as an outline - transparent fill with a hairline stroke -
   so it read as a ghost of the other two words rather than part of the same
   sentence. It is now filled like "Frequently Asked", in the heading's own
   colour, so the three lines carry equal weight.
   --------------------------------------------------------------------------- */

.bsrx-site .faq-intro h2 span {
  color: inherit;
  -webkit-text-stroke: 0;
}


/* ---------------------------------------------------------------------------
   OFFER WEIGHT

   The welcome offer is the one piece of a row a reader is actually comparing,
   and it sat at 400 - lighter than the 700 labels around it. 600 rather than
   700: at 16px in a dense table the heavier cut starts to grey out as a block.

   Written with the .bsrx-site prefix because a single-class rule loses to
   style.css on anything it also declares.
   --------------------------------------------------------------------------- */

.bsrx-site .offer { font-weight: 600; }


/* ---------------------------------------------------------------------------
   HEADER FONT ALIGNMENT

   header.php is styled by style.css, which has its own --font-body. Without
   this the nav and utility bar would stay on the old face while the page body
   moved, which reads as a mistake. Declared here, so it applies only on the
   pages that load this sheet - the live site is untouched.
   --------------------------------------------------------------------------- */

:root { --font-body: var(--sans); }


/* ---------------------------------------------------------------------------
   SANS HEADINGS

   No display serif anywhere - one professional sans across the whole page.

   The weights have to move with it. Cormorant was set at 500 and read as
   medium because serif stems carry more ink per size; the same 500 in a
   grotesque looks underset at 97px. Headings go to 700, and the tracking
   opens slightly - the serif wanted -0.025em to close its wide sidebearings,
   which a sans does not have.

   The outlined numerals and the footer wordmark follow automatically; they
   were only ever the serif token.
   --------------------------------------------------------------------------- */

.bsrx-site .hero h1,
.bsrx-site .section-heading h2,
.bsrx-site .method-intro h2,
.bsrx-site .complaints h2,
.bsrx-site .faq-intro h2 {
  font-weight: 700;
  letter-spacing: -0.022em;
}

.bsrx-site .hero h1 em,
.bsrx-site .section-heading h2 em,
.bsrx-site .complaints h2 em,
.bsrx-site .faq-intro h2 em,
.bsrx-site .method-intro h2 em {
  font-weight: 600;
}

.bsrx-site .operator h3,
.bsrx-site .article-card h3,
.bsrx-site .method-card h3,
.bsrx-site .faq-item button > span:nth-child(2) {
  font-weight: 700;
  letter-spacing: -0.008em;
}

.bsrx-site .rating strong,
.bsrx-site .method-number,
.bsrx-site .rank-number,
.bsrx-site .footer-wordmark { font-weight: 700; }


/* ---------------------------------------------------------------------------
   AUDIT FIXES

   1. "How we RATE casinos" was invisible - ratio 1.00, the word painted in the
      page ground. .method-intro h2 em was set to var(--ink), which was correct
      while that panel inverted: --ink was the cream plate, so the em read as
      dark on light. Once the panel started following the theme, --ink became
      the background itself. Matched to the other headings' em instead.

   2. The responsible band is a red plate with its own ink, but the link inside
      used --t-87, which is mixed from the page's ivory/ink and knows nothing
      about that plate: 2.62:1 dark, 2.85:1 light. It now takes the band's ink.

   3. Footer links measured 19-22px tall, under the 24px minimum target size.
      Height only - the type and rhythm are unchanged.
   --------------------------------------------------------------------------- */

.bsrx-site .method-intro h2 em { color: var(--ivory); }

.bsrx-site .responsible .text-link,
.bsrx-site .responsible .text-link {
  color: var(--gold-ink);
  border-color: color-mix(in srgb, var(--gold-ink) 45%, transparent);
}

.bsrx-site .responsible .text-link:hover,
.bsrx-site .responsible .text-link:hover {
  color: var(--gold-ink);
  border-color: var(--gold-ink);
}

.bsrx-site .footer-column a,
.bsrx-site .footer-bottom nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* The listing's top heading is now an h1 (every page needs one); the reference
   only ever styled h2 in this slot. */
.bsrx-site .section-heading h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.022em;
}
.bsrx-site .section-heading h1 em { color: var(--ivory); font-style: italic; font-weight: 600; }
@media (max-width: 640px) {
  .bsrx-site .section-heading h1 { margin-bottom: 28px; font-size: 50px; line-height: .92; }
}

/* The listing promotes each operator to h2 (its page title is the h1), so the
   operator-name rules have to cover both levels - the homepage keeps h3 under
   its section h2. */
.bsrx-site .operator h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.008em;
}
@media (max-width: 640px) { .bsrx-site .operator h2 { font-size: 23px; } }


/* ---------------------------------------------------------------------------
   FOCUS VISIBILITY

   This sheet defined no focus styling at all - every :focus rule on the page
   came from WordPress core, for blocks this design does not use. Keyboard users
   were left with the browser default ring, which on a near-black ground is
   close to invisible, and on the ivory buttons is a thin blue line.

   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind. The accent is used rather than a fixed colour, so it inverts with the
   theme like everything else, and the offset keeps it clear of the glyphs.
   --------------------------------------------------------------------------- */

.bsrx-site a:focus-visible,
.bsrx-site button:focus-visible,
.bsrx-site select:focus-visible,
.bsrx-site input:focus-visible,
.bsrx-site [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

/* On the ivory buttons and the red band the accent has nothing to sit against,
   so those take the surface's own ink instead. */
.bsrx-site .visit:focus-visible,
.bsrx-site .button-light:focus-visible {
  outline-color: var(--ink);
  outline-offset: -5px;
}

.bsrx-site .responsible a:focus-visible {
  outline-color: var(--gold-ink);
}

/* The search field clears its outline in the reference; give it a border cue. */
.bsrx-site .search-row input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
   TYPE SCALE

   The page carried 15 distinct sizes, several of them a few percent apart:
   97.28/89.6 (1.09), 72/66 (1.09), 66/60 (1.10), 30/29 (1.03). A step under
   about 1.15 is not read as hierarchy - the eye registers it as inconsistency,
   which is a large part of why the page looked assembled rather than designed.

   Replaced with one modular scale, ratio 1.26 anchored on the 16px body:

     13 . 16 . 20 . 25 . 32 . 40 . 64 . 81 . 102

   Nine steps instead of fifteen, every neighbouring pair at least 25% apart, so
   each is unmistakably a different level. The three section-heading sizes
   (72 / 89.6 / 60) collapse into one: there was no reason FAQ shouted louder
   than Methodology, or Complaints quieter.

   Line heights are set by role, not left to inherit. The 43px rank numerals
   were on 1.55 - a prose leading applied to display figures, which is what put
   the loose gaps in the table rows. Display gets 0.95-1.0, headings 1.15,
   prose 1.6.
   --------------------------------------------------------------------------- */

:root {
  --t-micro:  13px;
  --t-body:   16px;
  --t-lead:   20px;
  --t-sub:    25px;
  --t-card:   32px;
  --t-figure: 40px;
  --t-head:   clamp(32px, 5vw, 64px);
  --t-hero:   clamp(40px, 7.9vw, 102px);
}

/* Display */
.bsrx-site .hero h1 { font-size: var(--t-hero); line-height: 0.95; }

.bsrx-site .section-heading h1,
.bsrx-site .section-heading h2,
.bsrx-site .method-intro h2,
.bsrx-site .complaints h2,
.bsrx-site .faq-intro h2 {
  font-size: var(--t-head);
  line-height: 1.0;
}

/* The outlined numerals are display figures, not prose. */
.bsrx-site .method-number { font-size: clamp(34px, 4.6vw, 64px); line-height: 1; }
.bsrx-site .rank-number   { font-size: var(--t-figure); line-height: 1; }

/* Headings inside components */
.bsrx-site .method-card h3,
.bsrx-site .article-card h3,
.bsrx-site .article-feature h3 { font-size: var(--t-card); line-height: 1.15; }

.bsrx-site .rating strong { font-size: var(--t-card); line-height: 1; }

.bsrx-site .faq-item button > span:nth-child(2) { font-size: var(--t-sub); line-height: 1.2; }

.bsrx-site .operator h2,
.bsrx-site .operator h3 { font-size: var(--t-lead); line-height: 1.2; }

/* Prose. One leading for running text rather than the six that were in use. */
.bsrx-site .hero-lower > p,
.bsrx-site .method-card p,
.bsrx-site .article-card p,
.bsrx-site .complaints-copy,
.bsrx-site .faq-answer p,
.bsrx-site .ranking-note p,
.bsrx-site .responsible p,
.bsrx-site .footer-about > p { font-size: var(--t-body); line-height: 1.6; }

/* Denser blocks inside the table keep a tighter leading. */
.bsrx-site .offer { line-height: 1.45; }
.bsrx-site .terms p { line-height: 1.35; }

/* 14px was a step the scale does not contain, and footer links are the one
   place a reader actually hunts for a target. Raised to body size. */
.bsrx-site .footer-column a { font-size: var(--t-body); }

@media (max-width: 640px) {
  .bsrx-site .faq-item button > span:nth-child(2) { font-size: var(--t-lead); }
  .bsrx-site .method-card h3,
  .bsrx-site .article-card h3,
  .bsrx-site .article-feature h3 { font-size: 25px; }
  .bsrx-site .rank-number { font-size: 32px; }
}


/* ---------------------------------------------------------------------------
   SCALE: LAST TWO COLLISIONS

   Two pairs still sat inside the 1.15 threshold after the first pass:

     footer wordmark 115.2 vs hero 101.12  (1.14)
     section heading 64 vs method numeral 58.88  (1.09)

   The wordmark now takes the hero step exactly - it is the same gesture at the
   other end of the page, so sharing a size is correct rather than a compromise.

   The method numerals join the rank numerals at 40. Both are outlined figures
   doing the same job; having them at two near-identical sizes was the kind of
   accident this pass exists to remove. It also puts real distance between a
   numeral and the heading beside it.

   Eight steps: 12 . 16 . 20 . 25 . 32 . 40 . 64 . 102
   Every neighbouring pair is at least 1.25 apart.
   --------------------------------------------------------------------------- */

.bsrx-site .footer-wordmark { font-size: var(--t-hero); }
.bsrx-site .method-number { font-size: var(--t-figure); }

@media (max-width: 640px) {
  .bsrx-site .method-number { font-size: 32px; }
}


/* ---------------------------------------------------------------------------
   LISTING CONTROLS ON SCALE

   Two sizes I invented for the pager and sort control sat off the scale: 17px
   (1.06 from body) and 13px (1.08 from the label step). Both are inside the
   threshold where a difference reads as a mistake rather than a level. They
   take the body step instead - which also makes the sort control easier to
   read, since it is a real form field rather than a label.
   --------------------------------------------------------------------------- */

.bsrx-site .pager-pages a,
.bsrx-site .pager-pages span { font-size: var(--t-body); }

.bsrx-site .listing-sort select { font-size: var(--t-body); }


/* ---------------------------------------------------------------------------
   REVIEW PAGE

   A casino review is not the homepage with different words. The homepage sells
   the method; a review answers one question - is this operator worth a deposit -
   so the page leads with the figure and the offer, then splits the body into
   the four parts every review is actually written in.

   Sizes come from the scale above, not from new numbers. The review title uses
   --t-head rather than --t-hero on purpose: the homepage hero stays the largest
   type on the site, so a review reads as a page within it, not a second front
   door. --t-micro is restated at 12px because that is the size every eyebrow on
   the site already uses; the 13px it was declared at is used by nothing.
   --------------------------------------------------------------------------- */

:root { --t-micro: 12px; }

.bsrx-site .review-hero { padding: 56px 0 0; }

.bsrx-site .review-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 48px;
  color: var(--t-53);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .review-crumb a { color: var(--t-53); }
.bsrx-site .review-crumb a:hover { color: var(--gold); }
.bsrx-site .review-crumb strong { color: var(--ivory); font-weight: 700; }

.bsrx-site .review-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 327px;
  align-items: start; gap: 64px; padding-bottom: 60px;
}
.bsrx-site .operator-mark.is-review-mark { width: 172px; height: 76px; margin: 0 0 30px; }
.bsrx-site .review-identity h1 { margin: 0 0 24px; font-size: var(--t-head); font-weight: 700; line-height: 1.0; letter-spacing: -.022em; }
.bsrx-site .review-offer { max-width: 44ch; margin: 0; color: var(--t-87); font-size: var(--t-lead); line-height: 1.5; }

.bsrx-site .review-action { padding: 28px; border: 1px solid var(--line); }
.bsrx-site .review-score { display: flex; align-items: baseline; gap: 4px; }
.bsrx-site .review-score strong { font-size: var(--t-figure); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.bsrx-site .review-score small { color: var(--t-53); font-size: var(--t-lead); font-weight: 700; }
.bsrx-site .review-score-note { margin: 14px 0 24px; color: var(--t-59); font-size: var(--t-micro); font-weight: 700; line-height: 1.55; }
.bsrx-site .visit.visit-wide { width: 100%; height: 64px; }
.bsrx-site .review-terms { margin: 16px 0 0; color: var(--t-59); font-size: var(--t-micro); line-height: 1.55; }

.bsrx-site .review-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin: 0; padding: 30px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bsrx-site .review-strip dt { color: var(--t-53); font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bsrx-site .review-strip dd { margin: 10px 0 0; font-size: var(--t-lead); font-weight: 700; line-height: 1.3; }

/* Pros and cons carry the same weight - a two-column split, not a green tick
   over a red cross. The only colour difference is the marker, so neither side
   is pre-judged by the layout. */
.bsrx-site .review-balance { padding: 104px 0; }
.bsrx-site .balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.bsrx-site .balance-label {
  display: flex; align-items: center;
  margin: 0 0 26px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  color: var(--t-53); font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .balance-label span {
  display: inline-grid; width: 22px; height: 22px; place-items: center; margin-right: 12px;
  border: 1px solid var(--line-5); color: var(--gold); font-size: var(--t-micro);
}
.bsrx-site .balance-col ul { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.bsrx-site .balance-col li { position: relative; padding-left: 24px; color: var(--t-87); font-size: var(--t-body); line-height: 1.6; }
.bsrx-site .balance-col li::before { content: ""; position: absolute; top: .72em; left: 0; width: 10px; height: 1px; background: var(--gold); }
.bsrx-site .balance-col.is-against li::before { background: var(--t-50); }

.bsrx-site .review-facts { padding: 0 0 104px; }
.bsrx-site .facts-body p { margin: 0 0 20px; color: var(--t-87); font-size: var(--t-body); line-height: 1.6; }
.bsrx-site .bsrx-facts-table { display: grid; margin-top: 8px; border-top: 1px solid var(--line); }
.bsrx-site .bsrx-facts-table > div {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.bsrx-site .bsrx-facts-table > div > span:first-child { color: var(--t-53); font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bsrx-site .bsrx-facts-table > div > span:last-child { color: var(--ivory); font-size: var(--t-body); line-height: 1.55; }

/* The source list is the credibility of the whole page, so it is set as a list
   of citations rather than a footnote. Numerals are outlined like every other
   index on the site. */
.bsrx-site .source-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-6); }
.bsrx-site .source-list li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--line-6);
}
.bsrx-site .source-number { color: transparent; -webkit-text-stroke: 1px var(--line-6); font-size: var(--t-card); font-weight: 700; line-height: 1; }
.bsrx-site .source-name { font-size: var(--t-lead); line-height: 1.3; }
.bsrx-site .source-name a { color: var(--ivory); border-bottom: 1px solid var(--line-5); padding-bottom: 2px; }
.bsrx-site .source-name a:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 1100px) {
  .bsrx-site .review-head { grid-template-columns: 1fr; gap: 40px; }
  .bsrx-site .review-action { max-width: 420px; }
  .bsrx-site .balance-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 720px) {
  .bsrx-site .review-hero { padding-top: 40px; }
  .bsrx-site .review-crumb { margin-bottom: 32px; }
  .bsrx-site .operator-mark.is-review-mark { width: 140px; height: 62px; }
  .bsrx-site .review-strip { grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 0; }
  .bsrx-site .bsrx-facts-table > div { grid-template-columns: 1fr; gap: 6px; }
  .bsrx-site .source-list li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .bsrx-site .review-balance { padding: 72px 0; }
  .bsrx-site .review-facts { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------------------
   TWO-PART STATS

   bsrank_stat_html() emits a figure and the qualifier that follows it, because
   the figure alone can mean the opposite of the stored value. The qualifier is
   set small and on its own line so the figure still scans at a glance.

   .terms p is a two-column grid whose bare `span` rule styles the label. The
   two new spans are pinned to column two and have that label styling undone -
   otherwise they would inherit 62px width and uppercase tracking, and the
   third item would wrap under the label.
   --------------------------------------------------------------------------- */

.bsrx-site .stat-fig { font-weight: 700; }
.bsrx-site .stat-note {
  display: block; margin-top: 3px;
  color: var(--t-53);
  font-size: var(--t-micro); font-weight: 400; letter-spacing: normal; line-height: 1.4; text-transform: none;
}
.bsrx-site .stat-note.is-full { color: var(--t-87); }

.bsrx-site .terms p { white-space: normal; }
.bsrx-site .terms p .stat-fig,
.bsrx-site .terms p .stat-note {
  display: block; grid-column: 2; width: auto;
  letter-spacing: normal; text-transform: none;
}
.bsrx-site .terms p .stat-fig { color: var(--t-87); font-size: var(--t-body); font-weight: 700; }
.bsrx-site .terms p .stat-note { color: var(--t-53); font-size: var(--t-micro); font-weight: 400; }

.bsrx-site .review-strip dd .stat-fig { font-size: var(--t-lead); }
.bsrx-site .review-strip dd .stat-note { font-size: var(--t-micro); }

/* ---------------------------------------------------------------------------
   ARTICLE PAGE

   The articles are long - a median of 35KB with twelve headings - so the body
   is set for reading rather than scanning. Two deliberate departures from the
   rest of the site:

   Body copy is --t-lead (20px), not --t-body (16px). 16px is right for a table
   row that is scanned; it is small for 35KB read end to end. 20px is the next
   step on the same scale, so this is a level of the existing hierarchy rather
   than a new size. It drops back to 16px under 720px, where 20px would leave
   about thirty characters to the line.

   The measure is capped in ch, not px, so it tracks the font rather than the
   viewport: 68 characters, inside the range where a reader's eye reliably
   finds the start of the next line.

   Prose styling has to be written at .bsrx-site .article-body <element>, since
   style.css sets p/a/ul margins and colours at .bsrx-site <element> - a
   specificity a single class cannot beat.
   --------------------------------------------------------------------------- */

.bsrx-site .article-hero { padding: 56px 0 0; }
.bsrx-site .article-head { padding-bottom: 54px; border-bottom: 1px solid var(--line); }
.bsrx-site .article-head h1 {
  max-width: 22ch; margin: 0 0 34px;
  font-size: var(--t-head); font-weight: 700; line-height: 1.05; letter-spacing: -.022em;
}

.bsrx-site .article-byline { display: flex; align-items: center; gap: 16px; }
.bsrx-site .byline-mark {
  display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center;
  border: 1px solid var(--line-5); color: var(--gold);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
}
.bsrx-site .article-byline strong { display: block; font-size: var(--t-body); font-weight: 700; }
.bsrx-site .article-byline small {
  display: block; margin-top: 5px; color: var(--t-53);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.bsrx-site .article-main { padding: 72px 0 104px; }
.bsrx-site .article-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: start; gap: 64px; }

.bsrx-site .article-toc { position: sticky; top: 124px; max-height: calc(100vh - 170px); overflow: auto; padding-right: 10px; }
.bsrx-site .article-toc ol { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.bsrx-site .article-toc li { border-bottom: 1px solid var(--line); }
.bsrx-site .article-toc a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; gap: 10px;
  padding: 13px 0; color: var(--t-64);
  font-size: var(--t-micro); font-weight: 700; line-height: 1.45;
}
.bsrx-site .article-toc a:hover { color: var(--gold); }
.bsrx-site .toc-number { color: var(--t-47); }

/* The cap has to sit on an element that is already at reading size: ch
   resolves against the element's own font-size, and .article-body would
   otherwise inherit 16px and cap the 20px text at about 44 characters. */
.bsrx-site .article-body { max-width: 68ch; font-size: var(--t-lead); }
.bsrx-site .article-body p,
.bsrx-site .article-body li { color: var(--t-87); font-size: var(--t-lead); line-height: 1.7; }
.bsrx-site .article-body p { margin: 0 0 1.15em; }

.bsrx-site .article-body h2 {
  margin: 2.2em 0 .7em; color: var(--ivory);
  font-size: var(--t-card); font-weight: 700; line-height: 1.15; letter-spacing: -.012em;
  scroll-margin-top: 130px;
}
.bsrx-site .article-body > h2:first-child { margin-top: 0; }
.bsrx-site .article-body h3 { margin: 1.8em 0 .6em; color: var(--ivory); font-size: var(--t-sub); font-weight: 700; line-height: 1.25; }
.bsrx-site .article-body h4 { margin: 1.6em 0 .5em; color: var(--ivory); font-size: var(--t-lead); font-weight: 700; line-height: 1.35; }

.bsrx-site .article-body ul,
.bsrx-site .article-body ol { margin: 0 0 1.4em; padding: 0; list-style: none; }
.bsrx-site .article-body li { position: relative; margin: 0 0 .6em; padding-left: 28px; }
.bsrx-site .article-body ul > li::before {
  content: ""; position: absolute; top: .8em; left: 0; width: 11px; height: 1px; background: var(--gold);
}
.bsrx-site .article-body ol { counter-reset: bsrank-ol; }
.bsrx-site .article-body ol > li { counter-increment: bsrank-ol; }
.bsrx-site .article-body ol > li::before {
  content: counter(bsrank-ol, decimal-leading-zero);
  position: absolute; top: .34em; left: 0; color: var(--gold); font-size: var(--t-micro); font-weight: 700;
}

.bsrx-site .article-body a { color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.bsrx-site .article-body a:hover { border-bottom-color: var(--gold); }
.bsrx-site .article-body strong { color: var(--ivory); font-weight: 700; }

.bsrx-site .article-body blockquote { margin: 2em 0; padding: 0 0 0 26px; border-left: 2px solid var(--gold); }
.bsrx-site .article-body blockquote p { color: var(--ivory); font-size: var(--t-sub); line-height: 1.5; }
.bsrx-site .article-body hr { margin: 2.6em 0; border: 0; border-top: 1px solid var(--line); }

/* A wide table must scroll inside its own box rather than push the page. */
.bsrx-site .article-body figure.wp-block-table { margin: 1.8em 0; overflow-x: auto; }
.bsrx-site .article-body table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: var(--t-body); }
.bsrx-site .article-body figure.wp-block-table table { margin: 0; }
.bsrx-site .article-body th,
.bsrx-site .article-body td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); color: var(--t-87); line-height: 1.5; text-align: left; vertical-align: top; }
.bsrx-site .article-body th { color: var(--t-53); font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.bsrx-site .article-body img { height: auto; }
.bsrx-site .article-body code {
  padding: 2px 6px; background: color-mix(in srgb, var(--ivory) 9%, var(--ink));
  font-size: .88em;
}

.bsrx-site .article-more { padding: 0 0 104px; }
.bsrx-site .article-card h3 a { color: var(--ivory); }
.bsrx-site .article-card h3 a:hover { color: var(--gold); }

@media (max-width: 1100px) {
  .bsrx-site .article-layout { grid-template-columns: 1fr; gap: 40px; }
  .bsrx-site .article-toc { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .bsrx-site .article-body { max-width: none; }
}

@media (max-width: 720px) {
  .bsrx-site .article-hero { padding-top: 40px; }
  .bsrx-site .article-head { padding-bottom: 38px; }
  .bsrx-site .article-head h1 { max-width: none; }
  .bsrx-site .article-main { padding: 48px 0 72px; }
  .bsrx-site .article-body { font-size: var(--t-body); }
  .bsrx-site .article-body p,
  .bsrx-site .article-body li { font-size: var(--t-body); line-height: 1.65; }
  .bsrx-site .article-more { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------------------
   MOBILE OVERFLOW AND TARGETS

   .text-link is display:inline-flex with width:max-content. Inside a grid that
   is fine until the track is 1fr: a track's automatic minimum is min-content,
   and max-content makes an item's min-content equal to its full width. In the
   responsible-gambling strip at 375px that resolved the 1fr column to 326px
   inside 267px of space, so the whole document scrolled sideways by 35px.
   Both preview pages had this too - the strip is in the shared footer.

   min-width:0 lets the track shrink; the link then wraps instead of pushing.

   The second block is target size. WCAG 2.2 asks for 24px; breadcrumb links
   and the dark link measured 19-22px tall. Padding is added rather than
   font-size, so nothing moves visually.
   --------------------------------------------------------------------------- */

.bsrx-site .responsible-inner,
.bsrx-site .responsible-inner > * { min-width: 0; }
.bsrx-site .responsible .text-link { width: auto; max-width: 100%; }

.bsrx-site .review-crumb a,
.bsrx-site .review-crumb strong {
  display: inline-flex; align-items: center; min-height: 24px;
}
.bsrx-site .dark-link,
.bsrx-site .text-link { min-height: 24px; }

/* A table keeps its own width and scrolls inside its box; squeezing a wide
   comparison table into 375px makes it unreadable, and letting it through
   makes the whole page scroll. min-width keeps the columns legible. */
.bsrx-site .article-body .table-scroll { max-width: 100%; margin: 1.8em 0; overflow-x: auto; }
.bsrx-site .article-body .table-scroll table { margin: 0; min-width: 520px; }

/* .dark-link is inline, so min-height alone did nothing to its target size. */
.bsrx-site .dark-link { display: inline-flex; align-items: center; min-height: 24px; }

/* Second instance of the same grid rule: a track's automatic minimum is
   min-content, so a 900px table made .article-body itself 900px wide and
   max-width:100% on the scroll box then resolved against that, clipping
   nothing. min-width:0 lets the column shrink to its track, and the table
   scrolls inside its own box as intended. */
.bsrx-site .article-layout,
.bsrx-site .article-layout > *,
.bsrx-site .article-body { min-width: 0; }

/* The homepage guides rail is a deliberate horizontal carousel below 1024px -
   three of eight cards visible, swipe for the rest. Three related links at the
   foot of an article are not a carousel: there is nothing to swipe towards, and
   width:max-content on the grid made the article page scroll sideways. They
   stack instead. */
@media (max-width: 1024px) {
  .bsrx-site .article-more .article-grid {
    grid-template-columns: 1fr; width: auto; margin-left: 0; gap: 16px; overflow: visible;
  }
}

/* ---------------------------------------------------------------------------
   ONE TYPEFACE

   Two things were putting a second face on the page.

   1. style.css sets .bsrx-site h1, h2 { font-family: var(--font-display) } and
      --font-display is Cormorant Garamond, a high-contrast display serif. The
      homepage sections each restate font-family so they escaped it, but the
      review and article templates set only size and weight - so their h1, and
      every h2 inside an article body, rendered in Cormorant while the rest of
      the page was Source Sans 3. Pointing the token at --serif fixes it once,
      for every heading, including any template added later.

   2. The emphasised word in a heading was italic. A true italic of a humanist
      sans is drawn with different letterforms - single-storey a, cursive e -
      so "How we rate casinos" read as two fonts rather than one font with
      emphasis. Set upright, with the emphasis carried by weight instead: 400
      against the heading's 700. That is a wider, more deliberate contrast than
      the 600 it replaces, which sat too close to 700 to look intentional.
   --------------------------------------------------------------------------- */

:root { --font-display: var(--serif); }

/* Catch-all: any heading emphasis, including templates not listed below. */
.bsrx-site h1 em,
.bsrx-site h2 em,
.bsrx-site h3 em { font-style: normal; }

/* The enumerated rules that set italic sit at (0,2,2), so the correction has
   to match that weight of selector to win. */
.bsrx-site .hero h1 em,
.bsrx-site .section-heading h1 em,
.bsrx-site .section-heading h2 em,
.bsrx-site .method-intro h2 em,
.bsrx-site .complaints h2 em,
.bsrx-site .faq-intro h2 em {
  font-style: normal;
  font-weight: 400;
}

.bsrx-site .marquee-track span { font-style: normal; }

/* ---------------------------------------------------------------------------
   FORM CONTROLS

   select, option and textarea do not inherit font-family - the browser gives
   them its own UI face. On this site that meant the listing's sort dropdown
   and the locale pickers rendered in Arial while every other word was Source
   Sans 3. style.css already does this for button; the rest were missed.
   --------------------------------------------------------------------------- */

.bsrx-site select,
.bsrx-site option,
.bsrx-site optgroup,
.bsrx-site input,
.bsrx-site textarea,
.bsrx-site button { font-family: inherit; }

/* The two-letter market codes in the header dropdown are set in the theme's
   mono stack, which is a third face on the page for six words. They follow the
   page now. --font-mono itself is left alone: <code> in an article body is
   monospace for a reason, and that is function rather than styling. */
.bsrx-site .bsrx-market-menu a span { font-family: inherit; }

/* ---------------------------------------------------------------------------
   OPERATOR TABLE - the row is the product

   The old row spent 274px of height per operator and put five of ninety-nine on
   the page, so the homepage ran 8.4 screens and showed comparison data in 18%
   of them. A casino review site is scanned, not read: the visitor is choosing
   between operators, so each row carries everything that decision needs - rank,
   mark, name, score with the number of sources behind it, the offer, the two
   terms that change the offer's meaning, and both actions - and nothing else.

   Archivo's digits are very nearly but not exactly equal width, so every column
   of figures asks for tabular-nums explicitly.
   --------------------------------------------------------------------------- */

.bsrx-site .rank-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px;
  padding-bottom: 22px;
}
.bsrx-site .rank-bar-title { margin-right: auto; }
.bsrx-site .rank-sort { display: flex; align-items: center; gap: 9px; }
.bsrx-site .rank-sort label {
  color: var(--t-53);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .rank-sort select {
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  background: transparent; color: var(--ivory);
  font-family: inherit; font-size: var(--t-body); font-weight: 600;
}

.bsrx-site .op-table { border-top: 1px solid var(--line); }

.bsrx-site .op-head,
.bsrx-site .op {
  display: grid;
  grid-template-columns: 44px minmax(200px, 1fr) 96px minmax(190px, 1.45fr) 196px 130px;
  align-items: center;
  column-gap: 20px;
}

.bsrx-site .op-head {
  min-height: 42px; align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--t-47);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

.bsrx-site .op {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease;
}
.bsrx-site .op:hover { background: color-mix(in srgb, var(--ivory) 4%, transparent); }

.bsrx-site .op-rank {
  color: var(--t-47);
  font-size: 19px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bsrx-site .op:nth-of-type(-n+4) .op-rank { color: var(--gold); }

.bsrx-site .op-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
/* Sized to the logo's own 408x180 (2.27). The old 62x40 box was 1.55, so
   object-fit:contain fitted to the width and rendered the logo at 62x27 --
   a third of the box was empty and the mark read as tiny. */
.bsrx-site .op-id .operator-mark { width: 102px; height: 48px; }
.bsrx-site .op-name { min-width: 0; }
.bsrx-site .op-name b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.bsrx-site .op-name em {
  display: block; margin-top: 3px;
  color: var(--t-47); font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

.bsrx-site .op-score .score { display: flex; align-items: baseline; gap: 2px; }
.bsrx-site .op-score .score b {
  font-size: 23px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bsrx-site .op-score .score i { color: var(--t-47); font-style: normal; font-size: 12px; font-weight: 700; }
.bsrx-site .score-src {
  display: block; margin-top: 4px;
  color: var(--t-47);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.bsrx-site .op-offer {
  min-width: 0; margin: 0;
  color: var(--t-87); font-size: 14px; line-height: 1.42;
}

.bsrx-site .op-terms { display: flex; flex-wrap: wrap; gap: 5px; }
.bsrx-site .term {
  display: inline-flex; align-items: baseline; gap: 5px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line);
  color: var(--t-87);
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.bsrx-site .term i {
  flex: 0 0 auto;
  color: var(--t-47); font-style: normal;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.bsrx-site .term.is-empty { color: var(--t-47); }
/* inside a chip the qualifier runs on rather than dropping to its own line */
.bsrx-site .term .stat-fig { font-size: 11.5px; font-weight: 700; }
.bsrx-site .term .stat-note {
  display: inline; margin: 0 0 0 5px;
  color: var(--t-47); font-size: 10.5px; font-weight: 600;
}

.bsrx-site .op-act { display: grid; gap: 6px; }
.bsrx-site .op-act .go {
  display: block; padding: 11px 8px;
  background: var(--gold); color: var(--gold-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-align: center;
}
.bsrx-site .op-act .go:hover { filter: brightness(1.08); }
.bsrx-site .op-act .read {
  display: block; min-height: 24px; text-align: center;
  color: var(--t-64); font-size: 11.5px; font-weight: 600;
}
.bsrx-site .op-act .read:hover { color: var(--gold); }

.bsrx-site .rank-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 30px; padding-top: 24px;
}
.bsrx-site .rank-note p {
  max-width: 74ch; margin: 0;
  color: var(--t-53); font-size: var(--t-body); line-height: 1.6;
}

/* The hero kept every word, image and control it had - it just stops spending
   860px to deliver them, so the table starts inside the first screen. */
@media (min-width: 1025px) {
  .bsrx-site .hero { min-height: 0; }
  .bsrx-site .hero-stage { min-height: 0; padding-top: 48px; }
  .bsrx-site .hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.0; }
  .bsrx-site .hero-visual { top: 94px; width: 40vw; height: 326px; }
  .bsrx-site .hero-image-frame { height: 300px; }
  .bsrx-site .hero-lower { padding-block: 26px; }
}

@media (max-width: 1024px) {
  .bsrx-site .op-head { display: none; }
  .bsrx-site .op {
    grid-template-columns: 40px minmax(0, 1fr) 104px;
    align-items: start;
    row-gap: 12px;
  }
  .bsrx-site .op-id { grid-column: 2; }
  .bsrx-site .op-score { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
  .bsrx-site .op-offer { grid-column: 2 / -1; }
  .bsrx-site .op-terms { grid-column: 2 / -1; }
  .bsrx-site .op-act { grid-column: 2 / -1; grid-auto-flow: column; align-items: center; gap: 14px; }
  .bsrx-site .op-act .go { padding: 12px 20px; }
}

@media (max-width: 560px) {
  .bsrx-site .op { grid-template-columns: 32px minmax(0, 1fr) 84px; column-gap: 12px; }
  .bsrx-site .op-id .operator-mark { width: 80px; height: 38px; }
  .bsrx-site .op-act { grid-auto-flow: row; gap: 8px; }
  .bsrx-site .rank-bar { gap: 14px; }
  .bsrx-site .rank-sort { width: 100%; }
  .bsrx-site .rank-sort select { flex: 1; }
}

/* .hero is a flex column and .hero-stage carries flex: 0 0 615px, so the height
   is set by flex-basis, not min-height - zeroing min-height alone changed
   nothing. Releasing the basis lets the stage take its content height.

   The methodology panel was the tallest section on the page at 1.69 screens,
   ahead of the ranking it exists to explain. Same content, half the padding. */
@media (min-width: 1025px) {
  .bsrx-site .hero-stage { flex: 0 0 auto; top: 0; }

  .bsrx-site .methodology { padding: 76px 0 84px; }
  .bsrx-site .method-list { margin-top: 56px; }
  .bsrx-site .method-card { min-height: 0; padding: 34px 0; }
  .bsrx-site .method-card h3 { margin-bottom: 12px; }
  .bsrx-site .method-number { font-size: clamp(28px, 3.4vw, 46px); }
  .bsrx-site .method-index { margin-top: 34px; }

  .bsrx-site .guides { padding-block: 84px; }
  .bsrx-site .faq { padding-block: 84px; }
}

/* Renaming the heading wrapper to .rank-bar-title took it out of the type-scale
   rule that sizes .section-heading h2, and it silently fell back to the browser
   default. It is set here at --t-figure rather than the --t-head the other
   sections use: a heading that introduces a table should lead it, not compete
   with it for the first screen. */
.bsrx-site .rank-bar-title h2 {
  font-size: var(--t-figure);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.bsrx-site .rank-bar-title h2 em { font-weight: 400; font-style: normal; }

@media (min-width: 1025px) {
  /* 125px of lead-in above a comparison table pushed the first operator below
     the fold. The table now opens inside the first screen. */
  .bsrx-site .rankings { padding-top: 56px; padding-bottom: 84px; }
}

/* The phone gets the same treatment as the desktop: the headline was set at up
   to 66px, which ran to five lines and pushed the table past two screens. The
   words are unchanged - only the space they take. */
@media (max-width: 1024px) {
  .bsrx-site .rankings { padding-top: 48px; }
}
@media (max-width: 640px) {
  .bsrx-site .hero h1 { font-size: clamp(34px, 9.4vw, 46px); line-height: 1.04; }
  .bsrx-site .hero-stage { padding-top: 36px; padding-bottom: 24px; }
  .bsrx-site .hero-lower { padding-block: 22px; }
  .bsrx-site .rank-bar-title h2 { font-size: var(--t-card); }
  .bsrx-site .op { padding: 14px 0; row-gap: 10px; }
  .bsrx-site .op-offer { font-size: 13.5px; }
}

/* The outlined wordmark is gone from the footer markup. Its border-bottom was
   the hairline above the copyright row, so that rule moves onto the row itself
   rather than disappearing with it. The .footer-wordmark rules above are now
   dead and can be stripped in the next cleanup pass. */
.bsrx-site .footer-bottom { border-top: 1px solid var(--line); }


/* ---------------------------------------------------------------------------
   HERO IMAGE - full bleed

   The figure was a 576x326 panel pinned to the left of the section, with the
   headline running across it - which read as a grey slab behind the type rather
   than a photograph. It now covers the whole hero: inset 0 on the figure, and
   object-fit: cover on the image so a 1600x756 file fills a wider, shorter box
   without distorting.

   The stage is lifted above it so the headline stays on top. No overlay or
   gradient is added over the photograph.
   --------------------------------------------------------------------------- */

@media (min-width: 641px) {
  .bsrx-site .hero-visual {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0;
  }
  .bsrx-site .hero-image-frame { height: 100%; }
  .bsrx-site .hero-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .bsrx-site .hero-stage,
  .bsrx-site .hero-lower,
  .bsrx-site .hero-facts { position: relative; z-index: 2; }
}

/* With the photograph covering the whole hero, the facts strip sat on a band of
   it that runs from 0.5 to 1.0 in luminance. Three of the four labels still
   passed, but the responsible-gambling line - which is set in the accent red -
   measured 4.1:1 average and 2.7:1 at the dark end, under the 4.5:1 that 12px
   text needs. That is the one line on the page that has to be readable.

   The strip takes the page ground rather than a scrim over the image: a solid
   bar is a structural element, where a gradient laid over the photograph is the
   darkening effect that was explicitly rejected. The image still fills the hero
   above it. */
@media (min-width: 641px) {
  .bsrx-site .hero-facts {
    background: var(--ink);
    border-top: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------------------
   CHROME - header and footer

   Everything above and below the content was still wearing style.css's design
   system. Same typeface, different rules: nav links at 13px/750 with no
   tracking against the page's 12px/700/.14em caps, a utility bar on pure white
   over a #fafafa page, 38px round icon buttons, and a footer strip that is a
   solid red 1425x90 band - the loudest object on the page and the only one
   shaped like that.

   One font was never the problem; two typographic systems in one document was.
   This rewrites the chrome in the page's own terms: hairline rules on the ink
   ground, micro labels at 12px/700/.14em uppercase, square corners, and red
   used as an accent rather than as a field.

   All of it is scoped under .bsrx-site and lives in bsrank.css, so it applies
   only on pages that load this sheet. The brand logo is not touched.
   --------------------------------------------------------------------------- */

/* ---- utility bar ---- */
.bsrx-site .bsrx-utility-bar {
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.bsrx-site .bsrx-utility-inner > a,
.bsrx-site .bsrx-market > summary,
.bsrx-site .bsrx-locale > summary {
  color: var(--t-53);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .bsrx-utility-inner > a:hover,
.bsrx-site .bsrx-market > summary:hover,
.bsrx-site .bsrx-locale > summary:hover { color: var(--gold); }
.bsrx-site .bsrx-utility-inner svg { opacity: .7; }

/* ---- main bar ---- */
.bsrx-site .bsrx-header { border-bottom: 1px solid var(--line); }
.bsrx-site .bsrx-header-main { background: var(--ink); }
.bsrx-site .bsrx-header.scrolled,
.bsrx-site .site-header.scrolled { border-bottom-color: var(--line-2); }

/* ---- primary nav ---- */
.bsrx-site .bsrx-primary-nav a {
  color: var(--t-64);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .bsrx-primary-nav a:hover { color: var(--ivory); }
.bsrx-site .bsrx-primary-nav a[aria-current],
.bsrx-site .bsrx-primary-nav .is-current > a {
  color: var(--ivory);
  box-shadow: inset 0 -2px 0 0 var(--gold);
}

/* ---- icon buttons: square, hairline, same target size ---- */
.bsrx-site .bsrx-icon-btn {
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--t-64);
  transition: border-color .18s ease, color .18s ease;
}
.bsrx-site .bsrx-icon-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ---- dropdowns ---- */
.bsrx-site .bsrx-market-menu,
.bsrx-site .bsrx-locale-menu {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--ink);
  box-shadow: none;
}
.bsrx-site .bsrx-market-menu a,
.bsrx-site .bsrx-locale-menu label {
  color: var(--t-64);
  font-size: var(--t-body); font-weight: 600;
}
.bsrx-site .bsrx-market-menu a:hover { color: var(--gold); }

/* ---- mobile drawer ---- */
.bsrx-site .bsrx-mobile-nav-panel {
  background: var(--ink);
  border-left: 1px solid var(--line);
}
.bsrx-site .bsrx-mobile-nav-panel a {
  color: var(--ivory);
  font-size: var(--t-lead); font-weight: 700; letter-spacing: -.01em;
}
.bsrx-site .bsrx-mobile-nav-panel li { border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   Responsible-gambling strip

   It was a solid red band. Red is this site's accent, not a surface: filling
   90px with it makes the one genuinely important notice read as a banner ad,
   which is the thing people have trained themselves to skip. It keeps the red
   on the badge and the rule, and the notice itself becomes legible text on the
   page ground.
   --------------------------------------------------------------------------- */
.bsrx-site .responsible {
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ivory);
}
.bsrx-site .responsible p { color: var(--t-87); font-size: var(--t-body); line-height: 1.6; }
.bsrx-site .responsible .age {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .04em;
}
.bsrx-site .responsible .text-link,
.bsrx-site .responsible .dark-link { color: var(--gold); border-bottom-color: var(--line-2); }
.bsrx-site .responsible .text-link:hover,
.bsrx-site .responsible .dark-link:hover { color: var(--ivory); border-bottom-color: var(--gold); }

/* ---- footer body ---- */
.bsrx-site .footer-column h4 {
  color: var(--t-47);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .footer-column a { color: var(--t-74); font-size: var(--t-body); font-weight: 500; }
.bsrx-site .footer-column a:hover { color: var(--gold); }
.bsrx-site .footer-about > p { color: var(--t-64); font-size: var(--t-body); line-height: 1.65; }
.bsrx-site .trust-badges { color: var(--t-47); font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; }
.bsrx-site .footer-bottom { color: var(--t-53); font-size: var(--t-micro); }
.bsrx-site .footer-bottom nav a { color: var(--t-53); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bsrx-site .footer-bottom nav a:hover { color: var(--gold); }

/* The last of the old system in the chrome: country names in the market menu
   were 13px/900, selects carried a 2px radius, and the marquee separators sat
   at 9px - a size the scale does not contain. The circular 18+ badge stays
   round: that is a recognised mark rather than a UI shape.

   The search overlay belongs to style.css and opens over the page, so it takes
   the ink ground and hairline borders like every other panel here. */
.bsrx-site .bsrx-market-menu strong,
.bsrx-site .bsrx-locale-menu strong {
  font-size: var(--t-body); font-weight: 700; letter-spacing: normal;
}
.bsrx-site select { border-radius: 0; }
.bsrx-site .small-track b,
.bsrx-site .marquee-track b { font-size: var(--t-micro); }

.bsrx-site .bsrx-search-panel,
.bsrx-site .bsrx-search-inner {
  background: var(--ink);
  border-color: var(--line);
  border-radius: 0;
}
.bsrx-site .bsrx-search-panel input {
  background: transparent;
  border-color: var(--line-2);
  border-radius: 0;
  color: var(--ivory);
  font-family: inherit;
}
.bsrx-site .bsrx-search-panel input::placeholder { color: var(--t-47); }

/* ---------------------------------------------------------------------------
   DIRECTION B - Marquee

   One family, not two. The mockup paired Archivo Narrow with Archivo Black,
   which is two Google families and the thing that was asked not to happen.
   Archivo is a variable font with a width axis, so the condensed display and
   the black weight both come from the single Archivo request: font-stretch
   drives wdth, font-weight drives wght.

   Condensed is applied to display and to UI labels - headlines, rank numerals,
   operator names, scores, nav, eyebrows, buttons. It is deliberately NOT
   applied to running prose: the articles run to a median of 35KB, and narrow
   letterforms cost real reading speed at that length. B's character lives in
   the display type, the caps and the red blocks, none of which the body copy
   carries.

   Two things from the mockup are not carried over, both because of the logo:
   the inverted nav bar would put the dark brand mark on a dark ground in light
   mode, and the brand image is not mine to swap. The footer's legal bar is
   inverted instead, where there is no logo to break.
   --------------------------------------------------------------------------- */

:root { --cond: 78%; --semi: 88%; }

/* ---- display ---- */
.bsrx-site .hero h1,
.bsrx-site .section-heading h1,
.bsrx-site .section-heading h2,
.bsrx-site .rank-bar-title h2,
.bsrx-site .method-intro h2,
.bsrx-site .complaints h2,
.bsrx-site .faq-intro h2,
.bsrx-site .review-identity h1,
.bsrx-site .article-head h1 {
  font-stretch: var(--cond);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

/* The emphasised word carries the accent rather than a weight change - that is
   what makes this direction read as one voice instead of two. */
.bsrx-site .hero h1 em,
.bsrx-site .section-heading h1 em,
.bsrx-site .section-heading h2 em,
.bsrx-site .rank-bar-title h2 em,
.bsrx-site .method-intro h2 em,
.bsrx-site .complaints h2 em,
.bsrx-site .faq-intro h2 em {
  color: var(--gold);
  font-weight: 900;
  font-style: normal;
}

.bsrx-site .hero { border-bottom: 3px solid var(--ivory); }

/* ---- rank numerals and operator identity ---- */
.bsrx-site .op-rank {
  font-stretch: var(--cond);
  font-size: 30px; font-weight: 900; letter-spacing: -0.05em;
  /* --line-2 is a border token; at 30px it measured 1.39:1 and the rank was
     unreadable. Muted against the red, but still a number you can read. */
  color: var(--t-53);
}
.bsrx-site .op:nth-of-type(-n+3) .op-rank { color: var(--gold); }

.bsrx-site .op-name b {
  font-stretch: var(--semi);
  font-size: 17px; font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase;
  line-height: 1.12;
}
.bsrx-site .op-score .score b {
  font-stretch: var(--cond);
  font-size: 26px; font-weight: 900; letter-spacing: -0.03em;
}

/* ---- UI labels take the condensed width too ---- */
.bsrx-site .eyebrow,
.bsrx-site .op-head,
.bsrx-site .rank-sort label,
.bsrx-site .review-crumb,
.bsrx-site .bsrx-primary-nav a,
.bsrx-site .bsrx-utility-inner > a,
.bsrx-site .bsrx-market > summary,
.bsrx-site .bsrx-locale > summary,
.bsrx-site .footer-column h4,
.bsrx-site .footer-bottom nav a,
.bsrx-site .term i,
.bsrx-site .score-src,
.bsrx-site .op-name em {
  font-stretch: var(--semi);
}

/* ---- the call to action is a block of colour ---- */
.bsrx-site .op-act .go,
.bsrx-site .visit {
  font-stretch: var(--semi);
  font-weight: 800;
  letter-spacing: .12em;
}

/* ---- the legal bar inverts: no logo sits in it ---- */
.bsrx-site .footer-bottom {
  background: var(--ivory);
  color: color-mix(in srgb, var(--ink) 82%, var(--ivory));
  border-top: 0;
  padding-inline: 24px;
}
.bsrx-site .footer-bottom p { color: color-mix(in srgb, var(--ink) 78%, var(--ivory)); }
.bsrx-site .footer-bottom nav a { color: var(--ink); font-weight: 800; }
.bsrx-site .footer-bottom nav a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .bsrx-site .op-rank { font-size: 24px; }
  .bsrx-site .op-name b { font-size: 15px; }
  .bsrx-site .op-score .score b { font-size: 22px; }
  .bsrx-site .footer-bottom { padding-inline: 16px; }
}

/* Carry B into the remaining components. Article body headings take the width
   and the weight but NOT the caps: a 35KB guide has a median of twelve of them,
   and long headings set in capitals are measurably slower to scan than the same
   words in sentence case. The caps stay where they are a statement - the page
   title, the section openers, the operator names. */
.bsrx-site .operator h2,
.bsrx-site .operator h3,
.bsrx-site .method-card h3,
.bsrx-site .article-card h3,
.bsrx-site .faq-item button > span:nth-child(2) {
  font-stretch: var(--semi);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.bsrx-site .operator h2,
.bsrx-site .operator h3 { text-transform: uppercase; }

.bsrx-site .article-body h2,
.bsrx-site .article-body h3,
.bsrx-site .article-body h4 {
  font-stretch: var(--semi);
  font-weight: 800;
  letter-spacing: -0.018em;
}

.bsrx-site .review-score strong,
.bsrx-site .rating strong,
.bsrx-site .review-strip dd,
.bsrx-site .method-number,
.bsrx-site .rank-number,
.bsrx-site .source-number {
  font-stretch: var(--cond);
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------------------
   HERO FILLS THE FIRST SCREEN

   The rankings heading was landing a few pixels above the fold, so the first
   thing below the hero was a section title sliced in half by the bottom edge.
   The hero now takes the whole first screen and the ranking starts cleanly
   under it.

   The header sits in normal flow at 110px (35 utility + 74 main + rule), so
   subtracting it makes hero + header exactly one viewport. svh rather than vh
   so a mobile browser's collapsing toolbar cannot cause a jump; min-height,
   not height, so a short window still gets all the content rather than
   clipping it.

   .hero is already a flex column: pushing the facts strip down with margin-top
   lets the extra height fall between the copy and the strip, which keeps the
   strip welded to the bottom edge instead of floating mid-screen.
   --------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .bsrx-site .hero {
    min-height: calc(100vh - 110px);
    min-height: calc(100svh - 110px);
  }
  .bsrx-site .hero-facts { margin-top: auto; }
}

/* The parallax needs bleed. bsrank.js translates the hero image by up to 45px
   in either direction; with the figure sized exactly to the section, that
   translation pulled a 26px band of bare ground in under the header and pushed
   the same amount out of the bottom. The figure is extended 56px past both
   edges so the movement always has image to move into, and the section clips
   what hangs over. */
@media (min-width: 641px) {
  .bsrx-site .hero { overflow: hidden; }
  .bsrx-site .hero-visual {
    top: -56px;
    bottom: -56px;
    height: auto;
  }
  .bsrx-site .hero-image-frame { height: 100%; }
}

/* ---------------------------------------------------------------------------
   CENTRE THE HERO COPY

   Pushing the facts strip down with a single auto margin sent every pixel of
   the new height below the copy, leaving the headline pinned under the header
   with a void beneath it.

   Two auto margins instead of one: free space in a flex column is shared
   equally between them, so half lands above the copy and half between the copy
   and the strip. The copy sits centred, the strip stays welded to the bottom
   edge, and it stays correct at any viewport height without a magic number.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .bsrx-site .hero-stage { margin-top: auto; }
}

/* ---------------------------------------------------------------------------
   HERO COPY SITS LOWER

   Centring it with paired auto margins put the headline at 346px. Dropping the
   stage's auto margin and setting the offset directly moves it further down and
   makes the position predictable rather than a by-product of how the free space
   divides.

   It is expressed in vh so it tracks the window instead of being a fixed number
   tuned to one screen, and clamped at both ends so a short window keeps the
   copy clear of the header and a very tall one does not strand it near the
   facts strip. The strip keeps its own auto margin and stays on the bottom edge.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .bsrx-site .hero-stage {
    margin-top: 0;
    padding-top: clamp(160px, 36vh, 360px);
  }
}

/* ---------------------------------------------------------------------------
   TERMS AS ONE PANEL

   The chips carried the figure and its full qualifier inline, so a row could
   run to three wrapped lines of small print and the two numbers a reader is
   actually comparing were buried in it. They are now one bordered panel: label
   over figure, centred, one divider between them - the figure is the thing, the
   label just names it.

   The qualifier is dropped in this compact form (see bsrank_stat_html), which
   is safe for 160 of the 168 stored values. Where it is not, it still prints
   underneath.
   --------------------------------------------------------------------------- */

.bsrx-site .op-terms {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
}
.bsrx-site .op-terms .term {
  display: block;
  max-width: none;
  padding: 9px 12px;
  border: 0;
  text-align: center;
}
.bsrx-site .op-terms .term + .term { border-top: 1px solid var(--line); }
.bsrx-site .op-terms .term i {
  display: block;
  margin-bottom: 4px;
  color: var(--t-47);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .op-terms .term .stat-fig {
  display: block;
  color: var(--ivory);
  font-stretch: var(--semi);
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
.bsrx-site .op-terms .term .stat-note {
  display: block; margin-top: 4px;
  color: var(--t-47);
  font-size: 10px; font-weight: 500; line-height: 1.35; letter-spacing: normal;
}

/* The listing page carries the same two values in <p> rows rather than spans.
   Its grid columns are undone so the label can sit over the figure. */
.bsrx-site .terms { border: 1px solid var(--line); }
.bsrx-site .terms p {
  display: block;
  grid-template-columns: none;
  margin: 0;
  padding: 9px 12px;
  text-align: center;
  white-space: normal;
}
.bsrx-site .terms p + p { border-top: 1px solid var(--line); }
.bsrx-site .terms p > span:first-child {
  display: block;
  width: auto;
  margin-bottom: 4px;
  color: var(--t-47);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bsrx-site .terms p .stat-fig {
  display: block;
  grid-column: auto;
  color: var(--ivory);
  font-stretch: var(--semi);
  font-size: 16px; font-weight: 800;
}
.bsrx-site .terms p .stat-note {
  display: block; grid-column: auto; margin-top: 4px;
  color: var(--t-47); font-size: 10px; font-weight: 500;
}

@media (max-width: 1024px) {
  /* Stacked on a phone the panel reads better side by side than as a tall box. */
  .bsrx-site .op-terms { grid-template-columns: 1fr 1fr; }
  .bsrx-site .op-terms .term + .term { border-top: 0; border-left: 1px solid var(--line); }
}

/* ---------------------------------------------------------------------------
   LEGAL BAR RUNS EDGE TO EDGE

   .footer-bottom also carries .shell, which caps it at 1136px and centres it.
   That was harmless while it had no background; once Direction B gave it one,
   the fill stopped where the content column stopped and left page ground down
   both sides - a floating dark slab rather than a bar.

   The fill moves to a full-width wrapper and the row keeps the shell width, so
   the colour reaches the edges while the text stays aligned with every other
   column on the page.
   --------------------------------------------------------------------------- */

.bsrx-site .footer-legal { background: var(--ivory); }
.bsrx-site .footer-bottom {
  background: transparent;
  padding-inline: 0;
}

/* ---------------------------------------------------------------------------
   HEADLINE UP AND LARGER

   The headline goes from 64px to 94px, which at four lines adds about 110px of
   height. Left where it was it would have driven the buttons into the facts
   strip, which had only 14px of clearance, so the stage offset comes down by
   roughly the same amount: the headline grows upward and the copy beneath it
   stays put.

   Only .hero-stage moves. The paragraph and the buttons live in .hero-lower and
   keep their own position in the column.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .bsrx-site .hero h1 { font-size: clamp(44px, 6.6vw, 94px); }
  .bsrx-site .hero-stage { padding-top: clamp(80px, 20vh, 220px); }
}

/* The hairline between the headline and the lead paragraph is gone. Nothing
   else in the hero is divided by a rule, so it read as a stray edge rather than
   a separator. The facts strip keeps its own top border - that one marks a real
   change of surface. */
.bsrx-site .hero-lower { border-top: 0; }

/* ---------------------------------------------------------------------------
   BACK ON THE SCALE

   Iterating on the hero and the table left the page with 17 distinct sizes, 9
   of them off the scale: 94, 46, 30, 26, 17, 14, 11.5, 11, 10 and 9.5px, each
   arrived at by nudging one component without looking at the others. A step of
   a pixel or two is not hierarchy - it reads as carelessness, which is exactly
   what the scale existed to stop.

   Everything below snaps to the existing steps:

     12 . 16 . 20 . 25 . 32 . 40 . 64 . 81 . 102

   The hero comes down one step, 94 to 81. Not to 64: that is what the section
   headings use, and the page needs the hero to outrank them.

   The four micro sizes (9.5 / 10 / 11 / 11.5) all collapse to 12. They were
   below the floor the scale sets anyway, and 9.5px uppercase with letter
   spacing is at the edge of legible.
   --------------------------------------------------------------------------- */

/* Display */
@media (min-width: 1025px) {
  .bsrx-site .hero h1 { font-size: clamp(40px, 5.7vw, 81px); }
  .bsrx-site .method-number { font-size: var(--t-figure); }
}

/* Figures in the table */
.bsrx-site .op-rank { font-size: var(--t-card); }
.bsrx-site .op-score .score b { font-size: var(--t-sub); }
.bsrx-site .op-name b { font-size: var(--t-body); }

/* Prose and offers */
.bsrx-site .op-offer { font-size: var(--t-body); }

/* Micro labels - one size, not four */
.bsrx-site .op-head,
.bsrx-site .score-src,
.bsrx-site .term i,
.bsrx-site .op-name em,
.bsrx-site .op-act .read,
.bsrx-site .bsrx-market-menu a span,
.bsrx-site .bsrx-locale-menu label span { font-size: var(--t-micro); }

/* The arrow glyphs in buttons and links sat at 17px, one off body size. */
.bsrx-site .button span,
.bsrx-site .text-link span,
.bsrx-site .dark-link span,
.bsrx-site .op-act .read span { font-size: var(--t-body); }

@media (max-width: 640px) {
  .bsrx-site .op-offer { font-size: var(--t-body); }
  .bsrx-site .op-rank { font-size: var(--t-sub); }
  .bsrx-site .op-score .score b { font-size: var(--t-lead); }
}

/* The last three off-scale sizes live inside the terms panel, where the rules
   that set them are one class deeper than the snap block above and so kept
   winning. Matched at the same depth. */
.bsrx-site .op-terms .term i,
.bsrx-site .terms p > span:first-child { font-size: var(--t-micro); }

.bsrx-site .op-terms .term .stat-note,
.bsrx-site .terms p .stat-note { font-size: var(--t-micro); }

/* ---------------------------------------------------------------------------
   ARTICLE TIDY-UP

   Three things, none of them the typeface - the page is Archivo throughout and
   every size on it is already a step of the scale.

   1. The related-card excerpts were set at weight 700. They are excerpts, not
      headings; bold running text at 16px is what made that row look heavy.

   2. Body leading was 1.7. That is a reasonable figure for a face with a small
      x-height and too much for Archivo, which has a large one - the lines drift
      apart and the column stops reading as a block. 1.6 closes it up.

   3. The Quick Answer panel is a one-cell WordPress table, so it inherited the
      table treatment: cell borders, a scroll box, the lot. A table with a single
      row and a single cell is not tabular data, it is a callout, so it is styled
      as one - red rule, panel fill, no borders and no scroll container.
   --------------------------------------------------------------------------- */

.bsrx-site .article-card p { font-weight: 400; }

.bsrx-site .article-body p,
.bsrx-site .article-body li { line-height: 1.6; }

.bsrx-site .article-body table tbody tr:only-child td:only-child {
  display: block;
  padding: 22px 26px;
  border: 0;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--ivory) 5%, transparent);
  color: var(--t-87);
  font-size: var(--t-body);
  line-height: 1.6;
}
.bsrx-site .article-body table:has(tbody tr:only-child td:only-child) {
  width: 100%;
  min-width: 0;
  margin: 1.8em 0;
  border: 0;
  border-collapse: collapse;
}
.bsrx-site .article-body .table-scroll:has(tr:only-child td:only-child) {
  overflow: visible;
  margin: 0;
}
.bsrx-site .article-body figure.wp-block-table:has(tr:only-child td:only-child) {
  overflow: visible;
}

/* Emoji arrive as <img> from the core emoji replacement; size them to the text
   rather than letting them set their own line box. */
.bsrx-site .article-body img.emoji {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  margin: 0 .12em;
  vertical-align: -.15em;
}

/* ==========================================================================
   Casino reviews: the home rank row, carrying the whole directory
   --------------------------------------------------------------------------
   Matched to the home page's .op row rather than styled independently, so the
   two listings cannot drift apart: same column proportions, same field order,
   same accent CTA.

   One thing had to be reordered. This listing's markup puts the welcome offer
   before the rating; the home row puts the rating first, because the score is
   what a reader scans down the column. Every child is therefore given an
   explicit column instead of being left to auto-place in DOM order, and the
   two header labels are swapped to match.

   The column assignment is scoped to desktop. Below 900px the listing already
   collapses to its own compressed layouts, and forcing six columns there would
   override them.
   ========================================================================== */

.bsrx-site .rank-table {
  display: block;
  gap: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
}

.bsrx-site .rank-table .casino-row {
  grid-template-areas: none;
  grid-template-rows: auto;
  min-height: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
}

/* Full-width rows again, so the hover wash reaches past the row as it does on
   the home page rather than stopping at a cell edge. */
.bsrx-site .rank-table .casino-row::before { inset: 0 -20px; }

@media (min-width: 901px) {
  /* Proportional, not fixed.

     The home row's literal widths (44/200/96/190/196/130 plus 20px gaps) need
     956px. This listing's container is 945px at a 1024px viewport, so the
     fixed set overflowed by 11px and the grid broke -- the header wrapped onto
     a second line and every field shifted out of its column.

     minmax(0, Nfr) keeps the same proportions while letting the two text
     columns shrink, so the row fits whatever the container gives it and cannot
     overflow at any width above the mobile breakpoints. */
  .bsrx-site .rank-table .rank-head,
  .bsrx-site .rank-table .casino-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 2fr) 96px minmax(0, 1.8fr) 150px 112px;
    column-gap: 18px;
    align-items: center;
  }

  /* The operator name is a flex item inside a fixed column. Without an
     explicit min-width it refuses to shrink below its content, so long names
     overflowed the column and sat on top of the rating beside them -- measured
     at -2px to -11px of overlap on every row. */
  .bsrx-site .rank-table .casino-row > .operator > * { min-width: 0; }
  .bsrx-site .rank-table .casino-row > .operator h2 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .bsrx-site .rank-table .casino-row > .operator .operator-mark { flex: 0 0 auto; }

  /* The row is pinned as well as the column.

     Rating belongs in column 3 but appears after the offer in the markup, and
     with only a column given, grid's auto-placement had already moved its
     cursor past column 3 by the time it reached rating -- so rating dropped to
     a new row and every field after it followed, one per line. Naming the row
     makes placement explicit instead of order-dependent. */
  .bsrx-site .rank-table .casino-row > .rank-number   { grid-column: 1; grid-row: 1; }
  .bsrx-site .rank-table .casino-row > .operator      { grid-column: 2; grid-row: 1; min-width: 0; }
  .bsrx-site .rank-table .casino-row > .rating        { grid-column: 3; grid-row: 1; }
  .bsrx-site .rank-table .casino-row > .offer         { grid-column: 4; grid-row: 1; max-width: none; }
  .bsrx-site .rank-table .casino-row > .terms         { grid-column: 5; grid-row: 1; }
  .bsrx-site .rank-table .casino-row > .casino-action { grid-column: 6; grid-row: 1; }
  .bsrx-site .rank-table .casino-row > .row-note      { grid-column: 1 / -1; grid-row: 2; }

  /* Header labels follow the rows: rating third, welcome offer fourth. Pinned
     to row 1 for the same auto-placement reason as the fields above. */
  .bsrx-site .rank-table .rank-head span { grid-row: 1; }
  .bsrx-site .rank-table .rank-head span:nth-child(1) { grid-column: 1; }
  .bsrx-site .rank-table .rank-head span:nth-child(2) { grid-column: 2; }
  .bsrx-site .rank-table .rank-head span:nth-child(3) { grid-column: 4; }
  .bsrx-site .rank-table .rank-head span:nth-child(4) { grid-column: 3; }
  .bsrx-site .rank-table .rank-head span:nth-child(5) { grid-column: 5; }
  .bsrx-site .rank-table .rank-head span:nth-child(6) { grid-column: 6; }
}

/* The action column stacks, as it does on the home row: the accent button with
   the review link beneath it. */
.bsrx-site .rank-table .casino-row > .casino-action {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.bsrx-site .rank-table .casino-row .visit {
  width: 100%;
  white-space: nowrap;
  border-color: var(--gold);
  background: var(--gold);
  color: var(--gold-ink);
}
.bsrx-site .rank-table .casino-row .visit:hover,
.bsrx-site .rank-table .casino-row .visit:focus-visible {
  border-color: var(--ivory);
  background: var(--ivory);
  color: var(--ink);
}
.bsrx-site .rank-table .casino-row .review-link { align-self: center; }