:root{--ink:#10191c;--lagoon:#0e3b43;--lagoon2:#14545e;--brass:#b8893b;--mist:#e4eae8;--paper:#f4f6f5;--card:#fff;--mute:#5d6b6e;--r:14px}
@media(prefers-color-scheme:dark){:root{--ink:#e9efee;--paper:#0c1416;--card:#122024;--mist:#21353a;--mute:#9db0b3;--lagoon:#d6e6e4;--lagoon2:#9fd0c9}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Figtree,system-ui,sans-serif}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque',Figtree,sans-serif;letter-spacing:-.02em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}h2{font-size:clamp(1.5rem,3vw,2.2rem)}a{color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,5vw,64px);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);z-index:5;border-bottom:1px solid var(--mist)}
.logo{font-size:1.5rem;font-weight:700;text-decoration:none}.logo b{color:var(--brass)}
.top nav{display:flex;gap:22px;font-weight:500}.top nav a{text-decoration:none;color:var(--mute)}.top nav a:hover{color:var(--ink)}
.wrap{padding:0 clamp(16px,5vw,64px);max-width:1280px;margin:auto}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:72px 0 48px}
.hero p{font-size:1.15rem;color:var(--mute);max-width:46ch}
.search{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:10px;background:var(--card);padding:10px;border-radius:var(--r);border:1px solid var(--mist);margin-top:28px}
.search select,.search input{border:0;background:transparent;font:inherit;color:inherit;padding:12px;min-width:0}
.stack{position:relative;height:420px}
.stack .tile{position:absolute;border-radius:var(--r);background:linear-gradient(150deg,var(--lagoon2),var(--lagoon));overflow:hidden}
.stack .t1{inset:0 90px 70px 0}.stack .t2{inset:80px 0 0 120px;border:6px solid var(--paper);background:linear-gradient(150deg,#d9c39a,var(--brass))}
.stack .lock{position:absolute;inset:auto 14px 14px auto;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:99px;font-weight:600;font-size:.9rem}
.stack img{width:100%;height:100%;object-fit:cover}.t2 img{filter:blur(14px) brightness(.85);transform:scale(1.15)}
.chips{display:flex;gap:8px;margin:12px 0 28px;flex-wrap:wrap}.chips a{padding:8px 18px;border-radius:99px;border:1px solid var(--mist);text-decoration:none;font-weight:500;background:var(--card)}
.chips a.on{background:var(--lagoon);color:var(--paper);border-color:var(--lagoon)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;padding-bottom:72px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;text-decoration:none;border:1px solid var(--mist);display:block;transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.ph{aspect-ratio:4/3;background:linear-gradient(150deg,var(--lagoon2),var(--lagoon));position:relative}.ph img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:12px;left:12px;background:var(--paper);color:var(--ink);font-weight:600;font-size:.8rem;padding:4px 12px;border-radius:99px}
.lk{position:absolute;right:12px;bottom:12px;background:rgba(16,25,28,.78);color:#fff;font-size:.82rem;padding:4px 12px;border-radius:99px}
.card .b{padding:16px 18px 20px}.price{font-family:'Bricolage Grotesque';font-size:1.4rem;font-weight:700}.price small{font-size:.85rem;color:var(--mute);font-family:Figtree;font-weight:400}
.mute,.muted{color:var(--mute)}.meta{display:flex;gap:14px;color:var(--mute);font-size:.92rem}
.detail{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;padding:32px 0 72px}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.gal .ph:first-child{grid-column:1/-1;aspect-ratio:16/9}.gal video{width:100%;grid-column:1/-1;border-radius:var(--r)}
.ph.locked{overflow:hidden}.ph.locked::after{content:"Locked";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:600;background:rgba(14,59,67,.55);backdrop-filter:blur(18px)}
.panel{background:var(--card);border:1px solid var(--mist);border-radius:var(--r);padding:24px;position:sticky;top:90px;align-self:start}
.f label{display:block;font-weight:500;margin:0 0 14px;font-size:.92rem}
.f input,.f select,.f textarea{display:block;width:100%;margin-top:6px;padding:12px;border-radius:10px;border:1px solid var(--mist);background:var(--paper);font:inherit;color:inherit}
.btn{background:var(--brass);color:#10191c;border:0;padding:13px 24px;border-radius:10px;font:600 1rem Figtree;cursor:pointer;text-decoration:none;display:inline-block}
.btn.alt{background:var(--lagoon);color:var(--paper)}.btn.sm{padding:6px 14px;font-size:.85rem}
.narrow{max-width:460px;margin:72px auto;padding:0 20px}.err{background:#fde7e4;color:#8a1c10;padding:10px 14px;border-radius:10px}.ok{background:#e1f3e6;color:#14532d;padding:10px 14px;border-radius:10px}
.foot{display:flex;justify-content:space-between;padding:32px clamp(16px,5vw,64px);border-top:1px solid var(--mist);color:var(--mute)}
.dash{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.side{background:var(--lagoon);color:#eaf2f1;padding:24px 16px}.side .logo{color:#fff;display:block;margin-bottom:24px}
.side a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;color:#c8dcda}.side a.on,.side a:hover{background:rgba(255,255,255,.1);color:#fff}
.main{padding:32px clamp(16px,3vw,40px);overflow-x:auto}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:20px 0}
.stat{background:var(--card);border:1px solid var(--mist);border-radius:var(--r);padding:18px}.stat b{display:block;font:700 1.8rem 'Bricolage Grotesque'}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;font-size:.93rem}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--mist);vertical-align:top}th{color:var(--mute);font-weight:500}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.tag{padding:2px 10px;border-radius:99px;background:var(--mist);font-size:.8rem}
@media(max-width:860px){.hero,.detail,.dash{grid-template-columns:1fr}.stack{height:260px}.search{grid-template-columns:1fr}.panel{position:static}.side{display:flex;overflow-x:auto;gap:6px}.side .logo{margin:0 12px 0 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}