/* Generated by scripts/62-doodle-takes.py: doodles on the cream panels */
@font-face { font-family: "Permanent Marker"; src: url("../media/fonts/PermanentMarker-Regular.ttf"); }
.doodle {
  position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1; background: var(--ink); opacity: .85;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.doodle.red { background: var(--red); opacity: 1; }
.note {
  position: absolute; z-index: 0; margin: 0; pointer-events: none; white-space: nowrap;
  font: 400 clamp(26px, 2.8vw, 46px)/1 "Permanent Marker", cursive; color: var(--red); text-transform: none;
  letter-spacing: 0; word-spacing: 0;
}

/* F: doodles attached to what they belong to (65-anchored-doodles.py) */
.f-dd { position: absolute; z-index: -1; pointer-events: none; background: var(--ink); opacity: .85;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.f-dd.red { background: var(--red); opacity: 1; }
/* party: a hand-drawn double underline under the facts, hung from the facts themselves; under about half the row,
   the date and time, as the full width was too long (Kingsley: "to long") */
.last .facts { position: relative; }
.f-underline { left: -1%; top: 100%; width: 48%; }
/* the flyer: a burst from behind its top corner, a hatched shadow under its foot */
.flyer { z-index: 0; }
.f-burst { left: -22%; top: -18%; width: 46%; }
.f-hatch { left: -10%; bottom: -12%; width: 34%; rotate: -8deg; }
/* the phone: motion lines off its top corner */
/* behind the phone, like the burst behind the flyer */
.f-motion { right: -4%; top: -9%; width: 26%; rotate: -38deg; }
.last-stage .phone { z-index: 1; }
/* gallery: an arrow at the title line's right end turning down into the photos, a squiggle under the photos at the left margin */
.weekend-head { position: relative; }
.f-hook { right: 1%; bottom: 10%; width: clamp(110px, 10vw, 170px); }
/* the double lines, centred across the seam between the gallery and the sign-up (Kingsley: "remove and add those two
   lines instead in the middle of gallery and next one panels"); the sign-up paints over the gallery, so their top
   half shows over it */
.list { overflow: visible; }
/* a little higher and longer than first placed (Kingsley: "bring up some and make it a little longer"); one line
   now, its lower one taken off ("remove the bottom line") */
.f-seam { left: 50%; top: 0; width: clamp(300px, 36vw, 580px); translate: -50% -50%; z-index: 1; }
/* the red notes, attached: under the phone, and over the form */
.f-note { position: absolute; z-index: 2; margin: 0; pointer-events: none; white-space: nowrap;
  font: 400 clamp(22px, 2.1vw, 34px)/1 "Permanent Marker", cursive; color: var(--red);
  text-transform: none; letter-spacing: 0; word-spacing: 0; }
.f-note .f-dd { z-index: 0; }
/* the Rebels mark as an inked stamp in the space under the party's facts, printed onto the paper */
.last-head { position: relative; }
/* really big, across the seam between the party panel and the gallery, run off the page's left edge (Kingsley: "mkae
   the ink bleed logo way bigger", "make it reallly big that some of it gets cut off by the boundary", "i wantted the
   stamp on the left side", then "cutoff to sharp", "i actually wanted it ontop of both panels not have the gallery
   panel cut half the logo"). Each panel clips what's in it, so the stamp is in both, the two copies the same size
   and lined up on the seam (--drop is how far it reaches into the gallery): together they read as one, behind each
   panel's words and photos */
/* then larger and higher (Kingsley: "bring logo stamp up and make it larger") */
.f-stamp { --sw: min(46vw, 80svh); --drop: 26svh; left: -6vw; width: var(--sw); aspect-ratio: 1;
  rotate: -11deg; opacity: .32; mix-blend-mode: multiply; }   /* lighter (Kingsley: "make the stamp lighter"); was .6 */
.last > .f-stamp { bottom: calc(-1 * var(--drop)); }
.weekend > .f-stamp { top: calc(var(--drop) - var(--sw)); }
/* a little bigger and to the left of the form's edge (Kingsley: "make this slightly bigger and nudged to left some") */
.f-info { left: calc(-1 * clamp(14px, 2.4vw, 40px)); bottom: calc(100% + clamp(14px, 2.4svh, 30px)); rotate: -4deg;
  font-size: clamp(26px, 2.5vw, 40px); }
.f-info .f-dd { left: calc(100% + .15em); top: .1em; width: 2.4em; }
/* sign-up: a hatched shadow under the button */
.list-form { position: relative; }
.f-hatch-btn { right: -3%; bottom: -16%; width: 14%; rotate: 4deg; }
@media (max-width: 760px) {
  .f-underline { display: none; }
  .f-seam { width: 72vw; }
  .f-stamp { display: none; }
  /* in the form's flow, so it can't run into "get it first" over the title */
  .f-info { position: relative; left: 0; bottom: auto; grid-column: 1 / -1; justify-self: start; margin: 0 0 .5em;
    font-size: clamp(22px, 6.4vw, 28px); }
  /* smaller on phones, clear of the title's wrapped second line */
  .f-hook { right: 0; bottom: 12%; width: 60px; }
  .f-motion { right: -2%; top: -6%; width: 22%; }
  .f-burst { left: -14%; top: -12%; width: 38%; }
}