:root {
  --ink: #1f1712;
  --mute: #6a5848;
  --paper: #f1e6ce;
  --gold: #c9a24a;
  --soil: #3b271c;
  --leaf: #4e6a34;
  --clay: #8a4a28;
  --serif: "Bona Nova", "Times New Roman", serif;
  --sans: "Mulish", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--soil); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.skip { position: absolute; left: 10px; top: -40px; padding: 8px; background: var(--gold); z-index: 5; }
.skip:focus { top: 10px; }

.quilt {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1fr 1fr;
  min-height: 100dvh;
}
.cell { min-height: 50dvh; overflow: auto; }
.deed { padding: 28px 32px 24px; background: var(--paper); }
.map { position: relative; background: #2a2018; }
.ban { padding: 28px 32px; background: var(--leaf); color: #e8f0d8; }
.slip { padding: 24px 28px; background: #fff8ea; }

header { display: grid; gap: 8px; }
.lang { justify-self: start; display: flex; border: 2px solid var(--ink); }
.lang button { border: 0; background: transparent; padding: 5px 10px; cursor: pointer; font-family: var(--mono); font-size: 11px; }
.lang button.is-on { background: var(--ink); color: var(--paper); }
.k { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); }
.addr { margin: 0; color: var(--mute); }
.warn {
  margin: 16px 0;
  padding: 8px 10px;
  background: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
.deed > p { margin: 0 0 16px; max-width: 42rem; }
.crops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crops button {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  text-align: left;
  border: 1px solid rgba(31, 23, 18, 0.2);
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
}
.crops button.on, .crops button:hover { background: var(--soil); color: var(--paper); }
.crops b { font-family: var(--serif); font-size: 22px; }

.map iframe { width: 100%; height: 100%; min-height: 50dvh; border: 0; display: block; filter: sepia(0.4); }
.pin {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  background: var(--paper);
  font-weight: 700;
}

.ban .k { color: #d4e8a8; }
.ban ul { margin: 12px 0 20px; padding: 0; list-style: none; }
.ban li { font-family: var(--serif); font-size: clamp(22px, 3vw, 32px); padding: 8px 0; border-bottom: 1px solid rgba(232, 240, 216, 0.25); }

.now { font-family: var(--serif); font-size: 22px; margin: 8px 0 12px; }
.pins { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 16px; font-family: var(--mono); font-size: 13px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
.form .wide, .hint, .ok, .send { grid-column: 1 / -1; }
.form input, .form select, .form textarea { border: 1px solid #d3c4a6; background: #fffdf6; padding: 8px; }
.send { border: 0; background: var(--soil); color: var(--paper); min-height: 44px; font-weight: 700; cursor: pointer; }
.hint, .ok, .copy { margin: 6px 0 0; font-size: 12px; color: var(--mute); }

@media (max-width: 980px) {
  .quilt { grid-template-columns: 1fr; grid-template-rows: none; }
  .cell { min-height: 0; }
  .map iframe { min-height: 280px; }
  .form { grid-template-columns: 1fr; }
}