* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:#f5f5ef; color:#151619; }
button,a { font:inherit; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button:focus-visible,a:focus-visible { outline:3px solid #de4037; outline-offset:4px; }
.demo { --accent:#ffef62; --ink:#18191c; }
.shop { --accent:#c2f4d1; }
.event { --accent:#fbd362; }
.portfolio { --accent:#e6d9ff; }
.demo-header { position:absolute; z-index:2; left:0; right:0; display:flex; align-items:center; gap:28px; min-height:66px; padding:0 5%; color:#fff; background:rgba(13,15,17,.78); }
.demo-brand { margin-right:auto; font-size:18px; font-weight:900; }
.demo-brand span { color:var(--accent); }
.demo-header nav { display:flex; gap:24px; font-size:12px; font-weight:700; }
.demo-header nav a:hover { color:var(--accent); }
.demo-mark { padding:5px 8px; border:1px solid currentColor; color:#fff; font-size:9px; font-weight:700; }
.shop .demo-header,.portfolio .demo-header { background:rgba(248,250,245,.96); color:#18231c; }
.shop .demo-header .demo-mark,.portfolio .demo-header .demo-mark { color:#18231c; }
.shop .demo-brand span { color:#267d50; }
.portfolio .demo-brand span { color:#694e9a; }
.demo-hero { position:relative; display:flex; align-items:end; min-height:min(600px,100vh); padding:120px 7% 65px; background-color:#1c2929; background-size:cover; background-position:center; color:#fff; isolation:isolate; }
.demo-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(11,16,19,.42); }
.creator-hero { background-image:url('../assets/illustrations/examples/illustration-08-character-display.webp'); background-position:center 35%; }
.shop-hero { background-image:url('../assets/illustrations/examples/illustration-09-soft-display.webp'); background-position:center 38%; }
.event-hero { background-image:url('../assets/illustrations/examples/illustration-07-wide-display.webp'); background-position:center 50%; }
.event-hero { align-items:center; text-align:center; }
.event-hero .hero-copy { margin-inline:auto; }
.portfolio-hero { background-image:url('../assets/illustrations/examples/illustration-03-skarazin-display.webp'); background-position:center 50%; }
.hero-copy { max-width:620px; text-shadow:0 2px 8px rgba(0,0,0,.9); }
.demo-label,.demo-kicker { font-size:11px; font-weight:900; text-transform:uppercase; }
.demo-label { color:var(--accent); }
.demo-hero h1 { margin:18px 0; font-size:68px; line-height:.92; letter-spacing:0; }
.portfolio .demo-hero h1 { font-size:51px; }
.demo-hero p { max-width:420px; margin:0; font-size:17px; line-height:1.5; }
.demo-action { display:inline-flex; margin-top:26px; padding:14px 18px; color:#111; background:var(--accent); font-size:13px; font-weight:900; text-shadow:none; }
.demo-action:hover { background:#fff; }
.demo-band { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:start; padding:65px 7%; }
.demo-band h2,.demo-collection h2 { margin:12px 0 0; font-size:38px; line-height:1; }
.demo-band p { max-width:480px; margin:0; font-size:16px; line-height:1.6; }
.demo-kicker { color:#bf3934; }
.demo-schedule { background:#eee9da; }
.demo-program { background:#fff2c4; }
.schedule-list { display:grid; }
.schedule-list p { display:flex; gap:24px; justify-content:space-between; max-width:none; padding:14px 0; border-bottom:1px solid #aaa; }
.schedule-list b { font-size:12px; }
.demo-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px 7%; background:#17191c; color:#fff; font-size:11px; }
.demo-footer b { font-size:15px; }
.demo-collection { padding:65px 7%; background:#f5f6ef; }
.collection-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:25px; }
.demo-filters { display:flex; flex-wrap:wrap; gap:8px; }
.demo-filters button { padding:8px 13px; border:1px solid #17191c; background:transparent; cursor:pointer; font-size:12px; font-weight:700; }
.demo-filters button[aria-pressed=true] { background:#17191c; color:#fff; }
.demo-products,.demo-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.demo-products article[hidden] { display:none; }
.demo-products article { display:grid; gap:10px; align-content:start; }
.demo-products img,.demo-gallery img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#d9ddd8; }
.demo-products span,.demo-gallery figcaption { font-size:12px; font-weight:800; }
.demo-products button { justify-self:start; padding:0 0 5px; border:0; border-bottom:1px solid #111; background:none; cursor:pointer; font-size:12px; font-weight:800; }
.demo-product-dialog { width:min(700px,calc(100% - 32px)); max-height:calc(100svh - 32px); padding:16px; border:1px solid #111; background:#f5f6ef; }
.demo-product-dialog[open] { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; }
.demo-product-dialog::backdrop { background:rgba(8,10,12,.7); }
.demo-product-dialog img { width:100%; aspect-ratio:1; object-fit:contain; background:#e5e8e3; }
.demo-product-dialog h3 { margin:12px 0; font-size:28px; }
.demo-product-dialog p { line-height:1.5; }
.demo-product-close { position:absolute; top:6px; right:6px; width:38px; height:38px; border:1px solid #111; background:#fff; font-size:25px; cursor:pointer; }
.demo-gallery figure { margin:0; }
.demo-gallery figcaption { margin-top:10px; }
.is-preview { scrollbar-width:none; }
.is-preview::-webkit-scrollbar { display:none; }
.is-preview .demo-hero { min-height:100vh; padding-top:80px; padding-bottom:30px; }
.is-preview .demo-hero h1 { font-size:48px; }
.is-preview .portfolio .demo-hero h1 { font-size:40px; }
@media (max-width:600px) {
  .demo-header { gap:12px; padding:0 18px; }
  .demo-header nav { gap:12px; font-size:10px; overflow:auto; white-space:nowrap; }
  .demo-mark { display:none; }
  .demo-brand { font-size:15px; white-space:nowrap; }
  .demo-hero { min-height:min(540px,100vh); padding:92px 22px 35px; }
  .demo-hero h1 { font-size:48px; }
  .portfolio .demo-hero h1 { font-size:38px; }
  .demo-hero p { font-size:15px; }
  .demo-band { grid-template-columns:1fr; gap:20px; padding:48px 22px; }
  .demo-collection { padding:48px 22px; }
  .demo-band h2,.demo-collection h2 { font-size:30px; }
  .collection-heading { align-items:start; flex-direction:column; }
  .demo-products,.demo-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .demo-footer { align-items:start; flex-direction:column; }
  .demo-product-dialog[open] { grid-template-columns:1fr; overflow:auto; }
  .demo-product-dialog img { max-height:40svh; }
}