:root {
  --peek: clamp(60px, 9svh, 132px);

  --bar-h: calc(37px + var(--spacing-small));

  --fold: calc(100svh - var(--bar-h) - var(--peek));

  --grid-max: 1920px;

  --page-w: 100vw;

  --intro-eyebrow-delay: 560ms;
}

.header {
  position: relative;
  min-height: var(--fold);
}

.hero {
  position: absolute;
  left: 50%;
  top: var(--nav-bottom);
  bottom: 0;
  translate: -50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-large);
  width: fit-content;
  max-width: calc(100% - var(--edge) * 2);

  --head-em: 9.8;
  --row-em: 5.5;
  --hero-step: var(--font-size-display-hero1);
  --hero-leading: var(--line-height-hero1);
  --gutters: calc(var(--page-w) - var(--edge) * 2);
  --hero-size: clamp(40px, calc(var(--gutters) / var(--head-em)), var(--hero-step));
}

@media (max-width: 1349px) {
  .hero { --hero-step: var(--font-size-display-hero2); --hero-leading: var(--line-height-hero2); }
}

@media (max-width: 1036px) {
  .hero { --hero-step: var(--font-size-display-hero3); --hero-leading: var(--line-height-hero3); }
}

.eyebrow,
.tags {
  font: var(--text-callout-medium);
  letter-spacing: var(--text-callout-medium-tracking);
  text-transform: uppercase;
  font-feature-settings: var(--sans-features);
  color: var(--accent);
  margin: 0;
}

@media (max-width: 768px) {
  .eyebrow,
  .tags { font: var(--text-subheadline-medium); letter-spacing: var(--text-subheadline-medium-tracking); }
}

@media (max-width: 600px) {
  .eyebrow,
  .tags { font: var(--text-footnote-medium); letter-spacing: var(--text-footnote-medium-tracking); }
}

.headline {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--hero-size);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--hero-leading);
  text-align: center;
  white-space: nowrap;
  color: var(--content-primary);
  font-feature-settings: "case", "dlig", "ss01";
  margin: 0;
}

.headline br { display: none; }

.tags-rail {
  align-self: stretch;
  box-sizing: border-box;
  padding-left: calc(var(--ink-left, 0) * var(--hero-size));
  padding-right: calc(var(--ink-right, 0) * var(--hero-size));
}

.tags-track > .tags[aria-hidden] { display: none; }

.tags {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  list-style: none;
  padding: 0;
}

.tag-mid {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50%;
}

.tag-extra { display: none; }

.w,
.wi,
.c { display: inline-block; }

.w { white-space: nowrap; }

.c {
  --overhang-x: 0.15em;
  --overhang-y: 0.1em;
  padding: var(--overhang-y) var(--overhang-x);
  margin-block: calc(-1 * var(--overhang-y));
  margin-inline: calc(var(--kern, 0em) - var(--overhang-x)) calc(-1 * var(--overhang-x));
}

.intro .hero .eyebrow,
.intro .hero .tags li,
.intro .hero .c,
.intro .hero .headline:not(:has(.c)) { opacity: 0; }

.hero-in .c {
  animation: centerOut 760ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--d) * 300ms);
}

.intro .hero-in .c { opacity: 1; }

@keyframes centerOut {
  from { opacity: 0; filter: blur(8px); translate: 0 0.4em; }
  to { opacity: 1; filter: blur(0); translate: 0 0; }
}

.hero-in .eyebrow {
  animation: chromeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--intro-eyebrow-delay);
}

.hero-in .tags li {
  animation: chromeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(980ms + var(--i) * 80ms);
}

@keyframes chromeIn {
  from { opacity: 0; filter: blur(6px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.intro .work-bar,
.intro .work { opacity: 0; }

.page-in .work-bar,
.page-in .work {
  animation: pageIn 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--intro-eyebrow-delay) * 1.3);
}

@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.is-locked { overflow: hidden; }

.work-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  max-width: calc(var(--grid-max) + var(--edge) * 2);
  margin-inline: auto;
  margin-bottom: var(--spacing-xtreme3);
  padding: 0 var(--edge);
}

@media (max-width: 1036px) {
  .work-section { margin-bottom: var(--spacing-xtreme2); }
}

.work {
  scroll-margin-top: calc(var(--nav-bottom) + var(--spacing-xxlarge) + var(--bar-h));
  touch-action: pan-y;
}

.work-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.work-hint {
  margin: 0;
  font: var(--text-caption1-ac-medium);
  letter-spacing: var(--text-caption1-ac-medium-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--content-tertiary);
}

.cols {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.col {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--panel-radius);
  appearance: none;
  overflow: hidden;
  background: color-mix(in oklab, var(--ground) 88%, var(--ink));
  filter: var(--panel-filter);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: filter 240ms ease;
}

.filler {
  position: relative;
  overflow: clip;
  border-radius: var(--panel-radius);
}

.filler canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.tile img,
.tile video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--panel-radius);
  object-fit: cover;
}

.tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.viewer {
  --viewer-edge: var(--spacing-medium);

  --chrome-lane: 44px;

  --viewer-gap: 42px;
  --chrome-top: calc(var(--edge) + var(--chrome-lane));
  --chrome-bottom: calc(var(--edge) + var(--nav-block));
  --fit-w: calc(100vw - 2 * var(--viewer-edge));
  --cap-w: min(1200px, var(--fit-w));
  --cap-h: min(900px, calc(100svh - var(--chrome-top) - var(--chrome-bottom) - var(--viewer-gap) * 2));
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(var(--chrome-top) + var(--viewer-gap)) 0 calc(var(--chrome-bottom) + var(--viewer-gap));
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 240ms ease,
    display 240ms allow-discrete,
    overlay 240ms allow-discrete;
}

.viewer[open] {
  display: flex;
  opacity: 1;
}

.viewer:focus { outline: none; }

@media (min-width: 500px) {
  .viewer { --viewer-edge: clamp(var(--edge), 7vw, 120px); }
}

@starting-style {
  .viewer[open] { opacity: 0; }
}

.viewer::backdrop {
  background: var(--veil);
  -webkit-backdrop-filter: blur(40px) saturate(1.15);
  backdrop-filter: blur(40px) saturate(1.15);
  opacity: 0;
  transition:
    opacity 320ms ease,
    display 320ms allow-discrete,
    overlay 320ms allow-discrete;
}

.viewer[open]::backdrop { opacity: 1; }

@starting-style {
  .viewer[open]::backdrop { opacity: 0; }
}

.viewer-frame {
  position: relative;
  display: flex;
  margin: 0;
  opacity: 0;
  scale: 0.965;
  translate: 0 10px;
  transition:
    opacity 260ms ease,
    scale 420ms cubic-bezier(0.32, 0.72, 0, 1),
    translate 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.viewer[open] .viewer-frame {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}

@starting-style {
  .viewer[open] .viewer-frame {
    opacity: 0;
    scale: 0.965;
    translate: 0 10px;
  }
}

@keyframes viewer-swap {
  from { opacity: 0; }
}

.viewer-media {
  animation: viewer-swap 200ms ease;
  --ring: 1px;
  display: block;
  aspect-ratio: var(--ar);
  width: min(var(--cap-w), calc(var(--cap-h) * (var(--ar))));
  height: auto;
  border-radius: var(--panel-radius);
  box-shadow: 0 0 0 var(--ring) var(--border-transparent);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: width 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .viewer-media { --ring: 0.5px; }
}

.viewer-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.333%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.viewer-zone[data-step="-1"] { left: 0; }

.viewer-zone[data-step="1"] { right: 0; }

.viewer-zone:disabled { cursor: default; }

.cursor[data-morph="on"][data-host="viewer"] .cursor-dot {
  border: 0;
  background: var(--background-overlay2);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.viewer-track {
  --track-h: 4px;
  position: fixed;
  left: var(--edge);
  top: calc(var(--edge) + (var(--chrome-lane) - var(--track-h)) / 2);
  display: none;
  width: min(156px, 40vw);
  height: var(--track-h);
  border-radius: var(--radius-medium);
  background: var(--background-transparent-strong);
  overflow: clip;
}

.viewer-thumb {
  display: block;
  width: var(--thumb-w);
  height: 100%;
  border-radius: 2px;
  background: var(--background-inverse-primary);
  translate: var(--thumb-x) 0;
  transition: translate 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 768px) {
  .viewer { --viewer-gap: var(--spacing-xxxsmall); }

  .viewer-track { display: block; }
}

@media (max-width: 768px) {
  .work {
    --gutter: var(--spacing-small);
    --panel-radius: 8px;
    scroll-margin-top: calc(var(--chrome-top) + var(--nav-block) + var(--spacing-xxlarge) + var(--bar-h));
  }
}

@media (max-width: 879px) {
  .hero {
    width: max-content;
    --hero-step: var(--font-size-display-hero3);
    --hero-leading: var(--line-height-hero3);
    --narrow-size: clamp(34px, calc((var(--gutters) - 1px) / var(--row-em)), var(--hero-step));
  }

  .tags-rail {
    padding-left: 0;
    padding-right: 0;
  }

  .headline {
    font-size: var(--narrow-size);
    white-space: normal;
    overflow-wrap: break-word;
  }

  .headline br { display: inline; }

  .hero-in .c { animation-delay: calc(var(--r) * 420ms); }
}

@media (max-width: 768px) {
  .header { min-height: 0; padding-bottom: var(--spacing-xsmall); }
  .hero {
    position: static;
    translate: none;
    left: auto;
    top: auto;
    bottom: auto;
    order: 4;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;

    gap: var(--spacing-medium);
    margin: 164px 0 196px;
  }

  .tags-rail {
    align-self: center;
    width: calc(var(--row-em) * var(--narrow-size));
  }
}

@media (max-width: 489px) {
  .hero { --hero-step: var(--font-size-display-hero4); --hero-leading: var(--line-height-hero4); }
}

@media (max-width: 385px) {
  .hero { --hero-step: var(--font-size-display-hero5); --hero-leading: var(--line-height-hero5); }
}

@media (max-width: 600px) {
  .tags-rail { align-self: stretch; width: auto; }
  .tags { flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
  .tag-mid { position: static; translate: none; }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .tags-rail:has(.tags-track[data-rolling]) {
    --tag-fade: 36px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--tag-fade), #000 calc(100% - var(--tag-fade)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--tag-fade), #000 calc(100% - var(--tag-fade)), transparent);
  }

  .tags-track[data-rolling] {
    --tag-gap: var(--spacing-xxlarge);
    display: flex;
    width: max-content;
    animation: tagRoll 18s linear infinite;
  }

  .tags-track[data-rolling] > .tags[aria-hidden] { display: flex; }

  .tags-track[data-rolling] .tag-extra { display: block; }

  .tags-track[data-rolling] .tags {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--tag-gap);
    padding-right: var(--tag-gap);
  }
}

@keyframes tagRoll {
  to { translate: calc(-100% / var(--tag-copies)); }
}

@media (prefers-reduced-motion: reduce) {
  .intro .hero .eyebrow,
  .intro .hero .tags li,
  .intro .hero .c,
  .intro .work-bar,
  .intro .work { opacity: 1; }

  .hero-in *,
  .page-in .work-bar,
  .page-in .work { animation: none !important; }

  .viewer,
  .viewer::backdrop { transition-duration: 140ms, 140ms, 140ms; }
  .viewer-frame {
    scale: 1;
    translate: none;
    transition: opacity 140ms linear;
  }
  .viewer[open] .viewer-frame { scale: 1; translate: none; }
  .viewer-thumb { transition: none; }
  .viewer-media {
    animation-duration: 120ms;
    transition: none;
  }
}