/* The app's palette, so the pages a subscriber lands on from the paywall look
   like the thing they just paid for. Values come straight from
   Sources/Design/Palette.swift. */

:root {
  --canvas: #F7F2EA;
  --surface: #FFFCF7;
  --ink: #241E19;
  --ink-secondary: #6A5D52;
  --ink-tertiary: #766A5C;
  --hairline: #E3D9C9;
  --accent: #C96A1E;
  --accent-ink: #A5511A;
  --accent-soft: #F6E4CE;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #14120F;
    --surface: #1E1B17;
    --ink: #F6F0E7;
    --ink-secondary: #B5A99C;
    --ink-tertiary: #8D8278;
    --hairline: #322C27;
    --accent: #E9913F;
    --accent-ink: #F0A65E;
    --accent-soft: #3A2A1A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16.5px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header, main, footer {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

header { padding-top: 2.5rem; padding-bottom: 1rem; }

.wordmark {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent-ink);
  text-decoration: none;
}

main { padding-bottom: 3rem; }

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 1.2rem 0 1rem;
  font-weight: 650;
}

body.wide h1 { font-size: 2.3rem; max-width: 18ch; }

h2 {
  font-size: 1.12rem;
  margin: 2.4rem 0 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  font-weight: 640;
}

h3 {
  font-size: 1rem;
  margin: 1.8rem 0 0.4rem;
  font-weight: 640;
}

p, li { color: var(--ink-secondary); }
h1 + p.lede { color: var(--ink); font-size: 1.1rem; }

strong { color: var(--ink); font-weight: 620; }

em { color: var(--ink); font-style: normal; font-weight: 600; }

a { color: var(--accent-ink); text-underline-offset: 0.18em; }

ul, ol { padding-left: 1.2rem; }
li { margin: 0.45rem 0; }

/* Unfilled legal blanks in a draft build. Loud on purpose. */
mark.todo {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  border: 1px dashed var(--accent);
}

footer {
  border-top: 1px solid var(--hairline);
  padding-top: 1.2rem;
  padding-bottom: 3rem;
  font-size: 0.85rem;
  color: var(--ink-tertiary);
}

footer a { color: var(--ink-tertiary); }

em.date, p em:first-child { color: var(--ink-tertiary); font-weight: 400; }

/* --- App Store button, tables, article rhythm --------------------------------
   Added with the first content page. The site previously had no button and no
   table styles, so an unstyled link was the only route to the App Store. The
   palette is the app's own (PR.accent / PR.canvas / PR.ink in Palette.swift),
   so the page and the product read as one thing. */

.cta { margin: 1.75rem 0; }

a.button {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  background: #C96A1E;
  color: #FFF8F0;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
a.button:hover { background: #A5511A; }
a.button:focus-visible { outline: 3px solid #C96A1E; outline-offset: 3px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}
th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(36, 30, 25, 0.14);
}
th { font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

/* Wide tables scroll rather than forcing the page sideways on a phone. */
main { overflow-x: auto; }

@media (prefers-color-scheme: dark) {
  a.button { background: #E9913F; color: #1B160F; }
  a.button:hover { background: #F0A65E; }
  th, td { border-bottom-color: rgba(246, 240, 231, 0.16); }
}

/* --- article furniture -------------------------------------------------------
   .checklist gives each socialization item room to breathe: title, how-to and
   stop rule are three lines that must stay visually separable, because the
   stop rule is the part that makes the list worth reading. */

ul.checklist { list-style: none; padding-left: 0; }
ul.checklist > li {
  padding: 0.85rem 0 0.85rem 0;
  border-bottom: 1px solid rgba(36, 30, 25, 0.12);
  line-height: 1.55;
}
ul.checklist > li:last-child { border-bottom: none; }
ul.checklist em { color: #A5511A; font-style: normal; font-weight: 600; }

.level {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #F6E4CE;
  color: #A5511A;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

p.note {
  padding: 0.8rem 1rem;
  border-left: 3px solid #C96A1E;
  background: rgba(201, 106, 30, 0.06);
  border-radius: 0 8px 8px 0;
}

@media (prefers-color-scheme: dark) {
  ul.checklist > li { border-bottom-color: rgba(246, 240, 231, 0.14); }
  ul.checklist em { color: #F0A65E; }
  .level { background: #3A2A1A; color: #F0A65E; }
  p.note { border-left-color: #E9913F; background: rgba(233, 145, 63, 0.10); }
}