/* Until the Rain on the studio domain: the board look of whalesdontfly.com laid over the landing page while it is copied.
   The page itself is unchanged in Marketing/website; this file adds the dot grid, comic borders and stickers. */
body { background-image: radial-gradient(circle, rgba(45,42,62,.06) 1.2px, transparent 1.7px); background-size: 24px 24px; }
.beat .text { background: transparent; }
.media.framed, .reel, .shot .pic { box-shadow: 0 0 0 7px #fff, 0 0 0 9px #2d2a3e, 6px 7px 0 9px rgba(45,42,62,.9) !important; }
.media.framed.hit { box-shadow: 0 0 0 7px #fff, 0 0 0 9px #ff5a3c, 6px 7px 0 9px rgba(45,42,62,.9) !important; }
.beat, .page-head, .head, .hero { position: relative; }
/* the new logo: wider than the old one, so a little larger and the board tucks in less below it */
.hero h1 { width: clamp(300px, 40vw, 600px); }
.board { margin-top: clamp(-190px, -11vw, -28px); }
.final img.mark { width: clamp(200px, 18vw, 280px); }
.site-foot img.mark { width: 180px; }
@media (max-width: 760px) { .hero > .stk { display: none; } }
.stk { position: absolute; z-index: 5; display: block; width: var(--w, 120px); rotate: var(--r, 0deg); pointer-events: auto;
  filter: drop-shadow(0 2px 1px rgba(45,42,62,.14)) drop-shadow(0 10px 12px rgba(45,42,62,.12));
  transform: perspective(500px); transition: scale .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1); }
.stk img { display: block; width: 100%; height: auto; max-width: none; }
.stk:hover { transform: perspective(500px) rotateX(10deg) rotateY(-14deg) translateZ(18px); scale: 1.05; }
.stk::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 46%, rgba(255,247,214,.7) 50%, rgba(214,236,255,.7) 54%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: calc(100% - var(--sh, 0) * 100%) 0;
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
@media (max-width: 760px) {
  .stk { scale: .75; }
  .stk[style*="left:-"] { left: 4px !important; } .stk[style*="right:-"] { right: 4px !important; }
  .page-head .stk { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stk { transition: none; } .stk:hover { transform: none; scale: none; } .stk::after { display: none; } }

/* mail button instead of a form (2026-10-20) */
.mailbox p { margin: 0 0 20px; max-width: 46ch; }