/* Jompom Figure: illustration in a taped sticker frame + text + further reading. */
.jp-figure{padding:100px 0;background:#fff;color:var(--ink);overflow-x:clip}
.jp-figure.is-light{background:var(--light)}
.jp-figure.is-sky{background:var(--sky)}
.jp-figure.is-ink{background:var(--ink);color:#fff}
.jp-figure .fg-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.jp-figure.img-right .fg-frame{order:2}
.jp-figure .fg-frame{position:relative;margin:0;padding:14px;background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:10px 10px 0 var(--ink);transform:rotate(-1.6deg);transition:transform .6s var(--spring),box-shadow .6s var(--spring)}
.jp-figure.img-right .fg-frame{transform:rotate(1.4deg)}
.jp-figure .fg-frame:hover{transform:rotate(0) translateY(-6px);box-shadow:14px 16px 0 var(--ink)}
.jp-figure .fg-img{display:block;width:100%;height:auto;border-radius:16px;border:2px solid var(--ink);background:var(--sky)}
.jp-figure .fg-frame figcaption{margin:12px 4px 2px;font:600 13px/1.4 Poppins,sans-serif;color:var(--grey)}
.jp-figure .fg-tape{position:absolute;top:-16px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(252,185,0,.85);border:2px solid var(--ink);transform:rotate(-4deg);border-radius:4px}
.jp-figure .fg-kicker{display:inline-block;margin:0 0 16px;padding:6px 14px;border-radius:999px;background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);font:700 14px/1.2 Poppins,sans-serif;transform:rotate(-2deg)}
.jp-figure .fg-title{font-family:var(--jp-display);font-weight:800;font-size:clamp(32px,4.2vw,54px);line-height:1.02;letter-spacing:-.03em;margin:0 0 18px;color:inherit}
.jp-figure .fg-text{font-size:17px;line-height:1.65;margin:0 0 14px;color:#3f4a52}
.jp-figure.is-ink .fg-text{color:#cfd8de}
.jp-figure .fg-reading{margin-top:26px;padding:18px 20px;border:2.5px dashed currentColor;border-radius:18px}
.jp-figure .fg-rl{margin:0 0 10px;font:800 15px/1 var(--jp-display);letter-spacing:.02em;text-transform:uppercase}
.jp-figure .fg-reading ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.jp-figure .fg-reading a{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.jp-figure.is-ink .fg-reading a{color:var(--blue)}
.jp-figure .fg-reading a:hover{color:var(--ink);text-decoration-color:var(--sun)}
.jp-figure.is-ink .fg-reading a:hover{color:#fff}
.jp-figure .fg-reading svg{width:16px;height:16px;flex:none;transition:transform .4s var(--spring)}
.jp-figure .fg-reading a:hover svg{transform:translate(2px,-2px)}
@media (max-width:980px){
  .jp-figure{padding:76px 0}
  .jp-figure .fg-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .jp-figure.img-right .fg-frame{order:0}
}
@media (prefers-reduced-motion:reduce){
  .jp-figure .fg-frame,.jp-figure .fg-frame:hover{transition:none}
}

/* At a glance: three polaroid thumbnails under the main illustration (spans the whole band). */
.jp-figure .fg-glance{grid-column:1/-1;margin-top:8px}
.jp-figure .fg-gl{margin:0 0 16px;font:800 15px/1 var(--jp-display);letter-spacing:.02em;text-transform:uppercase}
.jp-figure .fg-glance ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none}
.jp-figure .fg-glance li{margin:0}
.jp-figure .fg-glance figure{margin:0;padding:10px 10px 12px;background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);transition:transform .5s var(--spring),box-shadow .5s var(--spring)}
.jp-figure .fg-glance li:nth-child(1) figure{transform:rotate(-2deg)}
.jp-figure .fg-glance li:nth-child(2) figure{transform:rotate(1.2deg)}
.jp-figure .fg-glance li:nth-child(3) figure{transform:rotate(-1deg)}
.jp-figure .fg-glance figure:hover{transform:rotate(0) translateY(-6px);box-shadow:8px 10px 0 var(--ink)}
.jp-figure .fg-glance img{display:block;width:100%;height:170px;object-fit:cover;object-position:top center;border-radius:10px;border:2px solid var(--ink);background:var(--sky)}
.jp-figure .fg-glance figcaption{margin:10px 2px 0;font:600 13px/1.35 Poppins,sans-serif;color:var(--ink)}
@media (max-width:760px){
  .jp-figure .fg-glance ul{grid-template-columns:minmax(0,1fr);gap:18px}
  .jp-figure .fg-glance img{height:200px}
}
@media (prefers-reduced-motion:reduce){.jp-figure .fg-glance figure{transition:none}}

/* "At a glance" always last (img-right puts the frame at order 2), and a full-width layout when there is no image. */
.jp-figure .fg-glance{order:3}
.jp-figure.no-img .fg-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.jp-figure.no-img .fg-copy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:56px;align-items:start}
.jp-figure.no-img .fg-copy>*{grid-column:1}
.jp-figure.no-img .fg-copy>.fg-reading{grid-column:2;grid-row:1/span 20;align-self:start;margin-top:0}
@media (max-width:980px){.jp-figure.no-img .fg-copy{grid-template-columns:minmax(0,1fr)}.jp-figure.no-img .fg-copy>.fg-reading{grid-column:1;grid-row:auto;margin-top:8px}}
.jp-figure.no-img .fg-copy>.fg-kicker{justify-self:start}