/* Bestiaire Mythique — a mineral, organic, uncanny world, distinct from Iconic.
   Stone, oxidized teal, muted green and subdued gold; feathered specimen
   fragments dissolving into an asymmetric, calmer, specimen-like rhythm. */

.page-series--bestiaire-atmosphere {
  --best-ground: #969c92;
  --best-ground-rgb: 150, 156, 146;
  --best-text: #1e2521;
  --best-text-soft: #414a44;
  --best-quiet: #5b645c;
  --best-gold: #6c6135;
  --best-teal: #38564d;
  --gold: #3c574d;
  background: var(--best-ground);
  color: var(--best-text);
}

.page-series--bestiaire-atmosphere .site-nav.is-scrolled {
  background: rgba(150, 156, 146, 0.88);
}

/* ---------- Hero ---------- */
.bestiaire-hero {
  --mx: 0px;
  --my: 0px;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--best-ground);
}

.bestiaire-hero__field {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgba(52, 84, 74, 0.42), transparent 32rem),
    radial-gradient(circle at 26% 74%, rgba(96, 92, 52, 0.2), transparent 34rem),
    radial-gradient(circle at 58% 92%, rgba(58, 82, 70, 0.34), transparent 32rem),
    linear-gradient(160deg, #939c8f 0%, #8d978d 58%, #889389 100%);
}

.bestiaire-hero__field::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: url('../../media/cropped/bestiaire-shahmaran.webp') 66% 20% / cover no-repeat;
  opacity: 0.1;
  filter: blur(3.6rem) saturate(0.3) contrast(0.92);
  transform: scale(1.08) translate3d(calc(var(--mx) * -0.05), calc(var(--my) * -0.05), 0);
  transition: transform 800ms cubic-bezier(.2, .7, .2, 1);
}

.bestiaire-hero__field::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Was solid ground to 34% then a step down, which put a vertical knee right
       where the artwork's own pink field begins — together they read as one
       straight boundary between the crop and the page. Graduated instead. */
    linear-gradient(90deg, var(--best-ground) 0 20%, rgba(150, 156, 146, 0.88) 34%, rgba(150, 156, 146, 0.62) 48%, rgba(150, 156, 146, 0.32) 64%, rgba(150, 156, 146, 0.12) 78%, rgba(150, 156, 146, 0) 92%),
    linear-gradient(180deg, rgba(150, 156, 146, 0.42), transparent 18%, transparent 78%, rgba(150, 156, 146, 0.5));
  pointer-events: none;
}

.bestiaire-hero__art {
  position: absolute;
  inset: 0 0 0 40%;
  z-index: -1;
  margin: 0;
  overflow: hidden;
  /* The left edge was already feathered; the foot of the block was not, and cut
     a straight horizontal line across the ground where the hero meets the
     statement. Fade it out over the last fifth instead.
     The head of the block is faded too: the figure ran straight up behind the
     fixed nav, so the EN slot sat on bare skin and gold with no contrast. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.05) 9%, rgba(0, 0, 0, 0.15) 19%, rgba(0, 0, 0, 0.32) 29%, rgba(0, 0, 0, 0.54) 39%, rgba(0, 0, 0, 0.76) 50%, rgba(0, 0, 0, 0.92) 60%, #000 70%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0, rgba(0, 0, 0, 0.68) 5%, #000 11%, #000 74%, rgba(0, 0, 0, 0.7) 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.05) 9%, rgba(0, 0, 0, 0.15) 19%, rgba(0, 0, 0, 0.32) 29%, rgba(0, 0, 0, 0.54) 39%, rgba(0, 0, 0, 0.76) 50%, rgba(0, 0, 0, 0.92) 60%, #000 70%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0, rgba(0, 0, 0, 0.68) 5%, #000 11%, #000 74%, rgba(0, 0, 0, 0.7) 88%, transparent 100%);
  mask-composite: intersect;
}

.bestiaire-hero__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(147, 156, 143, 0.2), transparent 16%, transparent 72%, rgba(147, 156, 143, 0.24)),
    linear-gradient(90deg, rgba(147, 156, 143, 0.46), rgba(147, 156, 143, 0.22) 26%, transparent 52%),
    radial-gradient(circle at 60% 40%, rgba(52, 84, 72, 0.22), transparent 64%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.bestiaire-hero__art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 64% 14%;
  filter: saturate(0.6) contrast(0.97) brightness(1);
  transform: scale(1.02) translate3d(calc(var(--mx) * 0.06), calc(var(--my) * 0.06), 0);
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.bestiaire-hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(44rem, 48vw);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(8.5rem, 16vh, 12rem) 0 clamp(3.2rem, 7vh, 5.5rem) var(--gutter);
}

.bestiaire-hero__index,
.bestiaire-hero__groups,
.bestiaire-hero__caption,
.bestiaire-hero__scroll {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.24em;
  line-height: 1.7;
  text-transform: uppercase;
}

.bestiaire-hero__index {
  margin: 0 0 1.35rem;
  color: var(--best-gold);
}

.bestiaire-hero__copy h1 {
  margin: 0;
  color: var(--best-text);
  font-family: var(--serif);
  font-size: clamp(4.6rem, 9vw, 9.6rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.82;
}

.bestiaire-hero__lede {
  max-width: 32rem;
  margin: clamp(2.3rem, 5vh, 3.6rem) 0 0;
  color: var(--best-text-soft);
  font-family: var(--sans);
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  font-weight: 300;
  line-height: 1.75;
}

.bestiaire-hero__groups {
  margin: 1.15rem 0 0;
  color: var(--best-quiet);
}

.bestiaire-hero__scroll {
  align-self: flex-start;
  margin-top: clamp(2rem, 4vh, 3rem);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(60, 87, 77, 0.7);
  color: var(--best-text);
  transition: border-color 250ms ease, color 250ms ease;
}

.bestiaire-hero__scroll span {
  display: inline-block;
  margin-left: 0.65rem;
}

.bestiaire-hero__scroll:hover {
  border-color: var(--best-text);
  color: var(--best-teal);
}

.bestiaire-hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 4vh, 3.25rem);
  z-index: 3;
  margin: 0;
  color: rgba(30, 37, 33, 0.56);
  writing-mode: vertical-rl;
}

/* ---------- Archive shell ---------- */
#bestiaire-archive {
  scroll-margin-top: 5rem;
}

.page-series--bestiaire-atmosphere .series-content {
  width: 100%;
  max-width: none;
  background: var(--best-ground);
}

/* ---------- Statement ---------- */
.bestiaire-statement {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 1fr);
  gap: clamp(3rem, 10vw, 11rem);
  align-items: start;
  min-height: 66vh;
  min-height: 66svh;
  align-content: center;
  padding: clamp(6rem, 12vw, 12rem) var(--gutter);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 24%, rgba(56, 86, 77, 0.16), transparent 28rem),
    radial-gradient(circle at 18% 80%, rgba(108, 97, 53, 0.12), transparent 30rem),
    linear-gradient(180deg, #979d93 0%, #939990 74%, #909790 100%);
}

.bestiaire-statement__aside {
  position: sticky;
  top: 7rem;
  align-self: start;
}

.bestiaire-statement__aside .kicker {
  color: var(--best-gold);
}

.page-series--bestiaire-atmosphere .chapter-nav {
  border-color: rgba(30, 37, 33, 0.22);
}

.page-series--bestiaire-atmosphere .chapter-nav a {
  border-color: rgba(30, 37, 33, 0.14);
  color: var(--best-text-soft);
}

.page-series--bestiaire-atmosphere .chapter-nav a span {
  color: var(--best-quiet);
}

.page-series--bestiaire-atmosphere .chapter-nav a:hover {
  color: var(--best-teal);
}

.bestiaire-statement__copy p {
  max-width: 52rem;
  margin: 0;
  color: rgba(30, 37, 33, 0.9);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

/* ---------- Chapters ---------- */
.bestiaire-chapter--bestiaire {
  --chapter-base: #969c92;
  --chapter-base-rgb: 150, 156, 146;
  --chapter-bloom: rgba(56, 86, 77, 0.26);
  --chapter-warm: rgba(108, 97, 53, 0.18);
}

.bestiaire-chapter--hybrides {
  --chapter-base: #949a93;
  --chapter-base-rgb: 148, 154, 147;
  --chapter-bloom: rgba(60, 90, 78, 0.24);
  --chapter-warm: rgba(112, 99, 58, 0.2);
}

.bestiaire-chapter {
  position: relative;
  background: var(--chapter-base);
}

.bestiaire-chapter__header {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  align-content: end;
  min-height: 48vh;
  min-height: 48svh;
  padding: clamp(6rem, 11vw, 11rem) var(--gutter) clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
  color: var(--best-text);
  background:
    radial-gradient(circle at 78% 32%, var(--chapter-bloom), transparent 28rem),
    radial-gradient(circle at 20% 76%, var(--chapter-warm), transparent 30rem),
    var(--chapter-base);
}

.bestiaire-chapter__header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  z-index: -1;
  height: 28%;
  background: linear-gradient(180deg, transparent, var(--chapter-base));
  pointer-events: none;
}

.bestiaire-chapter__header h2 {
  margin: 0;
  color: var(--best-text);
  font-family: var(--serif);
  font-size: clamp(4.4rem, 11vw, 11rem);
  font-weight: 300;
  letter-spacing: -0.058em;
  line-height: 0.72;
}

.bestiaire-chapter__header .route-number {
  color: var(--best-gold);
}

.bestiaire-chapter__header > span {
  color: var(--best-quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Specimens ---------- */
.bestiaire-field {
  display: block;
}

.specimen {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: min(100%, var(--max));
  min-height: 70vh;
  min-height: 70svh;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 8rem) var(--gutter);
  overflow: hidden;
}

.specimen::before {
  content: '';
  position: absolute;
  inset: 4% 0;
  z-index: -1;
  background-image: var(--art-source);
  background-position: center;
  background-size: cover;
  opacity: 0.13;
  filter: blur(clamp(2.6rem, 5vw, 5.4rem)) saturate(0.5) contrast(0.94);
  transform: scale(1.1);
  -webkit-mask-image: radial-gradient(ellipse 70% 76% at 50% 50%, #000 0 40%, transparent 82%);
  mask-image: radial-gradient(ellipse 70% 76% at 50% 50%, #000 0 40%, transparent 82%);
  pointer-events: none;
}

.specimen__media {
  position: relative;
  z-index: 1;
  grid-row: 1;
  min-width: 0;
}

.specimen--left .specimen__media {
  grid-column: 1 / 9;
}

.specimen--right .specimen__media {
  grid-column: 5 / 13;
}

/* The fragment carries no mask of its own any more. It used to: an ellipse plus
   two linear passes, recentred per crop, whose only job was to hide the flat
   warm studio ground baked into each crop. That ground is now removed from the
   files themselves (media/cropped/bestiaire-v26-alpha/), so the silhouette
   comes from the artwork's own alpha. The only masks in this stylesheet are the
   per-work directional crop-boundary fades in the final V26 section. */
.specimen__fragment {
  margin: 0;
  overflow: visible;
  background: transparent;
}

.specimen__fragment::after {
  display: none;
}

.specimen__fragment img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: saturate(0.74) contrast(0.98);
  transform: none;
}

.specimen__copy {
  position: relative;
  z-index: 3;
  grid-row: 1;
  align-self: center;
  max-width: 27rem;
  padding: clamp(1rem, 3vw, 2.5rem) 0;
}

.specimen--left .specimen__copy {
  grid-column: 8 / 13;
  justify-self: end;
}

.specimen--right .specimen__copy {
  grid-column: 1 / 6;
}

.specimen__copy::before {
  content: '';
  position: absolute;
  inset: -14% -12% -14% -40%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--chapter-base) 0,
    rgba(var(--chapter-base-rgb), 0.96) 44%,
    rgba(var(--chapter-base-rgb), 0.6) 72%,
    rgba(var(--chapter-base-rgb), 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
}

.specimen--left .specimen__copy::before {
  inset: -14% -40% -14% -12%;
  background: linear-gradient(270deg,
    var(--chapter-base) 0,
    rgba(var(--chapter-base-rgb), 0.96) 44%,
    rgba(var(--chapter-base-rgb), 0.6) 72%,
    rgba(var(--chapter-base-rgb), 0) 100%);
}

.specimen__index {
  margin: 0 0 1.25rem;
  color: var(--best-quiet);
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.19em;
  line-height: 1.8;
  text-transform: uppercase;
}

.specimen__copy h3 {
  margin: 0;
  color: var(--best-text);
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.specimen__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 1.4rem 0 0;
  color: var(--best-gold);
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.17em;
  line-height: 1.7;
  text-transform: uppercase;
}

.specimen__summary {
  margin: 1.5rem 0 0;
  color: var(--best-text-soft);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  font-weight: 300;
  line-height: 1.75;
}

/* Organic asymmetry — vary size and vertical drift, quiet and specimen-like. */
.specimen:nth-child(3n) .specimen__media {
  transform: translateY(-5%);
}

.specimen:nth-child(3n + 2) .specimen__media {
  transform: translateY(4%);
}

.specimen--left:nth-child(4n) .specimen__media {
  grid-column: 1 / 8;
}

.specimen--right:nth-child(4n + 3) .specimen__media {
  grid-column: 6 / 13;
}

/* ---------- End ---------- */
.bestiaire-end {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: clamp(4rem, 8vw, 8rem) var(--gutter);
  background: linear-gradient(180deg, #909790, #8c938c);
}

.bestiaire-end p {
  margin: 0;
  color: var(--best-quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.bestiaire-end a {
  display: inline-flex;
  gap: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--best-teal);
  color: var(--best-text);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Responsive ---------- */
/* Same correction as the Iconic scenes: `min-height: 70vh` is keyed to viewport
   height while the specimen is sized by width, so a tall mid-width window left
   ~245px of empty field above and below ~380px of content. Cap it so the block
   padding sets the rhythm once the window grows tall. */
@media (min-width: 921px) and (max-width: 1440px) {
  .specimen {
    min-height: min(62vh, 38rem);
    min-height: min(62svh, 38rem);
  }
}

@media (max-width: 920px) {
  .bestiaire-hero {
    display: grid;
    grid-template-rows: minmax(20rem, 48vh) auto;
    grid-template-rows: minmax(20rem, 48svh) auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .bestiaire-hero__field {
    bottom: auto;
    height: 60vh;
    height: 60svh;
  }

  .bestiaire-hero__field::after {
    background:
      linear-gradient(180deg, rgba(150, 156, 146, 0.26), transparent 14%, transparent 62%, var(--best-ground) 96%),
      linear-gradient(90deg, rgba(150, 156, 146, 0.12), transparent 58%, rgba(150, 156, 146, 0.16));
  }

  .bestiaire-hero__art {
    inset: 4rem 0 auto 14%;
    height: 46vh;
    height: 46svh;
    -webkit-mask-image: linear-gradient(180deg, #000 0 70%, rgba(0, 0, 0, 0.7) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 70%, rgba(0, 0, 0, 0.7) 84%, transparent 100%);
  }

  .bestiaire-hero__copy {
    grid-row: 2;
    justify-content: flex-start;
    width: 100%;
    min-height: auto;
    padding: 0.5rem var(--gutter) 2.5rem;
  }

  .bestiaire-hero__copy h1 {
    font-size: clamp(3.3rem, 12.5vw, 5.4rem);
  }

  .bestiaire-hero__lede {
    margin-top: clamp(1.3rem, 3vh, 2rem);
  }

  .bestiaire-hero__scroll {
    margin-top: clamp(1.2rem, 2.6vh, 1.9rem);
  }

  .bestiaire-hero__caption {
    display: none;
  }

  .bestiaire-statement {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: auto;
  }

  .bestiaire-statement__aside {
    position: static;
  }

  .bestiaire-chapter__header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 40vh;
    min-height: 40svh;
  }

  .bestiaire-chapter__header .route-number {
    grid-column: 1 / -1;
  }

  .specimen,
  .specimen--left,
  .specimen--right {
    grid-template-columns: 1fr;
    align-content: center;
    min-height: auto;
    gap: clamp(1.5rem, 5vw, 2.5rem);
    padding-block: clamp(4.5rem, 10vw, 7rem);
  }

  .specimen--left .specimen__media,
  .specimen--right .specimen__media,
  .specimen--left:nth-child(4n) .specimen__media,
  .specimen--right:nth-child(4n + 3) .specimen__media {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 46rem);
    justify-self: center;
    transform: none;
  }

  .specimen--left .specimen__copy,
  .specimen--right .specimen__copy {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 38rem;
    padding: 0;
  }

  .specimen__copy::before,
  .specimen--left .specimen__copy::before {
    display: none;
  }
}

@media (max-width: 680px) {
  .bestiaire-hero__copy h1 {
    font-size: clamp(3.6rem, 19vw, 6rem);
    line-height: 0.78;
  }

  .bestiaire-statement__copy p {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }

  .bestiaire-chapter__header {
    grid-template-columns: 1fr;
    min-height: 34vh;
    min-height: 34svh;
  }

  .bestiaire-chapter__header h2 {
    font-size: clamp(4rem, 20vw, 6.5rem);
  }

  .specimen__media {
    width: calc(100% + (var(--gutter) * 1.1)) !important;
    margin-inline: calc(var(--gutter) * -0.55);
  }

  .specimen__copy h3 {
    font-size: clamp(2.6rem, 13vw, 4.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bestiaire-hero__field::before,
  .bestiaire-hero__art img {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   V26 — CONTINUOUS BESTIAIRE ENVIRONMENT + MEDIA-FIRST REVEALS
   --------------------------------------------------------------------------
   Same design SYSTEM as the approved Iconic V25 (one continuous environment,
   artwork dissolving into it, media-then-copy reveals, copy above artwork) but
   built entirely from Bestiaire's own sage/teal/gold palette. It does NOT use
   the Iconic canvas and does not borrow its warm-taupe mineral character.

   Everything here is scoped to .page-series--bestiaire-atmosphere.
   ========================================================================== */

/* --- 1. One environment, not a stack of panels -------------------------- */
/* The per-chapter fills, the statement panel, the chapter header band and the
   ending gradient were four separate rectangles. They are neutralised so a
   single field runs the length of the archive. */
.page-series--bestiaire-atmosphere .bestiaire-chapter,
.page-series--bestiaire-atmosphere .bestiaire-chapter__header,
.page-series--bestiaire-atmosphere .bestiaire-statement,
.page-series--bestiaire-atmosphere .bestiaire-end {
  background: transparent;
}

.page-series--bestiaire-atmosphere .series-content {
  position: relative;
  isolation: isolate;
  background: var(--best-ground);
}

/* The single continuous field, now a raster: one painted mineral environment
   generated for this archive at 900 x 7954 and mapped across the whole of
   .series-content. The archive box measures 1105 x 9766 at the desktop
   reference width, and 1105/900 = 1.2278 scales 7954 to 9766 — so `cover`
   resolves to a uniform 1.2278x with nothing cropped on either axis.

   Centred horizontally, anchored at the top of the archive, one instance, no
   repeat, no fixed/parallax attachment: it scrolls with the document like any
   other element background. The canvas's own first and last rows are exactly
   #969c92, so it dissolves into the page ground at both ends by construction
   rather than by a CSS fade. */
.page-series--bestiaire-atmosphere .series-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('../../assets/atmosphere/bestiaire-exhibition-canvas.webp');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* --- 2. Copy stays above artwork and atmosphere ------------------------- */
.page-series--bestiaire-atmosphere .specimen__media { position: relative; z-index: 1; }
.page-series--bestiaire-atmosphere .specimen__copy  { position: relative; z-index: 3; }

/* The per-specimen copy backing is retired (defined at lines 476-498): a
   directional wash from solid --chapter-base to transparent across the copy
   column, inset -14%/-12%/-14%/-40%, mirrored for .specimen--left, and faded top
   and bottom by a vertical mask. Over a flat CSS field it was invisible, being
   ground painted on ground. Over the painted canvas it becomes an opaque
   ground-coloured plate that blots the canvas out behind all twelve copy
   blocks — exactly the isolated per-specimen halo the canvas brief forbids, and
   the same failure the Iconic per-work grounds had. The canvas is quiet enough
   behind copy (luminance sd 3.9, p01 143.7 against #1e2521 text) that no scrim
   is needed; see the text-safety evidence render. */
.page-series--bestiaire-atmosphere .specimen__copy::before,
.page-series--bestiaire-atmosphere .specimen--left .specimen__copy::before {
  content: none;
}

/* The chapter-header foot gradient faded from transparent to --chapter-base at
   the bottom of every chapter head. With the chapter fills already neutralised
   this is a leftover horizontal band drawn straight across the canvas, twice.
   Retired — the canvas carries the transition itself. */
.page-series--bestiaire-atmosphere .bestiaire-chapter__header::after {
  content: none;
}

/* Softer navigational rules — kept as affordance, no longer reading as borders. */
.page-series--bestiaire-atmosphere .chapter-nav,
.page-series--bestiaire-atmosphere .chapter-nav a { border-color: rgba(30, 37, 33, 0.07); }

/* --- 3. Media-first reveal timing --------------------------------------- */
/* Registered with the site's single existing IntersectionObserver through
   registerRevealElements(container) — no second observer, no JS timing. */
.page-series--bestiaire-atmosphere .specimen__media.reveal { transition-duration: 900ms; }

.page-series--bestiaire-atmosphere .specimen__copy.reveal {
  transition-duration: 680ms;
  transition-delay: 120ms;
}

.page-series--bestiaire-atmosphere .bestiaire-chapter__header.reveal,
.page-series--bestiaire-atmosphere .bestiaire-statement__aside.reveal,
.page-series--bestiaire-atmosphere .bestiaire-statement__copy.reveal,
.page-series--bestiaire-atmosphere .bestiaire-end.reveal { transition-duration: 720ms; }

/* --- 4. Fallbacks ------------------------------------------------------- */
/* No JavaScript: the observer never runs, so nothing would add .is-visible. */
@media (scripting: none) {
  .page-series--bestiaire-atmosphere .reveal { opacity: 1; transform: none; transition: none; }
}

/* Reduced motion: site.js already reveals immediately; remove the transition
   so there is no fade, displacement, scaling or delay. */
@media (prefers-reduced-motion: reduce) {
  .page-series--bestiaire-atmosphere .reveal,
  .page-series--bestiaire-atmosphere .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   V26 FINAL — ATMOSPHERIC BRIDGE + DIRECTIONAL CROP-BOUNDARY FADE, ALL TWELVE
   --------------------------------------------------------------------------
   This is the only integration method in force. Everything it replaced is gone
   from this file rather than overridden:

     · the fragment's original ellipse-plus-two-linears mask and its four
       per-crop --specimen-focus overrides (they existed to hide the warm studio
       ground baked into each crop; that ground is now removed from the files);
     · the V26 "plate removal" two-radial union and its --right mirror (a
       smaller closed shape in place of a larger one — still a portal, and it
       cut through wings, horns and legs on its way round);
     · the three-work alpha-proof mask reset and the three-work bridge and fade
       sections, now generalised to all twelve.

   Layer order, unchanged from the approved three-work proof:

     text                       .specimen__copy       z 3
     artwork  (transparent)     .specimen__fragment   above, in DOM order
     bridge   (generated)       .specimen__media::before
     shared canvas              .series-content::before

   Iconic bakes its per-work atmosphere and its subject into one raster
   (iconic-*-atmosphere-v17.webp, 1800 x 1200). Here the two are separate
   layers, because the subject is already a transparent derivative — which is
   what lets the field be locked to the shared canvas independently of the
   artwork.
   ========================================================================== */

/* The duplicated, blurred copy of each artwork behind its own specimen. With a
   painted canvas running the length of the archive a per-work bloom is exactly
   the isolated halo the brief forbids. Retired. */
.page-series--bestiaire-atmosphere .specimen::before { content: none; }

/* --- 1. The generated bridge field ---------------------------------------
   One field per work, generated by gpt-image-2 from an extracted region of the
   approved shared canvas and sized to exactly that work's artwork box. Its
   outer 20–25% perimeter is bit-identical to the canvas region it covers, so
   the edges cannot step.

   background-size is 100% 100%, not cover: each field's aspect already equals
   its box's to within 3e-5, and `cover` would crop a fraction of a pixel off
   the locked perimeter, which is the one part that has to land exactly. */
.page-series--bestiaire-atmosphere .specimen__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

#kinnara .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-kinnara-field.webp');
}

#alconost .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-alconost-field.webp');
}

#anggitay-i .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-anggitay-i-field.webp');
}

#centaur-i .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-centaur-i-field.webp');
}

#kudan-i .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-kudan-i-field.webp');
}

#kudan-ii .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-kudan-ii-field.webp');
}

#naga .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-naga-field.webp');
}

#shahmaran .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-shahmaran-field.webp');
}

#praying-mantis-i .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-praying-mantis-i-field.webp');
}

#praying-mantis-ii .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-praying-mantis-ii-field.webp');
}

#rd-03 .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-rd-03-field.webp');
}

#rd-04 .specimen__media::before {
  background-image: url('../../assets/atmosphere/bestiaire-bridges/bestiaire-rd-04-field.webp');
}

/* --- 2. Directional crop-boundary fade -----------------------------------
   The field alone cannot fix a clipped crop: it sits BEHIND the artwork, and on
   a clipped side the artwork is opaque right up to the frame edge, so the field
   is simply hidden there. The fade is the mechanism; the field is the
   destination. This is what Iconic bakes into its composites.

   READ THE DIRECTION KEYWORD BACKWARDS. `linear-gradient(to bottom, transparent
   0, …)` puts its 0% stop at the TOP of the box, so it fades the TOP edge. To
   fade an edge, name the opposite one.

   Fractions of each frame edge the subject actually touches, measured from each
   derivative's own alpha, are what set these. Only clipped edges are faded, and
   only over the band needed:

     work                left    right   top     bottom    fades applied
     kinnara             36.8    96.2    11.9    84.5      12 / 21 / 9.5 / 18
     alconost            35.0    58.1    30.2    81.8      7 / 6 / mask / 8
     anggitay-i           0.0     0.0    30.2    34.0      – / – / 7.5 / 7
     centaur-i            0.0    60.1    45.9    61.1      – / 7 / 9 / 8
     kudan-i              0.0     0.0    30.0    56.8      – / – / mask / 15
     kudan-ii             0.0     0.0     4.4    56.1      – / – / 6.5 / 8
     naga                 0.0    38.0     4.5    79.8      – / 7 / 6 / 8
     shahmaran            0.0     0.6    13.5    26.9      – / 5 / mask / 7
     praying-mantis-i     0.0     0.0    10.2     0.6      – / – / 14 / –
     praying-mantis-ii    0.0     0.0    31.1    16.2      – / – / 9 / 4.5
     rd-03              100.0   100.0   100.0   100.0      16 / 16 / 9 / 15
     rd-04              100.0   100.0   100.0   100.0      15 / 14 / 11 / 13

   Every gradient is a one-directional linear ramp reaching alpha 0 at one frame
   edge only, so their intersection cannot close: an edge with no gradient stays
   at full alpha, and even where all four are faded each sub-full pixel still
   lies in a band that runs to its own edge. Nothing here is radial, and no mask
   is shared between works.

   Praying Mantis I's bottom (0.6%) and Shahmaran's right (0.6%) are single
   contacts a few pixels wide. Mantis I's is left unfaded — one 14px contact in
   otherwise empty field, below the threshold where a fade would do anything but
   soften the leg above it. Shahmaran's is a horn tip and does get a 5% fade. */

#kinnara .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to left,   transparent 0, rgba(0,0,0,.28) 7%,   rgba(0,0,0,.72) 14%,  #000 21%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.30) 6%,   rgba(0,0,0,.75) 12%,  #000 18%),
    linear-gradient(to right,  transparent 0, rgba(0,0,0,.45) 4%,   rgba(0,0,0,.85) 8%,   #000 12%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 3%,   rgba(0,0,0,.78) 6.5%, #000 9.5%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left,   transparent 0, rgba(0,0,0,.28) 7%,   rgba(0,0,0,.72) 14%,  #000 21%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.30) 6%,   rgba(0,0,0,.75) 12%,  #000 18%),
    linear-gradient(to right,  transparent 0, rgba(0,0,0,.45) 4%,   rgba(0,0,0,.85) 8%,   #000 12%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 3%,   rgba(0,0,0,.78) 6.5%, #000 9.5%);
  mask-composite: intersect;
}

/* Alconost, Kudan I and Shahmaran are the three edges a linear gradient cannot
   serve: on each, one frame edge cuts both an extremity that needs a deep fade
   and a face that cannot survive one. Each carries a deterministic grayscale
   mask whose ramp depth varies with x — nothing generated, no noise, no
   randomness — built and asserted open in _handoff/generated/_probe/full_fade.py
   (0 closed regions; the fade never reaches below 20% of the height).
   Alconost is the tightest edge in the archive: the crop cuts its head directly
   above the eyebrows, which begin 1.5% of the height below the frame, with the
   eyes at 3–5%. The ramp over that column is therefore 1.2% — about 4 rendered
   pixels — and the protected column is held to 65.5–80.5%, the face and no more,
   so the deep 8% ramp reaches the hair on both sides of it. The flat cut across
   the face is REDUCED, not removed: no alpha fade can remove it, because there
   is no headroom above the eyebrows. Reported as an inherited crop-framing
   defect, in the same class as a crop that needs re-exporting with margin. */
#alconost .specimen__fragment {
  -webkit-mask-image:
    url('../../assets/atmosphere/bestiaire-fades/bestiaire-alconost-topfade-mask.png'),
    linear-gradient(to top,   transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%),
    linear-gradient(to left,  transparent 0, rgba(0,0,0,.32) 2%,   rgba(0,0,0,.78) 4.1%, #000 6%);
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    url('../../assets/atmosphere/bestiaire-fades/bestiaire-alconost-topfade-mask.png'),
    linear-gradient(to top,   transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%),
    linear-gradient(to left,  transparent 0, rgba(0,0,0,.32) 2%,   rgba(0,0,0,.78) 4.1%, #000 6%);
  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  mask-mode: alpha, alpha, alpha, alpha;
  mask-composite: intersect;
}

#anggitay-i .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 2.5%, rgba(0,0,0,.78) 5.1%, #000 7.5%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 2.5%, rgba(0,0,0,.78) 5.1%, #000 7.5%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%);
  mask-composite: intersect;
}

#centaur-i .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 3%,   rgba(0,0,0,.78) 6.1%, #000 9%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%),
    linear-gradient(to left,   transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 3%,   rgba(0,0,0,.78) 6.1%, #000 9%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%),
    linear-gradient(to left,   transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%);
  mask-composite: intersect;
}

/* Kudan I: row 0 of its alpha is one contiguous run from 53.4% to 83.4% of the
   width — both horns AND the head are cut by the same edge, and its forehead
   begins about 13px below the frame at rendered size. 8.5% deep over the horns,
   2.0% over the head column at 64–75%. The bottom stays a plain gradient. */
#kudan-i .specimen__fragment {
  -webkit-mask-image:
    url('../../assets/atmosphere/bestiaire-fades/bestiaire-kudan-i-topfade-mask.png'),
    linear-gradient(to top, transparent 0, rgba(0,0,0,.30) 5%, rgba(0,0,0,.78) 10%, #000 15%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    url('../../assets/atmosphere/bestiaire-fades/bestiaire-kudan-i-topfade-mask.png'),
    linear-gradient(to top, transparent 0, rgba(0,0,0,.30) 5%, rgba(0,0,0,.78) 10%, #000 15%);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-mode: alpha, alpha;
  mask-composite: intersect;
}

#kudan-ii .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 2.1%, rgba(0,0,0,.78) 4.4%, #000 6.5%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 2.1%, rgba(0,0,0,.78) 4.4%, #000 6.5%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%);
  mask-composite: intersect;
}

#naga .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 2%,   rgba(0,0,0,.78) 4.1%, #000 6%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%),
    linear-gradient(to left,   transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 2%,   rgba(0,0,0,.78) 4.1%, #000 6%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 2.6%, rgba(0,0,0,.78) 5.4%, #000 8%),
    linear-gradient(to left,   transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%);
  mask-composite: intersect;
}

/* Shahmaran: two horns are cut at the top edge (67.2–72.1% and 75.9–84.4%) with
   the head between and behind them, its crown jewellery starting about 2.5% of
   the height below the frame. 6.5% deep over the horns, 1.5% over the crown. */
#shahmaran .specimen__fragment {
  -webkit-mask-image:
    url('../../assets/atmosphere/bestiaire-fades/bestiaire-shahmaran-topfade-mask.png'),
    linear-gradient(to top,  transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%),
    linear-gradient(to left, transparent 0, rgba(0,0,0,.32) 1.7%, rgba(0,0,0,.78) 3.4%, #000 5%);
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    url('../../assets/atmosphere/bestiaire-fades/bestiaire-shahmaran-topfade-mask.png'),
    linear-gradient(to top,  transparent 0, rgba(0,0,0,.32) 2.3%, rgba(0,0,0,.78) 4.8%, #000 7%),
    linear-gradient(to left, transparent 0, rgba(0,0,0,.32) 1.7%, rgba(0,0,0,.78) 3.4%, #000 5%);
  mask-size: 100% 100%, 100% 100%, 100% 100%;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-mode: alpha, alpha, alpha;
  mask-composite: intersect;
}

#praying-mantis-i .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 4%, rgba(0,0,0,.80) 9%, #000 14%);
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 4%, rgba(0,0,0,.80) 9%, #000 14%);
}

/* The ink monogram in Praying Mantis II's lower field is artwork and is kept.
   It is also cut by the bottom frame edge, so the 4.5% bottom ramp softens its
   lowest strokes; that is the same treatment every other clipped element gets,
   not a removal. */
#praying-mantis-ii .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 3%,   rgba(0,0,0,.78) 6.1%, #000 9%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 1.5%, rgba(0,0,0,.78) 3.1%, #000 4.5%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.32) 3%,   rgba(0,0,0,.78) 6.1%, #000 9%),
    linear-gradient(to top,    transparent 0, rgba(0,0,0,.32) 1.5%, rgba(0,0,0,.78) 3.1%, #000 4.5%);
  mask-composite: intersect;
}

/* The two Hybrides sheets are full-bleed compositions: their crops carry no
   studio ground at all, so their derivatives are fully opaque and every one of
   their four edges is a crop cut.

   These two needed a second pass. At the depths the other ten use (5-9%) both
   still read as rectangular image cards -- a full-bleed close-up is dense and
   high-contrast right up to its frame, so a short ramp only softens the border
   without dissolving it. The depths below are roughly doubled on the three
   edges that carry no protected detail, and the ramp is redistributed so most
   of it happens in the OUTER half rather than the first third: the earlier
   curve reached 32% alpha within a fifth of the band, which put the visible
   boundary back near the frame edge.

   The top stays the shallowest on both, because that is where the eyes are --
   18% of the height in rd-03, 27% in rd-04 -- and no fade may reach them. The
   four depths differ on each work so the result reads as a composition running
   past its frame rather than as a symmetrical vignette. */
#rd-03 .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 2.52%, rgba(0,0,0,.42) 4.95%, rgba(0,0,0,.78) 7.11%, #000 9.00%),
    linear-gradient(to top, transparent 0, rgba(0,0,0,.12) 4.20%, rgba(0,0,0,.42) 8.25%, rgba(0,0,0,.78) 11.85%, #000 15.00%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 4.48%, rgba(0,0,0,.42) 8.80%, rgba(0,0,0,.78) 12.64%, #000 16.00%),
    linear-gradient(to left, transparent 0, rgba(0,0,0,.12) 4.48%, rgba(0,0,0,.42) 8.80%, rgba(0,0,0,.78) 12.64%, #000 16.00%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 2.52%, rgba(0,0,0,.42) 4.95%, rgba(0,0,0,.78) 7.11%, #000 9.00%),
    linear-gradient(to top, transparent 0, rgba(0,0,0,.12) 4.20%, rgba(0,0,0,.42) 8.25%, rgba(0,0,0,.78) 11.85%, #000 15.00%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 4.48%, rgba(0,0,0,.42) 8.80%, rgba(0,0,0,.78) 12.64%, #000 16.00%),
    linear-gradient(to left, transparent 0, rgba(0,0,0,.12) 4.48%, rgba(0,0,0,.42) 8.80%, rgba(0,0,0,.78) 12.64%, #000 16.00%);
  mask-composite: intersect;
}

#rd-04 .specimen__fragment {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 3.08%, rgba(0,0,0,.42) 6.05%, rgba(0,0,0,.78) 8.69%, #000 11.00%),
    linear-gradient(to top, transparent 0, rgba(0,0,0,.12) 3.64%, rgba(0,0,0,.42) 7.15%, rgba(0,0,0,.78) 10.27%, #000 13.00%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 4.20%, rgba(0,0,0,.42) 8.25%, rgba(0,0,0,.78) 11.85%, #000 15.00%),
    linear-gradient(to left, transparent 0, rgba(0,0,0,.12) 3.92%, rgba(0,0,0,.42) 7.70%, rgba(0,0,0,.78) 11.06%, #000 14.00%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 3.08%, rgba(0,0,0,.42) 6.05%, rgba(0,0,0,.78) 8.69%, #000 11.00%),
    linear-gradient(to top, transparent 0, rgba(0,0,0,.12) 3.64%, rgba(0,0,0,.42) 7.15%, rgba(0,0,0,.78) 10.27%, #000 13.00%),
    linear-gradient(to right, transparent 0, rgba(0,0,0,.12) 4.20%, rgba(0,0,0,.42) 8.25%, rgba(0,0,0,.78) 11.85%, #000 15.00%),
    linear-gradient(to left, transparent 0, rgba(0,0,0,.12) 3.92%, rgba(0,0,0,.42) 7.70%, rgba(0,0,0,.78) 11.06%, #000 14.00%);
  mask-composite: intersect;
}