/* ------------------------------------------------------------------ palette */
.theme-viljo{
--brand:#3b1f3d; --brand-2:#5a2f5c; --brand-3:#2a1430; --brand-ink:#fff8f2;
--accent:#e08a3c; --accent-2:#f0a35e; --accent-ink:#2a1408;
--bg:#f6f1ea; --surface:#fffdf9; --surface-2:#f3ece5; --surface-3:#e9dfd6;
--ink:#231a26; --ink-soft:#5c4f5e; --ink-faint:#85778a;
--line:#e3d8d3; --line-soft:#eee5e0; --line-strong:#cdbfb9;
--ok:#2c6b4f; --ok-bg:#e8f3ec; --ok-line:#bfe0cd;
--no:#9c3226; --no-bg:#fbeae7; --no-line:#f0cac2;
--warn-bg:#fdf1e3; --warn-line:#ecd0a6; --info-bg:#f1e9f1;
--ring:0 0 0 3px rgba(224,138,60,.35);
--prose:var(--wide);
}
.theme-viljo{--font-head:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.theme-viljo h1,.theme-viljo h2,.theme-viljo h3,
.theme-viljo .featured-name,.theme-viljo .rec-body h3{
font-family:var(--font-head); font-weight:600; letter-spacing:-.006em;
}
/* dark header + topbar */
.theme-viljo .topbar{background:var(--brand-3)}
.theme-viljo .site-header{background:var(--brand); color:var(--brand-ink)}
.theme-viljo .brand small{color:var(--accent-2)}
.theme-viljo .nav a{color:#efe3ec}
.theme-viljo .nav a:hover,.theme-viljo .nav a[aria-current="page"]{background:rgba(255,255,255,.12); color:#fff}
.theme-viljo .btn{background:var(--accent); background-image:none; color:var(--accent-ink); border:0}
.theme-viljo .btn:hover{background:var(--accent-2)}
/* status pills used in the editorial tables */
.st{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em}
.st--ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.st--rep{background:var(--warn-bg); color:#8a5a12; border:1px solid var(--warn-line)}
.st--no{background:var(--no-bg); color:var(--no); border:1px solid var(--no-line)}
/* Float containment for content sections. flow-root, never overflow:hidden. */
.prose>section{display:flow-root}
/* ------------------------------------------------------------------ hero */
/* Dark plum split hero: H1 + lead + byline left, featured partner card right (base.css
hero-split grid at >=980px). The photograph runs as a full-width band below it. */
.hero{
position:relative; color:var(--brand-ink);
background:radial-gradient(120% 140% at 100% 0%, #5a2f5c 0%, #3b1f3d 48%, #2a1430 100%);
padding:46px 0 40px;
}
.hero .wrap{position:relative; z-index:1}
.hero h1{margin:0 0 .36em; font-size:clamp(1.95rem,1.2rem + 2.4vw,3.05rem); line-height:1.1; color:#fff8f2}
.hero h1::before{content:""; display:block; width:56px; height:4px; background:var(--accent); margin:0 0 .65em; border-radius:2px}
.hero .lead{font-size:1.09rem; color:#e8d9e6; max-width:62ch; margin:0 0 18px}
.hero .byline,.hero .byline b{color:#efe3ec}
.hero .byline a{color:#fff}
.heroband{
height:220px; background:url(/img/hero-band.webp) center 52%/cover no-repeat;
border-bottom:1px solid var(--line); background-color:var(--surface-2);
}
@media (max-width:860px){.heroband{height:160px}}
@media (max-width:480px){.heroband{height:120px}}
@media (max-width:680px){
.hero{padding:28px 0 26px}
.hero h1::before{width:44px; height:3px}
}
/* cluster/trust pages: the keyfacts card sits inside the dark hero */
.hero .keyfacts{color:var(--ink)}
/* ------------------------------------------------------------------ featured card */
.featured{
background:var(--surface); border:1px solid var(--line-strong);
border-top:4px solid var(--accent); border-radius:var(--radius);
padding:20px 20px 18px; box-shadow:var(--shadow);
/* The hero sets a light ground; without this the card inherits hero colours and
the body copy comes out washed out. */
color:var(--ink);
}
.featured-kicker{
margin:0 0 10px; font-size:.7rem; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--accent-ink);
background:var(--accent-2); display:inline-block; padding:4px 9px;
border-radius:var(--radius-xs);
}
.featured-logo{background:var(--logo-bg,#111); border-radius:var(--radius-sm);
height:92px; display:grid; place-items:center; padding:10px; margin:0 0 14px}
.featured-logo img{max-height:70px; width:auto; max-width:100%; object-fit:contain}
.featured-name{margin:0 0 6px; font-size:1.3rem}
.featured-desc{margin:0 0 14px; font-size:.93rem; color:var(--ink-soft)}
.featured-cta{display:block; text-align:center}
.featured-more{margin:12px 0 0; font-size:.8rem; color:var(--ink-faint); text-align:center}
.featured-more a{color:inherit}
/* ------------------------------------------------------------------ payment strip */
.paystrip{margin:26px 0}
.paystrip-h{margin:0 0 10px; font-size:1.02rem; font-weight:660; font-family:var(--font-head)}
/* All four declarations are load-bearing. Without them this renders as a bulleted
vertical list on every page that uses a payment strip. */
.paystrip ul{list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0}
.paystrip li{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-sm); padding:9px 12px;
display:flex; align-items:center; min-height:46px;
}
.paystrip img{height:26px; width:auto; max-width:104px; object-fit:contain; display:block}
.paystrip-c{margin:10px 0 0; font-size:.81rem; color:var(--ink-faint); max-width:68ch}
/* ------------------------------------------------------------------ section figure */
/* Right-float on wide screens so body copy wraps around it. build.py PREPENDS these
to the section body - appended, a right-floated figure has no text left to wrap
and leaves a ~370px empty column. */
.secfig{margin:0 0 14px; float:none; width:auto}
.secfig img{width:100%; height:auto; border-radius:var(--radius-sm);
border:1px solid var(--line); background:var(--surface-2); display:block}
.secfig figcaption{font-size:.79rem; color:var(--ink-faint); margin:8px 2px 0; line-height:1.45}
@media (min-width:860px){
/* Scales with the column: at 1096px a 268px figure left a ~150-character line
beside it, which is worse than no figure at all. */
.secfig{float:right; width:300px; margin:4px 0 18px 30px}
}
@media (min-width:1200px){
.secfig{width:340px; margin-left:34px}
}
.illus{margin:22px 0}
.illus img{width:100%; max-width:420px; height:auto; display:block; margin-inline:auto;
border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-2)}
.illus figcaption{font-size:.81rem; color:var(--ink-faint); margin:9px 0 0; text-align:center}
/* ------------------------------------------------------------------ misc components */
/* Footer column headings. They are : counting them as
headings dragged the measured content-H2 focus down to 72% on the lead domain. */
.foot-h{margin:0 0 9px; font-weight:680; font-size:.93rem; color:var(--brand-ink);
font-family:var(--font-head)}
.rec-desc{margin:8px 0 0; font-size:.88rem; color:var(--ink-soft)}
.src{font-size:.82rem; color:var(--ink-faint); word-break:break-word}
/* Two-column lists. display:grid is required; without it the columns collapse. */
.cols-2{display:grid; gap:4px 34px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.people{display:grid; gap:18px; margin:22px 0}
@media (min-width:900px){.people{grid-template-columns:1fr 1fr}}
/* Long-line readability. --prose == --wide puts body text at ~135 characters per line
on a 1280px+ screen (base.css body is 17px/1.68). That is well past the comfortable
measure, and the width is a deliberate choice, so compensate typographically: a
larger line gap is what makes the eye find the next line on a long measure. Applied
only where the column is actually wide. */
@media (min-width:1000px){
.prose > section > p,
.prose > section > ul,
.prose > section > ol{line-height:1.78}
.prose > section > p{max-width:none}
}
/* Content H2 rule: marks editorial section heads (class="sec") apart from the
furniture headings in the TOC, FAQ and footer. */
h2.sec{margin:2.1em 0 .5em; padding-top:.35em; border-top:1px solid var(--line-soft)}
.prose>section:first-of-type h2.sec{border-top:0; padding-top:0}
h3{margin:1.5em 0 .35em; font-size:1.08rem}
/* ------------------------------------------------- full-width data blocks */
/* base.css lets .rec-head, .toc, .paylist, .people and .table-wrap break out of the
reading column to --wide. Two of our blocks were left behind:
.keyfacts - base.css:164 `.hero-center .keyfacts{max-width:780px;margin-inline:auto}`
clamps it to 780px and centres it. We use `hero-center`, so the box
rendered at 41% of a 1920px screen next to a 57% toplist.
.paystrip - a logo grid, not prose. At 880px it wrapped to a second row while
the toplist beside it ran the full 1096px.
The margin-inline expression is copied from base.css's own break-out rule so the two
stay in sync: a FIXED --wide overflows between 1000px and 1140px, and the 52px covers
.wrap's padding plus a scrollbar.
The breakpoint must be 1000px to match base.css:269 exactly. At 980px these boxes
broke out while base.css's own blocks did not, so between 980 and 1000 the key-facts
box rendered WIDER than the toplist sitting next to it. */
/* base.css:164 `.hero-center .keyfacts{max-width:780px;margin-inline:auto}` clamps the
key-facts box to 780px and centres it. We use `hero-center`, so it rendered at 41% of
a 1920px screen next to a 57% toplist. The second selector covers the CLUSTER pages,
where build.py puts the box in the hero rather than in .prose. */
.theme-viljo .prose > .keyfacts{max-width:none}
/* --prose now EQUALS --wide, so the reading column already spans the full content
width and nothing needs to break out of it. base.css's break-out margin
calc((var(--prose) - min(var(--wide), 100vw - 52px)) / 2)
assumes --prose < the available width; once they are equal it goes POSITIVE at mid
viewports (+74px at 1000px) and would inset these blocks to 808px inside a 956px
column - narrower than the text beside them. Zero it out. */
@media (min-width:1000px){
.prose > .rec-head,
.prose > .toc,
.prose > .paylist,
.prose > .people,
.prose > .keyfacts,
.prose > .paystrip,
.prose .table-wrap{margin-inline:0}
}
/* The key-facts list reads better in two columns once it has the extra room. */
@media (min-width:1000px){
.keyfacts ul{columns:2; column-gap:38px}
.keyfacts li{break-inside:avoid; -webkit-column-break-inside:avoid}
}
/* ------------------------------------------------------------------ related (Lue myös) */
.related{margin:2.2rem 0 1.6rem; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
.related h2{margin:0 0 .6rem; font-size:1.1rem}
.related ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem .9rem}
@media (min-width:700px){.related ul{grid-template-columns:1fr 1fr}}
.related li a{display:block; padding:.35rem 0; border-bottom:1px dashed var(--line); text-decoration:none; font-weight:600}
.related li a:hover{text-decoration:underline}
/* ------------------------------------------------------------------ footer sitemap */
.sitemap{margin:1.4rem 0 .4rem; border-top:1px solid var(--line); padding-top:.9rem; font-size:.86rem}
.sitemap summary{cursor:pointer; font-weight:700; padding:.3rem 0}
.sm-cols{display:grid; gap:1rem 1.6rem; margin-top:.8rem}
@media (min-width:700px){.sm-cols{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.sm-cols{grid-template-columns:repeat(4,1fr)}}
.sm-h{margin:0 0 .3rem; font-weight:700}
.sm-cols ul{list-style:none; margin:0; padding:0}
.sm-cols li{margin:0; padding:.12rem 0}
.sm-cols a{color:inherit; text-decoration:none; opacity:.85}
.sm-cols a:hover{text-decoration:underline; opacity:1}
/* ------------------------------------------------------------------ print */
@media print{
.topbar,.nav,.nav-btn,.skip-link,.hero::after,.featured-cta{display:none}
.hero{background:none;border-bottom:1px solid #ccc}
a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.74em; color:#555}
}