/* ═════════════════════════════════════════════════
   SÄIE-HUB – fontit itse hostattuina
   Ei ulkoista latausta: sivu toimii offline ja
   työpajassa ilman verkkoa, eikä kävijän IP välity
   kolmannelle osapuolelle. Molemmat ovat
   muuttujafontteja (SIL Open Font License 1.1).
   ═════════════════════════════════════════════════ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-latin.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: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-latin-ext.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: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/figtree-latin.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: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/figtree-latin-ext.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;
}

/* ═════════════════════════════════════════════════
   SÄIE-HUB – design-tokenit (johdettu Säie-logosta)
   Arvot ovat viimeistellystä logosta (saie-brand-taito,
   26.8.2026). Kolme väriä tulee suoraan logotiedostosta
   eikä niitä säädetä: --lahti, --kuusikko, --pellava.
   ═════════════════════════════════════════════════ */
:root {
  --merisumu: #E9EEEC;   /* tausta – viileä vaalea */
  --lahti:    #054455;   /* Häädemeeste – meri (logon sininen) */
  --kuusikko: #1C4223;   /* Hankasalmi – metsä (logon vihreä) */
  --dyyni:    #E7DCC4;   /* lämmin korostuspinta */
  --pellava:  #B58641;   /* säie-lanka (logon kulta) */
  --kaarna:   #1C2B23;   /* teksti, footer */
  --paperi:   #FDFCF9;   /* kortit */

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Figtree", Helvetica, Arial, sans-serif;

  --radius: 14px;
  --shadow: 0 2px 14px rgba(28, 43, 35, 0.08);
  --wrap: 1100px;
}

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  color: var(--kaarna);
  background: var(--merisumu);
  line-height: 1.6;
  font-size: 1.0625rem;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

a { color: var(--lahti); }
/* Fokusrengas: pellava yksin jää alle WCAG 2.1:n vaatiman 3:1-kontrastin vaalealla
   taustalla (merisumu 2,8 · dyyni 2,4). Tumma kaarna-rengas pellavan ympärillä nostaa
   ilmaisimen vaatimuksen yli kaikilla sivun taustoilla ja säilyttää signatuurivärin. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pellava);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--kaarna);
  border-radius: 4px;
}
.footer a:focus-visible {
  box-shadow: 0 0 0 5px var(--merisumu);   /* tummalla footerilla pari on vaalea */
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--kaarna); color: #fff; padding: .6rem 1rem; z-index: 99;
}
.skip-link:focus { left: 0; }

/* ── Yläpalkki ─────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .55rem 1.25rem;
  background: color-mix(in srgb, var(--merisumu) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(28,43,35,.08);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--kaarna); }
.brand-logo { height: 38px; width: 38px; object-fit: contain; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: .06em; font-size: 1.05rem;
}
/* Sivujen välinen navigaatio: piirretään content/sivut.js:stä, piilossa yhden sivun
   ajan. Erottuu osiolinkeistä painavampana — sivu on isompi askel kuin osio. */
.sivunav { display: flex; gap: 1.1rem; align-items: center; margin-left: 1rem; }
.sivunav[hidden] { display: none; }
.sivunav a {
  text-decoration: none; color: var(--kaarna);
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .03em; padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.sivunav a:hover { border-bottom-color: var(--pellava); }
.sivunav a[aria-current="page"] { border-bottom-color: var(--kaarna); }

.topnav { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; }
.topnav a {
  text-decoration: none; color: var(--kaarna);
  font-weight: 600; font-size: .95rem; padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { border-bottom-color: var(--pellava); }
.langswitch { display: flex; gap: .25rem; }
.langswitch button {
  font: inherit; font-weight: 700; font-size: .85rem;
  padding: .3rem .55rem; border: 1.5px solid var(--kaarna);
  background: transparent; color: var(--kaarna);
  border-radius: 8px; cursor: pointer;
}
.langswitch button[aria-pressed="true"] {
  background: var(--kaarna); color: var(--merisumu);
}

/* ── Hero: meri kohtaa metsän ──────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 4.5rem 1.25rem 3.5rem;
  text-align: center;
  min-height: 70vh;
  display: grid; place-items: center;
  /* Taustaliukujen suunnat. Kapeassa asettelussa ne ovat vaakasuorat, ks. Responsiivisuus. */
  --liuku-meri: 100deg; --liuku-metsa: 260deg;
}
.hero-scape {
  position: absolute; top: 0; bottom: 0; width: 55%;
  pointer-events: none;
}
.hero-sea {
  left: 0;
  background: linear-gradient(var(--liuku-meri),
    color-mix(in srgb, var(--lahti) 26%, var(--merisumu)) 0%,
    transparent 70%);
}
.hero-forest {
  right: 0;
  background: linear-gradient(var(--liuku-metsa),
    color-mix(in srgb, var(--kuusikko) 26%, var(--merisumu)) 0%,
    transparent 70%);
}
/* Lanka kulkee nimen takana. Nimen keskikohta on noin 72 px yläosan keskikohdan
   yläpuolella kaikilla kielillä ja leveyksillä, ja logon ja alaotsikon väliin jää
   kapeimmillaan 121 px. Siksi lanka on 240 px korkea ja nostettu 92 px: aalto
   mahtuu väliin eikä osu alaotsikkoon. */
.hero-thread {
  position: absolute; left: 0; right: 0; top: 50%;
  width: 100%; height: 240px; transform: translateY(calc(-50% - 92px));
  pointer-events: none;
}
#threadPath {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: threadDraw 2.4s ease-out .3s forwards;
  opacity: .85;
}
@keyframes threadDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  #threadPath { stroke-dashoffset: 0; }
}

.hero-inner { position: relative; max-width: 680px; }
.hero-logo {
  width: min(240px, 55vw); height: auto;
  filter: drop-shadow(0 4px 18px rgba(28,43,35,.15));
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800; letter-spacing: .08em;
  margin-top: .5rem;
}
.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 500; color: var(--lahti);
}
/* Hankkeen hyväksytty ydinviesti (viestintäsuunnitelma, luku 2). Ei kirjoiteta uusiksi. */
.hero-ydinviesti {
  margin: 1.2rem auto 0; max-width: 34ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw + .5rem, 1.35rem);
  line-height: 1.35; color: var(--kaarna);
}
.hero-lead { margin: 1.1rem auto 0; max-width: 46ch; font-size: 1.1rem; }
.hero-cta { margin-top: 1.6rem; display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none;
  font-weight: 700; font-size: 1rem;
  padding: .75rem 1.5rem; border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary { background: var(--kuusikko); color: #fff; }
.btn-ghost { border: 2px solid var(--kaarna); color: var(--kaarna); }
.hero-places {
  margin-top: 2rem; font-family: var(--font-display);
  font-weight: 600; letter-spacing: .05em; font-size: .95rem;
  display: flex; gap: .9rem; justify-content: center; align-items: center;
}
.place-sea { color: var(--lahti); }
.place-forest { color: var(--kuusikko); }
.place-knot { color: var(--pellava); font-size: 1.1rem; }

/* ── Osiot yleisesti ───────────────────────── */
.section { padding: 4rem 0; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700; margin-bottom: 1.6rem;
}
.thread-underline { position: relative; display: inline-block; padding-bottom: .35rem; }
.thread-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--pellava);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s ease;
}
.section.inview .thread-underline::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .thread-underline::after { transform: scaleX(1); }
}
.section-lead { max-width: 62ch; margin-bottom: 2rem; font-size: 1.1rem; }
.section-note { margin-top: 1.6rem; font-size: .95rem; opacity: .8; max-width: 62ch; }

/* ── Nyt tapahtuu ──────────────────────────── */
.section-nyt { padding-top: 2.5rem; }

/* Säie-motiivi: yksi langan sovellus kerrallaan samassa katseessa
   (bränditaito, luku "Säie-motiivi"). Hero-lanka ja ensimmäisen osion
   alleviivaus osuvat työpöytäselaimessa samaan näkymään sivun yläosassa, ja
   mobiilissa vielä lähemmäs, koska hero-lanka siirtyy heron alareunaan
   (ks. media query alempana). Ensimmäinen osio jättää siksi alleviivauksen
   pois: hero-lanka on sen näkymän langan sovellus. Muut osiot alleviivataan
   normaalisti, koska hero on silloin jo vieritetty pois. Kehitystarve 36. */
.section-nyt .thread-underline::after { content: none; }
.nostot-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nosto {
  background: var(--paperi); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow);
  border-left: 5px solid var(--pellava);
}
.nosto time { font-size: .85rem; font-weight: 700; color: var(--lahti); letter-spacing: .03em; }
.nosto h3 { font-family: var(--font-display); font-size: 1.15rem; margin: .25rem 0 .35rem; }

/* Jako-painike kortin pohjassa. Kortit ovat leveällä näytöllä rinnakkain samankorkuisia,
   joten painike työnnetään alareunaan eikä jätetä tekstin perään eri korkeuksille.
   Tilateksti ("Teksti kopioitu…") rivittyy painikkeen alle, jos se ei mahdu viereen. */
.nosto { display: flex; flex-direction: column; }
.nosto-jako {
  margin-top: auto; padding-top: .9rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
}
.nosto-jaa {
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--kaarna);
  background: transparent; border: 2px solid var(--kaarna); border-radius: 999px;
  padding: .3rem .9rem; min-height: 36px; cursor: pointer;
}
.nosto-jaa:hover { background: var(--dyyni); }
.nosto-jaa:focus-visible { border-radius: 999px; }
.nosto-jaa svg { width: 1em; height: 1em; flex: none; }
.nosto-jaa-tila { font-size: .9rem; font-weight: 600; }
@media (pointer: coarse) {
  .nosto-jaa { min-height: 44px; }
}
/* Kopioinnin apukenttä näkymän ulkopuolella (ks. app.js, kopioiVanhaan). */
.piilokentta { position: fixed; top: 0; left: -999px; }

/* ── Työkalut ──────────────────────────────── */
.section-tyokalut { background: var(--paperi); }
.kanavat-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kanava {
  position: relative;
  background: var(--merisumu); border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1.5px solid rgba(28,43,35,.1);
  display: flex; flex-direction: column; gap: .5rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kanava:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kanava-icon { font-size: 1.7rem; line-height: 1; }
.kanava h3 { font-family: var(--font-display); font-size: 1.2rem; }
.kanava p { font-size: .97rem; flex: 1; }
.kanava .badge {
  align-self: flex-start; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px;
}
.badge-placeholder { background: var(--dyyni); color: var(--kaarna); }
.badge-live { background: var(--kuusikko); color: #fff; }
.kanava a.kanava-cta {
  font-weight: 700; text-decoration: none; color: var(--kuusikko);
}
.kanava a.kanava-cta:hover { text-decoration: underline; }
.kanava.kanava-open { border-style: dashed; border-color: var(--pellava); background: transparent; }

/* ── Kunnat ────────────────────────────────── */
.kunnat-split {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1.2rem; align-items: stretch;
}
.kunta-card {
  background: var(--paperi); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  padding: 0 1.5rem 1.5rem;
}
.kunta-band { height: 10px; margin: 0 -1.5rem 1.2rem; }
.kunta-sea .kunta-band { background: linear-gradient(90deg, var(--lahti), color-mix(in srgb, var(--lahti) 40%, var(--merisumu))); }
.kunta-forest .kunta-band { background: linear-gradient(90deg, color-mix(in srgb, var(--kuusikko) 40%, var(--merisumu)), var(--kuusikko)); }
.kunta-card h3 { font-family: var(--font-display); font-size: 1.6rem; }
.kunta-tag {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: .8rem; margin-bottom: .6rem;
}
.kunta-sea .kunta-tag { color: var(--lahti); }
.kunta-forest .kunta-tag { color: var(--kuusikko); }
.kunta-link { display: inline-block; margin-top: .8rem; font-weight: 700; text-decoration: none; }
.kunta-link:hover { text-decoration: underline; }
.kunta-knot { display: grid; place-items: center; width: 64px; }
.kunta-knot svg { width: 64px; height: 64px; }

/* ── Toimijat ──────────────────────────────── */
.section-toimijat { background: var(--dyyni); }
.toimijat-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.toimija {
  background: var(--paperi); border-radius: var(--radius);
  padding: 1.3rem; box-shadow: var(--shadow);
}
.toimija h3 { font-family: var(--font-display); font-size: 1.15rem; }
.toimija .toimija-kunta { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.toimija.sea .toimija-kunta { color: var(--lahti); }
.toimija.forest .toimija-kunta { color: var(--kuusikko); }
.toimija-invite {
  border: 2px dashed var(--pellava); background: transparent;
  display: grid; place-items: center; text-align: center;
  padding: 1.6rem 1.3rem; border-radius: var(--radius);
}
.toimija-invite p { font-weight: 600; }

/* ── Yhteyshenkilöt ────────────────────────── */
.ihmiset-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ihminen {
  background: var(--paperi); border-radius: var(--radius);
  padding: 1.3rem; box-shadow: var(--shadow);
  display: flex; gap: 1rem; align-items: center;
}
.ihminen-avatar {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  color: #fff; flex-shrink: 0;
}
.ihminen.sea .ihminen-avatar { background: var(--lahti); }
.ihminen.forest .ihminen-avatar { background: var(--kuusikko); }
.ihminen h3 { font-size: 1.05rem; font-family: var(--font-display); }
/* Sähköpostiosoite on yksi pitkä sana. Ilman rivitystä se työntyy kortin
   reunan yli kapealla näytöllä ja venyttää koko sivun leveyssuunnassa. */
.ihminen p { font-size: .92rem; overflow-wrap: anywhere; }

/* ── Hanke ─────────────────────────────────── */
.section-hanke { background: var(--paperi); }
.hanke-grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr; align-items: start; }
.hanke-official {
  font-size: 1.15rem; font-weight: 500;
  border-left: 5px solid var(--pellava);
  padding-left: 1.1rem; margin-bottom: 1.5rem;
}
.hanke-desc h3 { font-family: var(--font-display); margin: 1.2rem 0 .4rem; }
.hanke-desc ul { padding-left: 1.2rem; }
.hanke-desc li { margin-bottom: .4rem; }
.hanke-facts {
  background: var(--merisumu); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.hanke-facts h3 { font-family: var(--font-display); margin-bottom: .8rem; }
.hanke-facts dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .95rem; }
.hanke-facts dt { font-weight: 700; }
.hanke-facts dd { text-align: right; }
.hanke-nro { margin-top: 1rem; font-size: .85rem; opacity: .7; }

/* ── Footer ────────────────────────────────── */
.footer { background: var(--kaarna); color: var(--merisumu); padding: 2.5rem 0 1.5rem; }
.footer a { color: var(--dyyni); }
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
}
.footer-brand { display: flex; gap: .9rem; align-items: center; }
.footer-logo { height: 56px; width: 56px; object-fit: contain; background: var(--merisumu); border-radius: 10px; padding: 4px; }

/* ── Tunnusrivistö ──────────────────────────
   Footerissa käytetään EU-tunnuksen virallista NEGAVERSIOTA (valkoinen teksti, lippu
   alkuperäisvärein), joka on tehty juuri tummalle taustalle. Tunnusta ei väritetä eikä
   käännetä negaksi itse — negaversio on oma tiedostonsa komission kuvapankista.
   Leader-logo toimii tummalla sellaisenaan: siinä on valkoinen ääriviiva, ja vihreä saa
   kontrastisuhteen 5,6 footerin taustaa vasten.
   Tunnus vaihtuu kielen mukana (`data-i18n-attr="src:…"`), koska tunnuslause on osa
   kuvaa. Suoja-alue tulee `gap`- ja `padding`-arvoista.
   EU-tunnus on leveämpi kuin Säie-logo missään kohtaa sivua — tämä on tarkoituksellista,
   koska EU-tunnuksen on oltava vähintään yhtä suuri kuin hankkeen oma tunnus. */
.footer-tunnukset { display: grid; justify-items: start; gap: .9rem; }
.tunnusrivi {
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  padding: .4rem 0;
}
.eu-tunnus { width: 280px; max-width: 100%; height: auto; display: block; }
.leader-tunnus { width: 118px; max-width: 100%; height: auto; display: block; }
.eu-sub { font-size: .88rem; opacity: .85; }
.footer-fine { margin-top: 2rem; font-size: .85rem; opacity: .75; max-width: 80ch; }

/* ── EU-tunnus hankekuvauksen yhteydessä ────
   Tiedotusvelvoite: kuvauksen, josta ilmenevät tavoitteet, tulokset ja EU:n rahoitusosuus,
   yhteydessä on oltava tunnus. Osion tausta on paperi, joten levyä ei tarvita. */
.hanke-rahoitus { margin-top: 1.6rem; display: grid; gap: .7rem; justify-items: start; }
.hanke-rahoitus .eu-tunnus { width: 240px; }
.hanke-rahoituslause { font-size: .95rem; max-width: 62ch; }

/* ── Responsiivisuus ───────────────────────── */
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; }
  .topnav { order: 3; width: 100%; justify-content: center; }
  .kunnat-split { grid-template-columns: 1fr; }
  .kunta-knot { justify-self: center; transform: rotate(90deg); }
  .hanke-grid { grid-template-columns: 1fr; }
  /* Kapea yläosa on korkea. Kallistettu liuku ei silloin ehdi häipyä ennen oman
     alueensa reunaa, ja meren ja metsän reunat näkyvät pystyraitana keskellä.
     Vaakasuora liuku häipyy aina kohdassa 70 % alueen leveydestä. */
  .hero { min-height: auto; padding-top: 3rem; --liuku-meri: 90deg; --liuku-metsa: 270deg; }
}

/* Kapealla näytöllä yläosan korkeus määräytyy sisällöstä, joten nimen paikka lasketaan
   yläreunasta: yläosan täyte 3rem + logon korkeus + otsikon marginaali .5rem + puolet
   otsikkorivin korkeudesta (fonttikoko × 1.6 / 2). Näin lanka kulkee nimen takana myös
   kapealla näytöllä. Jos .hero-logon leveys, .hero-titlen fonttikoko tai yläosan täyte
   muuttuu, tämä kaava on päivitettävä. Aiemmin lanka oli tekstin alapuolella ja osui
   painikkeisiin. */
@media (max-width: 700px) {
  .hero-thread {
    top: calc(3.5rem + min(240px, 55vw) + clamp(2.4rem, 6vw, 4rem) * .8);
    transform: translateY(-50%); height: 170px;
  }
}