/* Retro pages: the part that is the same under every costume.

   Three things live here and nothing else does. The skip link, because a page
   pretending to be 2005 still has to be usable by somebody who is not looking
   at it. The honeypot, because it must be invisible in every era. And the exit
   strip at the bottom, which is deliberately the one band on these pages that
   is not in costume: the joke ends, the company says who it is, and the phone
   number is in plain type.

   Everything else belongs to an era's own sheet. Nothing in here sets a font,
   a color, or a layout that a theme would then have to fight. */

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

html, body { margin: 0; padding: 0; }

img { max-width: 100%; }

/* Off screen until it has focus, which is the whole contract of a skip link:
   invisible to somebody who does not need it, first in line for somebody who
   does. */
.rt-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 18px;
  background: #1E2024;
  color: #fff;
  font: 500 15px/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  text-decoration: underline;
}
.rt-skip:focus { left: 0; }

/* The field no human sees. Positioned off screen rather than hidden with
   display:none, because a bot that reads CSS skips a field it can tell is
   hidden and fills one it cannot. */
.rt-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The costume comes off here, on purpose. A visitor who scrolled to the bottom
   of a joke should find the actual company at the end of it, in the actual
   typeface, saying plainly what this was. */
.rt-exit {
  background: #1E2024;
  color: #cfd2d6;
  padding: 40px 24px;
  font: 400 15px/1.65 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.rt-exit p { max-width: 66ch; margin: 0 auto; }
.rt-exit p + p { margin-top: 18px; }
.rt-exit a {
  color: #E87722;
  font-weight: 600;
  margin-right: 22px;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 119, 34, .45);
}
.rt-exit a:hover, .rt-exit a:focus { border-bottom-color: #E87722; }

/* <samp> marks machine output, and lib/lint.php skips it (see visible_text()).
   It is used for meaning rather than for appearance, so it inherits: a browser
   would otherwise drop it into its own monospace face and put a stray typeface
   into whichever era is quoting a machine. Each theme styles it if it wants
   to. */
samp { font: inherit; }

/* The Turnstile widget is a fixed 312px iframe. It does not reflow and it does
   not shrink, so wherever the box holding the form is narrower than that, the
   captcha hangs over the edge of the frame it is supposed to be inside.

   This is a container query rather than a media query on purpose. The first
   place it went wrong was the MySpace profile column at full desktop width, so
   viewport width is simply the wrong question: what matters is how much room
   the box around the form actually has. A container query asks that directly,
   and it keeps working if an era's column is ever made narrower.

   `.field` is the wrapper turnstile_field() emits in lib/ui.php, and on these
   pages it is the only thing wearing that class: every era names its own fields
   .ms-field, .xp-field or .lo-field. Scoped to html.rt so nothing here can
   reach the rest of the site.

   The negative margin takes back what the transform does not: scaling leaves
   the layout box at its original height, and without it the widget sits above
   eleven pixels of nothing. */
html.rt .field { container-type: inline-size; }

/* 311 and not a round number: the widget renders 312px wide, and a threshold at
   or above that scales it when it already fits. That is what 320 did on the
   MySpace card, where the field is exactly 312 and the widget came out at 262
   for no reason, visibly narrower than the inputs above it. The rule now fires
   only when the box really is too small to hold the thing. */
@container (max-width: 311px) {
  .cf-turnstile {
    transform: scale(.84);
    transform-origin: left top;
    margin-bottom: -11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}