/* Pikkala Taverna — kaiseki-quiet theme, adapted from sushi/Japanese
   fine dining to Finnish catering/tilaisuuspalvelu (second use of the theme).
   Tokens: deep indigo #16283C · rice white #F7F6F1 · sumi ink #242220
           wine accent #7A2E3A (swapped from the theme's vermilion — a
           muted burgundy reads calmer for Finnish catering than a
           stamp-red hanko accent) · hairline #DCD8CF
   Type swapped per the theme's own non-Japanese fallback: Cormorant
   Garamond (display) / Figtree (body). The vertical writing-mode text
   accent (Japanese-specific device) is replaced with a plain kicker label
   and a small stamp-like "PT" monogram. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --indigo: #16283C;
  --indigo-deep: #0F1D2C;
  --rice: #F7F6F1;
  --paper: #FDFCF9;
  --ink: #242220;
  --wine: #7A2E3A;
  --gray: #6B6862;
  --on-indigo-muted: #B7C1CC;
  --hairline: #DCD8CF;
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Figtree", "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

/* ---- hero entrance: quiet one-time rise on load, opt-in only. Default
   (no media query matched, e.g. headless/screenshot/Lighthouse renders
   that don't run animations to completion) is full opacity — the
   animation never gates visibility. A version that applied `animation:
   rise ... both` unconditionally was tried and dropped: `both` fill mode
   holds the 0%-opacity "from" state before the animation starts, so any
   render that doesn't execute the animation (a static screenshot taken
   immediately on load) shows the hero copy and stamp mark as nearly
   invisible. See the shared note in anja-rajala's styles.css for the
   same lesson applied to scroll-linked animation. ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: rise 0.9s ease-out both; }
  .hero-mark { animation: rise 0.9s 0.15s ease-out both; }
}

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

body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--rice);
}

a { color: inherit; }
a:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

/* ---- draft banner ---- */
.draft-banner {
  display: block;
  background: var(--wine);
  color: #FBEFEF;
  text-align: center;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
}
.draft-banner:hover { background: #612430; }

/* ---- hero: asymmetric editorial grid ---- */
.hero {
  position: relative;
  background: var(--indigo);
  color: var(--rice);
  overflow: hidden;
}
.hero-grid {
  position: relative;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7.5rem) 1.5rem clamp(5rem, 11vw, 8.5rem);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: 2rem;
}
.hero-copy { max-width: 34rem; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-indigo-muted);
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}
.lede {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.6;
  color: #E4E7EA;
  margin-bottom: 1.75rem;
}
.cta {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--indigo);
  background: var(--rice);
  padding: 0.8rem 1.6rem;
  border-radius: 2px;
}
.cta:hover { background: #FFFFFF; }

/* ---- stamp-like logo mark (signature move, replaces the vertical
   Japanese writing-mode accent) ---- */
.hero-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.5rem, 7vw, 5.5rem);
  height: clamp(4.5rem, 7vw, 5.5rem);
  border: 1px solid var(--on-indigo-muted);
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  color: var(--rice);
}
.hairline-rule {
  width: 1px;
  height: 4.5rem;
  background: var(--on-indigo-muted);
  opacity: 0.5;
}

/* ---- shared section shell ---- */
main section {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.section-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 0.9rem;
}
.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.25;
  max-width: 30ch;
  margin-bottom: 2.5rem;
}

/* ---- tarina: asymmetric editorial columns ---- */
.tarina { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }
.tarina-body h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  line-height: 1.35;
  margin-bottom: 1.5rem;
  max-width: 32ch;
}
.tarina-body { max-width: 40rem; }
.tarina-body p { color: #4A4741; }
.tarina-body p + p { margin-top: 1rem; }

/* ---- palvelut: spare two-column list, dotted leaders ---- */
.palvelut { border-top: 1px solid var(--hairline); }
.section-intro {
  max-width: 40rem;
  margin-bottom: 2.5rem;
  color: var(--gray);
}
.palvelu-list { list-style: none; max-width: 44rem; }
.palvelu-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
}
.palvelu-list li:first-child { border-top: 1px solid var(--hairline); }
.palvelu-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.375rem;
  white-space: nowrap;
}
.leader {
  flex: 1;
  border-bottom: 2px dotted #C9C5B9;
  transform: translateY(-4px);
}
.palvelu-note {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray);
  white-space: nowrap;
}
.menu-note {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--gray);
}

/* ---- galleria: hairline-framed images ---- */
.galleria { border-top: 1px solid var(--hairline); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.gallery-grid figure { margin: 0; }
.ph {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ph picture { display: block; width: 100%; height: 100%; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-grid figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--gray);
}
.photo-note {
  margin-top: 2.5rem;
  max-width: 44rem;
  font-size: 0.9375rem;
  color: #4A4741;
  background: var(--paper);
  border-left: 3px solid var(--wine);
  padding: 0.9rem 1.25rem;
}

/* ---- yhteystiedot ---- */
.yhteystiedot { border-top: 1px solid var(--hairline); }
.yhteys-lede { max-width: 40rem; color: var(--gray); margin-bottom: 2.5rem; }
.yhteys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.yhteys-block h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 0.6rem;
}
.yhteys-block p + p { margin-top: 0.5rem; }
.text-link {
  color: var(--indigo);
  font-weight: 600;
  text-decoration-color: #C9C5B9;
  text-underline-offset: 3px;
}
.text-link:hover { text-decoration-color: var(--wine); }
.small { font-size: 0.9375rem; color: var(--gray); }

/* ---- footer ---- */
.footer {
  background: var(--indigo-deep);
  color: var(--on-indigo-muted);
  text-align: center;
  padding: 3rem 1.5rem;
  font-size: 0.9375rem;
}
.footer-mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--rice);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer a { color: var(--rice); text-underline-offset: 3px; }
.footer p + p { margin-top: 0.35rem; }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .yhteys-grid { grid-template-columns: 1fr; }
  .tarina { grid-template-columns: 1fr; gap: 0; }
  .tarina .section-label { margin-bottom: 0.9rem; }
}
@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-mark { flex-direction: row; justify-content: flex-start; gap: 1rem; margin-top: 2rem; }
  .hairline-rule { width: 4.5rem; height: 1px; }
  .palvelu-list li { flex-wrap: wrap; }
  .leader { display: none; }
}