/* ============================================================================
   Peasant Made Games — legal documents
   ----------------------------------------------------------------------------
   Two readers, both in a hurry: an App Store or Play reviewer checking
   compliance, and a player who tapped a link inside the game. Neither wants
   atmosphere. They want to find a clause and read it.

   So the register here is a controlled document, not a game: institutional,
   high contrast, generous measure. The one place the studio shows up is the
   masthead rule.

   NO DARK MODE, deliberately. Legal documents get printed, screenshotted into
   compliance tickets, and read in daylight on a phone. A dark policy page reads
   as a hobby project.

   NO WEBFONTS, also deliberately, and this one is specific to the subject:
   loading a font from Google Fonts sends the visitor's IP address to Google on
   every page view. Doing that on a privacy policy is a contradiction — and a
   German court has held it unlawful under GDPR without consent. A system font
   stack costs nothing, loads instantly, and is the only choice that does not
   undermine the document it is setting.
   ========================================================================== */

:root {
  --paper:     #ffffff;
  --ink:       #16181d;   /* cool near-black, not pure black */
  --ink-soft:  #5c6270;   /* meta, captions, secondary */
  --rule:      #dfe3e8;   /* hairlines */
  --accent:    #1f4e79;   /* links only. institutional blue, not brand colour */
  --flag:      #8a1c1c;   /* used once, on the waiver */
  --wash:      #f6f7f9;   /* the document-control block */

  --measure:   38rem;     /* ~72 characters. the readable line length */
  --serif:     Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

/* --- masthead ------------------------------------------------------------ */
/* The rule under the studio name is the only ornament on the site. */

.masthead {
  border-top: 3px solid var(--ink);
  margin-top: 0;
  padding-top: .9rem;
}
.studio {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 2.2rem;
}
h1 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 2.4rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .75rem;
}

/* --- document control block ---------------------------------------------- */
/* Effective date and version are the first things a reviewer looks for, so
   they get their own block rather than being buried in a subtitle. */

.control {
  background: var(--wash);
  border: 1px solid var(--rule);
  padding: .9rem 1.1rem;
  margin: 1.75rem 0 2.75rem;
  font-size: .88rem;
  line-height: 1.55;
}
.control dl { margin: 0; display: grid; grid-template-columns: 8.5rem 1fr; gap: .3rem 1rem; }
.control dt { color: var(--ink-soft); }
.control dd { margin: 0; }

/* --- document list ------------------------------------------------------- */

.group-label {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 2.75rem 0 .4rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.group-note { font-size: .88rem; color: var(--ink-soft); margin: .5rem 0 1.25rem; }

.docs { list-style: none; margin: 0; padding: 0; }
.docs li { border-bottom: 1px solid var(--rule); }
.docs a {
  display: block;
  padding: .95rem 0;
  color: var(--accent);
  text-decoration: none;
  font-weight: 550;
}
.docs a:hover { text-decoration: underline; }
.docs .sub {
  display: block;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: .9rem;
  margin-top: .15rem;
}
.docs .sub.flag { color: var(--flag); }
.docs .sub.muted { font-style: italic; }

/* --- document pages ----------------------------------------------------- */

.backlink {
  display: inline-block;
  margin: 1.4rem 0 0;
  font-size: .88rem;
  color: var(--accent);
  text-decoration: none;
}
.backlink:hover { text-decoration: underline; }

.doc h1 { margin-bottom: 1.25rem; }
.doc h2 {
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -.005em;
  margin: 2.9rem 0 .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.doc h3 { font-size: 1rem; font-weight: 650; margin: 1.9rem 0 .3rem; }
.doc p, .doc li { font-size: 1rem; }
.doc ul, .doc ol { padding-left: 1.35rem; }
.doc li { margin: .35rem 0; }
.doc strong { font-weight: 650; }
.doc a { color: var(--accent); }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.doc table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .94rem; }
.doc th, .doc td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc th { font-weight: 650; }
.doc blockquote {
  margin: 1.5rem 0;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
}

/* --- footer ------------------------------------------------------------- */

footer {
  margin-top: 4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font-size: .86rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
footer a { color: var(--accent); }
footer .addr { margin: 0 0 .5rem; }

/* --- accessibility floor ------------------------------------------------ */

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- small screens ------------------------------------------------------ */

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .wrap { padding: 0 1.15rem 4rem; }
  h1 { font-size: 1.85rem; }
  .control dl { grid-template-columns: 1fr; gap: .1rem; }
  .control dt { margin-top: .5rem; }
}

/* --- print --------------------------------------------------------------
   Legal documents get printed and attached to tickets. Worth getting right. */

@media print {
  @page { margin: 20mm 18mm; }
  body { font-size: 10.5pt; line-height: 1.5; color: #000; }
  .wrap { max-width: none; padding: 0; }
  .backlink, .nav { display: none; }
  .masthead { border-top-width: 2pt; }
  .control { background: none; border: 1pt solid #999; }
  .doc h2 { page-break-after: avoid; }
  .doc p, .doc li { orphans: 3; widows: 3; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}