/* Kirjoituspöydän Sanomat – yhteiset tyylit
   Fontit ladataan omalta palvelimelta (ei Google Fontsia), joten kävijöiden tietoja ei siirry kolmansille osapuolille. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'UnifrakturMaguntia';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/unifrakturmaguntia-latin-400-normal.woff2) format('woff2');
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #EFEADF; color: #1B1A17; }
img { max-width: 100%; height: auto; }
a { color: #1B1A17; }
a:hover { color: #B3261E; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #B3261E; outline-offset: 2px; }
h1, h2, h3, p, td, dd, dt, span { overflow-wrap: break-word; }

/* Etusivu */
.dropcap::first-letter { float: left; font-family: 'Newsreader', serif; font-weight: 800; font-size: 4.6em; line-height: .8; padding: 6px 8px 0 0; }
.navlink { text-decoration: none; padding: 12px 10px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.navlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.qa p { margin: 0 0 14px; }

/* Kirjasivut */
.kuvaus p { margin: 0 0 12px; }
.nayte p { margin: 0; text-indent: 1.4em; }
.nayte p.eka { text-indent: 0; }
.nayte p.eka::first-letter { float: left; font-weight: 800; font-size: 3.6em; line-height: .8; padding: 6px 8px 0 0; }

/* Tekstisivut (tietosuoja ym.) */
.teksti h2 { margin: 36px 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase; }
.teksti p, .teksti li { margin: 0 0 12px; }
.teksti ul { padding-left: 1.2em; margin: 0 0 12px; }

/* Jurmo-ristikko */
.ruudukko{--koko:min(40px,calc((100vw - 60px) / 13));display:grid;grid-template-columns:repeat(13,var(--koko));grid-auto-rows:var(--koko);gap:1px;width:max-content;background:#1B1A17;border:2px solid #1B1A17}
.ruudukko .musta{background:#1B1A17}
.ruudukko .ruutu{position:relative;background:#FBF8F1}
.ruudukko .ruutu.korostus{background:#F1D9CF}
.ruudukko .ruutu.aktiivinen{background:#E3A996}
.ruudukko .nro{position:absolute;top:1px;left:2px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:max(9px,calc(var(--koko) * 0.27));line-height:1;pointer-events:none}
.ruudukko input{display:block;width:100%;height:100%;box-sizing:border-box;margin:0;padding:12% 0 0;border:0;border-radius:0;background:transparent;text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:max(16px,calc(var(--koko) * 0.56));text-transform:uppercase;color:#1B1A17;caret-color:#B3261E}
.ruudukko input:focus{outline:none}
.ruudukko .ruutu.vaarin input{color:#B3261E;text-decoration:line-through}
.vihjeet{list-style:none;margin:0;padding:0}
.vihjeet li{border-bottom:1px dotted #1B1A17}
.vihje{display:flex;gap:10px;width:100%;min-height:44px;padding:8px 6px;border:0;border-radius:0;background:transparent;color:#1B1A17;text-align:left;font-family:'Newsreader',Georgia,serif;font-size:17px;line-height:1.35;cursor:pointer}
.vihje b{flex:0 0 26px;font-family:'Barlow Condensed',sans-serif;font-size:19px}
.vihje:hover{background:#F6F2E8}
.vihje.aktiivinen{background:#F1D9CF}
.vihje.ratkaistu span{text-decoration:line-through;text-decoration-color:#8F897C}

/* Vanhat numerot */
.numero p { margin: 0 0 14px; }
.numero h3 { margin: 22px 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: .12em; text-transform: uppercase; }
.numero p.dropcap::first-letter { font-size: 4.2em; }

/* Tilauslomake: roskapostiansa, jota ihminen ei näe */
.hunajapurkki { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
button[disabled] { opacity: .6; cursor: progress; }

/* Mobiili */
@media (max-width: 600px) {
  .masthead-meta { justify-content: center !important; text-align: center; }
  .kansi { margin-left: auto !important; margin-right: auto !important; }
  .porssi { display: block; min-width: 0 !important; width: 100%; }
  .porssi thead { display: none; }
  .porssi tbody { display: block; }
  .porssi tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 0; border-bottom: 1px dotted #1B1A17; }
  .porssi tr:last-child { border-bottom: 0; }
  .porssi td { padding: 0 !important; border: 0 !important; text-align: left !important; }
  .porssi td:first-child { grid-column: 1 / -1; margin-bottom: 4px; font-size: 18px; }
  .porssi td:last-child { grid-column: 1 / -1; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

[tabindex="-1"]:focus { outline: none; }

/* ---- Sivunkääntö sivulta toiselle (kaanto.js asettaa suunnan) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .75s;
  animation-timing-function: cubic-bezier(.45, .05, .35, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
  transform-origin: left center;
  backface-visibility: hidden;
}
/* Eteenpäin: vanha sivu nousee oikeasta reunasta ja kääntyy vasemmalle, uusi paljastuu alta */
::view-transition-old(root) { z-index: 2; animation-name: sivu-kaantyy-pois; }
::view-transition-new(root) { z-index: 1; animation-name: sivu-paljastuu; }
/* Taaksepäin: edellinen sivu kääntyy vasemmalta takaisin päälle */
html[data-kaanto="taakse"]::view-transition-old(root) { z-index: 1; animation-name: sivu-peittyy; }
html[data-kaanto="taakse"]::view-transition-new(root) { z-index: 2; animation-name: sivu-kaantyy-esiin; }

@keyframes sivu-kaantyy-pois {
  from { transform: perspective(3000px) rotateY(0deg); filter: brightness(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  to   { transform: perspective(3000px) rotateY(-90deg); filter: brightness(.82); box-shadow: 30px 0 60px rgba(0, 0, 0, .35); }
}
@keyframes sivu-kaantyy-esiin {
  from { transform: perspective(3000px) rotateY(-90deg); filter: brightness(.82); box-shadow: 30px 0 60px rgba(0, 0, 0, .35); }
  to   { transform: perspective(3000px) rotateY(0deg); filter: brightness(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}
@keyframes sivu-paljastuu { from { filter: brightness(.72); } to { filter: brightness(1); } }
@keyframes sivu-peittyy   { from { filter: brightness(1); } to { filter: brightness(.72); } }

/* ---- Näköislehti puhelimella (nakoislehti.js, vain etusivu) ---- */
html.nakoislehti-tulossa, html.nakoislehti-auki { background: #2B2824; }
html.nakoislehti-tulossa body > *:not(.nakoislehti),
html.nakoislehti-auki body > *:not(.nakoislehti) { visibility: hidden; }
html.nakoislehti-auki body { overflow: hidden; }
html.nakoislehti-sisalla { overflow: hidden; }
.nakoislehti { position: fixed; inset: 0; z-index: 50; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #2B2824 radial-gradient(ellipse at 50% 0%, #3A3530 0%, #2B2824 70%); transition: opacity .25s ease; cursor: zoom-in; }
.nakoislehti[hidden] { display: none; }
.nakoislehti.nl-haivyy { opacity: 0; }
.nl-alusta { position: relative; }
.nl-sivu { position: absolute; left: 12px; top: 12px; width: 1240px; transform-origin: 0 0; background: #EFEADF;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65); opacity: 0; transition: opacity .3s ease; }
.nl-sivu.valmis { opacity: 1; }
.nl-sivu iframe { display: block; width: 1240px; border: 0; pointer-events: none; }
.nl-ohje { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(27, 26, 23, .94); color: #EFEADF; cursor: default;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .2s ease; }
.nl-ohje button { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 2px solid #EFEADF; border-radius: 0; background: transparent; color: #EFEADF;
  font: inherit; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.nakoislehti.nl-zoom .nl-ohje { opacity: 0; }
.nl-valittu { outline: 4px solid #B3261E; outline-offset: 6px; }
.nl-takaisin { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; min-height: 44px; padding: 0 14px;
  border: 2px solid #1B1A17; border-radius: 0; background: #1B1A17; color: #EFEADF; box-shadow: 3px 3px 0 #B3261E; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.nl-takaisin[hidden] { display: none; }
@media (min-width: 700px) { .nakoislehti, .nl-takaisin { display: none !important; } }