/* Talk a Little — shared styling for the content pages (Basics, Reading, Books, Privacy, Terms).
 Change a colour, the header or the shared boxes here and every page picks it up.
 Anything specific to ONE page stays in that page's own <style> block, which loads after this
 file and so can override it. app.html and index.html keep their own, larger stylesheets. */

:root{
  --paper: #F5F0E4;
  --card: #FDFBF4;
  --card-edge: #E4DCC6;
  --ink: #2B2A26;
  --ink-soft: #6B6558;
  --navy: #33465C;
  --navy-deep: #24313F;
  --moss: #5F8264;
  --moss-soft: #E1EADD;
  --teal: #3E7A80;
  --gold: #B78A3B;
  --line: #D8CFB8;
  --shadow: 0 6px 16px rgba(43,42,38,0.12);
}

/* Base */
*{ box-sizing: border-box; }
body{ margin:0; background: var(--paper); color: var(--ink); font-family:'Karla', sans-serif; line-height: 1.65; }
.wrap{ max-width: 720px; margin: 0 auto; padding: 0 24px 70px; }
h1{ font-family:'Special Elite', monospace; font-size: 1.7rem; color: var(--navy-deep); margin: 20px 0 6px; }
a{ color: var(--teal); }

/* Header */
.topbar{ display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 22px 0; }
.brand-lockup{ display:flex; align-items:center; gap: 10px; text-decoration:none; }
.brand-block{ display:flex; flex-direction: column; }
.brand{ font-family:'Special Elite', monospace; font-size: 1.15rem; color: var(--navy-deep); letter-spacing: 0.01em; }
.brand-tagline{ font-size: 0.72rem; color: var(--ink-soft); margin-top: 1px; }
.topbar a.back{ font-size: 0.85rem; color: var(--ink-soft); text-decoration: underline; }

/* Page text */
.updated{ font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 20px; }
.more-coming{ text-align:center; font-size: 0.85rem; color: var(--ink-soft); padding: 24px 0; border-top: 1px dashed var(--line); margin-top: 10px; }
footer{ margin-top: 50px; border-top: 1px dashed var(--line); padding-top: 20px; font-size: 0.82rem; color: var(--ink-soft); }
p.intro{ font-size: 0.98rem; color: var(--ink); margin: 0 0 24px; max-width: 60ch; }

/* Shared boxes */
.entry h2{ font-family:'Special Elite', monospace; font-size: 1.15rem; color: var(--navy-deep); margin: 0 0 10px; }
.entry p{ font-size: 0.95rem; color: var(--ink); margin: 0 0 12px; }
.entry p:last-child{ margin-bottom: 0; }
.example{ background: var(--paper); border-radius: 4px; padding: 12px 16px; font-size: 0.9rem; color: var(--ink); border-left: 3px dashed var(--line); }
.example b{ color: var(--navy); }
.disclaimer-box{ background: var(--card); border: 1px solid var(--card-edge); border-radius: 6px; padding: 16px 20px; margin-top: 10px; }
.disclaimer-box p{ font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }