/* Hymiökirja — uutissuomi.fi
   Formspråk: käsin sidottu muistikirja. Kaksi väriä (muste + meripihka),
   leikattu kulma korteissa, iso emoji typografisena kuvana.
   Ei ruudukkoa samanlaisia kortteja: jokainen arvo kantaa oman nimilappunsa. */

:root{
  --muste:#1b2a4a;
  --muste-2:#2f4473;
  --paperi:#fbf7ef;
  --paperi-2:#f3ece0;
  --meripihka:#c8761b;
  --meripihka-2:#edb15c;
  --viiva:#ded3c2;
  --teksti:#20252e;
  --himmea:#5d6472;
  --leveys:1120px;
  --kulma:14px;
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--paperi);
  color:var(--teksti);
  font:17px/1.65 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto }
a{ color:var(--muste-2); text-underline-offset:3px }
a:hover{ color:var(--meripihka) }

.hk-rajaus{ width:min(100% - 32px, var(--leveys)); margin-inline:auto }

/* --- ylätunniste: nauha + kirjanselkä --- */
.hk-ylos{
  background:var(--muste);
  color:var(--paperi);
  border-bottom:5px solid var(--meripihka);
}
.hk-ylos a{ color:var(--paperi) }
.hk-selka{
  display:flex; align-items:center; gap:14px;
  padding:16px 0 12px;
}
.hk-merkki{
  width:46px; height:46px; flex:0 0 46px;
  display:grid; place-items:center;
  background:var(--meripihka); color:var(--muste);
  border-radius:12px 12px 12px 3px;
  font-size:25px; line-height:1;
}
.hk-nimi{ margin:0; font-size:23px; letter-spacing:.2px; font-weight:700 }
.hk-nimi span{ display:block; font-size:12.5px; font-weight:400; opacity:.78; letter-spacing:.8px; text-transform:uppercase }
.hk-valikko{ margin-left:auto }
.hk-valikko ul{ display:flex; flex-wrap:wrap; gap:4px 18px; list-style:none; margin:0; padding:0; font-size:15px }
.hk-valikko a{ text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent }
.hk-valikko a:hover{ border-bottom-color:var(--meripihka) }

/* --- yleistä --- */
main{ padding:26px 0 44px }
.hk-leipa{ max-width:760px }
h1{ font-size:clamp(28px,4.4vw,41px); line-height:1.15; margin:0 0 10px; letter-spacing:-.4px }
h2{ font-size:clamp(21px,2.6vw,27px); margin:34px 0 10px; line-height:1.25 }
h3{ font-size:19px; margin:24px 0 8px }
p{ margin:0 0 15px }

.hk-rivi{ color:var(--himmea); font-size:14.5px; margin:0 0 20px }
.hk-rivi b{ color:var(--teksti); font-weight:600 }

/* --- Lyhyt vastaus: taitettu lappu --- */
.hk-vastaus{
  position:relative;
  background:var(--paperi-2);
  border-left:6px solid var(--meripihka);
  border-radius:3px var(--kulma) var(--kulma) 3px;
  padding:16px 20px 16px 18px;
  margin:0 0 26px;
}
.hk-vastaus b{
  display:block; font-size:12.5px; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--meripihka); margin-bottom:5px;
}
.hk-vastaus p{ margin:0; font-size:17.5px }

/* --- merkityskortti: jokainen arvo oman nimilappunsa kanssa --- */
.hk-kortit{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  margin:18px 0 28px; padding:0; list-style:none;
}
.hk-kortti{
  min-width:0;
  background:#fff;
  border:1px solid var(--viiva);
  border-radius:var(--kulma) var(--kulma) var(--kulma) 3px;
  padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:9px;
}
.hk-kuva{ font-size:40px; line-height:1.1; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif }
.hk-arvo{ min-width:0 }
.hk-arvo .hk-lappu{
  display:block; font-size:11.5px; letter-spacing:.9px; text-transform:uppercase;
  color:var(--himmea); margin-bottom:1px;
}
.hk-arvo .hk-sisalto{ font-size:16px; line-height:1.35; word-break:break-word }
.hk-sanat{ display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none }
.hk-sanat li{
  font-size:13px; background:var(--paperi-2); color:var(--muste);
  border-radius:999px; padding:2px 9px;
}

/* --- taulukko, kun rivit ovat luonnostaan rivejä --- */
.hk-taulu{ width:100%; border-collapse:collapse; margin:16px 0 26px; font-size:16px }
.hk-taulu caption{ text-align:left; font-size:14px; color:var(--himmea); padding-bottom:7px }
.hk-taulu th,.hk-taulu td{ border-bottom:1px solid var(--viiva); padding:9px 10px; text-align:left; vertical-align:top }
.hk-taulu th{ background:var(--paperi-2); font-size:13.5px; letter-spacing:.5px; text-transform:uppercase }
.hk-taulu td:first-child{ font-size:26px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif }
.hk-vieritys{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* --- hubbilista: yksi rivi per sivu, ei esseetä --- */
.hk-lista{ list-style:none; margin:16px 0 28px; padding:0; border-top:1px solid var(--viiva) }
.hk-lista li{ border-bottom:1px solid var(--viiva); padding:11px 2px }
.hk-lista a{ font-weight:600; text-decoration:none }
.hk-lista a:hover{ text-decoration:underline }
.hk-lista span{ display:block; color:var(--himmea); font-size:14.5px; margin-top:2px }

/* --- etusivu --- */
.hk-tervehdys{
  display:grid; gap:20px; align-items:start;
  grid-template-columns:minmax(0,74px) minmax(0,1fr);
  background:var(--paperi-2);
  border-radius:var(--kulma);
  padding:20px; margin:0 0 30px;
}
.hk-tervehdys img{ border-radius:50%; width:74px; height:74px; object-fit:cover }
.hk-tervehdys p{ margin:0 0 9px }
.hk-tervehdys p:last-child{ margin:0 }

.hk-seina{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,138px),1fr));
  margin:0 0 32px; padding:0; list-style:none;
}
.hk-seina a{
  min-width:0; display:block; text-decoration:none; color:var(--teksti);
  background:#fff; border:1px solid var(--viiva);
  border-radius:var(--kulma) 3px var(--kulma) var(--kulma);
  padding:13px 12px;
}
.hk-seina a:hover{ border-color:var(--meripihka) }
.hk-seina .hk-iso{ font-size:30px; line-height:1.2; display:block; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif }
.hk-seina .hk-alle{ display:block; font-size:14.5px; margin-top:5px; font-weight:600 }

.hk-muistiinpanot{ border-left:3px solid var(--viiva); padding-left:17px; margin:0 0 30px }
.hk-muistiinpanot h2{ margin-top:0 }
.hk-muistiinpanot article{ margin-bottom:15px }
.hk-muistiinpanot time{ display:block; font-size:13px; color:var(--himmea); letter-spacing:.4px }
.hk-muistiinpanot p{ margin:2px 0 0 }

/* --- byline --- */
.hk-nimikirjoitus{
  display:flex; gap:12px; align-items:center;
  border-top:1px solid var(--viiva); border-bottom:1px solid var(--viiva);
  padding:13px 0; margin:30px 0;
}
.hk-nimikirjoitus img{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 52px }
.hk-nimikirjoitus div{ min-width:0 }
.hk-nimikirjoitus b{ display:block }
.hk-nimikirjoitus span{ color:var(--himmea); font-size:14.5px }

/* --- alatunniste --- */
.hk-alas{
  background:var(--muste); color:var(--paperi);
  margin-top:40px; padding:26px 0 30px; font-size:15px;
}
.hk-alas a{ color:var(--meripihka-2) }
.hk-alas ul{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px }
.hk-alas .hk-copy{ opacity:.82; margin:0 }

@media (max-width:640px){
  body{ font-size:16.5px }
  .hk-selka{ flex-wrap:wrap; gap:10px }
  .hk-valikko{ margin-left:0; width:100% }
  .hk-tervehdys{ grid-template-columns:minmax(0,1fr) }
  .hk-tervehdys img{ width:62px; height:62px }
}

/* --- alatunnisteen ruudukko: egen struktur, inte en lista + tva stycken --- */
.hk-alaruudukko{
  display:grid; gap:26px 34px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  padding-bottom:20px; border-bottom:1px solid rgba(251,247,239,.18); margin-bottom:14px;
}
.hk-alaosa{ min-width:0 }
.hk-alaotsikko{ font-size:12.5px; letter-spacing:1.1px; text-transform:uppercase; margin:0 0 9px; color:var(--meripihka-2) }
.hk-alamerkki{ margin:0 0 10px; display:flex; align-items:center; gap:10px }
.hk-alamerkki img{ border-radius:9px }
.hk-alamerkki figcaption{ font-size:17px; font-weight:700 }
.hk-alalinkki{ display:block; padding:3px 0; font-size:15px }
.hk-lahde{ margin:0; font-size:14.5px }
.hk-lahde dt{ font-weight:700; margin-top:7px }
.hk-lahde dt:first-child{ margin-top:0 }
.hk-lahde dd{ margin:0; opacity:.84 }
.hk-viimeinen{ font-size:14px }