/* Portfolio UI follows the existing theme; source website captures stay unfiltered. */
.vimagic-spotlight {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  overflow: clip;
}
.vimagic-project .project-caption > div { min-width: 0; }
.vimagic-project .project-caption h2 { overflow-wrap: anywhere; }
.vimagic-cover {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  background: var(--forma-surface, #e9e7e1);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}
.project-art .vimagic-cover { aspect-ratio: 5 / 2; }
.project-art > .vimagic-cover { transition: transform .9s var(--ease); transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-art:hover > .vimagic-cover { transform: scale(1.015); }
}
.vimagic-cover img {
  display: block;
  height: auto;
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  filter: none;
  transform: none !important;
}
.vimagic-cover-copy {
  position: absolute;
  left: 5.6%;
  top: 50%;
  width: 20%;
  transform: translateY(-50%);
}
.vimagic-cover .vimagic-cover-wordmark {
  display: block;
  width: 100%;
  margin: 0 0 12%;
  border: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 2.05cqw, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.vimagic-cover-caption {
  color: var(--muted);
  font: 400 .65cqw/1.8 ui-monospace, monospace;
  letter-spacing: .08em;
}
.vimagic-cover .vimagic-cover-desktop,
.vimagic-cover .vimagic-cover-mobile {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  border: 0;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  box-shadow: 0 8px 30px #0000000a;
}
.vimagic-cover .vimagic-cover-desktop { left: 29%; width: 46%; }
.vimagic-cover .vimagic-cover-mobile { left: 79%; width: 11%; }
.vimagic-project-page .project-intro-grid { gap: clamp(30px, 4vw, 70px); }
.vimagic-project-page .project-intro-grid > div { min-width: 0; }
.vimagic-project-page .project-intro h1 {
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.vimagic-project-page .project-category { font-size: clamp(14px, 1.35vw, 18px); }
.vimagic-visit { margin-top: 24px; font-size: 14px; }
.vimagic-copy p + p { margin-top: 20px; }
.vimagic-project-page .vimagic-enquiry { padding-top: 0; }
.vimagic-gallery {
  display: grid;
  align-items: start;
  gap: clamp(30px, 6vw, 100px);
  padding-bottom: 30px;
}
.vimagic-gallery figure { min-width: 0; margin: 0; }
.vimagic-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: none;
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.vimagic-gallery figcaption { margin-top: 15px; color: var(--muted); font-size: 12px; }
.vimagic-flows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.vimagic-devices { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); padding-bottom: 90px; }
.vimagic-mobile { justify-self: center; width: 100%; max-width: 290px; }
@media (max-width: 900px) {
  .vimagic-project-page .project-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .vimagic-cover,
  .project-art .vimagic-cover { aspect-ratio: 1.15; }
  .vimagic-cover-copy { left: 6%; top: 7%; width: 88%; transform: none; }
  .vimagic-cover .vimagic-cover-wordmark { width: 62%; margin-bottom: 8px; font-size: 26px; }
  .vimagic-cover-caption { font-size: 9px; line-height: 1.6; letter-spacing: .06em; }
  .vimagic-cover .vimagic-cover-desktop { left: 6%; top: 39%; width: 67%; transform: none !important; }
  .vimagic-cover .vimagic-cover-mobile { left: 77%; top: 39%; width: 17%; transform: none !important; }
  .vimagic-project-page .project-category { font-size: 14px; }
  .vimagic-flows,
  .vimagic-devices { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .vimagic-mobile { max-width: 250px; }
  .vimagic-devices { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-art > .vimagic-cover { transition: none; }
}

/* Keep the longer project name inside the existing mobile page gutters. */
@media (max-width: 360px) {
  .next-project[data-vimagic-next] { flex-direction: column; align-items: flex-start; gap: 14px; }
}