:root {
  --paper: #f2eee5;
  --ink: #292822;
  --muted: #777367;
  --wine: #765548;
  --olive: #7c8867;
  --field: #b6aa70;
  --hill: #a5a77e;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Avenir, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 2.3rem clamp(1.5rem, 5vw, 5.5rem) 2rem;
  display: flex;
  flex-direction: column;
}

.topline {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--muted);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.topline-rule { width: 2.5rem; height: 1px; background: #b9b2a3; }

.language-switch {
  position: absolute;
  top: 2.25rem;
  right: clamp(1.5rem, 5vw, 5.5rem);
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #aaa397;
  font-size: .68rem;
  letter-spacing: .12em;
}

.language-button {
  border: 0;
  padding: .2rem;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
}

.language-button.is-active { color: var(--ink); }
.language-button:focus-visible { outline: 1px solid var(--wine); outline-offset: 4px; }

.hero {
  position: relative;
  z-index: 2;
  width: min(39rem, 100%);
  margin: 13vh 0 auto clamp(1rem, 8vw, 9rem);
  animation: arrive 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.eyebrow {
  margin: 0 0 1.4rem;
  color: var(--wine);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Iowan Old Style, Baskerville, Georgia, serif;
  width: max-content;
  max-width: none;
  font-size: clamp(3.1rem, 9vw, 8.7rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .93;
  white-space: nowrap;
}

.place {
  margin: 2rem 0 0;
  color: var(--ink);
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  letter-spacing: .02em;
}

.place span { padding: 0 .45rem; color: #a99f8b; }

.landscape { position: absolute; inset: auto 0 0; height: 32%; min-height: 17rem; }
.sun { position: absolute; right: 18%; top: 8%; width: clamp(5rem, 11vw, 9rem); aspect-ratio: 1; border-radius: 50%; background: #d6bd77; opacity: .5; animation: breathe 9s ease-in-out infinite; }
.hill { position: absolute; right: -8%; left: -8%; border-radius: 50% 50% 0 0 / 35% 35% 0 0; }
.hill-back { bottom: 17%; height: 61%; background: var(--hill); transform: rotate(-2deg); }
.hill-middle { bottom: 2%; height: 61%; background: var(--olive); transform: rotate(3deg); }
.hill-front { bottom: -35%; height: 70%; background: #927765; transform: rotate(-4deg); }
.field-lines { position: absolute; inset: 31% 0 auto; z-index: 1; width: 100%; height: 70%; fill: none; stroke: #d8c98d; stroke-width: 2; opacity: .46; }

.vineyard-art { position: absolute; z-index: 3; right: -3%; bottom: -1%; width: 72%; height: 88%; overflow: visible; opacity: .8; transform-origin: 65% 100%; animation: vineyard-sway 12s ease-in-out infinite; }
.vine-row .post path { fill: none; stroke: #596048; stroke-width: 3; stroke-linecap: round; }
.stock .trunk { fill: none; stroke: #6b4b3c; stroke-width: 5; stroke-linecap: round; }
.stock .cane { fill: none; stroke: #596048; stroke-width: 3; stroke-linecap: round; }
.stock .leaf { fill: #63734f; stroke: #596048; stroke-width: 1; }
.stock .fruit circle { fill: #694743; stroke: #513835; stroke-width: 1; }
.stocks { animation: stocks-sway 10s ease-in-out infinite; transform-origin: center bottom; }
.vine-row .wire { fill: none; stroke: #6d704e; stroke-width: 1.5; opacity: .8; }
.vine-row .branch { fill: none; stroke: #596048; stroke-width: 3; stroke-linecap: round; }
.vine-row .tendril { fill: none; stroke: #596048; stroke-width: 2; stroke-linecap: round; opacity: .9; }
.leaf-cluster { transform-origin: center; animation: leaves-breathe 7s ease-in-out infinite; }
.leaf-cluster path { fill: #63734f; stroke: #596048; stroke-width: 1; }
.grapes { transform-origin: center; animation: grapes-sway 8s ease-in-out infinite; }
.grapes circle { fill: #694743; stroke: #513835; stroke-width: 1; }
.field-lines { animation: fields-drift 18s ease-in-out infinite alternate; transform-origin: center; }

@keyframes arrive { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.04); opacity: .58; } }
@keyframes vineyard-sway { 0%, 100% { transform: rotate(-.25deg); } 50% { transform: rotate(.35deg) translateY(-1px); } }
@keyframes stocks-sway { 0%, 100% { transform: skewX(-.1deg); } 50% { transform: skewX(.25deg); } }
@keyframes leaves-breathe { 0%, 100% { transform: rotate(-.2deg); } 50% { transform: rotate(.8deg); } }
@keyframes grapes-sway { 0%, 100% { transform: rotate(-.3deg); } 50% { transform: rotate(.6deg); } }
@keyframes fields-drift { from { transform: translateX(-.4%); } to { transform: translateX(.4%); } }

@media (max-width: 600px) {
  .page-shell { padding-top: 1.5rem; }
  .language-switch { top: 1.45rem; }
  .topline { font-size: .58rem; }
  .hero { width: 100%; margin: auto 0 38vh; text-align: center; }
  h1 { margin-inline: auto; }
  .landscape { height: 30%; min-height: 15rem; }
  .vineyard-art { right: -25%; width: 112%; height: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}