:root {
  --paper: #f3ebda;
  --rule: rgba(70, 120, 190, 0.17);
  --margin: rgba(215, 60, 60, 0.4);
  --ink: #1c1a22;
  --dim: #4a4450;
  --blue: #1f5fc8;
  --red: #d23a2a;
  --hi: rgba(255, 226, 60, 0.6);
  --heavy: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif;
  --hand: "Bradley Hand", "Noteworthy", "Segoe Print", "Comic Sans MS", cursive;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(
      90deg,
      transparent 47px,
      var(--margin) 47px,
      var(--margin) 49px,
      transparent 49px
    ),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px);
  font:
    19px/1.6 Georgia,
    "Iowan Old Style",
    "Times New Roman",
    serif;
}
a {
  color: var(--blue);
}
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 10px 64px;
  background: rgba(243, 235, 218, 0.94);
  border-bottom: 2px solid var(--ink);
}
.brand {
  font: 900 18px var(--heavy);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.brand s {
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
}
.hl {
  color: var(--blue);
  background: linear-gradient(
    transparent 45%,
    var(--hi) 45%,
    var(--hi) 92%,
    transparent 92%
  );
  padding: 0 0.08em;
}
.top-cta {
  font: 700 16px var(--hand);
  color: #fff;
  background: var(--blue);
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
}
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 0 72px;
}
section {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 24px;
}
.hero {
  max-width: 1120px;
  text-align: center;
  padding-top: 28px;
}
.kicker {
  font: 17px var(--hand);
  color: var(--dim);
  margin: 0 0 6px;
}
h1 {
  font: 900 clamp(38px, 6.4vw, 76px) / 1.05 var(--heavy);
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.sub {
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: 20px;
}
.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  margin: 0 auto;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 6px 6px 0 rgba(28, 26, 34, 0.18);
}
.frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.under {
  max-width: 760px;
  margin: 14px auto 6px;
  color: var(--dim);
  font-size: 17px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  align-items: center;
}
.btn {
  display: inline-block;
  font: 700 21px var(--hand);
  color: #fff;
  background: var(--blue);
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn.ghost {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: none;
}
.note {
  font: 16px var(--hand);
  color: var(--dim);
}
h2 {
  font: 900 30px/1.15 var(--heavy);
  margin: 0 0 14px;
}
ul.xf {
  list-style: none;
  padding: 0;
}
ul.xf li {
  margin: 0 0 10px;
  padding-left: 1.4em;
  position: relative;
}
ul.xf li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--red);
}
ul.xf b,
ul.xf em {
  font: 900 0.95em var(--heavy);
  font-style: normal;
}
ul.xf em {
  color: var(--blue);
}
figure {
  margin: 22px 0;
}
figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 4px;
}
figcaption {
  font: 16px/1.4 var(--hand);
  color: var(--dim);
  margin-top: 6px;
}
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pair figure {
  margin: 8px 0;
}
.big {
  font: 900 34px/1.2 var(--heavy);
  color: var(--red);
  text-align: center;
  margin: 18px 0;
  letter-spacing: 0.04em;
}
.big.small {
  font: 700 25px/1.3 var(--hand);
  color: var(--ink);
  letter-spacing: 0;
}
dt {
  font: 900 19px var(--heavy);
  margin-top: 18px;
}
dd {
  margin: 4px 0 0;
}
.close {
  text-align: center;
  padding-bottom: 40px;
}
.close .big {
  color: var(--ink);
}
.fine {
  font-size: 15px;
  color: var(--dim);
}
footer {
  text-align: center;
  font-size: 14px;
  color: var(--dim);
  padding: 20px 24px 40px 64px;
}
.touch-only {
  display: none;
}
.touch .touch-only {
  display: inline;
}
.touch .desk-only {
  display: none;
}
@media (max-width: 700px) {
  body {
    font-size: 18px;
    background-image:
      linear-gradient(
        90deg,
        transparent 15px,
        var(--margin) 15px,
        var(--margin) 17px,
        transparent 17px
      ),
      repeating-linear-gradient(
        180deg,
        transparent 0 31px,
        var(--rule) 31px 32px
      );
  }
  .top {
    padding: 8px 12px 8px 26px;
  }
  .brand {
    font-size: 15px;
  }
  main {
    padding: 0 18px 0 30px;
  }
  .frame {
    aspect-ratio: auto;
    height: min(58vh, 520px);
    max-height: none;
  }
  .pair {
    grid-template-columns: 1fr;
  }
  h2 {
    font-size: 25px;
  }
  .big {
    font-size: 26px;
  }
  footer {
    padding-left: 30px;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  .frame {
    /* the board letterboxes to a strip in portrait; give the thumb room to drag under it */
    height: min(56vh, 480px);
  }
}