:root { color-scheme: light; --ink: #24352d; --paper: #f6f0e6; --line: #d9cdbb; --red: #9d2d22; --muted: #6e756e; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.site-header { padding: 58px 20px 42px; text-align: center; background: linear-gradient(180deg, #e5eadc 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 880px; margin: 0 auto; }
.eyebrow { margin: 0 0 12px; color: var(--red); font-size: 13px; letter-spacing: 3px; }
h1 { margin: 0; font-family: Georgia, "STSong", serif; font-size: clamp(36px, 6vw, 64px); font-weight: 700; letter-spacing: 4px; }
.intro { margin: 18px auto 0; max-width: 520px; color: #4f5a50; line-height: 1.8; }
.notice { display: inline-block; margin: 20px 0 0; padding: 8px 14px; color: var(--red); border: 1px solid #c98c7d; border-radius: 999px; font-size: 12px; }
.catalog { width: min(1180px, calc(100% - 32px)); margin: 34px auto 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.product { overflow: hidden; background: #fffdf9; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(65, 51, 34, .07); }
.product-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 17px 19px 14px; }
.product h2 { margin: 0; font-size: 18px; font-weight: 600; }
.product strong { flex: 0 0 auto; color: var(--red); font-family: Georgia, serif; font-size: 22px; }
.image-button { display: block; width: 100%; padding: 0; border: 0; background: #eee8dc; cursor: zoom-in; }
.image-button:focus-visible { outline: 3px solid #637c5d; outline-offset: -3px; }
.image-button img { display: block; width: 100%; height: auto; aspect-ratio: 0.707 / 1; object-fit: cover; }
.site-footer { padding: 26px 20px 40px; color: var(--muted); text-align: center; font-size: 12px; }
.lightbox { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 28px; background: rgba(20, 28, 23, .88); }
.lightbox[hidden] { display: none; }
.lightbox-image { max-width: min(94vw, 820px); max-height: 90vh; object-fit: contain; box-shadow: 0 12px 42px rgba(0,0,0,.35); }
.lightbox-close { position: fixed; top: 16px; right: 20px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: white; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }
@media (max-width: 700px) { .site-header { padding-top: 42px; } .catalog { grid-template-columns: 1fr; width: min(100% - 22px, 540px); gap: 18px; margin-top: 22px; } .product-meta { padding: 14px 15px 12px; } .product h2 { font-size: 16px; } .product strong { font-size: 20px; } .lightbox { padding: 12px; } }