/* SPREAD 02 — pp. 4–5, PERFIL */

/* ---- p.4 ---- */
.s02l { position: absolute; inset: 0; background: #fff; }
.s02l .kicker { top: 4.5cqw; left: 11cqw; background: var(--magenta); color: #fff; }

.eras { position: absolute; z-index: 6; top: 11cqw; left: 10cqw; width: 56cqw; display: flex; flex-direction: column; align-items: flex-start; }
.era { display: block; white-space: nowrap; }
.era-1 { font: 900 6.4cqw/1 var(--sans); font-stretch: 125%; color: var(--yellow); -webkit-text-stroke: .6cqw var(--violet); paint-order: stroke fill; }
.era-2 { font: 900 11.4cqw/.88 var(--round); color: var(--magenta); -webkit-text-stroke: .5cqw #fff; paint-order: stroke fill; text-shadow: .7cqw .7cqw 0 var(--violet); margin-left: 3cqw; }
.era-3 { font: 900 12.6cqw/.86 var(--sans); font-stretch: 62%; color: var(--cyan); text-shadow: .6cqw .7cqw 0 var(--ink); margin-left: -.5cqw; }
.era-4 { margin-top: 1.6cqw; background: var(--violet); color: #fff; padding: .8cqw 1.6cqw 1cqw; rotate: -2deg; font: 800 3.6cqw/1 var(--sans); font-stretch: 70%; letter-spacing: .04em; }
.era-4 em { display: block; font: normal 900 6.3cqw/.95 var(--round); color: var(--yellow); letter-spacing: 0; }
.s02l-note { position: absolute; z-index: 7; top: 51.5cqw; left: 12cqw; rotate: -4deg; font-size: 3.2cqw; }
.s02l-note a { text-decoration: none; display: inline-block; padding: 1cqw 0; }

.s02l-photo { z-index: 4; top: 6cqw; right: 4cqw; width: 31cqw; rotate: 4deg; }
.s02l-photo img { aspect-ratio: 3 / 4.1; object-fit: cover; object-position: 50% 18%; }

.s02l-deck { position: absolute; z-index: 5; top: 57.5cqw; left: 10cqw; right: 4cqw; }
.s02l-copy { position: absolute; top: 68.5cqw; left: 10cqw; right: 4.5cqw; bottom: 8cqw; column-count: 2; column-gap: 3.4cqw; column-fill: auto; }

/* ---- p.5 ---- */
.s02r { position: absolute; inset: 0; background: var(--backdrop); }
.s02r .cont-from { position: absolute; top: 2.4cqw; left: 5cqw; text-align: left; }
.s02r-copy { position: absolute; top: 9cqw; left: 5cqw; right: 11cqw; }

.s02r-quote { left: 3cqw; top: 44cqw; width: 57cqw; height: 27cqw; rotate: -4deg; padding: 0 6cqw; }
.s02r-quote blockquote { font: 600 3.1cqw/1.1 var(--sans); font-stretch: 75%; color: #fff; }
.s02r-quote blockquote b { display: block; margin-top: .6cqw; font: 900 4.7cqw/.95 var(--round); color: var(--yellow); -webkit-text-stroke: .35cqw var(--violet); paint-order: stroke fill; }
.s02r-quote figcaption { margin-top: 1cqw; font: 400 max(10px, 2.6cqw)/1 var(--marker); color: var(--ink); }

.timeline { position: absolute; top: 42cqw; left: 63cqw; right: 10.5cqw; }
.timeline h3, .diario h3 { font: 900 4.2cqw/.9 var(--sans); font-stretch: 62%; color: var(--violet); letter-spacing: .02em; }
.timeline h3 { margin-bottom: 2cqw; }
.timeline ol { border-left: .5cqw dotted var(--magenta); padding-left: 2.6cqw; }
.timeline li { position: relative; font: 600 max(10.5px, 2.55cqw)/1.15 var(--sans); font-stretch: 75%; margin-bottom: 2.2cqw; }
.timeline li::before { content: ""; position: absolute; left: -4.15cqw; top: .4cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 .4cqw var(--violet); }
.timeline time { display: block; font: 900 max(11px, 3.1cqw)/1 var(--round); color: var(--magenta); }
.timeline a { color: var(--violet); text-decoration-thickness: .3cqw; }

.diario {
  position: absolute; top: 72cqw; left: 5cqw; width: 55cqw; background: #fff; padding: 2.4cqw 2.8cqw 2cqw;
  border: .6cqw solid var(--magenta); border-radius: 2.6cqw; box-shadow: 1cqw 1cqw 0 var(--cyan); rotate: 1deg;
}
.diario h3 { color: var(--magenta); margin-bottom: 1.4cqw; }
.diario dl { display: grid; grid-template-columns: auto 1fr; gap: .7cqw 1.6cqw; font: max(10.5px, 2.55cqw)/1.15 var(--sans); font-stretch: 80%; }
.diario dt { font-weight: 800; color: var(--violet); white-space: nowrap; }
.diario dd { font-weight: 500; }
.diario-src { margin-top: 1.6cqw; font: 400 max(10px, 2.4cqw)/1.2 var(--marker); color: var(--magenta); }
.diario-src a { display: inline-block; padding: .6cqw 0; }
.s02r .endmark { position: absolute; right: 11cqw; bottom: 9cqw; color: var(--magenta); font-size: 3cqw; }