@font-face {
  font-family: "Juana Portfolio";
  src: url("uploads/Fontspring-DEMO-juanaalt-regular.otf") format("opentype"),
       local("Fontspring-DEMO-juanaalt-regular"),
       local("Juana Alt Regular"),
       local("Juana Alt");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --lilac: #A692C7;
  --plum: #51415F;
  --grey: #B9B7C0;
  --paper: #FBFAFC;
  --soft-paper: #FBFAFC;
  --header-h: 88px;
  --serif: "Juana Portfolio", "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--plum);
  font-family: var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 20px;
  left: 50%;
  width: min(1180px, calc(100% - 40px));
  height: 68px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 8px 18px;
  border: 1px solid rgba(251,250,252,.55);
  border-radius: 20px;
  background: rgba(251,250,252,.78);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 18px 50px rgba(81,65,95,.10);
  transition: background .35s ease, box-shadow .35s ease, top .35s ease;
}
.site-header.scrolled {
  top: 12px;
  background: rgba(251,250,252,.94);
  box-shadow: 0 12px 38px rgba(81,65,95,.12);
}

.nav-brand {
  width: 90px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  flex: 0 0 auto;
}
.nav-brand img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-nav a {
  position: relative;
  padding: 13px 17px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--plum);
  border-radius: 14px;
  transition: color .25s ease, background .25s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 8px;
  height: 1px;
  background: var(--lilac);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.main-nav a:hover::after,
.main-nav a.is-active::after { transform: scaleX(1); }
.main-nav a:hover { background: rgba(166,146,199,.08); }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(166,146,199,.12);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: var(--plum);
}

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-video-bg,
.hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.hero-video-bg {
  z-index: -5;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.055);
  filter: blur(22px) saturate(.86) brightness(.93);
}
.hero-video {
  z-index: -4;
  object-fit: contain;
  object-position: center center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(81,65,95,.10);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 48%, rgba(251,250,252,.62) 0 14%, rgba(251,250,252,.28) 34%, rgba(81,65,95,.12) 76%, rgba(81,65,95,.20) 100%),
    linear-gradient(to bottom, rgba(251,250,252,.01), rgba(81,65,95,.08));
}

.hero-brand {
  position: relative;
  width: min(520px, calc(100vw - 44px));
  min-height: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px 40px 36px;
  border: 1px solid rgba(251,250,252,.68);
  border-radius: 10px 10px 100px 10px;
  background: rgba(251,250,252,.70);
  backdrop-filter: blur(13px) saturate(115%);
  -webkit-backdrop-filter: blur(13px) saturate(115%);
  box-shadow: 0 30px 80px rgba(81,65,95,.20);
}
.hero-brand::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  width: 54px;
  height: 54px;
  border-top: 1px solid var(--lilac);
  border-left: 1px solid var(--lilac);
  border-radius: 30px 0 0 0;
  opacity: .72;
}
.hero-logo { width: min(290px, 66vw); }
.hero-title {
  margin: 17px 0 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--plum);
  transform: translateX(.21em);
}
.hero-kicker {
  margin: 19px 0 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--grey);
}

.hero-corner {
  position: absolute;
  z-index: -1;
  opacity: .16;
  pointer-events: none;
}
.hero-corner--left {
  width: min(420px, 36vw);
  left: -90px;
  bottom: -80px;
  transform: rotate(180deg);
}
.hero-corner--right {
  width: min(320px, 30vw);
  right: -80px;
  top: 23%;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #FBFAFC;
  text-shadow: 0 2px 12px rgba(81,65,95,.45);
}
.scroll-cue span:first-child {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(251,250,252,.95), rgba(251,250,252,0));
  animation: pulseLine 1.8s ease-in-out infinite;
}
@keyframes pulseLine { 50% { transform: scaleY(.6); opacity: .4; } }

.section-divider {
  position: relative;
  z-index: 8;
  height: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.section-divider img {
  width: min(760px, 70vw);
  height: 92px;
  object-fit: fill;
  transform: translateY(-46px);
  filter: drop-shadow(0 5px 12px rgba(81,65,95,.04));
}

.about {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 138px 0 110px;
  background: linear-gradient(180deg, #FBFAFC 0%, #fbfafc 100%);
  overflow: hidden;
}
.about-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .82fr);
  gap: clamp(64px, 8vw, 125px);
  align-items: center;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  margin-bottom: 28px;
  color: var(--grey);
  font-size: 10px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.section-label span + span::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 18px;
  vertical-align: middle;
  background: currentColor;
  opacity: .55;
}
.about-copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(55px, 6.4vw, 94px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--lilac);
}
.about-copy h2 {
  max-width: 620px;
  margin: 30px 0 24px;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--plum);
}
.about-copy p {
  max-width: 660px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 400;
  color: var(--plum);
}
.about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(166,146,199,.28);
  color: var(--grey);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.portrait-wrap {
  position: relative;
  width: min(470px, 100%);
  margin: 0 0 0 auto;
}
.portrait-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1004.67 / 1228.18;
  overflow: visible;
}
.portrait-wrap figcaption {
  margin-top: 15px;
  color: var(--grey);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: .08em;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .site-header { top: 12px; width: calc(100% - 24px); }
  .menu-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 76px;
    right: 0;
    width: min(290px, calc(100vw - 24px));
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid rgba(166,146,199,.18);
    border-radius: 18px;
    background: rgba(251,250,252,.97);
    box-shadow: 0 22px 50px rgba(81,65,95,.14);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: .24s ease;
  }
  .main-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav a { padding: 15px 14px; }
  .about { padding-top: 120px; }
  .about-inner { grid-template-columns: 1fr; gap: 72px; }
  .portrait-wrap { width: min(470px, 100%); margin-inline: auto; }
}

@media (max-width: 560px) {
  .section-divider img { width: 88vw; height: 72px; transform: translateY(-36px); }
  .nav-brand { width: 104px; justify-content: start; }
  .nav-brand img { width: 82px; }
  .hero-brand {
    min-height: 335px;
    padding: 34px 24px 31px;
    border-radius: 8px 8px 70px 8px;
  }
  .hero-logo { width: 250px; }
  .hero-title { letter-spacing: .32em; }
  .hero-kicker { letter-spacing: .16em; text-align: center; }
  .about { padding: 105px 0 90px; }
  .about-inner { width: calc(100% - 32px); }
  .section-label { gap: 12px; }
  .section-label span + span::before { width: 18px; margin-right: 12px; }
  .about-copy h1 { font-size: clamp(49px, 17vw, 72px); }
  .portrait-wrap { width: min(420px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Hero logo refinement — full Lena Frank logo as the focal point */
.hero-brand {
  width: min(620px, calc(100vw - 44px));
  min-height: 430px;
  padding: 34px 42px 38px;
}
.hero-logo {
  width: min(430px, 78vw);
  max-height: 300px;
  object-fit: contain;
}
.hero-title {
  margin-top: 8px;
  font-size: clamp(16px, 1.55vw, 21px);
  letter-spacing: .48em;
  transform: translateX(.24em);
}
.hero-kicker { display: none; }

@media (max-width: 640px) {
  .hero-brand {
    width: calc(100vw - 28px);
    min-height: 360px;
    padding: 28px 24px 30px;
  }
  .hero-logo {
    width: min(360px, 82vw);
    max-height: 245px;
  }
  .hero-title {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: .38em;
    transform: translateX(.19em);
  }
}

/* Use the original uploads/LF_logo2-02.svg in the hero.
   The source SVG contains generous artboard whitespace, so the wrapper crops only the empty artboard area — the logo artwork itself stays untouched. */
.hero-logo-crop {
  width: min(390px, 72vw);
  height: min(390px, 72vw);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: -14px 0 -22px;
}
.hero-logo-crop .hero-logo {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform: scale(2.05);
  transform-origin: 50% 50%;
}
@media (max-width: 640px) {
  .hero-logo-crop {
    width: min(330px, 78vw);
    height: min(330px, 78vw);
    margin: -10px 0 -18px;
  }
  .hero-logo-crop .hero-logo {
    width: 100%;
    height: 100%;
    max-height: none;
    transform: scale(2.05);
  }
}

/* v5 — clean hero branding directly on the video */
.hero-brand {
  width: min(620px, calc(100vw - 44px));
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  transition: opacity 1.25s ease;
}
.hero-brand::before { display: none; }
.hero-brand.is-dimmed { opacity: .10; }

/* No decorative shape elements around the logo in the hero. */
.hero-corner { display: none !important; }

.hero-logo-crop {
  width: min(430px, 74vw);
  height: min(430px, 74vw);
  margin: -22px 0 -32px;
}
.hero-logo-crop .hero-logo {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform: scale(2.05);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 8px 28px rgba(36, 28, 44, .18));
}
.hero-title {
  margin: 0;
  color: #FBFAFC;
  text-shadow: 0 4px 18px rgba(36, 28, 44, .26);
}

@media (max-width: 640px) {
  .hero-brand {
    width: calc(100vw - 28px);
    min-height: 0;
    padding: 0;
  }
  .hero-logo-crop {
    width: min(350px, 82vw);
    height: min(350px, 82vw);
    margin: -16px 0 -26px;
  }
}

/* v6 — requested hero spacing refinement only */
.hero-logo-crop .hero-logo {
  filter: none;
}
.hero-title {
  margin-top: 68px;
}
@media (max-width: 640px) {
  .hero-title {
    margin-top: 52px;
  }
}

/* v7 — clean video and exact logo geometry */
/* Remove every glow / wash layer from the hero. The video itself is shown untouched. */
.hero {
  background: #51415F;
}
.hero-video-bg {
  display: none !important;
}
.hero-overlay {
  display: none !important;
  background: none !important;
}
.hero::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}
.hero-video {
  filter: none !important;
  opacity: 1 !important;
}

/* Keep the uploaded logo artwork visually unchanged: no filters, shadows,
   pseudo-elements or decorative shapes are applied to it. */
.hero-logo-crop .hero-logo {
  filter: none !important;
  box-shadow: none !important;
}
.hero-logo-crop::before,
.hero-logo-crop::after,
.hero-logo::before,
.hero-logo::after {
  display: none !important;
  content: none !important;
}

/* v9 — navigation logo sizing: show the complete uploaded logo without cropping */
.nav-brand {
  width: 76px;
  height: 52px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.nav-brand img {
  width: auto;
  height: 46px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 560px) {
  .nav-brand {
    width: 66px;
    height: 48px;
  }
  .nav-brand img {
    width: auto;
    height: 42px;
  }
}

/* v10 — give the navigation logo breathing room so the original SVG is fully visible */
.nav-brand {
  width: 68px;
  height: 54px;
  padding: 5px 4px 4px;
  overflow: visible;
  flex: 0 0 auto;
}
.nav-brand img {
  display: block;
  width: auto;
  height: 39px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translateY(1px);
}

@media (max-width: 560px) {
  .nav-brand {
    width: 62px;
    height: 50px;
    padding: 5px 4px 4px;
  }
  .nav-brand img {
    width: auto;
    height: 36px;
    transform: translateY(1px);
  }
}

/* v11 — navigation logo: code-only fix. The SVG file itself is untouched. */
.site-header .nav-brand {
  width: 86px;
  height: 52px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 86px;
  overflow: visible;
}

.site-header .nav-brand img {
  display: block;
  width: auto !important;
  height: 42px !important;
  max-width: 100% !important;
  max-height: 42px !important;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

@media (max-width: 560px) {
  .site-header .nav-brand {
    width: 76px;
    height: 48px;
    padding: 3px 7px;
    flex-basis: 76px;
  }

  .site-header .nav-brand img {
    height: 38px !important;
    max-height: 38px !important;
  }
}

/* v15 — navigation logo display, CODE ONLY.
   The uploaded SVG stays 100% untouched. Because the SVG has a large transparent
   artboard, the image itself is larger than the navbar slot, while its VISIBLE
   artwork is centered completely inside the slot. Nothing is cropped. */
.site-header .nav-brand {
  position: relative !important;
  width: 76px !important;
  height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 76px !important;
  display: block !important;
  overflow: visible !important;
}
.site-header .nav-brand > img {
  position: absolute !important;
  display: block !important;
  width: 115px !important;
  height: 115px !important;
  max-width: none !important;
  max-height: none !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
  clip-path: none !important;
}

@media (max-width: 560px) {
  .site-header .nav-brand {
    width: 66px !important;
    height: 56px !important;
    flex-basis: 66px !important;
  }
  .site-header .nav-brand > img {
    width: 104px !important;
    height: 104px !important;
  }
}

/* v16 — navigation logo: simply scale the complete SVG down with CSS.
   No cropping, no oversized positioning, no transform, and the SVG file itself stays unchanged. */
.site-header .nav-brand {
  position: relative !important;
  width: 92px !important;
  height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.site-header .nav-brand > img {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: 42px !important;
  max-width: 100% !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

@media (max-width: 560px) {
  .site-header .nav-brand {
    width: 82px !important;
    height: 48px !important;
    flex-basis: 82px !important;
  }
  .site-header .nav-brand > img {
    height: 38px !important;
    max-height: 38px !important;
  }
}

/* v18 — Hero logo uses the uploaded SVG exactly as authored.
   No crop wrapper, no transform, no repositioning of the artwork inside the SVG. */
.hero-brand {
  width: min(920px, 100vw) !important;
  overflow: visible !important;
}
.hero-logo-original {
  display: block !important;
  width: min(900px, 94vw) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: -185px 0 -195px !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .hero-brand {
    width: 100vw !important;
  }
  .hero-logo-original {
    width: min(760px, 118vw) !important;
    margin: -150px 0 -165px !important;
  }
}

/* v24 — About image: load the real PNG as a normal HTML image and mask it with
   the exact path from Gestaltungselemente-01_hochkant.svg. This avoids broken
   external image references inside inline SVG when opening the site locally. */
.portrait-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1004.67 / 1228.18 !important;
  overflow: hidden !important;
  background: #f3eff8;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1004.67 1228.18'%3E%3Cpath fill='white' d='M482.45,0v.22l-195.4,1.06C173.86,8.38,80.47,81.21,34.27,181.55,16.99,219.09,1.25,256.09,1.1,300.29l-1.1,927.89h522.22v-.22l195.4-1.06c113.19-7.1,206.58-79.93,252.78-180.27,17.28-37.54,33.02-74.54,33.17-118.74L1004.67,0H482.45Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1004.67 1228.18'%3E%3Cpath fill='white' d='M482.45,0v.22l-195.4,1.06C173.86,8.38,80.47,81.21,34.27,181.55,16.99,219.09,1.25,256.09,1.1,300.29l-1.1,927.89h522.22v-.22l195.4-1.06c113.19-7.1,206.58-79.93,252.78-180.27,17.28-37.54,33.02-74.54,33.17-118.74L1004.67,0H482.45Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}
.portrait-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* v25 — exact hochkant Gestaltungselement shape for the About image.
   The uploaded PNG is clipped by the original Illustrator path directly in SVG,
   so the shape is exact and does not depend on CSS mask support. */
.portrait-media {
  width: 100% !important;
  aspect-ratio: 1004.67 / 1228.18 !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.portrait-media .portrait-shape {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1004.67 / 1228.18;
  overflow: visible;
}


/* v27 — About image: normal PNG loading + exact original Gestaltungselement clip path.
   The image itself is a normal HTML <img>, so local file:// loading works reliably. */
.clip-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.portrait-media {
  width: 100% !important;
  aspect-ratio: 1004.67 / 1228.18 !important;
  height: auto !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.portrait-media .portrait-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  clip-path: url(#portraitClipHtml);
  -webkit-clip-path: url(#portraitClipHtml);
}

/* v30 — current About portrait mask + CV download button */
.portrait-media {
  width: 100% !important;
  aspect-ratio: 1004.67 / 1228.18 !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1004.67 1228.18'%3E%3Cpath fill='white' d='M482.45,0v.22l-195.4,1.06C173.86,8.38,80.47,81.21,34.27,181.55,16.99,219.09,1.25,256.09,1.1,300.29l-1.1,927.89h522.22v-.22l195.4-1.06c113.19-7.1,206.58-79.93,252.78-180.27,17.28-37.54,33.02-74.54,33.17-118.74L1004.67,0H482.45Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1004.67 1228.18'%3E%3Cpath fill='white' d='M482.45,0v.22l-195.4,1.06C173.86,8.38,80.47,81.21,34.27,181.55,16.99,219.09,1.25,256.09,1.1,300.29l-1.1,927.89h522.22v-.22l195.4-1.06c113.19-7.1,206.58-79.93,252.78-180.27,17.28-37.54,33.02-74.54,33.17-118.74L1004.67,0H482.45Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}
.portrait-media > .portrait-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.cv-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 20px;
  border: 1px solid var(--lilac);
  border-radius: 999px;
  background: var(--lilac);
  color: var(--soft-paper);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .10em;
  text-transform: uppercase;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cv-download svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.cv-download:hover,
.cv-download:focus-visible {
  background: var(--plum);
  border-color: var(--plum);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(81,65,95,.16);
}
.cv-download:focus-visible {
  outline: 2px solid rgba(166,146,199,.45);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .cv-download {
    width: 100%;
    max-width: 330px;
  }
}

/* v31 — dynamic projects + one-page home */
.featured-projects {
  position: relative;
  padding: 142px 0 128px;
  background: #FBFAFC;
}
.featured-inner,
.contact-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.featured-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: 48px;
}
.featured-heading-row h1,
.projects-intro h1,
.contact-inner h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(52px, 6vw, 88px);
  line-height: .94;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lilac);
}
.featured-heading-row p,
.projects-intro > p,
.contact-inner > p {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--plum);
}
.text-link {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--lilac);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.featured-grid,
.projects-grid-all {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 34px);
}
.project-card {
  min-width: 0;
}
.project-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px 6px 70px 6px;
  background: #f3eff8;
}
.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.project-card:hover .project-card-media img { transform: scale(1.025); }
.project-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(81,65,95,.03), transparent 44%),
    linear-gradient(145deg, #f5f1fa 0%, #d7c9e8 56%, #a692c7 100%);
}
.project-placeholder::before,
.project-placeholder::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(251,250,252,.5);
  transform: rotate(45deg);
}
.project-placeholder::before { width: 42%; aspect-ratio: 1; }
.project-placeholder::after { width: 23%; aspect-ratio: 1; }
.project-placeholder span {
  position: absolute;
  left: 18px;
  bottom: 15px;
  z-index: 2;
  color: rgba(251,250,252,.75);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .18em;
}
.project-card-copy { padding: 20px 2px 0; }
.project-card-category {
  min-height: 28px;
  margin: 0 0 10px !important;
  color: var(--grey) !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
  font-weight: 300 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.project-card-copy h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 400;
  line-height: 1;
  color: var(--lilac);
}
.project-card-copy > p:not(.project-card-category) {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--plum);
}
.project-card-year {
  color: var(--grey);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .10em;
}
.about { min-height: auto; }
.contact-section {
  padding: 130px 0 145px;
  background: var(--plum);
  color: var(--soft-paper);
}
.contact-inner .section-label { color: rgba(251,250,252,.55); }
.contact-inner h1 { color: var(--soft-paper); }
.contact-inner > p { color: rgba(251,250,252,.72); }
.contact-placeholder {
  display: inline-flex;
  margin-top: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(251,250,252,.6);
  color: rgba(251,250,252,.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: default;
}

/* Projects overview page */
.projects-page { background: #fbfafc; }
.projects-main {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 160px 0 120px;
}
.projects-intro {
  max-width: 860px;
  margin-bottom: 74px;
}
.projects-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 68px;
  align-items: start;
}
.project-filter {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 28px;
  padding: 26px;
  border: 1px solid rgba(166,146,199,.18);
  border-radius: 8px 8px 46px 8px;
  background: rgba(251,250,252,.86);
}
.project-filter a {
  display: block;
  padding: 7px 0;
  color: var(--grey);
  font-size: 11px;
  line-height: 1.5;
  transition: color .2s ease, transform .2s ease;
}
.project-filter a:hover,
.project-filter a.active { color: var(--plum); transform: translateX(3px); }
.project-filter a.active { font-weight: 700; }
.project-filter .filter-all {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(166,146,199,.2);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.filter-group p {
  margin: 0 0 11px;
  color: var(--lilac);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}
.results-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(166,146,199,.22);
  color: var(--grey);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.projects-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card--listing { margin-bottom: 30px; }
.empty-projects {
  padding: 70px 30px;
  border: 1px solid rgba(166,146,199,.18);
  border-radius: 8px 8px 60px 8px;
  background: #FBFAFC;
}
.empty-projects h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 36px; color: var(--lilac); }
.empty-projects p { margin: 0; font-size: 13px; color: var(--grey); }

@media (max-width: 980px) {
  .featured-grid { grid-template-columns: 1fr 1fr; }
  .featured-grid .project-card:last-child { grid-column: 1 / -1; width: calc(50% - 9px); }
  .projects-layout { grid-template-columns: 1fr; gap: 36px; }
  .project-filter { position: static; grid-template-columns: 1fr 1fr; }
  .project-filter .filter-all { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .featured-projects { padding: 110px 0 90px; }
  .featured-inner,.contact-inner { width: calc(100% - 32px); }
  .featured-heading-row { align-items: start; flex-direction: column; margin-bottom: 34px; }
  .featured-grid,.projects-grid-all { grid-template-columns: 1fr; }
  .featured-grid .project-card:last-child { grid-column: auto; width: auto; }
  .project-card-media { aspect-ratio: 5 / 6; border-radius: 6px 6px 54px 6px; }
  .contact-section { padding: 100px 0 110px; }
  .projects-main { width: calc(100% - 32px); padding-top: 130px; }
  .projects-intro { margin-bottom: 46px; }
  .project-filter { grid-template-columns: 1fr; padding: 22px; }
  .project-filter .filter-all { grid-column: auto; }
}

/* v33 — Top 3 Projects color treatment */
.featured-projects {
  background: var(--lilac);
}
.featured-projects .section-label {
  color: rgba(251, 250, 252, .68);
}
.featured-projects .featured-heading-row h1 {
  color: var(--soft-paper);
}
.featured-projects .featured-heading-row p {
  color: rgba(251, 250, 252, .84);
}
.featured-projects .text-link {
  color: var(--soft-paper);
  border-bottom-color: rgba(251, 250, 252, .62);
}
.featured-projects .project-card-category,
.featured-projects .project-card-year {
  color: rgba(251, 250, 252, .62) !important;
}
.featured-projects .project-card-copy h2 {
  color: var(--soft-paper);
}
.featured-projects .project-card-copy > p:not(.project-card-category) {
  color: rgba(251, 250, 252, .86);
}

/* v35 — Projects page color system
   Lilac background  -> Off-white only
   Dark plum bg      -> Off-white only
   Off-white bg      -> Dark plum / grey / off-white
*/
.projects-page {
  background: var(--paper);
  color: var(--plum);
}

/* Dark-plum navigation on the projects overview. */
.projects-page .site-header,
.projects-page .site-header.scrolled {
  background: rgba(81, 65, 95, .96);
  border-color: rgba(251, 250, 252, .20);
  box-shadow: 0 14px 42px rgba(81, 65, 95, .18);
}
.projects-page .site-header .nav-brand img {
  /* White/off-white logo asset is used in projects.php; do not recolor it here. */
  filter: none;
}
.projects-page .main-nav a {
  color: var(--soft-paper);
}
.projects-page .main-nav a::after {
  background: var(--soft-paper);
}
.projects-page .main-nav a:hover {
  background: rgba(251, 250, 252, .10);
}
.projects-page .menu-toggle span {
  background: var(--soft-paper);
}

.projects-main {
  width: min(1320px, calc(100% - 48px));
  padding-top: 150px;
}

/* Intro uses the lilac + off-white combination exclusively. */
.projects-intro {
  position: relative;
  max-width: none;
  margin: 0 0 68px;
  padding: clamp(48px, 6vw, 78px) clamp(34px, 6vw, 78px);
  overflow: hidden;
  border-radius: 10px 10px 90px 10px;
  background: var(--lilac);
}
.projects-intro::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -145px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(251, 250, 252, .22);
  border-radius: 50%;
  pointer-events: none;
}
.projects-intro .section-label,
.projects-intro .section-label span,
.projects-intro h1,
.projects-intro > p {
  color: var(--soft-paper);
}
.projects-intro .section-label {
  opacity: .72;
}
.projects-intro h1 {
  max-width: 900px;
  font-size: clamp(58px, 7vw, 104px);
}
.projects-intro > p {
  max-width: 690px;
  margin-top: 22px;
  opacity: .86;
}

/* Category navigation uses dark plum + off-white only. */
.project-filter {
  padding: 30px 28px 32px;
  border-color: rgba(251, 250, 252, .18);
  border-radius: 8px 8px 54px 8px;
  background: var(--plum);
  box-shadow: 0 18px 44px rgba(81, 65, 95, .10);
}
.project-filter a,
.project-filter a:hover,
.project-filter a.active,
.filter-group p {
  color: var(--soft-paper);
}
.project-filter a {
  opacity: .62;
}
.project-filter a:hover {
  opacity: .88;
  transform: translateX(3px);
}
.project-filter a.active {
  opacity: 1;
  font-weight: 700;
}
.project-filter .filter-all {
  border-bottom-color: rgba(251, 250, 252, .20);
}
.filter-group p {
  opacity: .48;
}
.project-filter a.active::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-left: 9px;
  vertical-align: middle;
  background: var(--soft-paper);
}

/* Results sit on off-white: only dark plum and grey are used for typography. */
.results-head {
  border-bottom-color: rgba(81, 65, 95, .14);
  color: var(--grey);
}
.projects-page .project-card-category,
.projects-page .project-card-year {
  color: var(--grey) !important;
}
.projects-page .project-card-copy h2 {
  color: var(--plum);
}
.projects-page .project-card-copy > p:not(.project-card-category) {
  color: var(--plum);
  opacity: .84;
}
.projects-page .project-card-media {
  background: var(--paper);
}
.projects-page .project-placeholder {
  background: var(--plum);
}
.projects-page .project-placeholder::before,
.projects-page .project-placeholder::after {
  border-color: rgba(251, 250, 252, .34);
}
.projects-page .project-placeholder span {
  color: rgba(251, 250, 252, .76);
}

.empty-projects {
  border: 0;
  background: var(--plum);
}
.empty-projects h2,
.empty-projects p {
  color: var(--soft-paper);
}
.empty-projects p {
  opacity: .72;
}

@media (max-width: 980px) {
  .projects-intro {
    border-radius: 8px 8px 68px 8px;
  }
  .project-filter {
    gap: 22px 34px;
  }
}
@media (max-width: 700px) {
  .projects-main {
    width: calc(100% - 28px);
    padding-top: 118px;
  }
  .projects-intro {
    margin-bottom: 42px;
    padding: 42px 24px 48px;
    border-radius: 8px 8px 54px 8px;
  }
  .projects-intro::after {
    right: -150px;
    bottom: -190px;
  }
  .project-filter {
    padding: 24px 22px 27px;
    border-radius: 8px 8px 42px 8px;
  }
}


/* v36 — Projects page: cleaner editorial layout
   Color rules:
   Lilac background -> off-white only
   Dark plum background -> off-white only
   Off-white background -> dark plum / grey
*/
.projects-page {
  background: var(--paper);
  color: var(--plum);
}

/* Header sits quietly over the lilac intro and becomes dark-plum on scroll. */
.projects-page .site-header {
  background: transparent;
  border-color: rgba(251,250,252,.38);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.projects-page .site-header.scrolled {
  background: rgba(81,65,95,.96);
  border-color: rgba(251,250,252,.16);
  box-shadow: 0 12px 34px rgba(81,65,95,.14);
}
.projects-page .main-nav a,
.projects-page .main-nav a:hover,
.projects-page .main-nav a.is-active {
  color: var(--soft-paper);
}
.projects-page .main-nav a::after { background: var(--soft-paper); }
.projects-page .main-nav a:hover { background: rgba(251,250,252,.08); }
.projects-page .menu-toggle { background: rgba(251,250,252,.12); }
.projects-page .menu-toggle span { background: var(--soft-paper); }

.projects-main {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Simple full-width lilac intro instead of a large rounded card. */
.projects-intro {
  max-width: none;
  margin: 0;
  padding:
    clamp(168px, 18vh, 210px)
    max(24px, calc((100vw - 1180px) / 2))
    clamp(72px, 8vw, 112px);
  border-radius: 0;
  background: var(--lilac);
  overflow: visible;
}
.projects-intro::after { content: none; }
.projects-intro .section-label,
.projects-intro .section-label span,
.projects-intro h1,
.projects-intro > p { color: var(--soft-paper); }
.projects-intro .section-label { opacity: .68; }
.projects-intro h1 {
  max-width: 900px;
  margin-top: 26px;
  font-size: clamp(64px, 8vw, 112px);
  line-height: .9;
}
.projects-intro > p {
  max-width: 620px;
  margin-top: 28px;
  color: var(--soft-paper);
  opacity: .82;
}

.projects-layout {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(76px, 8vw, 108px) 0 140px;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(52px, 7vw, 92px);
}

/* Editorial category menu: no colored panel, just typography and spacing. */
.project-filter {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 34px;
  padding: 0 26px 0 0;
  border: 0;
  border-right: 1px solid rgba(185,183,192,.42);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.project-filter .filter-all {
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(185,183,192,.42);
  color: var(--plum);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.filter-group p {
  margin: 0 0 13px;
  color: var(--plum);
  opacity: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}
.project-filter a,
.project-filter a:hover,
.project-filter a.active {
  color: var(--grey);
}
.project-filter a {
  position: relative;
  padding: 8px 0;
  font-size: 11px;
  line-height: 1.55;
  opacity: 1;
  transform: none;
}
.project-filter a:hover,
.project-filter a.active {
  color: var(--plum);
  transform: none;
}
.project-filter a.active { font-weight: 700; }
.project-filter a.active::after {
  content: "";
  position: absolute;
  right: -27px;
  top: 50%;
  width: 2px;
  height: 22px;
  margin: 0;
  background: var(--plum);
  transform: translateY(-50%);
}

.results-head {
  margin-bottom: 34px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(185,183,192,.48);
  color: var(--grey);
}
.projects-grid-all {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 30px;
}
.project-card--listing { margin-bottom: 0; }
.projects-page .project-card-media {
  aspect-ratio: 4 / 5;
  border-radius: 3px 3px 44px 3px;
  background: rgba(185,183,192,.10);
}
.projects-page .project-card-copy { padding-top: 18px; }
.projects-page .project-card-category {
  min-height: 0;
  margin-bottom: 9px !important;
  color: var(--grey) !important;
}
.projects-page .project-card-copy h2 {
  margin-bottom: 12px;
  color: var(--plum);
  font-size: clamp(29px, 2.5vw, 42px);
}
.projects-page .project-card-copy > p:not(.project-card-category) {
  max-width: 48ch;
  color: var(--plum);
  opacity: .82;
}
.projects-page .project-card-year { color: var(--grey) !important; }
.projects-page .project-placeholder { background: var(--plum); }
.projects-page .project-placeholder::before,
.projects-page .project-placeholder::after { border-color: rgba(251,250,252,.32); }
.projects-page .project-placeholder span { color: rgba(251,250,252,.72); }

.empty-projects {
  padding: 64px 0;
  border: 0;
  border-top: 1px solid rgba(185,183,192,.48);
  border-radius: 0;
  background: transparent;
}
.empty-projects h2 { color: var(--plum); }
.empty-projects p { color: var(--grey); opacity: 1; }

@media (max-width: 980px) {
  .projects-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .project-filter {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 34px;
    padding: 0 0 34px;
    border-right: 0;
    border-bottom: 1px solid rgba(185,183,192,.42);
  }
  .project-filter .filter-all { grid-column: 1 / -1; }
  .project-filter a.active::after {
    right: auto;
    left: 0;
    top: auto;
    bottom: 2px;
    width: 22px;
    height: 1px;
    transform: none;
  }
}

@media (max-width: 900px) {
  .projects-page .main-nav {
    background: rgba(81,65,95,.98);
    border-color: rgba(251,250,252,.15);
    box-shadow: 0 22px 50px rgba(81,65,95,.18);
  }
}

@media (max-width: 700px) {
  .projects-intro {
    padding: 142px 20px 66px;
  }
  .projects-intro h1 { margin-top: 20px; }
  .projects-layout {
    width: calc(100% - 32px);
    padding: 58px 0 104px;
  }
  .project-filter { grid-template-columns: 1fr; }
  .project-filter .filter-all { grid-column: auto; }
  .projects-grid-all { grid-template-columns: 1fr; gap: 54px; }
  .projects-page .project-card-media {
    aspect-ratio: 5 / 6;
    border-radius: 3px 3px 40px 3px;
  }
}

/* v37 — Projects archive + individual project pages */
.projects-page,
.projects-page .projects-main,
.projects-page .projects-intro,
.projects-page .projects-layout {
  background: var(--paper);
}
.projects-page .site-header,
.projects-page .site-header.scrolled {
  background: rgba(251,250,252,.94);
  border-color: rgba(81,65,95,.10);
  box-shadow: 0 12px 38px rgba(81,65,95,.10);
}
.projects-page .main-nav a,
.projects-page .main-nav a:hover,
.projects-page .main-nav a.is-active { color: var(--plum); }
.projects-page .main-nav a::after { background: var(--lilac); }
.projects-page .main-nav a:hover { background: rgba(166,146,199,.08); }
.projects-page .menu-toggle { background: rgba(166,146,199,.12); }
.projects-page .menu-toggle span { background: var(--plum); }
.projects-intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(170px,18vh,210px) 0 58px;
}
.projects-intro .section-label,
.projects-intro .section-label span,
.projects-intro h1 { color: var(--plum); }
.projects-intro .section-label { opacity: 1; }
.projects-intro > p { color: var(--grey); opacity: 1; }
.projects-layout { padding-top: 38px; }
.projects-page .main-nav { border-color: transparent; }
.project-card { color: inherit; }
a.project-card { display: block; }
a.project-card .project-card-media { transition: transform .35s ease, box-shadow .35s ease; }
a.project-card:hover .project-card-media { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(81,65,95,.11); }
a.project-card:hover h2 { opacity: .72; }

.project-detail-page { background: var(--paper); }
.project-detail-page .site-header,
.project-detail-page .site-header.scrolled {
  background: rgba(251,250,252,.94);
  border-color: rgba(81,65,95,.10);
}
.project-detail-main { padding: 120px 0 80px; background: var(--paper); min-height: 100vh; }
.project-detail-toolbar {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--grey);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-detail-toolbar a:hover { color: var(--plum); }
.project-canvas-shell {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
}
.project-canvas {
  position: relative;
  width: 1200px;
  background: var(--paper);
  transform-origin: top left;
  overflow: hidden;
}
.project-el { position: absolute; transform-origin: center center; }
.project-el--text { white-space: pre-wrap; overflow: hidden; }
.project-el--image { overflow: hidden; }
.project-el--image img { position:absolute;display:block;transform:translate(-50%,-50%);max-width:none;max-height:none; }
.project-el--line { min-height: 1px; }
@media (max-width: 900px) {
  .projects-page .main-nav,
  .project-detail-page .main-nav { background: rgba(251,250,252,.98); border-color: rgba(81,65,95,.10); }
  .projects-page .main-nav a,
  .project-detail-page .main-nav a { color: var(--plum); }
}
@media (max-width: 700px) {
  .projects-intro { padding: 140px 16px 42px; }
  .projects-layout { padding-top: 26px; }
  .project-detail-main { padding-top: 108px; }
}
/* Project Builder v40 output support */
.project-el--shape { overflow: hidden; }
.project-el--shape img { position:absolute;display:block;transform:translate(-50%,-50%);max-width:none;max-height:none; }