/* Aamukooste — §5.1. Ei ulkoisia fontteja, ei skriptejä.
   Kategoriasuodatin on pelkkää CSS:ää: piilotetut radiot ennen ruudukkoa. */
:root{
  --paperi:#f5f1e8; --muste:#1f1d1a; --aksentti:#b23a2e; --teal:#2f6d72;
  --kulta:#caa14a; --kortti:#fffefb; --viiva:#ddd5c6; --harmaa:#8c8474;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paperi);color:var(--muste);font-family:var(--sans);
  font-size:17px;line-height:1.6}
a{color:var(--aksentti);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);line-height:1.2;margin:0 0 .4em}

.masthead{max-width:1180px;margin:0 auto;padding:28px 20px 14px;
  border-bottom:3px double var(--muste)}
.logo{display:block;font-family:var(--serif);font-size:clamp(38px,7vw,68px);
  font-weight:700;letter-spacing:-.02em;color:var(--muste);text-align:center}
.logo:hover{text-decoration:none}
.alaotsikko{margin:.2em 0 .8em;text-align:center;color:var(--harmaa);
  font-size:14px;letter-spacing:.04em}
.paivays{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  border-top:1px solid var(--viiva);padding-top:8px;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--harmaa)}

main{max-width:1180px;margin:0 auto;padding:0 20px 40px}
.intro{max-width:1180px;margin:22px auto 0;padding:0 20px;
  column-gap:32px;color:#3a352e}
.intro p{margin:0 0 .8em}
@media(min-width:900px){.intro{columns:3}}

.lead{border-bottom:1px solid var(--viiva);padding:26px 0 22px;margin-bottom:18px}
.lead h1{font-size:clamp(28px,4.4vw,46px)}
.lead h1 a{color:var(--muste)}
.dek{color:#3a352e;font-size:1.02em;margin:.2em 0 .8em}
.lue{font-size:14px;letter-spacing:.03em}

.kicker{margin:0 0 .3em;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--teal)}
.kicker.cat-suljetut,.kicker.cat-media{color:var(--aksentti)}
.kicker.cat-vinkit,.kicker.cat-koodi{color:var(--kulta)}
.kicker.cat-mini-pc{color:var(--muste)}

.suodatin-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.suodatin{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;
  padding-bottom:12px;border-bottom:1px solid var(--viiva)}
.suodatin label{cursor:pointer;border:1px solid var(--viiva);border-radius:999px;
  padding:5px 13px;font-size:13px;letter-spacing:.03em;background:var(--kortti);
  color:var(--harmaa)}
.suodatin label:hover{border-color:var(--harmaa);color:var(--muste)}

.ruudukko{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.ruudukko{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ruudukko{grid-template-columns:repeat(3,1fr)}}
.kortti{background:var(--kortti);border:1px solid var(--viiva);border-radius:4px;
  padding:16px 16px 14px}
.kortti h2{font-size:20px}
.kortti h2 a{color:var(--muste)}
.kortti .dek{font-size:15px}

.kuva{margin:0 0 12px}
.kuva svg{width:100%;height:auto;display:block;border:1px solid var(--viiva);
  border-radius:3px;background:var(--paperi)}
.lead-kuva{max-width:620px}

.juttu{max-width:760px}
.paluu{font-size:14px;margin:18px 0 6px}
.juttu h1{font-size:clamp(26px,3.6vw,38px);margin-top:.2em}
.juttu p{margin:0 0 1em}

.taulukko-kehys{overflow-x:auto;margin:22px 0;border:1px solid var(--viiva);
  border-radius:4px;background:var(--kortti)}
table.vertailu{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
table.vertailu th,table.vertailu td{border-bottom:1px solid var(--viiva);
  padding:7px 10px;text-align:left;vertical-align:top}
table.vertailu thead th{position:sticky;top:0;background:var(--paperi);
  font-family:var(--sans);font-size:13px;letter-spacing:.02em}
table.vertailu tbody th{font-weight:600;color:var(--harmaa);white-space:nowrap}
table.vertailu .hi{background:rgba(178,58,46,.06)}
table.vertailu thead .hi{border-bottom:2px solid var(--aksentti)}

.kaavio{margin:22px 0}
.kaavio svg{width:100%;height:auto;border:1px solid var(--viiva);border-radius:4px}
.kaavio figcaption{font-size:13px;color:var(--harmaa);margin-top:8px}

.lahteet{margin:26px 0 0;border-top:1px solid var(--viiva);padding-top:14px}
.lahteet h2{font-size:15px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--harmaa);font-family:var(--sans)}
.lahteet ul{margin:0;padding-left:18px;font-size:14px}
.lahteet li{margin:.25em 0;word-break:break-word}

.kioski{max-width:900px}
.numero{border-bottom:1px solid var(--viiva);padding:18px 0}
.numero h2{font-size:22px}
.numero h2 a{color:var(--muste)}
.otsikot{list-style:none;margin:.4em 0 0;padding:0;font-size:15px}
.otsikot li{margin:.2em 0}
.palsta{display:inline-block;min-width:92px;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--harmaa)}
.tyhja{color:var(--harmaa)}

.footer{max-width:1180px;margin:0 auto;padding:18px 20px 40px;
  border-top:1px solid var(--viiva);font-size:13px;color:var(--harmaa)}

/* suodatin: generoitu palstoista */
#f-mallit:checked ~ .suodatin label[for="f-mallit"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-mallit:checked ~ .ruudukko .kortti:not(.c-mallit){display:none}
#f-tyokalut:checked ~ .suodatin label[for="f-tyokalut"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-tyokalut:checked ~ .ruudukko .kortti:not(.c-tyokalut){display:none}
#f-laitteisto:checked ~ .suodatin label[for="f-laitteisto"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-laitteisto:checked ~ .ruudukko .kortti:not(.c-laitteisto){display:none}
#f-benchmarkit:checked ~ .suodatin label[for="f-benchmarkit"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-benchmarkit:checked ~ .ruudukko .kortti:not(.c-benchmarkit){display:none}
#f-suljetut:checked ~ .suodatin label[for="f-suljetut"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-suljetut:checked ~ .ruudukko .kortti:not(.c-suljetut){display:none}
#f-media:checked ~ .suodatin label[for="f-media"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-media:checked ~ .ruudukko .kortti:not(.c-media){display:none}
#f-alustat:checked ~ .suodatin label[for="f-alustat"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-alustat:checked ~ .ruudukko .kortti:not(.c-alustat){display:none}
#f-vinkit:checked ~ .suodatin label[for="f-vinkit"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-vinkit:checked ~ .ruudukko .kortti:not(.c-vinkit){display:none}
#f-koodi:checked ~ .suodatin label[for="f-koodi"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-koodi:checked ~ .ruudukko .kortti:not(.c-koodi){display:none}
#f-mini-pc:checked ~ .suodatin label[for="f-mini-pc"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}
#f-mini-pc:checked ~ .ruudukko .kortti:not(.c-mini-pc){display:none}
#f-kaikki:checked ~ .suodatin label[for="f-kaikki"]{background:var(--muste);color:var(--paperi);border-color:var(--muste)}