/* Far Canopy (#canopy). Owned by js/journal-canopy.js.
   Shared journal rules live in styles-journal.css; the page is a `journal` container (breakpoints 879px, 599px). */

/* ---------- the opener: the view straight up, across the whole sheet ---------- */
/* The finale opens on the journal's one full-bleed painting, torn along its foot, with the title on a deckled
   panel pinned over the tear and the stamp struck on the panel's corner. The crop keeps the painting's own
   paper margins out of sight. */
.j-head--canopy { display: block; min-height: 0; margin: 0 calc(var(--j-pad) * -1); }
.j-head--canopy .j-vignette {
  height: 540px; margin: 0; overflow: clip;
  background: var(--j-paper) var(--j-paper-tile) 0 0 / 768px auto;
  clip-path: polygon(0 0, 100% 0, 100% 91%, 96% 93.5%, 91% 91.5%, 85% 94.5%, 79% 92%, 72% 95%, 66% 92.5%, 59% 96%, 52% 93%, 45% 95.5%, 38% 92.5%, 31% 95%, 24% 93%, 17% 96%, 10% 93%, 4% 95%, 0 92.5%);
}
.j-vignette--canopy img { -webkit-mask-image: none; mask-image: none; object-position: 50% 42%; transform: scale(1.24); transform-origin: 50% 40%; }
/* Where the light comes through: a faint blush in the open sky, deeper when the page is in pink. */
.j-vignette--canopy::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55; transition: opacity .8s ease;
  background: radial-gradient(ellipse 22% 34% at 50% 38%, #f3b9cc 0%, #f6cdd955 55%, transparent 100%);
}
.j-page--canopy.is-pink .j-vignette--canopy::after { opacity: 1; background: radial-gradient(ellipse 34% 48% at 50% 40%, #eea7bf 0%, #f3c2d2aa 50%, #f7dbe433 80%, transparent 100%); }
.j-head--canopy .j-head-text { position: relative; z-index: 2; width: min(520px, calc(100% - 2 * var(--j-pad))); margin: -176px 0 0 calc(var(--j-pad) + 8px); padding: 36px 44px 32px; }
.j-head--canopy .j-head-text > :not(.j-paper, .j-stamp) { position: relative; z-index: 1; }
.j-head--canopy .j-head-text > .j-paper { rotate: -.8deg; }
.j-head--canopy .j-head-text > .j-stamp { z-index: 3; left: auto; right: -40px; top: -40px; width: 156px; height: 156px; --j-stamp-r: 12deg; }
.j-head--canopy .j-dateline { margin-bottom: 10px !important; }
/* The blossom paint under Canopy: one dab, square and unstretched, the second a lighter touch. */
.j-head--canopy .j-wash--a { --x: -.14em; --y: -.1em; --s: 1.28em; --r: -8deg; --o: .66; }
.j-head--canopy .j-wash--b { display: block; --x: 72%; --y: .02em; --s: 1em; --r: 24deg; --o: .42; }

/* ---------- the colour study: the facts, the pink plate, the Green or Shiny card ---------- */
.canopy-study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 44px; align-items: start; margin-top: 30px; }
.canopy-text { grid-column: 1; grid-row: 1; padding-top: 30px; }
.canopy-text > p { max-width: 30em; }
.canopy-text .j-source-line { margin-bottom: 14px !important; }
.canopy-names { color: var(--j-ink); }
.canopy-plate { grid-column: 2; grid-row: 1 / span 2; margin: 76px 24% 0 2%; }
.canopy-plate .j-plate-mount { padding: 18px 18px 14px; }
/* The artwork is printed on white: multiplied, its white becomes the card it is pasted on. */
.canopy-plate .j-plate-mount > img { mix-blend-mode: multiply; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; }
.canopy-plate figcaption { margin-right: -30%; }
.canopy-note--wings { left: calc(100% + 14px); top: 18%; font-size: 21px; --j-note-r: 4deg; }
.canopy-note--wings .j-arrow { left: -96px; top: 22px; width: 88px; height: 48px; transform: scaleX(-1); }
.canopy-note--pink { left: calc(100% + 10px); top: 58%; font-size: 21px; line-height: 1.15; --j-note-r: -5deg; }
.canopy-note--pink .j-arrow { left: -86px; top: 6px; width: 74px; height: 40px; }

.canopy-xref { display: inline; padding: 11px 9px; margin: -11px -9px; font: inherit; line-height: inherit; color: var(--j-ink); text-decoration: underline; text-decoration-color: var(--j-link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.canopy-xref:hover { text-decoration-color: currentColor; }
/* The 44px tap padding stays, but the focus ring hugs the words instead of crossing the next line. */
#archive-dialog .canopy-xref:focus-visible { outline-offset: -9px; border-radius: 2px; }

/* The small colour card: the same two paints as the Shrine, still the real data-form buttons. */
.canopy-colour { position: relative; grid-column: 1; grid-row: 2; }
.canopy-swatch { z-index: 1; max-width: 350px; margin: 40px 0 0 5%; padding: 24px 24px 18px; rotate: -1.2deg; }
.canopy-swatch > * { rotate: 1.2deg; }
.canopy-swatch > .j-paper, .canopy-swatch > .j-tape { rotate: none; }
.canopy-swatch .j-card-title { font-size: 28px; }
.canopy-swatch p { font-size: 18px; }
.canopy-swatch .j-swatch-paint { width: 70px; height: 70px; }
.canopy-swatch .j-swatch-name { font-size: 22px; }
.canopy-fern { z-index: 0; left: calc(5% + 300px); top: -6px; width: 70px; transform: rotate(24deg); }

/* ---------- the view: a pencil viewfinder with the sky in it ---------- */
.canopy-view { position: relative; width: min(100%, 780px); margin: 110px auto 0 0; padding: 176px 60px 54px; }
.canopy-finder { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.canopy-finder::before {
  content: ''; position: absolute; inset: 0; opacity: .75; transition: opacity .6s ease .5s;
  background:
    linear-gradient(var(--j-pencil), var(--j-pencil)) 33.3% 0 / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 66.6% 0 / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 33.3% 100% / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 66.6% 100% / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 0 33.3% / 13px 1.3px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 0 66.6% / 13px 1.3px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 100% 33.3% / 13px 1.3px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 100% 66.6% / 13px 1.3px no-repeat;
}
.canopy-corner { position: absolute; width: 58px; height: 58px; overflow: visible; fill: none; stroke: var(--j-pencil); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canopy-corner path + path { stroke-width: 1; opacity: .7; }
.canopy-corner--tl { left: 0; top: 0; }
.canopy-corner--tr { right: 0; top: 0; transform: scaleX(-1); }
.canopy-corner--br { right: 0; bottom: 0; transform: scale(-1, -1); }
.canopy-corner--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.canopy-corner path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.canopy-focus { position: absolute; left: 50%; top: 92px; width: 36px; height: 28px; translate: -50% -50%; overflow: visible; fill: none; stroke: var(--j-hand); stroke-width: 1.4; stroke-linecap: round; opacity: .8; transition: opacity .4s ease .9s; }
.canopy-view.is-armed:not(.is-framed) .canopy-corner path { stroke-dashoffset: 1; }
.canopy-view.is-armed:not(.is-framed) .canopy-finder::before, .canopy-view.is-armed:not(.is-framed) .canopy-focus, .canopy-view.is-armed:not(.is-framed) .canopy-corner { opacity: 0; }
.canopy-view.is-armed .canopy-corner path { transition: stroke-dashoffset .55s ease-out; }
.canopy-view.is-armed .canopy-corner--tr path { transition-delay: .12s; }
.canopy-view.is-armed .canopy-corner--br path { transition-delay: .24s; }
.canopy-view.is-armed .canopy-corner--bl path { transition-delay: .36s; }

/* The sky in the frame: a patch of light, and a few petals coming down through it. */
.canopy-sky { position: absolute; z-index: 0; left: 28px; right: 28px; top: 22px; height: 150px; pointer-events: none; }
.canopy-light { position: absolute; inset: -10px 18%; border-radius: 50%; background: radial-gradient(closest-side, #f2b6c9 0%, #f4c6d488 45%, transparent 100%); mix-blend-mode: multiply; opacity: .45; transition: opacity .8s ease, scale .8s ease; }
.j-page--canopy.is-pink .canopy-light { opacity: .95; scale: 1.25; }
/* Two blossom sprigs hang into the frame from above, as if seen from under the branch. Nudge them to compose the view. */
.canopy-sprig { position: absolute; display: block; }
.canopy-sprig > .j-specimen { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: auto; }
.canopy-sprig--a { left: 3%; top: -40px; width: 104px; aspect-ratio: 304 / 400; rotate: 152deg; }
.canopy-sprig--b { right: 5%; top: -30px; width: 84px; aspect-ratio: 304 / 400; rotate: -146deg; }
.canopy-view.is-framed .canopy-sprig { animation: canopy-sway 4.8s ease-in-out .3s; }
.canopy-view.is-framed .canopy-sprig--b { animation-duration: 4.2s; animation-delay: .6s; animation-direction: reverse; }
@keyframes canopy-sway { 50% { transform: rotate(4deg); } }
.canopy-petals { position: absolute; inset: 0 0 -60px; overflow: hidden; }
.canopy-petals i { position: absolute; top: -14px; left: var(--x); width: 11px; height: 7px; border-radius: 80% 10% 80% 10%; background: #f2b3c6; box-shadow: inset -1px -1px 0 #d98aa2; opacity: 0; }
.canopy-petals i:nth-child(1) { --x: 12%; --d: 0s; --t: 7.5s; }
.canopy-petals i:nth-child(2) { --x: 27%; --d: 1.6s; --t: 8.6s; }
.canopy-petals i:nth-child(3) { --x: 41%; --d: .7s; --t: 7s; }
.canopy-petals i:nth-child(4) { --x: 53%; --d: 2.4s; --t: 9.2s; }
.canopy-petals i:nth-child(5) { --x: 64%; --d: 1.1s; --t: 7.8s; }
.canopy-petals i:nth-child(6) { --x: 76%; --d: 3s; --t: 8.2s; }
.canopy-petals i:nth-child(7) { --x: 88%; --d: .3s; --t: 9s; }
.canopy-petals i:nth-child(8) { --x: 34%; --d: 4.2s; --t: 8s; }
.canopy-petals i:nth-child(9) { --x: 70%; --d: 5s; --t: 7.4s; }
/* Once as the frame draws itself, so nothing keeps moving beside the text; on and on while the page is pink. */
.canopy-view.is-framed .canopy-petals i { animation: canopy-petal var(--t) var(--d) linear 1 both; }
.j-page--canopy.is-pink .canopy-view.is-framed .canopy-petals i { animation-iteration-count: infinite; }
@keyframes canopy-petal {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12% { opacity: .9; }
  50% { transform: translate(22px, 110px) rotate(160deg); }
  85% { opacity: .85; }
  100% { opacity: 0; transform: translate(-8px, 220px) rotate(320deg); }
}

.canopy-view-copy { position: relative; z-index: 2; max-width: 30em; }
.canopy-view-copy .j-find-title { margin-bottom: 12px; }
.canopy-note--leaf { right: 44px; bottom: 44px; font-size: 22px; line-height: 1.15; --j-note-r: -6deg; z-index: 2; }

/* The blush: a pink paint dab and a printed label, pressed or not. */
.canopy-blush { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; margin-top: 18px; padding: 4px 14px 4px 4px; border-radius: 10px; color: var(--j-ink); text-align: left; }
.canopy-blush:hover { background: #b8446c12; }
.canopy-blush-paint { position: relative; flex: none; display: block; width: 52px; height: 52px; }
.canopy-blush-paint img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: scale .3s ease, rotate .3s ease; }
.canopy-blush-paint::after { content: ''; position: absolute; inset: -6px; border: 1.6px solid var(--j-hand); border-radius: 48% 52% 46% 54%; opacity: 0; transition: opacity .3s ease; }
.canopy-blush[aria-pressed="true"] .canopy-blush-paint::after { opacity: .9; }
.canopy-blush[aria-pressed="true"] .canopy-blush-paint img { scale: 1.08; rotate: -10deg; }
.canopy-blush-label { font: italic 400 19px/1.3 var(--j-text); text-decoration: underline; text-decoration-color: var(--j-link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.canopy-blush:hover .canopy-blush-label { text-decoration-color: currentColor; }

/* ---------- tablet portrait: one column ---------- */
@container journal (max-width: 879px) {
  .j-head--canopy .j-vignette { height: 420px; margin: 0; }
  .j-vignette--canopy img { object-position: 50% 42%; transform: scale(1.5); transform-origin: 50% 40%; }
  .j-head--canopy .j-head-text { width: auto; margin: -120px var(--j-pad) 0; padding: 30px 34px 28px; }
  .j-head--canopy .j-head-text > .j-stamp { left: auto; right: -10px; top: -84px; width: 136px; height: 136px; }

  .canopy-study { display: block; margin-top: 8px; }
  .canopy-text { padding-top: 26px; }
  .canopy-plate { width: 62%; max-width: 420px; margin: 64px 0 0 2%; }
  .canopy-plate figcaption { margin-right: -30%; }
  /* The notes sit further off the narrower plate: longer arrows so the tips reach the wing and the body. */
  .canopy-note--wings { top: 28%; }
  .canopy-note--wings .j-arrow { left: -178px; width: 168px; top: 25px; height: 68px; }
  .canopy-note--pink .j-arrow { left: -164px; width: 154px; top: 4px; }
  .canopy-colour { margin-top: 12px; }
  .canopy-swatch { margin: 44px 0 0 auto; }
  .canopy-fern { left: auto; right: 330px; top: 10px; width: 64px; transform: rotate(-22deg); }
  .canopy-view { width: 100%; margin-top: 92px; padding: 170px 48px 50px; }
}

/* ---------- phones ---------- */
@container journal (max-width: 599px) {
  .j-head--canopy .j-vignette { height: 330px; }
  .j-vignette--canopy img { object-position: 50% 42%; transform: scale(1.9); transform-origin: 50% 38%; }
  .j-head--canopy .j-head-text { margin: -78px 6px 0; padding: 24px 22px 22px; }
  .j-head--canopy .j-head-text > .j-stamp { right: -8px; top: -70px; width: 104px; height: 104px; }

  .canopy-text { padding-top: 18px; }
  .j-page--canopy .j-find-title { font-size: 34px; }
  .canopy-plate { width: 84%; max-width: 330px; margin: 92px auto 0 2%; }
  .canopy-plate .j-plate-mount { padding: 13px 13px 10px; }
  .canopy-plate figcaption { margin-right: -12%; }
  .canopy-note--pink { left: 30%; top: -74px; --j-note-r: -3deg; }
  .canopy-note--pink .j-arrow { left: -34px; top: 62px; width: 92px; height: 56px; transform: rotate(58deg) scaleX(-1); }
  .canopy-note--wings { display: none; }
  .canopy-swatch { max-width: none; margin: 40px 2px 0; }
  .canopy-fern { right: -4px; left: auto; top: -76px; width: 48px; z-index: 2; transform: rotate(28deg); }
  .canopy-view { margin-top: 72px; padding: 150px 24px 36px; }
  .canopy-sky { left: 14px; right: 14px; top: 16px; height: 118px; }
  .canopy-sprig--a { width: 78px; top: -30px; }
  .canopy-sprig--b { width: 64px; top: -24px; }
  .canopy-corner { width: 40px; height: 40px; }
  .canopy-focus { display: none; }
  .canopy-note--leaf { display: none; }
}

/* ---------- a phone held sideways ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  /* The painting still opens the finale, with the panel over its foot. */
  #archive-dialog .j-head--canopy .j-vignette { height: min(420px, 70dvh); }
  #archive-dialog .j-head--canopy .j-head-text { width: min(520px, calc(100% - 2 * var(--j-pad))); margin: -96px 0 0 var(--j-pad); }
  /* The plate is held short to fit the screen, so the tablet's long arrows would cross the whole figure. */
  @container journal (max-width: 879px) {
    #archive-dialog .canopy-note--wings .j-arrow { left: -84px; width: 70px; top: 24px; height: 42px; }
    #archive-dialog .canopy-note--pink .j-arrow { left: -87px; width: 66px; top: -12px; height: 24px; }
  }
}

/* Reduced motion: the frame is drawn, the petals stay out of sight, nothing lifts or grows. */
@media (prefers-reduced-motion: reduce) {
  .canopy-petals i, .canopy-view.is-framed .canopy-petals i, .canopy-sprig, .canopy-view.is-framed .canopy-sprig { animation: none !important; }
  .canopy-petals i { opacity: 0 !important; }
  .canopy-corner path, .canopy-finder::before, .canopy-focus, .canopy-light, .canopy-blush-paint img, .canopy-blush-paint::after, .j-vignette--canopy::after { transition: none !important; }
  .canopy-view .canopy-corner path { stroke-dashoffset: 0 !important; }
  .canopy-view .canopy-finder::before, .canopy-view .canopy-focus { opacity: .75 !important; }
}