/* ============================================================================
   Online Casino India — casino-oracul.org
   Design language: NEWSPRINT.

   A paper-white broadsheet. Structure comes from rules and columns, never from
   cards and drop shadows. One vermilion ink, used for the masthead slug, rank
   numerals, rating bars and a single full-bleed field. Every number is set in
   mono because this site's job is comparison. Every corner is square.

   Type   Archivo Expanded (display, wdth 125)
          Archivo          (body, wdth 100)
          Geist Mono       (all figures, labels, table data)

   Theme  light, locked. Sections vary tonally (paper / panel / sunk) and one
          block inverts to the vermilion field. No section flips to dark.

   Radius 0 everywhere. No exceptions.

   MEASURE  Headings and body copy are NOT capped to a ch measure. They fill
            the column they sit in. The only width cap in the system is
            .container (and .header-ribbon, which matches it), so text is
            bounded by the page grid rather than by a per-element rule.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* paper. Verified: ink 18.8:1, muted 8.6:1, dim 4.95:1 against --paper */
  --paper:  #fbfbf9;
  --panel:  #f2f1ec;
  --sunk:   #eae8e1;
  --plate:  #ffffff;

  --ink:    #0d0d0c;
  --muted:  #4a4a46;
  --dim:    #6e6e68;

  /* one hue, three tints. Each tint exists to clear a contrast threshold. */
  --accent:      #e0301e;   /* graphic fills, large numerals, marks */
  --accent-text: #c42710;   /* links and small accent text, 5.6:1 on paper */
  --field:       #b3230f;   /* accent-field background, 6.6:1 with white text */

  --rule:        #dcdad2;
  --rule-strong: #b9b6ab;
  --rule-ink:    #0d0d0c;

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --container: 1240px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .965rem + .16vw, 1.06rem);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; display: block; }

a { color: var(--accent-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 {
  /* The H1 is a verbatim document title and can run long, so it sets at
     normal width: expanded at display size would push it past the fold. */
  font-stretch: 100%;
  font-size: clamp(1.95rem, 1.3rem + 2.1vw, 3.05rem);
  line-height: 1.02;
}
h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.02rem, .94rem + .38vw, 1.24rem); letter-spacing: -.01em; }
h4 { font-size: 1rem; }

/* Word ships every heading run as <strong>; headings own their own colour. */
h1 strong, h2 strong, h3 strong, h4 strong,
h1 b, h2 b, h3 b, h4 b {
  color: inherit;
  font-weight: inherit;
  font-stretch: inherit;
}
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent-text); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.15rem;
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
}
.skip-link:focus { left: .75rem; top: .75rem; }

/* ------------------------------------------------------- newsprint parts -- */
/* The label above a section headline. Rationed to roughly one per three
   sections; see the eyebrow budget in README. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: '';
  width: .55rem; height: .55rem;
  background: var(--accent);
  flex: 0 0 auto;
}
.eyebrow--onfield { color: rgba(255, 255, 255, .84); }
.eyebrow--onfield::before { background: #fff; }

.section-head {
  margin-bottom: clamp(1.9rem, 3.4vw, 3rem);
}
.section-head p { color: var(--muted); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  --btn-fill: var(--paper);
  --btn-fill-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .92rem 1.6rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--btn-bd);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .26s var(--ease-out), border-color .26s var(--ease-out);
}
/* wipe-fill: the inverse colour sweeps up from the baseline on hover */
.btn::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .32s var(--ease-out);
}
.btn:hover { color: var(--btn-fill-fg); }
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: translateY(1px); }

.btn--accent {
  --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent);
  --btn-fill: var(--ink);  --btn-fill-fg: var(--paper);
}
.btn--ink {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
  --btn-fill: var(--accent); --btn-fill-fg: #fff;
}
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong);
  --btn-fill: var(--ink); --btn-fill-fg: var(--paper);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--onfield {
  --btn-bg: #fff; --btn-fg: var(--field); --btn-bd: #fff;
  --btn-fill: var(--field); --btn-fill-fg: #fff;
}
.btn--sm { padding: .6rem 1.05rem; font-size: .69rem; }
.btn--lg { padding: 1.08rem 2rem; font-size: .84rem; }
.btn--block { display: flex; width: 100%; }

/* text link whose rule draws in on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: .18rem;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .3s var(--ease-out), color .3s var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; color: var(--accent-text); }
.link-arrow::after { content: '\2192'; font-size: .9em; }

/* ---------------------------------------------------------------- header -- */
/* A masthead bar, not a floating pill. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--rule-strong); }

.header-ribbon {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 74px;
  transition: height .3s var(--ease-out);
}
.site-header.is-scrolled .header-ribbon { height: 62px; }

.brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  transition: height .3s var(--ease-out);
}
.site-header.is-scrolled .brand-logo { height: 32px; }

.site-nav { display: flex; align-items: center; margin-left: auto; position: relative; }
.nav-list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item > a {
  display: flex;
  align-items: center;
  gap: .32rem;
  padding: .5rem .72rem;
  font-family: var(--font-mono);
  font-size: .745rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.nav-item > a:hover,
.nav-item > a.active { color: var(--ink); }

.nav-caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform .25s var(--ease-out);
}
.nav-item--has-submenu:hover .nav-caret,
.nav-item--has-submenu.is-open .nav-caret { transform: rotate(180deg); }

.nav-indicator {
  position: absolute; bottom: .1rem; left: 0;
  height: 2px; width: 0;
  background: var(--accent);
  opacity: 0;
  transition: transform .32s var(--ease-out), width .32s var(--ease-out), opacity .2s;
  pointer-events: none;
}

/* R13 — transparent bridge so the cursor never drops the panel mid-travel */
.nav-item--has-submenu::after {
  content: '';
  position: absolute;
  top: 100%; left: -.6rem; right: -.6rem;
  height: 1rem;
  pointer-events: auto;
}

.nav-submenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-top: 2px solid var(--accent);
  z-index: 30;
}
.nav-submenu--single { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 901px) {
  .nav-submenu {
    position: absolute;
    top: calc(100% + .95rem);
    right: 0;
    width: min(33rem, 76vw);
    box-shadow: 0 18px 40px -24px rgba(13, 13, 12, .34);
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
  }
  .nav-submenu--single { width: min(20rem, 74vw); }
  .nav-item--has-submenu:hover > .nav-submenu,
  .nav-item--has-submenu:focus-within > .nav-submenu {
    opacity: 1; visibility: visible; transform: none;
  }
}

.submenu-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .8rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transition: background-color .18s var(--ease-out);
}
.submenu-item:hover { background: var(--panel); }
.submenu-text { display: flex; flex-direction: column; min-width: 0; }
.submenu-name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: .84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.submenu-meta {
  font-family: var(--font-mono);
  font-size: .655rem;
  color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guide-glyph {
  flex: 0 0 auto;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .7rem;
}

/* R6 — brand logos vary wildly, so every one sits on the same white plate.
   Square and hairline-ruled: the system has no circles. */
.logo-plate {
  flex: 0 0 auto;
  display: grid; place-items: center;
  padding: .35rem .5rem;
  background: var(--plate);
  border: 1px solid var(--rule-strong);
}
.logo-plate img { width: auto; max-height: 100%; object-fit: contain; }
.logo-plate--xs { width: 3.3rem; height: 2.1rem; }
.logo-plate--xs img { max-height: 1.4rem; }
.logo-plate--sm { width: 5.2rem; height: 3rem; }
.logo-plate--sm img { max-height: 2.2rem; }
.logo-plate--md { width: 7.6rem; height: 4.3rem; }
.logo-plate--md img { max-height: 3.2rem; }
.logo-plate--lg { width: 10rem; height: 5.6rem; }
.logo-plate--lg img { max-height: 4.2rem; }

.header-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.nav-cta-mobile { display: none; }

.menu-toggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
}
.menu-bar {
  display: block; width: 16px; height: 2px;
  background: var(--ink);
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
}
.menu-toggle.is-active .menu-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.is-active .menu-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero -- */
/* Asymmetric split: masthead headline left, photograph right. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding-top: clamp(2.2rem, 5vw, 3.4rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
}
.hero h1 { margin-bottom: .38em; }
.hero-lede {
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 1.8rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ------------------------------------------------------------- duotone -- */
/* Photography is mapped to the paper/vermilion ramp at build time by
   tools/make-duotone.php, not here: CSS brightness() is multiplicative and
   cannot lift a near-black frame. This class is just the frame the printed
   image sits in. */
.duotone {
  position: relative;
  overflow: hidden;
  background: var(--sunk);
}
.duotone img { width: 100%; height: 100%; object-fit: cover; }

.hero-media {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
}

/* rule-divided figure strip, no boxes */
.hero-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule);
}
.stat-tile { padding: 1.25rem 1.2rem 1.35rem; }
.stat-tile + .stat-tile { border-left: 1px solid var(--rule); }
.stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.65rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
}
.stat-label {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------------- ranking -- */
.section { padding: clamp(3rem, 6.5vw, 5.2rem) 0; }
.section--panel { background: var(--panel); }
.section--sunk  { background: var(--sunk); }

.toprated-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  margin-bottom: 2.2rem;
  border-bottom: 2px solid var(--rule-ink);
}
.toprated-head h2 { margin-bottom: 0; flex: 1 1 22rem; }
.toprated-note {
  font-family: var(--font-mono);
  font-size: .705rem;
  line-height: 1.65;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: right;
  margin: 0;
}

/* #1 runs as a lead entry: photograph, plate, offer, score. */
.lead-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.25rem, 3vw, 2.6rem);
  align-items: stretch;
  margin-bottom: 2.8rem;
}
.lead-media { min-height: 16rem; }
.lead-rank {
  position: absolute; top: 0; left: 0;
  padding: .5rem .95rem .58rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lead-body { display: flex; flex-direction: column; }
.lead-top { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.lead-name { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); margin: 0; }
.lead-bonus {
  font-size: 1.04rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 1.35rem;
}
.lead-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--rule);
}
.lead-fact { padding: .78rem 0; border-bottom: 1px solid var(--rule); }
.lead-fact + .lead-fact { border-left: 1px solid var(--rule); padding-left: 1rem; }
.lead-fact dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .2rem;
}
.lead-fact dd { margin: 0; font-size: .9rem; font-weight: 600; }
.lead-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* the rest of the field: a ruled ranking table */
.rank-list { border-top: 2px solid var(--rule-ink); }
.rank-row {
  display: grid;
  grid-template-columns: 3.2rem 7.5rem minmax(0, 1fr) 5rem auto;
  align-items: center;
  gap: 1.15rem;
  padding: 1.05rem .35rem;
  border-bottom: 1px solid var(--rule);
  transition: background-color .22s var(--ease-out), padding-left .22s var(--ease-out);
}
.rank-row:hover { background: rgba(224, 48, 30, .045); padding-left: .85rem; }
.rank-num {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.rank-brand { display: flex; align-items: center; }
.rank-body { min-width: 0; }
.rank-name {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.012em;
  margin: 0 0 .12rem;
}
.rank-bonus { font-size: .875rem; color: var(--muted); margin: 0 0 .3rem; }
.rank-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.4rem;
  margin: 0;
  font-size: .715rem;
}
.rank-meta > div { display: flex; gap: .4rem; min-width: 0; }
.rank-meta dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}
.rank-meta dd { margin: 0; color: var(--dim); }
.rank-actions { display: flex; align-items: center; gap: .6rem; }

/* --------------------------------------------------------------- ratings -- */
/* A mono numeral plus a bare vermilion rule. No track, no stars, no emoji. */
.score { display: flex; flex-direction: column; gap: .32rem; }
.score-num {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
}
.score-num small { font-size: .5em; color: var(--dim); letter-spacing: 0; }
.score-bar-wrap { display: block; width: 100%; height: 3px; }
.score-bar {
  display: block;
  height: 100%;
  background: var(--accent);
}
.score--sm .score-num { font-size: 1rem; }
.score--lg .score-num { font-size: clamp(2.6rem, 2rem + 2.4vw, 3.9rem); }
.score--lg .score-bar-wrap { height: 5px; }

.rating-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .2em .55em .28em;
  margin-left: .35rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .4em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}

/* --------------------------------------------------------- home sections -- */
.home-intro { border-bottom: 1px solid var(--rule); }
.home-intro .container {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
}
.home-intro-mark {
  height: .5rem;
  background: var(--accent);
  margin-top: .8rem;
}
.home-intro-body p {
  font-size: clamp(1.06rem, .98rem + .42vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink);
}
.home-intro-body p + p { margin-top: .9rem; }
.home-intro .hero-actions { margin-top: 1.9rem; }

/* Bento: asymmetric, and never six white boxes */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tile {
  position: relative;
  padding: 1.55rem 1.5rem 1.7rem;
  background: var(--paper);
  transition: background-color .26s var(--ease-out);
}
.tile:hover { background: var(--panel); }
.tile > * { position: relative; z-index: 1; }
.tile h3 { margin-bottom: .5rem; }
.tile p { color: var(--muted); font-size: .915rem; margin-bottom: 0; }
.tile .link-arrow { margin-top: 1rem; }

/* mono index, replacing the old decorative "BRAND 01" kicker */
.tile-index {
  display: block;
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .12em;
  color: var(--dim);
  margin-bottom: .7rem;
}

.tile--feature { grid-column: span 3; }
.tile--wide    { grid-column: span 4; }
.tile--narrow  { grid-column: span 2; }
.tile--narrow3 { grid-column: span 3; }
.tile--half    { grid-column: span 3; }
.tile--full    { grid-column: 1 / -1; }

/* photo cell */
.tile--photo { padding: 0; min-height: 12rem; }
.tile--photo:hover { background: var(--sunk); }

/* field cell: solid vermilion, paper text */
.tile--field { background: var(--field); color: #fff; }
.tile--field:hover { background: var(--field); }
.tile--field h3 { color: #fff; }
.tile--field p { color: rgba(255, 255, 255, .88); }
.tile--field .tile-index { color: rgba(255, 255, 255, .72); }
.tile--field .link-arrow { color: #fff; background-image: linear-gradient(#fff, #fff); }
.tile--field .link-arrow:hover { color: #fff; }

/* split layout: photograph beside verbatim list */
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: start;
}
.split-layout--reverse .split-media { order: 2; }
.split-media { aspect-ratio: 3 / 4; border: 1px solid var(--rule); }
.split-body h2 { margin-bottom: .7rem; }

/* ---------------------------------------------------------------- lists -- */
/* R10 — block-level li with a square marker in the left gutter. Never grid. */
.feature-check-list,
.feature-check-list--plain {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
}
.feature-check-list { border-top: 1px solid var(--rule); }
.feature-check-list li,
.feature-check-list--plain li {
  display: block;
  position: relative;
  padding-left: 1.85rem;
  line-height: 1.6;
}
.feature-check-list li {
  padding-top: .95rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--rule);
}
.feature-check-list li::before,
.feature-check-list--plain li::before {
  content: '';
  position: absolute;
  left: 0;
  width: .62rem; height: .62rem;
  background: var(--accent);
}
.feature-check-list li::before { top: 1.42rem; }

.feature-check-list--plain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.feature-check-list--plain li {
  padding: 1.2rem 1.35rem 1.25rem 2.6rem;
  background: var(--paper);
}
.feature-check-list--plain li::before { left: 1.35rem; top: 1.62rem; }
.feature-check-list--plain li strong { display: inline; }
.feature-check-list--plain--single { grid-template-columns: minmax(0, 1fr); }

/* inside a tile: tighter, no rules */
.feature-check-list--tile { margin-top: .95rem; border-top: 0; }
.feature-check-list--tile li {
  padding: 0 0 0 1.4rem;
  border-bottom: 0;
  font-size: .9rem;
  color: var(--muted);
}
.feature-check-list--tile li + li { margin-top: .48rem; }
.feature-check-list--tile li::before { top: .52rem; width: .42rem; height: .42rem; }

/* negative lists: hollow marker, so a filled block never endorses a warning */
.feature-check-list--caution li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dim);
}
.tile--field .feature-check-list--tile li { color: rgba(255, 255, 255, .88); }
.tile--field .feature-check-list--tile li::before { background: #fff; }

/* ------------------------------------------------------------ deco card -- */
/* The page's single full-bleed accent field. One per page, by design. */
.deco-card {
  background: var(--field);
  color: #fff;
  padding: clamp(2.2rem, 5vw, 3.6rem);
}
.deco-card h2 { color: #fff; }
.deco-card h2 em {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .12em;
}
.deco-card > p { color: rgba(255, 255, 255, .9); }
.deco-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.2rem;
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .28);
}
.deco-item { padding: 1.4rem 1.3rem 1.5rem; background: var(--field); }
.deco-item h3 { color: #fff; font-size: .98rem; margin-bottom: .45rem; }
.deco-item p { color: rgba(255, 255, 255, .86); font-size: .88rem; margin: 0; }

/* ------------------------------------------------------------ statement -- */
.support-card {
  border-top: 2px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule);
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
  text-align: center;
}
.support-card p { color: var(--muted); }
.support-card .btn { margin-top: 1.7rem; }

/* ----------------------------------------------------------- review page -- */
.review-hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding-top: clamp(1.6rem, 3.5vw, 2.6rem);
  overflow: hidden;
}
.review-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.4rem, 4vw, 3.2rem);
  align-items: start;
  padding-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}
.review-hero-media { aspect-ratio: 4 / 5; border: 1px solid var(--rule); }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumb li + li::before { content: '/'; margin-right: .4rem; color: var(--rule-strong); }


.review-lede {
  font-size: clamp(1rem, .95rem + .28vw, 1.12rem);
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.review-byline {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 0;
  margin: 0 0 1.4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.byline-avatar {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  overflow: hidden;
  background: var(--sunk);
  border: 1px solid var(--rule-strong);
}
.byline-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
.byline-avatar--fallback {
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
}
.byline-text { display: flex; flex-direction: column; line-height: 1.35; }
.byline-name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: .88rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
.byline-role {
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim);
}

/* offer block: a bordered slab, not a gradient plate */
.review-cta-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--accent);
}
.cta-strip-body { min-width: 0; }
.cta-strip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .28rem;
}
.cta-strip-bonus {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: clamp(1.04rem, .96rem + .42vw, 1.28rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
}
.review-cta-strip .btn { grid-column: 1 / -1; }
.cta-strip-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: .8rem;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------------------------------------------------------- verdict card -- */
.verdict-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 2px solid var(--rule-ink);
}
.verdict-head h2 { margin-bottom: 1.3rem; }

.verdict-overall {
  display: flex;
  align-items: flex-end;
  gap: 1.15rem;
  padding-bottom: 1.2rem;
  margin-bottom: .4rem;
  border-bottom: 2px solid var(--rule-ink);
}
.verdict-overall-label {
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: .5rem;
}

.rating-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 3rem;
  align-items: center;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--rule);
}
.rating-label { font-size: .875rem; color: var(--muted); }
.rating-score {
  font-family: var(--font-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
}

.verdict-note {
  align-self: start;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--panel);
  border-left: 3px solid var(--accent);
}
.verdict-note p { font-size: 1rem; line-height: 1.58; color: var(--ink); }
.verdict-sign {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.verdict-disclaimer {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-strong);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--dim);
}

/* --------------------------------------------------- generated page body -- */
.content-section { padding: clamp(2.3rem, 5vw, 3.8rem) 0; }
.content-section + .content-section { border-top: 1px solid var(--rule); }

.intro-block {
  display: grid;
  grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: start;
}
.intro-block::before {
  content: '';
  height: .5rem;
  background: var(--accent);
  margin-top: .7rem;
}
.intro-block-body p { color: var(--muted); font-size: 1.04rem; }

.plain-card > p + p { margin-top: 1rem; }

/* R3 — column count follows item count */
.floor-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

.image-divider {
  aspect-ratio: 21 / 8;
  border-top: 2px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule);
}

/* DOCX tables, set as newspaper tables */
.table-block { margin-top: 1.5rem; }
.table-block--first { margin-top: 0; }
.table-block-head { margin: 0 0 .9rem; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
.data-table-wrap {
  overflow-x: auto;
  border-top: 2px solid var(--rule-ink);
  border-bottom: 2px solid var(--rule-ink);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  min-width: 36rem;
}
.data-table th,
.data-table td {
  padding: .78rem .95rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.data-table thead th {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--rule-ink);
  white-space: nowrap;
}
.data-table thead th strong,
.data-table thead th b,
.data-table thead th em { color: inherit; font-weight: inherit; font-style: normal; }
.data-table tbody th,
.data-table tbody td:first-child {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap;
}
.data-table tbody tr:hover { background: rgba(224, 48, 30, .045); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* FAQ: a ruled two-column run, not a card stack */
.faq-list { border-top: 2px solid var(--rule-ink); }
.faq-item {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 2.4rem);
}
.faq-item h3 { font-size: 1.02rem; margin-bottom: 0; }
.faq-item p { color: var(--muted); margin-bottom: 0; }
.faq-item p + p { margin-top: .65rem; }

/* --------------------------------------------------------- article pages -- */
.article-hero {
  position: relative;
  padding: clamp(2rem, 4.5vw, 3.2rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
  border-bottom: 2px solid var(--rule-ink);
  overflow: hidden;
}

.article-lede {
  font-size: clamp(1.04rem, .97rem + .35vw, 1.2rem);
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--panel);
  border-top: 2px solid var(--rule-ink);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
}
.footer-logo { height: 40px; width: auto; object-fit: contain; margin-bottom: 1rem; }
.footer-tagline { font-size: .875rem; color: var(--muted); margin-bottom: 1.3rem; }
.footer-head {
  font-family: var(--font-mono);
  font-size: .645rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule-strong);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.footer-col a {
  font-size: .85rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s var(--ease-out);
}
.footer-col a:hover { color: var(--accent-text); }

.footer-accreditations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}
.accred { padding: 1.05rem 1.15rem; background: var(--panel); }
.accred strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .25rem;
}
.accred span { font-size: .76rem; color: var(--dim); }

.footer-bottom {
  padding: clamp(1.3rem, 2.5vw, 1.9rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
  border-top: 1px solid var(--rule-strong);
}
.footer-disclaimer {
  font-size: .775rem;
  line-height: 1.68;
  color: var(--dim);
  margin: 0 0 1rem;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

/* ------------------------------------------------------------------- 404 -- */
.page-404 {
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.page-404 .container {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.page-404 p.error-code {
  font-family: var(--font-mono);
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--accent);
  margin: 0;
  max-width: none;
}
.page-404 p { color: var(--muted); }
.page-404 .hero-actions { margin-top: 1.6rem; }

/* --------------------------------------------------------------- reveals -- */
/* Gated on html.js: without JS nothing adds .is-visible and the page would be
   blank. Motion exists here to stage reading order, nothing more. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------- breakpoints -- */
@media (max-width: 1080px) {
  .footer-main { grid-template-columns: 1.3fr 1fr 1fr; }
  .rank-row { grid-template-columns: 2.8rem 6.5rem minmax(0, 1fr) auto; }
  .rank-row .score { display: none; }
}

@media (max-width: 900px) {
  .menu-toggle { display: flex; }
  .header-cta { display: none; }
  .nav-cta-mobile { display: inline-flex; margin-top: 1.1rem; }

  /* A drop sheet, not a fixed overlay: the masthead is sticky, so an inset:0
     fixed panel would fight it for the top of the viewport. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 1.4rem;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-bottom: 2px solid var(--rule-ink);
    box-shadow: 0 20px 40px -28px rgba(13, 13, 12, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-indicator { display: none; }
  .nav-list { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-item > a {
    padding: .85rem 0;
    font-family: var(--font-display);
    font-stretch: 118%;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .nav-item > a:hover,
  .nav-item > a:focus,
  .nav-item > a.active { color: var(--accent-text); }

  .nav-item--has-submenu::after { display: none; }
  .nav-submenu {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    background: var(--panel);
    border: 0;
    box-shadow: none;
  }
  .nav-item--has-submenu.is-open > .nav-submenu { display: grid; }
  .submenu-item { border-right: 0; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-media { order: -1; aspect-ratio: 16 / 10; }
  .hero-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile:nth-child(3) { border-left: 0; }
  .stat-tile:nth-child(n+3) { border-top: 1px solid var(--rule); }

  .lead-entry { grid-template-columns: minmax(0, 1fr); }
  .lead-media { min-height: 12rem; aspect-ratio: 16 / 9; }

  .rank-row {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    grid-template-areas:
      'num brand'
      'body body'
      'actions actions';
    row-gap: .85rem;
  }
  .rank-num { grid-area: num; }
  .rank-brand { grid-area: brand; }
  .rank-body { grid-area: body; }
  .rank-actions { grid-area: actions; justify-content: space-between; }
  .rank-row:hover { padding-left: .35rem; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--feature, .tile--wide, .tile--narrow3, .tile--half, .tile--full { grid-column: span 2; }
  .tile--narrow { grid-column: span 1; }
  .tile--photo { min-height: 10rem; }

  .split-layout { grid-template-columns: minmax(0, 1fr); }
  .split-layout--reverse .split-media { order: 0; }
  .split-media { aspect-ratio: 16 / 10; }

  .deco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-check-list--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floor-grid { --cols: 2 !important; }

  .verdict-card { grid-template-columns: minmax(0, 1fr); }
  .review-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .review-hero-media { order: -1; aspect-ratio: 16 / 9; }

  .faq-item { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .home-intro .container { grid-template-columns: minmax(0, 1fr); }
  .home-intro-mark { width: 3.5rem; margin-top: 0; }
  .intro-block { grid-template-columns: minmax(0, 1fr); }
  .intro-block::before { width: 3rem; margin-top: 0; }

  .page-404 .container { grid-template-columns: minmax(0, 1fr); }
  .footer-accreditations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hero-stats-strip { grid-template-columns: minmax(0, 1fr); }
  .stat-tile { border-left: 0; }
  .stat-tile + .stat-tile { border-top: 1px solid var(--rule); }

  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile--narrow { grid-column: span 1; }
  .deco-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-check-list--plain { grid-template-columns: minmax(0, 1fr); }
  .floor-grid { --cols: 1 !important; }
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .footer-accreditations { grid-template-columns: minmax(0, 1fr); }
  .lead-facts { grid-template-columns: minmax(0, 1fr); }
  .lead-fact + .lead-fact { border-left: 0; padding-left: 0; }
  .rating-row { grid-template-columns: minmax(0, 1fr) 3rem; }
  .rating-row .score-bar-wrap { display: none; }
  .review-cta-strip { grid-template-columns: minmax(0, 1fr); }
  .toprated-note { text-align: left; }
}

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

@media print {
  .site-header, .site-footer, .btn, .review-cta-strip { display: none !important; }
  body { background: #fff; }
}