/* ==========================================================================
   Sandra Lohmann — site styles
   Colors, fonts and sizes live in the tokens below; change them here once.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colors */
  --cream: #f7f4ef;
  --cream-dark: #efece4;
  --brown: #4a0f08;
  --brown-50: rgba(74, 15, 8, 0.5);
  --brown-10: rgba(74, 15, 8, 0.1);
  --pink: #ccaabb;
  --white: #fff;
  /* Fixed colours that stay the same in light and dark mode */
  --paper: #f7f4ef;
  --wildberry: #4a0f08;

  /* Fonts */
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Type scale (fluid between phone and desktop) */
  --fs-display: clamp(72px, 16.5vw, 238px);
  --fs-h1: clamp(44px, 5.3vw, 76px);
  --fs-h2: clamp(30px, 3.6vw, 52px);
  --fs-h3: clamp(20px, 1.8vw, 26px);
  --fs-lead: clamp(18px, 1.55vw, 22px);
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-label: 12px;

  /* Layout */
  --container: 1180px;
  --nav-width: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(80px, 10vw, 120px);
  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 8px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Dark mode: a deep plum (#1F181D) derived from the dusty pink, a slightly
   lighter plum for raised surfaces, soft cream text, the pink as accent and
   the same pink footer as in light mode. Follows the visitor's device setting unless they
   pick light/dark with the sun/moon button (remembered in their browser).
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --cream: #1f181d;
  --cream-dark: #2c2229;
  --brown: #f3ece4;
  --brown-50: rgba(243, 236, 228, 0.62);
  --brown-10: rgba(243, 236, 228, 0.12);
  --white: #2c2229;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --cream: #1f181d;
  --cream-dark: #2c2229;
  --brown: #f3ece4;
  --brown-50: rgba(243, 236, 228, 0.62);
  --brown-10: rgba(243, 236, 228, 0.12);
  --white: #2c2229;
  color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Footer always at the bottom, even on short pages */
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--brown); color: var(--cream); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 16px; }

/* Film grain over everything, like the Framer site */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background: url("/images/grain.png") repeat; background-size: 161px auto;
  opacity: 0.04;
}

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-space); }

.h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--brown-50); text-transform: none; }
.small { font-size: var(--fs-small); font-weight: 300; line-height: 1.4; }
.rich p + p { margin-top: 1em; }
.rich a { text-decoration: underline; text-underline-offset: 3px; }

/* Decorative doodles */
.flower { position: absolute; width: var(--size, 130px); height: auto; color: var(--brown); pointer-events: none; z-index: 0; transform: rotate(var(--r, 0deg)); }
.flower path { stroke: currentColor; }
.sparkle { position: absolute; width: var(--size, 28px); pointer-events: none; z-index: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: -0.02em;
  padding: 10px 18px; border-radius: 999px;
  background: var(--brown); color: var(--cream);
  transition: transform 0.3s var(--ease), background-color 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--light { background: var(--cream); color: var(--brown); }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-body); }
.link-arrow .arrow-box {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1.5px solid currentColor; border-radius: var(--radius-sm);
  transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s;
}
.link-arrow svg { width: 14px; transform: rotate(-45deg); transition: transform 0.3s var(--ease); }
.link-arrow:hover .arrow-box { background: var(--brown); color: var(--cream); }
.link-arrow:hover svg { transform: rotate(0deg); }
.tag {
  display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: 0;
  padding: 5px 10px; border-radius: 999px; background: var(--cream); color: var(--brown);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 16px; left: 50%; z-index: 50;
  width: min(100% - 2 * var(--gutter), var(--nav-width));
  transform: translateX(-50%);
}
.nav__box {
  background: var(--cream-dark); border-radius: 26px;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08), 0 1px 2px rgba(17, 17, 17, 0.04);
}
.nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 22px;
}

/* Hover panel (desktop + tablet): the bar opens downwards and shows the projects
   as polaroids that scroll from right to left. */
.nav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.nav__panel-inner { overflow: hidden; min-height: 0; }
.nav__panel-content { display: grid; justify-items: center; gap: 14px; padding: 6px 0 20px; opacity: 0; transition: opacity 0.35s; }
.polaroids {
  width: 100%; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.polaroids__track { display: flex; gap: 22px; width: max-content; padding: 14px 11px 18px; animation: marquee 45s linear infinite; }
.polaroids:hover .polaroids__track { animation-play-state: paused; }
.polaroid {
  flex: 0 0 auto; width: 108px; padding: 7px 7px 0; background: var(--cream); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.14), 0 10px 20px -10px rgba(17, 17, 17, 0.25);
  transform: rotate(var(--r, 0deg)); transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.polaroid:nth-child(4n + 1) { --r: -3deg; }
.polaroid:nth-child(4n + 2) { --r: 2.5deg; }
.polaroid:nth-child(4n + 3) { --r: -1.5deg; }
.polaroid:nth-child(4n) { --r: 3.5deg; }
.polaroid:hover, .polaroid:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.06); box-shadow: 0 4px 10px rgba(17, 17, 17, 0.16), 0 18px 28px -12px rgba(17, 17, 17, 0.35); }
.polaroid img { width: 100%; aspect-ratio: 94 / 82; object-fit: cover; border-radius: 1px; }
.polaroid span {
  display: grid; place-items: center; min-height: 34px; padding: 4px 0 6px;
  font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.1; letter-spacing: 0;
  text-align: center; color: var(--brown);
}
.nav__panel .btn { padding: 9px 18px; font-size: 14px; }
@media (min-width: 810px) and (hover: hover) {
  .nav:hover .nav__panel, .nav:focus-within .nav__panel { grid-template-rows: 1fr; }
  .nav:hover .nav__panel-content, .nav:focus-within .nav__panel-content { opacity: 1; transition-delay: 0.1s; }
  .nav:hover .nav__minis, .nav:focus-within .nav__minis { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .polaroids__track { animation: none; } }
.nav__name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.nav__links { display: flex; gap: 24px; font-size: var(--fs-body); letter-spacing: 0; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Little polaroids of the projects that scroll in the bar */
.nav__minis {
  flex: 1; max-width: 200px; overflow: hidden; transition: opacity 0.3s;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.nav__minis-track { display: flex; gap: 8px; width: max-content; padding: 6px 0; animation: marquee 22s linear infinite; }
.nav__minis:hover .nav__minis-track { animation-play-state: paused; }
.mini {
  display: block; width: 32px; padding: 2px 2px 6px; background: var(--cream); border-radius: 2px;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.18), 0 0 0 1px rgba(17, 17, 17, 0.07);
  transform: rotate(var(--r, 0deg)); transition: transform 0.3s var(--ease);
}
.mini:nth-child(odd) { --r: -4deg; }
.mini:nth-child(even) { --r: 5deg; }
.mini:nth-child(3n) { --r: -2deg; }
.mini:hover { transform: rotate(0deg) scale(1.25); }
.mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }

.nav__toggle { display: none; width: 36px; height: 36px; border-radius: 12px; background: var(--cream); place-items: center; }
/* Two lines that turn into a cross when the menu is open */
.nav__line { display: block; width: 16px; height: 1.5px; background: var(--brown); border-radius: 1px; transition: transform 0.3s var(--ease); }
.nav__line + .nav__line { margin-top: 5px; }
.nav.is-open .nav__line:nth-of-type(1) { transform: translateY(3.25px) rotate(45deg); }
.nav.is-open .nav__line:nth-of-type(2) { transform: translateY(-3.25px) rotate(-45deg); }
.nav__drawer {
  display: none; margin-top: 8px; padding: 20px 22px 24px;
  background: var(--cream-dark); border-radius: 26px;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
}
.nav__drawer ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; font-size: 22px; font-weight: 500; }
.nav__drawer .label { display: block; margin: 16px 0 8px; }

@media (max-width: 809px) {
  .nav__links, .nav__minis, .nav__panel { display: none; }
  .nav__toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .nav.is-open .nav__drawer { display: block; animation: drop 0.35s var(--ease); }
  .nav__bar { padding: 0 12px 0 20px; }
}

/* --------------------------------------------------------------------------
   Hero + bio (portrait stays in the middle while you scroll through both)
   -------------------------------------------------------------------------- */
.intro { position: relative; }
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(110px, 12vh, 140px);
}
.hero__title {
  position: relative; z-index: 4; pointer-events: none;
  font-family: var(--font-serif); font-weight: 400; color: var(--pink);
  font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.02em; text-align: center;
  max-width: 4.4em; margin-inline: auto;
}
.hero__title span { display: block; }

.portrait-track { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.portrait {
  position: sticky; top: calc(50svh - var(--ph) / 2 + 30px);
  --pw: clamp(220px, 28vw, 400px); --ph: calc(var(--pw) * 1.14);
  width: var(--pw); height: var(--ph); margin: calc(100svh - var(--ph) - 30px) auto 0;
  perspective: 1400px; pointer-events: auto;
}
.portrait__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.portrait__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); backface-visibility: hidden; box-shadow: 0 30px 60px -30px rgba(74, 15, 8, 0.4); }
.portrait__face--back { transform: rotateY(180deg); }
.portrait__btn { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); cursor: pointer; }
/* Tablet + desktop: the flip follows scrolling (site.js). Phone: tap to flip. */
@media (min-width: 810px) {
  .portrait__inner { transition: none; will-change: transform; }
  .portrait__btn { display: none; }
}
.portrait__inner.is-flipped { transform: rotateY(180deg); }

.bio { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(100px, 12vh, 140px) 110px; }
.bio__inner { display: grid; grid-template-columns: 1fr clamp(220px, 28vw, 400px) 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.bio__heading { margin-bottom: clamp(40px, 8vw, 100px); }
.bio__intro { font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; letter-spacing: -0.04em; max-width: 300px; }
.bio__text { text-align: right; max-width: 420px; justify-self: end; }

@media (max-width: 809px) {
  .hero { min-height: auto; padding-bottom: 40px; }
  .intro { display: flex; flex-direction: column; }
  .hero { order: 1; }
  .portrait-track { position: relative; inset: auto; order: 2; margin-top: -14vw; }
  .bio { order: 3; }
  .portrait { position: relative; top: auto; margin: 0 auto; --pw: min(70vw, 340px); }
  .bio { min-height: auto; padding-block: 60px 20px; }
  .bio__inner { grid-template-columns: 1fr; gap: 24px; }
  .bio__spacer { display: none; }
  .bio__text { text-align: left; justify-self: start; }
}

/* Hero doodles — phone + tablet positions */
.hf-1 { --size: clamp(70px, 10vw, 150px); --r: -18deg; left: 6%; top: 42%; }
.hf-2 { --size: clamp(60px, 9vw, 130px); --r: 12deg; left: 62%; top: 2%; }
.hf-3 { --size: clamp(56px, 8.5vw, 127px); --r: 30deg; right: 4%; top: 60%; }
.hf-4 { --size: clamp(40px, 5vw, 70px); --r: -8deg; left: 41%; top: 30%; color: var(--brown-50); }
.hs-1 { --size: 28px; left: 22%; bottom: 6%; }
.hs-2 { display: none; }
.hero__meta { display: none; }

/* Desktop hero, like the Framer site: two-line headline in the middle, a bottom row
   with ©year · small black & white photo · "/Creating since …". */
@media (min-width: 1200px) {
  .hero { align-items: center; padding-top: 0; }
  .hero__title { font-size: min(9.4vw, 18vh); max-width: 6em; margin-bottom: 10vh; }
  .hero__meta {
    position: absolute; left: 50%; bottom: 13vh; z-index: 4; transform: translateX(-50%);
    display: flex; justify-content: space-between; align-items: center;
  }
  .js .hero__meta[data-reveal] { transform: translate(-50%, 30px); }
  .js .hero__meta[data-reveal].is-visible { transform: translateX(-50%); }
  .hero__year { font-size: clamp(40px, 2.9vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
  .hero__since { font-size: clamp(18px, 1.25vw, 26px); text-transform: uppercase; letter-spacing: -0.02em; }

  /* The photo starts at half size, black & white; site.js grows it while scrolling. */
  .portrait__inner { transform-origin: 50% 100%; transform: scale(0.4); }
  .portrait__face { filter: grayscale(var(--gray, 1)); }

  .hf-1 { --size: 5.1vw; --r: 8deg; left: 91.7%; top: 7%; right: auto; color: var(--brown); }
  .hf-2 { --size: 3.7vw; --r: -6deg; left: 58.6%; top: 16.5%; color: rgba(74, 15, 8, 0.12); }
  .hf-3 { --size: 4.4vw; --r: -14deg; left: 26.6%; top: 44%; right: auto; color: rgba(74, 15, 8, 0.6); }
  .hf-4 { --size: 4vw; --r: 10deg; left: 69.6%; top: 56%; color: var(--brown); }
  .hs-1 { --size: 1.2vw; left: 31.8%; top: 53%; bottom: auto; }
  .hs-2 { display: block; --size: 1.2vw; left: 66.6%; top: 32%; }
}

/* --------------------------------------------------------------------------
   CV
   -------------------------------------------------------------------------- */
.cv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin: 40px 0 20px; }
.cv__role { font-size: var(--fs-lead); font-weight: 600; }
.cv__list { list-style: none; margin: 0; padding: 0; }
.cv__item { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 28px 0; border-top: 1px solid var(--brown-10); }
.cv__item:last-child { border-bottom: 1px solid var(--brown-10); }
.cv__detail { text-align: right; }
.cv__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.cv__place { margin-top: 6px; }
.cv__download { display: flex; justify-content: flex-end; margin-top: 28px; }
.cv__place a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .cv__item { grid-template-columns: 1fr; gap: 6px; }
  .cv__detail { text-align: left; }
}

/* Endless scrolling line */
.ticker { overflow: hidden; padding: 28px 0; }
.ticker__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.ticker__group { display: flex; align-items: center; gap: 0.6em; padding-right: 0.6em; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.ticker__star { font-size: 0.8em; }

/* --------------------------------------------------------------------------
   Featured projects carousel
   -------------------------------------------------------------------------- */
.featured__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; padding: 20px 0 30px; }
.carousel.is-jumping .carousel__track, .carousel.is-jumping .pcard { transition: none !important; }
/* All cards are as tall as the tallest one, so nothing jumps while browsing. */
.carousel__track { display: flex; align-items: stretch; gap: clamp(16px, 2.4vw, 30px); transition: transform 0.7s var(--ease); }
.pcard {
  flex: 0 0 clamp(260px, 30vw, 360px); position: relative; container-type: inline-size;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pink); border-radius: var(--radius); color: var(--wildberry);
  transform: scale(0.88); opacity: 0.7; transition: transform 0.7s var(--ease), opacity 0.7s var(--ease), box-shadow 0.7s;
}
.pcard.is-active { transform: scale(1); opacity: 1; box-shadow: 0 30px 60px -20px rgba(74, 15, 8, 0.35); }
/* Side cards show only the image (filling the card); the middle card shows the
   image on top (4:3) with the text below, which fades in. */
.pcard__spacer { height: 75cqw; flex-shrink: 0; }
.pcard__media {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 100%;
  background: var(--brown); overflow: hidden; transition: height 0.7s var(--ease);
}
.pcard.is-active .pcard__media { height: 75cqw; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__media .pcard__side-img { position: absolute; inset: 0; transition: opacity 0.5s, transform 0.8s var(--ease); }
.pcard.is-active .pcard__side-img { opacity: 0; }
.pcard__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.pcard.is-active .pcard__body { opacity: 1; visibility: visible; transition: opacity 0.5s 0.25s, visibility 0s; }
.pcard__body .pcard__foot { margin-top: auto; padding-top: 6px; }
.pcard__title { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.pcard__text { font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.pcard__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 6px; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard .btn { padding: 8px 14px; font-size: 13px; flex-shrink: 0; }
.carousel__btn {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--brown);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 8px 24px -6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s var(--ease);
}
.carousel__btn:hover { transform: translateY(-50%) scale(1.08); }
.carousel__btn svg { width: 14px; }
.carousel__btn--prev { left: 0; }
.carousel__btn--prev svg { transform: rotate(180deg); }
.carousel__btn--next { right: 0; }

/* --------------------------------------------------------------------------
   Testimonials (cards flip on hover / tap)
   -------------------------------------------------------------------------- */
.tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: clamp(32px, 5vw, 56px); }
.tcard { perspective: 1200px; height: 340px; }
.tcard__inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease); }
.tcard:hover .tcard__inner, .tcard:focus-within .tcard__inner, .tcard.is-flipped .tcard__inner { transform: rotateY(180deg); }
.tcard__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius); background: var(--brown); color: var(--cream); }
.tcard__front { display: grid; place-items: center; }
.tcard__front img { width: 80px; height: 80px; object-fit: contain; }
.tcard__back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: space-between; padding: 28px; }
.tcard__quote { font-size: var(--fs-body); line-height: 1.4; }
.tcard__role { opacity: 0.8; }
.tcard button { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { position: relative; }
.contact__grid { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact__text { margin-top: 20px; max-width: 420px; }
.socials { display: flex; gap: 10px; margin-top: 32px; }
.socials a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--white); color: var(--brown);
  box-shadow: 0 0.6px 1.6px -1.5px rgba(0, 0, 0, 0.17), 0 2.3px 6px -3px rgba(0, 0, 0, 0.14), 0 10px 26px -4.5px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s var(--ease);
}
.socials a:hover { transform: translateY(-3px) rotate(-6deg); }
.socials svg { width: 20px; height: 20px; }
.form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 28px); background: var(--pink); border-radius: var(--radius); color: var(--cream); }
.form label { display: grid; gap: 8px; font-size: var(--fs-small); }
.form input, .form textarea {
  width: 100%; font: inherit; font-size: var(--fs-small); color: var(--brown); letter-spacing: -0.02em;
  padding: 12px 14px; border: 0; border-radius: 10px; background: rgba(247, 244, 239, 0.35);
  transition: background-color 0.2s;
}
.form input::placeholder, .form textarea::placeholder { color: rgba(247, 244, 239, 0.9); }
.form input:focus, .form textarea:focus { outline: none; background: rgba(247, 244, 239, 0.6); }
.form textarea { min-height: 140px; resize: vertical; }
.form .btn { justify-content: center; width: 100%; border-radius: 10px; padding: 12px; background: var(--cream); color: var(--brown); }
.form .btn:disabled { opacity: 0.6; cursor: wait; }
.form__hp { position: absolute; left: -9999px; }
.form__msg { font-size: var(--fs-small); padding: 12px 14px; border-radius: 10px; background: var(--cream); color: var(--brown); }
.form__msg[hidden] { display: none; }
.form__error { font-size: 14px; color: var(--brown); }
@media (max-width: 809px) { .contact__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; overflow: hidden; background: var(--pink); color: var(--cream); padding-top: clamp(60px, 8vw, 100px); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.footer__tagline { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; max-width: 380px; }
.footer__title { font-size: var(--fs-h3); font-weight: 500; margin-bottom: 14px; }
.footer__chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 200px; }
.footer__chips a { font-size: 14px; letter-spacing: -0.01em; padding: 6px 12px; border-radius: 8px; background: var(--cream); color: var(--brown); transition: transform 0.3s var(--ease); }
.footer__chips a:hover { transform: translateY(-2px); }
.footer__mail:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The big name sits low and is cut off by the bottom edge, like on Framer. */
.footer__word {
  margin-top: clamp(60px, 9vw, 130px); margin-bottom: -0.4em;
  font-size: clamp(90px, 19.6vw, 282px); font-weight: 700; line-height: 0.9; letter-spacing: -0.02em;
  text-align: center; color: rgba(74, 15, 8, 0.1); user-select: none;
}
@media (min-width: 810px) and (max-width: 1199px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__tagline { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 809px) { .footer__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Projects overview
   -------------------------------------------------------------------------- */
.page-head { position: relative; padding-top: clamp(140px, 16vw, 200px); padding-bottom: clamp(40px, 6vw, 70px); }
.page-head .h1 { max-width: 9ch; }
/* Projects overview: on big screens it uses the full width (like Framer), cards keep
   a fixed height and simply get wider. */
.overview { position: relative; overflow: hidden; }
.overview .flower { z-index: 2; }
@media (min-width: 1200px) {
  .container--wide { width: calc(100% - 2 * clamp(40px, 5.35vw, 160px)); max-width: none; }
  .container--wide.page-head .h1 { max-width: none; }
  .container--wide .ocard { aspect-ratio: auto; height: 396px; }
}
.grid-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: var(--section-space); position: relative; z-index: 1; }
@media (max-width: 1099px) { .grid-projects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-projects { grid-template-columns: 1fr; gap: 20px; } }
.ocard { position: relative; display: block; aspect-ratio: 404 / 396; overflow: hidden; border-radius: var(--radius-lg); background: var(--wildberry); color: var(--paper); isolation: isolate; }
.ocard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s var(--ease); }
.ocard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(84, 84, 84, 0) 30%, rgba(0, 0, 0, 0.85) 100%); transition: opacity 0.5s; }
.ocard:hover img { transform: scale(1.06); }
.ocard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: grid; gap: 8px; }
.ocard__year { font-size: var(--fs-small); }
.ocard__title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.ocard__text { font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   Project detail
   -------------------------------------------------------------------------- */
.project { padding-top: clamp(120px, 12vw, 150px); }
.project .container { --container: 1160px; }
.back { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-lead); font-weight: 600; }
.back svg { width: 14px; transform: rotate(180deg); transition: transform 0.3s var(--ease); }
.back:hover svg { transform: rotate(180deg) translateX(4px); }
.project__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 48px; align-items: end; margin: 24px 0 40px; }
.project__title { font-size: clamp(40px, 5vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
/* Pulls the heading down by the space under its letters, so its last line sits on
   the same line as the lowest line of the details next to it. */
@media (min-width: 810px) { .project__title { margin-bottom: calc(5.2px - 0.1755em); } }
/* The details hug the right edge, so they line up with the right edge of the cover image. */
.project__meta { display: grid; grid-template-columns: repeat(2, auto); justify-self: end; gap: 24px 48px; }
.project__meta dd { max-width: 240px; }
@media (max-width: 809px) { .project__meta { justify-self: start; } }
.project__meta dd { margin: 6px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; }
/* Image crops match the Framer site at each screen size (desktop / tablet / phone).
   Images are cropped around their focal point, which can be set per image in the admin. */
.project { position: relative; overflow: hidden; }
.project__cover { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1160 / 892; }
.project__cover img { width: 100%; height: 100%; object-fit: cover; }
.project__section { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; padding: clamp(40px, 6vw, 60px) 0 0; }
.project__section .rich { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.03em; text-align: right; }
.gallery { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(60px, 8vw, 100px); }
.gallery--after { margin-top: clamp(60px, 8vw, 100px); }
.gallery__item { border-radius: var(--radius-sm); overflow: hidden; background: var(--cream-dark); aspect-ratio: 570 / 600; }
/* Every third image is wide; a single leftover image at the end is wide too. */
.gallery__item:nth-of-type(3n), .gallery__item:nth-of-type(3n + 1):last-of-type { grid-column: 1 / -1; aspect-ratio: 1160 / 800; }
.gallery__item:nth-of-type(3n + 2) { transition-delay: 0.1s; }
.gallery__item img, .gallery__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item a, .project__cover a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery__item img, .project__cover img { transition: transform 0.8s var(--ease); }
.gallery__item a:hover img, .project__cover a:hover img { transform: scale(1.02); }
.project .flower, .project .sparkle { z-index: 2; }
/* Results: big key figures */
.figures { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px 40px; margin: 0 0 24px; }
.figure { text-align: right; }
.figure__value { font-size: clamp(36px, 4vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.figure__label { margin: 6px 0 0; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--brown-50); }
@media (max-width: 809px) { .figures { justify-content: flex-start; } .figure { text-align: left; } }

/* Next project */
.next { padding-block: var(--section-space); }
.next__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.next__card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--wildberry); color: var(--paper); aspect-ratio: 3 / 2; isolation: isolate; }
.next__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s var(--ease); }
.next__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.75)); }
.next__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: clamp(20px, 3vw, 36px); }
.next__title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.next__arrow { flex-shrink: 0; width: 48px; height: 48px; border: 1.5px solid currentColor; border-radius: 12px; display: grid; place-items: center; transition: background-color 0.3s, color 0.3s; }
.next__arrow svg { width: 18px; transform: rotate(-45deg); transition: transform 0.35s var(--ease); }
.next__card:hover img { transform: scale(1.05); }
.next__card:hover .next__arrow { background: var(--paper); color: var(--wildberry); }
.next__card:hover .next__arrow svg { transform: rotate(0deg); }
@media (max-width: 809px) { .next__grid { grid-template-columns: 1fr; } .next__card { aspect-ratio: 4 / 3; } }

/* Lightbox: click a project image to see it full screen */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 64px 72px; background: rgba(32, 8, 4, 0.94); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.lightbox__stage { max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lightbox__stage img, .lightbox__stage video { max-width: min(1600px, calc(100vw - 144px)); max-height: calc(100svh - 128px); width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(247, 244, 239, 0.12); color: var(--cream); transition: background-color 0.2s; }
.lightbox button:hover { background: rgba(247, 244, 239, 0.25); }
.lightbox button svg { width: 16px; }
.lightbox__close { top: 16px; right: 16px; font-size: 26px; line-height: 1; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__prev svg { transform: rotate(180deg); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 14px; color: rgba(247, 244, 239, 0.7); letter-spacing: 0; }
@media (max-width: 640px) {
  .lightbox { padding: 56px 12px; }
  .lightbox__stage img, .lightbox__stage video { max-width: calc(100vw - 24px); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 10px; transform: none; }
}
body.lightbox-open { overflow: hidden; }
@media (max-width: 1199px) {
  .project__cover { aspect-ratio: 755 / 595; }
  .gallery__item { aspect-ratio: 367 / 500; }
  .gallery__item:nth-of-type(3n), .gallery__item:nth-of-type(3n + 1):last-of-type { aspect-ratio: 755 / 650; }
}
@media (max-width: 809px) {
  .project__head, .project__section { grid-template-columns: 1fr; }
  .project__section .rich { text-align: left; }
  .project__cover { aspect-ratio: 358 / 278; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item, .gallery__item:nth-of-type(n) { aspect-ratio: 358 / 305; grid-column: auto; }
}

/* 404 page */
.notfound { position: relative; overflow: hidden; min-height: 100svh; display: grid; place-items: center; padding: 120px var(--gutter) 80px; text-align: center; }
.notfound__inner { display: grid; justify-items: center; gap: 22px; max-width: 440px; margin-top: -6vh; }
.notfound__title { font-family: var(--font-serif); font-weight: 400; color: var(--pink); font-size: clamp(110px, 15vw, 200px); line-height: 0.9; letter-spacing: -0.02em; }
.notfound__text { font-size: 15px; line-height: 1.45; max-width: 330px; }
.notfound__back { font-size: 15px; margin-top: 18px; }
.notfound__back .arrow-box { width: 24px; height: 24px; border-radius: 6px; }
.nf-1 { --size: clamp(70px, 10vw, 130px); --r: 10deg; left: 82%; top: 12%; }
.nf-2 { --size: clamp(60px, 8vw, 100px); --r: -14deg; left: 1%; bottom: 3%; }
@media (max-width: 809px) {
  .notfound { min-height: 80svh; }
  .notfound__title { font-size: 72px; }
  .notfound__text { font-size: 14px; max-width: 300px; }
  .nf-1 { left: auto; right: -14px; top: 90px; --size: 40px; }
  .nf-2 { left: -14px; bottom: 12%; --size: 40px; }
}

/* Password lock screen (like the old Framer page) */
.lock { position: relative; overflow: hidden; min-height: 100svh; display: grid; place-items: center; padding: 120px var(--gutter) 60px; }
.lock__flower { --size: clamp(44px, 4vw, 58px); --r: 8deg; right: 1%; top: 80px; }
.lock__card {
  width: min(100%, 400px); display: grid; justify-items: center; gap: 20px;
  padding: 60px clamp(24px, 6vw, 64px) 56px; border-radius: 16px;
  background: rgba(74, 15, 8, 0.07); text-align: center;
}
.lock__title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: -0.01em; max-width: 250px; margin-bottom: 6px; }
.lock__input {
  width: 100%; height: 54px; padding: 0 14px; font: inherit; font-size: 16px; letter-spacing: 0; text-align: center; color: var(--brown);
  background: transparent; border: 1px solid rgba(74, 15, 8, 0.55); border-radius: 6px; transition: border-color 0.2s, background-color 0.2s;
}
.lock__input::placeholder { color: rgba(74, 15, 8, 0.55); }
.lock__input:focus { outline: none; border-color: var(--brown); background: rgba(247, 244, 239, 0.4); }
.lock__submit { width: 100%; height: 48px; border-radius: 6px; background: var(--pink); color: var(--cream); font-size: 16px; font-weight: 500; letter-spacing: 0; transition: background-color 0.2s, transform 0.2s; }
.lock__submit:hover { background: #bf98ac; }
.lock__submit:active { transform: scale(0.98); }
.lock__error { font-size: 14px; color: #a1281a; margin-top: -6px; }
.lock__contact { font-size: 16px; letter-spacing: 0; color: rgba(74, 15, 8, 0.55); text-decoration: underline; text-underline-offset: 3px; margin-top: 10px; }
.lock__contact:hover { color: var(--brown); }

/* Simple text pages (imprint, privacy) */
.prose { max-width: 720px; padding-bottom: var(--section-space); }
.prose h2 { font-size: var(--fs-h3); margin: 1.6em 0 0.6em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Elements fade/slide in when they scroll into view (only when JS runs) */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal="blur"] { filter: blur(10px); transform: translateY(20px); transition-property: opacity, transform, filter; }
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .nav__minis-track, .ticker__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Dark mode details (html.is-dark is set by a tiny script in the page head)
   -------------------------------------------------------------------------- */
html.is-dark .flower { color: var(--pink); }
html.is-dark .hf-2 { color: rgba(247, 244, 239, 0.14); }
html.is-dark .hf-3 { color: rgba(204, 170, 187, 0.75); }
html.is-dark .sparkle g { stroke: rgba(204, 170, 187, 0.75); }
html.is-dark .hs-1 g { stroke: rgba(247, 244, 239, 0.22); }
html.is-dark .grain { filter: invert(1); opacity: 0.05; }
html.is-dark .form input, html.is-dark .form textarea { background: rgba(31, 24, 29, 0.14); color: #1f181d; }
html.is-dark .form input::placeholder, html.is-dark .form textarea::placeholder { color: rgba(31, 24, 29, 0.55); }
html.is-dark .form input:focus, html.is-dark .form textarea:focus { background: rgba(31, 24, 29, 0.22); }
html.is-dark .tcard__face { background: var(--cream-dark); color: var(--paper); }
html.is-dark .footer { background: var(--pink); color: #1f181d; }
html.is-dark .footer__chips a { background: #1f181d; color: #f3ece4; }
html.is-dark .footer__word { color: rgba(31, 24, 29, 0.1); }
html.is-dark .lock__card { background: rgba(247, 244, 239, 0.07); }
html.is-dark .lock__input { border-color: rgba(247, 244, 239, 0.45); }
html.is-dark .lock__input::placeholder, html.is-dark .lock__contact { color: rgba(247, 244, 239, 0.6); }
html.is-dark .nav__box { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2); }

/* Sun / moon button in the navigation */
.theme-toggle {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; margin-left: -6px;
  border-radius: 12px; color: var(--brown); transition: background-color 0.2s, transform 0.4s var(--ease);
}
.theme-toggle:hover { background: var(--brown-10); }
.theme-toggle:active { transform: rotate(-30deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html.is-dark .theme-toggle .icon-sun { display: block; }
html.is-dark .theme-toggle .icon-moon { display: none; }
.nav__end { display: flex; align-items: center; gap: 14px; }
@media (max-width: 809px) { .nav__end { gap: 6px; } }