:root {
  --ink: #171715;
  --paper: #f6f1e7;
  --cream: #fffdf8;
  --muted: #6d6b63;
  --line: rgba(23, 23, 21, .16);
  --accent: #ef6d42;
  --accent-dark: #b84222;
  --green: #1f583e;
  --shadow: 0 18px 50px rgba(29, 27, 20, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px clamp(20px,5vw,72px); background:rgba(246,241,231,.93); border-bottom:1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display:flex; align-items:center; gap:12px; letter-spacing:.02em; }
.brand small { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; margin-top:2px; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--ink); border-radius:50%; font-weight:900; font-size:.77rem; letter-spacing:-.05em; }
.header-nav { display:flex; align-items:center; gap:22px; color:#37362f; font-size:.9rem; }
.mobile-menu { display:none; border:1px solid var(--line); border-radius:999px; background:transparent; padding:9px 14px; }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); min-height:690px; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:96px clamp(22px,7vw,110px); }
.eyebrow { margin:0 0 16px; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family: Georgia, 'Times New Roman', serif; letter-spacing:-.055em; line-height:.95; }
h1 { max-width:760px; margin-bottom:24px; font-size:clamp(3.3rem,7vw,7.4rem); }
h2 { margin-bottom:14px; font-size:clamp(2.4rem,5vw,5rem); }
.hero-text { max-width:650px; color:#555148; line-height:1.75; font-size:1.07rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:0 18px; border:1px solid transparent; border-radius:999px; font-size:.87rem; font-weight:800; letter-spacing:.04em; transition:.22s ease; }
.button:hover { transform:translateY(-2px); }
.button-accent { color:white; background:var(--accent); box-shadow:0 10px 22px rgba(239,109,66,.25); }
.button-accent:hover { background:var(--accent-dark); }
.button-dark { color:white; background:var(--ink); }
.button-dark:hover { background:#383630; }
.button-small { min-height:38px; padding:0 14px; font-size:.76rem; }
.button-ghost, .button-outline { border-color:var(--line); background:transparent; }
.button-ghost:hover,.button-outline:hover { background:rgba(255,255,255,.5); }
.hero-art { position:relative; min-height:610px; overflow:hidden; background:var(--green); }
.hero-art::before { content:""; position:absolute; inset:-25%; background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px, transparent 1px 22px); transform:rotate(8deg); }
.frame { position:absolute; display:grid; place-items:center; padding:18px; border:12px solid #dcbf91; outline:2px solid rgba(0,0,0,.35); color:white; text-align:center; font-family:Georgia,serif; text-transform:uppercase; letter-spacing:.12em; box-shadow:var(--shadow); }
.frame::after { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.55); }
.frame-one { left:8%; top:10%; width:42%; height:52%; background:linear-gradient(145deg,#e55e3f,#9a3022 52%,#171715); transform:rotate(-6deg); font-size:2.1rem; }
.frame-two { right:4%; top:25%; width:43%; height:56%; background:linear-gradient(30deg,#1c2526,#c8ae78 53%,#ef6d42); transform:rotate(8deg); font-size:1.22rem; writing-mode:vertical-rl; }
.frame-three { left:18%; bottom:-5%; width:46%; height:36%; background:linear-gradient(150deg,#f0cc80,#376c55 65%,#182b25); transform:rotate(3deg); font-size:1.3rem; }
.hero-stamp { position:absolute; right:8%; bottom:7%; display:grid; place-items:center; width:124px; height:124px; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:white; text-align:center; text-transform:uppercase; letter-spacing:.14em; font-size:.65rem; transform:rotate(-12deg); }
.hero-stamp strong { font-family:Georgia,serif; font-size:1.45rem; letter-spacing:.03em; }
.collection-shell { padding:90px clamp(18px,5vw,74px) 100px; }
.collection-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:34px; }
.section-note { max-width:720px; margin-bottom:0; color:var(--muted); line-height:1.65; }
.catalog-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; white-space:nowrap; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#d6a52c; box-shadow:0 0 0 4px rgba(214,165,44,.15); }
.catalog-status.is-ready .status-dot { background:#3d966c; box-shadow:0 0 0 4px rgba(61,150,108,.15); }
.catalog-status.is-error .status-dot { background:#c84234; box-shadow:0 0 0 4px rgba(200,66,52,.15); }
.toolbar { display:grid; grid-template-columns:minmax(250px,1fr) minmax(170px,230px) minmax(180px,240px) auto; gap:10px; padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,248,.65); }
.search-box,.select-box { display:flex; align-items:center; gap:8px; min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:var(--cream); }
.search-box input,.select-box select { width:100%; border:0; outline:0; color:var(--ink); background:transparent; }
.collection-meta { display:flex; justify-content:space-between; gap:16px; padding:20px 2px 12px; color:var(--muted); font-size:.88rem; }
.collection-meta p { margin:0; }
.text-button { border:0; color:var(--accent-dark); background:transparent; font-weight:800; font-size:.85rem; }
.art-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.art-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--cream); transition:.25s ease; }
.art-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.art-image-button { position:relative; display:block; width:100%; padding:0; border:0; overflow:hidden; background:#e8e0d2; aspect-ratio:1/1; }
.art-image { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.art-card:hover .art-image { transform:scale(1.055); }
.image-overlay { position:absolute; right:12px; bottom:12px; padding:8px 11px; border-radius:999px; color:white; background:rgba(23,23,21,.78); font-size:.72rem; font-weight:800; opacity:0; transform:translateY(6px); transition:.23s ease; }
.art-card:hover .image-overlay,.art-image-button:focus-visible .image-overlay { opacity:1; transform:translateY(0); }
.art-card-body { padding:16px; }
.art-artist { min-height:16px; margin-bottom:7px; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; font-weight:800; }
.art-title { min-height:48px; margin-bottom:16px; font-family:Georgia,serif; font-size:1.16rem; line-height:1.12; }
.art-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); }
.art-price { font-size:.94rem; }
.art-link { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; color:white; background:var(--ink); transition:.2s ease; }
.art-link:hover { background:var(--accent); transform:rotate(9deg); }
.empty-state { margin:24px 0; padding:34px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; background:rgba(255,253,248,.55); }
.empty-state strong,.empty-state span { display:block; }
.empty-state strong { margin-bottom:8px; color:var(--ink); }
.load-more-wrap { display:flex; justify-content:center; padding-top:28px; }
.about { display:grid; grid-template-columns:minmax(260px,.75fr) 1.25fr; gap:40px; padding:95px clamp(20px,5vw,74px); color:white; background:var(--ink); }
.about .eyebrow { color:#f69270; }
.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.about article { padding-top:16px; border-top:1px solid rgba(255,255,255,.24); }
.about article span { color:#f69270; font-size:.72rem; letter-spacing:.15em; }
.about h3 { margin-top:28px; margin-bottom:9px; font-family:Georgia,serif; font-size:1.35rem; }
.about p { color:rgba(255,255,255,.67); line-height:1.7; font-size:.9rem; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:26px clamp(20px,5vw,74px); color:#555148; background:#eee6d7; font-size:.82rem; }
.site-footer p { margin:7px 0 0; }
.site-footer a { color:var(--accent-dark); font-weight:800; }
.art-modal { width:min(880px,calc(100vw - 28px)); padding:0; border:0; border-radius:22px; overflow:hidden; color:var(--ink); background:var(--cream); box-shadow:0 25px 90px rgba(0,0,0,.33); }
.art-modal::backdrop { background:rgba(13,16,13,.72); backdrop-filter:blur(4px); }
.art-modal[open] { display:grid; grid-template-columns:1.05fr .95fr; }
.modal-close { position:absolute; z-index:2; top:12px; right:12px; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; color:white; background:rgba(23,23,21,.78); font-size:1.7rem; line-height:1; }
.modal-image-wrap { min-height:520px; background:#e8e0d2; }
.modal-image-wrap img { width:100%; height:100%; object-fit:cover; }
.modal-content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:34px; }
.modal-content h2 { font-size:clamp(2.2rem,5vw,4rem); }
.modal-content p:not(.eyebrow):not(.modal-price) { color:var(--muted); line-height:1.65; }
.modal-price { margin:2px 0 18px; font-weight:900; font-size:1.2rem; }
.skeleton { min-height:335px; border-radius:18px; background:linear-gradient(100deg,#eae2d5 20%,#f9f5ed 42%,#eae2d5 64%); background-size:200% 100%; animation:skeleton 1.35s infinite linear; }
@keyframes skeleton { to { background-position:-200% 0; } }
@media (max-width:1100px) { .art-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .toolbar { grid-template-columns:1fr 1fr; } .search-box { grid-column:1/-1; } }
@media (max-width:780px) { .site-header { padding:12px 16px; } .header-nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:16px; background:var(--paper); border-bottom:1px solid var(--line); } .header-nav.is-open { display:flex; } .mobile-menu { display:block; } .hero { grid-template-columns:1fr; min-height:auto; } .hero-copy { padding:74px 22px 50px; } .hero-art { min-height:430px; } .collection-shell { padding:68px 14px 70px; } .collection-heading { display:block; } .catalog-status { margin-top:18px; } .toolbar { grid-template-columns:1fr; } .search-box { grid-column:auto; } .art-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .art-title { min-height:42px; font-size:1rem; } .art-card-body { padding:12px; } .about { grid-template-columns:1fr; padding:70px 20px; } .about-grid { grid-template-columns:1fr; gap:8px; } .site-footer { display:block; padding:24px 20px; } .site-footer a { display:inline-block; margin-top:14px; } .art-modal[open] { display:block; } .modal-image-wrap { min-height:300px; max-height:52vh; } }