/* ============================================================================
   exotic — css/motion-heroes.css · the hero-graphic posters
   Chrome only. Each graphic is a canvas from js/motion-heroes.js and styles
   nothing itself. The card is a Swiss poster: title top, art through the whole
   frame, attribution at the foot.
   ========================================================================== */

.hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px}
@media (max-width:940px){.hp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.hp-grid{grid-template-columns:1fr}}

.hp{position:relative;aspect-ratio:3/4;border-radius:var(--rad-3,16px);overflow:hidden;
  background:var(--bg-sunken);border:1px solid var(--hairline-2);box-shadow:var(--crisp);
  display:flex;flex-direction:column;padding:20px;isolation:isolate;cursor:crosshair}
/* The art starts BELOW the type block. A 10px mono dek over 36 crossing lines
   is unreadable at any scrim strength, and the reference posters don't fight
   that battle either — they set the type in clear air and let the graphic own
   the lower two-thirds.
   It is a FLEX CHILD, not a percentage inset: deks run three to five lines and
   titles one or two, so any fixed fraction collides on the longest card. This
   takes exactly the room that's left, then bleeds out through the padding on
   three sides so the poster still runs to its edges. */
.hp-art{position:relative;z-index:0;flex:1 1 auto;min-height:0;
  margin:14px -20px -20px}
/* one scrim, at the foot, so the attribution sits on the card and not in the
   drawing. The card's OWN background at full strength, then a fade — never a
   tint and never a panel: the poster stays one surface. */
.hp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  pointer-events:none;
  background:linear-gradient(transparent 0%,var(--bg-sunken) 44%,var(--bg-sunken) 100%)}

.hp-t{position:relative;z-index:2;font-size:21px;font-weight:600;line-height:1.08;
  letter-spacing:var(--track-display,-0.02em);color:var(--ink);margin:0}
.hp-d{position:relative;z-index:2;font-family:var(--font-num);font-size:10px;line-height:1.65;
  color:var(--ink-2);margin:9px 0 0;max-width:27ch;text-wrap:pretty}
.hp-foot{position:relative;z-index:2;margin:-44px 0 0;padding-top:26px;display:flex;
  align-items:flex-end;gap:9px;justify-content:space-between}
.hp-for{font-family:var(--font-num);font-size:9px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted);line-height:1.6;max-width:24ch}
.hp-for b{display:block;color:var(--ink-2);font-weight:500;text-transform:none;letter-spacing:0;
  font-size:10px;margin-bottom:2px}
.hp-mk{width:18px;height:18px;flex:0 0 auto;line-height:0;opacity:.9}
.hp-mk svg{display:block;width:100%;height:100%}

@media (max-width:600px){
  .hp{aspect-ratio:4/5;padding:17px}
  .hp-art{margin:12px -17px -17px}
  .hp-t{font-size:19px}
}

@media (prefers-reduced-motion:reduce){ .hp{cursor:default} }
html.mk-reduce .hp{cursor:default}