/* Rave Nerds — single landing page.
   White page, orange IBM Plex Mono masthead, mono body copy, Google Form.
   Every size is a literal value. Change a number, reload, done. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff;
  color: #111111;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The centred column. 712 - 36 - 36 = a 640px content width, which is what
   Google caps the form card at, so the text and the form share an edge. */
.page {
  max-width: 712px;
  margin: 0 auto;
  padding: 48px 36px;
}

/* ---- Masthead ---------------------------------------------------------- */

.masthead {
  margin: 0 0 40px;
  color: #fc9003;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.masthead__line {
  display: block;
}

/* RAVE NERDS is pinned to the viewport's top-left and sits out of flow, so
   CALL FOR SUBMISSION rides up to the top of the column on its own. */
.masthead__line--left {
  position: fixed;
  top: 20px;
  left: 36px;
  z-index: 10;
  font-size: 20px;
  text-align: left;
}

.masthead__line--right {
  font-size: 26px;
  text-align: right;
}

/* On wide screens the pinned RAVE NERDS sits in the margin beside the centred
   column, so content scrolls past well clear of it. The column reaches it at
   about 1015px wide (712px column + 2 x 152px for the pinned text), below which
   body text would scroll straight underneath. Backing it with a white bar right
   across the page gives that text something to disappear behind.

   The bar is 46px tall (14 + a 22px line box + 10) so it stops just short of
   the 48px .page top padding — flush with where CALL FOR SUBMISSION starts, so
   nothing is covered at rest.

   This is the only media query in the file; the behaviour is width-conditional
   by nature, so a single fixed value can't express it. */
@media (max-width: 1015px) {
  .masthead__line--left {
    top: 0;
    left: 0;
    right: 0;
    padding: 14px 36px 10px;
    background: #ffffff;
  }
}

/* ---- Body copy --------------------------------------------------------- */
/* Rendered from content/_index.md. */

/* The one deliberate departure from the body: the info copy is set smaller.
   Delete this rule to put it back at the body size. */
.copy {
  font-size: 14px;
}

.copy > :first-child {
  margin-top: 0;
}

.copy > :last-child {
  margin-bottom: 0;
}

.copy p {
  margin: 0 0 14px;
}

/* Same size as the surrounding copy; set apart by weight and caps instead. */
.copy h2,
.copy h3 {
  margin: 24px 0 10px;
  font-size: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Real links and the click-to-copy email share one appearance, so the button
   can't drift out of step with the anchors around it. */
.copy a,
.copy-email {
  color: #fc9003;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.copy ul,
.copy ol {
  margin: 0 0 14px;
  padding-left: 17px;
}

.copy li {
  margin-bottom: 5px;
}

/* ---- Click-to-copy email ----------------------------------------------- */
/* A <button> from layouts/shortcodes/copy-email.html, stripped back to look
   exactly like a text link. Colour and underline come from the shared rule up
   in the body-copy section. */

/* Buttons don't inherit type from their parent the way ordinary text does, so
   font: inherit is what makes this pick up the surrounding font — family, size,
   weight and line-height all at once. Without it a button falls back to the
   browser's own UI font at ~13px. */
.copy-email {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.copy-email:hover,
.copy-email:focus-visible {
  text-decoration-thickness: 2px;
}

/* While the "copied!" confirmation is showing. */
.copy-email.is-copied {
  text-decoration: none;
  opacity: 0.75;
}

/* ---- Embedded Google Form ---------------------------------------------- */

/* Google insets its card by 5% of the frame width and caps it at 640px, so a
   640px frame renders a 576px card — 32px inside the text column each side.
   The -36px pulls the frame out to the full 712px page box, which lands the
   card at exactly 640px, flush with the copy above. Keep this the same number
   as the .page side padding, or the form overflows narrow screens. */
.form {
  margin-top: 40px;
  margin-left: -36px;
  margin-right: -36px;
}

/* Cross-origin, so nothing here can read the form's height and Google doesn't
   post it out — it has to be a fixed number. Measured on the live form: 1266px
   at a 711px-wide frame, 1426px at 389px. Page and form are both white, so
   over-shooting is invisible; under-shooting gives the frame its own
   scrollbar. */
.form iframe {
  display: block;
  width: 100%;
  height: 1600px;
  border: 0;
}

/* Shown instead of the iframe when params.formURL is empty. */
.form--placeholder {
  padding: 24px;
  border: 1px dashed #dcdcdc;
  color: #777777;
}

.form--placeholder p {
  margin: 0;
}

.form--placeholder code {
  color: #fc9003;
}