:root{
  --board:#edece8;
  --board-edge:#e3e2dd;
  --marker:#17181a;
  --pencil:#6a6d71;
  --nickel:#a9aeb2;
  --rec:#c0392b;
  --caps: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --read: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --util: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--board);
  color:var(--marker);
  font-family:var(--read);
  font-size:17px;
  line-height:1.65;
}

a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,
.board:focus-visible{outline:2px solid var(--rec);outline-offset:3px}

.wrap{max-width:47rem;margin:0 auto;padding:0 1.5rem}

/* ---------- masthead ---------- */

.mast{padding:5rem 0 2.5rem}

.dot{
  display:inline-block;width:.42rem;height:.42rem;
  border-radius:50%;background:var(--rec);
  vertical-align:.5rem;margin-right:.7rem;
}

.mast h1{
  font-family:var(--caps);
  font-weight:600;
  font-size:clamp(2.1rem,7vw,3.4rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
  line-height:1;
}

.mast .sub{
  font-family:var(--util);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pencil);
  margin:1.4rem 0 0;
}

.logline{
  font-size:1.22rem;
  line-height:1.5;
  margin:2.2rem 0 0;
  max-width:34rem;
}

/* ---------- the board ---------- */

.board-frame{
  margin:3.5rem 0 0;
  border-top:1px solid var(--nickel);
  border-bottom:1px solid var(--nickel);
  background:var(--board-edge);
}

.board{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.board::-webkit-scrollbar{display:none}

.board-inner{
  position:relative;
  width:max(1720px,calc(100vw + 400px));
  padding:2.6rem 2rem 2.8rem;
  font-family:var(--caps);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.78rem;
  line-height:2;
  color:var(--marker);
}

.b-date{
  font-size:1.05rem;
  letter-spacing:.22em;
  border-bottom:1px solid var(--marker);
  display:inline-block;
  padding-bottom:.35rem;
  margin-bottom:2.2rem;
}

.b-cols{display:flex;gap:5rem;align-items:flex-start}

.b-head{
  font-size:.68rem;
  letter-spacing:.2em;
  color:var(--pencil);
  margin-bottom:.9rem;
}

.b-list{list-style:none;margin:0;padding:0}
.b-list li{white-space:nowrap}
.b-list .tick{color:var(--pencil);margin-left:.6rem}
.b-list .untick{color:transparent;opacity:0;margin-left:.6rem}

.b-note{
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--pencil);
  margin-top:.9rem;
  text-transform:none;
}

.b-game{white-space:nowrap}
.b-hand{margin-bottom:.2rem}
.b-tally{letter-spacing:.3em}
.b-ask{
  margin-top:1.4rem;
  font-size:.9rem;
  letter-spacing:.16em;
}

.b-margin{
  position:absolute;
  right:2rem;
  top:2.6rem;
  width:15rem;
  font-size:.66rem;
  letter-spacing:.06em;
  line-height:1.7;
  text-transform:none;
  color:var(--marker);
}

/* ---------- sections ---------- */

section{padding:4.5rem 0 0}

h2{
  font-family:var(--util);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pencil);
  margin:0 0 1.6rem;
}

.rules{margin:0;padding:0;list-style:none;max-width:38rem}
.rules li{
  padding:.85rem 0;
  border-top:1px solid rgba(23,24,26,.13);
}
.rules li:last-child{border-bottom:1px solid rgba(23,24,26,.13)}

blockquote{
  margin:0;
  max-width:34rem;
  font-size:1.05rem;
}
blockquote .cue{
  font-family:var(--caps);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.7rem;
  color:var(--pencil);
  display:block;
  margin-top:1.1rem;
}
blockquote .cue:first-child{margin-top:0}
blockquote p{margin:.15rem 0 0}
blockquote cite{
  display:block;
  font-family:var(--util);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pencil);
  margin-top:1.6rem;
}

.facts{
  width:100%;
  border-collapse:collapse;
  max-width:38rem;
  font-size:.95rem;
}
.facts th,
.facts td{
  text-align:left;
  padding:.8rem 0;
  border-top:1px solid rgba(23,24,26,.13);
  vertical-align:top;
}
.facts th{
  font-family:var(--util);
  font-weight:400;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pencil);
  width:12rem;
  padding-right:1.5rem;
}
.facts tr:last-child th,
.facts tr:last-child td{border-bottom:1px solid rgba(23,24,26,.13)}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem;
  align-items:baseline;
  margin-top:.4rem;
}
.actions a{
  font-family:var(--caps);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
  text-decoration:none;
  border-bottom:1px solid var(--marker);
  padding-bottom:.25rem;
}
.actions a.quiet{
  border-bottom-color:var(--nickel);
  color:var(--pencil);
}

footer{
  padding:5rem 0 6rem;
  font-family:var(--util);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pencil);
}
footer p{margin:.4rem 0}

/* ---------- script page ---------- */

.script-top{
  padding:3rem 0 2rem;
  border-bottom:1px solid var(--nickel);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  flex-wrap:wrap;
}
.script-top .back{
  font-family:var(--util);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--pencil);
}
.script-top h1{
  font-family:var(--caps);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:1rem;
  font-weight:600;
  margin:0;
}

.pages{max-width:40rem;margin:0 auto;padding:0 1.5rem 8rem}
.pages h1{display:none}
.pages h2{
  font-family:var(--caps);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--marker);
  margin:4.5rem 0 1.8rem;
}
.pages hr{
  border:0;
  border-top:1px solid rgba(23,24,26,.13);
  margin:3rem 0;
}
.pages p{margin:0 0 1rem}
.pages .slug{
  font-family:var(--util);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pencil);
  margin:2rem 0 .9rem;
}
.pages .cue{
  font-family:var(--caps);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:1.2rem 0 .1rem;
}
.pages .paren{
  font-family:var(--caps);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--pencil);
  margin:0 0 .1rem;
}
.pages .dlg{margin:0 0 .2rem;padding-left:1.5rem}
.pages .screen{
  font-family:var(--util);
  font-size:.85rem;
  line-height:1.8;
  background:var(--board-edge);
  border-left:2px solid var(--nickel);
  padding:.9rem 1.1rem;
  margin:0 0 1rem;
  white-space:pre-wrap;
}
.pages .beat{
  font-family:var(--util);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nickel);
  margin:0 0 .9rem;
}

@media (max-width:640px){
  body{font-size:16px}
  .mast{padding:3.5rem 0 2rem}
  .b-cols{gap:3rem}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}