:root {
  --ink: #3C3C3C;
  --muted: #7A7A7A;
  --paper: #FAF9F6;
  --card: #FFFFFF;
  --line: #E8E6DF;
  --accent: #F7DC8A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 "Bricolage Grotesque", system-ui, sans-serif;
}

a { color: inherit; }

header, main, footer { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

header { padding-top: 28px; padding-bottom: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
         font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.mark { width: 30px; height: 30px; }

h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -.02em; margin: 8px 0 28px; }
h2 { font-size: 20px; margin: 32px 0 8px; }

.grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid a { display: block; text-decoration: none; background: var(--card); border-radius: 14px;
          overflow: hidden; border: 1px solid var(--line); }
.grid a:hover { border-color: #CFCBBF; }
.grid img { display: block; width: 100%; height: auto; }
.grid .name { display: block; padding: 14px 16px 0; font-weight: 600; }
.grid .price { display: block; padding: 0 16px 14px; color: var(--muted); }

article { max-width: 760px; }
.crumbs { margin: 0; color: var(--muted); }
.photos { display: grid; gap: 16px; margin: 24px 0; }
.photos img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.copy ul { padding-left: 20px; }
.copy p { margin: 0 0 12px; }

.button { display: inline-block; background: var(--ink); color: #fff; text-decoration: none;
          padding: 12px 22px; border-radius: 10px; font-weight: 600; }
.button:hover { background: #222; }
.buy { margin: 24px 0; }

.more { margin-top: 56px; }

footer { margin-top: 72px; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--line); color: var(--muted); }