/* A page of text to sit down and read (the privacy pages, later the blog
   posts): the words on parchment, as the app sets its long reads, lying on
   the site's sky in a column narrow enough to follow. */

.text-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 8px;
}

.text {
  padding: 40px 44px;
  border-radius: 6px;
  background: #ecdfc3 linear-gradient(160deg, #f2e7cf, #e3d2b0);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(120, 80, 30, 0.18);
  color: #2b2118;
  font: 18px/1.65 Georgia, "Times New Roman", serif;
}

.text > :first-child { margin-top: 0; }
.text p { margin: 0 0 14px; }
.text ul { margin: 0 0 14px; padding-left: 24px; }
.text li { margin: 0 0 4px; }
.text strong { color: #1d150e; }
.text a { color: #8a3b12; }

.text h2 {
  margin: 34px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(91, 58, 18, 0.3);
  color: #5b3a12;
  font: 400 24px/1.25 var(--heading);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.text h3 {
  margin: 22px 0 8px;
  color: #5b3a12;
  font: 500 18px/1.3 var(--heading);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.text .updated { color: #6b5a44; font-size: 15px; }

/* A button set in the text, such as "Change my cookie choice". */
.text button {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid #5b3a12;
  border-radius: 8px;
  background: none;
  color: #5b3a12;
  font: 400 17px var(--heading);
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 600px) {
  .text { padding: 26px 20px; }
}

/* The contact page's button: opens the visitor's mail app to write to Alex. */
.mail-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 360px;
  margin: 22px auto 8px;
  padding: 14px 18px;
  border: 1px solid rgba(217, 180, 91, 0.8);
  border-radius: 12px;
  background: #000;
  color: var(--gold);
  font: 400 20px var(--heading);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.mail-button svg { width: 22px; height: 22px; flex: none; }

.text .mail-address { margin: 0 0 18px; text-align: center; }