/* ============================================================================
   mgakasinot.me — design layer
   A licence REFERENCE WORK, not a comparison site. The visual language is an
   archive / almanac: limestone ground, forest ink, brass rules. Deliberately
   unlike the lead's navy-and-gold card deck.

   Loaded AFTER base.css and site.css. Presentation only — no markup or copy
   depends on this file, so it can be edited without touching the generator.
   ========================================================================= */

/* ---------------------------------------------------------------- rhythm */
body.theme-viljo{
  --rule:1px solid var(--line);
  --rule-strong:2px solid var(--lake-700);
  --paper:#f7f8f4;
  --paper-2:#eef3f0;
  background:var(--paper);
}

body.theme-viljo .content{background:var(--paper)}

/* A short lingonberry bar above every H2 — one warm cue on a cool page. */
body.theme-viljo .content .wrap > section > h2{
  padding-top:.55em;
  border-top:0;
  letter-spacing:-.02em;
  position:relative;
}
body.theme-viljo .content .wrap > section > h2::before{
  content:"";display:block;width:44px;height:5px;border-radius:3px;
  background:var(--berry);margin-bottom:.55em;
}
body.theme-viljo .content .wrap h3{
  color:var(--lake-700);
  letter-spacing:-.006em;
}


/* ---------------------------------------------------------------- hero */
body.theme-viljo .hero{
  background:var(--lake-900);
  border-bottom:4px solid var(--berry);
}
body.theme-viljo .hero__bg img{
  filter:saturate(.72) contrast(1.04) brightness(.62);
}
body.theme-viljo .hero h1{
  letter-spacing:-.022em;
  text-wrap:balance;
}
body.theme-viljo .hero .eyebrow{
  color:var(--berry-2);
  letter-spacing:.17em;
  font-size:.72rem;
}

/* ---------------------------------------------------------------- keyfacts */
body.theme-viljo .keyfacts{
  background:var(--paper-2);
  border:var(--rule);
  border-left:4px solid var(--berry);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
body.theme-viljo .keyfacts li::marker{color:var(--berry)}

/* ---------------------------------------------------------------- toplist */
body.theme-viljo .rec-list{counter-reset:rec}
body.theme-viljo .rec-card{
  background:#fff;
  border:var(--rule);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(13,31,25,.05);
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
body.theme-viljo .rec-card:hover{
  box-shadow:0 10px 30px rgba(13,31,25,.10);
  transform:translateY(-2px);
}
/* no rank badge: the commercial list is a fixed rotation, not a ranking */
body.theme-viljo .rec-card::before{content:none}
body.theme-viljo .rec-card{position:relative}

/* the non-EEA labels must read as a warning, not decoration */
body.theme-viljo .pill--no{
  background:var(--no-bg);
  border:1px solid var(--no-line);
  color:#8c2f28;
  font-weight:600;
}

/* ---------------------------------------------------------------- figures */
body.theme-viljo figure img{
  border-radius:var(--radius-sm);
  border:var(--rule);
}
body.theme-viljo figcaption{
  border-left:3px solid var(--berry);
  padding-left:.7rem;
  margin-top:.55rem;
  color:var(--ink-soft);
  font-size:.88rem;
  line-height:1.45;
}

/* ---------------------------------------------------------------- tables */
body.theme-viljo table{border-collapse:collapse;width:100%}
body.theme-viljo caption{
  caption-side:top;
  text-align:left;
  font-weight:700;
  color:var(--lake-700);
  padding-bottom:.5rem;
  border-bottom:2px solid var(--berry);
  margin-bottom:.6rem;
}
body.theme-viljo thead th{
  background:var(--lake-800);
  color:#fff;
  font-size:.86rem;
  letter-spacing:.02em;
}
body.theme-viljo tbody tr:nth-child(even){background:var(--paper-2)}
body.theme-viljo td,body.theme-viljo th{border:var(--rule);padding:.62rem .7rem}

/* ---------------------------------------------------------------- steps */
body.theme-viljo ol.steps{list-style:none;counter-reset:st;padding-left:0}
body.theme-viljo ol.steps > li{
  counter-increment:st;
  position:relative;
  padding:0 0 1rem 3rem;
  margin:0;
}
body.theme-viljo ol.steps > li::before{
  content:counter(st);
  position:absolute; left:0; top:-2px;
  width:2rem; height:2rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--paper-2);
  border:2px solid var(--berry);
  color:var(--lake-700);
  font:700 .88rem/1 var(--font-body);
}
/* connecting spine between steps */
body.theme-viljo ol.steps > li:not(:last-child)::after{
  content:"";
  position:absolute; left:calc(1rem - 1px); top:2rem; bottom:.35rem;
  width:2px; background:var(--line-strong);
}

/* ---------------------------------------------------------------- notes */
body.theme-viljo .note{
  background:var(--paper-2);
  border:var(--rule);
  border-left:4px solid var(--line-strong);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
body.theme-viljo .note--warn{
  background:var(--warn-bg);
  border-left-color:var(--berry);
}

/* ---------------------------------------------------------------- toc */
body.theme-viljo .toc-wrap{
  background:var(--paper-2);
  border:var(--rule);
  border-radius:var(--radius-sm);
  padding:.55rem .9rem;
}
body.theme-viljo .toc-wrap summary{
  cursor:pointer;
  font-weight:650;
  color:var(--lake-700);
  letter-spacing:.01em;
}
body.theme-viljo .toc{border:0;background:transparent;padding:.4rem 0 0}
body.theme-viljo .toc ol{columns:2;column-gap:2rem}
@media (max-width:640px){body.theme-viljo .toc ol{columns:1}}

/* ---------------------------------------------------------------- chips */
body.theme-viljo .chips ul{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0}
body.theme-viljo .chips a{
  display:inline-block;
  padding:.3rem .7rem;
  border:var(--rule);
  border-radius:999px;
  background:#fff;
  font-size:.84rem;
  color:var(--lake-700);
  text-decoration:none;
}
body.theme-viljo .chips a:hover{border-color:var(--berry);background:var(--paper-2)}

/* ---------------------------------------------------------------- footer */
body.theme-viljo .site-footer{
  background:var(--lake-900);
  color:#cfd8d2;
  border-top:4px solid var(--berry);
}
body.theme-viljo .site-footer a{color:#e7ece8}
body.theme-viljo .site-footer h3{color:var(--berry-2);letter-spacing:.04em;font-size:.9rem}

/* ---------------------------------------------------------------- header */
body.theme-viljo .site-header{
  background:var(--lake-900);
  border-bottom:1px solid rgba(255,255,255,.10);
}
body.theme-viljo .site-header .brand__text{color:#fff}
body.theme-viljo .site-header .brand__text small{color:var(--berry-2);letter-spacing:.09em}
body.theme-viljo .nav a{color:#dfe6e1}
body.theme-viljo .nav a:hover,body.theme-viljo .nav a[aria-current]{color:var(--berry-2)}

/* ---------------------------------------------------------------- print */
@media print{
  body.theme-viljo .site-header,body.theme-viljo .site-footer,
  body.theme-viljo .chips,body.theme-viljo .rec-list{display:none}
  body.theme-viljo .content .wrap > section > h2{border-bottom:1px solid #000}
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  body.theme-viljo .rec-card{transition:none}
  body.theme-viljo .rec-card:hover{transform:none}
}

/* ---------------------------------------------------------------- viljo: light header, card grid
   Overrides the archive overlay above: this site is bright and practical, not a reading room. */
body.theme-viljo .site-header{background:rgba(247,248,244,.94);border-bottom:1px solid var(--line);
  border-top:4px solid var(--berry);backdrop-filter:saturate(1.4) blur(8px)}
body.theme-viljo .site-header .brand__text{color:var(--ink)}
body.theme-viljo .site-header .brand__text b{color:var(--lake-700)}
body.theme-viljo .site-header .brand__text small{color:var(--ink-faint);letter-spacing:.08em}
body.theme-viljo .nav a{color:var(--ink-soft);border-radius:10px}
body.theme-viljo .nav a:hover{color:var(--ink);background:var(--surface-2)}
body.theme-viljo .nav a[aria-current="page"]{color:var(--lake-700);background:var(--surface-2);
  box-shadow:inset 0 -2px 0 var(--berry)}
body.theme-viljo .nav-btn{color:var(--ink);border-color:var(--line)}
body.theme-viljo .topbar{background:var(--lake-900)}

/* toplist as a 3-up card grid instead of rows */
body.theme-viljo .rec-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
body.theme-viljo .rec-card{grid-template-columns:1fr;align-items:stretch;padding:22px 22px 20px;
  border-top:4px solid var(--lake-700)}
body.theme-viljo .rec-card:nth-child(3n+2){border-top-color:var(--berry)}
body.theme-viljo .rec-card:nth-child(3n){border-top-color:var(--lake-500)}
body.theme-viljo .rec-logo{min-height:64px;display:flex;align-items:center;margin-bottom:10px}
body.theme-viljo .rec-cta{margin-top:auto;padding-top:14px}
body.theme-viljo .rec-cta .btn{width:100%;text-align:center}

/* hero: photo with a cool wash, panel card clean white */
body.theme-viljo .hero{border-bottom:0}
body.theme-viljo .hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,42,69,.86) 0%,rgba(11,42,69,.62) 55%,rgba(11,42,69,.35) 100%);z-index:1}
body.theme-viljo .hero__inner{position:relative;z-index:2}
body.theme-viljo .hero .eyebrow{color:var(--berry-2);letter-spacing:.14em}
body.theme-viljo .hero-feat{background:#fff;color:var(--ink);border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(11,42,69,.35);border:0}
body.theme-viljo .hero-feat .hero-feat__kicker{color:var(--berry)}
body.theme-viljo .hero-feat dt{color:var(--ink-faint)}
body.theme-viljo .hero-feat dd{color:var(--ink)}

/* key facts strip on birch, berry dots */
body.theme-viljo .facts{background:var(--surface);border-bottom:1px solid var(--line)}
body.theme-viljo .facts__dot{background:var(--berry)}

/* chips as soft pills */
body.theme-viljo .chips a{border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--lake-700)}
body.theme-viljo .chips a:hover{border-color:var(--lake-500);background:var(--info-bg)}

/* tables: lake header */
body.theme-viljo thead th{background:var(--lake-800);color:#fff}
body.theme-viljo caption{color:var(--ink-soft)}

/* steps: berry numbers on white */
body.theme-viljo ol.steps > li::before{background:var(--berry);color:#fff;border:0}

/* mobile: keep the toplist near the second fold */
@media (max-width:700px){
  body.theme-viljo .facts ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  body.theme-viljo .facts li{font-size:.86rem;line-height:1.4}
  body.theme-viljo .facts li:last-child{grid-column:1/-1}
  body.theme-viljo .chips{display:none}
  body.theme-viljo .hero-feat{padding:18px}
  body.theme-viljo .hero .lead{font-size:1.05rem}
}