:root {
  --enamel: #f6f1e8;
  --mint: #2f7d6d;
  --tile: #d7efe8;
  --tomato: #c43c2c;
  --ink: #1f211c;
  --mute: #5c6158;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Karla, sans-serif;
  background: var(--enamel);
  color: var(--ink);
  line-height: 1.65;
}
.tiles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(47, 125, 109, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(47, 125, 109, 0.05) 1px, transparent 1px) 0 0 / 28px 28px;
}
.bar, main, footer { position: relative; z-index: 1; }
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px 5vw;
  background: #fff;
  border-bottom: 8px solid var(--mint);
  box-shadow: 0 8px 0 var(--tomato);
}
.logo {
  font-family: "Yeseva One", serif;
  font-size: 1.45rem;
  color: var(--mint);
  text-decoration: none;
}
.logo span { color: var(--tomato); }
#nav { display: flex; flex-wrap: wrap; gap: 8px 14px; }
#nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
#nav a:hover { color: var(--tomato); }
#menu {
  display: none; margin-left: auto;
  background: var(--tomato); color: #fff; border: 0;
  padding: 8px 14px; font: inherit; cursor: pointer;
}
.hero { padding: 64px 5vw 48px; max-width: 880px; }
.pin { color: var(--mint); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }
h1 { font-family: "Yeseva One", serif; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.1; margin: 12px 0 16px; }
h1 i { color: var(--tomato); font-style: normal; }
.lede { color: var(--mute); max-width: 62ch; margin-bottom: 22px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn, form button {
  background: var(--tomato); color: #fff; text-decoration: none;
  padding: 12px 18px; border: 0; font: inherit; font-weight: 700; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--mint); border: 3px solid var(--mint); }
.plates { list-style: none; display: grid; grid-template-columns: repeat(3, 160px); gap: 16px; margin-top: 36px; }
.plates b { display: block; font-family: "Yeseva One", serif; font-size: 2rem; color: var(--mint); }
.block { padding: 56px 5vw; }
.block.mint { background: var(--tile); }
.block.tomato { background: #f8e4df; }
h2 { font-family: "Yeseva One", serif; font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 16px; }
h3 { font-family: "Yeseva One", serif; font-size: 1.15rem; margin-bottom: 8px; }
.lead, .split p { color: var(--mute); margin-bottom: 14px; }
.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; }
.card, .grid3 article {
  background: #fff;
  padding: 18px;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--mint);
}
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid3 .chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  border: 3px solid var(--mint); background: #fff; padding: 8px 12px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.chips button.on { background: var(--mint); color: #fff; }
.grid3 article.hide { display: none; }
.card ul, .fine, .steps { margin-left: 18px; color: var(--mute); }
.steps li, .fine li { margin: 8px 0; }
.line { list-style: none; display: grid; gap: 12px; max-width: 70ch; }
.line li { padding: 12px 14px; background: #fff; border-left: 8px solid var(--tomato); }
details { padding: 12px 0; border-bottom: 3px solid rgba(31, 33, 28, 0.12); }
summary { cursor: pointer; font-weight: 700; }
.contact {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  padding: 56px 5vw; background: var(--mint); color: #f4fff9;
}
.contact a, a { color: #ffd2c8; }
.block a { color: var(--tomato); }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-weight: 700; }
input, select, textarea {
  border: 3px solid #fff; background: transparent; color: #fff;
  padding: 10px; font: inherit;
}
option { color: #111; }
footer { padding: 18px 5vw 32px; }
footer a { color: var(--tomato); }
@media (max-width: 900px) {
  .split, .grid3, .contact, .plates { grid-template-columns: 1fr; }
  #nav { display: none; width: 100%; flex-direction: column; }
  #nav.open { display: flex; }
  #menu { display: inline-block; }
}