/* The ten magazine-style covers (stand-ins built from her photos, js/styles.js). Split out of the old rack. */
/* ── the ten covers: each style in its own type and layout ───────────────── */
.cv { container-type: inline-size; }
.cv > *, .cv-in > * { position: absolute; }
.cv .ph { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv .m, .cv .l1, .cv .l2, .cv .hl, .cv .dt { font-style: normal; z-index: 2; }
.bw { filter: grayscale(1) contrast(1.08); }
.sepia { filter: sepia(.75) contrast(1.05) saturate(.8); }

.cv-1 { background: #111; }
.cv-1 .m { left: 0; right: 0; top: 2%; text-align: center; color: #fff; font: 900 27cqw / 1 var(--f-head); letter-spacing: -.02em; }
.cv-1 .l1 { right: 6%; top: 34%; color: #fff; font: 700 6cqw / 1.05 var(--f-head); text-transform: uppercase; text-align: right; }
.cv-1 .l2 { left: 6%; bottom: 5%; color: #fff; font: 400 4.5cqw / 1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; }

.cv-2 { background: #f2ead6; color: #1b1b1b; }
.cv-2 .m { left: 6%; right: 6%; top: 4%; text-align: center; font: 900 12cqw / 1 var(--f-head); border-bottom: 3px double #1b1b1b; padding-bottom: 3%; }
.cv-2 .dt { left: 6%; right: 6%; top: 19%; text-align: center; font: 400 3.4cqw / 1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #1b1b1b; padding-bottom: 2%; }
.cv-2 .hl { left: 6%; right: 6%; top: 25%; font: 700 8.4cqw / 1.02 var(--f-head); }
.cv-2 .ph { inset: auto 6% 22% 6%; top: auto; width: 88%; height: 34%; }
.cv-2 .cols { left: 6%; right: 6%; bottom: 5%; height: 13%; background: repeating-linear-gradient(#1b1b1b 0 1px, transparent 1px 5px); opacity: .35; -webkit-mask: linear-gradient(90deg, #000 31%, transparent 31% 34%, #000 34% 65%, transparent 65% 68%, #000 68%); mask: linear-gradient(90deg, #000 31%, transparent 31% 34%, #000 34% 65%, transparent 65% 68%, #000 68%); }

.cv-3 { background: #c9a37a; }
.cv-3 .pol { width: 54%; background: #fffaf0; padding: 4% 4% 12%; box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
.cv-3 .pol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cv-3 .pol em { position: absolute; left: 0; right: 0; bottom: 2%; text-align: center; font: 500 7cqw / 1 var(--f-script); color: #333; font-style: normal; }
.cv-3 .pol::before { content: ""; position: absolute; left: 30%; top: -4%; width: 40%; height: 9%; background: rgb(255 255 240 / .6); rotate: -3deg; }
.cv-3 .p1 { left: 4%; top: 6%; rotate: -7deg; } .cv-3 .p2 { right: 3%; top: 30%; rotate: 6deg; } .cv-3 .p3 { left: 12%; top: 56%; rotate: -2deg; }
.cv-3 .m { right: 6%; bottom: 4%; font: 500 12cqw / 1 var(--f-script); color: #fffaf0; }

.cv-4 { background: #1a1a1a; }
.cv-4 .strip { left: 14%; right: 14%; top: 6%; bottom: 20%; display: flex; flex-direction: column; gap: 4%; padding: 3% 12%; background:
  radial-gradient(circle, transparent 1.6cqw, #2b2b2b 1.7cqw) 2.5% 0 / 8% 7% repeat-y, radial-gradient(circle, transparent 1.6cqw, #2b2b2b 1.7cqw) 97.5% 0 / 8% 7% repeat-y, #2b2b2b; }
.cv-4 .strip img { flex: 1; min-height: 0; width: 100%; object-fit: cover; filter: saturate(.8) sepia(.15); }
.cv-4 .m { left: 0; right: 0; bottom: 8%; text-align: center; color: #f3c35c; font: 700 11cqw / 1 var(--f-body); letter-spacing: .2em; }
.cv-4 .l2 { left: 0; right: 0; bottom: 3.5%; text-align: center; color: #f3c35c; font: 400 3.6cqw / 1 var(--f-body); letter-spacing: .3em; opacity: .8; }

.cv-5 { background: linear-gradient(160deg, #8c0a35, #5c0021); }
.cv-5 .m { left: 0; right: 0; top: 12%; text-align: center; color: #e6c27a; font: 400 10cqw / 1 var(--f-head); letter-spacing: .25em; }
.cv-5 .crest { left: 28%; top: 32%; width: 44%; aspect-ratio: 1; border: .8cqw solid #e6c27a; border-radius: 50%; }
.cv-5 .crest i { position: absolute; inset: 18%; border: .5cqw solid #e6c27a; border-radius: 50%; background: radial-gradient(circle, #e6c27a 0 12%, transparent 13%); }
.cv-5 .l2 { left: 0; right: 0; bottom: 12%; text-align: center; color: #e6c27a; font: 400 4.6cqw / 1.5 var(--f-body); letter-spacing: .2em; text-transform: uppercase; }

.cv-6 { background: #fff0c0; }
.cv-6 .ph { mix-blend-mode: multiply; object-fit: cover; }
.cv-6 .m { left: 6%; top: 4%; color: #a00034; font: 900 30cqw / .85 var(--f-body); letter-spacing: -.04em; mix-blend-mode: multiply; }
.cv-6 .l1 { left: 7%; bottom: 5%; color: #a00034; background: #fff0c0; padding: 2% 3%; font: 500 5cqw / 1.1 var(--f-body); text-transform: uppercase; }

.cv-7 { background: #efe2c8; }
.cv-7 .env { left: 10%; right: 10%; top: 26%; height: 40%; background: #fbf4e4; box-shadow: 0 2px 6px rgb(0 0 0 / .2); overflow: hidden; }
.cv-7 .env .flap { position: absolute; inset: 0 0 auto 0; height: 62%; background: #f2e5c9; clip-path: polygon(0 0, 100% 0, 50% 100%); box-shadow: inset 0 -1px 0 rgb(0 0 0 / .08); }
.cv-7 .env .seal { position: absolute; left: 50%; top: 62%; translate: -50% -50%; width: 18cqw; height: 18cqw; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c42a55, #8a0029); color: #f3c9a0; font: italic 700 10cqw / 1 var(--f-head); }
.cv-7 .m { left: 0; right: 0; top: 7%; text-align: center; color: #8a0029; font: italic 400 10cqw / 1 var(--f-head); }
.cv-7 .l2 { left: 0; right: 0; bottom: 12%; text-align: center; color: #8a0029; font: 500 7cqw / 1 var(--f-script); }

.cv-8 { background: #ead7b0; }
.cv-8 .ph { inset: 22% 12% 14% 12%; width: 76%; height: 64%; }
.cv-8 .frame { inset: 4%; border: .8cqw double #6b2a10; outline: .4cqw solid #6b2a10; outline-offset: -3cqw; z-index: 1; }
.cv-8 .m { left: 0; right: 0; top: 4%; text-align: center; color: #6b2a10; font: 700 17cqw / 1.2 var(--f-body); }
.cv-8 .l2 { left: 0; right: 0; bottom: 5%; text-align: center; color: #6b2a10; font: 400 5.4cqw / 1 var(--f-body); }

.cv-9 { background: #e9dcc5 repeating-linear-gradient(0deg, transparent 0 6cqw, rgb(160 0 52 / .08) 6cqw calc(6cqw + 1px)); }
.cv-9 .torn { left: 8%; top: 10%; width: 78%; height: 52%; rotate: -3deg; background: #fff; padding: 3%; clip-path: polygon(0 3%, 8% 0, 20% 2%, 34% 0, 50% 3%, 66% 0, 80% 2%, 100% 0, 98% 30%, 100% 60%, 97% 100%, 80% 97%, 60% 100%, 40% 97%, 20% 100%, 0 98%, 2% 60%); }
.cv-9 .torn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-9 .tick { right: 4%; top: 58%; rotate: 8deg; padding: 2% 5%; background: #f3c35c; color: #6b2a10; font: 700 4.4cqw / 1 var(--f-body); letter-spacing: .15em; border: 1px dashed #6b2a10; }
.cv-9 .tape { left: 34%; top: 7%; width: 28%; height: 6%; background: rgb(255 240 192 / .75); rotate: 4deg; z-index: 3; }
.cv-9 .m { left: 8%; bottom: 7%; color: #a00034; font: 500 13cqw / 1 var(--f-script); rotate: -4deg; }

.cv-10 { background: #fbf8f2; }
.cv-10 .ph { inset: 16% 14% 20% 14%; width: 72%; height: 64%; }
.cv-10 .m { left: 0; right: 0; top: 4%; text-align: center; color: #222; font: 400 9cqw / 1 var(--f-head); }
.cv-10 .l2 { left: 0; right: 0; bottom: 7%; text-align: center; color: #555; font: 400 3.6cqw / 1 var(--f-body); letter-spacing: .25em; text-transform: uppercase; }


/* her photos are of finished magazines, so each cover crops in to the person
   and leaves the old cover's own lettering out of frame */
.cv-1 .ph { object-position: 42% 46%; transform: scale(1.75); transform-origin: 42% 40%; }
.cv-2 .ph { object-position: 50% 55%; }
.cv-2 .ph { transform: scale(1); }
.cv-2 .m { font-size: 10cqw; white-space: nowrap; }
.cv-2 .dt { top: 17%; font-size: 3cqw; white-space: nowrap; overflow: hidden; }
.cv-2 .hl { top: 23%; }
.cv-10 .ph { object-position: 50% 62%; }
.cv-2 .crop { left: 6%; right: 6%; bottom: 22%; height: 34%; overflow: hidden; }
.cv-2 .crop img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; transform: scale(1.8); transform-origin: 55% 55%; }
.cv-1 .ph { transform: scale(2.1); transform-origin: 40% 60%; }