/* SLUJA.FI – paikallinen runko (tehtävä 02). Ei ohjelmistokehystä eikä rakennustyökalua.
   Taitekohdat: 37.5em = 600 px, 48em = 768 px, 64em = 1024 px, 80em = 1280 px. */

/* ---------- Fontit (omalta palvelimelta, SIL OFL 1.1, ks. assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin.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: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin.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: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Värit ja mitat ---------- */
:root {
  --hiili: #121110;
  --pinta: #1B1917;
  --pinta-2: #25221F;
  --viiva: #3A342F;
  --kehys: #6E655C;
  --luu: #F2EADF;
  --luu-kirkas: #F6ECDD;
  --himmea: #A69E93;
  --oranssi: #EB6324;
  --oranssi-syva: #C4501A;
  --oranssi-hiiri: #A9430F;
  --valkoinen: #FFFFFF;

  --naytto: "Anton", Impact, "Arial Narrow", sans-serif;
  --leipa: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --reuna: 1.25rem;            /* 20 px puhelimessa */
  --sisalto-max: 80rem;        /* 1280 px */
  --ylatunniste-k: 3.5rem;     /* 56 px */
  --osio-vali: 4.5rem;         /* 72 px */
  /* SLUJA-sanan leveyden suhde fonttikokoon Antonilla (mitattu selaimessa, ks. raportti). */
  --sluja-suhde: 2.29;
}
@media (max-width: 24.3125em) { :root { --reuna: 1rem; } }                                   /* alle 390 px */
@media (min-width: 37.5em) { :root { --reuna: 2rem; --osio-vali: 5.5rem; } }                 /* 600 px */
@media (min-width: 48em) { :root { --ylatunniste-k: 4rem; } }                                /* 768 px */
@media (min-width: 64em) { :root { --reuna: clamp(3rem, 5.5vw, 5rem); --ylatunniste-k: 4.5rem; --osio-vali: 7.5rem; } }

/* ---------- Perusta ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--hiili);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--hiili) url("../img/rae.png") repeat;
  background-size: 128px 128px;
  color: var(--luu);
  font-family: var(--leipa);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
@media (min-width: 64em) { body { font-size: 1.125rem; } }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--oranssi); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--oranssi);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

/* --ylatunniste-tod = ylätunnisteen mitattu korkeus (sluja.js); ilman skriptiä suunniteltu korkeus. */
[id] { scroll-margin-top: calc(var(--ylatunniste-tod, var(--ylatunniste-k)) + 1rem); }

.kuvakkeet { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikoni {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  flex: none;
  vertical-align: -0.1em;
  margin-left: 0.35em;
}
.nakymaton {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kehys {
  width: 100%;
  max-width: calc(var(--sisalto-max) + 2 * var(--reuna));
  margin-inline: auto;
  padding-inline: var(--reuna);
}

/* ---------- Siirry sisältöön ---------- */
.siirry {
  position: absolute;
  left: var(--reuna);
  top: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--luu);
  color: var(--hiili);
  font-weight: 700;
  transform: translateY(-150%);
  /* Tehtävä 16: linkki ja sen kohdistusrengas (3 px + 3 px) pysyvät näkymän sisällä myös kapeassa
     suurennetussa näkymässä; teksti saa rivittyä. 100 % = näkymän leveys (absoluuttinen sijoittelu). */
  max-width: calc(100% - 2 * var(--reuna));
}
.siirry:focus { transform: none; }

/* ---------- Vanhojen juuriankkurien siirtymäilmoitukset (tehtävä 15) ----------
   /#aazi, /#yhteystiedot ja /#tietosuoja: ilmoitus näkyy vain, kun ankkuri on osoitteen kohteena.
   Muuten elementti on kokonaan pois asettelusta ja sarkainjärjestyksestä (display: none). */
.siirtyma { display: none; }
.siirtyma:target {
  display: block;
  background: var(--pinta);
  border-bottom: 1px solid var(--viiva);
  padding: 1rem var(--reuna);
}
.siirtyma p {
  max-width: var(--sisalto-max);
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--luu);
}
.siirtyma a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
/* Pitkien yhdyssanojen (yhteys‑tiedot, esittely‑sivun, tietosuoja‑tietoihin) ehdollinen tavutus vain,
   kun sisältöalue on alle 12.5 rem leveä (320–390 px / 200 %). Normaalikoossa 320 px on 20 rem. */
.siirtyma { -webkit-hyphens: none; hyphens: none; }
@container (max-width: 12.5rem) {
  .siirtyma { -webkit-hyphens: manual; hyphens: manual; }
}

/* Julkaisuversio (tehtävä 22): luonnospalkin, ehdotus- ja keskeneräinen-merkintöjen säännöt poistettu. */

/* ---------- Paikkamerkit kuville ---------- */
.paikka {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 14px),
    var(--pinta);
  border: 1px solid var(--viiva);
  color: var(--himmea);
  text-align: center;
}
.paikka__teksti {
  position: relative;
  z-index: 1;
  max-width: 22em;
  overflow-wrap: anywhere;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.paikka__teksti strong {
  display: block;
  color: var(--luu);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Painikkeet ---------- */
.painike {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  font-family: var(--leipa);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.painike:hover { text-decoration: none; }
.painike--paa {
  background: var(--oranssi-syva);
  color: var(--valkoinen);
}
.painike--paa:hover { background: var(--oranssi-hiiri); }
.painike--paa:active { transform: translateY(1px); }
.painike--paa:focus-visible { outline-color: var(--luu-kirkas); }

/* ---------- Ylätunniste ja valikko ---------- */
.ylatunniste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hiili);
}
.ylatunniste__sisus {
  position: relative;
  display: flex;
  flex-wrap: wrap;             /* suurella tekstillä Valikko-painike rivittyy, ei vaakavieritystä */
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  min-height: var(--ylatunniste-k);
}
.ylatunniste__sisus::after {
  content: "";
  position: absolute;
  left: var(--reuna);
  right: var(--reuna);
  bottom: 0;
  border-bottom: 1px solid var(--viiva);
}
.logo {
  font-family: var(--naytto);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--luu-kirkas);
  line-height: 1;
  padding-block: 0.75rem;
  margin-right: -0.35em;
}
.logo:hover { text-decoration: none; color: var(--valkoinen); }
@media (min-width: 64em) { .logo { font-size: 1.375rem; } }

.paavalikko__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.paavalikko__lista a {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--luu);
  font-size: 0.9375rem;
  font-weight: 500;
  /* Linkkien ehdolliset tavutusmerkit (­) eivät vaikuta tietokonevalikkoon. */
  -webkit-hyphens: none;
  hyphens: none;
}
.paavalikko__lista a:hover {
  color: var(--luu-kirkas);
  text-decoration: underline;
  text-decoration-color: var(--oranssi);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.paavalikko__muut { display: none; }
@media (min-width: 64em) { .paavalikko__lista { gap: 0.25rem 2.25rem; } }

/* Ilman JavaScriptiä kapealla näytöllä: linkit rivittyvät logon alle */
@media (max-width: 47.99em) {
  .ei-js .ylatunniste__sisus { flex-wrap: wrap; padding-bottom: 0.25rem; }
  .ei-js .paavalikko { width: 100%; }
  .ei-js .paavalikko__lista { gap: 0 1.1rem; }
  .ei-js .ylatunniste { position: static; }
}

.valikko-nappi {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--kehys);
  border-radius: 2px;
  background: transparent;
  color: var(--luu);
  font: 600 0.9375rem/1 var(--leipa);
  white-space: nowrap;
  cursor: pointer;
}
.valikko-nappi:hover { border-color: var(--luu); }
.valikko-nappi .ikoni { margin: 0; width: 1.25rem; height: 1.25rem; }
.valikko-nappi__kiinni { display: none; }
.valikko-nappi[aria-expanded="true"] .valikko-nappi__auki { display: none; }
.valikko-nappi[aria-expanded="true"] .valikko-nappi__kiinni { display: inline-block; }

/* Puhelin + JavaScript: koko näytön valikko */
@media (max-width: 47.99em) {
  .js .paavalikko {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--valikko-yla, var(--ylatunniste-k));
    bottom: 0;
    z-index: 49;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--hiili) url("../img/rae.png") repeat;
    background-size: 128px 128px;
    padding: 1rem var(--reuna) 2.5rem;
  }
  .valikko-auki .paavalikko { display: block; }
  .js .paavalikko__lista { display: block; }
  .js .paavalikko__lista li { border-bottom: 1px solid var(--viiva); }
  .js .paavalikko__lista a {
    display: block;
    padding-block: 0.6rem;
    font-family: var(--naytto);
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 1.15;
    color: var(--luu);
    /* Jokainen linkki on omalla rivillään: sana tavutetaan vain, jos se ei mahdu riville
       (suurennettu teksti). Tavutuskohdat ovat HTML:ssä ehdollisina tavutusmerkkeinä. */
    -webkit-hyphens: manual;
    hyphens: manual;
  }
  .js .paavalikko__muut {
    display: block;
    margin-top: 1.75rem;
  }
  .js .paavalikko__muut a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--luu);
    font-weight: 600;
  }
  .js .paavalikko__muut .aazi-linkki { color: var(--oranssi); }
  /* Vain juurielementti lukitaan: bodyn overflow rikkoisi kiinteän ylätunnisteen. */
  .valikko-auki { overflow: hidden; }
}
/* Matala vaakanäkymä: pienempi valikkoteksti, sisältö vierii */
@media (max-width: 47.99em) and (max-height: 31.25em) {
  .js .paavalikko__lista a { font-size: 1.75rem; padding-block: 0.35rem; }
  .js .paavalikko__muut { margin-top: 1rem; }
}
@media (min-width: 48em) {
  .valikko-nappi { display: none !important; }
}

/* ---------- 1. Aloitus ---------- */
.aloitus {
  position: relative;
  isolation: isolate;
}
.aloitus__kuva {
  position: relative;
  width: 100%;
  aspect-ratio: 39 / 38;
  overflow: hidden;
}
.aloitus__kuva img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;            /* puhelin: aurinko ja saaret keskellä */
  /* Alaosa häivytetään läpinäkyväksi sivun rakeista pohjaa vasten (ei saumaa). */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.aloitus__kuva::after {
  content: "";
  position: absolute;
  inset: 0;
}
.aloitus__sisus {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  margin-top: calc(-0.46 * var(--sluja-koko));
  padding-bottom: 3rem;
  /* SLUJA täyttää sisältöleveyden puhelimessa */
  --sluja-koko: calc((100vw - 2 * var(--reuna)) / var(--sluja-suhde) * 0.98);
}
@supports (width: 1cqi) {
  .aloitus__sisus { --sluja-koko: calc(100cqi / var(--sluja-suhde)); }
}
.aloitus__otsikko { font-weight: 400; }
.sluja-iso {
  display: block;
  font-family: var(--naytto);
  font-size: var(--sluja-koko);
  line-height: 0.86;
  letter-spacing: 0;
  color: var(--luu-kirkas);
  white-space: nowrap;
  -webkit-mask-image: url("../img/sluja-kuluma.png");
  mask-image: url("../img/sluja-kuluma.png");
  -webkit-mask-size: 1.1em 1.1em;   /* pinta skaalautuu SLUJA-sanan koon mukana */
  mask-size: 1.1em 1.1em;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.aloitus__hook {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--naytto);
  font-size: clamp(2.125rem, 0.41rem + 8.57vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--luu);
  text-wrap: balance;
}
.aloitus__alaotsikko {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.45;
  max-width: 34em;
  text-wrap: balance;
}
.aloitus__tekija {
  margin-top: 0.5rem;
  color: var(--himmea);
  font-size: 0.875rem;
  font-weight: 500;
}
.aloitus .painike--paa { margin-top: 1.5rem; width: 100%; }

@media (min-width: 37.5em) {
  .aloitus__kuva { aspect-ratio: 16 / 9; }
  .aloitus__kuva img { object-position: 50% 45%; }   /* leveä rajaus: horisontti ja jää */
  .aloitus .painike--paa { width: auto; }
  .aloitus__sisus { --sluja-koko: calc((100vw - 2 * var(--reuna)) * 0.75 / var(--sluja-suhde)); }
  @supports (width: 1cqi) {
    .aloitus__sisus { --sluja-koko: calc(75cqi / var(--sluja-suhde)); }
  }
}
@media (min-width: 48em) {
  .aloitus__hook { font-size: clamp(2.75rem, 1.6rem + 3.2vw, 4.25rem); }
  .aloitus__alaotsikko { font-size: clamp(1.1875rem, 0.8rem + 0.85vw, 1.375rem); }
  .aloitus__tekija { font-size: 0.9375rem; }
}
/* Tietokone: SLUJA vasemmalla, kuva oikealla reunaan asti */
@media (min-width: 64em) {
  .aloitus {
    display: flex;
    align-items: center;
    min-height: clamp(40rem, 48vw, 54rem);
  }
  .aloitus__kuva {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 39%;
    right: 0;
    width: auto;
    aspect-ratio: auto;
  }
  .aloitus__kuva img {
    object-position: 65% 50%;          /* tietokone: aurinko tekstialueen oikealle puolelle */
    /* Kuva häivytetään vasemmalla läpinäkyväksi sivun rakeista pohjaa vasten (ei saumaa),
       jolloin tekstialueen tausta pysyy tummana. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
    mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  }
  .aloitus__kuva::after {
    background: linear-gradient(to top, var(--hiili) 0%, rgba(18, 17, 16, 0) 26%);
  }
  .aloitus__sisus {
    margin-top: 0;
    padding-block: 3.5rem 4rem;
    --sluja-koko: calc(min(41.25rem, 46vw) / var(--sluja-suhde));
  }
  @supports (width: 1cqi) {
    .aloitus__sisus { --sluja-koko: calc(min(41.25rem, 46vw) / var(--sluja-suhde)); }
  }
  .aloitus__hook { margin-top: 1.25rem; }
  .aloitus__alaotsikko { margin-top: 1.5rem; }
  .aloitus .painike--paa { margin-top: 2rem; min-height: 3.5rem; }
}
/* 1024–1279 px: otsikko ulottuu pidemmälle kuvan päälle, joten häivytys on leveämpi. */
@media (min-width: 64em) and (max-width: 79.99em) {
  .aloitus__kuva img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  }
}

/* ---------- Osioiden yhteiset ---------- */
.osio { padding-block: var(--osio-vali); }
.osio__otsikko {
  font-family: var(--naytto);
  font-weight: 400;
  font-size: clamp(2rem, 0.9rem + 5.7vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--luu);
  text-wrap: balance;
}
@media (min-width: 48em) {
  .osio__otsikko { font-size: clamp(2.5rem, 1.2rem + 2.6vw, 3.5rem); }
}
.osio__johdanto {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  max-width: 36em;
}
@media (min-width: 64em) { .osio__johdanto { font-size: 1.125rem; } }
.osio__huomio {
  margin-top: 0.5rem;
  color: var(--himmea);
  font-size: 0.875rem;
}
.kortti__otsikko {
  font-family: var(--leipa);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--luu);
}
@media (min-width: 64em) { .kortti__otsikko { font-size: 1.5rem; } }
.kortti__esittaja { margin-top: 0.3rem; font-size: 1rem; }
.kortti__meta { margin-top: 0.15rem; color: var(--himmea); font-size: 0.9375rem; }

/* ---------- 2. Musiikkivideot ---------- */
.videot { position: relative; }
/* Musiikkivideot-otsikon tavutus (tehtävä 11): HTML:n ehdollinen tavutusmerkki otetaan käyttöön vain,
   kun osio on tekstikokoon nähden kapea (alle 12.5 em; otsikko on 12 em leveä). Normaalikoossa 320 px on 16 em. */
.videot { container-type: inline-size; }
.videot .osio__otsikko { -webkit-hyphens: none; hyphens: none; }
@container (max-width: 12.5em) {
  .videot .osio__otsikko { -webkit-hyphens: manual; hyphens: manual; }
}
.videot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--reuna);
  right: var(--reuna);
  border-top: 1px solid var(--viiva);
}
@media (min-width: 64em) {
  .osio__yla {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 2rem;
  }
  .osio__yla .osio__otsikko,
  .osio__yla .osio__johdanto { grid-column: 1; }
  .osio__yla .osio__huomio { grid-column: 2; grid-row: 2; margin: 0 0 0.2rem; text-align: right; }
}

.videolista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 2rem;
}
.videokortti { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.videokortti__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--pinta);
}
/* Esikatselukuva: tiedostot ovat valmiiksi 16:9, joten cover ei rajaa sisältöä. */
.videokortti__media > picture,
.videokortti__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.videokortti__media img { object-fit: cover; }

/* Tehtävä 17: sivulla ei ole enää upotettua soitinta (aiemmat .on-aktiivinen- ja iframe-säännöt poistettu).
   Tehtävän 17 korjaus: .toisto on koko esikatselukuvan peittävä tavallinen linkki teoksen YouTube-sivulle
   (yksi kohdistettava linkki kuvaa kohti); oranssi toistokuvake .toisto__kuvake on linkin keskellä. */
.toisto {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--valkoinen);
  cursor: pointer;
}
.toisto__kuvake {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--oranssi);
  /* Tumma rengas erottaa kuvakkeen myös vaaleasta tai oranssista kuvasta. */
  box-shadow: 0 0 0 3px rgba(18, 17, 16, 0.7), 0 2px 14px rgba(0, 0, 0, 0.45);
}
.toisto .ikoni { width: 1.75rem; height: 1.75rem; margin: 0 0 0 0.2rem; }
.toisto:hover { text-decoration: none; }
.toisto:hover .toisto__kuvake { background: var(--oranssi-syva); }
/* Kohdistus: vaalea rengas koko kuvan ympärillä näyttää linkin todellisen alueen; tumma reunus erottaa sen kuvasta ja taustasta. */
.toisto:focus-visible {
  outline: 3px solid var(--luu-kirkas);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--hiili);
}
.toisto:focus-visible .toisto__kuvake { background: var(--oranssi-syva); }
@media (min-width: 64em) {
  .toisto__kuvake { width: 4.5rem; height: 4.5rem; }
  .toisto .ikoni { width: 2rem; height: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .toisto__kuvake { transition: transform 0.15s ease, background-color 0.15s ease; }
  .toisto:hover .toisto__kuvake { transform: scale(1.06); }
}

.kortti__tarina { margin-top: 0.75rem; }
.videotyo {
  margin-top: 1rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--oranssi);
}
.videotyo__merkki,
.yhteys__merkki {
  color: var(--oranssi);
  font-family: var(--leipa);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.videotyo__rooli { font-weight: 600; font-size: 1rem; line-height: 1.35; margin-top: 0.15rem; }
.videotyo__tekija { color: var(--himmea); font-size: 0.9375rem; line-height: 1.4; }

/* Musiikin tekijät: selaimen oma avautuva elementti */
.tekijat {
  margin-top: 1.25rem;
  border-top: 1px solid var(--viiva);
  border-bottom: 1px solid var(--viiva);
}
.tekijat summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.6rem 2.25rem 0.6rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.tekijat summary::-webkit-details-marker { display: none; }
.tekijat summary::marker { content: ""; }
.tekijat__maara { color: var(--himmea); font-weight: 500; margin-left: 0.3em; }
.tekijat__merkki {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.4375rem;
}
.tekijat__merkki::before,
.tekijat__merkki::after {
  content: "";
  position: absolute;
  background: var(--oranssi);
}
.tekijat__merkki::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.tekijat__merkki::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.tekijat[open] .tekijat__merkki::after { display: none; }
.tekijat summary:hover { color: var(--luu-kirkas); }
.tekijat__lista {
  background: var(--pinta);
  padding: 0.85rem 1rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.tekijat__lista li { padding-left: 1em; text-indent: -1em; }
.tekijat__lista li + li { margin-top: 0.2rem; }

.kortti__linkki { margin-top: 0.85rem; font-size: 0.9375rem; font-weight: 600; }
.kortti__linkki a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Videot 600–1279 px: vaakarivit (kuva vasemmalla), jotta esikatselukuva pysyy isona */
@media (min-width: 48em) {
  .videolista { gap: 3rem; }
  .videokortti {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: 2rem;
    align-items: start;
  }
}
/* Videot 1280 px alkaen: kolme korttia rinnakkain (kortti vähintään noin 356 px leveä) */
@media (min-width: 80em) {
  .videolista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
  }
  .videokortti { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* ---------- 3. Oma musiikki ja 4. Valokuvat ---------- */
.rinnakkain { position: relative; }
.rinnakkain::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--reuna);
  right: var(--reuna);
  border-top: 1px solid var(--viiva);
}
.valokuvat { padding-top: 0; }
@media (min-width: 64em) {
  .rinnakkain {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 6rem;
  }
  .valokuvat { padding-top: var(--osio-vali); position: relative; }
  .valokuvat::before {
    content: "";
    position: absolute;
    left: -3rem;
    top: calc(var(--osio-vali) - 0.5rem);
    bottom: calc(var(--osio-vali) - 0.5rem);
    border-left: 1px solid var(--viiva);
  }
}
/* Suurennettu teksti (tehtävä 12): musiikki ja valokuvat allekkain, kun sivun sisältöalue (main) on alle
   36 rem leveä juurifonttiin nähden (rem, koska leipätekstin em on tietokoneleveyksillä 1,125 rem).
   Peruste: tietokoneasettelussa musiikkipalsta on 5/12 siitä, mitä jää reunojen (2 × 3 rem) ja välin
   (6 rem) jälkeen; otsikko ”Oma musiikki” tarvitsee noin 9 rem (”musiikki” on 8,4 rem), ja
   (36 − 12) × 5/12 = 10 rem riittää. Normaalikoossa 1024 px on 64 rem, joten normaaliasettelu ei muutu.
   Allekkain-tilassa käytetään samoja sääntöjä kuin alle 1024 px:n näkymässä. */
main { container-type: inline-size; }
@container (max-width: 36rem) {
  .rinnakkain { display: block; }
  .valokuvat { padding-top: 0; }
  .valokuvat::before { content: none; }
  .musiikkilista { max-width: 36rem; }
}

.musiikkilista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (min-width: 37.5em) { .musiikkilista { gap: 1.5rem; max-width: 36rem; } }
/* Suurennettu teksti (tehtävä 11): kortit yhteen palstaan, kun osio on alle 10.5 em leveä tekstikokoon nähden.
   Peruste: pisin katkeamaton sana ”Spotifyssa” on 4.3 em, joten kortin on oltava vähintään 4.75 em
   (noin 10 %:n vara) ja kahden kortin rivin 2 × 4.75 + 1 em väli = 10.5 em. Normaalikoossa 320 px:n osio on 16 em. */
.musiikki { container-type: inline-size; }
@container (max-width: 10.5em) {
  .musiikkilista { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64em) { .musiikkilista { max-width: none; } }
.musiikkikortti { position: relative; }
/* Musiikkikuva: tiedostot ovat tasan 1:1, joten kuva näkyy kokonaisena. */
.kansi {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 0.9rem;
  overflow: hidden;
  background: var(--pinta);            /* näkyy vain ennen kuvan latautumista */
}
.kansi img { width: 100%; height: 100%; object-fit: cover; }
.musiikkikortti .kortti__otsikko { font-size: 1.125rem; }
@media (min-width: 64em) { .musiikkikortti .kortti__otsikko { font-size: 1.25rem; } }
.musiikkikortti__linkki {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
/* Koko kortti toimii linkkinä */
.musiikkikortti__linkki::after {
  content: "";
  position: absolute;
  inset: 0;
}
.musiikkikortti:hover .kansi { outline: 1px solid var(--kehys); outline-offset: 3px; }
.musiikki__kanava {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--viiva);
  font-size: 0.9375rem;
  font-weight: 600;
}
.musiikki__kanava a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Kolme valokuvaa. Puhelin: yksi iso + kaksi rinnakkain. 600 px alkaen: kolme rinnakkain. */
.kuvat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.valokuva {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pinta);            /* näkyy vain ennen kuvan latautumista */
}
.valokuva:first-child { grid-column: 1 / -1; }
.valokuva img {
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* tiedostot on jo rajattu 4:5-muotoon */
}
@media (min-width: 37.5em) {
  .kuvat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .valokuva:first-child { grid-column: auto; }
}
.valokuvat__galleria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 1.5rem;
}
.galleria-linkki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--luu);
  border-radius: 2px;
  color: var(--luu);
  font-weight: 700;
}
.galleria-linkki:hover { border-color: var(--oranssi); color: var(--oranssi); text-decoration: none; }
/* Tehtävä 16: kapeassa suurennetussa näkymässä (main-säiliö alle 15 rem, esim. 320–390 px ja 150–200 %:n
   juurifontti) teksti ja kuvake juoksevat keskitettynä kehyksen sisällä ja sivupehmuste on pienempi.
   Lähteessä oleva pehmeä tavuviiva (Kuva-galleriaan) näkyy vain, jos sana ei muuten mahdu riville;
   sanan loppuosa ja nuolikuvake pysyvät aina samalla rivillä. Normaalikoossa .galleria-linkki__loppu on
   display: contents, joten flex-asettelu ja ulkoasu ovat ennallaan (säiliö on silloin vähintään 20 rem). */
.galleria-linkki__loppu { display: contents; }
@media (max-width: 37.49em) {
  @container (max-width: 15rem) {
    .galleria-linkki { display: block; text-align: center; padding-inline: 0.5rem; }
    .galleria-linkki__loppu { display: inline; white-space: nowrap; }
  }
}
.valokuvat__osoite { color: var(--himmea); font-size: 0.875rem; }
@media (max-width: 37.49em) { .valokuvat__osoite { width: 100%; text-align: center; } }
@media (min-width: 37.5em) {
  .galleria-linkki {
    width: auto;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    color: var(--oranssi);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .galleria-linkki:hover { text-decoration: underline; }
}

/* ---------- 5. Työkalut ---------- */
.tyokalut {
  background: var(--pinta) url("../img/rae.png") repeat;
  background-size: 128px 128px;
  border-block: 1px solid var(--viiva);
  padding-block: calc(var(--osio-vali) * 0.8);
}
/* Alle 1280 px: otsikko, johdanto, kuva, esittely ja Aazi-maininta allekkain. */
.tyokalut__sisus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.tyokalut__teksti { display: contents; }
.tyokalut__teksti > .osio__otsikko { order: 1; }
.tyokalut__teksti > .osio__johdanto { order: 2; margin-top: -1.25rem; }
/* Kuvakaappaus (tehtävä 19): figure = kuvakehys + kuvateksti. Kehys on 16:10, enintään 800 px leveä
   (1600 px:n lähde riittää 2×-näytölle); alle 600 px:n näytöillä kuva on tiiviimpi 4:3-puhelinrajaus.
   Ohut reunus ja varjo erottavat vaalean käyttöliittymän tummasta sivusta. */
.tyokalut__kuva { order: 3; width: 100%; max-width: 50rem; margin: 0; }
.tyokalut__kehys {
  aspect-ratio: 16 / 10;
  background-color: var(--hiili);    /* näkyy vain ennen kuvan latautumista */
  box-shadow: 0 0 0 1px var(--kehys), 0 12px 32px rgba(0, 0, 0, 0.35);
}
.tyokalut__kehys img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 37.49em) {
  .tyokalut__kehys { aspect-ratio: 4 / 3; }
}
.tyokalut__kuvateksti { margin-top: 0.85rem; color: var(--himmea); font-size: 0.875rem; line-height: 1.45; }
.tyokalu { order: 4; max-width: 38rem; }
/* Tehtävä 20: filosofian opiskeluohjelma ja muiden ohjelmien lista PDF Chekker -kokonaisuuden jälkeen, ennen Aazi-mainintaa. */
.tyokalu--filosofia { order: 5; margin-top: 2.5rem; }
.tyokalu--muut { order: 6; margin-top: 2.5rem; }
.aazi-maininta { order: 7; max-width: 38rem; }
.tyokalu .kortti__otsikko { margin-bottom: 0.5rem; }
.tyokalu__ingressi {
  margin-bottom: 1rem;
  color: var(--luu-kirkas);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
}
.tyokalu p + p:not(.tyokalu__ingressi) { margin-top: 0.9rem; }
/* Ohjelmalista: oikea luettelo, merkkinä lyhyt oranssi viiva sivuston tehosteiden tapaan. */
.ohjelmalista { margin-top: 0.75rem; }
.ohjelmalista li { position: relative; padding-left: 1.1em; }
.ohjelmalista li + li { margin-top: 0.4rem; }
.ohjelmalista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.55em;
  height: 2px;
  background: var(--oranssi);
}
/* PDF Chekkerin yhteydenotto (tehtävä 13): linkki ja sen alla kopioitava osoite tavallisena tekstinä. */
.tyokalu__yhteys {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: 1.25rem;
}
.tyokalu__kysy { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.tyokalu__osoite { color: var(--himmea); font-size: 0.9375rem; overflow-wrap: anywhere; }
/* Pitkien sanojen tavutus: HTML:n ehdolliset tavutusmerkit (­) otetaan käyttöön vain,
   kun palsta on kapea tekstikokoon nähden (alle 10 em, esim. 320–390 px ja 200 %:n teksti).
   Normaalikokoisella tekstillä sanat pysyvät yhtenäisinä eikä tavuviivoja synny. */
.tyokalut__sisus { container-type: inline-size; -webkit-hyphens: none; hyphens: none; }
@container (max-width: 10em) {
  .tyokalut .osio__otsikko,
  .tyokalu,
  .aazi-maininta { -webkit-hyphens: manual; hyphens: manual; }
}
/* Aazi-maininta (tehtävä 21): otsikko, kuvaus ja linkki omana lohkonaan samalla tyylillä kuin muut
   Työkalut-osion esittelyt. Tehtävä 10: ”Valinnainen paikka” -tagi ja sen katkoviivakehys poistettu. */
.aazi-maininta { margin-top: 2.5rem; }
.aazi-maininta .kortti__otsikko { margin-bottom: 0.5rem; }
.aazi-maininta__linkki { margin-top: 0.9rem; }
.aazi-maininta a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
/* 1280 px alkaen: otsikko ja johdanto koko leveydeltä, esittely ja kuva rinnakkain. */
@media (min-width: 80em) {
  .tyokalut__sisus {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "otsikko otsikko"
      "johdanto johdanto"
      "tyokalu kuva"
      "filosofia muut"
      "aazi muut";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 4rem;
    row-gap: 0;
    align-items: start;
  }
  .tyokalut__teksti > .osio__otsikko { grid-area: otsikko; }
  .tyokalut__teksti > .osio__johdanto { grid-area: johdanto; margin-top: 0.75rem; }
  .tyokalu { grid-area: tyokalu; margin-top: 2.5rem; }
  .tyokalut__kuva { grid-area: kuva; margin-top: 2.5rem; }
  .tyokalu--filosofia { grid-area: filosofia; margin-top: 3rem; }
  .tyokalu--muut { grid-area: muut; margin-top: 3rem; }
  .aazi-maininta { grid-area: aazi; margin-top: 3rem; }
}

/* ---------- 6. Slujasta ja yhteys ---------- */
.slujasta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.slujasta__otsikko {
  font-family: var(--naytto);
  font-weight: 400;
  font-size: clamp(2.375rem, 0.75rem + 8.6vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
@media (min-width: 48em) {
  .slujasta__otsikko { font-size: clamp(2.75rem, 1rem + 3.9vw, 4.5rem); }
}
.slujasta__ingressi { margin-top: 1rem; font-size: 1.125rem; }
.slujasta__teksti {
  margin-top: 1.25rem;
  color: var(--himmea);
  font-size: 1.0625rem;
  max-width: 34em;
}
@media (min-width: 64em) {
  .slujasta__ingressi { font-size: 1.25rem; }
  .slujasta__teksti { font-size: 1.25rem; }
}
.slujasta__allekirjoitus { margin-top: 1rem; color: var(--himmea); font-size: 0.9375rem; }
/* Slujasta-otsikon ja -leipätekstin tavutus (tehtävä 11): vain kun esittelypalsta on alle 13 em leveä
   tekstikokoon nähden (”Uteliaisuus” on 10.7–12.3 em fonttikoosta riippuen). Normaalikoossa 320 px on 16 em. */
.slujasta__esittely { container-type: inline-size; }
.slujasta__otsikko, .slujasta__teksti { -webkit-hyphens: none; hyphens: none; }
@container (max-width: 13em) {
  .slujasta__otsikko, .slujasta__teksti { -webkit-hyphens: manual; hyphens: manual; }
}
/* Otsikon jälkiosa ”yhdistää.” tavutetaan vain alle 9.5 em:n palstassa (320–345 px / 200 %), jottei
   ”yhdis- / tää.” synny leveämmissä palstoissa, joissa koko sana mahtuu omalle rivilleen. */
.slujasta__otsikko-loppu { -webkit-hyphens: none; hyphens: none; }
@container (max-width: 9.5em) {
  .slujasta__otsikko-loppu { -webkit-hyphens: manual; hyphens: manual; }
}
.yhteys {
  align-self: start;
  background: var(--pinta);
  border: 1px solid var(--viiva);
  padding: 1.5rem;
}
/* Yhteystieto (tehtävä 13): kehote ja sähköpostilinkki. Osoitteen rivitys on vain visuaalista
   (<wbr> ja overflow-wrap), kopioitava teksti on aina sami@sluja.fi. */
.yhteys__kehote { margin-top: 0.75rem; -webkit-hyphens: none; hyphens: none; }
.yhteys__osoite { margin-top: 0.25rem; font-weight: 600; overflow-wrap: anywhere; }
.yhteys__osoite a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Kehotteen ”sähkö‑postia” tavutus vain, kun laatikko on alle 11 em leveä tekstikokoon nähden
   (tehtävän 11 säiliö säilyy). Normaalikoossa laatikko on vähintään 16 em. */
.yhteys { container-type: inline-size; }
@container (max-width: 11em) {
  .yhteys__kehote { -webkit-hyphens: manual; hyphens: manual; }
}
@media (min-width: 48em) {
  .slujasta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: start; }
}
@media (min-width: 64em) {
  .slujasta { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 4rem; }
  .yhteys { margin-top: 0.5rem; }
}
/* Suurennettu teksti (tehtävä 12): esittely ja Yhteys-laatikko allekkain, kun main on alle 40 rem leveä
   juurifonttiin nähden. Peruste: laatikon tekstipalsta on laatikon leveys − 4,4 rem (laatikon ja merkinnän
   sisennykset) ja ”Keskeneräinen:” noin 7 rem, joten laatikon on oltava vähintään noin 12 rem. 64 rem:n
   asettelussa (4/12 leveydestä, väli 4 rem, reunat 2 × 3 rem) se toteutuu vasta 46 rem:stä ja 48 rem:n
   asettelussa (5/12, väli 3 rem, reunat 2 × 2 rem) 36 rem:stä. 40 rem kattaa 768–1279 px:n näkymät
   175–200 %:ssa; 40–46 rem:n välillä laatikko on 10–12 rem, jolloin tehtävän 11 tavutus pitää tekstin ehjänä.
   Normaalikoossa 768 px on 48 rem, joten normaaliasettelu ei muutu. */
@container (max-width: 40rem) {
  .slujasta { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .yhteys { margin-top: 0; }
}

/* ---------- Tietosuojasivu /tietosuoja/ (tehtävä 18) ----------
   Yksi tekstipalsta etusivun osiotyylillä. Leipäteksti on luukeltaista (--luu) eikä himmeää, koska sivu on
   luettavaksi tarkoitettu selosteteksti. Ei ulkoisia resursseja, ei skriptiriippuvuutta. */
.tietosuoja__paluu { margin-bottom: 1.5rem; font-size: 0.9375rem; font-weight: 600; }
.tietosuoja__paluu a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ikoni--edessa { margin: 0 0.35em 0 0; }
.tietosuoja__teksti { max-width: 38em; margin-top: 1.25rem; }
.tietosuoja__teksti p + p { margin-top: 1rem; }
.tietosuoja__otsikko {
  margin-top: 2.25rem;
  font-family: var(--leipa);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--luu);
}
.tietosuoja__otsikko + p { margin-top: 0.6rem; }
.tietosuoja__teksti a { font-weight: 600; }
/* Leipätekstin ulkoisen linkin nuolikuvakkeen jälkeen tulee piste: kuvakkeen tyhjä oikea reuna kavennetaan. */
.tietosuoja__teksti a .ikoni { margin-right: -0.2em; }
.tietosuoja__teksti a[href^="mailto:"] { overflow-wrap: anywhere; }
.tietosuoja__loppu { margin-top: 2.5rem; }
@media (min-width: 64em) {
  .tietosuoja__teksti { font-size: 1.125rem; }
  .tietosuoja__otsikko { font-size: 1.5rem; }
}

/* ---------- Alatunniste ---------- */
.alatunniste { padding-bottom: 2.5rem; }
.alatunniste__sisus {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
}
.alatunniste__sisus::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--reuna);
  right: var(--reuna);
  border-top: 1px solid var(--viiva);
}
.logo--pieni { padding: 0 0 0.5rem; font-size: 1.125rem; }
.alatunniste__tekija p:last-child { color: var(--himmea); font-size: 0.875rem; }
.alatunniste__linkit li { border-bottom: 1px solid var(--pinta-2); }
.alatunniste__linkit a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--luu);
  font-size: 0.9375rem;
  font-weight: 500;
}
.alatunniste__linkit a:hover { color: var(--oranssi); }
.aazi-linkki--ala { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; font-size: 1rem; }
.alatunniste__domain { margin-top: 0.75rem; color: var(--himmea); font-size: 0.875rem; }
@media (min-width: 64em) {
  .alatunniste__sisus {
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 3rem;
  }
  .alatunniste__linkit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2rem;
  }
  .alatunniste__linkit li { border: 0; }
  .alatunniste__aazi { text-align: right; }
}

/* ---------- Liikkeen vähentäminen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}