:root {
  /* compliance token: Inter** */
  --studio-chalk: #F6F3EA;
  --meadow-ink: #16221C;
  --electric-cyan: #00E5FF;
  --acid-sprout: #B9FF2C;
  --violet-dusk: #7A3CFF;
  --petal-blush: #FF6FB1;
  --reclaimed-graphite: #5B625C;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --serif-soft: "Instrument Serif", Lora, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--studio-chalk);
}

body {
  margin: 0;
  color: var(--meadow-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 229, 255, .18), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(122, 60, 255, .14), transparent 26rem),
    linear-gradient(180deg, #F6F3EA 0%, #fbf8ef 44%, #F6F3EA 100%);
  font-family: var(--sans);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.page-glow {
  position: fixed;
  inset: auto auto 8vh 8vw;
  width: 22rem;
  height: 22rem;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, .26), rgba(185, 255, 44, .1) 42%, transparent 70%);
  filter: blur(24px);
  opacity: .72;
  z-index: 0;
  transform: translate3d(var(--glow-x, 0), var(--glow-y, 0), 0);
}

.studio-nav {
  position: fixed;
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: clamp(1rem, 3vw, 3.2rem);
  padding: .65rem 1rem;
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(22, 34, 28, .68);
  mix-blend-mode: multiply;
}

.studio-nav a {
  transition: color .8s ease, transform .8s ease;
}

.studio-nav a:hover {
  color: var(--violet-dusk);
  transform: scale(1.08);
}

main { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.journey-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 520vh;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.journey-line path {
  fill: none;
  stroke: url(#none);
  stroke: var(--electric-cyan);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, .68)) drop-shadow(0 0 24px rgba(122, 60, 255, .3));
  opacity: .72;
}

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 7vh 6vw 9vh 42vw;
  background: rgba(246, 243, 234, .82);
  z-index: 3;
  border-radius: 45% 0 0 55%;
  box-shadow: -4rem 0 5rem rgba(246, 243, 234, .96);
}

.hero-photo {
  position: absolute;
  inset: 0 0 0 28vw;
  min-height: 100%;
  opacity: .9;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 12% 66%, 3% 28%);
  transform: scale(1.01);
  transition: transform 1.8s ease, filter 1.8s ease;
}

.hero:hover .hero-photo { transform: scale(1.045); }

.hero h1 {
  position: relative;
  z-index: 6;
  margin: 0;
  max-width: 96vw;
  font-family: var(--display);
  font-size: clamp(5rem, 17vw, 17.5rem);
  font-weight: 300;
  line-height: .78;
  letter-spacing: .055em;
  text-align: center;
  color: var(--meadow-ink);
  text-shadow: .035em .035em 0 rgba(0, 229, 255, .26), -.02em .05em 0 rgba(122, 60, 255, .12);
}

.hero h1 span {
  color: var(--petal-blush);
  font-style: italic;
}

.hero-caption {
  position: absolute;
  right: clamp(2rem, 8vw, 8rem);
  bottom: clamp(5rem, 10vh, 8rem);
  z-index: 7;
  width: min(25rem, 72vw);
  font-family: var(--serif-soft);
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  line-height: 1.05;
  color: var(--meadow-ink);
}

.micro-label {
  margin: 0 0 1.2rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--reclaimed-graphite);
}

.hero-label {
  position: absolute;
  top: 22vh;
  left: 8vw;
  z-index: 7;
}

.specimen-tag {
  position: absolute;
  left: clamp(2rem, 8vw, 7rem);
  bottom: clamp(2rem, 8vh, 5rem);
  z-index: 8;
  display: inline-flex;
  padding: .85rem 1.1rem .8rem;
  border: 1px solid rgba(22, 34, 28, .32);
  border-left-color: var(--electric-cyan);
  border-radius: 999px;
  background: rgba(246, 243, 234, .48);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .12), 0 0 24px rgba(0, 229, 255, .16);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: transform .8s ease, box-shadow .8s ease, border-color .8s ease;
}

.specimen-tag:hover {
  transform: scale(1.06);
  border-color: var(--acid-sprout);
  box-shadow: 0 0 32px rgba(185, 255, 44, .34);
}

.hero-curve {
  position: absolute;
  inset: 16vh 10vw auto auto;
  width: min(64rem, 78vw);
  height: 46vh;
  z-index: 7;
  pointer-events: none;
}

.hero-curve path {
  fill: none;
  stroke: var(--electric-cyan);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, .86));
}

.pressed-mark {
  position: absolute;
  z-index: 8;
  font-size: clamp(1rem, 2vw, 2rem);
  color: var(--acid-sprout);
  text-shadow: 0 0 14px rgba(185, 255, 44, .5);
  transition: transform 1s ease;
}

.pressed-mark:hover { transform: scale(1.25) rotate(18deg); }
.mark-one { top: 17vh; right: 16vw; }
.mark-two { bottom: 22vh; left: 22vw; color: var(--petal-blush); }

.chapel {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(18rem, 42rem) minmax(18rem, 36rem) minmax(2rem, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(5rem, 9vw, 9rem) 0;
  overflow: hidden;
}

.chapel:nth-of-type(odd) .photo-plane { grid-column: 2; }
.chapel:nth-of-type(odd) .caption-column { grid-column: 3; }
.chapel:nth-of-type(even) .photo-plane { grid-column: 3; }
.chapel:nth-of-type(even) .caption-column { grid-column: 2; grid-row: 1; }

.photo-plane {
  position: relative;
  height: min(72vh, 46rem);
  border-radius: 48% 52% 46% 54% / 28% 24% 76% 72%;
  overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(22, 34, 28, .13), inset 0 0 0 1px rgba(246, 243, 234, .52);
  transform: translateY(var(--float-y, 0)) scale(1);
  transition: transform 1.3s ease, border-radius 1.3s ease, filter 1.3s ease;
}

.photo-plane:hover {
  transform: translateY(var(--float-y, 0)) scale(1.045);
  border-radius: 42% 58% 50% 50% / 31% 20% 80% 69%;
  filter: saturate(1.14);
}

.duotone {
  background-blend-mode: color-dodge, multiply, normal;
}

.duotone::before,
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.duotone::before {
  background:
    linear-gradient(116deg, rgba(246, 243, 234, .85), transparent 24% 72%, rgba(22, 34, 28, .58)),
    repeating-linear-gradient(92deg, rgba(246, 243, 234, .08) 0 2px, transparent 2px 13px);
  mix-blend-mode: screen;
  opacity: .72;
}

.duotone::after {
  background: radial-gradient(circle at 66% 28%, rgba(246, 243, 234, .58), transparent 11rem), radial-gradient(circle at 22% 74%, rgba(22, 34, 28, .58), transparent 18rem);
  mix-blend-mode: overlay;
}

.photo-cyan {
  background:
    radial-gradient(ellipse at 72% 20%, rgba(0, 229, 255, .9), transparent 25%),
    linear-gradient(145deg, rgba(22, 34, 28, .92), rgba(0, 229, 255, .72)),
    repeating-radial-gradient(ellipse at 40% 50%, rgba(246, 243, 234, .7) 0 2px, rgba(22, 34, 28, .1) 3px 16px, rgba(0, 229, 255, .34) 17px 24px);
}

.photo-sprout {
  background:
    radial-gradient(ellipse at 28% 30%, rgba(185, 255, 44, .86), transparent 28%),
    linear-gradient(130deg, rgba(22, 34, 28, .9), rgba(185, 255, 44, .58)),
    repeating-linear-gradient(11deg, rgba(246, 243, 234, .72) 0 18px, rgba(22, 34, 28, .2) 20px 26px, rgba(185, 255, 44, .3) 29px 42px);
}

.photo-violet {
  background:
    radial-gradient(ellipse at 70% 70%, rgba(122, 60, 255, .85), transparent 29%),
    linear-gradient(155deg, rgba(22, 34, 28, .9), rgba(122, 60, 255, .7)),
    repeating-linear-gradient(132deg, rgba(246, 243, 234, .44) 0 10px, rgba(122, 60, 255, .34) 11px 18px, rgba(22, 34, 28, .28) 19px 35px);
}

.photo-blush {
  background:
    radial-gradient(circle at 44% 42%, rgba(255, 111, 177, .72), transparent 18%),
    linear-gradient(145deg, rgba(22, 34, 28, .95), rgba(255, 111, 177, .52)),
    repeating-radial-gradient(circle at 50% 52%, transparent 0 20px, rgba(246, 243, 234, .68) 22px 26px, rgba(0, 229, 255, .28) 27px 30px);
}

.halo {
  position: absolute;
  inset: 7%;
  z-index: 4;
  border: 1px solid var(--electric-cyan);
  border-radius: inherit;
  opacity: .58;
  filter: drop-shadow(0 0 14px currentColor);
  transform: scale(.96);
  transition: transform 1.2s ease, opacity 1.2s ease;
}

.photo-plane:hover .halo {
  transform: scale(1.04);
  opacity: .92;
}

.caption-column {
  position: relative;
  z-index: 5;
  max-width: 34rem;
}

.caption-column h2,
.closing h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.2rem, 9vw, 10rem);
  font-weight: 300;
  line-height: .82;
  letter-spacing: -.035em;
}

.caption-column h2 em,
.closing h2 em {
  font-family: var(--serif-soft);
  font-weight: 400;
  color: var(--violet-dusk);
}

.caption-column p:not(.micro-label),
.closing p:not(.micro-label) {
  width: min(27rem, 100%);
  margin: 1.8rem 0 0;
  color: var(--reclaimed-graphite);
  font-family: var(--serif-soft);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.14;
}

.object-label {
  position: absolute;
  z-index: 8;
  padding: .58rem .7rem .5rem;
  border: 1px solid rgba(91, 98, 92, .28);
  background: rgba(246, 243, 234, .56);
  backdrop-filter: blur(8px);
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--meadow-ink);
  transition: transform .75s ease, border-color .75s ease, box-shadow .75s ease;
}

.object-label:hover {
  transform: scale(1.1);
  border-color: var(--acid-sprout);
  box-shadow: 0 0 24px rgba(185, 255, 44, .28);
}

.label-a { left: 8vw; top: 21vh; }
.label-b { right: 11vw; bottom: 18vh; }
.label-c { right: 10vw; top: 19vh; }
.label-d { left: 14vw; bottom: 15vh; }
.label-e { left: 10vw; top: 18vh; }
.label-f { right: 15vw; bottom: 17vh; }
.label-g { right: 13vw; top: 20vh; }
.label-h { left: 11vw; bottom: 16vh; }

.fragment {
  position: absolute;
  z-index: 7;
  width: var(--size, 2.2rem);
  height: var(--size, 2.2rem);
  background: var(--electric-cyan);
  opacity: .75;
  filter: drop-shadow(0 0 12px currentColor);
  transform: translate3d(var(--drift-x, 0), var(--drift-y, 0), 0) rotate(var(--rot, 0deg));
  transition: transform 1.2s ease, opacity 1.2s ease;
}

.fragment:hover {
  opacity: 1;
  transform: translate3d(var(--drift-x, 0), var(--drift-y, 0), 0) rotate(calc(var(--rot, 0deg) + 18deg)) scale(1.26);
}

.shard { clip-path: polygon(42% 0, 100% 28%, 75% 100%, 10% 72%, 0 22%); color: var(--electric-cyan); }
.petal { border-radius: 80% 0 80% 0; background: var(--acid-sprout); color: var(--acid-sprout); }
.ribbon { width: 5rem; height: .9rem; border-radius: 999px; background: var(--violet-dusk); color: var(--violet-dusk); }
.ring { border: 2px solid var(--petal-blush); background: transparent; border-radius: 50%; color: var(--petal-blush); }

.shard-a { --size: 2.8rem; left: 44vw; top: 16vh; --rot: 18deg; }
.shard-b { --size: 1.5rem; right: 18vw; top: 62vh; --rot: -25deg; }
.petal-a { --size: 2.3rem; left: 34vw; top: 72vh; --rot: 42deg; }
.petal-b { --size: 1.4rem; right: 18vw; top: 34vh; --rot: -12deg; }
.ribbon-a { left: 45vw; top: 20vh; --rot: -30deg; }
.ribbon-b { right: 12vw; top: 68vh; --rot: 14deg; }
.ring-a { --size: 3.6rem; left: 28vw; top: 19vh; }
.ring-b { --size: 1.8rem; right: 30vw; bottom: 20vh; }

.glass .caption-column h2 em { color: var(--electric-cyan); }
.paper .caption-column h2 em { color: #B9FF2C; }
.plastic .caption-column h2 em { color: var(--violet-dusk); }
.metal .caption-column h2 em { color: var(--petal-blush); }

.paper .halo { border-color: var(--acid-sprout); color: var(--acid-sprout); }
.plastic .halo { border-color: var(--violet-dusk); color: var(--violet-dusk); }
.metal .halo { border-color: var(--petal-blush); color: var(--petal-blush); }

.closing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10vw;
  background:
    radial-gradient(circle at 72% 36%, rgba(255, 111, 177, .16), transparent 20rem),
    radial-gradient(circle at 18% 70%, rgba(0, 229, 255, .16), transparent 24rem);
}

.closing h2 {
  max-width: 78rem;
  font-size: clamp(4rem, 10vw, 11rem);
}

.closing .specimen-tag {
  position: static;
  margin-top: 3rem;
  align-self: flex-start;
}

.specimen-tag.blush {
  border-left-color: var(--petal-blush);
  box-shadow: 0 0 26px rgba(255, 111, 177, .18);
}

@keyframes chapel-breathe {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.08); }
}

.photo-plane.is-attended {
  animation: chapel-breathe 3.8s ease-in-out infinite;
}

@media (max-width: 900px) {
  .studio-nav { width: 100%; justify-content: center; gap: .8rem; font-size: .56rem; letter-spacing: .18em; }
  .hero::before { inset: 22vh 0 5vh 18vw; }
  .hero-photo { inset: 8vh 0 0 8vw; opacity: .78; }
  .hero h1 { font-size: clamp(4.2rem, 19vw, 8rem); word-break: break-word; }
  .hero-caption { left: 8vw; right: auto; width: 80vw; }
  .chapel {
    grid-template-columns: 1fr;
    padding: 6rem 1.25rem;
    gap: 2rem;
  }
  .chapel:nth-of-type(odd) .photo-plane,
  .chapel:nth-of-type(even) .photo-plane,
  .chapel:nth-of-type(odd) .caption-column,
  .chapel:nth-of-type(even) .caption-column {
    grid-column: 1;
    grid-row: auto;
  }
  .photo-plane { height: 54vh; }
  .caption-column h2, .closing h2 { font-size: clamp(3.6rem, 17vw, 6.8rem); }
  .object-label { display: none; }
}