:root {
  color-scheme: dark;
  --paper: #f4f2ef;
  --ink: #0b0b0b;
  --archive-accent: #1a6ca2;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "Instrument Serif", Georgia, serif;
}

.hero {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--ink);
  transform-origin: 50% 22%;
  will-change: transform, opacity, filter;
}

.webgl, .cursor-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.webgl { z-index: 1; }
.webgl canvas { display: block; width: 100%; height: 100%; }

.cursor-trail {
  z-index: 2;
  opacity: .82;
}

.cursor {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 1.15rem;
  aspect-ratio: 1;
  border: 1px solid rgb(244 242 239 / .9);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: width .18s ease, opacity .2s ease, background-color .18s ease;
}

body.has-custom-cursor, body.has-custom-cursor * { cursor: none !important; }
body.has-custom-cursor .cursor { opacity: 1; }
.cursor.is-interactive { width: 1.7rem; border-color: #18ffb1; background: #18ffb1; }
.cursor.is-over-word { width: 2.05rem; border-color: #18ff9a; background: rgb(24 255 154 / .22); }
.cursor.is-dragging { width: .72rem; background: var(--paper); }

.copy, .tag, .portrait-cluster { position: absolute; z-index: 3; will-change: transform; }

.intro {
  top: clamp(8.7rem, 18.8vh, 15.1rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(2.45rem, 3.2vw, 4.35rem);
  line-height: .92;
  letter-spacing: -.035em;
}

.tag {
  display: flex;
  align-items: center;
  height: clamp(3.45rem, 5.6vw, 6rem);
  padding: .02em .2em .12em;
  color: #050505;
  font-size: clamp(2.1rem, 3.05vw, 4.1rem);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgb(0 0 0 / .15);
}

[data-draggable] {
  touch-action: none;
  user-select: none;
}

.tag-branding {
  top: 27.2%;
  left: max(9.3vw, calc(50% - 30.2rem));
  background: #00ef13;
  z-index: 0;
}

.tag-design {
  top: 55.2%;
  left: max(4.1vw, calc(50% - 40.3rem));
  background: #1416ff;
  color: #f7f5ff;
  z-index: 3;
}

.tag-motion {
  top: 25.9%;
  right: max(6.5vw, calc(50% - 38.2rem));
  background: #ef00dc;
  color: #fff6ff;
  z-index: 0;
}

.tag-motion span {
  margin-right: .13em;
  font-family: "Pixelify Sans", monospace;
  font-size: .75em;
  font-weight: 600;
  letter-spacing: -.065em;
}

.portrait-cluster {
  z-index: 4;
  width: clamp(6.7rem, 8.8vw, 9.1rem);
  aspect-ratio: 1;
}

.portrait-wrap { width: 100%; aspect-ratio: 1; }

.portrait {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  object-position: 58% 57%; display: block;
  filter: saturate(.94) contrast(1.04);
}

.flower {
  position: absolute;
  z-index: 2;
  top: -4%;
  left: 60%;
  width: 56%;
  transform: rotate(-5deg);
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / .28));
}

.descriptor {
  left: 50%;
  bottom: clamp(5rem, 15.5vh, 11rem);
  width: min(30rem, 92vw);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(1.63rem, 1.78vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: -.027em;
}

.descriptor em { font-style: italic; }

.contacts {
  position: absolute;
  z-index: 5;
  right: clamp(1.25rem, 3vw, 3.25rem);
  top: clamp(1.35rem, 3.5vh, 3rem);
  display: grid;
  gap: .48rem;
  color: var(--paper);
  text-align: right;
}

.contacts-kicker {
  color: #18ffb1;
  font-family: Arial, sans-serif;
  font-size: .58rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.contact-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .42rem;
  font-size: clamp(1.15rem, 1.4vw, 1.7rem);
  line-height: 1;
}

.contact-list i {
  width: .23rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1cffb1;
}

.loader {
  position: absolute;
  z-index: 4;
  left: 50%; bottom: 1.7rem;
  display: flex; gap: .5rem; align-items: center;
  transform: translateX(-50%);
  color: rgb(244 242 239 / .55);
  font-family: Arial, sans-serif;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity .5s ease;
}

.loader span {
  width: .42rem; aspect-ratio: 1; border-radius: 50%; background: #18ffb2;
  animation: blink 1s ease-in-out infinite alternate;
}
.loader.is-ready { opacity: 0; pointer-events: none; }
@keyframes blink { to { opacity: .2; transform: scale(.65); } }

.projects {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  margin-top: -2px;
  padding: clamp(3.5rem, 6vw, 6.5rem) clamp(1rem, 4vw, 4.5rem) clamp(8rem, 15vw, 15rem);
  background: var(--ink);
}

.project-list { display: grid; gap: clamp(5rem, 9vw, 10rem); }

.project {
  position: relative;
  width: min(100%, 82rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(19rem, 36rem) minmax(7rem, 1fr);
  align-items: stretch;
  gap: clamp(1rem, 4vw, 5rem);
  isolation: isolate;
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity .75s ease, transform .85s cubic-bezier(.16, 1, .3, 1);
  cursor: pointer;
}

.project.is-visible { opacity: 1; transform: translateY(0); }

.project::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% 12%;
  opacity: 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--project-glow) 12%, transparent), transparent 67%);
  filter: blur(32px);
  transform: scale(.82);
  transition: opacity .55s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.project-name, .project-type {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.45rem);
  line-height: .97;
  letter-spacing: -.025em;
  color: rgb(244 242 239 / .68);
  opacity: .48;
  transition: color .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
}

.project-name { align-self: start; padding-top: .3rem; }
.project-type { align-self: end; padding-bottom: .3rem; text-align: right; }

.project-media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(244 242 239 / .1);
  border-radius: clamp(.7rem, 1vw, 1rem);
  background:
    radial-gradient(circle at 24% 22%, color-mix(in srgb, var(--project-accent) 9%, transparent), transparent 28%),
    radial-gradient(circle at 77% 75%, color-mix(in srgb, var(--project-glow) 7%, transparent), transparent 34%),
    linear-gradient(135deg, #181818, #080808 68%);
  box-shadow: 0 1.2rem 3.2rem rgb(0 0 0 / .22);
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), border-color .4s ease, box-shadow .55s ease, filter .45s ease;
}

.project-media:has(.project-visual) {
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.project-visual {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.project-visual--yandex { width: 108%; top: -4%; left: -4%; }
.project-visual--alfa-people { width: 108%; top: -13%; left: -4%; }
.project-visual--alfa-ai { width: 128%; top: -4%; left: -14%; }
.project-visual--blue-flower { width: 112%; top: -11%; left: -6%; }
.project-visual--unicorn { width: 110%; top: -7%; left: -5%; }
.project-visual--car { width: 108%; top: -2%; left: -4%; }
.project-visual--kavat { width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
.project-visual--alpha-one { width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
.project-visual--cover { width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
.project-preview--vimeo { overflow: hidden; background: #0b0b0b; }
.project-preview--vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transform-origin: 50% 50%; }
#alfa-people-recap .project-preview--vimeo iframe { transform: scale(1.16); }

.project-media--video {
  overflow: hidden !important;
  isolation: isolate;
  background: #0b0b0b !important;
}

.project-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .32s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.project-media--video .project-visual { transition: opacity .28s ease, transform .65s cubic-bezier(.16, 1, .3, 1); }
.project:hover .project-media--video .project-preview { opacity: 1; transform: scale(1); }
.project:hover .project-media--video .project-visual { opacity: 0; transform: scale(1.025); }

.project-media::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.project-media::before {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 45% 55% 62% 38%;
  background: var(--project-accent);
  filter: blur(38px);
  opacity: .07;
  transform: translate(-85%, 55%);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}

.project-media span {
  z-index: 1;
  padding: .55rem .7rem;
  border: 1px solid rgb(244 242 239 / .16);
  border-radius: 999px;
  color: rgb(244 242 239 / .42);
  font-family: Arial, sans-serif;
  font-size: .55rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .35s ease, border-color .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.project-index {
  position: absolute;
  top: .85rem;
  left: .95rem;
  z-index: 3;
  margin: 0;
  color: rgb(244 242 239 / .38);
  font-family: Arial, sans-serif;
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .15em;
  transition: color .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.project:hover::before, .project.is-current::before { opacity: 1; transform: scale(1); }
.project:hover .project-media, .project.is-current .project-media {
  border-color: color-mix(in srgb, var(--project-accent) 54%, white);
  box-shadow: 0 1.8rem 3.6rem rgb(0 0 0 / .4);
  filter: saturate(1.08) brightness(1.04);
  transform: perspective(1100px) rotateX(calc(2.4deg + var(--tilt-x, 0deg))) rotateY(calc(-3.4deg + var(--tilt-y, 0deg))) scale(1.055);
}
.project:hover .project-media:has(.project-visual), .project.is-current .project-media:has(.project-visual) {
  border-color: transparent;
  box-shadow: none;
}
.project.is-current .project-media {
  transform: perspective(1100px) rotateX(calc(2.4deg + var(--tilt-x, 0deg))) rotateY(calc(-3.4deg + var(--tilt-y, 0deg))) scale(1.018);
}
.project:hover .project-media {
  transform: perspective(1100px) rotateX(calc(2.4deg + var(--tilt-x, 0deg))) rotateY(calc(-3.4deg + var(--tilt-y, 0deg))) scale(1.1);
}
.project:hover .project-media::before, .project.is-current .project-media::before { opacity: .17; transform: translate(75%, -55%); }
.project:hover .project-name, .project.is-current .project-name { color: var(--project-accent); transform: translateX(.35rem); }
.project:hover .project-type, .project.is-current .project-type { color: var(--project-accent); transform: translateX(-.35rem); }
.project:hover .project-media span, .project.is-current .project-media span { color: var(--paper); border-color: color-mix(in srgb, var(--project-accent) 65%, white); transform: scale(1.06); }
.project:hover .project-name, .project:hover .project-type, .project.is-current .project-name, .project.is-current .project-type { opacity: 1; }
.project:hover .project-index, .project.is-current .project-index { color: var(--project-accent); transform: translateY(.15rem); }

.closing {
  min-height: 76svh;
  padding: clamp(5rem, 10vw, 10rem) clamp(1.2rem, 6vw, 7rem) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--ink);
  text-align: center;
}

.closing-kicker {
  margin: 0 0 1.3rem;
  color: #18ffb1;
  font-family: Arial, sans-serif;
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.closing h2 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(3.4rem, 8vw, 9.5rem);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.06em;
}

.closing h2 em { color: #18ffb1; }

.closing-contacts {
  margin-top: clamp(3rem, 7vw, 6rem);
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--paper);
  font-size: clamp(1.35rem, 2vw, 2.35rem);
}

.closing-contacts i { width: .28rem; aspect-ratio: 1; border-radius: 50%; background: #18ffb1; }

.project-dialog {
  width: min(72rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 1px solid rgb(244 242 239 / .16);
  border-radius: 1.2rem;
  color: var(--paper);
  background: #101010;
  box-shadow: 0 1.5rem 7rem rgb(0 0 0 / .72);
}

.project-dialog::backdrop { background: rgb(0 0 0 / .76); backdrop-filter: blur(10px); }

.dialog-frame { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr); min-height: min(39rem, 80vh); }
.dialog-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--dialog-accent, #18ffb1) 24%, transparent), transparent 28%), linear-gradient(135deg, #1a1a1a, #070707 74%);
}
.dialog-media::before { content: ""; width: 46%; aspect-ratio: 1; border-radius: 55% 45% 36% 64%; background: var(--dialog-accent, #18ffb1); opacity: .18; filter: blur(46px); animation: modal-float 5s ease-in-out infinite alternate; }
.dialog-media span { position: absolute; padding: .55rem .7rem; border: 1px solid rgb(244 242 239 / .19); border-radius: 999px; color: rgb(244 242 239 / .55); font-family: Arial, sans-serif; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.dialog-copy { padding: clamp(2rem, 4vw, 4.3rem); display: flex; flex-direction: column; justify-content: end; }
.dialog-index, .dialog-type { margin: 0; color: var(--dialog-accent, #18ffb1); font-family: Arial, sans-serif; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.dialog-copy h2 { margin: 1rem 0 1.25rem; font-size: clamp(3rem, 5vw, 5.7rem); font-weight: 400; line-height: .78; letter-spacing: -.06em; }
.dialog-note { margin: 2.5rem 0 0; color: rgb(244 242 239 / .52); font-size: clamp(1.2rem, 1.6vw, 1.7rem); line-height: .96; }
.dialog-close { position: absolute; z-index: 2; top: 1rem; right: 1rem; width: 2.4rem; aspect-ratio: 1; padding: 0; border: 1px solid rgb(244 242 239 / .32); border-radius: 50%; color: var(--paper); background: rgb(11 11 11 / .6); font: 2rem/.9 Arial, sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, transform .25s ease; }
.dialog-close:hover { color: #0b0b0b; background: #18ffb1; transform: rotate(90deg); }

@keyframes modal-float { to { transform: translate(32%, -20%) rotate(22deg) scale(1.18); } }

@media (max-width: 700px) {
  .hero { min-height: 550px; }
  .intro { top: 13.5vh; }
  .tag { height: 2.85rem; font-size: 1.9rem; }
  .tag-branding { top: 26%; left: 9%; }
  .tag-motion { top: 31%; right: 3.5%; }
  .tag-design { top: 57%; left: 3%; }
  .portrait-cluster { width: 6.25rem; }
  .descriptor { bottom: 5rem; font-size: 1.55rem; }
  .contacts { top: 1rem; right: 1.1rem; }
  .contacts-kicker { display: block; font-size: .48rem; }
  .contact-list { font-size: 1rem; gap: .28rem; }
  .projects { padding: 5rem 1.1rem 8rem; }
  .project-list { gap: 4.8rem; }
  .project { grid-template-columns: 1fr; gap: .72rem; }
  .project-name, .project-type { grid-column: 1; padding: 0; font-size: 1.1rem; }
  .project-name { grid-row: 1; align-self: start; }
  .project-media { grid-column: 1; grid-row: 2; }
  .project-type { grid-row: 3; align-self: end; text-align: right; }
  .project.is-current .project-media { transform: scale(1.015); }
  .project:hover .project-media { transform: scale(1.065); }
  .closing { min-height: 68svh; }
  .dialog-frame { grid-template-columns: 1fr; }
  .dialog-media { min-height: 44svh; }
  .dialog-copy { min-height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loader span { animation: none; }
  .cursor { display: none; }
  html { scroll-behavior: auto; }
  .project *, .project::before, .closing *, .project-dialog * { transition-duration: .01ms !important; animation: none !important; }
}

/* ===== Projects: mosaic layout (previous list version saved in versions/list-v1) ===== */
.projects--mosaic { padding-top: clamp(4rem, 7vw, 7rem); }
.projects--mosaic .work-head { width: min(100%, 92rem); margin: 0 auto clamp(1.6rem, 3vw, 2.8rem); display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.projects--mosaic .work-title { margin: 0; font-weight: 400; font-size: clamp(2.6rem, 6vw, 6rem); line-height: .9; letter-spacing: -.035em; }
.projects--mosaic .work-title em { font-style: italic; color: var(--archive-accent, var(--paper)); transition: color .5s ease; }
.projects--mosaic .work-title sup { font-family: Arial, sans-serif; font-size: .7rem; letter-spacing: .15em; vertical-align: top; opacity: .45; margin-left: .3rem; }
.projects--mosaic .work-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.projects--mosaic .work-filters button { padding: .6rem 1rem; border: 1px solid rgb(244 242 239 / .22); border-radius: 999px; background: transparent; color: rgb(244 242 239 / .7); font: 400 .78rem/1 Arial, sans-serif; letter-spacing: .04em; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.projects--mosaic .work-filters button:hover { border-color: rgb(244 242 239 / .6); color: var(--paper); }
.projects--mosaic .work-filters button.is-active { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.projects--mosaic .project-list { width: min(100%, 92rem); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: clamp(.6rem, 1.1vw, 1rem); }
.projects--mosaic .project { width: auto; margin: 0; display: block; grid-column: span 1; transform: translateY(1.5rem); }
.projects--mosaic .project.is-visible { transform: none; }
.projects--mosaic .project::before { display: none; }
.projects--mosaic .tile--xl { grid-column: span 2; grid-row: span 2; }
.projects--mosaic .tile--right { grid-column: 2 / span 2; }
.projects--mosaic .tile--wide { grid-column: 1 / -1; }

/* Tile = the media box; every cover fills it and is clipped to the rounded frame. */
.projects--mosaic .project-media { height: 100%; aspect-ratio: 16 / 9; overflow: hidden !important; border: 1px solid rgb(244 242 239 / .08) !important; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--project-accent) 22%, #141414), #0d0d0d 70%) !important; box-shadow: none !important; transform: none !important; filter: none !important; transition: border-color .4s ease; }
.projects--mosaic .tile--xl .project-media { aspect-ratio: auto; min-height: 100%; }
.projects--mosaic .tile--wide .project-media { aspect-ratio: 21 / 8; }
.projects--mosaic .project-visual { inset: 0; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
.projects--mosaic .project-media::before { display: none; }
.projects--mosaic .project-media::after { content: ""; position: absolute; inset: 45% 0 0; z-index: 3; background: linear-gradient(transparent, rgb(0 0 0 / .62)); pointer-events: none; transition: opacity .4s ease; }

/* Labels sit on the tile, over the bottom scrim. */
.projects--mosaic .project-name, .projects--mosaic .project-type { position: absolute; z-index: 4; bottom: clamp(.8rem, 1.4vw, 1.3rem); opacity: 1 !important; color: var(--paper) !important; transform: none !important; pointer-events: none; }
.projects--mosaic .project-name { left: clamp(.9rem, 1.5vw, 1.4rem); font-size: clamp(1.15rem, 1.7vw, 1.9rem); line-height: .95; }
.projects--mosaic .tile--xl .project-name, .projects--mosaic .tile--wide .project-name { font-size: clamp(1.6rem, 2.8vw, 3.2rem); }
.projects--mosaic .project-type { right: clamp(.9rem, 1.5vw, 1.4rem); font-family: Arial, sans-serif; font-size: .62rem; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; text-align: right; color: rgb(244 242 239 / .72) !important; }
.projects--mosaic .project-index { z-index: 4; color: rgb(244 242 239 / .7); }

/* Hover: the cover eases in, the frame picks up the project colour; no tilt. */
.projects--mosaic .project:hover .project-media { border-color: color-mix(in srgb, var(--project-accent) 70%, white) !important; }
.projects--mosaic .project:hover .project-visual { transform: scale(1.04); }
.projects--mosaic .project:hover .project-index, .projects--mosaic .project.is-current .project-index { color: var(--paper); transform: none; }
.projects--mosaic .project.is-current .project-media { border-color: rgb(244 242 239 / .08) !important; }

/* Filtered view: an even grid of equal tiles. */
.projects--mosaic .project-list.is-filtered .project { grid-column: span 1; grid-row: auto; }
.projects--mosaic .project-list.is-filtered .project-media { aspect-ratio: 16 / 9; min-height: 0; }
.projects--mosaic .project[hidden] { display: none; }

@media (max-width: 900px) {
  .projects--mosaic .project-list { grid-template-columns: 1fr 1fr; }
  .projects--mosaic .tile--right { grid-column: span 2; }
  .projects--mosaic .tile--xl .project-media { aspect-ratio: 16 / 9; }
  .projects--mosaic .tile--xl { grid-row: auto; }
}
@media (max-width: 600px) {
  .projects--mosaic .project-list, .projects--mosaic .project-list.is-filtered { grid-template-columns: 1fr; }
  .projects--mosaic .project, .projects--mosaic .tile--xl, .projects--mosaic .tile--right, .projects--mosaic .tile--wide { grid-column: auto; grid-row: auto; }
  .projects--mosaic .project-media, .projects--mosaic .tile--wide .project-media { aspect-ratio: 16 / 10; }
  .projects--mosaic .work-filters { overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: .2rem; }
}

/* Hero -> work transition: the title rises out of the melting word (--work-reveal is set on scroll). */
.projects--mosaic .work-title { transform: translateY(calc((1 - var(--work-reveal, 1)) * 5rem)) scale(calc(.92 + var(--work-reveal, 1) * .08)); opacity: calc(.15 + var(--work-reveal, 1) * .85); filter: blur(calc((1 - var(--work-reveal, 1)) * 10px)); transform-origin: 0 100%; will-change: transform, opacity, filter; }
@media (prefers-reduced-motion: reduce) { .projects--mosaic .work-title { transform: none; opacity: 1; filter: none; } }

/* Parabola: the vertical projection film plays fitted inside the wide tile. */
#parabola .project-preview { object-fit: contain; background: #000; }

/* ===== Typography v1: quiet grotesk (Inter). Previous version saved in versions/mosaic-v2 ===== */
.projects--mosaic, .closing { font-family: Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

.projects--mosaic .work-title { font-weight: 500; font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: -.045em; line-height: 1; }
.projects--mosaic .work-title em { font-style: normal; color: rgb(244 242 239 / .38); }
.projects--mosaic .work-title sup { font-family: inherit; font-size: .75rem; font-weight: 400; letter-spacing: 0; opacity: .38; margin-left: .35rem; vertical-align: .9em; }
.projects--mosaic .work-filters button { font: 400 .8125rem/1 Inter, Arial, sans-serif; letter-spacing: -.005em; padding: .55rem .95rem; }

/* Card = clean cover + one caption line underneath: name on the left, discipline on the right. */
.projects--mosaic .project { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; grid-template-areas: "media media" "name type"; column-gap: 1rem; }
.projects--mosaic .project-media { grid-area: media; height: auto; min-height: 0; }
.projects--mosaic .tile--xl .project-media { height: 100%; }
.projects--mosaic .project-media::after, .projects--mosaic .project-index { display: none !important; }
.projects--mosaic .project-name, .projects--mosaic .project-type { position: static; transform: none !important; opacity: 1 !important; margin: .8rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projects--mosaic .project-name { grid-area: name; font-size: .9375rem !important; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--paper) !important; }
.projects--mosaic .project-type { grid-area: type; font-family: inherit; font-size: .8125rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: right; color: rgb(244 242 239 / .42) !important; }
.projects--mosaic .project-name::after { content: " ↗"; display: inline-block; opacity: 0; transform: translate(-.25rem, .15rem); transition: opacity .3s ease, transform .3s ease; }
.projects--mosaic .project:hover .project-name::after { opacity: .7; transform: none; }
.projects--mosaic .project:not([data-case-href]) .project-name::after { content: none; }

/* Closing block in the same voice. */
.closing h2 { font-family: inherit; font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.closing h2 em { font-style: normal; }
.closing-kicker, .closing-contacts { font-family: inherit; }
.closing h2 { font-size: clamp(2.4rem, 5.6vw, 6.2rem); }
.closing-kicker { font-size: .75rem; letter-spacing: .02em; text-transform: none; }
.closing-contacts { font-size: clamp(1.05rem, 1.5vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; }

/* Captions belong to the tile above: tight to their own cover, more air before the next row. */
.projects--mosaic .project-list { row-gap: clamp(1.6rem, 2.8vw, 2.8rem); }
.projects--mosaic .project-name, .projects--mosaic .project-type { margin-top: .55rem; }
.projects--mosaic .project { row-gap: 0; }

/* ===== Outro: marquee + giant contact rows with cursor previews (previous closing saved in versions/typo-v1) ===== */
.outro { position: relative; z-index: 2; overflow: hidden; padding: clamp(5rem, 10vw, 9rem) 0 clamp(1.5rem, 3vw, 2.5rem); background: var(--ink); color: var(--paper); font-family: Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.outro-marquee { overflow: hidden; white-space: nowrap; user-select: none; }
.outro-track { display: inline-flex; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); padding-right: clamp(1.2rem, 3vw, 3rem); will-change: transform; }
.outro-track span { font-size: clamp(4rem, 13vw, 13.5rem); font-weight: 500; letter-spacing: -.06em; line-height: 1; }
.outro-track span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1px rgb(244 242 239 / .5); }
.outro-track b { font-size: clamp(2.4rem, 7vw, 7rem); font-weight: 400; color: #18ffb1; display: inline-block; animation: outro-spin 9s linear infinite; }
@keyframes outro-spin { to { transform: rotate(360deg); } }

.outro-lead { margin: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 4.5rem) clamp(1rem, 2vw, 1.6rem); font-size: .875rem; color: rgb(244 242 239 / .5); }
.outro-links { display: grid; margin: 0 clamp(1rem, 4vw, 4.5rem); border-bottom: 1px solid rgb(244 242 239 / .14); }
.outro-link { position: relative; display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; gap: clamp(.8rem, 2vw, 2rem); padding: clamp(.6rem, 1.4vw, 1.2rem) clamp(.4rem, 1vw, 1rem); border-top: 1px solid rgb(244 242 239 / .14); color: var(--paper); text-decoration: none; isolation: isolate; overflow: hidden; }
.outro-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--row); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.outro-index { font-size: .8125rem; color: rgb(244 242 239 / .4); transition: color .3s; }
.outro-name { font-size: clamp(3rem, 9.5vw, 10rem); font-weight: 500; letter-spacing: -.055em; line-height: .95; transition: transform .55s cubic-bezier(.16, 1, .3, 1), color .3s; }
.outro-meta { font-size: clamp(.8rem, 1vw, 1rem); color: rgb(244 242 239 / .5); transition: color .3s; }
.outro-arrow { font-size: clamp(2rem, 5vw, 5rem); line-height: 1; transition: transform .55s cubic-bezier(.16, 1, .3, 1), color .3s; }
.outro-link:hover::before, .outro-link:focus-visible::before { transform: scaleY(1); }
.outro-link:hover, .outro-link:focus-visible { color: #0b0b0b; outline: none; }
.outro-link:hover .outro-index, .outro-link:hover .outro-meta, .outro-link:focus-visible .outro-meta { color: rgb(11 11 11 / .7); }
.outro-link:hover .outro-name, .outro-link:focus-visible .outro-name { transform: translateX(clamp(.6rem, 2vw, 2rem)); }
.outro-link:hover .outro-arrow, .outro-link:focus-visible .outro-arrow { transform: rotate(45deg); }

.outro-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 4.5rem) 0; font-size: .8125rem; color: rgb(244 242 239 / .5); }
.outro-bottom a { color: inherit; text-decoration: none; }
.outro-bottom a:hover { color: var(--paper); }
.outro-status { display: inline-flex; align-items: center; gap: .55rem; color: var(--paper); }
.outro-status i { width: .5rem; height: .5rem; border-radius: 50%; background: #18ffb1; box-shadow: 0 0 0 0 rgb(24 255 177 / .6); animation: outro-pulse 2s ease-out infinite; }
@keyframes outro-pulse { to { box-shadow: 0 0 0 .7rem rgb(24 255 177 / 0); } }

.outro-preview { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(14rem, 22vw, 22rem); aspect-ratio: 16 / 10; object-fit: cover; border-radius: .9rem; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.7); transition: opacity .3s ease; box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / .45); }
.outro-preview.is-on { opacity: 1; }
.outro-toast { position: fixed; left: 50%; bottom: 2rem; z-index: 40; padding: .75rem 1.1rem; border-radius: 999px; background: var(--paper); color: #0b0b0b; font: 500 .875rem/1 Inter, Arial, sans-serif; opacity: 0; transform: translate(-50%, 1rem); transition: opacity .3s, transform .3s; pointer-events: none; }
.outro-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) {
  .outro-link { grid-template-columns: 1fr auto; }
  .outro-index, .outro-meta { display: none; }
  .outro-preview { display: none; }
}
@media (hover: none) { .outro-preview { display: none; } }
@media (prefers-reduced-motion: reduce) { .outro-track b, .outro-status i { animation: none; } }

/* ===== Hero contacts: a "Say hi" capsule that unfolds into the channels ===== */
.contacts { gap: 0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.hello { display: flex; flex-direction: row-reverse; align-items: center; gap: .25rem; padding: .3rem; border: 1px solid rgb(244 242 239 / .16); border-radius: 999px; background: rgb(20 20 20 / .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 .6rem 2rem rgb(0 0 0 / .25); cursor: pointer; outline: none; transition: border-color .4s ease, background .4s ease; }
.hello-label { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem .55rem .75rem; border-radius: 999px; font-size: .875rem; font-weight: 500; letter-spacing: -.01em; color: var(--paper); white-space: nowrap; transition: background .3s ease, color .3s ease; }
.hello-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #18ffb1; box-shadow: 0 0 0 0 rgb(24 255 177 / .6); animation: outro-pulse 2s ease-out infinite; }
.hello-links { display: flex; align-items: center; gap: .2rem; max-width: 0; overflow: hidden; transition: max-width .6s cubic-bezier(.16, 1, .3, 1); }
.hello-links a { padding: .55rem .85rem; border-radius: 999px; color: var(--paper); font-size: .875rem; font-weight: 500; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; opacity: 0; transform: translateX(.8rem); transition: opacity .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1), background .25s ease, color .25s ease; }
.hello-links a:nth-child(3) { transition-delay: .03s; }
.hello-links a:nth-child(2) { transition-delay: .08s; }
.hello-links a:nth-child(1) { transition-delay: .13s; }
.hello-links a:hover, .hello-links a:focus-visible { background: var(--c); color: #0b0b0b; outline: none; }
.hello:hover, .hello:focus-within, .hello.is-open { border-color: rgb(244 242 239 / .3); background: rgb(20 20 20 / .75); }
.hello:hover .hello-links, .hello:focus-within .hello-links, .hello.is-open .hello-links { max-width: 22rem; }
.hello:hover .hello-links a, .hello:focus-within .hello-links a, .hello.is-open .hello-links a { opacity: 1; transform: none; }
.hello:hover .hello-label, .hello:focus-within .hello-label, .hello.is-open .hello-label { background: rgb(244 242 239 / .08); }
@media (max-width: 700px) {
  .contacts { top: 1rem; right: 1rem; }
  .hello-label, .hello-links a { font-size: .8125rem; padding: .5rem .7rem; }
}
@media (prefers-reduced-motion: reduce) { .hello-dot { animation: none; } .hello-links, .hello-links a { transition: none; } }

/* Outro without the marquee: a quiet header line, then the contact rows lead. */
.outro { padding-top: clamp(4rem, 8vw, 7rem); }
.outro-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 clamp(1rem, 4vw, 4.5rem) clamp(1rem, 2vw, 1.6rem); font-size: .875rem; color: rgb(244 242 239 / .5); }

/* Safari fix: a 1fr row made Safari stretch the cover to an empty track (height 0).
   Regular and wide tiles size the cover by its aspect ratio; only xl tiles stretch to fill two rows. */
.projects--mosaic .project { grid-template-rows: auto auto; align-content: start; }
.projects--mosaic .project-media { align-self: start; width: 100%; }
.projects--mosaic .tile--xl { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
.projects--mosaic .tile--xl .project-media { align-self: stretch; height: auto; min-height: 0; aspect-ratio: auto; }
.projects--mosaic .project-list.is-filtered .project { grid-template-rows: auto auto; align-content: start; }
.projects--mosaic .project-list.is-filtered .project-media { align-self: start; aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
  .projects--mosaic .tile--xl { grid-template-rows: auto auto; align-content: start; }
  .projects--mosaic .tile--xl .project-media { align-self: start; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .projects--mosaic .tile--xl .project-media { aspect-ratio: 16 / 10; }
}

/* ===== Mobile hero: vertical composition (intro → word → tag row → portrait + descriptor).
   Positions come from layoutMobileHero() in script.js; previous version saved in versions/live-v1 ===== */
@media (max-width: 700px) {
  .hero { min-height: 600px; }
  .intro { font-size: clamp(1.8rem, 8.4vw, 2.3rem); letter-spacing: -.03em; }
  .tag { height: 2.4rem; padding: .02em .3em .1em; font-size: clamp(1.3rem, 6vw, 1.55rem); box-shadow: 0 8px 18px rgb(0 0 0 / .25); }
  .tag-branding { rotate: -3deg; }
  .tag-design { rotate: 2deg; }
  .tag-motion { rotate: -1.5deg; }
  .portrait-cluster { width: 5.4rem; }
  .descriptor { bottom: auto; transform: none; text-align: left; font-size: clamp(1.18rem, 5.2vw, 1.4rem); line-height: 1.08; letter-spacing: -.02em; }
  .loader { bottom: 1rem; }
}
@media (max-width: 700px) {
  .portrait-cluster { width: 4.6rem; }
  .descriptor { text-align: center; font-size: clamp(1.15rem, 5.3vw, 1.4rem); line-height: 1.1; }
}

/* Touch screens use phone tilt instead of a mouse cursor. */
@media (hover: none) and (pointer: coarse) {
  .cursor, .cursor-trail { display: none !important; }
  html body, html body.has-custom-cursor, html body.has-custom-cursor * { cursor: auto !important; }
}
.motion-permission {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 20; padding: 10px 16px;
  border: 1px solid #ffffff55; border-radius: 24px;
  background: #161616; color: #fff; font: 500 13px Inter, sans-serif;
}
.motion-permission:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* OFF cover plays continuously while visible, independent of hover. */
.project-loop { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Two equal covers in the final portfolio row. Six tracks preserve the existing mosaic proportions. */
.projects--mosaic .tile--half { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
@media (min-width: 901px) {
  .projects--mosaic .project-list:not(.is-filtered) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .projects--mosaic .project-list:not(.is-filtered) > .project { grid-column: span 2; }
  .projects--mosaic .project-list:not(.is-filtered) > .tile--xl { grid-column: span 4; }
  .projects--mosaic .project-list:not(.is-filtered) > .tile--right { grid-column: 3 / span 4; }
  .projects--mosaic .project-list:not(.is-filtered) > .tile--wide { grid-column: 1 / -1; }
  .projects--mosaic .project-list:not(.is-filtered) > .tile--half { grid-column: span 3; }
}

/* Kavat and Parabola stack beside one large OFF cover. */
@media (min-width: 901px) {
  .projects--mosaic .project-list:not(.is-filtered) > .tile--left { grid-column: 1 / span 2; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .projects--mosaic .project-list:not(.is-filtered) > .tile--left { grid-column: 1; }
  .projects--mosaic .project-list:not(.is-filtered) > #offf-disseny-hub { grid-column: 2; grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .projects--mosaic .project-list:not(.is-filtered) > #offf-disseny-hub .project-media { height: 100%; aspect-ratio: auto; }
}

/* Contact hover photos keep their original composition. */
.outro-preview { height: auto; max-height: 70vh; aspect-ratio: auto; object-fit: contain; }