:root {
  --solu: 32px;
  --pohja: #030508;
  --huurre: rgba(140, 190, 235, 0.075);
  --teksti: #dde8f2;
  --teksti-2: #8ea2b6;
  --lammin: #f2671f;
}
html {
  color-scheme: dark;
  background-color: var(--pohja);
  background-image:
    linear-gradient(var(--huurre) 1px, transparent 1px),
    linear-gradient(90deg, var(--huurre) 1px, transparent 1px);
  background-size: var(--solu) var(--solu);
  background-attachment: fixed;
}
body.cg-root {
  color: var(--teksti);
  font: 400 15px/24px "Martian Mono", ui-monospace, monospace;
  font-stretch: 87.5%;
  padding: calc(var(--solu) * 2) var(--solu) var(--solu);
}
.johdanto, .ala, .asiakirja { text-shadow: 0 0 6px var(--pohja), 0 0 2px var(--pohja); }
a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: #fff; text-decoration-color: var(--lammin); }
:focus-visible { outline: 2px solid var(--lammin); outline-offset: 3px; }

body.cg-root.etusivu {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: 2vh var(--solu);
}
.yla { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sanamerkki { font: 800 clamp(40px, 6.5vh, 60px)/1 "Big Shoulders Stencil", "Martian Mono", sans-serif; letter-spacing: 0.08em; color: #e9f2fa; }
.sanamerkki a { text-decoration: none; }
.yla-nimi { margin-top: 8px; color: var(--teksti-2); }

main { width: min(100%, calc(var(--solu) * 28)); margin: 0 auto; }
.johdanto {
  text-align: center; margin: 2.2vh auto 2.4vh; max-width: calc(var(--solu) * 22);
  font-size: clamp(16px, 2.2vh, 20px); line-height: 1.5; font-weight: 500; font-stretch: 100%;
}
.tuote {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--solu); align-items: center;
  padding: 1.8vh var(--solu);
  color: inherit; text-decoration: none;
  background: rgba(3, 5, 8, 0.72);
  box-shadow: inset 0 0 0 1px rgba(140, 190, 235, 0.16);
  transition: box-shadow 0.25s, background 0.25s;
}
.tuote + .tuote { margin-top: 2vh; }
.tuote:hover, .tuote:focus-visible { background: rgba(3, 5, 8, 0.86); box-shadow: inset 0 0 0 1px rgba(242, 103, 31, 0.55); outline: none; }
.tuote:focus-visible { box-shadow: inset 0 0 0 2px var(--lammin); }
.tuote-kuva { width: min(23vh, calc(var(--solu) * 8)); transition: transform 0.4s, color 0.25s; --runko: rgba(140, 190, 235, 0.38); }
.tuote:hover .tuote-kuva, .tuote:focus-visible .tuote-kuva { --runko: rgba(242, 103, 31, 0.75); }
.tuote:hover .tuote-kuva { transform: scale(1.03); }
.tuote-teksti, .tuote-nimi, .tuote-lause, .tuote-kuvaus, .tuote-linkit { display: block; }
.tuote-nimi { font: 800 36px/1 "Big Shoulders Stencil", "Martian Mono", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
.tuote-lause { margin: 6px 0 12px; color: var(--lammin); font-weight: 500; }
.tuote-kuvaus { font-size: 14px; line-height: 22px; }
.tuote-linkit { display: flex; flex-wrap: wrap; gap: 6px var(--solu); margin-top: 12px; }
.tuote-linkki { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tuote:hover .tuote-linkki { color: #fff; text-decoration-color: var(--lammin); }
.tuleva { color: var(--teksti-2); }
@media (prefers-reduced-motion: reduce) { .tuote, .tuote-kuva { transition: none; } .tuote:hover .tuote-kuva { transform: none; } }

.ala { margin: 2.2vh auto 0; text-align: center; color: var(--teksti-2); font-size: 12px; line-height: 20px; max-width: calc(var(--solu) * 28); }
.ala p + p { margin-top: 4px; }
.ala-pieni { font-size: 11px; line-height: 16px; }
body.cg-root:not(.etusivu) { padding: calc(var(--solu) * 2) var(--solu) var(--solu); }
body.cg-root:not(.etusivu) .ala { margin-top: calc(var(--solu) * 3); }

.lampolukema {
    position: fixed; right: var(--solu); top: var(--solu); margin: 0;
  font: 500 12px/16px "Martian Mono", monospace; color: var(--teksti-2);
  background: var(--pohja); padding: 4px 8px; pointer-events: none;
}

@media (max-width: 760px) {
  body.cg-root.etusivu { justify-content: flex-start; padding: var(--solu) 16px; }
  .tuote { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px 16px; gap: 16px; }
  .tuote-kuva { width: calc(var(--solu) * 7); }
  .tuote-linkit { justify-content: center; }
}

.asiakirja { max-width: calc(var(--solu) * 22); margin: calc(var(--solu) * 2) auto 0; }
.asiakirja h1 { font-size: 32px; line-height: 32px; font-weight: 700; font-stretch: 112.5%; }
.asiakirja h2 { margin-top: var(--solu); font-size: 17px; line-height: 32px; font-weight: 700; }
.asiakirja p, .asiakirja ul { margin-top: 12px; }
.asiakirja ul { padding-left: 20px; }
.asiakirja .paivays { color: var(--teksti-2); margin-top: 8px; }