/* Storyphernalia: warm paper, dark ink, terracotta. Colors match the app (writing-app/src/index.css). */
@font-face { font-family: 'Literata'; src: url('fonts/literata-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('fonts/literata-latin-wght-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f6f1e8; --bg-2: #efe8db; --surface: #fffdf8;
  --ink: #2a2520; --ink-2: #554b42; --muted: #72675b; --heading: #2a2520;
  --line: #e2d9ca; --line-2: #d4c8b5; --hover: rgba(120, 90, 60, 0.08);
  --accent: #b2532e; --accent-hover: #9d4626; --accent-ink: #fff; --accent-soft: #f4dfd3;
  --eyebrow: #a24a28; --link: #9d4626;
  --display: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --display-weight: 650; --brand-weight: 600;
  --text: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --header-bg: rgba(246, 241, 232, 0.88);
  --hero-bg: radial-gradient(900px 520px at 88% 10%, rgba(178, 83, 46, 0.12), transparent 70%), radial-gradient(700px 500px at 60% 100%, rgba(212, 170, 110, 0.16), transparent 70%), var(--bg);
  --shot-shadow: 0 2px 4px rgba(60, 40, 20, 0.06), 0 24px 60px -12px rgba(60, 40, 20, 0.3);
  --phone-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 28px 50px -12px rgba(50, 30, 15, 0.45);
  --card-shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 10px 30px rgba(60, 40, 20, 0.06);
  --frame-line: rgba(60, 40, 20, 0.12); --chrome: #ece4d6; --chrome-dot: #d6c9b4; --chrome-url: #f9f4ea;
  --band-bg: linear-gradient(160deg, #2f2924 0%, #221e1a 100%);
  --band-ink: #f3ece0; --band-ink-2: rgba(243, 236, 224, 0.82); --band-heading: #fbf6ee; --band-accent: #e9946c;
  --band-card: rgba(255, 250, 240, 0.05); --band-line: rgba(255, 240, 220, 0.14);
  --footer-bg: #1f1b18; --footer-ink: #e6ddd0; --footer-heading: #fbf6ee; --footer-muted: #b3a898; --footer-line: rgba(255, 240, 220, 0.12);
  --closing-bg: radial-gradient(700px 300px at 50% 0%, rgba(178, 83, 46, 0.1), transparent 70%), var(--bg-2);
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23f4dfd3'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%239d4626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --band-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e9946c' fill-opacity='.2'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23f0a581' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%239d4626' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* the app's wordmark: an italic S on dark ink */
.mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: var(--bg); font-family: var(--text); font-weight: 600; font-style: italic; font-size: 19px; line-height: 1; }
.hero h1 .name .mark { border-radius: 11px; font-size: 27px; }
.site-footer .mark { background: #f3ece0; color: #2a2520; width: 28px; height: 28px; font-size: 17px; border-radius: 7px; }
.hero h1 .promise { font-weight: 640; letter-spacing: -0.028em; }
.hero h1 .promise em { font-style: italic; font-weight: 560; color: var(--accent); }
/* index-card feel for the contents list */
.contents li .dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 3px; background: var(--accent); opacity: .8; }
.contents li:nth-child(3n+2) .dot { background: #4f8a4b; }
.contents li:nth-child(3n) .dot { background: #4a7f9a; }