/*
  LPS Checklist website: one stylesheet for every page. No build step.

  Palette: warm cream "toy shop" paper, soft pink and raspberry, with the
  app icon's aqua and sky blue as the second family. Every text colour
  here passes WCAG AA against every background it sits on, in both
  schemes (checked 2026-09-12: body ink 14:1 or better, soft ink 6.4:1,
  links 5.4:1 light / 7.8:1 dark, white on the raspberry button 6.3:1).

  Fonts: Fredoka (display, headings only) and Atkinson Hyperlegible
  (everything else), loaded from Google Fonts in each page's <head>.

  The CSP forbids inline styles and scripts, so nothing on the site uses a
  style attribute or a <style> element: everything lives here.
*/

:root {
  color-scheme: light dark;

  --bg: #FFF7F4;
  --bg-pink: #FDEAF1;
  --bg-aqua: #E3F5F6;
  --bg-lilac: #F2ECFB;
  --surface: #FFFFFF;
  --line: #EFD8E1;

  --ink: #2B1D26;
  --ink-soft: #654F5C;
  --accent: #B3265E;
  --accent-hover: #8F1C4A;
  --on-accent: #FFFFFF;

  --dot: rgba(79, 167, 227, 0.2);
  --trail: #EFB3C8;

  --shadow: 0 1px 2px rgba(43, 29, 38, 0.05), 0 12px 32px -14px rgba(43, 29, 38, 0.2);
  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 72rem;
  --measure: 44rem;

  --font-body: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fredoka", "Atkinson Hyperlegible", ui-rounded, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A paw print, used as a CSS mask so it takes whatever colour it is given. */
  --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 30c-9 0-17 8-19 15-2 7 3 12 9 11 4-1 6-3 10-3s6 2 10 3c6 1 11-4 9-11-2-7-10-15-19-15z'/%3E%3Cellipse cx='13' cy='27' rx='6.5' ry='8.5' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='15' rx='6.5' ry='8.5' transform='rotate(-8 25 15)'/%3E%3Cellipse cx='39' cy='15' rx='6.5' ry='8.5' transform='rotate(8 39 15)'/%3E%3Cellipse cx='51' cy='27' rx='6.5' ry='8.5' transform='rotate(22 51 27)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1218;
    --bg-pink: #2A1A23;
    --bg-aqua: #14252A;
    --bg-lilac: #211A2E;
    --surface: #241A21;
    --line: #3B2A34;

    --ink: #F8EEF3;
    --ink-soft: #CDB7C3;
    --accent: #FF96BA;
    --accent-hover: #FFB8D0;
    --on-accent: #2B1D26;

    --dot: rgba(142, 216, 219, 0.13);
    --trail: #6B3A52;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -14px rgba(0, 0, 0, 0.65);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.2rem, 1.35rem + 3.6vw, 3.6rem);
}

h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2.5px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

strong {
  font-weight: 700;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 10;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  min-height: 4.25rem;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
}

.brand img {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.5rem 0.1rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

/* ---------- Buttons, pills and small parts ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.button:hover {
  background: var(--accent-hover);
}

.button--quiet {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 2px currentColor;
}

.button--quiet:hover {
  background: var(--bg-pink);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-pink);
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tag {
  display: inline-block;
  padding: 0 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

/* Lists with paw-print bullets. */
.paws {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.paws li {
  position: relative;
  padding-left: 2rem;
}

.paws li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--accent);
  -webkit-mask: var(--paw-mask) center / contain no-repeat;
  mask: var(--paw-mask) center / contain no-repeat;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

/* The dotted ground of the app icon, fading out down the page. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.9px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.lede {
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
}

.status {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 30rem;
  margin: 1.75rem 0 1.5rem;
  padding: 0.9rem 1.2rem 0.9rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.status img {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 16px;
}

.status-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
}

.status-note {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* Screenshots of the app, each in a plain rounded bezel so it reads as a
   phone. The second one sits a little lower, and drops out on narrow
   screens where two phones would be too small to read. */
.hero-art {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.1rem);
}

.shot {
  flex: 0 1 15rem;
  min-width: 0;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.shot img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.shot--second {
  display: none;
}

@media (min-width: 36rem) {
  .shot--second {
    display: block;
    margin-top: 2rem;
  }
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section--pink { background: var(--bg-pink); }
.section--aqua { background: var(--bg-aqua); }

.section-head {
  max-width: 44rem;
  margin-bottom: 2.25rem;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 1.2rem;
}

/* ---------- Feature groups ---------- */

.group + .group {
  margin-top: 3rem;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}

.group-title::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--accent);
  -webkit-mask: var(--paw-mask) center / contain no-repeat;
  mask: var(--paw-mask) center / contain no-repeat;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Column counts chosen per group so no row is left with a lone card. */
@media (min-width: 36rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 52rem) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.card h3,
.card h4 {
  margin: 0.85rem 0 0.35rem;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}

.card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.04rem;
}

.icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 14px;
  background: var(--bg-pink);
  color: var(--accent);
}

.group--yours .icon { background: var(--bg-lilac); }
.group--together .icon { background: var(--bg-aqua); }

.icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note {
  max-width: 44rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 1.5px dashed var(--trail);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* ---------- Blind Box Decoder ---------- */

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.code-demo {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.code-label {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.code-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.seg-code {
  padding: 0.35rem 0.65rem;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--bg-aqua);
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 1rem + 2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.seg--pet .seg-code {
  border-color: var(--accent);
  background: var(--bg-pink);
}

.seg-name {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.code-demo figcaption {
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-size: 1rem;
  text-align: center;
}

.small {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ---------- Collector Pro ---------- */

.panel {
  display: grid;
  gap: 1.5rem 3rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (min-width: 56rem) {
  .panel {
    grid-template-columns: 1fr 1fr;
  }
}

.panel h2 {
  margin-bottom: 0.6rem;
}

.panel .paws {
  margin-bottom: 0;
}

.list-label {
  margin: 0 0 0.85rem;
  font-weight: 700;
}

/* ---------- Coming soon ---------- */

.soon .card {
  border: 1.5px dashed var(--trail);
  background: transparent;
}

.soon .tag {
  margin-left: 0.35rem;
}

/* ---------- About ---------- */

.about {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.about p {
  color: var(--ink-soft);
  font-size: 1.2rem;
}

/* A little trail of paw prints walking across the page. */
.trail {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin: 0 auto 1.75rem;
  color: var(--trail);
}

.trail svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

.trail svg:nth-child(odd) { transform: translateY(-0.45rem) rotate(78deg); }
.trail svg:nth-child(even) { transform: translateY(0.45rem) rotate(102deg); }

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 2.75rem 3rem;
  border-top: 1px solid var(--line);
  background: var(--bg-pink);
  font-size: 1rem;
}

.footer-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.footer-brand {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding-block: 0.25rem;
  font-weight: 700;
}

.fineprint {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Text pages (privacy, support, guidelines) ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.9px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
  pointer-events: none;
}

/* The title lines up with the reading column below it. */
.page-head .wrap {
  position: relative;
  max-width: var(--measure);
}

.page-head h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3rem);
}

.page-head .lede {
  max-width: var(--measure);
  margin-bottom: 0;
}

.stamp {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 700;
}

.page-body {
  padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
}

.prose {
  max-width: var(--measure);
}

.prose h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.75rem;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
  scroll-margin-top: 1rem;
}

.prose h2::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--trail);
  -webkit-mask: var(--paw-mask) center / contain no-repeat;
  mask: var(--paw-mask) center / contain no-repeat;
}

.prose h3 {
  margin-top: 1.75rem;
  scroll-margin-top: 1rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.1em;
  padding-left: 1.35rem;
}

.prose li {
  margin: 0.4rem 0;
}

.prose li::marker {
  color: var(--accent);
}

.callout {
  margin: 1.75rem 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.toc {
  margin: 0 0 1rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.toc-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.toc ol {
  margin: 0;
  padding-left: 1.35rem;
  columns: 16rem 2;
  column-gap: 2rem;
  font-size: 1.02rem;
}

.toc li {
  margin: 0.2rem 0;
  break-inside: avoid;
}

.table-scroll {
  overflow-x: auto;
  margin: 1.25rem 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.data {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 1rem;
}

.data th,
.data td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data tr:last-child th,
.data tr:last-child td {
  border-bottom: 0;
}

.data thead th {
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.data tbody th {
  width: 42%;
  font-weight: 700;
}

/* On a phone two columns are too narrow to read, so each row stacks:
   the "what" on top, the "why" underneath. */
@media (max-width: 40rem) {
  .data,
  .data tbody,
  .data tr,
  .data th,
  .data td {
    display: block;
    width: auto;
  }

  .data {
    min-width: 0;
  }

  .data thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .data tr {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--line);
  }

  .data tr:last-child {
    border-bottom: 0;
  }

  .data tbody th,
  .data td {
    padding: 0;
    border: 0;
  }

  .data tbody th {
    width: auto;
    margin-bottom: 0.3rem;
  }
}

.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.contact-card p {
  margin: 0;
}

.contact-card .callout-title {
  margin-bottom: 0.2rem;
}

/* ---------- Forms (the advertising enquiry) ---------- */

.enquiry {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.field {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}

.field label {
  font-weight: 700;
}

.optional {
  color: var(--ink-soft);
  font-weight: 400;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  border-color: var(--accent);
  outline-offset: 1px;
}

button.button {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

/* ---------- 404 ---------- */

.lost {
  padding-block: clamp(4rem, 12vw, 8rem);
  text-align: center;
}

.lost .lede {
  margin-inline: auto;
}

.lost .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .site-header,
  .site-footer,
  .skip,
  .toc {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}