/* Kirsikkapuisto — cafe-editorial theme (S4 editorial columns)
   Tokens: warm paper #FBF7F0 · espresso #3B2F2A (text)
           pistachio #CBDABB (decorative/background only — not AA-safe as text)
           rose #C98A7D (decorative/background only — not AA-safe as text)
           rose-text #A8574A / pistachio-text #4E7143 — AA-safe darkened variants for actual text
   Type: DM Serif Display (display, incl. italic) / Inter variable (body) */

@font-face {
  font-family: "DM Serif Display";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/dmserif-display-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/dmserif-display-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

:root {
  --paper: #FBF7F0;
  --paper-deep: #F4EEE2;
  --espresso: #3B2F2A;
  --espresso-soft: #5A4B43;
  --pistachio: #CBDABB;
  --pistachio-text: #4E7143;
  --rose: #C98A7D;
  --rose-text: #A8574A;
  --hairline: #E2D9C8;
  --display: "DM Serif Display", "Georgia", serif;
  --body: "Inter", "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }
@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(--espresso);
  background: var(--paper);
}

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

/* ---- draft banner ---- */
.draft-banner {
  display: block;
  background: var(--espresso);
  color: var(--paper);
  text-align: center;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  padding: 0.5rem 1rem;
}
.draft-banner:hover { background: #2A2118; }
.draft-banner strong { font-weight: 600; }

/* ---- hero (generous top margin, asymmetric column-breaking image) ---- */
.hero {
  padding-top: clamp(5rem, 11vw, 8.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.hero-grid {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  gap: 1rem;
}
.hero-copy { max-width: 34rem; }
.kicker {
  font-family: var(--body);
  font-variant-caps: all-small-caps;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--rose-text);
}
.hero-copy h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.25rem, 9vw, 5.75rem);
  line-height: 1;
  margin: 0.9rem 0 1.25rem;
  color: var(--espresso);
}
.lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--espresso-soft);
  max-width: 30ch;
  margin-bottom: 1.75rem;
}
.hero-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: 0.9375rem;
  margin-bottom: 2.25rem;
}
.hero-meta a { text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.hero-meta a:hover { text-decoration-color: var(--rose-text); }
.muted { color: var(--espresso-soft); font-size: 0.875rem; }
.cta {
  display: inline-block;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--espresso);
  border-bottom: 2px solid var(--rose);
  padding-bottom: 0.15rem;
}
.cta:hover { border-color: var(--rose-text); }

/* image breaks out of the column grid, bleeding toward the viewport edge */
.hero-figure {
  margin: 0 -3rem 0 0;
  transform: translateX(1.5rem);
}
.hero-figure svg { width: 100%; height: auto; display: block; }

/* ---- shared section shell ---- */
main section {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) 1.5rem;
  border-top: 1px solid var(--hairline);
}
.section-kicker { margin-bottom: 1rem; }
.page-num {
  font-family: var(--display);
  font-variant-caps: normal;
  font-style: italic;
  color: var(--espresso-soft);
  margin-right: 0.35rem;
}
.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  line-height: 1.25;
  max-width: 26ch;
  margin-bottom: 2.5rem;
  color: var(--espresso);
}

/* ---- tarina: editorial column with drop cap ---- */
.tarina-body { max-width: 42rem; }
.tarina-body p + p { margin-top: 1.1rem; }
.drop-cap::first-letter {
  font-family: var(--display);
  font-size: 4.5rem;
  line-height: 0.78;
  float: left;
  padding: 0.1rem 0.5rem 0 0;
  color: var(--rose-text);
}

/* ---- pull-quote (signature move) ---- */
.pull-quote {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.pull-quote p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.3;
  max-width: 30ch;
  margin: 0 auto 1rem;
  color: var(--espresso);
}
.pull-quote cite {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--espresso-soft);
}

/* ---- menu: editorial column with thin rules ---- */
.menu-list { list-style: none; max-width: 42rem; }
.menu-list li { padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); }
.menu-list li:first-child { border-top: 1px solid var(--hairline); }
.menu-row { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem; }
.menu-row h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--espresso);
}
.leader { flex: 1; border-bottom: 2px dotted var(--hairline); transform: translateY(-6px); }
.menu-list p { color: var(--espresso-soft); max-width: 36rem; }
.menu-note {
  margin-top: 1.75rem;
  max-width: 42rem;
  font-size: 0.9375rem;
  color: var(--espresso-soft);
  border-left: 3px solid var(--rose);
  padding: 0.15rem 0 0.15rem 1rem;
}

/* ---- galleria: asymmetric grid, one image breaks larger ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.5rem;
}
.gallery-grid figure { margin: 0; }
.gallery-large { grid-column: 1 / 3; grid-row: 1 / 3; }
.ph {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.gallery-large .ph { aspect-ratio: 16 / 10; }
.ph svg { width: 100%; height: 100%; display: block; }
.gallery-grid figcaption {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--espresso-soft);
}
.photo-note {
  margin-top: 2.5rem;
  max-width: 46rem;
  font-size: 0.9375rem;
  color: var(--espresso-soft);
  background: var(--paper-deep);
  border-left: 3px solid var(--pistachio-text);
  padding: 0.9rem 1.25rem;
}

/* ---- kaynti ---- */
.visit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.visit-block h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  color: var(--espresso);
}
.visit-block p + p { margin-top: 0.5rem; }
.text-link {
  color: var(--espresso);
  font-weight: 500;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}
.text-link:hover { text-decoration-color: var(--rose-text); }
.small { font-size: 0.9375rem; color: var(--espresso-soft); }

/* ---- footer ---- */
.footer {
  background: var(--pistachio);
  color: var(--espresso);
  text-align: center;
  padding: 3rem 1.5rem;
  font-size: 0.9375rem;
}
.footer p + p { margin-top: 0.35rem; }
.footer a { color: var(--espresso); font-weight: 600; text-underline-offset: 3px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-large { grid-column: 1 / 3; grid-row: auto; }
  .visit-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure {
    margin: 2.5rem auto 0;
    max-width: 16rem;
    transform: none;
  }
  .hero-copy { max-width: none; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-large { grid-column: 1; }
}