*{box-sizing:border-box}
:root{color-scheme:dark;--accent:#a678ff;--bg:#0d0d17;--text:#f4f1f7;--muted:#b7b3c1;--border:#ffffff22;--panel:#ffffff06}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav{display:flex;background:color-mix(in srgb,var(--bg),#000 24%);border-color:var(--border)}
.brand{display:flex;align-items:center;font-weight:950;font-size:1.5rem;letter-spacing:-.04em;line-height:.95;gap:12px}
.brand i{display:block;width:27px;height:26px;background:linear-gradient(90deg,var(--accent) 40%,transparent 40%,transparent 55%,var(--accent) 55%);transform:skew(-22deg);flex:none}
.nav nav{display:flex;gap:20px;font-size:.9rem;color:var(--muted)}
.nav nav a:hover,.back:hover,.card h3 a:hover{color:var(--accent)}
main,footer{width:min(100% - 52px,1380px);margin-inline:auto}
main{padding-block:25px 55px}
.hero-row{display:grid;gap:15px}
.hero{position:relative;min-height:380px;display:flex;align-items:center;isolation:isolate;overflow:hidden;background:#21212c}
.hero img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:center 45%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#110e19 0%,#110e19d9 24%,#110e1960 60%,transparent);z-index:-1}
.hero-copy{padding:clamp(24px,5vw,72px);max-width:650px}
.eyebrow,.category{display:inline-block;color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(2.4rem,5.1vw,5.4rem);line-height:.95;letter-spacing:-.06em;margin:13px 0 17px}
.hero p,.featured p,.detail p{color:var(--muted);margin-bottom:22px;max-width:40ch}
.primary,.secondary,.unavailable{display:inline-block;padding:9px 14px;border-radius:6px;font-size:.88rem;font-weight:800;white-space:nowrap}
.primary{background:var(--accent);color:#141019;border:1px solid var(--accent)}
.primary:hover{filter:brightness(1.16)}
.secondary,.unavailable{border:1px solid var(--border)}
.secondary:hover{border-color:var(--accent)}
.unavailable{color:var(--muted)}
.featured{padding:26px;background:var(--panel);border:1px solid var(--border);align-content:center}
.featured h2{line-height:1.12;margin:10px 0;font-size:clamp(1.3rem,2vw,2rem)}
#catalog{scroll-margin-top:20px;margin-top:24px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.section-head h2{font-size:clamp(1.45rem,3vw,2.25rem);letter-spacing:-.04em}
.search{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.84rem}
input,select,textarea{background:#0003;color:var(--text);border:1px solid var(--border);border-radius:5px;padding:8px 10px;min-width:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.filters button,.admin button:not(.primary){border:1px solid var(--border);background:transparent;color:var(--text);padding:6px 12px;border-radius:5px}
.filters button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.cards{display:grid;gap:14px}
.card{overflow:hidden;border:1px solid var(--border);background:var(--panel);display:grid;grid-template-rows:auto 1fr auto}
.cover img,.detail img{display:block;width:100%;object-fit:cover}
.cover img{aspect-ratio:2.5}
.card-copy{padding:13px 15px}
.card h3{font-size:1.22rem}
.card p{font-size:.87rem;color:var(--muted);margin-top:3px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 15px 15px}
footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;padding-block:18px;font-size:.86rem;font-weight:800;color:var(--muted)}
footer span{font-weight:400}
.back{display:inline-block;color:var(--muted);margin-bottom:18px}
.detail{display:grid;gap:25px}
.detail img{max-height:500px}
.detail h1{font-size:clamp(2rem,4vw,4rem)}
.grid .nav{position:fixed;inset:0 auto 0 0;width:215px;padding:30px 21px;border-right:1px solid var(--border);flex-direction:column;gap:45px}
.grid .brand span{max-width:96px}
.grid .nav nav{flex-direction:column;gap:10px}
.grid .nav nav a{padding:9px 12px;border-radius:5px;background:var(--panel)}
.grid{padding-left:215px}
.grid .hero-row{grid-template-columns:minmax(0,2.25fr) minmax(200px,1fr)}
.grid .hero img{object-position:right center}
.grid .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid .card,.grid .hero,.grid .featured{border-radius:8px}
.archive{--text:#fff0dd;--muted:#cebdb1;font-family:"Source Sans 3",Arial,sans-serif}
.archive .nav{justify-content:space-between;align-items:center;padding:18px max(26px,calc((100% - 1380px)/2));border-bottom:1px solid var(--border)}
.archive .brand{text-transform:uppercase;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;letter-spacing:.015em;font-size:1.8rem}
.archive .brand i{transform:none;clip-path:polygon(0 14%,30% 14%,36% 0,72% 0,78% 18%,100% 18%,91% 100%,7% 100%);background:var(--accent)}
.archive main{padding-top:0}
.archive .hero{margin-inline:calc(-1 * max(26px,(100vw - 1380px)/2));min-height:430px}
.archive .hero-copy{margin-left:max(0px,calc((100vw - 1380px)/2));padding-left:26px}
.archive .hero img{object-position:right center}
.archive .hero::after{background:linear-gradient(90deg,#170e09 5%,#170e09ed 27%,#170e0970 56%,transparent 80%)}
.archive h1,.archive h2,.archive h3{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;text-transform:uppercase;letter-spacing:0}
.archive h1{max-width:8ch}
.archive .featured{display:none}
.archive .card{grid-template:1fr / minmax(135px,245px) 1fr auto;align-items:center;border-width:1px 0 0;background:transparent;padding:10px 0}
.archive .card:last-child{border-bottom-width:1px}
.archive .actions{padding:0}
.archive .primary,.archive .secondary,.archive .unavailable{border-radius:2px}
.admin-main{max-width:1000px}
.admin-main h1{font-size:clamp(2rem,5vw,3.5rem)}
.admin-main section{padding:18px;margin-top:16px;border:1px solid var(--border);border-radius:7px}
.admin-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(205px,100%),1fr));align-items:end;gap:10px;padding:14px 0;border-bottom:1px solid var(--border)}
.admin-row label{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:.85rem}
.admin-row input[type=checkbox]{align-self:start}
.admin-row textarea{resize:vertical}
.admin section>button{margin-top:12px}
.save{background:var(--bg);position:sticky;bottom:0;padding-block:12px}
.save p{margin-top:5px}
@media(min-width:850px){.detail{grid-template-columns:1.2fr 1fr;align-items:center}}
@media(max-width:1080px){.grid .hero-row{grid-template-columns:1fr}.grid .featured{display:none}}
@media(max-width:790px){
  main,footer{width:calc(100% - 32px)}
  .grid{padding-left:0}
  .grid .nav,.archive .nav{position:static;width:auto;flex-direction:row;justify-content:space-between;align-items:center;padding:15px 16px;gap:10px;border-bottom:1px solid var(--border)}
  .grid .brand span{max-width:none}
  .grid .nav nav{flex-direction:row;gap:8px}
  .grid .nav nav a{padding:5px}
  .archive .hero{margin-inline:-16px;min-height:370px}
  .archive .card{grid-template-columns:minmax(90px,150px) 1fr}
  .archive .actions{grid-column:2;padding-left:15px}
}
@media(max-width:510px){
  .grid .cards{grid-template-columns:1fr}
  .grid .brand,.archive .brand{font-size:1.18rem}
  .section-head{align-items:start;flex-direction:column;gap:6px}
  .hero{min-height:340px}
  footer{gap:10px}
}
