/* self-hosted, latin subset — see build/selfhost_fonts.py */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/source-serif-4-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* parhaatbritekasinot.com — visual layer (presentation only) */

/* ---------------------------------------------------------------- tokens */
.theme-parhaat{
  --brand:#10403f; --brand-2:#1c6b66; --brand-3:#0a2b2b;
  --accent:#c9722f; --accent-2:#e39152; --accent-ink:#1c0f06;
  --bg:#f4f6f5; --surface:#fff; --surface-2:#edf2f1; --surface-3:#e2e9e8;
  --ink:#15221f; --ink-soft:#4f625e; --ink-faint:#7a8d89; --line:#d9e3e1;
  --line-soft:#e6eeec; --line-strong:#c3d1ce;
  /* provenance — the site's own semantic set, kept separate from the accent */
  /* Chip text is 0.68rem uppercase, so these are held to AA for small text against
     their own chip background - #a8761b and #6b7b78 measured ~4.0 and ~3.6 and failed. */
  --prov-ok:#166043;  --prov-ok-bg:#e7f3ed;
  --prov-est:#8a5f12; --prov-est-bg:#fbf1de;
  --prov-no:#4a5956;  --prov-no-bg:#eceff0;
  --ok:#1c6b4b; --ok-bg:#e7f3ed; --no:#9c3427; --no-bg:#fbecea;
  --warn-bg:#fdf3e7; --warn-line:#eccfa8; --info-bg:#e9f1f0;
  --shadow:0 1px 2px rgba(10,43,43,.05),0 10px 26px -14px rgba(10,43,43,.20);
  --shadow-lg:0 2px 4px rgba(10,43,43,.06),0 22px 52px -22px rgba(10,43,43,.32);
  --maxw:1160px;
  --font-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-head:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
/* Column width comes from base v2's --prose/--wide, which its break-out rule also
   computes against. Hardcoding .prose{max-width} here desyncs the two and makes wide
   blocks burst out of the column on every page. Set the variables instead. */
.theme-parhaat{--prose:900px}

body{font-family:var(--font-body);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink)}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.05rem,1.2rem + 3.1vw,3.1rem);letter-spacing:-.024em;line-height:1.08}
h2{font-size:clamp(1.42rem,1.06rem + 1.35vw,2.02rem);letter-spacing:-.018em}
h3{font-size:1.16rem;letter-spacing:-.008em}
.prose p{margin:0 0 1.1em}
.prose li{line-height:1.66}

/* ONE COLUMN, ONE LEFT EDGE (owner directive 17.9.2026).
   Running text sits at exactly the same width as the tables, the toplist and the TOC.

   Done by dropping the reading-measure cap, NOT by raising --prose. The shared theme's
   break-out rule derives its negative margin from --prose:
       margin-inline: calc((var(--prose) - min(var(--wide), 100vw - 52px)) / 2)
   so raising --prose to --wide turns that calc positive between 1000px and ~1148px and
   INSETS every table by up to 24px — the same mismatch in the other direction. Zeroing
   the cap and the margin together keeps text and data blocks in lockstep at every width.

   Trade-off, recorded deliberately: line length now runs past the ~65-character reading
   measure on a wide desktop. That is the requested behaviour, and the line-height and
   paragraph spacing below are set generously to carry it. */
.prose{max-width:none}
@media (min-width:1000px){
  .prose > .rec-head,
  .prose > .toc,
  .prose > .paylist,
  .prose > .people,
  .prose .table-wrap{margin-inline:0}
}

/* The data voice — anything that is a label, a figure or a date */
.fine,.byline,.rec-meta,.paystrip-h,.keyfacts h2,.crumbs,.topbar,
table caption,thead th,.pill,.prov,.featured-kicker,.related strong{
  font-family:var(--font-data);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.byline,.rec-meta,.fine{letter-spacing:-.005em}

/* ---------------------------------------------------------------- chrome */
.topbar{background:var(--brand-3);font-size:.76rem;letter-spacing:.01em}
.topbar .wrap{padding-block:9px}
.topbar a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.age{border-width:1.5px;font-weight:700;letter-spacing:.02em;font-family:var(--font-data)}
.site-header{background:var(--brand);border-top:0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)}
.site-header .wrap{min-height:74px}
.brand{font-family:var(--font-head);font-size:1.12rem;font-weight:700;gap:12px;
  letter-spacing:-.018em}
.brand-mark{width:44px;height:44px;border-radius:var(--radius-sm);flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 6px 14px -8px rgba(0,0,0,.7)}
.brand span small{font-family:var(--font-data);font-weight:500;font-size:.66rem;
  opacity:.72;letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.nav a{font-family:var(--font-head);font-size:.92rem;font-weight:600;
  border-radius:var(--radius-xs);padding:10px 13px;transition:background .15s ease}
.nav a[aria-current="page"]{background:rgba(255,255,255,.16);
  box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------------------------------------------------------------- hero band */
.hero{position:relative;background:
   linear-gradient(100deg, var(--brand-3) 0%, rgba(10,43,43,.88) 44%, rgba(10,43,43,.50) 100%),
   url("/img/hero-parhaat-brite-kasinot.webp") right center / cover no-repeat,
   var(--brand-3);
  color:#e7f0ef;padding:48px 0 58px;margin-bottom:0}
@media (max-width:640px){
  .hero{background:
    linear-gradient(170deg, var(--brand) 0%, var(--brand-3) 100%),
    url("/img/hero-parhaat-brite-kasinot-800.webp") right center / cover no-repeat,
    var(--brand-3)}
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;margin:.1em 0 .34em}
.hero .lead{color:#c4d8d5;font-size:1.14rem;line-height:1.6}
.hero .byline{color:#a3bcb8;margin-top:24px;gap:12px 22px;font-size:.8rem}
.hero .byline b,.hero .byline a{color:#fff}
.hero .byline a{text-decoration-color:rgba(255,255,255,.45)}
.hero .byline img{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.hero .byline time{color:#c4d8d5}
.crumbs{color:#9ab4b0;margin:0 0 8px;font-size:.76rem;letter-spacing:.02em}
.crumbs a{color:#cde2df}
.crumbs li+li::before{color:#78948f}
.hero-split .hero .wrap{gap:48px;align-items:start}
/* One copper rule closing the band. The accent is spent here and on CTAs, nowhere else. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:0;
  border-bottom:5px solid var(--accent)}

/* The hero sets a light text colour for its dark band. Any WHITE card sitting inside it
   has to reset the colour explicitly or the copy renders near-white on white — the same
   defect that made the featured card unreadable on the sibling build. Do not remove. */
.hero .keyfacts,.hero .keyfacts li,.hero .keyfacts strong,.hero .keyfacts p{color:var(--ink)}
.hero .keyfacts h2{color:var(--ink-soft)}
.hero .keyfacts a{color:var(--brand-2)}

/* ---------------------------------------------------------------- provenance */
/* The site's signature mark. Three states, one shape, used identically everywhere. */
.prov{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px 3px 7px;
  border-radius:999px;border:1px solid transparent;white-space:nowrap}
.prov::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.prov--ok{background:var(--prov-ok-bg);color:var(--prov-ok);border-color:#c3e0d1}
.prov--ok::before{background:var(--prov-ok)}
.prov--est{background:var(--prov-est-bg);color:var(--prov-est);border-color:#ecd9ae}
.prov--est::before{background:var(--prov-est)}
.prov--no{background:var(--prov-no-bg);color:var(--prov-no);border-color:#d5dcdc}
.prov--no::before{background:var(--prov-no)}

/* ---------------------------------------------------------------- criteria band */
/* The eight criteria and their weights, as an actual graphic. This is the page's thesis,
   so it gets the one structural device on the site that nothing else reuses. */
.criteria{background:var(--brand-3);color:#dbe8e6;padding:30px 28px;
  border-radius:var(--radius);margin:34px 0;box-shadow:var(--shadow-lg)}
.criteria h2{color:#fff;margin:0 0 6px;font-size:1.35rem}
.criteria>p{color:#a8c2be;font-size:.92rem;margin:0 0 22px}
.criteria ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:700px){.criteria ol{grid-template-columns:1fr 1fr}}
.criteria li{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px;
  align-items:start;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.crit-w{font-family:var(--font-data);font-size:.74rem;font-weight:600;color:var(--accent-2);
  background:rgba(201,114,47,.16);border-radius:var(--radius-xs);padding:3px 8px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.crit-n{font-family:var(--font-head);font-weight:600;color:#fff;font-size:.99rem;
  display:block;margin-bottom:2px}
.crit-d{font-size:.85rem;color:#a8c2be;line-height:1.5;display:block}
.criteria .prov{margin-top:7px}

/* ---------------------------------------------------------------- featured */
.featured{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px 18px;box-shadow:var(--shadow-lg);
  text-align:center;position:relative;overflow:hidden}
.featured p{color:inherit}
.featured::before{content:"";position:absolute;inset:0 0 auto;height:5px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%)}
.featured-kicker{margin:6px 0 14px;font-size:.64rem;letter-spacing:.14em;font-weight:600;
  color:var(--ink-faint);text-transform:uppercase}
.featured-logo{max-width:280px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:#fff;padding:10px;width:100%;height:auto}
.featured-name{font-family:var(--font-head);font-size:1.5rem;font-weight:700;
  margin:14px 0 6px;color:var(--ink);letter-spacing:-.018em}
.featured-desc{font-size:.95rem;color:var(--ink-soft);margin:0 0 14px}
.featured .tags{justify-content:center;margin-bottom:16px}
.featured-cta{width:100%;font-size:1.02rem;padding:14px 18px}
.featured-more{margin:12px 0 10px;font-size:.88rem}
.featured .fine{margin:0;text-align:left;font-size:.7rem;line-height:1.55;
  border-top:1px solid var(--line-soft);padding-top:12px}

/* ---------------------------------------------------------------- toplist */
.rec-list{gap:18px;margin-top:20px}
.rec-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px;gap:18px;
  background:var(--surface);box-shadow:var(--shadow);
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.rec-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);
  border-color:var(--line-strong)}
.rec-card::before{width:28px;height:28px;font-size:.8rem;background:var(--brand);
  color:#fff;font-weight:600;font-family:var(--font-data)}
.rec-card:first-child::before{background:linear-gradient(145deg,var(--accent-2),var(--accent));
  color:#fff}
.rec-logo{border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line-soft)}
.rec-body h3{margin:0 0 6px;font-size:1.1rem}
.rec-desc{font-size:.93rem;color:var(--ink-soft)}
.rec-meta{font-size:.78rem;color:var(--ink-soft)}
.rec-meta dt{font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- blocks */
.paystrip{background:var(--surface-2);border:1px solid var(--line);padding:18px 20px;
  border-radius:var(--radius);box-shadow:var(--shadow)}
.paystrip-h{margin:0 0 14px;font-weight:600;font-size:.76rem;color:var(--ink-soft);
  letter-spacing:.06em;text-transform:uppercase}
/* Structural rules — these are OUR classes, the shared theme knows nothing about them.
   Without them every payment strip renders as a bulleted vertical list. */
.paystrip ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.paystrip li{margin:0}
.paystrip img{width:124px;height:50px;padding:7px;border:1px solid var(--line);
  border-radius:var(--radius-xs);background:#fff;object-fit:contain;
  transition:transform .15s ease}
.paystrip img:hover{transform:translateY(-2px)}
.paystrip-c{margin:14px 0 0}
.cols-2{display:grid;gap:22px}
@media (min-width:760px){.cols-2{grid-template-columns:1fr 1fr}}

.keyfacts{border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:20px 24px;background:var(--surface)}
.keyfacts h2{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
details.toc{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:4px 6px}
details.toc summary{font-family:var(--font-head);font-weight:600;padding:12px 14px}
details.toc a{font-size:.94rem}
.note{border-radius:var(--radius);padding:16px 18px;border-left:4px solid var(--brand-2);
  font-size:.95rem}
.note--warn{border-left-color:var(--accent)}
.note strong{font-family:var(--font-head)}

.table-wrap{border-radius:var(--radius);box-shadow:var(--shadow);border-color:var(--line)}
table caption{color:var(--ink-soft);font-size:.76rem;text-align:left;padding:13px 15px;
  line-height:1.55;letter-spacing:.005em}
thead th{background:var(--surface-2);font-size:.73rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
tbody th[scope="row"]{font-family:var(--font-head);font-weight:600;color:var(--ink)}
tbody td{font-size:.95rem}

.faq details{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow)}
.faq summary{font-family:var(--font-head);font-weight:600}
.author-box{border-radius:var(--radius);padding:22px;gap:20px;
  grid-template-columns:96px minmax(0,1fr);background:var(--surface);
  border:1px solid var(--line)}
.author-box h2,.author-box h3{font-size:1.1rem;margin:0 0 2px}
.author-box .role{color:var(--brand-2);font-weight:600;font-family:var(--font-data);
  font-size:.76rem;letter-spacing:.03em}
.sources{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px}
.sources h2{font-size:1.05rem}
.sources ol{font-size:.9rem}
.illus img{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.illus figcaption{font-family:var(--font-data);font-size:.74rem;color:var(--ink-faint)}

/* Section figure: float so the copy wraps it. flow-root on the section, NOT
   overflow:hidden — the latter contains the float but also clips the wide break-out
   blocks (tables, toplist, TOC) stone dead. */
.prose>section{display:flow-root}
.secfig{float:right;margin:4px 0 18px 26px;max-width:290px}
.secfig img{width:100%;max-width:290px;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.secfig figcaption{font-family:var(--font-data);font-size:.72rem;color:var(--ink-faint);
  margin-top:9px;line-height:1.5}
/* Alternate the float so a long page does not become a single right-hand rail. */
.prose>section:nth-of-type(even) .secfig{float:left;margin:4px 26px 18px 0}
@media (max-width:760px){
  .prose>section .secfig,.prose>section:nth-of-type(even) .secfig{
    float:none;margin:0 0 18px;max-width:none}
  .secfig img{max-width:none}
}

/* ---------------------------------------------------------------- related */
.related{margin:34px 0 0}
.related ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:720px){.related ul{grid-template-columns:1fr 1fr}}
.related li{margin:0}
.related a{display:block;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);text-decoration:none;color:inherit;
  transition:box-shadow .15s ease,border-color .15s ease}
.related a:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.related strong{display:block;color:var(--brand-2);font-size:.82rem;margin-bottom:4px;
  letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.related span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.5}

/* ---------------------------------------------------------------- buttons */
.btn{background:var(--accent);color:#fff;border-radius:var(--radius-sm);
  font-family:var(--font-head);font-weight:600;letter-spacing:.005em;
  box-shadow:0 1px 2px rgba(0,0,0,.10)}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.pill{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  font-size:.7rem;padding:4px 11px;letter-spacing:.03em}
.pill--no{background:var(--no-bg);border-color:#f0cdc8;color:var(--no)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--brand-3);color:#c6d8d5;font-size:.92rem}
.site-footer a{color:#e7f0ef}
.foot-h{font-family:var(--font-data);color:#fff;font-weight:600;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.14);font-size:.84rem}

:where(a):focus-visible,:where(button):focus-visible,:where(summary):focus-visible{
  outline:3px solid var(--accent-2);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .rec-card,.btn,.paystrip img,.faq details,.related a{transition:none!important}
  .rec-card:hover,.btn:hover,.paystrip img:hover{transform:none!important}
}
@media (max-width:640px){
  .rec-card{gap:14px;padding:14px}
  .keyfacts{padding:16px 18px}
  .hero{padding:34px 0 40px}
  .criteria{padding:22px 18px}
  body{font-size:17px}
}