/* =====================================================
   Arkkitehtisuunnittelu Kirsi Komulainen
   Galleriamainen asettelu · Cormorant Garamond + Familjen Grotesk
   Ei korostusväriä — valokuvat kantavat värin
   ===================================================== */

:root {
  /* Color — bright stone gallery, gold accent */
  --paper: #FAF9F7;
  --paper-2: #F0EDE8;
  --ink: #1C1917;
  --ink-2: #57534E;
  --line: #E4E0D9;
  --deep: #1C1917;
  --deep-2: #292524;
  --paper-deep: #F5F4F0;
  /* Ei korostusväriä — muste, paperi ja valokuvat riittävät */
  --accent: #1C1917;
  --accent-ink: #1C1917;
  --error: #9A3412;

  /* Type — kevyt korkeakontrastinen antiikva kantaa äänen,
     groteski hoitaa leipätekstin ja käyttöliittymän */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  /* Familjen Grotesk (Letters from Sweden) korvasi Geistin 9.8.2026:
     Geist on neutraali käyttöliittymägroteski, jonka kirjainmuodoissa ei
     ole omaa luonnetta — sivusto näytti sen takia lattealta. Familjenin
     hieman kapea leikkaus antaa myös suomen yhdyssanoille enemmän tilaa
     riviä kohden. Pohjoismainen piirustustyyli sopii aiheeseen. */
  --font-ui: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Leipäteksti groteskilla: suomen pitkät yhdyssanat vaativat luettavuutta,
     jota hiusviivainen antiikva ei kestä 17 pikselissä */
  --font-text: var(--font-ui);
  /* Vain kaksi kirjasinta koko sivustolla: antiikva sisällölle,
     groteski käyttöliittymälle. Käsialafontti poistettu 30.7.2026 —
     asiakas toivoi ammattimaisempaa ilmettä ja vähemmän fontteja. */
  --font-sans: var(--font-ui);
  /* Cormorantin x-korkeus on matala — asteikko nostettu ~12 % */
  --fs-hero: clamp(3rem, 9.4vw, 8.4rem);
  --fs-display: clamp(2.15rem, 5vw, 4.1rem);
  --fs-title: clamp(1.55rem, 2.7vw, 2.35rem);
  /* Leipäteksti nostettu 17.2 → 19 px 10.8.2026. Antelias leipäteksti on yksi
     hiljaisimmista laadun merkeistä (vrt. Snøhetta 22 px) ja se helpottaa
     suomen pitkien yhdyssanojen lukemista. */
  --fs-lead: clamp(1.2rem, 1.7vw, 1.45rem);
  --fs-body: 1.1875rem;
  --fs-caption: .8125rem;
  /* Versaalitarrat: 11.2px oli liian pieni ja välistys liian tiukka —
     teksti puuroutui. Isompi koko + väljempi välistys + 500/600-leikkaus. */
  --fs-label: .72rem;
  --ls-label: .15em;

  /* Space */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: clamp(5rem, 12vw, 9.5rem);

  --wrap: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* overflow-x: hidden eikä clip. clip on uudempi ja kevyempi, mutta
     Chromella on sen kanssa uudelleenpiirto-ongelma: kun ikkunan kokoa
     muutetaan (esim. koko näytön tilaan), vasempaan reunaan voi jäädä
     kaistale vanhaa, kapeamman ikkunan mukaista sivua päälle. hidden
     tekee saman rajauksen ja on selaimissa pidempään ja paremmin testattu. */
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-optical-sizing: auto;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

/* Otsikoiden painoportaikko on sidottu kokoon, ei tasoon.
   Cormorantin hiusviiva kantaa vasta suurissa asteissa; 2–3 rem:n
   otsikoissa 300 näytti haalistuneelta, ja juuri se luki "latteana".
   Sääntö: mitä pienempi otsikko, sitä vahvempi leikkaus. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -.02em;
}
h3, h4 { font-weight: 500; } /* pienemmissä otsikoissa hiusviiva katoaisi */

/* Suurin aste (yli ~3 rem): hiusviiva on tässä koossa tarkka, ei heikko */
.hero h1,
.page-head h1,
h1.signature,
.gallery-strip .display,
.feature-copy h3,
.feature-foot h3 { font-weight: 300; }

/* Vaalea antiikva tummalla ohenee optisesti — kompensoidaan painolla */
.band .display,
.footer-mark { font-weight: 450; }

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: .75em 1.25em;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--paper); }

/* ---------- Typography helpers ---------- */

.label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.label--accent { color: var(--accent-ink); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  text-wrap: balance;
}
/* Otsikot yhdellä leikkauksella — asiakkaan toive 30.7.2026:
   kursiivikorostus näytti siltä kuin sanat olisivat eri fonttia. */
.display em,
.page-head h1 em,
h1 em, h2 em {
  font-style: normal;
  font-weight: inherit;
}

.serif-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-2);
}

.prose { max-width: 62ch; text-wrap: pretty; }
.prose--lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -.01em; }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 1.05em 2.2em;
  font-family: var(--font-ui);
  /* Painikkeet olivat 11.2 px — liian hentoja toiminnoksi. */
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
/* Painallustuntuma — fyysinen vaste klikkaukseen */
.btn:active { transform: translateY(1px) scale(.99); }

.btn--light { border-color: var(--paper); color: var(--paper); }
.btn--light:hover { background: var(--paper); color: var(--ink); }

/* Ensisijainen toiminto: täytetty painike — yksi per näkymä */
.btn--fill { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--fill:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); }
.btn--fill-light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--fill-light:hover { background: transparent; color: var(--paper); }

.btn-row {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.btn-row--center { justify-content: center; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .wrap {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: 1.4rem;
  transition: padding .4s var(--ease);
}

.site-header.is-solid {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: 0 1px 0 var(--line);
}
/* Blur only where the mobile nav overlay can't exist:
   backdrop-filter would turn the header into the containing
   block for the fixed-position overlay and break it. */
@media (min-width: 821px) {
  .site-header.is-solid { backdrop-filter: blur(10px); }
}
.site-header.is-solid .wrap { padding-block: .9rem; }

/* ---------- Tunnus ----------
   Merkkinä Kirsin alkukirjain antiikvalla (asiakkaan toive 10.8.2026:
   talokuvio pois, tilalle nimikirjain ja pehmeämpi kirjasin). Aiempi
   viivapiirroksena tehty julkisivutunnus oli geometrinen ja kova; antiikvan
   K on samaa sukua sivuston otsikoiden kanssa ja luettavissa myös pienenä.
   Koko tunnus latotaan nyt yhdellä kirjasimella. */

/* Lockup noudattaa asiakkaan kuvaa: piirros, toimialarivi, hiusviiva pienine
   rombeineen ja nimi — samalla antiikvalla ja samalla viivan ohuudella kuin
   piirros, elävänä tekstinä eikä kuvaan poltettuna.
   Ylätunnisteessa osat ovat rinnakkain: pinottuna kiinteä palkki kasvoi
   138 px:iin ja piirros kutistui 30 px:iin, jolloin viivat menivät puuroksi.
   Alatunnisteessa (.footer-brand) sama lockup on pinottuna kuten kuvassa. */
.brand {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "mark sub"
    "mark rule"
    "mark name";
  align-items: center;
  column-gap: .8rem;
  justify-content: start;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  color: var(--ink);
}
/* Vain ylätunnisteen lockup on ristikko — alatunnisteessa samat luokat
   pinotaan tavallisena virtana, joten aluenimet on rajattava .brandiin. */
.brand > .brand-sub  { grid-area: sub; }
.brand > .brand-rule { grid-area: rule; }
.brand > .brand-name { grid-area: name; }
.brand-sub {
  font-family: var(--font-display);
  font-size: clamp(.52rem, .92vw, .63rem);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  /* versaalien oikea optinen keskitys: välistys työntää viimeistä merkkiä */
  text-indent: .24em;
}
/* Hiusviiva ja keskellä pieni rombi — sama ohut viivakieli kuin piirroksessa */
.brand-rule {
  position: relative;
  display: block;
  height: 1px;
  background: currentColor;
  opacity: .5;
  margin-block: .18rem;
}
.brand-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .32em;
  height: .32em;
  font-size: inherit;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.brand-rule { font-size: clamp(.52rem, .92vw, .63rem); }
/* Nimikirjain kursiivilla. Pystyantiikvan K oli vain kirjain — kursiivin
   K on piirretty ele: kalligrafinen jalka ja vaihteleva viivanpaksuus
   antavat tunnukselle luonteen ilman erillistä kuviota. Kursiivi merkissä,
   pystyleikkaus nimessä — ero näiden kahden välillä on koko lockupin idea. */
.brand-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.6rem, 4.4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  flex: none;
  /* Kursiivin jalka kurottaa oikealle — pieni kavennus riittää, ei enempää */
  margin-right: -.04em;
  transition: font-size .4s var(--ease);
}
.brand-name {
  font-family: var(--font-display);
  /* Nimi on lockupin painavin rivi, mutta yhä hiusviivainen — piirros johtaa */
  font-size: clamp(.78rem, 1.35vw, .95rem);
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-indent: .19em;
}
.site-header.is-solid .brand-mark { font-size: clamp(2.2rem, 3.8vw, 2.9rem); }

/* ---------- Tunnuksen piirros (11.8.2026) ----------
   Asiakkaan toimittama julkisivupiirros taustattomana PNG:nä. Kuvaa käytetään
   CSS-maskina ja väri tulee `currentColor`ista, joten sama tiedosto on tumma
   vaalealla pohjalla, paperinvalkoinen valokuvan päällä ja alatunnisteessa —
   yksi tiedosto, ei erillisiä vaalea/tumma-versioita.
   Nimi jää eläväksi tekstiksi: kuvaan poltettuna se sumenisi, ei kääntyisi
   kielen mukana eikä löytyisi hakukoneesta.
   Kursiivi-K jää näkyviin, jos selain ei tue maskeja. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .brand-mark {
    font-size: 0;                 /* piilottaa vara-K:n, currentColor säilyy */
    margin-right: 0;
    /* Piirros saa olla koko tekstipylvään korkuinen: alle ~45 px viivat
       menevät puuroksi. */
    height: clamp(2.9rem, 4.4vw, 3.6rem);
    aspect-ratio: 240 / 366;
    align-self: center;
    background-color: currentColor;
    -webkit-mask: url("../images/logo-mark.png") no-repeat center / contain;
    mask: url("../images/logo-mark.png") no-repeat center / contain;
    transition: height .4s var(--ease);
  }
  .brand > .brand-mark { grid-area: mark; }
  .site-header.is-solid .brand-mark { font-size: 0; height: clamp(2.4rem, 3.6vw, 3rem); }
  /* Maskattu kuva ei ota text-shadowia — varjo tulee suodattimena */
  .header-on-media:not(.is-solid) .brand-mark {
    text-shadow: none;
    filter: drop-shadow(0 1px 10px rgba(10, 9, 8, .55));
  }
  .footer-emblem {
    font-size: 0;
    height: 7.5rem;
    aspect-ratio: 240 / 366;
    background-color: currentColor;
    -webkit-mask: url("../images/logo-mark.png") no-repeat center / contain;
    mask: url("../images/logo-mark.png") no-repeat center / contain;
  }
}

/* Hero pages: light header over image until scroll */
.header-on-media:not(.is-solid) .brand,
.header-on-media:not(.is-solid) .site-nav a,
.header-on-media:not(.is-solid) .nav-toggle { color: var(--paper); }
/* Hiusviivainen tunnus katoaisi vaalealle taivaalle — sama pehmeä varjo
   kuin hero-otsikossa pitää sen luettavana kaikilla valokuvilla. */
.header-on-media:not(.is-solid) .brand-name,
.header-on-media:not(.is-solid) .brand-mark { text-shadow: 0 1px 14px rgba(10, 9, 8, .5); }

/* Ylätunniste on hero-kuvan valoisimman kohdan päällä, missä kuvan oma
   tummennus on heikoimmillaan: tunnus jäi 3.97:1 ja navigaatio 4.42:1, kun
   AA vaatii 4.5:1. Oma pehmeä liukuvarjo vain tunnisteen taakse nostaa
   kontrastin tummentamatta itse valokuvaa. */
.header-on-media:not(.is-solid) .wrap { position: relative; }
.header-on-media:not(.is-solid) .wrap::before {
  content: "";
  position: absolute;
  inset: -1.4rem 0 auto 0;
  height: 260%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 13, 11, .62) 0%, rgba(15, 13, 11, .34) 55%, rgba(15, 13, 11, 0) 100%);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.6rem);
}
.site-nav a {
  font-family: var(--font-ui);
  /* Navigaatio oli 11.2 px: luettavuuden alarajalla ja ilmeeltään arka.
     Isompi aste sietää tiukemman välistyksen ja näyttää ryhdikkäämmältä. */
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: .4em;
  position: relative;
}
/* ---------- Kielivalinta ----------
   Segmentoitu FI | EN maapallosymbolilla: käyttäjä näkee yhdellä silmäyksellä
   että kyse on kielestä, mitkä vaihtoehdot ovat ja kumpi on valittuna.
   Pelkkä himmeä "EN" jäi liian huomaamattomaksi. */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: clamp(.6rem, 1.6vw, 1.4rem);
  padding-left: clamp(.6rem, 1.6vw, 1.4rem);
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.lang-toggle__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}
.lang-toggle__set {
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
}
/* .site-nav a on tarkempi valitsin, joten kielivalinta tarvitsee saman
   tarkkuuden — muuten navigaation pieni 11.2px kirjasinkoko voittaa. */
.site-nav .lang-toggle__opt,
.lang-toggle__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .9em;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang-toggle__opt + .lang-toggle__opt { border-left: 1px solid var(--ink); }
.lang-toggle__opt.is-active { background: var(--ink); color: var(--paper); }
.lang-toggle__opt:not(.is-active):hover,
.lang-toggle__opt:not(.is-active):focus-visible { background: var(--paper-2); }
/* navigaation alleviivaus ei kuulu tähän */
.lang-toggle__opt::after { display: none !important; }

/* Header kuvan päällä — vaalea teksti */
.header-on-media:not(.is-solid) .lang-toggle__set,
.header-on-media:not(.is-solid) .lang-toggle__opt + .lang-toggle__opt { border-color: var(--paper); }
.header-on-media:not(.is-solid) .lang-toggle__opt { color: var(--paper); }
.header-on-media:not(.is-solid) .lang-toggle__opt.is-active { background: var(--paper); color: var(--ink); }
.header-on-media:not(.is-solid) .lang-toggle__opt:not(.is-active):hover,
.header-on-media:not(.is-solid) .lang-toggle__opt:not(.is-active):focus-visible {
  background: color-mix(in srgb, var(--paper) 25%, transparent);
}

/* Mobiilivalikko on tumma ja pystysuora */
@media (max-width: 900px) {
  .lang-toggle {
    margin: var(--s-3) 0 0;
    padding: var(--s-3) 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--paper-deep) 22%, transparent);
    align-self: flex-start;
    width: 100%;
  }
  .lang-toggle__icon { color: var(--paper-deep); }
  .lang-toggle__set,
  .lang-toggle__opt + .lang-toggle__opt { border-color: var(--paper-deep); }
  .site-nav .lang-toggle__opt,
  .lang-toggle__opt {
    color: var(--paper-deep);
    min-height: 48px;
    padding: 0 1.4em;
    font-size: .9rem;
  }
  .lang-toggle__opt.is-active { background: var(--paper-deep); color: var(--deep); }
  .lang-toggle__opt:not(.is-active):hover {
    background: color-mix(in srgb, var(--paper-deep) 18%, transparent);
  }
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.lang-switch { opacity: .65; }

/* Kosketuskohteiden vähimmäismitta on 44 × 44 px — pelkkä kuvakkeen koko
   jäi alle sen. Painikkeet ovat visuaalisesti entisen kokoisia, mutta
   osumapinta on kasvatettu täytteellä. */
.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -.5rem; /* optinen reunalinjaus säilyy */
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; display: block; }
.nav-toggle line {
  transform-origin: center;
  transition: transform .35s var(--ease);
}
.site-header.nav-open .nav-toggle line:first-child { transform: translateY(4px) rotate(45deg); }
.site-header.nav-open .nav-toggle line:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    background: var(--deep);
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    visibility: hidden;
  }
  .site-nav.is-open { transform: translateY(0); visibility: visible; }
  .site-nav a { color: var(--paper-deep); font-size: 1rem; }
  body.nav-locked { overflow: hidden; }
  .site-header.nav-open .nav-toggle { color: var(--paper-deep); position: relative; z-index: 10; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  isolation: isolate;
}
/* Matalampi hero sisäsivuille. Yhteystietosivun tarkoitus on puhelinnumero
   ja sähköposti: koko ruudun korkuinen kuva työntäisi ne taitteen alle.
   Tämä korkeus näyttää kuvan kunnolla ja jättää yhteystiedot näkyviin. */
.hero--short { min-height: 58svh; }
/* Leveällä näytöllä 58svh teki herosta 3:1-kaistan, ja pystykuvasta näkyi
   vain 29 % korkeudesta — puhelimella näkyy 100 %, ja ero oli iso.
   Korkeampi hero palauttaa kuvan mittasuhteet: 1920 × 1080 -näytöllä näkyy
   nyt 44 % ja 1280 × 800:lla 49 %. Sama kuin puhelimella ei ole mahdollista,
   koska leveällä näytöllä pystykuva ei mahdu kehykseen ilman rajausta.
   Alle 1024 px:n leveyksillä kehys on jo lähellä kuvan omaa suhdetta
   (768 px:llä näkyy 69 %), joten siellä korkeus pysyy ennallaan. */
@media (min-width: 1024px) {
  .hero--short { min-height: 88svh; }
}
/* Yhteystietokuva on pystykuva ja hero on matala vaakakaista, joten kuvasta
   näkyy leveällä näytöllä vain noin neljännes korkeudesta. Rajaus on siksi
   kohdistettu käsin, ei jätetty keskelle:
   pysty 35 % — kasvot ovat kuvan ylemmällä puoliskolla (Kirsi ja hevosen pää
   noin 28–50 % korkeudesta); keskeltä rajattuna kaistaan osuisi vaatteet ja
   maa, ei kasvoja.
   vaaka 40 % — vaikuttaa vain kapealla näytöllä, jossa rajaus on
   sivusuuntainen. Keskitys leikkaisi Kirsin vasemman reunan; 40 % pitää
   hänet kokonaan mukana. */
.hero--short .hero-media img { object-position: 40% 35%; }
/* Otsikko lasketaan lähemmäs alareunaa (asiakkaan toive 20.8.2026). Tämä
   myös vapauttaa kuvaa: teksti siirtyy liu'un tummimpaan osaan, joten
   yläosan peitettä voi keventää ilman että luettavuus kärsii. */
.hero--short .wrap { padding-block: var(--s-5) var(--s-3); }

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-media { overflow: hidden; }
/* Hero-kuva hitusen kirkkaampana kuin galleriakuvat: se on ainoa kuva jonka
   päällä on tummennus, joten se kestää — ja tarvitsee — lisävaloa. */
.hero-media img { filter: sepia(.13) saturate(.93) contrast(1.02) brightness(1.15); }
.is-loaded .hero-media img { animation: settle 2.6s var(--ease) both; }
@keyframes settle { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tummennus mitoitettu mittaamalla, ei silmämääräisesti: hero-kuva piirrettiin
     kankaalle samalla suodattimella ja rajauksella, peite laskettiin päälle ja
     jokaisen tekstin huonoin kontrasti mitattiin pikseleistä.
     Peitettä kevennetty 17.8.2026 (asiakkaan toive: kuva oli liian tumma).
     Keskiosa .76 → .62, alaosa .84 → .72, jolloin rakennus ja maisema näkyvät
     valokuvana. Mitattu 1265 × 736: tarra 4.9:1, otsikko 5.0:1, ingressi 6.4:1,
     painike 6.9:1 — kaikki yli AA:n vaatiman 4.5:1.
     Alaosa pysyy vahvimpana, koska ingressi ja painikkeet ovat siellä.
     Kohtaa 82 % ei voi keventää enempää: siinä on tarra. Heinäkuun versio
     (.58 keskellä) oli kirkkaampi, mutta tarran kontrasti jäi 3.3:1. */
  background: linear-gradient(to top,
    rgba(15, 13, 11, .72) 0%,
    rgba(15, 13, 11, .63) 40%,
    rgba(15, 13, 11, .60) 82%,
    rgba(15, 13, 11, .02) 100%);
}
/* Matalan heron oma peite. Sama tarkkuus kuin .hero::after -säännöllä, joten
   tämän on oltava sen JÄLKEEN tiedostossa — muuten etusivun kevyempi liuku
   voittaisi. Matalassa herossa teksti täyttää suuremman osan korkeudesta ja
   osuu kohtaan, jossa etusivun liuku on jo vaalea; yhteystietokuvan valkoiset
   kukat ovat lisäksi hyvin vaaleita. Mitattu samalla tavalla kuin yllä. */
.hero--short::after {
  /* Kevennetty 20.8.2026 (asiakkaan toive: kukkakuva kirkkaammaksi).
     Kuva vaihdettu 20.8.2026 (Kirsi ja hevonen). Uusi kuva on tummempi kuin
     kukkakuva, joten peitettä voitiin keventää lisää. Tämä on käytännön raja:
     mitattuna otsikko 4.0:1 (vaadittu 3.0) ja ingressi 5.0:1 (vaadittu 4.5).
     Vielä 10 % kevyemmällä ingressi jäisi 4.56:1 eli rajalle. */
  background: linear-gradient(to top,
    rgba(15, 13, 11, .58) 0%,
    rgba(15, 13, 11, .54) 55%,
    rgba(15, 13, 11, .46) 88%,
    rgba(15, 13, 11, .14) 100%);
}
.hero .wrap {
  width: 100%;
  padding-block: var(--s-6) var(--s-5);
  text-shadow: 0 1px 28px rgba(10, 9, 8, .45);
}
.hero .label {
  display: block;
  /* Täysi paperinvalkoinen, ei 85 %:n läpikuultavuutta — kokoero otsikkoon
     riittää hierarkiaksi, eikä kontrastista tarvitse tinkiä. */
  color: var(--paper);
  margin-bottom: var(--s-3);
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 300; /* hiusviivainen display-leikkaus, kuten referenssissä */
  text-transform: none;
  letter-spacing: -.025em;
  line-height: 1;
}
/* Nousuanimaatio tarvitsee overflow:hiddenin, mutta Cormorantin syvä
   j/y-pidennys leikkautuisi siihen — varataan tila padingilla ja
   kumotaan se negatiivisella marginaalilla, jolloin riviväli säilyy. */
.hero h1 .line {
  display: block;
  overflow: hidden;
  padding-bottom: .26em;
  margin-bottom: -.26em;
}
/* 140% > rivin korkeus (1em + .26em), joten teksti on alussa kokonaan piilossa */
.hero h1 .line > span { display: inline-block; transform: translateY(140%); }
/* Nousun kesto lyhennetty .9s -> .5s ja porrastus puoleen 2.9.2026.
   Syy on mitattu, ei maun: hero-teksti on sivun suurin elementti, joten
   selain kirjaa LCP:n vasta kun animaatio on valmis. Ennen LCP oli 1.65 s
   (raja 2.5 s) vaikka kuva latautui 72 ms:ssa ja ensimmainen piirto tuli
   144 ms:ssa — sivu siis odotti itse itseaan. Liike on yha nakyva. */
.is-loaded .hero h1 .line > span { animation: rise .5s var(--ease) forwards; }
.is-loaded .hero h1 .line:nth-child(2) > span { animation-delay: .06s; }
.is-loaded .hero h1 .line:nth-child(3) > span { animation-delay: .12s; }

@keyframes rise { to { transform: translateY(0); } }

.hero-foot {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}
.hero-foot .prose {
  max-width: 44ch;
  color: color-mix(in srgb, var(--paper) 90%, transparent);
}
.hero-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Ingressi oli LCP-elementti: se odotti .5 s ja hapertui esiin sekunnin,
   eli nakyi vasta 1.5 s kohdalla. Nyt .15 s + .45 s = 0.6 s. */
.is-loaded .hero-foot { animation: fade .45s .15s var(--ease) backwards; }
@keyframes fade { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Page hero (inner pages) ---------- */

.page-head {
  padding-top: calc(var(--s-7) + 3rem);
  padding-bottom: var(--s-5);
}
.page-head .label { margin-bottom: var(--s-2); }
.page-head h1 {
  font-size: var(--fs-hero);
  text-transform: none;
  letter-spacing: -.02em;
  max-width: 14ch;
}
.page-head .prose--lead { margin-top: var(--s-3); color: var(--ink-2); }

/* ---------- Sections ---------- */

.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-6); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  max-width: 30ch;
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Statement — centered, under the emblem, like a title page */
.statement {
  padding-block: var(--s-7);
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  text-align: center;
}
.statement .emblem {
  width: 74px;
  height: auto;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.statement p {
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 400;
  text-transform: none;
  line-height: 1.9;
  letter-spacing: -.01em;
  max-width: 52ch;
  text-wrap: balance;
}
.statement .serif-note { font-size: var(--fs-lead); }

/* ---------- Feature rows (magazine) ---------- */

.feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);
  align-items: end;
  padding-block: var(--s-5);
}
.feature + .feature { border-top: 1px solid var(--line); }

.feature-media { grid-column: 1 / span 8; margin: 0; }
.feature-copy { grid-column: 10 / span 3; padding-bottom: var(--s-2); }

.feature--flip .feature-media { grid-column: 5 / span 8; grid-row: 1; }
.feature--flip .feature-copy { grid-column: 1 / span 3; grid-row: 1; }

/* Full-bleed feature: image runs edge to edge, copy sits below */
.feature--full { display: block; }
.feature--full .feature-media {
  /* Ei 100vw: se sisältää vierityspalkin leveyden, mutta sivun sisältöleveys
     ei sisällä. Työpöydällä ero on n. 15 px, ja elementti työntyi ikkunan
     oikean reunan yli. Sääntö on tällä hetkellä käyttämätön, mutta korjattu
     ettei se yllätä, jos täysleveä nosto joskus otetaan käyttöön. */
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
}
.photo--wide { aspect-ratio: 21 / 10; }
.feature-foot {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-4);
}
.feature-foot .foot-title { grid-column: 1 / span 5; }
.feature-foot .foot-copy { grid-column: 7 / span 6; }
.feature-foot .label { display: block; margin-bottom: var(--s-2); }
.feature-foot .prose { color: var(--ink-2); margin-bottom: var(--s-3); }
@media (max-width: 900px) {
  .feature-foot { display: block; }
  .feature-foot .foot-copy { margin-top: var(--s-3); }
  .photo--wide { aspect-ratio: 4 / 3; }
}

.feature-copy .label { margin-bottom: var(--s-2); }
.feature-copy h3,
.feature-foot h3 {
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  text-transform: none;
  letter-spacing: -.02em;
  line-height: .98;
  margin-bottom: var(--s-3);
}
.feature-foot h3 { margin-bottom: 0; }
.feature-copy .prose { font-size: .975rem; color: var(--ink-2); margin-bottom: var(--s-3); }

@media (max-width: 900px) {
  .feature, .feature--flip { display: block; }
  .feature-copy, .feature--flip .feature-copy { padding-top: var(--s-3); }
}

/* ---------- Photo frames ---------- */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  /* Unified warm film grade so mixed photos read as one series */
  filter: sepia(.18) saturate(.88) contrast(1.05) brightness(1.01);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(161, 98, 7, .10) 0%, rgba(28, 25, 23, .12) 100%);
  mix-blend-mode: soft-light;
}
a.photo-link:hover .photo img,
.photo:hover img { transform: scale(1.035); }

.photo--3x2 { aspect-ratio: 3 / 2; }
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--4x5 { aspect-ratio: 4 / 5; }
.photo--16x9 { aspect-ratio: 16 / 9; }

figcaption.caption,
.caption {
  margin-top: .8rem;
  font-size: var(--fs-caption);
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}
.caption .serif-note { font-size: 1.05rem; }

/* ---------- Gallery strip ---------- */

.gallery-strip {
  padding-block: var(--s-5) var(--s-4);
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}
.gallery-track {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  padding-bottom: var(--s-1);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.gallery-item {
  flex: 0 0 auto;
  width: min(52vw, 380px);
  scroll-snap-align: start;
  margin: 0;
}
.gallery-item.is-tall { width: min(42vw, 300px); }
.gallery-strip .section-head { margin-bottom: var(--s-4); }
/* Galleriaotsikko isompana — kantaa koko osion */
.gallery-strip .display {
  font-size: clamp(2.6rem, 6.6vw, 5.5rem);
  letter-spacing: -.03em;
  line-height: 1;
}
.gallery-strip .btn-row { margin-top: var(--s-3) !important; }
/* Galleria on karuselli siinä missä kohdesivun kuvanauhatkin, mutta ilman
   nuolia se ei näyttänyt vierittyvältä: kuvat vain jatkuivat reunan yli, eikä
   mikään kertonut että niitä on lisää. Nuolet ja laskuri ovat sama komponentti
   kuin kohdesivulla, joten vieritys näkyy ja toimii myös näppäimistöltä.
   Otsikkopalstan 30ch:n rajaus poistetaan, jotta nappirivi mahtuu riviinsä. */
.gallery-strip .section-head { max-width: none; }
.gallery-strip .carousel-bar { margin-top: var(--s-2); }

/* ---------- Project entries (kohteet) ---------- */

.project-list { display: grid; }
.project-entry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
}
.project-entry:last-child { border-bottom: 1px solid var(--line); }
/* Kohteen nimi tulee kuvan yläpuolelle (asiakkaan toive 2.9.2026): lukija
   tietää mitä katsoo ennen kuin katsoo. Aiemmin nimi oli kuvan oikealla
   puolella kapeassa palstassa, ja kapealla näytöllä se valui kokonaan kuvan
   alle — kuvat tulivat siis ilman otsikkoa.
   Teksti vie koko rivin, kuva alkaa omalta riviltään. */
/* Kuva vie koko rivin. Aiemmin se oli 9 saraketta (kapeammalla 8), koska
   teksti tarvitsi oman palstan viereensä — nyt teksti on yläpuolella, eikä
   sivupalstalle jää tehtävää. Kapea sarakemäärä olisi myös tuottanut hypyn:
   900 px:n näytöllä kuva oli 813 px ja 901 px:n näytöllä enää 600 px, eli se
   kutistui juuri kun näyttö suureni. Koko rivin levyisenä kuva kasvaa
   tasaisesti eikä katkaisukohtia tarvita. */
.project-entry .photo,
.entry-carousel { grid-column: 1 / -1; margin: 0; }
.entry-copy { grid-column: 1 / -1; margin-bottom: var(--s-2); }
/* Otsikkorivin ei tarvitse olla kuvan levyinen, mutta pitkä nimi saa tilaa */
.entry-copy > :is(h2, h3) { max-width: 28ch; }

/* Ristikon ja fleksin oletus on min-width: auto, jolloin kohta ei voi kutistua
   sisältöään kapeammaksi. Kun kuvanauhan dioilla on oma leveys, koko kohde
   venyi nauhan levyiseksi eikä nauha päässyt vierimään lainkaan — karuselli
   näytti rikkinäiseltä. min-width: 0 antaa palstan määrätä leveyden. */
.project-entry,
.entry-carousel { min-width: 0; }

/* Järjestysnumerot: 700 ei ollut ladattu leikkaus, joten selain lihavoi
   fontin itse ja numerot näyttivät sumeilta. 600 on oikea leikkaus. */
.entry-num {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  margin-bottom: var(--s-2);
}
/* Kohdesivulla otsikot ovat h2 (ne ovat sivun ylin sisältötaso h1:n alla);
   etusivulla sama komponentti on h3 osion otsikon alla. Molemmat ladotaan
   samoin — taso kertoo rakenteen, ei ulkoasua. */
.project-entry :is(h2, h3) {
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* Kuvakaruselli kohteen sisällä.
   Palstan leveys määritellään yllä kohdelistan säännöissä. Täällä oli
   2.9.2026 asti oma `grid-column: 1 / span 9`, joka jäi elämään siitä ajasta
   kun teksti oli kuvan oikealla puolella. Se oli tiedostossa myöhempänä ja
   samalla tarkkuudella, joten se kumosi uuden säännön hiljaisesti. */
.entry-slides {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.entry-slides::-webkit-scrollbar { display: none; }
/* Yksi kuva kerrallaan, koko palstan levyisenä — iso kuva on tämän sivun
   pointti. Kehys on kaikilla dioilla sama 4:3, jotta nauha ei hyppää
   korkeudeltaan kuvasta toiseen.
   Kuvat sovitetaan kehykseen (contain), ei rajata siihen (cover): kokoelmassa
   on sekä vaaka- että pystykuvia ja käsin piirrettyjä julkisivupiirustuksia,
   ja rajaus söi pystykuvista 44–66 %. Nyt jokainen kuva näkyy kokonaan ja
   ylijäävä tila on paperinvärinen paspartuu. */
/* Dia on joko pelkkä kuvakehys tai kehys ja kuvateksti. Nauhan mitat kuuluvat
   dialle ja kuvasuhde kehykselle — jos 4:3 jäisi dialle, kuvateksti söisi
   tilansa kuvasta ja kuva litistyisi. */
.entry-slides > .photo,
.entry-slides > .entry-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  min-width: 0;
}
.entry-slides > .entry-slide {
  display: flex;
  flex-direction: column;
}
.entry-slides .photo {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.entry-slides .photo img {
  object-fit: contain;
}
/* Paspartuun päälle ei kuulu valokuvan lämmintä sävytystä */
.entry-slides .photo::after { display: none; }

/* Kuvateksti nimeää kohteen; alt-teksti kuvailee mitä kuvassa näkyy. Ne ovat
   eri asioita eivätkä korvaa toisiaan.
   Diat ovat samassa fleksirivissä, joten ne venyvät korkeimman mukaan: nauha
   ei hypi, vaikka yhdessä kuvatekstissä olisi kolme riviä ja toisessa yksi. */
.entry-slide > figcaption {
  margin-top: .9rem;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
.carousel-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: .9rem;
}
.carousel-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .12s var(--ease);
}
.carousel-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.carousel-btn:active:not(:disabled) { transform: scale(.94); }
.carousel-btn:disabled { opacity: .3; cursor: default; }
.carousel-btn svg { width: 15px; height: 15px; }
.carousel-count {
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .entry-slides { scroll-behavior: auto; }
}

/* "Lue lisää" disclosure */
.entry-more { margin-top: var(--s-3); }
.entry-more > summary {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: 44px; /* kosketuskohteen vähimmäismitta */
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: .4em;
}
.entry-more > summary::-webkit-details-marker { display: none; }
.entry-more > summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  transition: transform .35s var(--ease);
}
.entry-more[open] > summary::after { transform: rotate(45deg); }
.entry-more > summary:hover { color: var(--accent-ink); }
.entry-body {
  padding-top: var(--s-2);
  color: var(--ink-2);
  font-size: 1.05rem;
  max-width: 46ch;
  text-wrap: pretty;
}
.entry-body p + p { margin-top: var(--s-2); }
.entry-quote {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-2);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink);
}
.entry-quote cite {
  display: block;
  margin-top: .6em;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .project-entry { display: block; padding-block: var(--s-3); }
  /* Teksti on nyt kuvan yläpuolella, joten väli tulee alapuolelle */
  .project-entry .entry-copy { margin-bottom: var(--s-3); }
}

/* ---------- Project grid (kohteet) ---------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4) var(--s-3);
}
.project-card { text-decoration: none; display: block; }
.project-card h3 {
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: -.02em;
  margin-top: .9rem;
}
.project-card .label { margin-top: .35rem; }
.project-card p { font-size: .95rem; color: var(--ink-2); margin-top: .6rem; max-width: 46ch; }

.project-card--lg { grid-column: span 8; }
.project-card--md { grid-column: span 6; }
.project-card--sm { grid-column: span 4; }

@media (max-width: 900px) {
  .project-card--lg, .project-card--md, .project-card--sm { grid-column: span 12; }
}

/* Category intro rows on kohteet */
.category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  margin: var(--s-6) 0 var(--s-4);
}
.category-head h2 {
  font-size: var(--fs-title);
  text-transform: none;
  letter-spacing: -.02em;
}
.category-head .label { white-space: nowrap; }

/* ---------- Services ---------- */

.service-list { display: grid; }
/* Vaiheet luetaan järjestyksessä ylhäältä alas, joten erillinen 01–04 kertoi
   saman asian toiseen kertaan. Numerosarake poistettu 17.8.2026: otsikko
   aloittaa rivin ja saa sen tilan. */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38rem);
  gap: var(--s-3);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service :is(h2, h3) {
  font-size: var(--fs-title);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.02em;
}
.service p { color: var(--ink-2); }
.service ul { margin: var(--s-2) 0 0; padding-left: 1.1em; color: var(--ink-2); }
.service li { margin-bottom: .35em; }

@media (max-width: 820px) {
  .service { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ---------- Dark band / CTA ---------- */

.band {
  background: var(--deep);
  color: var(--paper-deep);
}
.band .label { color: color-mix(in srgb, var(--paper-deep) 80%, transparent); }
.band .display { max-width: 22ch; }
.cta-band { padding-block: var(--s-7); }
.cta-band .wrap { display: grid; gap: var(--s-4); justify-items: start; }
.cta-band .serif-note { color: color-mix(in srgb, var(--paper-deep) 70%, transparent); }

/* ---------- Kohteen tunnistetiedot kuvan alla ----------
   Pieni versaalitarra pisteellä: vuosiluku, suojelustatus tai rooli.
   Paikkakunta lisätään tähän samaan riviin, kun tilaajilta on lupa. */

.entry-place,
.gallery-item figcaption {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin-top: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.entry-place::before,
.gallery-item figcaption::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-.25em);
}
.entry-place { margin-bottom: var(--s-2); }

/* ---------- Asiakaspalautteet ----------
   Ristikko skaalautuu palautteiden määrän mukaan itsestään: auto-fit pitää
   rivillä enintään kaksi saraketta (mitta pysyy luettavana), kolmas palaute
   siirtyy uudelle riville. Uutta CSS:ää ei tarvita palautteita lisättäessä. */

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  column-gap: var(--s-4);
}
.testimonial {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
}
.testimonial blockquote {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}
.testimonial figcaption {
  margin-top: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- About / portrait ---------- */

.about-split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4) var(--s-3);
  align-items: start;
}
.about-split .photo { grid-column: 1 / span 5; margin: 0; }
.about-split .about-copy { grid-column: 7 / span 6; }
.about-copy .label { margin-bottom: var(--s-2); }
.about-copy h2 { font-size: var(--fs-display); margin-bottom: var(--s-3); text-transform: none; letter-spacing: -.02em; }
.about-copy .prose { color: var(--ink-2); }

/* Ilman otsikkoa oleva esittelyteksti: hieman alemmas kuvan ylälaidasta */
@media (min-width: 901px) {
  .about-split--offset .about-copy { padding-top: var(--s-4); }
}

@media (max-width: 900px) {
  .about-split { display: block; }
  /* Pinotussa asettelussa pieni väli kuvan ja tekstin väliin */
  .about-split .photo { max-width: 420px; margin: 0 0 var(--s-4); }
}

/* Facts table (suunnittelija) */
.fact-list { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.fact-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: .9rem;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
}
.fact-list li:last-child { border-bottom: 1px solid var(--line); }
.fact-list .label { flex-shrink: 0; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5) var(--s-3);
  /* Yhteystiedot alkoivat suoraan hero-kuvan alareunasta ilman väliä.
     Kuvan ja tekstin väliin kuuluu hengitystila, kuten muillakin sivuilla
     otsikon ja sisällön väliin. */
  padding-top: var(--s-6);
}
/* Yhteydenottolomake poistettu 9.8.2026. Lomake ei lähettänyt mitään, vaan
   avasi kävijän sähköpostiohjelman — ilman sellaista painike ei tehnyt
   näkyvästi mitään eikä Kirsi saanut tietää yrityksestä. Puhelin ja
   sähköposti ovat nyt sivun varsinainen sisältö, ja ne on ladottu sen
   mukaisesti isolla. Oikea palsta kantaa toimiston tiedot. */
.contact-info { grid-column: 1 / span 6; }
.contact-side  { grid-column: 8 / span 5; }

@media (max-width: 900px) {
  .contact-grid { display: block; }
  .contact-info { margin-bottom: var(--s-5); }
}

/* Puhelin ja sähköposti ladotaan samalla groteskilla ja samalla leikkauksella
   kuin Toimisto- ja Toiminta-alue-rivit (asiakkaan toive 11.8.2026) — vain
   isompana, koska ne ovat sivun varsinaiset toiminnot. Antiikva jää sivulla
   pelkäksi otsikoksi. */
.contact-big {
  display: block;
  font-family: var(--font-ui);
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-decoration: none;
  /* Yhden rivin puhelinlinkki jäi mobiilissa alle 44 px:n — nämä ovat sivun
     tärkeimmät toiminnot, joten osumapinta nostetaan sen yli. */
  padding-block: .7em;
  margin-bottom: .25rem;
  overflow-wrap: anywhere;
  transition: color .3s var(--ease);
}
/* Nämä kaksi ovat sivun ainoat toiminnot — alleviivaus kertoo sen */
.contact-big:hover,
.contact-big:focus-visible {
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
}

.contact-side p { margin: 0; }

/* ---------- Yhteystiedot: yksi ainoa tyyli koko lohkolle ----------
   Asiakkaan toive 20.8.2026: "sama koko ja väri joka osaan".
   Aiemmin samalla sivulla oli kaksi tyyliä: tarrat 11.5 px, versaalilla,
   harmaana ja välistettynä; arvot 33 px, gemenalla, lähes mustana. Viisi
   ominaisuutta erosi, ja juuri se luki sivulla "eri fontteina".
   Nyt tarra ja arvo ladotaan täsmälleen samoin — ero syntyy järjestyksestä,
   ei ladonnasta. Koko on myös pienempi kuin aiempi 33 px. */
.contact-grid :is(.label, .contact-big, p) {
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
/* Tarran oma väli säilyy, jotta parit erottuvat toisistaan pystysuunnassa */
.contact-info .label,
.contact-side .label { margin: var(--s-4) 0 0; display: block; }
.contact-info .label:first-child,
.contact-side .label:first-child { margin-top: 0; }

/* Aiemmat välivaiheet (9.8. ja 11.8.2026) yhtenäistivät ensin kirjasimen ja
   sitten leikkauksen, mutta jättivät tarralle oman painon, välistyksen ja
   versaalin. Ne säännöt on korvattu yllä olevalla yhdellä säännöllä. */

/* ---------- Yhteydenottosivu ----------
   Sivulla oli 30.7.2026–9.8.2026 oma poikkeus, joka latoi otsikot ja
   ingressin groteskilla. Poistettu 9.8.2026: yhteydenottosivu käyttää nyt
   samaa typografiaa kuin muu sivusto — antiikva otsikoissa, groteski
   lomakkeessa ja tarroissa. Erillistä sääntölohkoa ei enää tarvita. */

/* ---------- Footer ---------- */

.site-footer {
  background: var(--deep);
  color: var(--paper-deep);
  padding-block: var(--s-6) var(--s-4);
}
/* Alatunnisteen lockup on sama kuin ylätunnisteessa: piirros vasemmalla,
   tekstit sen vieressä — vain isompana. */
.footer-brand {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "mark sub"
    "mark rule"
    "mark name";
  align-items: center;
  column-gap: 1.5rem;
  justify-content: start;
  margin-bottom: var(--s-5);
  max-width: 100%;
}
.footer-brand .footer-emblem { grid-area: mark; align-self: center; }
.footer-brand .brand-sub {
  grid-area: sub;
  font-size: .78rem;
  letter-spacing: .26em;
  color: color-mix(in srgb, var(--paper-deep) 78%, transparent);
}
.footer-brand .brand-rule {
  grid-area: rule;
  width: 100%;
  font-size: .78rem;
  margin-block: .5rem;
  color: color-mix(in srgb, var(--paper-deep) 78%, transparent);
}
.footer-brand .footer-mark { grid-area: name; }
.footer-mark {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 450; /* vaalea antiikva tummalla ohenee optisesti */
  text-transform: none;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 0;
}
/* Tunnus toistuu alatunnisteessa nimen yläpuolella — sama nimikirjain,
   isompana ja rauhassa. Muualla sivulla sitä ei toisteta. */
.footer-emblem {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 4.4rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: .5rem;
  color: color-mix(in srgb, var(--paper-deep) 82%, transparent);
}

/* Nimi otsikkona — sama antiikva kuin muissa otsikoissa */
.signature {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.02em;
  line-height: 1.1;
}
h1.signature { font-size: var(--fs-hero); }
h2.signature { font-size: var(--fs-display); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}
.footer-col .label {
  color: color-mix(in srgb, var(--paper-deep) 72%, transparent);
  display: block;
  margin-bottom: var(--s-2);
}
.footer-col a {
  display: block;
  color: var(--paper-deep);
  text-decoration: none;
  padding-block: .28em;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
/* Kolmas rivi (toteutuskrediitti) on hiljaisin — se ei kilpaile
   tekijänoikeusrivin kanssa vaan asettuu sen perään omalla painollaan. */
.footer-credit { opacity: .72; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  border-top: 1px solid color-mix(in srgb, var(--paper-deep) 18%, transparent);
  padding-top: var(--s-3);
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--paper-deep) 74%, transparent);
}

/* ---------- Reveal animations ---------- */

/* Teksti paljastuu maskin alta ylöspäin — sama liikekieli kuin
   hero-otsikon nousussa ja kuvien clip-path-avauksessa. Ei liukua
   alhaalta ylös: se on geneerinen tehoste, ei tämän sivuston käsiala.
   Maski on kiinteä 36px, jolloin tunne on sama lohkon koosta riippumatta. */
.reveal {
  opacity: 0;
  clip-path: inset(0 0 36px 0);
  transition: opacity .7s var(--ease), clip-path .95s var(--ease);
}
.reveal.is-visible { opacity: 1; clip-path: inset(0 0 0 0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

/* Images: masked reveal — the frame opens, the photo settles */
figure.reveal {
  transform: none;
  clip-path: inset(4% 3% 4% 3%);
  transition: opacity 1.1s var(--ease), clip-path 1.2s var(--ease);
}
figure.reveal img { transform: scale(1.07); transition: transform 1.6s var(--ease); }
figure.reveal.is-visible { clip-path: inset(0 0 0 0); }
figure.reveal.is-visible img { transform: scale(1); }

/* ---------- Mobile: designed, not shrunk ---------- */

@media (max-width: 640px) {
  .hero { min-height: 100svh; }
  .hero .wrap { padding-block: var(--s-5) var(--s-4); }
  .hero h1 { font-size: clamp(2.3rem, 11.5vw, 3.1rem); }
  .hero-foot { flex-direction: column; align-items: stretch; }
  .hero-actions, .btn-row { width: 100%; }
  .hero-actions .btn, .btn-row .btn { flex: 1; text-align: center; padding-inline: 1em; }

  .statement { padding-block: var(--s-6); }
  .statement .emblem { width: 58px; }

  .feature { padding-block: var(--s-4); }
  .gallery-item { width: 76vw; }
  .gallery-item.is-tall { width: 62vw; }

  /* Alatunnisteen tunnus on sama lockup kuin ylätunnisteessa, vain isompana:
     piirros vasemmalla, tekstit sen vieressä. Kapealla näytöllä se ei mahtunut
     palstalle — piirros (79 px), väli (24 px) ja "ARKKITEHTISUUNNITTELU", joka
     on nowrap-tekstiä (228 px), tekivät yhteensä 331 px, kun 320 px:n näytöllä
     tilaa on 280 px. Ylimenevä 31 px työnsi *jokaisen* sivun vaakavieritykselle,
     koska alatunniste on kaikilla sivuilla sama.
     Nowrap-teksti ei voi kutistua rivittymällä, joten koko lockup skaalataan
     näytön mukaan. Leveällä näytöllä mitat ovat ennallaan. */
  .footer-brand { column-gap: 1rem; }
  .footer-brand .footer-emblem { height: clamp(3.4rem, 17vw, 7.5rem); }
  .footer-brand .brand-sub,
  .footer-brand .brand-rule { font-size: clamp(.58rem, 2.9vw, .78rem); }
  .footer-brand .brand-sub { letter-spacing: clamp(.18em, .8vw, .26em); }
  /* Yläraja 2.2rem = sama koko kuin 641 px:ssä, jotta nimi ei hyppää
     kokoa vaihdettaessa juuri katkaisukohdan yli. */
  .footer-mark { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .cta-band .btn { display: block; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, figure.reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
  figure.reveal img { transform: none; transition: none; }
  .hero h1 .line > span { transform: none; animation: none !important; }
  .is-loaded .hero-foot { animation: none; }
  .is-loaded .hero-media img { animation: none; }
  .photo img { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}