/* One scale in CSS pixels: display resolution never multiplies type or controls.
   Card art consumes the remaining viewport budget; content is never scaled down.
   gallery-layout.js measures wrapped metadata and keeps two desktop rows in view. */
:root{--page-width:1600px;--page-gutter:clamp(16px,2.5vw,40px);--gallery-gap:12px;--gallery-columns:5;--gallery-card:256px;font-size:100%}
body{min-width:320px;font-size:1rem}
main,.site-header,.mode-bar{position:relative}
h1{font-size:2rem}h2{font-size:1.625rem}h3{font-size:1.25rem}
button,.button{min-height:40px;padding:9px 14px;font-size:.875rem}
.site-header,main{width:100%;max-width:var(--page-width);margin-inline:auto;padding-inline:var(--page-gutter)}
.site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;min-height:68px;padding-block:10px}
.brand{display:flex;flex-direction:column;flex-shrink:0;width:fit-content;gap:4px;grid-column:1;justify-self:start}
.brand img{width:154px;height:auto}.brand>span{font-size:.5625rem;letter-spacing:.32em;text-align:center;padding-left:.32em}
.site-header nav{display:flex;grid-column:2;align-items:center;justify-content:center;gap:28px;margin:0;padding:0}
.site-header nav button{position:relative;min-height:40px;padding:8px 0;font-size:.875rem;letter-spacing:.04em;white-space:nowrap}
.site-header nav button::after{position:absolute;left:0;right:0;bottom:0;height:2px}
.nav-dot{width:5px;height:5px}.nav-count{font-size:.6875rem;padding:2px 5px}
.site-header .account{position:relative;display:flex;grid-column:3;justify-self:end;justify-content:flex-end;align-items:center;gap:0;padding:0;min-width:0}
.login-button{width:auto;min-height:38px;font-size:.8125rem;padding:8px 12px;white-space:nowrap}.login-button svg{width:19px;height:19px}
.logout-button{min-height:38px;padding:8px 0;font-size:.8125rem}
.mode-bar>div{display:flex;align-items:center;justify-content:center;gap:8px;max-width:var(--page-width);min-height:26px;margin-inline:auto;padding:4px var(--page-gutter)}
.mode-indicator{width:4px;height:4px}#mode-banner{font-size:.6875rem;line-height:1.5;letter-spacing:.015em}
#notice{margin-top:12px;padding:10px 14px;font-size:.875rem}

.hero,#shop[data-multirow] .hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:28px;min-height:0;padding:12px 0;overflow:visible}
.hero-copy{position:relative;display:block;grid-column:1;grid-row:1;min-width:0;max-width:none}
.hero-copy .eyebrow{margin:0 0 7px;font-size:.6875rem;line-height:1.5;letter-spacing:.16em}
.hero-copy .eyebrow>span{width:22px;height:2px}
.hero h1{margin:0;font-size:2.125rem;line-height:1.05;letter-spacing:-.055em;white-space:normal;overflow-wrap:anywhere}
.hero h1 em{position:relative;display:inline-block}.hero h1 em::after{position:absolute;right:-.13em;top:-.02em;width:5px;height:5px;min-width:5px;min-height:5px}
.hero>.hero-description{display:block;grid-column:3;grid-row:1;max-width:100%;justify-self:end;margin:0;font-size:.8125rem;line-height:1.6;letter-spacing:.015em;text-align:right}
.hero-account{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;grid-column:2;grid-row:1;justify-self:center;min-width:0;width:100%;max-width:420px;padding:10px 14px;gap:3px;text-align:center}
.hero-account-name{display:block;max-width:100%;font-size:1.5rem;line-height:1.15;letter-spacing:-.04em}
.hero-account-value{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%;min-width:0}
.hero-account-crystal{width:34px;height:42px;flex-shrink:0}
.hero-account-amount{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 7px;min-width:0}
#hero-account-balance{font-size:2.375rem;line-height:1.05;letter-spacing:-.045em}
#hero-account-unit{font-size:.6875rem;line-height:1.2;letter-spacing:.09em}
#hero-account-status{display:block;max-width:100%;margin-top:2px;font-size:.6875rem;line-height:1.4}
#hero-account-login{font-size:.8125rem;line-height:1.3;padding:5px 8px;min-height:28px}
.hero-account[data-state=guest] .hero-account-name{font-size:.6875rem;line-height:1.4;letter-spacing:.12em}
.hero-account[data-state=guest] #hero-account-balance{font-size:1.75rem;letter-spacing:-.04em}
.hero-account[data-state=guest]{display:grid;grid-template-columns:auto auto;gap:3px 6px;padding-block:6px}
.hero-account[data-state=guest] .hero-account-name,.hero-account[data-state=guest] .hero-account-value{grid-column:1/-1}
.hero-account[data-state=guest] #hero-account-status{grid-column:1;grid-row:3;margin:0}
.hero-account[data-state=guest] #hero-account-login{grid-column:2;grid-row:3}
.hero-art,.hero .text-link{display:none}
#drops.store-heading,#shop[data-multirow] #drops.store-heading{display:flex;align-items:center;justify-content:flex-end;width:100%;max-width:none;min-height:0;margin:0;padding:8px 0 12px;gap:12px}
.store-meta{display:flex;align-items:center;justify-content:flex-end;flex-flow:row wrap;width:100%;max-width:none;gap:8px;padding:0}
.store-meta .status,.store-meta .limit-status{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;gap:7px;font-size:.75rem;line-height:1.25}
.store-meta .status::before{width:5px;height:5px}.store-meta [data-cooldown-clock]{font-size:1.1em}

/* Bounded gallery width for every catalog size, including sparse inventories. */
#products{--gallery-columns:5;--gallery-card:240px;display:grid;grid-template-columns:repeat(var(--gallery-columns),minmax(0,1fr));gap:var(--gallery-gap);width:100%;max-width:calc(var(--gallery-columns)*var(--gallery-card) + (var(--gallery-columns) - 1)*var(--gallery-gap));margin-inline:auto;align-items:stretch}
#products[data-count="0"]{max-width:none}
#products>.empty{grid-column:1/-1}
#products[data-count="1"]{--gallery-columns:1;--gallery-card:320px}
#products[data-count="2"]{--gallery-columns:2;--gallery-card:320px}
#products[data-count="3"]{--gallery-columns:3;--gallery-card:300px}
#products[data-count="4"]{--gallery-columns:4;--gallery-card:280px}
#products[data-count="5"]{--gallery-card:256px}
#products .product-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:10px}
#products .artwork{position:relative;display:block;width:100%;height:var(--gallery-art-height,auto);min-height:0;max-height:none;aspect-ratio:4/5;padding:0;flex:none;overflow:hidden}
#products .cover,#products .brand-cover .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
#products .art-backdrop{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);max-width:none;object-fit:cover;filter:blur(18px) brightness(.38) saturate(.8);opacity:.65;pointer-events:none}
#products .artwork::before,#products .artwork::after{position:absolute;inset:0}
#products .art-arrow{position:absolute;right:9px;bottom:9px;display:grid;place-items:center;width:26px;height:26px;font-size:18px}
#products .preview-badge{position:absolute;left:9px;top:9px;padding:4px 6px;font-size:.5625rem;line-height:1.25;letter-spacing:.1em}
#products .product-info{display:flex;flex-direction:column;flex:1;min-width:0;padding:12px;gap:0}
#products .product-title{margin:0 0 6px;font-size:1rem;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
#products .courtesy{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;margin:0 0 5px;font-size:.875rem;line-height:1.3}
#products .courtesy>span{font-size:.625rem;line-height:1.3;letter-spacing:.025em;white-space:nowrap}
#products .courtesy a,#products .courtesy strong{min-width:0;overflow-wrap:anywhere}
#products .purchase-link{display:inline-flex;align-items:center;gap:5px;width:fit-content;margin:0 0 9px;font-size:.8125rem;line-height:1.4}
#products .purchase-link>span{font-size:1em}
#products .inventory{margin-top:auto;padding-top:4px}
#products .inventory-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 8px;font-size:.6875rem;line-height:1.4}
#products .inventory-label strong{font-size:.75rem;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#products .stock-meter{height:3px;margin:5px 0 0}#products .stock-meter::-webkit-meter-bar{height:3px}
#products .card-purchase{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-top:9px;padding-top:9px}
#products .card-purchase .price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
#products .card-purchase .price strong{font-size:1.25rem;line-height:1.05;overflow-wrap:anywhere}
#products .card-purchase .price>span{font-size:.625rem;line-height:1.3}
#products .choose-tickets{margin-left:auto;min-height:36px;padding:8px 10px;font-size:.75rem;line-height:1.25;white-space:nowrap}
#products .skeleton-card{min-height:360px}

/* Dialogs, account and guide keep the same readable scale on every monitor. */
.courtesy{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.purchase-link{display:inline-flex;align-items:center;gap:5px;width:fit-content}
.product-dialog{width:min(780px,calc(100% - 32px));max-height:calc(100dvh - 32px)}
.detail-layout{grid-template-columns:minmax(200px,.85fr) minmax(0,1.15fr)}
.detail-art{min-height:0;padding:0;align-self:stretch}
.detail-art img{width:100%;height:100%;max-height:560px;aspect-ratio:4/5;object-fit:contain}
.detail-info{padding:28px 24px}.detail-info .product-title{font-size:1.625rem;overflow-wrap:anywhere}
.detail-info .courtesy{font-size:1.125rem}.detail-info .courtesy>span{font-size:.6875rem}.detail-info .purchase-link{font-size:.875rem}
.detail-info .product-description{font-size:.875rem;margin-block:16px;overflow-wrap:anywhere}
.detail-info .purchase-controls{margin-top:16px;padding-top:16px}.detail-info .inventory{margin-top:16px}
.detail-info .inventory-label{flex-wrap:wrap}.detail-info .price strong{font-size:1.75rem}
.detail-info .quantity-row{flex-wrap:wrap;gap:8px;margin:16px 0}.detail-info .buy-button{min-height:44px;font-size:.875rem}
.detail-info .stepper,.detail-info .max-button{min-height:40px;height:40px}.detail-info .stepper button,.detail-info .stepper select{min-height:38px;height:38px}
.detail-info .buy-hint{font-size:.75rem}.preview-notice{padding:14px;margin-top:16px}.preview-notice strong{font-size:.9375rem}.preview-notice p>span{font-size:.8125rem}
.account-panel,.admin-panel{max-width:1440px;margin-inline:auto;padding-top:28px}
.account-panel h1,.admin-panel h1{font-size:2rem}.account-panel h2{font-size:1.5rem}
.account-panel .row strong{font-size:.9375rem}.account-panel .row small{font-size:.75rem}
.my-ticket{padding:16px;gap:18px}.my-ticket strong{font-size:.9375rem}.my-ticket small,.ticket-state{font-size:.75rem}
.guide-page{max-width:1100px;padding-top:28px}.guide-page>h1{font-size:2rem}.guide-page .how-title h2{font-size:1.625rem}.guide-page .how-it-works h3{font-size:1.25rem}

.site-footer{display:block;width:100%;margin:32px 0 0;padding:0}
.partner-wall{position:relative;padding:20px 0}.partner-wall::before{position:absolute;inset:0}
.partner-logos{--partner-columns:8;--partner-gap:28px;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--partner-gap);max-width:1440px;margin-inline:auto}
.partner-logo{position:relative;display:flex;flex:0 0 calc((100% - (var(--partner-columns) - 1)*var(--partner-gap))/var(--partner-columns));align-items:center;justify-content:center;min-width:0;height:72px;padding:10px}
.partner-logo::after{position:absolute;left:16%;right:16%;bottom:1px;height:1px}
.partner-logo img{display:block;width:100%;height:100%;max-width:138px;object-fit:contain}.partner-logo.partner-lg img{max-width:52px;max-height:100%}.partner-logo.partner-old-dawg img{max-width:112px}.partner-logo.partner-axe img{max-width:128px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0}
.site-footer .footer-brand{display:block}.site-footer .footer-brand img{width:144px;height:auto}.site-footer .footer-love{display:block;line-height:0}.site-footer .footer-love img{width:64px;height:64px;object-fit:contain}

@media(width < 1200px){
  .partner-logos{--partner-columns:4;max-width:724px}
  .site-header{gap:18px}.site-header nav{gap:20px}
  .hero,#shop[data-multirow] .hero{gap:20px}.hero h1{font-size:1.75rem}.hero>.hero-description{font-size:.75rem}
  #products{--gallery-columns:4;--gallery-card:240px}#products[data-count="5"]{--gallery-columns:3;--gallery-card:260px}
  #products[data-count="1"]{--gallery-columns:1}#products[data-count="2"]{--gallery-columns:2}#products[data-count="3"]{--gallery-columns:3}
}
@media(width < 960px){
  .site-header{grid-template-columns:1fr auto;gap:6px 16px}.brand{grid-column:1;grid-row:1}.site-header .account{grid-column:2;grid-row:1}
  .site-header nav{grid-column:1/-1;grid-row:2;width:100%;gap:28px}.site-header nav button{min-height:36px}
  .hero,#shop[data-multirow] .hero{grid-template-columns:1fr 1fr;gap:12px 24px;padding-block:14px}
  .hero-account{grid-column:2;grid-row:1/3}.hero>.hero-description{grid-column:1;grid-row:2;text-align:left;justify-self:start;font-size:.75rem}.hero>.hero-description br{display:none}
  .hero h1{font-size:1.875rem}#hero-account-balance{font-size:2rem}.hero-account-name{font-size:1.25rem}
  #products,#products[data-count="4"],#products[data-count="5"]{--gallery-columns:3;--gallery-card:260px}
  #products[data-count="1"]{--gallery-columns:1}#products[data-count="2"]{--gallery-columns:2}
}
@media(width < 720px){
  .site-header nav{gap:24px}.site-header nav button{font-size:.8125rem}.brand img{width:140px}
  #products,#products[data-count="3"],#products[data-count="4"],#products[data-count="5"]{--gallery-columns:2;--gallery-card:260px}
  #products[data-count="1"]{--gallery-columns:1;--gallery-card:320px}
  .partner-logos{--partner-columns:3;--partner-gap:24px;row-gap:16px}.partner-logo{height:66px;padding:8px}
  .detail-layout{grid-template-columns:1fr}.detail-art{height:210px}.detail-art img{height:100%;max-height:210px;aspect-ratio:auto}.detail-info{padding:22px}
  .product-dialog .dialog-close{position:absolute;top:10px;right:10px;width:40px;height:40px;min-height:40px}
}
@media(width < 540px){
  .site-header{padding-block:10px 6px}.brand img{width:126px}.brand>span{font-size:.5rem}
  .site-header nav{justify-content:space-between;gap:8px}.site-header nav button{font-size:.75rem;letter-spacing:.01em;min-height:40px}
  .login-button{font-size:.6875rem;padding:8px;gap:6px}.login-button svg{width:16px;height:16px}
  #mode-banner{font-size:.625rem}.mode-bar>div{align-items:flex-start;text-align:center}
  .hero,#shop[data-multirow] .hero{grid-template-columns:1fr;gap:10px;padding-block:16px}
  .hero-copy{grid-column:1;grid-row:1;text-align:center}.hero-copy .eyebrow{justify-content:center;font-size:.625rem}.hero h1{font-size:1.75rem}
  .hero-account{grid-column:1;grid-row:2;max-width:320px;padding:10px 12px}.hero>.hero-description{grid-column:1;grid-row:3;justify-self:center;text-align:center;max-width:330px;font-size:.6875rem}
  .store-meta{justify-content:center}.store-meta .status,.store-meta .limit-status{font-size:.6875rem}
  #products,#products[data-count="1"],#products[data-count="2"],#products[data-count="3"],#products[data-count="4"],#products[data-count="5"]{--gallery-columns:1;--gallery-card:320px}
  #products .product-info{padding:14px}#products .product-title{font-size:1.125rem}#products .courtesy{font-size:.9375rem}
  #products .choose-tickets{min-height:40px;font-size:.8125rem}
  .partner-logos{--partner-columns:2;--partner-gap:28px;row-gap:12px;max-width:360px}
  .detail-info .product-title{font-size:1.5rem}.product-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .my-ticket strong{font-size:.875rem}.my-ticket small,.ticket-state{font-size:.75rem}
}
@media(pointer:coarse){
  button,.button,.site-header nav button,#products .choose-tickets,.detail-info .buy-button{min-height:44px}
  .detail-info .stepper,.detail-info .max-button{min-height:44px;height:44px}.detail-info .stepper button,.detail-info .stepper select{min-height:42px;height:42px;min-width:42px}
}
