:root {
  --cream: #f6efe2;
  --cream-deep: #efe4cf;
  --walnut: #3b2a1a;
  --walnut-soft: #5a4126;
  --gold: #c9a96a;
  --gold-deep: #b8955a;
  --gold-light: #f1d9a6;
  --tagline: #cdb07a;
  --price: #8a5a1c;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { background: var(--cream); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--walnut);
  font-family: var(--serif);
  line-height: 1.4;
  overflow-x: hidden;
}

a { color: inherit; }

.site-header {
  background: var(--walnut);
  color: var(--gold-light);
  text-align: center;
  padding: 2.2rem 16px 1.6rem;
  border-bottom: 4px double var(--gold-deep);
}

.site-name {
  margin: 0;
  font-weight: normal;
  font-style: italic;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: 0.04em;
}

.tagline {
  margin: 0.5rem 0 0;
  color: var(--tagline);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 16px 3rem;
}

.section-title {
  margin: 0 auto 1.5rem;
  max-width: 420px;
  padding: 0.45rem 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  text-align: center;
  font-weight: normal;
  font-size: 1.15rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.filters {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.filters a {
  flex: none;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.filters a:hover { background: var(--cream-deep); }

.filters a[aria-current="true"] {
  background: var(--walnut);
  border-color: var(--walnut);
  color: var(--cream);
}

.notice {
  margin: -0.75rem 0 1.75rem;
  text-align: center;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--walnut-soft);
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.75rem;
}

@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card[hidden] { display: none; }

.card a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
}

.frame {
  display: block;
  padding: 6px;
  margin-bottom: 0.5rem;
  background: var(--cream-deep);
  border: 3px double var(--gold-deep);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--cream);
}

.card a:hover .frame,
.card a:focus-visible .frame {
  border-color: var(--walnut-soft);
  box-shadow: 0 6px 18px rgba(59, 42, 26, 0.18);
}

.card a:hover .title { text-decoration: underline; text-decoration-color: var(--gold); }

.title { font-size: 1.02rem; }

.price {
  color: var(--price);
  font-weight: bold;
  font-size: 1.05rem;
}

.format {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--walnut-soft);
}

.empty {
  text-align: center;
  font-style: italic;
  font-size: 1.1rem;
  padding: 3rem 0;
}

.site-footer {
  background: var(--walnut);
  border-top: 4px double var(--gold-deep);
  text-align: center;
  padding: 1.5rem 16px;
}

.site-footer a {
  color: var(--gold-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

@media (max-width: 559px) {
  .filters { justify-content: flex-start; }
}

.site-name a { color: inherit; text-decoration: none; }

/* Item pages */

.crumbs {
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--walnut-soft);
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

.item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 720px) { .item { grid-template-columns: 1.1fr 1fr; } }

.item-photos .frame img { object-fit: contain; }

.thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.5rem;
}

.thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--gold);
  background: var(--cream-deep);
}

.thumbs a:hover img,
.thumbs a:focus-visible img { border-color: var(--walnut-soft); }

.item-title {
  margin: 0 0 0.5rem;
  font-weight: normal;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.25;
}

.item-price { margin: 0 0 0.4rem; font-size: 1.5rem; }

.item-info .format { margin: 0 0 1.25rem; }

.buy {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--walnut);
  border: 1px solid var(--gold-deep);
  color: var(--gold-light);
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.15s;
}

.buy:hover, .buy:focus-visible { background: var(--walnut-soft); }

.description {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gold);
  overflow-wrap: anywhere;
}

.description h2, .description h3, .description h4 { font-size: 1.05rem; font-weight: bold; }

.gone {
  text-align: center;
  padding: 1.5rem 0 2.5rem;
}

.gone h1 { font-weight: normal; font-style: italic; }

.description table { border-collapse: collapse; max-width: 100%; }
.description td, .description th { padding: 0.2rem 0.5rem; vertical-align: top; }