/* summanen.org – tyylit
   Tumma 3D-metsä on koko sivun takana, ja osiot ovat sen päällä olevia tekstikerroksia.

   Sisältö:
   1. Muuttujat ja perusasetukset
   2. Tausta: 3D-metsä, ilmakehä, edistymispalkki, reunakaistat
   3. Yläpalkki: logo ja valikko
   4. Osiot ja otsikot
   5. Roolipainikkeet (avausnäkymä)
   6. Logo-otsikot ja sivustolinkit
   7. Laatikot (.values)
   8. Yhteystiedot
   9. Evästeilmoitus
   10. Apuluokat
   11. Näyttökoot ja käyttäjän asetukset */


/* 1. Muuttujat ja perusasetukset ------------------------------------------- */

:root {
  /* värit */
  --void: #0E1714;            /* sivun tausta */
  --ice: #F6F4EF;             /* otsikot ja vaalea teksti */
  --text-2: #D6DDD7;          /* leipäteksti */
  --muted: #A3B6AC;           /* pienet selitteet */
  --ember: #E08A3C;           /* oranssi korostus */
  --ember-light: #EC9A50;     /* oranssin hover-sävy */
  --pine: #2E7D6B;            /* tumma vihreä */

  /* samat värit rgb-lukuina läpinäkyviä sävyjä varten: rgba(var(--ember-rgb), 0.3) */
  --void-rgb: 14, 23, 20;
  --mint-rgb: 143, 199, 180;
  --ember-rgb: 224, 138, 60;

  --line: rgba(var(--mint-rgb), 0.28);

  /* fontit */
  --display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a:focus-visible,
button:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 6px; }


/* 2. Tausta ----------------------------------------------------------------- */

/* 3D-metsä häivytetään näkyviin, kun se on käynnistynyt (js/forest.js lisää .on-luokan) */
#city {
  position: fixed; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s ease;
}
#city.on { opacity: 1; }

/* värikkäät valokeilat ja reunojen tummennus metsän päällä */
.air {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 85%, rgba(var(--mint-rgb), 0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 18% 22%, rgba(46, 125, 107, 0.18), transparent 70%),
    radial-gradient(ellipse 45% 35% at 78% 30%, rgba(var(--ember-rgb), 0.12), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(var(--void-rgb), 0.92) 100%);
}

/* vierityksen edistymispalkki yläreunassa */
.bar {
  position: fixed; top: 0; left: 0; z-index: 7;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--pine), var(--ember));
}

/* tummat kaistat ylä- ja alareunan kiinteiden elementtien alla, jotta teksti liukuu niiden alle */
.band { position: fixed; left: 0; right: 0; z-index: 5; pointer-events: none; }
.band--top {
  top: 0; height: calc(64px + env(safe-area-inset-top, 0px));
  background: linear-gradient(to bottom, var(--void) 0%, var(--void) 62%, rgba(var(--void-rgb), 0) 100%);
}
.band--bottom {
  bottom: 0; height: calc(64px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--void) 0%, var(--void) 55%, rgba(var(--void-rgb), 0) 100%);
}

/* pienet kiinteät tekstit (sijainti oikeassa alakulmassa) */
.hud {
  position: fixed; z-index: 6;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.hud--bl {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  text-align: right;
}

/* "Vieritä"-vihje alareunan keskellä */
.cue {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  transform: translateX(-50%);
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted);
  transition: opacity .4s ease;
}


/* 3. Yläpalkki: logo ja valikko --------------------------------------------- */

/* logo vasemmassa ylänurkassa vie sivun alkuun */
.brand-home {
  position: fixed; z-index: 8;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(20px + env(safe-area-inset-left, 0px));
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
}
.brand-home img { display: block; width: auto; height: 22px; }

/* valikko oikeassa ylänurkassa: nykyisen osion nimi ja pyöreä nappi */
.menu {
  position: fixed; z-index: 8;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 16px;
}
.menu__state {
  margin: 0;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ember);
}
.menu__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--void-rgb), 0.9); color: var(--ice);
  cursor: pointer;
  transition: border-color .2s ease;
}
.menu__btn:hover,
.menu__btn[aria-expanded="true"] { border-color: var(--ember); }

/* kielivalinta FI / EN valikkonapin vieressä */
.lang {
  display: flex; align-items: center;
  height: 44px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--void-rgb), 0.9);
}
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 100%; padding: 0 10px; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  font-size: 12px; letter-spacing: 0.14em;
  transition: color .2s ease, background .2s ease;
}
.lang a:hover { color: var(--ice); }
.lang a[aria-current="page"] { background: rgba(var(--ember-rgb), 0.16); color: var(--ember); }

/* kolme viivaa, jotka muuttuvat ristiksi */
.menu__icon { position: relative; width: 16px; height: 12px; }
.menu__icon i {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
  transition: transform .2s ease, top .2s ease, opacity .15s ease;
}
.menu__icon i:nth-child(1) { top: 0; }
.menu__icon i:nth-child(2) { top: 5.25px; }
.menu__icon i:nth-child(3) { top: 10.5px; }
.menu__btn[aria-expanded="true"] .menu__icon i:nth-child(1) { top: 5.25px; transform: rotate(45deg); }
.menu__btn[aria-expanded="true"] .menu__icon i:nth-child(2) { opacity: 0; }
.menu__btn[aria-expanded="true"] .menu__icon i:nth-child(3) { top: 5.25px; transform: rotate(-45deg); }

.menu__list {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(320px, calc(100vw - 32px));
  margin: 0; padding: 8px; list-style: none;
  background: rgba(var(--void-rgb), 0.97);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.menu__list:not([hidden]) { animation: menu-drop .18s ease-out; }
@keyframes menu-drop { from { opacity: 0; transform: translateY(-6px); } }

/* näkymätön silta napin ja listan välissä, ettei valikko sulkeudu hiirtä siirrettäessä */
.menu__list::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.menu__list li + li.menu__sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

/* valikon linkit ja Evästeet-nappi näyttävät samalta */
.menu__list a,
.menu__list button {
  display: flex; align-items: center; gap: 14px;
  min-height: 46px; padding: 0 14px; border-radius: 10px;
  color: var(--text-2); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.menu__list button { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.menu__list a span,
.menu__list button span {
  flex: none; width: 30px;
  font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.04em;
  color: var(--ember);
}
.menu__list a:hover,
.menu__list button:hover { background: rgba(var(--mint-rgb), 0.08); color: var(--ice); }
.menu__list a[aria-current="location"] { background: rgba(var(--ember-rgb), 0.12); color: var(--ice); }
.menu__list a[aria-current="location"]::after {
  content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%;
  background: var(--ember);
}


/* alareuna: versionumero (linkki muutoslokiin) ja GitHub-logo (linkki lähdekoodiin) */
.menu__list .menu__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.menu__list .menu__meta a {
  min-height: 44px; padding: 0 14px;
  font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em;
  color: var(--muted);
}
.menu__list .menu__meta a span:not(.sr-only) { width: auto; font-size: inherit; color: inherit; }
.menu__list .menu__meta a:hover { color: var(--ice); }
.menu__list .menu__gh { justify-content: center; width: 44px; padding: 0; }
.menu__gh svg { width: 18px; height: 18px; }


/* 4. Osiot ja otsikot ------------------------------------------------------- */

main { position: relative; z-index: 4; overflow-x: clip; }

.scene {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  min-height: 100vh; max-width: 1180px;
  margin: 0 auto; padding: 16vh 7vw;
}
.scene--right { align-items: flex-end; text-align: right; }

/* tumma häivytys tekstipalstan takana, jotta teksti erottuu metsästä */
.scene::before {
  content: ""; position: absolute; inset: 0 -50vw; z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--void-rgb), 0.78) 0%, rgba(var(--void-rgb), 0.78) calc(50vw + 30%),
    rgba(var(--void-rgb), 0.45) calc(50vw + 75%), rgba(var(--void-rgb), 0.3) 100%);
}
.scene--right::before {
  background: linear-gradient(270deg,
    rgba(var(--void-rgb), 0.78) 0%, rgba(var(--void-rgb), 0.78) calc(50vw + 30%),
    rgba(var(--void-rgb), 0.45) calc(50vw + 75%), rgba(var(--void-rgb), 0.3) 100%);
}

/* osion yläotsikko, esim. "Rooli 1/4 · Järjestelmäarkkitehti" */
.tag {
  margin: 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ember);
}

h1, h2 {
  margin: 0;
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  line-height: 0.94; letter-spacing: -0.04em;
  text-wrap: balance;
}
h1 { font-size: clamp(46px, 11vw, 136px); }
/* englanninkielinen pääotsikko ("one approach") on pidempi, joten sitä pienennetään vähän */
html[lang="en"] h1 { font-size: clamp(42px, 9.2vw, 112px); }
h2 { font-size: clamp(36px, 7.4vw, 96px); }

.glow { color: var(--ember); text-shadow: 0 0 30px rgba(var(--ember-rgb), 0.35); }

/* leipäteksti */
.say { margin: 0; max-width: 48ch; font-size: clamp(15px, 1.7vw, 19px); color: var(--text-2); }
.scene--right .say { margin-left: auto; }

/* ohut varjo erottaa tekstin taustan viivoista */
.say, .tag, .values p, .contact .v { text-shadow: 0 1px 3px rgba(var(--void-rgb), 0.9); }

/* oranssilla alleviivatut tekstilinkit */
.say a.inline,
.values a.inline,
.site-link a,
.values .more a {
  color: var(--ice);
  text-decoration: underline; text-decoration-color: var(--ember);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.say a.inline:hover,
.values a.inline:hover,
.site-link a:hover,
.values .more a:hover { color: var(--ember); }


/* 5. Roolipainikkeet avausnäkymässä ----------------------------------------- */

.roles { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.roles a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--void-rgb), 0.9); color: var(--ice);
  font-size: 14px; letter-spacing: 0.04em; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.roles a span { font-size: 12px; color: var(--ember); }
.roles a:hover { border-color: var(--ember); background: rgba(var(--ember-rgb), 0.12); }


/* 6. Logo-otsikot ja sivustolinkit ------------------------------------------ */

.logo-h { line-height: 0; }
.logo-h img { display: block; width: clamp(240px, 42vw, 520px); max-width: 100%; height: auto; }
.logo-h .logo-paimio { width: clamp(220px, 28vw, 360px); }

/* Sitowisen ja Paimion logot ovat linkkejä */
.logo-link { display: inline-block; border-radius: 6px; transition: transform .2s ease, opacity .2s ease; }
.logo-link:hover { transform: translateY(-3px); opacity: 0.9; }

/* "sitowise.com ↗" ja "paimio.fi ↗" osion tekstin alla */
.site-link { margin: -6px 0 0; font-size: 15px; letter-spacing: 0.04em; }
.site-link a { display: inline-block; padding-block: 6px; }


/* 7. Laatikot (.values) ----------------------------------------------------- */

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; width: 100%; }

.values > div {
  position: relative; min-width: 0;
  padding-top: 16px; border-top: 2px solid var(--ember);
  text-align: left;
  transition: transform .25s ease;
}
.values h3 {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -0.02em;
  transition: color .25s ease;
}
.values p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }

/* hiiren alla tai näppäimistöfokuksessa laatikko nousee ja otsikko muuttuu oranssiksi */
.values > div:hover,
.values > div:focus-within { transform: translateY(-5px); }
.values > div:hover h3,
.values > div:focus-within h3 { color: var(--ember); }

/* linkki laatikon alla, esim. "vlindata.fi ↗" */
.values .more { margin-top: 10px; font-size: 14px; letter-spacing: 0.04em; }
.values .more a { display: inline-block; padding-block: 6px; }

/* VLiNdATA-laatikko: kuva, nimi ja kuvan suurennus hiiren alla */
.partner__head { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 10px; }
.partner__head h3 { margin: 0; white-space: nowrap; }
.partner__img {
  position: relative; z-index: 1; flex: none;
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ember);
  transform-origin: left center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.partner__img:hover { z-index: 3; transform: scale(2.68); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }
.values .partner__name { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }


/* 8. Yhteystiedot ----------------------------------------------------------- */

.vcard { width: 100%; max-width: 640px; }
.vcard__head { display: flex; align-items: center; gap: 20px; padding-bottom: 18px; }
.vcard__img {
  flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ember);
}

.contact p { margin: 0; }
.vcard__name {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -0.02em;
}
.contact .vcard__role { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.vcard__role img { width: auto; height: 20px; }

/* yksi rivi per yhteystieto: selite vasemmalla, arvo oikealla */
.vcard__row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 2px 20px;
  min-height: 52px;
}
.vcard__row > * { min-width: 0; }

.contact .k { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.contact .v {
  font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.9vw, 22px);
  overflow-wrap: anywhere;
}
.contact .v a {
  color: var(--ice);
  text-decoration: underline; text-decoration-color: var(--ember);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.contact .v a:hover { color: var(--ember); }
.contact .v--nowrap { font-size: clamp(15px, 1.5vw, 19px); white-space: nowrap; overflow-wrap: normal; }
.v--row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }

/* some-palveluiden logot pyöreinä nappeina, samaan tyyliin kuin kopiointinapit */
/* neljä logoa rivissä, jotta kahdeksan logoa asettuu siististi kahdelle riville */
.social { display: grid; grid-template-columns: repeat(4, 44px); gap: 14px; margin: 0; padding: 12px 0; list-style: none; }
.social__link {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--void-rgb), 0.9); color: var(--text-2);
  transition: border-color .2s ease, color .2s ease;
}
.social__link svg { width: 18px; height: 18px; }
.social__link:hover { border-color: var(--ember); color: var(--ice); }

/* kopiointinappi sähköpostin ja puhelinnumeron perässä */
.copy {
  flex: none; display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--void-rgb), 0.9); color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.copy svg { width: 18px; height: 18px; }
.copy:hover { border-color: var(--ember); color: var(--ice); }
.copy.is-done { border-color: var(--ember); color: var(--ember); }


/* 9. Evästeilmoitus --------------------------------------------------------- */

/* kiinteä laatikko alhaalla vasemmalla, molemmat valinnat yhtä helppoja */
.consent {
  position: fixed; z-index: 20;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 32px));
  padding: 20px 22px;
  background: rgba(var(--void-rgb), 0.97);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  font-size: 14px; line-height: 1.55; color: var(--text-2);
}
.consent__title { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ice); }
.consent__text { margin: 0; }
.consent__actions { display: flex; gap: 10px; margin-top: 16px; }
.consent__btn {
  flex: 1; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ice);
  font: inherit; font-weight: 500; letter-spacing: 0.04em;
  cursor: pointer;
}
.consent__btn:hover { border-color: var(--ember); }
.consent__btn--primary { background: var(--ember); border-color: var(--ember); color: var(--void); }
.consent__btn--primary:hover { background: var(--ember-light); }


/* 10. Apuluokat ------------------------------------------------------------- */

/* estää rivityksen, esim. "Core Ops -tiimin" */
.nw { white-space: nowrap; }

/* näkyy vain ruudunlukijalle */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* 11. Näyttökoot ja käyttäjän asetukset ------------------------------------- */

/* leveä näyttö: Yhteys-osiossa otsikko vasemmalla ja yhteystiedot oikealla */
@media (min-width: 1200px) {
  .scene--contact {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    grid-auto-rows: min-content; align-content: center; column-gap: 56px;
  }
  .scene--contact > :not(.vcard) { grid-column: 1; }
  .scene--contact > .vcard { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .scene--contact h2 { font-size: clamp(40px, 4.6vw, 66px); }
}

@media (max-width: 1000px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .scene--right { align-items: flex-start; text-align: left; }
  .scene--right .say { margin-left: 0; }
  .scene::before,
  .scene--right::before { background: rgba(var(--void-rgb), 0.72); }
  .menu__state,
  .hud-coords { display: none; }
  .menu { gap: 10px; }
  .vcard__img { width: 68px; height: 68px; }
  .vcard__row { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 10px; }

  /* puhelimessa väljempi: lyhyemmät pikkuotsikot, enemmän riviväliä ja tilaa osien välissä */
  .scene { gap: 24px; }
  .tag { font-size: 11px; letter-spacing: 0.16em; line-height: 1.5; }
  .say { line-height: 1.75; }
  .values { row-gap: 40px; }
  .values p { font-size: 15px; line-height: 1.7; }
  .roles { gap: 8px; }
  .roles a { padding: 0 16px; font-size: 13px; }
  .lang a { min-width: 34px; padding: 0 8px; }
  /* "Paimio" alakulmassa peittäisi tekstiä; sijainti lukee jo avausnäkymän tekstissä */
  .hud { display: none; }
}

@media (max-width: 460px) {
  .values { grid-template-columns: minmax(0, 1fr); }
}

/* käyttäjä on pyytänyt suurempaa kontrastia */
@media (prefers-contrast: more) {
  :root { --muted: #C9D5CF; --text-2: #F6F4EF; }
  .scene::before,
  .scene--right::before { background: rgba(var(--void-rgb), 0.97); }
  .say, .tag, .values p, .contact .v { text-shadow: none; }
}

/* käyttäjä on pyytänyt vähemmän liikettä: ei 3D-metsää, ei liukumia eikä animaatioita */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #city, .cue { display: none; }
  .scene { min-height: 0; padding: 72px 7vw; }
  .menu__list:not([hidden]) { animation: none; }
  .menu__icon i, .menu__btn, .lang a, .roles a, .logo-link, .values > div, .values h3, .partner__img { transition: none; }
  .logo-link:hover,
  .values > div:hover,
  .values > div:focus-within { transform: none; }
}