/* ============================================================
   Hidden Creek Outfitters — Texas Aoudad
   Locked design system. Colours, type, layout and section order
   are NOT editable from the CMS — only the content listed in
   admin/config.yml is.
   ============================================================ */

:root {
  --bone: #F7F4EE;
  --ink: #1C1A17;
  /* Rust and limestone are the WCAG AA-compliant substitutes for the original
     brand values (#B4552D / #8A8578), which measured 4.47:1 and 3.35:1 on bone
     against the 4.5:1 minimum. Smallest shift that clears AA. */
  --rust: #B3542C;        /* 4.53:1 on bone */
  --limestone: #746F62;   /* 4.56:1 on bone */
  /* Rust reads too dark on ink (3.54:1), so dark surfaces get a lighter rust.
     Used ONLY on ink — currently the hero eyebrow. */
  --rust-on-ink: #C76840; /* 4.53:1 on ink */

  --rule: rgba(28, 26, 23, 0.14);
  /* Dark-surface counterparts. Nav, hero and footer sit on ink, where the
     bone-background tokens above are unreadable. */
  --bone-muted: #B3ADA0;                    /* 7.77:1 on ink — secondary text */
  --rule-on-ink: rgba(247, 244, 238, 0.18); /* hairline on ink */
  --shadow: 0 18px 50px rgba(28, 26, 23, 0.14);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 62ch;
  --gutter: 24px;
  --max: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

a { color: var(--rust); }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--limestone);
  margin-bottom: 18px;
}

.lede { color: var(--limestone); max-width: var(--measure); }

/* Rust is deliberately scoped to the HERO eyebrow only — .eyebrow is reused
   by every section label, the facts-card heading, the gear groups and the
   footer, and tinting all of them would turn the accent into a theme colour. */
.hero-copy .eyebrow { color: var(--rust); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--rust);
  color: var(--bone);
  padding: 10px 16px;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Nav ---------- */
.site-nav {
  border-bottom: 1px solid var(--rule);
  background: var(--bone);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--gutter);
}
.nav-brand {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.nav-brand span { color: var(--limestone); font-weight: 400; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}
/* Every nav item is a .btn — see the Buttons block. Nothing here may set colour
   or borders on them, or it will beat .btn on specificity. */
.nav-links li { display: flex; }
/* At phone widths "Plan Your Hunt" wraps to two lines; stretching keeps all three
   buttons the same height instead of leaving one taller than its neighbours. */
.nav-links { align-items: stretch; }
.nav-links .btn {
  display: flex;
  align-items: center;
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--rust);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 34px;
  border: 1px solid var(--rust);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: #9c4726; border-color: #9c4726; }

/* Compact size for the nav and the footer. Identical colours and shape to .btn —
   only the padding and type size change, so every button on the site reads as the
   same control. */
.btn-sm {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 10px 20px;
}

/* An email address in caps reads as a different address. Same fill, same size,
   same everything else — only the case is left alone. */
.btn-nocaps {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Rust on ink is only 3.49:1, so a rust focus ring would vanish against a rust
   button. Ring is ink on light surfaces, bone inside the dark ones. */
.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* The current page's nav button. Rust-on-rust states are invisible, so the marker
   is a ring rather than a shade. */
.nav-links .btn[aria-current="page"] {
  outline: 2px solid var(--bone);
  outline-offset: 2px;
}

/* ---------- Hero: photo first, headline below on bone ---------- */
.hero-photo {
  width: 100%;
  height: clamp(320px, 56vh, 620px);
  object-fit: cover;
  /* Biased above centre: the current hero has its faces high in the frame and a
     dead-centre crop clips them. */
  object-position: center 30%;
  background: #ded7cb;
}
.hero-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 88px;
}
.hero-copy { padding-top: 48px; }
.hero-copy h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  margin-bottom: 22px;
}
.hero-copy .lede { font-size: 1.12rem; }

/* Facts card — pulled up so it overlaps the bottom edge of the photo */
.facts-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 30px 32px;
  align-self: start;
  position: relative;
  z-index: 2;
}
.facts-card h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--limestone);
  margin-bottom: 20px;
}
.facts-list { list-style: none; }
.facts-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.facts-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.facts-list dt, .facts-list .fact-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--limestone);
  white-space: nowrap;
}
.facts-list .fact-value {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: right;
}
/* Price only. The other rows stay ink so the accent still means something. */
.facts-list .fact-value-accent { color: var(--rust); }

/* ---------- Section rhythm ---------- */
.section { padding: 96px 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section h2 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  margin-bottom: 20px;
}

/* ---------- Gallery + film: two photos beside the episode embed ---------- */
.media-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 48px;
  align-items: start;
}
.album {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.album-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ded7cb;
}
/* 16:9 well. Ink ground so the player has something to sit on before it loads. */
.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--rule);
}
.film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.gallery-more { margin-top: 36px; }

.film-caption {
  color: var(--limestone);
  font-size: 0.88rem;
  margin-top: 14px;
}

/* ---------- Media + copy sections ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ded7cb;
}
.split-copy p + p { margin-top: 16px; }
.split-copy p { color: var(--limestone); max-width: var(--measure); }

.camp-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
}
.camp-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #ded7cb;
}

/* ---------- Booking CTA ---------- */
.cta {
  background: var(--ink);
  color: var(--bone);
}
.cta h2 { color: var(--bone); }
.cta p.lede { color: #cfc9bd; margin-bottom: 34px; }
/* The GHL iframe is declared height:100%, which resolves to nothing without a
   definite parent height, so the real floor is the min-height on both. 1450px
   matches the embed's own data-height and keeps the form from being cut off. */
.form-wrap {
  max-width: 680px;
  margin: 0 auto;
  min-height: 1450px;
}
.form-wrap iframe {
  width: 100%;
  min-height: 1450px;
  border: none;
  background: var(--bone);
}

/* ---------- Plan-your-hunt page ---------- */
.page-head { padding: 72px 0 40px; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 18px; }

.plan-section { padding: 56px 0; border-top: 1px solid var(--rule); }
.plan-section h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 18px; }
.plan-section p { color: var(--limestone); max-width: var(--measure); }
.plan-section p + p { margin-top: 14px; }

.gear-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 28px;
}
.gear-group h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--limestone);
  margin-bottom: 14px;
}
.gear-group ul { list-style: none; }
.gear-group li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.96rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 56px 0 40px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.footer-grid h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--limestone);
  margin-bottom: 12px;
}
.footer-grid a:not(.btn) { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.footer-grid a:not(.btn):hover { border-bottom-color: var(--ink); }

/* The contact column leads with a person's name, so its h3 is NOT the tiny
   uppercase label the other two columns use. */
.footer-contact h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 6px;
}
.footer-contact p { margin-bottom: 4px; }
.footer-contact p:last-child { margin-bottom: 0; }
/* The phone and email are buttons, so they stack rather than sitting inside a
   sentence. Labels keep the number and the address visible — the whole point of
   the block is that a hunter can see how to reach Bill without clicking. */
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.footer-title { color: var(--limestone); }

.footer-bottom a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.footer-bottom a:hover { border-bottom-color: var(--ink); }
.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--limestone);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ---------- Responsive ---------- */
@media (min-width: 760px) {
  .camp-photos { grid-template-columns: 1fr 1fr; }
  .album { grid-template-columns: 1fr 1fr; }
  .gear-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .hero-body {
    grid-template-columns: 1.35fr 0.85fr;
    gap: 72px;
  }
  /* The card only overlaps the photo edge once it sits BESIDE the hero copy.
     Stacked below the copy on narrow screens, this same pull-up hid the last
     line of the lede behind the card. Keep it inside this breakpoint. */
  .facts-card { margin-top: -84px; }
  /* Uneven split on purpose: the film is the bigger draw, and at these widths the
     two stacked photos come out within ~60px of the player's height, so the two
     columns finish together instead of one leaving a hole under it. */
  .media-duo { grid-template-columns: 0.75fr 1.25fr; gap: 48px; }
  .album { grid-template-columns: 1fr; }
  .album-item img { aspect-ratio: 16 / 9; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split-reverse .split-media { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================
   DARK SURFACES — nav, hero body, footer (the CTA was already ink).
   Everything inside these three regions must resolve to bone,
   bone-muted or rust-on-ink. The bone-background tokens (--ink text,
   --limestone, --rule) are unreadable here.
   NOTE: the accent on ink is --rust-on-ink (#C76840, 4.53:1), NOT
   --rust (#B3542C), which drops to 3.49:1 on ink and fails AA.
   ============================================================ */

/* ---- Nav ---- */
header.site-nav {
  background: var(--ink);
  border-bottom-color: var(--rule-on-ink);
}
.nav-brand { color: var(--bone); }
.nav-brand span { color: var(--bone-muted); }
/* Nav items are rust buttons; the only dark-surface change they need is a focus
   ring that shows up against ink. */
.site-nav .btn:focus-visible,
.cta .btn:focus-visible,
.site-footer .btn:focus-visible { outline-color: var(--bone); }

/* ---- Hero body ---- */
.hero-section { background: var(--ink); }
.hero-section h1 { color: var(--bone); }
.hero-section .lede { color: var(--bone-muted); }
.hero-copy .eyebrow { color: var(--rust-on-ink); }

/* The facts card is a LIGHT island on the dark hero — deliberately not
   inverted. It keeps the bone background, ink values, limestone labels and
   --rust (not --rust-on-ink) accents from the base rules above. Do not add
   dark-surface overrides for it. */

/* ---- Footer ---- */
footer.site-footer {
  background: var(--ink);
  color: var(--bone);
  border-top-color: var(--rule-on-ink);
}
.site-footer p { color: var(--bone); }
.footer-grid h3 { color: var(--bone-muted); }
.footer-contact h3 { color: var(--bone); }
.footer-title { color: var(--bone-muted); }
.footer-grid a:not(.btn) { color: var(--bone); border-bottom-color: var(--rule-on-ink); }
.footer-grid a:not(.btn):hover { border-bottom-color: var(--bone); }
.footer-bottom {
  border-top-color: var(--rule-on-ink);
  color: var(--bone-muted);
}
.footer-bottom p { color: var(--bone-muted); }
.footer-bottom a { color: var(--bone); border-bottom-color: var(--rule-on-ink); }
.footer-bottom a:hover { border-bottom-color: var(--bone); }

/* Keep the already-ink CTA panel on the same secondary tone. */
.cta p.lede { color: var(--bone-muted); }

/* ---------- Plan page: numbered license steps ---------- */
.plan-steps {
  margin-top: 18px;
  padding-left: 22px;
  max-width: var(--measure);
  color: var(--limestone);
}
.plan-steps li { padding: 6px 0; }

/* ============================================================
   PHOTO ALBUM — photos.html grid + lightbox.
   Same palette and type as everything else: bone surface, ink
   text, rust only on the controls (which are buttons, per the
   2026-09-08 rule). The lightbox backdrop is ink at 94%, so the
   rust arrows sit on effectively the same ground as the nav.
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gallery-count {
  color: var(--limestone);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.gallery-item {
  display: block;
  padding: 0;
  border: 1px solid var(--rule);
  background: #ded7cb;
  cursor: pointer;
  overflow: hidden;
  /* The photos are a mix of landscape and portrait originals; a fixed
     ratio keeps the grid even and the lightbox shows the whole frame. */
  aspect-ratio: 4 / 3;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.gallery-back { margin-top: 44px; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 26, 23, 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  background: var(--ink);
}
.lightbox-counter {
  color: var(--bone-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: var(--rust);
  color: var(--bone);
  border: 1px solid var(--rust);
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  transition: background 0.15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: #9c4726; border-color: #9c4726; }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}
.lightbox-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 66px;
  font-size: 2rem;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

@media (min-width: 620px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
  .lightbox { padding: 12px; }
  .lightbox-nav { width: 40px; height: 56px; font-size: 1.6rem; }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
}