/* Rules, Terms and Privacy pages. The same comic kit as styles.css (ink outline, hard shadow, Bangers over
   Patrick Hand), copied down to the few pieces these pages use, so they do not load the whole site stylesheet.
   Long-form first: 20px body text on phones, 22px on desktop, about 70 characters a line, ink on paper. */

@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bangers-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/patrick-hand-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'W1T Display Fallback'; src: local('Impact'), local('Arial Narrow Bold'), local('Helvetica Neue Condensed Bold'); size-adjust: 88%; }
@font-face { font-family: 'W1T Body Fallback'; src: local('Chalkboard'), local('Marker Felt'), local('Segoe Print'), local('Trebuchet MS'); size-adjust: 92%; }

:root {
  --ink: #141008;
  --paper: #fff6dc;
  --paper-d: #efd9a4;
  --yel: #ffe12b;
  --yel-d: #e3a900;
  --pur: #8e2d9e;
  --pur-d: #5a1769;
  --sky: #58bdff;
  --grass: #62d45f;
  --grass-d: #2f9f3c;
  --dirt: #b9782e;
  --wood-d: #8a5a24;
  --line: 4px;
  --f-display: 'Bangers', 'W1T Display Fallback', Impact, 'Arial Narrow Bold', sans-serif;
  --f-body: 'Patrick Hand', 'W1T Body Fallback', 'Chalkboard', 'Segoe Print', cursive;
  --svg-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 640'%3E%3Cg fill='%23fff' stroke='%23141008' stroke-linejoin='round'%3E%3Cpath transform='translate(30 60) scale(3.4)' stroke-width='1.2' d='M18 50c-10 0-14-14-2-18 0-16 24-20 30-6 8-10 26-6 24 8 10 0 12 16 0 16z'/%3E%3Cpath transform='translate(236 270) scale(3)' stroke-width='1.4' d='M160 56c-8 0-10-10-1-13 2-12 20-14 24-4 6-6 18-3 16 6 8 0 9 11 0 11z'/%3E%3Cpath transform='translate(520 -20) scale(2.2)' stroke-width='1.8' d='M18 50c-10 0-14-14-2-18 0-16 24-20 30-6 8-10 26-6 24 8 10 0 12 16 0 16z'/%3E%3C/g%3E%3C/svg%3E");
  --svg-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='%23c98a3f'/%3E%3Cpath d='M0 0h160v8H0zM0 80h160v8H0z' fill='%238a5a24'/%3E%3Cpath d='M0 8h160v4H0zM0 88h160v4H0z' fill='%23e9b56b'/%3E%3Cpath d='M10 30c40 4 80-6 140 2M14 54c50-4 90 4 136-2M10 110c40 4 80-6 140 2M14 134c50-4 90 4 136-2' fill='none' stroke='%238a5a24' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  :root { --line: 3px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ink); overflow-x: clip; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  overflow-x: clip;
  background: var(--svg-sky) 0 0 / 1000px 640px, var(--sky);
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; }
[hidden] { display: none !important; }

.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--ink);
  color: #fff;
  font: 16px/1 var(--f-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 3px solid #fff;
  border-radius: 10px;
  text-decoration: none;
}
.skip:focus { transform: none; }

:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #fff;
}

/* ---------- the strip above the paper: the way back, and the other pages ---------- */

.bar {
  width: min(100% - 32px, 680px);
  margin: 22px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
}

.btn {
  display: inline-block;
  font: 22px/1 var(--f-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yel);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  padding: 12px 18px 10px;
  box-shadow: 4px 4px 0 var(--ink), inset 0 -4px 0 var(--yel-d);
  text-decoration: none;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink), inset 0 -4px 0 var(--yel-d); }

.pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font: 20px/1 var(--f-display);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pages a, .pages span {
  display: inline-block;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 8px 12px 6px;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
}
.pages a:hover { background: var(--yel); }
.pages span { background: var(--ink); color: var(--paper); box-shadow: none; }

/* ---------- the paper ---------- */

.paper {
  width: min(100% - 32px, 680px);
  margin: 26px auto 56px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--ink);
}

.paper__head {
  padding: 22px 28px 18px;
  background: var(--svg-wood) 0 0 / 120px 120px;
  border-bottom: var(--line) solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--yel-d);
}

h1 {
  font: 52px/.98 var(--f-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0  2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 4px 4px 0 var(--pur);
}

.paper__body { padding: 22px 28px 34px; }

.meta { font: 18px/1.3 var(--f-body); color: var(--pur-d); }

/* a placeholder the owner must fill, or a banner the lawyer's review removes: impossible to miss */
[data-todo] {
  background: var(--yel);
  color: var(--ink);
  outline: 2px dashed var(--ink);
  outline-offset: 1px;
  border-radius: 3px;
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
p.draft[data-todo] {
  margin: 14px 0 6px;
  padding: 10px 14px 8px;
  outline-offset: 2px;
  font: 22px/1.2 var(--f-display);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.todo__note { font-size: 17px; }

/* ---------- long-form text ---------- */

.paper__body > * + * { margin-top: 14px; }

h2 {
  margin-top: 34px !important;
  padding-bottom: 6px;
  font: 36px/1.05 var(--f-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pur);
  border-bottom: 3px dotted var(--wood-d);
  text-wrap: balance;
}
h3 {
  margin-top: 22px !important;
  font: 26px/1.1 var(--f-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pur-d);
}
h2 + *, h3 + * { margin-top: 10px !important; }

.lede { line-height: 1.4; }

.paper__body p, .paper__body li, .paper__body dd { overflow-wrap: break-word; }

.paper__body ul, .paper__body ol { display: grid; gap: 10px; }
.paper__body li { position: relative; padding-left: 24px; }
.paper__body li::before {
  content: '';
  position: absolute;
  left: 2px; top: .56em;
  width: 6px; height: 6px;
  background: var(--yel);
  border: 3px solid var(--ink);
  border-radius: 2px;
  transform: rotate(45deg);
  box-sizing: content-box;
}

a { color: var(--pur-d); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); background: var(--yel); }

strong, b { font-weight: 400; text-decoration: underline; text-decoration-color: var(--yel-d); text-decoration-thickness: 4px; text-underline-offset: -1px; text-decoration-skip-ink: none; }
code { font: 18px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: var(--paper-d); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }

.note {
  padding: 12px 16px 10px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--ink);
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 3px solid var(--ink);
  background: #fff;
  font-size: 19px;
  line-height: 1.3;
}
caption { text-align: left; padding: 0 0 6px; font: 22px/1.1 var(--f-display); letter-spacing: 1px; text-transform: uppercase; color: var(--pur-d); caption-side: top; }
th, td { padding: 8px 12px 6px; text-align: left; vertical-align: top; border-bottom: 2px dotted var(--wood-d); }
tr:last-child > * { border-bottom: 0; }
thead th { font: 20px/1.1 var(--f-display); letter-spacing: 1px; text-transform: uppercase; background: var(--ink); color: var(--paper); border-bottom: 0; }
.bonus td:last-child, .bonus th:last-child { text-align: right; white-space: nowrap; }

/* ---------- the ground: where the page ends ---------- */

.ground {
  margin-top: auto;
  padding: 40px 20px 26px;
  text-align: center;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  background: linear-gradient(var(--ink) 0 4px, var(--grass) 4px 14px, var(--grass-d) 14px 18px, var(--ink) 18px 20px, var(--dirt) 20px);
}
.ground p { max-width: 640px; margin: 0 auto 8px; }
.ground a { color: var(--ink); }
.ground a:hover { background: var(--yel); }

@media (max-width: 760px) {
  body { font-size: 20px; background-size: 800px 512px, auto; }
  .bar { margin-top: 16px; }
  .btn { font-size: 20px; }
  .paper { margin: 20px auto 40px; box-shadow: 6px 6px 0 var(--ink); }
  .paper__head { padding: 16px 16px 14px; }
  .paper__body { padding: 16px 16px 28px; }
  h1 { font-size: 38px; }
  h2 { font-size: 30px; margin-top: 28px !important; }
  h3 { font-size: 24px; }
  .lede { font-size: 22px; }
  table { font-size: 18px; }
  th, td { padding: 7px 8px 5px; }
}

@media (min-width: 761px) {
  body { font-size: 22px; }
  .lede { font-size: 25px; }
}

@media print {
  body { background: #fff; }
  .bar, .skip { display: none; }
  .paper { box-shadow: none; margin: 0 auto; }
}