@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  scrollbar-gutter: stable;
  --color-background: #cc0000;
  --color-text: #fff;
  --color-highlight: color-mix(in srgb, var(--color-text) 12%, transparent);
  --opacity-muted: 0.6;

  --font-family: "Geist", Arial, Helvetica, sans-serif;
  --font-size-base: 1rem;
  --font-size-body: 0.9375rem;
  --font-size-meta: 0.75rem;
  --font-weight-medium: 500;
  --font-weight-heading: 600;
  --line-height-body: 1.6;
  --line-height-meta: 1.5;
  --letter-spacing-meta: 0.04em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-14: 3.5rem;
  --gutter: clamp(var(--space-5), 4vw, 4rem);
  --rail-width: 16rem;
  --project-width: 60rem;
  --logo-size: 6rem;

  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

::view-transition-group(root) {
  animation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
  animation-timing-function: ease-in-out;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: var(--font-size-body);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  gap: var(--space-8);
}

.home-page {
  gap: var(--space-4);
}

::selection {
  background: var(--color-text);
  color: var(--color-background);
}

.site-rail {
  display: contents;
}

.site-header {
  position: sticky;
  top: var(--gutter);
  align-self: flex-end;
  z-index: 2;
  background: var(--color-background);
  text-align: right;
}

.site-projects,
.site-connect {
  display: none;
  flex-shrink: 0;
  text-align: right;
}

.home-page .site-projects,
.home-page .site-connect {
  display: block;
}

.page {
  position: relative;
  z-index: 1;
  order: 1;
  width: min(100%, 24rem);
  text-align: left;
}

.rail-bottom {
  position: relative;
  order: 2;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--logo-size);
  justify-content: flex-end;
  margin-top: auto;
}

.site-projects .page-links,
.site-connect .page-links {
  margin-top: 0;
}

.home-page .site-connect,
.footer p {
  width: min(24rem, calc(100% - var(--logo-size) - var(--space-8)));
  margin-left: auto;
  text-align: right;
}

.name {
  margin: 0;
  font-size: inherit;
  font-weight: var(--font-weight-heading);
  line-height: inherit;
}

.not-found-code {
  margin: 0 0 var(--space-8);
  font-size: clamp(7rem, 20vw, 16rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.08em;
  line-height: 1;
}

.not-found-message {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-body);
  opacity: var(--opacity-muted);
}

.about {
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-body);
}

.about p {
  margin: 0;
}

.about p + p {
  margin-top: var(--space-6);
}

.about:has(.project-meta) {
  margin-top: var(--space-2);
}

.project-meta {
  font-size: var(--font-size-meta);
  opacity: var(--opacity-muted);
}

.project {
  max-width: var(--project-width);
}

.project-details {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.project-meta + .project-details {
  margin-top: var(--space-8);
}

.project-hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--space-8);
}

.project-description > p,
.project-statement,
.scroll-strip blockquote,
.timeline-step > p {
  max-width: 36rem;
}

.project-credits {
  margin: 0;
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.project-credits dt {
  font-weight: var(--font-weight-medium);
  opacity: var(--opacity-muted);
}

.project-credits dd {
  margin: 0;
}

.project-credits dd + dt {
  margin-top: var(--space-6);
}

.project-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  margin-top: var(--space-14);
}

.project-gallery[data-masonry] {
  grid-auto-rows: 1px;
  row-gap: 0;
}

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

.project-interview {
  margin: var(--space-8) 0 0;
}

.project-interview figcaption {
  margin-top: var(--space-2);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.project-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video-enhanced .project-video {
  opacity: 0;
  transition: opacity 450ms ease-out;
}

.video-enhanced .project-video.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .video-enhanced .project-video {
    transition: none;
  }
}

.quote {
  margin: var(--space-14) 0 0;
}

.quote blockquote,
.quote blockquote p {
  margin: 0;
}

.quote blockquote {
  font-size: var(--font-size-body);
  font-weight: normal;
  font-style: normal;
  line-height: var(--line-height-body);
}

.quote figcaption {
  margin-top: var(--space-4);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.quote-mark,
.quote-source {
  opacity: var(--opacity-muted);
}

.quote-source {
  display: block;
}

.scroll-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(90%, max(18rem, calc((min(100%, var(--project-width)) - var(--space-4)) / 2)));
  align-items: start;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.project .scroll-strip {
  width: 100cqw;
}

.scroll-strip > * {
  margin: 0;
  scroll-snap-align: start;
}

.scroll-strip .quote blockquote {
  font-size: var(--font-size-body);
}

.scroll-strip .quote figcaption {
  margin-top: var(--space-2);
}

.project-timeline,
.project-statement {
  margin-top: var(--space-14);
}

.project-statement-copy {
  margin-top: var(--space-4);
}

.project-statement .project-statement-byline {
  margin-top: var(--space-4);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.project-statement-role {
  display: block;
  opacity: var(--opacity-muted);
}

.project-statement .project-publicity {
  margin-top: var(--space-8);
}

.project-publicity a {
  text-decoration: underline;
}

.timeline-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
}

.timeline-step .timeline-date {
  margin-top: var(--space-4);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
  opacity: var(--opacity-muted);
}

.timeline-step h3 {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
}

.timeline-credit {
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.timeline-credit span {
  opacity: var(--opacity-muted);
}

.page:has(.publicity),
.page:has(.not-found) {
  width: min(100%, 52rem);
}

.page:has(.project) {
  width: 100%;
  container-type: inline-size;
}

.publicity-project {
  scroll-margin-top: calc(var(--gutter) + var(--space-14));
}

.publicity-project:target {
  background: var(--color-highlight);
  box-shadow: 0 0 0 var(--space-2) var(--color-highlight);
}

.publicity section {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: clamp(var(--space-4), 3vw, var(--space-8));
}

.publicity section + section {
  margin-top: var(--space-14);
}

.publicity h2,
.publicity h3 {
  margin: 0;
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-meta);
}

.publicity h2 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.publicity ul + h3,
.publicity .publicity-project + h3 {
  margin-top: var(--space-10);
}

.publicity ul {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.publicity li + li {
  margin-top: var(--space-2);
}

.press-outlet,
.link-arrow {
  opacity: var(--opacity-muted);
}

.page-links {
  margin-top: var(--space-8);
}

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

.page-links ul + ul {
  margin-top: var(--space-6);
}

.page-links li + li {
  margin-top: var(--space-1);
}

.footer {
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.footer p {
  margin: 0 0 0 auto;
}

.footer-credit {
  opacity: var(--opacity-muted);
}

.site-logo {
  position: fixed;
  bottom: var(--gutter);
  left: var(--gutter);
  z-index: 0;
  display: block;
  width: var(--logo-size);
  height: var(--logo-size);
  pointer-events: none;
}

@media (min-width: 48rem) {
  .project-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-gallery--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-details {
    grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr);
  }
}

@media (min-width: 64rem) {
  body {
    padding-bottom: calc(var(--gutter) + var(--logo-size) + var(--space-8));
  }

  .site-rail {
    position: fixed;
    inset: var(--gutter) var(--gutter) var(--gutter) auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: var(--rail-width);
    overflow-y: auto;
    text-align: right;
  }

  .site-header {
    position: static;
    align-self: stretch;
    flex-shrink: 0;
  }

  .site-projects,
  .site-connect {
    display: block;
  }

  .back-navigation {
    display: none;
  }

  .site-rail .rail-bottom,
  .home-page .site-connect,
  .footer p {
    width: 100%;
  }

  .page {
    max-width: calc(100% - var(--rail-width) - var(--space-8));
  }

  .project .scroll-strip {
    width: max(100%, calc(100cqw - 2 * var(--space-8)));
  }
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

.back-home,
[data-remember-link] a.is-current {
  text-decoration: underline;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

[data-remember-link="ready"] a:not(.is-current) {
  text-decoration: none;
}

a:focus-visible,
.scroll-strip:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}