/* ==========================================================================
   The webcam page

   Only what the page adds around the cameras. The cameras themselves are
   styled by cams.css, which loads site-wide -- nothing is repeated here.
   ========================================================================== */

.webcam-page {
  --wc-purple: #7f3f98;
  --wc-ink:    #2b2530;
  --wc-soft:   #6d6577;
  --wc-line:   #e7e2ec;

  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--wc-ink);
}

/* ----------------------------------------------------------------- head -- */

.webcam-intro { max-width: 62ch; margin: 0 auto 22px; text-align: center; }

.webcam-intro h1 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: .9;
  color: var(--wc-purple);
  padding: 0;                      /* custom.min.css puts 1.2em on section h1 */
}

.webcam-intro p {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--wc-soft);
}

/* ----------------------------------------------------------------- more -- */

.webcam-more {
  max-width: 1100px;
  margin: 34px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--wc-line);
}

.webcam-more h2 {
  margin: 0 0 12px;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--wc-purple);
}

.webcam-more ul { margin: 0; padding: 0; list-style: none; }

.webcam-more li {
  padding: 9px 0;
  border-bottom: 1px solid var(--wc-line);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--wc-soft);
}
.webcam-more li:last-child { border-bottom: 0; }

.webcam-more a { color: var(--wc-purple); font-weight: 700; }
.webcam-more a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .webcam-intro { text-align: left; }
}