/* ============================================================
   Magazine page block — the pages behind a cover, so a flat
   cover reads as a real magazine.

   Seen from a little to the right and below: the fore-edge (the
   right side) shows as a slab of paper with fine sheet lines,
   shaded where it meets the cover and lit across the middle; the
   foot (the bottom) shows the pages' underside, darker, and tapers
   to nothing at the spine on the left, where the pages are bound.
   Sizes follow the cover (cqw), so a thumbnail and a hero cover
   keep the same proportions.

   Every cover component in the site gets it here: the overview
   (.ea-cover), the edition pages (.wx-cover) and the article
   badges (.ed-cover). A new kind of cover: add its class to the
   three selector lists below.
   ============================================================ */
:root {
  /* the earlier box-shadow page edges, kept as no-op hooks */
  --mag-pages-lg: 0 0 0 0 transparent;
  --mag-pages: 0 0 0 0 transparent;
  --mag-pages-sm: 0 0 0 0 transparent;
}

/* the pages sit outside the cover's box, so the cover no longer clips;
   the artwork keeps the rounded corners itself */
.ea-cover, .wx-cover, .ed-cover { overflow: visible !important; isolation: isolate; }
.ea-cover .art, .wx-cover img.art, .ed-cover__art { border-radius: inherit; }
.ea-cover-lines::before, .wx-cover-lines::before { border-radius: 0 0 3px 3px; }
/* the cover lines carry their own white fade (a ::before at z-index -1): keep it
   above the artwork now that the cover is its own stacking context */
.ea-cover-lines, .wx-cover-lines { z-index: 1; }

/* the spine: the cover curls down into the binding on the left, so it falls into
   shadow there, with a thin highlight where the fold turns back to the light.
   Normal blending (the older sheen layer screened, which can only lighten). */
.ea-cover::after, .wx-cover::after, .ed-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; mix-blend-mode: normal !important;
  background:
    linear-gradient(90deg,
      rgba(8, 12, 20, .3) 0, rgba(8, 12, 20, .17) .8%, rgba(8, 12, 20, .07) 2%,
      rgba(255, 255, 255, .18) 3%, rgba(255, 255, 255, .04) 4.6%,
      rgba(8, 12, 20, .04) 6.5%, rgba(8, 12, 20, 0) 10%),
    linear-gradient(calc(115deg + var(--sheen, 0deg)), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, 0) 65%) !important;
}

.ea-cover::before, .wx-cover::before, .ed-cover::before {
  --fore: max(1.2px, 1.15cqw);           /* depth of the page block at the fore-edge (a slim glossy issue) */
  --foot: max(1px, .75cqw);              /* at the fore-edge corner; nothing at the spine */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; top: 0; right: calc(-1 * var(--fore)); bottom: calc(-1 * var(--foot));
  border-radius: 0 1.5px 2px 0;
  /* cover's top right corner, down the fore-edge, back along the foot to the spine */
  clip-path: polygon(0 0, calc(100% - var(--fore)) 0, 100% calc(var(--foot) * .85), 100% 100%, 0 calc(100% - var(--foot)));
  background:
    /* fore-edge: coated white stock — in the cover's shadow at first, then a clean
       sheen across the middle and a soft falloff at the outer lip */
    linear-gradient(90deg,
      rgba(22, 26, 34, .30) 0, rgba(22, 26, 34, .10) 22%, rgba(255, 255, 255, 0) 42%,
      rgba(255, 255, 255, .95) 62%, rgba(255, 255, 255, .6) 80%, rgba(22, 26, 34, .16) 100%)
      right top / var(--fore) 100% no-repeat,
    /* a little less light toward the foot */
    linear-gradient(180deg, rgba(22, 26, 34, 0) 45%, rgba(22, 26, 34, .08) calc(100% - var(--foot)), rgba(22, 26, 34, .2) 100%)
      right top / var(--fore) 100% no-repeat,
    /* the sheets: barely there, as on a coated magazine */
    repeating-linear-gradient(90deg, rgba(22, 26, 34, 0) 0 .8px, rgba(22, 26, 34, .045) .8px 1.1px)
      right top / var(--fore) 100% no-repeat,
    /* foot: the underside, in soft shadow, deepest against the cover and toward the spine */
    linear-gradient(180deg, rgba(22, 26, 34, .30), rgba(22, 26, 34, .12) 55%, rgba(22, 26, 34, .2))
      left bottom / calc(100% - var(--fore)) var(--foot) no-repeat,
    linear-gradient(90deg, rgba(22, 26, 34, .22), rgba(22, 26, 34, 0) 45%)
      left bottom / calc(100% - var(--fore)) var(--foot) no-repeat,
    /* the paper: bright white */
    #fbfbfa;
}

/* the edition pages' cover tilts toward the pointer: keep it flat inside so the
   page block stays behind the cover */
.wx-cover { transform-style: flat !important; }