:root {
  --charcoal: #171411;
  --umber: #463225;
  --moss: #6F8A63;
  --violet: #A890FF;
  --boreal: #6EE7B7;
  --peach: #F2C6A0;
  --paper: #EFE8D8;
  --deep-green: #263223;
  --aurora-x: 25%;
  --aurora-y: 20%;
  --leaf-drift: 0px;
  --breath-weight: 420;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background: var(--charcoal);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at var(--aurora-x) var(--aurora-y), #A890FF55, transparent 34%),
    radial-gradient(circle at 80% 35%, #6EE7B744, transparent 38%),
    linear-gradient(135deg, #171411 0%, #263223 48%, #171411 100%);
  filter: saturate(120%);
  z-index: -4;
  animation: aurora 18s ease-in-out infinite alternate;
}

.weather {
  position: fixed;
  inset: -15%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 24%, #F2C6A018, transparent 34%),
    radial-gradient(ellipse at 72% 18%, #A890FF20, transparent 38%),
    radial-gradient(ellipse at 58% 82%, #6EE7B71C, transparent 42%);
  mix-blend-mode: screen;
  opacity: .88;
  z-index: -3;
  animation: weather 34s cubic-bezier(.45,0,.2,1) infinite alternate;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 30%, #EFE8D818 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 60%, #46322544 0 1px, transparent 1.6px),
    linear-gradient(90deg, transparent, #EFE8D806, transparent);
  background-size: 23px 29px, 31px 37px, 7px 100%;
}

.cursor-fog {
  position: fixed;
  width: 38vw;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
  background: radial-gradient(circle, #6EE7B71F, #A890FF12 38%, transparent 68%);
  filter: blur(26px);
  opacity: .55;
  z-index: 2;
}

.coordinates {
  position: fixed;
  top: 1.2rem;
  left: 1.3rem;
  right: 1.3rem;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.coordinates a,
.artifact-link {
  color: #EFE8D8BB;
  text-decoration: none;
  border: 1px solid #6F8A6355;
  border-radius: 999px;
  padding: .55rem .8rem;
  background: #17141155;
  backdrop-filter: blur(10px);
  transition: color 900ms ease, border-color 900ms ease, box-shadow 900ms ease;
}

.coordinates a:hover,
.artifact-link:hover {
  color: var(--peach);
  border-color: #A890FF88;
  box-shadow: 0 0 34px #A890FF22;
}

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 5vw, 5rem);
  isolation: isolate;
}

.hero {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.wordmark,
h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  font-weight: var(--breath-weight);
  line-height: .82;
  letter-spacing: -.08em;
  color: var(--paper);
  text-shadow: 0 0 55px #A890FF1F, 0 18px 80px #000000AA;
}

.wordmark {
  font-size: clamp(5rem, 18vw, 18rem);
  width: min-content;
  max-width: 98vw;
  z-index: 3;
  transform: translateY(calc(var(--leaf-drift) * -.08));
}

h2 {
  font-size: clamp(5rem, 18vw, 18rem);
  max-width: 9ch;
}

.micro-label,
.chapter-number,
.eyebrow,
.section-note,
figcaption,
.tag,
.scroll-stamp {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #EFE8D8A8;
}

.hero-label {
  position: absolute;
  top: 18vh;
  right: 11vw;
  z-index: 5;
}

.hero-poem {
  position: absolute;
  left: 8vw;
  bottom: 13vh;
  max-width: 23rem;
  z-index: 4;
}

.poem {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(1.45rem, 2.7vw, 3rem);
  line-height: 1.05;
  color: var(--peach);
}

.scroll-stamp {
  position: absolute;
  right: 7vw;
  bottom: 8vh;
  color: var(--moss);
}

.drift-photo {
  position: absolute;
  width: clamp(18rem, 34vw, 36rem);
  aspect-ratio: .78;
  margin: 0;
  right: 8vw;
  top: 22vh;
  z-index: 1;
  transform: translate3d(0, calc(var(--leaf-drift) * .22), 0) rotate(-5deg);
}

.photo-image,
.photo-mask {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: contrast(1.06) saturate(.85) brightness(.72);
  box-shadow: inset 0 0 70px #171411, 0 42px 100px #00000099, 0 0 90px #6EE7B71A;
}

.hero-photo .photo-image {
  clip-path: polygon(12% 4%, 78% 0%, 96% 22%, 88% 75%, 57% 100%, 13% 88%, 0% 42%);
}

.photo-charcoal { background-image: linear-gradient(#17141122, #17141188), url("https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?auto=format&fit=crop&w=1200&q=80"); }
.photo-leaf { background-image: linear-gradient(115deg, #17141111, #46322588), url("https://images.unsplash.com/photo-1501004318641-b39e6451bec6?auto=format&fit=crop&w=1200&q=80"); }
.photo-condensation { background-image: linear-gradient(40deg, #17141155, #6EE7B711), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"); }
.photo-ceramic { background-image: linear-gradient(#17141133, #171411AA), url("https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&w=1200&q=80"); }

figcaption {
  margin-top: .7rem;
  color: #F2C6A0AA;
}

.leaf-shadow {
  position: absolute;
  width: 36vw;
  height: 24vw;
  min-width: 18rem;
  border-radius: 2% 100% 8% 95%;
  background: radial-gradient(ellipse at center, #6F8A6330, transparent 65%);
  filter: blur(8px);
  opacity: .55;
  transform: translateY(calc(var(--leaf-drift) * .15)) rotate(-24deg);
}

.leaf-shadow-one { left: -8vw; top: 14vh; }
.leaf-shadow-two { right: -12vw; bottom: 3vh; rotate: 135deg; }

.chamber {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 36rem);
  align-items: center;
  gap: 4vw;
}

.chapter-number {
  position: absolute;
  top: 5rem;
  left: clamp(1.2rem, 5vw, 5rem);
  color: var(--moss);
}

.object-wrap {
  position: relative;
  width: min(36rem, 86vw);
  aspect-ratio: .82;
  grid-column: 1;
  grid-row: 1;
  transform: rotate(-3deg);
}

.photo-mask {
  clip-path: polygon(6% 18%, 30% 3%, 72% 8%, 95% 30%, 88% 82%, 49% 99%, 10% 78%);
  border: 1px solid #F2C6A022;
}

.specimen-pin {
  position: absolute;
  right: -1rem;
  top: 9%;
  padding: .45rem .65rem;
  color: var(--peach);
  background: #463225CC;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 1.1rem;
  rotate: 7deg;
}

.vellum-panel {
  grid-column: 2;
  max-width: 33rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  color: #EFE8D8DD;
  line-height: 1.85;
  background: linear-gradient(135deg, #EFE8D812, #F2C6A008);
  border: 1px solid #F2C6A026;
  border-radius: 42% 11% 36% 14% / 8% 40% 12% 34%;
  box-shadow: 0 36px 100px #00000077;
  backdrop-filter: blur(18px);
}

.eyebrow { color: var(--boreal); }

.crack-lines {
  position: absolute;
  inset: auto 3vw 6vh auto;
  width: 28rem;
  max-width: 60vw;
  opacity: .48;
  fill: none;
  stroke: #6F8A63;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 16px #6EE7B733);
}

.breath-chamber {
  grid-template-columns: 18rem 1fr;
}

.vertical-caption {
  writing-mode: vertical-rl;
  display: flex;
  gap: 2rem;
  color: #EFE8D888;
  letter-spacing: .14em;
  line-height: 1.8;
}

.ring-object {
  position: relative;
  width: min(56rem, 74vw);
  aspect-ratio: 1.18;
  justify-self: end;
}

.ring-object .photo-mask {
  position: absolute;
  inset: 8% 0 0 18%;
  width: 66%;
  height: 76%;
  clip-path: ellipse(42% 49% at 50% 50%);
}

.carbon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.4rem solid #46322555;
  box-shadow: inset 0 0 60px #171411, 0 0 80px #A890FF18;
  filter: blur(.2px);
}

.wide-poem {
  position: absolute;
  left: 9vw;
  bottom: 9vh;
  width: min(39rem, 78vw);
}

.specimens {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.section-note {
  max-width: 28rem;
  color: #EFE8D8A0;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
  perspective: 1400px;
}

.specimen-card {
  position: relative;
  width: min(28vw, 23rem);
  min-width: 16rem;
  height: 30rem;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 1400ms cubic-bezier(.19, 1, .22, 1), filter 1200ms ease;
}

.specimen-card.tall { height: 35rem; }
.specimen-card.is-flipped { transform: rotateY(180deg) rotateZ(-1deg); }
.specimen-card:hover { filter: drop-shadow(0 0 44px #A890FF2A); }

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  border: 1px solid #F2C6A033;
  background:
    radial-gradient(circle at 28% 18%, #A890FF1B, transparent 34%),
    linear-gradient(145deg, #EFE8D81C, #46322555 55%, #171411E6);
  border-radius: 44% 9% 38% 11% / 7% 35% 10% 31%;
  box-shadow: inset 0 0 46px #17141199, 0 44px 90px #00000088;
  overflow: hidden;
}

.card-back {
  transform: rotateY(180deg);
  padding: 2rem;
  color: var(--charcoal);
  background:
    radial-gradient(circle at 80% 15%, #6EE7B744, transparent 36%),
    linear-gradient(140deg, #F2C6A0, #EFE8D8 58%, #6F8A63AA);
}

.pressed {
  width: 68%;
  height: 68%;
  opacity: .86;
  filter: drop-shadow(0 20px 22px #00000088);
  background: #6F8A63;
  clip-path: polygon(48% 0, 61% 22%, 90% 12%, 70% 39%, 100% 54%, 65% 60%, 76% 100%, 48% 70%, 21% 100%, 31% 60%, 0 54%, 27% 39%, 8% 13%, 36% 22%);
}

.pressed-one { background: linear-gradient(#463225, #171411); border-radius: 50%; clip-path: ellipse(42% 48% at 52% 50%); }
.pressed-two { background: linear-gradient(130deg, #6F8A63, #A890FF88); transform: rotate(-12deg); }
.pressed-three { background: linear-gradient(130deg, #6EE7B7, #263223); transform: rotate(18deg) scale(.9); }

.tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: var(--peach);
}

.back-title,
.back-copy {
  display: block;
  font-family: "Instrument Serif", serif;
  font-style: italic;
}

.back-title { font-size: 2.3rem; color: var(--umber); }
.back-copy { max-width: 16rem; font-size: 1.45rem; line-height: 1.2; }

.final-chamber {
  display: grid;
  place-items: center;
  text-align: center;
}

.final-still {
  position: relative;
  width: min(50rem, 86vw);
  margin-top: 2rem;
}

.final-still .photo-mask {
  height: min(52vh, 34rem);
  clip-path: polygon(14% 5%, 72% 0, 94% 21%, 91% 80%, 52% 100%, 10% 84%, 0 38%);
  opacity: .75;
}

.final-still .poem {
  margin: -5rem auto 0;
  position: relative;
  max-width: 38rem;
}

.artifact-link {
  margin-top: 3rem;
  display: inline-block;
  color: var(--peach);
}

@keyframes aurora {
  0% { --aurora-x: 22%; --aurora-y: 18%; }
  100% { --aurora-x: 42%; --aurora-y: 32%; }
}

@keyframes weather {
  0% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.08); }
}

@media (max-width: 860px) {
  .coordinates { flex-wrap: wrap; justify-content: flex-start; }
  .hero-photo { right: -8vw; top: 30vh; opacity: .66; }
  .chamber, .breath-chamber { display: flex; flex-direction: column; align-items: flex-start; }
  .vellum-panel { max-width: none; }
  .vertical-caption { writing-mode: horizontal-tb; }
  .ring-object { width: 92vw; }
  .card-row { flex-direction: column; }
  .specimen-card { width: min(86vw, 24rem); }
}