/* luuserit.org: riso-tabloidi.
   Paletti, typografia ja säännöt: family-kb pasi/projects/luuserit.org/kuvakieli/kuvakieli.md.
   Kuvat ovat taustakerroksia, joiden alla on CSS-varakuvio: jos kuvaa ei vielä ole
   kansiossa kuvat/, varakuvio näkyy eikä sivu hajoa. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/archivo-black-latin.woff2) format("woff2");
}

:root {
  --paperi: #F4EFE3;
  --paperi-varjo: #D9D0BC;
  --muste: #141414;
  --pinkki: #FF48B0;
  --sininen: #1F4BFF;
  --keltainen: #FFE800;
  /* Kiinteät sävyt pinnoille, joiden päällä teksti ei saa kääntyä tummassa tilassa:
     pinkki ja keltainen kantavat aina mustetta, sininen aina paperia. */
  --muste-aina: #141414;
  --paperi-aina: #F4EFE3;
  --otsikko: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --leipa: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --viiva: 3px solid var(--muste);
  --leveys: 72rem;
  --raki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paperi: #141414;
    --paperi-varjo: #2A2A2A;
    --muste: #F4EFE3;
  }
}
:root[data-theme="dark"] {
  --paperi: #141414;
  --paperi-varjo: #2A2A2A;
  --muste: #F4EFE3;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--raki), var(--paperi);
  color: var(--muste);
  font-family: var(--leipa);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--pinkki); text-decoration-thickness: 3px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--sininen); }
:focus-visible { outline: 3px solid var(--sininen); outline-offset: 3px; }
p { margin: 0 0 1em; }

.ohita { position: absolute; left: -999px; top: 0; background: var(--keltainen); color: var(--muste-aina); padding: .5rem 1rem; z-index: 99; }
.ohita:focus { left: 1rem; }

.wrap { width: 100%; max-width: var(--leveys); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 1.5rem; } }

/* ---------- Typografia ---------- */
h1, h2, h3, .lööppi {
  font-family: var(--otsikko);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.9rem, 8.2vw, 5rem); }
h2 { font-size: clamp(1.75rem, 6.4vw, 3.4rem); text-shadow: 3px 3px 0 var(--pinkki); }
h3 { font-size: clamp(1.15rem, 3.8vw, 1.45rem); line-height: 1.05; }
.korostus { background: var(--pinkki); color: var(--muste-aina); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ingressi { font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.45; max-width: 38rem; }
.pieni { font-size: .875rem; line-height: 1.45; }
.leima-teksti { font-family: var(--otsikko); text-transform: uppercase; letter-spacing: .02em; }

.etiketti {
  display: inline-block;
  font-family: var(--otsikko);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .06em;
  background: var(--sininen);
  color: var(--paperi-aina);
  padding: .3em .6em .25em;
  transform: rotate(-2deg);
  margin-bottom: 1rem;
}

/* ---------- Painikkeet ---------- */
.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 3.25rem;
  padding: .8rem 1.4rem;
  font-family: var(--otsikko);
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .02em;
  background: var(--pinkki);
  color: var(--muste-aina);
  border: 3px solid var(--muste-aina);
  box-shadow: 5px 5px 0 var(--sininen);
  transition: transform .08s ease, box-shadow .08s ease;
  text-align: center;
}
.nappi:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sininen); }
.nappi:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--sininen); }
.nappi--iso { font-size: clamp(1.15rem, 3.4vw, 1.5rem); min-height: 3.75rem; padding: 1rem 1.8rem; }
.nappi--toinen { background: var(--paperi-aina); }
.nappi--keltainen { background: var(--keltainen); }
.nappi::after { content: "→"; font-family: var(--leipa); font-weight: 800; }
.cta-rivi { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.cta-rivi .pieni { margin: 0; }

/* ---------- Yläpalkki ---------- */
.ylapalkki {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--raki), var(--paperi);
  border-bottom: var(--viiva);
}
.ylapalkki .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.logo {
  font-family: var(--otsikko);
  font-size: 1.25rem;
  text-transform: lowercase;
  text-decoration: none;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.logo span { background: var(--pinkki); color: var(--muste-aina); padding: 0 .15em; margin-right: .05em; }
.ylapalkki nav { display: flex; align-items: center; gap: 1.25rem; }
.ylapalkki nav a:not(.nappi) { display: none; font-weight: 700; text-decoration: none; }
.ylapalkki nav a:not(.nappi):hover { text-decoration: underline; text-decoration-color: var(--pinkki); }
.ylapalkki .nappi { min-height: 2.6rem; padding: .45rem .9rem; font-size: .95rem; box-shadow: 3px 3px 0 var(--sininen); }
@media (min-width: 52rem) { .ylapalkki nav a:not(.nappi) { display: inline; } }

/* ---------- Osiot ---------- */
.osio { padding: clamp(3.5rem, 9vw, 6.5rem) 0; border-bottom: var(--viiva); position: relative; }
.osio--sininen { background: var(--sininen); color: var(--paperi-aina); }
.osio--sininen h2 { text-shadow: 3px 3px 0 var(--muste-aina); }
.osio--sininen a:not(.nappi) { color: var(--paperi-aina); }
.osio--varjo { background: var(--raki), var(--paperi-varjo); }
.kaksi { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) {
  .kaksi { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .kaksi--kuva-vasen > .kuva { order: -1; }
}

/* ---------- Kuvat ja varakuviot ---------- */
.kuva {
  --kuva: none;
  position: relative;
  aspect-ratio: 3 / 2;
  border: var(--viiva);
  box-shadow: 8px 8px 0 var(--muste);
  background:
    var(--kuva) center / cover no-repeat,
    radial-gradient(circle at 62% 42%, var(--pinkki) 0 21%, transparent 21.5%),
    radial-gradient(circle at 66% 47%, var(--sininen) 0 21%, transparent 21.5%),
    radial-gradient(var(--sininen) 1.3px, transparent 1.7px) 0 0 / 9px 9px,
    var(--paperi-aina);
  overflow: hidden;
}
.kuva--nelio { aspect-ratio: 1 / 1; }
.kuva--pysty { aspect-ratio: 2 / 3; }
.kuva--vino { transform: rotate(1.2deg); }
.kuva--vino-v { transform: rotate(-1.4deg); }

/* ---------- Hero ----------
   Hero on aina "painettu sivu" (vaalea paperi) myös tummassa tilassa, koska kuva on
   painettu paperille. Mobiilissa kuva tulee tekstin alle ja rajataan yläosaan, jossa
   hahmot ovat. Leveällä ruudulla kuva on osion taustana oikealla, ja teksti asettuu
   kuvan tyhjälle paperialueelle vasemmalle, kuten kuva on sommiteltu. */
.hero {
  --paperi: #F4EFE3; --paperi-varjo: #D9D0BC; --muste: #141414;
  background: var(--raki), var(--paperi);
  color: var(--muste);
  padding: 2rem 0 3rem;
  border-bottom: var(--viiva);
  overflow: hidden;
  position: relative;
}
.hero .wrap { display: grid; gap: 2rem; align-items: center; position: relative; }
.hero h1 { margin-bottom: .35em; }
.hero .ingressi { margin-bottom: .5rem; }
.hero-kuva {
  aspect-ratio: 1 / .92;
  background:
    url(kuvat/hero-luuseri-mobiili.jpg) center top / 100% auto no-repeat,
    radial-gradient(circle at 70% 30%, var(--keltainen) 0 12%, transparent 12.5%),
    radial-gradient(circle at 48% 55%, var(--pinkki) 0 26%, transparent 26.5%),
    radial-gradient(circle at 52% 60%, var(--sininen) 0 26%, transparent 26.5%),
    radial-gradient(var(--sininen) 1.3px, transparent 1.7px) 0 0 / 9px 9px,
    var(--paperi-aina);
}
.hero-leima {
  position: absolute;
  left: .75rem;
  bottom: .9rem;
  font-family: var(--otsikko);
  text-transform: uppercase;
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  line-height: 1;
  color: var(--pinkki);
  border: 4px solid var(--pinkki);
  padding: .3em .45em .25em;
  transform: rotate(-7deg);
  background: rgba(240, 233, 213, .92);
}
@media (min-width: 56rem) {
  .hero {
    --hk-w: min(64vw, 69rem);
    --hk: right bottom / var(--hk-w) calc(var(--hk-w) / 1.5) no-repeat;
    padding: 4rem 0;
    min-height: min(42vw, 46rem);
    display: flex;
    align-items: center;
    /* Rae päällimmäisenä, jotta kuva ja paperi saavat saman pinnan. Reunahäivytykset
       piilottavat kuvan paperin ja sivun paperin sävyeron. Varakuvio on samassa
       laatikossa kuin kuva, joten kuva peittää sen kokonaan. */
    background:
      var(--raki),
      linear-gradient(to right, #F0E9D5 0, rgba(240,233,213,0) 10%) var(--hk),
      linear-gradient(to bottom, #F0E9D5 0, rgba(240,233,213,0) 10%) var(--hk),
      url(kuvat/hero-luuseri.jpg) var(--hk),
      radial-gradient(circle at 72% 58%, var(--pinkki) 0 26%, transparent 26.3%) var(--hk),
      radial-gradient(circle at 75% 62%, var(--sininen) 0 26%, transparent 26.3%) var(--hk),
      radial-gradient(circle at 80% 22%, var(--keltainen) 0 12%, transparent 12.3%) var(--hk),
      #F0E9D5;
  }
  .hero .wrap > div:first-child { max-width: 50%; }
  .hero h1 { font-size: min(4.1vw, 4.1rem); }
  .hero .kuva.hero-kuva { position: absolute; inset: auto auto 0 54%; width: 10rem; aspect-ratio: auto; height: auto; border: 0; box-shadow: none; background: none; }
  .hero .kuva.hero-kuva .hero-leima { position: static; display: inline-block; font-size: 1.5rem; background: none; mix-blend-mode: multiply; }
}
@media (min-width: 90rem) { .hero .wrap > div:first-child { max-width: 46%; } }

/* ---------- Kortit ---------- */
.ruudukko { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 40rem) { .ruudukko { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ruudukko--3 { grid-template-columns: repeat(3, 1fr); } }
.kortti {
  background: var(--paperi);
  color: var(--muste);
  border: var(--viiva);
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 6px 6px 0 var(--muste);
}
.kortti:nth-child(3n+1) { transform: rotate(-.6deg); }
.kortti:nth-child(3n+2) { transform: rotate(.5deg); }
.kortti h3 { margin-bottom: .5rem; }
.kortti p:last-child { margin-bottom: 0; }
.osio--sininen .kortti { box-shadow: 6px 6px 0 var(--muste-aina); border-color: var(--muste-aina); background: var(--paperi-aina); color: var(--muste-aina); }

.lista-kuva { max-width: 20rem; margin: 2.5rem auto 0; }
@media (min-width: 56rem) { .lista-kuva { margin-left: 0; } }
.maskotti {
  float: right; width: 7.5rem; aspect-ratio: 2 / 3; margin: 0 0 .5rem 1rem; shape-outside: margin-box;
  background: var(--kuva) center bottom / contain no-repeat;
  transform: rotate(3deg);
}
@media (min-width: 40rem) { .maskotti { width: 10rem; } }

/* Diagnoosi: tyyppi-leima kortin kulmassa */
.diagnoosi h3::before { content: "Diagnoosi: "; display: block; font-size: .7rem; letter-spacing: .08em; color: var(--muste); opacity: .7; margin-bottom: .3rem; font-family: var(--leipa); font-weight: 800; }

/* Päivän kisa: askeleet */
.askeleet { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; counter-reset: askel; }
@media (min-width: 40rem) { .askeleet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .askeleet { grid-template-columns: repeat(4, 1fr); } }
.askeleet li { counter-increment: askel; position: relative; padding-top: 3.2rem; }
.askeleet li::before {
  content: counter(askel);
  position: absolute; top: 0; left: 0;
  font-family: var(--otsikko);
  font-size: 2.2rem; line-height: 1;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--keltainen); color: var(--muste-aina);
  border: 3px solid var(--muste-aina);
  transform: rotate(-4deg);
}

/* Faktat */
.faktat { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 40rem) { .faktat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .faktat { grid-template-columns: repeat(3, 1fr); } }
.fakta .leima {
  display: inline-block;
  font-family: var(--otsikko);
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1;
  color: var(--muste-aina);
  background: var(--pinkki);
  border: 3px solid var(--muste-aina);
  padding: .15em .3em .1em;
  transform: rotate(-3deg);
  margin: 0 0 .9rem;
}
.fakta:nth-child(even) .leima { transform: rotate(2deg); }
.fakta .leima--teksti { font-size: clamp(1.15rem, 3.6vw, 1.4rem); line-height: 1.05; }
.fakta .leima--sininen { background: var(--sininen); color: var(--paperi-aina); }
.fakta .leima--keltainen { background: var(--keltainen); }
sup a { text-decoration: none; font-weight: 800; padding: 0 .1em; }
sup { line-height: 0; }
.lahteet { margin-top: 2.5rem; font-size: .875rem; line-height: 1.45; max-width: 46rem; }
.lahteet ol { padding-left: 1.4rem; margin: .5rem 0 0; }
.lahteet li { margin-bottom: .3rem; }
.lahteet li:target { background: var(--keltainen); color: var(--muste-aina); }

/* Punchline */
.punchline {
  margin: 2.5rem 0 0;
  font-family: var(--otsikko);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 4.4vw, 2.1rem);
  line-height: 1.05;
  max-width: 44rem;
}

/* Tasotikkaat */
.tikkaat { list-style: none; margin: 1.5rem 0 0; padding: 0; border: var(--viiva); background: var(--paperi); box-shadow: 8px 8px 0 var(--muste); }
.tikkaat li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .25rem .75rem; align-items: baseline; padding: .7rem .9rem; border-bottom: 2px dashed var(--muste); }
.tikkaat li:last-child { border-bottom: 0; }
.tikkaat .nro { font-family: var(--otsikko); font-size: 1.35rem; line-height: 1; grid-row: span 2; align-self: center; text-align: center; }
.tikkaat .nimi { font-family: var(--otsikko); text-transform: uppercase; line-height: 1.05; font-size: 1rem; }
.tikkaat .kaupunki { font-size: .85rem; opacity: .85; }
.tikkaat .huippu { background: var(--keltainen); color: var(--muste-aina); }
.tikkaat .huippu .kaupunki { opacity: 1; }
.tikkaat .pohja { background: var(--pinkki); color: var(--muste-aina); }
.tikkaat .pohja .kaupunki { opacity: 1; }
.tikkaat .salainen { background: var(--muste); color: var(--paperi); }
.tikkaat li.valissa { display: block; text-align: center; font-weight: 800; letter-spacing: .4em; padding: .2rem; }

/* Hinnat */
.hinnat { display: grid; gap: 1.5rem; margin-top: 2.5rem; align-items: stretch; }
@media (min-width: 40rem) { .hinnat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .hinnat { grid-template-columns: repeat(4, 1fr); } }
.taso {
  display: flex; flex-direction: column;
  background: var(--paperi);
  border: var(--viiva);
  box-shadow: 6px 6px 0 var(--muste);
  padding: 1.25rem;
  position: relative;
}
.taso h3 { margin-bottom: .25rem; }
.taso .hinta { font-family: var(--otsikko); font-size: 2.4rem; line-height: 1; margin: .35rem 0 .2rem; }
.taso .hinta small { font-size: 1rem; }
.taso .lupaus { font-style: italic; font-weight: 600; margin-bottom: .75rem; }
.taso ul { margin: 0 0 1.25rem; padding-left: 1.2rem; flex: 1; }
.taso li { margin-bottom: .35rem; }
.taso .nappi { width: 100%; font-size: .95rem; padding: .7rem .8rem; }
.taso-merkki {
  width: 6.5rem; aspect-ratio: 1; margin: -.25rem 0 .5rem auto; float: right;
  background:
    var(--kuva) center / contain no-repeat,
    radial-gradient(circle, var(--pinkki) 0 48%, transparent 49%),
    radial-gradient(circle at 56% 56%, var(--sininen) 0 48%, transparent 49%);
}
.taso--ilmainen { border-width: 4px; }
.taso--suosituin { background: var(--keltainen); color: var(--muste-aina); border-color: var(--muste-aina); }
.taso--suosituin .nappi { background: var(--pinkki); }
.taso .rusetti {
  position: absolute; top: -1rem; left: 1rem;
  font-family: var(--otsikko); text-transform: uppercase; font-size: .8rem;
  background: var(--muste-aina); color: var(--keltainen);
  padding: .3em .6em; transform: rotate(-3deg);
}
.reilu { margin-top: 2rem; max-width: 46rem; border-left: 6px solid var(--pinkki); padding-left: 1rem; }

/* UKK */
.ukk { margin-top: 2rem; max-width: 48rem; }
.ukk details { border: var(--viiva); background: var(--paperi); margin-bottom: 1rem; box-shadow: 5px 5px 0 var(--muste); }
.ukk summary {
  cursor: pointer; list-style: none;
  padding: 1rem 3rem 1rem 1.1rem; position: relative;
  font-family: var(--otsikko); text-transform: uppercase; line-height: 1.1;
}
.ukk summary::-webkit-details-marker { display: none; }
.ukk summary::after {
  content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  background: var(--pinkki); color: var(--muste-aina); border: 2px solid var(--muste-aina);
}
.ukk details[open] summary::after { content: "−"; background: var(--keltainen); }
.ukk details > div { padding: 0 1.1rem 1rem; }

/* Loppu-CTA */
.loppu { background: var(--raki), var(--pinkki); color: var(--muste-aina); }
.loppu h2 { text-shadow: 3px 3px 0 var(--paperi-aina); }
.loppu .nappi { background: var(--keltainen); box-shadow: 5px 5px 0 var(--muste-aina); }
.loppu .kuva { box-shadow: 8px 8px 0 var(--muste-aina); border-color: var(--muste-aina); }

/* Footer */
.alapalkki { padding: 2.5rem 0 3rem; background: var(--muste-aina); color: var(--paperi-aina); }
.alapalkki a { color: var(--paperi-aina); }
.alapalkki .linkit { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0; padding: 0; list-style: none; font-weight: 700; }
.alapalkki .logo span { color: var(--muste-aina); }
.alapalkki .vastuu { max-width: 40rem; font-size: 1.05rem; }

/* ---------- Sisäsivut (tietosuoja, ehdot, 404) ---------- */
.sivu { padding: 2.5rem 0 4rem; }
.sivu .wrap { max-width: 46rem; }
.sivu h1 { font-size: clamp(1.9rem, 7vw, 3.2rem); }
.sivu h2 { font-size: clamp(1.25rem, 4vw, 1.6rem); text-shadow: 2px 2px 0 var(--pinkki); margin-top: 2rem; }

/* Alempien osioiden piirto ja taustakuvien lataus lykkääntyvät, kunnes osio on
   lähellä näkymää. */
main > .osio { content-visibility: auto; contain-intrinsic-size: auto 1100px; }

/* Lääkiksen ennakkotilaus ja kurssitoiveet */
.toive { display: grid; gap: .4rem; margin: 1rem 0 1.5rem; }
.toive label { font-weight: 700; }
.toive input { font: inherit; padding: .7rem .8rem; border: var(--viiva); background: var(--paperi-aina); color: var(--muste-aina); min-width: 0; }
.toive-rivi { display: flex; flex-wrap: wrap; gap: .6rem; }
.toive-rivi input { flex: 1 1 14rem; }
.toive-tila { min-height: 1.4em; margin: 0; font-weight: 700; }
.toive-otsikko { margin-top: 2rem; }