/* Old Fuckers Whiskey Brigade — ofwbrigade.com
 *
 * Palette is taken straight from the badge SVG so the page and the logo agree:
 *   #d4141e red, #d4a017 gold, #c8c8c8 grey, on black.
 *
 * Compatibility: literal hex everywhere (custom properties would silently blank
 * the page on older phone browsers), flexbox only where a block fallback still
 * reads correctly, and no grid. Mobile-first — the base rules ARE the 375px
 * layout, wider screens are the enhancement.
 */

/* ---------- reset-ish ---------- */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #000;
  color: #c8c8c8;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: #d4a017; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px;
  background: #d4a017; color: #000; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 10px; top: 10px; }

/* Display type.
 *
 * The badge is set in Impact, so Impact leads the fallback stack — but ANDROID
 * SHIPS NEITHER Impact NOR Arial Black, which meant a large share of phone
 * users got generic Helvetica and none of the poster feel (caught in the 375px
 * render, not in the markup). Anton is the closest open equivalent, self-hosted
 * as one 18KB latin woff2 — no Google Fonts request, which also keeps the CSP
 * at 'self'. font-display:swap means the Impact/Arial Black stack paints
 * immediately and Anton swaps in; if the file 404s or the browser is too old
 * for woff2, the stack below is exactly what shipped before. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/anton-latin.woff2") format("woff2");
}

.hero-h1, h2, h3, .kicker, .btn, .est-years, .bar-brand span, .foot-name, .gate-q {
  font-family: "Anton", Impact, "Arial Black", "Franklin Gothic Heavy", Haettenschweiler, sans-serif;
  font-weight: normal;
  letter-spacing: 0.02em;
}

/* ---------- top bar ---------- */
.bar {
  background: #000;
  border-bottom: 3px solid #d4141e;
  position: relative;
  z-index: 20;
}
.bar-in { padding-top: 10px; padding-bottom: 10px; }
.bar-brand {
  display: inline-block;
  text-decoration: none;
  color: #d4a017;
  font-size: 26px;
  letter-spacing: 3px;
  vertical-align: middle;
}
.bar-brand img { width: 40px; height: 40px; vertical-align: middle; margin-right: 8px; }
.bar-brand span { vertical-align: middle; }

.bar-toggle {
  float: right;
  margin-top: 6px;
  background: transparent;
  border: 2px solid #555;
  color: #c8c8c8;
  font: inherit;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
}
.bar-toggle:hover { border-color: #d4a017; color: #d4a017; }

/* Nav is CLOSED by default only once JS confirms it can reopen it. Without JS
 * the `is-js` class never lands and the links stay visible — no dead menu. */
.bar-nav { clear: both; padding-top: 8px; }
.bar-nav a {
  display: block;
  color: #c8c8c8;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 11px 0;
  border-top: 1px solid #1c1c1c;
}
.bar-nav a:hover { color: #d4a017; }
.is-js .bar-nav { display: none; }
.is-js .bar-nav.open { display: block; }

/* ---------- hero ---------- */
.hero {
  background: #000;
  background-image: -webkit-radial-gradient(50% 0%, ellipse, #241a06 0%, #000 65%);
  background-image: radial-gradient(ellipse at 50% 0%, #241a06 0%, #000 65%);
  text-align: center;
  padding: 34px 0 40px;
  border-bottom: 1px solid #1c1c1c;
}
.hero-badge {
  display: block;
  margin: 0 auto 22px;
  width: 260px; height: auto;
}
.hero-h1 { margin: 0; line-height: 0.92; }
.hero-h1 .l1 {
  display: block;
  color: #d4a017;
  font-size: 46px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hero-h1 .l2 {
  display: block;
  color: #fff;
  font-size: 22px;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-top: 6px;
}
.hero-tag {
  color: #d4141e;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 15px;
  font-weight: bold;
  margin: 16px 0 0;
}
.hero-sub {
  max-width: 620px;
  margin: 18px auto 0;
  color: #9a9a9a;
  font-size: 17px;
}
.hero-cta { margin: 26px 0 0; }

.btn {
  display: inline-block;
  background: #d4141e;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 16px;
  padding: 14px 26px;
  margin: 6px 4px;
  border: 2px solid #d4141e;
}
.btn:hover { background: #b01019; border-color: #b01019; }
.btn-ghost { background: transparent; color: #d4a017; border-color: #6a5510; }
.btn-ghost:hover { background: transparent; border-color: #d4a017; color: #fff; }

/* Apply is a real <button>, not a link, because it performs an action rather than
 * going somewhere. Buttons inherit neither typography nor box metrics the way <a>
 * does, so these have to be restated or it renders as stock grey chrome. */
button.btn {
  cursor: pointer;
  line-height: normal;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
button.btn::-moz-focus-inner { border: 0; padding: 0; }   /* Firefox's phantom inset */

/* Keyboard users have to see what they're about to press. */
.btn:focus { outline: 3px solid #d4a017; outline-offset: 2px; }

/* ---------- apply dialog ---------- */
/* Hidden by class, not the `hidden` attribute — older phone browsers ignore it.
 * Centred with margin rather than flex so the box lands correctly even where
 * flexbox centring is unreliable; see the compatibility note at the top. */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 200;
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.modal.open { display: block; }
.modal-box {
  max-width: 460px;
  margin: 18% auto 0;
  background: #000;
  border: 3px solid #d4a017;
  padding: 30px 22px 26px;
  text-align: center;
}
.modal-msg { margin: 0 0 22px; }
.modal-msg .m1,
.modal-msg .m2 {
  display: block;
  font-family: "Anton", Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  text-transform: uppercase;
  line-height: 1.12;
  letter-spacing: 1px;
}
.modal-msg .m1 { color: #d4a017; font-size: 30px; }
.modal-msg .m2 { color: #fff; font-size: 30px; margin-top: 4px; }

.noscript-note {
  border-left: 4px solid #d4a017;
  padding-left: 14px;
  color: #fff;
  font-size: 18px;
}

/* Stop the page behind the dialog scrolling on phones. */
body.modal-open { overflow: hidden; }

/* ---------- est. strip ---------- */
.est {
  background: #d4a017;
  color: #000;
  text-align: center;
  padding: 14px 0;
}
.est-years {
  display: block;
  font-size: 22px;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.est-note { display: block; font-size: 14px; margin-top: 2px; }
.est-note em { font-style: normal; border-bottom: 2px solid #000; }

/* ---------- sections ---------- */
.sec { padding: 46px 0; border-bottom: 1px solid #141414; }
.sec-alt { background: #070707; }

.kicker {
  color: #d4141e;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 13px;
  margin: 0 0 8px;
}
h2 {
  color: #fff;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
h3 {
  color: #d4a017;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px;
}
p { margin: 0 0 16px; }
.lede { color: #b4b4b4; font-size: 18px; max-width: 700px; }
.fine { color: #777; font-size: 15px; }
.pull {
  border-left: 4px solid #d4141e;
  padding-left: 16px;
  color: #fff;
  font-size: 19px;
}

/* two columns — plain blocks on phones, floats (not grid) above */
.cols:after { content: ""; display: table; clear: both; }

/* ---------- rules ---------- */
.rules { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rules li {
  counter-increment: r;
  position: relative;
  padding: 0 0 22px 52px;
  margin: 0 0 22px;
  border-bottom: 1px solid #1a1a1a;
}
.rules li:last-child { border-bottom: 0; margin-bottom: 0; }
.rules li:before {
  content: counter(r);
  position: absolute; left: 0; top: -4px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 34px;
  color: #2a2a2a;
}
.rules p { margin: 0; color: #9a9a9a; }

/* ---------- cards / lists ---------- */
.card {
  background: #0d0d0d;
  border: 1px solid #222;
  border-top: 3px solid #d4141e;
  padding: 22px;
  margin-top: 10px;
}
.tick { list-style: none; margin: 0; padding: 0; }
.tick li {
  padding: 8px 0 8px 24px;
  border-bottom: 1px solid #191919;
  position: relative;
  color: #9a9a9a;
}
.tick li:last-child { border-bottom: 0; }
.tick li:before {
  content: "\00d7";
  position: absolute; left: 0; top: 7px;
  color: #d4141e; font-weight: bold; font-size: 18px;
}

.tags { list-style: none; margin: 0 0 18px; padding: 0; }
.tags li {
  display: inline-block;
  border: 1px solid #333;
  color: #c8c8c8;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 7px 13px;
  margin: 0 6px 8px 0;
}

/* ---------- join ---------- */
.sec-join { background: #070707; }
.gate {
  border: 2px solid #d4a017;
  padding: 22px;
  margin: 0 0 24px;
  background: #000;
}
.gate-q {
  color: #d4a017;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 14px;
}
.gate-a { margin: 0 0 8px; padding-left: 14px; border-left: 3px solid #333; }
.gate-a:last-child { margin-bottom: 0; }
.gate-yes { border-left-color: #d4a017; color: #fff; }
.gate-no { border-left-color: #d4141e; color: #8c8c8c; }

/* ---------- footer ---------- */
.foot {
  background: #000;
  border-top: 3px solid #d4a017;
  text-align: center;
  padding: 34px 0 40px;
}
.foot-badge { width: 72px; height: 72px; margin-bottom: 12px; }
.foot-name {
  color: #d4a017;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}
.foot-tag {
  color: #d4141e;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 4px 0 16px;
}
.foot-fine { color: #666; font-size: 14px; margin: 0; }
.sep { color: #333; }

/* ---------- wider screens ---------- */
@media screen and (min-width: 700px) {
  body { font-size: 18px; }
  .bar-toggle { display: none; }
  .is-js .bar-nav { display: block; }
  .bar-nav { clear: none; float: right; padding-top: 12px; }
  .bar-nav a {
    display: inline-block;
    border-top: 0;
    padding: 0 0 0 26px;
  }
  .hero { padding: 54px 0 62px; }
  .hero-badge { width: 340px; }
  .hero-h1 .l1 { font-size: 76px; }
  .hero-h1 .l2 { font-size: 32px; letter-spacing: 10px; }
  .hero-tag { font-size: 18px; }
  .est-years { display: inline; font-size: 24px; }
  .est-note { display: inline; margin-left: 14px; font-size: 15px; }
  .sec { padding: 64px 0; }
  h2 { font-size: 42px; }
  .cols > div { float: left; width: 48%; }
  .cols > div + div { margin-left: 4%; }
  .card { margin-top: 0; }
  .rules li { padding-left: 62px; }
  .rules li:before { font-size: 42px; }
  .modal-box { margin-top: 12%; padding: 40px 32px 34px; }
  .modal-msg .m1, .modal-msg .m2 { font-size: 40px; }
}

@media screen and (min-width: 1000px) {
  .hero-h1 .l1 { font-size: 92px; }
  .hero-badge { width: 380px; }
}

/* Below ~400px the two hero buttons stack, and at their natural widths they
 * stacked ragged (a wide "WHAT IS THIS" under a narrow "ENLIST"). Match them. */
@media screen and (max-width: 399px) {
  .btn {
    display: block;
    width: 240px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* respect the setting, don't animate anything anyway */
@media (prefers-reduced-motion: reduce) {
  * { -webkit-transition: none !important; transition: none !important; }
}