/* SPREAD 01 — pp. 2–3 */

/* ---- p.3 (right) ELLA ES DENNA: she steps out of the cover onto the same grey seamless ---- */
.s01denna { position: absolute; inset: 0; background: radial-gradient(70% 55% at 70% 45%, #fff 0%, var(--backdrop) 70%, #cfd6de 100%); }
.s01denna .kicker { top: 4.5cqw; left: 6cqw; }
.s01denna-name {
  position: absolute; z-index: 5; top: 7cqw; left: 4.5cqw;
  font: 900 33cqw/.8 var(--sans); font-stretch: 62%; letter-spacing: -.01em; color: var(--yellow);
  text-shadow: 0 0 1.2cqw var(--cyan), 0 0 3cqw var(--cyan), .5cqw .6cqw 0 #36c3fb88;
}
.s01denna-cut { position: absolute; z-index: 10; right: 4cqw; bottom: 0; height: 102cqw; width: auto; filter: drop-shadow(-1.4cqw 1cqw 0 #ff00f055); }

.callouts { position: absolute; z-index: 15; left: 6cqw; top: 35cqw; width: 36cqw; }
.co { position: absolute; left: 0; font: 400 3.7cqw/1.05 var(--marker); color: var(--magenta); white-space: nowrap; }
.co small { display: block; font: 800 max(8.5px, 2.2cqw)/1 var(--sans); font-stretch: 70%; letter-spacing: .1em; color: var(--violet); margin-bottom: .7cqw; }
.co svg { position: absolute; width: 13cqw; height: 6.5cqw; fill: none; stroke: var(--magenta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.co-1 { top: 0; rotate: -3deg; }
.co-1 svg { left: 27cqw; top: 1cqw; }
.co-2 { top: 14cqw; rotate: 2deg; color: var(--ink); }
.co-3 { top: 28.5cqw; rotate: -2deg; font-size: 5.2cqw; }
.co-3 svg { left: 19cqw; top: -1cqw; }
.co-4 { top: 39cqw; rotate: 1.5deg; background: var(--cyan); color: var(--ink); font: 900 3.6cqw/1 var(--round); padding: 1.4cqw 2cqw 1.6cqw; box-shadow: .7cqw .7cqw 0 var(--violet); }
.co-4 small { color: var(--ink); }
.s01denna .co-5 { position: absolute; left: 66cqw; top: 59cqw; rotate: 8deg; width: 17cqw; height: 17cqw; border-radius: 50%;
  background: var(--yellow); display: grid; place-content: center; text-align: center; font: 900 6cqw/1 var(--round); color: var(--violet);
  box-shadow: 0 0 0 .5cqw var(--magenta); }
.s01denna .co-5 small { font-size: 1.9cqw; margin: 0 0 .4cqw; }

.s01denna-burst { left: 1.5cqw; top: 84cqw; width: 43cqw; height: 34cqw; rotate: -7deg; }
.s01denna-burst blockquote { width: 24cqw; font: 900 4.2cqw/.95 var(--sans); font-stretch: 62%; color: var(--violet); text-transform: uppercase; }
.s01denna-burst figcaption { font: 400 2.8cqw/1 var(--marker); color: var(--magenta); margin-top: .8cqw; }
.photo-credit { position: absolute; z-index: 20; right: 10cqw; bottom: 8.5cqw; background: #fff; padding: .6cqw 1cqw; font: 700 2.2cqw/1 var(--sans); font-stretch: 70%; letter-spacing: .08em; }
.page-ella-es-denna .folio span { background: #fff; padding: .5cqw .9cqw; }

/* ---- p.2 (left) ENCUÉNTRALA EN… ---- */
.s01links { position: absolute; inset: 0; background:
  radial-gradient(circle at 1cqw 1cqw, #ff00f026 .6cqw, #0000 .7cqw) 0 0 / 3cqw 3cqw, #fff; }
.s01links-head {
  position: absolute; top: 4cqw; left: 11cqw; z-index: 3;
  font: 900 12.6cqw/.84 var(--round); color: var(--magenta); letter-spacing: -.01em;
  -webkit-text-stroke: .5cqw #fff; paint-order: stroke fill; text-shadow: .9cqw .9cqw 0 var(--violet);
}
.s01links-head i { font: normal 900 8.4cqw/1 var(--sans); font-stretch: 125%; color: var(--yellow); -webkit-text-stroke: .7cqw var(--violet); text-shadow: none; }
.s01links-count { position: absolute; top: 6cqw; right: 4.5cqw; rotate: 8deg; font-size: 5.4cqw; color: var(--violet); }
.s01links-deck { position: absolute; top: 28.5cqw; left: 11cqw; right: 4.5cqw; z-index: 2; }

.spots { position: absolute; z-index: 3; top: 41cqw; left: 11cqw; right: 4.5cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2cqw 3cqw; }
.spot {
  position: relative; display: grid; grid-template-columns: 8.6cqw 1fr; grid-template-rows: 1fr auto; column-gap: 1.2cqw;
  min-height: 16.4cqw; padding: 2cqw 2.2cqw 1.8cqw 1.6cqw; text-decoration: none; rotate: var(--r, 0deg);
  box-shadow: .8cqw .8cqw 0 #14121a33; transition: rotate .15s, scale .15s;
}
.spot-n { grid-row: 1 / 3; align-self: center; font: 900 9cqw/1 var(--round); text-align: center; }
.spot-name { align-self: end; font: 900 4.8cqw/.95 var(--round); }
.spot-handle { font: 600 2.5cqw/1.2 var(--sans); font-stretch: 70%; letter-spacing: .03em; margin-top: .6cqw; word-break: break-all; }
.spot-note { position: absolute; top: -2.6cqw; right: 1.4cqw; rotate: 6deg; background: var(--yellow); color: var(--magenta); font: 400 2.6cqw/1 var(--marker); padding: .5cqw 1cqw; }
.spot-check { position: absolute; right: 1.6cqw; top: 1.6cqw; width: 3.8cqw; height: 3.8cqw; border: .45cqw solid currentColor; opacity: .7; }
.spot.is-done .spot-check { opacity: 1; }
.spot.is-done .spot-check::after { content: "✓"; position: absolute; left: -.2cqw; top: -2.6cqw; font: 400 6cqw/1 var(--marker); color: var(--magenta); text-shadow: .2cqw .2cqw 0 #fff; }
@media (hover: hover) { .spot:hover { rotate: 0deg; scale: 1.04; } }

.spot-ig-denna { --r: -2deg; background: var(--magenta); color: #fff; }
.spot-ig-denna .spot-n { color: var(--yellow); }
.spot-spotify  { --r: 1.6deg; background: var(--yellow); color: var(--violet); }
.spot-tiktok   { --r: 1.2deg; background: var(--ink); color: var(--cyan); }
.spot-tiktok .spot-n { color: var(--magenta); }
.spot-ig-duo   { --r: -1.5deg; background: #fff; color: var(--violet); box-shadow: inset 0 0 0 .6cqw var(--violet), .8cqw .8cqw 0 #14121a33; }
.spot-apple    { --r: -1deg; background: var(--cyan); color: var(--ink); }
.spot-apple .spot-n { color: #fff; -webkit-text-stroke: .3cqw var(--ink); }
.spot-youtube  { --r: 2deg; background: var(--violet); color: var(--yellow); }
.spot-youtube .spot-n { color: #fff; }

.s01links-album { left: 10cqw; top: 98cqw; width: 52cqw; height: 21cqw; rotate: -6deg; color: var(--yellow); }
.ell-top { font: 400 3cqw/1 var(--marker); color: #fff; }
.ell-main { font: 900 5.6cqw/.9 var(--sans); font-stretch: 125%; -webkit-text-stroke: .45cqw var(--violet); paint-order: stroke fill; margin: .6cqw 0; }
.ell-sub { font: 700 2.3cqw/1 var(--sans); font-stretch: 70%; letter-spacing: .08em; color: #fff; text-transform: uppercase; }
.s01links-album.is-done .ell-sub::after { content: " ✓"; }
@media (hover: hover) { .s01links-album:hover { rotate: -2deg; } }

.s01links-more { position: absolute; top: 101cqw; left: 66cqw; right: 4.5cqw; font: 600 2.6cqw/1.5 var(--sans); font-stretch: 70%; letter-spacing: .03em; color: var(--violet); }
.s01links-more a { display: inline-block; color: var(--ink); text-decoration-color: var(--magenta); text-decoration-thickness: .35cqw; padding: .4cqw 0; }