/* Generated by Web Design 2.1. Do not edit directly. */ @layer design-os.tokens, design-os.atomic, design-os.recipes; @layer design-os.tokens { :root { --component-album-column-gap: var(--primitive-space-lg); --component-album-grid-top: 2.375rem; --component-album-row-gap: var(--primitive-space-two-xl); --component-album-title-top: 0.625rem; --component-archive-card-min-height: 10.5rem; --component-archive-card-padding-x: 1.25rem; --component-archive-card-padding-y: 1.625rem; --component-archive-city-top: var(--primitive-space-md); --component-banner-cue-gap: var(--primitive-space-sm); --component-banner-cue-padding-x: var(--primitive-space-lg); --component-banner-cue-padding-y: var(--primitive-space-sm); --component-bio-frame-offset: 0.875rem; --component-bio-layout-gap: var(--primitive-space-four-xl); --component-bio-padding-y: var(--primitive-space-six-xl); --component-bio-title-bottom: 1.5rem; --component-bio-title-top: 0.875rem; --component-button-padding-x: 1.625rem; --component-button-padding-y: 0.6875rem; --component-concert-row-gap: 1.75rem; --component-concert-row-padding-y: var(--primitive-space-lg); --component-concert-schedule-card-min-height: 18rem; --component-concert-schedule-card-padding: var(--primitive-space-xl); --component-concert-schedule-card-top-gap: var(--primitive-space-md); --component-concert-schedule-date-gap: var(--primitive-space-sm); --component-contact-grid-gap: 2.5rem; --component-contact-grid-top: 2.125rem; --component-contact-padding-y: var(--primitive-space-five-xl); --component-footer-legal-padding: 0.625rem; --component-footer-nav-gap: 1.625rem; --component-footer-nav-padding-bottom: var(--primitive-space-xs); --component-footer-nav-padding-top: 1.375rem; --component-footer-padding-top: var(--primitive-space-four-xl); --component-footer-social-gap: 1.25rem; --component-footer-social-padding-y: var(--primitive-space-md); --component-footer-wordmark-top: 2.375rem; --component-header-anniversary-color: var(--primitive-color-anniversary-lime); --component-header-anniversary-mobile-size: 3.5rem; --component-header-anniversary-padding: var(--primitive-space-xs); --component-header-nav-gap-mobile: 1.25rem; --component-header-nav-gap-wide: 2.625rem; --component-header-nav-padding-y: 0.8125rem; --component-header-padding-top: 0.875rem; --component-header-top-bottom: var(--primitive-space-sm); --component-header-wordmark-bottom: 1.4375rem; --component-header-wordmark-gap: var(--primitive-space-xl); --component-header-wordmark-top: var(--primitive-space-xs); --component-hero-caption-gap: var(--primitive-space-md); --component-hero-caption-padding-y: var(--primitive-space-sm); --component-home-variant-album-hover-lime: linear-gradient(to top, #c2e45ceb, #c2e45c00 62%); --component-home-variant-album-hover-ruby: linear-gradient(to top, #c8103ceb, #c8103c00 62%); --component-home-variant-card-gap: clamp(1rem, 1.8vw, 1.625rem); --component-home-variant-concert-padding: clamp(1.375rem, 2.6vw, 2.125rem); --component-home-variant-contact-measure: 42.5rem; --component-home-variant-contact-padding: clamp(5.25rem, 11vw, 9.375rem); --component-home-variant-contact-row-padding: clamp(1rem, 2vw, 1.375rem); --component-home-variant-content-gap: clamp(1.875rem, 5vw, 5rem); --component-home-variant-copy-measure: 52ch; --component-home-variant-dot-height: 0.3125rem; --component-home-variant-dot-width: 1.75rem; --component-home-variant-editorial-gutter: clamp(1.125rem, 5vw, 4rem); --component-home-variant-fade-dark-end: linear-gradient(to left, #0e0e0e, #0e0e0e00); --component-home-variant-fade-dark-start: linear-gradient(to right, #0e0e0e, #0e0e0e00); --component-home-variant-fade-paper-end: linear-gradient(to left, #ffffff, #ffffff00); --component-home-variant-fade-paper-start: linear-gradient(to right, #ffffff, #ffffff00); --component-home-variant-fade-width: clamp(3rem, 10vw, 9.375rem); --component-home-variant-footer-padding: clamp(3.25rem, 6vw, 5.25rem); --component-home-variant-header-brand-padding: clamp(0.8125rem, 1.5vw, 1.125rem); --component-home-variant-header-shade-height: clamp(6rem, 15vh, 9.75rem); --component-home-variant-header-top-padding: 0.5625rem; --component-home-variant-hero-cue-gap: clamp(1.5rem, 4vh, 2.875rem); --component-home-variant-hero-overlay-editorial: linear-gradient(to top, #060606d1 0%, #06060640 42%, #06060600 66%); --component-home-variant-hero-overlay-minimal: linear-gradient(to top, #08060899 0%, #0806081a 42%, #08060800 62%); --component-home-variant-hero-padding-bottom: clamp(3rem, 10vh, 7rem); --component-home-variant-hero-padding-bottom-mobile: clamp(2.25rem, 6vh, 3.75rem); --component-home-variant-hero-shade: linear-gradient(to bottom, #0e0e0e 0%, #0e0e0e8c 44%, #0e0e0e00 100%); --component-home-variant-minimal-concert-padding: clamp(1.125rem, 2.2vw, 1.625rem); --component-home-variant-minimal-footer-padding: clamp(2.5rem, 5vw, 4rem); --component-home-variant-minimal-grid-gap: clamp(1.125rem, 2.4vw, 2.5rem); --component-home-variant-minimal-gutter: clamp(1.25rem, 5vw, 3.5rem); --component-home-variant-minimal-hero-padding-bottom: clamp(2.5rem, 7vh, 5rem); --component-home-variant-minimal-section-padding: clamp(4.5rem, 9vw, 8rem); --component-home-variant-poster-gap: clamp(0.875rem, 1.6vw, 1.5rem); --component-home-variant-section-header-gap: clamp(1.875rem, 4vw, 3.5rem); --component-home-variant-section-padding: clamp(4.375rem, 9vw, 7.75rem); --component-home-variant-ticker-item-gap: clamp(1rem, 2vw, 2.125rem); --component-home-variant-ticker-padding: clamp(0.625rem, 1.2vw, 0.9375rem); --component-instagram-bar-padding-y: 1.25rem; --component-instagram-grid-gap: 0.625rem; --component-instagram-grid-top: 1.625rem; --component-palette-gap: var(--primitive-space-xs); --component-palette-inset: 1.125rem; --component-palette-outline-offset: var(--primitive-space-xxs); --component-palette-padding-x: var(--primitive-space-sm); --component-palette-padding-y: var(--primitive-space-xs); --component-platform-item-padding-x: var(--primitive-space-xl); --component-platform-item-padding-y: var(--primitive-space-lg); --component-platform-mark-size: 1.875rem; --component-platform-mark-width: 2.125rem; --component-ribbon-padding-x: var(--primitive-space-md); --component-ribbon-padding-y: 0.875rem; --component-section-header-padding-bottom: 0.875rem; --component-skip-hidden-offset: -100vw; --component-skip-visible-offset: var(--primitive-space-md); --primitive-aspect-ratio-portrait: 3 / 4; --primitive-aspect-ratio-poster: 12 / 17; --primitive-aspect-ratio-square: 1 / 1; --primitive-aspect-ratio-stage-portrait: 533 / 620; --primitive-border-width-strong: 2px; --primitive-border-width-thin: 1px; --primitive-breakpoint-compact: 32.5rem; --primitive-breakpoint-tablet: 51.25rem; --primitive-breakpoint-wide: 68.75rem; --primitive-color-accent-aubergine: #5b2a86; --primitive-color-accent-burgundy: #8b0d2c; --primitive-color-accent-pure: #141414; --primitive-color-anniversary-lime: #c2e45c; --primitive-color-charcoal: #0e0e0e; --primitive-color-charcoal-soft: #1c1c1c; --primitive-color-editorial-muted: #8f8f8f; --primitive-color-editorial-ruby: #c8103c; --primitive-color-editorial-ruby-readable: #e23b5f; --primitive-color-hair: #141414e6; --primitive-color-hair-soft: #1414142e; --primitive-color-header-glass: #ffffffeb; --primitive-color-ink: #141414; --primitive-color-ink-soft: #6b6b6b; --primitive-color-inverse-border: #ffffff29; --primitive-color-inverse-border-soft: #ffffff1a; --primitive-color-inverse-soft: #d8d6cf; --primitive-color-minimal-border: #14141424; --primitive-color-minimal-copy: #4a463f; --primitive-color-minimal-muted: #6c675f; --primitive-color-paper: #ffffff; --primitive-color-paper-soft: #f6f4ef; --primitive-color-paper-warm: #f4f2ee; --primitive-color-paper-warm-border: #e5e1da; --primitive-filter-color: grayscale(0); --primitive-filter-coverflow-active: none; --primitive-filter-coverflow-far: brightness(.48) saturate(.62); --primitive-filter-coverflow-near: brightness(.68) saturate(.78); --primitive-filter-monochrome: grayscale(1); --primitive-font-family-body: "Nimbus Sans", "Helvetica Neue", Arial, sans-serif; --primitive-font-family-condensed: "Apparat Extra Cond", Oswald, "Arial Narrow", sans-serif; --primitive-font-family-display: "Bodoni Moda", Didot, serif; --primitive-font-size-archive-city: 1rem; --primitive-font-size-archive-date: 1.875rem; --primitive-font-size-badge: 1.625rem; --primitive-font-size-bio-title: clamp(2rem, 3.4vw, 3rem); --primitive-font-size-body: 0.9375rem; --primitive-font-size-card: 0.78125rem; --primitive-font-size-concert-city: 1.3125rem; --primitive-font-size-copy: 0.96875rem; --primitive-font-size-date: 2.875rem; --primitive-font-size-footer-wordmark: 1.625rem; --primitive-font-size-handle: 1.5rem; --primitive-font-size-meta: 0.75rem; --primitive-font-size-micro: 0.625rem; --primitive-font-size-minimal-bio-title: clamp(1.75rem, 4vw, 3rem); --primitive-font-size-minimal-contact: clamp(1.875rem, 5vw, 4rem); --primitive-font-size-minimal-title: clamp(1.875rem, 4.4vw, 3.375rem); --primitive-font-size-schedule-day: 3.75rem; --primitive-font-size-schedule-title: clamp(2.5rem, 4.8vw, 4.75rem); --primitive-font-size-schedule-year: clamp(3rem, 6vw, 5.75rem); --primitive-font-size-section-title: clamp(2rem, 3.6vw, 3.25rem); --primitive-font-size-utility: 0.6875rem; --primitive-font-size-variant-brand: clamp(1.375rem, 2.7vw, 2.0625rem); --primitive-font-size-variant-city: clamp(2.5rem, 8vw, 7rem); --primitive-font-size-variant-contact: clamp(2.875rem, 8vw, 7.25rem); --primitive-font-size-variant-nav: clamp(0.875rem, 1.35vw, 1.0625rem); --primitive-font-size-variant-stat: clamp(3rem, 6vw, 5.25rem); --primitive-font-size-variant-title: clamp(2.375rem, 6vw, 5.25rem); --primitive-font-size-wordmark: clamp(1.85rem, 6.6vw, 4.75rem); --primitive-font-weight-bold: 700; --primitive-font-weight-medium: 500; --primitive-font-weight-regular: 400; --primitive-font-weight-semibold: 600; --primitive-layout-bio-columns: minmax(0, 5fr) minmax(0, 7fr); --primitive-layout-concert-desktop: 6.875rem minmax(0, 1fr) auto; --primitive-layout-concert-mobile: 4.5rem minmax(0, 1fr); --primitive-layout-five-columns: repeat(5, minmax(0, 1fr)); --primitive-layout-four-columns: repeat(4, minmax(0, 1fr)); --primitive-layout-minimal-albums: repeat(auto-fill, minmax(min(9.375rem, 100%), 1fr)); --primitive-layout-minimal-concert: minmax(4.75rem, 7.375rem) minmax(0, 1fr) auto; --primitive-layout-minimal-posters: repeat(auto-fit, minmax(min(8.125rem, 100%), 1fr)); --primitive-layout-one-column: minmax(0, 1fr); --primitive-layout-six-columns: repeat(6, minmax(0, 1fr)); --primitive-layout-three-columns: repeat(3, minmax(0, 1fr)); --primitive-layout-two-columns: repeat(2, minmax(0, 1fr)); --primitive-layout-variant-auto-two: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); --primitive-layout-variant-instagram: repeat(5, minmax(0, 1fr)); --primitive-letter-spacing-card: 0.09em; --primitive-letter-spacing-city: 0.12em; --primitive-letter-spacing-date-month: 0.34em; --primitive-letter-spacing-meta: 0.22em; --primitive-letter-spacing-nav: 0.3em; --primitive-letter-spacing-ribbon: 0.42em; --primitive-letter-spacing-utility: 0.28em; --primitive-letter-spacing-wordmark: 0.045em; --primitive-line-height-body: 1.65; --primitive-line-height-card: 1.3; --primitive-line-height-copy: 1.8; --primitive-line-height-display: 1.08; --primitive-line-height-meta: 1.45; --primitive-line-height-tight: 1; --primitive-motion-album-auto-interval: 4.2s; --primitive-motion-bob-duration: 1.8s; --primitive-motion-color-transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; --primitive-motion-coverflow-transition: transform 650ms cubic-bezier(.22, .61, .36, 1), opacity 650ms ease, filter 650ms ease; --primitive-motion-ease: ease; --primitive-motion-fast: 180ms; --primitive-motion-header-transition: background-color 350ms ease, border-color 350ms ease; --primitive-motion-image-transition: transform 350ms ease, filter 300ms ease; --primitive-motion-marquee-fast: 26s; --primitive-motion-marquee-medium: 44s; --primitive-motion-marquee-slow: 55s; --primitive-motion-medium: 350ms; --primitive-motion-reveal-transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, .61, .36, 1); --primitive-object-position-banner: 50% 50%; --primitive-object-position-hero: 50% 30%; --primitive-object-position-portrait: 50% 20%; --primitive-object-position-variant-bio: 50% 16%; --primitive-object-position-variant-hero: 50% 24%; --primitive-opacity-full: 1; --primitive-opacity-hidden: 0; --primitive-opacity-muted: 0.55; --primitive-opacity-quiet: 0.65; --primitive-opacity-soft: 0.82; --primitive-radius-circle: 50%; --primitive-radius-none: 0px; --primitive-size-album-editorial: clamp(14.375rem, 24vw, 20rem); --primitive-size-badge: 5rem; --primitive-size-bio-editorial: 33.3125rem; --primitive-size-container: 82.5rem; --primitive-size-container-editorial: 85rem; --primitive-size-container-minimal: 77.5rem; --primitive-size-control: 2.75rem; --primitive-size-copy-measure: 56ch; --primitive-size-coverflow-height: 32.5rem; --primitive-size-coverflow-perspective: 56rem; --primitive-size-coverflow-width: min(26rem, 80%); --primitive-size-full: 100%; --primitive-size-hero-desktop: min(66vh, 40rem); --primitive-size-hero-editorial: clamp(35rem, 92vh, 60rem); --primitive-size-hero-logo-editorial: min(20.625rem, 64vw); --primitive-size-hero-logo-minimal: min(18.75rem, 62vw); --primitive-size-hero-minimal: clamp(31.25rem, 84vh, 53.75rem); --primitive-size-hero-mobile: 24rem; --primitive-size-minimal-bio: 26.25rem; --primitive-size-palette-button: 1.75rem; --primitive-size-poster-editorial: clamp(14.375rem, 26vw, 20rem); --primitive-size-scroll-cue: 2.875rem; --primitive-size-spotify-frame: 30rem; --primitive-size-viewport: 100vw; --primitive-space-five-xl: 4.625rem; --primitive-space-four-xl: 4rem; --primitive-space-hair: 1px; --primitive-space-lg: 1.375rem; --primitive-space-md: 1rem; --primitive-space-six-xl: 5.25rem; --primitive-space-sm: 0.75rem; --primitive-space-three-xl: 2.75rem; --primitive-space-two-xl: 2.125rem; --primitive-space-xl: 1.625rem; --primitive-space-xs: 0.5rem; --primitive-space-xxs: 0.25rem; --primitive-space-zero: 0px; --primitive-transform-bob-end: translateY(.4375rem); --primitive-transform-coverflow-center: translateX(-50%) translateX(0) scale(1); --primitive-transform-coverflow-far-next: translateX(-50%) translateX(104%) scale(.46) rotateY(-40deg); --primitive-transform-coverflow-far-previous: translateX(-50%) translateX(-104%) scale(.46) rotateY(40deg); --primitive-transform-coverflow-next: translateX(-50%) translateX(64%) scale(.68) rotateY(-26deg); --primitive-transform-coverflow-previous: translateX(-50%) translateX(-64%) scale(.68) rotateY(26deg); --primitive-transform-image-hover: scale(1.035); --primitive-transform-instagram-hover: scale(1.03); --primitive-transform-marquee-end: translateX(-50%); --primitive-transform-marquee-start: translateX(0); --primitive-transform-menu-line-first-open: translateY(.3125rem) rotate(45deg); --primitive-transform-menu-line-second-open: translateY(-.3125rem) rotate(-45deg); --primitive-transform-none: none; --primitive-transform-reveal-hidden: translateY(1.5rem); --primitive-z-index-banner-cue: 1; --primitive-z-index-behind: -1; --primitive-z-index-coverflow-active: 5; --primitive-z-index-coverflow-far: 3; --primitive-z-index-coverflow-near: 4; --primitive-z-index-header: 60; --primitive-z-index-palette: 50; --primitive-z-index-skip: 100; --semantic-breakpoint-compact: var(--primitive-breakpoint-compact); --semantic-breakpoint-tablet: var(--primitive-breakpoint-tablet); --semantic-breakpoint-wide: var(--primitive-breakpoint-wide); --semantic-color-accent: var(--primitive-color-accent-burgundy); --semantic-color-border: var(--primitive-color-hair); --semantic-color-border-soft: var(--primitive-color-hair-soft); --semantic-color-inverse: var(--primitive-color-paper); --semantic-color-surface: var(--primitive-color-paper); --semantic-color-surface-soft: var(--primitive-color-paper-soft); --semantic-color-text: var(--primitive-color-ink); --semantic-color-text-muted: var(--primitive-color-ink-soft); --semantic-focus-color: var(--semantic-color-accent); --semantic-focus-offset: var(--primitive-space-xxs); --semantic-focus-width: var(--primitive-border-width-strong); --semantic-font-body: var(--primitive-font-family-body); --semantic-font-display: var(--primitive-font-family-display); --semantic-font-utility: var(--primitive-font-family-condensed); --semantic-layout-container: var(--primitive-size-container); --semantic-layout-gutter-desktop: var(--primitive-space-three-xl); --semantic-layout-gutter-mobile: var(--primitive-space-lg); --semantic-layout-section-desktop: var(--primitive-space-six-xl); --semantic-layout-section-mobile: var(--primitive-space-four-xl); --semantic-motion-color: var(--primitive-motion-color-transition); --semantic-motion-image: var(--primitive-motion-image-transition); --semantic-type-body-line: var(--primitive-line-height-body); --semantic-type-body-size: var(--primitive-font-size-body); --semantic-type-display-weight: var(--primitive-font-weight-medium); --semantic-type-utility-size: var(--primitive-font-size-utility); --semantic-type-utility-tracking: var(--primitive-letter-spacing-utility); } } @layer design-os.atomic { .ds-s-album-card { min-width: var(--primitive-space-zero); } .ds-s-album-grid { display: grid; grid-template-columns: var(--primitive-layout-two-columns); column-gap: var(--component-album-column-gap); row-gap: var(--component-album-row-gap); margin-top: var(--component-album-grid-top); } .ds-s-album-grid-compact { grid-template-columns: var(--primitive-layout-three-columns); } .ds-s-album-grid-tablet { grid-template-columns: var(--primitive-layout-four-columns); } .ds-s-album-grid-wide { grid-template-columns: var(--primitive-layout-six-columns); } .ds-s-album-image { display: block; width: var(--primitive-size-full); height: var(--primitive-size-full); object-fit: cover; transition: var(--semantic-motion-image); } .ds-s-album-link { display: block; color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-album-media { display: block; aspect-ratio: var(--primitive-aspect-ratio-square); overflow: hidden; background-color: var(--semantic-color-surface-soft); } .ds-s-album-meta { font-family: var(--semantic-font-body); font-size: var(--primitive-font-size-meta); line-height: var(--primitive-line-height-meta); letter-spacing: var(--primitive-letter-spacing-meta); text-transform: uppercase; margin-top: var(--primitive-space-xxs); color: var(--semantic-color-text-muted); } .ds-s-album-title { margin-top: var(--component-album-title-top); margin-bottom: var(--primitive-space-zero); font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-card); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-card); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; } .ds-s-anniversary-grid { display: grid; grid-template-columns: var(--primitive-layout-two-columns); gap: var(--primitive-space-sm); } .ds-s-anniversary-grid-tablet { grid-template-columns: var(--primitive-layout-three-columns); } .ds-s-anniversary-grid-wide { grid-template-columns: var(--primitive-layout-five-columns); } .ds-s-anniversary-poster-image { display: block; width: var(--primitive-size-full); height: auto; object-fit: cover; transition: var(--semantic-motion-image); } .ds-s-anniversary-poster-link { display: block; overflow: hidden; background-color: var(--semantic-color-surface); color: var(--semantic-color-text); text-decoration: none; } .ds-s-archive-card { min-height: var(--component-archive-card-min-height); padding-block: var(--component-archive-card-padding-y); padding-inline: var(--component-archive-card-padding-x); border-right-style: solid; border-right-width: var(--primitive-border-width-thin); border-right-color: var(--semantic-color-border-soft); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-thin); border-bottom-color: var(--semantic-color-border-soft); } .ds-s-archive-city { margin-top: var(--component-archive-city-top); margin-bottom: var(--primitive-space-zero); font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-archive-city); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-card); letter-spacing: var(--primitive-letter-spacing-city); text-transform: uppercase; } .ds-s-archive-date { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-archive-date); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); } .ds-s-archive-grid { display: grid; grid-template-columns: var(--primitive-layout-two-columns); border-top-style: solid; border-top-width: var(--primitive-border-width-thin); border-top-color: var(--semantic-color-border); } .ds-s-archive-grid-wide { grid-template-columns: var(--primitive-layout-five-columns); } .ds-s-archive-note { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; display: block; margin-top: var(--primitive-space-sm); color: var(--semantic-color-accent); } .ds-s-archive-venue { margin-top: var(--primitive-space-xs); color: var(--semantic-color-text-muted); font-size: var(--primitive-font-size-card); line-height: var(--primitive-line-height-meta); } .ds-s-banner-cue { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: var(--component-banner-cue-gap); padding-block: var(--component-banner-cue-padding-y); padding-inline: var(--component-banner-cue-padding-x); color: var(--semantic-color-inverse); text-decoration: none; transition: var(--semantic-motion-color); pointer-events: auto; } .ds-s-banner-cue-arrow { font-family: var(--semantic-font-body); font-size: var(--primitive-font-size-handle); line-height: var(--primitive-line-height-tight); } .ds-s-banner-cue-hover { color: var(--primitive-color-anniversary-lime); } .ds-s-banner-cue-label { white-space: nowrap; } .ds-s-banner-cue-region { position: absolute; inset-inline: var(--primitive-space-zero); bottom: var(--primitive-space-zero); z-index: var(--primitive-z-index-banner-cue); display: flex; justify-content: center; pointer-events: none; } .ds-s-banner-image { display: block; width: var(--primitive-size-full); height: var(--primitive-size-full); object-fit: cover; object-position: var(--primitive-object-position-banner); } .ds-s-banner-media { position: relative; } .ds-s-banner-message { font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-meta); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-card); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; position: absolute; inset-inline: var(--semantic-layout-gutter-mobile); bottom: var(--primitive-space-six-xl); z-index: var(--primitive-z-index-banner-cue); margin: var(--primitive-space-zero); color: var(--semantic-color-inverse); text-align: center; pointer-events: none; } .ds-s-banner-message-wide { inset-inline: var(--semantic-layout-gutter-desktop); bottom: var(--primitive-space-four-xl); } .ds-s-banner-root { position: relative; } .ds-s-bio-copy { max-width: var(--primitive-size-copy-measure); font-size: var(--primitive-font-size-copy); line-height: var(--primitive-line-height-copy); } .ds-s-bio-image { display: block; width: var(--primitive-size-full); height: var(--primitive-size-full); object-fit: cover; object-position: var(--primitive-object-position-portrait); filter: var(--primitive-filter-monochrome); } .ds-s-bio-kicker { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: block; color: var(--semantic-color-inverse); } .ds-s-bio-layout { display: grid; grid-template-columns: var(--primitive-layout-one-column); align-items: center; gap: var(--component-bio-layout-gap); } .ds-s-bio-layout-wide { grid-template-columns: var(--primitive-layout-bio-columns); } .ds-s-bio-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: inline-block; margin-top: var(--primitive-space-xl); padding-block: var(--primitive-space-xs); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-thin); border-bottom-color: var(--semantic-color-inverse); color: var(--semantic-color-inverse); text-decoration: none; } .ds-s-bio-media { position: relative; max-width: var(--primitive-size-copy-measure); margin: var(--primitive-space-zero); aspect-ratio: var(--primitive-aspect-ratio-portrait); overflow: hidden; } .ds-s-bio-paragraph { margin-top: var(--primitive-space-md); margin-bottom: var(--primitive-space-zero); } .ds-s-bio-root { background-color: var(--semantic-color-accent); color: var(--semantic-color-inverse); padding-block: var(--component-bio-padding-y); } .ds-s-bio-title { margin-top: var(--component-bio-title-top); margin-bottom: var(--component-bio-title-bottom); font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-bio-title); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-display); } .ds-s-button-outline { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; padding-block: var(--component-button-padding-y); padding-inline: var(--component-button-padding-x); border-style: solid; border-width: var(--primitive-border-width-thin); border-color: var(--semantic-color-text); background-color: var(--semantic-color-surface); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-button-status { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: inline-block; color: var(--semantic-color-text-muted); } .ds-s-concert-action { grid-column: 2; justify-self: start; } .ds-s-concert-action-wide { grid-column: auto; justify-self: end; } .ds-s-concert-city { margin: var(--primitive-space-zero); font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-concert-city); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-card); letter-spacing: var(--primitive-letter-spacing-city); text-transform: uppercase; } .ds-s-concert-date { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-date); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); text-align: center; } .ds-s-concert-details { min-width: var(--primitive-space-zero); } .ds-s-concert-list { list-style: none; margin: var(--primitive-space-zero); padding: var(--primitive-space-zero); } .ds-s-concert-month { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-date-month); text-transform: uppercase; display: block; margin-top: var(--primitive-space-xxs); } .ds-s-concert-row { display: grid; grid-template-columns: var(--primitive-layout-concert-mobile); align-items: center; column-gap: var(--component-concert-row-gap); row-gap: var(--primitive-space-sm); padding-block: var(--component-concert-row-padding-y); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-thin); border-bottom-color: var(--semantic-color-border-soft); } .ds-s-concert-row-wide { grid-template-columns: var(--primitive-layout-concert-desktop); } .ds-s-concert-venue { margin-top: var(--primitive-space-xxs); color: var(--semantic-color-text-muted); font-size: var(--primitive-font-size-card); line-height: var(--primitive-line-height-meta); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; } .ds-s-contact-grid { display: grid; grid-template-columns: var(--primitive-layout-one-column); gap: var(--component-contact-grid-gap); margin-top: var(--component-contact-grid-top); } .ds-s-contact-grid-wide { grid-template-columns: var(--primitive-layout-three-columns); } .ds-s-contact-label { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: block; color: var(--semantic-color-accent); margin-bottom: var(--primitive-space-sm); } .ds-s-contact-link { padding-block: var(--primitive-space-xs); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-contact-root { background-color: var(--semantic-color-surface-soft); padding-block: var(--component-contact-padding-y); } .ds-s-contact-text { font-size: var(--primitive-font-size-body); line-height: var(--primitive-line-height-body); } .ds-s-footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--primitive-space-sm); padding-block: var(--component-footer-legal-padding); border-top-style: solid; border-top-width: var(--primitive-border-width-thin); border-top-color: var(--semantic-color-border); color: var(--semantic-color-text-muted); font-size: var(--primitive-font-size-micro); line-height: var(--primitive-line-height-meta); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; } .ds-s-footer-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; padding-block: var(--primitive-space-xs); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-footer-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--component-footer-nav-gap); list-style: none; margin: var(--primitive-space-zero); padding-top: var(--component-footer-nav-padding-top); padding-bottom: var(--component-footer-nav-padding-bottom); padding-inline: var(--primitive-space-zero); } .ds-s-footer-root { background-color: var(--semantic-color-surface); padding-top: var(--component-footer-padding-top); } .ds-s-footer-social { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--component-footer-social-gap); list-style: none; margin: var(--primitive-space-zero); padding-block: var(--component-footer-social-padding-y); padding-inline: var(--primitive-space-zero); border-top-style: solid; border-top-width: var(--primitive-border-width-thin); border-top-color: var(--semantic-color-border-soft); } .ds-s-footer-wordmark { display: block; margin-top: var(--component-footer-wordmark-top); color: var(--semantic-color-text); font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-footer-wordmark); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-wordmark); text-align: center; text-decoration: none; } .ds-s-hero-caption { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--component-hero-caption-gap); padding-block: var(--component-hero-caption-padding-y); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-thin); border-bottom-color: var(--semantic-color-border); } .ds-s-hero-image { display: block; width: var(--primitive-size-full); height: var(--primitive-size-full); object-fit: cover; object-position: var(--primitive-object-position-hero); } .ds-s-hero-kicker { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-accent); } .ds-s-hero-media { display: block; height: var(--primitive-size-hero-mobile); overflow: hidden; background-color: var(--semantic-color-surface-soft); } .ds-s-hero-media-wide { height: var(--primitive-size-hero-desktop); } .ds-s-hero-root { padding-top: var(--primitive-space-two-xl); } .ds-s-hero-title { margin: var(--primitive-space-zero); font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-handle); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); } .ds-s-instagram-bar { background-color: var(--semantic-color-accent); color: var(--semantic-color-inverse); } .ds-s-instagram-bar-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--primitive-space-md); padding-block: var(--component-instagram-bar-padding-y); } .ds-s-instagram-bar-inner-wide { flex-direction: row; align-items: center; justify-content: space-between; } .ds-s-instagram-cta { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; padding-block: var(--primitive-space-xs); color: var(--semantic-color-inverse); text-decoration: none; } .ds-s-instagram-grid { display: grid; grid-template-columns: var(--primitive-layout-two-columns); gap: var(--component-instagram-grid-gap); margin-top: var(--component-instagram-grid-top); } .ds-s-instagram-grid-wide { grid-template-columns: var(--primitive-layout-four-columns); } .ds-s-instagram-handle { color: var(--semantic-color-inverse); font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-handle); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); text-decoration: none; } .ds-s-instagram-image { display: block; width: var(--primitive-size-full); height: var(--primitive-size-full); object-fit: cover; filter: var(--primitive-filter-monochrome); transition: var(--semantic-motion-image); } .ds-s-instagram-link { display: block; aspect-ratio: var(--primitive-aspect-ratio-square); overflow: hidden; background-color: var(--semantic-color-surface-soft); } .ds-s-interaction-focus { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } .ds-s-interaction-focus-inverse { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-color-inverse); outline-offset: var(--semantic-focus-offset); } .ds-s-interaction-link { color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-interaction-link:hover { color: var(--semantic-color-accent); } .ds-s-interaction-link:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } .ds-s-layout-container { width: var(--primitive-size-full); max-width: var(--semantic-layout-container); margin-inline: auto; padding-inline: var(--semantic-layout-gutter-mobile); } .ds-s-layout-container-wide { padding-inline: var(--semantic-layout-gutter-desktop); } .ds-s-layout-flex-between { display: flex; align-items: center; justify-content: space-between; } .ds-s-layout-flex-wrap { display: flex; align-items: center; flex-wrap: wrap; } .ds-s-layout-full-bleed { width: var(--primitive-size-full); } .ds-s-layout-section { padding-block: var(--semantic-layout-section-mobile); } .ds-s-layout-section-soft { background-color: var(--semantic-color-surface-soft); } .ds-s-layout-section-wide { padding-block: var(--semantic-layout-section-desktop); } .ds-s-layout-stack { display: grid; grid-template-columns: var(--primitive-layout-one-column); } .ds-s-palette-aubergine { background-color: var(--primitive-color-accent-aubergine); } .ds-s-palette-burgundy { background-color: var(--primitive-color-accent-burgundy); } .ds-s-palette-button { width: var(--primitive-size-palette-button); height: var(--primitive-size-palette-button); padding: var(--primitive-space-zero); border-style: solid; border-width: var(--primitive-border-width-thin); border-color: var(--semantic-color-border); border-radius: var(--primitive-radius-circle); cursor: pointer; } .ds-s-palette-horizontal { flex-direction: row; } .ds-s-palette-pure { background-color: var(--primitive-color-accent-pure); } .ds-s-palette-root { position: fixed; right: var(--component-palette-inset); bottom: var(--component-palette-inset); z-index: var(--primitive-z-index-palette); display: flex; align-items: center; gap: var(--component-palette-gap); padding-block: var(--component-palette-padding-y); padding-inline: var(--component-palette-padding-x); background-color: var(--semantic-color-surface); border-style: solid; border-width: var(--primitive-border-width-thin); border-color: var(--semantic-color-border); } .ds-s-palette-selected { outline-style: solid; outline-width: var(--primitive-border-width-strong); outline-color: var(--semantic-color-text); outline-offset: var(--component-palette-outline-offset); } .ds-s-palette-theme-aubergine { --semantic-color-accent: var(--primitive-color-accent-aubergine); } .ds-s-palette-theme-pure { --semantic-color-accent: var(--primitive-color-accent-pure); } .ds-s-palette-vertical { flex-direction: column; } .ds-s-platform-item { display: flex; align-items: center; justify-content: center; gap: var(--primitive-space-sm); padding-block: var(--component-platform-item-padding-y); padding-inline: var(--component-platform-item-padding-x); border-top-style: solid; border-top-width: var(--primitive-border-width-thin); border-top-color: var(--semantic-color-border); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-platform-label { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-city); text-transform: uppercase; } .ds-s-platform-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--component-platform-mark-width); font-family: var(--semantic-font-display); font-size: var(--component-platform-mark-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); } .ds-s-platform-root { display: grid; grid-template-columns: var(--primitive-layout-one-column); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-thin); border-bottom-color: var(--semantic-color-border); } .ds-s-platform-root-wide { grid-template-columns: var(--primitive-layout-three-columns); } .ds-s-schedule-action { margin-top: auto; padding-top: var(--primitive-space-two-xl); } .ds-s-schedule-action-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; padding-block: var(--component-button-padding-y); padding-inline: var(--component-button-padding-x); border-style: solid; border-width: var(--primitive-border-width-thin); border-color: var(--semantic-color-text); background-color: var(--semantic-color-surface); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-schedule-card { display: flex; flex-direction: column; min-height: var(--component-concert-schedule-card-min-height); padding: var(--component-concert-schedule-card-padding); background-color: var(--semantic-color-surface); } .ds-s-schedule-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--component-concert-schedule-card-top-gap); } .ds-s-schedule-card-year { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-text-muted); } .ds-s-schedule-city { margin: var(--primitive-space-zero); font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-concert-city); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-card); letter-spacing: var(--primitive-letter-spacing-city); text-transform: uppercase; } .ds-s-schedule-date { display: flex; align-items: flex-end; gap: var(--component-concert-schedule-date-gap); color: var(--semantic-color-text); } .ds-s-schedule-date-meta { display: grid; grid-template-columns: var(--primitive-layout-one-column); gap: var(--primitive-space-xxs); padding-bottom: var(--primitive-space-xxs); } .ds-s-schedule-day { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-schedule-day); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); } .ds-s-schedule-details { display: grid; grid-template-columns: var(--primitive-layout-one-column); gap: var(--primitive-space-xs); margin-top: var(--primitive-space-three-xl); } .ds-s-schedule-empty { margin-top: var(--primitive-space-three-xl); color: var(--semantic-color-text-muted); text-align: center; } .ds-s-schedule-footer { display: flex; justify-content: center; margin-top: var(--primitive-space-two-xl); } .ds-s-schedule-footer-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); padding-block: var(--primitive-space-sm); } .ds-s-schedule-grid { display: grid; grid-template-columns: var(--primitive-layout-one-column); gap: var(--primitive-space-hair); list-style: none; margin-top: var(--primitive-space-four-xl); margin-bottom: var(--primitive-space-zero); padding: var(--primitive-space-hair); background-color: var(--semantic-color-border-soft); } .ds-s-schedule-grid-tablet { grid-template-columns: var(--primitive-layout-three-columns); } .ds-s-schedule-grid-wide { grid-template-columns: var(--primitive-layout-five-columns); } .ds-s-schedule-header { display: grid; grid-template-columns: var(--primitive-layout-one-column); justify-items: center; gap: var(--primitive-space-sm); text-align: center; } .ds-s-schedule-heading { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: var(--primitive-space-md); row-gap: var(--primitive-space-xs); margin: var(--primitive-space-zero); } .ds-s-schedule-heading-title { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-schedule-title); font-weight: var(--primitive-font-weight-regular); line-height: var(--primitive-line-height-display); } .ds-s-schedule-heading-year { font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-schedule-year); font-weight: var(--primitive-font-weight-bold); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-card); } .ds-s-schedule-intro { max-width: var(--primitive-size-copy-measure); margin: var(--primitive-space-zero); color: var(--semantic-color-text-muted); font-size: var(--primitive-font-size-body); line-height: var(--primitive-line-height-body); } .ds-s-schedule-kicker { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-accent); } .ds-s-schedule-month { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-accent); } .ds-s-schedule-status { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: inline-block; color: var(--semantic-color-accent); } .ds-s-schedule-time { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-text-muted); } .ds-s-schedule-venue { margin: var(--primitive-space-zero); color: var(--semantic-color-text); font-size: var(--primitive-font-size-card); line-height: var(--primitive-line-height-meta); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; } .ds-s-section-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--primitive-space-md); padding-bottom: var(--component-section-header-padding-bottom); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-strong); border-bottom-color: var(--semantic-color-border); } .ds-s-section-kicker { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: block; color: var(--semantic-color-accent); margin-bottom: var(--primitive-space-sm); } .ds-s-section-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-section-title { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-section-title); font-weight: var(--semantic-type-display-weight); line-height: var(--primitive-line-height-display); margin: var(--primitive-space-zero); } .ds-s-shell-anniversary-badge { display: flex; align-items: center; justify-content: center; width: var(--component-header-anniversary-mobile-size); height: var(--component-header-anniversary-mobile-size); flex-shrink: 0; padding: var(--component-header-anniversary-padding); background-color: var(--component-header-anniversary-color); border-style: solid; border-width: var(--primitive-border-width-strong); border-color: var(--semantic-color-text); border-radius: var(--primitive-radius-circle); } .ds-s-shell-anniversary-badge-compact { width: var(--primitive-size-badge); height: var(--primitive-size-badge); } .ds-s-shell-anniversary-mark { display: block; width: var(--primitive-size-full); height: auto; } .ds-s-shell-brand-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primitive-space-sm); padding-top: var(--component-header-wordmark-top); padding-bottom: var(--component-header-wordmark-bottom); } .ds-s-shell-brand-row-compact { flex-direction: row; gap: var(--component-header-wordmark-gap); padding-top: var(--primitive-space-zero); padding-bottom: var(--primitive-space-sm); } .ds-s-shell-header { background-color: var(--semantic-color-surface); } .ds-s-shell-header-container { max-width: var(--primitive-size-viewport); } .ds-s-shell-language-list { display: flex; align-items: center; gap: var(--primitive-space-md); list-style: none; margin: var(--primitive-space-zero); padding: var(--primitive-space-zero); } .ds-s-shell-nav { border-top-style: solid; border-top-width: var(--primitive-border-width-thin); border-top-color: var(--semantic-color-border); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-thin); border-bottom-color: var(--semantic-color-border); } .ds-s-shell-nav-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; padding-block: var(--primitive-space-xs); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-s-shell-nav-link-current { color: var(--semantic-color-accent); } .ds-s-shell-nav-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--component-header-nav-gap-mobile); list-style: none; margin: var(--primitive-space-zero); padding-block: var(--component-header-nav-padding-y); padding-inline: var(--primitive-space-zero); } .ds-s-shell-nav-list-wide { gap: var(--component-header-nav-gap-wide); } .ds-s-shell-ribbon { background-color: var(--semantic-color-text); color: var(--semantic-color-inverse); padding-block: var(--component-ribbon-padding-y); padding-inline: var(--component-ribbon-padding-x); text-align: center; font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-micro); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-ribbon); text-transform: uppercase; } .ds-s-shell-ribbon-accent { color: var(--component-header-anniversary-color); } .ds-s-shell-root { background-color: var(--semantic-color-surface); color: var(--semantic-color-text); font-family: var(--semantic-font-body); font-size: var(--semantic-type-body-size); line-height: var(--semantic-type-body-line); min-height: var(--primitive-size-full); width: var(--primitive-size-full); overflow-x: hidden; box-sizing: border-box; } .ds-s-shell-skip-hidden { position: fixed; top: var(--component-skip-hidden-offset); left: var(--semantic-layout-gutter-mobile); z-index: var(--primitive-z-index-skip); background-color: var(--semantic-color-text); color: var(--semantic-color-inverse); padding: var(--primitive-space-sm); } .ds-s-shell-skip-visible { top: var(--component-skip-visible-offset); } .ds-s-shell-social-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--primitive-space-lg); list-style: none; margin: var(--primitive-space-zero); padding: var(--primitive-space-zero); } .ds-s-shell-social-list-wide { justify-content: flex-end; flex-wrap: nowrap; } .ds-s-shell-topbar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primitive-space-md); padding-top: var(--component-header-padding-top); padding-bottom: var(--component-header-top-bottom); } .ds-s-shell-topbar-wide { flex-direction: row; justify-content: space-between; } .ds-s-shell-wordmark { display: block; margin: var(--primitive-space-zero); color: var(--semantic-color-text); font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-wordmark); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-wordmark); text-align: center; text-decoration: none; white-space: nowrap; } .ds-s-state-accent-hover { color: var(--semantic-color-accent); } .ds-s-state-button-hover { background-color: var(--semantic-color-text); color: var(--semantic-color-inverse); } .ds-s-state-image-hover { transform: var(--primitive-transform-image-hover); } .ds-s-state-instagram-hover { filter: var(--primitive-filter-color); transform: var(--primitive-transform-instagram-hover); } .ds-s-type-display-title { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-section-title); font-weight: var(--semantic-type-display-weight); line-height: var(--primitive-line-height-display); } .ds-s-type-meta { font-family: var(--semantic-font-body); font-size: var(--primitive-font-size-meta); line-height: var(--primitive-line-height-meta); letter-spacing: var(--primitive-letter-spacing-meta); text-transform: uppercase; } .ds-s-type-utility { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; } } @layer design-os.recipes { .ds-r-anniversary-poster-gallery__root { padding-block: var(--semantic-layout-section-mobile); background-color: var(--semantic-color-surface-soft); } .ds-r-anniversary-poster-gallery__container { width: var(--primitive-size-full); max-width: var(--semantic-layout-container); margin-inline: auto; padding-inline: var(--semantic-layout-gutter-mobile); } .ds-r-anniversary-poster-gallery__header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--primitive-space-md); padding-bottom: var(--component-section-header-padding-bottom); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-strong); border-bottom-color: var(--semantic-color-border); } .ds-r-anniversary-poster-gallery__title { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-section-title); font-weight: var(--semantic-type-display-weight); line-height: var(--primitive-line-height-display); margin: var(--primitive-space-zero); } .ds-r-anniversary-poster-gallery__kicker { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: block; color: var(--semantic-color-accent); margin-bottom: var(--primitive-space-sm); } .ds-r-anniversary-poster-gallery__grid { display: grid; grid-template-columns: var(--primitive-layout-two-columns); gap: var(--primitive-space-sm); } .ds-r-anniversary-poster-gallery__link { display: block; overflow: hidden; background-color: var(--semantic-color-surface); color: var(--semantic-color-text); text-decoration: none; } .ds-r-anniversary-poster-gallery__image { display: block; width: var(--primitive-size-full); height: auto; object-fit: cover; transition: var(--semantic-motion-image); } .ds-r-anniversary-poster-gallery__image:hover { transform: var(--primitive-transform-image-hover); } .ds-r-anniversary-poster-gallery__link:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } @media (min-width: 51.25rem) { .ds-r-anniversary-poster-gallery__root { padding-block: var(--semantic-layout-section-desktop); } .ds-r-anniversary-poster-gallery__container { padding-inline: var(--semantic-layout-gutter-desktop); } .ds-r-anniversary-poster-gallery__grid { grid-template-columns: var(--primitive-layout-three-columns); } } @media (min-width: 68.75rem) { .ds-r-anniversary-poster-gallery__grid { grid-template-columns: var(--primitive-layout-five-columns); } } .ds-r-concert-schedule__root { padding-block: var(--semantic-layout-section-mobile); } .ds-r-concert-schedule__container { width: var(--primitive-size-full); max-width: var(--semantic-layout-container); margin-inline: auto; padding-inline: var(--semantic-layout-gutter-mobile); } .ds-r-concert-schedule__header { display: grid; grid-template-columns: var(--primitive-layout-one-column); justify-items: center; gap: var(--primitive-space-sm); text-align: center; } .ds-r-concert-schedule__kicker { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-accent); } .ds-r-concert-schedule__heading { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: var(--primitive-space-md); row-gap: var(--primitive-space-xs); margin: var(--primitive-space-zero); } .ds-r-concert-schedule__year { font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-schedule-year); font-weight: var(--primitive-font-weight-bold); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-card); } .ds-r-concert-schedule__title { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-schedule-title); font-weight: var(--primitive-font-weight-regular); line-height: var(--primitive-line-height-display); } .ds-r-concert-schedule__intro { max-width: var(--primitive-size-copy-measure); margin: var(--primitive-space-zero); color: var(--semantic-color-text-muted); font-size: var(--primitive-font-size-body); line-height: var(--primitive-line-height-body); } .ds-r-concert-schedule__grid { display: grid; grid-template-columns: var(--primitive-layout-one-column); gap: var(--primitive-space-hair); list-style: none; margin-top: var(--primitive-space-four-xl); margin-bottom: var(--primitive-space-zero); padding: var(--primitive-space-hair); background-color: var(--semantic-color-border-soft); } .ds-r-concert-schedule__card { display: flex; flex-direction: column; min-height: var(--component-concert-schedule-card-min-height); padding: var(--component-concert-schedule-card-padding); background-color: var(--semantic-color-surface); } .ds-r-concert-schedule__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--component-concert-schedule-card-top-gap); } .ds-r-concert-schedule__date { display: flex; align-items: flex-end; gap: var(--component-concert-schedule-date-gap); color: var(--semantic-color-text); } .ds-r-concert-schedule__day { font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-schedule-day); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); } .ds-r-concert-schedule__date-meta { display: grid; grid-template-columns: var(--primitive-layout-one-column); gap: var(--primitive-space-xxs); padding-bottom: var(--primitive-space-xxs); } .ds-r-concert-schedule__month { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-accent); } .ds-r-concert-schedule__card-year { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-text-muted); } .ds-r-concert-schedule__details { display: grid; grid-template-columns: var(--primitive-layout-one-column); gap: var(--primitive-space-xs); margin-top: var(--primitive-space-three-xl); } .ds-r-concert-schedule__city { margin: var(--primitive-space-zero); font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-concert-city); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-card); letter-spacing: var(--primitive-letter-spacing-city); text-transform: uppercase; } .ds-r-concert-schedule__venue { margin: var(--primitive-space-zero); color: var(--semantic-color-text); font-size: var(--primitive-font-size-card); line-height: var(--primitive-line-height-meta); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; } .ds-r-concert-schedule__time { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-text-muted); } .ds-r-concert-schedule__action { margin-top: auto; padding-top: var(--primitive-space-two-xl); } .ds-r-concert-schedule__action-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; padding-block: var(--component-button-padding-y); padding-inline: var(--component-button-padding-x); border-style: solid; border-width: var(--primitive-border-width-thin); border-color: var(--semantic-color-text); background-color: var(--semantic-color-surface); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-r-concert-schedule__status { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: inline-block; color: var(--semantic-color-accent); } .ds-r-concert-schedule__footer { display: flex; justify-content: center; margin-top: var(--primitive-space-two-xl); } .ds-r-concert-schedule__footer-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); padding-block: var(--primitive-space-sm); } .ds-r-concert-schedule__empty { margin-top: var(--primitive-space-three-xl); color: var(--semantic-color-text-muted); text-align: center; } .ds-r-concert-schedule__action-link:hover { background-color: var(--semantic-color-text); color: var(--semantic-color-inverse); } .ds-r-concert-schedule__footer-link:hover { color: var(--semantic-color-accent); } .ds-r-concert-schedule__action-link:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } .ds-r-concert-schedule__footer-link:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } @media (min-width: 51.25rem) { .ds-r-concert-schedule__root { padding-block: var(--semantic-layout-section-desktop); } .ds-r-concert-schedule__container { padding-inline: var(--semantic-layout-gutter-desktop); } .ds-r-concert-schedule__grid { grid-template-columns: var(--primitive-layout-three-columns); } } @media (min-width: 68.75rem) { .ds-r-concert-schedule__grid { grid-template-columns: var(--primitive-layout-five-columns); } } .ds-r-homepage-banner__root { width: var(--primitive-size-full); position: relative; } .ds-r-homepage-banner__media { display: block; height: var(--primitive-size-hero-mobile); overflow: hidden; background-color: var(--semantic-color-surface-soft); position: relative; } .ds-r-homepage-banner__image { display: block; width: var(--primitive-size-full); height: var(--primitive-size-full); object-fit: cover; object-position: var(--primitive-object-position-banner); } .ds-r-homepage-banner__message { font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-meta); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-card); letter-spacing: var(--primitive-letter-spacing-card); text-transform: uppercase; position: absolute; inset-inline: var(--semantic-layout-gutter-mobile); bottom: var(--primitive-space-six-xl); z-index: var(--primitive-z-index-banner-cue); margin: var(--primitive-space-zero); color: var(--semantic-color-inverse); text-align: center; pointer-events: none; } .ds-r-homepage-banner__cue-region { position: absolute; inset-inline: var(--primitive-space-zero); bottom: var(--primitive-space-zero); z-index: var(--primitive-z-index-banner-cue); display: flex; justify-content: center; pointer-events: none; } .ds-r-homepage-banner__cue { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: var(--component-banner-cue-gap); padding-block: var(--component-banner-cue-padding-y); padding-inline: var(--component-banner-cue-padding-x); color: var(--semantic-color-inverse); text-decoration: none; transition: var(--semantic-motion-color); pointer-events: auto; } .ds-r-homepage-banner__cue-label { white-space: nowrap; } .ds-r-homepage-banner__cue-arrow { font-family: var(--semantic-font-body); font-size: var(--primitive-font-size-handle); line-height: var(--primitive-line-height-tight); } .ds-r-homepage-banner__cue:hover { color: var(--primitive-color-anniversary-lime); } .ds-r-homepage-banner__cue:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-color-inverse); outline-offset: var(--semantic-focus-offset); } @media (min-width: 51.25rem) { .ds-r-homepage-banner__media { height: var(--primitive-size-hero-desktop); } } @media (min-width: 68.75rem) { .ds-r-homepage-banner__message { inset-inline: var(--semantic-layout-gutter-desktop); bottom: var(--primitive-space-four-xl); } } .ds-r-site-shell__root { background-color: var(--semantic-color-surface); color: var(--semantic-color-text); font-family: var(--semantic-font-body); font-size: var(--semantic-type-body-size); line-height: var(--semantic-type-body-line); min-height: var(--primitive-size-full); width: var(--primitive-size-full); overflow-x: hidden; box-sizing: border-box; } .ds-r-site-shell__skip { color: var(--semantic-color-inverse); text-decoration: none; transition: var(--semantic-motion-color); position: fixed; top: var(--component-skip-hidden-offset); left: var(--semantic-layout-gutter-mobile); z-index: var(--primitive-z-index-skip); background-color: var(--semantic-color-text); padding: var(--primitive-space-sm); } .ds-r-site-shell__ribbon { background-color: var(--semantic-color-text); color: var(--semantic-color-inverse); padding-block: var(--component-ribbon-padding-y); padding-inline: var(--component-ribbon-padding-x); text-align: center; font-family: var(--semantic-font-utility); font-size: var(--primitive-font-size-micro); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-ribbon); text-transform: uppercase; } .ds-r-site-shell__ribbon-accent { color: var(--component-header-anniversary-color); } .ds-r-site-shell__header { background-color: var(--semantic-color-surface); } .ds-r-site-shell__container { width: var(--primitive-size-full); max-width: var(--primitive-size-viewport); margin-inline: auto; padding-inline: var(--semantic-layout-gutter-mobile); } .ds-r-site-shell__topbar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primitive-space-md); padding-top: var(--component-header-padding-top); padding-bottom: var(--component-header-top-bottom); } .ds-r-site-shell__language-list { display: flex; align-items: center; gap: var(--primitive-space-md); list-style: none; margin: var(--primitive-space-zero); padding: var(--primitive-space-zero); } .ds-r-site-shell__social-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--primitive-space-lg); list-style: none; margin: var(--primitive-space-zero); padding: var(--primitive-space-zero); } .ds-r-site-shell__brand-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primitive-space-sm); padding-top: var(--component-header-wordmark-top); padding-bottom: var(--component-header-wordmark-bottom); } .ds-r-site-shell__anniversary-badge { display: flex; align-items: center; justify-content: center; width: var(--component-header-anniversary-mobile-size); height: var(--component-header-anniversary-mobile-size); flex-shrink: 0; padding: var(--component-header-anniversary-padding); background-color: var(--component-header-anniversary-color); border-style: solid; border-width: var(--primitive-border-width-strong); border-color: var(--semantic-color-text); border-radius: var(--primitive-radius-circle); } .ds-r-site-shell__anniversary-mark { display: block; width: var(--primitive-size-full); height: auto; } .ds-r-site-shell__wordmark { display: block; margin: var(--primitive-space-zero); color: var(--semantic-color-text); font-family: var(--semantic-font-display); font-size: var(--primitive-font-size-wordmark); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--primitive-letter-spacing-wordmark); text-align: center; text-decoration: none; white-space: nowrap; } .ds-r-site-shell__nav { border-top-style: solid; border-top-width: var(--primitive-border-width-thin); border-top-color: var(--semantic-color-border); border-bottom-style: solid; border-bottom-width: var(--primitive-border-width-thin); border-bottom-color: var(--semantic-color-border); } .ds-r-site-shell__nav-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--component-header-nav-gap-mobile); list-style: none; margin: var(--primitive-space-zero); padding-block: var(--component-header-nav-padding-y); padding-inline: var(--primitive-space-zero); } .ds-r-site-shell__nav-link { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; padding-block: var(--primitive-space-xs); color: var(--semantic-color-text); text-decoration: none; transition: var(--semantic-motion-color); } .ds-r-site-shell__nav-link-current { font-family: var(--semantic-font-utility); font-size: var(--semantic-type-utility-size); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-tight); letter-spacing: var(--semantic-type-utility-tracking); text-transform: uppercase; padding-block: var(--primitive-space-xs); color: var(--semantic-color-accent); text-decoration: none; transition: var(--semantic-motion-color); } .ds-r-site-shell__nav-link:hover { color: var(--semantic-color-accent); } .ds-r-site-shell__nav-link-current:hover { color: var(--semantic-color-accent); } .ds-r-site-shell__skip:focus-visible { top: var(--component-skip-visible-offset); outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } .ds-r-site-shell__wordmark:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } .ds-r-site-shell__nav-link:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } .ds-r-site-shell__nav-link-current:focus-visible { outline-style: solid; outline-width: var(--semantic-focus-width); outline-color: var(--semantic-focus-color); outline-offset: var(--semantic-focus-offset); } @media (min-width: 32.5rem) { .ds-r-site-shell__brand-row { flex-direction: row; gap: var(--component-header-wordmark-gap); padding-top: var(--primitive-space-zero); padding-bottom: var(--primitive-space-sm); } .ds-r-site-shell__anniversary-badge { width: var(--primitive-size-badge); height: var(--primitive-size-badge); } } @media (min-width: 51.25rem) { .ds-r-site-shell__container { padding-inline: var(--semantic-layout-gutter-desktop); } .ds-r-site-shell__topbar { flex-direction: row; justify-content: space-between; } .ds-r-site-shell__social-list { justify-content: flex-end; flex-wrap: nowrap; } .ds-r-site-shell__nav-list { gap: var(--component-header-nav-gap-wide); } } }