/* Rules of Play: a printed rule sheet laid on the dark site. "Ink on Moon" is a
   brand colorway (After Dark guide, Colorways); the flat badge is the print mark. */

.desk {
  padding: clamp(24px, 5vw, 64px) 0 clamp(56px, 8vw, 96px);
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(167, 139, 250, 0.12), transparent 70%);
}

.sheet {
  --paper: var(--mc-moon);
  --paper-2: #EAE3D3;
  --ink: var(--mc-city-ink);
  --ink-soft: #3B3F52;
  --rule: rgba(11, 13, 23, 0.18);
  position: relative;
  width: min(1040px, 100% - 32px);
  margin-inline: auto;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 80px) clamp(36px, 6vw, 64px);
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(244, 239, 228, 0.08);
  font-size: 17px;
  line-height: 1.65;
}
/* the printed double rule inside the trim */
.sheet::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid var(--rule); outline: 3px solid var(--paper); outline-offset: -5px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--rule);
  border-radius: 3px;
}
.sheet a { color: var(--ink); text-decoration-color: rgba(11, 13, 23, 0.4); text-underline-offset: 2px; }
.sheet a:hover { text-decoration-color: var(--ink); }
.sheet :focus-visible { outline-color: var(--ink); }
.sheet p + p, .sheet p + ul, .sheet ul + p, .sheet p + ol, .sheet ol + p, .sheet table + p, .sheet dl + p { margin-top: 14px; }
.sheet ul, .sheet ol { margin: 14px 0 0; padding-left: 1.3em; }
.sheet li + li { margin-top: 6px; }
.sheet b { font-weight: 700; }
.sheet .small { font-size: 14px; color: var(--ink-soft); }

/* ---------- Cover ---------- */
.cover { text-align: center; padding-bottom: 36px; border-bottom: 3px double var(--ink); }
/* flat badge: 96 pt minimum; the margin holds the 0.15H clear space */
.cover-badge { width: clamp(120px, 20vw, 180px); margin: 0 auto 24px; }
.cover-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(48px, 9vw, 96px); line-height: 0.95; letter-spacing: 0.01em;
}
.cover-line { margin-top: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 15px; }
.cover-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 32px auto 0; max-width: 760px;
  border: 1.5px solid var(--ink); border-radius: 4px;
}
.cover-facts div { padding: 12px 10px; }
.cover-facts div + div { border-left: 1.5px solid var(--ink); }
.cover-facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.cover-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; line-height: 1.35; }
@media (max-width: 640px) {
  .cover-facts { grid-template-columns: 1fr 1fr; }
  .cover-facts div:nth-child(3) { border-left: 0; }
  .cover-facts div:nth-child(n+3) { border-top: 1.5px solid var(--ink); }
}

/* ---------- Contents ---------- */
.contents { padding: 32px 0 36px; border-bottom: 1px solid var(--rule); }
.contents h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.contents ol { columns: 2; column-gap: 48px; margin-top: 14px; padding-left: 1.6em; }
.contents li { break-inside: avoid; margin: 0 0 6px; }
.contents li::marker { font-family: var(--display); }
.contents a { text-decoration: none; font-weight: 600; }
.contents a:hover { text-decoration: underline; }
@media (max-width: 640px) { .contents ol { columns: 1; } }

/* ---------- Sections ---------- */
.rule { padding: 44px 0 8px; scroll-margin-top: 80px; }
.rule + .rule { border-top: 1px solid var(--rule); }
.rule::after { content: ""; display: table; clear: both; }
.rule h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.05; margin-bottom: 18px;
}
.rule h2 .num {
  flex: none; display: inline-grid; place-items: center;
  width: 1.25em; height: 1.25em; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 0.62em; line-height: 1;
}
.rule h3 {
  clear: both; margin: 30px 0 8px; font-size: 19px; font-weight: 700;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.rule h3 .count { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* numbered steps with the brand's display numerals */
.steps { list-style: none; padding-left: 0 !important; counter-reset: step; }
.steps li { position: relative; padding-left: 40px; counter-increment: step; }
.steps li + li { margin-top: 10px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.1em;
  width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: 14px; line-height: 1;
}

/* ---------- Boxes ---------- */
.note, .example {
  margin: 22px 0 6px; padding: 16px 20px; border-radius: 4px;
}
.note { background: var(--ink); color: var(--paper); }
.note a { color: var(--paper); }
.note-head, .example-head { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; }
.note-head { color: var(--mc-city-gold); }
.example { border: 1.5px dashed var(--ink); background: var(--paper-2); }
.example-head { color: var(--ink-soft); }

/* ---------- Lists of parts ---------- */
.parts { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.parts div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.parts dt { font-weight: 700; }
.parts dd { margin: 2px 0 0; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 720px) { .parts { grid-template-columns: 1fr; } }

.corners { margin: 8px 0 0; }
.corners div { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.corners dt { font-weight: 700; }
.corners dd { margin: 0; }
@media (max-width: 560px) { .corners div { grid-template-columns: 1fr; gap: 2px; } }

.unlocks li::marker, .rule ul li::marker { color: var(--ink-soft); }

/* ---------- Figures ---------- */
.fig { margin: 22px 0 10px; }
.fig img { width: 100%; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--ink); }
.fig figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.fig figcaption b { color: var(--ink); }
.fig-right { float: right; width: min(46%, 400px); margin: 6px 0 18px 32px; }
.fig-phone { width: min(34%, 260px); }
.fig-narrow { width: min(36%, 300px); }
@media (max-width: 720px) {
  .fig-right { float: none; width: 100%; margin: 20px 0 14px; }
  .fig-phone, .fig-narrow { width: min(78%, 300px); margin-inline: auto; }
}

/* ---------- The board ---------- */
.board-fig { clear: both; }
.board {
  display: grid; grid-template: repeat(11, 1fr) / repeat(11, 1fr);
  width: min(100%, 720px); aspect-ratio: 1; margin: 0 auto;
  background: var(--ink); border: 2px solid var(--ink); border-radius: 6px; overflow: hidden;
  gap: 1px;
}
.board > img { width: 100%; height: 100%; border: 0; border-radius: 0; display: block; }
.board-center {
  grid-area: 2 / 2 / 11 / 11; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--paper-2); text-align: center;
}
.board-center img { width: 34%; max-width: 200px; border: 0; background: none; }
.board-center p { font-family: var(--display); text-transform: uppercase; font-size: clamp(12px, 2.2vw, 20px); line-height: 1.15; letter-spacing: 0.04em; }
.board-fig figcaption { text-align: center; }

/* ---------- Tables ---------- */
.sheet table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 16px; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); }
.sheet thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink); }
.odds td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.odds { max-width: 560px; }
.recipes th[scope="row"] { font-weight: 700; white-space: nowrap; }
.ref th { width: 34%; font-weight: 700; }
@media (max-width: 640px) {
  .recipes thead { display: none; }
  .recipes tr { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .recipes th, .recipes td { border: 0; padding: 2px 0; }
  .recipes td:nth-of-type(1) { grid-column: 1 / -1; }
  .recipes td:nth-of-type(3) { text-align: right; font-weight: 700; }
  .ref th { width: 42%; }
}

/* ---------- Foot of the sheet ---------- */
.sheet-foot { clear: both; margin-top: 44px; padding-top: 36px; border-top: 3px double var(--ink); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sheet-foot img { width: 150px; }
.sheet-foot p { font-family: var(--display); text-transform: uppercase; font-size: 32px; line-height: 1; }
.btn-ink { background: var(--ink); color: var(--paper) !important; text-decoration: none; }
.btn-ink:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(11, 13, 23, 0.6); }

/* ---------- Print: the sheet, and only the sheet ---------- */
@media print {
  body { background: #fff; }
  .site-header, .site-footer, .skip, .sheet-foot .btn { display: none !important; }
  .desk { padding: 0; background: none; }
  .sheet { width: 100%; box-shadow: none; padding: 0; background: #fff; font-size: 11pt; }
  .sheet::before { display: none; }
  .rule { break-inside: auto; }
  .fig, .note, .example, .board, table { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { .btn-ink:hover { transform: none; } }