:root {
  --brown: #8B6B43;
  --brown-dark: #5e4528;
  --paper: #ffffff;
  --ink: #181512;
  --muted: #6f665d;
  --green: #4b5c3f;
  --panel: #fbfaf7;
  --rule: #d7c6ad;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--brown-dark); text-decoration: none; }
a:hover { color: var(--green); text-decoration: underline; }
.navbar-brand {
  color: var(--brown-dark);
  font-size: 1.35rem;
  font-weight: 700;
}
.nav-link { color: var(--brown-dark); font-size: .95rem; }
.submenu { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 0 0 8px 8px; }
.submenu a { color: var(--muted); font-size: .82rem; }
.splash-shell {
  min-height: 78vh;
  display: grid;
  place-items: start center;
  padding: 32px 16px;
  text-align: center;
}
.splash-card { max-width: 640px; }
.dog-frame {
  margin: 0 auto 16px;
  padding: 28px;
  background: var(--brown);
  box-shadow: 0 0 22px 18px rgba(139,107,67,.24);
}
.dog-frame img, .content-image img, .gallery-grid img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--brown-dark);
}
.language-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 8px;
}
.language-links a {
  min-width: 48px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: #fff;
  font-weight: 700;
}
.page-shell { padding: 28px 0 48px; }
.document-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.document-panel {
  min-width: 0;
  padding: clamp(22px, 4vw, 42px);
  background: var(--panel);
  border: 1px solid var(--rule);
}
h1, h2, h3, h4 {
  color: var(--brown-dark);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
}
h1 { margin: 0 0 14px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
h2 { margin: 24px 0 10px; font-size: 1.35rem; }
.lead { color: var(--muted); }
.sidebar { display: grid; gap: 14px; }
.side-panel {
  padding: 14px;
  border: 1px solid var(--rule);
  background: white;
}
.side-panel h2 { margin: 0 0 8px; font-size: 1rem; }
.side-panel .nav-link {
  display: block;
  padding: 4px 0;
  border-bottom: 1px solid #eee6dc;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.table-responsive { margin: 14px 0; }
.table { --bs-table-bg: transparent; font-size: .94rem; }
.table td, .table th { border-color: var(--rule); vertical-align: top; }
blockquote {
  margin: 18px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--brown);
  background: #f4efe7;
}
.toc, .source-links {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.source-links div { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.source-links a { color: var(--muted); font-size: .86rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
  color: var(--muted);
  font-size: .88rem;
}
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.site-footer {
  padding: 28px 0 42px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .9rem;
}
.footer-grid { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 820px) {
  .document-layout { display: block; }
  .sidebar { margin-bottom: 18px; }
  .dog-frame { padding: 16px; }
}

@media (min-width: 768px) {
  .navbar-nav .nav-item {
    position: relative;
  }
  .navbar-nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 12px;
    min-width: 240px;
    flex-direction: column;
    gap: 8px;
    z-index: 1050;
  }
  .navbar-nav .nav-item:hover .submenu {
    display: flex;
  }
}