:root {
  --ink: #252823;
  --muted: #6e7068;
  --paper: #f7f4ee;
  --line: #ded8ce;
  --green: #3f5142;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.site-header {
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 5vw, 74px);
  border-bottom: 1px solid var(--line);
}
.brand { font: 700 24px Georgia, serif; letter-spacing: -.5px; }
.brand span { font-weight: 400; }
nav { display: flex; gap: 34px; font-size: 14px; }
.site-header > .text-link { justify-self: end; }
.text-link { font-size: 14px; border-bottom: 1px solid currentColor; }
.hero {
  min-height: 690px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: stretch;
}
.hero-copy {
  align-self: center;
  padding: clamp(50px, 8vw, 120px);
  padding-right: clamp(40px, 6vw, 90px);
}
.eyebrow {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.05; }
h1 { margin: 0 0 28px; font-size: clamp(44px, 5.6vw, 82px); letter-spacing: -.035em; }
h2 { margin: 0 0 20px; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.025em; }
.hero-copy > p:not(.eyebrow) { max-width: 490px; color: var(--muted); font-size: 17px; }
.button {
  display: inline-block;
  margin-top: 24px;
  padding: 15px 23px;
  color: white;
  background: var(--green);
  font-size: 13px;
  letter-spacing: .04em;
}
.hero-art { min-height: 600px; overflow: hidden; }
.hero-art svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.intro { max-width: 780px; padding: 110px 40px 70px; margin: auto; text-align: center; }
.intro > p:last-child { max-width: 610px; margin: auto; color: var(--muted); }
.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 42px);
  padding: 20px clamp(24px, 5vw, 74px) 120px;
}
.product-art { aspect-ratio: .84; margin-bottom: 22px; display: grid; place-items: center; }
.product-art svg { width: 88%; height: 88%; }
.sage { background: #e6e7df; }
.sand { background: #e9dfd1; }
.clay { background: #e5d2c6; }
.product-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.product h3 { margin: 0; font: 400 21px Georgia, serif; }
.product span, .product p { color: var(--muted); font-size: 13px; }
.product p { max-width: 330px; margin: 10px 0 0; }
.journal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
  background: #d9d3c7;
}
.journal > div:first-child { align-self: center; max-width: 650px; padding: clamp(50px, 8vw, 120px); }
.journal p:not(.eyebrow) { color: #5f625c; }
.journal-art {
  min-height: 430px;
  background:
    linear-gradient(125deg, transparent 0 32%, rgba(255,255,255,.34) 32.2% 34%, transparent 34.2%),
    repeating-linear-gradient(88deg, #aeb0a1 0 2px, #c5c4b8 2px 7px);
}
footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding: 65px clamp(24px, 5vw, 74px) 32px;
  color: #ddd9d0;
  background: #2d322e;
  font-size: 13px;
}
footer strong { color: white; font-size: 14px; }
.copyright { grid-column: 1 / -1; padding-top: 35px; border-top: 1px solid #4e534e; }
@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero, .journal { grid-template-columns: 1fr; }
  .hero-copy { order: 2; }
  .hero-art { min-height: 440px; }
  .products { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .copyright { grid-column: auto; }
}