/* Modern baseline + mobile fit-to-width scaler for Abobo's Big Adventure.
   The original site is a pixel-perfect, absolutely-positioned ~980px design.
   Rather than reflow (which would destroy the whimsy), we keep the exact layout
   and simply scale the whole "stage" down on narrow screens so it fits any
   device. Desktop (>= 980px wide) renders the original design untouched. */

/* The original pages render in quirks mode (no doctype), so the legacy table
   layout keeps its native box model. */
.contact-form, .contact-form * {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Full-width clipping frame. Its height is set by the scaler so there is no
   large blank gap below the shrunken stage. */
#abobo-viewport {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

/* The fixed-width design canvas. Centered horizontally; the scaler applies a
   transform on narrow screens. Keeping a fixed 980px width means every
   absolutely-positioned decoration stays in its original relative position. */
#abobo-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 980px;
  margin-left: -490px;
  transform-origin: top center;
}

/* Images inside the stage keep their intrinsic pixel sizes (the layout depends
   on them); scaling is handled by the stage transform, not per-image. */
#abobo-stage img {
  max-width: none;
}

.contact-main .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form {
  width: 360px;
  max-width: 100%;
  padding: 16px;
  border: 3px solid #111;
  background: #fff;
  color: #111;
  font-size: 14px;
}

.contact-form label:not(.contact-honeypot) {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
}

.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 8px;
  border: 2px solid #555;
  border-radius: 0;
  background: #fff;
  color: #111;
  font: inherit;
}

.contact-form textarea {
  min-height: 135px;
  resize: vertical;
}

.contact-form button {
  padding: 8px 16px;
  border: 3px solid #111;
  border-radius: 0;
  background: #f79a21;
  color: #111;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-form button:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid #2239e5;
  outline-offset: 2px;
}

.contact-form .contact-note {
  margin: 10px 0 0;
  font-size: 12px;
}

.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}