/* Odin Press — site stylesheet. Depends on variables.css.
   Covers: reset, typography, layout, masthead, footer, catalog grid,
   single-book page, services, about/contact. Palette A only. */

/* ─── Cover font (TeX Gyre Schola) — matches the book covers ─ */
@font-face {
  font-family: 'Odin Schola';
  src: url('../fonts/texgyreschola-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Odin Schola';
  src: url('../fonts/texgyreschola-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* EB Garamond Bold — the exact "ODIN PRESS" wordmark font on the covers */
@font-face {
  font-family: 'Odin Garamond';
  src: url('../fonts/EBGaramond12-Bold.woff') format('woff'),
       url('../fonts/EBGaramond12-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
ul { list-style: none; padding: 0; }

/* ─── Base ──────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: var(--leading-tight); color: var(--ink); font-weight: 600; }
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p { color: var(--text); }
.muted { color: var(--text-muted); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.narrow   { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); }
.section  { padding: var(--space-20) 0; }

/* Ornamental rule with a brass diamond (the quiet Odin flourish) */
.rule { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-8) 0; }
.rule::before, .rule::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.rule .mark { color: var(--brass); font-size: var(--text-sm); }

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: .8em 1.5em; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: var(--transition);
}
.btn-primary { background: var(--oxblood); color: #F4EFE6; }
.btn-primary:hover { background: var(--oxblood-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--slate); border-color: var(--line-dark); }
.btn-ghost:hover { background: var(--slate); color: var(--on-dark); }
/* Read-a-Sample: blue by default, teal on hover */
.btn-sample { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.btn-sample:hover { background: #0d9488; border-color: #0d9488; color: #fff; }
.btn-block { display: flex; width: 100%; }

/* Book publication-facts table (under the sample button) */
.book-specs { margin-top: var(--space-6); border-collapse: collapse; width: auto; font-size: var(--text-sm); }
.book-specs th, .book-specs td { text-align: left !important; padding: .55em .2em; border-bottom: 1px solid var(--line); vertical-align: top; }
.book-specs th { font-weight: 500; color: var(--text-muted); white-space: nowrap; padding-left: 0; padding-right: var(--space-8); }
.book-specs td { color: var(--text); white-space: nowrap; }
.book-specs tr:last-child th, .book-specs tr:last-child td { border-bottom: none; }
/* Clickable cover → sampler */
.cover-link { display: inline-block; cursor: pointer; transition: var(--transition); }
.cover-link:hover { opacity: .9; }

/* ─── Masthead ──────────────────────────────────────────── */
.masthead { background: var(--slate); color: var(--on-dark); border-bottom: 3px solid var(--brass); }
.masthead .container { display: flex; align-items: center; justify-content: space-between; min-height: 172px; padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* Shared brand block: bird + ODIN PRESS + one-liner (identical in header & footer) */
.wordmark { display: flex; align-items: center; gap: var(--space-4); color: var(--on-dark); }
.wordmark .raven { height: 144px; width: auto; flex: none; }
.wordmark .name { font-family: var(--font-wordmark); font-size: 2.4rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; color: var(--on-dark); white-space: nowrap; }
.brand-tag { color: var(--on-dark); font-family: var(--font-sans); font-size: 1rem;
  line-height: var(--leading-normal); margin-top: var(--space-3); white-space: nowrap; }
.site-footer .wordmark .name { font-size: 2.4rem; }
.mainnav ul { display: flex; gap: var(--space-8); }
.mainnav a { color: var(--on-dark); font-size: var(--text-lg); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: .4em 0; border-bottom: 2px solid transparent; }
.mainnav a:hover, .mainnav a.active { color: var(--brass); border-bottom-color: var(--brass); }

/* ─── Homepage intro / quiet line ──────────────────────── */
.intro { text-align: center; padding: var(--space-16) 0 var(--space-8); }
.intro h1 { font-size: var(--text-5xl); }
.intro .tagline { color: var(--text-muted); font-size: var(--text-lg); margin-top: var(--space-3);
  font-style: italic; font-family: var(--font-serif); }

/* ─── Catalog grid ─────────────────────────────────────── */
.catalog {
  display: grid; gap: var(--space-10) var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.book-card { display: block; color: var(--text); transition: var(--transition); }
.book-card .cover-wrap {
  aspect-ratio: 2/3; background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition);
}
.book-card:hover .cover-wrap { box-shadow: var(--shadow); transform: translateY(-3px); }
.book-card img { width: 100%; height: 100%; object-fit: cover; }
.book-card .bc-title { font-family: var(--font-serif); font-size: var(--text-base); font-weight: 600;
  margin-top: var(--space-3); line-height: var(--leading-snug); color: var(--ink); }
.book-card .bc-author { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

/* ─── Single book page ─────────────────────────────────── */
.book { padding: var(--space-16) 0; }
.book-hero { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-16); align-items: start; }
.book-hero .cover { box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.book-title { font-size: var(--text-4xl); }
.book-subtitle { font-family: var(--font-serif); font-style: italic; color: var(--text-muted);
  font-size: var(--text-xl); margin-top: var(--space-2); }
.book-author { margin-top: var(--space-4); font-size: var(--text-lg); }
.book-author strong { font-weight: 600; }
.specs { margin: var(--space-6) 0; font-size: var(--text-sm); color: var(--text-muted); }
.specs span { margin-right: var(--space-4); }
.actions { display: flex; flex-direction: column; gap: var(--space-3); max-width: 320px; margin-top: var(--space-6); }
.book-section { margin-top: var(--space-12); }
.book-section h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.blurb p { margin-bottom: var(--space-4); max-width: 62ch; line-height: var(--leading-relaxed); }
.covers-pair { display: flex; gap: var(--space-6); }
.covers-pair figure { flex: 1; }
.covers-pair img { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.covers-pair figcaption { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); margin-top: var(--space-2); }
.extra-list li, .toc-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.toc-list { counter-reset: ch; max-width: 64ch; }
.toc-list li { counter-increment: ch; list-style: none; display: flex; gap: var(--space-4); align-items: baseline; }
.toc-list li::before { content: counter(ch); color: var(--brass); font-family: var(--font-serif);
  font-weight: 700; min-width: 1.8em; text-align: right; flex: none; }

/* ─── Discover another title (book-page footer artifact) ── */
.discover { text-align: center; padding-bottom: var(--space-16); }
.discover h2 { font-size: var(--text-2xl); margin-bottom: var(--space-8); }
.discover-card { display: inline-block; width: 190px; text-align: left; }
#discover-slot { transition: opacity 0.3s ease; }

/* ─── Services ─────────────────────────────────────────── */
.services { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.service { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brass);
  padding: var(--space-6); border-radius: var(--radius); }
.service h3 { color: var(--slate); margin-bottom: var(--space-2); }
.service p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.cta-band { background: var(--slate); color: var(--on-dark); text-align: center; padding: var(--space-16) 0; }
.cta-band h2 { color: #fff; margin-bottom: var(--space-4); }
.cta-band p { color: var(--on-dark-muted); margin-bottom: var(--space-6); }

/* ─── Our Authors ──────────────────────────────────────── */
.author-index li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.author-index a { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--ink); }
.author-index a:hover { color: var(--accent); }

/* ─── Prose (About / Contact) ──────────────────────────── */
.prose p { margin-bottom: var(--space-5); line-height: var(--leading-relaxed); max-width: 64ch; }
.prose h2 { margin: var(--space-10) 0 var(--space-4); }

/* ─── Footer ───────────────────────────────────────────── */
.site-footer { background: var(--slate-2); color: var(--on-dark-muted); padding: var(--space-16) 0 var(--space-8); margin-top: var(--space-24); }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--brass-light); }
.footer-cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-10); }
.footnav ul { display: block; }               /* stack the header-style nav links */
.footnav li { margin: var(--space-2) 0; }
.footer-bottom { border-top: 1px solid var(--line-dark); margin-top: var(--space-10); padding-top: var(--space-6);
  font-size: var(--text-xs); color: var(--on-dark-muted); }

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 760px) {
  .book-hero { grid-template-columns: 1fr; gap: var(--space-8); }
  .book-hero .cover { max-width: 260px; }
  .masthead .container { height: auto; padding: var(--space-4) var(--space-6); flex-wrap: wrap; gap: var(--space-3); }
  .mainnav ul { gap: var(--space-5); }
  .covers-pair { flex-direction: column; }
  .intro h1 { font-size: var(--text-4xl); }
}

/* ─── Header search ────────────────────────────────────── */
.masthead-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
.hsearch { position: relative; display: flex; align-items: center; }
.hsearch input {
  width: 240px; padding: 0.5em 2.2em 0.5em 0.85em; border: 1px solid var(--line-dark);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 0.95rem; }
.hsearch input::placeholder { color: var(--warm-gray); }
.hsearch input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 2px rgba(176,141,76,0.25); }
.hsearch-btn { position: absolute; right: 6px; background: none; border: none; padding: 4px;
  cursor: pointer; color: var(--slate); display: flex; }
.hsearch-btn:hover { color: var(--oxblood); }
.hsearch-btn svg { width: 18px; height: 18px; }
.hsearch-results {
  position: absolute; top: 100%; right: 0; margin-top: 8px; width: 340px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 60; display: none; overflow: hidden; }
.hs-item { display: flex; gap: 10px; padding: 9px 12px; align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); }
.hs-item:last-child { border-bottom: none; }
.hs-item:hover { background: var(--paper-2); }
.hs-item img { width: 34px; height: 51px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.hs-item span { display: flex; flex-direction: column; min-width: 0; }
.hs-item b { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.hs-item i { color: var(--text-muted); font-style: normal; font-size: 0.8rem; margin-top: 2px; }
.hs-none { padding: 12px; color: var(--text-muted); font-size: 0.9rem; }

@media (max-width: 760px) {
  .masthead-right { align-items: stretch; width: 100%; }
  .hsearch, .hsearch input { width: 100%; }
  .hsearch-results { width: 100%; }
}