@font-face {
  font-family: "Neue Haas Unica W1G";
  src: url("fonts/NeueHaasUnicaW1G-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Unica W1G";
  src: url("fonts/NeueHaasUnicaW1G-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --gray: #999999;
  --pink: #ff00ae;
  --orange: #ff5900;
  --blue: #00c3ff;
  --page-pad: 20px;
  --gutter: 20px;
  --cols: 12;
  --header-h: 67px;
  /* H1–P @ max 1919 */
  --fs-display: 8.33vw; /* H1 120px */
  --fs-h1: 4.44vw; /* H2 64px */
  --fs-h2: 3vw; /* H3 44px */
  --fs-h3: 2.36vw; /* H4 34px */
  --fs-body: 1.7vw; /* H5 24px */
  --fs-small: 1.11vw; /* P 16px */
  --fs-menu: 8.33vw;
  --fs-lang: 4.44vw;
  --font: "Neue Haas Unica W1G", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ls-display: -3%;
  --ls-body: -2%;
  --ls-ui: -4%;
}

@media (max-width: 1919px) {
  :root {
    --fs-display: 8.33vw; /* H1 120px */
    --fs-h1: 4.44vw; /* H2 64px */
    --fs-h2: 3vw; /* H3 44px */
    --fs-h3: 2.36vw; /* H4 34px */
    --fs-body: 1.7vw; /* H5 24px */
    --fs-small: 1.11vw; /* P 16px */
    --fs-menu: 8.33vw;
    --fs-lang: 4.44vw;
  }
}

@media (min-width: 1920px) {
  :root {
    --fs-display: 6.25vw; /* H1 120px */
    --fs-h1: 3vw; /* H2 64px */
    --fs-h2: 2.3vw; /* H3 44px */
    --fs-h3: 1.8vw; /* H4 34px */
    --fs-body: 1.25vw; /* H5 24px */
    --fs-small: 0.833vw; /* P 16px */
    --fs-menu: 6.25vw;
    --fs-lang: 3vw;
  }
}

@media (max-width: 1024px) {
  :root {
    --page-pad: 20px;
    --gutter: 20px;
    --header-h: 65px;
    --fs-display: 7.8vw; /* H1 80px */
    --fs-h1: 4.8vw; /* H2 50px */
    --fs-h2: 3.5vw; /* H3 36px */
    --fs-h3: 2.5vw; /* H4 26px */
    --fs-body: 1.9vw; /* H5 20px */
    --fs-small: 1.56vw; /* P 16px */
    --fs-menu: 7.8vw;
    --fs-lang: 4.8vw;
  }
}

@media (max-width: 560px) {
  :root {
    --page-pad: 10px;
    --gutter: 10px;
    --header-h: auto;
    --fs-display: 14.3vw; /* H1 56px */
    --fs-h1: 9.7vw; /* H2 38px */
    --fs-h2: 6.66vw; /* H3 26px */
    --fs-h3: 5.1vw; /* H4 20px */
    --fs-body: 4.1vw; /* H5 16px */
    --fs-small: 3vw; /* P 12px */
    --fs-menu: 14.3vw;
    --fs-lang: 9.7vw;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 700;
  font-synthesis: none;
  line-height: 115%;
  letter-spacing: var(--ls-body);
  color: var(--black);
  background: var(--white);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

main,
.site-footer {
  opacity: 0;
  transition: opacity 0.45s ease;
}

body.is-ready:not(.is-leaving) main,
body.is-ready:not(.is-leaving) .site-footer {
  opacity: 1;
}

body.is-leaving main,
body.is-leaving .site-footer {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  main,
  .site-footer {
    opacity: 1;
    transition: none;
  }
}

img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.featured-media,
.event-media,
.expo-image,
.exhibition-image,
.card-media,
.artist-project-media,
.about-hero-image,
.about-mosaic-sm,
.about-mosaic-lg,
.about-wide,
.about-figure {
  background-color: #999999;
}

img.is-media {
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

img.is-media.is-shown {
  opacity: 1;
}

.media img,
.featured-media img,
.expo-image img,
.card-media img,
.about-figure img,
.about-mosaic img,
.about-hero-image img,
.about-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a,
a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

input,
textarea,
.showcase-essay,
.showcase-essay * {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.showcase-essay a,
.showcase-essay a:hover {
  cursor: pointer;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  appearance: none;
}

button {
  padding: 0;
  cursor: pointer;
}

a,
button,
input,
label {
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  list-style: none;
}

.page-shell {
  width: 100%;
  padding-inline: var(--page-pad);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.content-error::before {
  content: "Unable to load site content.";
  display: block;
  padding: 12px 16px;
  background: #fee2e2;
  color: #991b1b;
  text-align: center;
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------------ */
/* Header                                                                */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  height: var(--header-h);
  transform: translateY(0);
  transition: transform 0.35s ease;
}

body[data-page="home"] .site-header {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

body.header-hidden:not(.menu-open) .site-header {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo {
  display: block;
  width: 120px;
  height: 27px;
  flex-shrink: 0;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.menu-button {
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: var(--ls-ui);
  text-transform: capitalize;
  line-height: 90%;
  cursor: pointer;
  color: var(--black);
  transition: color 0.15s ease;
}

.menu-button:hover,
.menu-button:focus-visible {
  color: #999999;
}

@media (max-width: 1024px) {
  .logo {
    width: 111px;
    height: 25px;
  }
}

@media (max-width: 560px) {
  .site-header {
    height: auto;
  }

  .header-inner,
  .menu-curtain-header {
    height: auto;
    padding-block: 10px;
  }

  .logo {
    width: 95px;
    height: 22px;
  }
}

/* ------------------------------------------------------------------ */
/* Menu curtain                                                          */
/* ------------------------------------------------------------------ */

.menu-curtain {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--white);
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 0.5s ease, visibility 0s linear 0.5s;
}

.menu-curtain--open {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.5s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .menu-curtain,
  .menu-curtain--open {
    transition: none;
  }
}

body.menu-open {
  overflow: hidden;
}

.menu-curtain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: var(--header-h);
  visibility: hidden;
  pointer-events: none;
}

.menu-curtain-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  padding-top: clamp(20px, 8dvh, 83px);
  padding-inline: var(--page-pad);
}

.menu-curtain-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-curtain-list li {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  border-top: 10px solid var(--black);
}

.menu-curtain-list li:last-child {
  border-bottom: 10px solid var(--black);
}

.menu-curtain-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 4px 10px;
  font-size: min(var(--fs-menu), 11dvh);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 90%;
  text-align: center;
  text-transform: capitalize;
  color: var(--black);
  transition: color 0.15s ease;
}

.menu-curtain-list a:hover,
.menu-curtain-list a:focus-visible {
  color: var(--pink);
}

.menu-curtain-lang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex-shrink: 0;
  gap: var(--gutter);
  width: 100%;
  margin-top: 0;
  padding: clamp(12px, 2dvh, 20px) var(--page-pad) clamp(12px, 2dvh, 20px);
}

.menu-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 10px 16px;
  background: var(--gray);
  color: var(--white);
  font-size: min(var(--fs-lang), 6.2dvh);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 90%;
  text-transform: capitalize;
  transition: background 0.15s ease;
}

.menu-lang-btn--active,
.menu-lang-btn.is-active,
.menu-lang-btn[aria-pressed="true"] {
  background: var(--black);
  color: var(--white);
}

.menu-lang-btn:hover,
.menu-lang-btn:focus-visible {
  background: var(--black);
}

@media (max-width: 1024px) {
  .menu-curtain-nav {
    flex: 0 0 auto;
    padding-top: 85px;
  }

  .menu-curtain-list {
    flex: 0 0 auto;
  }

  .menu-curtain-list li {
    display: block;
    flex: none;
  }

  .menu-curtain-list a {
    min-height: 107px;
    padding: 10px;
    font-size: var(--fs-menu);
  }

  .menu-curtain-lang {
    margin-top: auto;
    padding: 20px var(--page-pad) 20px;
  }

  .menu-lang-btn {
    padding: 10px 10px 20px;
    font-size: var(--fs-lang);
  }
}

@media (max-width: 560px) {
  .menu-curtain-nav {
    padding-top: 47px;
  }

  .menu-curtain-list a {
    min-height: 76px;
    padding: 10px 8px;
  }

  .menu-curtain-lang {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 auto;
    align-items: start;
    gap: 10px;
    margin-top: 0;
    padding: 10px var(--page-pad) calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .menu-lang-btn {
    height: auto;
    min-height: 0;
    padding: 10px;
  }
}

/* ------------------------------------------------------------------ */
/* Footer                                                                */
/* ------------------------------------------------------------------ */

.site-footer {
  background: var(--black);
  color: var(--white);
  margin-top: 300px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  min-height: 442px;
}

.footer-brand {
  grid-column: 1 / span 2;
  min-width: 0;
}

.footer-grid > .footer-column:nth-child(2) {
  grid-column: 4 / span 3;
}

.footer-grid > .footer-column:nth-child(3) {
  grid-column: 7 / span 3;
}

.footer-grid > .footer-column:nth-child(4) {
  grid-column: 10 / span 3;
}

.footer-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
}

.footer-column h3,
.footer-column .footer-heading {
  margin: 0 0 20px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  text-transform: uppercase;
  color: var(--gray);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li + li {
  margin-top: 5px;
}

.footer-links a {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--white);
}

.footer-links a:hover,
.footer-bottom a:hover,
.newsletter-form button:hover {
  text-decoration: underline;
  text-underline-position: from-font;
}

.footer-hours,
.footer-hours.prose {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 125%;
  color: var(--gray);
  white-space: pre-line;
}

.newsletter-form {
  display: grid;
  gap: 10px;
  max-width: 100%;
}

.newsletter-form input {
  width: 100%;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid var(--gray);
  background: transparent;
  color: var(--gray);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
}

.newsletter-form input::placeholder {
  color: var(--gray);
}

.newsletter-form input:focus {
  outline: none;
  border-bottom-color: var(--white);
  color: var(--white);
}

.newsletter-form button {
  width: fit-content;
  margin-top: 2px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--white);
}

.footer-bottom {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: end;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--gray);
}

.footer-bottom p:first-child {
  grid-column: 1 / span 3;
}

.footer-bottom p:last-child {
  grid-column: 10 / span 3;
}

.footer-bottom p {
  margin: 0;
}

.footer-copyright,
.footer-credits {
  line-height: 130%;
}

.footer-bottom a {
  color: var(--white);
}

@media (max-width: 1024px) {
  .footer-grid {
    min-height: 380px;
  }

  .footer-copyright-rest,
  .footer-credits [data-i18n] {
    display: block;
  }
}

@media (max-width: 560px) {
  .site-footer {
    margin-top: 200px;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "info redes"
      "news news";
    gap: 70px 10px;
    min-height: 0;
  }

  .footer-brand,
  .footer-grid > .footer-column:nth-child(2),
  .footer-grid > .footer-column:nth-child(3),
  .footer-grid > .footer-column:nth-child(4) {
    grid-column: auto;
  }

  .footer-brand {
    grid-area: brand;
  }

  .footer-grid > .footer-column:nth-child(2) {
    grid-area: redes;
  }

  .footer-grid > .footer-column:nth-child(3) {
    grid-area: info;
  }

  .footer-grid > .footer-column:nth-child(4) {
    grid-area: news;
  }

  .footer-logo {
    width: 24.3%;
    max-width: 24.3%;
  }

  .footer-column h3,
  .footer-column .footer-heading {
    margin-bottom: 15px;
  }

  .footer-links li + li {
    margin-top: 7px;
  }

  .newsletter-form {
    margin-top: 0;
  }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 100px;
  }

  .footer-credits {
    order: 1;
  }

  .footer-copyright {
    order: 2;
  }

  .footer-bottom p:first-child,
  .footer-bottom p:last-child {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage intro bars                                                   */
/* ------------------------------------------------------------------ */

.home-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stack";
  width: 100%;
  overflow: visible;
  --home-bar-h: 50px;
}

.home-bars--back,
.home-featured-wrap {
  grid-area: stack;
}

.home-bars {
  position: sticky;
  top: 0;
  z-index: 1;
  align-self: start;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
}

.home-bars--front {
  position: sticky;
  top: calc(100dvh - var(--page-pad) - var(--home-bar-h));
  z-index: 3;
  align-self: start;
  height: var(--home-bar-h);
  pointer-events: none;
}

.home-bars--front::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--page-pad);
  background: var(--white);
}

.home-bars--back {
  transition: opacity 0.45s ease;
}

.home-bars--back.is-faded {
  opacity: 0;
}

.home-bar {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  background: var(--black);
  transition: top 0.35s ease;
}

.home-bars--front .home-bar {
  top: 0;
  height: 100%;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-bar {
    transition: none;
  }

  .home-bars--back {
    transition: none;
  }
}

.home-featured-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "feat";
}

.home-featured,
.home-bars--front {
  grid-area: feat;
}

.home-featured {
  position: relative;
  z-index: 2;
  padding-top: 65vh;
  padding-bottom: calc(var(--home-bar-h) + var(--page-pad));
}

.home-featured .featured {
  margin-top: 0;
}

.home-featured .featured + .featured {
  margin-top: 20px;
}

@media (max-width: 560px) {
  .home-stage {
    --home-bar-h: 30px;
  }

  .home-featured .featured + .featured {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-featured {
    padding-top: 0;
  }

  .home-bars {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage featured cards                                               */
/* ------------------------------------------------------------------ */

.featured {
  margin-top: 133px;
}

.featured + .featured {
  margin-top: 20px;
}

.home-featured > .featured:nth-child(1) {
  --accent: var(--pink);
}

.home-featured > .featured:nth-child(2) {
  --accent: var(--orange);
}

.home-featured > .featured:nth-child(3) {
  --accent: var(--blue);
}

.featured-meta {
  display: grid;
  grid-template-columns: 24.64% minmax(0, 1fr);
}

.featured-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  padding: 10px;
  background: var(--accent, var(--pink));
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 90%;
  text-transform: uppercase;
  color: var(--black);
  text-align: left;
}

.featured-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  min-height: 34px;
  padding: 10px;
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 90%;
}

.featured-details span:nth-child(n + 2) {
  color: var(--gray);
}

.featured-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.featured-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: 1;
  padding: 20px 40px;
  text-align: center;
  background: var(--accent, var(--pink));
}

.featured-title {
  margin: 0;
  max-width: 89%;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 100%;
  color: var(--black);
}

.featured-title--long {
  letter-spacing: var(--ls-body);
}

.featured-subtitle {
  margin: 0;
  max-width: 89%;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 100%;
  color: var(--white);
}

.featured-inner {
  display: block;
  color: inherit;
  text-decoration: none;
}

.featured-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured:hover .featured-media img {
  transform: scale(1.05);
}

@media (max-width: 1024px) {
  .featured {
    margin-top: 135px;
  }

  .featured-meta {
    grid-template-columns: 24.5% minmax(0, 1fr);
  }

  .featured-badge,
  .featured-details {
    min-height: 36px;
  }

  .featured-panel {
    padding: 20px 40px;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .featured {
    margin-top: 78px;
  }

  .featured + .featured {
    margin-top: 10px;
  }

  .featured-meta {
    grid-template-columns: 1fr 1fr;
  }

  .featured-details {
    display: contents;
  }

  .featured-badge,
  .featured-details span {
    min-height: 24px;
    padding: 7px;
  }

  .featured-details span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--black);
    color: var(--white);
    text-align: left;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--ls-body);
    line-height: 90%;
  }

  .featured-details span:nth-child(n + 2) {
    color: var(--gray);
  }

  .featured-body {
    grid-template-columns: 1fr;
  }

  .featured-media {
    order: -1;
  }

  .featured-panel {
    aspect-ratio: auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 25px 10px 30px;
    text-align: center;
  }

  .featured-title,
  .featured-subtitle {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Upcoming events                                                       */
/* ------------------------------------------------------------------ */

.events-section {
  margin-top: 200px;
  padding-bottom: 0;
}

.events-heading,
.page-title {
  margin: 0 auto 150px;
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 90%;
  text-align: center;
}

.page-title {
  margin: 133px auto 0;
}

.events-list {
  width: 100%;
}

.event-item {
  position: relative;
  display: grid;
  grid-template-columns: 32.357% minmax(0, 1fr);
  gap: var(--gutter);
  padding: 10px 0 70px;
  border-top: 5px solid var(--black);
  transition: border-color 0.45s ease;
}

.event-item:not(:has(.event-media)) {
  grid-template-columns: minmax(0, 1fr);
}

.event-item:last-child {
  border-bottom: 5px solid var(--black);
}

.event-item:hover {
  border-top-color: var(--pink);
}

.event-media {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.event-media.has-ratio {
  aspect-ratio: var(--media-ratio);
}

.event-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-media.has-ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.event-item:hover .event-media img {
  transform: scale(1.05);
}

.event-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 10px;
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 90%;
  text-transform: uppercase;
}

.event-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0;
  min-width: 0;
}

.event-top {
  display: grid;
  grid-template-columns: 49% minmax(0, 1fr);
  gap: var(--gutter);
  margin-bottom: 50px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
}

.event-date {
  color: var(--gray);
}

.event-location {
  color: var(--black);
}

.event-title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 100%;
  color: var(--black);
  transition: color 0.45s ease;
}

.event-item:hover .event-title {
  color: var(--pink);
}

@media (prefers-reduced-motion: reduce) {
  img.is-media,
  img.is-media.is-shown {
    opacity: 1;
    transition: none;
  }

  .featured-media img,
  .event-media img,
  .expo-image img,
  .exhibition-image img,
  .residency-card .card-media img,
  .community-card .card-media img,
  .artist-project-media img,
  .artist-panel,
  .artist-name,
  .artist-rule,
  .artist-project-title,
  .residency-card .card-rule,
  .community-card .card-rule,
  .residency-card .card-category,
  .community-card .card-tag,
  .community-card .card-people,
  .event-item,
  .event-title,
  .expo-item,
  .exhibition-item,
  .expo-title,
  .exhibition-title {
    transition: none;
  }

  .featured:hover .featured-media img,
  .event-item:hover .event-media img,
  a.expo-item:hover .expo-image img,
  a.exhibition-item:hover .expo-image img,
  a.exhibition-item:hover .exhibition-image img,
  .residency-card:hover .card-media img,
  a.community-card:hover .card-media img,
  .artist-project:hover .artist-project-media img {
    transform: none;
  }
}

.event-artist {
  margin: 0 0 50px;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 110%;
  color: var(--black);
}

.event-metas {
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 100%;
}

.event-meta {
  width: 50%;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
}

.event-meta-label {
  display: block;
  color: var(--gray);
}

.event-meta-value {
  display: block;
  color: var(--black);
}

.event-link {
  display: block;
  color: var(--black);
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (max-width: 1024px) {
  .events-section {
    margin-top: 200px;
    padding-bottom: 0;
  }

  .events-heading {
    margin-bottom: 150px;
  }

  .event-item {
    grid-template-columns: 32% minmax(0, 1fr);
  }

  .event-top {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
  }

  .event-artist {
    margin-bottom: 30px;
  }
}

@media (max-width: 560px) {
  .events-section {
    margin-top: 123px;
    padding-bottom: 0;
  }

  .events-heading {
    margin: 0 0 70px;
  }

  .event-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 70px;
  }

  .event-content {
    display: contents;
  }

  .event-top {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
  }

  .event-media {
    order: 2;
    width: 100%;
  }

  .event-title {
    order: 3;
    margin: 0;
  }

  .event-artist {
    order: 4;
    margin: 0 0 5px;
  }

  .event-title + .event-artist {
    margin-top: -5px;
  }

  .event-metas {
    order: 5;
    max-width: 100%;
    gap: 10px;
  }
}

/* ------------------------------------------------------------------ */
/* Inner page chrome: titles, vista, filters                             */
/* ------------------------------------------------------------------ */

.page-head {
  margin-top: 133px;
}

.page-title + .view-toggle,
.page-title + .filter-row,
.page-head + .view-toggle,
.page-head + .filter-row {
  margin-top: 100px;
}

.view-toggle,
.filter-row {
  display: grid;
  gap: 10px;
  margin: 100px 0 100px;
}

.view-toggle {
  gap: 5px;
}

.view-label,
.filter-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 110%;
  color: var(--gray);
}

.view-options,
.filter-options {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 110%;
}

.view-btn,
.filter-btn {
  color: var(--gray);
  transition: color 0.15s ease;
}

.view-btn:hover,
.filter-btn:hover {
  color: var(--black);
}

.view-btn.is-active,
.view-btn[aria-pressed="true"],
.filter-btn.is-active,
.filter-btn[aria-pressed="true"],
.filter-btn[aria-current="true"] {
  color: var(--black);
}

.view-sep,
.filter-sep {
  white-space: pre;
  padding: 0 8px;
  color: var(--gray);
}

body[data-page="community"] .filter-sep {
  padding: 0;
}

body[data-page="community"] .filter-row,
body[data-page="community"] .filter-row[hidden] {
  display: grid !important;
}

@media (max-width: 1024px) {
  .page-head,
  .page-title {
    margin-top: 135px;
  }
}

@media (max-width: 560px) {
  .page-head,
  .page-title {
    margin-top: 78px;
  }

  body[data-page="exhibitions"] .page-title {
    text-align: center;
  }

  .page-title + .view-toggle,
  .page-title + .filter-row,
  .page-head + .view-toggle,
  .page-head + .filter-row,
  .view-toggle,
  .filter-row {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .filter-row {
    gap: 5px;
  }

  body[data-page="exhibitions"] .filter-options,
  body[data-page="community"] .filter-options {
    font-size: 5.47vw;
    line-height: 120%;
  }

  body[data-page="artists"] .page-title {
    text-align: left;
  }

  body[data-page="community"] .page-title {
    text-align: center;
  }

  .view-sep,
  .filter-sep {
    padding: 0 4px;
  }
}

/* ------------------------------------------------------------------ */
/* Exhibitions expanded                                                  */
/* ------------------------------------------------------------------ */

.expo-list,
.exhibitions-list {
  width: 100%;
  padding-bottom: 0;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.expo-list.is-fading,
.exhibitions-list.is-fading {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .expo-list,
  .exhibitions-list {
    transition: none;
  }
}

.expo-item,
.exhibition-item {
  display: grid;
  grid-template-columns: 23.93% minmax(0, 49.29%) 23.93%;
  gap: var(--gutter);
  align-items: start;
  padding: 20px 0 150px;
  border-top: 10px solid var(--black);
  color: inherit;
  transition: border-color 0.45s ease;
}

a.expo-item:hover,
a.exhibition-item:hover {
  border-top-color: var(--pink);
}

.expo-meta,
.expo-side {
  min-width: 0;
}

.expo-dates,
.exhibition-dates {
  display: flex;
  flex-direction: column;
  margin: 0 0 50px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--gray);
}

.expo-venue,
.exhibition-venue {
  color: var(--black);
}

.expo-artists,
.exhibition-artists {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 110%;
  color: var(--black);
}

.expo-main,
.expo-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.expo-title,
.exhibition-title {
  margin: 0 0 50px;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 100%;
  color: var(--black);
  text-align: center;
  transition: color 0.45s ease;
}

.expo-title--long,
.exhibition-title--long {
  letter-spacing: var(--ls-display);
}

a.expo-item:hover .expo-title,
a.exhibition-item:hover .exhibition-title,
a.expo-item:hover .exhibition-title {
  color: var(--pink);
}

.expo-image,
.exhibition-image {
  position: relative;
  width: 100%;
  aspect-ratio: 690 / 460;
  overflow: hidden;
}

.expo-image img,
.exhibition-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

a.expo-item:hover .expo-image img,
a.exhibition-item:hover .expo-image img,
a.exhibition-item:hover .exhibition-image img {
  transform: scale(1.05);
}

.expo-curator,
.exhibition-curator {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  text-align: right;
  color: var(--black);
}

.expo-curator-label,
.exhibition-curator-label {
  color: var(--gray);
}

.expo-list--expanded.is-hidden,
.exhibitions-expanded.is-hidden {
  display: none;
}

@media (max-width: 1024px) {
  .expo-item,
  .exhibition-item {
    grid-template-columns: 24% minmax(0, 1fr) 24%;
  }

  .expo-dates,
  .exhibition-dates {
    margin-bottom: 30px;
  }

  .expo-title,
  .exhibition-title {
    margin-bottom: 30px;
  }

  .expo-title--long,
  .exhibition-title--long {
    letter-spacing: var(--ls-body);
  }
}

@media (max-width: 560px) {
  .expo-item,
  .exhibition-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 0;
    padding: 10px 0 70px;
  }

  .expo-item:last-child,
  .exhibition-item:last-child {
    padding-bottom: 0;
  }

  .expo-meta,
  .expo-side,
  .expo-main,
  .expo-center {
    display: contents;
  }

  .expo-title,
  .exhibition-title {
    order: 1;
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 0 15px;
  }

  .expo-artists,
  .exhibition-artists {
    order: 2;
    grid-column: 1 / -1;
    margin: 0 0 15px;
    text-align: center;
  }

  .expo-image,
  .exhibition-image {
    order: 3;
    grid-column: 1 / -1;
    aspect-ratio: 382 / 254;
    margin: 0 0 10px;
  }

  .expo-dates,
  .exhibition-dates {
    order: 4;
    grid-column: 1;
    margin: 0;
  }

  .expo-curator,
  .exhibition-curator {
    order: 5;
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    letter-spacing: var(--ls-body);
  }
}

/* ------------------------------------------------------------------ */
/* Exhibitions minimized                                                 */
/* ------------------------------------------------------------------ */

.expo-rows,
.expo-list--minimized,
.exhibitions-minimized {
  display: none;
  width: 100%;
  padding-bottom: 0;
}

.expo-rows.is-active,
.expo-list--minimized.is-active,
.exhibitions-minimized.is-active {
  display: block;
}

.expo-row,
.exhibition-row {
  display: grid;
  grid-template-columns: 23.93% 32.36% minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding: 10px 0;
  border-top: 5px solid var(--black);
  background: transparent;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--black);
  transition: background-color 0.45s ease;
}

.expo-row:last-child,
.exhibition-row:last-child {
  border-bottom: 5px solid var(--black);
}

a.expo-row:hover,
a.exhibition-row:hover {
  background: var(--pink);
}

.expo-row-copy,
.exhibition-row-copy {
  display: contents;
}

.expo-row-date,
.exhibition-row-date {
  color: var(--gray);
  transition: color 0.45s ease;
}

.expo-row-title,
.exhibition-row-title {
  font-weight: 800;
  color: var(--black);
}

.expo-row-artists,
.exhibition-row-artists,
a.expo-row .expo-row-artists,
a.exhibition-row .exhibition-row-artists {
  color: var(--gray);
  transition: color 0.45s ease;
}

a.expo-row:hover .expo-row-date,
a.expo-row:hover .expo-row-artists,
a.exhibition-row:hover .exhibition-row-date,
a.exhibition-row:hover .exhibition-row-artists {
  color: var(--white);
}

a.expo-row:hover .expo-row-title,
a.exhibition-row:hover .exhibition-row-title {
  color: var(--black);
}

@media (max-width: 1024px) {
  .expo-row,
  .exhibition-row {
    grid-template-columns: 24% 32% minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .expo-row,
  .exhibition-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 0;
    padding: 10px 0;
    align-items: start;
  }

  .expo-row-copy,
  .exhibition-row-copy {
    display: flex;
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ */
/* Residencies + community cards                                         */
/* ------------------------------------------------------------------ */

.cards-grid,
.residency-grid,
.community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 74px var(--gutter);
  padding-bottom: 0;
}

.card,
.residency-card,
.community-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
}

.card.is-hidden,
.residency-card.is-hidden,
.community-card.is-hidden,
.card[hidden] {
  display: none;
}

.card-rule {
  display: block;
  width: 100%;
  height: 5px;
  background: var(--black);
}

.card:not(:has(.card-rule))::before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: var(--black);
}

.card-category {
  margin: 20px 0 20px;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 115%;
}

.community-card .card-top,
.card--community .card-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gutter);
  margin: 20px 0;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
}

.community-card .card-dates,
.card--community .card-dates {
  grid-column: 1;
  grid-row: 1;
}

.community-card .card-venue,
.card--community .card-venue {
  grid-column: 2;
  grid-row: 1;
}

.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.card-media::after,
.card-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.card-media::after {
  content: "";
}

.card-media:has(.card-overlay)::after {
  content: none;
}

.card-title {
  position: absolute;
  z-index: 2;
  left: 5%;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 100%;
  color: var(--white);
  text-align: center;
}

.card[style*="--accent"] .card-title {
  color: var(--accent, var(--white));
}

.residency-card .card-rule {
  transition: background-color 0.45s ease;
}

.residency-card[style*="--accent"] .card-rule {
  background: var(--accent);
}

.residency-card[style*="--accent"] .card-category {
  color: var(--accent);
}

.residency-card[style*="--accent"] .card-title {
  color: var(--white);
}

.residency-card .card-category {
  display: block;
  width: 100%;
  margin: 20px 0;
  text-align: center;
  color: var(--gray);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 110%;
  text-decoration: none;
  cursor: default;
  transition: color 0.45s ease;
}

.residency-card a.card-category {
  cursor: pointer;
}

.residency-card a.card-media {
  display: block;
  cursor: pointer;
}

.residency-card .card-media img,
.community-card .card-media img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.residency-card:hover .card-rule {
  background: var(--orange);
}

.residency-card:hover .card-category {
  color: var(--orange);
}

.residency-card:hover .card-media img,
a.community-card:hover .card-media img {
  transform: scale(1.05);
}

.community-card .card-rule {
  transition: background-color 0.45s ease;
}

.community-card .card-tag {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  padding: 10px;
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 90%;
  text-transform: uppercase;
  transition: background-color 0.45s ease, color 0.45s ease;
}

.community-card .card-title,
.community-card[style*="--accent"] .card-title,
a.community-card:hover .card-title {
  color: var(--white);
}

a.community-card:hover .card-rule {
  background: var(--blue);
}

a.community-card:hover .card-tag {
  background: var(--blue);
  color: var(--white);
}

a.community-card:hover .card-people {
  color: var(--blue);
}

.residency-card .card-status {
  font-weight: 700;
  line-height: 115%;
}

.residency-card span.card-action {
  cursor: default;
}

.card-status,
.card-tag {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  padding: 10px;
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 90%;
  text-transform: uppercase;
}

.card-footer,
.card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px var(--gutter);
  margin-top: 20px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
}

.card-dates {
  color: var(--gray);
}

.card-venue {
  color: var(--black);
  grid-column: 1;
}

.card-action,
.card-action a {
  color: var(--black);
  text-decoration: underline;
  text-underline-position: from-font;
  justify-self: start;
  grid-column: 2;
  grid-row: 1;
}

.card-people {
  margin-top: 20px;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 110%;
  color: var(--black);
  text-align: center;
  transition: color 0.45s ease;
}

body[data-page="community"] .community-grid {
  gap: 150px var(--gutter);
}

body[data-page="residencies"] .community-grid {
  margin-top: 150px;
  gap: 150px var(--gutter);
}

body[data-page="residencies"] .card-meta {
  gap: 5px var(--gutter);
}

@media (max-width: 1024px) {
  .cards-grid,
  .residency-grid,
  .community-grid {
    gap: 50px var(--gutter);
  }

  body[data-page="community"] .community-grid {
    gap: 150px var(--gutter);
  }

  body[data-page="residencies"] .community-grid {
    margin-top: 150px;
    gap: 150px var(--gutter);
  }
}

@media (max-width: 560px) {
  .cards-grid,
  .residency-grid,
  .community-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  body[data-page="community"] .community-grid {
    gap: 70px;
  }

  body[data-page="residencies"] .community-grid {
    margin-top: 70px;
    gap: 70px;
  }

  .card-category {
    margin: 15px 0 15px;
  }

  .residency-card .card-category {
    margin: 10px 0 15px;
  }

  .card-footer,
  .card-meta {
    gap: 10px;
  }

  .community-card .card-top,
  .card--community .card-top {
    gap: var(--gutter);
    margin: 10px 0;
  }

  .community-card .card-people {
    margin-top: 15px;
  }

  .residency-card .card-meta {
    margin-top: 10px;
    row-gap: 5px;
    column-gap: var(--gutter);
  }
}

/* ------------------------------------------------------------------ */
/* Artists                                                               */
/* ------------------------------------------------------------------ */

.artists-page {
  padding-bottom: 0;
}

#artists-mount {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-top: 150px;
}

.artist-group {
  display: grid;
  grid-template-columns: 23.93% minmax(0, 1fr);
  align-items: start;
  gap: var(--gutter);
  padding-top: 10px;
  border-top: 5px solid var(--black);
}

.artist-letter {
  margin: 0;
  font-size: 5.14vw;
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--black);
}

@media (min-width: 1920px) {
  .artist-letter {
    font-size: 3.85vw;
  }
}

.artist-list {
  min-width: 0;
}

.artist-item + .artist-item {
  margin-top: 0;
}

.artist-name {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 9.38%;
  align-items: start;
  column-gap: var(--gutter);
  width: 100%;
  padding: 0 0 10px;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  text-align: left;
  color: var(--black);
  cursor: pointer;
}

.artist-name .artist-name-text,
.artist-name .artist-role,
.artist-name::after {
  cursor: pointer;
}

.artist-name:disabled,
.artist-name:disabled .artist-name-text,
.artist-name:disabled .artist-role,
.artist-name:disabled::after {
  cursor: default;
}

.artist-name-text {
  min-width: 0;
  grid-column: 1;
  transition: color 0.45s ease;
}

.artist-role {
  min-width: 0;
  grid-column: 2;
  color: var(--gray);
}

.artist-name::after,
.artist-plus {
  grid-column: 3;
  width: 100%;
  justify-self: stretch;
  text-align: right;
  content: "+";
  font-weight: 700;
  transition: color 0.45s ease;
}

.artist-item:hover .artist-name-text,
.artist-item:hover .artist-name::after,
.artist-item.is-open .artist-name-text,
.artist-item.is-open .artist-name::after,
.artist-item[open] .artist-name-text,
.artist-item[open] .artist-name::after,
.artist-row.is-open .artist-name-text,
.artist-row.is-open .artist-name::after {
  color: var(--blue);
}

.artist-item:hover .artist-role,
.artist-item.is-open .artist-role,
.artist-item[open] .artist-role,
.artist-row.is-open .artist-role {
  color: var(--gray);
}

.artist-item:last-child .artist-rule {
  margin-bottom: 0;
}

.artist-rule {
  height: 2px;
  margin: 0 0 10px;
  background: var(--black);
  transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-item.is-open .artist-rule {
  height: 5px;
  margin-top: 150px;
}

.artist-item.is-open .artist-name::after,
.artist-item[open] .artist-name::after,
.artist-row.is-open .artist-name::after {
  content: "-";
}

.artist-panel,
.artist-detail {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.artist-panel-body {
  padding: 20px 0 0;
}

.artist-item.is-open .artist-panel,
.artist-item.is-open .artist-detail,
.artist-item[open] .artist-panel,
.artist-row.is-open .artist-panel,
.artist-item[open] .artist-detail {
  grid-template-rows: 1fr;
}

.artist-bio-label,
.artist-projects-label {
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 2px solid var(--black);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 110%;
  color: var(--gray);
}

.artist-bio {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 125%;
  color: var(--black);
}

.artist-bio p {
  display: block;
  margin: 0;
}

.artist-bio p + p {
  margin-top: 16px;
}

.artist-projects-label {
  margin-top: 100px;
}

.artist-panel > .artist-projects-label:first-child {
  margin-top: 0;
}

.artist-projects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px var(--gutter);
  align-items: start;
}

.artist-project {
  min-width: 0;
  color: inherit;
}

.artist-project-media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.artist-project-media.has-ratio {
  aspect-ratio: var(--media-ratio);
}

.artist-project-media img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.artist-project-media.has-ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-project:hover .artist-project-media img {
  transform: scale(1.05);
}

.artist-project-title {
  margin: 10px 0 5px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--black);
  transition: color 0.45s ease;
}

.artist-project:hover .artist-project-title {
  color: var(--blue);
}

.artist-project-date,
.artist-project-venue {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
}

.artist-project-date {
  color: var(--gray);
}

.artist-project-venue {
  margin-top: 5px;
  color: var(--black);
}

@media (max-width: 1024px) {
  .artist-letter {
    font-size: var(--fs-h1);
  }

  .artist-projects {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 560px) {
  #artists-mount {
    margin-top: 70px;
    gap: 70px;
  }

  .artist-group {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 10px;
  }

  .artist-projects-label {
    margin-top: 50px;
  }

  .artist-panel > .artist-projects-label:first-child {
    margin-top: 0;
  }

  .artist-projects {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .artist-projects::-webkit-scrollbar {
    display: none;
  }

  .artist-projects.is-dragging {
    cursor: grabbing;
  }

  .artist-project {
    flex: 0 0 58.68%;
    width: 58.68%;
  }

  .artist-project-media {
    width: 100%;
  }

  .artist-item.is-open .artist-rule {
    margin-top: 70px;
  }
}

/* ------------------------------------------------------------------ */
/* About                                                                 */
/* ------------------------------------------------------------------ */

.about,
.about-page {
  padding-bottom: 0;
}

.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: start;
  margin-top: 133px;
}

.about-title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 90%;
  text-align: left;
}

.about-hero-image,
.about-mosaic-sm,
.about-mosaic-lg,
.about-wide,
.about-figure {
  width: 100%;
  overflow: hidden;
}

.about-hero-image {
  aspect-ratio: 3 / 2;
}

.about-copy--apresentacao {
  margin-top: 150px;
}

.about-kicker {
  display: block;
  margin: 0 0 20px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-ui);
  line-height: 90%;
  color: var(--gray);
}

.about-lead,
.about-text {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  color: var(--black);
}

.about-lead p,
.about-text p {
  margin: 0;
}

.about-lead p + p,
.about-text p + p {
  margin-top: 20px;
}

.about-copy--apresentacao .about-lead {
  width: 74.64%;
}

.about-mosaic {
  display: grid;
  grid-template-columns: 23.93% minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  margin-top: 150px;
}

.about-mosaic.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.about-mosaic-sm,
.about-mosaic-lg {
  aspect-ratio: 3 / 2;
}

.about-copy--objetivo {
  margin-top: 150px;
  padding-left: calc(23.93% + var(--gutter));
}

.about-wide {
  margin-top: 200px;
  aspect-ratio: 3 / 2;
}

.about-section {
  margin-top: 200px;
}

.about-section-title {
  margin: 0;
  font-size: 5.14vw;
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  text-align: center;
}

@media (min-width: 1920px) {
  .about-section-title {
    font-size: 3.85vw;
  }
}

.about-section-rule,
.about-section > hr {
  display: block;
  width: 100%;
  height: 10px;
  margin: 20px 0 0;
  border: 0;
  background: var(--black);
}

.about-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 150px var(--gutter);
  align-items: start;
  margin-top: 150px;
}

.about-year {
  min-width: 0;
  cursor: default;
}

.about-year-label {
  display: block;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 5px solid var(--black);
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 90%;
  color: var(--black);
}

.about-year-text {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  color: var(--gray);
  transition: color 0.2s ease;
}

.about-year-text p {
  margin: 0;
}

.about-year-text p + p {
  margin-top: 15px;
}

.about-year:hover .about-year-text {
  color: var(--black);
}

.about-team {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--gutter);
  row-gap: 100px;
  margin-top: 150px;
}

.about-person {
  min-width: 0;
  text-align: center;
}

.about-person-name {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  color: var(--black);
}

.about-person-role {
  margin: 15px 0 0;
  padding: 0 0 20px;
  border-bottom: 5px solid var(--black);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  color: var(--gray);
}

.about-assoc {
  display: grid;
  gap: 0;
  margin-top: 40px;
}

.about-assoc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding: 0 0 40px;
  border-bottom: 5px solid var(--black);
}

.about-assoc-row + .about-assoc-row {
  margin-top: 40px;
}

.about-assoc-label {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  color: var(--black);
  white-space: pre-line;
}

.about-assoc-value {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  color: var(--gray);
}

.about-assoc-line {
  display: block;
  color: var(--gray);
}

.about-assoc-value > a,
.about-assoc-line[href],
.about-assoc-line--link {
  color: var(--gray);
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}

.about-report {
  display: block;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

a.about-report {
  cursor: pointer;
}

.about-report + .about-report {
  margin-top: 40px;
}

.about-report-year,
.about-report-title {
  display: block;
}

.about-report-year {
  color: var(--black);
}

.about-report-title {
  color: var(--gray);
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}

.about-assoc-value > a:hover,
.about-assoc-line[href]:hover,
.about-assoc-line--link:hover,
.about-report-title:hover,
a.about-report:hover .about-report-title {
  color: var(--black);
  text-decoration: underline;
  text-underline-position: from-font;
}

.about-supports {
  display: grid;
  gap: 100px;
  margin-top: 40px;
}

.about-support-group {
  display: grid;
  gap: 40px;
}

.about-supports-label {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 115%;
  color: var(--gray);
}

.about-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.about-logos img {
  display: block;
  flex-shrink: 0;
  width: auto;
  max-width: 150px;
  height: 70px;
  object-fit: contain;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-hours {
  position: relative;
  margin-top: 300px;
  padding: 50px 0 60px;
  border-top: 10px solid var(--black);
  border-bottom: 10px solid var(--black);
}

.about-status {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px;
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-hours-banner {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 100%;
  text-align: center;
}

.about-hours-when,
.about-hours-place {
  display: block;
}

.about-hours-place {
  color: var(--gray);
}

@media (max-width: 1024px) {
  .about-hero {
    margin-top: 135px;
  }

  .about-section-title {
    font-size: var(--fs-h1);
  }

  .about-team {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 100px;
  }

  .about-logos {
    gap: 30px;
  }

  .about-logos img {
    max-width: 150px;
    height: 55px;
  }

  .about-hours {
    padding: 50px 0 50px;
  }
}

@media (max-width: 560px) {
  .about-hero,
  .about-mosaic,
  .about-timeline,
  .about-team {
    grid-template-columns: 1fr;
  }

  .about-hero {
    margin-top: 78px;
    gap: 15px;
  }

  .about-title {
    width: 100%;
    text-align: left;
  }

  .about-copy--apresentacao,
  .about-mosaic,
  .about-copy--objetivo {
    margin-top: 100px;
  }

  .about-kicker {
    margin-bottom: 10px;
  }

  .about-copy--apresentacao .about-lead,
  .about-copy--objetivo {
    width: 100%;
    padding-left: 0;
  }

  .about-mosaic {
    gap: 10px;
  }

  .about-wide,
  .about-section {
    margin-top: 120px;
  }

  .about-section-title {
    font-size: var(--fs-h1);
  }

  .about-timeline {
    gap: 70px;
    margin-top: 70px;
  }

  .about-year-label {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: var(--fs-display);
  }

  .about-year-text {
    font-size: var(--fs-h3);
  }

  .about-team {
    row-gap: 30px;
    margin-top: 30px;
  }

  .about-person-role {
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .about-assoc-label {
    font-size: var(--fs-h3);
  }

  .about-assoc {
    margin-top: 10px;
  }

  .about-assoc-row {
    gap: 10px;
    padding-bottom: 10px;
  }

  .about-assoc-row + .about-assoc-row {
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .about-report + .about-report {
    margin-top: 20px;
  }

  .about-report-year {
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .about-report-title {
    text-decoration: none;
  }

  .about-supports {
    gap: 50px;
    margin-top: 30px;
  }

  .about-support-group {
    gap: 20px;
  }

  .about-logos {
    gap: 20px;
  }

  .about-logos img {
    width: auto;
    max-width: 100px;
    height: 40px;
  }

  .about-hours {
    margin-top: 120px;
    padding: 40px 0 40px;
  }

  .about-hours-banner {
    font-size: var(--fs-h1);
  }
}

/* ------------------------------------------------------------------ */
/* Showcase                                                              */
/* ------------------------------------------------------------------ */

html:has(body.page-showcase),
html:has(body[data-page="showcase"]),
body.page-showcase,
body[data-page="showcase"] {
  height: 100%;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body.page-showcase .site-header,
body.page-showcase .site-footer,
body.page-showcase .menu-curtain,
body[data-page="showcase"] .site-header,
body[data-page="showcase"] .site-footer,
body[data-page="showcase"] .menu-curtain {
  display: none;
}

.showcase {
  --col: calc((100vw - (2 * var(--page-pad)) - (11 * var(--gutter))) / 12);
  --span-2: calc((var(--col) * 2) + var(--gutter));
  --span-3: calc((var(--col) * 3) + (var(--gutter) * 2));
  --span-4: calc((var(--col) * 4) + (var(--gutter) * 3));
  --span-5: calc((var(--col) * 5) + (var(--gutter) * 4));
  --span-6: calc((var(--col) * 6) + (var(--gutter) * 5));
  --span-10: calc((var(--col) * 10) + (var(--gutter) * 9));
  --span-11: calc((var(--col) * 11) + (var(--gutter) * 10));
  --slide-rest: var(--span-3);
  --slide-max-w: calc(100vw - 40px);
  position: relative;
  position: fixed;
  top: var(--app-top, 0px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: var(--app-h, 100svh);
  max-height: 100vh;
  max-height: 100dvh;
  max-height: 100svh;
  max-height: var(--app-h, 100svh);
  overflow: hidden;
  background: var(--white);
}

.showcase-top {
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 var(--gutter);
  flex-shrink: 0;
  padding: 20px var(--page-pad) 0;
  background: var(--white);
}

.showcase-heading {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--span-11);
}

.showcase-top::after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  margin: 20px 0 0;
  background: var(--black);
}

.showcase-title {
  margin: 0;
  max-width: var(--span-11);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 110%;
}

.showcase-close {
  flex-shrink: 0;
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: var(--ls-ui);
  line-height: 90%;
  text-transform: capitalize;
  cursor: pointer;
  color: var(--black);
  transition: color 0.15s ease;
}

.showcase-close:hover,
.showcase-close:focus-visible {
  color: var(--gray);
}

.showcase-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
}

.showcase-artist {
  position: absolute;
  left: var(--page-pad);
  top: 50%;
  z-index: 3;
  width: var(--span-4);
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 110%;
  color: var(--white);
  mix-blend-mode: exclusion;
  transform: translateY(-50%);
  pointer-events: none;
}

.showcase-gallery {
  --slide-max-h: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 20px var(--page-pad);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s linear 0s;
}

.showcase-gallery.is-dragging {
  cursor: grabbing;
}

.showcase-gallery.is-pinching {
  touch-action: none;
  overflow: visible;
}

.showcase-slide.is-pinched {
  overflow: visible;
  z-index: 5;
}

.showcase-slide.is-pinched > img {
  opacity: 0;
}

.showcase-pinch-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  overflow: visible;
  pointer-events: none;
}

.showcase-pinch-layer.is-on {
  display: block;
}

.showcase-pinch-layer img {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
  transform-origin: 50% 50%;
}

.showcase-gallery::-webkit-scrollbar {
  display: none;
}

.showcase-gallery-spacer {
  flex: 0 0 var(--span-4);
  width: var(--span-4);
  height: 1px;
  margin-right: 10px;
  pointer-events: none;
}

.showcase-gallery-end {
  flex: 0 0 50%;
  width: 50%;
  height: 1px;
  pointer-events: none;
}

.showcase-gallery.is-single {
  justify-content: center;
}

.showcase-gallery.is-single .showcase-gallery-spacer,
.showcase-gallery.is-single .showcase-gallery-end {
  display: none;
  flex: 0 0 0;
  width: 0;
  margin: 0;
}

.showcase-slide {
  position: relative;
  flex: 0 0 auto;
  width: var(--slide-rest);
  overflow: hidden;
  cursor: pointer;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-slide.is-sizing {
  transition: none;
}

.showcase-slide > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-slide.is-ready > img {
  height: 100%;
}

.showcase-zoom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  width: 35px;
  height: 35px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .showcase-slide:hover .showcase-zoom {
    opacity: 1;
  }
}

.showcase-slide.is-zoomed .showcase-zoom {
  opacity: 1;
}

.showcase-gallery.is-dragging .showcase-zoom {
  opacity: 0;
}

.showcase-zoom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.showcase-info {
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 150px var(--page-pad) 40px calc(var(--page-pad) + var(--span-4) + var(--gutter));
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s linear 0s;
}

.showcase-gallery.is-fading,
.showcase-info.is-fading {
  opacity: 0;
  pointer-events: none;
}

.showcase-gallery.is-fading .showcase-slide {
  transition: none;
}

.showcase-gallery.is-hidden,
.showcase-info.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-gallery,
  .showcase-info,
  .showcase-slide {
    transition: none;
  }
}

.showcase-essay-label {
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 5px solid var(--black);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 110%;
  color: var(--gray);
}

.showcase-essay {
  margin: 0 0 50px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 125%;
}

.showcase-essay em {
  font-style: italic;
}

.showcase-essay p {
  display: block;
  margin: 0;
}

.showcase-essay p + p {
  margin-top: 16px;
}

.showcase-folha {
  display: inline-block;
  margin: 0 0 50px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
  text-decoration: underline;
  text-underline-position: from-font;
}

.showcase-dl {
  display: grid;
  grid-template-columns: var(--span-2) minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
  margin: 0 0 40px;
  padding: 0;
  border-bottom: 2px solid var(--black);
}

.showcase-dl dt,
.showcase-dl dd {
  padding: 10px 0;
  border-top: 2px solid var(--black);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-body);
  line-height: 115%;
}

.showcase-dl dt {
  grid-column: 1;
  color: var(--gray);
}

.showcase-dl dd {
  grid-column: 2;
  color: var(--black);
  margin: 0;
  white-space: pre-line;
}

.showcase-dl dd a {
  text-decoration: underline;
  text-underline-position: from-font;
}

.showcase-bar {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  padding: 0 var(--page-pad) calc(20px + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: var(--ls-body);
  line-height: 110%;
  background: var(--white);
}

.showcase-bar::before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  margin: 0 0 20px;
  background: var(--black);
}

.showcase-mode-wrap {
  display: flex;
  align-items: baseline;
  margin: 0;
}

.showcase-mode {
  cursor: pointer;
  color: var(--gray);
  transition: color 0.15s ease;
}

.showcase-mode.is-active,
.showcase-mode[aria-pressed="true"] {
  cursor: default;
  color: var(--black);
}

.showcase-mode:not(.is-active):hover,
.showcase-mode:not(.is-active):focus-visible {
  color: var(--black);
}

@media (max-width: 1024px) {
  .showcase {
    --slide-rest: var(--span-5);
  }

  .showcase-info {
    padding-left: calc(var(--page-pad) + var(--span-4) + var(--gutter));
  }
}

@media (max-width: 560px) {
  .showcase {
    --slide-rest: var(--span-6);
    --slide-max-w: var(--span-10);
  }

  .showcase-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0;
    padding: 10px var(--page-pad) 0;
  }

  .showcase-heading {
    max-width: none;
  }

  .showcase-title {
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-display);
    line-height: 100%;
  }

  .showcase-close {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-body);
  }

  .showcase-top::after {
    display: none;
  }

  .showcase:has(#showcase-artist[hidden]) .showcase-top::after {
    display: block;
    grid-column: 1 / -1;
    margin-top: 10px;
  }

  .showcase-artist {
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
    flex-shrink: 0;
    width: 100%;
    padding: 0 var(--page-pad) 0;
    margin: 4px 0 0;
    color: var(--gray);
    mix-blend-mode: normal;
    transform: none;
    line-height: 120%;
  }

  .showcase-artist::after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    margin: 10px 0 0;
    background: var(--black);
  }

  .showcase-bar {
    position: sticky;
    bottom: 0;
    z-index: 8;
    padding: 0 var(--page-pad) calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .showcase-bar::before {
    margin: 0 0 10px;
  }

  .showcase-gallery {
    gap: 5px;
    padding: 10px var(--page-pad);
  }

  .showcase-gallery-spacer {
    flex: 0 0 calc((100vw - var(--slide-rest)) / 2 - var(--page-pad));
    width: calc((100vw - var(--slide-rest)) / 2 - var(--page-pad));
    margin-right: 0;
  }

  .showcase-zoom {
    left: 5px;
    bottom: 5px;
    width: 24px;
    height: 24px;
  }

  .showcase-zoom img {
    width: 24px;
    height: 24px;
  }

  .showcase-info {
    padding: 125px var(--page-pad) 40px;
  }

  .showcase-essay-label {
    margin: 0 0 7px;
    padding-top: 10px;
  }

  .showcase-dl {
    grid-template-columns: var(--span-6) minmax(0, 1fr);
    column-gap: 0;
  }
}