:root {
  --moonlit-blue: #0D2138;
  --mist-blue: #C8E6F6;
  --porcelain: #F4F0E6;
  --frosted-cyan: #9ED4E8;
  --silver-blue: #6F8797;
  --leaf-sage: #7D9A7A;
  --antique-ink: #14202A;
  --brass: #C5A86A;
  --hero-blur: 12px;
  --glass-x: 0px;
  --glass-y: 0px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--moonlit-blue);
}

body {
  margin: 0;
  color: var(--porcelain);
  font-family: "EB Garamond", Georgia, serif;
  overflow-x: hidden;
  background: radial-gradient(circle at 38% 28%, #EAF8FF 0%, #C8E6F6 26%, #547792 58%, #0D2138 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

body::before {
  background:
    linear-gradient(90deg, rgba(244, 240, 230, .05) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(rgba(244, 240, 230, .04) 1px, transparent 1px) 0 0 / 84px 84px,
    radial-gradient(circle at 18% 20%, rgba(244, 240, 230, .14), transparent 18%),
    radial-gradient(circle at 75% 74%, rgba(158, 212, 232, .13), transparent 23%);
  mix-blend-mode: screen;
}

body::after {
  background:
    radial-gradient(ellipse at 50% -20%, transparent 45%, rgba(13, 33, 56, .56) 80%),
    linear-gradient(90deg, rgba(13, 33, 56, .62), transparent 24%, transparent 76%, rgba(13, 33, 56, .65));
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: blur(calc(var(--hero-blur) * .55));
  transition: filter 900ms ease;
}

.atmosphere::before,
.atmosphere::after {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 31% 24%, rgba(244, 240, 230, .55) 0 1.4%, transparent 5%),
    radial-gradient(circle at 64% 21%, rgba(200, 230, 246, .42) 0 1.1%, transparent 5%),
    radial-gradient(circle at 81% 54%, rgba(244, 240, 230, .33) 0 1.2%, transparent 4.8%),
    radial-gradient(circle at 20% 79%, rgba(158, 212, 232, .32) 0 1.5%, transparent 5.5%);
  animation: driftMist 28s ease-in-out infinite alternate;
}

.atmosphere::after {
  opacity: .42;
  transform: rotate(17deg) scale(1.18);
  animation-duration: 36s;
}

.bokeh,
.leaf-shadow {
  position: absolute;
  display: block;
  border-radius: 999px;
}

.bokeh {
  background: radial-gradient(circle, rgba(244, 240, 230, .86), rgba(200, 230, 246, .24) 42%, transparent 70%);
  filter: blur(8px);
  opacity: .45;
  animation: floatPearl 16s ease-in-out infinite alternate;
}

.bokeh-one { width: 18rem; height: 18rem; left: 5%; top: 7%; }
.bokeh-two { width: 10rem; height: 10rem; right: 11%; top: 18%; animation-delay: -5s; }
.bokeh-three { width: 14rem; height: 14rem; left: 57%; bottom: 13%; animation-delay: -8s; }
.bokeh-four { width: 7rem; height: 7rem; left: 21%; bottom: 10%; animation-delay: -3s; }

.leaf-shadow {
  width: 38rem;
  height: 11rem;
  border: 1px solid rgba(125, 154, 122, .25);
  border-radius: 80% 10% 80% 10%;
  opacity: .28;
  transform: rotate(-28deg);
}

.leaf-a { right: -10rem; top: 12rem; }
.leaf-b { left: -14rem; bottom: 7rem; transform: rotate(34deg); }

.conservatory {
  position: relative;
  z-index: 2;
}

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 6vw;
  isolation: isolate;
}

.glass-panel {
  border: 1px solid rgba(197, 168, 106, .46);
  background:
    linear-gradient(135deg, rgba(244, 240, 230, .18), rgba(158, 212, 232, .07)),
    radial-gradient(circle at calc(50% + var(--glass-x)) calc(50% + var(--glass-y)), rgba(234, 248, 255, .23), transparent 34%);
  box-shadow: 0 2rem 6rem rgba(13, 33, 56, .44), inset 0 0 0 1px rgba(244, 240, 230, .16);
  backdrop-filter: blur(16px);
}

.hero-chamber {
  align-items: start;
  justify-items: start;
  padding-top: 5vh;
}

.hero-frame {
  width: min(78rem, 88vw);
  min-height: 78vh;
  margin-left: 3vw;
  position: relative;
  border-radius: 44% 38% 48% 34% / 14% 18% 12% 20%;
}

.hero-frame::before,
.hero-frame::after,
.table-plane::before,
.winter-tableau::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(244, 240, 230, .26);
  border-radius: inherit;
  pointer-events: none;
}

.ornament {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border: solid rgba(197, 168, 106, .68);
  opacity: .7;
  filter: drop-shadow(0 0 1rem rgba(200, 230, 246, .18));
}

.ornament::before,
.ornament::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(125, 154, 122, .7);
  border-radius: 50% 0 50% 0;
}

.ornament-nw { left: 2.6vw; top: 3vh; border-width: 2px 0 0 2px; border-radius: 4rem 0 0 0; }
.ornament-se { right: 4vw; bottom: 8vh; border-width: 0 2px 2px 0; border-radius: 0 0 4rem 0; }
.ornament-nw::before { width: 7rem; height: 3rem; left: 2rem; top: 2.7rem; transform: rotate(-22deg); }
.ornament-nw::after { width: 4rem; height: 8rem; left: 7.5rem; top: 1rem; transform: rotate(36deg); }
.ornament-se::before { width: 7rem; height: 3rem; right: 2rem; bottom: 2.7rem; transform: rotate(158deg); }
.ornament-se::after { width: 4rem; height: 8rem; right: 7.5rem; bottom: 1rem; transform: rotate(216deg); }

.caption-rail {
  position: absolute;
  left: 3.2rem;
  top: 5rem;
  bottom: 5rem;
  width: 5.6rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  color: var(--porcelain);
  z-index: 3;
}

.roman,
.chapter-seal,
.note-label {
  font-family: "Cinzel Decorative", "Times New Roman", serif;
  color: var(--brass);
  letter-spacing: .16em;
}

.rail-line {
  width: 1px;
  height: 100%;
  margin: 1.2rem 0;
  background: linear-gradient(transparent, var(--brass), rgba(244, 240, 230, .2), transparent);
}

.caption-rail p {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  font-style: italic;
  color: rgba(244, 240, 230, .82);
  letter-spacing: .1em;
}

.cloche {
  position: absolute;
  left: clamp(7rem, 18vw, 18rem);
  top: 6vh;
  width: min(47rem, 62vw);
  min-height: 65vh;
  display: grid;
  place-items: center;
  filter: blur(var(--hero-blur));
  opacity: .86;
  transition: filter 1300ms ease, opacity 1300ms ease, transform 1300ms ease;
}

.in-focus .cloche { filter: blur(0); opacity: 1; transform: translateY(-.4rem); }

.glass-dome {
  width: min(31rem, 54vw);
  aspect-ratio: .86;
  border: 1px solid rgba(244, 240, 230, .38);
  border-radius: 50% 50% 12% 12% / 58% 58% 12% 12%;
  background:
    linear-gradient(112deg, rgba(244, 240, 230, .25), transparent 24%, rgba(158, 212, 232, .12) 64%, rgba(244, 240, 230, .2)),
    radial-gradient(ellipse at 50% 78%, rgba(13, 33, 56, .24), transparent 50%);
  box-shadow: inset 1rem 0 2rem rgba(244, 240, 230, .13), inset -1rem 0 3rem rgba(13, 33, 56, .25);
  display: grid;
  place-items: center;
}

.prototype-relic { width: 88%; overflow: visible; }
.prototype-relic * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.blueprint { stroke: var(--frosted-cyan); stroke-width: 2.2; stroke-dasharray: 720; stroke-dashoffset: 720; animation: drawLine 4.8s ease 400ms forwards; }
.porcelain-oval { fill: rgba(244, 240, 230, .76); stroke: rgba(197, 168, 106, .55); stroke-width: 1.4; }
.leaf-vein { stroke: var(--leaf-sage); stroke-width: 3; stroke-dasharray: 360; stroke-dashoffset: 360; animation: drawLine 5.2s ease 1s forwards; }
.leaf-vein.side { stroke-width: 1.7; opacity: .8; }
.hinge { fill: rgba(197, 168, 106, .5); stroke: var(--brass); stroke-width: 1.6; }
.dew { fill: rgba(200, 230, 246, .8); stroke: rgba(244, 240, 230, .86); }

.plaque {
  margin-top: -2rem;
  padding: 1.1rem 3.4rem 1.3rem;
  border: 1px solid rgba(197, 168, 106, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--porcelain), #e8decc);
  color: var(--antique-ink);
  text-align: center;
  box-shadow: 0 1.5rem 2.6rem rgba(13, 33, 56, .38), inset 0 0 0 .45rem rgba(197, 168, 106, .08);
}

h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  margin: 0;
}

.plaque h1 {
  font-size: clamp(3.2rem, 8vw, 8.4rem);
  letter-spacing: .045em;
  line-height: .86;
}

.plaque p {
  margin: .6rem 0 0;
  color: rgba(20, 32, 42, .72);
  font-style: italic;
  letter-spacing: .06em;
}

.hero-whisper {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  max-width: 24rem;
  color: rgba(244, 240, 230, .78);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  font-style: italic;
  line-height: 1.45;
}

.chapter-ribbon {
  position: fixed;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: grid;
  gap: 1rem;
}

.ribbon-dot {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: rgba(244, 240, 230, .62);
  border: 1px solid rgba(197, 168, 106, .32);
  border-radius: 50%;
  font-family: "Cinzel Decorative", serif;
  font-size: .74rem;
  background: rgba(13, 33, 56, .38);
  transition: color 500ms ease, border-color 500ms ease, background 500ms ease;
}

.ribbon-dot.is-active {
  color: var(--brass);
  border-color: var(--brass);
  background: rgba(244, 240, 230, .12);
}

.table-plane,
.winter-tableau {
  position: relative;
  width: min(72rem, 86vw);
  min-height: 72vh;
  border-radius: 2rem;
  overflow: hidden;
  opacity: .62;
  filter: blur(9px);
  transform: translateY(2rem);
  transition: opacity 1000ms ease, filter 1000ms ease, transform 1000ms ease;
}

.in-focus .table-plane,
.in-focus .winter-tableau {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.drafting-chamber { background: linear-gradient(180deg, transparent, rgba(20, 32, 42, .18), transparent); }

.draft-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(200, 230, 246, .14) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(rgba(200, 230, 246, .12) 1px, transparent 1px) 0 0 / 42px 42px;
  mask-image: radial-gradient(circle at 54% 48%, black, transparent 72%);
}

.chapter-seal {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(197, 168, 106, .72);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(13, 33, 56, .38);
  z-index: 2;
}

.vellum-note {
  position: absolute;
  left: 8vw;
  top: 15vh;
  max-width: 33rem;
  padding: 2rem 2.3rem;
  color: var(--antique-ink);
  background: rgba(244, 240, 230, .78);
  border: 1px solid rgba(197, 168, 106, .55);
  box-shadow: 0 1rem 3rem rgba(13, 33, 56, .24);
}

.note-label { font-size: .72rem; }
.vellum-note h2 { margin-top: .7rem; font-size: clamp(2.4rem, 5vw, 5.4rem); line-height: .9; color: var(--antique-ink); }
.vellum-note p { font-size: 1.24rem; line-height: 1.48; }

.marginalia {
  position: absolute;
  color: rgba(244, 240, 230, .74);
  font-style: italic;
  letter-spacing: .08em;
}
.note-one { right: 13vw; top: 18vh; }
.note-two { right: 8vw; bottom: 18vh; }

.engraved-ruler {
  position: absolute;
  left: 10vw;
  right: 10vw;
  bottom: 12vh;
  height: 1px;
  background: rgba(197, 168, 106, .65);
}
.engraved-ruler span { position: absolute; top: -1rem; width: 1px; height: 2rem; background: rgba(197, 168, 106, .55); }
.engraved-ruler span:nth-child(1) { left: 10%; }
.engraved-ruler span:nth-child(2) { left: 28%; height: 1.4rem; }
.engraved-ruler span:nth-child(3) { left: 50%; }
.engraved-ruler span:nth-child(4) { left: 72%; height: 1.4rem; }
.engraved-ruler span:nth-child(5) { left: 90%; }

.blueprint-leaf {
  position: absolute;
  right: 5vw;
  top: 24vh;
  width: min(34rem, 48vw);
  opacity: .64;
}
.blueprint-leaf path { fill: none; stroke: var(--frosted-cyan); stroke-width: 1.8; stroke-dasharray: 620; stroke-dashoffset: 620; }
.in-focus .blueprint-leaf path { animation: drawLine 5s ease forwards; }

.winter-chamber { padding-bottom: 8vh; }
.winter-tableau {
  min-height: 68vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5rem;
  background:
    radial-gradient(circle at 50% 38%, rgba(244, 240, 230, .2), transparent 22%),
    linear-gradient(135deg, rgba(13, 33, 56, .34), rgba(158, 212, 232, .12));
}
.winter-tableau h2 { font-size: clamp(3.5rem, 8vw, 8rem); line-height: .9; }
.winter-tableau p { max-width: 38rem; margin: 1rem auto 0; font-size: 1.35rem; line-height: 1.5; color: rgba(244, 240, 230, .8); }
.quiet-seal {
  color: var(--brass);
  text-decoration: none;
  margin-top: 1.8rem;
  padding: .7rem 1.3rem;
  border-top: 1px solid rgba(197, 168, 106, .6);
  border-bottom: 1px solid rgba(197, 168, 106, .6);
  font-family: "Cinzel Decorative", serif;
  letter-spacing: .16em;
  font-size: .8rem;
}

.leaf-wreath {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(197, 168, 106, .2);
  border-radius: 50%;
  pointer-events: none;
}
.leaf-wreath span {
  position: absolute;
  width: 7rem;
  height: 2.6rem;
  border: 1px solid rgba(125, 154, 122, .62);
  border-radius: 100% 0 100% 0;
  background: rgba(125, 154, 122, .08);
}
.leaf-wreath span:nth-child(1) { left: 8%; top: 17%; transform: rotate(-36deg); }
.leaf-wreath span:nth-child(2) { right: 12%; top: 13%; transform: rotate(70deg); }
.leaf-wreath span:nth-child(3) { left: 4%; bottom: 24%; transform: rotate(42deg); }
.leaf-wreath span:nth-child(4) { right: 7%; bottom: 18%; transform: rotate(128deg); }
.leaf-wreath span:nth-child(5) { left: 45%; top: -1rem; transform: rotate(12deg); }
.leaf-wreath span:nth-child(6) { left: 47%; bottom: -1rem; transform: rotate(190deg); }

@keyframes driftMist {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.05); }
}

@keyframes floatPearl {
  from { transform: translate3d(-.8rem, .3rem, 0) scale(.96); }
  to { transform: translate3d(1.1rem, -1.3rem, 0) scale(1.05); }
}

@keyframes drawLine { to { stroke-dashoffset: 0; } }

@media (max-width: 780px) {
  .chapter-ribbon { right: 1rem; }
  .hero-frame { width: 92vw; margin-left: 0; min-height: 76vh; }
  .caption-rail { left: 1rem; top: 2.5rem; bottom: 2.5rem; }
  .cloche { left: 4.5rem; width: calc(100% - 5rem); }
  .hero-whisper { right: auto; left: 2rem; bottom: 3vh; max-width: 70vw; }
  .plaque { padding: .9rem 1.2rem; }
  .table-plane, .winter-tableau { width: 91vw; }
  .vellum-note { left: 2rem; right: 2rem; top: 7rem; }
  .blueprint-leaf { right: 1rem; top: auto; bottom: 9rem; width: 72vw; }
  .marginalia { display: none; }
  .winter-tableau { padding: 3rem 1.6rem; }
}