/* Ilmeen värit; vaaleat sävyt tummennettu WCAG AA -kontrastiin */
:root {
  --nav: #595959;         /* tummennettu sävystä #676767 */
  --accent: #1ca175;      /* aktiivinen navi – vain koristeena ja isoissa pinnoissa */
  --title: #2a6e5f;
  --subtitle: #1e4e43;
  --text: #404040;
  --muted: #6b6b6b;       /* #a6a6a6 ei läpäise kontrastia */
  --line: #e4e4e4;
  --panel: #f3f4f4;
  --sea: #08565f;
  --bg: #ffffff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.0625rem/1.65 var(--sans); }
a { color: var(--title); text-underline-offset: 3px; }
a:hover { color: var(--subtitle); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: 1rem; top: -4rem; background: #fff; padding: .5rem 1rem; z-index: 10; }
.skip:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Yläpalkki: alkuperäinen kalakuva oikealla, vasen reuna jatkuu meren värinä */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0b6a72 0%, #086e73 55%, #0a5d64 100%); /* alareuna ei saa olla yhtä tumma kuin tunnistepalkki */
  height: clamp(150px, 22vw, 260px);
  border-bottom: 8px solid var(--line);
}
.hero__img {
  position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.hero__inner { position: relative; max-width: 1040px; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: flex-end; }
.logo { position: relative; z-index: 0; color: #fff; text-decoration: none; display: grid; justify-items: start; padding-bottom: clamp(16px, 3vw, 32px); }
.logo:hover { color: #fff; }
/* Silta tunnisterivin jatkona, tasavälit (space-evenly + padding = gap) */
.logo__bridge { height: .95em; width: auto; aspect-ratio: 80 / 28; flex: none; color: #9ef0da; } /* minttu = i-kirjaimen hehkun sävy; korkeus ≈ 1,3 × versaalikorkeus, jotta viivapiirros näyttää yhtä suurelta kuin kirjaimet */
/* Logon i-kirjaimen pisteen hehku */
.glow { position: relative; }
.glow::before {
  content: ""; position: absolute; left: 50%; top: .25em; width: .55em; height: .55em; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(240,255,252,.95) 0 14%, rgba(110,240,210,.5) 32%, rgba(40,200,170,0) 66%);
}
.logo__name { font: 400 clamp(2.2rem, 5vw, 3.4rem)/1 var(--serif); letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.logo__tag { display: inline-flex; align-items: center; justify-content: space-evenly; gap: .7rem; min-width: 100%; margin-top: .5rem; background: rgba(2,40,48,.75); padding: .2rem .7rem; font: 600 .75rem/1.4 var(--serif); letter-spacing: .12em; text-transform: uppercase; }

.nav { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav li + li { border-left: 1px solid var(--line); }
.nav a { display: block; padding: 1.1rem 1.1rem .9rem; font: 1rem var(--serif); color: var(--nav); text-decoration: none; border-bottom: 3px solid transparent; }
.nav li:first-child a { padding-left: 0; }
.nav a:hover { color: var(--title); }
.nav a[aria-current="page"] { color: var(--title); border-bottom-color: var(--accent); }

.layout { max-width: 1040px; margin: 0 auto; padding: 2rem 16px 3rem; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3.5rem; }
main:focus { outline: none; }
section + section { margin-top: 3rem; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.25; }
h1 { color: var(--title); font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin: 0 0 1rem; }
h2 { color: var(--subtitle); font-size: 1.3rem; margin: 2rem 0 .5rem; }
.h-section { color: var(--title); font-size: 1.6rem; margin-top: 0; }
h3 { color: var(--subtitle); font-size: 1.15rem; margin: 0 0 .4rem; }
.lead { font-size: 1.15rem; }

.cards { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.card { background: var(--panel); border-top: 4px solid var(--accent); padding: 1.1rem 1.2rem; }
.card p { margin: 0; font-size: 1rem; }

.steps { padding-left: 1.4rem; }
.steps li { margin-bottom: .5rem; }

.glossary { border-left: 1px dashed #9a9a9a; padding-left: 1.4rem; align-self: start; font-size: .95rem; }
/* Palkin yläreuna h1:n versaalien yläreunan tasalle: .28 × h1:n fonttikoko (Georgia, rivikorkeus 1.25) */
.glossary__bar { margin: calc(.28 * clamp(1.7rem, 3.4vw, 2.2rem)) 0 1.2rem; padding: .3rem .6rem; background: linear-gradient(#f4f4f4, #e2e2e2); color: var(--text); font: italic .95rem var(--serif); }
.glossary dt { font: 700 1rem var(--serif); color: var(--text); margin-top: 1rem; }
.glossary dd { margin: .3rem 0 0; }
.source { color: var(--muted); font-style: italic; font-size: .875rem; }

.footer { background: linear-gradient(#fff, #ececec); border-top: 1px solid var(--line); }
.footer__inner { max-width: 1040px; margin: 0 auto; padding: 1.5rem 16px; font-family: var(--serif); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.footer p { margin: 0; }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .glossary { border-left: 0; border-top: 1px dashed #9a9a9a; padding: 1.5rem 0 0; }
  .glossary__bar { margin-top: 0; }
  .nav a { padding: .9rem .75rem .7rem; }
}
/* Puhelimilla kuva siirtyy, jotta kalat eivät jää tunnistepalkin taakse */
@media (max-width: 480px) { .hero__img { right: -30%; } }

/* Elävä meri: canvas kalakuvan päällä, i-hehkun välähdys ja taukopainike (hero-animaatio.js) */
.hero__fx { aspect-ratio: 724 / 166; -webkit-mask-image: none; mask-image: none; opacity: 0; transition: opacity .8s; pointer-events: none; } /* häivytys tehdään shaderissa */
.hero__fx.is-on { opacity: 1; }
.glow::after {
  content: ""; position: absolute; left: 50%; top: .25em; width: .6em; height: .6em; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: -1; opacity: var(--glint, 0);
  background: radial-gradient(circle, rgba(240,255,252,.9) 0 20%, rgba(110,240,210,.5) 40%, rgba(40,200,170,0) 68%);
}
.hero__pause {
  position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; padding: 7px; /* ylänurkka: ei peitä kaloja millään leveydellä */
  border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(2,40,48,.7); cursor: pointer;
}
.hero__pause svg { display: block; fill: #fff; }
.hero__pause:focus-visible { outline-color: #fff; }
.hero__pause .i-play, .hero__pause.is-paused .i-pause { display: none; }
.hero__pause.is-paused .i-play { display: inline; }
@media (prefers-reduced-motion: reduce) { .hero__fx, .hero__pause { display: none; } }