/* ==========================================================================
   laelta — Studio B
   Konsepti: "Laituri illalla". Tumma, lämmin pohjoismainen luksus.
   Pohja kulkee kuusenvihreästä yöhön, valona kerma ja kävyn messinki.
   Ei vaaleita pintoja. Kuvat kantavat tunnelman, typografia on hiljainen.
   ========================================================================== */

:root {
  /* Väri — muokkaa vain näitä */
  --night:      #0f1411;   /* syvin pohja */
  --forest:     #141c17;   /* kuusi illalla, pääpinta */
  --moss:       #1b251f;   /* nostettu pinta */
  --dusk:       #221b15;   /* lämmin hämärä, liukuvärin pää */
  --cream:      #ede5d6;   /* teksti */
  --cream-soft: #b3ab9c;   /* toissijainen teksti */
  --brass:      #c4a47c;   /* aksentti: kävyn messinki */
  --brass-deep: #8c7255;   /* aksentin tumma sävy */
  --rule:       rgba(237, 229, 214, .14);
  --rule-strong: rgba(196, 164, 124, .45);

  /* Logo tummalla pohjalla: sävy-sävyyn messinki */
  --logo-body:  #a58561;
  --logo-scale: #dcc4a1;
  --logo-leg:   #8a735c;

  /* Typografia */
  --f-display: "Cormorant Garamond", "Cormorant", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body:    "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --t-micro: .72rem;
  --t-xs:  .8125rem;
  --t-sm:  .9375rem;
  --t-md:  1.0625rem;
  --t-lg:  clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  --t-xl:  clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  --t-2xl: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem);

  /* Tila */
  --gutter:   max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --wrap: 1180px;
  --head-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: dark;
}

/* ---------- Perusta ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--forest);
  /* Yksi yhtenäinen tausta koko sivulle: vihreän sävyt aaltoilevat ylhäältä alas
     pehmeinä läiskinä, ilman osioiden välisiä rajoja. */
  /* Vihreä ja ruskea vuorottelevat pitkinä, puhtaina aaltoina.
     Siirtymät lasketaan oklab-väriavaruudessa, jotta väliin ei synny harmaata "likaa". */
  background-image:
    radial-gradient(70% 7% at 18% 17%, rgba(46, 104, 76, .30), transparent),
    radial-gradient(70% 7% at 82% 52%, rgba(46, 104, 76, .24), transparent),
    radial-gradient(70% 7% at 20% 80%, rgba(46, 104, 76, .26), transparent),
    linear-gradient(in oklab to bottom,
      #0c1511 0%, #10241b 9%, #143024 20%, #1d1813 33%, #12291f 45%,
      #163226 55%, #201913 67%, #112a1f 79%, #14281e 89%, #0b130f 100%);
  background-repeat: no-repeat;
  color: var(--cream);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: var(--t-md);
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
table { border-collapse: collapse; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 80px);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
@media (min-width: 720px) {
  .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--cream); color: var(--night); padding: 10px 16px;
  text-decoration: none; font-weight: 500; transition: top .2s;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }

/* pieni kursiivi-ingressi otsikon yllä */
.kicker {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: var(--t-lg); line-height: 1.2; color: var(--brass);
}

/* ---------- Painikkeet: hiusviiva, pienet tilavat versaalit ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8em 2em;
  font: 400 var(--t-micro)/1 var(--f-body);
  letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--cream);
  border: 1px solid var(--rule-strong);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { border-color: var(--brass); color: var(--brass); }
.btn--solid { background: var(--brass); border-color: var(--brass); color: var(--night); }
.btn--solid:hover { background: var(--cream); border-color: var(--cream); color: var(--night); }

/* ---------- Header ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--night);
}
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  height: var(--head-h);
  color: var(--cream);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.site-head.is-scrolled {
  background: rgba(15, 20, 17, .6);
  -webkit-backdrop-filter: saturate(1.3) blur(18px);
  backdrop-filter: saturate(1.3) blur(18px);
  border-bottom-color: var(--rule);
}
.site-head .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.head-logo {
  display: block; color: inherit; text-decoration: none;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.head-logo svg { width: auto; height: 40px; }
.site-head.show-logo .head-logo { opacity: 1; pointer-events: auto; }

.nav-list { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav-list a {
  position: relative; display: inline-block; padding: 10px 0;
  font-size: var(--t-micro); font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-list a:hover::after, .nav-list a[aria-current="true"]::after { transform: scaleX(1); }
.nav-list .nav-cta a { color: var(--brass); }

.menu-toggle {
  display: none;
  align-items: center; gap: 12px;
  min-height: 44px; padding: 0 2px 0 14px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 400 var(--t-micro) var(--f-body); letter-spacing: .2em; text-transform: uppercase;
}
.menu-toggle .bars { position: relative; width: 22px; height: 10px; }
.menu-toggle .bars::before, .menu-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle .bars::before { top: 1px; }
.menu-toggle .bars::after { top: 8px; }
.menu-toggle[aria-expanded="true"] .bars::before { top: 4.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { top: 4.5px; transform: rotate(-45deg); }

@media (max-width: 819px) {
  .js .menu-toggle { display: inline-flex; }
  /* mobiilivalikko: koko leveyden yhtenäinen paneeli, joka jatkaa headeria saumattomasti */
  .site-head.menu-open { background: var(--night); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--night);
    border-bottom: 1px solid var(--rule);
    padding: 12px var(--gutter-r) 30px var(--gutter);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .nav-list { flex-direction: column; align-items: center; gap: 2px; }
  .js .nav-list a {
    display: block; padding: 8px 0;
    font-family: var(--f-display); font-size: 1.6rem; font-weight: 300;
    letter-spacing: 0; text-transform: none;
  }
  .js .nav-list a::after { display: none; }
  .js .nav-list a:hover { color: var(--brass); }
  .js .nav-list .nav-cta { margin-top: 14px; }
  .js .nav-list .nav-cta a {
    font-family: var(--f-body); font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase;
    padding: 12px 22px; border: 1px solid var(--rule-strong);
  }
  .no-js .nav-list { gap: 14px; }
  .no-js .nav-list .nav-cta { display: none; }
}

/* Desktop: header jakautuu samoihin sarakkeisiin kuin hero.
   Vasemmalla logo (näkyy vieritettäessä), oikealla linkit keskitettynä logon ja otsikon yläpuolelle. */
@media (min-width: 960px) {
  .site-head .wrap {
    display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: center;
    max-width: none; padding: 0;
  }
  .head-logo { justify-self: start; padding-left: max(40px, env(safe-area-inset-left, 0px)); }
  .site-nav { justify-self: center; }
  .nav-list { gap: clamp(24px, 2.6vw, 44px); }
}

/* ---------- Hero ---------- */
.hero { position: relative; margin-top: calc(-1 * var(--head-h)); }
.hero-grid { display: grid; }

.hero-media { position: relative; overflow: hidden; background: var(--night); width: 100%; }
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;   /* sama kuin FADE main.js:ssä */
}
.slide.is-active { opacity: 1; z-index: 1; }
.slide.is-leaving { opacity: 0; z-index: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
/* hengitys: hidas zoom, joka jatkuu myös häivytyksen ajan */
.slide.is-active img, .slide.is-leaving img { animation: drift 6.5s linear forwards; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.no-js .slide:first-child { opacity: 1; }
/* kuvalla terävät reunat joka puolella; vain kevyt sävytys ylhäällä, jotta navi erottuu */
.hero-media::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 20, 17, .38), rgba(15, 20, 17, 0));
}

.hero-brand {
  position: relative; z-index: 3;
  display: grid; justify-items: center; align-content: center; text-align: center;
  container-type: inline-size;
  padding: clamp(56px, 14vw, 96px) var(--gutter-r) clamp(80px, 18vw, 120px) var(--gutter);
}
.hero-logo { color: var(--cream); }
.hero-logo svg { width: min(52vw, 230px); height: auto; margin-inline: auto; }
.hero-lede {
  margin-top: 36px; padding-top: 36px; position: relative;
  font-family: var(--f-display); font-style: italic; font-weight: 300;
  /* aina kaksi riviä: koko skaalautuu tekstialueen leveyden mukaan (pisin rivi ≈ 10,6 × fonttikoko) */
  font-size: min(8.4cqi, 3.4rem); line-height: 1.14; letter-spacing: -.005em;
  width: 100%;
}
.hero-lede span { display: block; }
/* hiusviiva logon ja tekstin välissä */
.hero-lede::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 24px; background: var(--rule-strong);
}
.hero-place {
  margin-top: 22px;
  font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-soft);
}
.hero-place span { color: var(--brass); padding-inline: .5em; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

@media (max-width: 959px) {
  .hero-media { height: calc(100svh - env(safe-area-inset-top, 0px)); min-height: 520px; }
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    min-height: min(100svh, 1000px);
  }
  .hero-media { grid-column: 1; grid-row: 1; height: 100%; }
  .hero-brand {
    grid-column: 2; grid-row: 1;
    padding: calc(var(--head-h) + 40px) max(48px, env(safe-area-inset-right, 0px)) 72px 48px;
  }
  .hero-logo svg { width: clamp(200px, 17vw, 280px); }
}

/* ---------- Esittely ---------- */
.intro { position: relative; overflow: hidden; padding-block: clamp(80px, 11vw, 150px) clamp(40px, 5vw, 64px); }
/* iso himmeä kävymerkki taustalla */
.intro-mark {
  position: absolute; left: 50%; top: clamp(40px, 6vw, 90px); transform: translateX(-50%);
  width: min(130vw, 980px); height: auto; opacity: .045; pointer-events: none;
  --logo-body: var(--brass); --logo-scale: var(--brass); --logo-leg: var(--brass);
}
.intro-inner { position: relative; display: grid; gap: clamp(64px, 9vw, 120px); justify-items: center; text-align: center; }
.intro-copy { display: grid; gap: 26px; justify-items: center; }
.intro-statement {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.3rem, 1.5rem + 3vw, 4.6rem); line-height: 1.05; letter-spacing: -.012em;
  max-width: 19ch;
}
.intro-text { color: var(--cream-soft); max-width: 46ch; }

.spaces { display: grid; width: 100%; max-width: 1100px; }
.spaces li { display: grid; gap: 8px; justify-items: center; padding: 28px 0; border-top: 1px solid var(--rule); }
.spaces li:last-child { border-bottom: 1px solid var(--rule); }
.spaces h3 { font-family: var(--f-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 400; line-height: 1.1; }
.spaces p { color: var(--cream-soft); font-size: var(--t-sm); }
@media (min-width: 720px) {
  .spaces { grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--rule); }
  .spaces li, .spaces li:last-child { border: 0; padding: 40px 24px; }
  .spaces li:not(:first-child) { border-left: 1px solid var(--rule); }
}

/* ---------- Menu ---------- */
.menu { padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px); }

/* Menu konkreettisena korttina: kävyn karamellinruskea pohja, sisäkehys ja varjo.
   Kortin sisällä värimuuttujat määritellään uudelleen, joten kaikki osat sävyttyvät automaattisesti. */
.menu-card {
  --cream:       #2a1d15;   /* teksti kortilla */
  --cream-soft:  #46342a;   /* toissijainen teksti */
  --brass:       #4b2e1c;   /* hinnat ja korostukset */
  --rule:        rgba(42, 29, 21, .2);
  --rule-strong: rgba(42, 29, 21, .5);
  --logo-body: #44342d; --logo-scale: #e6d2b2; --logo-leg: #6e5646;
  position: relative;
  max-width: 1180px; margin-inline: auto;
  padding: clamp(40px, 6vw, 84px) clamp(22px, 6vw, 88px) clamp(36px, 5vw, 64px);
  color: var(--cream);
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 238, 210, .22), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(84, 54, 32, .22), transparent 60%),
    linear-gradient(165deg, #cbab83 0%, #bf9b71 55%, #b69168 100%);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7), 0 12px 30px -12px rgba(0, 0, 0, .45);
}
/* ohut sisäkehys kuin painetussa ruokalistassa */
.menu-card::before {
  content: ""; position: absolute; inset: clamp(8px, 1.2vw, 14px); pointer-events: none;
  border: 1px solid var(--rule-strong);
}
.menu-card :focus-visible { outline-color: var(--cream); }

.menu-head { display: grid; justify-items: center; gap: 8px; text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.menu-cone { width: clamp(56px, 7vw, 76px); height: auto; margin-bottom: 6px; }
.menu-head h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: var(--t-2xl); line-height: 1; letter-spacing: -.01em;
}
.menu-head p { font-family: var(--f-display); font-style: italic; font-size: var(--t-lg); color: var(--cream-soft); }

/* osiot: otsikot vasemmassa reunassa, avausmerkki oikealla */
.accordion { border-top: 1px solid var(--rule-strong); }
.acc { border-bottom: 1px solid var(--rule-strong); }
.acc summary {
  position: relative;
  display: grid; justify-items: start; text-align: left;
  padding: 20px 36px 20px 0; cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc-title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 500; line-height: 1.2; transition: color .3s; }
.acc-en { margin-top: 3px; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-soft); }
.acc-mark { position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.acc-mark::before, .acc-mark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1px; background: var(--cream);
  transition: transform .4s var(--ease);
}
.acc-mark::after { transform: rotate(90deg); }
.acc[open] .acc-mark::after { transform: rotate(0deg); }
.acc summary:hover .acc-title { color: var(--brass); }
.acc-body { padding: 0 0 26px; }
.acc-note { font-family: var(--f-display); font-style: italic; font-size: var(--t-lg); color: var(--brass); margin: 4px 0 6px; }

@supports (interpolate-size: allow-keywords) {
  .accordion { interpolate-size: allow-keywords; }
  .acc::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .5s var(--ease), content-visibility .5s allow-discrete;
  }
  .acc[open]::details-content { block-size: auto; }
}

/* Desktop: kaikki osiot auki kahdessa palstassa (main.js lisää .menu-static) */
@media (min-width: 960px) {
  .accordion.menu-static { columns: 2; column-gap: clamp(56px, 7vw, 112px); border-top: 0; }
  .menu-static .acc { break-inside: avoid; border-bottom: 0; margin-bottom: 44px; }
  .menu-static .acc summary {
    cursor: default; pointer-events: none;
    padding: 0 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--rule-strong);
  }
  .menu-static .acc-mark { display: none; }
  .menu-static .acc-body { padding-bottom: 0; }
}

/* tuoterivit: nimi … hinta, englanninkielinen nimi alla */
.items li {
  display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: baseline; column-gap: 10px;
  padding: 9px 0;
}
.items li::after {
  content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .42em;
  border-bottom: 1px dotted var(--rule-strong);
}
.item-name { grid-column: 1; grid-row: 1; font-weight: 400; min-width: 0; }
.tags { margin-left: .4em; font-size: var(--t-micro); letter-spacing: .1em; color: var(--brass); white-space: nowrap; }
.price {
  grid-column: 3; grid-row: 1;
  font-family: var(--f-display); font-size: 1.15em; font-weight: 600;
  font-variant-numeric: lining-nums; color: var(--brass); white-space: nowrap;
}
.item-en { grid-column: 1 / -1; font-family: var(--f-display); font-style: italic; font-size: var(--t-md); color: var(--cream-soft); line-height: 1.3; }
.items--names li { display: block; }
.items--names li::after { display: none; }
.items--names .item-en { display: block; }

.sizes {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding: 2px 0 14px; margin-bottom: 6px; border-bottom: 1px dotted var(--rule-strong);
}
.sizes div { display: flex; gap: 8px; align-items: baseline; }
.sizes dt { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-soft); }
.sizes dd { font-family: var(--f-display); font-size: 1.15em; font-weight: 600; color: var(--brass); }

.menu-foot { margin-top: 28px; text-align: center; color: var(--cream-soft); font-size: var(--t-xs); line-height: 1.8; }

/* ---------- Instagram ---------- */
.insta { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.insta-head { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.insta-head h2 { font-family: var(--f-display); font-weight: 300; font-size: var(--t-xl); line-height: 1; }
.insta-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  max-width: 1000px; margin-inline: auto;
}
.insta-grid a { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--moss); }
.insta-grid picture, .insta-grid img { width: 100%; height: 100%; }
.insta-grid img { object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
.insta-grid a:hover img { transform: scale(1.04); filter: brightness(.85); }
.insta-cta { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 48px); }
@media (min-width: 720px) { .insta-grid { gap: 12px; } }

/* ---------- Aukiolo & yhteystiedot ---------- */
.visit {
  padding-block: clamp(40px, 5vw, 64px) 0;
}
.visit-grid { display: grid; gap: clamp(80px, 10vw, 120px); justify-items: center; text-align: center; max-width: 1060px; }
.visit-grid > div { display: grid; justify-items: center; width: 100%; }
.visit h2 {
  margin: 6px 0 32px;
  font-family: var(--f-display); font-weight: 300;
  font-size: var(--t-xl); line-height: 1;
}

.hours-table { width: 100%; max-width: 320px; font-variant-numeric: lining-nums; }
.hours-table th, .hours-table td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 300; }
.hours-table tr:first-child th, .hours-table tr:first-child td { border-top: 1px solid var(--rule); }
.hours-table td { text-align: right; font-family: var(--f-display); font-size: 1.15em; font-weight: 500; }
.hours-table tr.is-closed td { color: var(--cream-soft); font-style: italic; font-weight: 400; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--brass); }
.hours-note { margin-top: 24px; color: var(--cream-soft); font-size: var(--t-sm); max-width: 34ch; }
.hours-note a { color: var(--cream); text-underline-offset: 4px; text-decoration-color: var(--rule-strong); }
.hours-note a:hover { color: var(--brass); }

.contact { display: grid; justify-items: center; gap: 30px; width: 100%; font-style: normal; }
.contact-addr {
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 400; line-height: 1.3;
  text-decoration: none;
  font-variant-numeric: lining-nums;
}
.contact-addr:hover { color: var(--brass); }
/* yhteystiedot 2 × 2 -ruudukkona hiusviivoin */
.contact-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; max-width: 440px;
  border-top: 1px solid var(--rule);
}
.contact-grid div {
  display: grid; gap: 6px; align-content: start; justify-items: center;
  padding: 20px 10px; border-bottom: 1px solid var(--rule);
}
.contact-grid div:nth-child(odd) { border-right: 1px solid var(--rule); }
.contact-grid dt { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-soft); }
.contact-grid dd { font-size: var(--t-sm); }
.contact-grid a { text-decoration: none; overflow-wrap: anywhere; }
.contact-grid a:hover { color: var(--brass); }

/* kartta: koko leveys, terävät reunat, sävytetty tummaan ilmeeseen */
.map {
  position: relative; margin-top: clamp(72px, 10vw, 120px);
  height: clamp(340px, 62vw, 520px);
  background: var(--moss);
}
.map iframe {
  display: block; width: 100%; height: 100%; border: 0;
  filter: invert(.9) hue-rotate(180deg) saturate(.35) brightness(.9) contrast(.92);
}
.map-link {
  position: absolute; left: var(--gutter); bottom: 20px;
  padding: 12px 18px; text-decoration: none;
  background: rgba(15, 20, 17, .86); border: 1px solid var(--rule-strong);
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.map-link:hover { color: var(--brass); border-color: var(--brass); }
@media (min-width: 720px) { .map-link { left: max(40px, env(safe-area-inset-left, 0px)); bottom: 28px; } }

@media (min-width: 960px) {
  .visit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0; max-width: 1100px; }
  .visit-grid > div { align-content: start; padding-inline: clamp(40px, 5vw, 80px); }
  .visit-grid > div + div { border-left: 1px solid var(--rule); }
  .hours-table, .contact-grid { max-width: 400px; }
  .contact { gap: 26px; }
}

/* ---------- Footer ---------- */
.site-foot {
  padding-block: clamp(40px, 6vw, 72px) max(32px, env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.foot-logo { display: block; width: fit-content; margin-inline: auto; color: var(--cream); }
.foot-logo svg { width: 120px; height: auto; }
.foot-row {
  display: grid; justify-items: center; gap: 14px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule);
  color: var(--cream-soft); font-size: var(--t-xs);
}
.foot-row ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.foot-row a { display: inline-block; padding: 6px 0; text-decoration: none; letter-spacing: .16em; text-transform: uppercase; font-size: var(--t-micro); }
.foot-row a:hover { color: var(--brass); }
@media (min-width: 960px) {
  .foot-row { grid-template-columns: 1fr auto; justify-items: start; text-align: left; }
}

/* ---------- Sisääntulot ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
  .js .reveal.is-pending { opacity: 0; transform: translateY(22px); }
  .js .hero-brand > * { animation: rise 1.1s var(--ease) both; }
  .js .hero-brand > :nth-child(2) { animation-delay: .12s; }
  .js .hero-brand > :nth-child(3) { animation-delay: .22s; }
  .js .hero-brand > :nth-child(4) { animation-delay: .3s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .slide img { transform: none; animation: none !important; }
}