:root {
  color-scheme: light;
  --ivory: #FDF5E9;
  --burgundy: #820503;
  --red: #AE090D;
  --gold: #EFC474;
  --gold-dark: #C97A2E;
  --ink: #2A2424;
  --muted: #6b5549;
  --line: #e5cba9;
  --serif: "Noto Serif", "Times New Roman", Times, serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 1rem/1.6 "Segoe UI", Arial, sans-serif; }
.shell { width: min(100% - 2rem, 73rem); margin-inline: auto; }
.top { display: flex; flex-direction: column; gap: .35rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.brand { color: var(--burgundy); font: bold 1.3rem var(--serif); display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 0 .85rem; }
nav a { font-size: .88rem; padding: .55rem 0; text-decoration: none; }
a { color: var(--burgundy); }
a:hover { color: var(--red); }
main { min-height: 60vh; padding-bottom: 3rem; }
h1, h2, h3 { color: var(--burgundy); font-family: var(--serif); line-height: 1.15; margin: 0 0 .7rem; }
h1 { font-size: clamp(2.35rem, 6.5vw, 5.5rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.75rem, 4vw, 3.1rem); letter-spacing: -.025em; }
h3 { font-size: 1.35rem; }
p { margin: .5rem 0 1rem; }
.hero { display: grid; align-items: center; gap: 1rem; padding: 2.4rem 0 1rem; }
.hero-copy > p:not(.eyebrow) { max-width: 37ch; color: var(--muted); }
.hero h1 span { color: var(--gold-dark); }
.hero-art { display: grid; place-items: center; }
.hero-art img { display: block; width: min(100%, 28rem); height: auto; }
.eyebrow { color: var(--burgundy); letter-spacing: .13em; font-weight: 700; font-size: .74rem; margin-bottom: .65rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.button, button {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
  border-radius: .25rem; padding: .55rem .95rem; text-decoration: none;
  font: inherit; font-weight: 650; border: 1px solid var(--burgundy);
  color: var(--ivory); background: var(--burgundy); cursor: pointer;
}
.button:hover, button:hover { color: white; background: var(--red); border-color: var(--red); }
.secondary { background: var(--ivory); color: var(--burgundy); border-color: var(--gold-dark); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; text-underline-offset: .24em; }
.collection { border-top: 1px solid var(--line); padding: 1.7rem 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .8rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.card, .panel, .empty { border: 1px solid var(--line); border-radius: .45rem; }
.card { overflow: hidden; }
.card-body, .panel, .empty { padding: 1rem; }
.photo { display: block; aspect-ratio: 4 / 5; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.label { display: inline-block; color: var(--burgundy); background: var(--gold); padding: .22rem .45rem; font-size: .72rem; font-weight: 750; margin: 0 .3rem .6rem 0; }
.label.archive, .label.demo { background: transparent; border: 1px solid var(--gold-dark); }
.muted { color: var(--muted); }
.price { color: var(--burgundy); font-weight: 700; }
.intro { padding: 2.8rem 0 1.2rem; }
.filters { display: flex; align-items: end; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.25rem; }
.filters label { flex: 1 1 9rem; }
label { display: grid; gap: .35rem; font-weight: 650; min-width: 0; }
input, select, textarea { width: 100%; padding: .55rem; background: #fffaf2; border: 1px solid var(--gold-dark); border-radius: .25rem; min-height: 44px; font: inherit; color: var(--ink); }
textarea { resize: vertical; }
.check { display: flex; align-items: center; }
.check input { width: 1.2rem; }
.narrow { max-width: 44rem; }
.narrow form, .editor { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.admin-list, .edit-images, .items { padding: 0; list-style: none; }
.admin-list li, .edit-images li { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.edit-images img { width: 4rem; height: 4rem; object-fit: cover; }
.edit-images [draggable] { cursor: grab; }
.edit-images .drag-target { border-bottom: 2px solid var(--burgundy); }
.detail { display: grid; gap: 1.3rem; }
.detail h1 { font-size: clamp(2rem, 5.5vw, 3.9rem); overflow-wrap: anywhere; }
.detail h2 { margin-top: 1.5rem; font-size: 1.65rem; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.gallery a:first-child { grid-column: 1 / -1; }
.gallery img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border-radius: .35rem; }
.gallery a:first-child img { aspect-ratio: 4 / 5; }
dialog { border: 1px solid var(--gold-dark); background: var(--ivory); max-width: 95vw; max-height: 95dvh; }
dialog::backdrop { background: #2a2424dd; }
dialog img { display: block; max-width: 100%; max-height: 75dvh; margin: .5rem auto 0; }
.items li { border-top: 1px solid var(--line); padding: .55rem 0; }
.items span { display: block; color: var(--muted); }
.preserve { white-space: pre-line; overflow-wrap: anywhere; }
footer { border-top: 1px solid var(--line); }
.about-lead { color: var(--burgundy); font-size: 1.2rem; font-weight: 700; }
.about h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin-top: 1.5rem; }
.floating-contact { display: none; }
@media (max-width: 47.999rem), (hover: none) and (pointer: coarse) {
  .has-floating-contact { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .floating-contact {
    position: fixed;
    right: calc(.75rem + env(safe-area-inset-right));
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    gap: .5rem;
  }
  .floating-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 3.25rem;
    min-height: 3rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: var(--burgundy);
    color: white;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 10px #0003;
  }
  .floating-contact a:last-child { background: #005bd3; }
}
.foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.3rem 0; }
:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 48rem) {
  .top { flex-direction: row; align-items: center; justify-content: space-between; }
  nav { gap: 1.4rem; }
  nav a { font-size: 1rem; }
  .hero { grid-template-columns: 1fr 1fr; padding: 3rem 0; }
  .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .collection { padding: 2.4rem 0; }
}

.filters label:first-child { flex-basis: 100%; }
.filter-actions { display: flex; align-items: center; gap: 1rem; min-height: 44px; }
.result-count { margin: -.4rem 0 .9rem; }
@media (min-width: 64rem) { .filters label:first-child { flex-basis: 14rem; } }
