/* PiP promo 5 · Illustrated village map (16:9). Storybook paper, pencil + watercolour. */
:root {
  --page: #e4dac4; --accent: #4f8a6a; --ui-bg: rgba(60, 48, 36, .82);
  --ink: #4a3f35; --paper: #f3ead6; --navy: #14202e; --sage: #4f8a6a; --teal: #3698b9;
}
.stage { background: var(--paper); font-family: "Nunito", system-ui, sans-serif; color: var(--ink); }
.world { position: absolute; left: 0; top: 0; width: 3600px; height: 2100px; transform-origin: 0 0; }
#map { position: absolute; left: 0; top: 0; overflow: visible; }
#map .pencil { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#things > g, #ground > g { transform-box: fill-box; transform-origin: 50% 100%; }
.tags { position: absolute; inset: 0; }
.tag {
  position: absolute; transform: translate(-50%, 0); white-space: nowrap;
  font: 700 44px "Caveat", cursive; color: var(--ink);
  padding: 2px 18px 4px; background: rgba(255, 252, 240, .88); border-radius: 6px;
  box-shadow: 0 3px 0 rgba(74, 63, 53, .18);
}
.tag-wrap { position: absolute; left: 0; top: 0; }
.hub {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: #fffaf0; border: 5px solid var(--ink); display: grid; place-items: center;
  box-shadow: 0 6px 0 rgba(74, 63, 53, .2);
}
.hub img { width: 76px; height: 76px; }
.pulse { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 6px solid var(--sage); opacity: 0; }

.tint { pointer-events: none; opacity: 0; }
#tint-morning { background: linear-gradient(160deg, rgba(255, 214, 160, .35), rgba(255, 240, 210, 0) 60%); }
#tint-evening { background: linear-gradient(200deg, rgba(255, 168, 110, .38), rgba(120, 80, 140, .14)); mix-blend-mode: multiply; }
.paper {
  pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .38 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(120, 96, 66, .28) 100%);
}

.banner {
  position: absolute; left: 50%; top: 380px; width: 1180px; margin-left: -590px; padding: 40px 60px 54px;
  text-align: center; background: #fffaf0; border: 5px solid var(--ink); border-radius: 18px;
  box-shadow: 10px 12px 0 rgba(74, 63, 53, .22); opacity: 0;
}
.banner small { display: block; font: 700 54px "Caveat", cursive; color: var(--sage); }
.banner h1 { font: 400 120px/1 "DM Serif Display", Georgia, serif; color: var(--navy); letter-spacing: -.01em; }

.cards { position: absolute; inset: 0; }
.card {
  position: absolute; left: 0; top: 0; width: 640px; padding: 34px 40px 38px;
  background: #fffaf0; border: 5px solid var(--ink); border-radius: 22px;
  box-shadow: 10px 12px 0 rgba(74, 63, 53, .22); opacity: 0; transform-origin: 0 50%;
}
.card.left { transform-origin: 100% 50%; }
.card::before {
  content: ""; position: absolute; left: -26px; top: 70px; width: 40px; height: 40px;
  background: #fffaf0; border-left: 5px solid var(--ink); border-bottom: 5px solid var(--ink); transform: rotate(45deg);
}
.card.left::before { left: auto; right: -26px; transform: rotate(-135deg); }
.card time { display: block; font: 700 46px "Caveat", cursive; color: var(--sage); }
.card b { display: block; margin-top: 4px; font: 400 52px/1.05 "DM Serif Display", Georgia, serif; color: var(--navy); }
.card p { margin-top: 14px; font-size: 27px; line-height: 1.35; font-weight: 600; color: #5d5246; }

.end-logo { position: absolute; left: 870px; top: 150px; width: 180px; height: 180px; }
.end-h { position: absolute; left: 200px; right: 200px; top: 380px; text-align: center; font: 400 104px/1.02 "DM Serif Display", Georgia, serif; color: var(--navy); }
.end-sub { position: absolute; left: 0; right: 0; top: 610px; text-align: center; font: 700 52px "Caveat", cursive; color: var(--sage); }
#end { background: radial-gradient(70% 70% at 50% 45%, #fffaf0 0%, rgba(255, 250, 240, .92) 60%, rgba(243, 234, 214, .85) 100%); }
.cta {
  position: absolute; left: 650px; top: 730px; width: 620px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--navy); color: #fff; text-decoration: none;
  font: 800 36px "Nunito", sans-serif; border: 5px solid var(--ink); box-shadow: 8px 10px 0 rgba(74, 63, 53, .25);
}
.end-url { position: absolute; left: 0; right: 0; top: 872px; text-align: center; font: 800 32px "Nunito", sans-serif; color: var(--ink); }