@font-face {
  font-family: 'Manrope';
  src: url('../assets/Branding/fonts/Manrope-Light.woff2') format('woff2'),
       url('../assets/Branding/fonts/Manrope-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../assets/Branding/fonts/Manrope-Regular.woff2') format('woff2'),
       url('../assets/Branding/fonts/Manrope-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../assets/Branding/fonts/Manrope-Medium.woff2') format('woff2'),
       url('../assets/Branding/fonts/Manrope-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../assets/Branding/fonts/Manrope-ExtraBold.woff2') format('woff2'),
       url('../assets/Branding/fonts/Manrope-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #e0201b;
  --ink: #111111;
  --paper: #ffffff;
  --border-size: 26px;
  --edge-gap: 22px;
  --inset-top: 66px;
  --inset-x: 56px;
  --gap: 28px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
}

/* Fixed decorative border — always exactly fills the viewport, never scrolls
   or resizes. Sits above the content layer so scrolled content visually
   disappears behind it. */
.border-frame {
  position: fixed;
  inset: var(--edge-gap);
  z-index: 5;
  pointer-events: none;
  border: var(--border-size) solid transparent;
  border-image-source: url('../assets/Branding/border.png');
  border-image-slice: 34;
  border-image-width: var(--border-size);
  border-image-repeat: repeat;
}

/* Fixed app shell: nav column stays put, content-pane scrolls internally. */
.page-shell {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  gap: 64px;
}

/* ---------- nav column (never scrolls) ---------- */

.nav-column {
  flex: none;
  width: auto;
  margin: calc(var(--inset-top) + var(--edge-gap)) 0 40px calc(var(--border-size) + var(--inset-x) + var(--edge-gap));
  overflow: hidden;
}

.site-name {
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  display: inline-block;
  margin-bottom: 56px;
}

nav.projects {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

nav.projects .nav-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

nav.projects .nav-bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
}

.nav-item .horse-icon {
  width: 32px;
  height: 22px;
  flex: none;
  background-color: var(--ink);
  -webkit-mask-image: url('../assets/Branding/horse-icon.png');
  mask-image: url('../assets/Branding/horse-icon.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.nav-item:hover,
.nav-item.active {
  color: var(--red);
}

.nav-item:hover .horse-icon,
.nav-item.active .horse-icon {
  opacity: 1;
  transform: translateX(0);
  background-color: var(--red);
}

.nav-item.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- content pane (the only thing that scrolls) ---------- */

.content-pane {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: calc(var(--border-size) + var(--inset-x) + var(--edge-gap));
}

.content-spacer-top { height: calc(var(--inset-top) + var(--edge-gap)); }
.content-spacer-bottom { height: calc(60px + var(--edge-gap)); }

/* ---------- home page row (photo + bio) ---------- */

.home-center {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.home-row {
  display: flex;
  gap: 64px;
  align-items: stretch;
}

.photo-wrap {
  display: flex;
  justify-content: center;
  flex: none;
}

.photo {
  width: auto;
  max-width: 100%;
  height: 430px;
  display: block;
}

.bio-col {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  flex: none;
  width: 510px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bio-col section {
  margin-bottom: 28px;
}

.bio-col h2 {
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 8px;
  text-transform: none;
  color: var(--red);
}

.bio-col p {
  margin: 0;
  text-wrap: balance;
}

.bio-col a {
  color: var(--ink);
}

/* ---------- project page content ---------- */

.project-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 901px) {
  .content-spacer-top + .project-main { margin-top: 80px; translate: -4px 0; }
}

.project-main h1 {
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 8px;
}

.project-main .project-desc {
  font-size: 14px;
  font-weight: 400;
  max-width: 560px;
  line-height: 1.5;
}

.project-main .project-desc a {
  color: var(--red);
  text-decoration: none;
}

.project-main .project-desc a:hover {
  text-decoration: underline;
}

.project-main h2 {
  font-size: 16px;
  font-weight: 400;
  color: var(--red);
  margin: 0 0 16px;
}

.project-brief {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 560px;
}

.project-brief .label {
  color: var(--ink);
  margin: 0 0 4px;
}

.project-brief .answer {
  color: var(--red);
  margin: 0;
}

.hero-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.hero-row .project-desc {
  margin: 0;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

/* extra breathing room above the hero image, and a bigger stage */
.hero-row.featured {
  gap: 48px;
}
.hero-row.featured .hero-stage {
  height: max(calc(100vh - 200px), 340px);
}
/* this caption's text (with the embedded link) is wider than the base
   560px cap; white-space:nowrap makes it overflow that box entirely
   to one side rather than wrapping or centering the overflow, which
   throws off the caption's visual center relative to the image below
   it. Let it size to its natural content width instead. */
.hero-row.featured .project-desc {
  max-width: none;
}
@media (min-width: 901px) {
  .content-spacer-top + .project-main.hero-first { margin-top: 0; }
}

.project-section {
  width: 100%;
  margin-top: 8vh;
}

.project-section.collage-panel {
  margin-top: 18vh;
}

/* the flat-lay collage above this panel is shorter than a typical
   hero image, so the standard 8vh gap reads as too much empty space
   underneath it */
.project-section.bcj-moodboard-panel {
  margin-top: 3vh;
}

/* plain "behind the design" reference images: no figma-frame chrome,
   just sized up to fill the panel nicely, with a plain label above
   aligned to the image's own left edge */
.bcj-behind-wrap {
  width: 96%;
  margin-inline: auto;
  text-align: left;
}
.bcj-behind-img {
  display: block;
  width: 100%;
  cursor: zoom-in;
}

/* bigger than the default .bcj-behind-wrap, filling its panel the way
   the Save the dates image (taller aspect ratio) already reads as
   bigger. Centered overflow via equal negative inline margins, in fixed
   px rather than a percentage: the clearance before the decorative
   border is a fixed number of px regardless of viewport width, so a
   percentage-only overflow would grow on a wide viewport and risk
   running under the border. */
.bcj-panel-fill {
  width: calc(100% + 40px);
  margin-inline: -20px;
}

/* even bigger than .bcj-panel-fill, and pushed to the right instead of
   centered, by weighting the overflow onto the right side only. */
.bcj-rsvp-wrap {
  width: calc(100% + 40px);
  margin-left: 0;
}

/* plain-copy panel titles (Moodboard, Save the dates, etc.) instead of
   the boxed figma-label lockup used elsewhere; .project-desc's own
   type styling is scoped to .project-main, which these panels sit
   outside of, so restate it here */
.bcj-panel-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 14px;
  text-align: center;
}

/* breaks out of project-main's 1200px cap to span the full content
   area, same width as the sketchbook masonry gallery */
.project-section.pride-panel {
  text-align: center;
}

/* a plain image, no frame chrome, sized down a bit and centered so it
   doesn't fill edge-to-edge, with extra clearance above it */
.project-section .full-bleed {
  display: block;
  width: 78%;
  margin: 4vh auto 0;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-gallery .plate {
  aspect-ratio: 4 / 3;
  background: #ededed;
  background-image: url('../assets/project-placeholder.svg');
  background-size: cover;
  background-position: center;
}

/* ---------- masonry gallery (sketchbook + project pages) ---------- */

.masonry-gallery {
  columns: 2;
  column-gap: 24px;
}

.masonry-gallery .plate {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px;
  break-inside: avoid;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  :root { --inset-top: 28px; --inset-x: 12px; --edge-gap: 14px; }

  .page-shell {
    flex-direction: column;
    gap: 0;
  }

  .nav-column {
    width: auto;
    margin: calc(var(--inset-top) + var(--edge-gap)) calc(var(--border-size) + var(--inset-x) + var(--edge-gap)) 24px calc(var(--border-size) + var(--inset-x) + var(--edge-gap));
  }

  .content-pane {
    padding-right: calc(var(--border-size) + var(--inset-x) + var(--edge-gap));
    padding-left: calc(var(--border-size) + var(--inset-x) + var(--edge-gap));
  }

  .content-spacer-top { height: 0; }

  .site-name { font-size: 24px; margin-bottom: 20px; }
  nav.projects { gap: 14px; }
  nav.projects .nav-top { gap: 10px; }
  nav.projects .nav-bottom { gap: 10px; margin-top: 0; }

  .home-row { flex-direction: column; }
  .bio-col { width: auto; }
  .mark { margin-top: 24px; }
  .project-gallery { grid-template-columns: 1fr; }
}

/* ---------- collage panel (floating images + captions) ---------- */

.collage {
  position: relative;
  width: 88%;
  margin-inline: auto;
  aspect-ratio: var(--cw, 1760) / var(--ch, 1190);
  container-type: inline-size;
  text-align: left;
}

.collage .float,
.collage .cap,
.collage .cap-heading,
.collage .swatch {
  position: absolute;
  left: calc((var(--x) - var(--x0, 80)) / var(--cw, 1760) * 100%);
  top: calc((var(--y) - var(--y0, 100)) / var(--ch, 1190) * 100%);
  margin: 0;
}

.collage .float {
  width: calc(var(--w) / var(--cw, 1760) * 100%);
  height: auto;
  z-index: var(--z, 1);
  display: block;
}

.collage .swatch {
  width: calc(132 / var(--cw, 1760) * 100%);
  height: calc(57 / var(--ch, 1190) * 100%);
  background: var(--c);
  box-sizing: border-box;
}

.collage .cap,
.collage .cap-heading {
  z-index: 5;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.collage .cap {
  color: var(--red);
  font-size: 14px;
}

.collage .cap.r {
  text-align: right;
  transform: translate(-100%, -50%);
}

.collage .cap-heading {
  color: var(--ink);
  font-size: max(12px, 2.4cqw);
}

/* ---------- hero stage + design thumbnails ---------- */

.hero-stage {
  position: relative;
  flex: none;
  width: 100%;
  height: max(calc(100vh - 286px), 260px);
}

.stage-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  pointer-events: none;
}

.stage-img.active {
  opacity: 1;
  pointer-events: auto;
  cursor: zoom-in;
}

.hero-thumbs {
  display: flex;
  margin-top: 12px;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
}

.hero-thumb {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.3;
}

.hero-thumb:hover { opacity: 0.65; }
.hero-thumb.active { opacity: 1; }

.hero-thumb img {
  display: block;
  height: 64px;
  width: auto;
}

/* single hero (no carousel); longer copy wraps onto two lines */
.hero-row.single .project-desc { white-space: normal; max-width: min(100%, 720px); }
.hero-row.single .hero-stage { height: auto; }
.hero-row.single { gap: 44px; }

/* loose collage whose pieces can be dragged around */
.hero-stage .drag-stage {
  width: min(100%, calc(max(100vh - 212px, 260px) * var(--cw) / var(--ch)));
  margin: 0 auto;
}
.hero-stage .drag-stage.big {
  width: min(82%, calc(max(100vh - 220px, 300px) * var(--cw) / var(--ch) * 1.15));
}
.drag { cursor: grab; user-select: none; -webkit-user-drag: none; }
.drag.dragging { cursor: grabbing; }
.drag img { display: block; width: 100%; -webkit-user-drag: none; }
.drag.cut-r { clip-path: inset(0 7.1% 0 0); }
.drag.polaroid {
  padding: 1.9cqw 1.55cqw 5.7cqw;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.18);
  rotate: -8deg;
}
.drag.polaroid img { aspect-ratio: 0.84; object-fit: cover; }
.drag.phone { position: absolute; }
.drag.phone .screen {
  position: absolute;
  left: 25.4%;
  top: 6.8%;
  width: 47.1%;
  height: 34.9%;
  object-fit: cover;
}

/* carousel panel below the hero: stage + thumbnails, no copy line */
.hero-row.carousel .hero-stage { height: max(calc(100vh - 250px), 260px); }
.hero-row.carousel .hero-thumbs { flex-wrap: wrap; gap: 10px 12px; }
.hero-row.carousel .hero-thumb img { height: 52px; }

/* two (or three) images shown side by side at once (not a toggled
   carousel); all stay clickable to zoom, and arrow keys still work
   inside the lightbox */
.hero-row.pair,
.hero-row.trio {
  gap: 48px;
}
.hero-row.pair .hero-stage,
.hero-row.trio .hero-stage {
  position: static;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-row.trio .hero-stage {
  gap: 10px;
}
.hero-row.pair .pair-item,
.hero-row.trio .trio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 46%;
}
.hero-row.pair .stage-img,
.hero-row.trio .stage-img {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  cursor: zoom-in;
  width: auto;
  max-width: 100%;
  max-height: max(calc(100vh - 320px), 260px);
}
.hero-row.trio .trio-item {
  max-width: 32%;
}
.hero-row.pair .pair-item {
  max-width: 47%;
}
.hero-row.pair .stage-img {
  max-height: max(calc(100vh - 260px), 300px);
}
.hero-row.trio .stage-img {
  max-height: max(calc(100vh - 260px), 320px);
}
.hero-row.pair .pair-caption,
.hero-row.trio .trio-caption {
  margin: 0;
  font-size: 14px;
  color: var(--red);
}
.hero-row.pair .pair-caption a,
.hero-row.trio .trio-caption a {
  color: var(--red);
  text-decoration: none;
}
.hero-row.pair .pair-caption a:hover,
.hero-row.trio .trio-caption a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .hero-stage { height: auto; aspect-ratio: 4 / 5; }
  .hero-row.carousel .hero-stage { height: auto; aspect-ratio: 1; }
  .hero-row.single .hero-stage { height: auto; aspect-ratio: auto; }
  .hero-row.pair .hero-stage,
  .hero-row.trio .hero-stage { flex-direction: column; flex-wrap: nowrap; align-items: center; aspect-ratio: auto; }
  .hero-row.pair .pair-item,
  .hero-row.trio .trio-item { max-width: 100%; }
  .hero-row.pair .stage-img,
  .hero-row.trio .stage-img { max-width: 100%; max-height: none; }
  .hero-row .project-desc { white-space: normal; }
}

/* ---------- Figma-style frame mockup ---------- */

.figma-canvas {
  background: transparent;
  padding: 24px 24px 20px;
  width: min(92%, calc((100vh - 342px) * var(--ratio, 1.479) + 107px));
  margin-inline: auto;
  text-align: left;
}

.figma-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.figma-label {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 8px 12px;
  color: #111;
}

.figma-frame {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--red);
  padding: 24px 28px;
}

.figma-frame .collage {
  width: 100%;
  margin: 0;
}

.figma-frame > img {
  display: block;
  width: 100%;
}

/* a reference photo layered into the empty gap of the Inspo moodboard */
.figma-frame > img.gap-photo {
  position: absolute;
  left: 30%;
  top: 8.5%;
  width: 26%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.figma-frame > .mood-cap {
  position: absolute;
  left: 59%;
  top: 92%;
  margin: 0;
  color: var(--red);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.figma-frame .handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid var(--red);
  z-index: 10;
}

/* Invisible padding around each handle so it's easier to grab; pointer
   events landing on this pseudo-element still report the .handle as the
   target, so the JS hit-test (closest(".handle")) still matches. */
.figma-frame .handle::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
.handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
.handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }

@media (max-width: 900px) {
  .figma-canvas { padding: 12px 12px 12px; }
  .figma-frame { padding: 12px; }
}

/* ---------- full-page image view ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0);
  cursor: zoom-out;
  transition: background 0.35s ease;
}

.lightbox.open { background: var(--paper); }
.lightbox.zoomed img,
.lightbox.zoomed .zoom-canvas { cursor: grab; }
.lightbox.panning img,
.lightbox.panning .zoom-canvas { cursor: grabbing; }

.lightbox img {
  position: fixed;
  display: block;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: left 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    top 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox img { transition: none; }
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 20px;
  border: 0;
  background: none;
  color: var(--red);
  font-family: inherit;
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}

.lightbox-arrow:hover { opacity: 1; }
.lightbox-arrow.prev { left: 12px; }
.lightbox-arrow.next { right: 12px; }

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 22px;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: var(--red);
  font-family: inherit;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.lightbox-close:hover { opacity: 1; }

.project-main + .content-spacer-bottom { height: 26vh; }

/* ---------- draggable moodboard ---------- */

.figma-canvas {
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.figma-canvas.dragging {
  cursor: grabbing;
  z-index: 30;
}

.figma-canvas img { -webkit-user-drag: none; }

/* ---------- shared desk: overlapping draggable frames ---------- */

.desk {
  position: relative;
  width: min(calc(100% - 24px), calc((100vh - 100px) * 1.21));
  aspect-ratio: 971 / 800;
  margin-inline: auto;
}

.desk .desk-item {
  position: absolute;
  width: 55%;
  margin: 0;
  padding: 0;
}

.desk .figma-head { margin-bottom: 8px; }
.desk .figma-frame { padding: 12px; }
.desk .collage .cap { font-size: max(10px, 1.7cqw); }

.desk-mood { left: 0; top: 0; z-index: 1; }
.desk-sketch { right: 0; bottom: 0; z-index: 2; }

/* Envy's two frames are much wider/shorter than TOTT's: bigger, matched
   widths, with the second frame pushed lower rather than corner-pinned.
   Scoped to min-width so it never fights the mobile stack override below. */
@media (min-width: 1101px) {
  .desk.wide { aspect-ratio: 1.3 / 1; }
  .desk.wide .desk-item { width: 66%; }
  .desk.wide .desk-sketch { width: 92%; top: 46%; bottom: auto; }
  .desk.wide .figma-frame { padding: 22px; }
  .desk.wide .figma-head { margin-bottom: 12px; }
}

@media (max-width: 1100px) {
  .desk { width: calc(100% - 24px); aspect-ratio: auto; display: flex; flex-direction: column; gap: 32px; }
  .desk .desk-item { position: relative; width: 100%; }
  .figma-frame > .mood-cap { left: 52%; font-size: 9px; }
}

/* DJs Against Apartheid: Moodboard and Sketchpad slightly overlapping
   and staggered, big enough to fill the panel width. Sketchpad sits on
   top (z-index) and is offset down/right so neither frame's content is
   hidden behind the other. */
@media (min-width: 1101px) {
  .daa-desk {
    width: 100%;
    aspect-ratio: 1.3 / 1;
  }
  .daa-desk .desk-item {
    width: 64%;
  }
  .daa-desk .desk-mood {
    left: 6%;
    top: 0;
    z-index: 1;
  }
  .daa-desk .desk-sketch {
    left: auto;
    right: 0;
    top: 30%;
    bottom: auto;
    z-index: 2;
  }
}

/* .lightbox img (below) sets position:fixed for the plain image-lightbox
   case; a frame clone's own <img> tags live inside .lightbox too but must
   stay in normal flow so .figma-frame sizes around them. Same specificity
   as that rule, so it has to come after it to win (see .lightbox img). */
.zoom-canvas {
  position: fixed;
  margin: 0;
  padding: 0;
  transform-origin: 0 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: zoom-out;
}

.zoom-canvas .figma-frame { padding: 12px; }
.zoom-canvas .figma-head { margin-bottom: 8px; }
.zoom-canvas .collage .cap { font-size: max(10px, 1.7cqw); }

/* .lightbox img (further down) sets position:fixed for the plain
   image-lightbox case, which also matches a frame clone's own <img>
   tags since they live inside .lightbox too. A plain <img> directly in
   a frame (no .collage/.float wrapper) needs to stay in normal flow so
   .figma-frame sizes around it; .gap-photo keeps its own absolute
   layering, so it's excluded here. */
.zoom-canvas .figma-frame > img:not(.gap-photo) {
  position: static;
  width: 100%;
}

@media (max-width: 1100px) {
  .desk .collage .cap,
  .zoom-canvas .collage .cap { font-size: max(8px, 1.7cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-canvas { transition: none; }
}