/*
 * The reading pages of the games section, in the front page's two sides.
 *
 * The match list, the nine match passports and the limits of a human are
 * articles, not playfields: a back link, a heading, a line under it, a run
 * of cards, a footer. This file draws that frame. The palette and the two
 * typefaces come from the root's /sides.css, loaded before it; what is
 * particular to a page -- its bars, its table, its tags -- stays in that
 * page's own <style> and reads the same variables.
 *
 * Nothing here applies until a page opts in with class="sides read" on
 * <body>. It is the games-section twin of the body.doc layer at the end of
 * yvc-home/home.css, and the two are kept the same on purpose: a match
 * passport and the year page that links to it should not look like two
 * different sites.
 */

:root:has(> body.read) { background: #ffffff; }

/* the net, once, as a signature */
body.read::before {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--net) 0 12px, #ffffff 12px 16px);
}

body.read #page {
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 20px 48px 20px;
}

body.read #back {
  display: inline-block;
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
}
body.read #back:hover { color: var(--ink); text-decoration: underline; }

/* #title as well: type.css sets it to 20px for the tests, by id */
body.read h1, body.read #title {
  font-family: var(--display);
  font-size: clamp(32px, 4.6vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  margin: 14px 0 6px 0;
}
body.read #sub {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 26px 0;
}

body.read section {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 14px 0;
  color: var(--ink);
}
body.read h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px 0;
}
body.read p { font-size: 16px; line-height: 1.65; margin: 0 0 10px 0; }
body.read p:last-child { margin-bottom: 0; }
body.read a { color: var(--m-ink); }

/* the source under a fact: small, present, not competing with it */
body.read .src { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
body.read .src a { color: var(--ink-soft); }

/* the confidence tag stays the one coloured label these pages share with
   the year pages; only its corners and size follow the new frame */
body.read .conf { border-radius: 4px; }

body.read #footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: left;
}
body.read #footer a { color: var(--ink); }

@media (max-width: 620px) {
  body.read #page { padding: 12px 16px 40px 16px; }
  body.read section { padding: 16px; }
  body.read h2 { font-size: 21px; }
}