/* Tag Canyon tall photo heroes — Nov 14, 2026
   Full-width, photo-led heroes for the homepage, hunt kits and hubs.
   Mobile 60–70vh so the fold is not pushed too far down.
   Desktop ~70vh. Short headline + one button sit on the photo.
   Do not use monospace. Body copy stays ~18px off the photo. */

/* ---------- Homepage (.ft-hero) ---------- */
html body .ft-hero{
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  overflow:hidden !important;
  min-height:65vh !important;
}
@media (min-width:700px){
  html body .ft-hero{min-height:max(560px, 72vh) !important}
}
html body .ft-hero-media,
html body .ft-hero-media picture,
html body .ft-hero-media img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
/* Breath-steam elk (sp-elk-sage): full body, steam plume, sky. Not the old right-tight crop. */
html body .ft-hero-media img,
html body .ft-hero-media img.fp-sp-elk-sage{
  object-position:50% 42% !important;
}
html body .ft-hero-shade{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(180deg, rgba(18,26,21,.12) 0%, rgba(18,26,21,.18) 42%, rgba(18,26,21,.62) 100%),
    linear-gradient(90deg, rgba(18,26,21,.38) 0%, rgba(18,26,21,.12) 42%, rgba(18,26,21,.04) 100%) !important;
}
html body .ft-hero-in{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  flex:1 1 auto !important;
  padding:28px 22px 32px !important;
  box-sizing:border-box !important;
}
html body .ft-hero-copy{max-width:36rem !important}
html body .ft-hero-sub{display:block !important; max-width:40ch !important; font-size:17px !important; line-height:1.45 !important; color:#efe8da !important; margin:0 0 16px !important}
@media (max-width:640px){
  html body .ft-hero{min-height:65vh !important}
  html body .ft-hero-in{padding:20px 16px 24px !important}
  html body .ft-hero-sub{font-size:16px !important; margin-bottom:14px !important}
}

/* Dial sits immediately under the hero, not on the photo */
html body .ft-dial-wrap{
  background:var(--ft-bone, #f4efe4);
  padding:16px 0 8px;
}
html body .ft-dial-wrap .ft-dial{
  margin:0 auto !important;
  max-width:1180px !important;
}

/* One clear button on the photo */
html body a.hero-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;
  padding:0 22px !important;
  margin:4px 0 0 !important;
  box-sizing:border-box !important;
  font-family:var(--ft-head, "Source Serif 4", Georgia, serif) !important;
  font-weight:800 !important;
  font-size:17px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  color:#1d1a16 !important;
  background:var(--ft-kraft, #C9A46A) !important;
  border:0 !important;
  border-radius:8px !important;
  text-decoration:none !important;
  box-shadow:0 2px 10px rgba(0,0,0,.28) !important;
}
html body a.hero-cta:hover,
html body a.hero-cta:focus-visible{
  background:#e0c189 !important;
  color:#1d1a16 !important;
}

/* ---------- Kits and gear hubs (.gp-hero) ---------- */
html body .gp-hero{
  display:grid !important;
  grid-template-columns:100% !important;
  position:relative !important;
  overflow:hidden !important;
  background:var(--ft-timber, #1E2A22) !important;
  min-height:65vh !important;
}
@media (min-width:700px){
  html body .gp-hero{min-height:max(520px, 70vh) !important}
}
html body .gp-hero > .gp-hero-photo{
  grid-area:1/1 !important;
  position:relative !important;
  min-height:65vh !important;
  width:100% !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:var(--ft-timber, #1E2A22) !important;
}
@media (min-width:700px){
  html body .gp-hero > .gp-hero-photo{min-height:max(520px, 70vh) !important}
}
html body .gp-hero > .gp-hero-photo picture,
html body .gp-hero > .gp-hero-photo img,
html body .gp-hero img.gp-hero-image{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:50% 45% !important;
  contain:none !important;
  grid-area:auto !important;
}
/* Current homepage elk, now on the elk kit: show the whole bull and grass, not a tight head crop */
html body .gp-hero img.home-elk-right-image{
  object-position:52% 40% !important;
}
html body .gp-hero > .gp-hero-text,
html body .gp-hero > .wrap.gp-hero-text{
  grid-area:1/1 !important;
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  text-align:left !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  padding:36px 22px 32px !important;
  background:
    linear-gradient(180deg, rgba(21,23,26,.04) 0%, rgba(21,23,26,.10) 38%, rgba(21,23,26,.66) 100%) !important;
}
html body .gp-hero-text h1{
  color:#fff !important;
  text-align:left !important;
  margin:8px 0 14px !important;
  text-shadow:0 2px 18px rgba(0,0,0,.45) !important;
}
html body .gp-hero-text h1::after{margin-left:0 !important; margin-right:auto !important}
html body .gp-hero-text .s12-crumbs,
html body .gp-hero-text .s12-crumbs a,
html body .gp-hero-text .s12-crumbs span{
  color:#efe8da !important;
}
html body .gp-hero > .gp-hero-credit,
html body .gp-hero > .photo-cap{
  grid-area:2/1 !important;
  position:relative !important;
}
html body .gp-hero-lead{
  padding:18px 0 8px;
}
html body .gp-hero-lead > p{
  max-width:46rem;
  font-size:18px;
  line-height:1.55;
  margin:0 0 12px;
}
html body .gp-hero-lead > p.h1-disc{
  font-size:15px;
  color:#5c5a54;
}
@media (max-width:640px){
  html body .gp-hero,
  html body .gp-hero > .gp-hero-photo{min-height:65vh !important}
  html body .gp-hero > .gp-hero-text,
  html body .gp-hero > .wrap.gp-hero-text{padding:22px 16px 24px !important}
}

/* ---------- State / species hubs (.phero) : keep content from sitting under 420px on mobile ---------- */
@media (max-width:699px){
  html body section.phero[class] .phero-media{
    min-height:65vh !important;
    height:65vh !important;
  }
}

/* Override the brown-bear contain layout so that kit matches the others */
html body.pack-ak-bb-hero .gp-hero,
html body.pack-ak-bb-hero .gp-hero > .gp-hero-photo{
  display:grid !important;
  overflow:hidden !important;
  min-height:65vh !important;
}
html body.pack-ak-bb-hero .gp-hero-photo picture,
html body.pack-ak-bb-hero .gp-hero-photo img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
}

/* Keep crumbs, then title, then the one button, at the bottom of the photo */
html body .gp-hero-text .s12-crumbs{order:1 !important}
html body .gp-hero-text h1{order:2 !important}
html body .gp-hero-text a.hero-cta{order:3 !important; margin-top:12px !important}

/* Elk kit: on a tall mobile crop, shift toward the bull so the rack stays in frame.
   Desktop stays near center so the whole animal and grass show (not the old tight zoom). */
@media (max-width:699px){
  html body .gp-hero img.home-elk-right-image{object-position:75% 38% !important}
}

/* Photo credit lines must wrap instead of spilling past the viewport */
html body .photo-cap,
html body figcaption.photo-cap,
html body .gp-hero-credit{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  box-sizing:border-box !important;
}
html body .photo-cap,
html body figcaption.photo-cap,
html body .photo-cap.card-cap,
html body .gp-hero-credit{
  white-space:normal !important;
}

/* ------------------------------------------------------------------
   Nov 14 p.m.: never crop racks/horns/antlers; never cover the animal
   with type. Crop from the bottom (legs/grass). Text sits beside empty
   ground or, on mobile and whenever the animal fills the frame, below
   the photo.
   ------------------------------------------------------------------ */

/* Pin every hero image to the top of the frame */
html body .ft-hero-media img,
html body .ft-hero-media img.fp-sp-elk-sage,
html body .gp-hero > .gp-hero-photo img,
html body .gp-hero img.gp-hero-image,
html body .gp-hero img.home-elk-right-image,
html body section.phero .phero-img img,
html body section.phero img[class^="fp-"],
html body.pack-ak-bb-hero .gp-hero-photo img{
  object-fit:cover !important;
  object-position:50% 0% !important;
}
/* Elk kit: bull sits to the right; keep the full rack at the top */
html body .gp-hero img.home-elk-right-image{
  object-position:62% 0% !important;
}
/* Homepage sage elk: keep the bull and steam in frame, rack at the top */
html body .ft-hero-media img.fp-sp-elk-sage{
  object-position:58% 0% !important;
}

/* ----- Kits and hubs: photo band, then text underneath ----- */
html body .gp-hero{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  background:var(--ft-timber, #1E2A22) !important;
}
html body .gp-hero > .gp-hero-photo{
  position:relative !important;
  grid-area:auto !important;
  width:100% !important;
  min-height:62vh !important;
  height:62vh !important;
  overflow:hidden !important;
}
@media (min-width:700px){
  html body .gp-hero > .gp-hero-photo{
    min-height:max(480px, 62vh) !important;
    height:max(480px, 62vh) !important;
  }
}
html body .gp-hero > .gp-hero-photo picture,
html body .gp-hero > .gp-hero-photo img,
html body .gp-hero img.gp-hero-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
html body .gp-hero > .gp-hero-text,
html body .gp-hero > .wrap.gp-hero-text{
  grid-area:auto !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  width:100% !important;
  margin:0 !important;
  padding:22px 22px 20px !important;
  background:var(--ft-timber, #1E2A22) !important;
  color:#fff !important;
}
html body .gp-hero-text h1,
html body .gp-hero-text .s12-crumbs,
html body .gp-hero-text .s12-crumbs a,
html body .gp-hero-text .s12-crumbs span{
  color:#fff !important;
  text-shadow:none !important;
}
@media (max-width:640px){
  html body .gp-hero > .gp-hero-photo{
    min-height:62vh !important;
    height:62vh !important;
  }
  html body .gp-hero > .gp-hero-text,
  html body .gp-hero > .wrap.gp-hero-text{padding:18px 16px 16px !important}
}

/* ----- Homepage: tall photo, then headline and button under it ----- */
html body .ft-hero{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
html body .ft-hero-media{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:62vh !important;
  height:62vh !important;
  overflow:hidden !important;
}
@media (min-width:700px){
  html body .ft-hero-media{
    min-height:max(480px, 64vh) !important;
    height:max(480px, 64vh) !important;
  }
}
html body .ft-hero-media picture,
html body .ft-hero-media img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
html body .ft-hero-shade{
  /* keep a light bottom edge only so the credit stays readable; do not hide the bull */
  background:linear-gradient(180deg, transparent 70%, rgba(18,26,21,.35) 100%) !important;
}
html body .ft-hero-in{
  position:relative !important;
  z-index:2 !important;
  inset:auto !important;
  flex:0 0 auto !important;
  justify-content:flex-start !important;
  padding:22px 22px 18px !important;
  background:var(--ft-timber, #1E2A22) !important;
}
html body .ft-hero-copy,
html body .ft-hero h1,
html body .ft-hero-sub,
html body .ft-kicker,
html body .ft-kicker a{
  color:#fff !important;
  text-shadow:none !important;
}
@media (max-width:699px){
  html body .ft-hero-media{min-height:62vh !important; height:62vh !important}
  html body .ft-hero-in{padding:18px 16px 16px !important}
}

/* ----- State / species phero: photo band, type below ----- */
html body section.phero[class]{
  display:flex !important;
  flex-direction:column !important;
}
html body section.phero[class] .phero-media{
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  justify-content:flex-start !important;
}
html body section.phero[class] .phero-img{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-height:62vh !important;
  height:62vh !important;
  overflow:hidden !important;
}
@media (min-width:700px){
  html body section.phero[class] .phero-img{
    min-height:max(480px, 62vh) !important;
    height:max(480px, 62vh) !important;
  }
}
html body section.phero[class] .phero-img img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
html body section.phero[class] .phero-shade{
  display:none !important;
}
html body section.phero[class] .phero-text,
html body section.phero[class] .wrap.phero-text{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  margin-top:0 !important;
  padding:22px 22px 18px !important;
  background:var(--ft-timber, #1E2A22) !important;
  color:#fff !important;
  box-sizing:border-box !important;
}
html body section.phero[class] .phero-text h1,
html body section.phero[class] .phero-text p,
html body section.phero[class] .phero-eyebrow{
  color:#fff !important;
  text-shadow:none !important;
}
html body section.phero[class] .phero-cue{display:none !important}
@media (max-width:699px){
  html body section.phero[class] .phero-img{
    min-height:62vh !important;
    height:62vh !important;
  }
  html body section.phero[class] .phero-media{
    min-height:0 !important;
    height:auto !important;
  }
  html body section.phero[class] .phero-text,
  html body section.phero[class] .wrap.phero-text{padding:18px 16px 16px !important}
}

/* Beat calmnav :not(#cn-a) so state/species type sits below the photo, not on the animal.
   Keep object-position at the top so racks and horns stay in frame. */
html body section.phero[class]:not(#cn-a){
  display:flex !important;
  flex-direction:column !important;
}
html body section.phero[class]:not(#cn-a) .phero-media{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  position:relative !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
html body section.phero[class]:not(#cn-a) .phero-img{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  min-height:62vh !important;
  height:62vh !important;
  overflow:hidden !important;
}
@media (min-width:700px){
  html body section.phero[class]:not(#cn-a) .phero-img{
    min-height:max(480px, 62vh) !important;
    height:max(480px, 62vh) !important;
  }
}
html body section.phero[class]:not(#cn-a) .phero-img img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
html body section.phero[class]:not(#cn-a) .phero-shade{display:none !important}
html body section.phero[class]:not(#cn-a) .phero-text,
html body section.phero[class]:not(#cn-a) .wrap.phero-text{
  position:relative !important;
  z-index:2 !important;
  inset:auto !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:22px 22px 18px !important;
  box-sizing:border-box !important;
  background:var(--ft-timber, #1E2A22) !important;
  color:#fff !important;
}
html body section.phero[class]:not(#cn-a) .phero-text h1,
html body section.phero[class]:not(#cn-a) .phero-text p,
html body section.phero[class]:not(#cn-a) .phero-text .lede,
html body section.phero[class]:not(#cn-a) .phero-eyebrow{
  color:#fff !important;
  text-shadow:none !important;
  font-family:inherit !important; /* no monospace in the hero */
}
html body section.phero[class]:not(#cn-a) .phero-cue{display:none !important}
@media (max-width:699px){
  html body section.phero[class]:not(#cn-a) .phero-img{
    min-height:62vh !important;
    height:62vh !important;
  }
  html body section.phero[class]:not(#cn-a) .phero-text,
  html body section.phero[class]:not(#cn-a) .wrap.phero-text{padding:18px 16px 16px !important}
  html body section.phero[class]:not(#cn-a) .phero-text{padding:18px 16px 16px !important}
}

/* Elk kit: on a tall phone crop, keep the bull and full rack in the frame (crop empty grass to the left). */
@media (max-width:699px){
  html body .gp-hero img.home-elk-right-image{object-position:84% 0% !important}
}


/* ------------------------------------------------------------------
   Homepage special: home-elk-right-20261107 left-of-animal copy
   Text and buttons sit to the LEFT of the bull. Full rack at every
   width. Crop from the bottom only (never the rack, never the sides
   when that would cut the animal). This overrides the default
   "headline under the photo" homepage rule for this hero only.
   ------------------------------------------------------------------ */
html body .ft-hero.ft-hero-left{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  min-height:0 !important;
}
html body .ft-hero.ft-hero-left .ft-hero-media{
  grid-row:1 !important;
  grid-column:1 !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1600 / 850 !important;
  max-height:72vh !important;
  overflow:hidden !important;
}
html body .ft-hero.ft-hero-left .ft-hero-media picture,
html body .ft-hero.ft-hero-left .ft-hero-media img,
html body .ft-hero.ft-hero-left .ft-hero-media img.fp-home-elk-right,
html body .ft-hero.ft-hero-left .ft-hero-media img.home-elk-right-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:50% 0% !important;
}
html body .ft-hero.ft-hero-left .ft-hero-shade{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg, rgba(18,26,21,.66) 0%, rgba(18,26,21,.40) 28%, rgba(18,26,21,.14) 42%, rgba(18,26,21,0) 56%),
    linear-gradient(180deg, transparent 78%, rgba(18,26,21,.22) 100%) !important;
  pointer-events:none !important;
}
html body .ft-hero.ft-hero-left .ft-hero-in{
  grid-row:1 !important;
  grid-column:1 !important;
  position:relative !important;
  z-index:2 !important;
  inset:auto !important;
  align-self:center !important;
  justify-self:start !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  flex:0 0 auto !important;
  width:min(38%, 28rem) !important;
  max-width:38% !important;
  margin:0 !important;
  padding:28px 16px 28px 32px !important;
  background:transparent !important;
  box-sizing:border-box !important;
}
html body .ft-hero.ft-hero-left .ft-hero-copy{
  max-width:100% !important;
}
html body .ft-hero.ft-hero-left .ft-hero-copy,
html body .ft-hero.ft-hero-left .ft-hero-copy h1,
html body .ft-hero.ft-hero-left .ft-hero-copy .ft-hero-sub,
html body .ft-hero.ft-hero-left .ft-kicker,
html body .ft-hero.ft-hero-left .ft-kicker a{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(18,26,21,.55) !important;
}
html body .ft-hero.ft-hero-left .ft-hero-sub{
  max-width:36ch !important;
}
html body .ft-hero.ft-hero-left .ft-hero-cap{
  grid-row:2 !important;
  grid-column:1 !important;
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  padding:8px 22px 10px !important;
  background:var(--ft-timber, #1E2A22) !important;
  color:#efe8da !important;
}
html body .ft-hero.ft-hero-left .ft-dtag{
  max-width:100% !important;
  box-sizing:border-box !important;
  flex-wrap:wrap !important;
}
@media (max-width:899px){
  html body .ft-hero.ft-hero-left .ft-hero-in{
    width:min(36%, 18rem) !important;
    max-width:36% !important;
    padding:16px 10px 16px 18px !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-copy h1{
    font-size:clamp(1.15rem, 4.4vw, 1.7rem) !important;
    line-height:1.12 !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-sub{display:none !important}
  html body .ft-hero.ft-hero-left .ft-kicker{font-size:11px !important; letter-spacing:.04em !important; max-width:100% !important}
  html body .ft-hero.ft-hero-left .hero-cta{padding:0 14px !important; font-size:15px !important}
  html body .ft-hero.ft-hero-left .ft-dtag{font-size:12px !important; padding-right:10px !important}
}
/* Between phone and desktop, the Alaska chip is too wide to sit left of the bull. Stack copy under the photo. */
@media (min-width:521px) and (max-width:899px){
  html body .ft-hero.ft-hero-left{
    grid-template-rows:auto auto auto !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-media{
    max-height:none !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-in{
    grid-row:2 !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
    padding:18px 22px 16px !important;
    background:var(--ft-timber, #1E2A22) !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-copy,
  html body .ft-hero.ft-hero-left .ft-hero-copy h1,
  html body .ft-hero.ft-hero-left .ft-hero-copy .ft-hero-sub,
  html body .ft-hero.ft-hero-left .ft-kicker,
  html body .ft-hero.ft-hero-left .ft-kicker a{
    text-shadow:none !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-copy h1{
    font-size:clamp(1.6rem, 5vw, 2.2rem) !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-cap{grid-row:3 !important; padding:0 22px 12px !important}
  html body .ft-hero.ft-hero-left .ft-hero-shade{
    background:linear-gradient(180deg, transparent 78%, rgba(18,26,21,.25) 100%) !important;
  }
}
@media (max-width:520px){
  /* Keep the full bull and rack in frame on a narrow phone: do not crop the sides.
     Stack the headline and button under the photo so type never covers the animal. */
  html body .ft-hero.ft-hero-left{
    grid-template-rows:auto auto auto !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-media{
    max-height:none !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-in{
    grid-row:2 !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
    padding:18px 16px 16px !important;
    background:var(--ft-timber, #1E2A22) !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-copy,
  html body .ft-hero.ft-hero-left .ft-hero-copy h1,
  html body .ft-hero.ft-hero-left .ft-hero-copy .ft-hero-sub,
  html body .ft-hero.ft-hero-left .ft-kicker,
  html body .ft-hero.ft-hero-left .ft-kicker a{
    text-shadow:none !important;
  }
  html body .ft-hero.ft-hero-left .ft-hero-sub{display:block !important; max-width:40ch !important}
  html body .ft-hero.ft-hero-left .ft-hero-cap{grid-row:3 !important; padding:0 16px 12px !important}
  html body .ft-hero.ft-hero-left .ft-hero-shade{
    background:linear-gradient(180deg, transparent 78%, rgba(18,26,21,.25) 100%) !important;
  }
}

/* Elk kit: dl-elk-frost. Wide rack; keep both tips in frame. Crop frost grass at the bottom. Text stays below the photo. */
html body .gp-hero img.dl-elk-frost-image{
  object-fit:cover !important;
  object-position:50% 0% !important;
}
html body .gp-hero:has(img.dl-elk-frost-image) > .gp-hero-photo{
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1600 / 1066 !important;
  max-height:64vh !important;
}
@media (max-width:699px){
  html body .gp-hero:has(img.dl-elk-frost-image) > .gp-hero-photo{
    max-height:none !important;
  }
}


/* Homepage typography: 18px body, no monospace countdown */
html body main.ft-home{
  font-size:18px !important;
}
html body .cd-count.ft-count,
html body .ft-count,
html body .ft-count .cd-n{
  font-family:var(--display, "Oswald"), "Barlow Condensed", sans-serif !important;
  font-variant-numeric:tabular-nums !important;
}


/* Site typography: ~18px body, no monospace price numerals */
html body main{
  font-size:18px !important;
}
html body main :is(.clothing-price,.pack-price,.optics-inline-price,.bf-price b,.fc-price,.quality-price,.gp-price,.ft-price,.optics-price){
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-variant-numeric:tabular-nums !important;
}


/* Nov 14 PM (Jeff): landscape gp-heroes stay uncropped at native aspect.
   No 70vh cover-zoom, no side or top crop, no upscale past the source width.
   Trim is not applied to a landscape original that already shows the whole animal. */
html body .gp-hero,
html body.pack-ak-bb-hero .gp-hero{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  background:var(--ft-timber, #1E2A22) !important;
}
html body .gp-hero > .gp-hero-photo,
html body.pack-ak-bb-hero .gp-hero > .gp-hero-photo,
html body .gp-hero:has(img.dl-elk-frost-image) > .gp-hero-photo{
  position:relative !important;
  grid-area:auto !important;
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
  line-height:0 !important;
  text-align:center !important;
  background:var(--ft-timber, #1E2A22) !important;
}
html body .gp-hero > .gp-hero-photo picture,
html body.pack-ak-bb-hero .gp-hero > .gp-hero-photo picture{
  position:static !important;
  inset:auto !important;
  display:block !important;
  width:auto !important;
  max-width:min(100%, 1600px) !important;
  height:auto !important;
  margin:0 auto !important;
}
html body .gp-hero > .gp-hero-photo img,
html body .gp-hero img.gp-hero-image,
html body .gp-hero img.home-elk-right-image,
html body .gp-hero img.dl-elk-frost-image,
html body.pack-ak-bb-hero .gp-hero-photo img,
html body .gp-hero-image.fp-ak-bb05-lake-clark,
html body .gp-hero-image.fp-ak-bb02-denali,
html body .gp-hero img.gp-hero-image[src*="ak-moose-sukakpak"],
html body .gp-hero img.fp-ak-moose-sukakpak,
html body .gp-hero img.gp-hero-image.fp-ak-dall-ridge,
html body .gp-hero img.fp-ak-dall-ridge{
  position:static !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  max-width:min(100%, 1600px) !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  margin:0 auto !important;
}
/* Text sits below the photo, never on the animal. Keep crumbs and H1 off the left edge. */
html body .gp-hero > .gp-hero-text,
html body .gp-hero > .wrap.gp-hero-text,
html body.pack-ak-bb-hero .gp-hero > .gp-hero-text,
html body.pack-ak-bb-hero .gp-hero > .wrap.gp-hero-text{
  grid-area:auto !important;
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  text-align:left !important;
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  padding:22px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left)) !important;
  background:var(--ft-timber, #1E2A22) !important;
  color:#fff !important;
  text-shadow:none !important;
}
html body .gp-hero-text h1,
html body .gp-hero-text .s12-crumbs,
html body .gp-hero-text .s12-crumbs a,
html body .gp-hero-text .s12-crumbs span{
  color:#fff !important;
  text-shadow:none !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  box-sizing:border-box !important;
}
html body .gp-hero-text h1{
  margin:8px 0 14px !important;
  text-align:left !important;
}
html body .gp-hero-text h1::after{
  margin-left:0 !important;
  margin-right:auto !important;
}
@media (max-width:640px){
  html body .gp-hero > .gp-hero-text,
  html body .gp-hero > .wrap.gp-hero-text,
  html body.pack-ak-bb-hero .gp-hero > .gp-hero-text,
  html body.pack-ak-bb-hero .gp-hero > .wrap.gp-hero-text{
    padding:18px max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)) !important;
  }
}

/* phero-native-aspect-lastwin 20261114
   Jeff: landscape originals shown uncropped at native aspect, text below the photo, no cover-zoom. */
html body section.phero[class],
html body section.phero[class]:not(#cn-a){
  display:flex !important;
  flex-direction:column !important;
}
html body section.phero[class] .phero-media,
html body section.phero[class]:not(#cn-a) .phero-media{
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  justify-content:flex-start !important;
}
html body section.phero[class] .phero-img,
html body section.phero[class]:not(#cn-a) .phero-img{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  line-height:0 !important;
}
html body section.phero[class] .phero-img img,
html body section.phero[class]:not(#cn-a) .phero-img img,
html body section.phero[class] .phero-img picture,
html body section.phero[class]:not(#cn-a) .phero-img picture{
  position:static !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  margin:0 !important;
}
@media (min-width:700px){
  html body section.phero[class] .phero-img,
  html body section.phero[class]:not(#cn-a) .phero-img{
    min-height:0 !important;
    height:auto !important;
  }
}
@media (max-width:699px){
  html body section.phero[class] .phero-img,
  html body section.phero[class]:not(#cn-a) .phero-img{
    min-height:0 !important;
    height:auto !important;
  }
}

/* qa-mobile-caption-14-lastwin 20261114 */
/* Loaded after fieldtag/style so these beat the 10-11px credit rules on phones. */
@media (max-width: 600px){
  html body .ft-home .ft-cats .gp-grid.ft-guide-grid .gp-card .gp-credit,
  html body .ft-home .ft-cats .gp-grid.ft-guide-grid .gp-card figcaption,
  html body .ft-cats .gstrip-cap,
  html body .ft-statecards .card-cap,
  html body .phero :is(.phero-cap, .photo-cap),
  html body .phero-fig .phero-cap,
  html body .phero--detail .phero-fig .phero-cap,
  html body .phero--homex .phero-cap,
  html body .band-fig .band-cap,
  html body .gp-hero > .gp-hero-credit,
  html body.pack-ak-bb-hero .gp-hero > .gp-hero-credit,
  html body .ft-hero-cap,
  html body .photo-cap,
  html body figcaption.photo-cap,
  html body .photo-cap.gstrip-cap,
  html body .photo-cap.card-cap,
  html body .photo-cap.phero-cap,
  html body .card-cap,
  html body .gp-hero-credit,
  html body .gstrip-cap,
  html body p.cap,
  html body .cap{
    font-size:14px !important;
    line-height:1.4 !important;
    max-height:none !important;
    overflow:visible !important;
  }
}