/* 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,
.text ol { 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 h4 {
  margin: 18px 0 6px;
  color: #6b4a1f;
  font: 500 15px/1.3 var(--heading);
  letter-spacing: 1px;
  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; }
}

/* A mantra set apart in the text: the Sanskrit, centred and large, then how
   it sounds in Latin letters with Sanskrit's marks (ṃ, ī, ḥ), then what it
   means. Both fonts, Tiro Devanagari Sanskrit and its italic, hold only the
   letters of the home page's mantra, the one mantra this is used for. */
@font-face {
  font-family: "Mantra Devanagari";
  src: url("/fonts/tiro-devanagari-sanskrit-mantra.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Mantra Sound";
  src: url("/fonts/tiro-devanagari-sanskrit-italic-mantra-sound.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

.text .mantra-block { margin: 26px 0 28px; text-align: center; }
.text .mantra-block p { margin: 0; }
.text .mantra-block .mantra { color: #8a3b12; font: 400 34px/1.5 "Mantra Devanagari", serif; }
.text .mantra-block .sound { margin-top: 2px; color: #5b3a12; font: italic 22px/1.4 "Mantra Sound", Georgia, serif; letter-spacing: 0.02em; }
.text .mantra-block .meaning { margin-top: 6px; color: #6b5a44; font: 18px/1.4 Georgia, serif; }

@media (max-width: 400px) {
  .text .mantra-block .mantra { font-size: 26px; }
}

/* Buttons under the parchment, such as "Follow my work on Patreon"; their
   look is the home page's, from links.css. */
.after-text { margin-top: 22px; text-align: center; }

/* 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; }
.mail-button[hidden], .text [hidden] { display: none; }
.text .mail-check, .text .mail-error { text-align: center; }
.text .cf-turnstile { display: flex; justify-content: center; min-height: 65px; margin: 12px 0 18px; }