:root {
  --black: #070707;
  --paper: #f2f0e9;
  --grey: #858582;
  --soft: #aaa9a4;
  --charcoal: #171716;
  --oxide: #ed4a22;
  --gap: 10px;
  --pad: 10px;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--soft);
  font: 700 16px/1.2 var(--sans);
  letter-spacing: -.025em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; width: 100%; }

.masthead {
  min-height: clamp(390px, 55vh, 610px);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: start;
  gap: var(--gap);
  padding: var(--pad);
  color: var(--grey);
}
.masthead-intro {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(240px, 490px);
  gap: clamp(24px, 4vw, 80px);
}
.masthead p { max-width: 490px; margin: 0; }
.brand { display: block; width: 100%; max-width: 150px; }
.brand img { filter: invert(1); }
.masthead-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.masthead-location {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  text-align: right;
}
.masthead a,
.lang-toggle { transition: color .18s ease; }
.masthead a:hover,
.lang-toggle:hover { color: var(--paper); }
.lang-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.work-index { position: relative; padding: 0 var(--pad) 70px; }
.floating-controls,
.case-controls {
  position: sticky;
  z-index: 20;
  top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--gap);
  pointer-events: none;
}
.filter-group { display: flex; gap: 4px; }
.control-chip {
  display: inline-block;
  min-height: 30px;
  padding: 6px 9px 5px;
  border: 0;
  border-radius: 5px;
  background: rgba(24, 24, 23, .72);
  color: var(--grey);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  cursor: pointer;
  pointer-events: auto;
  transition: background .18s ease, color .18s ease;
}
.control-chip:hover { color: var(--paper); }
.control-chip.is-active { background: var(--oxide); color: #0b0b0a; }
.grid-toggle b { font-weight: 700; color: var(--paper); }

.content-grid { column-count: 3; column-gap: var(--gap); }
.content-grid[data-columns="2"] { column-count: 2; }
.content-grid[data-columns="4"] { column-count: 4; }
.grid-card {
  width: 100%;
  display: inline-block;
  break-inside: avoid;
  margin: 0 0 var(--gap);
  vertical-align: top;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .24s ease;
}
.grid-card.is-leaving { opacity: 0; transform: translateY(5px); }
.grid-card[hidden] { display: none; }

.carousel {
  position: relative;
  width: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: var(--charcoal);
  cursor: e-resize;
}
.carousel-track { position: relative; display: block; aspect-ratio: 1.1 / 1; }
.carousel-track--portrait { aspect-ratio: .77 / 1; }
.carousel-track--landscape { aspect-ratio: 1.48 / 1; }
.carousel-track--square { aspect-ratio: 1 / 1; }
.carousel-slide {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.008);
  transition: opacity .28s ease, transform .45s ease;
}
.carousel-slide.is-current { opacity: 1; transform: scale(1); }
.carousel-count {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--paper);
  background: rgba(7,7,7,.68);
  font-size: 11px;
  letter-spacing: 0;
  opacity: 0;
  backdrop-filter: blur(12px);
  transition: opacity .18s ease;
}
.carousel:hover .carousel-count,
.carousel:focus-visible .carousel-count { opacity: 1; }
.carousel--external {
  padding: 7px;
  background: var(--charcoal);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.external-project { position: relative; }
.external-project__label {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px 5px;
  border-radius: 5px;
  color: rgba(242, 240, 233, .86);
  background: rgba(23, 23, 22, .62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.external-project__label:hover,
.external-project__label:focus-visible {
  color: var(--paper);
  background: rgba(23, 23, 22, .78);
}
.external-project__track {
  overflow: hidden;
  border-radius: 5px;
  background: var(--charcoal);
}
.external-project__track--sand { background: #ede8de; }
.external-project__track--tift { background: #322a8b; }
.carousel--external .carousel-count {
  right: 14px;
  bottom: 14px;
}
.carousel-slide--contain {
  object-fit: contain;
  padding: 5%;
}
.carousel-slide--wordmark { padding: 15%; }
.carousel-slide--symbol { padding: 12%; }
.card-caption { margin: 7px 1px 2px; color: var(--grey); }
.card-caption a {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 2px 0;
  color: var(--paper);
}
.card-caption a:hover { color: var(--oxide); }
.external-project__caption > span:first-child { color: #aca69d; }
.external-project__caption .external-project__credit {
  display: block;
  margin-top: 2px;
  color: #6d665f;
}
.external-project__caption a { color: #c8c4c1; }

.identity-motion {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #c7c3c0;
  animation: identity-palette 24s cubic-bezier(.45, 0, .55, 1) infinite;
}
.identity-motion--card {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  animation: identity-card-palette 2.4s steps(1, end) infinite;
}
.identity-motion__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  aspect-ratio: 2.1 / 1;
  transform: translate(-50%, -50%);
  animation: identity-drift 24s ease-in-out infinite;
}
.identity-motion__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.identity-motion__ink { fill: #f3f1ed; animation: identity-ink 24s cubic-bezier(.45, 0, .55, 1) infinite; }
.identity-motion--card .identity-motion__mark {
  animation: none;
  transform: translate(-50%, -50%);
}
.identity-motion--card .identity-motion__ink { animation: identity-card-ink 2.4s steps(1, end) infinite; }
.identity-motion--card.is-paused,
.identity-motion--card.is-paused .identity-motion__ink { animation-play-state: paused; }
@keyframes identity-palette {
  0%, 100% { background-color: #c8c4c1; }
  16.66% { background-color: #e9e8e6; }
  33.33% { background-color: #aca69d; }
  50% { background-color: #433a34; }
  66.66% { background-color: #ada79e; }
  83.33% { background-color: #cbc7c4; }
}
@keyframes identity-ink {
  0%, 100% { fill: #f3f1ed; }
  16.66% { fill: #c8c4c1; }
  33.33% { fill: #cecac6; }
  50% { fill: #f3f1ed; }
  66.66% { fill: #3f3731; }
  83.33% { fill: #aba69f; }
}
@keyframes identity-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  25% { transform: translate(-49%, -50.5%) scale(1.018); }
  50% { transform: translate(-50.5%, -49.5%) scale(1.01); }
  75% { transform: translate(-49.5%, -50%) scale(1.022); }
}
@keyframes identity-card-palette {
  0%, 100% { background-color: #c8c4c1; }
  16% { background-color: #433a34; }
  32% { background-color: #e9e8e6; }
  49% { background-color: #aca69d; }
  66% { background-color: #cbc7c4; }
  83% { background-color: #6d665f; }
}
@keyframes identity-card-ink {
  0%, 100% { fill: #f3f1ed; }
  16% { fill: #f3f1ed; }
  32% { fill: #5c554f; }
  49% { fill: #332e2a; }
  66% { fill: #8d877f; }
  83% { fill: #dedbd6; }
}
.info-card {
  min-height: 320px;
  padding: 13px;
  border-radius: 9px;
  background: var(--charcoal);
  color: var(--soft);
}
.info-card p { margin: 0 0 1em; }
.info-card--studio { min-height: 470px; display: flex; flex-direction: column; justify-content: space-between; }
.info-card--studio p:first-child { color: var(--paper); font-size: clamp(20px, 2vw, 31px); line-height: 1.04; letter-spacing: -.045em; }
.info-card--studio p:last-child { max-width: 440px; color: var(--grey); }
.card-label { color: var(--oxide); }
.info-card--capabilities { min-height: 520px; }
.info-card ul { list-style: none; margin: 90px 0 0; padding: 0; color: var(--paper); font-size: clamp(21px, 2vw, 32px); line-height: 1.06; letter-spacing: -.045em; }
.info-card--production { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; }
.info-card--production > p:last-child { max-width: 480px; margin: 0; color: var(--paper); font-size: clamp(20px, 1.7vw, 28px); line-height: 1.06; letter-spacing: -.04em; }
.info-card--contact { min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; background: var(--oxide); color: #12110f; }
.info-card--contact .card-label { color: #12110f; }
.info-card--contact > a { color: #12110f; font-size: clamp(27px, 3vw, 48px); line-height: .95; letter-spacing: -.055em; }
.info-card--contact > a:hover { color: var(--paper); }

footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--gap);
  padding: 10px var(--pad) 18px;
  color: var(--grey);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}
footer span:nth-child(2) { text-align: center; }

/* Project page */
.case-page .masthead { min-height: clamp(300px, 42vh, 470px); }
.case-controls { margin: 0 var(--pad); }
.case-intro {
  min-height: 72vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: clamp(60px, 9vw, 145px) var(--pad) clamp(85px, 11vw, 175px);
}
.case-title { align-self: end; }
.case-kicker { margin: 0 0 16px; color: var(--grey); font-size: 12px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0; }
.case-title h1 { margin: 0; color: var(--paper); font-size: clamp(57px, 8.5vw, 132px); font-weight: 700; line-height: .81; letter-spacing: -.08em; }
.case-summary { align-self: end; display: grid; grid-template-columns: 1.35fr .8fr; gap: clamp(28px, 5vw, 78px); }
.case-summary > p { max-width: 620px; margin: 0; color: var(--soft); font-size: clamp(17px, 1.5vw, 23px); line-height: 1.18; }
.case-meta { font-size: 12px; line-height: 1.35; letter-spacing: 0; text-transform: uppercase; }
.case-meta p { margin: 0 0 14px; }
.case-meta b { display: block; color: var(--paper); font-weight: 700; }
.case-gallery { display: grid; gap: 4px; padding: 0 4px; }
.case-gallery figure { margin: 0; overflow: hidden; border-radius: 8px; background: var(--charcoal); }
.case-gallery img { width: 100%; height: auto; }
.case-full img { aspect-ratio: 16 / 9.2; object-fit: cover; }
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.case-pair--asym { grid-template-columns: 1.15fr .85fr; }
.case-pair img { height: 100%; object-fit: cover; }
.case-pair--asym img { aspect-ratio: 3 / 2; }
.case-pair--portrait img { aspect-ratio: 2 / 3; }
.identity-case-gallery { padding: 0 4px; }
.identity-motion--hero {
  min-height: min(82vh, 920px);
  border-radius: 8px;
}
.identity-motion--hero .identity-motion__mark { width: min(66vw, 890px); }
.identity-notes {
  display: grid;
  grid-template-columns: .5fr 1.5fr .5fr 1.5fr;
  gap: var(--gap);
  padding: clamp(80px, 11vw, 170px) var(--pad);
  color: var(--grey);
}
.identity-notes p { margin: 0; }
.identity-notes .identity-note-label {
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.identity-notes .identity-note-copy {
  max-width: 580px;
  color: var(--soft);
  font-size: clamp(18px, 1.6vw, 25px);
  line-height: 1.13;
  letter-spacing: -.035em;
}
.case-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.case-nav a { min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; padding: 13px; border-radius: 8px; background: var(--charcoal); color: var(--grey); }
.case-nav a:last-child { background: var(--oxide); color: #12110f; }
.case-nav strong { font-size: clamp(27px, 3vw, 48px); line-height: .95; letter-spacing: -.055em; }

@media (max-width: 900px) {
  body { font-size: 15px; }
  .masthead { min-height: 430px; grid-template-columns: 2fr 1fr; }
  .masthead-intro { display: block; }
  .brand { width: 118px; margin-bottom: 20px; }
  .masthead-contact { display: none; }
  .masthead-location { justify-self: end; }
  .case-intro { grid-template-columns: 1fr; min-height: auto; }
  .case-summary { margin-top: 80px; }
  .identity-notes { grid-template-columns: .45fr 1.55fr; row-gap: 55px; }
}

@media (max-width: 620px) {
  :root { --pad: 8px; --gap: 8px; }
  .masthead { min-height: 370px; grid-template-columns: 1fr 1fr; }
  .masthead-intro p { max-width: 240px; }
  .masthead-location span:nth-child(2) { display: none; }
  .grid-toggle { display: none; }
  .content-grid,
  .content-grid[data-columns="2"],
  .content-grid[data-columns="4"] { column-count: 1; }
  .carousel-count { opacity: 1; }
  .info-card--studio,
  .info-card--capabilities,
  .info-card--contact { min-height: 410px; }
  .case-page .masthead { min-height: 300px; }
  .case-controls { top: 8px; }
  .case-intro { padding-top: 70px; }
  .case-title h1 { font-size: clamp(48px, 17vw, 82px); }
  .case-summary { grid-template-columns: 1fr; gap: 55px; }
  .case-pair,
  .case-pair--asym { grid-template-columns: 1fr; }
  .identity-motion--hero { min-height: 68vh; }
  .identity-motion--hero .identity-motion__mark { width: 82%; }
  .identity-notes { grid-template-columns: 1fr; row-gap: 12px; }
  .identity-notes .identity-note-copy + .identity-note-label { margin-top: 38px; }
  .case-nav { grid-template-columns: 1fr; }
  .case-nav a { min-height: 180px; }
  footer { grid-template-columns: 1fr auto; }
  footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .identity-motion { background: #433a34; }
  .identity-motion__ink { fill: #f3f1ed; }
}