/* ===========================================================================
   rockfordchat.com - NL multibrand casino hub (direction 2), tier high.

   Donor of taste: thrill.com (cluster flat-minimal, _research\hero_styles).
   What was taken: near-black graphite-navy shell, ONE cool mint accent doing all
   the pointing, generously rounded flat cards with hairline edges, chip rows
   instead of decorated tabs, zero gloss and zero mascot.
   What was NOT taken: thrill's left game rail, its game-tile lobby, its purple
   promo banners, its violet "originals" cards. This site is an editorial
   comparison desk, not a lobby.

   Zero footprint (R10): every other site of the network is a warm, illustrated,
   mascot-led skin on amber/gold or crimson. Nothing here is warm, illustrated or
   glossy - the accent is cool mint #3FD69B and the primary unit is a data table.
   R43: block order is medusa's (casino review page: inferno's); the CSS is this
   site's own - no rule is copied from an etalon stylesheet.
   =========================================================================== */

:root {
  --bg: #0F1318;
  --bg2: #141920;
  --panel: #181E26;
  --panel2: #202833;
  --fg: #E7ECF2;
  --muted: #93A2B4;
  --line: rgba(231, 236, 242, .10);
  --line2: rgba(231, 236, 242, .19);
  --accent: #3FD69B;
  --accent-fg: #08130E;
  --accent2: #6E8BFF;
  --warn: #F2854B;
  --bad: #E4586B;
  --r: 10px;
  --notch: 16px;
  --maxw: 1200px;
  --head: 'Inter Tight', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --measure: 74ch;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.68 var(--body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 660;
  letter-spacing: -.018em;
  line-height: 1.16;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(28px, 4.4vw, 46px); }
h2 { font-size: clamp(22px, 2.9vw, 31px); margin-top: 0; }
h3 { font-size: clamp(18px, 2.1vw, 21px); }
h4 { font-size: 15px; letter-spacing: .01em; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
ul, ol { max-width: var(--measure); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: 600 15px/1 var(--head);
  letter-spacing: .005em;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* R34: the filled, find-me button is ALWAYS the paid link. */
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: #55E3AC; }
/* internal navigation stays a pale ghost */
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line2);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.adnote {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin: 2px 0 0;
}
.headcta { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.adnote.mini { font-size: 10.5px; text-align: center; margin: 0; }
.adnote.mini b { font-size: 9px; padding: 3px 5px; margin-right: 4px; }
.adnote b {
  display: inline-block;
  font: 700 10.5px/1 var(--head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 4px;
  padding: 4px 6px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------- header */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15, 19, 24, .86);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;          /* the CTA carries its ad label underneath it */
  padding-top: 8px;
  padding-bottom: 8px;
}
.logo { display: flex; align-items: center; gap: 11px; color: var(--fg); flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo b { display: block; font: 680 17px/1.1 var(--head); letter-spacing: -.02em; }
.logo small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--accent) 0%, #2FB682 100%);
  color: var(--accent-fg);
  font: 760 15px/1 var(--head);
  letter-spacing: .02em;
}
.mark.has-emblem { background: none; }

nav.main {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-wrap: nowrap;
}
nav.main a {
  color: var(--muted);
  font: 550 14px/1 var(--head);
  padding: 9px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
nav.main a:hover { color: var(--fg); background: var(--panel); text-decoration: none; }
nav.main a.akt { color: var(--accent); background: rgba(63, 214, 155, .10); }

/* CSS-only hamburger - no JS in the chrome */
.nav-t { display: none; }
.hb { display: none; }

/* ---------------------------------------------------------------- search */
.search { position: relative; flex: 0 0 auto; }
.search input {
  width: 168px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font: 400 14px/1 var(--body);
  padding: 11px 15px;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent); outline: none; }
.sres {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, 78vw);
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--notch);
  padding: 6px;
  max-height: 62vh;
  overflow: auto;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
}
.sres.on { display: block; }
.sres a, .sres .nores {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--fg);
  font-size: 14px;
}
.sres a:hover { background: rgba(63, 214, 155, .12); color: var(--accent); text-decoration: none; }
.sres .nores { color: var(--muted); }

/* ------------------------------------------------------------- crumb bar */
.crumbbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
  font-size: 13px;
  color: var(--muted);
}
.crumbbar .wrap {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 11px;
  padding-bottom: 11px;
  flex-wrap: wrap;
}
.crumbbar .cr { min-width: 0; }
.crumbbar a { color: var(--muted); }
.crumbbar a:hover { color: var(--accent); }
.crumbbar span { color: var(--fg); }
.updated { color: var(--muted); white-space: nowrap; }

/* -------------------------------------------------------------- sections */
main > section { padding: 46px 0; }
main > section.band { background: var(--bg2); }
main > section + section { border-top: 1px solid var(--line); }

/* the reading column: prose is centred, data grids keep the full shell */
main > section.narrow > .wrap { max-width: 872px; }
main > section.narrow p,
main > section.narrow ul,
main > section.narrow ol { max-width: none; }
.lead { color: var(--muted); font-size: clamp(16px, 1.5vw, 18.5px); max-width: 70ch; }

.src, .srcline { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; max-width: 88ch; }

/* ------------------------------------------------------------------ hero */
.hero {
  padding: 54px 0 46px;
  background:
    radial-gradient(900px 380px at 8% -12%, rgba(63, 214, 155, .13), transparent 62%),
    radial-gradient(760px 340px at 92% 0%, rgba(110, 139, 255, .10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 34px;
  align-items: start;
}
.hero h1 { margin-bottom: .32em; }
.kick {
  display: inline-block;
  font: 700 11.5px/1 var(--head);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(63, 214, 155, .11);
  border: 1px solid rgba(63, 214, 155, .26);
  border-radius: 999px;
  padding: 7px 12px;
  margin-bottom: 16px;
}
.hero .btns { margin-top: 22px; margin-bottom: 8px; }
.hero .adnote { margin-bottom: 22px; }

/* ---------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px;
}
.notch { border-radius: var(--notch); }
.panel h3 { margin-bottom: .6em; }
.panel.cta {
  background: linear-gradient(140deg, var(--panel2) 0%, var(--panel) 62%);
  border-color: var(--line2);
  padding: 26px;
}
.panel.cta p { max-width: 62ch; }

.callout {
  background: rgba(110, 139, 255, .08);
  border: 1px solid rgba(110, 139, 255, .24);
  border-radius: var(--notch);
  padding: 18px 20px;
  margin: 18px 0;
}
.callout.gap { background: rgba(242, 133, 75, .09); border-color: rgba(242, 133, 75, .28); }
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- tables */
.tablewrap { margin: 0 0 8px; }
.tablewrap.wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tablewrap.wide table { min-width: 640px; }
th {
  text-align: left;
  font: 620 12px/1.3 var(--head);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 12px;
  border-bottom: 1px solid var(--line2);
  white-space: nowrap;
}
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(231, 236, 242, .03); }
td.k { color: var(--muted); width: 38%; font-size: 13.5px; }
.na { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------ brandcards */
/* `align-items: start` on purpose: stretching every card to the tallest one in its
   row opened 150-250px of dead space inside the shorter ones, right above their
   buttons. A card that ends where its content ends reads better than a padded one. */
.brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 20px;
}
.brand {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: border-color .16s ease, transform .16s ease;
}
.brand:hover { border-color: var(--line2); transform: translateY(-2px); }
.brand { position: relative; }
.bhead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-right: 44px;
}
.blogo { width: auto; max-height: 34px; border-radius: 6px; }
.bname { font: 660 19px/1.2 var(--head); letter-spacing: -.015em; }

/* rank: the position this pool already gives the brand, made visible */
.brank {
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--muted);
  font: 700 14px/1 var(--head);
}
.brand:first-child .brank,
.brands > .brand:nth-child(1) .brank {
  background: rgba(63, 214, 155, .14);
  border-color: rgba(63, 214, 155, .38);
  color: var(--accent);
}

/* licence chip: regulator at a glance, wording straight from the review */
.lic {
  font: 620 10.5px/1 var(--head);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 9px;
  border: 1px solid;
}
.lic-ok { color: var(--accent); border-color: rgba(63, 214, 155, .36); background: rgba(63, 214, 155, .09); }
.lic-mid { color: var(--warn); border-color: rgba(242, 133, 75, .34); background: rgba(242, 133, 75, .09); }
/* lighter than --bad on purpose: the chip sits on its own tinted plate, and the
   token colour only reached 4.28:1 there (techframe R27 wants 4.5). */
.lic-bad { color: #F08094; border-color: rgba(228, 88, 107, .34); background: rgba(228, 88, 107, .09); }
/* missing data is not an accusation - it gets the neutral chip, not the red one */
.lic-mute { color: var(--muted); border-color: var(--line2); background: var(--panel2); }

/* Safety Index meter — a picture of a number the source already published */
.meter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 14px;
}
.mbar {
  grid-column: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--panel2);
  overflow: hidden;
}
.mbar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--warn) 0%, var(--accent) 78%);
}
.mval { grid-column: 2; grid-row: 1; font: 660 17px/1 var(--head); }
.mval small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.mlab {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--muted);
}

/* hero signal strip: the two numbers a reader came for, both sourced */
.signals {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--notch);
  max-width: 520px;
}
.meter.wide { gap: 6px 14px; }
.meter.wide .mbar { height: 9px; }
.meter.wide .mval { font-size: 22px; }
.signals .sigrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.sig {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
}
.sig b {
  color: var(--muted);
  font: 620 10.5px/1 var(--head);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 7px;
}
.sig { color: var(--fg); }
.blead { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.brand table { font-size: 13px; }
.brand td { padding: 8px 0; }
.brand td.k { width: 40%; padding-right: 12px; }
/* the paid button names the brand it opens, so its label can be long; let the pair
   stack rather than wrap into a ragged half-row */
.brand .btns { margin: auto 0 0; padding-top: 16px; gap: 8px; }
.brand .btn {
  font-size: 14px;
  padding: 11px 14px;
  flex: 1 1 auto;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

/* ----------------------------------------------------------------- tiles */
/* 15 hubs: five across, so the last row is full instead of leaving three orphans */
.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  --tg: var(--accent);
  display: block;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tg);
  padding: 15px 18px 16px;
  color: var(--fg);
}
.tile:hover {
  text-decoration: none;
  border-color: var(--line2);
  border-left-color: var(--tg);
  background: var(--panel2);
}
.tile b { display: block; font: 620 15.5px/1.3 var(--head); margin-bottom: 4px; }
.tile span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.tcat {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tg);
  font: 620 10px/1 var(--head);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tile .tg { width: 17px; height: 17px; flex: 0 0 auto; }
/* one colour per kind of question, so fifteen tiles stop reading as one block */
.tile.g-pay { --tg: #3FD69B; }
.tile.g-access { --tg: #6E8BFF; }
.tile.g-bonus { --tg: #F2B24B; }
.tile.g-trust { --tg: #57C7D6; }
.tile.g-play { --tg: #C78BF0; }

/* ------------------------------------------------------------------- toc */
ul.toc {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  max-width: none;
}
ul.toc a {
  display: block;
  font: 550 13.5px/1 var(--head);
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
}
ul.toc a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ----------------------------------------------------------------- steps */
ol.steps {
  list-style: none;
  counter-reset: s;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  max-width: none;
}
ol.steps li {
  counter-increment: s;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--notch);
  padding: 18px 18px 18px 56px;
  position: relative;
}
ol.steps li::before {
  content: counter(s);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(63, 214, 155, .14);
  color: var(--accent);
  font: 700 13px/1 var(--head);
}
ol.steps b { display: block; font: 620 15px/1.3 var(--head); margin-bottom: 4px; }
ol.steps span { font-size: 13.5px; color: var(--muted); }

/* ------------------------------------------------------------- pros/cons */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.pc ul { margin: 0; padding-left: 18px; }
.pc li { margin-bottom: .5em; font-size: 14.5px; }
.pc .pros { border-color: rgba(63, 214, 155, .28); }
.pc .pros h3 { color: var(--accent); }
.pc .cons { border-color: rgba(228, 88, 107, .26); }
.pc .cons h3 { color: var(--bad); }

/* ----------------------------------------------------------------- tiers */
.cards { display: grid; gap: 14px; margin-top: 18px; }
.cards.c1 { grid-template-columns: 1fr; }
.cards.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tier { background: var(--panel); border: 1px solid var(--line); padding: 20px; }
.tier.gap { border-color: rgba(242, 133, 75, .3); }
.tname {
  font: 700 11.5px/1 var(--head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.thead { font: 660 22px/1.2 var(--head); margin: 8px 0 6px; }
.tdetail { font-size: 14px; color: var(--muted); }
.tterms { font-size: 12.5px; color: var(--muted); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }

/* ----------------------------------------------------- figures / shots (R56) */
/* A screenshot lives INSIDE the section it belongs to, never in a gallery. */
figure.shot, .shots figure {
  margin: 24px auto;
  max-width: 780px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--notch);
  overflow: hidden;
}
figure.shot > div, .shots figure > div { background: var(--bg2); }
figure.shot img, .shots figure img { width: 100%; height: auto; display: block; }
figcaption {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.shots figure.void > div {
  display: grid;
  place-items: center;
  min-height: 150px;
  color: var(--muted);
  font-size: 13.5px;
}

/* ------------------------------------------------------------- logo strip */
.logostrip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.logo-chip {
  display: grid;
  place-items: center;
  background: #F4F7FA;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 96px;
}
.logo-chip img { max-height: 26px; width: auto; object-fit: contain; }

/* ------------------------------------------------------------------- faq */
details.faq {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--notch);
  margin: 0 0 10px;
  max-width: 92ch;
}
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 48px 16px 18px;
  font: 600 16px/1.45 var(--head);
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font: 400 22px/1 var(--head);
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .a { padding: 0 18px 4px; }
details.faq .a p { font-size: 14.8px; color: var(--muted); }

/* ---------------------------------------------------------------- byline */
.byline { display: flex; align-items: center; gap: 13px; }
.byline span { font-size: 14px; color: var(--muted); }
.byline b { display: block; font: 620 15px/1.3 var(--head); }
.byline b a { color: var(--fg); }
.byline b a:hover { color: var(--accent); }
.medal {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--accent);
  font: 700 15px/1 var(--head);
  overflow: hidden;
}
.medal.big { width: 96px; height: 96px; font-size: 28px; }
.medal.has-portrait { border-color: var(--accent); }
.medal img { width: 100%; height: 100%; object-fit: cover; }

.authorpage .authorhead { align-items: flex-start; margin-bottom: 24px; }
.authorpage .authorhead h1 { margin-bottom: .2em; }
.authorpage .authorhead b { color: var(--accent); font-size: 14.5px; }
.authorphoto {
  float: right;
  width: min(44%, 400px);
  margin: 4px 0 22px 28px;
  border-radius: var(--notch);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.authorphoto figcaption { border-top: 1px solid var(--line); }
.authorpage::after { content: ""; display: block; clear: both; }

/* the material list is navigation, so it reads as chips rather than bullets */
.authorpage > ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: none;
}
.authorpage > ul li { margin: 0; }
.authorpage > ul a {
  display: block;
  font: 550 13.5px/1 var(--head);
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
}
.authorpage > ul a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
ul.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; max-width: none; }
ul.pills li {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
}

/* ---------------------------------------------------------------- footer */
footer.site {
  background: var(--bg2);
  border-top: 1px solid var(--line);
  padding: 44px 0 30px;
  margin-top: 8px;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: 26px;
}
footer.site h4 { color: var(--fg); margin-bottom: 12px; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 8px; }
footer.site a { color: var(--muted); font-size: 13.8px; }
footer.site a:hover { color: var(--accent); }
footer.site .srcline { margin-top: 14px; max-width: 34ch; }
.agebadge {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--warn);
  color: var(--warn);
  font: 700 13px/1 var(--head);
  margin-bottom: 12px;
}
footer.site .legal {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
}
footer.site .legal p { max-width: 105ch; margin-bottom: .7em; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1040px) {
  footer.site .cols { grid-template-columns: 1fr 1fr 1fr; }
  .hero .grid { grid-template-columns: 1fr; gap: 26px; }
  .search input { width: 170px; }
}

@media (max-width: 880px) {
  .hb {
    display: grid;
    place-items: center;
    order: 3;
    margin-left: auto;
    width: 42px; height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line2);
    cursor: pointer;
  }
  .hb span, .hb span::before, .hb span::after {
    content: "";
    display: block;
    width: 18px; height: 2px;
    background: var(--fg);
    border-radius: 2px;
    position: relative;
  }
  .hb span::before { position: absolute; top: -6px; }
  .hb span::after { position: absolute; top: 6px; }
  /* The bar stays one short row while scrolling; search and the CTA live in the
     panel the hamburger opens. Pinning all three cost a quarter of a 375px screen
     on every page. */
  header.site .bar { flex-wrap: wrap; row-gap: 10px; min-height: 62px; }
  nav.main, header.site .search, header.site .headcta { display: none; }
  .nav-t:checked ~ nav.main,
  .nav-t:checked ~ .search,
  .nav-t:checked ~ .headcta { display: flex; }
  nav.main {
    order: 5;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 0;
    border-top: 1px solid var(--line);
    padding-top: 8px;
  }
  nav.main a { padding: 12px 14px; font-size: 15.5px; }
  header.site .search { order: 6; width: 100%; }
  .search input { width: 100%; }
  .sres { width: 100%; }
  header.site .headcta { order: 7; width: 100%; margin-bottom: 6px; }
  header.site .headcta .btn-primary { width: 100%; justify-content: center; }
  .logo small { display: none; }
}

@media (max-width: 700px) {
  main > section { padding: 34px 0; }
  .hero { padding: 34px 0 30px; }
  .pc { grid-template-columns: 1fr; }
  .brands { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .btns .btn { flex: 1 1 auto; justify-content: center; }
  .wrap { padding: 0 16px; }
  .authorphoto { float: none; width: 100%; margin: 0 0 22px; }
}

@media (max-width: 460px) {
  footer.site .cols { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}