:root {
  --ink: #000;
  --paper: #ece9df;
  --join: #a8cf99;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body { margin: 0; }

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--paper);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
}

/*
 * The composition follows the design canvas (1781 x 883). 1cqw is 1% of the stage width,
 * so every measurement below is the design's pixel value / 17.81.
 * Text is written in normal case and set in capitals by CSS. The title's initials are a little
 * larger than its other letters; the lowercase s in "RPGs" stays a small cap, as in the design.
 */
.stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1781px;
  aspect-ratio: 1781 / 883;
  overflow: hidden;
}

.masthead { margin: 0; }

.masthead .title,
.masthead .blurb,
.masthead .join {
  position: absolute;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.masthead .title {
  left: 10.1cqw;
  top: 9.4cqw;
  font-size: 5.4cqw;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.068em;
}


.sc { text-transform: none; font-variant-caps: small-caps; }

/* A thin rule that fades out at both ends. */
.rule {
  position: absolute;
  left: 11.2cqw;
  top: 16.1cqw;
  width: 58cqw;
  height: 2px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--paper) 5%, var(--paper) 95%, transparent);
  opacity: 0.85;
}

.masthead .blurb {
  left: 11.4cqw;
  top: 17cqw;
  font-size: 2.9cqw;
  line-height: 3.31cqw;
  font-weight: 500;
  letter-spacing: 0.062em;
}

/* The one thing to click: pale green so it stands apart from the white text. */
.masthead .join {
  left: 11.4cqw;
  top: 26.8cqw;
  padding: 0;
  border: 0;
  background: none;
  color: var(--join);
  font-family: inherit;
  font-size: 2.9cqw;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.062em;
  cursor: pointer;
}
.masthead .join { transition: opacity 0.6s ease; }
.masthead .join.is-hidden { opacity: 0; pointer-events: none; transition-duration: 1.5s; } /* slow fade out; fade in uses the faster base duration */
.masthead .join:hover { color: #c4e6b5; }
.masthead a.join { text-decoration: none; text-transform: none; font-variant-caps: normal; letter-spacing: 0.04em; }
.masthead .join:focus-visible { outline: 1px solid var(--join); outline-offset: 6px; }

/* Muted line under the button for errors only. */
.masthead .join-note {
  position: absolute;
  left: 11.4cqw;
  top: 31cqw;
  margin: 0;
  font-size: 1.6cqw;
  color: #9a978d;
  letter-spacing: 0.04em;
}

/* Spam checks run in the background; keep them out of the layout (but not display:none). */
.checks { position: static; }
/* Cloudflare widget: shown on its own, left of the raven, until the check is passed. */
.turnstile-box { position: absolute; left: 11.4cqw; top: 50%; transform: translateY(-50%); }
.stage:not(.gated) .turnstile-box { display: none; }

/* While gated only the raven and the widget are visible; the page text fades in once it is passed. */
.masthead { transition: opacity 0.8s ease; }
.stage.gated .masthead { opacity: 0; visibility: hidden; transition: none; }
.checks altcha-widget { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Invisible box over the title; fairy-sparkles scatters its sparkles across it. */
.masthead .sparkle-field {
  position: absolute;
  left: 9cqw;
  top: 8cqw;
  width: 56cqw;
  height: 9.5cqw;
  pointer-events: none;
}

/* The artwork is a silhouette PNG (solid bird, transparent outside), so it sits cleanly on the black page. */
.raven {
  position: absolute;
  left: 56.2%;
  top: 0;
  width: 43.7%;
  height: auto;
  user-select: none;
}

@media (max-width: 640px) {
  .stage { aspect-ratio: auto; padding: 12vw 6vw 0; display: flex; flex-direction: column; }
  .masthead { position: relative; width: 100%; }
  .masthead .title, .masthead .blurb, .masthead .join { position: static; white-space: normal; }
  .masthead .title { font-size: 9cqw; }
  .rule { position: static; width: 100%; margin: 4cqw 0 0; }
  .masthead .blurb { font-size: 5.5cqw; line-height: 6.5cqw; margin-top: 3cqw; }
  .masthead .blurb br { display: none; }
  .masthead .join { display: block; margin-top: 6cqw; font-size: 5.5cqw; }
  .masthead .join-note { position: static; font-size: 3.6cqw; margin-top: 3cqw; }
  .turnstile-box { position: static; transform: none; margin-top: 6vw; }
  .stage.gated .masthead { max-height: 0; overflow: hidden; }
  .masthead .sparkle-field { left: -3%; top: -4%; width: 106%; height: 30%; }
  .raven { position: static; width: 85%; margin: 6vw 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead .sparkle-field { display: none; }
  .masthead .join { transition: none; }
  .masthead { transition: none; }
}