/* The Cyanopica 2D page «Paint» (on top of site.css and the shared chapters of studio.css). The page takes the colour
   of the work in front of you: paint.js writes --page, --bar, --ink-bar, --s-ink / --s-soft / --s-link and --lamp from
   the data-paper of each section and the scroll position. The works themselves are never recoloured. */
.page-paint main { color: var(--s-ink); }
.page-paint .bar { background: linear-gradient(to bottom, var(--bar, rgba(246, 245, 241, .92)) 52%, transparent); }

/* On Coral Leap's own coral: deep coral-brown for quiet text, the jacket's green for the accent, ink buttons */
.leap, .brush { --s-soft: #74302A; }
.leap .hero__accent, .brush .hero__accent { color: #0E5A49; }
.leap .btn, .brush .btn { background: #16243A; box-shadow: 0 16px 34px -16px rgba(60, 14, 10, .7); }
.leap .btn:hover, .brush .btn:hover { background: #0E5A49; }

/* The first screen, pinned: the words, and Coral Leap painting herself from pencil to oil as you scroll */
.leap { position: relative; height: calc(1.6 * 100 * var(--lvh)); overflow-x: clip; }
.leap__pin { position: sticky; top: 0; height: calc(100 * var(--svh)); display: grid; align-items: center; padding: 76px 0 44px; overflow-x: clip; }
.leap__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(16px, 3vw, 56px); }
.leap__title { font-size: clamp(52px, min(7.2vw, 12.6vh), 124px); }
.leap__art { position: relative; z-index: 1; margin: 0; justify-self: center; width: min(100%, calc(78 * var(--svh) * 1024 / 1536));
  aspect-ratio: 1024 / 1536; }
.leap__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.leap__img--b { opacity: 0; }
.leap__note { position: absolute; inset-inline: 0; top: calc(100% + 6px); text-align: center; font-size: 13px; color: var(--s-soft); max-width: none; margin: 0; }

/* Live oil: Lemon Garden paints itself stage by stage under a lamp in the dark of the studio (studio.css .ch, .sheet) */
.ch--oil { --len: 2.8; }
.ch--oil .ch__pin { padding-top: 112px; }
.ch--oil .sheet__frame { height: min(calc(66 * var(--svh)), 900px); }
.ch--oil .sheet .ch__note { inset-inline: -40%; }

/* Watercolour and graphite: a work on white paper beside its words */
.pane { padding-top: clamp(110px, 16vh, 200px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center;
  gap: 28px clamp(24px, 4vw, 64px); perspective: 1600px; }
.pane--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pane--flip .pane__art { order: -1; }
.pane .kicker { color: var(--graphite); }
.pane__link { margin-top: 18px; }
.pane__art { margin: 0; }
.pane__art--tall { justify-self: center; }
.pane__art--tall img { width: auto; max-height: calc(84 * var(--svh)); border-radius: var(--r); background: #FFFFFF;
  box-shadow: calc(var(--lx) * -22px) 26px 70px -26px rgba(22, 30, 44, .3); }

/* Everything in one studio */
.box { padding-top: clamp(110px, 16vh, 200px); perspective: 1600px; }
.box__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 52px); }
.box__item { background: var(--white); border-radius: var(--r); padding: clamp(24px, 3vw, 36px);
  box-shadow: calc(var(--lx) * -18px) 24px 60px -26px rgba(22, 30, 44, .26); }
.box__name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.box__item p { margin-top: 12px; color: var(--graphite); font-size: 16px; }
:lang(ar) .box__name, :lang(hi) .box__name, :lang(zh-Hans) .box__name { letter-spacing: 0; }

/* The end: the coral again, one sentence and the store */
.brush { margin-top: clamp(110px, 16vh, 200px); padding: clamp(120px, 22vh, 240px) 0 clamp(80px, 12vh, 140px); text-align: center; }
.brush__in { display: grid; justify-items: center; }
.brush__title { font-size: clamp(48px, min(8vw, 14vh), 132px); }
.brush .ch__lead { margin-inline: auto; max-width: 44ch; }
.get--center { align-items: center; }
.brush__note { margin-top: clamp(40px, 7vh, 72px); font-size: 13px; line-height: 1.5; color: var(--s-soft); max-width: 62ch; }

/* Tablets in portrait and narrow laptops */
@media (max-width: 1080px) {
  .box__cols { grid-template-columns: 1fr; max-width: 640px; }
}
/* Phones and portrait tablets: the words above, the work below */
@media (max-width: 899px), (max-aspect-ratio: 4/5) {
  .leap__pin { padding: 72px 0 36px; align-items: start; }
  .leap__in { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .leap__title { font-size: clamp(38px, 11.6vw, 84px); }
  .leap .ch__lead { margin-top: 10px; font-size: 15px; }
  .leap .get { margin-top: 12px; }
  .leap__art { width: min(84%, calc(42 * var(--svh) * 1024 / 1536)); }
  .ch--oil .ch__pin { padding-top: 80px; }
  .ch--oil .sheet__frame { height: min(calc(50 * var(--svh)), 150vw); }
  .ch--oil .sheet .ch__note { inset-inline: -12%; }
  .pane, .pane--flip { grid-template-columns: minmax(0, 1fr); }
  .pane--flip .pane__art { order: 0; }
  .pane__art--tall img { max-height: calc(70 * var(--svh)); }
  .brush__title { font-size: clamp(40px, 12vw, 76px); }
  .get--center { flex-direction: column; }
  .get--center .btn { width: auto; }
}