/* Shared reading-page theme for The Lazy Bunch app pages */
:root {
  --coffee: #241812;
  --coffee-2: #33241a;
  --cream: #f3e3c3;
  --cream-muted: #c9b795;
  --mustard: #e3a72f;
  --orange: #c75b2a;
  --avocado: #97a254;
  --display: "Arial Rounded MT Bold", ui-rounded, "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
  --body: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--coffee);
  color: var(--cream);
  font: 16.5px/1.7 var(--body);
  min-height: 100vh;
}
.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.35rem 4.5rem;
}
.home-chip {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  background: var(--mustard);
  color: var(--coffee);
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  margin-bottom: 2.2rem;
}
.home-chip:hover, .home-chip:focus-visible { background: var(--orange); color: var(--cream); outline: none; }
.home-chip .lazy { text-transform: uppercase; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: .3rem; }
.brand .face { font-size: 2rem; line-height: 1; }
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0;
}
.sub {
  color: var(--cream-muted);
  font-style: italic;
  font-size: .95rem;
  margin: .2rem 0 2.2rem;
}
h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--mustard);
  margin: 2.4rem 0 .5rem;
}
p, li { color: var(--cream); }
a { color: var(--mustard); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }
a:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; }
strong, .k { font-weight: 700; color: var(--cream); }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
.card {
  background: var(--coffee-2);
  border: 3px solid rgba(227, 167, 47, .35);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.cta {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  background: var(--mustard);
  color: var(--coffee);
  border-radius: 999px;
  padding: .75rem 1.5rem;
  text-decoration: none;
  margin: .5rem .5rem .5rem 0;
}
.cta:hover, .cta:focus-visible { background: var(--orange); color: var(--cream); outline: none; }
.q {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  margin: 1.7rem 0 .25rem;
}
.q + p { margin-top: 0; }
footer {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(243, 227, 195, .25);
  color: var(--cream-muted);
  font-size: .9rem;
  font-style: italic;
}
footer a { color: var(--mustard); }