/* The open call page. Lifted from invite_page.html by
   0411 Invite Me/scripts/build_grav_page.py - edit it THERE.

   IT IS A FILE BECAUSE PARSEDOWN ATE THE <style> BLOCK. The page
   body carried its own stylesheet and Grav rendered it as
   &lt;style> - escaped opening bracket, the whole sheet printed
   as text down the page. The <div> around it survived and the logo
   resolved, so this is Parsedown refusing that one element rather
   than markup being escaped generally. A stylesheet belongs in the
   head regardless; the page body is now only the words and the
   markup. */

/* the campaign's palette, taken from the logo itself.

   THE GROUND IS WHITE, like the rest of the site. The films are black
   because they are films; a black panel in the middle of oerum.org
   would read as somebody else's page having been pasted in. The colour
   comes from the lettering instead, which is where it comes from in the
   films too. */
.ip-page {
  --ink: #101828;
  --cyan: #1ec8ff;
  --pink: #ff3ec8;
  --yellow: #ffd21e;
  --dim: #5a6676;

  background: #fff;
  color: var(--ink);
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  padding: 1.5rem 1.25rem 3rem;
  max-width: 44rem;
  margin: 0 auto;
}

.ip-page .ip-logo {
  display: block;
  width: min(100%, 26rem);
  margin: 0 auto .75rem;
}

/* the lede carries the outlined lettering of the supers in the films:
   bright fill, heavy dark edge, which is how the logo is built */
.ip-page .ip-lede {
  text-align: center;
  font-size: clamp(1.1rem, 4.5vw, 1.55rem);
  line-height: 1.35;
  color: var(--cyan);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  margin: 0 0 2rem;
}

/* THE PROSE IS THE SITE'S SERIF at the site's measure. Comic Sans is
   for the things that are looked at rather than read. */
.ip-page .ip-prose {
  font-family: ui-serif, Charter, "Iowan Old Style", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 36em;
}

.ip-page .ip-prose p { margin: 0 0 1rem; }
.ip-page .ip-prose ul { margin: 0 0 1rem; padding-left: 1.2em; }
.ip-page .ip-prose li { margin: 0 0 .35rem; }

/* the fold. Shut on arrival: everything a stranger needs in order to
   write is above it, and everything that answers "yes but…" is one
   click down. */
.ip-page .ip-fold {
  border-top: 2px solid var(--ink);
  padding: .55rem 0;
}
.ip-page .ip-fold:last-of-type { border-bottom: 2px solid var(--ink); }

.ip-page .ip-fold > summary {
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  padding: .35rem 0 .35rem 1.6rem;
  position: relative;
}
.ip-page .ip-fold > summary::-webkit-details-marker { display: none; }

/* the marker is drawn rather than a glyph, so it cannot be eaten by an
   encoding on the way into the page */
.ip-page .ip-fold > summary::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .85em;
  width: 0; height: 0;
  border-left: .5rem solid var(--pink);
  border-top: .36rem solid transparent;
  border-bottom: .36rem solid transparent;
  transform-origin: .18rem 50%;
  transition: transform .12s ease-out;
}
.ip-page .ip-fold[open] > summary::before { transform: rotate(90deg); }

.ip-page .ip-fold > summary:hover { color: var(--pink); }

.ip-page .ip-count {
  font-size: .85rem;
  color: var(--dim);
}

.ip-page .ip-fold .ip-prose { padding: .4rem 0 .6rem 1.6rem; }

.ip-page .ip-h2 {
  font-family: inherit;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  color: var(--pink);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  margin: 2.4rem 0 .8rem;
}

.ip-page .ip-small {
  text-align: center;
  font-size: .95rem;
  color: var(--dim);
  margin: 0;
}

/* On paper the fold is meaningless, so the markers go: a printed
   triangle pointing at open text is noise. CSS CANNOT FORCE A <details>
   OPEN — the theme's own beforeprint handler does that for every shut
   one on the page, which is why there is no script here. */
@media print {
  .ip-page .ip-fold > summary::before { display: none; }
  .ip-page .ip-fold > summary { padding-left: 0; }
  .ip-page .ip-fold .ip-prose { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-page .ip-mail a,
  .ip-page .ip-fold > summary::before { transition: none; }
}

/* THE ADDRESS IS THE ONLY LOUD THING ON THE PAGE, because it is the
   only thing a reader has to do. It is set in the mono face at the
   size of a heading, bordered rather than filled, and it flashes on
   hover like every other link on the site. There is nothing else to
   click and nothing to fill in. */
.ip-page .ip-mailnote{font:600 .78rem/1.3 var(--mono,ui-monospace,
   Consolas,monospace);letter-spacing:.09em;text-transform:uppercase;
   color:#5a6676;margin:1.9rem 0 .5rem}
.ip-page .ip-mail{margin:0 0 1.2rem}
.ip-page .ip-mail a {
  display: block;
  padding: .9rem 1rem;
  font: inherit;
  font-size: clamp(1.15rem, 5.2vw, 1.9rem);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  /* INK ON YELLOW, NOT PINK ON YELLOW. The submit button was pink with
     a black stroke, and on this ground that is 2.15:1 - the stroke was
     holding the letters together and the fill was adding nothing but
     colour. Solid ink on the same yellow is 12.7:1. The object is
     unchanged: same yellow, same heavy black border, same face. It is
     the one thing on the page a reader has to act on, so it is the one
     thing that must not be hard to read. */
  color: var(--ink);
  background: var(--yellow);
  border: 4px solid var(--ink);
  border-radius: 14px;
  /* AN ADDRESS CANNOT BE HYPHENATED and must not overflow a
     320 px phone, so it is allowed to break anywhere rather
     than pushing the page sideways. */
  word-break: break-all;
  transition: transform .08s ease-out;
}
.ip-page .ip-mail a:hover { transform: scale(1.02); }
.ip-page .ip-mail a:active { transform: scale(.98); }
.ip-page .ip-mail a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}