*
*/
.dims-t {
--w: auto; /* Default value for width */
--h: auto; /* Default value for height */
width: var(--w);
height: var(--h);
}
/**
* Aspect Ratio Container
*/
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
/**
* Scroll Snap
* Utilities for scroll snapping behavior
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
*/
/* Container */
.ss-y {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100dvh;
}
.ss-x {
scroll-snap-type: x mandatory;
overflow-x: scroll;
width: 100vw;
}
/* Optional snap instead of mandatory */
.ss-y-proximity {
scroll-snap-type: y proximity;
overflow-y: scroll;
}
.ss-x-proximity {
scroll-snap-type: x proximity;
overflow-x: scroll;
}
/* Child elements */
.ss-start {
scroll-snap-align: start;
}
.ss-center {
scroll-snap-align: center;
}
.ss-end {
scroll-snap-align: end;
}
/* Stop points */
.ss-stop {
scroll-snap-stop: always;
}
/**
* Grid Utilities
* Common grid patterns
*/
.grid {
display: grid;
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.gap-1 {
gap: 1rem;
}
.gap-2 {
gap: 2rem;
}
.gap-3 {
gap: 3rem;
}
/**
* Container Queries
* Modern container query utilities
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
*/
.container {
container-type: inline-size;
}
@container (min-width: $bp-ns) {
.cols-2\@sm {
columns: 2;
}
}
/**
* Backdrop Filter
* Modern glass-like effects
*/
.glass {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.5);
}
.glass-dark {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.5);
}
/**
* Writing Modes
* For vertical text and other writing directions
*/
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
writing-mode: vertical-lr;
}
/**
* Scrollbar Customization
* Hide scrollbars while maintaining functionality
*/
.scrollbar-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/**
* Scroll Prevention
*/
.noscroll {
height: 100%;
overflow: hidden;
}
/**
* Smooth Scroll
* Enable smooth scrolling on containers
*/
.scroll-smooth {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/**
* Clamp Text
* Truncate text with ellipsis after n lines
*/
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/**
* Aspect Ratios
* Common aspect ratio utilities
*/
.aspect-square {
aspect-ratio: 1/1;
}
.aspect-video {
aspect-ratio: 16/9;
}
.aspect-portrait {
aspect-ratio: 3/4;
}
/**
* Focus Styles
* Better focus indicators for accessibility
*/
.focus-ring:focus-visible {
outline: 2px solid var(--hl);
outline-offset: 2px;
}
/**
* Print Styles
* Hide elements when printing
*/
@media print {
.no-print {
display: none !important;
}
}
/*****************************************************************************
* Effects & Animations
* 💨
*****************************************************************************/
/**
* Transitions
*/
.fade-in {
opacity: 1;
transition: opacity 1s ease-out;
}
.fade-in.htmx-settling {
opacity: 0;
}
/**
* Accordion
* Animate open/close via grid-template-rows
*/
.accordion-details .accordion-text {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition-slow);
}
.accordion-details .accordion-text > * {
overflow: hidden;
}
.accordion-details[open] .accordion-text {
grid-template-rows: 1fr;
}
/**
* Press feedback
* Subtle scale on active for interactive elements
*/
.press,
button,
[role=button] {
transition: transform var(--transition), opacity var(--transition);
}
.press:active,
button:active,
[role=button]:active {
transform: scale(0.98);
}
/**
* Mix Blend Modes
*/
.mxb-m {
mix-blend-mode: multiply;
}
.mxb-d {
mix-blend-mode: difference;
}
.mxb-s {
mix-blend-mode: screen;
}
.mxb-hl {
mix-blend-mode: hard-light;
}
/**
* Shadows
*/
.shadow {
box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.1);
}
.shadow-6 {
box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.6);
}
.shadow-7 {
box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, 0.1);
}
/*****************************************************************************
* Object Fit
* 🖼️
*****************************************************************************/
/**
* Object Fit & Position
* Utilities for controlling how replaced elements are sized and positioned
*/
.obf-fill {
object-fit: fill;
}
@media screen and (min-width: 30em) {
.obf-fill-ns {
object-fit: fill;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-fill-m {
object-fit: fill;
}
}
@media screen and (min-width: 90em) {
.obf-fill-l {
object-fit: fill;
}
}
.obf-contain {
object-fit: contain;
}
@media screen and (min-width: 30em) {
.obf-contain-ns {
object-fit: contain;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-contain-m {
object-fit: contain;
}
}
@media screen and (min-width: 90em) {
.obf-contain-l {
object-fit: contain;
}
}
.obf-cover {
object-fit: cover;
}
@media screen and (min-width: 30em) {
.obf-cover-ns {
object-fit: cover;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-cover-m {
object-fit: cover;
}
}
@media screen and (min-width: 90em) {
.obf-cover-l {
object-fit: cover;
}
}
.obf-none {
object-fit: none;
}
@media screen and (min-width: 30em) {
.obf-none-ns {
object-fit: none;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-none-m {
object-fit: none;
}
}
@media screen and (min-width: 90em) {
.obf-none-l {
object-fit: none;
}
}
.obf-scale-down {
object-fit: scale-down;
}
@media screen and (min-width: 30em) {
.obf-scale-down-ns {
object-fit: scale-down;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-scale-down-m {
object-fit: scale-down;
}
}
@media screen and (min-width: 90em) {
.obf-scale-down-l {
object-fit: scale-down;
}
}
.obf-center {
object-position: center center;
}
@media screen and (min-width: 30em) {
.obf-center-ns {
object-position: center center;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-center-m {
object-position: center center;
}
}
@media screen and (min-width: 90em) {
.obf-center-l {
object-position: center center;
}
}
.obf-top {
object-position: top center;
}
@media screen and (min-width: 30em) {
.obf-top-ns {
object-position: top center;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-top-m {
object-position: top center;
}
}
@media screen and (min-width: 90em) {
.obf-top-l {
object-position: top center;
}
}
.obf-right {
object-position: center right;
}
@media screen and (min-width: 30em) {
.obf-right-ns {
object-position: center right;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-right-m {
object-position: center right;
}
}
@media screen and (min-width: 90em) {
.obf-right-l {
object-position: center right;
}
}
.obf-bottom {
object-position: bottom center;
}
@media screen and (min-width: 30em) {
.obf-bottom-ns {
object-position: bottom center;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-bottom-m {
object-position: bottom center;
}
}
@media screen and (min-width: 90em) {
.obf-bottom-l {
object-position: bottom center;
}
}
.obf-left {
object-position: center left;
}
@media screen and (min-width: 30em) {
.obf-left-ns {
object-position: center left;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.obf-left-m {
object-position: center left;
}
}
@media screen and (min-width: 90em) {
.obf-left-l {
object-position: center left;
}
}
/*****************************************************************************
* States & Interactions
* 🔘
*****************************************************************************/
/**
* Cursor States
*/
.cursor-zi {
cursor: zoom-in;
}
.cursor-pointer {
cursor: pointer;
}
.no-pointer-events {
pointer-events: none;
}
/**
* Drag & Selection Prevention
* Prevents users from dragging elements or selecting text
* Useful for images and UI elements that shouldn't be interactive
*/
.no-select {
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
/**
* Disabled State
*/
.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/**
* Visibility
*/
.hide {
visibility: hidden;
}
@media screen and (max-width: 30em) {
.hide-sm {
visibility: hidden;
}
}
@media screen and (min-width: 30em) {
.hide-ns {
visibility: hidden;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.hide-m {
visibility: hidden;
}
}
@media screen and (min-width: 90em) {
.hide-l {
visibility: hidden;
}
}
.visually-hidden,
.sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
white-space: nowrap !important;
}
/* Small Screen Utilities */
@media screen and (max-width: 30em) {
.dn-sm {
display: none;
}
}
.home {
--bg: #000;
--fg: rgb(252, 251, 242);
}
#home-vitrine {
--vitrine-bg: #000;
--vitrine-pad: 0;
}
.home .site-footer {
display: none;
}
.site-header {
position: sticky;
bottom: 0;
z-index: 100;
padding-inline: var(--site-pad);
padding-block: var(--space-3);
background: var(--bg);
}
.home .site-header {
position: fixed;
left: 0;
right: 0;
background: transparent;
}
.home .site-header .identity {
color: var(--fg);
}
.home .site-header .nav-link {
color: var(--fg);
}
.home .site-header .mobile-nav-btn__bar {
background: var(--fg);
}
.site-footer {
display: none;
}
.identity {
display: block;
text-decoration: none;
color: var(--fg);
}
.identity svg {
display: block;
height: auto;
width: 120px;
}
@media screen and (min-width: 30em) {
.identity svg {
width: 160px;
}
}
.nav-link {
font-family: var(--f-sans);
font-size: var(--text-sm);
color: var(--fg);
text-decoration: none !important;
transition: opacity var(--transition), transform var(--transition);
}
.nav-link:hover {
opacity: 0.6;
transform: translateY(-1px);
}
.nav-link:active {
transform: scale(0.98);
}
.nav-link.is-active {
opacity: 0.6;
}
[x-cloak] {
display: none !important;
}
.mobile-nav-btn {
appearance: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 5px;
z-index: 101;
}
.mobile-nav-btn__bar {
display: block;
width: 24px;
height: 2px;
background: var(--fg);
transition: transform var(--transition), opacity var(--transition);
}
.mobile-nav-btn--close .mobile-nav-btn__bar {
background: var(--fg);
}
.mobile-nav-btn--close .mobile-nav-btn__bar:first-child {
transform: rotate(45deg) translate(2px, 2px);
}
.mobile-nav-btn--close .mobile-nav-btn__bar:last-child {
transform: rotate(-45deg) translate(2px, -2px);
}
.mobile-nav-overlay {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 100;
overflow-y: auto;
}
.mobile-nav-link {
font-family: var(--f-sans);
font-size: var(--text-2xl);
color: var(--fg);
text-decoration: none;
}
.mobile-nav-link.is-active {
opacity: 0.6;
}
.mobile-nav-social {
border-top: 1px solid var(--gray);
}
.mobile-nav-social a {
color: var(--fg);
margin-right: 1rem;
text-decoration: none;
}
.mobile-nav-social svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.mobile-nav-footer .identity svg {
width: 80px;
margin: 0 auto;
}
.mobile-nav-enter {
transition: opacity var(--transition-slow);
}
.mobile-nav-enter-start {
opacity: 0;
}
.mobile-nav-enter-end {
opacity: 1;
}
.mobile-nav-leave {
transition: opacity var(--transition-slow);
}
.mobile-nav-leave-start {
opacity: 1;
}
.mobile-nav-leave-end {
opacity: 0;
}
.ex-intro,
.ex-artist,
.ab-text,
.ab-team,
.ex-docs {
padding: var(--space-8) var(--site-pad);
}
@media screen and (min-width: 30em) {
.ex-intro,
.ex-artist,
.ab-text,
.ab-team,
.ex-docs {
display: flex;
align-items: flex-start;
gap: 12rem;
}
}
.ex-intro,
.ex-artist,
.ab-text,
.ab-team {
border-top: 1px solid var(--gray);
}
.ex-intro__left,
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading,
.ex-docs__heading {
flex: 0 0 auto;
}
@media screen and (min-width: 30em) {
.ex-intro__left,
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading,
.ex-docs__heading {
width: 8rem;
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.ex-intro__left,
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading,
.ex-docs__heading {
width: 10rem;
}
}
@media screen and (min-width: 90em) {
.ex-intro__left,
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading,
.ex-docs__heading {
width: 12rem;
}
}
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading,
.ex-docs__heading {
font-size: var(--text-2xl);
}
@media screen and (min-width: 30em) {
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading,
.ex-docs__heading {
position: sticky;
top: var(--space-8);
}
}
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading {
margin: 0 0 var(--space-3);
}
@media screen and (min-width: 30em) {
.ex-artist__heading,
.ab-text__heading,
.ab-team__heading {
margin: 0;
background: var(--bg);
}
}
.ex-intro__left {
margin-bottom: var(--space-3);
}
@media screen and (min-width: 30em) {
.ex-intro__left {
margin-bottom: 0;
}
}
.ex-intro__body,
.ex-artist__body,
.ab-text__body,
.ab-team__grid {
flex: 1 1 0%;
min-width: 0;
max-width: 40rem;
}
.ex-intro__body,
.ex-artist__body,
.ab-text__body {
line-height: 1.26;
}
.ex-intro__body h3,
.ex-artist__body h3,
.ab-text__body h3 {
font-size: var(--text-2xl);
font-weight: 400;
line-height: 1.3;
margin-bottom: var(--space-5);
}
.ex-intro__body p,
.ex-artist__body p,
.ab-text__body p {
margin-top: 0;
margin-bottom: var(--space-4);
}
.ex-intro__body ul,
.ex-artist__body ul,
.ab-text__body ul {
padding-left: 1.25em;
margin-top: 0;
margin-bottom: var(--space-4);
list-style-type: circle;
}
.ex-intro__body li,
.ex-artist__body li,
.ab-text__body li {
margin-bottom: var(--space-1);
}
.ex-intro__body li > ul,
.ex-artist__body li > ul,
.ab-text__body li > ul {
margin-top: var(--space-1);
margin-bottom: 0;
}
.ex-intro__body li p,
.ex-artist__body li p,
.ab-text__body li p {
margin-bottom: 0;
}
.ab-team__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
@media screen and (max-width: 30em) {
.ab-team__grid {
grid-template-columns: 1fr;
}
}
.ab-team__name {
font-weight: 700;
margin: 0;
}
.ab-team__role,
.ab-team__email {
margin: 0;
}
.ex-list {
list-style: none;
margin: 0;
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 0;
}
.ex-row {
display: block;
position: relative;
padding: 0.5rem;
height: 50vw;
overflow: hidden;
text-decoration: none;
color: var(--fg);
cursor: pointer;
--ticker-identity-scale: 1.75;
}
@media screen and (min-width: 30em) {
.ex-row {
height: 33vh;
}
}
.ex-row wc-ticker {
display: block;
height: 100%;
--ticker-item-opacity: 0;
--ticker-stagger-duration: 500ms;
--ticker-stagger-step: 40ms;
}
@media (pointer: coarse) {
.ex-row wc-ticker {
--ticker-item-opacity: 1;
}
}
.ex-row.is-hovering wc-ticker {
--ticker-item-opacity: 1;
}
.ex-list.is-entering .ex-row wc-ticker {
--ticker-item-opacity: 1;
}
.ex-list.has-hover .ex-row:not(.is-hovering) .ex-row__identity {
opacity: 0;
}
.ex-list.has-hover .ex-row {
cursor: none;
}
.ex-cursor {
position: fixed;
pointer-events: none;
z-index: 100;
opacity: 0;
transform: translate(1rem, 0.75rem);
transition: opacity 150ms ease;
color: var(--bg) !important;
font-family: var(--f-sans);
line-height: 1.3;
padding-left: 1.25em;
mix-blend-mode: difference;
}
.ex-cursor.is-visible {
opacity: 1;
}
.ex-cursor__title {
display: block;
position: relative;
}
.ex-cursor__title::before {
content: "";
position: absolute;
left: -1.25em;
top: 0.4em;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: currentColor;
}
.ex-cursor__cta {
display: block;
opacity: 0.5;
}
.ex-row__identity {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
transition: opacity 300ms ease;
}
.ex-row.is-hovering .ex-row__identity,
.ex-list.is-entering .ex-row .ex-row__identity {
opacity: 0;
}
.ex-row__identity-img {
width: 38%;
height: 50%;
object-fit: contain;
display: block;
}
@media screen and (max-width: 30em) {
.ex-row__identity-img {
display: none;
}
}
.ex-row__identity-text {
font-size: clamp(1.25rem, 3vw, 2.5rem);
font-weight: 400;
text-align: center;
padding: 0 var(--site-pad);
}
.ex-slideshow wc-vitrine {
display: block;
width: 100%;
height: calc(100vh - var(--nav-h));
--vitrine-pad: 0;
}
.ex-slideshow wc-vitrine::part(image) {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: calc(90em - 0.0625em)) {
.ex-slideshow wc-vitrine::part(image) {
object-position: var(--focal, 50% 50%);
}
}
.ex-intro__title {
font-size: var(--text-2xl);
font-weight: 400;
margin: 0 0 var(--space-3);
line-height: 1.2;
}
.ex-intro__meta {
display: flex;
flex-direction: column;
gap: var(--space-1);
color: var(--gray-dk);
font-size: var(--text-sm);
}
.ex-intro__venue::before {
content: "— ";
}
.ex-docs {
background: var(--fg);
color: var(--bg);
}
.ex-docs__heading {
font-weight: 400;
margin: 0 0 var(--space-5);
}
@media screen and (min-width: 30em) {
.ex-docs__heading {
margin-bottom: 0;
}
}
.ex-docs__grid {
flex: 1 1 0%;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2);
}
@media screen and (min-width: 30em) {
.ex-docs__grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width: 60em) and (max-width: 90em) {
.ex-docs__grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media screen and (min-width: 90em) {
.ex-docs__grid {
grid-template-columns: repeat(6, 1fr);
}
}
.ex-docs__item {
margin: 0;
cursor: pointer;
overflow: hidden;
}
.ex-docs__item img {
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.ex-docs__item:hover img, .ex-docs__item.is-clicking img {
transform: scale(1.08);
opacity: 0.9;
}
.ex-docs .ex-docs__item img {
transition: transform 300ms ease, opacity 300ms ease;
}
.ex-lightbox {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border: 0;
padding: 0;
margin: 0;
background: var(--fg);
}
.ex-lightbox::backdrop {
background: transparent;
}
.ex-lightbox wc-vitrine {
display: block;
width: 100%;
height: 100%;
--vitrine-bg: var(--fg);
--vitrine-arrow-color: var(--bg);
}
.ex-lightbox__close {
position: absolute;
top: var(--site-pad);
right: var(--site-pad);
z-index: 10;
background: none;
border: none;
color: var(--bg);
font-size: 1.5rem;
line-height: 1;
padding: 0.5rem;
cursor: pointer;
opacity: 0.7;
}
.ex-lightbox__close:hover {
opacity: 1;
}
@keyframes ex-zoom-open {
from {
clip-path: inset(var(--zoom-t) var(--zoom-r) var(--zoom-b) var(--zoom-l) round 4px);
}
to {
clip-path: inset(0 0 0 0 round 0px);
}
}
@keyframes ex-zoom-close {
from {
clip-path: inset(0 0 0 0 round 0px);
}
to {
clip-path: inset(var(--zoom-t) var(--zoom-r) var(--zoom-b) var(--zoom-l) round 4px);
}
}
.ex-lightbox.is-opening {
animation: ex-zoom-open 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ex-lightbox.is-closing {
animation: ex-zoom-close 220ms cubic-bezier(0.4, 0, 0.8, 0.6) forwards;
}
@media (prefers-reduced-motion: reduce) {
.ex-lightbox.is-opening,
.ex-lightbox.is-closing {
animation: none;
}
}
.ex-footer {
border-top: 1px solid var(--gray);
padding: var(--space-8) var(--site-pad);
}
@media screen and (min-width: 30em) {
.ex-footer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
align-items: start;
}
}
.ex-footer__heading {
font-size: var(--text-mdzzs);
font-weight: 400;
color: var(--gray-dk);
margin: 0 0 var(--space-4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ex-footer__col + .ex-footer__col {
margin-top: var(--space-6);
}
@media screen and (min-width: 30em) {
.ex-footer__col + .ex-footer__col {
margin-top: 0;
}
}
.ex-credits {
margin: 0;
}
.ex-credits__role {
font-weight: 700;
color: var(--fg);
margin: var(--space-4) 0 0;
}
.ex-credits__role:first-child {
margin-top: 0;
}
.ex-credits__name {
margin: 0;
}
.ex-news {
margin: 0;
}
.ex-news__venue {
font-weight: 700;
margin-top: var(--space-3);
}
.ex-news__venue:first-child {
margin-top: 0;
}
.ex-news__location {
font-weight: 400;
color: var(--gray-dk);
}
.ex-news__dates {
margin: 0;
color: var(--gray-dk);
}
.ex-press__list,
.ex-awards__list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
font-size: var(--text-sm);
}
.ex-press__list li,
.ex-awards__list li {
padding: var(--space-1) 0;
}
img[loading=lazy] {
opacity: 0;
transition: opacity 300ms ease;
}
img[loading=lazy].is-loaded {
opacity: 1;
}
:has(> img[loading=lazy]:not(.is-loaded)) {
background-color: var(--gray);
}
@media (prefers-reduced-motion: reduce) {
img[loading=lazy] {
transition: none;
}
}
body > main {
view-transition-name: main-content;
}
.site-header {
view-transition-name: site-header;
}
.site-footer {
view-transition-name: site-footer;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
display: none;
}
@keyframes vt-fade-out {
to {
opacity: 0;
}
}
@keyframes vt-fade-in {
from {
opacity: 0;
}
}
::view-transition-old(main-content) {
animation: 220ms linear both vt-fade-out;
mix-blend-mode: plus-lighter;
}
::view-transition-new(main-content) {
animation: 220ms linear both vt-fade-in;
mix-blend-mode: plus-lighter;
}
::view-transition-old(main-content):only-child,
::view-transition-new(main-content):only-child {
mix-blend-mode: normal;
}
::view-transition-old(site-header) {
animation: 220ms linear both vt-fade-out;
mix-blend-mode: plus-lighter;
}
::view-transition-new(site-header) {
animation: 220ms linear both vt-fade-in;
mix-blend-mode: plus-lighter;
}
::view-transition-old(site-header):only-child,
::view-transition-new(site-header):only-child {
mix-blend-mode: normal;
}
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
animation: none;
}
[data-motion] {
opacity: 0;
}
[data-motion=fade-up] {
transform: translateY(12px);
}
[data-motion=fade-down] {
transform: translateY(-12px);
}
[data-motion=scale] {
transform: scale(0.97);
}
[data-motion=blur] {
filter: blur(4px);
}
[data-motion=stagger] {
opacity: 1;
}
@keyframes motion-fade {
to {
opacity: 1;
}
}
@keyframes motion-fade-up {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes motion-fade-down {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes motion-scale {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes motion-blur {
to {
opacity: 1;
filter: blur(0);
}
}
[data-motion=fade].is-visible {
animation: motion-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--motion-delay, calc(var(--stagger, 0) * 80ms));
}
[data-motion=fade-up].is-visible {
animation: motion-fade-up 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--motion-delay, calc(var(--stagger, 0) * 80ms));
}
[data-motion=fade-down].is-visible {
animation: motion-fade-down 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--motion-delay, calc(var(--stagger, 0) * 80ms));
}
[data-motion=scale].is-visible {
animation: motion-scale 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--motion-delay, calc(var(--stagger, 0) * 80ms));
}
[data-motion=blur].is-visible {
animation: motion-blur 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--motion-delay, calc(var(--stagger, 0) * 80ms));
}