/* Layout: one long, light page of fresh greens on pale pink. Portrait and pop-up lead, then dining, experiences, retreats, journal, contact. */
:root {
  --bg: #fbeceb;          /* light pink */
  --bg-raise: #f4d8d6;    /* deeper blush */
  --fg: #1b3526;          /* deep herb green */
  --fg-soft: #4f6a58;     /* muted green */
  --terracotta: #2d6a43;  /* accent green (button, highlights) */
  --rose: #a4506a;        /* label pink */
  --line: #e2bdbb;
  --on-accent: #fbeceb;
  --display: "Instrument Serif", "Times New Roman", serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13241a; --bg-raise: #1d3527; --fg: #f8dedb; --fg-soft: #b3c7b8;
    --terracotta: #8fcc9f; --rose: #eaa9b8; --line: #2f4e3b; --on-accent: #13241a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #13241a; --bg-raise: #1d3527; --fg: #f8dedb; --fg-soft: #b3c7b8;
  --terracotta: #8fcc9f; --rose: #eaa9b8; --line: #2f4e3b; --on-accent: #13241a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.6; padding-inline: 20px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.wrap { max-width: 1040px; margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0; text-wrap: balance; }
.label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
p { margin: 0; max-width: 62ch; }

header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.mark { font-family: var(--display); font-size: 26px; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
nav a { text-decoration: none; color: var(--fg-soft); padding-block: 4px; }
nav a:hover { color: var(--fg); }
nav a[aria-current="page"] { color: var(--fg); box-shadow: 0 2px 0 var(--terracotta); }
section.first { border-top: 0; }
main { min-height: 60vh; }

.hero { padding-block: clamp(28px, 6vw, 64px) clamp(36px, 7vw, 72px); display: grid; gap: clamp(24px, 5vw, 56px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 4px; }
.intro { display: grid; gap: 28px; min-width: 0; }
.hero h1 { font-size: clamp(48px, 8.5vw, 104px); letter-spacing: -.02em; }
.hero h1 em { color: var(--terracotta); font-style: italic; padding-inline: .06em; }
.hero .sub { font-size: clamp(32px, 5vw, 48px); font-style: italic; margin-top: 22px; color: var(--rose); }
.hero .lead { margin-top: 12px; font-size: 19px; color: var(--fg-soft); }
.ticket { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 4px; padding: 22px; display: grid; gap: 14px; }
.ticket dl { margin: 0; display: grid; gap: 12px; }
.ticket dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
.ticket dd { margin: 2px 0 0; font-size: 17px; }
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--terracotta); color: var(--on-accent); font-weight: 600; text-decoration: none; padding: 13px 20px; border-radius: 3px; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; gap: 10px; }

section { padding-block: clamp(48px, 8vw, 88px); border-top: 1px solid var(--line); display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
section h1, section h2 { font-size: clamp(36px, 6vw, 60px); margin-top: 10px; }
.body { display: grid; gap: 18px; align-content: start; min-width: 0; }
.body p { color: var(--fg-soft); }
.body p.big { color: var(--fg); font-size: 20px; }

.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 4px; margin-top: 8px; }
.creds div { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-right: -1px; margin-bottom: -1px; }
.creds b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.creds span { font-size: 13px; color: var(--fg-soft); }

.list { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.list li { padding-block: 13px; border-top: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; align-items: baseline; }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list small { color: var(--fg-soft); font-size: 14px; text-align: right; }

.food { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 38%; border-radius: 4px; }
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 36px; }
.menu h3 { font-size: 28px; font-style: italic; color: var(--rose); margin: 22px 0 6px; }
.menu > div > h3:first-child { margin-top: 0; }
.dish li { gap: 16px; }
.dish li span { min-width: 0; }
.dish small { color: var(--fg); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.poster summary { cursor: pointer; color: var(--terracotta); font-weight: 600; padding-block: 8px; }
.poster img { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 12px; border-radius: 4px; }

.supper { background: var(--bg-raise); border-radius: 4px; padding: 24px; display: grid; gap: 18px; }
.supper .course { display: grid; gap: 4px; }
.supper .course + .course { border-top: 1px solid var(--line); padding-top: 18px; }
.supper .course p { color: var(--fg); font-family: var(--display); font-size: 24px; line-height: 1.25; }

.journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.journal article { background: var(--bg-raise); border-radius: 4px; padding: 20px; display: grid; gap: 10px; align-content: start; min-height: 150px; }
.journal h3 { font-size: 26px; }
.journal .label { color: var(--terracotta); }

.wa { font-family: var(--display); font-size: clamp(32px, 7vw, 54px); letter-spacing: -.01em; overflow-wrap: anywhere; }
.socials { display: flex; gap: 20px; font-size: 15px; }
.socials a { color: var(--fg); text-underline-offset: 4px; }
.foot-name { font-family: var(--display); font-size: 28px; line-height: 1.1; color: var(--fg); }
footer { align-items: end; border-top: 1px solid var(--line); padding-block: 26px 40px; font-size: 13px; color: var(--fg-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 760px) {
  .hero, section { grid-template-columns: minmax(0, 1fr); }
  .hero { align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise .8s ease both; }
  .hero > *:nth-child(2) { animation-delay: .15s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }