:root {
  --bg: #f3efe8;
  --ink: #1f1c19;
  --rust: #b44a2a;
  --rust-2: #8c3318;
  --mute: #6a6258;
  --line: #d7cfc3;
  --paper: #fffdf9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 1.7;
}
h1, h2, h3, .word, .huge { font-family: Fraunces, serif; }
img { width: 100%; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; }

.bar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 28px;
  background: rgba(243, 239, 232, 0.94);
  border-bottom: 1px solid var(--line);
}
.word { font-size: 20px; letter-spacing: 0.28em; }
nav { display: flex; gap: 16px; font-size: 13px; letter-spacing: 0.08em; }
nav a:hover { color: var(--rust); }
.lang { justify-self: end; display: flex; gap: 6px; }
.lang button {
  border: 1px solid var(--line);
  background: transparent;
  padding: 5px 10px;
  cursor: pointer;
  font: inherit;
}
.lang button.is-on { background: var(--ink); color: var(--bg); }

section { padding: 88px 8vw; }
.small { letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: var(--mute); }
h1 { font-size: clamp(42px, 7vw, 92px); line-height: 1.02; max-width: 16ch; font-weight: 400; margin: 24px 0; }
.lede { max-width: 62ch; font-size: 18px; color: var(--mute); }
.zero-row { display: flex; gap: 28px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.rust {
  background: var(--rust);
  color: #fff;
  padding: 14px 22px;
  display: inline-block;
}
.zero-row p { max-width: 42ch; color: var(--mute); font-size: 14px; }

.one, .four, .notes { display: grid; grid-template-columns: 160px 1fr; gap: 32px; }
.huge { font-size: 120px; line-height: 0.8; color: #e4ddd2; font-weight: 700; }
.rust-t { color: #ead3c8; }
.copy h2, .two h2, .five h2, .legal h2, .seven h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 18px; font-weight: 400; }
.copy p { margin-bottom: 16px; max-width: 70ch; }

.two { background: var(--paper); }
.type-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.type-list article { padding: 28px 24px 28px 0; border-top: 1px solid var(--line); }
.type-list h3 { font-size: 28px; margin-bottom: 8px; }

.three { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 0 0 0 0; }
.three figure img { height: 100%; min-height: 640px; filter: grayscale(0.35); }
.three .copy { padding: 72px 8vw 72px 0; }

.proto { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.proto h3 { font-size: 24px; }

.five { background: var(--ink); color: #f3efe8; }
.five h2 { color: #fff; }
.mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.mats div { border-top: 2px solid var(--rust); padding-top: 16px; }
.mats h3 { font-size: 26px; margin-bottom: 8px; }

.notes article { padding: 22px 0; border-top: 1px solid var(--line); }
.notes h3 { font-size: 24px; }

.legal { background: var(--paper); }
.legal dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
.legal dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust); }
.legal dd { font-size: 18px; }

.seven { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--mute); }
input, select, textarea, button {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
}
button[type="submit"] { background: var(--rust); color: #fff; border: 0; cursor: pointer; }
.note { color: var(--rust); }
.hours { margin-top: 16px; color: var(--mute); }

footer {
  padding: 24px 8vw 48px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--mute);
  border-top: 1px solid var(--line);
}

@media (max-width: 980px) {
  .one, .four, .notes, .three, .seven, .type-list, .proto, .mats, .legal dl, .bar {
    grid-template-columns: 1fr;
  }
  .bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
  .three figure img { min-height: 280px; }
  .three .copy { padding: 40px 20px; }
  section { padding: 56px 20px; }
  .huge { font-size: 72px; }
}