/* =========================================================================
 surussa.fi v3, "Valo"
 Concepto rector: una sala vacia a las tres de la madrugada con el techo
 abierto al cielo del norte, y en la tapa del piano el cielo al reves.
 Un solo compas de 12 s gobierna todo el movimiento de la web.
 ========================================================================= */

/* 1. Tokens */
:root{
  /* superficies, de mas profunda a mas elevada */
  --syva:       #04090e;
  --yotaivas:   #070f16;
  --kansi:      #0d2226;
  --kansi-yla:  #123036;

  /* tinta */
  --nuotti:     #f2efe9;
  --utu:        #a9bcc4;

  /* acentos con trabajo exclusivo */
  --ambra:        #ff9c01;
  --ambra-pehmea: #ffc275;
  --ruusu:        #e4557a;

  /* filetes */
  --viiva:      rgba(242,239,233,.12);
  --viiva-vahva:rgba(242,239,233,.22);

  /* el compas: todas las duraciones son subdivisiones exactas */
  --compas: 12000ms;
  --t1: 1500ms;
  --t2: 750ms;
  --t3: 375ms;
  --t4: 188ms;
  --helppo: cubic-bezier(.16,.72,.19,1);

  /* tipografia */
  --sans: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --aani: "Newsreader", Georgia, "Times New Roman", serif;
  --t-xs: .8125rem;
  --t-s:  .9375rem;
  --t-m:  1.0625rem;
  --t-l:  1.25rem;
  --t-xl: 1.5rem;
  --t-h2: clamp(1.6rem, 1.1rem + 2vw, 2.1rem);
  --t-h1: clamp(2rem, 1.4rem + 3vw, 3rem);
  --t-hero: clamp(2.5rem, 1.6rem + 4.4vw, 4.6rem);

  /* espacio */
  --sivu: clamp(20px, 5vw, 56px);
  --leveys: 1160px;
  --lohko: clamp(84px, 11vh, 132px);

  --pyoreys: 16px;

  /* z-index semantico */
  --z-taivas: 0;
  --z-sisalto: 1;
  --z-tarttuva: 20;
  --z-otsikko: 40;
  --z-paneeli: 50;
}

/* 2. Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  overflow-x:clip;               /* clip, no hidden: hidden rompe position:sticky */
  background:var(--yotaivas);
  color:var(--nuotti);
  font-family:var(--sans);
  font-size:var(--t-m);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,canvas,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
:focus-visible{
  outline:2px solid var(--ambra);
  outline-offset:3px;
  border-radius:4px;
}
::selection{ background:rgba(255,156,1,.28); }

/* 3. Tipografia */
h1,h2,h3{
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-l); letter-spacing:-.015em; line-height:1.2; }
p{ text-wrap:pretty; }
.mitta{ max-width:64ch; }

/* La voz de Sanna. Solo aqui: H1 de portada, poemas, citas, nombre de la luz,
 linea de cierre del pie. Si no habla ella, no es serif. */
.aani{
  font-family:var(--aani);
  font-style:italic;
  font-weight:300;
  letter-spacing:-.015em;
}

.yla{ color:var(--utu); }
.pieni{ font-size:var(--t-s); }
.luvut{ font-variant-numeric:tabular-nums; }

/* 4. Estructura */
.kuori{
  width:100%;
  max-width:var(--leveys);
  margin-inline:auto;
  padding-inline:var(--sivu);
}
/* columna de lectura estrecha SIN centrar el bloque: la retícula manda,
 el texto se alinea con el resto de la pagina */
.kuori.kapea > *{ max-width:var(--kapea, 700px); }
.osio{
  position:relative;
  z-index:var(--z-sisalto);
  padding-block:var(--lohko);
}
.osio + .osio{ padding-top:0; }
.osio--tiivis{ padding-block:calc(var(--lohko) * .6); }
.otsikko-rivi{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:32px;
}
.jono{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; }

main{ position:relative; z-index:var(--z-sisalto); }

/* 5. El cielo */
#taivas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:var(--z-taivas);
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(13,34,38,.55), transparent 60%),
    linear-gradient(180deg, var(--syva) 0%, var(--yotaivas) 45%, var(--yotaivas) 100%);
  opacity:0;
  transition:opacity 900ms var(--helppo);
}
#taivas.nakyy{ opacity:1; }
/* fallback sin JS: el cielo estatico de F4 */
.taivas-vara{
  position:fixed; inset:0; z-index:var(--z-taivas);
  background:
    linear-gradient(180deg, var(--syva), transparent 40%),
    url("../media/img-tahdet-1.jpg") center/cover no-repeat,
    var(--yotaivas);
  opacity:.5;
  pointer-events:none;
}
.js .taivas-vara{ display:none; }

/* 6. Cabecera */
.otsikko{
  position:sticky; top:0;
  z-index:var(--z-otsikko);
  background:rgba(7,15,22,.72);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--viiva);
}
.otsikko__sisus{
  display:flex; align-items:center; gap:20px;
  min-height:70px;
  padding-block:10px;
}
.merkki{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; }
.merkki img{ width:54px; height:54px; }
.merkki span{
  font-size:var(--t-s); letter-spacing:.01em; color:var(--utu);
  display:none;
}
.navi{ margin-left:auto; display:none; }
.navi > ul{ display:flex; align-items:center; gap:4px; }   /* > : el desplegable no hereda el flex */
.navi a{
  display:block; padding:10px 12px;
  text-decoration:none; font-size:var(--t-s); color:var(--utu);
  border-radius:999px;
  transition:color var(--t4) var(--helppo), background-color var(--t4) var(--helppo);
}
.navi a:hover{ color:var(--nuotti); background:rgba(242,239,233,.06); }
.navi a[aria-current="page"]{ color:var(--nuotti); }
.navi a[aria-current="page"]::after{
  content:""; display:block; height:1px; margin-top:4px;
  background:var(--ambra);
}

/* desplegable Palvelut */
.pudotus{ position:relative; }
.pudotus__nappi{
  display:flex; align-items:center; gap:7px;
  padding:10px 12px; border:0; background:none; cursor:pointer;
  font-size:var(--t-s); color:var(--utu); border-radius:999px;
}
.pudotus__nappi:hover{ color:var(--nuotti); background:rgba(242,239,233,.06); }
.pudotus__nappi svg{ width:10px; height:10px; transition:transform var(--t4) var(--helppo); }
.pudotus__nappi[aria-expanded="true"] svg{ transform:rotate(180deg); }
.pudotus__lista{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:250px; padding:8px;
  background:var(--kansi);
  border:1px solid var(--viiva);
  border-radius:var(--pyoreys);
  display:none;
}
.pudotus__lista[data-auki="1"]{ display:block; }
.pudotus__lista a{ padding:11px 12px; border-radius:10px; color:var(--nuotti); }
.pudotus__lista a:hover{ background:var(--kansi-yla); }

.otsikko__toimet{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.navi + .otsikko__toimet{ margin-left:16px; }

/* boton de menu movil: panel ABSOLUTO anclado al header.
 El header lleva backdrop-filter y por tanto es containing block de sus
 descendientes fixed: un overlay fixed aqui se recortaria al alto de la
 cabecera y el menu no se abriria. */
.valikko-nappi{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px;
  background:none; border:1px solid var(--viiva-vahva); border-radius:999px;
  color:var(--nuotti); font-size:var(--t-s); cursor:pointer;
}
.valikko-nappi__viivat{ display:grid; gap:4px; width:16px; }
.valikko-nappi__viivat i{ display:block; height:1px; background:currentColor; }
.valikko-paneeli{
  position:absolute; top:100%; left:0; right:0;
  display:none;
  background:var(--syva);
  border-bottom:1px solid var(--viiva);
  max-height:calc(100svh - 70px);
  overflow-y:auto;
  z-index:var(--z-paneeli);
}
.valikko-paneeli[data-auki="1"]{ display:block; }
.valikko-paneeli ul{ padding:8px var(--sivu) 24px; }
.valikko-paneeli li + li{ border-top:1px solid var(--viiva); }
.valikko-paneeli a{
  display:block; padding:16px 0; min-height:44px;
  text-decoration:none; font-size:var(--t-l); letter-spacing:-.01em;
}
.valikko-paneeli .alataso a{ padding-left:20px; font-size:var(--t-m); color:var(--utu); }
.valikko-paneeli__alku{
  padding:18px var(--sivu) 16px;
  display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center;
  border-bottom:1px solid var(--viiva);
}
.valikko-paneeli__alku .nappi{ flex:1 1 auto; }

/* 7. Botones y enlaces */
.nappi{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px;
  border-radius:999px; border:1px solid transparent;
  text-decoration:none; font-size:var(--t-s); font-weight:500;
  cursor:pointer;
  transition:background-color var(--t4) var(--helppo), border-color var(--t4) var(--helppo), color var(--t4) var(--helppo);
}
/* El ambar rellena exactamente una cosa en toda la web: este boton. */
.nappi--valo{ background:var(--ambra); color:var(--syva); }
.nappi--valo:hover{ background:var(--ambra-pehmea); }
.nappi--reuna{ border-color:var(--viiva-vahva); color:var(--nuotti); }
.nappi--reuna:hover{ border-color:var(--nuotti); background:rgba(242,239,233,.05); }
.nappi--pieni{ min-height:44px; padding:0 18px; }

.linkki{
  text-decoration:none;
  background-image:
    linear-gradient(var(--ambra),var(--ambra)),
    linear-gradient(rgba(242,239,233,.26), rgba(242,239,233,.26));
  background-size:0 1px, 100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%, 0 100%;
  padding-bottom:3px;
  transition:background-size var(--t4) var(--helppo);
}
.linkki:hover,.linkki:focus-visible{ background-size:100% 1px, 100% 1px; }
.linkki--utu{ color:var(--utu); }
.linkki--utu:hover{ color:var(--nuotti); }

.puhelin{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px;                      /* zona tactil */
  text-decoration:none; font-variant-numeric:tabular-nums;
}
.puhelin::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ambra);
  flex:0 0 auto;
}

/* 8. Hero */
.hero{
  position:relative;
  min-height:calc(100svh - 70px);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(40px,7vh,88px) clamp(120px,20vh,200px);
  z-index:var(--z-sisalto);
}
/* Velo bajo el texto del hero. Al subir la siembra del cielo (2026-08-12) hay
 nucleos de estrella blancos que caen detras de las letras y se las comen.
 Es oscuro sobre oscuro, no se ve, y devuelve el contraste. Sin bordes
 rectos: se apaga en ovalo mucho antes de llegar al ancho de la columna. */
.hero::before{
  content:"";
  position:absolute; inset:-6% -12% -2% -14%;
  background:radial-gradient(70% 58% at 34% 46%,
    rgba(7,15,22,.86) 0%, rgba(7,15,22,.66) 42%,
    rgba(7,15,22,.28) 70%, rgba(7,15,22,0) 100%);
  pointer-events:none;
  z-index:-1;
}
/* la tapa del piano vive DENTRO del primer pantallazo, no debajo */
.hero__kansi{
  position:absolute; left:50%; bottom:0;
  width:100vw; margin-left:-50vw;
  pointer-events:none;
}
.hero__kansi .kansi-heijastus{ margin-top:0; }
.hero__otsikko{
  font-size:var(--t-hero);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.03em;
  max-width:16ch;
}
.hero__ala{
  margin-top:26px;
  font-size:clamp(1.0625rem,.98rem + .5vw,1.3rem);
  color:var(--nuotti);
  max-width:46ch;
  line-height:1.5;
}
.hero__toimet{ margin-top:36px; display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
.hero__nopea{
  margin-top:28px; padding-top:20px;
  border-top:1px solid var(--viiva);
  max-width:38ch; font-size:var(--t-s); color:var(--utu);
}
.hero__nopea a{ color:var(--nuotti); }

/* hero de paginas interiores */
.sisahero{ padding-block:clamp(52px,8vh,96px) clamp(30px,5vh,56px); position:relative; }
.sisahero h1{ max-width:19ch; }
.sisahero .ingressi{
  margin-top:22px; max-width:56ch;
  font-size:clamp(1.0625rem,1rem + .35vw,1.2rem);
  color:var(--utu);
}
.murupolku{ font-size:var(--t-xs); color:var(--utu); margin-bottom:20px; }
.murupolku a{ text-decoration:none; }
.murupolku a:hover{ color:var(--nuotti); }

/* 9. Tarjetas de servicio */
.palvelut{ display:grid; gap:16px; }
.palvelu{
  position:relative;
  background:var(--kansi);
  border:1px solid var(--viiva);
  border-radius:var(--pyoreys);
  padding:26px 26px 24px;
  display:flex; flex-direction:column; gap:14px;
  transition:background-color var(--t3) var(--helppo), border-color var(--t3) var(--helppo);
}
.palvelu:hover{ background:var(--kansi-yla); border-color:var(--viiva-vahva); }
.palvelu__valo{
  width:9px; height:9px; border-radius:50%;
  background:var(--ambra);
  box-shadow:0 0 18px 3px rgba(255,156,1,.34);   /* luz, no elevacion */
}
.palvelu h3{ margin-top:2px; }
.palvelu p{ color:var(--utu); font-size:var(--t-s); }
.palvelu a{ margin-top:auto; padding-top:6px; font-size:var(--t-s); }
.palvelu a::after{ content:" \2192"; }

/* 10. Pasos */
.askeleet{ display:grid; gap:0; counter-reset:askel; }
.askel{
  display:grid; grid-template-columns:34px 1fr; gap:20px;
  padding:22px 0;
  border-top:1px solid var(--viiva);
  align-items:start;
}
.askel:last-child{ border-bottom:1px solid var(--viiva); }
.askel__valo{
  margin-top:9px; width:8px; height:8px; border-radius:50%;
  background:rgba(242,239,233,.16);
  justify-self:center;
  transition:background-color var(--t1) var(--helppo), box-shadow var(--t1) var(--helppo);
}
.askel p{ max-width:56ch; }
.askel.palaa .askel__valo{
  background:var(--ambra);
  box-shadow:0 0 20px 4px rgba(255,156,1,.32);
}
.askel.palaa p{ color:var(--nuotti); }
.askel p{ color:var(--utu); transition:color var(--t1) var(--helppo); }

/* 11. Precios */
.varoitus{
  border:1px solid rgba(255,156,1,.42);
  border-radius:var(--pyoreys);
  background:var(--kansi-yla);
  padding:22px 24px;
  display:grid; gap:8px;
}
.varoitus strong{ font-weight:500; }
.varoitus p{ font-size:var(--t-s); color:var(--nuotti); max-width:74ch; }

.hinnat{ display:grid; gap:16px; }
.hinta{
  background:var(--kansi);
  border:1px solid var(--viiva);
  border-radius:var(--pyoreys);
  padding:28px 26px;
  display:flex; flex-direction:column; gap:14px;
  transition:background-color var(--t3) var(--helppo), border-color var(--t3) var(--helppo);
}
.hinta:hover{ background:var(--kansi-yla); }
.hinta__nimi{ font-size:var(--t-l); letter-spacing:-.015em; }
.hinta__luku{
  font-size:clamp(2rem,1.4rem + 2.4vw,2.9rem);
  font-weight:400; line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--nuotti);
}
.hinta__esim{ font-size:var(--t-xs); color:var(--utu); }
.hinta__kuvaus{ color:var(--utu); font-size:var(--t-s); }
.hinta ul{ display:grid; gap:10px; margin-top:4px; }
.hinta li{
  position:relative; padding-left:20px; font-size:var(--t-s); color:var(--utu);
}
.hinta li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--viiva-vahva);
}
.hinta--keski{ border-color:var(--viiva-vahva); }

.hintarivi{
  display:grid; gap:4px;
  padding:20px 0;
  border-top:1px solid var(--viiva);
}
.hintarivi:last-of-type{ border-bottom:1px solid var(--viiva); }
.hintarivi__yla{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; }
.hintarivi__nimi{ font-size:var(--t-l); }
.hintarivi__luku{
  margin-left:auto; font-size:var(--t-xl);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.hintarivi p{ color:var(--utu); font-size:var(--t-s); max-width:60ch; }

/* placa de precio en las paginas de servicio */
.hintalaatta{
  background:var(--kansi);
  border:1px solid var(--viiva);
  border-radius:var(--pyoreys);
  padding:26px;
  display:grid; gap:12px;
  max-width:560px;
}
.hintalaatta__luku{
  font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.hintalaatta__huom{
  font-size:var(--t-xs); color:var(--ambra-pehmea);
  border-top:1px solid var(--viiva); padding-top:12px;
}

/* 12. Imagenes: nunca un rectangulo nitido flotando */
/* Tratamiento A "kajo": atmosferica. La imagen ES el cielo (screen). */
/* Tratamiento B "ikkuna": retratos y piano. Mascara + halo + velo. */
.kuva{
  position:relative;
  isolation:isolate;
}
.kuva__kajo{
  position:absolute; inset:-14% -2%;
  z-index:-1;
  background:radial-gradient(58% 52% at 50% 46%, var(--halo,rgba(255,156,1,.20)), transparent 70%);
  filter:blur(28px);
  pointer-events:none;
}
.kuva img,.kuva video{
  width:100%;
  object-fit:cover;
  border-radius:0;
}
.kuva--ikkuna .kuva__kehys{
  -webkit-mask-image:radial-gradient(88% 94% at 50% 40%, #000 38%, rgba(0,0,0,.72) 68%, transparent 94%);
  mask-image:radial-gradient(88% 94% at 50% 40%, #000 38%, rgba(0,0,0,.72) 68%, transparent 94%);
}
.kuva--ikkuna img{ filter:saturate(.94) contrast(1.04) brightness(.97); }
/* la mascara va en el marco, no en la imagen: asi tambien el hueco de un
 asset que todavia no existe queda disuelto y nunca es un rectangulo */
.kuva--kajo .kuva__kehys{
  -webkit-mask-image:radial-gradient(76% 84% at 50% 46%, #000 22%, rgba(0,0,0,.62) 58%, transparent 88%);
  mask-image:radial-gradient(76% 84% at 50% 46%, #000 22%, rgba(0,0,0,.62) 58%, transparent 88%);
  background:
    radial-gradient(58% 52% at 46% 40%, rgba(255,156,1,.10), transparent 70%),
    radial-gradient(70% 70% at 62% 74%, rgba(21,49,43,.30), transparent 72%),
    var(--syva);
}
.kuva--kajo img,.kuva--kajo video{
  mix-blend-mode:screen;
  filter:saturate(1.02) contrast(1.06);
}
.kuva__verho{
  position:absolute; inset:auto 0 -1px 0; height:42%;
  background:linear-gradient(180deg, transparent, var(--yotaivas) 88%);
  pointer-events:none;
}
/* parallax interno: la foto se mueve dentro de su ventana.
 El marco reserva su proporcion, asi que si el asset todavia no existe
 queda un degradado de cielo y no un hueco ni un icono roto. */
.kuva__kehys{
  overflow:hidden;
  aspect-ratio:var(--suhde, 4 / 5);
  background:
    radial-gradient(70% 60% at 42% 38%, rgba(255,156,1,.10), transparent 68%),
    linear-gradient(160deg, var(--kansi), var(--syva));
}
.kuva__kehys img,.kuva__kehys video{
  width:100%; height:100%; object-fit:cover;
  transform:translate3d(0, calc(var(--par,0) * 3.2%), 0) scale(1.14);
  will-change:transform;
}
img.ei-kuvaa,video.ei-kuvaa{ visibility:hidden; }

.kuva-teksti{
  display:grid; gap:clamp(28px,5vw,64px);
  align-items:center;
}
.kuva-teksti__teksti{ display:grid; gap:18px; max-width:56ch; }
.kuva-teksti__teksti p{ color:var(--utu); }

/* sangrado por el borde derecho en paginas de servicio */
.vuoto-oikea{ position:relative; }
@media (min-width:1000px){
  .vuoto-oikea{ margin-right:calc(50% - 50vw); }
}

/* 13. Cita */
.sitaatti{
  font-family:var(--aani); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);
  line-height:1.32; letter-spacing:-.015em;
  max-width:24ch;
  color:var(--nuotti);
}

/* 14. UKK */
.ukk-ryhma + .ukk-ryhma{ margin-top:clamp(44px,6vh,72px); }
.ukk-ryhma h2{ margin-bottom:8px; }
.kysymys{
  border-bottom:1px solid var(--viiva);
}
.kysymys:first-of-type{ border-top:1px solid var(--viiva); }
.kysymys summary{
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 0; min-height:44px;
  cursor:pointer; list-style:none;
  font-size:var(--t-l); letter-spacing:-.012em; line-height:1.32;
}
.kysymys summary::-webkit-details-marker{ display:none; }
.kysymys summary::after{
  content:""; flex:0 0 auto; margin-left:auto; margin-top:.45em;
  width:9px; height:9px; border-radius:50%;
  background:rgba(242,239,233,.18);
  transition:background-color var(--t2) var(--helppo), box-shadow var(--t2) var(--helppo);
}
.kysymys[open] summary::after{
  background:var(--ambra);
  box-shadow:0 0 16px 3px rgba(255,156,1,.3);
}
.kysymys__vastaus{ padding:0 0 24px; max-width:64ch; color:var(--utu); display:grid; gap:12px; }
.kysymys__vastaus .odottaa{ color:var(--ambra-pehmea); font-size:var(--t-s); }

/* 15. Blogi y runot */
.kirjoitukset{ display:grid; gap:0; }
.kirjoitus{
  display:grid; gap:22px;
  grid-template-columns:1fr;
  padding:30px 0;
  border-top:1px solid var(--viiva);
  align-items:start;
}
.kirjoitus:last-child{ border-bottom:1px solid var(--viiva); }
.kirjoitus__pvm{ font-size:var(--t-xs); color:var(--utu); }
.kirjoitus h3{ margin-top:6px; }
.kirjoitus p{ color:var(--utu); margin-top:10px; max-width:60ch; }
.merkinta{
  display:inline-block; margin-top:12px;
  font-size:var(--t-xs); color:var(--ambra-pehmea);
  border:1px solid rgba(255,156,1,.4); border-radius:999px;
  padding:3px 12px;
}
.kirjoitus__kuva{ order:-1; }

.runo{
  padding-block:clamp(40px,6vh,72px);
  border-top:1px solid var(--viiva);
  max-width:52ch;
}
.runo__teksti{
  font-family:var(--aani); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem);
  line-height:1.62; letter-spacing:-.01em;
  white-space:pre-line;
  margin-top:18px;
}
.runo__vuosi{ font-size:var(--t-xs); color:var(--utu); }

/* 16. Formularios */
.lomake{ display:grid; gap:26px; max-width:640px; }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
legend{ padding:0; }
.kentta{ display:grid; gap:9px; }
.kentta > label,.ryhma__otsikko{
  font-size:var(--t-m); letter-spacing:-.01em; line-height:1.35;
}
.kentta__apu{ font-size:var(--t-s); color:var(--utu); }
input[type="text"],input[type="email"],input[type="tel"],textarea{
  width:100%;
  background:var(--kansi);
  border:1px solid var(--viiva);
  border-radius:12px;
  padding:14px 16px;
  min-height:50px;
  color:var(--nuotti);
  transition:border-color var(--t4) var(--helppo), background-color var(--t4) var(--helppo);
}
input::placeholder,textarea::placeholder{ color:rgba(169,188,196,.55); }
input:hover,textarea:hover{ border-color:var(--viiva-vahva); }
input:focus,textarea:focus{ outline:none; border-color:var(--ambra); background:var(--kansi-yla); }
textarea{ resize:vertical; line-height:1.55; }

.valinnat{ display:flex; flex-wrap:wrap; gap:10px; }
.valinta{
  display:inline-flex; align-items:center; gap:10px;
  min-height:46px; padding:0 18px;
  border:1px solid var(--viiva); border-radius:999px;
  background:var(--kansi);
  cursor:pointer; font-size:var(--t-s); color:var(--utu);
  transition:border-color var(--t4) var(--helppo), color var(--t4) var(--helppo), background-color var(--t4) var(--helppo);
}
.valinta input{ position:absolute; opacity:0; width:1px; height:1px; }
.valinta:hover{ border-color:var(--viiva-vahva); color:var(--nuotti); }
.valinta:has(input:checked){ border-color:var(--nuotti); color:var(--nuotti); background:var(--kansi-yla); }
.valinta:has(input:focus-visible){ outline:2px solid var(--ambra); outline-offset:3px; }

.suostumus{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  font-size:var(--t-s); color:var(--utu);
  padding-top:6px;
}
.suostumus input[type="checkbox"]{
  width:22px; height:22px; margin:2px 0 0;
  accent-color:var(--ambra);
  cursor:pointer;
}
.virhe{
  font-size:var(--t-s); color:var(--ambra-pehmea);
  display:none;
}
.kentta[data-virhe="1"] .virhe{ display:block; }
.kentta[data-virhe="1"] input,.kentta[data-virhe="1"] textarea{ border-color:var(--ambra-pehmea); }

.lomake__tila{ font-size:var(--t-s); color:var(--utu); }
.viesti-ok,.viesti-pieleen{
  display:none;
  border:1px solid var(--viiva-vahva); border-radius:var(--pyoreys);
  padding:22px 24px; background:var(--kansi);
  max-width:640px;
}
.viesti-ok[data-nakyy="1"],.viesti-pieleen[data-nakyy="1"]{ display:grid; gap:10px; }

/* 17. El compositor de luz */
.valo-sivu{ display:grid; gap:clamp(32px,5vw,64px); align-items:start; }
.valo-lomake{ min-width:0; }
.valo-kysymys{
  padding:28px 0;
  border-top:1px solid var(--viiva);
  display:grid; gap:12px;
}
.valo-kysymys:first-of-type{ border-top:0; padding-top:8px; }
.valo-kysymys__nimi{ font-size:var(--t-l); letter-spacing:-.015em; line-height:1.3; }
.valo-kysymys__apu{ font-size:var(--t-s); color:var(--utu); max-width:56ch; }

.valo-paneeli{
  position:sticky; top:86px;
  display:grid; gap:14px; justify-items:center;
  text-align:center;
}
.valo-kangas{
  width:100%; max-width:340px; aspect-ratio:1;
  border-radius:50%;
}
.valo-paneeli__teksti{ font-size:var(--t-s); color:var(--utu); max-width:32ch; }
.valo-paneeli__nimi{
  font-family:var(--aani); font-style:italic; font-weight:300;
  font-size:var(--t-xl); color:var(--nuotti);
  min-height:1.4em;
}

/* barra pegajosa en movil */
.valo-palkki{
  position:sticky; top:70px; z-index:var(--z-tarttuva);
  display:flex; align-items:center; gap:16px;
  padding:12px var(--sivu);
  margin-inline:calc(var(--sivu) * -1);
  background:rgba(4,9,14,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--viiva);
}
.valo-palkki canvas{ width:64px; height:64px; flex:0 0 auto; }
.valo-palkki p{ font-size:var(--t-xs); color:var(--utu); }
.valo-palkki .valo-paneeli__nimi{ font-size:var(--t-m); }

.turvarivit{
  display:grid; gap:10px;
  padding:22px 24px;
  border:1px solid var(--viiva); border-radius:var(--pyoreys);
  background:var(--kansi);
  font-size:var(--t-s); color:var(--utu);
  max-width:560px;
}
.turvarivit li{ display:flex; gap:12px; align-items:baseline; }
.turvarivit li::before{
  content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%;
  background:var(--viiva-vahva); transform:translateY(-2px);
}

.valo-valmis{ display:none; }
.valo-valmis[data-nakyy="1"]{ display:block; }
.valo-valmis__kuva{ display:flex; justify-content:center; margin-bottom:34px; }
.valo-kangas--iso{ width:min(420px, 78vw); height:auto; aspect-ratio:1; }
.valo-valmis h2{ font-family:var(--aani); font-style:italic; font-weight:300; letter-spacing:-.02em; }
.valo-lataa{
  background:none; border:0; padding:0;
  font-size:var(--t-s); color:var(--utu);
  text-decoration:underline; text-underline-offset:4px;
  cursor:pointer;
}
.valo-lataa:hover{ color:var(--nuotti); }

/* 18. Pie */
.jalki{
  position:relative; z-index:var(--z-sisalto);
  margin-top:var(--lohko);
  background:var(--syva);
  border-top:1px solid var(--viiva);
  padding-block:clamp(46px,7vh,76px) 34px;
}
.jalki__ylin{ display:grid; gap:36px; }
.jalki h2{ font-size:var(--t-l); }
.jalki ul{ display:grid; }
.jalki a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; font-size:var(--t-s); color:var(--utu);
}
.jalki a:hover{ color:var(--nuotti); }
.jalki__yhteys{ display:grid; font-size:var(--t-s); color:var(--utu); }
.jalki__alin{
  margin-top:44px; padding-top:22px;
  border-top:1px solid var(--viiva);
  display:grid; gap:14px;
  font-size:var(--t-xs); color:var(--utu);
}
.jalki__loppu{
  font-family:var(--aani); font-style:italic; font-weight:300;
  font-size:var(--t-m); color:var(--utu);
}
.odottaa{ color:var(--ambra-pehmea); }

/* 19. Gramaticas de entrada */
/* Regla del reveal: el contenido es visible por defecto. Los estados
 iniciales ocultos existen SOLO bajo html.js-anim. */
.js-anim [data-tulo]{ --tulo-t:var(--t1); }

/* el titular rompe siempre en las mismas dos lineas, con o sin motion */
.rivi-kuori{ display:block; padding-bottom:.06em; margin-bottom:-.06em; }
.rivi{ display:block; }
.js-anim [data-tulo="nousu"] .rivi{
  transform:translateY(106%);
  transition:transform var(--t1) var(--helppo);
}
.js-anim [data-tulo="nousu"] .rivi-kuori{ overflow:hidden; }
.js-anim [data-tulo="nousu"].on .rivi{ transform:translateY(0); }
.js-anim [data-tulo="nousu"] .rivi:nth-child(2){ transition-delay:120ms; }
.js-anim [data-tulo="nousu"] .rivi:nth-child(3){ transition-delay:240ms; }
.js-anim [data-tulo="nousu"] .hero__ala,
.js-anim [data-tulo="nousu"] .hero__toimet,
.js-anim [data-tulo="nousu"] .hero__nopea{
  opacity:0; transition:opacity var(--t1) var(--helppo) 320ms;
}
.js-anim [data-tulo="nousu"].on .hero__ala,
.js-anim [data-tulo="nousu"].on .hero__toimet,
.js-anim [data-tulo="nousu"].on .hero__nopea{ opacity:1; }

.js-anim [data-tulo="lahestyy"] .palvelu,
.js-anim [data-tulo="lahestyy"] .hinta{
  opacity:0; transform:scale(1.035);
  transition:opacity var(--t2) var(--helppo), transform var(--t1) var(--helppo);
}
.js-anim [data-tulo="lahestyy"].on .palvelu,
.js-anim [data-tulo="lahestyy"].on .hinta{ opacity:1; transform:none; }
.js-anim [data-tulo="lahestyy"].on .palvelu:nth-child(2),
.js-anim [data-tulo="lahestyy"].on .hinta:nth-child(2){ transition-delay:180ms; }
.js-anim [data-tulo="lahestyy"].on .palvelu:nth-child(3),
.js-anim [data-tulo="lahestyy"].on .hinta:nth-child(3){ transition-delay:360ms; }

.js-anim [data-tulo="pyyhkaisy"] .kuva{
  -webkit-mask-image:linear-gradient(100deg,#000 0 35%,transparent 62%);
  mask-image:linear-gradient(100deg,#000 0 35%,transparent 62%);
  -webkit-mask-size:300% 100%; mask-size:300% 100%;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  transition:-webkit-mask-position var(--compas) var(--helppo), mask-position var(--compas) var(--helppo);
}
.js-anim [data-tulo="pyyhkaisy"].on .kuva{ -webkit-mask-position:0 0; mask-position:0 0; }

/* kirkastuu: no se mueve ni se oculta ningun elemento. Lo que cambia es el
 suelo: la superficie de debajo sube un peldano de tono. */
.kirkas-pohja{ position:relative; }
.kirkas-pohja > *{ position:relative; z-index:1; }
.js-anim [data-tulo="kirkastuu"] .kirkas-pohja::before{
  content:"";
  position:absolute; inset:-22px -26px;
  border-radius:var(--pyoreys);
  background:var(--kansi);
  opacity:0;
  transition:opacity var(--compas) var(--helppo);
  pointer-events:none;
}
.js-anim [data-tulo="kirkastuu"].on .kirkas-pohja::before{ opacity:1; }
.js-anim [data-tulo="kirkastuu"] .hintalaatta,
.js-anim [data-tulo="kirkastuu"] .varoitus{
  transition:border-color var(--compas) var(--helppo);
}
.js-anim [data-tulo="kirkastuu"].on .hintalaatta{ border-color:rgba(255,156,1,.38); }

.js-anim [data-tulo="syvennys"] .syva-sisus{
  opacity:0; transform:translateZ(0) translateY(14px) scale(.985);
  transition:opacity var(--t1) var(--helppo), transform var(--t1) var(--helppo);
}
.js-anim [data-tulo="syvennys"].on .syva-sisus{ opacity:1; transform:none; }

.js-anim [data-tulo="rivi"] .rivitys > *{
  opacity:0; transition:opacity var(--t1) var(--helppo);
}
.js-anim [data-tulo="rivi"].on .rivitys > *{ opacity:1; }
.js-anim [data-tulo="rivi"].on .rivitys > *:nth-child(2){ transition-delay:var(--t2); }
.js-anim [data-tulo="rivi"].on .rivitys > *:nth-child(3){ transition-delay:var(--t1); }
.js-anim [data-tulo="rivi"].on .rivitys > *:nth-child(4){ transition-delay:2250ms; }

.js-anim [data-tulo="sivusta"] .kirjoitus{
  opacity:0;
  transform:translateX(-18px);
  transition:opacity var(--t2) var(--helppo), transform var(--t1) var(--helppo);
}
.js-anim [data-tulo="sivusta"] .kirjoitus:nth-child(even){ transform:translateX(18px); }
.js-anim [data-tulo="sivusta"].on .kirjoitus{ opacity:1; transform:none; }
.js-anim [data-tulo="sivusta"].on .kirjoitus:nth-child(2){ transition-delay:150ms; }
.js-anim [data-tulo="sivusta"].on .kirjoitus:nth-child(3){ transition-delay:300ms; }
.js-anim [data-tulo="sivusta"].on .kirjoitus:nth-child(4){ transition-delay:450ms; }

/* kansi: el reflejo sube. hiljaisuus y sytytys no tienen estado inicial
 oculto, viven en el canvas y en el scrub. */
.kansi-heijastus{
  position:relative;
  height:clamp(96px,15vh,180px);
  margin-top:44px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);
  mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.kansi-heijastus::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,34,38,.62) 0%, rgba(7,15,22,.15) 55%, rgba(7,15,22,0) 100%);
  border-top:1px solid rgba(242,239,233,.09);
}

/* 20. Utilidades */
.piilo{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.ohita{
  position:absolute; left:-9999px; top:0;
  z-index:var(--z-paneeli);
  background:var(--ambra); color:var(--syva);
  padding:12px 18px; border-radius:0 0 12px 0;
}
.ohita:focus{ left:0; }
.erotin{ height:1px; background:var(--viiva); border:0; margin:0; }
.vain-iso{ display:none; }
.vain-mobiili{ display:inline-flex; }
@media (min-width:1000px){
  .vain-mobiili{ display:none; }
}
@media (min-width:1200px){
  .vain-iso{ display:inline-flex; }
}

/* 21. Breakpoints */
/* Bajo 560 px en la cabecera solo caben tres cosas y estas son las que
 importan: quien es, como se le llama y donde esta el menu. El boton
 Sytytä valo va el primero dentro del panel y en el propio hero. */
@media (max-width:559px){
  .otsikko__sisus{ gap:12px; }
  .merkki img{ width:44px; height:44px; }
  .otsikko__toimet .nappi--valo{ display:none; }
  .valikko-nappi{ padding:0 14px; }
}
@media (min-width:600px){
  .palvelut{ grid-template-columns:repeat(2,1fr); }
  .kirjoitus{ grid-template-columns:200px 1fr; }
  .kirjoitus__kuva{ order:0; }
  .jalki__ylin{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:860px){
  .merkki span{ display:block; }
  .kuva-teksti{ grid-template-columns:1fr 1fr; }
  .kuva-teksti--kaanteinen .kuva-teksti__teksti{ order:2; }
  .hinnat{ grid-template-columns:repeat(3,1fr); align-items:start; }
  .hinta--keski{ margin-top:-22px; }
  .palvelut{ grid-template-columns:repeat(3,1fr); }
  .jalki__ylin{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .jalki__alin{ grid-template-columns:1fr auto; align-items:center; }
}
@media (min-width:1000px){
  .kuva__kajo{ inset:-14% -10%; }   /* el halo solo sangra donde sobra sitio */
  .navi{ display:block; }
  .valikko-nappi{ display:none; }
  .valo-sivu{ grid-template-columns:1fr 380px; }
  .valo-palkki{ display:none; }
  .ukk-kaksi{ column-count:1; }
}
@media (max-width:999px){
  .valo-paneeli{ display:none; }
}

/* 22. Movimiento reducido */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .js-anim [data-tulo] *{ opacity:1 !important; transform:none !important; }
  .js-anim [data-tulo="pyyhkaisy"] .kuva{
    -webkit-mask-image:none; mask-image:none;
  }
  .kuva__kehys img{ transform:scale(1.14); }
}

/* 23. Impresion */
@media print{
  #taivas,.taivas-vara,.otsikko,.valo-paneeli,.valo-palkki{ display:none; }
  body{ background:#fff; color:#000; }
}

/* =====================================================================
 El cuestionario, una pregunta cada vez (2026-08-12, peticion de Rafa).
 Sanna conto en la reunion que probo el cuestionario pensando en su madre
 y lloro. Eso lo produce el ritmo de una pregunta y un silencio, no un
 formulario largo. Los mandos los crea el JS, asi que sin JavaScript no
 aparecen y las doce preguntas siguen visibles y enviables.
 ===================================================================== */
.askelmat{
  margin-top:34px;
  display:flex; flex-direction:column; gap:16px;
}
.askelmat__luku{
  margin:0;
  font-size:.82rem; letter-spacing:.14em;
  color:var(--utu);
  font-variant-numeric:tabular-nums;
}
.askelmat__palkki{
  height:2px; border-radius:2px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.askelmat__palkki > span{
  display:block; height:100%;
  background:var(--ambra);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 900ms cubic-bezier(.22,.61,.36,1);
}
.askelmat__napit{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.nappi--hiljainen{
  background:none; border:0; padding:12px 4px;
  color:var(--utu);
  text-decoration:underline; text-underline-offset:5px;
  cursor:pointer; font:inherit; font-size:.95rem;
}
.nappi--hiljainen:hover{ color:var(--nuotti); }

/* la pregunta entra desde abajo, despacio, como el resto de la web */
.askel--tulossa{ animation:askelSisaan 760ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes askelSisaan{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .askel--tulossa{ animation:none; }
  .askelmat__palkki > span{ transition:none; }
}

/* El atributo hidden solo vale display:none desde la hoja del navegador, y
 cualquier display propio lo gana. Estos bloques llevan grid y flex, asi que
 sin esto el JS los ocultaba y seguian viendose los doce a la vez. */
.valo-lomake [hidden]{ display:none !important; }

/* =====================================================================
 /valo: la pregunta primero (2026-08-12, Amanda).
 "The questions need to be up higher and more obvious with bolder font.
 Not under a lot of text and empty spaces." La pagina llegaba con dos
 parrafos largos, la banda de la tapa del piano y una caja de tres lineas
 antes de la primera pregunta, y en movil eso son dos pantallazos de
 scroll antes de que te pregunten nada.
 ===================================================================== */

/* la pregunta manda: mas grande, mas peso y mas cerca de su campo */
.valo-kysymys__nimi{
  display:block;
  font-size:clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.02em;
  color:var(--nuotti);
  margin-bottom:6px;
}
.valo-kysymys__apu{ margin-bottom:14px; }

/* las tres frases de tranquilidad, en una linea en vez de en una caja */
.turvarivi-tiivis{
  margin:0 0 6px;
  font-size:var(--t-s);
  color:var(--utu);
  max-width:64ch;
}

/* menos aire por delante: en movil la primera pregunta tiene que entrar
 en el primer pantallazo, o a la segunda */
.sisahero{ padding-block:clamp(30px,5vh,56px) clamp(14px,2vh,22px); }
.sisahero .ingressi{ margin-top:14px; }
@media (max-width:760px){
  .valo-sivu .valo-lomake{ margin-top:4px; }
  .osio--tiivis{ padding-block:calc(var(--lohko) * .34); }
}

/* =====================================================================
 Redes sociales y galeria de trabajo (2026-08-12, peticion de Amanda).
 Los perfiles van como texto en espera y no como enlaces rotos hasta que
 Sanna pase las direcciones: un enlace a ninguna parte es peor que un
 hueco honesto. En el HTML del pie queda escrito como sustituirlos.
 ===================================================================== */
.some-lista{ display:grid; gap:2px; }
.some-lista li{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-s);
}

/* La galeria. Una foto grande y el resto acompañando, para que no parezca
 una cuadricula de banco de imagenes. Crece sola segun ella mande material. */
.tyo-ruudukko{
  margin-top:30px;
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
.tyo-ruutu{ margin:0; }
.tyo-ruutu img{
  width:100%; height:100%;
  aspect-ratio:4 / 3; object-fit:cover;
  border-radius:var(--pyoreys);
  /* el borde disuelto de la casa: nada de rectangulos flotando */
  -webkit-mask-image:radial-gradient(125% 118% at 50% 44%, #000 62%, transparent 100%);
          mask-image:radial-gradient(125% 118% at 50% 44%, #000 62%, transparent 100%);
}
.tyo-ruutu video{ width:100%; border-radius:var(--pyoreys); }
.tyo-ruutu figcaption{
  margin-top:12px; font-size:var(--t-xs); color:var(--utu); max-width:44ch;
}
.tyo-ruutu--tyhja{
  display:grid; place-items:center; min-height:200px;
  border:1px dashed var(--viiva-vahva); border-radius:var(--pyoreys);
  padding:24px; text-align:center;
}
@media (min-width:760px){
  .tyo-ruudukko{ grid-template-columns:repeat(3, 1fr); align-items:start; }
  .tyo-ruutu--iso{ grid-column:span 2; }
  .tyo-ruutu--iso img{ aspect-ratio:16 / 10; }
}

/* La pregunta va la primera de todo. Las dos advertencias (las tres frases de
 tranquilidad y el aviso de que las preguntas son provisionales) siguen
 estando, pero debajo: informan, no tienen que recibirte. */
.valo-lomake{ display:flex; flex-direction:column; }
.valo-lomake > form{ order:1; }
.valo-lomake > .turvarivi-tiivis{ order:2; margin-top:26px; }
.valo-lomake > .odottaa,
.valo-lomake > .pieni.odottaa{ order:3; margin-top:10px; }

/* =====================================================================
 El titular de portada en movil (2026-08-12, Amanda: "the headline
 doesn't fit in the mobile"). No se salia de ancho, se comia el alto:
 con la barra del navegador, el hero entero no entraba en pantalla.
 El titular nuevo es tres veces mas largo que el anterior, asi que aqui
 pesa el alto y no el ancho. Se baja el cuerpo en pantallas pequenas y
 se aprieta el interlineado. El verso ya viene partido desde el HTML.
 ===================================================================== */
@media (max-width:760px){
  .hero__otsikko{
    font-size:clamp(1.85rem, 1.1rem + 3.4vw, 2.6rem);
    line-height:1.06;
    max-width:none;
  }
  .hero__ala{ margin-top:20px; }
  .hero{ padding-block:clamp(24px,4vh,52px) clamp(70px,12vh,130px); }
}

/* =====================================================================
 La tapa del piano, DETRAS del texto (2026-08-12, Amanda).
 "The phone line under the hero is covered... a divider line also crosses
 straight through the text."
 El bloque .hero__kansi es el ultimo hijo del hero y va en posicion
 absoluta, asi que se pintaba POR ENCIMA de todo lo anterior. Su
 degradado tapaba la linea del telefono y su border-top era esa raya que
 cruzaba el texto. Ademas mide 100vw con margen negativo, y en iOS eso
 puede desbordar por la izquierda y comerse el principio de las lineas.
 El hero ya crea contexto de apilamiento (position:relative + z-index),
 asi que un z-index negativo aqui la deja detras del texto del hero sin
 mandarla detras del fondo de la pagina.
 ===================================================================== */
.hero__kansi{ z-index:-1; }
.hero__nopea{ position:relative; z-index:1; }

/* La banda ya no tapa el texto, pero su borde superior seguia cayendo justo
 sobre la linea del telefono y se leia como una costura cruzando la frase.
 En movil la banda mide 15vh y el hueco de abajo del hero era de 12vh, o
 sea que la banda subia mas de lo que el hero reservaba. Se reserva mas
 hueco del que ocupa la banda. */
@media (max-width:760px){
  .hero{ padding-block:clamp(24px,4vh,52px) clamp(150px,21vh,200px); }
  .hero__kansi .kansi-heijastus{ height:clamp(84px,13vh,150px); }
}

/* =====================================================================
 La cola de la "j" cursiva, cortada (2026-08-12, Rafa, con captura).
 Cada verso va dentro de un .rivi-kuori con overflow:hidden, que es lo
 que hace posible la entrada desde abajo. La caja solo dejaba .06em de
 holgura por debajo, y en Newsreader cursiva la cola de la j y de la p
 baja bastante mas, asi que se la comia. Por la izquierda pasaba lo
 mismo: la cursiva se inclina y el trazo se sale de la caja.

 No basta con agrandar la caja: el verso se esconde translandose un
 106% de su alto, y si la caja crece por abajo el texto asomaria por
 ahi durante la animacion. Hay que agrandar la caja Y aumentar el
 desplazamiento en la misma proporcion.
 alto de caja = alto de linea (1.06em) + holgura (.24em) = 1.30em
 hace falta desplazar >= 1.30 / 1.06 = 123%, se deja 130% de margen.
 Los margenes negativos compensan la holgura, asi que el texto no se
 mueve ni un pixel de donde estaba.
 ===================================================================== */
.rivi-kuori{
  padding:0 .16em .24em;
  margin:0 -.16em -.24em;
}
.js-anim [data-tulo="nousu"] .rivi{ transform:translateY(130%); }
.js-anim [data-tulo="nousu"].on .rivi{ transform:translateY(0); }

/* =====================================================================
 Aire del hero (2026-08-12, Amanda): "bottom-heavy and left-hugging...
 a huge dead field of stars below the phone number".

 Por la izquierda: el margen lateral estaba topado en 56 px. A un texto
 de 17 px le sobra, pero al lado de un titular de 73 px se lee como si
 la frase tocara el borde. Se sube el tope y se sube el porcentaje, y
 como el margen es el mismo de toda la web, las secciones siguen
 alineadas entre si, que es lo que no se puede romper.

 Por abajo: el hero reservaba 20vh de hueco, 180 px en un portatil, y
 encima venia el bloque siguiente con los suyos: 279 px de cielo vacio
 entre el telefono y el titulo siguiente. Se recorta el hueco y se
 encoge la banda del reflejo en la misma medida, porque el hueco tiene
 que seguir siendo mayor que la banda o su borde vuelve a cruzar el
 texto, que es el fallo que acabamos de arreglar.
 ===================================================================== */
:root{ --sivu: clamp(20px, 6vw, 88px); }

@media (min-width:761px){
  .hero{ padding-block:clamp(48px,7vh,88px) clamp(112px,14vh,150px); }
  .hero__kansi .kansi-heijastus{ height:clamp(76px,10vh,130px); }
  /* el bloque que sigue tampoco necesita empezar tan abajo */
  .hero + .osio{ padding-top:clamp(40px,5vh,64px); }
}

/* =====================================================================
 El hero deja de crecer con la pantalla (2026-08-13, Amanda: "feels like
 the hero has a fixed min-height that's much taller than its content").
 Tenia razon y mis ajustes anteriores no lo tocaban: yo habia recortado
 rellenos, que son fijos, mientras el hueco de verdad lo creaba el alto
 minimo, que si crece. Medido antes de tocar nada:
 1440x900 contenido 597 px, cielo vacio 233 px
 1920x1080 contenido 597 px, cielo vacio 413 px
 2560x1440 contenido 597 px, cielo vacio 773 px
 O sea que en un monitor grande mas de la mitad del hero era vacio.
 Con el tope, el hero mide lo que pide su contenido en cualquier
 pantalla, y en portatiles pequenos sigue llenando el primer pantallazo
 porque ahi manda el alto de la ventana, que es menor que el tope.
 ===================================================================== */
.hero{ min-height:min(calc(100svh - 70px), 780px); }

/* El punto de la "j" (2026-08-13, Rafa, con captura ampliada). Le di
 holgura por abajo y por los lados, pero arriba la caja seguia a ras y
 el punto de la j cursiva se sale por encima de la altura de mayuscula,
 asi que se lo comia.
 Se puede dar todo el aire que haga falta por arriba sin tocar la
 animacion: el verso entra desde ABAJO, asi que lo unico que decide si
 queda escondido es la holgura inferior, no la superior. */
.rivi-kuori{
  padding-top:.22em;
  margin-top:-.22em;
}

/* Terminada la entrada, fuera el recorte. Ver el comentario en valo.js:
 el overflow:hidden solo hace falta mientras el verso se desliza. Una vez
 colocado, mantenerlo solo sirve para arriesgarse a cortar el punto de una
 "j" o la cola de una "p", que es lo que llevaba pasando. */
.js-anim [data-tulo="nousu"].tulo-lopussa .rivi-kuori{ overflow:visible; }

/* =====================================================================
 24. Video real de la capilla (2026-08-13)
 Material grabado por la clienta en una capilla, ya graduado a la noche
 de esta web. Tres piezas y tres trabajos que no se parecen:

 .silmukka-kuori el bucle mudo de la portada. No es un reproductor,
 es una ventana a la capilla dentro del mismo cielo:
 reutiliza el tratamiento kajo (mascara de borde disuelto y
 mezcla screen) para que las estrellas se vean a
 traves de los bordes.
 .soitin la cancion entera en la pagina de musica. Nunca
 suena sola. Mientras es cartel esta disuelto en la
 noche, y en cuanto se toca deja de estarlo, porque
 los mandos del navegador tienen que verse enteros.
 .tyo-ruutu video el clip de la galeria, con el mismo borde disuelto
 que las fotos de al lado.

 No hay tratamiento de imagen nuevo. El que ya existia es el bueno.
 ===================================================================== */

/* el bucle de la portada */
.silmukka-kuori{
  margin-top:clamp(34px,5vw,54px);
  max-width:900px;
  margin-inline:auto;
}

/* el reproductor de la cancion */
.soitin{
  margin:0;
  display:grid;
  gap:clamp(26px,4vw,46px);
  align-items:center;
}
@media (min-width:860px){
  .soitin{ grid-template-columns:1fr minmax(0,300px); }
}
.soitin__teksti{ display:grid; gap:16px; max-width:56ch; }
.soitin__teksti p{ color:var(--utu); }
.soitin__kesto{
  display:inline-block;
  font-size:var(--t-s);
  color:var(--ambra-pehmea);
  font-variant-numeric:tabular-nums;
  border-top:1px solid var(--viiva);
  padding-top:12px;
}
.soitin__luotto{
  font-size:var(--t-xs);
  color:var(--utu);
  max-width:44ch;
  margin-top:14px;
}

.soitin__lava{
  position:relative;
  max-width:300px;
  margin-inline:auto;
  width:100%;
}
/* la mascara solo mientras es cartel: si el video ya suena, los mandos
 nativos viven en el borde inferior y ahi no puede haber desvanecido */
.js .soitin__lava{
  -webkit-mask-image:radial-gradient(88% 94% at 50% 46%, #000 48%, rgba(0,0,0,.72) 76%, transparent 99%);
          mask-image:radial-gradient(88% 94% at 50% 46%, #000 48%, rgba(0,0,0,.72) 76%, transparent 99%);
}
.js .soitin.soi .soitin__lava{
  -webkit-mask-image:none;
          mask-image:none;
}
.soitin__lava video{
  width:100%;
  aspect-ratio:9 / 16;
  object-fit:cover;
  border-radius:var(--pyoreys);
  background:var(--syva);
}
/* El cartel viene de la grabacion sin graduar y es mucho mas claro que esta
 web. Mientras es cartel se atempera para que no sea un rectangulo encendido
 en mitad de la noche. En cuanto suena se le quita: lo que ella grabo se ve
 como ella lo grabo. */
.js .soitin:not(.soi) .soitin__lava video{
  filter:brightness(.66) saturate(.88) contrast(1.04);
}

/* El boton lo crea el JS: el play nativo sobre un cartel es minusculo y
 esta pagina la abre alguien que no esta para buscar dianas de 20 px. */
.soitin__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  padding:0; border:0; background:none;
  color:var(--nuotti); text-align:center;
  cursor:pointer;
  border-radius:var(--pyoreys);
}
.soitin__play::before{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--pyoreys);
  background:radial-gradient(72% 62% at 50% 48%, rgba(4,9,14,.66), rgba(4,9,14,.34) 68%, rgba(4,9,14,.12));
  transition:background var(--t3) var(--helppo);
}
.soitin__rengas{
  position:relative;
  width:84px; height:84px;
  display:grid; place-items:center;
  border:1px solid var(--ambra);
  border-radius:999px;
  background:rgba(7,15,22,.5);
  transition:background var(--t3) var(--helppo), transform var(--t3) var(--helppo);
}
.soitin__rengas svg{ width:26px; height:26px; margin-left:4px; fill:var(--ambra); }
.soitin__play span{ position:relative; }
.soitin__nimi{ font-size:var(--t-s); }
.soitin__aika{
  display:block;
  font-size:var(--t-xs);
  color:var(--ambra-pehmea);
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}
.soitin__play:hover .soitin__rengas{ background:rgba(255,156,1,.16); }
.soitin__play:hover::before{ background:radial-gradient(72% 62% at 50% 48%, rgba(4,9,14,.5), rgba(4,9,14,.24) 68%, transparent); }

/* el clip de la galeria de Sanna */
.tyo-ruutu video{
  width:100%; height:100%;
  aspect-ratio:4 / 5; object-fit:cover;
  border-radius:var(--pyoreys);
  background:var(--syva);
  -webkit-mask-image:radial-gradient(125% 118% at 50% 44%, #000 62%, transparent 100%);
          mask-image:radial-gradient(125% 118% at 50% 44%, #000 62%, transparent 100%);
}

@media (prefers-reduced-motion: reduce){
  .soitin__rengas,.soitin__play::before{ transition:none; }
}

/* El lema del hero (2026-09-10, peticion de Sanna): la frase de las luces,
 pequena y arriba a la derecha, en la cursiva de la serif. Ella puso un
 titular de servicio en el hero y la frase poetica pasa a ser el lema. En
 telefono no hay "derecha" que valga: va encima del titular, alineada a la
 izquierda como todo lo demas. */
.hero__motto{
  position:absolute; top:clamp(14px,3vh,34px); right:0;
  max-width:24ch; margin:0; text-align:right;
  font-family:var(--aani); font-style:italic; font-weight:300;
  font-size:var(--t-m); line-height:1.35; color:var(--utu);
}
@media (max-width:760px){
  .hero__motto{ position:static; text-align:left; max-width:30ch; margin-bottom:22px; font-size:var(--t-s); }
  /* En telefono el hero dejaba media pantalla de cielo vacio bajo el texto
 (captura del 2026-09-10). Se acorta el tope y el aire de abajo. */
  .hero{ min-height:min(calc(100svh - 70px), 640px); padding-bottom:clamp(64px,10vh,120px); }
}

/* Blogi en tarjetas y pagina propia por entrada (2026-09-10, peticion de
 Sanna). El indice deja de ser una hilera de textos: miniatura arriba,
 fecha, titulo, ingressi y el enlace. Las reglas de arriba de .kirjoitus
 (la hilera con la foto a 200 px) quedan pisadas por estas. */
.kirjoitukset{ display:grid; gap:24px; }
.kirjoitus{
  display:flex; flex-direction:column;
  align-items:stretch;   /* la regla vieja decia start y dejaba la miniatura a 0 px de ancho */
  padding:0; border:1px solid var(--viiva); border-radius:var(--pyoreys);
  background:var(--kansi); overflow:hidden;
  transition:border-color var(--t3) var(--helppo), background-color var(--t3) var(--helppo);
}
.kirjoitus:hover,.kirjoitus:focus-within{ border-color:var(--viiva-vahva); background:var(--kansi-yla); }
.kirjoitus__kuva{ display:block; order:0; }
.kirjoitus__kuva .kuva{ margin:0; }
.kirjoitus__kuva .kuva__kehys{ border-radius:0; }
.kirjoitus__kuva .kuva__kajo,.kirjoitus__kuva .kuva__verho{ display:none; }
.kirjoitus__sisus{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.kirjoitus h3{ margin-top:6px; font-size:var(--t-l); letter-spacing:-.012em; line-height:1.3; }
.kirjoitus h3 a{ text-decoration:none; color:inherit; }
.kirjoitus h3 a:hover{ color:var(--nuotti); }
.kirjoitus__sisus > p{ margin-top:10px; }
.kirjoitus__sisus .merkinta{ align-self:flex-start; }
.kirjoitus__lue{ margin-top:auto; padding-top:20px; align-self:flex-start; font-size:var(--t-s); }
@media (min-width:700px){
  .kirjoitukset{ grid-template-columns:repeat(2,1fr); }
}

/* Con "Runot" de vuelta en el menu de escritorio (2026-09-10) son nueve
   entradas: ninguna se parte en dos lineas, y entre 1000 y 1200 px van un
   poco mas juntas para que quepan con el telefono y el boton. */
.navi a,.otsikko__toimet .puhelin{ white-space:nowrap; }
@media (min-width:1000px) and (max-width:1199px){
  .navi a{ padding-inline:9px; }
  .navi + .otsikko__toimet{ margin-left:12px; }
}

/* La pagina de una entrada: foto entera sin recorte, texto con parrafos,
 citas y listas tal como salen del editor. */
.sisahero .kirjoitus__pvm{ margin-bottom:10px; }
.artikkeli__kuva{ margin:0 0 32px; }
.artikkeli__kuva img{ display:block; width:100%; height:auto; border-radius:var(--pyoreys); background:var(--kansi); }
.artikkeli__kuva .upotus{ border-radius:var(--pyoreys); overflow:hidden; }
.artikkeli__teksti{ display:grid; gap:18px; font-size:var(--t-m); line-height:1.62; }
.artikkeli__teksti p{ max-width:64ch; }
.artikkeli__teksti blockquote{
  margin:10px 0; padding-left:22px; border-left:1px solid var(--ambra);
  font-family:var(--aani); font-style:italic; font-weight:300;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); line-height:1.45; color:var(--nuotti);
  max-width:40ch;
}
.artikkeli__teksti ul,.artikkeli__teksti ol{ padding-left:1.3em; display:grid; gap:8px; max-width:60ch; }
/* La negrita del editor. Sanna (2026-09-14): "boldaukset valiotsikoissa ei
   erotu". La fuente solo cargaba los pesos 400 y 500, y un 500 sobre un 400
   apenas se ve: ahora se carga tambien el 600 (osat/paa.php) y la negrita lo
   usa. Un parrafo que es solo una negrita es un subtitulo: sale un punto mas
   grande y con aire encima. */
.artikkeli__teksti strong,.referenssi strong,.osio p strong,.osio li strong{ font-weight:600; color:var(--nuotti); }
.artikkeli__teksti p:has(> strong:only-child){
  font-size:var(--t-l); letter-spacing:-.012em; line-height:1.3; margin-top:10px;
}
.artikkeli__teksti p:has(> strong:only-child) strong{ font-weight:600; }
.artikkeli__teksti.odottaa{ color:var(--ambra-pehmea); }
.artikkeli__takaisin{ margin-top:36px; }

/* Runot con la misma estructura: tarjetas con las primeras lineas y pagina
 propia por poema. */
.runot-lista{ display:grid; gap:24px; }
.runo--kortti{
  padding:26px 26px 24px; border:1px solid var(--viiva); border-radius:var(--pyoreys);
  background:var(--kansi); max-width:none; display:flex; flex-direction:column;
  transition:border-color var(--t3) var(--helppo), background-color var(--t3) var(--helppo);
}
.runo--kortti:hover,.runo--kortti:focus-within{ border-color:var(--viiva-vahva); background:var(--kansi-yla); }
.runo--kortti h2{ font-size:var(--t-l); letter-spacing:-.012em; }
.runo--kortti h2 a{ text-decoration:none; color:inherit; }
.runo--kortti .runo__vuosi{ margin-top:6px; }
.runo--kortti .runo__teksti{ font-size:var(--t-m); margin-top:14px; line-height:1.55; }
.runo--kortti .linkki{ margin-top:auto; padding-top:20px; align-self:flex-start; font-size:var(--t-s); }
.runo--koko{ border-top:0; padding-top:0; max-width:none; }
@media (min-width:700px){
  .runot-lista{ grid-template-columns:repeat(2,1fr); }
}
.js-anim [data-tulo="sivusta"] .runo--kortti{
  opacity:0;
  transform:translateX(-18px);
  transition:opacity var(--t2) var(--helppo), transform var(--t1) var(--helppo);
}
.js-anim [data-tulo="sivusta"] .runo--kortti:nth-child(even){ transform:translateX(18px); }
.js-anim [data-tulo="sivusta"].on .runo--kortti{ opacity:1; transform:none; }
.js-anim [data-tulo="sivusta"].on .runo--kortti:nth-child(2){ transition-delay:150ms; }
.js-anim [data-tulo="sivusta"].on .runo--kortti:nth-child(3){ transition-delay:300ms; }
.js-anim [data-tulo="sivusta"].on .runo--kortti:nth-child(4){ transition-delay:450ms; }

/* "Sannasta sanottua": las frases de clientes, en la portada y en la pagina
 de Sanna. Solo existe cuando hay alguna publicada. */
.referenssit{ display:grid; gap:20px; margin-top:26px; }
.referenssi{
  margin:0; padding:26px 26px 22px;
  border:1px solid var(--viiva); border-radius:var(--pyoreys); background:var(--kansi);
}
.referenssi p{
  font-family:var(--aani); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem); line-height:1.45; color:var(--nuotti);
}
.referenssi__kuka{ margin-top:16px; font-size:var(--t-s); color:var(--utu); }
@media (min-width:700px){
  .referenssit{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .kirjoitus,.runo--kortti{ transition:none; }
}

/* Los colaboradores en el pie (2026-09-14, peticion de Sanna): solo logos con
   enlace, en todas las paginas, entre las columnas del pie y la linea final.
   Cada logo va sobre una ficha clara: los logos vienen con fondo blanco y
   sobre la noche quedarian como rectangulos sueltos. */
.jalki__kumppanit{
  margin-top:44px; padding-top:22px;
  border-top:1px solid var(--viiva);
}
.jalki__kumppanit-otsikko{ font-size:var(--t-xs); color:var(--utu); margin:0 0 14px; }
.jalki .jalki__kumppanit .kumppanit{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 16px; align-items:center;
}
.jalki .jalki__kumppanit .kumppani{ margin:0; padding:0; }
/* Todas las fichas del mismo tamano y el logo encajado dentro, centrado:
   Sanna pidio el 2026-09-14 "samaan kokoon keskenaan". */
.kumppani a,.kumppani > span{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; width:160px; height:72px; padding:10px 16px;
  background:#f2efe9; border-radius:12px;
  color:#1a2a33; font-size:var(--t-s); text-align:center; text-decoration:none;
  transition:transform var(--t4) var(--helppo), box-shadow var(--t4) var(--helppo);
}
.kumppani a:hover,.kumppani a:focus-visible{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.kumppani img{ display:block; width:auto; height:auto; max-width:128px; max-height:48px; object-fit:contain; }
@media (max-width:600px){
  .kumppani a,.kumppani > span{ width:140px; height:64px; padding:8px 12px; }
  .kumppani img{ max-width:112px; max-height:44px; }
}

/* Mediassa (2026-09-14): la lista de apariciones en prensa, en la pagina del
   blog debajo de Muualla. Filas con linea, como las preguntas frecuentes. */
.media-lista{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:0; }
.media-osuma{ padding:16px 0; border-top:1px solid var(--viiva); }
.media-osuma:last-child{ border-bottom:1px solid var(--viiva); }
.media-osuma__nimi{ font-size:var(--t-l); letter-spacing:-.012em; line-height:1.3; }
.media-osuma__pvm{ font-size:var(--t-xs); color:var(--utu); margin-left:10px; white-space:nowrap; }
.media-osuma__kuvaus{ margin-top:6px; color:var(--utu); max-width:60ch; }

/* La portada lleva el logo mas grande en la cabecera (Sanna, 2026-09-14:
   "etusivulla logo olisi jossain isommalla"). Solo en la portada, para que
   las paginas interiores no pierdan pantalla. */
.otsikko--etusivu .merkki img{ width:76px; height:76px; }
.otsikko--etusivu .otsikko__sisus{ min-height:92px; }
@media (max-width:600px){
  .otsikko--etusivu .merkki img{ width:62px; height:62px; }
  .otsikko--etusivu .otsikko__sisus{ min-height:80px; }
  /* En telefono el lema va en la sans, pequeno y gris: la serif queda solo
     para el titular, y el primer pantallazo tiene una letra menos. */
  .hero__motto{ font-family:var(--sans); font-style:normal; font-size:var(--t-s); letter-spacing:.005em; }
}

/* La portada mas tranquila (Sanna, 2026-09-14): en el hero, donde estaban
   los botones, la foto grande del piano. Los botones y la linea del telefono
   bajan debajo de las tarjetas de servicio. */
.hero__kuva{ margin-top:clamp(36px,6vh,64px); }
.hero__kuva .kuva__kehys{ border-radius:var(--pyoreys); }
.etusivu-toimet{ margin-top:clamp(36px,6vh,56px); }
.hero__nopea{ max-width:none; }
/* Cuatro servicios: dos por fila tambien en pantallas anchas, tres mas uno
   dejaba una tarjeta huerfana. */
@media (min-width:1000px){
  .palvelut{ grid-template-columns:repeat(2,1fr); }
}