/* =================================================================
   samunystrom.fi – yhteinen tyylitiedosto
   Kaikki neljä sivua käyttävät tätä. Ulkoasumuutos tehdään tänne,
   ei yksittäisiin sivuihin.
   ================================================================= */

/* ---------- Perusta ---------- */
:root{
  --muste:#1a1a1a;          /* leipäteksti */
  --muste-haalea:#5a5550;   /* toissijainen teksti */
  --paperi:#fbf9f5;         /* sivun "paperi" */
  --paperi-syva:#f2ede4;    /* korostuslaatikot */
  --poyta:#141414;          /* tumma tausta paperin takana */
  --puna:#8c1d18;           /* otsikkokuvan punainen */
  --viiva:#d6cfc2;
  --leveys:1180px;          /* paperin suurin leveys */
  --palsta:210px;           /* sivupalstojen leveys */
  --reuna:clamp(12px,3vw,48px);  /* paljonko taustaa näkyy paperin ympärillä */
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
/* Varmistaa, että hidden-attribuutti piilottaa myös ne elementit, joille
   on erikseen määritelty display (esim. .medialista li on grid). */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  /* Taustana vuoden 1914 ilmoitussivu, tummennettuna niin että "paperi" erottuu.
     Säädä .82 pienemmäksi, jos haluat lehden näkyvämmin esiin. */
  background-color:var(--poyta);
  background-image:
    linear-gradient(rgba(18,17,15,.82),rgba(18,17,15,.82)),
    url('kuvat/tausta2.jpg');
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--muste);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  padding:0 var(--reuna);   /* pitää taustan näkyvissä myös kapeilla näytöillä */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--puna);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.06em}
a:hover{background:#f6e9e7}
a:focus-visible{outline:2px solid var(--puna);outline-offset:2px}

/* ---------- Paperi ---------- */
.paperi{
  max-width:var(--leveys);
  margin:var(--reuna) auto;
  background:var(--paperi);
  border:1px solid #000;
  box-shadow:0 0 40px rgba(0,0,0,.55);
}
.sisennys{padding:0 clamp(16px,4vw,44px)}

/* ---------- Ylätunniste ---------- */
.ylatunniste{padding:clamp(20px,4vw,40px) 0 0;text-align:center}
.ylatunniste img{margin:0 auto;width:min(547px,86%)}
.ylatunniste .nimi{
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muste-haalea);margin:18px 0 0;
}

/* ---------- Navigaatio ---------- */
.navi{
  margin-top:22px;
  border-top:3px double #000;border-bottom:3px double #000;
  background:var(--paperi);
}
.navi ul{
  list-style:none;margin:0 auto;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  max-width:var(--leveys);
}
.navi a{
  display:block;padding:12px 20px;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muste);text-decoration:none;
}
.navi a:hover{background:var(--paperi-syva);color:var(--puna)}
.navi a[aria-current="page"]{color:var(--puna);box-shadow:inset 0 -3px 0 var(--puna)}

/* ---------- Runko ---------- */
.runko{
  display:grid;
  grid-template-columns:var(--palsta) minmax(0,1fr) var(--palsta);
  gap:clamp(20px,3vw,38px);
  padding-top:34px;padding-bottom:40px;
  align-items:start;
}

/* ---------- Sivupalsta ---------- */
.sivupalsta{font-size:.92rem}
/* Vasen palsta seuraa mukana vieritettäessä, jotta yhteystiedot ovat
   ulottuvilla myös pitkän julkaisuluettelon puolivälissä. */
.vasen-palsta{position:sticky;top:var(--reuna)}
.muotokuva{border:1px solid var(--viiva)}
.yhteys{
  margin:20px 0;padding:16px 14px;
  background:var(--paperi-syva);border:1px solid var(--viiva);
  text-align:center;line-height:1.5;
}
.yhteys h2{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 10px;color:var(--muste-haalea);font-weight:700;
}
.yhteys p{margin:0 0 8px}
.yhteys p:last-child{margin-bottom:0}

/* Lehtileikkeet */
.leike{margin:0 0 22px}
.leike img{margin:0 auto;border:1px solid var(--viiva)}

/* Oikea palsta täytetään ilmoituksilla sivun alalaitaan asti.
   Nauha on absoluuttisesti asemoitu, joten se ei kasvata riviä, ja
   ylimenevä osa rajautuu pois – palsta päättyy aina tasan sivun mukana. */
.oikea-palsta{position:relative;align-self:stretch;overflow:hidden}
.palstanauha{position:absolute;top:0;left:0;right:0}

/* ---------- Pääsisältö ---------- */
.sisalto h1{
  font-size:clamp(1.7rem,3.4vw,2.3rem);
  line-height:1.2;margin:0 0 18px;font-weight:400;
  padding-bottom:14px;border-bottom:1px solid var(--viiva);
}
.sisalto h2{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--puna);margin:34px 0 10px;font-weight:700;
}
.sisalto p{margin:0 0 1.1em;hyphens:auto}

/* Anfangi ja suurempi aloituskappale vain etusivulla */
.sisalto--essee>p:first-of-type{font-size:1.06rem}
.sisalto--essee>p:first-of-type::first-letter{
  float:left;font-size:3.1em;line-height:.82;padding:.05em .09em 0 0;color:var(--puna);
}

/* ---------- Julkaisut-sivu ---------- */

/* Sisällysluettelo sivun alussa */
.sisallys{
  margin:0 0 10px;padding:14px 18px;
  background:var(--paperi-syva);border:1px solid var(--viiva);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.05em;
}
.sisallys ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px}
.sisallys a{color:var(--muste)}
.sisallys a:hover{color:var(--puna)}

/* Selailupalkki: järjestys ja teemat */
.selain{
  margin:0 0 6px;padding:14px 18px;
  background:var(--paperi-syva);border:1px solid var(--viiva);
  font-family:var(--sans);
}
.selain-rivi{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  margin:0 0 10px;
}
.selain-rivi:last-child{margin-bottom:0}
.selain-otsake{
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muste-haalea);font-weight:700;
  flex:0 0 5.2em;
}
.selain button{
  font:inherit;font-size:.74rem;
  padding:5px 11px;cursor:pointer;
  color:var(--muste);background:var(--paperi);
  border:1px solid var(--viiva);border-radius:0;
}
.selain button:hover{border-color:var(--puna);color:var(--puna)}
.selain button[aria-pressed="true"]{
  background:var(--puna);border-color:var(--puna);color:var(--paperi);
}
.selain button:focus-visible{outline:2px solid var(--puna);outline-offset:2px}
.laskuri{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muste-haalea);margin:14px 0 0;text-align:center;
}

/* Osaston otsikko */
.osasto{
  font-family:var(--sans);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muste);
  margin:44px 0 0;padding:14px 0;
  border-top:3px double #000;border-bottom:1px solid var(--viiva);
  text-align:center;
  scroll-margin-top:16px;
}

/* Yksi teos: kannet ylhäällä, viitetiedot alla */
.kirja{
  padding:30px 0;
  border-bottom:1px solid var(--viiva);
}
.kirja:last-child{border-bottom:0}
.kannet{
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;align-items:flex-end;
  margin:0 0 16px;
}
.kannet img{
  max-height:135px;max-width:100%;width:auto;height:auto;
  border:1px solid var(--viiva);
}
/* Mitä vähemmän kuvia, sitä suurempina ne näytetään */
.kannet img:only-child{max-height:300px}
.kannet img:first-child:nth-last-child(2),
.kannet img:first-child:nth-last-child(2) ~ img{max-height:185px}
.kannet img:first-child:nth-last-child(3),
.kannet img:first-child:nth-last-child(3) ~ img{max-height:150px}

.viite{
  text-align:center;margin:0;
  font-size:.97rem;line-height:1.55;
  max-width:52ch;margin-inline:auto;
}
.viite .lisays{display:block;margin-top:.5em;color:var(--muste-haalea);font-size:.92em}

/* ---------- Esitelmät-sivu ---------- */

.tapahtuma{
  padding:26px 0;
  border-bottom:1px solid var(--viiva);
}
.tapahtuma:last-of-type{border-bottom:0}
.tapahtumakuva{
  margin:0 auto 16px;
  border:1px solid var(--viiva);
  max-height:230px;width:auto;
}
.tapahtuma h3{
  font-family:var(--serif);font-size:1.16rem;font-weight:700;line-height:1.3;
  margin:0 0 8px;text-align:center;
}
.tapahtuma .paikka{
  margin:0 0 10px;text-align:center;
  color:var(--muste-haalea);font-size:.95rem;
}
.tapahtuma .kuvaus{
  margin:12px auto 0;max-width:52ch;
  font-size:.95rem;
}
.ajat{list-style:none;margin:0;padding:0;text-align:center}
.ajat li{margin:0 0 6px}
.ajat li:last-child{margin-bottom:0}
.aika{
  display:inline-block;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;
  background:var(--paperi-syva);border:1px solid var(--viiva);
  padding:3px 9px;margin-right:8px;
}
.ei-tapahtumia{
  text-align:center;font-style:italic;color:var(--muste-haalea);
  padding:24px 0;margin:0;
}

/* ---------- Media-sivu ---------- */

.medialista{list-style:none;margin:0;padding:0}
.medialista li{
  display:grid;grid-template-columns:3.6em minmax(0,1fr);gap:0 14px;
  padding:13px 0;border-bottom:1px solid var(--viiva);
  font-size:.95rem;line-height:1.5;
}
.medialista li:last-child{border-bottom:0}
.medialista .vuosi{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
  color:var(--muste-haalea);padding-top:.2em;
}
.medialista .laji{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--puna);display:block;margin-bottom:2px;
}

/* Ristiinlinkitys sivujen välillä */
.viereinen{
  margin:34px 0 0;padding:16px 18px;
  background:var(--paperi-syva);border:1px solid var(--viiva);
  text-align:center;font-size:.95rem;
}
.viereinen p{margin:0}

/* Artikkeliluettelo */
.artikkelit{list-style:none;margin:0;padding:0}
.artikkelit li{
  padding:14px 0;border-bottom:1px solid var(--viiva);
  font-size:.97rem;line-height:1.55;
}
.artikkelit li:last-child{border-bottom:0}

/* Paluu ylös */
.yloslinkki{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;margin:28px 0 0;
}

/* ---------- Alatunniste ---------- */
.alatunniste{border-top:3px double #000;padding:0 0 26px;text-align:center}
.alatunniste img{margin:0 auto}
.alatunniste .tiedot{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;
  color:var(--muste-haalea);padding:16px;
}

/* ---------- Responsiivisuus ---------- */
@media (max-width:1080px){
  .runko{grid-template-columns:var(--palsta) minmax(0,1fr)}
  .oikea-palsta{display:none}
}
@media (max-width:720px){
  body{font-size:16px;background-attachment:scroll} /* fixed nykii iOS-Safarissa */
  .runko{grid-template-columns:minmax(0,1fr);padding-top:24px}
  .vasen-palsta{position:static}
  .sivupalsta{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}
  .sivupalsta .leike{display:none}
  .navi a{padding:11px 13px;font-size:.72rem}
  .kannet img{max-height:150px}
  .kannet img:only-child{max-height:230px}
  .selain-otsake{flex:0 0 100%}
}
@media (max-width:460px){
  .sivupalsta{grid-template-columns:minmax(0,1fr)}
  .muotokuva{max-width:220px;margin:0 auto}
}
@media print{
  body{background:#fff;padding:0}
  .paperi{box-shadow:none;border:0;margin:0;max-width:none}
  .leike,.navi,.yloslinkki,.selain,.laskuri{display:none}
  .oikea-palsta{display:none}
}