/* ==========================================================================
   dragunov.net

   Shares the "Warm Heritage Gunroom" design language with mosinpu.com so the
   two sites read as one body of work. Same palette, type stack, radii and
   elevation. The structural difference is deliberate: mosinpu.com is a single
   page with anchor navigation, while this is a 60-page reference archive, so
   the navigation is real page navigation and the layout carries a sidebar.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Warm Heritage Gunroom Palette */
  --bg-primary: #f6f4ee;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-subtle: #f0eee6;
  --bg-highlight: #e4e0d4;

  --border-subtle: #e5e0d4;
  --border-strong: #d3cdbf;
  --border-accent: #92400e;

  /* Heritage Bronze & Steel Accents */
  --brand-bronze: #92400e;
  --brand-bronze-hover: #78350f;
  --brand-bronze-light: #fef3c7;
  --brand-amber: #b45309;

  --brand-steel: #1e3a8a;
  --brand-steel-light: #eff6ff;

  --text-main: #1c1917;
  --text-sub: #44403c;
  --text-muted: #78716c;
  --text-accent: #92400e;

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --shadow-subtle: 0 1px 3px rgba(28, 25, 23, 0.04);
  --shadow-card: 0 4px 8px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
  --shadow-hover: 0 12px 24px -4px rgba(28, 25, 23, 0.1), 0 6px 12px -6px rgba(28, 25, 23, 0.06);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  --wrap: 1320px;
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--brand-bronze);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-smooth);
}
a:hover { color: var(--brand-bronze-hover); text-decoration: underline; }

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand-bronze);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: .85rem;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--brand-bronze);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-subtle);
  width: 100%;
}

.header-inner {
  margin: 0 auto;
  padding: .65rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem .75rem;
  width: min(100% , var(--wrap));
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
  font-weight: inherit;
}
.brand-wrap:hover { text-decoration: none; }

.brand-logo-badge {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #78350f, #451a03);
  border: 1px solid rgba(253, 230, 138, .4);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(120, 53, 15, .3);
  flex-shrink: 0;
  padding: 5px;
}

.brand-logo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

.brand-name {
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.sub-title {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
}

/* Navigation */

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
}

.main-nav-link {
  padding: .35rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-sub);
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.main-nav-link:hover {
  color: var(--text-main);
  background-color: var(--bg-card-subtle);
  text-decoration: none;
}

.main-nav-link.active,
.main-nav-link[aria-current="page"] {
  background-color: var(--bg-surface);
  color: var(--brand-bronze);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  font-weight: 700;
  border: 1px solid var(--border-subtle);
}

/* Link out to the sister site */
.nav-sister {
  border: 1px dashed var(--border-strong);
  color: var(--brand-bronze);
}
.nav-sister:hover { border-style: solid; background-color: var(--brand-bronze-light); }

.mobile-menu-toggle {
  display: none;
  font-size: 1.2rem;
  line-height: 1;
  background-color: var(--bg-card-subtle);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .45rem .7rem;
  cursor: pointer;
  font-family: var(--font-sans);
}

@media (max-width: 62rem) {
  .mobile-menu-toggle { display: block; }
  .main-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: .5rem;
  }
  .main-nav.open { display: flex; }
  .main-nav-link {
    border-radius: var(--radius-sm);
    padding: .6rem .7rem;
    font-size: .85rem;
  }
}

/* --- Layout ------------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 3rem;
  align-items: start;
  padding-block: 2.5rem 1rem;
}

@media (max-width: 68rem) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

.content { min-width: 0; }

/* --- Sidebar ------------------------------------------------------------ */

.sidebar { position: sticky; top: 5.5rem; }

@media (max-width: 68rem) {
  .sidebar { position: static; }
}

.sidebar-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.15rem 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}

.sidebar-title {
  font-family: var(--font-sans);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  font-weight: 800;
  margin: 0 0 .75rem;
}

.model-list, .ref-list { list-style: none; margin: 0; padding: 0; }

.model-list a {
  display: block;
  padding: .5rem .6rem;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-weight: 600;
  transition: var(--transition-smooth);
}
.model-list a:hover {
  background-color: var(--bg-card-subtle);
  text-decoration: none;
}
.model-list a[aria-current="page"] {
  background-color: var(--brand-bronze-light);
  color: var(--brand-bronze);
}
.model-name { display: block; font-size: .88rem; }
.model-note {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 500;
  font-family: var(--font-mono);
}

.ref-list a {
  display: block;
  padding: .32rem .6rem;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-sub);
  border-radius: var(--radius-sm);
}
.ref-list a:hover {
  color: var(--brand-bronze);
  background-color: var(--bg-card-subtle);
  text-decoration: none;
}

/* Sister-site card in the sidebar */
.sister-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.1rem;
}
.sister-card h2 {
  font-family: var(--font-sans);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  font-weight: 800;
  margin: 0 0 .5rem;
}
.sister-card p {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 .75rem;
}
.sister-card .sister-link {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  padding: .4rem .8rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-bronze);
  color: #fff;
}
.sister-card .sister-link:hover {
  background-color: var(--brand-bronze-hover);
  text-decoration: none;
}

/* --- Breadcrumb --------------------------------------------------------- */

.breadcrumb {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.breadcrumb a { color: var(--text-muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--brand-bronze); }
.breadcrumb span[aria-hidden] { margin-inline: .4rem; opacity: .5; }

/* --- Content ------------------------------------------------------------ */

.content h1, .content h2, .content h3,
.content h4, .content h6 {
  font-family: var(--font-serif);
  line-height: 1.2;
  color: var(--text-main);
  margin: 2.25rem 0 .75rem;
  text-wrap: balance;
}
.content > :first-child { margin-top: 0; }

.content h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.content h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); font-weight: 700; }
.content h3 { font-size: 1.25rem; font-weight: 600; }
.content h4 { font-size: 1.08rem; font-weight: 600; }
.content h6 { font-size: .9rem; font-weight: 600; color: var(--text-muted); }

/* The legacy pages use <h5> for spec text and captions, not as a heading */
.content h5 {
  font-family: var(--font-sans);
  font-size: .93rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-sub);
  margin: 0;
}

.content p {
  margin: 0 0 1.15rem;
  max-width: 72ch;
  color: var(--text-sub);
}

.content ul, .content ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
  max-width: 72ch;
  color: var(--text-sub);
}
.content li { margin-bottom: .4rem; }

.content strong, .content b { color: var(--text-main); font-weight: 700; }

.content hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 2.5rem 0;
}

.content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background-color: var(--bg-card-subtle);
  border-left: 3px solid var(--brand-bronze);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-sub);
}
.content blockquote p:last-child { margin-bottom: 0; }

.content code, .content kbd, .content samp {
  font-family: var(--font-mono);
  font-size: .85em;
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  padding: .1em .38em;
  border-radius: var(--radius-xs);
}

/* --- Images and video --------------------------------------------------- */

.content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  background-color: var(--bg-card-subtle);
}

.content p > img:only-child,
.content p > a:only-child > img {
  margin: 1.5rem 0;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
}

.content a > img { transition: var(--transition-smooth); }
.content a:hover > img { box-shadow: var(--shadow-hover); }

.content video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  background-color: var(--bg-card-subtle);
}

/* --- Tables ------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}

.content table {
  border-collapse: collapse;
  width: 100%;
  font-size: .88rem;
}

.content th, .content td {
  padding: .65rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--text-sub);
}

.content thead th,
.content tr:first-child th {
  background-color: var(--bg-card-subtle);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.content tbody tr:last-child td { border-bottom: 0; }
.content tbody tr:hover { background-color: var(--bg-card-subtle); }

/* Tables the old site used purely as image grids shouldn't look like data */
.table-scroll:has(td > img:only-child),
.table-scroll:has(td > a > img:only-child) {
  border: 0;
  background: none;
  box-shadow: none;
}
.table-scroll:has(td > img:only-child) td,
.table-scroll:has(td > a > img:only-child) td {
  border-bottom: 0;
  padding: .35rem;
}

/* --- Lost photographs --------------------------------------------------- */

.missing-image {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  margin: .35rem 0;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted);
  background-color: var(--bg-card-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.missing-image::before {
  content: "";
  width: .8rem;
  height: .8rem;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: .5;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background-color: var(--bg-surface);
  border-top: 1.5px solid var(--border-subtle);
  padding: 4rem 1.5rem 2.5rem;
  margin-top: 6rem;
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3.5rem;
}

@media (max-width: 62rem) {
  .footer-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .site-footer { margin-top: 3.5rem; padding-top: 2.5rem; }
}

.footer-brand h2 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 .5rem;
}

.footer-brand p {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.sister-credit-card {
  background-color: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
}
.sister-credit-card h3 {
  font-family: var(--font-sans);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
  color: var(--text-sub);
  margin: 0 0 .5rem;
}
.sister-credit-card p {
  font-size: .88rem;
  color: var(--text-muted);
  margin: 0;
}

.footer-col h3 {
  font-family: var(--font-sans);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
  color: var(--text-sub);
  margin: 0 0 .85rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a {
  font-size: .87rem;
  font-weight: 500;
  color: var(--text-muted);
}
.footer-links a:hover { color: var(--brand-bronze); }

.footer-bottom {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}

.footer-bottom p {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0;
}

.footer-bottom .since { font-family: var(--font-mono); font-size: .75rem; }

/* --- Print -------------------------------------------------------------- */

@media print {
  .site-header, .sidebar, .site-footer, .breadcrumb, .skip-link { display: none; }
  .layout { display: block; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .content a { color: #000; text-decoration: underline; }
  .table-scroll { overflow: visible; box-shadow: none; }
}

/* --- Page-level note ----------------------------------------------------- */

/* For pages whose subject is still moving, or where sourcing is thin. */
.content .page-note {
  background-color: var(--brand-steel-light);
  border: 1px solid #bfdbfe;
  border-left: 3px solid var(--brand-steel);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: .85rem 1.1rem;
  font-size: .88rem;
  color: var(--text-sub);
  max-width: 72ch;
  margin: 0 0 1.75rem;
}