@import url("./styles/buttons.css");
@import url('styles/base.css');
:root { --luna:#ab91f2; }
.top { position:relative; }
.top .wrap { max-width:1320px; flex-wrap:wrap; padding-block:14px; }
.top nav { flex-wrap:wrap; gap:12px 24px; }
.top nav a[aria-current=page] { color:var(--paper); }
.top nav a:hover { text-decoration:underline; text-underline-offset:7px; }
.logo img { width:24px; height:24px; }
.wrap { max-width:1320px; }
.skip { position:absolute; left:12px; top:-70px; z-index:100; background:var(--paper); color:var(--night); padding:12px; }
.skip:focus { top:8px; }
.catalog-hero { padding-block:64px 38px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; }
h1 { font:400 clamp(33px,5.5vw,66px)/1.12 var(--px); letter-spacing:-.045em; margin:16px 0 22px; }
h2 { font-weight:500; line-height:1.2; }
.intro { color:var(--dim); max-width:59ch; margin:0; }
.roster-count { text-align:right; font:11px var(--px); color:var(--dim); padding-bottom:8px; }
.roster-count strong { display:block; font-size:66px; color:var(--paper); font-weight:400; letter-spacing:-.07em; }
.catalog-tabs { display:flex; gap:28px; border-bottom:1px solid var(--rule); margin:0 0 26px; }
.catalog-tabs a { text-decoration:none; padding:15px 0; font:11px var(--px); color:var(--dim); text-transform:uppercase; }
.catalog-tabs a[aria-current=page] { color:var(--paper); box-shadow:0 2px var(--paper); }
.controls { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin-bottom:28px; }
.field { display:grid; gap:8px; }
.field label, label.field, .field-title { font:11px/1.5 var(--px); text-transform:uppercase; letter-spacing:.04em; color:var(--dim); }
.controls .field:first-child { flex:1; min-width:190px; }
input,select,textarea { background:var(--deck); border:1px solid var(--rule); border-radius:0; color:var(--paper); padding:13px; font:16px/1.4 var(--sans); min-width:0; max-width:100%; }
input[type=search] { width:100%; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--paper); outline-offset:2px; }
button:disabled { opacity:.5; cursor:default; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.companion { --accent:var(--dim); background:var(--deck); border:1px solid var(--rule); position:relative; min-width:0; }
.companion.live { border-top:2px solid var(--accent); }
.card-heading { padding:17px 20px; display:flex; justify-content:space-between; gap:12px; font:11px var(--px); color:var(--accent); text-transform:uppercase; }
.art-panel { height:330px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 70%); }
.art-panel::before { content:''; position:absolute; inset:20px; border:1px solid color-mix(in srgb,var(--accent) 12%,transparent); border-radius:50% 50% 0 0; }
.art-panel img { width:100%; height:100%; object-fit:contain; object-position:center top; position:relative; transition:transform .3s; }
.live:hover .art-panel img { transform:scale(1.025); }
body[data-gallery="gallery"] .art-panel img { transform:scale(2); transform-origin:center top; }
body[data-gallery="gallery"] .live:hover .art-panel img { transform:scale(2.05); }
.card-copy { padding:22px; border-top:1px solid var(--rule); }
.card-copy h2 { font:400 22px var(--px); margin:0 0 12px; text-transform:uppercase; }
.card-copy p { color:var(--dim); font-size:15px; margin:0 0 18px; min-height:48px; }
.tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:24px; }
.tags span { font:11px/1.4 var(--px); border:1px solid var(--rule); padding:6px 8px; color:var(--dim); }
.card-copy .btn { width:100%; }
.sealed { min-height:280px; background:linear-gradient(135deg,transparent 45%,#ffffff02 45%,#ffffff02 55%,transparent 55%); }
.sealed .seal { height:140px; display:grid; place-content:center; }
.seal img { width:44px; opacity:.16; }
.sealed .card-copy { border:0; padding-top:0; }
.sealed .card-copy h2 { font-size:16px; color:var(--dim); text-transform:none; }
.sealed .card-copy p { min-height:0; margin:0; font-size:13px; }
.results { font:11px var(--px); color:var(--dim); margin:0 0 22px; }
.empty { padding:60px 24px; text-align:center; border:1px dashed var(--rule); }
.empty h2 { font:22px var(--px); }
.empty p { color:var(--dim); max-width:52ch; margin:18px auto 26px; }
.notice { border-left:2px solid var(--dim); background:var(--deck); padding:18px 22px; margin-bottom:28px; color:var(--dim); font-size:14px; }
.notice strong { color:var(--paper); }
.error { color:#ffb0a2; }
.catalog-footer { border-top:1px solid var(--rule); margin-top:72px; padding-block:28px; }
.catalog-footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--dim); font-size:13px; }
dialog { color:var(--paper); background:var(--night); border:1px solid var(--rule); padding:0; width:min(880px,calc(100% - 32px)); max-height:90dvh; }
dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.detail-top { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); padding:16px 22px; gap:12px; }
.detail-layout { display:grid; grid-template-columns:40% 1fr; }
.detail-art { background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--accent) 18%,transparent),transparent); min-height:420px; }
.detail-art img { height:100%; max-height:540px; width:100%; object-fit:contain; }
.detail-copy { padding:32px; }
.detail-copy h2 { font:33px var(--px); margin:8px 0 22px; }
.detail-copy p,.detail-copy li { color:var(--dim); }
.detail-copy h3 { font:11px var(--px); text-transform:uppercase; margin-top:26px; }
.detail-copy ul { padding-left:20px; }
.detail-copy .availability { margin-top:26px; padding-top:18px; border-top:1px solid var(--rule); font-size:14px; }
[hidden] { display:none !important; }
@media(max-width:900px) { .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .top nav { gap:16px; } .catalog-hero { padding-top:44px; } }
@media(max-width:640px) {
 .top nav a:not(:last-child) { display:inline; }
 .top .wrap { align-items:start; gap:18px; }
 .top nav { width:100%; margin:0; justify-content:space-between; }
 .catalog-hero { display:block; }
 .roster-count { display:none; }
 .catalog-grid { grid-template-columns:1fr; }
 .art-panel { height:360px; }
 .catalog-tabs { gap:22px; }
 .detail-layout { grid-template-columns:1fr; }
 .detail-art { min-height:0; height:220px; }
 .detail-copy { padding:24px; }
 .controls .btn { width:100%; }
 .controls .field:first-child { flex-basis:100%; }
 .controls .field:not(:first-child) { flex:1; }
 .sealed { min-height:200px; }
 .sealed .seal { height:85px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }

.card-copy,.detail-copy { min-width:0; overflow-wrap:anywhere; }
.card-heading span { min-width:0; overflow-wrap:anywhere; }

.companion.live { display: block; text-decoration: none; color: inherit; }
.companion.live:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }