
:root{
 --bg:#f0ebe2;
 --paper:#f8f4ed;
 --paper2:#eee7dc;
 --ink:#1c1917;
 --muted:#7c736a;
 --line:#d8cec0;
 --wine:#6f2331;
 --wine2:#9b394b;
 --brass:#b58b54;
 --shadow:0 18px 44px rgba(63,46,35,.12);
}
*{box-sizing:border-box}
html,body{margin:0;background:
radial-gradient(circle at 12% 8%,rgba(111,35,49,.07),transparent 22%),
radial-gradient(circle at 88% 0%,rgba(181,139,84,.08),transparent 22%),
linear-gradient(180deg,#f4efe7,#ebe4d8);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
button,input{font:inherit}button{cursor:pointer}

.top{
 position:sticky;top:0;z-index:40;height:76px;
 display:grid;grid-template-columns:280px 1fr auto;align-items:center;gap:18px;
 padding:0 24px;background:rgba(248,244,237,.90);backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(80,59,43,.10)
}
.brand{display:flex;align-items:center;gap:12px}.mark{width:42px;height:42px;border-radius:50% 50% 46% 54%;background:
linear-gradient(135deg,var(--wine) 0 42%,transparent 42% 58%,var(--brass) 58%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 8px 18px rgba(72,44,34,.13)}
.brand strong{display:block;font-size:13px;letter-spacing:.08em}.brand span{display:block;font-size:9px;color:var(--muted);letter-spacing:.17em;margin-top:3px}
.top-center{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.filter{border:0;background:transparent;padding:10px 12px;border-radius:999px;color:#675f58;font-weight:700}.filter.active,.filter:hover{background:#eadfd3;color:var(--wine)}
.top-actions{display:flex;gap:8px;align-items:center}.top-actions input{width:190px;height:39px;border:1px solid var(--line);border-radius:999px;padding:0 14px;background:#fffaf4}
.ghost,.primary{border-radius:999px;padding:10px 14px;font-weight:750;border:1px solid var(--line)}.ghost{background:#fffaf4;color:#443c36}.primary{background:var(--wine);color:#fff;border-color:var(--wine)}
main{max-width:1720px;margin:auto;padding:28px 26px 90px}
.intro{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.eyebrow{display:block;color:var(--wine);font-size:10px;font-weight:800;letter-spacing:.18em}.intro h1{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:64px;line-height:.95;margin:4px 0 0;letter-spacing:-.05em}
.intro-meta{display:flex;gap:34px}.intro-meta div{display:grid;gap:2px}.intro-meta strong{font-family:Georgia,serif;font-size:28px}.intro-meta span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{position:relative;overflow:hidden;border-radius:18px;background:rgba(248,244,237,.78);border:1px solid rgba(80,59,43,.10);box-shadow:var(--shadow);min-height:360px;transition:.22s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(63,46,35,.16)}
.card canvas{display:block;width:100%;height:100%;min-height:360px;cursor:grab}.card canvas:active{cursor:grabbing}
.card .overlay{position:absolute;left:0;right:0;bottom:0;padding:72px 16px 15px;background:linear-gradient(transparent,rgba(28,25,23,.84));color:white;pointer-events:none}
.card .overlay span{display:block;font-size:9px;letter-spacing:.14em;opacity:.72}.card .overlay strong{display:block;margin-top:4px;font-size:17px}
.card .status{position:absolute;right:12px;top:12px;padding:6px 8px;border-radius:999px;background:rgba(248,244,237,.9);color:#4b433d;font-size:9px;font-weight:800;letter-spacing:.08em}
.card.featured{grid-column:span 6;min-height:520px}.card.featured canvas{min-height:520px}.card.large{grid-column:span 4;min-height:430px}.card.large canvas{min-height:430px}.card.medium{grid-column:span 3}.card.small{grid-column:span 3;min-height:320px}.card.small canvas{min-height:320px}
.gallery.wide .card{grid-column:span 6!important;min-height:500px}.gallery.wide .card canvas{min-height:500px}

.bottom-strip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;background:rgba(248,244,237,.90);backdrop-filter:blur(18px);border:1px solid rgba(80,59,43,.12);border-radius:999px;padding:8px 10px;box-shadow:0 14px 30px rgba(53,40,32,.18);display:flex;gap:18px}
.bottom-strip>div{display:flex;gap:5px;align-items:center}.bottom-strip span{font-size:10px;color:var(--muted);letter-spacing:.1em;margin:0 4px}.strip-btn{border:0;border-radius:999px;padding:8px 10px;background:transparent;color:#5f564f;font-weight:700;font-size:11px}.strip-btn.active,.strip-btn:hover{background:#e9ddd1;color:var(--wine)}

.lightbox{display:none;position:fixed;inset:0;background:rgba(21,16,14,.74);z-index:100;padding:24px}.lightbox.active{display:grid;place-items:center}.lightbox-inner{width:min(1460px,97vw);height:min(850px,94vh);display:grid;grid-template-columns:1fr 350px;background:#f6f1e8;border-radius:22px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.36);position:relative}
.close{position:absolute;right:14px;top:14px;z-index:5;width:40px;height:40px;border:0;border-radius:50%;background:#fff7ef;font-size:22px;color:#3d342e}
.viewer-zone{position:relative;background:radial-gradient(circle at center,rgba(155,57,75,.10),transparent 38%),linear-gradient(180deg,#ddd5ca,#cfc4b6)}
#viewer{width:100%;height:100%;display:block;cursor:grab}.viewer-actions{position:absolute;left:16px;bottom:16px;display:flex;gap:8px}.viewer-actions button{height:40px;min-width:40px;border:0;border-radius:999px;background:rgba(255,250,244,.92);font-weight:800;color:#302923}
.info-panel{padding:30px 24px;background:#f8f4ed;border-left:1px solid var(--line);overflow:auto}.info-panel h2{font-family:Georgia,serif;font-size:38px;font-weight:500;line-height:1;margin:7px 0 14px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}.chips span{padding:7px 9px;border-radius:999px;background:#ebe1d7;color:#675b53;font-size:10px;font-weight:700}
.specs{display:grid;gap:10px}.specs div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0}.specs span{font-size:11px;color:var(--muted);letter-spacing:.08em}.specs strong{font-size:12px}
.mini-title{display:block;margin:20px 0 10px;color:var(--wine);font-size:10px;font-weight:800;letter-spacing:.16em}.versions{display:flex;gap:7px;flex-wrap:wrap}.versions .mini-title{width:100%}.versions button{border:1px solid var(--line);background:#fffaf4;border-radius:999px;padding:8px 10px;font-size:11px}.versions button.active{background:var(--wine);color:white;border-color:var(--wine)}
.lb-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
@media(max-width:1250px){.top{grid-template-columns:1fr auto;height:auto;padding:11px 16px}.top-center{grid-column:1/-1;order:3;justify-content:flex-start}.top-actions input{display:none}.card.featured,.card.large{grid-column:span 6}.card.medium,.card.small{grid-column:span 4}.lightbox-inner{grid-template-columns:1fr}.info-panel{display:none}}
@media(max-width:800px){main{padding:20px 12px 100px}.intro{align-items:flex-start;flex-direction:column}.intro h1{font-size:50px}.intro-meta{gap:20px}.gallery{grid-template-columns:1fr}.card,.card.featured,.card.large,.card.medium,.card.small{grid-column:1!important;min-height:410px}.card canvas,.card.featured canvas,.card.large canvas,.card.medium canvas,.card.small canvas{min-height:410px}.bottom-strip{max-width:94vw;overflow:auto}.top-actions .ghost,.top-actions .primary{display:none}}
