:root {
  --paper: #f3efe4;
  --grid: #d5e0e6;
  --ink: #1b2a32;
  --mute: #5c6b73;
  --line: #2a5f78;
  --south: #b43b1a;
  --lamp: #e0b15a;
  --disp: "Playfair Display", Georgia, serif;
  --sans: "Raleway", system-ui, sans-serif;
  --mono: "Source Code Pro", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #cfc6b6;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  padding: 8px 12px;
  background: var(--south);
  color: #fff;
  z-index: 20;
}
.skip:focus { top: 10px; }

.sheet {
  margin: 18px auto;
  max-width: 1180px;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 10px 0 rgba(27, 42, 50, 0.18);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 28px;
  border-bottom: 2px solid var(--ink);
}
.brand b {
  display: block;
  font-family: var(--disp);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.brand small {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--line);
  letter-spacing: 0.12em;
}
.lang { display: flex; border: 1px solid var(--ink); }
.lang button {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
}
.lang button.is-on { background: var(--ink); color: var(--paper); }
.place {
  margin: 0 auto 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.tel {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--south);
  font-weight: 600;
}

.lead { padding: 36px 28px 12px; max-width: 920px; }
.rev {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--line);
}
h1 {
  margin: 0 0 16px;
  font-family: var(--disp);
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.05;
}
h1 span, h1 em { display: block; }
h1 em { font-style: italic; color: var(--south); }
.lead > p:last-child { margin: 0; color: var(--mute); font-size: 17px; }

.draw {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  padding: 12px 28px 36px;
  align-items: end;
}
.house {
  position: relative;
  padding: 28px 24px 12px;
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.35);
}
.north {
  position: absolute;
  top: 8px;
  left: 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--line);
}
.roof {
  height: 56px;
  margin: 12px 8% 0;
  background: linear-gradient(to top left, transparent 49.5%, var(--ink) 50%, var(--ink) 51.5%, transparent 52%),
    linear-gradient(to top right, transparent 49.5%, var(--ink) 50%, var(--ink) 51.5%, transparent 52%);
  background-size: 50% 100%, 50% 100%;
  background-repeat: no-repeat;
  background-position: left, right;
}
.storey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 8px 6%;
  padding: 12px 8px;
  border: 1.5px solid var(--ink);
  border-bottom: 0;
}
.storey.ground { border-bottom: 1.5px solid var(--ink); }
.win {
  min-height: 88px;
  border: 1.5px solid var(--ink);
  background: #e7eef1;
  cursor: pointer;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
}
.win i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--line); }
.win b { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.win.on, .win:hover { background: var(--lamp); }
.sill {
  margin: 0 6% 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.4em;
  border: 1.5px solid var(--ink);
  border-top: 0;
  padding: 6px;
  background: var(--ink);
  color: var(--paper);
}

.spec { padding: 8px 4px 0; }
.k {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--line);
}
.spec h2 {
  margin: 0 0 12px;
  font-family: var(--disp);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
}
.spec > p:nth-of-type(2) { margin: 0; color: var(--mute); }
.notes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.notes li {
  padding: 10px 12px;
  border-left: 4px solid var(--south);
  background: rgba(180, 59, 26, 0.08);
  font-size: 14px;
}

.plot {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-top: 2px solid var(--ink);
}
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
  filter: grayscale(0.35) contrast(1.05);
}
.map p { margin: 0; padding: 12px 16px; border-top: 1px solid var(--ink); }
.map a { color: var(--line); font-weight: 700; }
.block { padding: 28px; background: rgba(255, 255, 255, 0.4); }
.block h2 {
  margin: 0 0 14px;
  font-family: var(--disp);
  font-size: 28px;
}
.pins { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.pins span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.form .wide, .hint, .ok, .send { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 9px;
}
.send {
  border: 0;
  background: var(--south);
  color: #fff8f4;
  min-height: 48px;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.hint, .ok, .copy { margin: 8px 0 0; font-size: 13px; color: var(--mute); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}
.cluster a { color: var(--mute); }
.cluster a:hover { color: var(--south); }
.ask-k {
  margin: 18px 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--south);
}
.asks { margin: 0; padding: 0 0 0 18px; color: var(--mute); }
.asks li { margin: 4px 0; }
.legend, .revs, .who { padding: 32px 28px 36px; border-top: 2px solid var(--ink); }
.legend h2, .revs h2, .who h2 {
  margin: 0 0 12px;
  font-family: var(--disp);
  font-size: clamp(24px, 3.2vw, 34px);
}
.legend > p:nth-of-type(2) { color: var(--mute); max-width: 820px; }
.key { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; }
.key button {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
}
.key button i { grid-row: 1 / 3; font-style: normal; font-family: var(--mono); color: var(--line); align-self: center; }
.key button b { font-family: var(--disp); font-size: 16px; }
.key button span { grid-column: 2; color: var(--mute); font-size: 13px; }
.key button.on, .key button:hover { background: var(--lamp); }
.clouds, .neighbours { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.clouds { grid-template-columns: repeat(3, 1fr); }
.clouds article {
  padding: 16px;
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.45);
}
.clouds p:first-child, .neighbours b {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--south);
}
.clouds h3 { margin: 6px 0 10px; font-family: var(--disp); font-size: 20px; }
.clouds p:last-child { margin: 0; color: var(--mute); font-size: 14px; }
.neighbours li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink);
}
.neighbours span { color: var(--mute); }
.lid-lead { margin: 0 0 14px; color: var(--mute); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 980px) {
  .sheet { margin: 0; border: 0; box-shadow: none; }
  .draw, .plot, .form, .clouds { grid-template-columns: 1fr; }
  .bar, .lead, .draw, .legend, .revs, .who, .cluster { padding-left: 16px; padding-right: 16px; }
  .place { display: none; }
  .tel { flex: 1 1 100%; }
  .map iframe { min-height: 240px; }
  .win { min-height: 72px; }
  h1 { font-size: 26px; }
}