/* Tallies — shared paperback styling for sthreelabs.com/tallies pages */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300..600;1,300..500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --paper: #E9E2D3;
  --paper-light: #F1EBDC;
  --ink: #2A1E0F;
  --amber: #7A5F33;
  --rule: rgba(42, 30, 15, 0.30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A140C;
    --paper-light: #221B12;
    --ink: #E9E2D3;
    --amber: #BFA06A;
    --rule: rgba(233, 226, 211, 0.25);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Crimson Pro', Georgia, serif;
  color: var(--ink);
  background: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.1 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  line-height: 1.55;
  font-size: 18px;
  min-height: 100vh;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 56px 28px 80px; }
.wrap.wide { max-width: 980px; }

header.site {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 36px;
}
header.site .brand {
  font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 22px;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
header.site nav { display: flex; gap: 18px; }
header.site nav a {
  font-family: 'Crimson Pro', serif; font-style: italic; font-size: 14px;
  color: var(--amber); text-decoration: none;
}
header.site nav a:hover { color: var(--ink); }

h1 {
  font-family: 'Crimson Pro', serif; font-weight: 500;
  font-size: clamp(34px, 6vw, 56px);
  letter-spacing: -0.02em; line-height: 1.05;
  margin: 24px 0 8px;
}
h1 .smallcaps {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 14px; font-weight: 400;
}
h2 {
  font-family: 'Crimson Pro', serif; font-weight: 500;
  font-size: 26px; margin: 38px 0 8px;
  letter-spacing: -0.01em;
}
h2 .chap {
  font-family: 'Crimson Pro', serif; font-style: italic; font-weight: 400;
  font-size: 13px; color: var(--amber); margin-right: 8px;
}
h3 {
  font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 18px;
  margin: 22px 0 6px;
}

p, li { font-size: 17px; }
p.lead { font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink); margin-bottom: 30px; }
p.lead::first-letter {
  font-size: 56px; float: left; line-height: 0.85; margin: 6px 10px 0 0;
  font-weight: 500; font-style: normal;
}

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

ul, ol { padding-left: 22px; }
ul li, ol li { margin: 6px 0; }

.ornament { text-align: center; color: var(--amber); margin: 30px 0; font-size: 18px; letter-spacing: 8px; }
.ornament::before { content: "❦"; }

.muted { color: var(--amber); font-style: italic; font-size: 14px; }

a.store {
  display: inline-block;
  font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--paper); background: var(--ink);
  padding: 10px 18px; border-radius: 3px;
  text-decoration: none;
  margin-top: 6px;
}
a.store:hover { background: var(--amber); color: var(--paper); }
.updated { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }

footer.site {
  border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 60px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--amber); font-style: italic;
}
footer.site a { color: var(--amber); }

.brandmark {
  font-family: 'Crimson Pro', serif;
  font-weight: 300;
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}
.brandmark:hover { color: var(--ink); }


a.app-store-badge {
  display: inline-block;
  margin-top: 6px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
a.app-store-badge:hover { opacity: 0.82; }
a.app-store-badge img { height: 56px; width: auto; display: block; }