:root {
  color-scheme: light;
  --paper: #f7f5ee;
  --ink: #23261e;
  --muted: #53564b;
  --line: #d8d6c9;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}
.shop { width: min(800px, calc(100% - 36px)); margin: 0 auto; padding: 46px 0 64px; }
.shop-header { text-align: center; margin-bottom: 40px; }
.shop-header img { display: block; margin: 0 auto 11px; }
.shop-header h1 { font: 400 clamp(47px, 9vw, 91px)/.97 var(--serif); letter-spacing: -.035em; margin: 0; }
.shop-header p { font-size: clamp(14px, 2.4vw, 17px); color: var(--muted); margin: 11px 0 0; }
.section-heading { display: flex; align-items: center; gap: 15px; margin: 0 0 15px; }
.section-heading::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.section-heading h2 { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 3vw, 24px); }
.tile { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); background: #fdfbf4; }
.tile:focus-visible { outline: 2px solid #8f6c27; outline-offset: 4px; }
.tile-photo { aspect-ratio: 1; background: #e8e3d6; overflow: hidden; }
.tile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .24s ease; }
.tile:hover .tile-photo img { transform: scale(1.035); }
.tile-copy { position: relative; display: grid; gap: 4px; padding: 14px 36px 15px 13px; }
.tile-name { font: 400 clamp(21px, 4.8vw, 36px)/.98 var(--serif); letter-spacing: -.015em; }
.tile:hover .tile-name { text-decoration: underline; text-underline-offset: .13em; }
.tile-description { color: var(--muted); font-size: clamp(11px, 2.3vw, 13px); }
.tile-arrow { position: absolute; right: 12px; top: 13px; font-size: 17px; }
@media (max-width: 420px) {
  .shop { padding-top: 34px; }
  .shop-header { margin-bottom: 32px; }
  .tile-copy { padding-left: 9px; padding-right: 23px; }
  .tile-arrow { right: 7px; top: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-photo img { transition: none; }
  .tile:hover .tile-photo img { transform: none; }
}