/* ==========================================================================
   Cowboy Oil & Gas

   Type and layout measured from the 9/15/26 InDesign proof:
     body       Baskerville 9.6-11pt
     headings   Arial Bold 11-14pt   (sans, not serif)
     nav        Oswald Bold 8.8pt
     captions   Arial Bold 5.6-7.1pt
     hero type  Coldsmith (a western display face; see --display below)
   ========================================================================== */

:root {
  --cream:      #efecdd;
  --cream-deep: #e4dfca;
  --tan:        #c3b696;
  --tan-dark:   #8a7f66;
  --ink:        #1c1a16;
  --ink-soft:   #4a4437;
  --white:      #fffdf6;

  /* Body copy. The proof sets Baskerville. */
  --serif: "Libre Baskerville", Baskerville, "Baskerville Old Face",
           Georgia, "Times New Roman", serif;

  /* Headings and captions. The proof sets Arial Bold. */
  --sans: Arial, Helvetica, "Helvetica Neue", sans-serif;

  /* Nav bar and the small uppercase labels. */
  --nav-font: Oswald, "Barlow Condensed", Arial, sans-serif;

  /* Hero overlay. Coldsmith is a licensed display face; until it is
     purchased and self-hosted this falls back to a heavy condensed sans. */
  --display: Coldsmith, Oswald, "Barlow Condensed", Arial, sans-serif;

  --measure: 44rem;
  --gutter: 1rem;
  --page-max: 60rem;
  --hero-max: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tan-dark); }

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

.skip-link { position: absolute; left: -9999px; }

.skip-link:focus {
  left: var(--gutter);
  top: var(--gutter);
  z-index: 10;
  background: var(--ink);
  color: var(--cream);
  padding: 0.5rem 0.75rem;
}

:focus-visible {
  outline: 2px solid var(--tan-dark);
  outline-offset: 2px;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  background: var(--cream-deep);
  max-width: var(--page-max);
  margin: 0 auto;
}

.wordmark {
  display: block;
  text-align: center;
  text-decoration: none;

  /* The clamp lives here rather than on .wordmark__text so the mark below can
     be sized in em and stay locked to the type at every viewport. The top
     padding is em for the same reason. */
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  padding: 0.5em var(--gutter) 1.25rem;

  /* Bucking horse and rider behind the wordmark, as in the proof and on the
     live site. Decorative, so it is a background rather than an <img> --
     nothing for a screen reader to announce.

     Measured off the proof: the mark stands 2.5x the cap height, centred on
     the wordmark, rising 0.65 cap-heights above the caps and dropping 0.85
     below the baseline. Libre Baskerville's cap height measures 0.778em, so
     2.5 caps is 1.944em, starting 0.265em down from the top of the padding
     box. Both are em, so the mark tracks the type at every viewport. */
  background-image: url("/assets/images/cowboy-mark.png");
  background-repeat: no-repeat;
  background-position: center 0.265em;
  background-size: auto 1.944em;
}

.wordmark__text {
  font-family: var(--serif);
  font-size: 1em; /* the clamp is on .wordmark */
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
}

.wordmark__tm {
  font-size: 0.75rem;
  vertical-align: top;
  letter-spacing: 0;
}

.wordmark__rule {
  display: block;
  font-family: var(--nav-font);
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  margin-top: 0.35rem;
  color: var(--ink-soft);
}

/* --- Navigation ---------------------------------------------------------- */

.nav { background: var(--tan); }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--page-max);
}

.nav__link {
  display: block;
  padding: 0.5rem 0.8rem;
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover { background: var(--tan-dark); color: var(--white); }

.nav__link[aria-current="page"] { background: var(--ink); color: var(--cream); }

.nav__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
}

.nav__toggle-bars { position: relative; }

.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ""; position: absolute; left: 0; }

.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top: 6px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 59.999rem) {
  .has-js .nav__toggle { display: flex; }

  .has-js .nav__list {
    display: none;
    flex-direction: column;
    border-top: 1px solid var(--tan-dark);
  }

  .has-js .nav__list.is-open { display: flex; }

  .has-js .nav__link {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9375rem;
  }
}

/* --- Hero ----------------------------------------------------------------
   The proof does NOT run these full-bleed. Each page opens with a modest
   centred photograph at its natural aspect ratio, caption beneath.
   -------------------------------------------------------------------------- */

.page-body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
  background: var(--cream-deep);
}

.hero {
  position: relative;
  max-width: var(--hero-max);
  margin: 0 auto 2.5rem;
}

.hero__img {
  width: 100%;
  height: auto;
  border: 1px solid var(--tan-dark);
}

/* The proof fades the photograph back wherever a principle is laid over it --
   compare the washed oil rig plate against the full-contrast original. Without
   it the dark type sinks into dark areas of the image; on The Cowboy Way it
   vanished into the cowboys' shirts. Applied only to heroes that actually
   carry an overlay, so the Home photograph keeps its full contrast. */
.hero--quoted .hero__img {
  filter: var(--hero-wash, contrast(0.34) brightness(1.43));
}

.hero__img.is-placeholder {
  min-height: 16rem;
  background: var(--tan-dark);
}

.hero__quote {
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 10px rgb(255 255 255 / 45%);
}

/* The proof sets these in Coldsmith, a distressed western face whose letters
   are pitted so the photograph shows through -- that erosion is what makes the
   type read as printed onto the image rather than laid over it. Coldsmith is
   not licensed here, so the shape falls back to Oswald and the texture is
   painted in: the glyphs are filled with a tileable ink field whose pits are
   transparent.

   Guarded by @supports because the fill needs a transparent text colour, and
   without background-clip that would render the quote invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__quote {
    color: transparent;
    background-image: url("/assets/images/type-grain.png");
    background-size: 190px auto;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    /* The halo would ring each eroded glyph; a soft drop-shadow on the
       element keeps it legible without outlining the wear. */
    text-shadow: none;
    filter: drop-shadow(0 1px 6px rgb(255 255 255 / 45%));

    /* A continuous, very slow wander of the grain fill, so the pits in the
       letterforms are always faintly creeping. Constant motion reads as more
       noticeable than occasional motion at the same speed, so this is pitched
       gentler than the earlier version's peak.

       Deliberately NOT steps(): snapping between offsets read as a glitch.
       Eased waypoints at irregular intervals keep it from settling into a
       rhythm you can anticipate, which is what makes a small loop start to
       feel mechanical. Travel stays within a few pixels, so nothing ever
       appears to move -- the texture just never quite holds still. */
    animation: hero-quote-crackle 66s ease-in-out infinite;
  }

  @keyframes hero-quote-crackle {
    0%          { background-position:   0    0;   }
    11%         { background-position:   5px -4px; }
    23%         { background-position:  -3px  5px; }
    34%         { background-position:   6px  3px; }
    47%         { background-position:  -5px -3px; }
    58%         { background-position:   3px  6px; }
    69%         { background-position:  -6px  2px; }
    81%         { background-position:   4px -5px; }
    92%         { background-position:  -2px  4px; }
    100%        { background-position:   0    0;   }
  }
  }
  }
}

/* The global reduced-motion rule already disables this, but state it here too
   so the intent travels with the effect if that rule is ever narrowed. */
@media (prefers-reduced-motion: reduce) {
  .hero__quote { animation: none; }
}

.hero__credit {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

/* --- Prose ---------------------------------------------------------------
   Two alignment modes, both taken from the proof:
     .prose--centered   Home, Get an Offer, FAQ, Sustainability, Cowboy Way,
                        Contact -- headings and body both centred
     .prose--justified  Founder and Team -- headings centred over justified,
                        full-measure body copy
   -------------------------------------------------------------------------- */

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

/* Element defaults are wrapped in :where() so they carry ZERO specificity.
   A plain `.prose p` selector (0,1,1) outranks any single component class
   like `.calltoaction` (0,1,0), which silently ate the auto margins that
   centre the phone-number box and every other component margin below.
   With :where() the component classes always win, whatever the source
   order. */

:where(.prose) :where(h1, h2, h3) {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

:where(.prose) :where(h1) { font-size: 1.5rem;    margin: 0 0 1.1rem; }
:where(.prose) :where(h2) { font-size: 1.3125rem; margin: 2.75rem 0 0.9rem; }
:where(.prose) :where(h3) { font-size: 1.0625rem; margin: 2rem 0 0.5rem; }

:where(.prose) :where(p) { margin: 0 0 1.1rem; }

:where(.prose) :where(ul, ol) { margin: 0 0 1.4rem; padding-left: 1.5rem; }
:where(.prose) :where(li) { margin-bottom: 0.45rem; }

.prose--centered { text-align: center; }

/* A centred block of bullets: the list is centred as a group, but the items
   themselves stay left-aligned so the bullets line up. */
.prose--centered ul,
.prose--centered ol {
  display: table;
  margin-inline: auto;
  text-align: left;
}

.prose--justified p {
  text-align: justify;

  /* Not `auto`. Safari's hyphenation dictionary is more willing than
     Chrome's and split "Courtney" as "Court-ney" on the Founder page. Both
     justified pages are dense with proper nouns -- Bayoud, PlainsCapital,
     Nacogdoches, Haynesville, Teferawork -- none of which should ever be
     broken. `hyphenate-limit-chars` could raise the threshold instead, but
     Safari only supports it from 17, so it would leave older versions
     splitting names. `manual` still honours any explicit soft hyphen. */
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Justified text with no hyphenation opens ugly gaps once lines get short,
   so narrow screens fall back to ragged right. */
@media (max-width: 40rem) {
  .prose--justified p { text-align: left; }
}

.prose--justified ul,
.prose--justified ol { text-align: left; }

.sc { font-variant: small-caps; letter-spacing: 0.02em; }

.star {
  font-size: 1rem;
  color: var(--ink);
  margin: 1.75rem 0;
  text-align: center;
}

/* The proof frames this in a hairline box. */
.calltoaction {
  display: table;
  margin: 1.75rem auto;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- FAQ -----------------------------------------------------------------
   Question / answer pairs separated by a star, as drawn.
   -------------------------------------------------------------------------- */

.faq { margin: 0; }

.faq__q {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0 0 0.35rem;
}

.faq__a { margin: 0; padding: 0; }

.faq__a + .faq__q { margin-top: 0; }

/* Star divider between entries. */
.faq__a:not(:last-of-type)::after {
  content: "\2605";
  display: block;
  margin: 1.4rem 0;
  font-size: 0.8125rem;
  color: var(--ink);
}

.disclaimer,
.attribution {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tan);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* --- Bios ----------------------------------------------------------------
   Name and role centred, body justified, a short rule between people.
   -------------------------------------------------------------------------- */

.bio { margin-bottom: 2.5rem; }

.bio + .bio { padding-top: 2.5rem; }

.bio + .bio::before {
  content: "";
  display: block;
  width: 12rem;
  height: 1px;
  margin: 0 auto 2.5rem;
  background: var(--ink-soft);
  transform: translateY(-2.5rem);
}

.bio__name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.1875rem;
  text-align: center;
  margin: 0 0 0.1rem;
}

.bio__role {
  text-align: center;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.bio__email { text-align: center; }

.contacts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  text-align: center;
}

.contacts__name { font-weight: 700; margin-bottom: 0.15rem; }
.contacts__email { margin: 0; }

.address { font-style: normal; line-height: 1.9; text-align: center; }

/* --- Cowboy ethics ------------------------------------------------------- */

.ethics {
  list-style: none;
  padding: 0;
  margin: 2rem auto;
  text-align: center;
  display: block;
}

.ethics__item {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.3125rem);
  letter-spacing: 0.04em;
  padding: 0.4rem 0;
  text-align: center;
}

/* --- Form ---------------------------------------------------------------- */

.offer-form {
  max-width: 30rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem;
  background: var(--cream);
  border: 1px solid var(--tan-dark);
  text-align: left;
}

.offer-form__error {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid #8b2c1f;
  background: #f6ece9;
  color: #6d2318;
  font-size: 0.9375rem;
  text-align: left;
}

.offer-form__error[hidden] { display: none; }

.offer-form__row { margin: 0 0 1rem; }

.offer-form label {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.offer-form input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--tan-dark);
  border-radius: 0;
}

.req { color: #8b2c1f; margin-left: 0.15rem; }

/* Positioned off-screen rather than display:none -- some bots skip fields
   that are hidden outright. */
.offer-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.offer-form__actions { margin: 1.25rem 0 0.5rem; text-align: center; }

.offer-form button {
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1.75rem;
  color: var(--cream);
  background: var(--ink);
  border: 0;
  cursor: pointer;
}

.offer-form button:hover { background: var(--tan-dark); }

.offer-form__fineprint {
  margin: 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--ink-soft);
}

.confirmation { padding-block: 3rem; }

/* --- Footer -------------------------------------------------------------- */

.footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.6rem var(--gutter);
  background: var(--ink);
  color: var(--cream);
}

.footer__copyright {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}