@import url('/assets/css/fonts.css');
@import url('/assets/css/tokens.css');

/* ==================================================================
   HuntSpot — one stylesheet for the whole site.

   Structure:
     1  base and reset
     2  page furniture (skip link, header, footer)
     3  layout containers
     4  typography
     5  the data plate — spec tables and the range bar (signature)
     6  navigation surfaces (type grid, brand cards, post lists)
     7  article prose
     8  motion
   ================================================================== */

/* --- 1. base ----------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: color-mix(in srgb, var(--blaze) 82%, var(--ink));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--blaze-hot);
}

:focus-visible {
  outline: 3px solid var(--blaze);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-7) 0;
}

/* --- 2. page furniture ------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blaze);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  z-index: 100;
  font-weight: 600;
}

.skip:focus {
  left: var(--sp-4);
  top: var(--sp-2);
}

.site-header {
  background: var(--loden);
  border-bottom: 3px solid var(--blaze);
}

@media (prefers-color-scheme: dark) {
  .site-header {
    background: var(--paper-sunk);
  }
}

.site-header__inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  .brand {
    color: var(--ink);
  }
}

.brand__spot {
  color: var(--blaze);
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 86%, transparent);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}

@media (prefers-color-scheme: dark) {
  .site-nav a {
    color: var(--ink-soft);
  }
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--paper);
  border-bottom-color: var(--blaze);
}

@media (prefers-color-scheme: dark) {
  .site-nav a:hover,
  .site-nav a[aria-current='page'] {
    color: var(--ink);
  }
}

.site-footer {
  margin-top: var(--sp-9);
  background: var(--loden);
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  padding: var(--sp-7) 0 var(--sp-6);
  font-size: var(--step--1);
}

@media (prefers-color-scheme: dark) {
  .site-footer {
    background: var(--paper-sunk);
    color: var(--ink-soft);
  }
}

.site-footer__inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.site-footer h2 {
  font-family: var(--font-display);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper);
  margin: 0 0 var(--sp-3);
}

@media (prefers-color-scheme: dark) {
  .site-footer h2 {
    color: var(--ink);
  }
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--blaze);
  text-decoration: underline;
}

.site-footer__legal {
  max-width: var(--wide);
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) var(--gutter) 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  font-size: var(--step--2);
}

/* --- 3. layout ---------------------------------------------------- */

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack > * + * {
  margin-top: var(--sp-5);
}

section + section {
  margin-top: var(--sp-8);
}

main {
  padding-top: var(--sp-7);
}

.breadcrumb {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--sp-2);
  color: var(--rule-strong);
}

.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--blaze);
  text-decoration: underline;
}

/* --- 4. typography ------------------------------------------------ */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
  font-weight: 600;
}

h4 {
  font-size: var(--step-1);
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blaze);
  margin: 0 0 var(--sp-2);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 54ch;
  text-wrap: pretty;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* --- 5. the data plate -------------------------------------------- *
   The signature treatment. A spec table is an equipment data plate: mono
   part numbers, a blaze rule down the left, and — where the data is a
   numeric range — a bar that shows the span so a reader who has never
   bought a bipod can see the three height classes without reading inches.
   ------------------------------------------------------------------ */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--sp-5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blaze);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}

thead th {
  background: var(--loden);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  thead th {
    background: var(--loden-wash);
    color: var(--ink);
  }
}

tbody th,
tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--loden) 4%, transparent);
}

/* The first column of a spec table is a part number. */
.spec tbody th {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.spec td {
  color: var(--ink-soft);
}

/* Figures align when they are mono. */
.spec td:nth-child(n + 2) {
  font-variant-numeric: tabular-nums;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- the range bar ------------------------------------------------ *
   CSP forbids inline styles, so the span is expressed as two classes in
   5% steps. 5% of the axis is well inside the width of the bar's own end
   cap — it is a comparison device, and the exact figures sit next to it.
   ------------------------------------------------------------------ */

.range {
  display: block;
  position: relative;
  height: 8px;
  min-width: 7rem;
  margin-top: var(--sp-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}

.range__span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brass), var(--blaze));
}

.range-from-0 { left: 0%; }
.range-from-5 { left: 5%; }
.range-from-10 { left: 10%; }
.range-from-15 { left: 15%; }
.range-from-20 { left: 20%; }
.range-from-25 { left: 25%; }
.range-from-30 { left: 30%; }
.range-from-35 { left: 35%; }
.range-from-40 { left: 40%; }
.range-from-45 { left: 45%; }
.range-from-50 { left: 50%; }
.range-from-55 { left: 55%; }
.range-from-60 { left: 60%; }
.range-from-65 { left: 65%; }
.range-from-70 { left: 70%; }
.range-from-75 { left: 75%; }
.range-from-80 { left: 80%; }

.range-len-5 { width: 5%; }
.range-len-10 { width: 10%; }
.range-len-15 { width: 15%; }
.range-len-20 { width: 20%; }
.range-len-25 { width: 25%; }
.range-len-30 { width: 30%; }
.range-len-35 { width: 35%; }
.range-len-40 { width: 40%; }
.range-len-45 { width: 45%; }
.range-len-50 { width: 50%; }
.range-len-55 { width: 55%; }
.range-len-60 { width: 60%; }
.range-len-65 { width: 65%; }
.range-len-70 { width: 70%; }
.range-len-75 { width: 75%; }
.range-len-80 { width: 80%; }
.range-len-85 { width: 85%; }
.range-len-90 { width: 90%; }
.range-len-95 { width: 95%; }
.range-len-100 { width: 100%; }

.range-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-faint);
  margin-top: var(--sp-1);
}

/* --- 6. navigation surfaces --------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-4);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--fast) var(--ease-out),
    box-shadow var(--fast) var(--ease-out),
    border-color var(--fast) var(--ease-out);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--blaze) 45%, var(--rule));
}

.card h3 {
  font-size: var(--step-1);
  color: var(--ink);
}

.card p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.45;
}

.card__count {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A brand chip is a smaller, denser card. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}

.chip:hover {
  background: var(--blaze-wash);
  border-color: var(--blaze);
  color: var(--ink);
}

.chip__n {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-faint);
}

.chip--muted {
  opacity: 0.72;
  border-style: dashed;
  cursor: default;
  font-weight: 400;
}

/* A plain list of articles. */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.list li {
  border-bottom: 1px solid var(--rule);
}

.list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--fast) var(--ease-out), padding-left var(--fast) var(--ease-out);
}

.list a:hover {
  background: var(--loden-wash);
  padding-left: var(--sp-4);
  color: var(--ink);
}

.list__title {
  font-weight: 600;
  flex: 1 1 20rem;
}

.list__meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-faint);
  white-space: nowrap;
}

/* --- hero --------------------------------------------------------- */

.hero {
  background: linear-gradient(160deg, var(--loden) 0%, var(--loden-soft) 100%);
  color: var(--paper);
  padding-block: var(--sp-8);
  border-bottom: 3px solid var(--blaze);
}

@media (prefers-color-scheme: dark) {
  .hero {
    background: linear-gradient(160deg, var(--paper-sunk) 0%, var(--paper-raised) 100%);
    color: var(--ink);
  }
}

.hero h1 {
  color: inherit;
  font-size: var(--step-5);
  max-width: 20ch;
}

.hero .lede {
  color: color-mix(in srgb, currentColor 80%, transparent);
  margin-top: var(--sp-4);
  font-size: var(--step-1);
  max-width: 52ch;
}

.hero .eyebrow {
  color: var(--blaze);
}

@media (prefers-color-scheme: dark) {
  .hero .eyebrow {
    color: var(--blaze);
  }
}

/* --- notices ------------------------------------------------------ */

.note {
  background: var(--brass-wash);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.note strong {
  color: var(--ink);
}

.note--gap {
  background: var(--loden-wash);
  border-left-color: var(--loden-soft);
}

/* --- 7. article prose --------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--sp-4);
}

.prose h2 {
  margin-top: var(--sp-7);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}

.prose h3 {
  margin-top: var(--sp-6);
}

.prose h4 {
  margin-top: var(--sp-5);
}

.prose p,
.prose li {
  text-wrap: pretty;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: var(--sp-2);
}

.prose img {
  border-radius: var(--radius);
  margin-inline: auto;
}

.prose figure {
  margin: var(--sp-6) 0;
}

.prose figcaption {
  font-size: var(--step--1);
  color: var(--ink-faint);
  text-align: center;
  margin-top: var(--sp-2);
}

.prose blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--brass);
  color: var(--ink-soft);
  font-style: italic;
}

.prose a[target='_blank']::after {
  content: '↗';
  font-size: 0.8em;
  margin-left: 0.15em;
  color: var(--ink-faint);
}

/* The rebuilt legacy pick tables carry one column; keep them narrow. */
.legacy-picks tbody th {
  font-weight: 400;
}

.article-hero {
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-6);
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
}

.article-head {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}

.article-head h1 {
  margin-bottom: var(--sp-3);
}

/* --- 8. motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .card:hover {
    transform: none;
  }
}

/* --- print --------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .breadcrumb {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}