/* Tucker Ashgrove — author site + companion page for "The Hunting Manual" */

@font-face { font-family: "Oswald"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/oswald-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Special Elite"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/special-elite-latin-400-normal.woff2") format("woff2"); }

:root {
  --ink: #2c1b0e;
  --ink-soft: #46321f;
  --bark: #6b4a2a;
  --bark-light: #a67c4e;
  --paper: #f8f0dd;
  --paper-deep: #f1e5c9;
  --paper-card: #fbf6e9;
  --blaze: #e8641b;
  --blaze-hi: #f39a33;
  --blaze-lo: #b8440f;
  --rust: #c2481a;
  --night: #1d150e;
  --head: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --type: "Special Elite", "Courier New", Courier, monospace;
  --body: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  background-color: var(--night);
  background-image:
    radial-gradient(1200px 700px at 15% 20%, rgba(96, 68, 38, .38), transparent 60%),
    radial-gradient(1000px 800px at 90% 70%, rgba(70, 50, 28, .34), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .28 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, scroll;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust); }
a:focus-visible, .btn:focus-visible { outline: 3px solid #ffd08a; outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 10px 16px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 72px 20px 78px;
  background-color: #3a2c22;
  background-image:
    linear-gradient(180deg, rgba(22, 14, 8, .50) 0%, rgba(22, 14, 8, .38) 42%, rgba(22, 14, 8, .78) 100%),
    url("img/hero.jpg");
  background-size: cover;
  background-position: center 38%;
  border-bottom: 5px solid var(--blaze);
  box-shadow: 0 2px 0 #f6c17a inset, 0 10px 30px rgba(0, 0, 0, .5);
}
.hero h1 {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(2.9rem, 8.4vw, 5.4rem);
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--blaze-hi);
  background: linear-gradient(180deg, #ffc061 0%, #f08a2b 48%, #d2561a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(40, 18, 4, .85)) drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
}
.hero .tagline {
  margin: 22px 0 0;
  font-family: var(--caps);
  font-weight: 700;
  font-size: clamp(.82rem, 2.3vw, 1.2rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #fff7e6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
.hero .jump {
  display: inline-block;
  margin-top: 30px;
  padding: 11px 22px 10px;
  font-family: var(--head);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff7e6;
  border: 2px solid rgba(255, 240, 214, .8);
  border-radius: 4px;
  background: rgba(22, 14, 8, .45);
  transition: background .15s, color .15s;
}
.hero .jump:hover { background: #fff3dc; color: var(--ink); }

/* ---------- panels ---------- */
main { max-width: 1140px; margin: 0 auto; padding: 46px 20px 30px; }
.panel {
  margin: 0 0 54px;
  padding: 50px 54px 54px;
  background: linear-gradient(135deg, var(--paper) 0%, #f6ecd4 55%, var(--paper-deep) 100%);
  border: 8px solid var(--bark);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #fdf8ea, inset 0 0 0 3px rgba(107, 74, 42, .35), 0 18px 44px rgba(0, 0, 0, .55);
}
h2 {
  margin: 0 0 22px;
  padding-bottom: 12px;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--bark-light);
}
.kicker {
  margin: 0 0 16px;
  font-family: var(--caps);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a5a2b;
}
p { margin: 0 0 16px; }

/* ---------- author ---------- */
.author { display: grid; grid-template-columns: 220px 1fr; gap: 46px; align-items: start; }
.author .plate {
  width: 220px; height: 220px; object-fit: cover;
  border: 6px solid #fffaf0; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(107, 74, 42, .5), 0 10px 22px rgba(60, 36, 14, .35);
  transform: rotate(-1.5deg);
}

/* ---------- book ---------- */
.book-wrap { display: grid; grid-template-columns: 270px 1fr; gap: 56px; align-items: start; }
.book-cover {
  width: 270px; height: auto; margin: 0 auto;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 14px 16px 28px rgba(40, 22, 6, .42), 0 0 0 1px rgba(107, 74, 42, .35), inset 6px 0 8px -6px rgba(0, 0, 0, .35);
  transform: rotate(1.2deg);
}
.book-info h2 { border: 0; padding: 0; margin-bottom: 10px; }
.subtitle { margin: 0 0 22px; font-family: var(--type); font-size: 1.04rem; line-height: 1.5; color: var(--rust); }
.pitch { margin: 0 0 16px; font-family: var(--head); font-weight: 600; font-size: 1.32rem; line-height: 1.3; letter-spacing: .01em; color: var(--ink); }
.inside { margin: 22px 0 0; font-family: var(--caps); font-weight: 700; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; color: #8a5a2b; }
.tracks { list-style: none; margin: 12px 0 30px; padding: 0; }
.tracks li {
  position: relative; margin: 0 0 12px; padding-left: 38px;
}
.tracks li::before {
  content: ""; position: absolute; left: 4px; top: .28em; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23c2481a'%3E%3Cpath d='M11 2C7.6 5.4 6 9.3 6.4 13.2c.3 2.6 1.9 4 3.6 3.6 1-.3 1.4-1.2 1.3-2.6z'/%3E%3Cpath d='M13 2c3.4 3.4 5 7.3 4.6 11.2-.3 2.6-1.9 4-3.6 3.6-1-.3-1.4-1.2-1.3-2.6z'/%3E%3Ccircle cx='8.3' cy='20.3' r='1.7'/%3E%3Ccircle cx='15.7' cy='20.3' r='1.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.tracks strong { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px 13px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #f08f31 0%, #dd6a1f 55%, #c9521b 100%);
  border: 0;
  border-bottom: 4px solid #8f3a10;
  border-radius: 5px;
  box-shadow: 0 6px 14px rgba(90, 40, 8, .35);
  text-shadow: 0 1px 0 rgba(90, 30, 0, .6);
  transition: transform .12s, filter .12s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.btn[aria-disabled="true"] {
  background: linear-gradient(180deg, #a08a6e, #85705a); border-bottom-color: #5d4b38;
  box-shadow: none; cursor: default; pointer-events: none;
}
.buy-note { margin: 12px 0 0; font-family: var(--sans); font-size: .86rem; color: #7a6248; }

/* ---------- companion ---------- */
.companion h2 { text-align: center; }
.lead { max-width: 760px; margin: 0 auto 34px; text-align: center; font-family: var(--sans); font-size: 1.08rem; color: var(--ink-soft); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.res {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 28px 28px;
  background: var(--paper-card);
  border: 2px solid #7b5a36;
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(70, 44, 18, .22);
}
.res svg.ico { width: 52px; height: 52px; margin-bottom: 16px; }
.res h3 { margin: 0 0 12px; font-family: var(--head); font-weight: 700; font-size: 1.38rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.res p { font-size: .98rem; line-height: 1.5; }
.res .meta { margin: auto 0 14px; padding-top: 4px; font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8a6a45; }
.res .btn { width: 100%; }
.res.wide { grid-column: 1 / -1; }
.res.wide .btn { max-width: 420px; }
.cards-list {
  list-style: none; margin: 22px 0 0; padding: 20px 0 0; width: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 30px; text-align: left;
  border-top: 1px solid #d9c6a0;
  font-family: var(--sans); font-size: .95rem;
}
.cards-list a { display: flex; gap: 12px; align-items: baseline; padding: 6px 4px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted #c9b48c; }
.cards-list a:hover { color: var(--rust); }
.cards-list .num { flex: 0 0 2.1em; font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: var(--blaze); }
.cards-list .dl { margin-left: auto; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #8a6a45; white-space: nowrap; }
.cards-title { margin: 22px 0 -8px; font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #8a6a45; }

.howto {
  margin: 38px 0 0; padding: 24px 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px;
  background: #f3e8cc; border-left: 6px solid var(--blaze); border-radius: 2px;
  font-size: .98rem;
}
.howto h3 { grid-column: 1 / -1; margin: 0 0 4px; font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.howto p { margin: 0; }

/* ---------- footer ---------- */
footer { padding: 6px 20px 54px; text-align: center; font-family: var(--sans); font-size: .86rem; line-height: 1.7; color: #c9b594; }
footer p { margin: 0 0 6px; }
footer .fine { font-size: .78rem; color: #9c8a70; max-width: 720px; margin: 0 auto; }

/* ---------- 404 ---------- */
.lost { max-width: 720px; margin: 70px auto; text-align: center; }
.lost .panel { padding: 50px 34px; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .hero { min-height: 360px; padding: 56px 16px 60px; background-image:
    linear-gradient(180deg, rgba(22, 14, 8, .52) 0%, rgba(22, 14, 8, .40) 42%, rgba(22, 14, 8, .80) 100%),
    url("img/hero-900.jpg"); background-position: 70% 40%; }
  main { padding: 30px 12px 20px; }
  .panel { margin-bottom: 34px; padding: 32px 22px 36px; border-width: 6px; }
  .author, .book-wrap { grid-template-columns: 1fr; gap: 28px; }
  .author .plate { margin: 0 auto; width: 190px; height: 190px; }
  .book-cover { width: 230px; }
  .pitch { font-size: 1.2rem; }
  .grid { grid-template-columns: 1fr; gap: 22px; }
  .cards-list { grid-template-columns: 1fr; }
  .howto { grid-template-columns: 1fr; padding: 20px; }
  .book-info .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .hero .jump { transition: none; }
}
@media print {
  body { background: #fff; }
  .hero .jump, .btn { display: none; }
}

.btn-row { margin: 28px 0 0; }