/* Navalha clone of bangbangforever.com (Squarespace 7.0 parallax index): near-black #151515, greys, white;
   Bebas Neue for titles, a monospace for text, Space Mono for small caps lines. Mobile below 640px. */
:root {
  --bg: #151515;
  --text: #a8a8a8;
  --head: #c2c2c2;
  --link: #b8b8b8;
  --mono: "Noto Sans Mono", "Droid Sans Mono", monospace;
  --bebas: "Bebas Neue", Impact, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: transparent; color: var(--text); font: 400 12px/1.6em var(--mono); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
a { color: var(--link); text-decoration: none; transition: color .12s ease-out; }
a:hover, a:focus { color: rgba(184, 184, 184, .7); }
img, video { display: block; }
svg { display: block; }

/* ---------- fixed logo ---------- */
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 8001; pointer-events: none; }
.title-nav-wrapper { padding: 25px 80px; }
.site-title { display: block; width: 100%; margin-bottom: 20px; text-align: center; }
.site-title a { display: inline-block; width: 100px; height: 100px; pointer-events: auto; }
.site-title svg { width: 100px; height: 100px; }

/* ---------- banner media layer (moved by the parallax script) ---------- */
#parallax-images { background: var(--bg); }
.image-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background: var(--bg); transform: translate3d(0, -100%, 0); }
.image-container img, .image-container .video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.image-container img, .image-container video { object-fit: cover; width: 100%; height: 100%; opacity: 0; transition: opacity .2s; }
.image-container img.loaded, .image-container video.loaded { opacity: 1; }
.image-overlay-wrapper { position: absolute; inset: 0; z-index: 9; background: rgba(18, 18, 18, .5); }

/* ---------- index sections ---------- */
.site-wrapper { position: relative; }
.parallax-item { position: relative; }
.title-desc-wrapper { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; min-height: 50vh; padding: 80px; overflow: hidden; text-align: center; }
.title-desc-wrapper.first { height: 100vh; padding: 253px 80px 80px; }
.title-desc-inner { position: relative; z-index: 100; display: flex; flex-direction: column; align-items: center; max-width: 800px; }
.page-title-wrapper { display: inline-block; padding: 15px 20px; }
.page-title { position: relative; display: inline-block; font: 400 72px/72px var(--bebas); letter-spacing: 13px; text-transform: uppercase; color: #f5f5f5; }
.page-title p { margin: 72px 0; }
.page-desc { position: relative; display: inline-block; margin-top: 25px; padding: 15px 20px; color: #d6d6d6; }
.page-desc p { min-height: 21.12px; font-size: 13.2px; line-height: 21.12px; letter-spacing: 1px; }
.scroll-arrow { position: absolute; bottom: 24px; left: 50%; z-index: 10; width: 150px; height: 30px; margin-left: -75px; display: flex; justify-content: center; align-items: center; color: #fff; }
.scroll-arrow span { font-size: 0; }
.scroll-arrow::after { content: ""; width: 10px; height: 10px; margin-top: -8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

.content { position: relative; z-index: 50; background: var(--bg); }
.content-inner { max-width: 960px; margin: 0 auto; padding: 100px 0; background: var(--bg); }
.layout { margin: 0 -17px; }
.row { display: flex; }
.col { min-width: 0; }
.span-2 { width: 16.6667%; } .span-3 { width: 25%; } .span-4 { width: 33.3333%; } .span-5 { width: 41.6667%; } .span-6 { width: 50%; } .span-12 { width: 100%; }
.blk { position: relative; padding: 17px; }
.layout > .blk:first-child, .blk--first, .blk--img { padding-top: 0; }
.layout > .blk:first-child { padding: 0 17px 17px; }
.blk--spacer { height: 68px; }

/* rich text */
.rte h1 { font: 400 36px/43.2px var(--bebas); letter-spacing: 2px; text-transform: uppercase; color: var(--head); margin-bottom: 18px; }
.rte h2 { font: 400 33.6px/40.32px var(--bebas); letter-spacing: 1px; text-transform: uppercase; color: var(--head); margin-bottom: 16.8px; }
.rte p + h2, .rte h3 + h2, .rte .spaced { margin-top: 33.6px; }
.rte h3 { font: 400 12px/14.4px "Space Mono", var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #fff; margin: 12px 0 6px; }
.rte h2 + h3 { margin-top: 12px; }
.rte p { margin: 12px 0; }
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte a { text-decoration: underline; }
.rte a:hover { text-decoration: none; }
.rte h3 a { color: var(--link); }
.center { text-align: center; }

/* buttons */
.btn-wrap { display: flex; }
.btn-wrap--center { justify-content: center; }
.btn { display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-family: var(--bebas); text-align: center; }
.btn--medium { font-size: 31px; line-height: 37px; padding: 21px 34px; color: #000; background: rgba(255, 255, 255, .93); border-radius: 3px; transition: .1s opacity linear; }
.btn--medium:hover, .btn--medium:focus { color: #000; opacity: .8; }
.btn--small { font-size: 21px; line-height: 25px; padding: 13px 26px; color: #fff; border: 2px solid #fff; background: transparent; transition: .1s background-color linear, .1s color linear; }
.btn--small:hover, .btn--small:focus { color: #1d1d1d; background: #fff; }

/* images inside the dark blocks fade in once loaded */
.square { position: relative; padding-bottom: 100%; overflow: hidden; }
.square img, .feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-out; }
.square img.loaded, .feature img.loaded { opacity: 1; }
.feature { position: relative; padding-bottom: 71.35%; overflow: hidden; }

/* space video, map */
.video-wrap { position: relative; padding-bottom: 52.58%; background: #000; }
.video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map { position: relative; height: 494px; overflow: hidden; background: #222; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }

/* press */
.press-big { display: flex; align-items: center; justify-content: center; height: 187px; font: 400 230px/1 var(--bebas); letter-spacing: 6px; color: #fff; overflow: hidden; }
.logo-grid { display: flex; flex-wrap: wrap; width: 996px; margin-right: -36px; }
.logo-grid .slide { width: 199px; }
.logo-tile { display: flex; align-items: center; justify-content: center; width: 163px; height: 163px; margin: 0 36px 36px 0; text-align: center; color: #fff; text-transform: uppercase; }
.logo-tile--0 { font: 400 30px/1 var(--bebas); letter-spacing: 1px; }
.logo-tile--1 { font: italic 700 20px/1 Georgia, serif; text-transform: none; }
.logo-tile--2 { font: 700 16px/1 var(--mono); letter-spacing: 3px; }
.logo-tile--3 { font: 400 34px/1 Georgia, serif; letter-spacing: -1px; }
.logo-tile--4 { font: 400 15px/1.3 "Space Mono", monospace; letter-spacing: 2px; }

/* club buttons */
.blk--pill { display: flex; justify-content: center; }
.pill { display: flex; align-items: center; justify-content: center; width: 126px; height: 40px; background: #fff; border-radius: 3px; color: #151515; font: 400 15px/1 var(--bebas); letter-spacing: 1px; text-transform: uppercase; }
.pill:hover { color: #151515; opacity: .85; }

/* ---------- footer ---------- */
#footer { position: relative; background: var(--bg); color: #fff; }
#footer .rte h2, #footer .rte h3, #footer .rte p, #footer a { color: #fff; }
.footer-wrapper { max-width: 960px; margin: 0 auto; padding: 80px 0; }
#footer .blk { padding: 0 17px; }
#footer .blk--follow { padding-bottom: 17px; }
#footer .blk--social { padding: 17px; }
.back-to-top-link { position: absolute; top: -25px; left: 50%; z-index: 100; width: 50px; height: 50px; margin-left: -25px; padding-top: 2px; border-radius: 50%; background: var(--bg); text-align: center; }
.back-to-top-link a { display: block; padding: 4px 0 0 2px; font: 400 12px/12px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--text) !important; }
.back-to-top-link .arrow { display: block; width: 16px; height: 16px; margin: 0 auto 4px; position: relative; }
.back-to-top-link .arrow::after { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border: solid currentColor; border-width: 1px 0 0 1px; transform: rotate(45deg); }
.social { display: flex; gap: 8px; }
.social a { display: flex; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--bg) !important; transition: background-color 170ms ease-in-out; }
.social a:hover { background: rgba(255, 255, 255, .7); }
.social svg { width: 28px; height: 28px; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .title-nav-wrapper { padding: 20px 0 0; }
  .site-title { margin-bottom: 0; }
  .title-desc-wrapper { padding: 0 20px; min-height: 50vh; }
  .page-title.long { font-size: 52px; line-height: 56px; letter-spacing: 8px; }
  .title-desc-wrapper.first { height: 100vh; padding: 162px 0 0; }
  .title-desc-inner { padding: 0 20px; }
  .page-desc { margin-top: 20px; }
  .scroll-arrow { bottom: 24px; }
  /* no parallax on phones: each banner keeps its own photo/video */
  .title-desc-wrapper .image-container { position: absolute; inset: 0; height: 100%; transform: none !important; z-index: -1; }
  .title-desc-wrapper .image-container img, .title-desc-wrapper .image-container video { transform: none !important; }
  .content-inner { padding: 20px; }
  .row { display: block; margin: 0 -17px; }
  .col { width: 100% !important; }
  .layout { margin: 0 -17px; }
  .logo-grid { width: auto; margin-right: 0; justify-content: center; }
  .logo-grid .slide { width: 50%; display: flex; justify-content: center; }
  .logo-tile { margin: 0 0 20px; width: 140px; height: 120px; }
  .press-big { font-size: 180px; height: 160px; }
  .map { height: 197px; }
  .blk--pill { padding: 10px 17px; }
  .footer-wrapper { padding: 20px; }
  #footer .col + .col { margin-top: 30px; }
}