/*
  SlantLeaf site styles.

  The palette is not a guess at the app's look: every value below is the exact
  colour from ios/SlantLeaf/Design/Theme.swift, converted from its 0-1
  components to hex. Warm ivory paper, deep blue-black ink, one muted plum
  accent, the same as the app.

  No web font is loaded. Titles use whatever serif the reader's device already
  has and controls use the system sans, which is also what the app does. A
  font file would be a network request for decoration.
*/

:root {
  --paper:      #f7f2e7; /* Theme.paper */
  --paper-deep: #efe8d9; /* Theme.paperDeep */
  --surface:    #fffdf8; /* Theme.surface */
  --ink:        #16202e; /* Theme.ink */
  --ink-soft:   #465367; /* Theme.inkSoft */
  --ink-faint:  #737d8c; /* Theme.inkFaint. 3.73:1 on paper: large text only. */
  --rule:       #dad1bd; /* Theme.rule */
  --plum:       #7b4a63; /* Theme.plum */
  --plum-tint:  #f0e4e9; /* Theme.plumTint */

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* An email address or a bare URL is one unbreakable token. At 320px with a
     large accessibility text size it is wider than the column, and without
     this it pushes a horizontal scrollbar onto the whole page. */
  overflow-wrap: break-word;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* The paper edge: a hairline of the deeper ivory down each side, the way the
     app's preview well sits on the page. Costs no request. */
  background-image: linear-gradient(90deg, var(--paper-deep) 0 2px, transparent 2px);
  background-repeat: no-repeat;
}

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* --- masthead ------------------------------------------------------------ */

header.masthead { margin-bottom: 2.5rem; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

h1 {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.lede {
  font-size: 1.1875rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  max-width: 32rem;
}

/* --- the status chip ----------------------------------------------------- */

.status {
  display: inline-block;
  background: var(--plum-tint);
  color: var(--plum);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

.price {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* --- sections ----------------------------------------------------------- */

section { margin: 2.75rem 0 0; }

h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.85rem;
  font-weight: 600;
}

h3 {
  font-size: 1rem;
  margin: 1.75rem 0 0.4rem;
  font-weight: 650;
}

p { margin: 0 0 1rem; }

p:last-child, ul:last-child { margin-bottom: 0; }

ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }

a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { text-decoration-thickness: 2px; }

strong { font-weight: 650; }

/* --- card --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1.25rem 1.25rem 1.35rem;
  margin: 1.25rem 0;
}

.card h3 { margin-top: 0; }

/* The measured-rule note: a small block that reads like a footer summary on
   one of the app's own sheets. */
.note {
  border-left: 3px solid var(--plum);
  background: var(--surface);
  padding: 0.85rem 1rem;
  margin: 1.25rem 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.note strong { color: var(--ink); }

/* --- definition-style rows ---------------------------------------------- */

.rows { margin: 1rem 0; border-top: 1px solid var(--rule); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.row dt {
  font-weight: 650;
  flex: 0 0 9.5rem;
  margin: 0;
}

.row dd {
  margin: 0;
  flex: 1 1 14rem;
  color: var(--ink-soft);
}

/* Below this width a label beside its value leaves the value two words wide,
   so the two stack instead. */
@media (max-width: 32rem) {
  .row { display: block; }
  .row dt { margin-bottom: 0.1rem; }
}

/* --- nav and footer ----------------------------------------------------- */

nav.pages {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

nav.pages a {
  /* inline-block plus vertical padding brings the tap target to about 44px
     without changing how the link looks. */
  display: inline-block;
  padding: 0.7rem 0;
  margin-right: 1.5rem;
}

footer {
  margin-top: 2rem;
  font-size: 0.875rem;
  /* --ink-faint is the app's caption colour, but it measures 3.73:1 against
     the ivory paper, which fails WCAG AA for text this size. --ink-soft is
     the same family at 6.98:1. */
  color: var(--ink-soft);
}

footer p { margin: 0 0 0.35rem; }

/* --- headings inside long support copy ---------------------------------- */

.support-index { font-size: 0.9375rem; }
.support-index a { display: inline-block; padding: 0.35rem 0; }

h1.page-title { font-size: 2rem; margin-bottom: 0.4rem; }