@font-face {
  font-family: "Suisse Intl";
  src: url("/assets/SuisseIntl-Book-CkYBftUa.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("/assets/SuisseIntl-Regular-BMlNK7ry.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("/assets/SuisseIntl-Bold-DNpvdXht.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halo Grotesk";
  src: url("/assets/HaloGrotesk-Regular-6wAws4L-.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Halo Grotesk Plain";
  src: url("/assets/HaloGrotesk-PlainRegular--b1VwVT8.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arial SS";
  src: url("/assets/Arial%20SS-DD4s-NA1.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-text: #6b6b6b;
  --color-muted: #a8a8a8;
  --color-soft: rgba(128, 128, 128, 0.08);
  --color-line: rgba(0, 0, 0, 0.1);
  --radius-control: 8px;
  --radius-card: 10px;
  font-family: "Suisse Intl", Arial, sans-serif;
  color: var(--color-text);
  background: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #ffffff;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
}

body[data-theme="dark"] {
  background: #0f0f0f;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

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

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  display: flex;
  flex-direction: column;
  gap: 140px;
  min-height: 100vh;
  padding-bottom: 70px;
}

.hero-section {
  position: relative;
  display: flex;
  height: 105vh;
  min-height: 105vh;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 40px 20px;
  isolation: isolate;
  background: #ffffff;
}

.hero-section::before,
.hero-section::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.hero-section::before {
  z-index: 1;
  background: radial-gradient(
    57.65% 21.53% at 50% 4.72%,
    #ffffff 38.52%,
    rgba(255, 255, 255, 0.7) 54.59%,
    rgba(255, 255, 255, 0.5) 62.94%,
    rgba(255, 255, 255, 0.3) 71.94%,
    rgba(255, 255, 255, 0.2) 77.09%,
    rgba(255, 255, 255, 0.1) 84.38%,
    rgba(255, 255, 255, 0.05) 89.75%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero-section::after {
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 93.778%,
    rgba(255, 255, 255, 0.041) 96.159%,
    rgba(255, 255, 255, 0.18) 97.542%,
    rgba(255, 255, 255, 0.311) 98.252%,
    rgba(255, 255, 255, 0.485) 98.904%,
    rgba(255, 255, 255, 0.606) 99.23%,
    rgba(255, 255, 255, 0.775) 99.64%,
    #ffffff 100%
  );
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.hero-canvas-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  touch-action: none;
  user-select: none;
}

.hero-canvas-root canvas {
  display: block;
  background: transparent;
}

.hero-label-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-card-label {
  position: absolute;
  pointer-events: none;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.hero-card-label--title {
  color: #6b6b6b;
  font-size: 28px;
}

.hero-card-label--tags {
  color: #575757;
  font-size: 18px;
  mix-blend-mode: exclusion;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(100%, 1100px);
  margin: 0;
  color: var(--color-text);
  font-size: clamp(28px, 1.875vw, 36px);
  line-height: normal;
  letter-spacing: -0.01em;
  text-align: center;
  animation: hero-enter 620ms ease-out both;
}

.hero-copy strong {
  font-weight: 700;
}

.projects-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  padding: 0 20px;
}

.project-tools {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-wrap {
  position: relative;
  z-index: 3;
}

.tool-button,
.filter-option,
.footer-button,
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 29px;
  padding: 4px 12px;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.tool-button.is-active,
.tool-button:hover,
.filter-option:hover,
.filter-option.is-selected {
  background: var(--color-soft);
}

.tool-button-tag {
  color: var(--color-muted);
}

.button-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--icon-url) center / contain no-repeat;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
}

.filter-dropdown {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  width: max-content;
  min-width: 184px;
  max-height: 262px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--color-line);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.filter-options-scroll {
  display: flex;
  max-height: 244px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding-right: 4px;
}

.filter-options-scroll::-webkit-scrollbar {
  width: 4px;
}

.filter-options-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d6d6d6;
}

.filter-option {
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 12px;
}

.search-input {
  position: relative;
  display: flex;
  width: min(360px, 42vw);
  align-items: center;
}

.search-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.15;
}

.search-input input::-webkit-search-cancel-button {
  appearance: none;
}

.search-input input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
}

.search-input:has(input:not(:placeholder-shown)) .search-clear {
  display: inline-flex;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 46px 20px;
  width: 100%;
}

.project-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
}

.project-cover {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 445 / 628;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #f2f2f2;
  transition: none;
}

.project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card:hover .project-cover {
  border-color: rgba(0, 0, 0, 0.25);
}

.project-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.project-title {
  width: 100%;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: clamp(22px, 1.46vw, 28px);
  line-height: 1.1;
}

.project-tags {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  color: var(--color-muted);
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 1.15;
  white-space: nowrap;
}

.project-tags span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-tags i {
  width: 3px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.empty-state {
  grid-column: 1 / -1;
  margin: 120px 0;
  color: var(--color-muted);
  font-size: 28px;
  text-align: center;
}

.hero-debug-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10000;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 10px 12px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  color: #4f4f4f;
  font-size: 12px;
  line-height: 1.2;
  backdrop-filter: blur(16px);
  touch-action: auto;
}

.hero-debug-panel summary {
  cursor: pointer;
  color: #333333;
  font-size: 13px;
  font-weight: 700;
}

.hero-debug-panel fieldset {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.hero-debug-panel legend {
  padding: 0;
  color: #858585;
  font-size: 11px;
  text-transform: uppercase;
}

.hero-debug-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.hero-debug-actions button,
.hero-debug-panel input,
.hero-debug-panel select {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #ffffff;
  color: #4f4f4f;
  font-size: 12px;
}

.hero-debug-actions button {
  min-height: 28px;
  padding: 5px 9px;
}

.hero-debug-curve {
  width: 100%;
  height: 110px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    #ffffff;
  background-size: 24px 24px;
}

.hero-debug-curve svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-debug-curve line {
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 1;
}

.hero-debug-curve polyline {
  fill: none;
  stroke: #4f4f4f;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.hero-debug-control {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 62px;
  gap: 8px;
  align-items: center;
}

.hero-debug-control span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-debug-control input[type="range"] {
  width: 100%;
}

.hero-debug-control input[type="number"] {
  width: 62px;
  min-height: 24px;
  padding: 2px 4px;
}

.hero-debug-control--select {
  grid-template-columns: 82px minmax(0, 1fr);
}

.hero-debug-control--select select {
  min-height: 26px;
  padding: 2px 6px;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.footer-button {
  color: var(--color-muted);
  transition: none;
}

.footer-button:hover {
  background: transparent;
  color: var(--color-text);
}

.footer p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.15;
}

.project-page {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: stretch;
  gap: 140px;
  padding: 70px 20px;
}

.back-link {
  width: max-content;
  color: var(--color-muted);
}

.back-link:hover {
  background: var(--color-soft);
  color: var(--color-text);
}

.pp-back {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  min-height: 24px;
  padding: 0;
  border-radius: 4px;
  gap: 0;
}

.pp-back .button-icon {
  width: 24px;
  height: 24px;
}

.pp-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.pp-header-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.pp-title {
  margin: 0;
  color: var(--color-text);
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.01em;
  text-align: center;
}

.pp-meta-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 1100px;
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.01em;
  text-align: center;
}

.pp-meta-bullet {
  font-weight: 350;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.pp-meta-year {
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.01em;
  text-align: center;
}

.pp-header-desc {
  width: 100%;
  margin: 0;
  color: var(--color-text);
  font-size: 28px;
  line-height: normal;
  letter-spacing: -0.01em;
  text-align: center;
}

.pp-covers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  padding: 0 140px;
}

.pp-covers-cell {
  position: relative;
  aspect-ratio: 316.24 / 476.03;
  overflow: hidden;
}

.pp-covers-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-gallery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  width: 100%;
}

.pp-gallery-caption {
  width: 100%;
  padding: 140px 200px 140px 40px;
}

.pp-gallery-caption p {
  margin: 0;
  color: var(--color-text);
  font-size: 28px;
  line-height: normal;
  letter-spacing: -0.01em;
}

.pp-gallery-pair {
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: center;
}

.pp-gallery-pair--wide {
  gap: 20px;
  padding: 40px 200px;
}

.pp-gallery-pair--narrow {
  gap: 20px;
  padding: 140px 300px 200px;
}

.pp-gallery-pair--tight {
  gap: 10px;
  padding: 140px 0;
  filter: drop-shadow(0 1px 1.75px rgba(0, 0, 0, 0.1));
}

.pp-gallery-pair-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.pp-gallery-pair-cell img,
.pp-gallery-pair-cell video,
.pp-gallery-pair-cell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.pp-gallery-pair-cell iframe[data-cover],
.pp-gallery-wide-inner iframe[data-cover],
.pp-gallery-center-cell iframe[data-cover] {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

.pp-gallery-row3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  padding: 40px 0;
  filter: drop-shadow(0 1px 1.75px rgba(0, 0, 0, 0.1));
}

.pp-gallery-row3-cell {
  position: relative;
  overflow: hidden;
}

.pp-gallery-row3-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-gallery-wide {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.pp-gallery-wide-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pp-gallery-wide-inner img,
.pp-gallery-wide-inner video,
.pp-gallery-wide-inner iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.pp-gallery-center {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 140px 200px 200px;
}

.pp-gallery-center--video {
  padding: 168px 300px 240px;
}

.pp-gallery-center-cell {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.pp-gallery-center--video .pp-gallery-center-cell {
  max-width: none;
}

.pp-gallery-center-cell img,
.pp-gallery-center-cell video,
.pp-gallery-center-cell iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.pp-related {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

/* Halo Grotesk project page */

.pp-header--halo .pp-title,
.pp-header--halo .pp-header-desc {
  color: #a3a3a3;
}

.pp-header--halo .pp-meta-tags,
.pp-header--halo .pp-meta-year {
  color: #666666;
}

.pp-header-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pp-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 4px;
  border-radius: 10px;
  color: var(--color-muted);
  transition: background-color 160ms ease, color 160ms ease;
}

.pp-icon-button:hover {
  background: var(--color-soft);
  color: var(--color-text);
}

.pp-icon-button-icon {
  width: 34px;
  height: 34px;
  background: currentColor;
  mask: var(--icon-url) center / contain no-repeat;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
}

/* SmolShorts Archive project page */

.pp-header--smol-archive .pp-icon-button {
  color: var(--color-text);
}

.archive-gallery {
  gap: 40px;
}

.archive-caption {
  padding: 140px 200px 70px 40px;
}

.archive-split {
  display: flex;
  gap: 20px;
  width: 100%;
}

.archive-split-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 930 / 1000;
  border-radius: var(--radius-card);
}

.archive-split-cell img,
.archive-padded-wide-cell img,
.archive-inset-wide-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-padded-wide {
  width: 100%;
  padding: 140px 0 200px;
}

.archive-padded-wide-cell {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.archive-inset-wide {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1880 / 1238.207;
  border-radius: var(--radius-card);
}

.archive-inset-wide-inner {
  position: absolute;
  top: 7.3%;
  left: 0;
  width: 100%;
  height: 85.41%;
  overflow: hidden;
}

/* SmolShorts project page */

.smol-gallery {
  gap: 40px;
}

.smol-part-intro {
  width: 100%;
  padding: 0 200px 0 40px;
}

.smol-part-intro p,
.smol-zine-note p,
.smol-behind-text p,
.smol-team p {
  margin: 0;
  color: var(--color-text);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.01em;
}

.smol-part-intro strong,
.smol-zine-note strong {
  font-weight: 700;
}

.smol-small-artifact {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding-bottom: 70px;
}

.smol-small-artifact div {
  position: relative;
  width: 300px;
  aspect-ratio: 300 / 419.302;
}

.smol-small-artifact img,
.smol-zine-cell img,
.smol-photo-pair-cell img,
.smol-centered-poster-cell img,
.smol-narrow-phone-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smol-font-specimen {
  display: flex;
  gap: 40px;
  width: 100%;
  padding: 0 40px 70px;
  font-family: "Arial SS", Arial, sans-serif;
  font-size: 80px;
  line-height: normal;
  white-space: pre-wrap;
}

.smol-font-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

.smol-font-column p {
  margin: 0;
  line-height: normal;
}

.smol-font-column--regular {
  color: #001ae9;
  letter-spacing: -0.04em;
  font-variation-settings: "RgUg" 1;
}

.smol-font-column--ugly {
  color: transparent;
  letter-spacing: -0.055em;
  -webkit-text-stroke: 3px #001ae9;
  text-stroke: 3px #001ae9;
  font-variation-settings: "RgUg" 1000;
}

.smol-zine-note {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 70px 200px 70px 40px;
}

.smol-zine-note p:first-child {
  flex: 1 1 0;
  min-width: 0;
}

.smol-zine-note .smol-zine-note-num {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

.smol-zine-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #0f0f0f;
}

.smol-zine-row {
  display: flex;
  width: 100%;
}

.smol-zine-cell {
  position: relative;
  width: 100%;
  flex: none;
  overflow: hidden;
}

.smol-zine-row .smol-zine-cell {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

.smol-photo-pair {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 140px 80px;
}

.smol-photo-pair--deep {
  padding-bottom: 200px;
}

.smol-photo-pair-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 920px;
  overflow: hidden;
}

.smol-centered-poster {
  display: flex;
  width: 100%;
  justify-content: center;
}

.smol-centered-poster-cell {
  position: relative;
  width: min(100%, 1366px);
  aspect-ratio: 1366 / 960;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.smol-poster-wide {
  display: flex;
  width: 100%;
  padding: 40px 0;
}

.smol-poster-wide .pp-gallery-wide {
  width: 100%;
}

.smol-narrow-phone {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 70px 700px;
}

.smol-narrow-phone-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 660 / 1395.912;
  overflow: hidden;
}

.smol-behind-text {
  width: 100%;
  padding: 140px 200px 0 40px;
}

.smol-team {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding: 140px 229px 0 0;
}

.smol-team > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Rimini Protokoll project page */

.project-page[data-theme="black"] {
  --color-text: #a3a3a3;
  --color-muted: #666666;
  --color-soft: rgba(255, 255, 255, 0.08);
  --color-line: rgba(255, 255, 255, 0.1);
  --rimini-poster-width: min(586px, calc((100vw - 160px) / 3));
  --rimini-poster-aspect: 586 / 837.142857;
  --rimini-poster-col-gap: 20px;
  --rimini-poster-row-gap: 70px;
  background: #000000;
  color: var(--color-text);
}

.project-page[data-theme="black"] .project-cover {
  background: rgba(255, 255, 255, 0.04);
}

.project-page[data-theme="black"] .project-card:hover .project-cover {
  border-color: rgba(255, 255, 255, 0.25);
}

.project-page[data-theme="black"] .filter-dropdown {
  background: #111111;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.project-page[data-theme="black"] .filter-options-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

.pp-header--rimini .pp-title,
.pp-header--rimini .pp-header-desc {
  color: #a3a3a3;
}

.pp-header--rimini .pp-meta-tags,
.pp-header--rimini .pp-meta-year {
  color: #666666;
}

.rimini-gallery {
  gap: 40px;
}

/* Case intro */
.rimini-case-intro {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 171px;
  width: 100%;
  padding: 200px 40px 140px;
}

.rimini-gallery > .rimini-case-intro:first-child {
  padding-top: 70px;
  padding-bottom: 200px;
}

.rimini-case-copy {
  flex: 1 0 0;
  min-width: 320px;
}

.rimini-case-note {
  flex: 1 0 0;
  min-width: 1px;
  max-width: 436px;
  text-align: right;
}

.rimini-case-image {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  max-width: 435px;
  aspect-ratio: 1280 / 853;
  overflow: hidden;
}

.rimini-case-copy p,
.rimini-case-note p {
  margin: 0;
  color: var(--color-text);
  font-size: 28px;
  line-height: normal;
  letter-spacing: -0.01em;
}

.rimini-case-title {
  font-weight: 700;
}

.rimini-case-note p {
  color: var(--color-muted);
  font-weight: 700;
}

.rimini-case-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Series sub-groups (collections of poster grids that belong to one case) */
.rimini-series-group {
  display: flex;
  flex-direction: column;
  gap: var(--rimini-poster-row-gap);
  width: 100%;
  padding: 40px 0;
}

.rimini-series-group--city {
  padding-bottom: 90px;
}

/* Poster grid — common */
.rimini-poster-grid {
  display: grid;
  width: 100%;
  column-gap: var(--rimini-poster-col-gap);
  row-gap: var(--rimini-poster-row-gap);
  justify-content: center;
  padding: 70px 40px;
}

.rimini-poster-grid--single {
  grid-template-columns: var(--rimini-poster-width);
}

.rimini-poster-grid--two-offset {
  grid-template-columns: repeat(2, var(--rimini-poster-width));
}

.rimini-poster-grid--three {
  grid-template-columns: repeat(3, var(--rimini-poster-width));
}

/* When a single poster is the first item of a series-group, only top padding is applied */
.rimini-poster-grid--single-pt {
  padding-bottom: 0;
}

/* Poster cell */
.rimini-poster-cell {
  position: relative;
  width: var(--rimini-poster-width);
  aspect-ratio: var(--rimini-poster-aspect);
  overflow: hidden;
}

.rimini-poster-cell--col-1 { grid-column: 1; }
.rimini-poster-cell--col-2 { grid-column: 2; }
.rimini-poster-cell--col-3 { grid-column: 3; }
.rimini-poster-cell--row-1 { grid-row: 1; }
.rimini-poster-cell--row-2 { grid-row: 2; }
.rimini-poster-cell--row-3 { grid-row: 3; }

.rimini-poster-cell img,
.rimini-poster-cell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.rimini-poster-cell iframe {
  background: #000000;
}

/* Hero — single centered poster, padded only at the bottom */
.rimini-hero {
  display: grid;
  grid-template-columns: var(--rimini-poster-width);
  justify-content: center;
  width: 100%;
  padding: 0 40px 70px;
}

/* Wide image (full-bleed inside container) */
.rimini-wide {
  width: 100%;
}

.rimini-wide-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.rimini-wide-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arogene project page */

.aro-gallery {
  gap: 40px;
}

.aro-wide {
  width: 100%;
}

.aro-wide-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1880 / 1057.5;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.aro-wide-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aro-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 300px;
  width: 100%;
  height: 960px;
  border-radius: var(--radius-card);
}

.aro-logo {
  display: block;
  flex-shrink: 0;
  height: 100px;
}

.aro-logo--full {
  width: 491.422px;
}

.aro-logo--small {
  width: 237px;
}

.aro-boxes-pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: 70px 0;
  border-radius: var(--radius-card);
}

.aro-box-cell {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 960 / 870;
  overflow: hidden;
}

.aro-box-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aro-box-single {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 70px 43px;
  border-radius: var(--radius-card);
}

.aro-box-single .aro-box-cell {
  flex: none;
  width: 930px;
  aspect-ratio: 960 / 870;
}

.aro-cards-pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.aro-card-cell {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 1000px;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.aro-card-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aro-card-final {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 200px 0 140px;
}

.aro-card-final-cell {
  position: relative;
  width: 600px;
  height: 600px;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.aro-card-final-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shared title link button (external link icon next to project title) */

.pp-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pp-title-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 4px;
  border-radius: 10px;
  color: var(--color-text);
  text-decoration: none;
}

.pp-title-link:hover {
  background: var(--color-soft);
}

.pp-title-link svg {
  width: 100%;
  height: 100%;
}

.pp-header--rimini .pp-title-link,
.pp-header--rimini .pp-title-link {
  color: #a3a3a3;
}

/* what-if project page */

.wif-gallery {
  gap: 40px;
}

.wif-hero {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wif-hero-cell {
  position: relative;
  width: 960px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wif-hero-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wif-tall-cell,
.wif-square-cell,
.wif-rect-cell {
  position: relative;
  overflow: hidden;
}

.wif-tall-cell {
  --cell-aspect: 0.822917;
  width: 790px;
  aspect-ratio: var(--cell-aspect);
}

.wif-square-cell {
  --cell-aspect: 1;
  width: 960px;
  aspect-ratio: var(--cell-aspect);
}

.wif-rect-cell {
  --cell-aspect: 0.75;
  width: 720px;
  aspect-ratio: var(--cell-aspect);
}

.wif-tall-cell img,
.wif-square-cell img,
.wif-rect-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wif-tall-cell iframe,
.wif-square-cell iframe,
.wif-rect-cell iframe {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  width: max(100%, calc(100% * var(--vid-aspect, 1) / var(--cell-aspect, 1)));
  height: max(100%, calc(100% * var(--cell-aspect, 1) / var(--vid-aspect, 1)));
}

.wif-pair {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  padding: 70px 140px;
}

.wif-pair .wif-tall-cell {
  flex: 1 0 0;
  min-width: 0;
  width: auto;
}

.wif-single {
  display: flex;
  width: 100%;
  padding: 70px 140px;
}

.wif-single--left {
  justify-content: flex-start;
}

.wif-single--right {
  justify-content: flex-end;
}

.wif-square-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.wif-credits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  padding: 140px 0 0;
  column-gap: 20px;
}

.wif-credit-block,
.infla-credit-block,
.slu-credit-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -0.01em;
}

.slu-credit-block,
.wif-credit-block,
.infla-credit-block {
  font-size: 28px;
  white-space: nowrap;
  justify-self: start;
}

.wif-credit-role,
.infla-credit-role,
.slu-credit-role {
  margin: 0;
  color: var(--color-muted);
}

.slu-credit-role,
.wif-credit-role,
.infla-credit-role {
  color: var(--color-text);
}

.wif-credit-name,
.infla-credit-name,
.slu-credit-name {
  margin: 0;
  color: var(--color-text);
}

/* Infla project page */

.infla-gallery {
  gap: 40px;
}

.infla-hero {
  width: 100%;
}

.infla-hero-cell {
  --cell-aspect: 1.7778;
  position: relative;
  width: 100%;
  aspect-ratio: var(--cell-aspect);
  overflow: hidden;
  border-radius: var(--radius-card);
}

.infla-hero-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infla-hero-cell iframe {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  width: max(100%, calc(100% * var(--vid-aspect, 1.7778) / var(--cell-aspect, 1.7778)));
  height: max(100%, calc(100% * var(--cell-aspect, 1.7778) / var(--vid-aspect, 1.7778)));
}

.infla-logo-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 238px;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.infla-logo-icon {
  flex-shrink: 0;
  width: 235.526px;
  height: 235.526px;
  display: block;
}

.infla-logo-mark {
  width: 762.13px;
  height: 268.5px;
  display: block;
  flex-shrink: 0;
}

.infla-tall-left {
  display: flex;
  width: 100%;
}

.infla-tall-cell {
  position: relative;
  width: 1130.49px;
  height: 1500px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.infla-tall-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infla-wide-right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.infla-wide-right-cell {
  position: relative;
  width: 987.57px;
  aspect-ratio: 987.57 / 493.785;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.infla-wide-right-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infla-stair {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.infla-stair-cell {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.infla-stair-cell--1 {
  aspect-ratio: 462.5 / 442.351;
}
.infla-stair-cell--2 {
  aspect-ratio: 462.5 / 430.217;
}
.infla-stair-cell--3 {
  aspect-ratio: 462.5 / 419.227;
}
.infla-stair-cell--4 {
  aspect-ratio: 462.5 / 264.449;
}

.infla-stair-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infla-wide {
  width: 100%;
}

.infla-wide--2 {
  padding: 40px 0;
}

.infla-wide-cell {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.infla-wide--1 .infla-wide-cell {
  aspect-ratio: 1880 / 1119.92;
}

.infla-wide--2 .infla-wide-cell {
  aspect-ratio: 1880 / 1010.15;
}

.infla-wide--3 .infla-wide-cell {
  aspect-ratio: 1880 / 941.96;
}

.infla-wide-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infla-triple {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 40px 0;
}

.infla-triple-cell {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 626.667 / 734.4;
  overflow: hidden;
}

.infla-triple-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infla-pair-right {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
  padding: 70px 64px 70px 0;
}

.infla-pair-right-cell {
  position: relative;
  width: 391px;
  height: 828px;
  border-radius: 43px;
  box-shadow: -2px 10px 64px 0 rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.infla-pair-right-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infla-prototype {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  padding: 168px 300px 240px;
}

.infla-prototype-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 720;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.04);
}

.infla-prototype-cell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.infla-credits {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 140px 229px 0 0;
}

/* sluchai project page */

.slu-gallery {
  gap: 40px;
}

.slu-hero {
  width: 100%;
}

.slu-hero-cell {
  --cell-aspect: 1.7778;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.slu-hero-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-intro-text {
  width: 100%;
  padding: 140px 200px 0 40px;
}

.slu-intro-text p {
  margin: 0;
  color: var(--color-text);
  font-size: 28px;
  line-height: normal;
  letter-spacing: -0.01em;
}

.slu-wide {
  width: 100%;
}

.slu-wide-cell {
  --cell-aspect: 1.7778;
  position: relative;
  width: 100%;
  aspect-ratio: var(--cell-aspect);
  overflow: hidden;
  border-radius: var(--radius-card);
}

.slu-wide--narrow .slu-wide-cell {
  --cell-aspect: 1.6566;
}

.slu-wide--bigger .slu-wide-cell {
  --cell-aspect: 1.88;
}

.slu-wide-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-square-timeline {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  background: #d7d8db;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.slu-square-pad {
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 80px;
  display: flex;
}

.slu-square-cell {
  flex: 1 0 0;
  position: relative;
  min-width: 0;
}

.slu-square-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-timeline-cell {
  position: relative;
  flex-shrink: 0;
  width: 835.6px;
  aspect-ratio: 835.6 / 1044.5;
}

.slu-timeline-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-poster {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 70px 140px 0;
}

.slu-poster--intro {
  justify-content: center;
  padding: 140px 140px 70px;
}

.slu-poster--center {
  justify-content: center;
}

.slu-poster--left {
  justify-content: flex-start;
}

.slu-poster--right {
  justify-content: flex-end;
  padding: 70px 140px 140px;
}

.slu-poster-cell {
  position: relative;
  width: 613px;
  height: 875.714px;
  overflow: hidden;
}

.slu-poster--intro .slu-poster-cell {
  width: 623px;
  height: 890px;
}

.slu-poster-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-pair-630 {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 140px 300px 200px;
}

.slu-pair-630-cell {
  --cell-aspect: 0.65625;
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: var(--cell-aspect);
  overflow: hidden;
  border-radius: var(--radius-card);
}

.slu-pair-630-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-center-wide {
  display: flex;
  justify-content: center;
  width: 100%;
}

.slu-center-wide-cell {
  position: relative;
  width: 1080px;
  aspect-ratio: 1080 / 1057.5;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.slu-center-wide-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-triple {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  padding: 140px 0;
}

.slu-triple-cell {
  --cell-aspect: 0.66675;
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: var(--cell-aspect);
  overflow: hidden;
}

.slu-triple-cell--video {
  border-radius: var(--radius-card);
}

.slu-triple-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-pair-520 {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  padding: 140px 160px 200px;
}

.slu-pair-520-cell {
  position: relative;
  flex-shrink: 0;
  width: 520px;
  height: 780px;
  overflow: hidden;
}

.slu-pair-520-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-single-right-520 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  padding: 140px 160px 200px;
}

.slu-single-right-520-cell {
  position: relative;
  width: 520px;
  height: 780px;
  overflow: hidden;
}

.slu-single-right-520-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-single-left-wide {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 140px 200px 200px 140px;
}

.slu-single-left-wide-cell {
  position: relative;
  width: 660px;
  height: 900px;
  overflow: hidden;
}

.slu-single-left-wide-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-center-1280 {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 168px 300px 240px;
}

.slu-center-1280-cell {
  position: relative;
  width: 1280px;
  overflow: hidden;
}

.slu-center-1280-cell--image {
  aspect-ratio: 1280 / 906.83;
  box-shadow: 0 1px 3.5px 0 rgba(0, 0, 0, 0.13);
}

.slu-center-1280-cell--video {
  --cell-aspect: 1.7778;
  aspect-ratio: var(--cell-aspect);
  border-radius: var(--radius-card);
}

.slu-center-1280-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-cards-pair {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.slu-cards-pair-cell {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 1000px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.slu-cards-pair-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slu-credits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  padding: 140px 0 0;
  column-gap: 20px;
}

/* iframe cover behavior — iframe doesn't support object-fit: cover, so we
   scale the iframe larger than the cell along the dimension where the
   video aspect would underflow, then clip via overflow:hidden on the cell.
   Each cell defines --cell-aspect; each iframe sets --vid-aspect inline. */
.slu-hero-cell iframe,
.slu-wide-cell iframe,
.slu-pair-630-cell iframe,
.slu-triple-cell--video iframe,
.slu-center-1280-cell--video iframe {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  width: max(100%, calc(100% * var(--vid-aspect, 1.7778) / var(--cell-aspect, 1.7778)));
  height: max(100%, calc(100% * var(--cell-aspect, 1.7778) / var(--vid-aspect, 1.7778)));
}

/* Responsive — what-if / Infla / sluchai */

@media (max-width: 1180px) {
  .wif-hero-cell {
    width: min(100%, 760px);
  }

  .wif-pair {
    padding: 56px 60px;
    gap: 12px;
  }

  .wif-single {
    padding: 56px 60px;
  }

  .wif-tall-cell,
  .wif-square-cell,
  .wif-rect-cell {
    width: 100%;
  }

  .wif-pair .wif-tall-cell {
    width: auto;
  }

  .wif-credits {
    padding: 80px 20px 0;
    gap: 32px;
  }

  .wif-credit-block,
  .infla-credit-block,
  .slu-credit-block {
    font-size: 18px;
    gap: 12px;
  }

  .infla-logo-block {
    gap: clamp(60px, 12vw, 238px);
    padding: 0 60px;
  }

  .infla-logo-icon {
    width: clamp(140px, 18vw, 235.526px);
    height: clamp(140px, 18vw, 235.526px);
  }

  .infla-logo-mark {
    width: clamp(360px, 56vw, 762.13px);
    height: auto;
    aspect-ratio: 762.13 / 268.5;
  }

  .infla-tall-cell {
    width: min(100%, 880px);
    height: auto;
    aspect-ratio: 1130.49 / 1500;
  }

  .infla-wide-right-cell {
    width: min(100%, 760px);
  }

  .infla-pair-right {
    padding: 56px 32px 56px 0;
    gap: 12px;
  }

  .infla-pair-right-cell {
    width: clamp(220px, 30vw, 391px);
    height: auto;
    aspect-ratio: 391 / 828;
  }

  .infla-prototype {
    padding: 80px 60px 120px;
  }

  .infla-credits {
    padding: 80px 20px 0;
  }

  .slu-poster,
  .slu-poster--left,
  .slu-poster--right {
    padding: 56px 60px;
  }

  .slu-poster-cell {
    width: min(100%, 480px);
  }

  .slu-pair-630,
  .slu-pair-520 {
    padding: 80px 60px;
    gap: 12px;
  }

  .slu-triple {
    padding: 80px 20px;
    gap: 12px;
  }

  .slu-center-wide-cell {
    width: min(100%, 800px);
  }

  .slu-center-1280 {
    padding: 80px 60px;
  }

  .slu-single-left-wide {
    padding: 80px 0 0 60px;
  }

  .slu-single-left-wide-cell {
    width: min(100%, 480px);
  }

  .slu-single-right-520 {
    padding: 80px 60px;
  }

  .slu-credits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 80px 20px 0;
    column-gap: 20px;
    row-gap: 32px;
  }

  .slu-credit-block {
    white-space: normal;
  }

  .slu-poster--intro {
    padding: 56px 60px;
  }

  .slu-poster--intro .slu-poster-cell {
    width: min(100%, 480px);
    height: auto;
    aspect-ratio: 623 / 890;
  }

  .slu-poster-cell {
    height: auto;
    aspect-ratio: 613 / 875.714;
  }

  .slu-pair-520-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 520 / 780;
  }

  .slu-single-right-520-cell {
    height: auto;
    aspect-ratio: 520 / 780;
  }

  .slu-single-left-wide-cell {
    height: auto;
    aspect-ratio: 660 / 900;
  }

  .slu-center-1280-cell {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .wif-pair,
  .wif-single,
  .infla-pair-right,
  .slu-pair-630,
  .slu-pair-520,
  .slu-triple,
  .slu-cards-pair {
    flex-direction: column;
    padding: 24px 16px;
    gap: 16px;
    align-items: stretch;
  }

  .wif-pair .wif-tall-cell,
  .infla-stair-cell,
  .infla-pair-right-cell,
  .infla-triple-cell,
  .slu-pair-630-cell,
  .slu-pair-520-cell,
  .slu-triple-cell,
  .slu-cards-pair-cell {
    width: 100%;
    height: auto;
    flex: none;
  }

  .infla-pair-right-cell {
    aspect-ratio: 391 / 828;
  }

  .slu-cards-pair-cell {
    aspect-ratio: 930 / 1000;
  }

  .infla-stair {
    flex-direction: column;
  }

  .infla-stair-cell--1 { aspect-ratio: 462.5 / 442.351; }
  .infla-stair-cell--2 { aspect-ratio: 462.5 / 430.217; }
  .infla-stair-cell--3 { aspect-ratio: 462.5 / 419.227; }
  .infla-stair-cell--4 { aspect-ratio: 462.5 / 264.449; }

  .infla-logo-block {
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
    padding: 56px 16px;
    gap: 32px;
  }

  .infla-logo-mark {
    width: min(100%, 480px);
    height: auto;
    aspect-ratio: 762.13 / 268.5;
  }

  .infla-tall-cell {
    width: 100%;
  }

  .infla-wide-right {
    justify-content: stretch;
  }

  .infla-wide-right-cell {
    width: 100%;
  }

  .slu-square-timeline {
    flex-direction: column;
  }

  .slu-square-pad {
    padding: 24px;
  }

  .slu-timeline-cell {
    width: 100%;
    aspect-ratio: 835.6 / 1044.5;
  }

  .slu-poster,
  .slu-poster--intro,
  .slu-poster--left,
  .slu-poster--right {
    padding: 24px 16px;
  }

  .slu-poster-cell,
  .slu-poster--intro .slu-poster-cell {
    width: 100%;
  }

  .slu-credits {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .slu-center-wide-cell,
  .slu-single-left-wide-cell,
  .slu-single-right-520-cell {
    width: 100%;
  }

  .slu-center-1280 {
    padding: 24px 16px;
  }

  .slu-single-left-wide {
    padding: 24px 16px 0;
  }

  .slu-single-right-520 {
    padding: 24px 16px;
  }

  .slu-intro-text {
    padding: 56px 16px 0;
  }

  .slu-intro-text p {
    font-size: 18px;
  }

  .infla-prototype {
    padding: 24px 16px;
  }
}

.halo-showcase {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 80px;
  width: 100%;
}

.halo-frame {
  position: relative;
  width: 100%;
  background: #0f0f0f;
  color: #b6b8bf;
  overflow: hidden;
}

.halo-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 30px;
  height: max(320px, calc(100svh - var(--halo-intro-top, 386px)));
  padding: 0 0 80px 40px;
  text-align: left;
  white-space: nowrap;
}

.halo-intro-line {
  margin: 0;
  font-size: clamp(40px, 7.98vw, 150px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.halo-intro-line--regular {
  font-family: "Halo Grotesk", "Suisse Intl", Arial, sans-serif;
}

.halo-intro-line--plain {
  font-family: "Halo Grotesk Plain", "Suisse Intl", Arial, sans-serif;
}

.halo-alphabet {
  aspect-ratio: 1880 / 1080;
}

.halo-alphabet-block {
  position: absolute;
  left: 25px;
  width: calc(100% - 50px);
  font-family: "Halo Grotesk", "Suisse Intl", Arial, sans-serif;
  font-size: clamp(40px, 7.98vw, 150px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.halo-alphabet-block p {
  margin: 0;
  line-height: 1;
}

.halo-alphabet-block--upper {
  top: 40px;
}

.halo-alphabet-block--lower {
  bottom: 40px;
}

.halo-alphabet-label {
  position: absolute;
  top: 40px;
  right: 25px;
  margin: 0;
  font-family: "Halo Grotesk Plain", "Suisse Intl", Arial, sans-serif;
  font-size: clamp(20px, 2.66vw, 50px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: right;
}

.halo-numbers {
  aspect-ratio: 1880 / 1080;
}

.halo-diacritics {
  aspect-ratio: 1880 / 764;
}

.halo-numbers-stack,
.halo-diacritics-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-family: "Halo Grotesk", "Suisse Intl", Arial, sans-serif;
  font-size: clamp(60px, 13.83vw, 260px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
}

.halo-diacritics-stack {
  font-family: "Halo Grotesk Plain", "Suisse Intl", Arial, sans-serif;
}

.halo-numbers-stack p,
.halo-diacritics-stack p {
  margin: 0;
  line-height: 1;
}

.halo-avw {
  aspect-ratio: 1880 / 738;
}

.halo-avw-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 61.17%;
  height: auto;
  transform: translate(-50%, -50%);
}

.halo-qytf {
  aspect-ratio: 1880 / 784;
}

.halo-qytf-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54.04%;
  height: auto;
  transform: translate(-50%, -50%);
}

.halo-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.halo-gallery-cell {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.halo-gallery-cell--video {
  aspect-ratio: 1880 / 900;
}

.halo-gallery-cell img,
.halo-gallery-cell video,
.halo-gallery-cell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.halo-gallery-cell iframe[data-cover] {
  inset: auto;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

.project-page-empty {
  align-items: flex-start;
}

.project-page-empty h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 400;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dark-surface .project-cover {
  border-color: rgba(255, 255, 255, 0.42);
}

.dark-surface .project-card:hover .project-cover {
  border-color: #ffffff;
}

/* Dark project page theme */

.project-page[data-theme="dark"] {
  --color-text: #b6b8bf;
  --color-muted: #6b6b6b;
  --color-soft: rgba(255, 255, 255, 0.08);
  --color-line: rgba(255, 255, 255, 0.1);
  background: #0f0f0f;
  color: var(--color-text);
}

.project-page[data-theme="dark"] .project-cover {
  background: rgba(255, 255, 255, 0.04);
}

.project-page[data-theme="dark"] .project-card:hover .project-cover {
  border-color: rgba(255, 255, 255, 0.25);
}

.project-page[data-theme="dark"] .filter-dropdown {
  background: #1a1a1a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.project-page[data-theme="dark"] .filter-options-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 1180px) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-page {
    gap: 96px;
  }

  .pp-covers {
    padding: 0 60px;
  }

  .pp-gallery {
    gap: 32px;
  }

  .pp-gallery-caption {
    padding: 80px 120px 80px 20px;
  }

  .pp-gallery-pair--wide {
    padding: 24px 80px;
  }

  .pp-gallery-pair--narrow {
    padding: 80px 140px 120px;
  }

  .pp-gallery-pair--tight {
    padding: 80px 0;
  }

  .pp-gallery-center {
    padding: 80px 120px 120px;
  }

  .pp-gallery-center--video {
    padding: 100px 140px 140px;
  }

  .archive-caption {
    padding: 80px 120px 40px 20px;
  }

  .archive-padded-wide {
    padding: 80px 0 120px;
  }

  .smol-part-intro,
  .smol-behind-text {
    padding-right: 120px;
    padding-left: 20px;
  }

  .smol-zine-note {
    padding: 56px 120px 56px 20px;
  }

  .smol-font-specimen {
    gap: 24px;
    padding: 0 20px 56px;
    font-size: 54px;
  }

  .smol-photo-pair {
    padding: 80px 40px;
  }

  .smol-photo-pair--deep {
    padding-bottom: 120px;
  }

  .smol-photo-pair-cell {
    height: 620px;
  }

  .smol-narrow-phone {
    padding: 56px 280px;
  }

  .smol-team {
    padding-right: 120px;
  }

  .rimini-case-intro {
    flex-direction: column;
    gap: 24px;
    padding: 120px 20px 80px;
  }

  .rimini-gallery > .rimini-case-intro:first-child {
    padding-top: 40px;
    padding-bottom: 100px;
  }

  .rimini-case-copy,
  .rimini-case-note,
  .rimini-case-image {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
  }

  .rimini-case-note {
    text-align: left;
  }

  .rimini-case-image {
    width: min(600px, 100%);
    aspect-ratio: 600 / 400;
  }

  .rimini-series-group,
  .rimini-series-group--city {
    gap: 48px;
    padding: 24px 0;
  }

  .project-page[data-theme="black"] {
    --rimini-poster-width: min(calc((100vw - 76px) / 3), 586px);
    --rimini-poster-col-gap: 12px;
    --rimini-poster-row-gap: 48px;
  }

  .rimini-poster-grid,
  .rimini-hero {
    padding: 56px 20px;
  }

  .rimini-poster-grid--single-pt {
    padding-bottom: 0;
  }

  .rimini-hero {
    padding: 0 20px 56px;
  }

  .rimini-poster-grid--single,
  .rimini-hero {
    grid-template-columns: min(100%, 460px);
  }

  .rimini-poster-grid--two-offset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rimini-poster-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rimini-poster-cell {
    width: 100%;
  }

  .aro-logos {
    gap: clamp(40px, 12vw, 200px);
    height: auto;
    padding: 80px 20px;
  }

  .aro-logo--full {
    width: clamp(220px, 32vw, 491.422px);
    height: auto;
    aspect-ratio: 491.422 / 100;
  }

  .aro-logo--small {
    width: clamp(110px, 16vw, 237px);
    height: auto;
    aspect-ratio: 237 / 100;
  }

  .aro-boxes-pair {
    padding: 56px 0;
  }

  .aro-box-single {
    padding: 56px 32px;
  }

  .aro-box-single .aro-box-cell {
    width: 100%;
    max-width: 760px;
  }

  .aro-cards-pair {
    gap: 12px;
  }

  .aro-card-cell {
    height: auto;
    aspect-ratio: 930 / 1000;
  }

  .aro-card-final {
    padding: 120px 20px 80px;
  }

  .aro-card-final-cell {
    width: min(100%, 480px);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 1180px) {
  .halo-showcase {
    gap: 56px;
  }

  .halo-intro {
    padding: 0 0 56px 24px;
  }
}

@media (max-width: 820px) {
  .site-shell {
    gap: 92px;
  }

  .hero-section {
    align-items: flex-start;
    padding: 40px 16px 24px;
  }

  .hero-copy {
    line-height: normal;
  }

  .projects-section {
    padding: 0 10px;
  }

  .project-tools {
    flex-wrap: wrap;
    gap: 8px;
  }

  .search-input {
    width: 100%;
    padding: 4px 12px;
  }

  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 10px;
  }

  .project-page {
    gap: 64px;
    padding: 60px 10px;
  }

  .pp-back {
    top: 16px;
    left: 16px;
  }

  .pp-title {
    font-size: 28px;
  }

  .pp-meta-tags,
  .pp-meta-year {
    font-size: 16px;
  }

  .pp-header-desc {
    font-size: 20px;
  }

  .pp-covers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 0;
  }

  .pp-gallery {
    gap: 20px;
  }

  .pp-gallery-caption {
    padding: 32px 0;
  }

  .pp-gallery-caption p {
    font-size: 20px;
  }

  .pp-gallery-pair {
    flex-direction: column;
  }

  .pp-gallery-pair--wide,
  .pp-gallery-pair--narrow,
  .pp-gallery-pair--tight {
    gap: 10px;
    padding: 20px 0;
  }

  .pp-gallery-row3 {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }

  .pp-gallery-center,
  .pp-gallery-center--video {
    padding: 32px 0;
  }

  .archive-caption {
    padding: 32px 0;
  }

  .archive-split {
    flex-direction: column;
    gap: 20px;
  }

  .archive-split-cell {
    width: 100%;
    flex: none;
    aspect-ratio: 1920 / 1080;
  }

  .archive-padded-wide {
    padding: 32px 0;
  }

  .smol-part-intro,
  .smol-behind-text {
    padding: 32px 0 0;
  }

  .smol-part-intro p,
  .smol-zine-note p,
  .smol-behind-text p,
  .smol-team p {
    font-size: 20px;
  }

  .smol-small-artifact {
    padding-bottom: 32px;
  }

  .smol-small-artifact div {
    width: min(55vw, 240px);
  }

  .smol-font-specimen {
    flex-direction: column;
    gap: 24px;
    padding: 0 0 32px;
    font-size: clamp(30px, 9vw, 46px);
  }

  .smol-font-column--ugly {
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
  }

  .smol-zine-note {
    gap: 20px;
    padding: 32px 0;
  }

  .smol-zine-row,
  .smol-photo-pair {
    flex-direction: column;
  }

  .smol-photo-pair,
  .smol-photo-pair--deep {
    gap: 20px;
    padding: 32px 0;
  }

  .smol-photo-pair-cell {
    width: 100%;
    flex: none;
    height: auto;
    aspect-ratio: 1920 / 1080;
  }

  .smol-poster-wide {
    padding: 20px 0;
  }

  .smol-narrow-phone {
    padding: 32px 80px;
  }

  .smol-team {
    justify-content: flex-start;
    padding: 32px 0 0;
  }

  .rimini-case-intro,
  .rimini-gallery > .rimini-case-intro:first-child {
    gap: 20px;
    padding: 32px 0;
  }

  .rimini-case-copy p,
  .rimini-case-note p {
    font-size: 20px;
  }

  .rimini-series {
    gap: 32px;
    padding: 20px 0;
  }

  .project-page[data-theme="black"] {
    --rimini-poster-single-width: min(100%, 355px);
    --rimini-poster-single-height: auto;
    --rimini-poster-three-width: min(100%, 355px);
    --rimini-poster-three-height: auto;
  }

  .rimini-poster,
  .rimini-poster-row,
  .rimini-poster-row--two,
  .rimini-poster-row--left,
  .rimini-poster-row--cargo-center {
    grid-template-columns: minmax(0, min(100%, 355px));
    grid-auto-rows: auto;
  }

  .rimini-poster,
  .rimini-hero,
  .rimini-poster--center-small,
  .rimini-poster--right,
  .rimini-poster--left-offset,
  .rimini-poster--right-offset,
  .rimini-poster--center-low,
  .rimini-poster--cargo-right,
  .rimini-poster--cargo-left,
  .rimini-poster-row,
  .rimini-poster-row--bottom,
  .rimini-poster-row--left {
    padding: 20px 0;
  }

  .rimini-poster-cell,
  .rimini-hero .rimini-poster-cell,
  .rimini-poster--center-small .rimini-poster-cell,
  .rimini-poster--center-low .rimini-poster-cell,
  .rimini-poster--left-offset .rimini-poster-cell,
  .rimini-poster--right .rimini-poster-cell,
  .rimini-poster--right-offset .rimini-poster-cell,
  .rimini-poster--cargo-right .rimini-poster-cell,
  .rimini-poster--cargo-left .rimini-poster-cell {
    width: min(100%, 355px);
  }

  .rimini-poster-cell,
  .rimini-poster--right .rimini-poster-cell,
  .rimini-poster--right-offset .rimini-poster-cell,
  .rimini-poster--center-low .rimini-poster-cell,
  .rimini-poster--cargo-right .rimini-poster-cell,
  .rimini-poster--left-offset .rimini-poster-cell,
  .rimini-poster--cargo-left .rimini-poster-cell {
    grid-column: 1;
  }

  .rimini-poster-row,
  .rimini-poster-row--two,
  .rimini-poster-row--bottom,
  .rimini-poster-row--cargo-center,
  .rimini-poster-row--left {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .rimini-poster-row-cell,
  .rimini-poster-row--two .rimini-poster-row-cell {
    width: min(100%, 355px);
  }

  .halo-showcase {
    gap: 32px;
  }

  .halo-intro {
    padding: 0 0 40px 16px;
  }

  .pp-icon-button {
    width: 32px;
    height: 32px;
  }

  .pp-icon-button-icon {
    width: 24px;
    height: 24px;
  }

  .halo-alphabet-block {
    left: 16px;
    width: calc(100% - 32px);
  }

  .halo-alphabet-label {
    top: 24px;
    right: 16px;
  }
}

@media (max-width: 520px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-title,
  .empty-state {
    font-size: 24px;
  }

  .filter-dropdown {
    max-width: calc(100vw - 20px);
  }

  .footer-links {
    gap: 2px;
  }

  .pp-title {
    font-size: 24px;
  }

  .pp-header-desc {
    font-size: 18px;
  }

  .pp-meta-tags {
    flex-wrap: wrap;
  }

  .smol-zine-note {
    flex-direction: column;
  }

  .smol-narrow-phone {
    padding-right: 48px;
    padding-left: 48px;
  }

  .rimini-case-copy p,
  .rimini-case-note p {
    font-size: 18px;
  }

  .project-page[data-theme="black"] {
    --rimini-poster-width: 100%;
    --rimini-poster-row-gap: 24px;
  }

  .rimini-poster-grid {
    padding: 32px 16px;
  }

  .rimini-poster-grid--single,
  .rimini-poster-grid--two-offset,
  .rimini-poster-grid--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .rimini-poster-grid .rimini-poster-cell {
    grid-column: 1 !important;
  }

  .rimini-poster-cell--row-1,
  .rimini-poster-cell--row-2,
  .rimini-poster-cell--row-3 {
    grid-row: auto;
  }

  .rimini-hero {
    padding: 0 16px 32px;
  }

  .rimini-series-group,
  .rimini-series-group--city {
    gap: 24px;
    padding: 12px 0;
  }

  .aro-logos {
    flex-direction: column;
    gap: 40px;
    padding: 56px 16px;
  }

  .aro-boxes-pair {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 16px;
  }

  .aro-boxes-pair .aro-box-cell {
    width: 100%;
    flex: none;
  }

  .aro-box-single {
    padding: 32px 16px;
  }

  .aro-cards-pair {
    flex-direction: column;
    gap: 16px;
  }

  .aro-cards-pair .aro-card-cell {
    width: 100%;
    flex: none;
  }

  .aro-card-final {
    padding: 56px 16px 32px;
  }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}