/* Take & Read's pages: the app's paper and ink (Shared/Palette.swift), its serif, and its wordmark. All of it
   is under .take-and-read, the class of its pages' <html> and of its card on the home page. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

.take-and-read {
  --bg: #f6f1e7;
  --raised: #fcf9f2;
  --ink: #1e1b17;
  --ink-secondary: #6b6358;
  --ink-tertiary: #776d60;
  --rule: #dcd3c3;
  --underline: var(--ink-tertiary);
  --body: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --display: var(--body);
  --display-tracking: 0;
  --text-size: 1.125rem;
}

@media (prefers-color-scheme: dark) {
  .take-and-read {
    --bg: #12110f;
    --raised: #1c1a17;
    --ink: #ece4d6;
    --ink-secondary: #a69d8f;
    --ink-tertiary: #827b72;
    --rule: #302c27;
  }
}

.take-and-read .wordmark {
  font-family: "Cormorant Garamond", var(--body);
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  font-size: 1.75rem;
}

/* A shared passage, above the page its address shows where the app isn't installed: set as the app's share
   card sets it (QuoteImage), in its tradition's colour (Shared/Tradition.swift), with its source and the
   editor's note under it. website.py writes the markup. */
.take-and-read .passage {
  --tint: var(--ink-secondary);
  margin: 0 0 2.75rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--tint) 12%, transparent), transparent 26rem),
    var(--raised);
}
.take-and-read .passage.philosophy { --tint: #2c5a6e; }
.take-and-read .passage.theology { --tint: #8a2e2b; }
.take-and-read .passage.poetry { --tint: #93661c; }
.take-and-read .passage.fiction { --tint: #46652f; }
.take-and-read .passage.history { --tint: #5e3b67; }
@media (prefers-color-scheme: dark) {
  .take-and-read .passage.philosophy { --tint: #8bbacd; }
  .take-and-read .passage.theology { --tint: #de8f84; }
  .take-and-read .passage.poetry { --tint: #d8b26a; }
  .take-and-read .passage.fiction { --tint: #9ebe84; }
  .take-and-read .passage.history { --tint: #bc9cc8; }
}

/* Its tradition and its author's era, in small capitals. */
.take-and-read .passage .kicker {
  margin: 0 0 1.25rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tint);
}

.take-and-read .passage figure { margin: 0; }

/* The shorter the passage, the larger it's set, as on the card. */
.take-and-read .passage blockquote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
}
.take-and-read .passage blockquote.m { font-size: 1.3125rem; line-height: 1.5; }
.take-and-read .passage blockquote.l { font-size: 1.5rem; line-height: 1.45; }
.take-and-read .passage blockquote.xl { font-size: 1.75rem; line-height: 1.4; }
.take-and-read .passage blockquote p { margin: 0 0 0.7em; }
.take-and-read .passage blockquote p:last-child { margin-bottom: 0; }

/* Verse a line to a span, indented as the poem has it; a line too long for the column wraps hung under
   it, 1.5 em further in than its own indent, in n half ems (.in<n>). */
.take-and-read .passage .verse { font-size: 0.92em; }
.take-and-read .passage .verse span { display: block; padding-left: 1.5em; text-indent: -1.5em; }
.take-and-read .passage .verse .in1 { padding-left: 2em; text-indent: -2em; }
.take-and-read .passage .verse .in2 { padding-left: 2.5em; text-indent: -2.5em; }
.take-and-read .passage .verse .in3 { padding-left: 3em; text-indent: -3em; }
.take-and-read .passage .verse .in4 { padding-left: 3.5em; text-indent: -3.5em; }
.take-and-read .passage .verse .in5 { padding-left: 4em; text-indent: -4em; }
.take-and-read .passage .verse .in6 { padding-left: 4.5em; text-indent: -4.5em; }
.take-and-read .passage .verse .in7 { padding-left: 5em; text-indent: -5em; }
.take-and-read .passage .verse .in8 { padding-left: 5.5em; text-indent: -5.5em; }
.take-and-read .passage .verse .in9 { padding-left: 6em; text-indent: -6em; }

/* Its author, its work and where in it, and its translator, under a short rule in the tradition's colour. */
.take-and-read .passage figcaption {
  margin-top: 1.375rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-secondary);
}
.take-and-read .passage figcaption::before {
  content: "";
  display: block;
  width: 1.75rem;
  margin-bottom: 1.375rem;
  border-top: 1px solid color-mix(in srgb, var(--tint) 60%, transparent);
}
.take-and-read .passage figcaption span { display: block; }
.take-and-read .passage figcaption .author {
  margin-bottom: 0.125rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

/* The editor's note on who is speaking and why it matters, as the feed sets it. */
.take-and-read .passage .context {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}