@font-face {
  font-family: "Neue Haas Display Light";
  src: url("./assets/NHaasGroteskDSPro-45Lt.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saans";
  src: url("./assets/Saans-TRIAL-Regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-bg: #ffffff;
  --ink: #000000;
  --panel: #ededed;
  --active: #ff9318;
  --page-pad: clamp(12px, 2.25vw, 34px);
  --top-pad: var(--page-pad);
  --header-bottom-gap: var(--page-pad);
  --header-font-size: clamp(11px, 1.05vw, 16px);
  --nav-font-size: clamp(11px, 1.05vw, 16px);
  --header-band-height: 1em;
  --header-glass-pad: 2px;
  --header-height: calc(var(--top-pad) + var(--header-font-size));
  --footer-space: calc(var(--page-pad) + var(--header-font-size) + 12px);
  --column-gap: var(--page-pad);
  --font-sans-roman: "Saans";
  --font-sans: var(--font-sans-roman), "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Times Now", "Times New Roman", Times, serif;
  --font-serif-weight: 400;
  --font-serif-stroke: 0.12px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-header {
  --nav-marker-x: 0px;
  --nav-marker-w: 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(90px, 1fr);
  align-items: start;
  column-gap: var(--page-pad);
  padding: var(--top-pad) var(--page-pad) 0;
  min-height: calc(var(--top-pad) + var(--nav-font-size));
  font-size: var(--nav-font-size);
  line-height: 1;
  z-index: 2;
}

.site-header::after {
  content: "";
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  top: calc(var(--top-pad) - var(--header-glass-pad));
  height: calc(var(--header-band-height) + (var(--header-glass-pad) * 2));
  background: rgba(237, 237, 237, 0.76);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 7px 18px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  z-index: 0;
}

.header-rule,
.footer-rule {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  height: var(--header-band-height);
  background: var(--panel);
  z-index: 0;
}

.header-rule {
  display: none;
  top: var(--top-pad);
}

.site-name,
.contact-link,
.site-nav,
.menu-toggle {
  position: relative;
  z-index: 2;
}

.site-header .site-name {
  justify-self: start;
  font-family: var(--font-sans);
  font-weight: 550;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.contact-link {
  justify-self: end;
  font-family: var(--font-sans);
  font-weight: 550;
  text-transform: none;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  justify-self: end;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
}

.site-nav {
  grid-column: 2 / span 2;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(24px, 3.55vw, 42px);
  font-family: var(--font-sans);
  font-weight: 550;
  text-transform: none;
  text-align: center;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: calc(var(--top-pad) - var(--header-glass-pad));
  width: var(--nav-marker-w);
  height: calc(var(--header-band-height) + (var(--header-glass-pad) * 2));
  background: linear-gradient(180deg, #ffb04d 0%, var(--active) 48%, #d96d00 100%);
  transform: translateX(var(--nav-marker-x));
  transition: transform 220ms ease, width 220ms ease;
}

.site-nav a {
  position: relative;
  display: inline-block;
}

.site-nav .mobile-contact-link {
  display: none !important;
}

.site-nav a.is-active::before {
  content: none;
}


.homepage {
  padding: calc(var(--header-height) + var(--header-bottom-gap)) var(--page-pad) var(--page-pad);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--column-gap);
  row-gap: var(--column-gap);
  align-items: start;
}

.project-card {
  min-width: 0;
}

.project-card:has(.qtm-image) {
  grid-column: 1 / -1;
}

.project-image {
  display: block;
  width: 100%;
  aspect-ratio: 701 / 394;
  overflow: hidden;
  background: var(--panel);
}

.qtm-image {
  aspect-ratio: 2000 / 1167;
}

.qtm-image img {
  object-fit: contain;
  object-position: center;
}


.project-copy {
  position: relative;
  display: block;
  min-height: clamp(58px, 5.36vw, 81px);
  padding-top: 4px;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.project-card:hover .project-copy,
.project-card:focus-within .project-copy,
.project-copy:hover,
.project-copy:focus-visible {
  background: rgba(237, 237, 237, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.025),
    0 5px 14px rgba(0, 0, 0, 0.035);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
}

.project-copy h1,
.project-copy h2,
.project-copy p {
  margin: 0;
  font-weight: 400;
}

.project-copy h1,
.project-copy h2 {
  font-family: var(--font-sans);
  font-weight: 550;
  font-style: normal;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.project-copy p {
  max-width: 96%;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: var(--font-serif-weight);
  -webkit-text-stroke: var(--font-serif-stroke) currentColor;
  line-height: 1.05;
  text-align: left;
  text-indent: 5ch;
}

.project-copy-inline p {
  padding-left: 0;
}

.compact-copy {
  min-height: 23px;
}

.compact-copy h2 {
  font-size: clamp(32px, 2.64vw, 40px);
  line-height: 1;
}

.compact-copy p {
  font-size: clamp(32px, 3.2vw, 48px);
}

.writing-cover {
  aspect-ratio: 2000 / 1414;
  background: transparent;
}

.writing-cover img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.writing-card-dark .writing-cover {
  --log-cover-pad: clamp(18px, 3vw, 44px);
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--log-cover-pad);
  background: #000;
}

.writing-card-dark .writing-cover img {
  position: absolute;
  inset: var(--log-cover-pad);
  width: calc(100% - (var(--log-cover-pad) * 2));
  height: calc(100% - (var(--log-cover-pad) * 2));
  object-fit: contain;
}

.writing-card-featured {
  grid-column: 1 / -1;
}

.writing-card-featured .project-copy h1 {
  font-size: clamp(32px, 2.64vw, 40px);
  line-height: 1;
}

.writing-card-featured .project-copy p {
  font-size: clamp(32px, 3.2vw, 48px);
}

.subpage {
  flex: 1;
  max-width: 701px;
  min-height: calc(100vh - 120px);
  padding: calc(var(--header-height) + var(--header-bottom-gap)) var(--page-pad) var(--page-pad);
}

.subpage h1 {
  margin: 0 0 26px;
  font-family: var(--font-sans);
  font-size: clamp(35px, 5vw, 76px);
  font-weight: 350;
  font-style: normal;
  line-height: 0.96;
  letter-spacing: 0;
}

.link-list {
  display: grid;
  gap: 0;
  background: var(--panel);
}

.link-list a,
.info-page p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: var(--font-serif-weight);
  -webkit-text-stroke: var(--font-serif-stroke) currentColor;
  line-height: 1.12;
}

.link-list a {
  display: block;
  padding: 0 0 6px;
}

.info-page {
  max-width: none;
  width: 100%;
}

.info-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--page-pad);
}

.info-panel {
  align-self: start;
  background: transparent;
}

.info-panel p {
  margin: 0 0 1em;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.32vw, 20px);
  font-weight: var(--font-serif-weight);
  -webkit-text-stroke: var(--font-serif-stroke) currentColor;
  line-height: 1.16;
  text-indent: 5ch;
}

.info-panel p:last-child {
  margin-bottom: 0;
}

.info-panel sup {
  font-size: 0.68em;
  line-height: 0;
  vertical-align: super;
}

.info-intro p {
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.08;
}

.press-page,
.talks-page,
.exhibitions-page {
  max-width: none;
  width: 100%;
}

.press-section + .press-section {
  margin-top: calc(var(--page-pad) * 1.5);
}

.press-section h1 {
  margin: 0 0 0.5em;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.32vw, 20px);
  font-weight: 550;
  line-height: 1;
  text-transform: uppercase;
}

.talks-section h1,
.exhibitions-section h1,
.press-page .press-section h1 {
  background: rgba(237, 237, 237, 0.82);
  text-transform: none;
}

.press-list {
  display: grid;
  gap: 0;
}

.press-row {
  display: grid;
  grid-template-columns:
    calc((100% - var(--page-pad)) / 2)
    minmax(120px, 1.7fr)
    minmax(100px, 0.75fr)
    minmax(56px, 0.38fr);
  gap: var(--page-pad);
  align-items: start;
  padding: 0.32em 0;
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.12vw, 17px);
  font-weight: var(--font-serif-weight);
  -webkit-text-stroke: var(--font-serif-stroke) currentColor;
  line-height: 1.12;
}

.press-page .press-row,
.talks-page .press-row,
.exhibitions-page .press-row {
  padding: 0.52em 0;
  -webkit-text-stroke: 0.18px currentColor;
}

.press-row span:last-child {
  text-align: right;
}

.press-row.is-highlighted {
  background: linear-gradient(180deg, rgba(255, 222, 143, 0.4) 0%, rgba(255, 194, 91, 0.34) 100%);
}

.press-row.is-highlighted:hover,
.press-row.is-highlighted:focus-visible {
  background: linear-gradient(180deg, #ffb04d 0%, var(--active) 48%, #d96d00 100%);
}

.press-row:hover,
.press-row:focus-visible {
  background: rgba(237, 237, 237, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 7px 18px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.press-title {
  font-family: var(--font-sans);
  font-weight: 550;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
}

.press-title sup {
  font-size: 0.68em;
  line-height: 1;
  vertical-align: super;
}

.talk-row .press-title {
  display: flex;
  align-items: flex-start;
  gap: 0.3em;
}

.talk-title-main {
  flex: 0 1 auto;
  min-width: 0;
}

.talk-with {
  flex: 1 1 8em;
  min-width: 8em;
  padding-top: 0.06em;
  line-height: 1.05;
  text-transform: none;
}

.talk-row .external-mark {
  flex: 0 0 auto;
}

.external-mark {
  position: relative;
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.28em;
  vertical-align: -0.03em;
}

.external-mark::before,
.external-mark::after {
  content: "";
  position: absolute;
  width: 0.43em;
  height: 0.2em;
  border: 1px solid #0000ff;
  border-radius: 999px;
  transform: rotate(-35deg);
}

.external-mark::before {
  left: 0;
  top: 0.26em;
}

.external-mark::after {
  right: 0;
  top: 0.26em;
}

.project-detail {
  padding: calc(var(--header-height) + var(--header-bottom-gap)) 0 var(--page-pad);
}

.detail-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--page-pad);
  padding: 0 var(--page-pad) var(--page-pad);
  align-items: start;
}

.detail-meta-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
  align-items: start;
  min-height: 56px;
  padding-top: 0;
  background: transparent;
}

.detail-summary h1,
.detail-summary p,
.detail-year,
.detail-text p,
.detail-hero,
.detail-stills figure,
.detail-figma-gallery figure,
.detail-hero figcaption,
.detail-stills figcaption,
.detail-figma-gallery figcaption {
  margin: 0;
}

.detail-summary h1 {
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.58vw, 24px);
  font-weight: 550;
  line-height: 1.05;
  text-transform: uppercase;
}

.detail-summary p,
.detail-year,
.detail-text {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.32vw, 20px);
  font-weight: var(--font-serif-weight);
  -webkit-text-stroke: var(--font-serif-stroke) currentColor;
  line-height: 1.16;
}

.detail-hero figcaption,
.detail-stills figcaption,
.detail-figma-gallery figcaption {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: var(--font-serif-weight);
  -webkit-text-stroke: var(--font-serif-stroke) currentColor;
  line-height: 1.16;
}

.detail-summary p {
  text-indent: 5ch;
}

.detail-year {
  grid-column: 2;
  justify-self: stretch;
  padding-right: 0;
  text-align: right;
}

.detail-year--title {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.32vw, 20px);
  font-weight: var(--font-serif-weight);
  line-height: 1.16;
  -webkit-text-stroke: var(--font-serif-stroke) currentColor;
}

.detail-text {
  display: grid;
  gap: 1em;
  text-align: left;
}

.detail-text p {
  text-indent: 5ch;
}

.detail-text p:nth-child(2) {
  margin-left: -5ch;
  margin-right: 5ch;
}

.detail-text .detail-action-row {
  text-indent: 0;
}

.detail-text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.detail-text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--header-band-height) + (var(--header-glass-pad) * 2));
  padding: var(--header-glass-pad) 0;
  background: rgba(237, 237, 237, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 7px 18px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  font-weight: 550;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.detail-text-button:hover,
.detail-text-button:focus-visible {
  background: linear-gradient(180deg, #ffb04d 0%, var(--active) 48%, #d96d00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.08);
}

.detail-hero img {
  width: 100%;
  height: auto;
}

.detail-video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.detail-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.detail-hero figcaption,
.detail-stills figcaption,
.detail-figma-gallery figcaption {
  min-height: var(--header-band-height);
  padding-top: 0.28em;
  background: transparent;
}

.detail-hero figcaption {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.detail-stills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--page-pad);
  padding: var(--page-pad);
  margin-bottom: 0;
}

.detail-stills img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.detail-figma-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--page-pad);
  padding: 0 var(--page-pad) var(--page-pad);
}

.detail-figma-gallery--with-stills {
  padding-top: var(--page-pad);
}

.qtbot-detail .detail-figma-gallery {
  padding-top: var(--page-pad);
}

.qtm-gallery {
  padding-top: var(--page-pad);
}

.detail-figma-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.detail-figma-gallery__square-crop img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.detail-still img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.detail-figma-gallery__wide {
  grid-column: 1 / -1;
}

.qtm-gallery__right {
  grid-column: 2;
}

.qtm-panel img {
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.22);
}

.detail-figma-gallery figure.detail-figma-gallery__full {
  grid-column: 1 / -1;
  margin-left: calc(var(--page-pad) * -1);
  margin-right: calc(var(--page-pad) * -1);
}

.queeringthemap-detail .detail-summary p + p {
  margin-top: 0.2em;
}

.qtm-detail-hero img,
.qtm-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer {
  position: relative;
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding: 0 var(--page-pad) var(--page-pad);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  font-weight: 550;
  -webkit-text-stroke: 0;
  line-height: 1;
  text-align: center;
  z-index: 3;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  top: calc(var(--header-glass-pad) * -1);
  height: calc(var(--header-band-height) + (var(--header-glass-pad) * 2));
  background: rgba(237, 237, 237, 0.76);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 7px 18px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  z-index: 0;
}

.footer-rule {
  display: none;
}

.site-footer nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--page-pad);
}

.footer-updated {
  position: absolute;
  left: var(--page-pad);
  top: 0;
  z-index: 3;
  margin: 0;
}

.footer-pin {
  position: absolute;
  right: var(--page-pad);
  top: calc(var(--header-glass-pad) * -1);
  z-index: 3;
  width: auto;
  height: calc(var(--header-band-height) + (var(--header-glass-pad) * 2));
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
}

@media (max-width: 760px) {
  .footer-updated {
    display: none;
  }

  :root {
    --page-pad: 14px;
  }

  .site-header {
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) minmax(52px, 1fr);
    align-items: start;
    row-gap: calc(var(--page-pad) * 0.75);
  }

  .site-header .site-name {
    grid-column: 1;
  }

  .menu-toggle {
    display: block;
    grid-column: 3;
    grid-row: 1;
  }

  .site-nav {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    display: none;
    justify-self: center;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 0;
    max-width: 100%;
    text-align: center;
  }

  .site-nav a {
    justify-self: center;
  }

  .contact-link {
    display: none;
  }

  .site-header.is-menu-open .site-nav {
    display: grid;
    position: fixed;
    left: var(--page-pad);
    right: var(--page-pad);
    top: var(--page-pad);
    bottom: var(--page-pad);
    z-index: 2;
    align-content: center;
    justify-content: center;
    row-gap: 0;
  }

  .site-header.is-menu-open .site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1.2em;
    line-height: 1.2;
  }

  .site-header.is-menu-open .mobile-contact-link {
    display: flex !important;
  }

  .site-header.is-menu-open {
    padding-bottom: 0;
  }

  .site-header.is-menu-open::after {
    position: fixed;
    left: var(--page-pad);
    right: var(--page-pad);
    top: var(--page-pad);
    bottom: var(--page-pad);
    height: auto;
    z-index: 1;
  }

  .site-header.is-menu-open::before {
    opacity: 0;
  }

  .site-header::before {
    content: none;
  }

  .site-nav a,
  .contact-link {
    padding: 0.24em 0;
  }

  .site-nav a:first-child {
    padding-top: 0;
  }

  .project-grid {
    grid-template-columns: 1fr;
    row-gap: var(--page-pad);
  }

  .project-copy {
    min-height: 66px;
  }

  .project-copy-inline p {
    text-align: left;
  }

  .subpage {
    max-width: none;
  }

  .press-row {
    grid-template-columns: 1fr;
    gap: 0.18em;
  }

  .detail-intro,
  .detail-stills,
  .detail-figma-gallery,
  .info-columns {
    grid-template-columns: 1fr;
  }

  .detail-intro {
    row-gap: 3lh;
  }

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

  .detail-text p:nth-child(2) {
    margin-left: 0;
    margin-right: 0;
  }

  .site-footer {
    position: relative;
    bottom: auto;
  }
}

@media (max-width: 420px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .contact-link {
    justify-self: start;
  }
}