/* VNN story covers: three branded slides for stories without a photo yet: Breaking (red), Developing (amber),
   Following (blue) and the calm VNN version for a story with no label (navy and silver, with the logo's crimson).
   Slide 1 lands the story, slide 2 the brand, slide 3 asks readers to follow it. Each slide enters with its own
   effect (shutters, diagonal wipe, iris zoom). Sizes follow the cover's width (container units), so it looks the
   same in a story, on a phone and in the editor. */

@property --vcn-slat { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.vcn-cover {
  --c: var(--breaking, #e0123a); --c-hi: var(--breaking-hi, #ff5372); --c-lo: var(--breaking-lo, #a3082a); --c-ink: #fff;
  --sans-c: var(--sans, "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --serif-c: var(--serif, "Newsreader", "Iowan Old Style", Georgia, serif);
  --ease-c: cubic-bezier(.22, .7, .2, 1);
  --hold: 4800ms;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; container-type: inline-size;
  border-radius: var(--r-xl, 26px); color: #fff; background: #07122a; font-family: var(--sans-c);
  box-shadow: 0 2px 6px rgba(11, 27, 51, .06), 0 26px 50px -22px rgba(11, 27, 51, .38);
}
.vcn-cover--developing { --c: var(--developing, #f5a20a); --c-hi: var(--developing-hi, #ffc94d); --c-lo: var(--developing-lo, #d27200); --c-ink: var(--developing-ink, #2a1600); }
.vcn-cover--following { --c: var(--following, #2563eb); --c-hi: var(--following-hi, #5d91ff); --c-lo: var(--following-lo, #1b46b5); --c-ink: #fff; }
/* The calm version: chrome silver on navy, like the logo's lettering, with the logo's crimson. Blue stays Following's. */
.vcn-cover--story { --c: #b9c7db; --c-hi: #eef3fa; --c-lo: #7d91ae; --c-ink: var(--ink, #0b1b33); --c-key: var(--accent, #d4123c); --c-key-hi: var(--accent-hi, #ff4d6d); }

/* ---------- Backdrop: navy depth, a glow in the story's colour, a moving newsroom floor, the split V ---------- */
.vcn-cover__bg { position: absolute; inset: -6%; z-index: 0;
  background:
    radial-gradient(55% 75% at 8% 100%, color-mix(in srgb, var(--c) 55%, transparent), transparent 62%),
    radial-gradient(60% 85% at 92% 0%, rgba(44, 91, 156, .8), transparent 60%),
    linear-gradient(140deg, #14325e 0%, #0a1a35 52%, #040b19 100%);
  animation: vcn-drift 18s ease-in-out infinite alternate; }
@keyframes vcn-drift { to { transform: scale(1.06) translate(-1.5%, 1%); } }
.vcn-cover--story .vcn-cover__bg { background:
    radial-gradient(55% 75% at 8% 100%, rgba(44, 91, 156, .62), transparent 62%),
    radial-gradient(34% 52% at 88% 92%, rgba(212, 18, 60, .16), transparent 70%),
    radial-gradient(60% 85% at 92% 0%, rgba(44, 91, 156, .8), transparent 60%),
    linear-gradient(140deg, #14325e 0%, #0a1a35 52%, #040b19 100%); }
.vcn-cover__floor { position: absolute; left: -20%; right: -20%; bottom: -8%; height: 62%; z-index: 0; opacity: .55;
  transform: perspective(40cqw) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); overflow: hidden; }
/* 2.18.3: the grid moves on its own layer (transform), so the floor is not repainted every frame. */
.vcn-cover__floor::before { content: ""; position: absolute; left: 0; right: 0; top: -4.4cqw; bottom: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 4.4cqw 4.4cqw; will-change: transform; animation: vcn-floor-grid 2.4s linear infinite; }
.vcn-cover__floor { background-image: none; animation: none; } /* older cached first-screen styles animated the floor itself */
@keyframes vcn-floor-grid { to { transform: translateY(4.4cqw); } }
.vcn-cover__v { position: absolute; z-index: 0; right: -3%; top: 50%; width: 50%; aspect-ratio: 46 / 37; translate: 0 -50%; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 14 46 37'%3E%3Cpath d='M9 14H22.5L32 38.5L29.6 45Z' fill='%23fff'/%3E%3Cpath d='M55 14H41.5L32 38.5L34.4 45L32 51Z' fill='%23ff4d6d'/%3E%3Cpath d='M29.6 45L32 51L34.4 45L32 38.5Z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: vcn-v 18s ease-in-out infinite alternate; }
@keyframes vcn-v { to { transform: scale(1.12) rotate(-2deg); opacity: .2; } }
.vcn-cover__beam { position: absolute; z-index: 4; top: -30%; bottom: -30%; left: -40%; width: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent); transform: skewX(-18deg);
  will-change: transform; animation: vcn-beam 6.5s var(--ease-c) infinite; }
@keyframes vcn-beam { 0%, 55% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(170cqw) skewX(-18deg); } }
/* 2.18.3: no blend mode (it made the browser re-blend the whole cover on every video frame). */
.vcn-cover__grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .3;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); }

/* ---------- The story's subject: a cut-out on the right of slide 1, under the words ----------
   2.15.1 (publisher, 10 Nov 2026): it lives inside slide 1, so it is a permanent part of that slide and never shows on
   the brand or follow slides; it is large (up to two thirds of the width, nearly the full height), stands on the band
   with its own soft shadow, and is lit gently in the label's colour so it sits in the scene rather than on top of it. */
.vcn-cover__slide--alert > :not(.vcn-cover__subject):not(.vcn-cover__photo):not(.vcn-cover__motion):not(.vcn-cover__band) { position: relative; z-index: 1; }
/* Sized by height (publisher, 10 Nov 2026: fill the cover, the top of the subject near the top edge): it always stands
   about nine tenths of the cover's height, centred on the right part of the cover; a wide subject (a tree, a skyline)
   spreads off the right edge rather than shrinking. */
.vcn-cover__subject { position: absolute; z-index: 0; left: 38%; right: -14%; bottom: 4.9cqw; height: 88%; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; }
.vcn-cover .is-current .vcn-cover__subject { animation: vcn-subject-in 1.3s .1s var(--ease-c) both, vcn-subject-drift 14s 1.5s ease-in-out infinite alternate; }
.vcn-cover__figure { position: relative; z-index: 1; display: block; flex: none; height: 100%; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 2.4cqw color-mix(in srgb, var(--c-rim, var(--c)) 12%, transparent)) drop-shadow(0 1cqw 1.4cqw rgba(2, 8, 20, .5)) saturate(.94);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.vcn-cover__subject img { display: block; height: 100%; width: auto; max-width: none; }
/* Tone (2.15.2): the scene's own light on the subject. Cut to the image's shape: a cool lift from the top right (where
   the backdrop glows), navy shade rising from the ground and from the left, so it belongs to the cover's light. */
.vcn-cover__tone { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--subj) center / 100% 100% no-repeat; mask: var(--subj) center / 100% 100% no-repeat;
  background:
    radial-gradient(75% 65% at 88% 0%, rgba(150, 190, 255, .26), transparent 62%),
    linear-gradient(to top, rgba(7, 18, 42, .7) 0%, rgba(7, 18, 42, .34) 24%, transparent 58%),
    linear-gradient(90deg, rgba(7, 18, 42, .5), transparent 46%); }
/* Ground haze: the base sinks into the floor rather than standing on a line. */
.vcn-cover__mist { position: absolute; z-index: 2; left: -12%; right: -2%; bottom: -1cqw; height: 19%; pointer-events: none;
  background: radial-gradient(60% 100% at 55% 100%, color-mix(in srgb, var(--c-rim, var(--c)) 14%, transparent), transparent 70%), linear-gradient(to top, rgba(9, 24, 52, .86) 0%, rgba(11, 28, 60, .4) 46%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.vcn-cover__halo { position: absolute; z-index: 0; right: 4%; bottom: 6%; width: 92%; height: 92%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-rim, var(--c)) 26%, transparent), color-mix(in srgb, var(--navy-glow, #2c5b9c) 18%, transparent) 55%, transparent 78%);
  animation: vcn-halo 6s ease-in-out infinite alternate; }
.vcn-cover--story { --c-rim: var(--c-key, #d4123c); }
@keyframes vcn-subject-in { from { opacity: 0; transform: translateX(4cqw) scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes vcn-subject-drift { to { transform: scale(1.025) translateX(-.6%); } }
@keyframes vcn-halo { from { opacity: .65; } to { opacity: 1; } }
/* On slide 1 the subject takes the V's place on the right; the V comes back for the other two slides, as before. */
.vcn-cover--has-subject:has(.vcn-cover__slide--alert.is-current) .vcn-cover__v { visibility: hidden; }
/* The words stay on top, a little narrower so the subject has room, with a shadow that keeps them readable over it.
   Narrower means more lines, so the whole headline still fits: one more line, a touch smaller. */
.vcn-cover--has-subject .vcn-cover__hero { max-width: 64%; -webkit-line-clamp: 4; text-shadow: 0 .4cqw 2.8cqw rgba(4, 11, 25, .85); }
.vcn-cover--has-subject .vcn-cover__hero--lg { font-size: 4.9cqw; }
.vcn-cover--has-subject .vcn-cover__hero--md { font-size: 4.1cqw; }
.vcn-cover--has-subject .vcn-cover__hero--sm { font-size: 3.5cqw; -webkit-line-clamp: 5; }
.vcn-cover--has-subject .vcn-cover__headline { max-width: 62%; -webkit-line-clamp: 3; font-size: 2.9cqw; text-shadow: 0 .3cqw 2.2cqw rgba(4, 11, 25, .9); }
.vcn-cover--has-subject .vcn-cover__mega span:first-child { text-shadow: 0 0 4cqw color-mix(in srgb, var(--c) 55%, transparent), 0 .4cqw 2.4cqw rgba(4, 11, 25, .7); }

/* ---------- Cover photo (2.15.3): the story's own photo fills slide 1, the headline on a highlighted band ----------
   Publisher, 10 Nov 2026: "place the title under highlighted background and stick it only to first cover". The photo
   lives inside slide 1, so the brand and follow slides stay as they are. */
.vcn-cover__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #07122a; }
.vcn-cover__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; max-width: none; }
.vcn-cover .is-current .vcn-cover__photo img { animation: vcn-photo 16s ease-out both; }
@keyframes vcn-photo { from { transform: scale(1.1); } to { transform: scale(1.01); } }
.vcn-cover__photo::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 18, 42, .72) 0%, rgba(7, 18, 42, .38) 46%, rgba(7, 18, 42, 0) 78%),
    linear-gradient(0deg, rgba(4, 11, 25, .78) 0%, rgba(4, 11, 25, 0) 40%),
    linear-gradient(180deg, rgba(4, 11, 25, .5) 0%, rgba(4, 11, 25, 0) 24%); }
.vcn-cover--has-photo:has(.vcn-cover__slide--alert.is-current) .vcn-cover__v { visibility: hidden; }
/* The highlight: a solid bar behind each line of the headline, in VNN's crimson (the calm version) or the label's colour. */
.vcn-cover--has-photo .vcn-cover__hero, .vcn-cover--subject-full .vcn-cover__hero { max-width: 82%; line-height: 1.34; -webkit-line-clamp: 4; }
.vcn-cover--has-photo .vcn-cover__hero--xl, .vcn-cover--subject-full .vcn-cover__hero--xl { font-size: 5.6cqw; }
.vcn-cover--has-photo .vcn-cover__hero--lg, .vcn-cover--subject-full .vcn-cover__hero--lg { font-size: 4.7cqw; }
.vcn-cover--has-photo .vcn-cover__hero--md, .vcn-cover--subject-full .vcn-cover__hero--md { font-size: 4cqw; }
.vcn-cover--has-photo .vcn-cover__hero--sm, .vcn-cover--subject-full .vcn-cover__hero--sm { font-size: 3.4cqw; -webkit-line-clamp: 5; }
/* Each word carries the bar; the bars overlap a little so every line reads as one solid highlight. */
.vcn-cover--has-photo .vcn-cover__hero span, .vcn-cover--subject-full .vcn-cover__hero span { padding: .02em .22em .08em; margin: 0 -.14em; color: #fff;
  background: var(--c-key, var(--c)); }
.vcn-cover--has-photo:not(.vcn-cover--story) .vcn-cover__hero span, .vcn-cover--subject-full:not(.vcn-cover--story) .vcn-cover__hero span { color: var(--c-ink); }
.vcn-cover--has-photo .vcn-cover__headline, .vcn-cover--subject-full .vcn-cover__headline { max-width: 74%; line-height: 1.42; -webkit-line-clamp: 3; }
.vcn-cover--has-photo .vcn-cover__headline span, .vcn-cover--subject-full .vcn-cover__headline span { padding: .06em .3em .1em; color: var(--c-ink);
  background: linear-gradient(180deg, var(--c-hi), var(--c) 60%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vcn-cover--has-photo .vcn-cover__mega span:first-child, .vcn-cover--subject-full .vcn-cover__mega span:first-child { text-shadow: 0 .4cqw 2.4cqw rgba(4, 11, 25, .8); }
/* Over a photo the two big words step back so the picture shows (2.15.4). */
.vcn-cover.vcn-cover--has-photo .vcn-cover__mega, .vcn-cover.vcn-cover--subject-full .vcn-cover__mega { font-size: 7.4cqw; }

/* ---------- Group layout (2.15.5): more than one person fills the whole cover, everyone in frame ----------
   Publisher, 10 Nov 2026: a single person stands to the side; two or more fill the cover so all are seen. The
   headline sits on highlighted bars over them (the same bars as a cover photo). */
.vcn-cover--subject-full .vcn-cover__subject { left: 2%; right: 2%; height: 86%; }
.vcn-cover--subject-full .vcn-cover__figure { width: 100%; display: flex; align-items: flex-end; justify-content: center;
  -webkit-mask-image: none; mask-image: none; }
.vcn-cover--subject-full .vcn-cover__subject img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.vcn-cover--subject-full .vcn-cover__tone { display: none; }
.vcn-cover--subject-full .vcn-cover__mist { left: -4%; right: -4%; -webkit-mask-image: none; mask-image: none; }
.vcn-cover--subject-full .vcn-cover__halo { right: 6%; width: 88%; }
/* The headline sits low so faces stay clear; over a group the pill carries the label, so the big words step aside. */
.vcn-cover--subject-full .vcn-cover__stroke { margin-top: auto; }
.vcn-cover--subject-full.vcn-cover--story .vcn-cover__meta { margin-top: 1.2cqw; }
.vcn-cover.vcn-cover--subject-full .vcn-cover__mega { display: none; }
.vcn-cover.vcn-cover--subject-full .vcn-cover__headline { font-size: 3.7cqw; max-width: 80%; }

/* ---------- Motion cover (2.16.0): a silent loop fills slide 1 of every cover without an image ----------
   Breaking: the alert radar. Developing: a story taking shape. Following: the tracker. No label: the connected world.
   The action is on the right; a soft shade on the left keeps the headline clear. Slides 2 and 3 are unchanged. */
.vcn-cover__motion { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #07122a center / cover no-repeat; }
.vcn-cover__motion video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vcn-cover__motion::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 11, 25, .62) 0%, rgba(4, 11, 25, .32) 44%, rgba(4, 11, 25, 0) 66%),
              linear-gradient(0deg, rgba(4, 11, 25, .55) 0%, rgba(4, 11, 25, 0) 30%); }
.vcn-cover--has-motion:has(.vcn-cover__slide--alert.is-current) .vcn-cover__v { visibility: hidden; }
.vcn-cover--has-motion .vcn-cover__hero { max-width: 60%; -webkit-line-clamp: 4; text-shadow: 0 .3cqw 2.4cqw rgba(4, 11, 25, .85); }
.vcn-cover--has-motion .vcn-cover__hero--xl { font-size: 5.8cqw; }
.vcn-cover--has-motion .vcn-cover__hero--lg { font-size: 4.9cqw; }
.vcn-cover--has-motion .vcn-cover__hero--md { font-size: 4.1cqw; }
.vcn-cover--has-motion .vcn-cover__hero--sm { font-size: 3.5cqw; -webkit-line-clamp: 5; }
/* 2.17.3 (publisher, 12 Nov 2026: "the titles are too small in the breaking covers ... they are disappearing"): the
   headline is the star of slide 1, the two big words step back to make room. */
.vcn-cover.vcn-cover--has-motion .vcn-cover__headline { max-width: 70%; -webkit-line-clamp: 4; font: 700 4.25cqw/1.07 var(--serif-c); letter-spacing: -.015em;
  text-shadow: 0 .3cqw 2.6cqw rgba(4, 11, 25, .95), 0 0 .8cqw rgba(4, 11, 25, .6); }
.vcn-cover.vcn-cover--has-motion .vcn-cover__mega { font-size: 7.6cqw; text-shadow: 0 .4cqw 2.4cqw rgba(4, 11, 25, .6); }

/* ---------- Desk covers (2.17.0): Entertainment in black and gold, Lifestyle in purple and orchid ----------
   They are calm covers (the markup carries vcn-cover--story too), so only their colours change here. */
.vcn-cover--story.vcn-cover--entertainment { --c: #d9c79c; --c-hi: #f6e7bf; --c-lo: #9c8656; --c-ink: #0a0a0c; --c-key: #e8b84c; --c-key-hi: #ffd77a; --c-rim: #e8b84c; background: #050506; }
.vcn-cover--story.vcn-cover--entertainment .vcn-cover__bg { background:
    radial-gradient(55% 75% at 8% 100%, rgba(232, 184, 76, .22), transparent 62%),
    radial-gradient(60% 85% at 92% 0%, rgba(90, 84, 70, .55), transparent 60%),
    linear-gradient(140deg, #1d1c1f 0%, #0b0b0d 52%, #020203 100%); }
.vcn-cover--story.vcn-cover--entertainment .vcn-cover__band { background: linear-gradient(180deg, #232226, #121214 50%, #050506); color: #f2ead6; }
.vcn-cover--story.vcn-cover--lifestyle { --c: #dcc6f5; --c-hi: #f3e9ff; --c-lo: #9b7cc4; --c-ink: #2a0f45; --c-key: #ff70c4; --c-key-hi: #ff9bd6; --c-rim: #ff70c4; background: #1a0a2e; }
.vcn-cover--story.vcn-cover--lifestyle .vcn-cover__bg { background:
    radial-gradient(55% 75% at 8% 100%, rgba(255, 112, 196, .3), transparent 62%),
    radial-gradient(60% 85% at 92% 0%, rgba(150, 90, 230, .7), transparent 60%),
    linear-gradient(140deg, #4a1f7c 0%, #2a1050 52%, #12061f 100%); }
.vcn-cover--story.vcn-cover--lifestyle .vcn-cover__band { background: linear-gradient(180deg, #6a2fa8, #4a1f7c 50%, #2a1050); color: #f3e9ff; }
.vcn-cover--entertainment .vcn-cover__motion::after { background: linear-gradient(90deg, rgba(2, 2, 3, .66) 0%, rgba(2, 2, 3, .34) 44%, rgba(2, 2, 3, 0) 66%), linear-gradient(0deg, rgba(2, 2, 3, .55) 0%, rgba(2, 2, 3, 0) 30%); }
.vcn-cover--lifestyle .vcn-cover__motion::after { background: linear-gradient(90deg, rgba(20, 6, 36, .6) 0%, rgba(20, 6, 36, .3) 44%, rgba(20, 6, 36, 0) 66%), linear-gradient(0deg, rgba(20, 6, 36, .5) 0%, rgba(20, 6, 36, 0) 30%); }

/* ---------- Progress, like story slides ---------- */
.vcn-cover__progress { position: absolute; z-index: 6; top: 3.2cqw; right: 4cqw; display: flex; gap: .7cqw; }
.vcn-cover__progress i { position: relative; width: 4.6cqw; height: .38cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .25); overflow: hidden; }
.vcn-cover__progress i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: #fff; }
.vcn-cover__progress i.is-done::after { transform: scaleX(1); }
.vcn-cover__progress i.is-on::after { animation: vcn-bar var(--hold) linear both; }
@keyframes vcn-bar { to { transform: scaleX(1); } }

/* ---------- Slides and how they enter ---------- */
.vcn-cover__slide { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 5.6cqw 6.4cqw; visibility: hidden; }
.vcn-cover__slide.is-current { z-index: 3; visibility: visible; }
.vcn-cover__slide.is-prev { z-index: 2; visibility: visible; animation: vcn-exit .95s var(--ease-c) both; }
@keyframes vcn-exit { 0% { opacity: 1; } 45% { opacity: .12; } 100% { transform: scale(1.04); opacity: 0; } } /* 2.18.4: gone before the new slide's words rise, so the two never overlap */
.vcn-cover__slide.enter-blinds { animation: vcn-blinds 1s var(--ease-c) both;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--vcn-slat) * .1667), transparent calc(var(--vcn-slat) * .1667) 16.667%);
  mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--vcn-slat) * .1667), transparent calc(var(--vcn-slat) * .1667) 16.667%); }
@keyframes vcn-blinds { from { --vcn-slat: 0%; } to { --vcn-slat: 100%; } }
.vcn-cover__slide.enter-wipe { animation: vcn-wipe .95s var(--ease-c) both; }
@keyframes vcn-wipe { from { clip-path: polygon(0 0, 0 0, -22% 100%, 0 100%); } to { clip-path: polygon(0 0, 122% 0, 100% 100%, 0 100%); } }
.vcn-cover__slide.enter-iris { animation: vcn-iris 1.05s var(--ease-c) both; }
@keyframes vcn-iris { from { clip-path: circle(0% at 50% 55%); transform: scale(1.14); } to { clip-path: circle(125% at 50% 55%); transform: none; } }
.vcn-cover__edge { position: absolute; z-index: 4; top: -10%; bottom: -10%; left: -8%; width: 1.1cqw; opacity: 0; pointer-events: none;
  background: linear-gradient(var(--c-hi), var(--c)); box-shadow: 0 0 3.5cqw 1cqw color-mix(in srgb, var(--c) 70%, transparent); transform: skewX(-12deg); }
.vcn-cover.is-wiping .vcn-cover__edge { animation: vcn-edge .95s var(--ease-c) both; }
@keyframes vcn-edge { 0% { transform: translateX(0) skewX(-12deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(120cqw) skewX(-12deg); opacity: 0; } }

/* Each line rises in after its slide lands. */
.vcn-cover [data-in] { opacity: 0; }
.vcn-cover .is-current [data-in] { animation: vcn-in .85s var(--ease-c) both; animation-delay: calc(380ms + var(--d, 0) * 130ms); }
@keyframes vcn-in { from { opacity: 0; transform: translateY(2.4cqw); } to { opacity: 1; transform: none; } } /* 2.18.3: no blur, it was redrawn every frame */

/* ---------- Slide 1: the story lands ---------- */
.vcn-cover__flag, .vcn-cover__kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 1.1cqw; margin: 0; padding: .9cqw 1.8cqw .9cqw 1.4cqw; border-radius: 99cqw;
  background: linear-gradient(180deg, var(--c-hi), var(--c) 55%, var(--c-lo)); color: var(--c-ink);
  font: 800 1.55cqw/1 var(--sans-c); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1.2cqw 3cqw -1cqw color-mix(in srgb, var(--c) 80%, transparent); }
.vcn-cover__pulse { position: relative; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: currentColor; flex: none; }
/* 2.18.3: the ring is a scaled copy of the dot (transform and opacity), not an animated shadow. */
.vcn-cover__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: vcn-pulse 1.4s ease-out infinite; }
@keyframes vcn-pulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(3.5); opacity: 0; } 100% { transform: scale(3.5); opacity: 0; } }
/* Following's ring and the calm version's crimson keystone stay still: only live labels pulse. */
.vcn-cover__ring { width: 1.25cqw; height: 1.25cqw; flex: none; border-radius: 50%; border: .24cqw solid currentColor; background: radial-gradient(circle, currentColor 0 26%, transparent 30%); }
.vcn-cover__key { width: 1cqw; height: 1cqw; flex: none; border-radius: .14cqw; transform: rotate(45deg); background: linear-gradient(135deg, var(--c-key-hi, #ff4d6d), var(--c-key, #d4123c)); }
.vcn-cover__mega { margin: 2.6cqw 0 0; font: 900 12.4cqw/.84 var(--sans-c); letter-spacing: -.035em; text-transform: uppercase; }
.vcn-cover--developing .vcn-cover__mega, .vcn-cover--following .vcn-cover__mega { font-size: 10.6cqw; }
.vcn-cover__mega span { display: block; }
.vcn-cover__mega span:first-child { text-shadow: 0 0 4cqw color-mix(in srgb, var(--c) 55%, transparent); }
.vcn-cover__mega span:last-child { color: transparent; -webkit-text-stroke: .22cqw rgba(255, 255, 255, .92);
  background: linear-gradient(100deg, transparent 0 35%, var(--c-hi) 45%, var(--c) 55%, transparent 65%) 0 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.vcn-cover .is-current .vcn-cover__mega span:last-child { animation: vcn-in .85s var(--ease-c) both, vcn-fill 3.2s 1.1s var(--ease-c) both; animation-delay: calc(380ms + var(--d, 0) * 130ms), 1.1s; }
@keyframes vcn-fill { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vcn-cover__headline { margin: auto 0 0; max-width: 78%; font: 600 3.25cqw/1.16 var(--serif-c); letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcn-cover__meta { margin: 1.3cqw 0 6.6cqw; font: 700 1.4cqw/1 var(--sans-c); letter-spacing: .1em; text-transform: uppercase; color: rgba(214, 226, 242, .8); }
.vcn-cover__meta b { color: var(--c-hi); font-weight: 800; }
.vcn-cover__band { position: absolute; left: 0; right: 0; bottom: 0; height: 5.2cqw; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(180deg, var(--c-hi), var(--c) 50%, var(--c-lo)); color: var(--c-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.vcn-cover__band div { display: flex; flex: none; white-space: nowrap; font: 800 1.6cqw/1 var(--sans-c); letter-spacing: .16em; text-transform: uppercase; animation: vcn-marquee 16s linear infinite; }
.vcn-cover__band span { padding-right: 2.4cqw; }
.vcn-cover__band span::after { content: "\25CF"; margin-left: 2.4cqw; opacity: .7; font-size: .8em; }
@keyframes vcn-marquee { to { transform: translateX(-50%); } }

/* ---------- Slide 1 on the calm version: the headline is the hero, word by word, under a crimson rule ---------- */
.vcn-cover__stroke { display: block; width: 9cqw; height: .45cqw; margin: 3cqw 0 0; border-radius: 1cqw; flex: none;
  background: linear-gradient(90deg, var(--c-key, #d4123c), var(--c-key-hi, #ff4d6d)); transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 2cqw rgba(212, 18, 60, .45); }
.vcn-cover .is-current .vcn-cover__stroke { animation: vcn-stroke .9s .5s var(--ease-c) both; }
@keyframes vcn-stroke { to { transform: scaleX(1); } }
.vcn-cover__hero { margin: 2.2cqw 0 0; max-width: 84%; font: 600 5.4cqw/1.1 var(--serif-c); letter-spacing: -.015em; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .35); }
.vcn-cover__hero--xl { font-size: 6.6cqw; }
.vcn-cover__hero--md { font-size: 4.6cqw; }
.vcn-cover__hero--sm { font-size: 3.9cqw; -webkit-line-clamp: 4; }
.vcn-cover__hero span { display: inline-block; opacity: 0; }
.vcn-cover .is-current .vcn-cover__hero span { animation: vcn-word .7s var(--ease-c) both; animation-delay: calc(560ms + min(var(--w, 0), 24) * 45ms); }
@keyframes vcn-word { from { opacity: 0; transform: translateY(1.8cqw); } to { opacity: 1; transform: none; } }
.vcn-cover--story .vcn-cover__stroke, .vcn-cover--story .vcn-cover__meta { margin-top: auto; } /* the headline sits in the middle */
.vcn-cover--story .vcn-cover__meta b { color: #fff; }
.vcn-cover--story .vcn-cover__band { background: linear-gradient(180deg, #1c3a66, #12284a 50%, #0b1b33); color: #e3eaf4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.vcn-cover--story .vcn-cover__band span::after { color: var(--c-key-hi, #ff4d6d); opacity: 1; }
.vcn-cover--story .vcn-cover__big em { color: var(--c-key-hi, #ff4d6d); }

/* ---------- Slide 2: the brand ---------- */
.vcn-cover__slide--brand { align-items: center; justify-content: center; text-align: center; }
.vcn-cover__slide--brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(48% 62% at 50% 46%, rgba(44, 91, 156, .55), transparent 70%); }
.vcn-cover__lockup { width: 64cqw; }
.vcn-cover__lockup svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1.4cqw 3cqw rgba(0, 0, 0, .45)); }
.vcn-cover .is-current .vcn-cover__lockup .vnn-arm-l { transform-box: fill-box; animation: vcn-arm-l 1.1s .45s var(--ease-c) both; }
.vcn-cover .is-current .vcn-cover__lockup .vnn-arm-r { transform-box: fill-box; animation: vcn-arm-r 1.1s .45s var(--ease-c) both; }
@keyframes vcn-arm-l { from { transform: translate(-60%, -30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vcn-arm-r { from { transform: translate(60%, -30%); opacity: 0; } to { transform: none; opacity: 1; } }
.vcn-cover__tagline { margin: 3.4cqw 0 0; font: italic 500 4.3cqw/1.12 var(--serif-c); letter-spacing: -.01em; color: #fff; }
.vcn-cover__rule { display: flex; align-items: center; gap: 1.6cqw; margin: 2.8cqw 0 0; font: 800 1.45cqw/1 var(--sans-c); letter-spacing: .2em; text-transform: uppercase; color: var(--c-hi); }
.vcn-cover__rule::before, .vcn-cover__rule::after { content: ""; width: 7cqw; height: .2cqw; background: linear-gradient(90deg, transparent, var(--c-hi)); }
.vcn-cover__rule::after { transform: scaleX(-1); }

/* ---------- Slide 3: follow the story ---------- */
.vcn-cover__slide--follow { justify-content: center; }
.vcn-cover__big { margin: 2.8cqw 0 0; font: 850 7.9cqw/.96 var(--sans-c); letter-spacing: -.035em; }
.vcn-cover__big em { font-style: normal; color: var(--c-hi); }
.vcn-cover__sub { margin: 2.4cqw 0 0; max-width: 62%; font: 500 2.15cqw/1.35 var(--serif-c); color: rgba(225, 233, 245, .88); }
.vcn-cover__cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 1.3cqw; margin-top: 3.2cqw; padding: 1.25cqw 2.4cqw 1.25cqw 1.5cqw; border-radius: 99cqw;
  border: .14cqw solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .13);
  font: 800 1.7cqw/1 var(--sans-c); letter-spacing: .02em; }
.vcn-cover__bell { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: linear-gradient(180deg, var(--c-hi), var(--c)); color: var(--c-ink); }
.vcn-cover__bell svg { width: 55%; height: 55%; }
.vcn-cover .is-current .vcn-cover__bell svg { animation: vcn-ring 2.4s 1.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes vcn-ring { 0%, 40%, 100% { transform: rotate(0); } 5% { transform: rotate(16deg); } 10% { transform: rotate(-14deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-6deg); } 25% { transform: rotate(0); } }
.vcn-cover__sign { position: absolute; right: 6.4cqw; bottom: 5.4cqw; display: flex; align-items: center; gap: 1.2cqw; font: 700 1.45cqw/1 var(--sans-c); letter-spacing: .08em; text-transform: uppercase; color: rgba(214, 226, 242, .8); }
.vcn-cover__sign svg { width: 4.2cqw; height: 4.2cqw; }

/* ---------- The still version: front-page cards, the carousel, share images ---------- */
.vcn-cover--still *, .vcn-cover--still *::before, .vcn-cover--still *::after { animation: none !important; }
.vcn-cover--still [data-in], .vcn-cover--still .vcn-cover__hero span { opacity: 1; }
.vcn-cover--still .vcn-cover__stroke { transform: none; }
.vcn-cover--still .vcn-cover__mega span:last-child { background-position: 0 0; }
.vcn-cover--still .vcn-cover__progress, .vcn-cover--still .vcn-cover__beam { display: none; }

/* ---------- Paused (pointer over it), and devices that ask for less motion ---------- */
.vcn-cover.is-paused *, .vcn-cover.is-paused *::before, .vcn-cover.is-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .vcn-cover *, .vcn-cover *::before, .vcn-cover *::after { animation: none !important; }
  .vcn-cover [data-in], .vcn-cover__hero span { opacity: 1; }
  .vcn-cover__stroke { transform: none; }
  .vcn-cover__mega span:last-child { background-position: 0 0; }
}

/* ---------- In the theme's story header ---------- */
.vnn-article__cover > .vcn-cover { width: 100%; }
.vcn-cover p { margin-bottom: 0; }

/* ---------- The editor panel (VNN story cover) ---------- */
.vcn-cover-editor__help { margin: 0 0 12px; color: #757575; font-size: 12px; }
.vcn-cover-editor__opt { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; width: 100%; margin: 0 0 8px; padding: 10px 12px; border: 1px solid #dcdcde; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.vcn-cover-editor__opt i { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(#ff5372, #e0123a 55%, #a3082a); }
.vcn-cover-editor__opt--developing i { color: #2a1600; background: linear-gradient(#ffc94d, #f5a20a 55%, #d27200); }
.vcn-cover-editor__opt--following i { background: linear-gradient(#5d91ff, #2563eb 55%, #1b46b5); }
.vcn-cover-editor__opt--story i { color: #ff4d6d; background: linear-gradient(#1c3a66, #12284a 55%, #0b1b33); }
.vcn-cover-editor__opt strong { font-size: 13px; }
.vcn-cover-editor__opt small { color: #757575; font-size: 11.5px; }
.vcn-cover-editor__opt[aria-pressed="true"] { border-color: #1e1e1e; box-shadow: 0 0 0 1px #1e1e1e; background: #f6f8fc; }
.vcn-cover-editor__opt:disabled { opacity: .55; cursor: default; }
.vcn-cover-editor__off { margin: 0 0 10px; padding: 0; border: 0; background: none; color: #3858e9; text-decoration: underline; cursor: pointer; font-size: 12px; }
.vcn-cover-editor__msg { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid #3858e9; background: #f0f6fc; font-size: 12px; }
.vcn-cover-editor__preview { margin-top: 12px; }
.vcn-cover-editor__preview .vcn-cover { border-radius: 8px; box-shadow: none; }