/* ==========================================================================
   Kirjasimet
   Isännöidään itse, ei Googlen palvelimelta. Syy on tietosuoja: Googlen
   fonttipalvelimelta ladattaessa jokaisen kävijän IP-osoite siirtyy Googlelle
   ennen kuin mitään on kysytty, ja EU-tulkinnassa se on henkilötiedon siirtoa.
   Tiedostot ovat kansiossa fonts/. Molemmat ovat muuttujakirjasimia
   (variable fonts), joten yksi tiedosto kattaa koko lihavuusasteikon 300-700.
   Ladattu Google Fontsista 22.9.2026, lisenssi SIL Open Font License 1.1.
   Osajoukot latin ja latin-ext. Vietnam ja kyrillinen jätettiin pois, koska
   sivusto on suomenkielinen. unicode-range huolehtii siitä, että selain lataa
   latin-ext-tiedoston vain jos sivulla oikeasti esiintyy sen merkki.
   ========================================================================== */

/* Fraunces, kursiivi */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fraunces-italic-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: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fraunces-italic-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;
}

/* Fraunces, pysty */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fraunces-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;
}

/* Hanken Grotesk, leipäteksti */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/hankengrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/hankengrotesk-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;
}

/* ==========================================================================
   Kalevala-Kaluste
   Suunnitteluperiaate: kansallisromantiikan hillitty puoli. Lämmin
   paperinsävyinen pohja, kuusenvihreä aksentti, messinkinen yksityiskohta.
   Ei kansanomaisia kuvioita, vaan materiaalin rehellisyys ja pelkistys.
   ========================================================================== */

:root {
  /* Väripaletti */
  --bone:        #F4EFE6;
  --bone-deep:   #EBE3D5;
  --bone-warm:   #FBF8F2;
  --ink:         #211D19;
  --ink-soft:    #4A423A;
  --stone:       #8A8177;
  --spruce:      #2E3D33;
  --spruce-lift: #3C5042;
  --brass:       #A67C3D;
  --line:        rgba(33, 29, 25, 0.14);
  --line-soft:   rgba(33, 29, 25, 0.07);

  /* Typografia */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;

  /* Mitat */
  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --header-h: 72px;

  /* Liike */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- Perusta */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  /* hienovarainen paperimainen rakeisuus */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(166, 124, 61, 0.05), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(46, 61, 51, 0.045), transparent 50%);
  background-attachment: fixed;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 28, "WONK" 1;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--spruce); color: var(--bone-warm); }

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

/* --------------------------------------------------------- Apuluokat */

.wrap {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 5rem;
}
.eyebrow--plain::after { display: none; }

.lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 350;
}

.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ------------------------------------------------------------- Ylätunniste */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(244, 239, 230, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.masthead.is-stuck {
  border-bottom-color: var(--line-soft);
  background: rgba(244, 239, 230, 0.95);
}

.masthead__inner {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brandmark { display: flex; align-items: center; flex-shrink: 0; }
.brandmark img { width: clamp(150px, 18vw, 190px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }

.nav a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.nav__cta {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.15rem !important;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__cta::after { display: none !important; }
.nav__cta:hover { background: var(--spruce); color: var(--bone-warm); border-color: var(--spruce); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }

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

.hero {
  position: relative;
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__title {
  font-size: clamp(3rem, 1.6rem + 7.2vw, 8.25rem);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 120;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
}
.hero__title span { display: block; }
.hero__title .is-indent { padding-left: 0.12em; color: var(--spruce); }

.hero__sub {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.75rem);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
  max-width: 24ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__meta div { min-width: 0; }
.hero__meta dt {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.hero__meta dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

.hero__figure {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 460px;
}
.hero__figure img {
  width: 100%;
  filter: drop-shadow(0 40px 60px rgba(33, 29, 25, 0.22));
}
.hero__figure::before {
  content: "";
  position: absolute;
  inset: 12% -14% 6% 8%;
  background: linear-gradient(170deg, var(--bone-deep), rgba(235, 227, 213, 0));
  border-radius: 50% 50% 46% 54% / 44% 40% 60% 56%;
  z-index: -1;
}

/* Pystysuora sivumerkintä */
.railmark {
  position: absolute;
  right: calc(var(--gutter) * 0.28);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.65rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 600;
  pointer-events: none;
}

/* --------------------------------------------------------------- Nauha */

.ticker {
  background: var(--spruce);
  color: var(--bone-warm);
  padding-block: 0.9rem;
  overflow: hidden;
}
.ticker__track {
  display: flex;
  gap: 3.5rem;
  white-space: nowrap;
  animation: drift 42s linear infinite;
  width: max-content;
}
.ticker span {
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.82;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.ticker span::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass);
}
@keyframes drift { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- Kertomus */

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.prose-grid h2 {
  font-size: clamp(1.85rem, 1.2rem + 2.3vw, 3.15rem);
  font-variation-settings: "SOFT" 45, "WONK" 1, "opsz" 72;
  position: sticky;
  top: calc(var(--header-h) + 2.5rem);
}

.pullquote {
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bone-warm);
  border-left: 2px solid var(--brass);
  max-width: none;
}
.pullquote p {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-style: italic;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  line-height: 1.45;
  color: var(--spruce);
  max-width: 44ch;
}
.pullquote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

/* -------------------------------------------------------------- Mallisto */

.collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.piece {
  position: relative;
  background: var(--bone);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  transition: background 0.45s var(--ease);
  overflow: hidden;
}
.piece:hover { background: var(--bone-warm); }

.piece__media {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  margin-bottom: 1.75rem;
  position: relative;
}
.piece__media img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.7s var(--ease);
  filter: drop-shadow(0 22px 34px rgba(33, 29, 25, 0.14));
}
.piece:hover .piece__media img { transform: translateY(-10px) scale(1.035); }

.piece__index {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--display);
  font-size: 0.8rem;
  color: var(--stone);
  font-variation-settings: "SOFT" 20;
}

.piece h3 {
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 48;
  margin-bottom: 0.6rem;
}
.piece p {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.62;
  flex: 1;
  margin-bottom: 1.5rem;
}

.piece__link {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spruce);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.piece__link svg { transition: transform 0.35s var(--ease); }
.piece:hover .piece__link svg { transform: translateX(5px); }

/* Koko kortti klikattava */
.piece__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------- Tekijät */

.makers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.maker__portrait {
  background: var(--bone-deep);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: 1.75rem;
  display: grid;
  place-items: end center;
}
.maker__portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  transition: transform 0.9s var(--ease);
}
.maker:hover .maker__portrait img { transform: scale(1.04); }

.maker h3 {
  font-size: 1.5rem;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin-bottom: 0.15rem;
}
.maker__role {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.maker p { font-size: 0.9375rem; color: var(--ink-soft); }

/* ------------------------------------------------------- Tummat osiot */

.slab {
  background: var(--spruce);
  color: var(--bone-warm);
}
.slab h2, .slab h3 { color: var(--bone-warm); }
.slab p { color: rgba(251, 248, 242, 0.76); }
.slab .eyebrow { color: rgba(251, 248, 242, 0.5); }
.slab .eyebrow::after { background: rgba(251, 248, 242, 0.22); }
.slab .rule { background: rgba(251, 248, 242, 0.14); }

/* --------------------------------------------------------------- Painike */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bone); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { background: var(--spruce); border-color: var(--spruce); color: var(--bone-warm); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); }

.btn--light { border-color: rgba(251, 248, 242, 0.4); color: var(--bone-warm); }
.btn--light:hover { background: var(--bone-warm); color: var(--spruce); border-color: var(--bone-warm); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------------------------------------------------------- Yhteystiedot */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.contact-block h3 {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}
.contact-block p, .contact-block address {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  font-style: normal;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  line-height: 1.55;
  color: var(--ink);
}
/* Sähköpostiosoite on pitkä yhtenäinen merkkijono, jota selain ei katkaise
   itsestään. Kapeimmassa sarakkeessa (240 px) se työntyisi ruudukon reunan
   yli, joten se latoutuu hieman pienemmällä ja saa katketa. */
.contact-block--email p {
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.1rem);
  overflow-wrap: anywhere;
}
.contact-block a { border-bottom: 1px solid var(--line); transition: border-color 0.3s var(--ease); }
.contact-block a:hover { border-bottom-color: var(--brass); }

/* --------------------------------------------------------------- Alatunniste */

.colophon {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  font-size: 0.8125rem;
  color: var(--stone);
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  justify-content: space-between;
  align-items: center;
}
.colophon a { transition: color 0.25s var(--ease); }
.colophon a:hover { color: var(--ink); }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ------------------------------------------------------- Tuotesivu */

.piecehero {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.piecehero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.piecehero h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 100;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.piecehero__stage {
  background: var(--bone-warm);
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3vw, 3rem);
}
.piecehero__stage img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 44px rgba(33, 29, 25, 0.16));
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--line-soft);
}
.gallery figure {
  margin: 0;
  background: var(--bone-warm);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden;
}
.gallery img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.7s var(--ease);
}
.gallery figure:hover img { transform: scale(1.06); }

.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  font-size: 0.9375rem;
}
.spec-list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
  transform: translateY(-2px);
}

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.75rem;
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.backlink:hover { color: var(--ink); gap: 0.85rem; }

/* Sisarnavigaatio tuotesivun alalaidassa */
.siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.siblings a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: all 0.3s var(--ease);
}
.siblings a:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.siblings a[aria-current="page"] { background: var(--bone-deep); color: var(--ink); }

/* ------------------------------------------------- Paljastusanimaatiot */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Latausvaiheen porrastus */
.stagger > * {
  opacity: 0;
  animation: rise 1s var(--ease) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.22s; }
.stagger > *:nth-child(3) { animation-delay: 0.34s; }
.stagger > *:nth-child(4) { animation-delay: 0.46s; }
.stagger > *:nth-child(5) { animation-delay: 0.58s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Responsiivisuus */

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { justify-self: center; max-width: 340px; order: -1; }
  .railmark { display: none; }
  .prose-grid { grid-template-columns: 1fr; }
  .prose-grid h2 { position: static; }
  .piecehero__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 62px; }

  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bone-warm);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-120%);
    transition: transform 0.45s var(--ease);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a {
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.85rem;
  }
  .nav a::after { display: none; }
  .nav__cta {
    margin-top: 1rem;
    justify-content: center;
    display: flex;
    border-radius: 999px;
  }

}

@media (max-width: 760px) {
  .hero__meta { gap: 1.25rem 2rem; }
  .collection { grid-template-columns: 1fr; }
  .colophon__inner { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------- Saavutettavuus */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; animation: none; }
  .ticker__track { animation: none; }
}

@media print {
  .masthead, .ticker, .nav-toggle, .railmark { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   LIIKE JA VUOROVAIKUTUS
   Elävyys haetaan hitaista, orgaanisista liikkeistä: ajautuva värikenttä,
   paperimainen rakeisuus ja pehmeät paljastukset. Ei nykiviä efektejä.
   ========================================================================== */

/* ------------------------------------------------- Vierityksen edistyminen */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--brass), var(--spruce));
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------------------ Paperin rakeisuus */

.grain {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  animation: grainshift 7s steps(6) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------- Elävä värikenttä herossa */

.hero { isolation: isolate; }

.hero__aurora {
  position: absolute;
  inset: -25% -10% -10%;
  z-index: -2;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.55;
}
.hero__aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.hero__aurora i:nth-child(1) {
  width: 44vw; height: 44vw; left: 2%; top: 8%;
  background: radial-gradient(circle, rgba(166, 124, 61, 0.34), transparent 68%);
  animation: float1 26s ease-in-out infinite;
}
.hero__aurora i:nth-child(2) {
  width: 38vw; height: 38vw; right: 4%; top: 22%;
  background: radial-gradient(circle, rgba(46, 61, 51, 0.28), transparent 68%);
  animation: float2 32s ease-in-out infinite;
}
.hero__aurora i:nth-child(3) {
  width: 30vw; height: 30vw; left: 38%; bottom: -6%;
  background: radial-gradient(circle, rgba(235, 227, 213, 0.9), transparent 70%);
  animation: float3 22s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(7%, -5%) scale(1.09); }
  66%      { transform: translate(-4%, 6%) scale(0.95); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-8%, 6%) scale(1.12); }
  70%      { transform: translate(5%, -4%) scale(0.94); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-6%, -7%) scale(1.15); }
}

/* Kohdistinta seuraava lämmin hohde */
.hero__glow {
  position: absolute;
  width: 34rem; height: 34rem;
  left: 0; top: 0;
  margin: -17rem 0 0 -17rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 124, 61, 0.16), transparent 62%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  will-change: transform;
}
.hero:hover .hero__glow { opacity: 1; }

/* --------------------------------------------- Otsikon naamioitu nousu */

.hero__title span {
  display: block;
  overflow: hidden;
}
.hero__title span > em {
  display: block;
  font-style: normal;
  transform: translateY(102%);
  animation: unmask 1.15s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}
.hero__title span:nth-child(1) > em { animation-delay: 0.12s; }
.hero__title span:nth-child(2) > em { animation-delay: 0.26s; }

@keyframes unmask { to { transform: none; } }

/* ------------------------------------------- Kuvien pehmeä paljastuminen */

.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s cubic-bezier(0.16, 0.84, 0.32, 1),
              transform 1.4s var(--ease);
  transform: scale(1.06);
}
.reveal-img.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Kevyt parallaksi: JS asettaa --par */
.parallax { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }

/* ------------------------------------------------------- Rikkaammat hoverit */

/* Painikkeet: täyttö pyyhkäisee vasemmalta */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { background: transparent; }
.btn svg { transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn--solid::before { background: var(--ink); }
.btn--light::before { background: var(--bone-warm); }
.btn--light:hover { color: var(--spruce); }

/* Tuotekortti: messinkiviiva piirtyy, kortti nousee */
.piece {
  transition: background 0.45s var(--ease), transform 0.5s var(--ease);
}
.piece::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  z-index: 2;
}
.piece:hover::before { transform: scaleX(1); }
.piece:hover { transform: translateY(-4px); }
.piece__index { transition: color 0.4s var(--ease), transform 0.5s var(--ease); }
.piece:hover .piece__index { color: var(--brass); transform: translateY(-3px); }
.piece h3 { transition: color 0.35s var(--ease); }
.piece:hover h3 { color: var(--spruce); }

/* Galleriakuvat: zoom ja hienovarainen kallistus */
.gallery figure {
  position: relative;
  transition: background 0.5s var(--ease);
  cursor: zoom-in;
}
.gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(46, 61, 51, 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.gallery figure:hover::after { opacity: 1; }
.gallery figure:hover { background: var(--bone-deep); }
.gallery img { transition: transform 0.9s var(--ease); }
.gallery figure:hover img { transform: scale(1.08) rotate(-0.6deg); }

/* Tekijäkuvat */
.maker__portrait { position: relative; overflow: hidden; }
.maker__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46, 61, 51, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.maker:hover .maker__portrait::after { opacity: 1; }

/* Yhteystietolinkit */
.contact-block a {
  position: relative;
  border-bottom: 0;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.5s var(--ease), color 0.35s var(--ease);
  padding-bottom: 2px;
}
.contact-block a:hover { background-size: 100% 1px; color: var(--spruce); }

/* Alatunnisteen linkit */
.colophon a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.45s var(--ease), color 0.25s var(--ease);
  padding-bottom: 2px;
}
.colophon a:hover { background-size: 100% 1px; }

/* Sisarnavigaation pillerit */
.siblings a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.siblings a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.siblings a:hover::before { transform: none; }
.siblings a:hover { background: transparent; border-color: var(--ink); }

/* Logo */
.brandmark img { transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.brandmark:hover img { opacity: 0.68; transform: translateX(2px); }

/* Takaisin-linkin nuoli */
.backlink svg { transition: transform 0.35s var(--ease); }
.backlink:hover svg { transform: translateX(-4px); }

/* Speksiluettelo herää rivi kerrallaan */
.spec-list li { transition: color 0.3s var(--ease), padding-left 0.35s var(--ease); }
.spec-list li:hover { color: var(--spruce); padding-left: 0.35rem; }
.spec-list li::before { transition: transform 0.35s var(--ease), background 0.3s var(--ease); }
.spec-list li:hover::before { transform: translateY(-2px) scale(1.6); }

/* ------------------------------------------------- Koriste, piirtyy vieritettäessä */

.ornament { display: block; width: 100%; height: auto; overflow: visible; }
.ornament path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  opacity: 0.5;
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ornament.is-in path { stroke-dashoffset: 0; }

/* --------------------------------------------- Nauha pysähtyy osoitettaessa */

.ticker:hover .ticker__track { animation-play-state: paused; }

/* --------------------------------------------------- Hienosäätö mobiilissa */

@media (max-width: 760px) {
  .hero__aurora { filter: blur(44px); opacity: 0.45; }
  .hero__glow { display: none; }
  .grain { opacity: 0.28; }
}

@media (hover: none) {
  .hero__glow { display: none; }
  .piece:hover { transform: none; }
}

/* --------------------------------------------------------- Saavutettavuus */

@media (prefers-reduced-motion: reduce) {
  .hero__aurora i,
  .grain { animation: none !important; }
  .hero__glow { display: none; }
  .hero__title span > em { transform: none; animation: none; }
  .reveal-img { clip-path: none; transform: none; }
  .parallax { transform: none !important; }
  .ornament path { stroke-dashoffset: 0; }
  .progress { display: none; }
}

/* ==========================================================================
   VIKASIETOISUUS
   Animaatiot piilottavat sisältöä. Jos JavaScript ei lataudu tai kaatuu,
   piilotus jäisi päälle ja sivu näyttäisi tyhjältä. Siksi piilotus astuu
   voimaan vasta kun inline-skripti on lisännyt html-elementille .js-luokan.
   Ilman JavaScriptiä sivu näkyy kokonaan, ilman liikettä.
   ========================================================================== */

.reveal, .reveal-img { opacity: 1; transform: none; clip-path: none; }
.stagger > * { opacity: 1; animation: none; }
.hero__title span > em { transform: none; animation: none; }
.ornament path { stroke-dashoffset: 0; }

html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

html.js .reveal-img {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
}
html.js .reveal-img.is-in { clip-path: inset(0 0 0 0); transform: none; }

html.js .stagger > * { opacity: 0; animation: rise 1s var(--ease) forwards; }
html.js .stagger > *:nth-child(1) { animation-delay: 0.1s; }
html.js .stagger > *:nth-child(2) { animation-delay: 0.22s; }
html.js .stagger > *:nth-child(3) { animation-delay: 0.34s; }
html.js .stagger > *:nth-child(4) { animation-delay: 0.46s; }
html.js .stagger > *:nth-child(5) { animation-delay: 0.58s; }

html.js .hero__title span > em {
  transform: translateY(102%);
  animation: unmask 1.15s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}
html.js .hero__title span:nth-child(1) > em { animation-delay: 0.12s; }
html.js .hero__title span:nth-child(2) > em { animation-delay: 0.26s; }

html.js .ornament path { stroke-dashoffset: var(--len, 1200); }
html.js .ornament.is-in path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-img { opacity: 1; transform: none; clip-path: none; }
  html.js .stagger > * { opacity: 1; animation: none; }
  html.js .hero__title span > em { transform: none; animation: none; }
  html.js .ornament path { stroke-dashoffset: 0; }
}

/* Kuva paljastuu kun sen KEHYS on merkitty näkyväksi. Kuvaa itseään ei voi
   tarkkailla, koska clip-path nollaa IntersectionObserverin näkemän alueen. */
html.js .is-in > .reveal-img,
html.js .reveal-img.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .is-in > .reveal-img { clip-path: none; transform: none; }
}

/* Gallerian tyhjät ruudukkosolut näkyivät harmaana laatikkona, koska 1px:n
   raot tehtiin taustavärillä. Tausta vaihdetaan sivun sävyyn, jolloin tyhjä
   solu sulautuu eikä erotu virheenä. */
.gallery { background: var(--bone); }

@media (min-width: 1100px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Tuotekuvat ovat lähes valkoisia ja pehmeäreunaisia läpinäkyviä leikkauksia.
   Leveä drop-shadow piirtää niiden ympärille vaalean kehän, joka näyttää
   toiselta kalusteelta. Varjot pidetään tiukkoina ja vaimeina. */
.piecehero__stage img { filter: drop-shadow(0 12px 16px rgba(33, 29, 25, 0.08)); }
.hero__figure img     { filter: drop-shadow(0 22px 28px rgba(33, 29, 25, 0.13)); }
.piece__media img     { filter: drop-shadow(0 12px 16px rgba(33, 29, 25, 0.09)); }

/* Vaimennettunakin kehä näkyi suurissa kuvissa. Suurista tuotekuvista varjo
   poistetaan kokonaan: syvyys tulee paneelin taustasävystä, ei varjosta. */
.piecehero__stage img { filter: none; }
.hero__figure img     { filter: none; }

/* ==========================================================================
   MYYNTIKERROS
   Vanha sivusto oli esite: se kertoi mallistosta ja tekijöistä, mutta ei
   pyytänyt mitään. Tämä osio lisää ne rakenteet joilla kävijä siirtyy
   katsojasta yhteydenottajaksi: arvolupaukset, kohderyhmät, tilausprosessi,
   mittataulukot ja tarjouspyyntölomake.
   ========================================================================== */

/* ---------------------------------------------------- Arvolupaukset */

.props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.prop {
  background: var(--bone);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: background 0.45s var(--ease);
}
.prop:hover { background: var(--bone-warm); }

.prop__mark {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--brass);
  margin-bottom: 1.5rem;
  font-variation-settings: "SOFT" 20;
}

.prop h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin-bottom: 0.7rem;
  text-wrap: balance;
}

.prop p {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
}

/* ------------------------------------------------------- Kohderyhmät */

.audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.aud {
  position: relative;
  padding: clamp(1.9rem, 3.5vw, 3rem);
  background: var(--bone-warm);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
  overflow: hidden;
}
.aud:hover { transform: translateY(-4px); border-color: var(--line); }

.aud::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.aud:hover::before { transform: scaleX(1); }

.aud--dark { background: var(--spruce); border-color: var(--spruce); color: var(--bone-warm); }
.aud--dark h3 { color: var(--bone-warm); }
.aud--dark p, .aud--dark li { color: rgba(251, 248, 242, 0.78); }
.aud--dark .aud__kicker { color: rgba(251, 248, 242, 0.5); }

.aud__kicker {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.15rem;
}

.aud h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-variation-settings: "SOFT" 45, "WONK" 1;
  margin-bottom: 0.9rem;
}

.aud p { font-size: 0.9375rem; color: var(--ink-soft); }

.aud__list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  flex: 1;
}
.aud__list li {
  font-size: 0.875rem;
  color: var(--ink-soft);
  padding-block: 0.55rem;
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  border-top: 1px solid var(--line-soft);
}
.aud--dark .aud__list li { border-top-color: rgba(251, 248, 242, 0.14); }
.aud__list li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
  transform: translateY(-2px);
}
.aud .btn-row { margin-top: 1.9rem; }

/* ------------------------------------------------- Näin tilaus etenee */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}

.step { position: relative; counter-increment: step; padding-top: 2.75rem; }

.step::before {
  content: "";
  position: absolute;
  top: 0.55rem; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.step::after {
  content: "";
  position: absolute;
  top: 0.25rem; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--brass);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.step:hover::after { background: var(--brass); transform: scale(1.25); }

.step__no {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--brass);
  display: block;
  margin-bottom: 0.85rem;
}

.step h3 {
  font-size: 1.2rem;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin-bottom: 0.55rem;
}
.step p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ------------------------------------------------------ Mittataulukko */

.dims {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0;
}
.dims caption {
  text-align: left;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: 1rem;
}
.dims th, .dims td {
  text-align: left;
  padding: 0.85rem 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}
.dims thead th {
  font-family: var(--body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom-color: var(--line);
}
.dims tbody th {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: 1.0625rem;
  white-space: nowrap;
}
.dims td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dims tbody tr { transition: background 0.3s var(--ease); }
.dims tbody tr:hover { background: var(--bone-warm); }

.dims__note {
  font-size: 0.8125rem;
  color: var(--stone);
  margin: 1.15rem 0 0;
  max-width: 54ch;
}

/* -------------------------------------------------- Tarjouspyyntölomake */

.quote { position: relative; }

.quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.quote__aside p { font-size: 0.9375rem; }

.quote__direct {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(251, 248, 242, 0.16);
}
.quote__direct dt {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.5);
  margin-bottom: 0.4rem;
}
.quote__direct dd {
  margin: 0 0 1.35rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  color: var(--bone-warm);
}
.quote__direct dd:last-child { margin-bottom: 0; }
.quote__direct a {
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
  padding-bottom: 3px;
}
.quote__direct a:hover { background-size: 0% 1px; color: var(--brass); }

.form { display: grid; gap: 1.6rem; }

.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.form legend,
.field > label,
.field__label {
  display: block;
  font-family: var(--body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.62);
  margin-bottom: 0.85rem;
  padding: 0;
}

.field__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.6rem;
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form input[type="number"],
.form select,
.form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--bone-warm);
  background: rgba(251, 248, 242, 0.05);
  border: 1px solid rgba(251, 248, 242, 0.2);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.form textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23FBF8F2' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form select option { background: var(--spruce); color: var(--bone-warm); }

.form input::placeholder,
.form textarea::placeholder { color: rgba(251, 248, 242, 0.38); }

.form input:hover,
.form select:hover,
.form textarea:hover { border-color: rgba(251, 248, 242, 0.34); }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  border-color: var(--brass);
  background: rgba(251, 248, 242, 0.09);
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Tuotevalinnat pilleriruksina: valinta on yksi napautus, ei pudotusvalikko */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.25rem;
  border: 1px solid rgba(251, 248, 242, 0.24);
  border-radius: 999px;
  color: rgba(251, 248, 242, 0.8);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
  pointer-events: none;
}
.chip input:hover + span { border-color: rgba(251, 248, 242, 0.5); color: var(--bone-warm); }
.chip input:checked + span {
  background: var(--bone-warm);
  color: var(--spruce);
  border-color: var(--bone-warm);
}
.chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 3px; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.form__note {
  font-size: 0.8125rem;
  color: rgba(251, 248, 242, 0.5);
  max-width: 46ch;
  margin: 0;
  line-height: 1.6;
}

/* Kiitospaneeli lomakkeen tilalle */
.sent {
  border: 1px solid var(--brass);
  background: rgba(166, 124, 61, 0.1);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sent h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-variation-settings: "SOFT" 45, "WONK" 1;
  color: var(--bone-warm);
  margin-bottom: 0.85rem;
}
.sent p { color: rgba(251, 248, 242, 0.78); font-size: 0.9375rem; }
.sent pre {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  background: rgba(33, 29, 25, 0.28);
  border-left: 2px solid var(--brass);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(251, 248, 242, 0.86);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ------------------------------------------- Kelluva tarjouspalkki */

/* Keskitys tehdaan left/right + margin-inline:auto -parilla, ei left:50%
   -tempulla. Jalkimmaisessa kelluvan elementin kayttoon jaa vain oikea
   puolisko ruudusta, jolloin noin 900 ja 1200 pikselin valilla painike
   puristui ja rivittyi kahdelle riville. */
.railbar {
  position: fixed;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  bottom: 1.25rem;
  transform: translateY(160%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.6rem 0.65rem 0.6rem 1.5rem;
  background: rgba(46, 61, 51, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-radius: 999px;
  box-shadow: 0 18px 40px -12px rgba(33, 29, 25, 0.45),
              0 4px 10px -4px rgba(33, 29, 25, 0.3);
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.railbar.is-up { transform: translateY(0); opacity: 1; pointer-events: auto; }

.railbar__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.72);
  white-space: nowrap;
}
.railbar .btn {
  padding: 0.7rem 1.35rem;
  white-space: nowrap;
  background: var(--bone-warm);
  border-color: var(--bone-warm);
  color: var(--spruce);
}
.railbar .btn::before { background: var(--brass); }
.railbar .btn:hover { color: var(--bone-warm); }

@media (max-width: 560px) {
  /* Vasen sisennys oli varattu tekstille joka mobiilissa piilotetaan, joten
     kehys jai epasymmetriseksi. Paddingit tasataan kun teksti poistuu. */
  .railbar { left: 1rem; right: 1rem; width: auto; max-width: none; justify-content: center; padding: 0.55rem; }
  .railbar__label { display: none; }
  .railbar .btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------- Tarjouspyyntösivu */

.quotepage { padding-top: clamp(2.5rem, 5vw, 4rem); }
.quotepage .quote__grid { align-items: start; }

.pagehead { max-width: 46ch; }
.pagehead h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 90;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------- Responsiivisuus */

@media (max-width: 960px) {
  .quote__grid { grid-template-columns: 1fr; }
}

/* Tuotekortin kuva täytti ruudun vain korkeussuunnassa, joten leveät kuvat
   (pöytä, sänky, lipasto) kutistuivat murto-osaan pystykuvien rinnalla ja
   mallisto näytti epätasaiselta. object-fit antaa jokaiselle kuvalle koko
   ruudun ja säilyttää silti mittasuhteet. */
.piece__media img,
.gallery img,
.piecehero__stage img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* Viisi yhtä leveää saraketta puristi kortit 230 pikseliin ja teki
   tuotekuvista postimerkkejä. Kuuden sarakkeen ruudukossa kolme
   pystykuvaa saa ylärivin ja kaksi leveää kuvaa alarivin isot ruudut,
   jolloin jokainen kaluste näkyy siinä muodossa kuin se on kuvattu. */
@media (min-width: 1000px) {
  .collection { grid-template-columns: repeat(6, 1fr); }
  .piece { grid-column: span 2; }
  .piece:nth-child(4),
  .piece:nth-child(5) { grid-column: span 3; }
  .piece:nth-child(4) .piece__media,
  .piece:nth-child(5) .piece__media { aspect-ratio: 16 / 9; }
}

/* Tumman kohderyhmäkortin leipäteksti jäi tummanruskeaksi, koska .aud p
   ja .aud__list li tulevat myöhemmin samalla spesifisyydellä kuin
   .aud--dark-säännöt. Nostetaan tumman variantin spesifisyyttä. */
.aud.aud--dark p,
.aud.aud--dark .aud__list li { color: rgba(251, 248, 242, 0.8); }
.aud.aud--dark .aud__list li { border-top-color: rgba(251, 248, 242, 0.16); }
.aud.aud--dark .aud__kicker { color: rgba(251, 248, 242, 0.56); }

/* Mobiilissa herokuva vei yli puolet ensimmäisestä ruudusta ja työnsi
   otsikon sekä tarjouspainikkeen taitteen alle. Kuva pienenee niin että
   lupaus ja toimintakehotus mahtuvat samaan näkymään. */
@media (max-width: 760px) {
  .hero { padding-top: clamp(1rem, 4vw, 2rem); }
  .hero__figure { max-width: 210px; }
  .hero__grid { gap: 1.25rem; }
  .hero__title { margin-bottom: 1rem; }
  .hero__sub { margin-bottom: 1.5rem; }
  .hero__meta { margin-top: 2rem; padding-top: 1.25rem; }
}

/* ==========================================================================
   VÄHENNETTY LIIKE, HARKITUSTI
   Aiempi toteutus sammutti prefers-reduced-motion -tilassa kaiken: myös
   hover-värit ja häivytykset, jolloin sivu näytti pysähtyneeltä eikä
   hillitältä. Asetus koskee liikettä, ei näkyvyyden muutoksia, joten
   transformit, parallaksi, loputtomat silmukat ja rakeisuuden värinä jäävät
   pois, mutta opacity-häivytykset ja värisiirtymät saavat jäädä.
   Tämä on myös se tila jossa osa katsojista sivun näkee, joten sen pitää
   näyttää valmiilta eikä rikkinäiseltä.
   ========================================================================== */

@keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {

  /* Hover- ja fokussiirtymät takaisin: ne eivät liikuta mitään ruudulla. */
  *, *::before, *::after { transition-duration: 0.28s !important; }

  /* Paljastukset vieritettäessä: pelkkä häivytys, ei nousua eikä leikkausta. */
  html.js .reveal {
    opacity: 0 !important;
    transform: none !important;
    transition-property: opacity !important;
    transition-duration: 0.5s !important;
  }
  html.js .reveal.is-in { opacity: 1 !important; }

  html.js .reveal-img {
    opacity: 0 !important;
    clip-path: none !important;
    transform: none !important;
    transition-property: opacity !important;
    transition-duration: 0.6s !important;
  }
  html.js .reveal-img.is-in,
  html.js .is-in > .reveal-img { opacity: 1 !important; }

  /* Latausvaiheen porrastus ja otsikon nousu häivytyksinä. */
  html.js .stagger > * {
    opacity: 0;
    transform: none !important;
    animation: fade-only 0.55s var(--ease) forwards !important;
    animation-duration: 0.55s !important;
  }

  html.js .hero__title span > em {
    opacity: 0;
    transform: none !important;
    animation: fade-only 0.7s var(--ease) 0.1s forwards !important;
    animation-duration: 0.7s !important;
  }

  /* Koristeviiva piirtyy yhä, koska siinä ei liiku mikään kappale. */
  html.js .ornament path {
    stroke-dashoffset: var(--len, 1200);
    transition-property: stroke-dashoffset !important;
    transition-duration: 1.6s !important;
  }
  html.js .ornament.is-in path { stroke-dashoffset: 0; }
}

/* Nauha vähennetyn liikkeen tilassa.
   Loputon vieritys on juuri sitä mitä asetus on tarkoitettu pysäyttämään,
   joten sitä ei panna takaisin pyörimään. Pysäytettynä se kuitenkin näytti
   jumittuneelta: teksti liimautui vasempaan reunaan, oikeaan jäi irrallinen
   erotinpiste ja kaksoiskappale leikkautui piiloon. Staattisena siitä
   tehdään keskitetty, tasapainoinen nauha, joka näyttää siltä kuin se olisi
   alun perin piirretty paikalleen. */
@media (prefers-reduced-motion: reduce) {
  .ticker { padding-block: 1.15rem; }

  .ticker__track {
    animation: none !important;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 3rem;
    padding-inline: var(--gutter);
    white-space: normal;
  }

  /* Vierityksen vaatima kaksoiskappale pois: paikallaan se on vain toiste. */
  .ticker span:nth-child(n + 6) { display: none; }

  /* Erotinpiste kuului liikkuvaan jonoon. Staattisessa rivissä välit riittävät. */
  .ticker span { gap: 0; }
  .ticker span::after { display: none; }
}

/* ==========================================================================
   PAINIKKEET KAPEALLA NÄYTÖLLÄ
   Pilleripainikkeet ovat leveydeltään tekstinsä mittaisia, joten mobiilissa
   rivi hajosi rikkonaiseksi: kaksi eri levyistä painiketta yläriville, kolmas
   yksin alle, ja pisimmät tekstit rivittyivät pillerin sisällä kahdelle
   riville. Samalla ensisijainen kehotus katosi toissijaisten sekaan.

   Ratkaisu on hierarkia eikä pelkkä levennys: ensisijainen painike vie koko
   leveyden, toissijaiset jakavat rivin puoliksi. Kirjainväliä kavennetaan,
   koska 0.18em vie versaalitekstissä kohtuuttomasti tilaa juuri siellä missä
   sitä on vähiten.
   ========================================================================== */

@media (max-width: 560px) {
  .btn-row { gap: 0.6rem; }

  .btn {
    letter-spacing: 0.12em;
    padding-inline: 1.15rem;
    justify-content: center;
    text-align: center;
    min-width: 0;
  }

  /* Ensisijainen ja vaalea (tummalla pohjalla ensisijainen) koko leveydelle. */
  .btn-row > .btn--solid,
  .btn-row > .btn--light { flex: 1 1 100%; }

  /* Toissijaiset jakavat rivin. calc pitää ne samanlevyisinä välin kanssa. */
  .btn-row > .btn:not(.btn--solid):not(.btn--light) {
    flex: 1 1 calc(50% - 0.3rem);
  }

  /* Kelluva palkki ohjaa omat mittansa, ei periytä ylläolevaa. */
  .railbar .btn { flex: 1 1 auto; }
}

/* .btn--light ei tarkoita ensisijaista vaan vaaleaa varianttia tummalle
   pohjalle. Kun niitä on rivissä useita, ne ovat latauslinkkejä eivätkä
   kehotuksia, joten koko leveys kuuluu vain yksin seisovalle. */
@media (max-width: 560px) {
  .btn-row > .btn--light { flex: 1 1 calc(50% - 0.3rem); }
  .btn-row > .btn--light:only-child { flex: 1 1 100%; }
}

/* Valikon tarjouspyyntö oli ääriviivapilleri muiden linkkien joukossa eikä
   erottunut päätoiminnoksi. Auki vedetyssä mobiilivalikossa se täytetään,
   kuten heron vastaava painike. */
@media (max-width: 900px) {
  .nav__cta {
    background: var(--spruce);
    color: var(--bone-warm);
    border-color: var(--spruce);
    padding-block: 0.85rem !important;
  }
  .nav__cta:hover { background: var(--ink); border-color: var(--ink); }
}

/* Painikkeen 0.18em kirjainväli maksaa versaalitekstissä paljon leveyttä.
   Ahtaus ei ala vasta puhelimessa: jo tabletilla kaksipalstaiset kortit
   kaventavat painikkeen tilan niin että pisimmät tekstit rivittyvät pillerin
   sisään. Kirjainväliä kavennetaan siksi jo tästä leveydestä alkaen, ei vasta
   mobiilirajalla. */
@media (max-width: 900px) {
  .btn { letter-spacing: 0.12em; padding-inline: 1.25rem; }

  /* Palkin selite vie tilan painikkeelta heti kun leveys kiristyy. */
  .railbar__label { display: none; }
  .railbar { padding: 0.55rem; justify-content: center; }
  .railbar .btn { flex: 1 1 auto; justify-content: center; }
}

/* Kaikkein kapeimmilla näytöillä kahteen palstaan jaetut latauspainikkeet
   eivät enää mahdu yhdelle riville, joten ne asettuvat allekkain. */
@media (max-width: 380px) {
  /* Valitsin kirjoitetaan yhta tarkaksi kuin ylempi 50 prosentin saanto,
     muuten se ei voita spesifisyysvertailua vaikka tulee myohemmin. */
  .btn-row > .btn:not(.btn--solid):not(.btn--light),
  .btn-row > .btn--light,
  .btn-row > .btn { flex: 1 1 100%; }
}

/* Mittataulukko on 3-4 saraketta numeroita, ja kapealla näytöllä se työnsi
   sivua sivusuunnassa yli reunan. Sarakeotsikon nowrap poistetaan, tekstiä
   ja välejä kavennetaan, jolloin taulukko mahtuu ilman vaakavieritystä. */
@media (max-width: 620px) {
  .dims { font-size: 0.85rem; table-layout: fixed; }
  .dims caption { font-size: 0.6rem; letter-spacing: 0.16em; }
  .dims th, .dims td { padding: 0.7rem 0.6rem 0.7rem 0; }
  .dims thead th { font-size: 0.58rem; letter-spacing: 0.08em; }
  .dims tbody th { white-space: normal; font-size: 0.95rem; hyphens: auto; }
  .dims td { font-size: 0.82rem; }
}

/* Lomakkeen alahuomautus on tummalla pohjalla, joten sen linkit tarvitsevat
   oman vaalean sävynsä. Ilman tätä ne piirtyvät mustekynän värillä
   tummaan taustaan eivätkä erotu lainkaan. */
.form__note a {
  color: rgba(251, 248, 242, 0.72);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.form__note a:hover,
.form__note a:focus-visible { color: var(--bone-warm); }

/* Varatie kiitospaneelissa, jos postiohjelmaa ei ole. */
.sent__fallback {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(251, 248, 242, 0.6);
  max-width: 52ch;
}

/* Pienempi rivi vaalealla pohjalla, esimerkiksi päivitysmerkintä. */
.fineprint {
  font-size: 0.875rem;
  color: var(--stone);
}

/* ==========================================================================
   GALLERIASIVU
   Sivun oma kerros. Ruudukko, hover ja tyhjien solujen sulautuminen tulevat
   jo aiemmista .gallery-saannoista, joten tassa maaritellaan vain se mita
   tuotesivujen kuvanauhoissa ei ole: ryhman otsake, suurennuslinkki,
   taysin tayttavat kangaskuvat ja suurennusnakyma.
   ========================================================================== */

/* Ryhman otsake: selite vasemmalle, linkki tuotesivulle oikealle. Kapealla
   naytolla linkki putoaa omalle rivilleen eika purista tekstia. */
.galleryhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.galleryhead > div { flex: 1 1 22rem; min-width: 0; }
.galleryhead__text {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-soft);
}
.galleryhead .btn { flex-shrink: 0; }

/* Herokuvan tilalla on mosaiikki, jossa on yksi ruutu jokaisesta ryhmasta.
   Yksittainen tuotekuva jai taalla laihaksi: kuvissa on itsessaan runsaasti
   valkoista, ja pystysuuntaiseen lavaan mahtuessaan kaluste kutistui pieneksi
   keskelle tyhjaa. Mosaiikki kertoo heti mita sivulta loytyy ja toimii samalla
   sisallysluettelona, jonka kautta paasee suoraan ryhmaan. */
.herogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  aspect-ratio: 3 / 2;
}
.herogrid a {
  background: var(--bone-warm);
  display: grid;
  place-items: center;
  padding: clamp(0.6rem, 1.4vw, 1.25rem);
  overflow: hidden;
}
.herogrid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.7s var(--ease);
}
.herogrid a:hover { background: var(--bone-deep); }
.herogrid a:hover img { transform: scale(1.07); }
.herogrid a:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }

/* Kangasruutu on pintaa eika esine, joten se rajataan tayttamaan ruutu. */
.herogrid__fill { padding: 0 !important; }
.herogrid__fill img { object-fit: cover; }

/* Kolmen kuvan ryhmat. Yleissaanto latoo 1100 pikselista alkaen nelja
   saraketta, jolloin kolmen kuvan ryhmasta jai rivin oikeaan reunaan tyhja
   solu. Se ei sulaudu taustaan yhta huomaamattomasti kuin oletettiin, koska
   laatat ovat savya --bone-warm ja tyhja solu sivun --bone. Kolmella
   sarakkeella rivi tayttyy reunasta reunaan. */
@media (min-width: 1100px) {
  .gallery--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Suurennuslinkki tayttaa koko ruudun, jotta koko laatta on klikattava.
   Ilman JavaScriptia linkki avaa kuvatiedoston sellaisenaan, eli toiminto
   ei ole skriptin varassa vaan skripti vain parantaa sita. */
.gallery .zoom {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.gallery .zoom:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -4px;
}

/* Kangaskuvat ovat pintaa, eivat esineita: ne rajataan tayttamaan ruutu
   kokonaan. Tuotekuvat ovat lapinakyvia leikkauksia ja pysyvat contain-
   tilassa. Kallistus jaa pois, koska taysin tayttavan kuvan kulmat
   paljastuisivat kierrettaessa. */
.gallery--fill figure { padding: 0; }
.gallery--fill img { object-fit: cover; }
.gallery--fill figure:hover img { transform: scale(1.05); }

/* Galleriasivulla kuvia on 28, ja yhden sarakkeen puhelinnakymassa sivusta
   tuli kymmenien ruutujen mittainen vieritys. Kahdella sarakkeella ryhman
   nakee yhdella silmayksella, ja yksityiskohdat katsotaan suurennuksesta.
   Saanto on rajattu tahan sivuun: tuotesivuilla kuvia on kuusi ja niissa
   taysleveä ruutu on oikea valinta. */
@media (max-width: 720px) {
  .page-galleria .gallery { grid-template-columns: repeat(2, 1fr); }
  /* Pariton viimeinen kuva vie koko rivin, ettei riviin jaa tyhjaa solua.
     Se latoutuu vaakakuvaksi, mika sopii naille kuville muutenkin. */
  .page-galleria .gallery > figure:last-child:nth-child(odd) {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }
}

/* -------------------------------------------------------- Suurennusnakyma */

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(3.5rem, 6vw, 5rem) clamp(0.75rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  background: rgba(23, 20, 17, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  margin: 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--bone-warm);
  transform: scale(0.97);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.lightbox.is-open .lightbox__figure img { transform: none; opacity: 1; }

.lightbox__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.62);
  text-align: center;
}
.lightbox__count { color: rgba(251, 248, 242, 0.38); font-variant-numeric: tabular-nums; }

/* Napit ovat samaa kielta kuin sivuston muut pyoreat elementit: ohut kehys,
   ei taytetta ennen kuin osoitetaan. */
.lightbox button {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(251, 248, 242, 0.28);
  border-radius: 999px;
  color: var(--bone-warm);
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox button:hover { background: var(--bone-warm); border-color: var(--bone-warm); color: var(--ink); }
.lightbox button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.lightbox button svg { display: block; }

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.75rem);
  right: clamp(0.75rem, 3vw, 2.5rem);
}

/* Kapealla naytolla nuolet eivat mahdu kuvan viereen, joten ne siirtyvat
   kuvan alle omaksi rivikseen ja kuva saa koko leveyden. */
@media (max-width: 720px) {
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: center;
  }
  .lightbox__figure { grid-column: 1 / -1; }
  .lightbox__prev { justify-self: end; }
  .lightbox__next { justify-self: start; }
  .lightbox__figure img { max-height: calc(100vh - 16rem); }
}

/* Suurennus on nakyvyyden muutos, ei liiketta, joten haivytys jaa. Kuvan
   pieni skaalaus on liiketta ja se poistetaan. */
@media (prefers-reduced-motion: reduce) {
  .lightbox__figure img { transform: none; }
}

/* Valikossa on galleriasivun jalkeen viisi linkkia ja tarjouspainike. Noin
   900 ja 1180 pikselin valilla rivi ei enaa mahtunut ylatunnisteeseen, vaan
   se tyonsi tarjouspainikkeen ulos reunasta. Kirjainvali, kirjasinkoko ja
   valit kapenevat siina valissa, jolloin koko valikko pysyy nakyvissa eika
   kannettavan naytolla tarvitse turvautua hampurilaisvalikkoon. */
@media (min-width: 901px) and (max-width: 1180px) {
  .masthead__inner { gap: 1.25rem; }
  .nav { gap: 1rem; }
  .nav a { font-size: 0.72rem; letter-spacing: 0.05em; }
  .nav__cta { padding: 0.5rem 0.9rem !important; }
}