/* ------------------------------------------------------------------ palette */
/* base.css ships no palette for this cluster and is read-only, so it is defined
   here. build.py also strips the other clusters' palette rules on copy (SS2b). */
.theme-kotiutus{
  --brand:#123b32; --brand-2:#1d5a4b; --brand-3:#0c2a23; --brand-ink:#fff;
  --accent:#c07d2a; --accent-2:#dc9c46; --accent-ink:#231604;
  --bg:#f7f5ee; --surface:#fff; --surface-2:#f4f1e7; --surface-3:#ebe6d8;
  --line:#e2dccd; --line-soft:#eee9dc; --line-strong:#cec6b2;
  --info-bg:#edf2ef; --ring:0 0 0 3px rgba(192,125,42,.32);
  /* Reading column == full content width, so running text lines up with the toplist,
     the comparison table and every boxed block. Set the VARIABLE, never
     .prose{max-width} - base.css derives its geometry from --prose/--wide and
     overriding max-width desyncs the two. */
  --prose:var(--wide);
}

/* Serif display face for headings only; body stays the system sans for legibility. */
.theme-kotiutus{--font-head:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif}
.theme-kotiutus h1,.theme-kotiutus h2,.theme-kotiutus h3,
.theme-kotiutus .featured-name,.theme-kotiutus .rec-body h3{
  font-family:var(--font-head); font-weight:600; letter-spacing:-.008em;
}

/* Float containment for content sections. flow-root, never overflow:hidden. */
.prose>section{display:flow-root}

/* ------------------------------------------------------------------ hero */
/* Light hero on paper. The lead domain uses a dark navy split hero - this must not
   look like it, so: centred, on cream, with a serif display H1.
   The FLUX band sits along the BOTTOM edge as a wide horizon strip. An earlier
   version floated it right with a horizontal mask, which was written for a
   left-aligned hero: under `hero-center` the artwork's sun landed behind the byline
   as a stray pale circle, and the H1's left rule sat far from the centred text. */
.hero{
  position:relative; background:var(--surface-2);
  border-bottom:1px solid var(--line);
  padding:40px 0 34px;
}
/* The hero photograph is a real element (`.heroband`, emitted by build.py right after
   the hero on the homepage), NOT a .hero::after. Under `hero-center` the featured
   affiliate card sits inside .hero, so a bottom-anchored pseudo-element landed several
   hundred pixels below the fold instead of under the headline. */
.heroband{
  height:200px; background:url(/img/hero-band.webp) center 44%/cover no-repeat;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background-color:var(--surface-2);
}
@media (max-width:860px){.heroband{height:150px}}
@media (max-width:480px){.heroband{height:118px}}
.hero .wrap{position:relative; z-index:1}
.hero h1{margin:0 0 .34em; font-size:clamp(1.95rem,1.25rem + 2.3vw,3rem); line-height:1.12}
/* Centred accent rule above the H1, in place of the lead site's badge row. */
.hero h1::before{
  content:""; display:block; width:56px; height:4px; background:var(--accent);
  margin:0 auto .6em;
}
.hero .lead{font-size:1.09rem; color:var(--ink-soft); max-width:62ch; margin:0 auto 18px}
@media (max-width:680px){
  .hero{padding:26px 0 24px}
  .hero h1::before{width:44px; height:3px}
  /* Keep the H1 centred but left-align the running text: a seven-line centred
     paragraph at 375px is measurably harder to read than a ragged-right one. */
  .hero .lead,.hero .byline{text-align:left}
  .hero .byline{justify-content:flex-start}
}

/* ------------------------------------------------------------------ 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 <p class="foot-h">, not <h2>: 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-kotiutus.hero-center .prose > .keyfacts,
.theme-kotiutus.hero-center .hero .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}
}

/* ------------------------------------------------------------------ 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}
}