/* britekasinot.it.com — visual layer (presentation only) */

/* ---------------------------------------------------------------- tokens */
.theme-zimpler{
  --brand:#3a2160; --brand-2:#5a3891; --brand-3:#241541;
  --accent:#0f7d5c; --accent-2:#14a077; --accent-ink:#ffffff;
  --bg:#f7f4ee; --surface:#fffdf8; --surface-2:#f0ebe1;
  --ink:#241a2e; --ink-soft:#5f5470; --line:#ddd4c6;
  --ok:#0f7a52; --ok-bg:#e7f4ee; --no:#9d2f28; --no-bg:#fbeceb;
  --warn-bg:#fdf3e0; --warn-line:#e8d2a6; --info-bg:#efeaf6;
  --shadow:0 1px 0 rgba(36,21,65,.06),0 8px 22px -14px rgba(36,21,65,.22);
  --shadow-lg:0 1px 0 rgba(36,21,65,.08),0 22px 48px -24px rgba(36,21,65,.34);
  --maxw:1150px;
  /* Full-width content column: 1096px is .wrap's inner width (--maxw minus its
     2x27px padding), so the prose column and the toplist share one edge instead
     of the body text sitting 118px inside the toplist band. */
  --prose:1096px;
}
body{font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;
  background:var(--bg)}
/* A 1096px measure is a long line to track. Slightly looser leading and a touch
   more paragraph spacing keep the eye on the right row on the return sweep. */
.prose p{max-width:none}
.prose>section>p,.prose>section>ul,.prose>section>ol{line-height:1.72}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{font-family:var(--font-head)}
h1{font-size:clamp(2rem,1.2rem + 3vw,3.05rem);letter-spacing:-.012em;line-height:1.12}
h2{font-size:clamp(1.42rem,1.08rem + 1.25vw,1.98rem);letter-spacing:-.008em}
h3{font-size:1.18rem;letter-spacing:0;font-weight:700}
.prose p{margin:0 0 1.05em}

/* Section heads get a broadsheet hairline above them rather than a coloured bar. */
.prose h2.sec{padding-top:24px;border-top:1px solid var(--line);margin-top:2.1em}
.prose>section:first-of-type h2.sec{border-top:0;padding-top:0}

/* ---------------------------------------------------------------- chrome */
.topbar{background:var(--brand-3);font-size:.79rem;letter-spacing:.012em}
.topbar .wrap{padding-block:9px}
.topbar a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.38)}
.age{border-width:1.5px;font-weight:800;letter-spacing:.03em;border-radius:3px}
.site-header{background:var(--brand);border-top:0;
  box-shadow:inset 0 -3px 0 var(--accent)}
.site-header .wrap{min-height:74px}
.brand{font-size:1.16rem;gap:12px;font-family:var(--font-head);letter-spacing:.005em}
.brand-mark{width:44px;height:44px;border-radius:4px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.brand span small{opacity:.76;letter-spacing:.02em;margin-top:2px;font-family:var(--font)}
.nav a{font-size:.93rem;font-weight:620;border-radius:3px;padding:10px 12px;
  transition:background .14s ease}
.nav a[aria-current="page"]{background:rgba(255,255,255,.14);
  box-shadow:inset 0 -2px 0 var(--accent-2)}

/* ---------------------------------------------------------------- hero band */
/* Dark photographic band. The art (hero-b) is a walnut desk with deep shadow filling
   the left two thirds and an aubergine ledger + brass magnifier on the right, so the
   scrim darkens the left/centre for the headline and lets the subject read on the
   right. Body stays warm paper: one dark band at the top, broadsheet below.
   The lead site's hero is a flat navy gradient over a vector graphic — still distinct. */
.hero{position:relative;color:#f3eef8;padding:54px 0 62px;margin-bottom:0;
  background:
    linear-gradient(92deg, rgba(24,13,44,.93) 0%, rgba(30,17,54,.88) 42%,
                    rgba(36,21,65,.62) 72%, rgba(36,21,65,.38) 100%),
    url("/img/hero-band.webp") center right / cover no-repeat,
    var(--brand-3);
  border-bottom:3px solid var(--accent)}
@media (max-width:760px){
  .hero{padding:40px 0 46px;
    background:
      linear-gradient(180deg, rgba(24,13,44,.90) 0%, rgba(36,21,65,.80) 100%),
      url("/img/hero-band-800.webp") center / cover no-repeat, var(--brand-3)}
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;margin:.08em 0 .32em;text-wrap:balance;
  text-shadow:0 1px 24px rgba(12,6,24,.55)}
.hero .lead{color:#d8cde6;font-size:1.14rem;line-height:1.62;max-width:60ch}
.hero .byline{color:#c3b5d4;margin-top:22px;gap:10px 22px}
.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,.3);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.hero .byline time{color:#c3b5d4}
.crumbs{color:#b3a3c6;margin:0 0 8px}
.crumbs a{color:#e2d8ee}
.crumbs li+li::before{color:#8c7aa6}
.hero-center .hero .wrap{gap:34px}
.hero-center .hero h1::after{content:"";display:block;width:64px;height:3px;
  background:var(--accent-2);margin:18px auto 0}

/* ---------------------------------------------------------------- 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:4px;
  background:var(--brand)}
.featured-kicker{margin:8px 0 14px;font-size:.66rem;letter-spacing:.18em;font-weight:800;
  color:var(--accent)}
.featured-logo{max-width:270px;border-radius:var(--radius-sm);border:1px solid var(--line);
  margin-bottom:14px;background:#fff}
.featured-name{font-size:1.38rem;margin-bottom:8px;font-family:var(--font-head)}
.featured-desc{font-size:.92rem;line-height:1.55;margin-inline:auto;color:var(--ink-soft)}
.featured .tags{margin:12px 0 16px}
.featured-cta{background:var(--accent);color:#fff;letter-spacing:.012em;
  border-radius:var(--radius-sm);box-shadow:none;border:1px solid var(--accent)}
.featured-cta:hover{background:var(--accent-2);border-color:var(--accent-2);filter:none;
  transform:none}
.featured-more a{font-weight:640;color:var(--brand-2)}

/* ---------------------------------------------------------------- modules */
.module{margin:34px 0}
.module-head{border-bottom:2px solid var(--brand);padding-bottom:10px;margin-bottom:18px}
.module-head h2{margin:0;font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem)}
.module-note{color:var(--ink-soft);font-size:.9rem;margin:8px 0 0}
.badge-comm{background:var(--warn-bg);border:1px solid var(--warn-line);color:#6d4b12;
  border-radius:3px;font-size:.68rem;letter-spacing:.11em;font-weight:800;padding:4px 9px}
.badge-edit{background:var(--info-bg);border:1px solid #d3c7e6;color:var(--brand-2);
  border-radius:3px;font-size:.68rem;letter-spacing:.11em;font-weight:800;padding:4px 9px}

/* recommendation cards — rec-grid variant */
.rec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;transition:box-shadow .16s ease,border-color .16s ease}
.rec-card:hover{box-shadow:var(--shadow-lg);border-color:#c8bbae}
.rec-logo img{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.rec-name{font-family:var(--font-head);font-size:1.16rem;margin:12px 0 6px}
.rec-desc{color:var(--ink-soft);font-size:.92rem;line-height:1.55}
.rec-cta{background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:var(--radius-sm);font-weight:700;box-shadow:none}
.rec-cta:hover{background:var(--accent-2);border-color:var(--accent-2);filter:none}
.tags span{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:3px;font-size:.72rem;letter-spacing:.02em}

/* ---------------------------------------------------------------- key facts */
/* base v2 ships `.hero-center .keyfacts{max-width:780px;margin-inline:auto}` for the
   hero variant, but the selector matches anywhere under body.hero-center — including
   the keyfacts box the renderer puts in the content flow. That left it 780px wide and
   inset 40px from the 860px column: a third width on the page, which is exactly the
   misalignment class that broke the lead site. Scope it back to the hero. */
.prose>.keyfacts{max-width:none;margin-inline:0}
.keyfacts{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.keyfacts h2,.keyfacts p.kf-h{font-family:var(--font-head);font-size:1.12rem;margin:0 0 12px;
  color:var(--brand-3)}
.keyfacts ul{margin:0;padding-left:1.15em}
.keyfacts li{margin:0 0 .55em;line-height:1.55}
.keyfacts li::marker{color:var(--accent)}

/* ---------------------------------------------------------------- toc */
.toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:4px 20px 14px}
.toc summary{font-family:var(--font-head);font-weight:700;padding:14px 0;cursor:pointer;
  color:var(--brand-3)}
.toc ol{columns:2;column-gap:34px;margin:4px 0 0}
@media (max-width:640px){.toc ol{columns:1}}
.toc a{color:var(--brand-2);text-decoration-color:rgba(90,56,145,.3)}

/* ---------------------------------------------------------------- one column */
/* base.css gives .rec-head/.toc/.paylist/.people/.table-wrap a negative inline margin
   above 1000px so they break OUT of a narrow prose column. With --prose now equal to
   the shell's inner width there is nothing to break out of, and that calc goes positive
   between ~1000px and ~1148px — which would inset those blocks inside the text instead.
   Zero it so every block shares the same left and right edge at every viewport. */
.prose>.rec-head,
.prose>.toc,
.prose>.paylist,
.prose>.people,
.prose .table-wrap{margin-inline:0}

/* ---------------------------------------------------------------- prose blocks */
.prose>section{display:flow-root}
.prose a{color:var(--brand-2);text-underline-offset:.16em;
  text-decoration-color:rgba(90,56,145,.38)}
.prose a:hover{text-decoration-color:var(--brand-2)}

/* payment strip — flex row of logo tiles, NOT a bulleted list.
   (Losing list-style/display/padding here is what broke every page on the lead site.) */
.paystrip{margin:22px 0}
.paystrip ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.paystrip li{flex:0 0 auto;display:block}
.paystrip img{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 12px;width:auto;height:44px;display:block}
.paystrip figcaption{color:var(--ink-soft);font-size:.86rem;margin-top:10px;line-height:1.5}

/* two-column lists */
.cols-2{display:grid;gap:4px 34px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* numbered step lists */
.prose ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 1.2em}
.prose ol.steps>li{counter-increment:s;position:relative;padding:0 0 .8em 44px;line-height:1.6}
.prose ol.steps>li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:28px;height:28px;border:1px solid var(--brand-2);color:var(--brand-2);
  background:var(--surface);border-radius:3px;font-size:.86rem;font-weight:800;
  display:grid;place-items:center;font-family:var(--font)}

/* callouts */
.note{background:var(--info-bg);border:1px solid #d3c7e6;border-left:4px solid var(--brand-2);
  border-radius:var(--radius-sm);padding:16px 18px;margin:1.4em 0}
.note--warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:#c9962f}
.note strong{display:block;font-family:var(--font-head);margin-bottom:6px;color:var(--brand-3)}
.note p{margin:0}

/* ---------------------------------------------------------------- tables */
.table-wrap{margin:1.5em 0}
table{border-collapse:collapse;width:100%;background:var(--surface);
  border:1px solid var(--line);font-size:.95rem}
caption{caption-side:top;text-align:left;color:var(--ink-soft);font-size:.88rem;
  line-height:1.5;padding:0 0 9px}
thead th{background:var(--brand);color:#fff;font-weight:650;text-align:left;
  padding:11px 14px;font-size:.88rem;letter-spacing:.015em}
tbody th,tbody td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
tbody th{text-align:left;font-weight:680;color:var(--brand-3);width:30%}
tbody tr:nth-child(even){background:rgba(240,235,225,.45)}

/* ---------------------------------------------------------------- figures */
.secfig{margin:0 0 1.2em 26px;float:right;width:min(300px,42%)}
.secfig img{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface)}
.secfig figcaption{color:var(--ink-soft);font-size:.83rem;line-height:1.48;margin-top:8px;
  padding-left:10px;border-left:2px solid var(--accent)}
@media (max-width:680px){.secfig{float:none;width:100%;margin:0 0 1.2em}}

/* ---------------------------------------------------------------- faq */
.faq details{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);margin:0 0 10px}
.faq summary{font-family:var(--font-head);font-weight:700;padding:14px 18px;cursor:pointer;
  color:var(--brand-3);list-style:none;position:relative;padding-right:46px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .16s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:14px 18px 4px}
.faq .a p{margin:0 0 .9em}

/* ---------------------------------------------------------------- author + sources */
.author-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;display:flex;gap:18px;align-items:flex-start;box-shadow:var(--shadow)}
.author-box img{border-radius:50%;border:2px solid var(--surface-2);flex:none}
.author-box h2,.author-box h3{font-family:var(--font-head);margin:0 0 3px;font-size:1.1rem}
.author-box .role{color:var(--accent);font-size:.84rem;font-weight:700;margin:0 0 8px;
  letter-spacing:.02em}
.author-box p{margin:0 0 .6em;font-size:.93rem;line-height:1.58;color:var(--ink-soft)}
.author-box .fine{font-size:.82rem;color:var(--ink-soft)}
/* .people is the only block on /kirjoittajat/ and base v2 gives it the wide
   break-out treatment. On a page with no other wide block that reads as one element
   sliding out of the column, so keep it in the prose measure. */
.people{display:grid;gap:16px;width:auto;max-width:none;margin-inline:0}
/* base.css:276 gives `.prose > .people` the wide break-out above 1000px at (0,2,0).
   A bare `.people{margin-inline:0}` at (0,1,0) loses to it, so re-assert at the same
   specificity. Same argument base.css itself makes for figures: a block starting 56px
   left of the paragraph under it reads as misalignment, and on /kirjoittajat/ the
   author grid is the only wide block on the page. */
.prose>.people{width:100%}
.sources{border-top:1px solid var(--line);margin-top:2.4em;padding-top:16px}
.sources p.src-h,.sources h2{font-family:var(--font-head);font-size:1.02rem;margin:0 0 10px;
  color:var(--brand-3)}
.sources li{margin:0 0 .5em;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--brand-3);color:#cfc4de;margin-top:56px;
  box-shadow:inset 0 3px 0 var(--accent)}
.site-footer a{color:#e6dff0}
.site-footer p.foot-h{font-family:var(--font-head);color:#fff;font-size:1rem;margin:0 0 10px}
.site-footer .fine{color:#a496b8;font-size:.85rem;line-height:1.6}
.rg-strip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm);padding:14px 16px}

/* ---------------------------------------------------------------- print */
@media print{
  .site-header,.topbar,.nav,.site-footer,.toc,.rec-cta,.featured-cta{display:none}
  .hero{background:none;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}