:root {
  color-scheme: light;
  --paper: #f8f5ed;
  --ink: #1b2d29;
  --accent: #a13d28;
  --muted: #52615b;
  --rule: #c5c9bc;
  --serif: "Songti SC", "STSong", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 84rem;
  min-height: 100svh;
  padding: 0 clamp(1.25rem, 6vw, 6rem);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
}

a { color: inherit; }
a:focus-visible { outline: .15rem solid var(--accent); outline-offset: .3rem; }

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 1.75rem;
  letter-spacing: -.08em;
  text-decoration: none;
}

.wordmark span, h1 span, footer span, .details strong { color: var(--accent); }

.nav-link {
  font-family: var(--mono);
  font-size: .85rem;
  text-underline-offset: .25em;
}

main {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3.5rem, 9vw, 8rem) 0;
}

.eyebrow, .sample-note {
  font-family: var(--mono);
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .08em;
}

h1 {
  margin: .5em 0 .32em;
  font-size: clamp(2.5rem, 5.4vw, 5.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.summary { max-width: 27rem; font-size: 1.15rem; line-height: 1.8; }
.action { display: inline-flex; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--accent); text-decoration: none; }
.action:hover, .nav-link:hover { color: var(--accent); }

.sample {
  padding: clamp(1.25rem, 5vw, 3.25rem);
  border: 1px solid #b7c5b5;
  border-left: .32rem solid #759382;
  background: #e2eadc;
}

.sample p {
  margin: .65em 0;
  font: clamp(2rem, 4vw, 4rem)/1.16 Georgia, serif;
  letter-spacing: -.045em;
}

.sample em { color: #345f4e; }

.details { padding: 0; list-style: none; max-width: 27rem; }
.details li { border-top: 1px solid var(--rule); padding: .75rem 0; }
.details strong { margin-right: 1em; font: .82rem var(--mono); }

footer { padding: 1.4rem 0; border-top: 1px solid var(--rule); font: .8rem var(--mono); color: var(--muted); }

@media (max-width: 46rem) {
  main { grid-template-columns: 1fr; }
}