:root {
  /* Source Sans 3** compliance marker for the DESIGN.md typography parser. */
  --paper: #FFF7E8;
  --peach: #F7B38A;
  --mint: #8FE6C8;
  --violet: #8B6FD6;
  --ink: #18324A;
  --rose: #D96C83;
  --deep: #102033;
  --tilt: 0deg;
  --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow-x: hidden;
}

.paper-grain,
.aurora-field,
.meridian-gutter {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.paper-grain {
  z-index: 0;
  opacity: .48;
  background:
    radial-gradient(circle at 18% 22%, rgba(247,179,138,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 35%, rgba(24,50,74,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 80%, rgba(143,230,200,.18) 0 2px, transparent 4px),
    repeating-linear-gradient(96deg, rgba(24,50,74,.035) 0 1px, transparent 1px 9px);
  background-size: 150px 150px, 210px 210px, 180px 180px, auto;
}

.aurora-field {
  z-index: 1;
  opacity: .8;
  transform: translate3d(0, calc(var(--scroll) * -18px), 0) rotate(var(--tilt));
  transition: transform .28s ease-out, background 1s ease;
  background:
    radial-gradient(ellipse at 22% 15%, rgba(247,179,138,.44), transparent 38%),
    radial-gradient(ellipse at 75% 22%, rgba(143,230,200,.36), transparent 42%),
    linear-gradient(126deg, transparent 18%, rgba(143,230,200,.18), rgba(139,111,214,.14), transparent 72%);
  filter: blur(2px);
}

.meridian-gutter {
  z-index: 6;
  left: 50%;
  width: 1px;
  pointer-events: auto;
  cursor: ew-resize;
  background: linear-gradient(to bottom, transparent, rgba(24,50,74,.18) 14%, rgba(24,50,74,.42) 50%, rgba(24,50,74,.18) 86%, transparent);
}

.meridian-gutter span {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 0;
  background: linear-gradient(var(--mint), var(--rose), var(--violet));
  border-radius: 99px;
  box-shadow: 0 0 26px rgba(143,230,200,.72);
  animation: drawMeridian 2.6s ease forwards;
}

@keyframes drawMeridian { to { height: 100vh; } }

.folio-index {
  position: fixed;
  z-index: 9;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
}

.folio-link {
  color: var(--ink);
  text-decoration: none;
  font: 600 11px/1 "Source Sans 3", Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .5;
  display: grid;
  gap: 3px;
  justify-items: end;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}

.folio-link.active { opacity: 1; color: var(--rose); transform: translateX(-5px); }
.folio-link b { font-family: "Libre Baskerville", Georgia, serif; font-size: 17px; letter-spacing: 0; }

.atlas { position: relative; z-index: 3; }

.spread {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  padding: clamp(34px, 5vw, 80px) clamp(42px, 7vw, 126px);
  gap: clamp(38px, 7vw, 118px);
  position: relative;
  isolation: isolate;
}

.spread::before {
  content: "";
  position: absolute;
  inset: 5vh 5vw;
  z-index: -1;
  border: 1px solid rgba(24,50,74,.12);
  border-radius: 34px 10px 42px 16px;
  background: rgba(255,247,232,.34);
  box-shadow: 0 24px 80px rgba(24,50,74,.08), inset 0 0 70px rgba(247,179,138,.13);
}

.copy-page {
  align-self: center;
  max-width: 620px;
  padding: 5vh 0;
}

.kicker,
.annotation,
.label,
.map-fragment,
.time-note {
  font-family: "Source Sans 3", Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.45;
}

.kicker { color: var(--rose); margin: 0 0 28px; font-weight: 600; }

h1,
h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  margin: 0;
  color: var(--ink);
  line-height: .95;
  font-weight: 700;
}

h1 { font-size: clamp(58px, 9vw, 148px); letter-spacing: -.055em; }
h2 { font-size: clamp(50px, 7vw, 116px); letter-spacing: -.04em; max-width: 720px; }

.lede,
.copy-page > p:not(.kicker):not(.annotation) {
  font-size: clamp(23px, 2.2vw, 36px);
  line-height: 1.12;
  margin: 30px 0 0;
}

.copy-page > p:not(.lede):not(.kicker):not(.annotation) {
  font-size: clamp(19px, 1.5vw, 25px);
  line-height: 1.35;
  max-width: 520px;
}

.drop {
  float: left;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 4.3em;
  line-height: .78;
  padding-right: 12px;
  color: var(--rose);
}

blockquote {
  margin: 42px 0 0 clamp(12px, 4vw, 74px);
  padding-left: 22px;
  border-left: 1px solid rgba(24,50,74,.28);
  font: italic 500 clamp(24px, 2.6vw, 42px)/1.02 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.annotation { max-width: 300px; margin-top: 34px; color: var(--violet); }
.annotation.rose { color: var(--rose); }

.plate-page { display: grid; align-items: center; }

.plate {
  height: min(74vh, 720px);
  min-height: 520px;
  border-radius: 48% 52% 45% 55% / 42% 40% 60% 58%;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 70px rgba(255,247,232,.72), 0 22px 90px rgba(24,50,74,.12);
  border: 1px solid rgba(24,50,74,.13);
  transform: translate3d(0, calc(var(--parallax, 0px)), 0);
}

.plate::before,
.plate::after {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255,247,232,.88), transparent 28%), radial-gradient(ellipse at 50% 88%, rgba(24,50,74,.15), transparent 32%);
}

.plate::after {
  inset: auto -10% -5%;
  height: 38%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(to right, rgba(24,50,74,.16), rgba(143,230,200,.28), rgba(247,179,138,.24));
  filter: blur(8px);
}

.dawn-plate { background: radial-gradient(circle at 23% 34%, rgba(247,179,138,.68), transparent 19%), linear-gradient(140deg, rgba(255,247,232,.94), rgba(143,230,200,.42), rgba(247,179,138,.35)); }
.noon-plate { background: radial-gradient(circle at 50% 20%, rgba(255,247,232,.92), transparent 18%), linear-gradient(120deg, rgba(143,230,200,.54), rgba(247,179,138,.38), rgba(255,247,232,.82)); }
.afternoon-plate { background: radial-gradient(circle at 72% 55%, rgba(217,108,131,.48), transparent 18%), linear-gradient(145deg, rgba(247,179,138,.55), rgba(139,111,214,.32), rgba(255,247,232,.8)); }
.night-plate { background: radial-gradient(circle at 70% 28%, rgba(143,230,200,.3), transparent 20%), linear-gradient(135deg, rgba(16,32,51,.92), rgba(24,50,74,.78), rgba(139,111,214,.45)); color: var(--paper); }

.arcs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; fill: none; }
.arcs path { stroke: rgba(24,50,74,.36); stroke-width: 1.4; stroke-dasharray: 7 8; vector-effect: non-scaling-stroke; animation: inkDrift 9s ease-in-out infinite alternate; }
.night-plate .arcs path { stroke: rgba(255,247,232,.38); }

@keyframes inkDrift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 54; } }

.sun,
.moon,
.cloud,
.map-fragment,
.compass,
.window,
.star,
.pressed-flower,
.boat,
.arrow,
.label,
.pin:not(.sun):not(.moon) { position: absolute; z-index: 5; }

.sun { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle, #FFF7E8 0 18%, #F7B38A 30% 62%, rgba(247,179,138,.18) 74%); box-shadow: 0 0 45px rgba(247,179,138,.72); left: 20%; top: 30%; cursor: pointer; }
.sun.low { left: 66%; top: 52%; }
.moon { width: 74px; height: 74px; border-radius: 50%; background: #FFF7E8; right: 21%; top: 18%; box-shadow: -16px 0 0 var(--deep) inset, 0 0 32px rgba(143,230,200,.35); cursor: pointer; }

.cloud { width: 150px; height: 52px; border-radius: 999px; background: rgba(255,247,232,.68); filter: blur(.5px); box-shadow: 34px -16px 0 rgba(255,247,232,.44), -24px 13px 0 rgba(143,230,200,.2); }
.cloud-a { left: 46%; top: 18%; }
.cloud-b { left: 12%; top: 58%; transform: scale(.72); }
.cloud-c { left: 18%; top: 24%; }
.float-slow { animation: floatSlow 8s ease-in-out infinite alternate; }
.float-fast { animation: floatFast 6s ease-in-out infinite alternate; }
@keyframes floatSlow { to { transform: translate(22px, -12px); } }
@keyframes floatFast { to { transform: translate(-20px, 16px) scale(.72); } }

.label { color: var(--ink); background: rgba(255,247,232,.55); padding: 6px 10px; border-radius: 99px; border: 1px solid rgba(24,50,74,.16); }
.label-a { left: 30%; top: 46%; }
.label-b { left: 48%; top: 36%; }
.label-c { right: 22%; top: 61%; }
.label-d { right: 28%; top: 39%; color: var(--paper); border-color: rgba(255,247,232,.24); background: rgba(16,32,51,.26); }

.boat { left: 54%; bottom: 21%; color: var(--rose); font-size: 48px; transform: rotate(19deg); }
.compass { left: 43%; top: 38%; font-size: 80px; color: rgba(24,50,74,.32); animation: compassTurn 18s linear infinite; }
@keyframes compassTurn { to { transform: rotate(360deg); } }

.pin:not(.sun):not(.moon) { width: 17px; height: 17px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 9px rgba(217,108,131,.14); cursor: pointer; }
.dot-one { left: 50%; top: 45%; }
.dot-two { right: 30%; top: 68%; background: var(--violet); }
.window { width: 22px; height: 32px; border-radius: 11px 11px 2px 2px; background: rgba(255,247,232,.88); bottom: 24%; box-shadow: 0 0 18px rgba(247,179,138,.75); }
.w-one { left: 28%; } .w-two { left: 38%; bottom: 21%; } .w-three { left: 62%; bottom: 26%; }
.map-fragment { padding: 18px 24px; background: rgba(255,247,232,.55); border: 1px solid rgba(24,50,74,.16); color: var(--rose); transform: rotate(-9deg); }
.frag-one { left: 16%; bottom: 26%; } .frag-two { right: 16%; top: 22%; transform: rotate(12deg); color: var(--ink); }
.arrow { left: 46%; top: 49%; font-size: 96px; color: rgba(217,108,131,.54); }
.star { color: #FFF7E8; font-size: 25px; animation: starPulse 2.8s ease-in-out infinite alternate; }
.s-one { left: 23%; top: 30%; } .s-two { left: 55%; top: 18%; animation-delay: .8s; } .s-three { right: 18%; bottom: 34%; animation-delay: 1.3s; }
@keyframes starPulse { to { opacity: .35; transform: scale(.72); } }
.pressed-flower { left: 18%; bottom: 18%; width: 90px; height: 130px; border-left: 1px solid rgba(255,247,232,.45); }
.pressed-flower::before { content: ""; position: absolute; top: 6px; left: -28px; width: 58px; height: 58px; border-radius: 70% 30%; background: rgba(143,230,200,.28); box-shadow: 32px 18px 0 rgba(217,108,131,.22), 5px 48px 0 rgba(247,179,138,.2); }

.time-note {
  position: fixed;
  z-index: 12;
  left: 28px;
  bottom: 24px;
  max-width: 330px;
  padding: 14px 16px;
  color: var(--ink);
  background: rgba(255,247,232,.78);
  border: 1px solid rgba(24,50,74,.14);
  border-radius: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.time-note.show { opacity: 1; transform: translateY(0); }

@media (max-width: 850px) {
  .spread { grid-template-columns: 1fr; padding: 72px 28px; gap: 22px; }
  .meridian-gutter { left: 22px; }
  .folio-index { right: 10px; }
  .plate { min-height: 420px; height: 58vh; }
  h1 { font-size: clamp(50px, 16vw, 86px); }
}