/* The Shrine (#shrine), the opening page of the journal. Owned by js/journal-shrine.js.
   Shared journal rules live in styles-journal.css; the page is a `journal` container (breakpoints 879px, 599px).
   The layout is m-ew's Bubble Cradle study, in Celebi's moss: the pinned photograph and the colour chooser on
   the left, the reading, the field label and the pressed leaves on the right. */

/* The wash: a big dab of moss under the C, a smaller one trailing under the eb. */
.j-head--shrine .j-wash--a { --x: -.2em; --y: .04em; --s: 1.02em; --r: -14deg; --o: .66; }
.j-head--shrine .j-wash--b { display: block; --x: 1.02em; --y: .38em; --s: .56em; --r: 32deg; --o: .5; }

/* ---------- the study: two columns that stack independently ---------- */
.shrine-study { display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 47fr); gap: 56px; align-items: start; margin-top: 28px; }
.shrine-col { min-width: 0; }

/* The pinned photograph. A pixel picture: it is scaled with hard edges, never smoothed. */
.shrine-photo-wrap { position: relative; padding: 112px 34px 0 15%; }
.shrine-photo .j-plate-mount > img { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; filter: sepia(.08) contrast(.98); }
.shrine-photo figcaption { margin-top: 16px; }
/* A drawn push pin in moss, holding the print to the page. */
.shrine-pin { position: absolute; z-index: 4; left: 47%; top: -7px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 36% 32%, #cfe3b2 0 14%, #6f9150 38%, #3f5c2c 78%, #2e4520);
  box-shadow: 0 1px 0 #ffffff55 inset, 2px 5px 5px -1px #2b18105c; }
.shrine-pin::after { content: ''; position: absolute; left: 9px; top: 17px; width: 2px; height: 7px; border-radius: 1px; background: #7d7466; rotate: 18deg; opacity: .7; }

/* The pencilled note left of the print, pointing into the shrine at the top of the picture. */
.shrine-note--shrine { right: calc(100% + 6px); top: 26%; --j-note-r: -7deg; text-align: right; line-height: 1.05; }
.shrine-note--shrine .j-arrow { left: 62%; top: 100%; width: 64px; height: 40px; }

/* ---------- Celebi's portrait, taped over the corner of the print ---------- */
.shrine-peek { position: absolute; z-index: 6; right: -6px; top: 36px; width: 148px; }
.celebi-peek { position: relative; display: block; width: 100%; min-height: 44px; padding: 10px 10px 14px; border-radius: 4px; rotate: 6deg; transition: rotate .45s cubic-bezier(.3, 1.4, .5, 1), translate .45s cubic-bezier(.3, 1.4, .5, 1); }
.celebi-peek > .j-paper::before { background: #fbf8f1; }
.celebi-peek > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.celebi-peek:hover, .celebi-peek:focus-visible { rotate: 2deg; translate: 0 -4px; }
.shrine-peek.is-peeking .celebi-peek > img { animation: shrine-hello .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes shrine-hello { 0% { rotate: 0deg; translate: 0 0; } 30% { rotate: -9deg; translate: 0 -12px; } 60% { rotate: 6deg; translate: 0 -4px; } 100% { rotate: 0deg; translate: 0 0; } }

/* Where Celebi answers: a pencilled line with a drawn tail, in the slot the "say hello" note keeps for it. */
.peek-line { position: absolute; z-index: 7; right: calc(100% + 2px); top: -34px; width: max-content; max-width: 11em; margin: 0; font: 25px/1.1 var(--j-script); color: var(--j-pencil); rotate: -5deg; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.peek-line::after { content: ''; position: absolute; right: -18px; bottom: -18px; width: 26px; height: 20px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; border-radius: 0 0 16px 0; rotate: -18deg; opacity: .8; }
.peek-line-text { display: block; }
.shrine-peek.is-peeking .peek-line { opacity: 1; }
.shrine-note--hello { right: calc(100% + 8px); top: -46px; --j-note-r: -5deg; transition: opacity .3s ease; }
.shrine-note--hello .j-arrow { left: 70%; top: 72%; width: 62px; height: 40px; }
.shrine-peek.is-peeking .shrine-note--hello { opacity: 0; }

/* ---------- the colour chooser, pasted in a little crooked ---------- */
.shrine-swatch { margin: 64px 0 0 10%; rotate: -1.2deg; }
.shrine-swatch > * { rotate: 1.2deg; }
.shrine-swatch > .j-paper, .shrine-swatch > .j-tape { rotate: none; }

/* ---------- the reading ---------- */
.shrine-text { padding-top: 4px; }
.shrine-label { position: relative; max-width: 470px; }
.shrine-label .j-label { margin: 44px 0 40px; }
.shrine-label .j-label-aside { white-space: normal; }
/* The inked Mythical stamp, struck across the top rule of the label. */
.shrine-mythical { position: absolute; right: -8px; top: -26px; width: 128px; height: 48px; overflow: visible; fill: none; stroke: currentColor; color: #345a24; opacity: 1; mix-blend-mode: multiply; rotate: -7deg; pointer-events: none; }
.shrine-mythical text { font-family: var(--j-sc); font-weight: 700; fill: currentColor; stroke: none; }
.shrine-text .j-source-line { margin-top: 16px !important; }
.shrine-leaves { position: relative; display: flex; justify-content: flex-end; margin-top: 48px; padding-right: 30px; }
.shrine-leaves .j-leaves { height: 282px; }
.shrine-leaves .j-note--leaves { left: -6px; top: 246px; }
/* The portrait's own credit, under the print's caption. */
.shrine-portrait-credit { margin: 6px 0 0 !important; padding-left: 15%; }

/* ---------- tablet portrait: one column. The print, the reading, the chooser, then the leaves. ---------- */
@container journal (max-width: 879px) {
  .shrine-study { display: flex; flex-direction: column; align-items: stretch; margin-top: 16px; }
  .shrine-col { display: contents; }
  .shrine-photo-wrap { order: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 118px 40px 0 12%; }
  .shrine-portrait-credit { padding-left: 12%; }
  .shrine-text { order: 2; margin-top: 52px; padding: 0; }
  .shrine-swatch { order: 3; margin: 56px 0 0 4%; }
  .shrine-leaves { order: 4; margin-top: 18px; padding-right: 20px; }
  .shrine-note--shrine { right: auto; left: -8%; top: -60px; text-align: left; --j-note-r: -5deg; }
  .shrine-note--shrine .j-arrow { left: 72%; top: 60%; width: 176px; height: 126px; transform: rotate(28deg); }
}

/* ---------- phones ---------- */
@container journal (max-width: 599px) {
  .shrine-photo-wrap { padding: 104px 22px 0 0; }
  .shrine-peek { width: 112px; right: -8px; top: 30px; }
  .celebi-peek { padding: 8px 8px 11px; }
  .peek-line { font-size: 22px; top: -26px; }
  .shrine-note--hello { top: -38px; right: calc(100% + 4px); }
  .shrine-note--hello .j-arrow { width: 52px; height: 34px; }
  .shrine-note--shrine { display: none; }
  .shrine-text { margin-top: 24px; }
  .shrine-portrait-credit { padding-left: 0; }
  .shrine-label .j-label { margin: 40px 0 34px; }
  .shrine-mythical { width: 108px; height: 40px; top: -22px; right: -4px; }
  .shrine-swatch { max-width: none; margin: 44px 2px 0; }
  .shrine-leaves { margin-top: 26px; padding-right: 0; justify-content: center; }
}

/* ---------- phones held sideways: the print sized to the reading window, the portrait beside it ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  #archive-dialog .shrine-photo-wrap { width: fit-content; max-width: 100%; padding: 70px 124px 0 0; margin: 0 auto; }
  /* The caption moves up to the left of the print, so the picture and its words share one screen. */
  #archive-dialog .shrine-photo { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 22px; width: auto; }
  #archive-dialog .shrine-photo > .j-plate-mount { flex: none; max-width: 62%; }
  #archive-dialog .shrine-photo > figcaption { contain: none; flex: 1 1 11em; min-width: 9em; max-width: 14em; margin: 0 0 12px; text-align: right; }
  #archive-dialog .shrine-photo .j-plate-mount > img { max-height: calc(100dvh - 150px); }
  #archive-dialog .shrine-peek { width: 104px; right: 0; top: 76px; }
  #archive-dialog .shrine-note--shrine { display: none; }
}

/* Reduced motion: Celebi still answers, but nothing bounces or turns. */
@media (prefers-reduced-motion: reduce) {
  .celebi-peek, .peek-line, .shrine-note--hello { transition: none !important; }
  .shrine-peek.is-peeking .celebi-peek > img { animation: none !important; }
  .celebi-peek:hover, .celebi-peek:focus-visible { translate: none; }
}