/* The Art of Hunting Humans — huntinghumans.com */
:root {
  --orange: #F26922;
  --orange-dark: #d6540f;
  --black: #101010;
  --ink: #1c1c1c;
  --paper: #ffffff;
  --grey: #6b6b6b;
  --light: #f6f4f1;
  --max: 1080px;
  --maxr: 720px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #fbf9f6;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
.nav {
  background: var(--black);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff !important;
}
.brand:hover { text-decoration: none; }
.brand .hunting { color: var(--orange); }
.brand svg { display: block; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
}
.nav-links a.btn-buy {
  background: var(--orange);
  color: #fff;
  padding: 8px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.nav-links a.btn-buy:hover { background: var(--orange-dark); text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  background: var(--black);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  top: -18%;
  right: -6%;
  width: 46%;
  padding-top: 46%;
  background: var(--orange);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: .95;
}
.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  padding-top: 84px;
  padding-bottom: 84px;
}
.hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: .95;
  letter-spacing: .01em;
}
.hero h1 .l1 { display: block; color: #fff; font-weight: 600; font-size: .55em; text-transform: none; }
.hero h1 .l2 { display: block; color: var(--orange); }
.hero h1 .l3 { display: block; color: #fff; }
.hero .tagline {
  margin-top: 22px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #e8e8e8;
  max-width: 30em;
}
.hero .warning {
  margin-top: 18px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--orange);
  font-size: 1.05rem;
}
.hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); text-decoration: none; }
.btn-ghost { border: 2px solid #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--black); text-decoration: none; }
.hero-mark { display: flex; justify-content: center; }
.hero-mark svg { width: min(320px, 70vw); height: auto; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section.alt { background: var(--light); }
.kicker {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--orange-dark);
  font-size: .95rem;
}
.section h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2.4rem;
  line-height: 1.05;
  margin: 6px 0 24px;
}
.section .lead { font-size: 1.15rem; max-width: 46em; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.about p + p { margin-top: 14px; }
.pull {
  border-left: 5px solid var(--orange);
  padding: 6px 0 6px 18px;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  margin: 22px 0;
}
.bullets { list-style: none; margin-top: 18px; }
.bullets li {
  padding-left: 34px;
  position: relative;
  margin-bottom: 14px;
  font-weight: 500;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Article cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 10px; }
.card {
  background: #fff;
  border: 1px solid #e6e2dc;
  border-top: 5px solid var(--orange);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.09); text-decoration: none; }
.card .series {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .85rem;
  color: var(--grey);
}
.card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.55rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--black);
  margin: 8px 0 10px;
}
.card p { color: #444; font-size: .98rem; flex: 1; }
.card .read {
  margin-top: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--orange-dark);
  font-size: .95rem;
}
.card.feature { grid-column: 1 / -1; background: var(--black); border-color: var(--black); }
.card.feature h3 { color: #fff; font-size: 1.9rem; }
.card.feature p { color: #ccc; }

/* ---------- Buy strip ---------- */
.buy-strip { background: var(--orange); color: #fff; }
.buy-strip .wrap {
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.buy-strip h2 {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1.05;
}
.buy-strip .formats { display: flex; gap: 12px; flex-wrap: wrap; }
.buy-strip .btn { background: var(--black); color: #fff; }
.buy-strip .btn:hover { background: #000; text-decoration: none; }

/* ---------- Article page ---------- */
.article-hero { background: var(--black); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.article-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 38%;
  padding-top: 38%;
  background: var(--orange);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.article-hero .wrap { position: relative; z-index: 2; max-width: var(--maxr); }
.article-hero .series {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--orange);
}
.article-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.0;
  margin-top: 10px;
}
.article-hero .meta { margin-top: 14px; color: #bbb; font-size: .95rem; }

.article-body { max-width: var(--maxr); margin: 0 auto; padding: 56px 24px 40px; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.13rem; line-height: 1.75; }
.article-body p { margin-bottom: 1.15em; }
.article-body em { font-style: italic; }
.article-body h2 {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 1.8rem;
  line-height: 1.1;
  margin: 1.6em 0 .6em;
  color: var(--black);
}
.article-body h3 {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 1.35rem;
  margin: 1.5em 0 .5em;
  color: var(--black);
}
.article-body ul, .article-body ol { margin: 0 0 1.15em 1.4em; }
.article-body li { margin-bottom: .5em; }
.article-body blockquote {
  border-left: 5px solid var(--orange);
  padding: 4px 0 4px 20px;
  margin: 1.4em 0;
  font-style: italic;
  color: #333;
}
.article-body .commandment {
  margin: 2em 0 0;
}
.article-body .commandment h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 .4em;
}
.article-body .commandment h3 .num {
  font-family: 'Barlow Condensed', sans-serif;
  color: var(--orange);
  font-size: 1.6em;
  line-height: 1;
}
.article-body .fig { margin: 2em auto; text-align: center; }
.article-body .fig svg { max-width: 100%; height: auto; }
.article-body .fig figcaption {
  font-family: 'Barlow', sans-serif;
  font-size: .9rem;
  color: var(--grey);
  margin-top: 10px;
}
.article-body .divider {
  border: 0;
  height: 4px;
  width: 64px;
  background: var(--orange);
  margin: 2.4em auto;
}

.article-next { max-width: var(--maxr); margin: 0 auto; padding: 0 24px 72px; }
.next-box {
  display: block;
  background: var(--black);
  color: #fff;
  padding: 26px 28px;
  border-left: 6px solid var(--orange);
}
.next-box:hover { text-decoration: none; background: #000; }
.next-box .label {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--orange);
  font-size: .9rem;
}
.next-box .title {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.1;
  margin-top: 6px;
}

/* ---------- Footer ---------- */
footer { background: var(--black); color: #999; padding: 44px 0; font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
footer a { color: #ddd; }
footer .foot-brand {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  font-size: 1.05rem;
}
footer .foot-brand span { color: var(--orange); }

@media (max-width: 800px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 60px; padding-bottom: 60px; }
  .hero-mark { order: -1; }
  .hero-mark svg { width: 150px; }
  .two-col { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .nav-links { gap: 14px; }
  .nav-links .hide-m { display: none; }
}

/* ---------- Home: article-first layout ---------- */
.home-hero { background: #fff; padding: 56px 0 8px; }
.home-hero .wrap { max-width: 1160px; }
.home-hero .hero-img { text-align: center; }
.home-hero .hero-img img { max-width: min(560px, 92vw); height: auto; }
.home-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  text-transform: uppercase;
  margin-top: 30px;
  max-width: 21em;
}
.home-hero h1 .accent { color: var(--orange); }
.home-hero .subtitle {
  margin-top: 10px;
  font-size: 1.2rem;
  color: var(--grey);
  font-weight: 500;
  letter-spacing: .02em;
}
.home-grid {
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 24px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}
.home-grid .article-body { max-width: none; margin: 0; padding: 0; }
.sidebar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 26px; }
.side-box { border: 1px solid #e6e2dc; border-top: 5px solid var(--orange); padding: 22px; background: #fff; }
.side-box .kicker { display: block; margin-bottom: 12px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { margin: 0; }
.side-list a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #eee7df;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}
.side-list li:last-child a { border-bottom: 0; }
.side-list a:hover { color: var(--orange-dark); text-decoration: none; }
.side-list .s { display: block; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--grey); font-weight: 700; }
.side-book { background: var(--black); color: #ddd; border: 0; border-top: 5px solid var(--orange); padding: 22px; }
.side-book img.cov { width: 150px; height: auto; display: block; margin: 6px auto 14px; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.side-book p { font-size: .95rem; line-height: 1.5; }
.side-book .formats { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.side-book .formats a {
  display: block; text-align: center;
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  padding: 9px 10px; font-size: 1rem;
}
.side-book .formats .buy { background: var(--orange); color: #fff; }
.side-book .formats .buy:hover { background: var(--orange-dark); text-decoration: none; }
.side-book .formats .alt2 { border: 1.5px solid #555; color: #eee; }
.side-book .formats .alt2:hover { border-color: #fff; text-decoration: none; }
.side-deer { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid #333; }
.side-deer img { width: 74px; height: auto; }
.side-deer p { font-size: .85rem; color: #aaa; }
.article-body .fig img { max-width: 100%; height: auto; }
.article-body .fig.small img { max-width: min(340px, 80vw); }
.article-body .fig.medium img { max-width: min(460px, 88vw); }
@media (max-width: 960px) {
  .home-grid { grid-template-columns: 1fr; gap: 34px; }
  .sidebar { position: static; }
}


/* ---------- Design polish v3 ---------- */
::selection { background: var(--orange); color: #fff; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.btn, .nav-links a.btn-buy, .side-book .formats a { transition: background .15s ease, border-color .15s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }

/* Home hero: centered editorial */
.home-hero { background: transparent; text-align: center; padding: 60px 0 14px; }
.home-hero .hero-img img { box-shadow: 0 14px 40px rgba(30,15,0,.14); }
.home-hero h1 { margin: 34px auto 0; max-width: 19em; }
.home-hero .subtitle { max-width: 40em; margin: 12px auto 0; }
.home-hero .rule { width: 64px; height: 4px; background: var(--orange); margin: 26px auto 0; }

/* Lead paragraph */
.article-body .lead-p { font-size: 1.26rem; line-height: 1.65; color: #2c2c2c; }

/* Commandments as numbered cards */
.article-body .commandment {
  background: #fff;
  border: 1px solid #ece5db;
  border-left: 5px solid var(--orange);
  box-shadow: 0 2px 12px rgba(30,15,0,.05);
  padding: 22px 28px 12px 100px;
  position: relative;
  margin: 24px 0 0;
}
.article-body .commandment h3 { display: block; margin: 0 0 .5em; }
.article-body .commandment h3 .num {
  position: absolute;
  left: 26px;
  top: 14px;
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
}
.article-body .commandment .fig { margin: 1.2em auto; }
@media (max-width: 620px) {
  .article-body .commandment { padding: 18px 20px 8px 20px; }
  .article-body .commandment h3 { padding-left: 0; display: flex; align-items: baseline; gap: 10px; }
  .article-body .commandment h3 .num { position: static; font-size: 1.9rem; }
}

/* Quotes and figures on warm paper */
.article-body blockquote {
  background: #fff;
  border: 1px solid #ece5db;
  border-left: 5px solid var(--orange);
  padding: 14px 22px;
  box-shadow: 0 2px 12px rgba(30,15,0,.04);
}
.article-body .fig img { box-shadow: 0 6px 22px rgba(30,15,0,.10); }
.article-body .fig figcaption { font-size: .88rem; letter-spacing: .01em; }

/* Sidebar refinements */
.side-box { box-shadow: 0 2px 12px rgba(30,15,0,.05); }
.side-book { box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.sidebar { top: 88px; }

/* Headings rhythm */
.article-body h2 { margin-top: 2em; letter-spacing: .015em; }
.article-body h2::after { content: ""; display: block; width: 44px; height: 3px; background: var(--orange); margin-top: 8px; }
.article-hero .series { letter-spacing: .18em; }

/* Footer */
footer { border-top: 4px solid var(--orange); }

/* Mobile nav fix */
@media (max-width: 600px) {
  .brand { gap: 8px; }
  .brand span { font-size: .92rem; white-space: nowrap; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: .88rem; }
  .nav-links a.btn-buy { padding: 6px 12px; font-size: .92rem; white-space: nowrap; }
  .home-hero h1 { font-size: 1.75rem; }
}
@media (max-width: 600px) {
  .brand .art { display: none; }
}
.nav .wrap { gap: 16px; }

/* ---------- Jokes section ---------- */
.jokes { border-top: 1px solid #ece5db; padding: 64px 0 76px; }
.joke-grid { columns: 2; column-gap: 24px; margin-top: 26px; max-width: 900px; }
.joke {
  break-inside: avoid;
  margin: 0 0 24px;
  background: #fff;
  border: 1px solid #ece5db;
  border-top: 5px solid var(--orange);
  box-shadow: 0 2px 12px rgba(30,15,0,.05);
  padding: 14px;
}
.joke img { width: 100%; height: auto; display: block; }
.joke.deer-joke img { width: 62%; margin: 12px auto; }
.joke .q {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 8px 8px 0;
}
.joke .q strong, .joke .q .hl { color: var(--orange); }
.joke .a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--grey);
  text-align: right;
  padding: 0 8px 6px;
}
@media (max-width: 720px) { .joke-grid { columns: 1; } }

/* ---------- Reviews page ---------- */
.ratings-strip { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 2.4em; }
.rate {
  flex: 1 1 180px;
  background: #fff;
  border: 1px solid #ece5db;
  border-top: 5px solid var(--orange);
  box-shadow: 0 2px 12px rgba(30,15,0,.05);
  padding: 16px 18px;
  text-align: center;
  color: var(--ink);
}
.rate:hover { text-decoration: none; box-shadow: 0 8px 22px rgba(30,15,0,.10); }
.rate .stars { display: block; color: var(--orange); font-size: 1.5rem; letter-spacing: .06em; }
.rate .src { display: block; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: .92rem; color: var(--grey); margin-top: 4px; }
.ed-review {
  background: #fff;
  border: 1px solid #ece5db;
  border-left: 5px solid var(--orange);
  box-shadow: 0 2px 12px rgba(30,15,0,.05);
  padding: 22px 26px;
  margin: 0 0 20px;
}
.ed-review .ed-src {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--orange-dark);
  font-size: .95rem;
  margin-bottom: .6em;
}
.ed-review .ed-verdict { font-weight: 600; font-style: italic; margin-top: .6em; margin-bottom: 0; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
.quote-grid img { width: 100%; height: auto; border: 1px solid #ece5db; box-shadow: 0 2px 12px rgba(30,15,0,.05); }
@media (max-width: 720px) { .quote-grid { grid-template-columns: 1fr; } }

/* side-book mini ratings */
.side-rate { display: flex; justify-content: center; gap: 14px; margin: 10px 0 2px; font-size: .85rem; color: #bbb; }
.side-rate b { color: var(--orange); font-weight: 700; letter-spacing: .04em; }

/* Keep-reading band */
.keep-reading { background: var(--black); color: #fff; padding: 64px 0 70px; }
.keep-reading .kicker { color: var(--orange); }
.keep-reading h2 { color: #fff; }
.keep-reading .lead { color: #bbb; }
.keep-reading .cards { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .keep-reading .cards { grid-template-columns: 1fr; } }
.keep-reading h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2.4rem;
  line-height: 1.05;
  margin: 6px 0 18px;
}