/* Rave Nerds — home / about / submissions.
   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 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  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. */
/* This is the wide layout: the brand block sits out in the left margin beside
   the column, so the copy starts near the top. width: 100% is load-bearing —
   body is a flex column, and the auto side margins that centre this also switch
   off the cross-axis stretch a flex item would otherwise get, leaving it to
   shrink to its content. An iframe's intrinsic width is 300px, so the form page
   collapsed to a 300px column without it. Below the breakpoint the block
   reflows to a bar above the column and the top padding grows to clear it —
   see the one media query further down. */
.page {
  width: 100%;
  max-width: 712px;
  margin: 0 auto;
  padding: 48px 36px;
}

/* The home page is one height-capped poster and nothing else, so it centres in
   whatever is left of the viewport rather than hanging off the top. flex: 1 is
   what makes that work in both layouts without calc(): wide, the brand is fixed
   and out of flow, so this fills the body's whole 100vh; narrow, the brand is a
   flex item above it and this takes what's left. It goes back to a plain block
   on a short viewport, where the poster is taller than the box and centring it
   would push its top out of reach above the scroll origin. */
.page--home {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

/* ---- Brand: pinned wordmark + nav ------------------------------------- */

/* RAVE NERDS and the text nav are pinned to the viewport's top-left and sit
   out of flow, so the page's masthead line rides up to the top of the column
   on its own. */
.brand {
  position: fixed;
  top: 20px;
  left: 36px;
  z-index: 10;
}

.brand__title {
  display: block;
  color: #fc9003;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

/* One link per line, under the wordmark. Same caps-mono language as the
   masthead, set small and in body black so it doesn't compete with it. */
.brand__nav {
  margin-top: 12px;
}

.brand__nav a {
  display: block;
  color: #111111;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.brand__nav a:hover,
.brand__nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The page you're on. */
.brand__nav a.is-current {
  color: #fc9003;
}

/* The language link, in the corner opposite the wordmark. The nav's size and
   tracking, but lowercase rather than caps — the one lowercase thing in the
   chrome, which is what keeps it reading as a control and not a nav item. It is
   pinned separately rather than laid out inside .brand, because
   .brand is only as wide as the wordmark — putting it there would park it right
   next to the text instead of out at the page's edge. */
.brand__lang {
  position: fixed;
  top: 20px;
  right: 36px;
  z-index: 10;
  color: #111111;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-decoration: none;
}

.brand__lang:hover,
.brand__lang:focus-visible {
  color: #fc9003;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Page masthead ----------------------------------------------------- */

/* The line that names the page, flush right at the top of the column. No
   layout emits it any more — a page that wants one writes it into its own
   content, either as a Markdown `# Heading` (hence the .copy h1 selector) or
   as literal markup, the way layouts/404.html does. */
.masthead,
.copy h1 {
  margin: 0 0 40px;
  color: #fc9003;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: right;
}

/* ---- Body copy --------------------------------------------------------- */
/* Rendered from the page's Markdown in content/. */

/* 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;
}

/* ---- Event poster (home) ----------------------------------------------- */

/* Bled out to the full page box like the form, so a wide poster lines up with
   the form card's edges. Keep the -36px equal to the .page side padding. */
.poster {
  margin-left: -36px;
  margin-right: -36px;
}

/* Sized to fit on screen without scrolling: as wide as the page box allows,
   but never taller than 84vh. The poster is portrait, so on a desktop window
   the height is what binds — max-height then wins and width: auto narrows the
   image to keep its ratio, with the auto margins re-centring it in the bled-out
   box. On a phone it's the other way round: 100% width is the smaller of the
   two and the cap never comes into play.

   84vh is what's left of a viewport once the column's 48px top and bottom
   padding are gone, at any window from about 600px tall up. The narrow layout
   starts 140px down instead of 48px, so it gets its own smaller number in the
   media query. Neither is calc() — plain literals, as with everything here. */
.poster img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 84vh;
  height: auto;
  margin: 0 auto;
}

/* Shown instead of the image when the page's `poster` param is empty. */
.poster--placeholder {
  margin: 0;
  padding: 24px;
  border: 1px dashed #dcdcdc;
  color: #777777;
}

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

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

/* ---- 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-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;
}

/* ---- Narrow layout ----------------------------------------------------- */

/* Where the brand block stops fitting beside the column. It is 116px wide (the
   wordmark sets that) and pinned 36px in, so the two touch at 1016px wide
   (712px column + 2 x 152px). 1080px leaves a ~32px gutter between them
   instead of letting them kiss.

   Under it the block leaves position: fixed and reflows into the flow above
   the column, which is the whole point: pinned, it is an opaque white bar the
   full width of the page, and anything scrolled under it is hidden for good —
   the top of the embedded form most of all. In flow it scrolls away with
   everything else. The column needs no extra top padding as a result; the
   block takes its own ~112px of height.

   This and the two poster rules below are the file's only media queries, and
   they live at the end so their declarations win over the base rules above
   without needing extra specificity. All three are conditional on the viewport
   by nature, so a single fixed value can't express them. */
@media (max-width: 1080px) {
  /* relative, not static: it stays in the flow either way, but this makes it
     the containing block for the language link below. top/left have to be
     cleared by hand — static ignores the wide layout's offsets, relative
     applies them, and left: 36px would shove the whole block off the right
     edge of the page. */
  .brand {
    position: relative;
    top: auto;
    left: auto;
    padding: 20px 36px 0;
  }

  /* Follows the block into the flow, staying in its top-right corner. */
  .brand__lang {
    position: absolute;
  }

  /* The brand block now spends ~112px of the viewport above the column, so the
     poster's ceiling drops to match. */
  .poster img {
    max-height: 64vh;
  }
}

/* Below 712px the page box is the whole viewport, so the bled-out poster runs
   edge to edge. Pulling the bleed in from -36px to -24px leaves a 12px gutter
   on each side instead — enough to read as deliberate, small enough that the
   poster still dominates. Wider than this the page box is narrower than the
   screen and there's nothing to touch, so the full bleed stands. */
@media (max-width: 712px) {
  .poster {
    margin-left: -24px;
    margin-right: -24px;
  }
}

/* A landscape phone has so little height (~200px left after the nav bar and
   padding) that the vh ceiling shrinks the poster to a stamp and the page
   *still* scrolls. Past this point the cap stops earning its keep, so it comes
   off: the poster goes back to full width and the page just scrolls, which is
   the better trade at that shape. 500px is below any laptop window and above
   any phone held sideways. */
@media (max-height: 500px) {
  .page--home {
    display: block;
    flex: 0 0 auto;
  }

  .poster img {
    max-height: none;
  }
}