@font-face {
  font-family: Rhymes;
  src: url(media/rhymes.woff2) format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: Rhymes;
  src: url(media/rhymes-light-italic.woff2) format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Saans;
  src: url(media/saans.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(fonts/inter-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --ink: #201f1c;
  --red: #a6342f;
  --gutter: clamp(20px, 4vw, 68px);
  font-family: Inter, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, a { color: inherit; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #d64a40; outline-offset: 5px; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, p, figure { margin: 0; }
.masthead {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 20px var(--gutter);
  font-size: 15px;
}
.is-work .masthead { color: white; text-shadow: 0 1px 8px #000; }
.masthead a { width: fit-content; text-decoration: none; }
.masthead a:hover, .scroll:hover { text-decoration: underline; }
.masthead a:nth-child(2) { justify-self: center; }
.masthead a:last-child { justify-self: end; }
.opening { position: relative; height: 186svh; }
.stage {
  --card-width: clamp(134px, min(13vw, 23svh), 214px);
  --spread: clamp(12px, 2vw, 34px);
  --progress: 0;
  position: sticky;
  top: 0;
  height: 100svh;
  isolation: isolate;
  overflow: clip;
}
#work { position: absolute; top: 86svh; }
.intro {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 var(--gutter);
}
h1 {
  justify-self: center;
  font: 300 clamp(32px, 4.1vw, 72px)/1 Rhymes, Georgia, serif;
  letter-spacing: -.055em;
}
.note {
  position: relative;
  grid-column: 3;
  justify-self: center;
  text-align: center;
  font: 17px/1.3 Saans, sans-serif;
}
.artist { display: block; margin-top: 4px; color: #595650; font-size: 13px; }
.line { position: absolute; inset: calc(100% + 16px) -66px auto; font-size: 13px; }
.ink { color: var(--red); }
.scroll {
  position: absolute;
  inset: auto auto 20px 50%;
  translate: -50% 0;
  padding: 10px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.deck { position: absolute; inset: 0; pointer-events: none; }
.card {
  --radius: clamp(14px, 2vw, 29px);
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--card-width);
  aspect-ratio: 9 / 16;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #25211e;
  pointer-events: auto;
}
.card :is(img, video) { border-radius: inherit; }
.card-left, .card-right {
  transition: transform 250ms cubic-bezier(.2,.7,.25,1);
  transform-origin: center 88%;
}
.card-left { --side: -1; }
.card-right { --side: 1; }
.card:is(.card-left, .card-right) {
  transform: translateX(calc(var(--side) * var(--spread))) rotate(calc(var(--side) * 8deg));
}
.deck:is(:hover, :focus-within) :is(.card-left, .card-right) {
  transform: translateX(calc(var(--side) * var(--spread) * 2.15)) rotate(calc(var(--side) * 15deg));
}
.card-lead {
  width: calc(var(--card-width) + (100% - var(--card-width)) * var(--progress));
  height: calc(var(--card-width) * 16 / 9 + (100% - var(--card-width) * 16 / 9) * var(--progress));
  border-radius: calc(var(--radius) * (1 - var(--progress)));
}
.card-lead video { object-position: 50% 43%; }
.play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding-left: 2px;
  border-radius: 50%;
  background: #201f1c;
  color: white;
  font-size: 11px;
}
.work-menu, .work-image { visibility: hidden; }
.stage.is-work .card-lead { pointer-events: none; filter: brightness(.54); }
.stage.is-work .play { display: none; }
.stage.is-work :is(.work-menu, .work-image) { visibility: visible; }
.work-image {
  position: absolute;
  inset: 0;
  object-position: center 43%;
  opacity: 0;
  filter: brightness(.54);
  pointer-events: none;
}
.work-image[src] { opacity: 1; }
.work-menu {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(24px, 7svh, 84px);
  display: grid;
  justify-items: start;
  color: white;
}
.work-menu button {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15em .35em;
  padding: .04em 0;
  border: 0;
  background: none;
  font-size: clamp(35px, 7.3vw, 112px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.065em;
  text-align: left;
  text-shadow: 0 2px 14px #0008;
}
.work-menu small { font-size: .22em; font-weight: 500; letter-spacing: 0; }
.work-menu button:is(:hover, :focus-visible) { color: #fff1e7; }
.work-menu button:hover small { text-decoration: underline; }
.content { padding: clamp(52px, 9vw, 140px) var(--gutter); }
.content h2 { margin-bottom: 38px; font-size: clamp(46px, 8vw, 120px); line-height: .88; letter-spacing: -.065em; }
.process-grid, .experiment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 45px); }
.frame { display: block; width: 100%; border: 0; background: none; padding: 0; }
.process-grid img { aspect-ratio: 4 / 5; }
figcaption { padding: 12px 0; font-size: 14px; line-height: 1.45; }
figcaption strong { display: block; margin-bottom: 4px; }
.experiments { background: var(--ink); color: var(--paper); }
.experiment-grid { grid-template-columns: 1fr 1fr; }
.experiment-grid img { aspect-ratio: 16 / 10; }
footer { margin-top: 64px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 680px) {
  .stage { --card-width: clamp(108px, min(29vw, 21svh), 158px); --spread: 17px; }
  .intro { display: block; }
  h1 {
    position: absolute;
    inset: 11% var(--gutter) auto;
    text-align: center;
    font-size: clamp(29px, min(8.8vw, 6svh), 48px);
  }

  .note { position: absolute; top: 76%; left: 50%; translate: -50% 0; width: 75%; max-width: none; }
  .line { inset: calc(100% + 8px) 0 auto; }
  .scroll { bottom: 8px; }
  .work-menu { gap: 9px; }
  .work-menu small { font-size: .32em; }
  .process-grid { grid-template-columns: 1fr; gap: 30px; }
  .process-grid figure { max-width: 460px; }
  .experiment-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .card-left, .card-right { transition: none; }
}
.preview-toggle {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 20px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font-size: 12px;
}
.preview-toggle:hover { text-decoration: underline; }
.is-work .preview-toggle { color: white; background: #201f1c; border-radius: 6px; }
.process h2 { text-align: center; }
@media (min-width: 681px) {
  .process-grid {
    width: min(940px, 100%);
    margin-inline: auto;
    gap: 0;
  }
  .process-grid figure { position: relative; }
  .process-grid figure:nth-child(2) { z-index: 1; }
  .process-grid figure:focus-within { z-index: 2; }
  .process-grid figure:first-child .frame { transform: translate(8%, 7%) rotate(-7deg); }
  .process-grid figure:last-child .frame { transform: translate(-8%, 7%) rotate(7deg); }
  .process-grid .frame { border-radius: 16px; }
  .process-grid img { border-radius: inherit; }
  .process-grid figcaption { max-width: 27ch; margin: 44px auto 0; padding-inline: 8px; }
}
@media (max-width: 680px) {
  .preview-toggle { right: 8px; bottom: 8px; padding-inline: 8px; }
  .scroll { left: var(--gutter); translate: none; padding-left: 0; }
}

.hero-replay { display: block; max-width: 100%; padding: 0; border: 0; background: none; letter-spacing: inherit; text-align: left; }
.hero-replay:disabled { cursor: default; }
.hero-replay:focus-visible { outline: 2px solid #2323b2; outline-offset: 5px; }
.hero-for { font-family: Saans, Arial, sans-serif; font-weight: 400; }
.intro h1 em { font-weight: 300; }
.hero-line { display: block; position: relative; }
.hero-lead { width: max-content; max-width: 100%; }
.hero-tracker {
  position: absolute;
  top: -.27em;
  left: -.18em;
  width: 5.4em;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
.hero-middle { clip-path: inset(0 -.1em); }
.hero-middle > span { display: block; }
.hero-alternate { position: absolute; inset: 0; visibility: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero-playing .hero-lead > span { animation: hero-type 4s step-end both; }
  .hero-playing .hero-tracker { animation: hero-tracker 4s step-end both; }
  .hero-playing .hero-middle > :first-child { animation: hero-roll-out 4s cubic-bezier(.23, 1, .32, 1); }
  .hero-playing .hero-alternate {
    visibility: visible;
    animation: hero-roll-in 4s cubic-bezier(.23, 1, .32, 1);
  }
}
@keyframes hero-type {
  0%, 45%, 100% { opacity: 1; }
  15% { opacity: 0; }
}
@keyframes hero-tracker {
  0%, 45%, 100% { opacity: 0; }
  15% { opacity: 1; }
}
@keyframes hero-roll-out {
  0%, 46%, 84%, 100% { transform: translateY(0); }
  52%, 78% { transform: translateY(-120%); }
}
@keyframes hero-roll-in {
  0%, 46%, 84%, 100% { transform: translateY(120%); }
  52%, 78% { transform: translateY(0); }
}
.hero-replay { font: inherit; }
.hero-replay:disabled { color: inherit; opacity: 1; }
.clip-process { background: var(--paper); }
.work-return {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 28px max(0px, calc((100% - 1040px) / 2));
  border: 1px solid #c9c6bf;
  border-radius: 50%;
  text-decoration: none;
}
.work-return:hover { background: var(--ink); color: var(--paper); }
.clip-layout {
  display: grid;
  grid-template: "title player" auto "notes player" 1fr / minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px clamp(24px, 7vw, 110px);
  align-items: start;
  max-width: 1040px;
  margin-inline: auto;
}
.clip-heading { grid-area: title; container-type: inline-size; }
.clip-heading h2, .campaign h2 {
  margin: 0;
  font: 300 clamp(42px, 8vw, 110px)/.95 Rhymes, Georgia, serif;
  letter-spacing: -.055em;
}
.clip-heading h2 { font-size: clamp(28px, 15cqw, 88px); }
.clip-heading h2:focus { outline: none; }
.clip-artist { margin-bottom: 10px; font: 16px Saans, sans-serif; }
.clip-artist:empty { display: none; }
.clip-copy { grid-area: notes; max-width: 35ch; }
.clip-copy h3 { margin: 0 0 8px; font: 300 27px Rhymes, Georgia, serif; }
.clip-notes { font: 16px/1.5 Saans, sans-serif; }
.clip-screen {
  grid-area: player;
  justify-self: center;
  position: relative;
  isolation: isolate;
  width: min(100%, 39svh, 360px);
  aspect-ratio: 9 / 16;
}
.clip-screen::before, .clip-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 24px;
  background: #d8d5ce;
  transform: rotate(-5deg);
  pointer-events: none;
}
.clip-screen::after { background: #c6c2ba; transform: rotate(5deg); }
.clip-screen video {
  border-radius: 24px;
  object-fit: contain;
  background: #201f1c;
}
.is-landscape .clip-screen { width: 100%; aspect-ratio: 16 / 9; }
.clip-layout img { height: auto; aspect-ratio: 16 / 10; margin-top: 12px; }
.campaign { background: #23221f; color: var(--paper); }
.campaign-label { margin-bottom: 14px; font: 14px Saans, sans-serif; }
.account-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px clamp(10px, 2vw, 30px);
  margin-top: 42px;
}
.account h3 { margin: 0 0 10px; font: 14px Saans, sans-serif; }
.account-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.account-posts button {
  border: 0;
  padding: 0;
  background: #383631;
  border-radius: 6px;
  aspect-ratio: 9 / 16;
}
.account-posts img { border-radius: inherit; }
.account-posts button:hover img { opacity: .8; }
@media (max-width: 680px) {
  .hero-replay { text-align: center; margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .clip-layout { grid-template: "title" auto "player" auto "notes" auto / minmax(0, 1fr); }
  .clip-screen { width: min(88%, 35svh, 360px); }
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.campaign-map {
  position: absolute;
  top: 15%;
  left: 50%;
  translate: -50% 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(264px, 36vw);
  margin: 0;
  pointer-events: none;
  color: #595650;
  font: 12px Saans, sans-serif;
  text-align: center;
  text-decoration: none;
}
.campaign-map svg {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: clamp(28px, 5svh, 44px);
  fill: none;
  stroke: #aaa49a;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.campaign-map path { vector-effect: non-scaling-stroke; }
.campaign-map .map-stem { stroke: #928b80; }
.map-profile { justify-self: center; min-width: 0; }
.map-profile-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  white-space: nowrap;
}
.map-avatar {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.map-posts { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.map-posts span { position: relative; }
.map-posts span::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  border-block: 2.5px solid transparent;
  border-left: 4px solid #fff;
  filter: drop-shadow(0 0 2px #000);
}
.map-posts img { display: block; width: 14px; height: 23px; border-radius: 2px; object-fit: cover; }

.is-work .campaign-map { visibility: hidden; }
@media (max-width: 680px) {
  .campaign-map { top: 64%; width: min(270px, 88vw); }
  .campaign-map svg { height: 22px; }
  .note { top: 80%; }
}

.campaign-map .map-wide { display: none; }
@media (min-width: 901px) and (min-height: 680px) {
  .campaign-map {
    top: 8%;
    width: min(80vw, 1130px);
    height: calc(42svh - var(--card-width) * .82);
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    pointer-events: none;
  }
  .campaign-map .map-profile { position: absolute; translate: -50% 0; }
  .campaign-map .map-profile:nth-of-type(1) { left: 9%; top: 42%; }
  .campaign-map .map-profile:nth-of-type(2) { left: 71%; top: 57%; }
  .campaign-map .map-profile:nth-of-type(3) { left: 91%; top: 39%; }
  .campaign-map .map-narrow { display: none; }
  .campaign-map .map-wide { display: block; position: absolute; inset: 0; height: 100%; }
}

.garden-wordmark { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.garden-wordmark img { width: 23px; height: 23px; object-fit: contain; }
.is-work .garden-wordmark img { filter: brightness(0) invert(1); }