

.wrap {
  width: 100%;
  max-width: 68.75em;
  margin: 0 auto;
}

.wrap-n {
  width: 100%;
  max-width: 56.25em;
  margin: 0 auto;
}



.hdr {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.85em max(1.25em, calc((100% - 68.75em) / 2));
  background: rgba(20, 20, 20, 0.94);
  border-bottom: 0.0625em solid var(--line-soft);
  backdrop-filter: blur(0.5em);
}

.hdr-br {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
}

.hdr-br:hover {
  text-decoration: none;
}

.hdr-mk {
  height: 2.2em;
  width: auto;
}

.hdr-nm {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.28em;
  letter-spacing: 0.06em;
  color: var(--content-strong);
  text-transform: uppercase;
}

.hdr-nv {
  margin-left: auto;
}

.hdr-bg {
  margin-left: auto;
}

.hdr-x {
  font-size: 2em;
  color: var(--content-muted);
}

.nv-ls {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 0.15em;
}

.nv-it {
  position: relative;
}

.nv-lk {
  display: block;
  color: var(--content-muted);
  font-size: 0.95em;
  letter-spacing: 0.02em;
  padding: 0.55em 0.9em;
}

.nv-lk:hover {
  color: var(--highlight);
  text-decoration: none;
}

.nv-cta {
  color: var(--highlight);
  border: 0.0625em solid var(--line);
  border-radius: 1em;
}



.mg-pn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25em;
  padding: 1em 0 0;
}

.mg-cl {
  display: grid;
  gap: 0.35em;
}

.mg-hd {
  font-size: 0.72em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--highlight);
}

.mg-lk {
  color: var(--content-faint);
  font-size: 0.92em;
}

.mg-lk:hover {
  color: var(--content-strong);
}

@media (min-width: 48em) {
  .mg-pn {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 46em;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75em;
    padding: 1.75em;
    background: var(--surface-raised);
    border: 0.0625em solid var(--line);
    border-radius: 0.875em;
    box-shadow: 0 1.5em 3em rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
  }

  .nv-mg:hover .mg-pn,
  .nv-mg:focus-within .mg-pn {
    opacity: 1;
    visibility: visible;
  }
}



.bnd {
  padding: 3.25em 1.25em;
  background: var(--surface-base);
}

.bnd-r {
  background: var(--surface-raised);
}

.bnd-s {
  background: var(--surface-sunken);
}

.gr-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75em, 1fr));
  gap: 2em;
}

.sp-hd {
  max-width: 34em;
  margin-bottom: 2.5em;
}

.kick {
  display: inline-block;
  font-size: 0.74em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 0.9em;
}



.zz {
  display: grid;
  gap: 3em;
  align-items: center;
}

.zz-hd {
  min-width: 0;
}

.zz-tx {
  min-width: 0;
}

.zz-pl {
  margin-top: 1.5em;
  background: var(--surface-raised);
  border: 0.0625em solid var(--line-soft);
  border-left: 0.1875em solid var(--highlight);
  border-radius: 0.875em;
  padding: 1.05em 1.3em;
}



.dvd {
  position: relative;
  height: 0;
}

.dvd::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.75em;
  height: 1.75em;
  background: var(--surface-base);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.45);
}

.dvd-r::after {
  background: var(--surface-raised);
}



.ftr {
  background: linear-gradient(135deg, #a41f1c 0%, #5f1012 55%, #241512 100%);
  color: #ffffff;
  padding: 3em 1.25em 1.5em;
}

.ftr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}

.ftr-co {
  min-width: 0;
}

.ftr-hd {
  font-size: 0.74em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.9em;
}

.ftr-ls {
  list-style: none;
  display: grid;
  gap: 0.45em;
}

.ftr-lk {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.94em;
}

.ftr-mk {
  height: 2.4em;
  width: auto;
  margin-bottom: 0.8em;
}

.ftr-nm {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.2em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  display: block;
  margin-bottom: 0.6em;
}

.ftr-tx {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.78);
}

.ftr-rule {
  border-top: 0.0625em solid rgba(255, 255, 255, 0.22);
  margin-top: 2.5em;
  padding-top: 1.4em;
}

.ftr-dis {
  font-size: 0.86em;
  color: rgba(255, 255, 255, 0.74);
  max-width: 48em;
  margin-bottom: 0.8em;
}

.ftr-cp {
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 48em) {
  .bnd {
    padding: 6em 2em;
  }

  .zz {
    grid-template-columns: 1fr 1fr;
  }

  .bnd:nth-of-type(odd) .zz-tx {
    order: 1;
  }

  .bnd:nth-of-type(odd) .zz-hd {
    order: 2;
  }

  .bnd:nth-of-type(even) .zz-tx {
    order: 2;
  }

  .bnd:nth-of-type(even) .zz-hd {
    order: 1;
  }

  .ftr-cols {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .ftr {
    padding: 4em 2em 2em;
  }
}
