:root {
  --ca-ink: #1c1a17;
  --ca-ink-soft: #5b554d;
  --ca-paper: #fbf9f5;
  --ca-paper-tint: #f2ede4;
  --ca-line: #ddd5c8;
  --ca-accent: #7a5c3e;
  --ca-measure: 68ch;
  --ca-gap: 1.5rem;
  --ca-serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, serif;
  --ca-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ca-paper);
  color: var(--ca-ink);
  font: 400 1.0625rem/1.65 var(--ca-serif);
  -webkit-text-size-adjust: 100%;
}

.ca-shell { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.75rem); }

.ca-masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ca-gap); padding: 1.75rem 0; border-bottom: 1px solid var(--ca-line);
}
.ca-masthead__brand {
  font: 600 1.25rem/1 var(--ca-serif); letter-spacing: .015em;
  color: var(--ca-ink); text-decoration: none;
}
.ca-masthead__links { display: flex; gap: 1.5rem; font: 400 .9375rem/1 var(--ca-sans); }
.ca-masthead__links a { color: var(--ca-ink-soft); text-decoration: none; }
.ca-masthead__links a:hover { color: var(--ca-accent); }

.ca-band { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.ca-band--tint { background: var(--ca-paper-tint); }

.ca-stack > * + * { margin-top: var(--ca-gap); }
.ca-lede { font-size: clamp(1.375rem, 3.2vw, 2rem); line-height: 1.25; max-width: 24ch; margin: 0; }
.ca-rule { border: 0; border-top: 1px solid var(--ca-line); margin: 2.5rem 0; }

.ca-shelf {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.ca-shelf__item { margin: 0; }

.ca-card { display: block; color: inherit; text-decoration: none; }
.ca-card__cover {
  display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border: 1px solid var(--ca-line); background: var(--ca-paper-tint);
}
.ca-card__title { font: 600 1.0625rem/1.3 var(--ca-serif); margin: .875rem 0 .25rem; }
.ca-card__price { font: 400 .875rem/1 var(--ca-sans); color: var(--ca-ink-soft); }

.ca-buy {
  display: inline-block; padding: .8125rem 1.75rem; border: 1px solid var(--ca-ink);
  background: var(--ca-ink); color: var(--ca-paper); text-decoration: none;
  font: 500 .9375rem/1 var(--ca-sans); cursor: pointer;
}
.ca-buy--ghost { background: transparent; color: var(--ca-ink); }

.ca-prose { max-width: var(--ca-measure); }
.ca-prose h2 { font: 600 1.375rem/1.3 var(--ca-serif); margin: 2.25rem 0 .75rem; }
.ca-prose p { margin: 0 0 1.125rem; }
.ca-prose ul { margin: 0 0 1.125rem 1.25rem; padding: 0; }

.ca-meta { font: 400 .875rem/1.5 var(--ca-sans); color: var(--ca-ink-soft); }

.ca-notice {
  border: 1px solid var(--ca-line); background: var(--ca-paper-tint);
  padding: 1.125rem 1.375rem; font: 400 .9375rem/1.55 var(--ca-sans);
}

.ca-form { display: grid; gap: 1rem; max-width: 34rem; }
.ca-field { display: grid; gap: .375rem; font: 400 .9375rem/1 var(--ca-sans); }
.ca-field input, .ca-field textarea {
  font: inherit; padding: .6875rem .8125rem; border: 1px solid var(--ca-line);
  background: #fff; color: var(--ca-ink);
}

.ca-colophon {
  border-top: 1px solid var(--ca-line); margin-top: 4rem; padding: 2.5rem 0 3.5rem;
  font: 400 .875rem/1.6 var(--ca-sans); color: var(--ca-ink-soft);
}
.ca-colophon a { color: var(--ca-ink-soft); }
.ca-colophon__legal { margin-top: 1.5rem; font-size: .8125rem; }

@media (prefers-reduced-motion: no-preference) {
  .ca-card__cover { transition: opacity .18s ease; }
  .ca-card:hover .ca-card__cover { opacity: .88; }
}