/* Logos Ministry Archive — simple, classic styling */

:root {
  --cream: #faf6ec;
  --cream-deep: #f2ead9;
  --ink: #2c2620;
  --ink-soft: #4a4238;
  --accent: #6e2b2b;
  --accent-soft: #8a4040;
  --rule: #ddd0b4;
  --max-width: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  line-height: 1.7;
  font-size: 18px;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--accent); }

header.site-header {
  background: var(--cream-deep);
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 1.25rem;
}

.site-header-inner {
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.site-title a { color: var(--accent); border-bottom: none; }

nav.site-nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

nav.site-nav a {
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  margin-right: 1.25rem;
}

nav.site-nav a:last-child { margin-right: 0; }

nav.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

main.wide { max-width: 62rem; }

h1, h2, h3, h4 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  color: var(--ink);
  line-height: 1.3;
}

h1 { font-size: 2rem; margin: 0 0 0.5rem; color: var(--accent); }
h2 { font-size: 1.4rem; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; }

.subtitle {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
  margin: 0 0 1.5rem;
}

.meta-line {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
}

.meta-line span { display: inline-block; margin-right: 1rem; }

.tag-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag {
  display: inline-block;
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.82rem;
  padding: 0.15rem 0.6rem;
  border-radius: 3px;
  margin: 0 0.4rem 0.4rem 0;
}

p { margin: 0 0 1.1rem; }

blockquote {
  margin: 1.4rem 0;
  padding: 0.2rem 1.2rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}

hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

ul, ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.4rem; }

.book-images {
  margin: 1.6rem 0;
  border: 1px solid var(--rule);
  background: var(--cream-deep);
  border-radius: 4px;
  padding: 0.6rem;
}

.book-images img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.book-images.single img { max-width: 32rem; margin: 0 auto; }

.book-images.multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
}

.book-images.multi img { width: 100%; }

.picture-caption {
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: -0.8rem 0 1.4rem;
}

.home-intro {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 3rem;
}

.home-intro h1 { font-size: 2.3rem; }

.byline {
  font-size: 1rem;
  color: var(--accent-soft);
  letter-spacing: 0.03em;
  margin: 0 0 1rem;
}

.category-block { margin-bottom: 2.8rem; }

.category-block h2 {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem;
  margin-top: 0;
}

.piece-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .piece-grid { grid-template-columns: 1fr 1fr; }

  /* When a theme section holds an odd number of pieces, the final card
     would otherwise sit alone against empty space. Centring it at the
     same width as its neighbours keeps every section looking balanced. */
  .piece-grid .piece-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.45rem);
    margin: 0 auto;
  }
}

.piece-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}

.piece-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.piece-card .kind-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-soft);
}

.piece-card p.excerpt {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}

#search-box {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}

#search-box:focus {
  outline: none;
  border-color: var(--accent-soft);
}

.search-status {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 1rem 0 0;
}

.download-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  padding: 0.55rem 1.1rem;
  border-radius: 3px;
  font-size: 0.92rem;
  border-bottom: none !important;
  margin-top: 0.5rem;
}

.download-btn:hover { background: var(--accent-soft); }

.series-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.series-list li {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
}
.series-list a { font-weight: 600; }

.piece-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
}

footer.site-footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 2.5rem 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
}

.index-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.index-table th, .index-table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: 0.95rem;
}
.index-table th { color: var(--accent); font-weight: 700; }

.back-link { display: inline-block; margin-bottom: 1.5rem; font-size: 0.92rem; }

.scripture-group h3 { color: var(--accent-soft); }
.scripture-group ul { margin-bottom: 1.8rem; }