/* Fontit ladataan omalta palvelimelta (ei Google Fonts -yhteyttä, GDPR). */
@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  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: "Bricolage";
  src: url("/assets/fonts/bricolage-latin-ext.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Atkinson"; src: url("/assets/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Atkinson"; src: url("/assets/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }

/* Värit on poimittu NOVAn logosta. */
:root {
  --tausta: #faf9f4;
  --pinta: #ffffff;
  --yo: #102e52;
  --yo-syva: #0a1f3a;
  --turkoosi: #17b2ae;
  --turkoosi-teksti: #0a7a77;
  --turkoosi-vaalea: #d8f2f0;
  --aurinko: #f9b121;
  --aurinko-vaalea: #fdebc0;
  --viiva: #e7e2d4;
  --valkoinen: #ffffff;

  --otsikko: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --leipa: "Atkinson", "Segoe UI", system-ui, sans-serif;

  --leveys: 76rem;
  --kapea: 44rem;
  --reuna: clamp(1.25rem, 5vw, 3rem);
  --pyoristys: 1.25rem;
  --varjo: 0 1px 2px rgba(16, 46, 82, 0.06), 0 8px 24px -8px rgba(16, 46, 82, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--tausta);
  color: var(--yo);
  font-family: var(--leipa);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--otsikko);
  font-stretch: 85%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

a { color: var(--turkoosi-teksti); text-underline-offset: 0.18em; text-decoration-thickness: 2px; font-weight: 700; }
a:hover { color: var(--yo); }
:focus-visible { outline: 3px solid var(--turkoosi); outline-offset: 3px; border-radius: 4px; }

.piilo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohita { position: absolute; left: 1rem; top: -4rem; background: var(--aurinko); color: var(--yo); padding: 0.5rem 1rem; z-index: 30; border-radius: 0.5rem; }
.ohita:focus { top: 1rem; }

/* Sivellinalleviivaus otsikoille – kuin logon keltaiset vedot */
.sivellin { position: relative; display: inline-block; z-index: 0; }
.sivellin::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.15em;
  right: -0.25em;
  bottom: 0.02em;
  height: 0.42em;
  background: url("/assets/img/sivellin.svg") no-repeat center / 100% 100%;
}

/* Yläpalkki */
.yla {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 244, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.yla.rullattu { border-bottom-color: var(--viiva); box-shadow: 0 6px 20px -14px rgba(16, 46, 82, 0.5); }
.yla-sisus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--leveys);
  margin: 0 auto;
  padding: 0.6rem var(--reuna);
}
.merkki { display: block; flex: none; border-radius: 0.5rem; }
.merkki img { height: 3.1rem; width: auto; }
.yla ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.yla nav a {
  display: block;
  color: var(--yo);
  text-decoration: none;
  font-family: var(--otsikko);
  font-stretch: 90%;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.45rem 0.9rem;
  border-radius: 99px;
  transition: background-color 0.15s;
}
.yla nav a:hover { background: var(--turkoosi-vaalea); }
.yla nav a[aria-current="page"] { background: var(--yo); color: var(--valkoinen); }
.kielivalinta { margin-left: 0.5rem; }
.kielivalinta a { border: 2px solid var(--yo); padding: 0.3rem 0.8rem !important; }
.kielivalinta a:hover { background: var(--aurinko) !important; }

.valikko-nappi { display: none; }
@media (max-width: 52rem) {
  .js .valikko-nappi {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font: 700 1.05rem var(--otsikko);
    color: var(--yo);
    background: var(--pinta);
    border: 2px solid var(--yo);
    border-radius: 99px;
    padding: 0.45rem 1rem;
    cursor: pointer;
  }
  .valikko-ikoni { display: grid; gap: 3px; width: 1.1rem; }
  .valikko-ikoni i { display: block; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
  .valikko-nappi[aria-expanded="true"] .valikko-ikoni i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .valikko-nappi[aria-expanded="true"] .valikko-ikoni i:nth-child(2) { opacity: 0; }
  .valikko-nappi[aria-expanded="true"] .valikko-ikoni i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .js .yla nav { display: none; width: 100%; padding: 0.5rem 0 1rem; }
  .js .yla nav.auki { display: block; }
  .js .yla nav ul { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .js .yla nav a { font-size: 1.4rem; padding: 0.7rem 1rem; }
  .js .kielivalinta { margin: 0.5rem 0 0; }
  .js .kielivalinta a { display: inline-block; }
}

/* Sankari */
.sankari { position: relative; overflow: hidden; padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.sankari-sisus {
  position: relative;
  z-index: 1;
  max-width: var(--leveys);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--reuna) clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .sankari-sisus { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .sankari-logo { order: 2; }
}
.sankari-logo img { width: 100%; max-width: 40rem; margin: 0 auto; animation: nousee 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.sankari-otsikko { font-size: clamp(2.4rem, 6.5vw, 4.5rem); line-height: 1; margin-bottom: 1.5rem; }
.napit { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.nappi {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 99px;
  border: 2.5px solid var(--yo);
  color: var(--yo);
  background: var(--pinta);
  font-family: var(--otsikko);
  font-stretch: 90%;
  font-size: 1.15rem;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--yo);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nappi:hover { color: var(--yo); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--yo); }
.nappi:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--yo); }
.nappi-ensisijainen { background: var(--aurinko); }
.nappi::after { content: "→"; transition: transform 0.15s; }
.nappi:hover::after { transform: translateX(3px); }

.koriste-kaari {
  position: absolute;
  top: -9rem;
  right: -9rem;
  width: 22rem;
  height: 22rem;
  border: 2.2rem solid var(--turkoosi);
  border-radius: 50%;
  opacity: 0.9;
}
.koriste-pisteet { position: absolute; top: 1.5rem; left: var(--reuna); display: flex; gap: 0.45rem; }
.koriste-pisteet i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--turkoosi); }
.koriste-pisteet i:nth-child(2) { background: var(--aurinko); }
.koriste-pisteet i:nth-child(3) { background: var(--yo); }
@media (max-width: 56rem) { .koriste-pisteet { display: none; } .koriste-kaari { width: 14rem; height: 14rem; top: -7rem; right: -7rem; border-width: 1.4rem; } }
/* Vino keltainen raita kuten logon taustassa */
.koriste-raita {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: clamp(3rem, 6vw, 5.5rem);
}

@keyframes nousee {
  from { transform: translateY(1.5rem) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Aukiolotila (täytetään selaimessa) */
.tila {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  background: var(--pinta);
  color: var(--yo);
  border: 2px solid var(--viiva);
  border-radius: 99px;
  line-height: 1.3;
  font-weight: 700;
}
.tila::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #c2410c; }
.tila[data-auki="true"] { border-color: var(--turkoosi); background: var(--turkoosi-vaalea); }
.tila[data-auki="true"]::before { background: #0a8a3a; box-shadow: 0 0 0 0 rgba(10, 138, 58, 0.5); animation: sykkii 2s infinite; }
@keyframes sykkii { 70% { box-shadow: 0 0 0 8px rgba(10, 138, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 138, 58, 0); } }
.tila[hidden] { display: none; }
.tila-vaalea { margin-bottom: 1.5rem; }

/* Osiot */
.osio { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.osio-sisus { max-width: var(--leveys); margin: 0 auto; padding: 0 var(--reuna); }
.osio-otsikko { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.5rem; }
.osio-otsikko h2 { margin: 0; }
.kaksi { display: grid; gap: 2rem 4rem; }
@media (min-width: 52rem) { .kaksi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.osio-kerhot { background: var(--yo); color: var(--valkoinen); border-radius: clamp(1.5rem, 4vw, 3rem); margin: 0 clamp(0.5rem, 2vw, 1.5rem); }
.osio-kerhot a.linkki-iso { color: var(--aurinko); }
.osio-kerhot .sivu-ingressi { color: rgba(255, 255, 255, 0.85); }
.osio-esittely { background: var(--turkoosi-vaalea); margin-top: clamp(3rem, 7vw, 5.5rem); }
.teksti { max-width: 38em; }
.teksti > :last-child { margin-bottom: 0; }
.ikaryhma { display: inline-block; font-weight: 700; background: var(--aurinko); padding: 0.3rem 0.9rem; border-radius: 99px; }
.osoite { font-family: var(--otsikko); font-stretch: 90%; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.linkki-iso { font-size: 1.1rem; white-space: nowrap; }
.linkki-iso::after { content: " →"; }
.tyhja { padding: 1.25rem 0; opacity: 0.8; }
.sivu-ingressi { font-size: 1.25rem; max-width: 36em; margin-bottom: 2rem; }

/* NOVA-lyhenne */
.lyhenne { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.lyhenne li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.75rem; }
.lyhenne-kirjain {
  display: inline-grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.9rem;
  font: 800 2rem/1 var(--otsikko);
  color: var(--valkoinen);
  background: var(--yo);
  transform: rotate(-4deg);
}
.lyhenne li:nth-child(2) .lyhenne-kirjain { background: var(--turkoosi-teksti); transform: rotate(3deg); }
.lyhenne li:nth-child(3) .lyhenne-kirjain { background: var(--aurinko); color: var(--yo); transform: rotate(-2deg); }
.lyhenne li:nth-child(4) .lyhenne-kirjain { transform: rotate(5deg); }
.lyhenne-sana { font: 800 clamp(1.5rem, 3.5vw, 2rem) var(--otsikko); font-stretch: 85%; }
.lyhenne-kaannos { flex-basis: 100%; padding-left: 3.95rem; margin-top: -0.3rem; font-size: 1rem; opacity: 0.8; }

/* Tapahtumat: lista */
.tapahtumat { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.tapahtuma[hidden] { display: none; }
.tapahtuma a {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1rem;
  color: var(--yo);
  text-decoration: none;
  font-weight: 400;
  background: var(--pinta);
  border: 2px solid var(--viiva);
  border-radius: var(--pyoristys);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.tapahtuma a:hover { transform: translateY(-3px); box-shadow: var(--varjo); border-color: var(--turkoosi); }
.tapahtuma a:hover .tapahtuma-nimi { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.tapahtuma-pvm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 1rem;
  background: var(--aurinko);
  color: var(--yo);
}
.tapahtuma:nth-child(3n+2) .tapahtuma-pvm { background: var(--turkoosi); }
.tapahtuma:nth-child(3n+3) .tapahtuma-pvm { background: var(--yo); color: var(--valkoinen); }
.tapahtuma-paiva { font: 800 2.3rem/0.9 var(--otsikko); font-stretch: 75%; }
.tapahtuma-kuu { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tapahtuma-tiedot { display: flex; flex-direction: column; gap: 0.2rem; }
.tapahtuma-nimi { font: 700 1.35rem/1.2 var(--otsikko); font-stretch: 90%; }
.tapahtuma-meta { font-weight: 700; font-size: 1rem; color: var(--turkoosi-teksti); }
.tapahtuma-kuvaus { font-size: 1rem; opacity: 0.85; }
.tapahtumat-menneet .tapahtuma-pvm { background: var(--viiva) !important; color: var(--yo) !important; }
.tapahtumat-menneet .tapahtuma a { opacity: 0.8; }
.menneet { margin-top: 3rem; }
/* Etusivulla kortteina rinnakkain */
@media (min-width: 48rem) {
  .tapahtumat-kortit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .tapahtumat-kortit .tapahtuma a { height: 100%; grid-template-columns: 1fr; padding: 1.25rem; }
  .tapahtumat-kortit .tapahtuma-pvm { width: 5rem; }
}

/* Kerhot: galleria */
.kerhot { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.kerho[hidden] { display: none; }
.kerho a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--pinta);
  color: var(--yo);
  text-decoration: none;
  font-weight: 400;
  border-radius: var(--pyoristys);
  overflow: hidden;
  box-shadow: var(--varjo);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s;
}
.kerho a:hover { transform: translateY(-5px) rotate(-0.6deg); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45); }
.kerho:nth-child(even) a:hover { transform: translateY(-5px) rotate(0.6deg); }
.kerho-kuva {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--turkoosi);
}
.kerho-kuva img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.kerho a:hover .kerho-kuva img { transform: scale(1.05); }
/* Kuvaton kerho: iso kirjain ja sivellinveto */
.kerho-kuva:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: auto -10% 18% -10%;
  height: 22%;
  background: var(--aurinko);
  -webkit-mask: url("/assets/img/sivellin.svg") no-repeat center / 100% 100%;
  mask: url("/assets/img/sivellin.svg") no-repeat center / 100% 100%;
  transform: rotate(-6deg);
}
.kerho-kirjain { position: relative; font: 800 clamp(5rem, 12vw, 7rem)/1 var(--otsikko); font-stretch: 75%; color: var(--valkoinen); transform: rotate(-5deg); }
.kerho-aurinko .kerho-kuva { background: var(--aurinko); }
.kerho-aurinko .kerho-kirjain { color: var(--yo); }
.kerho-aurinko .kerho-kuva::before { background: var(--turkoosi); }
.kerho-yo .kerho-kuva { background: #1d4a7a; }
.kerho-merkki {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  background: var(--pinta);
  color: var(--yo);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.kerho-tiedot { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.25rem 1.4rem; }
.kerho-nimi { font: 800 1.45rem/1.15 var(--otsikko); font-stretch: 85%; }
.kerho-aika { font-weight: 700; font-size: 1rem; color: var(--turkoosi-teksti); }
.kerho-kuvaus { font-size: 1rem; opacity: 0.85; }
.kerho-paikka { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; font-weight: 700; }
.kerho-paikka::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--aurinko); }

.suodatin { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.suodatin[hidden] { display: none; }
.suodatin button {
  font: 700 1rem var(--leipa);
  color: var(--yo);
  background: var(--pinta);
  border: 2px solid var(--yo);
  border-radius: 99px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
}
.suodatin button:hover { background: var(--turkoosi-vaalea); }
.suodatin button[aria-pressed="true"] { background: var(--yo); color: var(--valkoinen); }

/* Kerhon oma sivu */
.kerho-merkki-sivu { position: static; display: inline-block; margin-bottom: 1rem; background: var(--turkoosi-vaalea); box-shadow: none; }
.kerho-aurinko .kerho-merkki-sivu { background: var(--aurinko-vaalea); }
.faktat-lisa { font-weight: 400; font-size: 1rem; }

/* Kuvagalleria */
.galleria { list-style: none; margin: 0; padding: 0; columns: 3 14rem; column-gap: 1rem; }
.galleria li { break-inside: avoid; margin-bottom: 1rem; }
.galleria a { display: block; border-radius: 1rem; overflow: hidden; }
.galleria img { width: 100%; transition: transform 0.4s; }
.galleria a:hover img { transform: scale(1.04); }
.valoboksi { border: 0; padding: 0; background: transparent; max-width: min(92vw, 70rem); max-height: 92vh; overflow: visible; }
.valoboksi::backdrop { background: rgba(10, 31, 58, 0.9); }
.valoboksi figure { margin: 0; }
.valoboksi img { max-width: 100%; max-height: 82vh; margin: 0 auto; border-radius: 0.75rem; }
.valoboksi figcaption { color: var(--valkoinen); text-align: center; padding: 0.75rem 0 0; }
.valoboksi-nappi {
  position: fixed;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--aurinko);
  color: var(--yo);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}
.valoboksi-sulje { top: 1rem; right: 1rem; }
.valoboksi-edellinen { left: 1rem; top: 50%; translate: 0 -50%; }
.valoboksi-seuraava { right: 1rem; top: 50%; translate: 0 -50%; }

/* Tiedotteet */
.tiedotteet { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
.tiedotteet a {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 1rem 1.25rem;
  color: var(--yo);
  text-decoration: none;
  background: var(--pinta);
  border: 2px solid var(--viiva);
  border-radius: 1rem;
  transition: border-color 0.15s;
}
@media (min-width: 40rem) { .tiedotteet a { grid-template-columns: 10rem minmax(0, 1fr); } }
.tiedotteet a:hover { border-color: var(--aurinko); }
.tiedotteet a:hover span { text-decoration: underline; text-decoration-thickness: 2px; }
.tiedotteet time { font-size: 1rem; color: var(--turkoosi-teksti); }

/* Käynti ja aukioloajat */
.aukiolo-kortti { background: var(--pinta); border-radius: var(--pyoristys); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--varjo); }
.aukiolo { border-collapse: collapse; width: 100%; }
.aukiolo th, .aukiolo td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 2px dashed var(--viiva); }
.aukiolo th { font-weight: 400; }
.aukiolo td { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.aukiolo tr.tanaan th, .aukiolo tr.tanaan td { background: var(--aurinko-vaalea); font-weight: 700; }
.aukiolo-muut { margin: 0.75rem 0 0; font-size: 1rem; opacity: 0.8; }

.some { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; }
.some a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 1rem 0.4rem 0.75rem; border-radius: 99px; border: 2px solid currentColor; text-decoration: none; }
.some svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.some svg .tayte { fill: currentColor; stroke: none; }

/* Sisäsivut */
.kapea { max-width: calc(var(--kapea) + 2 * var(--reuna)); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--reuna) clamp(3rem, 8vw, 6rem); }
.levea { max-width: var(--leveys); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--reuna) clamp(3rem, 8vw, 6rem); }
.sivu h2 { font-size: 1.5rem; margin-top: 2rem; }
.takaisin { margin-bottom: 1.5rem; }
.takaisin a::before { content: "← "; }
.faktat { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.5rem; }
.faktat > div { background: var(--pinta); border: 2px solid var(--viiva); border-radius: 1rem; padding: 0.6rem 1rem; }
.faktat dt { font-size: 0.9rem; opacity: 0.75; }
.faktat dd { margin: 0; font-weight: 700; font-size: 1.15rem; }
.ingressi { font-size: 1.3rem; line-height: 1.5; }
.julkaistu { color: var(--turkoosi-teksti); font-weight: 700; }
.artikkeli-kuva { margin: 1.5rem 0; border-radius: var(--pyoristys); }
.artikkeli .teksti h2 { font-size: 1.5rem; margin-top: 2rem; }
.virhe-koodi { font: 800 clamp(6rem, 25vw, 11rem)/0.9 var(--otsikko); font-stretch: 75%; color: var(--turkoosi); margin: 0; }

/* Alapalkki */
.ala { position: relative; background: var(--yo); color: var(--valkoinen); margin-top: 4rem; }
.ala-raita {
  position: absolute;
  left: -5%;
  right: -5%;
  top: -1.6rem;
  height: 2.6rem;
  background: var(--aurinko);
  transform: rotate(-1.5deg);
}
.ala-sisus {
  position: relative;
  max-width: var(--leveys);
  margin: 0 auto;
  padding: 4rem var(--reuna) 2.5rem;
  display: grid;
  gap: 1.5rem 3rem;
}
@media (min-width: 48rem) { .ala-sisus { grid-template-columns: 1.2fr 1fr 1fr; } .ala-pieni { grid-column: 1 / -1; } }
.ala a { color: var(--valkoinen); }
.ala a:hover { color: var(--aurinko); }
.ala :focus-visible { outline-color: var(--aurinko); }
.ala-nimi { font: 800 3rem/1 var(--otsikko); font-stretch: 75%; margin-bottom: 0.25rem; }
.ala-koko-nimi { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.85rem; color: var(--aurinko); }
.ala-linkit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ala-linkit a { text-decoration: none; }
.ala-linkit a:hover { text-decoration: underline; }
.ala-pieni { font-size: 0.95rem; opacity: 0.8; margin: 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }

@media (max-width: 30rem) {
  .tapahtuma a { grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; }
  .tapahtuma-paiva { font-size: 2rem; }
  .merkki img { height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Atkinsonin nolla on vinoviivallinen ja näyttää lihavoituna yliviivatulta,
   joten ajat ja päivämäärät asetetaan Bricolagella. */
.aukiolo td, .tapahtuma-meta, .tiedotteet time, .tila, .faktat dd, .julkaistu, .kerho-aika {
  font-family: var(--otsikko);
  font-stretch: 90%;
  font-variant-numeric: tabular-nums;
}
.ei-katkea { white-space: nowrap; }

/* ---------- Tilavaraus ---------- */
.navi-varaa a { background: var(--aurinko); }
.yla nav .navi-varaa a:hover { background: var(--aurinko); box-shadow: 0 0 0 2px var(--yo) inset; }
.yla nav .navi-varaa a[aria-current="page"] { background: var(--yo); color: var(--valkoinen); }

.varaus-otsikko { margin-bottom: 1.5rem; }
.varaus h2 { margin-top: 0; }
@media (max-width: 30rem) { .pohja-nimi { padding: 0.25rem 0.5rem 0.3rem; font-size: 0.72rem; } .pohja { padding: 0.4rem; } }
.varaus-otsikko .sivu-ingressi { margin-bottom: 0; }
.varaus-asettelu { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 64rem) {
  .varaus-asettelu { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); }
  .varaus-pohja { position: sticky; top: 5.5rem; }
}

/* Pohjapiirros */
.pohja {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
  background: var(--pinta);
  border-radius: var(--pyoristys);
  padding: 0.6rem;
  box-shadow: var(--varjo);
}
.pohja-kuva { display: block; width: 100%; height: auto; }
.pohja-kasvi circle { fill: #3f9b5a; stroke: #2e7a44; stroke-width: 2; }
.pohja-tila { cursor: pointer; }
.pohja-tila .pohja-lattia { transition: filter 0.15s; }
.pohja-tila:hover .pohja-lattia { filter: brightness(1.04) saturate(1.2); }
.pohja-korostukset rect { stroke: var(--aurinko); stroke-width: 6; rx: 4; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.pohja-korostukset rect.valittu { opacity: 1; }
.pohja-nimi {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  gap: 0.05rem;
  text-align: left;
  padding: 0.35rem 0.7rem 0.4rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--yo);
  color: var(--valkoinen);
  font: 700 clamp(0.75rem, 2.6vw, 0.95rem)/1.2 var(--otsikko);
  box-shadow: 0 4px 12px -4px rgba(10, 31, 58, 0.5);
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
  white-space: nowrap;
}
.pohja-nimi:hover { transform: scale(1.06); }
.pohja-nimi[aria-pressed="true"] { background: var(--aurinko); color: var(--yo); transform: scale(1.08); }
.pohja-tila-nyt { display: flex; align-items: center; gap: 0.35rem; font: 400 0.8em var(--leipa); opacity: 0.9; }
.pohja-tila-nyt:empty { display: none; }
.pohja-tila-nyt::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #34c77b; }
.varattu-nyt .pohja-tila-nyt::before { background: #f0643c; }
/* Vasemman reunan tilojen nimet kiinnitetään vasemmalta, etteivät ne valu reunan yli */
.pohja-nimi[data-huone="kokoushuone"] { left: 5%; top: 12%; translate: 0 -50%; }
.pohja-nimi[data-huone="salonki"] { left: 68%; top: 18.5%; }
.pohja-nimi[data-huone="kirjasto"] { left: 5%; top: 33.5%; translate: 0 -50%; }
.pohja-nimi[data-huone="lautapelihuone"] { left: 4%; top: 56%; translate: 0 -50%; }
.pohja-nimi[data-huone="studio"] { left: 60%; top: 58%; }
.pohja-nimi[data-huone="areena"] { left: 68%; top: 88.5%; }

/* Valittu tila ja viikkonavigaatio */
.varaus-kalenteri { background: var(--pinta); border-radius: var(--pyoristys); padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: var(--varjo); min-width: 0; }
.valittu-tila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.valittu-nimi { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 0.2rem; }
.valittu-tiedot { margin: 0; }
.viikko-navi { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.viikko-otsikko { margin: 0; font: 800 1.2rem var(--otsikko); font-stretch: 90%; min-width: 11rem; text-align: center; }
.viikko-nuoli, .viikko-tama {
  font: 700 1rem var(--leipa);
  color: var(--yo);
  background: var(--pinta);
  border: 2px solid var(--yo);
  border-radius: 99px;
  height: 2.5rem;
  min-width: 2.5rem;
  padding: 0 0.8rem;
  cursor: pointer;
}
.viikko-nuoli:hover:not(:disabled), .viikko-tama:hover { background: var(--turkoosi-vaalea); }
.viikko-nuoli:disabled { opacity: 0.3; cursor: default; }
.viikko-tama { margin-left: auto; }

/* Viikkokalenteri */
.kalenteri-kehys { overflow-x: auto; margin: 0 calc(-1 * clamp(0.25rem, 1vw, 0.5rem)); padding: 0 clamp(0.25rem, 1vw, 0.5rem) 0.25rem; }
.kalenteri {
  --rivi: 1.35rem;
  display: grid;
  grid-template-columns: 3rem repeat(7, minmax(3.6rem, 1fr));
  min-width: 32rem;
  column-gap: 3px;
}
.kalenteri[aria-busy="true"] { opacity: 0.6; }
.kal-paiva { text-align: center; padding: 0.3rem 0 0.5rem; line-height: 1.15; font-size: 0.85rem; }
.kal-paiva span { display: block; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; font-size: 0.75rem; }
.kal-paiva b { font-family: var(--otsikko); font-size: 1.05rem; }
.kal-paiva.tanaan b { background: var(--aurinko); border-radius: 99px; padding: 0 0.45rem; }
.kal-ajat { display: grid; grid-template-rows: repeat(calc(var(--riveja) / 2), calc(var(--rivi) * 2)); font-size: 0.75rem; font-family: var(--otsikko); opacity: 0.7; }
.kal-ajat span { translate: 0 -0.55em; text-align: right; padding-right: 0.4rem; }
.kal-sarake { display: grid; grid-template-rows: repeat(var(--riveja), var(--rivi)); background: var(--tausta); border-radius: 0.5rem; overflow: hidden; }
.kal-sarake.tanaan { background: var(--aurinko-vaalea); }
.kal-solu {
  grid-column: 1;
  border: 0;
  border-top: 1px solid var(--viiva);
  background: transparent;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}
.kal-solu.puoli { border-top-style: dashed; border-top-color: rgba(231, 226, 212, 0.6); }
.kal-solu:first-child { border-top: 0; }
.kal-solu:hover:not(:disabled), .kal-solu:focus-visible { background: var(--turkoosi-vaalea); outline-offset: -3px; }
.kal-solu:hover:not(:disabled)::after { content: "+"; font-weight: 700; color: var(--turkoosi-teksti); }
.kal-solu.mennyt { background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(16, 46, 82, 0.05) 5px 7px); cursor: default; }
.kal-varaus {
  grid-column: 1;
  z-index: 1;
  margin: 1px 2px;
  padding: 0.2rem 0.35rem;
  border-radius: 0.4rem;
  background: var(--yo);
  color: var(--valkoinen);
  font-size: 0.72rem;
  line-height: 1.2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kal-varaus b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-varaus span { opacity: 0.85; font-family: var(--otsikko); }
.kal-varaus.odottaa {
  background: repeating-linear-gradient(-45deg, var(--aurinko-vaalea) 0 6px, #f7d98f 6px 12px);
  color: var(--yo);
  border: 2px dashed var(--aurinko);
}
.kal-varaus.kerho { background: var(--turkoosi-teksti); color: var(--valkoinen); }
.selite-kerho { background: var(--turkoosi-teksti); }
.selite { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 1rem 0 0; padding: 0; font-size: 0.9rem; }
.selite li { display: flex; align-items: center; gap: 0.4rem; }
.selite i { width: 1rem; height: 1rem; border-radius: 0.25rem; }
.selite-vapaa { background: var(--tausta); border: 1px solid var(--viiva); }
.selite-varattu { background: var(--yo); }
.selite-odottaa { background: repeating-linear-gradient(-45deg, var(--aurinko-vaalea) 0 3px, #f7d98f 3px 6px); border: 1.5px dashed var(--aurinko); }
.selite-valittu { background: var(--turkoosi-vaalea); border: 1px solid var(--turkoosi); }
.varaus-vihje { margin: 0.5rem 0 0; font-size: 0.9rem; opacity: 0.75; }
.varaus-virhe { margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: 0.75rem; background: #fde4dc; color: #8a2a0a; font-weight: 700; }
.varaus-virhe[hidden] { display: none; }

/* Varauslomake */
.varaus-ikkuna {
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  border: 0;
  border-radius: var(--pyoristys);
  padding: 0;
  background: var(--pinta);
  color: var(--yo);
  box-shadow: 0 30px 60px -20px rgba(10, 31, 58, 0.6);
}
.varaus-ikkuna::backdrop { background: rgba(10, 31, 58, 0.55); backdrop-filter: blur(3px); }
.varaus-ikkuna[open] { animation: nousee 0.3s cubic-bezier(0.2, 1.2, 0.4, 1); }
.varaus-lomake, .varaus-valmis { padding: clamp(1.25rem, 4vw, 2rem); }
.varaus-lomake[hidden], .varaus-valmis[hidden] { display: none; }
.ikkuna-yla { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.ikkuna-yla h2 { margin: 0; font-size: 1.8rem; }
.ikkuna-sulje { width: 2.5rem; height: 2.5rem; flex: none; border: 0; border-radius: 50%; background: var(--tausta); color: var(--yo); font-size: 1.1rem; cursor: pointer; }
.ikkuna-sulje:hover { background: var(--aurinko); }
.lomake-aika {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 0;
  border-radius: 1rem;
  background: var(--turkoosi-vaalea);
}
.lomake-rivit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 34rem) {
  .lomake-aika { grid-template-columns: 1fr 1fr; }
  .lomake-aika .kentta:nth-child(2) { grid-column: 1 / -1; }
  .lomake-rivit { grid-template-columns: 1fr; }
}
.kentta { display: grid; gap: 0.3rem; align-content: start; font-weight: 700; font-size: 0.95rem; }
.kentta-levea { grid-column: 1 / -1; }
.valinnainen { font-weight: 400; opacity: 0.7; }
.kentta input, .kentta select, .kentta textarea {
  width: 100%;
  font: 400 1rem var(--leipa);
  color: var(--yo);
  background: var(--pinta);
  border: 2px solid var(--viiva);
  border-radius: 0.7rem;
  padding: 0.6rem 0.75rem;
  min-height: 2.9rem;
}
.kentta textarea { resize: vertical; min-height: 5rem; }
.kentta input:focus, .kentta select:focus, .kentta textarea:focus { outline: none; border-color: var(--turkoosi); box-shadow: 0 0 0 3px var(--turkoosi-vaalea); }
.kentta input:user-invalid, .kentta textarea:user-invalid { border-color: #e0674a; }
.suostumus { display: flex; gap: 0.6rem; align-items: start; margin: 1.25rem 0 0; font-size: 0.95rem; }
.suostumus input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--yo); flex: none; }
.ikkuna-napit { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
.nappi-toissijainen { box-shadow: none; }
.nappi-toissijainen::after, .ikkuna-napit .nappi::after, .valittu-tila .nappi::after { content: none; }
.nappi:disabled { opacity: 0.6; cursor: wait; transform: none; }
button.nappi { cursor: pointer; font-weight: 700; }
.varaus-valmis { text-align: center; }
.valmis-merkki {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0.5rem auto 1rem;
  border-radius: 50%;
  background: var(--turkoosi);
  color: var(--valkoinen);
  font-size: 2.2rem;
  font-weight: 700;
  animation: nousee 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.valmis-yhteenveto { display: inline-block; font-weight: 700; background: var(--aurinko-vaalea); padding: 0.4rem 1rem; border-radius: 99px; }

/* ---------- Tapahtumien kuvat, tyypit ja hinnat ---------- */
.tapahtuma-kuva { display: none; }
.tapahtuma-kuva img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.tapahtuma a:hover .tapahtuma-kuva img { transform: scale(1.05); }
.tapahtuma-merkit { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.25rem; }
.tapahtuma-merkit span {
  font: 700 0.78rem/1.4 var(--leipa);
  padding: 0.1rem 0.6rem;
  border-radius: 99px;
  background: var(--tausta);
  border: 1.5px solid var(--viiva);
  color: var(--yo);
}
.tapahtuma-merkit .merkki-tyyppi { background: var(--yo); border-color: var(--yo); color: var(--valkoinen); }
.tapahtuma-merkit .merkki-turnaus { background: #c2410c; border-color: #c2410c; }
.tapahtuma-merkit .merkki-tyopaja { background: var(--turkoosi-teksti); border-color: var(--turkoosi-teksti); }
.tapahtuma-merkit .merkki-retki { background: #2f7d4a; border-color: #2f7d4a; }
.tapahtuma-merkit .merkki-juhla { background: #8a3aa0; border-color: #8a3aa0; }
.tapahtuma-merkit .merkki-hinta { background: var(--turkoosi-vaalea); border-color: transparent; }
.tapahtuma-merkit .merkki-hinta.maksullinen { background: var(--aurinko-vaalea); border-color: var(--aurinko); }
.artikkeli > .tapahtuma-merkit { margin-bottom: 0.75rem; }

/* Etusivun kortit: kuva ylhäällä, päivämäärä kuvan päällä */
.tapahtumat-kortit .tapahtuma.on-kuva a { display: block; position: relative; padding: 0; height: 100%; }
.tapahtumat-kortit .on-kuva .tapahtuma-kuva { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.tapahtumat-kortit .on-kuva .tapahtuma-pvm {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  width: 4.4rem;
  box-shadow: 0 6px 16px -6px rgba(10, 31, 58, 0.55);
}
.tapahtumat-kortit .on-kuva .tapahtuma-tiedot { padding: 1rem 1.25rem 1.3rem; }

/* Tapahtumasivun lista: pieni kuva oikealla */
@media (min-width: 40rem) {
  .tapahtumat:not(.tapahtumat-kortit) .on-kuva a { grid-template-columns: 4.75rem minmax(0, 1fr) 9rem; }
  .tapahtumat:not(.tapahtumat-kortit) .on-kuva .tapahtuma-kuva {
    display: block;
    order: 3;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
  }
}

/* ---------- Ilmoittautuminen ---------- */
.tapahtuma-merkit .merkki-ilmo { background: var(--aurinko); border-color: var(--aurinko); }
.ilmo {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--pinta);
  border-radius: var(--pyoristys);
  box-shadow: var(--varjo);
  border-top: 6px solid var(--aurinko);
  scroll-margin-top: 6rem;
}
.ilmo h2 { margin-top: 0; }
.ilmo-tila:empty { display: none; }
.ilmo-paikat { display: inline-block; font-weight: 700; background: var(--turkoosi-vaalea); padding: 0.35rem 0.9rem; border-radius: 99px; }
.ilmo-paikat.taynna { background: var(--aurinko-vaalea); border-radius: 0.75rem; }
.ilmo-paikat[hidden] { display: none; }
.ilmo-lomake[hidden], .ilmo-valmis[hidden], .ilmo-huoltaja[hidden] { display: none; }
.ilmo-lomake > .lomake-rivit + .lomake-rivit, .ilmo-huoltaja + .lomake-rivit { margin-top: 0.9rem; }
.ilmo-huoltaja { margin: 1.25rem 0 0; padding: 1rem; border: 2px dashed var(--aurinko); border-radius: 1rem; }
.ilmo-huoltaja legend { font: 800 1.1rem var(--otsikko); padding: 0 0.4rem; }
.ilmo-vihje { margin: 0 0 0.75rem; font-size: 0.95rem; }
.ilmo .suostumus + .suostumus { margin-top: 0.6rem; }
.ilmo-napit { margin: 1.5rem 0 0; }
.ilmo-napit .nappi::after { content: none; }
.ilmo-valmis { text-align: center; padding: 1rem 0; outline: none; }
.ilmo-valmis.jono .valmis-merkki { background: var(--aurinko); color: var(--yo); }
.ilmo-valmis .nappi::after { content: none; }
.huoltaja-napit { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.huoltaja-napit .nappi::after { content: none; }

/* Kenttäkohtaiset virheet */
.kentta-virhe { display: block; margin-top: 0.15rem; color: #b3261e; font-size: 0.85rem; font-weight: 700; }
.suostumus .kentta-virhe { flex-basis: 100%; }
.suostumus { flex-wrap: wrap; }
.kentta [aria-invalid="true"] { border-color: #e0674a; box-shadow: 0 0 0 3px #fde4dc; }
.suostumus input[aria-invalid="true"] { outline: 2px solid #e0674a; outline-offset: 2px; }

/* Idealomake */
.idea-tyypit { border: 0; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.idea-tyypit legend { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.idea-tyypit label { cursor: pointer; }
.idea-tyypit input { position: absolute; opacity: 0; pointer-events: none; }
.idea-tyypit span { display: inline-block; padding: 0.45rem 1.1rem; border: 2px solid var(--yo); border-radius: 99px; font-weight: 700; background: var(--pinta); }
.idea-tyypit input:checked + span { background: var(--aurinko); }
.idea-tyypit input:focus-visible + span { outline: 3px solid var(--turkoosi); outline-offset: 2px; }
.idea-tietosuoja { margin-top: 1rem; }

/* Etusivun nostot: jäsenyys ja ideat */
.osio-nostot { padding-top: 0; }
.nostot { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .nostot { grid-template-columns: 1fr 1fr; } }
.nosto {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  padding-right: 4.5rem;
  border-radius: var(--pyoristys);
  color: var(--yo);
  text-decoration: none;
  font-weight: 400;
  box-shadow: var(--varjo);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.nosto:hover { transform: translateY(-4px) rotate(-0.4deg); color: var(--yo); }
.nosto-jasen { background: var(--aurinko); }
.nosto-idea { background: var(--turkoosi); }
.nosto-otsikko { font: 800 clamp(1.6rem, 3.5vw, 2.1rem)/1.05 var(--otsikko); font-stretch: 85%; }
.nosto-nuoli { position: absolute; right: 1.5rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--yo); color: var(--valkoinen); font-size: 1.3rem; transition: transform 0.2s; }
.nosto:hover .nosto-nuoli { transform: translateX(4px); }

/* Tukijat alapalkissa */
.tukijat { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.tukijat-otsikko { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aurinko); margin-bottom: 0.75rem; }
.tukijat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.tukijat img { height: 3rem; width: auto; background: var(--valkoinen); padding: 0.4rem 0.7rem; border-radius: 0.5rem; }
.tukijat span { font-weight: 700; }

/* Lisää kalenteriin */
.kalenteriin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; }
.kalenteriin-otsikko { font-weight: 700; margin-right: 0.25rem; }
.kalenteriin a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.9rem; border: 2px solid var(--yo); border-radius: 99px; color: var(--yo); text-decoration: none; font-size: 0.95rem; }
.kalenteriin a::before { content: "📅"; font-size: 0.9em; }
.kalenteriin a:hover { background: var(--aurinko); }
.kentta[hidden] { display: none; }