html[data-composition] {
  --design-radius: 20px;
  --design-stroke: color-mix(in srgb, var(--surface-ink) 20%, var(--surface));
  --design-image-size: clamp(190px, 30vw, 440px);
  --design-enter: rise;
}
[data-composition] .design-eyebrow {
  width: fit-content;
  padding: 4px 12px;
  margin: 0 0 9px;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: 12px;
}
[data-composition] .top .top-inner { position: relative; isolation: isolate; }
[data-composition] .top .top-copy,
[data-composition] .top .top-actions { position: relative; z-index: 1; }
[data-composition] .top h1 { font-size: clamp(34px, 6vw, 72px); overflow-wrap: anywhere; }
[data-composition] .menu-cover-art,
[data-composition] .site-hero-photo {
  width: 100%;
  height: var(--design-image-size);
  object-fit: cover;
  border-radius: var(--design-radius);
}
[data-composition] .menu-cover-art { display: none; }
[data-composition] .category-card,
[data-composition] .item,
[data-composition] .site-gallery img { border-radius: var(--design-radius); }
[data-composition] .category-card { min-width: 0; }
[data-composition] .item { min-width: 0; overflow-wrap: anywhere; }
[data-composition] .category-card:focus-visible,
[data-composition] .item :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[data-composition] .category-card:hover,
[data-composition] .item:hover { border-color: var(--accent); }
[data-edition=bold] .category-card { border-width: 2px; }
[data-edition=bold] .home-heading h2 { font-size: clamp(25px, 4vw, 44px); }
[data-edition=bold] .site-nav { border-bottom: 3px solid var(--accent); }

html[data-composition=panorama] { --design-radius: 8px; }
[data-composition=panorama] .top .top-inner,
[data-composition=poster] .top .top-inner { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; }
[data-composition=panorama] .top .brand,
[data-composition=poster] .top .brand { align-items: center; justify-content: center; }
[data-composition=panorama] .design-eyebrow,
[data-composition=poster] .design-eyebrow { margin-inline: auto; }
[data-composition=panorama] .site-hero .top-inner { min-height: min(56vw, 540px); align-content: center; }
[data-composition=panorama] .site-hero-photo { position: absolute; grid-area: auto; inset: 0; width: 100%; height: 100%; max-width: none; opacity: .35; }
[data-composition=panorama] .site-hero .top-actions,
[data-composition=poster] .site-hero .top-actions { grid-area: auto; }
[data-composition=panorama] .site-hero .top-copy,
[data-composition=poster] .site-hero .top-copy { max-width: 720px; }
[data-composition=poster] .site-hero-photo { grid-area: auto; max-width: 640px; height: clamp(170px, 28vw, 360px); }

[data-composition=split] .top:not(.site-hero) .top-inner:has(.menu-cover-art),
[data-composition=arch] .top:not(.site-hero) .top-inner:has(.menu-cover-art),
[data-composition=frame] .top:not(.site-hero) .top-inner:has(.menu-cover-art) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;
}
[data-composition=split] .menu-cover-art,
[data-composition=arch] .menu-cover-art,
[data-composition=frame] .menu-cover-art { display: block; grid-column: 2; grid-row: 1 / span 2; }
[data-composition=split] .top .top-actions,
[data-composition=arch] .top .top-actions,
[data-composition=frame] .top .top-actions { grid-column: 1; }
[data-composition=split][data-edition=bold] .site-hero-photo { border-radius: 4px 70px 4px 4px; }

html[data-composition=editorial] { --design-radius: 0px; }
[data-composition=editorial] .category-grid { grid-template-columns: 1fr; gap: 0; }
[data-composition=editorial] .category-card { justify-content: start; text-align: start; border-width: 0 0 1px; box-shadow: none; }
[data-composition=editorial] .category-card::before { display: none; }
[data-composition=editorial] .category-copy { flex: 1; justify-items: start; }
[data-composition=editorial] .site-sections h2 { font-family: Georgia, serif; }

html[data-composition=poster] { --design-radius: 3px; }
[data-composition=poster] .category-card,
[data-composition=poster] .item { border: 2px solid var(--surface-ink); box-shadow: 4px 4px var(--surface-ink); }
[data-composition=poster] .top { border-bottom: 7px solid var(--accent); }

[data-composition=arch] .site-hero-photo,
[data-composition=arch] .menu-cover-art { border-radius: 48% 48% 10px 10px; }
[data-composition=arch] .category-card { border-radius: 70px 70px 12px 12px; }
[data-composition=arch] .category-icon img { border-radius: 50%; }

html[data-composition=mosaic] { --design-radius: 12px; }
[data-composition=mosaic] .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
[data-composition=mosaic] .category-card { flex-direction: column; min-height: 130px; }
[data-composition=mosaic][data-edition=bold] .category-card:nth-child(5n+1) { grid-column: span 2; }
[data-composition=mosaic] .site-gallery img:nth-child(even) { border-radius: 42px 4px; }

[data-composition=rail] .category-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 5px 4px 16px; }
[data-composition=rail] .category-card { flex: 0 0 clamp(155px, 31%, 300px); scroll-snap-align: start; }
[data-composition=rail] .site-gallery { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
[data-composition=rail] .site-gallery img { flex: 0 0 min(75%, 380px); scroll-snap-align: start; }

[data-composition=frame] .site-hero-photo,
[data-composition=frame] .menu-cover-art { outline: 1px solid var(--accent); outline-offset: 6px; border: 7px solid var(--hero-color); }
[data-composition=frame] .category-card { border: 4px double var(--design-stroke); }

html[data-composition=ticket] { --design-radius: 5px; }
[data-composition=ticket] .category-card { border-style: dashed; }
[data-composition=ticket] .category-card::before { width: 20px; height: 20px; bottom: calc(50% - 10px); inset-inline-start: -10px; background: var(--surface); }
[data-composition=ticket] .item .prices { border-top: 1px dashed var(--design-stroke); margin-top: 12px; }

html[data-composition=minimal] { --design-radius: 36px; }
[data-composition=minimal] .category-card { box-shadow: none; background: var(--surface); }
[data-composition=minimal] .category-card::before { display: none; }
[data-composition=minimal] .site-hero-photo { max-width: 460px; justify-self: center; }

html[data-motion=curtain] { --design-enter: curtain; }
html[data-motion=slide] { --design-enter: glide; }
html[data-motion=line] { --design-enter: line-reveal; }
html[data-motion=snap] { --design-enter: snap-in; }
html[data-motion=float] { --design-enter: float-in; }
html[data-motion=cascade] { --design-enter: cascade-in; }
html[data-motion=sweep] { --design-enter: sweep-in; }
html[data-motion=iris] { --design-enter: iris-in; }
html[data-motion=flip] { --design-enter: flip-in; }
html[data-motion=fade] { --design-enter: fade-in; }

@media (prefers-reduced-motion: no-preference) {
  [data-motion] .design-enter { animation: var(--design-enter) 720ms cubic-bezier(.18,.72,.22,1) both; }
  [data-motion] .category-card:nth-child(-n+12),
  [data-motion] .item:nth-child(-n+12) {
    animation: var(--design-enter) 460ms cubic-bezier(.18,.72,.22,1) both;
    animation-delay: var(--design-delay, 0ms);
  }
  [data-motion] :is(.category-card,.item):nth-child(3n+2) { --design-delay: 45ms; }
  [data-motion] :is(.category-card,.item):nth-child(3n+3) { --design-delay: 90ms; }
  [data-motion] :is(.category-card,.item,.action) { transition: transform 200ms, border-color 200ms, box-shadow 200ms; }
  [data-motion] .action:hover { transform: translateY(-2px); }
}
@keyframes rise { from { opacity: .4; transform: translateY(22px); } }
@keyframes curtain { from { clip-path: inset(100% 0 0); transform: translateY(18px); } to { clip-path: inset(0); } }
@keyframes glide { from { opacity: .2; transform: translateX(42px); } }
@keyframes line-reveal { from { opacity: .3; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes snap-in { 0% { opacity: .3; transform: scale(.9) rotate(-2deg); } 75% { transform: scale(1.015); } }
@keyframes float-in { from { opacity: .4; transform: translateY(25px) rotate(2deg); } }
@keyframes cascade-in { from { opacity: .3; transform: translateY(22px) scale(.95); } }
@keyframes sweep-in { from { opacity: .35; transform: skewX(-5deg) translateX(20px); } }
@keyframes iris-in { from { clip-path: ellipse(0% 0% at center); } to { clip-path: ellipse(76% 76% at center); } }
@keyframes flip-in { from { opacity: .25; transform: perspective(750px) rotateX(-28deg) translateY(12px); } }
@keyframes fade-in { from { opacity: .25; } }

@media(max-width:700px) {
  [data-composition] .top h1 { font-size: clamp(30px, 8vw, 44px); }
  [data-composition] .top:not(.site-hero) .top-inner:has(.menu-cover-art) { grid-template-columns: 1fr; }
  [data-composition] .menu-cover-art { grid-column: 1; grid-row: auto; }
  [data-composition=mosaic] .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-composition] .site-hero-photo { height: min(65vw, 320px); }
  [data-composition=panorama] .site-hero .top-inner { min-height: 300px; }
  [data-composition=panorama] .site-hero-photo { height: 100%; }
  [data-composition] .design-eyebrow { margin-inline: auto; }
}

[data-composition=mosaic][data-edition=bold] .category-grid { counter-reset: tiles; }
[data-composition=mosaic][data-edition=bold] .category-card { counter-increment: tiles; }
[data-composition=mosaic][data-edition=bold] .category-card::after {
  content: counter(tiles, decimal-leading-zero);
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  font-size: 11px;
  opacity: .65;
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion=sweep] .category-card:hover { box-shadow: 0 0 0 2px var(--accent), 0 9px 25px #0002; }
  [data-motion=float] .category-card:hover .category-icon { translate: 0 -4px; }
}
.design-demo-bar{display:flex;justify-content:space-between;gap:10px;padding:8px max(16px,calc((100% - 1100px)/2));background:var(--surface);color:var(--surface-ink);font-size:12px;border-bottom:1px solid currentColor}.design-demo-bar a{color:inherit}