/* ============================================================
   OTA YHTEYTTÄ (Iines 21.10.2026)
   Hero (.sivu-hero, brandstein.css) ja yhteystiedot: iso sähköposti
   käsin piirretyllä nuolella sekä kolme korttia. Tausta beige (--kerma).
   ============================================================ */
html:has(.sivu-yhteys), .sivu-yhteys{ overflow-x:clip; }
/* iOS Safari ei rajaa juuren clipillä: hero-otsikon kirjaimet (syv-k) ylittivät
   ruudun 9 px ja sivu liukui sivuttain (Jenna 26.10.2026). */
.y-hero{ overflow-x:clip; }
.sivu-yhteys{ --ease:cubic-bezier(.16,1,.3,1); background:var(--kerma); color:var(--musta); }
.kasi{ font-family:var(--f-kasi); text-transform:uppercase; letter-spacing:.06em; }

/* Oikea ylänurkka ja MENU keskellä ylhäällä kuten muilla alasivuilla. */
.p-kulma{
  position:fixed; top:var(--reuna); right:var(--reuna); z-index:70;
  display:grid; justify-items:end; gap:clamp(8px,.8vw,12px);
}
.p-kulma .leima-oikea{ position:static; font-family:var(--f-nav); letter-spacing:.01em; }
.p-menu{
  font-family:var(--f-otsikko); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(16px,1.45vw,24px); line-height:1;
  color:var(--kerma); background:var(--puna);
  padding:.7em 1.4em .65em; border-radius:999px;
  transition:background 260ms linear, color 260ms linear;
}
.p-menu:hover{ background:var(--musta); }
.p-kulma .p-menu{
  position:fixed; left:0; right:0; top:clamp(14px,1.8vw,26px);
  width:max-content; margin-inline:auto; z-index:70;
}
@media (max-width:700px){ .p-menu{ font-size:13px; padding:.65em 1.2em .6em; } }

/* Hero: otsikko punaisena kuten Tiimissä; lyhyempi kuin koko ruutu,
   jotta yhteystiedot näkyvät heti alla. */
.y-hero{ min-height:auto; padding-top:clamp(120px,18vh,200px); }
.y-hero .y-hero__ot{ color:var(--puna); font-size:min(15vw, 30svh) !important; }

/* ---- Yhteystiedot ---- */
.y-tiedot{ padding:clamp(30px,5vw,80px) var(--reuna) clamp(100px,12vw,200px); max-width:1500px; margin-inline:auto; }

.y-posti{ display:grid; justify-items:center; text-align:center; margin-bottom:clamp(60px,8vw,130px); }
/* Merkinnät ovat osoitteen omassa laatikossa ja mitoitettu sen fonttikoon
   mukaan (em), joten ne osuvat osoitteen alkuun kaikilla leveyksillä. */
.y-posti__laatikko{ position:relative; width:max-content; max-width:100%; font-size:clamp(34px,7.4vw,150px);
  padding-top:.62em; }
.y-posti__kasi{ position:absolute; left:-.75em; top:-.05em; margin:0; font-size:.36em; color:var(--puna); rotate:-6deg; white-space:nowrap; }
.y-nuoli{ position:absolute; left:-.58em; top:.2em; width:.7em; height:auto; fill:none; stroke:var(--puna);
  stroke-width:4; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.y-posti__linkki{
  display:inline-block; font-family:var(--f-otsikko); text-transform:uppercase; font-size:1em; line-height:.95;
  color:var(--musta); letter-spacing:-.01em; overflow-wrap:anywhere;
  padding-right:.3em; margin-right:-.3em;   /* vino viimeinen kirjain ei leikkaudu */
  background:linear-gradient(var(--puna),var(--puna)) left calc(100% - .02em) / 0 .08em no-repeat;
  transition:color 300ms linear, background-size 700ms var(--ease);
}
@media (hover:hover){ .y-posti__linkki:hover{ color:var(--puna); background-size:100% .08em; } }
.y-posti__linkki:focus-visible{ color:var(--puna); background-size:100% .08em; }

.y-kortit{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,2vw,32px); }
.y-kortti{
  background:#F3EFE6; border-radius:4px; padding:clamp(22px,2.4vw,40px);
  box-shadow:0 24px 40px -28px rgba(0,0,0,.45); display:grid; align-content:start; gap:.55em;
}
.y-kortti:nth-child(1){ rotate:-1deg; }
.y-kortti:nth-child(2){ rotate:.8deg; }
.y-kortti:nth-child(3){ rotate:-.6deg; }
.y-kortti p{ margin:0; }
.y-kortti__ala{ font-family:var(--f-mono); font-size:clamp(10px,.8vw,12px); letter-spacing:.14em; text-transform:uppercase; opacity:.65; }
.y-kortti__nimi{ font-family:var(--f-otsikko); text-transform:uppercase; font-size:clamp(26px,2.4vw,44px); line-height:.95; }
.y-kortti__rivi{ font-family:var(--f-mono); font-size:clamp(14px,1.1vw,18px); line-height:1.6; }
.y-kortti__rivi a{ color:var(--puna); text-decoration:underline; text-underline-offset:.2em; }
.y-kortti__rivi a:hover{ color:var(--musta); }

@media (max-width:860px){
  .y-kortit{ grid-template-columns:1fr; }
  /* Kapealla osoite täyttää leveyden: merkinnät osoitteen yläpuolelle. */
  .y-posti__laatikko{ font-size:min(12vw, 60px); padding-top:1.3em; }
  .y-posti__kasi{ left:0; font-size:.4em; }
  .y-nuoli{ left:1.95em; top:.12em; width:.75em; rotate:8deg; }
}
@media (prefers-reduced-motion:reduce){
  .y-posti__linkki{ transition:none; }
}

/* YHTEYSTIEDOT SUORAAN POHJALLE (Jenna 23.10.2026): ei kortteja, kallistuksia
   eikä varjoja; sarakkeet erotetaan ohuilla pystyviivoilla. Kapealla allekkain
   vaakaviivoin. */
.y-kortit{ gap:0; }
.y-kortti{ background:none; box-shadow:none; border-radius:0; rotate:none !important;
  padding:clamp(4px,.6vw,10px) clamp(22px,3vw,56px); }
.y-kortti:first-child{ padding-left:0; }
.y-kortti + .y-kortti{ border-left:1px solid rgba(25,25,25,.25); }
@media (max-width:860px){
  .y-kortti{ padding:clamp(20px,5vw,28px) 0; }
  .y-kortti + .y-kortti{ border-left:0; border-top:1px solid rgba(25,25,25,.25); }
}
/* Nimet isommiksi (Jenna 23.10.2026). */
.y-kortti__nimi{ font-size:clamp(32px,3.4vw,64px); }

/* PUHELIMELLA (Jenna 23.10.2026): pienet otsikot ja yhteystiedot isommiksi. */
@media (max-width:700px){
  .y-kortti__ala{ font-size:11px; }
  .y-kortti__rivi{ font-size:16px; }
}

/* SIVELTIMENVETO (Jenna 23.–26.10.2026, referenssi two26.studio/about):
   Jennan Illustratorissa piirtämä veto piirtyy vierityksen mukana heron alta
   yhteystietojen taakse (yhteys.js); tekstit vaihtuvat vaaleiksi sitä mukaa
   kuin veto peittää ne. Alue jatkuu punaiseen footeriin. */
.y-veto{ position:relative; margin-bottom:-1px; }
.y-hero{ position:relative; z-index:1; }   /* heron tekstit vedon päällä */
.y-veto__svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.y-veto__tila{ height:clamp(110px,20vh,240px); }
.y-veto__veto{ display:none; }   /* viivat vain geometriaa (yhteys.js) */
.y-veto__kangas{ position:absolute; left:0; pointer-events:none; }
.y-veto__aalto{ fill:var(--puna); }
.y-veto .y-tiedot{ position:relative; padding-top:0; padding-bottom:clamp(100px,13vw,220px); }

.y-tiedot, .y-posti__linkki, .y-kortti__rivi a, .y-kortti + .y-kortti{
  transition:color 400ms linear, border-color 400ms linear, background-size 700ms var(--ease); }
.y-veto.punainen .y-kortti + .y-kortti{ border-color:rgba(228,222,208,.45); }

/* Punainen ylänurkan alla: MENU ja leima vaaleiksi kuten footerissa. */
body.y-punaisella .p-menu{ background:var(--kerma); color:var(--puna); }
body.y-punaisella .leima-oikea{ color:var(--kerma); }

/* Kaksi saraketta (Kaikki kysymykset pois, Jenna 23.10.2026). */
.y-kortit{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:860px){ .y-kortit{ grid-template-columns:1fr; } }

/* Veto ulottuu reunasta reunaan: yhteystietoalue koko leveydelle, sisältö
   enintään 1500 px keskellä (muuten lopputäyttö jätti leveällä ruudulla
   beiget reunat, Jenna 26.10.2026). */
.y-veto .y-tiedot{ max-width:none; padding-inline:max(var(--reuna), calc((100% - 1500px) / 2 + var(--reuna))); }
/* Desktopilla iso sähköposti hieman alemmas, ettei toisen pyyhkäisyn reuna
   osu kirjaimiin (Jenna 26.10.2026). Siirto ei muuta asettelua, joten veto
   pysyy samassa kohdassa. */
@media (min-width:861px){ .y-veto .y-posti{ position:relative; top:clamp(0px, 3.6vw, 80px); } }

/* Hero-otsikko optisesti keskelle (Jenna 26.10.2026): kursiivin kallistus ja
   kirjainväli siirtävät näkyvät kirjaimet laatikossaan noin 0,05 em oikealle. */
.y-hero .y-hero__ot{ position:relative; left:-.05em; }
/* Kermanväriset tekstit punaisen kohdalla (yhteys.js piirtää kankaalle). */
.y-veto__tekstit{ position:absolute; left:0; top:0; pointer-events:none; z-index:2; }
/* Puhelimella otsikko kahdelle riville ja isommaksi (Jenna 26.10.2026):
   YHTEYTTÄ täyttää leveyden. Kirjaimet lähes kiinni toisissaan rivien välillä
   (Ä on rivin oikeassa päässä, OTA keskellä, joten pisteet eivät osu). */
@media (max-width:700px){
  .y-hero__r{ display:block; }
  .y-hero .y-hero__ot{ line-height:.92; left:-.08em; }   /* koko: brandstein.js (data-rivit) */
}