/* JP Kaljonen – sivuston tyylit.
   Mitat vastaavat alkuperäistä Arnold2-teemaa (mitattu 1440 px ja 375 px leveyksillä 12.11.2026).
   Saavutettavuuden vuoksi tehdyt poikkeamat on merkitty kommentilla "A11Y". */

/* ---------- Fontit (Poppins, SIL Open Font License) ---------- */
/* ---------- Fontit (Poppins, SIL Open Font License) ---------- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-ext-300-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-300-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Muuttujat ---------- */
:root {
  --c-bg: #ffffff;
  --c-text: #000000;
  --c-accent: #ad2a1a;      /* nykyisen sivun valikkokohta ja linkit, kontrasti 6,7:1 */
  --c-muted: #3f3f3f;       /* 10,5:1 */
  --c-focus: #000000;
  --font: Poppins, Arial, Helvetica, sans-serif;
  --pad: 60px;              /* sivun reunatila */
  --header-h: 360px;
  --col-gap: 40px;
  --grid-gap: 10px;
}
@media (max-width: 1199px) { :root { --pad: 40px; } }
@media (max-width: 767px) { :root { --pad: 20px; --header-h: 100px; --col-gap: 20px; } }

/* ---------- Perusta ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font); font-weight: 300; font-size: 1.25rem; /* 20px */
  line-height: 1.5; letter-spacing: 0.5px; overflow-wrap: break-word;
}
@media (max-width: 767px) { body { font-size: 1rem; } }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4, h5, h6 { color: var(--c-text); font-weight: 600; line-height: 1.2; margin: 0; }
p, ul, ol, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 600; }
cite { font-style: italic; }
::selection { color: #fff; background: #000; }
/* Näkyy vain näppäimistöfokuksessa (karusellin pysäytyspainike) */
.focus-reveal:not(:focus):not(:focus-visible) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.container { padding-left: var(--pad); padding-right: var(--pad); }
[hidden] { display: none !important; }

/* A11Y: näkyvä näppäimistöfokus (2.4.7, 2.4.11) */
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; border-radius: 1px; }
:focus:not(:focus-visible) { outline: none; }
main:focus, .site-header:focus { outline: none; box-shadow: none; }

/* A11Y: ohituslinkki */
.skip-link { position: absolute; left: 12px; top: -200px; z-index: 10001; padding: 12px 20px; background: #000; color: #fff; font-size: 1rem; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Ylätunniste ----------
   Tietokone: 360 px korkea, logoteksti keskellä (Poppins 50/600, välistys 3 px, yläreuna 121 px),
   valikko sen alla keskellä (18/300, välit 40 px, yläreuna 221 px). */
.site-header { position: relative; z-index: 9990; background: var(--c-bg); }
.header-main { min-height: var(--header-h); display: flex; flex-direction: column; align-items: center; padding-top: 121px; }
.logo { display: inline-block; color: var(--c-text); }
.logo-text { display: block; font-size: 3.125rem; font-weight: 600; line-height: 60px; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; }
.site-nav { margin-top: 40px; }
.site-nav .menu { display: flex; justify-content: center; list-style: none; padding: 0; }
.site-nav .menu > li { line-height: 18px; }
.site-nav .menu > li + li { margin-left: 40px; }
.site-nav .menu a {
  position: relative; display: inline-block; font-size: 1.125rem; line-height: 1; letter-spacing: 0.5px; color: var(--c-text);
  padding: 4px 0; margin: -4px 0; /* A11Y: kosketusalue ≥ 24 px ilman ulkoasumuutosta */
}
.site-nav .menu a:hover { color: var(--c-accent); }
.site-nav .menu .is-current > a { color: var(--c-accent); }
/* A11Y: nykyinen sivu erottuu myös muuten kuin värillä (1.4.1): ohut alleviivaus */
.site-nav .menu .is-current > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; }

.menu-toggle { display: none; align-items: center; min-height: 44px; min-width: 44px; padding: 0; margin: 0 -4px 0 0; border: 0; background: none; color: var(--c-text); font: inherit; font-size: 1rem; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; justify-content: flex-end; }

@media (max-width: 767px) {
  /* Kännykkä: 100 px korkea, logo 24 px vasemmalla, MENU-painike oikealla */
  .header-main { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 0; gap: 0 12px; }
  .logo-text { font-size: 1.5rem; line-height: 1.2; }
  .site-nav { margin-top: 0; width: 100%; padding-bottom: 20px; }
  .site-nav .menu { justify-content: flex-start; flex-wrap: wrap; gap: 8px 24px; }
  .site-nav .menu > li + li { margin-left: 0; }
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js.menu-open .site-nav {
    display: flex; position: fixed; inset: 0; z-index: -1; overflow-y: auto;
    align-items: center; justify-content: center; padding: calc(var(--header-h) + 20px) 20px 40px; background: var(--c-bg);
  }
  .js.menu-open .site-nav .menu { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .js.menu-open .site-nav .menu a { font-size: 1.25rem; line-height: 1.35; padding: 6px 0; margin: 0; color: var(--c-text); font-weight: 300; }
  .js.menu-open .site-nav .menu .is-current > a { color: var(--c-text); }
  .js.menu-open .site-nav .menu .is-current > a::after { display: none; }
  /* Vain nykyinen sivu lihavoituna */
  .js.menu-open .site-nav a[aria-current] { font-weight: 600; }
  .js.menu-open { overflow: hidden; }
  .js.menu-open .header-main { position: relative; z-index: 2; }
}

/* ---------- Projektiruudukko ----------
   Kaksi palstaa, kuvat 16:9, väli 10 px. Hiiren alla kuva tummuu 80 % mustaksi ja nimi ja vuodet tulevat valkoisella. */
.grid { list-style: none; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .grid { grid-template-columns: minmax(0, 1fr); } }
/* Kuva ja teksti ovat samassa ruudukon solussa: kortti on 16:9, mutta kasvaa, jos teksti ei mahdu
   (esim. kapea puhelin tai tekstin suurennus 200 %). Teksti ei koskaan leikkaudu eikä valu kortin ulkopuolelle. */
.card { position: relative; display: grid; }
.card-media, .card-text { grid-area: 1 / 1; }
.card-media { position: relative; overflow: hidden; background: #f2f2f2; aspect-ratio: 16 / 9; min-height: 100%; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.card-media::after { content: ""; position: absolute; inset: -1px; background: #000; opacity: 0; transition: opacity .3s; }
.card-text {
  position: relative; z-index: 9; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 16px 30px; text-align: center; color: #fff; opacity: 0; transition: opacity .3s;
}
.card-title { color: #fff; font-size: 2rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; overflow-wrap: anywhere; hyphens: auto; }
.card-sub { margin-top: 6px; font-size: 1.25rem; line-height: 1.4; }
/* Koko kortti on linkki (venytetty linkki) */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 10; }
.card:focus-within .card-media::after { opacity: .8; }
.card:focus-within .card-text { opacity: 1; }
@media (hover: hover) {
  .card:hover .card-media::after { opacity: .8; }
  .card:hover .card-text { opacity: 1; }
}
/* A11Y: fokus näkyy koko kortin ympärillä */
.card-link:focus-visible { outline: none; box-shadow: none; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
@media (max-width: 1199px) and (min-width: 768px) { .card-title { font-size: 1.5rem; } .card-sub { font-size: 1rem; } }
@media (max-width: 767px) { .card-title { font-size: 1.5rem; } .card-sub { font-size: 1rem; } .card-text { padding: 12px 20px; } }
/* Kosketusnäyttö: JavaScript tummentaa kortin, joka on ruudun keskellä. Ilman JavaScriptiä nimi näkyy kuvan alla. */
@media (hover: none) {
  .card.is-active .card-media::after { opacity: .8; }
  .card.is-active .card-text { opacity: 1; }
  html:not(.js) .card-text { grid-area: 2 / 1; opacity: 1; color: var(--c-text); align-items: flex-start; text-align: left; padding: 8px 0 0; }
  html:not(.js) .card-title { color: var(--c-text); font-size: 1.125rem; }
}
/* Kansikuva, jossa on jo tekstiä (coverHasText: true): nimeä ei kirjoiteta päälle, vaan kuvan värit käännetään. */
.card-textcover .card-text, .card-textcover:hover .card-text, .card-textcover:focus-within .card-text, .card-textcover.is-active .card-text { opacity: 0; }
.card-textcover .card-media::after { display: none; }
.card-textcover:focus-within .card-img, .card-textcover.is-active .card-img { filter: invert(1); }
@media (hover: hover) { .card-textcover:hover .card-img { filter: invert(1); } }

/* ---------- Karuselli ----------
   Alkuperäinen: koko leveys, korkeus 100vh (kännykässä 45vh), yksi kuva kerrallaan, vaihto 5 s välein, kuvanumero oikealla alhaalla. */
.gallery { position: relative; margin-bottom: 120px; }
.gallery-single .gallery-img { width: 100%; height: 100vh; min-height: 300px; object-fit: cover; }
.carousel-track {
  margin: 0; padding: 0; display: flex; height: 100vh; min-height: 300px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.slide .gallery-img { width: 100%; height: 100%; object-fit: cover; }
.carousel-btn {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #000; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.carousel-btn:hover { background: #fff; }
.carousel-prev, .carousel-next { top: 50%; transform: translateY(-50%); }
.carousel-prev { left: var(--pad); }
.carousel-next { right: var(--pad); }
.carousel-controls { position: absolute; z-index: 6; left: var(--pad); bottom: 20px; }
.carousel-pause { position: static; width: 44px; height: 44px; }
.carousel-pause .icon-play { display: none; }
.carousel-pause[aria-pressed="true"] .icon-play { display: block; }
.carousel-pause[aria-pressed="true"] .icon-pause { display: none; }
.carousel-counter { position: absolute; z-index: 5; right: var(--pad); bottom: 20px; padding: 2px 10px; font-size: .875rem; line-height: 1.5; color: #000; background: rgba(255, 255, 255, .9); }
.carousel-counter:empty { display: none; }
@media (max-width: 767px) {
  .gallery { margin-bottom: 60px; }
  .carousel-track, .gallery-single .gallery-img { height: 45vh; min-height: 220px; }
  .carousel-btn { width: 44px; height: 44px; }
  .carousel-prev { left: 8px; } .carousel-next { right: 8px; }
  .carousel-controls { left: 8px; bottom: 8px; }
  .carousel-counter { right: 8px; bottom: 8px; }
}

/* ---------- Video (Twilight of the Idols) ----------
   Yhtä leveä kuin otsikko ja leipäteksti yhdessä (1320 px, kun ikkuna on 1440 px), 16:9. */
.project-video { margin-bottom: 120px; }
.project-video video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; }
.video-description { margin-top: 20px; font-size: .875rem; line-height: 1.5; }
@media (max-width: 767px) { .project-video { margin-bottom: 60px; } .video-description { font-size: 1rem; } }

/* ---------- Otsikko vasemmalla, teksti oikealla ----------
   Palstat 640 px (x = 60 ja x = 740 1440 px:n ikkunassa). */
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.rows { padding-bottom: 160px; }
.heading-large { font-size: 4.375rem; line-height: 1.2; }               /* 70 px / 84 px */
.heading-fluid { font-size: max(2rem, 3.4vw); line-height: 1.2; }        /* Bio, Contact: 3.4vw */
.text p, .text ul, .text ol { margin: 0 0 1.5em; }
.text > :last-child { margin-bottom: 0; }
.text h2 { font-size: 1.375rem; margin: 1.5em 0 .5em; }
.text > h2:first-child { margin-top: 0; }
.text ul, .text ol { padding-left: 1.4em; }
/* Luettelomerkkinä lyhyt viiva (-) pisteen sijaan; luettelo säilyy luettelona ruudunlukijoille */
.text ul { list-style-type: "-\00a0\00a0"; }
/* A11Y: tekstin linkit alleviivataan (1.4.1) */
.text a { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text a:hover { text-decoration-thickness: 2px; }
/* Work info: 14 px, otsikko 600 */
.work-info { margin-top: 80px; font-size: .875rem; line-height: 1.5; }
.work-info h2 { font-size: .875rem; line-height: 1.2; margin: 30px 0 10px; }
.work-info > h2:first-child { margin-top: 0; }
.work-info p { margin: 0 0 1em; }
.page-content { padding-top: 70px; }
.page-content .row { column-gap: 0; }
.page-content .col-text { padding-top: 10px; }
@media (max-width: 1199px) { .heading-large { font-size: 3.125rem; } }
@media (max-width: 767px) {
  .row { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .rows { padding-bottom: 80px; }
  .heading-large { font-size: 2rem; }
  .work-info { margin-top: 50px; font-size: 1rem; }
  .work-info h2 { font-size: 1rem; }
  .page-content { padding-top: 30px; }
  .page-content .row { row-gap: 30px; }
  .page-content .col-text { padding-top: 0; }
}

/* ---------- Edellinen / seuraava ---------- */
.post-navi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); padding-bottom: 40px; font-size: .875rem; }
.post-navi a { display: inline-flex; flex-direction: column-reverse; gap: 4px; padding: 4px 0; line-height: 1.5; }
.post-navi-next { justify-self: end; text-align: right; }
.post-navi-label { text-transform: uppercase; letter-spacing: 1px; }
.post-navi-title { font-weight: 300; }
.post-navi a:hover .post-navi-title { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Tekstisivut (näyttelysivu, saavutettavuus, 404) ---------- */
.text-page { max-width: calc(800px + var(--pad) * 2); margin: 0 auto; padding-top: 40px; padding-bottom: 120px; }
.text-hero { margin: 0 0 45px; }
.text-hero img { width: 100%; height: auto; }
.text-page-title { font-size: 2.875rem; line-height: 1.2; margin-bottom: 40px; }
.text-page .text h2 { font-size: 1.5rem; margin-top: 2em; }
.schedule { list-style: none; padding: 0 !important; }
.schedule time { display: inline-block; min-width: 4.5em; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .text-page { padding-top: 20px; padding-bottom: 60px; } .text-page-title { font-size: 2rem; } }

/* ---------- Alatunniste ---------- */
.site-footer { padding: 40px 0 50px; text-align: center; font-size: .875rem; }
.footer-meta a { display: inline-block; padding: 4px 0; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-meta a:hover { color: var(--c-text); }

.back-top { position: fixed; z-index: 999; right: var(--pad); bottom: 60px; width: 40px; height: 60px; color: #000; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .8); }
.back-top .icon { width: 40px; height: 60px; transition: transform .3s; }
.back-top:hover .icon { transform: translateY(-6px); }
@media (max-width: 767px) { .back-top { display: none !important; } }

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

/* ---------- Windowsin suurikontrastitila ---------- */
@media (forced-colors: active) {
  .card-text { grid-area: 2 / 1; opacity: 1; display: block; padding: 8px 0 0; text-align: left; }
  .card-title, .card-sub { color: CanvasText; }
  .carousel-btn { border: 1px solid ButtonText; }
  .site-nav .menu .is-current > a::after { background: CanvasText; }
}

/* A11Y: videon omat ohjaimet ovat varjo-DOMissa; fokus näytetään koko videon ympärillä (2.4.7) */
.project-video video:focus, .project-video video:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* Kapea tekstisivu videolla (Twilight of the Idols / Preview): video ja teksti 650 px leveinä keskellä */
.text-page-narrow { max-width: calc(650px + var(--pad) * 2); padding-top: 0; }
.text-page-narrow .project-video { margin-bottom: 3em; }
.text-page-narrow .text { font-size: 1.125rem; line-height: 1.6; }
/* Videon kuvateksti: pieni (noin 8 pt), alkaa videon vasemmasta alakulmasta, hyvin pieni väli videoon.
   Koko on rem-yksikössä, joten se kasvaa selaimen tekstin suurennuksen mukana (WCAG 1.4.4). */
.video-caption { margin-top: 6px; text-align: left; font-size: .6875rem; line-height: 1.3; letter-spacing: .3px; color: var(--c-text); }