@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&family=Zen+Loop:ital@0;1&display=swap');

:root {
  --sand: #f0e1ce;
  --ember: #93511d;
  --soil: #3d2a23;
  --char: #101010;
  --xfade-duration: 0.92s;
  --xfade-ease: ease-in-out;
  --leave-duration: 0.78s;
  --leave-ease: cubic-bezier(0.4, 0, 1, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-weight: 200;
  letter-spacing: -0.02em;
  background: var(--char);
  color: rgba(240, 225, 206, 0.88);
  overflow: hidden;
}

html.js-page-transition body.dune-page :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) {
  position: relative;
}

html.js-page-transition body.dune-page :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) > .page-motion-layer {
  filter: none;
  transform: none;
}

html.js-page-transition body.dune-page.page-ready :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) > .page-motion-layer {
  filter: none;
  transform: none;
}

html.js-page-transition body.dune-page.page-leaving :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) > .page-motion-layer {
  filter: none;
  transform: none;
}

html.js-page-transition body.dune-page.page-leaving.to-profile :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) > .page-motion-layer {
  filter: none;
  transform: none;
}

html.js-page-transition body.dune-page .scene-right .page-right-content {
  opacity: 0;
  filter: blur(8px) saturate(0.94) brightness(0.96);
  transform: scale(0.96);
  transform-origin: center center;
  will-change: opacity, filter, transform;
  transition:
    opacity var(--xfade-duration) var(--xfade-ease),
    filter 1.02s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.02s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-page-transition body.dune-page.page-ready .scene-right .page-right-content {
  opacity: 1;
  filter: blur(0) saturate(1) brightness(1);
  transform: scale(1);
}

html.js-page-transition body.dune-page.page-leaving .scene-right .page-right-content {
  opacity: 0;
  filter: blur(8px) saturate(0.94) brightness(0.96);
  transform: scale(0.96);
  transition-duration: var(--leave-duration);
  transition-timing-function: var(--leave-ease);
}

html.js-page-transition body.dune-page.page-leaving.to-profile .scene-right .page-right-content {
  filter: blur(6px) saturate(0.95) brightness(0.97);
  transform: scale(0.97);
}

html.js-page-transition body.dune-page :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .gradient-crossfade {
  opacity: 0;
  transition: opacity var(--xfade-duration) var(--xfade-ease);
}

html.js-page-transition body.dune-page.page-leaving :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .gradient-crossfade {
  opacity: 1;
  transition-duration: var(--leave-duration);
  transition-timing-function: var(--leave-ease);
}

html.js-page-transition body.dune-page :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  opacity: 0;
  transition: opacity var(--xfade-duration) var(--xfade-ease);
}

html.js-page-transition body.dune-page.page-leaving :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  opacity: 1;
  transition-duration: var(--leave-duration);
  transition-timing-function: var(--leave-ease);
}

html.js-page-transition body.dune-page.page-leaving.to-profile :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  opacity: 1;
}

html.js-page-transition body.dune-page.page-leaving {
  pointer-events: none;
}

.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;
}

.sr-only:focus {
  width: auto;
  height: auto;
  margin: 16px;
  clip: auto;
  padding: 8px 10px;
  background: rgba(16, 16, 16, 0.85);
  color: var(--sand);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 10px;
  z-index: 100;
}

/* Soft film grain to reproduce the screenshot atmosphere. */
body::before {
  content: '';
  position: fixed;
  inset: -100px;
  pointer-events: none;
  z-index: 50;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  transition: opacity 0.24s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dune-scene,
.profile-scene,
.retreats-scene,
.contacts-scene,
.artifacts-scene {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #100f08;
}

.page-motion-layer {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.gradient-crossfade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.dune-scene::before,
.profile-scene::before,
.retreats-scene::before,
.contacts-scene::before,
.artifacts-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 238, 219, 0.2) 0%, rgba(255, 238, 219, 0) 46%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.1) 0%, rgba(16, 16, 16, 0.36) 50%, rgba(16, 16, 16, 0.82) 100%),
    linear-gradient(180deg, #e6d6c5 0%, #c39264 22%, #7e4623 48%, #2f1b15 70%, #090808 86%, #020202 100%);
}

.dune-scene::after,
.profile-scene::after,
.retreats-scene::after,
.contacts-scene::after,
.artifacts-scene::after {
  content: '';
  position: absolute;
  inset: -120px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.56;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.38' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.profile-scene::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(235, 224, 252, 0.22) 0%, rgba(235, 224, 252, 0) 46%),
    linear-gradient(180deg, rgba(24, 18, 36, 0.12) 0%, rgba(24, 18, 36, 0.42) 52%, rgba(9, 7, 14, 0.84) 100%),
    linear-gradient(180deg, #d7cee6 0%, #ad97c9 22%, #6e569d 46%, #453667 68%, #221834 86%, #06040a 100%);
}

/* Sahara retreats page: muted rose-gray dominant palette. */
.retreats-scene::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(243, 226, 233, 0.22) 0%, rgba(243, 226, 233, 0) 46%),
    linear-gradient(180deg, rgba(33, 26, 33, 0.12) 0%, rgba(33, 26, 33, 0.44) 52%, rgba(11, 9, 12, 0.84) 100%),
    linear-gradient(180deg, #e7d6dc 0%, #d4b9c4 24%, #dbb5c2 48%, #8d6d7b 70%, #2a2228 88%, #060507 100%);
}

/* Contacts page: light blue dominant palette. */
.contacts-scene::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(210, 235, 248, 0.22) 0%, rgba(210, 235, 248, 0) 46%),
    linear-gradient(180deg, rgba(10, 18, 26, 0.12) 0%, rgba(10, 18, 26, 0.44) 52%, rgba(4, 9, 14, 0.84) 100%),
    linear-gradient(180deg, #d8ecf5 0%, #aad2e8 22%, #8fc3e0 46%, #4a7fa3 68%, #1a2e3d 86%, #040a0f 100%);
}

/* Artifacts archive page: #c4b897 dominant palette. */
.artifacts-scene::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(210, 200, 160, 0.22) 0%, rgba(210, 200, 160, 0) 46%),
    linear-gradient(180deg, rgba(30, 27, 16, 0.12) 0%, rgba(30, 27, 16, 0.44) 52%, rgba(18, 16, 8, 0.84) 100%),
    linear-gradient(180deg, #ece6d4 0%, #c8bc97 22%, #a89c78 46%, #756a48 68%, #302c1c 86%, #100f08 100%);
}

body.dune-page.to-home :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .gradient-crossfade {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 238, 219, 0.2) 0%, rgba(255, 238, 219, 0) 46%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.1) 0%, rgba(16, 16, 16, 0.36) 50%, rgba(16, 16, 16, 0.82) 100%),
    linear-gradient(180deg, #e6d6c5 0%, #c39264 22%, #7e4623 48%, #2f1b15 70%, #090808 86%, #020202 100%);
}

body.dune-page.to-home :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 238, 219, 0.13) 0%, rgba(255, 238, 219, 0) 48%),
    linear-gradient(180deg, rgba(230, 214, 197, 0.2) 0%, rgba(195, 146, 100, 0.24) 24%, rgba(126, 70, 35, 0.34) 48%, rgba(47, 27, 21, 0.56) 72%, rgba(16, 16, 16, 0.88) 88%, #0d0d0d 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
}

body.dune-page.to-profile :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .gradient-crossfade {
  background:
    radial-gradient(circle at 50% 16%, rgba(235, 224, 252, 0.22) 0%, rgba(235, 224, 252, 0) 46%),
    linear-gradient(180deg, rgba(24, 18, 36, 0.12) 0%, rgba(24, 18, 36, 0.42) 52%, rgba(9, 7, 14, 0.84) 100%),
    linear-gradient(180deg, #d7cee6 0%, #ad97c9 22%, #6e569d 46%, #453667 68%, #221834 86%, #06040a 100%);
}

body.dune-page.to-profile :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  background:
    radial-gradient(circle at 50% 14%, rgba(235, 224, 252, 0.16) 0%, rgba(235, 224, 252, 0) 48%),
    linear-gradient(180deg, rgba(214, 201, 236, 0.24) 0%, rgba(167, 147, 203, 0.3) 24%, rgba(110, 86, 157, 0.42) 48%, rgba(69, 54, 103, 0.62) 72%, rgba(17, 13, 27, 0.9) 88%, #090711 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
}

body.dune-page.to-retreats :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .gradient-crossfade {
  background:
    radial-gradient(circle at 50% 16%, rgba(243, 226, 233, 0.22) 0%, rgba(243, 226, 233, 0) 46%),
    linear-gradient(180deg, rgba(33, 26, 33, 0.12) 0%, rgba(33, 26, 33, 0.44) 52%, rgba(11, 9, 12, 0.84) 100%),
    linear-gradient(180deg, #e7d6dc 0%, #d4b9c4 24%, #dbb5c2 48%, #8d6d7b 70%, #2a2228 88%, #060507 100%);
}

body.dune-page.to-retreats :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  background:
    radial-gradient(circle at 50% 14%, rgba(243, 226, 233, 0.16) 0%, rgba(243, 226, 233, 0) 48%),
    linear-gradient(180deg, rgba(231, 214, 220, 0.24) 0%, rgba(212, 185, 196, 0.3) 24%, rgba(219, 181, 194, 0.42) 48%, rgba(141, 109, 123, 0.62) 72%, rgba(30, 24, 29, 0.9) 88%, #08070a 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
}

body.dune-page.to-contacts :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .gradient-crossfade {
  background:
    radial-gradient(circle at 50% 16%, rgba(210, 235, 248, 0.22) 0%, rgba(210, 235, 248, 0) 46%),
    linear-gradient(180deg, rgba(10, 18, 26, 0.12) 0%, rgba(10, 18, 26, 0.44) 52%, rgba(4, 9, 14, 0.84) 100%),
    linear-gradient(180deg, #d8ecf5 0%, #aad2e8 22%, #8fc3e0 46%, #4a7fa3 68%, #1a2e3d 86%, #040a0f 100%);
}

body.dune-page.to-contacts :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  background:
    radial-gradient(circle at 50% 14%, rgba(210, 235, 248, 0.16) 0%, rgba(210, 235, 248, 0) 48%),
    linear-gradient(180deg, rgba(216, 236, 245, 0.24) 0%, rgba(170, 210, 232, 0.3) 24%, rgba(143, 195, 224, 0.42) 48%, rgba(74, 127, 163, 0.62) 72%, rgba(26, 46, 61, 0.9) 88%, #030609 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
}

body.dune-page.to-artifacts :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .gradient-crossfade {
  background:
    radial-gradient(circle at 50% 16%, rgba(210, 200, 160, 0.22) 0%, rgba(210, 200, 160, 0) 46%),
    linear-gradient(180deg, rgba(30, 27, 16, 0.12) 0%, rgba(30, 27, 16, 0.44) 52%, rgba(18, 16, 8, 0.84) 100%),
    linear-gradient(180deg, #ece6d4 0%, #c8bc97 22%, #a89c78 46%, #756a48 68%, #302c1c 86%, #100f08 100%);
}

body.dune-page.to-artifacts :is(.dune-scene, .profile-scene, .retreats-scene, .contacts-scene, .artifacts-scene) .scene-left .left-photo-crossfade {
  background:
    radial-gradient(circle at 50% 14%, rgba(210, 200, 160, 0.16) 0%, rgba(210, 200, 160, 0) 48%),
    linear-gradient(180deg, rgba(236, 230, 212, 0.24) 0%, rgba(200, 188, 151, 0.3) 24%, rgba(168, 156, 120, 0.42) 48%, rgba(117, 106, 72, 0.62) 72%, rgba(48, 44, 28, 0.9) 88%, #100f08 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
}

.scene-half {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.scene-left {
  isolation: isolate;
  background: transparent;
  overflow: visible;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.left-photo-crossfade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 0;
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.scene-left::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 238, 219, 0.13) 0%, rgba(255, 238, 219, 0) 48%),
    linear-gradient(180deg, rgba(230, 214, 197, 0.2) 0%, rgba(195, 146, 100, 0.24) 24%, rgba(126, 70, 35, 0.34) 48%, rgba(47, 27, 21, 0.56) 72%, rgba(16, 16, 16, 0.88) 88%, #0d0d0d 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.48);
  transition: box-shadow 0.3s ease;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Profile page: align left photo tones with the violet right gradient. */
.profile-scene .scene-left::before {
  background:
    radial-gradient(circle at 50% 14%, rgba(235, 224, 252, 0.16) 0%, rgba(235, 224, 252, 0) 48%),
    linear-gradient(180deg, rgba(214, 201, 236, 0.24) 0%, rgba(167, 147, 203, 0.3) 24%, rgba(110, 86, 157, 0.42) 48%, rgba(69, 54, 103, 0.62) 72%, rgba(17, 13, 27, 0.9) 88%, #090711 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.48);
}

.retreats-scene .scene-left::before {
  background:
    radial-gradient(circle at 50% 14%, rgba(243, 226, 233, 0.16) 0%, rgba(243, 226, 233, 0) 48%),
    linear-gradient(180deg, rgba(231, 214, 220, 0.24) 0%, rgba(212, 185, 196, 0.3) 24%, rgba(219, 181, 194, 0.42) 48%, rgba(141, 109, 123, 0.62) 72%, rgba(30, 24, 29, 0.9) 88%, #08070a 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.48);
}

.contacts-scene .scene-left::before {
  background:
    radial-gradient(circle at 50% 14%, rgba(210, 235, 248, 0.16) 0%, rgba(210, 235, 248, 0) 48%),
    linear-gradient(180deg, rgba(216, 236, 245, 0.24) 0%, rgba(170, 210, 232, 0.3) 24%, rgba(143, 195, 224, 0.42) 48%, rgba(74, 127, 163, 0.62) 72%, rgba(26, 46, 61, 0.9) 88%, #030609 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat;
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.48);
}

.artifacts-scene .scene-left::before {
  background:
    radial-gradient(circle at 50% 14%, rgba(210, 200, 160, 0.16) 0%, rgba(210, 200, 160, 0) 48%),
    linear-gradient(180deg, rgba(236, 230, 212, 0.24) 0%, rgba(200, 188, 151, 0.3) 24%, rgba(168, 156, 120, 0.42) 48%, rgba(117, 106, 72, 0.62) 72%, rgba(48, 44, 28, 0.9) 88%, #100f08 100%),
    url('../images/digitaldunes.png') center center / cover no-repeat !important;
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.48) !important;
}

.dune-ridge,
.dune-texture {
  display: none;
}

.dune-ridge {
  background:
    radial-gradient(125% 90% at 37% 5%, rgba(203, 133, 72, 0.68) 0%, rgba(89, 54, 31, 0.92) 23%, rgba(22, 14, 11, 0.98) 58%, #060505 100%);
  filter: contrast(1.05) saturate(0.9);
}

.dune-texture {
  background: repeating-linear-gradient(
    -8deg,
    rgba(0, 0, 0, 0.72) 0px,
    rgba(0, 0, 0, 0.72) 1px,
    rgba(173, 105, 48, 0.36) 1px,
    rgba(173, 105, 48, 0.36) 3px,
    rgba(0, 0, 0, 0.75) 3px,
    rgba(0, 0, 0, 0.75) 5px
  );
  opacity: 0.58;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(125% 90% at 37% 5%, transparent 0%, rgba(0, 0, 0, 0) 14%, #000 36%, #000 100%);
  mask-image: radial-gradient(125% 90% at 37% 5%, transparent 0%, rgba(0, 0, 0, 0) 14%, #000 36%, #000 100%);
}

.scene-right {
  background: transparent;
  isolation: isolate;
}

.scene-right > .page-right-content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.scene-right::before {
  display: none;
}

/* Heavy film grain on the left photo card. */
.scene-left::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.56;
  mix-blend-mode: soft-light;
  transition: opacity var(--xfade-duration) var(--xfade-ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.38' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Heavy film grain on the right panel. */
.scene-right::after {
  display: none;
}

.scene-signature,
.scene-left-profile,
.scene-left-name,
.scene-quote,
.scene-meta,
.scene-link,
.profile-card {
  position: absolute;
  z-index: 2;
}

.scene-quote {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(76%, 560px);
  margin: 0;
  text-align: center;
  font-family: 'Zen Loop', cursive;
  font-size: clamp(16px, 1.55vw, 22px);
  font-weight: 400;
  line-height: 1.24;
  color: rgba(245, 235, 220, 0.84);
  text-wrap: balance;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}


.scene-signature {
  left: 19%;
  top: 30%;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 200;
  font-style: italic;
  color: rgba(244, 232, 216, 0.78);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 6px rgba(16, 16, 16, 0.35);
}

.scene-left-profile {
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  width: min(84%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.scene-left-avatar {
  width: clamp(78px, 8vw, 112px);
  height: clamp(78px, 8vw, 112px);
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(246, 236, 224, 0.46);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.scene-left-tagline {
  font-size: clamp(9px, 0.95vw, 12px);
  font-weight: 200;
  line-height: 1.5;
  color: rgba(242, 229, 212, 0.9);
}

.scene-left-name {
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(242, 229, 212, 0.96);
}

.scene-left-name-link {
  text-decoration: none;
}

.scene-left-name-link:hover {
  color: rgba(255, 245, 233, 1);
}

.scene-meta {
  left: 50%;
  right: 0;
  bottom: 12%;
  display: flex;
  justify-content: center;
}

.scene-meta ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 0;
}

.scene-meta li {
  font-size: clamp(10px, 0.875vw, 11.25px);
  letter-spacing: -0.02em;
  color: rgba(240, 225, 206, 0.82);
  font-weight: 200;
}

.scene-meta a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: rgba(246, 236, 224, 0.96);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.menu-ar {
  font-size: 0.78em;
  font-weight: 200;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(246, 236, 224, 0.52);
  line-height: 1;
  direction: rtl;
  font-family: inherit;
}

.scene-meta a.is-active {
  opacity: 1;
}

.scene-meta a:hover {
  color: rgba(255, 245, 233, 1);
  opacity: 1;
}

.profile-right {
  overflow: hidden;
}

.profile-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(76%, 680px);
  padding: 4px 0;
}

.profile-content-kicker {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(240, 225, 206, 0.72);
}

.profile-content h2 {
  margin-top: 8px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 200;
  line-height: 1.32;
  color: rgba(246, 236, 224, 0.96);
}

.profile-core {
  margin-top: 14px;
}

.profile-core ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.profile-core li {
  font-size: clamp(11px, 0.88vw, 13px);
  line-height: 1.7;
  color: rgba(246, 236, 224, 0.84);
}

.retreats-right {
  overflow: hidden;
}

.contacts-right {
  overflow: hidden;
}

.artifacts-right {
  overflow: hidden;
}


.retreats-download {
  margin-top: 30px;
}

.retreats-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(240, 225, 206, 0.2);
}

.retreats-download-title {
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 300;
  color: rgba(246, 236, 224, 0.96);
}

.retreats-download-note {
  margin-top: 8px;
  font-size: clamp(11px, 0.88vw, 13px);
  line-height: 1.65;
  color: rgba(246, 236, 224, 0.82);
}

.profile-portfolio {
  margin-top: 30px;
  padding-top: 0;
}

.profile-content-kicker--portfolio {
  margin-bottom: 4px;
}

.portfolio-item {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid rgba(240, 225, 206, 0.2);
  transition: border-color 0.28s ease;
}

.portfolio-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.portfolio-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 300;
  color: rgba(246, 236, 224, 0.96);
}

.portfolio-item summary::-webkit-details-marker {
  display: none;
}

.portfolio-icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(246, 236, 224, 0.88);
  text-decoration: none;
  opacity: 1;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.portfolio-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio-icon:hover {
  color: rgba(255, 245, 233, 1);
  opacity: 1;
}

.portfolio-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.portfolio-toggle {
  position: relative;
  width: 11px;
  height: 11px;
  display: inline-block;
}

.portfolio-toggle::before,
.portfolio-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 1px;
  background: rgba(246, 236, 224, 0.9);
  transform: translateY(-50%);
}

.portfolio-toggle::after {
  transform: translateY(-50%) rotate(90deg);
  transition: opacity 0.2s ease;
}

.portfolio-item[open] .portfolio-toggle::after {
  opacity: 0;
}

.portfolio-item[open] {
  border-bottom-color: rgba(240, 225, 206, 0.34);
}

.portfolio-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: height 0.34s ease, opacity 0.28s ease, transform 0.28s ease;
}

.portfolio-panel p {
  margin-top: 8px;
  font-size: clamp(11px, 0.88vw, 13px);
  line-height: 1.65;
  color: rgba(246, 236, 224, 0.84);
}

.portfolio-item[open] .portfolio-panel {
  opacity: 1;
  transform: translateY(0);
}

.scene-link {
  right: 10%;
  top: 8%;
  color: rgba(240, 225, 206, 0.63);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(240, 225, 206, 0.3);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.scene-link:hover {
  color: rgba(240, 225, 206, 0.95);
  border-color: rgba(240, 225, 206, 0.78);
}

.scene-link--back {
  top: 6%;
}

.dune-page--profile .scene-signature,
.dune-page--profile .scene-meta {
  display: none;
}

.profile-card {
  left: 12%;
  right: 12%;
  bottom: 9%;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(240, 225, 206, 0.22);
  background: rgba(16, 16, 16, 0.36);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.profile-kicker {
  font-size: 10px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(240, 225, 206, 0.66);
}

.profile-card h1 {
  font-size: clamp(24px, 2.3vw, 34px);
  margin-top: 8px;
  margin-bottom: 12px;
  font-weight: 300;
  color: rgba(246, 236, 224, 0.95);
}

.profile-card p {
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.8;
  color: rgba(240, 225, 206, 0.84);
}

.profile-list {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.profile-list li {
  font-size: clamp(11px, 0.88vw, 13px);
  letter-spacing: -0.02em;
  color: rgba(240, 225, 206, 0.8);
  padding-left: 14px;
  position: relative;
}

.profile-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(240, 225, 206, 0.72);
}

@media (max-width: 900px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .dune-scene,
  .profile-scene,
  .retreats-scene,
  .contacts-scene,
  .artifacts-scene {
    min-height: 100vh;
  }

  /* Single column: content, menu, photo strip */
  .page-motion-layer {
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
  }

  /* Content on top row */
  .scene-right {
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Menu between content and photo strip */
  .scene-meta {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: 0 0 20px;
    padding: 12px 7%;
    box-sizing: border-box;
    z-index: 10;
  }

  .profile-right,
  .retreats-right,
  .contacts-right,
  .artifacts-right {
    overflow-y: auto;
  }

  /* Photo strip on bottom row */
  .scene-left {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 5% 24px;
    box-sizing: border-box;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.45);
  }

  /* Photo panel: column — avatar, tagline stacked */
  .scene-left-profile {
    position: static;
    transform: none;
    width: auto;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .scene-left-avatar {
    width: clamp(72px, 18vw, 110px);
    height: clamp(72px, 18vw, 110px);
    flex-shrink: 0;
  }

  .scene-left-tagline {
    font-size: clamp(10px, 2vw, 13px);
    text-align: center;
    max-width: 360px;
  }

  .scene-left-name {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    font-size: clamp(11px, 2.2vw, 14px);
    white-space: nowrap;
    margin-left: 0;
    padding-left: 0;
    text-align: center;
  }

  .scene-signature {
    display: none;
  }

  /* Right content: natural flow */
  .scene-right > .page-right-content {
    position: relative;
    inset: auto;
    min-height: auto;
  }

  .profile-content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 86%;
    max-height: none;
    margin: 4vw auto 0;
    padding-bottom: 0;
  }

  .profile-content h2 {
    font-size: clamp(18px, 3.2vw, 26px);
  }

  .scene-meta ul {
    gap: 10px 20px;
    justify-content: center;
  }

  .scene-meta li {
    font-size: clamp(9px, 1.4vw, 11px);
  }

  /* Home quote */
  .scene-quote {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 86%;
    margin: 0 auto;
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
  }

.scene-link {
    right: 6%;
    font-size: 9px;
  }

  .profile-card {
    left: 6%;
    right: 6%;
    bottom: 8%;
  }
}

@media (max-width: 560px) {
  .page-motion-layer {
    grid-template-rows: 1fr auto;
  }

  .scene-left-avatar {
    width: clamp(64px, 18vw, 90px);
    height: clamp(64px, 18vw, 90px);
  }

  .scene-left-tagline {
    font-size: clamp(9px, 2.4vw, 12px);
    max-width: 320px;
  }

  .scene-left-name {
    font-size: clamp(10px, 2.4vw, 13px);
  }

  .profile-content {
    width: 90%;
    margin-top: 4vw;
  }

  .profile-content h2 {
    font-size: clamp(16px, 4vw, 22px);
  }

  .scene-meta {
    width: 90%;
  }

  .scene-meta ul {
    gap: 8px 14px;
  }

  .scene-meta li {
    font-size: clamp(8px, 2vw, 10px);
  }

  .scene-quote {
    width: 90%;
    margin-top: 0;
    font-size: clamp(14px, 3.6vw, 18px);
  }
}