@font-face { font-family: 'Fraunces'; src: url('fontit/fraunces-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('fontit/fraunces-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fontit/source-sans-3-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }

:root {
  --paperi: #ebe6dc;
  --muste: #141312;
  --harmaa: #6b645a;
  --puna: #c8361f;
  --reuna: clamp(16px, 3vw, 36px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paperi);
  color: var(--muste);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Paperin rakeisuus */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.33 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#sulka { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
#sulka.osuu { cursor: pointer; }

.nimi { position: fixed; top: var(--reuna); left: var(--reuna); z-index: 10; }
.nimi h1 {
  margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 380; font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.01em; line-height: 1;
}
.nimi__linkit { display: flex; gap: 1.4em; margin-top: 0.6em; font-size: clamp(13px, 1.1vw, 15px); letter-spacing: 0.06em; }
.nimi__linkit a { color: var(--harmaa); text-decoration: none; padding: 0.2em 0; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.nimi__linkit a:hover { color: var(--muste); border-color: var(--muste); }


.vihje {
  position: fixed; right: var(--reuna); bottom: var(--reuna); margin: 0; z-index: 10;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15px; color: var(--harmaa);
  transition: opacity 1.2s; pointer-events: none; white-space: nowrap;
}
.vihje.pois { opacity: 0; }

.yhteys { position: fixed; left: var(--reuna); bottom: var(--reuna); z-index: 10; font-size: 14px; letter-spacing: 0.03em; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; }
.yhteys a { color: var(--muste); text-decoration: none; border-bottom: 1px solid rgba(20, 19, 18, 0.25); }
.yhteys #puhelin { color: var(--harmaa); border-color: transparent; }
.yhteys a:hover { border-color: var(--puna); }

/* Kyltti: teksti, joka ilmestyy sulan lohkon viereen */
.kyltti {
  position: fixed; z-index: 20; left: 0; top: 0; max-width: min(300px, 70vw);
  display: flex; flex-direction: column; gap: 0.25em; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease, translate 0.6s ease; translate: 0 3px;
}
.kyltti.nakyy { opacity: 1; translate: 0 0; }
/* Teksti "kirjoittuu" esiin kuin sulkakynällä */
.kyltti > span { clip-path: inset(-0.4em 100% -0.4em 0); }
.kyltti.nakyy > span { animation: kirjoita 0.9s cubic-bezier(.4,.1,.2,1) forwards; }
.kyltti.nakyy .kyltti__rivi { animation-delay: 0.22s; }
.kyltti.vasen > span { clip-path: inset(-0.4em 0 -0.4em 100%); }
@keyframes kirjoita { to { clip-path: inset(-0.4em -0.4em -0.4em -0.4em); } }
.kyltti.oikea { text-align: left; }
.kyltti.vasen { text-align: right; align-items: flex-end; }
.kyltti.ala { text-align: center; align-items: center; background: rgba(235, 230, 220, 0.92); padding: 0.6em 1em; border-radius: 2px; max-width: min(340px, calc(100vw - 32px)); }
.kyltti.ala > span { clip-path: inset(-0.4em 100% -0.4em 0); }
.kyltti__otsikko { font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.kyltti__rivi { font-size: 15px; line-height: 1.4; color: #3c3833; }

/* Ruudunlukijoille ja näppäimistölle: luettelo, joka näkyy vain fokuksessa */
.luettelo ol { list-style: none; margin: 0; padding: 0; }
.luettelo button {
  position: fixed; left: var(--reuna); top: 40%; z-index: 30;
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
  font: inherit; background: var(--muste); color: var(--paperi); border: 0; padding: 0.6em 1em;
}
.luettelo button:focus-visible { clip-path: none; width: auto; height: auto; outline: 2px solid var(--puna); outline-offset: 2px; }

/* Video-/tekstipaneeli */
.peite {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(235, 230, 220, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: var(--reuna); animation: esiin 0.5s ease; overflow-y: auto;
}
.peite--sivu { place-items: start center; padding-top: clamp(70px, 12vh, 140px); padding-bottom: 60px; }
.peite[hidden] { display: none; }
@keyframes esiin { from { opacity: 0; } }
.peite__sisus { width: min(1000px, 100%); position: relative; }
.peite h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 380; font-size: clamp(26px, 4vw, 44px); margin: 0 0 0.5em; padding-right: 2em; }
.peite__media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.peite__media p { font-family: 'Fraunces', Georgia, serif; font-size: clamp(19px, 2vw, 24px); line-height: 1.5; max-width: 34em; margin: 0 0 0.9em; }
.peite__rivi { color: var(--harmaa); margin: 1em 0 0; max-width: 40em; }
.peite__rivi:empty { display: none; }
.peite--sivu .peite__sisus { width: min(820px, 100%); }
.peite__teksti p { font-family: 'Fraunces', Georgia, serif; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; margin: 0 0 1em; max-width: 36em; }
.esimerkit { list-style: none; padding: 0; margin: 2.5em 0 0; display: grid; gap: 1.75em; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.esimerkit li { display: flex; flex-direction: column; gap: 0.2em; }
.esimerkit iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.esimerkki { display: block; padding: 0; border: 0; background: #000; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.esimerkki img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; filter: grayscale(0.35); transition: opacity 0.4s, filter 0.4s; }
.esimerkki:hover img { opacity: 1; filter: none; }
.esimerkki::after { content: ''; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--paperi); }
.esimerkki__otsikko { font-family: 'Fraunces', Georgia, serif; font-size: 18px; margin-top: 0.5em; }
.esimerkki__rivi { font-size: 14px; color: var(--harmaa); }
.peite__sulje {
  position: absolute; right: 0; top: 0; width: 44px; height: 44px; font-size: 32px; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--muste);
}
.peite__sulje:hover { color: var(--puna); }

:focus-visible { outline: 2px solid var(--puna); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .peite, .kyltti, .vihje { animation: none; transition: none; }
  .kyltti > span, .kyltti.vasen > span { clip-path: none; animation: none !important; }
}

/* Valokuvat paneeleissa: värilliset, hieman hillityt */
.peite--sivu .peite__media { display: grid; gap: 0 clamp(24px, 4vw, 56px); }
@media (min-width: 760px) {
  .peite--sivu .peite__sisus { width: min(1080px, 100%); }
  .peite--sivu .peite__media { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .peite--sivu .esimerkit { grid-column: 1 / -1; }
}
.painokuva { margin: 0 0 1.75em; }
@media (min-width: 760px) { .painokuva img { aspect-ratio: 4 / 5; } }
.painokuva img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  object-position: 42% 30%;
  filter: saturate(0.88) contrast(0.97);
}
.painokuva figcaption { font-size: 12px; color: var(--harmaa); margin-top: 0.5em; letter-spacing: 0.04em; }

/* Video, joka avautuu vain YouTubessa */
.youtubessa { display: block; position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; color: var(--paperi); text-decoration: none; }
.youtubessa img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: opacity 0.4s; }
.youtubessa:hover img { opacity: 0.85; }
.youtubessa span {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  padding: 0.7em 1.3em; border: 1px solid currentColor; font-size: 15px; letter-spacing: 0.06em; white-space: nowrap;
  background: rgba(20, 19, 18, 0.35);
}

/* Kansikuvat (julkaisut) */
.kannet { list-style: none; padding: 0; margin: 2.5em 0 0; display: grid; gap: 1.75em; grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); grid-column: 1 / -1; }
.kannet li { display: flex; flex-direction: column; gap: 0.2em; }
.kannet img { width: 100%; height: auto; display: block; box-shadow: 0 1px 2px rgba(20, 19, 18, 0.18), 0 8px 24px -10px rgba(20, 19, 18, 0.35); }

/* Paluulinkki videosta Musician/Creative-paneeliin */
.peite__takaisin {
  display: block; background: none; border: 0; padding: 0.3em 0; margin: 0 0 0.8em; cursor: pointer;
  font: inherit; font-size: 14px; letter-spacing: 0.06em; color: var(--harmaa);
}
.peite__takaisin:hover { color: var(--muste); }
.peite__takaisin[hidden] { display: none; }