@import url("https://6a73ba2bc286c400084804ba--merry-blini-20a928.netlify.app/assets/site-final.css");

/* Journal article marble underlay clarity repair.
   The legacy rule used background-size: cover on an article container that can
   be many thousands of pixels tall, forcing a single source image to be
   enlarged to the full document height. Keep the approved artwork, but size it
   to the viewport width instead of the article height so it remains sharp. */
.journal-article-page-body {
  background-size: max(100vw, 1600px) auto !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-attachment: scroll !important;
}

@media (max-width: 700px) {
  .journal-article-page-body {
    background-size: auto 100vh !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
  }
}

/* Journal tablet seam repair.
   The legacy tablet was assembled as three 998x1400 backgrounds, with the
   middle panel hard-repeated down the full article. The source panels have
   slightly different tone/detail at their edges, so every repeat boundary can
   show as a visible horizontal change. Use one continuous middle field and
   feather the approved top/bottom artwork into it instead of hard switching. */
.journal-article {
  background-color: rgba(244, 240, 232, 0.18) !important;
  background-image: url("reference-sketches/entity-journal-article-tablet-open-middle.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

.journal-article::before,
.journal-article::after {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 998 / 1400;
  content: "";
  pointer-events: none;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.journal-article::before {
  top: 0;
  background-image: url("reference-sketches/entity-journal-article-tablet-open-bottom.png");
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.88) 88%, rgba(0,0,0,.42) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.88) 88%, rgba(0,0,0,.42) 95%, transparent 100%);
}

.journal-article::after {
  bottom: 0;
  background-image: url("reference-sketches/entity-journal-article-tablet-open-with-bottom.png");
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 82%, rgba(0,0,0,.88) 88%, rgba(0,0,0,.42) 95%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 82%, rgba(0,0,0,.88) 88%, rgba(0,0,0,.42) 95%, transparent 100%);
}

.journal-article > * {
  position: relative;
  z-index: 1;
}

/* Journal landing-page underlay crop.
   The original composition includes its own header at the top and a floor at
   the bottom. The live page already supplies the real site header, and the
   volume covers should read as mounted/displayed against the wall rather than
   resting on the floor. Zoom and center the source on its wall field so both
   baked-in edge regions remain outside the visible landing-page crop. */
.journal-page .journal-page-body {
  overflow: hidden;
  background-image: url("reference-sketches/journal-underlay.png?v=journal-wall-only-r1") !important;
  background-position: center 43% !important;
  background-size: auto 145% !important;
  background-repeat: no-repeat !important;
  background-color: #e9e2d7 !important;
}

@media (max-width: 700px) {
  .journal-page .journal-page-body {
    background-position: center 41% !important;
    background-size: auto 175% !important;
  }
}

/* Volume I bound-book prototype scale review.
   Increase the closed journal by exactly 25% from its original 560px desktop
   width while leaving the approved cover art and the open-book reader intact. */
.book-prototype-page .closed-book:has(> img[src*="luxury_scientific_journal_cover.png"]) {
  width: min(700px, 90vw) !important;
}

@media (max-width: 820px) {
  .book-prototype-page .closed-book:has(> img[src*="luxury_scientific_journal_cover.png"]) {
    width: min(600px, 92vw) !important;
  }
}